fix: force frontend builder stage to native platform, fixes QEMU arm64 npm crash

.env.example

@@ -1,7 +1,6 @@
 # Backend - server-side only (NEVER commit .env)
 SECRET_KEY=change_me_in_production
 SQLITE_PATH=./data/homelab.db
-# Set this to the URL(s) you use to access Homelable in your browser.
 CORS_ORIGINS=["http://localhost:5173","http://localhost:3000"]
 
 # Auth — default credentials: admin / admin
@@ -23,8 +22,3 @@ STATUS_CHECKER_INTERVAL=60
 # Generate keys: python3 -c "import secrets; print(secrets.token_hex(32))"
 MCP_API_KEY=mcp_sk_changeme
 MCP_SERVICE_KEY=svc_changeme
-
-# Live view — read-only public canvas at /view?key=<value>
-# Off by default. Set to a random secret to enable.
-# Generate: python3 -c "import secrets; print(secrets.token_urlsafe(32))"
-# LIVEVIEW_KEY=

.gitignore

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

Dockerfile.frontend

@@ -1,8 +1,7 @@
 # Stage 1: build
 # Use the native build platform so npm ci never runs under QEMU emulation.
 # The build output (static HTML/JS/CSS) is platform-independent.
-# node:20-slim (Debian/glibc) avoids lightningcss musl binary resolution issues on Alpine.
-FROM --platform=$BUILDPLATFORM node:20-slim AS builder
+FROM --platform=$BUILDPLATFORM node:20-alpine AS builder
 
 ARG VITE_STANDALONE=false
 ENV VITE_STANDALONE=$VITE_STANDALONE

INSTALLATION.md

@@ -11,18 +11,9 @@ Open **http://localhost:3000** — login with `admin` / `admin`.
 
 > Change the password before exposing to a network: edit `.env` and update `AUTH_USERNAME` / `AUTH_PASSWORD_HASH`.
 >
-Generate a new hash: 
-```bash 
-docker compose exec backend python -c "from passlib.context import CryptContext; print(CryptContext(schemes=['bcrypt']).hash('yourpassword'))"
-```
-
-
-⚠️ **bcrypt hashes contain `$` characters** — how to handle them depends on where you set the value:
- - **`.env` file** (recommended): wrap the hash in single quotes → `AUTH_PASSWORD_HASH='$2b$12$...'`
- - **`docker-compose.yml` `environment:` block**: escape every `$` as `$$` — use this command to generate a pre-escaped hash:
-   ```bash
-   docker compose exec backend python -c "from passlib.context import CryptContext; print(CryptContext(schemes=['bcrypt']).hash('yourpassword').replace('\$', '\$\$'))"
-   ```
+> Generate a new hash: `docker compose exec backend python -c "from passlib.context import CryptContext; print(CryptContext(schemes=['bcrypt']).hash('yourpassword'))"`
+>
+> ⚠️ Keep the single quotes around the hash value in `.env` — bcrypt hashes contain `$` characters that Docker Compose would otherwise misinterpret.
 
 ## Quick Start — Frontend only
 
@@ -53,13 +44,37 @@ docker compose up -d
 
 ## Proxmox LXC Install
 
-You can now install Homelable with community-scripts (proxmox-VE) : 
-
-`https://community-scripts.org/scripts/homelable`
-
+Run this **on the Proxmox host** — it creates a Debian 12 LXC container and installs Homelable inside automatically:
 
 ```bash
-bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/homelable.sh)"
+bash <(curl -fsSL https://raw.githubusercontent.com/Pouzor/homelable/main/scripts/install-proxmox.sh)
+```
+
+Default container settings: 2 cores, 1 GB RAM, 8 GB disk, DHCP on `vmbr0`. Override before running:
+
+```bash
+CTID=150 RAM=2048 STORAGE=local-zfs bash <(curl -fsSL .../install-proxmox.sh)
+```
+
+The backend runs as a systemd service, the frontend is served via nginx on port 80.
+
+> To install manually inside an existing Debian/Ubuntu machine or LXC:
+> ```bash
+> bash <(curl -fsSL https://raw.githubusercontent.com/Pouzor/homelable/main/scripts/lxc-install.sh)
+> ```
+
+### Update (LXC)
+
+Run the update script inside the container (pulls latest code, rebuilds frontend, restarts services — `.env` and database are never touched):
+
+```bash
+sudo bash /opt/homelable/scripts/update.sh
+```
+
+Or directly from GitHub:
+
+```bash
+sudo bash <(curl -fsSL https://raw.githubusercontent.com/Pouzor/homelable/main/scripts/update.sh)
 ```
 
 ---

README.md

@@ -16,8 +16,8 @@ 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 src="docs/homelable3.png" alt="Homelable sidebar and scan" width="40%" />
+  <img src="docs/homelable4.png" alt="Homelable edit pannel" width="40%" />
 </p>
 
 ---
@@ -74,31 +74,6 @@ Homelable continuously monitors your nodes and displays their live status (onlin
 
 ---
 
-## 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.
-
-### Activation
-
-Add LIVEVIEW_KEY to your .env:
-
-`LIVEVIEW_KEY=your-secret-key`
-
-
-Then restart the backend:
-
-`docker compose restart backend`
-
-### Usage
-
-Use this URL to view your canvas:
-
-http://<your-homelab-ip>/view?key=your-secret-key
-
-The page shows your canvas in pan/zoom-only mode — no editing, no credentials needed. Clicking a node that has an IP opens it in a new tab.
-
----
-
 ## MCP Server (AI Integration) (optionnal)
 
 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.

backend/app/api/routes/liveview.py

@@ -1,41 +0,0 @@
-import hmac
-from typing import Any
-
-from fastapi import APIRouter, Depends, HTTPException, Query
-from sqlalchemy import 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 CanvasState, Edge, Node
-from app.schemas.canvas import CanvasStateResponse
-from app.schemas.edges import EdgeResponse
-from app.schemas.nodes import NodeResponse
-
-router = APIRouter()
-
-
-@router.get("", response_model=CanvasStateResponse)
-async def liveview_canvas(
-    key: str | None = Query(default=None),
-    db: AsyncSession = Depends(get_db),
-) -> CanvasStateResponse:
-    """Read-only public canvas endpoint.
-
-    Disabled by default — requires LIVEVIEW_KEY to be set in .env.
-    Always returns 403 when disabled, regardless of the key provided.
-    """
-    if not settings.liveview_key:
-        raise HTTPException(status_code=403, detail="Live view is disabled")
-    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()
-    edges = (await db.execute(select(Edge))).scalars().all()
-    state = await db.get(CanvasState, 1)
-    viewport: dict[str, Any] = state.viewport if state else {"x": 0, "y": 0, "zoom": 1}
-    return CanvasStateResponse(
-        nodes=[NodeResponse.model_validate(n) for n in nodes],
-        edges=[EdgeResponse.model_validate(e) for e in edges],
-        viewport=viewport,
-    )

backend/app/api/routes/scan.py

@@ -1,10 +1,8 @@
-import ipaddress
 import logging
-import uuid
 from typing import Any
 
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException
-from pydantic import BaseModel, field_validator
+from pydantic import BaseModel
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
@@ -14,21 +12,12 @@ from app.db.database import AsyncSessionLocal, get_db
 from app.db.models import Node, PendingDevice, 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 run_scan
 
 
 class ScanConfig(BaseModel):
     ranges: list[str]
-
-    @field_validator("ranges")
-    @classmethod
-    def validate_cidr(cls, v: list[str]) -> list[str]:
-        for r in v:
-            try:
-                ipaddress.ip_network(r, strict=False)
-            except ValueError as exc:
-                raise ValueError(f"Invalid CIDR range: {r!r}") from exc
-        return v
+    interval_seconds: int
 
 
 logger = logging.getLogger(__name__)
@@ -55,44 +44,12 @@ async def trigger_scan(
     return run
 
 
-@router.post("/{run_id}/stop", response_model=dict)
-async def stop_scan(
-    run_id: str,
-    db: AsyncSession = Depends(get_db),
-    _: str = Depends(get_current_user),
-) -> dict[str, bool]:
-    try:
-        uuid.UUID(run_id)
-    except ValueError:
-        raise HTTPException(status_code=400, detail="Invalid run_id format") from None
-    run = await db.get(ScanRun, run_id)
-    if not run:
-        raise HTTPException(status_code=404, detail="Scan run not found")
-    if run.status != "running":
-        raise HTTPException(status_code=409, detail="Scan is not running")
-    request_cancel(run_id)
-    return {"stopping": True}
-
-
 @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"))
     return list(result.scalars().all())
 
 
-@router.delete("/pending", response_model=dict)
-async def clear_pending(
-    db: AsyncSession = Depends(get_db),
-    _: str = Depends(get_current_user),
-) -> dict[str, int]:
-    result = await db.execute(select(PendingDevice).where(PendingDevice.status == "pending"))
-    devices = result.scalars().all()
-    for device in devices:
-        await db.delete(device)
-    await db.commit()
-    return {"deleted": len(devices)}
-
-
 @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"))
@@ -121,10 +78,9 @@ async def hide_device(
     device_id: str, db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)
 ) -> dict[str, bool]:
     device = await db.get(PendingDevice, device_id)
-    if not device:
-        raise HTTPException(status_code=404, detail="Device not found")
-    device.status = "hidden"
-    await db.commit()
+    if device:
+        device.status = "hidden"
+        await db.commit()
     return {"hidden": True}
 
 
@@ -133,10 +89,9 @@ async def ignore_device(
     device_id: str, db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)
 ) -> dict[str, bool]:
     device = await db.get(PendingDevice, device_id)
-    if not device:
-        raise HTTPException(status_code=404, detail="Device not found")
-    await db.delete(device)
-    await db.commit()
+    if device:
+        await db.delete(device)
+        await db.commit()
     return {"ignored": True}
 
 
@@ -148,15 +103,18 @@ 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,
+        interval_seconds=settings.status_checker_interval,
+    )
 
 
 @router.post("/config", response_model=ScanConfig)
 async def update_scan_config(payload: ScanConfig, _: str = Depends(get_current_user)) -> ScanConfig:
     try:
         settings.scanner_ranges = payload.ranges
+        settings.status_checker_interval = payload.interval_seconds
         settings.save_overrides()
         return payload
     except Exception as exc:
-        logger.error("Failed to save scan config: %s", exc)
-        raise HTTPException(status_code=500, detail="Failed to save scan config") from exc
+        raise HTTPException(status_code=500, detail=str(exc)) from exc

backend/app/api/routes/settings.py

@@ -1,29 +0,0 @@
-"""App-level settings (status checker interval, etc.)."""
-from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel
-
-from app.api.deps import get_current_user
-from app.core.config import settings
-
-router = APIRouter()
-
-
-class AppSettings(BaseModel):
-    interval_seconds: int
-
-
-@router.get("", response_model=AppSettings)
-async def get_settings(_: str = Depends(get_current_user)) -> AppSettings:
-    return AppSettings(interval_seconds=settings.status_checker_interval)
-
-
-@router.post("", response_model=AppSettings)
-async def update_settings(
-    payload: AppSettings, _: str = Depends(get_current_user)
-) -> AppSettings:
-    try:
-        settings.status_checker_interval = payload.interval_seconds
-        settings.save_overrides()
-        return payload
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=str(exc)) from exc

backend/app/core/config.py

@@ -1,12 +1,8 @@
 import json
-import logging
 from pathlib import Path
 
-from pydantic import model_validator
 from pydantic_settings import BaseSettings, SettingsConfigDict
 
-logger = logging.getLogger(__name__)
-
 
 class Settings(BaseSettings):
     model_config = SettingsConfigDict(env_file=".env", env_file_encoding="utf-8")
@@ -23,17 +19,6 @@ class Settings(BaseSettings):
     auth_username: str = "admin"
     auth_password_hash: str = ""
 
-    @model_validator(mode="after")
-    def check_password_hash(self) -> "Settings":
-        h = self.auth_password_hash
-        if h and not h.startswith("$2"):
-            logger.error(
-                "AUTH_PASSWORD_HASH looks invalid (does not start with '$2b$'). "
-                "bcrypt hashes contain '$' signs — wrap the value in single quotes "
-                "in your .env file: AUTH_PASSWORD_HASH='$2b$12$...'"
-            )
-        return self
-
     # Scanner
     scanner_ranges: list[str] = ["192.168.1.0/24"]
 
@@ -45,11 +30,6 @@ class Settings(BaseSettings):
     # Leave empty to disable MCP service key auth.
     mcp_service_key: str = ""
 
-    # Live view — optional read-only public canvas endpoint.
-    # Set to a random secret string to enable /api/v1/liveview?key=<value>.
-    # Leave unset (or empty) to keep the feature disabled (default).
-    liveview_key: str | None = None
-
     def _override_path(self) -> Path:
         return Path(self.sqlite_path).parent / "scan_config.json"
 

backend/app/core/scheduler.py

@@ -1,5 +1,4 @@
 """APScheduler setup for background scan and status check jobs."""
-import asyncio
 import logging
 from datetime import datetime, timezone
 
@@ -16,94 +15,43 @@ logger = logging.getLogger(__name__)
 scheduler: AsyncIOScheduler = AsyncIOScheduler()
 
 
-async def _check_single_node(
-    node_id: str,
-    check_method: str,
-    check_target: str | None,
-    ip: str | None,
-) -> tuple[str, dict[str, object] | None]:
-    """Run a single node check; returns (node_id, result_or_None).
-
-    Accepts plain scalars — not an ORM object — so there is no risk of
-    DetachedInstanceError when the originating session has already closed.
-    """
+async def _run_status_checks() -> None:
+    """Check all nodes and broadcast results via WebSocket."""
     from app.api.routes.status import broadcast_status  # avoid circular import
 
-    try:
-        check_result = await check_node(check_method, check_target, ip)
-        now = datetime.now(timezone.utc)
-        async with AsyncSessionLocal() as db:
-            n = await db.get(Node, node_id)
-            if n:
-                n.status = check_result["status"]
-                n.response_time_ms = check_result["response_time_ms"]
-                if check_result["status"] == "online":
-                    n.last_seen = now
-                await db.commit()
-        await broadcast_status(
-            node_id=node_id,
-            status=check_result["status"],
-            checked_at=now.isoformat(),
-            response_time_ms=check_result["response_time_ms"],
-        )
-        return node_id, check_result
-    except Exception as exc:
-        logger.error("Status check failed for node %s: %s", node_id, exc)
-        return node_id, None
-
-
-async def _run_status_checks() -> None:
-    """Check all nodes concurrently and broadcast results via WebSocket."""
     async with AsyncSessionLocal() as db:
         result = await db.execute(select(Node))
         nodes = result.scalars().all()
-        # Extract scalars while the session is open to avoid DetachedInstanceError
-        checkable = [
-            (n.id, n.check_method, n.check_target, n.ip)
-            for n in nodes
-            if n.check_method
-        ]
 
-    if not checkable:
-        return
-
-    await asyncio.gather(*[
-        _check_single_node(node_id, method, target, ip)
-        for node_id, method, target, ip in checkable
-    ])
+    for node in nodes:
+        if not node.check_method:
+            continue
+        try:
+            check_result = await check_node(node.check_method, node.check_target, node.ip)
+            async with AsyncSessionLocal() as db:
+                n = await db.get(Node, node.id)
+                if n:
+                    n.status = check_result["status"]
+                    n.response_time_ms = check_result["response_time_ms"]
+                    n.last_seen = datetime.now(timezone.utc) if check_result["status"] == "online" else n.last_seen
+                    await db.commit()
+            await broadcast_status(
+                node_id=node.id,
+                status=check_result["status"],
+                checked_at=datetime.now(timezone.utc).isoformat(),
+                response_time_ms=check_result["response_time_ms"],
+            )
+        except Exception as exc:
+            logger.error("Status check failed for node %s: %s", node.id, exc)
 
 
 def start_scheduler() -> None:
     global scheduler
-    if scheduler.running:
-        try:
-            scheduler.shutdown(wait=False)
-        except Exception as exc:
-            logger.warning("Failed to shut down previous scheduler instance: %s", exc)
     scheduler = AsyncIOScheduler()
-    scheduler.add_job(
-        _run_status_checks,
-        "interval",
-        seconds=settings.status_checker_interval,
-        id="status_checks",
-        max_instances=1,
-        coalesce=True,
-    )
+    scheduler.add_job(_run_status_checks, "interval", seconds=settings.status_checker_interval, id="status_checks")
     scheduler.start()
     logger.info("Scheduler started — status checks every %ds", settings.status_checker_interval)
 
 
-def reschedule_status_checks(interval_seconds: int) -> None:
-    """Update the status check interval on the running scheduler."""
-    if interval_seconds < 10:
-        raise ValueError(f"interval_seconds must be >= 10, got {interval_seconds}")
-    if not scheduler.running:
-        logger.warning("Scheduler not running, skipping reschedule")
-        return
-    scheduler.reschedule_job("status_checks", trigger="interval", seconds=interval_seconds)
-    logger.info("Status checks rescheduled to every %ds", interval_seconds)
-
-
 def stop_scheduler() -> None:
-    if scheduler.running:
-        scheduler.shutdown(wait=False)
+    scheduler.shutdown(wait=False)

backend/app/core/security.py

@@ -9,10 +9,7 @@ pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 
 
 def verify_password(plain: str, hashed: str) -> bool:
-    try:
-        return bool(pwd_context.verify(plain, hashed))
-    except ValueError:
-        return False
+    return bool(pwd_context.verify(plain, hashed))
 
 
 def hash_password(password: str) -> str:

backend/app/db/database.py

@@ -2,7 +2,6 @@ from collections.abc import AsyncGenerator
 from contextlib import suppress
 from pathlib import Path
 
-from sqlalchemy.exc import OperationalError
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
 from sqlalchemy.orm import DeclarativeBase
 
@@ -27,83 +26,36 @@ async def init_db() -> None:
     async with engine.begin() as conn:
         await conn.run_sync(Base.metadata.create_all)
         # Add columns introduced after initial schema (idempotent)
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN container_mode BOOLEAN NOT NULL DEFAULT 0")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN custom_colors JSON")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN custom_color TEXT")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN path_style TEXT")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN custom_icon TEXT")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN source_handle TEXT")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN target_handle TEXT")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN animated BOOLEAN NOT NULL DEFAULT 0")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN cpu_count INTEGER")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN cpu_model TEXT")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN ram_gb REAL")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN disk_gb REAL")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN show_hardware BOOLEAN NOT NULL DEFAULT 0")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN width REAL")
-        with suppress(OperationalError):
+        with suppress(Exception):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN height REAL")
-        with suppress(OperationalError):
-            await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN bottom_handles INTEGER NOT NULL DEFAULT 1")
-        with suppress(OperationalError):
-            await conn.exec_driver_sql("ALTER TABLE pending_devices ADD COLUMN discovery_source TEXT")
-        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")
-        # 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():
-                node_id, cpu_model, cpu_count, ram_gb, disk_gb, show_hardware = row
-                props = []
-                visible = bool(show_hardware)
-                if cpu_model:
-                    props.append({"key": "CPU Model", "value": str(cpu_model), "icon": "Cpu", "visible": visible})
-                if cpu_count is not None:
-                    props.append({"key": "CPU Cores", "value": str(cpu_count), "icon": "Cpu", "visible": visible})
-                if ram_gb is not 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),
-                )
-        # 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")
-        with suppress(OperationalError):
-            sql = "UPDATE edges SET animated = 'none' WHERE animated = '0' OR animated = 0 OR animated IS NULL"
-            await conn.exec_driver_sql(sql)
-        # Ensure existing proxmox nodes have container_mode=1 (they were always containers before the flag existed)
-        with suppress(OperationalError):
-            await conn.exec_driver_sql(
-                "UPDATE nodes SET container_mode = 1 WHERE type = 'proxmox' AND container_mode = 0"
-            )
-        # Rename legacy 'docker' type → 'docker_container'
-        with suppress(OperationalError):
-            await conn.exec_driver_sql(
-                "UPDATE nodes SET type = 'docker_container' WHERE type = 'docker'"
-            )
 
 
 async def get_db() -> AsyncGenerator[AsyncSession, None]:

backend/app/db/models.py

@@ -33,7 +33,7 @@ class Node(Base):
     notes: Mapped[str | None] = mapped_column(Text)
     pos_x: Mapped[float] = mapped_column(Float, default=0)
     pos_y: Mapped[float] = mapped_column(Float, default=0)
-    parent_id: Mapped[str | None] = mapped_column(String, ForeignKey("nodes.id", ondelete="CASCADE"))
+    parent_id: Mapped[str | None] = mapped_column(String, ForeignKey("nodes.id"))
     container_mode: Mapped[bool] = mapped_column(Boolean, default=False)
     custom_colors: Mapped[dict[str, Any] | None] = mapped_column(JSON, nullable=True)
     custom_icon: Mapped[str | None] = mapped_column(String, nullable=True)
@@ -42,14 +42,13 @@ 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)
-    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)
     last_seen: 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)
+
     children: Mapped[list["Node"]] = relationship("Node", back_populates="parent")
     parent: Mapped["Node | None"] = relationship("Node", back_populates="children", remote_side=[id])
 
@@ -66,10 +65,9 @@ class Edge(Base):
     speed: Mapped[str | None] = mapped_column(String)
     custom_color: Mapped[str | None] = mapped_column(String)
     path_style: Mapped[str | None] = mapped_column(String)
-    animated: Mapped[str] = mapped_column(String, nullable=False, default='none')
+    animated: Mapped[bool] = mapped_column(Boolean, default=False)
     source_handle: Mapped[str | None] = mapped_column(String)
     target_handle: Mapped[str | None] = mapped_column(String)
-    waypoints: Mapped[list[dict[str, float]] | None] = mapped_column(JSON, nullable=True)
     created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
 
 
@@ -92,7 +90,6 @@ class PendingDevice(Base):
     services: Mapped[list[Any]] = mapped_column(JSON, default=list)
     suggested_type: Mapped[str | None] = mapped_column(String)
     status: Mapped[str] = mapped_column(String, default="pending")
-    discovery_source: Mapped[str | None] = mapped_column(String)
     discovered_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
 
 

backend/app/main.py

@@ -1,5 +1,3 @@
-import logging
-import logging.config
 from collections.abc import AsyncGenerator
 from contextlib import asynccontextmanager
 from typing import Any
@@ -7,8 +5,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
-from app.api.routes import settings as settings_routes
+from app.api.routes import auth, canvas, edges, nodes, scan, status
 from app.core.config import settings
 from app.core.scheduler import start_scheduler, stop_scheduler
 from app.db.database import init_db
@@ -16,16 +13,6 @@ from app.db.database import init_db
 
 @asynccontextmanager
 async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
-    # Ensure app logs are visible: attach a handler to the root logger if none
-    # exists (uvicorn only installs handlers on its own loggers, not the root).
-    root_logger = logging.getLogger()
-    if not root_logger.handlers:
-        handler = logging.StreamHandler()
-        handler.setFormatter(logging.Formatter("%(levelname)s:%(name)s:%(message)s"))
-        root_logger.addHandler(handler)
-    root_logger.setLevel(logging.INFO)
-    logging.getLogger("app").setLevel(logging.INFO)
-    logging.getLogger("app.services.scanner").setLevel(logging.INFO)
     await init_db()
     settings.load_overrides()
     start_scheduler()
@@ -35,7 +22,7 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
 
 app = FastAPI(
     title="Homelable API",
-    version="1.9.0",
+    version="1.3.3",
     lifespan=lifespan,
 )
 
@@ -53,8 +40,6 @@ 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(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.get("/api/v1/health")

backend/app/schemas/canvas.py

@@ -1,10 +1,9 @@
 from typing import Any
 
-from pydantic import BaseModel, field_validator
+from pydantic import BaseModel
 
 from app.schemas.edges import EdgeResponse
 from app.schemas.nodes import NodeResponse
-from app.schemas.utils import normalize_animated
 
 
 class NodeSave(BaseModel):
@@ -29,10 +28,8 @@ class NodeSave(BaseModel):
     ram_gb: float | None = None
     disk_gb: float | None = None
     show_hardware: bool = False
-    properties: list[Any] = []
     width: float | None = None
     height: float | None = None
-    bottom_handles: int = 1
     pos_x: float = 0
     pos_y: float = 0
 
@@ -47,15 +44,9 @@ class EdgeSave(BaseModel):
     speed: str | None = None
     custom_color: str | None = None
     path_style: str | None = None
-    animated: str = 'none'
+    animated: bool = False
     source_handle: str | None = None
     target_handle: str | None = None
-    waypoints: list[dict[str, float]] | None = None
-
-    @field_validator('animated', mode='before')
-    @classmethod
-    def validate_animated(cls, v: object) -> str:
-        return normalize_animated(v)
 
 
 class CanvasSaveRequest(BaseModel):

backend/app/schemas/edges.py

@@ -1,8 +1,6 @@
 from datetime import datetime
 
-from pydantic import BaseModel, field_validator
-
-from app.schemas.utils import normalize_animated
+from pydantic import BaseModel
 
 
 class EdgeBase(BaseModel):
@@ -14,15 +12,9 @@ class EdgeBase(BaseModel):
     speed: str | None = None
     custom_color: str | None = None
     path_style: str | None = None
-    animated: str = 'none'
+    animated: bool = False
     source_handle: str | None = None
     target_handle: str | None = None
-    waypoints: list[dict[str, float]] | None = None
-
-    @field_validator('animated', mode='before')
-    @classmethod
-    def validate_animated(cls, v: object) -> str:
-        return normalize_animated(v)
 
 
 class EdgeCreate(EdgeBase):
@@ -36,17 +28,9 @@ class EdgeUpdate(BaseModel):
     speed: str | None = None
     custom_color: str | None = None
     path_style: str | None = None
-    animated: str | None = None
+    animated: bool | None = None
     source_handle: str | None = None
     target_handle: str | None = None
-    waypoints: list[dict[str, float]] | None = None
-
-    @field_validator('animated', mode='before')
-    @classmethod
-    def validate_animated(cls, v: object) -> str | None:
-        if v is None:
-            return None
-        return normalize_animated(v)
 
 
 class EdgeResponse(EdgeBase):

backend/app/schemas/nodes.py

@@ -27,10 +27,8 @@ class NodeBase(BaseModel):
     ram_gb: float | None = None
     disk_gb: float | None = None
     show_hardware: bool = False
-    properties: list[dict[str, Any]] = []
     width: float | None = None
     height: float | None = None
-    bottom_handles: int = 1
 
 
 class NodeCreate(NodeBase):
@@ -60,10 +58,8 @@ class NodeUpdate(BaseModel):
     ram_gb: float | None = None
     disk_gb: float | None = None
     show_hardware: bool | None = None
-    properties: list[dict[str, Any]] | None = None
     width: float | None = None
     height: float | None = None
-    bottom_handles: int | None = None
 
 
 class NodeResponse(NodeBase):

backend/app/schemas/scan.py

@@ -13,7 +13,6 @@ class PendingDeviceResponse(BaseModel):
     services: list[Any]
     suggested_type: str | None
     status: str
-    discovery_source: str | None
     discovered_at: datetime
 
     model_config = {"from_attributes": True}

backend/app/schemas/utils.py

@@ -1,9 +0,0 @@
-def normalize_animated(v: object) -> str:
-    """Normalize legacy bool/int animated values to string mode ('none'/'snake'/'flow')."""
-    if v is True or v == 1 or v == '1':
-        return 'snake'
-    if v is False or v == 0 or v == '0' or v is None or v == 'none':
-        return 'none'
-    if v in ('snake', 'flow', 'basic'):
-        return str(v)
-    return 'none'

backend/app/services/fingerprint.py

@@ -65,46 +65,14 @@ def fingerprint_ports(open_ports: list[dict[str, Any]]) -> list[dict[str, Any]]:
     return results
 
 
-# Known OUI prefixes — lowercase, colon-separated, first 3 octets
+# Known OUI prefixes for virtual machines / hypervisors (lowercase, colon-separated)
 _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+)
+    "52:54:00": "vm",    # QEMU/KVM (used by Proxmox VMs)
+    "bc:24:11": "vm",    # Proxmox official OUI (VMs and LXC, Proxmox 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",
 }
 
 
@@ -133,13 +101,10 @@ _PORT_TYPE_HINTS: dict[int, str] = {
     37777: "camera",   # Dahua
     34567: "camera",   # Amcrest
     2020: "camera",    # Tapo
-    # Smart-home / MQTT / CoAP → iot
+    # Smart-home / MQTT → iot
     1883: "iot",
     8883: "iot",
-    6052: "iot",    # ESPHome dashboard
-    4915: "iot",    # Shelly CoIoT
-    5683: "iot",    # CoAP (Shelly Gen1, many IoT devices)
-    5684: "iot",    # CoAP DTLS
+    6052: "iot",    # ESPHome
     # AP / wireless
     8880: "ap",     # UniFi HTTP
     8443: "ap",     # UniFi HTTPS
@@ -150,13 +115,8 @@ _PORT_TYPE_HINTS: dict[int, str] = {
 
 
 def suggest_node_type(open_ports: list[dict[str, Any]], mac: str | None = None) -> str:
-    """Suggest a node type based on matched signatures, port hints, and MAC OUI."""
-    # IoT vendor MACs are a strong, unambiguous signal — don't let generic HTTP ports override
-    mac_type = suggest_type_from_mac(mac)
-    if mac_type == "iot":
-        return "iot"
-
-    priority = ["proxmox", "nas", "router", "lxc", "vm", "ap", "camera", "iot", "server", "switch"]
+    """Suggest a node type based on matched signatures and MAC OUI."""
+    priority = ["proxmox", "nas", "router", "lxc", "vm", "server", "ap", "camera", "iot", "switch"]
     found: set[str] = set()
     for p in open_ports:
         port = p["port"]
@@ -166,10 +126,10 @@ def suggest_node_type(open_ports: list[dict[str, Any]], mac: str | None = None)
             found.add(sig["suggested_node_type"])
         if port in _PORT_TYPE_HINTS:
             found.add(_PORT_TYPE_HINTS[port])
-
+    # MAC OUI is a lower-priority hint — only used if ports give no better answer
+    mac_type = suggest_type_from_mac(mac)
     if mac_type:
         found.add(mac_type)
-
     for t in priority:
         if t in found:
             return t

backend/app/services/scanner.py

@@ -1,48 +1,17 @@
-"""Network scanner: ARP sweep + nmap service detection + mDNS discovery."""
+"""Network scanner: ARP sweep + nmap service detection."""
 import asyncio
-import ipaddress
 import logging
-import os
-import re
 import socket
-import subprocess
-import threading
 from datetime import datetime, timezone
 from typing import Any
 
-from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.db.models import Node, PendingDevice, ScanRun
+from app.db.models import PendingDevice, ScanRun
 from app.services.fingerprint import fingerprint_ports, suggest_node_type
 
 logger = logging.getLogger(__name__)
 
-# Run IDs that have been requested to cancel (thread-safe via lock)
-_cancelled_runs: set[str] = set()
-_cancelled_lock = threading.Lock()
-
-# Port list for service detection (Phase 2)
-_EXTRA_PORTS = (
-    "80,443,22,21,23,25,53,110,143,161,162,179,389,445,548,"
-    "554,636,873,1883,1880,1935,2020,2375,2376,3000,3001,3306,"
-    "3389,4711,4915,5000,5001,5432,5601,5683,5684,5900,5984,"
-    "6052,6379,6432,6443,6767,6789,6800,7878,8000,8006,8080,"
-    "8081,8086,8088,8090,8096,8112,8123,8200,8291,8428,8443,"
-    "8554,8686,8789,8843,8880,8883,8971,8989,9000,9001,9090,"
-    "9091,9092,9093,9100,9117,9200,9300,9411,9443,9696,10051,"
-    "16686,34567,37777,51413,64738"
-)
-
-_MDNS_SERVICE_TYPES = [
-    "_http._tcp.local.",
-    "_shelly._tcp.local.",
-    "_esphomelib._tcp.local.",
-    "_hap._tcp.local.",        # HomeKit Accessory Protocol
-    "_mqtt._tcp.local.",
-    "_device-info._tcp.local.",
-]
-
 try:
     import nmap
     _NMAP_AVAILABLE = True
@@ -50,24 +19,50 @@ except ImportError:
     _NMAP_AVAILABLE = False
     logger.warning("python-nmap not available — scanner will run in mock mode")
 
-try:
-    from zeroconf import ServiceStateChange
-    from zeroconf.asyncio import AsyncServiceBrowser, AsyncServiceInfo, AsyncZeroconf
-    _ZEROCONF_AVAILABLE = True
-except ImportError:
-    _ZEROCONF_AVAILABLE = False
-    logger.warning("zeroconf not available — mDNS discovery disabled")
 
+def _nmap_scan(target: str) -> list[dict[str, Any]]:
+    """Run nmap -sV --open on target, return list of host dicts."""
+    if not _NMAP_AVAILABLE:
+        return _mock_scan(target)
 
-def request_cancel(run_id: str) -> None:
-    """Signal a running scan to stop early."""
-    with _cancelled_lock:
-        _cancelled_runs.add(run_id)
+    nm = nmap.PortScanner()
+    try:
+        # Home lab port range: standard top-1000 + common self-hosted service ports
+        extra_ports = (
+            "80,443,22,21,23,25,53,110,143,161,162,179,389,445,548,"
+            "554,636,873,1883,1880,1935,2020,2375,2376,3000,3001,3306,"
+            "3389,4711,5000,5001,5432,5601,5900,5984,6052,6379,6432,6443,"
+            "6767,6789,6800,7878,8000,8006,8080,8081,8086,8088,8090,8096,"
+            "8112,8123,8200,8291,8428,8443,8554,8686,8789,8843,8880,8883,"
+            "8971,8989,9000,9001,9090,9091,9092,9093,9100,9117,9200,9300,"
+            "9411,9443,9696,10051,16686,34567,37777,51413,64738"
+        )
+        nm.scan(hosts=target, arguments=f"-sV --open -T4 --host-timeout 120s -p {extra_ports}")
+    except Exception as exc:
+        logger.error("nmap scan failed: %s", exc)
+        raise RuntimeError(str(exc)) from exc
 
-
-def _is_cancelled(run_id: str) -> bool:
-    with _cancelled_lock:
-        return run_id in _cancelled_runs
+    hosts = []
+    for host in nm.all_hosts():
+        if nm[host].state() != "up":
+            continue
+        open_ports = []
+        for proto in nm[host].all_protocols():
+            for port, info in nm[host][proto].items():
+                if info["state"] == "open":
+                    open_ports.append({
+                        "port": port,
+                        "protocol": proto,
+                        "banner": info.get("product", "") + " " + info.get("version", ""),
+                    })
+        hosts.append({
+            "ip": host,
+            "hostname": _resolve_hostname(host),
+            "mac": nm[host].get("addresses", {}).get("mac"),
+            "os": _extract_os(nm, host),
+            "open_ports": open_ports,
+        })
+    return hosts
 
 
 def _resolve_hostname(ip: str) -> str | None:
@@ -87,278 +82,6 @@ def _extract_os(nm: object, host: str) -> str | None:
     return None
 
 
-def _arp_table_hosts(network: str) -> dict[str, dict[str, Any]]:
-    """
-    Read the OS ARP cache for recently-seen hosts in the target network.
-    Works without root on both Linux (/proc/net/arp) and macOS (arp -a).
-    Supplements nmap discovery — catches IoT and devices with all ports filtered.
-    """
-    try:
-        net = ipaddress.ip_network(network, strict=False)
-        found: dict[str, dict[str, Any]] = {}
-
-        # Linux: parse /proc/net/arp — present on any Linux kernel (including Docker)
-        proc_arp = "/proc/net/arp"
-        try:
-            with open(proc_arp) as f:
-                for line in f.readlines()[1:]:  # skip header row
-                    parts = line.split()
-                    if len(parts) >= 4:
-                        ip, mac = parts[0], parts[3]
-                        if mac == "00:00:00:00:00:00":
-                            continue
-                        try:
-                            if ipaddress.ip_address(ip) in net:
-                                found[ip] = {
-                                    "ip": ip, "mac": mac,
-                                    "hostname": _resolve_hostname(ip),
-                                    "os": None, "open_ports": [],
-                                }
-                        except ValueError:
-                            pass
-            # /proc/net/arp opened successfully — return whatever we found (may be empty)
-            # Don't fall through to `arp -a` since we're on Linux
-            return found
-        except FileNotFoundError:
-            pass  # Not Linux — fall through to macOS `arp -a`
-
-        # macOS: parse `arp -a` output
-        result = subprocess.run(["arp", "-a"], capture_output=True, text=True, timeout=5)
-        for line in result.stdout.splitlines():
-            m = re.search(r"\((\d+\.\d+\.\d+\.\d+)\)\s+at\s+([0-9a-f:]+)", line)
-            if not m:
-                continue
-            ip, mac = m.group(1), m.group(2)
-            if mac in ("(incomplete)", "ff:ff:ff:ff:ff:ff"):
-                continue
-            try:
-                if ipaddress.ip_address(ip) in net:
-                    found[ip] = {"ip": ip, "mac": mac, "hostname": _resolve_hostname(ip), "os": None, "open_ports": []}
-            except ValueError:
-                pass
-        return found
-    except Exception as exc:
-        logger.warning("[Phase 1] ARP cache lookup failed: %s", exc)
-        return {}
-
-
-async def _ping_sweep(target: str) -> 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).
-    Supplements with the OS ARP cache to catch devices that block ICMP.
-    Works in Docker with CAP_NET_RAW — no nmap, no false positives.
-    """
-    net = ipaddress.ip_network(target, strict=False)
-    all_ips = [str(ip) for ip in net.hosts()]
-    logger.info("[Phase 1] Pinging %d hosts in %s ...", len(all_ips), target)
-
-    sem = asyncio.Semaphore(50)
-
-    async def _ping(ip: str) -> str | None:
-        async with sem:
-            try:
-                proc = await asyncio.create_subprocess_exec(
-                    "ping", "-c", "1", "-W", "1", ip,
-                    stdout=asyncio.subprocess.DEVNULL,
-                    stderr=asyncio.subprocess.DEVNULL,
-                )
-                await proc.wait()
-                return ip if proc.returncode == 0 else None
-            except Exception:
-                return None
-
-    ping_results = await asyncio.gather(*[_ping(ip) for ip in all_ips])
-    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))
-
-    # 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)
-
-    alive: dict[str, dict[str, Any]] = {}
-
-    for ip in alive_ips:
-        mac = arp_cache.get(ip, {}).get("mac")
-        hostname = await asyncio.to_thread(_resolve_hostname, ip)
-        logger.info("[Phase 1] %s  mac=%s  hostname=%s  (ping)", ip, mac or "n/a", hostname or "n/a")
-        alive[ip] = {"ip": ip, "mac": mac, "hostname": hostname, "os": None, "open_ports": []}
-
-    for ip, host in arp_cache.items():
-        if ip not in alive:
-            logger.info(
-                "[Phase 1] %s  mac=%s  hostname=%s  (ARP cache only)",
-                ip, host.get("mac") or "n/a", host.get("hostname") or "n/a",
-            )
-            alive[ip] = host
-
-    return alive
-
-
-def _nmap_scan_single(host_dict: dict[str, Any]) -> 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.
-    """
-    ip = host_dict["ip"]
-    logger.info("[Phase 2] Scanning %s ...", ip)
-
-    if not _NMAP_AVAILABLE:
-        logger.warning("[Phase 2] nmap not available, skipping %s", ip)
-        return host_dict
-
-    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}"
-    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}"
-
-    logger.debug("[Phase 2] %s args: %s", ip, scan_args)
-    nm = nmap.PortScanner()
-    try:
-        nm.scan(hosts=ip, arguments=scan_args)
-    except Exception as exc:
-        logger.warning("[Phase 2] nmap FAILED for %s (%s: %s) — skipping port scan", ip, type(exc).__name__, exc)
-        return host_dict
-
-    all_scanned = nm.all_hosts()
-    logger.debug("[Phase 2] %s — nmap returned %d host(s) in results", ip, len(all_scanned))
-    if ip not in all_scanned:
-        logger.info("[Phase 2] %s — no open ports found (all closed/filtered or nmap had no results)", ip)
-        return host_dict
-
-    open_ports = []
-    for proto in nm[ip].all_protocols():
-        for port, info in nm[ip][proto].items():
-            if info["state"] == "open":
-                banner = (info.get("product", "") + " " + info.get("version", "")).strip()
-                open_ports.append({"port": port, "protocol": proto, "banner": banner})
-
-    if open_ports:
-        port_summary = ", ".join(
-            f"{p['port']}/{p['protocol']} ({p['banner'] or 'unknown'})" for p in open_ports
-        )
-        logger.info("[Phase 2] %s — %d open port(s): %s", ip, len(open_ports), port_summary)
-    else:
-        logger.info("[Phase 2] %s — 0 open ports detected", ip)
-
-    host_dict["open_ports"] = open_ports
-    if not host_dict["mac"]:
-        host_dict["mac"] = nm[ip].get("addresses", {}).get("mac")
-    host_dict["os"] = _extract_os(nm, ip)
-    return host_dict
-
-
-async def _nmap_port_scan(alive: dict[str, dict[str, Any]]) -> 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.
-    Up to 10 hosts scanned concurrently.
-    """
-    if not alive:
-        return []
-
-    logger.info("[Phase 2] Starting per-IP port scan for %d host(s)", len(alive))
-    semaphore = asyncio.Semaphore(10)
-
-    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)
-
-    raw = await asyncio.gather(*[_scan_with_sem(h) for h in alive.values()], return_exceptions=True)
-    results = []
-    for item in raw:
-        if isinstance(item, BaseException):
-            logger.warning("[Phase 2] Unexpected error in gather: %s", item)
-        else:
-            results.append(item)
-    logger.info("[Phase 2] Completed — %d/%d host(s) scanned", len(results), len(alive))
-    return results
-
-
-async def _nmap_scan(target: str) -> 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).
-    """
-    logger.info("[Scan] Starting scan for %s — nmap available: %s", target, _NMAP_AVAILABLE)
-    if not _NMAP_AVAILABLE:
-        logger.warning("[Scan] nmap not available — returning mock data")
-        return _mock_scan(target)
-    try:
-        alive = await _ping_sweep(target)
-        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)
-
-
-async def _mdns_discover(timeout: float = 4.0) -> list[dict[str, Any]]:
-    """
-    Passive mDNS/Bonjour sweep.
-    Returns devices advertising on _shelly._tcp, _esphomelib._tcp, _hap._tcp, etc.
-    Runs for `timeout` seconds then returns what it found.
-    """
-    if not _ZEROCONF_AVAILABLE:
-        return []
-
-    import ipaddress
-
-    found_services: list[tuple[str, str]] = []
-
-    def _on_change(
-        zeroconf: Any,
-        service_type: str,
-        name: str,
-        state_change: Any,
-    ) -> None:
-        if state_change == ServiceStateChange.Added:
-            found_services.append((service_type, name))
-
-    discovered: dict[str, dict[str, Any]] = {}
-
-    try:
-        async with AsyncZeroconf() as azc:
-            browser = AsyncServiceBrowser(
-                azc.zeroconf, _MDNS_SERVICE_TYPES, handlers=[_on_change]
-            )
-            await asyncio.sleep(timeout)
-            await browser.async_cancel()
-
-            for service_type, name in found_services:
-                try:
-                    info = AsyncServiceInfo(service_type, name)
-                    await info.async_request(azc.zeroconf, 3000)
-                    if not info.addresses:
-                        continue
-                    ip = str(ipaddress.IPv4Address(info.addresses[0]))
-                    if ip in discovered:
-                        continue
-                    discovered[ip] = {
-                        "ip": ip,
-                        "hostname": info.server,
-                        "mac": None,
-                        "os": None,
-                        "open_ports": (
-                            [{"port": info.port, "protocol": "tcp", "banner": ""}]
-                            if info.port else []
-                        ),
-                    }
-                except Exception as exc:
-                    logger.debug("mDNS resolution failed for %s: %s", name, exc)
-    except Exception as exc:
-        logger.warning("mDNS discovery error: %s", exc)
-
-    logger.info("mDNS discovery found %d device(s)", len(discovered))
-    return list(discovered.values())
-
-
 def _mock_scan(target: str) -> list[dict[str, Any]]:
     """Return fake results for dev/test environments without nmap."""
     return [
@@ -377,136 +100,73 @@ def _mock_scan(target: str) -> list[dict[str, Any]]:
 
 async def run_scan(ranges: list[str], db: AsyncSession, run_id: str) -> None:
     """Execute scan for given CIDR ranges and populate pending_devices."""
+    # Avoid circular import
+    from sqlalchemy import select
+
     from app.api.routes.status import broadcast_scan_update
 
     devices_found = 0
-    mdns_task: asyncio.Task[list[dict[str, Any]]] | None = None
     try:
-        # Validate all ranges are valid CIDRs before passing anything to nmap
-        for r in ranges:
-            try:
-                ipaddress.ip_network(r, strict=False)
-            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
-        canvas_ips_result = await db.execute(select(Node.ip).where(Node.ip.isnot(None)))
-        canvas_ips: set[str] = {row[0] for row in canvas_ips_result.fetchall()}
-
-        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
-        if canvas_ips:
-            from sqlalchemy import delete as sa_delete
-            await db.execute(
-                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())
-
-        # Track IPs found by nmap so mDNS doesn't duplicate them
-        nmap_ips: set[str] = set()
-
-        async def _process_host(host: dict[str, Any], discovery_source: str = "arp") -> None:
-            nonlocal devices_found
-            ip = host["ip"]
-
-            # Skip canvas nodes and user-hidden devices (sets pre-fetched before loop)
-            if ip in canvas_ips:
-                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"])
-            suggested_type = suggest_node_type(host["open_ports"], host.get("mac"))
-
-            existing_result = await db.execute(
-                select(PendingDevice).where(
-                    PendingDevice.ip == ip,
-                    PendingDevice.status == "pending",
-                )
-            )
-            existing = existing_result.scalar_one_or_none()
-            if existing:
-                existing.mac = host.get("mac") or existing.mac
-                existing.hostname = host.get("hostname") or existing.hostname
-                existing.os = host.get("os") or existing.os
-                existing.services = services
-                existing.suggested_type = suggested_type
-            else:
-                db.add(PendingDevice(
-                    ip=ip,
-                    mac=host.get("mac"),
-                    hostname=host.get("hostname"),
-                    os=host.get("os"),
-                    services=services,
-                    suggested_type=suggested_type,
-                    status="pending",
-                    discovery_source=discovery_source,
-                ))
-                devices_found += 1
-
-            await db.commit()
-            await broadcast_scan_update(run_id=run_id, devices_found=devices_found)
-
-        # nmap scan per CIDR — results stream in progressively
         for cidr in ranges:
-            if _is_cancelled(run_id):
-                break
-            hosts = await _nmap_scan(cidr)
+            # Run nmap in a thread pool — does not block the event loop
+            hosts = await asyncio.to_thread(_nmap_scan, cidr)
+
             for host in hosts:
-                if _is_cancelled(run_id):
-                    break
-                nmap_ips.add(host["ip"])
-                await _process_host(host)
+                services = fingerprint_ports(host["open_ports"])
+                suggested_type = suggest_node_type(host["open_ports"], host.get("mac"))
 
-        # Update ScanRun count once after all CIDR ranges
+                # Update existing pending device or create a new one
+                existing_result = await db.execute(
+                    select(PendingDevice).where(
+                        PendingDevice.ip == host["ip"],
+                        PendingDevice.status == "pending",
+                    )
+                )
+                existing = existing_result.scalar_one_or_none()
+                if existing:
+                    existing.mac = host.get("mac") or existing.mac
+                    existing.hostname = host.get("hostname") or existing.hostname
+                    existing.os = host.get("os") or existing.os
+                    existing.services = services
+                    existing.suggested_type = suggested_type
+                else:
+                    device = PendingDevice(
+                        ip=host["ip"],
+                        mac=host.get("mac"),
+                        hostname=host.get("hostname"),
+                        os=host.get("os"),
+                        services=services,
+                        suggested_type=suggested_type,
+                        status="pending",
+                    )
+                    db.add(device)
+                    devices_found += 1
+
+                # Commit immediately so the device is visible right away
+                await db.commit()
+
+                # Update running count on the scan run record
+                run = await db.get(ScanRun, run_id)
+                if run:
+                    run.devices_found = devices_found
+                    await db.commit()
+
+                # Push WS event so the frontend refreshes pending panel
+                await broadcast_scan_update(run_id=run_id, devices_found=devices_found)
+
+        # Mark scan as done
         run = await db.get(ScanRun, run_id)
         if run:
-            run.devices_found = devices_found
-            await db.commit()
-
-        # Collect mDNS results — task already has its own 4s internal timeout
-        if not _is_cancelled(run_id):
-            mdns_hosts = await mdns_task
-
-            for host in mdns_hosts:
-                if _is_cancelled(run_id):
-                    break
-                if host["ip"] in nmap_ips:
-                    continue  # already processed with richer nmap data
-                await _process_host(host, discovery_source="mdns")
-        else:
-            mdns_task.cancel()
-
-        # Mark scan as done or cancelled
-        run = await db.get(ScanRun, run_id)
-        if run:
-            run.status = "cancelled" if _is_cancelled(run_id) else "done"
+            run.status = "done"
             run.devices_found = devices_found
             run.finished_at = datetime.now(timezone.utc)
             await db.commit()
 
     except Exception as exc:
         logger.error("Scan failed: %s", exc)
-        if mdns_task is not None and not mdns_task.done():
-            mdns_task.cancel()
         run = await db.get(ScanRun, run_id)
         if run:
             run.status = "error"
             run.error = str(exc)
             run.finished_at = datetime.now(timezone.utc)
             await db.commit()
-    finally:
-        with _cancelled_lock:
-            _cancelled_runs.discard(run_id)

backend/app/services/status_checker.py

@@ -2,7 +2,6 @@
 import asyncio
 import logging
 import socket
-import sys
 import time
 from typing import Any
 
@@ -58,12 +57,8 @@ async def check_node(check_method: str, target: str | None, ip: str | None) -> d
 
 
 async def _ping(host: str) -> bool:
-    if sys.platform == "win32":
-        args = ["ping", "-n", "1", "-w", "1000", host]
-    else:
-        args = ["ping", "-c", "1", "-W", "1", host]
     proc = await asyncio.create_subprocess_exec(
-        *args,
+        "ping", "-c", "1", "-W", "1", host,
         stdout=asyncio.subprocess.DEVNULL,
         stderr=asyncio.subprocess.DEVNULL,
     )

backend/data/service_signatures.json

@@ -0,0 +1,146 @@
+[
+  {"port": 8006,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Proxmox VE",              "icon": "layers",      "category": "hypervisor",    "suggested_node_type": "proxmox"},
+
+  {"port": 5000,  "protocol": "tcp", "banner_regex": "synology|DSM",                    "service_name": "Synology DSM",            "icon": "hard-drive",  "category": "nas",           "suggested_node_type": "nas"},
+  {"port": 5001,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Synology DSM HTTPS",      "icon": "hard-drive",  "category": "nas",           "suggested_node_type": "nas"},
+  {"port": 5006,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Synology DSM Mobile",     "icon": "hard-drive",  "category": "nas",           "suggested_node_type": "nas"},
+  {"port": 8080,  "protocol": "tcp", "banner_regex": "QNAP|qnap|QTS",                  "service_name": "QNAP NAS",                "icon": "hard-drive",  "category": "nas",           "suggested_node_type": "nas"},
+  {"port": 5005,  "protocol": "tcp", "banner_regex": null,                              "service_name": "TrueNAS",                 "icon": "hard-drive",  "category": "nas",           "suggested_node_type": "nas"},
+  {"port": 445,   "protocol": "tcp", "banner_regex": null,                              "service_name": "SMB / CIFS",              "icon": "share-2",     "category": "storage",       "suggested_node_type": "nas"},
+  {"port": 2049,  "protocol": "tcp", "banner_regex": null,                              "service_name": "NFS",                     "icon": "share-2",     "category": "storage",       "suggested_node_type": "nas"},
+  {"port": 548,   "protocol": "tcp", "banner_regex": null,                              "service_name": "AFP (Apple Filing)",      "icon": "share-2",     "category": "storage",       "suggested_node_type": "nas"},
+  {"port": 873,   "protocol": "tcp", "banner_regex": null,                              "service_name": "rsync",                   "icon": "refresh-cw",  "category": "storage",       "suggested_node_type": "nas"},
+
+  {"port": 32400, "protocol": "tcp", "banner_regex": null,                              "service_name": "Plex Media Server",       "icon": "play-circle", "category": "media",         "suggested_node_type": "server"},
+  {"port": 32469, "protocol": "tcp", "banner_regex": null,                              "service_name": "Plex DLNA",               "icon": "play-circle", "category": "media",         "suggested_node_type": "server"},
+  {"port": 8096,  "protocol": "tcp", "banner_regex": "Jellyfin",                        "service_name": "Jellyfin",                "icon": "play-circle", "category": "media",         "suggested_node_type": "server"},
+  {"port": 8096,  "protocol": "tcp", "banner_regex": "Emby",                            "service_name": "Emby",                    "icon": "play-circle", "category": "media",         "suggested_node_type": "server"},
+  {"port": 8096,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Jellyfin / Emby",         "icon": "play-circle", "category": "media",         "suggested_node_type": "server"},
+  {"port": 8920,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Jellyfin HTTPS",          "icon": "play-circle", "category": "media",         "suggested_node_type": "server"},
+  {"port": 8181,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Tautulli",                "icon": "bar-chart",   "category": "media",         "suggested_node_type": "server"},
+  {"port": 8013,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Komga",                   "icon": "book-open",   "category": "media",         "suggested_node_type": "server"},
+  {"port": 1935,  "protocol": "tcp", "banner_regex": null,                              "service_name": "RTMP (Stream)",           "icon": "video",       "category": "media",         "suggested_node_type": "server"},
+
+  {"port": 8989,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Sonarr",                  "icon": "tv",          "category": "media",         "suggested_node_type": "server"},
+  {"port": 7878,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Radarr",                  "icon": "film",        "category": "media",         "suggested_node_type": "server"},
+  {"port": 8686,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Lidarr",                  "icon": "music",       "category": "media",         "suggested_node_type": "server"},
+  {"port": 9696,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Prowlarr",                "icon": "search",      "category": "media",         "suggested_node_type": "server"},
+  {"port": 8787,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Readarr",                 "icon": "book",        "category": "media",         "suggested_node_type": "server"},
+  {"port": 6767,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Bazarr",                  "icon": "subtitles",   "category": "media",         "suggested_node_type": "server"},
+  {"port": 5055,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Overseerr / Jellyseerr",  "icon": "search",      "category": "media",         "suggested_node_type": "server"},
+  {"port": 9117,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Jackett",                 "icon": "search",      "category": "media",         "suggested_node_type": "server"},
+  {"port": 6969,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Whisparr",                "icon": "film",        "category": "media",         "suggested_node_type": "server"},
+  {"port": 5454,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Notifiarr",               "icon": "bell",        "category": "media",         "suggested_node_type": "server"},
+  {"port": 8191,  "protocol": "tcp", "banner_regex": null,                              "service_name": "FlareSolverr",            "icon": "shield",      "category": "network",       "suggested_node_type": "server"},
+
+  {"port": 9091,  "protocol": "tcp", "banner_regex": "Transmission",                   "service_name": "Transmission",            "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+  {"port": 8112,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Deluge",                  "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+  {"port": 6789,  "protocol": "tcp", "banner_regex": null,                              "service_name": "NZBGet",                  "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+  {"port": 6800,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Aria2 RPC",               "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+  {"port": 51413, "protocol": "tcp", "banner_regex": null,                              "service_name": "Transmission BitTorrent", "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+  {"port": 6881,  "protocol": "tcp", "banner_regex": null,                              "service_name": "BitTorrent Peer",         "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+
+  {"port": 8123,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Home Assistant",          "icon": "home",        "category": "automation",    "suggested_node_type": "iot"},
+  {"port": 1883,  "protocol": "tcp", "banner_regex": null,                              "service_name": "MQTT Broker",             "icon": "radio",       "category": "iot",           "suggested_node_type": "iot"},
+  {"port": 8883,  "protocol": "tcp", "banner_regex": null,                              "service_name": "MQTT Broker TLS",         "icon": "radio",       "category": "iot",           "suggested_node_type": "iot"},
+  {"port": 6052,  "protocol": "tcp", "banner_regex": null,                              "service_name": "ESPHome",                 "icon": "cpu",         "category": "iot",           "suggested_node_type": "iot"},
+  {"port": 1880,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Node-RED",                "icon": "git-branch",  "category": "automation",    "suggested_node_type": "iot"},
+  {"port": 8971,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Frigate NVR",             "icon": "camera",      "category": "nvr",           "suggested_node_type": "camera"},
+  {"port": 10443, "protocol": "tcp", "banner_regex": null,                              "service_name": "Scrypted",                "icon": "camera",      "category": "nvr",           "suggested_node_type": "camera"},
+  {"port": 5000,  "protocol": "tcp", "banner_regex": "frigate",                         "service_name": "Frigate NVR",             "icon": "camera",      "category": "nvr",           "suggested_node_type": "camera"},
+  {"port": 8081,  "protocol": "tcp", "banner_regex": "iobroker|ioBroker",               "service_name": "ioBroker",                "icon": "cpu",         "category": "automation",    "suggested_node_type": "iot"},
+  {"port": 8080,  "protocol": "tcp", "banner_regex": "Domoticz|domoticz",               "service_name": "Domoticz",                "icon": "home",        "category": "automation",    "suggested_node_type": "iot"},
+  {"port": 5683,  "protocol": "udp", "banner_regex": null,                              "service_name": "CoAP (IoT)",              "icon": "radio",       "category": "iot",           "suggested_node_type": "iot"},
+
+  {"port": 554,   "protocol": "tcp", "banner_regex": null,                              "service_name": "RTSP (Camera)",           "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+  {"port": 8554,  "protocol": "tcp", "banner_regex": null,                              "service_name": "RTSP Alt (Camera)",       "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+  {"port": 37777, "protocol": "tcp", "banner_regex": null,                              "service_name": "Dahua Camera SDK",        "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+  {"port": 34567, "protocol": "tcp", "banner_regex": null,                              "service_name": "Amcrest / Dahua Camera",  "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+  {"port": 8000,  "protocol": "tcp", "banner_regex": "[Hh]ikvision|[Dd]ahua",          "service_name": "IP Camera SDK",           "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+  {"port": 2020,  "protocol": "tcp", "banner_regex": null,                              "service_name": "TP-Link Tapo Camera",     "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+  {"port": 9000,  "protocol": "tcp", "banner_regex": "[Rr]eolink",                      "service_name": "Reolink Camera",          "icon": "camera",      "category": "camera",        "suggested_node_type": "camera"},
+
+  {"port": 8291,  "protocol": "tcp", "banner_regex": null,                              "service_name": "MikroTik Winbox",         "icon": "router",      "category": "network",       "suggested_node_type": "router"},
+  {"port": 8880,  "protocol": "tcp", "banner_regex": null,                              "service_name": "UniFi HTTP Portal",       "icon": "wifi",        "category": "network",       "suggested_node_type": "ap"},
+  {"port": 8443,  "protocol": "tcp", "banner_regex": "[Uu]ni[Ff]i",                     "service_name": "UniFi Controller",        "icon": "wifi",        "category": "network",       "suggested_node_type": "ap"},
+  {"port": 4711,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Pi-hole API",             "icon": "shield",      "category": "network",       "suggested_node_type": "router"},
+  {"port": 3000,  "protocol": "tcp", "banner_regex": "[Aa]d[Gg]uard",                   "service_name": "AdGuard Home",            "icon": "shield",      "category": "network",       "suggested_node_type": "router"},
+  {"port": 81,    "protocol": "tcp", "banner_regex": null,                              "service_name": "Nginx Proxy Manager",     "icon": "arrow-right", "category": "network",       "suggested_node_type": "router"},
+  {"port": 23,    "protocol": "tcp", "banner_regex": null,                              "service_name": "Telnet",                  "icon": "terminal",    "category": "network",       "suggested_node_type": "switch"},
+  {"port": 161,   "protocol": "udp", "banner_regex": null,                              "service_name": "SNMP",                    "icon": "activity",    "category": "network",       "suggested_node_type": "switch"},
+
+  {"port": 8200,  "protocol": "tcp", "banner_regex": null,                              "service_name": "HashiCorp Vault",         "icon": "lock",        "category": "security",      "suggested_node_type": "server"},
+  {"port": 389,   "protocol": "tcp", "banner_regex": null,                              "service_name": "LDAP",                    "icon": "users",       "category": "auth",          "suggested_node_type": "server"},
+  {"port": 636,   "protocol": "tcp", "banner_regex": null,                              "service_name": "LDAPS",                   "icon": "users",       "category": "auth",          "suggested_node_type": "server"},
+  {"port": 9091,  "protocol": "tcp", "banner_regex": "[Aa]uthelia",                     "service_name": "Authelia",                "icon": "shield",      "category": "security",      "suggested_node_type": "server"},
+  {"port": 9000,  "protocol": "tcp", "banner_regex": "[Aa]uthentik",                    "service_name": "Authentik",               "icon": "shield",      "category": "security",      "suggested_node_type": "server"},
+  {"port": 8080,  "protocol": "tcp", "banner_regex": "[Kk]eycloak",                     "service_name": "Keycloak",                "icon": "shield",      "category": "auth",          "suggested_node_type": "server"},
+
+  {"port": 3000,  "protocol": "tcp", "banner_regex": "[Gg]rafana",                      "service_name": "Grafana",                 "icon": "bar-chart-2", "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 9090,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Prometheus",              "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 9093,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Alertmanager",            "icon": "bell",        "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 9100,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Node Exporter",           "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 8086,  "protocol": "tcp", "banner_regex": null,                              "service_name": "InfluxDB",                "icon": "database",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 3100,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Grafana Loki",            "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 8428,  "protocol": "tcp", "banner_regex": null,                              "service_name": "VictoriaMetrics",         "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 19999, "protocol": "tcp", "banner_regex": null,                              "service_name": "Netdata",                 "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 3001,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Uptime Kuma",             "icon": "heart",       "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 8581,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Uptime Kuma",             "icon": "heart",       "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 10051, "protocol": "tcp", "banner_regex": null,                              "service_name": "Zabbix Server",           "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 9411,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Zipkin",                  "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 16686, "protocol": "tcp", "banner_regex": null,                              "service_name": "Jaeger UI",               "icon": "activity",    "category": "monitoring",    "suggested_node_type": "server"},
+  {"port": 5601,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Kibana",                  "icon": "bar-chart-2", "category": "monitoring",    "suggested_node_type": "server"},
+
+  {"port": 9443,  "protocol": "tcp", "banner_regex": "[Pp]ortainer",                   "service_name": "Portainer HTTPS",         "icon": "box",         "category": "containers",    "suggested_node_type": "lxc"},
+  {"port": 9000,  "protocol": "tcp", "banner_regex": "[Pp]ortainer",                   "service_name": "Portainer",               "icon": "box",         "category": "containers",    "suggested_node_type": "lxc"},
+  {"port": 2375,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Docker API",              "icon": "box",         "category": "containers",    "suggested_node_type": "server"},
+  {"port": 2376,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Docker API TLS",          "icon": "box",         "category": "containers",    "suggested_node_type": "server"},
+  {"port": 6443,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Kubernetes API",          "icon": "layers",      "category": "containers",    "suggested_node_type": "server"},
+
+  {"port": 3306,  "protocol": "tcp", "banner_regex": null,                              "service_name": "MySQL / MariaDB",         "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 5432,  "protocol": "tcp", "banner_regex": null,                              "service_name": "PostgreSQL",              "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 6379,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Redis",                   "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 27017, "protocol": "tcp", "banner_regex": null,                              "service_name": "MongoDB",                 "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 9200,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Elasticsearch",           "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 9300,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Elasticsearch Transport", "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 5984,  "protocol": "tcp", "banner_regex": null,                              "service_name": "CouchDB",                 "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 1521,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Oracle DB",               "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+  {"port": 6432,  "protocol": "tcp", "banner_regex": null,                              "service_name": "PgBouncer",               "icon": "database",    "category": "database",      "suggested_node_type": "server"},
+
+  {"port": 22,    "protocol": "tcp", "banner_regex": null,                              "service_name": "SSH",                     "icon": "terminal",    "category": "remote",        "suggested_node_type": "server"},
+  {"port": 21,    "protocol": "tcp", "banner_regex": null,                              "service_name": "FTP",                     "icon": "upload",      "category": "storage",       "suggested_node_type": "server"},
+  {"port": 25,    "protocol": "tcp", "banner_regex": null,                              "service_name": "SMTP",                    "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 110,   "protocol": "tcp", "banner_regex": null,                              "service_name": "POP3",                    "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 143,   "protocol": "tcp", "banner_regex": null,                              "service_name": "IMAP",                    "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 465,   "protocol": "tcp", "banner_regex": null,                              "service_name": "SMTPS",                   "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 587,   "protocol": "tcp", "banner_regex": null,                              "service_name": "SMTP Submission",         "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 993,   "protocol": "tcp", "banner_regex": null,                              "service_name": "IMAPS",                   "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 995,   "protocol": "tcp", "banner_regex": null,                              "service_name": "POP3S",                   "icon": "mail",        "category": "mail",          "suggested_node_type": "server"},
+  {"port": 3389,  "protocol": "tcp", "banner_regex": null,                              "service_name": "RDP",                     "icon": "monitor",     "category": "remote",        "suggested_node_type": "server"},
+  {"port": 5900,  "protocol": "tcp", "banner_regex": null,                              "service_name": "VNC",                     "icon": "monitor",     "category": "remote",        "suggested_node_type": "server"},
+  {"port": 5800,  "protocol": "tcp", "banner_regex": null,                              "service_name": "VNC (HTTP)",              "icon": "monitor",     "category": "remote",        "suggested_node_type": "server"},
+
+  {"port": 8888,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Jupyter Notebook",        "icon": "code",        "category": "dev",           "suggested_node_type": "server"},
+  {"port": 3000,  "protocol": "tcp", "banner_regex": "[Gg]itea",                        "service_name": "Gitea",                   "icon": "git-branch",  "category": "dev",           "suggested_node_type": "server"},
+
+  {"port": 80,    "protocol": "tcp", "banner_regex": null,                              "service_name": "HTTP",                    "icon": "globe",       "category": "web",           "suggested_node_type": "server"},
+  {"port": 443,   "protocol": "tcp", "banner_regex": null,                              "service_name": "HTTPS",                   "icon": "lock",        "category": "web",           "suggested_node_type": "server"},
+  {"port": 8080,  "protocol": "tcp", "banner_regex": null,                              "service_name": "HTTP Alt",                "icon": "globe",       "category": "web",           "suggested_node_type": "server"},
+  {"port": 8443,  "protocol": "tcp", "banner_regex": null,                              "service_name": "HTTPS Alt",               "icon": "lock",        "category": "web",           "suggested_node_type": "server"},
+  {"port": 8008,  "protocol": "tcp", "banner_regex": null,                              "service_name": "HTTP Alt",                "icon": "globe",       "category": "web",           "suggested_node_type": "server"},
+  {"port": 3000,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Web service",             "icon": "globe",       "category": "web",           "suggested_node_type": "server"},
+  {"port": 9091,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Transmission",            "icon": "download",    "category": "download",      "suggested_node_type": "server"},
+  {"port": 9000,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Web service",             "icon": "globe",       "category": "web",           "suggested_node_type": "server"},
+  {"port": 9443,  "protocol": "tcp", "banner_regex": null,                              "service_name": "HTTPS Alt",               "icon": "lock",        "category": "web",           "suggested_node_type": "server"},
+  {"port": 5000,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Web service",             "icon": "globe",       "category": "web",           "suggested_node_type": "server"},
+
+  {"port": 8448,  "protocol": "tcp", "banner_regex": null,                              "service_name": "Matrix (Synapse)",        "icon": "message-square", "category": "communication", "suggested_node_type": "server"},
+  {"port": 64738, "protocol": "tcp", "banner_regex": null,                              "service_name": "Mumble",                  "icon": "mic",         "category": "communication", "suggested_node_type": "server"},
+  {"port": 25565, "protocol": "tcp", "banner_regex": null,                              "service_name": "Minecraft Server",        "icon": "cpu",         "category": "gaming",        "suggested_node_type": "server"},
+
+  {"port": 51820, "protocol": "udp", "banner_regex": null,                              "service_name": "WireGuard",               "icon": "shield",      "category": "vpn",           "suggested_node_type": "router"},
+  {"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"}
+]

backend/pyproject.toml

@@ -25,8 +25,6 @@ addopts = "--tb=short -q"
 [tool.coverage.run]
 source = ["app"]
 omit = ["*/migrations/*", "*/tests/*"]
-concurrency = ["thread"]
-core = "sysmon"
 
 [tool.coverage.report]
 skip_empty = true

backend/requirements.txt

@@ -9,18 +9,17 @@ pydantic-settings==2.5.2
 python-jose[cryptography]==3.5.0
 passlib[bcrypt]==1.7.4
 bcrypt==4.0.1
-python-multipart==0.0.26
+python-multipart==0.0.22
 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
 
 # Dev
 ruff==0.6.9
 mypy==1.11.2
-pytest==9.0.3
-pytest-asyncio==1.3.0
+pytest==8.3.3
+pytest-asyncio==0.24.0
 pytest-cov==5.0.0

backend/tests/test_auth.py

@@ -56,15 +56,3 @@ async def test_service_key_disabled_when_not_configured(client: AsyncClient):
     settings.mcp_service_key = ""
     res = await client.get("/api/v1/nodes", headers={"X-MCP-Service-Key": "any-key"})
     assert res.status_code == 401
-
-
-async def test_login_with_malformed_hash_returns_401_not_500(client: AsyncClient):
-    """Malformed hash (e.g. $ stripped by shell) must not crash with 500."""
-    from app.core.config import settings
-    original = settings.auth_password_hash
-    settings.auth_password_hash = "2b12RtMbyw17l4N5UGzeXMNAWu"  # $ signs stripped
-    try:
-        res = await client.post("/api/v1/auth/login", json={"username": "admin", "password": "admin"})
-        assert res.status_code == 401
-    finally:
-        settings.auth_password_hash = original

backend/tests/test_canvas.py

@@ -104,25 +104,6 @@ async def test_save_canvas_persists_custom_colors(client: AsyncClient, headers:
     assert canvas["nodes"][0]["custom_colors"] == {"border": "#ff0000", "icon": "#00ff00"}
 
 
-async def test_save_canvas_persists_zone_label_position_and_text_size(client: AsyncClient, headers: dict):
-    """label_position and text_size are stored in custom_colors and returned unchanged."""
-    n1 = node_payload(custom_colors={
-        "border": "#00d4ff",
-        "border_style": "solid",
-        "border_width": 3,
-        "label_position": "outside",
-        "text_size": 16,
-        "text_color": "#e6edf3",
-    })
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    cc = canvas["nodes"][0]["custom_colors"]
-    assert cc["label_position"] == "outside"
-    assert cc["text_size"] == 16
-    assert cc["border_width"] == 3
-
-
 async def test_save_canvas_persists_edge_custom_color_and_path_style(client: AsyncClient, headers: dict):
     n1 = node_payload()
     n2 = node_payload()
@@ -256,295 +237,3 @@ async def test_save_canvas_dimensions_cleared_when_null(client: AsyncClient, hea
     canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
     assert canvas["nodes"][0]["width"] is None
     assert canvas["nodes"][0]["height"] is None
-
-
-# ── properties ────────────────────────────────────────────────────────────────
-
-async def test_save_canvas_properties_default_empty(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]["properties"] == []
-
-
-async def test_save_canvas_persists_properties(client: AsyncClient, headers: dict):
-    props = [
-        {"key": "RAM", "value": "32 GB", "icon": "MemoryStick", "visible": True},
-        {"key": "CPU", "value": "Intel i9", "icon": "Cpu", "visible": False},
-    ]
-    n1 = node_payload(properties=props)
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    returned = canvas["nodes"][0]["properties"]
-    assert len(returned) == 2
-    assert returned[0] == {"key": "RAM", "value": "32 GB", "icon": "MemoryStick", "visible": True}
-    assert returned[1] == {"key": "CPU", "value": "Intel i9", "icon": "Cpu", "visible": False}
-
-
-async def test_save_canvas_properties_updated_on_second_save(client: AsyncClient, headers: dict):
-    n1 = node_payload(properties=[{"key": "RAM", "value": "16 GB", "icon": None, "visible": True}])
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    n1_updated = {**n1, "properties": [
-        {"key": "RAM", "value": "64 GB", "icon": "MemoryStick", "visible": True},
-        {"key": "Disk", "value": "2 TB", "icon": "HardDrive", "visible": True},
-    ]}
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1_updated], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    props = canvas["nodes"][0]["properties"]
-    assert len(props) == 2
-    assert props[0]["value"] == "64 GB"
-    assert props[1]["key"] == "Disk"
-
-
-async def test_save_canvas_properties_with_null_icon(client: AsyncClient, headers: dict):
-    props = [{"key": "Note", "value": "custom rack", "icon": None, "visible": True}]
-    n1 = node_payload(properties=props)
-    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]["properties"][0]["icon"] is None
-
-
-async def test_save_canvas_properties_cleared_to_empty(client: AsyncClient, headers: dict):
-    n1 = node_payload(properties=[{"key": "RAM", "value": "32 GB", "icon": None, "visible": True}])
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    n1_cleared = {**n1, "properties": []}
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1_cleared], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["nodes"][0]["properties"] == []
-
-
-# ── edge waypoints & handles ──────────────────────────────────────────────────
-
-async def test_save_canvas_edge_waypoints_default_null(client: AsyncClient, headers: dict):
-    n1 = node_payload()
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"])
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["edges"][0]["waypoints"] is None
-
-
-async def test_save_canvas_persists_waypoints_on_edge(client: AsyncClient, headers: dict):
-    n1 = node_payload()
-    n2 = node_payload()
-    waypoints = [{"x": 100.0, "y": 200.0}, {"x": 300.0, "y": 150.0}]
-    e1 = edge_payload(n1["id"], n2["id"], waypoints=waypoints)
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    returned = canvas["edges"][0]["waypoints"]
-    assert returned == [{"x": 100.0, "y": 200.0}, {"x": 300.0, "y": 150.0}]
-
-
-async def test_save_canvas_waypoints_updated_on_second_save(client: AsyncClient, headers: dict):
-    n1 = node_payload()
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"], waypoints=[{"x": 10.0, "y": 20.0}])
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    e1_updated = {**e1, "waypoints": [{"x": 50.0, "y": 60.0}, {"x": 70.0, "y": 80.0}]}
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1_updated], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["edges"][0]["waypoints"] == [{"x": 50.0, "y": 60.0}, {"x": 70.0, "y": 80.0}]
-
-
-async def test_save_canvas_persists_edge_handles(client: AsyncClient, headers: dict):
-    n1 = node_payload(bottom_handles=3)
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"], source_handle="bottom-1", target_handle="top")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    edge = canvas["edges"][0]
-    assert edge["source_handle"] == "bottom-1"
-    assert edge["target_handle"] == "top"
-
-
-async def test_save_canvas_persists_animated_edge(client: AsyncClient, headers: dict):
-    n1 = node_payload()
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"], animated="snake")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["edges"][0]["animated"] == "snake"
-
-
-async def test_save_canvas_persists_animated_basic(client: AsyncClient, headers: dict):
-    n1 = node_payload()
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"], animated="basic")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["edges"][0]["animated"] == "basic"
-
-
-# ── node fields ───────────────────────────────────────────────────────────────
-
-async def test_save_canvas_persists_all_node_fields(client: AsyncClient, headers: dict):
-    n1 = node_payload(
-        type="server",
-        label="Main Server",
-        hostname="server.local",
-        ip="192.168.1.10",
-        mac="aa:bb:cc:dd:ee:ff",
-        os="Ubuntu 22.04",
-        status="online",
-        check_method="http",
-        check_target="http://192.168.1.10",
-        services=[{"name": "nginx", "port": 80}],
-        notes="Primary web server",
-        pos_x=150.0,
-        pos_y=250.0,
-        bottom_handles=2,
-    )
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    node = canvas["nodes"][0]
-    assert node["hostname"] == "server.local"
-    assert node["ip"] == "192.168.1.10"
-    assert node["mac"] == "aa:bb:cc:dd:ee:ff"
-    assert node["os"] == "Ubuntu 22.04"
-    assert node["status"] == "online"
-    assert node["check_method"] == "http"
-    assert node["check_target"] == "http://192.168.1.10"
-    assert node["services"] == [{"name": "nginx", "port": 80}]
-    assert node["notes"] == "Primary web server"
-    assert node["pos_x"] == 150.0
-    assert node["pos_y"] == 250.0
-    assert node["bottom_handles"] == 2
-
-
-async def test_save_canvas_persists_bottom_handles(client: AsyncClient, headers: dict):
-    n1 = node_payload(bottom_handles=4)
-    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]["bottom_handles"] == 4
-
-
-async def test_save_canvas_bottom_handles_defaults_one(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]["bottom_handles"] == 1
-
-
-async def test_save_canvas_persists_services_and_notes(client: AsyncClient, headers: dict):
-    services = [{"name": "ssh", "port": 22}, {"name": "http", "port": 80}]
-    n1 = node_payload(services=services, notes="My NAS device")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    node = canvas["nodes"][0]
-    assert node["services"] == services
-    assert node["notes"] == "My NAS device"
-
-
-async def test_save_canvas_persists_check_fields(client: AsyncClient, headers: dict):
-    n1 = node_payload(check_method="ping", check_target="192.168.1.1")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    node = canvas["nodes"][0]
-    assert node["check_method"] == "ping"
-    assert node["check_target"] == "192.168.1.1"
-
-
-# ── parent/child nodes ────────────────────────────────────────────────────────
-
-async def test_save_canvas_persists_parent_child_nodes(client: AsyncClient, headers: dict):
-    parent = node_payload(type="proxmox", label="PVE Host")
-    child = node_payload(type="vm", label="VM-100", parent_id=parent["id"])
-    await client.post("/api/v1/canvas/save", json={"nodes": [parent, child], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    node_map = {n["id"]: n for n in canvas["nodes"]}
-    assert node_map[child["id"]]["parent_id"] == parent["id"]
-    assert node_map[parent["id"]]["parent_id"] is None
-
-
-async def test_save_canvas_child_removed_with_parent(client: AsyncClient, headers: dict):
-    parent = node_payload(type="proxmox", label="PVE Host")
-    child = node_payload(type="lxc", label="LXC-101", parent_id=parent["id"])
-    await client.post("/api/v1/canvas/save", json={"nodes": [parent, child], "edges": [], "viewport": {}}, headers=headers)
-
-    # Remove both parent and child
-    await client.post("/api/v1/canvas/save", json={"nodes": [], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["nodes"] == []
-
-
-# ── groupRect / group node ────────────────────────────────────────────────────
-
-async def test_save_canvas_persists_group_node(client: AsyncClient, headers: dict):
-    group = node_payload(type="group", label="Network Zone", width=400.0, height=300.0)
-    member = node_payload(type="server", label="Member", parent_id=group["id"])
-    await client.post("/api/v1/canvas/save", json={"nodes": [group, member], "edges": [], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    node_map = {n["id"]: n for n in canvas["nodes"]}
-    assert node_map[group["id"]]["type"] == "group"
-    assert node_map[group["id"]]["width"] == 400.0
-    assert node_map[group["id"]]["height"] == 300.0
-    assert node_map[member["id"]]["parent_id"] == group["id"]
-
-
-# ── viewport ──────────────────────────────────────────────────────────────────
-
-async def test_load_canvas_returns_default_viewport_when_no_state(client: AsyncClient, headers: dict):
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["viewport"] == {"x": 0, "y": 0, "zoom": 1}
-
-
-async def test_save_canvas_updates_existing_canvas_state(client: AsyncClient, headers: dict):
-    """Second save updates the existing CanvasState row (exercises the state.viewport branch)."""
-    await client.post("/api/v1/canvas/save", json={"nodes": [], "edges": [], "viewport": {"x": 1, "y": 2, "zoom": 1}}, headers=headers)
-    await client.post("/api/v1/canvas/save", json={"nodes": [], "edges": [], "viewport": {"x": 99, "y": 88, "zoom": 0.75}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["viewport"] == {"x": 99, "y": 88, "zoom": 0.75}
-
-
-# ── edge types ────────────────────────────────────────────────────────────────
-
-async def test_save_canvas_persists_edge_type_vlan(client: AsyncClient, headers: dict):
-    n1 = node_payload()
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"], type="vlan", vlan_id=10, label="VLAN 10")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    edge = canvas["edges"][0]
-    assert edge["type"] == "vlan"
-    assert edge["vlan_id"] == 10
-    assert edge["label"] == "VLAN 10"
-
-
-async def test_save_canvas_edge_update_existing(client: AsyncClient, headers: dict):
-    """Second save updates an existing edge (exercises the db_edge branch)."""
-    n1 = node_payload()
-    n2 = node_payload()
-    e1 = edge_payload(n1["id"], n2["id"], label="original")
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1], "viewport": {}}, headers=headers)
-
-    e1_updated = {**e1, "label": "updated", "custom_color": "#ff0000"}
-    await client.post("/api/v1/canvas/save", json={"nodes": [n1, n2], "edges": [e1_updated], "viewport": {}}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    edge = canvas["edges"][0]
-    assert edge["label"] == "updated"
-    assert edge["custom_color"] == "#ff0000"

backend/tests/test_docker_migration.py

@@ -1,96 +0,0 @@
-"""
-Tests for docker type rename and proxmox container_mode migrations.
-"""
-import os
-
-os.environ.setdefault("SECRET_KEY", "test-only-secret-key-not-for-production")
-
-import pytest
-from sqlalchemy.ext.asyncio import create_async_engine
-
-TEST_DB_URL = "sqlite+aiosqlite:///:memory:"
-
-
-async def _setup_table(conn):
-    await conn.exec_driver_sql("""
-        CREATE TABLE IF NOT EXISTS nodes (
-            id TEXT PRIMARY KEY,
-            type TEXT NOT NULL DEFAULT 'generic',
-            label TEXT NOT NULL DEFAULT '',
-            container_mode BOOLEAN NOT NULL DEFAULT 0
-        )
-    """)
-
-
-async def _run_migrations(conn):
-    await conn.exec_driver_sql(
-        "UPDATE nodes SET container_mode = 1 WHERE type = 'proxmox' AND container_mode = 0"
-    )
-    await conn.exec_driver_sql(
-        "UPDATE nodes SET type = 'docker_container' WHERE type = 'docker'"
-    )
-
-
-@pytest.mark.asyncio
-async def test_proxmox_container_mode_set_to_true():
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, type, label, container_mode) VALUES ('p1', 'proxmox', 'PVE', 0)"
-        )
-        await _run_migrations(conn)
-        row = (await conn.exec_driver_sql("SELECT container_mode FROM nodes WHERE id = 'p1'")).fetchone()
-        assert row[0] == 1
-
-
-@pytest.mark.asyncio
-async def test_proxmox_already_true_unchanged():
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, type, label, container_mode) VALUES ('p2', 'proxmox', 'PVE', 1)"
-        )
-        await _run_migrations(conn)
-        row = (await conn.exec_driver_sql("SELECT container_mode FROM nodes WHERE id = 'p2'")).fetchone()
-        assert row[0] == 1
-
-
-@pytest.mark.asyncio
-async def test_non_proxmox_container_mode_untouched():
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, type, label, container_mode) VALUES ('s1', 'server', 'Srv', 0)"
-        )
-        await _run_migrations(conn)
-        row = (await conn.exec_driver_sql("SELECT container_mode FROM nodes WHERE id = 's1'")).fetchone()
-        assert row[0] == 0
-
-
-@pytest.mark.asyncio
-async def test_docker_type_renamed_to_docker_container():
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, type, label) VALUES ('d1', 'docker', 'My Docker')"
-        )
-        await _run_migrations(conn)
-        row = (await conn.exec_driver_sql("SELECT type FROM nodes WHERE id = 'd1'")).fetchone()
-        assert row[0] == 'docker_container'
-
-
-@pytest.mark.asyncio
-async def test_docker_host_type_untouched():
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, type, label) VALUES ('d2', 'docker_host', 'Docker Host')"
-        )
-        await _run_migrations(conn)
-        row = (await conn.exec_driver_sql("SELECT type FROM nodes WHERE id = 'd2'")).fetchone()
-        assert row[0] == 'docker_host'

backend/tests/test_fingerprint.py

@@ -131,45 +131,3 @@ def test_suggest_node_type_camera_from_signature():
     ]):
         result = suggest_node_type([{"port": 554, "protocol": "tcp"}])
         assert result == "camera"
-
-
-# ── IoT detection ─────────────────────────────────────────────────────────────
-
-def test_suggest_node_type_iot_from_mqtt_port():
-    result = suggest_node_type([{"port": 1883, "protocol": "tcp"}])
-    assert result == "iot"
-
-
-def test_suggest_node_type_iot_from_coap_port():
-    result = suggest_node_type([{"port": 5683, "protocol": "tcp"}])
-    assert result == "iot"
-
-
-def test_suggest_node_type_iot_from_esphome_port():
-    result = suggest_node_type([{"port": 6052, "protocol": "tcp"}])
-    assert result == "iot"
-
-
-def test_suggest_node_type_shelly_mac_overrides_http_port():
-    # Shelly exposes port 80 (would suggest "server") but MAC identifies it as IoT
-    result = suggest_node_type([{"port": 80, "protocol": "tcp"}], mac="34:94:54:aa:bb:cc")
-    assert result == "iot"
-
-
-def test_suggest_node_type_espressif_mac_returns_iot():
-    result = suggest_node_type([], mac="a0:20:a6:11:22:33")
-    assert result == "iot"
-
-
-def test_suggest_node_type_tuya_mac_returns_iot():
-    result = suggest_node_type([{"port": 80, "protocol": "tcp"}], mac="d8:f1:5b:aa:bb:cc")
-    assert result == "iot"
-
-
-def test_suggest_node_type_iot_wins_over_server_when_mqtt_present():
-    # MQTT port + HTTP port → iot wins (iot is higher priority than server now)
-    result = suggest_node_type([
-        {"port": 80, "protocol": "tcp"},
-        {"port": 1883, "protocol": "tcp"},
-    ])
-    assert result == "iot"

backend/tests/test_liveview.py

@@ -1,126 +0,0 @@
-"""
-Tests for the /api/v1/liveview read-only canvas endpoint.
-
-The endpoint is:
-  - Disabled by default (LIVEVIEW_KEY not set) → 403
-  - Returns 403 for missing or wrong key even when enabled
-  - Returns canvas data for a valid key (no JWT required)
-"""
-
-import pytest
-from httpx import AsyncClient
-
-from app.core.config import settings
-
-
-@pytest.fixture(autouse=True)
-def reset_liveview_key():
-    """Restore liveview_key after each test so tests are isolated."""
-    original = settings.liveview_key
-    yield
-    settings.liveview_key = original
-
-
-# ── Disabled (no key configured) ─────────────────────────────────────────────
-
-@pytest.mark.asyncio
-async def test_liveview_disabled_by_default(client: AsyncClient):
-    settings.liveview_key = None
-    res = await client.get("/api/v1/liveview?key=anything")
-    assert res.status_code == 403
-    assert res.json()["detail"] == "Live view is disabled"
-
-
-@pytest.mark.asyncio
-async def test_liveview_disabled_when_key_empty(client: AsyncClient):
-    settings.liveview_key = ""
-    res = await client.get("/api/v1/liveview?key=anything")
-    assert res.status_code == 403
-    assert res.json()["detail"] == "Live view is disabled"
-
-
-# ── Enabled but wrong / missing key ──────────────────────────────────────────
-
-@pytest.mark.asyncio
-async def test_liveview_wrong_key(client: AsyncClient):
-    settings.liveview_key = "correct-secret"
-    res = await client.get("/api/v1/liveview?key=wrong-key")
-    assert res.status_code == 403
-    assert res.json()["detail"] == "Invalid live view key"
-
-
-@pytest.mark.asyncio
-async def test_liveview_missing_key_param(client: AsyncClient):
-    settings.liveview_key = "correct-secret"
-    res = await client.get("/api/v1/liveview")
-    assert res.status_code == 403
-    assert res.json()["detail"] == "Invalid live view key"
-
-
-# ── Valid key — no JWT needed ────────────────────────────────────────────────
-
-@pytest.mark.asyncio
-async def test_liveview_valid_key_returns_canvas(client: AsyncClient):
-    settings.liveview_key = "my-secret-key"
-    res = await client.get("/api/v1/liveview?key=my-secret-key")
-    assert res.status_code == 200
-    data = res.json()
-    assert "nodes" in data
-    assert "edges" in data
-    assert "viewport" in data
-    assert isinstance(data["nodes"], list)
-    assert isinstance(data["edges"], list)
-
-
-@pytest.mark.asyncio
-async def test_liveview_does_not_require_jwt(client: AsyncClient):
-    """Accessing without Authorization header must work when key is correct."""
-    settings.liveview_key = "open-sesame"
-    # client has no auth headers set here
-    res = await client.get("/api/v1/liveview?key=open-sesame")
-    assert res.status_code == 200
-
-
-@pytest.mark.asyncio
-async def test_liveview_returns_saved_canvas(client: AsyncClient, auth_headers):
-    """Canvas saved via POST /canvas/save appears in liveview response."""
-    settings.liveview_key = "test-key"
-    headers = await auth_headers()
-
-    # Save a canvas with one node
-    payload = {
-        "nodes": [{
-            "id": "lv-node-1",
-            "type": "server",
-            "label": "Live Node",
-            "status": "online",
-            "services": [],
-            "pos_x": 10,
-            "pos_y": 20,
-        }],
-        "edges": [],
-        "viewport": {"x": 0, "y": 0, "zoom": 1},
-    }
-    await client.post("/api/v1/canvas/save", json=payload, headers=headers)
-
-    # Liveview should return the same node
-    res = await client.get("/api/v1/liveview?key=test-key")
-    assert res.status_code == 200
-    nodes = res.json()["nodes"]
-    assert len(nodes) == 1
-    assert nodes[0]["id"] == "lv-node-1"
-    assert nodes[0]["label"] == "Live Node"
-
-
-# ── Re-disable after enabling ─────────────────────────────────────────────────
-
-@pytest.mark.asyncio
-async def test_liveview_disabled_after_key_cleared(client: AsyncClient):
-    settings.liveview_key = "was-enabled"
-    res = await client.get("/api/v1/liveview?key=was-enabled")
-    assert res.status_code == 200
-
-    settings.liveview_key = None
-    res = await client.get("/api/v1/liveview?key=was-enabled")
-    assert res.status_code == 403
-    assert res.json()["detail"] == "Live view is disabled"

backend/tests/test_nodes.py

@@ -115,97 +115,3 @@ async def test_update_node_parent_id(client: AsyncClient, headers: dict):
 async def test_create_node_requires_auth(client: AsyncClient):
     res = await client.post("/api/v1/nodes", json={"type": "server", "label": "N", "status": "unknown"})
     assert res.status_code == 401
-
-
-# --- Properties tests ---
-
-async def test_create_node_default_properties_empty(client: AsyncClient, headers: dict):
-    """New node has an empty properties list by default."""
-    res = await client.post("/api/v1/nodes", json={"type": "server", "label": "Srv", "status": "unknown"}, headers=headers)
-    assert res.status_code == 201
-    assert res.json()["properties"] == []
-
-
-async def test_create_node_with_properties(client: AsyncClient, headers: dict):
-    """Node created with properties round-trips correctly."""
-    props = [
-        {"key": "CPU Model", "value": "i7-12700K", "icon": "Cpu", "visible": True},
-        {"key": "RAM", "value": "32 GB", "icon": "MemoryStick", "visible": False},
-    ]
-    res = await client.post(
-        "/api/v1/nodes",
-        json={"type": "server", "label": "Srv", "status": "unknown", "properties": props},
-        headers=headers,
-    )
-    assert res.status_code == 201
-    assert res.json()["properties"] == props
-
-
-async def test_patch_node_properties(client: AsyncClient, headers: dict):
-    """PATCH with properties replaces the full properties array."""
-    create = await client.post("/api/v1/nodes", json={"type": "server", "label": "Srv", "status": "unknown"}, headers=headers)
-    node_id = create.json()["id"]
-
-    props = [{"key": "Disk", "value": "2 TB", "icon": "HardDrive", "visible": True}]
-    res = await client.patch(f"/api/v1/nodes/{node_id}", json={"properties": props}, headers=headers)
-    assert res.status_code == 200
-    assert res.json()["properties"] == props
-
-
-async def test_patch_node_without_properties_does_not_wipe(client: AsyncClient, headers: dict):
-    """PATCH that omits properties leaves existing properties untouched."""
-    props = [{"key": "GPU", "value": "RTX 4090", "icon": "Monitor", "visible": True}]
-    create = await client.post(
-        "/api/v1/nodes",
-        json={"type": "server", "label": "Srv", "status": "unknown", "properties": props},
-        headers=headers,
-    )
-    node_id = create.json()["id"]
-
-    # PATCH only the label — properties must survive
-    res = await client.patch(f"/api/v1/nodes/{node_id}", json={"label": "Updated"}, headers=headers)
-    assert res.status_code == 200
-    assert res.json()["properties"] == props
-    assert res.json()["label"] == "Updated"
-
-
-async def test_patch_node_clears_properties_with_empty_array(client: AsyncClient, headers: dict):
-    """PATCH with properties=[] explicitly clears all properties."""
-    props = [{"key": "CPU Model", "value": "i5", "icon": "Cpu", "visible": True}]
-    create = await client.post(
-        "/api/v1/nodes",
-        json={"type": "server", "label": "Srv", "status": "unknown", "properties": props},
-        headers=headers,
-    )
-    node_id = create.json()["id"]
-
-    res = await client.patch(f"/api/v1/nodes/{node_id}", json={"properties": []}, headers=headers)
-    assert res.status_code == 200
-    assert res.json()["properties"] == []
-
-
-async def test_get_node_returns_properties(client: AsyncClient, headers: dict):
-    """GET /nodes/:id returns the properties field."""
-    props = [{"key": "OS", "value": "Debian 12", "icon": "Server", "visible": True}]
-    create = await client.post(
-        "/api/v1/nodes",
-        json={"type": "server", "label": "Srv", "status": "unknown", "properties": props},
-        headers=headers,
-    )
-    node_id = create.json()["id"]
-
-    res = await client.get(f"/api/v1/nodes/{node_id}", headers=headers)
-    assert res.status_code == 200
-    assert res.json()["properties"] == props
-
-
-async def test_properties_icon_can_be_null(client: AsyncClient, headers: dict):
-    """A property with icon=null is valid and round-trips correctly."""
-    props = [{"key": "Notes", "value": "custom value", "icon": None, "visible": False}]
-    create = await client.post(
-        "/api/v1/nodes",
-        json={"type": "generic", "label": "G", "status": "unknown", "properties": props},
-        headers=headers,
-    )
-    assert create.status_code == 201
-    assert create.json()["properties"] == props

backend/tests/test_properties_migration.py

@@ -1,176 +0,0 @@
-"""
-Tests for the hardware → properties migration logic.
-
-We test the migration function directly against an in-memory SQLite database
-so we can set up legacy rows (with hardware columns, NULL properties) and
-verify the migration produces the expected properties JSON.
-"""
-import json
-import os
-
-os.environ.setdefault("SECRET_KEY", "test-only-secret-key-not-for-production")
-
-import pytest
-from sqlalchemy.ext.asyncio import create_async_engine
-
-TEST_DB_URL = "sqlite+aiosqlite:///:memory:"
-
-
-async def _setup_legacy_table(conn):
-    """Create a minimal nodes table that mimics the pre-migration schema."""
-    await conn.exec_driver_sql("""
-        CREATE TABLE IF NOT EXISTS nodes (
-            id TEXT PRIMARY KEY,
-            type TEXT NOT NULL DEFAULT 'generic',
-            label TEXT NOT NULL DEFAULT '',
-            cpu_model TEXT,
-            cpu_count INTEGER,
-            ram_gb REAL,
-            disk_gb REAL,
-            show_hardware BOOLEAN NOT NULL DEFAULT 0,
-            properties JSON
-        )
-    """)
-
-
-async def _run_migration(conn):
-    """Run only the properties migration portion (extracted from init_db)."""
-    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():
-        node_id, cpu_model, cpu_count, ram_gb, disk_gb, show_hardware = row
-        props = []
-        visible = bool(show_hardware)
-        if cpu_model:
-            props.append({"key": "CPU Model", "value": str(cpu_model), "icon": "Cpu", "visible": visible})
-        if cpu_count is not None:
-            props.append({"key": "CPU Cores", "value": str(cpu_count), "icon": "Cpu", "visible": visible})
-        if ram_gb is not 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})
-        await conn.exec_driver_sql(
-            "UPDATE nodes SET properties = ? WHERE id = ?",
-            (json.dumps(props), node_id),
-        )
-
-
-async def _get_properties(conn, node_id: str) -> list:
-    rows = await conn.exec_driver_sql("SELECT properties FROM nodes WHERE id = ?", (node_id,))
-    raw = rows.fetchone()[0]
-    return json.loads(raw) if raw else []
-
-
-@pytest.mark.asyncio
-async def test_migration_full_hardware():
-    """Node with all 4 hardware fields → 4 property entries with correct icons."""
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_legacy_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, cpu_model, cpu_count, ram_gb, disk_gb, show_hardware) "
-            "VALUES (?, ?, ?, ?, ?, ?)",
-            ("node-1", "i7-12700K", 12, 32.0, 2000.0, 1),
-        )
-        await _run_migration(conn)
-        props = await _get_properties(conn, "node-1")
-
-    assert len(props) == 4
-    assert props[0] == {"key": "CPU Model", "value": "i7-12700K", "icon": "Cpu", "visible": True}
-    assert props[1] == {"key": "CPU Cores", "value": "12", "icon": "Cpu", "visible": True}
-    assert props[2] == {"key": "RAM", "value": "32.0 GB", "icon": "MemoryStick", "visible": True}
-    assert props[3] == {"key": "Disk", "value": "2000.0 GB", "icon": "HardDrive", "visible": True}
-    await engine.dispose()
-
-
-@pytest.mark.asyncio
-async def test_migration_partial_hardware():
-    """Node with only cpu_model and ram_gb → 2 property entries."""
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_legacy_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, cpu_model, ram_gb, show_hardware) VALUES (?, ?, ?, ?)",
-            ("node-2", "Ryzen 5 5600", 16.0, 0),
-        )
-        await _run_migration(conn)
-        props = await _get_properties(conn, "node-2")
-
-    assert len(props) == 2
-    assert props[0]["key"] == "CPU Model"
-    assert props[0]["visible"] is False
-    assert props[1]["key"] == "RAM"
-    assert props[1]["icon"] == "MemoryStick"
-    await engine.dispose()
-
-
-@pytest.mark.asyncio
-async def test_migration_no_hardware():
-    """Node with no hardware fields → empty properties array."""
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_legacy_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id) VALUES (?)",
-            ("node-3",),
-        )
-        await _run_migration(conn)
-        props = await _get_properties(conn, "node-3")
-
-    assert props == []
-    await engine.dispose()
-
-
-@pytest.mark.asyncio
-async def test_migration_idempotent():
-    """Running migration twice does not duplicate properties."""
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_legacy_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, cpu_model, show_hardware) VALUES (?, ?, ?)",
-            ("node-4", "Core i5", 1),
-        )
-        await _run_migration(conn)
-        await _run_migration(conn)  # second pass — node already has properties, should be skipped
-        props = await _get_properties(conn, "node-4")
-
-    assert len(props) == 1
-    await engine.dispose()
-
-
-@pytest.mark.asyncio
-async def test_migration_show_hardware_false_sets_visible_false():
-    """show_hardware=0 means all migrated properties have visible=False."""
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_legacy_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, cpu_model, ram_gb, show_hardware) VALUES (?, ?, ?, ?)",
-            ("node-5", "ARM Cortex-A72", 4.0, 0),
-        )
-        await _run_migration(conn)
-        props = await _get_properties(conn, "node-5")
-
-    assert all(p["visible"] is False for p in props)
-    await engine.dispose()
-
-
-@pytest.mark.asyncio
-async def test_migration_already_migrated_node_not_touched():
-    """Node that already has properties is skipped — existing properties preserved."""
-    existing = [{"key": "GPU", "value": "RTX 4090", "icon": "Monitor", "visible": True}]
-    engine = create_async_engine(TEST_DB_URL)
-    async with engine.begin() as conn:
-        await _setup_legacy_table(conn)
-        await conn.exec_driver_sql(
-            "INSERT INTO nodes (id, cpu_model, ram_gb, show_hardware, properties) VALUES (?, ?, ?, ?, ?)",
-            ("node-6", "i9-13900K", 64.0, 1, json.dumps(existing)),
-        )
-        await _run_migration(conn)
-        props = await _get_properties(conn, "node-6")
-
-    assert props == existing
-    await engine.dispose()

backend/tests/test_scan.py

@@ -1,4 +1,4 @@
-"""Tests for scan routes: trigger, pending devices, approve/hide/ignore, stop."""
+"""Tests for scan routes: trigger, pending devices, approve/hide/ignore."""
 import uuid
 from unittest.mock import AsyncMock, patch
 
@@ -7,8 +7,8 @@ from httpx import AsyncClient
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.db.models import Node, PendingDevice, ScanRun
-from app.services.scanner import _cancelled_runs, request_cancel, run_scan
+from app.db.models import PendingDevice, ScanRun
+from app.services.scanner import run_scan
 
 
 @pytest.fixture
@@ -199,213 +199,6 @@ async def test_run_scan_creates_new_pending_device(db_session: AsyncSession):
     assert device.suggested_type == "server"
 
 
-@pytest.mark.asyncio
-async def test_run_scan_purges_stale_pending_for_canvas_nodes(db_session: AsyncSession):
-    """Pending devices that were already in canvas before scan starts must be removed."""
-    node = Node(
-        id=str(uuid.uuid4()),
-        label="Existing Server",
-        type="server",
-        ip="192.168.1.50",
-        status="online",
-        services=[],
-        pos_x=0.0,
-        pos_y=0.0,
-    )
-    stale = PendingDevice(
-        id=str(uuid.uuid4()),
-        ip="192.168.1.50",
-        mac=None,
-        hostname=None,
-        os=None,
-        services=[],
-        suggested_type="generic",
-        status="pending",
-    )
-    db_session.add(node)
-    db_session.add(stale)
-    await db_session.commit()
-
-    run_id = str(uuid.uuid4())
-    run = ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"])
-    db_session.add(run)
-    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)
-
-    result = await db_session.execute(
-        select(PendingDevice).where(PendingDevice.ip == "192.168.1.50")
-    )
-    assert result.scalar_one_or_none() is None
-
-
-@pytest.mark.asyncio
-async def test_run_scan_skips_ip_already_in_canvas(db_session: AsyncSession):
-    """Devices whose IP already exists as a canvas Node must not appear in pending."""
-    node = Node(
-        id=str(uuid.uuid4()),
-        label="Existing Server",
-        type="server",
-        ip="192.168.1.50",
-        status="online",
-        services=[],
-        pos_x=0.0,
-        pos_y=0.0,
-    )
-    db_session.add(node)
-    await db_session.commit()
-
-    run_id = str(uuid.uuid4())
-    run = ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"])
-    db_session.add(run)
-    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)
-
-    result = await db_session.execute(
-        select(PendingDevice).where(PendingDevice.ip == "192.168.1.50")
-    )
-    assert result.scalar_one_or_none() is None
-
-
-@pytest.mark.asyncio
-async def test_run_scan_skips_hidden_device(db_session: AsyncSession):
-    """Devices previously hidden by the user must not re-appear in pending on re-scan."""
-    hidden = PendingDevice(
-        id=str(uuid.uuid4()),
-        ip="192.168.1.50",
-        mac=None,
-        hostname=None,
-        os=None,
-        services=[],
-        suggested_type="generic",
-        status="hidden",
-    )
-    db_session.add(hidden)
-    await db_session.commit()
-
-    run_id = str(uuid.uuid4())
-    run = ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"])
-    db_session.add(run)
-    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)
-
-    result = await db_session.execute(
-        select(PendingDevice).where(
-            PendingDevice.ip == "192.168.1.50",
-            PendingDevice.status == "pending",
-        )
-    )
-    assert result.scalar_one_or_none() is None
-
-
-# --- Stop scan ---
-
-@pytest.mark.asyncio
-async def test_stop_scan_requires_auth(client: AsyncClient):
-    res = await client.post("/api/v1/scan/fake-id/stop")
-    assert res.status_code == 401
-
-
-@pytest.mark.asyncio
-async def test_stop_scan_not_found(client: AsyncClient, headers):
-    import uuid as _uuid
-    res = await client.post(f"/api/v1/scan/{_uuid.uuid4()}/stop", headers=headers)
-    assert res.status_code == 404
-
-
-@pytest.mark.asyncio
-async def test_stop_scan_not_running(client: AsyncClient, headers, db_session: AsyncSession):
-    run = ScanRun(id=str(uuid.uuid4()), status="done", ranges=["192.168.1.0/24"])
-    db_session.add(run)
-    await db_session.commit()
-
-    res = await client.post(f"/api/v1/scan/{run.id}/stop", headers=headers)
-    assert res.status_code == 409
-
-
-@pytest.mark.asyncio
-async def test_stop_scan_success(client: AsyncClient, headers, db_session: AsyncSession):
-    run = ScanRun(id=str(uuid.uuid4()), status="running", ranges=["192.168.1.0/24"])
-    db_session.add(run)
-    await db_session.commit()
-
-    res = await client.post(f"/api/v1/scan/{run.id}/stop", headers=headers)
-    assert res.status_code == 200
-    assert res.json() == {"stopping": True}
-    # run_id added to cancel set
-    assert run.id in _cancelled_runs
-    # cleanup for other tests
-    _cancelled_runs.discard(run.id)
-
-
-# --- run_scan cancellation ---
-
-@pytest.mark.asyncio
-async def test_run_scan_cancelled_marks_status(db_session: AsyncSession):
-    """When cancel is requested before the scan starts, status becomes 'cancelled'."""
-    run_id = str(uuid.uuid4())
-    run = ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"])
-    db_session.add(run)
-    await db_session.commit()
-
-    request_cancel(run_id)
-
-    with (
-        patch("app.services.scanner._nmap_scan", return_value=[MOCK_HOST]) as mock_nmap,
-        patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock),
-    ):
-        await run_scan(["192.168.1.0/24"], db_session, run_id)
-        # nmap should not have been called — cancelled before first range
-        mock_nmap.assert_not_called()
-
-    await db_session.refresh(run)
-    assert run.status == "cancelled"
-    assert run.finished_at is not None
-
-
-@pytest.mark.asyncio
-async def test_run_scan_cancelled_mid_scan_skips_remaining_cidrs(db_session: AsyncSession):
-    """Cancel flag set after first CIDR is started prevents processing of the second CIDR."""
-    run_id = str(uuid.uuid4())
-    run = ScanRun(id=run_id, status="running", ranges=["10.0.0.0/24", "10.0.1.0/24"])
-    db_session.add(run)
-    await db_session.commit()
-
-    call_count = 0
-
-    def nmap_side_effect(target: str):
-        nonlocal call_count
-        call_count += 1
-        # Signal cancellation after the first CIDR scan completes
-        if call_count == 1:
-            request_cancel(run_id)
-        return []
-
-    with (
-        patch("app.services.scanner._nmap_scan", side_effect=nmap_side_effect),
-        patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock),
-    ):
-        await run_scan(["10.0.0.0/24", "10.0.1.0/24"], db_session, run_id)
-
-    assert call_count == 1  # second CIDR was skipped
-    await db_session.refresh(run)
-    assert run.status == "cancelled"
-
-
 @pytest.mark.asyncio
 async def test_run_scan_updates_existing_pending_device(db_session: AsyncSession):
     """Re-scanning the same IP updates services instead of creating a duplicate."""

backend/tests/test_scanner.py

@@ -1,535 +0,0 @@
-"""Tests for scanner: two-phase nmap, mDNS discovery, run_scan integration."""
-import uuid
-from unittest.mock import AsyncMock, MagicMock, patch
-
-import pytest
-from sqlalchemy import select as sa_select
-from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
-from sqlalchemy.pool import StaticPool
-
-from app.db.database import Base
-from app.db.models import Node, PendingDevice, ScanRun
-
-# ---------------------------------------------------------------------------
-# Helpers
-# ---------------------------------------------------------------------------
-
-def _make_run_id() -> str:
-    return str(uuid.uuid4())
-
-
-@pytest.fixture
-async def mem_db():
-    engine = create_async_engine(
-        "sqlite+aiosqlite:///:memory:",
-        connect_args={"check_same_thread": False},
-        poolclass=StaticPool,
-    )
-    async with engine.begin() as conn:
-        await conn.run_sync(Base.metadata.create_all)
-    factory = async_sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
-    yield factory
-    await engine.dispose()
-
-
-def _make_scan_run(run_id: str) -> ScanRun:
-    return ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"])
-
-
-# ---------------------------------------------------------------------------
-# _ping_sweep
-# ---------------------------------------------------------------------------
-
-@pytest.mark.asyncio
-async def test_ping_sweep_returns_alive_hosts():
-    from app.services.scanner import _ping_sweep
-
-    async def fake_ping(ip: str) -> str | None:
-        return ip if ip in {"192.168.1.1", "192.168.1.2"} else None
-
-    with patch("app.services.scanner._ping_sweep", wraps=None):
-        pass  # just ensure import is fine
-
-    # Patch asyncio.create_subprocess_exec to simulate ping responses
-    responding = {"192.168.1.1", "192.168.1.2"}
-
-    async def mock_subprocess(*args, **kwargs):
-        ip = args[-1]
-        proc = MagicMock()
-        proc.returncode = 0 if ip in responding else 1
-        proc.wait = AsyncMock(return_value=proc.returncode)
-        return proc
-
-    with patch("asyncio.create_subprocess_exec", side_effect=mock_subprocess), \
-         patch("app.services.scanner._arp_table_hosts", return_value={}), \
-         patch("app.services.scanner._resolve_hostname", return_value=None):
-        result = await _ping_sweep("192.168.1.0/30")  # .1 .2 only in /30
-
-    assert "192.168.1.1" in result
-    assert "192.168.1.2" in result
-    for host in result.values():
-        assert host["open_ports"] == []
-
-
-@pytest.mark.asyncio
-async def test_ping_sweep_excludes_non_responding():
-    from app.services.scanner import _ping_sweep
-
-    async def mock_subprocess(*args, **kwargs):
-        ip = args[-1]
-        proc = MagicMock()
-        proc.returncode = 0 if ip == "192.168.1.1" else 1
-        proc.wait = AsyncMock(return_value=proc.returncode)
-        return proc
-
-    with patch("asyncio.create_subprocess_exec", side_effect=mock_subprocess), \
-         patch("app.services.scanner._arp_table_hosts", return_value={}), \
-         patch("app.services.scanner._resolve_hostname", return_value=None):
-        result = await _ping_sweep("192.168.1.0/30")
-
-    assert "192.168.1.1" in result
-    assert "192.168.1.2" not in result
-
-
-@pytest.mark.asyncio
-async def test_ping_sweep_supplements_with_arp_cache():
-    """Devices that block ICMP but appear in ARP cache should still be discovered."""
-    from app.services.scanner import _ping_sweep
-
-    async def mock_subprocess(*args, **kwargs):
-        proc = MagicMock()
-        proc.returncode = 1  # all pings fail
-        proc.wait = AsyncMock(return_value=1)
-        return proc
-
-    arp_extra = {
-        "192.168.1.10": {"ip": "192.168.1.10", "mac": "aa:bb:cc:dd:ee:10", "hostname": None, "os": None, "open_ports": []},
-    }
-
-    with patch("asyncio.create_subprocess_exec", side_effect=mock_subprocess), \
-         patch("app.services.scanner._arp_table_hosts", return_value=arp_extra), \
-         patch("app.services.scanner._resolve_hostname", return_value=None):
-        result = await _ping_sweep("192.168.1.0/24")
-
-    assert "192.168.1.10" in result
-    assert result["192.168.1.10"]["mac"] == "aa:bb:cc:dd:ee:10"
-
-
-@pytest.mark.asyncio
-async def test_ping_sweep_enriches_mac_from_arp_cache():
-    """Ping-alive hosts with no ARP entry get their MAC from the ARP cache."""
-    from app.services.scanner import _ping_sweep
-
-    async def mock_subprocess(*args, **kwargs):
-        ip = args[-1]
-        proc = MagicMock()
-        proc.returncode = 0 if ip == "192.168.1.1" else 1
-        proc.wait = AsyncMock(return_value=proc.returncode)
-        return proc
-
-    arp_extra = {
-        "192.168.1.1": {"ip": "192.168.1.1", "mac": "de:ad:be:ef:00:01", "hostname": None, "os": None, "open_ports": []},
-    }
-
-    with patch("asyncio.create_subprocess_exec", side_effect=mock_subprocess), \
-         patch("app.services.scanner._arp_table_hosts", return_value=arp_extra), \
-         patch("app.services.scanner._resolve_hostname", return_value=None):
-        result = await _ping_sweep("192.168.1.0/30")
-
-    assert result["192.168.1.1"]["mac"] == "de:ad:be:ef:00:01"
-
-
-# ---------------------------------------------------------------------------
-# _arp_table_hosts
-# ---------------------------------------------------------------------------
-
-def test_arp_table_hosts_parses_proc_net_arp():
-    import io  # noqa: PLC0415
-
-    from app.services.scanner import _arp_table_hosts
-
-    arp_content = (
-        "IP address       HW type     Flags       HW address            Mask     Device\n"
-        "192.168.1.1      0x1         0x2         aa:bb:cc:dd:ee:01     *        eth0\n"
-        "192.168.1.50     0x1         0x2         aa:bb:cc:dd:ee:02     *        eth0\n"
-        "10.0.0.1         0x1         0x2         aa:bb:cc:dd:ee:03     *        eth0\n"  # outside subnet
-        "192.168.1.99     0x1         0x2         00:00:00:00:00:00     *        eth0\n"  # incomplete
-    )
-
-    mock_file = MagicMock()
-    mock_file.__enter__ = MagicMock(return_value=io.StringIO(arp_content))
-    mock_file.__exit__ = MagicMock(return_value=False)
-
-    with patch("builtins.open", return_value=mock_file), \
-         patch("app.services.scanner._resolve_hostname", return_value=None):
-        result = _arp_table_hosts("192.168.1.0/24")
-
-    assert "192.168.1.1" in result
-    assert "192.168.1.50" in result
-    assert "10.0.0.1" not in result   # outside target subnet
-    assert "192.168.1.99" not in result  # zero MAC skipped
-
-
-def test_arp_table_hosts_parses_macos_arp_output():
-    from app.services.scanner import _arp_table_hosts
-
-    arp_output = (
-        "router.lan (192.168.1.1) at aa:bb:cc:dd:ee:01 on en0 ifscope [ethernet]\n"
-        "device.lan (192.168.1.20) at aa:bb:cc:dd:ee:02 on en0 ifscope [ethernet]\n"
-        "? (192.168.1.99) at (incomplete) on en0 ifscope [ethernet]\n"
-        "? (10.0.0.1) at aa:bb:cc:dd:ee:04 on en0 ifscope [ethernet]\n"  # outside subnet
-    )
-
-    mock_result = MagicMock()
-    mock_result.stdout = arp_output
-
-    with patch("builtins.open", side_effect=FileNotFoundError), \
-         patch("subprocess.run", return_value=mock_result), \
-         patch("app.services.scanner._resolve_hostname", return_value=None):
-        result = _arp_table_hosts("192.168.1.0/24")
-
-    assert "192.168.1.1" in result
-    assert "192.168.1.20" in result
-    assert "192.168.1.99" not in result   # incomplete MAC
-    assert "10.0.0.1" not in result       # outside subnet
-
-
-# ---------------------------------------------------------------------------
-# _nmap_scan_single (Phase 2 per-IP worker)
-# ---------------------------------------------------------------------------
-
-def test_nmap_scan_single_detects_open_ports():
-    from app.services.scanner import _nmap_scan_single
-
-    host = {"ip": "192.168.1.10", "hostname": None, "mac": None, "os": None, "open_ports": []}
-
-    # Build a realistic host entry: protocols → ports → port info
-    port_info = {80: {"state": "open", "product": "nginx", "version": "1.24"}}
-    mock_host = MagicMock()
-    mock_host.all_protocols.return_value = ["tcp"]
-    mock_host.__getitem__ = MagicMock(return_value=port_info)
-    mock_host.get.return_value = {}
-
-    mock_nm = MagicMock()
-    mock_nm.all_hosts.return_value = ["192.168.1.10"]
-    mock_nm.__getitem__ = MagicMock(return_value=mock_host)
-
-    with patch("app.services.scanner.nmap.PortScanner", return_value=mock_nm), \
-         patch("app.services.scanner._extract_os", return_value=None):
-        result = _nmap_scan_single(host)
-
-    assert len(result["open_ports"]) == 1
-    assert result["open_ports"][0]["port"] == 80
-    assert result["open_ports"][0]["banner"] == "nginx 1.24"
-
-
-def test_nmap_scan_single_returns_host_unchanged_on_error():
-    from app.services.scanner import _nmap_scan_single
-
-    host = {"ip": "192.168.1.20", "hostname": None, "mac": None, "os": None, "open_ports": []}
-    mock_nm = MagicMock()
-    mock_nm.scan.side_effect = Exception("nmap error")
-
-    with patch("app.services.scanner.nmap.PortScanner", return_value=mock_nm):
-        result = _nmap_scan_single(host)
-
-    assert result["ip"] == "192.168.1.20"
-    assert result["open_ports"] == []
-
-
-def test_nmap_scan_single_returns_host_unchanged_when_no_results():
-    """Host confirmed alive in Phase 1 but all ports filtered — keep it with empty ports."""
-    from app.services.scanner import _nmap_scan_single
-
-    host = {"ip": "192.168.1.30", "hostname": "shelly1.lan", "mac": "34:94:54:aa:bb:cc", "os": None, "open_ports": []}
-    mock_nm = MagicMock()
-    mock_nm.all_hosts.return_value = []  # no results
-
-    with patch("app.services.scanner.nmap.PortScanner", return_value=mock_nm):
-        result = _nmap_scan_single(host)
-
-    assert result["ip"] == "192.168.1.30"
-    assert result["open_ports"] == []
-    assert result["mac"] == "34:94:54:aa:bb:cc"  # preserved from Phase 1
-
-
-# ---------------------------------------------------------------------------
-# _nmap_scan
-# ---------------------------------------------------------------------------
-
-@pytest.mark.asyncio
-async def test_nmap_scan_uses_mock_when_nmap_unavailable():
-    from app.services.scanner import _nmap_scan
-
-    with patch("app.services.scanner._NMAP_AVAILABLE", False):
-        result = await _nmap_scan("192.168.1.0/24")
-
-    assert len(result) == 1
-    assert result[0]["ip"] == "192.168.1.99"
-
-
-@pytest.mark.asyncio
-async def test_nmap_scan_raises_on_sweep_error():
-    from app.services.scanner import _nmap_scan
-
-    with patch("app.services.scanner._ping_sweep", side_effect=Exception("ping sweep failed")), \
-         pytest.raises(RuntimeError, match="ping sweep failed"):
-        await _nmap_scan("192.168.1.0/24")
-
-
-# ---------------------------------------------------------------------------
-# _mdns_discover
-# ---------------------------------------------------------------------------
-
-@pytest.mark.asyncio
-async def test_mdns_discover_returns_empty_when_zeroconf_unavailable():
-    from app.services.scanner import _mdns_discover
-
-    with patch("app.services.scanner._ZEROCONF_AVAILABLE", False):
-        result = await _mdns_discover()
-
-    assert result == []
-
-
-@pytest.mark.asyncio
-async def test_mdns_discover_returns_devices():
-    from app.services.scanner import _mdns_discover
-
-    mock_info = MagicMock()
-    mock_info.addresses = [b"\xc0\xa8\x01\x50"]  # 192.168.1.80
-    mock_info.server = "shelly1.local."
-    mock_info.port = 80
-    mock_info.async_request = AsyncMock(return_value=True)
-
-    mock_browser = AsyncMock()
-    mock_browser.async_cancel = AsyncMock()
-
-    # Simulate a service being found during the sleep
-    captured_handler: list = []
-
-    def fake_browser(zc, types, handlers):
-        captured_handler.extend(handlers)
-        return mock_browser
-
-    from zeroconf import ServiceStateChange
-
-    async def fake_sleep(t):
-        # Fire the handler as if a device was discovered
-        for h in captured_handler:
-            h(None, "_shelly._tcp.local.", "Shelly1._shelly._tcp.local.", ServiceStateChange.Added)
-
-    mock_azc = AsyncMock()
-    mock_azc.__aenter__ = AsyncMock(return_value=mock_azc)
-    mock_azc.__aexit__ = AsyncMock(return_value=None)
-    mock_azc.zeroconf = MagicMock()
-
-    with patch("app.services.scanner._ZEROCONF_AVAILABLE", True), \
-         patch("app.services.scanner.AsyncZeroconf", return_value=mock_azc), \
-         patch("app.services.scanner.AsyncServiceBrowser", side_effect=fake_browser), \
-         patch("app.services.scanner.AsyncServiceInfo", return_value=mock_info), \
-         patch("asyncio.sleep", side_effect=fake_sleep):
-        result = await _mdns_discover(timeout=0.01)
-
-    assert len(result) == 1
-    assert result[0]["ip"] == "192.168.1.80"
-    assert result[0]["hostname"] == "shelly1.local."
-
-
-# ---------------------------------------------------------------------------
-# _nmap_port_scan (Phase 2 concurrency)
-# ---------------------------------------------------------------------------
-
-@pytest.mark.asyncio
-async def test_nmap_port_scan_returns_empty_when_no_alive_hosts():
-    from app.services.scanner import _nmap_port_scan
-
-    result = await _nmap_port_scan({})
-    assert result == []
-
-
-@pytest.mark.asyncio
-async def test_nmap_port_scan_tolerates_single_host_exception():
-    """A single per-host failure should not abort the entire Phase 2 gather."""
-    from app.services.scanner import _nmap_port_scan
-
-    hosts = {
-        "192.168.1.1": {"ip": "192.168.1.1", "hostname": None, "mac": None, "os": None, "open_ports": []},
-        "192.168.1.2": {"ip": "192.168.1.2", "hostname": None, "mac": None, "os": None, "open_ports": []},
-    }
-
-    call_count = 0
-
-    def _flaky_scan(host_dict):
-        nonlocal call_count
-        call_count += 1
-        if host_dict["ip"] == "192.168.1.1":
-            raise RuntimeError("simulated nmap crash")
-        return host_dict
-
-    with patch("app.services.scanner._nmap_scan_single", side_effect=_flaky_scan), \
-         patch("app.services.scanner._NMAP_AVAILABLE", True):
-        result = await _nmap_port_scan(hosts)
-
-    assert call_count == 2
-    # The crashing host is dropped; the healthy one survives
-    assert len(result) == 1
-    assert result[0]["ip"] == "192.168.1.2"
-
-
-# ---------------------------------------------------------------------------
-# run_scan integration
-# ---------------------------------------------------------------------------
-
-@pytest.mark.asyncio
-async def test_run_scan_adds_nmap_devices_as_pending(mem_db):
-    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.5", "hostname": "device.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:
-        result = await session.execute(sa_select(PendingDevice))
-        devices = result.scalars().all()
-
-    assert any(d.ip == "192.168.1.5" for d in devices)
-
-
-@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."""
-    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()
-
-    mdns_hosts = [{"ip": "192.168.1.80", "hostname": "shelly1.local.", "mac": None, "os": None, "open_ports": [{"port": 80, "protocol": "tcp", "banner": ""}]}]
-
-    async with mem_db() as session:
-        with patch("app.services.scanner._nmap_scan", return_value=[]), \
-             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=mdns_hosts), \
-             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:
-        result = await session.execute(sa_select(PendingDevice).where(PendingDevice.ip == "192.168.1.80"))
-        device = result.scalar_one_or_none()
-
-    assert device is not None
-    assert device.status == "pending"
-    assert device.discovery_source == "mdns"
-
-
-@pytest.mark.asyncio
-async def test_run_scan_mdns_skipped_if_already_in_nmap(mem_db):
-    """If nmap and mDNS both find the same IP, it should not be double-counted."""
-    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()
-
-    shared_host = {"ip": "192.168.1.10", "hostname": "device.lan", "mac": None, "os": None, "open_ports": []}
-
-    async with mem_db() as session:
-        with patch("app.services.scanner._nmap_scan", return_value=[shared_host]), \
-             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[shared_host]), \
-             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:
-        result = await session.execute(sa_select(PendingDevice).where(PendingDevice.ip == "192.168.1.10"))
-        devices = result.scalars().all()
-
-    assert len(devices) == 1  # not duplicated
-
-
-@pytest.mark.asyncio
-async def test_run_scan_skips_canvas_nodes(mem_db):
-    """Hosts already approved onto the canvas must be skipped."""
-    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))
-        canvas_node = Node(
-            id=str(uuid.uuid4()), label="PVE", type="proxmox",
-            ip="192.168.1.100", status="online",
-        )
-        session.add(canvas_node)
-        await session.commit()
-
-    nmap_hosts = [{"ip": "192.168.1.100", "hostname": "pve.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:
-        result = await session.execute(sa_select(PendingDevice).where(PendingDevice.ip == "192.168.1.100"))
-        assert result.scalar_one_or_none() is None
-
-
-@pytest.mark.asyncio
-async def test_run_scan_skips_hidden_devices(mem_db):
-    """Hosts hidden by the user must not re-appear in pending."""
-    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))
-        hidden = PendingDevice(ip="192.168.1.55", status="hidden")
-        session.add(hidden)
-        await session.commit()
-
-    nmap_hosts = [{"ip": "192.168.1.55", "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:
-        result = await session.execute(
-            sa_select(PendingDevice).where(PendingDevice.ip == "192.168.1.55", PendingDevice.status == "pending")
-        )
-        assert result.scalar_one_or_none() is None
-
-
-@pytest.mark.asyncio
-async def test_run_scan_cancelled_marks_status_cancelled(mem_db):
-    """Cancelling a running scan sets the ScanRun status to 'cancelled'."""
-    from app.services.scanner import request_cancel, run_scan
-
-    run_id = _make_run_id()
-    async with mem_db() as session:
-        session.add(_make_scan_run(run_id))
-        await session.commit()
-
-    request_cancel(run_id)
-
-    async with mem_db() as session:
-        with patch("app.services.scanner._nmap_scan", return_value=[]), \
-             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:
-        run = await session.get(ScanRun, run_id)
-        assert run is not None
-        assert run.status == "cancelled"

backend/tests/test_settings.py

@@ -1,47 +0,0 @@
-"""Tests for GET/POST /api/v1/settings."""
-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}"}
-
-
-@pytest.mark.asyncio
-async def test_get_settings_requires_auth(client: AsyncClient):
-    res = await client.get("/api/v1/settings")
-    assert res.status_code == 401
-
-
-@pytest.mark.asyncio
-async def test_get_settings_returns_interval(client: AsyncClient, headers):
-    res = await client.get("/api/v1/settings", headers=headers)
-    assert res.status_code == 200
-    data = res.json()
-    assert "interval_seconds" in data
-    assert isinstance(data["interval_seconds"], int)
-
-
-@pytest.mark.asyncio
-async def test_update_settings_saves_interval(client: AsyncClient, headers):
-    with patch("app.api.routes.settings.settings") as mock_settings:
-        mock_settings.status_checker_interval = 60
-        mock_settings.save_overrides = lambda: None
-        res = await client.post(
-            "/api/v1/settings",
-            json={"interval_seconds": 120},
-            headers=headers,
-        )
-    assert res.status_code == 200
-    assert res.json()["interval_seconds"] == 120
-
-
-@pytest.mark.asyncio
-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

backend/tests/test_status_checker.py

@@ -3,7 +3,7 @@ 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 _tcp_connect, check_node
 
 # --- check_node dispatcher ---
 
@@ -149,48 +149,6 @@ async def test_check_node_exception_returns_offline():
     assert result["response_time_ms"] is None
 
 
-# --- _ping platform args ---
-
-@pytest.mark.asyncio
-async def test_ping_uses_unix_args_on_non_windows():
-    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("192.168.1.1")
-
-    assert "-c" in captured["args"]
-    assert "-W" in captured["args"]
-    assert "-n" not in captured["args"]
-
-
-@pytest.mark.asyncio
-async def test_ping_uses_windows_args_on_win32():
-    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("192.168.1.1")
-
-    assert "-n" in captured["args"]
-    assert "-w" in captured["args"]
-    assert "-c" not in captured["args"]
-
-
 # --- _tcp_connect ---
 
 @pytest.mark.asyncio

docker-compose.yml

@@ -7,8 +7,9 @@ services:
     env_file:
       - .env
     environment:
-      # Override env_file: SQLite path must point inside the container volume
+      # Override env_file values that differ in Docker
       SQLITE_PATH: /app/data/homelab.db
+      CORS_ORIGINS: '["http://localhost:3000"]'
     volumes:
       - backend_data:/app/data
     networks:

docs/logo/icon-128.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="128" height="128" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/icon-16.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="16" height="16" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/icon-256.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="256" height="256" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/icon-32.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/icon-512.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="512" height="512" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/icon-64.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/icon.svg

@@ -1,46 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-
-  <!-- Background -->
-  <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-  <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-
-  <!-- House body -->
-  <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-        fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-
-  <!-- Floor line (subtle) -->
-  <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-
-  <!-- Door -->
-  <rect x="27" y="40" width="10" height="13" rx="1.5"
-        fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-
-  <!-- Network lines (drawn under nodes) -->
-  <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-  <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-
-  <!-- Center hub glow -->
-  <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-  <!-- Center hub -->
-  <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-
-  <!-- Left node -->
-  <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-
-  <!-- Right node -->
-  <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-
-  <!-- Top node -->
-  <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-</svg>

docs/logo/logo-lg.svg

@@ -1,33 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 72" width="640" height="164" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <g transform="translate(4, 4)">
-    <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-    <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-    <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-          fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-    <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-    <rect x="27" y="40" width="10" height="13" rx="1.5"
-          fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-    <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-    <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-    <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-  </g>
-  <text x="80" y="42" font-family="Inter, system-ui, -apple-system, sans-serif" font-weight="600" font-size="30" letter-spacing="-0.5">
-    <tspan fill="#e6edf3">Home</tspan><tspan fill="#00d4ff">lable</tspan>
-  </text>
-  <text x="81" y="58" font-family="Inter, system-ui, -apple-system, sans-serif" font-weight="400" font-size="11" fill="#8b949e" letter-spacing="0.5">HomeLab Visualizer</text>
-</svg>

docs/logo/logo-md.svg

@@ -1,33 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 72" width="360" height="92" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <g transform="translate(4, 4)">
-    <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-    <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-    <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-          fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-    <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-    <rect x="27" y="40" width="10" height="13" rx="1.5"
-          fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-    <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-    <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-    <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-  </g>
-  <text x="80" y="42" font-family="Inter, system-ui, -apple-system, sans-serif" font-weight="600" font-size="30" letter-spacing="-0.5">
-    <tspan fill="#e6edf3">Home</tspan><tspan fill="#00d4ff">lable</tspan>
-  </text>
-  <text x="81" y="58" font-family="Inter, system-ui, -apple-system, sans-serif" font-weight="400" font-size="11" fill="#8b949e" letter-spacing="0.5">HomeLab Visualizer</text>
-</svg>

docs/logo/logo-sm.svg

@@ -1,33 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 72" width="200" height="51" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <g transform="translate(4, 4)">
-    <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-    <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-    <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-          fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-    <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-    <rect x="27" y="40" width="10" height="13" rx="1.5"
-          fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-    <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-    <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-    <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-  </g>
-  <text x="80" y="42" font-family="Inter, system-ui, -apple-system, sans-serif" font-weight="600" font-size="30" letter-spacing="-0.5">
-    <tspan fill="#e6edf3">Home</tspan><tspan fill="#00d4ff">lable</tspan>
-  </text>
-  <text x="81" y="58" font-family="Inter, system-ui, -apple-system, sans-serif" font-weight="400" font-size="11" fill="#8b949e" letter-spacing="0.5">HomeLab Visualizer</text>
-</svg>

docs/logo/logo.svg

@@ -1,48 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 72" fill="none">
-  <defs>
-    <radialGradient id="bg-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.08"/>
-      <stop offset="100%" stop-color="#0d1117" stop-opacity="0"/>
-    </radialGradient>
-    <filter id="node-glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-
-  <!-- Icon (72×72, scaled from 64 viewBox) -->
-  <g transform="translate(4, 4) scale(1)">
-    <circle cx="32" cy="32" r="32" fill="#0d1117"/>
-    <circle cx="32" cy="32" r="32" fill="url(#bg-glow)"/>
-    <path d="M32 11 L53 30 L48 30 L48 53 L16 53 L16 30 L11 30 Z"
-          fill="#161b22" stroke="#00d4ff" stroke-width="1.5" stroke-linejoin="round"/>
-    <line x1="16" y1="30" x2="48" y2="30" stroke="#00d4ff" stroke-width="0.5" opacity="0.25"/>
-    <rect x="27" y="40" width="10" height="13" rx="1.5"
-          fill="#0d1117" stroke="#00d4ff" stroke-width="1" opacity="0.9"/>
-    <line x1="32" y1="23" x2="32" y2="30" stroke="#a855f7" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="21" y1="38" x2="29" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <line x1="43" y1="38" x2="35" y2="33" stroke="#39d353" stroke-width="1.2" opacity="0.7" stroke-linecap="round"/>
-    <circle cx="32" cy="33" r="5" fill="#00d4ff" opacity="0.12"/>
-    <circle cx="32" cy="33" r="3" fill="#00d4ff" filter="url(#node-glow)"/>
-    <circle cx="21" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="43" cy="38" r="2.5" fill="#39d353" filter="url(#node-glow)"/>
-    <circle cx="32" cy="23" r="2" fill="#a855f7" filter="url(#node-glow)"/>
-  </g>
-
-  <!-- Text -->
-  <text x="80" y="42"
-        font-family="Inter, system-ui, -apple-system, sans-serif"
-        font-weight="600"
-        font-size="30"
-        letter-spacing="-0.5">
-    <tspan fill="#e6edf3">Home</tspan><tspan fill="#00d4ff">lable</tspan>
-  </text>
-
-  <!-- Subtitle -->
-  <text x="81" y="58"
-        font-family="Inter, system-ui, -apple-system, sans-serif"
-        font-weight="400"
-        font-size="11"
-        fill="#8b949e"
-        letter-spacing="0.5">HomeLab Visualizer</text>
-</svg>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.9.0",
+  "version": "1.3.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -53,7 +53,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "jsdom": "^28.1.0",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^0.577.0",
     "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",

frontend/src/App.tsx

@@ -33,10 +33,9 @@ import type { NodeData, EdgeData } from '@/types'
 
 const STANDALONE = import.meta.env.VITE_STANDALONE === 'true'
 const STANDALONE_STORAGE_KEY = 'homelable_canvas'
-const CONTAINER_MODE_TYPES = new Set<NodeData['type']>(['proxmox', 'docker_host'])
 
 export default function App() {
-  const { loadCanvas, markSaved, markUnsaved, selectedNodeId, selectedNodeIds, addNode, updateNode, deleteNode, onConnect, updateEdge, deleteEdge, setProxmoxContainerMode, setNodeZIndex, editingGroupRectId, setEditingGroupRectId, nodes, edges, snapshotHistory, undo, redo, copySelectedNodes, pasteNodes } = useCanvasStore()
+  const { loadCanvas, markSaved, markUnsaved, selectedNodeId, addNode, updateNode, deleteNode, onConnect, updateEdge, deleteEdge, setProxmoxContainerMode, setNodeZIndex, editingGroupRectId, setEditingGroupRectId, nodes, edges, snapshotHistory, undo, redo, copySelectedNodes, pasteNodes } = useCanvasStore()
   const canvasRef = useRef<HTMLDivElement>(null)
   const { isAuthenticated } = useAuthStore()
   const { activeTheme, setTheme } = useThemeStore()
@@ -45,8 +44,6 @@ export default function App() {
 
   const [themeModalOpen, setThemeModalOpen] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
-  const [sidebarForceView, setSidebarForceView] = useState<'pending' | 'history' | undefined>(undefined)
-  const [highlightPendingId, setHighlightPendingId] = useState<string | undefined>(undefined)
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
   const [addNodeOpen, setAddNodeOpen] = useState(false)
   const [addGroupRectOpen, setAddGroupRectOpen] = useState(false)
@@ -103,8 +100,8 @@ export default function App() {
           // Build a map of proxmox container mode to know if children should be nested
           const proxmoxContainerMap = new Map<string, boolean>(
             (apiNodes as ApiNode[])
-              .filter((n) => n.type === 'group' || n.container_mode === true)
-              .map((n) => [n.id, true])
+              .filter((n) => n.type === 'proxmox')
+              .map((n) => [n.id, n.container_mode !== false])
           )
           const rfNodes = (apiNodes as ApiNode[]).map((n) => deserializeApiNode(n, proxmoxContainerMap))
           const rfEdges = (apiEdges as ApiEdge[]).map(deserializeApiEdge)
@@ -185,12 +182,9 @@ export default function App() {
         custom_colors: {
           border: data.border_color,
           border_style: data.border_style,
-          border_width: data.border_width,
           background: data.background_color,
           text_color: data.text_color,
           text_position: data.text_position,
-          text_size: data.text_size,
-          label_position: data.label_position,
           font: data.font,
           z_order: data.z_order,
         },
@@ -204,7 +198,6 @@ export default function App() {
 
   const handleUpdateGroupRect = useCallback((data: GroupRectFormData) => {
     if (!editingGroupRectId) return
-    snapshotHistory()
     const existing = nodes.find((n) => n.id === editingGroupRectId)
     updateNode(editingGroupRectId, {
       label: data.label,
@@ -212,19 +205,16 @@ export default function App() {
         ...existing?.data.custom_colors,
         border: data.border_color,
         border_style: data.border_style,
-        border_width: data.border_width,
         background: data.background_color,
         text_color: data.text_color,
         text_position: data.text_position,
-        text_size: data.text_size,
-        label_position: data.label_position,
         font: data.font,
         z_order: data.z_order,
       },
     })
     setNodeZIndex(editingGroupRectId, data.z_order - 10)
     setEditingGroupRectId(null)
-  }, [editingGroupRectId, nodes, updateNode, setNodeZIndex, setEditingGroupRectId, snapshotHistory])
+  }, [editingGroupRectId, nodes, updateNode, setNodeZIndex, setEditingGroupRectId])
 
   const handleDeleteGroupRect = useCallback(() => {
     if (!editingGroupRectId) return
@@ -242,8 +232,8 @@ export default function App() {
     snapshotHistory()
     const existingNode = nodes.find((n) => n.id === editNodeId)
     updateNode(editNodeId, data)
-    // If container_mode changed, apply structural changes (children parentId, node dimensions)
-    if (typeof data.container_mode === 'boolean') {
+    // If proxmox container_mode changed, apply structural changes (children parentId, node dimensions)
+    if (data.type === 'proxmox' && typeof data.container_mode === 'boolean') {
       setProxmoxContainerMode(editNodeId, data.container_mode)
     }
     // Sync virtual edge when parent_id changes on an LXC/VM node
@@ -261,13 +251,10 @@ export default function App() {
           )
           if (oldEdge) deleteEdge(oldEdge.id)
         }
-        // Create virtual edge only when parent is NOT in container mode
-        // (container mode shows containment visually — no edge needed)
+        // Create new virtual edge: LXC top → Proxmox bottom
         if (newParentId) {
-          const parentNode = nodes.find((n) => n.id === newParentId)
-          if (!parentNode?.data.container_mode) {
-            onConnect({ source: editNodeId, sourceHandle: 'top', target: newParentId, targetHandle: 'bottom', type: 'virtual' } as unknown as Connection)
-          }
+          // Pass type as extra field — canvasStore.onConnect casts to Connection & Partial<EdgeData>
+          onConnect({ source: editNodeId, sourceHandle: 'top', target: newParentId, targetHandle: 'bottom', type: 'virtual' } as unknown as Connection)
         }
       }
     }
@@ -344,10 +331,6 @@ export default function App() {
     setEditEdgeId(edge.id)
   }, [])
 
-  const handleNodeDoubleClick = useCallback((node: Node<NodeData>) => {
-    handleEditNode(node.id)
-  }, [handleEditNode])
-
   const handleEdgeUpdate = useCallback((data: EdgeData) => {
     if (!editEdgeId) return
     snapshotHistory()
@@ -362,13 +345,6 @@ export default function App() {
     setEditEdgeId(null)
   }, [editEdgeId, deleteEdge, snapshotHistory])
 
-  const handleClearWaypoints = useCallback(() => {
-    if (!editEdgeId) return
-    snapshotHistory()
-    updateEdge(editEdgeId, { waypoints: [] })
-    setEditEdgeId(null)
-  }, [editEdgeId, updateEdge, snapshotHistory])
-
   const editNode = editNodeId ? nodes.find((n) => n.id === editNodeId) : null
   const editEdge = editEdgeId ? edges.find((e) => e.id === editEdgeId) : null
 
@@ -384,8 +360,6 @@ export default function App() {
             onScan={() => setScanConfigOpen(true)}
             onSave={handleSave}
             onNodeApproved={setEditNodeId}
-            forceView={sidebarForceView}
-            highlightPendingId={highlightPendingId}
           />
           <div className="flex flex-col flex-1 min-w-0">
             <Toolbar
@@ -402,22 +376,9 @@ export default function App() {
             />
             <div className="flex flex-1 min-h-0">
               <div ref={canvasRef} className="flex-1 min-w-0 h-full">
-                <CanvasContainer
-                  onConnect={handleEdgeConnect}
-                  onEdgeDoubleClick={handleEdgeDoubleClick}
-                  onNodeDoubleClick={handleNodeDoubleClick}
-                  onNodeDragStart={snapshotHistory}
-                  onOpenPending={(deviceId) => {
-                    setHighlightPendingId(undefined)
-                    setSidebarForceView(undefined)
-                    setTimeout(() => {
-                      setHighlightPendingId(deviceId)
-                      setSidebarForceView('pending')
-                    }, 0)
-                  }}
-                />
+                <CanvasContainer onConnect={handleEdgeConnect} onEdgeDoubleClick={handleEdgeDoubleClick} onNodeDragStart={snapshotHistory} />
               </div>
-              {(selectedNodeId || selectedNodeIds.length > 1) && <DetailPanel onEdit={handleEditNode} />}
+              {selectedNodeId && <DetailPanel onEdit={handleEditNode} />}
             </div>
           </div>
         </div>
@@ -427,9 +388,7 @@ export default function App() {
           onClose={() => setAddNodeOpen(false)}
           onSubmit={handleAddNode}
           title="Add Node"
-          parentContainerNodes={nodes
-            .filter((n) => CONTAINER_MODE_TYPES.has(n.data.type) && n.data.container_mode)
-            .map((n) => ({ id: n.id, label: n.data.label }))}
+          proxmoxNodes={nodes.filter((n) => n.type === 'proxmox').map((n) => ({ id: n.id, label: n.data.label }))}
         />
 
         {/* key forces re-mount when editing a different node, resetting form state */}
@@ -440,9 +399,7 @@ export default function App() {
           onSubmit={handleUpdateNode}
           initial={editNode?.data}
           title="Edit Node"
-          parentContainerNodes={nodes
-            .filter((n) => n.id !== editNodeId && CONTAINER_MODE_TYPES.has(n.data.type) && n.data.container_mode)
-            .map((n) => ({ id: n.id, label: n.data.label }))}
+          proxmoxNodes={nodes.filter((n) => n.type === 'proxmox').map((n) => ({ id: n.id, label: n.data.label }))}
         />
 
         <EdgeModal
@@ -463,7 +420,6 @@ export default function App() {
           onClose={() => setEditEdgeId(null)}
           onSubmit={handleEdgeUpdate}
           onDelete={handleEdgeDelete}
-          onClearWaypoints={handleClearWaypoints}
           initial={editEdge?.data}
           title="Edit Link"
         />
@@ -472,11 +428,7 @@ export default function App() {
           <ScanConfigModal
             open={scanConfigOpen}
             onClose={() => setScanConfigOpen(false)}
-            onScanNow={() => {
-              toast.success('Network scan started — check Scan History for results')
-              setSidebarForceView(undefined)
-              setTimeout(() => setSidebarForceView('history'), 0)
-            }}
+            onScanNow={() => toast.success('Scan triggered')}
           />
         )}
 
@@ -484,7 +436,7 @@ export default function App() {
           open={addGroupRectOpen}
           onClose={() => setAddGroupRectOpen(false)}
           onSubmit={handleAddGroupRect}
-          title="Add Zone"
+          title="Add Rectangle"
         />
 
         {/* key forces re-mount when editing a different rect */}
@@ -505,14 +457,11 @@ export default function App() {
               text_position: rc.text_position ?? 'top-left',
               border_color: rc.border ?? '#00d4ff',
               border_style: rc.border_style ?? 'solid',
-              border_width: rc.border_width ?? 2,
               background_color: rc.background ?? '#00d4ff0d',
-              text_size: rc.text_size ?? 12,
-              label_position: rc.label_position ?? 'inside',
               z_order: rc.z_order ?? 1,
             }
           })()}
-          title="Edit Zone"
+          title="Edit Rectangle"
         />
 
         {/* key forces re-mount on open so useState captures current theme as original */}
@@ -522,18 +471,7 @@ export default function App() {
           onClose={() => setThemeModalOpen(false)}
         />
 
-        <SearchModal
-          open={searchOpen}
-          onClose={() => setSearchOpen(false)}
-          onOpenPending={(deviceId) => {
-            setHighlightPendingId(undefined)
-            setSidebarForceView(undefined)
-            setTimeout(() => {
-              setHighlightPendingId(deviceId)
-              setSidebarForceView('pending')
-            }, 0)
-          }}
-        />
+        <SearchModal open={searchOpen} onClose={() => setSearchOpen(false)} />
         <ShortcutsModal open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
 
         <Toaster theme="dark" position="bottom-right" />

frontend/src/api/client.ts

@@ -5,9 +5,6 @@ export const api = axios.create({
   baseURL: '/api/v1',
 })
 
-// Unauthenticated axios instance — no JWT, no 401 redirect (used for public endpoints)
-const publicApi = axios.create({ baseURL: '/api/v1' })
-
 api.interceptors.request.use((config) => {
   const token = useAuthStore.getState().token
   if (token) config.headers.Authorization = `Bearer ${token}`
@@ -47,25 +44,14 @@ export const edgesApi = {
   delete: (id: string) => api.delete(`/edges/${id}`),
 }
 
-export const liveviewApi = {
-  load: (key: string) => publicApi.get('/liveview', { params: { key } }),
-}
-
 export const scanApi = {
   trigger: () => api.post('/scan/trigger'),
   pending: () => api.get('/scan/pending'),
   hidden: () => api.get('/scan/hidden'),
   runs: () => api.get('/scan/runs'),
-  clearPending: () => api.delete('/scan/pending'),
   approve: (id: string, nodeData: object) => api.post(`/scan/pending/${id}/approve`, nodeData),
   hide: (id: string) => api.post(`/scan/pending/${id}/hide`),
   ignore: (id: string) => api.post(`/scan/pending/${id}/ignore`),
-  stop: (runId: string) => api.post(`/scan/${runId}/stop`),
-  getConfig: () => api.get<{ ranges: string[] }>('/scan/config'),
-  saveConfig: (data: { ranges: string[] }) => api.post('/scan/config', data),
-}
-
-export const settingsApi = {
-  get: () => api.get<{ interval_seconds: number }>('/settings'),
-  save: (data: { interval_seconds: number }) => api.post<{ interval_seconds: number }>('/settings', data),
+  getConfig: () => api.get<{ ranges: string[]; interval_seconds: number }>('/scan/config'),
+  saveConfig: (data: { ranges: string[]; interval_seconds: number }) => api.post('/scan/config', data),
 }

frontend/src/components/LiveView.tsx

@@ -1,165 +0,0 @@
-/**
- * LiveView — read-only canvas accessible at /view?key=<LIVEVIEW_KEY>.
- *
- * - Non-standalone: fetches canvas from /api/v1/liveview?key=... (no JWT needed).
- *   Returns 403 when the feature is disabled or the key is wrong.
- * - Standalone: loads canvas from localStorage directly (no key required,
- *   since there is no backend to validate against).
- *
- * Pan and zoom work. Editing is fully disabled.
- * Clicking a node with an IP opens http://<ip> in a new tab.
- */
-
-import { useCallback, useEffect, useState } from 'react'
-import {
-  ReactFlowProvider,
-  ReactFlow,
-  Background,
-  BackgroundVariant,
-  Controls,
-  ConnectionMode,
-  useReactFlow,
-  type Node,
-} from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import { useCanvasStore } from '@/stores/canvasStore'
-import { useThemeStore } from '@/stores/themeStore'
-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 { liveviewApi } from '@/api/client'
-import type { NodeData } 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'
-
-function LiveViewCanvas() {
-  const { nodes, edges, loadCanvas, fitViewPending, clearFitViewPending } = useCanvasStore()
-  const { fitView } = useReactFlow()
-  const activeTheme = useThemeStore((s) => s.activeTheme)
-  const theme = THEMES[activeTheme]
-  // Derive initial view state synchronously (avoids calling setState inside an effect):
-  // - standalone → always ready (localStorage, no key required)
-  // - non-standalone, no ?key= → no-key error immediately
-  // - non-standalone, key present → loading (API call below)
-  const [viewState, setViewState] = useState<ViewState>(() => {
-    if (STANDALONE) return 'ready'
-    return new URLSearchParams(window.location.search).get('key') ? 'loading' : 'no-key'
-  })
-
-  useEffect(() => {
-    if (STANDALONE) {
-      try {
-        const saved = localStorage.getItem(STORAGE_KEY)
-        if (saved) {
-          const { nodes: savedNodes, edges: savedEdges } = JSON.parse(saved)
-          loadCanvas(savedNodes, savedEdges)
-        }
-      } catch {
-        // empty canvas on parse error — show empty canvas
-      }
-      return
-    }
-
-    // Already handled synchronously in useState initializer
-    const key = new URLSearchParams(window.location.search).get('key')
-    if (!key) return
-
-    liveviewApi.load(key)
-      .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')
-            .map((n: ApiNode) => [n.id, n.type === 'group' ? true : n.container_mode !== false])
-        )
-        loadCanvas(
-          (apiNodes as ApiNode[]).map((n) => deserializeApiNode(n, proxmoxMap)),
-          (apiEdges as ApiEdge[]).map(deserializeApiEdge),
-        )
-        setViewState('ready')
-      })
-      .catch((err) => {
-        if (!err.response) { setViewState('network-error'); return }
-        const detail: string = err.response.data?.detail ?? ''
-        setViewState(detail === 'Live view is disabled' ? 'disabled' : 'invalid-key')
-      })
-  }, [loadCanvas])
-
-  useEffect(() => {
-    if (!fitViewPending || nodes.length === 0) return
-    const id = setTimeout(() => {
-      fitView({ padding: 0.12, duration: 350 })
-      clearFitViewPending()
-    }, 50)
-    return () => clearTimeout(id)
-  }, [fitViewPending, nodes.length, fitView, clearFitViewPending])
-
-  const onNodeClick = useCallback((_: React.MouseEvent, node: Node<NodeData>) => {
-    const ip = node.data.ip
-    if (ip) window.open(`http://${ip}`, '_blank', 'noopener,noreferrer')
-  }, [])
-
-  if (viewState === 'loading') {
-    return (
-      <div className="flex h-screen w-screen items-center justify-center bg-[#0d1117] text-[#8b949e]">
-        Loading…
-      </div>
-    )
-  }
-
-  if (viewState !== 'ready') {
-    const messages: Record<Exclude<ViewState, 'loading' | 'ready'>, string> = {
-      disabled: 'Live view is disabled on this instance.',
-      'invalid-key': 'Invalid or expired live view key.',
-      'no-key': 'Missing key — use ?key=your-secret in the URL.',
-      'network-error': 'Could not reach the server. Check your connection.',
-    }
-    return (
-      <div className="flex h-screen w-screen items-center justify-center bg-[#0d1117]">
-        <div className="text-center space-y-2">
-          <p className="text-[#f85149] text-lg font-medium">Access Denied</p>
-          <p className="text-[#8b949e] text-sm">{messages[viewState]}</p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="w-full h-screen" style={{ background: theme.colors.canvasBackground }}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        nodesDraggable={false}
-        nodesConnectable={false}
-        elementsSelectable={false}
-        panOnDrag
-        zoomOnScroll
-        colorMode={theme.colors.reactFlowColorMode}
-        connectionMode={ConnectionMode.Loose}
-        onNodeClick={onNodeClick}
-      >
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={24}
-          size={1}
-          color={theme.colors.canvasDotColor}
-        />
-        <Controls showInteractive={false} />
-      </ReactFlow>
-    </div>
-  )
-}
-
-export default function LiveView() {
-  return (
-    <ReactFlowProvider>
-      <LiveViewCanvas />
-    </ReactFlowProvider>
-  )
-}

frontend/src/components/LoginPage.tsx

@@ -20,9 +20,8 @@ export function LoginPage() {
     try {
       const res = await authApi.login(username, password)
       login(res.data.access_token)
-    } catch (err: unknown) {
-      const hasResponse = err && typeof err === 'object' && 'response' in err
-      setError(hasResponse ? 'Invalid username or password' : 'Could not reach the server — check your CORS_ORIGINS setting')
+    } catch {
+      setError('Invalid username or password')
     } finally {
       setLoading(false)
     }
@@ -96,7 +95,7 @@ export function LoginPage() {
         </form>
 
         <p className="text-center text-[10px] text-muted-foreground/40 mt-4">
-          Credentials configured in <span className="font-mono">.env</span>
+          Credentials configured in <span className="font-mono">config.yml</span>
         </p>
       </div>
     </div>

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

@@ -1,205 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
-import { useCanvasStore } from '@/stores/canvasStore'
-
-// ── Mock heavy dependencies ────────────────────────────────────────────────
-
-vi.mock('@xyflow/react', () => ({
-  ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  ReactFlow: () => <div data-testid="react-flow" />,
-  Background: () => null,
-  Controls: () => null,
-  BackgroundVariant: { Dots: 'dots' },
-  ConnectionMode: { Loose: 'loose' },
-  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'
-
-// ── Helpers ────────────────────────────────────────────────────────────────
-
-function setSearch(params: string) {
-  Object.defineProperty(window, 'location', {
-    writable: true,
-    value: { ...window.location, search: params, pathname: '/view' },
-  })
-}
-
-const canvasPayload = {
-  data: {
-    nodes: [{
-      id: 'n1', type: 'server', label: 'CI Node', status: 'online',
-      services: [], pos_x: 0, pos_y: 0,
-      created_at: '2024-01-01T00:00:00Z', updated_at: '2024-01-01T00:00:00Z',
-    }],
-    edges: [],
-    viewport: { x: 0, y: 0, zoom: 1 },
-  },
-}
-
-// ── Tests ──────────────────────────────────────────────────────────────────
-
-describe('LiveView (non-standalone)', () => {
-  beforeEach(() => {
-    vi.mocked(liveviewApi.load).mockReset()
-    useCanvasStore.setState({ nodes: [], edges: [] })
-  })
-
-  afterEach(() => { setSearch('') })
-
-  // ── No key ────────────────────────────────────────────────────────────────
-
-  it('shows no-key error when ?key= is missing', async () => {
-    setSearch('')
-    render(<LiveView />)
-    await waitFor(() => {
-      expect(screen.getByText('Access Denied')).toBeDefined()
-      expect(screen.getByText(/Missing key/)).toBeDefined()
-    })
-    expect(liveviewApi.load).not.toHaveBeenCalled()
-  })
-
-  // ── Disabled ──────────────────────────────────────────────────────────────
-
-  it('shows disabled error when backend returns "Live view is disabled"', async () => {
-    setSearch('?key=anything')
-    vi.mocked(liveviewApi.load).mockRejectedValue({
-      response: { data: { detail: 'Live view is disabled' } },
-    })
-    render(<LiveView />)
-    await waitFor(() => {
-      expect(screen.getByText(/disabled on this instance/)).toBeDefined()
-    })
-  })
-
-  // ── Invalid key ───────────────────────────────────────────────────────────
-
-  it('shows invalid-key error when backend returns "Invalid live view key"', async () => {
-    setSearch('?key=wrong')
-    vi.mocked(liveviewApi.load).mockRejectedValue({
-      response: { data: { detail: 'Invalid live view key' } },
-    })
-    render(<LiveView />)
-    await waitFor(() => {
-      expect(screen.getByText(/Invalid or expired/)).toBeDefined()
-    })
-  })
-
-  it('shows network-error for non-response errors (offline, CORS, 500)', async () => {
-    setSearch('?key=anything')
-    vi.mocked(liveviewApi.load).mockRejectedValue(new Error('network'))
-    render(<LiveView />)
-    await waitFor(() => {
-      expect(screen.getByText(/Could not reach the server/)).toBeDefined()
-    })
-  })
-
-  // ── Valid key → canvas rendered ───────────────────────────────────────────
-
-  it('renders the canvas on valid key', async () => {
-    setSearch('?key=correct-key')
-    vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
-    render(<LiveView />)
-    await waitFor(() => {
-      expect(screen.getByTestId('react-flow')).toBeDefined()
-    })
-    expect(liveviewApi.load).toHaveBeenCalledWith('correct-key')
-  })
-
-  it('loads nodes into the canvas store on success', async () => {
-    setSearch('?key=secret')
-    vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
-    render(<LiveView />)
-    await waitFor(() => {
-      expect(screen.getByTestId('react-flow')).toBeDefined()
-    })
-    const { nodes } = useCanvasStore.getState()
-    expect(nodes.find((n) => n.id === 'n1')).toBeDefined()
-  })
-
-  // ── No editing props passed ───────────────────────────────────────────────
-
-  it('does not show any Access Denied when key is valid', async () => {
-    setSearch('?key=valid')
-    vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
-    render(<LiveView />)
-    await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
-    expect(screen.queryByText('Access Denied')).toBeNull()
-  })
-})
-
-// ── Standalone mode ────────────────────────────────────────────────────────
-
-const XYFLOW_MOCK = {
-  ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  ReactFlow: () => <div data-testid="react-flow" />,
-  Background: () => null,
-  Controls: () => null,
-  BackgroundVariant: { Dots: 'dots' },
-  ConnectionMode: { Loose: 'loose' },
-  useReactFlow: () => ({ fitView: vi.fn() }),
-}
-
-describe('LiveView (standalone — localStorage)', () => {
-  beforeEach(() => {
-    localStorage.clear()
-    useCanvasStore.setState({ nodes: [], edges: [] })
-  })
-
-  afterEach(() => {
-    setSearch('')
-    vi.unstubAllEnvs()
-  })
-
-  it('loads canvas from localStorage without calling the API', async () => {
-    const stored = {
-      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('')
-    render(<LiveViewStandalone />)
-
-    await waitFor(() => {
-      expect(screen.getByTestId('react-flow')).toBeDefined()
-    })
-    expect(mockLoad).not.toHaveBeenCalled()
-  })
-
-  it('shows canvas (empty) when localStorage has no saved data', async () => {
-    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('')
-    render(<LiveViewStandalone />)
-
-    await waitFor(() => {
-      expect(screen.getByTestId('react-flow')).toBeDefined()
-    })
-    expect(mockLoad).not.toHaveBeenCalled()
-  })
-})

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

@@ -51,7 +51,7 @@ describe('LoginPage', () => {
   })
 
   it('shows a generic error message — no credential enumeration', async () => {
-    vi.mocked(authApi.login).mockRejectedValue({ response: { status: 401 } })
+    vi.mocked(authApi.login).mockRejectedValue(new Error('401'))
     render(<LoginPage />)
     fireEvent.change(screen.getByLabelText('Username'), { target: { value: 'admin' } })
     fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'wrongpass' } })
@@ -65,21 +65,10 @@ describe('LoginPage', () => {
     expect(errors[0].textContent).toBe('Invalid username or password')
   })
 
-  it('shows a network error message when no response (e.g. CORS misconfiguration)', async () => {
-    vi.mocked(authApi.login).mockRejectedValue(new Error('Network Error'))
-    render(<LoginPage />)
-    fireEvent.change(screen.getByLabelText('Username'), { target: { value: 'admin' } })
-    fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'admin' } })
-    fireEvent.submit(screen.getByRole('button', { name: /sign in/i }).closest('form')!)
-    await waitFor(() => {
-      expect(screen.getByText(/Could not reach the server/)).toBeDefined()
-    })
-  })
-
   it('clears previous error before each new attempt', async () => {
     vi.mocked(authApi.login)
-      .mockRejectedValueOnce({ response: { status: 401 } })
-      .mockRejectedValueOnce({ response: { status: 401 } })
+      .mockRejectedValueOnce(new Error('401'))
+      .mockRejectedValueOnce(new Error('401'))
     render(<LoginPage />)
     const form = screen.getByRole('button', { name: /sign in/i }).closest('form')!
     fireEvent.change(screen.getByLabelText('Username'), { target: { value: 'admin' } })

frontend/src/components/canvas/CanvasContainer.tsx

@@ -1,64 +1,40 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback } from 'react'
 import {
   ReactFlow,
   Background,
   Controls,
-  ControlButton,
   BackgroundVariant,
   ConnectionMode,
-  SelectionMode,
-  useReactFlow,
   type Node,
   type Edge,
   type Connection,
 } from '@xyflow/react'
-import { MousePointer2, Hand } from 'lucide-react'
 import '@xyflow/react/dist/style.css'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { nodeTypes } from './nodes/nodeTypes'
 import { edgeTypes } from './edges/edgeTypes'
-import { SearchBar } from './SearchBar'
 import type { NodeData, EdgeData } from '@/types'
 
 interface CanvasContainerProps {
   onConnect?: (connection: Connection) => void
   onEdgeDoubleClick?: (edge: Edge<EdgeData>) => void
-  onNodeDoubleClick?: (node: Node<NodeData>) => void
   onNodeDragStart?: () => void
-  onOpenPending?: (deviceId: string) => void
 }
 
-export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, onNodeDoubleClick, onNodeDragStart, onOpenPending }: CanvasContainerProps) {
-  const [lassoMode, setLassoMode] = useState(true)
+export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, onNodeDragStart }: CanvasContainerProps) {
   const {
     nodes, edges,
     onNodesChange, onEdgesChange,
-    setSelectedNode, snapshotHistory,
-    fitViewPending, clearFitViewPending,
+    setSelectedNode,
   } = useCanvasStore()
-  const { fitView } = useReactFlow()
-
-  // Fit view after canvas loads (fitViewPending is set by loadCanvas)
-  useEffect(() => {
-    if (!fitViewPending || nodes.length === 0) return
-    const id = setTimeout(() => {
-      fitView({ padding: 0.12, duration: 350 })
-      clearFitViewPending()
-    }, 50)
-    return () => clearTimeout(id)
-  }, [fitViewPending, nodes.length, fitView, clearFitViewPending])
 
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const theme = THEMES[activeTheme]
 
-  const onNodeClick = useCallback((e: React.MouseEvent, node: Node<NodeData>) => {
-    if (e.ctrlKey || e.metaKey) {
-      setSelectedNode(null)
-    } else {
-      setSelectedNode(node.id)
-    }
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node<NodeData>) => {
+    setSelectedNode(node.id)
   }, [setSelectedNode])
 
   const onPaneClick = useCallback(() => {
@@ -69,20 +45,6 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
     onEdgeDoubleClick?.(edge)
   }, [onEdgeDoubleClick])
 
-  const handleNodeDoubleClick = useCallback((_: React.MouseEvent, node: Node<NodeData>) => {
-    onNodeDoubleClick?.(node)
-  }, [onNodeDoubleClick])
-
-  const handleBeforeDelete = useCallback(async () => {
-    snapshotHistory()
-    return true
-  }, [snapshotHistory])
-
-  const isValidConnection = useCallback(
-    (connection: { source: string | null; target: string | null }) => connection.source !== connection.target,
-    []
-  )
-
   return (
     <div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}>
       <ReactFlow
@@ -94,41 +56,24 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
         onNodeClick={onNodeClick}
         onPaneClick={onPaneClick}
         onEdgeDoubleClick={handleEdgeDoubleClick}
-        onNodeDoubleClick={handleNodeDoubleClick}
         onNodeDragStart={onNodeDragStart}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        deleteKeyCode={['Backspace', 'Delete']}
-        onBeforeDelete={handleBeforeDelete}
-        selectionOnDrag={lassoMode}
-        panOnDrag={lassoMode ? [1, 2] : true}
-        panActivationKeyCode="Space"
-        selectionMode={SelectionMode.Partial}
-        multiSelectionKeyCode={['Meta', 'Control']}
-        minZoom={0.25}
-        maxZoom={2.5}
         snapToGrid
-        snapGrid={[8, 8]}
+        snapGrid={[16, 16]}
+        fitView
         colorMode={theme.colors.reactFlowColorMode}
         elevateNodesOnSelect={false}
         connectionMode={ConnectionMode.Loose}
-        isValidConnection={isValidConnection}
+        isValidConnection={(connection) => connection.source !== connection.target}
       >
         <Background
           variant={BackgroundVariant.Dots}
-          gap={16}
+          gap={24}
           size={1}
           color={theme.colors.canvasDotColor}
         />
-        <SearchBar onOpenPending={onOpenPending} />
-        <Controls>
-          <ControlButton
-            onClick={() => setLassoMode((m) => !m)}
-            title={lassoMode ? 'Switch to pan mode (Space to pan)' : 'Switch to lasso mode'}
-          >
-            {lassoMode ? <MousePointer2 size={12} /> : <Hand size={12} />}
-          </ControlButton>
-        </Controls>
+        <Controls />
       </ReactFlow>
     </div>
   )

frontend/src/components/canvas/SearchBar.tsx

@@ -1,218 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { useReactFlow } from '@xyflow/react'
-import { Search, X } from 'lucide-react'
-import { useCanvasStore } from '@/stores/canvasStore'
-import { scanApi } from '@/api/client'
-import { NODE_TYPE_LABELS } from '@/types'
-import type { PendingDevice } from '@/components/modals/PendingDeviceModal'
-
-interface SearchBarProps {
-  onOpenPending?: (deviceId: string) => void
-}
-
-export function SearchBar({ onOpenPending }: SearchBarProps) {
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [pendingDevices, setPendingDevices] = useState<PendingDevice[]>([])
-  const inputRef = useRef<HTMLInputElement>(null)
-  const { nodes, setSelectedNode } = useCanvasStore()
-  const { setCenter } = useReactFlow()
-
-  useEffect(() => {
-    if (!open) return
-    scanApi.pending().then((res) => setPendingDevices(res.data)).catch(() => {})
-  }, [open])
-
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
-        e.preventDefault()
-        setOpen(true)
-      }
-      if (e.key === 'Escape') {
-        setOpen(false)
-        setQuery('')
-      }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-
-  useEffect(() => {
-    if (open) inputRef.current?.focus()
-  }, [open])
-
-  const q = query.toLowerCase().trim()
-  const nodeResults = q
-    ? nodes.filter((n) => {
-        if (n.data.type === 'groupRect') return false
-        return (
-          n.data.label?.toLowerCase().includes(q) ||
-          n.data.ip?.toLowerCase().includes(q) ||
-          n.data.hostname?.toLowerCase().includes(q) ||
-          (n.data.services ?? []).some((s) => s.service_name?.toLowerCase().includes(q))
-        )
-      })
-    : []
-
-  const pendingResults = q
-    ? pendingDevices.filter((d) =>
-        d.ip.toLowerCase().includes(q) ||
-        d.hostname?.toLowerCase().includes(q) ||
-        d.services.some((s) =>
-          s.service_name?.toLowerCase().includes(q) ||
-          s.category?.toLowerCase().includes(q)
-        )
-      ).slice(0, 4)
-    : []
-
-  const totalResults = nodeResults.length + pendingResults.length
-
-  const goToNode = (id: string) => {
-    const node = nodes.find((n) => n.id === id)
-    if (!node) return
-    setSelectedNode(id)
-    // For grouped nodes, add parent's absolute position
-    let absX = node.position.x
-    let absY = node.position.y
-    if (node.parentId) {
-      const parent = nodes.find((n) => n.id === node.parentId)
-      if (parent) { absX += parent.position.x; absY += parent.position.y }
-    }
-    const w = node.measured?.width ?? node.width ?? 200
-    const h = node.measured?.height ?? node.height ?? 80
-    setCenter(absX + w / 2, absY + h / 2, { zoom: 1.5, duration: 500 })
-    setOpen(false)
-    setQuery('')
-  }
-
-  if (!open) return null
-
-  return (
-    <div
-      className="nodrag nowheel"
-      style={{
-        position: 'absolute',
-        top: 16,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: 1000,
-        width: 360,
-        pointerEvents: 'all',
-      }}
-    >
-      <div style={{
-        background: '#161b22',
-        border: '1px solid #30363d',
-        borderRadius: 8,
-        boxShadow: '0 8px 24px rgba(0,0,0,0.6)',
-        overflow: 'hidden',
-      }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px' }}>
-          <Search size={14} style={{ color: '#8b949e', flexShrink: 0 }} />
-          <input
-            ref={inputRef}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search by name, IP, hostname or service…"
-            style={{
-              flex: 1,
-              background: 'transparent',
-              border: 'none',
-              outline: 'none',
-              color: '#e6edf3',
-              fontSize: 13,
-            }}
-          />
-          {query && (
-            <span style={{ fontSize: 11, color: '#6e7681', flexShrink: 0 }}>
-              {totalResults} result{totalResults !== 1 ? 's' : ''}
-            </span>
-          )}
-          <button
-            onClick={() => { setOpen(false); setQuery('') }}
-            aria-label="Close search"
-            style={{ color: '#8b949e', background: 'none', border: 'none', cursor: 'pointer', padding: 2 }}
-          >
-            <X size={14} />
-          </button>
-        </div>
-
-        {totalResults > 0 && (
-          <div style={{ borderTop: '1px solid #30363d', maxHeight: 260, overflowY: 'auto' }}>
-            {nodeResults.map((n) => (
-              <button
-                key={n.id}
-                onClick={() => goToNode(n.id)}
-                style={{
-                  width: '100%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 10,
-                  padding: '7px 12px',
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  textAlign: 'left',
-                }}
-                onMouseEnter={(e) => (e.currentTarget.style.background = '#21262d')}
-                onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}
-              >
-                <span style={{ fontSize: 12, fontWeight: 600, color: '#e6edf3', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {n.data.label}
-                </span>
-                {n.data.ip && (
-                  <span style={{ fontSize: 11, color: '#8b949e', fontFamily: 'JetBrains Mono, monospace', flexShrink: 0 }}>
-                    {n.data.ip}
-                  </span>
-                )}
-                <span style={{ fontSize: 10, color: '#6e7681', flexShrink: 0 }}>
-                  {NODE_TYPE_LABELS[n.data.type] ?? n.data.type}
-                </span>
-              </button>
-            ))}
-            {pendingResults.length > 0 && nodeResults.length > 0 && (
-              <div style={{ height: 1, background: '#30363d', margin: '2px 0' }} />
-            )}
-            {pendingResults.map((d) => {
-              const serviceName = d.services.find((s) => s.service_name)?.service_name
-              return (
-                <button
-                  key={d.id}
-                  onClick={() => { onOpenPending?.(d.id); setOpen(false); setQuery('') }}
-                  style={{
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 10,
-                    padding: '7px 12px',
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    textAlign: 'left',
-                  }}
-                  onMouseEnter={(e) => (e.currentTarget.style.background = '#21262d')}
-                  onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}
-                >
-                  <span style={{ fontSize: 10, color: '#e3b341', fontFamily: 'JetBrains Mono, monospace', flexShrink: 0 }}>pending</span>
-                  <span style={{ fontSize: 12, fontWeight: 600, color: '#e6edf3', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    {d.hostname ?? d.ip}
-                  </span>
-                  <span style={{ fontSize: 11, color: '#8b949e', fontFamily: 'JetBrains Mono, monospace', flexShrink: 0 }}>
-                    {serviceName ?? d.ip}
-                  </span>
-                </button>
-              )
-            })}
-          </div>
-        )}
-
-        {q && totalResults === 0 && (
-          <div style={{ borderTop: '1px solid #30363d', padding: '10px 12px', fontSize: 12, color: '#6e7681', textAlign: 'center' }}>
-            No results for &ldquo;{query}&rdquo;
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,199 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { Server } from 'lucide-react'
-import { BaseNode } from '../nodes/BaseNode'
-import type { NodeData } from '@/types'
-import type { Node } from '@xyflow/react'
-
-let mockZoom = 1
-
-vi.mock('@xyflow/react', () => ({
-  Handle: () => null,
-  Position: { Top: 'top', Bottom: 'bottom' },
-  NodeResizer: () => null,
-  useUpdateNodeInternals: () => vi.fn(),
-  useViewport: () => ({ zoom: mockZoom }),
-}))
-
-vi.mock('@/stores/themeStore', () => ({
-  useThemeStore: (sel: (s: { activeTheme: string }) => unknown) => sel({ activeTheme: 'dark' }),
-}))
-
-vi.mock('@/stores/canvasStore', () => ({
-  useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({ hideIp: false }),
-}))
-
-vi.mock('@/utils/themes', () => ({
-  THEMES: {
-    dark: {
-      colors: {
-        statusColors: { online: '#39d353', offline: '#f85149', pending: '#e3b341', unknown: '#8b949e' },
-        nodeSubtextColor: '#8b949e',
-        nodeLabelColor: '#e6edf3',
-        nodeIconBackground: '#21262d',
-        handleBackground: '#30363d',
-        handleBorder: '#30363d',
-      },
-    },
-  },
-}))
-
-vi.mock('@/utils/nodeColors', () => ({
-  resolveNodeColors: () => ({ background: '#161b22', border: '#30363d', icon: '#00d4ff' }),
-}))
-
-vi.mock('@/utils/nodeIcons', () => ({
-  resolveNodeIcon: (_typeIcon: unknown) => _typeIcon,
-}))
-
-vi.mock('@/utils/maskIp', () => ({
-  maskIp: (ip: string) => ip,
-}))
-
-vi.mock('@/utils/propertyIcons', () => ({
-  resolvePropertyIcon: (icon: string | null) => icon ? Server : null,
-}))
-
-vi.mock('@/utils/handleUtils', () => ({
-  BOTTOM_HANDLE_IDS: ['bottom'],
-  BOTTOM_HANDLE_POSITIONS: { 1: [50] },
-}))
-
-beforeEach(() => { mockZoom = 1 })
-
-function makeNode(data: Partial<NodeData>): Node<NodeData> {
-  return {
-    id: 'n1',
-    type: data.type ?? 'server',
-    position: { x: 0, y: 0 },
-    data: {
-      label: 'Test Node',
-      type: 'server',
-      status: 'online',
-      services: [],
-      ...data,
-    },
-  }
-}
-
-function renderBaseNode(data: Partial<NodeData>) {
-  const node = makeNode(data)
-  return render(
-    <BaseNode
-      id={node.id}
-      data={node.data}
-      selected={false}
-      icon={Server}
-      type="server"
-      dragging={false}
-      zIndex={0}
-      isConnectable={true}
-      positionAbsoluteX={0}
-      positionAbsoluteY={0}
-    />
-  )
-}
-
-describe('BaseNode — borderWidth zoom scaling', () => {
-  beforeEach(() => { mockZoom = 1 })
-
-  it('borderWidth is 1px at zoom=1', () => {
-    mockZoom = 1
-    const { container } = renderBaseNode({})
-    expect((container.firstChild as HTMLElement).style.borderWidth).toBe('1px')
-  })
-
-  it('borderWidth scales to 2px at zoom=0.5', () => {
-    mockZoom = 0.5
-    const { container } = renderBaseNode({})
-    expect((container.firstChild as HTMLElement).style.borderWidth).toBe('2px')
-  })
-
-  it('borderWidth is clamped to 1px at zoom=2', () => {
-    mockZoom = 2
-    const { container } = renderBaseNode({})
-    expect((container.firstChild as HTMLElement).style.borderWidth).toBe('1px')
-  })
-
-  it('boxShadow glow ring uses borderWidth when selected + online at zoom=0.5', () => {
-    mockZoom = 0.5
-    const node = makeNode({ status: 'online' })
-    const { container } = render(
-      <BaseNode id={node.id} data={node.data} selected={true} icon={Server}
-        type="server" dragging={false} zIndex={0} isConnectable={true}
-        positionAbsoluteX={0} positionAbsoluteY={0} />
-    )
-    expect((container.firstChild as HTMLElement).style.boxShadow).toContain('0 0 0 2px')
-  })
-})
-
-describe('BaseNode — properties rendering', () => {
-  it('renders visible properties on the node', () => {
-    renderBaseNode({
-      properties: [
-        { key: 'CPU Model', value: 'i7-12700K', icon: 'Cpu', visible: true },
-        { key: 'RAM', value: '32 GB', icon: 'MemoryStick', visible: true },
-      ],
-    })
-    expect(screen.getByText('CPU Model')).toBeDefined()
-    // Value is rendered with a middle-dot prefix: "· 32 GB"
-    expect(screen.getByText(/32 GB/)).toBeDefined()
-  })
-
-  it('does not render properties with visible=false', () => {
-    renderBaseNode({
-      properties: [
-        { key: 'Secret', value: 'hidden', icon: null, visible: false },
-      ],
-    })
-    expect(screen.queryByText('Secret')).toBeNull()
-  })
-
-  it('renders nothing when properties array is empty', () => {
-    const { container } = renderBaseNode({ properties: [] })
-    // No properties section — only the main node card
-    expect(container.querySelectorAll('.flex.flex-col.gap-1').length).toBe(0)
-  })
-
-  it('renders label and ip regardless of properties', () => {
-    renderBaseNode({
-      label: 'My Server',
-      ip: '192.168.1.10',
-      properties: [{ key: 'OS', value: 'Debian 12', icon: 'Server', visible: true }],
-    })
-    expect(screen.getByText('My Server')).toBeDefined()
-    expect(screen.getByText('192.168.1.10')).toBeDefined()
-    expect(screen.getByText('OS')).toBeDefined()
-  })
-})
-
-describe('BaseNode — legacy hardware fallback', () => {
-  it('renders legacy hardware when properties is undefined and show_hardware is true', () => {
-    renderBaseNode({
-      properties: undefined,
-      show_hardware: true,
-      cpu_model: 'Intel Xeon E5-2680',
-      ram_gb: 32,
-    })
-    expect(screen.getByText('Intel Xeon E5-2680')).toBeDefined()
-  })
-
-  it('does not render legacy hardware when properties array is present (even if empty)', () => {
-    renderBaseNode({
-      properties: [],
-      show_hardware: true,
-      cpu_model: 'Intel Xeon E5-2680',
-    })
-    // properties array exists → new system, legacy section skipped
-    expect(screen.queryByText('Intel Xeon E5-2680')).toBeNull()
-  })
-
-  it('does not render legacy hardware when show_hardware is false', () => {
-    renderBaseNode({
-      properties: undefined,
-      show_hardware: false,
-      cpu_model: 'Intel Xeon E5-2680',
-    })
-    expect(screen.queryByText('Intel Xeon E5-2680')).toBeNull()
-  })
-})

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

@@ -16,11 +16,8 @@ vi.mock('@xyflow/react', () => ({
   },
   Background: () => null,
   Controls: () => null,
-  ControlButton: () => null,
   BackgroundVariant: { Dots: 'dots' },
   ConnectionMode: { Loose: 'loose' },
-  SelectionMode: { Partial: 'partial' },
-  useReactFlow: () => ({ fitView: vi.fn() }),
 }))
 
 vi.mock('@xyflow/react/dist/style.css', () => ({}))
@@ -104,24 +101,6 @@ describe('CanvasContainer', () => {
     }).not.toThrow()
   })
 
-  // ── Node double-click ─────────────────────────────────────────────────────
-
-  it('calls onNodeDoubleClick prop when a node is double-clicked', () => {
-    const onNodeDoubleClick = vi.fn()
-    const node = makeNode('n1')
-    render(<CanvasContainer onNodeDoubleClick={onNodeDoubleClick} />)
-    ;(rfProps.onNodeDoubleClick as (...args: unknown[]) => unknown)({} as MouseEvent, node)
-    expect(onNodeDoubleClick).toHaveBeenCalledWith(node)
-  })
-
-  it('does not throw when onNodeDoubleClick is not provided', () => {
-    const node = makeNode('n1')
-    render(<CanvasContainer />)
-    expect(() => {
-      ;(rfProps.onNodeDoubleClick as (...args: unknown[]) => unknown)({} as MouseEvent, node)
-    }).not.toThrow()
-  })
-
   // ── Connection validation ─────────────────────────────────────────────────
 
   it('isValidConnection returns false for self-connections', () => {
@@ -160,75 +139,8 @@ describe('CanvasContainer', () => {
     expect(rfProps.snapToGrid).toBe(true)
   })
 
-  it('sets snapGrid to [8, 8]', () => {
+  it('sets snapGrid to [16, 16]', () => {
     render(<CanvasContainer />)
-    expect(rfProps.snapGrid).toEqual([8, 8])
-  })
-
-  // ── Delete key ────────────────────────────────────────────────────────────
-
-  it('sets deleteKeyCode to include both Backspace and Delete', () => {
-    render(<CanvasContainer />)
-    expect(rfProps.deleteKeyCode).toEqual(['Backspace', 'Delete'])
-  })
-
-  // ── Lasso / multi-select ──────────────────────────────────────────────────
-
-  it('enables selectionOnDrag for lasso selection', () => {
-    render(<CanvasContainer />)
-    expect(rfProps.selectionOnDrag).toBe(true)
-  })
-
-  it('sets panActivationKeyCode to Space', () => {
-    render(<CanvasContainer />)
-    expect(rfProps.panActivationKeyCode).toBe('Space')
-  })
-
-  it('sets panOnDrag to [1, 2]', () => {
-    render(<CanvasContainer />)
-    expect(rfProps.panOnDrag).toEqual([1, 2])
-  })
-
-  it('sets selectionMode to Partial', () => {
-    render(<CanvasContainer />)
-    expect(rfProps.selectionMode).toBe('partial')
-  })
-
-  it('sets multiSelectionKeyCode to Meta and Control', () => {
-    render(<CanvasContainer />)
-    expect(rfProps.multiSelectionKeyCode).toEqual(['Meta', 'Control'])
-  })
-
-  it('clears selectedNode (sets null) on Ctrl+click instead of selecting', () => {
-    const node = makeNode('n1')
-    useCanvasStore.setState({ nodes: [node], selectedNodeId: 'n1' })
-    render(<CanvasContainer />)
-    ;(rfProps.onNodeClick as (...args: unknown[]) => unknown)(
-      { ctrlKey: true, metaKey: false } as unknown as MouseEvent,
-      node,
-    )
-    expect(useCanvasStore.getState().selectedNodeId).toBeNull()
-  })
-
-  it('clears selectedNode (sets null) on Cmd+click', () => {
-    const node = makeNode('n1')
-    useCanvasStore.setState({ nodes: [node], selectedNodeId: 'n1' })
-    render(<CanvasContainer />)
-    ;(rfProps.onNodeClick as (...args: unknown[]) => unknown)(
-      { ctrlKey: false, metaKey: true } as unknown as MouseEvent,
-      node,
-    )
-    expect(useCanvasStore.getState().selectedNodeId).toBeNull()
-  })
-
-  // ── onBeforeDelete snapshot ───────────────────────────────────────────────
-
-  it('onBeforeDelete calls snapshotHistory and returns true', async () => {
-    const snapshotHistory = vi.fn()
-    useCanvasStore.setState({ snapshotHistory } as unknown as Parameters<typeof useCanvasStore.setState>[0])
-    render(<CanvasContainer />)
-    const result = await (rfProps.onBeforeDelete as () => Promise<boolean>)()
-    expect(snapshotHistory).toHaveBeenCalledOnce()
-    expect(result).toBe(true)
+    expect(rfProps.snapGrid).toEqual([16, 16])
   })
 })

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

@@ -1,122 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { GroupNode } from '../nodes/GroupNode'
-import * as canvasStore from '@/stores/canvasStore'
-import type { Node } from '@xyflow/react'
-import type { NodeData } from '@/types'
-
-vi.mock('@/stores/canvasStore')
-
-vi.mock('@xyflow/react', () => ({
-  NodeResizer: ({ isVisible }: { isVisible: boolean }) => (
-    <div data-testid="node-resizer" data-visible={isVisible} />
-  ),
-  useReactFlow: () => ({}),
-}))
-
-vi.mock('@xyflow/react/dist/style.css', () => ({}))
-
-function makeGroupNode(overrides: Partial<NodeData> = {}): Node<NodeData> {
-  return {
-    id: 'g1',
-    type: 'group',
-    position: { x: 0, y: 0 },
-    width: 400,
-    height: 250,
-    data: {
-      label: 'My Group',
-      type: 'group',
-      status: 'unknown',
-      services: [],
-      custom_colors: { show_border: true },
-      ...overrides,
-    },
-  }
-}
-
-function renderGroupNode(props: Partial<Parameters<typeof GroupNode>[0]> = {}, storeNodes: unknown[] = []) {
-  const node = makeGroupNode(props.data)
-  vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-    nodes: storeNodes,
-    updateNode: vi.fn(),
-    snapshotHistory: vi.fn(),
-  } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
-  return render(
-    <GroupNode
-      id="g1"
-      data={node.data}
-      selected={false}
-      dragging={false}
-      zIndex={1}
-      isConnectable={true}
-      positionAbsoluteX={0}
-      positionAbsoluteY={0}
-      {...props}
-    />,
-  )
-}
-
-describe('GroupNode', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('renders the group label when show_border is true', () => {
-    renderGroupNode()
-    expect(screen.getByText('My Group')).toBeDefined()
-  })
-
-  it('hides the header when show_border is false and not selected', () => {
-    renderGroupNode({ data: makeGroupNode({ custom_colors: { show_border: false } }).data, selected: false })
-    expect(screen.queryByText('My Group')).toBeNull()
-  })
-
-  it('shows header when show_border is false but node is selected', () => {
-    renderGroupNode({ data: makeGroupNode({ custom_colors: { show_border: false } }).data, selected: true })
-    expect(screen.getByText('My Group')).toBeDefined()
-  })
-
-  it('shows NodeResizer only when selected', () => {
-    const { rerender } = renderGroupNode({ selected: false })
-    expect(screen.getByTestId('node-resizer').getAttribute('data-visible')).toBe('false')
-
-    vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-      nodes: [],
-      updateNode: vi.fn(),
-      snapshotHistory: vi.fn(),
-    } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
-    rerender(
-      <GroupNode
-        id="g1"
-        data={makeGroupNode().data}
-        selected={true}
-        dragging={false}
-        zIndex={1}
-        isConnectable={true}
-        positionAbsoluteX={0}
-        positionAbsoluteY={0}
-      />,
-    )
-    expect(screen.getByTestId('node-resizer').getAttribute('data-visible')).toBe('true')
-  })
-
-  it('shows online/offline status summary from children', () => {
-    const storeNodes = [
-      { id: 'c1', parentId: 'g1', data: { status: 'online' } },
-      { id: 'c2', parentId: 'g1', data: { status: 'offline' } },
-      { id: 'c3', parentId: 'other', data: { status: 'online' } }, // different group — excluded
-    ]
-
-    renderGroupNode({}, storeNodes)
-    // Two status indicators: one online, one offline (c3 excluded — wrong parent)
-    const statusSpans = screen.getAllByText(/● \d+/)
-    expect(statusSpans).toHaveLength(2)
-  })
-
-  it('does not show status summary when group has no children', () => {
-    renderGroupNode()
-    expect(screen.queryByText(/●/)).toBeNull()
-  })
-})

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

@@ -1,146 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { SearchBar } from '../SearchBar'
-import * as canvasStore from '@/stores/canvasStore'
-
-vi.mock('@/stores/canvasStore')
-
-vi.mock('@xyflow/react', () => ({
-  useReactFlow: () => ({ setCenter: vi.fn() }),
-}))
-
-function makeNode(id: string, overrides = {}) {
-  return {
-    id,
-    type: 'server',
-    position: { x: 0, y: 0 },
-    data: { label: id, type: 'server', status: 'online', services: [], ip: null, hostname: null },
-    ...overrides,
-  }
-}
-
-function setupStore(nodes: unknown[] = []) {
-  vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-    nodes,
-    setSelectedNode: vi.fn(),
-  } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-}
-
-function openSearch() {
-  fireEvent.keyDown(window, { key: 'f', ctrlKey: true })
-}
-
-describe('SearchBar', () => {
-  beforeEach(() => {
-    setupStore([])
-    vi.clearAllMocks()
-  })
-
-  it('is hidden by default', () => {
-    render(<SearchBar />)
-    expect(screen.queryByPlaceholderText(/search/i)).toBeNull()
-  })
-
-  it('opens on Ctrl+F', () => {
-    render(<SearchBar />)
-    openSearch()
-    expect(screen.getByPlaceholderText(/search/i)).toBeDefined()
-  })
-
-  it('opens on Cmd+F', () => {
-    render(<SearchBar />)
-    fireEvent.keyDown(window, { key: 'f', metaKey: true })
-    expect(screen.getByPlaceholderText(/search/i)).toBeDefined()
-  })
-
-  it('closes on Escape', () => {
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.keyDown(window, { key: 'Escape' })
-    expect(screen.queryByPlaceholderText(/search/i)).toBeNull()
-  })
-
-  it('closes when X button is clicked', () => {
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.click(screen.getByLabelText('Close search'))
-    expect(screen.queryByPlaceholderText(/search/i)).toBeNull()
-  })
-
-  it('filters by label', () => {
-    setupStore([
-      makeNode('n1', { data: { label: 'My Router', type: 'router', status: 'online', services: [], ip: null, hostname: null } }),
-      makeNode('n2', { data: { label: 'My NAS', type: 'nas', status: 'online', services: [], ip: null, hostname: null } }),
-    ])
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'router' } })
-    expect(screen.getByText('My Router')).toBeDefined()
-    expect(screen.queryByText('My NAS')).toBeNull()
-  })
-
-  it('filters by IP', () => {
-    setupStore([
-      makeNode('n1', { data: { label: 'Server A', type: 'server', status: 'online', services: [], ip: '192.168.1.10', hostname: null } }),
-      makeNode('n2', { data: { label: 'Server B', type: 'server', status: 'online', services: [], ip: '10.0.0.1', hostname: null } }),
-    ])
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: '192.168' } })
-    expect(screen.getByText('Server A')).toBeDefined()
-    expect(screen.queryByText('Server B')).toBeNull()
-  })
-
-  it('filters by service name', () => {
-    setupStore([
-      makeNode('n1', { data: { label: 'Web Server', type: 'server', status: 'online', services: [{ service_name: 'nginx', port: 80, protocol: 'tcp' }], ip: null, hostname: null } }),
-      makeNode('n2', { data: { label: 'DB Server', type: 'server', status: 'online', services: [{ service_name: 'mysql', port: 3306, protocol: 'tcp' }], ip: null, hostname: null } }),
-    ])
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'nginx' } })
-    expect(screen.getByText('Web Server')).toBeDefined()
-    expect(screen.queryByText('DB Server')).toBeNull()
-  })
-
-  it('excludes groupRect nodes from results', () => {
-    setupStore([
-      makeNode('gr1', { data: { label: 'DMZ Zone', type: 'groupRect', status: 'unknown', services: [], ip: null, hostname: null } }),
-    ])
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'dmz' } })
-    expect(screen.queryByText('DMZ Zone')).toBeNull()
-  })
-
-  it('shows no-results message when query has no matches', () => {
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'zzznomatch' } })
-    expect(screen.getByText(/no results/i)).toBeDefined()
-  })
-
-  it('calls setSelectedNode when a result is clicked', () => {
-    const setSelectedNode = vi.fn()
-    vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-      nodes: [makeNode('n1', { data: { label: 'My Server', type: 'server', status: 'online', services: [], ip: null, hostname: null } })],
-      setSelectedNode,
-    } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'my server' } })
-    fireEvent.click(screen.getByText('My Server'))
-    expect(setSelectedNode).toHaveBeenCalledWith('n1')
-  })
-
-  it('shows result count', () => {
-    setupStore([
-      makeNode('n1', { data: { label: 'Alpha', type: 'server', status: 'online', services: [], ip: null, hostname: null } }),
-      makeNode('n2', { data: { label: 'Beta', type: 'server', status: 'online', services: [], ip: null, hostname: null } }),
-    ])
-    render(<SearchBar />)
-    openSearch()
-    fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'a' } })
-    expect(screen.getByText(/2 results/i)).toBeDefined()
-  })
-})

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

@@ -1,175 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { buildWaypointPath, distToSegment, findInsertIndex, snap45, snap45both } from '../waypointUtils'
-
-describe('buildWaypointPath — bezier (default)', () => {
-  it('builds a catmull-rom curve with no waypoints (start = end clamp)', () => {
-    // With only 2 pts (src + target), catmull-rom = cubic bezier
-    const path = buildWaypointPath(0, 0, [], 100, 100)
-    expect(path).toMatch(/^M 0 0 C/)
-  })
-
-  it('routes through a single waypoint with smooth curve', () => {
-    const path = buildWaypointPath(0, 0, [{ x: 50, y: 0 }], 100, 100)
-    expect(path).toMatch(/^M 0 0 C/)
-    // Should not be a straight polyline
-    expect(path).not.toContain(' L ')
-  })
-
-  it('routes through multiple waypoints', () => {
-    const path = buildWaypointPath(0, 0, [{ x: 50, y: 0 }, { x: 50, y: 100 }], 100, 100)
-    expect(path).toMatch(/^M 0 0 C/)
-  })
-})
-
-describe('buildWaypointPath — smooth style', () => {
-  it('builds a direct straight line with no waypoints (no bend)', () => {
-    // Only 2 points → no intermediate vertex → no rounding needed
-    expect(buildWaypointPath(0, 0, [], 100, 100, 'smooth')).toBe('M 0 0 L 100 100')
-  })
-
-  it('routes through a single waypoint with straight lines (no intermediate bend)', () => {
-    // 3 pts: src → wp → target — only 1 intermediate → rounded corners at wp
-    const path = buildWaypointPath(0, 0, [{ x: 50, y: 0 }], 100, 100, 'smooth')
-    // Should start at source and end at target
-    expect(path).toMatch(/^M 0 0/)
-    expect(path).toMatch(/100 100$/)
-    // Should contain a quadratic bezier at the waypoint corner
-    expect(path).toContain('Q')
-  })
-
-  it('routes through multiple waypoints with rounded corners', () => {
-    const path = buildWaypointPath(0, 0, [{ x: 50, y: 0 }, { x: 50, y: 100 }], 100, 100, 'smooth')
-    expect(path).toMatch(/^M 0 0/)
-    expect(path).toMatch(/100 100$/)
-    expect(path).toContain('Q')
-  })
-
-  it('does not round corners when segment is too short (r clamped to 0)', () => {
-    // Adjacent waypoints very close together — r → 0, falls back to L
-    const path = buildWaypointPath(0, 0, [{ x: 1, y: 0 }, { x: 2, y: 0 }], 100, 0, 'smooth')
-    expect(path).toMatch(/^M 0 0/)
-  })
-})
-
-describe('snap45', () => {
-  // Use positions very close to a 45° angle so deviation < SNAP_THRESHOLD (15px)
-  it('snaps horizontal direction when close (deviation < threshold)', () => {
-    // (100, 3) — nearly horizontal, deviation from 0° ≈ 3px → snaps
-    const r = snap45({ x: 0, y: 0 }, { x: 100, y: 3 })
-    expect(r.y).toBe(0)
-    expect(r.x).toBeGreaterThan(0)
-  })
-
-  it('snaps vertical direction when close', () => {
-    const r = snap45({ x: 0, y: 0 }, { x: 3, y: 100 })
-    expect(r.x).toBe(0)
-    expect(r.y).toBeGreaterThan(0)
-  })
-
-  it('snaps 45° diagonal when close', () => {
-    // (80, 83) — nearly 45°, deviation ≈ 2px → snaps
-    const r = snap45({ x: 0, y: 0 }, { x: 80, y: 83 })
-    expect(r.x).toBe(r.y)
-  })
-
-  it('does NOT snap when deviation exceeds threshold', () => {
-    // (100, 40) — deviation from 0° is ~40px > 15 → no snap
-    const pos = { x: 100, y: 40 }
-    const r = snap45({ x: 0, y: 0 }, pos)
-    expect(r).toEqual(pos)
-  })
-
-  it('returns pos unchanged when distance < 1', () => {
-    const pos = { x: 5, y: 5 }
-    expect(snap45({ x: 5, y: 5 }, pos)).toBe(pos)
-  })
-
-  it('preserves distance from origin when snapping', () => {
-    const from = { x: 0, y: 0 }
-    const pos = { x: 100, y: 3 }  // close to horizontal
-    const r = snap45(from, pos)
-    const origDist = Math.hypot(pos.x - from.x, pos.y - from.y)
-    const snapDist = Math.hypot(r.x - from.x, r.y - from.y)
-    expect(snapDist).toBeCloseTo(origDist, 0)
-  })
-})
-
-describe('snap45both', () => {
-  it('finds intersection satisfying 45° from both adjacent points (axis-aligned)', () => {
-    // prev=(0,0), next=(100,100): diagonal — midpoint (50,50) should satisfy both
-    const r = snap45both({ x: 0, y: 0 }, { x: 100, y: 100 }, { x: 50, y: 50 })
-    // Result must be on a 45°-ray from (0,0)
-    const a1 = Math.atan2(r.y - 0, r.x - 0) / (Math.PI / 4)
-    expect(Math.abs(a1 - Math.round(a1))).toBeLessThan(0.05)
-    // Result must be on a 45°-ray from (100,100)
-    const a2 = Math.atan2(r.y - 100, r.x - 100) / (Math.PI / 4)
-    expect(Math.abs(a2 - Math.round(a2))).toBeLessThan(0.05)
-  })
-
-  it('snaps so both incoming and outgoing segments are at 45° when within threshold', () => {
-    // prev=(0,0), next=(200,0) — valid intersection at (100,100) (45° from each)
-    // pos=(100,93) is 7px away → within 15px threshold → should snap to (100,100)
-    const r = snap45both({ x: 0, y: 0 }, { x: 200, y: 0 }, { x: 100, y: 93 })
-    const a1 = Math.atan2(r.y - 0, r.x - 0) / (Math.PI / 4)
-    expect(Math.abs(a1 - Math.round(a1))).toBeLessThan(0.05)
-    const a2 = Math.atan2(r.y - 0, r.x - 200) / (Math.PI / 4)
-    expect(Math.abs(a2 - Math.round(a2))).toBeLessThan(0.05)
-  })
-
-  it('returns raw pos when beyond threshold', () => {
-    // pos=(100,80) is 20px from nearest intersection (100,100) → no snap
-    const pos = { x: 100, y: 80 }
-    const r = snap45both({ x: 0, y: 0 }, { x: 200, y: 0 }, pos)
-    expect(r).toEqual(pos)
-  })
-
-  it('falls back gracefully when prev === next', () => {
-    // No valid intersection → fallback to snap45
-    const r = snap45both({ x: 50, y: 50 }, { x: 50, y: 50 }, { x: 100, y: 90 })
-    expect(r).toBeDefined()
-  })
-})
-
-describe('distToSegment', () => {
-  it('returns 0 when point is on the segment', () => {
-    expect(distToSegment({ x: 50, y: 0 }, { x: 0, y: 0 }, { x: 100, y: 0 })).toBeCloseTo(0)
-  })
-
-  it('returns perpendicular distance when point is beside segment', () => {
-    expect(distToSegment({ x: 50, y: 10 }, { x: 0, y: 0 }, { x: 100, y: 0 })).toBeCloseTo(10)
-  })
-
-  it('returns distance to nearest endpoint when point is past the segment', () => {
-    expect(distToSegment({ x: 200, y: 0 }, { x: 0, y: 0 }, { x: 100, y: 0 })).toBeCloseTo(100)
-  })
-
-  it('handles zero-length segment (a === b)', () => {
-    expect(distToSegment({ x: 3, y: 4 }, { x: 0, y: 0 }, { x: 0, y: 0 })).toBeCloseTo(5)
-  })
-})
-
-describe('findInsertIndex', () => {
-  it('returns 0 when there are no waypoints (only one segment)', () => {
-    expect(findInsertIndex(0, 0, [], 100, 0, { x: 50, y: 5 })).toBe(0)
-  })
-
-  it('inserts before first waypoint when click is on first segment', () => {
-    const idx = findInsertIndex(0, 0, [{ x: 100, y: 0 }], 200, 0, { x: 30, y: 5 })
-    expect(idx).toBe(0)
-  })
-
-  it('inserts after first waypoint when click is on second segment', () => {
-    const idx = findInsertIndex(0, 0, [{ x: 100, y: 0 }], 200, 0, { x: 160, y: 5 })
-    expect(idx).toBe(1)
-  })
-
-  it('picks the closest segment among multiple', () => {
-    const idx = findInsertIndex(
-      0, 0,
-      [{ x: 100, y: 0 }, { x: 100, y: 100 }],
-      200, 100,
-      { x: 150, y: 105 },
-    )
-    expect(idx).toBe(2)
-  })
-})

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

@@ -1,19 +1,15 @@
-import { useCallback } from 'react'
 import {
   BaseEdge,
   EdgeLabelRenderer,
   getBezierPath,
   getSmoothStepPath,
-  useReactFlow,
   useStore,
   type EdgeProps,
   type Edge,
 } from '@xyflow/react'
-import type { EdgeData, EdgeType, Waypoint } from '@/types'
+import type { EdgeData, EdgeType } from '@/types'
 import { useThemeStore } from '@/stores/themeStore'
-import { useCanvasStore } from '@/stores/canvasStore'
 import { THEMES } from '@/utils/themes'
-import { buildWaypointPath, snap45, snap45both } from './waypointUtils'
 
 const VLAN_COLORS = ['#00d4ff', '#a855f7', '#39d353', '#ff6e00', '#e3b341', '#f85149']
 
@@ -22,165 +18,6 @@ function getVlanColor(vlanId?: number): string {
   return VLAN_COLORS[vlanId % VLAN_COLORS.length]
 }
 
-// ── Waypoint drag handle ─────────────────────────────────────────────────────
-
-interface WaypointHandleProps {
-  edgeId: string
-  index: number
-  waypoint: Waypoint
-  waypoints: Waypoint[]
-  color: string
-  pathStyle?: string
-  prevPoint: Waypoint
-  nextPoint: Waypoint
-}
-
-function WaypointHandle({ edgeId, index, waypoint, waypoints, color, pathStyle, prevPoint, nextPoint }: WaypointHandleProps) {
-  const { screenToFlowPosition } = useReactFlow()
-  const updateEdge = useCanvasStore((s) => s.updateEdge)
-
-  const handlePointerDown = useCallback((e: React.PointerEvent) => {
-    e.stopPropagation()
-    e.currentTarget.setPointerCapture(e.pointerId)
-  }, [])
-
-  const handlePointerMove = useCallback((e: React.PointerEvent) => {
-    if (e.buttons !== 1) return
-    let pos = screenToFlowPosition({ x: e.clientX, y: e.clientY })
-    if (pathStyle === 'smooth') {
-      // Find the intersection of 45°-rays from both adjacent points so that
-      // ALL segments (prev→this and this→next) snap to 45° simultaneously.
-      pos = snap45both(prevPoint, nextPoint, pos)
-    }
-    const next = [...waypoints]
-    next[index] = pos
-    updateEdge(edgeId, { waypoints: next })
-  }, [screenToFlowPosition, waypoints, index, edgeId, updateEdge, pathStyle, prevPoint, nextPoint])
-
-  const handlePointerUp = useCallback((e: React.PointerEvent) => {
-    e.currentTarget.releasePointerCapture(e.pointerId)
-  }, [])
-
-  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    updateEdge(edgeId, { waypoints: waypoints.filter((_, i) => i !== index) })
-  }, [edgeId, waypoints, index, updateEdge])
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${waypoint.x}px, ${waypoint.y}px)`,
-        width: 10,
-        height: 10,
-        borderRadius: '50%',
-        background: color,
-        border: '2px solid #0d1117',
-        cursor: 'grab',
-        pointerEvents: 'all',
-        zIndex: 10,
-      }}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onDoubleClick={handleDoubleClick}
-      title="Drag to move · Double-click to remove"
-    />
-  )
-}
-
-// ── Add waypoint handle (+ button at segment midpoints) ──────────────────────
-
-interface AddWaypointHandleProps {
-  edgeId: string
-  insertIndex: number
-  x: number
-  y: number
-  waypoints: Waypoint[]
-  color: string
-  pathStyle?: string
-  prevPoint: Waypoint
-}
-
-function AddWaypointHandle({ edgeId, insertIndex, x, y, waypoints, color, pathStyle, prevPoint }: AddWaypointHandleProps) {
-  const updateEdge = useCanvasStore((s) => s.updateEdge)
-
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    let pos = { x, y }
-    if (pathStyle === 'smooth') pos = snap45(prevPoint, pos)
-    const next = [...waypoints.slice(0, insertIndex), pos, ...waypoints.slice(insertIndex)]
-    updateEdge(edgeId, { waypoints: next })
-  }, [edgeId, insertIndex, x, y, waypoints, updateEdge, pathStyle, prevPoint])
-
-  return (
-    <div
-      onClick={handleClick}
-      style={{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`,
-        width: 14,
-        height: 14,
-        borderRadius: '50%',
-        background: '#0d1117',
-        border: `1.5px solid ${color}`,
-        color,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: 12,
-        lineHeight: 1,
-        cursor: 'crosshair',
-        pointerEvents: 'all',
-        zIndex: 9,
-        opacity: 0.7,
-      }}
-      title="Click to add waypoint"
-    >
-      +
-    </div>
-  )
-}
-
-// ── Segment midpoints ────────────────────────────────────────────────────────
-
-/**
- * Compute + handle positions for each path segment.
- * For smooth style: bias the first + handle to the source handle axis and the
- * last + handle to the target handle axis, so clicking always gives a clean
- * perpendicular exit/entry (no diagonal guesswork near the nodes).
- */
-function segmentMidpoints(
-  sourceX: number, sourceY: number,
-  waypoints: Waypoint[],
-  targetX: number, targetY: number,
-  pathStyle?: string,
-  sourcePosition?: string,
-): { x: number; y: number; insertIndex: number }[] {
-  const pts = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
-  const isSmooth = pathStyle === 'smooth'
-
-  return pts.slice(0, -1).map((a, i) => {
-    const b = pts[i + 1]
-    let mx = (a.x + b.x) / 2
-    const my = (a.y + b.y) / 2
-
-    // For smooth style with no existing waypoints, bias the single + handle onto
-    // the source handle axis so clicking it creates a perpendicular exit.
-    // Only applies to bottom/top handles (vertical exits) and only when the edge
-    // has no waypoints yet — once waypoints exist, all + handles stay at the
-    // real segment midpoint so they remain visually on the edge.
-    if (isSmooth && i === 0 && pts.length === 2) {
-      const vertSrc = sourcePosition === 'bottom' || sourcePosition === 'top'
-      if (vertSrc) mx = a.x  // same X as source → + sits directly below/above node
-    }
-
-    return { x: mx, y: my, insertIndex: i }
-  })
-}
-
-// ── Main edge component ──────────────────────────────────────────────────────
-
 export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected }: EdgeProps<Edge<EdgeData>>) {
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const theme = THEMES[activeTheme]
@@ -188,26 +25,11 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
   const targetType = useStore((s) => s.nodeLookup.get(target)?.type)
   const isBidirectional = sourceType === 'proxmox' && targetType === 'proxmox'
 
-  const waypoints: Waypoint[] = Array.isArray(data?.waypoints) && data.waypoints.length > 0
-    ? data.waypoints as Waypoint[]
-    : []
-
-  const hasWaypoints = waypoints.length > 0
-
-  const pathStyle = data?.path_style as string | undefined
-
   const pathArgs = { sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }
-  const [autoPath, labelX] = pathStyle === 'smooth'
+  const [edgePath, labelX, labelY] = data?.path_style === 'smooth'
     ? getSmoothStepPath({ ...pathArgs, borderRadius: 8 })
     : getBezierPath(pathArgs)
 
-  const edgePath = hasWaypoints
-    ? buildWaypointPath(sourceX, sourceY, waypoints, targetX, targetY, pathStyle)
-    : autoPath
-
-  const midX = hasWaypoints ? (sourceX + targetX) / 2 : labelX
-  const midY = (sourceY + targetY) / 2
-
   const edgeType: EdgeType = data?.type ?? 'ethernet'
   const edgeColors = theme.colors.edgeColors
 
@@ -221,11 +43,6 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
   }
 
   const customColor = data?.custom_color as string | undefined
-  const strokeColor: string = selected
-    ? theme.colors.edgeSelectedColor
-    : customColor
-    ?? (edgeType === 'vlan' ? getVlanColor(data?.vlan_id as number | undefined) : (BASE_STYLES[edgeType].stroke as string ?? edgeColors.ethernet))
-
   const style: React.CSSProperties = {
     ...BASE_STYLES[edgeType],
     ...(edgeType === 'vlan' ? { stroke: getVlanColor(data?.vlan_id as number | undefined) } : {}),
@@ -233,74 +50,48 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
     ...(selected ? { stroke: theme.colors.edgeSelectedColor, filter: `drop-shadow(0 0 4px ${theme.colors.edgeSelectedColor}88)` } : {}),
   }
 
-  const animMode: 'none' | 'snake' | 'flow' | 'basic' =
-    data?.animated === true || data?.animated === 'snake' ? 'snake' :
-    data?.animated === 'flow' ? 'flow' :
-    data?.animated === 'basic' ? 'basic' : 'none'
-
-  const animColor = customColor ?? (edgeType === 'vlan' ? getVlanColor(data?.vlan_id as number | undefined) : edgeColors[edgeType as keyof typeof edgeColors] as string)
-
-  const midpoints = selected
-    ? segmentMidpoints(sourceX, sourceY, waypoints, targetX, targetY, pathStyle, sourcePosition)
-    : []
+  // Animated dot: slightly brighter + thicker than the base edge, travels source→target
+  const dotColor = customColor ?? (edgeType === 'vlan' ? getVlanColor(data?.vlan_id as number | undefined) : edgeColors[edgeType as keyof typeof edgeColors] as string)
+  const dotWidth = ((style.strokeWidth as number ?? 2) + 1.5) * 2
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} style={animMode === 'basic' ? { ...style, stroke: 'transparent' } : style} interactionWidth={16} />
-
-      {animMode === 'basic' && (
+      <BaseEdge id={id} path={edgePath} style={style} />
+      {data?.animated && (
         <path
           d={edgePath}
           fill="none"
-          stroke={strokeColor}
-          strokeWidth={style.strokeWidth as number ?? 2}
-          strokeDasharray="5"
-          style={{
-            pointerEvents: 'none',
-            animation: 'homelable-basic-dash 0.5s linear infinite',
-            animationDirection: sourceY <= targetY ? 'normal' : 'reverse',
-          }}
-        />
-      )}
-
-      {animMode === 'snake' && (
-        <path
-          d={edgePath}
-          fill="none"
-          stroke={animColor}
-          strokeWidth={((style.strokeWidth as number ?? 2) + 1.5) * 2}
+          stroke={dotColor}
+          strokeWidth={dotWidth}
           strokeDasharray="20 10000"
           strokeLinecap="round"
           style={{ pointerEvents: 'none' }}
         >
           {isBidirectional ? (
-            <animate attributeName="stroke-dashoffset" values="-10000;0;-10000" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" />
+            <animate
+              attributeName="stroke-dashoffset"
+              values="-10000;0;-10000"
+              keyTimes="0;0.5;1"
+              dur="20s"
+              repeatCount="indefinite"
+            />
           ) : (
-            <animate attributeName="stroke-dashoffset" from="-10000" to="0" dur="10s" repeatCount="indefinite" />
+            <animate
+              attributeName="stroke-dashoffset"
+              from="-10000"
+              to="0"
+              dur="10s"
+              repeatCount="indefinite"
+            />
           )}
         </path>
       )}
-      {animMode === 'flow' && (
-        <path
-          d={edgePath}
-          fill="none"
-          stroke={animColor}
-          strokeWidth={Math.max(3, (style.strokeWidth as number ?? 2) * 1.8)}
-          strokeDasharray="6 12"
-          strokeLinecap="round"
-          strokeOpacity={0.85}
-          style={{ pointerEvents: 'none' }}
-        >
-          <animate attributeName="stroke-dashoffset" from="0" to="18" dur="1.2s" repeatCount="indefinite" />
-        </path>
-      )}
-
-      <EdgeLabelRenderer>
-        {data?.label && (
+      {data?.label && (
+        <EdgeLabelRenderer>
           <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 rounded"
             style={{
-              transform: `translate(-50%, -50%) translate(${midX}px, ${midY}px)`,
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
               background: theme.colors.edgeLabelBackground,
               color:      theme.colors.edgeLabelColor,
               border:     `1px solid ${theme.colors.edgeLabelBorder}`,
@@ -308,47 +99,8 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           >
             {data.label as string}
           </div>
-        )}
-
-        {/* Existing waypoint drag handles */}
-        {selected && waypoints.map((wp, idx) => {
-          const prevPoint = idx === 0 ? { x: sourceX, y: sourceY } : waypoints[idx - 1]
-          const nextPoint = idx === waypoints.length - 1 ? { x: targetX, y: targetY } : waypoints[idx + 1]
-          return (
-            <WaypointHandle
-              key={`wp-${idx}`}
-              edgeId={id}
-              index={idx}
-              waypoint={wp}
-              waypoints={waypoints}
-              color={strokeColor}
-              pathStyle={pathStyle}
-              prevPoint={prevPoint}
-              nextPoint={nextPoint}
-            />
-          )
-        })}
-
-        {/* + handles at segment midpoints to add new waypoints */}
-        {selected && midpoints.map((mp) => {
-          const prevPoint = mp.insertIndex === 0
-            ? { x: sourceX, y: sourceY }
-            : waypoints[mp.insertIndex - 1]
-          return (
-            <AddWaypointHandle
-              key={`add-${mp.insertIndex}`}
-              edgeId={id}
-              insertIndex={mp.insertIndex}
-              x={mp.x}
-              y={mp.y}
-              waypoints={waypoints}
-              color={strokeColor}
-              pathStyle={pathStyle}
-              prevPoint={prevPoint}
-            />
-          )
-        })}
-      </EdgeLabelRenderer>
+        </EdgeLabelRenderer>
+      )}
     </>
   )
 }

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

@@ -1,167 +0,0 @@
-import type { Waypoint } from '@/types'
-
-// ── Path builders ─────────────────────────────────────────────────────────────
-
-/** Catmull-Rom → cubic bezier for smooth curves through waypoints */
-function buildCatmullRomPath(pts: Waypoint[]): string {
-  if (pts.length < 2) return `M ${pts[0].x} ${pts[0].y}`
-  let d = `M ${pts[0].x} ${pts[0].y}`
-  for (let i = 0; i < pts.length - 1; i++) {
-    const p0 = pts[Math.max(i - 1, 0)]
-    const p1 = pts[i]
-    const p2 = pts[i + 1]
-    const p3 = pts[Math.min(i + 2, pts.length - 1)]
-    const cp1x = p1.x + (p2.x - p0.x) / 6
-    const cp1y = p1.y + (p2.y - p0.y) / 6
-    const cp2x = p2.x - (p3.x - p1.x) / 6
-    const cp2y = p2.y - (p3.y - p1.y) / 6
-    d += ` C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`
-  }
-  return d
-}
-
-/** Polyline with rounded corners at each waypoint vertex (quadratic bezier) */
-function buildRoundedPolylinePath(pts: Waypoint[], radius = 8): string {
-  if (pts.length < 2) return `M ${pts[0].x} ${pts[0].y}`
-  if (pts.length === 2) return `M ${pts[0].x} ${pts[0].y} L ${pts[1].x} ${pts[1].y}`
-
-  let d = `M ${pts[0].x} ${pts[0].y}`
-
-  for (let i = 1; i < pts.length - 1; i++) {
-    const prev = pts[i - 1]
-    const curr = pts[i]
-    const next = pts[i + 1]
-
-    const dx1 = curr.x - prev.x
-    const dy1 = curr.y - prev.y
-    const len1 = Math.hypot(dx1, dy1)
-
-    const dx2 = next.x - curr.x
-    const dy2 = next.y - curr.y
-    const len2 = Math.hypot(dx2, dy2)
-
-    if (len1 < 1 || len2 < 1) {
-      d += ` L ${curr.x} ${curr.y}`
-      continue
-    }
-
-    const r = Math.min(radius, len1 / 2, len2 / 2)
-
-    // Approach point (on segment prev→curr, r units before corner)
-    const bx = curr.x - (dx1 / len1) * r
-    const by = curr.y - (dy1 / len1) * r
-
-    // Departure point (on segment curr→next, r units after corner)
-    const ax = curr.x + (dx2 / len2) * r
-    const ay = curr.y + (dy2 / len2) * r
-
-    d += ` L ${bx} ${by} Q ${curr.x} ${curr.y} ${ax} ${ay}`
-  }
-
-  d += ` L ${pts[pts.length - 1].x} ${pts[pts.length - 1].y}`
-  return d
-}
-
-export function buildWaypointPath(
-  sourceX: number, sourceY: number,
-  waypoints: Waypoint[],
-  targetX: number, targetY: number,
-  pathStyle: string = 'bezier',
-): string {
-  const pts = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
-  return pathStyle === 'smooth' ? buildRoundedPolylinePath(pts) : buildCatmullRomPath(pts)
-}
-
-// ── 45° snapping ──────────────────────────────────────────────────────────────
-
-/**
- * Snap `pos` to the nearest 45°-multiple direction from `from`.
- * Only snaps when within SNAP_THRESHOLD px of a 45° position.
- */
-export function snap45(from: Waypoint, pos: Waypoint): Waypoint {
-  const dx = pos.x - from.x
-  const dy = pos.y - from.y
-  const dist = Math.hypot(dx, dy)
-  if (dist < 1) return pos
-  const angle = Math.atan2(dy, dx)
-  const snapped = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4)
-  const candidate = {
-    x: Math.round(from.x + dist * Math.cos(snapped)),
-    y: Math.round(from.y + dist * Math.sin(snapped)),
-  }
-  const deviation = Math.hypot(candidate.x - pos.x, candidate.y - pos.y)
-  return deviation <= SNAP_THRESHOLD ? candidate : pos
-}
-
-/** Snap threshold in flow-space pixels. Only snap when this close to a 45° position. */
-const SNAP_THRESHOLD = 15
-
-/**
- * Find the position closest to `pos` that lies simultaneously on a 45°-ray
- * from `prev` AND on a 45°-ray from `next`.
- *
- * Only snaps when the nearest valid intersection is within SNAP_THRESHOLD px —
- * outside that zone the raw drag position is returned, allowing free placement.
- */
-export function snap45both(prev: Waypoint, next: Waypoint, pos: Waypoint): Waypoint {
-  let best: Waypoint | null = null
-  let bestDist = Infinity
-
-  for (let i = 0; i < 8; i++) {
-    const a1 = i * Math.PI / 4
-    const c1 = Math.cos(a1), s1 = Math.sin(a1)
-
-    for (let j = 0; j < 8; j++) {
-      const a2 = j * Math.PI / 4
-      const c2 = Math.cos(a2), s2 = Math.sin(a2)
-
-      const dx = next.x - prev.x
-      const dy = next.y - prev.y
-      const det = -c1 * s2 + c2 * s1
-      if (Math.abs(det) < 1e-6) continue
-
-      const t = (-dx * s2 + c2 * dy) / det
-      const s = (c1 * dy - s1 * dx) / det
-      if (t < -1e-6 || s < -1e-6) continue
-
-      const ix = prev.x + t * c1
-      const iy = prev.y + t * s1
-      const d = Math.hypot(ix - pos.x, iy - pos.y)
-      if (d < bestDist) {
-        bestDist = d
-        best = { x: Math.round(ix), y: Math.round(iy) }
-      }
-    }
-  }
-
-  // Only snap if close enough — otherwise let the waypoint move freely
-  if (best === null || bestDist > SNAP_THRESHOLD) return pos
-  return best
-}
-
-// ── Geometry helpers ──────────────────────────────────────────────────────────
-
-export function distToSegment(p: Waypoint, a: Waypoint, b: Waypoint): number {
-  const dx = b.x - a.x
-  const dy = b.y - a.y
-  const lenSq = dx * dx + dy * dy
-  if (lenSq === 0) return Math.hypot(p.x - a.x, p.y - a.y)
-  const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq))
-  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy))
-}
-
-export function findInsertIndex(
-  sourceX: number, sourceY: number,
-  waypoints: Waypoint[],
-  targetX: number, targetY: number,
-  point: Waypoint,
-): number {
-  const allPts = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
-  let minDist = Infinity
-  let best = 0
-  for (let i = 0; i < allPts.length - 1; i++) {
-    const d = distToSegment(point, allPts[i], allPts[i + 1])
-    if (d < minDist) { minDist = d; best = i }
-  }
-  return best
-}

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

@@ -1,15 +1,13 @@
-import { createElement, useEffect, useMemo } from 'react'
-import { Handle, Position, NodeResizer, useUpdateNodeInternals, useViewport, type NodeProps, type Node } from '@xyflow/react'
+import { createElement } from 'react'
+import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
 import { Cpu, MemoryStick, HardDrive, type LucideIcon } from 'lucide-react'
 import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
 import { resolveNodeIcon } from '@/utils/nodeIcons'
-import { resolvePropertyIcon } from '@/utils/propertyIcons'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { maskIp } from '@/utils/maskIp'
-import { BOTTOM_HANDLE_IDS, BOTTOM_HANDLE_POSITIONS } from '@/utils/handleUtils'
 
 interface BaseNodeProps extends NodeProps<Node<NodeData>> {
   icon: LucideIcon
@@ -20,13 +18,7 @@ function formatStorage(gb: number): string {
   return `${gb} GB`
 }
 
-export function BaseNode({ id, data, selected, icon: typeIcon, width, height }: BaseNodeProps) {
-  const updateNodeInternals = useUpdateNodeInternals()
-  useEffect(() => { updateNodeInternals(id) }, [data.bottom_handles, id, updateNodeInternals])
-
-  const { zoom } = useViewport()
-  const borderWidth = useMemo(() => Math.max(1, 1 / zoom), [zoom])
-
+export function BaseNode({ data, selected, icon: typeIcon, width, height }: BaseNodeProps) {
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const hideIp = useCanvasStore((s) => s.hideIp)
   const theme = THEMES[activeTheme]
@@ -35,11 +27,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
   const colors = resolveNodeColors(data, activeTheme)
   const statusColor = theme.colors.statusColors[data.status]
   const isOnline = data.status === 'online'
-
-  // Properties: prefer new system; fall back to legacy hardware fields for unmigrated nodes
-  const visibleProperties = data.properties?.filter((p) => p.visible) ?? null
-  const showLegacyHardware = !data.properties && data.show_hardware &&
-    (data.cpu_count != null || data.cpu_model || data.ram_gb != null || data.disk_gb != null)
+  const showHardware = data.show_hardware && (data.cpu_count != null || data.cpu_model || data.ram_gb != null || data.disk_gb != null)
 
   return (
     <div
@@ -47,13 +35,11 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
       style={{
         background: colors.background,
         borderColor: colors.border,
-        borderWidth,
-        boxShadow: isOnline && selected
-          ? `0 0 0 ${borderWidth}px ${colors.border}, 0 0 10px ${colors.border}2e, 0 0 3px ${colors.border}1a`
-          : isOnline
+        borderWidth: selected ? 2 : 1,
+        boxShadow: isOnline
           ? `0 0 10px ${colors.border}2e, 0 0 3px ${colors.border}1a`
           : selected
-          ? `0 0 0 ${borderWidth}px ${colors.border}, 0 0 8px ${colors.border}44`
+          ? `0 0 8px ${colors.border}44`
           : 'none',
         opacity: data.status === 'offline' ? 0.55 : 1,
         minWidth: 140,
@@ -65,7 +51,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         isVisible={selected}
         minWidth={140}
         minHeight={50}
-        lineStyle={{ borderColor: 'transparent' }}
+        lineStyle={{ borderColor: colors.border, borderWidth: 1 }}
         handleStyle={{ borderColor: colors.border, background: colors.border, width: 8, height: 8 }}
       />
       <Handle
@@ -110,30 +96,12 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         </div>
       </div>
 
-      {/* Properties section (new system) */}
-      {visibleProperties && visibleProperties.length > 0 && (
-        <>
-          <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
-          <div className="flex flex-col gap-1 px-2.5 py-1.5">
-            {visibleProperties.map((prop) => {
-              const Icon = resolvePropertyIcon(prop.icon)
-              return (
-                <div key={prop.key} className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
-                  {Icon && <Icon size={9} className="shrink-0" />}
-                  <span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
-                  <span className="truncate" title={prop.value}>· {prop.value}</span>
-                </div>
-              )
-            })}
-          </div>
-        </>
-      )}
-
-      {/* Legacy hardware section — fallback for nodes not yet migrated */}
-      {showLegacyHardware && (
+      {/* Hardware section */}
+      {showHardware && (
         <>
           <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
           <div className="flex flex-col gap-1 px-2.5 py-1.5">
+            {/* Line 1: CPU */}
             {(data.cpu_model || data.cpu_count != null) && (
               <div className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
                 <Cpu size={9} className="shrink-0" />
@@ -145,6 +113,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
                 )}
               </div>
             )}
+            {/* Line 2: RAM + Disk */}
             {(data.ram_gb != null || data.disk_gb != null) && (
               <div className="flex items-center gap-2 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
                 {data.ram_gb != null && (
@@ -172,26 +141,13 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         title={data.status}
       />
 
-      {(BOTTOM_HANDLE_POSITIONS[data.bottom_handles ?? 1] ?? BOTTOM_HANDLE_POSITIONS[1]).map((leftPct, idx) => {
-        const sourceId = BOTTOM_HANDLE_IDS[idx]
-        const targetId = idx === 0 ? 'bottom-t' : `bottom-${idx + 1}-t`
-        return (
-          <span key={sourceId}>
-            <Handle
-              type="source"
-              position={Position.Bottom}
-              id={sourceId}
-              style={{ left: `${leftPct}%`, background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
-            />
-            <Handle
-              type="target"
-              position={Position.Bottom}
-              id={targetId}
-              style={{ left: `${leftPct}%`, opacity: 0, width: 12, height: 12 }}
-            />
-          </span>
-        )
-      })}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="bottom"
+        style={{ background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
+      />
+      <Handle type="target" position={Position.Bottom} id="bottom-t" style={{ opacity: 0, width: 12, height: 12 }} />
     </div>
   )
 }

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

@@ -1,125 +0,0 @@
-import { useState } from 'react'
-import { type NodeProps, type Node, NodeResizer } from '@xyflow/react'
-import { Layers, Pencil, Check, X } from 'lucide-react'
-import { useCanvasStore } from '@/stores/canvasStore'
-import { STATUS_COLORS, type NodeData } from '@/types'
-
-export function GroupNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
-  const { nodes, updateNode, snapshotHistory } = useCanvasStore()
-  const showBorder = data.custom_colors?.show_border !== false
-  const isVisible = showBorder || selected
-
-  const [editing, setEditing] = useState(false)
-  const [labelDraft, setLabelDraft] = useState(data.label)
-
-  const children = nodes.filter((n) => n.parentId === id)
-  const onlineCount = children.filter((n) => n.data.status === 'online').length
-  const offlineCount = children.filter((n) => n.data.status === 'offline').length
-  const unknownCount = children.length - onlineCount - offlineCount
-
-  const handleRename = () => {
-    if (labelDraft.trim()) {
-      snapshotHistory()
-      updateNode(id, { label: labelDraft.trim() })
-    }
-    setEditing(false)
-  }
-
-  const borderColor = selected ? '#00d4ff' : '#30363d'
-  const borderStyle = selected ? 'solid' : 'dashed'
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-        position: 'relative',
-        borderRadius: 8,
-        border: isVisible ? `2px ${borderStyle} ${borderColor}` : '2px solid transparent',
-        background: 'transparent',
-        transition: 'border-color 0.15s, background 0.15s',
-        boxSizing: 'border-box',
-      }}
-    >
-      <NodeResizer
-        isVisible={selected}
-        minWidth={120}
-        minHeight={80}
-        lineStyle={{ stroke: '#00d4ff', strokeWidth: 1 }}
-        handleStyle={{ fill: '#00d4ff', stroke: '#0d1117', width: 8, height: 8, borderRadius: 2 }}
-      />
-
-      {/* Header */}
-      {isVisible && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            padding: '5px 10px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-            background: selected ? 'rgba(0,212,255,0.08)' : 'rgba(22,27,34,0.8)',
-            borderRadius: '6px 6px 0 0',
-            borderBottom: isVisible ? `1px solid ${borderColor}40` : 'none',
-            pointerEvents: 'auto',
-          }}
-          className="nodrag"
-        >
-          <Layers size={12} style={{ color: '#00d4ff', flexShrink: 0 }} />
-
-          {editing ? (
-            <input
-              autoFocus
-              value={labelDraft}
-              onChange={(e) => setLabelDraft(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleRename()
-                if (e.key === 'Escape') { setLabelDraft(data.label); setEditing(false) }
-              }}
-              style={{
-                flex: 1,
-                background: 'transparent',
-                border: 'none',
-                outline: 'none',
-                color: '#e6edf3',
-                fontSize: 11,
-                fontWeight: 600,
-              }}
-            />
-          ) : (
-            <span style={{ flex: 1, fontSize: 11, fontWeight: 600, color: '#e6edf3', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {data.label}
-            </span>
-          )}
-
-          {editing ? (
-            <>
-              <button onClick={handleRename} style={{ color: '#39d353', background: 'none', border: 'none', cursor: 'pointer', padding: 1 }}><Check size={11} /></button>
-              <button onClick={() => { setLabelDraft(data.label); setEditing(false) }} style={{ color: '#f85149', background: 'none', border: 'none', cursor: 'pointer', padding: 1 }}><X size={11} /></button>
-            </>
-          ) : (
-            <button
-              onClick={() => { setLabelDraft(data.label); setEditing(true) }}
-              style={{ color: '#8b949e', background: 'none', border: 'none', cursor: 'pointer', padding: 1, opacity: selected ? 1 : 0 }}
-              title="Rename group"
-            >
-              <Pencil size={10} />
-            </button>
-          )}
-
-          {/* Status summary */}
-          {children.length > 0 && (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, flexShrink: 0, marginLeft: 4 }}>
-              {onlineCount > 0 && <span style={{ color: STATUS_COLORS.online }}>● {onlineCount}</span>}
-              {offlineCount > 0 && <span style={{ color: STATUS_COLORS.offline }}>● {offlineCount}</span>}
-              {unknownCount > 0 && <span style={{ color: STATUS_COLORS.unknown }}>● {unknownCount}</span>}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -32,34 +32,12 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
   const rc = data.custom_colors ?? {}
   const borderColor = rc.border ?? '#00d4ff'
   const borderStyle = rc.border_style ?? 'solid'
-  const borderWidth = rc.border_width ?? 2
   const backgroundColor = rc.background ?? 'rgba(0,212,255,0.05)'
   const textColor = rc.text_color ?? '#e6edf3'
-  const textSize: number = rc.text_size ?? 12
-  const labelPosition: string = rc.label_position ?? 'inside'
   const fontFamily = FONT_FAMILIES[rc.font ?? 'inter'] ?? FONT_FAMILIES.inter
   const textPos = (rc.text_position ?? 'top-left') as TextPosition
   const posStyle = POSITION_STYLES[textPos]
 
-  const outsideJustify = textPos.includes('right') ? 'flex-end'
-    : (textPos.includes('center') || textPos === 'center') ? 'center'
-    : 'flex-start'
-
-  const isOutsideBottom = textPos.startsWith('bottom')
-  const outsideOffset = textSize + 16
-  const outsideVertical: React.CSSProperties = isOutsideBottom
-    ? { bottom: -outsideOffset }
-    : { top: -outsideOffset }
-
-  const sharedTextStyle: React.CSSProperties = {
-    color: textColor,
-    fontFamily,
-    fontSize: textSize,
-    fontWeight: 500,
-    userSelect: 'none',
-    whiteSpace: 'pre-wrap',
-  }
-
   return (
     <>
       <NodeResizer
@@ -73,12 +51,10 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
           background: '#00d4ff',
           border: '1px solid #0d1117',
         }}
-        lineStyle={{ borderColor: 'transparent' }}
+        lineStyle={{ borderColor: '#00d4ff55', borderWidth: 1 }}
       />
       <div
         style={{
-          position: 'relative',
-          overflow: 'visible',
           width: '100%',
           height: '100%',
           display: 'flex',
@@ -86,9 +62,12 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
           justifyContent: posStyle.justifyContent,
           padding: 12,
           background: backgroundColor,
-          border: `${borderWidth}px ${borderStyle} ${borderColor}`,
-          boxShadow: selected ? '0 0 0 1px #00d4ff, 0 0 8px #00d4ff44' : 'none',
+          border: `${selected ? 2 : 1}px ${selected ? 'solid' : borderStyle} ${selected ? '#00d4ff' : borderColor}`,
           borderRadius: 10,
+          fontFamily,
+          color: textColor,
+          fontSize: 12,
+          fontWeight: 500,
           boxSizing: 'border-box',
           cursor: 'default',
         }}
@@ -97,24 +76,8 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
           setEditingGroupRectId(id)
         }}
       >
-        {labelPosition === 'outside' && data.label && (
-          <span
-            style={{
-              position: 'absolute',
-              ...outsideVertical,
-              left: 0,
-              right: 0,
-              display: 'flex',
-              justifyContent: outsideJustify,
-              pointerEvents: 'none',
-              ...sharedTextStyle,
-            }}
-          >
-            {data.label}
-          </span>
-        )}
-        {labelPosition === 'inside' && data.label && (
-          <span style={{ textAlign: posStyle.textAlign, ...sharedTextStyle }}>
+        {data.label && (
+          <span style={{ textAlign: posStyle.textAlign, userSelect: 'none', whiteSpace: 'pre-wrap' }}>
             {data.label}
           </span>
         )}

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

@@ -23,5 +23,4 @@ export const PrinterNode  = (props: N) => <BaseNode {...props} icon={Printer} />
 export const ComputerNode = (props: N) => <BaseNode {...props} icon={Monitor} />
 export const CplNode      = (props: N) => <BaseNode {...props} icon={PlugZap} />
 export const DockerNode   = (props: N) => <BaseNode {...props} icon={Anchor} />
-export const DockerContainerNode = (props: N) => <BaseNode {...props} icon={Container} />
 export const GenericNode  = (props: N) => <BaseNode {...props} icon={Circle} />

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

@@ -1,7 +1,6 @@
-import { IspNode, RouterNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerNode, DockerContainerNode, GenericNode } from './index'
+import { IspNode, RouterNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerNode, GenericNode } from './index'
 import { ProxmoxGroupNode } from './ProxmoxGroupNode'
 import { GroupRectNode } from './GroupRectNode'
-import { GroupNode } from './GroupNode'
 
 export const nodeTypes = {
   isp: IspNode,
@@ -18,9 +17,7 @@ export const nodeTypes = {
   printer: PrinterNode,
   computer: ComputerNode,
   cpl: CplNode,
-  docker_container: DockerContainerNode,
-  docker_host: DockerNode,
+  docker: DockerNode,
   generic: GenericNode,
   groupRect: GroupRectNode,
-  group: GroupNode,
 }

frontend/src/components/modals/EdgeModal.tsx

@@ -10,32 +10,22 @@ import { EDGE_DEFAULT_COLORS } from '@/utils/edgeColors'
 
 const EDGE_TYPES = Object.entries(EDGE_TYPE_LABELS) as [EdgeType, string][]
 
-type AnimMode = 'none' | 'basic' | 'snake' | 'flow'
-
-function toAnimMode(v: EdgeData['animated']): AnimMode {
-  if (v === true || v === 'snake') return 'snake'
-  if (v === 'flow') return 'flow'
-  if (v === 'basic') return 'basic'
-  return 'none'
-}
-
 interface EdgeModalProps {
   open: boolean
   onClose: () => void
   onSubmit: (data: EdgeData) => void
   onDelete?: () => void
-  onClearWaypoints?: () => void
   initial?: Partial<EdgeData>
   title?: string
 }
 
-export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints, initial, title = 'Connect Nodes' }: EdgeModalProps) {
+export function EdgeModal({ open, onClose, onSubmit, onDelete, initial, title = 'Connect Nodes' }: EdgeModalProps) {
   const [type, setType] = useState<EdgeType>(initial?.type ?? 'ethernet')
   const [label, setLabel] = useState(initial?.label ?? '')
   const [vlanId, setVlanId] = useState(initial?.vlan_id?.toString() ?? '')
   const [customColor, setCustomColor] = useState<string | undefined>(initial?.custom_color)
   const [pathStyle, setPathStyle] = useState<EdgePathStyle>(initial?.path_style ?? 'bezier')
-  const [animation, setAnimation] = useState<AnimMode>(() => toAnimMode(initial?.animated))
+  const [animated, setAnimated] = useState(initial?.animated ?? false)
 
   const effectiveColor = customColor ?? EDGE_DEFAULT_COLORS[type]
 
@@ -47,7 +37,7 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
       vlan_id: type === 'vlan' && vlanId ? parseInt(vlanId) : undefined,
       custom_color: customColor,
       path_style: pathStyle,
-      animated: animation !== 'none' ? animation : undefined,
+      animated: animated || undefined,
     })
     onClose()
   }
@@ -125,25 +115,20 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
             </div>
           </div>
 
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-xs text-muted-foreground">Animation</Label>
-            <div className="flex rounded-md overflow-hidden border border-[#30363d]">
-              {(['none', 'basic', 'snake', 'flow'] as AnimMode[]).map((mode, i) => (
-                <button
-                  key={mode}
-                  type="button"
-                  onClick={() => setAnimation(mode)}
-                  className="flex-1 py-1 text-xs capitalize transition-colors"
-                  style={{
-                    background: animation === mode ? '#00d4ff22' : '#21262d',
-                    color: animation === mode ? '#00d4ff' : '#8b949e',
-                    borderRight: i < 3 ? '1px solid #30363d' : undefined,
-                  }}
-                >
-                  {mode === 'none' ? 'None' : mode === 'basic' ? 'Basic' : mode === 'snake' ? 'Snake' : 'Flow'}
-                </button>
-              ))}
-            </div>
+          <div className="flex items-center justify-between">
+            <Label className="text-xs text-muted-foreground">Flow Animation</Label>
+            <button
+              type="button"
+              onClick={() => setAnimated((a) => !a)}
+              className="relative w-9 h-5 rounded-full transition-colors focus:outline-none shrink-0"
+              style={{ background: animated ? '#00d4ff' : '#30363d' }}
+              aria-pressed={animated}
+            >
+              <span
+                className="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform"
+                style={{ transform: animated ? 'translateX(16px)' : 'translateX(0)' }}
+              />
+            </button>
           </div>
 
           <div className="flex flex-col gap-1.5">
@@ -177,16 +162,6 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
             </label>
           </div>
 
-          {onClearWaypoints && initial?.waypoints && initial.waypoints.length > 0 && (
-            <button
-              type="button"
-              onClick={() => { onClearWaypoints(); onClose() }}
-              className="text-[10px] text-muted-foreground hover:text-[#e3b341] transition-colors text-left"
-            >
-              Clear path ({initial.waypoints.length} point{initial.waypoints.length !== 1 ? 's' : ''})
-            </button>
-          )}
-
           <div className="flex justify-between gap-2 pt-1">
             {onDelete ? (
               <Button type="button" variant="ghost" size="sm" className="text-[#f85149] hover:text-[#f85149] hover:bg-[#f85149]/10" onClick={handleDelete}>

frontend/src/components/modals/GroupRectModal.tsx

@@ -8,18 +8,13 @@ import type { TextPosition } from '@/types'
 
 export type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
 
-export type LabelPosition = 'inside' | 'outside'
-
 export interface GroupRectFormData {
   label: string
   font: string
   text_color: string
   text_position: TextPosition
-  text_size: number
-  label_position: LabelPosition
   border_color: string
   border_style: BorderStyle
-  border_width: number
   background_color: string
   z_order: number
 }
@@ -32,38 +27,13 @@ const BORDER_STYLES: { value: BorderStyle; label: string; preview: string }[] =
   { value: 'none',   label: 'None',   preview: '   ' },
 ]
 
-const TEXT_SIZES: { value: number; label: string }[] = [
-  { value: 10, label: '10' },
-  { value: 12, label: '12' },
-  { value: 14, label: '14' },
-  { value: 16, label: '16' },
-  { value: 18, label: '18' },
-  { value: 20, label: '20' },
-]
-
-const LABEL_POSITIONS: { value: LabelPosition; label: string }[] = [
-  { value: 'inside',  label: 'Inside' },
-  { value: 'outside', label: 'Outside' },
-]
-
-const BORDER_WIDTHS: { value: number; label: string }[] = [
-  { value: 1, label: '1px' },
-  { value: 2, label: '2px' },
-  { value: 3, label: '3px' },
-  { value: 4, label: '4px' },
-  { value: 5, label: '5px' },
-]
-
 const DEFAULT_FORM: GroupRectFormData = {
   label: '',
   font: 'inter',
   text_color: '#e6edf3',
   text_position: 'top-left',
-  text_size: 12,
-  label_position: 'inside',
   border_color: '#00d4ff',
   border_style: 'solid',
-  border_width: 2,
   background_color: '#00d4ff0d',
   z_order: 1,
 }
@@ -95,7 +65,7 @@ interface GroupRectModalProps {
   title?: string
 }
 
-export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, title = 'Add Zone' }: GroupRectModalProps) {
+export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, title = 'Add Rectangle' }: GroupRectModalProps) {
   const [form, setForm] = useState<GroupRectFormData>({ ...DEFAULT_FORM, ...initial })
 
   const set = <K extends keyof GroupRectFormData>(key: K, value: GroupRectFormData[K]) =>
@@ -175,31 +145,6 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
             </div>
           </div>
 
-          {/* Label position */}
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-xs text-muted-foreground">Label Position</Label>
-            <div className="grid grid-cols-2 gap-1">
-              {LABEL_POSITIONS.map(({ value, label }) => {
-                const isSelected = form.label_position === value
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => set('label_position', value)}
-                    className="flex items-center justify-center h-8 rounded text-xs transition-colors"
-                    style={{
-                      background: isSelected ? '#00d4ff22' : '#21262d',
-                      border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
-                      color: isSelected ? '#00d4ff' : '#8b949e',
-                    }}
-                  >
-                    {label}
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-
           {/* Colors */}
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Colors</Label>
@@ -224,32 +169,6 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
             </div>
           </div>
 
-          {/* Text size */}
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-xs text-muted-foreground">Text Size</Label>
-            <div className="grid grid-cols-6 gap-1">
-              {TEXT_SIZES.map(({ value, label }) => {
-                const isSelected = form.text_size === value
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => set('text_size', value)}
-                    className="flex items-center justify-center h-8 rounded transition-colors"
-                    style={{
-                      background: isSelected ? '#00d4ff22' : '#21262d',
-                      border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
-                      color: isSelected ? '#00d4ff' : '#8b949e',
-                      fontSize: value,
-                    }}
-                  >
-                    {label}
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-
           {/* Border style */}
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Border Style</Label>
@@ -277,31 +196,6 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
             </div>
           </div>
 
-          {/* Border width */}
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-xs text-muted-foreground">Border Width</Label>
-            <div className="grid grid-cols-5 gap-1">
-              {BORDER_WIDTHS.map(({ value, label }) => {
-                const isSelected = form.border_width === value
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => set('border_width', value)}
-                    className="flex items-center justify-center h-8 rounded text-xs transition-colors"
-                    style={{
-                      background: isSelected ? '#00d4ff22' : '#21262d',
-                      border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
-                      color: isSelected ? '#00d4ff' : '#8b949e',
-                    }}
-                  >
-                    {label}
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-
           {/* Z-order */}
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Z-Order (1 = furthest back)</Label>
@@ -336,7 +230,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                 Cancel
               </Button>
               <Button type="submit" size="sm" className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90">
-                {title === 'Add Zone' ? 'Add' : 'Save'}
+                {title === 'Add Rectangle' ? 'Add' : 'Save'}
               </Button>
             </div>
           </div>

frontend/src/components/modals/NodeModal.tsx

@@ -1,4 +1,4 @@
-import { Fragment, createElement, useState } from 'react'
+import { createElement, useState } from 'react'
 import { RotateCcw, ChevronDown } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
@@ -7,17 +7,16 @@ import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { NODE_TYPE_LABELS, type NodeData, type NodeType, type CheckMethod } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
-import { ICON_REGISTRY, ICON_CATEGORIES, NODE_TYPE_DEFAULT_ICONS } from '@/utils/nodeIcons'
+import { ICON_REGISTRY, ICON_CATEGORIES } from '@/utils/nodeIcons'
 
 const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
   { label: 'Hardware',       types: ['isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer'] },
-  { label: 'Virtualization', types: ['proxmox', 'vm', 'lxc', 'docker_host', 'docker_container'] },
+  { label: 'Virtualization', types: ['proxmox', 'vm', 'lxc', 'docker'] },
   { label: 'IoT',            types: ['iot', 'camera', 'cpl'] },
   { label: 'Generic',        types: ['computer', 'generic', 'groupRect'] },
 ]
 
 const CHECK_METHODS: CheckMethod[] = ['none', 'ping', 'http', 'https', 'tcp', 'ssh', 'prometheus', 'health']
-const CONTAINER_MODE_TYPES: NodeType[] = ['proxmox', 'vm', 'lxc', 'docker_host']
 
 const DEFAULT_DATA: Partial<NodeData> = {
   type: 'server',
@@ -27,7 +26,7 @@ const DEFAULT_DATA: Partial<NodeData> = {
   status: 'unknown',
   check_method: 'ping',
   services: [],
-  container_mode: false,
+  container_mode: true,
   custom_colors: undefined,
   custom_icon: undefined,
 }
@@ -38,16 +37,20 @@ interface NodeModalProps {
   onSubmit: (data: Partial<NodeData>) => void
   initial?: Partial<NodeData>
   title?: string
-  parentContainerNodes?: { id: string; label: string }[]
+  proxmoxNodes?: { id: string; label: string }[]
 }
 
+const CHILD_TYPES: NodeType[] = ['vm', 'lxc']
+
 // NodeModal is always mounted with a key that changes on open/edit, so useState
-// initial value is enough - no need for a reset effect.
-export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', parentContainerNodes = [] }: NodeModalProps) {
+// initial value is enough — no need for a reset effect.
+export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', proxmoxNodes = [] }: NodeModalProps) {
   const [form, setForm] = useState<Partial<NodeData>>({ ...DEFAULT_DATA, ...initial })
   const [iconSearch, setIconSearch] = useState('')
   const [iconPickerOpen, setIconPickerOpen] = useState(false)
   const [labelError, setLabelError] = useState(false)
+  const hasHardwareData = !!(initial?.cpu_count || initial?.cpu_model || initial?.ram_gb || initial?.disk_gb)
+  const [hardwareOpen, setHardwareOpen] = useState(hasHardwareData)
 
   const set = (key: keyof NodeData, value: unknown) =>
     setForm((f) => ({ ...f, [key]: value }))
@@ -59,12 +62,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
       return
     }
     setLabelError(false)
-    const selectedType = (form.type ?? 'generic') as NodeType
-    const canUseContainerMode = CONTAINER_MODE_TYPES.includes(selectedType)
-    onSubmit({
-      ...form,
-      container_mode: canUseContainerMode ? !!form.container_mode : false,
-    })
+    onSubmit(form)
     onClose()
   }
 
@@ -77,18 +75,18 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
 
         <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-2">
           <div className="grid grid-cols-2 gap-3">
-            {/* Type + Icon on the same row */}
-            <div className="flex flex-col gap-1.5">
+            {/* Type */}
+            <div className="flex flex-col gap-1.5 col-span-2">
               <Label className="text-xs text-muted-foreground">Type</Label>
               <Select value={form.type} onValueChange={(v) => set('type', v as NodeType)}>
-                <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8 w-full">
-                  <SelectValue>{NODE_TYPE_LABELS[(form.type ?? 'server') as NodeType]}</SelectValue>
+                <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
+                  <SelectValue />
                 </SelectTrigger>
                 <SelectContent className="bg-[#21262d] border-[#30363d]">
                   {NODE_TYPE_GROUPS.map((group, i) => (
-                    <Fragment key={group.label}>
-                      {i > 0 && <SelectSeparator className="bg-[#30363d]" />}
-                      <SelectGroup>
+                    <>
+                      {i > 0 && <SelectSeparator key={`sep-${group.label}`} className="bg-[#30363d]" />}
+                      <SelectGroup key={group.label}>
                         <SelectLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50 px-2 py-1">
                           {group.label}
                         </SelectLabel>
@@ -98,14 +96,14 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                           </SelectItem>
                         ))}
                       </SelectGroup>
-                    </Fragment>
+                    </>
                   ))}
                 </SelectContent>
               </Select>
             </div>
 
             {/* Icon */}
-            <div className="flex flex-col gap-1.5">
+            <div className="flex flex-col gap-1.5 col-span-2">
               <div className="flex items-center justify-between">
                 <Label className="text-xs text-muted-foreground">Icon</Label>
                 {form.custom_icon && (
@@ -122,71 +120,69 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               <button
                 type="button"
                 onClick={() => setIconPickerOpen((o) => !o)}
-                className="flex items-center justify-between gap-2 h-8 px-3 rounded-md bg-[#21262d] border border-[#30363d] text-sm hover:border-[#8b949e] transition-colors w-full"
+                className="flex items-center justify-between gap-2 h-8 px-3 rounded-md bg-[#21262d] border border-[#30363d] text-sm hover:border-[#8b949e] transition-colors"
               >
-                <span className="flex items-center gap-2 min-w-0">
+                <span className="flex items-center gap-2">
                   {(() => {
                     const entry = ICON_REGISTRY.find((e) => e.key === form.custom_icon)
                     if (entry) {
-                      return <>{createElement(entry.icon, { size: 13, className: 'text-[#00d4ff] shrink-0' })}<span className="text-foreground truncate">{entry.label}</span></>
+                      return <>{createElement(entry.icon, { size: 13, className: 'text-[#00d4ff]' })}<span className="text-foreground">{entry.label}</span></>
                     }
-                    const defaultIcon = NODE_TYPE_DEFAULT_ICONS[form.type as NodeType] ?? NODE_TYPE_DEFAULT_ICONS.generic
-                    return <>{createElement(defaultIcon, { size: 13, className: 'text-muted-foreground shrink-0' })}<span className="text-muted-foreground truncate">Default</span></>
+                    return <span className="text-muted-foreground">Default (from type)</span>
                   })()}
                 </span>
                 <ChevronDown size={12} className="text-muted-foreground shrink-0" style={{ transform: iconPickerOpen ? 'rotate(180deg)' : undefined, transition: 'transform 0.15s' }} />
               </button>
-            </div>
-
-            {/* Inline icon picker - full width, shown below the type+icon row */}
-            {iconPickerOpen && (
-              <div className="flex flex-col gap-2 p-2.5 rounded-md bg-[#0d1117] border border-[#30363d] col-span-2">
-                <Input
-                  value={iconSearch}
-                  onChange={(e) => setIconSearch(e.target.value)}
-                  placeholder="Search icons…"
-                  className="bg-[#21262d] border-[#30363d] text-xs h-7"
-                  autoFocus
-                />
-                <div className="flex flex-col gap-2 max-h-52 overflow-y-auto">
-                  {ICON_CATEGORIES.map((cat) => {
-                    const entries = ICON_REGISTRY.filter(
-                      (e) => e.category === cat &&
-                        (iconSearch === '' || e.label.toLowerCase().includes(iconSearch.toLowerCase()) || e.key.includes(iconSearch.toLowerCase()))
-                    )
-                    if (entries.length === 0) return null
-                    return (
-                      <div key={cat}>
-                        <p className="text-[9px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1">{cat}</p>
-                        <div className="grid grid-cols-7 gap-1">
-                          {entries.map((entry) => {
-                            const isSelected = form.custom_icon === entry.key
-                            return (
-                              <button
-                                key={entry.key}
-                                type="button"
-                                title={entry.label}
-                                onClick={() => { set('custom_icon', isSelected ? undefined : entry.key); setIconPickerOpen(false) }}
-                                className="flex items-center justify-center w-7 h-7 rounded transition-colors"
-                                style={{
-                                  background: isSelected ? '#00d4ff22' : 'transparent',
-                                  border: isSelected ? '1px solid #00d4ff88' : '1px solid transparent',
-                                  color: isSelected ? '#00d4ff' : '#8b949e',
-                                }}
-                                onMouseEnter={(e) => { if (!isSelected) (e.currentTarget as HTMLButtonElement).style.background = '#21262d' }}
-                                onMouseLeave={(e) => { if (!isSelected) (e.currentTarget as HTMLButtonElement).style.background = 'transparent' }}
-                              >
-                                {createElement(entry.icon, { size: 13 })}
-                              </button>
-                            )
-                          })}
+              {/* Inline picker panel */}
+              {iconPickerOpen && (
+                <div className="flex flex-col gap-2 p-2.5 rounded-md bg-[#0d1117] border border-[#30363d]">
+                  <Input
+                    value={iconSearch}
+                    onChange={(e) => setIconSearch(e.target.value)}
+                    placeholder="Search icons…"
+                    className="bg-[#21262d] border-[#30363d] text-xs h-7"
+                    autoFocus
+                  />
+                  <div className="flex flex-col gap-2 max-h-52 overflow-y-auto">
+                    {ICON_CATEGORIES.map((cat) => {
+                      const entries = ICON_REGISTRY.filter(
+                        (e) => e.category === cat &&
+                          (iconSearch === '' || e.label.toLowerCase().includes(iconSearch.toLowerCase()) || e.key.includes(iconSearch.toLowerCase()))
+                      )
+                      if (entries.length === 0) return null
+                      return (
+                        <div key={cat}>
+                          <p className="text-[9px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1">{cat}</p>
+                          <div className="grid grid-cols-7 gap-1">
+                            {entries.map((entry) => {
+                              const isSelected = form.custom_icon === entry.key
+                              return (
+                                <button
+                                  key={entry.key}
+                                  type="button"
+                                  title={entry.label}
+                                  onClick={() => { set('custom_icon', isSelected ? undefined : entry.key); setIconPickerOpen(false) }}
+                                  className="flex items-center justify-center w-7 h-7 rounded transition-colors"
+                                  style={{
+                                    background: isSelected ? '#00d4ff22' : 'transparent',
+                                    border: isSelected ? '1px solid #00d4ff88' : '1px solid transparent',
+                                    color: isSelected ? '#00d4ff' : '#8b949e',
+                                  }}
+                                  onMouseEnter={(e) => { if (!isSelected) (e.currentTarget as HTMLButtonElement).style.background = '#21262d' }}
+                                  onMouseLeave={(e) => { if (!isSelected) (e.currentTarget as HTMLButtonElement).style.background = 'transparent' }}
+                                >
+                                  {createElement(entry.icon, { size: 13 })}
+                                </button>
+                              )
+                            })}
+                          </div>
                         </div>
-                      </div>
-                    )
-                  })}
+                      )
+                    })}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
 
             {/* Label */}
             <div className="flex flex-col gap-1.5 col-span-2">
@@ -248,10 +244,10 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               />
             </div>
 
-            {/* Parent container */}
-            {form.type !== 'groupRect' && form.type !== 'group' && parentContainerNodes.length > 0 && (
+            {/* Parent Proxmox (VM / LXC only) */}
+            {CHILD_TYPES.includes(form.type as NodeType) && proxmoxNodes.length > 0 && (
               <div className="flex flex-col gap-1.5 col-span-2">
-                <Label className="text-xs text-muted-foreground">Parent Container</Label>
+                <Label className="text-xs text-muted-foreground">Parent Proxmox</Label>
                 <Select
                   value={form.parent_id ?? 'none'}
                   onValueChange={(v) => set('parent_id', v === 'none' ? undefined : v)}
@@ -261,7 +257,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   </SelectTrigger>
                   <SelectContent className="bg-[#21262d] border-[#30363d]">
                     <SelectItem value="none" className="text-sm">None (standalone)</SelectItem>
-                    {parentContainerNodes.map((n) => (
+                    {proxmoxNodes.map((n) => (
                       <SelectItem key={n.id} value={n.id} className="text-sm">{n.label}</SelectItem>
                     ))}
                   </SelectContent>
@@ -269,12 +265,12 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               </div>
             )}
 
-            {/* Container mode */}
-            {CONTAINER_MODE_TYPES.includes((form.type ?? 'generic') as NodeType) && (
+            {/* Container mode (proxmox only) */}
+            {form.type === 'proxmox' && (
               <div className="flex items-center justify-between col-span-2 py-1">
                 <div className="flex flex-col gap-0.5">
                   <Label className="text-xs text-muted-foreground">Container Mode</Label>
-                  <span className="text-[10px] text-muted-foreground/60">Allow other nodes to nest inside this node</span>
+                  <span className="text-[10px] text-muted-foreground/60">Show VM/LXC nodes nested inside</span>
                 </div>
                 <button
                   type="button"
@@ -336,24 +332,85 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               )}
             </div>
 
-            {/* Bottom connection points (not for group containers) */}
-            {form.type !== 'groupRect' && form.type !== 'group' && (
-              <div className="flex flex-col gap-1.5 col-span-2">
-                <Label className="text-xs text-muted-foreground">Bottom Connection Points</Label>
-                <Select
-                  value={String(form.bottom_handles ?? 1)}
-                  onValueChange={(v) => set('bottom_handles', parseInt(v ?? '1', 10))}
-                >
-                  <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="bg-[#21262d] border-[#30363d]">
-                    <SelectItem value="1" className="text-sm">1 - center</SelectItem>
-                    <SelectItem value="2" className="text-sm">2 - left / right</SelectItem>
-                    <SelectItem value="3" className="text-sm">3 - left / center / right</SelectItem>
-                    <SelectItem value="4" className="text-sm">4 - evenly spaced</SelectItem>
-                  </SelectContent>
-                </Select>
+            {/* Hardware specs (hidden for groupRect) */}
+            {form.type !== 'groupRect' && (
+              <div className="flex flex-col gap-2 col-span-2">
+                <div className="flex items-center justify-between w-full">
+                  <button
+                    type="button"
+                    onClick={() => setHardwareOpen((o) => !o)}
+                    className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <span className="font-medium">Hardware</span>
+                    <ChevronDown size={12} style={{ transform: hardwareOpen ? 'rotate(180deg)' : undefined, transition: 'transform 0.15s' }} />
+                  </button>
+                  {hardwareOpen && (
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[10px] text-muted-foreground/60">Show on node</span>
+                      <button
+                        type="button"
+                        role="switch"
+                        aria-checked={!!form.show_hardware}
+                        onClick={() => set('show_hardware', !form.show_hardware)}
+                        className="relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none"
+                        style={{ background: form.show_hardware ? '#00d4ff' : '#30363d' }}
+                      >
+                        <span
+                          className="pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-sm transition-transform"
+                          style={{ transform: form.show_hardware ? 'translateX(12px)' : 'translateX(0)' }}
+                        />
+                      </button>
+                    </div>
+                  )}
+                </div>
+                {hardwareOpen && (
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="flex flex-col gap-1.5 col-span-2">
+                      <Label className="text-xs text-muted-foreground">CPU Model</Label>
+                      <Input
+                        value={form.cpu_model ?? ''}
+                        onChange={(e) => set('cpu_model', e.target.value || undefined)}
+                        placeholder="e.g. Intel Xeon E5-2680"
+                        className="bg-[#21262d] border-[#30363d] text-sm h-8"
+                      />
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                      <Label className="text-xs text-muted-foreground">CPU Cores</Label>
+                      <Input
+                        type="number"
+                        min={1}
+                        value={form.cpu_count ?? ''}
+                        onChange={(e) => set('cpu_count', e.target.value ? parseInt(e.target.value, 10) : undefined)}
+                        placeholder="e.g. 8"
+                        className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
+                      />
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                      <Label className="text-xs text-muted-foreground">RAM (GB)</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        step={0.5}
+                        value={form.ram_gb ?? ''}
+                        onChange={(e) => set('ram_gb', e.target.value ? parseFloat(e.target.value) : undefined)}
+                        placeholder="e.g. 32"
+                        className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
+                      />
+                    </div>
+                    <div className="flex flex-col gap-1.5 col-span-2">
+                      <Label className="text-xs text-muted-foreground">Disk (GB)</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        step={1}
+                        value={form.disk_gb ?? ''}
+                        onChange={(e) => set('disk_gb', e.target.value ? parseFloat(e.target.value) : undefined)}
+                        placeholder="e.g. 500"
+                        className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
             )}
 

frontend/src/components/modals/PendingDeviceModal.tsx

@@ -19,7 +19,6 @@ export interface PendingDevice {
   services: Service[]
   suggested_type: string | null
   status: string
-  discovery_source: string | null
   discovered_at: string
 }
 
@@ -78,7 +77,7 @@ export function PendingDeviceModal({ device, onClose, onApprove, onHide, onIgnor
 
   const TypeIcon = TYPE_ICONS[device.suggested_type ?? 'generic'] ?? Circle
 
-  const handleApprove = () => { onApprove(device) }
+  const handleApprove = () => { onApprove(device); onClose() }
   const handleHide = () => { onHide(device); onClose() }
   const handleIgnore = () => { onIgnore(device); onClose() }
 
@@ -102,10 +101,7 @@ export function PendingDeviceModal({ device, onClose, onApprove, onHide, onIgnor
             {device.suggested_type && (
               <InfoRow label="Type" value={device.suggested_type} />
             )}
-            {device.discovery_source && (
-              <InfoRow label="Source" value={device.discovery_source.toUpperCase()} />
-            )}
-            <InfoRow label="Discovered" value={new Date(device.discovered_at.endsWith('Z') ? device.discovered_at : device.discovered_at + 'Z').toLocaleString()} />
+            <InfoRow label="Discovered" value={new Date(device.discovered_at).toLocaleString()} />
           </div>
 
           {/* Services */}

frontend/src/components/modals/ScanConfigModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Plus, Trash2, Settings } from 'lucide-react'
+import { Plus, Trash2 } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -15,31 +15,42 @@ interface ScanConfigModalProps {
 
 export function ScanConfigModal({ open, onClose, onScanNow }: ScanConfigModalProps) {
   const [ranges, setRanges] = useState<string[]>([''])
+  const [interval, setInterval] = useState(60)
   const [saving, setSaving] = useState(false)
 
   useEffect(() => {
     if (!open) return
     scanApi.getConfig()
-      .then((res) => setRanges(res.data.ranges.length > 0 ? res.data.ranges : ['']))
+      .then((res) => {
+        setRanges(res.data.ranges.length > 0 ? res.data.ranges : [''])
+        setInterval(res.data.interval_seconds)
+      })
       .catch(() => {/* use defaults */})
   }, [open])
 
-  const handleScanNow = async () => {
+  const handleSave = async () => {
     const cleaned = ranges.map((r) => r.trim()).filter(Boolean)
     if (cleaned.length === 0) { toast.error('Add at least one IP range'); return }
     setSaving(true)
     try {
-      await scanApi.saveConfig({ ranges: cleaned })
-      await scanApi.trigger()
-      onScanNow()
+      await scanApi.saveConfig({ ranges: cleaned, interval_seconds: interval })
+      toast.success('Scan config saved')
       onClose()
     } catch {
-      toast.error('Failed to start scan')
+      toast.error('Failed to save config')
     } finally {
       setSaving(false)
     }
   }
 
+  const handleScanNow = async () => {
+    const cleaned = ranges.map((r) => r.trim()).filter(Boolean)
+    if (cleaned.length === 0) { toast.error('Add at least one IP range'); return }
+    await handleSave()
+    onScanNow()
+    onClose()
+  }
+
   return (
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
       <DialogContent className="bg-[#161b22] border-border max-w-md">
@@ -84,14 +95,23 @@ export function ScanConfigModal({ open, onClose, onScanNow }: ScanConfigModalPro
             </Button>
           </div>
 
-          <p className="text-xs text-muted-foreground flex items-center gap-1.5">
-            <Settings size={11} />
-            Status check interval can be configured in the sidebar Settings.
-          </p>
+          {/* Status check interval */}
+          <div className="space-y-1.5">
+            <Label className="text-sm text-muted-foreground">Status check interval (seconds)</Label>
+            <Input
+              type="number"
+              min={10}
+              max={3600}
+              value={interval}
+              onChange={(e) => setInterval(Number(e.target.value))}
+              className="font-mono text-sm bg-[#0d1117] border-border w-32"
+            />
+          </div>
         </div>
 
         <DialogFooter className="gap-2">
           <Button variant="ghost" onClick={onClose}>Cancel</Button>
+          <Button variant="outline" onClick={handleSave} disabled={saving}>Save</Button>
           <Button
             onClick={handleScanNow}
             disabled={saving}

frontend/src/components/modals/SearchModal.tsx

@@ -1,62 +1,34 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback } from 'react'
 import { useReactFlow } from '@xyflow/react'
 import { Search } from 'lucide-react'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { scanApi } from '@/api/client'
-import type { PendingDevice } from '@/components/modals/PendingDeviceModal'
-import { NODE_TYPE_LABELS } from '@/types'
 
 interface SearchModalProps {
   open: boolean
   onClose: () => void
-  onOpenPending: (deviceId: string) => void
 }
 
-export function SearchModal({ open, onClose, onOpenPending }: SearchModalProps) {
+export function SearchModal({ open, onClose }: SearchModalProps) {
   const [query, setQuery] = useState('')
-  const [pendingDevices, setPendingDevices] = useState<PendingDevice[]>([])
   const nodes = useCanvasStore((s) => s.nodes)
   const setSelectedNode = useCanvasStore((s) => s.setSelectedNode)
   const { fitView } = useReactFlow()
 
-  useEffect(() => {
-    if (!open) return
-    scanApi.pending().then((res) => setPendingDevices(res.data)).catch(() => {})
-  }, [open])
-
   const searchable = nodes.filter((n) => n.data.type !== 'groupRect')
   const q = query.toLowerCase()
-
-  const nodeResults = q.length === 0 ? [] : searchable.filter((n) =>
+  const results = q.length === 0 ? [] : searchable.filter((n) =>
     n.data.label?.toLowerCase().includes(q) ||
     n.data.ip?.toLowerCase().includes(q) ||
     n.data.hostname?.toLowerCase().includes(q)
-  ).slice(0, 6)
+  ).slice(0, 8)
 
-  const pendingResults = q.length === 0 ? [] : pendingDevices.filter((d) =>
-    d.ip.toLowerCase().includes(q) ||
-    d.hostname?.toLowerCase().includes(q) ||
-    d.services.some((s) =>
-      s.service_name?.toLowerCase().includes(q) ||
-      s.category?.toLowerCase().includes(q)
-    )
-  ).slice(0, 4)
-
-  const totalResults = nodeResults.length + pendingResults.length
-
-  const handleSelectNode = useCallback((nodeId: string) => {
+  const handleSelect = useCallback((nodeId: string) => {
     setSelectedNode(nodeId)
     fitView({ nodes: [{ id: nodeId }], duration: 600, padding: 0.4, maxZoom: 1.5 })
     onClose()
     setQuery('')
   }, [fitView, setSelectedNode, onClose])
 
-  const handleSelectPending = useCallback((deviceId: string) => {
-    onOpenPending(deviceId)
-    onClose()
-    setQuery('')
-  }, [onOpenPending, onClose])
-
   if (!open) return null
 
   return (
@@ -71,60 +43,40 @@ export function SearchModal({ open, onClose, onOpenPending }: SearchModalProps)
             autoFocus
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search nodes, pending devices by IP or service…"
+            placeholder="Search nodes by label, IP, hostname…"
             className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
             onKeyDown={(e) => {
               if (e.key === 'Escape') { onClose(); setQuery('') }
-              if (e.key === 'Enter' && nodeResults.length > 0) handleSelectNode(nodeResults[0].id)
-              if (e.key === 'Enter' && nodeResults.length === 0 && pendingResults.length > 0) handleSelectPending(pendingResults[0].id)
+              if (e.key === 'Enter' && results.length > 0) handleSelect(results[0].id)
             }}
           />
           <kbd className="text-[10px] text-muted-foreground border border-border rounded px-1">ESC</kbd>
         </div>
 
-        {totalResults > 0 && (
-          <ul className="py-1 max-h-72 overflow-y-auto">
-            {nodeResults.map((node) => (
+        {results.length > 0 && (
+          <ul className="py-1 max-h-64 overflow-y-auto">
+            {results.map((node) => (
               <li
                 key={node.id}
                 className="flex items-center gap-3 px-4 py-2 hover:bg-[#21262d] cursor-pointer"
-                onClick={() => handleSelectNode(node.id)}
+                onClick={() => handleSelect(node.id)}
               >
-                <span className="text-xs font-mono text-[#00d4ff] w-16 shrink-0">{NODE_TYPE_LABELS[node.data.type] ?? node.data.type}</span>
+                <span className="text-xs font-mono text-[#00d4ff] w-16 shrink-0">{node.data.type}</span>
                 <span className="text-sm text-foreground font-medium flex-1 truncate">{node.data.label}</span>
                 {node.data.ip && (
                   <span className="text-xs font-mono text-muted-foreground shrink-0">{node.data.ip}</span>
                 )}
               </li>
             ))}
-            {pendingResults.length > 0 && nodeResults.length > 0 && (
-              <li className="px-4 py-1">
-                <div className="h-px bg-border" />
-              </li>
-            )}
-            {pendingResults.map((device) => {
-              const serviceName = device.services.find((s) => s.service_name)?.service_name
-              return (
-                <li
-                  key={device.id}
-                  className="flex items-center gap-3 px-4 py-2 hover:bg-[#21262d] cursor-pointer"
-                  onClick={() => handleSelectPending(device.id)}
-                >
-                  <span className="text-xs font-mono text-[#e3b341] w-16 shrink-0">pending</span>
-                  <span className="text-sm text-foreground font-medium flex-1 truncate font-mono">{device.hostname ?? device.ip}</span>
-                  <span className="text-xs font-mono text-muted-foreground shrink-0">{serviceName ?? device.ip}</span>
-                </li>
-              )
-            })}
           </ul>
         )}
 
-        {q.length > 0 && totalResults === 0 && (
-          <p className="px-4 py-3 text-sm text-muted-foreground">No results match "{query}"</p>
+        {q.length > 0 && results.length === 0 && (
+          <p className="px-4 py-3 text-sm text-muted-foreground">No nodes match "{query}"</p>
         )}
 
         {q.length === 0 && (
-          <p className="px-4 py-3 text-xs text-muted-foreground">Type to search nodes and pending devices…</p>
+          <p className="px-4 py-3 text-xs text-muted-foreground">Type to search nodes…</p>
         )}
       </div>
     </div>

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

@@ -97,67 +97,26 @@ describe('EdgeModal', () => {
     expect(onSubmit.mock.calls[0][0].path_style).toBe('smooth')
   })
 
-  // ── Animation select ──────────────────────────────────────────────────────
+  // ── Animated toggle ───────────────────────────────────────────────────────
 
-  it('animation defaults to None — animated omitted from payload', () => {
+  it('flow animation defaults to off', () => {
     const onSubmit = vi.fn()
     render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
     fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBeUndefined()
+    // animated: false → omitted (falsy || undefined)
+    expect(onSubmit.mock.calls[0][0].animated).toBeFalsy()
   })
 
-  it('selecting Snake sends animated: "snake"', () => {
+  it('toggling animation sends animated: true', () => {
     const onSubmit = vi.fn()
     render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Snake'))
+    // Find the toggle: it's the only button with aria-pressed attribute
+    const allButtons = screen.getAllByRole('button')
+    const toggle = allButtons.find((b) => b.hasAttribute('aria-pressed'))!
+    expect(toggle).toBeDefined()
+    fireEvent.click(toggle)
     fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBe('snake')
-  })
-
-  it('selecting Flow sends animated: "flow"', () => {
-    const onSubmit = vi.fn()
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Flow'))
-    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBe('flow')
-  })
-
-  it('selecting Basic sends animated: "basic"', () => {
-    const onSubmit = vi.fn()
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Basic'))
-    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBe('basic')
-  })
-
-  it('pre-fills animation from initial "basic" string', () => {
-    const onSubmit = vi.fn()
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ animated: 'basic' }} />)
-    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBe('basic')
-  })
-
-  it('selecting None after Snake omits animated from payload', () => {
-    const onSubmit = vi.fn()
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Snake'))
-    fireEvent.click(screen.getByText('None'))
-    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBeUndefined()
-  })
-
-  it('pre-fills animation from initial "snake" string', () => {
-    const onSubmit = vi.fn()
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ animated: 'snake' }} />)
-    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBe('snake')
-  })
-
-  it('pre-fills animation from legacy initial true (backward compat)', () => {
-    const onSubmit = vi.fn()
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ animated: true }} />)
-    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
-    expect(onSubmit.mock.calls[0][0].animated).toBe('snake')
+    expect(onSubmit.mock.calls[0][0].animated).toBe(true)
   })
 
   // ── Pre-fill ──────────────────────────────────────────────────────────────
@@ -202,55 +161,4 @@ describe('EdgeModal', () => {
     expect(onDelete).toHaveBeenCalledOnce()
     expect(onClose).toHaveBeenCalledOnce()
   })
-
-  // ── Waypoints / Clear path ────────────────────────────────────────────────
-
-  it('does not show Clear path button when onClearWaypoints is not provided', () => {
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={vi.fn()} initial={{ type: 'ethernet', waypoints: [{ x: 1, y: 2 }] }} />)
-    expect(screen.queryByText(/Clear path/)).toBeNull()
-  })
-
-  it('does not show Clear path button when waypoints are empty', () => {
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={vi.fn()} onClearWaypoints={vi.fn()} initial={{ type: 'ethernet', waypoints: [] }} />)
-    expect(screen.queryByText(/Clear path/)).toBeNull()
-  })
-
-  it('does not show Clear path button when no initial waypoints', () => {
-    render(<EdgeModal open onClose={vi.fn()} onSubmit={vi.fn()} onClearWaypoints={vi.fn()} />)
-    expect(screen.queryByText(/Clear path/)).toBeNull()
-  })
-
-  it('shows Clear path button with count when waypoints exist', () => {
-    render(
-      <EdgeModal
-        open onClose={vi.fn()} onSubmit={vi.fn()} onClearWaypoints={vi.fn()}
-        initial={{ type: 'ethernet', waypoints: [{ x: 1, y: 2 }, { x: 3, y: 4 }] }}
-      />,
-    )
-    expect(screen.getByText('Clear path (2 points)')).toBeDefined()
-  })
-
-  it('shows singular "point" when only one waypoint', () => {
-    render(
-      <EdgeModal
-        open onClose={vi.fn()} onSubmit={vi.fn()} onClearWaypoints={vi.fn()}
-        initial={{ type: 'ethernet', waypoints: [{ x: 1, y: 2 }] }}
-      />,
-    )
-    expect(screen.getByText('Clear path (1 point)')).toBeDefined()
-  })
-
-  it('calls onClearWaypoints and onClose when Clear path is clicked', () => {
-    const onClearWaypoints = vi.fn()
-    const onClose = vi.fn()
-    render(
-      <EdgeModal
-        open onClose={onClose} onSubmit={vi.fn()} onClearWaypoints={onClearWaypoints}
-        initial={{ type: 'ethernet', waypoints: [{ x: 1, y: 2 }] }}
-      />,
-    )
-    fireEvent.click(screen.getByText('Clear path (1 point)'))
-    expect(onClearWaypoints).toHaveBeenCalledOnce()
-    expect(onClose).toHaveBeenCalledOnce()
-  })
 })

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

@@ -13,15 +13,14 @@ describe('GroupRectModal', () => {
   it('renders form fields when open', () => {
     render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
     expect(screen.getByPlaceholderText('Zone name…')).toBeDefined()
-    expect(screen.getByText('Add Zone')).toBeDefined()
+    expect(screen.getByText('Add Rectangle')).toBeDefined()
     expect(screen.getByText('Text Position')).toBeDefined()
-    expect(screen.getByText('Border Width')).toBeDefined()
     expect(screen.getByText('Z-Order (1 = furthest back)')).toBeDefined()
   })
 
-  it('renders Edit Zone title when provided', () => {
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} title="Edit Zone" />)
-    expect(screen.getByText('Edit Zone')).toBeDefined()
+  it('renders Edit Rectangle title when provided', () => {
+    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} title="Edit Rectangle" />)
+    expect(screen.getByText('Edit Rectangle')).toBeDefined()
   })
 
   it('calls onSubmit with form data on submit', () => {
@@ -124,124 +123,6 @@ describe('GroupRectModal', () => {
     expect(submitted.border_style).toBe('dotted')
   })
 
-  it('renders Label Position section with inside/outside options', () => {
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
-    expect(screen.getByText('Label Position')).toBeDefined()
-    expect(screen.getByText('Inside')).toBeDefined()
-    expect(screen.getByText('Outside')).toBeDefined()
-  })
-
-  it('defaults label_position to inside', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.label_position).toBe('inside')
-  })
-
-  it('selects outside label position on click', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Outside'))
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.label_position).toBe('outside')
-  })
-
-  it('pre-fills label_position from initial prop', () => {
-    const onSubmit = vi.fn()
-    render(
-      <GroupRectModal
-        open
-        onClose={vi.fn()}
-        onSubmit={onSubmit}
-        initial={{ label_position: 'outside' }}
-      />
-    )
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.label_position).toBe('outside')
-  })
-
-  it('renders Text Size section with 6 options', () => {
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
-    expect(screen.getByText('Text Size')).toBeDefined()
-    expect(screen.getByText('10')).toBeDefined()
-    expect(screen.getByText('20')).toBeDefined()
-  })
-
-  it('defaults text_size to 12', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.text_size).toBe(12)
-  })
-
-  it('selects text size on click', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('18'))
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.text_size).toBe(18)
-  })
-
-  it('pre-fills text_size from initial prop', () => {
-    const onSubmit = vi.fn()
-    render(
-      <GroupRectModal
-        open
-        onClose={vi.fn()}
-        onSubmit={onSubmit}
-        initial={{ text_size: 16 }}
-      />
-    )
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.text_size).toBe(16)
-  })
-
-  it('renders Border Width section with 5 options', () => {
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
-    expect(screen.getByText('Border Width')).toBeDefined()
-    expect(screen.getByText('1px')).toBeDefined()
-    expect(screen.getByText('3px')).toBeDefined()
-    expect(screen.getByText('5px')).toBeDefined()
-  })
-
-  it('defaults border_width to 2', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.border_width).toBe(2)
-  })
-
-  it('selects border width on click', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    fireEvent.click(screen.getByText('4px'))
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.border_width).toBe(4)
-  })
-
-  it('pre-fills border_width from initial prop', () => {
-    const onSubmit = vi.fn()
-    render(
-      <GroupRectModal
-        open
-        onClose={vi.fn()}
-        onSubmit={onSubmit}
-        initial={{ border_width: 5 }}
-      />
-    )
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.border_width).toBe(5)
-  })
-
   it('toggles border style — clicking selected style deselects back to solid', () => {
     const onSubmit = vi.fn()
     render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)

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

@@ -1,326 +1,170 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { NodeModal } from '../NodeModal'
-import type { NodeData } from '@/types'
-
-// ── Mock Shadcn Select with native <select> for testability ───────────────
-
-vi.mock('@/components/ui/select', () => ({
-  Select: ({ value, onValueChange, children }: {
-    value?: string; onValueChange?: (v: string) => void; children: React.ReactNode
-  }) => (
-    <select value={value} onChange={(e) => onValueChange?.(e.target.value)}>
-      {children}
-    </select>
-  ),
-  SelectTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  SelectValue: () => null,
-  SelectContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  SelectGroup: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  SelectLabel: () => null,
-  SelectItem: ({ value, children }: { value: string; children: React.ReactNode }) => (
-    <option value={value}>{children}</option>
-  ),
-  SelectSeparator: () => null,
-}))
-
-// ── Helpers ───────────────────────────────────────────────────────────────
-
-function renderModal(props: Partial<Parameters<typeof NodeModal>[0]> = {}) {
-  const onClose = vi.fn()
-  const onSubmit = vi.fn()
-  render(<NodeModal open onClose={onClose} onSubmit={onSubmit} {...props} />)
-  return { onClose, onSubmit }
-}
-
-/** Get <select> elements in document order: [0]=Type, [1]=CheckMethod, [2]=BottomHandles */
-function selects() { return screen.getAllByRole('combobox') as HTMLSelectElement[] }
-
-const BASE: Partial<NodeData> = {
-  type: 'server', label: 'My Server', hostname: 'server.lan',
-  ip: '192.168.1.10', check_method: 'ping', services: [],
-}
-
-// ── Tests ─────────────────────────────────────────────────────────────────
 
 describe('NodeModal', () => {
-
-  // ── Visibility ────────────────────────────────────────────────────────
-
   it('renders nothing when closed', () => {
-    const { container } = render(<NodeModal open={false} onClose={vi.fn()} onSubmit={vi.fn()} />)
+    const { container } = render(
+      <NodeModal open={false} onClose={vi.fn()} onSubmit={vi.fn()} />
+    )
     expect(container.querySelector('[role="dialog"]')).toBeNull()
   })
 
   it('renders form fields when open', () => {
-    renderModal()
+    render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
     expect(screen.getByPlaceholderText('My Server')).toBeDefined()
     expect(screen.getByText('Add Node')).toBeDefined()
   })
 
-  it('shows "Add" button for default title', () => {
-    renderModal()
-    expect(screen.getByRole('button', { name: 'Add' })).toBeDefined()
-  })
-
-  it('shows "Save" button when title is Edit Node', () => {
-    renderModal({ title: 'Edit Node' })
-    expect(screen.getByRole('button', { name: 'Save' })).toBeDefined()
-  })
-
-  it('pre-fills form from initial prop', () => {
-    renderModal({ initial: BASE })
-    expect((screen.getByPlaceholderText('My Server') as HTMLInputElement).value).toBe('My Server')
-    expect((screen.getByPlaceholderText('server.lan') as HTMLInputElement).value).toBe('server.lan')
-    expect((screen.getByPlaceholderText('192.168.1.x') as HTMLInputElement).value).toBe('192.168.1.10')
-  })
-
-  // ── Cancel ────────────────────────────────────────────────────────────
-
-  it('calls onClose when Cancel is clicked', () => {
-    const { onClose } = renderModal()
-    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
-    expect(onClose).toHaveBeenCalledOnce()
-  })
-
-  // ── Label validation ──────────────────────────────────────────────────
-
-  it('blocks submit and shows error when label is empty', () => {
-    const { onSubmit } = renderModal()
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
+  it('does not call onSubmit when label is empty and shows error', () => {
+    const onSubmit = vi.fn()
+    render(<NodeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+    fireEvent.click(screen.getByText('Add'))
     expect(onSubmit).not.toHaveBeenCalled()
     expect(screen.getByText('Label is required')).toBeDefined()
   })
 
-  it('blocks submit when label is whitespace only', () => {
-    const { onSubmit } = renderModal()
-    fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: '   ' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect(onSubmit).not.toHaveBeenCalled()
+  it('calls onSubmit with form data when label is filled', () => {
+    const onSubmit = vi.fn()
+    const onClose = vi.fn()
+    render(<NodeModal open onClose={onClose} onSubmit={onSubmit} />)
+    fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'My NAS' } })
+    fireEvent.click(screen.getByText('Add'))
+    expect(onSubmit).toHaveBeenCalledOnce()
+    expect(onSubmit.mock.calls[0][0].label).toBe('My NAS')
+    expect(onClose).toHaveBeenCalledOnce()
   })
 
   it('clears label error when user starts typing', () => {
-    renderModal()
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
+    render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+    fireEvent.click(screen.getByText('Add'))
+    expect(screen.getByText('Label is required')).toBeDefined()
     fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'x' } })
     expect(screen.queryByText('Label is required')).toBeNull()
   })
 
-  // ── Form submission ───────────────────────────────────────────────────
+  it('pre-fills form from initial prop', () => {
+    render(
+      <NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} initial={{ label: 'Pre-filled', ip: '10.0.0.1' }} />
+    )
+    const input = screen.getByPlaceholderText('My Server') as HTMLInputElement
+    expect(input.value).toBe('Pre-filled')
+  })
 
-  it('calls onSubmit and onClose with form data on valid submit', () => {
-    const { onSubmit, onClose } = renderModal({ initial: BASE })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect(onSubmit).toHaveBeenCalledOnce()
+  it('shows Save button text when title is Edit Node', () => {
+    render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} title="Edit Node" />)
+    expect(screen.getByText('Save')).toBeDefined()
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    const onClose = vi.fn()
+    render(<NodeModal open onClose={onClose} onSubmit={vi.fn()} />)
+    fireEvent.click(screen.getByText('Cancel'))
     expect(onClose).toHaveBeenCalledOnce()
-    const data = onSubmit.mock.calls[0][0] as Partial<NodeData>
-    expect(data.label).toBe('My Server')
-    expect(data.type).toBe('server')
   })
 
-  it('submits updated hostname, IP and notes', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    fireEvent.change(screen.getByPlaceholderText('server.lan'), { target: { value: 'nas.local' } })
-    fireEvent.change(screen.getByPlaceholderText('192.168.1.x'), { target: { value: '10.0.0.1' } })
-    fireEvent.change(screen.getByPlaceholderText('Optional notes'), { target: { value: 'rack A' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    const data = onSubmit.mock.calls[0][0] as Partial<NodeData>
-    expect(data.hostname).toBe('nas.local')
-    expect(data.ip).toBe('10.0.0.1')
-    expect(data.notes).toBe('rack A')
-  })
-
-  it('submits check_target', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    fireEvent.change(screen.getByPlaceholderText('http://...'), { target: { value: 'http://192.168.1.10:8080' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).check_target).toBe('http://192.168.1.10:8080')
-  })
-
-  // ── Type selector ─────────────────────────────────────────────────────
-
-  it('pre-fills type from initial', () => {
-    renderModal({ initial: { ...BASE, type: 'router' } })
-    expect(selects()[0].value).toBe('router')
-  })
-
-  it('changes type and submits it', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    fireEvent.change(selects()[0], { target: { value: 'nas' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).type).toBe('nas')
-  })
-
-  // ── Check method ──────────────────────────────────────────────────────
-
-  it('pre-fills check_method from initial', () => {
-    renderModal({ initial: { ...BASE, check_method: 'http' } })
-    expect(selects()[1].value).toBe('http')
-  })
-
-  it('changes check_method and submits it', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    fireEvent.change(selects()[1], { target: { value: 'ssh' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).check_method).toBe('ssh')
-  })
-
-  // ── Icon picker ───────────────────────────────────────────────────────
-
-  it('shows "Default" label when no custom icon', () => {
-    renderModal({ initial: BASE })
-    expect(screen.getByText('Default')).toBeDefined()
-  })
-
-  it('opens icon picker on trigger button click', () => {
-    renderModal({ initial: BASE })
-    expect(screen.queryByPlaceholderText('Search icons…')).toBeNull()
-    fireEvent.click(screen.getByText('Default'))
-    expect(screen.getByPlaceholderText('Search icons…')).toBeDefined()
-  })
-
-  it('closes picker and shows icon label after selecting an icon', () => {
-    renderModal({ initial: BASE })
-    fireEvent.click(screen.getByText('Default'))
-    fireEvent.click(screen.getByTitle('Database (SQL/NoSQL)'))
-    expect(screen.queryByPlaceholderText('Search icons…')).toBeNull()
-    expect(screen.getByText('Database (SQL/NoSQL)')).toBeDefined()
-  })
-
-  it('submits custom_icon key after picking', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    fireEvent.click(screen.getByText('Default'))
-    fireEvent.click(screen.getByTitle('Database (SQL/NoSQL)'))
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).custom_icon).toBe('database')
-  })
-
-  it('shows Reset button when custom_icon is set', () => {
-    renderModal({ initial: { ...BASE, custom_icon: 'database' } })
-    expect(screen.getByRole('button', { name: /Reset/i })).toBeDefined()
-  })
-
-  it('hides Reset button when no custom_icon', () => {
-    renderModal({ initial: BASE })
-    expect(screen.queryByRole('button', { name: /Reset/i })).toBeNull()
-  })
-
-  it('resets custom_icon and shows Default on Reset click', () => {
-    renderModal({ initial: { ...BASE, custom_icon: 'database' } })
-    fireEvent.click(screen.getByRole('button', { name: /Reset/i }))
-    expect(screen.getByText('Default')).toBeDefined()
-  })
-
-  it('filters icons by search query', () => {
-    renderModal({ initial: BASE })
-    fireEvent.click(screen.getByText('Default'))
-    fireEvent.change(screen.getByPlaceholderText('Search icons…'), { target: { value: 'grafana' } })
-    expect(screen.getByTitle('Grafana / Kibana')).toBeDefined()
-    expect(screen.queryByTitle('Router')).toBeNull()
-  })
-
-  // ── Container mode ─────────────────────────────────────────────────────
-
-  it('shows Container Mode toggle for proxmox type', () => {
-    renderModal({ initial: { ...BASE, type: 'proxmox' } })
-    expect(screen.getByText('Container Mode')).toBeDefined()
-  })
-
-  it('hides Container Mode for server type', () => {
-    renderModal({ initial: { ...BASE, type: 'server' } })
-    expect(screen.queryByText('Container Mode')).toBeNull()
-  })
-
-  it('hides Container Mode for groupRect type', () => {
-    renderModal({ initial: { ...BASE, type: 'groupRect' } })
-    expect(screen.queryByText('Container Mode')).toBeNull()
-  })
-
-  it('toggles container_mode on click', () => {
-    const { onSubmit } = renderModal({ initial: { ...BASE, type: 'proxmox', container_mode: true } })
-    fireEvent.click(screen.getByRole('switch'))
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).container_mode).toBe(false)
-  })
-
-  // ── Parent container ──────────────────────────────────────────────────
-
-  it('shows Parent Container when options are provided', () => {
-    renderModal({
-      initial: { ...BASE, type: 'server' },
-      parentContainerNodes: [{ id: 'c1', label: 'Container 01' }],
+  describe('Hardware section', () => {
+    it('renders Hardware toggle button', () => {
+      render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+      expect(screen.getByText('Hardware')).toBeDefined()
     })
-    expect(screen.getByText('Parent Container')).toBeDefined()
-    expect(screen.getByText('Container 01')).toBeDefined()
-  })
 
-  it('hides Parent Container for groupRect type', () => {
-    renderModal({ initial: { ...BASE, type: 'groupRect' }, parentContainerNodes: [{ id: 'c1', label: 'Container 01' }] })
-    expect(screen.queryByText('Parent Container')).toBeNull()
-  })
+    it('hardware fields are hidden by default', () => {
+      render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+      expect(screen.queryByPlaceholderText('e.g. Intel Xeon E5-2680')).toBeNull()
+    })
 
-  it('hides Parent Container when no container options are available', () => {
-    renderModal({ initial: { ...BASE, type: 'server' } })
-    expect(screen.queryByText('Parent Container')).toBeNull()
-  })
+    it('expands hardware fields on toggle click', () => {
+      render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+      fireEvent.click(screen.getByText('Hardware'))
+      expect(screen.getByPlaceholderText('e.g. Intel Xeon E5-2680')).toBeDefined()
+      expect(screen.getByPlaceholderText('e.g. 8')).toBeDefined()
+      expect(screen.getByPlaceholderText('e.g. 32')).toBeDefined()
+      expect(screen.getByPlaceholderText('e.g. 500')).toBeDefined()
+    })
 
-  // ── Appearance ────────────────────────────────────────────────────────
+    it('submits hardware fields when filled', () => {
+      const onSubmit = vi.fn()
+      render(<NodeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+      fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'Homelab' } })
+      fireEvent.click(screen.getByText('Hardware'))
+      fireEvent.change(screen.getByPlaceholderText('e.g. Intel Xeon E5-2680'), { target: { value: 'Intel i7-12700K' } })
+      fireEvent.change(screen.getByPlaceholderText('e.g. 8'), { target: { value: '12' } })
+      fireEvent.change(screen.getByPlaceholderText('e.g. 32'), { target: { value: '64' } })
+      fireEvent.change(screen.getByPlaceholderText('e.g. 500'), { target: { value: '2000' } })
+      fireEvent.click(screen.getByText('Add'))
+      const submitted = onSubmit.mock.calls[0][0]
+      expect(submitted.cpu_model).toBe('Intel i7-12700K')
+      expect(submitted.cpu_count).toBe(12)
+      expect(submitted.ram_gb).toBe(64)
+      expect(submitted.disk_gb).toBe(2000)
+    })
 
-  it('renders 3 color swatch labels (border, background, icon)', () => {
-    renderModal({ initial: BASE })
-    expect(screen.getByText('border')).toBeDefined()
-    expect(screen.getByText('background')).toBeDefined()
-    expect(screen.getByText('icon')).toBeDefined()
-  })
+    it('auto-expands when initial has hardware data', () => {
+      render(
+        <NodeModal
+          open
+          onClose={vi.fn()}
+          onSubmit={vi.fn()}
+          initial={{ label: 'Server', cpu_count: 8, ram_gb: 32 }}
+        />
+      )
+      expect(screen.getByPlaceholderText('e.g. Intel Xeon E5-2680')).toBeDefined()
+    })
 
-  it('shows default colors hint when no custom_colors', () => {
-    renderModal({ initial: BASE })
-    expect(screen.getByText(/Using default colors for/)).toBeDefined()
-  })
+    it('hides hardware section for groupRect type', () => {
+      render(
+        <NodeModal
+          open
+          onClose={vi.fn()}
+          onSubmit={vi.fn()}
+          initial={{ type: 'groupRect' }}
+        />
+      )
+      expect(screen.queryByText('Hardware')).toBeNull()
+    })
 
-  it('shows Reset to defaults when custom_colors are set', () => {
-    renderModal({ initial: { ...BASE, custom_colors: { border: '#ff0000' } } })
-    expect(screen.getByText('Reset to defaults')).toBeDefined()
-  })
+    it('show on node toggle is hidden when section is collapsed', () => {
+      render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+      expect(screen.queryByText('Show on node')).toBeNull()
+    })
 
-  it('resets custom_colors on Reset to defaults click', () => {
-    renderModal({ initial: { ...BASE, custom_colors: { border: '#ff0000' } } })
-    fireEvent.click(screen.getByText('Reset to defaults'))
-    expect(screen.queryByText('Reset to defaults')).toBeNull()
-    expect(screen.getByText(/Using default colors for/)).toBeDefined()
-  })
+    it('show on node toggle appears when section is expanded', () => {
+      render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+      fireEvent.click(screen.getByText('Hardware'))
+      expect(screen.getByText('Show on node')).toBeDefined()
+    })
 
-  // ── Bottom connection points ───────────────────────────────────────────
+    it('show_hardware defaults to false', () => {
+      const onSubmit = vi.fn()
+      render(<NodeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+      fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'Node' } })
+      fireEvent.click(screen.getByText('Add'))
+      expect(onSubmit.mock.calls[0][0].show_hardware).toBeFalsy()
+    })
 
-  it('shows Bottom Connection Points for server type', () => {
-    renderModal({ initial: BASE })
-    expect(screen.getByText('Bottom Connection Points')).toBeDefined()
-  })
+    it('toggling show on node sets show_hardware to true', () => {
+      const onSubmit = vi.fn()
+      render(<NodeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+      fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'Node' } })
+      fireEvent.click(screen.getByText('Hardware'))
+      fireEvent.click(screen.getByRole('switch'))
+      fireEvent.click(screen.getByText('Add'))
+      expect(onSubmit.mock.calls[0][0].show_hardware).toBe(true)
+    })
 
-  it('hides Bottom Connection Points for groupRect', () => {
-    renderModal({ initial: { ...BASE, type: 'groupRect' } })
-    expect(screen.queryByText('Bottom Connection Points')).toBeNull()
-  })
-
-  it('hides Bottom Connection Points for group', () => {
-    renderModal({ initial: { ...BASE, type: 'group' } })
-    expect(screen.queryByText('Bottom Connection Points')).toBeNull()
-  })
-
-  it('defaults bottom_handles to 1', () => {
-    renderModal({ initial: BASE })
-    expect(selects()[2].value).toBe('1')
-  })
-
-  it('pre-fills bottom_handles from initial', () => {
-    renderModal({ initial: { ...BASE, bottom_handles: 3 } })
-    expect(selects()[2].value).toBe('3')
-  })
-
-  it('submits updated bottom_handles', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    fireEvent.change(selects()[2], { target: { value: '4' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).bottom_handles).toBe(4)
+    it('pre-fills show_hardware from initial prop', () => {
+      const onSubmit = vi.fn()
+      render(
+        <NodeModal
+          open
+          onClose={vi.fn()}
+          onSubmit={onSubmit}
+          initial={{ label: 'Node', show_hardware: true, cpu_count: 8 }}
+        />
+      )
+      fireEvent.click(screen.getByText('Add'))
+      expect(onSubmit.mock.calls[0][0].show_hardware).toBe(true)
+    })
   })
 })

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

@@ -126,7 +126,7 @@ describe('PendingDeviceModal', () => {
 
   // ── Actions ───────────────────────────────────────────────────────────────
 
-  it('calls onApprove with the device when Approve is clicked (parent controls close on success)', () => {
+  it('calls onApprove with the device and onClose when Approve is clicked', () => {
     const device = makeDevice()
     const onApprove = vi.fn()
     const onClose = vi.fn()
@@ -135,7 +135,7 @@ describe('PendingDeviceModal', () => {
     )
     fireEvent.click(screen.getByRole('button', { name: 'Approve' }))
     expect(onApprove).toHaveBeenCalledWith(device)
-    expect(onClose).not.toHaveBeenCalled()
+    expect(onClose).toHaveBeenCalledOnce()
   })
 
   it('calls onHide with the device and onClose when Hide is clicked', () => {

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

@@ -6,7 +6,6 @@ vi.mock('@/api/client', () => ({
   scanApi: {
     getConfig: vi.fn(),
     saveConfig: vi.fn(),
-    trigger: vi.fn(),
   },
 }))
 vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() } }))
@@ -14,15 +13,12 @@ vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), info: vi.f
 import { scanApi } from '@/api/client'
 import { toast } from 'sonner'
 
-const defaultConfig = { data: { ranges: ['192.168.1.0/24'] } }
+const defaultConfig = { data: { ranges: ['192.168.1.0/24'], interval_seconds: 60 } }
 
 describe('ScanConfigModal', () => {
   beforeEach(() => {
     vi.mocked(scanApi.getConfig).mockResolvedValue(defaultConfig as never)
-    vi.mocked(scanApi.saveConfig).mockReset()
     vi.mocked(scanApi.saveConfig).mockResolvedValue({} as never)
-    vi.mocked(scanApi.trigger).mockReset()
-    vi.mocked(scanApi.trigger).mockResolvedValue({} as never)
     vi.mocked(toast.success).mockReset()
     vi.mocked(toast.error).mockReset()
   })
@@ -41,6 +37,13 @@ describe('ScanConfigModal', () => {
     expect(input).toBeDefined()
   })
 
+  it('loads interval from API on open', async () => {
+    vi.mocked(scanApi.getConfig).mockResolvedValue({ data: { ranges: ['10.0.0.0/8'], interval_seconds: 120 } } as never)
+    render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
+    const input = await screen.findByDisplayValue('120')
+    expect(input).toBeDefined()
+  })
+
   it('adds a new empty range on "Add range" click', async () => {
     render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
     await screen.findByDisplayValue('192.168.1.0/24')
@@ -52,40 +55,62 @@ describe('ScanConfigModal', () => {
   it('delete button disabled when only one range', async () => {
     render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
     await screen.findByDisplayValue('192.168.1.0/24')
+    // Only 1 range → delete button disabled
     const trashButtons = document.querySelectorAll('button[disabled]')
     expect(trashButtons.length).toBeGreaterThan(0)
   })
 
   it('can remove a range when more than one exist', async () => {
-    vi.mocked(scanApi.getConfig).mockResolvedValue({ data: { ranges: ['192.168.1.0/24', '10.0.0.0/8'] } } as never)
+    vi.mocked(scanApi.getConfig).mockResolvedValue({ data: { ranges: ['192.168.1.0/24', '10.0.0.0/8'], interval_seconds: 60 } } as never)
     render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
     await screen.findByDisplayValue('192.168.1.0/24')
+    // Both trash buttons should be enabled
     const trashButtons = screen.getAllByRole('button').filter((b) => !b.hasAttribute('disabled') && b.querySelector('svg'))
     expect(trashButtons.length).toBeGreaterThanOrEqual(2)
   })
 
   it('shows error toast and does not save when all ranges are empty', async () => {
-    vi.mocked(scanApi.getConfig).mockResolvedValue({ data: { ranges: [''] } } as never)
+    vi.mocked(scanApi.getConfig).mockResolvedValue({ data: { ranges: [''], interval_seconds: 60 } } as never)
     render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
     await waitFor(() => expect(scanApi.getConfig).toHaveBeenCalled())
-    fireEvent.click(screen.getByRole('button', { name: 'Scan Now' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => {
       expect(toast.error).toHaveBeenCalledWith('Add at least one IP range')
     })
     expect(scanApi.saveConfig).not.toHaveBeenCalled()
   })
 
-  it('saves config, triggers scan, calls onScanNow and closes on "Scan Now" click', async () => {
+  it('saves config and closes on Save click', async () => {
+    const onClose = vi.fn()
+    render(<ScanConfigModal open onClose={onClose} onScanNow={vi.fn()} />)
+    await screen.findByDisplayValue('192.168.1.0/24')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => {
+      expect(scanApi.saveConfig).toHaveBeenCalledWith({ ranges: ['192.168.1.0/24'], interval_seconds: 60 })
+      expect(toast.success).toHaveBeenCalledWith('Scan config saved')
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+  })
+
+  it('shows error toast when save fails', async () => {
+    vi.mocked(scanApi.saveConfig).mockRejectedValue(new Error('network'))
+    render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
+    await screen.findByDisplayValue('192.168.1.0/24')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Failed to save config')
+    })
+  })
+
+  it('calls onScanNow after saving on "Scan Now" click', async () => {
     const onScanNow = vi.fn()
     const onClose = vi.fn()
     render(<ScanConfigModal open onClose={onClose} onScanNow={onScanNow} />)
     await screen.findByDisplayValue('192.168.1.0/24')
     fireEvent.click(screen.getByRole('button', { name: 'Scan Now' }))
     await waitFor(() => {
-      expect(scanApi.saveConfig).toHaveBeenCalledWith({ ranges: ['192.168.1.0/24'] })
-      expect(scanApi.trigger).toHaveBeenCalledOnce()
+      expect(scanApi.saveConfig).toHaveBeenCalled()
       expect(onScanNow).toHaveBeenCalledOnce()
-      expect(onClose).toHaveBeenCalledOnce()
     })
   })
 
@@ -97,11 +122,12 @@ describe('ScanConfigModal', () => {
     expect(onClose).toHaveBeenCalledOnce()
   })
 
-  it('strips whitespace from ranges before scanning', async () => {
+  it('strips whitespace from ranges before saving', async () => {
     render(<ScanConfigModal open onClose={vi.fn()} onScanNow={vi.fn()} />)
     const input = await screen.findByDisplayValue('192.168.1.0/24')
+    // Type a range with surrounding whitespace
     fireEvent.change(input, { target: { value: '  10.0.0.0/8  ' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Scan Now' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => {
       expect(scanApi.saveConfig).toHaveBeenCalledWith(
         expect.objectContaining({ ranges: ['10.0.0.0/8'] })

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

@@ -10,12 +10,6 @@ vi.mock('@xyflow/react', () => ({
   useReactFlow: () => ({ fitView: mockFitView }),
 }))
 
-vi.mock('@/api/client', () => ({
-  scanApi: { pending: vi.fn().mockResolvedValue({ data: [] }) },
-}))
-
-const mockOnOpenPending = vi.fn()
-
 function makeNode(id: string, overrides: Partial<NodeData> = {}): Node<NodeData> {
   return {
     id,
@@ -38,32 +32,32 @@ describe('SearchModal', () => {
   })
 
   it('renders nothing when closed', () => {
-    render(<SearchModal open={false} onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open={false} onClose={vi.fn()} />)
     expect(screen.queryByPlaceholderText(/search nodes/i)).toBeNull()
   })
 
   it('renders search input when open', () => {
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     expect(screen.getByPlaceholderText(/search nodes/i)).toBeDefined()
   })
 
   it('shows "Type to search" hint when query is empty', () => {
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     expect(screen.getByText(/type to search/i)).toBeDefined()
   })
 
   it('shows no results message when query has no matches', () => {
     useCanvasStore.setState({ nodes: [makeNode('router', { label: 'Router' })] })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'zzz' } })
-    expect(screen.getByText(/no results match/i)).toBeDefined()
+    expect(screen.getByText(/no nodes match/i)).toBeDefined()
   })
 
   it('filters nodes by label', () => {
     useCanvasStore.setState({
       nodes: [makeNode('n1', { label: 'My Router' }), makeNode('n2', { label: 'NAS Server' })],
     })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'router' } })
     expect(screen.getByText('My Router')).toBeDefined()
     expect(screen.queryByText('NAS Server')).toBeNull()
@@ -76,7 +70,7 @@ describe('SearchModal', () => {
         makeNode('n2', { label: 'Box B', ip: '10.0.0.1' }),
       ],
     })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: '192.168' } })
     expect(screen.getByText('Box A')).toBeDefined()
     expect(screen.queryByText('Box B')).toBeNull()
@@ -89,7 +83,7 @@ describe('SearchModal', () => {
         makeNode('n2', { label: 'B', hostname: 'nas.local' }),
       ],
     })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'pve' } })
     expect(screen.getByText('A')).toBeDefined()
     expect(screen.queryByText('B')).toBeNull()
@@ -102,25 +96,25 @@ describe('SearchModal', () => {
         makeNode('g1', { label: 'Zone A', type: 'groupRect' }),
       ],
     })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'zone' } })
-    expect(screen.getByText(/no results match/i)).toBeDefined()
+    expect(screen.getByText(/no nodes match/i)).toBeDefined()
   })
 
-  it('limits node results to 6', () => {
+  it('limits results to 8 nodes', () => {
     useCanvasStore.setState({
       nodes: Array.from({ length: 12 }, (_, i) => makeNode(`n${i}`, { label: `Server ${i}` })),
     })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'server' } })
     const items = screen.getAllByText(/Server \d/)
-    expect(items).toHaveLength(6)
+    expect(items).toHaveLength(8)
   })
 
   it('selects node and closes on result click', () => {
     const onClose = vi.fn()
     useCanvasStore.setState({ nodes: [makeNode('n1', { label: 'Proxmox' })] })
-    render(<SearchModal open onClose={onClose} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={onClose} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'prox' } })
     fireEvent.click(screen.getByText('Proxmox'))
     expect(useCanvasStore.getState().selectedNodeId).toBe('n1')
@@ -131,7 +125,7 @@ describe('SearchModal', () => {
   it('selects first result and closes on Enter key', () => {
     const onClose = vi.fn()
     useCanvasStore.setState({ nodes: [makeNode('n1', { label: 'Switch' })] })
-    render(<SearchModal open onClose={onClose} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={onClose} />)
     const input = screen.getByPlaceholderText(/search nodes/i)
     fireEvent.change(input, { target: { value: 'switch' } })
     fireEvent.keyDown(input, { key: 'Enter' })
@@ -141,14 +135,14 @@ describe('SearchModal', () => {
 
   it('closes on Escape key', () => {
     const onClose = vi.fn()
-    render(<SearchModal open onClose={onClose} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={onClose} />)
     fireEvent.keyDown(screen.getByPlaceholderText(/search nodes/i), { key: 'Escape' })
     expect(onClose).toHaveBeenCalledOnce()
   })
 
   it('closes when clicking backdrop', () => {
     const onClose = vi.fn()
-    render(<SearchModal open onClose={onClose} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={onClose} />)
     // The backdrop is the fixed inset div — clicking it fires onClose
     const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement
     fireEvent.click(backdrop)
@@ -157,14 +151,14 @@ describe('SearchModal', () => {
 
   it('does not close when clicking inside the search box', () => {
     const onClose = vi.fn()
-    render(<SearchModal open onClose={onClose} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={onClose} />)
     fireEvent.click(screen.getByPlaceholderText(/search nodes/i))
     expect(onClose).not.toHaveBeenCalled()
   })
 
   it('search is case-insensitive', () => {
     useCanvasStore.setState({ nodes: [makeNode('n1', { label: 'My NAS' })] })
-    render(<SearchModal open onClose={vi.fn()} onOpenPending={mockOnOpenPending} />)
+    render(<SearchModal open onClose={vi.fn()} />)
     fireEvent.change(screen.getByPlaceholderText(/search nodes/i), { target: { value: 'MY NAS' } })
     expect(screen.getByText('My NAS')).toBeDefined()
   })

frontend/src/components/panels/DetailPanel.tsx

@@ -1,93 +1,34 @@
-import { createElement, useState } from 'react'
-import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
+import { useState } from 'react'
+import { X, Edit, Trash2, ExternalLink, Plus } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
+import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo } from '@/types'
 import { getServiceUrl } from '@/utils/serviceUrl'
-import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '@/utils/propertyIcons'
-import type { Node } from '@xyflow/react'
 
 interface DetailPanelProps {
   onEdit: (id: string) => void
 }
 
-type SvcForm = { port: string; protocol: 'tcp' | 'udp'; service_name: string }
-const EMPTY_FORM: SvcForm = { port: '', protocol: 'tcp', service_name: '' }
-
-type PropForm = { key: string; value: string; icon: string | null; visible: boolean }
-const EMPTY_PROP: PropForm = { key: '', value: '', icon: null, visible: true }
-
 export function DetailPanel({ onEdit }: DetailPanelProps) {
-  const { nodes, selectedNodeId, selectedNodeIds, setSelectedNode, deleteNode, updateNode, snapshotHistory, createGroup, ungroup } = useCanvasStore()
-
-  const [addingForNode, setAddingForNode] = useState<string | null>(null)
-  const [newSvc, setNewSvc] = useState<SvcForm>(EMPTY_FORM)
-  const [editingFor, setEditingFor] = useState<{ nodeId: string; index: number } | null>(null)
-  const [editSvc, setEditSvc] = useState<SvcForm>(EMPTY_FORM)
-  const [groupName, setGroupName] = useState('')
-  const [creatingGroup, setCreatingGroup] = useState(false)
-
-  // Properties state
-  const [addingProp, setAddingProp] = useState(false)
-  const [newProp, setNewProp] = useState<PropForm>(EMPTY_PROP)
-  const [editingPropIndex, setEditingPropIndex] = useState<number | null>(null)
-  const [editProp, setEditProp] = useState<PropForm>(EMPTY_PROP)
-
-  // Multi-select panel
-  const multiSelected = (selectedNodeIds ?? []).filter((id) => nodes.some((n) => n.id === id))
-
-  if (multiSelected.length > 1) {
-    return (
-      <MultiSelectPanel
-        nodeIds={multiSelected}
-        nodes={nodes}
-        groupName={groupName}
-        setGroupName={setGroupName}
-        creatingGroup={creatingGroup}
-        setCreatingGroup={setCreatingGroup}
-        onCreateGroup={(name) => { createGroup(multiSelected, name); setGroupName(''); setCreatingGroup(false) }}
-        onClose={() => setSelectedNode(null)}
-      />
-    )
-  }
-
+  const { nodes, selectedNodeId, setSelectedNode, deleteNode, updateNode } = useCanvasStore()
   const node = nodes.find((n) => n.id === selectedNodeId)
+
+  const [addingService, setAddingService] = useState(false)
+  const [newSvc, setNewSvc] = useState<{ port: string; protocol: 'tcp' | 'udp'; service_name: string }>({
+    port: '',
+    protocol: 'tcp',
+    service_name: '',
+  })
+
   if (!node || node.data.type === 'groupRect') return null
 
-  // Group detail panel
-  if (node.data.type === 'group') {
-    return (
-      <GroupDetailPanel
-        node={node}
-        nodes={nodes}
-        onUngroup={() => { ungroup(node.id) }}
-        onToggleBorder={() => {
-          snapshotHistory()
-          updateNode(node.id, {
-            custom_colors: {
-              ...node.data.custom_colors,
-              show_border: !(node.data.custom_colors?.show_border !== false),
-            },
-          })
-        }}
-        onClose={() => setSelectedNode(null)}
-        onSelectChild={(id) => setSelectedNode(id)}
-      />
-    )
-  }
-
-  // Normal single-node panel
-  const addingService = addingForNode === node.id
-  const editingIndex = editingFor?.nodeId === node.id ? editingFor.index : null
   const { data } = node
-  const services = data.services ?? []
   const statusColor = STATUS_COLORS[data.status]
   const host = data.ip ?? data.hostname
 
   const handleDelete = () => {
     if (confirm(`Delete "${data.label}"?`)) {
-      snapshotHistory()
       deleteNode(node.id)
     }
   }
@@ -95,95 +36,35 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
   const handleAddService = () => {
     const port = parseInt(newSvc.port, 10)
     if (!newSvc.service_name.trim() || isNaN(port) || port < 1 || port > 65535) return
-    snapshotHistory()
-    const svc: ServiceInfo = { port, protocol: newSvc.protocol, service_name: newSvc.service_name.trim() }
-    updateNode(node.id, { services: [...services, svc] })
-    setNewSvc(EMPTY_FORM)
-    setAddingForNode(null)
+    const svc: ServiceInfo = {
+      port,
+      protocol: newSvc.protocol,
+      service_name: newSvc.service_name.trim(),
+    }
+    updateNode(node.id, { services: [...(data.services ?? []), svc] })
+    setNewSvc({ port: '', protocol: 'tcp', service_name: '' })
+    setAddingService(false)
   }
 
   const handleRemoveService = (index: number) => {
-    snapshotHistory()
-    const updated = services.filter((_, i) => i !== index)
+    const updated = data.services.filter((_, i) => i !== index)
     updateNode(node.id, { services: updated })
-    if (editingIndex === index) setEditingFor(null)
-  }
-
-  const handleStartEdit = (index: number) => {
-    const svc = services[index]
-    if (!svc) return
-    setEditSvc({ port: String(svc.port), protocol: svc.protocol, service_name: svc.service_name })
-    setEditingFor({ nodeId: node.id, index })
-    setAddingForNode(null)
-  }
-
-  const handleSaveEdit = () => {
-    if (editingIndex === null) return
-    const port = parseInt(editSvc.port, 10)
-    if (!editSvc.service_name.trim() || isNaN(port) || port < 1 || port > 65535) return
-    snapshotHistory()
-    const updated = services.map((svc, i) =>
-      i === editingIndex ? { ...svc, port, protocol: editSvc.protocol, service_name: editSvc.service_name.trim() } : svc
-    )
-    updateNode(node.id, { services: updated })
-    setEditingFor(null)
-  }
-
-  // --- Property handlers ---
-  const properties: NodeProperty[] = data.properties ?? []
-
-  const handleAddProp = () => {
-    if (!newProp.key.trim() || !newProp.value.trim()) return
-    snapshotHistory()
-    const prop: NodeProperty = { key: newProp.key.trim(), value: newProp.value.trim(), icon: newProp.icon, visible: newProp.visible }
-    updateNode(node.id, { properties: [...properties, prop] })
-    setNewProp(EMPTY_PROP)
-    setAddingProp(false)
-  }
-
-  const handleRemoveProp = (index: number) => {
-    snapshotHistory()
-    updateNode(node.id, { properties: properties.filter((_, i) => i !== index) })
-    if (editingPropIndex === index) setEditingPropIndex(null)
-  }
-
-  const handleTogglePropVisible = (index: number) => {
-    snapshotHistory()
-    updateNode(node.id, {
-      properties: properties.map((p, i) => i === index ? { ...p, visible: !p.visible } : p),
-    })
-  }
-
-  const handleStartEditProp = (index: number) => {
-    const p = properties[index]
-    if (!p) return
-    setEditProp({ key: p.key, value: p.value, icon: p.icon, visible: p.visible })
-    setEditingPropIndex(index)
-    setAddingProp(false)
-  }
-
-  const handleSaveEditProp = () => {
-    if (editingPropIndex === null || !editProp.key.trim() || !editProp.value.trim()) return
-    snapshotHistory()
-    updateNode(node.id, {
-      properties: properties.map((p, i) =>
-        i === editingPropIndex
-          ? { key: editProp.key.trim(), value: editProp.value.trim(), icon: editProp.icon, visible: editProp.visible }
-          : p
-      ),
-    })
-    setEditingPropIndex(null)
   }
 
   return (
     <aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
+      {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-border">
         <span className="font-semibold text-sm text-foreground truncate">{data.label}</span>
-        <button aria-label="Close panel" onClick={() => setSelectedNode(null)} className="text-muted-foreground hover:text-foreground transition-colors">
+        <button
+          onClick={() => setSelectedNode(null)}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+        >
           <X size={16} />
         </button>
       </div>
 
+      {/* Status */}
       <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
         <div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: statusColor }} />
         <span className="text-sm capitalize" style={{ color: statusColor }}>{data.status}</span>
@@ -192,13 +73,21 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
         )}
       </div>
 
+      {/* Details */}
       <div className="flex flex-col gap-3 px-4 py-3 text-sm">
         <DetailRow label="Type" value={NODE_TYPE_LABELS[data.type]} />
         {data.hostname && (
           <div className="flex justify-between gap-2 items-baseline">
             <span className="text-muted-foreground text-xs shrink-0">Hostname</span>
-            <a href={`http://${data.hostname}`} target="_blank" rel="noopener noreferrer" className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1" title={data.hostname}>
-              {data.hostname}<ExternalLink size={10} className="shrink-0" />
+            <a
+              href={`http://${data.hostname}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1"
+              title={data.hostname}
+            >
+              {data.hostname}
+              <ExternalLink size={10} className="shrink-0" />
             </a>
           </div>
         )}
@@ -206,80 +95,104 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
         {data.mac && <DetailRow label="MAC" value={data.mac} mono />}
         {data.os && <DetailRow label="OS" value={data.os} />}
         {data.check_method && <DetailRow label="Check" value={data.check_method} mono />}
-        {data.last_seen && <DetailRow label="Last Seen" value={new Date(data.last_seen.endsWith('Z') ? data.last_seen : data.last_seen + 'Z').toLocaleString()} />}
+        {data.last_seen && (
+          <DetailRow label="Last Seen" value={new Date(data.last_seen).toLocaleString()} />
+        )}
       </div>
 
-      {/* Properties section */}
+      {/* Hardware */}
+      {(data.cpu_count != null || data.cpu_model || data.ram_gb != null || data.disk_gb != null) && (
+        <div className="flex flex-col gap-3 px-4 py-3 text-sm border-t border-border">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50">Hardware</span>
+          {data.cpu_model && <DetailRow label="CPU" value={data.cpu_model} />}
+          {data.cpu_count != null && <DetailRow label="Cores" value={String(data.cpu_count)} mono />}
+          {data.ram_gb != null && <DetailRow label="RAM" value={formatStorage(data.ram_gb)} mono />}
+          {data.disk_gb != null && <DetailRow label="Disk" value={formatStorage(data.disk_gb)} mono />}
+        </div>
+      )}
+
+      {/* Services */}
       <div className="px-4 py-3 border-t border-border">
         <div className="flex items-center justify-between mb-2">
-          <span className="text-xs text-muted-foreground">Properties{properties.length > 0 ? ` (${properties.length})` : ''}</span>
+          <span className="text-xs text-muted-foreground">
+            Services{data.services.length > 0 ? ` (${data.services.length})` : ''}
+          </span>
           <button
-            onClick={() => { setAddingProp((v) => !v); setEditingPropIndex(null) }}
+            onClick={() => setAddingService((v) => !v)}
             className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors"
           >
             <Plus size={10} /> Add
           </button>
         </div>
-        {addingProp && (
-          <PropertyForm
-            form={newProp}
-            onChange={setNewProp}
-            onConfirm={handleAddProp}
-            onCancel={() => { setAddingProp(false); setNewProp(EMPTY_PROP) }}
-            confirmLabel="Add"
-          />
-        )}
-        {properties.length > 0 && (
-          <div className="flex flex-col gap-1.5">
-            {properties.map((prop, i) =>
-              editingPropIndex === i ? (
-                <PropertyForm
-                  key={`edit-${i}`}
-                  form={editProp}
-                  onChange={setEditProp}
-                  onConfirm={handleSaveEditProp}
-                  onCancel={() => setEditingPropIndex(null)}
-                  confirmLabel="Save"
-                />
-              ) : (
-                <PropertyBadge
-                  key={`${prop.key}-${i}`}
-                  prop={prop}
-                  onToggleVisible={() => handleTogglePropVisible(i)}
-                  onEdit={() => handleStartEditProp(i)}
-                  onRemove={() => handleRemoveProp(i)}
-                />
-              )
-            )}
+
+        {/* Add service form */}
+        {addingService && (
+          <div className="flex flex-col gap-1.5 mb-2 p-2 rounded-md bg-[#0d1117] border border-[#30363d]">
+            <Input
+              value={newSvc.service_name}
+              onChange={(e) => setNewSvc((s) => ({ ...s, service_name: e.target.value }))}
+              placeholder="Service name"
+              className="bg-[#21262d] border-[#30363d] text-xs h-7"
+              autoFocus
+            />
+            <div className="flex gap-1.5">
+              <Input
+                type="number"
+                value={newSvc.port}
+                onChange={(e) => setNewSvc((s) => ({ ...s, port: e.target.value }))}
+                placeholder="Port"
+                min={1}
+                max={65535}
+                className="bg-[#21262d] border-[#30363d] font-mono text-xs h-7 w-20 shrink-0"
+              />
+              <select
+                value={newSvc.protocol}
+                onChange={(e) => setNewSvc((s) => ({ ...s, protocol: e.target.value as 'tcp' | 'udp' }))}
+                className="flex-1 bg-[#21262d] border border-[#30363d] rounded-md text-xs h-7 px-1.5 text-foreground"
+              >
+                <option value="tcp">tcp</option>
+                <option value="udp">udp</option>
+              </select>
+            </div>
+            <div className="flex gap-1.5">
+              <Button
+                size="sm"
+                className="flex-1 h-6 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
+                onClick={handleAddService}
+              >
+                Add
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-6 text-[10px]"
+                onClick={() => setAddingService(false)}
+              >
+                Cancel
+              </Button>
+            </div>
           </div>
         )}
-        {properties.length === 0 && !addingProp && (
-          <p className="text-[10px] text-muted-foreground/50">No properties — click Add to define one.</p>
+
+        {data.services.length > 0 && (
+          <div className="flex flex-col gap-1.5">
+            {data.services.map((svc, i) => (
+              <ServiceBadge
+                key={`${svc.port}-${svc.protocol}-${i}`}
+                svc={svc}
+                host={host}
+                onRemove={() => handleRemoveService(i)}
+              />
+            ))}
+          </div>
+        )}
+
+        {data.services.length === 0 && !addingService && (
+          <p className="text-[10px] text-muted-foreground/50">No services — click Add to register one.</p>
         )}
       </div>
 
-      <div className="px-4 py-3 border-t border-border">
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-xs text-muted-foreground">Services{services.length > 0 ? ` (${services.length})` : ''}</span>
-          <button onClick={() => { setAddingForNode((v) => v === node.id ? null : node.id); setEditingFor(null) }} className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors">
-            <Plus size={10} /> Add
-          </button>
-        </div>
-        {addingService && <ServiceForm form={newSvc} onChange={setNewSvc} onConfirm={handleAddService} onCancel={() => setAddingForNode(null)} confirmLabel="Add" autoFocus />}
-        {services.length > 0 && (
-          <div className="flex flex-col gap-1.5">
-            {services.map((svc, i) =>
-              editingIndex === i ? (
-                <ServiceForm key={`edit-${i}`} form={editSvc} onChange={setEditSvc} onConfirm={handleSaveEdit} onCancel={() => setEditingFor(null)} confirmLabel="Save" autoFocus />
-              ) : (
-                <ServiceBadge key={`${svc.port}-${svc.protocol}-${i}`} svc={svc} host={host} onEdit={() => handleStartEdit(i)} onRemove={() => handleRemoveService(i)} />
-              )
-            )}
-          </div>
-        )}
-        {services.length === 0 && !addingService && <p className="text-[10px] text-muted-foreground/50">No services — click Add to register one.</p>}
-      </div>
-
+      {/* Notes */}
       {data.notes && (
         <div className="px-4 py-3 border-t border-border">
           <div className="text-xs text-muted-foreground mb-1">Notes</div>
@@ -287,11 +200,12 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
         </div>
       )}
 
+      {/* Actions */}
       <div className="mt-auto flex gap-2 px-4 py-3 border-t border-border">
         <Button size="sm" variant="secondary" className="flex-1 gap-1.5" onClick={() => onEdit(node.id)}>
           <Edit size={14} /> Edit
         </Button>
-        <Button size="sm" variant="destructive" className="gap-1.5" aria-label="Delete node" onClick={handleDelete}>
+        <Button size="sm" variant="destructive" className="gap-1.5" onClick={handleDelete}>
           <Trash2 size={14} />
         </Button>
       </div>
@@ -299,320 +213,47 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
   )
 }
 
-// --- Multi-select panel ---
-
-interface MultiSelectPanelProps {
-  nodeIds: string[]
-  nodes: Node<NodeData>[]
-  groupName: string
-  setGroupName: (v: string) => void
-  creatingGroup: boolean
-  setCreatingGroup: (v: boolean) => void
-  onCreateGroup: (name: string) => void
-  onClose: () => void
+function formatStorage(gb: number): string {
+  if (gb >= 1024) return `${(gb / 1024).toFixed(1).replace(/\.0$/, '')} TB`
+  return `${gb} GB`
 }
 
-function MultiSelectPanel({ nodeIds, nodes, groupName, setGroupName, creatingGroup, setCreatingGroup, onCreateGroup, onClose }: MultiSelectPanelProps) {
-  const selectedNodes = nodeIds.map((id) => nodes.find((n) => n.id === id)).filter(Boolean) as Node<NodeData>[]
-
-  const handleCreate = () => {
-    const name = groupName.trim() || 'Group'
-    onCreateGroup(name)
-  }
-
-  return (
-    <aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <div className="flex items-center gap-2">
-          <Layers size={14} className="text-[#00d4ff]" />
-          <span className="font-semibold text-sm text-foreground">{nodeIds.length} nodes selected</span>
-        </div>
-        <button aria-label="Close panel" onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
-          <X size={16} />
-        </button>
-      </div>
-
-      <div className="flex-1 px-4 py-3 space-y-1.5 overflow-y-auto">
-        {selectedNodes.map((n) => (
-          <div key={n.id} className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-[#21262d] text-xs">
-            <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: STATUS_COLORS[n.data.status] }} />
-            <span className="truncate text-foreground font-medium">{n.data.label}</span>
-            <span className="ml-auto text-muted-foreground shrink-0">{NODE_TYPE_LABELS[n.data.type] ?? n.data.type}</span>
-          </div>
-        ))}
-      </div>
-
-      <div className="px-4 py-3 border-t border-border space-y-2">
-        {creatingGroup ? (
-          <>
-            <Input
-              autoFocus
-              placeholder="Group name…"
-              value={groupName}
-              onChange={(e) => setGroupName(e.target.value)}
-              onKeyDown={(e) => { if (e.key === 'Enter') handleCreate(); if (e.key === 'Escape') setCreatingGroup(false) }}
-              className="bg-[#21262d] border-[#30363d] text-xs h-7"
-            />
-            <div className="flex gap-2">
-              <Button size="sm" className="flex-1 h-7 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={handleCreate}>
-                Create Group
-              </Button>
-              <Button size="sm" variant="ghost" className="h-7 text-[10px]" onClick={() => setCreatingGroup(false)}>
-                Cancel
-              </Button>
-            </div>
-          </>
-        ) : (
-          <Button
-            size="sm"
-            className="w-full gap-2 bg-[#00d4ff]/10 text-[#00d4ff] border border-[#00d4ff]/30 hover:bg-[#00d4ff]/20"
-            variant="ghost"
-            onClick={() => setCreatingGroup(true)}
-          >
-            <Layers size={13} /> Create Group
-          </Button>
-        )}
-      </div>
-    </aside>
-  )
-}
-
-// --- Group detail panel ---
-
-interface GroupDetailPanelProps {
-  node: Node<NodeData>
-  nodes: Node<NodeData>[]
-  onUngroup: () => void
-  onToggleBorder: () => void
-  onClose: () => void
-  onSelectChild: (id: string) => void
-}
-
-function GroupDetailPanel({ node, nodes, onUngroup, onToggleBorder, onClose, onSelectChild }: GroupDetailPanelProps) {
-  const children = nodes.filter((n) => n.parentId === node.id)
-  const onlineCount = children.filter((n) => n.data.status === 'online').length
-  const offlineCount = children.filter((n) => n.data.status === 'offline').length
-  const showBorder = node.data.custom_colors?.show_border !== false
-
-  const handleUngroup = () => {
-    if (confirm(`Ungroup "${node.data.label}"? Nodes will be released to the canvas.`)) {
-      onUngroup()
-    }
-  }
-
-  return (
-    <aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          <Layers size={14} className="text-[#00d4ff] shrink-0" />
-          <span className="font-semibold text-sm text-foreground truncate">{node.data.label}</span>
-        </div>
-        <button aria-label="Close panel" onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors shrink-0">
-          <X size={16} />
-        </button>
-      </div>
-
-      {/* Status summary */}
-      <div className="flex items-center gap-4 px-4 py-3 border-b border-border text-xs">
-        <span className="text-muted-foreground">{children.length} node{children.length !== 1 ? 's' : ''}</span>
-        {onlineCount > 0 && <span style={{ color: STATUS_COLORS.online }}>● {onlineCount} online</span>}
-        {offlineCount > 0 && <span style={{ color: STATUS_COLORS.offline }}>● {offlineCount} offline</span>}
-      </div>
-
-      {/* Children list */}
-      <div className="flex-1 px-4 py-3 space-y-1.5 overflow-y-auto">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50">Members</span>
-        {children.length === 0 && <p className="text-xs text-muted-foreground/50">No nodes in this group.</p>}
-        {children.map((child) => (
-          <button
-            key={child.id}
-            onClick={() => onSelectChild(child.id)}
-            className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md bg-[#21262d] text-xs hover:bg-[#30363d] transition-colors text-left"
-          >
-            <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: STATUS_COLORS[child.data.status] }} />
-            <span className="truncate text-foreground font-medium">{child.data.label}</span>
-            <span className="ml-auto text-muted-foreground shrink-0">{NODE_TYPE_LABELS[child.data.type] ?? child.data.type}</span>
-          </button>
-        ))}
-      </div>
-
-      {/* Actions */}
-      <div className="px-4 py-3 border-t border-border space-y-2">
-        <button
-          onClick={onToggleBorder}
-          className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-[#21262d] transition-colors"
-        >
-          {showBorder ? <Eye size={13} /> : <EyeOff size={13} />}
-          {showBorder ? 'Hide border & title' : 'Show border & title'}
-        </button>
-        <Button
-          size="sm"
-          variant="destructive"
-          className="w-full gap-2"
-          onClick={handleUngroup}
-        >
-          <Ungroup size={13} /> Ungroup
-        </Button>
-      </div>
-    </aside>
-  )
-}
-
-// --- Helpers ---
-
 function DetailRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
   return (
     <div className="flex justify-between gap-2 items-baseline">
       <span className="text-muted-foreground text-xs shrink-0">{label}</span>
-      <span className={`text-xs text-right truncate ${mono ? 'font-mono text-[#00d4ff]' : 'text-foreground'}`} title={value}>
+      <span
+        className={`text-xs text-right truncate ${mono ? 'font-mono text-[#00d4ff]' : 'text-foreground'}`}
+        title={value}
+      >
         {value}
       </span>
     </div>
   )
 }
 
-function ServiceForm({ form, onChange, onConfirm, onCancel, confirmLabel, autoFocus }: {
-  form: { port: string; protocol: 'tcp' | 'udp'; service_name: string }
-  onChange: (f: { port: string; protocol: 'tcp' | 'udp'; service_name: string }) => void
-  onConfirm: () => void
-  onCancel: () => void
-  confirmLabel: string
-  autoFocus?: boolean
-}) {
-  return (
-    <div className="flex flex-col gap-1.5 mb-1 p-2 rounded-md bg-[#0d1117] border border-[#30363d]">
-      <Input value={form.service_name} onChange={(e) => onChange({ ...form, service_name: e.target.value })} placeholder="Service name" className="bg-[#21262d] border-[#30363d] text-xs h-7" autoFocus={autoFocus} onKeyDown={(e) => e.key === 'Enter' && onConfirm()} />
-      <div className="flex gap-1.5">
-        <Input type="number" value={form.port} onChange={(e) => onChange({ ...form, port: e.target.value })} placeholder="Port" min={1} max={65535} className="bg-[#21262d] border-[#30363d] font-mono text-xs h-7 w-20 shrink-0" onKeyDown={(e) => e.key === 'Enter' && onConfirm()} />
-        <select value={form.protocol} onChange={(e) => onChange({ ...form, protocol: e.target.value as 'tcp' | 'udp' })} className="flex-1 bg-[#21262d] border border-[#30363d] rounded-md text-xs h-7 px-1.5 text-foreground">
-          <option value="tcp">tcp</option>
-          <option value="udp">udp</option>
-        </select>
-      </div>
-      <div className="flex gap-1.5">
-        <Button size="sm" className="flex-1 h-6 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={onConfirm}>{confirmLabel}</Button>
-        <Button size="sm" variant="ghost" className="h-6 text-[10px]" onClick={onCancel}>Cancel</Button>
-      </div>
-    </div>
-  )
-}
-
-// --- Property components ---
-
-function PropertyForm({ form, onChange, onConfirm, onCancel, confirmLabel }: {
-  form: PropForm
-  onChange: (f: PropForm) => void
-  onConfirm: () => void
-  onCancel: () => void
-  confirmLabel: string
-}) {
-  return (
-    <div className="flex flex-col gap-1.5 mb-1 p-2 rounded-md bg-[#0d1117] border border-[#30363d]">
-      <Input
-        value={form.key}
-        onChange={(e) => onChange({ ...form, key: e.target.value })}
-        placeholder="Label (e.g. CPU Model)"
-        className="bg-[#21262d] border-[#30363d] text-xs h-7"
-        autoFocus
-        onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
-      />
-      <Input
-        value={form.value}
-        onChange={(e) => onChange({ ...form, value: e.target.value })}
-        placeholder="Value (e.g. i7-12700K)"
-        className="bg-[#21262d] border-[#30363d] text-xs h-7"
-        onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
-      />
-      {/* Icon picker */}
-      <div className="flex flex-wrap gap-1 pt-0.5">
-        <button
-          onClick={() => onChange({ ...form, icon: null })}
-          title="No icon"
-          className={`w-6 h-6 rounded flex items-center justify-center text-[10px] border transition-colors ${
-            form.icon === null ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]' : 'border-[#30363d] text-muted-foreground hover:border-[#8b949e]'
-          }`}
-        >
-          –
-        </button>
-        {PROPERTY_ICON_NAMES.map((name) => {
-          const Icon = PROPERTY_ICONS[name]
-          const active = form.icon === name
-          return (
-            <button
-              key={name}
-              onClick={() => onChange({ ...form, icon: name })}
-              title={name}
-              className={`w-6 h-6 rounded flex items-center justify-center border transition-colors ${
-                active ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]' : 'border-[#30363d] text-muted-foreground hover:border-[#8b949e]'
-              }`}
-            >
-              {createElement(Icon, { size: 11 })}
-            </button>
-          )
-        })}
-      </div>
-      {/* Visible toggle */}
-      <label className="flex items-center gap-2 cursor-pointer pt-0.5">
-        <input
-          type="checkbox"
-          checked={form.visible}
-          onChange={(e) => onChange({ ...form, visible: e.target.checked })}
-          className="accent-[#00d4ff] w-3 h-3"
-        />
-        <span className="text-[10px] text-muted-foreground">Show on node</span>
-      </label>
-      <div className="flex gap-1.5">
-        <Button size="sm" className="flex-1 h-6 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={onConfirm}>
-          {confirmLabel}
-        </Button>
-        <Button size="sm" variant="ghost" className="h-6 text-[10px]" onClick={onCancel}>Cancel</Button>
-      </div>
-    </div>
-  )
-}
-
-function PropertyBadge({ prop, onToggleVisible, onEdit, onRemove }: {
-  prop: NodeProperty
-  onToggleVisible: () => void
-  onEdit: () => void
-  onRemove: () => void
-}) {
-  const Icon = resolvePropertyIcon(prop.icon)
-  return (
-    <div className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors" style={{ background: '#21262d', borderColor: '#30363d' }}>
-      <div className="flex items-center gap-1.5 min-w-0">
-        {Icon && createElement(Icon, { size: 11, className: 'shrink-0 text-muted-foreground' })}
-        <span className="font-medium truncate text-foreground" title={prop.key}>{prop.key}</span>
-        <span className="text-muted-foreground truncate" title={prop.value}>· {prop.value}</span>
-      </div>
-      <div className="flex items-center gap-1 shrink-0">
-        <button
-          onClick={onToggleVisible}
-          title={prop.visible ? 'Hide on node' : 'Show on node'}
-          className="text-[#8b949e] hover:text-[#00d4ff] transition-colors"
-        >
-          {prop.visible ? <Eye size={10} /> : <EyeOff size={10} />}
-        </button>
-        <button onClick={onEdit} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff]" title="Edit property">
-          <Pencil size={10} />
-        </button>
-        <button onClick={onRemove} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149]" title="Remove property">
-          <X size={10} />
-        </button>
-      </div>
-    </div>
-  )
-}
-
 const CATEGORY_COLORS: Record<string, string> = {
-  web: '#00d4ff', database: '#a855f7', monitoring: '#39d353', storage: '#e3b341', security: '#f85149', remote: '#8b949e',
+  web: '#00d4ff',
+  database: '#a855f7',
+  monitoring: '#39d353',
+  storage: '#e3b341',
+  security: '#f85149',
+  remote: '#8b949e',
 }
 
-function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) {
+function ServiceBadge({ svc, host, onRemove }: { svc: ServiceInfo; host?: string; onRemove: () => void }) {
   const url = getServiceUrl(svc, host)
   const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e'
+
   const inner = (
-    <div className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors" style={{ background: '#21262d', borderColor: '#30363d', cursor: url ? 'pointer' : 'default' }}>
+    <div
+      className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors"
+      style={{
+        background: '#21262d',
+        borderColor: '#30363d',
+        cursor: url ? 'pointer' : 'default',
+      }}
+    >
       <div className="flex items-center gap-1.5 min-w-0">
         <span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
         <span className="font-medium truncate" style={{ color }}>{svc.service_name}</span>
@@ -620,11 +261,23 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
       <div className="flex items-center gap-1.5 shrink-0">
         <span className="font-mono text-[#8b949e]">{svc.port}/{svc.protocol}</span>
         {url && <ExternalLink size={10} className="text-muted-foreground" />}
-        <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5" title="Edit service"><Pencil size={10} /></button>
-        <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5" title="Remove service"><X size={10} /></button>
+        <button
+          onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }}
+          className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5"
+          title="Remove service"
+        >
+          <X size={10} />
+        </button>
       </div>
     </div>
   )
-  if (url) return <a href={url} target="_blank" rel="noopener noreferrer" className="block hover:opacity-80 transition-opacity">{inner}</a>
+
+  if (url) {
+    return (
+      <a href={url} target="_blank" rel="noopener noreferrer" className="block hover:opacity-80 transition-opacity">
+        {inner}
+      </a>
+    )
+  }
   return inner
 }

frontend/src/components/panels/Sidebar.tsx

@@ -1,16 +1,15 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
-import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square, Eye, Settings, StopCircle, X } from 'lucide-react'
+import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square, Eye } from 'lucide-react'
 import { Logo } from '@/components/ui/Logo'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { scanApi, settingsApi } from '@/api/client'
+import { scanApi } from '@/api/client'
 import { toast } from 'sonner'
-import { useLatestRelease } from '@/hooks/useLatestRelease'
 import { PendingDeviceModal, type PendingDevice } from '@/components/modals/PendingDeviceModal'
 
 const STANDALONE = import.meta.env.VITE_STANDALONE === 'true'
 
-type SidebarView = 'canvas' | 'pending' | 'hidden' | 'history' | 'settings'
+type SidebarView = 'canvas' | 'pending' | 'hidden' | 'history'
 
 const ALL_VIEWS = [
   { id: 'canvas' as SidebarView, icon: LayoutDashboard, label: 'Canvas' },
@@ -36,26 +35,26 @@ interface SidebarProps {
   onScan: () => void
   onSave: () => void
   onNodeApproved: (nodeId: string) => void
-  forceView?: SidebarView
-  highlightPendingId?: string
 }
 
-export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeApproved, forceView, highlightPendingId }: SidebarProps) {
-  const [_collapsed, setCollapsed] = useState(false)
-  const [_activeView, setActiveView] = useState<SidebarView>('canvas')
-
-  // When forceView is set, override local state without useEffect
-  const collapsed = forceView ? false : _collapsed
-  const activeView = forceView ?? _activeView
-
+export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeApproved }: SidebarProps) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [activeView, setActiveView] = useState<SidebarView>('canvas')
   const { nodes, hasUnsavedChanges, hideIp, toggleHideIp } = useCanvasStore()
 
   const networkNodes = nodes.filter((n) => n.data.type !== 'groupRect')
   const onlineCount = networkNodes.filter((n) => n.data.status === 'online').length
   const offlineCount = networkNodes.filter((n) => n.data.status === 'offline').length
 
-  const handleScan = useCallback(() => {
-    onScan()
+  const handleScan = useCallback(async () => {
+    try {
+      await scanApi.trigger()
+      toast.success('Network scan started — check Scan History for results')
+      setActiveView('history')
+      onScan()
+    } catch {
+      toast.error('Failed to trigger scan')
+    }
   }, [onScan])
 
   return (
@@ -93,10 +92,9 @@ export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeAppro
       {/* View content (only when expanded) */}
       {!collapsed && activeView !== 'canvas' && (
         <div className="flex-1 min-h-0 overflow-y-auto border-t border-border">
-          {activeView === 'pending' && <PendingDevicesPanel onNodeApproved={onNodeApproved} highlightId={highlightPendingId} />}
+          {activeView === 'pending' && <PendingDevicesPanel onNodeApproved={onNodeApproved} />}
           {activeView === 'hidden' && <HiddenDevicesPanel />}
           {activeView === 'history' && <ScanHistoryPanel />}
-          {activeView === 'settings' && <SettingsPanel />}
         </div>
       )}
 
@@ -126,7 +124,7 @@ export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeAppro
       {/* Actions */}
       <div className="flex flex-col gap-0.5 p-2 border-t border-border">
         <SidebarItem icon={Plus} label="Add Node" collapsed={collapsed} onClick={onAddNode} />
-        <SidebarItem icon={Square} label="Add Zone" collapsed={collapsed} onClick={onAddGroupRect} />
+        <SidebarItem icon={Square} label="Add Rectangle" collapsed={collapsed} onClick={onAddGroupRect} />
         {!STANDALONE && <SidebarItem icon={ScanLine} label="Scan Network" collapsed={collapsed} onClick={handleScan} />}
         <SidebarItem
           icon={hideIp ? EyeOff : Eye}
@@ -143,30 +141,16 @@ export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeAppro
           badge={hasUnsavedChanges}
           accent
         />
-        {!STANDALONE && (
-          <SidebarItem
-            icon={Settings}
-            label="Settings"
-            collapsed={collapsed}
-            active={activeView === 'settings'}
-            onClick={() => setActiveView((v) => v === 'settings' ? 'canvas' : 'settings')}
-          />
-        )}
       </div>
-
-      {!collapsed && <VersionBadge />}
     </aside>
   )
 }
 
-const COMMON_PORTS = new Set([22, 80, 443])
-
-function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved: (nodeId: string) => void; highlightId?: string }) {
+function PendingDevicesPanel({ onNodeApproved }: { onNodeApproved: (nodeId: string) => void }) {
   const [devices, setDevices] = useState<PendingDevice[]>([])
   const [loading, setLoading] = useState(false)
   const [selected, setSelected] = useState<PendingDevice | null>(null)
   const { addNode, scanEventTs } = useCanvasStore()
-  const highlightRef = useRef<HTMLButtonElement>(null)
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -180,27 +164,12 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
     }
   }, [])
 
-  const handleClearAll = async () => {
-    try {
-      await scanApi.clearPending()
-      setDevices([])
-      toast.success('Pending devices cleared')
-    } catch {
-      toast.error('Failed to clear pending devices')
-    }
-  }
-
   useEffect(() => { load() }, [load])
 
   useEffect(() => {
     if (scanEventTs > 0) load()
   }, [scanEventTs, load])
 
-  useEffect(() => {
-    if (!highlightId || loading) return
-    highlightRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-  }, [highlightId, loading])
-
   const handleApprove = async (device: PendingDevice) => {
     try {
       const nodeData = {
@@ -221,7 +190,6 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
       })
       toast.success(`Approved ${nodeData.label}`)
       setDevices((prev) => prev.filter((d) => d.id !== device.id))
-      setSelected(null)
       onNodeApproved(nodeId)
     } catch {
       toast.error('Failed to approve device')
@@ -252,22 +220,16 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
       <div className="p-2">
         <div className="flex items-center justify-between mb-2">
           <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Pending</span>
-          <div className="flex items-center gap-1">
-            <button onClick={load} className="text-muted-foreground hover:text-foreground p-0.5" title="Refresh">
-              <RefreshCw size={12} />
-            </button>
-            {devices.length > 0 && (
-              <button onClick={handleClearAll} className="text-muted-foreground hover:text-[#f85149] p-0.5" title="Clear all pending">
-                <X size={12} />
-              </button>
-            )}
-          </div>
+          <button onClick={load} className="text-muted-foreground hover:text-foreground p-0.5">
+            <RefreshCw size={12} />
+          </button>
         </div>
         {loading && <Loader2 size={14} className="animate-spin text-muted-foreground mx-auto my-4" />}
         {!loading && devices.length === 0 && (
           <p className="text-xs text-muted-foreground text-center py-4">No pending devices</p>
         )}
         {devices.map((d) => {
+          const COMMON_PORTS = new Set([22, 80, 443])
           const namedService = d.services.find((s) => s.category != null && !COMMON_PORTS.has(s.port))
           const titleService = namedService
             ?? d.services.find((s) => s.port === 80)
@@ -280,15 +242,11 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
           const hasHttps = d.services.some((s) => s.port === 443)
           const otherCount = d.services.filter((s) => s.port !== 22 && s.port !== 80 && s.port !== 443).length
           const virtualBadge = detectVirtualBadge(d.mac)
-          const sourceColor = d.discovery_source === 'mdns' ? '#a855f7' : '#8b949e'
-          const sourceLabel = d.discovery_source === 'mdns' ? 'mDNS' : d.discovery_source === 'arp' ? 'ARP' : null
-          const isHighlighted = d.id === highlightId
           return (
             <button
               key={d.id}
-              ref={isHighlighted ? highlightRef : null}
               onClick={() => setSelected(d)}
-              className={`w-full mb-1.5 p-2 rounded-md text-xs text-left transition-colors border ${isHighlighted ? 'bg-[#2d3748] border-[#e3b341]' : 'bg-[#21262d] border-transparent hover:bg-[#30363d] hover:border-[#30363d]'}`}
+              className="w-full mb-1.5 p-2 rounded-md bg-[#21262d] text-xs text-left hover:bg-[#30363d] transition-colors border border-transparent hover:border-[#30363d]"
             >
               <div className="flex items-center gap-1.5">
                 <span className="w-1.5 h-1.5 rounded-full bg-[#e3b341] shrink-0" />
@@ -297,9 +255,8 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
               {showIpBelow && (
                 <div className="font-mono text-muted-foreground truncate pl-3 text-[10px] mt-0.5">{d.ip}</div>
               )}
-              {(hasSsh || hasHttp || hasHttps || otherCount > 0 || virtualBadge || sourceLabel) && (
+              {(hasSsh || hasHttp || hasHttps || otherCount > 0 || virtualBadge) && (
                 <div className="flex items-center gap-1 pl-3 mt-1.5 flex-wrap">
-                  {sourceLabel && <ServiceBadge label={sourceLabel} color={sourceColor} />}
                   {virtualBadge && (
                     <Tooltip>
                       <TooltipTrigger>
@@ -346,7 +303,7 @@ function HiddenDevicesPanel() {
     }
   }, [])
 
-  useEffect(() => { load() }, [load])
+  useState(() => { load() })
 
   const handleIgnore = async (id: string) => {
     try {
@@ -420,26 +377,8 @@ function ScanHistoryPanel() {
     return () => clearInterval(id)
   }, [runs, load])
 
-  const [stopping, setStopping] = useState<string | null>(null)
-
-  const handleStop = async (runId: string) => {
-    setStopping(runId)
-    try {
-      await scanApi.stop(runId)
-      toast.success('Scan stop requested')
-    } catch {
-      toast.error('Failed to stop scan')
-    } finally {
-      setStopping(null)
-    }
-  }
-
   const statusColor = (s: string) =>
-    s === 'done' ? '#39d353'
-    : s === 'running' ? '#e3b341'
-    : s === 'error' ? '#f85149'
-    : s === 'cancelled' ? '#8b949e'
-    : '#8b949e'
+    s === 'done' ? '#39d353' : s === 'running' ? '#e3b341' : s === 'error' ? '#f85149' : '#8b949e'
 
   return (
     <div className="p-2">
@@ -460,27 +399,9 @@ function ScanHistoryPanel() {
             <span className="font-mono text-foreground capitalize">{r.status}</span>
             {r.status === 'running' && <Loader2 size={10} className="animate-spin text-[#e3b341]" />}
             <span className="ml-auto text-muted-foreground font-mono">{r.devices_found} found</span>
-            {r.status === 'running' && (
-              <Tooltip>
-                <TooltipTrigger>
-                  <button
-                    aria-label="Stop scan"
-                    onClick={() => handleStop(r.id)}
-                    disabled={stopping === r.id}
-                    className="p-0.5 text-[#f85149] hover:bg-[#f85149]/10 rounded transition-colors disabled:opacity-50"
-                  >
-                    {stopping === r.id
-                      ? <Loader2 size={11} className="animate-spin" />
-                      : <StopCircle size={11} />
-                    }
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="left">Stop scan</TooltipContent>
-              </Tooltip>
-            )}
           </div>
           <div className="text-muted-foreground text-[10px] mt-0.5">
-            {new Date(r.started_at.endsWith('Z') ? r.started_at : r.started_at + 'Z').toLocaleString()}
+            {new Date(r.started_at).toLocaleString()}
           </div>
           {r.ranges.length > 0 && (
             <div className="text-[#8b949e] text-[10px] font-mono truncate">{r.ranges.join(', ')}</div>
@@ -496,89 +417,6 @@ function ScanHistoryPanel() {
   )
 }
 
-function SettingsPanel() {
-  const [interval, setIntervalValue] = useState(60)
-  const [saving, setSaving] = useState(false)
-
-  useEffect(() => {
-    settingsApi.get()
-      .then((res) => setIntervalValue(res.data.interval_seconds))
-      .catch(() => {/* use default */})
-  }, [])
-
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      await settingsApi.save({ interval_seconds: interval })
-      toast.success('Settings saved')
-    } catch {
-      toast.error('Failed to save settings')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div className="p-3 space-y-4">
-      <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Settings</span>
-
-      <div className="space-y-1.5">
-        <label className="text-xs text-muted-foreground">Status check interval (s)</label>
-        <div className="flex items-center gap-2">
-          <input
-            type="number"
-            min={10}
-            max={3600}
-            value={interval}
-            onChange={(e) => setIntervalValue(Number(e.target.value))}
-            className="w-24 px-2 py-1 rounded-md text-xs font-mono bg-[#0d1117] border border-border text-foreground focus:outline-none focus:border-[#00d4ff]"
-          />
-          <span className="text-xs text-muted-foreground">seconds</span>
-        </div>
-        <p className="text-[10px] text-muted-foreground leading-tight">
-          How often node health is polled (ping, HTTP, SSH…)
-        </p>
-      </div>
-
-      <button
-        onClick={handleSave}
-        disabled={saving}
-        className="w-full py-1.5 rounded-md text-xs font-medium bg-[#00d4ff]/10 text-[#00d4ff] border border-[#00d4ff]/30 hover:bg-[#00d4ff]/20 transition-colors disabled:opacity-50"
-      >
-        {saving ? 'Saving…' : 'Save'}
-      </button>
-    </div>
-  )
-}
-
-function VersionBadge() {
-  const current = __APP_VERSION__
-  const { latest, hasUpdate } = useLatestRelease(current)
-
-  return (
-    <div className="px-3 py-2 border-t border-border flex flex-col gap-1">
-      <a
-        href={`https://github.com/Pouzor/homelable/releases/tag/v${current}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="font-mono text-[11px] text-muted-foreground hover:text-foreground transition-colors"
-      >
-        v{current}
-      </a>
-      {hasUpdate && latest && (
-        <a
-          href={latest.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-[#e3b341]/15 text-[#e3b341] border border-[#e3b341]/30 hover:bg-[#e3b341]/25 transition-colors self-start"
-        >
-          ↑ v{latest.version} available
-        </a>
-      )}
-    </div>
-  )
-}
-
 const MAC_OUI: Record<string, { label: string; title: string }> = {
   '52:54:00': { label: 'QEMU', title: 'QEMU/KVM Virtual Machine' },
   'bc:24:11': { label: 'PVE',  title: 'Proxmox Virtual Machine or LXC' },

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { DetailPanel } from '../DetailPanel'
 import * as canvasStore from '@/stores/canvasStore'
 import type { NodeData } from '@/types'
@@ -26,13 +26,9 @@ function setupStore(nodeData: Partial<NodeData> = {}) {
   vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
     nodes: [makeNode(nodeData)],
     selectedNodeId: 'n1',
-    selectedNodeIds: [],
     setSelectedNode: vi.fn(),
     deleteNode: vi.fn(),
     updateNode: vi.fn(),
-    snapshotHistory: vi.fn(),
-    createGroup: vi.fn(),
-    ungroup: vi.fn(),
   } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
 }
 
@@ -41,13 +37,9 @@ describe('DetailPanel', () => {
     vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
       nodes: [],
       selectedNodeId: null,
-      selectedNodeIds: [],
       setSelectedNode: vi.fn(),
       deleteNode: vi.fn(),
       updateNode: vi.fn(),
-      snapshotHistory: vi.fn(),
-      createGroup: vi.fn(),
-      ungroup: vi.fn(),
     } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
   })
 
@@ -69,320 +61,58 @@ describe('DetailPanel', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  describe('Properties section', () => {
-    it('renders empty state when no properties', () => {
-      setupStore({ properties: [] })
+  describe('Hardware section', () => {
+    it('does not render hardware section when no hardware data', () => {
+      setupStore({ label: 'Server' })
       render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText(/No properties/)).toBeDefined()
+      expect(screen.queryByText('Hardware')).toBeNull()
     })
 
-    it('renders properties with key and value', () => {
-      setupStore({
-        properties: [
-          { key: 'CPU Model', value: 'i7-12700K', icon: 'Cpu', visible: true },
-          { key: 'RAM', value: '32 GB', icon: 'MemoryStick', visible: false },
-        ],
-      })
+    it('renders hardware section when cpu_count is set', () => {
+      setupStore({ cpu_count: 8 })
       render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText('CPU Model')).toBeDefined()
-      // Value is rendered with a middle-dot prefix: "· 32 GB"
-      expect(screen.getByText(/32 GB/)).toBeDefined()
+      expect(screen.getByText('Hardware')).toBeDefined()
+      expect(screen.getByText('8')).toBeDefined()
     })
 
-    it('shows Properties count when properties exist', () => {
-      setupStore({
-        properties: [
-          { key: 'CPU Model', value: 'i7', icon: null, visible: true },
-          { key: 'RAM', value: '16 GB', icon: null, visible: true },
-        ],
-      })
+    it('renders cpu_model', () => {
+      setupStore({ cpu_model: 'Intel Xeon E5-2680' })
       render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText('Properties (2)')).toBeDefined()
+      expect(screen.getByText('Intel Xeon E5-2680')).toBeDefined()
     })
 
-    it('shows add form when Add is clicked', () => {
-      setupStore({ properties: [] })
+    it('formats ram_gb in GB', () => {
+      setupStore({ ram_gb: 32 })
       render(<DetailPanel onEdit={vi.fn()} />)
-      // There are multiple "Add" buttons (services + properties) — find the one after "Properties"
-      const addButtons = screen.getAllByText('Add')
-      fireEvent.click(addButtons[0]) // first Add = properties (rendered above services)
-      expect(screen.getByPlaceholderText('Label (e.g. CPU Model)')).toBeDefined()
+      expect(screen.getByText('32 GB')).toBeDefined()
     })
 
-    it('calls updateNode with new property on Add confirm', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ properties: [] })],
-        selectedNodeId: 'n1',
-        selectedNodeIds: [],
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-        createGroup: vi.fn(),
-        ungroup: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
+    it('formats ram_gb >= 1024 as TB', () => {
+      setupStore({ ram_gb: 2048 })
       render(<DetailPanel onEdit={vi.fn()} />)
-      const addButtons = screen.getAllByText('Add')
-      fireEvent.click(addButtons[0]) // first Add = properties
-      // Form is now open — fill key and value
-      fireEvent.change(screen.getByPlaceholderText('Label (e.g. CPU Model)'), { target: { value: 'GPU' } })
-      fireEvent.change(screen.getByPlaceholderText('Value (e.g. i7-12700K)'), { target: { value: 'RTX 4090' } })
-      // The PropertyForm confirm button is labeled "Add" — use the form's confirm button
-      fireEvent.keyDown(screen.getByPlaceholderText('Value (e.g. i7-12700K)'), { key: 'Enter' })
-      expect(updateNode).toHaveBeenCalledOnce()
-      const [, payload] = updateNode.mock.calls[0]
-      expect(payload.properties[0]).toMatchObject({ key: 'GPU', value: 'RTX 4090', visible: true })
+      expect(screen.getByText('2 TB')).toBeDefined()
     })
 
-    it('calls updateNode with toggled visibility when eye button is clicked', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ properties: [{ key: 'RAM', value: '32 GB', icon: 'MemoryStick', visible: true }] })],
-        selectedNodeId: 'n1',
-        selectedNodeIds: [],
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-        createGroup: vi.fn(),
-        ungroup: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
+    it('formats disk_gb in GB', () => {
+      setupStore({ disk_gb: 500 })
       render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByTitle('Hide on node'))
-      expect(updateNode).toHaveBeenCalledOnce()
-      const [, payload] = updateNode.mock.calls[0]
-      expect(payload.properties[0].visible).toBe(false)
+      expect(screen.getByText('500 GB')).toBeDefined()
     })
 
-    it('calls updateNode without the property when remove button is clicked', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ properties: [{ key: 'GPU', value: 'RTX 4090', icon: null, visible: true }] })],
-        selectedNodeId: 'n1',
-        selectedNodeIds: [],
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-        createGroup: vi.fn(),
-        ungroup: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
+    it('formats disk_gb >= 1024 as TB', () => {
+      setupStore({ disk_gb: 1536 })
       render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByTitle('Remove property'))
-      expect(updateNode).toHaveBeenCalledOnce()
-      const [, payload] = updateNode.mock.calls[0]
-      expect(payload.properties).toHaveLength(0)
+      expect(screen.getByText('1.5 TB')).toBeDefined()
     })
 
-    it('does not submit add form when key is empty', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ properties: [] })],
-        selectedNodeId: 'n1',
-        selectedNodeIds: [],
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-        createGroup: vi.fn(),
-        ungroup: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
+    it('renders all hardware fields together', () => {
+      setupStore({ cpu_count: 16, cpu_model: 'AMD EPYC', ram_gb: 128, disk_gb: 4096 })
       render(<DetailPanel onEdit={vi.fn()} />)
-      const addButtons = screen.getAllByText('Add')
-      fireEvent.click(addButtons[0])
-      // Only fill value, leave key empty
-      fireEvent.change(screen.getByPlaceholderText('Value (e.g. i7-12700K)'), { target: { value: 'some value' } })
-      const confirmButtons = screen.getAllByRole('button', { name: 'Add' })
-      fireEvent.click(confirmButtons[confirmButtons.length - 1])
-      expect(updateNode).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Panel actions', () => {
-    it('calls setSelectedNode(null) when close button is clicked', () => {
-      const setSelectedNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({})],
-        selectedNodeId: 'n1',
-        setSelectedNode,
-        deleteNode: vi.fn(),
-        updateNode: vi.fn(),
-        snapshotHistory: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-      render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByLabelText('Close panel'))
-      expect(setSelectedNode).toHaveBeenCalledWith(null)
-    })
-
-    it('calls onEdit with node id when Edit button is clicked', () => {
-      setupStore({})
-      const onEdit = vi.fn()
-      render(<DetailPanel onEdit={onEdit} />)
-      fireEvent.click(screen.getByRole('button', { name: /edit/i }))
-      expect(onEdit).toHaveBeenCalledWith('n1')
-    })
-
-    it('calls snapshotHistory then deleteNode when delete confirmed', () => {
-      const deleteNode = vi.fn()
-      const snapshotHistory = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ label: 'My Server' })],
-        selectedNodeId: 'n1',
-        setSelectedNode: vi.fn(),
-        deleteNode,
-        updateNode: vi.fn(),
-        snapshotHistory,
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-      vi.spyOn(window, 'confirm').mockReturnValue(true)
-      render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByLabelText('Delete node'))
-      expect(snapshotHistory).toHaveBeenCalledOnce()
-      expect(deleteNode).toHaveBeenCalledWith('n1')
-    })
-
-    it('does not call deleteNode or snapshotHistory when delete is cancelled', () => {
-      const deleteNode = vi.fn()
-      const snapshotHistory = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({})],
-        selectedNodeId: 'n1',
-        setSelectedNode: vi.fn(),
-        deleteNode,
-        updateNode: vi.fn(),
-        snapshotHistory,
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-      vi.spyOn(window, 'confirm').mockReturnValue(false)
-      render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByLabelText('Delete node'))
-      expect(snapshotHistory).not.toHaveBeenCalled()
-      expect(deleteNode).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Services — add/remove', () => {
-    it('shows add form when Add is clicked', () => {
-      setupStore({})
-      render(<DetailPanel onEdit={vi.fn()} />)
-      // Two "Add" buttons: first = properties, second = services
-      const addButtons = screen.getAllByText('Add')
-      fireEvent.click(addButtons[addButtons.length - 1])
-      expect(screen.getByPlaceholderText('Service name')).toBeDefined()
-    })
-
-    it('calls updateNode with new service on Add confirm', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({})],
-        selectedNodeId: 'n1',
-        selectedNodeIds: [],
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-        createGroup: vi.fn(),
-        ungroup: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-      render(<DetailPanel onEdit={vi.fn()} />)
-      // Two "Add" header buttons: first = properties, second = services
-      const addHeaders = screen.getAllByText('Add')
-      fireEvent.click(addHeaders[addHeaders.length - 1])
-      fireEvent.change(screen.getByPlaceholderText('Service name'), { target: { value: 'nginx' } })
-      fireEvent.change(screen.getByPlaceholderText('Port'), { target: { value: '80' } })
-      fireEvent.keyDown(screen.getByPlaceholderText('Port'), { key: 'Enter' })
-      expect(updateNode).toHaveBeenCalledOnce()
-      expect(updateNode.mock.calls[0][1].services[0]).toMatchObject({ service_name: 'nginx', port: 80, protocol: 'tcp' })
-    })
-
-    it('calls updateNode without the removed service when X is clicked', () => {
-      const updateNode = vi.fn()
-      const svc = { port: 80, protocol: 'tcp' as const, service_name: 'nginx' }
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ services: [svc] })],
-        selectedNodeId: 'n1',
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-      render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByTitle('Remove service'))
-      expect(updateNode).toHaveBeenCalledOnce()
-      expect(updateNode.mock.calls[0][1].services).toHaveLength(0)
-    })
-
-    it('does not crash when data.services is undefined', () => {
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ services: undefined as unknown as [] })],
-        selectedNodeId: 'n1',
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode: vi.fn(),
-        snapshotHistory: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-      expect(() => render(<DetailPanel onEdit={vi.fn()} />)).not.toThrow()
-    })
-  })
-
-  describe('Services — edit', () => {
-    const svc = { port: 80, protocol: 'tcp' as const, service_name: 'nginx' }
-
-    it('shows edit form pre-filled when pencil is clicked', () => {
-      setupStore({ services: [svc] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      // Hover to reveal edit button (fireEvent.mouseOver isn't needed — opacity is CSS only)
-      const editBtn = screen.getByTitle('Edit service')
-      fireEvent.click(editBtn)
-      const nameInput = screen.getByPlaceholderText('Service name') as HTMLInputElement
-      expect(nameInput.value).toBe('nginx')
-      const portInput = screen.getByPlaceholderText('Port') as HTMLInputElement
-      expect(portInput.value).toBe('80')
-    })
-
-    it('calls updateNode with updated values on Save', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ services: [svc] })],
-        selectedNodeId: 'n1',
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
-      render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByTitle('Edit service'))
-
-      const nameInput = screen.getByPlaceholderText('Service name')
-      fireEvent.change(nameInput, { target: { value: 'apache' } })
-      fireEvent.click(screen.getByRole('button', { name: 'Save' }))
-
-      expect(updateNode).toHaveBeenCalledOnce()
-      expect(updateNode.mock.calls[0][1].services[0].service_name).toBe('apache')
-      expect(updateNode.mock.calls[0][1].services[0].port).toBe(80)
-    })
-
-    it('cancels edit without updating', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ services: [svc] })],
-        selectedNodeId: 'n1',
-        setSelectedNode: vi.fn(),
-        deleteNode: vi.fn(),
-        updateNode,
-        snapshotHistory: vi.fn(),
-      } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
-      render(<DetailPanel onEdit={vi.fn()} />)
-      fireEvent.click(screen.getByTitle('Edit service'))
-      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
-
-      expect(updateNode).not.toHaveBeenCalled()
-      expect(screen.getByText('nginx')).toBeDefined()
+      expect(screen.getByText('Hardware')).toBeDefined()
+      expect(screen.getByText('AMD EPYC')).toBeDefined()
+      expect(screen.getByText('16')).toBeDefined()
+      expect(screen.getByText('128 GB')).toBeDefined()
+      expect(screen.getByText('4 TB')).toBeDefined()
     })
   })
 })

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

@@ -1,233 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { DetailPanel } from '../DetailPanel'
-import * as canvasStore from '@/stores/canvasStore'
-import { TooltipProvider } from '@/components/ui/tooltip'
-
-vi.mock('@/stores/canvasStore')
-vi.mock('@/utils/serviceUrl', () => ({ getServiceUrl: () => null }))
-
-function makeNode(id: string, overrides = {}) {
-  return {
-    id,
-    type: 'server',
-    position: { x: 0, y: 0 },
-    data: { label: id, type: 'server', status: 'online', services: [] },
-    ...overrides,
-  }
-}
-
-function makeGroupNode(id = 'g1', label = 'My Group', showBorder = true) {
-  return {
-    id,
-    type: 'group',
-    position: { x: 76, y: 52 },
-    data: {
-      label,
-      type: 'group',
-      status: 'unknown',
-      services: [],
-      custom_colors: { show_border: showBorder },
-    },
-  }
-}
-
-const mockStore = {
-  nodes: [],
-  selectedNodeId: null,
-  selectedNodeIds: [],
-  setSelectedNode: vi.fn(),
-  deleteNode: vi.fn(),
-  updateNode: vi.fn(),
-  snapshotHistory: vi.fn(),
-  createGroup: vi.fn(),
-  ungroup: vi.fn(),
-}
-
-function setupStore(overrides = {}) {
-  vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-    ...mockStore,
-    ...overrides,
-  } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-}
-
-function renderPanel() {
-  return render(
-    <TooltipProvider>
-      <DetailPanel onEdit={vi.fn()} />
-    </TooltipProvider>,
-  )
-}
-
-describe('MultiSelectPanel', () => {
-  beforeEach(() => vi.clearAllMocks())
-
-  it('renders multi-select panel when 2+ nodes selected', () => {
-    const n1 = makeNode('n1', { data: { label: 'Router', type: 'router', status: 'online', services: [] } })
-    const n2 = makeNode('n2', { data: { label: 'Switch', type: 'switch', status: 'offline', services: [] } })
-    setupStore({
-      nodes: [n1, n2],
-      selectedNodeId: null,
-      selectedNodeIds: ['n1', 'n2'],
-    })
-    renderPanel()
-    expect(screen.getByText('2 nodes selected')).toBeDefined()
-  })
-
-  it('lists selected node labels in multi-select panel', () => {
-    const n1 = makeNode('n1', { data: { label: 'My Router', type: 'router', status: 'online', services: [] } })
-    const n2 = makeNode('n2', { data: { label: 'My NAS', type: 'nas', status: 'unknown', services: [] } })
-    setupStore({ nodes: [n1, n2], selectedNodeId: null, selectedNodeIds: ['n1', 'n2'] })
-    renderPanel()
-    expect(screen.getByText('My Router')).toBeDefined()
-    expect(screen.getByText('My NAS')).toBeDefined()
-  })
-
-  it('shows Create Group button', () => {
-    const n1 = makeNode('n1')
-    const n2 = makeNode('n2')
-    setupStore({ nodes: [n1, n2], selectedNodeId: null, selectedNodeIds: ['n1', 'n2'] })
-    renderPanel()
-    expect(screen.getByRole('button', { name: /create group/i })).toBeDefined()
-  })
-
-  it('shows name input when Create Group is clicked', async () => {
-    const n1 = makeNode('n1')
-    const n2 = makeNode('n2')
-    setupStore({ nodes: [n1, n2], selectedNodeId: null, selectedNodeIds: ['n1', 'n2'] })
-    renderPanel()
-    fireEvent.click(screen.getByRole('button', { name: /create group/i }))
-    await waitFor(() => {
-      expect(screen.getByPlaceholderText(/group name/i)).toBeDefined()
-    })
-  })
-
-  it('calls createGroup with selected ids and entered name', async () => {
-    const createGroup = vi.fn()
-    const n1 = makeNode('n1')
-    const n2 = makeNode('n2')
-    setupStore({ nodes: [n1, n2], selectedNodeId: null, selectedNodeIds: ['n1', 'n2'], createGroup })
-    renderPanel()
-    fireEvent.click(screen.getByRole('button', { name: /create group/i }))
-    const input = await screen.findByPlaceholderText(/group name/i)
-    fireEvent.change(input, { target: { value: 'DMZ' } })
-    fireEvent.click(screen.getByRole('button', { name: /^create group$/i }))
-    expect(createGroup).toHaveBeenCalledWith(['n1', 'n2'], 'DMZ')
-  })
-
-  it('uses default name "Group" when input is empty', async () => {
-    const createGroup = vi.fn()
-    const n1 = makeNode('n1')
-    const n2 = makeNode('n2')
-    setupStore({ nodes: [n1, n2], selectedNodeId: null, selectedNodeIds: ['n1', 'n2'], createGroup })
-    renderPanel()
-    fireEvent.click(screen.getByRole('button', { name: /create group/i }))
-    await screen.findByPlaceholderText(/group name/i)
-    fireEvent.click(screen.getByRole('button', { name: /^create group$/i }))
-    expect(createGroup).toHaveBeenCalledWith(['n1', 'n2'], 'Group')
-  })
-
-  it('includes groupRect (zone) nodes in multi-select count', () => {
-    const n1 = makeNode('n1')
-    const gr = makeNode('gr1', { data: { label: 'Zone', type: 'groupRect', status: 'unknown', services: [] } })
-    setupStore({ nodes: [n1, gr], selectedNodeId: null, selectedNodeIds: ['n1', 'gr1'] })
-    renderPanel()
-    // groupRect included → 2 nodes selected → multi-select panel shown
-    expect(screen.getByText('2 nodes selected')).toBeDefined()
-  })
-})
-
-describe('GroupDetailPanel', () => {
-  beforeEach(() => vi.clearAllMocks())
-
-  it('renders group name and members heading', () => {
-    const group = makeGroupNode()
-    const child = makeNode('c1', { parentId: 'g1', data: { label: 'Router', type: 'router', status: 'online', services: [] } })
-    setupStore({ nodes: [group, child], selectedNodeId: 'g1', selectedNodeIds: ['g1'] })
-    renderPanel()
-    expect(screen.getByText('My Group')).toBeDefined()
-    expect(screen.getByText('Members')).toBeDefined()
-  })
-
-  it('lists children with their labels', () => {
-    const group = makeGroupNode()
-    const c1 = makeNode('c1', { parentId: 'g1', data: { label: 'My Router', type: 'router', status: 'online', services: [] } })
-    const c2 = makeNode('c2', { parentId: 'g1', data: { label: 'My NAS', type: 'nas', status: 'offline', services: [] } })
-    setupStore({ nodes: [group, c1, c2], selectedNodeId: 'g1', selectedNodeIds: ['g1'] })
-    renderPanel()
-    expect(screen.getByText('My Router')).toBeDefined()
-    expect(screen.getByText('My NAS')).toBeDefined()
-  })
-
-  it('shows online/offline count in status summary', () => {
-    const group = makeGroupNode()
-    const c1 = makeNode('c1', { parentId: 'g1', data: { label: 'A', type: 'server', status: 'online', services: [] } })
-    const c2 = makeNode('c2', { parentId: 'g1', data: { label: 'B', type: 'server', status: 'offline', services: [] } })
-    setupStore({ nodes: [group, c1, c2], selectedNodeId: 'g1', selectedNodeIds: ['g1'] })
-    renderPanel()
-    expect(screen.getByText(/1 online/)).toBeDefined()
-    expect(screen.getByText(/1 offline/)).toBeDefined()
-  })
-
-  it('shows Ungroup button', () => {
-    const group = makeGroupNode()
-    setupStore({ nodes: [group], selectedNodeId: 'g1', selectedNodeIds: ['g1'] })
-    renderPanel()
-    expect(screen.getByRole('button', { name: /ungroup/i })).toBeDefined()
-  })
-
-  it('calls ungroup after confirm', () => {
-    const ungroup = vi.fn()
-    vi.spyOn(window, 'confirm').mockReturnValue(true)
-    const group = makeGroupNode()
-    setupStore({ nodes: [group], selectedNodeId: 'g1', selectedNodeIds: ['g1'], ungroup })
-    renderPanel()
-    fireEvent.click(screen.getByRole('button', { name: /ungroup/i }))
-    expect(ungroup).toHaveBeenCalledWith('g1')
-  })
-
-  it('does not call ungroup when confirm is cancelled', () => {
-    const ungroup = vi.fn()
-    vi.spyOn(window, 'confirm').mockReturnValue(false)
-    const group = makeGroupNode()
-    setupStore({ nodes: [group], selectedNodeId: 'g1', selectedNodeIds: ['g1'], ungroup })
-    renderPanel()
-    fireEvent.click(screen.getByRole('button', { name: /ungroup/i }))
-    expect(ungroup).not.toHaveBeenCalled()
-  })
-
-  it('shows "Hide border & title" when show_border is true', () => {
-    const group = makeGroupNode('g1', 'G', true)
-    setupStore({ nodes: [group], selectedNodeId: 'g1', selectedNodeIds: ['g1'] })
-    renderPanel()
-    expect(screen.getByText(/hide border/i)).toBeDefined()
-  })
-
-  it('shows "Show border & title" when show_border is false', () => {
-    const group = makeGroupNode('g1', 'G', false)
-    setupStore({ nodes: [group], selectedNodeId: 'g1', selectedNodeIds: ['g1'] })
-    renderPanel()
-    expect(screen.getByText(/show border/i)).toBeDefined()
-  })
-
-  it('calls updateNode to toggle show_border off', () => {
-    const updateNode = vi.fn()
-    const group = makeGroupNode('g1', 'G', true)
-    setupStore({ nodes: [group], selectedNodeId: 'g1', selectedNodeIds: ['g1'], updateNode })
-    renderPanel()
-    fireEvent.click(screen.getByText(/hide border/i))
-    expect(updateNode).toHaveBeenCalledWith('g1', expect.objectContaining({
-      custom_colors: expect.objectContaining({ show_border: false }),
-    }))
-  })
-
-  it('calls setSelectedNode when a child node is clicked', () => {
-    const setSelectedNode = vi.fn()
-    const group = makeGroupNode()
-    const child = makeNode('c1', { parentId: 'g1', data: { label: 'Child Node Alpha', type: 'server', status: 'online', services: [] } })
-    setupStore({ nodes: [group, child], selectedNodeId: 'g1', selectedNodeIds: ['g1'], setSelectedNode })
-    renderPanel()
-    fireEvent.click(screen.getByText('Child Node Alpha'))
-    expect(setSelectedNode).toHaveBeenCalledWith('c1')
-  })
-})

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

@@ -1,155 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { Sidebar } from '../Sidebar'
-import * as canvasStore from '@/stores/canvasStore'
-import { TooltipProvider } from '@/components/ui/tooltip'
-
-vi.mock('@/stores/canvasStore')
-vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
-vi.mock('@/api/client', () => ({
-  scanApi: {
-    trigger: vi.fn(),
-    pending: vi.fn().mockResolvedValue({ data: [] }),
-    hidden: vi.fn().mockResolvedValue({ data: [] }),
-    runs: vi.fn().mockResolvedValue({ data: [] }),
-    stop: vi.fn(),
-    getConfig: vi.fn().mockResolvedValue({ data: { ranges: [] } }),
-  },
-  settingsApi: { get: vi.fn(), save: vi.fn() },
-}))
-
-import { scanApi } from '@/api/client'
-import { toast } from 'sonner'
-
-const RUNNING_RUN = {
-  id: 'run-1',
-  status: 'running',
-  ranges: ['192.168.1.0/24'],
-  devices_found: 2,
-  started_at: new Date().toISOString(),
-  finished_at: null,
-  error: null,
-}
-
-const DONE_RUN = {
-  id: 'run-2',
-  status: 'done',
-  ranges: ['192.168.1.0/24'],
-  devices_found: 3,
-  started_at: new Date().toISOString(),
-  finished_at: new Date().toISOString(),
-  error: null,
-}
-
-const CANCELLED_RUN = {
-  id: 'run-3',
-  status: 'cancelled',
-  ranges: ['192.168.1.0/24'],
-  devices_found: 1,
-  started_at: new Date().toISOString(),
-  finished_at: new Date().toISOString(),
-  error: null,
-}
-
-function renderSidebar() {
-  vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-    nodes: [],
-    hasUnsavedChanges: false,
-    hideIp: false,
-    toggleHideIp: vi.fn(),
-    addNode: vi.fn(),
-    scanEventTs: 0,
-  } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
-  return render(
-    <TooltipProvider>
-      <Sidebar
-        onAddNode={vi.fn()}
-        onAddGroupRect={vi.fn()}
-        onScan={vi.fn()}
-        onSave={vi.fn()}
-        onNodeApproved={vi.fn()}
-      />
-    </TooltipProvider>
-  )
-}
-
-async function openHistory() {
-  fireEvent.click(screen.getByRole('button', { name: 'Scan History' }))
-  // Wait for runs to load
-  await waitFor(() => expect(scanApi.runs).toHaveBeenCalled())
-}
-
-describe('ScanHistoryPanel — stop scan', () => {
-  beforeEach(() => {
-    vi.mocked(toast.success).mockReset()
-    vi.mocked(toast.error).mockReset()
-    vi.mocked(scanApi.stop).mockReset()
-    vi.mocked(scanApi.runs).mockResolvedValue({ data: [] } as never)
-  })
-
-  it('shows stop button only for running scans', async () => {
-    vi.mocked(scanApi.runs).mockResolvedValue({ data: [RUNNING_RUN, DONE_RUN] } as never)
-    renderSidebar()
-    await openHistory()
-
-    await waitFor(() => expect(screen.getByText('running')).toBeDefined())
-
-    // Exactly one stop button rendered (for the running scan only)
-    const stopButtons = screen.getAllByRole('button', { name: 'Stop scan' })
-    expect(stopButtons).toHaveLength(1)
-  })
-
-  it('calls scanApi.stop with the correct run ID on click', async () => {
-    vi.mocked(scanApi.stop).mockResolvedValue({ data: { stopping: true } } as never)
-    vi.mocked(scanApi.runs).mockResolvedValue({ data: [RUNNING_RUN] } as never)
-    renderSidebar()
-    await openHistory()
-
-    const stopBtn = await screen.findByRole('button', { name: 'Stop scan' })
-    fireEvent.click(stopBtn)
-
-    await waitFor(() => {
-      expect(scanApi.stop).toHaveBeenCalledWith('run-1')
-    })
-  })
-
-  it('shows success toast when stop succeeds', async () => {
-    vi.mocked(scanApi.stop).mockResolvedValue({ data: { stopping: true } } as never)
-    vi.mocked(scanApi.runs).mockResolvedValue({ data: [RUNNING_RUN] } as never)
-    renderSidebar()
-    await openHistory()
-
-    const stopBtn = await screen.findByRole('button', { name: 'Stop scan' })
-    fireEvent.click(stopBtn)
-
-    await waitFor(() => {
-      expect(toast.success).toHaveBeenCalledWith('Scan stop requested')
-    })
-  })
-
-  it('shows error toast when stop fails', async () => {
-    vi.mocked(scanApi.stop).mockRejectedValue(new Error('network'))
-    vi.mocked(scanApi.runs).mockResolvedValue({ data: [RUNNING_RUN] } as never)
-    renderSidebar()
-    await openHistory()
-
-    const stopBtn = await screen.findByRole('button', { name: 'Stop scan' })
-    fireEvent.click(stopBtn)
-
-    await waitFor(() => {
-      expect(toast.error).toHaveBeenCalledWith('Failed to stop scan')
-    })
-  })
-
-  it('renders cancelled status without stop button or spinner', async () => {
-    vi.mocked(scanApi.runs).mockResolvedValue({ data: [CANCELLED_RUN] } as never)
-    renderSidebar()
-    await openHistory()
-
-    await waitFor(() => expect(screen.getByText('cancelled')).toBeDefined())
-
-    // No stop button
-    expect(screen.queryByRole('button', { name: 'Stop scan' })).toBeNull()
-  })
-})

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

@@ -1,104 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { Sidebar } from '../Sidebar'
-import * as canvasStore from '@/stores/canvasStore'
-import { TooltipProvider } from '@/components/ui/tooltip'
-
-vi.mock('@/stores/canvasStore')
-vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
-vi.mock('@/api/client', () => ({
-  scanApi: {
-    trigger: vi.fn(),
-    pending: vi.fn().mockResolvedValue({ data: [] }),
-    hidden: vi.fn().mockResolvedValue({ data: [] }),
-    runs: vi.fn().mockResolvedValue({ data: [] }),
-    getConfig: vi.fn().mockResolvedValue({ data: { ranges: [] } }),
-  },
-  settingsApi: {
-    get: vi.fn(),
-    save: vi.fn(),
-  },
-}))
-
-import { settingsApi } from '@/api/client'
-import { toast } from 'sonner'
-
-function renderSidebar() {
-  vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-    nodes: [],
-    hasUnsavedChanges: false,
-    hideIp: false,
-    toggleHideIp: vi.fn(),
-    addNode: vi.fn(),
-    scanEventTs: 0,
-  } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
-
-  return render(
-    <TooltipProvider>
-      <Sidebar
-        onAddNode={vi.fn()}
-        onAddGroupRect={vi.fn()}
-        onScan={vi.fn()}
-        onSave={vi.fn()}
-        onNodeApproved={vi.fn()}
-      />
-    </TooltipProvider>
-  )
-}
-
-describe('SettingsPanel', () => {
-  beforeEach(() => {
-    vi.mocked(settingsApi.get).mockResolvedValue({ data: { interval_seconds: 60 } } as never)
-    vi.mocked(settingsApi.save).mockResolvedValue({ data: { interval_seconds: 60 } } as never)
-    vi.mocked(toast.success).mockReset()
-    vi.mocked(toast.error).mockReset()
-  })
-
-  it('opens when Settings item is clicked', async () => {
-    renderSidebar()
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    await waitFor(() => {
-      expect(settingsApi.get).toHaveBeenCalledOnce()
-    })
-    expect(screen.getByText('Status check interval (s)')).toBeDefined()
-  })
-
-  it('displays interval loaded from API', async () => {
-    vi.mocked(settingsApi.get).mockResolvedValue({ data: { interval_seconds: 120 } } as never)
-    renderSidebar()
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    const input = await screen.findByDisplayValue('120')
-    expect(input).toBeDefined()
-  })
-
-  it('saves interval via settingsApi on Save click', async () => {
-    renderSidebar()
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    const input = await screen.findByDisplayValue('60')
-    fireEvent.change(input, { target: { value: '180' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
-    await waitFor(() => {
-      expect(settingsApi.save).toHaveBeenCalledWith({ interval_seconds: 180 })
-      expect(toast.success).toHaveBeenCalledWith('Settings saved')
-    })
-  })
-
-  it('shows error toast when save fails', async () => {
-    vi.mocked(settingsApi.save).mockRejectedValue(new Error('network'))
-    renderSidebar()
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    await screen.findByDisplayValue('60')
-    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
-    await waitFor(() => {
-      expect(toast.error).toHaveBeenCalledWith('Failed to save settings')
-    })
-  })
-
-  it('closes panel when Settings is clicked again', async () => {
-    renderSidebar()
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    await screen.findByText('Status check interval (s)')
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    expect(screen.queryByText('Status check interval (s)')).toBeNull()
-  })
-})

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

@@ -1,261 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { Sidebar } from '../Sidebar'
-import { useCanvasStore } from '@/stores/canvasStore'
-import type { Node } from '@xyflow/react'
-import type { NodeData } from '@/types'
-
-// ── Mocks ────────────────────────────────────────────────────────────────────
-
-vi.mock('@/stores/canvasStore')
-
-vi.mock('@/api/client', () => ({
-  scanApi: {
-    trigger: vi.fn().mockResolvedValue({}),
-    pending: vi.fn().mockResolvedValue({ data: [] }),
-    hidden: vi.fn().mockResolvedValue({ data: [] }),
-    runs: vi.fn().mockResolvedValue({ data: [] }),
-    stop: vi.fn().mockResolvedValue({}),
-  },
-  settingsApi: {
-    get: vi.fn().mockResolvedValue({ data: { interval_seconds: 60 } }),
-    save: vi.fn().mockResolvedValue({ data: { interval_seconds: 60 } }),
-  },
-}))
-
-vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
-
-vi.mock('@/components/ui/Logo', () => ({
-  Logo: ({ showText }: { showText: boolean }) => (
-    <div data-testid="logo" data-show-text={showText} />
-  ),
-}))
-
-vi.mock('@/components/ui/tooltip', () => ({
-  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  TooltipTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  TooltipContent: () => null,
-}))
-
-vi.mock('@/components/modals/PendingDeviceModal', () => ({
-  PendingDeviceModal: () => null,
-}))
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-const makeNode = (id: string, status: NodeData['status'], type: NodeData['type'] = 'server'): Node<NodeData> => ({
-  id,
-  type,
-  position: { x: 0, y: 0 },
-  data: { label: id, type, status, services: [] },
-})
-
-const mockToggleHideIp = vi.fn()
-
-function mockStore(overrides: Partial<ReturnType<typeof useCanvasStore>> = {}) {
-  vi.mocked(useCanvasStore).mockReturnValue({
-    nodes: [],
-    hasUnsavedChanges: false,
-    hideIp: false,
-    toggleHideIp: mockToggleHideIp,
-    addNode: vi.fn(),
-    scanEventTs: 0,
-    ...overrides,
-  } as ReturnType<typeof useCanvasStore>)
-}
-
-const defaultProps = {
-  onAddNode: vi.fn(),
-  onAddGroupRect: vi.fn(),
-  onScan: vi.fn(),
-  onSave: vi.fn(),
-  onNodeApproved: vi.fn(),
-}
-
-// ── Tests ─────────────────────────────────────────────────────────────────────
-
-describe('Sidebar', () => {
-  beforeEach(() => {
-    mockStore()
-    vi.clearAllMocks()
-  })
-
-  // ── Render ─────────────────────────────────────────────────────────────────
-
-  it('renders logo and nav items', () => {
-    render(<Sidebar {...defaultProps} />)
-    expect(screen.getByTestId('logo')).toBeInTheDocument()
-    expect(screen.getByText('Add Node')).toBeInTheDocument()
-    expect(screen.getByText('Save Canvas')).toBeInTheDocument()
-    expect(screen.getByText('Scan Network')).toBeInTheDocument()
-  })
-
-  it('shows all view nav items', () => {
-    render(<Sidebar {...defaultProps} />)
-    expect(screen.getByText('Canvas')).toBeInTheDocument()
-    expect(screen.getByText('Pending Devices')).toBeInTheDocument()
-    expect(screen.getByText('Hidden Devices')).toBeInTheDocument()
-    expect(screen.getByText('Scan History')).toBeInTheDocument()
-  })
-
-  // ── Stats ──────────────────────────────────────────────────────────────────
-
-  it('displays total / online / offline counts from store', () => {
-    mockStore({
-      nodes: [
-        makeNode('n1', 'online'),
-        makeNode('n2', 'online'),
-        makeNode('n3', 'offline'),
-        makeNode('n4', 'unknown'),
-      ],
-    })
-    render(<Sidebar {...defaultProps} />)
-    // Total (excludes groupRect)
-    expect(screen.getByText('4')).toBeInTheDocument()
-    // Online
-    expect(screen.getByText('2')).toBeInTheDocument()
-    // Offline
-    expect(screen.getByText('1')).toBeInTheDocument()
-  })
-
-  it('excludes groupRect nodes from stats', () => {
-    mockStore({
-      nodes: [
-        makeNode('n1', 'unknown'),  // 1 real node, not online/offline
-        makeNode('zone', 'unknown', 'groupRect'),
-      ],
-    })
-    render(<Sidebar {...defaultProps} />)
-    // Total row shows 1 (groupRect excluded), online/offline both 0
-    const totalRow = screen.getByText('Total').closest('div')!
-    expect(totalRow).toHaveTextContent('1')
-    expect(screen.getAllByText('0')).toHaveLength(2) // online=0, offline=0
-  })
-
-  // ── Collapse ───────────────────────────────────────────────────────────────
-
-  it('collapses sidebar on toggle button click', () => {
-    render(<Sidebar {...defaultProps} />)
-    const aside = screen.getByRole('complementary')
-    expect(aside).toHaveStyle({ width: '220px' })
-
-    const toggle = aside.querySelector('button')!
-    fireEvent.click(toggle)
-    expect(aside).toHaveStyle({ width: '48px' })
-  })
-
-  it('hides label text when collapsed', () => {
-    render(<Sidebar {...defaultProps} />)
-    const aside = screen.getByRole('complementary')
-    const toggle = aside.querySelector('button')!
-    fireEvent.click(toggle)
-    expect(screen.queryByText('Add Node')).not.toBeInTheDocument()
-  })
-
-  it('hides stats footer when collapsed', () => {
-    render(<Sidebar {...defaultProps} />)
-    expect(screen.getByText('Total')).toBeInTheDocument()
-    const toggle = screen.getByRole('complementary').querySelector('button')!
-    fireEvent.click(toggle)
-    expect(screen.queryByText('Total')).not.toBeInTheDocument()
-  })
-
-  it('shows logo with showText=false when collapsed', () => {
-    render(<Sidebar {...defaultProps} />)
-    const logo = screen.getByTestId('logo')
-    expect(logo).toHaveAttribute('data-show-text', 'true')
-    const toggle = screen.getByRole('complementary').querySelector('button')!
-    fireEvent.click(toggle)
-    expect(logo).toHaveAttribute('data-show-text', 'false')
-  })
-
-  // ── Action callbacks ───────────────────────────────────────────────────────
-
-  it('calls onAddNode when Add Node is clicked', () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Add Node'))
-    expect(defaultProps.onAddNode).toHaveBeenCalledOnce()
-  })
-
-  it('calls onAddGroupRect when Add Zone is clicked', () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Add Zone'))
-    expect(defaultProps.onAddGroupRect).toHaveBeenCalledOnce()
-  })
-
-  it('calls onSave when Save Canvas is clicked', () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Save Canvas'))
-    expect(defaultProps.onSave).toHaveBeenCalledOnce()
-  })
-
-  it('calls toggleHideIp when Hide IPs is clicked', () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Hide IPs'))
-    expect(mockToggleHideIp).toHaveBeenCalledOnce()
-  })
-
-  it('shows Show IPs label when hideIp is true', () => {
-    mockStore({ hideIp: true })
-    render(<Sidebar {...defaultProps} />)
-    expect(screen.getByText('Show IPs')).toBeInTheDocument()
-  })
-
-  // ── Unsaved changes badge ──────────────────────────────────────────────────
-
-  it('shows unsaved badge dot on Save Canvas when hasUnsavedChanges', () => {
-    mockStore({ hasUnsavedChanges: true })
-    render(<Sidebar {...defaultProps} />)
-    // The badge is a span sibling of the Save Canvas button icon
-    const saveBtn = screen.getByText('Save Canvas').closest('button')!
-    const badge = saveBtn.querySelector('span.rounded-full')
-    expect(badge).toBeInTheDocument()
-  })
-
-  it('does not show unsaved badge when no changes', () => {
-    mockStore({ hasUnsavedChanges: false })
-    render(<Sidebar {...defaultProps} />)
-    const saveBtn = screen.getByText('Save Canvas').closest('button')!
-    const badge = saveBtn.querySelector('span.rounded-full')
-    expect(badge).not.toBeInTheDocument()
-  })
-
-  // ── Scan action ────────────────────────────────────────────────────────────
-
-  it('calls onScan prop when Scan Network is clicked (scan trigger moved to ScanConfigModal)', () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Scan Network'))
-    expect(defaultProps.onScan).toHaveBeenCalledOnce()
-  })
-
-  // ── Navigation ─────────────────────────────────────────────────────────────
-
-  it('shows Pending panel when Pending Devices nav item is clicked', async () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Pending Devices'))
-    await waitFor(() => expect(screen.getByText('No pending devices')).toBeInTheDocument())
-  })
-
-  it('shows Hidden panel when Hidden Devices nav item is clicked', async () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Hidden Devices'))
-    await waitFor(() => expect(screen.getByText('No hidden devices')).toBeInTheDocument())
-  })
-
-  it('shows History panel when Scan History nav item is clicked', async () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Scan History'))
-    await waitFor(() => expect(screen.getByText('No scans yet')).toBeInTheDocument())
-  })
-
-  it('toggles Settings panel on Settings click', async () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Settings'))
-    await waitFor(() =>
-      expect(screen.getByText('Status check interval (s)')).toBeInTheDocument(),
-    )
-    // Click the nav button again to close (use role to avoid matching the panel heading)
-    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
-    expect(screen.queryByText('Status check interval (s)')).not.toBeInTheDocument()
-  })
-})

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

@@ -1,121 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
-import { Sidebar } from '../Sidebar'
-import { useCanvasStore } from '@/stores/canvasStore'
-
-// ── Mocks ─────────────────────────────────────────────────────────────────────
-
-vi.mock('@/stores/canvasStore')
-
-vi.mock('@/api/client', () => ({
-  scanApi: {
-    trigger: vi.fn().mockResolvedValue({}),
-    pending: vi.fn().mockResolvedValue({ data: [] }),
-    hidden: vi.fn().mockResolvedValue({ data: [] }),
-    runs: vi.fn().mockResolvedValue({ data: [] }),
-    stop: vi.fn().mockResolvedValue({}),
-    getConfig: vi.fn().mockResolvedValue({ data: { ranges: [] } }),
-  },
-  settingsApi: {
-    get: vi.fn().mockResolvedValue({ data: { interval_seconds: 60 } }),
-    save: vi.fn().mockResolvedValue({}),
-  },
-}))
-
-vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
-vi.mock('@/components/ui/Logo', () => ({ Logo: () => null }))
-vi.mock('@/components/ui/tooltip', () => ({
-  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  TooltipTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  TooltipContent: () => null,
-}))
-vi.mock('@/components/modals/PendingDeviceModal', () => ({ PendingDeviceModal: () => null }))
-vi.mock('@/components/modals/StatusTimelineModal', () => ({ StatusTimelineModal: () => null }))
-
-vi.mock('@/hooks/useLatestRelease', () => ({
-  useLatestRelease: vi.fn(),
-}))
-
-import { useLatestRelease } from '@/hooks/useLatestRelease'
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function renderSidebar() {
-  vi.mocked(useCanvasStore).mockReturnValue({
-    nodes: [],
-    hasUnsavedChanges: false,
-    hideIp: false,
-    toggleHideIp: vi.fn(),
-    addNode: vi.fn(),
-    scanEventTs: 0,
-  } as unknown as ReturnType<typeof useCanvasStore>)
-
-  return render(
-    <Sidebar
-      onAddNode={vi.fn()}
-      onAddGroupRect={vi.fn()}
-      onScan={vi.fn()}
-      onSave={vi.fn()}
-      onNodeApproved={vi.fn()}
-    />,
-  )
-}
-
-// ── Tests ─────────────────────────────────────────────────────────────────────
-
-describe('VersionBadge', () => {
-  beforeEach(() => {
-    vi.mocked(useLatestRelease).mockReturnValue({ latest: null, hasUpdate: false })
-  })
-
-  it('displays the current app version', () => {
-    renderSidebar()
-    expect(screen.getByText(`v${__APP_VERSION__}`)).toBeInTheDocument()
-  })
-
-  it('links current version to its GitHub release page', () => {
-    renderSidebar()
-    const link = screen.getByText(`v${__APP_VERSION__}`).closest('a')
-    expect(link).toHaveAttribute(
-      'href',
-      `https://github.com/Pouzor/homelable/releases/tag/v${__APP_VERSION__}`,
-    )
-    expect(link).toHaveAttribute('target', '_blank')
-  })
-
-  it('does not show update badge when on latest version', () => {
-    renderSidebar()
-    expect(screen.queryByText(/available/)).not.toBeInTheDocument()
-  })
-
-  it('shows update badge when a newer version is available', async () => {
-    vi.mocked(useLatestRelease).mockReturnValue({
-      latest: { version: '9.9.9', url: 'https://github.com/Pouzor/homelable/releases/tag/v9.9.9' },
-      hasUpdate: true,
-    })
-    renderSidebar()
-    await waitFor(() => expect(screen.getByText('↑ v9.9.9 available')).toBeInTheDocument())
-  })
-
-  it('update badge links to the latest release URL', async () => {
-    vi.mocked(useLatestRelease).mockReturnValue({
-      latest: { version: '9.9.9', url: 'https://github.com/Pouzor/homelable/releases/tag/v9.9.9' },
-      hasUpdate: true,
-    })
-    renderSidebar()
-    await waitFor(() => {
-      const badge = screen.getByText('↑ v9.9.9 available').closest('a')
-      expect(badge).toHaveAttribute('href', 'https://github.com/Pouzor/homelable/releases/tag/v9.9.9')
-      expect(badge).toHaveAttribute('target', '_blank')
-    })
-  })
-
-  it('does not show update badge when hasUpdate is false even if latest exists', () => {
-    vi.mocked(useLatestRelease).mockReturnValue({
-      latest: { version: __APP_VERSION__, url: 'https://github.com' },
-      hasUpdate: false,
-    })
-    renderSidebar()
-    expect(screen.queryByText(/available/)).not.toBeInTheDocument()
-  })
-})

frontend/src/hooks/__tests__/useLatestRelease.test.ts

@@ -1,105 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { renderHook, waitFor } from '@testing-library/react'
-
-// Reset module between tests so the module-level cache is cleared
-async function freshHook() {
-  vi.resetModules()
-  const mod = await import('../useLatestRelease')
-  return mod.useLatestRelease
-}
-
-const CURRENT = '1.8.3'
-
-function mockFetch(payload: unknown, ok = true) {
-  vi.stubGlobal(
-    'fetch',
-    vi.fn().mockResolvedValue({
-      ok,
-      json: () => Promise.resolve(payload),
-    }),
-  )
-}
-
-describe('useLatestRelease', () => {
-  beforeEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('returns no update when latest version matches current', async () => {
-    mockFetch({ tag_name: 'v1.8.3', html_url: 'https://github.com/Pouzor/homelable/releases/tag/v1.8.3' })
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await waitFor(() => expect(result.current.latest).not.toBeNull())
-    expect(result.current.hasUpdate).toBe(false)
-  })
-
-  it('returns update when latest version is newer', async () => {
-    mockFetch({ tag_name: 'v1.9.0', html_url: 'https://github.com/Pouzor/homelable/releases/tag/v1.9.0' })
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await waitFor(() => expect(result.current.hasUpdate).toBe(true))
-    expect(result.current.latest?.version).toBe('1.9.0')
-    expect(result.current.latest?.url).toBe('https://github.com/Pouzor/homelable/releases/tag/v1.9.0')
-  })
-
-  it('strips leading v from tag_name', async () => {
-    mockFetch({ tag_name: 'v2.0.0', html_url: 'https://github.com/example' })
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await waitFor(() => expect(result.current.latest).not.toBeNull())
-    expect(result.current.latest?.version).toBe('2.0.0')
-  })
-
-  it('does not show update when API returns non-ok response', async () => {
-    mockFetch({ message: 'Not Found' }, false)
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await new Promise((r) => setTimeout(r, 50))
-    expect(result.current.hasUpdate).toBe(false)
-    expect(result.current.latest).toBeNull()
-  })
-
-  it('does not show update when API returns missing tag_name', async () => {
-    mockFetch({ html_url: 'https://github.com/example' })
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await new Promise((r) => setTimeout(r, 50))
-    expect(result.current.hasUpdate).toBe(false)
-  })
-
-  it('does not show update when API returns missing html_url', async () => {
-    mockFetch({ tag_name: 'v2.0.0' })
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await new Promise((r) => setTimeout(r, 50))
-    expect(result.current.hasUpdate).toBe(false)
-  })
-
-  it('does not show update when fetch throws', async () => {
-    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network error')))
-    const useLatestRelease = await freshHook()
-    const { result } = renderHook(() => useLatestRelease(CURRENT))
-    await new Promise((r) => setTimeout(r, 50))
-    expect(result.current.hasUpdate).toBe(false)
-  })
-
-  it('fetches only once when hook is mounted multiple times concurrently', async () => {
-    const fetchMock = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve({ tag_name: 'v1.8.3', html_url: 'https://github.com' }),
-    })
-    vi.stubGlobal('fetch', fetchMock)
-    const useLatestRelease = await freshHook()
-    // Mount all three before the fetch resolves — cache is set to 'pending' after first mount
-    const a = renderHook(() => useLatestRelease(CURRENT))
-    const b = renderHook(() => useLatestRelease(CURRENT))
-    const c = renderHook(() => useLatestRelease(CURRENT))
-    await waitFor(() => {
-      expect(a.result.current.latest).not.toBeNull()
-    })
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    // All hooks see the same result once cache resolves
-    expect(b.result.current.hasUpdate).toBe(false)
-    expect(c.result.current.hasUpdate).toBe(false)
-  })
-})

frontend/src/hooks/__tests__/useStatusPolling.test.ts

@@ -1,170 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { renderHook } from '@testing-library/react'
-import { useStatusPolling } from '../useStatusPolling'
-import { useCanvasStore } from '@/stores/canvasStore'
-import { useAuthStore } from '@/stores/authStore'
-
-vi.mock('@/stores/canvasStore')
-vi.mock('@/stores/authStore')
-
-const mockUpdateNode = vi.fn()
-const mockNotifyScanDeviceFound = vi.fn()
-
-class MockWebSocket {
-  static instances: MockWebSocket[] = []
-  url: string
-  onopen: (() => void) | null = null
-  onmessage: ((e: { data: string }) => void) | null = null
-  onerror: ((e: unknown) => void) | null = null
-  send = vi.fn()
-  close = vi.fn()
-
-  constructor(url: string) {
-    this.url = url
-    MockWebSocket.instances.push(this)
-  }
-}
-
-describe('useStatusPolling', () => {
-  beforeEach(() => {
-    MockWebSocket.instances = []
-    vi.stubGlobal('WebSocket', MockWebSocket)
-
-    vi.mocked(useCanvasStore).mockReturnValue({
-      updateNode: mockUpdateNode,
-      notifyScanDeviceFound: mockNotifyScanDeviceFound,
-    } as ReturnType<typeof useCanvasStore>)
-
-    vi.mocked(useAuthStore).mockReturnValue({
-      isAuthenticated: true,
-      token: 'test-token',
-    } as ReturnType<typeof useAuthStore>)
-
-    Object.defineProperty(window, 'location', {
-      value: { protocol: 'http:', host: 'localhost:5173' },
-      writable: true,
-    })
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    mockUpdateNode.mockClear()
-    mockNotifyScanDeviceFound.mockClear()
-  })
-
-  it('does not open WebSocket when not authenticated', () => {
-    vi.mocked(useAuthStore).mockReturnValue({
-      isAuthenticated: false,
-      token: null,
-    } as ReturnType<typeof useAuthStore>)
-    renderHook(() => useStatusPolling())
-    expect(MockWebSocket.instances).toHaveLength(0)
-  })
-
-  it('does not open WebSocket when token is missing', () => {
-    vi.mocked(useAuthStore).mockReturnValue({
-      isAuthenticated: true,
-      token: null,
-    } as ReturnType<typeof useAuthStore>)
-    renderHook(() => useStatusPolling())
-    expect(MockWebSocket.instances).toHaveLength(0)
-  })
-
-  it('connects to correct ws:// URL', () => {
-    renderHook(() => useStatusPolling())
-    expect(MockWebSocket.instances).toHaveLength(1)
-    expect(MockWebSocket.instances[0].url).toBe('ws://localhost:5173/api/v1/status/ws/status')
-  })
-
-  it('uses wss:// when page is served over https', () => {
-    Object.defineProperty(window, 'location', {
-      value: { protocol: 'https:', host: 'mylab.local' },
-      writable: true,
-    })
-    renderHook(() => useStatusPolling())
-    expect(MockWebSocket.instances[0].url).toMatch(/^wss:\/\//)
-  })
-
-  it('sends token as first message on open', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    ws.onopen?.()
-    expect(ws.send).toHaveBeenCalledWith(JSON.stringify({ token: 'test-token' }))
-  })
-
-  it('calls updateNode with correct data on status message', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    ws.onmessage?.({
-      data: JSON.stringify({
-        node_id: 'node-1',
-        status: 'online',
-        checked_at: '2024-01-01T12:00:00Z',
-        response_time_ms: 42,
-      }),
-    })
-    expect(mockUpdateNode).toHaveBeenCalledWith('node-1', {
-      status: 'online',
-      response_time_ms: 42,
-      last_seen: '2024-01-01T12:00:00Z',
-    })
-  })
-
-  it('sets last_seen to undefined when status is offline', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    ws.onmessage?.({
-      data: JSON.stringify({
-        node_id: 'node-1',
-        status: 'offline',
-        checked_at: '2024-01-01T12:00:00Z',
-      }),
-    })
-    expect(mockUpdateNode).toHaveBeenCalledWith('node-1', {
-      status: 'offline',
-      response_time_ms: undefined,
-      last_seen: undefined,
-    })
-  })
-
-  it('sets response_time_ms to undefined when null in message', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    ws.onmessage?.({
-      data: JSON.stringify({ node_id: 'node-1', status: 'online', response_time_ms: null }),
-    })
-    expect(mockUpdateNode).toHaveBeenCalledWith(
-      'node-1',
-      expect.objectContaining({ response_time_ms: undefined }),
-    )
-  })
-
-  it('calls notifyScanDeviceFound on scan_device_found message', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    ws.onmessage?.({ data: JSON.stringify({ type: 'scan_device_found' }) })
-    expect(mockNotifyScanDeviceFound).toHaveBeenCalledOnce()
-    expect(mockUpdateNode).not.toHaveBeenCalled()
-  })
-
-  it('ignores malformed JSON without throwing', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    expect(() => ws.onmessage?.({ data: 'not-valid-json{{' })).not.toThrow()
-    expect(mockUpdateNode).not.toHaveBeenCalled()
-  })
-
-  it('ignores messages with no node_id or status', () => {
-    renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    ws.onmessage?.({ data: JSON.stringify({ some: 'unknown-field' }) })
-    expect(mockUpdateNode).not.toHaveBeenCalled()
-  })
-
-  it('closes WebSocket on unmount', () => {
-    const { unmount } = renderHook(() => useStatusPolling())
-    const ws = MockWebSocket.instances[0]
-    unmount()
-    expect(ws.close).toHaveBeenCalledOnce()
-  })
-})

frontend/src/hooks/useLatestRelease.ts

@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react'
-
-interface ReleaseInfo {
-  version: string
-  url: string
-}
-
-let cache: ReleaseInfo | null | 'error' | 'pending' = null
-
-export function useLatestRelease(currentVersion: string) {
-  const [latest, setLatest] = useState<ReleaseInfo | null>(
-    cache && cache !== 'error' && cache !== 'pending' ? cache : null,
-  )
-
-  useEffect(() => {
-    if (cache !== null) return
-    cache = 'pending'
-    fetch('https://api.github.com/repos/Pouzor/homelable/releases/latest', {
-      headers: { Accept: 'application/vnd.github+json' },
-    })
-      .then((res) => {
-        if (!res.ok) { cache = 'error'; return }
-        return res.json()
-      })
-      .then((data) => {
-        if (!data || typeof data.tag_name !== 'string' || !data.html_url) {
-          cache = 'error'
-          return
-        }
-        const version = data.tag_name.replace(/^v/, '')
-        const info: ReleaseInfo = { version, url: data.html_url }
-        cache = info
-        setLatest(info)
-      })
-      .catch(() => {
-        cache = 'error'
-      })
-  }, [])
-
-  const hasUpdate = latest !== null && latest.version !== currentVersion
-  return { latest, hasUpdate }
-}

frontend/src/index.css

@@ -6,11 +6,6 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@keyframes homelable-basic-dash {
-  from { stroke-dashoffset: 10; }
-  to   { stroke-dashoffset: 0; }
-}
-
 /* Homelable dark theme — always dark */
 :root {
     --background: #0d1117;
@@ -116,15 +111,6 @@
     background-color: var(--surface-card) !important;
 }
 
-/* Transparent wrapper for container node types */
-.react-flow__node-proxmox,
-.react-flow__node-group {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-}
-
 /* Mono font utility */
 .font-mono {
     font-family: 'JetBrains Mono', monospace;

frontend/src/main.tsx

@@ -2,12 +2,9 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import LiveView from './components/LiveView.tsx'
-
-const isLiveView = window.location.pathname === '/view'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    {isLiveView ? <LiveView /> : <App />}
+    <App />
   </StrictMode>,
 )

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

@@ -25,7 +25,6 @@ describe('canvasStore', () => {
       edges: [],
       hasUnsavedChanges: false,
       selectedNodeId: null,
-      selectedNodeIds: [],
       editingGroupRectId: null,
       past: [],
       future: [],
@@ -49,21 +48,6 @@ describe('canvasStore', () => {
     expect(hasUnsavedChanges).toBe(true)
   })
 
-  it('addNode nests under parent only when parent is in container mode', () => {
-    const parent = { ...makeNode('p1', { container_mode: false }), position: { x: 100, y: 100 } }
-    const child = { ...makeNode('c1', { parent_id: 'p1' }), position: { x: 150, y: 180 } }
-    useCanvasStore.getState().addNode(parent)
-    useCanvasStore.getState().addNode(child)
-    const childNode = useCanvasStore.getState().nodes.find((n) => n.id === 'c1')
-    expect(childNode?.parentId).toBeUndefined()
-
-    useCanvasStore.getState().updateNode('p1', { container_mode: true })
-    useCanvasStore.getState().setProxmoxContainerMode('p1', true)
-    const nested = useCanvasStore.getState().nodes.find((n) => n.id === 'c1')
-    expect(nested?.parentId).toBe('p1')
-    expect(nested?.extent).toBe('parent')
-  })
-
   it('updateNode updates data fields', () => {
     useCanvasStore.getState().addNode(makeNode('n1', { label: 'old' }))
     useCanvasStore.getState().updateNode('n1', { label: 'new', ip: '10.0.0.1' })
@@ -72,57 +56,6 @@ describe('canvasStore', () => {
     expect(node?.data.ip).toBe('10.0.0.1')
   })
 
-  it('updateNode setting parent_id on container-mode proxmox sets parentId and relative position', () => {
-    const proxmox = { ...makeNode('px1', { type: 'proxmox', container_mode: true }), position: { x: 100, y: 100 } }
-    const lxc = { ...makeNode('lxc1', { type: 'lxc' }), position: { x: 160, y: 180 } }
-    useCanvasStore.getState().addNode(proxmox)
-    useCanvasStore.getState().addNode(lxc)
-    useCanvasStore.getState().updateNode('lxc1', { parent_id: 'px1' })
-    const node = useCanvasStore.getState().nodes.find((n) => n.id === 'lxc1')
-    expect(node?.parentId).toBe('px1')
-    expect(node?.extent).toBe('parent')
-    // Position should be relative to parent (160-100=60, 180-100=80)
-    expect(node?.position.x).toBe(60)
-    expect(node?.position.y).toBe(80)
-  })
-
-  it('updateNode setting parent_id on non-container proxmox does NOT set React Flow parentId', () => {
-    const proxmox = { ...makeNode('px1', { type: 'proxmox', container_mode: false }), position: { x: 100, y: 100 } }
-    const lxc = { ...makeNode('lxc1', { type: 'lxc' }), position: { x: 160, y: 180 } }
-    useCanvasStore.getState().addNode(proxmox)
-    useCanvasStore.getState().addNode(lxc)
-    useCanvasStore.getState().updateNode('lxc1', { parent_id: 'px1' })
-    const node = useCanvasStore.getState().nodes.find((n) => n.id === 'lxc1')
-    expect(node?.parentId).toBeUndefined()
-    expect(node?.extent).toBeUndefined()
-  })
-
-  it('updateNode clearing parent_id converts position to absolute and clears parentId', () => {
-    const proxmox = { ...makeNode('px1', { type: 'proxmox', container_mode: true }), position: { x: 100, y: 100 } }
-    const lxc = { ...makeNode('lxc1', { type: 'lxc', parent_id: 'px1' }), position: { x: 130, y: 140 }, parentId: 'px1', extent: 'parent' as const }
-    useCanvasStore.getState().addNode(proxmox)
-    useCanvasStore.getState().addNode(lxc)
-    useCanvasStore.getState().updateNode('lxc1', { parent_id: undefined })
-    const node = useCanvasStore.getState().nodes.find((n) => n.id === 'lxc1')
-    expect(node?.parentId).toBeUndefined()
-    expect(node?.extent).toBeUndefined()
-    // Position should be absolute (100+30=130, 100+40=140)
-    expect(node?.position.x).toBe(130)
-    expect(node?.position.y).toBe(140)
-  })
-
-  it('updateNode with parent_id puts parents before children in array', () => {
-    const proxmox = { ...makeNode('px1', { type: 'proxmox', container_mode: true }), position: { x: 0, y: 0 } }
-    const lxc = { ...makeNode('lxc1', { type: 'lxc' }), position: { x: 10, y: 10 } }
-    useCanvasStore.getState().addNode(proxmox)
-    useCanvasStore.getState().addNode(lxc)
-    useCanvasStore.getState().updateNode('lxc1', { parent_id: 'px1' })
-    const { nodes } = useCanvasStore.getState()
-    const pxIdx = nodes.findIndex((n) => n.id === 'px1')
-    const lxcIdx = nodes.findIndex((n) => n.id === 'lxc1')
-    expect(pxIdx).toBeLessThan(lxcIdx)
-  })
-
   it('deleteNode removes node and its connected edges', () => {
     const store = useCanvasStore.getState()
     store.addNode(makeNode('n1'))
@@ -165,32 +98,18 @@ describe('canvasStore', () => {
     expect(useCanvasStore.getState().selectedNodeId).toBeNull()
   })
 
-  it('onNodesChange marks unsaved for position changes', () => {
-    useCanvasStore.getState().addNode(makeNode('n1'))
-    useCanvasStore.getState().markSaved()
-    useCanvasStore.getState().onNodesChange([{ type: 'position', id: 'n1', dragging: false }])
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
-  })
-
-  it('onNodesChange does not mark unsaved for select-only changes', () => {
+  it('onNodesChange marks unsaved', () => {
     useCanvasStore.getState().addNode(makeNode('n1'))
     useCanvasStore.getState().markSaved()
     useCanvasStore.getState().onNodesChange([{ type: 'select', id: 'n1', selected: true }])
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(false)
-  })
-
-  it('onEdgesChange marks unsaved for remove changes', () => {
-    useCanvasStore.setState((s) => ({ edges: [...s.edges, makeEdge('e1', 'n1', 'n2')] }))
-    useCanvasStore.getState().markSaved()
-    useCanvasStore.getState().onEdgesChange([{ type: 'remove', id: 'e1' }])
     expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
   })
 
-  it('onEdgesChange does not mark unsaved for select-only changes', () => {
+  it('onEdgesChange marks unsaved', () => {
     useCanvasStore.setState((s) => ({ edges: [...s.edges, makeEdge('e1', 'n1', 'n2')] }))
     useCanvasStore.getState().markSaved()
     useCanvasStore.getState().onEdgesChange([{ type: 'select', id: 'e1', selected: true }])
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(false)
+    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
   })
 
   it('onConnect adds an edge between two nodes', () => {
@@ -211,13 +130,6 @@ describe('canvasStore', () => {
     expect(edges[0].data?.label).toBe('uplink')
   })
 
-  it('onConnect preserves animated from edge data', () => {
-    const conn = Object.assign({ source: 'n1', target: 'n2', sourceHandle: null, targetHandle: null }, { type: 'ethernet', animated: 'snake' })
-    useCanvasStore.getState().onConnect(conn)
-    const { edges } = useCanvasStore.getState()
-    expect(edges[0].data?.animated).toBe('snake')
-  })
-
   it('onConnect preserves sourceHandle and targetHandle for cluster edges', () => {
     const conn = Object.assign({ source: 'n1', target: 'n2', sourceHandle: 'cluster-right', targetHandle: 'cluster-left' }, { type: 'cluster' })
     useCanvasStore.getState().onConnect(conn)
@@ -228,195 +140,14 @@ describe('canvasStore', () => {
     expect(edges[0].type).toBe('cluster')
   })
 
-  it('deleteNode also removes children with matching parentId', () => {
-    useCanvasStore.getState().addNode(makeNode('parent', { container_mode: true }))
-    useCanvasStore.getState().addNode(makeNode('child', { parent_id: 'parent' }))
-    useCanvasStore.getState().deleteNode('parent')
-    const { nodes } = useCanvasStore.getState()
-    expect(nodes.find((n) => n.id === 'parent')).toBeUndefined()
-    expect(nodes.find((n) => n.id === 'child')).toBeUndefined()
-  })
-
   it('addNode with parent_id sets parentId and extent', () => {
-    useCanvasStore.getState().addNode(makeNode('parent', { container_mode: true }))
+    useCanvasStore.getState().addNode(makeNode('parent'))
     useCanvasStore.getState().addNode(makeNode('child', { parent_id: 'parent' }))
     const child = useCanvasStore.getState().nodes.find((n) => n.id === 'child')
     expect(child?.parentId).toBe('parent')
     expect(child?.extent).toBe('parent')
   })
 
-  // ── selectedNodeIds ───────────────────────────────────────────────────────
-
-  it('selectedNodeIds starts empty', () => {
-    expect(useCanvasStore.getState().selectedNodeIds).toEqual([])
-  })
-
-  it('onNodesChange syncs selectedNodeIds from select changes', () => {
-    useCanvasStore.getState().addNode(makeNode('n1'))
-    useCanvasStore.getState().addNode(makeNode('n2'))
-    useCanvasStore.getState().onNodesChange([
-      { type: 'select', id: 'n1', selected: true },
-      { type: 'select', id: 'n2', selected: true },
-    ])
-    expect(useCanvasStore.getState().selectedNodeIds).toEqual(expect.arrayContaining(['n1', 'n2']))
-    expect(useCanvasStore.getState().selectedNodeIds).toHaveLength(2)
-  })
-
-  it('setSelectedNode(null) resets selectedNodeIds to empty', () => {
-    useCanvasStore.setState({ selectedNodeIds: ['n1', 'n2'] })
-    useCanvasStore.getState().setSelectedNode(null)
-    expect(useCanvasStore.getState().selectedNodeIds).toEqual([])
-  })
-
-  it('setSelectedNode(id) sets selectedNodeIds to [id], clearing multi-selection', () => {
-    useCanvasStore.setState({ selectedNodeIds: ['n1', 'n2'] })
-    useCanvasStore.getState().setSelectedNode('n1')
-    // Single node click resets multi-selection to just the clicked node
-    expect(useCanvasStore.getState().selectedNodeIds).toEqual(['n1'])
-  })
-
-  // ── createGroup ───────────────────────────────────────────────────────────
-
-  it('createGroup creates a group node at the bounding box of selected nodes', () => {
-    // n1 at (100,100), n2 at (300,200); both default to 200x80
-    const n1 = { ...makeNode('n1'), position: { x: 100, y: 100 }, width: 200, height: 80 }
-    const n2 = { ...makeNode('n2'), position: { x: 300, y: 200 }, width: 200, height: 80 }
-    useCanvasStore.setState({ nodes: [n1, n2] })
-
-    useCanvasStore.getState().createGroup(['n1', 'n2'], 'My Group')
-
-    const { nodes } = useCanvasStore.getState()
-    const group = nodes.find((n) => n.data.type === 'group')
-    expect(group).toBeDefined()
-    expect(group?.data.label).toBe('My Group')
-    // groupX = 100-24=76, groupY = 100-48=52
-    expect(group?.position.x).toBe(76)
-    expect(group?.position.y).toBe(52)
-    // groupW = (500-100)+48=448, groupH = (280-100)+48+24=252
-    expect(group?.width).toBe(448)
-    expect(group?.height).toBe(252)
-  })
-
-  it('createGroup converts children to relative positions', () => {
-    const n1 = { ...makeNode('n1'), position: { x: 100, y: 100 }, width: 200, height: 80 }
-    const n2 = { ...makeNode('n2'), position: { x: 300, y: 200 }, width: 200, height: 80 }
-    useCanvasStore.setState({ nodes: [n1, n2] })
-
-    useCanvasStore.getState().createGroup(['n1', 'n2'], 'G')
-
-    const { nodes } = useCanvasStore.getState()
-    const c1 = nodes.find((n) => n.id === 'n1')
-    const c2 = nodes.find((n) => n.id === 'n2')
-    // groupX=76, groupY=52 → relative: n1=(24,48), n2=(224,148)
-    expect(c1?.position).toEqual({ x: 24, y: 48 })
-    expect(c2?.position).toEqual({ x: 224, y: 148 })
-  })
-
-  it('createGroup sets parentId and extent on children', () => {
-    const n1 = { ...makeNode('n1'), position: { x: 100, y: 100 } }
-    const n2 = { ...makeNode('n2'), position: { x: 200, y: 100 } }
-    useCanvasStore.setState({ nodes: [n1, n2] })
-
-    useCanvasStore.getState().createGroup(['n1', 'n2'], 'G')
-
-    const { nodes } = useCanvasStore.getState()
-    const group = nodes.find((n) => n.data.type === 'group')!
-    const c1 = nodes.find((n) => n.id === 'n1')
-    const c2 = nodes.find((n) => n.id === 'n2')
-    expect(c1?.parentId).toBe(group.id)
-    expect(c1?.extent).toBe('parent')
-    expect(c2?.parentId).toBe(group.id)
-  })
-
-  it('createGroup places the group node before its children in the array', () => {
-    const n1 = { ...makeNode('n1'), position: { x: 100, y: 100 } }
-    const n2 = { ...makeNode('n2'), position: { x: 200, y: 100 } }
-    useCanvasStore.setState({ nodes: [n1, n2] })
-
-    useCanvasStore.getState().createGroup(['n1', 'n2'], 'G')
-
-    const { nodes } = useCanvasStore.getState()
-    const groupIdx = nodes.findIndex((n) => n.data.type === 'group')
-    const c1Idx = nodes.findIndex((n) => n.id === 'n1')
-    const c2Idx = nodes.findIndex((n) => n.id === 'n2')
-    expect(groupIdx).toBeLessThan(c1Idx)
-    expect(groupIdx).toBeLessThan(c2Idx)
-  })
-
-  it('createGroup snapshots history and marks unsaved', () => {
-    const n1 = { ...makeNode('n1'), position: { x: 100, y: 100 } }
-    useCanvasStore.setState({ nodes: [n1] })
-    useCanvasStore.getState().markSaved()
-
-    useCanvasStore.getState().createGroup(['n1'], 'G')
-
-    expect(useCanvasStore.getState().past).toHaveLength(1)
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
-  })
-
-  it('createGroup clears selection', () => {
-    const n1 = { ...makeNode('n1'), position: { x: 100, y: 100 } }
-    useCanvasStore.setState({ nodes: [n1], selectedNodeId: 'n1', selectedNodeIds: ['n1'] })
-
-    useCanvasStore.getState().createGroup(['n1'], 'G')
-
-    expect(useCanvasStore.getState().selectedNodeId).toBeNull()
-    expect(useCanvasStore.getState().selectedNodeIds).toEqual([])
-  })
-
-  // ── ungroup ───────────────────────────────────────────────────────────────
-
-  it('ungroup restores children to absolute positions', () => {
-    const group = {
-      ...makeNode('g1', { type: 'group', label: 'G' }),
-      position: { x: 76, y: 52 },
-    }
-    const c1 = { ...makeNode('n1'), position: { x: 24, y: 48 }, parentId: 'g1', extent: 'parent' as const }
-    const c2 = { ...makeNode('n2'), position: { x: 224, y: 148 }, parentId: 'g1', extent: 'parent' as const }
-    useCanvasStore.setState({ nodes: [group, c1, c2] })
-
-    useCanvasStore.getState().ungroup('g1')
-
-    const { nodes } = useCanvasStore.getState()
-    const r1 = nodes.find((n) => n.id === 'n1')
-    const r2 = nodes.find((n) => n.id === 'n2')
-    expect(r1?.position).toEqual({ x: 100, y: 100 })
-    expect(r2?.position).toEqual({ x: 300, y: 200 })
-  })
-
-  it('ungroup removes parentId and extent from children', () => {
-    const group = { ...makeNode('g1', { type: 'group', label: 'G' }), position: { x: 0, y: 0 } }
-    const child = { ...makeNode('n1'), position: { x: 50, y: 50 }, parentId: 'g1', extent: 'parent' as const }
-    useCanvasStore.setState({ nodes: [group, child] })
-
-    useCanvasStore.getState().ungroup('g1')
-
-    const { nodes } = useCanvasStore.getState()
-    const released = nodes.find((n) => n.id === 'n1')
-    expect(released?.parentId).toBeUndefined()
-    expect(released?.extent).toBeUndefined()
-  })
-
-  it('ungroup deletes the group node', () => {
-    const group = { ...makeNode('g1', { type: 'group', label: 'G' }), position: { x: 0, y: 0 } }
-    useCanvasStore.setState({ nodes: [group] })
-
-    useCanvasStore.getState().ungroup('g1')
-
-    expect(useCanvasStore.getState().nodes.find((n) => n.id === 'g1')).toBeUndefined()
-  })
-
-  it('ungroup snapshots history and marks unsaved', () => {
-    const group = { ...makeNode('g1', { type: 'group', label: 'G' }), position: { x: 0, y: 0 } }
-    useCanvasStore.setState({ nodes: [group] })
-    useCanvasStore.getState().markSaved()
-
-    useCanvasStore.getState().ungroup('g1')
-
-    expect(useCanvasStore.getState().past).toHaveLength(1)
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
-  })
-
   it('updateEdge updates edge data and marks unsaved', () => {
     useCanvasStore.setState((s) => ({ edges: [...s.edges, makeEdge('e1', 'n1', 'n2')] }))
     useCanvasStore.getState().markSaved()
@@ -633,61 +364,4 @@ describe('canvasStore', () => {
     expect(stored?.width).toBeUndefined()
     expect(stored?.height).toBeUndefined()
   })
-
-  // ── bottom_handles edge remapping ──────────────────────────────────────────
-
-  it('remaps source edges to "bottom" when bottom_handles is reduced', () => {
-    const node = makeNode('n1', { bottom_handles: 4 })
-    const edge = { ...makeEdge('e1', 'n1', 'n2'), sourceHandle: 'bottom-3' }
-    useCanvasStore.setState({ nodes: [node, makeNode('n2')], edges: [edge] })
-
-    useCanvasStore.getState().updateNode('n1', { bottom_handles: 2 })
-
-    const updated = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
-    expect(updated?.sourceHandle).toBe('bottom')
-  })
-
-  it('remaps target edges to "bottom" when bottom_handles is reduced', () => {
-    const node = makeNode('n2', { bottom_handles: 3 })
-    const edge = { ...makeEdge('e1', 'n1', 'n2'), targetHandle: 'bottom-3' }
-    useCanvasStore.setState({ nodes: [makeNode('n1'), node], edges: [edge] })
-
-    useCanvasStore.getState().updateNode('n2', { bottom_handles: 1 })
-
-    const updated = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
-    expect(updated?.targetHandle).toBe('bottom')
-  })
-
-  it('does not remap edges that are on handles still present after reduction', () => {
-    const node = makeNode('n1', { bottom_handles: 4 })
-    const edge = { ...makeEdge('e1', 'n1', 'n2'), sourceHandle: 'bottom-2' }
-    useCanvasStore.setState({ nodes: [node, makeNode('n2')], edges: [edge] })
-
-    useCanvasStore.getState().updateNode('n1', { bottom_handles: 3 })
-
-    const updated = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
-    expect(updated?.sourceHandle).toBe('bottom-2')
-  })
-
-  it('does not remap edges when bottom_handles increases', () => {
-    const node = makeNode('n1', { bottom_handles: 2 })
-    const edge = { ...makeEdge('e1', 'n1', 'n2'), sourceHandle: 'bottom' }
-    useCanvasStore.setState({ nodes: [node, makeNode('n2')], edges: [edge] })
-
-    useCanvasStore.getState().updateNode('n1', { bottom_handles: 4 })
-
-    const updated = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
-    expect(updated?.sourceHandle).toBe('bottom')
-  })
-
-  it('never remaps the "bottom" handle itself', () => {
-    const node = makeNode('n1', { bottom_handles: 4 })
-    const edge = { ...makeEdge('e1', 'n1', 'n2'), sourceHandle: 'bottom' }
-    useCanvasStore.setState({ nodes: [node, makeNode('n2')], edges: [edge] })
-
-    useCanvasStore.getState().updateNode('n1', { bottom_handles: 1 })
-
-    const updated = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
-    expect(updated?.sourceHandle).toBe('bottom')
-  })
 })

frontend/src/stores/canvasStore.ts

@@ -11,7 +11,6 @@ import {
 } from '@xyflow/react'
 import type { NodeData, EdgeData } from '@/types'
 import { generateUUID } from '@/utils/uuid'
-import { normalizeHandle, removedBottomHandleIds } from '@/utils/handleUtils'
 
 type HistoryEntry = { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
 
@@ -20,7 +19,6 @@ interface CanvasState {
   edges: Edge<EdgeData>[]
   hasUnsavedChanges: boolean
   selectedNodeId: string | null
-  selectedNodeIds: string[]
   scanEventTs: number
 
   // History
@@ -48,13 +46,9 @@ interface CanvasState {
   setNodeZIndex: (id: string, zIndex: number) => void
   editingGroupRectId: string | null
   setEditingGroupRectId: (id: string | null) => void
-  createGroup: (nodeIds: string[], name: string) => void
-  ungroup: (groupId: string) => void
   markSaved: () => void
   markUnsaved: () => void
   loadCanvas: (nodes: Node<NodeData>[], edges: Edge<EdgeData>[]) => void
-  fitViewPending: boolean
-  clearFitViewPending: () => void
   notifyScanDeviceFound: () => void
   hideIp: boolean
   toggleHideIp: () => void
@@ -65,11 +59,9 @@ export const useCanvasStore = create<CanvasState>((set) => ({
   edges: [],
   hasUnsavedChanges: false,
   selectedNodeId: null,
-  selectedNodeIds: [],
   editingGroupRectId: null,
   hideIp: false,
   scanEventTs: 0,
-  fitViewPending: false,
 
   past: [],
   future: [],
@@ -133,149 +125,67 @@ export const useCanvasStore = create<CanvasState>((set) => ({
     }),
 
   onNodesChange: (changes) =>
-    set((state) => {
-      const nodes = applyNodeChanges(changes, state.nodes)
-      const selectedNodeIds = nodes.filter((n) => n.selected).map((n) => n.id)
-      return {
-        nodes,
-        selectedNodeIds,
-        hasUnsavedChanges: state.hasUnsavedChanges || changes.some((c) => c.type !== 'select'),
-      }
-    }),
+    set((state) => ({
+      nodes: applyNodeChanges(changes, state.nodes),
+      hasUnsavedChanges: true,
+    })),
 
   onEdgesChange: (changes) =>
     set((state) => ({
       edges: applyEdgeChanges(changes, state.edges),
-      hasUnsavedChanges: state.hasUnsavedChanges || changes.some((c) => c.type !== 'select'),
+      hasUnsavedChanges: true,
     })),
 
   onConnect: (connection) =>
     set((state) => {
       const extra = connection as Connection & Partial<EdgeData>
       const edgeType = extra.type ?? 'ethernet'
+      // Normalize invisible stub handle IDs so React Flow can locate the handle
+      // and render the edge immediately (top-t / bottom-t are opacity:0 helpers).
+      const normalizeHandle = (h: string | null | undefined) =>
+        h === 'top-t' ? 'top' : h === 'bottom-t' ? 'bottom' : (h ?? null)
       return {
         edges: addEdge({
           ...connection,
           sourceHandle: normalizeHandle(extra.sourceHandle),
           targetHandle: normalizeHandle(extra.targetHandle),
           type: edgeType,
-          data: { type: edgeType, label: extra.label, vlan_id: extra.vlan_id, custom_color: extra.custom_color, path_style: extra.path_style, animated: extra.animated },
+          data: { type: edgeType, label: extra.label, vlan_id: extra.vlan_id, custom_color: extra.custom_color, path_style: extra.path_style },
         }, state.edges),
         hasUnsavedChanges: true,
       }
     }),
 
-  setSelectedNode: (id) => set({
-    selectedNodeId: id,
-    selectedNodeIds: id ? [id] : [],
-  }),
+  setSelectedNode: (id) => set({ selectedNodeId: id }),
 
   addNode: (node) =>
     set((state) => {
-      const parent = node.data.parent_id ? state.nodes.find((n) => n.id === node.data.parent_id) : null
-      const shouldNestInParent = !!(parent?.data.container_mode)
-      const enriched = node.data.parent_id && shouldNestInParent
-        ? {
-            ...node,
-            parentId: node.data.parent_id,
-            extent: 'parent' as const,
-            position: {
-              x: Math.max(10, node.position.x - parent.position.x),
-              y: Math.max(10, node.position.y - parent.position.y),
-            },
-          }
+      const enriched = node.data.parent_id
+        ? { ...node, parentId: node.data.parent_id, extent: 'parent' as const }
         : node
-      // Parents must come before children in the array (React Flow requirement)
+      // Parents must come before children in the array
       const withoutNew = state.nodes.filter((n) => n.id !== node.id)
       if (enriched.parentId) {
-        const parentIdx = withoutNew.findIndex((n) => n.id === enriched.parentId)
-        const insertAt = parentIdx >= 0 ? parentIdx + 1 : withoutNew.length
-        const nodes = [...withoutNew.slice(0, insertAt), enriched, ...withoutNew.slice(insertAt)]
-        return { nodes, hasUnsavedChanges: true }
+        return { nodes: [...withoutNew, enriched], hasUnsavedChanges: true }
       }
       return { nodes: [...withoutNew, enriched], hasUnsavedChanges: true }
     }),
 
   updateNode: (id, data) =>
-    set((state) => {
-      let nodes = state.nodes.map((n) => {
-        if (n.id !== id) return n
-        const updated: Node<NodeData> = { ...n, data: { ...n.data, ...data } }
-        // When properties change, clear stored height so the node auto-sizes to fit new content
-        if ('properties' in data && n.data.type !== 'proxmox' && n.data.type !== 'groupRect') {
-          updated.height = undefined
-        }
-        if ('parent_id' in data) {
-          const newParentId = data.parent_id ?? undefined
-          if (!newParentId && n.parentId) {
-            // Detaching from a container: convert position back to absolute canvas coords
-            const parent = state.nodes.find((p) => p.id === n.parentId)
-            if (parent) {
-              updated.position = {
-                x: parent.position.x + n.position.x,
-                y: parent.position.y + n.position.y,
-              }
-            }
-            updated.parentId = undefined
-            updated.extent = undefined
-          } else if (newParentId && newParentId !== n.parentId) {
-            const parent = state.nodes.find((p) => p.id === newParentId)
-            if (parent?.data.container_mode) {
-              // Attaching to a container-mode Proxmox: nest visually
-              updated.parentId = newParentId
-              updated.extent = 'parent' as const
-              // Convert absolute position to parent-relative (keep node visible inside)
-              updated.position = {
-                x: Math.max(10, n.position.x - parent.position.x),
-                y: Math.max(10, n.position.y - parent.position.y),
-              }
-            }
-          }
-        }
-        return updated
-      })
-      // React Flow requires parent nodes to precede their children in the array
-      if ('parent_id' in data) {
-        const parents = nodes.filter((n) => !n.parentId)
-        const children = nodes.filter((n) => !!n.parentId)
-        nodes = [...parents, ...children]
-      }
-      // Remap edges when bottom_handles is reduced so no edge disappears
-      let edges = state.edges
-      if ('bottom_handles' in data && data.bottom_handles != null) {
-        const currentNode = state.nodes.find((n) => n.id === id)
-        const oldCount = currentNode?.data.bottom_handles ?? 1
-        const newCount = data.bottom_handles
-        if (newCount < oldCount) {
-          const removed = removedBottomHandleIds(oldCount, newCount)
-          edges = state.edges.map((e) => {
-            if (e.source === id && e.sourceHandle && removed.has(e.sourceHandle))
-              return { ...e, sourceHandle: 'bottom' }
-            if (e.target === id && e.targetHandle && removed.has(e.targetHandle))
-              return { ...e, targetHandle: 'bottom' }
-            return e
-          })
-        }
-      }
-
-      return { nodes, edges, hasUnsavedChanges: true }
-    }),
+    set((state) => ({
+      nodes: state.nodes.map((n) =>
+        n.id === id ? { ...n, data: { ...n.data, ...data } } : n
+      ),
+      hasUnsavedChanges: true,
+    })),
 
   deleteNode: (id) =>
-    set((state) => {
-      const idsToRemove = new Set<string>()
-      const collect = (nodeId: string) => {
-        idsToRemove.add(nodeId)
-        state.nodes.filter((n) => n.parentId === nodeId).forEach((n) => collect(n.id))
-      }
-      collect(id)
-      return {
-        nodes: state.nodes.filter((n) => !idsToRemove.has(n.id)),
-        edges: state.edges.filter((e) => !idsToRemove.has(e.source) && !idsToRemove.has(e.target)),
-        selectedNodeId: idsToRemove.has(state.selectedNodeId ?? '') ? null : state.selectedNodeId,
-        hasUnsavedChanges: true,
-      }
-    }),
+    set((state) => ({
+      nodes: state.nodes.filter((n) => n.id !== id),
+      edges: state.edges.filter((e) => e.source !== id && e.target !== id),
+      selectedNodeId: state.selectedNodeId === id ? null : state.selectedNodeId,
+      hasUnsavedChanges: true,
+    })),
 
   updateEdge: (id, data) =>
     set((state) => ({
@@ -293,38 +203,14 @@ export const useCanvasStore = create<CanvasState>((set) => ({
 
   setProxmoxContainerMode: (proxmoxId, enabled) =>
     set((state) => {
-      const parentNode = state.nodes.find((n) => n.id === proxmoxId)
       let nodes = state.nodes.map((n) => {
         if (n.id === proxmoxId) {
           const withMode = { ...n, data: { ...n.data, container_mode: enabled } }
-          if (n.data.type !== 'proxmox') return withMode
           return enabled
-            ? { ...withMode, width: n.width ?? 300, height: n.height ?? 200 }
+            ? { ...withMode, width: 300, height: 200 }
             : { ...withMode, width: undefined, height: undefined }
         }
         if (n.data.parent_id === proxmoxId) {
-          if (enabled && parentNode) {
-            return {
-              ...n,
-              parentId: proxmoxId,
-              extent: 'parent' as const,
-              position: {
-                x: Math.max(10, n.position.x - parentNode.position.x),
-                y: Math.max(10, n.position.y - parentNode.position.y),
-              },
-            }
-          }
-          if (!enabled && parentNode) {
-            return {
-              ...n,
-              parentId: undefined,
-              extent: undefined,
-              position: {
-                x: parentNode.position.x + n.position.x,
-                y: parentNode.position.y + n.position.y,
-              },
-            }
-          }
           return enabled
             ? { ...n, parentId: proxmoxId, extent: 'parent' as const }
             : { ...n, parentId: undefined, extent: undefined }
@@ -347,112 +233,6 @@ export const useCanvasStore = create<CanvasState>((set) => ({
 
   setEditingGroupRectId: (id) => set({ editingGroupRectId: id }),
 
-  createGroup: (nodeIds, name) =>
-    set((state) => {
-      const PADDING_H = 24
-      const PADDING_TOP = 48
-      const PADDING_BOTTOM = 24
-      const targets = state.nodes.filter((n) => nodeIds.includes(n.id))
-      if (targets.length === 0) return state
-
-      // Bounding box in absolute coordinates
-      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
-      for (const n of targets) {
-        const w = n.width ?? 200
-        const h = n.height ?? 80
-        minX = Math.min(minX, n.position.x)
-        minY = Math.min(minY, n.position.y)
-        maxX = Math.max(maxX, n.position.x + w)
-        maxY = Math.max(maxY, n.position.y + h)
-      }
-
-      const groupX = minX - PADDING_H
-      const groupY = minY - PADDING_TOP
-      const groupW = maxX - minX + PADDING_H * 2
-      const groupH = maxY - minY + PADDING_TOP + PADDING_BOTTOM
-
-      const groupId = generateUUID()
-      const groupNode: Node<NodeData> = {
-        id: groupId,
-        type: 'group',
-        position: { x: groupX, y: groupY },
-        width: groupW,
-        height: groupH,
-        data: {
-          label: name,
-          type: 'group',
-          status: 'unknown',
-          services: [],
-          custom_colors: { show_border: true },
-        },
-        selected: false,
-      }
-
-      // Convert children to relative positions and assign parentId
-      const updatedNodes = state.nodes.map((n) => {
-        if (!nodeIds.includes(n.id)) return n
-        return {
-          ...n,
-          parentId: groupId,
-          extent: 'parent' as const,
-          position: {
-            x: n.position.x - groupX,
-            y: n.position.y - groupY,
-          },
-          selected: false,
-          data: { ...n.data, parent_id: groupId },
-        }
-      })
-
-      // Group node must come before its children
-      const withoutTargets = updatedNodes.filter((n) => !nodeIds.includes(n.id))
-      const children = updatedNodes.filter((n) => nodeIds.includes(n.id))
-      const nodes = [...withoutTargets, groupNode, ...children]
-
-      return {
-        nodes,
-        selectedNodeIds: [],
-        selectedNodeId: null,
-        hasUnsavedChanges: true,
-        past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
-        future: [],
-      }
-    }),
-
-  ungroup: (groupId) =>
-    set((state) => {
-      const group = state.nodes.find((n) => n.id === groupId)
-      if (!group) return state
-
-      const groupAbsX = group.position.x
-      const groupAbsY = group.position.y
-
-      const nodes = state.nodes
-        .filter((n) => n.id !== groupId)
-        .map((n) => {
-          if (n.parentId !== groupId) return n
-          return {
-            ...n,
-            parentId: undefined,
-            extent: undefined,
-            position: {
-              x: n.position.x + groupAbsX,
-              y: n.position.y + groupAbsY,
-            },
-            data: { ...n.data, parent_id: undefined },
-          }
-        })
-
-      return {
-        nodes,
-        selectedNodeId: null,
-        selectedNodeIds: [],
-        hasUnsavedChanges: true,
-        past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
-        future: [],
-      }
-    }),
-
   markSaved: () => set({ hasUnsavedChanges: false }),
 
   markUnsaved: () => set({ hasUnsavedChanges: true }),
@@ -465,8 +245,6 @@ export const useCanvasStore = create<CanvasState>((set) => ({
     // React Flow requires parents before children in the array
     const parents = nodes.filter((n) => !n.parentId)
     const children = nodes.filter((n) => !!n.parentId)
-    set({ nodes: [...parents, ...children], edges, hasUnsavedChanges: false, selectedNodeId: null, past: [], future: [], clipboard: [], fitViewPending: true })
+    set({ nodes: [...parents, ...children], edges, hasUnsavedChanges: false, selectedNodeId: null })
   },
-
-  clearFitViewPending: () => set({ fitViewPending: false }),
 }))

frontend/src/types/index.ts

@@ -13,11 +13,9 @@ export type NodeType =
   | 'printer'
   | 'computer'
   | 'cpl'
-  | 'docker_container'
-  | 'docker_host'
+  | 'docker'
   | 'generic'
   | 'groupRect'
-  | 'group'
 
 export type TextPosition =
   | 'top-left'
@@ -44,13 +42,6 @@ export interface ServiceInfo {
   category?: string
 }
 
-export interface NodeProperty {
-  key: string
-  value: string
-  icon: string | null
-  visible: boolean
-}
-
 export interface NodeData extends Record<string, unknown> {
   label: string
   type: NodeType
@@ -70,7 +61,6 @@ export interface NodeData extends Record<string, unknown> {
   ram_gb?: number
   disk_gb?: number
   show_hardware?: boolean
-  properties?: NodeProperty[]
   parent_id?: string
   container_mode?: boolean
   custom_colors?: {
@@ -82,25 +72,15 @@ export interface NodeData extends Record<string, unknown> {
     text_position?: TextPosition
     font?: string
     border_style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
-    border_width?: number
-    label_position?: 'inside' | 'outside'
-    text_size?: number
     z_order?: number
-    show_border?: boolean
     width?: number
     height?: number
   }
   custom_icon?: string
-  bottom_handles?: number
 }
 
 export type EdgePathStyle = 'bezier' | 'smooth'
 
-export interface Waypoint {
-  x: number
-  y: number
-}
-
 export interface EdgeData extends Record<string, unknown> {
   type: EdgeType
   label?: string
@@ -108,8 +88,7 @@ export interface EdgeData extends Record<string, unknown> {
   speed?: string
   custom_color?: string
   path_style?: EdgePathStyle
-  animated?: boolean | 'snake' | 'flow' | 'basic' | 'none'
-  waypoints?: Waypoint[]
+  animated?: boolean
 }
 
 export const NODE_TYPE_LABELS: Record<NodeType, string> = {
@@ -127,11 +106,9 @@ export const NODE_TYPE_LABELS: Record<NodeType, string> = {
   printer: 'Printer',
   computer: 'Computer',
   cpl: 'CPL / Powerline',
-  docker_container: 'Docker Container',
-  docker_host: 'Docker Host',
+  docker: 'Docker Host',
   generic: 'Generic Device',
   groupRect: 'Group Rectangle',
-  group: 'Node Group',
 }
 
 export const STATUS_COLORS: Record<NodeStatus, string> = {

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

@@ -236,36 +236,6 @@ describe('serializeEdge', () => {
     expect(result.custom_color).toBeNull()
     expect(result.path_style).toBeNull()
   })
-
-  it('serializes waypoints when present', () => {
-    const edge = makeRfEdge({ data: { type: 'ethernet', waypoints: [{ x: 10, y: 20 }, { x: 30, y: 40 }] } })
-    const result = serializeEdge(edge)
-    expect(result.waypoints).toEqual([{ x: 10, y: 20 }, { x: 30, y: 40 }])
-  })
-
-  it('serializes waypoints as null when empty array', () => {
-    const edge = makeRfEdge({ data: { type: 'ethernet', waypoints: [] } })
-    const result = serializeEdge(edge)
-    expect(result.waypoints).toBeNull()
-  })
-
-  it('serializes waypoints as null when absent', () => {
-    const result = serializeEdge(makeRfEdge())
-    expect(result.waypoints).toBeNull()
-  })
-})
-
-describe('deserializeApiEdge — waypoints', () => {
-  it('restores waypoints from API edge', () => {
-    const edge = makeApiEdge({ waypoints: [{ x: 5, y: 15 }, { x: 25, y: 35 }] })
-    const result = deserializeApiEdge(edge)
-    expect((result.data as { waypoints: unknown }).waypoints).toEqual([{ x: 5, y: 15 }, { x: 25, y: 35 }])
-  })
-
-  it('has no waypoints when API edge has none', () => {
-    const result = deserializeApiEdge(makeApiEdge())
-    expect((result.data as { waypoints?: unknown }).waypoints).toBeUndefined()
-  })
 })
 
 // ── deserializeApiNode — regular nodes ───────────────────────────────────────

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

@@ -1,111 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import {
-  BOTTOM_HANDLE_IDS,
-  BOTTOM_HANDLE_POSITIONS,
-  normalizeHandle,
-  removedBottomHandleIds,
-} from '../handleUtils'
-
-describe('BOTTOM_HANDLE_IDS', () => {
-  it('first id is always "bottom" for backward compatibility', () => {
-    expect(BOTTOM_HANDLE_IDS[0]).toBe('bottom')
-  })
-
-  it('has ids for 1–4 handles', () => {
-    expect(BOTTOM_HANDLE_IDS).toHaveLength(4)
-    expect(BOTTOM_HANDLE_IDS).toEqual(['bottom', 'bottom-2', 'bottom-3', 'bottom-4'])
-  })
-})
-
-describe('BOTTOM_HANDLE_POSITIONS', () => {
-  it('1 handle is centered at 50%', () => {
-    expect(BOTTOM_HANDLE_POSITIONS[1]).toEqual([50])
-  })
-
-  it('2 handles are symmetric', () => {
-    const [a, b] = BOTTOM_HANDLE_POSITIONS[2]
-    expect(a).toBeLessThan(50)
-    expect(b).toBeGreaterThan(50)
-    expect(a + b).toBe(100)
-  })
-
-  it('3 handles include a center at 50%', () => {
-    expect(BOTTOM_HANDLE_POSITIONS[3]).toContain(50)
-    expect(BOTTOM_HANDLE_POSITIONS[3]).toHaveLength(3)
-  })
-
-  it('4 handles are evenly spaced', () => {
-    const pos = BOTTOM_HANDLE_POSITIONS[4]
-    expect(pos).toHaveLength(4)
-    // All values should be between 0 and 100 exclusive
-    pos.forEach((p) => {
-      expect(p).toBeGreaterThan(0)
-      expect(p).toBeLessThan(100)
-    })
-    // Positions should be strictly increasing
-    for (let i = 1; i < pos.length; i++) {
-      expect(pos[i]).toBeGreaterThan(pos[i - 1])
-    }
-  })
-})
-
-describe('normalizeHandle', () => {
-  it('returns null for null/undefined', () => {
-    expect(normalizeHandle(null)).toBeNull()
-    expect(normalizeHandle(undefined)).toBeNull()
-  })
-
-  it('maps top-t → top', () => {
-    expect(normalizeHandle('top-t')).toBe('top')
-  })
-
-  it('maps bottom-t → bottom', () => {
-    expect(normalizeHandle('bottom-t')).toBe('bottom')
-  })
-
-  it('maps bottom-2-t → bottom-2', () => {
-    expect(normalizeHandle('bottom-2-t')).toBe('bottom-2')
-  })
-
-  it('maps bottom-3-t → bottom-3', () => {
-    expect(normalizeHandle('bottom-3-t')).toBe('bottom-3')
-  })
-
-  it('maps bottom-4-t → bottom-4', () => {
-    expect(normalizeHandle('bottom-4-t')).toBe('bottom-4')
-  })
-
-  it('passes through non-stub handles unchanged', () => {
-    expect(normalizeHandle('top')).toBe('top')
-    expect(normalizeHandle('bottom')).toBe('bottom')
-    expect(normalizeHandle('bottom-2')).toBe('bottom-2')
-    expect(normalizeHandle('custom-handle')).toBe('custom-handle')
-  })
-})
-
-describe('removedBottomHandleIds', () => {
-  it('returns empty set when count does not decrease', () => {
-    expect(removedBottomHandleIds(2, 2).size).toBe(0)
-    expect(removedBottomHandleIds(1, 4).size).toBe(0)
-  })
-
-  it('4 → 1 removes bottom-2, bottom-3, bottom-4', () => {
-    const removed = removedBottomHandleIds(4, 1)
-    expect(removed).toEqual(new Set(['bottom-2', 'bottom-3', 'bottom-4']))
-  })
-
-  it('4 → 2 removes bottom-3, bottom-4', () => {
-    const removed = removedBottomHandleIds(4, 2)
-    expect(removed).toEqual(new Set(['bottom-3', 'bottom-4']))
-  })
-
-  it('3 → 2 removes only bottom-3', () => {
-    const removed = removedBottomHandleIds(3, 2)
-    expect(removed).toEqual(new Set(['bottom-3']))
-  })
-
-  it('never removes "bottom" (index 0)', () => {
-    const removed = removedBottomHandleIds(4, 1)
-    expect(removed.has('bottom')).toBe(false)
-  })
-})