feat(iace): Erweiterungen 2-4 — FMEA Worksheet, Delta Modal, Textil+Agri

Erweiterung 2: FMEA-Worksheet Tab (/fmea)
- Tabelle: Komponente | Typ | Fehlerart | Auswirkung | S | O | D | RPZ | Bewertung
- RPZ-Farbcodierung: >200 Kritisch, >100 Handlungsbedarf, >50 Beobachten
- Stats: Gesamt, Kritisch, Handlungsbedarf, Akzeptabel

Erweiterung 3: DeltaPreviewModal (wiederverwendbar)
- Modal zeigt +/- Patterns, Hazards, Massnahmen bei Aenderungen
- Nutzt POST /delta-analysis Endpoint
- Summary Grid + detaillierte Listen

Erweiterung 4: Textilmaschinen (EN ISO 11111) + Landmaschinen (ISO 4254)
- 21 neue Patterns: HP1550-HP1559 (Textil), HP1565-HP1575 (Agri)
- 23 neue Massnahmen: M452-M460 (Textil), M461-M474 (Agri)
- Walzenspalt, Zapfwelle, ROPS, autonomer Traktor, Siloexplosion etc.

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

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

@@ -0,0 +1,182 @@
+'use client'
+
+import { useState } from 'react'
+
+interface DeltaResult {
+  added_patterns?: Array<{ pattern_name: string; hazard_cats: string[] }>
+  removed_patterns?: Array<{ pattern_name: string; hazard_cats: string[] }>
+  added_hazards?: Array<{ name: string; category: string }>
+  removed_hazards?: Array<{ name: string; category: string }>
+  added_measures?: Array<{ id: string; name: string }>
+  removed_measures?: Array<{ id: string; name: string }>
+}
+
+interface DeltaPreviewModalProps {
+  projectId: string
+  currentInput: {
+    component_library_ids: string[]
+    energy_source_ids: string[]
+    operational_states?: string[]
+    human_roles?: string[]
+  }
+  proposedInput: {
+    component_library_ids: string[]
+    energy_source_ids: string[]
+    operational_states?: string[]
+    human_roles?: string[]
+  }
+  onClose: () => void
+  onApply: () => void
+  changeDescription: string
+}
+
+export function DeltaPreviewModal({
+  projectId,
+  currentInput,
+  proposedInput,
+  onClose,
+  onApply,
+  changeDescription,
+}: DeltaPreviewModalProps) {
+  const [result, setResult] = useState<DeltaResult | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  // Auto-run delta analysis on mount
+  useState(() => {
+    runDelta()
+  })
+
+  async function runDelta() {
+    setLoading(true)
+    setError('')
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/delta-analysis`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ current: currentInput, proposed: proposedInput }),
+      })
+      if (!res.ok) {
+        setError('Delta-Analyse fehlgeschlagen')
+        return
+      }
+      setResult(await res.json())
+    } catch {
+      setError('Verbindung fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const addedP = result?.added_patterns?.length || 0
+  const removedP = result?.removed_patterns?.length || 0
+  const addedH = result?.added_hazards?.length || 0
+  const removedH = result?.removed_hazards?.length || 0
+  const addedM = result?.added_measures?.length || 0
+  const removedM = result?.removed_measures?.length || 0
+  const hasChanges = addedP + removedP + addedH + removedH + addedM + removedM > 0
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Delta-Vorschau</h2>
+          <p className="text-xs text-gray-500 mt-0.5">{changeDescription}</p>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-4">
+          {loading && (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-purple-600" />
+              <span className="ml-3 text-sm text-gray-500">Berechne Auswirkungen...</span>
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-50 text-red-700 rounded-lg p-3 text-sm">{error}</div>
+          )}
+
+          {result && !loading && (
+            <div className="space-y-4">
+              {/* Summary Grid */}
+              <div className="grid grid-cols-3 gap-3">
+                <DeltaStat label="Patterns" added={addedP} removed={removedP} />
+                <DeltaStat label="Gefaehrdungen" added={addedH} removed={removedH} />
+                <DeltaStat label="Massnahmen" added={addedM} removed={removedM} />
+              </div>
+
+              {!hasChanges && (
+                <p className="text-sm text-gray-400 italic text-center py-2">
+                  Keine Auswirkungen erkannt — die Aenderung beeinflusst keine Patterns.
+                </p>
+              )}
+
+              {/* Added Hazards */}
+              {addedH > 0 && (
+                <div>
+                  <h3 className="text-xs font-semibold text-green-700 mb-1">+ Neue Gefaehrdungen</h3>
+                  <ul className="space-y-0.5 max-h-32 overflow-y-auto">
+                    {result!.added_hazards!.slice(0, 15).map((h, i) => (
+                      <li key={i} className="text-xs text-gray-600 flex items-center gap-1">
+                        <span className="text-green-500 flex-shrink-0">+</span>
+                        <span className="truncate">{h.name || h.category}</span>
+                      </li>
+                    ))}
+                    {addedH > 15 && <li className="text-xs text-gray-400">... und {addedH - 15} weitere</li>}
+                  </ul>
+                </div>
+              )}
+
+              {/* Removed Hazards */}
+              {removedH > 0 && (
+                <div>
+                  <h3 className="text-xs font-semibold text-red-700 mb-1">- Entfallene Gefaehrdungen</h3>
+                  <ul className="space-y-0.5 max-h-32 overflow-y-auto">
+                    {result!.removed_hazards!.slice(0, 10).map((h, i) => (
+                      <li key={i} className="text-xs text-gray-600 flex items-center gap-1">
+                        <span className="text-red-500 flex-shrink-0">-</span>
+                        <span className="truncate">{h.name || h.category}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={onApply}
+            disabled={loading}
+            className="px-5 py-2 text-sm font-medium bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+          >
+            Aenderung uebernehmen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DeltaStat({ label, added, removed }: { label: string; added: number; removed: number }) {
+  return (
+    <div className="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+      <div className="text-xs text-gray-500 mb-1">{label}</div>
+      <div className="flex items-center justify-center gap-2">
+        {added > 0 && <span className="text-sm font-bold text-green-600">+{added}</span>}
+        {removed > 0 && <span className="text-sm font-bold text-red-600">-{removed}</span>}
+        {added === 0 && removed === 0 && <span className="text-sm text-gray-400">0</span>}
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/iace/[projectId]/fmea/_hooks/useFMEA.ts

@@ -0,0 +1,117 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export interface FailureMode {
+  id: string
+  component_type: string
+  mode: string
+  name_de: string
+  name_en: string
+  effect: string
+  detection_hint: string
+  default_severity: number
+  default_occurrence: number
+  default_detection: number
+}
+
+export interface Component {
+  id: string
+  name: string
+  component_type: string
+}
+
+export interface FMEARow {
+  component: Component
+  failureMode: FailureMode
+  severity: number
+  occurrence: number
+  detection: number
+  rpz: number
+}
+
+export function useFMEA(projectId: string) {
+  const [rows, setRows] = useState<FMEARow[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadData()
+  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function loadData() {
+    try {
+      // Load project components
+      const compRes = await fetch(`/api/sdk/v1/iace/projects/${projectId}/components`)
+      if (!compRes.ok) return
+      const compJson = await compRes.json()
+      const components: Component[] = (compJson.components || compJson || []).map(
+        (c: Record<string, unknown>) => ({
+          id: c.id as string,
+          name: c.name as string,
+          component_type: c.component_type as string || 'mechanical',
+        })
+      )
+
+      // Load failure modes for each component type (deduplicated)
+      const types = [...new Set(components.map((c) => c.component_type))]
+      const fmByType: Record<string, FailureMode[]> = {}
+
+      await Promise.all(
+        types.map(async (type) => {
+          const res = await fetch(`/api/sdk/v1/iace/failure-modes?component_type=${type}`)
+          if (res.ok) {
+            const json = await res.json()
+            fmByType[type] = json.failure_modes || []
+          }
+        })
+      )
+
+      // Also load general failure modes (no type filter)
+      const allRes = await fetch('/api/sdk/v1/iace/failure-modes')
+      let allFMs: FailureMode[] = []
+      if (allRes.ok) {
+        const json = await allRes.json()
+        allFMs = json.failure_modes || []
+      }
+
+      // Build FMEA rows: each component × its matching failure modes
+      const fmeaRows: FMEARow[] = []
+      for (const comp of components) {
+        const compFMs = fmByType[comp.component_type] || []
+        // Use type-specific FMs, or fallback to first 3 general FMs
+        const relevantFMs = compFMs.length > 0 ? compFMs : allFMs.slice(0, 3)
+
+        for (const fm of relevantFMs) {
+          const s = fm.default_severity || 5
+          const o = fm.default_occurrence || 5
+          const d = fm.default_detection || 5
+          fmeaRows.push({
+            component: comp,
+            failureMode: fm,
+            severity: s,
+            occurrence: o,
+            detection: d,
+            rpz: s * o * d,
+          })
+        }
+      }
+
+      // Sort by RPZ descending (highest risk first)
+      fmeaRows.sort((a, b) => b.rpz - a.rpz)
+      setRows(fmeaRows)
+    } catch (err) {
+      console.error('Failed to load FMEA data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const stats = {
+    total: rows.length,
+    critical: rows.filter((r) => r.rpz > 200).length,
+    actionRequired: rows.filter((r) => r.rpz > 100 && r.rpz <= 200).length,
+    acceptable: rows.filter((r) => r.rpz <= 100).length,
+  }
+
+  return { rows, loading, stats }
+}

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

@@ -0,0 +1,147 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import { useFMEA, type FMEARow } from './_hooks/useFMEA'
+
+const COMP_TYPE_LABELS: Record<string, string> = {
+  mechanical: 'Mechanisch', electrical: 'Elektrisch', sensor: 'Sensor',
+  actuator: 'Aktor', software: 'Software', firmware: 'Firmware',
+  ai_model: 'KI-Modell', hmi: 'HMI', network: 'Netzwerk',
+  hydraulic: 'Hydraulik', pneumatic: 'Pneumatik', safety: 'Sicherheit',
+}
+
+function rpzColor(rpz: number): string {
+  if (rpz > 200) return 'bg-red-100 text-red-800 border-red-200'
+  if (rpz > 100) return 'bg-orange-100 text-orange-800 border-orange-200'
+  if (rpz > 50) return 'bg-yellow-100 text-yellow-800 border-yellow-200'
+  return 'bg-green-100 text-green-800 border-green-200'
+}
+
+function rpzLabel(rpz: number): string {
+  if (rpz > 200) return 'Kritisch'
+  if (rpz > 100) return 'Handlungsbedarf'
+  if (rpz > 50) return 'Beobachten'
+  return 'Akzeptabel'
+}
+
+export default function FMEAPage() {
+  const { projectId } = useParams<{ projectId: string }>()
+  const { rows, loading, stats } = useFMEA(projectId)
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-xl font-bold text-gray-900 dark:text-white">FMEA-Worksheet</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+          Fehlermoeglich&shy;keits- und Einflussanalyse — RPZ = Severity x Occurrence x Detection
+        </p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-3">
+        <StatCard label="Gesamt" value={stats.total} color="gray" />
+        <StatCard label="Kritisch (RPZ &gt; 200)" value={stats.critical} color="red" />
+        <StatCard label="Handlungsbedarf (RPZ &gt; 100)" value={stats.actionRequired} color="orange" />
+        <StatCard label="Akzeptabel (RPZ &le; 100)" value={stats.acceptable} color="green" />
+      </div>
+
+      {/* RPZ Threshold Info */}
+      <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-xs text-amber-800 dark:text-amber-300">
+        <strong>RPZ-Schwellen:</strong> Kritisch &gt; 200 | Handlungsbedarf &gt; 100 | Beobachten &gt; 50 | Akzeptabel &le; 50.
+        Massnahmen sind erforderlich ab RPZ &gt; 100.
+      </div>
+
+      {/* FMEA Table */}
+      {rows.length === 0 ? (
+        <div className="text-center py-12 text-gray-500">
+          Keine Failure Modes gefunden. Bitte zuerst Komponenten erfassen.
+        </div>
+      ) : (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
+                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Komponente</th>
+                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
+                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Fehlerart</th>
+                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Auswirkung</th>
+                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">S</th>
+                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">O</th>
+                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">D</th>
+                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-16">RPZ</th>
+                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Bewertung</th>
+                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Erkennung</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                {rows.map((row, idx) => (
+                  <FMEATableRow key={`${row.component.id}-${row.failureMode.id}-${idx}`} row={row} />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function FMEATableRow({ row }: { row: FMEARow }) {
+  const color = rpzColor(row.rpz)
+  return (
+    <tr className={`hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${row.rpz > 100 ? 'bg-red-50/30 dark:bg-red-900/10' : ''}`}>
+      <td className="px-3 py-2.5 text-sm font-medium text-gray-900 dark:text-white">{row.component.name}</td>
+      <td className="px-3 py-2.5">
+        <span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
+          {COMP_TYPE_LABELS[row.component.component_type] || row.component.component_type}
+        </span>
+      </td>
+      <td className="px-3 py-2.5">
+        <div className="text-sm text-gray-900 dark:text-white">{row.failureMode.name_de}</div>
+        <div className="text-[10px] text-gray-400">{row.failureMode.id}</div>
+      </td>
+      <td className="px-3 py-2.5 text-xs text-gray-600 dark:text-gray-400 max-w-[200px] truncate" title={row.failureMode.effect}>
+        {row.failureMode.effect}
+      </td>
+      <td className="px-3 py-2.5 text-sm text-center font-medium text-gray-900 dark:text-white">{row.severity}</td>
+      <td className="px-3 py-2.5 text-sm text-center font-medium text-gray-900 dark:text-white">{row.occurrence}</td>
+      <td className="px-3 py-2.5 text-sm text-center font-medium text-gray-900 dark:text-white">{row.detection}</td>
+      <td className="px-3 py-2.5 text-center">
+        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-sm font-bold border ${color}`}>
+          {row.rpz}
+        </span>
+      </td>
+      <td className="px-3 py-2.5">
+        <span className={`text-xs px-2 py-0.5 rounded-full ${color}`}>{rpzLabel(row.rpz)}</span>
+      </td>
+      <td className="px-3 py-2.5 text-xs text-gray-500 dark:text-gray-400 max-w-[150px] truncate" title={row.failureMode.detection_hint}>
+        {row.failureMode.detection_hint || '-'}
+      </td>
+    </tr>
+  )
+}
+
+function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
+  const colors: Record<string, string> = {
+    gray: 'bg-gray-50 text-gray-700 border-gray-200',
+    red: 'bg-red-50 text-red-700 border-red-200',
+    orange: 'bg-orange-50 text-orange-700 border-orange-200',
+    green: 'bg-green-50 text-green-700 border-green-200',
+  }
+  return (
+    <div className={`rounded-xl border p-4 ${colors[color] || colors.gray}`}>
+      <div className="text-2xl font-bold">{value}</div>
+      <div className="text-xs mt-1">{label}</div>
+    </div>
+  )
+}