Add Service Mapper context menus, node edit modal, and edge type toggle

- Right-click on canvas → add any node type at cursor position
- Right-click on node → edit, duplicate, or delete
- Right-click on edge → toggle animation, set edge type (bezier/smooth/step/straight), delete
- Double-click a node → NodeEditModal (label, accent color, rack module link)
- ContextMenu component: viewport-clamped, closes on outside click or Escape
- All actions persist to API; React Flow state updated optimistically

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

client/src/components/mapper/ContextMenu.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+interface MenuItem {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  variant?: 'default' | 'danger';
+  checked?: boolean;
+  separator?: false;
+}
+
+interface SeparatorItem {
+  separator: true;
+}
+
+export type ContextMenuEntry = MenuItem | SeparatorItem;
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  items: ContextMenuEntry[];
+  onClose: () => void;
+}
+
+export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  // Clamp so menu doesn't overflow right/bottom edge
+  const menuWidth = 192;
+  const menuHeight = items.length * 34;
+  const clampedX = Math.min(x, window.innerWidth - menuWidth - 8);
+  const clampedY = Math.min(y, window.innerHeight - menuHeight - 8);
+
+  return (
+    <div
+      ref={menuRef}
+      style={{ top: clampedY, left: clampedX, zIndex: 9999 }}
+      className="fixed min-w-[192px] bg-slate-800 border border-slate-600 rounded-lg shadow-2xl py-1 text-sm"
+    >
+      {items.map((item, i) => {
+        if ('separator' in item && item.separator) {
+          return <div key={i} className="my-1 border-t border-slate-700" />;
+        }
+        const mi = item as MenuItem;
+        return (
+          <button
+            key={i}
+            className={`w-full text-left flex items-center gap-2 px-3 py-1.5 transition-colors hover:bg-slate-700 ${
+              mi.variant === 'danger'
+                ? 'text-red-400 hover:text-red-300'
+                : 'text-slate-200'
+            }`}
+            onClick={() => {
+              mi.onClick();
+              onClose();
+            }}
+          >
+            {mi.icon && <span className="shrink-0 w-4 text-slate-400">{mi.icon}</span>}
+            <span className="flex-1">{mi.label}</span>
+            {mi.checked !== undefined && (
+              <span className={`text-xs ${mi.checked ? 'text-blue-400' : 'text-slate-600'}`}>
+                {mi.checked ? '✓' : ''}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

client/src/components/mapper/NodeEditModal.tsx

@@ -0,0 +1,153 @@
+import { useState, useEffect, type FormEvent } from 'react';
+import { toast } from 'sonner';
+import { Modal } from '../ui/Modal';
+import { Button } from '../ui/Button';
+import { apiClient } from '../../api/client';
+import { useRackStore } from '../../store/useRackStore';
+
+const COLOR_SWATCHES = [
+  '#3b82f6', // blue
+  '#10b981', // emerald
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#84cc16', // lime
+  '#f97316', // orange
+  '#6b7280', // gray
+];
+
+export interface NodeEditModalProps {
+  open: boolean;
+  onClose: () => void;
+  nodeId: string;
+  initialLabel: string;
+  initialColor?: string;
+  initialModuleId?: string | null;
+  onSaved: (updated: { label: string; color: string; moduleId: string | null }) => void;
+}
+
+export function NodeEditModal({
+  open,
+  onClose,
+  nodeId,
+  initialLabel,
+  initialColor,
+  initialModuleId,
+  onSaved,
+}: NodeEditModalProps) {
+  const { racks } = useRackStore();
+  const [label, setLabel] = useState(initialLabel);
+  const [color, setColor] = useState(initialColor ?? '#3b82f6');
+  const [moduleId, setModuleId] = useState<string>(initialModuleId ?? '');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setLabel(initialLabel);
+      setColor(initialColor ?? '#3b82f6');
+      setModuleId(initialModuleId ?? '');
+    }
+  }, [open, initialLabel, initialColor, initialModuleId]);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!label.trim()) return;
+    setLoading(true);
+    try {
+      await apiClient.nodes.update(nodeId, {
+        label: label.trim(),
+        color,
+        moduleId: moduleId || null,
+      });
+      onSaved({ label: label.trim(), color, moduleId: moduleId || null });
+      toast.success('Node updated');
+      onClose();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // All modules across all racks, flat list
+  const allModules = racks.flatMap((r) =>
+    r.modules.map((m) => ({ id: m.id, label: `[${r.name}] ${m.name}` }))
+  );
+
+  return (
+    <Modal open={open} onClose={onClose} title="Edit Node" size="sm">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Label */}
+        <div className="space-y-1">
+          <label className="block text-sm text-slate-300">Label</label>
+          <input
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            disabled={loading}
+            placeholder="Node label"
+            autoFocus
+            className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+          />
+        </div>
+
+        {/* Color */}
+        <div className="space-y-1">
+          <label className="block text-sm text-slate-300">Accent color</label>
+          <div className="flex flex-wrap items-center gap-2">
+            {COLOR_SWATCHES.map((c) => (
+              <button
+                key={c}
+                type="button"
+                onClick={() => setColor(c)}
+                className={`w-6 h-6 rounded-full border-2 transition-transform ${
+                  color === c
+                    ? 'border-white scale-125'
+                    : 'border-transparent hover:border-slate-400'
+                }`}
+                style={{ backgroundColor: c }}
+                aria-label={`Color ${c}`}
+              />
+            ))}
+            <input
+              type="color"
+              value={color}
+              onChange={(e) => setColor(e.target.value)}
+              className="w-7 h-7 rounded cursor-pointer bg-transparent border border-slate-600 p-0"
+              title="Custom color"
+            />
+            <span className="text-xs text-slate-500 font-mono">{color}</span>
+          </div>
+        </div>
+
+        {/* Module link */}
+        <div className="space-y-1">
+          <label className="block text-sm text-slate-300">Link to rack module</label>
+          <select
+            value={moduleId}
+            onChange={(e) => setModuleId(e.target.value)}
+            disabled={loading}
+            className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+          >
+            <option value="">— None —</option>
+            {allModules.map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex justify-end gap-3 pt-1">
+          <Button variant="secondary" size="sm" type="button" onClick={onClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button size="sm" type="submit" loading={loading} disabled={!label.trim()}>
+            Save
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

client/src/components/mapper/ServiceMapper.tsx

@@ -9,9 +9,10 @@
  * ✅ Edge creation by connecting handles
  * ✅ Minimap, controls, dot background
  * ✅ PNG export
- * ⚠️  Right-click context menus (canvas + node + edge) — TODO
- * ⚠️  Node edit modal (label, color, link to module) — TODO
- * ⚠️  Edge type/animation toggle — TODO
+ * ✅ Node/edge delete persisted to DB (Delete key)
+ * ✅ Right-click context menus (canvas + node + edge)
+ * ✅ Node edit modal (label, color, link to module) — double-click or context menu
+ * ✅ Edge type/animation toggle via context menu
  * ⚠️  Multi-select operations — functional but no toolbar actions
  */
 import { useEffect, useRef, useCallback, useState } from 'react';
@@ -23,6 +24,7 @@ import {
   addEdge,
   useNodesState,
   useEdgesState,
+  useReactFlow,
   type Node,
   type Edge,
   type OnConnect,
@@ -33,6 +35,7 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { toast } from 'sonner';
+import { Edit2, Copy, Trash2, Zap, ZapOff, ArrowRight, Plus } from 'lucide-react';
 
 import { DeviceNode } from './nodes/DeviceNode';
 import { ServiceNode as ServiceNodeComponent } from './nodes/ServiceNode';
@@ -46,9 +49,11 @@ import { UserNode } from './nodes/UserNode';
 import { NoteNode } from './nodes/NoteNode';
 
 import { MapToolbar } from './MapToolbar';
+import { ContextMenu, type ContextMenuEntry } from './ContextMenu';
+import { NodeEditModal } from './NodeEditModal';
 import { useMapStore } from '../../store/useMapStore';
 import { apiClient } from '../../api/client';
-import type { ServiceMap } from '../../types';
+import type { ServiceMap, NodeType } from '../../types';
 
 const NODE_TYPES = {
   DEVICE: DeviceNode,
@@ -63,6 +68,27 @@ const NODE_TYPES = {
   NOTE: NoteNode,
 };
 
+const ADD_NODE_OPTIONS: { type: NodeType; label: string }[] = [
+  { type: 'DEVICE', label: 'Device' },
+  { type: 'SERVICE', label: 'Service' },
+  { type: 'DATABASE', label: 'Database' },
+  { type: 'API', label: 'API' },
+  { type: 'EXTERNAL', label: 'External' },
+  { type: 'USER', label: 'User' },
+  { type: 'VLAN', label: 'VLAN' },
+  { type: 'FIREWALL', label: 'Firewall' },
+  { type: 'LOAD_BALANCER', label: 'Load Balancer' },
+  { type: 'NOTE', label: 'Note' },
+];
+
+const EDGE_TYPES_CYCLE = ['default', 'smoothstep', 'step', 'straight'] as const;
+const EDGE_TYPE_LABELS: Record<string, string> = {
+  default: 'Default (bezier)',
+  smoothstep: 'Smooth step',
+  step: 'Step',
+  straight: 'Straight',
+};
+
 function toFlowNodes(map: ServiceMap): Node[] {
   return map.nodes.map((n) => ({
     id: n.id,
@@ -89,12 +115,39 @@ function toFlowEdges(map: ServiceMap): Edge[] {
   }));
 }
 
+// ---- Context menu state ----
+
+type CtxMenu =
+  | { kind: 'canvas'; x: number; y: number; flowX: number; flowY: number }
+  | {
+      kind: 'node';
+      x: number;
+      y: number;
+      nodeId: string;
+      label: string;
+      color?: string;
+      moduleId?: string | null;
+    }
+  | { kind: 'edge'; x: number; y: number; edgeId: string; animated: boolean; edgeType: string }
+  | null;
+
+type NodeEditState = {
+  nodeId: string;
+  label: string;
+  color?: string;
+  moduleId?: string | null;
+} | null;
+
 function ServiceMapperInner() {
   const { maps, activeMap, fetchMaps, loadMap, createMap, setActiveMap } = useMapStore();
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const flowContainerRef = useRef<HTMLDivElement>(null);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { screenToFlowPosition } = useReactFlow();
+
+  const [ctxMenu, setCtxMenu] = useState<CtxMenu>(null);
+  const [nodeEditState, setNodeEditState] = useState<NodeEditState>(null);
 
   // Load maps list on mount
   useEffect(() => {
@@ -144,6 +197,28 @@ function ServiceMapperInner() {
     [onNodesChange]
   );
 
+  // Persist node deletions
+  const handleNodesDelete = useCallback(async (deleted: Node[]) => {
+    for (const node of deleted) {
+      try {
+        await apiClient.nodes.delete(node.id);
+      } catch {
+        toast.error(`Failed to delete node "${(node.data as { label?: string }).label ?? node.id}"`);
+      }
+    }
+  }, []);
+
+  // Persist edge deletions
+  const handleEdgesDelete = useCallback(async (deleted: Edge[]) => {
+    for (const edge of deleted) {
+      try {
+        await apiClient.edges.delete(edge.id);
+      } catch {
+        toast.error('Failed to delete connection');
+      }
+    }
+  }, []);
+
   const handleEdgesChange = useCallback(
     (changes: EdgeChange<Edge>[]) => {
       onEdgesChange(changes);
@@ -178,6 +253,252 @@ function ServiceMapperInner() {
     [activeMap, setEdges]
   );
 
+  // ---- Context menu handlers ----
+
+  const onPaneContextMenu = useCallback(
+    (event: MouseEvent | React.MouseEvent) => {
+      event.preventDefault();
+      if (!activeMap) return;
+      const flowPos = screenToFlowPosition({ x: event.clientX, y: event.clientY });
+      setCtxMenu({ kind: 'canvas', x: event.clientX, y: event.clientY, flowX: flowPos.x, flowY: flowPos.y });
+    },
+    [activeMap, screenToFlowPosition]
+  );
+
+  const onNodeContextMenu = useCallback((event: React.MouseEvent, node: Node) => {
+    event.preventDefault();
+    const d = node.data as { label?: string; color?: string; module?: { id: string } };
+    setCtxMenu({
+      kind: 'node',
+      x: event.clientX,
+      y: event.clientY,
+      nodeId: node.id,
+      label: d.label ?? '',
+      color: d.color,
+      moduleId: d.module?.id ?? null,
+    });
+  }, []);
+
+  const onEdgeContextMenu = useCallback((event: React.MouseEvent, edge: Edge) => {
+    event.preventDefault();
+    setCtxMenu({
+      kind: 'edge',
+      x: event.clientX,
+      y: event.clientY,
+      edgeId: edge.id,
+      animated: edge.animated ?? false,
+      edgeType: edge.type ?? 'default',
+    });
+  }, []);
+
+  const onNodeDoubleClick = useCallback((_event: React.MouseEvent, node: Node) => {
+    const d = node.data as { label?: string; color?: string; module?: { id: string } };
+    setNodeEditState({
+      nodeId: node.id,
+      label: d.label ?? '',
+      color: d.color,
+      moduleId: d.module?.id ?? null,
+    });
+  }, []);
+
+  // ---- Canvas context menu: add node ----
+
+  async function handleAddNode(nodeType: NodeType, flowX: number, flowY: number) {
+    if (!activeMap) return;
+    try {
+      const created = await apiClient.maps.addNode(activeMap.id, {
+        label: nodeType.charAt(0) + nodeType.slice(1).toLowerCase().replace(/_/g, ' '),
+        nodeType,
+        positionX: flowX,
+        positionY: flowY,
+      });
+      setNodes((nds) => [
+        ...nds,
+        {
+          id: created.id,
+          type: created.nodeType,
+          position: { x: created.positionX, y: created.positionY },
+          data: {
+            label: created.label,
+            color: created.color,
+            icon: created.icon,
+            metadata: created.metadata,
+            module: created.module,
+          },
+        },
+      ]);
+    } catch {
+      toast.error('Failed to add node');
+    }
+  }
+
+  // ---- Node context menu: duplicate ----
+
+  async function handleDuplicateNode(nodeId: string) {
+    if (!activeMap) return;
+    const source = nodes.find((n) => n.id === nodeId);
+    if (!source) return;
+    const d = source.data as { label?: string; color?: string; module?: { id: string } };
+    try {
+      const created = await apiClient.maps.addNode(activeMap.id, {
+        label: `${d.label ?? 'Node'} copy`,
+        nodeType: (source.type ?? 'SERVICE') as NodeType,
+        positionX: source.position.x + 40,
+        positionY: source.position.y + 40,
+        color: d.color,
+        moduleId: d.module?.id,
+      });
+      setNodes((nds) => [
+        ...nds,
+        {
+          id: created.id,
+          type: created.nodeType,
+          position: { x: created.positionX, y: created.positionY },
+          data: {
+            label: created.label,
+            color: created.color,
+            icon: created.icon,
+            metadata: created.metadata,
+            module: created.module,
+          },
+        },
+      ]);
+      toast.success('Node duplicated');
+    } catch {
+      toast.error('Failed to duplicate node');
+    }
+  }
+
+  // ---- Node context menu: delete ----
+
+  async function handleDeleteNode(nodeId: string) {
+    try {
+      await apiClient.nodes.delete(nodeId);
+      setNodes((nds) => nds.filter((n) => n.id !== nodeId));
+    } catch {
+      toast.error('Failed to delete node');
+    }
+  }
+
+  // ---- Edge context menu: toggle animation ----
+
+  async function handleToggleEdgeAnimation(edgeId: string, currentAnimated: boolean) {
+    const newAnimated = !currentAnimated;
+    try {
+      await apiClient.edges.update(edgeId, { animated: newAnimated });
+      setEdges((eds) =>
+        eds.map((e) => (e.id === edgeId ? { ...e, animated: newAnimated } : e))
+      );
+    } catch {
+      toast.error('Failed to update edge');
+    }
+  }
+
+  // ---- Edge context menu: change type ----
+
+  async function handleSetEdgeType(edgeId: string, edgeType: string) {
+    try {
+      await apiClient.edges.update(edgeId, { edgeType });
+      setEdges((eds) =>
+        eds.map((e) => (e.id === edgeId ? { ...e, type: edgeType } : e))
+      );
+    } catch {
+      toast.error('Failed to update edge');
+    }
+  }
+
+  // ---- Edge context menu: delete ----
+
+  async function handleDeleteEdge(edgeId: string) {
+    try {
+      await apiClient.edges.delete(edgeId);
+      setEdges((eds) => eds.filter((e) => e.id !== edgeId));
+    } catch {
+      toast.error('Failed to delete connection');
+    }
+  }
+
+  // ---- Node edit modal save ----
+
+  function handleNodeEditSaved(updated: { label: string; color: string; moduleId: string | null }) {
+    if (!nodeEditState) return;
+    setNodes((nds) =>
+      nds.map((n) =>
+        n.id === nodeEditState.nodeId
+          ? { ...n, data: { ...n.data, label: updated.label, color: updated.color } }
+          : n
+      )
+    );
+  }
+
+  // ---- Build context menu items ----
+
+  function buildContextMenuItems(): ContextMenuEntry[] {
+    if (!ctxMenu) return [];
+
+    if (ctxMenu.kind === 'canvas') {
+      const { flowX, flowY } = ctxMenu;
+      return ADD_NODE_OPTIONS.map((opt) => ({
+        label: `Add ${opt.label}`,
+        icon: <Plus size={12} />,
+        onClick: () => handleAddNode(opt.type, flowX, flowY),
+      }));
+    }
+
+    if (ctxMenu.kind === 'node') {
+      const { nodeId, label, color, moduleId } = ctxMenu;
+      return [
+        {
+          label: 'Edit node',
+          icon: <Edit2 size={12} />,
+          onClick: () => setNodeEditState({ nodeId, label, color, moduleId }),
+        },
+        {
+          label: 'Duplicate',
+          icon: <Copy size={12} />,
+          onClick: () => handleDuplicateNode(nodeId),
+        },
+        { separator: true as const },
+        {
+          label: 'Delete node',
+          icon: <Trash2 size={12} />,
+          variant: 'danger' as const,
+          onClick: () => handleDeleteNode(nodeId),
+        },
+      ];
+    }
+
+    if (ctxMenu.kind === 'edge') {
+      const { edgeId, animated, edgeType } = ctxMenu;
+      const typeItems: ContextMenuEntry[] = EDGE_TYPES_CYCLE.map((t) => ({
+        label: EDGE_TYPE_LABELS[t],
+        icon: <ArrowRight size={12} />,
+        checked: edgeType === t,
+        onClick: () => handleSetEdgeType(edgeId, t),
+      }));
+      return [
+        {
+          label: animated ? 'Stop animation' : 'Animate edge',
+          icon: animated ? <ZapOff size={12} /> : <Zap size={12} />,
+          onClick: () => handleToggleEdgeAnimation(edgeId, animated),
+        },
+        { separator: true as const },
+        ...typeItems,
+        { separator: true as const },
+        {
+          label: 'Delete connection',
+          icon: <Trash2 size={12} />,
+          variant: 'danger' as const,
+          onClick: () => handleDeleteEdge(edgeId),
+        },
+      ];
+    }
+
+    return [];
+  }
+
+  // ---- Map management ----
+
   async function handleSelectMap(id: string) {
     try {
       await loadMap(id);
@@ -236,6 +557,13 @@ function ServiceMapperInner() {
             onNodesChange={handleNodesChange}
             onEdgesChange={handleEdgesChange}
             onConnect={onConnect}
+            onNodesDelete={handleNodesDelete}
+            onEdgesDelete={handleEdgesDelete}
+            onPaneContextMenu={onPaneContextMenu}
+            onNodeContextMenu={onNodeContextMenu}
+            onEdgeContextMenu={onEdgeContextMenu}
+            onNodeDoubleClick={onNodeDoubleClick}
+            onPaneClick={() => setCtxMenu(null)}
             snapToGrid
             snapGrid={[15, 15]}
             fitView
@@ -257,6 +585,29 @@ function ServiceMapperInner() {
           </ReactFlow>
         )}
       </div>
+
+      {/* Context menu portal */}
+      {ctxMenu && (
+        <ContextMenu
+          x={ctxMenu.x}
+          y={ctxMenu.y}
+          items={buildContextMenuItems()}
+          onClose={() => setCtxMenu(null)}
+        />
+      )}
+
+      {/* Node edit modal */}
+      {nodeEditState && (
+        <NodeEditModal
+          open={true}
+          onClose={() => setNodeEditState(null)}
+          nodeId={nodeEditState.nodeId}
+          initialLabel={nodeEditState.label}
+          initialColor={nodeEditState.color}
+          initialModuleId={nodeEditState.moduleId}
+          onSaved={handleNodeEditSaved}
+        />
+      )}
     </div>
   );
 }