refactor: split control library into components, add generator UI

- Extract ControlForm, ControlDetail, GeneratorModal, helpers into
  separate component files (max ~470 lines each, was 1210)
- Add Collection selector in Generator modal
- Add Job History view in Generator modal
- Add Review Queue button with counter badge
- Add review mode navigation (prev/next through review items)
- Add vitest tests for helpers (getDomain, constants, options)

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

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

@@ -0,0 +1,170 @@
+import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import React from 'react'
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface OpenAnchor {
+  framework: string
+  ref: string
+  url: string
+}
+
+export interface EvidenceItem {
+  type: string
+  description: string
+}
+
+export interface CanonicalControl {
+  id: string
+  framework_id: string
+  control_id: string
+  title: string
+  objective: string
+  rationale: string
+  scope: {
+    platforms?: string[]
+    components?: string[]
+    data_classes?: string[]
+  }
+  requirements: string[]
+  test_procedure: string[]
+  evidence: EvidenceItem[]
+  severity: string
+  risk_score: number | null
+  implementation_effort: string | null
+  evidence_confidence: number | null
+  open_anchors: OpenAnchor[]
+  release_state: string
+  tags: string[]
+  license_rule?: number | null
+  source_original_text?: string | null
+  source_citation?: Record<string, string> | null
+  customer_visible?: boolean
+  generation_metadata?: Record<string, unknown> | null
+  created_at: string
+  updated_at: string
+}
+
+export interface Framework {
+  id: string
+  framework_id: string
+  name: string
+  version: string
+  description: string
+  release_state: string
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+export const BACKEND_URL = '/api/sdk/v1/canonical'
+
+export const SEVERITY_CONFIG: Record<string, { bg: string; label: string; icon: React.ComponentType<{ className?: string }> }> = {
+  critical: { bg: 'bg-red-100 text-red-800', label: 'Kritisch', icon: AlertTriangle },
+  high: { bg: 'bg-orange-100 text-orange-800', label: 'Hoch', icon: AlertTriangle },
+  medium: { bg: 'bg-yellow-100 text-yellow-800', label: 'Mittel', icon: Info },
+  low: { bg: 'bg-green-100 text-green-800', label: 'Niedrig', icon: CheckCircle2 },
+}
+
+export const EFFORT_LABELS: Record<string, string> = {
+  s: 'Klein (S)',
+  m: 'Mittel (M)',
+  l: 'Gross (L)',
+  xl: 'Sehr gross (XL)',
+}
+
+export const EMPTY_CONTROL = {
+  framework_id: 'bp_security_v1',
+  control_id: '',
+  title: '',
+  objective: '',
+  rationale: '',
+  scope: { platforms: [] as string[], components: [] as string[], data_classes: [] as string[] },
+  requirements: [''],
+  test_procedure: [''],
+  evidence: [{ type: '', description: '' }],
+  severity: 'medium',
+  risk_score: null as number | null,
+  implementation_effort: 'm' as string | null,
+  open_anchors: [{ framework: '', ref: '', url: '' }],
+  release_state: 'draft',
+  tags: [] as string[],
+}
+
+export const DOMAIN_OPTIONS = [
+  { value: 'AUTH', label: 'AUTH — Authentifizierung' },
+  { value: 'CRYPT', label: 'CRYPT — Kryptographie' },
+  { value: 'NET', label: 'NET — Netzwerk' },
+  { value: 'DATA', label: 'DATA — Datenschutz' },
+  { value: 'LOG', label: 'LOG — Logging' },
+  { value: 'ACC', label: 'ACC — Zugriffskontrolle' },
+  { value: 'SEC', label: 'SEC — Sicherheit' },
+  { value: 'INC', label: 'INC — Incident Response' },
+  { value: 'AI', label: 'AI — Kuenstliche Intelligenz' },
+  { value: 'COMP', label: 'COMP — Compliance' },
+]
+
+export const COLLECTION_OPTIONS = [
+  { value: 'bp_compliance_ce', label: 'CE (OWASP, ENISA, BSI)' },
+  { value: 'bp_compliance_gesetze', label: 'Gesetze (EU, DE, BSI)' },
+  { value: 'bp_compliance_datenschutz', label: 'Datenschutz' },
+  { value: 'bp_compliance_recht', label: 'Recht' },
+  { value: 'bp_dsfa_corpus', label: 'DSFA Corpus' },
+  { value: 'bp_legal_templates', label: 'Legal Templates' },
+]
+
+// =============================================================================
+// BADGE COMPONENTS
+// =============================================================================
+
+export function SeverityBadge({ severity }: { severity: string }) {
+  const config = SEVERITY_CONFIG[severity] || SEVERITY_CONFIG.medium
+  const Icon = config.icon
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${config.bg}`}>
+      <Icon className="w-3 h-3" />
+      {config.label}
+    </span>
+  )
+}
+
+export function StateBadge({ state }: { state: string }) {
+  const config: Record<string, string> = {
+    draft: 'bg-gray-100 text-gray-600',
+    review: 'bg-blue-100 text-blue-700',
+    approved: 'bg-green-100 text-green-700',
+    deprecated: 'bg-red-100 text-red-600',
+    needs_review: 'bg-yellow-100 text-yellow-800',
+    too_close: 'bg-red-100 text-red-700',
+    duplicate: 'bg-orange-100 text-orange-700',
+  }
+  const labels: Record<string, string> = {
+    needs_review: 'Review noetig',
+    too_close: 'Zu aehnlich',
+    duplicate: 'Duplikat',
+  }
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config[state] || config.draft}`}>
+      {labels[state] || state}
+    </span>
+  )
+}
+
+export function LicenseRuleBadge({ rule }: { rule: number | null | undefined }) {
+  if (!rule) return null
+  const config: Record<number, { bg: string; label: string }> = {
+    1: { bg: 'bg-green-100 text-green-700', label: 'Free Use' },
+    2: { bg: 'bg-blue-100 text-blue-700', label: 'Zitation' },
+    3: { bg: 'bg-amber-100 text-amber-700', label: 'Reformuliert' },
+  }
+  const c = config[rule]
+  if (!c) return null
+  return <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${c.bg}`}>{c.label}</span>
+}
+
+export function getDomain(controlId: string): string {
+  return controlId.split('-')[0] || ''
+}