fix(www): version preview assets

.agents/skills/cliparr-www-assets/SKILL.md

@@ -99,15 +99,19 @@ supported text track. Failure diagnostics include the available track keys.
 
 ## Outputs and verification
 
-| Scene  | Poster                                        | Videos                                                              |
-| ------ | --------------------------------------------- | ------------------------------------------------------------------- |
-| Hero   | `apps/www/src/assets/screenshot.webp`         | `apps/www/public/preview.mp4`, `preview.webm`                       |
-| Mobile | `apps/www/src/assets/mobile-pwa-preview.webp` | `apps/www/public/mobile-pwa-preview.mp4`, `mobile-pwa-preview.webm` |
+| Scene  | Poster                                        | Videos                                                                  |
+| ------ | --------------------------------------------- | ----------------------------------------------------------------------- |
+| Hero   | `apps/www/src/assets/screenshot.webp`         | `apps/www/src/assets/preview.mp4`, `preview.webm`                       |
+| Mobile | `apps/www/src/assets/mobile-pwa-preview.webp` | `apps/www/src/assets/mobile-pwa-preview.mp4`, `mobile-pwa-preview.webm` |
 
 The pipeline encodes silent H.264 MP4 and VP9 WebM at 30 fps, with fast-start MP4.
 It extracts each WebP poster from the delivered MP4's first frame. FFprobe and a
 full decode validate dimensions, codecs, absent audio, and recording duration.
 Playback telemetry verifies decoded frame advancement and rejects capture stalls.
+The homepage imports posters and videos from `apps/www/src/assets` so Astro gives
+every file a content-hashed deployment URL. Do not move preview videos back to
+stable `public` URLs; stale browser or CDN caches can otherwise pair a new poster
+with a video from an older capture.
 
 The existing 500 KB hero / 100 KB mobile video budgets are advisory. The report
 flags larger files; inspect quality before changing encoding settings. Do not

apps/www/src/pages/index.astro

@@ -3,7 +3,11 @@ import BaseLayout from "@/components/BaseLayout.astro";
 import CommandBlock from "@/components/CommandBlock.astro";
 import FeatureGrid from "@/components/FeatureGrid.astro";
 import { Picture } from "astro:assets";
+import mobilePreviewMp4 from "@/assets/mobile-pwa-preview.mp4?url";
+import mobilePreviewWebm from "@/assets/mobile-pwa-preview.webm?url";
 import mobilePreviewImage from "@/assets/mobile-pwa-preview.webp";
+import previewMp4 from "@/assets/preview.mp4?url";
+import previewWebm from "@/assets/preview.webm?url";
 import screenshotImage from "@/assets/screenshot.webp";
 import {
   dockerRunCommandVariants,
@@ -141,8 +145,8 @@ const faqStructuredData = {
               aria-hidden="true"
               data-editor-preview-video
             >
-              <source data-src="/preview.webm" type="video/webm" />
-              <source data-src="/preview.mp4" type="video/mp4" />
+              <source data-src={previewWebm} type="video/webm" />
+              <source data-src={previewMp4} type="video/mp4" />
             </video>
           </div>
         </div>
@@ -250,8 +254,8 @@ const faqStructuredData = {
                 aria-hidden="true"
                 data-editor-preview-video
               >
-                <source data-src="/mobile-pwa-preview.webm" type="video/webm" />
-                <source data-src="/mobile-pwa-preview.mp4" type="video/mp4" />
+                <source data-src={mobilePreviewWebm} type="video/webm" />
+                <source data-src={mobilePreviewMp4} type="video/mp4" />
               </video>
             </div>
           </div>

tools/www-assets/src/cli.ts

@@ -132,7 +132,7 @@ async function main() {
           const name = `${scene.videoName}.${extension}`;
           await copyFile(
             path.join(output, name),
-            path.join(root, "apps/www/public", name),
+            path.join(root, "apps/www/src/assets", name),
           );
         }
         const name = `${scene.posterName}.webp`;