UI iteration 2: toggleable sidebar, floating composer blob, pending-question morph

Sidebar (replaces the modal drawer):
- Inline, toggleable, no backdrop/focus theft — can stay open while working
- Open state persists across pages (provider in root layout) and reloads
  (localStorage; starts closed server-side to avoid hydration mismatch,
  stored value applied post-mount; default open on first run)
- Hamburger in page headers only when closed; close button in sidebar header

Floating composer blob (per reference screenshot):
- Floats over the transcript (absolute overlay), persists at bottom while
  scrolling, content fades behind it (gradient mask); pb-44 scroll clearance
- Concentric corner radii: blob rounded-2xl(16px) − p-1.5(6px) = send
  rounded-[10px] = 25% of the 40px button; CornerDownLeft icon per reference
- Stop moved from header into the blob (busy → square icon)
- prompt-input.tsx + 7 orphan ui files pruned (attachments/command palette
  unused); hand-rolled Composer is ~100 lines and render-tested

Pending-question morph (one text field on screen, never two):
- Quiz/ask-select pending → blob becomes the note field (send hidden, hint
  line above); card's internal note input removed; Submit consumes it
- Ask free-text pending → blob becomes the answer field; its send submits
  via the card's registered submit api (ref bridge); Enter works
- Chat owns the single text state; card clears it on submit
- canSend for answer mode mirrors the card predicate directly — reading the
  ref during render lagged one commit (found in browser testing)

Widths: one shared column (max-w-3xl + px-4) for transcript, cards, and
composer — all three measured pixel-identical (left 416, width 736).
Assistant Message max-w-full/MessageContent w-full (was max-w-[95%]/w-fit —
the 'cards are a bit shorter' bug).

User messages render plain text again — no math pipeline on learner-authored
text (currency hazard accepted for the model only, guarded by the prompt).

Tests: 58 pass (5 new composer pins; card tests updated to controlled
props). Verified live: note flow, answer flow, sidebar persistence, float,
fade, zero console errors — plus the live model spontaneously honoring the
$ currency escape contract in a continuation.

components/home.tsx

@@ -2,15 +2,13 @@
 
 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 { SessionDrawer } from "@/components/session-drawer";
+import { CornerDownLeftIcon, WaypointsIcon } from "lucide-react";
+import { SidebarToggle } from "@/components/sidebar";
 
 /**
  * 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.
+ * pipeline lands), with the new-session blob docked below it. Sessions live
+ * in the toggleable sidebar.
  */
 export function Home() {
 	const router = useRouter();
@@ -37,7 +35,7 @@ export function Home() {
 	return (
 		<div className="flex h-dvh flex-col">
 			<header className="flex items-center gap-2 px-3 py-2">
-				<SessionDrawer />
+				<SidebarToggle />
 			</header>
 
 			{/* Graph — the main view. Placeholder until the knowledge graph lands. */}
@@ -52,26 +50,40 @@ export function Home() {
 				</div>
 			</main>
 
-			{/* New session input */}
-			<div className="px-4 pb-6">
-				<form
-					className="mx-auto flex w-full max-w-2xl gap-2"
+			{/* New session — same floating blob as the chat composer. */}
+			<div className="pb-4">
+				<div className="mx-auto w-full max-w-3xl px-4">
+					<form
+						className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
 					onSubmit={(e) => {
 						e.preventDefault();
 						void start();
 					}}
 				>
-					<Input
+					<textarea
 						value={topic}
 						onChange={(e) => setTopic(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !e.shiftKey) {
+								e.preventDefault();
+								void start();
+							}
+						}}
 						placeholder="What do you want to learn?"
 						autoFocus
-						className="h-11"
+						rows={1}
+						className="field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
 					/>
-					<Button type="submit" disabled={!topic.trim() || busy} className="h-11">
-						{busy ? "Starting…" : "Start"}
-					</Button>
-				</form>
+					<button
+						type="submit"
+						aria-label="Start session"
+						disabled={!topic.trim() || busy}
+						className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-colors hover:opacity-90 disabled:opacity-40"
+					>
+						<CornerDownLeftIcon className="size-5" />
+						</button>
+					</form>
+				</div>
 			</div>
 		</div>
 	);