UI iteration 3: question dock — pending questions morph the composer blob

- A pending quiz/ask now REPLACES the chat composer: one persistent
  rounded-2xl shell in the transcript overlay swaps contents (composer ↔
  question ↔ collapsed bar), never remounting — the structure a future
  grow-morph animation needs.
- Unified bottom row inside the question: the note field (select modes),
  the answer field (text-mode asks), or the Other text — one field, one
  'Submit answer' button, Enter submits.
- Collapse on scroll: uses useStickToBottomContext — scroll up and the
  dock folds to a slim bar (kind chip + LaTeX-flattened question teaser +
  'tap to answer'); click scrolls to bottom and re-expands. The expanded
  form stays mounted-hidden so a half-made selection survives.
- Pending/streaming tool parts no longer render inline; answered parts
  land in the transcript as graded cards on submit. Question generation
  shows a shimmer in the shell.
- Composer back to pure chat (no mode machinery); quiz-card.tsx and the
  pendingText/registerSubmit bridge deleted; render tests re-pointed at
  the dock (wrapped in StickToBottom).

Verified live: docked quiz submit (note+selection), ask-text Enter
submit, collapse/expand with selection survival, bar teaser text.

components/composer.tsx

@@ -4,31 +4,14 @@ 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.
+ * The chat composer — content row ONLY (the persistent rounded shell lives in
+ * the chat view's overlay, so the shell can later morph chat → question
+ * without remounting).
  *
- * 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.
+ * Corner-radius math (concentric with the shell): shell rounded-2xl (16px) −
+ * row padding p-1.5 (6px) = button rounded-[10px] = 25% of the 40px button.
  */
-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,
@@ -37,7 +20,6 @@ export function Composer({
 	canSend,
 	autoFocus,
 }: {
-	mode: ComposerMode;
 	busy: boolean;
 	value: string;
 	onChange: (v: string) => void;
@@ -46,52 +28,44 @@ export function Composer({
 	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"
+			className="flex items-end gap-1.5 p-1.5"
 			onSubmit={(e) => {
 				e.preventDefault();
 				if (busy) onStop();
-				else if (canSend && showSend) onSend();
+				else if (canSend) onSend();
 			}}
 		>
 			<textarea
 				value={value}
 				onChange={(e) => onChange(e.target.value)}
-				onKeyDown={handleKeyDown}
-				placeholder={PLACEHOLDERS[mode]}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" && !e.shiftKey) {
+						e.preventDefault();
+						if (busy) onStop();
+						else if (canSend) onSend();
+					}
+				}}
+				placeholder="Ask, answer, or steer the lesson…"
 				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>
-			)}
+			<button
+				type="submit"
+				aria-label={busy ? "Stop" : "Send"}
+				disabled={!busy && !canSend}
+				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",
+				)}
+			>
+				{busy ? <SquareIcon className="size-4" /> : <CornerDownLeftIcon className="size-5" />}
+			</button>
 		</form>
 	);
 }