feat: Website-Scan tab in agent UI — service table, SOLL/IST, corrections

- Tab system: Schnellanalyse (single page) + Website-Scan (multi-page)
- ScanResult component: service comparison table, severity-colored findings
- Expandable correction suggestions with copy button (pre-launch mode)
- API proxy route for /agent/scan endpoint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/api/sdk/v1/agent/scan/route.ts

@@ -0,0 +1,38 @@
+/**
+ * Agent Scan API Proxy
+ * POST /api/sdk/v1/agent/scan → backend-compliance /api/compliance/agent/scan
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_API_URL || 'http://backend-compliance:8002'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.text()
+
+    const response = await fetch(`${BACKEND_URL}/api/compliance/agent/scan`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body,
+      signal: AbortSignal.timeout(180000), // 3 min — multi-page scan + LLM
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: `Backend: ${response.status}`, detail: errorText },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Agent scan proxy error:', error)
+    return NextResponse.json(
+      { error: 'Scan fehlgeschlagen oder Timeout' },
+      { status: 503 }
+    )
+  }
+}

admin-compliance/app/sdk/agent/_components/ScanResult.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface ServiceInfo {
+  name: string
+  category: string
+  provider: string
+  country: string
+  eu_adequate: boolean
+  requires_consent: boolean
+  legal_ref: string
+  in_dse: boolean
+  status: string
+}
+
+interface ScanFinding {
+  code: string
+  severity: string
+  text: string
+  correction: string
+}
+
+interface ScanData {
+  pages_scanned: number
+  services: ServiceInfo[]
+  findings: ScanFinding[]
+  ai_detected: boolean
+  chatbot_detected: boolean
+  chatbot_provider: string
+  missing_pages: Record<string, number>
+  email_status: string
+}
+
+const STATUS_ICON: Record<string, { icon: string; color: string }> = {
+  ok: { icon: '✓', color: 'text-green-600' },
+  undocumented: { icon: '✗', color: 'text-red-600' },
+  outdated: { icon: '~', color: 'text-yellow-600' },
+}
+
+const SEV_STYLE: Record<string, { bg: string; text: string }> = {
+  HIGH: { bg: 'bg-red-50 border-red-200', text: 'text-red-800' },
+  MEDIUM: { bg: 'bg-yellow-50 border-yellow-200', text: 'text-yellow-800' },
+  LOW: { bg: 'bg-blue-50 border-blue-200', text: 'text-blue-800' },
+}
+
+export function ScanResult({ data }: { data: ScanData }) {
+  const [expandedCorrection, setExpandedCorrection] = useState<string | null>(null)
+
+  const undocCount = data.services.filter(s => s.status === 'undocumented').length
+  const okCount = data.services.filter(s => s.status === 'ok').length
+  const outdatedCount = data.services.filter(s => s.status === 'outdated').length
+  const highCount = data.findings.filter(f => f.severity === 'HIGH').length
+
+  return (
+    <div className="space-y-5">
+      {/* Summary Bar */}
+      <div className="grid grid-cols-4 gap-3">
+        <div className="bg-gray-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-gray-900">{data.pages_scanned}</p>
+          <p className="text-xs text-gray-500">Seiten gescannt</p>
+        </div>
+        <div className="bg-green-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-green-700">{okCount}</p>
+          <p className="text-xs text-gray-500">Dokumentiert</p>
+        </div>
+        <div className="bg-red-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-red-700">{undocCount}</p>
+          <p className="text-xs text-gray-500">Nicht in DSE</p>
+        </div>
+        <div className="bg-yellow-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-yellow-700">{outdatedCount}</p>
+          <p className="text-xs text-gray-500">Veraltet</p>
+        </div>
+      </div>
+
+      {/* AI / Chatbot Detection */}
+      <div className="flex gap-3">
+        <span className={`px-3 py-1 rounded-full text-xs font-medium ${data.ai_detected ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-600'}`}>
+          {data.ai_detected ? 'KI erkannt' : 'Keine KI erkannt'}
+        </span>
+        <span className={`px-3 py-1 rounded-full text-xs font-medium ${data.chatbot_detected ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-600'}`}>
+          {data.chatbot_detected ? `Chatbot: ${data.chatbot_provider}` : 'Kein Chatbot'}
+        </span>
+      </div>
+
+      {/* Services Table */}
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Dienstleister-Abgleich (SOLL/IST)</h4>
+        <div className="border rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Status</th>
+                <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Dienst</th>
+                <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Land</th>
+                <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">EU</th>
+                <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">In DSE</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {data.services.map((s, i) => {
+                const st = STATUS_ICON[s.status] || STATUS_ICON.ok
+                return (
+                  <tr key={i} className={s.status === 'undocumented' ? 'bg-red-50' : ''}>
+                    <td className={`px-3 py-2 font-bold ${st.color}`}>{st.icon}</td>
+                    <td className="px-3 py-2">
+                      <span className="font-medium text-gray-900">{s.name}</span>
+                      <span className="text-gray-400 text-xs ml-2">{s.category}</span>
+                    </td>
+                    <td className="px-3 py-2 text-gray-600">{s.country}</td>
+                    <td className="px-3 py-2">{s.eu_adequate ? '✓' : '✗'}</td>
+                    <td className="px-3 py-2">{s.in_dse ? 'Ja' : <span className="text-red-600 font-medium">Nein</span>}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Findings */}
+      {data.findings.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">
+            Findings ({data.findings.length}, davon {highCount} kritisch)
+          </h4>
+          <div className="space-y-2">
+            {data.findings.map((f, i) => {
+              const sev = SEV_STYLE[f.severity] || SEV_STYLE.MEDIUM
+              const isExpanded = expandedCorrection === f.code
+              return (
+                <div key={i} className={`border rounded-lg p-3 ${sev.bg}`}>
+                  <div className="flex items-start gap-2">
+                    <span className={`text-xs font-bold px-2 py-0.5 rounded ${sev.text} bg-white`}>
+                      {f.severity}
+                    </span>
+                    <p className="text-sm text-gray-800 flex-1">{f.text}</p>
+                  </div>
+                  {f.correction && (
+                    <div className="mt-2">
+                      <button
+                        onClick={() => setExpandedCorrection(isExpanded ? null : f.code)}
+                        className="text-xs text-purple-600 hover:text-purple-800 font-medium"
+                      >
+                        {isExpanded ? '▼ Korrekturvorschlag ausblenden' : '▶ Korrekturvorschlag anzeigen'}
+                      </button>
+                      {isExpanded && (
+                        <div className="mt-2 bg-white border border-gray-200 rounded-lg p-3 relative">
+                          <pre className="text-xs text-gray-700 whitespace-pre-wrap font-sans">{f.correction}</pre>
+                          <button
+                            onClick={() => navigator.clipboard.writeText(f.correction)}
+                            className="absolute top-2 right-2 text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded"
+                            title="Kopieren"
+                          >
+                            Kopieren
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/agent/page.tsx

@@ -5,135 +5,141 @@ import { useAgentAnalysis } from './_hooks/useAgentAnalysis'
 import { AnalysisResult } from './_components/AnalysisResult'
 import { AnalysisHistory } from './_components/AnalysisHistory'
 import { FollowUpQuestions } from './_components/FollowUpQuestions'
+import { ScanResult } from './_components/ScanResult'
 
 type AnalysisMode = 'pre_launch' | 'post_launch'
+type AnalysisTab = 'quick' | 'scan'
 
 const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] = [
-  {
-    id: 'pre_launch',
-    label: 'Internes Dokument pruefen',
-    desc: 'Dokument oder Website VOR Veroeffentlichung pruefen',
-    icon: '📋',
-  },
-  {
-    id: 'post_launch',
-    label: 'Live-Website pruefen',
-    desc: 'Bereits veroeffentlichte Website oder Dokument analysieren',
-    icon: '🌐',
-  },
+  { id: 'pre_launch', label: 'Internes Dokument', desc: 'Vor Veroeffentlichung pruefen', icon: '📋' },
+  { id: 'post_launch', label: 'Live-Website', desc: 'Bereits online analysieren', icon: '🌐' },
+]
+
+const TABS: { id: AnalysisTab; label: string; desc: string }[] = [
+  { id: 'quick', label: 'Schnellanalyse', desc: 'Einzelne Seite klassifizieren + bewerten' },
+  { id: 'scan', label: 'Website-Scan', desc: 'Mehrere Seiten scannen + Dienstleister abgleichen' },
 ]
 
 export default function AgentPage() {
   const [url, setUrl] = useState('')
   const [mode, setMode] = useState<AnalysisMode>('post_launch')
+  const [tab, setTab] = useState<AnalysisTab>('quick')
+  const [scanLoading, setScanLoading] = useState(false)
+  const [scanError, setScanError] = useState<string | null>(null)
+  const [scanData, setScanData] = useState<any>(null)
   const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!url.trim()) return
-    analyze(url.trim(), mode)
+
+    if (tab === 'quick') {
+      analyze(url.trim(), mode)
+    } else {
+      setScanLoading(true)
+      setScanError(null)
+      setScanData(null)
+      try {
+        const res = await fetch('/api/sdk/v1/agent/scan', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: url.trim(), mode }),
+        })
+        if (!res.ok) throw new Error(`Scan fehlgeschlagen: ${res.status}`)
+        setScanData(await res.json())
+      } catch (e) {
+        setScanError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      } finally {
+        setScanLoading(false)
+      }
+    }
   }
 
+  const isLoading = tab === 'quick' ? loading : scanLoading
+  const currentError = tab === 'quick' ? error : scanError
+
   return (
     <div className="space-y-6 max-w-4xl">
-      {/* Header */}
       <div>
         <h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
-        <p className="text-gray-500 mt-1">
-          Analysiere Dokumente und Webseiten auf DSGVO-Konformitaet.
-        </p>
+        <p className="text-gray-500 mt-1">Analysiere Dokumente und Webseiten auf DSGVO-Konformitaet.</p>
       </div>
 
       {/* Mode Selection */}
       <div className="grid grid-cols-2 gap-3">
         {MODES.map(m => (
-          <button
-            key={m.id}
-            onClick={() => setMode(m.id)}
-            className={`p-4 rounded-xl border-2 text-left transition-all ${
-              mode === m.id
-                ? 'border-purple-500 bg-purple-50 shadow-sm'
-                : 'border-gray-200 bg-white hover:border-gray-300'
-            }`}
-          >
+          <button key={m.id} onClick={() => setMode(m.id)}
+            className={`p-3 rounded-xl border-2 text-left transition-all ${
+              mode === m.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-gray-300'}`}>
             <div className="flex items-center gap-3">
-              <span className="text-2xl">{m.icon}</span>
+              <span className="text-xl">{m.icon}</span>
               <div>
-                <p className={`text-sm font-semibold ${mode === m.id ? 'text-purple-900' : 'text-gray-900'}`}>
-                  {m.label}
-                </p>
-                <p className="text-xs text-gray-500 mt-0.5">{m.desc}</p>
+                <p className={`text-sm font-semibold ${mode === m.id ? 'text-purple-900' : 'text-gray-900'}`}>{m.label}</p>
+                <p className="text-xs text-gray-500">{m.desc}</p>
               </div>
             </div>
           </button>
         ))}
       </div>
 
+      {/* Tab Selection */}
+      <div className="flex border-b border-gray-200">
+        {TABS.map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)}
+            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
+              tab === t.id
+                ? 'border-purple-500 text-purple-700'
+                : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+            {t.label}
+          </button>
+        ))}
+      </div>
+
       {/* URL Input */}
       <form onSubmit={handleSubmit} className="flex gap-3">
-        <input
-          type="url"
-          value={url}
-          onChange={e => setUrl(e.target.value)}
-          placeholder={mode === 'pre_launch'
-            ? 'https://staging.example.com/datenschutz'
-            : 'https://www.example.com/datenschutz'}
+        <input type="url" value={url} onChange={e => setUrl(e.target.value)}
+          placeholder={tab === 'scan' ? 'https://www.example.com/' : 'https://example.com/datenschutz'}
           className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
-          disabled={loading}
-          required
-        />
-        <button
-          type="submit"
-          disabled={loading || !url.trim()}
-          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2 text-sm font-medium"
-        >
-          {loading ? (
-            <>
-              <svg className="animate-spin w-4 h-4" 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>
-              Analysiere...
-            </>
-          ) : (
-            'Analysieren'
-          )}
+          disabled={isLoading} required />
+        <button type="submit" disabled={isLoading || !url.trim()}
+          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center gap-2 text-sm font-medium">
+          {isLoading ? (
+            <><svg className="animate-spin w-4 h-4" 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>{tab === 'scan' ? 'Scanne...' : 'Analysiere...'}</>
+          ) : tab === 'scan' ? 'Website scannen' : 'Analysieren'}
         </button>
       </form>
 
       {/* Error */}
-      {error && (
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">
-          {error}
-        </div>
+      {currentError && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{currentError}</div>
       )}
 
-      {/* Result */}
-      {result && (
+      {/* Quick Analysis Result */}
+      {tab === 'quick' && result && (
         <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-6">
           <AnalysisResult result={result} />
-
-          {/* Follow-Up Questions */}
           {result.follow_up_questions.length > 0 && (
             <div className="border-t pt-4">
-              <FollowUpQuestions
-                questions={result.follow_up_questions}
-                answers={result.follow_up_answers}
-                onAnswer={answerFollowUp}
-              />
+              <FollowUpQuestions questions={result.follow_up_questions} answers={result.follow_up_answers} onAnswer={answerFollowUp} />
             </div>
           )}
         </div>
       )}
 
-      {/* History */}
-      <AnalysisHistory
-        history={history}
-        onSelect={r => {
-          setUrl(r.url)
-          analyze(r.url, mode)
-        }}
-      />
+      {/* Scan Result */}
+      {tab === 'scan' && scanData && (
+        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
+          <ScanResult data={scanData} />
+        </div>
+      )}
+
+      {/* History (quick only) */}
+      {tab === 'quick' && (
+        <AnalysisHistory history={history} onSelect={r => { setUrl(r.url); analyze(r.url, mode) }} />
+      )}
     </div>
   )
 }