From 8d89b23db18d5320e1ae0c30f4057d9f3dcbd502 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 11 Apr 2026 10:31:05 +0200
Subject: [PATCH] fix: UX improvements for inline template mode switching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue 1: Prompt selector loses value**
- When switching Reference→Inline→Reference, the dropdown was empty
- Root cause: Switching to Inline deleted prompt_slug
- Fix: Keep prompt_slug when activating inline_template
- Now: Both modes preserve their values independently

**Issue 2: Workflow overview shows 'kein Prompt'**
- Nodes with inline templates showed misleading 'kein Prompt' text
- Root cause: AnalysisNode only checked prompt_name/prompt_slug
- Fix: Check inline_template and display '✏️ Inline-Template'
- Now: Clear visual distinction between modes

Files:
- WorkflowEditorPage.jsx: Preserve prompt_slug on mode switch
- AnalysisNode.jsx: Add isInlineMode detection and display

Part 3: Inline Prompts - UX polish
---
 .../src/components/workflow/nodes/AnalysisNode.jsx     | 10 ++++++++--
 frontend/src/pages/WorkflowEditorPage.jsx              |  6 +++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/workflow/nodes/AnalysisNode.jsx b/frontend/src/components/workflow/nodes/AnalysisNode.jsx
index 77069a2..d7f9e7c 100644
--- a/frontend/src/components/workflow/nodes/AnalysisNode.jsx
+++ b/frontend/src/components/workflow/nodes/AnalysisNode.jsx
@@ -5,16 +5,22 @@ import { Handle, Position } from 'reactflow'
  *
  * Properties:
  * - data.label: Node-Label
- * - data.prompt_slug: Slug des referenzierten Basis-Prompts
+ * - data.prompt_slug: Slug des referenzierten Basis-Prompts (Reference Mode)
+ * - data.inline_template: Inline Prompt-Template (Inline Mode)
  * - data.prompt_name: Name des Prompts (optional, für Display)
  * - data.questions: Array von Question Augmentations
  * - selected: Boolean
  */
 export function AnalysisNode({ data, selected }) {
   const hasQuestions = data.questions?.length > 0
-  const promptName = data.prompt_name || (data.prompt_slug ? `Prompt: ${data.prompt_slug}` : 'Kein Prompt')
   const questionCount = data.questions?.length || 0
 
+  // Part 3: Inline Prompts - Zeige "Inline-Template" oder Prompt-Namen
+  const isInlineMode = data.inline_template !== null && data.inline_template !== undefined
+  const promptName = isInlineMode
+    ? '✏️ Inline-Template'
+    : (data.prompt_name || (data.prompt_slug ? `Prompt: ${data.prompt_slug}` : 'Kein Prompt'))
+
   return (
     <div className={`workflow-node analysis-node ${selected ? 'selected' : ''}`}>
       <div className="node-header">
diff --git a/frontend/src/pages/WorkflowEditorPage.jsx b/frontend/src/pages/WorkflowEditorPage.jsx
index 08a486f..0aa4433 100644
--- a/frontend/src/pages/WorkflowEditorPage.jsx
+++ b/frontend/src/pages/WorkflowEditorPage.jsx
@@ -520,9 +520,9 @@ export default function WorkflowEditorPage() {
                           checked={isInlineMode}
                           onChange={() => {
                             // Wechsel zu Inline Mode
+                            // WICHTIG: prompt_slug NICHT löschen, damit er beim Zurückwechseln noch da ist
                             handleNodeUpdate(selectedNode.id, {
-                              prompt_slug: null,  // Reference löschen
-                              inline_template: selectedNode.data.inline_template || ''  // Behalte existierendes template
+                              inline_template: selectedNode.data.inline_template || ''  // Aktiviere Inline Mode
                             })
                           }}
                           style={{ marginRight: '8px' }}
@@ -542,7 +542,7 @@ export default function WorkflowEditorPage() {
                           const promptSlug = e.target.value
                           const selectedPrompt = availablePrompts.find(p => p.slug === promptSlug)
                           handleNodeUpdate(selectedNode.id, {
-                            prompt_slug: promptSlug || '',
+                            prompt_slug: promptSlug,
                             prompt_name: selectedPrompt?.name || null,
                             inline_template: null
                           })