feat(agent): strukturierte Ergebnis-Tabs — Impressum (Phase 1)

Der Compliance-Check legt zusätzlich einen strukturierten v3-AgentOutput pro Thema in result.agent_outputs ab (additiv; B18-HTML + Firehose-Mail bleiben unangetastet). Frontend: standardisiertes Ergebnis-Tab statt Firehose — Impressum-Tab (AgentResultTab) + "Alle Checks (roh)" (ChecklistView). - backend: _agent_outputs.py ruft den registrierten v3-ImpressumAgent, gewired in _orchestrator nach B18, surfaced via _phase_f_persist. - frontend: AgentResultView (aus AgentSlotCard extrahiert, DRY), AgentResultTab, ComplianceResultTabs; ComplianceCheckTab 490->391 Zeilen. - Tests: backend 2 passed, frontend 2 passed; tsc 0 neue Fehler; check-loc 0. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-10 18:32:06 +02:00
parent 3aa49f9553
commit e21984e0ad
11 changed files with 622 additions and 192 deletions
@@ -0,0 +1,109 @@
+'use client'
+
+/**
+ * AgentResultView — der geteilte Render-Body eines AgentOutput:
+ * MC-Coverage + Speedometer + Eskalationslog + Findings (HIGH→LOW) +
+ * konsolidierte Maßnahmen. KEIN Header — den setzt der Consumer
+ * (AgentSlotCard = Agent-Test-Slot, AgentResultTab = Themen-Tab).
+ *
+ * Dieser View ist die "Karten"-Darstellung für Themen mit wenigen
+ * Findings (z.B. Impressum). Dichte Themen (Cookie, bis ~1000 Zeilen)
+ * bekommen später einen eigenen Tabellen-View im gleichen Tab-Rahmen.
+ */
+
+import React, { useState } from 'react'
+
+import type { Severity, SlotOutput } from './_agentTypes'
+import { AgentFindingCard } from './AgentFindingCard'
+import { AgentMcCoverage } from './AgentMcCoverage'
+import { AgentRecommendationCard } from './AgentRecommendationCard'
+import { AgentSpeedometer } from './AgentSpeedometer'
+
+const SEV_ORDER: Record<Severity, number> = {
+  HIGH: 0, MEDIUM: 1, LOW: 2, INFO: 3,
+}
+
+const INITIAL_VISIBLE = 12
+
+export function AgentResultView({ output }: { output: SlotOutput }) {
+  const [showAll, setShowAll] = useState(false)
+  const sortedFindings = [...output.findings].sort(
+    (a, b) => SEV_ORDER[a.severity] - SEV_ORDER[b.severity],
+  )
+  const visible = showAll
+    ? sortedFindings
+    : sortedFindings.slice(0, INITIAL_VISIBLE)
+
+  return (
+    <div className="space-y-3">
+      {output.notes && (
+        <div className="text-xs text-amber-700 bg-amber-50 px-2 py-1 rounded">
+          Hinweis: {output.notes}
+        </div>
+      )}
+
+      <AgentMcCoverage coverage={output.mc_coverage} />
+
+      <AgentSpeedometer
+        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-600 border-l-2 border-violet-400 pl-2 space-y-0.5">
+          <div className="font-semibold text-violet-700">
+            LLM-Eskalation eingesetzt:
+          </div>
+          {output.escalation_log.map((e, i) => (
+            <div key={i}>
+              {e.stage} <code className="text-violet-700">{e.model}</code>{' '}
+              · {e.duration_ms} ms{' '}
+              {e.tokens_in ? `· ${e.tokens_in}→${e.tokens_out} tok` : ''}{' '}
+              {e.success ? '✓' : `✗ ${e.error || ''}`}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {sortedFindings.length > 0 && (
+        <div className="space-y-2">
+          <div className="text-xs font-semibold uppercase text-gray-700">
+            Findings ({sortedFindings.length}) — nach Schwere sortiert
+          </div>
+          <div className="space-y-2">
+            {visible.map(f => (
+              <AgentFindingCard key={f.check_id} f={f} />
+            ))}
+          </div>
+          {sortedFindings.length > INITIAL_VISIBLE && (
+            <button
+              onClick={() => setShowAll(x => !x)}
+              className="text-xs text-blue-600 hover:underline"
+            >
+              {showAll
+                ? 'Weniger anzeigen'
+                : `Alle ${sortedFindings.length} anzeigen`}
+            </button>
+          )}
+        </div>
+      )}
+
+      {output.recommendations.length > 0 && (
+        <div className="space-y-2">
+          <div className="text-xs font-semibold uppercase text-gray-700">
+            Maßnahmen-Plan ({output.recommendations.length} konsolidiert)
+          </div>
+          <div className="space-y-2">
+            {output.recommendations.map(r => (
+              <AgentRecommendationCard key={r.recommendation_id} r={r} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}