feat(cookie): 2. Sicht Banner-Kategorie + Fehl-Einsortierung

CookieResultView bekommt einen Umschalter [Rechtliche Rolle] ↔ [Banner-Kategorie] (Notwendig/Funktional/Statistik/Marketing). In beiden Sichten zeigt jede Cookie-Zeile '→ sollte: Marketing', wenn die tatsächliche Kategorie laut Library von der deklarierten abweicht (rot bei Tracker als notwendig, § 25 TDDDG). Neue KPI 'Falsch einsortiert'. Backend liefert dazu cookie_categories (name→actual_category) aus big_lib im cookie-check-Output; Seite lädt cookie-check einmal und reicht es an beide Komponenten. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-11 10:33:33 +02:00
parent af8906b156
commit b0115cb10b
6 changed files with 201 additions and 45 deletions
@@ -139,11 +139,14 @@ export function CookieFindingList({ data }: { data: CheckData }) {
  )
 }

-export function CookieLibraryPanel({ snapshotId }: { snapshotId: string }) {
-  const [data, setData] = useState<CheckData | null>(null)
-  const [loading, setLoading] = useState(true)
+export function CookieLibraryPanel(
+  { snapshotId, data: provided }: { snapshotId: string; data?: CheckData },
+) {
+  const [data, setData] = useState<CheckData | null>(provided ?? null)
+  const [loading, setLoading] = useState(!provided)

  useEffect(() => {
+    if (provided) { setData(provided); setLoading(false); return }
    let cancelled = false
    fetch(`/api/sdk/v1/agent/snapshots/${snapshotId}/cookie-check`)
      .then(r => r.json())
@@ -151,7 +154,7 @@ export function CookieLibraryPanel({ snapshotId }: { snapshotId: string }) {
      .catch(() => { if (!cancelled) setData({ findings: [] }) })
      .finally(() => { if (!cancelled) setLoading(false) })
    return () => { cancelled = true }
-  }, [snapshotId])
+  }, [snapshotId, provided])

  if (loading) return <div className="text-xs text-gray-400">Library-Abgleich läuft…</div>
  return <CookieFindingList data={data || {}} />
@@ -4,9 +4,12 @@
 * CookieResultView — strukturierte Cookie-/Vendor-Auswertung aus einem
 * gespeicherten Snapshot (cmp_vendors), OHNE Re-Crawl.
 *
- * KPIs + Empfänger-Gruppen (Eigene / Auftragsverarbeiter / Joint Controller —
- * wie im Audit-Mail-VVT) + aufklappbare Vendor→Cookie-Tabelle. Verarbeitet
- * Mengen (780 Cookies bei BMW): Vendors gruppiert, Cookies on-demand.
+ * Zwei Sichten (Umschalter):
+ *  - Rechtliche Rolle: Eigene / Auftragsverarbeiter / Joint Controller (VVT)
+ *  - Banner-Kategorie: Notwendig / Funktional / Statistik / Marketing — die im
+ *    Consent-Banner implementierte Einteilung. Pro Cookie wird die tatsächliche
+ *    Kategorie laut Library gegengeprüft → '→ sollte: Marketing' bei
+ *    Fehl-Einsortierung (Tracker als notwendig = § 25 TDDDG-relevant).
 */

 import React, { useMemo, useState } from 'react'
@@ -37,6 +40,9 @@ interface Snapshot {
  cmp_vendors?: SnapshotVendor[]
 }

+// name_lower → tatsächliche Kategorie laut Library (aus /cookie-check).
+export type LibCategories = Record<string, string>
+
 const ROLE_LABEL: Record<string, string> = {
  unknown: 'Unbekannt', ad_pixel: 'Werbe-Pixel', auth_token: 'Auth-Token',
  preference: 'Präferenz', visitor_id: 'Besucher-ID', consent_state: 'Consent',
@@ -57,6 +63,45 @@ const GROUPS = [
  { key: 'other', label: 'Sonstige Empfänger', test: () => true },
 ]

+// Banner-Kategorie-Sicht: kanonische Buckets + Labels.
+const CAT_CANON: Record<string, string> = {
+  necessary: 'necessary', essential: 'necessary', notwendig: 'necessary',
+  essenziell: 'necessary', security: 'necessary', 'strictly necessary': 'necessary',
+  functional: 'functional', funktional: 'functional', preferences: 'functional',
+  preference: 'functional', präferenzen: 'functional',
+  statistics: 'statistics', statistik: 'statistics', analytics: 'statistics',
+  performance: 'statistics',
+  marketing: 'marketing', targeting: 'marketing', advertising: 'marketing',
+  werbung: 'marketing', social_media: 'marketing', social: 'marketing', ad: 'marketing',
+}
+const CANON_LABEL: Record<string, string> = {
+  necessary: 'Notwendig', functional: 'Funktional',
+  statistics: 'Statistik', marketing: 'Marketing', unknown: '—',
+}
+const CATEGORY_GROUPS = [
+  { key: 'necessary', label: 'Notwendig (essenziell)' },
+  { key: 'functional', label: 'Funktional' },
+  { key: 'statistics', label: 'Statistik' },
+  { key: 'marketing', label: 'Marketing' },
+  { key: 'unknown', label: 'Ohne Kategorie' },
+]
+
+function canonCat(c?: string): string {
+  return CAT_CANON[(c || '').toLowerCase().trim()] || 'unknown'
+}
+
+// Tatsächliche Kategorie laut Library vs. deklarierte Banner-Kategorie.
+function mismatch(name: string, declaredCanon: string, lib?: LibCategories) {
+  const raw = lib?.[name.toLowerCase()]
+  if (!raw) return null
+  const actual = canonCat(raw)
+  if (actual === 'unknown' || actual === declaredCanon) return null
+  // severe: als notwendig deklariert, laut Library einwilligungspflichtig.
+  const severe = declaredCanon === 'necessary'
+    && (actual === 'marketing' || actual === 'statistics')
+  return { actual, severe }
+}
+
 function scoreColor(s?: number): string {
  if (s == null) return 'text-gray-400'
  return s >= 80 ? 'text-green-700' : s >= 50 ? 'text-amber-700' : 'text-red-700'
@@ -71,10 +116,11 @@ function Tile({ label, value, tone }: { label: string; value: React.ReactNode; t
  )
 }

-function VendorRow({ v }: { v: SnapshotVendor }) {
+function VendorRow({ v, lib }: { v: SnapshotVendor; lib?: LibCategories }) {
  const [open, setOpen] = useState(false)
  const cookies = v.cookies || []
  const cat = (v.category || '').toLowerCase()
+  const declaredCanon = canonCat(v.category)
  const drittland = !!v.country && !EEA.has((v.country || '').toUpperCase())
  return (
    <div>
@@ -111,22 +157,35 @@ function VendorRow({ v }: { v: SnapshotVendor }) {
              </tr>
            </thead>
            <tbody>
-              {cookies.map((c, i) => (
-                <tr key={i} className="border-t border-gray-100 align-top">
-                  <td className="px-2 py-1 font-mono text-gray-700 break-all w-40">{c.name}</td>
-                  <td className="px-2 py-1 text-gray-500 w-24">
-                    {c.functional_role && c.functional_role !== 'unknown'
-                      ? (ROLE_LABEL[c.functional_role] || c.functional_role)
-                      : <span className="text-gray-300">—</span>}
-                  </td>
-                  <td className="px-2 py-1 text-gray-500 break-words">
-                    {c.purpose
-                      ? c.purpose
-                      : <span className="text-amber-600 italic">kein Zweck</span>}
-                  </td>
-                  <td className="px-2 py-1 text-gray-400 w-24 whitespace-nowrap">{c.expiry || '—'}</td>
-                </tr>
-              ))}
+              {cookies.map((c, i) => {
+                const mm = mismatch(c.name, declaredCanon, lib)
+                return (
+                  <tr key={i} className="border-t border-gray-100 align-top">
+                    <td className="px-2 py-1 font-mono text-gray-700 break-all w-40">
+                      {c.name}
+                      {mm && (
+                        <span
+                          className={`ml-1 inline-block px-1 py-0.5 rounded text-[9px] font-sans ${mm.severe ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`}
+                          title="tatsächliche Kategorie laut Library"
+                        >
+                          → sollte: {CANON_LABEL[mm.actual]}
+                        </span>
+                      )}
+                    </td>
+                    <td className="px-2 py-1 text-gray-500 w-24">
+                      {c.functional_role && c.functional_role !== 'unknown'
+                        ? (ROLE_LABEL[c.functional_role] || c.functional_role)
+                        : <span className="text-gray-300">—</span>}
+                    </td>
+                    <td className="px-2 py-1 text-gray-500 break-words">
+                      {c.purpose
+                        ? c.purpose
+                        : <span className="text-amber-600 italic">kein Zweck</span>}
+                    </td>
+                    <td className="px-2 py-1 text-gray-400 w-24 whitespace-nowrap">{c.expiry || '—'}</td>
+                  </tr>
+                )
+              })}
            </tbody>
          </table>
        </div>
@@ -135,48 +194,96 @@ function VendorRow({ v }: { v: SnapshotVendor }) {
  )
 }

-export function CookieResultView({ snapshot }: { snapshot: Snapshot }) {
+export function CookieResultView(
+  { snapshot, cookieCategories }:
+  { snapshot: Snapshot; cookieCategories?: LibCategories },
+) {
  const vendors = snapshot.cmp_vendors || []
+  const [viewMode, setViewMode] = useState<'role' | 'category'>('role')
+
  const stats = useMemo(() => {
    const cookies = vendors.reduce((n, v) => n + (v.cookies?.length || 0), 0)
    const marketing = vendors.filter(v => (v.category || '').toLowerCase() === 'marketing').length
    const drittland = vendors.filter(v => v.country && !EEA.has(v.country.toUpperCase())).length
-    return { cookies, marketing, drittland }
-  }, [vendors])
+    let misplaced = 0
+    for (const v of vendors) {
+      const dc = canonCat(v.category)
+      for (const c of v.cookies || []) {
+        if (mismatch(c.name, dc, cookieCategories)?.severe) misplaced++
+      }
+    }
+    return { cookies, marketing, drittland, misplaced }
+  }, [vendors, cookieCategories])

-  const grouped = useMemo(() => GROUPS.map(g => ({
-    ...g,
-    vendors: vendors
-      .filter(v => GROUPS.find(gg => gg.test((v.recipient_type || '').toUpperCase()))?.key === g.key)
-      .sort((a, b) => (a.compliance_score ?? 100) - (b.compliance_score ?? 100)),
-  })).filter(g => g.vendors.length > 0), [vendors])
+  const grouped = useMemo(() => {
+    const sortByScore = (a: SnapshotVendor, b: SnapshotVendor) =>
+      (a.compliance_score ?? 100) - (b.compliance_score ?? 100)
+    if (viewMode === 'category') {
+      return CATEGORY_GROUPS
+        .map(g => ({ ...g, vendors: vendors.filter(v => canonCat(v.category) === g.key).sort(sortByScore) }))
+        .filter(g => g.vendors.length > 0)
+    }
+    return GROUPS
+      .map(g => ({
+        ...g,
+        vendors: vendors
+          .filter(v => GROUPS.find(gg => gg.test((v.recipient_type || '').toUpperCase()))?.key === g.key)
+          .sort(sortByScore),
+      }))
+      .filter(g => g.vendors.length > 0)
+  }, [vendors, viewMode])
+
+  const toggleBtn = (mode: 'role' | 'category', label: string) => (
+    <button
+      onClick={() => setViewMode(mode)}
+      className={`px-2.5 py-1 rounded text-xs ${viewMode === mode ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+    >
+      {label}
+    </button>
+  )

  return (
    <div className="space-y-4">
-      <div>
-        <h2 className="text-lg font-semibold text-gray-900">
-          Cookie-Auswertung — {snapshot.site_domain || 'Snapshot'}
-        </h2>
-        <p className="text-xs text-gray-500 mt-0.5">
-          aus gespeichertem Snapshot (kein Re-Crawl) ·{' '}
-          {snapshot.created_at ? snapshot.created_at.slice(0, 19).replace('T', ' ') : ''}
-        </p>
+      <div className="flex items-start justify-between gap-3 flex-wrap">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900">
+            Cookie-Auswertung — {snapshot.site_domain || 'Snapshot'}
+          </h2>
+          <p className="text-xs text-gray-500 mt-0.5">
+            aus gespeichertem Snapshot (kein Re-Crawl) ·{' '}
+            {snapshot.created_at ? snapshot.created_at.slice(0, 19).replace('T', ' ') : ''}
+          </p>
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="text-[11px] text-gray-500 mr-1">Gruppierung:</span>
+          {toggleBtn('role', 'Rechtliche Rolle')}
+          {toggleBtn('category', 'Banner-Kategorie')}
+        </div>
      </div>

-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
        <Tile label="Anbieter" value={vendors.length} tone="text-gray-800" />
        <Tile label="Cookies gesamt" value={stats.cookies} tone="text-gray-800" />
        <Tile label="Marketing-Anbieter" value={stats.marketing} tone={stats.marketing > 0 ? 'text-red-700' : 'text-gray-800'} />
        <Tile label="Drittland (außerhalb EWR)" value={stats.drittland} tone={stats.drittland > 0 ? 'text-amber-700' : 'text-gray-800'} />
+        <Tile label="Falsch einsortiert (lt. Library)" value={stats.misplaced} tone={stats.misplaced > 0 ? 'text-red-700' : 'text-gray-800'} />
      </div>

+      {viewMode === 'category' && (
+        <p className="text-[11px] text-gray-500 -mt-1">
+          Banner-Kategorie wie im Consent-Tool deklariert. Badge{' '}
+          <span className="px-1 py-0.5 rounded text-[9px] bg-red-100 text-red-700">→ sollte: …</span>{' '}
+          zeigt die tatsächliche Kategorie laut Library (Fehl-Einsortierung).
+        </p>
+      )}
+
      {grouped.map(g => (
        <div key={g.key} className="border rounded-lg overflow-hidden">
          <div className="px-3 py-2 bg-slate-50 border-b text-xs font-semibold text-gray-700">
            {g.label} <span className="text-gray-400 font-normal">({g.vendors.length})</span>
          </div>
          <div className="divide-y divide-gray-100">
-            {g.vendors.map((v, i) => <VendorRow key={i} v={v} />)}
+            {g.vendors.map((v, i) => <VendorRow key={i} v={v} lib={cookieCategories} />)}
          </div>
        </div>
      ))}
@@ -50,4 +50,20 @@ describe('CookieResultView', () => {
    expect(screen.getByText('LSKey-c$Policy')).toBeInTheDocument()
    expect(screen.getByText(/kein Zweck/)).toBeInTheDocument()  // leerer purpose
  })
+
+  it('schaltet auf die Banner-Kategorie-Sicht um', () => {
+    render(<CookieResultView snapshot={SNAP} />)
+    fireEvent.click(screen.getByText('Banner-Kategorie'))
+    expect(screen.getByText(/Notwendig \(essenziell\)/)).toBeInTheDocument()
+    expect(screen.getByText('Salesforce')).toBeInTheDocument()
+    expect(screen.getByText('Meta / Facebook')).toBeInTheDocument()
+  })
+
+  it('markiert falsch einsortierte Cookies (Tracker als notwendig)', () => {
+    // 'sid' ist als necessary deklariert, Library sagt marketing → § 25-relevant.
+    render(<CookieResultView snapshot={SNAP} cookieCategories={{ sid: 'marketing' }} />)
+    expect(screen.getByText('Falsch einsortiert (lt. Library)')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Salesforce'))
+    expect(screen.getByText(/sollte: Marketing/)).toBeInTheDocument()
+  })
 })
@@ -17,6 +17,7 @@ export default function SnapshotDetail(
 ) {
  const { snapshotId } = useUnwrap(params)
  const [snap, setSnap] = useState<any>(null)
+  const [check, setCheck] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

@@ -34,6 +35,16 @@ export default function SnapshotDetail(
    return () => { cancelled = true }
  }, [snapshotId])

+  // Library-Abgleich einmal laden (Findings + cookie_categories für beide Views).
+  useEffect(() => {
+    let cancelled = false
+    fetch(`/api/sdk/v1/agent/snapshots/${snapshotId}/cookie-check`)
+      .then(r => r.json())
+      .then(d => { if (!cancelled) setCheck(d) })
+      .catch(() => { if (!cancelled) setCheck(null) })
+    return () => { cancelled = true }
+  }, [snapshotId])
+
  const hasCookies = (snap?.cmp_vendors?.length ?? 0) > 0

  return (
@@ -47,8 +58,8 @@ export default function SnapshotDetail(
        <div className="text-sm text-red-600">Snapshot nicht gefunden.</div>
      ) : hasCookies ? (
        <>
-          <CookieLibraryPanel snapshotId={snapshotId} />
-          <CookieResultView snapshot={snap} />
+          <CookieLibraryPanel snapshotId={snapshotId} data={check ?? undefined} />
+          <CookieResultView snapshot={snap} cookieCategories={check?.cookie_categories} />
        </>
      ) : (
        <div className="text-sm text-gray-500">
@@ -125,6 +125,9 @@ def analyze_cookies(vendors: list[dict], big_lib: dict | None = None) -> dict:
    in_library = 0
    seen_third: set[str] = set()
    seen_alt: set[str] = set()
+    # name_lower → tatsächliche Kategorie laut Library (für die Banner-Sicht:
+    # zeigt, wo ein Cookie eigentlich hingehört, falls falsch einsortiert).
+    cookie_cats: dict[str, str] = {}

    for v in vendors or []:
        vcat = (v.get("category") or "").lower()
@@ -149,6 +152,8 @@ def analyze_cookies(vendors: list[dict], big_lib: dict | None = None) -> dict:
                })
            rich = lookup_cookie(name) or {}
            big = big_lib.get(name.lower(), {})
+            if big.get("actual_category"):
+                cookie_cats[name.lower()] = big["actual_category"]
            if not rich and not big:
                continue
            in_library += 1
@@ -268,4 +273,5 @@ def analyze_cookies(vendors: list[dict], big_lib: dict | None = None) -> dict:
            "findings": len(findings),
        },
        "findings": findings,
+        "cookie_categories": cookie_cats,
    }
@@ -139,6 +139,19 @@ def test_no_missing_retention_when_vendor_has_cookies():
    assert not [f for f in out["findings"] if f["type"] == "missing_retention"]


+def test_cookie_categories_exposes_actual_library_category():
+    # Für die Banner-Sicht: name_lower → tatsächliche Kategorie laut Library.
+    big = {"bmw_track_de": {
+        "actual_category": "marketing", "typical_max_age_seconds": 86400,
+        "purpose_de": "Tracking", "vendor_name": "BMW",
+    }}
+    out = analyze_cookies([{
+        "name": "BMW", "category": "necessary",
+        "cookies": [{"name": "bmw_track_de", "purpose": "x", "expiry": "1 Tag"}],
+    }], big)
+    assert out["cookie_categories"]["bmw_track_de"] == "marketing"
+
+
 def test_big_library_covers_cookie_not_in_rich_db():
    # Cookie nicht in der 35er rich-DB, aber in der grossen 2287er (big_lib).
    big = {"bmw_track_de": {