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/composer.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { CornerDownLeftIcon, SquareIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The floating composer blob. Sits on top of the transcript (the parent
+ * overlays it), persists at the bottom while scrolling, content fades out
+ * behind it.
+ *
+ * Corner-radius math (concentric rounding — outer = inner + gap):
+ *   blob rounded-2xl (16px) − padding p-1.5 (6px) = button rounded-[10px].
+ *   10px is 25% of the 40px send button — matches the reference.
+ *
+ * Modes (one text field on screen, always):
+ *   chat   — normal message composer.
+ *   note   — a question is pending; text here becomes the answer's note.
+ *            No send action (the card's Submit sends); Enter = newline.
+ *   answer — a free-text ask is pending; this field IS the answer and the
+ *            send button submits it.
+ */
+export type ComposerMode = "chat" | "note" | "answer";
+
+const PLACEHOLDERS: Record<ComposerMode, string> = {
+	chat: "Ask, answer, or steer the lesson…",
+	note: "Add a note (optional) — anything you're unsure about",
+	answer: "Type your answer…",
+};
+
+export function Composer({
+	mode,
+	busy,
+	value,
+	onChange,
+	onSend,
+	onStop,
+	canSend,
+	autoFocus,
+}: {
+	mode: ComposerMode;
+	busy: boolean;
+	value: string;
+	onChange: (v: string) => void;
+	onSend: () => void;
+	onStop: () => void;
+	canSend: boolean;
+	autoFocus?: boolean;
+}) {
+	const showSend = mode !== "note";
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		// Enter sends (chat/answer); Shift+Enter newline. Note mode: no send.
+		if (e.key === "Enter" && !e.shiftKey && mode !== "note") {
+			e.preventDefault();
+			if (busy) onStop();
+			else if (canSend) onSend();
+		}
+	};
+
+	return (
+		<form
+			data-testid="composer"
+			data-mode={mode}
+			className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
+			onSubmit={(e) => {
+				e.preventDefault();
+				if (busy) onStop();
+				else if (canSend && showSend) onSend();
+			}}
+		>
+			<textarea
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				onKeyDown={handleKeyDown}
+				placeholder={PLACEHOLDERS[mode]}
+				autoFocus={autoFocus}
+				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"
+			/>
+			{showSend && (
+				<button
+					type="submit"
+					aria-label={busy ? "Stop" : "Send"}
+					className={cn(
+						"flex size-10 shrink-0 items-center justify-center rounded-[10px] transition-colors",
+						busy
+							? "bg-secondary text-foreground hover:bg-accent"
+							: "bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-40",
+					)}
+					disabled={!busy && !canSend}
+				>
+					{busy ? <SquareIcon className="size-4" /> : <CornerDownLeftIcon className="size-5" />}
+				</button>
+			)}
+		</form>
+	);
+}