Implement Document Corral with animal icons and per-document analysis

frontend/components/AgentAnalysis.tsx

@@ -32,6 +32,10 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
   const [activeSettings, setActiveSettings] = useState<string | null>(null);
   const [statusLog, setStatusLog] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
+  
+  // Multiple Files Support (The Corral)
+  const [corral, setCorral] = useState<Array<{ file: File, text: string, analysis: AnalysisResult | null, id: string }>>([]);
+  const [activeAnimalId, setActiveAnimalId] = useState<string | null>(null);
 
   // Auto-scroll to results when analysis is ready
   useEffect(() => {
@@ -44,34 +48,43 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
   }, [analysis, isRunning]);
 
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files[0]) {
-      setFile(event.target.files[0]);
+      const newFile = event.target.files[0];
+      const id = Math.random().toString(36).substring(7);
+      
+      setIsUploading(true);
+      try {
+        const uploadResult = await uploadDocument(newFile);
+        const newEntry = { 
+            file: newFile, 
+            text: uploadResult.text, 
+            analysis: null, 
+            id 
+        };
+        setCorral(prev => [...prev, newEntry]);
+        setActiveAnimalId(id);
+      } catch (err) {
+        console.error("Upload error", err);
+        setError("Failed to upload and process document.");
+      } finally {
+        setIsUploading(false);
+      }
     }
   };
 
   const handleAnalyzeClick = async () => {
-    if (!approved || !tender) return;
+    if (!approved || !tender || !activeAnimalId) return;
+    const activeEntry = corral.find(a => a.id === activeAnimalId);
+    if (!activeEntry) return;
+
     setIsRunning(true);
     setError(null);
-    setStatusLog(["🚀 Initializing Agent War Room...", "📡 Connecting to neural providers..."]);
-    
-    let extractedText = documentText;
+    setStatusLog(["🚀 Initializing Agent War Room...", `📡 Focusing on: ${activeEntry.file.name}...`]);
     
     try {
-      if (file && !extractedText) {
-        setIsUploading(true);
-        setStatusLog(prev => [...prev, "📄 Extracting text from PDF bases..."]);
-        const uploadResult = await uploadDocument(file);
-        extractedText = uploadResult.text;
-        setDocumentText(extractedText);
-        setStatusLog(prev => [...prev, "✅ PDF text extracted successfully."]);
-      }
-      
-      setIsUploading(false);
       setStatusLog(prev => [...prev, "🤝 Summoning experts: Legal, Technical, and Strategy..."]);
       
-      // Simulate partial progress since we can't do real-time backend updates easily without SSE
       const progressTimer = setInterval(() => {
         const messages = [
             "⚖️ Dra. Legal is reviewing clauses...",
@@ -88,20 +101,39 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
         });
       }, 3000);
 
-      await onAnalyze(extractedText, agentModels);
+      // We call the parent's onAnalyze but we want the result back locally too
+      // Actually, since we want multiple analyses, we might need to handle the result here
+      // For now, let's assume the parent updates the main analysis prop, but we'll store it in the corral too
+      await onAnalyze(activeEntry.text, agentModels);
       
       clearInterval(progressTimer);
       setStatusLog(prev => [...prev, "✨ Analysis complete!"]);
     } catch (err) {
       console.error("Error during analysis flow:", err);
-      setError("The analysis pipeline encountered a technical failure. This could be due to API rate limits or connectivity issues with the neural providers.");
+      setError("The analysis pipeline encountered a technical failure.");
       setStatusLog(prev => [...prev, "❌ Error occurred during analysis pipeline."]);
     } finally {
-      setIsUploading(false);
       setIsRunning(false);
     }
   };
 
+  // Sync parent analysis to corral entry
+  useEffect(() => {
+    if (analysis && activeAnimalId) {
+        setCorral(prev => prev.map(a => a.id === activeAnimalId ? { ...a, analysis } : a));
+    }
+  }, [analysis]);
+
+  const activeAnalysis = corral.find(a => a.id === activeAnimalId)?.analysis || analysis;
+
+  const getFileIcon = (fileName: string) => {
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    if (ext === 'pdf') return { emoji: "📄", animal: "🦢", color: "bg-red-500/10 text-red-400" };
+    if (ext === 'doc' || ext === 'docx') return { emoji: "📝", animal: "🐒", color: "bg-blue-500/10 text-blue-400" };
+    if (ext === 'xls' || ext === 'xlsx') return { emoji: "📊", animal: "🐘", color: "bg-green-500/10 text-green-400" };
+    return { emoji: "📁", animal: "🐈", color: "bg-slate-500/10 text-slate-400" };
+  };
+
   if (!tender && !analysis) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh] space-y-12 animate-in fade-in duration-1000">
@@ -186,21 +218,39 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
 
           <div className="flex flex-col gap-4 lg:w-80">
              <div className="glass-card rounded-2xl p-6 bg-white/5 border border-white/10">
-                <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 tracking-widest">Administrative Bases (PDF)</h4>
+                <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 tracking-widest">Document Corral</h4>
                 
-                {tender?.attachments && tender.attachments.length > 0 && (
-                  <div className="mb-4 space-y-2">
-                    {tender.attachments.map((att, i) => (
-                      <div key={i} className="flex items-center gap-2 p-2 rounded-lg bg-purple-500/10 border border-purple-500/20 text-[10px] text-purple-300">
-                        <span>📄</span>
-                        <span className="truncate">{att.name}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
+                {/* The Corral (Animal Pen) */}
+                <div className="flex flex-wrap gap-3 mb-6">
+                  {corral.map((item) => {
+                    const icon = getFileIcon(item.file.name);
+                    return (
+                      <button
+                        key={item.id}
+                        onClick={() => setActiveAnimalId(item.id)}
+                        className={`group relative flex flex-col items-center justify-center h-16 w-16 rounded-2xl border transition-all duration-500 hover:scale-110 active:scale-95 ${activeAnimalId === item.id ? 'bg-purple-500/20 border-purple-500 shadow-lg shadow-purple-500/20' : 'bg-white/5 border-white/10'}`}
+                        title={item.file.name}
+                      >
+                        <span className={`text-2xl transition-all duration-500 group-hover:rotate-12 ${activeAnimalId === item.id ? 'animate-bounce' : 'group-hover:animate-wiggle'}`}>
+                          {icon.animal}
+                        </span>
+                        <span className="absolute -bottom-1 -right-1 text-[10px]">{icon.emoji}</span>
+                        {item.analysis && <span className="absolute -top-1 -right-1 h-3 w-3 bg-green-500 rounded-full border-2 border-black" title="Analyzed" />}
+                      </button>
+                    );
+                  })}
+                  
+                  <label className="flex flex-col items-center justify-center h-16 w-16 rounded-2xl border border-dashed border-white/20 bg-white/5 cursor-pointer hover:bg-white/10 hover:border-purple-500/50 transition-all">
+                    <span className="text-xl text-slate-500">+</span>
+                    <input type="file" onChange={handleFileChange} className="hidden" />
+                  </label>
+                </div>
+
+                <div className="text-[10px] text-slate-500 italic mb-4">
+                  {corral.length === 0 ? "No documents in the corral." : `${corral.length} document(s) ready.`}
+                </div>
 
-                <input type="file" accept=".pdf" onChange={handleFileChange} className="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-bold file:bg-white/10 file:text-purple-300 hover:file:bg-white/20 transition cursor-pointer" />
-                {file && <p className="mt-2 text-[10px] text-green-400 font-bold">✓ Ready for extraction</p>}
+                {isUploading && <p className="text-[10px] text-purple-400 animate-pulse font-bold">✨ Bringing animal to corral...</p>}
              </div>
              
              <label className="flex items-center gap-3 p-4 rounded-2xl bg-white/5 cursor-pointer hover:bg-white/10 transition border border-white/5">
@@ -210,10 +260,10 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
 
              <button
                onClick={handleAnalyzeClick}
-               disabled={!tender || !approved || isRunning || isUploading}
+               disabled={!tender || !approved || isRunning || !activeAnimalId}
                className="w-full rounded-2xl premium-gradient py-5 font-bold text-white transition hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed shadow-xl shadow-purple-500/20 active:scale-[0.98]"
              >
-               {isUploading ? "Extracting Text..." : isRunning ? "Agents Debating..." : "Launch Analysis Pipeline"}
+               {isRunning ? "Agents Debating..." : "Launch Analysis Pipeline"}
              </button>
           </div>
         </div>
@@ -309,18 +359,22 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
       )}
 
       {/* Analysis Results View */}
-      {analysis && (
+      {activeAnalysis && (
         <div id="analysis-results" className="grid gap-8 lg:grid-cols-12 animate-in fade-in slide-in-from-bottom-8 duration-1000 scroll-mt-20">
           <div className="lg:col-span-8 space-y-8">
              <div className="glass-card rounded-3xl p-10 bg-white/[0.02]">
                 <div className="flex items-start justify-between mb-8">
                    <div>
                       <div className="text-[11px] font-bold uppercase tracking-[0.3em] text-purple-400 mb-2">Agent Consensus</div>
-                      <h3 className="text-6xl font-black text-white">{analysis.fit_score}% <span className="text-2xl font-light text-slate-500">Fit Score</span></h3>
+                      <h3 className="text-6xl font-black text-white">{activeAnalysis.fit_score}% <span className="text-2xl font-light text-slate-500">Fit Score</span></h3>
+                      <div className="mt-2 flex items-center gap-2">
+                        <span className="text-[10px] text-slate-500 font-mono">Analyzing:</span>
+                        <span className="text-[10px] text-purple-300 font-bold">{corral.find(a => a.id === activeAnimalId)?.file.name || tender?.name}</span>
+                      </div>
                    </div>
                    <div className="flex flex-col items-end gap-3">
-                      <div className={`rounded-2xl px-6 py-3 text-[10px] font-black uppercase tracking-widest shadow-lg ${analysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400 border border-green-500/30 shadow-green-500/10' : 'bg-amber-500/20 text-amber-400 border border-amber-500/30 shadow-amber-500/10'}`}>
-                         {analysis.decision}
+                      <div className={`rounded-2xl px-6 py-3 text-[10px] font-black uppercase tracking-widest shadow-lg ${activeAnalysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400 border border-green-500/30 shadow-green-500/10' : 'bg-amber-500/20 text-amber-400 border border-amber-500/30 shadow-amber-500/10'}`}>
+                         {activeAnalysis.decision}
                       </div>
                       <div className="flex gap-2">
                          <button