From 5de1c8aa8251d9dc7e157090bed0309b9c01b849 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 27 Jun 2025 12:39:20 +0800
Subject: [PATCH] feat: add node selector header with action mode indicator and
 instructions for improved user guidance

---
 static/css/base.css            |  2 ++
 static/css/components/menu.css | 22 ++++++++++++++++++++++
 static/js/utils/uiHelpers.js   |  8 ++++++++
 3 files changed, 32 insertions(+)

diff --git a/static/css/base.css b/static/css/base.css
index 4ad7452b..3619dd85 100644
--- a/static/css/base.css
+++ b/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;
 
diff --git a/static/css/components/menu.css b/static/css/components/menu.css
index 108f50e3..566f71db 100644
--- a/static/css/components/menu.css
+++ b/static/css/components/menu.css
@@ -195,4 +195,26 @@
 .send-all-item i {
     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;
 }
\ No newline at end of file
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index a74b0aa5..a9ba3335 100644
--- a/static/js/utils/uiHelpers.js
+++ b/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">