enhancement 1
This commit is contained in:
overcuriousity
parent
6308c03709
commit
fe5eb78353
@ -733,35 +733,209 @@ class AIQueryInterface {
|
|||||||
this.elements.results.innerHTML = html;
|
this.elements.results.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
// NEW: Audit Trail Rendering Functions
|
|
||||||
renderAuditTrail(auditTrail) {
|
renderAuditTrail(auditTrail) {
|
||||||
if (!auditTrail || !Array.isArray(auditTrail) || auditTrail.length === 0) {
|
if (!auditTrail || !Array.isArray(auditTrail) || auditTrail.length === 0) {
|
||||||
return '';
|
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 `
|
return `
|
||||||
<div class="card-info-sm mt-4" style="border-left: 4px solid var(--color-text-secondary);">
|
<div class="card-info-sm mt-4" style="border-left: 4px solid var(--color-accent);">
|
||||||
<div class="flex items-center gap-2 mb-3">
|
<div class="flex items-center justify-between mb-3 cursor-pointer" onclick="const container = this.closest('.card-info-sm'); const details = container.querySelector('.audit-trail-details'); const isHidden = details.style.display === 'none'; details.style.display = isHidden ? 'block' : 'none'; this.querySelector('.toggle-icon').style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<div class="flex items-center gap-3">
|
||||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
<div class="flex items-center gap-2">
|
||||||
<polyline points="14 2 14 8 20 8"/>
|
<div style="width: 24px; height: 24px; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: bold;">
|
||||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
✓
|
||||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
</div>
|
||||||
</svg>
|
<h4 class="text-sm font-semibold text-accent mb-0">KI-Entscheidungspfad</h4>
|
||||||
<h4 class="text-sm font-semibold text-secondary">Forensic Audit Trail (${auditTrail.length} Entries)</h4>
|
</div>
|
||||||
<button class="btn-icon btn-sm" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.innerHTML = this.nextElementSibling.style.display === 'none' ? this.innerHTML.replace('▼', '▶') : this.innerHTML.replace('▶', '▼');">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<div class="flex gap-3 text-xs">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<div class="w-2 h-2 rounded-full" style="background-color: var(--color-accent);"></div>
|
||||||
|
<span class="text-muted">${this.formatDuration(totalTime)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<div class="w-2 h-2 rounded-full" style="background-color: ${avgConfidence >= 80 ? 'var(--color-accent)' : avgConfidence >= 60 ? 'var(--color-warning)' : 'var(--color-error)'};"></div>
|
||||||
|
<span class="text-muted">${Math.round(avgConfidence)}% Vertrauen</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<span class="text-muted">${auditTrail.length} Schritte</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toggle-icon" style="transition: transform 0.2s ease;">
|
||||||
|
<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"/>
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div style="display: none;" class="audit-trail-details">
|
|
||||||
<div class="text-xs text-muted mb-2">
|
|
||||||
<strong>Transparency Note:</strong> This trail documents every decision step for forensic verification and reproducibility.
|
|
||||||
</div>
|
</div>
|
||||||
${auditTrail.map(entry => this.renderAuditEntry(entry)).join('')}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style="display: none;" class="audit-trail-details">
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<!-- Summary Section -->
|
||||||
|
<div class="p-3 rounded-lg" style="background-color: var(--color-bg-tertiary);">
|
||||||
|
<div class="text-xs font-medium mb-2 text-accent">📊 Analyse-Qualität</div>
|
||||||
|
<div class="grid grid-cols-3 gap-3 text-xs">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="font-semibold" style="color: var(--color-accent);">${highConfidenceSteps}</div>
|
||||||
|
<div class="text-muted">Hohe Sicherheit</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="font-semibold" style="color: ${lowConfidenceSteps > 0 ? 'var(--color-warning)' : 'var(--color-accent)'};">${lowConfidenceSteps}</div>
|
||||||
|
<div class="text-muted">Unsichere Schritte</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="font-semibold">${this.formatDuration(totalTime)}</div>
|
||||||
|
<div class="text-muted">Verarbeitungszeit</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Process Flow -->
|
||||||
|
<div class="audit-process-flow">
|
||||||
|
${Object.entries(groupedEntries).map(([phase, entries]) => this.renderPhaseGroup(phase, entries)).join('')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Technical Details Toggle -->
|
||||||
|
<div class="text-center">
|
||||||
|
<button class="text-xs text-muted hover:text-primary transition-colors cursor-pointer border-none bg-none" onclick="const techDetails = this.nextElementSibling; const isHidden = techDetails.style.display === 'none'; techDetails.style.display = isHidden ? 'block' : 'none'; this.textContent = isHidden ? '🔧 Technische Details ausblenden' : '🔧 Technische Details anzeigen';">
|
||||||
|
🔧 Technische Details anzeigen
|
||||||
|
</button>
|
||||||
|
<div style="display: none;" class="mt-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-800 text-xs">
|
||||||
|
${auditTrail.map(entry => this.renderTechnicalEntry(entry)).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 `
|
||||||
|
<div class="phase-group mb-4">
|
||||||
|
<div class="flex items-center gap-3 mb-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-lg">${phaseIcons[phase] || '📋'}</span>
|
||||||
|
<span class="font-medium text-sm">${phaseNames[phase] || phase}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 h-px bg-border"></div>
|
||||||
|
<div class="flex items-center gap-2 text-xs text-muted">
|
||||||
|
<div class="confidence-indicator w-12 h-2 rounded-full overflow-hidden" style="background-color: var(--color-bg-tertiary);">
|
||||||
|
<div class="h-full rounded-full transition-all" style="width: ${avgConfidence}%; background-color: ${avgConfidence >= 80 ? 'var(--color-accent)' : avgConfidence >= 60 ? 'var(--color-warning)' : 'var(--color-error)'};"></div>
|
||||||
|
</div>
|
||||||
|
<span>${Math.round(avgConfidence)}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-2 ml-6">
|
||||||
|
${entries.map(entry => this.renderSimplifiedEntry(entry)).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 `
|
||||||
|
<div class="flex items-center gap-3 py-2 px-3 rounded-lg hover:bg-secondary transition-colors">
|
||||||
|
<span class="text-sm">${actionIcons[entry.action] || '📋'}</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-medium">${actionNames[entry.action] || entry.action}</div>
|
||||||
|
${entry.output && typeof entry.output === 'object' && entry.output.selectedToolCount ?
|
||||||
|
`<div class="text-xs text-muted">${entry.output.selectedToolCount} Tools ausgewählt</div>` : ''}
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-xs">
|
||||||
|
<div class="w-8 h-1.5 rounded-full overflow-hidden" style="background-color: var(--color-bg-tertiary);">
|
||||||
|
<div class="h-full rounded-full" style="width: ${entry.confidence}%; background-color: ${confidenceColor};"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-muted w-8 text-right">${entry.confidence}%</span>
|
||||||
|
<span class="text-muted w-12 text-right">${entry.processingTimeMs}ms</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTechnicalEntry(entry) {
|
||||||
|
const formattedTime = new Date(entry.timestamp).toLocaleTimeString('de-DE', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit'
|
||||||
|
});
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="border rounded p-2 mb-2" style="border-color: var(--color-border);">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="font-mono text-xs">${entry.phase}/${entry.action}</span>
|
||||||
|
<span class="text-xs text-muted">${formattedTime} • ${entry.processingTimeMs}ms</span>
|
||||||
|
</div>
|
||||||
|
${entry.input && Object.keys(entry.input).length > 0 ? `
|
||||||
|
<div class="text-xs mb-1">
|
||||||
|
<strong>Input:</strong> ${this.formatAuditData(entry.input)}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
${entry.output && Object.keys(entry.output).length > 0 ? `
|
||||||
|
<div class="text-xs">
|
||||||
|
<strong>Output:</strong> ${this.formatAuditData(entry.output)}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3770,3 +3770,106 @@ footer {
|
|||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-border);
|
||||||
margin: 2rem 0;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user