feat: control_parent_links population + traceability API + frontend

- _write_atomic_control() now uses RETURNING id and inserts into
  control_parent_links (M:N) with source_regulation, source_article,
  and obligation_candidate_id parsed from parent's source_citation
- New _parse_citation() helper for JSONB source_citation extraction
- New GET /controls/{id}/traceability endpoint returning full chain:
  parent links with obligations, child controls, source_count
- Backend: control_type filter (atomic/rich) for controls + count
- Frontend: Rechtsgrundlagen section in ControlDetail showing all
  parent links per source regulation with obligation text + strength
- Frontend: Atomic/Rich filter dropdown in Control Library list
- Frontend: GenerationStrategyBadge recognizes 'pass0b' strategy
- Tests: 3 new tests for parent_link creation + citation parsing,
  existing batch test mock updated for RETURNING clause

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

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

@@ -1,10 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import {
   ArrowLeft, ExternalLink, BookOpen, Scale, FileText,
   Eye, CheckCircle2, Trash2, Pencil, Clock,
-  ChevronLeft, SkipForward, GitMerge, Search,
+  ChevronLeft, SkipForward, GitMerge, Search, Landmark,
 } from 'lucide-react'
 import {
   CanonicalControl, EFFORT_LABELS, BACKEND_URL,
@@ -25,6 +25,37 @@ interface SimilarControl {
   similarity: number
 }
 
+interface ParentLink {
+  parent_control_id: string
+  parent_title: string
+  link_type: string
+  confidence: number
+  source_regulation: string | null
+  source_article: string | null
+  parent_citation: Record<string, string> | null
+  obligation: {
+    text: string
+    action: string
+    object: string
+    normative_strength: string
+  } | null
+}
+
+interface TraceabilityData {
+  control_id: string
+  title: string
+  is_atomic: boolean
+  parent_links: ParentLink[]
+  children: Array<{
+    control_id: string
+    title: string
+    category: string
+    severity: string
+    decomposition_method: string
+  }>
+  source_count: number
+}
+
 interface ControlDetailProps {
   ctrl: CanonicalControl
   onBack: () => void
@@ -57,9 +88,23 @@ export function ControlDetail({
   const [loadingSimilar, setLoadingSimilar] = useState(false)
   const [selectedDuplicates, setSelectedDuplicates] = useState<Set<string>>(new Set())
   const [merging, setMerging] = useState(false)
+  const [traceability, setTraceability] = useState<TraceabilityData | null>(null)
+  const [loadingTrace, setLoadingTrace] = useState(false)
+
+  const loadTraceability = useCallback(async () => {
+    setLoadingTrace(true)
+    try {
+      const res = await fetch(`${BACKEND_URL}?endpoint=traceability&id=${ctrl.control_id}`)
+      if (res.ok) {
+        setTraceability(await res.json())
+      }
+    } catch { /* ignore */ }
+    finally { setLoadingTrace(false) }
+  }, [ctrl.control_id])
 
   useEffect(() => {
     loadSimilarControls()
+    loadTraceability()
     setSelectedDuplicates(new Set())
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ctrl.control_id])
@@ -242,8 +287,79 @@ export function ControlDetail({
           </section>
         )}
 
-        {/* Parent Control (atomare Controls) */}
-        {ctrl.parent_control_uuid && (
+        {/* Rechtsgrundlagen / Traceability (atomic controls) */}
+        {traceability && traceability.parent_links.length > 0 && (
+          <section className="bg-violet-50 border border-violet-200 rounded-lg p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <Landmark className="w-4 h-4 text-violet-600" />
+              <h3 className="text-sm font-semibold text-violet-900">
+                Rechtsgrundlagen ({traceability.source_count} {traceability.source_count === 1 ? 'Quelle' : 'Quellen'})
+              </h3>
+              <ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
+              {loadingTrace && <span className="text-xs text-violet-400">Laden...</span>}
+            </div>
+            <div className="space-y-3">
+              {traceability.parent_links.map((link, i) => (
+                <div key={i} className="bg-white/60 border border-violet-100 rounded-lg p-3">
+                  <div className="flex items-start gap-2">
+                    <Scale className="w-4 h-4 text-violet-500 mt-0.5 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        {link.source_regulation && (
+                          <span className="text-sm font-semibold text-violet-900">{link.source_regulation}</span>
+                        )}
+                        {link.source_article && (
+                          <span className="text-sm text-violet-700">{link.source_article}</span>
+                        )}
+                        {!link.source_regulation && link.parent_citation?.source && (
+                          <span className="text-sm font-semibold text-violet-900">
+                            {link.parent_citation.source}
+                            {link.parent_citation.article && ` — ${link.parent_citation.article}`}
+                          </span>
+                        )}
+                        <span className={`text-xs px-1.5 py-0.5 rounded ${
+                          link.link_type === 'decomposition' ? 'bg-violet-100 text-violet-600' :
+                          link.link_type === 'dedup_merge' ? 'bg-blue-100 text-blue-600' :
+                          'bg-gray-100 text-gray-600'
+                        }`}>
+                          {link.link_type === 'decomposition' ? 'Ableitung' :
+                           link.link_type === 'dedup_merge' ? 'Dedup' :
+                           link.link_type}
+                        </span>
+                      </div>
+                      <p className="text-xs text-violet-600 mt-1">
+                        via{' '}
+                        <span className="font-mono font-medium text-purple-700 bg-purple-50 px-1 py-0.5 rounded">
+                          {link.parent_control_id}
+                        </span>
+                        {link.parent_title && (
+                          <span className="text-violet-500 ml-1">— {link.parent_title}</span>
+                        )}
+                      </p>
+                      {link.obligation && (
+                        <p className="text-xs text-violet-500 mt-1.5 bg-violet-50 rounded p-2">
+                          <span className={`inline-block mr-1.5 px-1.5 py-0.5 rounded text-xs font-medium ${
+                            link.obligation.normative_strength === 'must' ? 'bg-red-100 text-red-700' :
+                            link.obligation.normative_strength === 'should' ? 'bg-amber-100 text-amber-700' :
+                            'bg-green-100 text-green-700'
+                          }`}>
+                            {link.obligation.normative_strength === 'must' ? 'MUSS' :
+                             link.obligation.normative_strength === 'should' ? 'SOLL' : 'KANN'}
+                          </span>
+                          {link.obligation.text.slice(0, 200)}
+                          {link.obligation.text.length > 200 ? '...' : ''}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Fallback: simple parent display when traceability not loaded yet */}
+        {ctrl.parent_control_uuid && (!traceability || traceability.parent_links.length === 0) && !loadingTrace && (
           <section className="bg-violet-50 border border-violet-200 rounded-lg p-4">
             <div className="flex items-center gap-2 mb-1">
               <GitMerge className="w-4 h-4 text-violet-600" />
@@ -259,12 +375,27 @@ export function ControlDetail({
                 <span className="text-violet-700 ml-1">— {ctrl.parent_control_title}</span>
               )}
             </p>
-            {ctrl.generation_metadata?.obligation_text && (
-              <p className="text-xs text-violet-600 mt-2 bg-violet-100/50 rounded p-2">
-                Obligation: {String(ctrl.generation_metadata.obligation_text).slice(0, 300)}
-                {String(ctrl.generation_metadata.obligation_text).length > 300 ? '...' : ''}
-              </p>
-            )}
+          </section>
+        )}
+
+        {/* Child controls (rich controls that have atomic children) */}
+        {traceability && traceability.children.length > 0 && (
+          <section className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <GitMerge className="w-4 h-4 text-emerald-600" />
+              <h3 className="text-sm font-semibold text-emerald-900">
+                Abgeleitete Controls ({traceability.children.length})
+              </h3>
+            </div>
+            <div className="space-y-1.5">
+              {traceability.children.map((child) => (
+                <div key={child.control_id} className="flex items-center gap-2 text-sm">
+                  <span className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{child.control_id}</span>
+                  <span className="text-gray-700 flex-1 truncate">{child.title}</span>
+                  <SeverityBadge severity={child.severity} />
+                </div>
+              ))}
+            </div>
           </section>
         )}