coursecast 0.1.0

package/src/index.mjs

@@ -0,0 +1,168 @@
+// Orchestration: topic → (engine) content → (render) HTML → optional (provider) deploy.
+
+import { mkdir, writeFile, readdir, rm } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { renderLesson } from './render.mjs';
+import { loadStorage } from './storage/index.mjs';
+
+// Reserved because they collide with shared localStorage keys used by the dashboard.
+const RESERVED_SLUGS = new Set(['progress', 'theme', 'index']);
+
+export function slugify(s) {
+  let slug = s.toLowerCase().trim()
+    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'lesson';
+  if (RESERVED_SLUGS.has(slug)) slug = `${slug}-lesson`;
+  return slug;
+}
+
+async function loadEngine(id) {
+  try { return await import(`./engines/${id}.mjs`); }
+  catch { throw new Error(`Unknown engine "${id}". Available: claude-code, gemini, codex, stub.`); }
+}
+async function loadProvider(id) {
+  try { return await import(`./providers/${id}.mjs`); }
+  catch { throw new Error(`Unknown provider "${id}". Available: vercel, netlify.`); }
+}
+
+export async function createLesson({ topic, engine = 'claude-code', model, storage = 'local', outDir, log = () => {} }) {
+  const slug = slugify(topic);
+  const eng = await loadEngine(engine);
+  log(`🧠  Generating lesson with the "${eng.name}" engine…`);
+  const content = await eng.generateLesson({ topic, slug, model });
+  content.slug = content.slug || slug;
+
+  const store = await loadStorage(storage);
+  content.storageSnippet = store.clientSnippet(content.slug);
+  if (store.needsBackend) {
+    log(`🔗  Storage: cloud (sync-code). Note: the cloud API isn't wired yet — the page runs local-only until deployed in cloud mode.`);
+  }
+
+  const html = renderLesson(content);
+  const dir = resolve(outDir || join(process.cwd(), 'out', slug));
+  await mkdir(dir, { recursive: true });
+  const file = join(dir, 'index.html');
+  await writeFile(file, html, 'utf8');
+  log(`📄  Wrote ${file}`);
+  return { slug, dir, file, content };
+}
+
+// Generate a whole multi-lesson course from one topic: syllabus -> lessons (parallel,
+// with retry) -> mastery dashboard. Returns { dir, slug, manifest, lessons, failed }.
+export async function createCourse({ topic, engine = 'claude-code', model, storage = 'local', outDir, lessons, concurrency = 4, log = () => {} }) {
+  concurrency = Math.max(1, concurrency || 4);
+  lessons = lessons ? Math.max(1, lessons) : undefined;
+  const slug = slugify(topic);
+  const eng = await loadEngine(engine);
+  if (typeof eng.generateSyllabus !== 'function') {
+    throw new Error(`Engine "${eng.name}" does not support course generation (no generateSyllabus).`);
+  }
+  const store = await loadStorage(storage);
+  const { renderLesson } = await import('./render.mjs');
+
+  log(`🧭  Designing syllabus with the "${eng.name}" engine…`);
+  const syllabus = await eng.generateSyllabus({ topic, lessons, model });
+  const phases = (syllabus.phases || []).filter(p => p && Array.isArray(p.lessons) && p.lessons.length);
+  if (!phases.length) throw new Error('Syllabus had no lessons.');
+
+  // Flatten in learning order, dedupe stems, and wire labels + next-cards.
+  const flat = [];
+  const seen = new Set();
+  for (const ph of phases) {
+    for (const l of ph.lessons) {
+      let stem = slugify(l.stem || l.title || 'lesson');
+      while (seen.has(stem)) stem = `${stem}-2`;
+      seen.add(stem);
+      flat.push({ stem, title: l.title || stem, desc: l.desc || '', phase: ph.name });
+      l.stem = stem; // keep manifest in sync for the dashboard
+    }
+  }
+  const total = flat.length;
+  log(`📚  ${total} lessons across ${phases.length} phases. Generating…`);
+
+  const dir = resolve(outDir || join(process.cwd(), 'out', slug));
+  await mkdir(dir, { recursive: true });
+
+  // Pass 1: generate each lesson's CONTENT (with retry). Rendering/next-cards happen in
+  // pass 2, once we know which lessons survived — so next-cards never point to a skipped page.
+  async function genContent(item, i) {
+    const context = {
+      courseTitle: syllabus.courseTitle,
+      title: item.title,
+      lessonLabel: `Lesson ${i + 1} of ${total}`,
+      kicker: item.phase,
+      next: null, // real next-card is wired in pass 2 against survivors
+    };
+    const attempt = async () => {
+      const content = await eng.generateLesson({ topic: `${item.title} — ${topic}`, slug: item.stem, model, context });
+      content.slug = item.stem;
+      content.courseTitle = syllabus.courseTitle;
+      if (!content.title) throw new Error('empty lesson');
+      return content;
+    };
+    try { return { stem: item.stem, ok: true, content: await attempt() }; }
+    catch (e1) {
+      log(`   ↻ retry: ${item.stem} (${e1.message})`);
+      try { return { stem: item.stem, ok: true, content: await attempt() }; }
+      catch (e2) { log(`   ✗ failed: ${item.stem} (${e2.message})`); return { stem: item.stem, ok: false, error: e2.message }; }
+    }
+  }
+
+  // Bounded-concurrency pool.
+  const results = new Array(total);
+  let cursor = 0;
+  async function worker() {
+    while (cursor < total) {
+      const i = cursor++;
+      results[i] = await genContent(flat[i], i);
+      const okSoFar = results.filter(r => r && r.ok).length;
+      log(`   ${results[i].ok ? '✓' : '✗'} ${okSoFar}/${total} ok  ${flat[i].stem}`);
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(concurrency, total) }, worker));
+
+  const failed = results.filter(r => r && !r.ok).map(r => r.stem);
+  const okStems = new Set(results.filter(r => r && r.ok).map(r => r.stem));
+
+  // Pass 2: wire each survivor's next-card to the NEXT SURVIVING lesson, then render + write.
+  const survivors = flat.filter(it => okStems.has(it.stem));
+  const byStem = new Map(results.filter(r => r && r.ok).map(r => [r.stem, r.content]));
+  for (let k = 0; k < survivors.length; k++) {
+    const content = byStem.get(survivors[k].stem);
+    const nx = survivors[k + 1];
+    content.next = nx ? { stem: nx.stem, title: nx.title, desc: nx.desc } : null;
+    content.storageSnippet = store.clientSnippet(content.slug);
+    await writeFile(join(dir, `${content.slug}.html`), renderLesson(content), 'utf8');
+  }
+
+  // Prune stale lesson files from earlier runs (a non-deterministic engine may rename stems).
+  try {
+    const keep = new Set([...okStems].map(s => `${s}.html`).concat('index.html'));
+    for (const f of await readdir(dir)) {
+      if (f.endsWith('.html') && !keep.has(f)) await rm(join(dir, f));
+    }
+  } catch { /* best effort */ }
+
+  // Build the dashboard over the lessons that actually generated.
+  const manifest = {
+    courseTitle: syllabus.courseTitle || slug,
+    courseSubtitle: syllabus.courseSubtitle || '',
+    lessonPath: stem => `${stem}.html`,
+    phases: phases.map(ph => ({
+      name: ph.name,
+      lessons: ph.lessons.filter(l => okStems.has(l.stem)).map(l => ({ stem: l.stem, title: l.title, desc: l.desc || '' })),
+    })).filter(ph => ph.lessons.length),
+  };
+  const { renderDashboard } = await import('./render-dashboard.mjs');
+  await writeFile(join(dir, 'index.html'), renderDashboard(manifest), 'utf8');
+
+  if (store.needsBackend) log(`🔗  Storage: cloud (sync-code) — client adapter embedded; wire the cloud API at deploy to activate.`);
+  log(`📄  Wrote ${okStems.size} lessons + dashboard to ${dir}`);
+  return { dir, slug, manifest, lessons: [...okStems], failed };
+}
+
+export async function deployDir({ dir, provider = 'vercel', prod = true, dryRun = false, log = () => {} }) {
+  const prov = await loadProvider(provider);
+  log(`🚀  Deploying to ${prov.name}${dryRun ? ' (dry run)' : ''}…`);
+  const res = await prov.deploy({ dir, prod, dryRun });
+  return res;
+}

package/src/progress-client.mjs

@@ -0,0 +1,56 @@
+// Single source of truth for the per-lesson progress reporter that every lesson embeds.
+// It writes a compact summary of THIS lesson into the shared `cc-progress` localStorage
+// object, so the course dashboard can read mastery across all lessons with no backend.
+//
+// Status model:
+//   mastered       — all checklist items done AND a quiz was taken with confidence >= 0.8
+//   needs_practice — a quiz was taken but confidence < 0.6
+//   in_progress    — some progress (a check ticked or quiz attempted) but not mastered
+//   visited        — opened, nothing done yet
+// A lesson with no entry at all is treated as "untouched" by the dashboard.
+//
+// Robustness notes (from review):
+//  - checksDone is read from the live DOM, not storage, so it never depends on the
+//    lesson's own save() timing.
+//  - mastered REQUIRES an actual quiz (a checklist-only lesson can't auto-master).
+//  - completion % weights the quiz slot by score, so a failed quiz isn't "100%".
+//  - `ts` is only bumped when real work changed, so re-opening doesn't reset staleness.
+
+export function progressSnippet(slug) {
+  return `<!-- coursecast-progress -->
+<script>(function(){
+  var SLUG=${JSON.stringify(slug)}, PKEY='cc-progress', KEY='cc-'+SLUG;
+  function read(k){var v;try{v=JSON.parse(localStorage.getItem(k)||'{}')}catch(e){}return (v&&typeof v==='object'&&!Array.isArray(v))?v:{};}
+  function write(k,v){try{localStorage.setItem(k,JSON.stringify(v))}catch(e){}}
+  function title(){var t=(document.title||SLUG).replace(/\\s+—\\s+coursecast.*/,'');return t.replace(/^Lesson\\s+\\S+\\s+·\\s+/,'').trim()||SLUG;}
+  function snapshot(){
+    var st=read(KEY);
+    var CHK='.check-item input[type=checkbox], .wcheck';
+    var checksTotal=document.querySelectorAll(CHK).length;
+    var checksDone=document.querySelectorAll(CHK.replace(/,/g,':checked,')+':checked').length;
+    var quizTotal=document.querySelectorAll('.quiz-q').length;
+    var quizScore=(st.quizScore!=null)?st.quizScore:null;
+    if(quizScore!=null&&quizTotal>0&&quizScore>quizTotal)quizScore=quizTotal;
+    var conf=quizTotal?Math.min(1,(quizScore||0)/quizTotal):0;
+    var denom=checksTotal+(quizTotal?1:0);
+    var quizCredit=(quizScore!=null)?(quizTotal?conf:1):0;
+    var pct=denom?((checksDone+quizCredit)/denom):0;
+    if(pct>1)pct=1;
+    var status;
+    if(checksDone>=checksTotal&&quizTotal>0&&quizScore!=null&&conf>=0.8)status='mastered';
+    else if(quizScore!=null&&conf<0.6)status='needs_practice';
+    else if(checksDone>0||quizScore!=null)status='in_progress';
+    else status='visited';
+    var prog=read(PKEY),prev=prog[SLUG];
+    var changed=!prev||prev.checksDone!==checksDone||prev.quizScore!==quizScore;
+    var ts=(prev&&!changed&&prev.ts)?prev.ts:Date.now();
+    prog[SLUG]={title:title(),status:status,pct:Math.round(pct*100)/100,conf:Math.round(conf*100)/100,
+      checksDone:checksDone,checksTotal:checksTotal,quizScore:quizScore,quizTotal:quizTotal,ts:ts};
+    write(PKEY,prog);
+  }
+  function ready(fn){if(document.readyState!=='loading')fn();else document.addEventListener('DOMContentLoaded',fn);}
+  ready(snapshot);
+  document.addEventListener('change',function(e){var t=e.target;if(t&&t.matches&&t.matches('.check-item input, .wcheck'))setTimeout(snapshot,40);});
+  document.addEventListener('click',function(e){var t=e.target;if(t&&t.closest&&t.closest('.quiz-opt'))setTimeout(snapshot,40);});
+})();</script>`;
+}

package/src/providers/netlify.mjs

@@ -0,0 +1,27 @@
+// netlify provider — deploys a static directory using the user's existing `netlify login`.
+
+import { spawnSync } from 'node:child_process';
+
+export const name = 'netlify';
+
+export function isAvailable() {
+  const r = spawnSync('netlify', ['--version'], { encoding: 'utf8' });
+  return r.status === 0;
+}
+
+export async function deploy({ dir, prod = true, dryRun = false }) {
+  if (!isAvailable()) {
+    throw new Error('Netlify CLI not found. Install with `npm i -g netlify-cli`, then `netlify login`.');
+  }
+  const args = ['deploy', '--dir', dir];
+  if (prod) args.push('--prod');
+  if (dryRun) {
+    return { url: null, command: `netlify ${args.join(' ')}`, dryRun: true };
+  }
+  const r = spawnSync('netlify', args, { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] });
+  if (r.status !== 0) {
+    throw new Error(`netlify deploy failed: ${r.stderr || r.stdout}`);
+  }
+  const url = (r.stdout.match(/https:\/\/\S+\.netlify\.app\S*/) || [])[0] || r.stdout.trim().split('\n').pop();
+  return { url, command: `netlify ${args.join(' ')}` };
+}

package/src/providers/vercel.mjs

@@ -0,0 +1,28 @@
+// vercel provider — deploys a static directory using the user's existing `vercel login`.
+
+import { spawnSync } from 'node:child_process';
+
+export const name = 'vercel';
+
+export function isAvailable() {
+  const r = spawnSync('vercel', ['--version'], { encoding: 'utf8' });
+  return r.status === 0;
+}
+
+export async function deploy({ dir, prod = true, dryRun = false }) {
+  if (!isAvailable()) {
+    throw new Error('Vercel CLI not found. Install with `npm i -g vercel`, then `vercel login`.');
+  }
+  const args = ['deploy', dir, '--yes'];
+  if (prod) args.push('--prod');
+  if (dryRun) {
+    return { url: null, command: `vercel ${args.join(' ')}`, dryRun: true };
+  }
+  const r = spawnSync('vercel', args, { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] });
+  if (r.status !== 0) {
+    throw new Error(`vercel deploy failed: ${r.stderr || r.stdout}`);
+  }
+  // Vercel prints the deployment URL on stdout.
+  const url = (r.stdout.match(/https:\/\/\S+\.vercel\.app\S*/) || [])[0] || r.stdout.trim().split('\n').pop();
+  return { url, command: `vercel ${args.join(' ')}` };
+}

package/src/render-dashboard.mjs

@@ -0,0 +1,218 @@
+// render-dashboard.mjs — builds a course dashboard/index page that reads the shared
+// `cc-progress` localStorage object and shows a mastery heatmap, overall progress, and
+// a "Review next" panel. Pure static; no backend. Reused by the CLI and the GCP retrofit.
+//
+// manifest = {
+//   courseTitle, courseSubtitle, lessonPath(stem) -> href,
+//   phases: [{ name, lessons: [{ stem, title, desc }] }]
+// }
+
+const esc = (s = '') => String(s)
+  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+// Safe embed of data into an inline <script>: prevents a "</script>" or "<!--" in any
+// string from breaking out of the script element.
+const jsonEmbed = v => JSON.stringify(v).replace(/</g, '\\u003c');
+
+const CSS = `
+  :root{color-scheme:light;--page:#f9f9f7;--surface:#fcfcfb;--ink:#0b0b0b;--ink-2:#52514e;--muted:#898781;--grid:#e1e0d9;--border:rgba(11,11,11,0.10);--accent:#2a78d6;
+    --mastered:#0ca30c;--progress:#2a78d6;--needs:#eda100;--visited:#898781;--untouched:#c3c2b7;}
+  :root[data-theme="dark"]{color-scheme:dark;--page:#0d0d0d;--surface:#1a1a19;--ink:#fff;--ink-2:#c3c2b7;--muted:#898781;--grid:#2c2c2a;--border:rgba(255,255,255,0.10);--accent:#3987e5;
+    --mastered:#0ca30c;--progress:#3987e5;--needs:#c98500;--visited:#898781;--untouched:#3a3a38;}
+  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--page:#0d0d0d;--surface:#1a1a19;--ink:#fff;--ink-2:#c3c2b7;--muted:#898781;--grid:#2c2c2a;--border:rgba(255,255,255,0.10);--accent:#3987e5;--needs:#c98500;--visited:#898781;--untouched:#3a3a38;}}
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--page);color:var(--ink);line-height:1.6}
+  .wrap{max-width:860px;margin:0 auto;padding:44px 20px 80px}
+  .theme-btn{float:right;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 12px;cursor:pointer;font-size:13px}
+  .kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
+  h1{font-size:38px;line-height:1.15;margin:8px 0 10px}.lede{font-size:17px;color:var(--ink-2);max-width:620px}
+  h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:40px 0 12px;border-bottom:1px solid var(--grid);padding-bottom:8px}
+  .overview{display:flex;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;margin:26px 0}
+  .ring{position:relative;width:96px;height:96px;flex:0 0 96px}
+  .ring svg{transform:rotate(-90deg)}
+  .ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
+  .ostats{display:flex;flex-wrap:wrap;gap:8px 20px;flex:1}
+  .ostat{font-size:13px;color:var(--ink-2)}.ostat b{color:var(--ink);font-size:20px;font-weight:700;display:block;line-height:1.1}
+  .legend{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 0;font-size:12px;color:var(--ink-2)}
+  .legend span{display:inline-flex;align-items:center;gap:5px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
+  .d-mastered{background:var(--mastered)}.d-in_progress{background:var(--progress)}.d-needs_practice{background:var(--needs)}.d-visited{background:var(--visited)}.d-untouched{background:var(--untouched)}
+  .heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:6px;margin:8px 0 4px}
+  .cell{aspect-ratio:1;border-radius:6px;background:var(--untouched);border:1px solid var(--border);cursor:pointer;position:relative;text-decoration:none;display:block}
+  .cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+  .cell.s-mastered{background:var(--mastered)}.cell.s-in_progress{background:var(--progress)}.cell.s-needs_practice{background:var(--needs)}.cell.s-visited{background:var(--visited)}
+  .review{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px 4px;margin:10px 0}
+  a.rrow,a.lrow{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:12px 16px;border-radius:11px}
+  a.rrow:hover,a.lrow:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
+  .rrow .why{font-size:12px;color:var(--muted)}
+  .num{flex:0 0 30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
+  .lt{font-weight:600}.ld{font-size:12.5px;color:var(--ink-2)}
+  .bar{flex:0 0 60px;height:6px;background:var(--grid);border-radius:3px;overflow:hidden;margin-left:auto}.bar>div{height:100%;background:var(--accent)}
+  .badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
+  .phase-lessons a{border:1px solid var(--border);background:var(--surface);border-radius:11px;margin:8px 0}
+  .foot{margin-top:44px;font-size:13px;color:var(--muted);border-top:1px solid var(--grid);padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
+  .reset{border:1px solid var(--border);background:none;color:var(--muted);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12px}
+  .empty{color:var(--muted);font-size:14px;padding:10px 16px}
+`;
+
+export function renderDashboard(manifest) {
+  const m = manifest;
+  const lessonPath = m.lessonPath || (stem => `${stem}.html`);
+  const allLessons = m.phases.flatMap(p => p.lessons);
+  const LDATA = jsonEmbed(allLessons.map((l, i) => ({
+    stem: l.stem, title: l.title, desc: l.desc || '', href: lessonPath(l.stem), n: i + 1,
+  })));
+  const PHASES = jsonEmbed(m.phases.map(p => ({ name: p.name, stems: p.lessons.map(l => l.stem) })));
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${esc(m.courseTitle)} — coursecast</title>
+<style>${CSS}</style>
+<script>try{var t=localStorage.getItem("cc-theme");if(t)document.documentElement.dataset.theme=t;}catch(e){}</script>
+</head>
+<body>
+<div class="wrap">
+  <button class="theme-btn" id="themeBtn">◐ Theme</button>
+  <div class="kicker">coursecast · Interactive Course</div>
+  <h1>${esc(m.courseTitle)}</h1>
+  <p class="lede">${esc(m.courseSubtitle || '')}</p>
+
+  <div class="overview" id="overview"></div>
+
+  <h2>Mastery map</h2>
+  <div class="heat" id="heat"></div>
+  <div class="legend">
+    <span><i class="dot d-mastered"></i>Mastered</span>
+    <span><i class="dot d-in_progress"></i>In progress</span>
+    <span><i class="dot d-needs_practice"></i>Needs practice</span>
+    <span><i class="dot d-visited"></i>Opened</span>
+    <span><i class="dot d-untouched"></i>Not started</span>
+  </div>
+
+  <h2>🎯 Review next</h2>
+  <div class="review" id="review"></div>
+
+  <h2>All lessons</h2>
+  <div id="toc"></div>
+
+  <div class="foot">
+    <span>Progress saves on this device. Generated by <b>coursecast</b>.</span>
+    <button class="reset" id="reset">Reset progress</button>
+  </div>
+</div>
+<script>
+(function(){
+  var LESSONS=${LDATA}, PHASES=${PHASES};
+  var BY={};LESSONS.forEach(function(l){BY[l.stem]=l});
+  function read(k){var v;try{v=JSON.parse(localStorage.getItem(k)||'{}')}catch(e){}return (v&&typeof v==='object'&&!Array.isArray(v))?v:{};}
+  function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+  var VALID={mastered:1,in_progress:1,needs_practice:1,visited:1,untouched:1};
+  var LABEL={mastered:'Mastered',needs_practice:'Needs practice',in_progress:'In progress',visited:'Opened',untouched:'Not started'};
+  var SW={needs_practice:1.0,in_progress:0.6,visited:0.5};
+
+  var tb=document.getElementById('themeBtn');
+  tb.addEventListener('click',function(){
+    var d=matchMedia('(prefers-color-scheme: dark)').matches;
+    var cur=document.documentElement.dataset.theme||(d?'dark':'light');var nx=cur==='dark'?'light':'dark';
+    document.documentElement.dataset.theme=nx;try{localStorage.setItem('cc-theme',nx)}catch(e){}
+  });
+
+  function statusOf(p){var s=p&&p.status;return VALID[s]?s:'untouched';}
+  function quizStr(p){return (p&&p.quizScore!=null&&p.quizTotal)?(' · quiz '+p.quizScore+'/'+p.quizTotal):'';}
+
+  function render(){
+    var prog=read('cc-progress');
+    var counts={mastered:0,needs_practice:0,in_progress:0,visited:0,untouched:0};
+    var sumPct=0;
+    LESSONS.forEach(function(l){
+      var p=prog[l.stem];var status=statusOf(p);
+      counts[status]++;
+      sumPct+=(p&&typeof p.pct==='number')?p.pct:0;
+    });
+    var total=LESSONS.length;
+    var overallPct=total?Math.round((sumPct/total)*100):0;
+    var remaining=total-counts.mastered-counts.needs_practice-counts.in_progress;
+
+    // Overview ring (neutral accent — green is reserved for mastery in the heatmap)
+    var r=42,circ=2*Math.PI*r,off=circ*(1-overallPct/100);
+    document.getElementById('overview').innerHTML=
+      '<div class="ring"><svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">'+
+      '<circle cx="48" cy="48" r="'+r+'" fill="none" stroke="var(--grid)" stroke-width="8"/>'+
+      '<circle cx="48" cy="48" r="'+r+'" fill="none" stroke="var(--accent)" stroke-width="8" stroke-linecap="round" stroke-dasharray="'+circ.toFixed(1)+'" stroke-dashoffset="'+off.toFixed(1)+'"/>'+
+      '</svg><div class="pct" role="img" aria-label="Overall progress '+overallPct+' percent">'+overallPct+'%</div></div>'+
+      '<div class="ostats">'+
+      '<div class="ostat"><b>'+counts.mastered+'</b>mastered</div>'+
+      '<div class="ostat"><b>'+counts.needs_practice+'</b>need practice</div>'+
+      '<div class="ostat"><b>'+counts.in_progress+'</b>in progress</div>'+
+      '<div class="ostat"><b>'+remaining+'</b>not started</div>'+
+      '<div class="ostat"><b>'+total+'</b>lessons total</div>'+
+      '</div>';
+
+    // Heatmap (accessible label per cell, not color-only)
+    document.getElementById('heat').innerHTML=LESSONS.map(function(l){
+      var p=prog[l.stem];var status=statusOf(p);
+      var lbl=l.n+'. '+l.title+' — '+LABEL[status]+quizStr(p);
+      return '<a class="cell s-'+status+'" href="'+esc(l.href)+'" title="'+esc(lbl)+'" aria-label="'+esc(lbl)+'"></a>';
+    }).join('');
+
+    // Review ranking
+    var now=Date.now();
+    var ranked=LESSONS.map(function(l){
+      var p=prog[l.stem];if(!p)return null;
+      var status=statusOf(p);
+      if(status==='mastered')return null;
+      if((p.checksDone|0)===0&&p.quizScore==null)return null; // opened, no work -> not review-worthy
+      var days=Math.max(0,(now-(p.ts||now))/86400000);
+      var timeScore=Math.log(days+2)/Math.LN2;
+      var conf=(typeof p.conf==='number')?p.conf:0;
+      var pr=(1-conf)*timeScore*(SW[status]||0.5);
+      var neverQuizzed=(p.quizTotal>0&&p.quizScore==null&&(p.checksDone|0)>0);
+      if(neverQuizzed)pr+=0.6;
+      var why=status==='needs_practice'?'low quiz score':(neverQuizzed?'take the quiz':(days>7?'getting stale':'unfinished'));
+      return {l:l,p:p,pr:pr,why:why};
+    }).filter(Boolean).sort(function(a,b){return b.pr-a.pr}).slice(0,5);
+
+    var rv=document.getElementById('review');
+    if(!ranked.length){
+      var started=LESSONS.some(function(l){return prog[l.stem]});
+      rv.innerHTML='<div class="empty">'+(started?'✅ Nothing to review right now — nicely done.':'Start any lesson below and your weak spots will show up here.')+'</div>';
+    } else {
+      rv.innerHTML=ranked.map(function(x){
+        return '<a class="rrow" href="'+esc(x.l.href)+'"><span class="num">'+x.l.n+'</span>'+
+          '<span><span class="lt">'+esc(x.l.title)+'</span><br><span class="why">'+esc(x.why)+esc(quizStr(x.p))+'</span></span>'+
+          '<span class="badge" style="color:var(--needs)">Review</span></a>';
+      }).join('');
+    }
+
+    // TOC by phase with status
+    document.getElementById('toc').innerHTML=PHASES.map(function(ph){
+      var rows=ph.stems.map(function(stem){
+        var l=BY[stem];if(!l)return '';
+        var p=prog[stem];var status=statusOf(p);var pct=Math.round(((p&&p.pct)||0)*100);
+        return '<div class="phase-lessons"><a class="lrow" href="'+esc(l.href)+'" aria-label="'+esc(l.n+'. '+l.title+' — '+LABEL[status])+'">'+
+          '<span class="dot d-'+status+'" style="flex:0 0 10px"></span>'+
+          '<span class="num">'+l.n+'</span>'+
+          '<span><span class="lt">'+esc(l.title)+'</span><br><span class="ld">'+esc(l.desc)+'</span></span>'+
+          '<span class="bar"><div style="width:'+pct+'%"></div></span></a></div>';
+      }).join('');
+      return '<h3 style="font-size:13px;color:var(--muted);margin:18px 0 4px;text-transform:uppercase;letter-spacing:.06em">'+esc(ph.name)+'</h3>'+rows;
+    }).join('');
+  }
+
+  document.getElementById('reset').addEventListener('click',function(){
+    if(!confirm('Reset all progress on this device?'))return;
+    try{
+      var kill=[];
+      for(var i=0;i<localStorage.length;i++){var k=localStorage.key(i);if(k&&k.indexOf('cc-')===0&&k!=='cc-theme')kill.push(k);}
+      kill.forEach(function(k){localStorage.removeItem(k)});
+    }catch(e){}
+    render();
+  });
+  render();
+  window.addEventListener('focus',render);
+})();
+</script>
+</body>
+</html>`;
+}