From 8b287ca6c98baa5c06ba32150959b883a51c6e9b Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Thu, 26 Mar 2026 09:40:26 +0100
Subject: [PATCH] feat: export all placeholders from debug viewer (Issue #28
 Debug A)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added "📋 Platzhalter exportieren" button in debug viewer:
- Exports all resolved placeholders with values
- Includes all available_variables
- For pipelines: exports per-stage placeholder data
- JSON format with timestamp and prompt metadata
- Filename: placeholders-{slug}-{date}.json

Use case: Development aid - see exactly what data is available
for prompt templates without null values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/UnifiedPromptModal.jsx     | 79 +++++++++++++++++--
 1 file changed, 73 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/UnifiedPromptModal.jsx b/frontend/src/components/UnifiedPromptModal.jsx
index 74ce044..2157eb2 100644
--- a/frontend/src/components/UnifiedPromptModal.jsx
+++ b/frontend/src/components/UnifiedPromptModal.jsx
@@ -308,6 +308,58 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
     }
   }
 
+  const handleExportPlaceholders = () => {
+    if (!testResult) return
+
+    // Extract all placeholder data from test result
+    const debug = testResult.debug || testResult
+    const exportData = {
+      export_date: new Date().toISOString(),
+      prompt_slug: prompt?.slug || 'unknown',
+      prompt_name: name || 'Unnamed Prompt',
+      placeholders: {}
+    }
+
+    // For pipeline prompts, collect from all stages
+    if (debug.stages && Array.isArray(debug.stages)) {
+      debug.stages.forEach(stage => {
+        exportData.placeholders[`stage_${stage.stage}`] = {
+          available_variables: stage.available_variables || [],
+          prompts: stage.prompts?.map(p => ({
+            source: p.source,
+            resolved: p.resolved_placeholders || p.ref_debug?.resolved_placeholders || {},
+            unresolved: p.unresolved_placeholders || p.ref_debug?.unresolved_placeholders || []
+          })) || []
+        }
+      })
+    }
+
+    // For base prompts or direct execution
+    if (debug.resolved_placeholders) {
+      exportData.placeholders.resolved = debug.resolved_placeholders
+    }
+    if (debug.unresolved_placeholders) {
+      exportData.placeholders.unresolved = debug.unresolved_placeholders
+    }
+    if (debug.available_variables) {
+      exportData.available_variables = debug.available_variables
+    }
+    if (debug.initial_variables) {
+      exportData.initial_variables = debug.initial_variables
+    }
+
+    // Download as JSON
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `placeholders-${prompt?.slug || 'test'}-${new Date().toISOString().split('T')[0]}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
   return (
     <div style={{
       position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
@@ -662,12 +714,27 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
               <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
                 🔬 Debug-Info
               </h3>
-              <button
-                onClick={() => setShowDebug(false)}
-                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}
-              >
-                <X size={16} color="var(--text3)" />
-              </button>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <button
+                  className="btn"
+                  onClick={handleExportPlaceholders}
+                  style={{
+                    padding: '4px 8px',
+                    fontSize: 11,
+                    background: 'var(--accent)',
+                    color: 'white'
+                  }}
+                  title="Exportiere alle Platzhalter mit Werten als JSON"
+                >
+                  📋 Platzhalter exportieren
+                </button>
+                <button
+                  onClick={() => setShowDebug(false)}
+                  style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}
+                >
+                  <X size={16} color="var(--text3)" />
+                </button>
+              </div>
             </div>
             <pre style={{
               fontSize: 11,