From 40894a0771c07d39c66a00384116c9f4994b036f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 13:21:11 +0000
Subject: [PATCH 1/5] Improve node designer code editor UX

- Add get_secret_value() autocomplete for SecretStr type after
  accessing .secret_value on SecretSelector components
- Fix text selection highlighting to use distinct cyan color (accent)
  instead of similar light blue as active line
- Fix arrow key navigation in autocomplete by adding completionKeymap
  while keeping custom Tab handling
---
 .../features/designer/editor/pythonEditor.vue |  5 +++--
 .../composables/usePolarsAutocompletion.ts    | 22 ++++++++++++++++++-
 .../src/renderer/styles/main.css              |  7 ++++--
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue b/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
index 4a42c9e67..b6cd55126 100644
--- a/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
+++ b/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
@@ -25,7 +25,7 @@ import { ref, shallowRef, defineExpose, watch } from "vue";
 import { Codemirror } from "vue-codemirror";
 import { python } from "@codemirror/lang-python";
 import { oneDark } from "@codemirror/theme-one-dark";
-import { autocompletion, CompletionSource, acceptCompletion } from "@codemirror/autocomplete";
+import { autocompletion, completionKeymap, CompletionSource, acceptCompletion } from "@codemirror/autocomplete";
 import { indentMore } from "@codemirror/commands";
 import { polarsCompletionVals } from "./pythonEditor/polarsCompletions";
 
@@ -88,9 +88,10 @@ const extensions: Extension[] = [
   EditorState.tabSize.of(4),
   autocompletion({
     override: [polarsCompletions],
-    defaultKeymap: false, // Disable default keymap
+    defaultKeymap: false, // Disable default keymap to use custom tabKeymap
     closeOnBlur: false,
   }),
+  keymap.of(completionKeymap),
   tabKeymap,
 ];
 
diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
index 2baedb61b..5c0a4de42 100644
--- a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
@@ -5,7 +5,7 @@ import { EditorView, keymap } from '@codemirror/view';
 import { EditorState, Extension } from '@codemirror/state';
 import { python } from '@codemirror/lang-python';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { autocompletion, CompletionContext, CompletionResult, acceptCompletion } from '@codemirror/autocomplete';
+import { autocompletion, completionKeymap, CompletionContext, CompletionResult, acceptCompletion } from '@codemirror/autocomplete';
 import { indentMore } from '@codemirror/commands';
 import type { DesignerSection } from '../types';
 import { toSnakeCase } from './useCodeGeneration';
@@ -147,6 +147,25 @@ export function usePolarsAutocompletion(getSections: () => DesignerSection[]) {
     const beforeCursor = context.state.doc.sliceString(0, context.pos);
     const sections = getSections();
 
+    // Check for SecretStr method completion (after .secret_value.)
+    const secretStrMethodMatch = beforeCursor.match(/\.secret_value\.(\w*)$/);
+    if (secretStrMethodMatch) {
+      const typed = secretStrMethodMatch[1];
+      return {
+        from: context.pos - typed.length,
+        options: [
+          {
+            label: 'get_secret_value',
+            type: 'method',
+            info: 'Get the decrypted secret value as a string',
+            apply: 'get_secret_value()',
+            detail: 'SecretStr',
+          },
+        ],
+        validFor: /^\w*$/,
+      };
+    }
+
     // Check for ".value" or ".secret_value" completion after a component field
     for (const section of sections) {
       const sectionName = section.name || toSnakeCase(section.title || 'section');
@@ -286,6 +305,7 @@ export function usePolarsAutocompletion(getSections: () => DesignerSection[]) {
       defaultKeymap: false,
       closeOnBlur: false,
     }),
+    keymap.of(completionKeymap),
     tabKeymap,
   ];
 
diff --git a/flowfile_frontend/src/renderer/styles/main.css b/flowfile_frontend/src/renderer/styles/main.css
index 450228960..51131df75 100644
--- a/flowfile_frontend/src/renderer/styles/main.css
+++ b/flowfile_frontend/src/renderer/styles/main.css
@@ -506,9 +506,12 @@ button {
   background-color: var(--color-background-hover) !important;
 }
 
-.cm-editor .cm-selectionBackground,
+.cm-editor .cm-selectionBackground {
+  background-color: rgba(8, 145, 178, 0.15) !important;
+}
+
 .cm-editor.cm-focused .cm-selectionBackground {
-  background-color: var(--color-background-selected) !important;
+  background-color: rgba(8, 145, 178, 0.25) !important;
 }
 
 /* Placeholder styling */

From 13e52091328e085487b2e4773e25eedcaaeb8b92 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 13:55:09 +0000
Subject: [PATCH 2/5] Add help modal to process code editor

- Create ProcessCodeHelpModal.vue with comprehensive documentation:
  - Overview of the process method
  - Method signature and inputs explanation
  - How to access settings from UI components
  - Working with SecretStr and get_secret_value()
  - Common Polars patterns (filter, select, add column, aggregate)
  - Keyboard shortcuts for the code editor
- Add help button (?) to ProcessCodeEditor header
- Help modal uses existing modal pattern and styling
---
 .../pages/nodeDesigner/ProcessCodeEditor.vue  |  49 ++-
 .../nodeDesigner/ProcessCodeHelpModal.vue     | 303 ++++++++++++++++++
 2 files changed, 349 insertions(+), 3 deletions(-)
 create mode 100644 flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue

diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue
index 726d6b36c..c368b7ad8 100644
--- a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="code-editor-section">
-    <h4>Process Method</h4>
+    <div class="code-editor-header">
+      <h4>Process Method</h4>
+      <button class="help-btn" @click="showHelp = true" title="Show help">
+        <i class="fa-solid fa-circle-question"></i>
+      </button>
+    </div>
     <p class="code-hint">
       Write your data transformation logic. Access settings via
       <code>self.settings_schema.section_name.component_name.value</code>
@@ -17,12 +22,16 @@
         @update:model-value="emit('update:modelValue', $event)"
       />
     </div>
+
+    <ProcessCodeHelpModal :show="showHelp" @close="showHelp = false" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { Codemirror } from "vue-codemirror";
 import type { Extension } from "@codemirror/state";
+import ProcessCodeHelpModal from "./ProcessCodeHelpModal.vue";
 
 defineProps<{
   modelValue: string;
@@ -32,6 +41,8 @@ defineProps<{
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void;
 }>();
+
+const showHelp = ref(false);
 </script>
 
 <style scoped>
@@ -44,13 +55,45 @@ const emit = defineEmits<{
   border-radius: 8px;
 }
 
-.code-editor-section h4 {
-  margin: 0 0 0.5rem 0;
+.code-editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.code-editor-header h4 {
+  margin: 0;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary, #1a1a2e);
 }
 
+.help-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  color: var(--text-secondary, #6c757d);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.help-btn:hover {
+  background: var(--color-accent, #0891b2);
+  border-color: var(--color-accent, #0891b2);
+  color: white;
+}
+
+.help-btn i {
+  font-size: 0.875rem;
+}
+
 .code-hint {
   margin: 0 0 1rem 0;
   font-size: 0.8125rem;
diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue
new file mode 100644
index 000000000..b32517155
--- /dev/null
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue
@@ -0,0 +1,303 @@
+<template>
+  <div v-if="show" class="modal-overlay" @click="emit('close')">
+    <div class="modal-container modal-large" @click.stop>
+      <div class="modal-header">
+        <h3 class="modal-title">
+          <i class="fa-solid fa-circle-question"></i>
+          Process Method Help
+        </h3>
+        <button class="modal-close" @click="emit('close')">
+          <i class="fa-solid fa-times"></i>
+        </button>
+      </div>
+      <div class="modal-content">
+        <div class="help-section">
+          <h4>Overview</h4>
+          <p>
+            The process method is where you write your data transformation logic. It receives
+            input LazyFrames from connected nodes and returns a transformed LazyFrame.
+          </p>
+        </div>
+
+        <div class="help-section">
+          <h4>Method Signature</h4>
+          <pre
+            class="help-code"
+          ><code>def process(self, *inputs: pl.LazyFrame) -> pl.LazyFrame:</code></pre>
+          <ul class="help-list">
+            <li><code>inputs</code> - Tuple of input LazyFrames from connected nodes</li>
+            <li><code>inputs[0]</code> - First input (most common)</li>
+            <li><code>inputs[1]</code> - Second input (for joins, etc.)</li>
+          </ul>
+        </div>
+
+        <div class="help-section">
+          <h4>Accessing Settings</h4>
+          <p>Access user-configured values from your UI components:</p>
+          <pre
+            class="help-code"
+          ><code>self.settings_schema.section_name.component_name.value</code></pre>
+          <p class="help-note">
+            <i class="fa-solid fa-lightbulb"></i>
+            Use autocomplete by typing <code>self.</code> to navigate the settings schema.
+          </p>
+        </div>
+
+        <div class="help-section">
+          <h4>Working with Secrets</h4>
+          <p>For SecretSelector components, access the decrypted value:</p>
+          <pre class="help-code"><code># Get the SecretStr object
+secret = self.settings_schema.section.api_key.secret_value
+
+# Get the actual decrypted string value
+api_key = secret.get_secret_value()</code></pre>
+        </div>
+
+        <div class="help-section">
+          <h4>Common Patterns</h4>
+          <div class="pattern-grid">
+            <div class="pattern-item">
+              <h5>Filter Rows</h5>
+              <pre
+                class="help-code-small"
+              ><code>lf = inputs[0]
+return lf.filter(pl.col("column") > 10)</code></pre>
+            </div>
+            <div class="pattern-item">
+              <h5>Select Columns</h5>
+              <pre
+                class="help-code-small"
+              ><code>lf = inputs[0]
+return lf.select(["col1", "col2"])</code></pre>
+            </div>
+            <div class="pattern-item">
+              <h5>Add New Column</h5>
+              <pre
+                class="help-code-small"
+              ><code>lf = inputs[0]
+return lf.with_columns(
+    pl.col("a").alias("new_col")
+)</code></pre>
+            </div>
+            <div class="pattern-item">
+              <h5>Group & Aggregate</h5>
+              <pre
+                class="help-code-small"
+              ><code>lf = inputs[0]
+return lf.group_by("category").agg(
+    pl.col("value").sum()
+)</code></pre>
+            </div>
+          </div>
+        </div>
+
+        <div class="help-section">
+          <h4>Using Settings in Code</h4>
+          <pre class="help-code"><code># Example: Using a TextInput value
+column_name = self.settings_schema.options.column_name.value
+lf = inputs[0]
+return lf.select(pl.col(column_name))
+
+# Example: Using a ColumnSelector value
+selected_columns = self.settings_schema.columns.selected.value
+return lf.select(selected_columns)</code></pre>
+        </div>
+
+        <div class="help-section">
+          <h4>Keyboard Shortcuts</h4>
+          <div class="shortcuts-grid">
+            <div class="shortcut">
+              <kbd>Tab</kbd>
+              <span>Accept autocomplete suggestion</span>
+            </div>
+            <div class="shortcut">
+              <kbd>Arrow Up/Down</kbd>
+              <span>Navigate suggestions</span>
+            </div>
+            <div class="shortcut">
+              <kbd>Escape</kbd>
+              <span>Close autocomplete menu</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-primary" @click="emit('close')">Close</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  show: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+</script>
+
+<style scoped>
+.help-section {
+  margin-bottom: 1.5rem;
+}
+
+.help-section:last-child {
+  margin-bottom: 0;
+}
+
+.help-section h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.help-section h5 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.help-section p {
+  margin: 0 0 0.75rem 0;
+  color: var(--text-secondary, #6c757d);
+  line-height: 1.6;
+  font-size: 0.875rem;
+}
+
+.help-list {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+}
+
+.help-list li {
+  margin-bottom: 0.375rem;
+  line-height: 1.5;
+}
+
+.help-list code {
+  background: var(--bg-secondary, #f8f9fa);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+}
+
+.help-code {
+  display: block;
+  background: #282c34;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+
+.help-code code {
+  color: #abb2bf;
+  white-space: pre;
+}
+
+.help-code-small {
+  display: block;
+  background: #282c34;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.75rem;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.help-code-small code {
+  color: #abb2bf;
+  white-space: pre;
+}
+
+.help-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--color-accent-subtle, #ecfeff);
+  border-radius: 6px;
+  border-left: 3px solid var(--color-accent, #0891b2);
+  margin-top: 0.75rem !important;
+}
+
+.help-note i {
+  color: var(--color-accent, #0891b2);
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.help-note code {
+  background: rgba(255, 255, 255, 0.5);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+}
+
+.pattern-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-top: 0.75rem;
+}
+
+.pattern-item {
+  background: var(--bg-secondary, #f8f9fa);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
+
+.shortcuts-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6c757d);
+}
+
+.shortcut kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .help-note {
+  background: rgba(8, 145, 178, 0.1);
+}
+
+[data-theme="dark"] .help-note code {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] .help-list code {
+  background: var(--color-background-tertiary, #0f3460);
+}
+</style>

From cfb028f2fd80fe55a2d126749a2ac143f7433b56 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 14:01:15 +0000
Subject: [PATCH 3/5] Fix code editor UX issues

- Fix arrow key navigation in autocomplete by using defaultKeymap: true
  and Prec.highest for custom Tab handling
- Add SecretStr variable detection: when a variable is typed as SecretStr
  (e.g., `my_var: SecretStr = ...`), typing `my_var.` suggests get_secret_value()
- Make help button more prominent with accent color background and "Help" text
---
 .../features/designer/editor/pythonEditor.vue |  9 ++-
 .../pages/nodeDesigner/ProcessCodeEditor.vue  | 21 ++++---
 .../composables/usePolarsAutocompletion.ts    | 56 ++++++++++++++-----
 3 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue b/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
index b6cd55126..da76649e1 100644
--- a/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
+++ b/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
@@ -20,12 +20,12 @@
 
 <script setup lang="ts">
 import { EditorView, keymap } from "@codemirror/view";
-import { EditorState, Extension } from "@codemirror/state";
+import { EditorState, Extension, Prec } from "@codemirror/state";
 import { ref, shallowRef, defineExpose, watch } from "vue";
 import { Codemirror } from "vue-codemirror";
 import { python } from "@codemirror/lang-python";
 import { oneDark } from "@codemirror/theme-one-dark";
-import { autocompletion, completionKeymap, CompletionSource, acceptCompletion } from "@codemirror/autocomplete";
+import { autocompletion, CompletionSource, acceptCompletion } from "@codemirror/autocomplete";
 import { indentMore } from "@codemirror/commands";
 import { polarsCompletionVals } from "./pythonEditor/polarsCompletions";
 
@@ -88,11 +88,10 @@ const extensions: Extension[] = [
   EditorState.tabSize.of(4),
   autocompletion({
     override: [polarsCompletions],
-    defaultKeymap: false, // Disable default keymap to use custom tabKeymap
+    defaultKeymap: true, // Enable default keymap for arrow navigation
     closeOnBlur: false,
   }),
-  keymap.of(completionKeymap),
-  tabKeymap,
+  Prec.highest(tabKeymap), // Tab keymap with highest precedence
 ];
 
 // Rest of the component code remains the same...
diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue
index c368b7ad8..ab9dac9ad 100644
--- a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeEditor.vue
@@ -4,6 +4,7 @@
       <h4>Process Method</h4>
       <button class="help-btn" @click="showHelp = true" title="Show help">
         <i class="fa-solid fa-circle-question"></i>
+        <span>Help</span>
       </button>
     </div>
     <p class="code-hint">
@@ -70,24 +71,22 @@ const showHelp = ref(false);
 }
 
 .help-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  background: transparent;
-  border: 1px solid var(--border-color, #e0e0e0);
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--color-accent, #0891b2);
+  border: none;
   border-radius: 4px;
-  color: var(--text-secondary, #6c757d);
+  color: white;
+  font-size: 0.8125rem;
+  font-weight: 500;
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .help-btn:hover {
-  background: var(--color-accent, #0891b2);
-  border-color: var(--color-accent, #0891b2);
-  color: white;
+  background: var(--color-accent-hover, #0e7490);
 }
 
 .help-btn i {
diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
index 5c0a4de42..c19043f3d 100644
--- a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
@@ -2,7 +2,7 @@
  * Composable for Polars autocompletion in CodeMirror
  */
 import { EditorView, keymap } from '@codemirror/view';
-import { EditorState, Extension } from '@codemirror/state';
+import { EditorState, Extension, Prec } from '@codemirror/state';
 import { python } from '@codemirror/lang-python';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { autocompletion, completionKeymap, CompletionContext, CompletionResult, acceptCompletion } from '@codemirror/autocomplete';
@@ -141,27 +141,57 @@ const polarsCompletions = [
   { label: '.over', type: 'method', info: 'Window function over groups', apply: '.over("")' },
 ];
 
+// SecretStr methods for autocompletion
+const secretStrMethods = [
+  {
+    label: 'get_secret_value',
+    type: 'method',
+    info: 'Get the decrypted secret value as a string',
+    apply: 'get_secret_value()',
+    detail: 'SecretStr',
+  },
+];
+
 export function usePolarsAutocompletion(getSections: () => DesignerSection[]) {
+  // Helper to find SecretStr typed variables in the code
+  function findSecretStrVariables(doc: string): string[] {
+    const variables: string[] = [];
+    // Match patterns like: var_name: SecretStr = ... or var_name: SecretStr=...
+    const typeAnnotationPattern = /(\w+)\s*:\s*SecretStr\s*=/g;
+    let match;
+    while ((match = typeAnnotationPattern.exec(doc)) !== null) {
+      variables.push(match[1]);
+    }
+    return variables;
+  }
+
   // Dynamic autocompletion based on schema
   function schemaCompletions(context: CompletionContext): CompletionResult | null {
     const beforeCursor = context.state.doc.sliceString(0, context.pos);
+    const fullDoc = context.state.doc.toString();
     const sections = getSections();
 
+    // Check for SecretStr variable method completion (e.g., my_secret.)
+    const secretStrVars = findSecretStrVariables(fullDoc);
+    for (const varName of secretStrVars) {
+      const varMethodMatch = beforeCursor.match(new RegExp(`\\b${varName}\\.(\\w*)$`));
+      if (varMethodMatch) {
+        const typed = varMethodMatch[1];
+        return {
+          from: context.pos - typed.length,
+          options: secretStrMethods,
+          validFor: /^\w*$/,
+        };
+      }
+    }
+
     // Check for SecretStr method completion (after .secret_value.)
     const secretStrMethodMatch = beforeCursor.match(/\.secret_value\.(\w*)$/);
     if (secretStrMethodMatch) {
       const typed = secretStrMethodMatch[1];
       return {
         from: context.pos - typed.length,
-        options: [
-          {
-            label: 'get_secret_value',
-            type: 'method',
-            info: 'Get the decrypted secret value as a string',
-            apply: 'get_secret_value()',
-            detail: 'SecretStr',
-          },
-        ],
+        options: secretStrMethods,
         validFor: /^\w*$/,
       };
     }
@@ -296,17 +326,17 @@ export function usePolarsAutocompletion(getSections: () => DesignerSection[]) {
   ]);
 
   // CodeMirror extensions for editing
+  // Note: Prec.highest ensures completion keybindings take priority over other keymaps
   const extensions: Extension[] = [
     python(),
     oneDark,
     EditorState.tabSize.of(4),
     autocompletion({
       override: [schemaCompletions],
-      defaultKeymap: false,
+      defaultKeymap: true, // Enable default keymap for arrow navigation
       closeOnBlur: false,
     }),
-    keymap.of(completionKeymap),
-    tabKeymap,
+    Prec.highest(tabKeymap), // Tab keymap with highest precedence
   ];
 
   // Read-only CodeMirror extensions for code preview

From 85d245d391005241cc7ab62522f84d57980b3a51 Mon Sep 17 00:00:00 2001
From: edwardvaneechoud <evaneechoud@gmail.com>
Date: Sun, 4 Jan 2026 15:13:26 +0100
Subject: [PATCH 4/5] Removing code completion hints

---
 .../nodeDesigner/ProcessCodeHelpModal.vue      | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue
index b32517155..200428de4 100644
--- a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/ProcessCodeHelpModal.vue
@@ -102,24 +102,6 @@ return lf.select(pl.col(column_name))
 selected_columns = self.settings_schema.columns.selected.value
 return lf.select(selected_columns)</code></pre>
         </div>
-
-        <div class="help-section">
-          <h4>Keyboard Shortcuts</h4>
-          <div class="shortcuts-grid">
-            <div class="shortcut">
-              <kbd>Tab</kbd>
-              <span>Accept autocomplete suggestion</span>
-            </div>
-            <div class="shortcut">
-              <kbd>Arrow Up/Down</kbd>
-              <span>Navigate suggestions</span>
-            </div>
-            <div class="shortcut">
-              <kbd>Escape</kbd>
-              <span>Close autocomplete menu</span>
-            </div>
-          </div>
-        </div>
       </div>
       <div class="modal-actions">
         <button class="btn btn-primary" @click="emit('close')">Close</button>

From 732feec81d25430a14e2d793f71e3ff511e10c07 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 14:16:42 +0000
Subject: [PATCH 5/5] Add comprehensive Node Designer help and keyboard
 shortcuts

- Create NodeDesignerHelpModal.vue with tabbed documentation:
  - Overview: What is Node Designer, quick start steps
  - Layout: Page structure explanation with diagram
  - Components: All available components with descriptions and types
  - Code: Process method, settings access, keyboard shortcuts
  - Tips: Best practices and common patterns

- Add Shift+Tab keyboard shortcut for outdenting selected code
  (works in both ProcessCodeEditor and pythonEditor)

- Add Help button to Node Designer header that opens the help modal
---
 .../features/designer/editor/pythonEditor.vue |   8 +-
 .../src/renderer/app/pages/NodeDesigner.vue   |  12 +-
 .../nodeDesigner/NodeDesignerHelpModal.vue    | 734 ++++++++++++++++++
 .../composables/usePolarsAutocompletion.ts    |  10 +-
 4 files changed, 760 insertions(+), 4 deletions(-)
 create mode 100644 flowfile_frontend/src/renderer/app/pages/nodeDesigner/NodeDesignerHelpModal.vue

diff --git a/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue b/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
index da76649e1..f2a77cde2 100644
--- a/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
+++ b/flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue
@@ -26,7 +26,7 @@ import { Codemirror } from "vue-codemirror";
 import { python } from "@codemirror/lang-python";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { autocompletion, CompletionSource, acceptCompletion } from "@codemirror/autocomplete";
-import { indentMore } from "@codemirror/commands";
+import { indentMore, indentLess } from "@codemirror/commands";
 import { polarsCompletionVals } from "./pythonEditor/polarsCompletions";
 
 const props = defineProps({
@@ -63,6 +63,12 @@ const tabKeymap = keymap.of([
       return indentMore(view);
     },
   },
+  {
+    key: "Shift-Tab",
+    run: (view: EditorView): boolean => {
+      return indentLess(view);
+    },
+  },
 ]);
 
 const insertTextAtCursor = (text: string) => {
diff --git a/flowfile_frontend/src/renderer/app/pages/NodeDesigner.vue b/flowfile_frontend/src/renderer/app/pages/NodeDesigner.vue
index aa1cd1f11..80433ebad 100644
--- a/flowfile_frontend/src/renderer/app/pages/NodeDesigner.vue
+++ b/flowfile_frontend/src/renderer/app/pages/NodeDesigner.vue
@@ -7,6 +7,10 @@
         <p class="page-description">Design custom nodes visually</p>
       </div>
       <div class="header-actions">
+        <button class="btn btn-secondary" @click="showHelpModal = true">
+          <i class="fa-solid fa-circle-question"></i>
+          Help
+        </button>
         <button class="btn btn-secondary" @click="nodeBrowser.openNodeBrowser()">
           <i class="fa-solid fa-folder-open"></i>
           Browse
@@ -187,11 +191,13 @@
       @cancel-delete="nodeBrowser.showDeleteConfirm.value = false"
       @delete="nodeBrowser.deleteNode()"
     />
+
+    <NodeDesignerHelpModal :show="showHelpModal" @close="showHelpModal = false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, computed } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import axios from "axios";
 
 // Child components
@@ -202,6 +208,7 @@ import ProcessCodeEditor from "./nodeDesigner/ProcessCodeEditor.vue";
 import CodePreviewModal from "./nodeDesigner/CodePreviewModal.vue";
 import ValidationModal from "./nodeDesigner/ValidationModal.vue";
 import NodeBrowserModal from "./nodeDesigner/NodeBrowserModal.vue";
+import NodeDesignerHelpModal from "./nodeDesigner/NodeDesignerHelpModal.vue";
 import IconSelector from "./nodeDesigner/IconSelector.vue";
 
 // Composables
@@ -243,6 +250,9 @@ const autocompletion = usePolarsAutocompletion(() => sections.value);
 
 const storage = useSessionStorage(getState, setState, resetState);
 
+// Help modal state
+const showHelpModal = ref(false);
+
 // Setup auto-save and load on mount
 watch([() => ({ ...nodeMetadata }), sections, processCode], () => storage.saveToSessionStorage(), {
   deep: true,
diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/NodeDesignerHelpModal.vue b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/NodeDesignerHelpModal.vue
new file mode 100644
index 000000000..41acc71fd
--- /dev/null
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/NodeDesignerHelpModal.vue
@@ -0,0 +1,734 @@
+<template>
+  <div v-if="show" class="modal-overlay" @click="emit('close')">
+    <div class="modal-container modal-xl" @click.stop>
+      <div class="modal-header">
+        <h3 class="modal-title">
+          <i class="fa-solid fa-circle-question"></i>
+          Node Designer Guide
+        </h3>
+        <button class="modal-close" @click="emit('close')">
+          <i class="fa-solid fa-times"></i>
+        </button>
+      </div>
+      <div class="modal-content">
+        <!-- Navigation tabs -->
+        <div class="help-tabs">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            :class="['help-tab', { active: activeTab === tab.id }]"
+            @click="activeTab = tab.id"
+          >
+            <i :class="tab.icon"></i>
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <!-- Tab content -->
+        <div class="help-tab-content">
+          <!-- Overview Tab -->
+          <div v-if="activeTab === 'overview'" class="tab-panel">
+            <h4>What is the Node Designer?</h4>
+            <p>
+              The Node Designer allows you to create custom data transformation nodes without
+              writing boilerplate code. Design your node's UI visually, then write only the
+              transformation logic.
+            </p>
+
+            <div class="feature-grid">
+              <div class="feature-card">
+                <div class="feature-icon">
+                  <i class="fa-solid fa-palette"></i>
+                </div>
+                <h5>Visual UI Design</h5>
+                <p>Drag and drop components to create your node's settings interface</p>
+              </div>
+              <div class="feature-card">
+                <div class="feature-icon">
+                  <i class="fa-solid fa-code"></i>
+                </div>
+                <h5>Python Processing</h5>
+                <p>Write Polars transformation code with full autocomplete support</p>
+              </div>
+              <div class="feature-card">
+                <div class="feature-icon">
+                  <i class="fa-solid fa-plug"></i>
+                </div>
+                <h5>Instant Integration</h5>
+                <p>Your custom nodes appear immediately in the flow editor</p>
+              </div>
+            </div>
+
+            <h4>Quick Start</h4>
+            <ol class="steps-list">
+              <li>
+                <strong>Set metadata</strong> - Name your node and choose a category
+              </li>
+              <li>
+                <strong>Add sections</strong> - Create UI sections to organize your settings
+              </li>
+              <li>
+                <strong>Add components</strong> - Drag components from the palette into sections
+              </li>
+              <li>
+                <strong>Configure properties</strong> - Select a component to edit its properties
+              </li>
+              <li>
+                <strong>Write process code</strong> - Implement your transformation logic
+              </li>
+              <li><strong>Save</strong> - Your node is ready to use!</li>
+            </ol>
+          </div>
+
+          <!-- Layout Tab -->
+          <div v-if="activeTab === 'layout'" class="tab-panel">
+            <h4>Page Layout</h4>
+            <div class="layout-diagram">
+              <div class="layout-box palette">
+                <span class="layout-label">Component Palette</span>
+                <p>Drag components from here</p>
+              </div>
+              <div class="layout-box canvas">
+                <span class="layout-label">Design Canvas</span>
+                <p>Build your node UI here</p>
+              </div>
+              <div class="layout-box properties">
+                <span class="layout-label">Properties</span>
+                <p>Edit selected component</p>
+              </div>
+            </div>
+
+            <h4>Component Palette (Left)</h4>
+            <p>
+              Contains all available UI components. Drag them into a section on the Design Canvas
+              to add them to your node.
+            </p>
+
+            <h4>Design Canvas (Center)</h4>
+            <ul class="help-list">
+              <li>
+                <strong>Node Metadata</strong> - Set your node's name, category, title,
+                description, and number of inputs/outputs
+              </li>
+              <li>
+                <strong>UI Sections</strong> - Organize your components into collapsible sections
+              </li>
+              <li>
+                <strong>Process Method</strong> - Write your Python transformation code
+              </li>
+            </ul>
+
+            <h4>Property Editor (Right)</h4>
+            <p>
+              When you select a component, its properties appear here. Configure labels, defaults,
+              validation rules, and more.
+            </p>
+          </div>
+
+          <!-- Components Tab -->
+          <div v-if="activeTab === 'components'" class="tab-panel">
+            <h4>Available Components</h4>
+
+            <div class="component-list">
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-font"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Text Input</h5>
+                  <p>Single-line text entry for strings, names, or patterns</p>
+                  <code>value: str</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-hashtag"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Numeric Input</h5>
+                  <p>Number entry with optional min/max validation</p>
+                  <code>value: int | float</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-toggle-on"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Toggle Switch</h5>
+                  <p>Boolean on/off switch for feature flags</p>
+                  <code>value: bool</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-list"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Single Select</h5>
+                  <p>Dropdown to select one option from a list</p>
+                  <code>value: str</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-list-check"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Multi Select</h5>
+                  <p>Select multiple options from a list</p>
+                  <code>value: list[str]</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-table-columns"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Column Selector</h5>
+                  <p>Select columns from input data (single or multiple)</p>
+                  <code>value: str | list[str]</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-sliders"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Slider</h5>
+                  <p>Numeric slider with min/max/step</p>
+                  <code>value: int | float</code>
+                </div>
+              </div>
+
+              <div class="component-item">
+                <div class="component-icon">
+                  <i class="fa-solid fa-key"></i>
+                </div>
+                <div class="component-info">
+                  <h5>Secret Selector</h5>
+                  <p>Securely access stored secrets (API keys, passwords)</p>
+                  <code>secret_value: SecretStr</code>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Code Tab -->
+          <div v-if="activeTab === 'code'" class="tab-panel">
+            <h4>Process Method</h4>
+            <p>The process method receives input data and returns transformed output:</p>
+            <pre
+              class="help-code"
+            ><code>def process(self, *inputs: pl.LazyFrame) -> pl.LazyFrame:
+    lf = inputs[0]  # First input
+    # Your transformation logic here
+    return lf</code></pre>
+
+            <h4>Accessing Settings</h4>
+            <p>Access user-configured values from your UI components:</p>
+            <pre
+              class="help-code"
+            ><code># Pattern: self.settings_schema.section_name.component_name.value
+column = self.settings_schema.options.column_name.value
+threshold = self.settings_schema.filters.min_value.value</code></pre>
+
+            <h4>Working with Secrets</h4>
+            <pre class="help-code"><code># Get SecretStr, then extract the actual value
+api_key: SecretStr = self.settings_schema.auth.api_key.secret_value
+actual_key = api_key.get_secret_value()</code></pre>
+
+            <h4>Keyboard Shortcuts</h4>
+            <div class="shortcuts-grid">
+              <div class="shortcut">
+                <kbd>Tab</kbd>
+                <span>Accept autocomplete / Indent</span>
+              </div>
+              <div class="shortcut">
+                <kbd>Shift</kbd>+<kbd>Tab</kbd>
+                <span>Outdent selected lines</span>
+              </div>
+              <div class="shortcut">
+                <kbd>Arrow Up/Down</kbd>
+                <span>Navigate autocomplete suggestions</span>
+              </div>
+              <div class="shortcut">
+                <kbd>Escape</kbd>
+                <span>Close autocomplete menu</span>
+              </div>
+              <div class="shortcut">
+                <kbd>Shift</kbd>+<kbd>Arrow</kbd>
+                <span>Extend selection</span>
+              </div>
+              <div class="shortcut">
+                <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Arrow</kbd>
+                <span>Select by word</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tips Tab -->
+          <div v-if="activeTab === 'tips'" class="tab-panel">
+            <h4>Best Practices</h4>
+
+            <div class="tip-card">
+              <div class="tip-icon success">
+                <i class="fa-solid fa-check"></i>
+              </div>
+              <div class="tip-content">
+                <h5>Use descriptive names</h5>
+                <p>
+                  Choose clear variable names in sections (e.g., "filters", "options") and
+                  components (e.g., "column_name", "threshold")
+                </p>
+              </div>
+            </div>
+
+            <div class="tip-card">
+              <div class="tip-icon success">
+                <i class="fa-solid fa-check"></i>
+              </div>
+              <div class="tip-content">
+                <h5>Group related settings</h5>
+                <p>
+                  Use sections to organize related components together. This creates a better user
+                  experience.
+                </p>
+              </div>
+            </div>
+
+            <div class="tip-card">
+              <div class="tip-icon success">
+                <i class="fa-solid fa-check"></i>
+              </div>
+              <div class="tip-content">
+                <h5>Use Column Selector for dynamic columns</h5>
+                <p>
+                  Instead of hardcoding column names, use ColumnSelector to let users pick columns
+                  from their data.
+                </p>
+              </div>
+            </div>
+
+            <div class="tip-card">
+              <div class="tip-icon warning">
+                <i class="fa-solid fa-exclamation"></i>
+              </div>
+              <div class="tip-content">
+                <h5>Keep process code simple</h5>
+                <p>
+                  Focus on transformation logic. Complex operations should be broken into multiple
+                  nodes.
+                </p>
+              </div>
+            </div>
+
+            <div class="tip-card">
+              <div class="tip-icon warning">
+                <i class="fa-solid fa-exclamation"></i>
+              </div>
+              <div class="tip-content">
+                <h5>Use secrets for sensitive data</h5>
+                <p>
+                  Never hardcode API keys or passwords. Use the Secret Selector component for
+                  secure credential access.
+                </p>
+              </div>
+            </div>
+
+            <h4>Common Patterns</h4>
+            <pre class="help-code"><code># Filter rows
+return lf.filter(pl.col(column) > threshold)
+
+# Select and rename
+return lf.select([
+    pl.col(old_name).alias(new_name)
+])
+
+# Add computed column
+return lf.with_columns(
+    (pl.col("a") + pl.col("b")).alias("sum")
+)
+
+# Group and aggregate
+return lf.group_by(group_col).agg(
+    pl.col(value_col).sum().alias("total")
+)</code></pre>
+          </div>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-primary" @click="emit('close')">Close</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineProps<{
+  show: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+const activeTab = ref("overview");
+
+const tabs = [
+  { id: "overview", label: "Overview", icon: "fa-solid fa-house" },
+  { id: "layout", label: "Layout", icon: "fa-solid fa-table-columns" },
+  { id: "components", label: "Components", icon: "fa-solid fa-puzzle-piece" },
+  { id: "code", label: "Code", icon: "fa-solid fa-code" },
+  { id: "tips", label: "Tips", icon: "fa-solid fa-lightbulb" },
+];
+</script>
+
+<style scoped>
+.modal-xl {
+  max-width: 900px;
+}
+
+/* Tabs */
+.help-tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0;
+}
+
+.help-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-bottom: -1px;
+}
+
+.help-tab:hover {
+  color: var(--text-primary, #1a1a2e);
+  background: var(--bg-secondary, #f8f9fa);
+}
+
+.help-tab.active {
+  color: var(--color-accent, #0891b2);
+  border-bottom-color: var(--color-accent, #0891b2);
+}
+
+.help-tab i {
+  font-size: 0.875rem;
+}
+
+/* Tab content */
+.tab-panel h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.tab-panel h4:not(:first-child) {
+  margin-top: 1.5rem;
+}
+
+.tab-panel p {
+  margin: 0 0 1rem 0;
+  color: var(--text-secondary, #6c757d);
+  line-height: 1.6;
+  font-size: 0.875rem;
+}
+
+/* Feature grid */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.feature-card {
+  padding: 1rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.feature-icon {
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-accent-subtle, #ecfeff);
+  border-radius: 50%;
+  color: var(--color-accent, #0891b2);
+  font-size: 1.25rem;
+}
+
+.feature-card h5 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.feature-card p {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #6c757d);
+}
+
+/* Steps list */
+.steps-list {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+}
+
+.steps-list li {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+
+.steps-list strong {
+  color: var(--text-primary, #1a1a2e);
+}
+
+/* Layout diagram */
+.layout-diagram {
+  display: grid;
+  grid-template-columns: 150px 1fr 200px;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.layout-box {
+  padding: 1rem;
+  border: 2px dashed var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.layout-box.palette {
+  background: rgba(99, 102, 241, 0.05);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.layout-box.canvas {
+  background: rgba(8, 145, 178, 0.05);
+  border-color: rgba(8, 145, 178, 0.3);
+}
+
+.layout-box.properties {
+  background: rgba(16, 185, 129, 0.05);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+
+.layout-label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.layout-box p {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+/* Help list */
+.help-list {
+  margin: 0 0 1rem 0;
+  padding-left: 1.5rem;
+  color: var(--text-secondary, #6c757d);
+  font-size: 0.875rem;
+}
+
+.help-list li {
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+
+.help-list strong {
+  color: var(--text-primary, #1a1a2e);
+}
+
+/* Component list */
+.component-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.component-item {
+  display: flex;
+  gap: 1rem;
+  padding: 0.75rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+}
+
+.component-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  color: var(--color-accent, #0891b2);
+  flex-shrink: 0;
+}
+
+.component-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.component-info h5 {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.component-info p {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.8125rem;
+}
+
+.component-info code {
+  font-size: 0.75rem;
+  color: var(--color-accent, #0891b2);
+  font-family: "Fira Code", "Monaco", monospace;
+}
+
+/* Code blocks */
+.help-code {
+  display: block;
+  background: #282c34;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  font-family: "Fira Code", "Monaco", monospace;
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  margin: 0.5rem 0 1rem 0;
+}
+
+.help-code code {
+  color: #abb2bf;
+  white-space: pre;
+}
+
+/* Shortcuts grid */
+.shortcuts-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #6c757d);
+  padding: 0.5rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border-radius: 4px;
+}
+
+.shortcut kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding: 0.125rem 0.375rem;
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Tip cards */
+.tip-card {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border-radius: 6px;
+  margin-bottom: 0.75rem;
+}
+
+.tip-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+}
+
+.tip-icon.success {
+  background: var(--color-success-light, #d1fae5);
+  color: var(--color-success, #10b981);
+}
+
+.tip-icon.warning {
+  background: var(--color-warning-light, #fef3c7);
+  color: var(--color-warning, #f59e0b);
+}
+
+.tip-content h5 {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a2e);
+}
+
+.tip-content p {
+  margin: 0;
+  font-size: 0.8125rem;
+}
+
+/* Dark mode */
+[data-theme="dark"] .layout-box.palette {
+  background: rgba(99, 102, 241, 0.1);
+}
+
+[data-theme="dark"] .layout-box.canvas {
+  background: rgba(8, 145, 178, 0.1);
+}
+
+[data-theme="dark"] .layout-box.properties {
+  background: rgba(16, 185, 129, 0.1);
+}
+</style>
diff --git a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
index c19043f3d..03565e0d6 100644
--- a/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
+++ b/flowfile_frontend/src/renderer/app/pages/nodeDesigner/composables/usePolarsAutocompletion.ts
@@ -6,7 +6,7 @@ import { EditorState, Extension, Prec } from '@codemirror/state';
 import { python } from '@codemirror/lang-python';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { autocompletion, completionKeymap, CompletionContext, CompletionResult, acceptCompletion } from '@codemirror/autocomplete';
-import { indentMore } from '@codemirror/commands';
+import { indentMore, indentLess } from '@codemirror/commands';
 import type { DesignerSection } from '../types';
 import { toSnakeCase } from './useCodeGeneration';
 
@@ -312,7 +312,7 @@ export function usePolarsAutocompletion(getSections: () => DesignerSection[]) {
     };
   }
 
-  // Tab keymap for accepting completions
+  // Tab keymap for accepting completions and indentation
   const tabKeymap = keymap.of([
     {
       key: 'Tab',
@@ -323,6 +323,12 @@ export function usePolarsAutocompletion(getSections: () => DesignerSection[]) {
         return indentMore(view);
       },
     },
+    {
+      key: 'Shift-Tab',
+      run: (view: EditorView): boolean => {
+        return indentLess(view);
+      },
+    },
   ]);
 
   // CodeMirror extensions for editing