From fcbf21b71523bf91a55502d0448266e4403ab32f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 19:43:44 +0100
Subject: [PATCH] feat(pagespeed): render page load filmstrip between hero and
 metrics

Horizontal scrollable filmstrip showing page rendering progression
with timing labels. Appears between the score hero and metrics card.
---
 app/sites/[id]/pagespeed/page.tsx | 20 ++++++++++++++++++++
 lib/api/pagespeed.ts              |  6 ++++++
 2 files changed, 26 insertions(+)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 843a396..33d5f3e 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -403,6 +403,26 @@ export default function PageSpeedPage() {
         </div>
       </div>
 
+      {/* Filmstrip — page load progression */}
+      {currentCheck?.filmstrip && currentCheck.filmstrip.length > 0 && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+          <div className="flex items-center overflow-x-auto gap-1">
+            {currentCheck.filmstrip.map((frame, idx) => (
+              <div key={idx} className="flex-shrink-0 text-center">
+                <img
+                  src={frame.data}
+                  alt={`${frame.timing}ms`}
+                  className="h-24 rounded border border-neutral-200 dark:border-neutral-700 object-contain bg-white"
+                />
+                <span className="text-[10px] text-neutral-400 mt-1 block">
+                  {frame.timing < 1000 ? `${frame.timing}ms` : `${(frame.timing / 1000).toFixed(1)}s`}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Section 2 — Metrics Card */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
         <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-5">
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index d3f4654..f3d811e 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -26,6 +26,11 @@ export interface AuditSummary {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AuditDetailItem = Record<string, any>
 
+export interface FilmstripFrame {
+  timing: number
+  data: string
+}
+
 export interface PageSpeedCheck {
   id: string
   site_id: string
@@ -42,6 +47,7 @@ export interface PageSpeedCheck {
   tti_ms: number | null
   audits: AuditSummary[] | null
   screenshot?: string | null
+  filmstrip?: FilmstripFrame[] | null
   triggered_by: 'scheduled' | 'manual'
   checked_at: string
 }