<VueFlow
   @drop="onDrop"
   ref="vueFlowRef"
   v-model:nodes="pipelineObj.currentSelectedPipeline.nodes"
   v-model:edges="pipelineObj.currentSelectedPipeline.edges"
   @node-change="onNodeChange"
   @nodes-change="onNodesChange"
   @edges-change="onEdgesChange"
   @edge-click="onEdgeClick"
   @connect="onConnect"
   @dragover="onDragOver"
   :default-viewport="{ zoom: 1.5 }"
   :min-zoom="0.2"
 >
 ...
-const onEdgeClick = (event) => {
-  console.log('Edge click event triggered')
-  ...
-  showEdgeHelpNotification.value = true
-  ...
-}
+const { addSelectedEdges, removeSelectedEdges } = useVueFlow();
 
+const onEdgeClick = (_evt, edge) => {
+  // Select the clicked edge so keyboard deletion applies to it
+  removeSelectedEdges(); // clear previous selection
+  addSelectedEdges([edge.id]);
+
+  // Show help notification
+  if (notificationTimeout) {
+    clearTimeout(notificationTimeout);
+    notificationTimeout = null;
+  }
+  showEdgeHelpNotification.value = true;
+  notificationTimeout = setTimeout(() => {
+    showEdgeHelpNotification.value = false;
+    notificationTimeout = null;
+  }, 3500);
+};
+

 const updateEdgeColors = (nodeId, color, reset = false) => {
-  if (pipelineObj.currentSelectedPipeline?.edges) {
-    pipelineObj.currentSelectedPipeline.edges.forEach(edge => {
-      if (edge.source === nodeId) {
-        if (reset) {
-          // Reset to default color
-          edge.style = { 
-            ...edge.style, 
-            stroke: '#6b7280', 
-            strokeWidth: 2 
-          };
-          edge.markerEnd = {
-            ...edge.markerEnd,
-            color: '#6b7280'
-          };
-        } else {
-          // Apply node color to both edge and arrow
-          edge.style = { 
-            ...edge.style, 
-            stroke: color, 
-            strokeWidth: 2 
-          };
-          edge.markerEnd = {
-            ...edge.markerEnd,
-            color: color
-          };
-        }
-      }
-    });
-  }
+  const edges = pipelineObj.currentSelectedPipeline?.edges;
+  if (!edges) return;
+
+  const updated = edges.map(edge => {
+    if (edge.source !== nodeId) return edge;
+    const stroke = reset ? '#6b7280' : (color || '#6b7280');
+    const style = { ...(edge.style || {}), stroke, strokeWidth: 2 };
+    const markerEnd = { ...(edge.markerEnd || {}), color: stroke };
+    return { ...edge, style, markerEnd };
+  });
+
+  // Replace array to trigger reactivity
+  pipelineObj.currentSelectedPipeline.edges = updated;
 };

 onMounted(async () => {
   window.addEventListener("beforeunload", beforeUnloadHandler);
-  
-  // Add keyboard handler for edge deletion
-  const handleKeydown = (event) => {
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    // Only act when an input is not focused and editor container is active
+    const active = document.activeElement as HTMLElement | null;
+    const isTypingTarget = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable);
+    if (isTypingTarget) return;
+
     if (event.key === 'Delete' || event.key === 'Backspace') {
-      const selectedEdges = getSelectedEdges.value
-      
+      const selectedEdges = getSelectedEdges.value;
       if (selectedEdges.length > 0) {
-        event.preventDefault()
-        const edgeIds = selectedEdges.map(edge => edge.id)
-        removeEdges(edgeIds)
+        event.preventDefault();
+        removeEdges(selectedEdges.map(e => e.id));
       }
     }
-  }
-  
-  window.addEventListener("keydown", handleKeydown);
-  
-  // Store handler reference for cleanup
-  (window as any).pipelineKeydownHandler = handleKeydown;
-  
+  };
+
+  // Attach to document to allow focus checks; keep local reference
+  document.addEventListener("keydown", handleKeydown);
+
+  onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeydown);
+  });
+
   pipelineDestinationsList.value = await getPipelineDestinations();
+  usedStreamsListResponse.value = await getUsedStreamsList();
   ...
 });
 
-onUnmounted(() => {
-  window.removeEventListener("beforeunload", beforeUnloadHandler);
-  
-  // Cleanup keyboard handler
-  if ((window as any).pipelineKeydownHandler) {
-    window.removeEventListener("keydown", (window as any).pipelineKeydownHandler);
-  }
-});
-