v4.0: Analyze page — add Redlining + Q&A Chat tabs with full UI

web/app/dashboard-pages/analyze/page.tsx

@@ -9,7 +9,8 @@ import {
   AlertTriangle, Tag, BookOpen, ClipboardList, DollarSign,
   Calendar, Building, MapPin, Hash, Bot, FileSearch, Percent, Clock,
   User, BookMarked, ShieldX, HelpCircle, Cpu, PenTool, Zap,
-  ShieldOff, CircleSlash, MessageSquareWarning, Construction
+  ShieldOff, CircleSlash, MessageSquareWarning, Construction,
+  MessageSquare, Send, Loader2
 } from "lucide-react";
 
 interface Cat { name: string; severity: string; description?: string; confidence?: number; }
@@ -19,6 +20,17 @@ interface Contradiction { type: string; explanation: string; severity: string; c
 interface Obligation { type: string; party: string; description: string; deadline: string; priority?: number; }
 interface ComplianceCheck { requirement: string; description: string; severity: string; status: string; matched_keywords: string[]; context?: string[]; }
 interface ComplianceReg { description: string; compliance_rate: number; checks: ComplianceCheck[]; overall_status: string; negated_count?: number; ambiguous_count?: number; }
+interface Redline {
+  original_text: string;
+  clause_label: string;
+  risk_level: string;
+  safe_alternative: string;
+  template_alternative?: string;
+  legal_basis: string;
+  consumer_standard: string;
+  tier: string;
+}
+interface ChatMessage { role: "user" | "assistant"; content: string; }
 interface AnalysisResult {
   risk_score: number;
   grade: string;
@@ -29,8 +41,10 @@ interface AnalysisResult {
   contradictions: Contradiction[];
   obligations: Obligation[];
   compliance: Record<string, ComplianceReg>;
+  redlines: Redline[];
   model: string;
   latency_ms: number;
+  session_id?: string;
 }
 
 const SEV_CONFIG: Record<string, { icon: any; label: string; text: string; bg: string; border: string; ring: string }> = {
@@ -169,6 +183,9 @@ export default function AnalyzePage() {
   const [scanLimit, setScanLimit] = useState(10);
   const [canUpload, setCanUpload] = useState(false);
   const [showUpgrade, setShowUpgrade] = useState(false);
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [chatInput, setChatInput] = useState("");
+  const [chatLoading, setChatLoading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Fetch user profile from DB on mount — no hardcoded emails or plans
@@ -237,6 +254,31 @@ export default function AnalyzePage() {
     setCopied(true); setTimeout(() => setCopied(false), 2000);
   }
 
+  async function handleChat() {
+    if (!chatInput.trim() || !results?.session_id) return;
+    const userMsg: ChatMessage = { role: "user", content: chatInput.trim() };
+    setChatMessages(prev => [...prev, userMsg]);
+    setChatInput("");
+    setChatLoading(true);
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: userMsg.content,
+          session_id: results.session_id,
+          history: chatMessages.slice(-6),
+        }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error || "Chat failed");
+      const data = await res.json();
+      setChatMessages(prev => [...prev, { role: "assistant", content: data.response }]);
+    } catch (e: any) {
+      setChatMessages(prev => [...prev, { role: "assistant", content: `⚠️ ${e.message}` }]);
+    }
+    setChatLoading(false);
+  }
+
   const flagged = results?.results.filter(r => r.categories.length > 0) || [];
   const filtered = filter === "all" ? flagged : flagged.filter(r => r.categories.some(c => c.severity === filter));
   const sevCounts = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
@@ -260,6 +302,8 @@ export default function AnalyzePage() {
     { key: "contradictions", label: "Issues", icon: AlertTriangle, count: results?.contradictions.length || 0 },
     { key: "obligations", label: "Obligations", icon: ClipboardList, count: results?.obligations.length || 0 },
     { key: "compliance", label: "Compliance", icon: ShieldCheck, count: Object.keys(results?.compliance || {}).length },
+    { key: "redlining", label: "Redlining", icon: PenTool, count: results?.redlines?.length || 0 },
+    { key: "chat", label: "Q&A", icon: MessageSquare, count: chatMessages.length },
   ];
 
   return (
@@ -668,6 +712,139 @@ export default function AnalyzePage() {
                       })}
                     </div>
                   )}
+
+                  {/* Redlining */}
+                  {activeTab === "redlining" && (
+                    <div className="space-y-3">
+                      {(!results.redlines || results.redlines.length === 0) ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-8 sm:p-10 text-center bg-white">
+                          <PenTool className="w-8 h-8 text-zinc-300 mx-auto mb-2" />
+                          <p className="text-sm text-zinc-500">No redlining suggestions for this contract.</p>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="bg-gradient-to-r from-blue-50 to-emerald-50 rounded-xl p-4 border border-zinc-200 mb-2">
+                            <div className="flex items-center gap-2 mb-1">
+                              <PenTool className="w-4 h-4 text-zinc-600" />
+                              <span className="text-sm font-semibold text-zinc-800">Clause Redlining Suggestions</span>
+                            </div>
+                            <p className="text-xs text-zinc-500">
+                              {results.redlines.length} suggestions · {results.redlines.filter(r => r.tier === "llm_refined").length} LLM-refined
+                            </p>
+                          </div>
+                          {results.redlines.map((rl, i) => {
+                            const isHigh = rl.risk_level === "CRITICAL" || rl.risk_level === "HIGH";
+                            const conf = SEV_CONFIG[rl.risk_level] || SEV_CONFIG.MEDIUM;
+                            return (
+                              <div key={i} className={`bg-white border rounded-xl overflow-hidden ${conf.border}`}>
+                                <div className={`px-4 py-3 ${conf.bg} border-b ${conf.border} flex items-center justify-between`}>
+                                  <div className="flex items-center gap-2">
+                                    <conf.icon className={`w-4 h-4 ${conf.text}`} />
+                                    <span className={`text-sm font-semibold ${conf.text}`}>{rl.clause_label}</span>
+                                    <span className={`text-[10px] uppercase font-bold ${conf.text}`}>{rl.risk_level}</span>
+                                  </div>
+                                  <span className={`text-[10px] px-2 py-0.5 rounded border ${
+                                    rl.tier === "llm_refined"
+                                      ? "bg-indigo-50 text-indigo-600 border-indigo-200"
+                                      : "bg-emerald-50 text-emerald-600 border-emerald-200"
+                                  }`}>
+                                    {rl.tier === "llm_refined" ? "🤖 LLM Refined" : "📋 Template"}
+                                  </span>
+                                </div>
+                                <div className="p-4 space-y-3">
+                                  <div>
+                                    <p className="text-[10px] font-semibold text-red-600 uppercase mb-1">❌ Original (Risky)</p>
+                                    <div className="bg-red-50 border border-red-100 rounded-lg p-3 text-xs text-red-800 leading-relaxed line-through">
+                                      {rl.original_text.slice(0, 200)}{rl.original_text.length > 200 ? "..." : ""}
+                                    </div>
+                                  </div>
+                                  <div>
+                                    <p className="text-[10px] font-semibold text-emerald-600 uppercase mb-1">✅ Suggested Alternative</p>
+                                    <div className="bg-emerald-50 border border-emerald-100 rounded-lg p-3 text-xs text-emerald-800 leading-relaxed">
+                                      {rl.safe_alternative}
+                                    </div>
+                                  </div>
+                                  <div className="flex gap-3 flex-wrap text-[10px] text-zinc-500">
+                                    <span>📚 {rl.legal_basis}</span>
+                                    <span>🛡️ {rl.consumer_standard}</span>
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })}
+                          <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-[11px] text-amber-800">
+                            <strong>⚠️ Disclaimer:</strong> These are AI-generated suggestions, NOT legal advice. Consult an attorney before use.
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Chat */}
+                  {activeTab === "chat" && (
+                    <div className="flex flex-col h-[350px] sm:h-[420px]">
+                      {!results.session_id ? (
+                        <div className="flex-1 flex items-center justify-center">
+                          <div className="text-center">
+                            <MessageSquare className="w-8 h-8 text-zinc-300 mx-auto mb-2" />
+                            <p className="text-sm text-zinc-500">Chat unavailable — session not initialized.</p>
+                            <p className="text-xs text-zinc-400 mt-1">Try analyzing again with the backend running.</p>
+                          </div>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="flex-1 overflow-y-auto space-y-3 pr-1 mb-3">
+                            {chatMessages.length === 0 && (
+                              <div className="text-center py-8">
+                                <MessageSquare className="w-8 h-8 text-zinc-200 mx-auto mb-2" />
+                                <p className="text-sm text-zinc-400">Ask a question about your contract</p>
+                                <div className="mt-3 flex flex-wrap justify-center gap-2">
+                                  {["What are the main risks?", "Who are the parties?", "Is there an arbitration clause?", "Summarize key terms"].map(q => (
+                                    <button key={q} onClick={() => { setChatInput(q); }}
+                                      className="text-xs px-3 py-1.5 rounded-full border border-zinc-200 text-zinc-500 hover:bg-zinc-50 transition-colors">
+                                      {q}
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
+                            {chatMessages.map((msg, i) => (
+                              <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+                                <div className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-sm leading-relaxed ${
+                                  msg.role === "user"
+                                    ? "bg-zinc-900 text-white"
+                                    : "bg-zinc-100 text-zinc-700 border border-zinc-200"
+                                }`}>
+                                  {msg.content}
+                                </div>
+                              </div>
+                            ))}
+                            {chatLoading && (
+                              <div className="flex justify-start">
+                                <div className="bg-zinc-100 border border-zinc-200 rounded-xl px-4 py-3">
+                                  <Loader2 className="w-4 h-4 text-zinc-400 animate-spin" />
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                          <div className="flex gap-2 border-t border-zinc-100 pt-3">
+                            <input
+                              value={chatInput}
+                              onChange={(e) => setChatInput(e.target.value)}
+                              onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleChat()}
+                              placeholder="Ask about your contract..."
+                              className="flex-1 px-3 py-2 border border-zinc-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900/10"
+                              disabled={chatLoading}
+                            />
+                            <button onClick={handleChat} disabled={chatLoading || !chatInput.trim()}
+                              className="px-3 py-2 bg-zinc-900 text-white rounded-lg hover:bg-zinc-800 disabled:opacity-40 transition-colors">
+                              <Send className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
             ) : (