{#if mapControlsCollapsed} {:else}

Diagram View Ethernet Labels Dark Mode Hide All VMs

{/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 > 0}

Data warnings ({warnings.length})

{warning}

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

Validation issues ({validationIssues.length})

{issue.path}: {issue.message}

{/if}

Icon Search {#if selectedTargetIconPath}

{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 } )} /> 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 } )} />

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 })} /> 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 })} /> 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 } )} /> 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 })} /> 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}

Icon Search {#if addModalIconPath}

{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

{: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