src/app/learn/[level]/[slug]/page.tsx

@@ -69,7 +69,7 @@ export default async function LessonPage({ params }: { params: Promise<{ level:
       <>
         <SiteNav />
         <main className="container page">
-          <TraceRunner meta={meta} steps={steps} loggedIn={!!user} username={user?.username ?? ""} completedSteps={completed} alreadyEarned={alreadyEarned} carryImage={carryImage} nextHref={nextHref} nextLabel={nextLabel} />
+          <TraceRunner key={lesson.slug} meta={meta} steps={steps} loggedIn={!!user} username={user?.username ?? ""} completedSteps={completed} alreadyEarned={alreadyEarned} carryImage={carryImage} nextHref={nextHref} nextLabel={nextLabel} />
         </main>
       </>
     );
@@ -82,7 +82,7 @@ export default async function LessonPage({ params }: { params: Promise<{ level:
       <>
         <SiteNav />
         <main className="container page">
-          <ColoringRunner meta={meta} loggedIn={!!user} username={user?.username ?? ""} alreadyEarned={alreadyEarned} />
+          <ColoringRunner key={lesson.slug} meta={meta} loggedIn={!!user} username={user?.username ?? ""} alreadyEarned={alreadyEarned} />
         </main>
       </>
     );
@@ -97,9 +97,9 @@ export default async function LessonPage({ params }: { params: Promise<{ level:
       <SiteNav />
       <main className="container page">
         {isShade ? (
-          <ShadingRunner meta={meta} steps={steps} loggedIn={!!user} username={user?.username ?? ""} completedSteps={completed} alreadyEarned={alreadyEarned} />
+          <ShadingRunner key={lesson.slug} meta={meta} steps={steps} loggedIn={!!user} username={user?.username ?? ""} completedSteps={completed} alreadyEarned={alreadyEarned} />
         ) : (
-          <LessonRunner meta={meta} steps={steps} loggedIn={!!user} username={user?.username ?? ""} completedSteps={completed} alreadyEarned={alreadyEarned} />
+          <LessonRunner key={lesson.slug} meta={meta} steps={steps} loggedIn={!!user} username={user?.username ?? ""} completedSteps={completed} alreadyEarned={alreadyEarned} />
         )}
       </main>
     </>

src/components/ColoringRunner.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { loadProgressDrawing, saveProgressDrawing, saveFinalDrawing, fileToDataURL } from "./drawingPersistence";
 
 interface Meta { level: string; levelName: string; sublevel: number; title: string; emoji: string; intro: string; baseSvg: string }
@@ -34,6 +35,7 @@ function newLayer(id: number, name: string): Layer {
 export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned }: {
   meta: Meta; loggedIn: boolean; username: string; alreadyEarned: boolean;
 }) {
+  const router = useRouter();
   const [done, setDone] = useState(false);
   const [finalImage, setFinalImage] = useState<string | null>(null);
   const [uploadMsg, setUploadMsg] = useState("");
@@ -223,6 +225,7 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
     }
     if (hasContent()) { const data = flatten(true); setFinalImage(data); if (loggedIn) await saveFinalDrawing(meta.level, meta.sublevel, "canvas", data); }
     setDone(true);
+    router.refresh(); // refresh cached Learn page with the new completion
   }
   async function onUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0]; if (!file) return;

src/components/LessonRunner.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { badgeSvgMarkup, badgeFullSvg } from "./BadgeArt";
 import {
   loadProgressDrawing,
@@ -70,6 +71,7 @@ export default function LessonRunner({
   completedSteps: number[];
   alreadyEarned: boolean;
 }) {
+  const router = useRouter();
   const lastIndex = steps.length - 1;
   const startIndex = Math.min(completedSteps.length, lastIndex);
   const [idx, setIdx] = useState(startIndex);
@@ -288,6 +290,7 @@ export default function LessonRunner({
     }
     setEarned(loggedIn);
     setFinished(true);
+    router.refresh();
   }
 
   async function onUpload(e: React.ChangeEvent<HTMLInputElement>) {

src/components/ShadingRunner.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { badgeSvgMarkup, badgeFullSvg } from "./BadgeArt";
 import GripPressureDemo from "./GripPressureDemo";
 import {
@@ -33,6 +34,7 @@ export default function ShadingRunner({
 }: {
   meta: Meta; steps: StepData[]; loggedIn: boolean; username: string; completedSteps: number[]; alreadyEarned: boolean;
 }) {
+  const router = useRouter();
   const lastIndex = steps.length - 1;
   const [idx, setIdx] = useState(Math.min(completedSteps.length, lastIndex));
   const [finished, setFinished] = useState(alreadyEarned);
@@ -182,6 +184,7 @@ export default function ShadingRunner({
     }
     setEarned(loggedIn);
     setFinished(true);
+    router.refresh();
   }
 
   async function onUpload(e: React.ChangeEvent<HTMLInputElement>) {

src/components/TraceRunner.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { badgeSvgMarkup, badgeFullSvg } from "./BadgeArt";
 import LineDraw from "./LineDraw";
 import { loadProgressDrawing, saveProgressDrawing, saveFinalDrawing, exportCanvasToDataURL, fileToDataURL } from "./drawingPersistence";
@@ -20,6 +21,7 @@ export default function TraceRunner({ meta, steps, loggedIn, username, completed
   meta: Meta; steps: StepData[]; loggedIn: boolean; username: string; completedSteps: number[]; alreadyEarned: boolean;
   carryImage?: string; nextHref?: string; nextLabel?: string;
 }) {
+  const router = useRouter();
   const lastIndex = steps.length - 1;
   const [idx, setIdx] = useState(Math.min(completedSteps.length, lastIndex));
   const [finished, setFinished] = useState(alreadyEarned);
@@ -111,6 +113,7 @@ export default function TraceRunner({ meta, steps, loggedIn, username, completed
     }
     setEarned(loggedIn && !!meta.badgeKey);
     setFinished(true);
+    router.refresh(); // refresh cached pages (Learn, gating) with the new progress
   }
   async function onUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0]; if (!file) return;