feat(rag): PDF/docx ingest + chat citations

- Upload endpoint (base64 JSON, no multipart dep): extracts text from
  pdf/docx/txt/md via pypdf + python-docx, then runs the existing
  chunk/embed pipeline. Documents page uploads files straight through.
- Citations: the chat stream emits an SSE `sources` event listing the
  documents that fed the answer; the UI shows them as chips under the reply.
- Deps: pypdf, python-docx (both pure-Python, Windows-safe).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

interface/web/src/Chatbot.jsx

@@ -215,6 +215,18 @@ export function Chatbot({ conversationId, setConversationId, onConversationChang
               pendingEventType = null;
               continue;
             }
+            if (pendingEventType === "sources") {
+              try {
+                const src = JSON.parse(payload).sources;
+                setMessages(prev => {
+                  const updated = [...prev];
+                  updated[assistantIndex] = { ...updated[assistantIndex], sources: src };
+                  return updated;
+                });
+              } catch { /* ignore */ }
+              pendingEventType = null;
+              continue;
+            }
             if (pendingEventType === "done") {
               // Answer is complete; re-enable input while the backend finishes
               // slow post-processing (title, memory) on the still-open stream.
@@ -526,6 +538,16 @@ export function Chatbot({ conversationId, setConversationId, onConversationChang
                       : <span style={{ color: "#aaa" }}>Thinking...</span>
                   }
                 </div>
+                {msg.sources && msg.sources.length > 0 && (
+                  <div style={{ marginTop: "0.35rem", display: "flex", flexWrap: "wrap", gap: "0.35rem", alignItems: "center" }}>
+                    <span style={{ fontSize: "0.7rem", color: "#777" }}>Sources:</span>
+                    {msg.sources.map((s, i) => (
+                      <span key={i} style={{ fontSize: "0.72rem", color: "#8ab4ff", background: "#1a2433", border: "1px solid #2a3a52", borderRadius: "6px", padding: "0.1rem 0.45rem" }}>
+                        📄 {s}
+                      </span>
+                    ))}
+                  </div>
+                )}
                 {msg.content && editingIdx !== idx && (
                   <div style={{ display: "flex", gap: "0.25rem", marginTop: "0.25rem" }}>
                     <button

interface/web/src/Documents.jsx

@@ -27,16 +27,37 @@ export function Documents() {
 
   useEffect(() => { load(); }, []);
 
+  // Files (pdf/docx/txt/md) upload straight to the server, which extracts the
+  // text. Base64 in JSON — no multipart dependency.
   const onFile = (e) => {
     const file = e.target.files?.[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      setContent(String(reader.result || ""));
-      if (!title.trim()) setTitle(file.name.replace(/\.[^.]+$/, ""));
-    };
-    reader.readAsText(file);
     e.target.value = ""; // allow re-selecting the same file
+    if (!file) return;
+    setBusy(true);
+    setMessage(`Reading ${file.name}…`);
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const b64 = String(reader.result || "").split(",")[1];
+      try {
+        const r = await fetch(`${API_BASE}/documents/upload`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ filename: file.name, data: b64 }),
+        });
+        if (r.ok) {
+          const d = await r.json();
+          setMessage(`Indexed "${d.title}" (${d.chunks} chunk${d.chunks === 1 ? "" : "s"}).`);
+          load();
+        } else {
+          setMessage((await r.json().catch(() => ({}))).detail || "Failed to index file.");
+        }
+      } catch (err) {
+        setMessage(`Error: ${err.message}`);
+      } finally {
+        setBusy(false);
+      }
+    };
+    reader.readAsDataURL(file);
   };
 
   const addDoc = async () => {
@@ -88,10 +109,11 @@ export function Documents() {
       <div style={{ display: "flex", flexDirection: "column", gap: "0.7rem", marginBottom: "1.5rem" }}>
         <input type="text" placeholder="Title" value={title}
           onChange={e => setTitle(e.target.value)} style={input} />
-        <textarea rows={8} placeholder="Paste text here, or load a .txt/.md file below"
+        <textarea rows={8} placeholder="Paste text here, or upload a .pdf/.docx/.txt/.md file below"
           value={content} onChange={e => setContent(e.target.value)} style={input} />
         <div style={{ display: "flex", gap: "0.7rem", alignItems: "center" }}>
-          <input type="file" accept=".txt,.md,.markdown,text/*" onChange={onFile}
+          <input type="file" accept=".pdf,.docx,.txt,.md,.markdown,text/*" onChange={onFile} disabled={busy}
+            title="Upload a file — text extracted server-side"
             style={{ color: "#aaa", flex: 1 }} />
           <button onClick={addDoc} disabled={busy}
             style={{ padding: "0.9rem 1.5rem", background: busy ? "#555" : "#007acc", color: "#fff", border: "none", borderRadius: "8px", cursor: busy ? "default" : "pointer" }}>