feat(ui): Master Controls Browser — 13.5K MCs with member drill-down

- New page /sdk/master-controls with sortable, searchable MC list
- Click MC → expandable detail panel with atomic controls
- Shows L1 token, L2 subtopic, phase, severity, regulation source
- API proxy via pg directly to compliance.master_controls
- Sidebar entry added

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

admin-compliance/app/api/sdk/v1/master-controls/route.ts

@@ -0,0 +1,129 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { Pool } from 'pg'
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL || 'postgresql://breakpilot:breakpilot123@bp-core-postgres:5432/breakpilot_db',
+})
+
+/**
+ * GET /api/sdk/v1/master-controls?action=list|detail|members
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const action = searchParams.get('action') || 'list'
+
+    if (action === 'list') {
+      return handleList(searchParams)
+    }
+    if (action === 'detail') {
+      return handleDetail(searchParams)
+    }
+    if (action === 'members') {
+      return handleMembers(searchParams)
+    }
+
+    return NextResponse.json({ error: 'Unknown action' }, { status: 400 })
+  } catch (e) {
+    return NextResponse.json({ error: String(e) }, { status: 500 })
+  }
+}
+
+async function handleList(params: URLSearchParams) {
+  const search = params.get('search') || ''
+  const minControls = parseInt(params.get('min_controls') || '0')
+  const sortBy = params.get('sort') || 'total_controls'
+  const order = params.get('order') || 'DESC'
+  const limit = Math.min(parseInt(params.get('limit') || '100'), 500)
+  const offset = parseInt(params.get('offset') || '0')
+
+  const validSort = ['total_controls', 'canonical_name', 'created_at'].includes(sortBy) ? sortBy : 'total_controls'
+  const validOrder = order === 'ASC' ? 'ASC' : 'DESC'
+
+  let where = 'WHERE 1=1'
+  const args: unknown[] = []
+  let idx = 1
+
+  if (search) {
+    where += ` AND mc.canonical_name ILIKE $${idx}`
+    args.push(`%${search}%`)
+    idx++
+  }
+  if (minControls > 0) {
+    where += ` AND mc.total_controls >= $${idx}`
+    args.push(minControls)
+    idx++
+  }
+
+  const countRes = await pool.query(
+    `SELECT count(*) FROM compliance.master_controls mc ${where}`, args
+  )
+  const total = parseInt(countRes.rows[0].count)
+
+  args.push(limit, offset)
+  const res = await pool.query(
+    `SELECT mc.id, mc.master_control_id, mc.canonical_name,
+            mc.total_controls, mc.phases_covered, mc.phase_control_count
+     FROM compliance.master_controls mc
+     ${where}
+     ORDER BY mc.${validSort} ${validOrder}
+     LIMIT $${idx} OFFSET $${idx + 1}`,
+    args
+  )
+
+  return NextResponse.json({
+    total,
+    limit,
+    offset,
+    master_controls: res.rows,
+  })
+}
+
+async function handleDetail(params: URLSearchParams) {
+  const id = params.get('id')
+  if (!id) return NextResponse.json({ error: 'id required' }, { status: 400 })
+
+  const res = await pool.query(
+    `SELECT mc.id, mc.master_control_id, mc.canonical_name,
+            mc.total_controls, mc.phases_covered, mc.phase_control_count
+     FROM compliance.master_controls mc
+     WHERE mc.master_control_id = $1 OR mc.id::text = $1`,
+    [id]
+  )
+
+  if (res.rows.length === 0) {
+    return NextResponse.json({ error: 'not found' }, { status: 404 })
+  }
+
+  return NextResponse.json({ master_control: res.rows[0] })
+}
+
+async function handleMembers(params: URLSearchParams) {
+  const mcId = params.get('mc_id')
+  if (!mcId) return NextResponse.json({ error: 'mc_id required' }, { status: 400 })
+
+  const limit = Math.min(parseInt(params.get('limit') || '50'), 200)
+  const offset = parseInt(params.get('offset') || '0')
+
+  const res = await pool.query(
+    `SELECT cc.control_id, cc.title, cc.objective, cc.severity,
+            mcm.phase, mcm.action,
+            COALESCE(pc.source_citation::jsonb->>'source', '') as regulation_source,
+            COALESCE(pc.source_citation::jsonb->>'article', '') as regulation_article
+     FROM compliance.master_control_members mcm
+     JOIN compliance.canonical_controls cc ON cc.id = mcm.control_uuid
+     LEFT JOIN compliance.canonical_controls pc ON pc.id = cc.parent_control_uuid
+     WHERE mcm.master_control_uuid = (
+       SELECT id FROM compliance.master_controls WHERE master_control_id = $1 OR id::text = $1 LIMIT 1
+     )
+     ORDER BY mcm.phase, cc.control_id
+     LIMIT $2 OFFSET $3`,
+    [mcId, limit, offset]
+  )
+
+  return NextResponse.json({
+    mc_id: mcId,
+    members: res.rows,
+    count: res.rows.length,
+  })
+}

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

@@ -0,0 +1,266 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+
+interface MC {
+  id: string
+  master_control_id: string
+  canonical_name: string
+  total_controls: number
+  phases_covered: string[]
+  phase_control_count: Record<string, number>
+}
+
+interface Member {
+  control_id: string
+  title: string
+  objective: string
+  severity: string
+  phase: string
+  action: string
+  regulation_source: string
+  regulation_article: string
+}
+
+const API = '/api/sdk/v1/master-controls'
+const PAGE_SIZE = 50
+
+const SEV_COLORS: Record<string, string> = {
+  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',
+}
+
+export default function MasterControlsPage() {
+  const [mcs, setMcs] = useState<MC[]>([])
+  const [total, setTotal] = useState(0)
+  const [offset, setOffset] = useState(0)
+  const [search, setSearch] = useState('')
+  const [sortBy, setSortBy] = useState('total_controls')
+  const [sortOrder, setSortOrder] = useState('DESC')
+  const [loading, setLoading] = useState(false)
+
+  // Detail view
+  const [selectedMC, setSelectedMC] = useState<MC | null>(null)
+  const [members, setMembers] = useState<Member[]>([])
+  const [membersLoading, setMembersLoading] = useState(false)
+
+  const loadMCs = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({
+        action: 'list', limit: String(PAGE_SIZE), offset: String(offset),
+        sort: sortBy, order: sortOrder,
+      })
+      if (search) params.set('search', search)
+      const res = await fetch(`${API}?${params}`)
+      if (res.ok) {
+        const data = await res.json()
+        setMcs(data.master_controls || [])
+        setTotal(data.total || 0)
+      }
+    } catch { /* ignore */ }
+    setLoading(false)
+  }, [offset, search, sortBy, sortOrder])
+
+  useEffect(() => { loadMCs() }, [loadMCs])
+
+  const loadMembers = async (mc: MC) => {
+    setSelectedMC(mc)
+    setMembersLoading(true)
+    try {
+      const res = await fetch(`${API}?action=members&mc_id=${mc.master_control_id}&limit=200`)
+      if (res.ok) {
+        const data = await res.json()
+        setMembers(data.members || [])
+      }
+    } catch { /* ignore */ }
+    setMembersLoading(false)
+  }
+
+  const handleSort = (field: string) => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === 'DESC' ? 'ASC' : 'DESC')
+    } else {
+      setSortBy(field)
+      setSortOrder('DESC')
+    }
+    setOffset(0)
+  }
+
+  const totalPages = Math.ceil(total / PAGE_SIZE)
+  const currentPage = Math.floor(offset / PAGE_SIZE) + 1
+
+  // L1 token = part before first underscore that has a sub-part
+  const getL1Token = (name: string) => {
+    const parts = name.split('_')
+    // Find the longest known L1 prefix
+    for (let i = Math.min(parts.length, 3); i >= 1; i--) {
+      const candidate = parts.slice(0, i).join('_')
+      if (['access_control', 'audit_logging', 'key_management', 'risk_management',
+           'network_security', 'network_segmentation', 'multi_factor_auth',
+           'transport_encryption', 'data_subject_rights', 'data_breach_notification',
+           'data_processing_agreement', 'data_processing_register',
+           'third_party_management', 'change_management', 'human_resources_security',
+           'physical_security', 'secure_development', 'api_security',
+           'input_validation', 'container_security', 'logging_configuration',
+           'cookie_consent', 'video_surveillance', 'supply_chain_due_diligence',
+           'critical_infrastructure', 'sustainability_reporting',
+           'financial_reporting', 'consumer_protection', 'compliance_audit',
+           'asset_management', 'disaster_recovery', 'patch_management',
+           'password_policy', 'session_management', 'privileged_access',
+           'certificate_management', 'personal_data', 'sensitive_data',
+           'health_data', 'product_safety', 'medical_device', 'payment_services',
+           'supervisory_authority', 'data_retention', 'data_transfer',
+           'data_classification', 'privacy_by_design',
+          ].includes(candidate)) return candidate
+    }
+    return parts[0]
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold text-gray-900">Master Controls</h1>
+          <p className="text-gray-600 mt-1">
+            {total.toLocaleString()} Master Controls mit {mcs.reduce((s, m) => s + m.total_controls, 0).toLocaleString()}+ Atomic Controls
+          </p>
+        </div>
+
+        {/* Search + Filters */}
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
+          <div className="flex items-center gap-3">
+            <input
+              type="text"
+              placeholder="Suche nach MC-Name (z.B. encryption, incident, access_control)..."
+              value={search}
+              onChange={e => { setSearch(e.target.value); setOffset(0) }}
+              className="flex-1 px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+            />
+            <span className="text-sm text-gray-500 whitespace-nowrap">
+              Seite {currentPage} von {totalPages}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex gap-4">
+          {/* MC List */}
+          <div className={`${selectedMC ? 'w-1/2' : 'w-full'} transition-all`}>
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:text-purple-600"
+                        onClick={() => handleSort('canonical_name')}>
+                      Name {sortBy === 'canonical_name' ? (sortOrder === 'ASC' ? '↑' : '↓') : ''}
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase cursor-pointer hover:text-purple-600"
+                        onClick={() => handleSort('total_controls')}>
+                      Controls {sortBy === 'total_controls' ? (sortOrder === 'ASC' ? '↑' : '↓') : ''}
+                    </th>
+                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Phasen</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100">
+                  {loading ? (
+                    <tr><td colSpan={3} className="px-4 py-8 text-center text-gray-400">Laden...</td></tr>
+                  ) : mcs.map(mc => {
+                    const l1 = getL1Token(mc.canonical_name)
+                    const l2 = mc.canonical_name.slice(l1.length + 1) || ''
+                    return (
+                      <tr
+                        key={mc.id}
+                        onClick={() => loadMembers(mc)}
+                        className={`cursor-pointer hover:bg-purple-50 transition-colors ${
+                          selectedMC?.id === mc.id ? 'bg-purple-100' : ''
+                        }`}
+                      >
+                        <td className="px-4 py-3">
+                          <span className="text-xs font-mono bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
+                            {l1}
+                          </span>
+                          {l2 && (
+                            <span className="ml-1.5 text-sm text-gray-700">{l2.replace(/_/g, ' ')}</span>
+                          )}
+                        </td>
+                        <td className="px-4 py-3 text-right text-sm font-medium text-gray-900">
+                          {mc.total_controls}
+                        </td>
+                        <td className="px-4 py-3 text-right text-sm text-gray-500">
+                          {(mc.phases_covered || []).length}
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+
+              {/* Pagination */}
+              <div className="flex items-center justify-between px-4 py-3 border-t bg-gray-50">
+                <button
+                  onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+                  disabled={offset === 0}
+                  className="px-3 py-1 text-sm border rounded disabled:opacity-50"
+                >
+                  Zurueck
+                </button>
+                <span className="text-xs text-gray-500">
+                  {offset + 1}-{Math.min(offset + PAGE_SIZE, total)} von {total}
+                </span>
+                <button
+                  onClick={() => setOffset(offset + PAGE_SIZE)}
+                  disabled={offset + PAGE_SIZE >= total}
+                  className="px-3 py-1 text-sm border rounded disabled:opacity-50"
+                >
+                  Weiter
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Member Detail Panel */}
+          {selectedMC && (
+            <div className="w-1/2">
+              <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-4">
+                <div className="px-4 py-3 bg-purple-50 border-b flex items-center justify-between">
+                  <div>
+                    <h2 className="font-semibold text-purple-900">{selectedMC.canonical_name}</h2>
+                    <p className="text-xs text-purple-600">{selectedMC.total_controls} Controls, {(selectedMC.phases_covered || []).length} Phasen</p>
+                  </div>
+                  <button onClick={() => setSelectedMC(null)} className="text-purple-400 hover:text-purple-600 text-lg">&times;</button>
+                </div>
+
+                <div className="max-h-[70vh] overflow-y-auto">
+                  {membersLoading ? (
+                    <div className="p-8 text-center text-gray-400">Laden...</div>
+                  ) : members.map((m, i) => (
+                    <div key={i} className="px-4 py-3 border-b border-gray-50 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_COLORS[m.severity] || ''}`}>
+                            {m.severity}
+                          </span>
+                        )}
+                        <span className="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{m.phase}</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>
+                  ))}
+                  {members.length === 0 && !membersLoading && (
+                    <div className="p-8 text-center text-gray-400">Keine Members gefunden</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/components/sdk/Sidebar/SidebarModuleList.tsx

@@ -38,6 +38,21 @@ export function SidebarModuleList({ collapsed, projectId, pendingCRCount }: Side
         <AdditionalModuleItem href="/sdk/email-templates" icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>} label="E-Mail-Templates" isActive={pathname === '/sdk/email-templates'} collapsed={collapsed} projectId={projectId} />
       </div>
 
+      {/* Master Controls Browser */}
+      <AdditionalModuleItem
+        href="/sdk/master-controls"
+        icon={
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+        }
+        label="Master Controls"
+        isActive={pathname?.startsWith('/sdk/master-controls') ?? false}
+        collapsed={collapsed}
+        projectId={projectId}
+      />
+
       {/* Maschinenrecht / CE */}
       <div className="border-t border-gray-100 py-2">
         {!collapsed && (