From d4212cecf28731acb49ef51a7fc0c05805ce1b0a Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Sun, 13 Sep 2026 01:20:07 +0300
Subject: [PATCH] Wave-5 refinement round 3 (owner): SVG answer marks + uniform
 input sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ✓/✗ in the answered card: replaced literal glyphs with lucide CheckIcon/
  XIcon (strokeWidth 2.5) inside a fixed size-4 flex box — text elements
  never carried the right size/vertical alignment, vectors do. Test pins
  updated (lucide-check/lucide-x classes).
- All user-typed INPUT text now matches markdown output: lh-prose class
  replaces the earlier font-prose (family-only) band-aid on the composer,
  question-dock text/thinking/Other fields, home topic input, model search
  box, and answered-card 'your thinking'/free-text records. lh-prose sets
  family+size (16.5px) so placeholders inherit correctly.
---
 components/answered-card.tsx | 16 ++++++++--------
 components/composer.tsx      |  2 +-
 components/home.tsx          |  2 +-
 components/model-picker.tsx  |  2 +-
 components/question-dock.tsx |  6 +++---
 tests/render-cards.test.tsx  |  5 +++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/answered-card.tsx b/components/answered-card.tsx
index bf859d7..eb6d836 100644
--- a/components/answered-card.tsx
+++ b/components/answered-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { CheckIcon, XIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MessageResponse } from "@/components/ai-elements/message";
 import type { QuestionAnswerData } from "@/src/core";
@@ -58,20 +59,19 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 								)}
 							>
 								{isQuiz && (
+									// SVG icons, not glyphs — exactly one text-size box (size-4),
+									// vertically centered in the flex row (owner).
 									<span
 										aria-hidden
 										className={cn(
-											// Same visual size as the row text, vertically centered,
-											// colored like the verdict chips (owner).
-											"flex size-4 shrink-0 items-center justify-center text-sm font-semibold leading-none",
+											"flex size-4 shrink-0 items-center justify-center",
 											sel && key && "text-green-500",
 											sel && !key && "text-red-500",
 											!sel && key && "text-green-500",
 										)}
 									>
-										{sel && key && "✓"}
-										{sel && !key && "✗"}
-										{!sel && key && "✓"}
+										{key && <CheckIcon className="size-4" strokeWidth={2.5} />}
+										{sel && !key && <XIcon className="size-4" strokeWidth={2.5} />}
 									</span>
 								)}
 								<span className={cn(!sel && "text-muted-foreground")}>
@@ -94,7 +94,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 				</div>
 			)}
 
-			{answer.text && <div className="font-prose mt-2 whitespace-pre-wrap text-sm">“{answer.text}”</div>}
+			{answer.text && <div className="lh-prose mt-2 whitespace-pre-wrap">“{answer.text}”</div>}
 			{answer.dontKnow && isQuiz && <div className="mt-2 text-sm text-muted-foreground">Answered “I don't know”.</div>}
 
 			{answer.note && (
@@ -102,7 +102,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 					<span className="mb-0.5 block text-xxs font-medium uppercase tracking-wide text-muted-foreground">
 						Your thinking
 					</span>
-					<span className="font-prose block whitespace-pre-wrap text-sm text-foreground/90">{answer.note}</span>
+					<span className="lh-prose block whitespace-pre-wrap text-foreground/90">{answer.note}</span>
 				</div>
 			)}
 
diff --git a/components/composer.tsx b/components/composer.tsx
index d940e0f..f2e7420 100644
--- a/components/composer.tsx
+++ b/components/composer.tsx
@@ -59,7 +59,7 @@ export function Composer({
 				placeholder="Ask, answer, or steer the lesson…"
 				autoFocus={autoFocus}
 				rows={1}
-				className="field-sizing-content font-prose 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"
+				className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 			/>
 			{verdict && !busy ? (
 				// The plan verdict (docs/probe-teach-split.md §4): accept
diff --git a/components/home.tsx b/components/home.tsx
index 24ba138..a5d1846 100644
--- a/components/home.tsx
+++ b/components/home.tsx
@@ -82,7 +82,7 @@ export function Home() {
 						placeholder="What do you want to learn?"
 						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"
+						className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 					/>
 					<button
 						type="submit"
diff --git a/components/model-picker.tsx b/components/model-picker.tsx
index d34efdb..48c0c8a 100644
--- a/components/model-picker.tsx
+++ b/components/model-picker.tsx
@@ -198,7 +198,7 @@ export function ModelControl({
 						value={query}
 						onChange={(e) => setQuery(e.target.value)}
 						placeholder="Search models…"
-						className="mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
+						className="lh-prose mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
 					/>
 					{error && <div className="mb-1.5 text-destructive">{error}</div>}
 					{!catalog && (
diff --git a/components/question-dock.tsx b/components/question-dock.tsx
index bb15320..1806b11 100644
--- a/components/question-dock.tsx
+++ b/components/question-dock.tsx
@@ -387,7 +387,7 @@ function QuestionDockForm({
 										setSel((prev) => (prev.otherSelected ? prev : toggleOther(selectMode, prev)));
 									}}
 									placeholder="Type your own answer…"
-									className="font-prose w-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+									className="lh-prose w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
 									onClick={(e) => e.stopPropagation()}
 								/>
 							</div>
@@ -429,7 +429,7 @@ function QuestionDockForm({
 							}}
 							placeholder="Type your answer…"
 							rows={1}
-							className="field-sizing-content font-prose max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
+							className="field-sizing-content lh-prose max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 						/>
 					) : (
 						<textarea
@@ -446,7 +446,7 @@ function QuestionDockForm({
 							placeholder="Why this answer? What are you unsure about? Say as much as you like — the teacher reads all of this."
 							rows={1}
 							className={cn(
-								"field-sizing-content font-prose max-h-48 w-full resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground/70",
+								"field-sizing-content lh-prose max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
 								// Phase-scaled prominence: teaching invites depth,
 								// probing stays quick.
 								phase === "teach" ? "min-h-[4.5rem]" : "min-h-10",
diff --git a/tests/render-cards.test.tsx b/tests/render-cards.test.tsx
index 70c229d..5816df9 100644
--- a/tests/render-cards.test.tsx
+++ b/tests/render-cards.test.tsx
@@ -168,7 +168,8 @@ describe("render smoke tests", () => {
 		const html = renderToStaticMarkup(<AnsweredCard answer={answer} />);
 		assert.match(html, /incorrect/);
 		assert.match(html, /innermost/, "explanation renders post-answer");
-		assert.ok(html.includes("✓") && html.includes("✗"));
+		// Vector marks (lucide SVG) — not glyphs — sized like the row text (owner).
+		assert.ok(html.includes("lucide-check") && html.includes("lucide-x"));
 	});
 
 	it("AnsweredCard renders the learner's own Other answer AS an option row", () => {
@@ -213,7 +214,7 @@ describe("render smoke tests", () => {
 		};
 		const answer = buildAnswer(qd, { values: ["Somewhat"] });
 		const html = renderToStaticMarkup(<AnsweredCard answer={answer} />);
-		assert.ok(!html.includes("incorrect") && !html.includes("✗"), "ask answers never get quiz grading UI");
+		assert.ok(!html.includes("incorrect") && !html.includes("lucide-x"), "ask answers never get quiz grading UI");
 		assert.match(html, /Somewhat/);
 	});