feat(cra): priority frontend — weights control, P0/P1 tier badges, quick wins

CRA tab now shows the priority layer: a weights control (5 business objectives,
high/medium/low) that re-computes the assessment live; a Prio column with
P0..P3 tier badges (P0 = non-negotiable floor, reason on hover); the table in
backend priority order; and a Quick-Wins block (high impact, low effort). Demo
flags the safety-cross-linked findings as safety_impact so the P0 floor shows.

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

admin-compliance/app/sdk/iace/[projectId]/cra/_components/CRACyberView.tsx

@@ -18,6 +18,22 @@ function RiskBadge({ level }: { level: string }) {
   )
 }
 
+const TIER_BADGE: Record<string, string> = {
+  P0: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  P1: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+  P2: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
+  P3: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300',
+}
+
+function TierBadge({ tier, reason }: { tier?: string; reason?: string }) {
+  if (!tier) return <span className="text-gray-300">—</span>
+  return (
+    <span title={reason} className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-bold ${TIER_BADGE[tier] || TIER_BADGE.P3}`}>
+      {tier}
+    </span>
+  )
+}
+
 function FindingsTable({ findings }: { findings: CRAFinding[] }) {
   const [open, setOpen] = useState<Record<string, boolean>>({})
   const toggle = (id: string) => setOpen((o) => ({ ...o, [id]: !o[id] }))
@@ -26,6 +42,7 @@ function FindingsTable({ findings }: { findings: CRAFinding[] }) {
       <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-3">Prio</th>
             <th className="py-2 px-4">Cyber-Befund</th>
             <th className="py-2 px-3">CRA-Anforderung</th>
             <th className="py-2 px-3">Risiko</th>
@@ -37,6 +54,7 @@ function FindingsTable({ findings }: { findings: CRAFinding[] }) {
           {findings.map((f) => (
             <Fragment key={f.id}>
               <tr className="border-b border-gray-100 dark:border-gray-700/50 align-top">
+                <td className="py-2 px-3"><TierBadge tier={f.priority_tier} reason={f.priority_reason} /></td>
                 <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>
@@ -63,7 +81,7 @@ function FindingsTable({ findings }: { findings: CRAFinding[] }) {
               </tr>
               {open[f.id] && (
                 <tr className="border-b border-gray-100 dark:border-gray-700/50 bg-gray-50/60 dark:bg-gray-900/30">
-                  <td colSpan={5} className="px-4 py-2">
+                  <td colSpan={6} className="px-4 py-2">
                     <p className="text-[10px] text-gray-400 mb-1">Best-Practice-Tiefe (Golden-Set-Crosswalk)</p>
                     <div className="flex flex-wrap gap-1 items-center">
                       <span className="text-[10px] text-gray-500 mr-1">NIST 800-53:</span>
@@ -166,6 +184,25 @@ export function CRACyberView({ data }: { data: CRADemo }) {
         <FindingsTable findings={data.findings} />
       </div>
 
+      {/* Quick wins — high impact, low effort (second view) */}
+      {data.findings.some((f) => f.quick_win) && (
+        <div className="rounded-xl border border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-900/10 p-4">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Quick Wins</h2>
+          <p className="text-[11px] text-gray-500 mb-2">Hohe Wirkung bei geringem Aufwand — gut für den Einstieg.</p>
+          <ul className="space-y-1.5">
+            {data.findings.filter((f) => f.quick_win).map((f) => (
+              <li key={f.id} className="text-xs text-gray-700 dark:text-gray-300 flex items-start gap-2">
+                <TierBadge tier={f.priority_tier} reason={f.priority_reason} />
+                <span>
+                  {f.title} <span className="text-gray-400">→ {f.primary_requirement}</span>
+                  {f.measures.length > 0 && <span className="text-gray-400"> · {f.measures.join(', ')}</span>}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
       {/* Recommended measures — full curated text + norm references */}
       <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-1">Empfohlene Maßnahmen</h2>

admin-compliance/app/sdk/iace/[projectId]/cra/_components/WeightsControl.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Weights } from '../_hooks/useCRA'
+
+const OBJECTIVES: { id: string; label: string }[] = [
+  { id: 'access', label: 'Zugang / Authentifizierung' },
+  { id: 'data', label: 'Datenvertraulichkeit' },
+  { id: 'network_api', label: 'Netzwerk / API' },
+  { id: 'supply_updates', label: 'Updates / Supply-Chain' },
+  { id: 'monitoring', label: 'Monitoring / Incident' },
+]
+
+export function WeightsControl({ weights, onChange }: { weights: Weights; onChange: (w: Weights) => void }) {
+  const set = (id: string, v: string) => onChange({ ...weights, [id]: v })
+  return (
+    <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">Ihre Prioritäten</h2>
+      <p className="text-[11px] text-gray-400 mb-3">
+        Gewichten Sie, was für Sie zuerst zählt. Kritische, aktiv ausnutzbare und personengefährdende
+        Befunde bleiben unabhängig davon ganz oben (P0). Grobe Vorsortierung — Feinordnung im Ticketsystem.
+      </p>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {OBJECTIVES.map((o) => (
+          <label key={o.id} className="flex items-center justify-between gap-2 text-xs">
+            <span className="text-gray-600 dark:text-gray-300">{o.label}</span>
+            <select
+              value={weights[o.id] || 'medium'}
+              onChange={(e) => set(o.id, e.target.value)}
+              className="rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-2 py-1"
+            >
+              <option value="high">Hoch</option>
+              <option value="medium">Mittel</option>
+              <option value="low">Niedrig</option>
+            </select>
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/iace/[projectId]/cra/_hooks/useCRA.ts

@@ -3,11 +3,13 @@
 import { useEffect, useState } from 'react'
 import { CRADemo, CRAFinding, Measure, DEMO_SCENARIO } from './useCRADemo'
 
-// Live CRA assessment: POST the (demo) findings to the standalone backend
+// Live CRA assessment: POST the (demo) findings + the customer's priority weights
-// endpoint POST /api/v1/cra/assess and merge the live mapping (CRA requirement,
+// to POST /api/v1/cra/assess and merge the live, priority-sorted mapping (CRA
-// risk, measures, NIST/OWASP crosswalk) with the frontend scenario constants
+// requirement, risk, measures, NIST/OWASP crosswalk, priority tier + reason +
-// (full measure texts + cyber->safety cross-links — until those move server-side
+// quick-win) with the frontend scenario constants (full measure texts +
-// in step 2). Falls back to the static scenario if the backend is unreachable.
+// cyber->safety cross-links). Falls back to the static scenario if unreachable.
+
+export type Weights = Record<string, string> // objective -> high|medium|low
 
 function reqTitle(rationale: string): string {
   const i = rationale.indexOf(': ')
@@ -15,14 +17,14 @@ function reqTitle(rationale: string): string {
 }
 
 function merge(live: any): CRADemo {
-  const mapped: Record<string, any> = {}
+  const meta: Record<string, CRAFinding> = {}
-  for (const m of live.mapped || []) mapped[m.finding_id] = m
+  for (const f of DEMO_SCENARIO.findings) meta[f.id] = f
 
-  const findings: CRAFinding[] = DEMO_SCENARIO.findings.map((df) => {
+  // iterate live.mapped to PRESERVE the backend priority order
-    const m = mapped[df.id]
+  const findings: CRAFinding[] = (live.mapped || []).map((m: any) => {
-    if (!m) return df
+    const base = meta[m.finding_id]
     return {
-      ...df,
+      ...(base || { id: m.finding_id, title: m.finding_id, location: '', scanner_severity: '', cwe: '' }),
       primary_requirement: m.primary_requirement,
       requirement_title: reqTitle(m.rationale || ''),
       requirement_ids: m.requirement_ids || [],
@@ -30,9 +32,14 @@ function merge(live: any): CRADemo {
       iso27001_ref: m.iso27001_ref || [],
       nist_refs: m.nist_refs || [],
       owasp_refs: m.owasp_refs || [],
-      risk_level: m.risk_level || df.risk_level,
+      risk_level: m.risk_level || (base ? base.risk_level : 'LOW'),
       measures: m.measures || [],
-    }
+      priority_tier: m.priority_tier,
+      priority_score: m.priority_score,
+      quick_win: m.quick_win,
+      priority_reason: m.priority_reason,
+      objective: m.objective,
+    } as CRAFinding
   })
 
   const open_measures: Measure[] = (live.open_measures || []).map((om: any) => {
@@ -49,19 +56,25 @@ function merge(live: any): CRADemo {
     open_measures,
     cross_links: DEMO_SCENARIO.cross_links,
     deadlines: live.deadlines || DEMO_SCENARIO.deadlines,
+    quick_wins: live.quick_wins || [],
+    objectives: live.objectives || [],
   }
 }
 
 export function useCRA() {
   const [data, setData] = useState<CRADemo | null>(null)
   const [live, setLive] = useState(false)
+  const [weights, setWeights] = useState<Weights>({})
 
   useEffect(() => {
     let cancelled = false
     const payload = {
       findings: DEMO_SCENARIO.findings.map((f) => ({
         id: f.id, title: f.title, cwe: f.cwe, severity: f.scanner_severity, location: f.location,
+        // demo: flag the two findings tied to a safety cross-link as safety_impact
+        safety_impact: f.id === 'KH-CY-1' || f.id === 'KH-CY-2' || f.id === 'KH-CY-3',
       })),
+      weights,
     }
     fetch('/api/v1/cra/assess', {
       method: 'POST',
@@ -84,7 +97,7 @@ export function useCRA() {
     return () => {
       cancelled = true
     }
-  }, [])
+  }, [weights])
 
-  return { data, live }
+  return { data, live, weights, setWeights }
 }

admin-compliance/app/sdk/iace/[projectId]/cra/_hooks/useCRADemo.ts

@@ -27,6 +27,12 @@ export interface CRAFinding {
   owasp_refs: OwaspRef[]
   risk_level: string
   measures: string[]
+  // priority layer (set live by the backend prioritizer; optional in the static fallback)
+  priority_tier?: string
+  priority_score?: number
+  quick_win?: boolean
+  priority_reason?: string
+  objective?: string
 }
 
 export interface Measure {
@@ -54,6 +60,8 @@ export interface CRADemo {
   open_measures: Measure[]
   cross_links: CrossLink[]
   deadlines: { date: string; label: string }[]
+  quick_wins?: string[]
+  objectives?: string[]
 }
 
 const ow = (code: string, label: string): OwaspRef => ({ code, label })

admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx

@@ -2,19 +2,21 @@
 
 import { useCRA } from './_hooks/useCRA'
 import { CRACyberView } from './_components/CRACyberView'
+import { WeightsControl } from './_components/WeightsControl'
 
 export default function CRAPage() {
-  const { data, live } = useCRA()
+  const { data, live, weights, setWeights } = useCRA()
   if (!data) {
     return <p className="text-sm text-gray-500">CRA-Risikobeurteilung wird geladen …</p>
   }
   return (
-    <div>
+    <div className="space-y-6">
       {!live && (
-        <p className="mb-3 text-[11px] text-amber-600 dark:text-amber-400">
+        <p className="text-[11px] text-amber-600 dark:text-amber-400">
           Backend nicht erreichbar — statisches Szenario angezeigt.
         </p>
       )}
+      <WeightsControl weights={weights} onChange={setWeights} />
       <CRACyberView data={data} />
     </div>
   )