Merge pull request 'main' (#25) from mstoeck3/forensic-pathways:main into main

Reviewed-on: mstoeck3/cc24-hub#25

.env.example

@@ -23,7 +23,7 @@ AI_API_KEY=your-mistral-api-key
 AI_RATE_LIMIT_DELAY_MS=1000
 
 # Git Integration (Required for contributions)
-GIT_REPO_URL=https://git.cc24.dev/mstoeck3/cc24-hub
+GIT_REPO_URL=https://git.cc24.dev/mstoeck3/forensic-pathways
 GIT_PROVIDER=gitea
 GIT_API_ENDPOINT=https://git.cc24.dev/api/v1
 GIT_API_TOKEN=your-git-api-token

.gitignore

@@ -84,3 +84,4 @@ temp/
 .astro/settings.json
 .astro/data-store.json
 .astro/content.d.ts
+prompt.md

README.md

@@ -78,8 +78,8 @@ Ein kuratiertes Verzeichnis für Digital Forensics und Incident Response (DFIR)
 
 ```bash
 # Repository klonen
-git clone https://git.cc24.dev/mstoeck3/cc24-hub.git
+git clone https://git.cc24.dev/mstoeck3/forensic-pathways.git
-cd cc24-hub
+cd forensic-pathways
 
 # Dependencies installieren
 npm install
@@ -117,8 +117,8 @@ sudo systemctl enable nginx
 
 ```bash
 # Klonen des Repositorys
-sudo git clone https://git.cc24.dev/mstoeck3/cc24-hub /opt/cc24-hub
+sudo git clone https://git.cc24.dev/mstoeck3/forensic-pathways /opt/forensic-pathways
-cd /opt/cc24-hub
+cd /opt/forensic-pathways
 
 # Abhängigkeiten installieren
 sudo npm install
@@ -127,12 +127,12 @@ sudo npm install
 sudo npm run build
 
 # Berechtigungen setzen
-sudo chown -R www-data:www-data /opt/cc24-hub
+sudo chown -R www-data:www-data /opt/forensic-pathways
 ```
 
 #### 3. Umgebungsvariablen konfigurieren
 
-Erstelle `/opt/cc24-hub/.env`:
+Erstelle `/opt/forensic-pathways/.env`:
 
 ```bash
 # ===========================================
@@ -160,7 +160,7 @@ AI_API_KEY=your-mistral-api-key
 AI_RATE_LIMIT_DELAY_MS=1000
 
 # Git Integration (Required for contributions)
-GIT_REPO_URL=https://git.cc24.dev/mstoeck3/cc24-hub
+GIT_REPO_URL=https://git.cc24.dev/mstoeck3/forensic-pathways
 GIT_PROVIDER=gitea
 GIT_API_ENDPOINT=https://git.cc24.dev/api/v1
 GIT_API_TOKEN=your-git-api-token
@@ -178,13 +178,13 @@ NEXTCLOUD_PUBLIC_URL=https://your-nextcloud.com/s/
 
 ```bash
 # Berechtigungen sichern
-sudo chmod 600 /opt/cc24-hub/.env
+sudo chmod 600 /opt/forensic-pathways/.env
-sudo chown www-data:www-data /opt/cc24-hub/.env
+sudo chown www-data:www-data /opt/forensic-pathways/.env
 ```
 
 #### 4. Nginx konfigurieren
 
-Erstelle `/etc/nginx/sites-available/cc24-hub`:
+Erstelle `/etc/nginx/sites-available/forensic-pathways`:
 
 ```nginx
 server {
@@ -212,7 +212,7 @@ server {
     # Static Files
     location / {
         try_files $uri $uri/ @nodejs;
-        root /opt/cc24-hub/dist;
+        root /opt/forensic-pathways/dist;
         index index.html;
         
         # Cache static assets
@@ -244,14 +244,14 @@ server {
 
 ```bash
 # Site aktivieren
-sudo ln -s /etc/nginx/sites-available/cc24-hub /etc/nginx/sites-enabled/
+sudo ln -s /etc/nginx/sites-available/forensic-pathways /etc/nginx/sites-enabled/
 sudo nginx -t
 sudo systemctl reload nginx
 ```
 
 #### 5. Systemd Service einrichten
 
-Erstelle `/etc/systemd/system/cc24-hub.service`:
+Erstelle `/etc/systemd/system/forensic-pathways.service`:
 
 ```ini
 [Unit]
@@ -263,7 +263,7 @@ Wants=nginx.service
 Type=exec
 User=www-data
 Group=www-data
-WorkingDirectory=/opt/cc24-hub
+WorkingDirectory=/opt/forensic-pathways
 Environment=NODE_ENV=production
 ExecStart=/usr/bin/node ./dist/server/entry.mjs
 Restart=always
@@ -276,7 +276,7 @@ NoNewPrivileges=yes
 PrivateTmp=yes
 ProtectSystem=strict
 ProtectHome=yes
-ReadWritePaths=/opt/cc24-hub
+ReadWritePaths=/opt/forensic-pathways
 CapabilityBoundingSet=
 
 # Resource Limits
@@ -290,11 +290,11 @@ WantedBy=multi-user.target
 ```bash
 # Service aktivieren und starten
 sudo systemctl daemon-reload
-sudo systemctl enable cc24-hub
+sudo systemctl enable forensic-pathways
-sudo systemctl start cc24-hub
+sudo systemctl start forensic-pathways
 
 # Status prüfen
-sudo systemctl status cc24-hub
+sudo systemctl status forensic-pathways
 ```
 
 ## 🔧 Konfiguration
@@ -438,7 +438,7 @@ domain-agnostic-software:
 
 ```bash
 # Repository aktualisieren
-cd /opt/cc24-hub
+cd /opt/forensic-pathways
 sudo git pull
 
 # Dependencies aktualisieren
@@ -448,7 +448,7 @@ sudo npm install
 sudo npm run build
 
 # Service neustarten
-sudo systemctl restart cc24-hub
+sudo systemctl restart forensic-pathways
 ```
 
 ## 💾 Backup
@@ -456,10 +456,10 @@ sudo systemctl restart cc24-hub
 Wichtige Dateien für Backup:
 
 ```bash
-/opt/cc24-hub/src/data/tools.yaml
+/opt/forensic-pathways/src/data/tools.yaml
-/opt/cc24-hub/.env
+/opt/forensic-pathways/.env
-/etc/nginx/sites-available/cc24-hub
+/etc/nginx/sites-available/forensic-pathways
-/etc/systemd/system/cc24-hub.service
+/etc/systemd/system/forensic-pathways.service
 ```
 
 ## 🤝 Beiträge
@@ -475,7 +475,7 @@ Contributions sind willkommen! Bitte:
 
 Bei Problemen oder Fragen:
 
-- **Issues:** [Repository Issues](https://git.cc24.dev/mstoeck3/cc24-hub/issues)
+- **Issues:** [Repository Issues](https://git.cc24.dev/mstoeck3/forensic-pathways/issues)
 - **Dokumentation:** Siehe `/knowledgebase` auf der Website
 
 ## 📄 Lizenz

context.md

@@ -268,7 +268,7 @@ This architecture emphasizes maintainability, user experience, and extensibility
 2. **Add selectively**: Include 1-3 secondary files based on the specific development task
 3. **Reference others**: Mention other relevant files by name/purpose without including full content
 
-user01@altiera /v/h/u/P/cc24-hub (main)> tree src
+user01@altiera /v/h/u/P/forensic-pathways (main)> tree src
 src
 ├── components
 │   ├── AIQueryInterface.astro

src/components/AIQueryInterface.astro

@@ -444,39 +444,46 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   };
   
-  // Smart Prompting Input Handling
+  // Smart Prompting Input Handling - Fixed Race Conditions
   aiInput.addEventListener('input', () => {
     console.log('[DEBUG] Input event triggered, length:', aiInput.value.trim().length);
     const inputLength = aiInput.value.trim().length;
     
-    // Clear existing timeout
+    // Clear ALL existing timeouts and abort controllers
     clearTimeout(enhancementTimeout);
-    
-    // Cancel any pending enhancement call
     if (enhancementAbortController) {
       enhancementAbortController.abort();
+      enhancementAbortController = null;
     }
     
-    // Hide suggestions if input is too short
+    // Hide suggestions immediately if input is too short
     if (inputLength < 40) {
       showPromptingStatus('hidden');
       return;
     }
     
-    // Show analyzing state after 1 second
+    // Single consolidated timeout for all smart prompting logic
+    enhancementTimeout = setTimeout(() => {
+      const currentLength = aiInput.value.trim().length;
+      
+      // Double-check length hasn't changed during timeout
+      if (currentLength < 40) {
+        showPromptingStatus('hidden');
+        return;
+      }
+      
+      // Show analyzing state first
+      if (currentLength >= 50) {
+        showPromptingStatus('analyzing');
+        
+        // Trigger enhancement after showing analyzing state
         setTimeout(() => {
           if (aiInput.value.trim().length >= 50) {
-        showPromptingStatus('analyzing');
-      }
-    }, 1000);
-    
-    // Trigger AI enhancement after 1.5 seconds
-    enhancementTimeout = setTimeout(() => {
-      console.log('[DEBUG] Enhancement timeout fired, calling triggerSmartPrompting');
-      if (aiInput.value.trim().length >= 40) {
             triggerSmartPrompting();
           }
-    }, 1500);
+        }, 500);
+      }
+    }, 1000); // Single timeout instead of multiple
   });
 
   aiInput.addEventListener('input', updateCharacterCount);

src/components/Footer.astro

@@ -11,7 +11,7 @@
         </p>
       </div>
       <div style="display: flex; gap: 2rem; align-items: center;">
-        <a href="https://git.cc24.dev/mstoeck3/cc24-hub" target="_blank" rel="noopener noreferrer">
+        <a href="https://git.cc24.dev/mstoeck3/forensic-pathways" target="_blank" rel="noopener noreferrer">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
           </svg>

src/components/TargetedScenarios.astro

@@ -0,0 +1,181 @@
+---
+import { getToolsData } from '../utils/dataService.js';
+
+const data = await getToolsData();
+const scenarios = data.scenarios || [];
+
+// Configuration
+const maxDisplayed = 9;
+const displayedScenarios = scenarios.slice(0, maxDisplayed);
+---
+
+<section id="targeted-section" class="targeted-section">
+  <div class="targeted-header">
+    <h3>Gezielte Tool-Suche</h3>
+    <p class="targeted-subtitle">
+      Finden Sie schnell das passende Werkzeug für Ihre spezifische Anforderung
+    </p>
+  </div>
+
+  <div class="search-interface">
+    <div class="search-box">
+      <div class="search-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="8"/>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+      </div>
+      <input 
+        type="text" 
+        class="targeted-search-input" 
+        placeholder="z.B. 'Windows Registry analysieren' oder 'PCAP-Dateien auswerten'..."
+        id="targeted-search-input"
+      />
+    </div>
+
+    {scenarios.length > 0 && (
+      <div class="search-suggestions" id="scenario-suggestions">
+        {displayedScenarios.map((scenario) => (
+          <div 
+            class="suggestion-chip" 
+            data-scenario-id={scenario.id}
+            onclick={`applyScenarioSearch('${scenario.id}')`}
+          >
+            <span class="scenario-emoji">{scenario.icon}</span>
+            <span class="scenario-text">{scenario.friendly_name}</span>
+          </div>
+        ))}
+      </div>
+    )}
+
+    {scenarios.length > maxDisplayed && (
+      <div class="more-scenarios">
+        <button class="btn-more-scenarios" onclick="toggleAllScenarios()" id="more-scenarios-btn">
+          + {scenarios.length - maxDisplayed} weitere Szenarien
+        </button>
+      </div>
+    )}
+  </div>
+
+  <div class="targeted-tip">
+    <p>
+      <strong>Tipp:</strong> Die Szenarien durchsuchen automatisch nach passenden Tags und Beschreibungen.
+      Für KI-gestützte Empfehlungen nutzen Sie den entsprechenden Modus.
+    </p>
+  </div>
+</section>
+
+<script define:vars={{ allScenarios: scenarios, maxDisplay: maxDisplayed }}>
+  let showingAllScenarios = false;
+
+
+  window.applyScenarioSearch = function(scenarioId) {
+    console.log(`Applying scenario search: ${scenarioId}`);
+    
+    const clickedChip = document.querySelector(`[data-scenario-id="${scenarioId}"]`);
+    const mainSearchInput = document.getElementById('search-input');
+    
+    if (!mainSearchInput) return;
+    
+    // Check if this scenario is already active (allow deselection)
+    if (clickedChip && clickedChip.classList.contains('active')) {
+      // Deselect: clear search and remove active state
+      mainSearchInput.value = '';
+      document.querySelectorAll('.suggestion-chip').forEach(chip => {
+        chip.classList.remove('active');
+      });
+      
+      // Clear the targeted search input too
+      const targetedInput = document.getElementById('targeted-search-input');
+      if (targetedInput) {
+        targetedInput.value = '';
+      }
+      
+      // Trigger search to show all results
+      const inputEvent = new Event('input', { bubbles: true });
+      mainSearchInput.dispatchEvent(inputEvent);
+      
+      return;
+    }
+    
+    // Apply new search
+    mainSearchInput.value = scenarioId;
+    
+    // Trigger existing search functionality
+    const inputEvent = new Event('input', { bubbles: true });
+    mainSearchInput.dispatchEvent(inputEvent);
+    
+    // Switch to grid view
+    const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
+    if (gridToggle && !gridToggle.classList.contains('active')) {
+      gridToggle.click();
+    }
+    
+    // Visual feedback
+    document.querySelectorAll('.suggestion-chip').forEach(chip => {
+      chip.classList.remove('active');
+    });
+    if (clickedChip) {
+      clickedChip.classList.add('active');
+    }
+    
+    // Scroll to results with better positioning
+    window.scrollToElementById('tools-grid');
+  };
+
+  // Toggle showing all scenarios
+  window.toggleAllScenarios = function() {
+    const suggestionsContainer = document.getElementById('scenario-suggestions');
+    const moreBtn = document.getElementById('more-scenarios-btn');
+    
+    if (!showingAllScenarios) {
+      // Show additional scenarios
+      const additionalScenarios = allScenarios.slice(maxDisplay);
+      additionalScenarios.forEach(scenario => {
+        const chip = document.createElement('div');
+        chip.className = 'suggestion-chip additional-scenario';
+        chip.setAttribute('data-scenario-id', scenario.id);
+        chip.onclick = () => applyScenarioSearch(scenario.id);
+        chip.innerHTML = `
+          <span class="scenario-emoji">${scenario.icon}</span>
+          <span class="scenario-text">${scenario.friendly_name}</span>
+        `;
+        suggestionsContainer.appendChild(chip);
+      });
+      
+      moreBtn.textContent = 'Weniger anzeigen';
+      showingAllScenarios = true;
+    } else {
+      // Hide additional scenarios
+      document.querySelectorAll('.additional-scenario').forEach(chip => chip.remove());
+      moreBtn.textContent = `+ ${allScenarios.length - maxDisplay} weitere Szenarien`;
+      showingAllScenarios = false;
+    }
+  };
+
+  // Handle targeted search input
+  document.addEventListener('DOMContentLoaded', () => {
+    const targetedInput = document.getElementById('targeted-search-input');
+    if (targetedInput) {
+      targetedInput.addEventListener('input', (e) => {
+        const mainSearchInput = document.getElementById('search-input');
+        if (mainSearchInput && e.target.value.length > 2) {
+          mainSearchInput.value = e.target.value;
+          const inputEvent = new Event('input', { bubbles: true });
+          mainSearchInput.dispatchEvent(inputEvent);
+        }
+      });
+      
+      targetedInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
+            if (gridToggle) {
+            gridToggle.click();
+            setTimeout(() => window.scrollToElementById('tools-grid'), 200);
+            }
+        }
+      });
+    }
+  });
+</script>

src/components/ToolFilters.astro

@@ -117,15 +117,24 @@ const sortedTags = Object.entries(tagFrequency)
   window.toolsData = toolsData;
   
   document.addEventListener('DOMContentLoaded', () => {
-    const searchInput = document.getElementById('search-input');
+    // Cache DOM elements once
-    const domainSelect = document.getElementById('domain-select');
+    const elements = {
-    const phaseButtons = document.querySelectorAll('.phase-button');
+      searchInput: document.getElementById('search-input'),
-    const proprietaryCheckbox = document.getElementById('include-proprietary');
+      domainSelect: document.getElementById('domain-select'),
-    const tagCloudItems = document.querySelectorAll('.tag-cloud-item');
+      phaseButtons: document.querySelectorAll('.phase-button'),
-    const tagCloud = document.getElementById('tag-cloud');
+      proprietaryCheckbox: document.getElementById('include-proprietary'),
-    const tagCloudToggle = document.getElementById('tag-cloud-toggle');
+      tagCloudItems: document.querySelectorAll('.tag-cloud-item'),
-    const viewToggles = document.querySelectorAll('.view-toggle');
+      tagCloud: document.getElementById('tag-cloud'),
-    const aiViewToggle = document.getElementById('ai-view-toggle');
+      tagCloudToggle: document.getElementById('tag-cloud-toggle'),
+      viewToggles: document.querySelectorAll('.view-toggle'),
+      aiViewToggle: document.getElementById('ai-view-toggle')
+    };
+    
+    // Verify critical elements exist
+    if (!elements.searchInput || !elements.domainSelect || !elements.proprietaryCheckbox) {
+      console.error('Critical filter elements not found');
+      return;
+    }
     
     let selectedTags = new Set();
     let selectedPhase = '';
@@ -133,7 +142,7 @@ const sortedTags = Object.entries(tagFrequency)
     
     function initTagCloud() {
       const visibleCount = 22;
-      tagCloudItems.forEach((item, index) => {
+      elements.tagCloudItems.forEach((item, index) => {
         if (index >= visibleCount) {
           item.style.display = 'none';
         }
@@ -145,22 +154,22 @@ const sortedTags = Object.entries(tagFrequency)
       const visibleCount = 22;
       
       if (isTagCloudExpanded) {
-        tagCloud.classList.add('expanded');
+        elements.tagCloud.classList.add('expanded');
-        tagCloudToggle.textContent = 'Weniger zeigen';
+        elements.tagCloudToggle.textContent = 'Weniger zeigen';
-        tagCloudToggle.setAttribute('data-expanded', 'true');
+        elements.tagCloudToggle.setAttribute('data-expanded', 'true');
         
-        tagCloudItems.forEach(item => {
+        elements.tagCloudItems.forEach(item => {
           if (!item.classList.contains('hidden')) {
             item.style.display = 'inline-flex';
           }
         });
       } else {
-        tagCloud.classList.remove('expanded');
+        elements.tagCloud.classList.remove('expanded');
-        tagCloudToggle.textContent = 'Mehr zeigen';
+        elements.tagCloudToggle.textContent = 'Mehr zeigen';
-        tagCloudToggle.setAttribute('data-expanded', 'false');
+        elements.tagCloudToggle.setAttribute('data-expanded', 'false');
         
         let visibleIndex = 0;
-        tagCloudItems.forEach(item => {
+        elements.tagCloudItems.forEach(item => {
           if (!item.classList.contains('hidden')) {
             if (visibleIndex < visibleCount) {
               item.style.display = 'inline-flex';
@@ -174,11 +183,11 @@ const sortedTags = Object.entries(tagFrequency)
     }
   
     function filterTagCloud() {
-      const searchTerm = searchInput.value.toLowerCase();
+      const searchTerm = elements.searchInput.value.toLowerCase();
       let visibleCount = 0;
       const maxVisibleWhenCollapsed = 22;
       
-      tagCloudItems.forEach(item => {
+      elements.tagCloudItems.forEach(item => {
         const tagName = item.getAttribute('data-tag').toLowerCase();
         const shouldShow = tagName.includes(searchTerm);
         
@@ -196,10 +205,10 @@ const sortedTags = Object.entries(tagFrequency)
         }
       });
       
-      const hasHiddenTags = Array.from(tagCloudItems).some(item => 
+      const hasHiddenTags = Array.from(elements.tagCloudItems).some(item => 
         !item.classList.contains('hidden') && item.style.display === 'none'
       );
-      tagCloudToggle.style.display = hasHiddenTags ? 'block' : 'none';
+      elements.tagCloudToggle.style.display = hasHiddenTags ? 'block' : 'none';
     }
     
     function isToolHosted(tool) {
@@ -224,7 +233,7 @@ const sortedTags = Object.entries(tagFrequency)
         el.classList.remove('highlight-row', 'highlight-column');
       });
       
-      const selectedDomain = domainSelect.value;
+      const selectedDomain = elements.domainSelect.value;
       
       if (selectedDomain) {
         const domainRow = matrixTable.querySelector(`tr[data-domain="${selectedDomain}"]`);
@@ -252,9 +261,9 @@ const sortedTags = Object.entries(tagFrequency)
     }
     
     function filterTools() {
-      const searchTerm = searchInput.value.toLowerCase();
+      const searchTerm = elements.searchInput.value.toLowerCase();
-      const selectedDomain = domainSelect.value;
+      const selectedDomain = elements.domainSelect.value;
-      const includeProprietary = proprietaryCheckbox.checked;
+      const includeProprietary = elements.proprietaryCheckbox.checked;
       
       const filtered = window.toolsData.filter(tool => {
         const domains = tool.domains || [];
@@ -314,7 +323,7 @@ const sortedTags = Object.entries(tagFrequency)
         selectedPhase = '';
         button.classList.remove('active');
       } else {
-        phaseButtons.forEach(btn => btn.classList.remove('active'));
+        elements.phaseButtons.forEach(btn => btn.classList.remove('active'));
         selectedPhase = phase;
         button.classList.add('active');
       }
@@ -323,7 +332,7 @@ const sortedTags = Object.entries(tagFrequency)
     }
     
     function handleViewToggle(view) {
-      viewToggles.forEach(btn => {
+      elements.viewToggles.forEach(btn => {
         btn.classList.toggle('active', btn.getAttribute('data-view') === view);
       });
       
@@ -339,37 +348,38 @@ const sortedTags = Object.entries(tagFrequency)
     
     function clearTagFilters() {
       selectedTags.clear();
-      tagCloudItems.forEach(item => item.classList.remove('active'));
+      elements.tagCloudItems.forEach(item => item.classList.remove('active'));
       filterTools();
     }
     
     function clearAllFilters() {
-      searchInput.value = '';
+      elements.searchInput.value = '';
-      domainSelect.value = '';
+      elements.domainSelect.value = '';
       selectedPhase = '';
-      phaseButtons.forEach(btn => btn.classList.remove('active'));
+      elements.phaseButtons.forEach(btn => btn.classList.remove('active'));
       clearTagFilters();
       filterTagCloud();
     }
     
-    searchInput.addEventListener('input', () => {
+    // Event listeners using cached elements
+    elements.searchInput.addEventListener('input', () => {
       filterTagCloud();
       filterTools();
     });
     
-    domainSelect.addEventListener('change', filterTools);
+    elements.domainSelect.addEventListener('change', filterTools);
-    proprietaryCheckbox.addEventListener('change', filterTools);
+    elements.proprietaryCheckbox.addEventListener('change', filterTools);
-    tagCloudToggle.addEventListener('click', toggleTagCloud);
+    elements.tagCloudToggle.addEventListener('click', toggleTagCloud);
     
-    tagCloudItems.forEach(item => {
+    elements.tagCloudItems.forEach(item => {
       item.addEventListener('click', () => handleTagClick(item));
     });
     
-    phaseButtons.forEach(btn => {
+    elements.phaseButtons.forEach(btn => {
       btn.addEventListener('click', () => handlePhaseClick(btn));
     });
     
-    viewToggles.forEach(btn => {
+    elements.viewToggles.forEach(btn => {
       btn.addEventListener('click', () => handleViewToggle(btn.getAttribute('data-view')));
     });
     

src/components/ToolMatrix.astro

@@ -672,6 +672,13 @@ domains.forEach((domain: any) => {
     const primaryModal = document.getElementById('tool-details-primary');
     const secondaryModal = document.getElementById('tool-details-secondary');
     
+    // Debounce rapid calls
+    if (window.modalHideInProgress) return;
+    window.modalHideInProgress = true;
+    
+    setTimeout(() => {
+      window.modalHideInProgress = false;
+    }, 100);
 
     if (modalType === 'both' || modalType === 'all') {
       if (primaryModal) {
@@ -702,13 +709,19 @@ domains.forEach((domain: any) => {
       if (contributeButtonSecondary) contributeButtonSecondary.style.display = 'none';
     }
     
+    // Consolidated state checking with safety checks
     const primaryActive = primaryModal && primaryModal.classList.contains('active');
     const secondaryActive = secondaryModal && secondaryModal.classList.contains('active');
     
+    // Update overlay and body classes atomically
     if (!primaryActive && !secondaryActive) {
       if (overlay) overlay.classList.remove('active');
       document.body.classList.remove('modals-side-by-side');
-    } else if (primaryActive !== secondaryActive) {
+    } else if (primaryActive && secondaryActive) {
+      // Both active - ensure side-by-side class
+      document.body.classList.add('modals-side-by-side');
+    } else {
+      // Only one active - remove side-by-side class
       document.body.classList.remove('modals-side-by-side');
     }
   };

src/data/tools.yaml

@@ -2153,3 +2153,34 @@ domain-agnostic-software:
   - id: specific-os
     name: Betriebssysteme
     description: Operating Systems which focus on forensics
+scenarios:
+  - id: registry
+    icon: 🗃️
+    friendly_name: "Registry-Analyse"
+  - id: memory-forensics
+    icon: 🧠
+    friendly_name: "Memory-Forensik"
+  - id: network-traffic
+    icon: 🌐
+    friendly_name: "Netzwerk-Traffic"
+  - id: mobile-forensik
+    icon: 📱
+    friendly_name: "Mobile Geräte"
+  - id: malware-analysis
+    icon: 🦠
+    friendly_name: "Malware-Analyse"
+  - id: timeline-analysis
+    icon: ⏰
+    friendly_name: "Timeline-Erstellung"
+  - id: file-recovery
+    icon: 💾
+    friendly_name: "Datei-Wiederherstellung"
+  - id: browser-forensik
+    icon: 🌍
+    friendly_name: "Browser-Forensik"
+  - id: email-forensik
+    icon: 📧
+    friendly_name: "E-Mail-Forensik"
+  - id: log-analysis
+    icon: 📊
+    friendly_name: "Log-Analyse"

src/data/tools.yaml.example

@@ -204,3 +204,10 @@ domain-agnostic-software:
   - id: specific-os
     name: Betriebssysteme
     description: Operating Systems which focus on forensics
+scenarios:
+  - id: registry
+    icon: 🗃️
+    friendly_name: "Registry-Analyse"
+  - id: memory-forensics
+    icon: 🧠
+    friendly_name: "Memory-Forensik"

src/env.d.ts

@@ -22,10 +22,25 @@ declare global {
     findToolByIdentifier: (tools: any[], identifier: string) => any | undefined;
     isToolHosted: (tool: any) => boolean;
 
-    checkClientAuth: () => Promise<{authenticated: boolean; authRequired: boolean; expires?: string}>;
+    checkClientAuth: (context?: string) => Promise<{authenticated: boolean; authRequired: boolean; expires?: string}>;
-    requireClientAuth: (callback?: () => void, returnUrl?: string) => Promise<boolean>;
+    requireClientAuth: (callback?: () => void, returnUrl?: string, context?: string) => Promise<boolean>;
-    showIfAuthenticated: (selector: string) => Promise<void>;
+    showIfAuthenticated: (selector: string, context?: string) => Promise<void>;
     setupAuthButtons: (selector?: string) => void;
+
+    // Consolidated scroll utilities
+    scrollToElement: (element: Element | null, options?: ScrollIntoViewOptions) => void;
+    scrollToElementById: (elementId: string, options?: ScrollIntoViewOptions) => void;
+    scrollToElementBySelector: (selector: string, options?: ScrollIntoViewOptions) => void;
+
+    // Additional global functions that might be called
+    applyScenarioSearch?: (scenarioId: string) => void;
+    selectPhase?: (phase: string) => void;
+    selectApproach?: (approach: string) => void;
+    navigateToGrid?: (toolName: string) => void;
+    navigateToMatrix?: (toolName: string) => void;
+    toggleAllScenarios?: () => void;
+    showShareDialog?: (shareButton: Element) => void;
+    modalHideInProgress?: boolean;
   }
 }
 

src/layouts/BaseLayout.astro

@@ -73,6 +73,35 @@ const { title, description = 'ForensicPathways - A comprehensive directory of di
         getStoredTheme
       };
 
+      // Consolidated scrolling utility
+      (window as any).scrollToElement = function(element, options = {}) {
+        if (!element) return;
+        
+        // Calculate target position manually to avoid double-scroll
+        setTimeout(() => {
+          const headerHeight = document.querySelector('nav')?.offsetHeight || 80;
+          const elementRect = element.getBoundingClientRect();
+          const absoluteElementTop = elementRect.top + window.pageYOffset;
+          const targetPosition = absoluteElementTop - headerHeight - 20; // Adjust this 20 as needed
+          
+          window.scrollTo({
+            top: targetPosition,
+            behavior: 'smooth'
+          });
+        }, 100);
+      };
+
+      // Convenience functions for common scroll targets
+      (window as any).scrollToElementById = function(elementId, options = {}) {
+        const element = document.getElementById(elementId);
+        (window as any).scrollToElement(element, options);
+      };
+
+      (window as any).scrollToElementBySelector = function(selector, options = {}) {
+        const element = document.querySelector(selector);
+        (window as any).scrollToElement(element, options);
+      };
+
       function createToolSlug(toolName) {
         if (!toolName || typeof toolName !== 'string') {
           console.warn('[toolHelpers] Invalid toolName provided to createToolSlug:', toolName);

src/pages/about.astro

@@ -205,7 +205,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
             Möchtest du direkt am Sourcecode mitarbeiten? Schau dir die Anleitung unter
             <a href="/contribute#code">/contribute</a> an oder besuche unser Repository:
           </p>
-          <a href="https://git.cc24.dev/mstoeck3/cc24-hub" target="_blank" rel="noopener noreferrer"
+          <a href="https://git.cc24.dev/mstoeck3/forensic-pathways" target="_blank" rel="noopener noreferrer"
             style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-accent); font-weight: 500;">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
               <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />

src/pages/contribute/index.astro

@@ -166,7 +166,7 @@ const { authenticated, userEmail, userId } = authResult;
         </div>
       </div>
       <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <a href="https://git.cc24.dev/mstoeck3/cc24-hub/issues/new" target="_blank" rel="noopener noreferrer" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);">
+        <a href="https://git.cc24.dev/mstoeck3/forensic-pathways/issues/new" target="_blank" rel="noopener noreferrer" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
             <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
             <polyline points="15 3 21 3 21 9"/>

src/pages/index.astro

@@ -4,36 +4,69 @@ import ToolCard from '../components/ToolCard.astro';
 import ToolFilters from '../components/ToolFilters.astro';
 import ToolMatrix from '../components/ToolMatrix.astro';
 import AIQueryInterface from '../components/AIQueryInterface.astro';
+import TargetedScenarios from '../components/TargetedScenarios.astro';
 import { getToolsData } from '../utils/dataService.js';
 
 const data = await getToolsData();
 const tools = data.tools;
+const phases = data.phases;
 ---
 
 <BaseLayout title="~/">
-<section style="padding: 2rem 0 1rem; border-bottom: 1px solid var(--color-border);">
+<section class="approach-hero">
-  <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
+  <div class="approach-content">
-    <h1 style="margin-bottom: 1rem; font-size: 1.5rem; color: var(--color-primary);">ForensicPathways</h1>
+    <h1>ForensicPathways</h1>
-    
+    <p class="hero-tagline">Das richtige Werkzeug zur richtigen Zeit</p>
-    <p style="font-size: 1.25rem; margin-bottom: 1.125rem; color: var(--color-text);">
+    <p class="hero-subtitle">
-      <strong>Das richtige Werkzeug zur richtigen Zeit</strong> – in der digitalen Forensik entscheidet oft die Wahl der passenden Methode oder Software über Erfolg oder Misserfolg einer Untersuchung.
+      Systematische digitale Forensik nach bewährter NIST SP 800-86 Methodik.<br>
+      Wählen Sie Ihren Ansatz für die Werkzeugauswahl:
     </p>
 
-    <p class="text-muted" style="font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.7;">
+    <div class="approach-selector">
-      Unser kuratiertes Verzeichnis bietet euch eine strukturierte Übersicht über bewährte Methoden und Tools, 
+      <div class="approach-card methodology" onclick="selectApproach('methodology')">
-      kategorisiert nach forensischen Domänen und Untersuchungsphasen nach Kent, Chevalier, Grance & Dang.
+        <div class="approach-header">
+          <div class="approach-icon">🔍</div>
+          <h3>Vollständige Ermittlung</h3>
+        </div>
+        <p class="approach-description">
+          Systematisches Vorgehen durch alle vier NIST-Phasen einer forensischen Untersuchung
         </p>
+        <ul class="approach-features">
+          <li>Methodische Schritt-für-Schritt Anleitung</li>
+          <li>Vollständige Dokumentationskette</li>
+          <li>Rechtssichere Beweisführung</li>
+          <li>Ideal für komplexe Fälle</li>
+        </ul>
+      </div>
 
-    <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 2rem; line-height: 1.6;">
+      <div class="approach-card targeted" onclick="selectApproach('targeted')">
-      <span style="color: var(--color-primary); font-weight: 500;">Info:</span> 
+        <div class="approach-header">
+          <div class="approach-icon">🎯</div>
+          <h3>Gezieltes Problem lösen</h3>
+        </div>
+        <p class="approach-description">
+          Direkter Zugang zu spezifischen Tools und Methoden für bekannte Anforderungen
+        </p>
+        <ul class="approach-features">
+          <li>Schnelle Tool-Suche</li>
+          <li>Spezifische Problemlösungen</li>
+          <li>Erfahrene Anwender</li>
+          <li>Effizient für Einzelaufgaben</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="approach-actions">
+      <p class="approach-info">
+        <span class="info-icon">ℹ️</span>
         Die lila gekennzeichneten Einträge sind über das Single-Sign-On der CC24-Cloud direkt zugänglich. 
         Teilnehmer der Seminargruppe CC24-w1 können die gehostete Infrastruktur nutzen.
-      Sollten spezielle Berechtigungen für den Zugriff erforderlich sein oder etwas nicht funktionieren, <a href="/about#support">kontaktiert mich</a>. 
+        <a href="/about#support">Kontakt bei Problemen</a>
       </p>
       
-    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+      <div class="quick-actions">
-      <a href="/about" class="btn btn-primary" style="padding: 0.75rem 1.5rem;">
+        <a href="/about" 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;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="10"></circle>
             <path d="M12 16v-4"></path>
             <path d="M12 8h.01"></path>
@@ -41,16 +74,16 @@ const tools = data.tools;
           Infos zu SSO & Zugang
         </a>
         
-      <button id="ai-query-btn" class="btn btn-accent" style="padding: 0.75rem 1.5rem; background-color: var(--color-accent); color: white;">
+        <button id="ai-query-btn" class="btn btn-accent">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <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-Beratung
         </button>
         
-      <a href="/contribute" class="btn" style="padding: 0.75rem 1.5rem; background-color: var(--color-warning); color: white; border-color: var(--color-warning);" data-contribute-button="new">
+        <a href="/contribute" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);" data-contribute-button="new">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
             <circle cx="8.5" cy="7" r="4"/>
             <line x1="20" y1="8" x2="20" y2="14"/>
@@ -59,19 +92,64 @@ const tools = data.tools;
           Beitragen
         </a>
         
-      <a href="#filters-section" class="btn btn-secondary" style="padding: 0.75rem 1.5rem;">
+        <button onclick="window.scrollToElementById('filters-section')" 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;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
             <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
             <line x1="12" y1="22.08" x2="12" y2="12"></line>
           </svg>
-        Entdecken
+          Direkt durchsuchen
         </a>
       </div>
     </div>
+  </div>
 </section>
 
+<!-- NIST Methodology Section -->
+<section id="methodology-section" class="methodology-section">
+  <div class="methodology-header">
+    <h3>NIST SP 800-86 Forensische Methodik</h3>
+    <p class="methodology-subtitle">
+      Wählen Sie eine Phase aus dem bewährten Vier-Phasen-Modell
+    </p>
+  </div>
+
+  <div class="nist-workflow">
+    {phases.map((phase: any, index: number) => {
+      const phaseTools = tools.filter((tool: any) => 
+        tool.phases && tool.phases.includes(phase.id)
+      );
+      
+      return (
+        <div class={`phase-card phase-${phase.id}`} onclick={`selectPhase('${phase.id}')`}>
+          <div class="phase-number">{index + 1}</div>
+          <div class="phase-title">{phase.name}</div>
+          <p class="phase-description">
+            {phase.description}
+          </p>
+          <span class="tool-count">{phaseTools.length} Tools</span>
+        </div>
+      );
+    })}
+  </div>
+
+  <div class="methodology-tip">
+    <p>
+      <strong>Tipp:</strong> Für komplexe Ermittlungen empfiehlt sich das sequenzielle Durchlaufen aller Phasen.
+      Jede Phase baut methodisch auf der vorherigen auf.
+    </p>
+  </div>
+</section>
+
+<TargetedScenarios />
+
   <section id="filters-section" style="padding: 2rem 0;">
+    <div style="text-align: center; margin-bottom: 2rem;">
+      <h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
+      <p style="color: var(--color-text-secondary); margin: 0;">
+        Nutzen Sie die erweiterten Filter und Kategorien für eine detaillierte Suche
+      </p>
+    </div>
     <ToolFilters data={data} />
   </section>
 
@@ -92,9 +170,71 @@ const tools = data.tools;
   <ToolMatrix data={data} />
 </BaseLayout>
 
-<script define:vars={{ toolsData: data.tools }}>
+<script define:vars={{ toolsData: data.tools, phases: data.phases }}>
   window.toolsData = toolsData;
   
+  // Approach selection functionality
+  window.selectApproach = function(approach) {
+    console.log(`Selected approach: ${approach}`);
+    
+    // Hide any existing results
+    const aiResults = document.getElementById('ai-results');
+    if (aiResults) aiResults.style.display = 'none';
+    
+    // Visual feedback for selection
+    document.querySelectorAll('.approach-card').forEach(card => {
+      card.classList.remove('selected');
+    });
+    document.querySelector(`.approach-card.${approach}`).classList.add('selected');
+    
+    if (approach === 'methodology') {
+      // Show NIST methodology section
+      const methodologySection = document.getElementById('methodology-section');
+      if (methodologySection) {
+        methodologySection.classList.add('active');
+        window.scrollToElementById('methodology-section');
+      }
+    } else if (approach === 'targeted') {
+      // Show targeted scenarios section
+      const targetedSection = document.getElementById('targeted-section');
+      if (targetedSection) {
+        targetedSection.classList.add('active');
+        window.scrollToElementById('targeted-section');
+      }
+    }
+  };
+
+  // Phase selection function (integrates with existing ToolFilters)
+  window.selectPhase = function(phase) {
+    console.log(`Selected NIST phase: ${phase}`);
+    
+    // Remove active class from all phase cards
+    document.querySelectorAll('.phase-card').forEach(card => {
+      card.classList.remove('active');
+    });
+    
+    // Add active class to selected phase card
+    const selectedCard = document.querySelector(`.phase-card.phase-${phase}`);
+    if (selectedCard) {
+      selectedCard.classList.add('active');
+    }
+    
+    // Use existing phase filter functionality
+    const existingPhaseButton = document.querySelector(`[data-phase="${phase}"]`);
+    if (existingPhaseButton && !existingPhaseButton.classList.contains('active')) {
+      existingPhaseButton.click();
+    }
+    
+    // Switch to grid view to show results
+    const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
+    if (gridToggle && !gridToggle.classList.contains('active')) {
+      gridToggle.click();
+    }
+    
+    // Scroll to results using consolidated utility
+    window.scrollToElementById('tools-grid');
+  };
+
   document.addEventListener('DOMContentLoaded', () => {
     const toolsContainer = document.getElementById('tools-container');
     const toolsGrid = document.getElementById('tools-grid');
@@ -222,7 +362,7 @@ const tools = data.tools;
           
           if (targetCard) {
             console.log('Found target card, scrolling...');
-            targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            window.scrollToElement(targetCard, { block: 'center' });
             targetCard.style.animation = 'highlight-flash 2s ease-out';
             
             setTimeout(() => {
@@ -232,6 +372,8 @@ const tools = data.tools;
             }, 2000);
           } else {
             console.warn('Tool card not found in grid:', toolName);
+            // Fallback to tools grid
+            window.scrollToElementById('tools-grid');
           }
         }, 300);
       }, 200);
@@ -265,9 +407,11 @@ const tools = data.tools;
         
         if (firstMatch) {
           console.log(`Found ${matchCount} occurrences of tool, highlighting all and scrolling to first`);
-          firstMatch.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          window.scrollToElement(firstMatch);
         } else {
           console.warn('Tool chip not found in matrix:', toolName);
+          // Fallback to matrix container
+          window.scrollToElementById('matrix-container');
         }
       }, 500);
     };

src/pages/knowledgebase.astro

@@ -54,7 +54,7 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
       
       <div class="flex gap-4 justify-center flex-wrap">
         <ContributionButton type="write" variant="primary" text="Artikel schreiben" style="padding: 0.75rem 1.5rem;" />
-        <a href="#kb-entries" class="btn btn-secondary" style="padding: 0.75rem 1.5rem;">
+        <button onclick="window.scrollToElementById('kb-entries')" class="btn btn-secondary" style="padding: 0.75rem 1.5rem;">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
             <circle cx="11" cy="11" r="8"/>
             <line x1="21" y1="21" x2="16.65" y2="16.65"/>

src/styles/global.css

@@ -954,6 +954,15 @@ input[type="checkbox"] {
   margin-bottom: 0.5rem;
 }
 
+.tool-count {
+  background: var(--color-bg-tertiary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
 /* AI Interface - Consolidated */
 .ai-interface {
   padding: 2rem 0;
@@ -1071,26 +1080,31 @@ input[type="checkbox"] {
 }
 
 .phase-number {
-  background-color: var(--color-primary);
+  width: 2rem;
+  height: 2rem;
+  background: var(--phase-color);
   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;
+  margin: 0 auto 0.75rem;
-  flex-shrink: 0;
 }
 
 .phase-info { flex: 1; min-width: 0; }
 
 .phase-title {
-  margin: 0 0 1rem;
-  color: var(--color-text);
-  font-size: 1.25rem;
   font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--color-text);
+}
+
+.phase-description {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
 }
 
 .phase-tools {
@@ -1099,6 +1113,38 @@ input[type="checkbox"] {
   gap: 1rem;
 }
 
+.phase-card {
+  background: var(--color-bg-secondary);
+  border: 2px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-align: center;
+  position: relative;
+}
+
+.phase-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--phase-color);
+}
+
+.phase-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--phase-color);
+  box-shadow: var(--shadow-md);
+}
+
+.phase-card.active {
+  border-color: var(--phase-color);
+  background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--phase-color) 8%, transparent) 100%);
+}
+
 .workflow-arrow {
   display: flex;
   justify-content: center;
@@ -1833,6 +1879,75 @@ footer {
     width: 100%;
     min-height: 100px;
   }
+  .approach-hero { 
+    padding: 2rem 1rem; 
+    margin: 1rem 0;
+  }
+  
+  .approach-content h1 { 
+    font-size: 2rem; 
+  }
+  
+  .hero-tagline {
+    font-size: 1.125rem;
+  }
+  
+  .approach-selector { 
+    grid-template-columns: 1fr; 
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .approach-card { 
+    padding: 1.5rem; 
+  }
+  
+  .approach-header {
+    gap: 0.75rem;
+  }
+  
+  .approach-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+  
+  .approach-card h3 {
+    font-size: 1.25rem;
+  }
+  
+  .quick-actions {
+    gap: 0.75rem;
+  }
+  
+  .quick-actions .btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.8125rem;
+  }
+  .nist-workflow { 
+    grid-template-columns: 1fr 1fr; 
+    gap: 0.75rem;
+  }
+  .search-suggestions {
+    gap: 0.5rem;
+  }
+  
+  .suggestion-chip {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .scenario-emoji {
+    font-size: 1rem;
+  }
+  
+  .targeted-search-input {
+    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
+  }
+  
+  .search-icon {
+    left: 0.875rem;
+  }
 }
 
 @media (width <= 640px) {
@@ -1912,6 +2027,20 @@ footer {
     padding: 0.5rem 1rem;
     flex: 1;
   }
+  .search-suggestions {
+    justify-content: center;
+  }
+  
+  .suggestion-chip {
+    flex: 1;
+    min-width: 0;
+    max-width: calc(50% - 0.25rem);
+    justify-content: center;
+  }
+  
+  .targeted-section {
+    padding: 1.5rem;
+  }
 }
 
 @media (width <= 480px) {
@@ -1997,6 +2126,23 @@ footer {
   .hint-description {
     font-size: 0.625rem;
   }
+  .approach-info {
+    padding: 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .quick-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .quick-actions .btn {
+    width: 100%;
+    max-width: 280px;
+  }
+  .nist-workflow { 
+  grid-template-columns: 1fr; 
+  }
 }
 
 /* Smart Prompting Styles - Simplified */
@@ -2212,6 +2358,80 @@ footer {
   margin-right: 0.5rem;
 }
 
+.suggestion-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 2rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+.suggestion-chip:hover {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.suggestion-chip.active {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+}
+
+.scenario-emoji {
+  font-size: 1.125rem;
+}
+
+.scenario-text {
+  font-weight: 500;
+}
+
+.more-scenarios {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.btn-more-scenarios {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  padding: 0.5rem 1rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  transition: var(--transition-fast);
+}
+
+.btn-more-scenarios:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.targeted-tip {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.targeted-tip p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
 .dismiss-button {
   align-self: flex-end;
   background: none;
@@ -2407,3 +2627,294 @@ footer {
 .analysis-header.scenario { color: var(--color-primary); }
 .analysis-header.approach { color: var(--color-accent); }
 .analysis-header.critical { color: var(--color-warning); }
+
+/* Methodology-First Approach Styles */
+.approach-hero {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border-radius: 1rem;
+  border: 1px solid var(--color-border);
+  padding: 3rem 2rem;
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.approach-content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: var(--color-primary);
+}
+
+.hero-tagline {
+  font-size: 1.25rem;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.hero-subtitle {
+  color: var(--color-text-secondary);
+  margin-bottom: 2rem;
+  line-height: 1.6;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.approach-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  max-width: 900px;
+  margin: 0 auto 2rem;
+}
+
+.approach-card {
+  background: var(--color-bg);
+  border: 2px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+}
+
+.approach-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--approach-color);
+  opacity: 0.7;
+}
+
+.approach-card.methodology { --approach-color: var(--color-primary); }
+.approach-card.targeted { --approach-color: var(--color-accent); }
+
+.approach-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--approach-color);
+}
+
+.approach-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.approach-icon {
+  width: 3rem;
+  height: 3rem;
+  background: var(--approach-color);
+  color: white;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.approach-card h3 {
+  font-size: 1.375rem;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.approach-card.selected {
+  border-color: var(--approach-color);
+  background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--approach-color) 8%, transparent) 100%);
+  box-shadow: var(--shadow-md);
+}
+
+.approach-description {
+  color: var(--color-text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.approach-features {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.approach-features li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.approach-features li::before {
+  content: '✓';
+  color: var(--approach-color);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.approach-actions {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.approach-info {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  text-align: left;
+}
+
+.info-icon {
+  margin-right: 0.5rem;
+  font-size: 1rem;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.quick-actions .btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+}
+
+.methodology-section {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  margin: 2rem 0;
+  display: none;
+}
+
+.methodology-section.active { 
+  display: block; 
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.methodology-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.methodology-header h3 {
+  color: var(--color-primary);
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.methodology-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.methodology-tip {
+  text-align: center;
+  padding: 1.5rem;
+  background: var(--color-bg-secondary);
+  border-radius: 0.5rem;
+}
+
+.methodology-tip p {
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.nist-workflow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.targeted-section {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  margin: 2rem 0;
+  display: none;
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.targeted-section.active { 
+  display: block; 
+}
+
+.targeted-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.targeted-header h3 {
+  color: var(--color-accent);
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.targeted-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.search-interface {
+  max-width: 800px;
+  margin: 0 auto 2rem;
+}
+
+.search-box {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.search-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-secondary);
+  pointer-events: none;
+}
+
+.targeted-search-input {
+  width: 100%;
+  padding: 1rem 1rem 1rem 3rem;
+  border: 2px solid var(--color-border);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  transition: var(--transition-fast);
+}
+
+.targeted-search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px rgb(5 150 105 / 10%);
+}
+
+.search-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  justify-content: center;
+}

src/utils/auth.ts

@@ -9,7 +9,7 @@ config();
 
 const SECRET_KEY = new TextEncoder().encode(
   process.env.AUTH_SECRET || 
-  'cc24-hub-default-secret-key-change-in-production'
+  'forensic-pathways-default-secret-key-change-in-production'
 );
 const SESSION_DURATION = 6 * 60 * 60; // 6 hours in seconds
 

src/utils/dataService.ts

@@ -39,6 +39,11 @@ const ToolsDataSchema = z.object({
     name: z.string(),
     description: z.string().optional()
   })).optional().default([]),
+  scenarios: z.array(z.object({
+    id: z.string(),
+    icon: z.string(),
+    friendly_name: z.string()
+  })).optional().default([]),
 });
 
 interface ToolsData {
@@ -46,11 +51,15 @@ interface ToolsData {
   domains: any[];
   phases: any[];
   'domain-agnostic-software': any[];
+  scenarios: any[];
 }
 
-interface CompressedToolsData extends Omit<ToolsData, 'tools'> {
+interface CompressedToolsData {
   tools: any[];
   concepts: any[];
+  domains: any[];
+  phases: any[];
+  'domain-agnostic-software': any[];
 }
 
 let cachedData: ToolsData | null = null;
@@ -144,6 +153,7 @@ export async function getCompressedToolsDataForAI(): Promise<CompressedToolsData
       domains: data.domains,
       phases: data.phases,
       'domain-agnostic-software': data['domain-agnostic-software']
+      // scenarios intentionally excluded from AI data
     };
   }