feat: Detailed agent thought process logs in analysis history

frontend/components/AnalysisHistory.tsx

@@ -1,5 +1,4 @@
-"use client";
-
+import { useState } from "react";
 import type { AnalysisHistoryItem } from "../lib/types";
 
 type Props = {
@@ -7,6 +6,14 @@ type Props = {
 };
 
 export default function AnalysisHistory({ history }: Props) {
+  const [expandedItems, setExpandedItems] = useState<string[]>([]);
+
+  const toggleExpand = (id: string) => {
+    setExpandedItems(prev => 
+      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+    );
+  };
+
   if (!history.length) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[40vh] glass-card rounded-3xl border border-white/5 p-12 text-center animate-in fade-in duration-700">
@@ -20,60 +27,85 @@ export default function AnalysisHistory({ history }: Props) {
   return (
     <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
       <div className="space-y-6">
-        {history.map((item) => (
-          <div key={`${item.tender_code}-${item.analyzed_at}`} className="glass-card rounded-3xl p-8 border border-white/5 hover:border-purple-500/30 transition-all duration-300">
-            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
-              <div className="space-y-1">
-                <div className="flex items-center gap-3 mb-2">
-                   <span className="text-[10px] font-black uppercase tracking-widest text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded border border-purple-500/20">Audit Record</span>
-                   <span className="text-xs text-slate-500 font-mono">{item.tender_code}</span>
+        {history.map((item) => {
+          const itemId = `${item.tender_code}-${item.analyzed_at}`;
+          const isExpanded = expandedItems.includes(itemId);
+          
+          return (
+            <div key={itemId} className="glass-card rounded-3xl p-8 border border-white/5 hover:border-purple-500/30 transition-all duration-300">
+              <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-3 mb-2">
+                     <span className="text-[10px] font-black uppercase tracking-widest text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded border border-purple-500/20">Audit Record</span>
+                     <span className="text-xs text-slate-500 font-mono">{item.tender_code}</span>
+                  </div>
+                  <h3 className="text-2xl font-bold text-white tracking-tight">{item.tender_name}</h3>
+                  <p className="text-xs text-slate-500">{new Date(item.analyzed_at).toLocaleString()}</p>
                 </div>
-                <h3 className="text-2xl font-bold text-white tracking-tight">{item.tender_name}</h3>
-                <p className="text-xs text-slate-500">{new Date(item.analyzed_at).toLocaleString()}</p>
-              </div>
-              
-              <div className="flex items-center gap-8 bg-white/5 rounded-2xl p-6 border border-white/5">
-                <div className="text-center">
-                  <p className="text-[9px] uppercase tracking-widest text-slate-500 font-bold mb-1">Fit Score</p>
-                  <p className="text-3xl font-black text-white">{item.analysis.fit_score}%</p>
-                </div>
-                <div className="h-10 w-px bg-white/10" />
-                <div className="text-center">
-                  <p className="text-[9px] uppercase tracking-widest text-slate-500 font-bold mb-1">Decision</p>
-                  <p className={`text-xs font-black uppercase tracking-widest px-3 py-1 rounded-full ${item.analysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400' : 'bg-amber-500/20 text-amber-400'}`}>
-                    {item.analysis.decision}
-                  </p>
+                
+                <div className="flex items-center gap-8 bg-white/5 rounded-2xl p-6 border border-white/5">
+                  <div className="text-center">
+                    <p className="text-[9px] uppercase tracking-widest text-slate-500 font-bold mb-1">Fit Score</p>
+                    <p className="text-3xl font-black text-white">{item.analysis.fit_score}%</p>
+                  </div>
+                  <div className="h-10 w-px bg-white/10" />
+                  <div className="text-center">
+                    <p className="text-[9px] uppercase tracking-widest text-slate-500 font-bold mb-1">Decision</p>
+                    <p className={`text-xs font-black uppercase tracking-widest px-3 py-1 rounded-full ${item.analysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400' : 'bg-amber-500/20 text-amber-400'}`}>
+                      {item.analysis.decision}
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div className="mt-8 grid gap-4 grid-cols-2 md:grid-cols-4">
-              <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
-                <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Risks Detected</p>
-                <p className="text-sm font-bold text-white">{item.analysis.risks.length}</p>
-              </div>
-              <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
-                <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Key Requirements</p>
-                <p className="text-sm font-bold text-white">{item.analysis.key_requirements.length}</p>
-              </div>
-              <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
-                <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Legal Gaps</p>
-                <p className="text-sm font-bold text-white">{item.analysis.compliance_gaps.length}</p>
+              <div className="mt-8 grid gap-4 grid-cols-2 md:grid-cols-4">
+                <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
+                  <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Risks Detected</p>
+                  <p className="text-sm font-bold text-white">{item.analysis.risks.length}</p>
+                </div>
+                <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
+                  <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Key Requirements</p>
+                  <p className="text-sm font-bold text-white">{item.analysis.key_requirements.length}</p>
+                </div>
+                <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
+                  <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Legal Gaps</p>
+                  <p className="text-sm font-bold text-white">{item.analysis.compliance_gaps.length}</p>
+                </div>
+                <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
+                  <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Audit Logs</p>
+                  <p className="text-sm font-bold text-white">{item.analysis.audit_log?.length ?? 0}</p>
+                </div>
               </div>
-              <div className="p-4 rounded-2xl bg-black/20 border border-white/5">
-                <p className="text-[9px] uppercase text-slate-500 font-bold mb-1">Audit Logs</p>
-                <p className="text-sm font-bold text-white">{item.analysis.audit_log?.length ?? 0}</p>
+              
+              <div className="mt-6">
+                <button 
+                  onClick={() => toggleExpand(itemId)}
+                  className="text-xs font-bold text-purple-400 hover:text-white transition-colors flex items-center gap-2"
+                >
+                  <span>{isExpanded ? "Hide Thought Process" : "View Agent Thought Process"}</span>
+                  <span className={`transition-transform ${isExpanded ? "rotate-90" : ""}`}>→</span>
+                </button>
               </div>
+
+              {isExpanded && (
+                <div className="mt-8 p-6 rounded-3xl bg-black/40 border border-white/5 animate-in slide-in-from-top-4 duration-500">
+                  <h4 className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-4">Agent Intelligence Log (Full Audit)</h4>
+                  <div className="space-y-3">
+                    {item.analysis.audit_log?.map((log, idx) => (
+                      <div key={idx} className="flex gap-4 p-3 rounded-xl bg-white/[0.02] border border-white/[0.02]">
+                        <span className="text-xs opacity-30 mt-0.5">[{idx + 1}]</span>
+                        <p className="text-xs text-slate-400 font-mono leading-relaxed">{log}</p>
+                      </div>
+                    ))}
+                    {(!item.analysis.audit_log || item.analysis.audit_log.length === 0) && (
+                      <p className="text-xs text-slate-600 italic">No logs available for this session.</p>
+                    )}
+                  </div>
+                </div>
+              )}
             </div>
-            
-            <div className="mt-6">
-              <button className="text-xs font-bold text-purple-400 hover:text-white transition-colors flex items-center gap-2">
-                <span>View Full Analysis Details</span>
-                <span>→</span>
-              </button>
-            </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );