feat: 4 banner check upgrades — 30 CMPs, stealth, Shadow DOM, categories

1. 30 CMP selectors (was 10): Added Sourcepoint, Iubenda, Complianz,
   CookieFirst, HubSpot, Osano, Piwik PRO, Cookie Consent (Insites),
   Axeptio, Termly, CookieScript, Civic UK, GDPR Cookie Compliance,
   CookieHub, Ketch, Admiral, Sibbo, Evidon, LiveRamp, Adsimple.
   Plus improved generic fallback: role=dialog, aria-label, data-* attrs.

2. Playwright stealth mode: playwright-stealth against bot detection.
   Removes WebDriver flag, simulates plugins, realistic viewport/locale.
   Launch args: --disable-blink-features=AutomationControlled.

3. Shadow DOM: Recursive JS-based search through shadowRoot elements
   for consent banners. Fallback click via page.evaluate() when
   normal Playwright selectors can't penetrate Shadow DOM.

4. Category selection UI: User can choose which cookie categories to
   test (Notwendig, Statistik, Marketing, Funktional, Praeferenzen).
   Pill-style checkboxes in BannerCheckTab, forwarded through API chain.

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

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

@@ -33,12 +33,34 @@ interface BannerResult {
   }
 }
 
+const CATEGORIES = [
+  { id: 'all', label: 'Alle Kategorien' },
+  { id: 'necessary', label: 'Notwendig' },
+  { id: 'statistics', label: 'Statistik' },
+  { id: 'marketing', label: 'Marketing' },
+  { id: 'functional', label: 'Funktional' },
+  { id: 'preferences', label: 'Praeferenzen' },
+]
+
 export function BannerCheckTab() {
   const [url, setUrl] = useState('')
   const [loading, setLoading] = useState(false)
   const [progress, setProgress] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [result, setResult] = useState<BannerResult | null>(null)
+  const [categories, setCategories] = useState<string[]>(['all'])
+
+  const toggleCategory = (id: string) => {
+    if (id === 'all') {
+      setCategories(['all'])
+      return
+    }
+    setCategories(prev => {
+      const without = prev.filter(c => c !== 'all' && c !== id)
+      const next = prev.includes(id) ? without : [...without, id]
+      return next.length === 0 ? ['all'] : next
+    })
+  }
 
   const handleScan = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -49,11 +71,16 @@ export function BannerCheckTab() {
     setResult(null)
     setProgress('Cookie-Banner wird analysiert...')
 
+    // 'all' selected = empty array (test everything)
+    const selectedCategories = categories.includes('all')
+      ? []
+      : categories
+
     try {
       const res = await fetch('/api/sdk/v1/agent/banner-check', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ url: url.trim() }),
+        body: JSON.stringify({ url: url.trim(), categories: selectedCategories }),
       })
       if (!res.ok) throw new Error(`Fehler: ${res.status}`)
       const data = await res.json()
@@ -94,22 +121,55 @@ export function BannerCheckTab() {
         </p>
       </div>
 
-      <form onSubmit={handleScan} className="flex gap-3">
-        <input
-          type="url" value={url} onChange={e => setUrl(e.target.value)}
-          placeholder="https://www.example.com/"
-          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 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>Pruefe...</>
-          ) : 'Banner pruefen'}
-        </button>
+      <form onSubmit={handleScan} className="space-y-3">
+        <div className="flex gap-3">
+          <input
+            type="url" value={url} onChange={e => setUrl(e.target.value)}
+            placeholder="https://www.example.com/"
+            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 transition-colors flex items-center gap-2 text-sm font-medium whitespace-nowrap">
+            {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>Pruefe...</>
+            ) : 'Banner pruefen'}
+          </button>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {CATEGORIES.map(cat => (
+            <label key={cat.id}
+              className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer border transition-colors ${
+                categories.includes(cat.id)
+                  ? 'bg-purple-100 border-purple-300 text-purple-800'
+                  : 'bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={categories.includes(cat.id)}
+                onChange={() => toggleCategory(cat.id)}
+                className="sr-only"
+              />
+              <span className={`w-3 h-3 rounded-sm border flex items-center justify-center ${
+                categories.includes(cat.id)
+                  ? 'bg-purple-600 border-purple-600'
+                  : 'border-gray-400'
+              }`}>
+                {categories.includes(cat.id) && (
+                  <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 12 12">
+                    <path d="M10 3L4.5 8.5 2 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                )}
+              </span>
+              {cat.label}
+            </label>
+          ))}
+        </div>
       </form>
 
       {progress && (