Add embedded flash walkthrough video

src/app/App.test.jsx

@@ -7,4 +7,5 @@ import App from '.'
 test('renders without crashing', () => {
   render(<Suspense fallback="loading"><App /></Suspense>)
   expect(screen.getByText('flash.comma.ai')).toBeInTheDocument()
+  expect(screen.getByRole('button', { name: 'Watch walkthrough' })).toBeInTheDocument()
 })

src/app/Flash.jsx

@@ -343,7 +343,37 @@ function Stepper({ steps, currentStep, onStepClick }) {
 }
 
 // Landing page component
+function WalkthroughDialog({ onClose }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" role="dialog" aria-modal="true" aria-label="flash.comma.ai walkthrough">
+      <div className="relative w-full max-w-5xl overflow-hidden rounded-2xl bg-black shadow-2xl">
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute right-3 top-3 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-black/70 text-white transition-colors hover:bg-black"
+          aria-label="Close walkthrough"
+        >
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+        <video
+          className="aspect-video w-full bg-black"
+          controls
+          autoPlay
+          playsInline
+          poster="/flash-walkthrough-poster.webp"
+        >
+          <source src="/flash-walkthrough.webm" type="video/webm" />
+        </video>
+      </div>
+    </div>
+  )
+}
+
 function LandingPage({ onStart }) {
+  const [showWalkthrough, setShowWalkthrough] = useState(false)
+
   return (
     <div className="wizard-screen flex flex-col items-center justify-center h-full gap-8 p-8">
       <img src={comma} alt="comma" width={80} height={80} />
@@ -359,6 +389,14 @@ function LandingPage({ onStart }) {
       >
         Start
       </button>
+      <button
+        type="button"
+        onClick={() => setShowWalkthrough(true)}
+        className="px-8 py-3 text-lg font-semibold rounded-full bg-black hover:bg-gray-800 active:bg-gray-700 text-white transition-colors"
+      >
+        Watch walkthrough
+      </button>
+      {showWalkthrough && <WalkthroughDialog onClose={() => setShowWalkthrough(false)} />}
     </div>
   )
 }

src/utils/manifest.test.js

@@ -8,6 +8,11 @@ const CI = import.meta.env.CI
 const MANIFEST_BRANCH = import.meta.env.MANIFEST_BRANCH
 
 const imageManager = new ImageManager()
+const expectedImageCounts = {
+  release_mici: 32,
+  release_tizi: 32,
+  release_tici: 33,
+}
 
 beforeAll(async () => {
   globalThis.navigator = {
@@ -38,7 +43,7 @@ for (const [branch, manifestUrl] of Object.entries(config.manifests)) {
     const images = await getManifest(manifestUrl)
 
     // Check all images are present
-    expect(images.length).toBe(33)
+    expect(images.length).toBe(expectedImageCounts[branch])
 
     let countGpt = 0