diff --git a/backend/api/audio.py b/backend/api/audio.py
new file mode 100644
index 0000000..a64f89c
--- /dev/null
+++ b/backend/api/audio.py
@@ -0,0 +1,202 @@
+"""Audio generation endpoint — KB-grounded narration script + optional
+OpenAI TTS synthesis. Frontend falls back to browser SpeechSynthesis when
+no server-side audio file is produced."""
+from __future__ import annotations
+
+import logging
+import os
+import re
+import uuid
+from pathlib import Path
+from typing import Any
+
+from fastapi import APIRouter, Depends, HTTPException
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+
+from api.generate import _empty_kb_error, _gather_context, llm_text
+from config import SageConfig
+from store.db import KnowledgeStore
+
+router = APIRouter(tags=["audio"])
+logger = logging.getLogger("sage.audio")
+
+# Words per second — used to estimate segment timings and total duration
+# when we can't probe the audio file. Roughly matches OpenAI TTS / typical
+# browser SpeechSynthesis pacing.
+WORDS_PER_SECOND = 2.5
+
+AUDIO_CACHE_DIR = Path(os.getenv("SAGE_AUDIO_CACHE", "/tmp/sage_audio"))
+AUDIO_CACHE_DIR.mkdir(parents=True, exist_ok=True)
+
+
+# ─────────────────────── Schemas ───────────────────────────────
+
+
+class AudioRequest(BaseModel):
+    topic: str | None = None
+    tome_id: str | None = None
+    voice: str | None = None  # OpenAI TTS voice (alloy, echo, fable, onyx, nova, shimmer)
+    provider: str | None = None
+    model: str | None = None
+
+
+# ─────────────────────── Script generation ─────────────────────
+
+
+SCRIPT_SYSTEM = """You write spoken-style narration grounded ONLY in the provided source excerpts. The output will be read aloud by a text-to-speech engine.
+
+Rules:
+- Conversational, natural prose. Like a podcast host explaining a topic.
+- No markdown, no bullet points, no code blocks, no headings, no citations.
+- Do not say "in the sources" or "according to chunk 3" — just teach the content.
+- 4–8 short paragraphs. Each paragraph 1–3 sentences.
+- Roughly 200–350 words total.
+- End with a brief closing sentence.
+- If the sources are sparse, summarize what's there honestly without inventing facts."""
+
+
+_SENTENCE_RE = re.compile(r"[^.!?\n]+[.!?]+|\S[^.!?\n]*", re.UNICODE)
+
+
+def _split_into_segments(script: str) -> list[dict[str, Any]]:
+    """Split the script into spoken sentences with estimated start/end times
+    proportional to word count."""
+    raw_sentences = [m.group(0).strip() for m in _SENTENCE_RE.finditer(script)]
+    raw_sentences = [s for s in raw_sentences if s]
+
+    if not raw_sentences:
+        return []
+
+    segments: list[dict[str, Any]] = []
+    cursor = 0.0
+    for i, text in enumerate(raw_sentences):
+        words = max(1, len(text.split()))
+        duration = max(1.2, words / WORDS_PER_SECOND)
+        segments.append({
+            "id": f"s{i + 1}",
+            "text": text,
+            "startTime": round(cursor, 2),
+            "endTime": round(cursor + duration, 2),
+        })
+        cursor += duration
+    return segments
+
+
+# ─────────────────────── TTS synthesis ─────────────────────────
+
+
+_OPENAI_TTS_VOICES = {"alloy", "echo", "fable", "onyx", "nova", "shimmer"}
+
+
+def _maybe_synthesize_openai_tts(
+    script: str, voice: str | None, config: SageConfig,
+) -> tuple[str | None, str | None]:
+    """If an OpenAI key is configured, synthesize the script to an MP3 on
+    disk and return (audio_id, voice_used). Otherwise return (None, None)
+    so the frontend can fall back to browser SpeechSynthesis."""
+    openai_cfg = config.provider_config("openai")
+    api_key = openai_cfg.get("api_key") or os.getenv("OPENAI_API_KEY")
+    if not api_key:
+        return None, None
+
+    selected_voice = (voice or "alloy").lower()
+    if selected_voice not in _OPENAI_TTS_VOICES:
+        selected_voice = "alloy"
+
+    try:
+        # Imported lazily so missing SDK never breaks the no-TTS path.
+        from openai import OpenAI
+
+        client = OpenAI(api_key=api_key, base_url=openai_cfg.get("base_url"))
+        audio_id = uuid.uuid4().hex
+        out_path = AUDIO_CACHE_DIR / f"{audio_id}.mp3"
+
+        with client.audio.speech.with_streaming_response.create(
+            model="tts-1",
+            voice=selected_voice,
+            input=script,
+        ) as response:
+            response.stream_to_file(out_path)
+
+        return audio_id, selected_voice
+    except Exception as exc:  # noqa: BLE001
+        logger.warning("OpenAI TTS synthesis failed, falling back: %s", exc)
+        return None, None
+
+
+# ─────────────────────── Endpoints ─────────────────────────────
+
+
+@router.post("/api/generate/audio")
+async def generate_audio(
+    req: AudioRequest,
+    store: KnowledgeStore = Depends(),
+    config: SageConfig = Depends(),
+):
+    context_text, sources = await _gather_context(
+        topic=req.topic, tome_id=req.tome_id, store=store, config=config,
+        max_results=8,
+    )
+    if not context_text:
+        raise _empty_kb_error()
+
+    topic_line = (
+        f"Topic focus: {req.topic.strip()}" if req.topic and req.topic.strip()
+        else "Topic focus: cover the most important ideas in the sources."
+    )
+    user_prompt = (
+        f"{topic_line}\n"
+        f"Write the narration now.\n\n"
+        f"Source excerpts:\n{context_text}"
+    )
+
+    try:
+        script, provider_used, model_used = await llm_text(
+            SCRIPT_SYSTEM, user_prompt, req.provider, req.model, config,
+        )
+    except Exception as exc:  # noqa: BLE001
+        logger.exception("audio script generation failed")
+        raise HTTPException(status_code=502, detail=f"Failed to generate script: {exc}")
+
+    script = script.strip()
+    if not script:
+        raise HTTPException(status_code=502, detail="Model produced an empty script.")
+
+    segments = _split_into_segments(script)
+    estimated_duration = segments[-1]["endTime"] if segments else 0.0
+
+    audio_id, used_voice = _maybe_synthesize_openai_tts(script, req.voice, config)
+    audio_url = f"/api/audio/{audio_id}.mp3" if audio_id else None
+
+    voice_label = used_voice or "Browser"
+
+    title = (
+        f"Audio: {req.topic.strip()}" if req.topic and req.topic.strip()
+        else "Audio overview"
+    )
+
+    return {
+        "id": audio_id or f"local-{uuid.uuid4().hex[:8]}",
+        "title": title,
+        "voice": voice_label,
+        "provider": provider_used,
+        "model": model_used,
+        "script": script,
+        "segments": segments,
+        "duration": estimated_duration,
+        "audio_url": audio_url,
+        "sources": sources,
+        "topic": req.topic or "",
+    }
+
+
+@router.get("/api/audio/{audio_id}.mp3")
+async def get_audio_file(audio_id: str):
+    """Serve a previously-synthesized TTS file."""
+    if not re.fullmatch(r"[a-f0-9\-]{8,}", audio_id):
+        raise HTTPException(status_code=400, detail="Invalid audio id.")
+    path = AUDIO_CACHE_DIR / f"{audio_id}.mp3"
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="Audio file not found or expired.")
+    return FileResponse(path, media_type="audio/mpeg", filename=f"{audio_id}.mp3")
diff --git a/backend/api/chat.py b/backend/api/chat.py
index 4f43675..77d7948 100644
--- a/backend/api/chat.py
+++ b/backend/api/chat.py
@@ -16,15 +16,35 @@
 
 router = APIRouter(prefix="/api/chat", tags=["chat"])
 
-SYSTEM_PROMPT = """You are Sage, a helpful knowledge assistant. You have access to the user's personal knowledge base through tools. When answering questions:
+SYSTEM_PROMPT = """You are Sage, a helpful knowledge assistant. You have access to the user's personal knowledge base through tools.
 
+When answering questions:
 1. Search the knowledge base first using search_docs
 2. Read relevant documents if needed using read_document
 3. Cite sources with numbered references like [1], [2]
 4. Be concise but thorough
 5. If nothing relevant is found, say so honestly
 
-Always ground your answers in the user's actual documents."""
+Always ground your answers in the user's actual documents.
+
+# App capabilities you should know about
+
+You run inside the Sage app. The app has dedicated views for study artifacts and source management. Normal natural-language questions stay in chat, even if they mention words like history, summary, library, audio, quiz, or documents. Dedicated views open only from first-party UI controls or explicit slash commands, so you can safely answer ordinary questions without expecting the frontend to hijack them.
+
+Explicit slash commands (case-insensitive, optional text after the command):
+- /quiz or /test → generates a real multiple-choice quiz from the knowledge base via POST /api/generate/quiz, rendered in the QuizWidget.
+- /flashcards or /flashcard → generates real study flashcards from the knowledge base via POST /api/generate/flashcards, rendered in the FlashcardWidget.
+- /audio, /listen, or /podcast → generates a spoken-style narration script from the knowledge base via POST /api/generate/audio. If an OpenAI API key is configured, the script is synthesized to an MP3 (OpenAI TTS) and played in an audio element; otherwise playback falls back to the browser's SpeechSynthesis voice. Transcript scrolls with the audio.
+- /report or /study-guide → opens the report view.
+- /history → opens the history panel of past sessions.
+- /tomes or /tome → opens the tome selector for grouping documents.
+- /knowledge, /sources, or /docs → opens the KnowledgeBaseWidget which lists every ingested document with detail + delete.
+
+Other things the user can do in this app:
+- Upload documents to the knowledge base using the Add source action. It accepts pasted text or text-like files (.txt, .md, .csv, .json, .log). PDFs/DOCX/images are not yet supported via the UI.
+- Anything ingested is chunked, embedded, and dedup'd by content hash; you can immediately search it via search_docs.
+
+If the user asks how to access a routed feature, suggest the relevant slash command. Do not render generated quizzes, flashcards, reports, or audio scripts yourself unless the user asks for a plain chat answer instead."""
 
 
 class ChatRequest(BaseModel):
@@ -35,6 +55,15 @@ class ChatRequest(BaseModel):
     model: str | None = None
 
 
+@router.get("/sessions")
+async def list_sessions(
+    limit: int = 100,
+    store: KnowledgeStore = Depends(),
+):
+    """Return recent chat sessions for the History panel."""
+    return {"sessions": store.list_sessions(limit=limit)}
+
+
 @router.post("")
 async def chat(
     req: ChatRequest,
diff --git a/backend/api/generate.py b/backend/api/generate.py
new file mode 100644
index 0000000..e7185cc
--- /dev/null
+++ b/backend/api/generate.py
@@ -0,0 +1,479 @@
+"""Generation endpoints — produce structured artifacts (flashcards, quizzes)
+grounded in the user's knowledge base."""
+from __future__ import annotations
+
+import json
+import logging
+import random
+import re
+import uuid
+from typing import Any
+
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel
+
+from config import SageConfig
+from providers.base import Message
+from providers.factory import create_provider
+from skills.base import SkillContext
+from skills.search_docs import SearchDocsSkill
+from store.db import KnowledgeStore
+
+router = APIRouter(prefix="/api/generate", tags=["generate"])
+logger = logging.getLogger("sage.generate")
+
+
+# ─────────────────────── Request schemas ───────────────────────
+
+
+class GenerateRequest(BaseModel):
+    topic: str | None = None
+    tome_id: str | None = None
+    count: int = 6
+    provider: str | None = None
+    model: str | None = None
+
+
+# ─────────────────────── Shared helpers ────────────────────────
+
+
+async def _gather_context(
+    topic: str | None,
+    tome_id: str | None,
+    store: KnowledgeStore,
+    config: SageConfig,
+    max_results: int,
+) -> tuple[str, list[dict[str, Any]]]:
+    """Return (joined context text, list of source dicts). Falls back to
+    random sampling when there's no topic to drive semantic search."""
+    if topic:
+        skill = SearchDocsSkill()
+        ctx = SkillContext(
+            store=store, provider=None, workspace=config.db_path.parent,
+            config=config, tome_id=tome_id,
+        )
+        result = await skill.execute(
+            {"query": topic, "max_results": max_results}, ctx,
+        )
+        rows = result.data.get("results", []) if result.data else []
+        if rows:
+            sources = [
+                {
+                    "document_id": r["document_id"],
+                    "document_title": r["document_title"],
+                    "chunk_index": r["chunk_index"],
+                    "similarity": r["similarity"],
+                }
+                for r in rows
+            ]
+            joined = "\n\n".join(
+                f'[{i + 1}] "{r["document_title"]}" (chunk {r["chunk_index"]})\n{r["content"]}'
+                for i, r in enumerate(rows)
+            )
+            return joined, sources
+
+    # No topic, or search returned nothing — fall back to random chunks.
+    if tome_id:
+        doc_ids = set(store.get_tome_document_ids(tome_id))
+        chunks = [c for c in store.get_all_chunks_with_embeddings() if c.document_id in doc_ids]
+    else:
+        chunks = store.get_all_chunks_with_embeddings()
+
+    if not chunks:
+        return "", []
+
+    sampled = random.sample(chunks, k=min(max_results, len(chunks)))
+    sources = []
+    parts = []
+    for i, chunk in enumerate(sampled, 1):
+        doc = store.get_document(chunk.document_id)
+        title = doc.title if doc else "Unknown"
+        sources.append({
+            "document_id": chunk.document_id,
+            "document_title": title,
+            "chunk_index": chunk.chunk_index,
+            "similarity": None,
+        })
+        parts.append(f'[{i}] "{title}" (chunk {chunk.chunk_index})\n{chunk.content}')
+    return "\n\n".join(parts), sources
+
+
+_JSON_FENCE_RE = re.compile(r"```(?:json)?\s*(.*?)```", re.DOTALL | re.IGNORECASE)
+
+
+def _extract_json(text: str) -> Any:
+    """Pull a JSON object out of a model response that may be wrapped in
+    prose or code fences. Raises ValueError if nothing parses."""
+    candidates: list[str] = []
+    candidates.extend(m.group(1).strip() for m in _JSON_FENCE_RE.finditer(text))
+
+    stripped = text.strip()
+    if stripped:
+        candidates.append(stripped)
+
+    for start_ch, end_ch in (("{", "}"), ("[", "]")):
+        first = text.find(start_ch)
+        last = text.rfind(end_ch)
+        if first != -1 and last > first:
+            candidates.append(text[first : last + 1])
+
+    for candidate in candidates:
+        try:
+            return json.loads(candidate)
+        except json.JSONDecodeError:
+            continue
+    raise ValueError("Could not parse JSON from model response")
+
+
+async def _llm_json(
+    system_prompt: str,
+    user_prompt: str,
+    provider_name: str | None,
+    model: str | None,
+    config: SageConfig,
+) -> Any:
+    provider_name = provider_name or config.get("providers.default", "ollama")
+    provider_config = config.provider_config(provider_name)
+    resolved_model = model or provider_config.get("default_model", "llama3.1:8b")
+    provider = create_provider(provider_name, provider_config)
+
+    kwargs: dict[str, Any] = {}
+    if provider_name in ("openai", "deepseek"):
+        kwargs["response_format"] = {"type": "json_object"}
+
+    messages = [
+        Message(role="system", content=system_prompt),
+        Message(role="user", content=user_prompt),
+    ]
+    response = await provider.chat(messages=messages, tools=[], model=resolved_model, **kwargs)
+    text = getattr(response, "content", "") or ""
+    return _extract_json(text)
+
+
+async def llm_text(
+    system_prompt: str,
+    user_prompt: str,
+    provider_name: str | None,
+    model: str | None,
+    config: SageConfig,
+) -> tuple[str, str, str]:
+    """Call the configured provider with no tools, no JSON-mode. Returns
+    (content, resolved_provider_name, resolved_model)."""
+    provider_name = provider_name or config.get("providers.default", "ollama")
+    provider_config = config.provider_config(provider_name)
+    resolved_model = model or provider_config.get("default_model", "llama3.1:8b")
+    provider = create_provider(provider_name, provider_config)
+
+    messages = [
+        Message(role="system", content=system_prompt),
+        Message(role="user", content=user_prompt),
+    ]
+    response = await provider.chat(messages=messages, tools=[], model=resolved_model)
+    return (getattr(response, "content", "") or "", provider_name, resolved_model)
+
+
+def _empty_kb_error() -> HTTPException:
+    return HTTPException(
+        status_code=400,
+        detail=(
+            "Your knowledge base is empty for this scope. Add documents first "
+            "via the upload button next to the command bar."
+        ),
+    )
+
+
+# ─────────────────────── Flashcards ────────────────────────────
+
+
+FLASHCARD_SYSTEM = """You write study flashcards grounded ONLY in the provided source excerpts.
+
+Rules:
+- Each card must be answerable from the sources. Do not invent facts.
+- "front" is a concise question or term (1 sentence).
+- "back" is a tight, self-contained answer (1–3 sentences).
+- Cover distinct ideas — do not repeat the same fact in different words.
+- Output ONLY a JSON object of the form: {"cards": [{"front": "...", "back": "..."}, ...]}
+- No commentary, no markdown fences."""
+
+
+@router.post("/flashcards")
+async def generate_flashcards(
+    req: GenerateRequest,
+    store: KnowledgeStore = Depends(),
+    config: SageConfig = Depends(),
+):
+    count = max(1, min(req.count, 20))
+    context_text, sources = await _gather_context(
+        topic=req.topic, tome_id=req.tome_id, store=store, config=config,
+        max_results=max(count, 6),
+    )
+    if not context_text:
+        raise _empty_kb_error()
+
+    topic_line = (
+        f"Topic focus: {req.topic.strip()}" if req.topic and req.topic.strip()
+        else "Topic focus: cover the most important ideas in the sources."
+    )
+    user_prompt = (
+        f"{topic_line}\n"
+        f"Generate exactly {count} flashcards.\n\n"
+        f"Source excerpts:\n{context_text}"
+    )
+
+    try:
+        parsed = await _llm_json(FLASHCARD_SYSTEM, user_prompt, req.provider, req.model, config)
+    except ValueError as exc:
+        logger.exception("flashcard json parse failed")
+        raise HTTPException(status_code=502, detail=f"Model returned unparseable output: {exc}")
+
+    raw_cards = parsed.get("cards") if isinstance(parsed, dict) else parsed
+    if not isinstance(raw_cards, list):
+        raise HTTPException(status_code=502, detail="Model output missing 'cards' array")
+
+    cards = []
+    for entry in raw_cards[:count]:
+        if not isinstance(entry, dict):
+            continue
+        front = str(entry.get("front", "")).strip()
+        back = str(entry.get("back", "")).strip()
+        if not front or not back:
+            continue
+        cards.append({"id": f"fc-{uuid.uuid4().hex[:8]}", "front": front, "back": back})
+
+    if not cards:
+        raise HTTPException(status_code=502, detail="Model produced no usable flashcards")
+
+    return {
+        "cards": cards,
+        "topic": req.topic or "",
+        "sources": sources,
+    }
+
+
+# ─────────────────────── Quiz ──────────────────────────────────
+
+
+QUIZ_SYSTEM = """You write multiple-choice quiz questions grounded ONLY in the provided source excerpts.
+
+Rules:
+- Each question must be answerable from the sources. Do not invent facts.
+- Exactly 4 options per question, labeled "a", "b", "c", "d".
+- Exactly one correct option per question.
+- "explanation" should be 1–2 sentences explaining the correct answer using the sources.
+- Distractors must be plausible but clearly wrong given the sources.
+- Output ONLY a JSON object of the form:
+  {"questions": [
+    {"question": "...",
+     "options": [{"id":"a","text":"..."},{"id":"b","text":"..."},{"id":"c","text":"..."},{"id":"d","text":"..."}],
+     "correctOptionId": "b",
+     "explanation": "..."}
+  ]}
+- No commentary, no markdown fences."""
+
+
+@router.post("/quiz")
+async def generate_quiz(
+    req: GenerateRequest,
+    store: KnowledgeStore = Depends(),
+    config: SageConfig = Depends(),
+):
+    count = max(1, min(req.count, 15))
+    context_text, sources = await _gather_context(
+        topic=req.topic, tome_id=req.tome_id, store=store, config=config,
+        max_results=max(count, 5),
+    )
+    if not context_text:
+        raise _empty_kb_error()
+
+    topic_line = (
+        f"Topic focus: {req.topic.strip()}" if req.topic and req.topic.strip()
+        else "Topic focus: cover the most important ideas in the sources."
+    )
+    user_prompt = (
+        f"{topic_line}\n"
+        f"Generate exactly {count} multiple-choice questions.\n\n"
+        f"Source excerpts:\n{context_text}"
+    )
+
+    try:
+        parsed = await _llm_json(QUIZ_SYSTEM, user_prompt, req.provider, req.model, config)
+    except ValueError as exc:
+        logger.exception("quiz json parse failed")
+        raise HTTPException(status_code=502, detail=f"Model returned unparseable output: {exc}")
+
+    raw_questions = parsed.get("questions") if isinstance(parsed, dict) else parsed
+    if not isinstance(raw_questions, list):
+        raise HTTPException(status_code=502, detail="Model output missing 'questions' array")
+
+    questions = []
+    for entry in raw_questions[:count]:
+        if not isinstance(entry, dict):
+            continue
+        question_text = str(entry.get("question", "")).strip()
+        options_raw = entry.get("options")
+        correct_id = str(entry.get("correctOptionId", "")).strip().lower()
+        explanation = str(entry.get("explanation", "")).strip()
+        if not question_text or not isinstance(options_raw, list) or len(options_raw) < 2:
+            continue
+
+        options = []
+        for opt in options_raw:
+            if not isinstance(opt, dict):
+                continue
+            opt_id = str(opt.get("id", "")).strip().lower()
+            opt_text = str(opt.get("text", "")).strip()
+            if opt_id and opt_text:
+                options.append({"id": opt_id, "text": opt_text})
+        if len(options) < 2 or not any(o["id"] == correct_id for o in options):
+            continue
+
+        questions.append({
+            "id": f"q-{uuid.uuid4().hex[:8]}",
+            "question": question_text,
+            "options": options,
+            "correctOptionId": correct_id,
+            "explanation": explanation,
+        })
+
+    if not questions:
+        raise HTTPException(status_code=502, detail="Model produced no usable questions")
+
+    return {
+        "questions": questions,
+        "topic": req.topic or "",
+        "sources": sources,
+    }
+
+
+# ─────────────────────── Report ────────────────────────────────
+
+
+REPORT_SYSTEM = """You write structured study reports grounded ONLY in the provided source excerpts.
+
+Rules:
+- Every claim must be supported by the sources. Do not invent facts, numbers, or citations.
+- Aim for 5–9 sections, each focused on one distinct idea.
+- The first section MUST be "Executive Summary".
+- Section content is GitHub-flavored markdown. You may use:
+  * paragraphs, **bold**, *italic*, blockquotes
+  * bullet and numbered lists
+  * tables (pipe syntax)
+  * fenced code blocks (with language) when sources include code
+  * LaTeX math: inline `$...$` and display `$$...$$` (escape backslashes as needed)
+- Do NOT include the section title inside the section's content — only the body.
+- Do NOT use h1 (#) headings. If you need a sub-heading inside a section, use h3 (###).
+- Output ONLY a JSON object of the form:
+  {
+    "title": "Short report title (≤ 60 chars)",
+    "subtitle": "One-line description of the report's scope",
+    "sections": [
+      {"title": "Executive Summary", "content": "markdown..."},
+      {"title": "...", "content": "markdown..."},
+      ...
+    ]
+  }
+- No commentary, no markdown fences around the JSON."""
+
+
+_SLUG_RE = re.compile(r"[^a-z0-9]+")
+
+
+def _slugify(text: str) -> str:
+    """Match rehype-slug / github-slugger output for typical ASCII headings."""
+    slug = _SLUG_RE.sub("-", text.lower()).strip("-")
+    return slug or "section"
+
+
+@router.post("/report")
+async def generate_report(
+    req: GenerateRequest,
+    store: KnowledgeStore = Depends(),
+    config: SageConfig = Depends(),
+):
+    context_text, sources = await _gather_context(
+        topic=req.topic, tome_id=req.tome_id, store=store, config=config,
+        max_results=10,
+    )
+    if not context_text:
+        raise _empty_kb_error()
+
+    topic_line = (
+        f"Topic focus: {req.topic.strip()}" if req.topic and req.topic.strip()
+        else "Topic focus: synthesize the most important ideas across the sources."
+    )
+    user_prompt = (
+        f"{topic_line}\n"
+        f"Write the report now as structured JSON.\n\n"
+        f"Source excerpts:\n{context_text}"
+    )
+
+    try:
+        parsed = await _llm_json(REPORT_SYSTEM, user_prompt, req.provider, req.model, config)
+    except ValueError as exc:
+        logger.exception("report json parse failed")
+        raise HTTPException(status_code=502, detail=f"Model returned unparseable output: {exc}")
+
+    if not isinstance(parsed, dict):
+        raise HTTPException(status_code=502, detail="Model output was not a JSON object")
+
+    title = str(parsed.get("title", "")).strip() or (
+        f"Report: {req.topic.strip()}" if req.topic and req.topic.strip() else "Report"
+    )
+    subtitle = str(parsed.get("subtitle", "")).strip() or None
+    raw_sections = parsed.get("sections")
+    if not isinstance(raw_sections, list) or not raw_sections:
+        raise HTTPException(status_code=502, detail="Model output missing 'sections' array")
+
+    toc: list[dict[str, str]] = []
+    content_parts: list[str] = []
+    used_slugs: set[str] = set()
+    for entry in raw_sections:
+        if not isinstance(entry, dict):
+            continue
+        section_title = str(entry.get("title", "")).strip()
+        section_body = str(entry.get("content", "")).strip()
+        if not section_title or not section_body:
+            continue
+        base_slug = _slugify(section_title)
+        slug = base_slug
+        i = 1
+        while slug in used_slugs:
+            i += 1
+            slug = f"{base_slug}-{i}"
+        used_slugs.add(slug)
+        toc.append({"id": slug, "title": section_title})
+        content_parts.append(f"## {section_title}\n\n{section_body}")
+
+    if not toc:
+        raise HTTPException(status_code=502, detail="Model produced no usable sections")
+
+    unique_doc_ids: set[str] = set()
+    for s in sources:
+        unique_doc_ids.add(s["document_id"])
+    doc_count = len(unique_doc_ids)
+
+    tome_name: str | None = None
+    if req.tome_id:
+        tome = store.get_tome(req.tome_id)
+        if tome:
+            tome_name = tome.name
+
+    if doc_count:
+        if tome_name:
+            source_docs = f'Based on {doc_count} document{"s" if doc_count != 1 else ""} in "{tome_name}" tome'
+        else:
+            source_docs = f'Based on {doc_count} document{"s" if doc_count != 1 else ""} in your knowledge base'
+    else:
+        source_docs = None
+
+    content = "\n\n".join(content_parts) + "\n\n---\n\n*Report generated by Sage*"
+
+    return {
+        "title": title,
+        "subtitle": subtitle,
+        "sourceDocs": source_docs,
+        "toc": toc,
+        "content": content,
+        "sources": sources,
+        "topic": req.topic or "",
+    }
diff --git a/backend/main.py b/backend/main.py
index eed28c1..d8b2b1d 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -24,7 +24,7 @@ def _get_arxiv_service():
 from services.pdf import PDFService
 from services.summarizer import DeepSeekService
 
-from api import chat, knowledge, skills as skills_api, tomes as tomes_api
+from api import audio, chat, generate, knowledge, skills as skills_api, tomes as tomes_api
 from config import SageConfig
 from skills.read_document import ReadDocumentSkill
 from skills.registry import SkillRegistry
@@ -57,6 +57,8 @@ def _get_arxiv_service():
 app.include_router(chat.router)
 app.include_router(tomes_api.router)
 app.include_router(skills_api.router)
+app.include_router(generate.router)
+app.include_router(audio.router)
 # --- end Sage setup ---
 
 # Add CORS middleware with configurable origins
@@ -308,6 +310,15 @@ def read_root():
     return {"message": "Welcome to the Sage API!"}
 
 
+@app.get("/api/config")
+def get_config(config: SageConfig = Depends()):
+    """Expose the active provider/model so the UI can label which one's in use."""
+    provider_name = config.get("providers.default", "ollama")
+    provider_config = config.provider_config(provider_name)
+    model = provider_config.get("default_model", "")
+    return {"provider": provider_name, "model": model}
+
+
 # Clear caches endpoint (for maintenance)
 @app.post("/api/clear-cache")
 def clear_cache():
diff --git a/backend/store/db.py b/backend/store/db.py
index f75f2f0..2fab9f6 100644
--- a/backend/store/db.py
+++ b/backend/store/db.py
@@ -77,6 +77,18 @@ def __init__(self, db_path: Optional[Path] = None):
         self._init_schema()
 
     def _init_schema(self):
+        existing_tables = {
+            row[0]
+            for row in self.conn.execute(
+                "SELECT name FROM sqlite_master WHERE type='table'"
+            )
+        }
+        if "documents" in existing_tables:
+            document_columns = {
+                row[1] for row in self.conn.execute("PRAGMA table_info(documents)")
+            }
+            if "content_hash" not in document_columns:
+                self.conn.execute("ALTER TABLE documents ADD COLUMN content_hash TEXT")
         self.conn.executescript(SCHEMA)
         self.conn.commit()
 
@@ -231,6 +243,54 @@ def create_session(self, provider: str, model: str,
         self.conn.commit()
         return s
 
+    def list_sessions(self, limit: int = 100) -> list[dict]:
+        """List chat sessions with a derived title, tome name, and activity timestamps.
+
+        Returns rows shaped for the History panel — newest activity first."""
+        limit = max(1, min(limit, 500))
+        rows = self.conn.execute(
+            """
+            SELECT
+                s.id                AS id,
+                s.tome_id           AS tome_id,
+                s.provider          AS provider,
+                s.model             AS model,
+                s.created_at        AS created_at,
+                t.name              AS tome_name,
+                (SELECT content FROM messages
+                   WHERE session_id = s.id AND role = 'user'
+                   ORDER BY created_at ASC LIMIT 1) AS first_user_message,
+                (SELECT created_at FROM messages
+                   WHERE session_id = s.id
+                   ORDER BY created_at DESC LIMIT 1) AS last_message_at,
+                (SELECT COUNT(*) FROM messages
+                   WHERE session_id = s.id) AS message_count
+            FROM sessions s
+            LEFT JOIN tomes t ON t.id = s.tome_id
+            ORDER BY COALESCE(
+                (SELECT created_at FROM messages
+                   WHERE session_id = s.id ORDER BY created_at DESC LIMIT 1),
+                s.created_at
+            ) DESC
+            LIMIT ?
+            """,
+            (limit,),
+        ).fetchall()
+        return [
+            {
+                "id": r["id"],
+                "tome_id": r["tome_id"],
+                "tome_name": r["tome_name"],
+                "provider": r["provider"],
+                "model": r["model"],
+                "created_at": r["created_at"],
+                "last_message_at": r["last_message_at"] or r["created_at"],
+                "first_user_message": r["first_user_message"],
+                "message_count": r["message_count"] or 0,
+            }
+            for r in rows
+        ]
+
     def get_tome_session(self, tome_id: str) -> Optional[Session]:
         """Get the most recent session for a tome."""
         row = self.conn.execute(
diff --git a/backend/tests/test_app.py b/backend/tests/test_app.py
index 85f4ee5..3e96974 100644
--- a/backend/tests/test_app.py
+++ b/backend/tests/test_app.py
@@ -6,7 +6,7 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
-from api import chat, knowledge, skills as skills_api, tomes as tomes_api
+from api import audio, chat, generate, knowledge, skills as skills_api, tomes as tomes_api
 from config import SageConfig
 from skills.read_document import ReadDocumentSkill
 from skills.registry import SkillRegistry
@@ -41,6 +41,8 @@ def create_test_app(db_path: Optional[Path] = None) -> tuple[FastAPI, KnowledgeS
     app.include_router(chat.router)
     app.include_router(tomes_api.router)
     app.include_router(skills_api.router)
+    app.include_router(generate.router)
+    app.include_router(audio.router)
 
     @app.get("/")
     def root():
diff --git a/backend/tests/test_chat_prompt.py b/backend/tests/test_chat_prompt.py
new file mode 100644
index 0000000..b026e67
--- /dev/null
+++ b/backend/tests/test_chat_prompt.py
@@ -0,0 +1,21 @@
+"""Tests for Sage chat capability guidance."""
+from __future__ import annotations
+
+from api.chat import SYSTEM_PROMPT
+
+
+def test_system_prompt_guides_explicit_slash_commands_only():
+    prompt = SYSTEM_PROMPT.lower()
+
+    assert "/quiz" in prompt
+    assert "/flashcards" in prompt
+    assert "/audio" in prompt
+    assert "/report" in prompt
+    assert "/history" in prompt
+    assert "/tomes" in prompt
+    assert "/sources" in prompt
+
+    assert "routes prompts containing certain keywords" not in prompt
+    assert '"history" → opens' not in prompt
+    assert '"summary" → opens' not in prompt
+    assert "normal natural-language questions stay in chat" in prompt
diff --git a/backend/tests/test_generation_api.py b/backend/tests/test_generation_api.py
new file mode 100644
index 0000000..a635b51
--- /dev/null
+++ b/backend/tests/test_generation_api.py
@@ -0,0 +1,155 @@
+"""Tests for generated artifact and audio endpoints."""
+from __future__ import annotations
+
+import json
+from pathlib import Path
+from unittest.mock import patch
+
+from fastapi.testclient import TestClient
+
+from providers.base import AgentResponse
+from store.models import Chunk, Document
+from tests.test_app import create_test_app
+
+
+class FakeProvider:
+    async def chat(self, messages, tools, model, stream=False, **kwargs):
+        prompt = messages[-1].content
+        if "flashcards" in prompt.lower():
+            return AgentResponse(content=json.dumps({
+                "cards": [{"front": "What is Sage?", "back": "A local-first knowledge agent."}]
+            }))
+        if "multiple-choice" in messages[0].content.lower():
+            return AgentResponse(content=json.dumps({
+                "questions": [{
+                    "question": "What is Sage?",
+                    "options": [
+                        {"id": "a", "text": "A database"},
+                        {"id": "b", "text": "A local-first knowledge agent"},
+                        {"id": "c", "text": "A browser"},
+                        {"id": "d", "text": "A font"},
+                    ],
+                    "correctOptionId": "b",
+                    "explanation": "The source says Sage is a local-first knowledge agent.",
+                }]
+            }))
+        if "structured study reports" in messages[0].content.lower():
+            return AgentResponse(content=json.dumps({
+                "title": "Sage Overview",
+                "subtitle": "A grounded study report",
+                "sections": [
+                    {
+                        "title": "Executive Summary",
+                        "content": "Sage is a local-first knowledge agent for studying documents.",
+                    },
+                    {
+                        "title": "Grounding",
+                        "content": "Generated artifacts should stay grounded in the knowledge base.",
+                    },
+                ],
+            }))
+        if "narration" in messages[0].content.lower():
+            return AgentResponse(content="Sage is a local-first knowledge agent. It keeps answers grounded.")
+        return AgentResponse(content="{}")
+
+    def list_models(self):
+        return ["fake-model"]
+
+
+def client_with_seeded_kb():
+    test_db = Path("/tmp/sage_test_generation_api.db")
+    test_db.unlink(missing_ok=True)
+    app, store = create_test_app(db_path=test_db)
+    doc = Document(title="Sage Notes")
+    store.add_document(doc)
+    store.add_chunks([
+        Chunk(
+            document_id=doc.id,
+            chunk_index=0,
+            content="Sage is a local-first knowledge agent for studying your documents.",
+            embedding=b"fake-embedding",
+        )
+    ])
+    return app, store, test_db
+
+
+def test_flashcards_endpoint_uses_fake_provider_and_returns_sources():
+    app, store, test_db = client_with_seeded_kb()
+    try:
+        with patch("api.generate.create_provider", return_value=FakeProvider()):
+            with TestClient(app) as client:
+                resp = client.post("/api/generate/flashcards", json={"count": 1, "provider": "fake"})
+
+        assert resp.status_code == 200
+        data = resp.json()
+        assert data["cards"][0]["front"] == "What is Sage?"
+        assert data["sources"][0]["document_title"] == "Sage Notes"
+    finally:
+        store.close()
+        test_db.unlink(missing_ok=True)
+
+
+def test_quiz_endpoint_uses_fake_provider_and_returns_contract_shape():
+    app, store, test_db = client_with_seeded_kb()
+    try:
+        with patch("api.generate.create_provider", return_value=FakeProvider()):
+            with TestClient(app) as client:
+                resp = client.post("/api/generate/quiz", json={"count": 1, "provider": "fake"})
+
+        assert resp.status_code == 200
+        data = resp.json()
+        assert data["questions"][0]["question"] == "What is Sage?"
+        assert data["questions"][0]["correctOptionId"] == "b"
+        assert data["questions"][0]["options"] == [
+            {"id": "a", "text": "A database"},
+            {"id": "b", "text": "A local-first knowledge agent"},
+            {"id": "c", "text": "A browser"},
+            {"id": "d", "text": "A font"},
+        ]
+        assert data["sources"][0]["document_title"] == "Sage Notes"
+    finally:
+        store.close()
+        test_db.unlink(missing_ok=True)
+
+
+def test_report_endpoint_uses_fake_provider_and_returns_contract_shape():
+    app, store, test_db = client_with_seeded_kb()
+    try:
+        with patch("api.generate.create_provider", return_value=FakeProvider()):
+            with TestClient(app) as client:
+                resp = client.post("/api/generate/report", json={"provider": "fake"})
+
+        assert resp.status_code == 200
+        data = resp.json()
+        assert data["title"] == "Sage Overview"
+        assert data["subtitle"] == "A grounded study report"
+        assert data["toc"] == [
+            {"id": "executive-summary", "title": "Executive Summary"},
+            {"id": "grounding", "title": "Grounding"},
+        ]
+        assert "## Executive Summary" in data["content"]
+        assert "Report generated by Sage" in data["content"]
+        assert data["sourceDocs"] == "Based on 1 document in your knowledge base"
+        assert data["sources"][0]["document_title"] == "Sage Notes"
+    finally:
+        store.close()
+        test_db.unlink(missing_ok=True)
+
+
+def test_audio_endpoint_returns_browser_fallback_without_openai_tts():
+    app, store, test_db = client_with_seeded_kb()
+    try:
+        with patch("api.generate.create_provider", return_value=FakeProvider()), \
+             patch("api.audio._maybe_synthesize_openai_tts", return_value=(None, None)):
+            with TestClient(app) as client:
+                resp = client.post("/api/generate/audio", json={"provider": "fake"})
+
+        assert resp.status_code == 200
+        data = resp.json()
+        assert data["voice"] == "Browser"
+        assert data["audio_url"] is None
+        assert data["segments"]
+        assert "local-first knowledge agent" in data["script"]
+    finally:
+        store.close()
+        test_db.unlink(missing_ok=True)
diff --git a/backend/tests/test_store.py b/backend/tests/test_store.py
index 7eddc69..84313cf 100644
--- a/backend/tests/test_store.py
+++ b/backend/tests/test_store.py
@@ -1,10 +1,40 @@
 """Tests for the KnowledgeStore — Tomes, documents, chunks, dedup, linking."""
 import pytest
 
+from store.db import KnowledgeStore
 from store.models import Document, Chunk, Tome, Session, Message
 
 
 class TestDocumentCRUD:
+    def test_existing_documents_table_gets_content_hash_column(self, tmp_path):
+        import sqlite3
+
+        db_path = tmp_path / "legacy.db"
+        conn = sqlite3.connect(db_path)
+        conn.execute(
+            """
+            CREATE TABLE documents (
+                id TEXT PRIMARY KEY,
+                title TEXT NOT NULL,
+                source TEXT,
+                source_id TEXT,
+                doc_type TEXT,
+                metadata TEXT DEFAULT '{}',
+                created_at TEXT DEFAULT (datetime('now')),
+                updated_at TEXT DEFAULT (datetime('now'))
+            )
+            """
+        )
+        conn.commit()
+        conn.close()
+
+        migrated = KnowledgeStore(db_path=db_path)
+        try:
+            columns = {row[1] for row in migrated.conn.execute("PRAGMA table_info(documents)")}
+            assert "content_hash" in columns
+        finally:
+            migrated.close()
+
     def test_add_and_get(self, store):
         doc = Document(title="Test Paper", source="upload", doc_type="pdf", content_hash="abc123")
         store.add_document(doc)
@@ -168,6 +198,24 @@ def test_dedup_prevents_duplicate_storage(self, store):
 
 
 class TestSessions:
+    def test_list_sessions_clamps_negative_limit(self, store):
+        for i in range(3):
+            session = store.create_session("ollama", "llama3.1:8b")
+            store.add_message(Message(session_id=session.id, role="user", content=f"hello {i}"))
+
+        sessions = store.list_sessions(limit=-1)
+
+        assert len(sessions) == 1
+
+    def test_list_sessions_clamps_large_limit(self, store):
+        for i in range(3):
+            session = store.create_session("ollama", "llama3.1:8b")
+            store.add_message(Message(session_id=session.id, role="user", content=f"hello {i}"))
+
+        sessions = store.list_sessions(limit=10_000)
+
+        assert len(sessions) == 3
+
     def test_create_session_with_tome(self, store):
         tome = store.create_tome("Tome")
         session = store.create_session("ollama", "llama3.1:8b", tome_id=tome.id)
diff --git a/frontend/package.json b/frontend/package.json
index 77759c4..d618159 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test:routing": "node scripts/test-command-routing.mjs",
+    "test:api-client": "node scripts/test-sage-api.mjs",
+    "test:smoke": "npm run test:routing && npm run test:api-client",
     "tauri": "tauri",
     "tauri:dev": "tauri dev",
     "tauri:build": "tauri build"
diff --git a/frontend/scripts/test-command-routing.mjs b/frontend/scripts/test-command-routing.mjs
new file mode 100644
index 0000000..e0a13c0
--- /dev/null
+++ b/frontend/scripts/test-command-routing.mjs
@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import { detectView } from "../src/lib/command-routing.ts";
+
+const routes = [
+  ["/quiz", "quiz"],
+  ["/quiz attention mechanisms", "quiz"],
+  ["/flashcards transformers", "flashcards"],
+  ["/flashcard transformers", "flashcards"],
+  ["/audio chapter 2", "audio"],
+  ["/report diffusion notes", "report"],
+  ["/history", "history"],
+  ["/tomes", "tomes"],
+  ["/knowledge", "knowledge"],
+  ["/sources", "knowledge"],
+];
+
+for (const [input, expected] of routes) {
+  assert.equal(detectView(input), expected, `${input} should route to ${expected}`);
+}
+
+const naturalLanguagePrompts = [
+  "history of transformers",
+  "which library does this use",
+  "summary of my notes",
+  "can you quiz me conversationally first?",
+  "tell me about audio transformers",
+  "what collection did this paper come from?",
+  "show me documents about attention",
+];
+
+for (const input of naturalLanguagePrompts) {
+  assert.equal(detectView(input), null, `${input} should stay in chat`);
+}
+
+console.log("command routing tests passed");
diff --git a/frontend/scripts/test-sage-api.mjs b/frontend/scripts/test-sage-api.mjs
new file mode 100644
index 0000000..dabef9a
--- /dev/null
+++ b/frontend/scripts/test-sage-api.mjs
@@ -0,0 +1,19 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+
+const source = readFileSync(new URL("../src/lib/sage-api.ts", import.meta.url), "utf8");
+const apiFetchMatch = source.match(/async function apiFetch[\s\S]*?\n}\n/);
+assert.ok(apiFetchMatch, "apiFetch function should exist");
+
+const apiFetchSource = apiFetchMatch[0];
+const ensureIndex = apiFetchSource.indexOf("await ensureDesktopBackend()");
+const baseIndex = apiFetchSource.indexOf("const base = getApiBaseUrl()");
+
+assert.ok(ensureIndex >= 0, "apiFetch should ensure the Tauri sidecar before requests");
+assert.ok(baseIndex >= 0, "apiFetch should resolve the API base URL");
+assert.ok(
+  ensureIndex < baseIndex,
+  "apiFetch should wait for the desktop sidecar before building and issuing the request",
+);
+
+console.log("sage api sidecar readiness tests passed");
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 5bda21a..49bda4c 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,140 +1,429 @@
 "use client";
 
 import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import CommandBar from "@/components/CommandBar";
-import QuizWidget, { SAMPLE_QUESTIONS } from "@/components/QuizWidget";
-import FlashcardWidget, { SAMPLE_FLASHCARDS } from "@/components/FlashcardWidget";
-import AudioPlayerWidget, { SAMPLE_TRACK } from "@/components/AudioPlayerWidget";
-import ReportViewWidget, { SAMPLE_REPORT } from "@/components/ReportViewWidget";
+import type { FormEvent, KeyboardEvent, ReactNode } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import type { Transition, Variants } from "framer-motion";
+import AudioView from "@/components/AudioView";
+import ChatWidget from "@/components/ChatWidget";
+import FlashcardsView from "@/components/FlashcardsView";
 import HistoryPanel from "@/components/HistoryPanel";
+import KnowledgeBaseWidget from "@/components/KnowledgeBaseWidget";
+import QuizView from "@/components/QuizView";
+import ReportView from "@/components/ReportView";
 import TomeSelector from "@/components/TomeSelector";
-import ChatWidget from "@/components/ChatWidget";
+import { detectView } from "@/lib/command-routing";
+import type { RoutedView } from "@/lib/command-routing";
+
+type ViewState = "idle" | "dashboard" | "chat" | RoutedView;
 
-type ViewState = "idle" | "quiz" | "flashcards" | "audio" | "report" | "history" | "tomes" | "chat";
+const generatedViews = new Set<ViewState>(["quiz", "flashcards", "audio", "report"]);
+
+const capabilities: Array<{ label: string; icon: string; prompt?: string; view: ViewState }> = [
+  { label: "Sources", icon: "▤", view: "knowledge" },
+  { label: "Report", icon: "✎", prompt: "Generate a report for this Tome", view: "report" },
+  { label: "Quiz", icon: "?", prompt: "Create a quiz for this Tome", view: "quiz" },
+  { label: "Flashcards", icon: "◇", prompt: "Create flashcards for this Tome", view: "flashcards" },
+  { label: "Audio", icon: "♪", prompt: "Generate an audio review for this Tome", view: "audio" },
+  { label: "Chat", icon: "⌁", view: "chat" },
+];
 
 export default function Home() {
   const [viewState, setViewState] = useState<ViewState>("idle");
+  const [generationPrompt, setGenerationPrompt] = useState<string>("");
+  const [chatQuery, setChatQuery] = useState<string>("");
 
   const handleSubmit = (text: string) => {
-    const lower = text.toLowerCase().trim();
-
-    if (lower.includes("quiz")) {
-      setViewState("quiz");
-    } else if (lower.includes("flashcard") || lower.includes("flash card")) {
-      setViewState("flashcards");
-    } else if (lower.includes("audio") || lower.includes("listen") || lower.includes("podcast")) {
-      setViewState("audio");
-    } else if (lower.includes("report") || lower.includes("study guide") || lower.includes("summary")) {
-      setViewState("report");
-    } else if (lower.includes("history")) {
-      setViewState("history");
-    } else if (lower.includes("tome") || lower.includes("collection") || lower.includes("library")) {
-      setViewState("tomes");
+    const route = detectView(text);
+    if (route) {
+      if (generatedViews.has(route)) {
+        setGenerationPrompt(text);
+      }
+      setViewState(route);
     } else {
+      setChatQuery(text);
       setViewState("chat");
     }
   };
 
+  /** Called from inside ChatWidget. Returns true if it routed away from chat. */
+  const handleChatCommand = (text: string): boolean => {
+    const route = detectView(text);
+    if (!route) return false;
+    if (generatedViews.has(route)) {
+      setGenerationPrompt(text);
+    }
+    setViewState(route);
+    return true;
+  };
+
   const handleBack = () => {
     setViewState("idle");
   };
 
-  const cardVariants = {
+  const cardVariants: Variants = {
     initial: { opacity: 0, y: 16, scale: 0.97 },
     animate: { opacity: 1, y: 0, scale: 1 },
     exit: { opacity: 0, y: -10, scale: 0.97 },
   };
 
-  const cardTransition = { duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] };
+  const cardTransition: Transition = { duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] };
 
   return (
-    <main className="relative w-full min-h-screen flex flex-col items-center pt-24 pb-12 gap-5">
-      {/* Ambient glow */}
-      <div className="ambient-glow" />
-
-      {/* Command bar — always visible, shifts up when content appears */}
-      <div
-        className={`relative z-10 transition-all duration-500 ease-out ${
-          viewState !== "idle" ? "pt-0" : "pt-8"
-        }`}
+    <main className="relative min-h-screen w-full overflow-hidden bg-[#080807] text-[#ede6d5]">
+      <div className="pointer-events-none absolute inset-x-0 top-[-12rem] h-[36rem] bg-[radial-gradient(circle_at_center,rgba(242,168,93,0.12),transparent_62%)]" />
+      <div className="pointer-events-none absolute right-[-12rem] top-16 h-[32rem] w-[32rem] rounded-full bg-[rgba(171,199,173,0.07)] blur-[110px]" />
+      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1180px] flex-col px-5 py-8 sm:px-8 lg:px-10">
+        <TopBar viewState={viewState} onNavigate={setViewState} />
+
+        <AnimatePresence mode="wait">
+          {viewState === "idle" && (
+            <motion.div key="home" {...cardVariants} transition={cardTransition} className="w-full flex-1">
+              <TomeHome onSubmit={handleSubmit} onNavigate={setViewState} />
+            </motion.div>
+          )}
+
+          {viewState === "dashboard" && (
+            <motion.div key="dashboard" {...cardVariants} transition={cardTransition} className="w-full flex-1">
+              <TomeDashboard onNavigate={setViewState} />
+            </motion.div>
+          )}
+
+          {viewState === "quiz" && (
+            <FocusShell keyName="quiz" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <QuizView prompt={generationPrompt} />
+            </FocusShell>
+          )}
+
+          {viewState === "flashcards" && (
+            <FocusShell keyName="flashcards" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <FlashcardsView prompt={generationPrompt} />
+            </FocusShell>
+          )}
+
+          {viewState === "audio" && (
+            <FocusShell keyName="audio" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <AudioView prompt={generationPrompt} />
+            </FocusShell>
+          )}
+
+          {viewState === "report" && (
+            <FocusShell keyName="report" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <ReportView prompt={generationPrompt} />
+            </FocusShell>
+          )}
+
+          {viewState === "history" && (
+            <FocusShell keyName="history" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <HistoryPanel />
+            </FocusShell>
+          )}
+
+          {viewState === "tomes" && (
+            <FocusShell keyName="tomes" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <TomeSelector />
+            </FocusShell>
+          )}
+
+          {viewState === "knowledge" && (
+            <FocusShell keyName="knowledge" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <KnowledgeBaseWidget />
+            </FocusShell>
+          )}
+
+          {viewState === "chat" && (
+            <FocusShell keyName="chat" variants={cardVariants} transition={cardTransition} onBack={handleBack}>
+              <ChatWidget initialQuery={chatQuery} onCommand={handleChatCommand} />
+            </FocusShell>
+          )}
+        </AnimatePresence>
+      </div>
+    </main>
+  );
+}
+
+function TopBar({ viewState, onNavigate }: { viewState: ViewState; onNavigate: (view: ViewState) => void }) {
+  return (
+    <header className="flex flex-col gap-4 pb-8 sm:flex-row sm:items-center sm:justify-between">
+      <button
+        onClick={() => onNavigate("idle")}
+        className="flex w-fit items-center gap-3 text-left text-[0.72rem] uppercase tracking-[0.16em] text-[#9f9788] transition-colors hover:text-[#ede6d5]"
       >
-        <CommandBar onSubmit={handleSubmit} />
+        <span className="grid h-8 w-8 place-items-center rounded-full border border-[#f2a85d]/20 bg-[#f2a85d]/10 text-[#f2a85d]">
+          ✦
+        </span>
+        <span>Sage · Tome Home</span>
+      </button>
+
+      <nav className="flex w-full gap-1 overflow-x-auto rounded-full border border-white/10 bg-[#11110f]/70 p-1 backdrop-blur sm:w-fit">
+        <NavPill active={viewState === "idle"} onClick={() => onNavigate("idle")}>Home</NavPill>
+        <NavPill active={viewState === "dashboard"} onClick={() => onNavigate("dashboard")}>Dashboard</NavPill>
+        <NavPill active={viewState === "history"} onClick={() => onNavigate("history")}>History</NavPill>
+        <NavPill active={viewState === "tomes"} onClick={() => onNavigate("tomes")}>Tomes</NavPill>
+      </nav>
+    </header>
+  );
+}
+
+function TomeHome({ onSubmit, onNavigate }: { onSubmit: (text: string) => void; onNavigate: (view: ViewState) => void }) {
+  const [prompt, setPrompt] = useState("");
+
+  const submitPrompt = () => {
+    const trimmed = prompt.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setPrompt("");
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    submitPrompt();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submitPrompt();
+    }
+  };
+
+  return (
+    <section className="grid min-h-[calc(100vh-8rem)] place-items-center pb-16 pt-4">
+      <div className="w-full max-w-[820px] text-center">
+        <div className="mb-5 inline-flex items-center gap-2 text-sm text-[#9f9788]">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#d8b978] shadow-[0_0_22px_rgba(216,185,120,0.44)]" />
+          <span>Tome Home</span>
+        </div>
+
+        <h1 className="font-serif text-[clamp(2.8rem,7vw,5.4rem)] font-normal leading-[0.96] tracking-[-0.05em]">
+          What should this Tome help with next?
+        </h1>
+        <p className="mx-auto mt-5 max-w-[650px] text-base leading-7 text-[#9f9788]">
+          Ask questions, generate study materials, manage sources, or jump into focused work for this Tome.
+        </p>
+
+        <button
+          onClick={() => onNavigate("tomes")}
+          className="mt-7 inline-flex flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-full border border-white/10 bg-white/[0.055] px-4 py-2.5 text-sm text-[#ede6d5] transition-colors hover:border-[#f2a85d]/30 hover:bg-[#f2a85d]/10"
+        >
+          <span className="text-[#9f9788]">Preview Tome</span>
+          <strong className="font-medium">Sample Tome Home</strong>
+          <span className="text-[#9f9788]">placeholder status</span>
+        </button>
+
+        <form
+          onSubmit={handleSubmit}
+          className="mt-5 overflow-hidden rounded-[30px] border border-white/15 bg-gradient-to-b from-[#1f1d18]/95 to-[#131210]/95 text-left shadow-[0_30px_90px_rgba(0,0,0,0.42),inset_0_1px_0_rgba(255,255,255,0.045)]"
+        >
+          <textarea
+            value={prompt}
+            onChange={(event) => setPrompt(event.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask Sage about this Tome, or type / for Tome skills"
+            className="min-h-[156px] w-full resize-none border-0 bg-transparent px-6 py-6 pb-4 text-lg leading-7 text-[#ede6d5] outline-none placeholder:text-[#70695e] sm:px-8"
+            spellCheck={false}
+          />
+          <div className="flex flex-col gap-3 px-4 pb-4 text-sm text-[#6f675b] sm:flex-row sm:items-center sm:justify-between sm:px-5">
+            <button
+              type="button"
+              onClick={() => onNavigate("knowledge")}
+              className="inline-flex h-9 w-fit items-center gap-2 rounded-full border border-white/10 bg-black/15 px-3 text-[#9f9788] transition-colors hover:border-[#abc7ad]/30 hover:text-[#ede6d5]"
+            >
+              ＋ Add source
+            </button>
+            <div className="inline-flex h-9 w-fit items-center gap-2 rounded-full border border-white/10 bg-black/15 px-3 text-[#9f9788]">
+              Local / Cloud Adaptive <span aria-hidden="true">│</span> 🎙
+            </div>
+          </div>
+        </form>
+
+        <div className="mx-auto mt-5 flex max-w-[740px] flex-wrap justify-center gap-2.5" aria-label="Tome capabilities">
+          {capabilities.map((capability) => (
+            <CapabilityButton key={capability.label} {...capability} onSubmit={onSubmit} onNavigate={onNavigate} />
+          ))}
+        </div>
+        <p className="mx-auto mt-4 max-w-[660px] text-sm leading-6 text-[#6f675b]">
+          Generation skills use your current knowledge base and configured provider. Add sources first for grounded output;
+          audio falls back to browser narration when server-side speech is unavailable.
+        </p>
+
+        <button
+          onClick={() => onNavigate("dashboard")}
+          className="mt-6 rounded-full px-3 py-2 text-sm text-[#6f675b] transition-colors hover:text-[#ede6d5]"
+        >
+          View expanded Tome dashboard →
+        </button>
+      </div>
+    </section>
+  );
+}
+
+function TomeDashboard({ onNavigate }: { onNavigate: (view: ViewState) => void }) {
+  return (
+    <section className="grid gap-5 pb-16 lg:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
+      <article className="rounded-[26px] border border-white/10 bg-[#11110f]/75 p-6 shadow-[0_20px_70px_rgba(0,0,0,0.24)]">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <p className="text-sm text-[#9f9788]">Tome overview</p>
+            <h2 className="mt-1 text-2xl font-medium tracking-[-0.03em] text-[#ede6d5]">Expanded Tome Dashboard</h2>
+          </div>
+          <button
+            onClick={() => onNavigate("idle")}
+            className="w-fit rounded-full border border-white/10 px-3 py-1.5 text-sm text-[#9f9788] transition-colors hover:border-[#f2a85d]/30 hover:text-[#ede6d5]"
+          >
+            Back to Tome Home
+          </button>
+        </div>
+        <p className="mt-3 max-w-2xl leading-7 text-[#9f9788]">
+          Review sources, generated artifacts, freshness, and recent work for this Tome.
+        </p>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-[#d8b978]">
+          Preview statuses shown until Tome selection and generated artifact state are wired.
+        </p>
+
+        <div className="mt-6 grid gap-3 sm:grid-cols-2">
+          <DashboardCard title="Sources" detail="Manage uploaded notes and references" status="Live" tone="good" onClick={() => onNavigate("knowledge")} />
+          <DashboardCard title="Report" detail="Generate or revisit a study guide" status="Live" tone="good" onClick={() => onNavigate("report")} />
+          <DashboardCard title="Quiz" detail="Practice against your knowledge base" status="Live" tone="good" onClick={() => onNavigate("quiz")} />
+          <DashboardCard title="Audio" detail="Listen to a narrated review" status="Live" tone="good" onClick={() => onNavigate("audio")} />
+        </div>
+
+        <div className="mt-6 overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-[#1a1915]/90 to-[#0e0e0c]/90">
+          <div className="flex justify-between gap-3 border-b border-white/10 px-5 py-3 text-sm text-[#9f9788]">
+            <span>Focused component view</span>
+            <span>Report → Deep Work</span>
+          </div>
+          <div className="p-5">
+            <div className="my-3 h-2.5 rounded-full bg-white/10" />
+            <div className="my-3 h-2.5 w-[88%] rounded-full bg-white/10" />
+            <div className="my-3 h-2.5 w-[73%] rounded-full bg-white/10" />
+            <p className="mt-4 leading-7 text-[#9f9788]">
+              Capability chips route into live focused views for reports, quizzes, flashcards, audio, sources, and chat.
+            </p>
+          </div>
+        </div>
+      </article>
+
+      <aside className="rounded-[26px] border border-white/10 bg-[#11110f]/75 p-6 shadow-[0_20px_70px_rgba(0,0,0,0.24)]">
+        <h2 className="text-2xl font-medium tracking-[-0.03em] text-[#ede6d5]">Tome activity</h2>
+        <div className="mt-5 grid gap-3">
+          <DecisionRow label="Sources" text="Manage uploaded notes, papers, and references." />
+          <DecisionRow label="Artifacts" text="Generate reports, quizzes, flashcards, and audio." />
+          <DecisionRow label="Chat" text="Continue conversations grounded in your knowledge base." />
+          <DecisionRow label="History" text="Review recent work and generated outputs." />
+        </div>
+      </aside>
+    </section>
+  );
+}
+
+function FocusShell({
+  keyName,
+  variants,
+  transition,
+  onBack,
+  children,
+}: {
+  keyName: string;
+  variants: Variants;
+  transition: Transition;
+  onBack: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <motion.div key={keyName} variants={variants} initial="initial" animate="animate" exit="exit" transition={transition} className="w-full flex-1">
+      <div className="relative z-10 flex w-full flex-col items-center gap-4 pb-16 pt-4">
+        {children}
+        <BackButton onClick={onBack} />
       </div>
+    </motion.div>
+  );
+}
 
-      {/* Content area */}
-      <AnimatePresence mode="wait">
-        {viewState === "quiz" && (
-          <motion.div key="quiz" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <QuizWidget title="Transformers Quiz" questions={SAMPLE_QUESTIONS} />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-
-        {viewState === "flashcards" && (
-          <motion.div key="flashcards" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <FlashcardWidget title="Transformer Concepts" cards={SAMPLE_FLASHCARDS} />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-
-        {viewState === "audio" && (
-          <motion.div key="audio" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <AudioPlayerWidget track={SAMPLE_TRACK} />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-
-        {viewState === "report" && (
-          <motion.div key="report" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <ReportViewWidget report={SAMPLE_REPORT} />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-
-        {viewState === "history" && (
-          <motion.div key="history" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <HistoryPanel />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-
-        {viewState === "tomes" && (
-          <motion.div key="tomes" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <TomeSelector />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-
-        {viewState === "chat" && (
-          <motion.div key="chat" {...cardVariants} transition={cardTransition}
-            className="relative z-10 w-full flex flex-col items-center gap-4">
-            <ChatWidget />
-            <BackButton onClick={handleBack} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </main>
+function NavPill({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`whitespace-nowrap rounded-full px-3.5 py-2 text-sm transition-colors ${
+        active ? "bg-white/10 text-[#ede6d5]" : "text-[#9f9788] hover:text-[#ede6d5]"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function CapabilityButton({
+  label,
+  icon,
+  prompt,
+  view,
+  onSubmit,
+  onNavigate,
+}: {
+  label: string;
+  icon: string;
+  prompt?: string;
+  view: ViewState;
+  onSubmit: (text: string) => void;
+  onNavigate: (view: ViewState) => void;
+}) {
+  const handleClick = () => {
+    if (prompt) {
+      onSubmit(prompt);
+    } else {
+      onNavigate(view);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="inline-flex min-h-11 items-center gap-2 rounded-full border border-white/10 bg-white/[0.055] px-4 text-sm text-[#9f9788] transition-all duration-150 hover:-translate-y-0.5 hover:border-[#f2a85d]/30 hover:bg-[#f2a85d]/10 hover:text-[#ede6d5]"
+    >
+      <span className="text-[#d8b978]">{icon}</span>
+      {label}
+    </button>
+  );
+}
+
+function DashboardCard({ title, detail, status, tone, onClick }: { title: string; detail: string; status: string; tone: "good" | "warn" | "muted"; onClick: () => void }) {
+  const toneClasses = {
+    good: "border-[#abc7ad]/20 bg-[#abc7ad]/10 text-[#abc7ad]",
+    warn: "border-[#d8b978]/20 bg-[#d8b978]/10 text-[#d8b978]",
+    muted: "border-white/10 bg-white/5 text-[#9f9788]",
+  }[tone];
+
+  return (
+    <button
+      onClick={onClick}
+      className="flex min-h-28 flex-col justify-between rounded-[18px] border border-white/[0.075] bg-white/[0.045] p-4 text-left transition-colors hover:border-[#f2a85d]/25 hover:bg-[#f2a85d]/10"
+    >
+      <div>
+        <b className="text-sm text-[#ede6d5]">{title}</b>
+        <p className="mt-2 text-sm leading-6 text-[#6f675b]">{detail}</p>
+      </div>
+      <span className={`mt-3 w-fit rounded-full border px-2 py-1 text-[0.68rem] ${toneClasses}`}>{status}</span>
+    </button>
+  );
+}
+
+function DecisionRow({ label, text }: { label: string; text: string }) {
+  return (
+    <div className="grid gap-2 rounded-[18px] border border-white/[0.07] bg-white/[0.04] p-4 sm:grid-cols-[112px_1fr] sm:gap-4">
+      <strong className="text-[#ede6d5]">{label}</strong>
+      <span className="leading-6 text-[#9f9788]">{text}</span>
+    </div>
   );
 }
 
-/** Shared back button */
 function BackButton({ onClick }: { onClick: () => void }) {
   return (
     <button
       onClick={onClick}
-      className="px-4 py-1.5 rounded-full text-label-sm
-                 border border-outline-variant/15 text-on-surface-variant
-                 hover:border-outline-variant/30 hover:text-on-surface
-                 transition-all duration-150"
+      className="rounded-full border border-white/10 px-4 py-1.5 text-sm text-[#9f9788] transition-all duration-150 hover:border-[#f2a85d]/30 hover:text-[#ede6d5]"
     >
-      ← Back
+      ← Back to Tome Home
     </button>
   );
 }
diff --git a/frontend/src/components/AudioPlayerWidget.tsx b/frontend/src/components/AudioPlayerWidget.tsx
index 68ba4f1..755a2fb 100644
--- a/frontend/src/components/AudioPlayerWidget.tsx
+++ b/frontend/src/components/AudioPlayerWidget.tsx
@@ -21,6 +21,13 @@ interface AudioTrack {
 
 interface AudioPlayerWidgetProps {
   track: AudioTrack;
+  /** Direct URL to a synthesized audio file (e.g. OpenAI TTS MP3). When
+   *  provided, a real <audio> element drives playback. When null/undefined
+   *  the widget falls back to browser SpeechSynthesis. */
+  audioUrl?: string | null;
+  /** Full narration script — used for SpeechSynthesis fallback when no
+   *  audioUrl is available. If absent the concatenated transcript is used. */
+  script?: string;
 }
 
 // --- Sample data for prototyping ---
@@ -92,35 +99,68 @@ function formatTime(seconds: number): string {
 
 // --- Component ---
 
-export default function AudioPlayerWidget({ track }: AudioPlayerWidgetProps) {
+export default function AudioPlayerWidget({ track, audioUrl, script }: AudioPlayerWidgetProps) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [showTranscript, setShowTranscript] = useState(true);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const transcriptRef = useRef<HTMLDivElement>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const speechRef = useRef<SpeechSynthesisUtterance | null>(null);
+  const speechStartRef = useRef<number>(0);
+  const speechBaseTimeRef = useRef<number>(0);
 
-  // Simulate playback with a timer
+  // --- Mode A: real <audio> element (server-side TTS available) ---
   useEffect(() => {
+    if (!audioUrl) return;
+    const el = audioRef.current;
+    if (!el) return;
+    const onTime = () => setCurrentTime(el.currentTime);
+    const onEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(el.duration || track.duration);
+    };
+    el.addEventListener("timeupdate", onTime);
+    el.addEventListener("ended", onEnded);
+    return () => {
+      el.removeEventListener("timeupdate", onTime);
+      el.removeEventListener("ended", onEnded);
+    };
+  }, [audioUrl, track.duration]);
+
+  // --- Mode B: SpeechSynthesis fallback. Drive a timer for transcript
+  //     highlighting since the browser API doesn't expose word-level timing. ---
+  useEffect(() => {
+    if (audioUrl) return; // Mode A drives currentTime directly
     if (isPlaying) {
+      speechStartRef.current = performance.now();
       intervalRef.current = setInterval(() => {
-        setCurrentTime((prev) => {
-          if (prev >= track.duration) {
-            setIsPlaying(false);
-            return track.duration;
-          }
-          return prev + 0.1;
-        });
+        const elapsed = (performance.now() - speechStartRef.current) / 1000;
+        const t = speechBaseTimeRef.current + elapsed;
+        if (t >= track.duration) {
+          setCurrentTime(track.duration);
+          setIsPlaying(false);
+        } else {
+          setCurrentTime(t);
+        }
       }, 100);
-    } else {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
+    } else if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
     }
     return () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
-  }, [isPlaying, track.duration]);
+  }, [isPlaying, audioUrl, track.duration]);
+
+  // Cancel any in-flight speech if the widget unmounts or the track changes.
+  useEffect(() => {
+    return () => {
+      if (typeof window !== "undefined" && "speechSynthesis" in window) {
+        window.speechSynthesis.cancel();
+      }
+    };
+  }, [track.id]);
 
   // Auto-scroll transcript to active segment
   useEffect(() => {
@@ -133,29 +173,102 @@ export default function AudioPlayerWidget({ track }: AudioPlayerWidgetProps) {
     }
   }, [currentTime, showTranscript]);
 
+  const speechAvailable =
+    typeof window !== "undefined" && "speechSynthesis" in window;
+
+  const speakFromTime = useCallback(
+    (fromTime: number) => {
+      if (!speechAvailable) return;
+      const synth = window.speechSynthesis;
+      synth.cancel();
+
+      // Build the utterance from the segment at fromTime onwards so the
+      // audio you hear lines up with the highlighted transcript.
+      const remaining = track.transcript
+        .filter((s) => s.endTime > fromTime)
+        .map((s) => s.text)
+        .join(" ");
+      const text = remaining || script || track.transcript.map((s) => s.text).join(" ");
+      if (!text.trim()) return;
+
+      const utter = new SpeechSynthesisUtterance(text);
+      utter.rate = 1.0;
+      utter.onend = () => {
+        if (speechRef.current === utter) {
+          setIsPlaying(false);
+          setCurrentTime(track.duration);
+        }
+      };
+      speechRef.current = utter;
+      speechBaseTimeRef.current = fromTime;
+      speechStartRef.current = performance.now();
+      synth.speak(utter);
+    },
+    [speechAvailable, track.transcript, track.duration, script],
+  );
+
   const handlePlayPause = useCallback(() => {
-    if (currentTime >= track.duration) {
-      setCurrentTime(0);
+    if (audioUrl && audioRef.current) {
+      const el = audioRef.current;
+      if (currentTime >= track.duration) {
+        el.currentTime = 0;
+        setCurrentTime(0);
+      }
+      if (el.paused) {
+        void el.play();
+        setIsPlaying(true);
+      } else {
+        el.pause();
+        setIsPlaying(false);
+      }
+      return;
     }
-    setIsPlaying((p) => !p);
-  }, [currentTime, track.duration]);
+
+    // SpeechSynthesis path
+    if (!speechAvailable) return;
+    const synth = window.speechSynthesis;
+    if (isPlaying) {
+      synth.cancel();
+      setIsPlaying(false);
+      return;
+    }
+    if (currentTime >= track.duration) setCurrentTime(0);
+    speakFromTime(currentTime >= track.duration ? 0 : currentTime);
+    setIsPlaying(true);
+  }, [audioUrl, currentTime, track.duration, isPlaying, speechAvailable, speakFromTime]);
+
+  const seekTo = useCallback(
+    (t: number) => {
+      const clamped = Math.max(0, Math.min(track.duration, t));
+      setCurrentTime(clamped);
+      if (audioUrl && audioRef.current) {
+        audioRef.current.currentTime = clamped;
+        return;
+      }
+      // SpeechSynthesis can't truly seek — restart from the new spot if playing.
+      if (isPlaying && speechAvailable) {
+        speakFromTime(clamped);
+      }
+    },
+    [audioUrl, track.duration, isPlaying, speechAvailable, speakFromTime],
+  );
 
   const handleSeek = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       const rect = e.currentTarget.getBoundingClientRect();
       const pct = (e.clientX - rect.left) / rect.width;
-      setCurrentTime(Math.max(0, Math.min(track.duration, pct * track.duration)));
+      seekTo(pct * track.duration);
     },
-    [track.duration]
+    [track.duration, seekTo],
   );
 
   const handlePrev = useCallback(() => {
-    setCurrentTime((t) => Math.max(0, t - 15));
-  }, []);
+    seekTo(currentTime - 15);
+  }, [seekTo, currentTime]);
 
   const handleNext = useCallback(() => {
-    setCurrentTime((t) => Math.min(track.duration, t + 15));
-  }, [track.duration]);
+    seekTo(currentTime + 15);
+  }, [seekTo, currentTime]);
 
   const progress = track.duration > 0 ? (currentTime / track.duration) * 100 : 0;
 
@@ -165,6 +278,14 @@ export default function AudioPlayerWidget({ track }: AudioPlayerWidgetProps) {
 
   return (
     <div className="w-full max-w-[640px] px-4">
+      {audioUrl && (
+        <audio
+          ref={audioRef}
+          src={audioUrl}
+          preload="auto"
+          className="hidden"
+        />
+      )}
       <div
         className="bg-surface/80 backdrop-blur-[32px] border border-outline-variant/15
                    rounded-2xl p-6
@@ -312,15 +433,29 @@ export default function AudioPlayerWidget({ track }: AudioPlayerWidgetProps) {
               {track.voice}
             </span>
           </div>
-          <button
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-label-sm
-                       border border-outline-variant/15 text-on-surface-variant
-                       hover:border-outline-variant/30 hover:text-on-surface
-                       transition-all duration-150 uppercase tracking-[0.05em]"
-          >
-            <span className="material-symbols-outlined text-sm">download</span>
-            Download
-          </button>
+          {audioUrl ? (
+            <a
+              href={audioUrl}
+              download={`${track.id || "sage-audio"}.mp3`}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-label-sm
+                         border border-outline-variant/15 text-on-surface-variant
+                         hover:border-outline-variant/30 hover:text-on-surface
+                         transition-all duration-150 uppercase tracking-[0.05em]"
+            >
+              <span className="material-symbols-outlined text-sm">download</span>
+              Download
+            </a>
+          ) : (
+            <span
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-label-sm
+                         border border-outline-variant/10 text-on-surface-variant/50
+                         uppercase tracking-[0.05em] cursor-not-allowed"
+              title="Server-side TTS not configured — playback uses your browser's voice."
+            >
+              <span className="material-symbols-outlined text-sm">graphic_eq</span>
+              Browser TTS
+            </span>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/AudioView.tsx b/frontend/src/components/AudioView.tsx
new file mode 100644
index 0000000..432b87f
--- /dev/null
+++ b/frontend/src/components/AudioView.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import AudioPlayerWidget from "./AudioPlayerWidget";
+import {
+  generateAudio,
+  resolveAudioUrl,
+  type AudioGeneration,
+  type GeneratedSource,
+} from "@/lib/sage-api";
+
+interface AudioViewProps {
+  prompt: string;
+  tomeId?: string;
+  voice?: string;
+}
+
+export default function AudioView({ prompt, tomeId, voice }: AudioViewProps) {
+  const [data, setData] = useState<AudioGeneration | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setData(null);
+    setError(null);
+    generateAudio({ topic: prompt || undefined, tomeId, voice })
+      .then((res) => {
+        if (!cancelled) setData(res);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [prompt, tomeId, voice, reloadKey]);
+
+  if (error) {
+    return (
+      <StatusCard
+        icon="error"
+        title="Couldn't generate audio"
+        detail={error}
+        onRetry={() => setReloadKey((k) => k + 1)}
+      />
+    );
+  }
+
+  if (!data) {
+    return (
+      <StatusCard
+        icon="hourglass_top"
+        title="Generating narration…"
+        detail="Searching your knowledge base and writing the script. If server-side TTS isn't configured, playback will use your browser's voice."
+      />
+    );
+  }
+
+  const track = {
+    id: data.id,
+    title: data.title,
+    voice: data.voice,
+    duration: data.duration,
+    transcript: data.segments,
+  };
+  const audioUrl = data.audio_url ? resolveAudioUrl(data.audio_url) : null;
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <AudioPlayerWidget track={track} audioUrl={audioUrl} script={data.script} />
+      {data.sources.length > 0 && <SourcesFooter sources={data.sources} />}
+    </div>
+  );
+}
+
+function StatusCard({
+  icon, title, detail, onRetry,
+}: { icon: string; title: string; detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="w-full max-w-[640px] px-4">
+      <div className="bg-surface/80 backdrop-blur-[32px] border border-outline-variant/15 rounded-2xl px-6 py-8
+                      shadow-[0_8px_32px_rgba(0,0,0,0.4)] flex flex-col items-center gap-2 text-center">
+        <span className="material-symbols-outlined text-primary text-3xl">{icon}</span>
+        <div className="text-title-md text-on-surface">{title}</div>
+        {detail && <div className="text-body-md text-on-surface-variant max-w-[480px]">{detail}</div>}
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="mt-2 px-3 py-1 rounded-full text-label-md border border-outline-variant/20
+                       text-on-surface-variant hover:border-primary/40 hover:text-on-surface transition-colors"
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SourcesFooter({ sources }: { sources: GeneratedSource[] }) {
+  const unique = Array.from(new Map(sources.map((s) => [s.document_id, s])).values());
+  return (
+    <div className="w-full max-w-[640px] px-4 text-label-sm text-on-surface-variant flex flex-wrap gap-1.5 justify-center">
+      <span className="text-on-surface-variant/60">Grounded in:</span>
+      {unique.map((s) => (
+        <span
+          key={s.document_id}
+          className="bg-surface-container-low border border-outline-variant/10 rounded-full px-2.5 py-0.5"
+        >
+          {s.document_title}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ChatWidget.tsx b/frontend/src/components/ChatWidget.tsx
index cb6d765..4ee2e06 100644
--- a/frontend/src/components/ChatWidget.tsx
+++ b/frontend/src/components/ChatWidget.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { sendChat, getRuntimeConfig } from "@/lib/sage-api";
 
 // --- Types ---
 
@@ -14,8 +15,14 @@ interface ChatMessage {
 interface ChatWidgetProps {
   tomeName?: string;
   providerName?: string;
+  tomeId?: string;
+  provider?: string;
+  model?: string;
   messages?: ChatMessage[];
+  initialQuery?: string;
   onSend?: (message: string) => void;
+  /** If returns true, ChatWidget skips backend chat — parent has routed elsewhere. */
+  onCommand?: (message: string) => boolean;
   isLoading?: boolean;
 }
 
@@ -52,48 +59,103 @@ export const SAMPLE_MESSAGES: ChatMessage[] = [
 
 export default function ChatWidget({
   tomeName = "Deep Learning Foundations",
-  providerName = "GPT-4o",
-  messages: initialMessages = SAMPLE_MESSAGES,
+  providerName,
+  tomeId,
+  provider,
+  model,
+  messages: initialMessages,
+  initialQuery,
   onSend,
-  isLoading = false,
+  onCommand,
+  isLoading: isLoadingProp,
 }: ChatWidgetProps) {
-  const [messages, setMessages] = useState(initialMessages);
+  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages ?? []);
   const [input, setInput] = useState("");
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
+  const [resolvedModel, setResolvedModel] = useState<string | undefined>(model);
+
+  useEffect(() => {
+    if (providerName || model) return;
+    let cancelled = false;
+    getRuntimeConfig()
+      .then((cfg) => {
+        if (!cancelled) setResolvedModel(cfg.model || cfg.provider);
+      })
+      .catch(() => {
+        if (!cancelled) setResolvedModel("offline");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [providerName, model]);
+
+  const modelLabel = providerName ?? resolvedModel ?? "…";
   const scrollRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const initialSentRef = useRef(false);
+
+  const isLoading = isLoadingProp ?? internalLoading;
 
   // Auto-scroll to bottom
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages]);
+  }, [messages, isLoading]);
+
+  const sendToBackend = useCallback(
+    async (text: string) => {
+      const userMsg: ChatMessage = {
+        id: `u-${Date.now()}`,
+        role: "user",
+        content: text,
+        timestamp: new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      onSend?.(text);
+      setInternalLoading(true);
+
+      try {
+        const res = await sendChat(text, { sessionId, tomeId, provider, model });
+        if (!sessionId) setSessionId(res.session_id);
+        const assistantMsg: ChatMessage = {
+          id: `a-${Date.now()}`,
+          role: "assistant",
+          content: res.response,
+          timestamp: new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
+        };
+        setMessages((prev) => [...prev, assistantMsg]);
+      } catch (err) {
+        const errorMsg: ChatMessage = {
+          id: `e-${Date.now()}`,
+          role: "assistant",
+          content: `**Error reaching backend:** ${err instanceof Error ? err.message : String(err)}`,
+          timestamp: new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
+        };
+        setMessages((prev) => [...prev, errorMsg]);
+      } finally {
+        setInternalLoading(false);
+      }
+    },
+    [sessionId, tomeId, provider, model, onSend],
+  );
+
+  // Auto-send initial query (e.g. from CommandBar)
+  useEffect(() => {
+    if (initialQuery && !initialSentRef.current) {
+      initialSentRef.current = true;
+      if (onCommand?.(initialQuery)) return;
+      void sendToBackend(initialQuery);
+    }
+  }, [initialQuery, sendToBackend, onCommand]);
 
   const handleSend = () => {
     const text = input.trim();
     if (!text || isLoading) return;
-
-    const userMsg: ChatMessage = {
-      id: `u-${Date.now()}`,
-      role: "user",
-      content: text,
-      timestamp: new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
-    };
-
-    setMessages((prev) => [...prev, userMsg]);
     setInput("");
-    onSend?.(text);
-
-    // Simulate assistant response for prototyping
-    setTimeout(() => {
-      const assistantMsg: ChatMessage = {
-        id: `a-${Date.now()}`,
-        role: "assistant",
-        content: `I received your message: "${text}". In the real app, the agent would process this using the ${tomeName} tome and ${providerName}.`,
-        timestamp: new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
-      };
-      setMessages((prev) => [...prev, assistantMsg]);
-    }, 1500);
+    if (onCommand?.(text)) return;
+    void sendToBackend(text);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -123,8 +185,7 @@ export default function ChatWidget({
               <span className="text-label-sm text-on-surface-variant truncate max-w-[140px]">{tomeName}</span>
             </div>
             <div className="flex items-center gap-1 bg-surface-container-high rounded-full px-2.5 py-1 border border-outline-variant/10">
-              <span className="text-label-sm text-primary leading-none">⚡</span>
-              <span className="text-label-sm text-on-surface-variant uppercase leading-none">{providerName}</span>
+              <span className="text-label-sm text-on-surface-variant uppercase leading-none">{modelLabel}</span>
             </div>
           </div>
         </div>
@@ -134,11 +195,10 @@ export default function ChatWidget({
           {messages.map((msg) => (
             <div key={msg.id} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
               <div
-                className={`max-w-[85%] rounded-2xl px-4 py-3 ${
-                  msg.role === "user"
+                className={`max-w-[85%] rounded-2xl px-4 py-3 ${msg.role === "user"
                     ? "bg-primary/15 border border-primary/20 text-on-surface"
                     : "bg-surface-container-low border border-outline-variant/10 text-on-surface-variant"
-                }`}
+                  }`}
               >
                 <div className="text-body-md leading-relaxed whitespace-pre-wrap">{msg.content}</div>
                 <div className={`text-label-sm mt-1.5 ${msg.role === "user" ? "text-primary/50" : "text-on-surface-variant/40"}`}>
diff --git a/frontend/src/components/CommandBar.tsx b/frontend/src/components/CommandBar.tsx
index 45b963c..e255799 100644
--- a/frontend/src/components/CommandBar.tsx
+++ b/frontend/src/components/CommandBar.tsx
@@ -1,20 +1,43 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import { getRuntimeConfig } from "@/lib/sage-api";
 
 interface CommandBarProps {
   onSubmit: (response: string) => void;
+  /** When true, the side button shows close and returns to idle on click. */
+  isKnowledgeBaseOpen?: boolean;
+  onKnowledgeBaseToggle?: () => void;
 }
 
-export default function CommandBar({ onSubmit }: CommandBarProps) {
+export default function CommandBar({
+  onSubmit,
+  isKnowledgeBaseOpen = false,
+  onKnowledgeBaseToggle,
+}: CommandBarProps) {
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [modelLabel, setModelLabel] = useState("…");
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     inputRef.current?.focus();
   }, []);
 
+  useEffect(() => {
+    let cancelled = false;
+    getRuntimeConfig()
+      .then((cfg) => {
+        if (!cancelled) setModelLabel(cfg.model || cfg.provider || "unknown");
+      })
+      .catch(() => {
+        if (!cancelled) setModelLabel("offline");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!query.trim() || isLoading) return;
@@ -27,9 +50,9 @@ export default function CommandBar({ onSubmit }: CommandBarProps) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="relative z-10 w-full max-w-[600px] px-4">
+    <form onSubmit={handleSubmit} className="relative z-10 w-full max-w-[660px] px-4 flex items-center gap-2">
       <div
-        className="h-12 w-full bg-surface/80 backdrop-blur-[32px] rounded-full border border-outline-variant/15
+        className="h-12 flex-1 bg-surface/80 backdrop-blur-[32px] rounded-full border border-outline-variant/15
                    flex items-center px-4
                    shadow-[0_8px_32px_rgba(0,0,0,0.4),0_0_60px_rgba(173,198,255,0.04)]
                    transition-all duration-300 hover:border-outline-variant/30
@@ -58,12 +81,33 @@ export default function CommandBar({ onSubmit }: CommandBarProps) {
 
         {/* Provider badge */}
         <div className="flex items-center gap-1 bg-surface-container-high rounded-full px-2.5 py-1 border border-outline-variant/10 flex-shrink-0 cursor-default hover:border-primary/40 transition-colors">
-          <span className="text-label-sm text-primary leading-none">⚡</span>
           <span className="text-label-sm text-on-surface-variant font-medium uppercase leading-none mt-[1px]">
-            GPT-4o
+            {modelLabel}
           </span>
         </div>
       </div>
+
+      {/* Knowledge base: open (library) or close (X) when already open */}
+      <button
+        type="button"
+        onClick={() => onKnowledgeBaseToggle?.()}
+        title={
+          isKnowledgeBaseOpen
+            ? "Close knowledge base"
+            : "Browse and upload knowledge base documents"
+        }
+        aria-label={isKnowledgeBaseOpen ? "Close knowledge base" : "Open knowledge base"}
+        className="h-12 w-12 flex-shrink-0 rounded-full bg-surface/80 backdrop-blur-[32px]
+                   border border-outline-variant/15
+                   shadow-[0_8px_32px_rgba(0,0,0,0.4),0_0_60px_rgba(173,198,255,0.04)]
+                   flex items-center justify-center text-on-surface-variant
+                   hover:border-primary/40 hover:text-primary
+                   transition-all duration-300"
+      >
+        <span className="material-symbols-outlined text-xl" aria-hidden>
+          {isKnowledgeBaseOpen ? "close" : "library_add"}
+        </span>
+      </button>
     </form>
   );
 }
diff --git a/frontend/src/components/FlashcardsView.tsx b/frontend/src/components/FlashcardsView.tsx
new file mode 100644
index 0000000..6c824e6
--- /dev/null
+++ b/frontend/src/components/FlashcardsView.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import FlashcardWidget from "./FlashcardWidget";
+import {
+  generateFlashcards,
+  type GeneratedFlashcard,
+  type GeneratedSource,
+} from "@/lib/sage-api";
+
+interface FlashcardsViewProps {
+  prompt: string;
+  tomeId?: string;
+  count?: number;
+}
+
+export default function FlashcardsView({ prompt, tomeId, count = 6 }: FlashcardsViewProps) {
+  const [cards, setCards] = useState<GeneratedFlashcard[] | null>(null);
+  const [sources, setSources] = useState<GeneratedSource[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setCards(null);
+    setError(null);
+    setSources([]);
+    generateFlashcards({ topic: prompt || undefined, tomeId, count })
+      .then((res) => {
+        if (cancelled) return;
+        setCards(res.cards);
+        setSources(res.sources);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [prompt, tomeId, count, reloadKey]);
+
+  if (error) {
+    return (
+      <StatusCard
+        icon="error"
+        title="Couldn't generate flashcards"
+        detail={error}
+        onRetry={() => setReloadKey((k) => k + 1)}
+      />
+    );
+  }
+
+  if (!cards) {
+    return <StatusCard icon="hourglass_top" title="Generating flashcards…" detail="Searching your knowledge base and writing cards." />;
+  }
+
+  const title = prompt.trim() ? `Flashcards: ${prompt.trim()}` : "Flashcards";
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <FlashcardWidget title={title} cards={cards} />
+      {sources.length > 0 && <SourcesFooter sources={sources} />}
+    </div>
+  );
+}
+
+function StatusCard({
+  icon, title, detail, onRetry,
+}: { icon: string; title: string; detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="w-full max-w-[640px] px-4">
+      <div className="bg-surface/80 backdrop-blur-[32px] border border-outline-variant/15 rounded-2xl px-6 py-8
+                      shadow-[0_8px_32px_rgba(0,0,0,0.4)] flex flex-col items-center gap-2 text-center">
+        <span className="material-symbols-outlined text-primary text-3xl">{icon}</span>
+        <div className="text-title-md text-on-surface">{title}</div>
+        {detail && <div className="text-body-md text-on-surface-variant max-w-[480px]">{detail}</div>}
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="mt-2 px-3 py-1 rounded-full text-label-md border border-outline-variant/20
+                       text-on-surface-variant hover:border-primary/40 hover:text-on-surface transition-colors"
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SourcesFooter({ sources }: { sources: GeneratedSource[] }) {
+  const unique = Array.from(new Map(sources.map((s) => [s.document_id, s])).values());
+  return (
+    <div className="w-full max-w-[640px] px-4 text-label-sm text-on-surface-variant flex flex-wrap gap-1.5 justify-center">
+      <span className="text-on-surface-variant/60">Grounded in:</span>
+      {unique.map((s) => (
+        <span
+          key={s.document_id}
+          className="bg-surface-container-low border border-outline-variant/10 rounded-full px-2.5 py-0.5"
+        >
+          {s.document_title}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/HistoryPanel.tsx b/frontend/src/components/HistoryPanel.tsx
index 7845ca3..5b0f408 100644
--- a/frontend/src/components/HistoryPanel.tsx
+++ b/frontend/src/components/HistoryPanel.tsx
@@ -1,67 +1,138 @@
 "use client";
 
-import { useState } from "react";
-
-// --- Types ---
+import { useEffect, useMemo, useState } from "react";
+import { listChatSessions, type ChatSessionSummary } from "@/lib/sage-api";
 
 interface HistoryItem {
   id: string;
-  type: "chat" | "quiz" | "flashcard" | "audio" | "report";
+  type: "chat";
   title: string;
   timestamp: string;
+  rawTimestamp: string;
   tomeName?: string;
 }
 
 interface HistoryPanelProps {
-  items?: HistoryItem[];
   onSelect?: (item: HistoryItem) => void;
 }
 
-// --- Sample data ---
-
-const ICONS: Record<string, { icon: string; color: string }> = {
-  chat: { icon: "chat_bubble", color: "text-blue-400" },
-  quiz: { icon: "quiz", color: "text-emerald-400" },
-  flashcard: { icon: "style", color: "text-amber-400" },
-  audio: { icon: "headphones", color: "text-violet-400" },
-  report: { icon: "description", color: "text-rose-400" },
+const ICONS: Record<HistoryItem["type"], { icon: string; color: string; label: string }> = {
+  chat: { icon: "chat_bubble", color: "text-blue-400", label: "Chat" },
 };
 
-export const SAMPLE_HISTORY: HistoryItem[] = [
-  { id: "1", type: "report", title: "Attention Mechanisms", timestamp: "2:34 PM", tomeName: "Deep Learning Foundations" },
-  { id: "2", type: "quiz", title: "Transformer Quiz", timestamp: "1:15 PM", tomeName: "Deep Learning Foundations" },
-  { id: "3", type: "audio", title: "Audio: BERT Architecture", timestamp: "12:02 PM", tomeName: "NLP Papers" },
-  { id: "4", type: "chat", title: "Explain backpropagation", timestamp: "11:30 AM", tomeName: "Deep Learning Foundations" },
-  { id: "5", type: "flashcard", title: "GPT Architecture Cards", timestamp: "Yesterday", tomeName: "NLP Papers" },
-  { id: "6", type: "report", title: "RLHF Overview", timestamp: "Yesterday", tomeName: "Alignment Research" },
-  { id: "7", type: "quiz", title: "CNN Fundamentals", timestamp: "2 days ago", tomeName: "Computer Vision" },
-  { id: "8", type: "chat", title: "Compare Adam vs SGD", timestamp: "2 days ago", tomeName: "Deep Learning Foundations" },
-];
+function deriveTitle(session: ChatSessionSummary): string {
+  const raw = (session.first_user_message ?? "").trim();
+  if (!raw) return "(empty session)";
+  const firstLine = raw.split("\n", 1)[0]!;
+  return firstLine.length > 90 ? firstLine.slice(0, 87) + "…" : firstLine;
+}
+
+/** Render a timestamp relative-ish: today → time, otherwise short date. */
+function formatTimestamp(iso: string): { display: string; bucket: string } {
+  if (!iso) return { display: "", bucket: "Older" };
+  // SQLite "datetime('now')" returns "YYYY-MM-DD HH:MM:SS" in UTC without a Z suffix.
+  // The Document.created_at default uses ISO format. Handle both.
+  const normalized = iso.includes("T") ? iso : iso.replace(" ", "T") + "Z";
+  const d = new Date(normalized);
+  if (Number.isNaN(d.getTime())) return { display: iso, bucket: "Older" };
 
-// --- Component ---
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfYesterday = new Date(startOfToday);
+  startOfYesterday.setDate(startOfYesterday.getDate() - 1);
+  const startOfWeek = new Date(startOfToday);
+  startOfWeek.setDate(startOfWeek.getDate() - 6);
 
-export default function HistoryPanel({ items = SAMPLE_HISTORY, onSelect }: HistoryPanelProps) {
+  if (d >= startOfToday) {
+    return {
+      display: d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
+      bucket: "Today",
+    };
+  }
+  if (d >= startOfYesterday) {
+    return {
+      display: d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
+      bucket: "Yesterday",
+    };
+  }
+  if (d >= startOfWeek) {
+    return {
+      display: d.toLocaleDateString([], { weekday: "short", hour: "numeric", minute: "2-digit" }),
+      bucket: "Earlier this week",
+    };
+  }
+  return {
+    display: d.toLocaleDateString([], { year: "numeric", month: "short", day: "numeric" }),
+    bucket: "Older",
+  };
+}
+
+export default function HistoryPanel({ onSelect }: HistoryPanelProps) {
+  const [sessions, setSessions] = useState<ChatSessionSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
-  const [filterType, setFilterType] = useState<string | null>(null);
-
-  const filtered = items.filter((item) => {
-    const matchesSearch = !searchQuery || item.title.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesType = !filterType || item.type === filterType;
-    return matchesSearch && matchesType;
-  });
-
-  // Group by time
-  const groups: { label: string; items: HistoryItem[] }[] = [];
-  let currentGroup: { label: string; items: HistoryItem[] } | null = null;
-
-  for (const item of filtered) {
-    const label = item.timestamp.includes("PM") || item.timestamp.includes("AM") ? "Today" : item.timestamp;
-    if (!currentGroup || currentGroup.label !== label) {
-      currentGroup = { label, items: [] };
-      groups.push(currentGroup);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    listChatSessions(200)
+      .then((data) => {
+        if (!cancelled) setSessions(data);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const items = useMemo<HistoryItem[]>(
+    () =>
+      sessions
+        // Skip sessions that never received a user message — they're noise.
+        .filter((s) => s.message_count > 0 && s.first_user_message)
+        .map((s) => {
+          const ts = formatTimestamp(s.last_message_at);
+          return {
+            id: s.id,
+            type: "chat" as const,
+            title: deriveTitle(s),
+            timestamp: ts.display,
+            rawTimestamp: s.last_message_at,
+            tomeName: s.tome_name ?? undefined,
+          };
+        }),
+    [sessions],
+  );
+
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(
+      (item) =>
+        item.title.toLowerCase().includes(q) ||
+        (item.tomeName ?? "").toLowerCase().includes(q),
+    );
+  }, [items, searchQuery]);
+
+  const groups = useMemo(() => {
+    const map = new Map<string, HistoryItem[]>();
+    for (const item of filtered) {
+      const bucket = formatTimestamp(item.rawTimestamp).bucket;
+      const list = map.get(bucket);
+      if (list) list.push(item);
+      else map.set(bucket, [item]);
     }
-    currentGroup.items.push(item);
-  }
+    const order = ["Today", "Yesterday", "Earlier this week", "Older"];
+    return order
+      .filter((label) => map.has(label))
+      .map((label) => ({ label, items: map.get(label)! }));
+  }, [filtered]);
 
   return (
     <div className="w-full max-w-[640px] px-4">
@@ -70,9 +141,13 @@ export default function HistoryPanel({ items = SAMPLE_HISTORY, onSelect }: Histo
                    rounded-2xl overflow-hidden
                    shadow-[0_8px_32px_rgba(0,0,0,0.4),0_0_60px_rgba(173,198,255,0.04)]"
       >
-        {/* Header + Search */}
         <div className="p-5 pb-3 border-b border-outline-variant/10">
-          <h2 className="text-headline-sm font-semibold text-on-surface mb-3">History</h2>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-headline-sm font-semibold text-on-surface">History</h2>
+            <span className="text-label-sm text-on-surface-variant/60">
+              {loading ? "…" : `${items.length} session${items.length === 1 ? "" : "s"}`}
+            </span>
+          </div>
           <div className="relative">
             <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant/40 text-lg">
               search
@@ -88,50 +163,35 @@ export default function HistoryPanel({ items = SAMPLE_HISTORY, onSelect }: Histo
                          focus:border-primary/40 transition-colors duration-150"
             />
           </div>
+        </div>
 
-          {/* Filter pills */}
-          <div className="flex items-center gap-1.5 mt-3 overflow-x-auto">
-            <button
-              onClick={() => setFilterType(null)}
-              className={`px-3 py-1 rounded-full text-label-sm whitespace-nowrap transition-all duration-150
-                ${!filterType
-                  ? "bg-primary/15 text-primary border border-primary/30"
-                  : "text-on-surface-variant border border-outline-variant/10 hover:border-outline-variant/25"
-                }`}
-            >
-              All
-            </button>
-            {Object.entries(ICONS).map(([type, { icon, color }]) => (
-              <button
-                key={type}
-                onClick={() => setFilterType(filterType === type ? null : type)}
-                className={`flex items-center gap-1 px-3 py-1 rounded-full text-label-sm whitespace-nowrap transition-all duration-150
-                  ${filterType === type
-                    ? "bg-primary/15 text-primary border border-primary/30"
-                    : "text-on-surface-variant border border-outline-variant/10 hover:border-outline-variant/25"
-                  }`}
-              >
-                <span className={`material-symbols-outlined text-sm ${filterType === type ? "text-primary" : color}`}>{icon}</span>
-                {type.charAt(0).toUpperCase() + type.slice(1)}
-              </button>
-            ))}
+        {error && (
+          <div className="mx-5 mt-3 text-label-md text-error bg-error/10 border border-error/20 rounded-lg px-3 py-2">
+            {error}
           </div>
-        </div>
+        )}
 
-        {/* History list */}
         <div className="max-h-[400px] overflow-y-auto">
-          {groups.length === 0 ? (
+          {loading && (
+            <div className="p-8 text-center text-body-md text-on-surface-variant/60">
+              Loading history…
+            </div>
+          )}
+          {!loading && groups.length === 0 && (
             <div className="p-8 text-center text-body-md text-on-surface-variant/50">
-              No matching history
+              {searchQuery
+                ? "No matching history"
+                : "No conversations yet. Ask Sage something to start one."}
             </div>
-          ) : (
+          )}
+          {!loading &&
             groups.map((group) => (
               <div key={group.label}>
                 <div className="px-5 py-2 text-label-sm text-on-surface-variant/50 uppercase tracking-[0.05em]">
                   {group.label}
                 </div>
                 {group.items.map((item) => {
-                  const { icon, color } = ICONS[item.type] || ICONS.chat;
+                  const { icon, color } = ICONS[item.type];
                   return (
                     <button
                       key={item.id}
@@ -139,20 +199,25 @@ export default function HistoryPanel({ items = SAMPLE_HISTORY, onSelect }: Histo
                       className="w-full flex items-center gap-3 px-5 py-3 text-left
                                  hover:bg-surface-container-high/40 transition-colors duration-150"
                     >
-                      <span className={`material-symbols-outlined text-xl flex-shrink-0 ${color}`}>{icon}</span>
+                      <span className={`material-symbols-outlined text-xl flex-shrink-0 ${color}`}>
+                        {icon}
+                      </span>
                       <div className="flex-1 min-w-0">
                         <p className="text-body-md text-on-surface truncate">{item.title}</p>
                         {item.tomeName && (
-                          <p className="text-label-sm text-on-surface-variant/50 mt-0.5">{item.tomeName}</p>
+                          <p className="text-label-sm text-on-surface-variant/50 mt-0.5">
+                            {item.tomeName}
+                          </p>
                         )}
                       </div>
-                      <span className="text-label-sm text-on-surface-variant/40 flex-shrink-0">{item.timestamp}</span>
+                      <span className="text-label-sm text-on-surface-variant/40 flex-shrink-0">
+                        {item.timestamp}
+                      </span>
                     </button>
                   );
                 })}
               </div>
-            ))
-          )}
+            ))}
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/KnowledgeBaseWidget.tsx b/frontend/src/components/KnowledgeBaseWidget.tsx
new file mode 100644
index 0000000..18e408c
--- /dev/null
+++ b/frontend/src/components/KnowledgeBaseWidget.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  deleteDocument,
+  getDocument,
+  listDocuments,
+  type DocumentDetail,
+  type DocumentSummary,
+} from "@/lib/sage-api";
+import UploadModal from "./UploadModal";
+
+function formatDate(iso: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString([], {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export default function KnowledgeBaseWidget() {
+  const [docs, setDocs] = useState<DocumentSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detail, setDetail] = useState<DocumentDetail | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [pendingDelete, setPendingDelete] = useState<string | null>(null);
+  const [uploadOpen, setUploadOpen] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listDocuments({ limit: 200 });
+      setDocs(data);
+      setSelectedId((prev) => (prev && data.some((d) => d.id === prev) ? prev : data[0]?.id ?? null));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    if (!selectedId) {
+      setDetail(null);
+      return;
+    }
+    let cancelled = false;
+    setDetailLoading(true);
+    getDocument(selectedId)
+      .then((d) => {
+        if (!cancelled) setDetail(d);
+      })
+      .catch((err) => {
+        if (!cancelled) setDetail(null);
+        console.error("Failed to load document detail:", err);
+      })
+      .finally(() => {
+        if (!cancelled) setDetailLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedId]);
+
+  const handleDelete = async (docId: string) => {
+    setPendingDelete(docId);
+    try {
+      await deleteDocument(docId);
+      setDocs((prev) => prev.filter((d) => d.id !== docId));
+      if (selectedId === docId) {
+        setSelectedId(null);
+        setDetail(null);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPendingDelete(null);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-[960px] px-4">
+      <div
+        className="bg-surface/80 backdrop-blur-[32px] border border-outline-variant/15
+                   rounded-2xl overflow-hidden flex flex-col
+                   shadow-[0_8px_32px_rgba(0,0,0,0.4),0_0_60px_rgba(173,198,255,0.04)]"
+        style={{ height: "560px" }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-outline-variant/10">
+          <div className="flex items-center gap-2">
+            <span className="material-symbols-outlined text-primary text-xl">database</span>
+            <h2 className="text-title-md font-medium text-on-surface">Knowledge base</h2>
+            <span className="text-label-sm text-on-surface-variant ml-1">
+              {loading ? "…" : `${docs.length} document${docs.length === 1 ? "" : "s"}`}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setUploadOpen(true)}
+              className="px-3 py-1 rounded-full text-label-sm text-primary
+                         border border-primary/30 hover:bg-primary/10 transition-colors"
+            >
+              <span className="material-symbols-outlined text-sm align-middle mr-1">upload_file</span>
+              Add document
+            </button>
+            <button
+              onClick={() => void refresh()}
+              disabled={loading}
+              className="px-3 py-1 rounded-full text-label-sm text-on-surface-variant
+                         border border-outline-variant/15 hover:border-outline-variant/30
+                         hover:text-on-surface transition-colors disabled:opacity-40"
+            >
+              <span className="material-symbols-outlined text-sm align-middle mr-1">refresh</span>
+              Refresh
+            </button>
+          </div>
+        </div>
+
+        <UploadModal
+          open={uploadOpen}
+          onClose={() => {
+            setUploadOpen(false);
+            void refresh();
+          }}
+        />
+
+        {error && (
+          <div className="mx-5 mt-3 text-label-md text-error bg-error/10 border border-error/20 rounded-lg px-3 py-2">
+            {error}
+          </div>
+        )}
+
+        {/* Body — two-pane */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* List */}
+          <div className="w-[340px] border-r border-outline-variant/10 overflow-y-auto">
+            {loading && (
+              <div className="p-5 text-body-md text-on-surface-variant">Loading…</div>
+            )}
+            {!loading && docs.length === 0 && (
+              <div className="p-5 text-body-md text-on-surface-variant">
+                Nothing here yet. Click &ldquo;Add document&rdquo; above to upload one.
+              </div>
+            )}
+            {!loading &&
+              docs.map((doc) => {
+                const isActive = doc.id === selectedId;
+                return (
+                  <button
+                    key={doc.id}
+                    onClick={() => setSelectedId(doc.id)}
+                    className={`w-full text-left px-4 py-3 border-b border-outline-variant/10 transition-colors ${
+                      isActive
+                        ? "bg-primary/10 border-l-2 border-l-primary/60"
+                        : "hover:bg-surface-container-low"
+                    }`}
+                  >
+                    <div className="text-body-md text-on-surface truncate">{doc.title}</div>
+                    <div className="text-label-sm text-on-surface-variant mt-0.5 flex items-center gap-2">
+                      <span className="uppercase tracking-wide">{doc.doc_type}</span>
+                      <span>·</span>
+                      <span>{doc.source}</span>
+                    </div>
+                    <div className="text-label-sm text-on-surface-variant/60 mt-0.5">
+                      {formatDate(doc.created_at)}
+                    </div>
+                  </button>
+                );
+              })}
+          </div>
+
+          {/* Detail */}
+          <div className="flex-1 overflow-y-auto p-5">
+            {!selectedId && !loading && (
+              <div className="text-body-md text-on-surface-variant">
+                Select a document to view details.
+              </div>
+            )}
+            {selectedId && detailLoading && (
+              <div className="text-body-md text-on-surface-variant">Loading details…</div>
+            )}
+            {detail && !detailLoading && (
+              <div className="flex flex-col gap-4">
+                <div>
+                  <div className="text-headline-sm text-on-surface">{detail.title}</div>
+                  <div className="text-label-sm text-on-surface-variant mt-1">
+                    {formatDate(detail.created_at)}
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <Stat label="Source" value={detail.source} />
+                  <Stat label="Type" value={detail.doc_type} />
+                  <Stat label="Chunks" value={String(detail.chunks)} />
+                  <Stat
+                    label="Content hash"
+                    value={detail.content_hash.slice(0, 12) + "…"}
+                    mono
+                  />
+                </div>
+
+                <div>
+                  <div className="text-label-md text-on-surface-variant mb-1">Tomes</div>
+                  {detail.tomes.length === 0 ? (
+                    <div className="text-body-md text-on-surface-variant/70">
+                      Not linked to any tome.
+                    </div>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {detail.tomes.map((t) => (
+                        <span
+                          key={t.id}
+                          className="text-label-sm bg-surface-container-low border border-outline-variant/15
+                                     rounded-full px-2.5 py-1 text-on-surface-variant"
+                        >
+                          {t.name}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <div className="text-label-md text-on-surface-variant mb-1">Preview</div>
+                  <div
+                    className="text-body-md text-on-surface whitespace-pre-wrap bg-surface-container-low
+                               border border-outline-variant/10 rounded-xl px-3 py-2 leading-relaxed"
+                  >
+                    {detail.content_preview || "(empty)"}
+                  </div>
+                </div>
+
+                <div className="pt-2 border-t border-outline-variant/10 flex justify-end">
+                  <button
+                    onClick={() => void handleDelete(detail.id)}
+                    disabled={pendingDelete === detail.id}
+                    className="px-3 py-1.5 rounded-full text-label-md text-error
+                               border border-error/30 hover:bg-error/10
+                               disabled:opacity-40 transition-colors"
+                  >
+                    <span className="material-symbols-outlined text-sm align-middle mr-1">
+                      delete
+                    </span>
+                    {pendingDelete === detail.id ? "Deleting…" : "Delete document"}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="bg-surface-container-low border border-outline-variant/10 rounded-lg px-3 py-2">
+      <div className="text-label-sm text-on-surface-variant">{label}</div>
+      <div className={`text-body-md text-on-surface truncate ${mono ? "font-mono" : ""}`}>
+        {value}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/QuizView.tsx b/frontend/src/components/QuizView.tsx
new file mode 100644
index 0000000..47f77ef
--- /dev/null
+++ b/frontend/src/components/QuizView.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import QuizWidget from "./QuizWidget";
+import {
+  generateQuiz,
+  type GeneratedQuizQuestion,
+  type GeneratedSource,
+} from "@/lib/sage-api";
+
+interface QuizViewProps {
+  prompt: string;
+  tomeId?: string;
+  count?: number;
+}
+
+export default function QuizView({ prompt, tomeId, count = 5 }: QuizViewProps) {
+  const [questions, setQuestions] = useState<GeneratedQuizQuestion[] | null>(null);
+  const [sources, setSources] = useState<GeneratedSource[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setQuestions(null);
+    setError(null);
+    setSources([]);
+    generateQuiz({ topic: prompt || undefined, tomeId, count })
+      .then((res) => {
+        if (cancelled) return;
+        setQuestions(res.questions);
+        setSources(res.sources);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [prompt, tomeId, count, reloadKey]);
+
+  if (error) {
+    return (
+      <StatusCard
+        icon="error"
+        title="Couldn't generate quiz"
+        detail={error}
+        onRetry={() => setReloadKey((k) => k + 1)}
+      />
+    );
+  }
+
+  if (!questions) {
+    return <StatusCard icon="hourglass_top" title="Generating quiz…" detail="Searching your knowledge base and writing questions." />;
+  }
+
+  const title = prompt.trim() ? `Quiz: ${prompt.trim()}` : "Quiz";
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <QuizWidget title={title} questions={questions} />
+      {sources.length > 0 && <SourcesFooter sources={sources} />}
+    </div>
+  );
+}
+
+function StatusCard({
+  icon, title, detail, onRetry,
+}: { icon: string; title: string; detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="w-full max-w-[640px] px-4">
+      <div className="bg-surface/80 backdrop-blur-[32px] border border-outline-variant/15 rounded-2xl px-6 py-8
+                      shadow-[0_8px_32px_rgba(0,0,0,0.4)] flex flex-col items-center gap-2 text-center">
+        <span className="material-symbols-outlined text-primary text-3xl">{icon}</span>
+        <div className="text-title-md text-on-surface">{title}</div>
+        {detail && <div className="text-body-md text-on-surface-variant max-w-[480px]">{detail}</div>}
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="mt-2 px-3 py-1 rounded-full text-label-md border border-outline-variant/20
+                       text-on-surface-variant hover:border-primary/40 hover:text-on-surface transition-colors"
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SourcesFooter({ sources }: { sources: GeneratedSource[] }) {
+  const unique = Array.from(new Map(sources.map((s) => [s.document_id, s])).values());
+  return (
+    <div className="w-full max-w-[640px] px-4 text-label-sm text-on-surface-variant flex flex-wrap gap-1.5 justify-center">
+      <span className="text-on-surface-variant/60">Grounded in:</span>
+      {unique.map((s) => (
+        <span
+          key={s.document_id}
+          className="bg-surface-container-low border border-outline-variant/10 rounded-full px-2.5 py-0.5"
+        >
+          {s.document_title}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ReportView.tsx b/frontend/src/components/ReportView.tsx
new file mode 100644
index 0000000..7d05606
--- /dev/null
+++ b/frontend/src/components/ReportView.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ReportViewWidget from "./ReportViewWidget";
+import {
+  generateReport,
+  type GeneratedSource,
+  type ReportGeneration,
+} from "@/lib/sage-api";
+
+interface ReportViewProps {
+  prompt: string;
+  tomeId?: string;
+}
+
+export default function ReportView({ prompt, tomeId }: ReportViewProps) {
+  const [report, setReport] = useState<ReportGeneration | null>(null);
+  const [sources, setSources] = useState<GeneratedSource[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setReport(null);
+    setError(null);
+    setSources([]);
+    generateReport({ topic: prompt || undefined, tomeId })
+      .then((res) => {
+        if (cancelled) return;
+        setReport(res);
+        setSources(res.sources);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [prompt, tomeId, reloadKey]);
+
+  if (error) {
+    return (
+      <StatusCard
+        icon="error"
+        title="Couldn't generate report"
+        detail={error}
+        onRetry={() => setReloadKey((k) => k + 1)}
+      />
+    );
+  }
+
+  if (!report) {
+    return (
+      <StatusCard
+        icon="hourglass_top"
+        title="Generating report…"
+        detail="Synthesizing your knowledge base into a structured report."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-3 w-full">
+      <ReportViewWidget
+        report={{
+          title: report.title,
+          subtitle: report.subtitle ?? undefined,
+          sourceDocs: report.sourceDocs ?? undefined,
+          toc: report.toc,
+          content: report.content,
+        }}
+      />
+      {sources.length > 0 && <SourcesFooter sources={sources} />}
+    </div>
+  );
+}
+
+function StatusCard({
+  icon, title, detail, onRetry,
+}: { icon: string; title: string; detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="w-full max-w-[640px] px-4">
+      <div className="bg-surface/80 backdrop-blur-[32px] border border-outline-variant/15 rounded-2xl px-6 py-8
+                      shadow-[0_8px_32px_rgba(0,0,0,0.4)] flex flex-col items-center gap-2 text-center">
+        <span className="material-symbols-outlined text-primary text-3xl">{icon}</span>
+        <div className="text-title-md text-on-surface">{title}</div>
+        {detail && <div className="text-body-md text-on-surface-variant max-w-[480px]">{detail}</div>}
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="mt-2 px-3 py-1 rounded-full text-label-md border border-outline-variant/20
+                       text-on-surface-variant hover:border-primary/40 hover:text-on-surface transition-colors"
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SourcesFooter({ sources }: { sources: GeneratedSource[] }) {
+  const unique = Array.from(new Map(sources.map((s) => [s.document_id, s])).values());
+  return (
+    <div className="w-full max-w-[800px] px-4 text-label-sm text-on-surface-variant flex flex-wrap gap-1.5 justify-center">
+      <span className="text-on-surface-variant/60">Grounded in:</span>
+      {unique.map((s) => (
+        <span
+          key={s.document_id}
+          className="bg-surface-container-low border border-outline-variant/10 rounded-full px-2.5 py-0.5"
+        >
+          {s.document_title}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/UploadModal.tsx b/frontend/src/components/UploadModal.tsx
new file mode 100644
index 0000000..54299eb
--- /dev/null
+++ b/frontend/src/components/UploadModal.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ingestDocument } from "@/lib/sage-api";
+
+interface UploadModalProps {
+  open: boolean;
+  onClose: () => void;
+  tomeId?: string;
+}
+
+type Status =
+  | { kind: "idle" }
+  | { kind: "uploading" }
+  | { kind: "success"; title: string; chunks: number; deduplicated: boolean }
+  | { kind: "error"; message: string };
+
+const TEXT_EXTENSIONS = [".txt", ".md", ".markdown", ".rst", ".csv", ".json", ".log"];
+
+export default function UploadModal({ open, onClose, tomeId }: UploadModalProps) {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [filename, setFilename] = useState("");
+  const [status, setStatus] = useState<Status>({ kind: "idle" });
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setTitle("");
+      setContent("");
+      setFilename("");
+      setStatus({ kind: "idle" });
+      setDragOver(false);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+
+  const readFile = async (file: File) => {
+    const name = file.name;
+    const ext = name.slice(name.lastIndexOf(".")).toLowerCase();
+    if (!TEXT_EXTENSIONS.includes(ext) && !file.type.startsWith("text/")) {
+      setStatus({
+        kind: "error",
+        message: `Unsupported file type "${ext || file.type}". Use plain text (.txt, .md, .csv, .json) or paste content directly.`,
+      });
+      return;
+    }
+    const text = await file.text();
+    setContent(text);
+    setFilename(name);
+    if (!title.trim()) setTitle(name.replace(/\.[^.]+$/, ""));
+    setStatus({ kind: "idle" });
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) void readFile(file);
+    e.target.value = "";
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) void readFile(file);
+  };
+
+  const handleSubmit = async () => {
+    const finalTitle = title.trim() || filename || "Untitled";
+    const finalContent = content.trim();
+    if (!finalContent) {
+      setStatus({ kind: "error", message: "Add some content first." });
+      return;
+    }
+    setStatus({ kind: "uploading" });
+    try {
+      const res = await ingestDocument(finalTitle, finalContent, {
+        docType: filename ? "file" : "text",
+        sourceId: filename || "",
+        tomeId,
+      });
+      setStatus({
+        kind: "success",
+        title: res.title,
+        chunks: res.chunks,
+        deduplicated: res.deduplicated,
+      });
+      setContent("");
+      setTitle("");
+      setFilename("");
+    } catch (err) {
+      setStatus({
+        kind: "error",
+        message: err instanceof Error ? err.message : String(err),
+      });
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-[640px] mx-4 bg-surface border border-outline-variant/20 rounded-2xl
+                   shadow-[0_16px_48px_rgba(0,0,0,0.5)] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-outline-variant/10">
+          <div className="flex items-center gap-2">
+            <span className="material-symbols-outlined text-primary text-xl">upload_file</span>
+            <h2 className="text-title-md font-medium text-on-surface">Add to knowledge base</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors"
+            aria-label="Close"
+          >
+            <span className="material-symbols-outlined text-lg">close</span>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-5 flex flex-col gap-4">
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Document title"
+            className="bg-surface-container-low border border-outline-variant/10 rounded-xl px-3 py-2
+                       text-body-md text-on-surface placeholder:text-on-surface-variant/50
+                       outline-none focus:border-primary/40 transition-colors"
+          />
+
+          <div
+            onDragOver={(e) => {
+              e.preventDefault();
+              setDragOver(true);
+            }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={handleDrop}
+            className={`rounded-xl border border-dashed transition-colors p-4 flex flex-col gap-2 ${
+              dragOver
+                ? "border-primary/60 bg-primary/5"
+                : "border-outline-variant/25 bg-surface-container-low"
+            }`}
+          >
+            <div className="flex items-center justify-between text-label-sm text-on-surface-variant">
+              <span>
+                {filename
+                  ? `Loaded: ${filename}`
+                  : "Drop a text file here, or paste content below"}
+              </span>
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="px-2.5 py-1 rounded-md border border-outline-variant/15
+                           hover:border-primary/30 hover:text-on-surface transition-colors"
+              >
+                Choose file
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".txt,.md,.markdown,.rst,.csv,.json,.log,text/*"
+                onChange={handleFileChange}
+                className="hidden"
+              />
+            </div>
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Paste document content..."
+              rows={10}
+              className="bg-transparent text-body-md text-on-surface placeholder:text-on-surface-variant/50
+                         outline-none resize-y leading-relaxed"
+            />
+          </div>
+
+          {status.kind === "error" && (
+            <div className="text-label-md text-error bg-error/10 border border-error/20 rounded-lg px-3 py-2">
+              {status.message}
+            </div>
+          )}
+          {status.kind === "success" && (
+            <div className="text-label-md text-primary bg-primary/10 border border-primary/20 rounded-lg px-3 py-2">
+              {status.deduplicated
+                ? `Already in knowledge base: "${status.title}" (${status.chunks} chunks).`
+                : `Ingested "${status.title}" — ${status.chunks} chunks indexed.`}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3 border-t border-outline-variant/10 flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="px-4 py-1.5 rounded-full text-label-md text-on-surface-variant
+                       border border-outline-variant/15 hover:border-outline-variant/30
+                       hover:text-on-surface transition-colors"
+          >
+            Close
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={status.kind === "uploading" || !content.trim()}
+            className="px-4 py-1.5 rounded-full text-label-md bg-primary/20 border border-primary/30
+                       text-primary hover:bg-primary/30 transition-colors
+                       disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            {status.kind === "uploading" ? "Uploading..." : "Add to knowledge base"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/lib/command-routing.ts b/frontend/src/lib/command-routing.ts
new file mode 100644
index 0000000..1434759
--- /dev/null
+++ b/frontend/src/lib/command-routing.ts
@@ -0,0 +1,46 @@
+export type RoutedView = "quiz" | "flashcards" | "audio" | "report" | "history" | "tomes" | "knowledge";
+
+const slashCommands: Record<string, RoutedView> = {
+  "/quiz": "quiz",
+  "/test": "quiz",
+  "/flashcard": "flashcards",
+  "/flashcards": "flashcards",
+  "/audio": "audio",
+  "/listen": "audio",
+  "/podcast": "audio",
+  "/report": "report",
+  "/study-guide": "report",
+  "/history": "history",
+  "/tomes": "tomes",
+  "/tome": "tomes",
+  "/knowledge": "knowledge",
+  "/sources": "knowledge",
+  "/docs": "knowledge",
+};
+
+const chipPrompts: Record<string, RoutedView> = {
+  "generate a report for this tome": "report",
+  "create a quiz for this tome": "quiz",
+  "create flashcards for this tome": "flashcards",
+  "generate an audio review for this tome": "audio",
+};
+
+/**
+ * Map an explicit command/action to a Sage view.
+ *
+ * Natural-language questions must stay in chat. Routing is intentionally
+ * limited to slash commands and first-party capability chip prompts so phrases
+ * like "history of transformers" or "which library does this use" are not
+ * hijacked away from the assistant.
+ */
+export function detectView(text: string): RoutedView | null {
+  const lower = text.toLowerCase().trim();
+  if (!lower) return null;
+
+  const [command] = lower.split(/\s+/, 1);
+  if (command && slashCommands[command]) {
+    return slashCommands[command];
+  }
+
+  return chipPrompts[lower] ?? null;
+}
diff --git a/frontend/src/lib/sage-api.ts b/frontend/src/lib/sage-api.ts
index d5fb931..9fd795f 100644
--- a/frontend/src/lib/sage-api.ts
+++ b/frontend/src/lib/sage-api.ts
@@ -98,6 +98,7 @@ type FetchOpts = {
 };
 
 async function apiFetch<T>(path: string, opts: FetchOpts = {}): Promise<T> {
+  await ensureDesktopBackend();
   const base = getApiBaseUrl();
   const url = `${base}${path}`;
   const res = await fetch(url, {
@@ -112,6 +113,17 @@ async function apiFetch<T>(path: string, opts: FetchOpts = {}): Promise<T> {
   return res.json();
 }
 
+// ── Config ──
+
+export interface SageRuntimeConfig {
+  provider: string;
+  model: string;
+}
+
+export async function getRuntimeConfig(): Promise<SageRuntimeConfig> {
+  return apiFetch<SageRuntimeConfig>("/api/config");
+}
+
 // ── Tomes ──
 
 export interface Tome {
@@ -181,6 +193,42 @@ export async function ingestDocument(
   });
 }
 
+export interface DocumentSummary {
+  id: string;
+  title: string;
+  source: string;
+  doc_type: string;
+  content_hash: string;
+  created_at: string;
+}
+
+export interface DocumentDetail extends DocumentSummary {
+  chunks: number;
+  content_preview: string;
+  tomes: { id: string; name: string }[];
+}
+
+export async function listDocuments(
+  opts: { limit?: number; offset?: number } = {},
+): Promise<DocumentSummary[]> {
+  const params = new URLSearchParams();
+  if (opts.limit !== undefined) params.set("limit", String(opts.limit));
+  if (opts.offset !== undefined) params.set("offset", String(opts.offset));
+  const qs = params.toString();
+  const data = await apiFetch<{ documents: DocumentSummary[] }>(
+    `/api/knowledge/documents${qs ? `?${qs}` : ""}`,
+  );
+  return data.documents;
+}
+
+export async function getDocument(docId: string): Promise<DocumentDetail> {
+  return apiFetch<DocumentDetail>(`/api/knowledge/documents/${docId}`);
+}
+
+export async function deleteDocument(docId: string): Promise<void> {
+  await apiFetch(`/api/knowledge/documents/${docId}`, { method: "DELETE" });
+}
+
 export async function searchKnowledge(
   query: string, opts: { maxResults?: number; tomeId?: string } = {},
 ): Promise<{ results: unknown[]; formatted: string }> {
@@ -194,6 +242,175 @@ export async function searchKnowledge(
   });
 }
 
+// ── Chat sessions / history ──
+
+export interface ChatSessionSummary {
+  id: string;
+  tome_id: string | null;
+  tome_name: string | null;
+  provider: string;
+  model: string;
+  created_at: string;
+  last_message_at: string;
+  first_user_message: string | null;
+  message_count: number;
+}
+
+export async function listChatSessions(limit = 100): Promise<ChatSessionSummary[]> {
+  const data = await apiFetch<{ sessions: ChatSessionSummary[] }>(
+    `/api/chat/sessions?limit=${limit}`,
+  );
+  return data.sessions;
+}
+
+// ── Generation: flashcards & quizzes ──
+
+export interface GeneratedFlashcard {
+  id: string;
+  front: string;
+  back: string;
+}
+
+export interface GeneratedSource {
+  document_id: string;
+  document_title: string;
+  chunk_index: number;
+  similarity: number | null;
+}
+
+export interface FlashcardGeneration {
+  cards: GeneratedFlashcard[];
+  topic: string;
+  sources: GeneratedSource[];
+}
+
+export interface GeneratedQuizOption {
+  id: string;
+  text: string;
+}
+
+export interface GeneratedQuizQuestion {
+  id: string;
+  question: string;
+  options: GeneratedQuizOption[];
+  correctOptionId: string;
+  explanation?: string;
+}
+
+export interface QuizGeneration {
+  questions: GeneratedQuizQuestion[];
+  topic: string;
+  sources: GeneratedSource[];
+}
+
+export interface GenerateOpts {
+  topic?: string;
+  tomeId?: string;
+  count?: number;
+  provider?: string;
+  model?: string;
+}
+
+function generateBody(opts: GenerateOpts) {
+  return {
+    topic: opts.topic ?? null,
+    tome_id: opts.tomeId ?? null,
+    count: opts.count ?? 6,
+    provider: opts.provider ?? null,
+    model: opts.model ?? null,
+  };
+}
+
+export async function generateFlashcards(opts: GenerateOpts = {}): Promise<FlashcardGeneration> {
+  return apiFetch<FlashcardGeneration>("/api/generate/flashcards", {
+    method: "POST",
+    body: generateBody(opts),
+  });
+}
+
+export async function generateQuiz(opts: GenerateOpts = {}): Promise<QuizGeneration> {
+  return apiFetch<QuizGeneration>("/api/generate/quiz", {
+    method: "POST",
+    body: generateBody(opts),
+  });
+}
+
+// ── Generation: reports ──
+
+export interface ReportTocItem {
+  id: string;
+  title: string;
+}
+
+export interface ReportGeneration {
+  title: string;
+  subtitle: string | null;
+  sourceDocs: string | null;
+  toc: ReportTocItem[];
+  content: string;
+  sources: GeneratedSource[];
+  topic: string;
+}
+
+export async function generateReport(opts: GenerateOpts = {}): Promise<ReportGeneration> {
+  return apiFetch<ReportGeneration>("/api/generate/report", {
+    method: "POST",
+    body: generateBody(opts),
+  });
+}
+
+// ── Generation: audio narration ──
+
+export interface AudioSegment {
+  id: string;
+  text: string;
+  startTime: number;
+  endTime: number;
+}
+
+export interface AudioGeneration {
+  id: string;
+  title: string;
+  voice: string;
+  provider: string;
+  model: string;
+  script: string;
+  segments: AudioSegment[];
+  duration: number;
+  /** Backend-relative URL to an MP3 (OpenAI TTS). When null, the frontend
+   *  falls back to browser SpeechSynthesis for playback. */
+  audio_url: string | null;
+  sources: GeneratedSource[];
+  topic: string;
+}
+
+export interface GenerateAudioOpts {
+  topic?: string;
+  tomeId?: string;
+  voice?: string;
+  provider?: string;
+  model?: string;
+}
+
+export async function generateAudio(opts: GenerateAudioOpts = {}): Promise<AudioGeneration> {
+  return apiFetch<AudioGeneration>("/api/generate/audio", {
+    method: "POST",
+    body: {
+      topic: opts.topic ?? null,
+      tome_id: opts.tomeId ?? null,
+      voice: opts.voice ?? null,
+      provider: opts.provider ?? null,
+      model: opts.model ?? null,
+    },
+  });
+}
+
+/** Resolve a relative audio path to a fully-qualified URL using the active API base. */
+export function resolveAudioUrl(path: string): string {
+  if (/^https?:/i.test(path)) return path;
+  return `${getApiBaseUrl()}${path.startsWith("/") ? "" : "/"}${path}`;
+}
+
 // ── Chat ──
 
 export interface ChatResponse {