Custom port labels

src/lib/components/dialogs/BlockPropertiesDialog.svelte

@@ -21,9 +21,12 @@
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import { exportRecordingData } from '$lib/utils/csvExport';
 	import { createRecordingDataState } from '$lib/stores/recordingData.svelte';
+	import { getPortLabelConfigs } from '$lib/nodes/uiConfig';
+	import { PORT_NAME } from '$lib/constants/handles';
 
 	// Code preview state (declared early — referenced by subscription below)
 	let showCode = $state(false);
+	let showPortLabels = $state(false);
 	let previewCode = $state('');
 	let editorContainer = $state<HTMLDivElement | undefined>(undefined);
 	let editorView: import('@codemirror/view').EditorView | null = null;
@@ -49,10 +52,12 @@
 			node = graphStore.getNode(id) || null;
 			// Reset to properties view when opening a new node
 			showCode = false;
+			showPortLabels = false;
 			destroyEditor();
 		} else {
 			node = null;
 			showCode = false;
+			showPortLabels = false;
 			destroyEditor();
 		}
 	});
@@ -144,11 +149,23 @@
 			const blockCode = generateBlockCode(node, allNodes, allConnections);
 			previewCode = header + blockCode;
 			copied = false;
+			showPortLabels = false;
 			showCode = true;
 			setTimeout(() => initEditor(), 0);
 		}
 	}
 
+	// Toggle port-labels view (same mutual-exclusion pattern as code view)
+	function togglePortLabelsView() {
+		if (showPortLabels) {
+			showPortLabels = false;
+		} else {
+			showCode = false;
+			destroyEditor();
+			showPortLabels = true;
+		}
+	}
+
 	function copyToClipboard() {
 		navigator.clipboard.writeText(previewCode);
 		copied = true;
@@ -177,6 +194,24 @@
 		closeNodeDialog();
 	}
 
+	// Port-label editing — hide for blocks whose port names are driven by a
+	// regular param (Scope.labels, Adder.operations, …); for those the param
+	// itself is the source of truth and editing port names directly would be
+	// overwritten on the next param change.
+	const hasParamDrivenPortLabels = $derived(node ? getPortLabelConfigs(node.type).length > 0 : false);
+	const hasEditablePortLabels = $derived(
+		!!node && !hasParamDrivenPortLabels && (node.inputs.length > 0 || node.outputs.length > 0)
+	);
+
+	function handlePortNameChange(direction: 'input' | 'output', index: number, value: string) {
+		if (!node) return;
+		const id = node.id;
+		const trimmed = value.trim();
+		const fallback = direction === 'input' ? PORT_NAME.input(index) : PORT_NAME.output(index);
+		const name = trimmed === '' ? fallback : trimmed;
+		historyStore.mutate(() => graphStore.updateNodePortName(id, direction, index, name));
+	}
+
 	// Check if node is a recording node (Scope or Spectrum)
 	const isRecordingNode = $derived(node?.type === 'Scope' || node?.type === 'Spectrum');
 
@@ -256,6 +291,8 @@
 		<div class="dialog-header">
 				{#if showCode}
 					<span id="dialog-title">Python Code</span>
+				{:else if showPortLabels}
+					<span id="dialog-title">Port Labels</span>
 				{:else}
 					<div class="node-info">
 						<input
@@ -286,7 +323,7 @@
 								<Icon name="copy" size={16} />
 							{/if}
 						</button>
-					{:else}
+					{:else if !showPortLabels}
 						<!-- Color picker -->
 						<ColorPicker
 							currentColor={currentColor}
@@ -328,15 +365,28 @@
 							</button>
 						{/if}
 					{/if}
-					<!-- Toggle code view button -->
-					<button
-						class="icon-btn"
-						onclick={toggleCodeView}
-						use:tooltip={showCode ? "View Properties" : "View Python Code"}
-						aria-label={showCode ? "View Properties" : "View Python Code"}
-					>
-						<Icon name={showCode ? "settings" : "braces"} size={16} />
-					</button>
+					<!-- Toggle port labels view button (hidden in code view) -->
+					{#if showPortLabels || (!showCode && hasEditablePortLabels)}
+						<button
+							class="icon-btn"
+							onclick={togglePortLabelsView}
+							use:tooltip={showPortLabels ? "View Properties" : "Edit Port Labels"}
+							aria-label={showPortLabels ? "View Properties" : "Edit Port Labels"}
+						>
+							<Icon name={showPortLabels ? "settings" : "tag"} size={16} />
+						</button>
+					{/if}
+					<!-- Toggle code view button (hidden in port-labels view) -->
+					{#if !showPortLabels}
+						<button
+							class="icon-btn"
+							onclick={toggleCodeView}
+							use:tooltip={showCode ? "View Properties" : "View Python Code"}
+							aria-label={showCode ? "View Properties" : "View Python Code"}
+						>
+							<Icon name={showCode ? "settings" : "braces"} size={16} />
+						</button>
+					{/if}
 					<button class="icon-btn" onclick={closeNodeDialog} aria-label="Close">
 						<Icon name="x" size={16} />
 					</button>
@@ -351,6 +401,43 @@
 							<div class="loading">Loading...</div>
 						{/if}
 					</div>
+				{:else if showPortLabels}
+					<!-- Port labels view -->
+					{#if node.inputs.length === 0 && node.outputs.length === 0}
+						<div class="no-params">No ports to label</div>
+					{:else}
+						<div class="section">
+							<div class="params-grid">
+								{#each node.inputs as port, i (port.id)}
+									<div class="param-item">
+										<label for="port-in-{i}">in {i}</label>
+										<input
+											id="port-in-{i}"
+											type="text"
+											value={port.name}
+											placeholder={PORT_NAME.input(i)}
+											onchange={(e) => handlePortNameChange('input', i, e.currentTarget.value)}
+										/>
+									</div>
+								{/each}
+								{#if node.inputs.length > 0 && node.outputs.length > 0}
+									<div class="port-divider"></div>
+								{/if}
+								{#each node.outputs as port, i (port.id)}
+									<div class="param-item">
+										<label for="port-out-{i}">out {i}</label>
+										<input
+											id="port-out-{i}"
+											type="text"
+											value={port.name}
+											placeholder={PORT_NAME.output(i)}
+											onchange={(e) => handlePortNameChange('output', i, e.currentTarget.value)}
+										/>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
 				{:else}
 					<!-- Parameters -->
 					{#if typeDef.params.length > 0}
@@ -413,7 +500,7 @@
 				{/if}
 			</div>
 
-		{#if !showCode}
+		{#if !showCode && !showPortLabels}
 			<div class="dialog-footer">
 				<span class="hint">R rotate · X flip horizontal · Y flip vertical</span>
 			</div>
@@ -436,6 +523,13 @@
 		min-width: 0;
 	}
 
+	.port-divider {
+		height: 1px;
+		background: var(--border);
+		/* Extend past the dialog-body padding so the line spans edge-to-edge. */
+		margin: var(--space-xs) calc(-1 * var(--space-md));
+	}
+
 	/* Pin button */
 	.pin-btn {
 		flex-shrink: 0;

src/lib/stores/graph/helpers.ts

@@ -69,15 +69,15 @@ export function deriveInterfaceNode(
 		outputs: parentSubsystem.inputs.map((port, i) => ({
 			id: `${interfaceNode.id}-output-${i}`,
 			nodeId: interfaceNode.id,
-			name: `in ${i}`,
+			name: port.name,
 			direction: 'output' as const,
 			index: i,
 			color: port.color
 		})),
 		inputs: parentSubsystem.outputs.map((port, i) => ({
 			id: `${interfaceNode.id}-input-${i}`,
 			nodeId: interfaceNode.id,
-			name: `out ${i}`,
+			name: port.name,
 			direction: 'input' as const,
 			index: i,
 			color: port.color

src/lib/stores/graph/index.ts

@@ -84,6 +84,7 @@ export const graphStore = {
 	removeInputPort: ports.removeInputPort,
 	addOutputPort: ports.addOutputPort,
 	removeOutputPort: ports.removeOutputPort,
+	updateNodePortName: ports.updateNodePortName,
 
 	// ==================== ANNOTATION OPERATIONS ====================
 	addAnnotation: annotations.addAnnotation,

src/lib/stores/graph/ports.ts

@@ -331,3 +331,47 @@ export function syncPortNamesFromLabels(
 		updateNodeById(nodeId, () => updated);
 	}
 }
+
+/**
+ * Rename a single port. For regular nodes this writes the new name into
+ * `node.{inputs|outputs}[index].name`. For Interface nodes, port names are
+ * derived from the parent Subsystem at read time, so we write to the parent
+ * instead (with the direction flipped, because Interface input ↔ Subsystem
+ * output).
+ */
+export function updateNodePortName(
+	nodeId: string,
+	direction: PortDirection,
+	index: number,
+	name: string
+): void {
+	const currentGraph = getCurrentGraph();
+	const node = currentGraph.nodes.get(nodeId);
+	if (!node) return;
+
+	const path = get(currentPath);
+
+	if (node.type === NODE_TYPES.INTERFACE && path.length > 0) {
+		const parentId = path[path.length - 1];
+		const parentPath = path.slice(0, -1);
+		const parentPortsKey = direction === 'input' ? 'outputs' : 'inputs';
+
+		updateParentSubsystem(parentPath, parentId, (parent) => {
+			const ports = parent[parentPortsKey] as PortInstance[];
+			if (index < 0 || index >= ports.length) return parent;
+			if (ports[index].name === name) return parent;
+			const newPorts = ports.map((p, i) => (i === index ? { ...p, name } : p));
+			return { ...parent, [parentPortsKey]: newPorts };
+		});
+		return;
+	}
+
+	updateNodeById(nodeId, (n) => {
+		const portsKey = direction === 'input' ? 'inputs' : 'outputs';
+		const ports = n[portsKey] as PortInstance[];
+		if (index < 0 || index >= ports.length) return n;
+		if (ports[index].name === name) return n;
+		const newPorts = ports.map((p, i) => (i === index ? { ...p, name } : p));
+		return { ...n, [portsKey]: newPorts };
+	});
+}

src/lib/stores/graph/state.ts

@@ -95,11 +95,13 @@ export function getCurrentGraph(): {
 				...node,
 				name: subsystem.name,
 				color: subsystem.color,
-				// Subsystem inputs → Interface outputs (signals coming in)
+				// Subsystem inputs → Interface outputs (signals coming in).
+				// Port names come from the parent — that's the single source
+				// of truth so user-customised labels survive across renders.
 				outputs: subsystem.inputs.map((port, i) => ({
 					id: `${node.id}-output-${i}`,
 					nodeId: node.id,
-					name: `in ${i}`,
+					name: port.name,
 					direction: 'output' as const,
 					index: i,
 					color: port.color
@@ -108,7 +110,7 @@ export function getCurrentGraph(): {
 				inputs: subsystem.outputs.map((port, i) => ({
 					id: `${node.id}-input-${i}`,
 					nodeId: node.id,
-					name: `out ${i}`,
+					name: port.name,
 					direction: 'input' as const,
 					index: i,
 					color: port.color