Skip to content

feat(lessons): structured learning system with validation engine, lesson dock and Home routing#44

Merged
srfwb merged 15 commits into
mainfrom
dev
Apr 27, 2026
Merged

feat(lessons): structured learning system with validation engine, lesson dock and Home routing#44
srfwb merged 15 commits into
mainfrom
dev

Conversation

@srfwb
Copy link
Copy Markdown
Owner

@srfwb srfwb commented Apr 27, 2026

Summary

Milestone 3: adds a complete lesson and challenge system to WeCode. Users can follow guided lessons (files locked, checkpoints validated in real time) and attempt free-form challenges (files editable, pass/fail checkpoints). The existing IDE shell is reused via a React context provider — project mode is untouched.

Ships with 1 lesson ("La structure d'une page HTML", 5 checkpoints) and 1 challenge ("Crée une page simple", 3 checkpoints) as proof of concept.

What changed

User-facing

  • Home rail is now a router: Accueil / Leçons / Challenges tabs with a live progress counter on Leçons.
  • Clicking a lesson card opens the IDE in lesson mode: starter files pre-loaded, file tree locked (no create/delete/rename), lesson dock visible with instructions and checkpoints.
  • Checkpoints validate in real time as the user edits (300 ms debounce). Passed checkpoints turn green with a "fait" label.
  • Challenges allow file operations and have pass/fail checkpoints.
  • "Reprends là où tu t'étais arrêté" card on Home shows in-progress lessons (priority over projects).
  • Clicking the WeCode brand in lesson mode returns to Home.
  • Status bar shows checkpoint progress instead of version number in lesson mode.
  • Changelog modal: "Nouveautés de la vX.Y.Z" link in the rail footer opens an in-app changelog viewer sourced from src/changelog.md.
  • Template selector focus ring suppressed (no more parasitic amber outline).

Internal

  • Validation engine (src/lessons/validation/): 16 rule types as a discriminated union, 6 implemented (element-exists, file-contains, file-not-contains, css-property, nesting, composite), pure functions testable under Node. Unimplemented types warn at runtime.
  • Lesson data format: JSON files in src/lessons/data/ with starter files, steps, paragraphs and checkpoint definitions.
  • useLessonStore (Zustand): manages active lesson, checkpoint states, start/complete/reset/exit lifecycle. Calls syncVfsNow on start so the preview iframe loads immediately.
  • useHomeStore (Zustand): tab routing for the Home rail.
  • LessonProvider (React context): wraps IdeShell in lesson mode, wires VFS change events to the validation engine with 300 ms debounce, persists completion via markLessonCompleted.
  • LessonDock rewritten to read from context (mock deleted). CSS matches the Claude Design handoff. Dock-head is a semantic <button> with aria-expanded.
  • IDE adaptations: FileTree respects fileOpsLocked, Toolbar exits lesson, StatusBar shows progress, shortcuts work in lesson view (Ctrl+N blocked).
  • 17 commits, 154 vitest tests (25 files), 21 cargo tests. Two code reviews (superpowers + drafter) with all critical/important findings fixed.

@srfwb srfwb merged commit 9d2a447 into main Apr 27, 2026
2 checks passed
@srfwb srfwb deleted the dev branch April 27, 2026 02:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant