feat: streaming + multi-turn + view source + doc-scoped + UX fixes

- Streaming: SSE consumer hits /ask_smart with stream=true, tokens
fill the answer incrementally; spinner clears as soon as first
token arrives
- Multi-turn: last 5 successful Q→A pairs sent as `history` so the
model can resolve "and the third one?" / pronoun references
- View source modal: clicking a source chip opens a drawer with the
full markdown of the doc (rendered via react-markdown with the
same atelier styles)
- Doc-scoped: pinnedDocId on conversation; pinning an entry from the
Documents page opens a new scoped conversation, follow-ups go to
/ask (retrieval bypass). Composer shows a removable "📌 scoped"
chip and adapts its placeholder
- Inline citations: [1] [2] markers in the answer become clickable
badges that open the source drawer
- Reject UX: in `rejected_low_similarity` the source list is
re-labelled "Closest matches · all below similarity X" and
collapsed by default
- Layout: AppShell locked to viewport (h-screen + overflow-hidden +
min-h-0), Thread bottom-anchored to remove the empty scroll gap
- TopBar: removed Live · Xms and Saved Xs ago chrome

app/documents/page.tsx

@@ -8,18 +8,27 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useChatStore } from "@/lib/chatStore";
 import clsx from "clsx";
 
 const PAGE_SIZE = 50;
 
 export default function DocumentsPage() {
   const qc = useQueryClient();
+  const router = useRouter();
+  const newConversationPinned = useChatStore((s) => s.newConversationPinned);
   const [filter, setFilter] = useState("");
   const [page, setPage] = useState(0);
   const [confirmDelete, setConfirmDelete] = useState<DocumentMeta | null>(null);
   const [reindexResult, setReindexResult] = useState<ReindexResponse | null>(null);
   const [showAdd, setShowAdd] = useState(false);
 
+  const handleAskAbout = (d: DocumentMeta) => {
+    newConversationPinned(d.doc_id, d.name);
+    router.push("/");
+  };
+
   const { data, isLoading, error } = useQuery({
     queryKey: ["documents"],
     queryFn: () => api.listDocuments(),
@@ -193,7 +202,7 @@ export default function DocumentsPage() {
                 >
                   <div className="min-w-0 flex-1">
                     <div className="text-body-strong text-ink truncate">
-                      {d.name}
+                      {d.name.replace(/_\d{6,}$/, "")}
                     </div>
                     <div className="flex items-center gap-2.5 mt-0.5 text-micro text-ink-50 font-mono uppercase tracking-[0.10em]">
                       <span className="truncate">{d.doc_id}</span>
@@ -205,6 +214,14 @@ export default function DocumentsPage() {
                       </span>
                     </div>
                   </div>
+                  <button
+                    onClick={() => handleAskAbout(d)}
+                    className="hidden sm:inline-flex text-caption text-amber hover:bg-amber/10 px-3 py-1.5 rounded-pill transition-colors"
+                    style={{ boxShadow: "0 0 0 1px rgba(255,181,69,0.32)" }}
+                    title="Open a new conversation scoped to this doc"
+                  >
+                    Ask about this →
+                  </button>
                   <button
                     onClick={() => setConfirmDelete(d)}
                     className="opacity-0 group-hover:opacity-100 transition-opacity text-caption text-status-err hover:bg-status-err-glow px-2.5 py-1 rounded-md"

app/page.tsx

@@ -1,18 +1,22 @@
 "use client";
 
 import { useRef, useState } from "react";
-import { useMutation } from "@tanstack/react-query";
 import { Composer, type ComposerHandle } from "@/components/chat/Composer";
 import { Thread } from "@/components/chat/Thread";
 import { ChatEmpty } from "@/components/chat/Empty";
 import { SettingsDrawer } from "@/components/chat/SettingsDrawer";
+import { SourceDrawer } from "@/components/chat/SourceDrawer";
 import { api, ApiError } from "@/lib/api";
-import { useChatStore } from "@/lib/chatStore";
+import { buildHistory, useChatStore } from "@/lib/chatStore";
 import { useDocumentTitle, useHotkeys } from "@/lib/hooks";
-import type { AskSmartResponse } from "@/lib/types";
+import type { AskSmartResponse, SourceDoc } from "@/lib/types";
 
 export default function HomePage() {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [sourceDrawer, setSourceDrawer] = useState<{
+    doc_id: string;
+    doc_name?: string | null;
+  } | null>(null);
   const composerRef = useRef<ComposerHandle | null>(null);
   const abortRef = useRef<AbortController | null>(null);
 
@@ -25,37 +29,11 @@ export default function HomePage() {
   const conv = useChatStore((s) =>
     s.activeId ? s.conversations[s.activeId] : null
   );
+  const [pending, setPending] = useState(false);
 
-  // Reflect active conversation in the browser tab title
-  useDocumentTitle(
-    conv && conv.turns.length > 0 ? conv.title : null
-  );
+  useDocumentTitle(conv && conv.turns.length > 0 ? conv.title : null);
 
-  const ask = useMutation<
-    AskSmartResponse,
-    unknown,
-    { id: string; question: string; signal: AbortSignal }
-  >({
-    mutationFn: ({ question, signal }) =>
-      api.askSmart({ ...settings, question }, signal),
-    onSuccess: (resp, vars) =>
-      patchTurn(vars.id, { response: resp, pending: false }),
-    onError: (err, vars) => {
-      // If we explicitly aborted, surface a soft refusal instead of a server error
-      if ((err as { name?: string })?.name === "AbortError") {
-        patchTurn(vars.id, {
-          error: { status: 0, message: "Request stopped." },
-          pending: false,
-        });
-        return;
-      }
-      const status = err instanceof ApiError ? err.status : 0;
-      const message = err instanceof Error ? err.message : String(err);
-      patchTurn(vars.id, { error: { status, message }, pending: false });
-    },
-  });
-
-  const handleAsk = (q: string) => {
+  const handleAsk = async (q: string) => {
     const id =
       typeof crypto !== "undefined" && crypto.randomUUID
         ? crypto.randomUUID()
@@ -68,12 +46,132 @@ export default function HomePage() {
     });
     const ctrl = new AbortController();
     abortRef.current = ctrl;
-    ask.mutate({ id, question: q, signal: ctrl.signal });
+    setPending(true);
+
+    // Pinned-doc path: classic /ask, single-shot (retrieval bypass).
+    // The backend /ask doesn't return source_docs, so we synthesize one from
+    // the pinned doc to keep the UI consistent.
+    const pinnedDocId = conv?.pinnedDocId ?? null;
+    const pinnedDocName = conv?.pinnedDocName ?? null;
+
+    try {
+      if (pinnedDocId) {
+        const res = await api.ask(
+          {
+            doc_id: pinnedDocId,
+            question: q,
+            scaler: settings.scaler,
+            bias_scaler: settings.bias_scaler,
+            max_new_tokens: settings.max_new_tokens,
+          },
+          ctrl.signal
+        );
+        const synthetic: AskSmartResponse = {
+          answer: res.answer,
+          source_docs: [
+            {
+              doc_id: pinnedDocId,
+              name: pinnedDocName ?? pinnedDocId,
+              similarity: 1.0,
+            },
+          ],
+          _grounding_status: "answered",
+          _top_similarity: 1.0,
+          _threshold: 0,
+          retrieve_seconds: 0,
+          inference_seconds: res.elapsed_seconds,
+          total_seconds: res.elapsed_seconds,
+        };
+        patchTurn(id, { response: synthetic, pending: false });
+      } else {
+        // Streaming path via SSE — incrementally fill in the response.
+        const acc: AskSmartResponse = {
+          answer: "",
+          source_docs: [],
+          _grounding_status: "answered",
+          _top_similarity: 0,
+          _threshold: settings.similarity_threshold,
+          retrieve_seconds: 0,
+          inference_seconds: 0,
+          total_seconds: 0,
+        };
+        // First, expose an empty response object so streamed tokens have a
+        // place to land (and the spinner can hide as soon as first token arrives).
+        patchTurn(id, { response: { ...acc }, pending: true });
+
+        await api.askSmartStream(
+          {
+            ...settings,
+            question: q,
+            history: buildHistory(conv),
+          },
+          (evt) => {
+            if (evt.event === "status") {
+              // We currently don't surface status text; could add later.
+              return;
+            }
+            if (evt.event === "sources") {
+              acc.source_docs = evt.data.source_docs ?? [];
+              if (typeof evt.data._top_similarity === "number")
+                acc._top_similarity = evt.data._top_similarity;
+              if (typeof evt.data._top_rerank_score === "number")
+                acc._top_rerank_score = evt.data._top_rerank_score;
+              if (typeof evt.data._anchor_score === "number")
+                acc._anchor_score = evt.data._anchor_score;
+              if (typeof evt.data._corpus_relevance === "number")
+                acc._corpus_relevance = evt.data._corpus_relevance;
+              if (typeof evt.data._threshold === "number")
+                acc._threshold = evt.data._threshold;
+              patchTurn(id, { response: { ...acc } });
+              return;
+            }
+            if (evt.event === "token") {
+              acc.answer += evt.data.text;
+              patchTurn(id, { response: { ...acc } });
+              return;
+            }
+            if (evt.event === "rejected") {
+              patchTurn(id, { response: evt.data, pending: false });
+              return;
+            }
+            if (evt.event === "done") {
+              patchTurn(id, { response: evt.data, pending: false });
+              return;
+            }
+            if (evt.event === "error") {
+              patchTurn(id, {
+                error: { status: evt.data.status, message: evt.data.message },
+                pending: false,
+              });
+              return;
+            }
+          },
+          ctrl.signal
+        );
+        // If stream closed without explicit done/error, mark not pending.
+        patchTurn(id, { pending: false });
+      }
+    } catch (err: unknown) {
+      if ((err as { name?: string })?.name === "AbortError") {
+        patchTurn(id, {
+          error: { status: 0, message: "Request stopped." },
+          pending: false,
+        });
+      } else {
+        const status = err instanceof ApiError ? err.status : 0;
+        const message = err instanceof Error ? err.message : String(err);
+        patchTurn(id, { error: { status, message }, pending: false });
+      }
+    } finally {
+      abortRef.current = null;
+      setPending(false);
+    }
   };
 
   const handleStop = () => {
     abortRef.current?.abort();
     abortRef.current = null;
+    setPending(false);
   };
 
   const handleClear = () => {
@@ -81,6 +179,10 @@ export default function HomePage() {
     if (confirm("Clear this conversation?")) clearActive();
   };
 
+  const openSource = (doc: SourceDoc) => {
+    setSourceDrawer({ doc_id: doc.doc_id, doc_name: doc.name });
+  };
+
   // Global keyboard shortcuts
   useHotkeys({
     "mod+k": (e) => {
@@ -101,13 +203,17 @@ export default function HomePage() {
 
   return (
     <div className="flex-1 flex flex-col min-h-0 relative">
-      {isEmpty ? <ChatEmpty onAsk={handleAsk} /> : <Thread />}
+      {isEmpty ? (
+        <ChatEmpty onAsk={handleAsk} />
+      ) : (
+        <Thread onOpenSource={openSource} />
+      )}
 
       <Composer
         ref={composerRef}
         onSubmit={handleAsk}
         onStop={handleStop}
-        pending={ask.isPending}
+        pending={pending}
         onOpenSettings={() => setSettingsOpen(true)}
         onClear={handleClear}
       />
@@ -116,6 +222,12 @@ export default function HomePage() {
         open={settingsOpen}
         onClose={() => setSettingsOpen(false)}
       />
+      <SourceDrawer
+        open={!!sourceDrawer}
+        docId={sourceDrawer?.doc_id ?? null}
+        docName={sourceDrawer?.doc_name ?? null}
+        onClose={() => setSourceDrawer(null)}
+      />
     </div>
   );
 }

components/chat/AppShell.tsx

@@ -32,17 +32,17 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   }, [pathname, hydrated, conversations, activeId, newConversation]);
 
   return (
-    <div className="relative min-h-screen flex flex-col">
+    <div className="relative h-screen flex flex-col overflow-hidden">
       {/* Atmospheric background — fixed, behind everything */}
       <Aurora />
 
       <TopBar />
 
-      <div className="relative z-10 flex-1 flex overflow-hidden">
+      <div className="relative z-10 flex-1 flex overflow-hidden min-h-0">
         <Sidebar />
         <main
           className={clsx(
-            "flex-1 flex flex-col min-w-0 transition-[margin] duration-300 ease-atelier",
+            "flex-1 flex flex-col min-w-0 min-h-0 transition-[margin] duration-300 ease-atelier",
             sidebarOpen ? "md:ml-0" : "md:ml-0"
           )}
         >

components/chat/Composer.tsx

@@ -24,6 +24,10 @@ export const Composer = forwardRef<
   const [value, setValue] = useState("");
   const taRef = useRef<HTMLTextAreaElement | null>(null);
   const settings = useChatStore((s) => s.settings);
+  const conv = useChatStore((s) => (s.activeId ? s.conversations[s.activeId] : null));
+  const pinDoc = useChatStore((s) => s.pinDoc);
+  const pinnedDocId = conv?.pinnedDocId ?? null;
+  const pinnedDocName = conv?.pinnedDocName ?? null;
 
   useImperativeHandle(ref, () => ({
     focus: () => taRef.current?.focus(),
@@ -56,21 +60,53 @@ export const Composer = forwardRef<
   return (
     <div className="sticky bottom-0 z-20 px-4 sm:px-6 pt-4 pb-5 bg-gradient-to-t from-canvas-deep via-canvas-deep/85 to-transparent">
       <div className="max-w-[920px] mx-auto">
-        {/* Settings diff chip — surfaces non-default params */}
-        {diff.length > 0 && (
-          <button
-            onClick={onOpenSettings}
-            className="mb-2 inline-flex items-center gap-1.5 px-3 py-1 rounded-pill text-micro font-mono text-amber hover:bg-amber/10 transition-colors animate-fade-in"
-            style={{ boxShadow: "0 0 0 1px rgba(255,181,69,0.32)" }}
-            title="Tuned settings — click to edit"
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-              <circle cx="5" cy="5" r="1.4" fill="currentColor" />
-              <circle cx="5" cy="5" r="3.4" stroke="currentColor" strokeWidth="0.9" />
-            </svg>
-            <span>{diff.join(" · ")}</span>
-          </button>
-        )}
+        {/* Active chips: scope (pinned doc) + non-default settings */}
+        <div className="mb-2 flex flex-wrap items-center gap-2">
+          {pinnedDocId && (
+            <span
+              className="inline-flex items-center gap-1.5 pl-3 pr-1.5 py-1 rounded-pill text-micro font-mono text-amber animate-fade-in"
+              style={{
+                background: "rgba(255,181,69,0.10)",
+                boxShadow: "0 0 0 1px rgba(255,181,69,0.42)",
+              }}
+              title={`Scoped to: ${pinnedDocName ?? pinnedDocId}`}
+            >
+              <span>📌 scoped:</span>
+              <span className="text-ink truncate max-w-[280px] normal-case">
+                {(pinnedDocName ?? pinnedDocId).replace(/_\d{6,}$/, "")}
+              </span>
+              <button
+                onClick={() => conv && pinDoc(conv.id, null, null)}
+                className="ml-1 inline-flex items-center justify-center w-5 h-5 rounded-full text-amber hover:bg-amber hover:text-canvas transition-colors"
+                aria-label="Unpin"
+                title="Unpin — return to RAG retrieval"
+              >
+                <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+                  <path
+                    d="m2 2 5 5M7 2l-5 5"
+                    stroke="currentColor"
+                    strokeWidth="1.4"
+                    strokeLinecap="round"
+                  />
+                </svg>
+              </button>
+            </span>
+          )}
+          {diff.length > 0 && (
+            <button
+              onClick={onOpenSettings}
+              className="inline-flex items-center gap-1.5 px-3 py-1 rounded-pill text-micro font-mono text-amber hover:bg-amber/10 transition-colors animate-fade-in"
+              style={{ boxShadow: "0 0 0 1px rgba(255,181,69,0.32)" }}
+              title="Tuned settings — click to edit"
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                <circle cx="5" cy="5" r="1.4" fill="currentColor" />
+                <circle cx="5" cy="5" r="3.4" stroke="currentColor" strokeWidth="0.9" />
+              </svg>
+              <span>{diff.join(" · ")}</span>
+            </button>
+          )}
+        </div>
 
         <div
           className="relative rounded-2xl glass-strong overflow-hidden transition-all duration-200"
@@ -83,7 +119,11 @@ export const Composer = forwardRef<
             onKeyDown={onKey}
             disabled={pending}
             rows={1}
-            placeholder="Ask anything about Etiya BSS…"
+            placeholder={
+              pinnedDocId
+                ? `Ask about ${(pinnedDocName ?? "this doc").replace(/_\d{6,}$/, "")}…`
+                : "Ask anything about Etiya BSS…"
+            }
             className="w-full bg-transparent outline-none resize-none px-3 py-2.5 text-body text-ink placeholder:text-ink-30 leading-relaxed scrollbar-none disabled:opacity-60"
             style={{ maxHeight: 200 }}
             aria-label="Question"

components/chat/Message.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import type { ChatTurn } from "@/lib/chatStore";
+import type { SourceDoc } from "@/lib/types";
 import { GroundingPill } from "./GroundingPill";
 import { SourceChips } from "./SourceChips";
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import clsx from "clsx";
 import ReactMarkdown from "react-markdown";
 
@@ -17,10 +18,16 @@ export function UserMessage({ text }: { text: string }) {
   );
 }
 
-export function AssistantMessage({ turn }: { turn: ChatTurn }) {
+export function AssistantMessage({
+  turn,
+  onOpenSource,
+}: {
+  turn: ChatTurn;
+  onOpenSource?: (doc: SourceDoc, index: number) => void;
+}) {
   const r = turn.response;
-  if (!r) return null;
   const [copied, setCopied] = useState(false);
+  if (!r) return null;
 
   const copy = async () => {
     try {
@@ -30,6 +37,54 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
     } catch {}
   };
 
+  const sources = r.source_docs ?? [];
+  const rejected = r._grounding_status === "rejected_low_similarity";
+
+  // Inline citation renderer: replaces [1] [2] markers with clickable badges.
+  // Numbers are 1-indexed against `sources` (clamped to length).
+  const renderWithCitations = (text: string): ReactNode[] => {
+    if (!sources.length || !text) return [text];
+    const out: ReactNode[] = [];
+    const re = /\[(\d{1,3})\]/g;
+    let last = 0;
+    let m: RegExpExecArray | null;
+    let key = 0;
+    while ((m = re.exec(text)) !== null) {
+      const idx = parseInt(m[1], 10);
+      if (idx >= 1 && idx <= sources.length) {
+        if (m.index > last) out.push(text.slice(last, m.index));
+        const doc = sources[idx - 1];
+        out.push(
+          <button
+            key={`cite-${key++}`}
+            onClick={() => onOpenSource?.(doc, idx - 1)}
+            className="inline-flex items-center justify-center align-baseline mx-0.5 px-1.5 min-w-[18px] h-[18px] rounded-full bg-amber/15 text-amber text-[11px] font-mono font-semibold hover:bg-amber hover:text-canvas transition-colors"
+            title={`View source: ${doc.name}`}
+          >
+            {idx}
+          </button>
+        );
+        last = m.index + m[0].length;
+      }
+    }
+    if (last < text.length) out.push(text.slice(last));
+    return out.length ? out : [text];
+  };
+
+  // Wrap a markdown children array, expanding string nodes through citation regex.
+  const transformChildren = (children: ReactNode): ReactNode => {
+    if (typeof children === "string") return renderWithCitations(children);
+    if (Array.isArray(children))
+      return children.map((c, i) =>
+        typeof c === "string" ? (
+          <span key={i}>{renderWithCitations(c)}</span>
+        ) : (
+          c
+        )
+      );
+    return children;
+  };
+
   return (
     <div className="flex items-start gap-3 animate-fade-up">
       <Avatar />
@@ -46,15 +101,15 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
               {copied ? (
                 <>
                   <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                    <path d="M2 6 4.5 8.5 9 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M2 6 4.5 8.5 9 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                   </svg>
                   copied
                 </>
               ) : (
                 <>
                   <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                    <rect x="2" y="2" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2"/>
-                    <rect x="3.5" y="3.5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2"/>
+                    <rect x="2" y="2" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2" />
+                    <rect x="3.5" y="3.5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2" />
                   </svg>
                   copy
                 </>
@@ -68,7 +123,7 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
           <ReactMarkdown
             components={{
               p: ({ children }) => (
-                <p className="mb-3 last:mb-0">{children}</p>
+                <p className="mb-3 last:mb-0">{transformChildren(children)}</p>
               ),
               ul: ({ children }) => (
                 <ul className="list-disc pl-5 mb-3 last:mb-0 space-y-1 marker:text-amber/70">
@@ -80,7 +135,7 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
                   {children}
                 </ol>
               ),
-              li: ({ children }) => <li className="pl-1">{children}</li>,
+              li: ({ children }) => <li className="pl-1">{transformChildren(children)}</li>,
               strong: ({ children }) => (
                 <strong className="font-semibold text-ink">{children}</strong>
               ),
@@ -110,14 +165,10 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
                 <h3 className="text-display-sm mt-4 mb-2">{children}</h3>
               ),
               h2: ({ children }) => (
-                <h3 className="text-body-strong text-ink mt-3 mb-1.5">
-                  {children}
-                </h3>
+                <h3 className="text-body-strong text-ink mt-3 mb-1.5">{children}</h3>
               ),
               h3: ({ children }) => (
-                <h4 className="text-body-strong text-ink mt-3 mb-1.5">
-                  {children}
-                </h4>
+                <h4 className="text-body-strong text-ink mt-3 mb-1.5">{children}</h4>
               ),
               a: ({ href, children }) => (
                 <a
@@ -137,9 +188,7 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
                   {children}
                 </blockquote>
               ),
-              hr: () => (
-                <hr className="my-4 border-0 h-px bg-glass-border" />
-              ),
+              hr: () => <hr className="my-4 border-0 h-px bg-glass-border" />,
             }}
           >
             {r.answer}
@@ -147,9 +196,16 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
         </div>
 
         {/* Sources */}
-        {r.source_docs?.length > 0 && <SourceChips docs={r.source_docs} />}
+        {sources.length > 0 && (
+          <SourceChips
+            docs={sources}
+            onOpenSource={onOpenSource}
+            rejected={rejected}
+            threshold={r._threshold}
+          />
+        )}
 
-        {/* Spec sheet — collapsed by default, only `total` visible */}
+        {/* Spec sheet — collapsed by default */}
         <SpecSheet response={r} />
       </article>
     </div>

components/chat/Sidebar.tsx

@@ -58,8 +58,8 @@ export function Sidebar() {
           "fixed top-14 bottom-0 left-0 w-[280px]",
           "transition-transform duration-300 ease-atelier",
           sidebarOpen ? "translate-x-0" : "-translate-x-full",
-          // Desktop: in flow, width animates
-          "md:sticky md:top-14 md:h-[calc(100vh-3.5rem)] md:bottom-auto",
+          // Desktop: in flow, fills row (which is locked to viewport - topbar)
+          "md:relative md:top-auto md:bottom-auto md:h-full md:self-stretch",
           "md:translate-x-0 md:transition-[width,opacity] md:duration-300",
           sidebarOpen
             ? "md:w-[280px] md:opacity-100"

components/chat/SourceChips.tsx

@@ -4,75 +4,186 @@ import type { SourceDoc } from "@/lib/types";
 import { useState } from "react";
 import clsx from "clsx";
 
-export function SourceChips({ docs }: { docs: SourceDoc[] }) {
-  const [expanded, setExpanded] = useState<string | null>(null);
+/**
+ * Click a chip → opens View source drawer (via `onOpenSource`).
+ * In rejected state, the heading switches to "Closest matches (below threshold)"
+ * and the list collapses by default.
+ */
+export function SourceChips({
+  docs,
+  onOpenSource,
+  rejected = false,
+  threshold,
+}: {
+  docs: SourceDoc[];
+  onOpenSource?: (doc: SourceDoc, index: number) => void;
+  rejected?: boolean;
+  threshold?: number;
+}) {
+  const [showDetails, setShowDetails] = useState<string | null>(null);
+  const [open, setOpen] = useState(!rejected); // collapsed by default in reject path
   if (!docs?.length) return null;
 
+  const heading = rejected ? "Closest matches" : "Sources";
+  const tail = rejected
+    ? threshold !== undefined
+      ? ` · all below similarity ${threshold.toFixed(2)}`
+      : " · below threshold"
+    : "";
+
   return (
     <div className="mt-4 flex flex-col gap-2">
-      <div className="text-micro uppercase tracking-[0.12em] text-ink-50 font-mono">
-        Sources · {docs.length}
-      </div>
-      <ul className="flex flex-col gap-1.5">
-        {docs.map((d) => {
-          const isOpen = expanded === d.doc_id;
-          const sim = d.similarity ?? d.dense_similarity ?? 0;
-          return (
-            <li key={d.doc_id}>
-              <button
-                onClick={() => setExpanded(isOpen ? null : d.doc_id)}
-                className={clsx(
-                  "w-full text-left rounded-md px-3 py-2 transition-all",
-                  "flex items-center gap-3",
-                  isOpen
-                    ? "bg-glass-stronger"
-                    : "bg-glass hover:bg-glass-stronger"
-                )}
-                style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.07)" }}
-              >
-                <SimilarityRing value={sim} />
-                <div className="min-w-0 flex-1">
-                  <div className="text-caption-strong text-ink truncate">
-                    {cleanDocName(d.name)}
-                  </div>
-                  <div className="text-micro font-mono text-ink-50 truncate">
-                    {d.doc_id}
-                  </div>
-                </div>
-                <span
-                  className={clsx(
-                    "text-ink-50 transition-transform shrink-0",
-                    isOpen && "rotate-180"
-                  )}
-                >
-                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                    <path
-                      d="m3 4 2.5 2.5L8 4"
-                      stroke="currentColor"
-                      strokeWidth="1.4"
-                      strokeLinecap="round"
-                    />
-                  </svg>
-                </span>
-              </button>
-              {isOpen && (
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="w-full flex items-center justify-between text-micro uppercase tracking-[0.12em] text-ink-50 font-mono hover:text-ink transition-colors"
+        aria-expanded={open}
+      >
+        <span>
+          {heading} · {docs.length}
+          <span className="text-ink-30">{tail}</span>
+        </span>
+        <span
+          className={clsx(
+            "transition-transform inline-block",
+            open && "rotate-180"
+          )}
+          aria-hidden
+        >
+          <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+            <path
+              d="m2 3 2.5 2.5L7 3"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            />
+          </svg>
+        </span>
+      </button>
+
+      {open && (
+        <ul className="flex flex-col gap-1.5 animate-fade-in">
+          {docs.map((d, i) => {
+            const showsScores = showDetails === d.doc_id;
+            const sim = d.similarity ?? d.dense_similarity ?? 0;
+            return (
+              <li key={d.doc_id} className="flex flex-col gap-1.5">
                 <div
-                  className="mt-1.5 px-3 py-3 rounded-md bg-canvas-deep/70 grid grid-cols-3 gap-3 animate-fade-in"
-                  style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.06)" }}
+                  className="rounded-md transition-all flex items-stretch overflow-hidden"
+                  style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.07)" }}
                 >
-                  <Metric label="Cosine" value={fmt(d.similarity)} />
-                  <Metric label="Dense" value={fmt(d.dense_similarity)} />
-                  <Metric label="Rerank" value={fmt(d.rerank_score, 2)} />
+                  <button
+                    onClick={() => onOpenSource?.(d, i)}
+                    className="flex items-center gap-3 flex-1 min-w-0 px-3 py-2 text-left bg-glass hover:bg-glass-stronger transition-colors"
+                    title="View source"
+                  >
+                    <CitationBadge index={i + 1} sim={sim} />
+                    <div className="min-w-0 flex-1">
+                      <div className="text-caption-strong text-ink truncate">
+                        {cleanDocName(d.name)}
+                      </div>
+                      <div className="text-micro font-mono text-ink-50 truncate">
+                        {d.doc_id}
+                      </div>
+                    </div>
+                  </button>
+                  <button
+                    onClick={() =>
+                      setShowDetails(showsScores ? null : d.doc_id)
+                    }
+                    className={clsx(
+                      "px-2.5 transition-colors border-l",
+                      "border-glass-border",
+                      showsScores
+                        ? "bg-glass-stronger text-ink"
+                        : "bg-glass text-ink-50 hover:text-ink hover:bg-glass-stronger"
+                    )}
+                    title={showsScores ? "Hide scores" : "Show scores"}
+                    aria-label="Toggle scores"
+                  >
+                    <span
+                      className={clsx(
+                        "inline-block transition-transform",
+                        showsScores && "rotate-180"
+                      )}
+                      aria-hidden
+                    >
+                      <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+                        <path
+                          d="m3 4 2.5 2.5L8 4"
+                          stroke="currentColor"
+                          strokeWidth="1.4"
+                          strokeLinecap="round"
+                        />
+                      </svg>
+                    </span>
+                  </button>
                 </div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
+                {showsScores && (
+                  <div
+                    className="px-3 py-3 rounded-md bg-canvas-deep/70 grid grid-cols-3 gap-3 animate-fade-in"
+                    style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.06)" }}
+                  >
+                    <Metric label="Cosine" value={fmt(d.similarity)} />
+                    <Metric label="Dense" value={fmt(d.dense_similarity)} />
+                    <Metric label="Rerank" value={fmt(d.rerank_score, 2)} />
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
     </div>
   );
 }
 
+function CitationBadge({
+  index,
+  sim,
+}: {
+  index: number;
+  sim: number;
+}) {
+  const v = Math.max(0, Math.min(1, sim || 0));
+  const tone =
+    v >= 0.7 ? "rgb(93, 214, 168)" : v >= 0.45 ? "rgb(255, 181, 69)" : "rgba(245, 243, 236, 0.4)";
+  const r = 9;
+  const C = 2 * Math.PI * r;
+  const dash = C * v;
+  return (
+    <span className="relative shrink-0 inline-flex items-center justify-center">
+      <svg width="22" height="22" viewBox="0 0 22 22">
+        <circle
+          cx="11"
+          cy="11"
+          r={r}
+          stroke="rgba(255,255,255,0.10)"
+          strokeWidth="2"
+          fill="none"
+        />
+        <circle
+          cx="11"
+          cy="11"
+          r={r}
+          stroke={tone}
+          strokeWidth="2"
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={`${dash} ${C - dash}`}
+          transform="rotate(-90 11 11)"
+          style={{ transition: "stroke-dasharray 0.4s cubic-bezier(0.16,1,0.3,1)" }}
+        />
+      </svg>
+      <span
+        className="absolute inset-0 flex items-center justify-center text-[10px] font-mono font-semibold text-ink"
+        aria-label={`Source ${index}`}
+      >
+        {index}
+      </span>
+    </span>
+  );
+}
+
 function Metric({ label, value }: { label: string; value: string }) {
   return (
     <div>
@@ -89,58 +200,7 @@ function fmt(n: number | undefined | null, digits = 3): string {
   return n.toFixed(digits);
 }
 
-/**
- * Strip the trailing `_<hash>` that the backend appends when files share a name.
- * Display the human-readable title; the full hash is preserved in doc_id below.
- */
+/** Strip backend's `_<hash>` suffix on doc names. */
 function cleanDocName(name: string): string {
   return name.replace(/_\d{6,}$/, "");
 }
-
-function SimilarityRing({ value }: { value: number }) {
-  const v = Math.max(0, Math.min(1, value || 0));
-  const tone =
-    v >= 0.7
-      ? "rgb(93, 214, 168)"
-      : v >= 0.45
-      ? "rgb(255, 181, 69)"
-      : "rgba(245, 243, 236, 0.4)";
-  const r = 9;
-  const C = 2 * Math.PI * r;
-  const dash = C * v;
-  return (
-    <svg width="22" height="22" viewBox="0 0 22 22" className="shrink-0">
-      <circle
-        cx="11"
-        cy="11"
-        r={r}
-        stroke="rgba(255,255,255,0.10)"
-        strokeWidth="2"
-        fill="none"
-      />
-      <circle
-        cx="11"
-        cy="11"
-        r={r}
-        stroke={tone}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-        strokeDasharray={`${dash} ${C - dash}`}
-        transform="rotate(-90 11 11)"
-        style={{ transition: "stroke-dasharray 0.4s cubic-bezier(0.16,1,0.3,1)" }}
-      />
-      <text
-        x="11"
-        y="13.5"
-        textAnchor="middle"
-        fontSize="7"
-        fill="rgba(245, 243, 236, 0.85)"
-        fontFamily="var(--font-mono), monospace"
-        fontWeight="600"
-      >
-        {Math.round(v * 100)}
-      </text>
-    </svg>
-  );
-}

components/chat/SourceDrawer.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { api } from "@/lib/api";
+import { useChatStore } from "@/lib/chatStore";
+import { useQuery } from "@tanstack/react-query";
+import clsx from "clsx";
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+
+/**
+ * View-source drawer. Shown when the user clicks a source chip or an inline
+ * citation. Renders the full markdown of a doc, plus the option to "Pin this
+ * source" — which scopes follow-up questions to that doc via /ask.
+ */
+export function SourceDrawer({
+  open,
+  docId,
+  docName,
+  onClose,
+}: {
+  open: boolean;
+  docId: string | null;
+  docName?: string | null;
+  onClose: () => void;
+}) {
+  const activeId = useChatStore((s) => s.activeId);
+  const conv = useChatStore((s) => (s.activeId ? s.conversations[s.activeId] : null));
+  const pinDoc = useChatStore((s) => s.pinDoc);
+  const newConversationPinned = useChatStore((s) => s.newConversationPinned);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["doc-content", docId],
+    queryFn: () => api.getDocumentContent(docId as string),
+    enabled: open && !!docId,
+    staleTime: 60_000,
+  });
+
+  // ESC to close
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  const isPinned = conv?.pinnedDocId === docId;
+  const cleanName = (n: string | null | undefined) =>
+    (n ?? "").replace(/_\d{6,}$/, "");
+  const displayName = data?.name ? cleanName(data.name) : cleanName(docName);
+
+  const handlePin = () => {
+    if (!docId || !activeId) return;
+    if (isPinned) pinDoc(activeId, null, null);
+    else pinDoc(activeId, docId, data?.name ?? docName ?? null);
+  };
+
+  const handleNewScoped = () => {
+    if (!docId) return;
+    newConversationPinned(docId, data?.name ?? docName ?? "");
+    onClose();
+  };
+
+  return (
+    <>
+      {/* Scrim */}
+      <div
+        className={clsx(
+          "fixed inset-0 z-40 bg-canvas-deep/60 backdrop-blur-sm transition-opacity duration-300",
+          open ? "opacity-100" : "opacity-0 pointer-events-none"
+        )}
+        onClick={onClose}
+        aria-hidden
+      />
+      <aside
+        className={clsx(
+          "fixed top-0 right-0 z-50 h-screen w-full sm:w-[560px] glass-strong",
+          "flex flex-col transition-transform duration-300 ease-atelier",
+          open ? "translate-x-0" : "translate-x-full"
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Source document"
+      >
+        {/* Header */}
+        <header className="px-6 py-5 border-b border-glass-border">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="text-micro uppercase tracking-[0.16em] text-ink-50 font-mono mb-1">
+                Source · view
+              </div>
+              <h2
+                className="text-display-sm text-ink truncate"
+                title={displayName ?? ""}
+              >
+                {displayName || "Loading…"}
+              </h2>
+              {docId && (
+                <div className="text-micro font-mono text-ink-50 mt-0.5 truncate">
+                  {docId}
+                </div>
+              )}
+            </div>
+            <button
+              onClick={onClose}
+              className="shrink-0 p-2 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
+              aria-label="Close"
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="m3 3 8 8M11 3l-8 8"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+
+          {/* Pin / scope actions */}
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <button
+              onClick={handlePin}
+              disabled={!activeId || !docId}
+              className={clsx(
+                "text-caption px-3 py-1.5 rounded-pill transition-colors disabled:opacity-40",
+                isPinned
+                  ? "bg-amber text-canvas hover:bg-amber-soft"
+                  : "bg-glass text-ink hover:bg-glass-stronger"
+              )}
+              style={
+                isPinned
+                  ? undefined
+                  : { boxShadow: "0 0 0 1px rgba(255,255,255,0.10)" }
+              }
+              title={
+                isPinned
+                  ? "Currently pinned — click to unpin"
+                  : "Pin: future questions in this conversation will use only this doc"
+              }
+            >
+              {isPinned ? "✓ Pinned to this conversation" : "Pin to this conversation"}
+            </button>
+            <button
+              onClick={handleNewScoped}
+              disabled={!docId}
+              className="text-caption px-3 py-1.5 rounded-pill bg-glass text-ink hover:bg-glass-stronger transition-colors disabled:opacity-40"
+              style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.10)" }}
+              title="Open a new conversation scoped to this doc"
+            >
+              New scoped conversation →
+            </button>
+          </div>
+        </header>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 py-5">
+          {isLoading && (
+            <div className="text-ink-50 text-shimmer">Loading source…</div>
+          )}
+          {error && (
+            <div
+              className="p-4 rounded-md"
+              style={{
+                background: "rgba(255, 122, 122, 0.06)",
+                boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
+              }}
+            >
+              <div className="text-caption-strong text-status-err">
+                Couldn&apos;t load source
+              </div>
+              <div className="text-caption text-ink-70 mt-1">
+                {error instanceof Error ? error.message : String(error)}
+              </div>
+            </div>
+          )}
+          {data && (
+            <article className="markdown-body text-ink leading-[1.7]">
+              <ReactMarkdown
+                components={{
+                  p: ({ children }) => <p className="mb-3 last:mb-0">{children}</p>,
+                  h1: ({ children }) => (
+                    <h2 className="text-display-md text-ink mt-6 mb-3">{children}</h2>
+                  ),
+                  h2: ({ children }) => (
+                    <h3 className="text-display-sm text-ink mt-5 mb-2.5">{children}</h3>
+                  ),
+                  h3: ({ children }) => (
+                    <h4 className="text-body-strong text-ink mt-4 mb-2">{children}</h4>
+                  ),
+                  ul: ({ children }) => (
+                    <ul className="list-disc pl-5 mb-3 space-y-1 marker:text-amber/70">
+                      {children}
+                    </ul>
+                  ),
+                  ol: ({ children }) => (
+                    <ol className="list-decimal pl-5 mb-3 space-y-1 marker:text-amber/70 marker:font-mono">
+                      {children}
+                    </ol>
+                  ),
+                  strong: ({ children }) => (
+                    <strong className="font-semibold text-ink">{children}</strong>
+                  ),
+                  em: ({ children }) => (
+                    <em className="serif-italic text-amber-soft">{children}</em>
+                  ),
+                  code: ({ children }) => (
+                    <code
+                      className="font-mono text-amber px-1.5 py-0.5 rounded text-[0.92em]"
+                      style={{ background: "rgba(255,181,69,0.10)" }}
+                    >
+                      {children}
+                    </code>
+                  ),
+                  pre: ({ children }) => (
+                    <pre
+                      className="font-mono text-caption p-3 rounded-md overflow-x-auto my-3"
+                      style={{
+                        background: "rgba(0,0,0,0.28)",
+                        boxShadow: "0 0 0 1px rgba(255,255,255,0.06)",
+                      }}
+                    >
+                      {children}
+                    </pre>
+                  ),
+                  a: ({ href, children }) => (
+                    <a
+                      href={href}
+                      className="text-amber underline decoration-amber/40 hover:decoration-amber"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {children}
+                    </a>
+                  ),
+                  hr: () => <hr className="my-5 border-0 h-px bg-glass-border" />,
+                  blockquote: ({ children }) => (
+                    <blockquote className="border-l-2 border-amber/50 pl-4 my-3 text-ink-70 serif-italic">
+                      {children}
+                    </blockquote>
+                  ),
+                }}
+              >
+                {data.text}
+              </ReactMarkdown>
+            </article>
+          )}
+        </div>
+
+        {data && (
+          <footer className="px-6 py-3 border-t border-glass-border text-micro font-mono uppercase tracking-[0.12em] text-ink-50">
+            {data.length_chars.toLocaleString()} chars
+            {data.created_at
+              ? ` · ${new Date(data.created_at * 1000).toLocaleDateString()}`
+              : ""}
+          </footer>
+        )}
+      </aside>
+    </>
+  );
+}

components/chat/Thread.tsx

@@ -2,31 +2,46 @@
 
 import { useEffect, useRef } from "react";
 import { useChatStore } from "@/lib/chatStore";
+import type { SourceDoc } from "@/lib/types";
 import { AssistantMessage, ErrorMessage, UserMessage } from "./Message";
 import { Thinking } from "./Thinking";
 
-export function Thread() {
-  const conv = useChatStore((s) => (s.activeId ? s.conversations[s.activeId] : null));
+export function Thread({
+  onOpenSource,
+}: {
+  onOpenSource?: (doc: SourceDoc, index: number) => void;
+}) {
+  const conv = useChatStore((s) =>
+    s.activeId ? s.conversations[s.activeId] : null
+  );
   const ref = useRef<HTMLDivElement | null>(null);
 
-  // Auto-scroll to bottom on new turns
+  // Auto-scroll to bottom on new turns / when streaming tokens arrive
+  const turns = conv?.turns ?? [];
+  const lastTurn = turns[turns.length - 1];
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
     el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-  }, [conv?.turns.length, conv?.turns[conv.turns.length - 1]?.pending]);
+  }, [
+    turns.length,
+    lastTurn?.pending,
+    lastTurn?.response?.answer?.length,
+  ]);
 
   if (!conv || conv.turns.length === 0) return null;
 
   return (
-    <div ref={ref} className="flex-1 overflow-y-auto">
-      <div className="max-w-[920px] mx-auto px-4 sm:px-6 py-8 space-y-6">
+    <div ref={ref} className="flex-1 overflow-y-auto min-h-0">
+      <div className="min-h-full flex flex-col justify-end max-w-[920px] mx-auto px-4 sm:px-6 py-8 space-y-6">
         {conv.turns.map((t) => (
           <div key={t.id} className="space-y-4">
             <UserMessage text={t.question} />
-            {t.pending && <Thinking />}
+            {t.pending && !t.response?.answer && <Thinking />}
             {t.error && <ErrorMessage turn={t} />}
-            {t.response && <AssistantMessage turn={t} />}
+            {t.response && (
+              <AssistantMessage turn={t} onOpenSource={onOpenSource} />
+            )}
           </div>
         ))}
       </div>

components/chat/TopBar.tsx

@@ -1,51 +1,15 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { api } from "@/lib/api";
 import { useChatStore } from "@/lib/chatStore";
-import { relativeTime, useTick } from "@/lib/hooks";
-import clsx from "clsx";
 
 export function TopBar() {
-  const [pulse, setPulse] = useState<"alive" | "down" | "loading">("loading");
-  const [pingMs, setPingMs] = useState<number | null>(null);
   const toggleSidebar = useChatStore((s) => s.toggleSidebar);
-  const syncStatus = useChatStore((s) => s.syncStatus);
-  const hydrated = useChatStore((s) => s.hydrated);
-  const lastSavedAt = useChatStore((s) => s.lastSavedAt);
-  useTick(15_000);
-
-  useEffect(() => {
-    let alive = true;
-    const tick = async () => {
-      const t0 = performance.now();
-      try {
-        const r = await api.ping();
-        const dt = performance.now() - t0;
-        if (alive) {
-          setPulse(r.status === "alive" ? "alive" : "down");
-          setPingMs(dt);
-        }
-      } catch {
-        if (alive) {
-          setPulse("down");
-          setPingMs(null);
-        }
-      }
-    };
-    tick();
-    const id = setInterval(tick, 30_000);
-    return () => {
-      alive = false;
-      clearInterval(id);
-    };
-  }, []);
 
   return (
     <header className="sticky top-0 z-30 h-14 flex items-center backdrop-blur-nav bg-canvas-deep/60 border-b border-glass-border">
       <div className="container-app flex items-center justify-between w-full">
-        {/* Left: brand + sidebar toggle (always visible) */}
+        {/* Left: brand + sidebar toggle */}
         <div className="flex items-center gap-3">
           <button
             onClick={toggleSidebar}
@@ -75,109 +39,11 @@ export function TopBar() {
             </div>
           </Link>
         </div>
-
-        {/* Right: sync + status pulse */}
-        <div className="flex items-center gap-2">
-          <SyncBadge
-            status={syncStatus}
-            hydrated={hydrated}
-            lastSavedAt={lastSavedAt}
-          />
-          <span
-            className="hidden sm:flex items-center gap-2 rounded-pill px-3 py-1.5 bg-glass"
-            style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.08)" }}
-            aria-live="polite"
-          >
-            <span
-              className={clsx(
-                "inline-block w-1.5 h-1.5 rounded-full transition-colors",
-                pulse === "alive"
-                  ? "bg-status-ok shadow-[0_0_8px_rgba(93,214,168,0.8)] animate-pulse-soft"
-                  : pulse === "down"
-                  ? "bg-status-err"
-                  : "bg-ink-50"
-              )}
-            />
-            <span className="text-micro text-ink-70 font-mono uppercase tracking-[0.15em]">
-              {pulse === "alive"
-                ? `live · ${pingMs?.toFixed(0) ?? "—"}ms`
-                : pulse === "down"
-                ? "down"
-                : "···"}
-            </span>
-          </span>
-        </div>
       </div>
     </header>
   );
 }
 
-function SyncBadge({
-  status,
-  hydrated,
-  lastSavedAt,
-}: {
-  status: "idle" | "saving" | "error";
-  hydrated: boolean;
-  lastSavedAt: number;
-}) {
-  // Compose label/dot based on state. Idle + recent save = "saved Xs ago"
-  // for ~30s, then collapse to invisible.
-  const showSavedAgo =
-    hydrated &&
-    status === "idle" &&
-    lastSavedAt > 0 &&
-    Date.now() - lastSavedAt < 5 * 60_000;
-
-  const visible =
-    !hydrated || status === "saving" || status === "error" || showSavedAgo;
-  if (!visible) return null;
-
-  const tone =
-    status === "error"
-      ? "text-status-err"
-      : status === "saving" || !hydrated
-      ? "text-amber"
-      : "text-ink-50";
-
-  const dotCls =
-    status === "error"
-      ? "bg-status-err"
-      : status === "saving" || !hydrated
-      ? "bg-amber animate-pulse-soft"
-      : "bg-status-ok";
-
-  const label = !hydrated
-    ? "Loading"
-    : status === "saving"
-    ? "Saving"
-    : status === "error"
-    ? "Sync error"
-    : `Saved ${relativeTime(lastSavedAt)}`;
-
-  return (
-    <span
-      className={clsx(
-        "hidden sm:inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1",
-        "text-micro font-mono uppercase tracking-[0.14em] transition-opacity",
-        tone
-      )}
-      title={
-        status === "error"
-          ? "Couldn't save chat history to backend"
-          : status === "saving"
-          ? "Saving chat history…"
-          : !hydrated
-          ? "Loading chat history…"
-          : `Last save: ${new Date(lastSavedAt).toLocaleTimeString()}`
-      }
-    >
-      <span className={clsx("inline-block w-1 h-1 rounded-full", dotCls)} />
-      {label}
-    </span>
-  );
-}
-
 function Mark() {
   return (
     <span

lib/api.ts

@@ -4,9 +4,13 @@
  */
 
 import type {
+  AskRequest,
+  AskResponse,
   AskSmartRequest,
   AskSmartResponse,
+  AskSmartStreamEvent,
   CreateDocumentRequest,
+  DocumentContentResponse,
   DocumentMeta,
   DocumentsListResponse,
   HealthResponse,
@@ -27,8 +31,6 @@ class ApiError extends Error {
 }
 
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
-  // Empty path = upstream root (`/` health). Avoid `/api/proxy/` which Next 15
-  // 308-redirects to `/api/proxy`; hit the no-slash form directly.
   const url = path ? `${PROXY}/${path}` : PROXY;
   const res = await fetch(url, {
     ...init,
@@ -70,6 +72,8 @@ export const api = {
   // ─── Documents ───────────────────────────────────────────────────
   listDocuments: () => request<DocumentsListResponse>("documents"),
   getDocument: (doc_id: string) => request<DocumentMeta>(`documents/${doc_id}`),
+  getDocumentContent: (doc_id: string) =>
+    request<DocumentContentResponse>(`documents/${doc_id}/content`),
   createDocument: (req: CreateDocumentRequest) =>
     request<DocumentMeta>("documents", {
       method: "POST",
@@ -87,4 +91,72 @@ export const api = {
       body: JSON.stringify(req),
       signal,
     }),
+
+  /**
+   * Doc-scoped inference (retrieval bypass) — used when the user pins a
+   * conversation to a single doc.
+   */
+  ask: (req: AskRequest, signal?: AbortSignal) =>
+    request<AskResponse>("ask", {
+      method: "POST",
+      body: JSON.stringify(req),
+      signal,
+    }),
+
+  /**
+   * Streaming variant of /ask_smart. Emits SSE events; caller receives a
+   * sequence of typed events via the `onEvent` callback. Resolves when the
+   * stream closes (after `done`/`rejected`/`error`).
+   */
+  askSmartStream: async (
+    req: AskSmartRequest,
+    onEvent: (e: AskSmartStreamEvent) => void,
+    signal?: AbortSignal
+  ): Promise<void> => {
+    const res = await fetch(`${PROXY}/ask_smart`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "text/event-stream",
+      },
+      body: JSON.stringify({ ...req, stream: true }),
+      signal,
+    });
+    if (!res.ok || !res.body) {
+      const text = await res.text().catch(() => "");
+      throw new ApiError(res.status, `stream HTTP ${res.status}`, text);
+    }
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder("utf-8");
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      // SSE frames are separated by blank lines
+      let sep: number;
+      while ((sep = buffer.indexOf("\n\n")) !== -1) {
+        const frame = buffer.slice(0, sep);
+        buffer = buffer.slice(sep + 2);
+        const parsed = parseSSE(frame);
+        if (parsed) onEvent(parsed);
+      }
+    }
+  },
 };
+
+function parseSSE(frame: string): AskSmartStreamEvent | null {
+  let event = "message";
+  let dataLines: string[] = [];
+  for (const line of frame.split("\n")) {
+    if (line.startsWith("event:")) event = line.slice(6).trim();
+    else if (line.startsWith("data:")) dataLines.push(line.slice(5).trim());
+  }
+  if (dataLines.length === 0) return null;
+  try {
+    const data = JSON.parse(dataLines.join("\n"));
+    return { event, data } as AskSmartStreamEvent;
+  } catch {
+    return null;
+  }
+}

lib/chatStore.ts

@@ -19,9 +19,14 @@ export type Conversation = {
   turns: ChatTurn[];
   createdAt: number;
   updatedAt: number;
+  /** When set, follow-up questions go to /ask scoped to this doc instead of /ask_smart. */
+  pinnedDocId?: string | null;
+  pinnedDocName?: string | null;
 };
 
-export type Settings = Required<Omit<AskSmartRequest, "question">>;
+export type Settings = Required<
+  Omit<AskSmartRequest, "question" | "history" | "stream">
+>;
 
 export const DEFAULT_SETTINGS: Settings = {
   top_k: 1,
@@ -53,9 +58,11 @@ type ChatStore = {
 
   // mutations
   newConversation: () => string;
+  newConversationPinned: (doc_id: string, doc_name: string) => string;
   openConversation: (id: string) => void;
   deleteConversation: (id: string) => void;
   renameConversation: (id: string, title: string) => void;
+  pinDoc: (id: string, doc_id: string | null, doc_name?: string | null) => void;
   appendTurn: (turn: ChatTurn) => void;
   patchTurn: (id: string, patch: Partial<ChatTurn>) => void;
   clearActive: () => void;
@@ -79,6 +86,23 @@ const newId = () =>
     ? crypto.randomUUID()
     : Math.random().toString(36).slice(2, 12));
 
+/**
+ * Build a multi-turn history payload for the backend from a conversation.
+ * Excludes pending and errored turns; caps to last `max` Q→A pairs.
+ */
+export function buildHistory(
+  conv: Conversation | null | undefined,
+  max = 5
+): { question: string; answer: string }[] {
+  if (!conv) return [];
+  const pairs: { question: string; answer: string }[] = [];
+  for (const t of conv.turns) {
+    if (t.pending || t.error || !t.response) continue;
+    pairs.push({ question: t.question, answer: t.response.answer });
+  }
+  return pairs.slice(-max);
+}
+
 const seedConversation = (): Conversation => ({
   id: newId(),
   title: "New conversation",
@@ -117,6 +141,37 @@ export const useChatStore = create<ChatStore>()(
         return c.id;
       },
 
+      newConversationPinned: (doc_id, doc_name) => {
+        const c: Conversation = {
+          ...seedConversation(),
+          title: doc_name ? `Scoped: ${doc_name}` : "Scoped conversation",
+          pinnedDocId: doc_id,
+          pinnedDocName: doc_name ?? null,
+        };
+        set((s) => ({
+          conversations: { ...s.conversations, [c.id]: c },
+          activeId: c.id,
+        }));
+        return c.id;
+      },
+
+      pinDoc: (id, doc_id, doc_name) =>
+        set((s) => {
+          const conv = s.conversations[id];
+          if (!conv) return s;
+          return {
+            conversations: {
+              ...s.conversations,
+              [id]: {
+                ...conv,
+                pinnedDocId: doc_id,
+                pinnedDocName: doc_name ?? conv.pinnedDocName ?? null,
+                updatedAt: Date.now(),
+              },
+            },
+          };
+        }),
+
       openConversation: (id) => set({ activeId: id }),
 
       deleteConversation: (id) =>

lib/types.ts

@@ -74,6 +74,8 @@ export type AskSmartRequest = {
   no_repeat_ngram_size?: number;
   scaler?: number;
   bias_scaler?: number;
+  history?: { question: string; answer: string }[];
+  stream?: boolean;
 };
 
 export type AskSmartResponse = {
@@ -86,7 +88,41 @@ export type AskSmartResponse = {
   _anchor_score?: number;
   _corpus_relevance?: number;
   _threshold: number;
+  _reject_reason?: string;
   retrieve_seconds: number;
   inference_seconds: number;
   total_seconds: number;
 };
+
+export type AskRequest = {
+  doc_id: string;
+  question: string;
+  scaler?: number;
+  bias_scaler?: number;
+  max_new_tokens?: number;
+};
+
+export type AskResponse = {
+  answer: string;
+  doc_id: string;
+  elapsed_seconds: number;
+};
+
+export type DocumentContentResponse = {
+  doc_id: string;
+  name: string;
+  length_chars: number;
+  created_at?: number;
+  text: string;
+};
+
+/**
+ * SSE events emitted by /ask_smart when stream=true.
+ */
+export type AskSmartStreamEvent =
+  | { event: "status"; data: { phase: string; retrieve_seconds?: number } }
+  | { event: "sources"; data: Partial<AskSmartResponse> & { source_docs: SourceDoc[] } }
+  | { event: "rejected"; data: AskSmartResponse }
+  | { event: "token"; data: { text: string } }
+  | { event: "done"; data: AskSmartResponse }
+  | { event: "error"; data: { status: number; message: string } };