merge: phases 1–5 refactor, CI hardening, docs (coolify → main)

Phase 1: backend-compliance — partial service-layer extraction Phase 2: ai-compliance-sdk — full hexagonal split; iace/ucca/training handlers and stores split into focused files; cmd/server/main.go → internal/app/ Phase 3: admin-compliance — types.ts, tom-generator loader, and major page components split; lib document generators extracted Phase 4: dsms-gateway, consent-sdk, developer-portal, breakpilot-compliance-sdk Phase 5 CI hardening: - loc-budget job now scans whole repo (blocking, no || true) - sbom-scan / grype blocking on high+ CVEs - ai-compliance-sdk/.golangci.yml: strict golangci-lint config - check-loc.sh: skip test_*.py and *.html; loc-exceptions.txt expanded - deleted stray routes.py.backup (2512 LOC) Docs: - root README.md with CI badge, service table, quick start, CI pipeline table - CONTRIBUTING.md: setup, pre-commit checklist, guardrail marker reference - CLAUDE.md: First-Time Setup & Claude Code Onboarding section - all 7 service READMEs updated (stale phase refs, current architecture) - AGENTS.go/python/typescript.md enhanced with linting, DI, barrel re-export - .gitignore: dist/, .turbo/, pnpm-lock.yaml added Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-19 16:11:53 +02:00
parent aabfd0aecd baf2d8a550
commit 8266c37911
1258 changed files with 210195 additions and 145532 deletions
--- a/admin-compliance/app/sdk/controls/_components/AddControlForm.tsx
+++ b/admin-compliance/app/sdk/controls/_components/AddControlForm.tsx
@@ -1,27 +1,19 @@
 'use client'

-import { useState } from 'react'
-import type { ControlType } from '@/lib/sdk'
-
-interface FormData {
-  name: string
-  description: string
-  type: ControlType
-  category: string
-  owner: string
-}
+import React, { useState } from 'react'
+import { ControlType } from '@/lib/sdk'

 export function AddControlForm({
  onSubmit,
  onCancel,
 }: {
-  onSubmit: (data: FormData) => void
+  onSubmit: (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => void
  onCancel: () => void
 }) {
-  const [formData, setFormData] = useState<FormData>({
+  const [formData, setFormData] = useState({
    name: '',
    description: '',
-    type: 'TECHNICAL',
+    type: 'TECHNICAL' as ControlType,
    category: '',
    owner: '',
  })
--- a/admin-compliance/app/sdk/controls/_components/ControlCard.tsx
+++ b/admin-compliance/app/sdk/controls/_components/ControlCard.tsx
@@ -1,34 +1,8 @@
 'use client'

-import { useState } from 'react'
-import type { DisplayControl, DisplayControlType, DisplayCategory, DisplayStatus } from '../_types'
-import type { ImplementationStatus } from '@/lib/sdk'
-
-const TYPE_COLORS: Record<DisplayControlType, string> = {
-  preventive: 'bg-blue-100 text-blue-700',
-  detective: 'bg-purple-100 text-purple-700',
-  corrective: 'bg-orange-100 text-orange-700',
-}
-
-const CATEGORY_COLORS: Record<DisplayCategory, string> = {
-  technical: 'bg-green-100 text-green-700',
-  organizational: 'bg-yellow-100 text-yellow-700',
-  physical: 'bg-gray-100 text-gray-700',
-}
-
-const STATUS_COLORS: Record<DisplayStatus, string> = {
-  implemented: 'border-green-200 bg-green-50',
-  partial: 'border-yellow-200 bg-yellow-50',
-  planned: 'border-blue-200 bg-blue-50',
-  'not-implemented': 'border-red-200 bg-red-50',
-}
-
-const STATUS_LABELS: Record<DisplayStatus, string> = {
-  implemented: 'Implementiert',
-  partial: 'Teilweise',
-  planned: 'Geplant',
-  'not-implemented': 'Nicht implementiert',
-}
+import React, { useState } from 'react'
+import { ImplementationStatus } from '@/lib/sdk'
+import { DisplayControl } from '../_types'

 export function ControlCard({
  control,
@@ -43,17 +17,45 @@ export function ControlCard({
 }) {
  const [showEffectivenessSlider, setShowEffectivenessSlider] = useState(false)

+  const typeColors = {
+    preventive: 'bg-blue-100 text-blue-700',
+    detective: 'bg-purple-100 text-purple-700',
+    corrective: 'bg-orange-100 text-orange-700',
+  }
+
+  const categoryColors = {
+    technical: 'bg-green-100 text-green-700',
+    organizational: 'bg-yellow-100 text-yellow-700',
+    physical: 'bg-gray-100 text-gray-700',
+  }
+
+  const statusColors = {
+    implemented: 'border-green-200 bg-green-50',
+    partial: 'border-yellow-200 bg-yellow-50',
+    planned: 'border-blue-200 bg-blue-50',
+    'not-implemented': 'border-red-200 bg-red-50',
+  }
+
+  const statusLabels = {
+    implemented: 'Implementiert',
+    partial: 'Teilweise',
+    planned: 'Geplant',
+    'not-implemented': 'Nicht implementiert',
+  }
+
  return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${STATUS_COLORS[control.displayStatus]}`}>
+    <div className={`bg-white rounded-xl border-2 p-6 ${statusColors[control.displayStatus]}`}>
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-2">
-            <span className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded font-mono">{control.code}</span>
-            <span className={`px-2 py-1 text-xs rounded-full ${TYPE_COLORS[control.displayType]}`}>
+            <span className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded font-mono">
+              {control.code}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${typeColors[control.displayType]}`}>
              {control.displayType === 'preventive' ? 'Praeventiv' :
               control.displayType === 'detective' ? 'Detektiv' : 'Korrektiv'}
            </span>
-            <span className={`px-2 py-1 text-xs rounded-full ${CATEGORY_COLORS[control.displayCategory]}`}>
+            <span className={`px-2 py-1 text-xs rounded-full ${categoryColors[control.displayCategory]}`}>
              {control.displayCategory === 'technical' ? 'Technisch' :
               control.displayCategory === 'organizational' ? 'Organisatorisch' : 'Physisch'}
            </span>
@@ -64,7 +66,7 @@ export function ControlCard({
        <select
          value={control.implementationStatus}
          onChange={(e) => onStatusChange(e.target.value as ImplementationStatus)}
-          className={`px-3 py-1 text-sm rounded-full border ${STATUS_COLORS[control.displayStatus]}`}
+          className={`px-3 py-1 text-sm rounded-full border ${statusColors[control.displayStatus]}`}
        >
          <option value="NOT_IMPLEMENTED">Nicht implementiert</option>
          <option value="PARTIAL">Teilweise</option>
@@ -92,7 +94,10 @@ export function ControlCard({
        {showEffectivenessSlider && (
          <div className="mt-2">
            <input
-              type="range" min={0} max={100} value={control.effectivenessPercent}
+              type="range"
+              min={0}
+              max={100}
+              value={control.effectivenessPercent}
              onChange={(e) => onEffectivenessChange(Number(e.target.value))}
              className="w-full"
            />
@@ -105,16 +110,22 @@ export function ControlCard({
          <span>Verantwortlich: </span>
          <span className="font-medium text-gray-700">{control.owner || 'Nicht zugewiesen'}</span>
        </div>
-        <div className="text-gray-500">Letzte Pruefung: {control.lastReview.toLocaleDateString('de-DE')}</div>
+        <div className="text-gray-500">
+          Letzte Pruefung: {control.lastReview.toLocaleDateString('de-DE')}
+        </div>
      </div>

      <div className="mt-3 flex items-center justify-between">
        <div className="flex items-center gap-1 flex-wrap">
          {control.linkedRequirements.slice(0, 3).map(req => (
-            <span key={req} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{req}</span>
+            <span key={req} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
+              {req}
+            </span>
          ))}
          {control.linkedRequirements.length > 3 && (
-            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">+{control.linkedRequirements.length - 3}</span>
+            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
+              +{control.linkedRequirements.length - 3}
+            </span>
          )}
        </div>
        <span className={`px-3 py-1 text-xs rounded-full ${
@@ -122,31 +133,22 @@ export function ControlCard({
          control.displayStatus === 'partial' ? 'bg-yellow-100 text-yellow-700' :
          control.displayStatus === 'planned' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'
        }`}>
-          {STATUS_LABELS[control.displayStatus]}
+          {statusLabels[control.displayStatus]}
        </span>
      </div>

+      {/* Linked Evidence */}
      {control.linkedEvidence.length > 0 && (
        <div className="mt-3 pt-3 border-t border-gray-100">
-          <span className="text-xs text-gray-500 mb-1 block">
-            Nachweise: {control.linkedEvidence.length}
-            {(() => {
-              const e2plus = control.linkedEvidence.filter((ev: { confidenceLevel?: string }) =>
-                ev.confidenceLevel && ['E2', 'E3', 'E4'].includes(ev.confidenceLevel)
-              ).length
-              return e2plus > 0 ? ` (${e2plus} E2+)` : ''
-            })()}
-          </span>
+          <span className="text-xs text-gray-500 mb-1 block">Nachweise:</span>
          <div className="flex items-center gap-1 flex-wrap">
            {control.linkedEvidence.map(ev => (
              <span key={ev.id} className={`px-2 py-0.5 text-xs rounded ${
                ev.status === 'valid' ? 'bg-green-50 text-green-700' :
-                ev.status === 'expired' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700'
+                ev.status === 'expired' ? 'bg-red-50 text-red-700' :
+                'bg-yellow-50 text-yellow-700'
              }`}>
                {ev.title}
-                {(ev as { confidenceLevel?: string }).confidenceLevel && (
-                  <span className="ml-1 opacity-70">({(ev as { confidenceLevel?: string }).confidenceLevel})</span>
-                )}
              </span>
            ))}
          </div>
@@ -154,7 +156,10 @@ export function ControlCard({
      )}

      <div className="mt-3 pt-3 border-t border-gray-100">
-        <button onClick={onLinkEvidence} className="text-sm text-purple-600 hover:text-purple-700 font-medium">
+        <button
+          onClick={onLinkEvidence}
+          className="text-sm text-purple-600 hover:text-purple-700 font-medium"
+        >
          Evidence verknuepfen
        </button>
      </div>
--- a/admin-compliance/app/sdk/controls/_components/FilterBar.tsx
+++ b/admin-compliance/app/sdk/controls/_components/FilterBar.tsx
@@ -1,14 +1,20 @@
-const FILTERS = ['all', 'implemented', 'partial', 'not-implemented', 'technical', 'organizational', 'preventive', 'detective']
+'use client'

-const FILTER_LABELS: Record<string, string> = {
-  all: 'Alle',
-  implemented: 'Implementiert',
-  partial: 'Teilweise',
-  'not-implemented': 'Offen',
-  technical: 'Technisch',
-  organizational: 'Organisatorisch',
-  preventive: 'Praeventiv',
-  detective: 'Detektiv',
+import React from 'react'
+
+const FILTER_OPTIONS = [
+  'all', 'implemented', 'partial', 'not-implemented',
+  'technical', 'organizational', 'preventive', 'detective',
+]
+
+function filterLabel(f: string): string {
+  return f === 'all' ? 'Alle' :
+    f === 'implemented' ? 'Implementiert' :
+    f === 'partial' ? 'Teilweise' :
+    f === 'not-implemented' ? 'Offen' :
+    f === 'technical' ? 'Technisch' :
+    f === 'organizational' ? 'Organisatorisch' :
+    f === 'preventive' ? 'Praeventiv' : 'Detektiv'
 }

 export function FilterBar({
@@ -21,15 +27,17 @@ export function FilterBar({
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <span className="text-sm text-gray-500">Filter:</span>
-      {FILTERS.map(f => (
+      {FILTER_OPTIONS.map(f => (
        <button
          key={f}
          onClick={() => onFilterChange(f)}
          className={`px-3 py-1 text-sm rounded-full transition-colors ${
-            filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            filter === f
+              ? 'bg-purple-600 text-white'
+              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
          }`}
        >
-          {FILTER_LABELS[f]}
+          {filterLabel(f)}
        </button>
      ))}
    </div>
--- a/admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx
+++ b/admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx
@@ -1,3 +1,7 @@
+'use client'
+
+import React from 'react'
+
 export function LoadingSkeleton() {
  return (
    <div className="space-y-4">
--- a/admin-compliance/app/sdk/controls/_components/RAGPanel.tsx
+++ b/admin-compliance/app/sdk/controls/_components/RAGPanel.tsx
@@ -1,6 +1,7 @@
 'use client'

-import type { RAGControlSuggestion } from '../_types'
+import React from 'react'
+import { RAGControlSuggestion } from '../_types'

 export function RAGPanel({
  selectedRequirementId,
@@ -13,7 +14,7 @@ export function RAGPanel({
  onClose,
 }: {
  selectedRequirementId: string
-  onSelectedRequirementIdChange: (id: string) => void
+  onSelectedRequirementIdChange: (v: string) => void
  requirements: { id: string; title?: string }[]
  onSuggestControls: () => void
  ragLoading: boolean
@@ -28,7 +29,7 @@ export function RAGPanel({
          <h3 className="text-lg font-semibold text-purple-900">KI-Controls aus RAG vorschlagen</h3>
          <p className="text-sm text-purple-700 mt-1">
            Geben Sie eine Anforderungs-ID ein. Das KI-System analysiert die Anforderung mit Hilfe des RAG-Corpus
-            und schlaegt passende Controls vor.
+            und schlägt passende Controls vor.
          </p>
        </div>
        <button onClick={onClose} className="text-purple-400 hover:text-purple-600 ml-4">
@@ -52,7 +53,7 @@ export function RAGPanel({
            onChange={e => onSelectedRequirementIdChange(e.target.value)}
            className="px-3 py-2 border border-purple-300 rounded-lg bg-white text-sm focus:ring-2 focus:ring-purple-500"
          >
-            <option value="">Aus Liste waehlen...</option>
+            <option value="">Aus Liste wählen...</option>
            {requirements.slice(0, 20).map(r => (
              <option key={r.id} value={r.id}>{r.id.substring(0, 8)}... — {r.title?.substring(0, 40)}</option>
            ))}
@@ -77,15 +78,16 @@ export function RAGPanel({
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
-              Vorschlaege generieren
+              Vorschläge generieren
            </>
          )}
        </button>
      </div>

+      {/* Suggestions */}
      {ragSuggestions.length > 0 && (
        <div className="space-y-3">
-          <h4 className="text-sm font-semibold text-purple-800">{ragSuggestions.length} Vorschlaege gefunden:</h4>
+          <h4 className="text-sm font-semibold text-purple-800">{ragSuggestions.length} Vorschläge gefunden:</h4>
          {ragSuggestions.map((suggestion) => (
            <div key={suggestion.control_id} className="bg-white border border-purple-200 rounded-lg p-4">
              <div className="flex items-start justify-between gap-3">
@@ -94,8 +96,12 @@ export function RAGPanel({
                    <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded font-mono">
                      {suggestion.control_id}
                    </span>
-                    <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{suggestion.domain}</span>
-                    <span className="text-xs text-gray-500">Konfidenz: {Math.round(suggestion.confidence_score * 100)}%</span>
+                    <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
+                      {suggestion.domain}
+                    </span>
+                    <span className="text-xs text-gray-500">
+                      Konfidenz: {Math.round(suggestion.confidence_score * 100)}%
+                    </span>
                  </div>
                  <h5 className="font-semibold text-gray-900">{suggestion.title}</h5>
                  <p className="text-sm text-gray-600 mt-1">{suggestion.description}</p>
@@ -117,7 +123,7 @@ export function RAGPanel({
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>
-                  Hinzufuegen
+                  Hinzufügen
                </button>
              </div>
            </div>
@@ -127,7 +133,7 @@ export function RAGPanel({

      {!ragLoading && ragSuggestions.length === 0 && selectedRequirementId && (
        <p className="text-sm text-purple-600 italic">
-          Klicken Sie auf &quot;Vorschlaege generieren&quot;, um KI-Controls abzurufen.
+          Klicken Sie auf &quot;Vorschläge generieren&quot;, um KI-Controls abzurufen.
        </p>
      )}
    </div>
--- a/admin-compliance/app/sdk/controls/_components/StatsCards.tsx
+++ b/admin-compliance/app/sdk/controls/_components/StatsCards.tsx
@@ -1,3 +1,7 @@
+'use client'
+
+import React from 'react'
+
 export function StatsCards({
  total,
  implementedCount,
--- a/admin-compliance/app/sdk/controls/_hooks/useControlsData.ts
+++ b/admin-compliance/app/sdk/controls/_hooks/useControlsData.ts
@@ -2,16 +2,16 @@

 import { useState, useEffect } from 'react'
 import { useSDK, Control as SDKControl, ControlType, ImplementationStatus } from '@/lib/sdk'
-import { mapControlTypeToDisplay, mapStatusToDisplay } from '../_types'
-import type { DisplayControl, RAGControlSuggestion } from '../_types'

 export function useControlsData() {
  const { state, dispatch } = useSDK()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
+
+  // Track effectiveness locally as it's not in the SDK state type
  const [effectivenessMap, setEffectivenessMap] = useState<Record<string, number>>({})
+  // Track linked evidence per control
  const [evidenceMap, setEvidenceMap] = useState<Record<string, { id: string; title: string; status: string }[]>>({})
-  const [transitionError, setTransitionError] = useState<{ controlId: string; violations: string[] } | null>(null)

  const fetchEvidenceForControls = async (_controlIds: string[]) => {
    try {
@@ -20,7 +20,7 @@ export function useControlsData() {
        const data = await res.json()
        const allEvidence = data.evidence || data
        if (Array.isArray(allEvidence)) {
-          const map: Record<string, { id: string; title: string; status: string; confidenceLevel?: string }[]> = {}
+          const map: Record<string, { id: string; title: string; status: string }[]> = {}
          for (const ev of allEvidence) {
            const ctrlId = ev.control_id || ''
            if (!map[ctrlId]) map[ctrlId] = []
@@ -28,7 +28,6 @@ export function useControlsData() {
              id: ev.id,
              title: ev.title || ev.name || 'Nachweis',
              status: ev.status || 'pending',
-              confidenceLevel: ev.confidence_level || undefined,
            })
          }
          setEvidenceMap(map)
@@ -39,6 +38,7 @@ export function useControlsData() {
    }
  }

+  // Fetch controls from backend on mount
  useEffect(() => {
    const fetchControls = async () => {
      try {
@@ -72,70 +72,30 @@ export function useControlsData() {
        setLoading(false)
      }
    }
+
    fetchControls()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

-  const displayControls: DisplayControl[] = state.controls.map(ctrl => {
-    const effectivenessPercent = effectivenessMap[ctrl.id] ??
-      (ctrl.implementationStatus === 'IMPLEMENTED' ? 85 :
-       ctrl.implementationStatus === 'PARTIAL' ? 50 : 0)
-    return {
-      id: ctrl.id,
-      name: ctrl.name,
-      description: ctrl.description,
-      type: ctrl.type,
-      category: ctrl.category,
-      implementationStatus: ctrl.implementationStatus,
-      evidence: ctrl.evidence,
-      owner: ctrl.owner,
-      dueDate: ctrl.dueDate,
-      code: ctrl.id,
-      displayType: 'preventive' as const,
-      displayCategory: mapControlTypeToDisplay(ctrl.type),
-      displayStatus: mapStatusToDisplay(ctrl.implementationStatus),
-      effectivenessPercent,
-      linkedRequirements: [],
-      linkedEvidence: evidenceMap[ctrl.id] || [],
-      lastReview: new Date(),
-    }
-  })
-
-  const handleStatusChange = async (controlId: string, newStatus: ImplementationStatus) => {
-    const oldControl = state.controls.find(c => c.id === controlId)
-    const oldStatus = oldControl?.implementationStatus
-
-    dispatch({ type: 'UPDATE_CONTROL', payload: { id: controlId, data: { implementationStatus: newStatus } } })
+  const handleStatusChange = async (controlId: string, status: ImplementationStatus) => {
+    dispatch({
+      type: 'UPDATE_CONTROL',
+      payload: { id: controlId, data: { implementationStatus: status } },
+    })

    try {
-      const res = await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
+      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ implementation_status: newStatus }),
+        body: JSON.stringify({ implementation_status: status }),
      })
-      if (!res.ok) {
-        if (oldStatus) {
-          dispatch({ type: 'UPDATE_CONTROL', payload: { id: controlId, data: { implementationStatus: oldStatus } } })
-        }
-        const err = await res.json().catch(() => ({ detail: 'Status-Aenderung fehlgeschlagen' }))
-        if (res.status === 409 && err.detail?.violations) {
-          setTransitionError({ controlId, violations: err.detail.violations })
-        } else {
-          const msg = typeof err.detail === 'string' ? err.detail : err.detail?.error || 'Status-Aenderung fehlgeschlagen'
-          setError(msg)
-        }
-      } else {
-        setTransitionError(prev => prev?.controlId === controlId ? null : prev)
-      }
    } catch {
-      if (oldStatus) {
-        dispatch({ type: 'UPDATE_CONTROL', payload: { id: controlId, data: { implementationStatus: oldStatus } } })
-      }
-      setError('Netzwerkfehler bei Status-Aenderung')
+      // Silently fail — SDK state is already updated
    }
  }

  const handleEffectivenessChange = async (controlId: string, effectiveness: number) => {
    setEffectivenessMap(prev => ({ ...prev, [controlId]: effectiveness }))
+
    try {
      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
        method: 'PUT',
@@ -143,7 +103,7 @@ export function useControlsData() {
        body: JSON.stringify({ effectiveness_score: effectiveness }),
      })
    } catch {
-      // Silently fail
+      // Silently fail — local state is already updated
    }
  }

@@ -163,35 +123,16 @@ export function useControlsData() {
    dispatch({ type: 'ADD_CONTROL', payload: newControl })
  }

-  const addSuggestedControl = (suggestion: RAGControlSuggestion) => {
-    const newControl: SDKControl = {
-      id: `rag-${suggestion.control_id}-${Date.now()}`,
-      name: suggestion.title,
-      description: suggestion.description,
-      type: 'TECHNICAL',
-      category: suggestion.domain,
-      implementationStatus: 'NOT_IMPLEMENTED',
-      effectiveness: 'LOW',
-      evidence: [],
-      owner: null,
-      dueDate: null,
-    }
-    dispatch({ type: 'ADD_CONTROL', payload: newControl })
-  }
-
  return {
    state,
+    dispatch,
    loading,
    error,
    setError,
    effectivenessMap,
    evidenceMap,
-    displayControls,
-    transitionError,
-    setTransitionError,
    handleStatusChange,
    handleEffectivenessChange,
    handleAddControl,
-    addSuggestedControl,
  }
 }
--- a/admin-compliance/app/sdk/controls/_hooks/useRAGSuggestions.ts
+++ b/admin-compliance/app/sdk/controls/_hooks/useRAGSuggestions.ts
@@ -1,9 +1,11 @@
 'use client'

 import { useState } from 'react'
-import type { RAGControlSuggestion } from '../_types'
+import { useSDK } from '@/lib/sdk'
+import { RAGControlSuggestion } from '../_types'

-export function useRAGSuggestions(setError: (msg: string | null) => void) {
+export function useRAGSuggestions(setError: (e: string | null) => void) {
+  const { dispatch } = useSDK()
  const [ragLoading, setRagLoading] = useState(false)
  const [ragSuggestions, setRagSuggestions] = useState<RAGControlSuggestion[]>([])
  const [showRagPanel, setShowRagPanel] = useState(false)
@@ -30,14 +32,27 @@ export function useRAGSuggestions(setError: (msg: string | null) => void) {
      setRagSuggestions(data.suggestions || [])
      setShowRagPanel(true)
    } catch (e) {
-      setError(`KI-Vorschlaege fehlgeschlagen: ${e instanceof Error ? e.message : 'Unbekannter Fehler'}`)
+      setError(`KI-Vorschläge fehlgeschlagen: ${e instanceof Error ? e.message : 'Unbekannter Fehler'}`)
    } finally {
      setRagLoading(false)
    }
  }

-  const removeSuggestion = (controlId: string) => {
-    setRagSuggestions(prev => prev.filter(s => s.control_id !== controlId))
+  const addSuggestedControl = (suggestion: RAGControlSuggestion) => {
+    const newControl: import('@/lib/sdk').Control = {
+      id: `rag-${suggestion.control_id}-${Date.now()}`,
+      name: suggestion.title,
+      description: suggestion.description,
+      type: 'TECHNICAL',
+      category: suggestion.domain,
+      implementationStatus: 'NOT_IMPLEMENTED',
+      effectiveness: 'LOW',
+      evidence: [],
+      owner: null,
+      dueDate: null,
+    }
+    dispatch({ type: 'ADD_CONTROL', payload: newControl })
+    setRagSuggestions(prev => prev.filter(s => s.control_id !== suggestion.control_id))
  }

  return {
@@ -48,6 +63,6 @@ export function useRAGSuggestions(setError: (msg: string | null) => void) {
    selectedRequirementId,
    setSelectedRequirementId,
    suggestControlsFromRAG,
-    removeSuggestion,
+    addSuggestedControl,
  }
 }
--- a/admin-compliance/app/sdk/controls/_types.ts
+++ b/admin-compliance/app/sdk/controls/_types.ts
@@ -1,4 +1,4 @@
-import type { ControlType, ImplementationStatus } from '@/lib/sdk'
+import { ControlType, ImplementationStatus } from '@/lib/sdk'

 export type DisplayControlType = 'preventive' | 'detective' | 'corrective'
 export type DisplayCategory = 'technical' | 'organizational' | 'physical'
--- a/admin-compliance/app/sdk/controls/page.tsx
+++ b/admin-compliance/app/sdk/controls/page.tsx
@@ -1,71 +1,158 @@
 'use client'

-import { useState } from 'react'
+import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-import { useControlsData } from './_hooks/useControlsData'
-import { useRAGSuggestions } from './_hooks/useRAGSuggestions'
+import { mapControlTypeToDisplay, mapStatusToDisplay, DisplayControl } from './_types'
 import { ControlCard } from './_components/ControlCard'
 import { AddControlForm } from './_components/AddControlForm'
 import { LoadingSkeleton } from './_components/LoadingSkeleton'
-import { TransitionErrorBanner } from './_components/TransitionErrorBanner'
 import { StatsCards } from './_components/StatsCards'
 import { FilterBar } from './_components/FilterBar'
 import { RAGPanel } from './_components/RAGPanel'
+import { useControlsData } from './_hooks/useControlsData'
+import { useRAGSuggestions } from './_hooks/useRAGSuggestions'
+
+// ---------------------------------------------------------------------------
+// Transition Error Banner
+// ---------------------------------------------------------------------------
+
+function TransitionErrorBanner({
+  controlId,
+  violations,
+  onDismiss,
+}: {
+  controlId: string
+  violations: string[]
+  onDismiss: () => void
+}) {
+  return (
+    <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-3">
+          <svg className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <div>
+            <h4 className="font-medium text-orange-800">Status-Transition blockiert ({controlId})</h4>
+            <ul className="mt-2 space-y-1">
+              {violations.map((v, i) => (
+                <li key={i} className="text-sm text-orange-700 flex items-start gap-2">
+                  <span className="text-orange-400 mt-0.5">•</span>
+                  <span>{v}</span>
+                </li>
+              ))}
+            </ul>
+            <a href="/sdk/evidence" className="mt-2 inline-block text-sm text-purple-600 hover:text-purple-700 font-medium">
+              Evidence hinzufuegen →
+            </a>
+          </div>
+        </div>
+        <button onClick={onDismiss} className="text-orange-400 hover:text-orange-600 ml-4">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main Page
+// ---------------------------------------------------------------------------

 export default function ControlsPage() {
  const router = useRouter()
  const [filter, setFilter] = useState<string>('all')
  const [showAddForm, setShowAddForm] = useState(false)
+  const [transitionError, setTransitionError] = useState<{ controlId: string; violations: string[] } | null>(null)

  const {
-    state,
-    loading,
-    error,
-    setError,
-    displayControls,
-    transitionError,
-    setTransitionError,
-    handleStatusChange,
+    state, dispatch, loading, error, setError,
+    effectivenessMap, evidenceMap,
+    handleStatusChange: _handleStatusChange,
    handleEffectivenessChange,
    handleAddControl,
-    addSuggestedControl,
  } = useControlsData()

  const {
-    ragLoading,
-    ragSuggestions,
-    showRagPanel,
-    setShowRagPanel,
-    selectedRequirementId,
-    setSelectedRequirementId,
-    suggestControlsFromRAG,
-    removeSuggestion,
+    ragLoading, ragSuggestions, showRagPanel, setShowRagPanel,
+    selectedRequirementId, setSelectedRequirementId,
+    suggestControlsFromRAG, addSuggestedControl,
  } = useRAGSuggestions(setError)

+  // Wrap status change to capture 409 transition errors
+  const handleStatusChange = async (controlId: string, newStatus: import('@/lib/sdk').ImplementationStatus) => {
+    const oldControl = state.controls.find(c => c.id === controlId)
+    const oldStatus = oldControl?.implementationStatus
+
+    dispatch({ type: 'UPDATE_CONTROL', payload: { id: controlId, data: { implementationStatus: newStatus } } })
+
+    try {
+      const res = await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ implementation_status: newStatus }),
+      })
+
+      if (!res.ok) {
+        if (oldStatus) dispatch({ type: 'UPDATE_CONTROL', payload: { id: controlId, data: { implementationStatus: oldStatus } } })
+        const err = await res.json().catch(() => ({ detail: 'Status-Aenderung fehlgeschlagen' }))
+        if (res.status === 409 && err.detail?.violations) {
+          setTransitionError({ controlId, violations: err.detail.violations })
+        } else {
+          const msg = typeof err.detail === 'string' ? err.detail : err.detail?.error || 'Status-Aenderung fehlgeschlagen'
+          setError(msg)
+        }
+      } else if (transitionError?.controlId === controlId) {
+        setTransitionError(null)
+      }
+    } catch {
+      if (oldStatus) dispatch({ type: 'UPDATE_CONTROL', payload: { id: controlId, data: { implementationStatus: oldStatus } } })
+      setError('Netzwerkfehler bei Status-Aenderung')
+    }
+  }
+
+  // Build display controls
+  const displayControls: DisplayControl[] = state.controls.map(ctrl => {
+    const effectivenessPercent = effectivenessMap[ctrl.id] ??
+      (ctrl.implementationStatus === 'IMPLEMENTED' ? 85 : ctrl.implementationStatus === 'PARTIAL' ? 50 : 0)
+    return {
+      id: ctrl.id,
+      name: ctrl.name,
+      description: ctrl.description,
+      type: ctrl.type,
+      category: ctrl.category,
+      implementationStatus: ctrl.implementationStatus,
+      evidence: ctrl.evidence,
+      owner: ctrl.owner,
+      dueDate: ctrl.dueDate,
+      code: ctrl.id,
+      displayType: 'preventive' as import('./_types').DisplayControlType,
+      displayCategory: mapControlTypeToDisplay(ctrl.type),
+      displayStatus: mapStatusToDisplay(ctrl.implementationStatus),
+      effectivenessPercent,
+      linkedRequirements: [],
+      linkedEvidence: evidenceMap[ctrl.id] || [],
+      lastReview: new Date(),
+    }
+  })
+
  const filteredControls = filter === 'all'
    ? displayControls
-    : displayControls.filter(c =>
-        c.displayStatus === filter || c.displayType === filter || c.displayCategory === filter
-      )
+    : displayControls.filter(c => c.displayStatus === filter || c.displayType === filter || c.displayCategory === filter)

  const implementedCount = displayControls.filter(c => c.displayStatus === 'implemented').length
  const avgEffectiveness = displayControls.length > 0
    ? Math.round(displayControls.reduce((sum, c) => sum + c.effectivenessPercent, 0) / displayControls.length)
    : 0
  const partialCount = displayControls.filter(c => c.displayStatus === 'partial').length
-
  const stepInfo = STEP_EXPLANATIONS['controls']

  return (
    <div className="space-y-6">
-      <StepHeader
-        stepId="controls"
-        title={stepInfo.title}
-        description={stepInfo.description}
-        explanation={stepInfo.explanation}
-        tips={stepInfo.tips}
-      >
+      <StepHeader stepId="controls" title={stepInfo.title} description={stepInfo.description} explanation={stepInfo.explanation} tips={stepInfo.tips}>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowRagPanel(!showRagPanel)}
@@ -103,7 +190,7 @@ export default function ControlsPage() {
          onSuggestControls={suggestControlsFromRAG}
          ragLoading={ragLoading}
          ragSuggestions={ragSuggestions}
-          onAddSuggestion={(s) => { addSuggestedControl(s); removeSuggestion(s.control_id) }}
+          onAddSuggestion={addSuggestedControl}
          onClose={() => setShowRagPanel(false)}
        />
      )}
@@ -139,12 +226,7 @@ export default function ControlsPage() {
        </div>
      )}

-      <StatsCards
-        total={displayControls.length}
-        implementedCount={implementedCount}
-        avgEffectiveness={avgEffectiveness}
-        partialCount={partialCount}
-      />
+      <StatsCards total={displayControls.length} implementedCount={implementedCount} avgEffectiveness={avgEffectiveness} partialCount={partialCount} />

      <FilterBar filter={filter} onFilterChange={setFilter} />