feat(mcp): render lesson MDX in the lesson widgets the way the app does

`lessons.content` is MDX — markdown plus the ~30 JSX components the web app
maps in `components/lesson/mdx-components.tsx` (`<Callout>`, `<Quiz>`,
`<Steps>`, `<Table>`, `<Video>`, `<LessonCheckpoint>`, …). The two MCP lesson
widgets ran that source through plain react-markdown, so every authored
component reached the student as literal source text, `JSON.parse('…')`
payloads included, and `embed_code` was dropped entirely.

Widgets can not compile-and-run MDX: `@mdx-js/mdx`'s run() builds the module
with the Function constructor, which the widget CSP sandbox blocks. So parse
only — remark + remark-mdx keeps JSX as mdxJsxFlowElement nodes — and render
that mdast with React. JSX attribute expressions are resolved without a JS
runtime, including the `{JSON.parse('…')}` form the block editor serializes.

- `resources/shared/lesson/`: mdast parser + attribute resolver, the widget
  port of the app's lesson component map, and the mdast→React renderer
- both lesson widgets now render video / embed_code / MDX in the same order as
  `lesson-content.tsx`; `lms_get_lesson` selects and passes `embed_code`
- unknown tags keep their text, an unparseable lesson falls back to its source,
  and an error boundary stops one bad component from blanking the lesson
- `LessonCheckpoint` renders a marker: checkpoint attempts are server-write-only
  and need the lesson's checkpoint provider, neither of which exists in a widget

Bundle cost is ~+280 KB raw (~+70 KB gzip) per lesson widget for remark-mdx.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QpttCAB3gFD9H5WFHG4boW

Author: guillermoscript

docs/images/mcp-lesson-render-after-dark.png

@@ -37,8 +37,11 @@
     "react-markdown": "^10.1.0",
     "react-router": "^7.13.0",
     "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.1",
+    "remark-parse": "^11.0.0",
     "tailwindcss": "^4.2.0",
     "ts-fsrs": "^5.4.1",
+    "unified": "^11.0.5",
     "zod": "^4.3.6"
   },
   "devDependencies": {

docs/images/mcp-lesson-render-after.png

@@ -5,7 +5,7 @@ import {
   type WidgetMetadata,
 } from "mcp-use/react";
 import { z } from "zod";
-import { Markdown } from "../shared/markdown";
+import { LessonBody } from "../shared/lesson";
 
 // ── Schema ──────────────────────────────────────────────────────────────────
 
@@ -14,6 +14,7 @@ const lessonSchema = z.object({
   title: z.string(),
   description: z.string().nullable(),
   video_url: z.string().nullable(),
+  embed_code: z.string().nullable(),
   content: z.string().nullable(),
   status: z.string(),
   sequence: z.number(),
@@ -170,39 +171,18 @@ export default function LessonPreview() {
             )}
           </div>
 
-          {/* Video link */}
-          {lesson.video_url && (
-            <div className="mb-5 flex items-center gap-2.5 rounded-[10px] border border-sky-200 bg-sky-50 px-4 py-3 dark:border-sky-900 dark:bg-sky-950">
-              <span className="text-xl">▶️</span>
-              <div>
-                <div className="mb-0.5 text-xs font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500">
-                  Video lesson
-                </div>
-                <a
-                  href={lesson.video_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[13px] font-medium break-all text-sky-700 no-underline dark:text-sky-400"
-                >
-                  {lesson.video_url}
-                </a>
-              </div>
-            </div>
-          )}
-
-          {/* Content reading pane */}
-          {lesson.content ? (
-            <div className="mb-5 rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
-              <div className="mb-3 text-[11px] font-bold tracking-[0.06em] text-zinc-400 uppercase dark:text-zinc-500">
-                Content (preview)
-              </div>
-              <Markdown content={lesson.content} dark={dark} fontSize={14} />
-            </div>
-          ) : (
-            <div className="mb-5 rounded-xl border border-zinc-200 bg-white p-8 text-center text-[13px] text-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-500">
-              No written content for this lesson.
+          {/* Content preview — video, embed and MDX exactly as students see it */}
+          <div className="mb-5">
+            <div className="mb-3 text-[11px] font-bold tracking-[0.06em] text-zinc-400 uppercase dark:text-zinc-500">
+              Content (preview)
             </div>
-          )}
+            <LessonBody
+              content={lesson.content}
+              videoUrl={lesson.video_url}
+              embedCode={lesson.embed_code}
+              emptyMessage="No written content for this lesson."
+            />
+          </div>
 
           {/* Attached resources */}
           <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">