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>
2026-03-23 08:14:29 +01:00
parent 0027f78fc5
commit ac6134ce6d
7 changed files with 511 additions and 43 deletions
--- a/admin-compliance/app/api/sdk/v1/canonical/route.ts
+++ b/admin-compliance/app/api/sdk/v1/canonical/route.ts
@@ -27,7 +27,7 @@ export async function GET(request: NextRequest) {
      case 'controls': {
        const controlParams = new URLSearchParams()
        const passthrough = ['severity', 'domain', 'release_state', 'verification_method', 'category',
-          'target_audience', 'source', 'search', 'sort', 'order', 'limit', 'offset']
+          'target_audience', 'source', 'search', 'control_type', 'sort', 'order', 'limit', 'offset']
        for (const key of passthrough) {
          const val = searchParams.get(key)
          if (val) controlParams.set(key, val)
@@ -40,7 +40,7 @@ export async function GET(request: NextRequest) {
      case 'controls-count': {
        const countParams = new URLSearchParams()
        const countPassthrough = ['severity', 'domain', 'release_state', 'verification_method', 'category',
-          'target_audience', 'source', 'search']
+          'target_audience', 'source', 'search', 'control_type']
        for (const key of countPassthrough) {
          const val = searchParams.get(key)
          if (val) countParams.set(key, val)
@@ -99,6 +99,15 @@ export async function GET(request: NextRequest) {
        backendPath = '/api/compliance/v1/canonical/categories'
        break

+      case 'traceability': {
+        const traceId = searchParams.get('id')
+        if (!traceId) {
+          return NextResponse.json({ error: 'Missing control id' }, { status: 400 })
+        }
+        backendPath = `/api/compliance/v1/canonical/controls/${encodeURIComponent(traceId)}/traceability`
+        break
+      }
+
      case 'similar': {
        const simControlId = searchParams.get('id')
        if (!simControlId) {
--- a/admin-compliance/app/sdk/control-library/components/ControlDetail.tsx
+++ b/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>
        )}

--- a/admin-compliance/app/sdk/control-library/components/helpers.tsx
+++ b/admin-compliance/app/sdk/control-library/components/helpers.tsx
@@ -282,7 +282,7 @@ export function GenerationStrategyBadge({ strategy }: { strategy: string | null
  if (strategy === 'phase74_gap_fill') {
    return <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">v5 Gap</span>
  }
-  if (strategy === 'pass0b_atomic') {
+  if (strategy === 'pass0b_atomic' || strategy === 'pass0b') {
    return <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-violet-100 text-violet-700">Atomar</span>
  }
  return <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500">{strategy}</span>
--- a/admin-compliance/app/sdk/control-library/page.tsx
+++ b/admin-compliance/app/sdk/control-library/page.tsx
@@ -53,6 +53,7 @@ export default function ControlLibraryPage() {
  const [categoryFilter, setCategoryFilter] = useState<string>('')
  const [audienceFilter, setAudienceFilter] = useState<string>('')
  const [sourceFilter, setSourceFilter] = useState<string>('')
+  const [typeFilter, setTypeFilter] = useState<string>('')
  const [sortBy, setSortBy] = useState<'id' | 'newest' | 'oldest' | 'source'>('id')

  // CRUD state
@@ -94,10 +95,11 @@ export default function ControlLibraryPage() {
    if (categoryFilter) p.set('category', categoryFilter)
    if (audienceFilter) p.set('target_audience', audienceFilter)
    if (sourceFilter) p.set('source', sourceFilter)
+    if (typeFilter) p.set('control_type', typeFilter)
    if (debouncedSearch) p.set('search', debouncedSearch)
    if (extra) for (const [k, v] of Object.entries(extra)) p.set(k, v)
    return p.toString()
-  }, [severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, sourceFilter, debouncedSearch])
+  }, [severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, sourceFilter, typeFilter, debouncedSearch])

  // Load metadata (domains, sources — once + on refresh)
  const loadMeta = useCallback(async () => {
@@ -165,7 +167,7 @@ export default function ControlLibraryPage() {
  useEffect(() => { loadControls() }, [loadControls])

  // Reset page when filters change
-  useEffect(() => { setCurrentPage(1) }, [severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, sourceFilter, debouncedSearch, sortBy])
+  useEffect(() => { setCurrentPage(1) }, [severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, sourceFilter, typeFilter, debouncedSearch, sortBy])

  // Pagination
  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE))
@@ -664,6 +666,15 @@ export default function ControlLibraryPage() {
                <option key={s.source} value={s.source}>{s.source} ({s.count})</option>
              ))}
            </select>
+            <select
+              value={typeFilter}
+              onChange={e => setTypeFilter(e.target.value)}
+              className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            >
+              <option value="">Alle Typen</option>
+              <option value="rich">Rich Controls</option>
+              <option value="atomic">Atomare Controls</option>
+            </select>
            <span className="text-gray-300 mx-1">|</span>
            <ArrowUpDown className="w-4 h-4 text-gray-400" />
            <select