Doppp · Doppp · Aug 20, 2026 · Aug 20, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,13 @@ All notable changes to `explorables` are documented here.
 
 ### Added
 
+- A learner-facing course overview route compiled from `COURSE.md`, with audience, prerequisites,
+  estimated effort, lesson count, and browser-local Start/Resume behavior before Lesson 1.
+- Contextual discovery checkpoint controls that preserve definition → prediction → explorable →
+  application → reflection order without adding another Markdown directive.
+- A new beginner orientation, `How machines learn`, and a one-parameter training-loop explorable
+  before Gradient Descent in `AI from First Principles`.
+
 - `@explorables/model-atlas`, a source-grounded 3D architecture and trace renderer with strict inert schemas, evidence labels, reviewed source references, semantic controls, exact tensor tables, WebGL fallback, comparison mode, and deterministic cleanup.
 - A learner-facing Transformer Model Atlas in `AI from First Principles` covering the exact tiny teaching model, published GPT-1/2/3 configurations, GPT-4's explicit disclosure boundary, and source-gated DeepSeek V4, Kimi K3, Qwen 3, MiniMax M1, and GLM 5.2 mechanism views.
 - Model Atlas descriptor validation, scene/bundle budgets, renderer and comparison tests, and first-party browser interaction/accessibility coverage.
@@ -21,6 +28,13 @@ All notable changes to `explorables` are documented here.
 
 ### Changed
 
+- `AI from First Principles` is versioned as `0.5.0-onboarding.1`, now contains fourteen lessons,
+  and explicitly supports technical learners with no prior machine-learning or calculus knowledge.
+  The new course version intentionally creates a fresh browser-progress namespace while leaving
+  earlier version data untouched.
+- Discovery lessons now keep their checkpoint summary near the lesson header while placing the
+  active learner control in the lesson's instructional context.
+
 - Reframed the local collection home as a general, status-first course library: available courses are primary, planned AI courses sit in a quieter roadmap, and visible product branding now uses `Explorables` while technical identifiers remain lowercase.
 - `AI from First Principles` is versioned as `0.4.0-foundations.1`, with self-contained canonical
   lesson prose, prerequisite bridges, worked examples, implementation connections, failure modes,

diff --git a/README.md b/README.md
@@ -8,7 +8,10 @@ coding-agent tutor. The lesson prose is the canonical source for definitions and
 tutor adapts and reinforces it. A course is a normal folder. It needs no account, database,
 analytics, hosted executor, or LMS.
 
-The reference course is [AI from First Principles](examples/ai-from-first-principles). Its current thirteen-lesson foundation builds from gradients and linear layers through a trained tiny Transformer, cached autoregressive generation, sampling, and claim-aligned evaluation.
+The reference course is [AI from First Principles](examples/ai-from-first-principles). Its current
+fourteen-lesson foundation begins with a plain-language learning loop, then builds from gradients
+and linear layers through a trained tiny Transformer, cached autoregressive generation, sampling,
+and claim-aligned evaluation.
 
 The accepted [model-learning roadmap](docs/course-roadmap.md) continues through `Open Frontier Models: Shared Techniques`, then separate `Inside DeepSeek`, `Inside Kimi`, `Inside Qwen`, `Inside MiniMax`, and `Inside GLM` courses. Each model course uses pinned primary sources and a controlled reconstruction rather than treating one umbrella survey as a substitute for studying the lab.
 
@@ -37,7 +40,7 @@ pnpm install --frozen-lockfile
 pnpm course
 ```
 
-Open the printed `http://127.0.0.1:4173` URL in the Codex built-in browser, a normal browser, or Claude Code Desktop Preview. The local library shows the foundation, shared research-skills course, and planned model specializations. Select an available course. Codex should then follow that course's `AGENTS.md` and tutor you through its active lesson. For example:
+Open the printed `http://127.0.0.1:4173` URL in the Codex built-in browser, a normal browser, or Claude Code Desktop Preview. The local library shows the foundation, shared research-skills course, and planned model specializations. Select an available course, read its overview, then start or resume it. Codex should follow that course's `AGENTS.md` and tutor you through its active lesson. For example:
 
 > Start AI from First Principles.
 

diff --git a/apps/dev-preview/src/styles.css b/apps/dev-preview/src/styles.css
@@ -437,6 +437,103 @@ h3 {
   padding: clamp(1.25rem, 4vw, 2.25rem) 0 5rem;
 }
 
+.course-overview {
+  width: min(100% - 2.5rem, 72rem);
+  margin: 0 auto;
+  padding: clamp(1.25rem, 4vw, 2.25rem) 0 5rem;
+}
+
+.course-overview-masthead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 1.1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.course-overview-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
+  gap: clamp(2rem, 5vw, 5rem);
+  align-items: end;
+  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
+}
+
+.course-overview-hero h1 {
+  max-width: 13ch;
+  margin: 0;
+  font-size: clamp(3rem, 7vw, 5.7rem);
+  line-height: 0.98;
+  text-wrap: balance;
+}
+
+.course-overview-summary {
+  max-width: 43rem;
+  margin: 1.25rem 0 0;
+  color: var(--muted);
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
+}
+
+.course-overview-facts {
+  display: grid;
+  gap: 0.9rem;
+  margin: 0;
+  padding: 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-soft);
+}
+
+.course-overview-facts div {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.course-overview-facts dt {
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.course-overview-facts dd {
+  margin: 0;
+  line-height: 1.45;
+}
+
+.course-overview-start {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1.5rem;
+  align-items: center;
+  margin-bottom: clamp(3rem, 6vw, 5rem);
+  padding: clamp(1.25rem, 3vw, 1.75rem);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--sage);
+}
+
+.course-overview-start h2,
+.course-overview-start p {
+  margin: 0;
+}
+
+.course-overview-start h2 {
+  font-size: clamp(1.6rem, 3vw, 2.2rem);
+}
+
+.course-overview-start p:last-child {
+  margin-top: 0.45rem;
+  color: var(--muted);
+}
+
+.course-overview-body {
+  max-width: 52rem;
+  margin: 0 auto;
+}
+
 .library-hero {
   width: 100%;
   margin-bottom: clamp(2.5rem, 4vw, 4rem);
@@ -1022,6 +1119,58 @@ pre {
   font-size: 0.73rem;
 }
 
+.checkpoint-control {
+  margin: 2rem 0;
+  padding: clamp(1rem, 3vw, 1.4rem);
+  border: 1px solid var(--border-strong);
+  border-left: 4px solid var(--primary);
+  border-radius: var(--radius-md);
+  background: var(--sage);
+}
+
+.checkpoint-control-experiment {
+  background: var(--blue);
+}
+
+.checkpoint-control .eyebrow,
+.checkpoint-control h2,
+.checkpoint-control > p:last-child {
+  margin-top: 0;
+}
+
+.checkpoint-control h2 {
+  margin-bottom: 0.65rem;
+  font-size: clamp(1.35rem, 3vw, 1.75rem);
+}
+
+.checkpoint-control .checkpoint-response-form {
+  grid-column: auto;
+  width: 100%;
+  padding-top: 0;
+}
+
+.checkpoint-control button {
+  width: fit-content;
+  min-height: 2.65rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink);
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.checkpoint-control button:hover:not(:disabled) {
+  border-color: var(--primary);
+  background: var(--surface-soft);
+}
+
+.checkpoint-control button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .automatic-checkpoint {
   max-width: 12rem;
   text-align: right;
@@ -1352,6 +1501,16 @@ pre code {
   .lesson {
     padding-top: 2.5rem;
   }
+
+  .course-overview-hero {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2rem;
+    align-items: start;
+  }
+
+  .course-overview-facts {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 @media (max-width: 42rem) {
@@ -1372,6 +1531,24 @@ pre code {
     padding-top: 1.5rem;
   }
 
+  .course-overview {
+    width: min(100% - 2rem, 72rem);
+    padding-top: 1.5rem;
+  }
+
+  .course-overview-hero {
+    padding: 2.5rem 0;
+  }
+
+  .course-overview-hero h1 {
+    font-size: clamp(2.6rem, 13vw, 3.8rem);
+  }
+
+  .course-overview-facts,
+  .course-overview-start {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .library-hero {
     margin-bottom: 2.5rem;
   }

diff --git a/docs/PRD.md b/docs/PRD.md
@@ -1,8 +1,8 @@
 # Explorables: Open Explorable Course Runtime
 ## Product Requirements, Technical Specification, and Course Authoring Guide
 
-**Status:** Draft v0.4
-**Date:** 19 August 2026
+**Status:** Draft v0.5
+**Date:** 20 August 2026
 **Display name:** `Explorables`
 **Supported initial hosts:** Codex and Claude Code Desktop  
 **Public site:** `https://explorables.ai`  
@@ -304,6 +304,12 @@ pnpm course
 pnpm site:dev
 ```
 
+Opening a course first presents a course overview compiled from the body and frontmatter of
+`COURSE.md`. It states the promise, audience, prerequisites, estimated effort, lesson map, local
+progress boundary, and how to use the course. A new learner chooses **Start course** before entering
+Lesson 1; a returning learner chooses **Resume course** to return to the saved lesson and Guided
+checkpoint. Direct lesson links remain valid.
+
 ## 6.2 Screen layout
 
 The intended desktop experience is:
@@ -347,6 +353,13 @@ These stages are pedagogical guidance, not mandatory runtime primitives. Most ca
 Terms and notation required for a meaningful prediction must appear before it. The full mechanism
 may remain until after the learner has generated evidence.
 
+The runtime must preserve that reading order. In a discovery-cycle lesson it may show a compact
+checkpoint summary near the lesson header, but the active prediction control appears after the
+orienting definitions and immediately before the referenced explorable. Experiment guidance stays
+with that explorable, application follows the exercise, and reflection follows the concluding
+explanation. This placement is derived from checkpoint phases and the existing `explorable` and
+`exercise` anchors; it does not add a third Markdown directive.
+
 ## 6.4 Course sessions and learner language
 
 Every course start surface must explain how to leave and return without relying on a learner to know host-specific commands. The runtime and host adapters use these meanings consistently:
@@ -1181,6 +1194,8 @@ The `explorables` runtime performs only the following:
 10. Provide development errors with file and line references.
 11. For courses that opt in, present guided checkpoints, ordered navigation,
     explicit skip/Explore controls, and local resume state.
+12. Present a course overview from `COURSE.md` before Lesson 1 and place discovery controls in their
+    instructional context.
 
 It does not teach the subject itself. The course content and Codex instructions do that.
 
@@ -1246,6 +1261,11 @@ A course or individual lesson may opt into a discovery cycle. Discovery lessons
 
 The runtime may show saved runs and compare a selected baseline with the latest evidence. Experiment payloads contain bounded scalar input/output fields. The main runtime validates and stores them; explorable iframes receive no browser storage access. These learning artifacts support reflection but are not proof of understanding, assessment results, analytics, or remote submissions.
 
+The runtime renders the discovery progress list separately from the active checkpoint control.
+Sanitised lesson HTML supplies the existing explorable and exercise anchors used for contextual
+placement. Non-discovery Guided lessons retain the ordinary checkpoint panel for backward
+compatibility.
+
 ---
 
 # 14. Technology stack
@@ -2664,6 +2684,9 @@ See how it works. Build it yourself.
 - [ ] A local collection can list and open explicitly configured course roots.
 - [ ] Planned collection entries are visibly unavailable and cannot be opened.
 - [ ] Standalone course start and build behavior remains supported.
+- [ ] Opening a course presents its `COURSE.md` orientation before Lesson 1.
+- [ ] Discovery predictions appear after their prerequisite prose and before the referenced
+      explorable in DOM and keyboard order.
 
 ## Agent hosts
 
@@ -2705,6 +2728,8 @@ See how it works. Build it yourself.
 - [ ] Each foundational lesson defines prediction prerequisites before the prompt and provides an
   observed-value explanation, worked example, implementation bridge, deliberate failure, and
   explanation-based recap.
+- [ ] The reference course begins with a plain-language learning-loop orientation before gradient
+  descent or other mathematical machinery.
 - [ ] At least five target learners complete two lessons.
 - [ ] Setup failures and authoring friction are documented.
 - [ ] Feedback informs the v1 format before the full course is produced.

diff --git a/docs/architecture.md b/docs/architecture.md
@@ -35,6 +35,11 @@ COURSE.md + lessons + modules + exercises
 5. Transform the two approved directives to typed runtime placeholders. Their fallback bodies remain visible until or when interaction is unavailable.
 6. Rewrite safe relative links/assets through course-scoped server routes.
 
+The compiled runtime course retains the sanitised body of `COURSE.md` as `introductionHtml`.
+Collection and standalone course roots render that introduction as a course overview before a
+lesson route is selected. The overview reads the existing session/Guided records to choose a Start
+or Resume destination; it does not create a second progress store.
+
 Raw HTML, event attributes, script URLs, and unknown directives are not passed through. Source file and AST position follow every typed directive so build and runtime errors identify the authoring location.
 
 ## Explorable compilation and sandbox
@@ -65,6 +70,12 @@ Only an explicit learner action or an exact `(instanceId, event)` sandbox messag
 
 Discovery-cycle lessons add semantic checkpoint phases without adding Markdown directives. `recordExperiment` wraps the existing local event channel with bounded scalar inputs and outputs. The parent validates the payload, supplies its ID and timestamp, retains at most twenty records per explorable, and renders baseline/latest comparisons. The iframe cannot select storage keys, read prior records, or bypass its opaque origin and `connect-src 'none'` boundary.
 
+The checkpoint summary and active control are separate runtime components. Sanitised lesson HTML
+is split around its existing `data-explorable` and `data-exercise` placeholders: prediction is
+rendered before the explorable, experiment guidance after it, application after the exercise, and
+reflection after the conclusion. All controls dispatch to the same Guided reducer. Non-discovery
+lessons keep the original unified checkpoint panel.
+
 Guided-state schema v2 stores submitted responses, experiment runs, and selected baselines. Parsing migrates valid schema-v1 progress. Confirmed restart removes responses and evidence at or after the chosen checkpoint; reset removes both v2 and legacy keys. These artifacts are explicitly ungraded and local-only.
 
 Every locally persistent course also writes a smaller, versioned session record containing only its last visited lesson and update time. The runtime reads both records defensively, resumes Guided courses from their reducer-owned active lesson and first incomplete checkpoint, and resumes unguided courses from the session lesson. It flushes both records on `pagehide` and reports unavailable browser storage without blocking the lesson.