semantic search finalization

public/js/auditTrailRenderer.js

@@ -0,0 +1,389 @@
+// src/js/auditTrailRenderer.js
+
+import { auditService } from '../../src/utils/auditService.js';
+
+export class AuditTrailRenderer {
+  constructor(containerId, options = {}) {
+    this.containerId = containerId;
+    this.options = {
+      title: options.title || 'KI-Entscheidungspfad',
+      collapsible: options.collapsible !== false,
+      defaultExpanded: options.defaultExpanded || false,
+      ...options
+    };
+    this.componentId = `audit-trail-${Date.now()}-${Math.random().toString(36).substr(2, 6)}`;
+  }
+
+  /**
+   * Render audit trail from raw audit data
+   * FIXED: Proper Promise handling
+   */
+  render(rawAuditTrail) {
+    const container = document.getElementById(this.containerId);
+    if (!container) {
+      console.error(`[AUDIT RENDERER] Container ${this.containerId} not found`);
+      return;
+    }
+
+    if (!rawAuditTrail || !Array.isArray(rawAuditTrail) || rawAuditTrail.length === 0) {
+      this.renderEmpty();
+      return;
+    }
+
+    try {
+      console.log('[AUDIT RENDERER] Processing audit trail...', rawAuditTrail.length, 'entries');
+      
+      // Process audit trail using the centralized service (synchronous)
+      const processedAudit = auditService.processAuditTrail(rawAuditTrail);
+      
+      console.log('[AUDIT RENDERER] Processed audit:', processedAudit);
+      
+      if (processedAudit && processedAudit.phases && processedAudit.phases.length > 0) {
+        this.renderProcessed(processedAudit);
+        // Attach event handlers after DOM is updated
+        setTimeout(() => this.attachEventHandlers(), 0);
+      } else {
+        console.warn('[AUDIT RENDERER] No processed audit data');
+        this.renderEmpty();
+      }
+    } catch (error) {
+      console.error('[AUDIT RENDERER] Failed to render audit trail:', error);
+      this.renderError(error);
+    }
+  }
+  /**
+   * Render processed audit trail
+   */
+  renderProcessed(processedAudit) {
+    const container = document.getElementById(this.containerId);
+    if (!container) return;
+
+    const detailsId = `${this.componentId}-details`;
+    
+    console.log('[AUDIT RENDERER] Rendering processed audit with', processedAudit.phases.length, 'phases');
+    
+    container.innerHTML = `
+      <div class="audit-trail-container">
+        <div class="audit-trail-header ${this.options.collapsible ? 'clickable' : ''}" 
+             ${this.options.collapsible ? `data-target="${detailsId}"` : ''}>
+          <div class="audit-trail-title">
+            <div class="audit-icon">
+              <div class="audit-icon-gradient">✓</div>
+              <h4>${this.options.title}</h4>
+            </div>
+            
+            <div class="audit-stats">
+              <div class="stat-item">
+                <div class="stat-dot stat-time"></div>
+                <span>${auditService.formatDuration(processedAudit.totalTime)}</span>
+              </div>
+              <div class="stat-item">
+                <div class="stat-dot" style="background-color: ${auditService.getConfidenceColor(processedAudit.avgConfidence)}"></div>
+                <span>${processedAudit.avgConfidence}% Vertrauen</span>
+              </div>
+              <div class="stat-item">
+                <span>${processedAudit.stepCount} Schritte</span>
+              </div>
+            </div>
+          </div>
+          
+          ${this.options.collapsible ? `
+            <div class="toggle-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </div>
+          ` : ''}
+        </div>
+        
+        <div id="${detailsId}" class="audit-trail-details ${this.options.collapsible && !this.options.defaultExpanded ? 'collapsed' : ''}">
+          ${this.renderSummary(processedAudit)}
+          ${this.renderProcessFlow(processedAudit)}
+          ${this.renderTechnicalDetails(processedAudit)}
+        </div>
+      </div>
+    `;
+
+    console.log('[AUDIT RENDERER] HTML rendered successfully');
+  }
+
+  /**
+   * Render audit summary section
+   */
+  renderSummary(audit) {
+    return `
+      <div class="audit-summary">
+        <div class="summary-header">📊 Analyse-Qualität</div>
+        <div class="summary-grid">
+          <div class="summary-stat">
+            <div class="summary-value success">${audit.highConfidenceSteps}</div>
+            <div class="summary-label">Hohe Sicherheit</div>
+          </div>
+          <div class="summary-stat">
+            <div class="summary-value ${audit.lowConfidenceSteps > 0 ? 'warning' : 'success'}">
+              ${audit.lowConfidenceSteps}
+            </div>
+            <div class="summary-label">Unsichere Schritte</div>
+          </div>
+          <div class="summary-stat">
+            <div class="summary-value">${auditService.formatDuration(audit.totalTime)}</div>
+            <div class="summary-label">Verarbeitungszeit</div>
+          </div>
+        </div>
+        
+        ${audit.summary.keyInsights && audit.summary.keyInsights.length > 0 ? `
+          <div class="insights-section">
+            <div class="insights-header success">✓ Erkenntnisse:</div>
+            <ul class="insights-list">
+              ${audit.summary.keyInsights.map(insight => `<li>${this.escapeHtml(insight)}</li>`).join('')}
+            </ul>
+          </div>
+        ` : ''}
+        
+        ${audit.summary.potentialIssues && audit.summary.potentialIssues.length > 0 ? `
+          <div class="insights-section">
+            <div class="insights-header warning">⚠ Hinweise:</div>
+            <ul class="insights-list">
+              ${audit.summary.potentialIssues.map(issue => `<li>${this.escapeHtml(issue)}</li>`).join('')}
+            </ul>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  /**
+   * Render process flow section
+   */
+  renderProcessFlow(audit) {
+    if (!audit.phases || audit.phases.length === 0) {
+      return '<div class="audit-process-flow"><p>Keine Phasen verfügbar</p></div>';
+    }
+
+    return `
+      <div class="audit-process-flow">
+        ${audit.phases.map((phase, index) => `
+          <div class="phase-group ${index === audit.phases.length - 1 ? 'last-phase' : ''}">
+            <div class="phase-header">
+              <div class="phase-info">
+                <span class="phase-icon">${phase.icon || '📋'}</span>
+                <span class="phase-name">${phase.displayName || phase.name}</span>
+              </div>
+              <div class="phase-divider"></div>
+              <div class="phase-stats">
+                <div class="confidence-bar">
+                  <div class="confidence-fill" 
+                      style="width: ${phase.avgConfidence || 0}%; background-color: ${auditService.getConfidenceColor(phase.avgConfidence || 0)}">
+                  </div>
+                </div>
+                <span class="confidence-text">${phase.avgConfidence || 0}%</span>
+              </div>
+            </div>
+            
+            <div class="phase-entries">
+              ${(phase.entries || []).map(entry => `
+                <div class="audit-entry">
+                  <div class="entry-main">
+                    <span class="entry-action">${auditService.getActionDisplayName(entry.action)}</span>
+                    <div class="entry-meta">
+                      <div class="confidence-indicator" 
+                          style="background-color: ${auditService.getConfidenceColor(entry.confidence || 0)}">
+                      </div>
+                      <span class="confidence-value">${entry.confidence || 0}%</span>
+                      <span class="processing-time">${entry.processingTimeMs || 0}ms</span>
+                    </div>
+                  </div>
+                  
+                  ${(entry.inputSummary && entry.inputSummary !== 'null') || (entry.outputSummary && entry.outputSummary !== 'null') ? `
+                    <div class="entry-details">
+                      ${entry.inputSummary && entry.inputSummary !== 'null' ? `
+                        <div class="detail-item"><strong>Input:</strong> ${this.escapeHtml(entry.inputSummary)}</div>
+                      ` : ''}
+                      ${entry.outputSummary && entry.outputSummary !== 'null' ? `
+                        <div class="detail-item"><strong>Output:</strong> ${this.escapeHtml(entry.outputSummary)}</div>
+                      ` : ''}
+                    </div>
+                  ` : ''}
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  /**
+   * Render technical details section
+   */
+  renderTechnicalDetails(audit) {
+    const technicalId = `${this.componentId}-technical`;
+    
+    return `
+      <div class="technical-toggle">
+        <button class="technical-toggle-btn" data-target="${technicalId}">
+          🔧 Technische Details anzeigen
+        </button>
+        <div id="${technicalId}" class="technical-details collapsed">
+          ${(audit.phases || []).map(phase => 
+            (phase.entries || []).map(entry => `
+              <div class="technical-entry">
+                <div class="technical-header">
+                  <span class="technical-phase">${entry.phase}/${entry.action}</span>
+                  <span class="technical-time">
+                    ${new Date(entry.timestamp).toLocaleTimeString('de-DE', { 
+                      hour: '2-digit', 
+                      minute: '2-digit', 
+                      second: '2-digit' 
+                    })} • ${entry.processingTimeMs || 0}ms
+                  </span>
+                </div>
+                <div class="technical-content">
+                  <div class="technical-row">
+                    <strong>Confidence:</strong> ${entry.confidence || 0}%
+                  </div>
+                  ${entry.metadata && Object.keys(entry.metadata).length > 0 ? `
+                    <div class="technical-row">
+                      <strong>Metadata:</strong> ${this.escapeHtml(JSON.stringify(entry.metadata))}
+                    </div>
+                  ` : ''}
+                </div>
+              </div>
+            `).join('')
+          ).join('')}
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Attach event handlers for interactions
+   */
+  attachEventHandlers() {
+    console.log('[AUDIT RENDERER] Attaching event handlers...');
+    
+    // Handle collapsible header
+    if (this.options.collapsible) {
+      const header = document.querySelector(`[data-target="${this.componentId}-details"]`);
+      const details = document.getElementById(`${this.componentId}-details`);
+      const toggleIcon = header?.querySelector('.toggle-icon svg');
+      
+      if (header && details && toggleIcon) {
+        // Remove existing listeners
+        header.replaceWith(header.cloneNode(true));
+        const newHeader = document.querySelector(`[data-target="${this.componentId}-details"]`);
+        const newToggleIcon = newHeader?.querySelector('.toggle-icon svg');
+        
+        if (newHeader && newToggleIcon) {
+          newHeader.addEventListener('click', () => {
+            const isCollapsed = details.classList.contains('collapsed');
+            
+            if (isCollapsed) {
+              details.classList.remove('collapsed');
+              newToggleIcon.style.transform = 'rotate(180deg)';
+            } else {
+              details.classList.add('collapsed');
+              newToggleIcon.style.transform = 'rotate(0deg)';
+            }
+          });
+          console.log('[AUDIT RENDERER] Collapsible header handler attached');
+        }
+      }
+    }
+    
+    // Handle technical details toggle
+    const technicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
+    const technicalDetails = document.getElementById(`${this.componentId}-technical`);
+    
+    if (technicalBtn && technicalDetails) {
+      // Remove existing listener
+      technicalBtn.replaceWith(technicalBtn.cloneNode(true));
+      const newTechnicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
+      
+      if (newTechnicalBtn) {
+        newTechnicalBtn.addEventListener('click', () => {
+          const isCollapsed = technicalDetails.classList.contains('collapsed');
+          
+          if (isCollapsed) {
+            technicalDetails.classList.remove('collapsed');
+            newTechnicalBtn.textContent = '🔧 Technische Details ausblenden';
+          } else {
+            technicalDetails.classList.add('collapsed');
+            newTechnicalBtn.textContent = '🔧 Technische Details anzeigen';
+          }
+        });
+        console.log('[AUDIT RENDERER] Technical details handler attached');
+      }
+    }
+  }
+
+  /**
+   * Render empty state
+   */
+  renderEmpty() {
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.innerHTML = `
+        <div class="audit-trail-container">
+          <div class="audit-trail-header">
+            <div class="audit-icon">
+              <div class="audit-icon-gradient">ⓘ</div>
+              <h4>Kein Audit-Trail verfügbar</h4>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  }
+
+  /**
+   * Render error state
+   */
+  renderError(error) {
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.innerHTML = `
+        <div class="audit-trail-container">
+          <div class="audit-trail-header">
+            <div class="audit-icon">
+              <div class="audit-icon-gradient" style="background: var(--color-error);">✗</div>
+              <h4>Audit-Trail Fehler</h4>
+            </div>
+          </div>
+          <div class="audit-summary">
+            <p style="color: var(--color-error);">
+              Fehler beim Laden der Audit-Informationen: ${this.escapeHtml(error.message)}
+            </p>
+          </div>
+        </div>
+      `;
+    }
+  }
+
+  /**
+   * Utility method to escape HTML
+   */
+  escapeHtml(text) {
+    if (typeof text !== 'string') return String(text);
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Clear the audit trail display
+   */
+  clear() {
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.innerHTML = '';
+    }
+  }
+
+  /**
+   * Get container element
+   */
+  getContainer() {
+    return document.getElementById(this.containerId);
+  }
+}