feat(advisor): Evidence Workspace — structured panes, markdown, sources as knowledge units

Rebuilds the Compliance Advisor floating widget from a plain chat into an Evidence
Workspace: pinned last question, markdown-rendered answer (clean prose), and separate
panes for Sources (hierarchical Knowledge Units), Figures (C8, conditional) and
Footnotes (C-FN), plus a stats bar (Quellen/Regelwerke/Diagramme/Fußnoten). Scrollable
turn history; stays a floating icon on every SDK page.

Architecture (user direction): the frontend renders ONLY structured evidence and NEVER
parses the answer text. The proxy now returns a JSON AdvisorEvidenceMeta line followed
by the streamed markdown answer; advisor-rag exposes structured results; an adapter maps
RAG/compiler output to the frontend envelope. Figures/footnotes wire in once the
RAG-ingestion contract lands (requested on the board) — figures pane is conditional.

- lib/sdk/advisor/{evidence,evidence-adapter}.ts (+ adapter test, 7 cases)
- components/sdk/advisor/* panes + in-house safe Markdown (no new dep, no dangerouslySetInnerHTML) + test
- useAdvisorStream (meta-line parse + streamed answer) + useAdvisorEmail (escaped)
- proxy: evidence-meta-v1 envelope + clean-prose prompt (no inline citations)
- tsc clean, 11 vitest pass, check-loc 0. ESLint not installed in this node_modules -> CI lints on push.

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

admin-compliance/components/sdk/ComplianceAdvisorWidget.tsx

@@ -1,198 +1,47 @@
 'use client'
 
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { EXAMPLE_QUESTIONS, AdvisorEmptyState, AdvisorMessageList, type Message } from './ComplianceAdvisorParts'
-
-// =============================================================================
-// TYPES
-// =============================================================================
+import { useCallback, useState } from 'react'
+import { Check, Loader2, Mail, Maximize2, MessagesSquare, Minimize2, Send, Square, X } from 'lucide-react'
+import { EXAMPLE_QUESTIONS } from './advisor/EmptyState'
+import { EvidenceWorkspace } from './advisor/EvidenceWorkspace'
+import { useAdvisorStream } from './advisor/useAdvisorStream'
+import { useAdvisorEmail } from './advisor/useAdvisorEmail'
 
 interface ComplianceAdvisorWidgetProps {
   currentStep?: string
 }
 
 type Country = 'DE' | 'AT' | 'CH' | 'EU'
+const COUNTRIES: Country[] = ['DE', 'AT', 'CH', 'EU']
 
-const COUNTRIES: { code: Country; label: string }[] = [
-  { code: 'DE', label: 'DE' },
-  { code: 'AT', label: 'AT' },
-  { code: 'CH', label: 'CH' },
-  { code: 'EU', label: 'EU' },
-]
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
+/**
+ * Compliance Advisor — Evidence Workspace as a floating widget on every SDK page.
+ * Renders ONLY structured evidence from the SDK (answer + sources + figures + footnotes);
+ * it never parses the answer text. See memory: advisor-evidence-workspace-no-parse.
+ */
 export function ComplianceAdvisorWidget({ currentStep = 'default' }: ComplianceAdvisorWidgetProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [isExpanded, setIsExpanded] = useState(false)
-  const [messages, setMessages] = useState<Message[]>([])
   const [inputValue, setInputValue] = useState('')
-  const [isTyping, setIsTyping] = useState(false)
-  const [selectedCountry, setSelectedCountry] = useState<Country>('DE')
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const abortControllerRef = useRef<AbortController | null>(null)
+  const [country, setCountry] = useState<Country>('DE')
 
+  const { turns, isStreaming, send, stop } = useAdvisorStream({ currentStep, country })
+  const email = useAdvisorEmail(turns, country, currentStep)
   const exampleQuestions = EXAMPLE_QUESTIONS[currentStep] || EXAMPLE_QUESTIONS.default
 
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
-
-  useEffect(() => {
-    return () => {
-      abortControllerRef.current?.abort()
-    }
-  }, [])
-
-  const handleSendMessage = useCallback(
-    async (content: string) => {
-      if (!content.trim() || isTyping) return
-
-      const userMessage: Message = {
-        id: `msg-${Date.now()}`,
-        role: 'user',
-        content: content.trim(),
-        timestamp: new Date(),
-      }
-
-      setMessages((prev) => [...prev, userMessage])
+  const submit = useCallback(
+    (q: string) => {
+      if (!q.trim() || isStreaming) return
       setInputValue('')
-      setIsTyping(true)
-
-      const agentMessageId = `msg-${Date.now()}-agent`
-      abortControllerRef.current = new AbortController()
-
-      try {
-        const history = messages.map((m) => ({
-          role: m.role === 'user' ? 'user' : 'assistant',
-          content: m.content,
-        }))
-
-        const response = await fetch('/api/sdk/compliance-advisor/chat', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            message: content.trim(),
-            history,
-            currentStep,
-            country: selectedCountry,
-          }),
-          signal: abortControllerRef.current.signal,
-        })
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({ error: 'Unbekannter Fehler' }))
-          throw new Error(errorData.error || `Server-Fehler (${response.status})`)
-        }
-
-        setMessages((prev) => [
-          ...prev,
-          { id: agentMessageId, role: 'agent', content: '', timestamp: new Date() },
-        ])
-
-        const reader = response.body!.getReader()
-        const decoder = new TextDecoder()
-        let accumulated = ''
-
-        while (true) {
-          const { done, value } = await reader.read()
-          if (done) break
-
-          accumulated += decoder.decode(value, { stream: true })
-          const currentText = accumulated
-          setMessages((prev) =>
-            prev.map((m) => (m.id === agentMessageId ? { ...m, content: currentText } : m))
-          )
-          requestAnimationFrame(() => {
-            messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-          })
-        }
-
-        setIsTyping(false)
-      } catch (error) {
-        if ((error as Error).name === 'AbortError') {
-          setIsTyping(false)
-          return
-        }
-
-        const errorMessage = error instanceof Error ? error.message : 'Verbindung fehlgeschlagen'
-        setMessages((prev) => {
-          const hasAgent = prev.some((m) => m.id === agentMessageId)
-          if (hasAgent) {
-            return prev.map((m) =>
-              m.id === agentMessageId ? { ...m, content: `Fehler: ${errorMessage}` } : m
-            )
-          }
-          return [
-            ...prev,
-            { id: agentMessageId, role: 'agent' as const, content: `Fehler: ${errorMessage}`, timestamp: new Date() },
-          ]
-        })
-        setIsTyping(false)
-      }
+      void send(q)
     },
-    [isTyping, messages, currentStep, selectedCountry]
+    [isStreaming, send],
   )
 
-  const handleStopGeneration = useCallback(() => {
-    abortControllerRef.current?.abort()
-    setIsTyping(false)
-  }, [])
-
-  const [emailSending, setEmailSending] = useState(false)
-  const [emailSent, setEmailSent] = useState(false)
-
-  const handleSendAsEmail = useCallback(async () => {
-    if (messages.length === 0 || emailSending) return
-    setEmailSending(true)
-    try {
-      // Build HTML from chat messages
-      const qaPairs = messages.reduce<{ q: string; a: string }[]>((acc, m, i) => {
-        if (m.role === 'user') {
-          const next = messages[i + 1]
-          acc.push({ q: m.content, a: next?.role === 'agent' ? next.content : '(keine Antwort)' })
-        }
-        return acc
-      }, [])
-
-      const qaHtml = qaPairs.map(({ q, a }) =>
-        `<div style="margin-bottom:16px;"><p style="font-weight:600;color:#1e293b;">Frage: ${q}</p><p style="color:#475569;white-space:pre-wrap;">${a}</p></div>`
-      ).join('')
-
-      const bodyHtml = `
-        <h2 style="color:#1e293b;">Compliance Advisor — Beratungsprotokoll</h2>
-        <p style="color:#64748b;font-size:13px;">Datum: ${new Date().toLocaleString('de-DE')} | Land: ${selectedCountry} | Kontext: ${currentStep}</p>
-        <hr style="border-color:#e2e8f0;margin:16px 0;">
-        ${qaHtml}
-        <hr style="border-color:#e2e8f0;margin:16px 0;">
-        <p style="color:#94a3b8;font-size:11px;">Automatisch erstellt vom BreakPilot Compliance Advisor (Qwen)</p>
-      `
-
-      await fetch('/api/sdk/v1/agent/notify', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          recipient: 'dsb@breakpilot.local',
-          subject: `Compliance Advisor — ${qaPairs.length} Fragen (${currentStep})`,
-          body_html: bodyHtml,
-          role: 'Datenschutzbeauftragter',
-        }),
-      })
-      setEmailSent(true)
-      setTimeout(() => setEmailSent(false), 3000)
-    } catch (e) {
-      console.error('Email send failed:', e)
-    } finally {
-      setEmailSending(false)
-    }
-  }, [messages, emailSending, selectedCountry, currentStep])
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const onKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
-      handleSendMessage(inputValue)
+      submit(inputValue)
     }
   }
 
@@ -200,135 +49,108 @@ export function ComplianceAdvisorWidget({ currentStep = 'default' }: ComplianceA
     return (
       <button
         onClick={() => setIsOpen(true)}
-        className="fixed bottom-6 right-[5.5rem] w-14 h-14 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 z-50"
+        className="fixed bottom-6 right-[5.5rem] z-50 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-600 text-white shadow-lg transition-all duration-200 hover:scale-110 hover:bg-indigo-700"
         aria-label="Compliance Advisor oeffnen"
       >
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-        </svg>
+        <MessagesSquare className="h-6 w-6" />
       </button>
     )
   }
 
   return (
-    <div className={`fixed bottom-6 right-6 ${isExpanded ? 'w-[700px] h-[80vh]' : 'w-[400px] h-[500px]'} max-h-screen bg-white rounded-2xl shadow-2xl flex flex-col z-50 border border-gray-200 transition-all duration-200`}>
+    <div
+      className={`fixed bottom-6 right-6 z-50 flex max-h-screen flex-col rounded-2xl border border-gray-200 bg-white shadow-2xl transition-all duration-200 ${
+        isExpanded ? 'h-[85vh] w-[760px]' : 'h-[560px] w-[420px]'
+      }`}
+    >
       {/* Header */}
-      <div className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-3 rounded-t-2xl flex items-center justify-between">
+      <div className="flex items-center justify-between rounded-t-2xl bg-gradient-to-r from-purple-600 to-indigo-600 px-4 py-3 text-white">
         <div className="flex items-center gap-2">
-          <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-            </svg>
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+            <MessagesSquare className="h-5 w-5" />
           </div>
           <div>
-            <div className="font-semibold text-sm">Compliance Advisor</div>
-            <div className="flex items-center gap-1 mt-0.5">
-              {COUNTRIES.map(({ code, label }) => (
+            <div className="text-sm font-semibold">Compliance Advisor</div>
+            <div className="mt-0.5 flex items-center gap-1">
+              {COUNTRIES.map((c) => (
                 <button
-                  key={code}
-                  onClick={() => setSelectedCountry(code)}
-                  className={`px-1.5 py-0.5 text-[10px] font-medium rounded transition-colors ${selectedCountry === code ? 'bg-white text-indigo-700' : 'bg-white/15 text-white/80 hover:bg-white/25'}`}
+                  key={c}
+                  onClick={() => setCountry(c)}
+                  className={`rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                    country === c ? 'bg-white text-indigo-700' : 'bg-white/15 text-white/80 hover:bg-white/25'
+                  }`}
                 >
-                  {label}
+                  {c}
                 </button>
               ))}
             </div>
           </div>
         </div>
         <div className="flex items-center gap-1">
-          {/* Send as Email */}
-          {messages.length > 0 && (
+          {turns.length > 0 && (
             <button
-              onClick={handleSendAsEmail}
-              disabled={emailSending}
-              className={`text-white/80 hover:text-white transition-colors ${emailSent ? 'text-green-300' : ''}`}
+              onClick={email.send}
+              disabled={email.sending}
+              className={`text-white/80 transition-colors hover:text-white ${email.sent ? 'text-green-300' : ''}`}
+              title={email.sent ? 'Email gesendet!' : 'Beratungsprotokoll als Email senden'}
               aria-label="Als Email an DSB senden"
-              title={emailSent ? 'Email gesendet!' : 'Beratungsprotokoll als Email senden'}
             >
-              {emailSent ? (
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-              ) : emailSending ? (
-                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                </svg>
+              {email.sent ? (
+                <Check className="h-5 w-5" />
+              ) : email.sending ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
               ) : (
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </svg>
+                <Mail className="h-5 w-5" />
               )}
             </button>
           )}
           <button
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="text-white/80 hover:text-white transition-colors"
+            onClick={() => setIsExpanded((v) => !v)}
+            className="text-white/80 transition-colors hover:text-white"
             aria-label={isExpanded ? 'Verkleinern' : 'Vergroessern'}
           >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              {isExpanded ? (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9L4 4m0 0v4m0-4h4m6 6l5 5m0 0v-4m0 4h-4" />
-              ) : (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
-              )}
-            </svg>
+            {isExpanded ? <Minimize2 className="h-5 w-5" /> : <Maximize2 className="h-5 w-5" />}
           </button>
-          <button onClick={() => setIsOpen(false)} className="text-white/80 hover:text-white transition-colors" aria-label="Schliessen">
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
+          <button
+            onClick={() => setIsOpen(false)}
+            className="text-white/80 transition-colors hover:text-white"
+            aria-label="Schliessen"
+          >
+            <X className="h-5 w-5" />
           </button>
         </div>
       </div>
 
-      {/* Messages Area */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
-        {messages.length === 0 ? (
-          <AdvisorEmptyState
-            exampleQuestions={exampleQuestions}
-            onExampleClick={(q) => handleSendMessage(q)}
-          />
-        ) : (
-          <AdvisorMessageList
-            messages={messages}
-            isTyping={isTyping}
-            messagesEndRef={messagesEndRef}
-          />
-        )}
-      </div>
+      {/* Evidence Workspace */}
+      <EvidenceWorkspace turns={turns} exampleQuestions={exampleQuestions} onExample={submit} />
 
-      {/* Input Area */}
-      <div className="border-t border-gray-200 p-3 bg-white rounded-b-2xl">
+      {/* Input */}
+      <div className="rounded-b-2xl border-t border-gray-200 bg-white p-3">
         <div className="flex gap-2">
           <input
             type="text"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={handleKeyDown}
+            onKeyDown={onKeyDown}
             placeholder="Frage eingeben..."
-            disabled={isTyping}
-            className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50"
+            disabled={isStreaming}
+            className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50"
           />
-          {isTyping ? (
+          {isStreaming ? (
             <button
-              onClick={handleStopGeneration}
-              className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+              onClick={stop}
+              className="rounded-lg bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
               title="Generierung stoppen"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 6h12v12H6z" />
-              </svg>
+              <Square className="h-5 w-5" />
             </button>
           ) : (
             <button
-              onClick={() => handleSendMessage(inputValue)}
+              onClick={() => submit(inputValue)}
               disabled={!inputValue.trim()}
-              className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="rounded-lg bg-indigo-600 px-4 py-2 text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-              </svg>
+              <Send className="h-5 w-5" />
             </button>
           )}
         </div>