diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro index 585b4cf..0c8d86e 100644 --- a/src/components/AIQueryInterface.astro +++ b/src/components/AIQueryInterface.astro @@ -733,35 +733,209 @@ class AIQueryInterface { this.elements.results.innerHTML = html; } - // NEW: Audit Trail Rendering Functions renderAuditTrail(auditTrail) { if (!auditTrail || !Array.isArray(auditTrail) || auditTrail.length === 0) { return ''; } - // Reuse existing card and info styles from global.css + // Calculate summary statistics + const totalTime = auditTrail.reduce((sum, entry) => sum + entry.processingTimeMs, 0); + const avgConfidence = auditTrail.reduce((sum, entry) => sum + entry.confidence, 0) / auditTrail.length; + const lowConfidenceSteps = auditTrail.filter(entry => entry.confidence < 60).length; + const highConfidenceSteps = auditTrail.filter(entry => entry.confidence >= 80).length; + + // Group entries by phase for better organization + const groupedEntries = auditTrail.reduce((groups, entry) => { + if (!groups[entry.phase]) groups[entry.phase] = []; + groups[entry.phase].push(entry); + return groups; + }, {}); + return ` -
-
- - - - - - -

Forensic Audit Trail (${auditTrail.length} Entries)

- -
- + + +
+ `; + } + + renderPhaseGroup(phase, entries) { + const phaseIcons = { + 'initialization': '🚀', + 'retrieval': '🔍', + 'selection': '🎯', + 'micro-task': '⚡', + 'completion': '✅' + }; + + const phaseNames = { + 'initialization': 'Initialisierung', + 'retrieval': 'Datensuche', + 'selection': 'Tool-Auswahl', + 'micro-task': 'Detail-Analyse', + 'completion': 'Finalisierung' + }; + + const avgConfidence = entries.reduce((sum, entry) => sum + entry.confidence, 0) / entries.length; + const totalTime = entries.reduce((sum, entry) => sum + entry.processingTimeMs, 0); + + return ` +
+
+
+ ${phaseIcons[phase] || '📋'} + ${phaseNames[phase] || phase} +
+
+
+
+
+
+ ${Math.round(avgConfidence)}% +
+
+ +
+ ${entries.map(entry => this.renderSimplifiedEntry(entry)).join('')} +
+
+ `; + } + + renderSimplifiedEntry(entry) { + const actionIcons = { + 'pipeline-start': '▶️', + 'embeddings-search': '🔍', + 'ai-tool-selection': '🎯', + 'ai-analysis': '🧠', + 'phase-tool-selection': '⚙️', + 'tool-evaluation': '📊', + 'background-knowledge-selection': '📚', + 'pipeline-end': '🏁' + }; + + const actionNames = { + 'pipeline-start': 'Analyse gestartet', + 'embeddings-search': 'Ähnliche Tools gesucht', + 'ai-tool-selection': 'Tools automatisch ausgewählt', + 'ai-analysis': 'KI-Analyse durchgeführt', + 'phase-tool-selection': 'Phasen-Tools evaluiert', + 'tool-evaluation': 'Tool-Bewertung erstellt', + 'background-knowledge-selection': 'Hintergrundwissen ausgewählt', + 'pipeline-end': 'Analyse abgeschlossen' + }; + + const confidenceColor = entry.confidence >= 80 ? 'var(--color-accent)' : + entry.confidence >= 60 ? 'var(--color-warning)' : 'var(--color-error)'; + + return ` +
+ ${actionIcons[entry.action] || '📋'} +
+
${actionNames[entry.action] || entry.action}
+ ${entry.output && typeof entry.output === 'object' && entry.output.selectedToolCount ? + `
${entry.output.selectedToolCount} Tools ausgewählt
` : ''} +
+
+
+
+
+ ${entry.confidence}% + ${entry.processingTimeMs}ms +
+
+ `; + } + + renderTechnicalEntry(entry) { + const formattedTime = new Date(entry.timestamp).toLocaleTimeString('de-DE', { + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }); + + return ` +
+
+ ${entry.phase}/${entry.action} + ${formattedTime} • ${entry.processingTimeMs}ms +
+ ${entry.input && Object.keys(entry.input).length > 0 ? ` +
+ Input: ${this.formatAuditData(entry.input)} +
+ ` : ''} + ${entry.output && Object.keys(entry.output).length > 0 ? ` +
+ Output: ${this.formatAuditData(entry.output)} +
+ ` : ''}
`; } diff --git a/src/styles/global.css b/src/styles/global.css index 0515ccc..ca7ceee 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -3769,4 +3769,107 @@ footer { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; +} + +/* =================================================================== + 26. ENHANCED AUDIT TRAIL STYLES + ================================================================= */ + +.audit-process-flow { + position: relative; +} + +.phase-group { + position: relative; +} + +.phase-group:not(:last-child)::after { + content: ''; + position: absolute; + left: 13px; + bottom: -8px; + width: 2px; + height: 16px; + background: linear-gradient(to bottom, var(--color-border) 0%, transparent 100%); +} + +.confidence-indicator { + position: relative; + overflow: hidden; +} + +.confidence-indicator::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%); + background-size: 4px 4px; + animation: confidence-shimmer 2s linear infinite; +} + +@keyframes confidence-shimmer { + 0% { transform: translateX(-4px); } + 100% { transform: translateX(4px); } +} + +.toggle-icon { + transition: transform 0.2s ease; +} + +/* Hover effects for audit entries */ +.audit-trail-details .hover\\:bg-secondary:hover { + background-color: var(--color-bg-secondary); +} + +/* Progress indicators */ +.audit-progress-step { + position: relative; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem; + border-radius: 0.375rem; + transition: var(--transition-fast); +} + +.audit-progress-step::before { + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; + transition: var(--transition-fast); +} + +.audit-progress-step.success::before { + background-color: var(--color-accent); +} + +.audit-progress-step.warning::before { + background-color: var(--color-warning); +} + +.audit-progress-step.error::before { + background-color: var(--color-error); +} + +/* Responsive adjustments for audit trail */ +@media (width <= 768px) { + .audit-process-flow .grid-cols-3 { + grid-template-columns: 1fr; + gap: 1rem; + } + + .phase-group .flex { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .confidence-indicator { + width: 100%; + } } \ No newline at end of file