Fix missing Cloud preview thumbnails

components/DashboardShowcase.js

@@ -19,6 +19,7 @@ const SLIDES = [
     {
         key: 'dashboard',
         src: '/product-preview/dashboard-workflows.png',
+        thumbnailSrc: '/cloud-preview/thumbs/dashboard.webp',
         width: 2560,
         height: 1440,
         address: 'app.openadapt.ai/dashboard',
@@ -30,6 +31,7 @@ const SLIDES = [
     {
         key: 'run',
         src: '/cloud-preview/healthcare-run.jpg',
+        thumbnailSrc: '/cloud-preview/thumbs/run-detail.webp',
         width: 2560,
         height: 1440,
         address: 'app.openadapt.ai/runs',
@@ -41,6 +43,7 @@ const SLIDES = [
     {
         key: 'program',
         src: '/cloud-preview/program-graph.png',
+        thumbnailSrc: '/cloud-preview/thumbs/program-graph.webp',
         width: 2560,
         height: 1440,
         address: 'app.openadapt.ai/workflows/program',
@@ -52,6 +55,7 @@ const SLIDES = [
     {
         key: 'catalog',
         src: '/cloud-preview/workflow-catalog.png',
+        thumbnailSrc: '/cloud-preview/thumbs/workflow-catalog.webp',
         width: 2560,
         height: 1440,
         address: 'app.openadapt.ai/workflows',
@@ -284,27 +288,18 @@ export default function DashboardShowcase() {
                                 onClick={() => jumpTo(index)}
                             >
                                 <span className={styles.thumb}>
-                                    {index === active || index === nextIndex ? (
-                                        <img
-                                            className={styles.thumbImg}
-                                            src={slide.src}
-                                            width={slide.width}
-                                            height={slide.height}
-                                            alt=""
-                                            loading={
-                                                index === active ? 'eager' : 'lazy'
-                                            }
-                                            decoding="async"
-                                            aria-hidden="true"
-                                        />
-                                    ) : (
-                                        <span
-                                            className={styles.thumbPlaceholder}
-                                            aria-hidden="true"
-                                        >
-                                            {index + 1}
-                                        </span>
-                                    )}
+                                    <img
+                                        className={styles.thumbImg}
+                                        src={slide.thumbnailSrc}
+                                        width={640}
+                                        height={360}
+                                        alt=""
+                                        loading="lazy"
+                                        fetchPriority="low"
+                                        decoding="async"
+                                        aria-hidden="true"
+                                        data-testid="dashboard-thumbnail"
+                                    />
                                     {index === active && (
                                         <span
                                             key={`${active}-${cycle}-${paused}`}

components/DashboardShowcase.module.css

@@ -134,17 +134,6 @@
     margin: 18px 0 0;
 }
 
-.thumbPlaceholder {
-    display: grid;
-    width: 100%;
-    height: 100%;
-    place-items: center;
-    background: linear-gradient(135deg, var(--ground), var(--panel));
-    color: var(--ink-3);
-    font-family: var(--font-mono);
-    font-size: 12px;
-}
-
 .tab {
     display: flex;
     flex-direction: column;

cypress/e2e/dashboard-showcase.cy.js

@@ -19,6 +19,20 @@ describe('Cloud product showcase', () => {
                 .should('have.length', 1)
                 .and('have.attr', 'loading', 'lazy')
 
+            // The rail uses four small derivatives. It must never replace
+            // inactive previews with empty numbered placeholders merely to
+            // preserve the two-image full-resolution stage budget.
+            cy.get('[data-testid="dashboard-thumbnail"]')
+                .should('have.length', 4)
+                .each(($img) => {
+                    expect($img.attr('src')).to.match(
+                        /^\/cloud-preview\/thumbs\/.+\.webp$/
+                    )
+                    cy.wrap($img).should(($thumbnail) =>
+                        expect($thumbnail[0].naturalWidth).to.be.greaterThan(0)
+                    )
+                })
+
             // Every discovered tab must activate its matching, decoded slide.
             cy.get('[data-testid="dashboard-tab"]')
                 .should('have.length.at.least', 1)

tests/dashboardShowcase.test.js

@@ -11,6 +11,12 @@ const assets = [
     'cloud-preview/program-graph.png',
     'cloud-preview/workflow-catalog.png',
 ]
+const thumbnails = [
+    'cloud-preview/thumbs/dashboard.webp',
+    'cloud-preview/thumbs/run-detail.webp',
+    'cloud-preview/thumbs/program-graph.webp',
+    'cloud-preview/thumbs/workflow-catalog.webp',
+]
 
 test('Cloud showcase assets have exact local-mock provenance', () => {
     const provenance = JSON.parse(fs.readFileSync(path.join(root, 'public/cloud-preview/provenance.json')))
@@ -32,3 +38,14 @@ test('Cloud showcase assets have exact local-mock provenance', () => {
         assert.equal(metadata.height, 1440)
     }
 })
+
+test('Cloud showcase keeps all four preview thumbnails lightweight', () => {
+    let totalBytes = 0
+    for (const asset of thumbnails) {
+        const bytes = fs.readFileSync(path.join(root, 'public', asset))
+        totalBytes += bytes.length
+        assert.equal(bytes.subarray(0, 4).toString('ascii'), 'RIFF', asset)
+        assert.equal(bytes.subarray(8, 12).toString('ascii'), 'WEBP', asset)
+    }
+    assert.ok(totalBytes < 100_000, `${totalBytes} thumbnail bytes`)
+})