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

finalize AI

Browse Source
This commit is contained in:
overcuriousity
2025-07-16 22:45:23 +02:00
parent 74f28f4fd9
commit 2b061db94e
5 changed files with 507 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/AIQueryInterface.astro
View File

@@ -368,6 +368,8 @@ Beispiele:
<script define:vars={{ toolsData: tools }}>
// Global tool data for quick lookup
window.aiToolsData = toolsData;
// Store AI session results
window.aiSessionResults = null;
// Authentication check function
async function checkAuthentication() {
@@ -454,6 +456,8 @@ document.addEventListener('DOMContentLoaded', () => {
queryInput.value = '';
charCount.textContent = '0';
hideAllStates();
// Clear session results
window.aiSessionResults = null;
});
}
@@ -461,10 +465,22 @@ document.addEventListener('DOMContentLoaded', () => {
if (newQueryBtn) {
newQueryBtn.addEventListener('click', () => {
hideAllStates();
// Clear session results
window.aiSessionResults = null;
queryInput?.focus();
});
}
// Function to restore previous results when switching back to AI view
function restoreSessionResults() {
if (window.aiSessionResults) {
showResults(window.aiSessionResults);
}
}
// Make restore function globally accessible
window.restoreAIResults = restoreSessionResults;
// State management functions
function showLoadingState() {
hideAllStates();
@@ -482,6 +498,8 @@ document.addEventListener('DOMContentLoaded', () => {
function showResults(recommendation) {
hideAllStates();
populateResults(recommendation);
// Save results to session
window.aiSessionResults = recommendation;
resultsEl.style.display = 'block';
submitBtn.disabled = false;
}
@@ -518,10 +536,14 @@ document.addEventListener('DOMContentLoaded', () => {
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>';
container.innerHTML = '<p class="text-muted" style="font-size: 0.875rem; margin: 0; font-style: italic; grid-column: 1 / -1; text-align: center; padding: 2rem;">Keine spezifischen Tools für diese Phase empfohlen.</p>';
return;
}
// Sort by priority: high -> medium -> low
const priorityOrder = { 'high': 1, 'medium': 2, 'low': 3 };
phaseTools.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
container.innerHTML = phaseTools.map(recTool => {
const toolData = window.aiToolsData.find(t => t.name === recTool.name);
if (!toolData) return '';
@@ -543,15 +565,29 @@ document.addEventListener('DOMContentLoaded', () => {
"${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 style="margin-top: auto;">
<div class="tool-rec-metadata">
<div style="display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="9" x2="15" y2="9"></line>
<line x1="9" y1="15" x2="15" y2="15"></line>
</svg>
<span>${(toolData.platforms || []).join(', ')}</span>
</div>
<div style="display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
<span>${toolData.skillLevel}</span>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
${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>
</div>
</div>
`;

19
src/pages/api/ai/query.ts
View File

@@ -118,11 +118,18 @@ ${phasesDescription}
FORENSISCHE DOMÄNEN:
${domainsDescription}
PRIORITÄTEN:
1. Self-hosted Tools (projectUrl: "self-hosted") bevorzugen
2. Open Source Tools bevorzugen (license != "Proprietary")
3. Maximal 3 Tools pro Phase empfehlen
4. Deutsche Antworten für deutsche Anfragen, English for English queries
WICHTIGE REGELN:
1. Open Source Tools bevorzugen (license != "Proprietary")
2. Pro Phase 1-3 Tools empfehlen (immer mindestens 1 wenn verfügbar)
3. Tools können in MEHREREN Phasen empfohlen werden wenn sinnvoll - versuche ein Tool für jede Phase zu empfehlen!
4. Für Reporting-Phase: Visualisierungs- und Dokumentationstools einschließen
5. Deutsche Antworten für deutsche Anfragen, English for English queries
TOOL-AUSWAHL NACH PHASE:
- data-collection: Imaging, Acquisition, Remote Collection Tools
- examination: Parsing, Extraction, Initial Analysis Tools
- analysis: Deep Analysis, Correlation, Visualization Tools
- reporting: Documentation, Visualization, Presentation Tools (z.B. QGIS für Geodaten, Timeline-Tools)
ANTWORT-FORMAT (strict JSON):
{
@@ -132,7 +139,7 @@ ANTWORT-FORMAT (strict JSON):
"name": "EXAKTER Name aus der Database",
"priority": "high|medium|low",
"phase": "data-collection|examination|analysis|reporting",
"justification": "Warum dieses Tool für dieses Szenario geeignet ist"
"justification": "Warum dieses Tool für diese Phase und Szenario geeignet ist"
}
],
"workflow_suggestion": "Vorgeschlagener Untersuchungsablauf",

6
src/pages/index.astro
View File

@@ -174,6 +174,12 @@ const tools = data.tools;
switch (view) {
case 'ai':
aiInterface!.style.display = 'block';
// Keep filters visible in AI mode for view switching
filtersSection!.style.display = 'block';
// Restore previous AI results if they exist
if ((window as any).restoreAIResults) {
(window as any).restoreAIResults();
}
// Focus on the input
const aiInput = document.getElementById('ai-query-input');
if (aiInput) {

367
src/styles/global.css
View File

@@ -1,5 +1,7 @@
/* CSS Reset and Base Styles */
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
@@ -8,11 +10,11 @@
/* CSS Variables for Theming */
:root {
/* Light Theme Colors */
--color-bg: #ffffff;
--color-bg: #fff;
--color-bg-secondary: #f5f5f5;
--color-bg-tertiary: #e0e0e0;
--color-text: #1a1a1a;
--color-text-secondary: #666666;
--color-text-secondary: #666;
--color-border: #d0d0d0;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
@@ -24,9 +26,9 @@
--color-hosted-bg: #f3f0ff;
--color-oss: #10b981;
--color-oss-bg: #ecfdf5;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%);
}
[data-theme="dark"] {
@@ -47,9 +49,9 @@
--color-hosted-bg: #2e1065;
--color-oss: #34d399;
--color-oss-bg: #064e3b;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 30%);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 50%);
}
/* Base Styles */
@@ -69,18 +71,40 @@ body {
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
line-height: 1.25;
margin-bottom: 0.5rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.125rem;
}
h6 {
font-size: 1rem;
}
p {
margin-bottom: 1rem;
@@ -210,7 +234,9 @@ nav {
}
/* Forms */
input, select, textarea {
input,
select,
textarea {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
@@ -221,10 +247,12 @@ input, select, textarea {
transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}
select {
@@ -279,10 +307,21 @@ input[type="checkbox"] {
gap: 1rem;
}
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Tool Matrix */
.matrix-wrapper {
@@ -326,41 +365,41 @@ input[type="checkbox"] {
/* Matrix Highlighting */
.matrix-table tr.highlight-row th,
.matrix-table tr.highlight-row td {
background-color: rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.2);
background-color: rgb(37 99 235 / 8%);
border-color: rgb(37 99 235 / 20%);
}
.matrix-table th.highlight-column,
.matrix-table td.highlight-column {
background-color: rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.2);
background-color: rgb(37 99 235 / 8%);
border-color: rgb(37 99 235 / 20%);
}
.matrix-table tr.highlight-row th.highlight-column,
.matrix-table tr.highlight-row td.highlight-column {
background-color: rgba(37, 99, 235, 0.15);
border-color: rgba(37, 99, 235, 0.4);
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
background-color: rgb(37 99 235 / 15%);
border-color: rgb(37 99 235 / 40%);
box-shadow: inset 0 0 0 1px rgb(37 99 235 / 30%);
}
/* Dark theme adjustments */
[data-theme="dark"] .matrix-table tr.highlight-row th,
[data-theme="dark"] .matrix-table tr.highlight-row td {
background-color: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
background-color: rgb(59 130 246 / 12%);
border-color: rgb(59 130 246 / 30%);
}
[data-theme="dark"] .matrix-table th.highlight-column,
[data-theme="dark"] .matrix-table td.highlight-column {
background-color: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
background-color: rgb(59 130 246 / 12%);
border-color: rgb(59 130 246 / 30%);
}
[data-theme="dark"] .matrix-table tr.highlight-row th.highlight-column,
[data-theme="dark"] .matrix-table tr.highlight-row td.highlight-column {
background-color: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.5);
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
background-color: rgb(59 130 246 / 20%);
border-color: rgb(59 130 246 / 50%);
box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%);
}
.tool-chip {
@@ -467,7 +506,7 @@ input[type="checkbox"] {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgb(0 0 0 / 50%);
z-index: 999;
}
@@ -483,6 +522,7 @@ input[type="checkbox"] {
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
margin-left: 0.5rem;
}
.badge-primary {
@@ -551,23 +591,63 @@ footer {
}
/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-secondary); }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-muted {
color: var(--color-text-secondary);
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideDown {
@@ -577,6 +657,7 @@ footer {
padding-top: 0;
margin-top: 0;
}
to {
opacity: 1;
max-height: 1000px;
@@ -586,15 +667,22 @@ footer {
}
@keyframes highlight-flash {
0% { background-color: rgba(37, 99, 235, 0.1); }
100% { background-color: transparent; }
0% {
background-color: rgb(37 99 235 / 10%);
}
100% {
background-color: transparent;
}
}
/* Loading spinner enhancement */
@keyframes pulse {
0%, 100% {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
@@ -606,6 +694,7 @@ footer {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
@@ -626,7 +715,8 @@ footer {
margin-bottom: 1rem;
}
.kb-content ul, .kb-content ol {
.kb-content ul,
.kb-content ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
@@ -635,7 +725,7 @@ footer {
background-color: var(--color-bg-secondary);
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: 'Monaco', 'Courier New', monospace;
font-family: Monaco, 'Courier New', monospace;
font-size: 0.875em;
}
@@ -775,7 +865,7 @@ footer {
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
max-height: 120px;
max-height: 60px;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
position: relative;
@@ -800,12 +890,10 @@ footer {
left: 0;
right: 0;
height: 40px;
background: linear-gradient(
to bottom,
transparent 0%,
transparent 60%,
var(--color-bg) 100%
);
background: linear-gradient(to bottom,
transparent 0%,
transparent 60%,
var(--color-bg) 100%);
pointer-events: none;
opacity: 1;
transition: opacity 0.3s ease;
@@ -900,23 +988,36 @@ footer {
}
/* Responsive Design */
@media (max-width: 768px) {
.grid-cols-2 { grid-template-columns: 1fr; }
.grid-cols-3 { grid-template-columns: 1fr; }
.grid-cols-4 { grid-template-columns: 1fr; }
@media (width <= 768px) {
.grid-cols-2 {
grid-template-columns: 1fr;
}
.grid-cols-3 {
grid-template-columns: 1fr;
}
.grid-cols-4 {
grid-template-columns: 1fr;
}
.nav-links {
gap: 1rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.footer-content {
flex-direction: column;
text-align: center;
}
.collaboration-tools-compact {
flex-direction: column;
}
@@ -925,119 +1026,136 @@ footer {
min-width: auto;
max-width: none;
}
.domain-phase-container {
grid-template-columns: 1fr;
gap: 1rem;
}
.phase-buttons {
gap: 0.375rem;
}
.phase-button {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
}
.tag-cloud {
max-height: 100px;
}
.tag-header {
gap: 0.75rem;
}
.ai-interface {
padding: 1rem 0;
}
.workflow-container {
gap: 0.75rem;
}
.phase-header {
padding: 1rem;
flex-direction: column;
gap: 0.75rem;
}
.phase-number {
width: 2rem;
height: 2rem;
font-size: 1rem;
align-self: flex-start;
}
.phase-title {
font-size: 1.125rem;
}
.phase-tools {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.75rem;
}
.tool-recommendation {
padding: 1rem;
min-height: auto;
}
.tool-rec-header {
flex-direction: column;
gap: 0.5rem;
align-items: start;
}
.tool-rec-metadata {
flex-direction: column;
align-items: start;
gap: 0.25rem;
}
.ai-input-container textarea {
min-height: 100px;
font-size: 0.8125rem;
}
}
@media (max-width: 640px) {
@media (width <= 600px) {
.phase-tools {
grid-template-columns: 1fr !important;
}
}
@media (width <= 640px) {
.phase-buttons {
justify-content: center;
}
.phase-button {
flex: 1;
min-width: 0;
text-align: center;
}
.tag-cloud {
max-height: 80px;
}
.tag-cloud.expanded {
max-height: 800px;
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.phase-buttons {
flex-direction: column;
gap: 0.375rem;
}
.phase-button {
width: 100%;
}
.ai-query-section {
margin-bottom: 2rem;
}
.phase-header {
padding: 0.75rem;
}
.tool-recommendation {
padding: 0.75rem;
}
.tool-rec-justification {
padding: 0.5rem;
font-size: 0.8125rem;
}
}
/* AI Interface Styles - Add to global.css */
.phase-tools {
grid-template-columns: 1fr;
}
}
/* AI Interface Container */
.ai-interface {
@@ -1057,20 +1175,21 @@ footer {
.ai-input-container textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}
/* Loading, Error, and Results States */
.ai-loading, .ai-error, .ai-results {
.ai-loading,
.ai-error,
.ai-results {
animation: fadeIn 0.3s ease-in;
}
/* Workflow Visualization */
.workflow-container {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 900px;
max-width: 1200px;
margin: 0 auto;
}
@@ -1114,16 +1233,16 @@ footer {
}
.phase-title {
margin: 0 0 1rem 0;
margin: 0 0 1rem;
color: var(--color-text);
font-size: 1.25rem;
font-weight: 600;
}
.phase-tools {
display: flex;
flex-direction: column;
gap: 0.75rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.workflow-arrow {
@@ -1134,23 +1253,28 @@ footer {
/* Tool Recommendation Cards */
.tool-recommendation {
background-color: var(--color-bg-secondary);
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 1rem;
padding: 1.25rem;
transition: all 0.2s ease;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
min-height: 200px;
}
.tool-recommendation:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.tool-recommendation.hosted {
background-color: var(--color-hosted-bg);
border-color: var(--color-hosted);
box-shadow: 0 0 0 1px var(--color-hosted);
}
.tool-recommendation.oss {
@@ -1209,9 +1333,8 @@ footer {
.tool-rec-metadata {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
flex-direction: column;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
}
@@ -1240,8 +1363,6 @@ footer {
position: relative;
}
.ai-results {
animation: fadeInUp 0.5s ease-out;
}
@@ -1250,11 +1371,17 @@ footer {
animation: fadeInUp 0.3s ease-out;
}
.tool-recommendation:nth-child(1) { animation-delay: 0.1s; }
.tool-recommendation:nth-child(2) { animation-delay: 0.2s; }
.tool-recommendation:nth-child(3) { animation-delay: 0.3s; }
.tool-recommendation:nth-child(1) {
animation-delay: 0.1s;
}
.tool-recommendation:nth-child(2) {
animation-delay: 0.2s;
}
.tool-recommendation:nth-child(3) {
animation-delay: 0.3s;
}
.ai-loading p {
animation: pulse 2s ease-in-out infinite;