+
+ = 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'}
+ {
+ const { kind, name } = event.detail;
+ const index =
+ kind === 'machine' ? findMachineIndexByName(name) : findDeviceIndexByName(name);
+ if (index >= 0) {
+ selectedTarget = { type: kind, index };
+ }
+ }}
+ />
+ {/if}
-
- {#if mapControlsCollapsed}
-
- {:else}
-
-
-
- {#if searchQuery.trim()}
- {searchMatchCount}
+ {#if diagramViewMode === 'rack' && writable}
+
+
+ {#if showRackManager}
+ {#each rackLayout.racks as rack (rack.name)}
+
-
- {#if diagramViewMode === 'rack'}
-
+
+
+ {#if rack.declared && rack.slots.length === 0}
{/if}
-
-
-
-
-
-
-
-
-
-
+ {/each}
+
+
{/if}
-
{/if}
- {#if vlanLegend.length > 0 && diagramViewMode !== 'rack'}
- Racks
- {#each rackLayout.racks as rack (rack.name)} -
-
-
- {#if rack.declared && rack.slots.length === 0}
-
- {/if}
-
- {/each}
-
-
-
-
- {#each vlanLegend as entry (entry.vlanId)}
-
- {/each}
+ {#if diagramViewMode !== 'rack' && (vlanLegend.length > 0 || visibleGraphNodes.length > 0)}
+
0}
+ on:addmachine={addMachine}
+ on:connectport={openFirstMachineEditor}
+ on:openipam={() => (showIpamPanel = true)}
+ on:dismiss={dismissFirstRun}
+ />
{/if}
- {#if isLoadingData}
-
- {#if selectedTargetIconKey && !iconPickerExpanded}
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
+ {#if vlanLegend.length > 0}
+
{/if}
{#if showIpamPanel}
VLANs · click to filter
+ {#each vlanLegend as entry (entry.vlanId)}
+
+ {/each}
+
+ {/if}
+
+ Host
+ Infra
+ Device
+
-
{/if}
- IP Address Management
+IPAM
+ {#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}
Source: {dataSourceLabel}
-
- {saveStateLabel()}
-
-
- {#if hasLoadedInitialData && !writable}
-
+ {#if showFirstRun && diagramViewMode !== 'rack'}
+ Loading JSON...
- {/if}
-
- {#if loadError}
- {loadError}
- {/if}
- {#if saveError}
- {saveError}
+ {#if loadError || saveError}
+
+ {#if loadError}
+
{/if}
{#if tooltip.visible}
- {loadError}
+ {/if}
+ {#if saveError}
+ {saveError}
+ {/if}
+
+
-
{tooltip.text}
{/if}
@@ -2373,7 +2532,11 @@
{#if warnings.length + ipamWarnings.length + rackLayout.warnings.length > 0}
-
Data warnings ({warnings.length + ipamWarnings.length + rackLayout.warnings.length})
+Data warnings ({warnings.length + + ipamWarnings.length + + rackLayout.warnings.length})
-
{#each [...warnings, ...ipamWarnings, ...rackLayout.warnings] as warning (warning)}
- {warning} @@ -2394,1101 +2557,1344 @@ {/if}
-
- {:else}
-
- {#if selectedTargetIconPath}
- 
- {/if}
-
-
- {selectedTargetIconKey}
-
-
- {#if selectedTargetIconPath}
-
- {/if}
-
-
- {#if selectedTarget?.type === 'machine' && selectedMachine}
-
-
-
- {/if}
-
- {selectedTargetIconKey}
-
-
- {#each visibleIconDefinitions as icon (icon.key)}
-
- {/each}
-
- {#if filteredIconDefinitions.length === 0}
- No icons match your search.
- {/if} -
- {#if selectedMachineHostId && selectedMachineVmCount > 0}
-
- {/if}
-
- Hardware
-
-
-
-
-
- Rack
-
-
- {#if rackNewNameTarget?.kind === 'machine' && rackNewNameTarget?.index === selectedTarget.index}
-
- {/if}
-
-
-
- Virtual Machines
-
+
+
+
+
+ {#if iconPopoverOpen}
+ setSelectedTargetIconKey(event.detail)}
+ on:close={() => (iconPopoverOpen = false)}
+ />
+ {/if}
- {#each selectedMachine.software.vms as vm, vmIndex (`${vm.name}:${vm.ipAddress}:${vmIndex}`)}
-
+
+
+
+ {#if selectedTarget?.type === 'machine' && selectedMachine}
+
+ {#if selectedMachine}
+
+
+ {selectedMachine.machineName}
+ {#if selectedMachine.role}{selectedMachine.role}{/if}
+
+
+ {:else if selectedDevice}
+
+ {selectedDevice.name}
+ {#if selectedDevice.type}{selectedDevice.type}{/if}
+
+
+ {:else if selectedVm}
+
+ {selectedVm.name}
+ {#if selectedVm.role}{selectedVm.role}{/if}
+
+
+ {/if}
+
+
+
+
+
+
+ {#if selectedMachine.software.vms.length > 0}
+
-
+
+
+
+
+
+
+
+
+
+
+ Hardware & rack
+
+
+
+
+
+
+ {#if rackNewNameTarget?.kind === 'machine' && rackNewNameTarget?.index === selectedMachineIndex}
+
+ {/if}
+
-
+
+
+ Virtual machines
+ {selectedMachine.software.vms.length}
+
+ {#if selectedMachineHostId && selectedMachineVmCount > 0}
+
+ {/if}
- {/each}
-
+
+ {/if}
+
-
+ 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}
+ {/each}
+ Ports
- -
+
+
-
-
{:else if selectedTarget?.type === 'device' && selectedDevice}
-
-
-
-
-
-
-
-
-
+ Ports & cables
+ {(selectedMachine.ports ?? []).length}
+
-
- {#each selectedMachine.ports ?? [] as port, portIndex (`${port.portName}:${portIndex}`)}
-
-
-
-
-
-
- {#if port.connectedTo}
-
-
-
- {/if}
-
- {/each}
-
-
-
-
+ class="btn-small"
+ on:click={() =>
+ mutateDraft((draft) => {
+ draft.machines[selectedMachineIndex].ports ??= [];
+ draft.machines[selectedMachineIndex].ports.push({
+ ...createEmptyPort('eth'),
+ portName: nextUniqueName(
+ 'eth0',
+ draft.machines[selectedMachineIndex].ports.map((port) => port.portName)
+ )
+ });
+ })}
+ >
+ + Add port
+
Rack
-
+
+
-
- {#if rackNewNameTarget?.kind === 'device' && rackNewNameTarget?.index === selectedTarget.index}
-
- {/if}
-
+
-
-
- Ports
- -
-
+
+
- {#each selectedDevice.ports ?? [] as port, portIndex (`${port.portName}:${portIndex}`)}
-
+
+
+
+
-
{:else if selectedTarget?.type === 'vm' && selectedVm}
-
-
-
-
-
-
-
- {/if}
+ {/if}
+
+
+
+
-
- {#if addModalIconKey && !iconPickerExpanded}
-
+ Rack
+
+
+
-
-
-
-
- {#if port.connectedTo}
+ {#if rackNewNameTarget?.kind === 'device' && rackNewNameTarget?.index === selectedDeviceIndex}
-
-
{/if}
-
- {/each}
-
-
-
-
+
+
-
- {#if addModalIconPath}
- 
+
+
+ ();
const canonicalNames = new Map();
- let unrackedCount = 0;
+ const unracked: UnrackedEntity[] = [];
const canonical = (rawName: string): string => {
const trimmed = rawName.trim();
@@ -149,7 +157,12 @@ export function buildRackLayout(data: NetworkData): RackLayout {
for (const [index, machine] of data.machines.entries()) {
if (!machine.rack?.name) {
- unrackedCount += 1;
+ unracked.push({
+ kind: 'machine',
+ name: machine.machineName,
+ iconKey: machine.iconKey,
+ subtitle: machine.role
+ });
continue;
}
place(
@@ -167,7 +180,12 @@ export function buildRackLayout(data: NetworkData): RackLayout {
}
for (const [index, device] of data.devices.entries()) {
if (!device.rack?.name) {
- unrackedCount += 1;
+ unracked.push({
+ kind: 'device',
+ name: device.name,
+ iconKey: device.iconKey,
+ subtitle: device.type
+ });
continue;
}
place(
@@ -216,7 +234,7 @@ export function buildRackLayout(data: NetworkData): RackLayout {
};
});
- return { racks, warnings, unrackedCount };
+ return { racks, warnings, unrackedCount: unracked.length, unracked };
}
export function knownRackNames(data: NetworkData): string[] {
diff --git a/src/lib/graph/canvasTokens.ts b/src/lib/graph/canvasTokens.ts
new file mode 100644
index 0000000..bc316d7
--- /dev/null
+++ b/src/lib/graph/canvasTokens.ts
@@ -0,0 +1,37 @@
+// Reads the graph-facing design tokens off the document root so the
+// Cytoscape stylesheet (canvas-drawn edges) always matches the CSS theme.
+// The --graph-* custom properties are plain hex on purpose: Cytoscape's
+// colour parser doesn't understand oklch() or var().
+export interface CanvasTokens {
+ bgCanvas: string;
+ edge: string;
+ border: string;
+ chipBg: string;
+ chipText: string;
+ accent: string;
+}
+
+const fallbacks: CanvasTokens = {
+ bgCanvas: '#eef0f3',
+ edge: '#8b94a3',
+ border: '#dce0e6',
+ chipBg: '#ffffff',
+ chipText: '#3a4250',
+ accent: '#3565c4'
+};
+
+export function readCanvasTokens(): CanvasTokens {
+ if (typeof document === 'undefined') {
+ return fallbacks;
+ }
+ const styles = getComputedStyle(document.documentElement);
+ const read = (name: string, fallback: string) => styles.getPropertyValue(name).trim() || fallback;
+ return {
+ bgCanvas: read('--bg-canvas', fallbacks.bgCanvas),
+ edge: read('--graph-edge', fallbacks.edge),
+ border: read('--border', fallbacks.border),
+ chipBg: read('--graph-edge-chip-bg', fallbacks.chipBg),
+ chipText: read('--graph-edge-chip-text', fallbacks.chipText),
+ accent: read('--accent', fallbacks.accent)
+ };
+}
diff --git a/src/lib/graph/searchHighlight.ts b/src/lib/graph/searchHighlight.ts
index ac86ce6..07610bb 100644
--- a/src/lib/graph/searchHighlight.ts
+++ b/src/lib/graph/searchHighlight.ts
@@ -51,3 +51,41 @@ export function computeSearchMatches(
return matches;
}
+
+/**
+ * Ordered variant used for Enter/Shift-Enter cycling: node IDs in graph
+ * order, deduped, with VM hits mapped to their host so the camera can land
+ * on something visible while the host's VMs are collapsed.
+ */
+export function computeSearchMatchList(
+ transformed: Pick,
+ query: string
+): string[] {
+ const ordered: string[] = [];
+ const seen = new Set();
+ const normalized = query.trim().toLowerCase();
+ if (!normalized) {
+ return ordered;
+ }
+
+ for (const node of transformed.nodes) {
+ const isMatch = collectSearchableText(node).some((text) =>
+ text.toLowerCase().includes(normalized)
+ );
+ if (!isMatch) {
+ continue;
+ }
+ const ids =
+ node.data.kind === 'vm' && node.data.hostMachineId
+ ? [node.data.id, node.data.hostMachineId]
+ : [node.data.id];
+ for (const id of ids) {
+ if (!seen.has(id)) {
+ seen.add(id);
+ ordered.push(id);
+ }
+ }
+ }
+
+ return ordered;
+}
diff --git a/src/lib/graph/transformNetworkData.ts b/src/lib/graph/transformNetworkData.ts
index 5749b55..c6e2e3e 100644
--- a/src/lib/graph/transformNetworkData.ts
+++ b/src/lib/graph/transformNetworkData.ts
@@ -1,8 +1,15 @@
import type { ConnectedPortRef, NetworkData, Port, Subnet } from '../types';
import { cidrContains, parseCidr } from '../data/ipam';
import { resolveIconPath } from '../config/iconRegistry';
-import { vlanColor } from './vlanPalette';
-import type { GraphEdgeElement, GraphNodeElement, GraphTransformResult } from './types';
+import { buildVlanIndexMap } from './vlanPalette';
+import {
+ NODE_DIMENSIONS,
+ estimatePillWidth,
+ type DeviceClass,
+ type GraphEdgeElement,
+ type GraphNodeElement,
+ type GraphTransformResult
+} from './types';
interface EndpointOwner {
kind: 'machine' | 'device';
@@ -76,22 +83,36 @@ function resolveCableColor(name: string | undefined): string | undefined {
return undefined;
}
const trimmed = name.trim();
- return cableColorHex[trimmed.toLowerCase()] ?? (/^#[0-9a-fA-F]{3,8}$/.test(trimmed) ? trimmed : undefined);
+ return (
+ cableColorHex[trimmed.toLowerCase()] ??
+ (/^#[0-9a-fA-F]{3,8}$/.test(trimmed) ? trimmed : undefined)
+ );
}
function buildVlanResolver(subnets: Subnet[] | undefined) {
const vlanSubnets = (subnets ?? [])
.filter((subnet) => typeof subnet.vlanId === 'number')
.sort((a, b) => (parseCidr(b.cidr)?.prefix ?? 0) - (parseCidr(a.cidr)?.prefix ?? 0));
- return (ip: string): { vlanId: number; vlanColor: string } | undefined => {
+ const vlanIndexById = buildVlanIndexMap(subnets);
+ return (ip: string): { vlanId: number; vlanIndex: number } | undefined => {
const home = vlanSubnets.find((subnet) => cidrContains(subnet.cidr, ip));
if (!home || typeof home.vlanId !== 'number') {
return undefined;
}
- return { vlanId: home.vlanId, vlanColor: vlanColor(home.vlanId) };
+ return { vlanId: home.vlanId, vlanIndex: vlanIndexById.get(home.vlanId) ?? 0 };
};
}
+// Devices whose type reads as network infrastructure get the dark "infra"
+// treatment on the map; everything else (consoles, peripherals, UPSes) is an
+// unmanaged "dumb" device rendered as a dashed pill.
+const infrastructureTypePattern =
+ /switch|router|firewall|gateway|access\s?point|\bap\b|wan|isp|modem|dns|patch\s?panel/i;
+
+export function classifyDevice(type: string | undefined): DeviceClass {
+ return type && infrastructureTypePattern.test(type) ? 'infrastructure' : 'dumb';
+}
+
function edgeSpeed(a: number | undefined, b: number | undefined): number | undefined {
if (typeof a === 'number' && typeof b === 'number') {
return Math.min(a, b);
@@ -154,14 +175,16 @@ export default function transformNetworkDataToGraph(data: NetworkData): GraphTra
nodes.push({
data: {
- id: machineNodeId,
- label: machine.machineName,
- rawName: machine.machineName,
- kind: 'machine',
+ id: machineNodeId,
+ label: machine.machineName,
+ rawName: machine.machineName,
+ kind: 'machine',
iconKey: machine.iconKey,
iconUrl: resolveIconPath(machine.iconKey),
- nodeWidth: 200,
- nodeHeight: 110,
+ nodeWidth: NODE_DIMENSIONS.machine.width,
+ nodeHeight: NODE_DIMENSIONS.machine.height,
+ meta: machine.ipAddress,
+ vmCount: sourceMachineVms.length,
...resolveVlan(machine.ipAddress),
details: {
type: 'machine',
@@ -199,8 +222,9 @@ export default function transformNetworkDataToGraph(data: NetworkData): GraphTra
hostMachineId: machineNodeId,
iconKey: vm.iconKey,
iconUrl: resolveIconPath(vm.iconKey),
- nodeWidth: 140,
- nodeHeight: 66,
+ nodeWidth: NODE_DIMENSIONS.vm.width,
+ nodeHeight: NODE_DIMENSIONS.vm.height,
+ meta: vm.ipAddress,
...resolveVlan(vm.ipAddress),
details: {
type: 'vm',
@@ -221,8 +245,7 @@ export default function transformNetworkDataToGraph(data: NetworkData): GraphTra
id: hostingEdgeId,
source: machineNodeId,
target: vmNodeId,
- kind: 'hosting',
- label: 'hosts'
+ kind: 'hosting'
}
});
@@ -246,6 +269,15 @@ export default function transformNetworkDataToGraph(data: NetworkData): GraphTra
for (const device of data.devices) {
const deviceNodeId = toDeviceNodeId(device.name);
const devicePorts = [...(device.ports ?? [])];
+ const deviceClass = classifyDevice(device.type);
+ const portsInUse = devicePorts.filter((port) => parseConnectedTo(port.connectedTo)).length;
+ let deviceMeta: string | undefined;
+ if (deviceClass === 'infrastructure') {
+ deviceMeta =
+ devicePorts.length > 0
+ ? `${devicePorts.length} ${devicePorts.length === 1 ? 'port' : 'ports'} · ${portsInUse} in use`
+ : device.ipAddress;
+ }
nodes.push({
data: {
@@ -253,10 +285,18 @@ export default function transformNetworkDataToGraph(data: NetworkData): GraphTra
label: device.name,
rawName: device.name,
kind: 'device',
+ deviceClass,
iconKey: device.iconKey,
iconUrl: resolveIconPath(device.iconKey),
- nodeWidth: 176,
- nodeHeight: 116,
+ nodeWidth:
+ deviceClass === 'infrastructure'
+ ? NODE_DIMENSIONS.infrastructure.width
+ : estimatePillWidth(device.name),
+ nodeHeight:
+ deviceClass === 'infrastructure'
+ ? NODE_DIMENSIONS.infrastructure.height
+ : NODE_DIMENSIONS.dumbHeight,
+ ...(deviceMeta ? { meta: deviceMeta } : {}),
...resolveVlan(device.ipAddress),
details: {
type: 'device',
@@ -339,20 +379,34 @@ export default function transformNetworkDataToGraph(data: NetworkData): GraphTra
const speedGbps = edgeSpeed(port.speedGbps, targetPort.speedGbps);
const cable = port.connectedTo?.cable ?? targetPort.connectedTo?.cable;
+ // One chip per cable: interface name (prefer the machine side —
+ // "eth0" reads better than "port 3") plus speed, with the network
+ // default of 1GbE omitted so only exceptions are informative.
+ const ifname =
+ owner.kind !== 'machine' && targetOwner.kind === 'machine'
+ ? connectedTo.port
+ : port.portName;
+ const chipLabelNoSpeed = ifname;
+ const chipLabel =
+ typeof speedGbps === 'number' && speedGbps !== 1 ? `${ifname} · ${speedGbps}GbE` : ifname;
+
edges.push({
data: {
id: `physical:${physicalEdgeCounter}`,
source: owner.nodeId,
target: targetOwner.nodeId,
kind: 'physical',
- label: speedGbps ? `${speedGbps}GbE` : undefined,
+ chipLabel,
+ chipLabelNoSpeed,
sourcePort: port.portName,
targetPort: connectedTo.port,
speedGbps,
reciprocal,
...(cable?.type ? { cableType: cable.type } : {}),
...(cable?.color ? { cableColorName: cable.color } : {}),
- ...(resolveCableColor(cable?.color) ? { cableColor: resolveCableColor(cable?.color) } : {}),
+ ...(resolveCableColor(cable?.color)
+ ? { cableColor: resolveCableColor(cable?.color) }
+ : {}),
...(typeof cable?.lengthM === 'number' ? { cableLengthM: cable.lengthM } : {})
}
});
diff --git a/src/lib/graph/types.ts b/src/lib/graph/types.ts
index ddb1e1d..8a86023 100644
--- a/src/lib/graph/types.ts
+++ b/src/lib/graph/types.ts
@@ -1,5 +1,35 @@
export type GraphNodeKind = 'machine' | 'device' | 'vm';
export type GraphEdgeKind = 'physical' | 'hosting';
+export type DeviceClass = 'infrastructure' | 'dumb';
+
+// Hit-target dimensions for the invisible Cytoscape nodes. The HTML card
+// layer sizes its cards from the same constants so edges anchor exactly at
+// card borders.
+export const NODE_DIMENSIONS = {
+ machine: { width: 218, height: 56 },
+ infrastructure: { width: 218, height: 56 },
+ vm: { width: 170, height: 44 },
+ dumbHeight: 36
+} as const;
+
+// Content-hugging pills need a width so edges anchor at the card border:
+// 24px icon tile + gaps/padding ≈ 54px, plus the rendered text width.
+// Text is measured with a canvas context (matching the pill's 12.5px type);
+// the char-count estimate is only an SSR/test fallback.
+let pillMeasureContext: CanvasRenderingContext2D | null = null;
+
+export function estimatePillWidth(name: string): number {
+ let textWidth = name.length * 7.6;
+ if (typeof document !== 'undefined') {
+ pillMeasureContext ??= document.createElement('canvas').getContext('2d');
+ if (pillMeasureContext) {
+ pillMeasureContext.font =
+ '600 12.5px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+ textWidth = pillMeasureContext.measureText(name).width;
+ }
+ }
+ return Math.round(Math.min(300, Math.max(110, textWidth + 60)));
+}
export interface PortDetails {
portName: string;
@@ -63,6 +93,7 @@ export interface GraphNodeData {
id: string;
label: string;
kind: GraphNodeKind;
+ deviceClass?: DeviceClass;
rawName?: string;
hostMachineId?: string;
nodeWidth?: number;
@@ -70,7 +101,9 @@ export interface GraphNodeData {
iconUrl?: string;
iconKey?: string;
vlanId?: number;
- vlanColor?: string;
+ vlanIndex?: number;
+ meta?: string;
+ vmCount?: number;
details?: GraphNodeDetails;
}
@@ -80,6 +113,8 @@ export interface GraphEdgeData {
target: string;
kind: GraphEdgeKind;
label?: string;
+ chipLabel?: string;
+ chipLabelNoSpeed?: string;
sourcePort?: string;
targetPort?: string;
speedGbps?: number;
diff --git a/src/lib/graph/vlanPalette.ts b/src/lib/graph/vlanPalette.ts
index 688e4aa..9591fae 100644
--- a/src/lib/graph/vlanPalette.ts
+++ b/src/lib/graph/vlanPalette.ts
@@ -1,7 +1,37 @@
-// Distinct from the kind colours (machine blue, VM green, device amber) so a
-// VLAN border reads as VLAN, not as an entity kind. Mid-saturation hues stay
-// legible against both the light and dark node fills.
-const palette = [
+import type { Subnet } from '$lib/types';
+
+// Categorical VLAN palette from the UX review: equal lightness/chroma
+// (oklch 0.55/0.13 light, 0.68/0.13 dark), hue varies, so no VLAN shouts
+// louder than another. The actual oklch values live in app.css as
+// --vlan-0..--vlan-5 (light + dark variants); consumers are all HTML/CSS,
+// so we hand out var() references and let the theme resolve them.
+export const VLAN_PALETTE_SIZE = 6;
+
+export function vlanPaletteColor(index: number): string {
+ const slot = ((Math.trunc(index) % VLAN_PALETTE_SIZE) + VLAN_PALETTE_SIZE) % VLAN_PALETTE_SIZE;
+ return `var(--vlan-${slot})`;
+}
+
+// VLANs are assigned palette slots in declaration order (first appearance in
+// data.subnets), not by vlanId, so the first VLAN a user declares always gets
+// the first hue.
+export function buildVlanIndexMap(subnets: Subnet[] | undefined): Map {
+ const map = new Map();
+ for (const subnet of subnets ?? []) {
+ const { vlanId } = subnet;
+ if (typeof vlanId !== 'number' || !Number.isFinite(vlanId)) {
+ continue;
+ }
+ if (!map.has(vlanId)) {
+ map.set(vlanId, map.size);
+ }
+ }
+ return map;
+}
+
+// Legacy hex palette, still consumed by the pre-redesign Cytoscape node
+// border styling; removed once the HTML card layer takes over VLAN colour.
+const legacyPalette = [
'#e11d48',
'#7c3aed',
'#0891b2',
@@ -15,5 +45,5 @@ const palette = [
];
export function vlanColor(vlanId: number): string {
- return palette[Math.abs(Math.trunc(vlanId)) % palette.length];
+ return legacyPalette[Math.abs(Math.trunc(vlanId)) % legacyPalette.length];
}
diff --git a/src/lib/shared/networkPersistenceCore.mjs b/src/lib/shared/networkPersistenceCore.mjs
index 29a2b03..4854508 100644
--- a/src/lib/shared/networkPersistenceCore.mjs
+++ b/src/lib/shared/networkPersistenceCore.mjs
@@ -223,6 +223,7 @@ export async function getWritableState() {
}
try {
+ // eslint-disable-next-line no-bitwise -- Node fs access mode flags combine bitwise
await access(source, constants.R_OK | constants.W_OK);
} catch (error) {
return {
diff --git a/src/lib/shared/networkSchemaCore.mjs b/src/lib/shared/networkSchemaCore.mjs
index 483b2e9..c9c6e4c 100644
--- a/src/lib/shared/networkSchemaCore.mjs
+++ b/src/lib/shared/networkSchemaCore.mjs
@@ -135,10 +135,15 @@ export function normalizePort(issues, path, value, ownerLabel) {
optional: true,
allowEmpty: true
});
- const lengthM = readNumber(issues, `${path}.connectedTo.cable.lengthM`, cableRaw.lengthM, {
- optional: true,
- min: 0
- });
+ const lengthM = readNumber(
+ issues,
+ `${path}.connectedTo.cable.lengthM`,
+ cableRaw.lengthM,
+ {
+ optional: true,
+ min: 0
+ }
+ );
const candidate = {
...(cableType ? { type: cableType } : {}),
...(cableColor ? { color: cableColor } : {}),
@@ -265,7 +270,10 @@ function normalizeMachine(issues, path, value) {
const role = readString(issues, `${path}.role`, value.role);
const operatingSystem = readString(issues, `${path}.operatingSystem`, value.operatingSystem);
const iconKey = readString(issues, `${path}.iconKey`, value.iconKey, { optional: true });
- const notes = readString(issues, `${path}.notes`, value.notes, { optional: true, allowEmpty: true });
+ const notes = readString(issues, `${path}.notes`, value.notes, {
+ optional: true,
+ allowEmpty: true
+ });
const rack = normalizeRack(issues, `${path}.rack`, value.rack);
const softwareRaw = value.software;
@@ -304,8 +312,16 @@ function normalizeMachine(issues, path, value) {
issues.push({ path: `${path}.hardware`, message: 'must be an object' });
}
const hardware = {
- cpu: readString(issues, `${path}.hardware.cpu`, isRecord(hardwareRaw) ? hardwareRaw.cpu : undefined),
- ram: readString(issues, `${path}.hardware.ram`, isRecord(hardwareRaw) ? hardwareRaw.ram : undefined),
+ cpu: readString(
+ issues,
+ `${path}.hardware.cpu`,
+ isRecord(hardwareRaw) ? hardwareRaw.cpu : undefined
+ ),
+ ram: readString(
+ issues,
+ `${path}.hardware.ram`,
+ isRecord(hardwareRaw) ? hardwareRaw.ram : undefined
+ ),
networkPorts: readNumber(
issues,
`${path}.hardware.networkPorts`,
@@ -318,10 +334,15 @@ function normalizeMachine(issues, path, value) {
isRecord(hardwareRaw) ? hardwareRaw.networkPortSpeedGbps : undefined,
{ optional: true, min: 0 }
),
- gpu: readString(issues, `${path}.hardware.gpu`, isRecord(hardwareRaw) ? hardwareRaw.gpu : undefined, {
- optional: true,
- allowEmpty: true
- })
+ gpu: readString(
+ issues,
+ `${path}.hardware.gpu`,
+ isRecord(hardwareRaw) ? hardwareRaw.gpu : undefined,
+ {
+ optional: true,
+ allowEmpty: true
+ }
+ )
};
const portsRaw = value.ports;
@@ -389,7 +410,10 @@ function normalizeDevice(issues, path, value) {
const name = readString(issues, `${path}.name`, value.name);
const ipAddress = readString(issues, `${path}.ipAddress`, value.ipAddress);
const type = readString(issues, `${path}.type`, value.type);
- const notes = readString(issues, `${path}.notes`, value.notes, { optional: true, allowEmpty: true });
+ const notes = readString(issues, `${path}.notes`, value.notes, {
+ optional: true,
+ allowEmpty: true
+ });
const iconKey = readString(issues, `${path}.iconKey`, value.iconKey, { optional: true });
const rack = normalizeRack(issues, `${path}.rack`, value.rack);
@@ -523,7 +547,10 @@ export function validateNetworkData(value) {
const machines = [];
const machineEntries = [];
- for (const [machineIndex, machineValue] of (Array.isArray(machinesRaw) ? machinesRaw : []).entries()) {
+ for (const [machineIndex, machineValue] of (Array.isArray(machinesRaw)
+ ? machinesRaw
+ : []
+ ).entries()) {
const machine = normalizeMachine(issues, `$.machines[${machineIndex}]`, machineValue);
if (machine) {
machines.push(machine);
@@ -533,7 +560,10 @@ export function validateNetworkData(value) {
const devices = [];
const deviceEntries = [];
- for (const [deviceIndex, deviceValue] of (Array.isArray(devicesRaw) ? devicesRaw : []).entries()) {
+ for (const [deviceIndex, deviceValue] of (Array.isArray(devicesRaw)
+ ? devicesRaw
+ : []
+ ).entries()) {
const device = normalizeDevice(issues, `$.devices[${deviceIndex}]`, deviceValue);
if (device) {
devices.push(device);
@@ -581,7 +611,10 @@ export function validateNetworkData(value) {
}
const subnets = [];
const subnetEntries = [];
- for (const [subnetIndex, subnetValue] of (Array.isArray(subnetsRaw) ? subnetsRaw : []).entries()) {
+ for (const [subnetIndex, subnetValue] of (Array.isArray(subnetsRaw)
+ ? subnetsRaw
+ : []
+ ).entries()) {
const subnet = normalizeSubnet(issues, `$.subnets[${subnetIndex}]`, subnetValue);
if (subnet) {
subnets.push(subnet);
diff --git a/svelte.config.js b/svelte.config.js
index 49b4fa4..7b6189b 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,12 +3,13 @@ import staticAdapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
const deployTarget = (process.env.DEPLOY_TARGET ?? 'docker').toLowerCase();
-const adapter = deployTarget === 'netlify'
- ? netlifyAdapter()
- : staticAdapter({
- fallback: 'index.html',
- strict: false
- });
+const adapter =
+ deployTarget === 'netlify'
+ ? netlifyAdapter()
+ : staticAdapter({
+ fallback: 'index.html',
+ strict: false
+ });
/** @type {import('@sveltejs/kit').Config} */
const config = {
+
- {:else}
-
+
+ {#if iconPopoverOpen}
+ setAddModalIconKey(event.detail)}
+ on:close={() => (iconPopoverOpen = false)}
+ />
{/if}
-
-
- {addModalIconKey}
-
- {#if addModalIconPath}
-
@@ -79,8 +101,8 @@
position: absolute;
inset: 0;
overflow: auto;
- padding: 10rem 1rem 1rem;
- background: var(--app-bg, transparent);
+ padding: 1.25rem 1rem 1rem;
+ background: var(--bg-canvas, transparent);
}
.rack-empty {
@@ -160,17 +182,17 @@
}
.rack-slot.machine {
- background: color-mix(in oklab, var(--panel-bg) 55%, #3b82f6 45%);
- border-color: #3b82f6;
+ background: var(--surface);
+ border-color: var(--border);
}
.rack-slot.device {
- background: color-mix(in oklab, var(--panel-bg) 55%, #d97706 45%);
- border-color: #d97706;
+ background: var(--surface-2);
+ border-color: var(--border);
}
.rack-slot:hover {
- filter: brightness(1.08);
+ border-color: var(--accent);
}
.rack-slot img {
@@ -212,11 +234,71 @@
flex-shrink: 0;
}
- .rack-footnote {
- text-align: center;
- font-size: 0.76rem;
+ .unracked {
+ max-width: 560px;
+ margin: 1.25rem auto 0;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-panel);
+ padding: 0.5rem 0.8rem;
+ }
+
+ .unracked summary {
+ font-size: 0.8rem;
font-weight: 600;
- color: var(--muted-text);
- margin-top: 1rem;
+ color: var(--text-2);
+ cursor: pointer;
+ }
+
+ .unracked-list {
+ display: flex;
+ flex-direction: column;
+ margin-top: 0.4rem;
+ }
+
+ .unracked-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border: none;
+ background: transparent;
+ padding: 0.35rem 0.4rem;
+ border-radius: var(--radius-control);
+ cursor: pointer;
+ text-align: left;
+ font-family: inherit;
+ }
+
+ .unracked-item:hover {
+ background: var(--surface-2);
+ }
+
+ .unracked-item img {
+ width: 1.1rem;
+ height: 1.1rem;
+ object-fit: contain;
+ }
+
+ .unracked-glyph {
+ width: 1.1rem;
+ text-align: center;
+ font-size: 0.8rem;
+ color: var(--text-2);
+ }
+
+ .unracked-name {
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--text);
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .unracked-kind {
+ font-size: 0.7rem;
+ color: var(--text-2);
+ white-space: nowrap;
}
diff --git a/src/lib/data/networkEditor.ts b/src/lib/data/networkEditor.ts
index 0a12e65..66d3851 100644
--- a/src/lib/data/networkEditor.ts
+++ b/src/lib/data/networkEditor.ts
@@ -61,7 +61,11 @@ export function cloneNetworkData(data: NetworkData): NetworkData {
return cloned;
}
-function findOwnerByKindAndName(data: NetworkData, kind: OwnerKind, name: string): OwnerRef | undefined {
+function findOwnerByKindAndName(
+ data: NetworkData,
+ kind: OwnerKind,
+ name: string
+): OwnerRef | undefined {
if (kind === 'machine') {
const machine = data.machines.find((item) => equalsIgnoreCase(item.machineName, name));
if (!machine) {
@@ -113,46 +117,49 @@ function ensureReciprocalConnections(data: NetworkData) {
continue;
}
- const targetPort = findPort(targetOwner, port.connectedTo.port);
- if (!targetPort) {
- delete port.connectedTo;
- continue;
- }
+ const targetPort = findPort(targetOwner, port.connectedTo.port);
+ if (!targetPort) {
+ delete port.connectedTo;
+ continue;
+ }
- const expectedReciprocal: Port['connectedTo'] = {
- device: owner.name,
- port: port.portName,
- ...(port.connectedTo.cable ? { cable: deepClone(port.connectedTo.cable) } : {})
- };
- if (!targetPort.connectedTo) {
- targetPort.connectedTo = expectedReciprocal;
- continue;
- }
+ const expectedReciprocal: Port['connectedTo'] = {
+ device: owner.name,
+ port: port.portName,
+ ...(port.connectedTo.cable ? { cable: deepClone(port.connectedTo.cable) } : {})
+ };
+ if (!targetPort.connectedTo) {
+ targetPort.connectedTo = expectedReciprocal;
+ continue;
+ }
- const hasMatchingReciprocal =
- equalsIgnoreCase(targetPort.connectedTo.device, owner.name) &&
- equalsIgnoreCase(targetPort.connectedTo.port, port.portName);
- if (hasMatchingReciprocal) {
- // keep cable metadata identical on both ends; the lexicographically
- // smaller owner:port key is the canonical copy so the sync is deterministic
- const ownKey = `${owner.name}:${port.portName}`.toLowerCase();
- const targetKey = `${targetOwner.name}:${targetPort.portName}`.toLowerCase();
- const [from, to] =
- ownKey <= targetKey
- ? [port.connectedTo, targetPort.connectedTo]
- : [targetPort.connectedTo, port.connectedTo];
- if (from.cable) {
- to.cable = deepClone(from.cable);
- } else {
- delete to.cable;
- }
- continue;
+ const hasMatchingReciprocal =
+ equalsIgnoreCase(targetPort.connectedTo.device, owner.name) &&
+ equalsIgnoreCase(targetPort.connectedTo.port, port.portName);
+ if (hasMatchingReciprocal) {
+ // keep cable metadata identical on both ends; the lexicographically
+ // smaller owner:port key is the canonical copy so the sync is deterministic
+ const ownKey = `${owner.name}:${port.portName}`.toLowerCase();
+ const targetKey = `${targetOwner.name}:${targetPort.portName}`.toLowerCase();
+ const [from, to] =
+ ownKey <= targetKey
+ ? [port.connectedTo, targetPort.connectedTo]
+ : [targetPort.connectedTo, port.connectedTo];
+ if (from.cable) {
+ to.cable = deepClone(from.cable);
+ } else {
+ delete to.cable;
}
+ continue;
}
}
}
+}
-function clearInboundReferences(data: NetworkData, predicate: (connection: Port['connectedTo']) => boolean) {
+function clearInboundReferences(
+ data: NetworkData,
+ predicate: (connection: Port['connectedTo']) => boolean
+) {
for (const owner of allOwners(data)) {
for (const port of owner.ports) {
if (!port.connectedTo) {
@@ -226,7 +233,9 @@ export function renameOwner(
}
if (kind === 'machine') {
- const machine = cloned.machines.find((item) => equalsIgnoreCase(item.machineName, previousName));
+ const machine = cloned.machines.find((item) =>
+ equalsIgnoreCase(item.machineName, previousName)
+ );
if (machine) {
machine.machineName = nextName;
}
@@ -292,14 +301,15 @@ export function deleteOwner(data: NetworkData, kind: OwnerKind, ownerName: strin
const cloned = cloneNetworkData(data);
if (kind === 'machine') {
- cloned.machines = cloned.machines.filter((machine) => !equalsIgnoreCase(machine.machineName, ownerName));
+ cloned.machines = cloned.machines.filter(
+ (machine) => !equalsIgnoreCase(machine.machineName, ownerName)
+ );
} else {
cloned.devices = cloned.devices.filter((device) => !equalsIgnoreCase(device.name, ownerName));
}
- clearInboundReferences(
- cloned,
- (connection) => Boolean(connection && equalsIgnoreCase(connection.device, ownerName))
+ clearInboundReferences(cloned, (connection) =>
+ Boolean(connection && equalsIgnoreCase(connection.device, ownerName))
);
ensureReciprocalConnections(cloned);
return cloned;
@@ -331,14 +341,12 @@ export function deletePort(
}
}
- clearInboundReferences(
- cloned,
- (connection) =>
- Boolean(
- connection &&
- equalsIgnoreCase(connection.device, ownerName) &&
- equalsIgnoreCase(connection.port, portName)
- )
+ clearInboundReferences(cloned, (connection) =>
+ Boolean(
+ connection &&
+ equalsIgnoreCase(connection.device, ownerName) &&
+ equalsIgnoreCase(connection.port, portName)
+ )
);
ensureReciprocalConnections(cloned);
return cloned;
@@ -441,7 +449,9 @@ export function setPortConnection(
const previousConnection = port.connectedTo;
if (previousConnection) {
const previousOwner = findOwnerByName(cloned, previousConnection.device);
- const previousPort = previousOwner ? findPort(previousOwner, previousConnection.port) : undefined;
+ const previousPort = previousOwner
+ ? findPort(previousOwner, previousConnection.port)
+ : undefined;
if (previousPort) {
delete previousPort.connectedTo;
}
diff --git a/src/lib/data/rackLayout.ts b/src/lib/data/rackLayout.ts
index a19ec57..97a57d6 100644
--- a/src/lib/data/rackLayout.ts
+++ b/src/lib/data/rackLayout.ts
@@ -21,10 +21,18 @@ export interface RackColumn {
slots: RackSlot[];
}
+export interface UnrackedEntity {
+ kind: 'machine' | 'device';
+ name: string;
+ iconKey?: string;
+ subtitle: string;
+}
+
export interface RackLayout {
racks: RackColumn[];
warnings: string[];
unrackedCount: number;
+ unracked: UnrackedEntity[];
}
const minimumRackHeightU = 12;
@@ -112,7 +120,7 @@ function assignLanes(slots: RackSlot[], rackName: string, warnings: string[]) {
export function buildRackLayout(data: NetworkData): RackLayout {
const slotsByRack = new Map
-
-
-
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+
(deleteTarget = null)}
>
-
+
+
+
+
- (showExportModal = false)}>
-
-
-
-
-
-
- {#if layout.unrackedCount > 0}
- {addModalIconKey}
-
+
+
- {/if}
+
+
{#if addModalKind === 'machine'}
-
+
+ {addModalKind === 'machine' ? 'Add machine' : 'Add device'}
+
- {/if}
-
-
- {#each visibleIconDefinitions as icon (icon.key)}
-
- {/each}
+
- {#if filteredIconDefinitions.length === 0}
- No icons match your search.
- {/if}
+
{:else if addModalKind === 'device'}
-
+
+
+
+
+
+
+
+
+
+
+
+
{/if}
-
+
+
+
+
+
+
+
+
+ This action will remove the selected item and clean up related links. Continue?
- ++ This will remove the selected item and clean up related links. Continue? +
+
-
+ (showExportModal = false)}
+>
+
+
+
+
diff --git a/src/lib/components/NodeCardLayer.svelte b/src/lib/components/NodeCardLayer.svelte
new file mode 100644
index 0000000..0ac59ab
--- /dev/null
+++ b/src/lib/components/NodeCardLayer.svelte
@@ -0,0 +1,323 @@
+
+
+
+
+
diff --git a/src/lib/components/RackView.svelte b/src/lib/components/RackView.svelte
index 62e06a2..c7b4029 100644
--- a/src/lib/components/RackView.svelte
+++ b/src/lib/components/RackView.svelte
@@ -65,11 +65,33 @@
{/each}
+
+
+
+
+
+
+
+
- {layout.unrackedCount} - {layout.unrackedCount === 1 ? 'entity is' : 'entities are'} not rack-mounted. -
+ {#if layout.unracked.length > 0} +
+
{/if}
{/if}
+ {layout.unracked.length} + {layout.unracked.length === 1 ? 'entity is' : 'entities are'} not rack-mounted +
+
+ {#each layout.unracked as entity (`${entity.kind}:${entity.name}`)}
+
+ {/each}
+
+