= 0 ? `${searchActiveIndex + 1} of ${searchMatchIds.length}` : String(searchMatchCount)} {showEthernetLabels} {showCableSpeeds} showVms={!areAllVmHostsCollapsed} {hasAnyVmHosts} ipamOpen={showIpamPanel} theme={currentTheme} on:viewchange={(event) => handleViewChange(event.detail)} on:search={applyEmphasis} on:searchcycle={(event) => cycleSearchMatch(event.detail.direction)} on:clearsearch={clearSearch} on:addmachine={addMachine} on:adddevice={addDevice} on:toggleipam={() => (showIpamPanel = !showIpamPanel)} on:ethernetlabels={(event) => handleEthernetLabelsChange(event.detail)} on:cablespeeds={(event) => handleCableSpeedsChange(event.detail)} on:showvms={(event) => setCollapsedStateForAll(!event.detail)} on:exportpng={() => (showExportModal = true)} on:reload={loadData} on:toggletheme={() => themeMode.toggle()} />
{#if diagramViewMode === 'rack'} { const { kind, name } = event.detail; const index = kind === 'machine' ? findMachineIndexByName(name) : findDeviceIndexByName(name); if (index >= 0) { selectedTarget = { type: kind, index }; } }} /> {/if} {#if diagramViewMode === 'rack' && writable}
{#if showRackManager} {#each rackLayout.racks as rack (rack.name)}
{#if rack.declared && rack.slots.length === 0} {/if}
{/each}
{/if}
{/if} {#if diagramViewMode !== 'rack' && (vlanLegend.length > 0 || visibleGraphNodes.length > 0)}
{#if vlanLegend.length > 0}
VLANs · click to filter
{#each vlanLegend as entry (entry.vlanId)} {/each}
{/if}
Host Infra Device
{/if} {#if showIpamPanel}

IPAM

{#each ipamView as subnet (subnet.cidr)}
{#if subnet.name}{subnet.name}{/if} {subnet.cidr} {#if subnet.vlanId}VLAN {subnet.vlanId}{/if} {#if !subnet.declared}inferred{/if}
{subnet.used} of {subnet.capacity} in use {#if subnet.nextFree} {/if}
{:else}

No IPv4 addresses found yet.

{/each}
{#if ipamReport.duplicates.length > 0}

Conflicts

    {#each ipamReport.duplicates as duplicate (duplicate.ip)}
  • {duplicate.ip} — {duplicate.owners.join(', ')}
    • {/each}
{/if} {#if ipamReport.unparsed.length > 0}

Not an IPv4 address

    {#each ipamReport.unparsed as assignment (`${assignment.ownerLabel}:${assignment.ip}`)}
  • {assignment.ownerLabel}: {assignment.ip}
    • {/each}
{/if} {#if writable}
{#if subnetEditorOpen} {#each networkData.subnets ?? [] as subnet, subnetIndex (`${subnet.cidr}:${subnetIndex}`)}
{:else}

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

{/each}
{/if}
{/if}
{/if} {#if showFirstRun && diagramViewMode !== 'rack'} 0} storageReady={writable && totalEntities === 0} on:addmachine={addMachine} on:connectport={openFirstMachineEditor} on:openipam={() => (showIpamPanel = true)} on:dismiss={dismissFirstRun} /> {/if} {#if loadError || saveError}
{#if loadError}
{loadError}
{/if} {#if saveError}
{saveError}
{/if}
{/if} {#if tooltip.visible}
{tooltip.text}
{/if}
{#if warnings.length + ipamWarnings.length + rackLayout.warnings.length > 0}
Data warnings ({warnings.length + ipamWarnings.length + rackLayout.warnings.length})
    {#each [...warnings, ...ipamWarnings, ...rackLayout.warnings] as warning (warning)}
  • {warning}
    • {/each}
{/if} {#if validationIssues.length > 0}
Validation issues ({validationIssues.length})
    {#each validationIssues as issue (`${issue.path}:${issue.message}`)}
  • {issue.path}: {issue.message}
    • {/each}
{/if}
{#each machineConnectableOwnerNames as ownerName (ownerName)} {/each} {#each deviceConnectableOwnerNames as ownerName (ownerName)} {/each}
{#if iconPopoverOpen} setSelectedTargetIconKey(event.detail)} on:close={() => (iconPopoverOpen = false)} /> {/if}
{#if selectedMachine}
{selectedMachine.machineName} {#if selectedMachine.role}{selectedMachine.role}{/if}
{selectedMachine.ipAddress}{selectedMachine.operatingSystem ? ` · ${selectedMachine.operatingSystem}` : ''}{selectedMachine.rack ? ` · ${selectedMachine.rack.name} U${selectedMachine.rack.unit}` : ''} {:else if selectedDevice}
{selectedDevice.name} {#if selectedDevice.type}{selectedDevice.type}{/if}
{selectedDevice.ipAddress}{selectedDevice.rack ? ` · ${selectedDevice.rack.name} U${selectedDevice.rack.unit}` : ''} {:else if selectedVm}
{selectedVm.name} {#if selectedVm.role}{selectedVm.role}{/if}
{selectedVm.ipAddress} · VM on {networkData.machines[selectedVmMachineIndex] ?.machineName ?? '?'} {/if}
{#if selectedTarget?.type === 'machine' && selectedMachine}
Hardware & rack
{#if rackNewNameTarget?.kind === 'machine' && rackNewNameTarget?.index === selectedMachineIndex} {/if}
Virtual machines {selectedMachine.software.vms.length} {#if selectedMachineHostId && selectedMachineVmCount > 0} {/if}
{#if selectedMachine.software.vms.length > 0}
NameRoleIPMAC
{#each selectedMachine.software.vms as vm, vmIndex (vmIndex)}
toggleExpandedVm(vmIndex)} on:keydown={(event) => rowKeydown(event, () => toggleExpandedVm(vmIndex))} > {#if resolveIconPath(vm.iconKey)} {:else} {/if} {vm.name} {vm.role} {vm.ipAddress} {vm.macAddress || '—'}
{#if expandedVmIndex === vmIndex}
{#if vmIconPopoverIndex === vmIndex} setVmIconKey(selectedMachineIndex, vmIndex, event.detail)} on:close={() => (vmIconPopoverIndex = null)} /> {/if}
{/if} {/each}
{/if}
Ports & cables {(selectedMachine.ports ?? []).length}
{#if (selectedMachine.ports ?? []).length > 0}
{#each selectedMachine.ports ?? [] as port, portIndex (portIndex)}
toggleExpandedPort(portIndex)} on:keydown={(event) => rowKeydown(event, () => toggleExpandedPort(portIndex))} > {port.portName} {formatSpeed(port.speedGbps)} {#if port.connectedTo} {port.connectedTo.device} {port.connectedTo.port} {:else} Not connected · click to connect… {/if} {#if port.connectedTo?.cable?.type || port.connectedTo?.cable?.color || typeof port.connectedTo?.cable?.lengthM === 'number'} {#if port.connectedTo.cable?.color} {/if} {[ port.connectedTo.cable?.type, typeof port.connectedTo.cable?.lengthM === 'number' ? `${port.connectedTo.cable.lengthM}m` : null ] .filter(Boolean) .join(' · ') || '—'} {:else} — {/if}
{#if expandedPortIndex === portIndex}
{#if port.connectedTo}
{/if}
{/if} {/each}
{/if}
{:else if selectedTarget?.type === 'device' && selectedDevice}
Rack
{#if rackNewNameTarget?.kind === 'device' && rackNewNameTarget?.index === selectedDeviceIndex} {/if}
Ports & cables {(selectedDevice.ports ?? []).length}
{#if (selectedDevice.ports ?? []).length > 0}
{#each selectedDevice.ports ?? [] as port, portIndex (portIndex)}
toggleExpandedPort(portIndex)} on:keydown={(event) => rowKeydown(event, () => toggleExpandedPort(portIndex))} > {port.portName} {formatSpeed(port.speedGbps)} {#if port.connectedTo} {port.connectedTo.device} {port.connectedTo.port} {:else} Not connected · click to connect… {/if} {#if port.connectedTo?.cable?.type || port.connectedTo?.cable?.color || typeof port.connectedTo?.cable?.lengthM === 'number'} {#if port.connectedTo.cable?.color} {/if} {[ port.connectedTo.cable?.type, typeof port.connectedTo.cable?.lengthM === 'number' ? `${port.connectedTo.cable.lengthM}m` : null ] .filter(Boolean) .join(' · ') || '—'} {:else} — {/if}
{#if expandedPortIndex === portIndex}
{#if port.connectedTo}
{/if}
{/if} {/each}
{/if}
{:else if selectedTarget?.type === 'vm' && selectedVm}
{/if} {#if selectedTarget?.type === 'machine'} {:else if selectedTarget?.type === 'device'} {:else if selectedTarget?.type === 'vm'} {/if} {writable ? 'Changes save automatically' : 'Read-only — changes are not saved'}
{#if iconPopoverOpen} setAddModalIconKey(event.detail)} on:close={() => (iconPopoverOpen = false)} /> {/if}
{addModalKind === 'machine' ? 'Add machine' : 'Add device'}
Pick an icon, name it, give it an IP
{#if addModalKind === 'machine'}
{:else if addModalKind === 'device'}
{/if} (deleteTarget = null)} >

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

(showExportModal = false)} >