Show on-device HTML UI mocks as firmware card previews.

Prefer media/preview.html over raster covers so catalog cards mirror each LVGL screen.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/firmware.ts

@@ -18,6 +18,8 @@ export const FLASH_PARTS = [
 
 /** Optional rich metadata: place meta.json next to the .bin files. */
 export type FirmwareMedia = {
+  /** HTML UI mock of the on-device screen (preferred card preview). */
+  preview: string | null;
   cover: string | null;
   animation: string | null;
   video: string | null;
@@ -54,6 +56,7 @@ type MetaJson = {
   board?: string;
   flash_size?: string;
   media?: {
+    preview?: string;
     cover?: string;
     animation?: string;
     video?: string;
@@ -165,6 +168,9 @@ function buildFirmwareInfo(
       Object.entries(versionMeta).filter(([k]) => !reserved.has(k))
     ),
     media: {
+      preview:
+        mediaUrl(project, variant, dir, json?.media?.preview) ||
+        mediaUrl(project, variant, dir, "media/preview.html"),
       cover: mediaUrl(project, variant, dir, json?.media?.cover),
       animation: mediaUrl(project, variant, dir, json?.media?.animation),
       video: mediaUrl(project, variant, dir, json?.media?.video),