feat: enhance tender details UI, fix scroll-to-top issues, and integrate Groq chat

frontend/app/page.tsx

@@ -58,10 +58,19 @@ export default function HomePage() {
 
   // Scroll to top when tab changes
   useEffect(() => {
-    window.scrollTo(0, 0);
+    // Force immediate scroll
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
     if (contentRef.current) {
-      contentRef.current.scrollTo(0, 0);
+      contentRef.current.scrollTo({ top: 0, left: 0, behavior: 'instant' });
     }
+    
+    // Safety delay for async renders
+    const timer = setTimeout(() => {
+      window.scrollTo(0, 0);
+      if (contentRef.current) contentRef.current.scrollTo(0, 0);
+    }, 100);
+    
+    return () => clearTimeout(timer);
   }, [activeTab]);
 
   useEffect(() => {

frontend/components/AgentAnalysis.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import type { AnalysisResult, CompanyProfile, Tender } from "../lib/types";
 import { uploadDocument } from "../lib/api";
+import AgentChat from "./AgentChat";
 
 type Props = {
   tender: Tender | null;
@@ -37,15 +38,7 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
   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(() => {
-    if (analysis && !isRunning) {
-      const resultsSection = document.getElementById("analysis-results");
-      if (resultsSection) {
-        resultsSection.scrollIntoView({ behavior: "smooth", block: "start" });
-      }
-    }
-  }, [analysis, isRunning]);
+  // Removed auto-scroll to keep user at the top during demo recordings
 
 
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -201,17 +194,62 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
             <p className="text-slate-400 text-lg leading-relaxed">{tender?.buyer}</p>
             
             {tender && (
-              <div className="mt-8 flex flex-wrap gap-4">
-                <div className="rounded-2xl bg-white/5 p-4 border border-white/5">
-                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1">Estimated Amount</p>
-                   <p className="text-lg font-semibold text-white">
-                      {tender.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP", maximumFractionDigits: 0 }).format(tender.estimated_amount) : "Not disclosed"}
+              <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div className="rounded-2xl bg-white/5 p-4 border border-white/5 group hover:bg-white/10 transition-colors">
+                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1 tracking-widest">Investment</p>
+                   <p className="text-lg font-black text-white">
+                      {tender.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: tender.currency || "CLP", maximumFractionDigits: 0 }).format(tender.estimated_amount) : "N/A"}
                    </p>
                 </div>
-                <div className="rounded-2xl bg-white/5 p-4 border border-white/5">
-                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1">Closing Date</p>
-                   <p className="text-lg font-semibold text-white">{tender.closing_date}</p>
+                <div className="rounded-2xl bg-white/5 p-4 border border-white/5 group hover:bg-white/10 transition-colors">
+                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1 tracking-widest">Closing Date</p>
+                   <p className="text-lg font-black text-white">{tender.closing_date || "TBD"}</p>
+                </div>
+                <div className="rounded-2xl bg-white/5 p-4 border border-white/5 group hover:bg-white/10 transition-colors">
+                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1 tracking-widest">Region</p>
+                   <p className="text-lg font-black text-white truncate" title={tender.region}>{tender.region || "Nacional"}</p>
                 </div>
+                <div className="rounded-2xl bg-white/5 p-4 border border-white/5 group hover:bg-white/10 transition-colors">
+                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1 tracking-widest">Sector</p>
+                   <p className="text-lg font-black text-white truncate">{tender.sector || "General"}</p>
+                </div>
+              </div>
+            )}
+            
+            {tender?.description && (
+              <div className="mt-8 p-6 rounded-2xl bg-white/[0.02] border border-white/5">
+                <h4 className="text-[10px] font-bold uppercase text-slate-500 mb-3 tracking-[0.2em]">Detailed Scope</h4>
+                <p className="text-sm text-slate-400 leading-relaxed max-h-32 overflow-y-auto custom-scrollbar pr-2 whitespace-pre-wrap">
+                  {tender.description}
+                </p>
+              </div>
+            )}
+
+            {tender?.items && tender.items.length > 0 && (
+              <div className="mt-8 overflow-hidden rounded-2xl border border-white/5 bg-white/[0.01]">
+                <table className="w-full text-left text-[10px]">
+                  <thead className="bg-white/5 text-slate-500 uppercase font-black tracking-widest">
+                    <tr>
+                      <th className="px-6 py-3">Item Name</th>
+                      <th className="px-6 py-3 text-right">Qty</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-white/5">
+                    {tender.items.slice(0, 3).map((item, idx) => (
+                      <tr key={idx} className="hover:bg-white/[0.02]">
+                        <td className="px-6 py-3 text-slate-300 font-medium truncate max-w-[200px]">{item.name}</td>
+                        <td className="px-6 py-3 text-right text-cyan font-mono font-bold">{item.quantity} {item.unit}</td>
+                      </tr>
+                    ))}
+                    {tender.items.length > 3 && (
+                      <tr>
+                        <td colSpan={2} className="px-6 py-2 text-center text-[9px] text-slate-600 italic">
+                          + {tender.items.length - 3} more items...
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
               </div>
             )}
           </div>
@@ -526,6 +564,20 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
           </div>
         </div>
       )}
+
+      {/* Expert Consultation Chat */}
+      {tender && (
+        <div className="mt-12 animate-in fade-in slide-in-from-bottom-8 duration-700">
+           <div className="flex items-center gap-4 mb-6 px-2">
+              <div className="w-10 h-10 rounded-2xl bg-purple-500/10 flex items-center justify-center text-xl shadow-lg shadow-purple-500/10">💬</div>
+              <div>
+                <h3 className="text-2xl font-black text-white tracking-tight">Expert Agent Consultation</h3>
+                <p className="text-slate-500 text-sm">Deep-dive into specific questions with our specialized AI agents.</p>
+              </div>
+           </div>
+           <AgentChat tender={tender} companyProfile={companyProfile} />
+        </div>
+      )}
     </div>
   );
 }

frontend/components/AgentChat.tsx

@@ -21,8 +21,9 @@ const agents = [
 ];
 
 const models = [
+  "Llama-3.3-70B (Groq)",
+  "Llama-3.1-8B (Groq)",
   "Gemini 2.5 Flash",
-  "DeepSeek-V3.2 (Featherless)",
   "Qwen-2.5 (Featherless)",
 ];
 

frontend/components/TenderSearch.tsx

@@ -69,6 +69,15 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
     localStorage.setItem('andes_followed_tenders_full', JSON.stringify(followedTenders));
   }, [followedTenders]);
 
+  // Force scroll to top when opening detail modal
+  useEffect(() => {
+    if (selectedTenderForModal) {
+      window.scrollTo({ top: 0, behavior: 'instant' });
+      const timer = setTimeout(() => window.scrollTo(0, 0), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [selectedTenderForModal]);
+
   const toggleFollow = (tender: Tender) => {
     setFollowedTenders(prev => {
       const isFollowing = prev.some(t => t.code === tender.code);