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>

frontend/src/components/network/NetworkCanvas.tsx

@@ -13,6 +13,8 @@ import {
 } from '@xyflow/react'
 import { nodeTypes } from './nodes/nodeTypes'
 import { edgeTypes } from './edges/edgeTypes'
+import { getDeviceRenderConfig } from './nodes/deviceRegistry'
+import type { DeviceNodeData } from './nodes/DeviceNode'
 
 interface NetworkCanvasProps {
   nodes: Node[]
@@ -66,6 +68,12 @@ export function NetworkCanvas({
     onPaneClickProp?.()
   }, [onNodeSelect, onEdgeSelect, onPaneClickProp])
 
+  const getNodeColor = useCallback((node: Node) => {
+    if (node.type === 'group') return 'var(--color-bg-elevated)'
+    const data = node.data as unknown as DeviceNodeData
+    return getDeviceRenderConfig(data?.deviceType || '', data?.category).color
+  }, [])
+
   return (
     <div className="relative h-full w-full" onDragLeave={onDragLeave}>
       <ReactFlow
@@ -93,7 +101,7 @@ export function NetworkCanvas({
         <Background variant={BackgroundVariant.Dots} color="var(--color-border-default)" gap={20} size={1} />
         <Controls className="!border-default !bg-card [&>button]:!border-default [&>button]:!bg-card [&>button]:!fill-text-primary" />
         <MiniMap
-          nodeColor="var(--color-bg-elevated)"
+          nodeColor={getNodeColor}
           maskColor="rgba(0,0,0,0.5)"
           className="!border-default !bg-card"
           position="bottom-right"