feat(iace): Phase 5+6 — frontend integration, RAG library search, comprehensive tests

Phase 5 — Frontend Integration:
- components/page.tsx: ComponentLibraryModal with 120 components + 20 energy sources
- hazards/page.tsx: AutoSuggestPanel with 3-column pattern matching review
- mitigations/page.tsx: SuggestMeasuresModal per hazard with 3-level grouping
- verification/page.tsx: SuggestEvidenceModal per mitigation with evidence types

Phase 6 — RAG Library Search:
- Added bp_iace_libraries to AllowedCollections whitelist in rag_handlers.go
- SearchLibrary endpoint: POST /iace/library-search (semantic search across libraries)
- EnrichTechFileSection endpoint: POST /projects/:id/tech-file/:section/enrich
- Created ingest-iace-libraries.sh ingestion script for Qdrant collection

Tests (123 passing):
- tag_taxonomy_test.go: 8 tests for taxonomy entries, domains, essential tags
- controls_library_test.go: 7 tests for measures, reduction types, subtypes
- integration_test.go: 7 integration tests for full match flow and library consistency
- Extended tag_resolver_test.go: 9 new tests for FindByTags and cross-category resolution

Documentation:
- Updated iace.md with Hazard-Matching-Engine, RAG enrichment, and new DB tables

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

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

@@ -12,6 +12,46 @@ interface Component {
   safety_relevant: boolean
   parent_id: string | null
   children: Component[]
+  library_component_id?: string
+  energy_source_ids?: string[]
+}
+
+interface LibraryComponent {
+  id: string
+  name_de: string
+  name_en: string
+  category: string
+  description_de: string
+  typical_hazard_categories: string[]
+  typical_energy_sources: string[]
+  maps_to_component_type: string
+  tags: string[]
+  sort_order: number
+}
+
+interface EnergySource {
+  id: string
+  name_de: string
+  name_en: string
+  description_de: string
+  typical_components: string[]
+  typical_hazard_categories: string[]
+  tags: string[]
+  sort_order: number
+}
+
+const LIBRARY_CATEGORIES: Record<string, string> = {
+  mechanical: 'Mechanik',
+  structural: 'Struktur',
+  drive: 'Antrieb',
+  hydraulic: 'Hydraulik',
+  pneumatic: 'Pneumatik',
+  electrical: 'Elektrik',
+  control: 'Steuerung',
+  sensor: 'Sensorik',
+  actuator: 'Aktorik',
+  safety: 'Sicherheit',
+  it_network: 'IT/Netzwerk',
 }
 
 const COMPONENT_TYPES = [
@@ -98,6 +138,11 @@ function ComponentTreeNode({
               Sicherheitsrelevant
             </span>
           )}
+          {component.library_component_id && (
+            <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">
+              Bibliothek
+            </span>
+          )}
         </div>
 
         {component.description && (
@@ -289,6 +334,289 @@ function buildTree(components: Component[]): Component[] {
   return roots
 }
 
+// ============================================================================
+// Component Library Modal (Phase 5)
+// ============================================================================
+
+function ComponentLibraryModal({
+  onAdd,
+  onClose,
+}: {
+  onAdd: (components: LibraryComponent[], energySources: EnergySource[]) => void
+  onClose: () => void
+}) {
+  const [libraryComponents, setLibraryComponents] = useState<LibraryComponent[]>([])
+  const [energySources, setEnergySources] = useState<EnergySource[]>([])
+  const [selectedComponents, setSelectedComponents] = useState<Set<string>>(new Set())
+  const [selectedEnergySources, setSelectedEnergySources] = useState<Set<string>>(new Set())
+  const [search, setSearch] = useState('')
+  const [filterCategory, setFilterCategory] = useState('')
+  const [activeTab, setActiveTab] = useState<'components' | 'energy'>('components')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [compRes, enRes] = await Promise.all([
+          fetch('/api/sdk/v1/iace/component-library'),
+          fetch('/api/sdk/v1/iace/energy-sources'),
+        ])
+        if (compRes.ok) {
+          const json = await compRes.json()
+          setLibraryComponents(json.components || [])
+        }
+        if (enRes.ok) {
+          const json = await enRes.json()
+          setEnergySources(json.energy_sources || [])
+        }
+      } catch (err) {
+        console.error('Failed to fetch library:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchData()
+  }, [])
+
+  function toggleComponent(id: string) {
+    setSelectedComponents(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  function toggleEnergySource(id: string) {
+    setSelectedEnergySources(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  function toggleAllInCategory(category: string) {
+    const items = libraryComponents.filter(c => c.category === category)
+    const allIds = items.map(i => i.id)
+    const allSelected = allIds.every(id => selectedComponents.has(id))
+    setSelectedComponents(prev => {
+      const next = new Set(prev)
+      allIds.forEach(id => allSelected ? next.delete(id) : next.add(id))
+      return next
+    })
+  }
+
+  function handleAdd() {
+    const selComps = libraryComponents.filter(c => selectedComponents.has(c.id))
+    const selEnergy = energySources.filter(e => selectedEnergySources.has(e.id))
+    onAdd(selComps, selEnergy)
+  }
+
+  const filtered = libraryComponents.filter(c => {
+    if (filterCategory && c.category !== filterCategory) return false
+    if (search) {
+      const q = search.toLowerCase()
+      return c.name_de.toLowerCase().includes(q) || c.name_en.toLowerCase().includes(q) || c.description_de.toLowerCase().includes(q)
+    }
+    return true
+  })
+
+  const grouped = filtered.reduce<Record<string, LibraryComponent[]>>((acc, c) => {
+    if (!acc[c.category]) acc[c.category] = []
+    acc[c.category].push(c)
+    return acc
+  }, {})
+
+  const categories = Object.keys(LIBRARY_CATEGORIES)
+  const totalSelected = selectedComponents.size + selectedEnergySources.size
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto" />
+          <p className="mt-3 text-sm text-gray-500">Bibliothek wird geladen...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-4xl max-h-[85vh] flex flex-col">
+        {/* Header */}
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Komponentenbibliothek</h3>
+            <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-2 mb-4">
+            <button
+              onClick={() => setActiveTab('components')}
+              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+                activeTab === 'components' ? 'bg-purple-100 text-purple-700' : 'text-gray-500 hover:bg-gray-100'
+              }`}
+            >
+              Komponenten ({libraryComponents.length})
+            </button>
+            <button
+              onClick={() => setActiveTab('energy')}
+              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+                activeTab === 'energy' ? 'bg-purple-100 text-purple-700' : 'text-gray-500 hover:bg-gray-100'
+              }`}
+            >
+              Energiequellen ({energySources.length})
+            </button>
+          </div>
+
+          {activeTab === 'components' && (
+            <div className="flex gap-3">
+              <input
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="Suchen..."
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+              <select
+                value={filterCategory}
+                onChange={e => setFilterCategory(e.target.value)}
+                className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              >
+                <option value="">Alle Kategorien</option>
+                {categories.map(cat => (
+                  <option key={cat} value={cat}>{LIBRARY_CATEGORIES[cat]}</option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-4">
+          {activeTab === 'components' ? (
+            <div className="space-y-4">
+              {Object.entries(grouped)
+                .sort(([a], [b]) => categories.indexOf(a) - categories.indexOf(b))
+                .map(([category, items]) => (
+                  <div key={category}>
+                    <div className="flex items-center gap-2 mb-2 sticky top-0 bg-white dark:bg-gray-800 py-1 z-10">
+                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                        {LIBRARY_CATEGORIES[category] || category}
+                      </h4>
+                      <span className="text-xs text-gray-400">({items.length})</span>
+                      <button
+                        onClick={() => toggleAllInCategory(category)}
+                        className="text-xs text-purple-600 hover:text-purple-700 ml-auto"
+                      >
+                        {items.every(i => selectedComponents.has(i.id)) ? 'Alle abwaehlen' : 'Alle waehlen'}
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {items.map(comp => (
+                        <label
+                          key={comp.id}
+                          className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                            selectedComponents.has(comp.id)
+                              ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20'
+                              : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-750'
+                          }`}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={selectedComponents.has(comp.id)}
+                            onChange={() => toggleComponent(comp.id)}
+                            className="mt-0.5 accent-purple-600"
+                          />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <span className="text-xs font-mono text-gray-400">{comp.id}</span>
+                              <ComponentTypeIcon type={comp.maps_to_component_type} />
+                            </div>
+                            <div className="text-sm font-medium text-gray-900 dark:text-white">{comp.name_de}</div>
+                            {comp.description_de && (
+                              <div className="text-xs text-gray-500 mt-0.5 line-clamp-2">{comp.description_de}</div>
+                            )}
+                          </div>
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              {filtered.length === 0 && (
+                <div className="text-center py-8 text-gray-500">Keine Komponenten gefunden</div>
+              )}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              {energySources.map(es => (
+                <label
+                  key={es.id}
+                  className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                    selectedEnergySources.has(es.id)
+                      ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20'
+                      : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-750'
+                  }`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedEnergySources.has(es.id)}
+                    onChange={() => toggleEnergySource(es.id)}
+                    className="mt-0.5 accent-purple-600"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-mono text-gray-400">{es.id}</span>
+                    </div>
+                    <div className="text-sm font-medium text-gray-900 dark:text-white">{es.name_de}</div>
+                    {es.description_de && (
+                      <div className="text-xs text-gray-500 mt-0.5 line-clamp-2">{es.description_de}</div>
+                    )}
+                  </div>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <span className="text-sm text-gray-500">
+            {selectedComponents.size} Komponenten, {selectedEnergySources.size} Energiequellen ausgewaehlt
+          </span>
+          <div className="flex gap-3">
+            <button onClick={onClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+              Abbrechen
+            </button>
+            <button
+              onClick={handleAdd}
+              disabled={totalSelected === 0}
+              className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+                totalSelected > 0
+                  ? 'bg-purple-600 text-white hover:bg-purple-700'
+                  : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+              }`}
+            >
+              {totalSelected > 0 ? `${totalSelected} hinzufuegen` : 'Auswaehlen'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Page
+// ============================================================================
+
 export default function ComponentsPage() {
   const params = useParams()
   const projectId = params.projectId as string
@@ -297,6 +625,7 @@ export default function ComponentsPage() {
   const [showForm, setShowForm] = useState(false)
   const [editingComponent, setEditingComponent] = useState<Component | null>(null)
   const [addingParentId, setAddingParentId] = useState<string | null>(null)
+  const [showLibrary, setShowLibrary] = useState(false)
 
   useEffect(() => {
     fetchComponents()
@@ -365,6 +694,32 @@ export default function ComponentsPage() {
     setShowForm(true)
   }
 
+  async function handleAddFromLibrary(libraryComps: LibraryComponent[], energySrcs: EnergySource[]) {
+    setShowLibrary(false)
+    const energySourceIds = energySrcs.map(e => e.id)
+
+    for (const comp of libraryComps) {
+      try {
+        await fetch(`/api/sdk/v1/iace/projects/${projectId}/components`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: comp.name_de,
+            type: comp.maps_to_component_type,
+            description: comp.description_de,
+            safety_relevant: false,
+            library_component_id: comp.id,
+            energy_source_ids: energySourceIds,
+            tags: comp.tags,
+          }),
+        })
+      } catch (err) {
+        console.error(`Failed to add component ${comp.id}:`, err)
+      }
+    }
+    await fetchComponents()
+  }
+
   const tree = buildTree(components)
 
   if (loading) {
@@ -386,22 +741,41 @@ export default function ComponentsPage() {
           </p>
         </div>
         {!showForm && (
-          <button
-            onClick={() => {
-              setShowForm(true)
-              setEditingComponent(null)
-              setAddingParentId(null)
-            }}
-            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-            </svg>
-            Komponente hinzufuegen
-          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowLibrary(true)}
+              className="flex items-center gap-2 px-3 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+              </svg>
+              Aus Bibliothek waehlen
+            </button>
+            <button
+              onClick={() => {
+                setShowForm(true)
+                setEditingComponent(null)
+                setAddingParentId(null)
+              }}
+              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+              Komponente hinzufuegen
+            </button>
+          </div>
         )}
       </div>
 
+      {/* Library Modal */}
+      {showLibrary && (
+        <ComponentLibraryModal
+          onAdd={handleAddFromLibrary}
+          onClose={() => setShowLibrary(false)}
+        />
+      )}
+
       {/* Form */}
       {showForm && (
         <ComponentForm
@@ -454,12 +828,20 @@ export default function ComponentsPage() {
               Beginnen Sie mit der Erfassung aller relevanten Komponenten Ihrer Maschine.
               Erstellen Sie eine hierarchische Struktur aus Software, Firmware, KI-Modulen und Hardware.
             </p>
-            <button
-              onClick={() => setShowForm(true)}
-              className="mt-6 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-            >
-              Erste Komponente hinzufuegen
-            </button>
+            <div className="mt-6 flex items-center justify-center gap-3">
+              <button
+                onClick={() => setShowLibrary(true)}
+                className="px-6 py-3 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors"
+              >
+                Aus Bibliothek waehlen
+              </button>
+              <button
+                onClick={() => setShowForm(true)}
+                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+              >
+                Manuell hinzufuegen
+              </button>
+            </div>
           </div>
         )
       )}