feat: add briefing UI — summary card + clickable suggested questions after upload

frontend/src/App.jsx

@@ -6,6 +6,8 @@ import ChatArea from "./components/ChatArea";
 function App() {
   const [documents, setDocuments] = useState([]);
   const [evalLog, setEvalLog] = useState([]);
+  const [briefing, setBriefing] = useState(null);
+  const [suggestedQuestion, setSuggestedQuestion] = useState("");
 
   useEffect(() => {
     getDocuments().then((d) => setDocuments(d.documents || []));
@@ -14,12 +16,13 @@ function App() {
   async function handleNewConversation() {
     await clearMemory();
     setEvalLog([]);
+    setBriefing(null);
+    setSuggestedQuestion("");
     window.location.reload();
   }
 
   return (
     <div className="min-h-screen bg-gray-50 flex flex-col">
-      {/* Header */}
       <header className="bg-white px-6 py-4 shrink-0 shadow-sm">
         <div className="flex items-center gap-3">
           <div className="w-1 h-8 bg-indigo-600 rounded-full" />
@@ -32,17 +35,21 @@ function App() {
         </div>
       </header>
 
-      {/* Main */}
       <main className="flex-1 flex">
         <Sidebar
           documents={documents}
           setDocuments={setDocuments}
           onNewConversation={handleNewConversation}
           evalLog={evalLog}
+          onBriefing={setBriefing}
+          briefing={briefing}
+          onSuggestedQuestion={setSuggestedQuestion}
         />
         <ChatArea
           onEvalEntry={(entry) => setEvalLog((prev) => [...prev, entry])}
           hasDocuments={documents.length > 0}
+          suggestedQuestion={suggestedQuestion}
+          onSuggestedQuestionUsed={() => setSuggestedQuestion("")}
         />
       </main>
     </div>

frontend/src/components/ChatArea.jsx

@@ -1,13 +1,20 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { sendMessage } from "../api";
 import MessageBubble from "./MessageBubble";
 
-export default function ChatArea({ onEvalEntry, hasDocuments }) {
+export default function ChatArea({ onEvalEntry, hasDocuments, suggestedQuestion, onSuggestedQuestionUsed }) {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
   const [webSearch, setWebSearch] = useState(false);
 
+  useEffect(() => {
+    if (suggestedQuestion) {
+      setInput(suggestedQuestion);
+      onSuggestedQuestionUsed?.();
+    }
+  }, [suggestedQuestion]);
+
   async function handleSend(e) {
     e.preventDefault();
     if (!input.trim() || loading || !hasDocuments) return;

frontend/src/components/Sidebar.jsx

@@ -37,6 +37,8 @@ export default function Sidebar({
   onNewConversation,
   evalLog,
   onBriefing,
+  briefing,
+  onSuggestedQuestion,
 }) {
   const [deletingDoc, setDeletingDoc] = useState(null);
 
@@ -79,6 +81,39 @@ export default function Sidebar({
           <FileUpload onUploadComplete={setDocuments} onBriefing={onBriefing} />
         </div>
 
+        {/* Briefing card */}
+        {briefing && (
+          <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3.5 space-y-2">
+            <h3 className="text-xs font-semibold text-indigo-500 uppercase tracking-wider truncate">
+              {briefing.doc_name.length > 30
+                ? briefing.doc_name.slice(0, 30) + "…"
+                : briefing.doc_name}
+            </h3>
+            <ul className="space-y-1">
+              {briefing.summary.map((point, i) => (
+                <li key={i} className="text-xs text-gray-600 flex gap-1.5">
+                  <span className="text-indigo-400 shrink-0">•</span>
+                  {point}
+                </li>
+              ))}
+            </ul>
+            {briefing.suggested_questions.length > 0 && (
+              <div className="pt-1 space-y-1">
+                <p className="text-xs text-indigo-400 font-medium">Try asking:</p>
+                {briefing.suggested_questions.map((q, i) => (
+                  <button
+                    key={i}
+                    onClick={() => onSuggestedQuestion(q)}
+                    className="block w-full text-left text-xs bg-white border border-indigo-200 rounded-lg px-2.5 py-1.5 text-gray-700 hover:bg-indigo-50 hover:border-indigo-400 transition-colors"
+                  >
+                    {q}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Uploaded Documents */}
         <div className="bg-gray-50/80 rounded-xl p-3.5">
           <h3 className="text-xs font-semibold text-indigo-500 uppercase tracking-wider mb-2.5">