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/quiz-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { MessageResponse } from "@/components/ai-elements/message";
 import { cn } from "@/lib/utils";
@@ -26,16 +26,29 @@ import {
  *
  * Quiz: graded (single/multi-select + "I don't know").
  * Ask:  not graded (single/multi-select + "Other" free text, or text mode).
+ *
+ * The card owns selection state; the free-text field lives in the composer
+ * blob (one text input on screen, never two). `pendingText` is the controlled
+ * text: the note for select modes, the answer for text mode. `registerSubmit`
+ * lets the composer trigger submit (Enter in answer mode).
  */
 
+export interface QuizCardSubmitApi {
+	submit: () => void;
+	canSubmit: () => boolean;
+}
+
 export interface QuizCardProps {
 	toolName: "quiz" | "ask_user_question";
 	toolCallId: string;
 	input: QuizToolInput | AskToolInput;
 	onSubmit: (output: QuestionAnswerData) => void;
+	pendingText: string;
+	onPendingTextChange: (v: string) => void;
+	registerSubmit?: (api: QuizCardSubmitApi | null) => void;
 }
 
-export function QuizCard({ toolName, toolCallId, input, onSubmit }: QuizCardProps) {
+export function QuizCard({ toolName, toolCallId, input, onSubmit, pendingText, onPendingTextChange, registerSubmit }: QuizCardProps) {
 	const kind = toolName === "quiz" ? ("quiz" as const) : ("ask" as const);
 
 	// Build the canonical QuestionData once per question. Quiz options are
@@ -76,8 +89,9 @@ export function QuizCard({ toolName, toolCallId, input, onSubmit }: QuizCardProp
 	const [dontKnow, setDontKnow] = useState(false);
 	const [showOther, setShowOther] = useState(false);
 	const [other, setOther] = useState("");
-	const [text, setText] = useState("");
-	const [note, setNote] = useState("");
+	// Free text lives in the composer blob: note (select modes) or answer (text mode).
+	const note = pendingText;
+	const text = pendingText;
 
 	const toggle = (idx: number) => {
 		setDontKnow(false);
@@ -117,11 +131,19 @@ export function QuizCard({ toolName, toolCallId, input, onSubmit }: QuizCardProp
 			values: [...selected].map((i) => qd.options[i]!.value),
 			other: showOther ? other : undefined,
 			text: qd.mode === "text" ? text : undefined,
-			note: note.trim() || undefined,
+			note: qd.mode !== "text" ? note.trim() || undefined : undefined,
 		};
+		onPendingTextChange("");
 		onSubmit(buildAnswer(qd, req));
 	};
 
+	// Let the composer blob submit on Enter (answer mode).
+	useEffect(() => {
+		if (!registerSubmit) return;
+		registerSubmit({ submit, canSubmit: () => canSubmit });
+		return () => registerSubmit(null);
+	});
+
 	return (
 		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="quiz-card">
 			<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
@@ -200,24 +222,16 @@ export function QuizCard({ toolName, toolCallId, input, onSubmit }: QuizCardProp
 				</div>
 			)}
 
-			{(qd.mode === "text" || showOther) && (
+			{showOther && (
 				<textarea
 					className="mt-2 w-full rounded-lg border bg-background px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring"
-					rows={qd.mode === "text" ? 4 : 2}
-					placeholder={qd.mode === "text" ? "Type your answer…" : "Type your own answer…"}
-					value={qd.mode === "text" ? text : other}
-					onChange={(e) => (qd.mode === "text" ? setText(e.target.value) : setOther(e.target.value))}
+					rows={2}
+					placeholder="Type your own answer…"
+					value={other}
+					onChange={(e) => setOther(e.target.value)}
 				/>
 			)}
 
-			<input
-				type="text"
-				className="mt-2 w-full rounded-lg border bg-background px-3 py-1.5 text-sm outline-none focus:ring-1 focus:ring-ring"
-				placeholder="Add a note (optional) — anything you're unsure about"
-				value={note}
-				onChange={(e) => setNote(e.target.value)}
-			/>
-
 			<div className="mt-3 flex justify-end">
 				<Button size="sm" onClick={submit} disabled={!canSubmit}>
 					Submit answer