feat(agents): Frontend Methodik-First Layout

User-Vorgabe: pro Slot transparent zeigen WAS wir tun:
  1. Was wurde geprueft (MC-Coverage, collapsible)
  2. Speedometer mit Severity-Verteilung
  3. LLM-Eskalation-Log (wenn benutzt)
  4. Findings sortiert HIGH->LOW, je Card:
     - Methodik-Badge (MC / Regex / KB / LLM / Cross)
     - Gesetzliche Basis (Norm-Block, violett)
     - Befund (Zitat-Block, amber)
     - Empfehlung -> 'Pflicht-Massnahme' bei HIGH,
       'Best-Practice' bei MEDIUM/LOW, 'LLM-Vorschlag'
       bei LLM-Quelle
  5. Maszahmen-Plan (gerollupte Recommendations mit
     related_finding_ids + Aufwand)

Refactor: ein File AgentTestTab.tsx (519 LOC) -> 7 Files:
  _agentTypes.ts (Types + Methodik-Konstanten)
  AgentSpeedometer.tsx
  AgentMcCoverage.tsx
  AgentFindingCard.tsx
  AgentRecommendationCard.tsx
  AgentSlotCard.tsx
  AgentTestTab.tsx (Top-Level, schlank)

Plus Methodik-Info-Erklaerung am Tab-Anfang + Disclaimer.

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

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

@@ -1,66 +1,18 @@
 'use client'
 
+/**
+ * AgentTestTab — Top-Level für den 5-URL-Test eines Specialist-Agents.
+ * Sections:
+ *   1. Agent-Wähler + 5 URL-Slots + Start-Button
+ *   2. Methodik-Erklärung (was wir tun, warum)
+ *   3. Live-Event-Log
+ *   4. Pro Slot: SlotCard (siehe AgentSlotCard.tsx)
+ */
+
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 
-type AgentInfo = {
-  agent_id: string
-  agent_version: string
-  doc_type: string
-  mc_count: number
-}
-
-type Finding = {
-  check_id: string
-  agent: string
-  agent_version: string
-  field_id?: string
-  severity: 'HIGH' | 'MEDIUM' | 'LOW' | 'INFO'
-  title: string
-  norm?: string
-  evidence?: string
-  action?: string
-  confidence?: number
-  sources?: { source_type: string; source_id: string; detail?: string }[]
-}
-
-type Recommendation = {
-  recommendation_id: string
-  title: string
-  body: string
-  severity: string
-  related_finding_ids: string[]
-  estimated_effort_hours: number
-}
-
-type SlotOutput = {
-  agent: string
-  agent_version: string
-  findings: Finding[]
-  recommendations: Recommendation[]
-  mc_total: number
-  mc_ok: number
-  mc_na: number
-  mc_high: number
-  mc_medium: number
-  mc_low: number
-  duration_ms: number
-  confidence: number
-  escalation_log: { stage: string; model: string; success: boolean; duration_ms: number }[]
-}
-
-type RunResult = {
-  run_id: string
-  agent_id: string
-  finished: boolean
-  results: Record<string, SlotOutput>
-  vault_url: string
-}
-
-type StreamEvent = {
-  type: string
-  slot?: string
-  [key: string]: any
-}
+import type { AgentInfo, RunResult, SlotOutput, StreamEvent } from './_agentTypes'
+import { AgentSlotCard } from './AgentSlotCard'
 
 const STORAGE_KEY = 'agent-test-state-v1'
 const MAX_SLOTS = 5
@@ -83,9 +35,11 @@ export function AgentTestTab() {
       if (s) {
         const parsed = JSON.parse(s)
         if (parsed.agentId) setAgentId(parsed.agentId)
-        if (Array.isArray(parsed.urls))
-          setUrls(parsed.urls.slice(0, MAX_SLOTS).concat(
-            new Array(MAX_SLOTS).fill('')).slice(0, MAX_SLOTS))
+        if (Array.isArray(parsed.urls)) {
+          const padded = [...parsed.urls.slice(0, MAX_SLOTS),
+            ...new Array(MAX_SLOTS).fill('')].slice(0, MAX_SLOTS)
+          setUrls(padded)
+        }
       }
     } catch { /* noop */ }
   }, [])
@@ -118,17 +72,11 @@ export function AgentTestTab() {
     if (cleanUrls.length === 0) { setError('Mind. eine URL angeben.'); return }
     setRunning(true)
     try {
-      const r = await fetch(
-        '/api/sdk/v1/specialist-agent/test/start',
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            agent_id: agentId,
-            urls: cleanUrls,
-          }),
-        },
-      )
+      const r = await fetch('/api/sdk/v1/specialist-agent/test/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agent_id: agentId, urls: cleanUrls }),
+      })
       if (!r.ok) {
         const j = await r.json().catch(() => ({}))
         throw new Error(j.error || `HTTP ${r.status}`)
@@ -192,88 +140,29 @@ export function AgentTestTab() {
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border bg-white p-4 space-y-3">
-        <h2 className="text-lg font-semibold">Agent-Test (max. {MAX_SLOTS} URLs)</h2>
-        <p className="text-xs text-gray-500">
-          Wählt einen Spezialisten-Agent und feuert ihn gegen 1-5 URLs gleichzeitig.
-          Pro URL Speedometer + Findings + Empfehlungen mit Quellen-Herkunft (MC / Regex / LLM-Stufe).
-          Keine Aussagen "rechtssicher" oder "garantiert" — alle solchen Wörter werden vor Ausgabe gelöscht.
-        </p>
-        <div className="flex flex-wrap gap-3 items-end">
-          <div>
-            <label className="block text-xs font-medium text-gray-600">Agent</label>
-            <select value={agentId}
-                    onChange={e => setAgentId(e.target.value)}
-                    className="border rounded px-2 py-1 text-sm">
-              {agents.map(a => (
-                <option key={a.agent_id} value={a.agent_id}>
-                  {a.agent_id} v{a.agent_version} ({a.mc_count} MCs)
-                </option>
-              ))}
-            </select>
-          </div>
-          {selectedAgent && (
-            <div className="text-xs text-gray-500">
-              Doc-Type: <code>{selectedAgent.doc_type}</code>
-            </div>
-          )}
-        </div>
-        <div className="space-y-1">
-          {urls.map((u, i) => (
-            <div key={i} className="flex gap-2">
-              <span className="text-xs font-mono text-gray-500 w-8 pt-1.5">URL{i+1}</span>
-              <input value={u}
-                     onChange={e => {
-                       const next = [...urls]; next[i] = e.target.value
-                       setUrls(next)
-                     }}
-                     placeholder="https://example.com/impressum"
-                     className="flex-1 border rounded px-2 py-1 text-sm font-mono"/>
-            </div>
-          ))}
-        </div>
-        <div className="flex gap-2">
-          <button onClick={startTest}
-                  disabled={running}
-                  className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white text-sm px-4 py-2 rounded">
-            {running ? 'Laufend...' : 'Test starten'}
-          </button>
-          {runId && (
-            <span className="text-xs text-gray-500 self-center">
-              Run-ID: <code>{runId}</code>
-            </span>
-          )}
-        </div>
-        {error && (
-          <div className="bg-red-50 border-l-4 border-red-400 p-2 text-sm text-red-700">
-            {error}
-          </div>
-        )}
-      </div>
+      <InputCard
+        agents={agents}
+        agentId={agentId}
+        setAgentId={setAgentId}
+        selectedAgent={selectedAgent}
+        urls={urls}
+        setUrls={setUrls}
+        running={running}
+        runId={runId}
+        startTest={startTest}
+        error={error}
+      />
 
-      {running && events.length > 0 && (
-        <div className="rounded-lg border bg-gray-50 p-3 max-h-48 overflow-y-auto">
-          <div className="text-xs font-mono space-y-1">
-            {events.slice(-30).map((ev, i) => (
-              <div key={i}>
-                <span className="text-gray-400">[{ev.type}]</span>{' '}
-                {ev.slot && <span className="text-blue-600">{ev.slot}</span>}{' '}
-                {ev.severity && (
-                  <span className={severityColor(ev.severity)}>
-                    {ev.severity}
-                  </span>
-                )}{' '}
-                {ev.title || ev.error || ev.label || ev.model || ev.url || ''}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
+      <MethodikInfo />
+
+      {running && events.length > 0 && <EventLog events={events} />}
 
       {slotOutputs.length > 0 && (
         <div className="space-y-3">
           {slotOutputs.map(({ slot, output }) => (
-            <SlotCard key={slot} slot={slot} output={output} runId={runId}/>
+            <AgentSlotCard
+              key={slot} slot={slot} output={output} runId={runId}
+            />
           ))}
         </div>
       )}
@@ -281,174 +170,147 @@ export function AgentTestTab() {
   )
 }
 
-function SlotCard({ slot, output, runId }: {
-  slot: string
-  output: SlotOutput
+function InputCard({
+  agents, agentId, setAgentId, selectedAgent, urls, setUrls,
+  running, runId, startTest, error,
+}: {
+  agents: AgentInfo[]
+  agentId: string
+  setAgentId: (s: string) => void
+  selectedAgent?: AgentInfo
+  urls: string[]
+  setUrls: (urls: string[]) => void
+  running: boolean
   runId: string
+  startTest: () => void
+  error: string
 }) {
-  const [showAll, setShowAll] = useState(false)
-  const visibleFindings = showAll ? output.findings : output.findings.slice(0, 8)
-  const wasSkipped = output.mc_total > 0 &&
-    output.mc_ok === 0 && output.mc_na === 0 &&
-    output.mc_high === 0 && output.mc_medium === 0 && output.mc_low === 0
-  const allGreen = !wasSkipped && output.findings.length === 0
   return (
-    <div className="rounded-lg border bg-white p-4 space-y-3">
-      <div className="flex items-baseline gap-3">
-        <h3 className="font-semibold text-gray-800">Slot: {slot}</h3>
-        <span className="text-xs text-gray-500">
-          {output.duration_ms} ms · confidence {(output.confidence * 100).toFixed(0)}%
-        </span>
-        {wasSkipped && (
-          <span className="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
-            Dokument konnte nicht geladen werden (leer/zu kurz)
-          </span>
+    <div className="rounded-lg border bg-white p-4 space-y-3 shadow-sm">
+      <h2 className="text-lg font-semibold">Agent-Test (max. {MAX_SLOTS} URLs)</h2>
+      <div className="flex flex-wrap gap-3 items-end">
+        <div>
+          <label className="block text-xs font-medium text-gray-600">Agent</label>
+          <select
+            value={agentId}
+            onChange={e => setAgentId(e.target.value)}
+            className="border rounded px-2 py-1 text-sm"
+          >
+            {agents.map(a => (
+              <option key={a.agent_id} value={a.agent_id}>
+                {a.agent_id} v{a.agent_version} ({a.mc_count} MCs)
+              </option>
+            ))}
+          </select>
+        </div>
+        {selectedAgent && (
+          <div className="text-xs text-gray-500">
+            Doc-Type: <code>{selectedAgent.doc_type}</code>
+          </div>
         )}
-        {allGreen && (
-          <span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">
-            Keine Findings — alle anwendbaren MCs OK
-          </span>
-        )}
-        <a className="text-xs text-blue-600 hover:underline ml-auto"
-           href={`/api/sdk/v1/specialist-agent/run/${runId}/artifacts`}
-           target="_blank" rel="noreferrer">
-          Artefakte ↗
-        </a>
       </div>
-      <Speedometer
-        total={output.mc_total}
-        ok={output.mc_ok}
-        na={output.mc_na}
-        high={output.mc_high}
-        medium={output.mc_medium}
-        low={output.mc_low}
-      />
-      {output.escalation_log.length > 0 && (
-        <div className="text-xs text-gray-500">
-          Eskalationen:{' '}
-          {output.escalation_log.map((e, i) => (
-            <span key={i} className="mr-2">
-              {e.stage}/{e.model} {e.success ? '✓' : '✗'} ({e.duration_ms} ms)
+      <div className="space-y-1">
+        {urls.map((u, i) => (
+          <div key={i} className="flex gap-2">
+            <span className="text-xs font-mono text-gray-500 w-8 pt-1.5">
+              URL{i + 1}
             </span>
-          ))}
-        </div>
-      )}
-      {output.findings.length > 0 && (
-        <div className="space-y-1">
-          <div className="text-xs font-semibold uppercase text-gray-600">
-            Findings ({output.findings.length})
+            <input
+              value={u}
+              onChange={e => {
+                const next = [...urls]; next[i] = e.target.value
+                setUrls(next)
+              }}
+              placeholder="https://example.com/impressum"
+              className="flex-1 border rounded px-2 py-1 text-sm font-mono"
+            />
           </div>
-          {visibleFindings.map(f => (
-            <FindingRow key={f.check_id} f={f}/>
-          ))}
-          {output.findings.length > 8 && (
-            <button onClick={() => setShowAll(x => !x)}
-                    className="text-xs text-blue-600 hover:underline">
-              {showAll ? 'Weniger anzeigen' : `Alle ${output.findings.length} anzeigen`}
-            </button>
-          )}
-        </div>
-      )}
-      {output.recommendations.length > 0 && (
-        <div className="space-y-1">
-          <div className="text-xs font-semibold uppercase text-gray-600">
-            Empfehlungen ({output.recommendations.length}, gerollupt)
-          </div>
-          {output.recommendations.map(r => (
-            <div key={r.recommendation_id}
-                 className="border-l-2 border-emerald-400 bg-emerald-50 p-2 text-xs">
-              <div className="font-semibold">{r.title}</div>
-              <div className="text-gray-600">{r.body}</div>
-              <div className="text-[10px] text-gray-500 mt-1">
-                {r.related_finding_ids.length} Finding(s) · ~{r.estimated_effort_hours}h
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function Speedometer({ total, ok, na, high, medium, low }: {
-  total: number
-  ok: number
-  na: number
-  high: number
-  medium: number
-  low: number
-}) {
-  const safeTotal = Math.max(total, 1)
-  return (
-    <div className="space-y-1">
-      <div className="text-xs text-gray-500">{total} MCs geprüft</div>
-      <div className="flex h-4 rounded overflow-hidden border">
-        <Bar pct={(ok / safeTotal) * 100} color="#10b981"/>
-        <Bar pct={(na / safeTotal) * 100} color="#94a3b8"/>
-        <Bar pct={(high / safeTotal) * 100} color="#dc2626"/>
-        <Bar pct={(medium / safeTotal) * 100} color="#f59e0b"/>
-        <Bar pct={(low / safeTotal) * 100} color="#3b82f6"/>
-      </div>
-      <div className="flex flex-wrap gap-2 text-xs">
-        <Legend color="#10b981" label={`OK ${ok}`}/>
-        <Legend color="#94a3b8" label={`n/a ${na}`}/>
-        <Legend color="#dc2626" label={`HIGH ${high}`}/>
-        <Legend color="#f59e0b" label={`MEDIUM ${medium}`}/>
-        <Legend color="#3b82f6" label={`LOW ${low}`}/>
-      </div>
-    </div>
-  )
-}
-
-function Bar({ pct, color }: { pct: number; color: string }) {
-  return <div style={{ width: `${pct}%`, background: color }}/>
-}
-
-function Legend({ color, label }: { color: string; label: string }) {
-  return (
-    <span className="inline-flex items-center gap-1">
-      <span style={{ background: color }} className="w-2 h-2 inline-block rounded"/>
-      <span>{label}</span>
-    </span>
-  )
-}
-
-function FindingRow({ f }: { f: Finding }) {
-  const color = severityHex(f.severity)
-  const sourceTags = (f.sources || [])
-    .map(s => s.source_type)
-    .filter((v, i, arr) => arr.indexOf(v) === i)
-  return (
-    <div className="p-2 border-l-2" style={{ borderColor: color }}>
-      <div className="flex items-baseline gap-2 text-xs">
-        <span style={{ color }} className="font-semibold">{f.severity}</span>
-        <code className="text-gray-500">{f.check_id}</code>
-        {sourceTags.map(t => (
-          <span key={t} className="px-1 bg-gray-100 rounded text-[10px]">{t}</span>
         ))}
       </div>
-      <div className="text-sm">{f.title}</div>
-      {f.norm && <div className="text-[11px] text-gray-500">{f.norm}</div>}
-      {f.evidence && (
-        <div className="text-[11px] italic text-gray-600 mt-1">„{f.evidence}"</div>
-      )}
-      {f.action && (
-        <div className="text-[11px] text-emerald-700 mt-1">
-          → {f.action}
+      <div className="flex gap-2">
+        <button
+          onClick={startTest}
+          disabled={running}
+          className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white text-sm px-4 py-2 rounded"
+        >
+          {running ? 'Laufend...' : 'Test starten'}
+        </button>
+        {runId && (
+          <span className="text-xs text-gray-500 self-center">
+            Run-ID: <code>{runId}</code>
+          </span>
+        )}
+      </div>
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-2 text-sm text-red-700">
+          {error}
         </div>
       )}
     </div>
   )
 }
 
+function MethodikInfo() {
+  return (
+    <details className="rounded border bg-slate-50 px-3 py-2 text-xs text-gray-700">
+      <summary className="cursor-pointer font-semibold">
+        Methodik — wie geprüft wird
+      </summary>
+      <ol className="list-decimal ml-5 mt-2 space-y-1">
+        <li>
+          <strong>Machine-Checks (MCs)</strong> — deterministische
+          Pattern-Tests gegen Gesetzestext (z.B. § 5 TMG). Schnell,
+          reproduzierbar.
+        </li>
+        <li>
+          <strong>Knowledge-Base</strong> — kuratierte Patterns aus
+          anonymisierten Mandanten-FAQs.
+        </li>
+        <li>
+          <strong>LLM-Eskalation</strong> — nur bei unklaren MCs:
+          erst lokales qwen2.5:7b, bei Bedarf größeres OVH-Modell.
+          Claude (Cloud) erst nach Anonymisierung.
+        </li>
+        <li>
+          <strong>Cross-Doc-Vergleich</strong> — Konsistenz zwischen
+          DSE, Cookie-Policy, Impressum (späterer Agent).
+        </li>
+      </ol>
+      <p className="mt-2 italic text-gray-500">
+        Disclaimer: keine Aussagen wie "rechtssicher" oder "konform" —
+        nur Findings + Empfehlungen + Herleitung. Verbotene Begriffe
+        werden vom Linter aus Agent-Outputs entfernt.
+      </p>
+    </details>
+  )
+}
+
+function EventLog({ events }: { events: StreamEvent[] }) {
+  return (
+    <div className="rounded border bg-gray-50 p-3 max-h-48 overflow-y-auto">
+      <div className="text-xs font-mono space-y-0.5">
+        {events.slice(-30).map((ev, i) => (
+          <div key={i}>
+            <span className="text-gray-400">[{ev.type}]</span>{' '}
+            {ev.slot && <span className="text-blue-600">{ev.slot}</span>}{' '}
+            {ev.severity && (
+              <span className={severityColor(ev.severity)}>{ev.severity}</span>
+            )}{' '}
+            {ev.title || ev.error || ev.label || ev.model || ev.url || ''}
+            {ev.word_count !== undefined && (
+              <span className="text-gray-500">
+                {' '}({ev.word_count} Wörter)
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function severityColor(sev: string) {
   return sev === 'HIGH' ? 'text-red-600 font-semibold' :
          sev === 'MEDIUM' ? 'text-amber-600 font-semibold' :
          sev === 'LOW' ? 'text-blue-600' : 'text-gray-600'
 }
-
-function severityHex(sev: string) {
-  return sev === 'HIGH' ? '#dc2626' :
-         sev === 'MEDIUM' ? '#f59e0b' :
-         sev === 'LOW' ? '#3b82f6' : '#94a3b8'
-}