mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Activity

forensic-ai #4

Merged
mstoeck3 merged 20 commits from forensic-ai into main 2025-08-05 20:56:02 +00:00
Conversation 0 Commits 20 Files Changed 18 +296 -19
2 changed files with 296 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fe5eb78353 - Show all commits

212
src/components/AIQueryInterface.astro
View File

@ -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 `
<div class="card-info-sm mt-4" style="border-left: 4px solid var(--color-text-secondary);">
<div class="flex items-center gap-2 mb-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
</svg>
<h4 class="text-sm font-semibold text-secondary">Forensic Audit Trail (${auditTrail.length} Entries)</h4>
<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="card-info-sm mt-4" style="border-left: 4px solid var(--color-accent);">
<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)';">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<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;">
✓
</div>
<h4 class="text-sm font-semibold text-accent mb-0">KI-Entscheidungspfad</h4>
</div>
<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"/>
</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>
${auditTrail.map(entry => this.renderAuditEntry(entry)).join('')}
</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>
`;
}

103
src/styles/global.css
View File

@ -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%;
}
}