mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 3 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
README.md
View File

@ -44,19 +44,206 @@ Die Seite ist dann unter `http://localhost:4321` verfügbar.
### Produktions-Deployment ### Produktions-Deployment
#### Voraussetzungen
- Ubuntu/Debian server
- Node.js 18+
- Nginx
- Domain
- SSL Zertifikat
#### Installationsschritte
##### 1. Vorbereitung
```bash ```bash
# Build erstellen # Klonen des Repositorys
npm install && npm run build git clone https://git.cc24.dev/mstoeck3/cc24-hub
cd cc24-hub
# Abhängigkeiten installieren
npm install
# Production-Build anstoßen
npm run build
``` ```
Die statische Seite wird im `dist/` Verzeichnis generiert und kann in die Webroot des Webservers kopiert werden. ##### 2. Webroot vorbereiten
### Verfügbare Scripts ```bash
# Webroot erstellen und Berechtigungen setzen
sudo mkdir -p /var/www/cc24-hub
sudo chown $USER:$USER /var/www/cc24-hub
# Build in Webroot kopieren
cp -r ./dist/* /var/www/cc24-hub/
cp package.json /var/www/cc24-hub/
# Prod-Abhängigkeiten installieren
cd /var/www/cc24-hub
npm install --production
# Berechtigungen setzen
sudo chown -R www-data:www-data /var/www/cc24-hub
```
##### 3. Umgebungsvariablen setzen
Erstelle `/var/www/cc24-hub/.env`:
```bash
# AI Konfiguration
AI_API_ENDPOINT=https://llm.mikoshi.de # hier geeigneten Endpunkt setzen
AI_API_KEY=your_ai_api_key
AI_MODEL=mistral/mistral-small-latest # hier geeignetes KI-Modell wählen
# Authentifizierung ("false" setzen für Tests, oder wenn kostenlose KI verwendet wird)
AUTHENTICATION_NECESSARY=true
OIDC_ENDPOINT=https://cloud.cc24.dev
OIDC_CLIENT_ID=your_oidc_client_id
OIDC_CLIENT_SECRET=your_oidc_client_secret
AUTH_SECRET=your_super_secret_jwt_key_min_32_chars
# Public Configuration
PUBLIC_BASE_URL=https://your-domain.com # hier die URL setzen, mit der von außen zugegriffen wird
```
```bash
# .env sichern
sudo chmod 600 /var/www/cc24-hub/.env
sudo chown www-data:www-data /var/www/cc24-hub/.env
```
##### 4. Systemd-Service erstellen
Create `/etc/systemd/system/cc24-hub.service`:
```ini
[Unit]
Description=CC24-Hub DFIR Tool Directory
After=network.target
Wants=network.target
[Service]
Type=simple
User=www-data
Group=www-data
WorkingDirectory=/var/www/cc24-hub
ExecStart=/usr/bin/node server/entry.mjs
Restart=always
RestartSec=5
StartLimitInterval=60s
StartLimitBurst=3
# Environment
Environment=NODE_ENV=production
Environment=PORT=3000
# Security
NoNewPrivileges=true
PrivateTmp=true
ProtectSystem=strict
ReadWritePaths=/var/www/cc24-hub
# Logging
StandardOutput=journal
StandardError=journal
SyslogIdentifier=cc24-hub
[Install]
WantedBy=multi-user.target
```
##### 5. Nginx Reverse Proxy konfigurieren
Erstelle `/etc/nginx/sites-available/cc24-hub`:
```nginx
server {
listen 80;
server_name your-domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name your-domain.com;
# SSL Configuration (adjust paths for your certificates)
ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
# SSL Security
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
ssl_prefer_server_ciphers off;
# Security Headers
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
# Proxy to Node.js application
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
proxy_read_timeout 300s;
proxy_connect_timeout 75s;
}
# Optional: Serve static assets directly (performance optimization)
location /_astro/ {
proxy_pass http://localhost:3000;
expires 1y;
add_header Cache-Control "public, immutable";
}
}
```
##### 6. Daemon starten und Autostart setzen
```bash
# Enable Nginx site
sudo ln -s /etc/nginx/sites-available/cc24-hub /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
# Enable and start CC24-Hub service
sudo systemctl daemon-reload
sudo systemctl enable cc24-hub
sudo systemctl start cc24-hub
# Check status
sudo systemctl status cc24-hub
```
##### 7. Deployment verifizieren
```bash
# Check application logs
sudo journalctl -u cc24-hub -f
# Check if app is responding
curl http://localhost:3000
# Check external access
curl https://your-domain.com
```
#### OIDC Konfigurieren
Nextcloud OIDC Einstellungen (sollte auch mit anderen OIDC-Anwendungen klappen):
- **Redirect URI**: `https://your-domain.com/auth/callback`
- **Logout URI**: `https://your-domain.com`
- `npm run dev` - Development Server
- `npm run build` - Produktions-Build
- `npm run preview` - Vorschau des Builds
- `npm run deploy:static` - Statisches Deployment (Script)
## 📁 Projektstruktur ## 📁 Projektstruktur

56
src/components/AIQueryInterface.astro
View File

@ -368,6 +368,8 @@ Beispiele:
<script define:vars={{ toolsData: tools }}> <script define:vars={{ toolsData: tools }}>
// Global tool data for quick lookup // Global tool data for quick lookup
window.aiToolsData = toolsData; window.aiToolsData = toolsData;
// Store AI session results
window.aiSessionResults = null;
// Authentication check function // Authentication check function
async function checkAuthentication() { async function checkAuthentication() {
@ -454,6 +456,8 @@ document.addEventListener('DOMContentLoaded', () => {
queryInput.value = ''; queryInput.value = '';
charCount.textContent = '0'; charCount.textContent = '0';
hideAllStates(); hideAllStates();
// Clear session results
window.aiSessionResults = null;
}); });
} }
@ -461,10 +465,22 @@ document.addEventListener('DOMContentLoaded', () => {
if (newQueryBtn) { if (newQueryBtn) {
newQueryBtn.addEventListener('click', () => { newQueryBtn.addEventListener('click', () => {
hideAllStates(); hideAllStates();
// Clear session results
window.aiSessionResults = null;
queryInput?.focus(); 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 // State management functions
function showLoadingState() { function showLoadingState() {
hideAllStates(); hideAllStates();
@ -482,6 +498,8 @@ document.addEventListener('DOMContentLoaded', () => {
function showResults(recommendation) { function showResults(recommendation) {
hideAllStates(); hideAllStates();
populateResults(recommendation); populateResults(recommendation);
// Save results to session
window.aiSessionResults = recommendation;
resultsEl.style.display = 'block'; resultsEl.style.display = 'block';
submitBtn.disabled = false; submitBtn.disabled = false;
} }
@ -518,10 +536,14 @@ document.addEventListener('DOMContentLoaded', () => {
const phaseTools = recommendedTools.filter(tool => tool.phase === phaseId); const phaseTools = recommendedTools.filter(tool => tool.phase === phaseId);
if (phaseTools.length === 0) { 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; 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 => { container.innerHTML = phaseTools.map(recTool => {
const toolData = window.aiToolsData.find(t => t.name === recTool.name); const toolData = window.aiToolsData.find(t => t.name === recTool.name);
if (!toolData) return ''; if (!toolData) return '';
@ -543,15 +565,29 @@ document.addEventListener('DOMContentLoaded', () => {
"${recTool.justification}" "${recTool.justification}"
</div> </div>
<div class="tool-rec-metadata"> <div style="margin-top: auto;">
<span>💻 ${(toolData.platforms || []).join(', ')}</span> <div class="tool-rec-metadata">
<span>•</span> <div style="display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem;">
<span>📈 ${toolData.skillLevel}</span> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<span>•</span> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<span>📄 ${toolData.license}</span> <line x1="9" y1="9" x2="15" y2="9"></line>
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''} <line x1="9" y1="15" x2="15" y2="15"></line>
${isOSS ? '<span class="badge badge-success">Open Source</span>' : ''} </svg>
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''} <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>
</div> </div>
`; `;

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

@ -118,11 +118,18 @@ ${phasesDescription}
FORENSISCHE DOMÄNEN: FORENSISCHE DOMÄNEN:
${domainsDescription} ${domainsDescription}
PRIORITÄTEN: WICHTIGE REGELN:
1. Self-hosted Tools (projectUrl: "self-hosted") bevorzugen 1. Open Source Tools bevorzugen (license != "Proprietary")
2. Open Source Tools bevorzugen (license != "Proprietary") 2. Pro Phase 1-3 Tools empfehlen (immer mindestens 1 wenn verfügbar)
3. Maximal 3 Tools pro Phase empfehlen 3. Tools können in MEHREREN Phasen empfohlen werden wenn sinnvoll - versuche ein Tool für jede Phase zu empfehlen!
4. Deutsche Antworten für deutsche Anfragen, English for English queries 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): ANTWORT-FORMAT (strict JSON):
{ {
@ -132,7 +139,7 @@ ANTWORT-FORMAT (strict JSON):
"name": "EXAKTER Name aus der Database", "name": "EXAKTER Name aus der Database",
"priority": "high|medium|low", "priority": "high|medium|low",
"phase": "data-collection|examination|analysis|reporting", "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", "workflow_suggestion": "Vorgeschlagener Untersuchungsablauf",

6
src/pages/index.astro
View File

@ -174,6 +174,12 @@ const tools = data.tools;
switch (view) { switch (view) {
case 'ai': case 'ai':
aiInterface!.style.display = 'block'; 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 // Focus on the input
const aiInput = document.getElementById('ai-query-input'); const aiInput = document.getElementById('ai-query-input');
if (aiInput) { if (aiInput) {

367
src/styles/global.css
View File

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