From a22846993f1c976b7a4d7b03efd21d128648ab2d Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 25 Feb 2026 19:32:46 +0000
Subject: [PATCH] feat(#5): implement single-page modal editor with live
 diagram updates

---
 src/lib/components/Modal.svelte          |   16 +-
 src/lib/components/NetworkDiagram.svelte | 3088 +++++++++++++++-------
 2 files changed, 2183 insertions(+), 921 deletions(-)

diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 187178f..fc9ce35 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -52,7 +52,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 1rem;
-		background: rgba(15, 23, 42, 0.58);
+		background: var(--modal-overlay);
 		z-index: 1000;
 	}
 
@@ -61,8 +61,8 @@
 		max-height: 90vh;
 		display: flex;
 		flex-direction: column;
-		background: #f8fafc;
-		border: 1px solid #cbd5e1;
+		background: var(--panel-bg);
+		border: 1px solid var(--panel-border);
 		border-radius: 12px;
 		box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
 	}
@@ -73,19 +73,19 @@
 		justify-content: space-between;
 		gap: 0.5rem;
 		padding: 0.9rem 1rem;
-		border-bottom: 1px solid #e2e8f0;
+		border-bottom: 1px solid var(--panel-border);
 	}
 
 	.modal-header h2 {
 		margin: 0;
 		font-size: 1.05rem;
-		color: #0f172a;
+		color: var(--panel-contrast);
 	}
 
 	.close-button {
 		border: 1px solid transparent;
 		background: transparent;
-		color: #475569;
+		color: var(--muted-text);
 		font-size: 1.7rem;
 		line-height: 1;
 		width: 2rem;
@@ -95,8 +95,8 @@
 	}
 
 	.close-button:hover {
-		background: #e2e8f0;
-		color: #0f172a;
+		background: var(--chip-bg);
+		color: var(--panel-contrast);
 	}
 
 	.modal-body {
diff --git a/src/lib/components/NetworkDiagram.svelte b/src/lib/components/NetworkDiagram.svelte
index 82bbd40..e211495 100644
--- a/src/lib/components/NetworkDiagram.svelte
+++ b/src/lib/components/NetworkDiagram.svelte
@@ -1,44 +1,100 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
 	import cytoscape from 'cytoscape';
 	import dagre from 'cytoscape-dagre';
-	import loadNetworkData from '../data/loadNetworkData';
-	import transformNetworkDataToGraph from '../graph/transformNetworkData';
+
+	import { listIconDefinitions } from '$lib/config/iconRegistry';
+	import {
+		cloneNetworkData,
+		createEmptyDevice,
+		createEmptyMachine,
+		createEmptyPort,
+		createEmptyVm,
+		deleteOwner,
+		deletePort,
+		renameOwner,
+		renamePort,
+		setPortConnection,
+		type OwnerKind,
+		withReconciledConnections
+	} from '$lib/data/networkEditor';
+	import loadNetworkData from '$lib/data/loadNetworkData';
+	import { validateNetworkData, type ValidationIssue } from '$lib/data/networkSchema';
+	import transformNetworkDataToGraph from '$lib/graph/transformNetworkData';
+	import type { GraphNodeData, GraphTransformResult } from '$lib/graph/types';
+	import { themeMode, type ThemeMode } from '$lib/stores/theme';
+	import type { NetworkData, Port } from '$lib/types';
 	import Modal from './Modal.svelte';
-	import type { NetworkData } from '../types';
-	import type {
-		GraphEdgeElement,
-		GraphNodeData,
-		GraphNodeDetails,
-		GraphNodeElement,
-		GraphTransformResult
-	} from '../graph/types';
 
 	export let jsonPath = '/data/network.json';
 
-	type CameraMode = 'readable' | 'overview';
+	type SaveState = 'saved' | 'saving' | 'unsaved' | 'error';
+	type DiagramViewMode = 'network' | 'device';
 	type Position = { x: number; y: number };
+	type AddModalKind = 'machine' | 'device' | null;
+	type DeleteTarget =
+		| { type: 'machine'; index: number }
+		| { type: 'device'; index: number }
+		| { type: 'vm'; machineIndex: number; vmIndex: number }
+		| null;
+	type SelectedTarget =
+		| { type: 'machine'; index: number }
+		| { type: 'device'; index: number }
+		| { type: 'vm'; machineIndex: number; vmIndex: number }
+		| null;
+
+	const autosaveDelayMs = 800;
 
 	let container: HTMLDivElement;
 	let diagramStage: HTMLDivElement;
 	let tooltipElement: HTMLDivElement | null = null;
 	let cy: cytoscape.Core | null = null;
-	let warnings: string[] = [];
-	let selectedDetails: GraphNodeDetails | null = null;
-	let selectedNodeId: string | null = null;
-	let cameraMode: CameraMode = 'readable';
-	let showEthernetLabels = false;
 
-	let allNodes: GraphNodeElement[] = [];
-	let allEdges: GraphEdgeElement[] = [];
-	let machineBaseLabels: Record<string, string> = {};
+	let networkData: NetworkData = {
+		machines: [],
+		devices: []
+	};
+	let warnings: string[] = [];
+	let validationIssues: ValidationIssue[] = [];
+
+	let selectedTarget: SelectedTarget = null;
+	let addModalKind: AddModalKind = null;
+	let deleteTarget: DeleteTarget = null;
+	let showExportModal = false;
+
+	let newMachineDraft = createEmptyMachine();
+	let newDeviceDraft = createEmptyDevice();
+	let iconSearch = '';
+
+	let isLoadingData = false;
+	let loadError: string | null = null;
+	let saveError: string | null = null;
+	let saveState: SaveState = 'saved';
+	let dataSourceLabel = jsonPath;
+	let writable = false;
+	let readOnlyNotice = 'Read-only deployment; changes are not persisted.';
+
+	let showEthernetLabels = false;
+	let diagramViewMode: DiagramViewMode = 'network';
 	let machineVmIndex: GraphTransformResult['machineVmIndex'] = {};
 	let collapsedHosts: Record<string, boolean> = {};
-	let hasAnyVmHosts = false;
-	let dataSourceLabel = jsonPath;
-	let loadError: string | null = null;
-	let isLoadingData = false;
+	let exportFileName = 'network-diagram';
+	let exportScale = 2;
+	let exportBackground: 'theme' | 'transparent' = 'theme';
 
+	let currentTheme: ThemeMode = 'light';
+	let unsubscribeTheme: (() => void) | null = null;
+
+	let autosaveTimer: ReturnType<typeof setTimeout> | null = null;
+	let saveInFlight = false;
+	let trailingSaveRequested = false;
+	let lastSavedSnapshot = '';
+	let hasLoadedInitialData = false;
+	let connectionDraftByKey: Record<string, { device: string; port: string }> = {};
+	let mapControlsCollapsed = false;
+
+	const iconDefinitions = listIconDefinitions();
 	let tooltip = {
 		visible: false,
 		text: '',
@@ -56,16 +112,203 @@
 	};
 	const tooltipViewportPadding = 8;
 
-	function closeDetails() {
-		selectedDetails = null;
-		selectedNodeId = null;
+	$: filteredIconDefinitions = iconDefinitions.filter((icon) => {
+		const needle = iconSearch.trim().toLowerCase();
+		if (!needle) {
+			return true;
+		}
+		return icon.label.toLowerCase().includes(needle) || icon.key.toLowerCase().includes(needle);
+	});
+
+	$: selectedMachine =
+		selectedTarget?.type === 'machine' ? networkData.machines[selectedTarget.index] : null;
+	$: selectedDevice =
+		selectedTarget?.type === 'device' ? networkData.devices[selectedTarget.index] : null;
+	$: selectedVm =
+		selectedTarget?.type === 'vm'
+			? networkData.machines[selectedTarget.machineIndex]?.software.vms[selectedTarget.vmIndex]
+			: null;
+	$: selectedMachineHostId = selectedMachine ? toMachineNodeId(selectedMachine.machineName) : null;
+	$: selectedMachineVmCount =
+		selectedMachineHostId && machineVmIndex[selectedMachineHostId]
+			? machineVmIndex[selectedMachineHostId].vmCount
+			: 0;
+	$: machineConnectableOwnerNames = selectedMachine
+		? listConnectableOwnerNames('machine', selectedMachine.machineName)
+		: [];
+	$: deviceConnectableOwnerNames = selectedDevice
+		? listConnectableOwnerNames('device', selectedDevice.name)
+		: [];
+	$: hasAnyVmHosts = Object.values(machineVmIndex).some((entry) => (entry?.vmCount ?? 0) > 0);
+	$: areAllVmHostsCollapsed =
+		hasAnyVmHosts &&
+		Object.keys(machineVmIndex)
+			.filter((hostId) => (machineVmIndex[hostId]?.vmCount ?? 0) > 0)
+			.every((hostId) => isHostCollapsed(hostId));
+
+	function equalsIgnoreCase(a: string, b: string): boolean {
+		return a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0;
 	}
 
-	function formatConnection(connection?: { device: string; port: string }): string {
-		if (!connection) {
-			return 'Not connected';
+	function findMachineIndexByName(name: string): number {
+		return networkData.machines.findIndex((machine) => equalsIgnoreCase(machine.machineName, name));
+	}
+
+	function findDeviceIndexByName(name: string): number {
+		return networkData.devices.findIndex((device) => equalsIgnoreCase(device.name, name));
+	}
+
+	function findVmIndexByName(machineIndex: number, vmName: string): number {
+		return networkData.machines[machineIndex]?.software.vms.findIndex((vm) => equalsIgnoreCase(vm.name, vmName)) ?? -1;
+	}
+
+	function listConnectableOwnerNames(kind: OwnerKind, ownerName: string): string[] {
+		const names: string[] = [];
+		const seen = new Set<string>();
+
+		const add = (candidateName: string, ports: Port[] | undefined) => {
+			const trimmed = candidateName.trim();
+			if (!trimmed) {
+				return;
+			}
+			if (equalsIgnoreCase(trimmed, ownerName)) {
+				return;
+			}
+			if (!ports || ports.length === 0) {
+				return;
+			}
+
+			const normalized = trimmed.toLowerCase();
+			if (seen.has(normalized)) {
+				return;
+			}
+			seen.add(normalized);
+			names.push(trimmed);
+		};
+
+		for (const machine of networkData.machines) {
+			add(machine.machineName, machine.ports);
 		}
-		return `${connection.device}:${connection.port}`;
+		for (const device of networkData.devices) {
+			add(device.name, device.ports);
+		}
+
+		return names.sort((a, b) => a.localeCompare(b));
+	}
+
+	function decodeNodeId(nodeId: string): SelectedTarget {
+		if (nodeId.startsWith('machine:')) {
+			const machineName = decodeURIComponent(nodeId.slice('machine:'.length));
+			const index = findMachineIndexByName(machineName);
+			if (index >= 0) {
+				return { type: 'machine', index };
+			}
+		}
+
+		if (nodeId.startsWith('device:')) {
+			const deviceName = decodeURIComponent(nodeId.slice('device:'.length));
+			const index = findDeviceIndexByName(deviceName);
+			if (index >= 0) {
+				return { type: 'device', index };
+			}
+		}
+
+		if (nodeId.startsWith('vm:')) {
+			const suffix = nodeId.slice('vm:'.length);
+			const [encodedHost, ...vmParts] = suffix.split(':');
+			const encodedVm = vmParts.join(':');
+			if (encodedHost && encodedVm) {
+				const hostName = decodeURIComponent(encodedHost);
+				const vmName = decodeURIComponent(encodedVm);
+				const machineIndex = findMachineIndexByName(hostName);
+				if (machineIndex >= 0) {
+					const vmIndex = findVmIndexByName(machineIndex, vmName);
+					if (vmIndex >= 0) {
+						return { type: 'vm', machineIndex, vmIndex };
+					}
+				}
+			}
+		}
+
+		return null;
+	}
+
+	function toMachineNodeId(name: string): string {
+		return `machine:${encodeURIComponent(name)}`;
+	}
+
+	function selectedMachineNodeId(): string | null {
+		if (!selectedMachine) {
+			return null;
+		}
+		return toMachineNodeId(selectedMachine.machineName);
+	}
+
+	function connectionDraftKey(kind: OwnerKind, ownerName: string, portName: string): string {
+		return `${kind}:${ownerName}::${portName}`;
+	}
+
+	function resolveConnectionDraft(
+		kind: OwnerKind,
+		ownerName: string,
+		port: Port
+	): { device: string; port: string } {
+		const key = connectionDraftKey(kind, ownerName, port.portName);
+		const draft = connectionDraftByKey[key];
+		if (draft) {
+			return draft;
+		}
+		return {
+			device: port.connectedTo?.device ?? '',
+			port: port.connectedTo?.port ?? ''
+		};
+	}
+
+	function setConnectionDraft(
+		kind: OwnerKind,
+		ownerName: string,
+		portName: string,
+		next: { device: string; port: string }
+	) {
+		const key = connectionDraftKey(kind, ownerName, portName);
+		connectionDraftByKey = {
+			...connectionDraftByKey,
+			[key]: next
+		};
+	}
+
+	function clearConnectionDraft(kind: OwnerKind, ownerName: string, portName: string) {
+		const key = connectionDraftKey(kind, ownerName, portName);
+		if (!(key in connectionDraftByKey)) {
+			return;
+		}
+		const next = { ...connectionDraftByKey };
+		delete next[key];
+		connectionDraftByKey = next;
+	}
+
+	function normalizeConnectionTarget(
+		target: Port['connectedTo']
+	): { device: string; port: string } | undefined {
+		const device = target?.device?.trim();
+		const port = target?.port?.trim();
+		if (!device || !port) {
+			return undefined;
+		}
+		return { device, port };
+	}
+
+	function sameConnection(
+		a: Port['connectedTo'] | undefined,
+		b: Port['connectedTo'] | undefined
+	): boolean {
+		if (!a && !b) {
+			return true;
+		}
+		if (!a || !b) {
+			return false;
+		}
+		return a.device === b.device && a.port === b.port;
 	}
 
 	function getTooltipSize(): { width: number; height: number } {
@@ -101,111 +344,144 @@
 		};
 	}
 
-	function isHostCollapsed(hostId: string): boolean {
-		return collapsedHosts[hostId] === true;
-	}
+	function ensureSelectedTargetValid() {
+		if (!selectedTarget) {
+			return;
+		}
 
-	function initializeCollapsedHosts(index: GraphTransformResult['machineVmIndex']) {
-		const next: Record<string, boolean> = {};
-		for (const hostId of Object.keys(index)) {
-			if ((index[hostId]?.vmCount ?? 0) > 0) {
-				next[hostId] = true;
+		if (selectedTarget.type === 'machine') {
+			if (!networkData.machines[selectedTarget.index]) {
+				selectedTarget = null;
 			}
+			return;
 		}
-		collapsedHosts = next;
-	}
 
-	function applyLoadedData(networkData: NetworkData) {
-		const transformed = transformNetworkDataToGraph(networkData);
-		warnings = transformed.warnings;
-		allNodes = transformed.nodes;
-		allEdges = transformed.edges;
-		machineVmIndex = transformed.machineVmIndex;
-		hasAnyVmHosts = Object.values(machineVmIndex).some((entry) => (entry?.vmCount ?? 0) > 0);
-
-		const labels: Record<string, string> = {};
-		for (const node of allNodes) {
-			if (node.data.kind === 'machine') {
-				labels[node.data.id] = node.data.label;
+		if (selectedTarget.type === 'device') {
+			if (!networkData.devices[selectedTarget.index]) {
+				selectedTarget = null;
 			}
-		}
-		machineBaseLabels = labels;
-		initializeCollapsedHosts(machineVmIndex);
-		closeDetails();
-
-		for (const warning of warnings) {
-			console.warn(`[OpenNetworkDiagram] ${warning}`);
+			return;
 		}
 
-		refreshVisibleGraph();
+		if (!networkData.machines[selectedTarget.machineIndex]?.software.vms[selectedTarget.vmIndex]) {
+			selectedTarget = null;
+		}
 	}
 
 	function resolveErrorMessage(error: unknown): string {
 		if (error instanceof Error && error.message) {
 			return error.message;
 		}
-		return 'Failed to load network JSON data';
+		return 'Unexpected error';
 	}
 
-	async function reloadDataFromJsonPath() {
-		isLoadingData = true;
-		loadError = null;
+	function createGraphStyles(theme: ThemeMode): cytoscape.Stylesheet[] {
+		const nodeText = theme === 'dark' ? '#e2e8f0' : '#1e293b';
+		const textOutline = theme === 'dark' ? '#0f172a' : '#f8fafc';
+		const edgeColor = theme === 'dark' ? '#94a3b8' : '#475569';
 
-		try {
-			const networkData = await loadNetworkData(jsonPath);
-			dataSourceLabel = jsonPath;
-			applyLoadedData(networkData);
-		} catch (error) {
-			loadError = resolveErrorMessage(error);
-		} finally {
-			isLoadingData = false;
-		}
-	}
-
-	function buildVisibleElements() {
-		const nodes: GraphNodeElement[] = [];
-		const edges: GraphEdgeElement[] = [];
-
-		for (const node of allNodes) {
-			if (node.data.kind === 'vm') {
-				const hostId = node.data.hostMachineId;
-				if (!hostId || isHostCollapsed(hostId)) {
-					continue;
+		return [
+			{
+				selector: 'node',
+				style: {
+					label: 'data(label)',
+					'font-size': 12,
+					'font-weight': 600,
+					'text-wrap': 'wrap',
+					'text-max-width': '140px',
+					'text-valign': 'center',
+					'text-halign': 'center',
+					color: nodeText,
+					'text-outline-color': textOutline,
+					'text-outline-width': 2,
+					width: 'data(nodeWidth)',
+					height: 'data(nodeHeight)',
+					'border-width': 2,
+					'border-color': '#64748b',
+					'background-color': theme === 'dark' ? '#1e293b' : '#f1f5f9'
+				}
+			},
+			{
+				selector: 'node[kind = "machine"]',
+				style: {
+					shape: 'round-rectangle',
+					'background-color': theme === 'dark' ? '#1d4ed8' : '#bfdbfe',
+					'border-color': '#3b82f6'
+				}
+			},
+			{
+				selector: 'node[kind = "vm"]',
+				style: {
+					shape: 'ellipse',
+					'background-color': theme === 'dark' ? '#14532d' : '#bbf7d0',
+					'border-color': '#16a34a',
+					'font-size': 10,
+					'text-max-width': '120px'
+				}
+			},
+			{
+				selector: 'node[kind = "device"]',
+				style: {
+					shape: 'hexagon',
+					'background-color': theme === 'dark' ? '#78350f' : '#fde68a',
+					'border-color': '#d97706'
+				}
+			},
+			{
+				selector: 'node[iconUrl]',
+				style: {
+					'background-image': 'data(iconUrl)',
+					'background-fit': 'contain',
+					'background-clip': 'none',
+					'background-width': '56%',
+					'background-height': '56%',
+					'background-position-y': '30%'
+				}
+			},
+			{
+				selector: 'edge',
+				style: {
+					width: 2,
+					'curve-style': 'bezier',
+					'line-color': edgeColor,
+					'target-arrow-color': edgeColor,
+					'target-arrow-shape': 'triangle',
+					label: 'data(label)',
+					'font-size': 9,
+					'text-rotation': 'autorotate',
+					color: nodeText,
+					'text-outline-color': textOutline,
+					'text-outline-width': 3
+				}
+			},
+			{
+				selector: 'edge[kind = "physical"]',
+				style: {
+					'target-arrow-shape': 'none',
+					label: '',
+					'source-label': '',
+					'target-label': '',
+					'source-text-offset': 28,
+					'target-text-offset': 28,
+					'source-text-margin-y': -9,
+					'target-text-margin-y': 9,
+					'text-background-color': theme === 'dark' ? '#0f172a' : '#f8fafc',
+					'text-background-opacity': 1,
+					'text-background-padding': '4px'
+				}
+			},
+			{
+				selector: 'edge[kind = "hosting"]',
+				style: {
+					'line-style': 'dashed',
+					'line-dash-pattern': [7, 5],
+					'line-color': theme === 'dark' ? '#64748b' : '#94a3b8',
+					'target-arrow-color': theme === 'dark' ? '#64748b' : '#94a3b8',
+					'font-size': 8,
+					color: theme === 'dark' ? '#94a3b8' : '#64748b'
 				}
 			}
-
-			if (node.data.kind === 'machine') {
-				const vmCount = machineVmIndex[node.data.id]?.vmCount ?? 0;
-				const baseLabel = machineBaseLabels[node.data.id] ?? node.data.label;
-				const label =
-					vmCount > 0 && isHostCollapsed(node.data.id)
-						? `${baseLabel} (+${vmCount} VMs)`
-						: baseLabel;
-				nodes.push({
-					data: {
-						...node.data,
-						label
-					}
-				});
-				continue;
-			}
-
-			nodes.push({ data: { ...node.data } });
-		}
-
-		for (const edge of allEdges) {
-			if (edge.data.kind === 'physical') {
-				edges.push({ data: { ...edge.data } });
-				continue;
-			}
-
-			const hostId = edge.data.source;
-			if (!isHostCollapsed(hostId)) {
-				edges.push({ data: { ...edge.data } });
-			}
-		}
-
-		return { nodes, edges };
+		];
 	}
 
 	function runDagreLayout(core: cytoscape.Core) {
@@ -241,26 +517,20 @@
 		}
 
 		const bucketKeys = Object.keys(buckets).sort((a, b) => Number(a) - Number(b));
-
 		core.batch(() => {
 			for (const bucketKey of bucketKeys) {
-				const rankNodes = (buckets[bucketKey] ?? []).sort(
-					(a, b) => a.position().x - b.position().x
-				);
+				const rankNodes = (buckets[bucketKey] ?? []).sort((a, b) => a.position().x - b.position().x);
 				let prevRight: number | null = null;
-
 				for (const node of rankNodes) {
 					const pos = node.position();
 					const halfWidth = node.outerWidth() / 2;
 					let { x } = pos;
-
 					if (prevRight !== null) {
 						const minCenter = prevRight + halfWidth + 28;
 						if (x < minCenter) {
 							x = minCenter;
 						}
 					}
-
 					node.position({ x, y: pos.y });
 					prevRight = x + halfWidth;
 				}
@@ -339,7 +609,6 @@
 			const pos = node.position();
 			const halfW = node.outerWidth() / 2;
 			const halfH = node.outerHeight() / 2;
-
 			minX = Math.min(minX, pos.x - halfW);
 			maxX = Math.max(maxX, pos.x + halfW);
 			minY = Math.min(minY, pos.y - halfH);
@@ -364,7 +633,6 @@
 
 		let minX = Number.POSITIVE_INFINITY;
 		let maxX = Number.NEGATIVE_INFINITY;
-
 		for (const node of all) {
 			const pos = node.position();
 			const halfW = node.outerWidth() / 2;
@@ -382,15 +650,8 @@
 	}
 
 	function packConnectedComponents(core: cytoscape.Core, wrapWidth: number) {
-		const rawComponents = collectComponents(core);
-		const components = rawComponents
-			.map((nodes) => {
-				const bounds = componentBounds(nodes);
-				return {
-					nodes,
-					...bounds
-				};
-			})
+		const components = collectComponents(core)
+			.map((nodes) => ({ nodes, ...componentBounds(nodes) }))
 			.sort((a, b) => {
 				if (a.minY !== b.minY) {
 					return a.minY - b.minY;
@@ -430,24 +691,15 @@
 		centerGraphHorizontally(core);
 	}
 
-	function runAdaptiveLayout(core: cytoscape.Core, mode: CameraMode) {
+	function runAdaptiveLayout(core: cytoscape.Core) {
 		runDagreLayout(core);
 		resolveRankCollisions(core);
 		const basePositions = capturePositions(core);
 
 		const stageWidth = Math.max(container?.clientWidth ?? 1200, 420);
-
-		if (mode === 'overview') {
-			restorePositions(core, basePositions);
-			packConnectedComponents(core, Math.max(stageWidth * 1.8, 1600));
-			core.fit(undefined, 14);
-			return;
-		}
-
 		const zoomFloor = 0.55;
 		const maxAttempts = 7;
 		let lastZoom = 0;
-
 		for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
 			const widthFactor = Math.max(0.35, 1.12 - attempt * 0.12);
 			const wrapWidth = Math.max(stageWidth * widthFactor, 420);
@@ -465,400 +717,44 @@
 
 	function applyPhysicalEdgeDeconfliction(core: cytoscape.Core) {
 		const physicalEdges = core.edges('[kind = "physical"]').toArray();
-		if (physicalEdges.length === 0) {
-			return;
-		}
-
-		const laneGap = 10;
-		const endpointOffsetBase = 30;
-		const switchEndpointOffsetBase = 24;
-		const switchSideInset = 16;
-		const switchTopBottomInset = 9;
-		const switchEndpointOffsetTopBottom = 14;
-		const switchSlotGap = 14;
-		const switchAxisGap = 4;
-		const switchMarginClamp = 46;
-		const midpointClusterRadius = 24;
-		type SwitchSide = 'left' | 'right' | 'top' | 'bottom';
-		const laneByEdgeId: Record<
-			string,
-			{
-				sourceLane: number;
-				targetLane: number;
-				centerLane: number;
-				sourceIsSwitch: boolean;
-				targetIsSwitch: boolean;
-				sourceSwitchSide: SwitchSide | null;
-				targetSwitchSide: SwitchSide | null;
-				sourceSwitchMarginX: number;
-				sourceSwitchMarginY: number;
-				targetSwitchMarginX: number;
-				targetSwitchMarginY: number;
-			}
-		> = {};
-		const endpointsByNodeId: Record<
-			string,
-			Array<{ edgeId: string; side: 'source' | 'target'; angle: number }>
-		> = {};
-		const isSwitchNode = (node: cytoscape.NodeSingular) => {
-			const details = node.data('details') as GraphNodeDetails | undefined;
-			if (!details || details.type !== 'device') {
-				return false;
-			}
-			if (typeof details.deviceType !== 'string') {
-				return false;
-			}
-			return details.deviceType.toLowerCase().includes('switch');
-		};
-		const endpointSide = (angle: number): SwitchSide => {
-			const x = Math.cos(angle);
-			const y = Math.sin(angle);
-			if (Math.abs(x) >= Math.abs(y)) {
-				return x >= 0 ? 'right' : 'left';
-			}
-			return y >= 0 ? 'bottom' : 'top';
-		};
-		const assignLane = (
-			entry: {
-				sourceLane: number;
-				targetLane: number;
-				centerLane: number;
-				sourceIsSwitch: boolean;
-				targetIsSwitch: boolean;
-				sourceSwitchSide: SwitchSide | null;
-				targetSwitchSide: SwitchSide | null;
-				sourceSwitchMarginX: number;
-				sourceSwitchMarginY: number;
-				targetSwitchMarginX: number;
-				targetSwitchMarginY: number;
-			},
-			endpoint: { edgeId: string; side: 'source' | 'target' },
-			lane: number,
-			onSwitch: boolean,
-			side: SwitchSide | null
-		) => {
-			if (endpoint.side === 'source') {
-				entry.sourceLane = lane;
-				entry.sourceIsSwitch = onSwitch;
-				entry.sourceSwitchSide = onSwitch ? side : null;
-				return;
-			}
-			entry.targetLane = lane;
-			entry.targetIsSwitch = onSwitch;
-			entry.targetSwitchSide = onSwitch ? side : null;
-		};
-
-		const estimateLabelWidth = (text: string) => Math.max(18, text.length * 7 + 10);
-		const distributeAxis = (desired: number[], sizes: number[], gap: number) => {
-			if (desired.length <= 1) {
-				return [...desired];
-			}
-			const placed = [...desired];
-			for (let index = 1; index < placed.length; index += 1) {
-				const minCenter = placed[index - 1] + (sizes[index - 1] + sizes[index]) / 2 + gap;
-				if (placed[index] < minCenter) {
-					placed[index] = minCenter;
-				}
-			}
-			for (let index = placed.length - 2; index >= 0; index -= 1) {
-				const maxCenter = placed[index + 1] - (sizes[index + 1] + sizes[index]) / 2 - gap;
-				if (placed[index] > maxCenter) {
-					placed[index] = maxCenter;
-				}
-			}
-			const desiredCenter = desired.reduce((sum, value) => sum + value, 0) / desired.length;
-			const placedCenter = placed.reduce((sum, value) => sum + value, 0) / placed.length;
-			const shift = desiredCenter - placedCenter;
-			for (let index = 0; index < placed.length; index += 1) {
-				placed[index] += shift;
-			}
-			for (let index = 1; index < placed.length; index += 1) {
-				const minCenter = placed[index - 1] + (sizes[index - 1] + sizes[index]) / 2 + gap;
-				if (placed[index] < minCenter) {
-					placed[index] = minCenter;
-				}
-			}
-			return placed;
-		};
-		const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+		const grouped = new Map<string, cytoscape.EdgeSingular[]>();
 
 		for (const edge of physicalEdges) {
-			const edgeId = edge.id();
-			laneByEdgeId[edgeId] = {
-				sourceLane: 0,
-				targetLane: 0,
-				centerLane: 0,
-				sourceIsSwitch: false,
-				targetIsSwitch: false,
-				sourceSwitchSide: null,
-				targetSwitchSide: null,
-				sourceSwitchMarginX: 0,
-				sourceSwitchMarginY: 0,
-				targetSwitchMarginX: 0,
-				targetSwitchMarginY: 0
-			};
-
-			const sourcePos = edge.source().position();
-			const targetPos = edge.target().position();
-			const sourceAngle = Math.atan2(targetPos.y - sourcePos.y, targetPos.x - sourcePos.x);
-			const targetAngle = Math.atan2(sourcePos.y - targetPos.y, sourcePos.x - targetPos.x);
-
-			const sourceBucket = endpointsByNodeId[edge.source().id()] ?? [];
-			sourceBucket.push({ edgeId, side: 'source', angle: sourceAngle });
-			endpointsByNodeId[edge.source().id()] = sourceBucket;
-
-			const targetBucket = endpointsByNodeId[edge.target().id()] ?? [];
-			targetBucket.push({ edgeId, side: 'target', angle: targetAngle });
-			endpointsByNodeId[edge.target().id()] = targetBucket;
-		}
-
-		for (const nodeId of Object.keys(endpointsByNodeId)) {
-			const endpoints = endpointsByNodeId[nodeId] ?? [];
-			const node = core.getElementById(nodeId);
-			const onSwitch =
-				!node.empty() && node.isNode() && isSwitchNode(node as cytoscape.NodeSingular);
-
-			if (!onSwitch) {
-				const sorted = [...endpoints].sort((a, b) => {
-					if (a.angle !== b.angle) {
-						return a.angle - b.angle;
-					}
-					if (a.edgeId !== b.edgeId) {
-						return a.edgeId.localeCompare(b.edgeId);
-					}
-					return a.side.localeCompare(b.side);
-				});
-				const midpoint = (sorted.length - 1) / 2;
-				for (const [index, endpoint] of sorted.entries()) {
-					const lane = index - midpoint;
-					const laneEntry = laneByEdgeId[endpoint.edgeId];
-					if (!laneEntry) {
-						continue;
-					}
-					assignLane(laneEntry, endpoint, lane, false, null);
-				}
-				continue;
-			}
-
-			const buckets: Record<SwitchSide, typeof endpoints> = {
-				left: [],
-				right: [],
-				top: [],
-				bottom: []
-			};
-			for (const endpoint of endpoints) {
-				buckets[endpointSide(endpoint.angle)].push(endpoint);
-			}
-
-			for (const side of ['left', 'right', 'top', 'bottom'] as const) {
-				const sideEndpoints = buckets[side].sort((a, b) => {
-					const aOrder =
-						side === 'left' || side === 'right' ? Math.sin(a.angle) : Math.cos(a.angle);
-					const bOrder =
-						side === 'left' || side === 'right' ? Math.sin(b.angle) : Math.cos(b.angle);
-					if (aOrder !== bOrder) {
-						return aOrder - bOrder;
-					}
-					if (a.edgeId !== b.edgeId) {
-						return a.edgeId.localeCompare(b.edgeId);
-					}
-					return a.side.localeCompare(b.side);
-				});
-				const midpoint = (sideEndpoints.length - 1) / 2;
-				const desiredAxisPositions: number[] = [];
-				const axisSizes: number[] = [];
-				for (const [index, endpoint] of sideEndpoints.entries()) {
-					const lane = index - midpoint;
-					const laneEntry = laneByEdgeId[endpoint.edgeId];
-					if (!laneEntry) {
-						continue;
-					}
-					assignLane(laneEntry, endpoint, lane, true, side);
-
-					const edge = core.getElementById(endpoint.edgeId);
-					const labelText =
-						endpoint.side === 'source'
-							? String(edge.data('sourcePort') ?? '')
-							: String(edge.data('targetPort') ?? '');
-					const axisSize = side === 'left' || side === 'right' ? 14 : estimateLabelWidth(labelText);
-					desiredAxisPositions.push(lane * switchSlotGap);
-					axisSizes.push(axisSize);
-				}
-
-				const placedAxisPositions = distributeAxis(desiredAxisPositions, axisSizes, switchAxisGap);
-				for (const [index, endpoint] of sideEndpoints.entries()) {
-					const laneEntry = laneByEdgeId[endpoint.edgeId];
-					if (!laneEntry) {
-						continue;
-					}
-					const axisPosition = clamp(
-						placedAxisPositions[index] ?? 0,
-						-switchMarginClamp,
-						switchMarginClamp
-					);
-
-					let marginX = 0;
-					let marginY = 0;
-					if (side === 'left') {
-						marginX = -switchSideInset;
-						marginY = axisPosition;
-					} else if (side === 'right') {
-						marginX = switchSideInset;
-						marginY = axisPosition;
-					} else if (side === 'top') {
-						marginX = axisPosition;
-						marginY = -switchTopBottomInset;
-					} else {
-						marginX = axisPosition;
-						marginY = switchTopBottomInset;
-					}
-
-					if (endpoint.side === 'source') {
-						laneEntry.sourceSwitchMarginX = marginX;
-						laneEntry.sourceSwitchMarginY = marginY;
-					} else {
-						laneEntry.targetSwitchMarginX = marginX;
-						laneEntry.targetSwitchMarginY = marginY;
-					}
-				}
-			}
-		}
-
-		type Midpoint = { edgeId: string; x: number; y: number };
-		type Cluster = { points: Midpoint[]; cx: number; cy: number };
-		const midpoints: Midpoint[] = physicalEdges
-			.map((edge) => {
-				const sourcePos = edge.source().position();
-				const targetPos = edge.target().position();
-				return {
-					edgeId: edge.id(),
-					x: (sourcePos.x + targetPos.x) / 2,
-					y: (sourcePos.y + targetPos.y) / 2
-				};
-			})
-			.sort((a, b) => {
-				if (a.x !== b.x) {
-					return a.x - b.x;
-				}
-				if (a.y !== b.y) {
-					return a.y - b.y;
-				}
-				return a.edgeId.localeCompare(b.edgeId);
-			});
-
-		const clusters: Cluster[] = [];
-		for (const point of midpoints) {
-			let closest: Cluster | null = null;
-			let bestDistance = Number.POSITIVE_INFINITY;
-			for (const cluster of clusters) {
-				const distance = Math.hypot(point.x - cluster.cx, point.y - cluster.cy);
-				if (distance <= midpointClusterRadius && distance < bestDistance) {
-					bestDistance = distance;
-					closest = cluster;
-				}
-			}
-
-			if (!closest) {
-				clusters.push({ points: [point], cx: point.x, cy: point.y });
-				continue;
-			}
-
-			closest.points.push(point);
-			const count = closest.points.length;
-			closest.cx = (closest.cx * (count - 1) + point.x) / count;
-			closest.cy = (closest.cy * (count - 1) + point.y) / count;
-		}
-
-		for (const cluster of clusters) {
-			const sorted = [...cluster.points].sort((a, b) => a.edgeId.localeCompare(b.edgeId));
-			const midpoint = (sorted.length - 1) / 2;
-			for (const [index, point] of sorted.entries()) {
-				if (!laneByEdgeId[point.edgeId]) {
-					continue;
-				}
-				laneByEdgeId[point.edgeId].centerLane = index - midpoint;
-			}
+			const source = String(edge.data('source'));
+			const target = String(edge.data('target'));
+			const key = source < target ? `${source}|${target}` : `${target}|${source}`;
+			const group = grouped.get(key) ?? [];
+			group.push(edge);
+			grouped.set(key, group);
 		}
 
 		core.batch(() => {
-			for (const edge of physicalEdges) {
-				const edgeId = edge.id();
-				const lanes = laneByEdgeId[edgeId] ?? {
-					sourceLane: 0,
-					targetLane: 0,
-					centerLane: 0,
-					sourceIsSwitch: false,
-					targetIsSwitch: false,
-					sourceSwitchSide: null,
-					targetSwitchSide: null,
-					sourceSwitchMarginX: 0,
-					sourceSwitchMarginY: 0,
-					targetSwitchMarginX: 0,
-					targetSwitchMarginY: 0
-				};
-				const { sourceLane } = lanes;
-				const { targetLane } = lanes;
-				const { centerLane } = lanes;
-				const laneAverage = (sourceLane + targetLane) / 2;
-				const sourceIsTopBottomSwitch =
-					lanes.sourceIsSwitch &&
-					(lanes.sourceSwitchSide === 'top' || lanes.sourceSwitchSide === 'bottom');
-				const targetIsTopBottomSwitch =
-					lanes.targetIsSwitch &&
-					(lanes.targetSwitchSide === 'top' || lanes.targetSwitchSide === 'bottom');
-				const controlPointDistance = Math.max(-54, Math.min(54, laneAverage * 18));
-				const sourceOffset = lanes.sourceIsSwitch
-					? sourceIsTopBottomSwitch
-						? switchEndpointOffsetTopBottom
-						: switchEndpointOffsetBase
-					: endpointOffsetBase + Math.min(24, Math.abs(sourceLane) * 4);
-				const targetOffset = lanes.targetIsSwitch
-					? targetIsTopBottomSwitch
-						? switchEndpointOffsetTopBottom
-						: switchEndpointOffsetBase
-					: endpointOffsetBase + Math.min(24, Math.abs(targetLane) * 4);
-				const sourceMarginY = lanes.sourceIsSwitch
-					? lanes.sourceSwitchMarginY
-					: sourceLane * laneGap;
-				const targetMarginY = lanes.targetIsSwitch
-					? lanes.targetSwitchMarginY
-					: targetLane * laneGap;
-				const sourceMarginX = lanes.sourceIsSwitch ? lanes.sourceSwitchMarginX : 0;
-				const targetMarginX = lanes.targetIsSwitch ? lanes.targetSwitchMarginX : 0;
-				const sourcePos = edge.source().position();
-				const targetPos = edge.target().position();
-				const dx = targetPos.x - sourcePos.x;
-				const dy = targetPos.y - sourcePos.y;
-				const hasVerticalSwitchEndpoint = sourceIsTopBottomSwitch || targetIsTopBottomSwitch;
-				const centerMarginX =
-					hasVerticalSwitchEndpoint && Math.abs(dy) > Math.abs(dx) && Math.abs(centerLane) < 0.5
-						? dx >= 0
-							? 14
-							: -14
-						: 0;
-				const sourceRotation = lanes.sourceIsSwitch ? 'none' : 'autorotate';
-				const targetRotation = lanes.targetIsSwitch ? 'none' : 'autorotate';
+			for (const group of grouped.values()) {
+				const count = group.length;
+				for (let index = 0; index < group.length; index += 1) {
+					const edge = group[index];
+					const offsetIndex = index - (count - 1) / 2;
+					const controlPointDistance = offsetIndex * 16;
+					const sourceOffset = 30 + Math.abs(offsetIndex) * 4;
+					const targetOffset = 30 + Math.abs(offsetIndex) * 4;
 
-				edge.style('curve-style', 'unbundled-bezier');
-				edge.style('control-point-distances', `${controlPointDistance}`);
-				edge.style('control-point-weights', '0.5');
-				edge.style('source-text-offset', sourceOffset);
-				edge.style('target-text-offset', targetOffset);
-				edge.style('source-text-margin-x', sourceMarginX);
-				edge.style('target-text-margin-x', targetMarginX);
-				edge.style('source-text-margin-y', sourceMarginY);
-				edge.style('target-text-margin-y', targetMarginY);
-				edge.style('text-margin-x', centerMarginX);
-				edge.style('text-margin-y', -14 + centerLane * 10);
-				edge.style('source-text-rotation', sourceRotation);
-				edge.style('target-text-rotation', targetRotation);
+					edge.style('curve-style', count > 1 ? 'unbundled-bezier' : 'bezier');
+					edge.style('control-point-distances', `${controlPointDistance}`);
+					edge.style('control-point-weights', '0.5');
+					edge.style('source-text-offset', sourceOffset);
+					edge.style('target-text-offset', targetOffset);
+					edge.style('text-margin-y', -14 + offsetIndex * 10);
+				}
 			}
 		});
 	}
 
-	function applyEthernetLabelVisibility(core: cytoscape.Core, visible: boolean) {
-		const physicalEdges = core.edges('[kind = "physical"]').toArray();
-		core.batch(() => {
+	function applyEthernetLabelVisibility(visible: boolean) {
+		if (!cy) {
+			return;
+		}
+		const physicalEdges = cy.edges('[kind = "physical"]').toArray();
+		cy.batch(() => {
 			for (const edge of physicalEdges) {
 				edge.style('label', visible ? String(edge.data('label') ?? '') : '');
 				edge.style('source-label', visible ? String(edge.data('sourcePort') ?? '') : '');
@@ -867,46 +763,78 @@
 		});
 	}
 
-	function refreshVisibleGraph() {
-		if (!cy) {
-			return;
-		}
+	function onDiagramViewSelectChange(event: Event) {
+		const nextValue = (event.currentTarget as HTMLSelectElement).value;
+		diagramViewMode = nextValue === 'device' ? 'device' : 'network';
+		refreshGraph();
+	}
 
-		const visible = buildVisibleElements();
-		cy.batch(() => {
-			cy?.elements().remove();
-			cy?.add([...visible.nodes, ...visible.edges]);
+	function isHostCollapsed(hostId: string): boolean {
+		return collapsedHosts[hostId] === true;
+	}
+
+	function syncCollapsedHosts(index: GraphTransformResult['machineVmIndex']) {
+		const next: Record<string, boolean> = {};
+		for (const hostId of Object.keys(index)) {
+			if ((index[hostId]?.vmCount ?? 0) === 0) {
+				continue;
+			}
+			next[hostId] = collapsedHosts[hostId] ?? true;
+		}
+		collapsedHosts = next;
+	}
+
+	function buildVisibleElements(transformed: GraphTransformResult) {
+		const nodes = transformed.nodes
+			.filter((node) => {
+				if (node.data.kind !== 'vm') {
+					return true;
+				}
+				const hostId = node.data.hostMachineId;
+				if (!hostId) {
+					return true;
+				}
+				return !isHostCollapsed(hostId);
+			})
+			.map((node) => {
+				if (node.data.kind !== 'machine') {
+					return node;
+				}
+
+				const hostId = node.data.id;
+				const vmCount = machineVmIndex[hostId]?.vmCount ?? 0;
+				const rawName = node.data.rawName ?? node.data.label;
+				if (vmCount <= 0 || !isHostCollapsed(hostId)) {
+					return {
+						...node,
+						data: {
+							...node.data,
+							label: rawName
+						}
+					};
+				}
+
+				const suffix = vmCount === 1 ? 'VM' : 'VMs';
+				return {
+					...node,
+					data: {
+						...node.data,
+						label: `${rawName} (+ ${vmCount} ${suffix})`
+					}
+				};
+			});
+
+		const edges = transformed.edges.filter((edge) => {
+			if (diagramViewMode === 'device' && edge.data.kind === 'physical') {
+				return false;
+			}
+			if (edge.data.kind !== 'hosting') {
+				return true;
+			}
+			return !isHostCollapsed(edge.data.source);
 		});
 
-		runAdaptiveLayout(cy, cameraMode);
-		applyPhysicalEdgeDeconfliction(cy);
-		applyEthernetLabelVisibility(cy, showEthernetLabels);
-		tooltip.visible = false;
-
-		if (selectedNodeId) {
-			const selectedNode = cy.getElementById(selectedNodeId);
-			if (selectedNode.empty()) {
-				closeDetails();
-			}
-		}
-	}
-
-	function applyCameraMode(mode: CameraMode) {
-		cameraMode = mode;
-		if (!cy) {
-			return;
-		}
-		runAdaptiveLayout(cy, mode);
-		applyPhysicalEdgeDeconfliction(cy);
-		applyEthernetLabelVisibility(cy, showEthernetLabels);
-	}
-
-	function toggleEthernetLabels() {
-		showEthernetLabels = !showEthernetLabels;
-		if (!cy) {
-			return;
-		}
-		applyEthernetLabelVisibility(cy, showEthernetLabels);
+		return { nodes, edges };
 	}
 
 	function setCollapsedStateForAll(nextValue: boolean) {
@@ -918,7 +846,12 @@
 			next[hostId] = nextValue;
 		}
 		collapsedHosts = next;
-		refreshVisibleGraph();
+		refreshGraph();
+	}
+
+	function onAllVmsToggleChange(event: Event) {
+		const hideAll = (event.currentTarget as HTMLInputElement).checked;
+		setCollapsedStateForAll(hideAll);
 	}
 
 	function toggleHostVmVisibility(hostId: string) {
@@ -926,198 +859,620 @@
 			...collapsedHosts,
 			[hostId]: !isHostCollapsed(hostId)
 		};
-		refreshVisibleGraph();
+		refreshGraph();
 	}
 
 	function toggleSelectedMachineVmVisibility() {
-		if (!selectedNodeId) {
+		const hostId = selectedMachineNodeId();
+		if (!hostId) {
 			return;
 		}
-		toggleHostVmVisibility(selectedNodeId);
+		toggleHostVmVisibility(hostId);
+	}
+
+	function refreshGraph() {
+		if (!cy) {
+			return;
+		}
+
+		const transformed = transformNetworkDataToGraph(networkData);
+		machineVmIndex = transformed.machineVmIndex;
+		syncCollapsedHosts(machineVmIndex);
+		const visible = buildVisibleElements(transformed);
+		warnings = transformed.warnings;
+			cy.batch(() => {
+				cy?.elements().remove();
+				cy?.add([...visible.nodes, ...visible.edges]);
+			});
+			runAdaptiveLayout(cy);
+			if (diagramViewMode === 'network') {
+				applyPhysicalEdgeDeconfliction(cy);
+				applyEthernetLabelVisibility(showEthernetLabels);
+			}
+			tooltip.visible = false;
+		}
+
+	function revalidateDraft() {
+		const validation = validateNetworkData(networkData);
+		validationIssues = validation.errors;
+	}
+
+	function clearAutosaveTimer() {
+		if (autosaveTimer !== null) {
+			clearTimeout(autosaveTimer);
+			autosaveTimer = null;
+		}
+	}
+
+	function scheduleAutosave() {
+		if (!hasLoadedInitialData) {
+			return;
+		}
+		saveError = null;
+		saveState = 'unsaved';
+		if (!writable) {
+			return;
+		}
+
+		clearAutosaveTimer();
+		autosaveTimer = setTimeout(() => {
+			void persistDraft();
+		}, autosaveDelayMs);
+	}
+
+	async function persistDraft() {
+		if (!writable) {
+			return;
+		}
+
+		const snapshot = JSON.stringify(networkData);
+		if (snapshot === lastSavedSnapshot) {
+			saveState = 'saved';
+			return;
+		}
+
+		if (saveInFlight) {
+			trailingSaveRequested = true;
+			return;
+		}
+
+		saveInFlight = true;
+		saveState = 'saving';
+		saveError = null;
+
+		try {
+			const response = await fetch('/api/network-data', {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: snapshot
+			});
+
+			if (response.status === 403) {
+				writable = false;
+				readOnlyNotice = 'Read-only deployment; changes are not persisted.';
+				saveState = 'unsaved';
+				return;
+			}
+
+			if (!response.ok) {
+				const body = (await response.json().catch(() => ({}))) as {
+					error?: string;
+					details?: Array<{ path: string; message: string }>;
+				};
+				saveState = 'error';
+				saveError = body.error ?? 'Save failed';
+				if (Array.isArray(body.details)) {
+					validationIssues = body.details;
+				}
+				return;
+			}
+
+			const body = (await response.json()) as {
+				data: NetworkData;
+				writable: boolean;
+				source: string;
+				updatedAt: string;
+			};
+			writable = body.writable;
+			dataSourceLabel = body.source;
+			lastSavedSnapshot = JSON.stringify(body.data);
+			networkData = cloneNetworkData(body.data);
+			revalidateDraft();
+			refreshGraph();
+			saveState = 'saved';
+		} catch (error) {
+			saveState = 'error';
+			saveError = resolveErrorMessage(error);
+		} finally {
+			saveInFlight = false;
+			if (trailingSaveRequested) {
+				trailingSaveRequested = false;
+				void persistDraft();
+			}
+		}
+	}
+
+	function applyDraft(next: NetworkData, options?: { autosave?: boolean }) {
+		networkData = cloneNetworkData(next);
+		ensureSelectedTargetValid();
+		revalidateDraft();
+		refreshGraph();
+		if (options?.autosave ?? true) {
+			scheduleAutosave();
+		}
+	}
+
+	function mutateDraft(
+		mutator: (draft: NetworkData) => void,
+		options?: { autosave?: boolean; reconcile?: boolean }
+	) {
+		const draft = cloneNetworkData(networkData);
+		mutator(draft);
+		const next = options?.reconcile ? withReconciledConnections(draft) : draft;
+		applyDraft(next, { autosave: options?.autosave ?? true });
+	}
+
+	function nextUniqueName(base: string, existing: string[]): string {
+		const normalized = new Set(existing.map((name) => name.toLowerCase()));
+		if (!normalized.has(base.toLowerCase())) {
+			return base;
+		}
+		for (let index = 2; index < 1000; index += 1) {
+			const candidate = `${base} ${index}`;
+			if (!normalized.has(candidate.toLowerCase())) {
+				return candidate;
+			}
+		}
+		return `${base} ${Date.now()}`;
+	}
+
+	function hasOwnerNameCollision(nextName: string, ignore?: { type: 'machine' | 'device'; index: number }) {
+		const normalized = nextName.trim().toLowerCase();
+		if (!normalized) {
+			return false;
+		}
+
+		for (const [index, machine] of networkData.machines.entries()) {
+			if (ignore?.type === 'machine' && ignore.index === index) {
+				continue;
+			}
+			if (machine.machineName.trim().toLowerCase() === normalized) {
+				return true;
+			}
+		}
+
+		for (const [index, device] of networkData.devices.entries()) {
+			if (ignore?.type === 'device' && ignore.index === index) {
+				continue;
+			}
+			if (device.name.trim().toLowerCase() === normalized) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	function updateMachineName(index: number, nextName: string) {
+		const previous = networkData.machines[index]?.machineName;
+		if (!previous || !nextName.trim()) {
+			return;
+		}
+		if (hasOwnerNameCollision(nextName, { type: 'machine', index })) {
+			saveError = `Name "${nextName.trim()}" is already used by another machine or device.`;
+			return;
+		}
+		const renamed = renameOwner(networkData, 'machine', previous, nextName.trim());
+		const nextIndex = renamed.machines.findIndex((machine) => equalsIgnoreCase(machine.machineName, nextName));
+		applyDraft(renamed);
+		if (nextIndex >= 0) {
+			selectedTarget = { type: 'machine', index: nextIndex };
+		}
+	}
+
+	function updateDeviceName(index: number, nextName: string) {
+		const previous = networkData.devices[index]?.name;
+		if (!previous || !nextName.trim()) {
+			return;
+		}
+		if (hasOwnerNameCollision(nextName, { type: 'device', index })) {
+			saveError = `Name "${nextName.trim()}" is already used by another machine or device.`;
+			return;
+		}
+		const renamed = renameOwner(networkData, 'device', previous, nextName.trim());
+		const nextIndex = renamed.devices.findIndex((device) => equalsIgnoreCase(device.name, nextName));
+		applyDraft(renamed);
+		if (nextIndex >= 0) {
+			selectedTarget = { type: 'device', index: nextIndex };
+		}
+	}
+
+	function updateMachinePortName(machineIndex: number, portIndex: number, nextPortName: string) {
+		const machine = networkData.machines[machineIndex];
+		const previous = machine?.ports?.[portIndex]?.portName;
+		if (!machine || !previous || !nextPortName.trim()) {
+			return;
+		}
+		const duplicate = (machine.ports ?? []).some(
+			(port, index) => index !== portIndex && equalsIgnoreCase(port.portName, nextPortName)
+		);
+		if (duplicate) {
+			saveError = `Port name "${nextPortName.trim()}" already exists on ${machine.machineName}.`;
+			return;
+		}
+		applyDraft(renamePort(networkData, 'machine', machine.machineName, previous, nextPortName.trim()));
+	}
+
+	function updateDevicePortName(deviceIndex: number, portIndex: number, nextPortName: string) {
+		const device = networkData.devices[deviceIndex];
+		const previous = device?.ports?.[portIndex]?.portName;
+		if (!device || !previous || !nextPortName.trim()) {
+			return;
+		}
+		const duplicate = (device.ports ?? []).some(
+			(port, index) => index !== portIndex && equalsIgnoreCase(port.portName, nextPortName)
+		);
+		if (duplicate) {
+			saveError = `Port name "${nextPortName.trim()}" already exists on ${device.name}.`;
+			return;
+		}
+		applyDraft(renamePort(networkData, 'device', device.name, previous, nextPortName.trim()));
+	}
+
+	function updateMachinePortConnection(machineIndex: number, portIndex: number, target: Port['connectedTo']) {
+		const machine = networkData.machines[machineIndex];
+		const port = machine?.ports?.[portIndex];
+		const portName = port?.portName;
+		if (!machine || !portName || !port) {
+			return;
+		}
+		const normalizedTarget = normalizeConnectionTarget(target);
+		if (sameConnection(port.connectedTo, normalizedTarget)) {
+			return;
+		}
+		applyDraft(setPortConnection(networkData, 'machine', machine.machineName, portName, normalizedTarget));
+	}
+
+	function updateDevicePortConnection(deviceIndex: number, portIndex: number, target: Port['connectedTo']) {
+		const device = networkData.devices[deviceIndex];
+		const port = device?.ports?.[portIndex];
+		const portName = port?.portName;
+		if (!device || !portName || !port) {
+			return;
+		}
+		const normalizedTarget = normalizeConnectionTarget(target);
+		if (sameConnection(port.connectedTo, normalizedTarget)) {
+			return;
+		}
+		applyDraft(setPortConnection(networkData, 'device', device.name, portName, normalizedTarget));
+	}
+
+	function onMachinePortConnectionFieldChange(
+		machineIndex: number,
+		portIndex: number,
+		field: 'device' | 'port',
+		value: string
+	) {
+		const machine = networkData.machines[machineIndex];
+		const port = machine?.ports?.[portIndex];
+		if (!machine || !port) {
+			return;
+		}
+		const current = resolveConnectionDraft('machine', machine.machineName, port);
+		const next = {
+			...current,
+			[field]: value
+		};
+		setConnectionDraft('machine', machine.machineName, port.portName, next);
+		updateMachinePortConnection(machineIndex, portIndex, next);
+	}
+
+	function onDevicePortConnectionFieldChange(
+		deviceIndex: number,
+		portIndex: number,
+		field: 'device' | 'port',
+		value: string
+	) {
+		const device = networkData.devices[deviceIndex];
+		const port = device?.ports?.[portIndex];
+		if (!device || !port) {
+			return;
+		}
+		const current = resolveConnectionDraft('device', device.name, port);
+		const next = {
+			...current,
+			[field]: value
+		};
+		setConnectionDraft('device', device.name, port.portName, next);
+		updateDevicePortConnection(deviceIndex, portIndex, next);
+	}
+
+	function deleteMachine(machineIndex: number) {
+		const machine = networkData.machines[machineIndex];
+		if (!machine) {
+			return;
+		}
+		applyDraft(deleteOwner(networkData, 'machine', machine.machineName));
+		selectedTarget = null;
+		deleteTarget = null;
+	}
+
+	function deleteDevice(deviceIndex: number) {
+		const device = networkData.devices[deviceIndex];
+		if (!device) {
+			return;
+		}
+		applyDraft(deleteOwner(networkData, 'device', device.name));
+		selectedTarget = null;
+		deleteTarget = null;
+	}
+
+	function deleteVm(machineIndex: number, vmIndex: number) {
+		mutateDraft((draft) => {
+			draft.machines[machineIndex]?.software.vms.splice(vmIndex, 1);
+		});
+		selectedTarget = null;
+		deleteTarget = null;
+	}
+
+	function addMachine() {
+		const existingNames = [...networkData.machines.map((item) => item.machineName), ...networkData.devices.map((item) => item.name)];
+		newMachineDraft = {
+			...createEmptyMachine(),
+			machineName: nextUniqueName('New Machine', existingNames)
+		};
+		addModalKind = 'machine';
+	}
+
+	function addDevice() {
+		const existingNames = [...networkData.machines.map((item) => item.machineName), ...networkData.devices.map((item) => item.name)];
+		newDeviceDraft = {
+			...createEmptyDevice(),
+			name: nextUniqueName('New Device', existingNames)
+		};
+		addModalKind = 'device';
+	}
+
+	function submitAddEntity() {
+		if (addModalKind === 'machine') {
+			mutateDraft((draft) => {
+				draft.machines.push(cloneNetworkData({ machines: [newMachineDraft], devices: [] }).machines[0]);
+			});
+			selectedTarget = { type: 'machine', index: networkData.machines.length - 1 };
+		}
+		if (addModalKind === 'device') {
+			mutateDraft((draft) => {
+				draft.devices.push(cloneNetworkData({ machines: [], devices: [newDeviceDraft] }).devices[0]);
+			});
+			selectedTarget = { type: 'device', index: networkData.devices.length - 1 };
+		}
+		addModalKind = null;
+	}
+
+	function onThemeToggleChange(event: Event) {
+		const isDark = (event.currentTarget as HTMLInputElement).checked;
+		themeMode.set(isDark ? 'dark' : 'light');
+	}
+
+	function onEthernetLabelsToggleChange(event: Event) {
+		showEthernetLabels = (event.currentTarget as HTMLInputElement).checked;
+		if (diagramViewMode === 'network') {
+			applyEthernetLabelVisibility(showEthernetLabels);
+		}
+	}
+
+	function toggleMapControls() {
+		mapControlsCollapsed = !mapControlsCollapsed;
+	}
+
+	function saveStateLabel(): string {
+		if (saveState === 'saved') {
+			return writable ? 'Saved' : 'Read-only';
+		}
+		if (saveState === 'saving') {
+			return 'Saving...';
+		}
+		if (saveState === 'error') {
+			return 'Save failed';
+		}
+		return writable ? 'Unsaved changes' : 'Unsaved (read-only)';
+	}
+
+	async function loadData() {
+		isLoadingData = true;
+		loadError = null;
+		saveError = null;
+
+		try {
+			const response = await fetch('/api/network-data', {
+				headers: { Accept: 'application/json' }
+			});
+			if (!response.ok) {
+				throw new Error(`API responded with ${response.status}`);
+			}
+			const body = (await response.json()) as {
+				data: NetworkData;
+				writable: boolean;
+				source: string;
+				updatedAt: string;
+			};
+			const validation = validateNetworkData(body.data);
+			if (!validation.valid || !validation.data) {
+				throw new Error('API returned invalid network data');
+			}
+
+				networkData = cloneNetworkData(validation.data);
+				ensureSelectedTargetValid();
+				writable = body.writable;
+				dataSourceLabel = body.source;
+				lastSavedSnapshot = JSON.stringify(networkData);
+				saveState = 'saved';
+				connectionDraftByKey = {};
+				revalidateDraft();
+				refreshGraph();
+			hasLoadedInitialData = true;
+			isLoadingData = false;
+			return;
+		} catch (apiError) {
+			console.warn('[OpenNetworkDiagram] API load unavailable, falling back to static JSON', apiError);
+		}
+
+		try {
+			const fallbackData = await loadNetworkData(jsonPath);
+				networkData = cloneNetworkData(fallbackData);
+				ensureSelectedTargetValid();
+				writable = false;
+				dataSourceLabel = jsonPath;
+				lastSavedSnapshot = JSON.stringify(networkData);
+				saveState = 'saved';
+				connectionDraftByKey = {};
+				revalidateDraft();
+				refreshGraph();
+			hasLoadedInitialData = true;
+		} catch (error) {
+			loadError = resolveErrorMessage(error);
+		}
+		isLoadingData = false;
+	}
+
+	function openDeleteConfirmation(target: DeleteTarget) {
+		deleteTarget = target;
+	}
+
+	function confirmDelete() {
+		if (!deleteTarget) {
+			return;
+		}
+		if (deleteTarget.type === 'machine') {
+			deleteMachine(deleteTarget.index);
+			return;
+		}
+		if (deleteTarget.type === 'device') {
+			deleteDevice(deleteTarget.index);
+			return;
+		}
+		deleteVm(deleteTarget.machineIndex, deleteTarget.vmIndex);
+	}
+
+	function exportPng() {
+		if (!cy) {
+			return;
+		}
+
+		const background =
+			exportBackground === 'transparent'
+				? 'transparent'
+				: currentTheme === 'dark'
+					? '#0b1220'
+					: '#e2e8f0';
+
+		const dataUrl = cy.png({
+			full: true,
+			scale: exportScale,
+			bg: background
+		});
+		const anchor = document.createElement('a');
+		anchor.href = dataUrl;
+		anchor.download = `${exportFileName || 'network-diagram'}.png`;
+		document.body.appendChild(anchor);
+		anchor.click();
+		anchor.remove();
+		showExportModal = false;
 	}
 
 	onMount(() => {
 		let resizeHandler: (() => void) | null = null;
 		let resizeTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
-		const initialize = async () => {
-			if (!cytoscape('layout', 'dagre')) {
-				cytoscape.use(dagre);
-			}
-			cy = cytoscape({
-				container,
-				elements: [],
-				layout: { name: 'preset' },
-				autoungrabify: true,
-				minZoom: 0.2,
-				maxZoom: 2.5,
-				style: [
-					{
-						selector: 'node',
-						style: {
-							label: 'data(label)',
-							'font-size': 12,
-							'font-weight': 600,
-							'text-wrap': 'wrap',
-							'text-max-width': '140px',
-							'text-valign': 'center',
-							'text-halign': 'center',
-							color: '#1e293b',
-							'text-outline-color': '#f8fafc',
-							'text-outline-width': 1,
-							width: 'data(nodeWidth)',
-							height: 'data(nodeHeight)',
-							'border-width': 2,
-							'border-color': '#64748b',
-							'background-color': '#f1f5f9'
-						}
-					},
-					{
-						selector: 'node[kind = "machine"]',
-						style: {
-							shape: 'round-rectangle',
-							'background-color': '#bfdbfe',
-							'border-color': '#3b82f6'
-						}
-					},
-					{
-						selector: 'node[kind = "vm"]',
-						style: {
-							shape: 'ellipse',
-							'background-color': '#bbf7d0',
-							'border-color': '#16a34a',
-							'font-size': 10,
-							'text-max-width': '120px'
-						}
-					},
-					{
-						selector: 'node[kind = "device"]',
-						style: {
-							shape: 'hexagon',
-							'background-color': '#fde68a',
-							'border-color': '#d97706'
-						}
-					},
-					{
-						selector: 'edge',
-						style: {
-							width: 2.2,
-							'curve-style': 'bezier',
-							'z-index-compare': 'manual',
-							'z-index': 10,
-							'target-arrow-shape': 'triangle',
-							'target-arrow-color': '#64748b',
-							'line-color': '#64748b',
-							label: 'data(label)',
-							'font-size': 9,
-							'text-rotation': 'autorotate',
-							color: '#0f172a',
-							'text-outline-color': '#f8fafc',
-							'text-outline-width': 3
-						}
-					},
-					{
-						selector: 'edge[kind = "physical"]',
-						style: {
-							'z-index': 30,
-							'line-style': 'solid',
-							'line-color': '#475569',
-							'target-arrow-color': '#475569',
-							'source-arrow-shape': 'none',
-							'target-arrow-shape': 'none',
-							label: '',
-							'text-margin-y': -14,
-							'source-label': '',
-							'target-label': '',
-							'source-text-offset': 32,
-							'target-text-offset': 32,
-							'source-text-margin-y': -9,
-							'target-text-margin-y': 9,
-							'source-text-rotation': 'autorotate',
-							'target-text-rotation': 'autorotate',
-							'text-background-color': '#f8fafc',
-							'text-background-opacity': 1,
-							'text-background-padding': '4px'
-						}
-					},
-					{
-						selector: 'edge[kind = "hosting"]',
-						style: {
-							'z-index': 5,
-							'line-style': 'dashed',
-							'line-dash-pattern': [7, 5],
-							'line-color': '#94a3b8',
-							'target-arrow-color': '#94a3b8',
-							'font-size': 8,
-							color: '#64748b'
-						}
+		if (!cytoscape('layout', 'dagre')) {
+			cytoscape.use(dagre);
+		}
+
+		themeMode.initialize();
+			unsubscribeTheme = themeMode.subscribe((theme) => {
+				currentTheme = theme;
+				if (cy) {
+					cy.style(createGraphStyles(theme));
+					runAdaptiveLayout(cy);
+					if (diagramViewMode === 'network') {
+						applyPhysicalEdgeDeconfliction(cy);
+						applyEthernetLabelVisibility(showEthernetLabels);
 					}
-				]
-			});
-			await reloadDataFromJsonPath();
-
-			cy.on('tap', 'node', (event) => {
-				const data = event.target.data() as GraphNodeData;
-				selectedNodeId = data.id;
-				selectedDetails = data.details ?? null;
-			});
-
-			cy.on('tap', (event) => {
-				if (event.target === cy) {
-					closeDetails();
 				}
 			});
 
-			cy.on('mouseover', 'node', (event) => {
-				const node = event.target;
-				const renderedPosition = node.renderedPosition();
-				const data = node.data() as GraphNodeData;
-				const nextText = data.rawName ?? data.label;
-				const rawX = renderedPosition.x + tooltipOffset.x;
-				const rawY = renderedPosition.y + tooltipOffset.y;
-				const clampedPosition = clampTooltipPosition(rawX, rawY);
-				tooltip = {
-					visible: true,
-					text: nextText,
-					x: clampedPosition.x,
-					y: clampedPosition.y
-				};
-			});
+		cy = cytoscape({
+			container,
+			elements: [],
+			layout: { name: 'preset' },
+			autoungrabify: true,
+			minZoom: 0.2,
+			maxZoom: 2.5,
+			style: createGraphStyles(get(themeMode))
+		});
 
-			cy.on('mouseout', 'node', () => {
-				tooltip.visible = false;
-			});
+		void loadData().finally(() => {
+			isLoadingData = false;
+		});
 
-			cy.on('pan zoom', () => {
-				tooltip.visible = false;
-			});
+		cy.on('tap', 'node', (event) => {
+			const data = event.target.data() as GraphNodeData;
+			selectedTarget = decodeNodeId(data.id);
+		});
 
-			resizeHandler = () => {
-				if (resizeTimeoutId !== null) {
-					clearTimeout(resizeTimeoutId);
-				}
+		cy.on('tap', (event) => {
+			if (event.target === cy) {
+				selectedTarget = null;
+			}
+		});
 
-				resizeTimeoutId = setTimeout(() => {
+		cy.on('mouseover', 'node', (event) => {
+			const node = event.target;
+			const renderedPosition = node.renderedPosition();
+			const data = node.data() as GraphNodeData;
+			const nextText = data.rawName ?? data.label;
+			const rawX = renderedPosition.x + tooltipOffset.x;
+			const rawY = renderedPosition.y + tooltipOffset.y;
+			const clampedPosition = clampTooltipPosition(rawX, rawY);
+			tooltip = {
+				visible: true,
+				text: nextText,
+				x: clampedPosition.x,
+				y: clampedPosition.y
+			};
+		});
+
+		cy.on('mouseout', 'node', () => {
+			tooltip.visible = false;
+		});
+
+		cy.on('pan zoom', () => {
+			tooltip.visible = false;
+		});
+
+		resizeHandler = () => {
+			if (resizeTimeoutId !== null) {
+				clearTimeout(resizeTimeoutId);
+			}
+
+			resizeTimeoutId = setTimeout(() => {
 					if (!cy) {
 						return;
 					}
-					runAdaptiveLayout(cy, cameraMode);
-					applyPhysicalEdgeDeconfliction(cy);
-					applyEthernetLabelVisibility(cy, showEthernetLabels);
+					runAdaptiveLayout(cy);
+					if (diagramViewMode === 'network') {
+						applyPhysicalEdgeDeconfliction(cy);
+						applyEthernetLabelVisibility(showEthernetLabels);
+					}
 					resizeTimeoutId = null;
 				}, 100);
 			};
-			window.addEventListener('resize', resizeHandler);
-		};
-
-		void initialize().catch((error: unknown) => {
-			loadError =
-				error instanceof Error && error.message
-					? error.message
-					: 'Failed to initialize network diagram';
-		});
+		window.addEventListener('resize', resizeHandler);
 
 		return () => {
+			clearAutosaveTimer();
 			if (resizeHandler) {
 				window.removeEventListener('resize', resizeHandler);
 			}
@@ -1125,6 +1480,10 @@
 				clearTimeout(resizeTimeoutId);
 				resizeTimeoutId = null;
 			}
+			if (unsubscribeTheme) {
+				unsubscribeTheme();
+				unsubscribeTheme = null;
+			}
 			if (cy) {
 				cy.destroy();
 				cy = null;
@@ -1133,54 +1492,100 @@
 	});
 </script>
 
-<div class="diagram-shell">
-	<div class="diagram-stage" bind:this={diagramStage}>
-		<div class="diagram-canvas" bind:this={container}></div>
+	<div class="diagram-shell">
+		<div class="diagram-stage" bind:this={diagramStage}>
+			<div class="diagram-canvas" bind:this={container}></div>
+
+			<div class="map-controls-shell">
+				{#if mapControlsCollapsed}
+					<button type="button" class="controls-toggle" on:click={toggleMapControls}>Show Controls</button>
+				{:else}
+					<div class="map-controls">
+						<button type="button" on:click={loadData} disabled={isLoadingData}>Reload JSON</button>
+						<button type="button" on:click={addMachine}>Add Machine</button>
+						<button type="button" on:click={addDevice}>Add Device</button>
+						<label class="select-control">
+							<span>Diagram View</span>
+							<select
+								value={diagramViewMode}
+								aria-label="Select diagram view"
+								on:change={onDiagramViewSelectChange}
+							>
+								<option value="network">Network view (with ethernet)</option>
+								<option value="device">Device view (without ethernet)</option>
+							</select>
+						</label>
+						<label
+							class="toggle-control"
+							class:disabled={diagramViewMode === 'device'}
+							title={diagramViewMode === 'device' ? 'Ethernet labels are available in Network view.' : undefined}
+						>
+							<span>Ethernet Labels</span>
+							<input
+								class="toggle-input"
+								type="checkbox"
+								checked={showEthernetLabels}
+								aria-label="Toggle ethernet labels"
+								disabled={diagramViewMode === 'device'}
+								on:change={onEthernetLabelsToggleChange}
+							/>
+							<span class="toggle-track" aria-hidden="true"><span class="toggle-thumb"></span></span>
+						</label>
+						<button type="button" on:click={() => (showExportModal = true)}>Export PNG</button>
+						<label class="toggle-control">
+							<span>Dark Mode</span>
+							<input
+								class="toggle-input"
+								type="checkbox"
+								checked={currentTheme === 'dark'}
+								aria-label="Toggle dark mode"
+								on:change={onThemeToggleChange}
+							/>
+							<span class="toggle-track" aria-hidden="true"><span class="toggle-thumb"></span></span>
+						</label>
+						<label class="toggle-control" class:disabled={!hasAnyVmHosts}>
+							<span>Hide All VMs</span>
+							<input
+								class="toggle-input"
+								type="checkbox"
+								checked={areAllVmHostsCollapsed}
+								aria-label="Toggle all virtual machine visibility"
+								disabled={!hasAnyVmHosts}
+								on:change={onAllVmsToggleChange}
+							/>
+							<span class="toggle-track" aria-hidden="true"><span class="toggle-thumb"></span></span>
+						</label>
+						<button
+							type="button"
+							class="controls-collapse-tab"
+							aria-label="Hide controls"
+							title="Hide controls"
+							on:click={toggleMapControls}
+						>
+							›
+						</button>
+					</div>
+				{/if}
+			</div>
 
-		<div class="map-controls">
-			<button type="button" on:click={reloadDataFromJsonPath} disabled={isLoadingData}>
-				Reload Default JSON
-			</button>
-			<button
-				type="button"
-				class:active={cameraMode === 'readable'}
-				aria-pressed={cameraMode === 'readable'}
-				on:click={() => applyCameraMode('readable')}
-			>
-				Readable Fit
-			</button>
-			<button
-				type="button"
-				class:active={cameraMode === 'overview'}
-				aria-pressed={cameraMode === 'overview'}
-				on:click={() => applyCameraMode('overview')}
-			>
-				Overview
-			</button>
-			<button type="button" aria-pressed={showEthernetLabels} on:click={toggleEthernetLabels}>
-				{showEthernetLabels ? 'Hide Ethernet Labels' : 'Show Ethernet Labels'}
-			</button>
-			<button
-				type="button"
-				on:click={() => setCollapsedStateForAll(true)}
-				disabled={!hasAnyVmHosts}
-			>
-				Collapse All VMs
-			</button>
-			<button
-				type="button"
-				on:click={() => setCollapsedStateForAll(false)}
-				disabled={!hasAnyVmHosts}
-			>
-				Expand All VMs
-			</button>
-		</div>
 		<div class="data-source">Source: {dataSourceLabel}</div>
+		<div class="status-chip" class:error={saveState === 'error'}>
+			{saveStateLabel()}
+		</div>
+
+		{#if hasLoadedInitialData && !writable}
+			<div class="readonly-banner">{readOnlyNotice}</div>
+		{/if}
+
 		{#if isLoadingData}
 			<div class="status-chip loading">Loading JSON...</div>
 		{/if}
+
 		{#if loadError}
-			<div class="status-chip error">{loadError}</div>
+			<div class="status-chip error secondary">{loadError}</div>
+		{/if}
+		{#if saveError}
+			<div class="status-chip error tertiary">{saveError}</div>
 		{/if}
 
 		{#if tooltip.visible}
@@ -1200,93 +1605,727 @@
 			</ul>
 		</details>
 	{/if}
+
+	{#if validationIssues.length > 0}
+		<details class="validation-panel">
+			<summary>Validation issues ({validationIssues.length})</summary>
+			<ul>
+				{#each validationIssues as issue (`${issue.path}:${issue.message}`)}
+					<li><strong>{issue.path}</strong>: {issue.message}</li>
+				{/each}
+			</ul>
+		</details>
+	{/if}
 </div>
 
 <Modal
-	isOpen={selectedDetails !== null}
-	title={selectedDetails?.name ?? ''}
-	maxWidth="760px"
-	on:close={closeDetails}
+	isOpen={selectedTarget !== null}
+	title={
+		selectedTarget?.type === 'machine'
+			? selectedMachine?.machineName ?? 'Machine'
+			: selectedTarget?.type === 'device'
+				? selectedDevice?.name ?? 'Device'
+				: selectedVm?.name ?? 'Virtual Machine'
+	}
+	maxWidth="880px"
+	on:close={() => (selectedTarget = null)}
 >
-	{#if selectedDetails?.type === 'machine'}
-		<div class="modal-actions">
-			{#if selectedNodeId && (machineVmIndex[selectedNodeId]?.vmCount ?? 0) > 0}
+	<div class="icon-search">
+		<label>
+			Icon Search
+			<input type="search" bind:value={iconSearch} placeholder="Filter icon keys..." />
+		</label>
+	</div>
+	{#if selectedTarget?.type === 'machine' && selectedMachine}
+		<div class="inline-actions">
+			{#if selectedMachineHostId && selectedMachineVmCount > 0}
 				<button type="button" on:click={toggleSelectedMachineVmVisibility}>
-					{collapsedHosts[selectedNodeId] ? 'Show VMs on map' : 'Hide VMs on map'}
+					{isHostCollapsed(selectedMachineHostId) ? 'Show VMs on Diagram' : 'Hide VMs on Diagram'}
 				</button>
 			{/if}
 		</div>
-
-		<div class="details-grid">
-			<p><strong>IP:</strong> {selectedDetails.ip}</p>
-			<p><strong>Role:</strong> {selectedDetails.role}</p>
-			<p><strong>OS:</strong> {selectedDetails.os}</p>
-			<p><strong>CPU:</strong> {selectedDetails.cpu}</p>
-			<p><strong>RAM:</strong> {selectedDetails.ram}</p>
-			{#if selectedDetails.gpu}
-				<p><strong>GPU:</strong> {selectedDetails.gpu}</p>
-			{/if}
-		</div>
-
-		<h4>Ports</h4>
-		<ul class="details-list">
-			{#if selectedDetails.ports.length === 0}
-				<li>None</li>
-			{:else}
-				{#each selectedDetails.ports as port (port.portName)}
-					<li>
-						<strong>{port.portName}</strong> ({port.speedGbps ?? 1}GbE): {formatConnection(
-							port.connectedTo
+		<section class="edit-section">
+			<label>
+				Machine Name
+				<input
+					type="text"
+					value={selectedMachine.machineName}
+					on:change={(event) =>
+						updateMachineName(selectedTarget.index, (event.currentTarget as HTMLInputElement).value)}
+				/>
+			</label>
+			<label>
+				IP Address
+				<input
+					type="text"
+					value={selectedMachine.ipAddress}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.machines[selectedTarget.index].ipAddress = (
+									event.currentTarget as HTMLInputElement
+								).value;
+							},
+							{ autosave: true }
 						)}
-					</li>
-				{/each}
-			{/if}
-		</ul>
-
-		<h4>Virtual Machines ({selectedDetails.vmCount})</h4>
-		<ul class="details-list">
-			{#if selectedDetails.vms.length === 0}
-				<li>None</li>
-			{:else}
-				{#each selectedDetails.vms as vm (`${vm.name}:${vm.ip}`)}
-					<li>
-						<strong>{vm.name}</strong> ({vm.role}) - {vm.ip}
-					</li>
-				{/each}
-			{/if}
-		</ul>
-	{:else if selectedDetails?.type === 'device'}
-		<div class="details-grid">
-			<p><strong>Type:</strong> {selectedDetails.deviceType}</p>
-			<p><strong>IP:</strong> {selectedDetails.ip}</p>
-			{#if selectedDetails.notes}
-				<p><strong>Notes:</strong> {selectedDetails.notes}</p>
-			{/if}
-		</div>
-
-		<h4>Ports</h4>
-		<ul class="details-list">
-			{#if selectedDetails.ports.length === 0}
-				<li>None</li>
-			{:else}
-				{#each selectedDetails.ports as port (port.portName)}
-					<li>
-						<strong>{port.portName}</strong> ({port.speedGbps ?? 1}GbE): {formatConnection(
-							port.connectedTo
+				/>
+			</label>
+			<label>
+				Role
+				<input
+					type="text"
+					value={selectedMachine.role}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.machines[selectedTarget.index].role = (
+									event.currentTarget as HTMLInputElement
+								).value;
+							},
+							{ autosave: true }
 						)}
-					</li>
-				{/each}
-			{/if}
-		</ul>
-	{:else if selectedDetails?.type === 'vm'}
-		<div class="details-grid">
-			<p><strong>Role:</strong> {selectedDetails.role}</p>
-			<p><strong>IP:</strong> {selectedDetails.ip}</p>
-			<p><strong>Host:</strong> {selectedDetails.hostName}</p>
+				/>
+			</label>
+			<label>
+				Operating System
+				<input
+					type="text"
+					value={selectedMachine.operatingSystem}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.machines[selectedTarget.index].operatingSystem = (
+									event.currentTarget as HTMLInputElement
+								).value;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+			<label>
+				Icon
+				<input
+					type="text"
+					list="icon-options"
+					value={selectedMachine.iconKey ?? ''}
+					on:change={(event) =>
+						mutateDraft(
+							(draft) => {
+								const nextValue = (event.currentTarget as HTMLInputElement).value.trim();
+								draft.machines[selectedTarget.index].iconKey = nextValue || undefined;
+							},
+							{ autosave: true }
+						)}
+					placeholder="server"
+				/>
+			</label>
+		</section>
+
+		<section class="edit-section">
+			<h4>Hardware</h4>
+			<div class="field-row">
+				<label>
+					CPU
+					<input
+						type="text"
+						value={selectedMachine.hardware.cpu}
+						on:input={(event) =>
+							mutateDraft(
+								(draft) => {
+									draft.machines[selectedTarget.index].hardware.cpu = (
+										event.currentTarget as HTMLInputElement
+									).value;
+								},
+								{ autosave: true }
+							)}
+					/>
+				</label>
+				<label>
+					RAM
+					<input
+						type="text"
+						value={selectedMachine.hardware.ram}
+						on:input={(event) =>
+							mutateDraft(
+								(draft) => {
+									draft.machines[selectedTarget.index].hardware.ram = (
+										event.currentTarget as HTMLInputElement
+									).value;
+								},
+								{ autosave: true }
+							)}
+					/>
+				</label>
+				<label>
+					Ports
+					<input
+						type="number"
+						min="0"
+						value={selectedMachine.hardware.networkPorts}
+						on:input={(event) =>
+							mutateDraft(
+								(draft) => {
+									const rawValue = (event.currentTarget as HTMLInputElement).value;
+									const parsed = Number(rawValue);
+									draft.machines[selectedTarget.index].hardware.networkPorts = Number.isFinite(
+										parsed
+									)
+										? parsed
+										: 0;
+								},
+								{ autosave: true }
+							)}
+					/>
+				</label>
+			</div>
+		</section>
+
+		<section class="edit-section">
+			<h4>Virtual Machines</h4>
+			<div class="inline-actions">
+				<button
+					type="button"
+					on:click={() =>
+						mutateDraft((draft) => {
+							draft.machines[selectedTarget.index].software.vms.push({
+								...createEmptyVm(),
+								name: nextUniqueName(
+									'New VM',
+									draft.machines[selectedTarget.index].software.vms.map((vm) => vm.name)
+								)
+							});
+						})}
+				>
+					Add VM
+				</button>
+			</div>
+			{#each selectedMachine.software.vms as vm, vmIndex (`${vm.name}:${vm.ipAddress}:${vmIndex}`)}
+				<div class="item-card">
+					<label>
+						Name
+						<input
+							type="text"
+							bind:value={vm.name}
+							on:input={() => mutateDraft(() => undefined, { autosave: true })}
+						/>
+					</label>
+					<label>
+						Role
+						<input
+							type="text"
+							bind:value={vm.role}
+							on:input={() => mutateDraft(() => undefined, { autosave: true })}
+						/>
+					</label>
+					<label>
+						IP
+						<input
+							type="text"
+							bind:value={vm.ipAddress}
+							on:input={() => mutateDraft(() => undefined, { autosave: true })}
+						/>
+					</label>
+					<label>
+						Icon
+						<input
+							type="text"
+							list="icon-options"
+							bind:value={vm.iconKey}
+							on:change={() => mutateDraft(() => undefined, { autosave: true })}
+						/>
+					</label>
+					<button
+						type="button"
+						class="danger"
+						on:click={() => openDeleteConfirmation({ type: 'vm', machineIndex: selectedTarget.index, vmIndex })}
+					>
+						Delete VM
+					</button>
+				</div>
+			{/each}
+		</section>
+
+			<section class="edit-section">
+				<h4>Ports</h4>
+				<datalist id="machine-connectable-owner-options">
+					{#each machineConnectableOwnerNames as ownerName (ownerName)}
+						<option value={ownerName}></option>
+					{/each}
+				</datalist>
+				<div class="inline-actions">
+					<button
+						type="button"
+					on:click={() =>
+						mutateDraft((draft) => {
+							draft.machines[selectedTarget.index].ports ??= [];
+							draft.machines[selectedTarget.index].ports.push({
+								...createEmptyPort('eth'),
+								portName: nextUniqueName(
+									'eth0',
+									draft.machines[selectedTarget.index].ports.map((port) => port.portName)
+								)
+							});
+						})}
+				>
+					Add Port
+				</button>
+			</div>
+			{#each selectedMachine.ports ?? [] as port, portIndex (`${port.portName}:${portIndex}`)}
+				<div class="item-card">
+					<label>
+						Port Name
+						<input
+							type="text"
+							value={port.portName}
+							on:change={(event) =>
+								updateMachinePortName(selectedTarget.index, portIndex, (event.currentTarget as HTMLInputElement).value)}
+						/>
+					</label>
+					<label>
+						Speed (Gbps)
+						<input
+							type="number"
+							min="0"
+							bind:value={port.speedGbps}
+							on:input={() => mutateDraft(() => undefined, { autosave: true })}
+						/>
+					</label>
+						<label>
+							Connect To Device
+							<input
+								type="text"
+								list="machine-connectable-owner-options"
+								value={resolveConnectionDraft('machine', selectedMachine.machineName, port).device}
+								on:change={(event) =>
+									onMachinePortConnectionFieldChange(
+									selectedTarget.index,
+									portIndex,
+									'device',
+									(event.currentTarget as HTMLInputElement).value
+								)}
+						/>
+					</label>
+					<label>
+						Target Port
+						<input
+							type="text"
+							value={resolveConnectionDraft('machine', selectedMachine.machineName, port).port}
+							on:change={(event) =>
+								onMachinePortConnectionFieldChange(
+									selectedTarget.index,
+									portIndex,
+									'port',
+									(event.currentTarget as HTMLInputElement).value
+								)}
+						/>
+					</label>
+					<div class="item-actions">
+						<button
+							type="button"
+							on:click={() => {
+								clearConnectionDraft('machine', selectedMachine.machineName, port.portName);
+								updateMachinePortConnection(selectedTarget.index, portIndex, undefined);
+							}}
+						>
+							Disconnect
+						</button>
+						<button
+							type="button"
+							class="danger"
+							on:click={() => {
+								clearConnectionDraft('machine', selectedMachine.machineName, port.portName);
+								applyDraft(deletePort(networkData, 'machine', selectedMachine.machineName, port.portName));
+							}}
+						>
+							Delete Port
+						</button>
+					</div>
+				</div>
+			{/each}
+		</section>
+
+		<div class="modal-footer">
+			<button type="button" class="danger" on:click={() => openDeleteConfirmation({ type: 'machine', index: selectedTarget.index })}>
+				Delete Machine
+			</button>
+		</div>
+	{:else if selectedTarget?.type === 'device' && selectedDevice}
+		<section class="edit-section">
+			<label>
+				Device Name
+				<input
+					type="text"
+					value={selectedDevice.name}
+					on:change={(event) =>
+						updateDeviceName(selectedTarget.index, (event.currentTarget as HTMLInputElement).value)}
+				/>
+			</label>
+			<label>
+				IP Address
+				<input
+					type="text"
+					value={selectedDevice.ipAddress}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.devices[selectedTarget.index].ipAddress = (
+									event.currentTarget as HTMLInputElement
+								).value;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+			<label>
+				Type
+				<input
+					type="text"
+					value={selectedDevice.type}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.devices[selectedTarget.index].type = (
+									event.currentTarget as HTMLInputElement
+								).value;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+			<label>
+				Notes
+				<textarea
+					value={selectedDevice.notes ?? ''}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.devices[selectedTarget.index].notes = (
+									event.currentTarget as HTMLTextAreaElement
+								).value;
+							},
+							{ autosave: true }
+						)}
+				></textarea>
+			</label>
+			<label>
+				Icon
+				<input
+					type="text"
+					list="icon-options"
+					value={selectedDevice.iconKey ?? ''}
+					on:change={(event) =>
+						mutateDraft(
+							(draft) => {
+								const nextValue = (event.currentTarget as HTMLInputElement).value.trim();
+								draft.devices[selectedTarget.index].iconKey = nextValue || undefined;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+		</section>
+
+			<section class="edit-section">
+				<h4>Ports</h4>
+				<datalist id="device-connectable-owner-options">
+					{#each deviceConnectableOwnerNames as ownerName (ownerName)}
+						<option value={ownerName}></option>
+					{/each}
+				</datalist>
+				<div class="inline-actions">
+					<button
+						type="button"
+					on:click={() =>
+						mutateDraft((draft) => {
+							draft.devices[selectedTarget.index].ports ??= [];
+							draft.devices[selectedTarget.index].ports.push({
+								...createEmptyPort('port'),
+								portName: nextUniqueName(
+									'port0',
+									draft.devices[selectedTarget.index].ports.map((port) => port.portName)
+								)
+							});
+						})}
+				>
+					Add Port
+				</button>
+			</div>
+			{#each selectedDevice.ports ?? [] as port, portIndex (`${port.portName}:${portIndex}`)}
+				<div class="item-card">
+					<label>
+						Port Name
+						<input
+							type="text"
+							value={port.portName}
+							on:change={(event) =>
+								updateDevicePortName(selectedTarget.index, portIndex, (event.currentTarget as HTMLInputElement).value)}
+						/>
+					</label>
+					<label>
+						Speed (Gbps)
+						<input
+							type="number"
+							min="0"
+							bind:value={port.speedGbps}
+							on:input={() => mutateDraft(() => undefined, { autosave: true })}
+						/>
+					</label>
+						<label>
+							Connect To Device
+							<input
+								type="text"
+								list="device-connectable-owner-options"
+								value={resolveConnectionDraft('device', selectedDevice.name, port).device}
+								on:change={(event) =>
+									onDevicePortConnectionFieldChange(
+									selectedTarget.index,
+									portIndex,
+									'device',
+									(event.currentTarget as HTMLInputElement).value
+								)}
+						/>
+					</label>
+					<label>
+						Target Port
+						<input
+							type="text"
+							value={resolveConnectionDraft('device', selectedDevice.name, port).port}
+							on:change={(event) =>
+								onDevicePortConnectionFieldChange(
+									selectedTarget.index,
+									portIndex,
+									'port',
+									(event.currentTarget as HTMLInputElement).value
+								)}
+						/>
+					</label>
+					<div class="item-actions">
+						<button
+							type="button"
+							on:click={() => {
+								clearConnectionDraft('device', selectedDevice.name, port.portName);
+								updateDevicePortConnection(selectedTarget.index, portIndex, undefined);
+							}}
+						>
+							Disconnect
+						</button>
+						<button
+							type="button"
+							class="danger"
+							on:click={() => {
+								clearConnectionDraft('device', selectedDevice.name, port.portName);
+								applyDraft(deletePort(networkData, 'device', selectedDevice.name, port.portName));
+							}}
+						>
+							Delete Port
+						</button>
+					</div>
+				</div>
+			{/each}
+		</section>
+
+		<div class="modal-footer">
+			<button type="button" class="danger" on:click={() => openDeleteConfirmation({ type: 'device', index: selectedTarget.index })}>
+				Delete Device
+			</button>
+		</div>
+	{:else if selectedTarget?.type === 'vm' && selectedVm}
+		<section class="edit-section">
+			<label>
+				VM Name
+				<input
+					type="text"
+					value={selectedVm.name}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.machines[selectedTarget.machineIndex].software.vms[
+									selectedTarget.vmIndex
+								].name = (event.currentTarget as HTMLInputElement).value;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+			<label>
+				Role
+				<input
+					type="text"
+					value={selectedVm.role}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.machines[selectedTarget.machineIndex].software.vms[
+									selectedTarget.vmIndex
+								].role = (event.currentTarget as HTMLInputElement).value;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+			<label>
+				IP Address
+				<input
+					type="text"
+					value={selectedVm.ipAddress}
+					on:input={(event) =>
+						mutateDraft(
+							(draft) => {
+								draft.machines[selectedTarget.machineIndex].software.vms[
+									selectedTarget.vmIndex
+								].ipAddress = (event.currentTarget as HTMLInputElement).value;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+			<label>
+				Icon
+				<input
+					type="text"
+					list="icon-options"
+					value={selectedVm.iconKey ?? ''}
+					on:change={(event) =>
+						mutateDraft(
+							(draft) => {
+								const nextValue = (event.currentTarget as HTMLInputElement).value.trim();
+								draft.machines[selectedTarget.machineIndex].software.vms[
+									selectedTarget.vmIndex
+								].iconKey = nextValue || undefined;
+							},
+							{ autosave: true }
+						)}
+				/>
+			</label>
+		</section>
+		<div class="modal-footer">
+			<button
+				type="button"
+				class="danger"
+				on:click={() =>
+					openDeleteConfirmation({
+						type: 'vm',
+						machineIndex: selectedTarget.machineIndex,
+						vmIndex: selectedTarget.vmIndex
+					})}
+			>
+				Delete VM
+			</button>
 		</div>
 	{/if}
 </Modal>
 
+<Modal
+	isOpen={addModalKind !== null}
+	title={addModalKind === 'machine' ? 'Add Machine' : 'Add Device'}
+	maxWidth="760px"
+	on:close={() => (addModalKind = null)}
+>
+	<div class="icon-search">
+		<label>
+			Icon Search
+			<input type="search" bind:value={iconSearch} placeholder="Filter icon keys..." />
+		</label>
+	</div>
+	{#if addModalKind === 'machine'}
+		<section class="edit-section">
+			<label>
+				Machine Name
+				<input type="text" bind:value={newMachineDraft.machineName} />
+			</label>
+			<label>
+				IP Address
+				<input type="text" bind:value={newMachineDraft.ipAddress} />
+			</label>
+			<label>
+				Role
+				<input type="text" bind:value={newMachineDraft.role} />
+			</label>
+			<label>
+				Operating System
+				<input type="text" bind:value={newMachineDraft.operatingSystem} />
+			</label>
+			<label>
+				Icon
+				<input type="text" list="icon-options" bind:value={newMachineDraft.iconKey} />
+			</label>
+		</section>
+	{:else if addModalKind === 'device'}
+		<section class="edit-section">
+			<label>
+				Device Name
+				<input type="text" bind:value={newDeviceDraft.name} />
+			</label>
+			<label>
+				IP Address
+				<input type="text" bind:value={newDeviceDraft.ipAddress} />
+			</label>
+			<label>
+				Type
+				<input type="text" bind:value={newDeviceDraft.type} />
+			</label>
+			<label>
+				Notes
+				<textarea bind:value={newDeviceDraft.notes}></textarea>
+			</label>
+			<label>
+				Icon
+				<input type="text" list="icon-options" bind:value={newDeviceDraft.iconKey} />
+			</label>
+		</section>
+	{/if}
+
+	<div class="modal-footer">
+		<button type="button" on:click={submitAddEntity}>Add</button>
+	</div>
+</Modal>
+
+<Modal
+	isOpen={deleteTarget !== null}
+	title="Confirm Delete"
+	maxWidth="520px"
+	on:close={() => (deleteTarget = null)}
+>
+	<p>This action will remove the selected item and clean up related links. Continue?</p>
+	<div class="modal-footer">
+		<button type="button" class="danger" on:click={confirmDelete}>Delete</button>
+		<button type="button" on:click={() => (deleteTarget = null)}>Cancel</button>
+	</div>
+</Modal>
+
+<Modal isOpen={showExportModal} title="Export PNG" maxWidth="520px" on:close={() => (showExportModal = false)}>
+	<section class="edit-section">
+		<label>
+			File Name
+			<input type="text" bind:value={exportFileName} />
+		</label>
+		<label>
+			Scale
+			<select bind:value={exportScale}>
+				<option value={1}>1x</option>
+				<option value={2}>2x</option>
+				<option value={3}>3x</option>
+			</select>
+		</label>
+		<label>
+			Background
+			<select bind:value={exportBackground}>
+				<option value="theme">Match Theme</option>
+				<option value="transparent">Transparent</option>
+			</select>
+		</label>
+	</section>
+	<div class="modal-footer">
+		<button type="button" on:click={exportPng}>Download PNG</button>
+	</div>
+</Modal>
+
+<datalist id="icon-options">
+	{#each filteredIconDefinitions as icon (icon.key)}
+		<option value={icon.key}>{icon.label}</option>
+	{/each}
+</datalist>
+
 <style>
 	.diagram-shell {
 		display: grid;
@@ -1299,9 +2338,9 @@
 	.diagram-stage {
 		position: relative;
 		min-height: 580px;
-		border: 1px solid #cbd5e1;
+		border: 1px solid var(--panel-border);
 		border-radius: 10px;
-		background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+		background: linear-gradient(180deg, var(--panel-bg) 0%, color-mix(in oklab, var(--panel-bg) 88%, black 12%) 100%);
 		overflow: hidden;
 	}
 
@@ -1310,35 +2349,104 @@
 		inset: 0;
 	}
 
-	.map-controls {
+	.map-controls-shell {
 		position: absolute;
 		top: 0.75rem;
 		right: 0.75rem;
-		display: flex;
-		gap: 0.4rem;
 		z-index: 14;
-		background: rgba(248, 250, 252, 0.94);
-		border: 1px solid #cbd5e1;
-		border-radius: 10px;
-		padding: 0.4rem;
-		backdrop-filter: blur(2px);
 	}
 
-	.map-controls button {
-		border: 1px solid #cbd5e1;
-		background: #ffffff;
-		color: #0f172a;
+	.map-controls {
+		display: flex;
+		gap: 0.4rem;
+		background: color-mix(in oklab, var(--panel-bg) 93%, transparent 7%);
+		border: 1px solid var(--panel-border);
+		border-radius: 10px;
+		padding: 0.4rem;
+		padding-right: 2.2rem;
+		flex-wrap: wrap;
+		max-width: min(84vw, 760px);
+		position: relative;
+	}
+
+	.controls-toggle {
+		display: flex;
+		gap: 0.4rem;
+		border: 1px solid var(--panel-border);
+		background: color-mix(in oklab, var(--panel-bg) 93%, transparent 7%);
+		color: var(--panel-contrast);
 		padding: 0.35rem 0.55rem;
-		border-radius: 7px;
-		font-size: 0.78rem;
+		border-radius: 10px;
+		font-size: 0.8rem;
 		font-weight: 600;
 		cursor: pointer;
 	}
 
-	.map-controls button.active {
-		background: #0f172a;
-		color: #f8fafc;
-		border-color: #0f172a;
+	.controls-collapse-tab {
+		position: absolute;
+		top: 50%;
+		right: -0.95rem;
+		transform: translateY(-50%);
+		width: 1.9rem;
+		height: 2.1rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--panel-border);
+		border-radius: 0 9px 9px 0;
+		background: color-mix(in oklab, var(--panel-bg) 93%, transparent 7%);
+		color: var(--panel-contrast);
+		font-size: 1.2rem;
+		font-weight: 700;
+		line-height: 1;
+		cursor: pointer;
+		box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
+	}
+
+	.controls-collapse-tab:hover {
+		background: color-mix(in oklab, var(--panel-bg) 82%, #3b82f6 18%);
+	}
+
+	.controls-collapse-tab:focus-visible {
+		outline: 2px solid #60a5fa;
+		outline-offset: 2px;
+	}
+
+	.map-controls button,
+	.map-controls select,
+	.modal-footer button,
+	.item-actions button,
+	.inline-actions button {
+		border: 1px solid var(--panel-border);
+		background: var(--panel-bg);
+		color: var(--panel-contrast);
+		padding: 0.35rem 0.55rem;
+		border-radius: 7px;
+		font-size: 0.8rem;
+		font-weight: 600;
+		cursor: pointer;
+	}
+
+	.map-controls select {
+		min-width: 13.5rem;
+	}
+
+	.select-control {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		border: 1px solid var(--panel-border);
+		background: var(--panel-bg);
+		color: var(--panel-contrast);
+		padding: 0.32rem 0.5rem;
+		border-radius: 7px;
+		font-size: 0.78rem;
+		font-weight: 600;
+	}
+
+	button.danger {
+		border-color: #ef4444;
+		color: #dc2626;
 	}
 
 	.map-controls button:disabled {
@@ -1346,15 +2454,79 @@
 		cursor: not-allowed;
 	}
 
+	.toggle-control {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		border: 1px solid var(--panel-border);
+		background: var(--panel-bg);
+		color: var(--panel-contrast);
+		padding: 0.32rem 0.5rem;
+		border-radius: 7px;
+		font-size: 0.78rem;
+		font-weight: 600;
+		cursor: pointer;
+		position: relative;
+	}
+
+	.toggle-control.disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
+	.toggle-input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+		width: 1px;
+		height: 1px;
+	}
+
+	.toggle-track {
+		width: 2rem;
+		height: 1.1rem;
+		border-radius: 999px;
+		border: 1px solid var(--panel-border);
+		background: color-mix(in oklab, var(--panel-bg) 80%, black 20%);
+		display: inline-flex;
+		align-items: center;
+		padding: 0.08rem;
+		transition: background-color 0.15s ease, border-color 0.15s ease;
+	}
+
+	.toggle-thumb {
+		width: 0.86rem;
+		height: 0.86rem;
+		border-radius: 999px;
+		background: #ffffff;
+		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
+		transform: translateX(0);
+		transition: transform 0.15s ease;
+	}
+
+	.toggle-input:checked + .toggle-track {
+		background: #2563eb;
+		border-color: #2563eb;
+	}
+
+	.toggle-input:checked + .toggle-track .toggle-thumb {
+		transform: translateX(0.9rem);
+	}
+
+	.toggle-input:focus-visible + .toggle-track {
+		outline: 2px solid #60a5fa;
+		outline-offset: 2px;
+	}
+
 	.data-source {
 		position: absolute;
 		top: 0.75rem;
 		left: 0.75rem;
 		z-index: 14;
-		border: 1px solid #cbd5e1;
+		border: 1px solid var(--panel-border);
 		border-radius: 8px;
-		background: rgba(248, 250, 252, 0.94);
-		color: #334155;
+		background: color-mix(in oklab, var(--panel-bg) 93%, transparent 7%);
+		color: var(--muted-text);
 		padding: 0.35rem 0.5rem;
 		font-size: 0.72rem;
 		font-weight: 600;
@@ -1367,26 +2539,49 @@
 	.status-chip {
 		position: absolute;
 		left: 0.75rem;
+		top: 2.75rem;
 		z-index: 14;
+		border: 1px solid var(--panel-border);
 		border-radius: 8px;
 		padding: 0.35rem 0.5rem;
 		font-size: 0.73rem;
 		font-weight: 600;
+		background: var(--chip-bg);
+		color: var(--chip-text);
 	}
 
 	.status-chip.loading {
-		top: 2.75rem;
-		border: 1px solid #93c5fd;
-		background: #dbeafe;
-		color: #1e3a8a;
+		top: 4.95rem;
+	}
+
+	.status-chip.secondary {
+		top: 6.95rem;
+		max-width: min(65vw, 560px);
+	}
+
+	.status-chip.tertiary {
+		top: 8.95rem;
+		max-width: min(65vw, 560px);
 	}
 
 	.status-chip.error {
-		top: 2.75rem;
-		border: 1px solid #fca5a5;
+		border-color: #fca5a5;
+		color: #b91c1c;
 		background: #fee2e2;
-		color: #7f1d1d;
-		max-width: min(65vw, 560px);
+	}
+
+	.readonly-banner {
+		position: absolute;
+		left: 0.75rem;
+		top: 4.95rem;
+		z-index: 14;
+		border: 1px solid #f59e0b;
+		border-radius: 8px;
+		padding: 0.35rem 0.5rem;
+		font-size: 0.73rem;
+		font-weight: 600;
+		background: #ffedd5;
+		color: #9a3412;
 	}
 
 	.tooltip {
@@ -1401,69 +2596,136 @@
 		white-space: nowrap;
 	}
 
-	.warnings-panel {
-		border: 1px solid #facc15;
+	.warnings-panel,
+	.validation-panel {
+		border: 1px solid var(--panel-border);
 		border-radius: 8px;
-		background: #fef9c3;
+		background: var(--panel-bg);
 		padding: 0.65rem 0.8rem;
-		color: #713f12;
+		color: var(--panel-contrast);
 		font-size: 0.92rem;
 	}
 
-	.warnings-panel summary {
+	.validation-panel {
+		border-color: #f59e0b;
+	}
+
+	.warnings-panel summary,
+	.validation-panel summary {
 		cursor: pointer;
 		font-weight: 600;
 	}
 
-	.warnings-panel ul {
+	.warnings-panel ul,
+	.validation-panel ul {
 		margin: 0.6rem 0 0;
 		padding-left: 1.2rem;
 		display: grid;
 		gap: 0.28rem;
 	}
 
-	.modal-actions {
+	.edit-section {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+		gap: 0.65rem;
+		margin-bottom: 1rem;
+	}
+
+	.edit-section h4 {
+		grid-column: 1 / -1;
+		margin: 0;
+		font-size: 1rem;
+	}
+
+	.edit-section label {
+		display: grid;
+		gap: 0.25rem;
+		font-size: 0.8rem;
+		font-weight: 600;
+		color: var(--muted-text);
+	}
+
+	.edit-section input,
+	.edit-section textarea,
+	.edit-section select {
+		padding: 0.45rem 0.5rem;
+		border-radius: 8px;
+		border: 1px solid var(--panel-border);
+		background: var(--panel-bg);
+		color: var(--panel-contrast);
+		font-size: 0.86rem;
+	}
+
+	.edit-section textarea {
+		min-height: 64px;
+		resize: vertical;
+	}
+
+	.field-row {
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+		gap: 0.6rem;
+	}
+
+	.item-card {
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+		gap: 0.45rem;
+		padding: 0.65rem;
+		border: 1px solid var(--panel-border);
+		border-radius: 10px;
+		background: color-mix(in oklab, var(--panel-bg) 92%, black 8%);
+	}
+
+	.item-actions {
+		display: flex;
+		gap: 0.4rem;
+		align-items: end;
+	}
+
+	.inline-actions {
+		grid-column: 1 / -1;
 		display: flex;
 		justify-content: flex-end;
-		margin-bottom: 0.6rem;
 	}
 
-	.modal-actions button {
-		border: 1px solid #cbd5e1;
-		background: #f8fafc;
-		padding: 0.4rem 0.65rem;
-		border-radius: 8px;
-		cursor: pointer;
-		font-weight: 600;
+	.modal-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
 	}
 
-	.details-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-		gap: 0.35rem 0.8rem;
+	.icon-search {
 		margin-bottom: 0.7rem;
 	}
 
-	.details-grid p {
-		margin: 0;
-	}
-
-	h4 {
-		margin: 0.8rem 0 0.35rem;
-		font-size: 0.98rem;
-	}
-
-	.details-list {
-		margin: 0;
-		padding-left: 1.15rem;
+	.icon-search label {
 		display: grid;
-		gap: 0.3rem;
+		gap: 0.25rem;
+		font-size: 0.8rem;
+		font-weight: 600;
+		color: var(--muted-text);
+	}
+
+	.icon-search input {
+		padding: 0.45rem 0.5rem;
+		border-radius: 8px;
+		border: 1px solid var(--panel-border);
+		background: var(--panel-bg);
+		color: var(--panel-contrast);
+		font-size: 0.86rem;
 	}
 
 	@media (max-width: 900px) {
-		.map-controls {
-			flex-wrap: wrap;
-			max-width: min(90vw, 560px);
+		.diagram-shell {
+			height: auto;
+			grid-template-rows: minmax(560px, 1fr) auto;
+		}
+
+		.data-source {
+			max-width: min(72vw, 420px);
 		}
 	}
 </style>