feat: add compliance modules 2-5 (dashboard, security templates, process manager, evidence collector)

Module 2: Extended Compliance Dashboard with roadmap, module-status, next-actions, snapshots, score-history
Module 3: 7 German security document templates (IT-Sicherheitskonzept, Datenschutz, Backup, Logging, Incident-Response, Zugriff, Risikomanagement)
Module 4: Compliance Process Manager with CRUD, complete/skip/seed, ~50 seed tasks, 3-tab UI
Module 5: Evidence Collector Extended with automated checks, control-mapping, coverage report, 4-tab UI

Also includes: canonical control library enhancements (verification method, categories, dedup), control generator improvements, RAG client extensions

52 tests pass, frontend builds clean.

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

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

@@ -8,7 +8,7 @@ import {
 } from 'lucide-react'
 import {
   CanonicalControl, EFFORT_LABELS, BACKEND_URL,
-  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge,
+  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, TargetAudienceBadge,
   VERIFICATION_METHODS, CATEGORY_OPTIONS,
 } from './helpers'
 
@@ -124,6 +124,7 @@ export function ControlDetail({
               <LicenseRuleBadge rule={ctrl.license_rule} />
               <VerificationMethodBadge method={ctrl.verification_method} />
               <CategoryBadge category={ctrl.category} />
+              <TargetAudienceBadge audience={ctrl.target_audience} />
             </div>
             <h2 className="text-lg font-semibold text-gray-900 mt-1">{ctrl.title}</h2>
           </div>
@@ -163,22 +164,46 @@ export function ControlDetail({
           <p className="text-sm text-gray-700 leading-relaxed">{ctrl.rationale}</p>
         </section>
 
-        {/* Source Info (Rule 1 + 2) */}
+        {/* Gesetzliche Grundlage (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">
+            <div className="flex items-center gap-2 mb-3">
               <Scale className="w-4 h-4 text-blue-600" />
-              <h3 className="text-sm font-semibold text-blue-900">Quellenangabe</h3>
+              <h3 className="text-sm font-semibold text-blue-900">Gesetzliche Grundlage</h3>
+              {ctrl.license_rule === 1 && (
+                <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Direkte gesetzliche Pflicht</span>
+              )}
+              {ctrl.license_rule === 2 && (
+                <span className="text-xs bg-teal-100 text-teal-700 px-2 py-0.5 rounded-full">Standard mit Zitationspflicht</span>
+              )}
             </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 className="flex items-start gap-3">
+              <div className="flex-1">
+                {ctrl.source_citation.source && (
+                  <p className="text-sm font-medium text-blue-900 mb-1">{ctrl.source_citation.source}</p>
+                )}
+                {ctrl.source_citation.license && (
+                  <p className="text-xs text-blue-600">Lizenz: {ctrl.source_citation.license}</p>
+                )}
+                {ctrl.source_citation.license_notice && (
+                  <p className="text-xs text-blue-600 mt-0.5">{ctrl.source_citation.license_notice}</p>
+                )}
+              </div>
+              {ctrl.source_citation.url && (
+                <a
+                  href={ctrl.source_citation.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap"
+                >
+                  <ExternalLink className="w-3.5 h-3.5" />Quelle
+                </a>
+              )}
             </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">
+                <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 whitespace-pre-wrap">
                   {ctrl.source_original_text}
                 </p>
               </details>
@@ -186,6 +211,19 @@ export function ControlDetail({
           </section>
         )}
 
+        {/* Impliziter Gesetzesbezug (Rule 3 — kein Originaltext, aber ggf. Gesetzesbezug ueber Anchors) */}
+        {!ctrl.source_citation && ctrl.open_anchors.length > 0 && (
+          <section className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+            <div className="flex items-center gap-2">
+              <Scale className="w-4 h-4 text-amber-600" />
+              <p className="text-xs text-amber-700">
+                Dieser Control setzt implizit gesetzliche Anforderungen um (z.B. DSGVO Art. 32, NIS2 Art. 21).
+                Die konkreten Massnahmen leiten sich aus den Open-Source-Referenzen unten ab.
+              </p>
+            </div>
+          </section>
+        )}
+
         {/* Scope */}
         {(ctrl.scope.platforms?.length || ctrl.scope.components?.length || ctrl.scope.data_classes?.length) ? (
           <section>

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

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { BookOpen, Trash2, Save, X } from 'lucide-react'
-import { EMPTY_CONTROL, VERIFICATION_METHODS, CATEGORY_OPTIONS } from './helpers'
+import { EMPTY_CONTROL, VERIFICATION_METHODS, CATEGORY_OPTIONS, TARGET_AUDIENCE_OPTIONS } from './helpers'
 
 export function ControlForm({
   initial,
@@ -268,8 +268,8 @@ export function ControlForm({
         </div>
       </div>
 
-      {/* Verification Method & Category */}
-      <div className="grid grid-cols-2 gap-4">
+      {/* Verification Method, Category & Target Audience */}
+      <div className="grid grid-cols-3 gap-4">
         <div>
           <label className="block text-xs font-medium text-gray-600 mb-1">Nachweismethode</label>
           <select
@@ -297,6 +297,20 @@ export function ControlForm({
             ))}
           </select>
         </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Zielgruppe</label>
+          <select
+            value={form.target_audience || ''}
+            onChange={e => setForm({ ...form, target_audience: e.target.value || null })}
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg"
+          >
+            <option value="">— Nicht zugewiesen —</option>
+            {Object.entries(TARGET_AUDIENCE_OPTIONS).map(([k, v]) => (
+              <option key={k} value={k}>{v.label}</option>
+            ))}
+          </select>
+          <p className="text-xs text-gray-400 mt-1">Fuer wen ist dieses Control relevant?</p>
+        </div>
       </div>
     </div>
   )

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

@@ -44,6 +44,7 @@ export interface CanonicalControl {
   customer_visible?: boolean
   verification_method: string | null
   category: string | null
+  target_audience: string | null
   generation_metadata?: Record<string, unknown> | null
   created_at: string
   updated_at: string
@@ -96,6 +97,7 @@ export const EMPTY_CONTROL = {
   tags: [] as string[],
   verification_method: null as string | null,
   category: null as string | null,
+  target_audience: null as string | null,
 }
 
 export const DOMAIN_OPTIONS = [
@@ -138,6 +140,13 @@ export const CATEGORY_OPTIONS = [
   { value: 'identity', label: 'Identitaetsmanagement' },
 ]
 
+export const TARGET_AUDIENCE_OPTIONS: Record<string, { bg: string; label: string }> = {
+  enterprise: { bg: 'bg-cyan-100 text-cyan-700', label: 'Unternehmen' },
+  authority: { bg: 'bg-rose-100 text-rose-700', label: 'Behoerden' },
+  provider: { bg: 'bg-violet-100 text-violet-700', label: 'Anbieter' },
+  all: { bg: 'bg-gray-100 text-gray-700', label: 'Alle' },
+}
+
 export const COLLECTION_OPTIONS = [
   { value: 'bp_compliance_ce', label: 'CE (OWASP, ENISA, BSI)' },
   { value: 'bp_compliance_gesetze', label: 'Gesetze (EU, DE, BSI)' },
@@ -213,6 +222,13 @@ export function CategoryBadge({ category }: { category: string | null }) {
   )
 }
 
+export function TargetAudienceBadge({ audience }: { audience: string | null }) {
+  if (!audience) return null
+  const config = TARGET_AUDIENCE_OPTIONS[audience]
+  if (!config) return null
+  return <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config.bg}`}>{config.label}</span>
+}
+
 export function getDomain(controlId: string): string {
   return controlId.split('-')[0] || ''
 }

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

@@ -2,13 +2,14 @@
 
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import {
-  Shield, Search, ChevronRight, Filter, Lock,
+  Shield, Search, ChevronRight, ChevronLeft, Filter, Lock,
   BookOpen, Plus, Zap, BarChart3, ListChecks,
+  ChevronsLeft, ChevronsRight,
 } from 'lucide-react'
 import {
   CanonicalControl, Framework, BACKEND_URL, EMPTY_CONTROL,
-  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge,
-  getDomain, VERIFICATION_METHODS, CATEGORY_OPTIONS,
+  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, TargetAudienceBadge,
+  getDomain, VERIFICATION_METHODS, CATEGORY_OPTIONS, TARGET_AUDIENCE_OPTIONS,
 } from './components/helpers'
 import { ControlForm } from './components/ControlForm'
 import { ControlDetail } from './components/ControlDetail'
@@ -32,6 +33,7 @@ export default function ControlLibraryPage() {
   const [stateFilter, setStateFilter] = useState<string>('')
   const [verificationFilter, setVerificationFilter] = useState<string>('')
   const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const [audienceFilter, setAudienceFilter] = useState<string>('')
 
   // CRUD state
   const [mode, setMode] = useState<'list' | 'detail' | 'create' | 'edit'>('list')
@@ -42,6 +44,10 @@ export default function ControlLibraryPage() {
   const [processedStats, setProcessedStats] = useState<Array<Record<string, unknown>>>([])
   const [showStats, setShowStats] = useState(false)
 
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1)
+  const PAGE_SIZE = 50
+
   // Review mode
   const [reviewMode, setReviewMode] = useState(false)
   const [reviewIndex, setReviewIndex] = useState(0)
@@ -80,6 +86,7 @@ export default function ControlLibraryPage() {
       if (stateFilter && c.release_state !== stateFilter) return false
       if (verificationFilter && c.verification_method !== verificationFilter) return false
       if (categoryFilter && c.category !== categoryFilter) return false
+      if (audienceFilter && c.target_audience !== audienceFilter) return false
       if (searchQuery) {
         const q = searchQuery.toLowerCase()
         return (
@@ -91,7 +98,17 @@ export default function ControlLibraryPage() {
       }
       return true
     })
-  }, [controls, severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, searchQuery])
+  }, [controls, severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, searchQuery])
+
+  // Reset page when filters change
+  useEffect(() => { setCurrentPage(1) }, [severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, searchQuery])
+
+  // Pagination
+  const totalPages = Math.max(1, Math.ceil(filteredControls.length / PAGE_SIZE))
+  const paginatedControls = useMemo(() => {
+    const start = (currentPage - 1) * PAGE_SIZE
+    return filteredControls.slice(start, start + PAGE_SIZE)
+  }, [filteredControls, currentPage])
 
   // Review queue items
   const reviewItems = useMemo(() => {
@@ -413,6 +430,16 @@ export default function ControlLibraryPage() {
               <option key={c.value} value={c.value}>{c.label}</option>
             ))}
           </select>
+          <select
+            value={audienceFilter}
+            onChange={e => setAudienceFilter(e.target.value)}
+            className="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          >
+            <option value="">Alle Zielgruppen</option>
+            {Object.entries(TARGET_AUDIENCE_OPTIONS).map(([k, v]) => (
+              <option key={k} value={k}>{v.label}</option>
+            ))}
+          </select>
         </div>
 
         {/* Processing Stats */}
@@ -443,10 +470,19 @@ export default function ControlLibraryPage() {
         />
       )}
 
+      {/* Pagination Header */}
+      <div className="px-6 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between text-xs text-gray-500">
+        <span>
+          {filteredControls.length} Controls gefunden
+          {filteredControls.length !== controls.length && ` (von ${controls.length} gesamt)`}
+        </span>
+        <span>Seite {currentPage} von {totalPages}</span>
+      </div>
+
       {/* Control List */}
       <div className="flex-1 overflow-y-auto p-6">
         <div className="space-y-3">
-          {filteredControls.map(ctrl => (
+          {paginatedControls.map(ctrl => (
             <button
               key={ctrl.control_id}
               onClick={() => { setSelectedControl(ctrl); setMode('detail') }}
@@ -454,13 +490,14 @@ export default function ControlLibraryPage() {
             >
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
+                  <div className="flex items-center gap-2 mb-1 flex-wrap">
                     <span className="text-xs font-mono text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{ctrl.control_id}</span>
                     <SeverityBadge severity={ctrl.severity} />
                     <StateBadge state={ctrl.release_state} />
                     <LicenseRuleBadge rule={ctrl.license_rule} />
                     <VerificationMethodBadge method={ctrl.verification_method} />
                     <CategoryBadge category={ctrl.category} />
+                    <TargetAudienceBadge audience={ctrl.target_audience} />
                     {ctrl.risk_score !== null && (
                       <span className="text-xs text-gray-400">Score: {ctrl.risk_score}</span>
                     )}
@@ -472,11 +509,14 @@ export default function ControlLibraryPage() {
                   <div className="flex items-center gap-2 mt-2">
                     <BookOpen className="w-3 h-3 text-green-600" />
                     <span className="text-xs text-green-700">
-                      {ctrl.open_anchors.length} Open-Source-Referenzen:
-                    </span>
-                    <span className="text-xs text-gray-500">
-                      {ctrl.open_anchors.map(a => a.framework).filter((v, i, arr) => arr.indexOf(v) === i).join(', ')}
+                      {ctrl.open_anchors.length} Referenzen
                     </span>
+                    {ctrl.source_citation?.source && (
+                      <>
+                        <span className="text-gray-300">|</span>
+                        <span className="text-xs text-blue-600">{ctrl.source_citation.source}</span>
+                      </>
+                    )}
                   </div>
                 </div>
                 <ChevronRight className="w-4 h-4 text-gray-300 group-hover:text-purple-500 flex-shrink-0 mt-1 ml-4" />
@@ -492,6 +532,72 @@ export default function ControlLibraryPage() {
             </div>
           )}
         </div>
+
+        {/* Pagination Controls */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-center gap-2 mt-6 pb-4">
+            <button
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Erste Seite"
+            >
+              <ChevronsLeft className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+              disabled={currentPage === 1}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Vorherige Seite"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+
+            {/* Page numbers */}
+            {Array.from({ length: totalPages }, (_, i) => i + 1)
+              .filter(p => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
+              .reduce<(number | 'dots')[]>((acc, p, i, arr) => {
+                if (i > 0 && p - (arr[i - 1] as number) > 1) acc.push('dots')
+                acc.push(p)
+                return acc
+              }, [])
+              .map((p, i) =>
+                p === 'dots' ? (
+                  <span key={`dots-${i}`} className="px-1 text-gray-400">...</span>
+                ) : (
+                  <button
+                    key={p}
+                    onClick={() => setCurrentPage(p as number)}
+                    className={`w-8 h-8 text-sm rounded-lg ${
+                      currentPage === p
+                        ? 'bg-purple-600 text-white'
+                        : 'text-gray-600 hover:bg-purple-50 hover:text-purple-600'
+                    }`}
+                  >
+                    {p}
+                  </button>
+                )
+              )
+            }
+
+            <button
+              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Naechste Seite"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={currentPage === totalPages}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Letzte Seite"
+            >
+              <ChevronsRight className="w-4 h-4" />
+            </button>
+          </div>
+        )}
       </div>
     </div>
   )