src/components/AIQueryInterface.astro

@@ -125,10 +125,39 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
           <a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary);">Datenschutzrichtlinien</a>
         </p>
       </div>
+
+      <div class="ai-restore-section" style="margin-top: 1rem; margin-bottom: 1.5rem; text-align: center;">
+        <div style="display: inline-flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0.5rem;">
+          <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.875rem;">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="17 8 12 3 7 8"/>
+              <line x1="12" y1="3" x2="12" y2="15"/>
+            </svg>
+            Vorherige Analyse wiederherstellen:
+          </div>
+          
+          <label for="upload-previous-analysis" class="btn btn-secondary" style="margin: 0; font-size: 0.875rem; padding: 0.5rem 1rem;">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+              <polyline points="14 2 14 8 20 8"/>
+              <path d="M16 13H8"/>
+              <path d="M16 17H8"/>
+              <path d="M10 9H8"/>
+            </svg>
+            JSON-Datei hochladen
+            <input type="file" id="upload-previous-analysis" accept=".json" style="display: none;" />
+          </label>
+        </div>
+        
+        <div style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary);">
+          Laden Sie eine zuvor heruntergeladene Analyse-Datei, um Ergebnisse und Audit-Trail anzuzeigen
+        </div>
+      </div>
       
       <!-- Submit Button -->
-      <div style="display: flex; justify-content: center; gap: 1rem;">
+      <div style="display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;">
-        <button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
+        <button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem; font-size: 1rem;">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
             <path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
             <path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
@@ -136,7 +165,6 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
           <span id="submit-btn-text">Empfehlungen generieren</span>
         </button>
       </div>
-    </div>
 
     <!-- Loading State -->
     <div id="ai-loading" class="ai-loading hidden">
@@ -345,6 +373,7 @@ class AIQueryInterface {
     console.log('[AI Interface] Initializing...');
     this.initializeElements();
     this.setupEventListeners();
+    this.setupUnifiedUploadSystem();
     this.updateModeUI();
     console.log('[AI Interface] Initialized successfully');
   }
@@ -421,6 +450,9 @@ class AIQueryInterface {
 
     this.elements.dismissSuggestions?.addEventListener('click', () => this.hideSmartPrompting());
     
+    // CRITICAL: Setup upload for previous analysis (always available)
+    this.setupPreviousAnalysisUpload();
+    
     console.log('[AI Interface] Event listeners setup complete');
   }
 
@@ -987,28 +1019,6 @@ class AIQueryInterface {
               ${this.renderPhaseGroups(rawAuditTrail, stats)}
             </div>
 
-            <!-- Download/Upload Controls -->
-            <div class="ai-results-controls" style="margin-top: 1.5rem; text-align: center; border-top: 1px solid var(--color-border); padding-top: 1rem;">
-              <button id="download-results-btn" class="btn btn-secondary" style="margin-right: 0.5rem;">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                  <polyline points="7 10 12 15 17 10"/>
-                  <line x1="12" y1="15" x2="12" y2="3"/>
-                </svg>
-                Analyse herunterladen
-              </button>
-              
-              <label for="upload-results" class="btn btn-secondary">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                  <polyline points="17 8 12 3 7 8"/>
-                  <line x1="12" y1="3" x2="12" y2="15"/>
-                </svg>
-                Analyse hochladen
-                <input type="file" id="upload-results" accept=".json" style="display: none;" />
-              </label>
-            </div>
-
             <!-- Technical Details Toggle -->
             <div class="technical-toggle">
               <button class="technical-toggle-btn" onclick="this.parentElement.parentElement.querySelector('.technical-details').classList.toggle('collapsed'); this.textContent = this.parentElement.parentElement.querySelector('.technical-details').classList.contains('collapsed') ? 'Technische Details anzeigen' : 'Technische Details verbergen';">
@@ -1023,9 +1033,6 @@ class AIQueryInterface {
           </div>
         </div>
       `;
-
-      // Setup download functionality
-      this.setupDownloadUpload();
       
     } catch (error) {
       console.error('[AI Interface] Error rendering audit trail:', error);
@@ -1049,6 +1056,50 @@ class AIQueryInterface {
     }
   }
 
+  setupUnifiedUploadSystem() {
+    // Setup the always-available upload (previous analysis)
+    const previousUploadInput = document.getElementById('upload-previous-analysis');
+    if (previousUploadInput) {
+      previousUploadInput.addEventListener('change', (event) => {
+        const files = event.target.files;
+        const file = files ? files[0] : null;
+        if (file) {
+          this.handlePreviousAnalysisUpload(file);
+        }
+        event.target.value = ''; // Reset for reuse
+      });
+      console.log('[AI Interface] Previous analysis upload setup complete');
+    }
+
+    // Setup download buttons automatically when they appear
+    const setupDownloadBtn = () => {
+      const downloadBtn = document.getElementById('download-results-btn');
+      if (downloadBtn && !downloadBtn.hasAttribute('data-setup')) {
+        downloadBtn.setAttribute('data-setup', 'true');
+        downloadBtn.addEventListener('click', () => this.downloadResults());
+        console.log('[AI Interface] Download button setup complete');
+      }
+    };
+
+    // Try to setup immediately (if already present)
+    setupDownloadBtn();
+
+    // Watch for dynamically added download buttons
+    const observer = new MutationObserver(() => {
+      setupDownloadBtn();
+    });
+
+    observer.observe(document.body, { 
+      childList: true, 
+      subtree: true 
+    });
+
+    // Store observer for cleanup
+    this.uploadObserver = observer;
+
+    console.log('[AI Interface] Unified upload system setup complete');
+  }
+
   calculateAuditStats(auditTrail) {
     if (!auditTrail || auditTrail.length === 0) {
       return {
@@ -1270,26 +1321,6 @@ class AIQueryInterface {
     return actions[action] || action;
   }
 
-  setupDownloadUpload() {
-    const downloadBtn = document.getElementById('download-results-btn');
-    const uploadInput = document.getElementById('upload-results');
-    
-    if (downloadBtn) {
-      downloadBtn.addEventListener('click', () => this.downloadResults());
-    }
-    
-    if (uploadInput) {
-      uploadInput.addEventListener('change', (event) => {
-        // FIXED: Remove TypeScript casting
-        const files = event.target.files;
-        const file = files ? files[0] : null;
-        if (file) {
-          this.handleFileUpload(file);
-        }
-      });
-    }
-  }
-
   downloadResults() {
     if (!this.currentRecommendation) {
       alert('Keine Analyse zum Herunterladen verfügbar.');
@@ -1334,7 +1365,105 @@ class AIQueryInterface {
     console.log('[AI Interface] Analysis downloaded');
   }
 
-  async handleFileUpload(file) {
+  validateUploadStructure(data) {
+    try {
+      return !!(
+        data &&
+        typeof data === 'object' &&
+        data.metadata &&
+        typeof data.metadata === 'object' &&
+        typeof data.metadata.timestamp === 'string' &&
+        data.recommendation &&
+        typeof data.recommendation === 'object' &&
+        Array.isArray(data.auditTrail)
+      );
+    } catch (error) {
+      console.error('[AI Interface] Structure validation error:', error);
+      return false;
+    }
+  }
+
+  displayUploadedResults(data) {
+    try {
+      console.log('[AI Interface] Displaying uploaded results');
+      
+      // Show upload banner
+      this.showUploadedBanner(data.metadata);
+      
+      // Restore interface state
+      this.currentRecommendation = data.recommendation;
+      
+      // Display the uploaded analysis
+      this.showResults();
+      
+      // Update the recommendation display based on mode
+      if (data.metadata.mode === 'workflow') {
+        this.displayWorkflowResults(data.recommendation, data.metadata.userQuery);
+      } else {
+        this.displayToolResults(data.recommendation, data.metadata.userQuery);
+      }
+      
+      // Render the uploaded audit trail
+      setTimeout(() => {
+        try {
+          this.renderAuditTrail(data.auditTrail);
+          console.log('[AI Interface] Audit trail from upload rendered successfully');
+        } catch (error) {
+          console.error('[AI Interface] Failed to render uploaded audit trail:', error);
+        }
+      }, 200);
+      
+      console.log('[AI Interface] Uploaded analysis displayed successfully');
+    } catch (error) {
+      console.error('[AI Interface] Error displaying uploaded results:', error);
+      this.showError('Fehler beim Anzeigen der hochgeladenen Analyse: ' + error.message);
+    }
+  }
+
+  showUploadedBanner(metadata) {
+    const banner = `
+      <div class="uploaded-results-banner" style="background: var(--color-bg-secondary); border: 1px solid var(--color-warning); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
+        <div style="font-size: 1.5rem;">📁</div>
+        <div style="flex: 1;">
+          <strong style="color: var(--color-warning);">Hochgeladene Analyse</strong>
+          <div style="font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
+            Erstellt: ${new Date(metadata.timestamp).toLocaleString('de-DE')} | 
+            Modus: ${metadata.mode} | 
+            ${metadata.toolsDataHash ? `Hash: ${metadata.toolsDataHash.slice(0, 8)}...` : ''}
+          </div>
+        </div>
+        <button onclick="this.parentElement.remove()" style="background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.25rem;">&times;</button>
+      </div>
+    `;
+    
+    if (this.elements && this.elements.results) {
+      this.elements.results.insertAdjacentHTML('afterbegin', banner);
+    }
+  }
+
+  setupPreviousAnalysisUpload() {
+    const uploadInput = document.getElementById('upload-previous-analysis');
+    
+    if (uploadInput) {
+      uploadInput.addEventListener('change', (event) => {
+        const files = event.target.files;
+        const file = files ? files[0] : null;
+        if (file) {
+          this.handlePreviousAnalysisUpload(file);
+        }
+        // Reset the input so the same file can be uploaded again
+        event.target.value = '';
+      });
+      
+      console.log('[AI Interface] Previous analysis upload setup complete');
+    } else {
+      console.warn('[AI Interface] Previous analysis upload input not found');
+    }
+  }
+
+  async handlePreviousAnalysisUpload(file) {
+    console.log('[AI Interface] Handling previous analysis upload:', file.name);
+    
     try {
       // Security validation
       if (file.size > 10 * 1024 * 1024) {
@@ -1358,82 +1487,30 @@ class AIQueryInterface {
         throw new Error('Ungültiges Analyse-Dateiformat');
       }
       
-      console.log('[AI Interface] Valid analysis file uploaded');
+      console.log('[AI Interface] Valid previous analysis file uploaded');
-      this.displayUploadedResults(data);
       
-    } catch (error) {
+      // Hide any existing results or errors
-      console.error('[AI Interface] Upload failed:', error);
+      this.hideResults();
-      alert(`Upload fehlgeschlagen: ${error.message}`);
+      this.hideError();
-    }
+      this.hideLoading();
-  }
-
-  validateUploadStructure(data) {
-    try {
-      return !!(
-        data &&
-        typeof data === 'object' &&
-        data.metadata &&
-        typeof data.metadata === 'object' &&
-        typeof data.metadata.timestamp === 'string' &&
-        data.recommendation &&
-        typeof data.recommendation === 'object' &&
-        Array.isArray(data.auditTrail)
-      );
-    } catch (error) {
-      console.error('[AI Interface] Structure validation error:', error);
-      return false;
-    }
-  }
-
-  displayUploadedResults(data) {
-    try {
-      // Show upload banner
-      this.showUploadedBanner(data.metadata);
-      
-      // Restore interface state
-      this.currentRecommendation = data.recommendation;
       
       // Display the uploaded analysis
-      this.showResults();
+      this.displayUploadedResults(data);
       
-      // Update the recommendation display
+      // Update mode if different
-      if (data.metadata.mode === 'workflow') {
+      if (data.metadata.mode && data.metadata.mode !== this.currentMode) {
-        this.displayWorkflowResults(data.recommendation, data.metadata.userQuery);
+        this.setMode(data.metadata.mode);
-      } else {
-        this.displayToolResults(data.recommendation, data.metadata.userQuery);
       }
       
-      // Render the uploaded audit trail
+      // Optionally restore the query in the input field
-      setTimeout(() => {
+      if (data.metadata.userQuery && this.elements.input) {
-        this.renderAuditTrail(data.auditTrail);
+        this.elements.input.value = data.metadata.userQuery;
-      }, 100);
+        this.updateCharacterCount();
+      }
       
-      console.log('[AI Interface] Uploaded analysis displayed successfully');
     } catch (error) {
-      console.error('[AI Interface] Error displaying uploaded results:', error);
+      console.error('[AI Interface] Previous analysis upload failed:', error);
-      alert('Fehler beim Anzeigen der hochgeladenen Analyse');
+      this.showError(`Upload fehlgeschlagen: ${error.message}`);
-    }
-  }
-
-  showUploadedBanner(metadata) {
-    const banner = `
-      <div class="uploaded-results-banner" style="background: var(--color-bg-secondary); border: 1px solid var(--color-warning); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
-        <div style="font-size: 1.5rem;">📁</div>
-        <div style="flex: 1;">
-          <strong style="color: var(--color-warning);">Hochgeladene Analyse</strong>
-          <div style="font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem;">
-            Erstellt: ${new Date(metadata.timestamp).toLocaleString('de-DE')} | 
-            Modus: ${metadata.mode} | 
-            ${metadata.toolsDataHash ? `Hash: ${metadata.toolsDataHash.slice(0, 8)}...` : ''}
-          </div>
-        </div>
-        <button onclick="this.parentElement.remove()" style="background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.25rem;">&times;</button>
-      </div>
-    `;
-    
-    // FIXED: Add null checking
-    if (this.elements && this.elements.results) {
-      this.elements.results.insertAdjacentHTML('afterbegin', banner);
     }
   }