From cadc34dad41877ed10486c64974a92e3f28d8e46 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Sat, 13 Jun 2026 20:35:21 +0200
Subject: [PATCH] =?UTF-8?q?feat(iace):=20CRA=20/=20Cyber=20tab=20=E2=80=94?=
 =?UTF-8?q?=20demo=20CRA=20integration=20on=20the=20Kistenhub=20project?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New "CRA / Cyber" tab in the IACE project (Zusatzmodule). Treats the
Kistenhubgeraet CE project as if it had an IoT module; invented cyber findings
are mapped to CRA Annex I requirements via the REAL backend mapper output
(faithful), and crucially cross-linked to the existing CE safety hazards they
re-open (cyber defeats a mechanically-mitigated guard -> CRA x Machinery Reg).
Frontend fixture for now; live wiring to the mapper endpoint follows.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../cra/_components/CRACyberView.tsx          | 160 ++++++++++++++++++
 .../iace/[projectId]/cra/_hooks/useCRADemo.ts | 117 +++++++++++++
 .../app/sdk/iace/[projectId]/cra/page.tsx     |   9 +
 admin-compliance/app/sdk/iace/layout.tsx      |   1 +
 4 files changed, 287 insertions(+)
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/cra/_components/CRACyberView.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/cra/_hooks/useCRADemo.ts
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx

diff --git a/admin-compliance/app/sdk/iace/[projectId]/cra/_components/CRACyberView.tsx b/admin-compliance/app/sdk/iace/[projectId]/cra/_components/CRACyberView.tsx
new file mode 100644
index 00000000..20a32af5
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/cra/_components/CRACyberView.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { CRADemo } from '../_hooks/useCRADemo'
+
+const RISK_BADGE: Record<string, string> = {
+  CRITICAL: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  HIGH: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+  MEDIUM: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
+  LOW: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
+}
+
+function RiskBadge({ level }: { level: string }) {
+  return (
+    <span className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-semibold ${RISK_BADGE[level] || RISK_BADGE.LOW}`}>
+      {level}
+    </span>
+  )
+}
+
+export function CRACyberView({ data }: { data: CRADemo }) {
+  return (
+    <div className="space-y-6">
+      {/* Co-Pilot framing — advisory, not alarmist */}
+      <div className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/60 dark:bg-purple-900/20 p-4">
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">CRA / Cyber-Risiko</h1>
+        <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{data.scenario}</p>
+        <p className="text-xs text-gray-500 mt-2">
+          Wir verknüpfen die Cyber-Befunde Ihres Repo-Scans mit den CRA-Anforderungen (Annex I) und mit Ihrer
+          bestehenden CE-Risikobeurteilung. Die Punkte sind Handlungsfelder zur gemeinsamen Klärung mit DSB/Anwalt —
+          keine automatische Verstoßfeststellung. <span className="italic">Demo: erfundene Findings, echtes CRA-Mapping.</span>
+        </p>
+      </div>
+
+      {/* Summary tiles */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <Tile label="Cyber-Befunde" value={String(data.findings.length)} />
+        <Tile label="CRA-Anforderungen betroffen" value={String(data.requirements_touched.length)} sub="von 40 (Annex I)" />
+        <Tile label="Abdeckung" value={`${data.coverage_pct}%`} sub="Findings → Anforderung" />
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
+          <p className="text-[11px] text-gray-500 mb-1">Risiko-Verteilung</p>
+          <div className="flex flex-wrap gap-1">
+            {(['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as const).map((lvl) =>
+              data.by_risk[lvl] ? (
+                <span key={lvl} className={`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold ${RISK_BADGE[lvl]}`}>
+                  {data.by_risk[lvl]} {lvl}
+                </span>
+              ) : null,
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Cyber meets Safety — the core integration idea */}
+      <div className="rounded-xl border border-orange-200 dark:border-orange-800 bg-white dark:bg-gray-800">
+        <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Cyber trifft Safety</h2>
+          <p className="text-xs text-gray-500 mt-0.5">
+            Wo ein Cyber-Risiko eine bereits <span className="font-medium">mechanisch gemilderte</span> Gefährdung Ihrer
+            CE-Risikobeurteilung wieder öffnet (CRA × Maschinen-VO).
+          </p>
+        </div>
+        <div className="p-4 space-y-3">
+          {data.cross_links.map((cl, i) => (
+            <div key={i} className="rounded-lg border border-orange-200 dark:border-orange-800/60 bg-orange-50/50 dark:bg-orange-900/10 p-3">
+              <p className="text-sm font-medium text-gray-800 dark:text-gray-200">{cl.safety_hazard}</p>
+              <p className="text-[11px] text-gray-500 mt-0.5">{cl.safety_ref}</p>
+              <div className="mt-2 grid md:grid-cols-2 gap-2 text-xs">
+                <div className="text-gray-600 dark:text-gray-300">
+                  <span className="text-gray-400">Bisherige Maßnahme:</span> {cl.original_measure}
+                </div>
+                <div className="text-gray-600 dark:text-gray-300">
+                  <span className="text-gray-400">Cyber-Befunde:</span> {cl.cyber_finding_ids.join(', ')}
+                </div>
+              </div>
+              <p className="text-xs text-gray-700 dark:text-gray-300 mt-2">{cl.cyber_breaks_it}</p>
+              <span className="inline-block mt-2 rounded px-1.5 py-0.5 text-[10px] font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
+                Restrisiko: {cl.residual}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Findings -> CRA requirement */}
+      <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+        <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Befunde → CRA-Anforderung</h2>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-gray-500 border-b border-gray-200 dark:border-gray-700 text-left">
+                <th className="py-2 px-4">Cyber-Befund</th>
+                <th className="py-2 px-3">CRA-Anforderung</th>
+                <th className="py-2 px-3">Annex I</th>
+                <th className="py-2 px-3">Risiko</th>
+                <th className="py-2 px-4">Maßnahmen</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.findings.map((f) => (
+                <tr key={f.id} className="border-b border-gray-100 dark:border-gray-700/50 align-top">
+                  <td className="py-2 px-4 max-w-xs">
+                    <div className="text-gray-800 dark:text-gray-200">{f.title}</div>
+                    <div className="text-[10px] text-gray-400">{f.id} · {f.cwe} · {f.location}</div>
+                  </td>
+                  <td className="py-2 px-3 text-gray-600 dark:text-gray-300">
+                    <span className="font-medium">{f.primary_requirement}</span> {f.requirement_title}
+                    {f.requirement_ids.length > 1 && (
+                      <span className="text-[10px] text-gray-400"> +{f.requirement_ids.length - 1}</span>
+                    )}
+                  </td>
+                  <td className="py-2 px-3 text-gray-500">{f.annex_anchor}</td>
+                  <td className="py-2 px-3"><RiskBadge level={f.risk_level} /></td>
+                  <td className="py-2 px-4 text-gray-600 dark:text-gray-300">
+                    {f.measures.length ? f.measures.map((me) => me.id).join(', ') : <span className="text-gray-400">—</span>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Measures + deadlines */}
+      <div className="grid md:grid-cols-2 gap-3">
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">Empfohlene Maßnahmen</h2>
+          <ul className="space-y-1.5">
+            {data.open_measures.map((me) => (
+              <li key={me.id} className="text-xs text-gray-600 dark:text-gray-300">
+                <span className="font-medium text-gray-700 dark:text-gray-200">{me.id}</span> — {me.description}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">CRA-Fristen</h2>
+          <ul className="space-y-1.5">
+            {data.deadlines.map((d) => (
+              <li key={d.date} className="text-xs text-gray-600 dark:text-gray-300 flex gap-2">
+                <span className="font-mono text-gray-500">{d.date}</span> {d.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Tile({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
+      <p className="text-[11px] text-gray-500">{label}</p>
+      <p className="text-xl font-semibold text-gray-900 dark:text-gray-100">{value}</p>
+      {sub && <p className="text-[10px] text-gray-400">{sub}</p>}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/cra/_hooks/useCRADemo.ts b/admin-compliance/app/sdk/iace/[projectId]/cra/_hooks/useCRADemo.ts
new file mode 100644
index 00000000..681fcf89
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/cra/_hooks/useCRADemo.ts
@@ -0,0 +1,117 @@
+'use client'
+
+// DEMO data layer for the CRA / Cyber tab. The Kistenhubgeraet (crate lift) CE
+// project is treated AS IF it had an internet-connected IoT module. The cyber
+// findings are invented, but the CRA mapping below is the REAL output of the
+// deterministic backend mapper (compliance/services/cra_finding_mapper.py) run
+// on these findings — so the integration concept is faithful. The cross_links
+// (cyber re-opens a mechanically-mitigated safety hazard) are the core idea we
+// want to validate visually. Live wiring replaces this fixture later.
+
+export interface CRAFinding {
+  id: string
+  title: string
+  location: string
+  scanner_severity: string
+  cwe: string
+  primary_requirement: string
+  requirement_title: string
+  requirement_ids: string[]
+  annex_anchor: string
+  iso27001_ref: string[]
+  risk_level: string
+  measures: { id: string; description: string }[]
+}
+
+export interface CrossLink {
+  cyber_finding_ids: string[]
+  safety_hazard: string
+  safety_ref: string
+  original_measure: string
+  cyber_breaks_it: string
+  residual: string
+}
+
+export interface CRADemo {
+  scenario: string
+  findings: CRAFinding[]
+  by_risk: Record<string, number>
+  coverage_pct: number
+  requirements_touched: string[]
+  open_measures: { id: string; description: string }[]
+  cross_links: CrossLink[]
+  deadlines: { date: string; label: string }[]
+}
+
+const MEASURE_DESC: Record<string, string> = {
+  M541: 'Signierte Software- und Firmware-Updates mit Rollback-Schutz',
+  M542: 'Initiale Default-Passwoerter beim ersten Start erzwungen aendern',
+  M545: 'Cybersecurity-Hardening-Guide fuer den Anwender beilegen',
+  M547: 'Updates ueber authentisierten Kanal mit Integritaetspruefung',
+}
+
+const m = (...ids: string[]) => ids.map((id) => ({ id, description: MEASURE_DESC[id] || '' }))
+
+const DEMO: CRADemo = {
+  scenario:
+    'Kistenhubgeraet mit (angenommenem) IoT-Modul / Internetanschluss — Fernsteuerung, Telemetrie und Remote-Updates.',
+  findings: [
+    { id: 'KH-CY-1', title: 'Fernsteuer-Weboberflaeche mit universellem Default-Passwort', location: 'remote-ui/login',
+      scanner_severity: 'critical', cwe: 'CWE-259', primary_requirement: 'CRA-AI-8',
+      requirement_title: 'Keine Default-Passwoerter', requirement_ids: ['CRA-AI-8'],
+      annex_anchor: 'Annex I, 1(3)(d)', iso27001_ref: ['A.8.5'], risk_level: 'CRITICAL', measures: m('M542') },
+    { id: 'KH-CY-2', title: 'IoT-Telemetrie unverschluesselt ueber MQTT', location: 'telemetry/mqtt',
+      scanner_severity: 'high', cwe: 'CWE-319', primary_requirement: 'CRA-AI-15',
+      requirement_title: 'Transport-Schutz (Data in Transit)', requirement_ids: ['CRA-AI-15', 'CRA-AI-13'],
+      annex_anchor: 'Annex I, 1(3)(e)', iso27001_ref: ['A.8.24'], risk_level: 'HIGH', measures: [] },
+    { id: 'KH-CY-3', title: 'Firmware-Updates ohne Signaturpruefung', location: 'updater',
+      scanner_severity: 'high', cwe: 'CWE-494', primary_requirement: 'CRA-AI-30',
+      requirement_title: 'Update-Integritaet', requirement_ids: ['CRA-AI-30', 'CRA-AI-28', 'CRA-AI-6'],
+      annex_anchor: 'Annex I, 1(4)', iso27001_ref: ['A.8.24'], risk_level: 'HIGH', measures: m('M547', 'M541') },
+    { id: 'KH-CY-4', title: 'Offener Debug-Port (telnet) am Controller', location: 'controller:23',
+      scanner_severity: 'medium', cwe: 'CWE-1188', primary_requirement: 'CRA-AI-1',
+      requirement_title: 'Secure-by-Default-Konfiguration', requirement_ids: ['CRA-AI-1'],
+      annex_anchor: 'Annex I, 1(1)', iso27001_ref: ['A.8.9'], risk_level: 'HIGH', measures: m('M545') },
+    { id: 'KH-CY-5', title: 'Gebundelte libmodbus mit bekannter CVE (veraltet)', location: 'deps/libmodbus',
+      scanner_severity: 'high', cwe: 'CWE-1104', primary_requirement: 'CRA-AI-22',
+      requirement_title: 'Dependency-Monitoring', requirement_ids: ['CRA-AI-22'],
+      annex_anchor: 'Annex I, 1(5)', iso27001_ref: ['A.8.8', 'A.8.25'], risk_level: 'HIGH', measures: [] },
+    { id: 'KH-CY-6', title: 'Keine Sicherheits-Protokollierung der Remote-Befehle', location: 'remote-ui',
+      scanner_severity: 'medium', cwe: 'CWE-778', primary_requirement: 'CRA-AI-24',
+      requirement_title: 'Security-Logging', requirement_ids: ['CRA-AI-24'],
+      annex_anchor: 'Annex I, 1(3)(g)', iso27001_ref: ['A.8.15'], risk_level: 'MEDIUM', measures: [] },
+  ],
+  by_risk: { CRITICAL: 1, HIGH: 4, MEDIUM: 1, LOW: 0 },
+  coverage_pct: 100.0,
+  requirements_touched: ['CRA-AI-1', 'CRA-AI-6', 'CRA-AI-8', 'CRA-AI-13', 'CRA-AI-15', 'CRA-AI-22', 'CRA-AI-24', 'CRA-AI-28', 'CRA-AI-30'],
+  open_measures: m('M542', 'M547', 'M541', 'M545'),
+  cross_links: [
+    {
+      cyber_finding_ids: ['KH-CY-1', 'KH-CY-3'],
+      safety_hazard: 'Unerwarteter Anlauf des Hubwerks → Quetschen zwischen Last und Rahmen',
+      safety_ref: 'Risikobeurteilung: Quetschen Hubwerk',
+      original_measure: 'Zweihandschaltung + trennende Schutzeinrichtung (mechanisch, PL d)',
+      cyber_breaks_it:
+        'Über die Fernsteuerung (Default-Passwort) oder manipulierte Firmware kann der Hub ohne Zweihandbedienung remote ausgelöst werden — die mechanisch gemilderte Quetsch-Gefährdung ist wieder offen.',
+      residual: 'offen',
+    },
+    {
+      cyber_finding_ids: ['KH-CY-2'],
+      safety_hazard: 'Überlast / Lastabsturz durch manipulierte Lastgrenze',
+      safety_ref: 'Risikobeurteilung: Lastabsturz',
+      original_measure: 'Überlastsicherung / Lastmomentbegrenzer',
+      cyber_breaks_it:
+        'Unverschlüsselte MQTT-Telemetrie und -Befehle erlauben die Manipulation der Lastgrenz-Parameter — der Überlastschutz kann ausgehebelt werden.',
+      residual: 'offen',
+    },
+  ],
+  deadlines: [
+    { date: '2026-06-11', label: 'Conformity Bodies benannt' },
+    { date: '2026-09-11', label: 'Vulnerability-Reporting-Pflicht aktiv (24h/72h)' },
+    { date: '2027-12-11', label: 'CE-Marking nach CRA verpflichtend' },
+  ],
+}
+
+export function useCRADemo() {
+  return { data: DEMO }
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx b/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx
new file mode 100644
index 00000000..3af75447
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { useCRADemo } from './_hooks/useCRADemo'
+import { CRACyberView } from './_components/CRACyberView'
+
+export default function CRAPage() {
+  const { data } = useCRADemo()
+  return <CRACyberView data={data} />
+}
diff --git a/admin-compliance/app/sdk/iace/layout.tsx b/admin-compliance/app/sdk/iace/layout.tsx
index 9b2a9f62..a9b52853 100644
--- a/admin-compliance/app/sdk/iace/layout.tsx
+++ b/admin-compliance/app/sdk/iace/layout.tsx
@@ -24,6 +24,7 @@ const IACE_NAV_ITEMS = [
 ]
 
 const IACE_EXTRA_ITEMS = [
+  { id: 'cra', label: 'CRA / Cyber', href: '/cra', icon: 'shield' },
   { id: 'fmea', label: 'FMEA', href: '/fmea', icon: 'grid' },
   { id: 'knowledge-graph', label: 'Knowledge Graph', href: '/knowledge-graph', icon: 'activity' },
   { id: 'classification', label: 'Klassifikation', href: '/classification', icon: 'tag' },