fix(network-maps): address design critique — harden, normalize, clarify, polish

- Archive: two-step inline confirm in card dropdown menu
- Delete Device/Edge: two-step inline confirm in PropertiesPanel footer
- Context menu Delete: floating confirm bar instead of immediate deletion
- AI Generate New: two-step confirm when replacing existing diagram nodes
- DiagramHeader: show 'Unsaved changes' in amber when isDirty and not saving
- deviceRegistry: SECURITY_COLOR #f97316 → #f87171 (deprecated ember orange removed)
- CanvasEmptyPrompt: remove backdrop-blur (design system violation)
- CanvasEmptyPrompt: remove redundant 'Skip AI' bottom button (duplicate of Build manually card)
- CanvasEmptyPrompt: rounded-xl/rounded-2xl → rounded-lg, border-2 → border
- Topology bar: h-1 → h-2 + native tooltip with category breakdown
- AIAssistPanel: replace pulse-dot loading with spinner (consistent with rest of feature)
- ContextMenu: add shadow-lg (consistent with other dropdowns)
- DeviceNode tooltip: Position.Bottom → Position.Top (avoids canvas-edge clipping)
- CanvasEmptyPrompt: raise ⌘↵ hint from /50 opacity to full text-muted-foreground

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

frontend/src/components/network/CanvasEmptyPrompt.tsx

@@ -63,7 +63,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
   if (mode === 'manual') {
     return (
       <div className="pointer-events-none absolute inset-x-0 bottom-6 z-10 flex justify-center px-6">
-        <div className="pointer-events-auto flex max-w-xl items-center gap-3 rounded-2xl border border-default bg-card/95 px-4 py-3 shadow-xl backdrop-blur">
+        <div className="pointer-events-auto flex max-w-xl items-center gap-3 rounded-lg border border-default bg-card px-4 py-3 shadow-xl">
           <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent/10 text-accent">
             <PencilRuler size={14} />
           </div>
@@ -94,7 +94,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
         }
       }}
     >
-      <div className="pointer-events-auto relative w-full max-w-lg rounded-xl border border-default bg-card p-8 shadow-2xl">
+      <div className="pointer-events-auto relative w-full max-w-lg rounded-lg border border-default bg-card p-8 shadow-2xl">
         <button
           onClick={switchToManual}
           disabled={loading}
@@ -123,7 +123,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
             <div className="grid gap-3 sm:grid-cols-2">
               <button
                 onClick={() => setMode('ai')}
-                className="rounded-xl border border-accent/40 bg-accent/10 p-4 text-left transition-colors hover:border-accent hover:bg-accent/15"
+                className="rounded-lg border border-accent/40 bg-accent/10 p-4 text-left transition-colors hover:border-accent hover:bg-accent/15"
               >
                 <div className="mb-3 inline-flex rounded-lg bg-accent/15 p-2 text-accent">
                   <Sparkles size={16} />
@@ -136,7 +136,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
 
               <button
                 onClick={switchToManual}
-                className="rounded-xl border-2 border-primary/20 bg-elevated/40 p-4 text-left transition-colors hover:border-accent hover:bg-elevated/60"
+                className="rounded-lg border border-default bg-elevated/40 p-4 text-left transition-colors hover:border-accent hover:bg-elevated/60"
               >
                 <div className="mb-3 inline-flex rounded-lg bg-primary/10 p-2 text-primary">
                   <PencilRuler size={16} />
@@ -148,13 +148,6 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
               </button>
             </div>
 
-            <button
-              onClick={switchToManual}
-              className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg border border-default px-4 py-3 text-sm font-medium text-primary hover:border-accent hover:text-accent"
-            >
-              <PencilRuler size={14} />
-              Skip AI and start dragging devices
-            </button>
           </>
         ) : (
           <>
@@ -186,7 +179,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
                 autoFocus
                 className="w-full resize-none rounded-lg border border-default bg-input px-4 py-3 pb-7 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none disabled:opacity-50"
               />
-              <span className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-foreground/50">
+              <span className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-foreground">
                 ⌘↵ to generate
               </span>
             </div>

frontend/src/components/network/ContextMenu.tsx

@@ -55,7 +55,7 @@ export function ContextMenu({ position, actions, onClose }: ContextMenuProps) {
   return (
     <div
       ref={menuRef}
-      className="fixed z-50 w-48 rounded-lg border border-default bg-card py-1"
+      className="fixed z-50 w-48 rounded-lg border border-default bg-card py-1 shadow-lg"
       style={{ left: clampedPosition.x, top: clampedPosition.y }}
     >
       {actions.map((action) => (

frontend/src/components/network/DiagramHeader.tsx

@@ -5,6 +5,7 @@ import { ChevronLeft, Save, Download, FileJson, Image, FileText } from 'lucide-r
 interface DiagramHeaderProps {
   name: string
   clientName: string | null
+  isDirty: boolean
   isSaving: boolean
   lastSavedAt: Date | null
   diagramId: string | null
@@ -18,6 +19,7 @@ interface DiagramHeaderProps {
 export function DiagramHeader({
   name,
   clientName,
+  isDirty,
   isSaving,
   lastSavedAt,
   diagramId,
@@ -111,9 +113,11 @@ export function DiagramHeader({
 
       <div className="flex-1" />
 
-      {lastSavedAt && (
+      {isDirty && !isSaving ? (
+        <span className="text-[10px] text-amber-400">Unsaved changes</span>
+      ) : lastSavedAt ? (
         <span className="text-[10px] text-muted-foreground">{formatLastSaved()}</span>
-      )}
+      ) : null}
 
       <button
         onClick={onSave}

frontend/src/components/network/nodes/DeviceNode.tsx

@@ -57,7 +57,7 @@ function DeviceNodeComponent({ data }: NodeProps) {
           </BaseNode>
         </NodeTooltipTrigger>
         {hasTooltipContent && (
-          <NodeTooltipContent position={Position.Bottom}>
+          <NodeTooltipContent position={Position.Top}>
             <div className="flex flex-col gap-1 min-w-[140px]">
               <TooltipRow label="Host" value={props.hostname} />
               <TooltipRow label="IP" value={props.ip} />

frontend/src/components/network/nodes/deviceRegistry.ts

@@ -20,7 +20,7 @@ export interface DeviceRenderConfig {
 // Cloud    (cyan)   — external/internet-connected
 // Infra    (steel)  — physical/passive hardware
 export const NETWORK_COLOR  = '#60a5fa'
-export const SECURITY_COLOR = '#f97316'
+export const SECURITY_COLOR = '#f87171'
 export const COMPUTE_COLOR  = '#34d399'
 export const ENDPOINT_COLOR = '#fbbf24'
 export const STORAGE_COLOR  = '#a78bfa'

frontend/src/components/network/panels/AIAssistPanel.tsx

@@ -16,11 +16,13 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
   const [mode, setMode] = useState<'replace' | 'merge'>('replace')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [replaceConfirm, setReplaceConfirm] = useState(false)
 
   const handleGenerate = useCallback(async () => {
     if (!description.trim()) return
     setLoading(true)
     setError(null)
+    setReplaceConfirm(false)
     try {
       const result = await networkDiagramsApi.aiGenerate({
         description: description.trim(),
@@ -38,6 +40,14 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
     }
   }, [description, mode, onGenerate, getExistingBounds])
 
+  // Reset confirm state when mode changes or panel collapses
+  const handleModeChange = (newMode: 'replace' | 'merge') => {
+    setMode(newMode)
+    setReplaceConfirm(false)
+  }
+
+  const needsReplaceConfirm = mode === 'replace' && hasNodes
+
   if (!expanded) {
     return (
       <div className="border-t border-default bg-card">
@@ -60,7 +70,10 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
           <Sparkles size={14} />
           AI Generate
         </div>
-        <button onClick={() => setExpanded(false)} className="text-muted-foreground hover:text-primary">
+        <button
+          onClick={() => { setExpanded(false); setReplaceConfirm(false) }}
+          className="text-muted-foreground hover:text-primary"
+        >
           <ChevronDown size={14} />
         </button>
       </div>
@@ -68,7 +81,7 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
       <div className="flex flex-col gap-3 p-4">
         <div className="flex gap-2">
           <button
-            onClick={() => setMode('replace')}
+            onClick={() => handleModeChange('replace')}
             className={cn(
               'rounded px-3 py-1 text-xs font-medium transition-colors',
               mode === 'replace'
@@ -79,7 +92,7 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
             Generate New
           </button>
           <button
-            onClick={() => setMode('merge')}
+            onClick={() => handleModeChange('merge')}
             className={cn(
               'rounded px-3 py-1 text-xs font-medium transition-colors',
               mode === 'merge'
@@ -91,7 +104,7 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
           </button>
         </div>
 
-        {mode === 'replace' && hasNodes && (
+        {needsReplaceConfirm && (
           <div className="flex items-start gap-2 rounded border border-yellow-500/30 bg-yellow-500/5 px-3 py-2">
             <AlertTriangle size={14} className="mt-0.5 shrink-0 text-yellow-400" />
             <p className="text-[11px] text-yellow-400">
@@ -113,8 +126,32 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
 
         {loading ? (
           <div className="flex items-center justify-center gap-2 py-2">
-            <div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent" />
-            <span className="text-xs text-muted-foreground">Generating your network diagram...</span>
+            <span className="text-xs text-muted-foreground">Generating your network diagram…</span>
+          </div>
+        ) : needsReplaceConfirm && !replaceConfirm ? (
+          <button
+            onClick={() => setReplaceConfirm(true)}
+            disabled={!description.trim()}
+            className="rounded border border-yellow-500/40 bg-yellow-500/10 px-4 py-2 text-xs font-medium text-yellow-400 hover:bg-yellow-500/20 disabled:opacity-50"
+          >
+            Replace Diagram…
+          </button>
+        ) : needsReplaceConfirm && replaceConfirm ? (
+          <div className="flex gap-2">
+            <button
+              onClick={() => setReplaceConfirm(false)}
+              className="flex-1 rounded border border-default px-3 py-2 text-xs text-primary hover:bg-elevated"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleGenerate}
+              disabled={!description.trim()}
+              className="flex-1 rounded bg-red-500/20 px-3 py-2 text-xs font-medium text-red-400 hover:bg-red-500/30 disabled:opacity-50"
+            >
+              Yes, Replace
+            </button>
           </div>
         ) : (
           <button

frontend/src/components/network/panels/PropertiesPanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useState, useEffect } from 'react'
 import { Trash2, Minus, Spline, GitBranch } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { DeviceProperties, DiagramEdge } from '@/types'
@@ -75,6 +75,11 @@ export function PropertiesPanel({
   onDeleteNode,
   onDeleteEdge,
 }: PropertiesPanelProps) {
+  const [deleteConfirm, setDeleteConfirm] = useState(false)
+
+  // Reset confirm state whenever the selection changes
+  useEffect(() => { setDeleteConfirm(false) }, [selectedNode?.id, selectedEdge?.id])
+
   const handlePropertyChange = useCallback((field: keyof DeviceProperties, value: string) => {
     if (!selectedNode) return
     const nodeData = selectedNode.data as unknown as DeviceNodeData
@@ -213,13 +218,33 @@ export function PropertiesPanel({
           </div>
         </div>
         <div className="border-t border-default p-3">
-          <button
+          {deleteConfirm ? (
-            onClick={() => onDeleteEdge(selectedEdge.id)}
+            <div className="flex flex-col gap-1.5">
-            className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
+              <p className="text-center text-[10px] text-muted-foreground">Delete this connection?</p>
-          >
+              <div className="flex gap-1.5">
-            <Trash2 size={12} />
+                <button
-            Delete Connection
+                  onClick={() => setDeleteConfirm(false)}
-          </button>
+                  className="flex-1 rounded border border-default px-2 py-1.5 text-xs text-primary hover:bg-elevated"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => onDeleteEdge(selectedEdge.id)}
+                  className="flex-1 rounded bg-red-500/20 px-2 py-1.5 text-xs font-medium text-red-400 hover:bg-red-500/30"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              onClick={() => setDeleteConfirm(true)}
+              className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
+            >
+              <Trash2 size={12} />
+              Delete Connection
+            </button>
+          )}
         </div>
       </div>
     )
@@ -326,13 +351,33 @@ export function PropertiesPanel({
       </div>
 
       <div className="border-t border-default p-3">
-        <button
+        {deleteConfirm ? (
-          onClick={() => onDeleteNode(selectedNode!.id)}
+          <div className="flex flex-col gap-1.5">
-          className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
+            <p className="text-center text-[10px] text-muted-foreground">Delete this device?</p>
-        >
+            <div className="flex gap-1.5">
-          <Trash2 size={12} />
+              <button
-          Delete Device
+                onClick={() => setDeleteConfirm(false)}
-        </button>
+                className="flex-1 rounded border border-default px-2 py-1.5 text-xs text-primary hover:bg-elevated"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => onDeleteNode(selectedNode!.id)}
+                className="flex-1 rounded bg-red-500/20 px-2 py-1.5 text-xs font-medium text-red-400 hover:bg-red-500/30"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            onClick={() => setDeleteConfirm(true)}
+            className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
+          >
+            <Trash2 size={12} />
+            Delete Device
+          </button>
+        )}
       </div>
     </div>
   )

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -65,6 +65,7 @@ function DiagramEditorInner() {
 
   const canvasRef = useRef<HTMLDivElement | null>(null)
   const [contextMenu, setContextMenu] = useState<ContextMenuState>(null)
+  const [pendingDeleteNodeId, setPendingDeleteNodeId] = useState<string | null>(null)
 
   useEffect(() => { isDirtyRef.current = isDirty }, [isDirty])
   useEffect(() => { diagramIdRef.current = diagramId }, [diagramId])
@@ -525,6 +526,7 @@ function DiagramEditorInner() {
       <DiagramHeader
         name={name}
         clientName={clientName}
+        isDirty={isDirty}
         isSaving={isSaving}
         lastSavedAt={lastSavedAt}
         diagramId={diagramId}
@@ -584,7 +586,12 @@ function DiagramEditorInner() {
               ? getNodeMenuActions({
                   onCopy: copyNodes,
                   onDuplicate: duplicateNodes,
-                  onDelete: deleteSelected,
+                  onDelete: () => {
+                    const nodeId = contextMenu.nodeId
+                    setContextMenu(null)
+                    if (nodeId) setPendingDeleteNodeId(nodeId)
+                    else deleteSelected()
+                  },
                 })
               : getCanvasMenuActions({
                   onPaste: pasteNodes,
@@ -596,6 +603,25 @@ function DiagramEditorInner() {
           onClose={closeContextMenu}
         />
       )}
+      {pendingDeleteNodeId && (
+        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-50 flex justify-center">
+          <div className="pointer-events-auto flex items-center gap-3 rounded-lg border border-default bg-card px-4 py-2.5 shadow-lg">
+            <span className="text-xs text-muted-foreground">Delete this device?</span>
+            <button
+              onClick={() => setPendingDeleteNodeId(null)}
+              className="rounded border border-default px-3 py-1 text-xs text-primary hover:bg-elevated"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => { handleDeleteNode(pendingDeleteNodeId); setPendingDeleteNodeId(null) }}
+              className="rounded bg-red-500/20 px-3 py-1 text-xs font-medium text-red-400 hover:bg-red-500/30"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

frontend/src/pages/NetworkDiagrams/index.tsx

@@ -12,12 +12,12 @@ const OTHER_COLOR = '#4f5666'
 function TopologyBar({ categoryCounts, nodeCount }: { categoryCounts: Record<string, number>; nodeCount: number }) {
   if (nodeCount === 0) return null
   const sorted = Object.entries(categoryCounts).sort(([, a], [, b]) => b - a)
+  const tooltipLabel = sorted.map(([cat, count]) => `${count} ${cat}`).join(' · ')
   return (
-    <div className="flex h-1 w-full overflow-hidden rounded-full">
+    <div className="group/bar relative flex h-2 w-full overflow-hidden rounded-full" title={tooltipLabel}>
       {sorted.map(([cat, count]) => (
         <div
           key={cat}
-          title={`${cat}: ${count}`}
           style={{
             width: `${(count / nodeCount) * 100}%`,
             backgroundColor: CATEGORY_COLORS[cat] ?? OTHER_COLOR,
@@ -38,6 +38,7 @@ export default function NetworkDiagramsPage() {
   const [clientDropdownOpen, setClientDropdownOpen] = useState(false)
   const [clientSearch, setClientSearch] = useState('')
   const [menuOpenId, setMenuOpenId] = useState<string | null>(null)
+  const [confirmArchiveId, setConfirmArchiveId] = useState<string | null>(null)
   const clientDropdownRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -101,6 +102,7 @@ export default function NetworkDiagramsPage() {
       toast.error('Failed to archive')
     }
     setMenuOpenId(null)
+    setConfirmArchiveId(null)
   }, [loadDiagrams])
 
   const handleImport = useCallback(async () => {
@@ -269,25 +271,47 @@ export default function NetworkDiagramsPage() {
               </div>
 
               {menuOpenId === d.id && (
-                <div className="absolute right-2 top-10 z-50 w-36 rounded border border-default bg-card py-1 shadow-lg">
+                <div className="absolute right-2 top-10 z-50 w-44 rounded border border-default bg-card py-1 shadow-lg">
-                  <button
+                  {confirmArchiveId === d.id ? (
-                    onClick={e => { e.stopPropagation(); navigate(`/network-diagrams/${d.id}`) }}
+                    <>
-                    className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
+                      <p className="px-3 py-1.5 text-[10px] text-muted-foreground">Archive this diagram?</p>
-                  >
+                      <div className="flex gap-1 px-2 pb-1.5">
-                    Open
+                        <button
-                  </button>
+                          onClick={e => { e.stopPropagation(); setConfirmArchiveId(null) }}
-                  <button
+                          className="flex-1 rounded border border-default px-2 py-1 text-[10px] text-primary hover:bg-elevated"
-                    onClick={e => { e.stopPropagation(); handleDuplicate(d.id) }}
+                        >
-                    className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
+                          Cancel
-                  >
+                        </button>
-                    Duplicate
+                        <button
-                  </button>
+                          onClick={e => { e.stopPropagation(); handleArchive(d.id) }}
-                  <button
+                          className="flex-1 rounded bg-red-500/20 px-2 py-1 text-[10px] font-medium text-red-400 hover:bg-red-500/30"
-                    onClick={e => { e.stopPropagation(); handleArchive(d.id) }}
+                        >
-                    className="w-full px-3 py-1.5 text-left text-xs text-red-400 hover:bg-elevated"
+                          Archive
-                  >
+                        </button>
-                    Archive
+                      </div>
-                  </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={e => { e.stopPropagation(); navigate(`/network-diagrams/${d.id}`) }}
+                        className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
+                      >
+                        Open
+                      </button>
+                      <button
+                        onClick={e => { e.stopPropagation(); handleDuplicate(d.id) }}
+                        className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
+                      >
+                        Duplicate
+                      </button>
+                      <button
+                        onClick={e => { e.stopPropagation(); setConfirmArchiveId(d.id) }}
+                        className="w-full px-3 py-1.5 text-left text-xs text-red-400 hover:bg-elevated"
+                      >
+                        Archive…
+                      </button>
+                    </>
+                  )}
                 </div>
               )}
             </div>