feat: Analysis page pipeline-only + wider placeholder examples (Issue #28)

- PlaceholderPicker: Example values in separate full-width row
- Analysis.jsx: Show only pipeline-type prompts
- Analysis.jsx: Remove base prompts and Prompts tab
- Cleanup: Remove PromptEditor component and unused imports

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/PlaceholderPicker.jsx

@@ -196,13 +196,8 @@ export default function PlaceholderPicker({ onSelect, onClose }) {
                           e.currentTarget.style.background = 'var(--surface2)'
                         }}
                       >
-                        <div style={{
+                        <div>
-                          display: 'flex',
+                          <div>
-                          justifyContent: 'space-between',
-                          alignItems: 'flex-start',
-                          gap: 12
-                        }}>
-                          <div style={{ flex: 1 }}>
                             <code style={{
                               fontSize: 12,
                               fontWeight: 600,
@@ -221,14 +216,16 @@ export default function PlaceholderPicker({ onSelect, onClose }) {
                           </div>
                           {item.example && (
                             <div style={{
-                              fontSize: 10,
+                              fontSize: 11,
                               color: 'var(--text3)',
                               fontFamily: 'monospace',
-                              padding: '2px 6px',
+                              padding: '4px 8px',
                               background: 'var(--bg)',
                               borderRadius: 4,
-                              whiteSpace: 'nowrap'
+                              marginTop: 6,
+                              wordBreak: 'break-word'
                             }}>
+                              <span style={{ fontSize: 9, opacity: 0.7, marginRight: 4 }}>Beispiel:</span>
                               {item.example}
                             </div>
                           )}

frontend/src/pages/Analysis.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Brain, Pencil, Trash2, ChevronDown, ChevronUp, Check, X } from 'lucide-react'
+import { Brain, Trash2, ChevronDown, ChevronUp } from 'lucide-react'
 import { api } from '../utils/api'
 import { useAuth } from '../context/AuthContext'
 import Markdown from '../utils/Markdown'
@@ -8,19 +8,9 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/de'
 dayjs.locale('de')
 
+// Legacy fallback labels (display_name takes precedence)
 const SLUG_LABELS = {
-  gesamt:             '🔍 Gesamtanalyse',
+  pipeline: '🔬 Mehrstufige Gesamtanalyse'
-  koerper:            '🫧 Körperkomposition',
-  ernaehrung:         '🍽️ Ernährung',
-  aktivitaet:         '🏋️ Aktivität',
-  gesundheit:         '❤️ Gesundheitsindikatoren',
-  ziele:              '🎯 Zielfortschritt',
-  pipeline:           '🔬 Mehrstufige Gesamtanalyse',
-  pipeline_body:      '🔬 Pipeline: Körper-Analyse (JSON)',
-  pipeline_nutrition: '🔬 Pipeline: Ernährungs-Analyse (JSON)',
-  pipeline_activity:  '🔬 Pipeline: Aktivitäts-Analyse (JSON)',
-  pipeline_synthesis: '🔬 Pipeline: Synthese',
-  pipeline_goals:     '🔬 Pipeline: Zielabgleich',
 }
 
 function InsightCard({ ins, onDelete, defaultOpen=false, prompts=[] }) {
@@ -53,78 +43,16 @@ function InsightCard({ ins, onDelete, defaultOpen=false, prompts=[] }) {
   )
 }
 
-function PromptEditor({ prompt, onSave, onCancel }) {
-  const [template, setTemplate] = useState(prompt.template)
-  const [name,     setName]     = useState(prompt.name)
-  const [desc,     setDesc]     = useState(prompt.description||'')
-
-  const VARS = ['{{name}}','{{geschlecht}}','{{height}}','{{goal_weight}}','{{goal_bf_pct}}',
-    '{{weight_trend}}','{{weight_aktuell}}','{{kf_aktuell}}','{{caliper_summary}}',
-    '{{circ_summary}}','{{nutrition_summary}}','{{nutrition_detail}}',
-    '{{protein_ziel_low}}','{{protein_ziel_high}}','{{activity_summary}}',
-    '{{activity_kcal_summary}}','{{activity_detail}}',
-    '{{sleep_summary}}','{{sleep_detail}}','{{sleep_avg_duration}}','{{sleep_avg_quality}}',
-    '{{rest_days_summary}}','{{rest_days_count}}','{{rest_days_types}}',
-    '{{vitals_summary}}','{{vitals_detail}}','{{vitals_avg_hr}}','{{vitals_avg_hrv}}',
-    '{{vitals_avg_bp}}','{{vitals_vo2_max}}','{{bp_summary}}']
-
-  return (
-    <div className="card section-gap">
-      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
-        <div className="card-title" style={{margin:0}}>Prompt bearbeiten</div>
-        <button style={{background:'none',border:'none',cursor:'pointer',color:'var(--text3)'}}
-          onClick={onCancel}><X size={16}/></button>
-      </div>
-      <div className="form-row">
-        <label className="form-label">Name</label>
-        <input type="text" className="form-input" value={name} onChange={e=>setName(e.target.value)}/>
-        <span className="form-unit"/>
-      </div>
-      <div className="form-row">
-        <label className="form-label">Beschreibung</label>
-        <input type="text" className="form-input" value={desc} onChange={e=>setDesc(e.target.value)}/>
-        <span className="form-unit"/>
-      </div>
-      <div style={{marginBottom:8}}>
-        <div style={{fontSize:12,fontWeight:600,color:'var(--text3)',marginBottom:6}}>
-          Variablen (antippen zum Einfügen):
-        </div>
-        <div style={{display:'flex',flexWrap:'wrap',gap:4}}>
-          {VARS.map(v=>(
-            <button key={v} onClick={()=>setTemplate(t=>t+v)}
-              style={{fontSize:10,padding:'2px 7px',borderRadius:4,border:'1px solid var(--border2)',
-                background:'var(--surface2)',cursor:'pointer',fontFamily:'monospace',color:'var(--accent)'}}>
-              {v}
-            </button>
-          ))}
-        </div>
-      </div>
-      <textarea value={template} onChange={e=>setTemplate(e.target.value)}
-        style={{width:'100%',minHeight:280,padding:10,fontFamily:'monospace',fontSize:12,
-          background:'var(--surface2)',border:'1.5px solid var(--border2)',borderRadius:8,
-          color:'var(--text1)',resize:'vertical',lineHeight:1.5,boxSizing:'border-box'}}/>
-      <div style={{display:'flex',gap:8,marginTop:8}}>
-        <button className="btn btn-primary" style={{flex:1}}
-          onClick={()=>onSave({name,description:desc,template})}>
-          <Check size={14}/> Speichern
-        </button>
-        <button className="btn btn-secondary" style={{flex:1}} onClick={onCancel}>Abbrechen</button>
-      </div>
-    </div>
-  )
-}
 
 export default function Analysis() {
-  const { canUseAI, isAdmin } = useAuth()
+  const { canUseAI } = useAuth()
   const [prompts,     setPrompts]     = useState([])
   const [allInsights, setAllInsights] = useState([])
   const [loading,     setLoading]     = useState(null)
   const [error,       setError]       = useState(null)
-  const [editing,     setEditing]     = useState(null)
   const [tab,         setTab]         = useState('run')
   const [newResult,   setNewResult]   = useState(null)
-  const [pipelineLoading, setPipelineLoading] = useState(false)
+  const [aiUsage, setAiUsage] = useState(null)
-  const [aiUsage, setAiUsage] = useState(null)  // Phase 3: Usage badge
 
   const loadAll = async () => {
     const [p, i] = await Promise.all([
@@ -144,40 +72,18 @@ export default function Analysis() {
     }).catch(err => console.error('Failed to load usage:', err))
   },[])
 
-  const runPipeline = async () => {
-    setPipelineLoading(true); setError(null); setNewResult(null)
-    try {
-      const result = await api.insightPipeline()
-      setNewResult(result)
-      await loadAll()
-      setTab('run')
-    } catch(e) {
-      setError('Pipeline-Fehler: ' + e.message)
-    } finally { setPipelineLoading(false) }
-  }
-
   const runPrompt = async (slug) => {
     setLoading(slug); setError(null); setNewResult(null)
     try {
       const result = await api.runInsight(slug)
-      setNewResult(result)   // show immediately
+      setNewResult(result)
-      await loadAll()        // refresh lists
+      await loadAll()
-      setTab('run')          // stay on run tab to see result
+      setTab('run')
     } catch(e) {
       setError('Fehler: ' + e.message)
     } finally { setLoading(null) }
   }
 
-  const savePrompt = async (promptId, data) => {
-    const token = localStorage.getItem('bodytrack_token')||''
-    await fetch(`/api/prompts/${promptId}`, {
-      method:'PUT',
-      headers:{'Content-Type':'application/json', 'X-Auth-Token': token},
-      body:JSON.stringify(data)
-    })
-    setEditing(null); await loadAll()
-  }
-
   const deleteInsight = async (id) => {
     if (!confirm('Analyse löschen?')) return
     const pid = localStorage.getItem('bodytrack_active_profile')||''
@@ -196,11 +102,8 @@ export default function Analysis() {
     grouped[key].push(ins)
   })
 
-  const activePrompts = prompts.filter(p=>p.active && !p.slug.startsWith('pipeline_') && p.slug !== 'pipeline')
+  // Show only active pipeline-type prompts
-
+  const pipelinePrompts = prompts.filter(p => p.active && p.type === 'pipeline')
-  // Pipeline is available if the "pipeline" prompt is active
-  const pipelinePrompt = prompts.find(p=>p.slug==='pipeline')
-  const pipelineAvailable = pipelinePrompt?.active ?? true  // Default to true if not found (backwards compatibility)
 
   return (
     <div>
@@ -213,7 +116,6 @@ export default function Analysis() {
           {allInsights.length>0 && <span style={{marginLeft:4,fontSize:10,background:'var(--accent)',
             color:'white',padding:'1px 5px',borderRadius:8}}>{allInsights.length}</span>}
         </button>
-        {isAdmin && <button className={'tab'+(tab==='prompts'?' active':'')} onClick={()=>setTab('prompts')}>Prompts</button>}
       </div>
 
       {error && (
@@ -245,52 +147,6 @@ export default function Analysis() {
             </div>
           )}
 
-          {/* Pipeline button - only if all sub-prompts are active */}
-          {pipelineAvailable && (
-            <div className="card" style={{marginBottom:16,borderColor:'var(--accent)',borderWidth:2}}>
-              <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
-                <div style={{flex:1}}>
-                  <div className="badge-container-right" style={{fontWeight:700,fontSize:15,color:'var(--accent)'}}>
-                    <span>🔬 Mehrstufige Gesamtanalyse</span>
-                    {aiUsage && <UsageBadge {...aiUsage} />}
-                  </div>
-                  <div style={{fontSize:12,color:'var(--text2)',marginTop:3,lineHeight:1.5}}>
-                    3 spezialisierte KI-Calls parallel (Körper + Ernährung + Aktivität),
-                    dann Synthese + Zielabgleich. Detaillierteste Auswertung.
-                  </div>
-                  {allInsights.find(i=>i.scope==='pipeline') && (
-                    <div style={{fontSize:11,color:'var(--text3)',marginTop:3}}>
-                      Letzte Analyse: {dayjs(allInsights.find(i=>i.scope==='pipeline').created).format('DD.MM.YYYY, HH:mm')}
-                    </div>
-                  )}
-                </div>
-                <div
-                  title={aiUsage && !aiUsage.allowed ? `Limit erreicht (${aiUsage.used}/${aiUsage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
-                  style={{display:'inline-block'}}
-                >
-                  <button
-                    className="btn btn-primary"
-                    style={{flexShrink:0,minWidth:100, cursor: (aiUsage && !aiUsage.allowed) ? 'not-allowed' : 'pointer'}}
-                    onClick={runPipeline}
-                    disabled={!!loading||pipelineLoading||(aiUsage && !aiUsage.allowed)}
-                  >
-                    {pipelineLoading
-                      ? <><div className="spinner" style={{width:13,height:13}}/> Läuft…</>
-                      : (aiUsage && !aiUsage.allowed) ? '🔒 Limit'
-                      : <><Brain size={13}/> Starten</>}
-                  </button>
-                </div>
-                {!canUseAI && <div style={{fontSize:11,color:'#D85A30',marginTop:4}}>🔒 KI nicht freigeschaltet</div>}
-              </div>
-              {pipelineLoading && (
-                <div style={{marginTop:10,padding:'8px 12px',background:'var(--accent-light)',
-                  borderRadius:8,fontSize:12,color:'var(--accent-dark)'}}>
-                  ⚡ Stufe 1: 3 parallele Analyse-Calls… dann Synthese… dann Zielabgleich
-                </div>
-              )}
-            </div>
-          )}
-
           {!canUseAI && (
             <div style={{padding:'14px 16px',background:'#FCEBEB',borderRadius:10,
               border:'1px solid #D85A3033',marginBottom:16}}>
@@ -304,25 +160,31 @@ export default function Analysis() {
               </div>
             </div>
           )}
-          {canUseAI && <p style={{fontSize:13,color:'var(--text2)',marginBottom:14,lineHeight:1.6}}>
-            Oder wähle eine Einzelanalyse:
-          </p>}
 
-          {activePrompts.map(p => {
+          {canUseAI && pipelinePrompts.length > 0 && (
-            // Show latest existing insight for this prompt
+            <p style={{fontSize:13,color:'var(--text2)',marginBottom:14,lineHeight:1.6}}>
+              Wähle eine mehrstufige KI-Analyse:
+            </p>
+          )}
+
+          {pipelinePrompts.map(p => {
             const existing = allInsights.find(i=>i.scope===p.slug)
             return (
-              <div key={p.id} className="card section-gap">
+              <div key={p.id} className="card" style={{marginBottom:16,borderColor:'var(--accent)',borderWidth:2}}>
                 <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
                   <div style={{flex:1}}>
-                    <div className="badge-container-right" style={{fontWeight:600,fontSize:15}}>
+                    <div className="badge-container-right" style={{fontWeight:700,fontSize:15,color:'var(--accent)'}}>
                       <span>{p.display_name || SLUG_LABELS[p.slug] || p.name}</span>
                       {aiUsage && <UsageBadge {...aiUsage} />}
                     </div>
-                    {p.description && <div style={{fontSize:12,color:'var(--text3)',marginTop:2}}>{p.description}</div>}
+                    {p.description && (
+                      <div style={{fontSize:12,color:'var(--text2)',marginTop:3,lineHeight:1.5}}>
+                        {p.description}
+                      </div>
+                    )}
                     {existing && (
                       <div style={{fontSize:11,color:'var(--text3)',marginTop:3}}>
-                        Letzte Auswertung: {dayjs(existing.created).format('DD.MM.YYYY, HH:mm')}
+                        Letzte Analyse: {dayjs(existing.created).format('DD.MM.YYYY, HH:mm')}
                       </div>
                     )}
                   </div>
@@ -332,14 +194,14 @@ export default function Analysis() {
                   >
                     <button
                       className="btn btn-primary"
-                      style={{flexShrink:0,minWidth:90, cursor: (aiUsage && !aiUsage.allowed) ? 'not-allowed' : 'pointer'}}
+                      style={{flexShrink:0,minWidth:100, cursor: (aiUsage && !aiUsage.allowed) ? 'not-allowed' : 'pointer'}}
                       onClick={()=>runPrompt(p.slug)}
                       disabled={!!loading||!canUseAI||(aiUsage && !aiUsage.allowed)}
                     >
                       {loading===p.slug
                         ? <><div className="spinner" style={{width:13,height:13}}/> Läuft…</>
                         : (aiUsage && !aiUsage.allowed) ? '🔒 Limit'
-                        : <><Brain size={13}/> {existing?'Neu erstellen':'Starten'}</>}
+                        : <><Brain size={13}/> Starten</>}
                     </button>
                   </div>
                 </div>
@@ -352,8 +214,14 @@ export default function Analysis() {
               </div>
             )
           })}
-          {activePrompts.length===0 && (
+
-            <div className="empty-state"><p>Keine aktiven Prompts. Aktiviere im Tab "Prompts".</p></div>
+          {canUseAI && pipelinePrompts.length === 0 && (
+            <div className="empty-state">
+              <p>Keine aktiven Pipeline-Prompts verfügbar.</p>
+              <p style={{fontSize:12,color:'var(--text3)',marginTop:8}}>
+                Erstelle Pipeline-Prompts im Admin-Bereich (Einstellungen → Admin → KI-Prompts).
+              </p>
+            </div>
           )}
         </div>
       )}
@@ -375,135 +243,6 @@ export default function Analysis() {
           }
         </div>
       )}
-
-      {/* ── Prompts ── */}
-      {tab==='prompts' && (
-        <div>
-          <p style={{fontSize:13,color:'var(--text2)',marginBottom:14,lineHeight:1.6}}>
-            Passe Prompts an. Variablen wie{' '}
-            <code style={{fontSize:11,background:'var(--surface2)',padding:'1px 4px',borderRadius:3}}>{'{{name}}'}</code>{' '}
-            werden automatisch mit deinen Daten befüllt.
-          </p>
-          {editing ? (
-            <PromptEditor prompt={editing}
-              onSave={(data)=>savePrompt(editing.id,data)}
-              onCancel={()=>setEditing(null)}/>
-          ) : (() => {
-            const singlePrompts   = prompts.filter(p=>!p.slug.startsWith('pipeline_'))
-            const pipelinePrompts = prompts.filter(p=>p.slug.startsWith('pipeline_'))
-            const jsonSlugs = ['pipeline_body','pipeline_nutrition','pipeline_activity']
-            return (
-              <>
-                {/* Single prompts */}
-                <div style={{fontSize:12,fontWeight:700,color:'var(--text3)',
-                  textTransform:'uppercase',letterSpacing:'0.05em',marginBottom:8}}>
-                  Einzelanalysen
-                </div>
-                {singlePrompts.map(p=>(
-                  <div key={p.id} className="card section-gap" style={{opacity:p.active?1:0.6}}>
-                    <div style={{display:'flex',alignItems:'center',gap:10}}>
-                      <div style={{flex:1}}>
-                        <div style={{fontWeight:600,fontSize:14,display:'flex',alignItems:'center',gap:8}}>
-                          {p.display_name || SLUG_LABELS[p.slug] || p.name}
-                          {!p.active && <span style={{fontSize:10,color:'#D85A30',
-                            background:'#FCEBEB',padding:'2px 8px',borderRadius:4,fontWeight:600}}>⏸ Deaktiviert</span>}
-                        </div>
-                        {p.description && <div style={{fontSize:12,color:'var(--text3)',marginTop:1}}>{p.description}</div>}
-                      </div>
-                      <button className="btn btn-secondary" style={{padding:'5px 8px',fontSize:12}}
-                        onClick={()=>{
-                          const token = localStorage.getItem('bodytrack_token')||''
-                          fetch(`/api/prompts/${p.id}`,{
-                            method:'PUT',
-                            headers:{'Content-Type':'application/json','X-Auth-Token':token},
-                            body:JSON.stringify({active:!p.active})
-                          }).then(loadAll)
-                        }}>
-                        {p.active?'Deaktivieren':'Aktivieren'}
-                      </button>
-                      <button className="btn btn-secondary" style={{padding:'5px 8px'}}
-                        onClick={()=>setEditing(p)}><Pencil size={13}/></button>
-                    </div>
-                    <div style={{marginTop:8,padding:'8px 10px',background:'var(--surface2)',borderRadius:6,
-                      fontSize:11,fontFamily:'monospace',color:'var(--text3)',maxHeight:60,overflow:'hidden',lineHeight:1.4}}>
-                      {p.template.slice(0,200)}…
-                    </div>
-                  </div>
-                ))}
-
-                {/* Pipeline prompts */}
-                <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:'20px 0 8px'}}>
-                  <div style={{fontSize:12,fontWeight:700,color:'var(--text3)',
-                    textTransform:'uppercase',letterSpacing:'0.05em'}}>
-                    Mehrstufige Pipeline
-                  </div>
-                  {(() => {
-                    const pipelinePrompt = prompts.find(p=>p.slug==='pipeline')
-                    return pipelinePrompt && (
-                      <button className="btn btn-secondary" style={{padding:'5px 12px',fontSize:12}}
-                        onClick={()=>{
-                          const token = localStorage.getItem('bodytrack_token')||''
-                          fetch(`/api/prompts/${pipelinePrompt.id}`,{
-                            method:'PUT',
-                            headers:{'Content-Type':'application/json','X-Auth-Token':token},
-                            body:JSON.stringify({active:!pipelinePrompt.active})
-                          }).then(loadAll)
-                        }}>
-                        {pipelinePrompt.active ? 'Gesamte Pipeline deaktivieren' : 'Gesamte Pipeline aktivieren'}
-                      </button>
-                    )
-                  })()}
-                </div>
-                {(() => {
-                  const pipelinePrompt = prompts.find(p=>p.slug==='pipeline')
-                  const isPipelineActive = pipelinePrompt?.active ?? true
-                  return (
-                    <div style={{padding:'10px 12px',
-                      background: isPipelineActive ? 'var(--warn-bg)' : '#FCEBEB',
-                      borderRadius:8,fontSize:12,
-                      color: isPipelineActive ? 'var(--warn-text)' : '#D85A30',
-                      marginBottom:12,lineHeight:1.6}}>
-                      {isPipelineActive ? (
-                        <>⚠️ <strong>Hinweis:</strong> Pipeline-Stage-1-Prompts müssen valides JSON zurückgeben.
-                        Halte das JSON-Format im Prompt erhalten. Stage 2 + 3 können frei angepasst werden.</>
-                      ) : (
-                        <>⏸ <strong>Pipeline deaktiviert:</strong> Die mehrstufige Gesamtanalyse ist aktuell nicht verfügbar.
-                        Aktiviere sie mit dem Schalter oben, um sie auf der Analyse-Seite zu nutzen.</>
-                      )}
-                    </div>
-                  )
-                })()}
-                {pipelinePrompts.map(p=>{
-                  const isJson = jsonSlugs.includes(p.slug)
-                  return (
-                    <div key={p.id} className="card section-gap"
-                      style={{borderLeft:`3px solid ${isJson?'var(--warn)':'var(--accent)'}`,opacity:p.active?1:0.6}}>
-                      <div style={{display:'flex',alignItems:'center',gap:10}}>
-                        <div style={{flex:1}}>
-                          <div style={{fontWeight:600,fontSize:14,display:'flex',alignItems:'center',gap:8}}>
-                            {p.name}
-                            {isJson && <span style={{fontSize:10,background:'var(--warn-bg)',
-                              color:'var(--warn-text)',padding:'1px 6px',borderRadius:4}}>JSON-Output</span>}
-                            {!p.active && <span style={{fontSize:10,color:'#D85A30',
-                              background:'#FCEBEB',padding:'2px 8px',borderRadius:4,fontWeight:600}}>⏸ Deaktiviert</span>}
-                          </div>
-                          {p.description && <div style={{fontSize:12,color:'var(--text3)',marginTop:1}}>{p.description}</div>}
-                        </div>
-                        <button className="btn btn-secondary" style={{padding:'5px 8px'}}
-                          onClick={()=>setEditing(p)}><Pencil size={13}/></button>
-                      </div>
-                      <div style={{marginTop:8,padding:'8px 10px',background:'var(--surface2)',borderRadius:6,
-                        fontSize:11,fontFamily:'monospace',color:'var(--text3)',maxHeight:80,overflow:'hidden',lineHeight:1.4}}>
-                        {p.template.slice(0,300)}…
-                      </div>
-                    </div>
-                  )
-                })}
-              </>
-            )
-          })()}
-        </div>
-      )}
     </div>
   )
 }