feat(compliance-kern): Tests, MkDocs + RAG-Controls Button für Anforderungen/Controls/Nachweise/Risiken

- 74 neue Tests (test_risk_routes, test_evidence_routes, test_requirement_routes, test_control_routes)
  Enum-Mocking (.value), ControlStatusEnum-Validierung, db.query() direkte Mocks
- MkDocs: docs-src/services/sdk-modules/compliance-kern.md
  Endpunkt-Tabellen, Schema-Erklärungen, CI/CD-Beispiele, Risikomatrix
- controls/page.tsx: "KI-Controls aus RAG vorschlagen" Button
  POST /api/sdk/v1/compliance/ai/suggest-controls, Suggestion-Panel,
  Requirement-ID-Eingabe + Dropdown, Konfidenz-Anzeige, Hinzufügen-Aktion

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

admin-compliance/app/sdk/controls/page.tsx

@@ -429,6 +429,27 @@ function LoadingSkeleton() {
 // MAIN PAGE
 // =============================================================================
 
+// =============================================================================
+// RAG SUGGESTION TYPES
+// =============================================================================
+
+interface RAGControlSuggestion {
+  control_id: string
+  domain: string
+  title: string
+  description: string
+  pass_criteria: string
+  implementation_guidance?: string
+  is_automated: boolean
+  automation_tool?: string
+  priority: number
+  confidence_score: number
+}
+
+// =============================================================================
+// MAIN PAGE
+// =============================================================================
+
 export default function ControlsPage() {
   const { state, dispatch } = useSDK()
   const router = useRouter()
@@ -437,6 +458,12 @@ export default function ControlsPage() {
   const [error, setError] = useState<string | null>(null)
   const [showAddForm, setShowAddForm] = useState(false)
 
+  // RAG suggestion state
+  const [ragLoading, setRagLoading] = useState(false)
+  const [ragSuggestions, setRagSuggestions] = useState<RAGControlSuggestion[]>([])
+  const [showRagPanel, setShowRagPanel] = useState(false)
+  const [selectedRequirementId, setSelectedRequirementId] = useState<string>('')
+
   // Track effectiveness locally as it's not in the SDK state type
   const [effectivenessMap, setEffectivenessMap] = useState<Record<string, number>>({})
   // Track linked evidence per control
@@ -623,6 +650,51 @@ export default function ControlsPage() {
     setShowAddForm(false)
   }
 
+  const suggestControlsFromRAG = async () => {
+    if (!selectedRequirementId) {
+      setError('Bitte eine Anforderungs-ID eingeben.')
+      return
+    }
+    setRagLoading(true)
+    setRagSuggestions([])
+    try {
+      const res = await fetch('/api/sdk/v1/compliance/ai/suggest-controls', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requirement_id: selectedRequirementId }),
+      })
+      if (!res.ok) {
+        const msg = await res.text()
+        throw new Error(msg || `HTTP ${res.status}`)
+      }
+      const data = await res.json()
+      setRagSuggestions(data.suggestions || [])
+      setShowRagPanel(true)
+    } catch (e) {
+      setError(`KI-Vorschläge fehlgeschlagen: ${e instanceof Error ? e.message : 'Unbekannter Fehler'}`)
+    } finally {
+      setRagLoading(false)
+    }
+  }
+
+  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 })
+    // Remove from suggestions after adding
+    setRagSuggestions(prev => prev.filter(s => s.control_id !== suggestion.control_id))
+  }
+
   const stepInfo = STEP_EXPLANATIONS['controls']
 
   return (
@@ -635,15 +707,26 @@ export default function ControlsPage() {
         explanation={stepInfo.explanation}
         tips={stepInfo.tips}
       >
-        <button
-          onClick={() => setShowAddForm(true)}
-          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-        >
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Kontrolle hinzufuegen
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowRagPanel(!showRagPanel)}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors border border-purple-200"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+            KI-Controls aus RAG
+          </button>
+          <button
+            onClick={() => setShowAddForm(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            Kontrolle hinzufuegen
+          </button>
+        </div>
       </StepHeader>
 
       {/* Add Form */}
@@ -654,6 +737,124 @@ export default function ControlsPage() {
         />
       )}
 
+      {/* RAG Controls Panel */}
+      {showRagPanel && (
+        <div className="bg-purple-50 border border-purple-200 rounded-xl p-6">
+          <div className="flex items-start justify-between mb-4">
+            <div>
+              <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 schlägt passende Controls vor.
+              </p>
+            </div>
+            <button onClick={() => setShowRagPanel(false)} className="text-purple-400 hover:text-purple-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 className="flex items-center gap-3 mb-4">
+            <input
+              type="text"
+              value={selectedRequirementId}
+              onChange={e => setSelectedRequirementId(e.target.value)}
+              placeholder="Anforderungs-UUID eingeben..."
+              className="flex-1 px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white"
+            />
+            {state.requirements.length > 0 && (
+              <select
+                value={selectedRequirementId}
+                onChange={e => setSelectedRequirementId(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 wählen...</option>
+                {state.requirements.slice(0, 20).map(r => (
+                  <option key={r.id} value={r.id}>{r.id.substring(0, 8)}... — {r.title?.substring(0, 40)}</option>
+                ))}
+              </select>
+            )}
+            <button
+              onClick={suggestControlsFromRAG}
+              disabled={ragLoading || !selectedRequirementId}
+              className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-colors ${
+                ragLoading || !selectedRequirementId
+                  ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                  : 'bg-purple-600 text-white hover:bg-purple-700'
+              }`}
+            >
+              {ragLoading ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  Analysiere...
+                </>
+              ) : (
+                <>
+                  <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>
+                  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} 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">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <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>
+                      </div>
+                      <h5 className="font-semibold text-gray-900">{suggestion.title}</h5>
+                      <p className="text-sm text-gray-600 mt-1">{suggestion.description}</p>
+                      {suggestion.pass_criteria && (
+                        <p className="text-xs text-gray-500 mt-1">
+                          <span className="font-medium">Erfolgskriterium:</span> {suggestion.pass_criteria}
+                        </p>
+                      )}
+                      {suggestion.is_automated && (
+                        <span className="mt-1 inline-block px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded">
+                          Automatisierbar {suggestion.automation_tool ? `(${suggestion.automation_tool})` : ''}
+                        </span>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => addSuggestedControl(suggestion)}
+                      className="flex-shrink-0 flex items-center gap-1 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors"
+                    >
+                      <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>
+                      Hinzufügen
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {!ragLoading && ragSuggestions.length === 0 && selectedRequirementId && (
+            <p className="text-sm text-purple-600 italic">
+              Klicken Sie auf &quot;Vorschläge generieren&quot;, um KI-Controls abzurufen.
+            </p>
+          )}
+        </div>
+      )}
+
       {/* Error Banner */}
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">