feat: add docker_container node type with migrations and fixes

- Fix CONTAINER_MODE_TYPES to only include proxmox and docker_host (not vm/lxc)
- Add DB migration: existing proxmox nodes get container_mode=1 (they were always containers)
- Add DB migration: legacy 'docker' type renamed to 'docker_container'
- Update canvasStore tests: parent nodes need container_mode=true to nest children
- Fix updateNode test: pass absolute position so relative recalc yields expected coords
- Add backend tests for both migrations (test_docker_migration.py)

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: pouzor
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks.dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

CONTRIBUTING.md

@@ -1,276 +0,0 @@
-# Contributing to Homelable
-
-Thanks for taking the time to contribute! This document covers everything you need to get started.
-
----
-
-## Table of Contents
-
-- [Ways to Contribute](#ways-to-contribute)
-- [Reporting Bugs](#reporting-bugs)
-- [Suggesting Features](#suggesting-features)
-- [Development Setup](#development-setup)
-- [Project Structure](#project-structure)
-- [Coding Standards](#coding-standards)
-- [Testing](#testing)
-- [Submitting a Pull Request](#submitting-a-pull-request)
-- [Commit Message Format](#commit-message-format)
-
----
-
-## Ways to Contribute
-
-- Report bugs or unexpected behavior
-- Suggest new features or improvements
-- Fix open issues (check the [issue tracker](https://github.com/Pouzor/homelable/issues))
-- Improve documentation
-- Add service signatures to `service_signatures.json`
-
----
-
-## Reporting Bugs
-
-Before opening an issue, search existing ones to avoid duplicates.
-
-When filing a bug, include:
-
-- **Homelable version** (visible in the sidebar bottom-left)
-- **Deployment method** (Docker Compose, Proxmox LXC, source)
-- **Steps to reproduce**
-- **Expected vs actual behavior**
-- **Relevant logs** (`docker compose logs backend` / `docker compose logs frontend`)
-- **Browser console errors** if it's a UI issue
-
----
-
-## Suggesting Features
-
-Open an issue with the `enhancement` label. Describe:
-
-- The problem you're trying to solve
-- Your proposed solution
-- Any alternatives you considered
-
-For large changes, discuss first before writing code — it avoids wasted effort.
-
----
-
-## Development Setup
-
-### Prerequisites
-
-- **Node.js 20+** and **npm**
-- **Python 3.11–3.13** (3.14 not yet supported by all dependencies)
-- **nmap** installed on your system (required for scanner)
-- **Docker + Docker Compose** (optional, for full-stack testing)
-
-### 1. Clone the repo
-
-```bash
-git clone https://github.com/Pouzor/homelable.git
-cd homelable
-```
-
-### 2. Backend
-
-```bash
-cd backend
-python3.13 -m venv .venv
-source .venv/bin/activate        # Windows: .venv\Scripts\activate
-pip install -r requirements.txt
-
-# Copy and configure environment
-cp .env.example .env             # edit AUTH_PASSWORD_HASH, SECRET_KEY, etc.
-
-# Start the backend (auto-reloads on change)
-uvicorn app.main:app --reload --port 8000
-```
-
-API docs available at `http://localhost:8000/docs`.
-
-### 3. Frontend
-
-```bash
-cd frontend
-npm install
-npm run dev                      # http://localhost:5173
-```
-
-Vite proxies `/api` to `localhost:8000` — the backend must be running.
-
-### 4. Verify tooling
-
-```bash
-./scripts/verify-tooling.sh
-```
-
----
-
-## Project Structure
-
-```
-homelable/
-├── frontend/src/
-│   ├── components/
-│   │   ├── canvas/          # React Flow canvas, custom nodes & edges
-│   │   ├── panels/          # Sidebar, detail panel, toolbar
-│   │   ├── modals/          # Add/edit node, scan config, pending devices
-│   │   └── ui/              # Shadcn/ui base components
-│   ├── stores/              # Zustand state (canvas, auth, scan)
-│   ├── hooks/               # Custom React hooks
-│   ├── types/               # TypeScript interfaces & enums
-│   ├── api/                 # Axios client & typed endpoints
-│   └── utils/               # Layout, export, color helpers
-│
-├── backend/app/
-│   ├── api/routes/          # FastAPI route handlers
-│   ├── services/            # Scanner, status checker, canvas service
-│   ├── db/                  # SQLAlchemy models, Alembic migrations
-│   ├── schemas/             # Pydantic request/response schemas
-│   └── core/                # Config, JWT, scheduler
-│
-├── docker/                  # Nginx configs
-├── scripts/                 # LXC bootstrap, dev helpers
-└── mcp/                     # MCP server (AI integration)
-```
-
----
-
-## Coding Standards
-
-### General
-
-- No untested code merged — every feature or fix must include tests
-- Keep changes focused — one concern per PR
-
-### Frontend (TypeScript + React)
-
-- Strict TypeScript — no `any`, no type assertions unless truly necessary
-- React Flow node domain fields go in `node.data`, never on the node root
-- State management via Zustand stores — no prop drilling beyond 2 levels
-- Styling via TailwindCSS utility classes — follow the existing [design system](#design-system)
-- Run before committing:
-  ```bash
-  cd frontend
-  npm run lint
-  npm run typecheck
-  npm test
-  ```
-
-### Backend (Python + FastAPI)
-
-- Python 3.11+ syntax
-- Pydantic v2 schemas for all request/response types
-- SQLAlchemy async sessions — never block the event loop
-- Scanner logic runs in a background thread — never in an async route directly
-- All schema changes via Alembic migrations — never modify tables directly
-- Run before committing:
-  ```bash
-  cd backend
-  source .venv/bin/activate
-  ruff check .
-  pytest
-  ```
-
-### Design System
-
-| Token | Value |
-|---|---|
-| Background | `#0d1117` |
-| Surface | `#161b22` |
-| Card | `#21262d` |
-| Accent cyan | `#00d4ff` |
-| Online | `#39d353` |
-| Offline | `#f85149` |
-| Pending | `#e3b341` |
-| Font (UI) | Inter |
-| Font (IPs/ports) | JetBrains Mono |
-
----
-
-## Testing
-
-Tests run automatically via a pre-commit hook when frontend or backend files are staged.
-
-### Frontend
-
-```bash
-cd frontend
-npm test                  # run all tests
-npm run test:coverage     # with coverage report
-```
-
-Test files live in `__tests__/` next to their module, named `*.test.ts(x)`.
-
-**What to test:** Zustand store actions, utility functions, non-trivial component logic.
-
-### Backend
-
-```bash
-cd backend
-source .venv/bin/activate
-pytest                    # run all tests
-pytest -v tests/test_nodes.py   # single file
-```
-
-Test files live in `backend/tests/test_*.py`.
-
-**What to test:** all API routes (happy path + error cases), auth flows, service logic.
-
-Use the `client` and `headers` fixtures from `conftest.py` — they provide an in-memory SQLite database so tests are isolated and fast.
-
----
-
-## Submitting a Pull Request
-
-1. **Fork** the repo and create a branch from `main`:
-   ```bash
-   git checkout -b feat/my-feature
-   ```
-
-2. **Make your changes** — include tests.
-
-3. **Run the full test suite** (frontend + backend) and make sure everything passes.
-
-4. **Open a PR** against `main`:
-   - Use a clear title (see commit format below)
-   - Describe what changed and why
-   - Reference any related issues (`Closes #123`)
-   - Include screenshots for UI changes
-
-5. Keep the PR focused — one feature or fix per PR. Large refactors should be discussed in an issue first.
-
----
-
-## Commit Message Format
-
-Follow [Conventional Commits](https://www.conventionalcommits.org/):
-
-```
-<type>: <short description>
-
-[optional body]
-```
-
-| Type | When to use |
-|---|---|
-| `feat` | New feature |
-| `fix` | Bug fix |
-| `docs` | Documentation only |
-| `refactor` | Code change with no behavior change |
-| `test` | Adding or fixing tests |
-| `chore` | Build, deps, tooling |
-
-**Examples:**
-```
-feat: add logout button to sidebar
-fix: stop click propagation on pending device checkbox
-docs: add CONTRIBUTING.md
-```
-
-
----
-
-## Questions?
-
-Open a [GitHub Discussion](https://github.com/Pouzor/homelable/discussions) or drop a comment on a relevant issue.

Dockerfile.backend

@@ -2,14 +2,13 @@ FROM python:3.13-slim
 
 WORKDIR /app
 
-# Install nmap for network scanning + iputils-ping for ping-based status checks + curl for the health check
-RUN apt-get update && apt-get install -y --no-install-recommends nmap iputils-ping curl && rm -rf /var/lib/apt/lists/*
+# Install nmap for network scanning + iputils-ping for ping-based status checks
+RUN apt-get update && apt-get install -y --no-install-recommends nmap iputils-ping && rm -rf /var/lib/apt/lists/*
 
 COPY backend/requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
 COPY backend/ .
-COPY VERSION /app/VERSION
 
 # Create data directory (volume mount point)
 RUN mkdir -p /app/data

Dockerfile.frontend

@@ -12,7 +12,6 @@ COPY frontend/package*.json ./
 RUN npm ci
 
 COPY frontend/ .
-COPY VERSION ../VERSION
 RUN npm run build
 
 # Stage 2: serve

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Remy Jardinet
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -99,7 +99,7 @@ The page shows your canvas in pan/zoom-only mode — no editing, no credentials
 
 ---
 
-## MCP Server (AI Integration) (optional)
+## 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.
 

VERSION

@@ -1 +0,0 @@
-1.13.0

backend/app/api/routes/canvas.py

@@ -25,7 +25,6 @@ async def load_canvas(db: AsyncSession = Depends(get_db), _: str = Depends(get_c
         nodes=[NodeResponse.model_validate(n) for n in nodes],
         edges=[EdgeResponse.model_validate(e) for e in edges],
         viewport=viewport,
-        custom_style=state.custom_style if state else None,
     )
 
 
@@ -68,14 +67,13 @@ async def save_canvas(
         else:
             db.add(Edge(**edge_data.model_dump()))
 
-    # Upsert viewport + custom style
+    # Upsert viewport
     state = await db.get(CanvasState, 1)
     if state:
         state.viewport = body.viewport
-        state.custom_style = body.custom_style
         state.saved_at = datetime.now(timezone.utc)
     else:
-        db.add(CanvasState(id=1, viewport=body.viewport, custom_style=body.custom_style))
+        db.add(CanvasState(id=1, viewport=body.viewport))
 
     await db.commit()
     return {"saved": True}

backend/app/api/routes/scan.py

@@ -17,10 +17,6 @@ from app.schemas.scan import PendingDeviceResponse, ScanRunResponse
 from app.services.scanner import request_cancel, run_scan
 
 
-class BulkActionRequest(BaseModel):
-    device_ids: list[str]
-
-
 class ScanConfig(BaseModel):
     ranges: list[str]
 
@@ -41,15 +37,7 @@ router = APIRouter()
 
 async def _background_scan(run_id: str, ranges: list[str]) -> None:
     async with AsyncSessionLocal() as db:
-        try:
-            await run_scan(ranges, db, run_id)
-        except Exception:
-            logger.exception("Scan run %s failed unexpectedly", run_id)
-            await db.rollback()
-            run = await db.get(ScanRun, run_id)
-            if run and run.status == "running":
-                run.status = "failed"
-                await db.commit()
+        await run_scan(ranges, db, run_id)
 
 
 @router.post("/trigger", response_model=ScanRunResponse)
@@ -97,10 +85,12 @@ async def clear_pending(
     db: AsyncSession = Depends(get_db),
     _: str = Depends(get_current_user),
 ) -> dict[str, int]:
-    from sqlalchemy import delete as sa_delete
-    result = await db.execute(sa_delete(PendingDevice).where(PendingDevice.status == "pending"))
+    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": result.rowcount}
+    return {"deleted": len(devices)}
 
 
 @router.get("/hidden", response_model=list[PendingDeviceResponse])
@@ -109,63 +99,6 @@ async def list_hidden(db: AsyncSession = Depends(get_db), _: str = Depends(get_c
     return list(result.scalars().all())
 
 
-@router.post("/pending/bulk-approve", response_model=dict)
-async def bulk_approve_devices(
-    payload: BulkActionRequest,
-    db: AsyncSession = Depends(get_db),
-    _: str = Depends(get_current_user),
-) -> dict[str, Any]:
-    result = await db.execute(
-        select(PendingDevice).where(
-            PendingDevice.id.in_(payload.device_ids),
-            PendingDevice.status == "pending",
-        )
-    )
-    devices = result.scalars().all()
-    created_nodes: list[Node] = []
-    for device in devices:
-        device.status = "approved"
-        node = Node(
-            label=device.hostname or device.ip,
-            type=device.suggested_type or "generic",
-            ip=device.ip,
-            hostname=device.hostname,
-            status="unknown",
-            services=device.services or [],
-        )
-        db.add(node)
-        created_nodes.append(node)
-    await db.flush()  # populates node.id from Python-side default before reading
-    node_ids = [n.id for n in created_nodes]
-    approved_device_ids = [d.id for d in devices]
-    await db.commit()
-    return {
-        "approved": len(node_ids),
-        "node_ids": node_ids,
-        "device_ids": approved_device_ids,
-        "skipped": len(payload.device_ids) - len(node_ids),
-    }
-
-
-@router.post("/pending/bulk-hide", response_model=dict)
-async def bulk_hide_devices(
-    payload: BulkActionRequest,
-    db: AsyncSession = Depends(get_db),
-    _: str = Depends(get_current_user),
-) -> dict[str, Any]:
-    result = await db.execute(
-        select(PendingDevice).where(
-            PendingDevice.id.in_(payload.device_ids),
-            PendingDevice.status == "pending",
-        )
-    )
-    devices = result.scalars().all()
-    for device in devices:
-        device.status = "hidden"
-    await db.commit()
-    return {"hidden": len(devices), "skipped": len(payload.device_ids) - len(devices)}
-
-
 @router.post("/pending/{device_id}/approve", response_model=dict)
 async def approve_device(
     device_id: str,
@@ -174,24 +107,13 @@ async def approve_device(
     _: str = Depends(get_current_user),
 ) -> dict[str, Any]:
     device = await db.get(PendingDevice, device_id)
-    if not device:
-        raise HTTPException(status_code=404, detail="Device not found")
-    if device.status != "pending":
-        raise HTTPException(status_code=409, detail="Device already processed")
-    device.status = "approved"
-    node = Node(
-        label=node_data.label,
-        type=node_data.type,
-        ip=node_data.ip,
-        hostname=node_data.hostname,
-        status=node_data.status,
-        services=node_data.services or [],
-    )
-    db.add(node)
-    await db.flush()
-    node_id = node.id
-    await db.commit()
-    return {"approved": True, "node_id": node_id}
+    if device:
+        device.status = "approved"
+        node = Node(**node_data.model_dump())
+        db.add(node)
+        await db.commit()
+        return {"approved": True, "node_id": node.id}
+    return {"approved": False}
 
 
 @router.post("/pending/{device_id}/hide")
@@ -231,12 +153,10 @@ async def get_scan_config(_: str = Depends(get_current_user)) -> ScanConfig:
 
 @router.post("/config", response_model=ScanConfig)
 async def update_scan_config(payload: ScanConfig, _: str = Depends(get_current_user)) -> ScanConfig:
-    previous = settings.scanner_ranges
-    settings.scanner_ranges = payload.ranges
     try:
+        settings.scanner_ranges = payload.ranges
         settings.save_overrides()
         return payload
     except Exception as exc:
-        settings.scanner_ranges = previous
         logger.error("Failed to save scan config: %s", exc)
         raise HTTPException(status_code=500, detail="Failed to save scan config") from exc

backend/app/core/config.py

@@ -7,17 +7,6 @@ from pydantic_settings import BaseSettings, SettingsConfigDict
 
 logger = logging.getLogger(__name__)
 
-def _read_version() -> str:
-    for candidate in [
-        Path(__file__).parent.parent.parent.parent / "VERSION",  # repo root (dev)
-        Path("/app/VERSION"),                                      # Docker image
-    ]:
-        if candidate.exists():
-            return candidate.read_text().strip()
-    return "unknown"
-
-APP_VERSION = _read_version()
-
 
 class Settings(BaseSettings):
     model_config = SettingsConfigDict(env_file=".env", env_file_encoding="utf-8")

backend/app/db/database.py

@@ -1,5 +1,3 @@
-import logging
-import shutil
 from collections.abc import AsyncGenerator
 from contextlib import suppress
 from pathlib import Path
@@ -8,9 +6,7 @@ from sqlalchemy.exc import OperationalError
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
 from sqlalchemy.orm import DeclarativeBase
 
-from app.core.config import APP_VERSION, settings
-
-logger = logging.getLogger(__name__)
+from app.core.config import settings
 
 # Ensure the data directory exists before SQLite tries to open the file
 Path(settings.sqlite_path).parent.mkdir(parents=True, exist_ok=True)
@@ -27,22 +23,7 @@ class Base(DeclarativeBase):
     pass
 
 
-def _backup_db() -> None:
-    db_path = Path(settings.sqlite_path)
-    if not db_path.exists():
-        return
-    backup_path = db_path.with_suffix(f".db.back-{APP_VERSION}")
-    if backup_path.exists():
-        return
-    try:
-        shutil.copy2(db_path, backup_path)
-        logger.info("DB backup created: %s", backup_path.name)
-    except OSError:
-        logger.warning("Could not create DB backup at %s", backup_path)
-
-
 async def init_db() -> None:
-    _backup_db()
     async with engine.begin() as conn:
         await conn.run_sync(Base.metadata.create_all)
         # Add columns introduced after initial schema (idempotent)
@@ -84,8 +65,6 @@ async def init_db() -> None:
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN waypoints JSON")
         with suppress(OperationalError):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN properties JSON")
-        with suppress(OperationalError):
-            await conn.exec_driver_sql("ALTER TABLE canvas_state ADD COLUMN custom_style JSON")
         # Migrate hardware columns → properties JSON (idempotent: only runs on nodes where properties IS NULL)
         with suppress(OperationalError):
             rows = await conn.exec_driver_sql(
@@ -115,6 +94,16 @@ async def init_db() -> None:
         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

@@ -78,7 +78,6 @@ class CanvasState(Base):
 
     id: Mapped[int] = mapped_column(Integer, primary_key=True, default=1)
     viewport: Mapped[dict[str, Any]] = mapped_column(JSON, default=dict)
-    custom_style: Mapped[dict[str, Any] | None] = mapped_column(JSON, nullable=True)
     saved_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
 
 

backend/app/schemas/canvas.py

@@ -62,11 +62,9 @@ class CanvasSaveRequest(BaseModel):
     nodes: list[NodeSave] = []
     edges: list[EdgeSave] = []
     viewport: dict[str, Any] = {}
-    custom_style: dict[str, Any] | None = None
 
 
 class CanvasStateResponse(BaseModel):
     nodes: list[NodeResponse]
     edges: list[EdgeResponse]
     viewport: dict[str, Any]
-    custom_style: dict[str, Any] | None = None

backend/app/services/status_checker.py

@@ -19,9 +19,7 @@ async def check_node(check_method: str, target: str | None, ip: str | None) -> d
     if check_method == "none":
         return {"status": "online", "response_time_ms": None}
 
-    # Use only the first IP when the field contains comma-separated addresses
-    raw_ip = ip.split(",")[0].strip() if ip else None
-    host = target or raw_ip
+    host = target or ip
     if not host:
         return {"status": "unknown", "response_time_ms": None}
 

backend/data/.gitignore

@@ -2,4 +2,3 @@
 *.db-shm
 *.db-wal
 scan_config.json
-homelab.db.*

backend/tests/test_canvas.py

@@ -453,15 +453,6 @@ async def test_save_canvas_persists_services_and_notes(client: AsyncClient, head
     assert node["notes"] == "My NAS device"
 
 
-async def test_save_canvas_persists_service_paths(client: AsyncClient, headers: dict):
-    services = [{"service_name": "Grafana", "protocol": "tcp", "port": 3000, "path": "/login"}]
-    n1 = node_payload(ip="192.168.1.50:8080", services=services)
-    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]["services"] == services
-
-
 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)
@@ -557,42 +548,3 @@ async def test_save_canvas_edge_update_existing(client: AsyncClient, headers: di
     edge = canvas["edges"][0]
     assert edge["label"] == "updated"
     assert edge["custom_color"] == "#ff0000"
-
-
-# ── custom_style ──────────────────────────────────────────────────────────────
-
-async def test_save_and_load_custom_style(client: AsyncClient, headers: dict):
-    custom_style = {
-        "nodes": {
-            "server": {"borderColor": "#ff0000", "borderOpacity": 0.8, "bgColor": "#000000", "bgOpacity": 1, "iconColor": "#ff0000", "iconOpacity": 1, "width": 200, "height": 80},
-        },
-        "edges": {
-            "ethernet": {"color": "#00ff00", "opacity": 1, "pathStyle": "bezier", "animated": "none"},
-        },
-    }
-    payload = {"nodes": [], "edges": [], "viewport": {"theme_id": "custom"}, "custom_style": custom_style}
-    res = await client.post("/api/v1/canvas/save", json=payload, headers=headers)
-    assert res.status_code == 200
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert canvas["custom_style"] is not None
-    assert canvas["custom_style"]["nodes"]["server"]["borderColor"] == "#ff0000"
-    assert canvas["custom_style"]["edges"]["ethernet"]["color"] == "#00ff00"
-
-
-async def test_load_canvas_custom_style_null_by_default(client: AsyncClient, headers: dict):
-    res = await client.get("/api/v1/canvas", headers=headers)
-    assert res.status_code == 200
-    assert res.json()["custom_style"] is None
-
-
-async def test_save_canvas_custom_style_overwrite(client: AsyncClient, headers: dict):
-    style_v1 = {"nodes": {"server": {"borderColor": "#aabbcc", "borderOpacity": 1, "bgColor": "#000000", "bgOpacity": 1, "iconColor": "#aabbcc", "iconOpacity": 1, "width": 0, "height": 0}}, "edges": {}}
-    style_v2 = {"nodes": {"proxmox": {"borderColor": "#ff6e00", "borderOpacity": 1, "bgColor": "#111111", "bgOpacity": 1, "iconColor": "#ff6e00", "iconOpacity": 1, "width": 0, "height": 0}}, "edges": {}}
-
-    await client.post("/api/v1/canvas/save", json={"nodes": [], "edges": [], "viewport": {}, "custom_style": style_v1}, headers=headers)
-    await client.post("/api/v1/canvas/save", json={"nodes": [], "edges": [], "viewport": {}, "custom_style": style_v2}, headers=headers)
-
-    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
-    assert "proxmox" in canvas["custom_style"]["nodes"]
-    assert "server" not in canvas["custom_style"]["nodes"]

backend/tests/test_db_backup.py

@@ -1,57 +0,0 @@
-"""
-Tests for automatic DB backup before migrations.
-"""
-import os
-
-os.environ.setdefault("SECRET_KEY", "test-only-secret-key-not-for-production")
-
-from pathlib import Path
-from unittest.mock import patch
-
-import pytest
-
-from app.db.database import _backup_db
-
-
-@pytest.fixture()
-def tmp_db(tmp_path: Path):
-    db = tmp_path / "homelab.db"
-    db.write_bytes(b"SQLite placeholder")
-    return db
-
-
-def test_backup_created_when_db_exists(tmp_db: Path):
-    with patch("app.db.database.settings") as mock_settings, \
-         patch("app.db.database.APP_VERSION", "1.9"):
-        mock_settings.sqlite_path = str(tmp_db)
-        _backup_db()
-        backup = tmp_db.parent / "homelab.db.back-1.9"
-        assert backup.exists()
-        assert backup.read_bytes() == b"SQLite placeholder"
-
-
-def test_backup_skipped_when_db_missing(tmp_path: Path):
-    with patch("app.db.database.settings") as mock_settings, \
-         patch("app.db.database.APP_VERSION", "1.9"):
-        mock_settings.sqlite_path = str(tmp_path / "nonexistent.db")
-        _backup_db()
-        assert not any(tmp_path.glob("*.back-*"))
-
-
-def test_backup_idempotent_second_call_no_overwrite(tmp_db: Path):
-    with patch("app.db.database.settings") as mock_settings, \
-         patch("app.db.database.APP_VERSION", "1.9"):
-        mock_settings.sqlite_path = str(tmp_db)
-        _backup_db()
-        backup = tmp_db.parent / "homelab.db.back-1.9"
-        backup.write_bytes(b"original backup")
-        _backup_db()
-        assert backup.read_bytes() == b"original backup"
-
-
-def test_backup_version_in_filename(tmp_db: Path):
-    with patch("app.db.database.settings") as mock_settings, \
-         patch("app.db.database.APP_VERSION", "2.0"):
-        mock_settings.sqlite_path = str(tmp_db)
-        _backup_db()
-        assert (tmp_db.parent / "homelab.db.back-2.0").exists()

backend/tests/test_docker_migration.py

@@ -0,0 +1,96 @@
+"""
+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_scan.py

@@ -120,7 +120,8 @@ async def test_approve_nonexistent_device(client: AsyncClient, headers):
         json=node_payload,
         headers=headers,
     )
-    assert res.status_code == 404
+    assert res.status_code == 200
+    assert res.json()["approved"] is False
 
 
 # --- Hide device ---
@@ -443,102 +444,3 @@ async def test_run_scan_updates_existing_pending_device(db_session: AsyncSession
     # Services and hostname should be updated
     assert device.hostname == "myhost.lan"
     assert any(s["port"] == 8096 for s in device.services)
-
-
-# --- Bulk approve ---
-
-@pytest.fixture
-async def two_pending_devices(db_session):
-    devices = []
-    for i in range(2):
-        d = PendingDevice(
-            id=str(uuid.uuid4()),
-            ip=f"192.168.1.{10 + i}",
-            mac=None,
-            hostname=f"host-{i}",
-            os=None,
-            services=[],
-            suggested_type="generic",
-            status="pending",
-        )
-        db_session.add(d)
-        devices.append(d)
-    await db_session.commit()
-    for d in devices:
-        await db_session.refresh(d)
-    return devices
-
-
-@pytest.mark.asyncio
-async def test_bulk_approve_approves_devices(client: AsyncClient, headers, two_pending_devices):
-    ids = [d.id for d in two_pending_devices]
-    res = await client.post("/api/v1/scan/pending/bulk-approve", json={"device_ids": ids}, headers=headers)
-    assert res.status_code == 200
-    data = res.json()
-    assert data["approved"] == 2
-    assert len(data["node_ids"]) == 2
-    assert all(nid is not None for nid in data["node_ids"]), "node_ids must be non-null UUIDs"
-    assert len(data["device_ids"]) == 2
-    assert data["skipped"] == 0
-    # Pending list should now be empty
-    pending_res = await client.get("/api/v1/scan/pending", headers=headers)
-    assert pending_res.json() == []
-
-
-@pytest.mark.asyncio
-async def test_bulk_approve_skips_already_approved(client: AsyncClient, headers, two_pending_devices):
-    ids = [d.id for d in two_pending_devices]
-    # Approve first device individually first
-    await client.post(
-        f"/api/v1/scan/pending/{ids[0]}/approve",
-        json={"label": "h", "type": "generic", "ip": "192.168.1.10", "status": "unknown", "services": []},
-        headers=headers,
-    )
-    # Bulk approve both — first one is already approved (not pending), should be skipped
-    res = await client.post("/api/v1/scan/pending/bulk-approve", json={"device_ids": ids}, headers=headers)
-    assert res.status_code == 200
-    data = res.json()
-    assert data["approved"] == 1
-    assert data["skipped"] == 1
-
-
-@pytest.mark.asyncio
-async def test_bulk_approve_requires_auth(client: AsyncClient, two_pending_devices):
-    ids = [d.id for d in two_pending_devices]
-    res = await client.post("/api/v1/scan/pending/bulk-approve", json={"device_ids": ids})
-    assert res.status_code == 401
-
-
-# --- Bulk hide ---
-
-@pytest.mark.asyncio
-async def test_bulk_hide_hides_devices(client: AsyncClient, headers, two_pending_devices):
-    ids = [d.id for d in two_pending_devices]
-    res = await client.post("/api/v1/scan/pending/bulk-hide", json={"device_ids": ids}, headers=headers)
-    assert res.status_code == 200
-    data = res.json()
-    assert data["hidden"] == 2
-    assert data["skipped"] == 0
-    # Should appear in hidden list
-    hidden_res = await client.get("/api/v1/scan/hidden", headers=headers)
-    assert len(hidden_res.json()) == 2
-
-
-@pytest.mark.asyncio
-async def test_bulk_hide_skips_non_pending(client: AsyncClient, headers, two_pending_devices):
-    ids = [d.id for d in two_pending_devices]
-    # Hide first device individually first
-    await client.post(f"/api/v1/scan/pending/{ids[0]}/hide", headers=headers)
-    # Bulk hide both — first is already hidden (not pending anymore)
-    res = await client.post("/api/v1/scan/pending/bulk-hide", json={"device_ids": ids}, headers=headers)
-    assert res.status_code == 200
-    data = res.json()
-    assert data["hidden"] == 1
-    assert data["skipped"] == 1
-
-
-@pytest.mark.asyncio
-async def test_bulk_hide_requires_auth(client: AsyncClient, two_pending_devices):
-    ids = [d.id for d in two_pending_devices]
-    res = await client.post("/api/v1/scan/pending/bulk-hide", json={"device_ids": ids})
-    assert res.status_code == 401

frontend/package-lock.json

@@ -1,19 +1,18 @@
 {
   "name": "frontend",
-  "version": "1.10.2",
+  "version": "1.8.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.10.2",
+      "version": "1.8.2",
       "dependencies": {
         "@base-ui/react": "^1.2.0",
         "@dagrejs/dagre": "^2.0.4",
         "@fontsource-variable/geist": "^5.2.8",
         "@fontsource-variable/inter": "^5.2.8",
         "@fontsource/jetbrains-mono": "^5.2.8",
-        "@radix-ui/react-tooltip": "^1.2.8",
         "@types/js-yaml": "^4.0.9",
         "@xyflow/react": "^12.10.1",
         "axios": "^1.13.6",
@@ -2012,415 +2011,6 @@
       "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
       "license": "MIT"
     },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
-      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
-      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-context": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
-      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-escape-keydown": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-id": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
-      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
-      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-rect": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1",
-        "@radix-ui/rect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
-      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
-      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
-      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-slot": "1.2.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
-      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.11",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.8",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.5",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-visually-hidden": "1.2.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
-      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-effect-event": "0.0.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-effect-event": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
-      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
-      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-callback-ref": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-rect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
-      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/rect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-size": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
-      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
-      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/rect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
-      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
-      "license": "MIT"
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -3434,7 +3024,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.13.0",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,6 @@
     "@fontsource-variable/geist": "^5.2.8",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@types/js-yaml": "^4.0.9",
     "@xyflow/react": "^12.10.1",
     "axios": "^1.13.6",

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { applyDagreLayout } from '@/utils/layout'
 import { serializeNode, serializeEdge, deserializeApiNode, deserializeApiEdge, type ApiNode, type ApiEdge } from '@/utils/canvasSerializer'
 import { generateUUID } from '@/utils/uuid'
 import { generateMarkdownTable } from '@/utils/exportMarkdown'
-import { ExportModal } from '@/components/modals/ExportModal'
+import { exportToPng } from '@/utils/export'
 import { exportCanvasToYaml, downloadYaml } from '@/utils/exportYaml'
 import { parseYamlToCanvas } from '@/utils/importYaml'
 import { TooltipProvider } from '@/components/ui/tooltip'
@@ -29,17 +29,17 @@ import { useThemeStore } from '@/stores/themeStore'
 import { canvasApi } from '@/api/client'
 import { demoNodes, demoEdges } from '@/utils/demoData'
 import { useStatusPolling } from '@/hooks/useStatusPolling'
-import type { NodeData, EdgeData, CustomStyleDef } from '@/types'
+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', 'vm', 'lxc', 'docker_host'])
+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 canvasRef = useRef<HTMLDivElement>(null)
   const { isAuthenticated } = useAuthStore()
-  const { activeTheme, setTheme, customStyle, setCustomStyle } = useThemeStore()
+  const { activeTheme, setTheme } = useThemeStore()
 
   useStatusPolling()
 
@@ -54,26 +54,25 @@ export default function App() {
   const [pendingConnection, setPendingConnection] = useState<Connection | null>(null)
   const [editEdgeId, setEditEdgeId] = useState<string | null>(null)
   const [scanConfigOpen, setScanConfigOpen] = useState(false)
-  const [exportModalOpen, setExportModalOpen] = useState(false)
 
   // Declare handleSave before the Ctrl+S effect so it is in scope
   const handleSave = useCallback(async () => {
     try {
       if (STANDALONE) {
-        localStorage.setItem(STANDALONE_STORAGE_KEY, JSON.stringify({ nodes, edges, theme_id: activeTheme, custom_style: customStyle }))
+        localStorage.setItem(STANDALONE_STORAGE_KEY, JSON.stringify({ nodes, edges, theme_id: activeTheme }))
         markSaved()
         toast.success('Canvas saved')
         return
       }
       const nodesToSave = nodes.map(serializeNode)
       const edgesToSave = edges.map(serializeEdge)
-      await canvasApi.save({ nodes: nodesToSave, edges: edgesToSave, viewport: { theme_id: activeTheme }, custom_style: customStyle })
+      await canvasApi.save({ nodes: nodesToSave, edges: edgesToSave, viewport: { theme_id: activeTheme } })
       markSaved()
       toast.success('Canvas saved')
     } catch {
       toast.error('Save failed')
     }
-  }, [nodes, edges, markSaved, activeTheme, customStyle])
+  }, [nodes, edges, markSaved, activeTheme])
 
   // Keep a ref so the keydown handler always calls the latest version
   const handleSaveRef = useRef(handleSave)
@@ -85,9 +84,8 @@ export default function App() {
       try {
         const saved = localStorage.getItem(STANDALONE_STORAGE_KEY)
         if (saved) {
-          const { nodes: savedNodes, edges: savedEdges, theme_id, custom_style } = JSON.parse(saved)
+          const { nodes: savedNodes, edges: savedEdges, theme_id } = JSON.parse(saved)
           if (theme_id) setTheme(theme_id)
-          if (custom_style) setCustomStyle(custom_style)
           loadCanvas(savedNodes, savedEdges)
         } else {
           loadCanvas(demoNodes, demoEdges)
@@ -102,7 +100,7 @@ export default function App() {
       .then((res) => {
         const { nodes: apiNodes, edges: apiEdges } = res.data
         if (apiNodes.length > 0) {
-          // Build a map of container mode nodes to know if children should be nested
+          // 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)
@@ -112,14 +110,13 @@ export default function App() {
           const rfEdges = (apiEdges as ApiEdge[]).map(deserializeApiEdge)
           const savedTheme = res.data.viewport?.theme_id
           if (savedTheme) setTheme(savedTheme)
-          if (res.data.custom_style) setCustomStyle(res.data.custom_style as CustomStyleDef)
           loadCanvas(rfNodes, rfEdges)
         } else {
           loadCanvas(demoNodes, demoEdges)
         }
       })
       .catch(() => loadCanvas(demoNodes, demoEdges))
-  }, [isAuthenticated, loadCanvas, setTheme, setCustomStyle])
+  }, [isAuthenticated, loadCanvas, setTheme])
 
   // Keep refs for store actions so keydown handler is always up-to-date without re-registering
   const undoRef = useRef(undo)
@@ -154,7 +151,7 @@ export default function App() {
   const handleAddNode = useCallback((data: Partial<NodeData>) => {
     snapshotHistory()
     const id = generateUUID()
-    const isContainerNode = data.container_mode === true
+    const isProxmox = data.type === 'proxmox'
     const parentNode = data.parent_id ? nodes.find((n) => n.id === data.parent_id) : null
     // Children position is relative to parent; place near top-left with padding
     const position = parentNode
@@ -167,7 +164,7 @@ export default function App() {
       position,
       data: { status: 'unknown', services: [], ...data } as NodeData,
       ...(data.parent_id ? { parentId: data.parent_id, extent: 'parent' as const } : {}),
-      ...(isContainerNode ? { width: 300, height: 200 } : {}),
+      ...(isProxmox ? { width: 300, height: 200 } : {}),
     }
     addNode(newNode)
     toast.success(`Added "${data.label}"`)
@@ -251,7 +248,7 @@ export default function App() {
     }
     // Sync virtual edge when parent_id changes on an LXC/VM node
     const nodeType = data.type ?? existingNode?.data.type
-    if ((nodeType === 'lxc' || nodeType === 'vm' || nodeType === 'docker_container') && 'parent_id' in data) {
+    if ((nodeType === 'lxc' || nodeType === 'vm') && 'parent_id' in data) {
       const oldParentId = existingNode?.data.parent_id ?? null
       const newParentId = data.parent_id ?? null
       if (oldParentId !== newParentId) {
@@ -309,10 +306,15 @@ export default function App() {
     }
   }, [nodes, edges, snapshotHistory, loadCanvas, markUnsaved])
 
-  const handleExport = useCallback(() => {
+  const handleExport = useCallback(async () => {
     const el = canvasRef.current?.querySelector<HTMLElement>('.react-flow')
     if (!el) { toast.error('Canvas not ready'); return }
-    setExportModalOpen(true)
+    try {
+      await exportToPng(el)
+      toast.success('Exported as PNG')
+    } catch {
+      toast.error('Export failed')
+    }
   }, [])
 
   const handleEdgeConnect = useCallback((connection: Connection) => {
@@ -323,19 +325,15 @@ export default function App() {
     if (!pendingConnection) return
     snapshotHistory()
     onConnect({ ...pendingConnection, ...edgeData } as unknown as Connection)
-    // When a virtual edge is drawn between a child node and a container node, sync parent_id
+    // When a virtual edge is drawn between LXC/VM (top) and Proxmox (bottom), sync parent_id
     if (edgeData.type === 'virtual') {
       const src = nodes.find((n) => n.id === pendingConnection.source)
       const tgt = nodes.find((n) => n.id === pendingConnection.target)
-      const srcType = src?.data.type as NodeData['type']
-      const tgtType = tgt?.data.type as NodeData['type']
-      if ((srcType === 'lxc' || srcType === 'vm') && CONTAINER_MODE_TYPES.has(tgtType)) {
+      const srcType = src?.data.type
+      const tgtType = tgt?.data.type
+      if ((srcType === 'lxc' || srcType === 'vm') && tgtType === 'proxmox') {
         updateNode(pendingConnection.source, { parent_id: pendingConnection.target })
-      } else if (CONTAINER_MODE_TYPES.has(srcType) && (tgtType === 'lxc' || tgtType === 'vm')) {
-        updateNode(pendingConnection.target, { parent_id: pendingConnection.source })
-      } else if (srcType === 'docker_container' && tgtType === 'docker_host') {
-        updateNode(pendingConnection.source, { parent_id: pendingConnection.target })
-      } else if (tgtType === 'docker_container' && srcType === 'docker_host') {
+      } else if (srcType === 'proxmox' && (tgtType === 'lxc' || tgtType === 'vm')) {
         updateNode(pendingConnection.target, { parent_id: pendingConnection.source })
       }
     }
@@ -425,14 +423,13 @@ export default function App() {
         </div>
 
         <NodeModal
-          key={addNodeOpen ? 'add-open' : 'add-closed'}
           open={addNodeOpen}
           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, nodeType: n.data.type }))}
+            .map((n) => ({ id: n.id, label: n.data.label }))}
         />
 
         {/* key forces re-mount when editing a different node, resetting form state */}
@@ -445,7 +442,7 @@ export default function App() {
           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, nodeType: n.data.type }))}
+            .map((n) => ({ id: n.id, label: n.data.label }))}
         />
 
         <EdgeModal
@@ -539,12 +536,6 @@ export default function App() {
         />
         <ShortcutsModal open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
 
-        <ExportModal
-          open={exportModalOpen}
-          onClose={() => setExportModalOpen(false)}
-          getElement={() => canvasRef.current?.querySelector<HTMLElement>('.react-flow') ?? null}
-        />
-
         <Toaster theme="dark" position="bottom-right" />
       </ReactFlowProvider>
     </TooltipProvider>

frontend/src/api/client.ts

@@ -33,7 +33,6 @@ export const canvasApi = {
     nodes: object[]
     edges: object[]
     viewport: object
-    custom_style?: object | null
   }) => api.post('/canvas/save', payload),
 }
 
@@ -61,8 +60,6 @@ export const scanApi = {
   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`),
-  bulkApprove: (ids: string[]) => api.post<{ approved: number; node_ids: string[]; device_ids: string[]; skipped: number }>('/scan/pending/bulk-approve', { device_ids: ids }),
-  bulkHide: (ids: string[]) => api.post<{ hidden: number; skipped: number }>('/scan/pending/bulk-hide', { device_ids: ids }),
   stop: (runId: string) => api.post(`/scan/${runId}/stop`),
   getConfig: () => api.get<{ ranges: string[] }>('/scan/config'),
   saveConfig: (data: { ranges: string[] }) => api.post('/scan/config', data),

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

@@ -11,7 +11,6 @@ vi.mock('@xyflow/react', () => ({
   Controls: () => null,
   BackgroundVariant: { Dots: 'dots' },
   ConnectionMode: { Loose: 'loose' },
-  Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
   useReactFlow: () => ({ fitView: vi.fn() }),
 }))
 vi.mock('@xyflow/react/dist/style.css', () => ({}))
@@ -144,7 +143,6 @@ const XYFLOW_MOCK = {
   Controls: () => null,
   BackgroundVariant: { Dots: 'dots' },
   ConnectionMode: { Loose: 'loose' },
-  Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
   useReactFlow: () => ({ fitView: vi.fn() }),
 }
 

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

@@ -48,7 +48,6 @@ vi.mock('@/utils/nodeIcons', () => ({
 
 vi.mock('@/utils/maskIp', () => ({
   maskIp: (ip: string) => ip,
-  splitIps: (ip: string) => ip ? ip.split(',').map((s: string) => s.trim()).filter(Boolean) : [],
 }))
 
 vi.mock('@/utils/propertyIcons', () => ({
@@ -56,9 +55,8 @@ vi.mock('@/utils/propertyIcons', () => ({
 }))
 
 vi.mock('@/utils/handleUtils', () => ({
-  bottomHandleId: (idx: number) => idx === 0 ? 'bottom' : `bottom-${idx + 1}`,
-  bottomHandlePositions: () => [50],
-  clampBottomHandles: (n: unknown) => typeof n === 'number' ? n : 1,
+  BOTTOM_HANDLE_IDS: ['bottom'],
+  BOTTOM_HANDLE_POSITIONS: { 1: [50] },
 }))
 
 beforeEach(() => { mockZoom = 1 })

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

@@ -20,7 +20,6 @@ vi.mock('@xyflow/react', () => ({
   BackgroundVariant: { Dots: 'dots' },
   ConnectionMode: { Loose: 'loose' },
   SelectionMode: { Partial: 'partial' },
-  Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
   useReactFlow: () => ({ fitView: vi.fn() }),
 }))
 

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { GroupNode } from '../nodes/GroupNode'
 import * as canvasStore from '@/stores/canvasStore'
 import type { Node } from '@xyflow/react'
@@ -102,19 +102,6 @@ describe('GroupNode', () => {
     expect(screen.getByTestId('node-resizer').getAttribute('data-visible')).toBe('true')
   })
 
-  it('allows dragging from the header while keeping rename controls nodrag', () => {
-    renderGroupNode({ selected: true })
-
-    expect(screen.getByText('My Group').closest('div')).not.toHaveClass('nodrag')
-
-    const renameButton = screen.getByTitle('Rename group')
-    expect(renameButton).toHaveClass('nodrag')
-
-    fireEvent.click(renameButton)
-
-    expect(screen.getByDisplayValue('My Group')).toHaveClass('nodrag')
-  })
-
   it('shows online/offline status summary from children', () => {
     const storeNodes = [
       { id: 'c1', parentId: 'g1', data: { status: 'online' } },

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

@@ -1,77 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { GroupRectNode } from '../nodes/GroupRectNode'
-import type { NodeData } from '@/types'
-import type { Node } from '@xyflow/react'
-
-vi.mock('@xyflow/react', () => ({
-  Handle: ({ id, type }: { id: string; type: string }) => <div data-testid={`handle-${id}`} data-type={type} />,
-  Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
-  NodeResizer: () => null,
-}))
-
-vi.mock('@/stores/canvasStore', () => ({
-  useCanvasStore: (sel: (s: { setEditingGroupRectId: () => void }) => unknown) =>
-    sel({ setEditingGroupRectId: vi.fn() }),
-}))
-
-function makeNode(overrides: Partial<NodeData> = {}): Node<NodeData> {
-  return {
-    id: 'zone1',
-    type: 'groupRect',
-    position: { x: 0, y: 0 },
-    data: { label: 'My Zone', type: 'groupRect', status: 'unknown', services: [], ...overrides },
-  }
-}
-
-function renderZone(overrides: Partial<NodeData> = {}) {
-  const node = makeNode(overrides)
-  return render(
-    <GroupRectNode
-      id={node.id}
-      data={node.data}
-      selected={false}
-      type="groupRect"
-      dragging={false}
-      zIndex={0}
-      isConnectable={true}
-      positionAbsoluteX={0}
-      positionAbsoluteY={0}
-    />
-  )
-}
-
-describe('GroupRectNode — handles', () => {
-  it('renders source handles on all four sides', () => {
-    renderZone()
-    expect(screen.getByTestId('handle-zone-top')).toBeDefined()
-    expect(screen.getByTestId('handle-zone-right')).toBeDefined()
-    expect(screen.getByTestId('handle-zone-bottom')).toBeDefined()
-    expect(screen.getByTestId('handle-zone-left')).toBeDefined()
-  })
-
-  it('renders target handles on all four sides', () => {
-    renderZone()
-    expect(screen.getByTestId('handle-zone-top-t')).toBeDefined()
-    expect(screen.getByTestId('handle-zone-right-t')).toBeDefined()
-    expect(screen.getByTestId('handle-zone-bottom-t')).toBeDefined()
-    expect(screen.getByTestId('handle-zone-left-t')).toBeDefined()
-  })
-
-  it('renders 8 handles total (4 source + 4 target)', () => {
-    renderZone()
-    expect(screen.getAllByTestId(/^handle-zone-/).length).toBe(8)
-  })
-})
-
-describe('GroupRectNode — label', () => {
-  it('renders inside label by default', () => {
-    renderZone({ label: 'DMZ' })
-    expect(screen.getByText('DMZ')).toBeDefined()
-  })
-
-  it('renders no label when label is empty', () => {
-    renderZone({ label: '' })
-    expect(screen.queryByText('DMZ')).toBeNull()
-  })
-})

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { buildWaypointPath, distToSegment, findInsertIndex, getAddWaypointHandlePosition, getWaypointLabelPosition, snap45, snap45both } from '../waypointUtils'
+import { buildWaypointPath, distToSegment, findInsertIndex, snap45, snap45both } from '../waypointUtils'
 
 describe('buildWaypointPath — bezier (default)', () => {
   it('builds a catmull-rom curve with no waypoints (start = end clamp)', () => {
@@ -173,35 +173,3 @@ describe('findInsertIndex', () => {
     expect(idx).toBe(2)
   })
 })
-
-describe('getWaypointLabelPosition', () => {
-  it('uses the routed midpoint for a symmetric bezier waypoint path', () => {
-    const point = getWaypointLabelPosition(0, 0, [{ x: 50, y: 100 }], 100, 0)
-    expect(point.x).toBeCloseTo(50, 0)
-    expect(point.y).toBeCloseTo(100, 0)
-  })
-
-  it('uses the routed midpoint for a smooth waypoint path', () => {
-    const point = getWaypointLabelPosition(0, 0, [{ x: 50, y: 0 }, { x: 50, y: 100 }], 100, 100, 'smooth')
-    expect(point.x).toBeCloseTo(50, 0)
-    expect(point.y).toBeCloseTo(50, 0)
-  })
-
-  it('falls back to the source point when the path is degenerate', () => {
-    const point = getWaypointLabelPosition(10, 20, [], 10, 20, 'smooth')
-    expect(point).toEqual({ x: 10, y: 20 })
-  })
-})
-
-describe('getAddWaypointHandlePosition', () => {
-  it('places bezier add handle on the rendered curved segment', () => {
-    const point = getAddWaypointHandlePosition(0, 0, [{ x: 50, y: 100 }], 100, 0, 0, 'bezier')
-    expect(point.x).toBeCloseTo(21.875, 3)
-    expect(point.y).toBeCloseTo(56.25, 3)
-  })
-
-  it('keeps smooth add handle at straight segment midpoint', () => {
-    const point = getAddWaypointHandlePosition(0, 0, [{ x: 50, y: 0 }, { x: 50, y: 100 }], 100, 100, 1, 'smooth')
-    expect(point).toEqual({ x: 50, y: 50 })
-  })
-})

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

@@ -13,7 +13,7 @@ import type { EdgeData, EdgeType, Waypoint } from '@/types'
 import { useThemeStore } from '@/stores/themeStore'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { THEMES } from '@/utils/themes'
-import { buildWaypointPath, getAddWaypointHandlePosition, getWaypointLabelPosition, snap45, snap45both } from './waypointUtils'
+import { buildWaypointPath, snap45, snap45both } from './waypointUtils'
 
 const VLAN_COLORS = ['#00d4ff', '#a855f7', '#39d353', '#ff6e00', '#e3b341', '#f85149']
 
@@ -161,9 +161,9 @@ function segmentMidpoints(
   const isSmooth = pathStyle === 'smooth'
 
   return pts.slice(0, -1).map((a, i) => {
-    const base = getAddWaypointHandlePosition(sourceX, sourceY, waypoints, targetX, targetY, i, pathStyle)
-    let mx = base.x
-    const my = base.y
+    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.
@@ -205,9 +205,8 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
     ? buildWaypointPath(sourceX, sourceY, waypoints, targetX, targetY, pathStyle)
     : autoPath
 
-  const labelPosition = hasWaypoints
-    ? getWaypointLabelPosition(sourceX, sourceY, waypoints, targetX, targetY, pathStyle)
-    : { x: labelX, y: (sourceY + targetY) / 2 }
+  const midX = hasWaypoints ? (sourceX + targetX) / 2 : labelX
+  const midY = (sourceY + targetY) / 2
 
   const edgeType: EdgeType = data?.type ?? 'ethernet'
   const edgeColors = theme.colors.edgeColors
@@ -301,7 +300,7 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           <div
             className="absolute pointer-events-none font-mono text-[10px] px-1.5 py-0.5 rounded"
             style={{
-              transform: `translate(-50%, -50%) translate(${labelPosition.x}px, ${labelPosition.y}px)`,
+              transform: `translate(-50%, -50%) translate(${midX}px, ${midY}px)`,
               background: theme.colors.edgeLabelBackground,
               color:      theme.colors.edgeLabelColor,
               border:     `1px solid ${theme.colors.edgeLabelBorder}`,

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

@@ -72,216 +72,6 @@ export function buildWaypointPath(
   return pathStyle === 'smooth' ? buildRoundedPolylinePath(pts) : buildCatmullRomPath(pts)
 }
 
-function interpolateLine(a: Waypoint, b: Waypoint, t: number): Waypoint {
-  return {
-    x: a.x + (b.x - a.x) * t,
-    y: a.y + (b.y - a.y) * t,
-  }
-}
-
-function interpolateQuadratic(a: Waypoint, b: Waypoint, c: Waypoint, t: number): Waypoint {
-  const mt = 1 - t
-  return {
-    x: mt * mt * a.x + 2 * mt * t * b.x + t * t * c.x,
-    y: mt * mt * a.y + 2 * mt * t * b.y + t * t * c.y,
-  }
-}
-
-function interpolateCubic(a: Waypoint, b: Waypoint, c: Waypoint, d: Waypoint, t: number): Waypoint {
-  const mt = 1 - t
-  return {
-    x: mt * mt * mt * a.x + 3 * mt * mt * t * b.x + 3 * mt * t * t * c.x + t * t * t * d.x,
-    y: mt * mt * mt * a.y + 3 * mt * mt * t * b.y + 3 * mt * t * t * c.y + t * t * t * d.y,
-  }
-}
-
-function approximateLength(pointAt: (t: number) => Waypoint, steps = 24): number {
-  let length = 0
-  let prev = pointAt(0)
-
-  for (let step = 1; step <= steps; step++) {
-    const next = pointAt(step / steps)
-    length += Math.hypot(next.x - prev.x, next.y - prev.y)
-    prev = next
-  }
-
-  return length
-}
-
-type PathSegment = {
-  length: number
-  pointAt: (t: number) => Waypoint
-}
-
-function buildBezierSegments(pts: Waypoint[]): PathSegment[] {
-  if (pts.length < 2) return []
-
-  return pts.slice(0, -1).map((_, 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 cp1 = {
-      x: p1.x + (p2.x - p0.x) / 6,
-      y: p1.y + (p2.y - p0.y) / 6,
-    }
-    const cp2 = {
-      x: p2.x - (p3.x - p1.x) / 6,
-      y: p2.y - (p3.y - p1.y) / 6,
-    }
-    const pointAt = (t: number) => interpolateCubic(p1, cp1, cp2, p2, t)
-
-    return {
-      length: approximateLength(pointAt),
-      pointAt,
-    }
-  })
-}
-
-function buildSmoothSegments(pts: Waypoint[], radius = 8): PathSegment[] {
-  if (pts.length < 2) return []
-  if (pts.length === 2) {
-    const pointAt = (t: number) => interpolateLine(pts[0], pts[1], t)
-    return [{ length: Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y), pointAt }]
-  }
-
-  const segments: PathSegment[] = []
-  let cursor = pts[0]
-
-  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) {
-      const start = { x: cursor.x, y: cursor.y }
-      const end = { x: curr.x, y: curr.y }
-      const lineToCurr = (t: number) => interpolateLine(start, end, t)
-      segments.push({
-        length: Math.hypot(curr.x - cursor.x, curr.y - cursor.y),
-        pointAt: lineToCurr,
-      })
-      cursor = curr
-      continue
-    }
-
-    const r = Math.min(radius, len1 / 2, len2 / 2)
-    const before = {
-      x: curr.x - (dx1 / len1) * r,
-      y: curr.y - (dy1 / len1) * r,
-    }
-    const after = {
-      x: curr.x + (dx2 / len2) * r,
-      y: curr.y + (dy2 / len2) * r,
-    }
-
-    const lineStart = { x: cursor.x, y: cursor.y }
-    const lineEnd = { x: before.x, y: before.y }
-    const lineToBefore = (t: number) => interpolateLine(lineStart, lineEnd, t)
-    segments.push({
-      length: Math.hypot(before.x - cursor.x, before.y - cursor.y),
-      pointAt: lineToBefore,
-    })
-
-    const curveAroundCorner = (t: number) => interpolateQuadratic(before, curr, after, t)
-    segments.push({
-      length: approximateLength(curveAroundCorner),
-      pointAt: curveAroundCorner,
-    })
-
-    cursor = after
-  }
-
-  const targetStart = { x: cursor.x, y: cursor.y }
-  const targetEnd = { x: pts[pts.length - 1].x, y: pts[pts.length - 1].y }
-  const lineToTarget = (t: number) => interpolateLine(targetStart, targetEnd, t)
-  segments.push({
-    length: Math.hypot(pts[pts.length - 1].x - cursor.x, pts[pts.length - 1].y - cursor.y),
-    pointAt: lineToTarget,
-  })
-
-  return segments
-}
-
-export function getWaypointLabelPosition(
-  sourceX: number, sourceY: number,
-  waypoints: Waypoint[],
-  targetX: number, targetY: number,
-  pathStyle: string = 'bezier',
-): Waypoint {
-  const pts = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
-  const segments = pathStyle === 'smooth' ? buildSmoothSegments(pts) : buildBezierSegments(pts)
-
-  if (segments.length === 0) return pts[0]
-
-  const totalLength = segments.reduce((sum, segment) => sum + segment.length, 0)
-  if (totalLength <= 0) return pts[Math.floor(pts.length / 2)]
-
-  let remaining = totalLength / 2
-  for (const segment of segments) {
-    if (remaining <= segment.length) {
-      const t = segment.length === 0 ? 0 : remaining / segment.length
-      return segment.pointAt(t)
-    }
-    remaining -= segment.length
-  }
-
-  const lastSegment = segments[segments.length - 1]
-  return lastSegment.pointAt(1)
-}
-
-function getBezierSegmentPoint(
-  pts: Waypoint[],
-  insertIndex: number,
-  t: number,
-): Waypoint {
-  const i = Math.max(0, Math.min(insertIndex, pts.length - 2))
-  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 cp1 = {
-    x: p1.x + (p2.x - p0.x) / 6,
-    y: p1.y + (p2.y - p0.y) / 6,
-  }
-  const cp2 = {
-    x: p2.x - (p3.x - p1.x) / 6,
-    y: p2.y - (p3.y - p1.y) / 6,
-  }
-
-  return interpolateCubic(p1, cp1, cp2, p2, t)
-}
-
-export function getAddWaypointHandlePosition(
-  sourceX: number, sourceY: number,
-  waypoints: Waypoint[],
-  targetX: number, targetY: number,
-  insertIndex: number,
-  pathStyle: string = 'bezier',
-): Waypoint {
-  const pts = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
-
-  if (pts.length < 2) return { x: sourceX, y: sourceY }
-
-  if (pathStyle !== 'smooth') {
-    return getBezierSegmentPoint(pts, insertIndex, 0.5)
-  }
-
-  const i = Math.max(0, Math.min(insertIndex, pts.length - 2))
-  return {
-    x: (pts[i].x + pts[i + 1].x) / 2,
-    y: (pts[i].y + pts[i + 1].y) / 2,
-  }
-}
-
 // ── 45° snapping ──────────────────────────────────────────────────────────────
 
 /**

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

@@ -8,8 +8,8 @@ import { resolvePropertyIcon } from '@/utils/propertyIcons'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { maskIp, splitIps } from '@/utils/maskIp'
-import { bottomHandleId, bottomHandlePositions, clampBottomHandles } from '@/utils/handleUtils'
+import { maskIp } from '@/utils/maskIp'
+import { BOTTOM_HANDLE_IDS, BOTTOM_HANDLE_POSITIONS } from '@/utils/handleUtils'
 
 interface BaseNodeProps extends NodeProps<Node<NodeData>> {
   icon: LucideIcon
@@ -43,7 +43,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
 
   return (
     <div
-      className="relative flex flex-col rounded-lg border transition-all duration-200 overflow-hidden"
+      className="relative flex flex-col rounded-lg border transition-all duration-200"
       style={{
         background: colors.background,
         borderColor: colors.border,
@@ -56,8 +56,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
           ? `0 0 0 ${borderWidth}px ${colors.border}, 0 0 8px ${colors.border}44`
           : 'none',
         opacity: data.status === 'offline' ? 0.55 : 1,
-        // Grow node width when many bottom handles so each stays clickable (~14px slot).
-        minWidth: Math.max(140, clampBottomHandles(data.bottom_handles ?? 1) * 14),
+        minWidth: 140,
         width: width ? '100%' : undefined,
         height: height ? '100%' : undefined,
       }}
@@ -67,7 +66,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         minWidth={140}
         minHeight={50}
         lineStyle={{ borderColor: 'transparent' }}
-        handleStyle={{ borderColor: colors.border, background: colors.border, width: 16, height: 16 }}
+        handleStyle={{ borderColor: colors.border, background: colors.border, width: 8, height: 8 }}
       />
       <Handle
         type="source"
@@ -77,15 +76,8 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
       />
       <Handle type="target" position={Position.Top} id="top-t" style={{ opacity: 0, width: 12, height: 12 }} />
 
-      {/* Status dot — absolute to avoid affecting node auto-width */}
-      <div
-        className="absolute top-2 right-2 w-1.5 h-1.5 rounded-full"
-        style={{ backgroundColor: statusColor }}
-        title={data.status}
-      />
-
       {/* Main row */}
-      <div className="flex flex-row items-center gap-2.5 px-2.5 py-2 min-w-0 overflow-hidden">
+      <div className="flex flex-row items-center gap-2.5 px-2.5 py-2">
         {/* Icon */}
         <div
           className="flex items-center justify-center w-7 h-7 rounded-md shrink-0"
@@ -106,16 +98,15 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
           >
             {data.label}
           </div>
-          {data.ip && splitIps(data.ip).map((ip) => (
+          {data.ip && (
             <div
-              key={ip}
               className="font-mono text-[10px] truncate"
               style={{ color: theme.colors.nodeSubtextColor }}
-              title={ip}
+              title={data.ip}
             >
-              {hideIp ? maskIp(ip) : ip}
+              {hideIp ? maskIp(data.ip) : data.ip}
             </div>
-          ))}
+          )}
         </div>
       </div>
 
@@ -123,14 +114,14 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
       {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 overflow-hidden">
+          <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] min-w-0 overflow-hidden" style={{ color: theme.colors.nodeSubtextColor }}>
+                <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-15 shrink-0" title={prop.key}>{prop.key}</span>
-                  <span className="truncate min-w-0" title={prop.value}>· {prop.value}</span>
+                  <span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
+                  <span className="truncate" title={prop.value}>· {prop.value}</span>
                 </div>
               )
             })}
@@ -147,7 +138,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
               <div className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
                 <Cpu size={9} className="shrink-0" />
                 {data.cpu_model && (
-                  <span className="truncate max-w-20" title={data.cpu_model}>{data.cpu_model}</span>
+                  <span className="truncate max-w-[80px]" title={data.cpu_model}>{data.cpu_model}</span>
                 )}
                 {data.cpu_count != null && (
                   <span className="shrink-0">{data.cpu_model ? `· ${data.cpu_count}c` : `${data.cpu_count} cores`}</span>
@@ -174,9 +165,16 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         </>
       )}
 
-      {bottomHandlePositions(data.bottom_handles ?? 1).map((leftPct, idx) => {
-        const sourceId = bottomHandleId(idx)
-        const targetId = `${sourceId}-t`
+      {/* Status dot */}
+      <div
+        className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full shrink-0"
+        style={{ backgroundColor: statusColor }}
+        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

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

@@ -66,13 +66,13 @@ export function GroupNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
             borderBottom: isVisible ? `1px solid ${borderColor}40` : 'none',
             pointerEvents: 'auto',
           }}
+          className="nodrag"
         >
           <Layers size={12} style={{ color: '#00d4ff', flexShrink: 0 }} />
 
           {editing ? (
             <input
               autoFocus
-              className="nodrag"
               value={labelDraft}
               onChange={(e) => setLabelDraft(e.target.value)}
               onKeyDown={(e) => {
@@ -97,12 +97,11 @@ export function GroupNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
 
           {editing ? (
             <>
-              <button className="nodrag" onClick={handleRename} style={{ color: '#39d353', background: 'none', border: 'none', cursor: 'pointer', padding: 1 }}><Check size={11} /></button>
-              <button className="nodrag" onClick={() => { setLabelDraft(data.label); setEditing(false) }} style={{ color: '#f85149', background: 'none', border: 'none', cursor: 'pointer', padding: 1 }}><X size={11} /></button>
+              <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
-              className="nodrag"
               onClick={() => { setLabelDraft(data.label); setEditing(true) }}
               style={{ color: '#8b949e', background: 'none', border: 'none', cursor: 'pointer', padding: 1, opacity: selected ? 1 : 0 }}
               title="Rename group"

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

@@ -1,5 +1,4 @@
-import { useState } from 'react'
-import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
+import { NodeResizer, type NodeProps, type Node } from '@xyflow/react'
 import { useCanvasStore } from '@/stores/canvasStore'
 import type { NodeData, TextPosition } from '@/types'
 
@@ -27,16 +26,8 @@ const POSITION_STYLES: Record<TextPosition, AlignStyle> = {
   'bottom-right':  { alignItems: 'flex-end',   justifyContent: 'flex-end',   textAlign: 'right' },
 }
 
-const HANDLE_SIDES = [
-  { id: 'zone-top',    position: Position.Top },
-  { id: 'zone-right',  position: Position.Right },
-  { id: 'zone-bottom', position: Position.Bottom },
-  { id: 'zone-left',   position: Position.Left },
-] as const
-
 export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
   const setEditingGroupRectId = useCanvasStore((s) => s.setEditingGroupRectId)
-  const [hovered, setHovered] = useState(false)
 
   const rc = data.custom_colors ?? {}
   const borderColor = rc.border ?? '#00d4ff'
@@ -69,16 +60,6 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
     whiteSpace: 'pre-wrap',
   }
 
-  const handleStyle: React.CSSProperties = {
-    width: 10,
-    height: 10,
-    background: borderColor,
-    border: '2px solid #0d1117',
-    borderRadius: '50%',
-    opacity: hovered ? 1 : 0,
-    transition: 'opacity 0.15s',
-  }
-
   return (
     <>
       <NodeResizer
@@ -94,14 +75,6 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
         }}
         lineStyle={{ borderColor: 'transparent' }}
       />
-
-      {HANDLE_SIDES.map(({ id: hid, position }) => (
-        <span key={hid}>
-          <Handle type="source" id={hid} position={position} style={handleStyle} />
-          <Handle type="target" id={`${hid}-t`} position={position} style={{ ...handleStyle, opacity: 0, width: 14, height: 14 }} />
-        </span>
-      ))}
-
       <div
         style={{
           position: 'relative',
@@ -119,8 +92,6 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
           boxSizing: 'border-box',
           cursor: 'default',
         }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
         onDoubleClick={(e) => {
           e.stopPropagation()
           setEditingGroupRectId(id)

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

@@ -1,12 +1,7 @@
-import { createElement } from 'react'
 import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
 import { Layers } from 'lucide-react'
 import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
-import { resolveNodeIcon } from '@/utils/nodeIcons'
-import { resolvePropertyIcon } from '@/utils/propertyIcons'
-import { useCanvasStore } from '@/stores/canvasStore'
-import { maskIp, splitIps } from '@/utils/maskIp'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { BaseNode } from './BaseNode'
@@ -15,7 +10,6 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
   const { data, selected } = props
 
   const activeTheme = useThemeStore((s) => s.activeTheme)
-  const hideIp = useCanvasStore((s) => s.hideIp)
   const theme = THEMES[activeTheme]
   const colors = resolveNodeColors(data, activeTheme)
 
@@ -47,7 +41,6 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
   const isOnline = data.status === 'online'
   const glow = colors.border
   const proxmoxAccent = theme.colors.nodeAccents.proxmox.border
-  const resolvedIcon = resolveNodeIcon(Layers, data.custom_icon)
 
   return (
     <>
@@ -56,7 +49,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
         minHeight={160}
         isVisible={selected}
         lineStyle={{ borderColor: glow, opacity: 0.6 }}
-        handleStyle={{ borderColor: glow, backgroundColor: theme.colors.nodeCardBackground, width: 6, height: 6 }}
+        handleStyle={{ borderColor: glow, backgroundColor: theme.colors.nodeCardBackground }}
       />
 
       {/* Group border */}
@@ -74,7 +67,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
       >
         {/* Header bar */}
         <div
-          className="flex flex-row items-start gap-2 px-2.5 py-1.5 shrink-0"
+          className="flex items-center gap-2 px-2.5 py-1.5 shrink-0"
           style={{
             background: isOnline ? `${glow}18` : `${theme.colors.nodeIconBackground}88`,
             borderBottom: `1px solid ${isOnline ? `${glow}33` : theme.colors.handleBackground}`,
@@ -87,7 +80,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
               background: theme.colors.nodeIconBackground,
             }}
           >
-            {createElement(resolvedIcon, { size: 12 })}
+            <Layers size={12} />
           </div>
           <div className="flex flex-col min-w-0 flex-1">
             <span
@@ -96,45 +89,23 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
             >
               {data.label}
             </span>
-            {data.ip && splitIps(data.ip).map((ip) => (
+            {data.ip && (
               <span
-                key={ip}
                 className="font-mono text-[9px] truncate"
                 style={{ color: theme.colors.nodeSubtextColor }}
               >
-                {hideIp ? maskIp(ip) : ip}
+                {data.ip}
               </span>
-            ))}
+            )}
           </div>
           {/* Status dot */}
           <div
-            className="ml-auto w-1.5 h-1.5 rounded-full shrink-0"
+            className="w-1.5 h-1.5 rounded-full shrink-0"
             style={{ backgroundColor: statusColor }}
             title={data.status}
           />
         </div>
 
-        {/* Properties */}
-        {data.properties?.filter((p) => p.visible).map((prop, i, arr) => {
-          const Icon = resolvePropertyIcon(prop.icon)
-          return (
-            <div
-              key={prop.key}
-              className="flex items-center gap-1 font-mono text-[10px] min-w-0 overflow-hidden px-2.5 shrink-0"
-              style={{
-                color: theme.colors.nodeSubtextColor,
-                paddingTop: i === 0 ? 4 : 2,
-                paddingBottom: i === arr.length - 1 ? 4 : 2,
-                borderTop: i === 0 ? `1px solid ${glow}22` : undefined,
-              }}
-            >
-              {Icon && <Icon size={9} className="shrink-0" />}
-              <span className="truncate max-w-15 shrink-0" title={prop.key}>{prop.key}</span>
-              <span className="truncate min-w-0" title={prop.value}>· {prop.value}</span>
-            </div>
-          )
-        })}
-
         {/* Inner area — React Flow places children here */}
         <div className="flex-1 relative" />
       </div>

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

@@ -1,7 +1,7 @@
 import { type NodeProps, type Node } from '@xyflow/react'
 import {
   Globe, Router, Network, Server, Layers, Box, Container,
-  HardDrive, Cpu, Wifi, Circle, Cctv, Printer, Monitor, PlugZap, Anchor, Package, Flame,
+  HardDrive, Cpu, Wifi, Circle, Cctv, Printer, Monitor, PlugZap, Anchor,
 } from 'lucide-react'
 import { BaseNode } from './BaseNode'
 import type { NodeData } from '@/types'
@@ -10,7 +10,6 @@ type N = NodeProps<Node<NodeData>>
 
 export const IspNode     = (props: N) => <BaseNode {...props} icon={Globe} />
 export const RouterNode  = (props: N) => <BaseNode {...props} icon={Router} />
-export const FirewallNode = (props: N) => <BaseNode {...props} icon={Flame} />
 export const SwitchNode  = (props: N) => <BaseNode {...props} icon={Network} />
 export const ServerNode  = (props: N) => <BaseNode {...props} icon={Server} />
 export const ProxmoxNode = (props: N) => <BaseNode {...props} icon={Layers} />
@@ -23,6 +22,6 @@ export const CameraNode   = (props: N) => <BaseNode {...props} icon={Cctv} />
 export const PrinterNode  = (props: N) => <BaseNode {...props} icon={Printer} />
 export const ComputerNode = (props: N) => <BaseNode {...props} icon={Monitor} />
 export const CplNode      = (props: N) => <BaseNode {...props} icon={PlugZap} />
-export const DockerHostNode      = (props: N) => <BaseNode {...props} icon={Anchor} />
-export const DockerContainerNode = (props: N) => <BaseNode {...props} icon={Package} />
+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,4 +1,4 @@
-import { IspNode, RouterNode, FirewallNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerHostNode, DockerContainerNode, GenericNode } from './index'
+import { IspNode, RouterNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerNode, DockerContainerNode, GenericNode } from './index'
 import { ProxmoxGroupNode } from './ProxmoxGroupNode'
 import { GroupRectNode } from './GroupRectNode'
 import { GroupNode } from './GroupNode'
@@ -6,7 +6,6 @@ import { GroupNode } from './GroupNode'
 export const nodeTypes = {
   isp: IspNode,
   router: RouterNode,
-  firewall: FirewallNode,
   switch: SwitchNode,
   server: ServerNode,
   proxmox: ProxmoxGroupNode,
@@ -19,8 +18,8 @@ export const nodeTypes = {
   printer: PrinterNode,
   computer: ComputerNode,
   cpl: CplNode,
-  docker_host: DockerHostNode,
   docker_container: DockerContainerNode,
+  docker_host: DockerNode,
   generic: GenericNode,
   groupRect: GroupRectNode,
   group: GroupNode,

frontend/src/components/modals/CustomStyleModal.tsx

@@ -1,484 +0,0 @@
-import { useState, useCallback } from 'react'
-import { toast } from 'sonner'
-import {
-  Globe, Router, Network, Server, Layers, Box, Container, HardDrive,
-  Cpu, Wifi, Camera, Printer, Monitor, PlugZap, Anchor, Package, Circle, Flame,
-  type LucideIcon,
-} from 'lucide-react'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import { useThemeStore } from '@/stores/themeStore'
-import { useCanvasStore } from '@/stores/canvasStore'
-import { THEMES } from '@/utils/themes'
-import { applyOpacity } from '@/utils/colorUtils'
-import type {
-  NodeType, EdgeType, NodeTypeStyle, EdgeTypeStyle, CustomStyleDef, EdgePathStyle,
-} from '@/types'
-import { NODE_TYPE_LABELS, EDGE_TYPE_LABELS } from '@/types'
-
-// ── Node types exposed for custom style (skip groupRect/group) ───────────────
-
-const EDITABLE_NODE_TYPES: NodeType[] = [
-  'isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc', 'nas',
-  'iot', 'ap', 'camera', 'printer', 'computer', 'cpl', 'docker_host',
-  'docker_container', 'generic',
-]
-
-const EDITABLE_EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster']
-
-const NODE_ICONS: Record<string, LucideIcon> = {
-  isp: Globe, router: Router, firewall: Flame, switch: Network, server: Server, proxmox: Layers,
-  vm: Box, lxc: Container, nas: HardDrive, iot: Cpu, ap: Wifi,
-  camera: Camera, printer: Printer, computer: Monitor, cpl: PlugZap,
-  docker_host: Anchor, docker_container: Package, generic: Circle,
-}
-
-// ── Default style for a node type (from default theme) ─────────────────────
-
-function defaultNodeStyle(nodeType: NodeType): NodeTypeStyle {
-  const accent = THEMES.default.colors.nodeAccents[nodeType] ?? THEMES.default.colors.nodeAccents.generic
-  return {
-    borderColor: accent.border,
-    borderOpacity: 1,
-    bgColor: THEMES.default.colors.nodeCardBackground,
-    bgOpacity: 1,
-    iconColor: accent.icon,
-    iconOpacity: 1,
-    width: 0,
-    height: 0,
-  }
-}
-
-function defaultEdgeStyle(edgeType: EdgeType): EdgeTypeStyle {
-  return {
-    color: THEMES.default.colors.edgeColors[edgeType],
-    opacity: 1,
-    pathStyle: 'bezier',
-    animated: 'none',
-  }
-}
-
-// ── Color + opacity row ──────────────────────────────────────────────────────
-
-interface ColorRowProps {
-  label: string
-  color: string
-  opacity: number
-  onColorChange: (v: string) => void
-  onOpacityChange: (v: number) => void
-}
-
-function ColorRow({ label, color, opacity, onColorChange, onOpacityChange }: ColorRowProps) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="text-xs text-[#8b949e] w-20 shrink-0">{label}</span>
-      <input
-        type="color"
-        value={color}
-        onChange={(e) => onColorChange(e.target.value)}
-        className="w-7 h-7 rounded cursor-pointer border border-[#30363d] bg-transparent p-0.5"
-      />
-      <div className="flex items-center gap-2 flex-1">
-        <input
-          type="range"
-          min={0}
-          max={1}
-          step={0.01}
-          value={opacity}
-          onChange={(e) => onOpacityChange(parseFloat(e.target.value))}
-          className="flex-1 h-1 accent-[#00d4ff]"
-        />
-        <span className="text-xs text-[#8b949e] w-8 text-right">
-          {Math.round(opacity * 100)}%
-        </span>
-      </div>
-      <div
-        className="w-5 h-5 rounded border border-[#30363d] shrink-0"
-        style={{ background: applyOpacity(color, opacity) }}
-      />
-    </div>
-  )
-}
-
-// ── Node type editor ─────────────────────────────────────────────────────────
-
-interface NodeEditorProps {
-  nodeType: NodeType
-  style: NodeTypeStyle
-  onChange: (s: NodeTypeStyle) => void
-  onApplyToExisting: () => void
-}
-
-function NodeEditor({ nodeType, style, onChange, onApplyToExisting }: NodeEditorProps) {
-  const set = useCallback(<K extends keyof NodeTypeStyle>(k: K, v: NodeTypeStyle[K]) => {
-    onChange({ ...style, [k]: v })
-  }, [style, onChange])
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="text-sm font-semibold text-[#e6edf3]">{NODE_TYPE_LABELS[nodeType]}</div>
-      <div className="flex flex-col gap-3">
-        <ColorRow
-          label="Border"
-          color={style.borderColor}
-          opacity={style.borderOpacity}
-          onColorChange={(v) => set('borderColor', v)}
-          onOpacityChange={(v) => set('borderOpacity', v)}
-        />
-        <ColorRow
-          label="Background"
-          color={style.bgColor}
-          opacity={style.bgOpacity}
-          onColorChange={(v) => set('bgColor', v)}
-          onOpacityChange={(v) => set('bgOpacity', v)}
-        />
-        <ColorRow
-          label="Icon"
-          color={style.iconColor}
-          opacity={style.iconOpacity}
-          onColorChange={(v) => set('iconColor', v)}
-          onOpacityChange={(v) => set('iconOpacity', v)}
-        />
-      </div>
-
-      <div className="border-t border-[#30363d] pt-3">
-        <div className="text-xs text-[#8b949e] mb-1">Default size</div>
-        <div className="text-xs text-[#8b949e]/60 mb-2">0 = auto (min 140 × 50 px, grows with content)</div>
-        <div className="flex gap-3">
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-[#8b949e]">W</span>
-            <input
-              type="number"
-              min={0}
-              step={10}
-              value={style.width}
-              onChange={(e) => set('width', parseInt(e.target.value) || 0)}
-              className="w-20 h-7 text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 text-[#e6edf3]"
-            />
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-[#8b949e]">H</span>
-            <input
-              type="number"
-              min={0}
-              step={10}
-              value={style.height}
-              onChange={(e) => set('height', parseInt(e.target.value) || 0)}
-              className="w-20 h-7 text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 text-[#e6edf3]"
-            />
-          </div>
-        </div>
-      </div>
-
-      <Button
-        size="sm"
-        className="self-start bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
-        onClick={onApplyToExisting}
-      >
-        Apply to existing {NODE_TYPE_LABELS[nodeType]} nodes
-      </Button>
-    </div>
-  )
-}
-
-// ── Edge type editor ─────────────────────────────────────────────────────────
-
-interface EdgeEditorProps {
-  edgeType: EdgeType
-  style: EdgeTypeStyle
-  onChange: (s: EdgeTypeStyle) => void
-  onApplyToExisting: () => void
-}
-
-function EdgeEditor({ edgeType, style, onChange, onApplyToExisting }: EdgeEditorProps) {
-  const set = useCallback(<K extends keyof EdgeTypeStyle>(k: K, v: EdgeTypeStyle[K]) => {
-    onChange({ ...style, [k]: v })
-  }, [style, onChange])
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="text-sm font-semibold text-[#e6edf3]">{EDGE_TYPE_LABELS[edgeType]}</div>
-      <div className="flex flex-col gap-3">
-        <ColorRow
-          label="Color"
-          color={style.color}
-          opacity={style.opacity}
-          onColorChange={(v) => set('color', v)}
-          onOpacityChange={(v) => set('opacity', v)}
-        />
-      </div>
-
-      <div className="border-t border-[#30363d] pt-3 flex flex-col gap-3">
-        <div>
-          <div className="text-xs text-[#8b949e] mb-2">Path style</div>
-          <div className="flex gap-2">
-            {(['bezier', 'smooth'] as EdgePathStyle[]).map((ps) => (
-              <button
-                key={ps}
-                type="button"
-                onClick={() => set('pathStyle', ps)}
-                className="px-3 py-1 text-xs rounded border transition-colors"
-                style={{
-                  borderColor: style.pathStyle === ps ? '#00d4ff' : '#30363d',
-                  background: style.pathStyle === ps ? '#00d4ff22' : 'transparent',
-                  color: style.pathStyle === ps ? '#00d4ff' : '#8b949e',
-                }}
-              >
-                {ps.charAt(0).toUpperCase() + ps.slice(1)}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <div className="text-xs text-[#8b949e] mb-2">Animation</div>
-          <select
-            value={style.animated}
-            onChange={(e) => set('animated', e.target.value as EdgeTypeStyle['animated'])}
-            className="w-full h-7 text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 text-[#e6edf3]"
-          >
-            <option value="none">None</option>
-            <option value="basic">Basic</option>
-            <option value="flow">Flow</option>
-            <option value="snake">Snake</option>
-          </select>
-        </div>
-      </div>
-
-      <Button
-        size="sm"
-        className="self-start bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
-        onClick={onApplyToExisting}
-      >
-        Apply to existing {EDGE_TYPE_LABELS[edgeType]} edges
-      </Button>
-    </div>
-  )
-}
-
-// ── Main modal ───────────────────────────────────────────────────────────────
-
-type Tab = 'nodes' | 'edges'
-type Selection = { kind: 'node'; type: NodeType } | { kind: 'edge'; type: EdgeType } | null
-
-interface CustomStyleModalProps {
-  open: boolean
-  onClose: () => void
-}
-
-export function CustomStyleModal({ open, onClose }: CustomStyleModalProps) {
-  const { customStyle, setCustomStyle } = useThemeStore()
-  const { markUnsaved, applyTypeNodeStyle, applyTypeEdgeStyle, applyAllCustomStyles } = useCanvasStore()
-
-  const [tab, setTab] = useState<Tab>('nodes')
-  const [selection, setSelection] = useState<Selection>(null)
-  const [draft, setDraft] = useState<CustomStyleDef>(() => ({
-    nodes: { ...customStyle.nodes },
-    edges: { ...customStyle.edges },
-  }))
-
-  const handleOpen = (isOpen: boolean) => {
-    if (isOpen) {
-      // Reset draft to current saved customStyle on open
-      setDraft({ nodes: { ...customStyle.nodes }, edges: { ...customStyle.edges } })
-      setSelection(null)
-    } else {
-      onClose()
-    }
-  }
-
-  const getNodeStyle = (t: NodeType): NodeTypeStyle =>
-    draft.nodes[t] ?? defaultNodeStyle(t)
-
-  const getEdgeStyle = (t: EdgeType): EdgeTypeStyle =>
-    draft.edges[t] ?? defaultEdgeStyle(t)
-
-  const handleNodeChange = (t: NodeType, s: NodeTypeStyle) =>
-    setDraft((d) => ({ ...d, nodes: { ...d.nodes, [t]: s } }))
-
-  const handleEdgeChange = (t: EdgeType, s: EdgeTypeStyle) =>
-    setDraft((d) => ({ ...d, edges: { ...d.edges, [t]: s } }))
-
-  const handleApplyNodeType = (t: NodeType) => {
-    const style = getNodeStyle(t)
-    applyTypeNodeStyle(t, style)
-    toast.success(`Applied style to all ${NODE_TYPE_LABELS[t]} nodes`)
-  }
-
-  const handleApplyEdgeType = (t: EdgeType) => {
-    const style = getEdgeStyle(t)
-    applyTypeEdgeStyle(t, style)
-    toast.success(`Applied style to all ${EDGE_TYPE_LABELS[t]} edges`)
-  }
-
-  const handleSave = () => {
-    setCustomStyle(draft)
-    markUnsaved()
-    toast.success('Custom style saved — save your canvas to persist')
-    onClose()
-  }
-
-  const handleApplyAll = () => {
-    setCustomStyle(draft)
-    applyAllCustomStyles(draft)
-    markUnsaved()
-    toast.success('Custom style applied to all nodes and edges')
-    onClose()
-  }
-
-  const selectedNodeStyle = selection?.kind === 'node' ? getNodeStyle(selection.type) : null
-  const selectedEdgeStyle = selection?.kind === 'edge' ? getEdgeStyle(selection.type) : null
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpen}>
-      <DialogContent className="bg-[#161b22] border-[#30363d] max-w-[calc(100%-2rem)] sm:max-w-3xl max-h-[90vh] flex flex-col p-0 gap-0">
-        <DialogHeader className="px-5 pt-5 pb-3 border-b border-[#30363d]">
-          <DialogTitle className="text-sm font-semibold">Custom Style Editor</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-1 overflow-hidden min-h-0">
-          {/* Left panel — type list */}
-          <div className="w-52 shrink-0 border-r border-[#30363d] flex flex-col overflow-hidden">
-            {/* Tabs */}
-            <div className="flex border-b border-[#30363d]">
-              {(['nodes', 'edges'] as Tab[]).map((t) => (
-                <button
-                  key={t}
-                  type="button"
-                  onClick={() => { setTab(t); setSelection(null) }}
-                  className="flex-1 py-2 text-xs font-medium transition-colors"
-                  style={{
-                    borderBottom: tab === t ? '2px solid #00d4ff' : '2px solid transparent',
-                    color: tab === t ? '#00d4ff' : '#8b949e',
-                  }}
-                >
-                  {t.charAt(0).toUpperCase() + t.slice(1)}
-                </button>
-              ))}
-            </div>
-
-            {/* Type list */}
-            <div className="flex-1 overflow-y-auto py-1">
-              {tab === 'nodes' && EDITABLE_NODE_TYPES.map((t) => {
-                const Icon = NODE_ICONS[t] ?? Circle
-                const style = draft.nodes[t]
-                const isSelected = selection?.kind === 'node' && selection.type === t
-                const swatchColor = style
-                  ? applyOpacity(style.borderColor, style.borderOpacity)
-                  : THEMES.default.colors.nodeAccents[t]?.border ?? '#8b949e'
-
-                return (
-                  <button
-                    key={t}
-                    type="button"
-                    onClick={() => setSelection({ kind: 'node', type: t })}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left"
-                    style={{
-                      background: isSelected ? '#21262d' : 'transparent',
-                      color: isSelected ? '#e6edf3' : '#8b949e',
-                    }}
-                  >
-                    <Icon size={13} />
-                    <span className="flex-1 truncate">{NODE_TYPE_LABELS[t]}</span>
-                    <span
-                      className="w-2.5 h-2.5 rounded-full shrink-0"
-                      style={{ background: swatchColor }}
-                    />
-                  </button>
-                )
-              })}
-
-              {tab === 'edges' && EDITABLE_EDGE_TYPES.map((t) => {
-                const style = draft.edges[t]
-                const isSelected = selection?.kind === 'edge' && selection.type === t
-                const swatchColor = style
-                  ? applyOpacity(style.color, style.opacity)
-                  : THEMES.default.colors.edgeColors[t]
-
-                return (
-                  <button
-                    key={t}
-                    type="button"
-                    onClick={() => setSelection({ kind: 'edge', type: t })}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left"
-                    style={{
-                      background: isSelected ? '#21262d' : 'transparent',
-                      color: isSelected ? '#e6edf3' : '#8b949e',
-                    }}
-                  >
-                    <span className="flex-1 truncate">{EDGE_TYPE_LABELS[t]}</span>
-                    <span
-                      className="w-8 h-1.5 rounded-full shrink-0"
-                      style={{ background: swatchColor }}
-                    />
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* Right panel — editor */}
-          <div className="flex-1 overflow-y-auto p-5">
-            {!selection && (
-              <div className="flex items-center justify-center h-full text-xs text-[#8b949e]">
-                Select a {tab === 'nodes' ? 'node type' : 'edge type'} from the list to edit its style
-              </div>
-            )}
-
-            {selection?.kind === 'node' && selectedNodeStyle && (
-              <NodeEditor
-                key={selection.type}
-                nodeType={selection.type}
-                style={selectedNodeStyle}
-                onChange={(s) => handleNodeChange(selection.type, s)}
-                onApplyToExisting={() => handleApplyNodeType(selection.type)}
-              />
-            )}
-
-            {selection?.kind === 'edge' && selectedEdgeStyle && (
-              <EdgeEditor
-                key={selection.type}
-                edgeType={selection.type}
-                style={selectedEdgeStyle}
-                onChange={(s) => handleEdgeChange(selection.type, s)}
-                onApplyToExisting={() => handleApplyEdgeType(selection.type)}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex justify-between gap-2 px-5 py-3 border-t border-[#30363d]">
-          <Button
-            type="button"
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:text-foreground"
-            onClick={onClose}
-          >
-            Cancel
-          </Button>
-          <div className="flex gap-2">
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              className="border-[#30363d] text-[#e6edf3] hover:bg-[#21262d]"
-              onClick={handleSave}
-            >
-              Save Custom Style
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
-              onClick={handleApplyAll}
-            >
-              Apply All to Canvas
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}

frontend/src/components/modals/EdgeModal.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import modalStyles from './modal-interactive.module.css'
 import { RotateCcw } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
@@ -69,8 +68,8 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Link Type</Label>
             <Select value={type} onValueChange={(v) => setType(v as EdgeType)}>
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Edge type selector">
-                <SelectValue>{EDGE_TYPE_LABELS[type]}</SelectValue>
+              <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
+                <SelectValue />
               </SelectTrigger>
               <SelectContent className="bg-[#21262d] border-[#30363d]">
                 {EDGE_TYPES.map(([value, label]) => (
@@ -90,7 +89,7 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
                 value={vlanId}
                 onChange={(e) => setVlanId(e.target.value)}
                 placeholder="e.g. 20"
-                className={`bg-[#21262d] border-[#30363d] font-mono text-sm h-8 ${modalStyles['modal-radius']}`}
+                className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
               />
             </div>
           )}
@@ -101,21 +100,19 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
               value={label}
               onChange={(e) => setLabel(e.target.value)}
               placeholder="e.g. 1G, trunk..."
-              className={`bg-[#21262d] border-[#30363d] text-sm h-8 ${modalStyles['modal-radius']}`}
+              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">Path Style</Label>
-            <div className={`flex rounded-md overflow-hidden border border-[#30363d] ${modalStyles['modal-interactive']}`}> 
+            <div className="flex rounded-md overflow-hidden border border-[#30363d]">
               {(['bezier', 'smooth'] as EdgePathStyle[]).map((style) => (
                 <button
                   key={style}
                   type="button"
                   onClick={() => setPathStyle(style)}
-                  className="flex-1 py-1 text-xs capitalize transition-colors cursor-pointer"
-                  tabIndex={0}
-                  aria-label={`Path style ${style}`}
+                  className="flex-1 py-1 text-xs capitalize transition-colors"
                   style={{
                     background: pathStyle === style ? '#00d4ff22' : '#21262d',
                     color: pathStyle === style ? '#00d4ff' : '#8b949e',
@@ -130,15 +127,13 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
 
           <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] ${modalStyles['modal-interactive']}`}> 
+            <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 cursor-pointer"
-                  tabIndex={0}
-                  aria-label={`Animation mode ${mode}`}
+                  className="flex-1 py-1 text-xs capitalize transition-colors"
                   style={{
                     background: animation === mode ? '#00d4ff22' : '#21262d',
                     color: animation === mode ? '#00d4ff' : '#8b949e',
@@ -165,10 +160,8 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
               )}
             </div>
             <label
-              className={`relative flex items-center gap-2.5 px-2.5 h-8 rounded-md border cursor-pointer ${modalStyles['modal-interactive']}`}
+              className="relative flex items-center gap-2.5 px-2.5 h-8 rounded-md border cursor-pointer"
               style={{ borderColor: customColor ? effectiveColor : '#30363d', background: '#21262d' }}
-              tabIndex={0}
-              aria-label="Edge color picker"
             >
               <input
                 type="color"
@@ -196,13 +189,13 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
 
           <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 cursor-pointer" onClick={handleDelete}>
+              <Button type="button" variant="ghost" size="sm" className="text-[#f85149] hover:text-[#f85149] hover:bg-[#f85149]/10" onClick={handleDelete}>
                 Delete
               </Button>
             ) : <span />}
             <div className="flex gap-2">
-              <Button type="button" variant="ghost" size="sm" className="cursor-pointer" onClick={onClose}>Cancel</Button>
-              <Button type="submit" size="sm" className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90 cursor-pointer">
+              <Button type="button" variant="ghost" size="sm" onClick={onClose}>Cancel</Button>
+              <Button type="submit" size="sm" className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90">
                 {onDelete ? 'Save' : 'Connect'}
               </Button>
             </div>

frontend/src/components/modals/ExportModal.tsx

@@ -1,71 +0,0 @@
-import { useState } from 'react'
-import { Download, Loader2 } from 'lucide-react'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import { exportToPng, EXPORT_QUALITY_OPTIONS, type ExportQuality } from '@/utils/export'
-
-interface ExportModalProps {
-  open: boolean
-  onClose: () => void
-  getElement: () => HTMLElement | null
-}
-
-export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
-  const [quality, setQuality] = useState<ExportQuality>('high')
-  const [exporting, setExporting] = useState(false)
-
-  const handleExport = async () => {
-    const el = getElement()
-    if (!el) return
-    setExporting(true)
-    try {
-      await exportToPng(el, quality)
-      onClose()
-    } finally {
-      setExporting(false)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent className="bg-[#161b22] border-border max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="text-foreground">Export as PNG</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-2 py-2">
-          {EXPORT_QUALITY_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => setQuality(opt.value)}
-              className={[
-                'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
-                quality === opt.value
-                  ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
-                  : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
-              ].join(' ')}
-            >
-              <span className="font-medium">{opt.label}</span>
-              <span className="text-xs opacity-70">{opt.hint}</span>
-            </button>
-          ))}
-        </div>
-
-        <DialogFooter className="gap-2">
-          <Button variant="ghost" onClick={onClose} disabled={exporting}>Cancel</Button>
-          <Button
-            onClick={handleExport}
-            disabled={exporting}
-            style={{ background: '#00d4ff', color: '#0d1117' }}
-          >
-            {exporting
-              ? <><Loader2 size={14} className="animate-spin mr-1.5" />Exporting…</>
-              : <><Download size={14} className="mr-1.5" />Download</>
-            }
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

frontend/src/components/modals/GroupRectModal.tsx

@@ -1,12 +1,10 @@
 import { useState } from 'react'
-import modalStyles from './modal-interactive.module.css'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import type { TextPosition } from '@/types'
-import { hexToRgba, rgbaToHex8 } from '@/utils/colorUtils'
 
 export type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
 
@@ -130,7 +128,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
               value={form.label}
               onChange={(e) => set('label', e.target.value)}
               placeholder="Zone name…"
-              className={`bg-[#21262d] border-[#30363d] text-sm h-8 ${modalStyles['modal-radius']}`}
+              className="bg-[#21262d] border-[#30363d] text-sm h-8"
             />
           </div>
 
@@ -138,7 +136,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Font</Label>
             <Select value={form.font} onValueChange={(v: string | null) => set('font', v ?? 'inter')}>
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}> 
+              <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent className="bg-[#21262d] border-[#30363d]">
@@ -163,7 +161,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     title={value}
                     onClick={() => set('text_position', value)}
-                    className={`h-8 rounded text-base transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    className="h-8 rounded text-base transition-colors"
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -188,7 +186,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     key={value}
                     type="button"
                     onClick={() => set('label_position', value)}
-                    className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    className="flex items-center justify-center h-8 rounded text-xs transition-colors"
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -206,35 +204,23 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Colors</Label>
             <div className="grid grid-cols-3 gap-2">
-              {colorFields.map(({ key, label }) => {
-                const { hex6, alpha } = hexToRgba(form[key])
-                return (
-                  <div key={key} className="flex flex-col gap-1 items-center">
-                    <label
-                      className="relative w-full h-7 rounded-md border cursor-pointer overflow-hidden"
-                      style={{ borderColor: '#30363d' }}
-                    >
-                      <input
-                        type="color"
-                        value={hex6}
-                        onChange={(e) => set(key, rgbaToHex8(e.target.value, alpha))}
-                        className="absolute inset-0 w-full h-full cursor-pointer opacity-0"
-                      />
-                      <div className="w-full h-full rounded-sm" style={{ background: form[key] }} />
-                    </label>
+              {colorFields.map(({ key, label }) => (
+                <div key={key} className="flex flex-col gap-1 items-center">
+                  <label
+                    className="relative w-full h-7 rounded-md border cursor-pointer overflow-hidden"
+                    style={{ borderColor: '#30363d' }}
+                  >
                     <input
-                      type="range"
-                      min={0}
-                      max={100}
-                      value={alpha}
-                      onChange={(e) => set(key, rgbaToHex8(hex6, Number(e.target.value)))}
-                      className="w-full h-1 accent-[#00d4ff] cursor-pointer"
-                      title={`Opacity: ${alpha}%`}
+                      type="color"
+                      value={form[key]}
+                      onChange={(e) => set(key, e.target.value)}
+                      className="absolute inset-0 w-full h-full cursor-pointer opacity-0"
                     />
-                    <span className="text-[9px] text-muted-foreground/60">{label} {alpha}%</span>
-                  </div>
-                )
-              })}
+                    <div className="w-full h-full rounded-sm" style={{ background: form[key] }} />
+                  </label>
+                  <span className="text-[9px] text-muted-foreground/60">{label}</span>
+                </div>
+              ))}
             </div>
           </div>
 
@@ -249,7 +235,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     key={value}
                     type="button"
                     onClick={() => set('text_size', value)}
-                    className={`flex items-center justify-center h-8 rounded transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    className="flex items-center justify-center h-8 rounded transition-colors"
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -276,7 +262,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     title={label}
                     onClick={() => set('border_style', value)}
-                    className={`flex flex-col items-center justify-center h-10 rounded text-xs gap-0.5 transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    className="flex flex-col items-center justify-center h-10 rounded text-xs gap-0.5 transition-colors"
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -302,7 +288,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     key={value}
                     type="button"
                     onClick={() => set('border_width', value)}
-                    className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    className="flex items-center justify-center h-8 rounded text-xs transition-colors"
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -320,7 +306,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Z-Order (1 = furthest back)</Label>
             <Select value={String(form.z_order)} onValueChange={(v: string | null) => set('z_order', v !== null ? Number(v) : 1)}>
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`}> 
+              <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent className="bg-[#21262d] border-[#30363d]">
@@ -339,17 +325,17 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="text-[#f85149] hover:text-[#f85149] hover:bg-[#f85149]/10 cursor-pointer"
+                className="text-[#f85149] hover:text-[#f85149] hover:bg-[#f85149]/10"
                 onClick={() => { onDelete(); onClose() }}
               >
                 Delete
               </Button>
             )}
             <div className="flex gap-2 ml-auto">
-              <Button type="button" variant="ghost" size="sm" className={`cursor-pointer ${modalStyles['modal-cancel-hover']}`} onClick={onClose}>
+              <Button type="button" variant="ghost" size="sm" onClick={onClose}>
                 Cancel
               </Button>
-              <Button type="submit" size="sm" className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90 cursor-pointer">
+              <Button type="submit" size="sm" className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90">
                 {title === 'Add Zone' ? 'Add' : 'Save'}
               </Button>
             </div>

frontend/src/components/modals/NodeModal.tsx

@@ -1,5 +1,4 @@
 import { Fragment, createElement, useState } from 'react'
-import modalStyles from './modal-interactive.module.css'
 import { RotateCcw, ChevronDown } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
@@ -9,10 +8,9 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSepa
 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 { MIN_BOTTOM_HANDLES, MAX_BOTTOM_HANDLES, clampBottomHandles } from '@/utils/handleUtils'
 
 const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
-  { label: 'Hardware',       types: ['isp', 'router', 'firewall', 'switch', 'server', 'nas', 'ap', 'printer'] },
+  { label: 'Hardware',       types: ['isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer'] },
   { label: 'Virtualization', types: ['proxmox', 'vm', 'lxc', 'docker_host', 'docker_container'] },
   { label: 'IoT',            types: ['iot', 'camera', 'cpl'] },
   { label: 'Generic',        types: ['computer', 'generic', 'groupRect'] },
@@ -21,17 +19,6 @@ const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
 const CHECK_METHODS: CheckMethod[] = ['none', 'ping', 'http', 'https', 'tcp', 'ssh', 'prometheus', 'health']
 const CONTAINER_MODE_TYPES: NodeType[] = ['proxmox', 'vm', 'lxc', 'docker_host']
 
-const CHECK_METHOD_LABELS: Record<CheckMethod, string> = {
-  none: 'None',
-  ping: 'Ping',
-  http: 'HTTP',
-  https: 'HTTPS',
-  tcp: 'TCP',
-  ssh: 'SSH',
-  prometheus: 'Prometheus',
-  health: 'Health',
-}
-
 const DEFAULT_DATA: Partial<NodeData> = {
   type: 'server',
   label: '',
@@ -51,7 +38,7 @@ interface NodeModalProps {
   onSubmit: (data: Partial<NodeData>) => void
   initial?: Partial<NodeData>
   title?: string
-  parentContainerNodes?: { id: string; label: string; nodeType?: NodeType }[]
+  parentContainerNodes?: { id: string; label: string }[]
 }
 
 // NodeModal is always mounted with a key that changes on open/edit, so useState
@@ -81,10 +68,6 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
     onClose()
   }
 
-  const filteredParentNodes = form.type === 'docker_container'
-    ? parentContainerNodes.filter((n) => n.nodeType === 'docker_host')
-    : parentContainerNodes
-
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="bg-[#161b22] border-[#30363d] text-foreground max-w-md">
@@ -98,7 +81,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
             <div className="flex flex-col gap-1.5">
               <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 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Node type selector">
+                <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8 w-full">
                   <SelectValue>{NODE_TYPE_LABELS[(form.type ?? 'server') as NodeType]}</SelectValue>
                 </SelectTrigger>
                 <SelectContent className="bg-[#21262d] border-[#30363d]">
@@ -139,8 +122,7 @@ 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 bg-[#21262d] border border-[#30363d] text-sm transition-colors w-full cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}
-                aria-label="Icon picker trigger"
+                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"
               >
                 <span className="flex items-center gap-2 min-w-0">
                   {(() => {
@@ -163,7 +145,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   value={iconSearch}
                   onChange={(e) => setIconSearch(e.target.value)}
                   placeholder="Search icons…"
-                  className={`bg-[#21262d] border-[#30363d] text-xs h-7 ${modalStyles['modal-radius']}`}
+                  className="bg-[#21262d] border-[#30363d] text-xs h-7"
                   autoFocus
                 />
                 <div className="flex flex-col gap-2 max-h-52 overflow-y-auto">
@@ -185,8 +167,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                                 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 cursor-pointer ${modalStyles['modal-interactive']}`}
-                                aria-label={`Select icon ${entry.label}`}
+                                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',
@@ -214,7 +195,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                 value={form.label ?? ''}
                 onChange={(e) => { set('label', e.target.value); if (labelError) setLabelError(false) }}
                 placeholder="My Server"
-                className={`bg-[#21262d] text-sm h-8 ${labelError ? 'border-[#f85149] focus-visible:ring-[#f85149]' : 'border-[#30363d]'} ${modalStyles['modal-radius']}`}
+                className={`bg-[#21262d] text-sm h-8 ${labelError ? 'border-[#f85149] focus-visible:ring-[#f85149]' : 'border-[#30363d]'}`}
               />
               {labelError && <p className="text-[11px] text-[#f85149]">Label is required</p>}
             </div>
@@ -226,7 +207,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                 value={form.hostname ?? ''}
                 onChange={(e) => set('hostname', e.target.value)}
                 placeholder="server.lan"
-                className={`bg-[#21262d] border-[#30363d] font-mono text-sm h-8 ${modalStyles['modal-radius']}`}
+                className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
               />
             </div>
 
@@ -236,22 +217,21 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               <Input
                 value={form.ip ?? ''}
                 onChange={(e) => set('ip', e.target.value)}
-                placeholder="192.168.1.x, 2001:db8::1"
-                className={`bg-[#21262d] border-[#30363d] font-mono text-sm h-8 ${modalStyles['modal-radius']}`}
+                placeholder="192.168.1.x"
+                className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
               />
-              <span className="text-[10px] text-muted-foreground/50">comma-separated</span>
             </div>
 
             {/* Check method */}
             <div className="flex flex-col gap-1.5">
               <Label className="text-xs text-muted-foreground">Check Method</Label>
               <Select value={form.check_method ?? 'ping'} onValueChange={(v) => set('check_method', v as CheckMethod)}>
-                <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Check method selector">
-                  <SelectValue>{CHECK_METHOD_LABELS[(form.check_method ?? 'ping') as CheckMethod]}</SelectValue>
+                <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
+                  <SelectValue />
                 </SelectTrigger>
                 <SelectContent className="bg-[#21262d] border-[#30363d]">
                   {CHECK_METHODS.map((m) => (
-                    <SelectItem key={m} value={m} className="text-sm">{CHECK_METHOD_LABELS[m]}</SelectItem>
+                    <SelectItem key={m} value={m} className="text-sm font-mono">{m}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
@@ -264,28 +244,24 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                 value={form.check_target ?? ''}
                 onChange={(e) => set('check_target', e.target.value)}
                 placeholder="http://..."
-                className={`bg-[#21262d] border-[#30363d] font-mono text-sm h-8 ${modalStyles['modal-radius']}`}
+                className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
               />
             </div>
 
             {/* Parent container */}
-            {form.type !== 'groupRect' && form.type !== 'group' && filteredParentNodes.length > 0 && (
+            {form.type !== 'groupRect' && form.type !== 'group' && parentContainerNodes.length > 0 && (
               <div className="flex flex-col gap-1.5 col-span-2">
                 <Label className="text-xs text-muted-foreground">Parent Container</Label>
                 <Select
                   value={form.parent_id ?? 'none'}
                   onValueChange={(v) => set('parent_id', v === 'none' ? undefined : v)}
                 >
-                  <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Parent container selector">
-                    <SelectValue placeholder="None (standalone)">
-                      {form.parent_id
-                        ? (filteredParentNodes.find((n) => n.id === form.parent_id)?.label ?? 'None (standalone)')
-                        : 'None (standalone)'}
-                    </SelectValue>
+                  <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
+                    <SelectValue placeholder="None (standalone)" />
                   </SelectTrigger>
                   <SelectContent className="bg-[#21262d] border-[#30363d]">
                     <SelectItem value="none" className="text-sm">None (standalone)</SelectItem>
-                    {filteredParentNodes.map((n) => (
+                    {parentContainerNodes.map((n) => (
                       <SelectItem key={n.id} value={n.id} className="text-sm">{n.label}</SelectItem>
                     ))}
                   </SelectContent>
@@ -305,14 +281,12 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   role="switch"
                   aria-checked={!!form.container_mode}
                   onClick={() => set('container_mode', !form.container_mode)}
-                  className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${modalStyles['modal-interactive']}`}
-                  tabIndex={0}
-                  aria-label="Toggle container mode"
+                  className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none"
                   style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }}
                 >
                   <span
-                    className="pointer-events-none absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-all"
-                    style={{ left: form.container_mode ? 'calc(100% - 18px)' : '2px' }}
+                    className="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
+                    style={{ transform: form.container_mode ? 'translateX(16px)' : 'translateX(0)' }}
                   />
                 </button>
               </div>
@@ -340,11 +314,9 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   return (
                     <div key={key} className="flex flex-col gap-1 items-center">
                       <label
-                        className={`relative w-full h-7 rounded-md border cursor-pointer overflow-hidden transition-all ${modalStyles['modal-interactive']}`}
+                        className="relative w-full h-7 rounded-md border cursor-pointer overflow-hidden transition-all"
                         style={{ borderColor: isCustom ? currentValue : '#30363d' }}
                         title={`${key.charAt(0).toUpperCase() + key.slice(1)}: ${currentValue}`}
-                        tabIndex={0}
-                        aria-label={`Color picker for ${key}`}
                       >
                         <input
                           type="color"
@@ -367,24 +339,21 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
             {/* Bottom connection points (not for group containers) */}
             {form.type !== 'groupRect' && form.type !== 'group' && (
               <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">Bottom Connection Points</Label>
-                  <span className="text-xs font-mono text-foreground">{clampBottomHandles(form.bottom_handles ?? 1)}</span>
-                </div>
-                <input
-                  type="range"
-                  min={MIN_BOTTOM_HANDLES}
-                  max={MAX_BOTTOM_HANDLES}
-                  step={1}
-                  value={clampBottomHandles(form.bottom_handles ?? 1)}
-                  onChange={(e) => set('bottom_handles', clampBottomHandles(Number(e.target.value)))}
-                  aria-label="Bottom connection points slider"
-                  className="w-full accent-[#00d4ff] cursor-pointer"
-                />
-                <div className="flex justify-between text-[10px] text-muted-foreground/60 font-mono">
-                  <span>{MIN_BOTTOM_HANDLES}</span>
-                  <span>{MAX_BOTTOM_HANDLES}</span>
-                </div>
+                <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>
               </div>
             )}
 
@@ -395,45 +364,25 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                 value={form.notes ?? ''}
                 onChange={(e) => set('notes', e.target.value)}
                 placeholder="Optional notes"
-                className={`bg-[#21262d] border-[#30363d] text-sm h-8 ${modalStyles['modal-radius']}`}
+                className="bg-[#21262d] border-[#30363d] text-sm h-8"
               />
             </div>
           </div>
 
-          <div className="flex justify-between gap-2 pt-1">
-            {/* Show delete button only for edit mode (not add) */}
-            {title !== 'Add Node' ? (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="text-[#f85149] hover:text-[#f85149] hover:bg-[#f85149]/10 cursor-pointer"
-                onClick={() => {
-                  if (window.confirm('Delete this node?')) {
-                    onSubmit({ ...form, _delete: true })
-                    onClose()
-                  }
-                }}
-                style={{ minWidth: 64 }}
-              >
-                Delete
-              </Button>
-            ) : <span />}
-            <div className="flex gap-2">
-              <Button type="button" variant="ghost" size="sm" className={`cursor-pointer ${modalStyles['modal-cancel-hover']}`} onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                size="sm"
-                className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90 cursor-pointer"
-              >
-                {title === 'Add Node' ? 'Add' : 'Save'}
-              </Button>
-            </div>
+          <div className="flex justify-end gap-2 pt-1">
+            <Button type="button" variant="ghost" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
+            >
+              {title === 'Add Node' ? 'Add' : 'Save'}
+            </Button>
           </div>
         </form>
       </DialogContent>
     </Dialog>
   )
-}
+}

frontend/src/components/modals/SearchModal.tsx

@@ -4,6 +4,7 @@ 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
@@ -89,7 +90,7 @@ export function SearchModal({ open, onClose, onOpenPending }: SearchModalProps)
                 className="flex items-center gap-3 px-4 py-2 hover:bg-[#21262d] cursor-pointer"
                 onClick={() => handleSelectNode(node.id)}
               >
-                <span className="text-xs font-mono text-[#00d4ff] w-16 shrink-0">{node.data.type}</span>
+                <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-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>

frontend/src/components/modals/ThemeModal.tsx

@@ -1,12 +1,11 @@
-import { useRef, useState, type KeyboardEvent } from 'react'
+import { useState } from 'react'
 import { toast } from 'sonner'
-import { Check, Pencil } from 'lucide-react'
+import { Check } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { THEMES, THEME_ORDER, type ThemeId } from '@/utils/themes'
 import { useThemeStore } from '@/stores/themeStore'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { CustomStyleModal } from './CustomStyleModal'
 
 // Node-type accent colors to display as preview swatches
 const PREVIEW_TYPES = ['isp', 'server', 'proxmox', 'switch', 'iot'] as const
@@ -15,108 +14,74 @@ interface ThemeCardProps {
   themeId: ThemeId
   selected: boolean
   onClick: () => void
-  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void
-  buttonRef?: (element: HTMLButtonElement | null) => void
-  onEdit?: () => void
 }
 
-function ThemeCard({ themeId, selected, onClick, onKeyDown, buttonRef, onEdit }: ThemeCardProps) {
-  const { customStyle } = useThemeStore()
+function ThemeCard({ themeId, selected, onClick }: ThemeCardProps) {
   const preset = THEMES[themeId]
   const c = preset.colors
-  const isCustom = themeId === 'custom'
-
-  // For custom theme, use defined node colors for preview swatches
-  const swatchColors = isCustom
-    ? PREVIEW_TYPES.map((t) => customStyle.nodes[t]?.borderColor ?? c.nodeAccents[t].border)
-    : PREVIEW_TYPES.map((t) => c.nodeAccents[t].border)
-
-  const ethernetColor = isCustom
-    ? (customStyle.edges['ethernet']?.color ?? c.edgeColors.ethernet)
-    : c.edgeColors.ethernet
-  const wifiColor = isCustom
-    ? (customStyle.edges['wifi']?.color ?? c.edgeColors.wifi)
-    : c.edgeColors.wifi
 
   return (
-    <div className="relative w-full h-full">
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-        className="relative rounded-xl border-2 p-3 text-left transition-all duration-150 focus:outline-none w-full h-full flex flex-col"
-        style={{
-          borderColor: selected ? c.nodeAccents.isp.border : c.handleBackground,
-          background: c.canvasBackground,
-          boxShadow: selected ? `0 0 0 1px ${c.nodeAccents.isp.border}44, 0 0 12px ${c.nodeAccents.isp.border}22` : 'none',
-        }}
-      >
-        {/* Selected checkmark */}
-        {selected && (
-          <span
-            className="absolute top-2 right-2 flex items-center justify-center w-4 h-4 rounded-full"
-            style={{ background: c.nodeAccents.isp.border }}
-          >
-            <Check size={10} style={{ color: c.canvasBackground }} />
-          </span>
-        )}
-
-        {/* Mini canvas preview */}
-        <div
-          className="rounded-md mb-2.5 flex flex-col gap-1.5 p-2"
-          style={{ background: c.nodeCardBackground, border: `1px solid ${c.handleBackground}` }}
+    <button
+      type="button"
+      onClick={onClick}
+      className="relative rounded-xl border-2 p-3 text-left transition-all duration-150 focus:outline-none w-full"
+      style={{
+        borderColor: selected ? c.nodeAccents.isp.border : c.handleBackground,
+        background: c.canvasBackground,
+        boxShadow: selected ? `0 0 0 1px ${c.nodeAccents.isp.border}44, 0 0 12px ${c.nodeAccents.isp.border}22` : 'none',
+      }}
+    >
+      {/* Selected checkmark */}
+      {selected && (
+        <span
+          className="absolute top-2 right-2 flex items-center justify-center w-4 h-4 rounded-full"
+          style={{ background: c.nodeAccents.isp.border }}
         >
-          <div className="flex gap-1 items-center flex-wrap">
-            {swatchColors.map((color, i) => (
-              <span
-                key={i}
-                className="w-2.5 h-2.5 rounded-full shrink-0"
-                style={{ backgroundColor: color }}
-              />
-            ))}
-          </div>
-          <div style={{ height: 2, background: ethernetColor, width: '80%', borderRadius: 2 }} />
-          <div
-            style={{
-              height: 1,
-              width: '55%',
-              backgroundImage: `repeating-linear-gradient(90deg, ${wifiColor} 0 5px, transparent 5px 8px)`,
-            }}
-          />
-        </div>
-
-        <div
-          className="text-sm font-semibold leading-tight wrap-break-word"
-          style={{ color: c.nodeLabelColor }}
-        >
-          {preset.label}
-        </div>
-        <div
-          className="text-xs leading-snug mt-1 line-clamp-3 whitespace-normal wrap-break-word overflow-hidden min-h-12"
-          style={{ color: c.nodeSubtextColor }}
-        >
-          {preset.description}
-        </div>
-      </button>
-
-      {/* Edit button — only for custom theme */}
-      {isCustom && onEdit && (
-        <button
-          type="button"
-          onClick={(e) => { e.stopPropagation(); onEdit() }}
-          title="Edit custom style"
-          className="absolute bottom-2 right-2 flex items-center justify-center w-6 h-6 rounded-md transition-colors"
-          style={{
-            background: c.nodeCardBackground,
-            color: c.nodeLabelColor,
-            border: `1px solid ${c.handleBackground}`,
-          }}
-        >
-          <Pencil size={11} />
-        </button>
+          <Check size={10} style={{ color: c.canvasBackground }} />
+        </span>
       )}
-    </div>
+
+      {/* Mini canvas preview */}
+      <div
+        className="rounded-md mb-2.5 flex flex-col gap-1.5 p-2"
+        style={{ background: c.nodeCardBackground, border: `1px solid ${c.handleBackground}` }}
+      >
+        {/* Node accent dots */}
+        <div className="flex gap-1 items-center flex-wrap">
+          {PREVIEW_TYPES.map((type) => (
+            <span
+              key={type}
+              className="w-2.5 h-2.5 rounded-full shrink-0"
+              style={{ backgroundColor: c.nodeAccents[type].border }}
+            />
+          ))}
+        </div>
+        {/* Edge line */}
+        <div style={{ height: 2, background: c.edgeColors.ethernet, width: '80%', borderRadius: 2 }} />
+        {/* Wifi dashed line */}
+        <div
+          style={{
+            height: 1,
+            width: '55%',
+            backgroundImage: `repeating-linear-gradient(90deg, ${c.edgeColors.wifi} 0 5px, transparent 5px 8px)`,
+          }}
+        />
+      </div>
+
+      {/* Label */}
+      <div
+        className="text-xs font-semibold leading-tight"
+        style={{ color: c.nodeLabelColor }}
+      >
+        {preset.label}
+      </div>
+      <div
+        className="text-[10px] leading-snug mt-0.5 line-clamp-2"
+        style={{ color: c.nodeSubtextColor }}
+      >
+        {preset.description}
+      </div>
+    </button>
   )
 }
 
@@ -128,8 +93,6 @@ interface ThemeModalProps {
 export function ThemeModal({ open, onClose }: ThemeModalProps) {
   const { activeTheme, setTheme } = useThemeStore()
   const { markUnsaved } = useCanvasStore()
-  const cardRefs = useRef<Array<HTMLButtonElement | null>>([])
-  const [customStyleOpen, setCustomStyleOpen] = useState(false)
 
   // Capture the theme that was active when the modal opened
   const [originalTheme] = useState<ThemeId>(activeTheme)
@@ -137,96 +100,68 @@ export function ThemeModal({ open, onClose }: ThemeModalProps) {
 
   const handleSelect = (id: ThemeId) => {
     setSelected(id)
+    // Live-preview the selected theme on the canvas
     setTheme(id)
   }
 
-  const handleCardKeyDown = (index: number) => (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      handleApply()
-      return
-    }
-
-    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
-
-    event.preventDefault()
-    const direction = event.key === 'ArrowRight' ? 1 : -1
-    const nextIndex = (index + direction + THEME_ORDER.length) % THEME_ORDER.length
-    const nextTheme = THEME_ORDER[nextIndex]
-
-    setSelected(nextTheme)
-    setTheme(nextTheme)
-
-    const nextCard = cardRefs.current[nextIndex]
-    if (!nextCard) return
-
-    nextCard.focus({ preventScroll: true })
-    nextCard.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
-  }
-
   const handleApply = () => {
     setTheme(selected)
     markUnsaved()
     onClose()
-    toast.info('Style applied — save your canvas to make it permanent', { duration: 5000 })
+    toast.info('Style applied — save your canvas to make it permanent', {
+      duration: 5000,
+    })
   }
 
   const handleCancel = () => {
+    // Revert to the original theme
     setTheme(originalTheme)
     onClose()
   }
 
   return (
-    <>
-      <Dialog open={open} onOpenChange={(o) => { if (!o) handleCancel() }}>
-        <DialogContent className="bg-[#161b22] border-[#30363d] w-fit max-w-[calc(100%-2rem)] sm:max-w-[50vw]">
-          <DialogHeader>
-            <DialogTitle className="text-sm font-semibold">Choose Canvas Style</DialogTitle>
-          </DialogHeader>
+    <Dialog open={open} onOpenChange={(o) => { if (!o) handleCancel() }}>
+      <DialogContent className="bg-[#161b22] border-[#30363d] w-[90vw] max-w-4xl">
+        <DialogHeader>
+          <DialogTitle className="text-sm font-semibold">Choose Canvas Style</DialogTitle>
+        </DialogHeader>
 
-          <div className="flex items-stretch flex-nowrap gap-3 py-1 overflow-x-auto overflow-y-hidden pb-2 pr-1">
-            {THEME_ORDER.map((id, index) => (
-              <div key={id} className="shrink-0 w-30 md:w-24 h-full">
-                <ThemeCard
-                  themeId={id}
-                  selected={selected === id}
-                  onClick={() => handleSelect(id)}
-                  onKeyDown={handleCardKeyDown(index)}
-                  buttonRef={(element) => { cardRefs.current[index] = element }}
-                  onEdit={id === 'custom' ? () => setCustomStyleOpen(true) : undefined}
-                />
-              </div>
-            ))}
-          </div>
+        <div className="grid grid-cols-5 gap-3 py-1">
+          {THEME_ORDER.map((id) => (
+            <ThemeCard
+              key={id}
+              themeId={id}
+              selected={selected === id}
+              onClick={() => handleSelect(id)}
+            />
+          ))}
+        </div>
 
-          <div className="flex justify-end gap-2 pt-1">
-            <Button
-              type="button"
-              size="sm"
-              variant="ghost"
-              className="text-muted-foreground hover:text-foreground"
-              onClick={handleCancel}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
-              style={
-                selected !== 'default'
-                  ? { background: THEMES[selected].colors.nodeAccents.isp.border }
-                  : undefined
-              }
-              onClick={handleApply}
-            >
-              Apply Style
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      <CustomStyleModal open={customStyleOpen} onClose={() => setCustomStyleOpen(false)} />
-    </>
+        <div className="flex justify-end gap-2 pt-1">
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={handleCancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
+            style={
+              selected !== 'default'
+                ? { background: THEMES[selected].colors.nodeAccents.isp.border }
+                : undefined
+            }
+            onClick={handleApply}
+          >
+            Apply Style
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }

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

@@ -1,74 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { ExportModal } from '../ExportModal'
-
-const mockExportToPng = vi.fn()
-vi.mock('@/utils/export', () => ({
-  exportToPng: (...args: unknown[]) => mockExportToPng(...args),
-  EXPORT_QUALITY_OPTIONS: [
-    { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
-    { value: 'high',     label: 'High',     pixelRatio: 2, hint: '2× — recommended' },
-    { value: 'ultra',    label: 'Ultra',    pixelRatio: 4, hint: '4× — print quality, large file' },
-  ],
-}))
-
-const el = document.createElement('div')
-const getElement = () => el
-const onClose = vi.fn()
-
-describe('ExportModal', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockExportToPng.mockResolvedValue(undefined)
-  })
-
-  it('renders all three quality options', () => {
-    render(<ExportModal open onClose={onClose} getElement={getElement} />)
-    expect(screen.getByText('Standard')).toBeInTheDocument()
-    expect(screen.getByText('High')).toBeInTheDocument()
-    expect(screen.getByText('Ultra')).toBeInTheDocument()
-  })
-
-  it('selects High by default', () => {
-    render(<ExportModal open onClose={onClose} getElement={getElement} />)
-    const highBtn = screen.getByText('High').closest('button')!
-    expect(highBtn.className).toContain('border-[#00d4ff]')
-  })
-
-  it('changes selection when another option is clicked', () => {
-    render(<ExportModal open onClose={onClose} getElement={getElement} />)
-    fireEvent.click(screen.getByText('Ultra').closest('button')!)
-    expect(screen.getByText('Ultra').closest('button')!.className).toContain('border-[#00d4ff]')
-    expect(screen.getByText('High').closest('button')!.className).not.toContain('border-[#00d4ff]')
-  })
-
-  it('calls exportToPng with selected quality on Download click', async () => {
-    render(<ExportModal open onClose={onClose} getElement={getElement} />)
-    fireEvent.click(screen.getByText('Standard').closest('button')!)
-    fireEvent.click(screen.getByRole('button', { name: /download/i }))
-    await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'standard'))
-  })
-
-  it('closes after successful export', async () => {
-    render(<ExportModal open onClose={onClose} getElement={getElement} />)
-    fireEvent.click(screen.getByRole('button', { name: /download/i }))
-    await waitFor(() => expect(onClose).toHaveBeenCalled())
-  })
-
-  it('calls onClose when Cancel is clicked', () => {
-    render(<ExportModal open onClose={onClose} getElement={getElement} />)
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
-    expect(onClose).toHaveBeenCalled()
-  })
-
-  it('does not call exportToPng when getElement returns null', async () => {
-    render(<ExportModal open onClose={onClose} getElement={() => null} />)
-    fireEvent.click(screen.getByRole('button', { name: /download/i }))
-    await waitFor(() => expect(mockExportToPng).not.toHaveBeenCalled())
-  })
-
-  it('does not render when closed', () => {
-    render(<ExportModal open={false} onClose={onClose} getElement={getElement} />)
-    expect(screen.queryByText('Export as PNG')).not.toBeInTheDocument()
-  })
-})

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

@@ -251,60 +251,4 @@ describe('GroupRectModal', () => {
     const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
     expect(submitted.border_style).toBe('solid')
   })
-
-  it('shows opacity sliders for all three color fields', () => {
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
-    const sliders = screen.getAllByRole('slider')
-    expect(sliders).toHaveLength(3)
-  })
-
-  it('default background_color is 8-digit hex with low alpha', () => {
-    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.background_color).toBe('#00d4ff0d')
-    expect(submitted.background_color.length).toBe(9)
-  })
-
-  it('moving background opacity slider updates background_color alpha', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    // background slider is the third one (Text, Border, Background)
-    const sliders = screen.getAllByRole('slider')
-    fireEvent.change(sliders[2], { target: { value: '50' } })
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    // alpha 50% → 0x80 = 128
-    expect(submitted.background_color).toBe('#00d4ff80')
-  })
-
-  it('moving border opacity slider to 0 makes border fully transparent', () => {
-    const onSubmit = vi.fn()
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
-    const sliders = screen.getAllByRole('slider')
-    fireEvent.change(sliders[1], { target: { value: '0' } })
-    fireEvent.click(screen.getByText('Add'))
-    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
-    expect(submitted.border_color).toBe('#00d4ff00')
-  })
-
-  it('pre-fills opacity from 8-digit initial background_color', () => {
-    render(
-      <GroupRectModal
-        open
-        onClose={vi.fn()}
-        onSubmit={vi.fn()}
-        initial={{ background_color: '#ff6e0080' }}
-      />
-    )
-    const sliders = screen.getAllByRole('slider')
-    expect((sliders[2] as HTMLInputElement).value).toBe('50')
-  })
-
-  it('shows opacity percentage in label', () => {
-    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
-    // Background default is 5% opacity
-    expect(screen.getByText(/Background 5%/)).toBeInTheDocument()
-  })
 })

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

@@ -72,7 +72,7 @@ describe('NodeModal', () => {
     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, 2001:db8::1') as HTMLInputElement).value).toBe('192.168.1.10')
+    expect((screen.getByPlaceholderText('192.168.1.x') as HTMLInputElement).value).toBe('192.168.1.10')
   })
 
   // ── Cancel ────────────────────────────────────────────────────────────
@@ -83,28 +83,6 @@ describe('NodeModal', () => {
     expect(onClose).toHaveBeenCalledOnce()
   })
 
-  // ── Delete confirm ────────────────────────────────────────────────────
-
-  it('deletes and closes when Delete confirm is accepted', () => {
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
-    const { onClose, onSubmit } = renderModal({ title: 'Edit Node', initial: BASE })
-    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
-    expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({ _delete: true }))
-    expect(onClose).toHaveBeenCalledOnce()
-    confirmSpy.mockRestore()
-  })
-
-  // Regression: bare-if without braces used to call onClose() unconditionally,
-  // closing the modal even when the user cancelled the confirm dialog.
-  it('does not delete or close when Delete confirm is cancelled', () => {
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
-    const { onClose, onSubmit } = renderModal({ title: 'Edit Node', initial: BASE })
-    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
-    expect(onSubmit).not.toHaveBeenCalled()
-    expect(onClose).not.toHaveBeenCalled()
-    confirmSpy.mockRestore()
-  })
-
   // ── Label validation ──────────────────────────────────────────────────
 
   it('blocks submit and shows error when label is empty', () => {
@@ -143,7 +121,7 @@ describe('NodeModal', () => {
   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, 2001:db8::1'), { target: { value: '10.0.0.1' } })
+    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>
@@ -152,21 +130,6 @@ describe('NodeModal', () => {
     expect(data.notes).toBe('rack A')
   })
 
-  it('resets form values when reopened in Add mode', () => {
-    const onClose = vi.fn()
-    const onSubmit = vi.fn()
-
-    const { rerender } = render(<NodeModal key="open-1" open onClose={onClose} onSubmit={onSubmit} />)
-    fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'Temp Node' } })
-    fireEvent.change(screen.getByPlaceholderText('server.lan'), { target: { value: 'temp.local' } })
-
-    rerender(<NodeModal key="closed" open={false} onClose={onClose} onSubmit={onSubmit} />)
-    rerender(<NodeModal key="open-2" open onClose={onClose} onSubmit={onSubmit} />)
-
-    expect((screen.getByPlaceholderText('My Server') as HTMLInputElement).value).toBe('')
-    expect((screen.getByPlaceholderText('server.lan') as HTMLInputElement).value).toBe('')
-  })
-
   it('submits check_target', () => {
     const { onSubmit } = renderModal({ initial: BASE })
     fireEvent.change(screen.getByPlaceholderText('http://...'), { target: { value: 'http://192.168.1.10:8080' } })
@@ -258,16 +221,18 @@ describe('NodeModal', () => {
 
   // ── Container mode ─────────────────────────────────────────────────────
 
-  const containerModeTypes = ['proxmox', 'vm', 'lxc', 'docker_host'] as const
-  const nonContainerModeTypes = ['isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer', 'iot', 'camera', 'cpl', 'computer', 'generic', 'docker_container', 'groupRect', 'group'] as const
-
-  it.each(containerModeTypes)('shows Container Mode toggle for %s type', (type) => {
-    renderModal({ initial: { ...BASE, type } })
+  it('shows Container Mode toggle for proxmox type', () => {
+    renderModal({ initial: { ...BASE, type: 'proxmox' } })
     expect(screen.getByText('Container Mode')).toBeDefined()
   })
 
-  it.each(nonContainerModeTypes)('hides Container Mode for %s type', (type) => {
-    renderModal({ initial: { ...BASE, type } })
+  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()
   })
 
@@ -280,45 +245,22 @@ describe('NodeModal', () => {
 
   // ── Parent container ──────────────────────────────────────────────────
 
-  const parentContainerVisibleTypes = ['proxmox', 'vm', 'lxc', 'docker_host', 'isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer', 'iot', 'camera', 'cpl', 'computer', 'generic'] as const
-  const parentContainerHiddenTypes = ['groupRect', 'group'] as const
-
-  it.each(parentContainerVisibleTypes)('shows Parent Container for %s type when options are provided', (type) => {
+  it('shows Parent Container when options are provided', () => {
     renderModal({
-      initial: { ...BASE, type },
+      initial: { ...BASE, type: 'server' },
       parentContainerNodes: [{ id: 'c1', label: 'Container 01' }],
     })
     expect(screen.getByText('Parent Container')).toBeDefined()
     expect(screen.getByText('Container 01')).toBeDefined()
   })
 
-  it.each(parentContainerHiddenTypes)('hides Parent Container for %s type even when options are provided', (type) => {
-    renderModal({ initial: { ...BASE, type }, parentContainerNodes: [{ id: 'c1', label: 'Container 01' }] })
+  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.each(parentContainerVisibleTypes)('hides Parent Container for %s type when no container options are available', (type) => {
-    renderModal({ initial: { ...BASE, type } })
-    expect(screen.queryByText('Parent Container')).toBeNull()
-  })
-
-  it('docker_container shows only docker_host parents', () => {
-    renderModal({
-      initial: { ...BASE, type: 'docker_container' },
-      parentContainerNodes: [
-        { id: 'h1', label: 'My Docker Host', nodeType: 'docker_host' },
-        { id: 'p1', label: 'My Proxmox', nodeType: 'proxmox' },
-      ],
-    })
-    expect(screen.getByText('My Docker Host')).toBeDefined()
-    expect(screen.queryByText('My Proxmox')).toBeNull()
-  })
-
-  it('docker_container hides Parent Container when no docker_host is available', () => {
-    renderModal({
-      initial: { ...BASE, type: 'docker_container' },
-      parentContainerNodes: [{ id: 'p1', label: 'My Proxmox', nodeType: 'proxmox' }],
-    })
+  it('hides Parent Container when no container options are available', () => {
+    renderModal({ initial: { ...BASE, type: 'server' } })
     expect(screen.queryByText('Parent Container')).toBeNull()
   })
 
@@ -367,37 +309,18 @@ describe('NodeModal', () => {
 
   it('defaults bottom_handles to 1', () => {
     renderModal({ initial: BASE })
-    const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
-    expect(slider.value).toBe('1')
+    expect(selects()[2].value).toBe('1')
   })
 
   it('pre-fills bottom_handles from initial', () => {
     renderModal({ initial: { ...BASE, bottom_handles: 3 } })
-    const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
-    expect(slider.value).toBe('3')
+    expect(selects()[2].value).toBe('3')
   })
 
   it('submits updated bottom_handles', () => {
     const { onSubmit } = renderModal({ initial: BASE })
-    const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
-    fireEvent.change(slider, { target: { value: '12' } })
+    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(12)
-  })
-
-  it('supports the full 1..48 range', () => {
-    const { onSubmit } = renderModal({ initial: BASE })
-    const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
-    expect(slider.min).toBe('1')
-    expect(slider.max).toBe('48')
-    fireEvent.change(slider, { target: { value: '48' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).bottom_handles).toBe(48)
-  })
-
-  it('clamps pre-filled out-of-range values into [1,48]', () => {
-    renderModal({ initial: { ...BASE, bottom_handles: 9999 } })
-    const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
-    expect(slider.value).toBe('48')
+    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).bottom_handles).toBe(4)
   })
 })

frontend/src/components/modals/modal-interactive.module.css

@@ -1,27 +0,0 @@
-/* SidebarItem pointer on hover */
-.sidebar-pointer:hover {
-  cursor: pointer !important;
-}
-/* Consistent border radius for all modal input/select/button elements */
-.modal-radius {
-  border-radius: 6px !important;
-}
-
-/* Pointer cursor for close X */
-.modal-close-pointer:hover {
-  cursor: pointer !important;
-}
-
-/* Subtle hover background for cancel button */
-.modal-cancel-hover:hover {
-  background: #21262d !important;
-}
-/* Shared hover/focus border effect for interactive modal elements */
-.modal-interactive {
-  transition: border-color 0.15s;
-}
-.modal-interactive:hover,
-.modal-interactive:focus {
-  border-color: #8b949e !important;
-  outline: none;
-}

frontend/src/components/panels/DetailPanel.tsx

@@ -2,11 +2,9 @@ import { createElement, useState } from 'react'
 import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
 import { getServiceUrl } from '@/utils/serviceUrl'
-import { primaryIp } from '@/utils/maskIp'
 import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '@/utils/propertyIcons'
 import type { Node } from '@xyflow/react'
 
@@ -14,8 +12,8 @@ interface DetailPanelProps {
   onEdit: (id: string) => void
 }
 
-type SvcForm = { port: string; protocol: 'tcp' | 'udp'; service_name: string; path: string }
-const EMPTY_FORM: SvcForm = { port: '', protocol: 'tcp', service_name: '', path: '' }
+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 }
@@ -95,18 +93,10 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
   }
 
   const handleAddService = () => {
-    const trimmedPort = newSvc.port.trim()
-    const port = trimmedPort === '' ? undefined : parseInt(trimmedPort, 10)
-    if (!newSvc.service_name.trim()) return
-    if (trimmedPort !== '' && (port == null || Number.isNaN(port) || port < 1 || port > 65535)) return
+    const port = parseInt(newSvc.port, 10)
+    if (!newSvc.service_name.trim() || isNaN(port) || port < 1 || port > 65535) return
     snapshotHistory()
-    const path = newSvc.path.trim()
-    const svc: ServiceInfo = {
-      ...(port != null ? { port } : {}),
-      protocol: newSvc.protocol,
-      service_name: newSvc.service_name.trim(),
-      ...(path ? { path } : {}),
-    }
+    const svc: ServiceInfo = { port, protocol: newSvc.protocol, service_name: newSvc.service_name.trim() }
     updateNode(node.id, { services: [...services, svc] })
     setNewSvc(EMPTY_FORM)
     setAddingForNode(null)
@@ -122,29 +112,18 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
   const handleStartEdit = (index: number) => {
     const svc = services[index]
     if (!svc) return
-    setEditSvc({ port: svc.port != null ? String(svc.port) : '', protocol: svc.protocol, service_name: svc.service_name, path: svc.path ?? '' })
+    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 trimmedPort = editSvc.port.trim()
-    const port = trimmedPort === '' ? undefined : parseInt(trimmedPort, 10)
-    if (!editSvc.service_name.trim()) return
-    if (trimmedPort !== '' && (port == null || Number.isNaN(port) || port < 1 || port > 65535)) return
+    const port = parseInt(editSvc.port, 10)
+    if (!editSvc.service_name.trim() || isNaN(port) || port < 1 || port > 65535) return
     snapshotHistory()
-    const path = editSvc.path.trim()
     const updated = services.map((svc, i) =>
-      i === editingIndex
-        ? {
-            ...svc,
-            protocol: editSvc.protocol,
-            service_name: editSvc.service_name.trim(),
-            ...(port != null ? { port } : { port: undefined }),
-            ...(path ? { path } : { path: undefined }),
-          }
-        : svc
+      i === editingIndex ? { ...svc, port, protocol: editSvc.protocol, service_name: editSvc.service_name.trim() } : svc
     )
     updateNode(node.id, { services: updated })
     setEditingFor(null)
@@ -200,7 +179,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
     <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">
         <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 cursor-pointer">
+        <button aria-label="Close panel" onClick={() => setSelectedNode(null)} className="text-muted-foreground hover:text-foreground transition-colors">
           <X size={16} />
         </button>
       </div>
@@ -223,14 +202,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
             </a>
           </div>
         )}
-        {data.ip && (
-          <div className="flex justify-between gap-2 items-baseline">
-            <span className="text-muted-foreground text-xs shrink-0">IP Address</span>
-            <a href={`http://${primaryIp(data.ip)}`} target="_blank" rel="noopener noreferrer" className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1" title={data.ip}>
-              {data.ip}<ExternalLink size={10} className="shrink-0" />
-            </a>
-          </div>
-        )}
+        {data.ip && <DetailRow label="IP Address" value={data.ip} mono />}
         {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 />}
@@ -243,7 +215,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
           <span className="text-xs text-muted-foreground">Properties{properties.length > 0 ? ` (${properties.length})` : ''}</span>
           <button
             onClick={() => { setAddingProp((v) => !v); setEditingPropIndex(null) }}
-            className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors cursor-pointer"
+            className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors"
           >
             <Plus size={10} /> Add
           </button>
@@ -289,7 +261,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
       <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 cursor-pointer">
+          <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>
@@ -300,7 +272,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
               editingIndex === i ? (
                 <ServiceForm key={`edit-${i}`} form={editSvc} onChange={setEditSvc} onConfirm={handleSaveEdit} onCancel={() => setEditingFor(null)} confirmLabel="Save" autoFocus />
               ) : (
-                <ServiceBadge key={`${svc.port ?? 'host'}-${svc.protocol}-${svc.path ?? ''}-${i}`} svc={svc} host={host} onEdit={() => handleStartEdit(i)} onRemove={() => handleRemoveService(i)} />
+                <ServiceBadge key={`${svc.port}-${svc.protocol}-${i}`} svc={svc} host={host} onEdit={() => handleStartEdit(i)} onRemove={() => handleRemoveService(i)} />
               )
             )}
           </div>
@@ -316,10 +288,10 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
       )}
 
       <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 cursor-pointer" onClick={() => onEdit(node.id)}>
+        <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 cursor-pointer" aria-label="Delete node" onClick={handleDelete}>
+        <Button size="sm" variant="destructive" className="gap-1.5" aria-label="Delete node" onClick={handleDelete}>
           <Trash2 size={14} />
         </Button>
       </div>
@@ -500,46 +472,23 @@ function DetailRow({ label, value, mono }: { label: string; value: string; mono?
 }
 
 function ServiceForm({ form, onChange, onConfirm, onCancel, confirmLabel, autoFocus }: {
-  form: { port: string; protocol: 'tcp' | 'udp'; service_name: string; path: string }
-  onChange: (f: { port: string; protocol: 'tcp' | 'udp'; service_name: string; path: string }) => void
+  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
 }) {
-  const setPort = (value: string) => {
-    const digitsOnly = value.replace(/\D/g, '').slice(0, 5)
-    onChange({ ...form, port: digitsOnly })
-  }
-
-  const clampPort = (value: string) => {
-    if (!value) return ''
-    const parsed = Number.parseInt(value, 10)
-    if (!Number.isFinite(parsed)) return ''
-    return String(Math.max(1, Math.min(65535, parsed)))
-  }
-
   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="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
-          value={form.port}
-          onChange={(e) => setPort(e.target.value)}
-          onBlur={() => onChange({ ...form, port: clampPort(form.port) })}
-          placeholder="Port"
-          className="bg-[#21262d] border-[#30363d] font-mono text-xs h-7 w-28 shrink-0"
-          onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
-        />
+        <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>
-      <Input value={form.path} onChange={(e) => onChange({ ...form, path: e.target.value })} placeholder="Path (/admin)" className="bg-[#21262d] border-[#30363d] font-mono text-xs h-7" onKeyDown={(e) => e.key === 'Enter' && onConfirm()} />
       <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>
@@ -662,87 +611,20 @@ const CATEGORY_COLORS: Record<string, string> = {
 function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) {
   const url = getServiceUrl(svc, host)
   const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e'
-  const hasPort = svc.port != null
-  const portLabel = hasPort ? String(svc.port) : ''
-  const pathLabel = svc.path?.trim() ? svc.path.trim() : ''
-
-  return (
-    <div
-      className="group flex items-center gap-1 border rounded-md text-xs transition-colors px-2 py-1.5 min-w-0"
-      style={{ background: '#21262d', borderColor: '#30363d' }}
-    >
-      <span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
-      {url ? (
-        <a
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-medium truncate min-w-0 flex-1"
-          style={{ color }}
-          title={svc.service_name}
-          onClick={e => e.stopPropagation()}
-        >
-          {svc.service_name}
-        </a>
-      ) : (
-        <span
-          className="font-medium truncate min-w-0 flex-1"
-          style={{ color }}
-          title={svc.service_name}
-        >
-          {svc.service_name}
-        </span>
-      )}
-      <div className="flex items-center gap-1 shrink-0">
-        {pathLabel && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  className="truncate text-[#8b949e] max-w-[80px]"
-                  tabIndex={0}
-                  aria-label={pathLabel}
-                >
-                  {pathLabel}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent side="top">{pathLabel}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-        {hasPort && (
-          <span className="font-mono text-[#8b949e] shrink-0">{portLabel}/{svc.protocol}</span>
-        )}
-        {url ? (
-          <a
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex w-2.5 h-2.5 items-center justify-center shrink-0"
-            aria-label="Open service link"
-            style={{ color: 'inherit' }}
-            onClick={e => e.stopPropagation()}
-          >
-            <ExternalLink size={10} className="text-muted-foreground" />
-          </a>
-        ) : (
-          <span className="w-2.5 shrink-0" />
-        )}
-        <button
-          onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }}
-          className="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-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5"
-          title="Remove service"
-        >
-          <X size={10} />
-        </button>
+  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="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>
+      </div>
+      <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>
       </div>
     </div>
   )
+  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,13 +1,11 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
-import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square, Eye, Settings, StopCircle, X, LogOut } from 'lucide-react'
+import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square, Eye, Settings, StopCircle, X } from 'lucide-react'
 import { Logo } from '@/components/ui/Logo'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { useAuthStore } from '@/stores/authStore'
 import { scanApi, settingsApi } 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'
@@ -43,19 +41,12 @@ interface SidebarProps {
 }
 
 export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeApproved, forceView, highlightPendingId }: SidebarProps) {
-  const [collapsed, setCollapsed] = useState(false)
-  const [activeView, setActiveView] = useState<SidebarView>(forceView ?? 'canvas')
-  const [prevForceView, setPrevForceView] = useState(forceView)
-  const logout = useAuthStore((s) => s.logout)
+  const [_collapsed, setCollapsed] = useState(false)
+  const [_activeView, setActiveView] = useState<SidebarView>('canvas')
 
-  // forceView acts as a one-shot trigger from parent; user clicks afterwards still control view.
-  if (forceView !== prevForceView) {
-    setPrevForceView(forceView)
-    if (forceView) {
-      setActiveView(forceView)
-      setCollapsed(false)
-    }
-  }
+  // When forceView is set, override local state without useEffect
+  const collapsed = forceView ? false : _collapsed
+  const activeView = forceView ?? _activeView
 
   const { nodes, hasUnsavedChanges, hideIp, toggleHideIp } = useCanvasStore()
 
@@ -161,14 +152,6 @@ export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeAppro
             onClick={() => setActiveView((v) => v === 'settings' ? 'canvas' : 'settings')}
           />
         )}
-        {!STANDALONE && (
-          <SidebarItem
-            icon={LogOut}
-            label="Logout"
-            collapsed={collapsed}
-            onClick={logout}
-          />
-        )}
       </div>
 
       {!collapsed && <VersionBadge />}
@@ -182,26 +165,9 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
   const [devices, setDevices] = useState<PendingDevice[]>([])
   const [loading, setLoading] = useState(false)
   const [selected, setSelected] = useState<PendingDevice | null>(null)
-  const [checkedIds, setCheckedIds] = useState<Set<string>>(new Set())
   const { addNode, scanEventTs } = useCanvasStore()
   const highlightRef = useRef<HTMLButtonElement>(null)
 
-  const allChecked = devices.length > 0 && checkedIds.size === devices.length
-  const someChecked = checkedIds.size > 0
-
-  const toggleCheck = (id: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    setCheckedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id); else next.add(id)
-      return next
-    })
-  }
-
-  const toggleAll = () => {
-    setCheckedIds(allChecked ? new Set() : new Set(devices.map((d) => d.id)))
-  }
-
   const load = useCallback(async () => {
     setLoading(true)
     try {
@@ -218,58 +184,12 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
     try {
       await scanApi.clearPending()
       setDevices([])
-      setCheckedIds(new Set())
       toast.success('Pending devices cleared')
     } catch {
       toast.error('Failed to clear pending devices')
     }
   }
 
-  const handleBulkApprove = async () => {
-    const ids = [...checkedIds]
-    try {
-      const res = await scanApi.bulkApprove(ids)
-      const deviceToNode: Record<string, string> = {}
-      res.data.device_ids.forEach((did, i) => { deviceToNode[did] = res.data.node_ids[i] })
-      const approvedDevices = devices.filter((d) => ids.includes(d.id))
-      approvedDevices.forEach((d, i) => {
-        const nodeId = deviceToNode[d.id]
-        if (!nodeId) return
-        addNode({
-          id: nodeId,
-          type: (d.suggested_type ?? 'generic') as import('@/types').NodeType,
-          position: { x: 400 + (i % 4) * 160, y: 300 + Math.floor(i / 4) * 100 },
-          data: {
-            label: d.hostname ?? d.ip,
-            type: (d.suggested_type ?? 'generic') as import('@/types').NodeType,
-            ip: d.ip,
-            hostname: d.hostname ?? undefined,
-            status: 'unknown' as const,
-            services: (d.services ?? []) as import('@/types').ServiceInfo[],
-          },
-        })
-        onNodeApproved(nodeId)
-      })
-      setDevices((prev) => prev.filter((d) => !ids.includes(d.id)))
-      setCheckedIds(new Set())
-      toast.success(`Approved ${res.data.approved} device${res.data.approved !== 1 ? 's' : ''}`)
-    } catch {
-      toast.error('Failed to bulk approve devices')
-    }
-  }
-
-  const handleBulkHide = async () => {
-    const ids = [...checkedIds]
-    try {
-      const res = await scanApi.bulkHide(ids)
-      setDevices((prev) => prev.filter((d) => !ids.includes(d.id)))
-      setCheckedIds(new Set())
-      toast.success(`Hidden ${res.data.hidden} device${res.data.hidden !== 1 ? 's' : ''}`)
-    } catch {
-      toast.error('Failed to bulk hide devices')
-    }
-  }
-
   useEffect(() => { load() }, [load])
 
   useEffect(() => {
@@ -331,19 +251,7 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
     <>
       <div className="p-2">
         <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-1.5">
-            {devices.length > 0 && (
-              <input
-                type="checkbox"
-                checked={allChecked}
-                ref={(el) => { if (el) el.indeterminate = someChecked && !allChecked }}
-                onChange={toggleAll}
-                className="w-3 h-3 accent-[#00d4ff] cursor-pointer"
-                title="Select all"
-              />
-            )}
-            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Pending</span>
-          </div>
+          <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} />
@@ -355,28 +263,12 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
             )}
           </div>
         </div>
-        {someChecked && (
-          <div className="flex items-center gap-1 mb-2">
-            <button
-              onClick={handleBulkApprove}
-              className="flex-1 text-[10px] py-1 px-2 rounded bg-[#39d353]/20 text-[#39d353] hover:bg-[#39d353]/30 transition-colors font-medium"
-            >
-              Approve ({checkedIds.size})
-            </button>
-            <button
-              onClick={handleBulkHide}
-              className="flex-1 text-[10px] py-1 px-2 rounded bg-[#8b949e]/20 text-[#8b949e] hover:bg-[#8b949e]/30 transition-colors font-medium"
-            >
-              Hide ({checkedIds.size})
-            </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 namedService = d.services.find((s) => s.category != null && s.port != null && !COMMON_PORTS.has(s.port))
+          const namedService = d.services.find((s) => s.category != null && !COMMON_PORTS.has(s.port))
           const titleService = namedService
             ?? d.services.find((s) => s.port === 80)
             ?? d.services.find((s) => s.port === 443)
@@ -396,16 +288,10 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
               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]' : checkedIds.has(d.id) ? 'bg-[#21262d] border-[#00d4ff]/40' : 'bg-[#21262d] border-transparent hover:bg-[#30363d] hover:border-[#30363d]'}`}
+              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]'}`}
             >
               <div className="flex items-center gap-1.5">
-                <input
-                  type="checkbox"
-                  checked={checkedIds.has(d.id)}
-                  onClick={(e) => e.stopPropagation()}
-                  onChange={(e) => { e.stopPropagation(); toggleCheck(d.id, e as unknown as React.MouseEvent) }}
-                  className="w-3 h-3 accent-[#00d4ff] cursor-pointer shrink-0"
-                />
+                <span className="w-1.5 h-1.5 rounded-full bg-[#e3b341] shrink-0" />
                 <span className="text-foreground truncate font-medium">{title}</span>
               </div>
               {showIpBelow && (
@@ -600,7 +486,7 @@ function ScanHistoryPanel() {
             <div className="text-[#8b949e] text-[10px] font-mono truncate">{r.ranges.join(', ')}</div>
           )}
           {r.error && (
-            <div className="text-[#f85149] text-[10px] mt-1 leading-tight wrap-break-word whitespace-pre-wrap">
+            <div className="text-[#f85149] text-[10px] mt-1 leading-tight break-words whitespace-pre-wrap">
               {r.error}
             </div>
           )}
@@ -644,7 +530,7 @@ function SettingsPanel() {
             min={10}
             max={3600}
             value={interval}
-            onChange={(e) => { const v = Number(e.target.value); if (!isNaN(v)) setIntervalValue(v) }}
+            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>
@@ -681,7 +567,7 @@ function VersionBadge() {
       </a>
       {hasUpdate && latest && (
         <a
-          href={latest.url.startsWith('https://') ? latest.url : '#'}
+          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"
@@ -756,7 +642,7 @@ function SidebarItem({ icon: Icon, label, collapsed, active, badge, accent, onCl
   const btn = (
     <button
       onClick={onClick}
-      className={`relative flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm transition-colors cursor-pointer ${
+      className={`relative flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm transition-colors ${
         active
           ? 'bg-[#00d4ff]/10 text-[#00d4ff]'
           : accent

frontend/src/components/panels/Toolbar.tsx

@@ -39,7 +39,7 @@ export function Toolbar({ onSave, onAutoLayout, onExport, onChangeStyle, onUndo,
       <div className="flex-1" />
       <Button
         size="sm" variant="ghost"
-        className="gap-1.5 text-muted-foreground hover:text-foreground disabled:opacity-30 cursor-pointer hover:bg-[#21262d]"
+        className="gap-1.5 text-muted-foreground hover:text-foreground disabled:opacity-30"
         onClick={onUndo}
         disabled={past.length === 0}
         title="Undo (Ctrl+Z)"
@@ -48,7 +48,7 @@ export function Toolbar({ onSave, onAutoLayout, onExport, onChangeStyle, onUndo,
       </Button>
       <Button
         size="sm" variant="ghost"
-        className="gap-1.5 text-muted-foreground hover:text-foreground disabled:opacity-30 cursor-pointer hover:bg-[#21262d]"
+        className="gap-1.5 text-muted-foreground hover:text-foreground disabled:opacity-30"
         onClick={onRedo}
         disabled={future.length === 0}
         title="Redo (Ctrl+Y)"
@@ -56,13 +56,13 @@ export function Toolbar({ onSave, onAutoLayout, onExport, onChangeStyle, onUndo,
         <Redo2 size={14} />
       </Button>
       <div className="w-px h-4 bg-border mx-1" />
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={onAutoLayout}>
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={onAutoLayout}>
         <LayoutDashboard size={14} /> Auto Layout
       </Button>
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={onChangeStyle}>
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={onChangeStyle}>
         <Palette size={14} /> Style
       </Button>
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={() => fileInputRef.current?.click()} title="Import from YAML">
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={() => fileInputRef.current?.click()} title="Import from YAML">
         <Upload size={14} /> Import
       </Button>
       <input
@@ -72,21 +72,21 @@ export function Toolbar({ onSave, onAutoLayout, onExport, onChangeStyle, onUndo,
         className="hidden"
         onChange={handleFileChange}
       />
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={onExportYaml} title="Export canvas as YAML">
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={onExportYaml} title="Export canvas as YAML">
         <Download size={14} /> Export
       </Button>
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={onExport} title="Download canvas as PNG">
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={onExport} title="Download canvas as PNG">
         <FileDown size={14} /> PNG
       </Button>
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={onExportMd} title="Copy inventory as Markdown table">
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={onExportMd} title="Copy inventory as Markdown table">
         <Table2 size={14} /> MD
       </Button>
-      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer hover:bg-[#21262d]" onClick={onShortcuts} title="Keyboard shortcuts (?)">
+      <Button size="sm" variant="ghost" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={onShortcuts} title="Keyboard shortcuts (?)">
         <HelpCircle size={14} />
       </Button>
       <Button
         size="sm"
-        className="gap-1.5 relative cursor-pointer border border-transparent hover:border-white"
+        className="gap-1.5 relative"
         style={{
           background: hasUnsavedChanges ? '#00d4ff' : undefined,
           color: hasUnsavedChanges ? '#0d1117' : undefined,

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

@@ -2,11 +2,10 @@ import { describe, it, expect } from 'vitest'
 import { getServiceUrl } from '@/utils/serviceUrl'
 import type { ServiceInfo } from '@/types'
 
-const svc = (port?: number, protocol: 'tcp' | 'udp' = 'tcp', service_name = 'test', path?: string): ServiceInfo => ({
-  ...(port != null ? { port } : {}),
+const svc = (port: number, protocol: 'tcp' | 'udp' = 'tcp', service_name = 'test'): ServiceInfo => ({
+  port,
   protocol,
   service_name,
-  ...(path ? { path } : {}),
 })
 
 describe('getServiceUrl', () => {
@@ -64,20 +63,4 @@ describe('getServiceUrl', () => {
   it('uses host string directly (works with both IP and hostname)', () => {
     expect(getServiceUrl(svc(80), 'myserver.lan')).toBe('http://myserver.lan:80')
   })
-
-  it('uses the node port when the host already includes one', () => {
-    expect(getServiceUrl(svc(undefined, 'tcp', 'app'), '192.168.1.10:8080')).toBe('http://192.168.1.10:8080')
-  })
-
-  it('lets the service port override the node port', () => {
-    expect(getServiceUrl(svc(3000, 'tcp', 'app'), '192.168.1.10:8080')).toBe('http://192.168.1.10:3000')
-  })
-
-  it('appends a normalized path to the final URL', () => {
-    expect(getServiceUrl(svc(3000, 'tcp', 'app', 'admin/login'), '192.168.1.10')).toBe('http://192.168.1.10:3000/admin/login')
-  })
-
-  it('supports path-only services inheriting the node port', () => {
-    expect(getServiceUrl(svc(undefined, 'tcp', 'app', '/metrics'), '192.168.1.10:9090')).toBe('http://192.168.1.10:9090/metrics')
-  })
 })

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

@@ -293,35 +293,9 @@ describe('DetailPanel', () => {
       fireEvent.click(addHeaders[addHeaders.length - 1])
       fireEvent.change(screen.getByPlaceholderText('Service name'), { target: { value: 'nginx' } })
       fireEvent.change(screen.getByPlaceholderText('Port'), { target: { value: '80' } })
-      fireEvent.change(screen.getByPlaceholderText('Path (/admin)'), { target: { value: '/admin' } })
       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', path: '/admin' })
-    })
-
-    it('allows adding a service without a port', () => {
-      const updateNode = vi.fn()
-      vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
-        nodes: [makeNode({ ip: '192.168.1.10:8080' })],
-        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()} />)
-      const addHeaders = screen.getAllByText('Add')
-      fireEvent.click(addHeaders[addHeaders.length - 1])
-      fireEvent.change(screen.getByPlaceholderText('Service name'), { target: { value: 'health' } })
-      fireEvent.change(screen.getByPlaceholderText('Path (/admin)'), { target: { value: 'healthz' } })
-      fireEvent.click(screen.getAllByRole('button', { name: 'Add' }).at(-1) as HTMLButtonElement)
-
-      expect(updateNode).toHaveBeenCalledOnce()
-      expect(updateNode.mock.calls[0][1].services[0]).toMatchObject({ service_name: 'health', protocol: 'tcp', path: 'healthz' })
-      expect(updateNode.mock.calls[0][1].services[0].port).toBeUndefined()
+      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', () => {
@@ -358,7 +332,7 @@ describe('DetailPanel', () => {
     const svc = { port: 80, protocol: 'tcp' as const, service_name: 'nginx' }
 
     it('shows edit form pre-filled when pencil is clicked', () => {
-      setupStore({ services: [{ ...svc, path: '/admin' }] })
+      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')
@@ -367,8 +341,6 @@ describe('DetailPanel', () => {
       expect(nameInput.value).toBe('nginx')
       const portInput = screen.getByPlaceholderText('Port') as HTMLInputElement
       expect(portInput.value).toBe('80')
-      const pathInput = screen.getByPlaceholderText('Path (/admin)') as HTMLInputElement
-      expect(pathInput.value).toBe('/admin')
     })
 
     it('calls updateNode with updated values on Save', () => {
@@ -387,13 +359,11 @@ describe('DetailPanel', () => {
 
       const nameInput = screen.getByPlaceholderText('Service name')
       fireEvent.change(nameInput, { target: { value: 'apache' } })
-      fireEvent.change(screen.getByPlaceholderText('Path (/admin)'), { target: { value: '/admin' } })
       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)
-      expect(updateNode.mock.calls[0][1].services[0].path).toBe('/admin')
     })
 
     it('cancels edit without updating', () => {
@@ -415,76 +385,4 @@ describe('DetailPanel', () => {
       expect(screen.getByText('nginx')).toBeDefined()
     })
   })
-
-  describe('IP Address — clickable link', () => {
-    it('renders a link for a single IP', () => {
-      setupStore({ ip: '192.168.1.10' })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      const link = screen.getByRole('link', { name: /192\.168\.1\.10/ })
-      expect(link).toBeDefined()
-      expect(link.getAttribute('href')).toBe('http://192.168.1.10')
-      expect(link.getAttribute('target')).toBe('_blank')
-    })
-
-    it('renders no IP link when ip is absent', () => {
-      setupStore({ ip: undefined })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.queryByText('IP Address')).toBeNull()
-    })
-
-    it('uses primary IP as href for comma-separated IPs', () => {
-      setupStore({ ip: '192.168.1.10, 192.168.1.11' })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      const link = screen.getByRole('link', { name: /192\.168\.1\.10/ })
-      expect(link.getAttribute('href')).toBe('http://192.168.1.10')
-    })
-
-    it('displays full comma-separated IP string as link text', () => {
-      setupStore({ ip: '192.168.1.10, 192.168.1.11' })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText(/192\.168\.1\.10, 192\.168\.1\.11/)).toBeDefined()
-    })
-  })
-
-  describe('ServiceBadge rendering', () => {
-    it('renders service name and port/protocol label', () => {
-      setupStore({ services: [{ port: 8080, protocol: 'tcp', service_name: 'nginx', path: '' }] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText('nginx')).toBeDefined()
-      expect(screen.getByText('8080/tcp')).toBeDefined()
-    })
-
-    it('renders path label when path is set', () => {
-      setupStore({ services: [{ port: 80, protocol: 'tcp', service_name: 'web', path: '/admin' }] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText('/admin')).toBeDefined()
-    })
-
-    it('renders no path text when path is empty', () => {
-      setupStore({ services: [{ port: 80, protocol: 'tcp', service_name: 'web', path: '' }] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.queryByText('/')).toBeNull()
-    })
-
-    it('renders port/protocol omitted when port is absent', () => {
-      setupStore({ services: [{ protocol: 'tcp', service_name: 'health', path: '' }] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText('health')).toBeDefined()
-      expect(screen.queryByText(/\/tcp/)).toBeNull()
-    })
-
-    it('renders service name as link when ip and port are set', () => {
-      setupStore({ ip: '192.168.1.10', services: [{ port: 8080, protocol: 'tcp', service_name: 'nginx', path: '' }] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      const link = screen.getByRole('link', { name: 'nginx' })
-      expect(link.getAttribute('href')).toContain('192.168.1.10')
-      expect(link.getAttribute('target')).toBe('_blank')
-    })
-
-    it('renders service name as plain text when no url can be built', () => {
-      setupStore({ ip: undefined, services: [{ protocol: 'tcp', service_name: 'health', path: '' }] })
-      render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText('health').tagName).not.toBe('A')
-    })
-  })
 })

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

@@ -2,17 +2,12 @@ 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 { useAuthStore } from '@/stores/authStore'
 import type { Node } from '@xyflow/react'
 import type { NodeData } from '@/types'
 
 // ── Mocks ────────────────────────────────────────────────────────────────────
 
 vi.mock('@/stores/canvasStore')
-vi.mock('@/stores/authStore')
-
-const mockBulkApprove = vi.fn()
-const mockBulkHide = vi.fn()
 
 vi.mock('@/api/client', () => ({
   scanApi: {
@@ -21,12 +16,6 @@ vi.mock('@/api/client', () => ({
     hidden: vi.fn().mockResolvedValue({ data: [] }),
     runs: vi.fn().mockResolvedValue({ data: [] }),
     stop: vi.fn().mockResolvedValue({}),
-    clearPending: vi.fn().mockResolvedValue({}),
-    approve: vi.fn().mockResolvedValue({ data: { approved: true, node_id: 'new-node-1' } }),
-    hide: vi.fn().mockResolvedValue({ data: { hidden: true } }),
-    ignore: vi.fn().mockResolvedValue({ data: { ignored: true } }),
-    bulkApprove: (...args: unknown[]) => mockBulkApprove(...args),
-    bulkHide: (...args: unknown[]) => mockBulkHide(...args),
   },
   settingsApi: {
     get: vi.fn().mockResolvedValue({ data: { interval_seconds: 60 } }),
@@ -62,7 +51,6 @@ const makeNode = (id: string, status: NodeData['status'], type: NodeData['type']
 })
 
 const mockToggleHideIp = vi.fn()
-const mockLogout = vi.fn()
 
 function mockStore(overrides: Partial<ReturnType<typeof useCanvasStore>> = {}) {
   vi.mocked(useCanvasStore).mockReturnValue({
@@ -76,12 +64,6 @@ function mockStore(overrides: Partial<ReturnType<typeof useCanvasStore>> = {}) {
   } as ReturnType<typeof useCanvasStore>)
 }
 
-function mockAuth() {
-  vi.mocked(useAuthStore).mockImplementation((selector: (s: { logout: () => void }) => unknown) =>
-    selector({ logout: mockLogout }) as ReturnType<typeof useAuthStore>
-  )
-}
-
 const defaultProps = {
   onAddNode: vi.fn(),
   onAddGroupRect: vi.fn(),
@@ -95,7 +77,6 @@ const defaultProps = {
 describe('Sidebar', () => {
   beforeEach(() => {
     mockStore()
-    mockAuth()
     vi.clearAllMocks()
   })
 
@@ -267,18 +248,6 @@ describe('Sidebar', () => {
     await waitFor(() => expect(screen.getByText('No scans yet')).toBeInTheDocument())
   })
 
-  // Regression: forceView used to override local state on every render, freezing
-  // the sidebar on whichever view the parent forced (e.g. 'history' after a scan).
-  it('allows switching views after forceView is set by parent', async () => {
-    const { rerender } = render(<Sidebar {...defaultProps} forceView="history" />)
-    await waitFor(() => expect(screen.getByText('No scans yet')).toBeInTheDocument())
-    // Parent keeps forceView as 'history'; user clicks another nav item.
-    rerender(<Sidebar {...defaultProps} forceView="history" />)
-    fireEvent.click(screen.getByText('Pending Devices'))
-    await waitFor(() => expect(screen.getByText('No pending devices')).toBeInTheDocument())
-    expect(screen.queryByText('No scans yet')).not.toBeInTheDocument()
-  })
-
   it('toggles Settings panel on Settings click', async () => {
     render(<Sidebar {...defaultProps} />)
     fireEvent.click(screen.getByText('Settings'))
@@ -289,115 +258,4 @@ describe('Sidebar', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
     expect(screen.queryByText('Status check interval (s)')).not.toBeInTheDocument()
   })
-
-  // ── Logout ─────────────────────────────────────────────────────────────────
-
-  it('shows Logout button in normal mode', () => {
-    render(<Sidebar {...defaultProps} />)
-    expect(screen.getByText('Logout')).toBeInTheDocument()
-  })
-
-  it('calls logout when Logout is clicked', () => {
-    render(<Sidebar {...defaultProps} />)
-    fireEvent.click(screen.getByText('Logout'))
-    expect(mockLogout).toHaveBeenCalledOnce()
-  })
-})
-
-// ── PendingDevicesPanel — bulk select ─────────────────────────────────────────
-
-const DEVICE_A = {
-  id: 'dev-a',
-  ip: '192.168.1.10',
-  hostname: 'host-a',
-  mac: null,
-  os: null,
-  services: [],
-  suggested_type: 'generic',
-  status: 'pending',
-  discovery_source: 'arp',
-}
-
-const DEVICE_B = {
-  id: 'dev-b',
-  ip: '192.168.1.11',
-  hostname: 'host-b',
-  mac: null,
-  os: null,
-  services: [],
-  suggested_type: 'generic',
-  status: 'pending',
-  discovery_source: 'arp',
-}
-
-describe('PendingDevicesPanel — bulk select', () => {
-  beforeEach(() => {
-    mockStore()
-    mockAuth()
-    vi.clearAllMocks()
-    mockBulkApprove.mockResolvedValue({
-      data: { approved: 2, node_ids: ['n1', 'n2'], device_ids: ['dev-a', 'dev-b'], skipped: 0 },
-    })
-    mockBulkHide.mockResolvedValue({ data: { hidden: 2, skipped: 0 } })
-  })
-
-  async function renderWithDevices() {
-    const { scanApi } = await import('@/api/client')
-    vi.mocked(scanApi.pending).mockResolvedValue({ data: [DEVICE_A, DEVICE_B] } as never)
-    render(<Sidebar {...defaultProps} forceView="pending" />)
-    await waitFor(() => expect(screen.getByText('host-a')).toBeInTheDocument())
-  }
-
-  it('renders checkboxes for each device', async () => {
-    await renderWithDevices()
-    const checkboxes = screen.getAllByRole('checkbox')
-    // select-all + 2 device checkboxes
-    expect(checkboxes.length).toBe(3)
-  })
-
-  it('shows bulk action bar when a device is checked', async () => {
-    await renderWithDevices()
-    const [, firstDeviceCheckbox] = screen.getAllByRole('checkbox')
-    fireEvent.click(firstDeviceCheckbox)
-    await waitFor(() => expect(screen.getByText(/Approve \(1\)/)).toBeInTheDocument())
-    expect(screen.getByText(/Hide \(1\)/)).toBeInTheDocument()
-  })
-
-  it('hides bulk action bar when no device is checked', async () => {
-    await renderWithDevices()
-    expect(screen.queryByText(/Approve \(/)).not.toBeInTheDocument()
-  })
-
-  it('select-all checks all devices', async () => {
-    await renderWithDevices()
-    const [selectAll] = screen.getAllByRole('checkbox')
-    fireEvent.click(selectAll)
-    await waitFor(() => expect(screen.getByText(/Approve \(2\)/)).toBeInTheDocument())
-  })
-
-  it('select-all unchecks all when all are selected', async () => {
-    await renderWithDevices()
-    const [selectAll] = screen.getAllByRole('checkbox')
-    fireEvent.click(selectAll) // select all
-    fireEvent.click(selectAll) // deselect all
-    await waitFor(() => expect(screen.queryByText(/Approve \(/)).not.toBeInTheDocument())
-  })
-
-  it('calls bulkApprove with checked ids and removes devices from list', async () => {
-    await renderWithDevices()
-    const [selectAll] = screen.getAllByRole('checkbox')
-    fireEvent.click(selectAll)
-    fireEvent.click(screen.getByText(/Approve \(2\)/))
-    await waitFor(() => expect(mockBulkApprove).toHaveBeenCalledWith(['dev-a', 'dev-b']))
-    await waitFor(() => expect(screen.queryByText('host-a')).not.toBeInTheDocument())
-  })
-
-  it('calls bulkHide with checked ids and removes devices from list', async () => {
-    await renderWithDevices()
-    const [selectAll] = screen.getAllByRole('checkbox')
-    fireEvent.click(selectAll)
-    fireEvent.click(screen.getByText(/Hide \(2\)/))
-    await waitFor(() => expect(mockBulkHide).toHaveBeenCalledWith(['dev-a', 'dev-b']))
-    await waitFor(() => expect(screen.queryByText('host-b')).not.toBeInTheDocument())
-  })
 })

frontend/src/components/ui/dialog.tsx

@@ -1,4 +1,3 @@
-import modalStyles from '../modals/modal-interactive.module.css'
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 
@@ -64,12 +63,13 @@ function DialogContent({
             render={
               <Button
                 variant="ghost"
-                className={"absolute top-2 right-2 " + modalStyles['modal-close-pointer']}
+                className="absolute top-2 right-2"
                 size="icon-sm"
               />
             }
           >
-            <XIcon />
+            <XIcon
+            />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}

frontend/src/components/ui/tooltip.tsx

@@ -1,30 +1,64 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+"use client"
 
-const TooltipProvider = TooltipPrimitive.Provider
-const Tooltip = TooltipPrimitive.Root
-const TooltipTrigger = TooltipPrimitive.Trigger
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
 
 function TooltipContent({
   className,
+  side = "top",
   sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
   ...props
-}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={[
-          'z-50 overflow-hidden rounded-md border border-[#30363d] bg-[#161b22] px-2 py-1 text-xs text-[#e6edf3] shadow-md',
-          'animate-in fade-in-0 zoom-in-95',
-          className,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        {...props}
+        className="isolate z-50"
       >
-        {children}
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
   )
 }

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

@@ -64,17 +64,6 @@ describe('canvasStore', () => {
     expect(nested?.extent).toBe('parent')
   })
 
-  it('docker_container nests under docker_host with container_mode on', () => {
-    const host = { ...makeNode('dh1', { type: 'docker_host', container_mode: true }), position: { x: 100, y: 100 } }
-    const container = { ...makeNode('dc1', { type: 'docker_container' }), position: { x: 160, y: 180 } }
-    useCanvasStore.getState().addNode(host)
-    useCanvasStore.getState().addNode(container)
-    useCanvasStore.getState().updateNode('dc1', { parent_id: 'dh1' })
-    const node = useCanvasStore.getState().nodes.find((n) => n.id === 'dc1')
-    expect(node?.parentId).toBe('dh1')
-    expect(node?.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' })
@@ -248,7 +237,7 @@ describe('canvasStore', () => {
     expect(nodes.find((n) => n.id === 'child')).toBeUndefined()
   })
 
-  it('addNode with parent_id sets parentId and extent when parent is in container mode', () => {
+  it('addNode with parent_id sets parentId and extent', () => {
     useCanvasStore.getState().addNode(makeNode('parent', { container_mode: true }))
     useCanvasStore.getState().addNode(makeNode('child', { parent_id: 'parent' }))
     const child = useCanvasStore.getState().nodes.find((n) => n.id === 'child')
@@ -448,26 +437,6 @@ describe('canvasStore', () => {
     expect(hasUnsavedChanges).toBe(true)
   })
 
-  it('setProxmoxContainerMode ON sets width/height for docker_host (not just proxmox)', () => {
-    const host: Node<NodeData> = { id: 'dh', type: 'docker_host', position: { x: 0, y: 0 }, data: { label: 'dh', type: 'docker_host', status: 'unknown', services: [], container_mode: false } }
-    useCanvasStore.setState({ nodes: [host] })
-    useCanvasStore.getState().setProxmoxContainerMode('dh', true)
-    const updated = useCanvasStore.getState().nodes.find((n) => n.id === 'dh')
-    expect(updated?.data.container_mode).toBe(true)
-    expect(updated?.width).toBe(300)
-    expect(updated?.height).toBe(200)
-  })
-
-  it('setProxmoxContainerMode OFF clears width/height for docker_host', () => {
-    const host: Node<NodeData> = { id: 'dh', type: 'docker_host', position: { x: 0, y: 0 }, width: 300, height: 200, data: { label: 'dh', type: 'docker_host', status: 'unknown', services: [], container_mode: true } }
-    useCanvasStore.setState({ nodes: [host] })
-    useCanvasStore.getState().setProxmoxContainerMode('dh', false)
-    const updated = useCanvasStore.getState().nodes.find((n) => n.id === 'dh')
-    expect(updated?.data.container_mode).toBe(false)
-    expect(updated?.width).toBeUndefined()
-    expect(updated?.height).toBeUndefined()
-  })
-
   it('setProxmoxContainerMode ON nests children inside proxmox', () => {
     const proxmox: Node<NodeData> = { id: 'px', type: 'proxmox', position: { x: 0, y: 0 }, data: { label: 'px', type: 'proxmox', status: 'unknown', services: [], container_mode: false } }
     const child = makeNode('vm1', { parent_id: 'px', type: 'vm' })
@@ -721,117 +690,4 @@ describe('canvasStore', () => {
     const updated = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
     expect(updated?.sourceHandle).toBe('bottom')
   })
-
-  // Regression: handle cap raised from 4 to 48 — remap must scale.
-  it('remaps high-count handles when shrinking from 12 to 2', () => {
-    const node = makeNode('n1', { bottom_handles: 12 })
-    const edges = [
-      { ...makeEdge('e2', 'n1', 'n2'), sourceHandle: 'bottom-2' },
-      { ...makeEdge('e3', 'n1', 'n2'), sourceHandle: 'bottom-5' },
-      { ...makeEdge('e12', 'n1', 'n2'), sourceHandle: 'bottom-12' },
-    ]
-    useCanvasStore.setState({ nodes: [node, makeNode('n2')], edges })
-
-    useCanvasStore.getState().updateNode('n1', { bottom_handles: 2 })
-
-    const after = useCanvasStore.getState().edges
-    expect(after.find((e) => e.id === 'e2')?.sourceHandle).toBe('bottom-2')
-    expect(after.find((e) => e.id === 'e3')?.sourceHandle).toBe('bottom')
-    expect(after.find((e) => e.id === 'e12')?.sourceHandle).toBe('bottom')
-  })
-})
-
-describe('canvasStore — custom style apply', () => {
-  beforeEach(() => {
-    useCanvasStore.setState({
-      nodes: [],
-      edges: [],
-      hasUnsavedChanges: false,
-      selectedNodeId: null,
-      selectedNodeIds: [],
-      editingGroupRectId: null,
-      past: [],
-      future: [],
-      clipboard: [],
-    })
-  })
-
-  const serverStyle = {
-    borderColor: '#ff0000',
-    borderOpacity: 1,
-    bgColor: '#111111',
-    bgOpacity: 1,
-    iconColor: '#ff0000',
-    iconOpacity: 1,
-    width: 220,
-    height: 90,
-  }
-
-  it('applyTypeNodeStyle updates matching nodes custom_colors', () => {
-    useCanvasStore.setState({
-      nodes: [makeNode('n1', { type: 'server' }), makeNode('n2', { type: 'proxmox' })],
-      edges: [],
-    })
-    useCanvasStore.getState().applyTypeNodeStyle('server', serverStyle)
-
-    const n1 = useCanvasStore.getState().nodes.find((n) => n.id === 'n1')!
-    const n2 = useCanvasStore.getState().nodes.find((n) => n.id === 'n2')!
-    expect(n1.data.custom_colors?.border).toBe('#ff0000')
-    expect(n1.width).toBe(220)
-    expect(n1.height).toBe(90)
-    expect(n2.data.custom_colors?.border).toBeUndefined()
-  })
-
-  it('applyTypeNodeStyle with opacity < 1 produces rgba', () => {
-    useCanvasStore.setState({ nodes: [makeNode('n1', { type: 'server' })], edges: [] })
-    useCanvasStore.getState().applyTypeNodeStyle('server', { ...serverStyle, borderOpacity: 0.5 })
-
-    const n1 = useCanvasStore.getState().nodes.find((n) => n.id === 'n1')!
-    expect(n1.data.custom_colors?.border).toMatch(/^rgba\(/)
-  })
-
-  it('applyTypeNodeStyle marks canvas unsaved', () => {
-    useCanvasStore.setState({ nodes: [makeNode('n1')], edges: [] })
-    useCanvasStore.getState().applyTypeNodeStyle('server', serverStyle)
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
-  })
-
-  it('applyTypeEdgeStyle updates matching edges', () => {
-    const e1: Edge<EdgeData> = { id: 'e1', source: 'n1', target: 'n2', type: 'ethernet', data: { type: 'ethernet' } }
-    const e2: Edge<EdgeData> = { id: 'e2', source: 'n1', target: 'n2', type: 'wifi', data: { type: 'wifi' } }
-    useCanvasStore.setState({ nodes: [], edges: [e1, e2] })
-
-    useCanvasStore.getState().applyTypeEdgeStyle('ethernet', { color: '#00ff00', opacity: 1, pathStyle: 'smooth', animated: 'flow' })
-
-    const updated1 = useCanvasStore.getState().edges.find((e) => e.id === 'e1')!
-    const updated2 = useCanvasStore.getState().edges.find((e) => e.id === 'e2')!
-    expect(updated1.data?.custom_color).toBe('#00ff00')
-    expect(updated1.data?.path_style).toBe('smooth')
-    expect(updated1.data?.animated).toBe('flow')
-    expect(updated2.data?.custom_color).toBeUndefined()
-  })
-
-  it('applyAllCustomStyles applies all defined types', () => {
-    const proxmoxNode = makeNode('np', { type: 'proxmox' })
-    const serverNode = makeNode('ns', { type: 'server' })
-    const e1: Edge<EdgeData> = { id: 'e1', source: 'np', target: 'ns', type: 'ethernet', data: { type: 'ethernet' } }
-    useCanvasStore.setState({ nodes: [proxmoxNode, serverNode], edges: [e1] })
-
-    useCanvasStore.getState().applyAllCustomStyles({
-      nodes: {
-        proxmox: { borderColor: '#ff6e00', borderOpacity: 1, bgColor: '#111', bgOpacity: 1, iconColor: '#ff6e00', iconOpacity: 1, width: 0, height: 0 },
-      },
-      edges: {
-        ethernet: { color: '#aabbcc', opacity: 1, pathStyle: 'bezier', animated: 'none' },
-      },
-    })
-
-    const np = useCanvasStore.getState().nodes.find((n) => n.id === 'np')!
-    const ns = useCanvasStore.getState().nodes.find((n) => n.id === 'ns')!
-    const e = useCanvasStore.getState().edges.find((e) => e.id === 'e1')!
-    expect(np.data.custom_colors?.border).toBe('#ff6e00')
-    expect(ns.data.custom_colors?.border).toBeUndefined()
-    expect(e.data?.custom_color).toBe('#aabbcc')
-    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
-  })
 })

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

@@ -1,10 +1,9 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { useThemeStore } from '@/stores/themeStore'
-import type { CustomStyleDef } from '@/types'
 
 describe('themeStore', () => {
   beforeEach(() => {
-    useThemeStore.setState({ activeTheme: 'default', customStyle: { nodes: {}, edges: {} } })
+    useThemeStore.setState({ activeTheme: 'default' })
   })
 
   it('starts with default theme', () => {
@@ -16,8 +15,8 @@ describe('themeStore', () => {
     expect(useThemeStore.getState().activeTheme).toBe('matrix')
   })
 
-  it('setTheme can switch between all presets including custom', () => {
-    const themes = ['default', 'dark', 'light', 'neon', 'matrix', 'custom'] as const
+  it('setTheme can switch between all presets', () => {
+    const themes = ['default', 'dark', 'light', 'neon', 'matrix'] as const
     for (const id of themes) {
       useThemeStore.getState().setTheme(id)
       expect(useThemeStore.getState().activeTheme).toBe(id)
@@ -29,26 +28,4 @@ describe('themeStore', () => {
     useThemeStore.getState().setTheme('default')
     expect(useThemeStore.getState().activeTheme).toBe('default')
   })
-
-  it('starts with empty customStyle', () => {
-    const { customStyle } = useThemeStore.getState()
-    expect(customStyle.nodes).toEqual({})
-    expect(customStyle.edges).toEqual({})
-  })
-
-  it('setCustomStyle replaces the entire definition', () => {
-    const def: CustomStyleDef = {
-      nodes: { server: { borderColor: '#ff0000', borderOpacity: 1, bgColor: '#000000', bgOpacity: 1, iconColor: '#ff0000', iconOpacity: 1, width: 200, height: 80 } },
-      edges: { ethernet: { color: '#00ff00', opacity: 0.8, pathStyle: 'bezier', animated: 'none' } },
-    }
-    useThemeStore.getState().setCustomStyle(def)
-    expect(useThemeStore.getState().customStyle.nodes.server?.borderColor).toBe('#ff0000')
-    expect(useThemeStore.getState().customStyle.edges.ethernet?.color).toBe('#00ff00')
-  })
-
-  it('setCustomStyle with empty def clears styles', () => {
-    useThemeStore.getState().setCustomStyle({ nodes: { server: { borderColor: '#aaa', borderOpacity: 1, bgColor: '#000', bgOpacity: 1, iconColor: '#aaa', iconOpacity: 1, width: 0, height: 0 } }, edges: {} })
-    useThemeStore.getState().setCustomStyle({ nodes: {}, edges: {} })
-    expect(useThemeStore.getState().customStyle.nodes).toEqual({})
-  })
 })

frontend/src/stores/canvasStore.ts

@@ -9,10 +9,9 @@ import {
   applyEdgeChanges,
   addEdge,
 } from '@xyflow/react'
-import type { NodeData, EdgeData, NodeType, EdgeType, NodeTypeStyle, EdgeTypeStyle, CustomStyleDef } from '@/types'
+import type { NodeData, EdgeData } from '@/types'
 import { generateUUID } from '@/utils/uuid'
 import { normalizeHandle, removedBottomHandleIds } from '@/utils/handleUtils'
-import { applyOpacity } from '@/utils/colorUtils'
 
 type HistoryEntry = { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
 
@@ -59,9 +58,6 @@ interface CanvasState {
   notifyScanDeviceFound: () => void
   hideIp: boolean
   toggleHideIp: () => void
-  applyTypeNodeStyle: (nodeType: NodeType, style: NodeTypeStyle) => void
-  applyTypeEdgeStyle: (edgeType: EdgeType, style: EdgeTypeStyle) => void
-  applyAllCustomStyles: (def: CustomStyleDef) => void
 }
 
 export const useCanvasStore = create<CanvasState>((set) => ({
@@ -301,6 +297,7 @@ export const useCanvasStore = create<CanvasState>((set) => ({
       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: undefined, height: undefined }
@@ -472,82 +469,4 @@ export const useCanvasStore = create<CanvasState>((set) => ({
   },
 
   clearFitViewPending: () => set({ fitViewPending: false }),
-
-  applyTypeNodeStyle: (nodeType, style) =>
-    set((state) => ({
-      nodes: state.nodes.map((n) => {
-        if (n.data.type !== nodeType) return n
-        return {
-          ...n,
-          width: style.width > 0 ? style.width : n.width,
-          height: style.height > 0 ? style.height : n.height,
-          data: {
-            ...n.data,
-            custom_colors: {
-              ...n.data.custom_colors,
-              border: applyOpacity(style.borderColor, style.borderOpacity),
-              background: applyOpacity(style.bgColor, style.bgOpacity),
-              icon: applyOpacity(style.iconColor, style.iconOpacity),
-            },
-          },
-        }
-      }),
-      hasUnsavedChanges: true,
-    })),
-
-  applyTypeEdgeStyle: (edgeType, style) =>
-    set((state) => ({
-      edges: state.edges.map((e) => {
-        if ((e.data?.type ?? 'ethernet') !== edgeType) return e
-        return {
-          ...e,
-          data: {
-            ...e.data,
-            type: edgeType,
-            custom_color: applyOpacity(style.color, style.opacity),
-            path_style: style.pathStyle,
-            animated: style.animated,
-          } as EdgeData,
-        }
-      }),
-      hasUnsavedChanges: true,
-    })),
-
-  applyAllCustomStyles: (def) =>
-    set((state) => {
-      const nodes = state.nodes.map((n) => {
-        const style = def.nodes[n.data.type]
-        if (!style) return n
-        return {
-          ...n,
-          width: style.width > 0 ? style.width : n.width,
-          height: style.height > 0 ? style.height : n.height,
-          data: {
-            ...n.data,
-            custom_colors: {
-              ...n.data.custom_colors,
-              border: applyOpacity(style.borderColor, style.borderOpacity),
-              background: applyOpacity(style.bgColor, style.bgOpacity),
-              icon: applyOpacity(style.iconColor, style.iconOpacity),
-            },
-          },
-        }
-      })
-      const edges = state.edges.map((e) => {
-        const edgeType = (e.data?.type ?? 'ethernet') as EdgeType
-        const style = def.edges[edgeType]
-        if (!style) return e
-        return {
-          ...e,
-          data: {
-            ...e.data,
-            type: edgeType,
-            custom_color: applyOpacity(style.color, style.opacity),
-            path_style: style.pathStyle,
-            animated: style.animated,
-          } as EdgeData,
-        }
-      })
-      return { nodes, edges, hasUnsavedChanges: true }
-    }),
 }))

frontend/src/stores/themeStore.ts

@@ -1,17 +1,12 @@
 import { create } from 'zustand'
 import type { ThemeId } from '@/utils/themes'
-import type { CustomStyleDef } from '@/types'
 
 interface ThemeState {
   activeTheme: ThemeId
   setTheme: (id: ThemeId) => void
-  customStyle: CustomStyleDef
-  setCustomStyle: (def: CustomStyleDef) => void
 }
 
 export const useThemeStore = create<ThemeState>((set) => ({
   activeTheme: 'default',
   setTheme: (id) => set({ activeTheme: id }),
-  customStyle: { nodes: {}, edges: {} },
-  setCustomStyle: (def) => set({ customStyle: def }),
 }))

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

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

frontend/src/types/index.ts

@@ -1,7 +1,6 @@
 export type NodeType =
   | 'isp'
   | 'router'
-  | 'firewall'
   | 'switch'
   | 'server'
   | 'proxmox'
@@ -14,8 +13,8 @@ export type NodeType =
   | 'printer'
   | 'computer'
   | 'cpl'
-  | 'docker_host'
   | 'docker_container'
+  | 'docker_host'
   | 'generic'
   | 'groupRect'
   | 'group'
@@ -38,10 +37,9 @@ export type NodeStatus = 'online' | 'offline' | 'pending' | 'unknown'
 export type CheckMethod = 'ping' | 'http' | 'https' | 'tcp' | 'ssh' | 'prometheus' | 'health' | 'none'
 
 export interface ServiceInfo {
-  port?: number
+  port: number
   protocol: 'tcp' | 'udp'
   service_name: string
-  path?: string
   icon?: string
   category?: string
 }
@@ -93,7 +91,6 @@ export interface NodeData extends Record<string, unknown> {
     height?: number
   }
   custom_icon?: string
-  /** Number of bottom connection points, 1..48. Default 1 (centered). */
   bottom_handles?: number
 }
 
@@ -118,7 +115,6 @@ export interface EdgeData extends Record<string, unknown> {
 export const NODE_TYPE_LABELS: Record<NodeType, string> = {
   isp: 'ISP / Modem',
   router: 'Router',
-  firewall: 'Firewall',
   switch: 'Switch',
   server: 'Server',
   proxmox: 'Proxmox VE',
@@ -131,8 +127,8 @@ export const NODE_TYPE_LABELS: Record<NodeType, string> = {
   printer: 'Printer',
   computer: 'Computer',
   cpl: 'CPL / Powerline',
-  docker_host: 'Docker Host',
   docker_container: 'Docker Container',
+  docker_host: 'Docker Host',
   generic: 'Generic Device',
   groupRect: 'Group Rectangle',
   group: 'Node Group',
@@ -153,26 +149,3 @@ export const EDGE_TYPE_LABELS: Record<EdgeType, string> = {
   virtual: 'Virtual',
   cluster: 'Cluster',
 }
-
-export interface NodeTypeStyle {
-  borderColor: string
-  borderOpacity: number
-  bgColor: string
-  bgOpacity: number
-  iconColor: string
-  iconOpacity: number
-  width: number
-  height: number
-}
-
-export interface EdgeTypeStyle {
-  color: string
-  opacity: number
-  pathStyle: EdgePathStyle
-  animated: 'none' | 'snake' | 'flow' | 'basic'
-}
-
-export interface CustomStyleDef {
-  nodes: Partial<Record<NodeType, NodeTypeStyle>>
-  edges: Partial<Record<EdgeType, EdgeTypeStyle>>
-}

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

@@ -1,97 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { hexToRgba, rgbaToHex8 } from '../colorUtils'
-
-describe('hexToRgba', () => {
-  it('splits 8-digit hex into hex6 and alpha', () => {
-    const { hex6, alpha } = hexToRgba('#00d4ff0d')
-    expect(hex6).toBe('#00d4ff')
-    expect(alpha).toBe(5)
-  })
-
-  it('handles fully opaque 8-digit hex (ff)', () => {
-    const { hex6, alpha } = hexToRgba('#00d4ffff')
-    expect(hex6).toBe('#00d4ff')
-    expect(alpha).toBe(100)
-  })
-
-  it('handles fully transparent 8-digit hex (00)', () => {
-    const { hex6, alpha } = hexToRgba('#00d4ff00')
-    expect(hex6).toBe('#00d4ff')
-    expect(alpha).toBe(0)
-  })
-
-  it('defaults alpha to 100 for 6-digit hex', () => {
-    const { hex6, alpha } = hexToRgba('#00d4ff')
-    expect(hex6).toBe('#00d4ff')
-    expect(alpha).toBe(100)
-  })
-
-  it('handles 6-digit hex without leading #', () => {
-    const { hex6, alpha } = hexToRgba('ff6e00')
-    expect(hex6).toBe('#ff6e00')
-    expect(alpha).toBe(100)
-  })
-
-  it('handles 8-digit hex without leading #', () => {
-    const { hex6, alpha } = hexToRgba('ff6e0080')
-    expect(hex6).toBe('#ff6e00')
-    expect(alpha).toBe(50)
-  })
-
-  it('returns fallback for invalid input', () => {
-    const { hex6, alpha } = hexToRgba('invalid')
-    expect(hex6).toBe('#000000')
-    expect(alpha).toBe(100)
-  })
-
-  it('is case-insensitive', () => {
-    const { hex6 } = hexToRgba('#00D4FF0D')
-    expect(hex6).toBe('#00D4FF')
-  })
-})
-
-describe('rgbaToHex8', () => {
-  it('combines hex6 and alpha into 8-digit hex', () => {
-    expect(rgbaToHex8('#00d4ff', 5)).toBe('#00d4ff0d')
-  })
-
-  it('produces ff for alpha 100', () => {
-    expect(rgbaToHex8('#00d4ff', 100)).toBe('#00d4ffff')
-  })
-
-  it('produces 00 for alpha 0', () => {
-    expect(rgbaToHex8('#00d4ff', 0)).toBe('#00d4ff00')
-  })
-
-  it('produces 80 for alpha 50', () => {
-    expect(rgbaToHex8('#ff6e00', 50)).toBe('#ff6e0080')
-  })
-
-  it('clamps alpha below 0 to 0', () => {
-    expect(rgbaToHex8('#ffffff', -10)).toBe('#ffffff00')
-  })
-
-  it('clamps alpha above 100 to 100', () => {
-    expect(rgbaToHex8('#ffffff', 150)).toBe('#ffffffff')
-  })
-
-  it('pads single-digit alpha hex with leading zero', () => {
-    const result = rgbaToHex8('#000000', 1)
-    const alphaPart = result.slice(7)
-    expect(alphaPart.length).toBe(2)
-  })
-})
-
-describe('round-trip', () => {
-  it('hexToRgba → rgbaToHex8 round-trips correctly', () => {
-    const original = '#00d4ff0d'
-    const { hex6, alpha } = hexToRgba(original)
-    expect(rgbaToHex8(hex6, alpha)).toBe(original)
-  })
-
-  it('round-trips fully opaque color', () => {
-    const original = '#a855f7ff'
-    const { hex6, alpha } = hexToRgba(original)
-    expect(rgbaToHex8(hex6, alpha)).toBe(original)
-  })
-})

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

@@ -1,71 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { exportToPng, EXPORT_QUALITY_OPTIONS } from '../export'
-
-const mockToPng = vi.fn()
-vi.mock('html-to-image', () => ({ toPng: (...args: unknown[]) => mockToPng(...args) }))
-
-describe('exportToPng', () => {
-  let el: HTMLElement
-  let clickSpy: ReturnType<typeof vi.fn>
-  let appendSpy: ReturnType<typeof vi.spyOn>
-  let createSpy: ReturnType<typeof vi.spyOn>
-
-  beforeEach(() => {
-    el = document.createElement('div')
-    clickSpy = vi.fn()
-    createSpy = vi.spyOn(document, 'createElement').mockReturnValue(
-      Object.assign(document.createElement('a'), { click: clickSpy }) as HTMLAnchorElement
-    )
-    appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n)
-    mockToPng.mockResolvedValue('data:image/png;base64,abc')
-  })
-
-  afterEach(() => {
-    createSpy.mockRestore()
-    appendSpy.mockRestore()
-  })
-
-  it('calls toPng with pixelRatio 1 for standard quality', async () => {
-    await exportToPng(el, 'standard')
-    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 1 }))
-  })
-
-  it('calls toPng with pixelRatio 2 for high quality', async () => {
-    await exportToPng(el, 'high')
-    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 }))
-  })
-
-  it('calls toPng with pixelRatio 4 for ultra quality', async () => {
-    await exportToPng(el, 'ultra')
-    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 4 }))
-  })
-
-  it('defaults to high quality when no quality arg given', async () => {
-    await exportToPng(el)
-    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 }))
-  })
-
-  it('triggers a download with the correct filename', async () => {
-    await exportToPng(el, 'high')
-    expect(clickSpy).toHaveBeenCalled()
-  })
-
-  it('passes dark background color', async () => {
-    await exportToPng(el, 'standard')
-    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' }))
-  })
-})
-
-describe('EXPORT_QUALITY_OPTIONS', () => {
-  it('has exactly three options', () => {
-    expect(EXPORT_QUALITY_OPTIONS).toHaveLength(3)
-  })
-
-  it('options are standard, high, ultra in order', () => {
-    expect(EXPORT_QUALITY_OPTIONS.map((o) => o.value)).toEqual(['standard', 'high', 'ultra'])
-  })
-
-  it('pixel ratios are 1, 2, 4', () => {
-    expect(EXPORT_QUALITY_OPTIONS.map((o) => o.pixelRatio)).toEqual([1, 2, 4])
-  })
-})

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

@@ -1,105 +1,51 @@
 import { describe, it, expect } from 'vitest'
 import {
-  MIN_BOTTOM_HANDLES,
-  MAX_BOTTOM_HANDLES,
-  bottomHandleId,
-  bottomHandlePositions,
-  clampBottomHandles,
+  BOTTOM_HANDLE_IDS,
+  BOTTOM_HANDLE_POSITIONS,
   normalizeHandle,
   removedBottomHandleIds,
 } from '../handleUtils'
 
-describe('bottomHandleId', () => {
+describe('BOTTOM_HANDLE_IDS', () => {
   it('first id is always "bottom" for backward compatibility', () => {
-    expect(bottomHandleId(0)).toBe('bottom')
+    expect(BOTTOM_HANDLE_IDS[0]).toBe('bottom')
   })
 
-  it('subsequent ids follow bottom-N pattern (1-indexed shift)', () => {
-    expect(bottomHandleId(1)).toBe('bottom-2')
-    expect(bottomHandleId(2)).toBe('bottom-3')
-    expect(bottomHandleId(3)).toBe('bottom-4')
-    expect(bottomHandleId(11)).toBe('bottom-12')
-    expect(bottomHandleId(47)).toBe('bottom-48')
+  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('clampBottomHandles', () => {
-  it('clamps below MIN to MIN', () => {
-    expect(clampBottomHandles(0)).toBe(MIN_BOTTOM_HANDLES)
-    expect(clampBottomHandles(-5)).toBe(MIN_BOTTOM_HANDLES)
-  })
-
-  it('clamps above MAX to MAX', () => {
-    expect(clampBottomHandles(49)).toBe(MAX_BOTTOM_HANDLES)
-    expect(clampBottomHandles(9999)).toBe(MAX_BOTTOM_HANDLES)
-  })
-
-  it('returns MIN for non-finite or non-number', () => {
-    expect(clampBottomHandles(NaN)).toBe(MIN_BOTTOM_HANDLES)
-    expect(clampBottomHandles(Infinity)).toBe(MIN_BOTTOM_HANDLES)
-    expect(clampBottomHandles('4' as unknown)).toBe(MIN_BOTTOM_HANDLES)
-    expect(clampBottomHandles(undefined)).toBe(MIN_BOTTOM_HANDLES)
-  })
-
-  it('floors fractional values', () => {
-    expect(clampBottomHandles(3.9)).toBe(3)
-  })
-
-  it('passes valid integers through', () => {
-    expect(clampBottomHandles(1)).toBe(1)
-    expect(clampBottomHandles(24)).toBe(24)
-    expect(clampBottomHandles(48)).toBe(48)
-  })
-})
-
-describe('bottomHandlePositions — backward-compat lock for 1..4', () => {
-  // These exact arrays are the pre-multi-handle hand-tuned positions.
-  // Existing user canvases depend on them — do NOT change.
+describe('BOTTOM_HANDLE_POSITIONS', () => {
   it('1 handle is centered at 50%', () => {
-    expect(bottomHandlePositions(1)).toEqual([50])
+    expect(BOTTOM_HANDLE_POSITIONS[1]).toEqual([50])
   })
 
-  it('2 handles use exact prior positions', () => {
-    expect(bottomHandlePositions(2)).toEqual([25, 75])
+  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 use exact prior positions', () => {
-    expect(bottomHandlePositions(3)).toEqual([20, 50, 80])
+  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 use exact prior positions', () => {
-    expect(bottomHandlePositions(4)).toEqual([15, 38, 62, 85])
-  })
-})
-
-describe('bottomHandlePositions — uniform spacing for ≥5', () => {
-  it('returns count entries', () => {
-    expect(bottomHandlePositions(5)).toHaveLength(5)
-    expect(bottomHandlePositions(12)).toHaveLength(12)
-    expect(bottomHandlePositions(48)).toHaveLength(48)
-  })
-
-  it('all positions strictly between 0 and 100', () => {
-    const pos = bottomHandlePositions(48)
+  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)
     })
-  })
-
-  it('positions are strictly increasing and uniform', () => {
-    const pos = bottomHandlePositions(12)
+    // Positions should be strictly increasing
     for (let i = 1; i < pos.length; i++) {
       expect(pos[i]).toBeGreaterThan(pos[i - 1])
     }
-    const step = 100 / 13
-    expect(pos[0]).toBeCloseTo(step, 5)
-    expect(pos[11]).toBeCloseTo(step * 12, 5)
-  })
-
-  it('clamps out-of-range counts before computing', () => {
-    expect(bottomHandlePositions(0)).toEqual([50])
-    expect(bottomHandlePositions(99)).toHaveLength(MAX_BOTTOM_HANDLES)
   })
 })
 
@@ -117,10 +63,16 @@ describe('normalizeHandle', () => {
     expect(normalizeHandle('bottom-t')).toBe('bottom')
   })
 
-  it('maps bottom-N-t → bottom-N for any N', () => {
+  it('maps bottom-2-t → bottom-2', () => {
     expect(normalizeHandle('bottom-2-t')).toBe('bottom-2')
-    expect(normalizeHandle('bottom-12-t')).toBe('bottom-12')
-    expect(normalizeHandle('bottom-48-t')).toBe('bottom-48')
+  })
+
+  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', () => {
@@ -138,35 +90,22 @@ describe('removedBottomHandleIds', () => {
   })
 
   it('4 → 1 removes bottom-2, bottom-3, bottom-4', () => {
-    expect(removedBottomHandleIds(4, 1)).toEqual(new Set(['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', () => {
-    expect(removedBottomHandleIds(4, 2)).toEqual(new Set(['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', () => {
-    expect(removedBottomHandleIds(3, 2)).toEqual(new Set(['bottom-3']))
+    const removed = removedBottomHandleIds(3, 2)
+    expect(removed).toEqual(new Set(['bottom-3']))
   })
 
   it('never removes "bottom" (index 0)', () => {
-    expect(removedBottomHandleIds(4, 1).has('bottom')).toBe(false)
-  })
-
-  // Regression: scaling the cap from 4 → 48 must not break the remap loop.
-  it('scales to high counts (48 → 1 removes 47 ids)', () => {
-    const removed = removedBottomHandleIds(48, 1)
-    expect(removed.size).toBe(47)
-    expect(removed.has('bottom-2')).toBe(true)
-    expect(removed.has('bottom-48')).toBe(true)
+    const removed = removedBottomHandleIds(4, 1)
     expect(removed.has('bottom')).toBe(false)
   })
-
-  it('10 → 2 leaves bottom + bottom-2, removes bottom-3..bottom-10', () => {
-    const removed = removedBottomHandleIds(10, 2)
-    expect(removed.size).toBe(8)
-    expect(removed.has('bottom-2')).toBe(false)
-    expect(removed.has('bottom-3')).toBe(true)
-    expect(removed.has('bottom-10')).toBe(true)
-  })
 })

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

@@ -1,8 +1,7 @@
 import { describe, it, expect } from 'vitest'
-import { maskIp, splitIps, primaryIp } from '../maskIp'
+import { maskIp } from '../maskIp'
 
 describe('maskIp', () => {
-  // IPv4
   it('masks last two octets of a standard IPv4', () => {
     expect(maskIp('192.168.1.115')).toBe('192.168.XX.XX')
   })
@@ -12,61 +11,9 @@ describe('maskIp', () => {
     expect(maskIp('172.16.254.1')).toBe('172.16.XX.XX')
   })
 
-  // IPv6
-  it('masks second group and last group of an IPv6 address', () => {
-    expect(maskIp('2001:db8::1')).toBe('2001:XX::XX')
-  })
-
-  it('masks a full IPv6 address', () => {
-    expect(maskIp('fe80:0000:0000:0000:0202:b3ff:fe1e:8329')).toBe('fe80:XX:0000:0000:0202:b3ff:fe1e:XX')
-  })
-
-  it('masks loopback IPv6', () => {
-    // ::1 splits into ['', '', '1'] — groups[1] and last are masked
-    expect(maskIp('::1')).toBe(':XX:XX')
-  })
-
-  // Comma-separated
-  it('masks all IPs in a comma-separated string', () => {
-    expect(maskIp('192.168.1.1, 2001:db8::1')).toBe('192.168.XX.XX, 2001:XX::XX')
-  })
-
-  it('handles comma-separated without spaces', () => {
-    expect(maskIp('10.0.0.1,10.0.0.2')).toBe('10.0.XX.XX, 10.0.XX.XX')
-  })
-
-  // Edge cases
-  it('passes through non-IP strings unchanged', () => {
+  it('passes through non-IPv4 strings unchanged', () => {
     expect(maskIp('hostname')).toBe('hostname')
+    expect(maskIp('fe80::1')).toBe('fe80::1')
     expect(maskIp('')).toBe('')
   })
 })
-
-describe('splitIps', () => {
-  it('returns array of trimmed IPs', () => {
-    expect(splitIps('192.168.1.1, 2001:db8::1')).toEqual(['192.168.1.1', '2001:db8::1'])
-  })
-
-  it('returns single-element array for single IP', () => {
-    expect(splitIps('10.0.0.1')).toEqual(['10.0.0.1'])
-  })
-
-  it('returns empty array for empty string', () => {
-    expect(splitIps('')).toEqual([])
-    expect(splitIps('   ')).toEqual([])
-  })
-})
-
-describe('primaryIp', () => {
-  it('returns first IP from comma-separated string', () => {
-    expect(primaryIp('192.168.1.1, 2001:db8::1')).toBe('192.168.1.1')
-  })
-
-  it('returns the only IP when single', () => {
-    expect(primaryIp('10.0.0.1')).toBe('10.0.0.1')
-  })
-
-  it('returns empty string for empty input', () => {
-    expect(primaryIp('')).toBe('')
-  })
-})

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

@@ -1,17 +1,12 @@
 import { describe, it, expect } from 'vitest'
-import { CircuitBoard, Cpu, EthernetPort, Gpu, HardDrive, HdmiPort, MemoryStick, Usb } from 'lucide-react'
+import { Cpu, HardDrive, MemoryStick } from 'lucide-react'
 import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '../propertyIcons'
 
 describe('PROPERTY_ICONS', () => {
   it('contains the hardware migration icons', () => {
-    expect(PROPERTY_ICONS['CircuitBoard']).toBe(CircuitBoard)
     expect(PROPERTY_ICONS['Cpu']).toBe(Cpu)
-    expect(PROPERTY_ICONS['EthernetPort']).toBe(EthernetPort)
-    expect(PROPERTY_ICONS['Gpu']).toBe(Gpu)
     expect(PROPERTY_ICONS['HardDrive']).toBe(HardDrive)
-    expect(PROPERTY_ICONS['HdmiPort']).toBe(HdmiPort)
     expect(PROPERTY_ICONS['MemoryStick']).toBe(MemoryStick)
-    expect(PROPERTY_ICONS['Usb']).toBe(Usb)
   })
 
   it('has at least 10 icons', () => {

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

@@ -3,7 +3,7 @@ import { THEMES, THEME_ORDER, type ThemeId } from '../themes'
 import type { NodeType, EdgeType, NodeStatus } from '@/types'
 
 const NODE_TYPES: NodeType[] = [
-  'isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc',
+  'isp', 'router', 'switch', 'server', 'proxmox', 'vm', 'lxc',
   'nas', 'iot', 'ap', 'camera', 'printer', 'computer', 'cpl', 'docker_host', 'docker_container', 'generic', 'groupRect',
 ]
 const EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster']

frontend/src/utils/canvasSerializer.ts

@@ -1,6 +1,6 @@
 import type { Node, Edge } from '@xyflow/react'
 import type { NodeData, EdgeData, Waypoint } from '@/types'
-import { normalizeHandle, clampBottomHandles } from '@/utils/handleUtils'
+import { normalizeHandle } from '@/utils/handleUtils'
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -102,9 +102,9 @@ export function serializeNode(n: Node<NodeData>): Record<string, unknown> {
     disk_gb: n.data.disk_gb ?? null,
     show_hardware: n.data.show_hardware ?? false,
     properties: n.data.properties ?? [],
-    width: n.measured?.width ?? n.width ?? null,
-    height: n.measured?.height ?? n.height ?? null,
-    bottom_handles: clampBottomHandles(n.data.bottom_handles ?? 1),
+    width: n.width ?? null,
+    height: n.height ?? null,
+    bottom_handles: n.data.bottom_handles ?? 1,
     pos_x: n.position.x,
     pos_y: n.position.y,
   }
@@ -155,13 +155,13 @@ export function deserializeApiNode(
     id: n.id,
     type: normalizedType,
     position: { x: n.pos_x, y: n.pos_y },
-    data: { ...n, type: normalizedType, bottom_handles: clampBottomHandles(n.bottom_handles ?? 1) } as unknown as NodeData,
+    data: { ...n, type: normalizedType } as unknown as NodeData,
     ...(n.parent_id && parentIsContainer ? { parentId: n.parent_id, extent: 'parent' as const } : {}),
-    ...(['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) && n.container_mode !== false
+    ...(normalizedType === 'proxmox' && n.container_mode !== false
       ? { width: n.width ?? 300, height: n.height ?? 200 }
       : {}),
-    ...(n.width && !['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) ? { width: n.width } : {}),
-    ...(n.height && !['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) ? { height: n.height } : {}),
+    ...(n.width && normalizedType !== 'proxmox' ? { width: n.width } : {}),
+    ...(n.height && normalizedType !== 'proxmox' ? { height: n.height } : {}),
   }
 }
 

frontend/src/utils/colorUtils.ts

@@ -1,43 +0,0 @@
-/**
- * Split a 6- or 8-digit hex color into its RGB hex and alpha (0–100).
- * 6-digit input returns alpha 100.
- * Invalid input returns { hex6: '#000000', alpha: 100 }.
- */
-export function hexToRgba(hex: string): { hex6: string; alpha: number } {
-  const clean = hex.replace('#', '')
-  if (clean.length === 8) {
-    const alphaByte = parseInt(clean.slice(6, 8), 16)
-    return {
-      hex6: `#${clean.slice(0, 6)}`,
-      alpha: Math.round((alphaByte / 255) * 100),
-    }
-  }
-  if (clean.length === 6) {
-    return { hex6: `#${clean}`, alpha: 100 }
-  }
-  return { hex6: '#000000', alpha: 100 }
-}
-
-/**
- * Combine a 6-digit hex color and an alpha (0–100) into an 8-digit hex.
- */
-export function rgbaToHex8(hex6: string, alpha: number): string {
-  const clamped = Math.max(0, Math.min(100, alpha))
-  const alphaByte = Math.round((clamped / 100) * 255)
-  const alphaHex = alphaByte.toString(16).padStart(2, '0')
-  return `${hex6}${alphaHex}`
-}
-
-/**
- * Combine a hex color and opacity (0–1) into a CSS rgba() string.
- * Returns the plain hex when opacity is 1.
- */
-export function applyOpacity(hex: string, opacity: number): string {
-  if (opacity >= 1) return hex
-  let h = hex.replace('#', '')
-  if (h.length === 3) h = h[0]+h[0]+h[1]+h[1]+h[2]+h[2]
-  const r = parseInt(h.slice(0, 2), 16)
-  const g = parseInt(h.slice(2, 4), 16)
-  const b = parseInt(h.slice(4, 6), 16)
-  return `rgba(${r}, ${g}, ${b}, ${Math.round(opacity * 100) / 100})`
-}

frontend/src/utils/export.ts

@@ -1,19 +1,14 @@
 import { toPng } from 'html-to-image'
 
-export type ExportQuality = 'standard' | 'high' | 'ultra'
-
-export const EXPORT_QUALITY_OPTIONS: { value: ExportQuality; label: string; pixelRatio: number; hint: string }[] = [
-  { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
-  { value: 'high',     label: 'High',     pixelRatio: 2, hint: '2× — recommended' },
-  { value: 'ultra',    label: 'Ultra',    pixelRatio: 4, hint: '4× — print quality, large file' },
-]
-
-export async function exportToPng(element: HTMLElement, quality: ExportQuality = 'high'): Promise<void> {
-  const option = EXPORT_QUALITY_OPTIONS.find((o) => o.value === quality) ?? EXPORT_QUALITY_OPTIONS[1]
+/**
+ * Export the React Flow canvas as a PNG and trigger a browser download.
+ * Pass the `.react-flow` wrapper element.
+ */
+export async function exportToPng(element: HTMLElement): Promise<void> {
   const dataUrl = await toPng(element, {
     backgroundColor: '#0d1117',
-    pixelRatio: option.pixelRatio,
     style: {
+      // Exclude controls from the export
       '--xy-controls-display': 'none',
     } as Partial<CSSStyleDeclaration>,
   })

frontend/src/utils/exportMarkdown.ts

@@ -15,11 +15,7 @@ export function generateMarkdownTable(nodes: Node<NodeData>[]): string {
     .map((n) => {
       const d = n.data
       const services = d.services?.length
-        ? d.services.map((s) => {
-          const port = s.port != null ? `:${s.port}` : ''
-          const path = s.path?.trim() ? s.path.trim() : ''
-          return `${s.service_name}${port}${path}`
-        }).join(', ')
+        ? d.services.map((s) => `${s.service_name}:${s.port}`).join(', ')
         : EMPTY
       return [
         cell(d.label),

frontend/src/utils/handleUtils.ts

@@ -2,44 +2,20 @@
  * Bottom handle configuration for multi-handle nodes.
  *
  * Handle IDs:  index 0 = 'bottom' (always the default, backward-compatible)
- *              index N≥1 = 'bottom-${N+1}'  (so idx 1 = 'bottom-2', idx 47 = 'bottom-48')
+ *              index 1 = 'bottom-2', index 2 = 'bottom-3', index 3 = 'bottom-4'
  *
  * Invisible target handles follow the same pattern with a '-t' suffix:
- *   'bottom-t', 'bottom-2-t', ..., 'bottom-48-t'
+ *   'bottom-t', 'bottom-2-t', 'bottom-3-t', 'bottom-4-t'
  */
 
-export const MIN_BOTTOM_HANDLES = 1
-export const MAX_BOTTOM_HANDLES = 48
+export const BOTTOM_HANDLE_IDS = ['bottom', 'bottom-2', 'bottom-3', 'bottom-4'] as const
 
-/** Returns the source handle ID at a given slot index. */
-export function bottomHandleId(idx: number): string {
-  return idx === 0 ? 'bottom' : `bottom-${idx + 1}`
-}
-
-/** Clamp a raw count into the supported range. Non-finite or non-int → MIN. */
-export function clampBottomHandles(n: unknown): number {
-  if (typeof n !== 'number' || !Number.isFinite(n)) return MIN_BOTTOM_HANDLES
-  const i = Math.floor(n)
-  if (i < MIN_BOTTOM_HANDLES) return MIN_BOTTOM_HANDLES
-  if (i > MAX_BOTTOM_HANDLES) return MAX_BOTTOM_HANDLES
-  return i
-}
-
-/**
- * Left % positions for each handle slot.
- * Counts 1..4 keep their original hand-tuned values to preserve exact pixel
- * positions on canvases saved before the multi-handle expansion.
- * Counts ≥ 5 use uniform spacing.
- */
-export function bottomHandlePositions(count: number): number[] {
-  const c = clampBottomHandles(count)
-  switch (c) {
-    case 1: return [50]
-    case 2: return [25, 75]
-    case 3: return [20, 50, 80]
-    case 4: return [15, 38, 62, 85]
-    default: return Array.from({ length: c }, (_, i) => ((i + 1) * 100) / (c + 1))
-  }
+/** Left % position for each handle slot, per count. */
+export const BOTTOM_HANDLE_POSITIONS: Record<number, number[]> = {
+  1: [50],
+  2: [25, 75],
+  3: [20, 50, 80],
+  4: [15, 38, 62, 85],
 }
 
 /**
@@ -63,7 +39,7 @@ export function normalizeHandle(h: string | null | undefined): string | null {
 export function removedBottomHandleIds(oldCount: number, newCount: number): Set<string> {
   const removed = new Set<string>()
   for (let i = newCount; i < oldCount; i++) {
-    removed.add(bottomHandleId(i))
+    removed.add(BOTTOM_HANDLE_IDS[i])
   }
   return removed
 }

frontend/src/utils/maskIp.ts

@@ -1,45 +1,10 @@
 /**
- * Mask a single IP address:
- * - IPv4 "192.168.1.115" → "192.168.XX.XX"
- * - IPv6 "2001:db8::1"   → "2001:XX::XX"
- * - Other strings returned unchanged.
- */
-function maskSingle(ip: string): string {
-  const trimmed = ip.trim()
-  if (/^[\da-fA-F:]+$/.test(trimmed) && trimmed.includes(':')) {
-    const groups = trimmed.split(':')
-    if (groups.length >= 2) {
-      groups[1] = 'XX'
-      groups[groups.length - 1] = 'XX'
-      return groups.join(':')
-    }
-  }
-  const parts = trimmed.split('.')
-  if (parts.length === 4) return `${parts[0]}.${parts[1]}.XX.XX`
-  return trimmed
-}
-
-/**
- * Mask all IPs in a comma-separated string.
- * e.g. "192.168.1.1, 2001:db8::1" → "192.168.XX.XX, 2001:XX::XX"
+ * Mask the last two octets of an IPv4 address.
+ * e.g. "192.168.1.115" → "192.168.XX.XX"
+ * Non-IPv4 strings are returned unchanged.
  */
 export function maskIp(ip: string): string {
-  if (!ip) return ip
-  return ip.split(',').map(maskSingle).join(', ')
-}
-
-/**
- * Split a comma-separated IP string into an array of trimmed values.
- * Empty string returns [].
- */
-export function splitIps(ip: string): string[] {
-  if (!ip?.trim()) return []
-  return ip.split(',').map((s) => s.trim()).filter(Boolean)
-}
-
-/**
- * Return the first IP from a comma-separated string (used for status checks).
- */
-export function primaryIp(ip: string): string {
-  return splitIps(ip)[0] ?? ''
+  const parts = ip.split('.')
+  if (parts.length === 4) return `${parts[0]}.${parts[1]}.XX.XX`
+  return ip
 }

frontend/src/utils/nodeIcons.ts

@@ -9,7 +9,7 @@ import {
   // Storage & Databases
   Database, Archive, Cloud, FolderOpen,
   // Security & Auth
-  Shield, ShieldCheck, Lock, Key, Users, UserCheck, Flame,
+  Shield, ShieldCheck, Lock, Key, Users, UserCheck,
   // Automation & IoT
   Zap, Workflow, Bot, Home, Thermometer, Lightbulb, Radio,
   // Transfers & sync
@@ -32,22 +32,21 @@ export interface IconEntry {
 
 export const ICON_REGISTRY: IconEntry[] = [
   // --- Infrastructure ---
-  { key: 'globe',      label: 'Globe / ISP',          category: 'Infrastructure', icon: Globe },
-  { key: 'router',     label: 'Router',               category: 'Infrastructure', icon: Router },
-  { key: 'flame',      label: 'Firewall',             category: 'Infrastructure', icon: Flame },
-  { key: 'network',    label: 'Switch / Network',     category: 'Infrastructure', icon: Network },
-  { key: 'server',     label: 'Server',               category: 'Infrastructure', icon: Server },
+  { key: 'globe',      label: 'Globe / ISP',       category: 'Infrastructure', icon: Globe },
+  { key: 'router',     label: 'Router',             category: 'Infrastructure', icon: Router },
+  { key: 'network',    label: 'Switch / Network',   category: 'Infrastructure', icon: Network },
+  { key: 'server',     label: 'Server',             category: 'Infrastructure', icon: Server },
   { key: 'layers',     label: 'Proxmox / Hypervisor', category: 'Infrastructure', icon: Layers },
-  { key: 'box',        label: 'VM',                   category: 'Infrastructure', icon: Box },
-  { key: 'container',  label: 'Container / LXC',      category: 'Infrastructure', icon: Container },
-  { key: 'harddrive',  label: 'NAS / Storage',        category: 'Infrastructure', icon: HardDrive },
-  { key: 'cpu',        label: 'IoT / Embedded',       category: 'Infrastructure', icon: Cpu },
-  { key: 'wifi',       label: 'Access Point',         category: 'Infrastructure', icon: Wifi },
-  { key: 'circle',     label: 'Generic',              category: 'Infrastructure', icon: Circle },
-  { key: 'monitor',    label: 'Workstation',          category: 'Infrastructure', icon: Monitor },
-  { key: 'smartphone', label: 'Phone / Mobile',       category: 'Infrastructure', icon: Smartphone },
-  { key: 'printer',    label: 'Printer',              category: 'Infrastructure', icon: Printer },
-  { key: 'plugzap',    label: 'CPL / Powerline',      category: 'Infrastructure', icon: PlugZap },
+  { key: 'box',        label: 'VM',                 category: 'Infrastructure', icon: Box },
+  { key: 'container',  label: 'Container / LXC',    category: 'Infrastructure', icon: Container },
+  { key: 'harddrive',  label: 'NAS / Storage',      category: 'Infrastructure', icon: HardDrive },
+  { key: 'cpu',        label: 'IoT / Embedded',     category: 'Infrastructure', icon: Cpu },
+  { key: 'wifi',       label: 'Access Point',       category: 'Infrastructure', icon: Wifi },
+  { key: 'circle',     label: 'Generic',            category: 'Infrastructure', icon: Circle },
+  { key: 'monitor',    label: 'Workstation',        category: 'Infrastructure', icon: Monitor },
+  { key: 'smartphone', label: 'Phone / Mobile',     category: 'Infrastructure', icon: Smartphone },
+  { key: 'printer',    label: 'Printer',            category: 'Infrastructure', icon: Printer },
+  { key: 'plugzap',    label: 'CPL / Powerline',    category: 'Infrastructure', icon: PlugZap },
 
   // --- Media ---
   { key: 'play',         label: 'Jellyfin / Emby',   category: 'Media', icon: Play },
@@ -63,44 +62,44 @@ export const ICON_REGISTRY: IconEntry[] = [
   { key: 'cctv',         label: 'CCTV / IP Camera',  category: 'Media', icon: Cctv },
 
   // --- Monitoring ---
-  { key: 'activity',   label: 'Prometheus / Uptime',   category: 'Monitoring', icon: Activity },
-  { key: 'barchart',   label: 'Grafana / Kibana',      category: 'Monitoring', icon: BarChart2 },
-  { key: 'linechart',  label: 'InfluxDB / Metrics',    category: 'Monitoring', icon: LineChart },
+  { key: 'activity',   label: 'Prometheus / Uptime', category: 'Monitoring', icon: Activity },
+  { key: 'barchart',   label: 'Grafana / Kibana',   category: 'Monitoring', icon: BarChart2 },
+  { key: 'linechart',  label: 'InfluxDB / Metrics', category: 'Monitoring', icon: LineChart },
   { key: 'eye',        label: 'Overseerr / Watchlist', category: 'Monitoring', icon: Eye },
-  { key: 'bell',       label: 'Alerts / Notifiarr',    category: 'Monitoring', icon: Bell },
-  { key: 'gauge',      label: 'Dashboard / Status',    category: 'Monitoring', icon: Gauge },
+  { key: 'bell',       label: 'Alerts / Notifiarr', category: 'Monitoring', icon: Bell },
+  { key: 'gauge',      label: 'Dashboard / Status', category: 'Monitoring', icon: Gauge },
 
   // --- Storage & Databases ---
-  { key: 'database',   label: 'Database (SQL/NoSQL)',     category: 'Storage', icon: Database },
-  { key: 'archive',    label: 'Backup / Archive',         category: 'Storage', icon: Archive },
-  { key: 'cloud',      label: 'Nextcloud / S3',           category: 'Storage', icon: Cloud },
-  { key: 'folder',     label: 'Files / Filebrowser',      category: 'Storage', icon: FolderOpen },
+  { key: 'database',   label: 'Database (SQL/NoSQL)', category: 'Storage', icon: Database },
+  { key: 'archive',    label: 'Backup / Archive',    category: 'Storage', icon: Archive },
+  { key: 'cloud',      label: 'Nextcloud / S3',      category: 'Storage', icon: Cloud },
+  { key: 'folder',     label: 'Files / Filebrowser', category: 'Storage', icon: FolderOpen },
   { key: 'download',   label: 'Downloader (Torrent/NZB)', category: 'Storage', icon: Download },
-  { key: 'upload',     label: 'Upload / Sync',            category: 'Storage', icon: Upload },
-  { key: 'refresh',    label: 'Sync / Resilio',           category: 'Storage', icon: RefreshCw },
+  { key: 'upload',     label: 'Upload / Sync',       category: 'Storage', icon: Upload },
+  { key: 'refresh',    label: 'Sync / Resilio',      category: 'Storage', icon: RefreshCw },
 
   // --- Security & Auth ---
-  { key: 'shield',      label: 'Pi-hole / DNS Block',  category: 'Security', icon: Shield },
-  { key: 'shieldcheck', label: 'AdGuard Home',         category: 'Security', icon: ShieldCheck },
+  { key: 'shield',      label: 'Pi-hole / DNS Block', category: 'Security', icon: Shield },
+  { key: 'shieldcheck', label: 'AdGuard Home',        category: 'Security', icon: ShieldCheck },
   { key: 'lock',        label: 'Authelia / Authentik', category: 'Security', icon: Lock },
-  { key: 'key',         label: 'Vaultwarden / Vault',  category: 'Security', icon: Key },
-  { key: 'users',       label: 'LDAP / SSO',           category: 'Security', icon: Users },
-  { key: 'usercheck',   label: 'Keycloak',             category: 'Security', icon: UserCheck },
-  { key: 'filter',      label: 'Prowlarr / Jackett',   category: 'Security', icon: Filter },
-  { key: 'search',      label: 'Search / Indexer',     category: 'Security', icon: Search },
+  { key: 'key',         label: 'Vaultwarden / Vault', category: 'Security', icon: Key },
+  { key: 'users',       label: 'LDAP / SSO',          category: 'Security', icon: Users },
+  { key: 'usercheck',   label: 'Keycloak',            category: 'Security', icon: UserCheck },
+  { key: 'filter',      label: 'Prowlarr / Jackett',  category: 'Security', icon: Filter },
+  { key: 'search',      label: 'Search / Indexer',    category: 'Security', icon: Search },
 
   // --- Automation & Smart Home ---
-  { key: 'home',        label: 'Home Assistant',       category: 'Automation', icon: Home },
-  { key: 'zap',         label: 'ESPHome / Node-RED',   category: 'Automation', icon: Zap },
-  { key: 'workflow',    label: 'n8n / Node-RED',       category: 'Automation', icon: Workflow },
-  { key: 'bot',         label: 'Bot / Automation',     category: 'Automation', icon: Bot },
+  { key: 'home',        label: 'Home Assistant',      category: 'Automation', icon: Home },
+  { key: 'zap',         label: 'ESPHome / Node-RED',  category: 'Automation', icon: Zap },
+  { key: 'workflow',    label: 'n8n / Node-RED',      category: 'Automation', icon: Workflow },
+  { key: 'bot',         label: 'Bot / Automation',    category: 'Automation', icon: Bot },
   { key: 'thermometer', label: 'Sensor / Temperature', category: 'Automation', icon: Thermometer },
-  { key: 'lightbulb',   label: 'Smart Light / Zigbee', category: 'Automation', icon: Lightbulb },
-  { key: 'radio',       label: 'MQTT / RTL-SDR',       category: 'Automation', icon: Radio },
+  { key: 'lightbulb',  label: 'Smart Light / Zigbee', category: 'Automation', icon: Lightbulb },
+  { key: 'radio',      label: 'MQTT / RTL-SDR',       category: 'Automation', icon: Radio },
 
   // --- Containers & Dev ---
-  { key: 'anchor',    label: 'Portainer / Docker',        category: 'Dev & Containers', icon: Anchor },
-  { key: 'package',   label: 'Docker Host / Container',  category: 'Dev & Containers', icon: Package },
+  { key: 'anchor',    label: 'Portainer / Docker',   category: 'Dev & Containers', icon: Anchor },
+  { key: 'package',   label: 'Docker Host',          category: 'Dev & Containers', icon: Package },
   { key: 'gitbranch', label: 'Gitea / Gitlab',       category: 'Dev & Containers', icon: GitBranch },
   { key: 'terminal',  label: 'SSH / Shell',          category: 'Dev & Containers', icon: Terminal },
   { key: 'code',      label: 'VS Code Server',       category: 'Dev & Containers', icon: Code2 },
@@ -119,26 +118,25 @@ export const ICON_MAP: Record<string, LucideIcon> = Object.fromEntries(
 )
 
 export const NODE_TYPE_DEFAULT_ICONS: Record<NodeType, LucideIcon> = {
-  isp:          Globe,
-  router:       Router,
-  firewall:     Flame,
-  switch:       Network,
-  server:       Server,
-  proxmox:      Layers,
-  vm:           Box,
-  lxc:          Container,
-  nas:          HardDrive,
-  iot:          Cpu,
-  ap:           Wifi,
-  camera:       Cctv,
-  printer:      Printer,
-  computer:     Monitor,
-  cpl:          PlugZap,
-  docker_host:       Anchor,
-  docker_container:  Package,
-  generic:           Circle,
-  group:        Circle,
-  groupRect:    Circle,
+  isp:      Globe,
+  router:   Router,
+  switch:   Network,
+  server:   Server,
+  proxmox:  Layers,
+  vm:       Box,
+  lxc:      Container,
+  nas:      HardDrive,
+  iot:      Cpu,
+  ap:       Wifi,
+  camera:   Cctv,
+  printer:  Printer,
+  computer: Monitor,
+  cpl:      PlugZap,
+  docker_container: Container,
+  docker_host: Anchor,
+  generic:  Circle,
+  group:    Circle,
+  groupRect: Circle,
 }
 
 /** Resolve the display icon for a node — custom_icon takes priority over type default. */

frontend/src/utils/propertyIcons.ts

@@ -1,15 +1,11 @@
 import {
   Battery,
   Box,
-  CircuitBoard,
   Clock,
   Cpu,
   Database,
-  EthernetPort,
   Globe,
-  Gpu,
   HardDrive,
-  HdmiPort,
   Hash,
   Key,
   Layers,
@@ -21,7 +17,6 @@ import {
   Shield,
   Tag,
   Thermometer,
-  Usb,
   Wifi,
   Zap,
 } from 'lucide-react'
@@ -30,15 +25,11 @@ import type { LucideIcon } from 'lucide-react'
 export const PROPERTY_ICONS: Record<string, LucideIcon> = {
   Battery,
   Box,
-  CircuitBoard,
   Clock,
   Cpu,
   Database,
-  EthernetPort,
   Globe,
-  Gpu,
   HardDrive,
-  HdmiPort,
   Hash,
   Key,
   Layers,
@@ -50,7 +41,6 @@ export const PROPERTY_ICONS: Record<string, LucideIcon> = {
   Shield,
   Tag,
   Thermometer,
-  Usb,
   Wifi,
   Zap,
 }

frontend/src/utils/serviceUrl.ts

@@ -20,82 +20,15 @@ const NON_HTTP_PORTS = new Set([
   27017, 27018,   // MongoDB
 ])
 
-function splitFirstHost(host: string): string {
-  return host.split(',')[0]?.trim() ?? ''
-}
-
-function parsePort(port: string): number | undefined {
-  if (!/^\d+$/.test(port)) return undefined
-  const parsed = Number.parseInt(port, 10)
-  return parsed >= 1 && parsed <= 65535 ? parsed : undefined
-}
-
-function parseHostParts(host: string): { protocol?: 'http' | 'https'; hostname: string; port?: number } | null {
-  const firstHost = splitFirstHost(host)
-  if (!firstHost) return null
-
-  if (firstHost.startsWith('http://') || firstHost.startsWith('https://')) {
-    const url = new URL(firstHost)
-    return {
-      protocol: url.protocol === 'https:' ? 'https' : 'http',
-      hostname: url.hostname,
-      port: parsePort(url.port),
-    }
-  }
-
-  if (firstHost.startsWith('[')) {
-    const bracketIndex = firstHost.indexOf(']')
-    if (bracketIndex === -1) return { hostname: firstHost }
-    const hostname = firstHost.slice(1, bracketIndex)
-    const remainder = firstHost.slice(bracketIndex + 1)
-    return {
-      hostname,
-      port: remainder.startsWith(':') ? parsePort(remainder.slice(1)) : undefined,
-    }
-  }
-
-  const colonCount = (firstHost.match(/:/g) ?? []).length
-  if (colonCount === 1) {
-    const [hostname, rawPort] = firstHost.split(':')
-    const parsedPort = parsePort(rawPort)
-    if (hostname && parsedPort != null) {
-      return { hostname, port: parsedPort }
-    }
-  }
-
-  return { hostname: firstHost }
-}
-
-function normalizePath(path?: string): string {
-  const trimmed = path?.trim()
-  if (!trimmed) return ''
-  if (trimmed === '/') return '/'
-  return trimmed.startsWith('/') ? trimmed : `/${trimmed}`
-}
-
-function formatHostname(hostname: string): string {
-  return hostname.includes(':') && !hostname.startsWith('[') ? `[${hostname}]` : hostname
-}
-
 export function getServiceUrl(svc: ServiceInfo, host?: string): string | null {
   if (!host) return null
+  if (svc.port === 22) return null        // SSH — no browser
   if (svc.protocol === 'udp') return null // UDP — not HTTP
-
-  const parts = parseHostParts(host)
-  if (!parts?.hostname) return null
-
-  const effectivePort = svc.port ?? parts.port
-  if (effectivePort === 22) return null // SSH — no browser
-  if (effectivePort != null && NON_HTTP_PORTS.has(effectivePort)) return null
+  if (NON_HTTP_PORTS.has(svc.port)) return null
 
   const name = svc.service_name.toLowerCase()
-  const protocol = parts.protocol ?? (
+  const isHttps =
     name.includes('https') || name.includes('ssl') || name.includes('tls') ||
-    effectivePort === 443 || effectivePort === 8443
-      ? 'https'
-      : 'http'
-  )
-  const base = `${protocol}://${formatHostname(parts.hostname)}`
-  const port = effectivePort != null ? `:${effectivePort}` : ''
-  return `${base}${port}${normalizePath(svc.path)}`
+    svc.port === 443 || svc.port === 8443
+  return `${isHttps ? 'https' : 'http'}://${host}:${svc.port}`
 }

frontend/src/utils/themes.ts

@@ -1,6 +1,6 @@
 import type { NodeType, EdgeType, NodeStatus } from '@/types'
 
-export type ThemeId = 'default' | 'dark' | 'light' | 'neon' | 'matrix' | 'custom'
+export type ThemeId = 'default' | 'dark' | 'light' | 'neon' | 'matrix'
 
 export interface ThemeColors {
   // Per node-type accent (border + icon)
@@ -42,26 +42,25 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
     description: 'Dark futuristic — the original Homelable look',
     colors: {
       nodeAccents: {
-        isp:          { border: '#00d4ff', icon: '#00d4ff' },
-        router:       { border: '#00d4ff', icon: '#00d4ff' },
-        firewall:     { border: '#f85149', icon: '#f85149' },
-        switch:       { border: '#39d353', icon: '#39d353' },
-        server:       { border: '#a855f7', icon: '#a855f7' },
-        proxmox:      { border: '#ff6e00', icon: '#ff6e00' },
-        vm:           { border: '#a855f7', icon: '#a855f7' },
-        lxc:          { border: '#00d4ff', icon: '#00d4ff' },
-        nas:          { border: '#39d353', icon: '#39d353' },
-        iot:          { border: '#e3b341', icon: '#e3b341' },
-        ap:           { border: '#00d4ff', icon: '#00d4ff' },
-        camera:       { border: '#8b949e', icon: '#8b949e' },
-        printer:      { border: '#8b949e', icon: '#8b949e' },
-        computer:     { border: '#a855f7', icon: '#a855f7' },
-        cpl:          { border: '#e3b341', icon: '#e3b341' },
-        docker_host:       { border: '#2496ED', icon: '#2496ED' },
-        docker_container:  { border: '#0ea5e9', icon: '#0ea5e9' },
-        generic:           { border: '#8b949e', icon: '#8b949e' },
-        groupRect:         { border: '#00d4ff', icon: '#00d4ff' },
-        group:             { border: '#00d4ff', icon: '#00d4ff' },
+        isp:      { border: '#00d4ff', icon: '#00d4ff' },
+        router:   { border: '#00d4ff', icon: '#00d4ff' },
+        switch:   { border: '#39d353', icon: '#39d353' },
+        server:   { border: '#a855f7', icon: '#a855f7' },
+        proxmox:  { border: '#ff6e00', icon: '#ff6e00' },
+        vm:       { border: '#a855f7', icon: '#a855f7' },
+        lxc:      { border: '#00d4ff', icon: '#00d4ff' },
+        nas:      { border: '#39d353', icon: '#39d353' },
+        iot:      { border: '#e3b341', icon: '#e3b341' },
+        ap:       { border: '#00d4ff', icon: '#00d4ff' },
+        camera:   { border: '#8b949e', icon: '#8b949e' },
+        printer:  { border: '#8b949e', icon: '#8b949e' },
+        computer: { border: '#a855f7', icon: '#a855f7' },
+        cpl:      { border: '#e3b341', icon: '#e3b341' },
+        docker_container: { border: '#38bdf8', icon: '#38bdf8' },
+        docker_host:   { border: '#2496ED', icon: '#2496ED' },
+        generic:  { border: '#8b949e', icon: '#8b949e' },
+        groupRect:{ border: '#00d4ff', icon: '#00d4ff' },
+        group:    { border: '#00d4ff', icon: '#00d4ff' },
       },
       nodeCardBackground: '#21262d',
       nodeIconBackground: '#161b22',
@@ -99,26 +98,25 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
     description: 'Pure black with maximum contrast',
     colors: {
       nodeAccents: {
-        isp:           { border: '#22d3ee', icon: '#22d3ee' },
-        router:        { border: '#22d3ee', icon: '#22d3ee' },
-        firewall:      { border: '#ef4444', icon: '#ef4444' },
-        switch:        { border: '#4ade80', icon: '#4ade80' },
-        server:        { border: '#c084fc', icon: '#c084fc' },
-        proxmox:       { border: '#fb923c', icon: '#fb923c' },
-        vm:            { border: '#c084fc', icon: '#c084fc' },
-        lxc:           { border: '#22d3ee', icon: '#22d3ee' },
-        nas:           { border: '#4ade80', icon: '#4ade80' },
-        iot:           { border: '#fbbf24', icon: '#fbbf24' },
-        ap:            { border: '#22d3ee', icon: '#22d3ee' },
-        camera:        { border: '#94a3b8', icon: '#94a3b8' },
-        printer:       { border: '#94a3b8', icon: '#94a3b8' },
-        computer:      { border: '#c084fc', icon: '#c084fc' },
-        cpl:           { border: '#fbbf24', icon: '#fbbf24' },
-        docker_host:       { border: '#2496ED', icon: '#2496ED' },
-        docker_container:  { border: '#38bdf8', icon: '#38bdf8' },
-        generic:           { border: '#94a3b8', icon: '#94a3b8' },
-        groupRect:         { border: '#22d3ee', icon: '#22d3ee' },
-        group:             { border: '#22d3ee', icon: '#22d3ee' },
+        isp:      { border: '#22d3ee', icon: '#22d3ee' },
+        router:   { border: '#22d3ee', icon: '#22d3ee' },
+        switch:   { border: '#4ade80', icon: '#4ade80' },
+        server:   { border: '#c084fc', icon: '#c084fc' },
+        proxmox:  { border: '#fb923c', icon: '#fb923c' },
+        vm:       { border: '#c084fc', icon: '#c084fc' },
+        lxc:      { border: '#22d3ee', icon: '#22d3ee' },
+        nas:      { border: '#4ade80', icon: '#4ade80' },
+        iot:      { border: '#fbbf24', icon: '#fbbf24' },
+        ap:       { border: '#22d3ee', icon: '#22d3ee' },
+        camera:   { border: '#94a3b8', icon: '#94a3b8' },
+        printer:  { border: '#94a3b8', icon: '#94a3b8' },
+        computer: { border: '#c084fc', icon: '#c084fc' },
+        cpl:      { border: '#fbbf24', icon: '#fbbf24' },
+        docker_container: { border: '#38bdf8', icon: '#38bdf8' },
+        docker_host:   { border: '#2496ED', icon: '#2496ED' },
+        generic:  { border: '#94a3b8', icon: '#94a3b8' },
+        groupRect:{ border: '#22d3ee', icon: '#22d3ee' },
+        group:    { border: '#22d3ee', icon: '#22d3ee' },
       },
       nodeCardBackground: '#0a0a0a',
       nodeIconBackground: '#111111',
@@ -156,26 +154,25 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
     description: 'Clean light theme with dark text',
     colors: {
       nodeAccents: {
-        isp:           { border: '#0284c7', icon: '#0284c7' },
-        router:        { border: '#0284c7', icon: '#0284c7' },
-        firewall:      { border: '#dc2626', icon: '#dc2626' },
-        switch:        { border: '#16a34a', icon: '#16a34a' },
-        server:        { border: '#7c3aed', icon: '#7c3aed' },
-        proxmox:       { border: '#ea580c', icon: '#ea580c' },
-        vm:            { border: '#7c3aed', icon: '#7c3aed' },
-        lxc:           { border: '#0284c7', icon: '#0284c7' },
-        nas:           { border: '#16a34a', icon: '#16a34a' },
-        iot:           { border: '#b45309', icon: '#b45309' },
-        ap:            { border: '#0284c7', icon: '#0284c7' },
-        camera:        { border: '#6b7280', icon: '#6b7280' },
-        printer:       { border: '#6b7280', icon: '#6b7280' },
-        computer:      { border: '#7c3aed', icon: '#7c3aed' },
-        cpl:           { border: '#b45309', icon: '#b45309' },
-        docker_host:       { border: '#2496ED', icon: '#2496ED' },
-        docker_container:  { border: '#0369a1', icon: '#0369a1' },
-        generic:           { border: '#6b7280', icon: '#6b7280' },
-        groupRect:         { border: '#0284c7', icon: '#0284c7' },
-        group:             { border: '#0284c7', icon: '#0284c7' },
+        isp:      { border: '#0284c7', icon: '#0284c7' },
+        router:   { border: '#0284c7', icon: '#0284c7' },
+        switch:   { border: '#16a34a', icon: '#16a34a' },
+        server:   { border: '#7c3aed', icon: '#7c3aed' },
+        proxmox:  { border: '#ea580c', icon: '#ea580c' },
+        vm:       { border: '#7c3aed', icon: '#7c3aed' },
+        lxc:      { border: '#0284c7', icon: '#0284c7' },
+        nas:      { border: '#16a34a', icon: '#16a34a' },
+        iot:      { border: '#b45309', icon: '#b45309' },
+        ap:       { border: '#0284c7', icon: '#0284c7' },
+        camera:   { border: '#6b7280', icon: '#6b7280' },
+        printer:  { border: '#6b7280', icon: '#6b7280' },
+        computer: { border: '#7c3aed', icon: '#7c3aed' },
+        cpl:      { border: '#b45309', icon: '#b45309' },
+        docker_container: { border: '#0ea5e9', icon: '#0ea5e9' },
+        docker_host:   { border: '#2496ED', icon: '#2496ED' },
+        generic:  { border: '#6b7280', icon: '#6b7280' },
+        groupRect:{ border: '#0284c7', icon: '#0284c7' },
+        group:    { border: '#0284c7', icon: '#0284c7' },
       },
       nodeCardBackground: '#ffffff',
       nodeIconBackground: '#f0f6ff',
@@ -213,26 +210,25 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
     description: 'Cyberpunk vibes with vivid glowing accents',
     colors: {
       nodeAccents: {
-        isp:          { border: '#00ffff', icon: '#00ffff' },
-        router:       { border: '#00ffff', icon: '#00ffff' },
-        firewall:     { border: '#ff0040', icon: '#ff0040' },
-        switch:       { border: '#00ff80', icon: '#00ff80' },
-        server:       { border: '#ff00ff', icon: '#ff00ff' },
-        proxmox:      { border: '#ff8800', icon: '#ff8800' },
-        vm:           { border: '#ff00ff', icon: '#ff00ff' },
-        lxc:          { border: '#00ffff', icon: '#00ffff' },
-        nas:          { border: '#00ff80', icon: '#00ff80' },
-        iot:          { border: '#ffff00', icon: '#ffff00' },
-        ap:           { border: '#00ffff', icon: '#00ffff' },
-        camera:       { border: '#8888ff', icon: '#8888ff' },
-        printer:      { border: '#8888ff', icon: '#8888ff' },
-        computer:     { border: '#ff00ff', icon: '#ff00ff' },
-        cpl:          { border: '#ffff00', icon: '#ffff00' },
-        docker_host:       { border: '#00aaff', icon: '#00aaff' },
-        docker_container:  { border: '#00ddff', icon: '#00ddff' },
-        generic:           { border: '#8888ff', icon: '#8888ff' },
-        groupRect:         { border: '#00ffff', icon: '#00ffff' },
-        group:             { border: '#00ffff', icon: '#00ffff' },
+        isp:      { border: '#00ffff', icon: '#00ffff' },
+        router:   { border: '#00ffff', icon: '#00ffff' },
+        switch:   { border: '#00ff80', icon: '#00ff80' },
+        server:   { border: '#ff00ff', icon: '#ff00ff' },
+        proxmox:  { border: '#ff8800', icon: '#ff8800' },
+        vm:       { border: '#ff00ff', icon: '#ff00ff' },
+        lxc:      { border: '#00ffff', icon: '#00ffff' },
+        nas:      { border: '#00ff80', icon: '#00ff80' },
+        iot:      { border: '#ffff00', icon: '#ffff00' },
+        ap:       { border: '#00ffff', icon: '#00ffff' },
+        camera:   { border: '#8888ff', icon: '#8888ff' },
+        printer:  { border: '#8888ff', icon: '#8888ff' },
+        computer: { border: '#ff00ff', icon: '#ff00ff' },
+        cpl:      { border: '#ffff00', icon: '#ffff00' },
+        docker_container: { border: '#00ddff', icon: '#00ddff' },
+        docker_host:   { border: '#00aaff', icon: '#00aaff' },
+        generic:  { border: '#8888ff', icon: '#8888ff' },
+        groupRect:{ border: '#00ffff', icon: '#00ffff' },
+        group:    { border: '#00ffff', icon: '#00ffff' },
       },
       nodeCardBackground: '#0f0f2a',
       nodeIconBackground: '#0a0a1a',
@@ -270,26 +266,25 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
     description: 'Everything in terminal green',
     colors: {
       nodeAccents: {
-        isp:          { border: '#00ff41', icon: '#00ff41' },
-        router:       { border: '#00ff41', icon: '#00ff41' },
-        firewall:     { border: '#88ff00', icon: '#88ff00' },
-        switch:       { border: '#00cc33', icon: '#00cc33' },
-        server:       { border: '#008822', icon: '#008822' },
-        proxmox:      { border: '#33ff66', icon: '#33ff66' },
-        vm:           { border: '#008822', icon: '#008822' },
-        lxc:          { border: '#00ff41', icon: '#00ff41' },
-        nas:          { border: '#00cc33', icon: '#00cc33' },
-        iot:          { border: '#66ff33', icon: '#66ff33' },
-        ap:           { border: '#00ff41', icon: '#00ff41' },
-        camera:       { border: '#005500', icon: '#005500' },
-        printer:      { border: '#005500', icon: '#005500' },
-        computer:     { border: '#008822', icon: '#008822' },
-        cpl:          { border: '#66ff33', icon: '#66ff33' },
-        docker_host:       { border: '#00cc88', icon: '#00cc88' },
-        docker_container:  { border: '#00aacc', icon: '#00aacc' },
-        generic:           { border: '#006600', icon: '#006600' },
-        groupRect:         { border: '#00ff41', icon: '#00ff41' },
-        group:             { border: '#00ff41', icon: '#00ff41' },
+        isp:      { border: '#00ff41', icon: '#00ff41' },
+        router:   { border: '#00ff41', icon: '#00ff41' },
+        switch:   { border: '#00cc33', icon: '#00cc33' },
+        server:   { border: '#008822', icon: '#008822' },
+        proxmox:  { border: '#33ff66', icon: '#33ff66' },
+        vm:       { border: '#008822', icon: '#008822' },
+        lxc:      { border: '#00ff41', icon: '#00ff41' },
+        nas:      { border: '#00cc33', icon: '#00cc33' },
+        iot:      { border: '#66ff33', icon: '#66ff33' },
+        ap:       { border: '#00ff41', icon: '#00ff41' },
+        camera:   { border: '#005500', icon: '#005500' },
+        printer:  { border: '#005500', icon: '#005500' },
+        computer: { border: '#008822', icon: '#008822' },
+        cpl:      { border: '#66ff33', icon: '#66ff33' },
+        docker_container: { border: '#00dd99', icon: '#00dd99' },
+        docker_host:   { border: '#00cc88', icon: '#00cc88' },
+        generic:  { border: '#006600', icon: '#006600' },
+        groupRect:{ border: '#00ff41', icon: '#00ff41' },
+        group:    { border: '#00ff41', icon: '#00ff41' },
       },
       nodeCardBackground: '#001100',
       nodeIconBackground: '#002200',
@@ -320,64 +315,7 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
       reactFlowColorMode: 'dark',
     },
   },
-
-  custom: {
-    id: 'custom',
-    label: 'Custom',
-    description: 'Your own colors per node and edge type',
-    colors: {
-      nodeAccents: {
-        isp:              { border: '#00d4ff', icon: '#00d4ff' },
-        router:           { border: '#00d4ff', icon: '#00d4ff' },
-        firewall:         { border: '#f85149', icon: '#f85149' },
-        switch:           { border: '#39d353', icon: '#39d353' },
-        server:           { border: '#a855f7', icon: '#a855f7' },
-        proxmox:          { border: '#ff6e00', icon: '#ff6e00' },
-        vm:               { border: '#a855f7', icon: '#a855f7' },
-        lxc:              { border: '#00d4ff', icon: '#00d4ff' },
-        nas:              { border: '#39d353', icon: '#39d353' },
-        iot:              { border: '#e3b341', icon: '#e3b341' },
-        ap:               { border: '#00d4ff', icon: '#00d4ff' },
-        camera:           { border: '#8b949e', icon: '#8b949e' },
-        printer:          { border: '#8b949e', icon: '#8b949e' },
-        computer:         { border: '#a855f7', icon: '#a855f7' },
-        cpl:              { border: '#e3b341', icon: '#e3b341' },
-        docker_host:      { border: '#2496ED', icon: '#2496ED' },
-        docker_container: { border: '#0ea5e9', icon: '#0ea5e9' },
-        generic:          { border: '#8b949e', icon: '#8b949e' },
-        groupRect:        { border: '#00d4ff', icon: '#00d4ff' },
-        group:            { border: '#00d4ff', icon: '#00d4ff' },
-      },
-      nodeCardBackground: '#21262d',
-      nodeIconBackground: '#161b22',
-      nodeLabelColor:     '#e6edf3',
-      nodeSubtextColor:   '#8b949e',
-      statusColors: {
-        online:  '#39d353',
-        offline: '#f85149',
-        pending: '#e3b341',
-        unknown: '#8b949e',
-      },
-      edgeColors: {
-        ethernet: '#30363d',
-        wifi:     '#00d4ff',
-        iot:      '#e3b341',
-        vlan:     '#00d4ff',
-        virtual:  '#8b949e',
-        cluster:  '#ff6e00',
-      },
-      edgeSelectedColor:  '#00d4ff',
-      edgeLabelBackground:'#161b22',
-      edgeLabelColor:     '#8b949e',
-      edgeLabelBorder:    '#30363d',
-      canvasBackground:   '#0d1117',
-      canvasDotColor:     '#30363d',
-      handleBackground:   '#30363d',
-      handleBorder:       '#8b949e',
-      reactFlowColorMode: 'dark',
-    },
-  },
 }
 
 // Ordered list for display in the modal
-export const THEME_ORDER: ThemeId[] = ['default', 'dark', 'light', 'neon', 'matrix', 'custom']
+export const THEME_ORDER: ThemeId[] = ['default', 'dark', 'light', 'neon', 'matrix']

frontend/vite.config.ts

@@ -1,14 +1,12 @@
-import fs from 'fs'
 import path from 'path'
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
-
-const appVersion = fs.readFileSync(path.resolve(__dirname, '../VERSION'), 'utf-8').trim()
+import pkg from './package.json'
 
 export default defineConfig({
   define: {
-    __APP_VERSION__: JSON.stringify(appVersion),
+    __APP_VERSION__: JSON.stringify(pkg.version),
   },
   plugins: [react(), tailwindcss()],
   resolve: {

mcp/app/main.py

@@ -1,8 +1,7 @@
 from contextlib import asynccontextmanager
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from mcp.server import Server
 from mcp.server.streamable_http_manager import StreamableHTTPSessionManager
-from starlette.routing import Mount
 
 from .auth import ApiKeyMiddleware
 from .backend_client import backend
@@ -29,20 +28,15 @@ async def lifespan(app: FastAPI):
     await backend.stop()
 
 
-# Mount the session manager as an ASGI sub-app instead of wrapping it in a
-# FastAPI @app.api_route handler. Wrapping it in a route handler causes
-# FastAPI to send http.response.start after the session manager has already
-# started the response, raising `RuntimeError: Unexpected ASGI message
-# 'http.response.start' sent, after response already completed` on every
-# POST /mcp — which makes the server unreachable from any MCP client.
-app = FastAPI(
-    title="Homelable MCP",
-    lifespan=lifespan,
-    routes=[Mount("/mcp", app=session_manager.handle_request)],
-)
+app = FastAPI(title="Homelable MCP", lifespan=lifespan)
 app.add_middleware(ApiKeyMiddleware)
 
 
+@app.api_route("/mcp", methods=["GET", "POST", "DELETE"])
+async def mcp_endpoint(request: Request):
+    await session_manager.handle_request(request.scope, request.receive, request._send)
+
+
 @app.get("/health")
 async def health():
     return {"status": "ok"}