feat: Compliance Maximizer — Regulatory Optimization Engine
Some checks failed
Build + Deploy / build-admin-compliance (push) Successful in 1m45s
Build + Deploy / build-backend-compliance (push) Successful in 4m42s
Build + Deploy / build-ai-sdk (push) Successful in 46s
Build + Deploy / build-developer-portal (push) Successful in 1m6s
Build + Deploy / build-tts (push) Successful in 1m14s
Build + Deploy / build-document-crawler (push) Successful in 31s
Build + Deploy / build-dsms-gateway (push) Successful in 24s
CI / branch-name (push) Has been skipped
CI / guardrail-integrity (push) Has been skipped
CI / loc-budget (push) Failing after 15s
CI / secret-scan (push) Has been skipped
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / nodejs-build (push) Successful in 2m27s
CI / dep-audit (push) Has been skipped
CI / sbom-scan (push) Has been skipped
CI / test-go (push) Failing after 37s
CI / test-python-backend (push) Successful in 42s
CI / test-python-document-crawler (push) Successful in 25s
CI / test-python-dsms-gateway (push) Successful in 23s
CI / validate-canonical-controls (push) Successful in 18s
Build + Deploy / trigger-orca (push) Successful in 4m35s
Some checks failed
Build + Deploy / build-admin-compliance (push) Successful in 1m45s
Build + Deploy / build-backend-compliance (push) Successful in 4m42s
Build + Deploy / build-ai-sdk (push) Successful in 46s
Build + Deploy / build-developer-portal (push) Successful in 1m6s
Build + Deploy / build-tts (push) Successful in 1m14s
Build + Deploy / build-document-crawler (push) Successful in 31s
Build + Deploy / build-dsms-gateway (push) Successful in 24s
CI / branch-name (push) Has been skipped
CI / guardrail-integrity (push) Has been skipped
CI / loc-budget (push) Failing after 15s
CI / secret-scan (push) Has been skipped
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / nodejs-build (push) Successful in 2m27s
CI / dep-audit (push) Has been skipped
CI / sbom-scan (push) Has been skipped
CI / test-go (push) Failing after 37s
CI / test-python-backend (push) Successful in 42s
CI / test-python-document-crawler (push) Successful in 25s
CI / test-python-dsms-gateway (push) Successful in 23s
CI / validate-canonical-controls (push) Successful in 18s
Build + Deploy / trigger-orca (push) Successful in 4m35s
Neues Modul das den regulatorischen Spielraum fuer KI-Use-Cases deterministisch berechnet und optimale Konfigurationen vorschlaegt. Kernfeatures: - 13-Dimensionen Constraint-Space (DSGVO + AI Act) - 3-Zonen-Analyse: Verboten / Eingeschraenkt / Erlaubt - Deterministische Optimizer-Engine (kein LLM im Kern) - 28 Constraint-Regeln aus DSGVO, AI Act, EDPB Guidelines - 28 Tests (Golden Suite + Meta-Tests) - REST API: /sdk/v1/maximizer/* (9 Endpoints) - Frontend: 3-Zonen-Visualisierung, Dimension-Form, Score-Gauges [migration-approved] Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
|
||||
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
|
||||
|
||||
function buildUrl(request: NextRequest, params: { path?: string[] }) {
|
||||
const subPath = params.path?.join('/') || ''
|
||||
const { searchParams } = new URL(request.url)
|
||||
const qs = searchParams.toString()
|
||||
return `${SDK_URL}/sdk/v1/maximizer/${subPath}${qs ? `?${qs}` : ''}`
|
||||
}
|
||||
|
||||
function forwardHeaders(request: NextRequest): Record<string, string> {
|
||||
const headers: Record<string, string> = { 'Content-Type': 'application/json' }
|
||||
const tenantId = request.headers.get('X-Tenant-ID')
|
||||
if (tenantId) headers['X-Tenant-ID'] = tenantId
|
||||
const userId = request.headers.get('X-User-ID')
|
||||
if (userId) headers['X-User-ID'] = userId
|
||||
return headers
|
||||
}
|
||||
|
||||
async function proxy(request: NextRequest, params: { path?: string[] }, method: string) {
|
||||
try {
|
||||
const url = buildUrl(request, params)
|
||||
const init: RequestInit = { method, headers: forwardHeaders(request) }
|
||||
if (method !== 'GET' && method !== 'DELETE') {
|
||||
init.body = await request.text()
|
||||
}
|
||||
const response = await fetch(url, init)
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text()
|
||||
return NextResponse.json({ error: 'Maximizer backend error', details: errorText }, { status: response.status })
|
||||
}
|
||||
if (response.status === 204) return new NextResponse(null, { status: 204 })
|
||||
const data = await response.json()
|
||||
return NextResponse.json(data)
|
||||
} catch (error) {
|
||||
console.error('Maximizer proxy error:', error)
|
||||
return NextResponse.json({ error: 'Failed to connect to Maximizer backend' }, { status: 503 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest, { params }: { params: { path?: string[] } }) {
|
||||
return proxy(request, params, 'GET')
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest, { params }: { params: { path?: string[] } }) {
|
||||
return proxy(request, params, 'POST')
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest, { params }: { params: { path?: string[] } }) {
|
||||
return proxy(request, params, 'DELETE')
|
||||
}
|
||||
151
admin-compliance/app/sdk/compliance-optimizer/[id]/page.tsx
Normal file
151
admin-compliance/app/sdk/compliance-optimizer/[id]/page.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useParams } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'
|
||||
import { DimensionZoneTable } from '@/components/sdk/compliance-optimizer/DimensionZoneTable'
|
||||
import { ConfigComparison } from '@/components/sdk/compliance-optimizer/ConfigComparison'
|
||||
import { OptimizationScoreCard } from '@/components/sdk/compliance-optimizer/OptimizationScoreCard'
|
||||
|
||||
export default function OptimizationDetailPage() {
|
||||
const params = useParams()
|
||||
const id = params?.id as string
|
||||
const [data, setData] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeVariant, setActiveVariant] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
fetch(`/api/sdk/v1/maximizer/optimizations/${id}`)
|
||||
.then((r) => r.ok ? r.json() : null)
|
||||
.then(setData)
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
if (loading) return <div className="max-w-6xl mx-auto p-6 text-gray-500">Laden...</div>
|
||||
if (!data) return <div className="max-w-6xl mx-auto p-6 text-red-600">Optimierung nicht gefunden.</div>
|
||||
|
||||
const maxSafe = data.max_safe_config
|
||||
const variants = data.variants || []
|
||||
const zones = data.zone_map || {}
|
||||
const controls = data.original_evaluation?.required_controls || []
|
||||
const patterns = data.original_evaluation?.required_patterns || []
|
||||
const triggered = data.original_evaluation?.triggered_rules || []
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Link href="/sdk/compliance-optimizer" className="text-sm text-blue-600 hover:underline">← Zurueck</Link>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mt-1">{data.title || 'Optimierung'}</h1>
|
||||
<p className="text-sm text-gray-500">{new Date(data.created_at).toLocaleString('de-DE')} — v{data.constraint_version}</p>
|
||||
</div>
|
||||
<ZoneBadge zone={data.is_compliant ? 'SAFE' : 'FORBIDDEN'} />
|
||||
</div>
|
||||
|
||||
{/* 3-Zone Summary */}
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-3">3-Zonen-Analyse</h2>
|
||||
<DimensionZoneTable zoneMap={zones} />
|
||||
</div>
|
||||
|
||||
{/* Optimization Result */}
|
||||
{maxSafe && (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-3">Optimierte Konfiguration</h2>
|
||||
<OptimizationScoreCard
|
||||
safetyScore={maxSafe.safety_score}
|
||||
utilityScore={maxSafe.utility_score}
|
||||
compositeScore={maxSafe.composite_score}
|
||||
deltaCount={maxSafe.delta_count}
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<ConfigComparison deltas={maxSafe.deltas || []} />
|
||||
</div>
|
||||
{maxSafe.rationale && (
|
||||
<p className="mt-3 text-sm text-gray-600 italic">{maxSafe.rationale}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alternative Variants */}
|
||||
{variants.length > 1 && (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-3">Alternative Varianten ({variants.length})</h2>
|
||||
<div className="flex gap-2 mb-3">
|
||||
{variants.map((v: any, i: number) => (
|
||||
<button key={i} onClick={() => setActiveVariant(i)}
|
||||
className={`px-3 py-1 text-sm rounded ${i === activeVariant ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>
|
||||
Variante {i + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{variants[activeVariant] && (
|
||||
<div>
|
||||
<div className="flex items-center gap-4 mb-2 text-sm text-gray-600">
|
||||
<span>Sicherheit: {variants[activeVariant].safety_score}</span>
|
||||
<span>Nutzen: {variants[activeVariant].utility_score}</span>
|
||||
<span>Gesamt: {Math.round(variants[activeVariant].composite_score)}</span>
|
||||
</div>
|
||||
<ConfigComparison deltas={variants[activeVariant].deltas || []} />
|
||||
{variants[activeVariant].rationale && (
|
||||
<p className="mt-2 text-sm text-gray-500 italic">{variants[activeVariant].rationale}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Required Controls & Patterns */}
|
||||
{(controls.length > 0 || patterns.length > 0) && (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-3">Erforderliche Massnahmen</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{controls.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Controls</h4>
|
||||
<ul className="space-y-1">
|
||||
{controls.map((c: string, i: number) => (
|
||||
<li key={i} className="text-sm text-gray-600 flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-blue-500 rounded-full" />{c}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{patterns.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Architektur-Patterns</h4>
|
||||
<ul className="space-y-1">
|
||||
{patterns.map((p: string, i: number) => (
|
||||
<li key={i} className="text-sm text-gray-600 flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-purple-500 rounded-full" />{p}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Triggered Rules (Audit Trail) */}
|
||||
{triggered.length > 0 && (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-3">Ausgeloeste Regeln ({triggered.length})</h2>
|
||||
<div className="space-y-2">
|
||||
{triggered.map((r: any, i: number) => (
|
||||
<div key={i} className="flex items-start gap-3 text-sm border-b border-gray-100 pb-2">
|
||||
<span className="font-mono text-xs text-gray-400 min-w-[120px]">{r.rule_id}</span>
|
||||
<span className="text-gray-700">{r.title}</span>
|
||||
<span className="text-gray-400 ml-auto text-xs">{r.article_ref}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
163
admin-compliance/app/sdk/compliance-optimizer/new/page.tsx
Normal file
163
admin-compliance/app/sdk/compliance-optimizer/new/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'
|
||||
|
||||
interface DimensionField {
|
||||
key: string
|
||||
label: string
|
||||
options: { value: string; label: string }[]
|
||||
type?: 'select' | 'toggle'
|
||||
}
|
||||
|
||||
const DIMENSIONS: DimensionField[] = [
|
||||
{ key: 'automation_level', label: 'Automatisierungsgrad', options: [
|
||||
{ value: 'none', label: 'Keine' }, { value: 'assistive', label: 'Assistierend' },
|
||||
{ value: 'partial', label: 'Teilautomatisiert' }, { value: 'full', label: 'Vollautomatisiert' },
|
||||
]},
|
||||
{ key: 'decision_binding', label: 'Entscheidungsbindung', options: [
|
||||
{ value: 'non_binding', label: 'Unverbindlich' }, { value: 'human_review_required', label: 'Mensch entscheidet' },
|
||||
{ value: 'fully_binding', label: 'Vollstaendig bindend' },
|
||||
]},
|
||||
{ key: 'decision_impact', label: 'Entscheidungswirkung', options: [
|
||||
{ value: 'low', label: 'Niedrig' }, { value: 'medium', label: 'Mittel' }, { value: 'high', label: 'Hoch' },
|
||||
]},
|
||||
{ key: 'domain', label: 'Branche', options: [
|
||||
{ value: 'hr', label: 'HR / Personal' }, { value: 'finance', label: 'Finanzen' },
|
||||
{ value: 'education', label: 'Bildung' }, { value: 'health', label: 'Gesundheit' },
|
||||
{ value: 'marketing', label: 'Marketing' }, { value: 'general', label: 'Allgemein' },
|
||||
]},
|
||||
{ key: 'data_type', label: 'Datensensitivitaet', options: [
|
||||
{ value: 'non_personal', label: 'Keine personenbezogenen' }, { value: 'personal', label: 'Personenbezogen' },
|
||||
{ value: 'sensitive', label: 'Besondere Kategorien (Art. 9)' }, { value: 'biometric', label: 'Biometrisch' },
|
||||
]},
|
||||
{ key: 'human_in_loop', label: 'Menschliche Kontrolle', options: [
|
||||
{ value: 'required', label: 'Erforderlich' }, { value: 'optional', label: 'Optional' }, { value: 'none', label: 'Keine' },
|
||||
]},
|
||||
{ key: 'explainability', label: 'Erklaerbarkeit', options: [
|
||||
{ value: 'high', label: 'Hoch' }, { value: 'basic', label: 'Basis' }, { value: 'none', label: 'Keine' },
|
||||
]},
|
||||
{ key: 'risk_classification', label: 'Risikoklasse (AI Act)', options: [
|
||||
{ value: 'minimal', label: 'Minimal' }, { value: 'limited', label: 'Begrenzt' },
|
||||
{ value: 'high', label: 'Hoch' }, { value: 'prohibited', label: 'Verboten' },
|
||||
]},
|
||||
{ key: 'legal_basis', label: 'Rechtsgrundlage (DSGVO)', options: [
|
||||
{ value: 'consent', label: 'Einwilligung' }, { value: 'contract', label: 'Vertrag' },
|
||||
{ value: 'legal_obligation', label: 'Rechtl. Verpflichtung' },
|
||||
{ value: 'legitimate_interest', label: 'Berechtigtes Interesse' },
|
||||
{ value: 'public_interest', label: 'Oeffentl. Interesse' },
|
||||
]},
|
||||
{ key: 'model_type', label: 'Modelltyp', options: [
|
||||
{ value: 'rule_based', label: 'Regelbasiert' }, { value: 'statistical', label: 'Statistisch / ML' },
|
||||
{ value: 'blackbox_llm', label: 'Blackbox / LLM' },
|
||||
]},
|
||||
{ key: 'deployment_scope', label: 'Einsatzbereich', options: [
|
||||
{ value: 'internal', label: 'Intern' }, { value: 'external', label: 'Extern (Kunden)' },
|
||||
{ value: 'public', label: 'Oeffentlich' },
|
||||
]},
|
||||
]
|
||||
|
||||
const TOGGLE_DIMENSIONS = [
|
||||
{ key: 'transparency_required', label: 'Transparenzpflicht' },
|
||||
{ key: 'logging_required', label: 'Protokollierungspflicht' },
|
||||
]
|
||||
|
||||
export default function NewOptimizationPage() {
|
||||
const router = useRouter()
|
||||
const [title, setTitle] = useState('')
|
||||
const [config, setConfig] = useState<Record<string, string>>({
|
||||
automation_level: 'assistive', decision_binding: 'non_binding', decision_impact: 'low',
|
||||
domain: 'general', data_type: 'non_personal', human_in_loop: 'required',
|
||||
explainability: 'basic', risk_classification: 'minimal', legal_basis: 'contract',
|
||||
transparency_required: 'false', logging_required: 'false',
|
||||
model_type: 'rule_based', deployment_scope: 'internal',
|
||||
})
|
||||
const [preview, setPreview] = useState<Record<string, { zone: string }> | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
async function handlePreview() {
|
||||
try {
|
||||
const body = { ...config, transparency_required: config.transparency_required === 'true', logging_required: config.logging_required === 'true' }
|
||||
const res = await fetch('/api/sdk/v1/maximizer/evaluate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setPreview(data.zone_map || {})
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const body = {
|
||||
config: { ...config, transparency_required: config.transparency_required === 'true', logging_required: config.logging_required === 'true' },
|
||||
title: title || 'Optimierung ' + new Date().toLocaleDateString('de-DE'),
|
||||
}
|
||||
const res = await fetch('/api/sdk/v1/maximizer/optimize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
router.push(`/sdk/compliance-optimizer/${data.id}`)
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-1">Neue Optimierung</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">Konfigurieren Sie Ihren KI-Use-Case und finden Sie den maximalen regulatorischen Spielraum.</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
|
||||
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="z.B. HR Bewerber-Ranking"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{DIMENSIONS.map((dim) => (
|
||||
<div key={dim.key}>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{dim.label}
|
||||
{preview && preview[dim.key] && (
|
||||
<span className="ml-2"><ZoneBadge zone={preview[dim.key].zone as 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'} /></span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
value={config[dim.key]}
|
||||
onChange={(e) => { setConfig({ ...config, [dim.key]: e.target.value }); setPreview(null) }}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm bg-white"
|
||||
>
|
||||
{dim.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{TOGGLE_DIMENSIONS.map((dim) => (
|
||||
<div key={dim.key} className="flex items-center gap-3">
|
||||
<input type="checkbox" checked={config[dim.key] === 'true'}
|
||||
onChange={(e) => { setConfig({ ...config, [dim.key]: String(e.target.checked) }); setPreview(null) }}
|
||||
className="h-4 w-4 rounded border-gray-300 text-blue-600" />
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
{dim.label}
|
||||
{preview && preview[dim.key] && (
|
||||
<span className="ml-2"><ZoneBadge zone={preview[dim.key].zone as 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'} /></span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button onClick={handlePreview} className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 text-sm">
|
||||
Vorschau (3-Zonen-Check)
|
||||
</button>
|
||||
<button onClick={handleSubmit} disabled={submitting}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
|
||||
{submitting ? 'Optimiere...' : 'Optimieren'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
124
admin-compliance/app/sdk/compliance-optimizer/page.tsx
Normal file
124
admin-compliance/app/sdk/compliance-optimizer/page.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'
|
||||
|
||||
interface OptimizationSummary {
|
||||
id: string
|
||||
title: string
|
||||
is_compliant: boolean
|
||||
constraint_version: string
|
||||
created_at: string
|
||||
zone_map: Record<string, { zone: 'FORBIDDEN' | 'RESTRICTED' | 'SAFE' }>
|
||||
max_safe_config?: { safety_score: number; utility_score: number }
|
||||
}
|
||||
|
||||
function countZones(zoneMap: Record<string, { zone: string }>) {
|
||||
let forbidden = 0, restricted = 0, safe = 0
|
||||
for (const v of Object.values(zoneMap || {})) {
|
||||
if (v.zone === 'FORBIDDEN') forbidden++
|
||||
else if (v.zone === 'RESTRICTED') restricted++
|
||||
else safe++
|
||||
}
|
||||
return { forbidden, restricted, safe }
|
||||
}
|
||||
|
||||
export default function ComplianceOptimizerPage() {
|
||||
const [optimizations, setOptimizations] = useState<OptimizationSummary[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [total, setTotal] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
fetchOptimizations()
|
||||
}, [])
|
||||
|
||||
async function fetchOptimizations() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const res = await fetch('/api/sdk/v1/maximizer/optimizations?limit=20')
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setOptimizations(data.optimizations || [])
|
||||
setTotal(data.total || 0)
|
||||
}
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Compliance Optimizer</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Regulatorischen Spielraum maximieren — KI-Use-Cases optimal konfigurieren
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/sdk/compliance-optimizer/new"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium"
|
||||
>
|
||||
Neue Optimierung
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-12 text-gray-500">Laden...</div>
|
||||
) : optimizations.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<p className="text-gray-600 mb-2">Noch keine Optimierungen durchgefuehrt.</p>
|
||||
<Link href="/sdk/compliance-optimizer/new" className="text-blue-600 hover:underline text-sm">
|
||||
Erste Optimierung starten
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Titel</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Zonen</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Datum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{optimizations.map((o) => {
|
||||
const zones = countZones(o.zone_map)
|
||||
return (
|
||||
<tr key={o.id} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3">
|
||||
<Link href={`/sdk/compliance-optimizer/${o.id}`} className="text-blue-600 hover:underline font-medium text-sm">
|
||||
{o.title || 'Ohne Titel'}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<ZoneBadge zone={o.is_compliant ? 'SAFE' : 'FORBIDDEN'} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">
|
||||
{zones.forbidden > 0 && <span className="text-red-600 mr-2">{zones.forbidden} verboten</span>}
|
||||
{zones.restricted > 0 && <span className="text-yellow-600 mr-2">{zones.restricted} eingeschraenkt</span>}
|
||||
<span className="text-green-600">{zones.safe} erlaubt</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">
|
||||
{new Date(o.created_at).toLocaleDateString('de-DE')}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{total > 20 && (
|
||||
<div className="px-4 py-3 bg-gray-50 text-sm text-gray-500">
|
||||
{total} Optimierungen insgesamt
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -53,6 +53,7 @@ export function SidebarModuleList({ collapsed, projectId, pendingCRCount }: Side
|
||||
<AdditionalModuleItem href="/sdk/use-cases" icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>} label="Use Cases" isActive={pathname?.startsWith('/sdk/use-cases') ?? false} collapsed={collapsed} projectId={projectId} />
|
||||
<AdditionalModuleItem href="/sdk/ai-act" icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>} label="AI Act" isActive={pathname?.startsWith('/sdk/ai-act') ?? false} collapsed={collapsed} projectId={projectId} />
|
||||
<AdditionalModuleItem href="/sdk/ai-registration" icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>} label="EU Registrierung" isActive={pathname?.startsWith('/sdk/ai-registration') ?? false} collapsed={collapsed} projectId={projectId} />
|
||||
<AdditionalModuleItem href="/sdk/compliance-optimizer" icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>} label="Compliance Optimizer" isActive={pathname?.startsWith('/sdk/compliance-optimizer') ?? false} collapsed={collapsed} projectId={projectId} />
|
||||
</div>
|
||||
|
||||
{/* Payment / Terminal */}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client'
|
||||
|
||||
interface DimensionDelta {
|
||||
dimension: string
|
||||
from: string
|
||||
to: string
|
||||
impact: string
|
||||
}
|
||||
|
||||
const DIMENSION_LABELS: Record<string, string> = {
|
||||
automation_level: 'Automatisierungsgrad',
|
||||
decision_binding: 'Entscheidungsbindung',
|
||||
decision_impact: 'Entscheidungswirkung',
|
||||
domain: 'Branche',
|
||||
data_type: 'Datensensitivitaet',
|
||||
human_in_loop: 'Menschliche Kontrolle',
|
||||
explainability: 'Erklaerbarkeit',
|
||||
risk_classification: 'Risikoklasse',
|
||||
legal_basis: 'Rechtsgrundlage',
|
||||
transparency_required: 'Transparenzpflicht',
|
||||
logging_required: 'Protokollierung',
|
||||
model_type: 'Modelltyp',
|
||||
deployment_scope: 'Einsatzbereich',
|
||||
}
|
||||
|
||||
export function ConfigComparison({ deltas }: { deltas: DimensionDelta[] }) {
|
||||
if (deltas.length === 0) {
|
||||
return (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 text-green-700 text-sm">
|
||||
Keine Aenderungen noetig — Ihre Konfiguration ist bereits konform.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-gray-700">Empfohlene Aenderungen ({deltas.length})</h4>
|
||||
<div className="space-y-1">
|
||||
{deltas.map((d, i) => (
|
||||
<div key={i} className="flex items-center gap-2 bg-blue-50 border border-blue-200 rounded px-3 py-2 text-sm">
|
||||
<span className="font-medium text-gray-800 min-w-[160px]">
|
||||
{DIMENSION_LABELS[d.dimension] || d.dimension}
|
||||
</span>
|
||||
<span className="text-red-600 font-mono line-through">{d.from}</span>
|
||||
<span className="text-gray-400">→</span>
|
||||
<span className="text-green-700 font-mono font-bold">{d.to}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client'
|
||||
|
||||
import { ZoneBadge } from './ZoneBadge'
|
||||
|
||||
interface ZoneInfo {
|
||||
dimension: string
|
||||
current_value: string
|
||||
zone: 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'
|
||||
allowed_values?: string[]
|
||||
forbidden_values?: string[]
|
||||
safeguards?: string[]
|
||||
reason: string
|
||||
obligation_refs: string[]
|
||||
}
|
||||
|
||||
const DIMENSION_LABELS: Record<string, string> = {
|
||||
automation_level: 'Automatisierungsgrad',
|
||||
decision_binding: 'Entscheidungsbindung',
|
||||
decision_impact: 'Entscheidungswirkung',
|
||||
domain: 'Branche',
|
||||
data_type: 'Datensensitivitaet',
|
||||
human_in_loop: 'Menschliche Kontrolle',
|
||||
explainability: 'Erklaerbarkeit',
|
||||
risk_classification: 'Risikoklasse',
|
||||
legal_basis: 'Rechtsgrundlage',
|
||||
transparency_required: 'Transparenzpflicht',
|
||||
logging_required: 'Protokollierung',
|
||||
model_type: 'Modelltyp',
|
||||
deployment_scope: 'Einsatzbereich',
|
||||
}
|
||||
|
||||
export function DimensionZoneTable({ zoneMap }: { zoneMap: Record<string, ZoneInfo> }) {
|
||||
const dimensions = Object.entries(zoneMap).sort(([, a], [, b]) => {
|
||||
const order = { FORBIDDEN: 0, RESTRICTED: 1, SAFE: 2 }
|
||||
return (order[a.zone] ?? 2) - (order[b.zone] ?? 2)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Dimension</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Aktueller Wert</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Zone</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Regelgrund</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Rechtsgrundlage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{dimensions.map(([dim, info]) => (
|
||||
<tr key={dim} className={info.zone === 'FORBIDDEN' ? 'bg-red-50' : info.zone === 'RESTRICTED' ? 'bg-yellow-50' : ''}>
|
||||
<td className="px-4 py-2 text-sm font-medium text-gray-900">
|
||||
{DIMENSION_LABELS[dim] || dim}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-600 font-mono">
|
||||
{info.current_value}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<ZoneBadge zone={info.zone} />
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-600">
|
||||
{info.reason || '-'}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{info.obligation_refs?.join(', ') || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
|
||||
interface ScoreCardProps {
|
||||
safetyScore: number
|
||||
utilityScore: number
|
||||
compositeScore: number
|
||||
deltaCount: number
|
||||
}
|
||||
|
||||
function ScoreGauge({ value, label, color }: { value: number; label: string; color: string }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="relative w-16 h-16">
|
||||
<svg viewBox="0 0 36 36" className="w-16 h-16">
|
||||
<path
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
fill="none" stroke="#e5e7eb" strokeWidth="3"
|
||||
/>
|
||||
<path
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
fill="none" stroke={color} strokeWidth="3"
|
||||
strokeDasharray={`${value}, 100`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<span className="absolute inset-0 flex items-center justify-center text-sm font-bold text-gray-800">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function OptimizationScoreCard({ safetyScore, utilityScore, compositeScore, deltaCount }: ScoreCardProps) {
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-3">Bewertung der optimierten Konfiguration</h4>
|
||||
<div className="flex items-center gap-6">
|
||||
<ScoreGauge value={safetyScore} label="Sicherheit" color="#22c55e" />
|
||||
<ScoreGauge value={utilityScore} label="Business-Nutzen" color="#3b82f6" />
|
||||
<ScoreGauge value={Math.round(compositeScore)} label="Gesamt" color="#8b5cf6" />
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-gray-800">{deltaCount}</span>
|
||||
<span className="text-xs text-gray-500">Aenderungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
'use client'
|
||||
|
||||
const ZONE_STYLES = {
|
||||
FORBIDDEN: { bg: 'bg-red-100', text: 'text-red-700', border: 'border-red-300', label: 'Verboten' },
|
||||
RESTRICTED: { bg: 'bg-yellow-100', text: 'text-yellow-700', border: 'border-yellow-300', label: 'Eingeschraenkt' },
|
||||
SAFE: { bg: 'bg-green-100', text: 'text-green-700', border: 'border-green-300', label: 'Erlaubt' },
|
||||
}
|
||||
|
||||
export function ZoneBadge({ zone }: { zone: 'FORBIDDEN' | 'RESTRICTED' | 'SAFE' }) {
|
||||
const style = ZONE_STYLES[zone] || ZONE_STYLES.SAFE
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${style.bg} ${style.text} ${style.border}`}>
|
||||
{style.label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user