feat: Günther-Agent (Netzer-Style) + Expertenblick im TipModal

- AgentChat-Widget mit SSE-Streaming, Quick-Actions, Multiple-Choice
- /api/agent/chat + /api/agent/insight Routen
- Expertenblick-Panel im TipModal (lazy load)
- Günther-Icon

frontend/src/components/TipModal.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
+import { Sparkles, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
 import { Match, api } from '../api/client';
 import styles from './TipModal.module.css';
 
@@ -16,6 +17,53 @@ function getTendency(home: number, away: number): Tendency {
   return 'draw';
 }
 
+// Streaming-Fetch für /api/agent/insight
+async function fetchInsight(
+  homeTeam: string,
+  awayTeam: string,
+  stage: string,
+  group: string | null,
+  onChunk: (text: string) => void,
+  onDone: () => void,
+  onError: () => void
+) {
+  try {
+    const res = await fetch('/api/agent/insight', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ homeTeam, awayTeam, stage, group }),
+    });
+    if (!res.ok) { onError(); return; }
+
+    const reader = res.body?.getReader();
+    if (!reader) { onError(); return; }
+
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() ?? '';
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        const payload = line.slice(6).trim();
+        if (payload === '[DONE]') { onDone(); return; }
+        try {
+          const parsed = JSON.parse(payload);
+          if (parsed.text) onChunk(parsed.text);
+          if (parsed.error) { onError(); return; }
+        } catch { /* ignore */ }
+      }
+    }
+    onDone();
+  } catch {
+    onError();
+  }
+}
+
 export default function TipModal({ match, onClose, onSaved }: Props) {
   const existing = match.userTip;
   const [home, setHome] = useState(existing?.home ?? 0);
@@ -23,6 +71,34 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Expertenblick State
+  const [insightOpen, setInsightOpen] = useState(false);
+  const [insightText, setInsightText] = useState('');
+  const [insightLoading, setInsightLoading] = useState(false);
+  const [insightError, setInsightError] = useState(false);
+  const insightFetched = useRef(false);
+
+  function handleToggleInsight() {
+    const opening = !insightOpen;
+    setInsightOpen(opening);
+    // Nur einmal laden
+    if (opening && !insightFetched.current) {
+      insightFetched.current = true;
+      setInsightLoading(true);
+      setInsightText('');
+      setInsightError(false);
+      fetchInsight(
+        match.homeTeam.name,
+        match.awayTeam.name,
+        match.stage,
+        match.group,
+        (chunk) => setInsightText((t) => t + chunk),
+        () => setInsightLoading(false),
+        () => { setInsightLoading(false); setInsightError(true); }
+      );
+    }
+  }
+
   const tendency = getTendency(home, away);
   const tendencyLabel =
     tendency === 'home' ? match.homeTeam.shortName || match.homeTeam.name :
@@ -71,7 +147,6 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
               }
             </div>
             <span className={styles.teamName}>{match.homeTeam.name}</span>
-            <span className={styles.teamShort}>{match.homeTeam.shortName}</span>
           </div>
 
           <div className={styles.vsBlock}>
@@ -98,7 +173,6 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
               }
             </div>
             <span className={styles.teamName}>{match.awayTeam.name}</span>
-            <span className={styles.teamShort}>{match.awayTeam.shortName}</span>
           </div>
         </div>
 
@@ -122,6 +196,56 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
           </span>
         </div>
 
+        {/* Expertenblick */}
+        <div className={styles.insightWrapper}>
+          <button className={styles.insightToggle} onClick={handleToggleInsight}>
+            <Sparkles size={14} className={styles.insightIcon} />
+            <span>Expertenblick</span>
+            {insightOpen
+              ? <ChevronUp size={14} className={styles.insightChevron} />
+              : <ChevronDown size={14} className={styles.insightChevron} />
+            }
+          </button>
+
+          {insightOpen && (
+            <div className={styles.insightPanel}>
+              {insightLoading && insightText === '' ? (
+                <div className={styles.insightLoading}>
+                  <Loader2 size={15} className={styles.insightSpinner} />
+                  <span>Analyse läuft…</span>
+                </div>
+              ) : insightError ? (
+                <div className={styles.insightErrorMsg}>
+                  Einschätzung gerade nicht verfügbar.
+                </div>
+              ) : (
+                <div className={styles.insightText}>
+                  {insightText.split('\n').filter(l => l.trim()).map((line, i) => {
+                    // **Label:** Value aufsplitten
+                    const match = line.match(/^\*\*(.+?):\*\*\s*(.*)$/);
+                    if (match) {
+                      // Inline **fett** im Value-Teil rendern
+                      const valueParts = match[2].split(/(\*\*.+?\*\*)/g).map((part, j) =>
+                        part.startsWith('**') && part.endsWith('**')
+                          ? <strong key={j}>{part.slice(2, -2)}</strong>
+                          : part
+                      );
+                      return (
+                        <div key={i} className={styles.insightLine}>
+                          <span className={styles.insightLabel}>{match[1]}</span>
+                          <span className={styles.insightValue}>{valueParts}</span>
+                        </div>
+                      );
+                    }
+                    return <div key={i} className={styles.insightLine}>{line}</div>;
+                  })}
+                  {insightLoading && <span className={styles.insightCursor} />}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
         {error && <div className={styles.error}>{error}</div>}
 
         {/* CTA */}