{#if mapControlsCollapsed} {:else}

{#if searchQuery.trim()} {searchMatchCount} {/if}

Diagram View Ethernet Labels Dark Mode Hide All VMs

{/if}

{#if showIpamPanel}

IP Address Management

Subnets

{#each ipamReport.subnets as subnet (subnet.cidr)}

{subnet.cidr} {#if subnet.name}{subnet.name}{/if} {#if subnet.vlanId}VLAN {subnet.vlanId}{/if} {#if !subnet.declared}inferred{/if}

{subnet.used} of {subnet.capacity} in use {#if suggestNextFreeIp(networkData, subnet.cidr)} · next free: {suggestNextFreeIp(networkData, subnet.cidr)} {/if}

{:else}

No IPv4 addresses found yet.

{/each}

{#if ipamReport.duplicates.length > 0}

Conflicts

{duplicate.ip} — {duplicate.owners.join(', ')}

{/if} {#if ipamReport.unparsed.length > 0}

Not an IPv4 address

{assignment.ownerLabel}: {assignment.ip}

{/if}

Declared subnets

{#each networkData.subnets ?? [] as subnet, subnetIndex (`${subnet.cidr}:${subnetIndex}`)}

CIDR mutateDraft( (draft) => { if (draft.subnets?.[subnetIndex]) { draft.subnets[subnetIndex].cidr = ( event.currentTarget as HTMLInputElement ).value; } }, { autosave: true } )} /> Name mutateDraft( (draft) => { const nextName = (event.currentTarget as HTMLInputElement).value.trim(); if (draft.subnets?.[subnetIndex]) { if (nextName) { draft.subnets[subnetIndex].name = nextName; } else { delete draft.subnets[subnetIndex].name; } } }, { autosave: true } )} /> VLAN mutateDraft( (draft) => { const parsed = Number((event.currentTarget as HTMLInputElement).value); if (draft.subnets?.[subnetIndex]) { if (Number.isInteger(parsed) && parsed >= 1 && parsed <= 4094) { draft.subnets[subnetIndex].vlanId = parsed; } else { delete draft.subnets[subnetIndex].vlanId; } } }, { autosave: true } )} />

{:else}

None declared; subnets above are inferred as /24 from the IPs in use.

{/each}

{/if}

Source: {dataSourceLabel}

{saveStateLabel()}

{#if hasLoadedInitialData && !writable} {/if} {#if isLoadingData}

Loading JSON...

{/if} {#if loadError}

{loadError}

{/if} {#if saveError}

{saveError}

{/if} {#if tooltip.visible} {/if}

{#if warnings.length + ipamWarnings.length > 0}

Data warnings ({warnings.length + ipamWarnings.length})

{warning}

{/if} {#if validationIssues.length > 0}

Validation issues ({validationIssues.length})

{issue.path}: {issue.message}

{/if}

Icon Search {#if selectedTargetIconPath}

Selected icon preview

{selectedTargetIconKey}

{/if}

Showing {Math.min(visibleIconDefinitions.length, iconResultLimit)} of {filteredIconDefinitions.length} matching icons

{#each visibleIconDefinitions as icon (icon.key)} {/each}

{#if filteredIconDefinitions.length === 0}

No icons match your search.

{/if}

{#if selectedTarget?.type === 'machine' && selectedMachine}

{#if selectedMachineHostId && selectedMachineVmCount > 0} {/if}

Machine Name updateMachineName(selectedTarget.index, (event.currentTarget as HTMLInputElement).value)} /> IP Address mutateDraft( (draft) => { draft.machines[selectedTarget.index].ipAddress = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> {#if selectedMachineIpConflicts.length > 0} Also used by {selectedMachineIpConflicts.join(', ')} {/if} Role mutateDraft( (draft) => { draft.machines[selectedTarget.index].role = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> Operating System mutateDraft( (draft) => { draft.machines[selectedTarget.index].operatingSystem = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> Notes

Hardware

CPU mutateDraft( (draft) => { draft.machines[selectedTarget.index].hardware.cpu = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> RAM mutateDraft( (draft) => { draft.machines[selectedTarget.index].hardware.ram = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> Ports 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 } )} />

Virtual Machines

{#each selectedMachine.software.vms as vm, vmIndex (`${vm.name}:${vm.ipAddress}:${vmIndex}`)}

Name mutateDraft(() => undefined, { autosave: true })} /> Role mutateDraft(() => undefined, { autosave: true })} /> IP mutateDraft(() => undefined, { autosave: true })} /> MAC Address mutateDraft(() => undefined, { autosave: true })} /> Icon mutateDraft(() => undefined, { autosave: true })} />

{/each}

Ports

{#each machineConnectableOwnerNames as ownerName (ownerName)} {/each}

{#each selectedMachine.ports ?? [] as port, portIndex (`${port.portName}:${portIndex}`)}

Port Name updateMachinePortName(selectedTarget.index, portIndex, (event.currentTarget as HTMLInputElement).value)} /> Speed (Gbps) mutateDraft(() => undefined, { autosave: true })} /> MAC Address mutateDraft(() => undefined, { autosave: true })} /> Connect To Device onMachinePortConnectionFieldChange( selectedTarget.index, portIndex, 'device', (event.currentTarget as HTMLInputElement).value )} /> Target Port onMachinePortConnectionFieldChange( selectedTarget.index, portIndex, 'port', (event.currentTarget as HTMLInputElement).value )} />

{/each}

{:else if selectedTarget?.type === 'device' && selectedDevice}

Device Name updateDeviceName(selectedTarget.index, (event.currentTarget as HTMLInputElement).value)} /> IP Address mutateDraft( (draft) => { draft.devices[selectedTarget.index].ipAddress = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> {#if selectedDeviceIpConflicts.length > 0} Also used by {selectedDeviceIpConflicts.join(', ')} {/if} Type mutateDraft( (draft) => { draft.devices[selectedTarget.index].type = ( event.currentTarget as HTMLInputElement ).value; }, { autosave: true } )} /> Notes

Ports

{#each deviceConnectableOwnerNames as ownerName (ownerName)} {/each}

{#each selectedDevice.ports ?? [] as port, portIndex (`${port.portName}:${portIndex}`)}

Port Name updateDevicePortName(selectedTarget.index, portIndex, (event.currentTarget as HTMLInputElement).value)} /> Speed (Gbps) mutateDraft(() => undefined, { autosave: true })} /> MAC Address mutateDraft(() => undefined, { autosave: true })} /> Connect To Device onDevicePortConnectionFieldChange( selectedTarget.index, portIndex, 'device', (event.currentTarget as HTMLInputElement).value )} /> Target Port onDevicePortConnectionFieldChange( selectedTarget.index, portIndex, 'port', (event.currentTarget as HTMLInputElement).value )} />

{/each}

{:else if selectedTarget?.type === 'vm' && selectedVm}

VM Name mutateDraft( (draft) => { draft.machines[selectedTarget.machineIndex].software.vms[ selectedTarget.vmIndex ].name = (event.currentTarget as HTMLInputElement).value; }, { autosave: true } )} /> Role mutateDraft( (draft) => { draft.machines[selectedTarget.machineIndex].software.vms[ selectedTarget.vmIndex ].role = (event.currentTarget as HTMLInputElement).value; }, { autosave: true } )} /> IP Address mutateDraft( (draft) => { draft.machines[selectedTarget.machineIndex].software.vms[ selectedTarget.vmIndex ].ipAddress = (event.currentTarget as HTMLInputElement).value; }, { autosave: true } )} /> {#if selectedVmIpConflicts.length > 0} Also used by {selectedVmIpConflicts.join(', ')} {/if} MAC Address mutateDraft( (draft) => { draft.machines[selectedTarget.machineIndex].software.vms[ selectedTarget.vmIndex ].macAddress = (event.currentTarget as HTMLInputElement).value; }, { autosave: true } )} />

{/if}

Icon Search {#if addModalIconPath}

Selected icon preview

{addModalIconKey}

{/if}

Showing {Math.min(visibleIconDefinitions.length, iconResultLimit)} of {filteredIconDefinitions.length} matching icons

{#each visibleIconDefinitions as icon (icon.key)} {/each}

{#if filteredIconDefinitions.length === 0}

No icons match your search.

{/if}

{#if addModalKind === 'machine'}

Machine Name IP Address Role Operating System Notes

{:else if addModalKind === 'device'}

Device Name IP Address Type Notes

{/if} (deleteTarget = null)} >

This action will remove the selected item and clean up related links. Continue?

(showExportModal = false)}>

File Name Scale Background