fix: Restore new page.tsx with 4 tabs (was overwritten by merge)

Merge took the old page.tsx from main which still had useAgentAnalysis.
Restored: Website-Scan, Dokumenten-Pruefung, Banner-Check, Impressum-Check.
Removed: Schnellanalyse, Consent-Test, Compare, Auth-Test tabs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-11 15:04:29 +02:00
parent fde2f551d7
commit 916337b503
+118 -197
View File
@@ -2,41 +2,35 @@
import React, { useState } from 'react'
import { ScanResult } from './_components/ScanResult'
import { ConsentTestResult } from './_components/ConsentTestResult'
import { CompareResult } from './_components/CompareResult'
import { AuthTestResult } from './_components/AuthTestResult'
import { DocCheckTab } from './_components/DocCheckTab'
import { BannerCheckTab } from './_components/BannerCheckTab'
import { ImpressumCheckTab } from './_components/ImpressumCheckTab'
import { ComplianceFAQ } from './_components/ComplianceFAQ'
type Mode = 'pre_launch' | 'post_launch'
type Tab = 'quick' | 'scan' | 'consent' | 'compare' | 'auth'
type AnalysisTab = 'scan' | 'doc-check' | 'banner-check' | 'impressum-check'
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.' },
const TABS: { id: AnalysisTab; label: string; desc: string }[] = [
{ id: 'scan', label: 'Website-Scan', desc: 'Rechtliche Dokumente finden + Dienstleister erkennen' },
{ id: 'doc-check', label: 'Dokumenten-Pruefung', desc: 'DSI, AGB, Cookie-Richtlinie inhaltlich pruefen' },
{ id: 'banner-check', label: 'Banner-Check', desc: 'Cookie-Banner auf DSGVO-Konformitaet testen' },
{ id: 'impressum-check', label: 'Impressum-Check', desc: 'Impressum auf §5 TMG Pflichtangaben pruefen' },
]
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 [url, setUrl] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('agent-scan-url') || '' : '')
const [tab, setTab] = useState<AnalysisTab>(() => (typeof window !== 'undefined' ? localStorage.getItem('agent-scan-tab') as AnalysisTab : null) || 'scan')
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()
const [scanData, setScanData] = useState<any>(() => {
if (typeof window === 'undefined') return null
try { const s = localStorage.getItem('agent-scan-result'); return s ? JSON.parse(s) : null } catch { return null }
})
const [scanProgress, setScanProgress] = useState<string>('')
const [activeScanId, setActiveScanId] = useState<string>(() => typeof window !== 'undefined' ? localStorage.getItem('agent-scan-id') || '' : '')
const [scanHistory, setScanHistory] = useState<{ url: string; date: string; findings: number; docs: number; resultKey: string }[]>(() => {
if (typeof window === 'undefined') return []
try { return JSON.parse(localStorage.getItem('agent-scan-history') || '[]') } catch { return [] }
})
React.useEffect(() => { localStorage.setItem('agent-scan-url', url) }, [url])
React.useEffect(() => { localStorage.setItem('agent-scan-tab', tab) }, [tab])
@@ -56,24 +50,17 @@ export default function AgentPage() {
const data = await res.json()
if (data.progress) setScanProgress(data.progress)
if (data.status === 'completed' && data.result) {
setScanData(data.result)
setScanProgress('')
setScanLoading(false)
setScanData(data.result); setScanProgress(''); setScanLoading(false)
localStorage.setItem('agent-scan-result', JSON.stringify(data.result))
localStorage.removeItem('agent-scan-id')
setActiveScanId('')
_addToHistory(data.result)
return
localStorage.removeItem('agent-scan-id'); setActiveScanId('')
_addToHistory(data.result); return
}
if (data.status === 'failed' || data.status === 'not_found') {
if (data.status === 'failed') setScanError(data.error || 'Scan fehlgeschlagen')
setScanProgress('')
setScanLoading(false)
localStorage.removeItem('agent-scan-id')
setActiveScanId('')
return
setScanProgress(''); setScanLoading(false)
localStorage.removeItem('agent-scan-id'); setActiveScanId(''); return
}
} catch { /* retry */ }
} catch {}
}
}
poll()
@@ -83,83 +70,47 @@ export default function AgentPage() {
const _addToHistory = (result: any) => {
const resultKey = `scan-result-${Date.now()}`
try { localStorage.setItem(resultKey, JSON.stringify(result)) } catch {}
const entry = {
url: url || result.url || '',
date: new Date().toISOString(),
findings: result.findings?.length || 0,
docs: result.discovered_documents?.length || 0,
resultKey,
}
const entry = { url: url || result.url || '', date: new Date().toISOString(), findings: result.findings?.length || 0, docs: result.discovered_documents?.length || 0, resultKey }
const updated = [entry, ...scanHistory].slice(0, 30)
setScanHistory(updated)
localStorage.setItem('agent-scan-history', JSON.stringify(updated))
setScanHistory(updated); localStorage.setItem('agent-scan-history', JSON.stringify(updated))
}
const handleScan = async (e: React.FormEvent) => {
e.preventDefault()
setScanLoading(true)
setScanError(null)
if (!url.trim()) return
setScanLoading(true); setScanError(null); setScanData(null); setScanProgress('Scan wird gestartet...')
try {
if (tab === 'quick') {
setScanLoading(false)
analyze(url.trim(), mode)
return
const startRes = await fetch('/api/sdk/v1/agent/scan', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: url.trim(), mode: 'post_launch' }) })
if (!startRes.ok) throw new Error(`Scan konnte nicht gestartet werden: ${startRes.status}`)
const { scan_id } = await startRes.json()
if (!scan_id) throw new Error('Keine Scan-ID erhalten')
setActiveScanId(scan_id); localStorage.setItem('agent-scan-id', scan_id)
let attempts = 0
while (attempts < 120) {
await new Promise(r => setTimeout(r, 5000))
const pollRes = await fetch(`/api/sdk/v1/agent/scan?scan_id=${scan_id}`)
if (!pollRes.ok) { attempts++; continue }
const pollData = await pollRes.json()
if (pollData.progress) setScanProgress(pollData.progress)
if (pollData.status === 'completed' && pollData.result) {
setScanData(pollData.result); setScanProgress('')
localStorage.setItem('agent-scan-result', JSON.stringify(pollData.result))
localStorage.removeItem('agent-scan-id'); setActiveScanId(''); _addToHistory(pollData.result); break
}
if (pollData.status === 'failed') throw new Error(pollData.error || 'Scan fehlgeschlagen')
attempts++
}
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')
} finally {
setScanLoading(false)
}
if (attempts >= 120) throw new Error('Scan-Timeout (10 Minuten)')
} catch (e) { setScanError(e instanceof Error ? e.message : 'Unbekannter Fehler'); setScanProgress('') }
finally { setScanLoading(false) }
}
// Navigate to a specialized tab with a pre-filled URL
const navigateToCheck = (targetTab: AnalysisTab, checkUrl: string) => {
// Store the URL in the target tab's localStorage key
const keyMap: Record<string, string> = {
'doc-check': 'doc-check-prefill-url',
'banner-check': 'banner-check-url',
'impressum-check': 'impressum-check-url',
}
if (keyMap[targetTab]) {
localStorage.setItem(keyMap[targetTab], checkUrl)
}
const keyMap: Record<string, string> = { 'doc-check': 'doc-check-prefill-url', 'banner-check': 'banner-check-url', 'impressum-check': 'impressum-check-url' }
if (keyMap[targetTab]) localStorage.setItem(keyMap[targetTab], checkUrl)
setTab(targetTab)
}
// Extract discovered documents for quick-action buttons
const discoveredDocs = scanData?.discovered_documents || []
const scannedUrl = scanData?.url || url
@@ -167,109 +118,79 @@ 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>
<p className="text-gray-500 mt-1">Analysiere Dokumente und Webseiten auf DSGVO-Konformitaet.</p>
<p className="text-gray-500 mt-1">Analysiere Webseiten und Dokumente 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>
<div className="flex border-b border-gray-200 overflow-x-auto">
{TABS.map(t => (
<button key={t.id} onClick={() => setTab(t.id)}
className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
tab === t.id ? 'border-purple-500 text-purple-700' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
{t.label}
</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&#10;https://www.booking.com&#10;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>
{tab === 'scan' && (
<div className="space-y-4">
<div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
<h3 className="text-sm font-semibold text-indigo-900">Website-Scan (Discovery)</h3>
<p className="text-xs text-indigo-700 mt-1">Findet alle rechtlichen Dokumente (DSI, AGB, Impressum, Cookie, Widerruf), erkennt eingesetzte Drittdienste und prueft ob sie in der DSE dokumentiert sind.</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>
<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={scanLoading} required />
<button type="submit" disabled={scanLoading || !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">
{scanLoading ? (<><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>Scanne...</>) : 'Website scannen'}
</button>
</form>
{scanProgress && <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-700 flex items-center gap-3"><svg className="animate-spin w-5 h-5 text-purple-500 shrink-0" 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>{scanProgress}</div>}
{scanError && <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{scanError}</div>}
{scanData && (
<div className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
<h4 className="text-sm font-semibold text-gray-800 mb-3">Jetzt pruefen</h4>
<div className="grid grid-cols-2 gap-2">
<button onClick={() => navigateToCheck('banner-check', scannedUrl)} className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
<div className="text-sm font-medium text-gray-900">Cookie-Banner pruefen</div>
<div className="text-xs text-gray-500 mt-0.5">3-Phasen Dark-Pattern-Analyse</div>
</button>
<button onClick={() => navigateToCheck('impressum-check', scannedUrl + '/impressum')} className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
<div className="text-sm font-medium text-gray-900">Impressum pruefen</div>
<div className="text-xs text-gray-500 mt-0.5">§5 TMG Pflichtangaben</div>
</button>
{discoveredDocs.map((doc: any, i: number) => (
<button key={i} onClick={() => navigateToCheck('doc-check', doc.url)} className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
<div className="text-sm font-medium text-gray-900 truncate">{doc.title || doc.url}</div>
<div className="text-xs text-gray-500 mt-0.5">{doc.doc_type?.toUpperCase()} · {doc.word_count || '?'} Woerter{doc.completeness_pct != null && ` · ${doc.completeness_pct}%`}</div>
</button>
))}
</div>
</div>
)}
{scanData?.services && <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm"><ScanResult data={scanData} /></div>}
{scanHistory.length > 0 && (
<div className="border border-gray-200 rounded-xl p-4">
<h4 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h4>
<div className="space-y-2">
{scanHistory.map((h, i) => (
<button key={i} onClick={() => { setUrl(h.url); if (h.resultKey) { try { const s = localStorage.getItem(h.resultKey); if (s) { setScanData(JSON.parse(s)); return } } catch {} } }}
className="w-full flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left">
<div className="min-w-0 flex-1"><div className="text-sm font-medium text-gray-900 truncate">{h.url}</div><div className="text-xs text-gray-500">{new Date(h.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</div></div>
<div className="flex items-center gap-3 shrink-0 ml-3">{h.docs > 0 && <span className="text-xs text-purple-600">{h.docs} Dok.</span>}<span className={`text-xs font-medium ${h.findings > 0 ? 'text-red-600' : 'text-green-600'}`}>{h.findings} Findings</span></div>
</button>
))}
</div>
</div>
)}
</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>}
{/* 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>
)}
{tab === 'doc-check' && <DocCheckTab />}
{tab === 'banner-check' && <BannerCheckTab />}
{tab === 'impressum-check' && <ImpressumCheckTab />}
<ComplianceFAQ />
</div>
)
}