feat(mc-browser): MC Detail with member controls + phase filter

Replace ControlDetail (empty for MCs) with MCDetail panel showing:
- MC name, ID, total controls count
- Phase badges as clickable filters
- Member controls list with severity, phase, action, regulation source
- Filter by lifecycle phase (definition, implementation, testing, etc.)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -1,9 +1,8 @@
 'use client'
 
-import { ControlDetail } from '../control-library/components/ControlDetail'
+import React, { useState, useEffect } from 'react'
 import { ControlListView } from '../control-library/components/ControlListView'
 import { useControlLibraryState } from '../control-library/components/useControlLibraryState'
-import { BACKEND_URL } from '../control-library/components/helpers'
 
 /**
  * Master Controls page — reuses the Control Library UI exactly,
@@ -35,46 +34,12 @@ export default function MasterControlsPage() {
     )
   }
 
-  // DETAIL mode — add fallback fields that ControlDetail expects
+  // DETAIL mode — show MC members
   if (state.mode === 'detail' && state.selectedControl) {
-    const c = state.selectedControl
-    const safeCtrl = {
-      ...c,
-      scope: c.scope || { platforms: [], components: [], data_classes: [] },
-      target_audience: c.target_audience || [],
-      requirements: c.requirements || [],
-      test_procedure: c.test_procedure || [],
-      evidence: c.evidence || [],
-      open_anchors: c.open_anchors || [],
-      tags: c.tags || [],
-      risk_score: c.risk_score ?? null,
-      implementation_effort: c.implementation_effort ?? null,
-      generation_metadata: c.generation_metadata || null,
-      source_citation: c.source_citation || null,
-      source_original_text: c.source_original_text || '',
-      verification_method: c.verification_method || null,
-      evidence_type: c.evidence_type || null,
-      release_state: c.release_state || 'active',
-      category: c.category || 'master_control',
-      severity: c.severity || 'medium',
-      parent_control_uuid: c.parent_control_uuid || null,
-      similar_controls: c.similar_controls || [],
-    }
     return (
-      <ControlDetail
+      <MCDetail
-        ctrl={safeCtrl}
+        mc={state.selectedControl}
         onBack={() => { state.setMode('list'); state.setSelectedControl(null) }}
-        onEdit={() => {}}
-        onDelete={async () => {}}
-        onReview={async () => {}}
-        onRefresh={state.fullReload}
-        onCompare={() => {}}
-        onNavigateToControl={async (controlId: string) => {
-          try {
-            const res = await fetch(`${BACKEND_URL}?endpoint=control&id=${controlId}`)
-            if (res.ok) { state.setSelectedControl(await res.json()); state.setMode('detail') }
-          } catch { /* ignore */ }
-        }}
       />
     )
   }
@@ -131,3 +96,141 @@ export default function MasterControlsPage() {
     />
   )
 }
+
+// ── MC Detail Panel ─────────────────────────────────────────────
+
+interface Member {
+  control_id: string
+  title: string
+  severity: string
+  phase: string
+  action: string
+  regulation_source?: string
+  regulation_article?: string
+}
+
+const SEV = {
+  critical: 'bg-red-100 text-red-800',
+  high: 'bg-orange-100 text-orange-800',
+  medium: 'bg-yellow-100 text-yellow-800',
+  low: 'bg-blue-100 text-blue-800',
+} as Record<string, string>
+
+function MCDetail({ mc, onBack }: { mc: Record<string, unknown>; onBack: () => void }) {
+  const [members, setMembers] = useState<Member[]>([])
+  const [loading, setLoading] = useState(true)
+  const [phaseFilter, setPhaseFilter] = useState('')
+
+  const mcId = (mc.control_id || mc.master_control_id || '') as string
+  const mcName = (mc.title || mc.canonical_name || '') as string
+  const totalControls = (mc.total_controls || 0) as number
+  const phases = (mc.phases_covered || []) as string[]
+
+  useEffect(() => {
+    setLoading(true)
+    fetch(`/api/sdk/v1/master-controls?endpoint=control&id=${mcId}`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data?.members) setMembers(data.members)
+        else if (data?.requirements) {
+          // Fallback: parse requirements strings
+          setMembers((data.requirements as string[]).map((req: string) => {
+            const match = req.match(/^\[(\w+)\]\s+(\S+):\s+(.+)$/)
+            return match
+              ? { control_id: match[2], title: match[3], phase: match[1], action: '', severity: '' }
+              : { control_id: '', title: req, phase: '', action: '', severity: '' }
+          }))
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [mcId])
+
+  const filtered = phaseFilter ? members.filter(m => m.phase === phaseFilter) : members
+  const uniquePhases = [...new Set(members.map(m => m.phase).filter(Boolean))]
+  const phaseGroups = uniquePhases.reduce((acc, p) => {
+    acc[p] = members.filter(m => m.phase === p).length
+    return acc
+  }, {} as Record<string, number>)
+
+  return (
+    <div className="max-w-5xl mx-auto">
+      {/* Header */}
+      <button onClick={onBack} className="mb-4 text-purple-600 hover:text-purple-800 text-sm flex items-center gap-1">
+        ← Zurueck zur Liste
+      </button>
+
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-4">
+        <h1 className="text-2xl font-bold text-gray-900">{mcName}</h1>
+        <p className="text-gray-500 mt-1">{mcId} — {totalControls} Atomic Controls</p>
+
+        {/* Phase badges */}
+        <div className="flex flex-wrap gap-2 mt-4">
+          {uniquePhases.map(p => (
+            <button
+              key={p}
+              onClick={() => setPhaseFilter(phaseFilter === p ? '' : p)}
+              className={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
+                phaseFilter === p
+                  ? 'bg-purple-100 border-purple-400 text-purple-800'
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {p} ({phaseGroups[p]})
+            </button>
+          ))}
+          {phaseFilter && (
+            <button onClick={() => setPhaseFilter('')} className="text-xs text-gray-400 hover:text-gray-600 ml-2">
+              Filter aufheben
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Members */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+        <div className="px-4 py-3 bg-gray-50 border-b text-sm text-gray-500">
+          {filtered.length} von {members.length} Controls{phaseFilter ? ` (Phase: ${phaseFilter})` : ''}
+        </div>
+
+        {loading ? (
+          <div className="p-8 text-center">
+            <div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-600 border-t-transparent mx-auto" />
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-50">
+            {filtered.map((m, i) => (
+              <div key={i} className="px-4 py-3 hover:bg-gray-50">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xs font-mono text-gray-400">{m.control_id}</span>
+                  {m.severity && (
+                    <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${SEV[m.severity] || 'bg-gray-100 text-gray-600'}`}>
+                      {m.severity}
+                    </span>
+                  )}
+                  {m.phase && (
+                    <span className="text-[10px] text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">
+                      {m.phase}
+                    </span>
+                  )}
+                  {m.action && (
+                    <span className="text-[10px] text-gray-400">{m.action}</span>
+                  )}
+                </div>
+                <p className="text-sm text-gray-900">{m.title}</p>
+                {m.regulation_source && (
+                  <p className="text-xs text-blue-600 mt-1">
+                    {m.regulation_source} {m.regulation_article}
+                  </p>
+                )}
+              </div>
+            ))}
+            {filtered.length === 0 && !loading && (
+              <div className="p-8 text-center text-gray-400">Keine Controls gefunden</div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}