ui: labeled conclusion sections — 'Model solution' hero, 'Verdict' below
Owner round 2 (2026-10-05), Slice G: 'Solved' alone over unlabeled prose didn't read as the model solution. The hero now carries its own 'Model solution' section label (the quiz cards' register), and the verdict section mirrors it — label muted, text at the same 50% register as quiz explanations.
This commit is contained in:
@@ -81,14 +81,21 @@ export function ConcludeCard({ part }: ArtifactPartProps) {
|
|||||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
{OUTCOME_LABEL[outcome] ?? "Concluded"}
|
{OUTCOME_LABEL[outcome] ?? "Concluded"}
|
||||||
</div>
|
</div>
|
||||||
|
{/* LABELED SECTIONS (owner round 2, 2026-10-05): 'Solved' alone over
|
||||||
|
unlabeled prose didn't read as the model solution — the hero now
|
||||||
|
carries its own label, and the verdict section mirrors it. Same
|
||||||
|
register as the quiz cards' section labels. */}
|
||||||
{reveal.length > 0 && (
|
{reveal.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<div className="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">Model solution</div>
|
||||||
<div className="lh-prose text-[15px]">
|
<div className="lh-prose text-[15px]">
|
||||||
<MessageResponse>{reveal}</MessageResponse>
|
<MessageResponse>{reveal}</MessageResponse>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{verdict.length > 0 && (
|
{verdict.length > 0 && (
|
||||||
<div className="mt-3 rounded-lg bg-muted py-2 text-sm text-muted-foreground">
|
<div className="mt-3 rounded-lg bg-muted py-2 text-sm text-foreground/50">
|
||||||
<span className="font-medium text-foreground">Verdict: </span>
|
<span className="font-medium text-muted-foreground">Verdict: </span>
|
||||||
<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{verdict}</MessageResponse>
|
<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{verdict}</MessageResponse>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -114,6 +114,7 @@ describe("the practice transcript cards", () => {
|
|||||||
assert.match(html, /data-testid="conclude-card"/);
|
assert.match(html, /data-testid="conclude-card"/);
|
||||||
assert.match(html, /Solved with hints/);
|
assert.match(html, /Solved with hints/);
|
||||||
assert.match(html, /Pair them; each pair is even\./, "the committed solution, verbatim");
|
assert.match(html, /Pair them; each pair is even\./, "the committed solution, verbatim");
|
||||||
|
assert.match(html, /Model solution/); // the labeled hero (owner round 2)
|
||||||
assert.match(html, /Verdict:/);
|
assert.match(html, /Verdict:/);
|
||||||
assert.match(html, /The pairing came after R2\./);
|
assert.match(html, /The pairing came after R2\./);
|
||||||
// The verdict row renders AFTER the solution (the hero first).
|
// The verdict row renders AFTER the solution (the hero first).
|
||||||
|
|||||||
Reference in New Issue
Block a user