Media Publishing Workflow

public/
  recordings/          # MP4/WebM terminal recordings
    {track-id}/
      {lesson-id}-{descriptor}.mp4
  diagrams/            # Architecture and system diagrams
    {section}/
      {slug}-{descriptor}.png
  evidence/            # Incident screenshots and deployment evidence
    {incident-slug}/
      {nn}-{descriptor}.png
  thumbnails/          # Video poster images
    {recording-id}.jpg

<TerminalRecording
  src="/recordings/choosing-your-stack-setup.mp4"
  title="Bootstrapping the project from scratch"
  duration={342}
  uploadDate="2026-05-18"
  poster="/thumbnails/choosing-your-stack-setup.jpg"
  chapters={[
    { title: "npx create-next-app",  start: 0,   anchor: "setup" },
    { title: "TypeScript config",    start: 60,  anchor: "typescript" },
    { title: "Tailwind install",     start: 145, anchor: "tailwind" },
    { title: "First build",          start: 260, anchor: "first-build" },
  ]}
  transcript={[
    { time: 0,   speaker: "Dev",     text: "Starting from an empty directory." },
    { time: 12,  speaker: "Claude",  text: "Run npx create-next-app@latest with TypeScript and App Router." },
    { time: 60,  speaker: "Dev",     text: "tsconfig.json looks correct. Moving to Tailwind." },
  ]}
/>

<YouTubeWalkthrough
  id="your-video-id"
  title="Full Claude Code session: content pipeline"
  duration={1842}
  uploadDate="2026-05-18"
  description="Complete walkthrough of building a content pipeline with Claude Code."
  chapters={[
    { title: "Project overview",    start: 0    },
    { title: "Content model",       start: 240  },
    { title: "MDX components",      start: 680  },
    { title: "Deployment",          start: 1400 },
  ]}
/>

<ArchitectureDiagram
  src="/diagrams/stack-overview-v2.png"
  alt="AI Execution Lab stack: Next.js 15 App Router, MDX content layer, Vercel Edge Network, TypeScript 5"
  caption="Production stack as of 2026-05-17"
  annotations={[
    { x: 20, y: 35, label: "MDX files in /content — processed by next-mdx-remote v6" },
    { x: 75, y: 15, label: "Vercel Edge Network — SSG with ISR fallback" },
    { x: 50, y: 70, label: "Tailwind JIT — no CSS runtime" },
  ]}
/>

<ExecutionGallery
  title="Incident INC-002 — Evidence"
  images={[
    {
      src: "/evidence/next-mdx-remote-v6-upgrade/01-vercel-build-failure.png",
      alt: "Vercel build log showing post-deploy investigation",
      caption: "Build succeeded but components rendered empty",
      step: 1,
      outcome: "failure",
      timestamp: "T+0m",
    },
    {
      src: "/evidence/next-mdx-remote-v6-upgrade/02-production-deployments-ready.png",
      alt: "Vercel dashboard: all deployments in Ready state after fix",
      caption: "Recovery build deployed",
      step: 2,
      outcome: "success",
      timestamp: "T+41m",
    },
  ]}
/>

<DebugReplay title="Tracing undefined props after v6 upgrade">
  <DebugStep phase="error" title="Components rendered empty after deployment">
    StepList, Checklist, and LessonObjectives showed wrapper shells but no
    content items. No build error, no TypeScript error, no console warnings.
  </DebugStep>
  <DebugStep phase="hypothesis" title="Prop serialization layer suspected">
    Array and object literal props — `items={['a', 'b']}` — might be stripped
    during MDX compilation before reaching the component.
  </DebugStep>
  <DebugStep phase="investigation" title="Logged compileMDX serialized output">
    Added temporary logging to `content-renderer.tsx`. Confirmed: `items` was
    `undefined` at render time. Props were gone from the serialized JSX, not
    from the source MDX.
  </DebugStep>
  <DebugStep phase="fix" title="Set blockJS: false in compileMDX options">
    One line in `content-renderer.tsx`. Documented the reason at the call site
    to prevent it being removed as dead code.
  </DebugStep>
  <DebugStep phase="verify" title="Build clean, all components rendering">
    152 pages, 0 TypeScript errors. Verified in production on Vercel.
  </DebugStep>
</DebugReplay>

<TimelineMarkers
  chapters={[
    { title: "Stack overview",   start: 0,    anchor: "stack-overview" },
    { title: "Cost model",       start: 0,    anchor: "cost-model" },
    { title: "Failure patterns", start: 0,    anchor: "failure-patterns" },
    { title: "Checkpoints",      start: 0,    anchor: "checkpoints" },
  ]}
/>

interface TranscriptEntry {
  time: number       // seconds from start
  speaker?: string   // "Claude" | "Dev" | "Terminal" | "System" (or any label)
  text: string       // the transcript text for this cue
}