feat: network diagrams UX overhaul — icons, empty canvas, properties panel

- Colorize: semantic category colors for all device types (network=blue,
  security=orange, compute=emerald, endpoint=amber, storage=violet,
  cloud=cyan, infra=steel); better icons (Router, ShieldAlert, Boxes,
  Package, Gauge, PlugZap, Video, Radio); MiniMap uses category colors
- Onboard: centered AI generate prompt on empty canvas with 5 MSP-specific
  example chips, ⌘↵ shortcut, spinner; AIAssistPanel only shown with nodes
- Arrange: properties panel — status badge grid at top, fields grouped into
  Network (IP/Subnet/VLAN) and Hardware (Hostname/Vendor/Model/Role) sections
- Delight: segmented topology color bar on listing cards; backend returns
  category_counts via single extra query on list endpoint
- Harden: real PNG export via html-to-image + getNodesBounds/getViewportForBounds
- Polish: ChevronDown replaces unicode ▾, click-outside for client filter,
  consistent spinner in empty prompt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/app/api/endpoints/network_diagrams.py

@@ -28,6 +28,20 @@ from app.schemas.network_diagram import (
 )
 from app.services import network_diagram_ai_service
 
+# Maps system device-type slugs to their category — mirrors frontend deviceRegistry.ts
+_SLUG_CATEGORY: dict[str, str] = {
+    "router": "network", "switch": "network", "access-point": "network", "load-balancer": "network",
+    "firewall": "security", "badge-reader": "security",
+    "server": "compute", "vm": "compute", "container": "compute",
+    "nas": "storage", "san": "storage", "cloud-storage": "storage",
+    "cloud": "cloud", "aws": "cloud", "azure": "cloud", "gcp": "cloud", "isp": "cloud",
+    "workstation": "endpoint", "laptop": "endpoint", "tablet": "endpoint",
+    "phone": "endpoint", "printer": "endpoint",
+    "ups": "infrastructure", "pdu": "infrastructure", "rack": "infrastructure",
+    "patch-panel": "infrastructure", "camera": "infrastructure",
+    "nvr": "infrastructure", "iot": "infrastructure",
+}
+
 logger = logging.getLogger(__name__)
 
 router = APIRouter(prefix="/network-diagrams", tags=["network-diagrams"])
@@ -48,14 +62,26 @@ def _diagram_to_response(diagram: NetworkDiagram) -> NetworkDiagramResponse:
     return NetworkDiagramResponse.model_validate(diagram)
 
 
-def _diagram_to_list_item(diagram: NetworkDiagram) -> NetworkDiagramListItem:
+def _diagram_to_list_item(
+    diagram: NetworkDiagram,
+    custom_slug_category: dict[str, str] | None = None,
+) -> NetworkDiagramListItem:
     nodes = diagram.nodes if isinstance(diagram.nodes, list) else []
+    slug_to_cat = {**_SLUG_CATEGORY, **(custom_slug_category or {})}
+
+    category_counts: dict[str, int] = {}
+    for node in nodes:
+        slug = node.get("type", "") if isinstance(node, dict) else ""
+        cat = slug_to_cat.get(slug, "other")
+        category_counts[cat] = category_counts.get(cat, 0) + 1
+
     return NetworkDiagramListItem(
         id=diagram.id,
         name=diagram.name,
         client_name=diagram.client_name,
         description=diagram.description,
         node_count=len(nodes),
+        category_counts=category_counts,
         created_by=diagram.created_by,
         created_at=diagram.created_at,
         updated_at=diagram.updated_at,
@@ -119,9 +145,17 @@ async def list_diagrams(
             )
         )
 
+    # Single query for custom device types so category_counts is accurate
+    dt_stmt = select(DeviceType.slug, DeviceType.category).where(
+        DeviceType.is_system.is_(False),
+        DeviceType.team_id == current_user.team_id,
+    )
+    dt_result = await db.execute(dt_stmt)
+    custom_slug_category = {row[0]: row[1] for row in dt_result.all()}
+
     result = await db.execute(stmt)
     rows = result.scalars().all()
-    return [_diagram_to_list_item(r) for r in rows]
+    return [_diagram_to_list_item(r, custom_slug_category) for r in rows]
 
 
 @router.post("/", response_model=NetworkDiagramResponse, status_code=201)