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

update ai stuff

Browse Source
This commit is contained in:
overcuriousity
2025-07-16 21:14:50 +02:00
parent 073f52bada
commit 89f45b85be
6 changed files with 1014 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

556
src/components/AIQueryInterface.astro
View File

@@ -0,0 +1,556 @@
---
// src/components/AIQueryInterface.astro
import { promises as fs } from 'fs';
import { load } from 'js-yaml';
import path from 'path';
// Load tools data for tool details
const yamlPath = path.join(process.cwd(), 'src/data/tools.yaml');
const yamlContent = await fs.readFile(yamlPath, 'utf8');
const data = load(yamlContent) as any;
const tools = data.tools;
const phases = data.phases.filter((phase: any) => phase.id !== 'collaboration-general');
---
<div id="ai-interface" class="ai-interface" style="display: none;">
<!-- AI Query Input Section -->
<div class="ai-query-section">
<div style="text-align: center; margin-bottom: 2rem;">
<h2 style="margin-bottom: 1rem; color: var(--color-primary);">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: text-top;">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
KI-gestützte Tool-Empfehlungen
</h2>
<p class="text-muted" style="max-width: 600px; margin: 0 auto; line-height: 1.6;">
Beschreiben Sie Ihr Ermittlungsszenario auf Deutsch oder Englisch und erhalten Sie
personalisierte Tool-Empfehlungen basierend auf dem NIST-Framework.
</p>
</div>
<div class="ai-input-container" style="max-width: 800px; margin: 0 auto 2rem;">
<div style="position: relative;">
<textarea
id="ai-query-input"
placeholder="Beschreiben Sie Ihr Ermittlungsszenario...
Beispiele:
• Ich untersuche einen Ransomware-Angriff auf Windows-Systeme und brauche Tools für Memory-Analyse
• We need to investigate suspicious network traffic from an IoT device
• Ein Smartphone wurde kompromittiert - welche Tools für Mobile Forensik?"
style="width: 100%; min-height: 120px; padding: 1rem; border: 2px solid var(--color-border); border-radius: 0.5rem; resize: vertical; font-family: inherit; font-size: 0.875rem; line-height: 1.5;"
maxlength="2000"
></textarea>
<div style="position: absolute; bottom: 0.75rem; right: 0.75rem; font-size: 0.75rem; color: var(--color-text-secondary);">
<span id="char-count">0</span>/2000
</div>
</div>
<div style="display: flex; gap: 1rem; margin-top: 1rem; justify-content: center;">
<button id="ai-submit-btn" class="btn btn-primary" style="padding: 0.75rem 2rem;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M22 2L11 13"/>
<path d="M22 2l-7 20-4-9-9-4 20-7z"/>
</svg>
Empfehlungen abrufen
</button>
<button id="ai-clear-btn" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M3 6h18"/>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
</svg>
Zurücksetzen
</button>
</div>
</div>
<!-- Loading State -->
<div id="ai-loading" class="ai-loading" style="display: none; text-align: center; padding: 2rem;">
<div class="loading-spinner" style="margin-bottom: 1rem;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2" style="animation: spin 1s linear infinite;">
<path d="M12 2v4"/>
<path d="M12 18v4"/>
<path d="M4.93 4.93l2.83 2.83"/>
<path d="M16.24 16.24l2.83 2.83"/>
<path d="M2 12h4"/>
<path d="M18 12h4"/>
<path d="M4.93 19.07l2.83-2.83"/>
<path d="M16.24 7.76l2.83-2.83"/>
</svg>
</div>
<h3 style="margin-bottom: 0.5rem; color: var(--color-primary);">KI analysiert Ihr Szenario...</h3>
<p class="text-muted">Dies kann einige Sekunden dauern.</p>
</div>
<!-- Error State -->
<div id="ai-error" class="ai-error" style="display: none; text-align: center; padding: 2rem;">
<div style="margin-bottom: 1rem;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-error)" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="15" y1="9" x2="9" y2="15"/>
<line x1="9" y1="9" x2="15" y2="15"/>
</svg>
</div>
<h3 style="margin-bottom: 0.5rem; color: var(--color-error);">Fehler bei der Analyse</h3>
<p class="text-muted" id="ai-error-message">Ein unerwarteter Fehler ist aufgetreten.</p>
</div>
</div>
<!-- AI Results Section -->
<div id="ai-results" class="ai-results" style="display: none;">
<!-- Scenario Analysis -->
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
<h3 style="margin-bottom: 1rem; color: var(--color-primary);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
Szenario-Analyse
</h3>
<div id="scenario-analysis" style="line-height: 1.7;"></div>
</div>
<!-- Workflow Visualization -->
<div style="margin-bottom: 2rem;">
<h3 style="margin-bottom: 1.5rem; text-align: center; color: var(--color-text);">
Empfohlener DFIR-Workflow
</h3>
<!-- Phase Flow -->
<div class="workflow-container">
{phases.map((phase: any, index: number) => (
<div class="workflow-phase" data-phase={phase.id}>
<div class="phase-header">
<div class="phase-number">{index + 1}</div>
<div class="phase-info">
<h4 class="phase-title">{phase.name}</h4>
<div class="phase-tools" id={`phase-tools-${phase.id}`}>
<!-- Tools will be populated by JavaScript -->
</div>
</div>
</div>
{index < phases.length - 1 && (
<div class="workflow-arrow">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
<path d="M5 12h14"/>
<path d="M12 5l7 7-7 7"/>
</svg>
</div>
)}
</div>
))}
</div>
</div>
<!-- Additional Information -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="card">
<h4 style="margin-bottom: 1rem; color: var(--color-accent);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Workflow-Empfehlung
</h4>
<div id="workflow-suggestion" style="line-height: 1.6;"></div>
</div>
<div class="card">
<h4 style="margin-bottom: 1rem; color: var(--color-warning);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<path d="M12 8h.01"/>
</svg>
Wichtige Hinweise
</h4>
<div id="additional-notes" style="line-height: 1.6;"></div>
</div>
</div>
<!-- New Query Button -->
<div style="text-align: center; margin-top: 2rem;">
<button id="new-query-btn" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
<path d="M21 3v5h-5"/>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
<path d="M3 21v-5h5"/>
</svg>
Neue Anfrage starten
</button>
</div>
</div>
</div>
<style>
/* Loading spinner animation */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Workflow styling */
.workflow-container {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 900px;
margin: 0 auto;
}
.workflow-phase {
position: relative;
}
.phase-header {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
background-color: var(--color-bg);
border: 2px solid var(--color-border);
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.phase-header:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.phase-number {
background-color: var(--color-primary);
color: white;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.125rem;
flex-shrink: 0;
}
.phase-info {
flex: 1;
min-width: 0;
}
.phase-title {
margin: 0 0 1rem 0;
color: var(--color-text);
font-size: 1.25rem;
font-weight: 600;
}
.phase-tools {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.workflow-arrow {
display: flex;
justify-content: center;
margin: 0.5rem 0;
}
/* Tool recommendation cards */
.tool-recommendation {
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 1rem;
transition: all 0.2s ease;
cursor: pointer;
}
.tool-recommendation:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.tool-recommendation.hosted {
background-color: var(--color-hosted-bg);
border-color: var(--color-hosted);
}
.tool-recommendation.oss {
background-color: var(--color-oss-bg);
border-color: var(--color-oss);
}
.tool-rec-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 0.75rem;
}
.tool-rec-name {
font-weight: 600;
font-size: 1rem;
margin: 0;
color: var(--color-text);
}
.tool-rec-priority {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
font-weight: 500;
}
.tool-rec-priority.high {
background-color: var(--color-error);
color: white;
}
.tool-rec-priority.medium {
background-color: var(--color-warning);
color: white;
}
.tool-rec-priority.low {
background-color: var(--color-accent);
color: white;
}
.tool-rec-justification {
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-text-secondary);
margin-bottom: 0.75rem;
font-style: italic;
}
.tool-rec-metadata {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}
/* Responsive design */
@media (max-width: 768px) {
.workflow-container {
gap: 0.75rem;
}
.phase-header {
padding: 1rem;
}
.phase-number {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.phase-title {
font-size: 1.125rem;
}
.tool-rec-header {
flex-direction: column;
gap: 0.5rem;
align-items: start;
}
}
</style>
<script define:vars={{ toolsData: tools }}>
// Global tool data for quick lookup
window.aiToolsData = toolsData;
// Authentication check function
async function checkAuthentication() {
try {
const response = await fetch('/api/auth/status');
const data = await response.json();
return data.authenticated;
} catch (error) {
console.error('Auth check failed:', error);
return false;
}
}
// Initialize AI interface
document.addEventListener('DOMContentLoaded', () => {
const queryInput = document.getElementById('ai-query-input');
const submitBtn = document.getElementById('ai-submit-btn');
const clearBtn = document.getElementById('ai-clear-btn');
const charCount = document.getElementById('char-count');
const loadingEl = document.getElementById('ai-loading');
const errorEl = document.getElementById('ai-error');
const resultsEl = document.getElementById('ai-results');
const newQueryBtn = document.getElementById('new-query-btn');
// Character counter
if (queryInput && charCount) {
queryInput.addEventListener('input', () => {
charCount.textContent = queryInput.value.length;
});
}
// Submit query
if (submitBtn) {
submitBtn.addEventListener('click', async () => {
const query = queryInput?.value?.trim();
if (!query) {
alert('Bitte geben Sie eine Beschreibung Ihres Ermittlungsszenarios ein.');
return;
}
// Check authentication
const isAuthenticated = await checkAuthentication();
if (!isAuthenticated) {
// Redirect to login
window.location.href = `/api/auth/login?returnTo=${encodeURIComponent(window.location.pathname)}`;
return;
}
// Show loading state
showLoadingState();
try {
const response = await fetch('/api/ai/query', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ query }),
});
const data = await response.json();
if (data.success) {
showResults(data.recommendation);
} else {
showError(data.error || 'Unbekannter Fehler');
}
} catch (error) {
console.error('AI query failed:', error);
showError('Verbindungsfehler. Bitte versuchen Sie es erneut.');
}
});
}
// Clear button
if (clearBtn) {
clearBtn.addEventListener('click', () => {
queryInput.value = '';
charCount.textContent = '0';
hideAllStates();
});
}
// New query button
if (newQueryBtn) {
newQueryBtn.addEventListener('click', () => {
hideAllStates();
queryInput?.focus();
});
}
// State management functions
function showLoadingState() {
hideAllStates();
loadingEl.style.display = 'block';
submitBtn.disabled = true;
}
function showError(message) {
hideAllStates();
errorEl.style.display = 'block';
document.getElementById('ai-error-message').textContent = message;
submitBtn.disabled = false;
}
function showResults(recommendation) {
hideAllStates();
populateResults(recommendation);
resultsEl.style.display = 'block';
submitBtn.disabled = false;
}
function hideAllStates() {
loadingEl.style.display = 'none';
errorEl.style.display = 'none';
resultsEl.style.display = 'none';
}
// Populate results
function populateResults(recommendation) {
// Scenario analysis
document.getElementById('scenario-analysis').textContent = recommendation.scenario_analysis || 'Keine Analyse verfügbar.';
// Workflow suggestion
document.getElementById('workflow-suggestion').textContent = recommendation.workflow_suggestion || 'Keine Workflow-Empfehlung verfügbar.';
// Additional notes
document.getElementById('additional-notes').textContent = recommendation.additional_notes || 'Keine zusätzlichen Hinweise verfügbar.';
// Populate phase tools
populatePhaseTools(recommendation.recommended_tools || []);
}
// Populate tools by phase
function populatePhaseTools(recommendedTools) {
const phases = ['data-collection', 'examination', 'analysis', 'reporting'];
phases.forEach(phaseId => {
const container = document.getElementById(`phase-tools-${phaseId}`);
if (!container) return;
const phaseTools = recommendedTools.filter(tool => tool.phase === phaseId);
if (phaseTools.length === 0) {
container.innerHTML = '<p class="text-muted" style="font-size: 0.875rem; margin: 0; font-style: italic;">Keine spezifischen Tools für diese Phase empfohlen.</p>';
return;
}
container.innerHTML = phaseTools.map(recTool => {
const toolData = window.aiToolsData.find(t => t.name === recTool.name);
if (!toolData) return '';
const hasValidProjectUrl = toolData.projectUrl && toolData.projectUrl.trim() !== '';
const isOSS = toolData.license !== 'Proprietary';
const hasKnowledgebase = toolData.knowledgebase === true;
const cardClass = hasValidProjectUrl ? 'hosted' : (isOSS ? 'oss' : '');
return `
<div class="tool-recommendation ${cardClass}" onclick="window.showToolDetails('${toolData.name}')">
<div class="tool-rec-header">
<h5 class="tool-rec-name">${toolData.name}</h5>
<span class="tool-rec-priority ${recTool.priority}">${recTool.priority.toUpperCase()}</span>
</div>
<div class="tool-rec-justification">
"${recTool.justification}"
</div>
<div class="tool-rec-metadata">
<span>💻 ${(toolData.platforms || []).join(', ')}</span>
<span>•</span>
<span>📈 ${toolData.skillLevel}</span>
<span>•</span>
<span>📄 ${toolData.license}</span>
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
${isOSS ? '<span class="badge badge-success">Open Source</span>' : ''}
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
</div>
</div>
`;
}).join('');
});
}
});
</script>

34
src/components/ToolFilters.astro
View File

@@ -108,9 +108,23 @@ const sortedTags = Object.entries(tagFrequency)
</div>
<!-- View Toggle -->
<div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
<div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap;">
<button class="btn btn-secondary view-toggle active" data-view="grid">Kachelansicht</button>
<button class="btn btn-secondary view-toggle" data-view="matrix">Matrix-Ansicht</button>
<!-- AI Recommendations Button (only visible when authenticated) -->
<button
id="ai-view-toggle"
class="btn btn-secondary view-toggle"
data-view="ai"
style="display: none; background-color: var(--color-accent); color: white; border-color: var(--color-accent);"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
KI-Empfehlungen
</button>
</div>
</div>
@@ -129,12 +143,30 @@ const sortedTags = Object.entries(tagFrequency)
const tagCloud = document.getElementById('tag-cloud');
const tagCloudToggle = document.getElementById('tag-cloud-toggle');
const viewToggles = document.querySelectorAll('.view-toggle');
const aiViewToggle = document.getElementById('ai-view-toggle');
// Track selected tags and phase
let selectedTags = new Set();
let selectedPhase = '';
let isTagCloudExpanded = false;
// Check authentication status and show/hide AI button
async function checkAuthAndShowAIButton() {
try {
const response = await fetch('/api/auth/status');
const data = await response.json();
if (data.authenticated && aiViewToggle) {
aiViewToggle.style.display = 'inline-flex';
}
} catch (error) {
console.log('Auth check failed, AI button remains hidden');
}
}
// Call auth check on page load
checkAuthAndShowAIButton();
// Initialize tag cloud state
function initTagCloud() {
const visibleCount = 22;