practice: the next affordance IS the send button — wide green morph in the pause (round 16 refinement)

Owner correction (2026-10-06): the floating chip clipped inside the
composer band. Replaced with the button morph: an EMPTY composer in
the between-problems pause renders a wide green 'Next problem' button
(bg-green-600 — the answered-card correct register, mono-caps label,
arrow glyph); typing anything returns the regular white send; busy
(steer/stop) outranks the morph. Click and Enter share the one
act() lane, so the button also teaches the Enter-on-empty behavior.
The wrapper div + chip are gone from chat.tsx; inputAppends widens
its record param to { messages; kind? } (the practice gate reads it
without a cast).

components/chat.tsx

@@ -1541,22 +1541,6 @@ export function Chat({
 						)
 					}
 					composer={
-						<div className="relative">
-							{/* THE NEXT CHIP (owner round 16): the practice pause's
-							    mouse path — hovering at the composer band's top-right,
-							    the pick-pill chrome register. One click = the move-on
-							    signal; gone the moment a problem is active again. */}
-							{nextReady && (
-								<button
-									type="button"
-									data-testid="next-problem-chip"
-									onClick={sendNext}
-									className="absolute -top-3.5 right-3 z-10 flex items-center gap-1 rounded-md border border-border bg-card px-2 py-0.5 font-ui text-[10px] font-medium uppercase tracking-wider text-foreground shadow-sm transition-colors hover:border-muted-foreground/50 hover:text-foreground"
-								>
-									Next problem
-									<ArrowRightIcon className="size-3" />
-								</button>
-							)}
 						<Composer
 							// Stop aborts ANY in-flight turn (stream-reattach wave): the
 							// square renders while a reattached/wake turn runs too — the
@@ -1577,7 +1561,6 @@ export function Chat({
 							onNext={sendNext}
 							placeholder={nextReady ? "Ask about this problem — or press Enter for the next one…" : undefined}
 						/>
-						</div>
 					}
 					onSubmitAnswer={(output) => {
 						if (!pending) return;

components/composer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CornerDownLeftIcon, SquareIcon } from "lucide-react";
+import { ArrowRightIcon, CornerDownLeftIcon, SquareIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Hint } from "@/components/ui/hint";
 
@@ -124,7 +124,25 @@ export function Composer({
 				 only an empty composer morphs it to Stop. ESC keeps its
 				 confirm-popup abort in every state, so stop is never
 				 unreachable. No tooltip — the ↵ glyph is the affordance
-				 (owner, subtlety round 2026-09-25). */}
+				 (owner, subtlety round 2026-09-25).
+
+				 THE NEXT MORPH (owner round 16 refinement, 2026-10-06): an
+				 empty composer in the practice pause morphs the button into
+				 a wide green NEXT PROBLEM — the affordance IS the button
+				 (click and Enter share one lane), and typing anything
+				 returns the regular send. The green is the app's correct-
+				 answer register (answered-card's green-500/600). */}
+				{nextProblem && !busy && !canSend ? (
+					<button
+						type="submit"
+						data-testid="next-problem-button"
+						aria-label="Next problem"
+						className="flex h-10 shrink-0 items-center justify-center gap-1.5 rounded-[10px] bg-green-600 px-4 font-ui text-xs font-medium uppercase tracking-wide text-white transition-colors hover:bg-green-500"
+					>
+						Next problem
+						<ArrowRightIcon className="size-4" />
+					</button>
+				) : (
 					<button
 						type="submit"
 						aria-label={busy && !canSend ? "Stop" : "Send"}
@@ -138,6 +156,7 @@ export function Composer({
 					>
 						{busy && !canSend ? <SquareIcon className="size-4" /> : <CornerDownLeftIcon className="size-5" />}
 					</button>
+				)}
 		</form>
 	);
 }

src/core/input-events.ts

@@ -194,7 +194,10 @@ export function parseChatInput(input: unknown): ChatInput {
  * else 400s honestly instead of silently interrupting a question or
  * double-answering.
  */
-export function inputAppends(record: { messages: LhMessage[] }, input: ChatInput): LhMessage[] {
+export function inputAppends(
+	record: { messages: LhMessage[]; kind?: string },
+	input: ChatInput,
+): LhMessage[] {
 	switch (input.type) {
 		case "text":
 			return [...dismissalConclusion(record), newUserMessage(input.text)];
@@ -219,7 +222,7 @@ export function inputAppends(record: { messages: LhMessage[] }, input: ChatInput
 			// between-problems affordance — practice sessions only, nothing
 			// active (mid-problem input rides the dock), and the client gates
 			// make violations unreachable in practice anyway.
-			if ((record as { kind?: string }).kind !== "practice") {
+			if (record.kind !== "practice") {
 				throw new ChatInputError("next input is a practice-session affordance");
 			}
 			if (activeProblemOf(record.messages)) {

tests/render-composer.test.tsx

@@ -13,7 +13,9 @@ import { describe, it } from "node:test";
 import { renderToStaticMarkup } from "react-dom/server";
 import { Composer, enterAction } from "../components/composer.tsx";
 
-function render(opts: { busy?: boolean; canSend?: boolean; placeholder?: string } = {}) {
+function render(
+	opts: { busy?: boolean; canSend?: boolean; placeholder?: string; nextProblem?: boolean } = {},
+) {
 	return renderToStaticMarkup(
 		<Composer
 			busy={opts.busy ?? false}
@@ -23,6 +25,7 @@ function render(opts: { busy?: boolean; canSend?: boolean; placeholder?: string
 			onStop={() => {}}
 			canSend={opts.canSend ?? true}
 			{...(opts.placeholder ? { placeholder: opts.placeholder } : {})}
+			{...(opts.nextProblem ? { nextProblem: true, onNext: () => {} } : {})}
 		/>,
 	);
 }
@@ -58,6 +61,26 @@ describe("Composer", () => {
 		const html = render({ canSend: false });
 		assert.ok(/aria-label="Send"[^>]*disabled|disabled[^>]*aria-label="Send"/.test(html), "send disabled");
 	});
+
+	it("THE NEXT MORPH (owner round 16 refinement): empty composer in the pause → wide green Next problem", () => {
+		const html = render({ canSend: false, nextProblem: true });
+		assert.ok(html.includes('data-testid="next-problem-button"'), "the morphed button");
+		assert.match(html, /Next problem/, "the label");
+		assert.ok(html.includes("bg-green-600"), "green — the correct-answer register");
+		assert.ok(!html.includes('aria-label="Send"'), "the square send is gone in the pause");
+	});
+
+	it("typing anything returns the regular send button (canSend outranks the morph)", () => {
+		const html = render({ canSend: true, nextProblem: true });
+		assert.ok(html.includes('aria-label="Send"'), "regular send while there is text");
+		assert.ok(!html.includes('data-testid="next-problem-button"'), "no next morph with text typed");
+	});
+
+	it("busy outranks the morph — stop stays reachable", () => {
+		const html = render({ busy: true, canSend: false, nextProblem: true });
+		assert.ok(html.includes('aria-label="Stop"'), "stop wins the empty lane mid-turn");
+		assert.ok(!html.includes('data-testid="next-problem-button"'), "no next morph mid-turn");
+	});
 });
 
 // The Enter decision (composer steering, 2026-10-03): while a turn runs,