feat: seed 10 canonical controls + CRUD endpoints + frontend editor

- Migration 045: Seed 10 controls (AUTH, NET, SUP, LOG, WEB, DATA, CRYP, REL)
  with 39 open-source anchors into the database
- Backend: POST/PUT/DELETE endpoints for canonical controls CRUD
- Frontend proxy: PUT and DELETE methods added to canonical route
- Frontend: Control Library with create/edit/delete UI, full form with
  open anchor management, scope, requirements, evidence, test procedures

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

admin-compliance/app/api/sdk/v1/canonical/route.ts

@@ -80,25 +80,73 @@ export async function GET(request: NextRequest) {
 }
 
 /**
- * Proxy: POST /api/sdk/v1/canonical?endpoint=similarity-check&id=...
+ * Proxy: POST /api/sdk/v1/canonical?endpoint=...
  *
- * Routes to: POST /api/compliance/v1/canonical/controls/{id}/similarity-check
+ *   endpoint=create-control         → POST /api/compliance/v1/canonical/controls
+ *   endpoint=similarity-check&id=   → POST /api/compliance/v1/canonical/controls/{id}/similarity-check
  */
 export async function POST(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url)
     const endpoint = searchParams.get('endpoint')
-    const controlId = searchParams.get('id')
+    const body = await request.json()
 
-    if (endpoint !== 'similarity-check' || !controlId) {
-      return NextResponse.json({ error: 'Invalid endpoint or missing id' }, { status: 400 })
+    let backendPath: string
+
+    if (endpoint === 'create-control') {
+      backendPath = '/api/compliance/v1/canonical/controls'
+    } else if (endpoint === 'similarity-check') {
+      const controlId = searchParams.get('id')
+      if (!controlId) {
+        return NextResponse.json({ error: 'Missing control id' }, { status: 400 })
+      }
+      backendPath = `/api/compliance/v1/canonical/controls/${encodeURIComponent(controlId)}/similarity-check`
+    } else {
+      return NextResponse.json({ error: `Unknown POST endpoint: ${endpoint}` }, { status: 400 })
+    }
+
+    const response = await fetch(`${BACKEND_URL}${backendPath}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: 'Backend error', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    return NextResponse.json(await response.json(), { status: response.status })
+  } catch (error) {
+    console.error('Canonical control POST proxy error:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to backend' },
+      { status: 503 }
+    )
+  }
+}
+
+/**
+ * Proxy: PUT /api/sdk/v1/canonical?endpoint=update-control&id=AUTH-001
+ *
+ * Routes to: PUT /api/compliance/v1/canonical/controls/{id}
+ */
+export async function PUT(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const controlId = searchParams.get('id')
+    if (!controlId) {
+      return NextResponse.json({ error: 'Missing control id' }, { status: 400 })
     }
 
     const body = await request.json()
     const response = await fetch(
-      `${BACKEND_URL}/api/compliance/v1/canonical/controls/${encodeURIComponent(controlId)}/similarity-check`,
+      `${BACKEND_URL}/api/compliance/v1/canonical/controls/${encodeURIComponent(controlId)}`,
       {
-        method: 'POST',
+        method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body),
       }
@@ -114,7 +162,43 @@ export async function POST(request: NextRequest) {
 
     return NextResponse.json(await response.json())
   } catch (error) {
-    console.error('Similarity check proxy error:', error)
+    console.error('Canonical control PUT proxy error:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to backend' },
+      { status: 503 }
+    )
+  }
+}
+
+/**
+ * Proxy: DELETE /api/sdk/v1/canonical?id=AUTH-001
+ *
+ * Routes to: DELETE /api/compliance/v1/canonical/controls/{id}
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const controlId = searchParams.get('id')
+    if (!controlId) {
+      return NextResponse.json({ error: 'Missing control id' }, { status: 400 })
+    }
+
+    const response = await fetch(
+      `${BACKEND_URL}/api/compliance/v1/canonical/controls/${encodeURIComponent(controlId)}`,
+      { method: 'DELETE' }
+    )
+
+    if (!response.ok && response.status !== 204) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: 'Backend error', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    return new NextResponse(null, { status: 204 })
+  } catch (error) {
+    console.error('Canonical control DELETE proxy error:', error)
     return NextResponse.json(
       { error: 'Failed to connect to backend' },
       { status: 503 }

admin-compliance/app/sdk/control-library/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useMemo, useCallback } from 'react'
 import {
   Shield, Search, ChevronRight, ArrowLeft, ExternalLink,
   Filter, AlertTriangle, CheckCircle2, Info, Lock,
-  FileText, BookOpen, Scale,
+  FileText, BookOpen, Scale, Plus, Pencil, Trash2, Save, X,
 } from 'lucide-react'
 
 // =============================================================================
@@ -77,6 +77,24 @@ const EFFORT_LABELS: Record<string, string> = {
 
 const BACKEND_URL = '/api/sdk/v1/canonical'
 
+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[],
+}
+
 // =============================================================================
 // HELPERS
 // =============================================================================
@@ -110,6 +128,277 @@ function getDomain(controlId: string): string {
   return controlId.split('-')[0] || ''
 }
 
+// =============================================================================
+// CONTROL FORM COMPONENT
+// =============================================================================
+
+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>
+  )
+}
+
 // =============================================================================
 // CONTROL LIBRARY PAGE
 // =============================================================================
@@ -126,30 +415,30 @@ export default function ControlLibraryPage() {
   const [severityFilter, setSeverityFilter] = useState<string>('')
   const [domainFilter, setDomainFilter] = useState<string>('')
 
-  // Load data
-  useEffect(() => {
-    async function load() {
-      try {
-        const [fwRes, ctrlRes] = await Promise.all([
-          fetch(`${BACKEND_URL}?endpoint=frameworks`),
-          fetch(`${BACKEND_URL}?endpoint=controls`),
-        ])
+  // CRUD state
+  const [mode, setMode] = useState<'list' | 'detail' | 'create' | 'edit'>('list')
+  const [saving, setSaving] = useState(false)
 
-        if (fwRes.ok) {
-          setFrameworks(await fwRes.json())
-        }
-        if (ctrlRes.ok) {
-          setControls(await ctrlRes.json())
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Fehler beim Laden')
-      } finally {
-        setLoading(false)
-      }
+  // Load data
+  const loadData = useCallback(async () => {
+    try {
+      setLoading(true)
+      const [fwRes, ctrlRes] = await Promise.all([
+        fetch(`${BACKEND_URL}?endpoint=frameworks`),
+        fetch(`${BACKEND_URL}?endpoint=controls`),
+      ])
+
+      if (fwRes.ok) setFrameworks(await fwRes.json())
+      if (ctrlRes.ok) setControls(await ctrlRes.json())
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Laden')
+    } finally {
+      setLoading(false)
     }
-    load()
   }, [])
 
+  useEffect(() => { loadData() }, [loadData])
+
   // Derived: unique domains
   const domains = useMemo(() => {
     const set = new Set(controls.map(c => getDomain(c.control_id)))
@@ -174,7 +463,68 @@ export default function ControlLibraryPage() {
     })
   }, [controls, severityFilter, domainFilter, searchQuery])
 
-  const handleBack = useCallback(() => setSelectedControl(null), [])
+  // CRUD handlers
+  const handleCreate = async (data: typeof EMPTY_CONTROL) => {
+    setSaving(true)
+    try {
+      const res = await fetch(`${BACKEND_URL}?endpoint=create-control`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        alert(`Fehler: ${err.error || err.details || 'Unbekannt'}`)
+        return
+      }
+      await loadData()
+      setMode('list')
+    } catch {
+      alert('Netzwerkfehler')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleUpdate = async (data: typeof EMPTY_CONTROL) => {
+    if (!selectedControl) return
+    setSaving(true)
+    try {
+      const res = await fetch(`${BACKEND_URL}?endpoint=update-control&id=${selectedControl.control_id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        alert(`Fehler: ${err.error || err.details || 'Unbekannt'}`)
+        return
+      }
+      await loadData()
+      setSelectedControl(null)
+      setMode('list')
+    } catch {
+      alert('Netzwerkfehler')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (controlId: string) => {
+    if (!confirm(`Control ${controlId} wirklich loeschen?`)) return
+    try {
+      const res = await fetch(`${BACKEND_URL}?id=${controlId}`, { method: 'DELETE' })
+      if (!res.ok && res.status !== 204) {
+        alert('Fehler beim Loeschen')
+        return
+      }
+      await loadData()
+      setSelectedControl(null)
+      setMode('list')
+    } catch {
+      alert('Netzwerkfehler')
+    }
+  }
 
   if (loading) {
     return (
@@ -192,17 +542,58 @@ export default function ControlLibraryPage() {
     )
   }
 
+  // =========================================================================
+  // CREATE MODE
+  // =========================================================================
+  if (mode === 'create') {
+    return <ControlForm initial={EMPTY_CONTROL} onSave={handleCreate} onCancel={() => setMode('list')} saving={saving} />
+  }
+
+  // =========================================================================
+  // EDIT MODE
+  // =========================================================================
+  if (mode === 'edit' && selectedControl) {
+    const editData = {
+      framework_id: frameworks[0]?.framework_id || 'bp_security_v1',
+      control_id: selectedControl.control_id,
+      title: selectedControl.title,
+      objective: selectedControl.objective,
+      rationale: selectedControl.rationale,
+      scope: selectedControl.scope || { platforms: [], components: [], data_classes: [] },
+      requirements: selectedControl.requirements.length ? selectedControl.requirements : [''],
+      test_procedure: selectedControl.test_procedure.length ? selectedControl.test_procedure : [''],
+      evidence: selectedControl.evidence.length ? selectedControl.evidence : [{ type: '', description: '' }],
+      severity: selectedControl.severity,
+      risk_score: selectedControl.risk_score,
+      implementation_effort: selectedControl.implementation_effort,
+      open_anchors: selectedControl.open_anchors.length ? selectedControl.open_anchors : [{ framework: '', ref: '', url: '' }],
+      release_state: selectedControl.release_state,
+      tags: selectedControl.tags,
+    }
+    return <ControlForm initial={editData} onSave={handleUpdate} onCancel={() => { setMode('detail') }} saving={saving} />
+  }
+
   // =========================================================================
   // DETAIL VIEW
   // =========================================================================
 
-  if (selectedControl) {
+  if (mode === 'detail' && selectedControl) {
     const ctrl = selectedControl
     return (
       <div className="max-w-4xl mx-auto p-6">
-        <button onClick={handleBack} className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6">
-          <ArrowLeft className="w-4 h-4" /> Zurueck zur Uebersicht
-        </button>
+        <div className="flex items-center justify-between mb-6">
+          <button onClick={() => { setSelectedControl(null); setMode('list') }} className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
+            <ArrowLeft className="w-4 h-4" /> Zurueck zur Uebersicht
+          </button>
+          <div className="flex items-center gap-2">
+            <button onClick={() => setMode('edit')} className="flex items-center gap-1 px-3 py-1.5 text-sm text-purple-600 border border-purple-300 rounded-lg hover:bg-purple-50">
+              <Pencil className="w-3.5 h-3.5" /> Bearbeiten
+            </button>
+            <button onClick={() => handleDelete(ctrl.control_id)} className="flex items-center gap-1 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" /> Loeschen
+            </button>
+          </div>
+        </div>
 
         {/* Header */}
         <div className="flex items-start gap-4 mb-6">
@@ -381,6 +772,13 @@ export default function ControlLibraryPage() {
               </p>
             </div>
           </div>
+          <button
+            onClick={() => setMode('create')}
+            className="flex items-center gap-1.5 px-3 py-2 text-sm text-white bg-purple-600 rounded-lg hover:bg-purple-700"
+          >
+            <Plus className="w-4 h-4" />
+            Neues Control
+          </button>
         </div>
 
         {/* Frameworks */}
@@ -440,7 +838,7 @@ export default function ControlLibraryPage() {
           {filteredControls.map(ctrl => (
             <button
               key={ctrl.control_id}
-              onClick={() => setSelectedControl(ctrl)}
+              onClick={() => { setSelectedControl(ctrl); setMode('detail') }}
               className="w-full text-left bg-white border border-gray-200 rounded-lg p-4 hover:border-purple-300 hover:shadow-sm transition-all group"
             >
               <div className="flex items-start justify-between">
@@ -474,7 +872,9 @@ export default function ControlLibraryPage() {
 
           {filteredControls.length === 0 && (
             <div className="text-center py-12 text-gray-400 text-sm">
-              Keine Controls gefunden.
+              {controls.length === 0
+                ? 'Noch keine Controls vorhanden. Klicke auf "Neues Control" um zu starten.'
+                : 'Keine Controls gefunden.'}
             </div>
           )}
         </div>