Merge feat/zeroclaw-compliance-agent into main
Brings all compliance doc-check features: - 162 regex checks + 1874 Master Controls - LLM-agnostic agent with tool calling - Banner check (46 checks, 30 CMPs, stealth, Shadow DOM) - Impressum check (24 checks) - Deep consent verification (DataLayer, GCM, TCF) - CMP E2E tests (39 tests) - HTML email reports, FAQ, persistent history Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { ScanResult } from './_components/ScanResult'
|
||||
<<<<<<< HEAD
|
||||
import { DocCheckTab } from './_components/DocCheckTab'
|
||||
import { BannerCheckTab } from './_components/BannerCheckTab'
|
||||
import { ImpressumCheckTab } from './_components/ImpressumCheckTab'
|
||||
@@ -31,6 +32,43 @@ export default function AgentPage() {
|
||||
if (typeof window === 'undefined') return []
|
||||
try { return JSON.parse(localStorage.getItem('agent-scan-history') || '[]') } catch { return [] }
|
||||
})
|
||||
=======
|
||||
import { ConsentTestResult } from './_components/ConsentTestResult'
|
||||
import { CompareResult } from './_components/CompareResult'
|
||||
import { AuthTestResult } from './_components/AuthTestResult'
|
||||
|
||||
type Mode = 'pre_launch' | 'post_launch'
|
||||
type Tab = 'quick' | 'scan' | 'consent' | 'compare' | 'auth'
|
||||
|
||||
const MODES = [
|
||||
{ id: 'pre_launch' as Mode, label: 'Internes Dokument', desc: 'Vor Veroeffentlichung', icon: '📋' },
|
||||
{ id: 'post_launch' as Mode, label: 'Live-Website', desc: 'Bereits online', icon: '🌐' },
|
||||
]
|
||||
|
||||
const TABS = [
|
||||
{ id: 'quick' as Tab, label: 'Schnellanalyse', info: 'Einzelne URL klassifizieren und bewerten.' },
|
||||
{ id: 'scan' as Tab, label: 'Website-Scan', info: '5-10 Seiten scannen, Dienstleister abgleichen, Pflichtinhalte pruefen.' },
|
||||
{ id: 'consent' as Tab, label: 'Cookie-Test', info: 'Testet mit Browser was VOR und NACH Cookie-Einwilligung geladen wird.' },
|
||||
{ id: 'compare' as Tab, label: 'Vergleich', info: '2-5 Websites parallel scannen und Compliance vergleichen.' },
|
||||
{ id: 'auth' as Tab, label: 'Login-Test', info: 'Nach Login pruefen: Kuendigung, Daten loeschen, Export, Einwilligungen.' },
|
||||
]
|
||||
|
||||
export default function AgentPage() {
|
||||
const [url, setUrl] = useState('')
|
||||
const [urls, setUrls] = useState('')
|
||||
const [mode, setMode] = useState<Mode>('post_launch')
|
||||
const [tab, setTab] = useState<Tab>('quick')
|
||||
const [scanLoading, setScanLoading] = useState(false)
|
||||
const [scanError, setScanError] = useState<string | null>(null)
|
||||
const [scanData, setScanData] = useState<any>(null)
|
||||
const [scanHistory, setScanHistory] = useState<any[]>([])
|
||||
const [consentData, setConsentData] = useState<any>(null)
|
||||
const [compareData, setCompareData] = useState<any>(null)
|
||||
const [authData, setAuthData] = useState<any>(null)
|
||||
const [authUser, setAuthUser] = useState('')
|
||||
const [authPass, setAuthPass] = useState('')
|
||||
const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()
|
||||
>>>>>>> feat/zeroclaw-compliance-agent
|
||||
|
||||
React.useEffect(() => { localStorage.setItem('agent-scan-url', url) }, [url])
|
||||
React.useEffect(() => { localStorage.setItem('agent-scan-tab', tab) }, [tab])
|
||||
@@ -91,6 +129,7 @@ export default function AgentPage() {
|
||||
|
||||
const handleScan = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
<<<<<<< HEAD
|
||||
if (!url.trim()) return
|
||||
setScanLoading(true)
|
||||
setScanError(null)
|
||||
@@ -131,6 +170,51 @@ export default function AgentPage() {
|
||||
} catch (e) {
|
||||
setScanError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||||
setScanProgress('')
|
||||
=======
|
||||
setScanLoading(true)
|
||||
setScanError(null)
|
||||
|
||||
try {
|
||||
if (tab === 'quick') {
|
||||
setScanLoading(false)
|
||||
analyze(url.trim(), mode)
|
||||
return
|
||||
}
|
||||
|
||||
let endpoint = ''
|
||||
let body: any = {}
|
||||
|
||||
if (tab === 'scan') {
|
||||
endpoint = '/api/sdk/v1/agent/scan'
|
||||
body = { url: url.trim(), mode }
|
||||
} else if (tab === 'consent') {
|
||||
endpoint = '/api/sdk/v1/agent/consent-test'
|
||||
body = { url: url.trim() }
|
||||
} else if (tab === 'compare') {
|
||||
endpoint = '/api/sdk/v1/agent/compare'
|
||||
body = { urls: urls.split('\n').map(u => u.trim()).filter(Boolean), mode }
|
||||
} else if (tab === 'auth') {
|
||||
endpoint = '/api/sdk/v1/agent/authenticated-scan'
|
||||
body = { url: url.trim(), username: authUser, password: authPass }
|
||||
}
|
||||
|
||||
const res = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Fehlgeschlagen: ${res.status}`)
|
||||
const data = await res.json()
|
||||
|
||||
if (tab === 'scan') {
|
||||
setScanData(data)
|
||||
setScanHistory(prev => [{ url: url.trim(), ...data, scanned_at: new Date().toISOString() }, ...prev].slice(0, 20))
|
||||
} else if (tab === 'consent') setConsentData(data)
|
||||
else if (tab === 'compare') setCompareData(data)
|
||||
else if (tab === 'auth') setAuthData(data)
|
||||
} catch (e) {
|
||||
setScanError(e instanceof Error ? e.message : 'Fehler')
|
||||
>>>>>>> feat/zeroclaw-compliance-agent
|
||||
} finally {
|
||||
setScanLoading(false)
|
||||
}
|
||||
@@ -158,6 +242,7 @@ export default function AgentPage() {
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
|
||||
<<<<<<< HEAD
|
||||
<p className="text-gray-500 mt-1">Analysiere Webseiten und Dokumente auf DSGVO-Konformitaet.</p>
|
||||
</div>
|
||||
|
||||
@@ -281,10 +366,93 @@ export default function AgentPage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
=======
|
||||
<p className="text-gray-500 mt-1">Analysiere Dokumente und Webseiten auf DSGVO-Konformitaet.</p>
|
||||
</div>
|
||||
|
||||
{/* Mode */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{MODES.map(m => (
|
||||
<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-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">{m.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div>
|
||||
<div className="flex border-b border-gray-200 overflow-x-auto">
|
||||
{TABS.map(t => (
|
||||
<button key={t.id} onClick={() => setTab(t.id)}
|
||||
className={`px-3 py-2.5 text-sm font-medium border-b-2 whitespace-nowrap transition-colors ${tab === t.id ? 'border-purple-500 text-purple-700' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-2 px-1">{TABS.find(t => t.id === tab)?.info}</p>
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
{tab === 'compare' ? (
|
||||
<textarea value={urls} onChange={e => setUrls(e.target.value)}
|
||||
placeholder="https://www.opodo.de https://www.booking.com https://www.expedia.de"
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm"
|
||||
disabled={isLoading} />
|
||||
) : (
|
||||
<input type="url" value={url} onChange={e => setUrl(e.target.value)}
|
||||
placeholder={tab === 'auth' ? 'https://www.example.com/login' : 'https://www.example.com/'}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm"
|
||||
disabled={isLoading} required />
|
||||
)}
|
||||
{tab === 'auth' && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input type="text" value={authUser} onChange={e => setAuthUser(e.target.value)}
|
||||
placeholder="Email / Benutzername" autoComplete="off"
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
||||
<input type="password" value={authPass} onChange={e => setAuthPass(e.target.value)}
|
||||
placeholder="Passwort" autoComplete="off"
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg text-sm" />
|
||||
<p className="col-span-2 text-[10px] text-gray-400">Credentials werden NICHT gespeichert — nur fuer diesen Test im Browser-Kontext.</p>
|
||||
</div>
|
||||
)}
|
||||
<button type="submit" disabled={isLoading || (!url.trim() && tab !== 'compare') || (tab === 'compare' && !urls.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>Analysiere...</>
|
||||
) : TABS.find(t => t.id === tab)?.label || 'Starten'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{currentError && <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{currentError}</div>}
|
||||
|
||||
{/* Results */}
|
||||
{tab === 'quick' && result && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-6">
|
||||
<AnalysisResult result={result} />
|
||||
{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} /></div>
|
||||
>>>>>>> feat/zeroclaw-compliance-agent
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{tab === 'scan' && scanData && <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm"><ScanResult data={scanData} /></div>}
|
||||
{tab === 'consent' && consentData && <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm"><ConsentTestResult data={consentData} /></div>}
|
||||
{tab === 'compare' && compareData?.sites && <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm"><CompareResult sites={compareData.sites} /></div>}
|
||||
{tab === 'auth' && authData && <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm"><AuthTestResult data={authData} /></div>}
|
||||
|
||||
<<<<<<< HEAD
|
||||
{/* Specialized Tabs */}
|
||||
{tab === 'doc-check' && <DocCheckTab />}
|
||||
{tab === 'banner-check' && <BannerCheckTab />}
|
||||
@@ -292,6 +460,27 @@ export default function AgentPage() {
|
||||
|
||||
{/* FAQ */}
|
||||
<ComplianceFAQ />
|
||||
=======
|
||||
{/* History */}
|
||||
{tab === 'quick' && <AnalysisHistory history={history} onSelect={r => { setUrl(r.url); analyze(r.url, mode) }} />}
|
||||
{tab === 'scan' && scanHistory.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h3>
|
||||
<div className="space-y-2">
|
||||
{scanHistory.map((item, i) => (
|
||||
<button key={i} onClick={() => setUrl(item.url)}
|
||||
className="w-full text-left p-3 bg-white border border-gray-200 rounded-lg hover:border-purple-300 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500 w-8">{item.pages_scanned}p</span>
|
||||
<span className="text-sm text-gray-700 truncate flex-1">{item.url}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${item.findings?.length > 0 ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>{item.findings?.length || 0}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>>>>>>> feat/zeroclaw-compliance-agent
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user