From d2eaab277e51ae010742a28cd6d09d1cd465a174 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Thu, 9 Apr 2026 16:12:42 +0200
Subject: [PATCH] debug: Add extensive logging to PlaceholderPicker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue Investigation:**
User reports:
1. Backend placeholders (120+) not appearing
2. Node names showing as 'node_2' instead of 'Körper-Analyse (node_2)'

**Debug Changes:**
- Console logging for backend API call
- Log catalog structure and keys
- Log flattened placeholders count
- Error state displayed in UI (not just console)
- Log each node extraction with label/data
- Safe navigation operator for node.data?.label

**Expected Console Output:**
🔄 Loading placeholders from backend...
✅ Catalog received: {...}
📊 Catalog keys: ['Profil', 'Körper', ...]
📁 Category "Profil": 10 items
✅ Loaded 120 system placeholders
🔍 Extracting workflow placeholders from nodes: [...]
📦 Node node_2: {label: 'Körper-Analyse', ...}
  ➕ Adding placeholder: {{ node_2.analysis_core }} → "Körper-Analyse (node_2) - Hauptausgabe"

Next: Check browser console for error messages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../workflow/panels/PlaceholderPicker.jsx     | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/workflow/panels/PlaceholderPicker.jsx b/frontend/src/components/workflow/panels/PlaceholderPicker.jsx
index 3434245..1259aaa 100644
--- a/frontend/src/components/workflow/panels/PlaceholderPicker.jsx
+++ b/frontend/src/components/workflow/panels/PlaceholderPicker.jsx
@@ -20,15 +20,25 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
   const [searchQuery, setSearchQuery] = useState('')
   const [systemPlaceholders, setSystemPlaceholders] = useState([])
   const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState(null)
 
   // Lade Backend-Platzhalter beim Mount
   useEffect(() => {
     async function loadPlaceholders() {
       try {
+        console.log('🔄 Loading placeholders from backend...')
         const catalog = await api.listPlaceholders()
+        console.log('✅ Catalog received:', catalog)
+        console.log('📊 Catalog keys:', Object.keys(catalog))
+
         // Konvertiere Katalog zu Flat-Liste
         const flattened = []
         Object.entries(catalog).forEach(([category, items]) => {
+          console.log(`📁 Category "${category}": ${items?.length || 0} items`)
+          if (!Array.isArray(items)) {
+            console.warn(`⚠️ Category "${category}" items is not an array:`, items)
+            return
+          }
           items.forEach(item => {
             flattened.push({
               placeholder: `{{ ${item.key.trim()} }}`,
@@ -39,9 +49,11 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
             })
           })
         })
+        console.log(`✅ Loaded ${flattened.length} system placeholders`)
         setSystemPlaceholders(flattened)
       } catch (e) {
-        console.error('Failed to load placeholders:', e)
+        console.error('❌ Failed to load placeholders:', e)
+        setLoadError(e.message)
       } finally {
         setLoading(false)
       }
@@ -188,6 +200,20 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
             >
               Lade Platzhalter...
             </div>
+          ) : loadError ? (
+            <div
+              style={{
+                padding: '24px',
+                textAlign: 'center',
+                color: 'var(--danger)',
+                fontSize: '14px'
+              }}
+            >
+              ❌ Fehler beim Laden: {loadError}
+              <div style={{ marginTop: '12px', fontSize: '12px', color: 'var(--text3)' }}>
+                Workflow-Platzhalter sind trotzdem verfügbar.
+              </div>
+            </div>
           ) : Object.keys(grouped).length === 0 ? (
             <div
               style={{
@@ -319,17 +345,28 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
 function extractWorkflowPlaceholders(nodes) {
   const placeholders = []
 
+  console.log('🔍 Extracting workflow placeholders from nodes:', nodes)
+
   nodes.forEach(node => {
     if (node.type === 'end') return // End Node hat keine Outputs
 
     const nodeId = node.id
-    const nodeLabel = node.data.label || nodeId
+    const nodeLabel = node.data?.label || nodeId
+
+    console.log(`📦 Node ${nodeId}:`, {
+      type: node.type,
+      label: node.data?.label,
+      nodeLabel: nodeLabel,
+      data: node.data
+    })
 
     // analysis_core für alle Analysis/Logic/Join Nodes
     if (node.type === 'analysis' || node.type === 'logic' || node.type === 'join') {
+      const desc = `${nodeLabel} (${nodeId}) - Hauptausgabe`
+      console.log(`  ➕ Adding placeholder: {{ ${nodeId}.analysis_core }} → "${desc}"`)
       placeholders.push({
         placeholder: `{{ ${nodeId}.analysis_core }}`,
-        description: `${nodeLabel} (${nodeId}) - Hauptausgabe`,
+        description: desc,
         icon: getNodeIcon(node.type),
         category: 'Workflow - Node Outputs'
       })