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.

tests/render-cards.test.tsx

@@ -16,7 +16,8 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MessageResponse } from "../components/ai-elements/message.tsx";
-import { QuizCard } from "../components/quiz-card.tsx";
+import { StickToBottom } from "use-stick-to-bottom";
+import { QuestionDock } from "../components/question-dock.tsx";
 import { AnsweredCard } from "../components/answered-card.tsx";
 import { buildAnswer, coerceCorrectAnswer, normalizeOptions, resolveCorrect, type QuestionData } from "../src/core/question-core.ts";
 
@@ -41,40 +42,43 @@ function quizQD(): QuestionData {
 	};
 }
 
+
+function renderDock(props: { toolName: "quiz" | "ask_user_question"; toolCallId: string; input: never; onSubmit?: () => void }) {
+	// The dock reads the stick-to-bottom scroll context; wrap it. In static
+	// render the context starts at isAtBottom=true → the expanded form renders.
+	return renderToStaticMarkup(
+		<StickToBottom><QuestionDock {...props} onSubmit={props.onSubmit ?? (() => {})} /></StickToBottom>,
+	);
+}
+
 describe("render smoke tests", () => {
 	it("QuizCard renders question, options, and the automatic 'I don't know'", () => {
-		const html = renderToStaticMarkup(
-			<QuizCard toolName="quiz" toolCallId="q1" input={quizInput} onSubmit={() => {}} pendingText="" onPendingTextChange={() => {}} />,
-		);
+		const html = renderDock({ toolName: "quiz", toolCallId: "q1", input: quizInput as never });
 		assert.match(html, /Which planet is closest to the sun\?/);
 		assert.match(html, /Mercury/);
 		assert.match(html, /I don&#x27;t know|I don't know/);
+		// The unified bottom row: note field + Submit answer live INSIDE the dock.
+		assert.match(html, /Add a note/, "note field is the dock's bottom row");
+		assert.match(html, /Submit answer/, "send becomes Submit answer");
 		// The v1 desync bug: options are buttons with ARIA roles, not native inputs.
 		assert.ok(!html.includes('type="radio"'), "no native radio inputs");
 		assert.ok(html.includes('role="radio"'), "button-based radio role present");
 	});
 
 	it("QuizCard never leaks the explanation or the correct answer before submit", () => {
-		const html = renderToStaticMarkup(
-			<QuizCard toolName="quiz" toolCallId="q1" input={quizInput} onSubmit={() => {}} pendingText="" onPendingTextChange={() => {}} />,
-		);
+		const html = renderDock({ toolName: "quiz", toolCallId: "q1", input: quizInput as never });
 		assert.ok(!html.includes("innermost"), "explanation must not render pre-answer");
 	});
 
-	it("ask card renders Other, no note field (note lives in the composer), no grading", () => {
-		const html = renderToStaticMarkup(
-			<QuizCard
-				toolName="ask_user_question"
-				toolCallId="a1"
-				input={{ question: "How confident are you?", options: [{ label: "Very" }, { label: "Somewhat" }] }}
-				onSubmit={() => {}}
-				pendingText=""
-				onPendingTextChange={() => {}}
-			/>,
-		);
+	it("ask dock renders Other + note field, no grading affordance", () => {
+		const html = renderDock({
+			toolName: "ask_user_question",
+			toolCallId: "a1",
+			input: { question: "How confident are you?", options: [{ label: "Very" }, { label: "Somewhat" }] } as never,
+		});
 		assert.match(html, /Other/);
 		assert.ok(!html.includes("I don&#x27;t know"), "ask has no 'I don't know'");
-		assert.ok(!html.includes("Add a note"), "note field moved to the composer blob");
+		assert.match(html, /Add a note/, "ask select-mode also gets the note row");
 	});
 
 	it("AnsweredCard grades quiz answers (✓/✗ + explanation)", () => {
@@ -143,10 +147,8 @@ describe("math rendering (streamdown + KaTeX)", () => {
 			correctAnswer: "$2x$",
 			explanation: "The power rule gives $\\frac{dy}{dx} = 2x$.",
 		};
-		const pendingHtml = renderToStaticMarkup(
-			<QuizCard toolName="quiz" toolCallId="m1" input={mathQuiz} onSubmit={() => {}} pendingText="" onPendingTextChange={() => {}} />,
-		);
-		assert.ok(pendingHtml.includes("katex"), "pending card: question/options math renders");
+		const pendingHtml = renderDock({ toolName: "quiz", toolCallId: "m1", input: mathQuiz as never });
+		assert.ok(pendingHtml.includes("katex"), "pending dock: question/options math renders");
 
 		const options = normalizeOptions(mathQuiz.options);
 		const qd: QuestionData = {

tests/render-composer.test.tsx

@@ -1,6 +1,7 @@
 /**
- * Composer blob render tests — the morphing text field (chat / note / answer
- * modes), concentric corner radii, and the stop-while-busy button.
+ * Composer render tests — the chat input row (content only; the persistent
+ * rounded shell lives in the chat view's overlay so it can morph into the
+ * question dock without remounting).
  *
  * Same tsx classic-JSX shim as render-cards.test.tsx.
  */
@@ -12,10 +13,9 @@ import { describe, it } from "node:test";
 import { renderToStaticMarkup } from "react-dom/server";
 import { Composer } from "../components/composer.tsx";
 
-function render(mode: "chat" | "note" | "answer", opts: { busy?: boolean; canSend?: boolean } = {}) {
+function render(opts: { busy?: boolean; canSend?: boolean } = {}) {
 	return renderToStaticMarkup(
 		<Composer
-			mode={mode}
 			busy={opts.busy ?? false}
 			value=""
 			onChange={() => {}}
@@ -26,35 +26,26 @@ function render(mode: "chat" | "note" | "answer", opts: { busy?: boolean; canSen
 	);
 }
 
-describe("Composer blob", () => {
-	it("chat mode: chat placeholder + send button", () => {
-		const html = render("chat");
+describe("Composer", () => {
+	it("chat placeholder + send button", () => {
+		const html = render();
 		assert.match(html, /Ask, answer, or steer the lesson/);
 		assert.ok(html.includes('aria-label="Send"'), "send button present");
 	});
 
-	it("note mode: note placeholder and NO send button (card submits)", () => {
-		const html = render("note");
-		assert.match(html, /Add a note/);
-		assert.ok(!html.includes('aria-label="Send"'), "no send in note mode");
-		assert.ok(!html.includes('aria-label="Stop"'), "no stop either");
-	});
-
-	it("answer mode: answer placeholder + send button (submits the answer)", () => {
-		const html = render("answer");
-		assert.match(html, /Type your answer/);
-		assert.ok(html.includes('aria-label="Send"'), "send present in answer mode");
-	});
-
 	it("busy: send button becomes stop", () => {
-		const html = render("chat", { busy: true });
+		const html = render({ busy: true });
 		assert.ok(html.includes('aria-label="Stop"'), "stop replaces send while streaming");
 	});
 
-	it("concentric corner radii: blob 16px, send 10px (25% of the 40px button)", () => {
-		const html = render("chat");
-		assert.ok(html.includes("rounded-2xl"), "blob radius");
-		assert.ok(html.includes("rounded-[10px]"), "send radius = blob radius − padding");
+	it("send button radius is 10px = 25% of the 40px button (concentric with the shell)", () => {
+		const html = render();
+		assert.ok(html.includes("rounded-[10px]"), "send radius = shell radius − row padding");
 		assert.ok(html.includes("size-10"), "40px send button (10px = 25%)");
 	});
+
+	it("disabled when nothing to send", () => {
+		const html = render({ canSend: false });
+		assert.ok(/aria-label="Send"[^>]*disabled|disabled[^>]*aria-label="Send"/.test(html), "send disabled");
+	});
 });