UI iteration 1: app shell + full LaTeX pipeline

Layout:
- Home = knowledge-graph placeholder (main view) with new-session input
  docked below; session list moved out of home into a hamburger drawer
- SessionDrawer: slide-over session navigation (backdrop/ESC close, active
  highlight, fetches /api/chats on open) on both home and chat headers
- Chat header loses the back button — the drawer is the navigation

Math (inline $ was silently not rendering):
- @streamdown/math defaults singleDollarTextMath:false — now
  createMathPlugin({ singleDollarTextMath: true }) in message + reasoning
- katex.min.css imported in layout (streamdown does not inject plugin
  styles; display math only looked right via browser MathML fallback)
- QuizCard/AnsweredCard route question/options/explanation through
  MessageResponse; user chat bubbles render markdown+math too
- Currency hazard: micromark-extension-math@3.1 lacks pandoc's
  closing-digit rule, so bare '$5 and $10' parses as math — defense is at
  the source: system prompt now instructs escaped \$5 / 'USD' for money

Hydration fix (React #418):
- QuizCard shuffled options with Math.random() — server/client orders
  diverged. shuffleOptions now takes an injectable RNG; QuizCard passes
  seededRandom(toolCallId) (mulberry32/FNV-1a in question-core). Same
  question → same stable order across reloads; still varies per question.

Tests: 53 pass (5 new math-rendering pins incl. fenced-vs-one-line $$
behavior and the escaped-currency contract). tsc + next build clean.
Verified live in browser: inline/display math in text + cards, drawer
open/navigate/active-highlight/ESC, no console errors, no font 404s.

components/home.tsx

@@ -2,11 +2,17 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { WaypointsIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import type { ChatSummary } from "@/src/store/chats";
+import { SessionDrawer } from "@/components/session-drawer";
 
-export function Home({ chats }: { chats: ChatSummary[] }) {
+/**
+ * Home — the knowledge graph is the main view (placeholder until the graph
+ * pipeline lands), with the new-session input docked below it. Sessions live
+ * in the hamburger drawer.
+ */
+export function Home() {
 	const router = useRouter();
 	const [topic, setTopic] = useState("");
 	const [busy, setBusy] = useState(false);
@@ -29,50 +35,44 @@ export function Home({ chats }: { chats: ChatSummary[] }) {
 	};
 
 	return (
-		<main className="mx-auto flex min-h-dvh w-full max-w-2xl flex-col px-4 py-10">
-			<h1 className="mb-1 text-2xl font-semibold">Learning Harness</h1>
-			<p className="mb-8 text-sm text-muted-foreground">
-				A teacher with a memory. Start a session on anything you want to understand.
-			</p>
+		<div className="flex h-dvh flex-col">
+			<header className="flex items-center gap-2 px-3 py-2">
+				<SessionDrawer />
+			</header>
 
-			<form
-				className="mb-10 flex gap-2"
-				onSubmit={(e) => {
-					e.preventDefault();
-					void start();
-				}}
-			>
-				<Input
-					value={topic}
-					onChange={(e) => setTopic(e.target.value)}
-					placeholder="What do you want to learn?"
-					autoFocus
-				/>
-				<Button type="submit" disabled={!topic.trim() || busy}>
-					{busy ? "Starting…" : "Start"}
-				</Button>
-			</form>
-
-			<h2 className="mb-3 text-sm font-medium uppercase tracking-wide text-muted-foreground">Sessions</h2>
-			{chats.length === 0 ? (
-				<p className="text-sm text-muted-foreground">No sessions yet.</p>
-			) : (
-				<div className="flex flex-col gap-2">
-					{chats.map((c) => (
-						<button
-							key={c.id}
-							type="button"
-							onClick={() => router.push(`/chat/${c.id}`)}
-							className="rounded-lg border px-4 py-3 text-left transition-colors hover:bg-accent"
-						>
-							<div className="truncate font-medium">{c.title}</div>
-							<div className="text-xs text-muted-foreground">
-								{c.messageCount} messages · {new Date(c.updatedAt).toLocaleString()}
-							</div>
-						</button>
-					))}
+			{/* Graph — the main view. Placeholder until the knowledge graph lands. */}
+			<main className="flex flex-1 items-center justify-center px-4">
+				<div className="flex flex-col items-center gap-3 text-center text-muted-foreground">
+					<WaypointsIcon className="size-10 opacity-40" strokeWidth={1.25} />
+					<div className="text-lg font-medium text-foreground">Knowledge graph</div>
+					<p className="max-w-sm text-sm">
+						Every session you complete will map what you know — and where the edge of your
+						understanding is — right here.
+					</p>
 				</div>
-			)}
-		</main>
+			</main>
+
+			{/* New session input */}
+			<div className="px-4 pb-6">
+				<form
+					className="mx-auto flex w-full max-w-2xl gap-2"
+					onSubmit={(e) => {
+						e.preventDefault();
+						void start();
+					}}
+				>
+					<Input
+						value={topic}
+						onChange={(e) => setTopic(e.target.value)}
+						placeholder="What do you want to learn?"
+						autoFocus
+						className="h-11"
+					/>
+					<Button type="submit" disabled={!topic.trim() || busy} className="h-11">
+						{busy ? "Starting…" : "Start"}
+					</Button>
+				</form>
+			</div>
+		</div>
 	);
 }