fix(network): consolidate import buttons, redesign empty state, add shortcut overlay

- Import/Export button in editor header: removed standalone Import button, moved
  draw.io import into Export/Import dropdown with labelled sections; fixes
  conceptual trap where Import implied operating on the current diagram
- List page: replaced two identical Upload-icon Import buttons with a single
  dropdown (Import JSON / Import draw.io) with format descriptions
- Empty state: replaced icon-in-box with a horizontal card featuring a static
  SVG topology preview, MSP-specific value prop, and dual CTAs
- Keyboard shortcuts: new KeyboardShortcutsOverlay component (4-group grid),
  triggered by ? key or the ? button pinned to the canvas bottom-right corner;
  wired into useCanvasShortcuts hook
- Fixed Share2 → FileOutput icon for draw.io export (Share2 = send to someone,
  FileOutput = export file format)

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

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -24,6 +24,7 @@ import { DeviceToolbar } from '@/components/network/panels/DeviceToolbar'
 import { PropertiesPanel } from '@/components/network/panels/PropertiesPanel'
 import { AIAssistPanel } from '@/components/network/panels/AIAssistPanel'
 import { CanvasEmptyPrompt } from '@/components/network/CanvasEmptyPrompt'
+import { KeyboardShortcutsOverlay } from '@/components/network/KeyboardShortcutsOverlay'
 import { networkDiagramsApi, deviceTypesApi } from '@/api'
 import { toast } from '@/lib/toast'
 import { exportToDrawio } from '@/lib/drawio-export'
@@ -73,6 +74,7 @@ function DiagramEditorInner() {
   const [isDragOver, setIsDragOver] = useState(false)
 
   const [interactionMode, setInteractionMode] = useState<InteractionMode>('select')
+  const [showShortcuts, setShowShortcuts] = useState(false)
 
   const canvasRef = useRef<HTMLDivElement | null>(null)
   const drawioImportRef = useRef<HTMLInputElement>(null)
@@ -161,6 +163,7 @@ function DiagramEditorInner() {
     onRedo: redo,
     onNudge,
     onSetMode: setInteractionMode,
+    onToggleShortcuts: () => setShowShortcuts(v => !v),
   })
 
   const handleNodesChange: typeof onNodesChange = useCallback((changes) => {
@@ -850,6 +853,14 @@ function DiagramEditorInner() {
             {nodes.length === 0 && !loading && (
               <CanvasEmptyPrompt onGenerate={handleAIGenerate} />
             )}
+            {/* Keyboard shortcut hint button — bottom-right corner */}
+            <button
+              onClick={() => setShowShortcuts(true)}
+              title="Keyboard shortcuts (?)"
+              className="absolute bottom-4 right-4 z-10 flex h-7 w-7 items-center justify-center rounded-full border border-default bg-card text-[11px] font-semibold text-muted-foreground hover:border-hover hover:text-primary"
+            >
+              ?
+            </button>
           </div>
           {nodes.length > 0 && (
             <AIAssistPanel
@@ -953,6 +964,9 @@ function DiagramEditorInner() {
         className="hidden"
         onChange={handleDrawioFileChange}
       />
+      {showShortcuts && (
+        <KeyboardShortcutsOverlay onClose={() => setShowShortcuts(false)} />
+      )}
     </div>
   )
 }

frontend/src/pages/NetworkDiagrams/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Plus, Search, Network, MoreHorizontal, Upload, ChevronDown } from 'lucide-react'
+import { Plus, Search, Network, MoreHorizontal, Upload, ChevronDown, FileJson, FileOutput } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { networkDiagramsApi } from '@/api'
 import { toast } from '@/lib/toast'
@@ -39,7 +39,9 @@ export default function NetworkDiagramsPage() {
   const [clientSearch, setClientSearch] = useState('')
   const [menuOpenId, setMenuOpenId] = useState<string | null>(null)
   const [confirmArchiveId, setConfirmArchiveId] = useState<string | null>(null)
+  const [importMenuOpen, setImportMenuOpen] = useState(false)
   const clientDropdownRef = useRef<HTMLDivElement>(null)
+  const importMenuRef = useRef<HTMLDivElement>(null)
   const drawioListImportRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -53,6 +55,17 @@ export default function NetworkDiagramsPage() {
     return () => document.removeEventListener('mousedown', handleClick)
   }, [clientDropdownOpen])
 
+  useEffect(() => {
+    if (!importMenuOpen) return
+    const handleClick = (e: MouseEvent) => {
+      if (importMenuRef.current && !importMenuRef.current.contains(e.target as Node)) {
+        setImportMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [importMenuOpen])
+
   const loadDiagrams = useCallback(async () => {
     try {
       const params: Record<string, string> = {}
@@ -171,13 +184,41 @@ export default function NetworkDiagramsPage() {
           <p className="mt-1 text-sm text-muted-foreground">Visual network topology documentation for your clients</p>
         </div>
         <div className="flex gap-2">
-          <button
-            onClick={handleImport}
-            className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"
-          >
-            <Upload size={14} />
-            Import
-          </button>
+          {/* Single "Import" dropdown replacing two separate buttons */}
+          <div className="relative" ref={importMenuRef}>
+            <button
+              onClick={() => setImportMenuOpen(prev => !prev)}
+              className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"
+            >
+              <Upload size={14} />
+              Import
+              <ChevronDown size={12} className="text-muted-foreground" />
+            </button>
+            {importMenuOpen && (
+              <div className="absolute right-0 top-full z-50 mt-1 w-44 rounded border border-default bg-card py-1 shadow-lg">
+                <button
+                  onClick={() => { setImportMenuOpen(false); handleImport() }}
+                  className="flex w-full items-center gap-2 px-3 py-2 text-xs text-primary hover:bg-elevated"
+                >
+                  <FileJson size={13} />
+                  <div className="text-left">
+                    <div>Import JSON</div>
+                    <div className="text-[10px] text-muted-foreground">ResolutionFlow format</div>
+                  </div>
+                </button>
+                <button
+                  onClick={() => { setImportMenuOpen(false); drawioListImportRef.current?.click() }}
+                  className="flex w-full items-center gap-2 px-3 py-2 text-xs text-primary hover:bg-elevated"
+                >
+                  <FileOutput size={13} />
+                  <div className="text-left">
+                    <div>Import draw.io</div>
+                    <div className="text-[10px] text-muted-foreground">.drawio or .xml file</div>
+                  </div>
+                </button>
+              </div>
+            )}
+          </div>
           <input
             ref={drawioListImportRef}
             type="file"
@@ -185,13 +226,6 @@ export default function NetworkDiagramsPage() {
             className="hidden"
             onChange={handleListDrawioImport}
           />
-          <button
-            onClick={() => drawioListImportRef.current?.click()}
-            className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"
-          >
-            <Upload size={14} />
-            Import draw.io
-          </button>
           <button
             onClick={() => navigate('/network-diagrams/new')}
             className="flex items-center gap-1.5 rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent/90"
@@ -266,16 +300,111 @@ export default function NetworkDiagramsPage() {
       )}
 
       {!loading && diagrams.length === 0 && (
-        <div className="flex flex-col items-center justify-center py-20">
-          <Network size={48} className="mb-4 text-muted-foreground" />
-          <h2 className="font-heading text-lg font-semibold text-heading">No network maps yet</h2>
-          <p className="mt-1 text-sm text-muted-foreground">Create your first network diagram to get started</p>
-          <button
-            onClick={() => navigate('/network-diagrams/new')}
-            className="mt-4 rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent/90"
-          >
-            Create First Diagram
-          </button>
+        <div className="rounded-lg border border-default bg-card overflow-hidden">
+          <div className="grid md:grid-cols-[1fr_380px]">
+            {/* Left: mini topology preview */}
+            <div className="relative flex items-center justify-center bg-[#0e1016] p-8 md:p-12 min-h-[280px]">
+              {/* Dot grid background */}
+              <svg className="absolute inset-0 h-full w-full opacity-20" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                  <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
+                    <circle cx="1" cy="1" r="1" fill="#4f5666" />
+                  </pattern>
+                </defs>
+                <rect width="100%" height="100%" fill="url(#dots)" />
+              </svg>
+              {/* Static topology SVG */}
+              <svg viewBox="0 0 460 240" className="relative w-full max-w-md" xmlns="http://www.w3.org/2000/svg">
+                {/* Edges */}
+                <line x1="230" y1="48" x2="130" y2="130" stroke="#2a2e3a" strokeWidth="1.5" />
+                <line x1="230" y1="48" x2="230" y2="130" stroke="#2a2e3a" strokeWidth="1.5" />
+                <line x1="230" y1="48" x2="330" y2="130" stroke="#2a2e3a" strokeWidth="1.5" />
+                <line x1="130" y1="130" x2="80" y2="210" stroke="#2a2e3a" strokeWidth="1.5" strokeDasharray="4 3" />
+                <line x1="130" y1="130" x2="180" y2="210" stroke="#2a2e3a" strokeWidth="1.5" strokeDasharray="4 3" />
+                <line x1="330" y1="130" x2="280" y2="210" stroke="#2a2e3a" strokeWidth="1.5" strokeDasharray="4 3" />
+                <line x1="330" y1="130" x2="380" y2="210" stroke="#2a2e3a" strokeWidth="1.5" strokeDasharray="4 3" />
+                {/* Firewall node */}
+                <rect x="196" y="16" width="68" height="40" rx="6" fill="#1e2028" stroke="#3d4252" strokeWidth="1" />
+                <rect x="207" y="22" width="14" height="10" rx="2" fill="#f87171" opacity="0.9" />
+                <rect x="225" y="22" width="6" height="10" rx="1" fill="#3d4252" />
+                <rect x="235" y="22" width="20" height="10" rx="2" fill="#3d4252" />
+                <text x="230" y="46" textAnchor="middle" fill="#848b9b" fontSize="9" fontFamily="monospace">Firewall</text>
+                {/* Switch node */}
+                <rect x="96" y="108" width="68" height="40" rx="6" fill="#1e2028" stroke="#3d4252" strokeWidth="1" />
+                <circle cx="112" cy="124" r="4" fill="#34d399" opacity="0.9" />
+                <circle cx="122" cy="124" r="4" fill="#34d399" opacity="0.9" />
+                <circle cx="132" cy="124" r="4" fill="#fbbf24" opacity="0.8" />
+                <circle cx="142" cy="124" r="4" fill="#34d399" opacity="0.9" />
+                <text x="130" y="140" textAnchor="middle" fill="#848b9b" fontSize="9" fontFamily="monospace">Core Switch</text>
+                {/* Router node */}
+                <rect x="196" y="108" width="68" height="40" rx="6" fill="#1e2028" stroke="#60a5fa" strokeWidth="1" />
+                <circle cx="230" cy="124" r="10" fill="none" stroke="#60a5fa" strokeWidth="1.5" opacity="0.7" />
+                <circle cx="230" cy="124" r="5" fill="none" stroke="#60a5fa" strokeWidth="1" opacity="0.5" />
+                <line x1="220" y1="124" x2="240" y2="124" stroke="#60a5fa" strokeWidth="1" opacity="0.6" />
+                <text x="230" y="140" textAnchor="middle" fill="#93c5fd" fontSize="9" fontFamily="monospace">Router</text>
+                {/* Server farm */}
+                <rect x="296" y="108" width="68" height="40" rx="6" fill="#1e2028" stroke="#3d4252" strokeWidth="1" />
+                <rect x="308" y="116" width="44" height="7" rx="2" fill="#2a2e3a" />
+                <rect x="308" y="127" width="44" height="7" rx="2" fill="#2a2e3a" />
+                <circle cx="345" cy="119.5" r="2" fill="#34d399" opacity="0.9" />
+                <circle cx="345" cy="130.5" r="2" fill="#34d399" opacity="0.9" />
+                <text x="330" y="140" textAnchor="middle" fill="#848b9b" fontSize="9" fontFamily="monospace">Servers</text>
+                {/* Leaf nodes */}
+                <rect x="46" y="190" width="52" height="34" rx="5" fill="#1e2028" stroke="#2a2e3a" strokeWidth="1" />
+                <text x="72" y="211" textAnchor="middle" fill="#4f5666" fontSize="8" fontFamily="monospace">PC × 12</text>
+                <rect x="154" y="190" width="52" height="34" rx="5" fill="#1e2028" stroke="#2a2e3a" strokeWidth="1" />
+                <text x="180" y="211" textAnchor="middle" fill="#4f5666" fontSize="8" fontFamily="monospace">AP × 4</text>
+                <rect x="254" y="190" width="52" height="34" rx="5" fill="#1e2028" stroke="#2a2e3a" strokeWidth="1" />
+                <text x="280" y="211" textAnchor="middle" fill="#4f5666" fontSize="8" fontFamily="monospace">NAS</text>
+                <rect x="354" y="190" width="52" height="34" rx="5" fill="#1e2028" stroke="#2a2e3a" strokeWidth="1" />
+                <text x="380" y="211" textAnchor="middle" fill="#4f5666" fontSize="8" fontFamily="monospace">VM × 6</text>
+              </svg>
+            </div>
+
+            {/* Right: value prop + CTA */}
+            <div className="flex flex-col justify-center border-l border-default p-8">
+              <div className="mb-1 flex items-center gap-2">
+                <Network size={14} className="text-accent" />
+                <span className="text-[11px] font-semibold uppercase tracking-wider text-accent">Network Maps</span>
+              </div>
+              <h2 className="font-heading text-xl font-bold text-heading leading-snug">
+                Document every client's infrastructure — once
+              </h2>
+              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                Drag-and-drop topology diagrams that live next to your tickets. Generate a first draft from a plain-text description, then keep it up to date as networks change.
+              </p>
+              <ul className="mt-4 space-y-2 text-xs text-muted-foreground">
+                <li className="flex items-center gap-2">
+                  <div className="h-1.5 w-1.5 rounded-full bg-accent" />
+                  AI topology generation from natural language
+                </li>
+                <li className="flex items-center gap-2">
+                  <div className="h-1.5 w-1.5 rounded-full bg-accent" />
+                  Export to PNG, SVG, PDF, or draw.io
+                </li>
+                <li className="flex items-center gap-2">
+                  <div className="h-1.5 w-1.5 rounded-full bg-accent" />
+                  Shared across your whole team instantly
+                </li>
+              </ul>
+              <div className="mt-6 flex flex-col gap-2 sm:flex-row sm:items-center">
+                <button
+                  onClick={() => navigate('/network-diagrams/new')}
+                  className="flex items-center justify-center gap-1.5 rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent/90"
+                >
+                  <Plus size={14} />
+                  Create Network Map
+                </button>
+                <button
+                  onClick={() => { setImportMenuOpen(true) }}
+                  className="flex items-center justify-center gap-1.5 rounded border border-default px-4 py-2 text-sm text-primary hover:border-hover"
+                >
+                  <Upload size={14} />
+                  Import existing
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       )}