feat: add node selector header with action mode indicator and instructions for improved user guidance

static/css/base.css

@@ -29,6 +29,7 @@ html, body {
 :root {
     --bg-color: #ffffff;
     --text-color: #333333;
+    --text-muted: #6c757d;
     --card-bg: #ffffff;
     --border-color: #e0e0e0;
 
@@ -84,6 +85,7 @@ html[data-theme="light"] {
 [data-theme="dark"] {
     --bg-color: #1a1a1a;
     --text-color: #e0e0e0;
+    --text-muted: #a0a0a0;
     --card-bg: #2d2d2d;
     --border-color: #404040;
 

static/css/components/menu.css

@@ -196,3 +196,25 @@
     width: 16px;
     text-align: center;
 }
+
+/* Node Selector Header */
+.node-selector-header {
+    padding: 10px 15px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--card-bg);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.selector-action-type {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--lora-accent);
+}
+
+.selector-instruction {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-style: italic;
+}

static/js/utils/uiHelpers.js

@@ -434,7 +434,15 @@ function showNodeSelector(nodes, loraSyntax, replaceMode, syntaxType) {
     `;
   }).join('');
   
+  // Add header with action mode indicator
+  const actionType = syntaxType === 'recipe' ? 'Recipe' : 'LoRA';
+  const actionMode = replaceMode ? 'Replace' : 'Append';
+  
   selector.innerHTML = `
+    <div class="node-selector-header">
+      <span class="selector-action-type">${actionMode} ${actionType}</span>
+      <span class="selector-instruction">Select target node</span>
+    </div>
     ${nodeItems}
     <div class="node-item send-all-item" data-action="send-all">
       <div class="node-icon-indicator all-nodes">