refactor: split control library into components, add generator UI

- Extract ControlForm, ControlDetail, GeneratorModal, helpers into
  separate component files (max ~470 lines each, was 1210)
- Add Collection selector in Generator modal
- Add Job History view in Generator modal
- Add Review Queue button with counter badge
- Add review mode navigation (prev/next through review items)
- Add vitest tests for helpers (getDomain, constants, options)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-compliance/app/sdk/control-library/__tests__/helpers.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { getDomain, BACKEND_URL, EMPTY_CONTROL, DOMAIN_OPTIONS, COLLECTION_OPTIONS } from '../components/helpers'
+
+describe('getDomain', () => {
+  it('extracts domain from control_id', () => {
+    expect(getDomain('AUTH-001')).toBe('AUTH')
+    expect(getDomain('NET-042')).toBe('NET')
+    expect(getDomain('CRYPT-003')).toBe('CRYPT')
+  })
+
+  it('returns empty string for invalid control_id', () => {
+    expect(getDomain('')).toBe('')
+    expect(getDomain('NODASH')).toBe('NODASH')
+  })
+})
+
+describe('BACKEND_URL', () => {
+  it('points to canonical API proxy', () => {
+    expect(BACKEND_URL).toBe('/api/sdk/v1/canonical')
+  })
+})
+
+describe('EMPTY_CONTROL', () => {
+  it('has required fields with default values', () => {
+    expect(EMPTY_CONTROL.framework_id).toBe('bp_security_v1')
+    expect(EMPTY_CONTROL.severity).toBe('medium')
+    expect(EMPTY_CONTROL.release_state).toBe('draft')
+    expect(EMPTY_CONTROL.tags).toEqual([])
+    expect(EMPTY_CONTROL.requirements).toEqual([''])
+    expect(EMPTY_CONTROL.test_procedure).toEqual([''])
+    expect(EMPTY_CONTROL.evidence).toEqual([{ type: '', description: '' }])
+    expect(EMPTY_CONTROL.open_anchors).toEqual([{ framework: '', ref: '', url: '' }])
+  })
+})
+
+describe('DOMAIN_OPTIONS', () => {
+  it('contains expected domains', () => {
+    const values = DOMAIN_OPTIONS.map(d => d.value)
+    expect(values).toContain('AUTH')
+    expect(values).toContain('NET')
+    expect(values).toContain('CRYPT')
+    expect(values).toContain('AI')
+    expect(values).toContain('COMP')
+    expect(values.length).toBe(10)
+  })
+})
+
+describe('COLLECTION_OPTIONS', () => {
+  it('contains expected collections', () => {
+    const values = COLLECTION_OPTIONS.map(c => c.value)
+    expect(values).toContain('bp_compliance_ce')
+    expect(values).toContain('bp_compliance_gesetze')
+    expect(values).toContain('bp_compliance_datenschutz')
+    expect(values.length).toBe(6)
+  })
+})

admin-compliance/app/sdk/control-library/components/ControlDetail.tsx

@@ -0,0 +1,270 @@
+'use client'
+
+import {
+  ArrowLeft, ExternalLink, BookOpen, Scale, FileText,
+  Eye, CheckCircle2, Trash2, Pencil, Clock,
+  ChevronLeft, SkipForward,
+} from 'lucide-react'
+import { CanonicalControl, EFFORT_LABELS, SeverityBadge, StateBadge, LicenseRuleBadge } from './helpers'
+
+interface ControlDetailProps {
+  ctrl: CanonicalControl
+  onBack: () => void
+  onEdit: () => void
+  onDelete: (controlId: string) => void
+  onReview: (controlId: string, action: string) => void
+  // Review mode navigation
+  reviewMode?: boolean
+  reviewIndex?: number
+  reviewTotal?: number
+  onReviewPrev?: () => void
+  onReviewNext?: () => void
+}
+
+export function ControlDetail({
+  ctrl,
+  onBack,
+  onEdit,
+  onDelete,
+  onReview,
+  reviewMode,
+  reviewIndex = 0,
+  reviewTotal = 0,
+  onReviewPrev,
+  onReviewNext,
+}: ControlDetailProps) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="border-b border-gray-200 bg-white px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button onClick={onBack} className="text-gray-400 hover:text-gray-600">
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-mono text-purple-600 bg-purple-50 px-2 py-0.5 rounded">{ctrl.control_id}</span>
+              <SeverityBadge severity={ctrl.severity} />
+              <StateBadge state={ctrl.release_state} />
+              <LicenseRuleBadge rule={ctrl.license_rule} />
+            </div>
+            <h2 className="text-lg font-semibold text-gray-900 mt-1">{ctrl.title}</h2>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {reviewMode && (
+            <div className="flex items-center gap-1 mr-3">
+              <button onClick={onReviewPrev} disabled={reviewIndex === 0} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+              <span className="text-xs text-gray-500 font-medium">{reviewIndex + 1} / {reviewTotal}</span>
+              <button onClick={onReviewNext} disabled={reviewIndex >= reviewTotal - 1} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
+                <SkipForward className="w-4 h-4" />
+              </button>
+            </div>
+          )}
+          <button onClick={onEdit} className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
+            <Pencil className="w-3.5 h-3.5 inline mr-1" />Bearbeiten
+          </button>
+          <button onClick={() => onDelete(ctrl.control_id)} className="px-3 py-1.5 text-sm text-red-600 border border-red-300 rounded-lg hover:bg-red-50">
+            <Trash2 className="w-3.5 h-3.5 inline mr-1" />Loeschen
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6 max-w-4xl mx-auto w-full space-y-6">
+        {/* Objective */}
+        <section>
+          <h3 className="text-sm font-semibold text-gray-900 mb-2">Ziel</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{ctrl.objective}</p>
+        </section>
+
+        {/* Rationale */}
+        <section>
+          <h3 className="text-sm font-semibold text-gray-900 mb-2">Begruendung</h3>
+          <p className="text-sm text-gray-700 leading-relaxed">{ctrl.rationale}</p>
+        </section>
+
+        {/* Source Info (Rule 1 + 2) */}
+        {ctrl.source_citation && (
+          <section className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <Scale className="w-4 h-4 text-blue-600" />
+              <h3 className="text-sm font-semibold text-blue-900">Quellenangabe</h3>
+            </div>
+            <div className="text-xs text-blue-700 space-y-1">
+              {Object.entries(ctrl.source_citation).map(([k, v]) => (
+                <p key={k}><span className="font-medium">{k}:</span> {v}</p>
+              ))}
+            </div>
+            {ctrl.source_original_text && (
+              <details className="mt-3">
+                <summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Originaltext anzeigen</summary>
+                <p className="text-xs text-gray-600 mt-2 p-2 bg-white rounded border border-blue-100 leading-relaxed max-h-40 overflow-y-auto">
+                  {ctrl.source_original_text}
+                </p>
+              </details>
+            )}
+          </section>
+        )}
+
+        {/* Scope */}
+        {(ctrl.scope.platforms?.length || ctrl.scope.components?.length || ctrl.scope.data_classes?.length) ? (
+          <section>
+            <h3 className="text-sm font-semibold text-gray-900 mb-2">Geltungsbereich</h3>
+            <div className="grid grid-cols-3 gap-4 text-xs">
+              {ctrl.scope.platforms?.length ? (
+                <div><span className="text-gray-500">Plattformen:</span> <span className="text-gray-700">{ctrl.scope.platforms.join(', ')}</span></div>
+              ) : null}
+              {ctrl.scope.components?.length ? (
+                <div><span className="text-gray-500">Komponenten:</span> <span className="text-gray-700">{ctrl.scope.components.join(', ')}</span></div>
+              ) : null}
+              {ctrl.scope.data_classes?.length ? (
+                <div><span className="text-gray-500">Datenklassen:</span> <span className="text-gray-700">{ctrl.scope.data_classes.join(', ')}</span></div>
+              ) : null}
+            </div>
+          </section>
+        ) : null}
+
+        {/* Requirements */}
+        {ctrl.requirements.length > 0 && (
+          <section>
+            <h3 className="text-sm font-semibold text-gray-900 mb-2">Anforderungen</h3>
+            <ol className="list-decimal list-inside space-y-1">
+              {ctrl.requirements.map((r, i) => (
+                <li key={i} className="text-sm text-gray-700">{r}</li>
+              ))}
+            </ol>
+          </section>
+        )}
+
+        {/* Test Procedure */}
+        {ctrl.test_procedure.length > 0 && (
+          <section>
+            <h3 className="text-sm font-semibold text-gray-900 mb-2">Pruefverfahren</h3>
+            <ol className="list-decimal list-inside space-y-1">
+              {ctrl.test_procedure.map((s, i) => (
+                <li key={i} className="text-sm text-gray-700">{s}</li>
+              ))}
+            </ol>
+          </section>
+        )}
+
+        {/* Evidence */}
+        {ctrl.evidence.length > 0 && (
+          <section>
+            <h3 className="text-sm font-semibold text-gray-900 mb-2">Nachweise</h3>
+            <div className="space-y-2">
+              {ctrl.evidence.map((ev, i) => (
+                <div key={i} className="flex items-start gap-2 text-sm text-gray-700">
+                  <FileText className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
+                  <div><span className="font-medium">{ev.type}:</span> {ev.description}</div>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Meta */}
+        <section className="grid grid-cols-3 gap-4 text-xs text-gray-500">
+          {ctrl.risk_score !== null && <div>Risiko-Score: <span className="text-gray-700 font-medium">{ctrl.risk_score}</span></div>}
+          {ctrl.implementation_effort && <div>Aufwand: <span className="text-gray-700 font-medium">{EFFORT_LABELS[ctrl.implementation_effort] || ctrl.implementation_effort}</span></div>}
+          {ctrl.tags.length > 0 && (
+            <div className="col-span-3 flex items-center gap-1 flex-wrap">
+              {ctrl.tags.map(t => (
+                <span key={t} className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{t}</span>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {/* Open Anchors */}
+        <section className="bg-green-50 border border-green-200 rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-3">
+            <BookOpen className="w-4 h-4 text-green-700" />
+            <h3 className="text-sm font-semibold text-green-900">Open-Source-Referenzen ({ctrl.open_anchors.length})</h3>
+          </div>
+          {ctrl.open_anchors.length > 0 ? (
+            <div className="space-y-2">
+              {ctrl.open_anchors.map((anchor, i) => (
+                <div key={i} className="flex items-center gap-2 text-sm">
+                  <ExternalLink className="w-3.5 h-3.5 text-green-600 flex-shrink-0" />
+                  <span className="font-medium text-green-800">{anchor.framework}</span>
+                  <span className="text-green-700">{anchor.ref}</span>
+                  {anchor.url && (
+                    <a href={anchor.url} target="_blank" rel="noopener noreferrer" className="text-green-600 hover:text-green-800 underline text-xs ml-auto">
+                      Link
+                    </a>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-green-600">Keine Referenzen vorhanden.</p>
+          )}
+        </section>
+
+        {/* Generation Metadata (internal) */}
+        {ctrl.generation_metadata && (
+          <section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <Clock className="w-4 h-4 text-gray-500" />
+              <h3 className="text-sm font-semibold text-gray-700">Generierungsdetails (intern)</h3>
+            </div>
+            <div className="text-xs text-gray-600 space-y-1">
+              <p>Pfad: {String(ctrl.generation_metadata.processing_path || '-')}</p>
+              {ctrl.generation_metadata.similarity_status && (
+                <p className="text-red-600">Similarity: {String(ctrl.generation_metadata.similarity_status)}</p>
+              )}
+              {Array.isArray(ctrl.generation_metadata.similar_controls) && (
+                <div>
+                  <p className="font-medium">Aehnliche Controls:</p>
+                  {(ctrl.generation_metadata.similar_controls as Array<Record<string, unknown>>).map((s, i) => (
+                    <p key={i} className="ml-2">{String(s.control_id)} — {String(s.title)} ({String(s.similarity)})</p>
+                  ))}
+                </div>
+              )}
+            </div>
+          </section>
+        )}
+
+        {/* Review Actions */}
+        {['needs_review', 'too_close', 'duplicate'].includes(ctrl.release_state) && (
+          <section className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <Eye className="w-4 h-4 text-yellow-700" />
+              <h3 className="text-sm font-semibold text-yellow-900">Review erforderlich</h3>
+              {reviewMode && (
+                <span className="text-xs text-yellow-600 ml-auto">Review-Modus aktiv</span>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => onReview(ctrl.control_id, 'approve')}
+                className="px-3 py-1.5 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700"
+              >
+                <CheckCircle2 className="w-3.5 h-3.5 inline mr-1" />
+                Akzeptieren
+              </button>
+              <button
+                onClick={() => onReview(ctrl.control_id, 'reject')}
+                className="px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700"
+              >
+                <Trash2 className="w-3.5 h-3.5 inline mr-1" />
+                Ablehnen
+              </button>
+              <button
+                onClick={onEdit}
+                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
+              >
+                <Pencil className="w-3.5 h-3.5 inline mr-1" />
+                Ueberarbeiten
+              </button>
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/control-library/components/ControlForm.tsx

@@ -0,0 +1,272 @@
+'use client'
+
+import { useState } from 'react'
+import { BookOpen, Trash2, Save, X } from 'lucide-react'
+import { EMPTY_CONTROL } from './helpers'
+
+export function ControlForm({
+  initial,
+  onSave,
+  onCancel,
+  saving,
+}: {
+  initial: typeof EMPTY_CONTROL
+  onSave: (data: typeof EMPTY_CONTROL) => void
+  onCancel: () => void
+  saving: boolean
+}) {
+  const [form, setForm] = useState(initial)
+  const [tagInput, setTagInput] = useState(initial.tags.join(', '))
+  const [platformInput, setPlatformInput] = useState((initial.scope.platforms || []).join(', '))
+  const [componentInput, setComponentInput] = useState((initial.scope.components || []).join(', '))
+  const [dataClassInput, setDataClassInput] = useState((initial.scope.data_classes || []).join(', '))
+
+  const handleSave = () => {
+    const data = {
+      ...form,
+      tags: tagInput.split(',').map(t => t.trim()).filter(Boolean),
+      scope: {
+        platforms: platformInput.split(',').map(t => t.trim()).filter(Boolean),
+        components: componentInput.split(',').map(t => t.trim()).filter(Boolean),
+        data_classes: dataClassInput.split(',').map(t => t.trim()).filter(Boolean),
+      },
+      requirements: form.requirements.filter(r => r.trim()),
+      test_procedure: form.test_procedure.filter(r => r.trim()),
+      evidence: form.evidence.filter(e => e.type.trim() || e.description.trim()),
+      open_anchors: form.open_anchors.filter(a => a.framework.trim() || a.ref.trim()),
+    }
+    onSave(data)
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-gray-900">
+          {initial.control_id ? `Control ${initial.control_id} bearbeiten` : 'Neues Control erstellen'}
+        </h2>
+        <div className="flex items-center gap-2">
+          <button onClick={onCancel} className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
+            <X className="w-4 h-4 inline mr-1" />Abbrechen
+          </button>
+          <button onClick={handleSave} disabled={saving} className="px-3 py-1.5 text-sm text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
+            <Save className="w-4 h-4 inline mr-1" />{saving ? 'Speichern...' : 'Speichern'}
+          </button>
+        </div>
+      </div>
+
+      {/* Basic fields */}
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Control-ID *</label>
+          <input
+            value={form.control_id}
+            onChange={e => setForm({ ...form, control_id: e.target.value.toUpperCase() })}
+            placeholder="AUTH-003"
+            disabled={!!initial.control_id}
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none disabled:bg-gray-100"
+          />
+          <p className="text-xs text-gray-400 mt-1">Format: DOMAIN-NNN (z.B. AUTH-003, NET-005)</p>
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Titel *</label>
+          <input
+            value={form.title}
+            onChange={e => setForm({ ...form, title: e.target.value })}
+            placeholder="Control-Titel"
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Schweregrad</label>
+          <select value={form.severity} onChange={e => setForm({ ...form, severity: e.target.value })} className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
+            <option value="low">Niedrig</option>
+            <option value="medium">Mittel</option>
+            <option value="high">Hoch</option>
+            <option value="critical">Kritisch</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Risiko-Score (0-10)</label>
+          <input
+            type="number" min="0" max="10" step="0.5"
+            value={form.risk_score ?? ''}
+            onChange={e => setForm({ ...form, risk_score: e.target.value ? parseFloat(e.target.value) : null })}
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Aufwand</label>
+          <select value={form.implementation_effort || ''} onChange={e => setForm({ ...form, implementation_effort: e.target.value || null })} className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
+            <option value="">-</option>
+            <option value="s">Klein (S)</option>
+            <option value="m">Mittel (M)</option>
+            <option value="l">Gross (L)</option>
+            <option value="xl">Sehr gross (XL)</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Objective & Rationale */}
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-1">Ziel *</label>
+        <textarea
+          value={form.objective}
+          onChange={e => setForm({ ...form, objective: e.target.value })}
+          rows={3}
+          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none"
+        />
+      </div>
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-1">Begruendung *</label>
+        <textarea
+          value={form.rationale}
+          onChange={e => setForm({ ...form, rationale: e.target.value })}
+          rows={3}
+          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none"
+        />
+      </div>
+
+      {/* Scope */}
+      <div className="grid grid-cols-3 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Plattformen (komma-getrennt)</label>
+          <input value={platformInput} onChange={e => setPlatformInput(e.target.value)} placeholder="web, mobile, api" className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Komponenten (komma-getrennt)</label>
+          <input value={componentInput} onChange={e => setComponentInput(e.target.value)} placeholder="auth-service, gateway" className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Datenklassen (komma-getrennt)</label>
+          <input value={dataClassInput} onChange={e => setDataClassInput(e.target.value)} placeholder="credentials, tokens" className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" />
+        </div>
+      </div>
+
+      {/* Requirements */}
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <label className="text-xs font-medium text-gray-600">Anforderungen</label>
+          <button onClick={() => setForm({ ...form, requirements: [...form.requirements, ''] })} className="text-xs text-purple-600 hover:text-purple-800">+ Hinzufuegen</button>
+        </div>
+        {form.requirements.map((req, i) => (
+          <div key={i} className="flex gap-2 mb-2">
+            <span className="text-xs text-gray-400 mt-2.5">{i + 1}.</span>
+            <input
+              value={req}
+              onChange={e => { const r = [...form.requirements]; r[i] = e.target.value; setForm({ ...form, requirements: r }) }}
+              className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg"
+            />
+            <button onClick={() => setForm({ ...form, requirements: form.requirements.filter((_, j) => j !== i) })} className="text-red-400 hover:text-red-600">
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Test Procedure */}
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <label className="text-xs font-medium text-gray-600">Pruefverfahren</label>
+          <button onClick={() => setForm({ ...form, test_procedure: [...form.test_procedure, ''] })} className="text-xs text-purple-600 hover:text-purple-800">+ Hinzufuegen</button>
+        </div>
+        {form.test_procedure.map((step, i) => (
+          <div key={i} className="flex gap-2 mb-2">
+            <span className="text-xs text-gray-400 mt-2.5">{i + 1}.</span>
+            <input
+              value={step}
+              onChange={e => { const t = [...form.test_procedure]; t[i] = e.target.value; setForm({ ...form, test_procedure: t }) }}
+              className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg"
+            />
+            <button onClick={() => setForm({ ...form, test_procedure: form.test_procedure.filter((_, j) => j !== i) })} className="text-red-400 hover:text-red-600">
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Evidence */}
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <label className="text-xs font-medium text-gray-600">Nachweisanforderungen</label>
+          <button onClick={() => setForm({ ...form, evidence: [...form.evidence, { type: '', description: '' }] })} className="text-xs text-purple-600 hover:text-purple-800">+ Hinzufuegen</button>
+        </div>
+        {form.evidence.map((ev, i) => (
+          <div key={i} className="flex gap-2 mb-2">
+            <input
+              value={ev.type}
+              onChange={e => { const evs = [...form.evidence]; evs[i] = { ...evs[i], type: e.target.value }; setForm({ ...form, evidence: evs }) }}
+              placeholder="Typ (z.B. config, test_result)"
+              className="w-32 px-3 py-2 text-sm border border-gray-300 rounded-lg"
+            />
+            <input
+              value={ev.description}
+              onChange={e => { const evs = [...form.evidence]; evs[i] = { ...evs[i], description: e.target.value }; setForm({ ...form, evidence: evs }) }}
+              placeholder="Beschreibung"
+              className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg"
+            />
+            <button onClick={() => setForm({ ...form, evidence: form.evidence.filter((_, j) => j !== i) })} className="text-red-400 hover:text-red-600">
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Open Anchors */}
+      <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <BookOpen className="w-4 h-4 text-green-700" />
+            <label className="text-xs font-semibold text-green-900">Open-Source-Referenzen *</label>
+          </div>
+          <button onClick={() => setForm({ ...form, open_anchors: [...form.open_anchors, { framework: '', ref: '', url: '' }] })} className="text-xs text-green-700 hover:text-green-900">+ Hinzufuegen</button>
+        </div>
+        <p className="text-xs text-green-600 mb-3">Jedes Control braucht mindestens eine offene Referenz (OWASP, NIST, ENISA, etc.)</p>
+        {form.open_anchors.map((anchor, i) => (
+          <div key={i} className="flex gap-2 mb-2">
+            <input
+              value={anchor.framework}
+              onChange={e => { const a = [...form.open_anchors]; a[i] = { ...a[i], framework: e.target.value }; setForm({ ...form, open_anchors: a }) }}
+              placeholder="Framework (z.B. OWASP ASVS)"
+              className="w-40 px-3 py-2 text-sm border border-green-200 rounded-lg bg-white"
+            />
+            <input
+              value={anchor.ref}
+              onChange={e => { const a = [...form.open_anchors]; a[i] = { ...a[i], ref: e.target.value }; setForm({ ...form, open_anchors: a }) }}
+              placeholder="Referenz (z.B. V2.8)"
+              className="w-48 px-3 py-2 text-sm border border-green-200 rounded-lg bg-white"
+            />
+            <input
+              value={anchor.url}
+              onChange={e => { const a = [...form.open_anchors]; a[i] = { ...a[i], url: e.target.value }; setForm({ ...form, open_anchors: a }) }}
+              placeholder="https://..."
+              className="flex-1 px-3 py-2 text-sm border border-green-200 rounded-lg bg-white"
+            />
+            <button onClick={() => setForm({ ...form, open_anchors: form.open_anchors.filter((_, j) => j !== i) })} className="text-red-400 hover:text-red-600">
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Tags & State */}
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Tags (komma-getrennt)</label>
+          <input value={tagInput} onChange={e => setTagInput(e.target.value)} placeholder="mfa, auth, iam" className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Status</label>
+          <select value={form.release_state} onChange={e => setForm({ ...form, release_state: e.target.value })} className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
+            <option value="draft">Draft</option>
+            <option value="review">Review</option>
+            <option value="approved">Approved</option>
+            <option value="deprecated">Deprecated</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/control-library/components/GeneratorModal.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { useState } from 'react'
+import { Zap, X, RefreshCw, History, CheckCircle2 } from 'lucide-react'
+import { BACKEND_URL, DOMAIN_OPTIONS, COLLECTION_OPTIONS } from './helpers'
+
+interface GeneratorModalProps {
+  onClose: () => void
+  onComplete: () => void
+}
+
+export function GeneratorModal({ onClose, onComplete }: GeneratorModalProps) {
+  const [generating, setGenerating] = useState(false)
+  const [genResult, setGenResult] = useState<Record<string, unknown> | null>(null)
+  const [genDomain, setGenDomain] = useState('')
+  const [genMaxControls, setGenMaxControls] = useState(10)
+  const [genDryRun, setGenDryRun] = useState(true)
+  const [genCollections, setGenCollections] = useState<string[]>([])
+  const [showJobHistory, setShowJobHistory] = useState(false)
+  const [jobHistory, setJobHistory] = useState<Array<Record<string, unknown>>>([])
+
+  const handleGenerate = async () => {
+    setGenerating(true)
+    setGenResult(null)
+    try {
+      const res = await fetch(`${BACKEND_URL}?endpoint=generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          domain: genDomain || null,
+          collections: genCollections.length > 0 ? genCollections : null,
+          max_controls: genMaxControls,
+          dry_run: genDryRun,
+          skip_web_search: false,
+        }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        setGenResult({ status: 'error', message: err.error || err.details || 'Fehler' })
+        return
+      }
+      const data = await res.json()
+      setGenResult(data)
+      if (!genDryRun) {
+        onComplete()
+      }
+    } catch {
+      setGenResult({ status: 'error', message: 'Netzwerkfehler' })
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  const loadJobHistory = async () => {
+    try {
+      const res = await fetch(`${BACKEND_URL}?endpoint=generate-jobs`)
+      if (res.ok) {
+        const data = await res.json()
+        setJobHistory(data.jobs || [])
+      }
+    } catch { /* ignore */ }
+  }
+
+  const toggleCollection = (col: string) => {
+    setGenCollections(prev =>
+      prev.includes(col) ? prev.filter(c => c !== col) : [...prev, col]
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Zap className="w-5 h-5 text-amber-600" />
+            <h2 className="text-lg font-semibold text-gray-900">Control Generator</h2>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => { setShowJobHistory(!showJobHistory); if (!showJobHistory) loadJobHistory() }}
+              className="text-gray-400 hover:text-gray-600"
+              title="Job-Verlauf"
+            >
+              <History className="w-5 h-5" />
+            </button>
+            <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {showJobHistory ? (
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium text-gray-700">Letzte Generierungs-Jobs</h3>
+            {jobHistory.length === 0 ? (
+              <p className="text-sm text-gray-400">Keine Jobs vorhanden.</p>
+            ) : (
+              <div className="space-y-2 max-h-80 overflow-y-auto">
+                {jobHistory.map((job, i) => (
+                  <div key={i} className="border border-gray-200 rounded-lg p-3 text-xs">
+                    <div className="flex items-center justify-between mb-1">
+                      <span className={`px-2 py-0.5 rounded font-medium ${
+                        job.status === 'completed' ? 'bg-green-100 text-green-700' :
+                        job.status === 'failed' ? 'bg-red-100 text-red-700' :
+                        job.status === 'running' ? 'bg-blue-100 text-blue-700' :
+                        'bg-gray-100 text-gray-600'
+                      }`}>
+                        {String(job.status)}
+                      </span>
+                      <span className="text-gray-400">{String(job.created_at || '').slice(0, 16)}</span>
+                    </div>
+                    <div className="grid grid-cols-3 gap-1 text-gray-500 mt-1">
+                      <span>Chunks: {String(job.total_chunks_scanned || 0)}</span>
+                      <span>Generiert: {String(job.controls_generated || 0)}</span>
+                      <span>Verifiziert: {String(job.controls_verified || 0)}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+            <button
+              onClick={() => setShowJobHistory(false)}
+              className="w-full py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
+            >
+              Zurueck zum Generator
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">Domain (optional)</label>
+              <select value={genDomain} onChange={e => setGenDomain(e.target.value)} className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
+                <option value="">Alle Domains</option>
+                {DOMAIN_OPTIONS.map(d => (
+                  <option key={d.value} value={d.value}>{d.label}</option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-2">Collections (optional)</label>
+              <div className="grid grid-cols-2 gap-1.5">
+                {COLLECTION_OPTIONS.map(col => (
+                  <label key={col.value} className="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={genCollections.includes(col.value)}
+                      onChange={() => toggleCollection(col.value)}
+                      className="rounded border-gray-300"
+                    />
+                    {col.label}
+                  </label>
+                ))}
+              </div>
+              {genCollections.length === 0 && (
+                <p className="text-xs text-gray-400 mt-1">Keine Auswahl = alle Collections</p>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">Max. Controls: {genMaxControls}</label>
+              <input
+                type="range" min="1" max="100" step="1"
+                value={genMaxControls}
+                onChange={e => setGenMaxControls(parseInt(e.target.value))}
+                className="w-full"
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="dryRun"
+                checked={genDryRun}
+                onChange={e => setGenDryRun(e.target.checked)}
+                className="rounded border-gray-300"
+              />
+              <label htmlFor="dryRun" className="text-sm text-gray-700">Dry Run (Vorschau ohne Speicherung)</label>
+            </div>
+
+            <button
+              onClick={handleGenerate}
+              disabled={generating}
+              className="w-full py-2 text-sm text-white bg-amber-600 rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-center gap-2"
+            >
+              {generating ? (
+                <><RefreshCw className="w-4 h-4 animate-spin" /> Generiere...</>
+              ) : (
+                <><Zap className="w-4 h-4" /> Generierung starten</>
+              )}
+            </button>
+
+            {/* Results */}
+            {genResult && (
+              <div className={`p-4 rounded-lg text-sm ${genResult.status === 'error' ? 'bg-red-50 text-red-800' : 'bg-green-50 text-green-800'}`}>
+                <div className="flex items-center gap-2 mb-1">
+                  {genResult.status !== 'error' && <CheckCircle2 className="w-4 h-4" />}
+                  <p className="font-medium">{String(genResult.message || genResult.status)}</p>
+                </div>
+                {genResult.status !== 'error' && (
+                  <div className="grid grid-cols-2 gap-1 text-xs mt-2">
+                    <span>Chunks gescannt: {String(genResult.total_chunks_scanned)}</span>
+                    <span>Controls generiert: {String(genResult.controls_generated)}</span>
+                    <span>Verifiziert: {String(genResult.controls_verified)}</span>
+                    <span>Review noetig: {String(genResult.controls_needs_review)}</span>
+                    <span>Zu aehnlich: {String(genResult.controls_too_close)}</span>
+                    <span>Duplikate: {String(genResult.controls_duplicates_found)}</span>
+                  </div>
+                )}
+                {Array.isArray(genResult.errors) && (genResult.errors as string[]).length > 0 && (
+                  <div className="mt-2 text-xs text-red-600">
+                    {(genResult.errors as string[]).slice(0, 3).map((e, i) => <p key={i}>{e}</p>)}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/control-library/components/helpers.tsx

@@ -0,0 +1,170 @@
+import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import React from 'react'
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface OpenAnchor {
+  framework: string
+  ref: string
+  url: string
+}
+
+export interface EvidenceItem {
+  type: string
+  description: string
+}
+
+export interface CanonicalControl {
+  id: string
+  framework_id: string
+  control_id: string
+  title: string
+  objective: string
+  rationale: string
+  scope: {
+    platforms?: string[]
+    components?: string[]
+    data_classes?: string[]
+  }
+  requirements: string[]
+  test_procedure: string[]
+  evidence: EvidenceItem[]
+  severity: string
+  risk_score: number | null
+  implementation_effort: string | null
+  evidence_confidence: number | null
+  open_anchors: OpenAnchor[]
+  release_state: string
+  tags: string[]
+  license_rule?: number | null
+  source_original_text?: string | null
+  source_citation?: Record<string, string> | null
+  customer_visible?: boolean
+  generation_metadata?: Record<string, unknown> | null
+  created_at: string
+  updated_at: string
+}
+
+export interface Framework {
+  id: string
+  framework_id: string
+  name: string
+  version: string
+  description: string
+  release_state: string
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+export const BACKEND_URL = '/api/sdk/v1/canonical'
+
+export const SEVERITY_CONFIG: Record<string, { bg: string; label: string; icon: React.ComponentType<{ className?: string }> }> = {
+  critical: { bg: 'bg-red-100 text-red-800', label: 'Kritisch', icon: AlertTriangle },
+  high: { bg: 'bg-orange-100 text-orange-800', label: 'Hoch', icon: AlertTriangle },
+  medium: { bg: 'bg-yellow-100 text-yellow-800', label: 'Mittel', icon: Info },
+  low: { bg: 'bg-green-100 text-green-800', label: 'Niedrig', icon: CheckCircle2 },
+}
+
+export const EFFORT_LABELS: Record<string, string> = {
+  s: 'Klein (S)',
+  m: 'Mittel (M)',
+  l: 'Gross (L)',
+  xl: 'Sehr gross (XL)',
+}
+
+export const EMPTY_CONTROL = {
+  framework_id: 'bp_security_v1',
+  control_id: '',
+  title: '',
+  objective: '',
+  rationale: '',
+  scope: { platforms: [] as string[], components: [] as string[], data_classes: [] as string[] },
+  requirements: [''],
+  test_procedure: [''],
+  evidence: [{ type: '', description: '' }],
+  severity: 'medium',
+  risk_score: null as number | null,
+  implementation_effort: 'm' as string | null,
+  open_anchors: [{ framework: '', ref: '', url: '' }],
+  release_state: 'draft',
+  tags: [] as string[],
+}
+
+export const DOMAIN_OPTIONS = [
+  { value: 'AUTH', label: 'AUTH — Authentifizierung' },
+  { value: 'CRYPT', label: 'CRYPT — Kryptographie' },
+  { value: 'NET', label: 'NET — Netzwerk' },
+  { value: 'DATA', label: 'DATA — Datenschutz' },
+  { value: 'LOG', label: 'LOG — Logging' },
+  { value: 'ACC', label: 'ACC — Zugriffskontrolle' },
+  { value: 'SEC', label: 'SEC — Sicherheit' },
+  { value: 'INC', label: 'INC — Incident Response' },
+  { value: 'AI', label: 'AI — Kuenstliche Intelligenz' },
+  { value: 'COMP', label: 'COMP — Compliance' },
+]
+
+export const COLLECTION_OPTIONS = [
+  { value: 'bp_compliance_ce', label: 'CE (OWASP, ENISA, BSI)' },
+  { value: 'bp_compliance_gesetze', label: 'Gesetze (EU, DE, BSI)' },
+  { value: 'bp_compliance_datenschutz', label: 'Datenschutz' },
+  { value: 'bp_compliance_recht', label: 'Recht' },
+  { value: 'bp_dsfa_corpus', label: 'DSFA Corpus' },
+  { value: 'bp_legal_templates', label: 'Legal Templates' },
+]
+
+// =============================================================================
+// BADGE COMPONENTS
+// =============================================================================
+
+export function SeverityBadge({ severity }: { severity: string }) {
+  const config = SEVERITY_CONFIG[severity] || SEVERITY_CONFIG.medium
+  const Icon = config.icon
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${config.bg}`}>
+      <Icon className="w-3 h-3" />
+      {config.label}
+    </span>
+  )
+}
+
+export function StateBadge({ state }: { state: string }) {
+  const config: Record<string, string> = {
+    draft: 'bg-gray-100 text-gray-600',
+    review: 'bg-blue-100 text-blue-700',
+    approved: 'bg-green-100 text-green-700',
+    deprecated: 'bg-red-100 text-red-600',
+    needs_review: 'bg-yellow-100 text-yellow-800',
+    too_close: 'bg-red-100 text-red-700',
+    duplicate: 'bg-orange-100 text-orange-700',
+  }
+  const labels: Record<string, string> = {
+    needs_review: 'Review noetig',
+    too_close: 'Zu aehnlich',
+    duplicate: 'Duplikat',
+  }
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config[state] || config.draft}`}>
+      {labels[state] || state}
+    </span>
+  )
+}
+
+export function LicenseRuleBadge({ rule }: { rule: number | null | undefined }) {
+  if (!rule) return null
+  const config: Record<number, { bg: string; label: string }> = {
+    1: { bg: 'bg-green-100 text-green-700', label: 'Free Use' },
+    2: { bg: 'bg-blue-100 text-blue-700', label: 'Zitation' },
+    3: { bg: 'bg-amber-100 text-amber-700', label: 'Reformuliert' },
+  }
+  const c = config[rule]
+  if (!c) return null
+  return <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${c.bg}`}>{c.label}</span>
+}
+
+export function getDomain(controlId: string): string {
+  return controlId.split('-')[0] || ''
+}