feat(exercises): show students their past AI task results, legibly (#581) (#582)

A student returning to a finished lesson checkpoint or standalone exercise
saw a bare score badge. The AI's feedback was never missing — it was always
written to `lesson_checkpoint_attempts.evaluation` and `exercise_evaluations.
ai_result`; the loaders simply never read those columns back, and every
engine held its result in component state that a reload discarded.

Restore path
- `loadLessonCheckpoints` now selects `response` and `evaluation`, and
  defensive parsers turn those two free-form jsonb columns back into the
  student's own answer plus the feedback, next-step hint and per-question
  explanations. Four writer shapes exist (ai / deterministic / fallback /
  external sync); anything unrecognised yields "nothing to show" rather than
  being trusted into the UI.
- The standalone exercise page needed no new query: artifact and essay rows
  were already in the `exercise_evaluations` result set fetched for the
  audio/video history and were simply never passed to their components.
- Per-question feedback rendered `correctValue` raw, so a multiple-choice
  miss read "Incorrect — 1" (the option *index*). It now maps to option text
  and localized true/false.
- Coding challenges write no evaluation row at all — they are graded by their
  test runner and store a hardcoded completion. The card says so instead of
  rendering an empty result.

Legibility (issue #581, found by an /impeccable critique verified live at
390x844 and 1440x900, light and dark, en and es)
- Six WCAG AA contrast failures in light and four in dark are fixed; the card
  now measures clean in both themes. The worst was the PASSED badge at 2.47:1
  — white on emerald-500, the single most important word on the card. The
  "AI Feedback" label no longer uses `text-primary`: tenants override that
  token, so small text in it cannot be guaranteed to clear AA.
- The artifact panel printed the score over the PASS MARK, twice: "62 / 70"
  reads as 89% when 62 is a failure. That whole block was a near-copy of
  ExerciseResultSummary, so it now renders the shared card instead.
- A failed checkpoint showed a green tick, because its tone came from
  `completed` and a failed attempt is still completed.
- The checkpoint restored behind a closed disclosure. It now opens itself for
  the one state that asks something of the student — a graded attempt they did
  not pass — and an explicit toggle still wins.
- The retry field sat between the answer and the grade for that answer, and
  looked identical to the read-only answer above it. Order is now answer →
  result → retry, and the restored answer is borderless so it does not read
  as an editable field.
- Adding the result card inside `lg:sticky lg:top-6` took that container to
  1078px against a 900px viewport; `sticky` does not pin an element taller
  than its scrollport, so the chat input scrolled away unreachable. The card
  is now a sibling above it, which also puts the result first on mobile
  instead of 1157px down the page behind instructions already followed.
- Prose is capped at 68ch (was 85-90), the header stacks below `sm:`, long
  unbroken input wraps, and on phones the retry button is 36px tall and
  inputs are 16px so iOS Safari stops zooming the page on focus.

23 unit tests pin the parsers and the auto-expand rule.


Claude-Session: https://claude.ai/code/session_01JUBJNELGqnwbQbQNp5Qd9h

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: guillermoscript

app/[locale]/dashboard/student/courses/[courseId]/exercises/[exerciseId]/page.tsx

@@ -5,6 +5,8 @@ import { requireCourseAccess, requireRowInCourse } from '@/lib/services/course-a
 import { getTranslations } from 'next-intl/server'
 import { EXTERNAL_EXERCISE_TYPES } from '@/lib/checkpoints/types'
 import { getCheckpointLinkedExerciseIds } from '@/lib/checkpoints/load'
+import { toLatestEvaluation, type LatestExerciseEvaluation } from '@/lib/exercises/latest-evaluation'
+import ExerciseResultSummary from '@/components/exercises/exercise-result-summary'
 import type { SpeechEvaluation } from '@/lib/speech/types'
 
 import dynamic from 'next/dynamic'
@@ -171,15 +173,23 @@ export default async function ExercisePage({ params }: PageProps) {
 
     // Fetch evaluation history from unified exercise_evaluations table
     let submissionHistory: { id: number; ai_evaluation: SpeechEvaluation | null; score: number | null; status: string; media_url: string; created_at: string; duration_seconds: number | null }[] = []
+    // Newest graded attempt, replayed to the student when they come back to a
+    // finished exercise. Derived from the same rows as submissionHistory — the
+    // artifact/essay engines write here too, their results were just never read.
+    let latestEvaluation: LatestExerciseEvaluation | null = null
     try {
-        const { data: evaluations } = await supabase
+        const { data: evaluations, error: evaluationsError } = await supabase
             .from('exercise_evaluations')
             .select('id, score, passed, ai_result, ai_metrics, engine_type, attempt_number, created_at')
             .eq('exercise_id', parseInt(exerciseId))
             .eq('user_id', userId)
             .eq('tenant_id', tenantId)
             .order('created_at', { ascending: false })
 
+        // PostgREST reports failures in `error`, not by throwing, so without this
+        // the catch below never fires and a broken query looks like "no attempts".
+        if (evaluationsError) console.error('Error fetching exercise evaluations:', evaluationsError)
+
         // Map to legacy format for AudioExercise component compatibility
         submissionHistory = (evaluations ?? []).map(ev => ({
             id: Number(ev.id),
@@ -192,8 +202,11 @@ export default async function ExercisePage({ params }: PageProps) {
                 (ev.ai_metrics as unknown as { duration_seconds?: number | null } | null)
                     ?.duration_seconds ?? null,
         }))
-    } catch {
+
+        latestEvaluation = toLatestEvaluation(evaluations?.[0] ?? null)
+    } catch (err) {
         // RLS or table access may fail — gracefully degrade
+        console.error('Error fetching exercise evaluations:', err)
     }
 
     const exerciseConfig = exercise.exercise_config as unknown as {
@@ -267,6 +280,33 @@ export default async function ExercisePage({ params }: PageProps) {
         </>
     ) : null
 
+    // Code challenges are graded by their own test runner and never write an
+    // exercise_evaluations row, so their reviewable record is the completion.
+    const codeCompletion = exercise.exercise_completions?.[0] as
+        | { score?: number | null; completed_at?: string | null }
+        | undefined
+
+    const resultSummary = latestEvaluation ? (
+        <ExerciseResultSummary
+            score={latestEvaluation.score}
+            passed={latestEvaluation.passed}
+            feedback={latestEvaluation.feedback}
+            strengths={latestEvaluation.strengths}
+            improvements={latestEvaluation.improvements}
+            attemptNumber={latestEvaluation.attemptNumber}
+            completedAt={latestEvaluation.createdAt}
+            passingScore={passingScore}
+        />
+    ) : null
+
+    const codeResultSummary = codeCompletion ? (
+        <ExerciseResultSummary
+            score={codeCompletion.score ?? null}
+            passed
+            completedAt={codeCompletion.completed_at ?? null}
+        />
+    ) : null
+
     const chatComponent = (
         <ExerciseChat
             apiEndpoint="/api/chat/exercises/student"
@@ -287,6 +327,7 @@ export default async function ExercisePage({ params }: PageProps) {
                     isExerciseCompleted={isExerciseCompleted}
                     studentId={userId}
                     courseId={courseId}
+                    resultSummary={codeResultSummary}
                 >
                     <CodeChallengeWrapper
                         exercise={exercise}
@@ -325,6 +366,18 @@ export default async function ExercisePage({ params }: PageProps) {
                     isExerciseCompleted={isExerciseCompleted}
                     passingScore={passingScore}
                     isExerciseCompletedSection={otherExercisesSection}
+                    initialEvaluation={
+                        latestEvaluation
+                            ? {
+                                  score: latestEvaluation.score ?? 0,
+                                  feedback: latestEvaluation.feedback ?? '',
+                                  passed: latestEvaluation.passed,
+                                  strengths: latestEvaluation.strengths,
+                                  improvements: latestEvaluation.improvements,
+                                  passingScore,
+                              }
+                            : null
+                    }
                 />
             ) : exercise.exercise_type === 'audio_evaluation' ? (
                 <AudioExercise
@@ -355,6 +408,7 @@ export default async function ExercisePage({ params }: PageProps) {
                     profile={profile}
                     studentId={userId}
                     isExerciseCompletedSection={otherExercisesSection}
+                    resultSummary={resultSummary}
                 >
                     {chatComponent}
                 </EssayExercise>

components/exercises/artifact-exercise.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import ExerciseResultSummary from '@/components/exercises/exercise-result-summary'
 import { cn } from '@/lib/utils'
 import Markdown from 'react-markdown'
 import { useTranslations } from 'next-intl'
@@ -16,7 +17,6 @@ import {
   IconSparkles,
   IconLoader2,
   IconAlertTriangle,
-  IconTarget,
   IconArrowRight,
   IconTrophy,
   IconCode,
@@ -40,6 +40,9 @@ interface ArtifactExerciseProps {
   isExerciseCompleted: boolean
   passingScore: number
   isExerciseCompletedSection?: React.ReactNode
+  /** Last graded attempt from exercise_evaluations. The route has always written
+   * one; it was simply never read back, so reloading the page lost the feedback. */
+  initialEvaluation?: EvaluationResult | null
 }
 
 interface EvaluationResult {
@@ -58,6 +61,7 @@ export default function ArtifactExercise({
   isExerciseCompleted,
   passingScore,
   isExerciseCompletedSection,
+  initialEvaluation = null,
 }: ArtifactExerciseProps) {
   const t = useTranslations('exercises.artifact')
   const tAudio = useTranslations('exercises.audio')
@@ -68,7 +72,7 @@ export default function ArtifactExercise({
 
   const iframeRef = useRef<HTMLIFrameElement>(null)
   const [submitState, setSubmitState] = useState<SubmitState>('idle')
-  const [evaluation, setEvaluation] = useState<EvaluationResult | null>(null)
+  const [evaluation, setEvaluation] = useState<EvaluationResult | null>(initialEvaluation)
   const [passed, setPassed] = useState<boolean>(isExerciseCompleted)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
   const [rateLimited, setRateLimited] = useState(false)
@@ -303,98 +307,32 @@ export default function ArtifactExercise({
               </div>
             )}
 
-            {/* Evaluation result */}
-            {evaluation && submitState === 'done' && (
-              <div className="rounded-xl border bg-card p-5 space-y-5">
-                <h3 className="text-sm font-semibold flex items-center gap-2">
-                  <IconSparkles size={16} className="text-primary" />
-                  {tAudio('aiFeedback')}
-                </h3>
-
-                {/* Score */}
-                <div className="flex items-center justify-between">
-                  <div className="flex items-baseline gap-3">
-                    <div className="flex items-baseline gap-1">
-                      <span className={cn(
-                        'text-4xl font-black tabular-nums tracking-tight',
-                        evaluation.passed ? 'text-emerald-600 dark:text-emerald-400' : 'text-foreground'
-                      )}>
-                        {evaluation.score}
-                      </span>
-                      <span className="text-lg font-bold text-muted-foreground/60">/</span>
-                      <span className="text-lg font-bold text-primary tabular-nums">{evaluation.passingScore}</span>
-                    </div>
-                  </div>
-                  <Badge className={cn(
-                    'font-bold text-xs px-3 py-1',
-                    evaluation.passed
-                      ? 'bg-emerald-500 text-white'
-                      : 'bg-amber-500/10 text-amber-700 border-amber-500/30'
-                  )}>
-                    {evaluation.passed ? t('passed') : t('failed')}
-                  </Badge>
-                </div>
-
-                {/* Feedback */}
-                <p className="text-sm text-foreground/80 leading-relaxed">{evaluation.feedback}</p>
-
-                {/* Strengths */}
-                {evaluation.strengths.length > 0 && (
-                  <div>
-                    <p className="text-xs font-bold uppercase tracking-widest text-emerald-600 dark:text-emerald-400 mb-2">
-                      {t('strengths')}
-                    </p>
-                    <ul className="space-y-1.5">
-                      {evaluation.strengths.map((s, i) => (
-                        <li key={i} className="flex items-start gap-2 text-sm text-foreground/80">
-                          <span className="mt-0.5 shrink-0 text-emerald-500">+</span>
-                          {s}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
-
-                {/* Improvements */}
-                {evaluation.improvements.length > 0 && (
-                  <div>
-                    <p className="text-xs font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400 mb-2">
-                      {t('improvements')}
-                    </p>
-                    <ul className="space-y-1.5">
-                      {evaluation.improvements.map((imp, i) => (
-                        <li key={i} className="flex items-start gap-2 text-sm text-foreground/80">
-                          <span className="mt-0.5 shrink-0 text-amber-500">-</span>
-                          {imp}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
+            {/* Evaluation result — also shown for a restored prior attempt, whose
+                submitState is still 'idle' because nothing was submitted this visit. */}
+            {/* One result card across every engine. This block used to be a
+                near-copy of ExerciseResultSummary that printed the score over
+                the PASS MARK, twice: "62 / 70" reads as 89% when 62 is a fail. */}
+            {evaluation && submitState !== 'evaluating' && (
+              <div className="space-y-4">
+                <ExerciseResultSummary
+                  score={evaluation.score}
+                  passed={evaluation.passed}
+                  feedback={evaluation.feedback}
+                  strengths={evaluation.strengths}
+                  improvements={evaluation.improvements}
+                  // The API response carries its own threshold; the prop is the
+                  // fallback for a restored attempt that predates that field.
+                  passingScore={evaluation.passingScore ?? passingScore}
+                />
 
-                {/* Try again */}
                 {!evaluation.passed && !rateLimited && (
-                  <div className="rounded-2xl border-2 border-primary/15 bg-gradient-to-br from-primary/[0.04] to-primary/[0.01] p-5">
-                    <div className="flex items-center justify-between mb-4">
-                      <div className="flex items-baseline gap-1">
-                        <span className="text-2xl font-black tabular-nums tracking-tight text-foreground">
-                          {evaluation.score}
-                        </span>
-                        <span className="text-sm font-bold text-muted-foreground/60">/</span>
-                        <span className="text-sm font-bold text-primary tabular-nums">{evaluation.passingScore}</span>
-                      </div>
-                      <div className="rounded-full border-2 border-primary/20 bg-primary/5 p-2">
-                        <IconTarget size={18} className="text-primary" />
-                      </div>
-                    </div>
-                    <Button
-                      onClick={handleTryAgain}
-                      className="w-full gap-2.5 h-11 text-sm font-bold tracking-wide"
-                    >
-                      {t('tryAgain')}
-                      <IconArrowRight size={16} className="ml-auto opacity-60" />
-                    </Button>
-                  </div>
+                  <Button
+                    onClick={handleTryAgain}
+                    className="w-full gap-2.5 h-11 text-sm font-semibold tracking-wide"
+                  >
+                    {t('tryAgain')}
+                    <IconArrowRight size={16} className="ml-auto opacity-60" />
+                  </Button>
                 )}
               </div>
             )}

components/exercises/code-exercise.tsx

@@ -12,12 +12,15 @@ interface CodeExerciseProps {
     studentId: string;
     courseId: string;
     children: ReactNode;
+    /** Prior completion record, shown when the student returns to a solved challenge. */
+    resultSummary?: ReactNode;
 }
 
 export default function CodeExercise({
     exercise,
     isExerciseCompleted,
     children,
+    resultSummary,
 }: CodeExerciseProps) {
     return (
         <div className="space-y-6 pb-20">
@@ -42,6 +45,8 @@ export default function CodeExercise({
                 </div>
             </motion.div>
 
+            {resultSummary}
+
             <Tabs defaultValue="environment" className="space-y-4">
                 <TabsList className="bg-muted/50 p-1">
                     <TabsTrigger value="environment" className="gap-2">

components/exercises/essay-exercise.tsx

@@ -16,6 +16,8 @@ interface EssayExerciseProps {
     studentId: string;
     children: ReactNode;
     isExerciseCompletedSection?: ReactNode;
+    /** Last graded attempt, shown above the chat when the student returns. */
+    resultSummary?: ReactNode;
 }
 
 const difficultyConfig: Record<string, { label: string; color: string; icon: typeof IconFlame }> = {
@@ -40,6 +42,7 @@ export default function EssayExercise({
     isExerciseCompleted,
     children,
     isExerciseCompletedSection,
+    resultSummary,
 }: EssayExerciseProps) {
     const difficulty = difficultyConfig[exercise.difficulty_level] || difficultyConfig.easy;
     const DifficultyIcon = difficulty.icon;
@@ -94,6 +97,14 @@ export default function EssayExercise({
                 transition={{ duration: 0.35, delay: 0.1 }}
                 className="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6"
             >
+                {/* Last graded attempt — first for a returning student, and
+                    deliberately OUTSIDE the sticky chat column: adding it there
+                    pushed that column past the viewport height, and `sticky`
+                    stops pinning once the element is taller than its scrollport. */}
+                {resultSummary && (
+                    <div className="lg:col-span-12 order-first">{resultSummary}</div>
+                )}
+
                 {/* Instructions */}
                 <div className="lg:col-span-4 order-1">
                     <div className="rounded-xl sm:rounded-2xl border sm:border-2 border-primary/10 bg-gradient-to-b from-primary/[0.03] to-transparent overflow-hidden">