Add read-only mode and connection labels.

connections.js

@@ -283,6 +283,9 @@ export const connections = function(superClass) {
       const path = `M${start.x},${start.y} C${controlPoint1.x},${controlPoint1.y} ${controlPoint2.x},${controlPoint2.y} ${end.x},${end.y}`;
       const isSelected = this.selectedConnection === conn.id;
 
+      // Get label position at midpoint of curve
+      const labelPoint = getPointOnCurve(0.5);
+
       return svg`
         <g>
           <path 
@@ -294,6 +297,16 @@ export const connections = function(superClass) {
             class="${isSelected ? 'selected' : ''}"
             @click="${() => this._handleConnectionClick(conn.id)}"
           />
+          ${conn.label ? svg`
+            <text
+              x="${labelPoint.x}"
+              y="${labelPoint.y - 8}"
+              text-anchor="middle"
+              fill="var(--connection-label-color, #ccc)"
+              font-size="var(--connection-label-font-size, 12)"
+              pointer-events="none"
+            >${conn.label}</text>
+          ` : ''}
           ${isSelected ? svg`
             <g>
               <!-- Source delete button -->
@@ -329,6 +342,8 @@ export const connections = function(superClass) {
     }
 
     _handleConnectionClick(connectionId) {
+      if (this.readonly) return;
+
       // Deselect if clicking the same connection
       if (this.selectedConnection === connectionId) {
         this.selectedConnection = null;
@@ -354,6 +369,8 @@ export const connections = function(superClass) {
     }
 
     _handlePortClick(e) {
+      if (this.readonly) return;
+
       const { node, port } = e.detail;
       const nodeId = node.id;
       const { portType, portId, portName } = port;