From df25ac5fcd3ff7d26c813b820cbf7fee48445c86 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 17:18:27 -0600
Subject: [PATCH 001/139] initial

---
 selfdrive/ui/tests/diff/diff.py            | 113 ++++++++++++++++++---
 selfdrive/ui/tests/diff/diff_template.html |   1 +
 2 files changed, 102 insertions(+), 12 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 974edb42a367ee..ba4a444075331c 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -49,18 +49,97 @@ def find_differences(video1, video2) -> tuple[list[int], tuple[int, int]]:
   return different_frames, (len(hashes1), len(hashes2))
 
 
-def generate_html_report(videos: tuple[str, str], basedir: str, different_frames: list[int], frame_counts: tuple[int, int], diff_video_name):
-  chunks = []
-  if different_frames:
-    current_chunk = [different_frames[0]]
-    for i in range(1, len(different_frames)):
-      if different_frames[i] == different_frames[i - 1] + 1:
-        current_chunk.append(different_frames[i])
-      else:
-        chunks.append(current_chunk)
-        current_chunk = [different_frames[i]]
-    chunks.append(current_chunk)
+def compute_chunks(different_frames: list[int]) -> list[list[int]]:
+  """Group consecutive frame indices into contiguous chunks."""
+  if not different_frames:
+    return []
+  chunks: list[list[int]] = []
+  current_chunk = [different_frames[0]]
+  for i in range(1, len(different_frames)):
+    if different_frames[i] == different_frames[i - 1] + 1:
+      current_chunk.append(different_frames[i])
+    else:
+      chunks.append(current_chunk)
+      current_chunk = [different_frames[i]]
+  chunks.append(current_chunk)
+  return chunks
+
+
+def get_video_fps(video_path: str) -> float:
+  """Return the frame-rate of a video file."""
+  cmd = ['ffprobe', '-v', 'error', '-select_streams', 'v:0',
+         '-show_entries', 'stream=r_frame_rate', '-of', 'csv=p=0', str(video_path)]
+  result = subprocess.run(cmd, capture_output=True, text=True, check=True)
+  num, den = result.stdout.strip().split('/')
+  return int(num) / int(den)
+
+
+CLIP_PADDING = 30  # extra frames of context to include before/after each chunk
 
+
+def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> None:
+  """Extract [start_frame, end_frame] (plus padding) from *video_path* into *output_path*."""
+  padded_start = max(0, start_frame - CLIP_PADDING)
+  total_frames = (end_frame - padded_start + 1) + CLIP_PADDING
+  start_time = padded_start / fps
+  duration = total_frames / fps
+  cmd = ['ffmpeg', '-i', str(video_path), '-ss', str(start_time), '-t', str(duration), '-y', str(output_path)]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
+def extract_chunk_clips(
+  video1: str,
+  video2: str,
+  diff_video: str,
+  chunks: list[list[int]],
+  fps: float,
+  output_dir: Path,
+) -> list[dict]:
+  """For each chunk extract a short clip from video1, video2 and the diff video."""
+  clip_sets: list[dict] = []
+  for i, chunk in enumerate(chunks):
+    start_frame, end_frame = chunk[0], chunk[-1]
+    clips: dict[str, str] = {}
+    for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
+      out_path = output_dir / f"chunk_{i:03d}_{name}.mp4"
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame}…")
+      extract_clip(src, start_frame, end_frame, str(out_path), fps)
+      clips[name] = out_path.name
+    clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame,
+                      'duration': end_frame - start_frame + 1, 'clips': clips})
+  return clip_sets
+
+
+def generate_chunks_html(clip_sets: list[dict], basedir: str) -> str:
+  if not clip_sets:
+    return ""
+  parts = ["<h2>Different Sections</h2>"]
+  for i, cs in enumerate(clip_sets):
+    parts.append(
+      f"<h3>Section {i + 1}: frames {cs['start_frame']}\u2013{cs['end_frame']} "
+      f"({cs['duration']} frame{'s' if cs['duration'] != 1 else ''})</h3>"
+    )
+    parts.append("<table><tbody><tr>")
+    for label, key in [('Video 1', 'video1'), ('Video 2', 'video2'), ('Pixel Diff', 'diff')]:
+      src = os.path.join(basedir, cs['clips'][key])
+      parts.append(
+        f"<td width='33%'><p><strong>{label}</strong></p>"
+        f"<video width='100%' autoplay loop muted>"
+        f"<source src='{src}' type='video/mp4'>"
+        f"Your browser does not support the video tag.</video></td>"
+      )
+    parts.append("</tr></tbody></table>")
+  return "\n".join(parts)
+
+
+def generate_html_report(
+  videos: tuple[str, str],
+  basedir: str,
+  different_frames: list[int],
+  frame_counts: tuple[int, int],
+  diff_video_name: str,
+  clip_sets: list[dict] | None = None,
+) -> str:
   total_frames = max(frame_counts)
   frame_delta = frame_counts[1] - frame_counts[0]
   different_total = len(different_frames) + abs(frame_delta)
@@ -72,6 +151,8 @@ def generate_html_report(videos: tuple[str, str], basedir: str, different_frames
     + (f" Video {'2' if frame_delta > 0 else '1'} is longer by {abs(frame_delta)} frames." if frame_delta != 0 else "")
   )
 
+  chunks_html = generate_chunks_html(clip_sets or [], basedir)
+
   # Load HTML template and replace placeholders
   html = HTML_TEMPLATE_PATH.read_text()
   placeholders = {
@@ -79,6 +160,7 @@ def generate_html_report(videos: tuple[str, str], basedir: str, different_frames
     "VIDEO2_SRC": os.path.join(basedir, os.path.basename(videos[1])),
     "DIFF_SRC": os.path.join(basedir, diff_video_name),
     "RESULT_TEXT": result_text,
+    "CHUNKS_HTML": chunks_html,
   }
   for key, value in placeholders.items():
     html = html.replace(f"${key}", value)
@@ -119,9 +201,16 @@ def main():
   if different_frames is None:
     sys.exit(1)
 
+  chunks = compute_chunks(different_frames)
+  clip_sets: list[dict] = []
+  if chunks:
+    print(f"\nExtracting {len(chunks)} different section(s)...")
+    fps = get_video_fps(args.video1)
+    clip_sets = extract_chunk_clips(args.video1, args.video2, diff_video_path, chunks, fps, DIFF_OUT_DIR)
+
   print()
   print("Generating HTML report...")
-  html = generate_html_report((args.video1, args.video2), args.basedir, different_frames, frame_counts, diff_video_name)
+  html = generate_html_report((args.video1, args.video2), args.basedir, different_frames, frame_counts, diff_video_name, clip_sets)
 
   with open(DIFF_OUT_DIR / args.output, 'w') as f:
     f.write(html)
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3f1de1051205fe..1dbf5f4005cd04 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -27,6 +27,7 @@ <h2>UI Diff</h2>
   <table id='videoTable'></table>
   <hr>
   <p><strong>Results:</strong> $RESULT_TEXT</p>
+  $CHUNKS_HTML
   <script>
     const videoDefs = [
       { id: 'video1', title: 'Video 1', src: '$VIDEO1_SRC', sync: true },

From 760b33730e435d593e1179e3fb01780f087776e1 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 17:38:55 -0600
Subject: [PATCH 002/139] put chunks in subfolder

---
 selfdrive/ui/tests/diff/diff.py | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index ba4a444075331c..d08030c687a23a 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -100,11 +100,16 @@ def extract_chunk_clips(
   for i, chunk in enumerate(chunks):
     start_frame, end_frame = chunk[0], chunk[-1]
     clips: dict[str, str] = {}
+    # Use a top-level folder based on the diff video name, e.g. '<diff-stem>-chunks/000'
+    folder_name = f"{Path(diff_video).stem}-chunks"
+    chunk_dir = output_dir / folder_name / f"{i:03d}"
+    os.makedirs(chunk_dir, exist_ok=True)
     for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
-      out_path = output_dir / f"chunk_{i:03d}_{name}.mp4"
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame}…")
+      out_path = chunk_dir / f"{name}.mp4"
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into {folder_name}/{chunk_dir.name}…")
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
-      clips[name] = out_path.name
+      # Store relative path under the report base dir: <diff-stem>-chunks/<num>/<file>
+      clips[name] = os.path.join(folder_name, chunk_dir.name, out_path.name)
     clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame,
                       'duration': end_frame - start_frame + 1, 'clips': clips})
   return clip_sets

From 479b20a3c10e72f387bcf7198af9036532875102 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 17:44:10 -0600
Subject: [PATCH 003/139] enhance compute_chunks to allow configurable
 tolerance for identical frames

---
 selfdrive/ui/tests/diff/diff.py | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index d08030c687a23a..fd19e9caeb9c53 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -49,18 +49,32 @@ def find_differences(video1, video2) -> tuple[list[int], tuple[int, int]]:
   return different_frames, (len(hashes1), len(hashes2))
 
 
-def compute_chunks(different_frames: list[int]) -> list[list[int]]:
-  """Group consecutive frame indices into contiguous chunks."""
+def compute_chunks(different_frames: list[int], max_same_frames: int = 0) -> list[list[int]]:
+  """Group differing frame indices into contiguous chunks.
+
+  By default (max_same_frames=0) any gap of >=1 same frames breaks a chunk
+  (existing behavior). If `max_same_frames` > 0, then gaps of up to that
+  many identical frames between differing frames will be merged into the
+  same chunk.
+  """
   if not different_frames:
     return []
+  if max_same_frames < 0:
+    max_same_frames = 0
+
   chunks: list[list[int]] = []
   current_chunk = [different_frames[0]]
   for i in range(1, len(different_frames)):
-    if different_frames[i] == different_frames[i - 1] + 1:
-      current_chunk.append(different_frames[i])
+    prev = different_frames[i - 1]
+    cur = different_frames[i]
+    gap = cur - prev - 1
+    # If the number of identical frames between prev and cur is <= tolerance,
+    # treat them as contiguous and keep in the same chunk.
+    if gap <= max_same_frames:
+      current_chunk.append(cur)
     else:
       chunks.append(current_chunk)
-      current_chunk = [different_frames[i]]
+      current_chunk = [cur]
   chunks.append(current_chunk)
   return chunks
 
@@ -75,6 +89,7 @@ def get_video_fps(video_path: str) -> float:
 
 
 CLIP_PADDING = 30  # extra frames of context to include before/after each chunk
+MAX_SAME_FRAMES = 0  # allow up to this many identical frames between diffs in a single chunk
 
 
 def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> None:
@@ -206,7 +221,7 @@ def main():
   if different_frames is None:
     sys.exit(1)
 
-  chunks = compute_chunks(different_frames)
+  chunks = compute_chunks(different_frames, MAX_SAME_FRAMES)
   clip_sets: list[dict] = []
   if chunks:
     print(f"\nExtracting {len(chunks)} different section(s)...")

From ed8e853bc01427e129eff01aef10c67189e55fcd Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 19:22:51 -0600
Subject: [PATCH 004/139] cleanup

---
 selfdrive/ui/tests/diff/diff.py            |  31 ++-----
 selfdrive/ui/tests/diff/diff_template.html | 101 ++++++++++-----------
 2 files changed, 55 insertions(+), 77 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index fd19e9caeb9c53..5aab63a171fedc 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -1,4 +1,5 @@
 #!/usr/bin/env python3
+import json
 import os
 import sys
 import subprocess
@@ -130,28 +131,6 @@ def extract_chunk_clips(
   return clip_sets
 
 
-def generate_chunks_html(clip_sets: list[dict], basedir: str) -> str:
-  if not clip_sets:
-    return ""
-  parts = ["<h2>Different Sections</h2>"]
-  for i, cs in enumerate(clip_sets):
-    parts.append(
-      f"<h3>Section {i + 1}: frames {cs['start_frame']}\u2013{cs['end_frame']} "
-      f"({cs['duration']} frame{'s' if cs['duration'] != 1 else ''})</h3>"
-    )
-    parts.append("<table><tbody><tr>")
-    for label, key in [('Video 1', 'video1'), ('Video 2', 'video2'), ('Pixel Diff', 'diff')]:
-      src = os.path.join(basedir, cs['clips'][key])
-      parts.append(
-        f"<td width='33%'><p><strong>{label}</strong></p>"
-        f"<video width='100%' autoplay loop muted>"
-        f"<source src='{src}' type='video/mp4'>"
-        f"Your browser does not support the video tag.</video></td>"
-      )
-    parts.append("</tr></tbody></table>")
-  return "\n".join(parts)
-
-
 def generate_html_report(
   videos: tuple[str, str],
   basedir: str,
@@ -171,7 +150,11 @@ def generate_html_report(
     + (f" Video {'2' if frame_delta > 0 else '1'} is longer by {abs(frame_delta)} frames." if frame_delta != 0 else "")
   )
 
-  chunks_html = generate_chunks_html(clip_sets or [], basedir)
+  # Pre-join basedir into clip paths so the template needs no path logic
+  processed_sets = [
+    {**cs, 'clips': {k: os.path.join(basedir, v) if basedir else v for k, v in cs['clips'].items()}}
+    for cs in (clip_sets or [])
+  ]
 
   # Load HTML template and replace placeholders
   html = HTML_TEMPLATE_PATH.read_text()
@@ -180,7 +163,7 @@ def generate_html_report(
     "VIDEO2_SRC": os.path.join(basedir, os.path.basename(videos[1])),
     "DIFF_SRC": os.path.join(basedir, diff_video_name),
     "RESULT_TEXT": result_text,
-    "CHUNKS_HTML": chunks_html,
+    "CHUNKS_JSON": json.dumps(processed_sets),
   }
   for key, value in placeholders.items():
     html = html.replace(f"${key}", value)
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 1dbf5f4005cd04..3e9483a1accedc 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -5,77 +5,72 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>UI Diff Report</title>
   <style>
-    h1, h2, h3, h4 {
-      margin: 0.5em 0 0.25em;
-    }
-    #videoTable {
-      width: 100%;
-    }
+    h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
+    table.videos { width: 100%; }
     @media (max-width: 800px) {
-      #videoTable tr {
-        display: flex;
-        flex-direction: column;
-      }
-      #videoTable td {
-        width: 100% !important;
-      }
+      table.videos tr { display: flex; flex-direction: column; }
+      table.videos td { width: 100% !important; }
     }
   </style>
 </head>
 <body>
   <h2>UI Diff</h2>
-  <table id='videoTable'></table>
+  <div id='main'></div>
   <hr>
   <p><strong>Results:</strong> $RESULT_TEXT</p>
-  $CHUNKS_HTML
+  <div id='chunks'></div>
   <script>
-    const videoDefs = [
-      { id: 'video1', title: 'Video 1', src: '$VIDEO1_SRC', sync: true },
-      { id: 'video2', title: 'Video 2', src: '$VIDEO2_SRC', sync: true },
-      { id: 'diffVideo', title: 'Pixel Diff', src: '$DIFF_SRC', sync: false },
-    ];
+    const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];
 
-    const row = document.getElementById('videoTable').insertRow();
-    videoDefs.forEach(({ id, title, src, sync }) => {
-      const td = row.insertCell();
-      td.width = '33%';
-      td.innerHTML = `<h4>${title}</h4>
-        <video id='${id}' width='100%' autoplay muted ${sync ? "onplay='syncVideos()'" : ''}>
-          <source src='${src}' type='video/mp4'>
-          Your browser does not support the video tag.
-        </video>`;
-    });
+    // Shared helper: renders a 3-column video row; attrs[] passes extra attributes per video.
+    function videoRow(srcs, attrs = []) {
+      const cells = srcs.map((src, i) => `
+        <td width='33%'><h4>${LABELS[i]}</h4>
+          <video width='100%' autoplay muted playsinline ${attrs[i] ?? ''}>
+            <source src='${src}' type='video/mp4'>
+          </video></td>`).join('');
+      return `<table class='videos'><tbody><tr>${cells}</tr></tbody></table>`;
+    }
 
-    const videos = videoDefs.map(({ id }) => document.getElementById(id));
+    // --- Main full-video section with sync ---
+    const IDS = ['v1', 'v2', 'vd'];
+    document.getElementById('main').innerHTML = videoRow(
+      ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'],
+      [`id='v1' onplay='sync()'`, `id='v2' onplay='sync()'`, `id='vd'`],
+    );
+    const videos = IDS.map(id => document.getElementById(id));
 
-    const isEnded = (v) => v.ended || (Number.isFinite(v.duration) && v.currentTime >= (v.duration - 0.05));
-    const playAll = () => videos.forEach((v) => v.play());
+    const isEnded = v => v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
+    const playAll = () => videos.forEach(v => v.play());
 
-    function syncVideos() {
-      const t = Math.min(...videos.map((v) => v.currentTime));
-      videos.forEach((v) => { v.currentTime = t; });
+    function sync() {
+      const t = Math.min(...videos.map(v => v.currentTime));
+      videos.forEach(v => { v.currentTime = t; });
       playAll();
     }
 
-    function handleEnded(endedVideo) {
-      endedVideo.pause();
-      if (videos.every(isEnded)) {
-        videos.forEach((v) => { v.currentTime = 0; });
-        playAll();
-      }
-    }
-
-    videos.forEach((v) => {
-      v.addEventListener('timeupdate', () => {
-        videos.forEach((other) => {
-          if (other !== v && !isEnded(other) && Math.abs(v.currentTime - other.currentTime) > 0.1) {
-            other.currentTime = v.currentTime;
-            if (other.paused) other.play();
-          }
-        });
+    videos.forEach(v => {
+      v.addEventListener('timeupdate', () => videos.forEach(o => {
+        if (o !== v && !isEnded(o) && Math.abs(v.currentTime - o.currentTime) > 0.1) {
+          o.currentTime = v.currentTime;
+          if (o.paused) o.play();
+        }
+      }));
+      v.addEventListener('ended', () => {
+        v.pause();
+        if (videos.every(isEnded)) { videos.forEach(v => v.currentTime = 0); playAll(); }
       });
-      v.addEventListener('ended', () => handleEnded(v));
     });
+
+    // --- Chunk sections ---
+    const chunks = $CHUNKS_JSON;
+    if (chunks.length) {
+      document.getElementById('chunks').innerHTML = '<hr><h2>Different Sections</h2>'
+        + chunks.map(({ start_frame, end_frame, duration, clips }, i) => `
+          <h3>Section ${i + 1}: frames ${start_frame}\u2013${end_frame} (${duration} frame${duration !== 1 ? 's' : ''})</h3>
+          ${videoRow([clips.video1, clips.video2, clips.diff], ['loop', 'loop', 'loop'])}`
+        ).join('');
+    }
   </script>
 </body>
 </html>

From 51573130340e96e489dd71f67f7877b31c31744f Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 19:35:33 -0600
Subject: [PATCH 005/139] enhance UI diff template with accordion sections for
 chunk display and lazy loading of videos

---
 selfdrive/ui/tests/diff/diff_template.html | 85 ++++++++++++++++------
 1 file changed, 62 insertions(+), 23 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3e9483a1accedc..27611fcc944cb6 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -7,6 +7,12 @@
   <style>
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     table.videos { width: 100%; }
+    details { border: 1px solid #ccc; border-radius: 4px; margin: 0.4em 0; }
+    details > summary { cursor: pointer; padding: 0.5em 0.75em; font-weight: bold; list-style: none; user-select: none; }
+    details > summary:hover { background: #f5f5f5; }
+    details > summary::before { content: '▶ '; font-size: 0.75em; }
+    details[open] > summary::before { content: '▼ '; }
+    details > .content { padding: 0 0.5em 0.5em; }
     @media (max-width: 800px) {
       table.videos tr { display: flex; flex-direction: column; }
       table.videos td { width: 100% !important; }
@@ -22,35 +28,42 @@ <h2>UI Diff</h2>
   <script>
     const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];
 
-    // Shared helper: renders a 3-column video row; attrs[] passes extra attributes per video.
-    function videoRow(srcs, attrs = []) {
+    // Renders a 3-column video row. Pass lazy=true to use data-src (deferred loading).
+    function videoRow(srcs, { attrs = [], lazy = false } = {}) {
       const cells = srcs.map((src, i) => `
         <td width='33%'><h4>${LABELS[i]}</h4>
-          <video width='100%' autoplay muted playsinline ${attrs[i] ?? ''}>
-            <source src='${src}' type='video/mp4'>
+          <video width='100%' muted playsinline preload='${lazy ? 'none' : 'auto'}' ${attrs[i] ?? ''}>
+            <source ${lazy ? `data-src='${src}'` : `src='${src}'`} type='video/mp4'>
           </video></td>`).join('');
       return `<table class='videos'><tbody><tr>${cells}</tr></tbody></table>`;
     }
 
-    // --- Main full-video section with sync ---
-    const IDS = ['v1', 'v2', 'vd'];
-    document.getElementById('main').innerHTML = videoRow(
+    // Copy data-src → src and call load() so the browser starts fetching.
+    function loadVideos(el) {
+      el.querySelectorAll('source[data-src]').forEach(s => {
+        s.src = s.dataset.src;
+        delete s.dataset.src;
+        s.parentElement.load();
+      });
+    }
+
+    // --- Main full-video section (always visible, synced) ---
+    const mainEl = document.getElementById('main');
+    mainEl.innerHTML = videoRow(
       ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'],
-      [`id='v1' onplay='sync()'`, `id='v2' onplay='sync()'`, `id='vd'`],
+      { attrs: [`id='v1' autoplay onplay='syncMain()'`, `id='v2' autoplay onplay='syncMain()'`, `id='vd' autoplay loop`] },
     );
-    const videos = IDS.map(id => document.getElementById(id));
+    const mainVids = ['v1', 'v2', 'vd'].map(id => document.getElementById(id));
 
     const isEnded = v => v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
-    const playAll = () => videos.forEach(v => v.play());
 
-    function sync() {
-      const t = Math.min(...videos.map(v => v.currentTime));
-      videos.forEach(v => { v.currentTime = t; });
-      playAll();
+    function syncMain() {
+      const t = Math.min(...mainVids.map(v => v.currentTime));
+      mainVids.forEach(v => { v.currentTime = t; v.play(); });
     }
 
-    videos.forEach(v => {
-      v.addEventListener('timeupdate', () => videos.forEach(o => {
+    mainVids.forEach(v => {
+      v.addEventListener('timeupdate', () => mainVids.forEach(o => {
         if (o !== v && !isEnded(o) && Math.abs(v.currentTime - o.currentTime) > 0.1) {
           o.currentTime = v.currentTime;
           if (o.paused) o.play();
@@ -58,18 +71,44 @@ <h2>UI Diff</h2>
       }));
       v.addEventListener('ended', () => {
         v.pause();
-        if (videos.every(isEnded)) { videos.forEach(v => v.currentTime = 0); playAll(); }
+        if (mainVids.every(isEnded)) { mainVids.forEach(v => { v.currentTime = 0; v.play(); }); }
       });
     });
 
-    // --- Chunk sections ---
+    // --- Chunk sections as an accordion ---
     const chunks = $CHUNKS_JSON;
     if (chunks.length) {
-      document.getElementById('chunks').innerHTML = '<hr><h2>Different Sections</h2>'
-        + chunks.map(({ start_frame, end_frame, duration, clips }, i) => `
-          <h3>Section ${i + 1}: frames ${start_frame}\u2013${end_frame} (${duration} frame${duration !== 1 ? 's' : ''})</h3>
-          ${videoRow([clips.video1, clips.video2, clips.diff], ['loop', 'loop', 'loop'])}`
-        ).join('');
+      const container = document.getElementById('chunks');
+      container.innerHTML = '<hr><h2>Different Sections</h2>';
+
+      const detailEls = chunks.map(({ start_frame, end_frame, duration, clips }, i) => {
+        const d = document.createElement('details');
+        d.innerHTML = `
+          <summary>Section ${i + 1}: frames ${start_frame}\u2013${end_frame} (${duration} frame${duration !== 1 ? 's' : ''})</summary>
+          <div class='content'>${videoRow([clips.video1, clips.video2, clips.diff], { lazy: true, attrs: ['loop', 'loop', 'loop'] })}</div>`;
+        container.appendChild(d);
+        return d;
+      });
+
+      // Background preload queue — staggered so open sections stay prioritised.
+      let bgQueue = [...detailEls];
+      function bgPreload() {
+        const next = bgQueue.shift();
+        if (!next) return;
+        if (!next.open) loadVideos(next);   // skip if already loaded by user opening it
+        setTimeout(bgPreload, 800);
+      }
+      setTimeout(bgPreload, 1500);
+
+      detailEls.forEach(d => d.addEventListener('toggle', () => {
+        if (d.open) {
+          // Load (if not yet loaded) and play.
+          loadVideos(d);
+          d.querySelectorAll('video').forEach(v => { v.preload = 'auto'; v.play(); });
+        } else {
+          d.querySelectorAll('video').forEach(v => v.pause());
+        }
+      }));
     }
   </script>
 </body>

From 0d987f9d457c93d73065ec35aa71cf6991ccc320 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 19:39:06 -0600
Subject: [PATCH 006/139] h3

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 27611fcc944cb6..7bbab0cc92c8ea 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -79,7 +79,7 @@ <h2>UI Diff</h2>
     const chunks = $CHUNKS_JSON;
     if (chunks.length) {
       const container = document.getElementById('chunks');
-      container.innerHTML = '<hr><h2>Different Sections</h2>';
+      container.innerHTML = '<hr><h3>Different Sections</h3>';
 
       const detailEls = chunks.map(({ start_frame, end_frame, duration, clips }, i) => {
         const d = document.createElement('details');

From 64313d80e698a8a26db501e21edd4b19ee9ee1eb Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 19:46:22 -0600
Subject: [PATCH 007/139] refactor UI diff template to streamline video
 playback and navigation

---
 selfdrive/ui/tests/diff/diff_template.html | 127 +++++++++------------
 1 file changed, 52 insertions(+), 75 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 7bbab0cc92c8ea..8e47065f5b895c 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -5,14 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>UI Diff Report</title>
   <style>
-    h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
+    body { font-family: sans-serif; margin: 1em; }
+    h2, h4 { margin: 0.5em 0 0.25em; }
+    #nav { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.75em 0; }
+    #nav button { padding: 0.35em 0.75em; border: 1px solid #aaa; border-radius: 4px; cursor: pointer; background: #f5f5f5; }
+    #nav button.active { background: #0078d4; color: #fff; border-color: #0078d4; }
     table.videos { width: 100%; }
-    details { border: 1px solid #ccc; border-radius: 4px; margin: 0.4em 0; }
-    details > summary { cursor: pointer; padding: 0.5em 0.75em; font-weight: bold; list-style: none; user-select: none; }
-    details > summary:hover { background: #f5f5f5; }
-    details > summary::before { content: '▶ '; font-size: 0.75em; }
-    details[open] > summary::before { content: '▼ '; }
-    details > .content { padding: 0 0.5em 0.5em; }
     @media (max-width: 800px) {
       table.videos tr { display: flex; flex-direction: column; }
       table.videos td { width: 100% !important; }
@@ -21,49 +19,33 @@
 </head>
 <body>
   <h2>UI Diff</h2>
-  <div id='main'></div>
-  <hr>
   <p><strong>Results:</strong> $RESULT_TEXT</p>
-  <div id='chunks'></div>
+  <div id='player'></div>
+  <div id='nav'></div>
   <script>
     const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];
+    const chunks = $CHUNKS_JSON;
 
-    // Renders a 3-column video row. Pass lazy=true to use data-src (deferred loading).
-    function videoRow(srcs, { attrs = [], lazy = false } = {}) {
-      const cells = srcs.map((src, i) => `
-        <td width='33%'><h4>${LABELS[i]}</h4>
-          <video width='100%' muted playsinline preload='${lazy ? 'none' : 'auto'}' ${attrs[i] ?? ''}>
-            <source ${lazy ? `data-src='${src}'` : `src='${src}'`} type='video/mp4'>
-          </video></td>`).join('');
-      return `<table class='videos'><tbody><tr>${cells}</tr></tbody></table>`;
-    }
+    const scenes = [
+      { label: 'Full Video', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
+      ...chunks.map(({ start_frame, end_frame, duration, clips }, i) => ({
+        label: `Section ${i + 1}: frames ${start_frame}\u2013${end_frame} (${duration}f)`,
+        srcs: [clips.video1, clips.video2, clips.diff],
+        loop: true,
+      })),
+    ];
 
-    // Copy data-src → src and call load() so the browser starts fetching.
-    function loadVideos(el) {
-      el.querySelectorAll('source[data-src]').forEach(s => {
-        s.src = s.dataset.src;
-        delete s.dataset.src;
-        s.parentElement.load();
-      });
-    }
-
-    // --- Main full-video section (always visible, synced) ---
-    const mainEl = document.getElementById('main');
-    mainEl.innerHTML = videoRow(
-      ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'],
-      { attrs: [`id='v1' autoplay onplay='syncMain()'`, `id='v2' autoplay onplay='syncMain()'`, `id='vd' autoplay loop`] },
-    );
-    const mainVids = ['v1', 'v2', 'vd'].map(id => document.getElementById(id));
+    // Static 3-video player — sources are swapped on scene change.
+    document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
+      ${LABELS.map((lbl, i) => `<td width='33%'><h4>${lbl}</h4>
+        <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video></td>`).join('')}
+    </tr></tbody></table>`;
+    const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));
 
+    // Sync: keep all three videos at the same playhead.
     const isEnded = v => v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
-
-    function syncMain() {
-      const t = Math.min(...mainVids.map(v => v.currentTime));
-      mainVids.forEach(v => { v.currentTime = t; v.play(); });
-    }
-
-    mainVids.forEach(v => {
-      v.addEventListener('timeupdate', () => mainVids.forEach(o => {
+    vids.forEach(v => {
+      v.addEventListener('timeupdate', () => vids.forEach(o => {
         if (o !== v && !isEnded(o) && Math.abs(v.currentTime - o.currentTime) > 0.1) {
           o.currentTime = v.currentTime;
           if (o.paused) o.play();
@@ -71,45 +53,40 @@ <h2>UI Diff</h2>
       }));
       v.addEventListener('ended', () => {
         v.pause();
-        if (mainVids.every(isEnded)) { mainVids.forEach(v => { v.currentTime = 0; v.play(); }); }
+        if (vids.every(isEnded)) { vids.forEach(v => { v.currentTime = 0; v.play(); }); }
       });
     });
 
-    // --- Chunk sections as an accordion ---
-    const chunks = $CHUNKS_JSON;
-    if (chunks.length) {
-      const container = document.getElementById('chunks');
-      container.innerHTML = '<hr><h3>Different Sections</h3>';
+    // Switch to a scene: swap sources, reload, play.
+    function switchTo(i) {
+      vids.forEach(v => v.pause());
+      const { srcs, loop } = scenes[i];
+      vids.forEach((v, j) => { v.loop = loop; v.querySelector('source').src = srcs[j]; v.load(); v.play().catch(() => {}); });
+      document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === i));
+    }
 
-      const detailEls = chunks.map(({ start_frame, end_frame, duration, clips }, i) => {
-        const d = document.createElement('details');
-        d.innerHTML = `
-          <summary>Section ${i + 1}: frames ${start_frame}\u2013${end_frame} (${duration} frame${duration !== 1 ? 's' : ''})</summary>
-          <div class='content'>${videoRow([clips.video1, clips.video2, clips.diff], { lazy: true, attrs: ['loop', 'loop', 'loop'] })}</div>`;
-        container.appendChild(d);
-        return d;
-      });
+    // Build nav buttons.
+    const navEl = document.getElementById('nav');
+    scenes.forEach((s, i) => {
+      const b = document.createElement('button');
+      b.textContent = s.label;
+      b.onclick = () => switchTo(i);
+      navEl.appendChild(b);
+    });
 
-      // Background preload queue — staggered so open sections stay prioritised.
-      let bgQueue = [...detailEls];
-      function bgPreload() {
-        const next = bgQueue.shift();
-        if (!next) return;
-        if (!next.open) loadVideos(next);   // skip if already loaded by user opening it
-        setTimeout(bgPreload, 800);
-      }
-      setTimeout(bgPreload, 1500);
+    switchTo(0);
 
-      detailEls.forEach(d => d.addEventListener('toggle', () => {
-        if (d.open) {
-          // Load (if not yet loaded) and play.
-          loadVideos(d);
-          d.querySelectorAll('video').forEach(v => { v.preload = 'auto'; v.play(); });
-        } else {
-          d.querySelectorAll('video').forEach(v => v.pause());
-        }
-      }));
+    // Background preload remaining scenes via <link rel="preload"> hints.
+    const bgQueue = scenes.map((_, i) => i).slice(1);
+    function bgPreload() {
+      const i = bgQueue.shift();
+      if (i === undefined) return;
+      scenes[i].srcs.forEach(src => document.head.appendChild(
+        Object.assign(document.createElement('link'), { rel: 'preload', as: 'video', href: src }),
+      ));
+      setTimeout(bgPreload, 1000);
     }
+    setTimeout(bgPreload, 2000);
   </script>
 </body>
 </html>

From c6bbd99d759a3329551c3963debd214eb988ea9a Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 19:48:02 -0600
Subject: [PATCH 008/139] chunk id in name

---
 selfdrive/ui/tests/diff/diff.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 5aab63a171fedc..3ee7a8ac4a1f06 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -121,8 +121,8 @@ def extract_chunk_clips(
     chunk_dir = output_dir / folder_name / f"{i:03d}"
     os.makedirs(chunk_dir, exist_ok=True)
     for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
-      out_path = chunk_dir / f"{name}.mp4"
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into {folder_name}/{chunk_dir.name}…")
+      out_path = chunk_dir / f"{i:03d}_{name}.mp4"
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into {folder_name}/{chunk_dir.name}/{out_path.name}…")
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
       # Store relative path under the report base dir: <diff-stem>-chunks/<num>/<file>
       clips[name] = os.path.join(folder_name, chunk_dir.name, out_path.name)

From 293a59e76de0e99daca6bdb5a96b8fb939aa9b20 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 19:53:23 -0600
Subject: [PATCH 009/139] single folder

---
 selfdrive/ui/tests/diff/diff.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 3ee7a8ac4a1f06..1dd2a1a581fd81 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -116,16 +116,16 @@ def extract_chunk_clips(
   for i, chunk in enumerate(chunks):
     start_frame, end_frame = chunk[0], chunk[-1]
     clips: dict[str, str] = {}
-    # Use a top-level folder based on the diff video name, e.g. '<diff-stem>-chunks/000'
+    # Use a single top-level folder based on the diff video name, e.g. '<diff-stem>-chunks'
     folder_name = f"{Path(diff_video).stem}-chunks"
-    chunk_dir = output_dir / folder_name / f"{i:03d}"
+    chunk_dir = output_dir / folder_name
     os.makedirs(chunk_dir, exist_ok=True)
     for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
       out_path = chunk_dir / f"{i:03d}_{name}.mp4"
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into {folder_name}/{chunk_dir.name}/{out_path.name}…")
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into {folder_name}/{out_path.name}…")
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
-      # Store relative path under the report base dir: <diff-stem>-chunks/<num>/<file>
-      clips[name] = os.path.join(folder_name, chunk_dir.name, out_path.name)
+      # Store relative path under the report base dir: <diff-stem>-chunks/<file>
+      clips[name] = os.path.join(folder_name, out_path.name)
     clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame,
                       'duration': end_frame - start_frame + 1, 'clips': clips})
   return clip_sets

From 9c0b8b71557cb5968ca55fdfc007e00cd553a679 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:01:07 -0600
Subject: [PATCH 010/139] custom padding before/after

---
 selfdrive/ui/tests/diff/diff.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 1dd2a1a581fd81..b853e6e8910869 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -89,14 +89,15 @@ def get_video_fps(video_path: str) -> float:
   return int(num) / int(den)
 
 
-CLIP_PADDING = 30  # extra frames of context to include before/after each chunk
+CLIP_PADDING_BEFORE = 30  # extra frames of context to include before each chunk
+CLIP_PADDING_AFTER = 30   # extra frames of context to include after each chunk
 MAX_SAME_FRAMES = 0  # allow up to this many identical frames between diffs in a single chunk
 
 
 def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> None:
-  """Extract [start_frame, end_frame] (plus padding) from *video_path* into *output_path*."""
-  padded_start = max(0, start_frame - CLIP_PADDING)
-  total_frames = (end_frame - padded_start + 1) + CLIP_PADDING
+  """Extract [start_frame, end_frame] plus padding before/after into *output_path*."""
+  padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
+  total_frames = (end_frame - start_frame + 1) + CLIP_PADDING_BEFORE + CLIP_PADDING_AFTER
   start_time = padded_start / fps
   duration = total_frames / fps
   cmd = ['ffmpeg', '-i', str(video_path), '-ss', str(start_time), '-t', str(duration), '-y', str(output_path)]

From 33ba597079da3f1bdc92083fa8c10aa13a1c88ee Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:02:23 -0600
Subject: [PATCH 011/139] refactor compute_chunks to remove max_same_frames
 parameter and adjust clip padding

---
 selfdrive/ui/tests/diff/diff.py | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index b853e6e8910869..4e4dddca7d585a 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -50,19 +50,10 @@ def find_differences(video1, video2) -> tuple[list[int], tuple[int, int]]:
   return different_frames, (len(hashes1), len(hashes2))
 
 
-def compute_chunks(different_frames: list[int], max_same_frames: int = 0) -> list[list[int]]:
-  """Group differing frame indices into contiguous chunks.
-
-  By default (max_same_frames=0) any gap of >=1 same frames breaks a chunk
-  (existing behavior). If `max_same_frames` > 0, then gaps of up to that
-  many identical frames between differing frames will be merged into the
-  same chunk.
-  """
+def compute_chunks(different_frames: list[int]) -> list[list[int]]:
+  """Group differing frame indices into contiguous chunks."""
   if not different_frames:
     return []
-  if max_same_frames < 0:
-    max_same_frames = 0
-
   chunks: list[list[int]] = []
   current_chunk = [different_frames[0]]
   for i in range(1, len(different_frames)):
@@ -71,7 +62,7 @@ def compute_chunks(different_frames: list[int], max_same_frames: int = 0) -> lis
     gap = cur - prev - 1
     # If the number of identical frames between prev and cur is <= tolerance,
     # treat them as contiguous and keep in the same chunk.
-    if gap <= max_same_frames:
+    if gap <= MAX_SAME_FRAMES:
       current_chunk.append(cur)
     else:
       chunks.append(current_chunk)
@@ -89,8 +80,8 @@ def get_video_fps(video_path: str) -> float:
   return int(num) / int(den)
 
 
-CLIP_PADDING_BEFORE = 30  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 30   # extra frames of context to include after each chunk
+CLIP_PADDING_BEFORE = 10  # extra frames of context to include before each chunk
+CLIP_PADDING_AFTER = 10   # extra frames of context to include after each chunk
 MAX_SAME_FRAMES = 0  # allow up to this many identical frames between diffs in a single chunk
 
 
@@ -205,7 +196,7 @@ def main():
   if different_frames is None:
     sys.exit(1)
 
-  chunks = compute_chunks(different_frames, MAX_SAME_FRAMES)
+  chunks = compute_chunks(different_frames)
   clip_sets: list[dict] = []
   if chunks:
     print(f"\nExtracting {len(chunks)} different section(s)...")

From c97ee1042a96273d332f51b18fc5a9b1989f4df1 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:14:07 -0600
Subject: [PATCH 012/139] remove background preloading of video scenes from UI
 diff template

---
 selfdrive/ui/tests/diff/diff_template.html | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 8e47065f5b895c..0d1e857868e74b 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -75,18 +75,6 @@ <h2>UI Diff</h2>
     });
 
     switchTo(0);
-
-    // Background preload remaining scenes via <link rel="preload"> hints.
-    const bgQueue = scenes.map((_, i) => i).slice(1);
-    function bgPreload() {
-      const i = bgQueue.shift();
-      if (i === undefined) return;
-      scenes[i].srcs.forEach(src => document.head.appendChild(
-        Object.assign(document.createElement('link'), { rel: 'preload', as: 'video', href: src }),
-      ));
-      setTimeout(bgPreload, 1000);
-    }
-    setTimeout(bgPreload, 2000);
   </script>
 </body>
 </html>

From 513432b150cdfde681bd37ad77c11a619b1f956e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:30:49 -0600
Subject: [PATCH 013/139] refactor padding parameters and improve frame
 extraction in compute_chunks

---
 selfdrive/ui/tests/diff/diff.py | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 4e4dddca7d585a..8d8bd9e0fdc64f 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -11,6 +11,10 @@
 DIFF_OUT_DIR = Path(BASEDIR) / "selfdrive" / "ui" / "tests" / "diff" / "report"
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
+CLIP_PADDING_BEFORE = 0  # extra frames of context to include before each chunk
+CLIP_PADDING_AFTER = 0   # extra frames of context to include after each chunk
+MAX_IDENTICAL_FRAME_GAP = 30  # allow up to this many identical frames between diffs in a single chunk
+
 
 def extract_framehashes(video_path):
   cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
@@ -62,7 +66,7 @@ def compute_chunks(different_frames: list[int]) -> list[list[int]]:
     gap = cur - prev - 1
     # If the number of identical frames between prev and cur is <= tolerance,
     # treat them as contiguous and keep in the same chunk.
-    if gap <= MAX_SAME_FRAMES:
+    if gap <= MAX_IDENTICAL_FRAME_GAP:
       current_chunk.append(cur)
     else:
       chunks.append(current_chunk)
@@ -80,18 +84,17 @@ def get_video_fps(video_path: str) -> float:
   return int(num) / int(den)
 
 
-CLIP_PADDING_BEFORE = 10  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 10   # extra frames of context to include after each chunk
-MAX_SAME_FRAMES = 0  # allow up to this many identical frames between diffs in a single chunk
-
-
 def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> None:
   """Extract [start_frame, end_frame] plus padding before/after into *output_path*."""
   padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
   total_frames = (end_frame - start_frame + 1) + CLIP_PADDING_BEFORE + CLIP_PADDING_AFTER
   start_time = padded_start / fps
-  duration = total_frames / fps
-  cmd = ['ffmpeg', '-i', str(video_path), '-ss', str(start_time), '-t', str(duration), '-y', str(output_path)]
+  # Use frame-accurate extraction: seek after input and request an exact frame count.
+  # Using -frames:v avoids duration-to-frame rounding that can include adjacent frames.
+  cmd = [
+    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path),
+    '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)
+  ]
   subprocess.run(cmd, capture_output=True, check=True)
 
 

From bf91329bb8c833b416846b879cde550c3213c0f2 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:50:24 -0600
Subject: [PATCH 014/139] enhance scene switching by updating URL parameters
 without page reload

---
 selfdrive/ui/tests/diff/diff_template.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 0d1e857868e74b..f2ca829b7e1b78 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -57,12 +57,16 @@ <h2>UI Diff</h2>
       });
     });
 
-    // Switch to a scene: swap sources, reload, play.
+    // Switch to a scene: swap sources, reload, play, and update ?chunk query param.
     function switchTo(i) {
       vids.forEach(v => v.pause());
       const { srcs, loop } = scenes[i];
       vids.forEach((v, j) => { v.loop = loop; v.querySelector('source').src = srcs[j]; v.load(); v.play().catch(() => {}); });
       document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === i));
+      // Minimal URL update without page reload.
+      const newUrl = new URL(window.location);
+      i > 0 ? newUrl.searchParams.set('chunk', i) : newUrl.searchParams.delete('chunk');
+      history.replaceState(null, '', newUrl);
     }
 
     // Build nav buttons.
@@ -74,7 +78,13 @@ <h2>UI Diff</h2>
       navEl.appendChild(b);
     });
 
-    switchTo(0);
+    // On load: if ?chunk=N is present, select that scene; otherwise default to 0.
+    (function selectInitialFromQuery() {
+      const params = new URLSearchParams(window.location.search);
+      const v = parseInt(params.get('chunk') || '0', 10);
+      const initial = (!Number.isNaN(v) && v >= 0 && v < scenes.length) ? v : 0;
+      switchTo(initial);
+    })();
   </script>
 </body>
 </html>

From e447ff8d58104bc2757c2e52fa9f0016dcdb17bd Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:54:00 -0600
Subject: [PATCH 015/139] update scene switching to use ?selected query param
 instead of ?chunk

---
 selfdrive/ui/tests/diff/diff_template.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index f2ca829b7e1b78..3ee89fc3717091 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -57,7 +57,7 @@ <h2>UI Diff</h2>
       });
     });
 
-    // Switch to a scene: swap sources, reload, play, and update ?chunk query param.
+    // Switch to a scene: swap sources, reload, play, and update ?selected query param.
     function switchTo(i) {
       vids.forEach(v => v.pause());
       const { srcs, loop } = scenes[i];
@@ -65,7 +65,7 @@ <h2>UI Diff</h2>
       document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === i));
       // Minimal URL update without page reload.
       const newUrl = new URL(window.location);
-      i > 0 ? newUrl.searchParams.set('chunk', i) : newUrl.searchParams.delete('chunk');
+      i > 0 ? newUrl.searchParams.set('selected', i) : newUrl.searchParams.delete('selected');
       history.replaceState(null, '', newUrl);
     }
 
@@ -78,10 +78,10 @@ <h2>UI Diff</h2>
       navEl.appendChild(b);
     });
 
-    // On load: if ?chunk=N is present, select that scene; otherwise default to 0.
+    // On load: if ?selected=N is present, select that scene; otherwise default to 0.
     (function selectInitialFromQuery() {
       const params = new URLSearchParams(window.location.search);
-      const v = parseInt(params.get('chunk') || '0', 10);
+      const v = parseInt(params.get('selected') || '0', 10);
       const initial = (!Number.isNaN(v) && v >= 0 && v < scenes.length) ? v : 0;
       switchTo(initial);
     })();

From 5b4ac7a7a03e68ef5c6f95aeca166d223a43c5f1 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 20:55:34 -0600
Subject: [PATCH 016/139] hide nav when no diff segments are present in UI diff
 template

---
 selfdrive/ui/tests/diff/diff_template.html | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3ee89fc3717091..5ca11694580818 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -69,14 +69,18 @@ <h2>UI Diff</h2>
       history.replaceState(null, '', newUrl);
     }
 
-    // Build nav buttons.
+    // Build nav buttons (hide the nav entirely when there are no diff segments).
     const navEl = document.getElementById('nav');
-    scenes.forEach((s, i) => {
-      const b = document.createElement('button');
-      b.textContent = s.label;
-      b.onclick = () => switchTo(i);
-      navEl.appendChild(b);
-    });
+    if (scenes.length > 1) {
+      scenes.forEach((s, i) => {
+        const b = document.createElement('button');
+        b.textContent = s.label;
+        b.onclick = () => switchTo(i);
+        navEl.appendChild(b);
+      });
+    } else {
+      navEl.style.display = 'none';
+    }
 
     // On load: if ?selected=N is present, select that scene; otherwise default to 0.
     (function selectInitialFromQuery() {

From 53333d0f235c72f0c18b44bc09cb6f8c6558638e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 21:03:08 -0600
Subject: [PATCH 017/139] update clip padding parameters and adjust identical
 frame gap tolerance in diff computation

---
 selfdrive/ui/tests/diff/diff.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 8d8bd9e0fdc64f..7979a0ed5f3381 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -11,9 +11,9 @@
 DIFF_OUT_DIR = Path(BASEDIR) / "selfdrive" / "ui" / "tests" / "diff" / "report"
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
-CLIP_PADDING_BEFORE = 0  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 0   # extra frames of context to include after each chunk
-MAX_IDENTICAL_FRAME_GAP = 30  # allow up to this many identical frames between diffs in a single chunk
+CLIP_PADDING_BEFORE = 15  # extra frames of context to include before each chunk
+CLIP_PADDING_AFTER = 15   # extra frames of context to include after each chunk
+CHUNK_FRAME_GAP_TOLERANCE  = 60  # allow up to this many identical frames between diffs in a single chunk
 
 
 def extract_framehashes(video_path):
@@ -66,7 +66,7 @@ def compute_chunks(different_frames: list[int]) -> list[list[int]]:
     gap = cur - prev - 1
     # If the number of identical frames between prev and cur is <= tolerance,
     # treat them as contiguous and keep in the same chunk.
-    if gap <= MAX_IDENTICAL_FRAME_GAP:
+    if gap <= CHUNK_FRAME_GAP_TOLERANCE:
       current_chunk.append(cur)
     else:
       chunks.append(current_chunk)

From 9ed8cab8e35a8a9e0a84c105b0c3534119d2a4f0 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 21:06:48 -0600
Subject: [PATCH 018/139] increase clip padding

---
 selfdrive/ui/tests/diff/diff.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 7979a0ed5f3381..a21e859a1ee3ad 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -11,8 +11,8 @@
 DIFF_OUT_DIR = Path(BASEDIR) / "selfdrive" / "ui" / "tests" / "diff" / "report"
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
-CLIP_PADDING_BEFORE = 15  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 15   # extra frames of context to include after each chunk
+CLIP_PADDING_BEFORE = 30  # extra frames of context to include before each chunk
+CLIP_PADDING_AFTER = 30   # extra frames of context to include after each chunk
 CHUNK_FRAME_GAP_TOLERANCE  = 60  # allow up to this many identical frames between diffs in a single chunk
 
 

From 1a0be4c9f37f81314c9df484e6414bfa5da88159 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 21:11:15 -0600
Subject: [PATCH 019/139] rename Section to Diff  Group

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 5ca11694580818..6ceede075b67fb 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -29,7 +29,7 @@ <h2>UI Diff</h2>
     const scenes = [
       { label: 'Full Video', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
       ...chunks.map(({ start_frame, end_frame, duration, clips }, i) => ({
-        label: `Section ${i + 1}: frames ${start_frame}\u2013${end_frame} (${duration}f)`,
+        label: `Diff Group ${i + 1}: frames ${start_frame}-${end_frame} (${duration}f)`,
         srcs: [clips.video1, clips.video2, clips.diff],
         loop: true,
       })),

From b6a1dd8b27c52251dc098cf991ce53ac450f5ef2 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 21:14:00 -0600
Subject: [PATCH 020/139] label

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 6ceede075b67fb..3043a5b0e80b13 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -37,7 +37,7 @@ <h2>UI Diff</h2>
 
     // Static 3-video player — sources are swapped on scene change.
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
-      ${LABELS.map((lbl, i) => `<td width='33%'><h4>${lbl}</h4>
+      ${LABELS.map((label, i) => `<td width='33%'><h4>${label}</h4>
         <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video></td>`).join('')}
     </tr></tbody></table>`;
     const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));

From d6f2ae3be2b5b654c632730115d6a1d52bf81b49 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 21:40:15 -0600
Subject: [PATCH 021/139] add thumbnail generation for diff video chunks and
 update UI to display thumbnails

---
 selfdrive/ui/tests/diff/diff.py            | 30 +++++++++++++++++++---
 selfdrive/ui/tests/diff/diff_template.html | 23 +++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index a21e859a1ee3ad..db39fec1bfd8a2 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -108,6 +108,15 @@ def extract_chunk_clips(
 ) -> list[dict]:
   """For each chunk extract a short clip from video1, video2 and the diff video."""
   clip_sets: list[dict] = []
+  def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
+    """Create a single-frame PNG thumbnail at the given frame index."""
+    t = frame / fps
+    cmd = [
+      'ffmpeg', '-hide_banner', '-loglevel', 'error', '-ss', f"{t:.6f}", '-i', str(video_path),
+      '-frames:v', '1', '-y', str(out_path)
+    ]
+    subprocess.run(cmd, capture_output=True, check=True)
+
   for i, chunk in enumerate(chunks):
     start_frame, end_frame = chunk[0], chunk[-1]
     clips: dict[str, str] = {}
@@ -121,8 +130,19 @@ def extract_chunk_clips(
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
       # Store relative path under the report base dir: <diff-stem>-chunks/<file>
       clips[name] = os.path.join(folder_name, out_path.name)
+    # Use the middle frame of the chunk as the thumbnail frame, but if anything goes wrong just skip the thumbnail for that chunk instead of failing the whole report generation
+    try:
+      diff_frame = chunk[len(chunk) // 2]
+      thumb_name = f"{i:03d}_thumb.png"
+      thumb_path = chunk_dir / thumb_name
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} into {folder_name}/{thumb_name}…")
+      generate_thumbnail(diff_video, diff_frame, str(thumb_path), fps)
+      thumb_rel = os.path.join(folder_name, thumb_name)
+    except Exception:
+      thumb_rel = ''
+
     clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame,
-                      'duration': end_frame - start_frame + 1, 'clips': clips})
+                      'duration': end_frame - start_frame + 1, 'clips': clips, 'thumb': thumb_rel})
   return clip_sets
 
 
@@ -145,9 +165,13 @@ def generate_html_report(
     + (f" Video {'2' if frame_delta > 0 else '1'} is longer by {abs(frame_delta)} frames." if frame_delta != 0 else "")
   )
 
-  # Pre-join basedir into clip paths so the template needs no path logic
+  # Pre-join basedir into clip paths and thumb so the template needs no path logic
   processed_sets = [
-    {**cs, 'clips': {k: os.path.join(basedir, v) if basedir else v for k, v in cs['clips'].items()}}
+    {
+      **cs,
+      'clips': {k: os.path.join(basedir, v) if basedir else v for k, v in cs['clips'].items()},
+      'thumb': os.path.join(basedir, cs['thumb']) if (basedir and cs.get('thumb')) else cs.get('thumb', ''),
+    }
     for cs in (clip_sets or [])
   ]
 
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3043a5b0e80b13..bd780805ab3ac3 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -7,9 +7,12 @@
   <style>
     body { font-family: sans-serif; margin: 1em; }
     h2, h4 { margin: 0.5em 0 0.25em; }
-    #nav { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.75em 0; }
-    #nav button { padding: 0.35em 0.75em; border: 1px solid #aaa; border-radius: 4px; cursor: pointer; background: #f5f5f5; }
-    #nav button.active { background: #0078d4; color: #fff; border-color: #0078d4; }
+    #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
+    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 140px; }
+    #nav button img { width: 100%; height: auto; display: block; }
+    #nav button span { font-size: 0.72rem; padding: 0.3em 0.4em; text-align: center; line-height: 1.3; }
+    #nav button.active { border-color: #0078d4; background: #e5f2fc; }
+    #nav button.active span { color: #0078d4; font-weight: 600; }
     table.videos { width: 100%; }
     @media (max-width: 800px) {
       table.videos tr { display: flex; flex-direction: column; }
@@ -28,9 +31,10 @@ <h2>UI Diff</h2>
 
     const scenes = [
       { label: 'Full Video', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
-      ...chunks.map(({ start_frame, end_frame, duration, clips }, i) => ({
+      ...chunks.map(({ start_frame, end_frame, duration, clips, thumb }, i) => ({
         label: `Diff Group ${i + 1}: frames ${start_frame}-${end_frame} (${duration}f)`,
         srcs: [clips.video1, clips.video2, clips.diff],
+        thumb: thumb || '',
         loop: true,
       })),
     ];
@@ -74,7 +78,16 @@ <h2>UI Diff</h2>
     if (scenes.length > 1) {
       scenes.forEach((s, i) => {
         const b = document.createElement('button');
-        b.textContent = s.label;
+        if (s.thumb) {
+          const img = document.createElement('img');
+          img.src = s.thumb;
+          img.alt = s.label;
+          b.appendChild(img);
+        }
+        const span = document.createElement('span');
+        span.textContent = s.label;
+        b.title = s.label;
+        b.appendChild(span);
         b.onclick = () => switchTo(i);
         navEl.appendChild(b);
       });

From 541936bf2f9d31f0d327a0edd512fe1fbbbbf48f Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 21:43:39 -0600
Subject: [PATCH 022/139] fix: update print statements to include quotes around
 file paths in chunk extraction

---
 selfdrive/ui/tests/diff/diff.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index db39fec1bfd8a2..633b130b9232f5 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -126,7 +126,7 @@ def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -
     os.makedirs(chunk_dir, exist_ok=True)
     for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
       out_path = chunk_dir / f"{i:03d}_{name}.mp4"
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into {folder_name}/{out_path.name}…")
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into '{folder_name}/{out_path.name}'…")
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
       # Store relative path under the report base dir: <diff-stem>-chunks/<file>
       clips[name] = os.path.join(folder_name, out_path.name)
@@ -135,7 +135,7 @@ def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -
       diff_frame = chunk[len(chunk) // 2]
       thumb_name = f"{i:03d}_thumb.png"
       thumb_path = chunk_dir / thumb_name
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} into {folder_name}/{thumb_name}…")
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} into '{folder_name}/{thumb_name}'…")
       generate_thumbnail(diff_video, diff_frame, str(thumb_path), fps)
       thumb_rel = os.path.join(folder_name, thumb_name)
     except Exception:

From e129d083614459d93942e859d8ec0d9f5cc0a020 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 22:43:19 -0600
Subject: [PATCH 023/139] improve layout

---
 selfdrive/ui/tests/diff/diff_template.html | 32 ++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index bd780805ab3ac3..47d11e4b843619 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -6,15 +6,19 @@
   <title>UI Diff Report</title>
   <style>
     body { font-family: sans-serif; margin: 1em; }
-    h2, h4 { margin: 0.5em 0 0.25em; }
+    h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
-    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 140px; }
+    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; }
     #nav button img { width: 100%; height: auto; display: block; }
-    #nav button span { font-size: 0.72rem; padding: 0.3em 0.4em; text-align: center; line-height: 1.3; }
+    #nav button .nav-title { font-size: 0.82rem; padding-top: 0.3rem; text-align: center; font-weight: 600; }
+    #nav button .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; }
-    #nav button.active span { color: #0078d4; font-weight: 600; }
+    #nav button.active .nav-title { color: #0078d4; }
     table.videos { width: 100%; }
     @media (max-width: 800px) {
+      /* responsive grid for nav: 2–3 columns that fill the row */
+      #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; margin: 0.5em 0; }
+      #nav button { width: 100%; }
       table.videos tr { display: flex; flex-direction: column; }
       table.videos td { width: 100% !important; }
     }
@@ -30,9 +34,10 @@ <h2>UI Diff</h2>
     const chunks = $CHUNKS_JSON;
 
     const scenes = [
-      { label: 'Full Video', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
+      { title: 'Full Video', desc: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
       ...chunks.map(({ start_frame, end_frame, duration, clips, thumb }, i) => ({
-        label: `Diff Group ${i + 1}: frames ${start_frame}-${end_frame} (${duration}f)`,
+        title: `Diff Group ${i + 1}`,
+        desc: `frames ${start_frame}-${end_frame} (${duration}f, ${(duration / 30.0).toFixed(2)}s)`,
         srcs: [clips.video1, clips.video2, clips.diff],
         thumb: thumb || '',
         loop: true,
@@ -81,13 +86,18 @@ <h2>UI Diff</h2>
         if (s.thumb) {
           const img = document.createElement('img');
           img.src = s.thumb;
-          img.alt = s.label;
+          img.alt = s.title;
           b.appendChild(img);
         }
-        const span = document.createElement('span');
-        span.textContent = s.label;
-        b.title = s.label;
-        b.appendChild(span);
+        const title = document.createElement('span');
+        title.className = 'nav-title';
+        title.textContent = s.title;
+        const desc = document.createElement('span');
+        desc.className = 'nav-desc';
+        desc.textContent = s.desc || '';
+        b.title = (s.title + (s.desc ? ' — ' + s.desc : '')).trim();
+        b.appendChild(title);
+        b.appendChild(desc);
         b.onclick = () => switchTo(i);
         navEl.appendChild(b);
       });

From 3b3b0ffcfaee573ae76f34ac23b6272ade707285 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:03:14 -0600
Subject: [PATCH 024/139] smaller body margin

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 47d11e4b843619..aac68c3975ba76 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>UI Diff Report</title>
   <style>
-    body { font-family: sans-serif; margin: 1em; }
+    body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
     #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; }

From ceefa03d172b78ffff1d19698886dda18738e01c Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:08:00 -0600
Subject: [PATCH 025/139] refactor

---
 selfdrive/ui/tests/diff/diff.py | 43 +++++++++++++++++----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 633b130b9232f5..4260f730f6763b 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -98,6 +98,16 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
   subprocess.run(cmd, capture_output=True, check=True)
 
 
+def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
+  """Create a single-frame PNG thumbnail at the given frame index."""
+  t = frame / fps
+  cmd = [
+    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-ss', f"{t:.6f}", '-i', str(video_path),
+    '-frames:v', '1', '-y', str(out_path)
+  ]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
 def extract_chunk_clips(
   video1: str,
   video2: str,
@@ -108,18 +118,11 @@ def extract_chunk_clips(
 ) -> list[dict]:
   """For each chunk extract a short clip from video1, video2 and the diff video."""
   clip_sets: list[dict] = []
-  def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
-    """Create a single-frame PNG thumbnail at the given frame index."""
-    t = frame / fps
-    cmd = [
-      'ffmpeg', '-hide_banner', '-loglevel', 'error', '-ss', f"{t:.6f}", '-i', str(video_path),
-      '-frames:v', '1', '-y', str(out_path)
-    ]
-    subprocess.run(cmd, capture_output=True, check=True)
 
   for i, chunk in enumerate(chunks):
     start_frame, end_frame = chunk[0], chunk[-1]
     clips: dict[str, str] = {}
+
     # Use a single top-level folder based on the diff video name, e.g. '<diff-stem>-chunks'
     folder_name = f"{Path(diff_video).stem}-chunks"
     chunk_dir = output_dir / folder_name
@@ -130,19 +133,17 @@ def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
       # Store relative path under the report base dir: <diff-stem>-chunks/<file>
       clips[name] = os.path.join(folder_name, out_path.name)
-    # Use the middle frame of the chunk as the thumbnail frame, but if anything goes wrong just skip the thumbnail for that chunk instead of failing the whole report generation
-    try:
-      diff_frame = chunk[len(chunk) // 2]
-      thumb_name = f"{i:03d}_thumb.png"
-      thumb_path = chunk_dir / thumb_name
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} into '{folder_name}/{thumb_name}'…")
-      generate_thumbnail(diff_video, diff_frame, str(thumb_path), fps)
-      thumb_rel = os.path.join(folder_name, thumb_name)
-    except Exception:
-      thumb_rel = ''
-
-    clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame,
-                      'duration': end_frame - start_frame + 1, 'clips': clips, 'thumb': thumb_rel})
+
+    # Use the middle frame of the chunk as the thumbnail frame
+    diff_frame = chunk[len(chunk) // 2]
+    thumb_name = f"{i:03d}_thumb.png"
+    thumb_path = chunk_dir / thumb_name
+    print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} into '{folder_name}/{thumb_name}'…")
+    generate_thumbnail(diff_video, diff_frame, str(thumb_path), fps)
+    thumb_rel = os.path.join(folder_name, thumb_name)
+
+    # Store clip paths and metadata for this chunk to be used in the HTML report
+    clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame, 'duration': end_frame - start_frame + 1, 'clips': clips, 'thumb': thumb_rel})
   return clip_sets
 
 

From 84642826f388502769cb5c78aca130e2eee6ae10 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:18:58 -0600
Subject: [PATCH 026/139] cleanup

---
 selfdrive/ui/tests/diff/diff.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 4260f730f6763b..30ce368f7262c2 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -102,7 +102,7 @@ def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -
   """Create a single-frame PNG thumbnail at the given frame index."""
   t = frame / fps
   cmd = [
-    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-ss', f"{t:.6f}", '-i', str(video_path),
+    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path), '-ss', f"{t:.6f}",
     '-frames:v', '1', '-y', str(out_path)
   ]
   subprocess.run(cmd, capture_output=True, check=True)
@@ -123,22 +123,22 @@ def extract_chunk_clips(
     start_frame, end_frame = chunk[0], chunk[-1]
     clips: dict[str, str] = {}
 
-    # Use a single top-level folder based on the diff video name, e.g. '<diff-stem>-chunks'
+    # Create a per-diff folder for chunk media (relative to the final HTML report path).
     folder_name = f"{Path(diff_video).stem}-chunks"
     chunk_dir = output_dir / folder_name
     os.makedirs(chunk_dir, exist_ok=True)
     for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
       out_path = chunk_dir / f"{i:03d}_{name}.mp4"
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}–{end_frame} into '{folder_name}/{out_path.name}'…")
+      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}-{end_frame} -> '{folder_name}/{out_path.name}'")
       extract_clip(src, start_frame, end_frame, str(out_path), fps)
-      # Store relative path under the report base dir: <diff-stem>-chunks/<file>
+      # Store paths relative to the report directory so the HTML can reference them directly.
       clips[name] = os.path.join(folder_name, out_path.name)
 
     # Use the middle frame of the chunk as the thumbnail frame
     diff_frame = chunk[len(chunk) // 2]
     thumb_name = f"{i:03d}_thumb.png"
     thumb_path = chunk_dir / thumb_name
-    print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} into '{folder_name}/{thumb_name}'…")
+    print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} -> '{folder_name}/{thumb_name}'")
     generate_thumbnail(diff_video, diff_frame, str(thumb_path), fps)
     thumb_rel = os.path.join(folder_name, thumb_name)
 

From ddb56e1b4cd2145cdd0cae0a2e24d22a30dba571 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:38:10 -0600
Subject: [PATCH 027/139] fix

---
 selfdrive/ui/tests/diff/diff.py | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 30ce368f7262c2..4d70262907ffe2 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -87,7 +87,8 @@ def get_video_fps(video_path: str) -> float:
 def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> None:
   """Extract [start_frame, end_frame] plus padding before/after into *output_path*."""
   padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
-  total_frames = (end_frame - start_frame + 1) + CLIP_PADDING_BEFORE + CLIP_PADDING_AFTER
+  padding_before = start_frame - padded_start
+  total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
   start_time = padded_start / fps
   # Use frame-accurate extraction: seek after input and request an exact frame count.
   # Using -frames:v avoids duration-to-frame rounding that can include adjacent frames.
@@ -221,9 +222,6 @@ def main():
 
   different_frames, frame_counts = find_differences(args.video1, args.video2)
 
-  if different_frames is None:
-    sys.exit(1)
-
   chunks = compute_chunks(different_frames)
   clip_sets: list[dict] = []
   if chunks:

From b57aa491084a200ac80790f7a845f288a943d722 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:43:48 -0600
Subject: [PATCH 028/139] simplify

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 4d70262907ffe2..77fd53f217c46f 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -33,7 +33,7 @@ def extract_framehashes(video_path):
 def create_diff_video(video1, video2, output_path):
   """Create a diff video using ffmpeg blend filter with difference mode."""
   print("Creating diff video...")
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
+  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
   subprocess.run(cmd, capture_output=True, check=True)
 
 

From e2aec33f8a8066ecbadc55781ba38f3944832d53 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:52:56 -0600
Subject: [PATCH 029/139] formatting

---
 selfdrive/ui/tests/diff/diff.py | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 77fd53f217c46f..c5bc02c88f1de3 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -12,8 +12,8 @@
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
 CLIP_PADDING_BEFORE = 30  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 30   # extra frames of context to include after each chunk
-CHUNK_FRAME_GAP_TOLERANCE  = 60  # allow up to this many identical frames between diffs in a single chunk
+CLIP_PADDING_AFTER = 30  # extra frames of context to include after each chunk
+CHUNK_FRAME_GAP_TOLERANCE = 60  # allow up to this many identical frames between diffs in a single chunk
 
 
 def extract_framehashes(video_path):
@@ -64,9 +64,8 @@ def compute_chunks(different_frames: list[int]) -> list[list[int]]:
     prev = different_frames[i - 1]
     cur = different_frames[i]
     gap = cur - prev - 1
-    # If the number of identical frames between prev and cur is <= tolerance,
-    # treat them as contiguous and keep in the same chunk.
     if gap <= CHUNK_FRAME_GAP_TOLERANCE:
+      # Treat small gaps of identical frames as part of the same chunk to avoid excessive fragmentation
       current_chunk.append(cur)
     else:
       chunks.append(current_chunk)
@@ -77,8 +76,7 @@ def compute_chunks(different_frames: list[int]) -> list[list[int]]:
 
 def get_video_fps(video_path: str) -> float:
   """Return the frame-rate of a video file."""
-  cmd = ['ffprobe', '-v', 'error', '-select_streams', 'v:0',
-         '-show_entries', 'stream=r_frame_rate', '-of', 'csv=p=0', str(video_path)]
+  cmd = ['ffprobe', '-v', 'error', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'csv=p=0', str(video_path)]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   num, den = result.stdout.strip().split('/')
   return int(num) / int(den)
@@ -90,8 +88,6 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
   start_time = padded_start / fps
-  # Use frame-accurate extraction: seek after input and request an exact frame count.
-  # Using -frames:v avoids duration-to-frame rounding that can include adjacent frames.
   cmd = [
     'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path),
     '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)
@@ -102,10 +98,7 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
 def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
   """Create a single-frame PNG thumbnail at the given frame index."""
   t = frame / fps
-  cmd = [
-    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path), '-ss', f"{t:.6f}",
-    '-frames:v', '1', '-y', str(out_path)
-  ]
+  cmd = ['ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-y', str(out_path)]
   subprocess.run(cmd, capture_output=True, check=True)
 
 

From 35c741eece0c6c719260eb5ab6d6d377065c01d2 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 18 Feb 2026 23:54:57 -0600
Subject: [PATCH 030/139] formatting

---
 selfdrive/ui/tests/diff/diff.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index c5bc02c88f1de3..672adb4fca5fc4 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -138,6 +138,7 @@ def extract_chunk_clips(
 
     # Store clip paths and metadata for this chunk to be used in the HTML report
     clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame, 'duration': end_frame - start_frame + 1, 'clips': clips, 'thumb': thumb_rel})
+
   return clip_sets
 
 
@@ -216,7 +217,7 @@ def main():
   different_frames, frame_counts = find_differences(args.video1, args.video2)
 
   chunks = compute_chunks(different_frames)
-  clip_sets: list[dict] = []
+  clip_sets = []
   if chunks:
     print(f"\nExtracting {len(chunks)} different section(s)...")
     fps = get_video_fps(args.video1)

From 1d2b9ef3038ac3da94ba9a5fa8aafd16793d66b2 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 00:20:59 -0600
Subject: [PATCH 031/139] DIFF

---
 selfdrive/ui/tests/diff/diff.py            | 228 +++++++++++++++------
 selfdrive/ui/tests/diff/diff_template.html | 121 ++++++++---
 2 files changed, 260 insertions(+), 89 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 672adb4fca5fc4..7410352c767d6e 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -1,6 +1,8 @@
 #!/usr/bin/env python3
+import difflib
 import json
 import os
+import shutil
 import sys
 import subprocess
 import webbrowser
@@ -31,59 +33,98 @@ def extract_framehashes(video_path):
 
 
 def create_diff_video(video1, video2, output_path):
-  """Create a diff video using ffmpeg blend filter with difference mode."""
+  """Create a diff video using ffmpeg blend filter with difference mode (covers the common-length prefix)."""
   print("Creating diff video...")
   cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
-def find_differences(video1, video2) -> tuple[list[int], tuple[int, int]]:
+def find_differences(video1, video2) -> tuple[list[str], list[str]]:
+  """Hash every frame of both videos and return the two hash lists."""
   print(f"Hashing frames from {video1}...")
   hashes1 = extract_framehashes(video1)
 
   print(f"Hashing frames from {video2}...")
   hashes2 = extract_framehashes(video2)
 
-  print(f"Comparing {len(hashes1)} frames...")
-  different_frames = []
+  print(f"Comparing {len(hashes1)} vs {len(hashes2)} frames...")
+  return hashes1, hashes2
 
-  for i, (h1, h2) in enumerate(zip(hashes1, hashes2, strict=False)):
-    if h1 != h2:
-      different_frames.append(i)
 
-  return different_frames, (len(hashes1), len(hashes2))
+def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
+  """
+  Use SequenceMatcher to produce a proper diff (handles mid-video insertions/deletions).
+  Nearby non-equal opcodes are merged so that small identical stretches don't create
+  excessive fragmentation. Each returned chunk has:
+    type        – 'replace' | 'insert' | 'delete'
+    v1_start, v1_end, v1_count  – frame range in video 1 (count == 0 for 'insert')
+    v2_start, v2_end, v2_count  – frame range in video 2 (count == 0 for 'delete')
+  """
+  matcher = difflib.SequenceMatcher(None, hashes1, hashes2, autojunk=False)
 
+  # Collect only the non-equal opcodes as mutable lists for merging.
+  diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']
 
-def compute_chunks(different_frames: list[int]) -> list[list[int]]:
-  """Group differing frame indices into contiguous chunks."""
-  if not different_frames:
+  if not diff_ops:
     return []
-  chunks: list[list[int]] = []
-  current_chunk = [different_frames[0]]
-  for i in range(1, len(different_frames)):
-    prev = different_frames[i - 1]
-    cur = different_frames[i]
-    gap = cur - prev - 1
-    if gap <= CHUNK_FRAME_GAP_TOLERANCE:
-      # Treat small gaps of identical frames as part of the same chunk to avoid excessive fragmentation
-      current_chunk.append(cur)
+
+  # Merge nearby ops: if the gap (in equal frames) between two consecutive ops is
+  # small enough in BOTH videos, fold them into one 'replace' op.
+  merged: list[list] = [diff_ops[0]]
+  for op in diff_ops[1:]:
+    prev = merged[-1]
+    gap_v1 = op[1] - prev[2]   # equal frames between ops in video 1
+    gap_v2 = op[3] - prev[4]   # equal frames between ops in video 2
+    if max(gap_v1, gap_v2) <= CHUNK_FRAME_GAP_TOLERANCE:
+      # Absorb this op into previous, widening both ranges.
+      merged[-1] = ['replace', prev[1], op[2], prev[3], op[4]]
     else:
-      chunks.append(current_chunk)
-      current_chunk = [cur]
-  chunks.append(current_chunk)
+      merged.append(op)
+
+  chunks = []
+  for tag, i1, i2, j1, j2 in merged:
+    chunks.append({
+      'type': tag,
+      'v1_start': i1, 'v1_end': i2 - 1, 'v1_count': i2 - i1,
+      'v2_start': j1, 'v2_end': j2 - 1, 'v2_count': j2 - j1,
+    })
   return chunks
 
 
-def get_video_fps(video_path: str) -> float:
-  """Return the frame-rate of a video file."""
-  cmd = ['ffprobe', '-v', 'error', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'csv=p=0', str(video_path)]
+def count_different_frames(chunks: list[dict]) -> int:
+  """Return a headline 'different frame' count for the summary."""
+  return sum(max(c['v1_count'], c['v2_count']) for c in chunks)
+
+
+def get_video_info(video_path: str) -> tuple[float, int, int]:
+  """Return (fps, width, height) for a video file."""
+  cmd = [
+    'ffprobe', '-v', 'error', '-select_streams', 'v:0',
+    '-show_entries', 'stream=r_frame_rate,width,height',
+    '-of', 'json', str(video_path),
+  ]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
-  num, den = result.stdout.strip().split('/')
-  return int(num) / int(den)
+  info = json.loads(result.stdout)['streams'][0]
+  num, den = info['r_frame_rate'].split('/')
+  fps = int(num) / int(den)
+  return fps, int(info['width']), int(info['height'])
 
 
-def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> None:
-  """Extract [start_frame, end_frame] plus padding before/after into *output_path*."""
+def create_black_clip(output_path: str, width: int, height: int, fps: float, num_frames: int) -> None:
+  """Generate a solid-black video clip (used as a placeholder for insert/delete lanes)."""
+  duration = num_frames / fps
+  cmd = [
+    'ffmpeg', '-hide_banner', '-loglevel', 'error',
+    '-f', 'lavfi', '-i', f'color=c=black:size={width}x{height}:rate={fps}',
+    '-t', f'{duration:.6f}', '-frames:v', str(num_frames),
+    '-y', output_path,
+  ]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
+def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> int:
+  """Extract [start_frame, end_frame] plus padding before/after into *output_path*.
+  Returns the actual number of frames written."""
   padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
@@ -93,6 +134,7 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
     '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)
   ]
   subprocess.run(cmd, capture_output=True, check=True)
+  return total_frames
 
 
 def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
@@ -106,38 +148,97 @@ def extract_chunk_clips(
   video1: str,
   video2: str,
   diff_video: str,
-  chunks: list[list[int]],
+  chunks: list[dict],
   fps: float,
+  width: int,
+  height: int,
   output_dir: Path,
 ) -> list[dict]:
-  """For each chunk extract a short clip from video1, video2 and the diff video."""
+  """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
   clip_sets: list[dict] = []
+  folder_name = f"{Path(diff_video).stem}-chunks"
+  chunk_dir = output_dir / folder_name
+  os.makedirs(chunk_dir, exist_ok=True)
+  n = len(chunks)
 
   for i, chunk in enumerate(chunks):
-    start_frame, end_frame = chunk[0], chunk[-1]
+    chunk_type = chunk['type']   # 'replace' | 'insert' | 'delete'
+    v1_start, v1_end, v1_count = chunk['v1_start'], chunk['v1_end'], chunk['v1_count']
+    v2_start, v2_end, v2_count = chunk['v2_start'], chunk['v2_end'], chunk['v2_count']
     clips: dict[str, str] = {}
 
-    # Create a per-diff folder for chunk media (relative to the final HTML report path).
-    folder_name = f"{Path(diff_video).stem}-chunks"
-    chunk_dir = output_dir / folder_name
-    os.makedirs(chunk_dir, exist_ok=True)
-    for name, src in [('video1', video1), ('video2', video2), ('diff', diff_video)]:
-      out_path = chunk_dir / f"{i:03d}_{name}.mp4"
-      print(f"  Extracting chunk {i + 1}/{len(chunks)} ({name}) frames {start_frame}-{end_frame} -> '{folder_name}/{out_path.name}'")
-      extract_clip(src, start_frame, end_frame, str(out_path), fps)
-      # Store paths relative to the report directory so the HTML can reference them directly.
-      clips[name] = os.path.join(folder_name, out_path.name)
-
-    # Use the middle frame of the chunk as the thumbnail frame
-    diff_frame = chunk[len(chunk) // 2]
+    def _rel(p: Path) -> str:
+      return os.path.join(folder_name, p.name)
+
+    # --- video1 clip ---
+    v1_clip = chunk_dir / f"{i:03d}_video1.mp4"
+    if chunk_type != 'insert':
+      print(f"  Chunk {i + 1}/{n} (v1/{chunk_type}) frames {v1_start}-{v1_end}")
+      v1_frames = extract_clip(video1, v1_start, v1_end, str(v1_clip), fps)
+    else:
+      # Pure insertion: video1 has nothing here — generate a black placeholder of
+      # the same total length as the video2 clip (content + padding).
+      padding = min(v2_start, CLIP_PADDING_BEFORE)
+      v1_frames = padding + v2_count + CLIP_PADDING_AFTER
+      print(f"  Chunk {i + 1}/{n} (v1/insert-placeholder) {v1_frames} black frames")
+      create_black_clip(str(v1_clip), width, height, fps, v1_frames)
+    clips['video1'] = _rel(v1_clip)
+
+    # --- video2 clip ---
+    v2_clip = chunk_dir / f"{i:03d}_video2.mp4"
+    if chunk_type != 'delete':
+      print(f"  Chunk {i + 1}/{n} (v2/{chunk_type}) frames {v2_start}-{v2_end}")
+      v2_frames = extract_clip(video2, v2_start, v2_end, str(v2_clip), fps)
+    else:
+      # Pure deletion: video2 has nothing here.
+      padding = min(v1_start, CLIP_PADDING_BEFORE)
+      v2_frames = padding + v1_count + CLIP_PADDING_AFTER
+      print(f"  Chunk {i + 1}/{n} (v2/delete-placeholder) {v2_frames} black frames")
+      create_black_clip(str(v2_clip), width, height, fps, v2_frames)
+    clips['video2'] = _rel(v2_clip)
+
+    # --- diff/highlight clip ---
+    diff_clip = chunk_dir / f"{i:03d}_diff.mp4"
+    if chunk_type == 'replace':
+      # Pixel-difference blend of the two clips (stops at the shorter one).
+      cmd = [
+        'ffmpeg', '-hide_banner', '-loglevel', 'error',
+        '-i', str(v1_clip), '-i', str(v2_clip),
+        '-filter_complex', 'blend=all_mode=difference',
+        '-vsync', '0', '-y', str(diff_clip),
+      ]
+      subprocess.run(cmd, capture_output=True, check=True)
+    elif chunk_type == 'delete':
+      shutil.copy(str(v1_clip), str(diff_clip))   # show what was removed
+    else:  # insert
+      shutil.copy(str(v2_clip), str(diff_clip))   # show what was added
+
+    clips['diff'] = _rel(diff_clip)
+
+    # --- thumbnail (middle frame of the diff content inside the clip) ---
+    padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
+    content_count = v1_count if chunk_type != 'insert' else v2_count
+    thumb_frame_in_clip = padding_used + content_count // 2
     thumb_name = f"{i:03d}_thumb.png"
     thumb_path = chunk_dir / thumb_name
-    print(f"  Extracting chunk {i + 1}/{len(chunks)} (thumb) frame {diff_frame} -> '{folder_name}/{thumb_name}'")
-    generate_thumbnail(diff_video, diff_frame, str(thumb_path), fps)
-    thumb_rel = os.path.join(folder_name, thumb_name)
-
-    # Store clip paths and metadata for this chunk to be used in the HTML report
-    clip_sets.append({'start_frame': start_frame, 'end_frame': end_frame, 'duration': end_frame - start_frame + 1, 'clips': clips, 'thumb': thumb_rel})
+    print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
+    generate_thumbnail(str(diff_clip), thumb_frame_in_clip, str(thumb_path), fps)
+
+    # Headline frame numbers for the report (expressed in video1 coordinates where
+    # possible, video2 for pure inserts).
+    display_start = v1_start if chunk_type != 'insert' else v2_start
+    display_end   = v1_end   if chunk_type != 'insert' else v2_end
+
+    clip_sets.append({
+      'type': chunk_type,
+      'start_frame': display_start,
+      'end_frame': display_end,
+      'duration': max(v1_count, v2_count),
+      'v1_count': v1_count,
+      'v2_count': v2_count,
+      'clips': clips,
+      'thumb': _rel(thumb_path),
+    })
 
   return clip_sets
 
@@ -145,19 +246,18 @@ def extract_chunk_clips(
 def generate_html_report(
   videos: tuple[str, str],
   basedir: str,
-  different_frames: list[int],
+  diff_frame_count: int,
   frame_counts: tuple[int, int],
   diff_video_name: str,
   clip_sets: list[dict] | None = None,
 ) -> str:
   total_frames = max(frame_counts)
   frame_delta = frame_counts[1] - frame_counts[0]
-  different_total = len(different_frames) + abs(frame_delta)
 
   result_text = (
     f"✅ Videos are identical! ({total_frames} frames)"
-    if different_total == 0
-    else f"❌ Found {different_total} different frames out of {total_frames} total ({different_total / total_frames * 100:.1f}%)."
+    if diff_frame_count == 0
+    else f"❌ Found {diff_frame_count} different frames out of {total_frames} total ({diff_frame_count / total_frames * 100:.1f}%)."
     + (f" Video {'2' if frame_delta > 0 else '1'} is longer by {abs(frame_delta)} frames." if frame_delta != 0 else "")
   )
 
@@ -214,18 +314,21 @@ def main():
   diff_video_path = str(DIFF_OUT_DIR / diff_video_name)
   create_diff_video(args.video1, args.video2, diff_video_path)
 
-  different_frames, frame_counts = find_differences(args.video1, args.video2)
+  hashes1, hashes2 = find_differences(args.video1, args.video2)
+  frame_counts = (len(hashes1), len(hashes2))
+
+  chunks = compute_diff_chunks(hashes1, hashes2)
+  diff_frame_count = count_different_frames(chunks)
 
-  chunks = compute_chunks(different_frames)
   clip_sets = []
   if chunks:
     print(f"\nExtracting {len(chunks)} different section(s)...")
-    fps = get_video_fps(args.video1)
-    clip_sets = extract_chunk_clips(args.video1, args.video2, diff_video_path, chunks, fps, DIFF_OUT_DIR)
+    fps, width, height = get_video_info(args.video1)
+    clip_sets = extract_chunk_clips(args.video1, args.video2, diff_video_path, chunks, fps, width, height, DIFF_OUT_DIR)
 
   print()
   print("Generating HTML report...")
-  html = generate_html_report((args.video1, args.video2), args.basedir, different_frames, frame_counts, diff_video_name, clip_sets)
+  html = generate_html_report((args.video1, args.video2), args.basedir, diff_frame_count, frame_counts, diff_video_name, clip_sets)
 
   with open(DIFF_OUT_DIR / args.output, 'w') as f:
     f.write(html)
@@ -235,8 +338,7 @@ def main():
     print(f"Opening {args.output} in browser...")
     webbrowser.open(f'file://{os.path.abspath(DIFF_OUT_DIR / args.output)}')
 
-  extra_frames = abs(frame_counts[0] - frame_counts[1])
-  return 0 if (len(different_frames) + extra_frames) == 0 else 1
+  return 0 if diff_frame_count == 0 else 1
 
 
 if __name__ == "__main__":
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index aac68c3975ba76..4ed7dbf2076061 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -14,9 +14,18 @@
     #nav button .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; }
     #nav button.active .nav-title { color: #0078d4; }
+    #nav button.type-insert { border-color: #2a9d2a; }
+    #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
+    #nav button.type-delete { border-color: #c0392b; }
+    #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
     table.videos { width: 100%; }
+    .vid-wrap { position: relative; }
+    .vid-badge { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: 0.72rem; font-weight: 700;
+                 padding: 2px 6px; border-radius: 4px; pointer-events: none; }
+    .badge-insert { background: #2a9d2a; color: #fff; }
+    .badge-delete { background: #c0392b; color: #fff; }
+    .badge-replace { background: #d4860a; color: #fff; }
     @media (max-width: 800px) {
-      /* responsive grid for nav: 2–3 columns that fill the row */
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; margin: 0.5em 0; }
       #nav button { width: 100%; }
       table.videos tr { display: flex; flex-direction: column; }
@@ -33,48 +42,107 @@ <h2>UI Diff</h2>
     const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];
     const chunks = $CHUNKS_JSON;
 
+    const TYPE_ICON  = { replace: '✏️', insert: '➕', delete: '➖' };
+    const TYPE_BADGE = { replace: 'badge-replace', insert: 'badge-insert', delete: 'badge-delete' };
+    const TYPE_NAV   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
+
     const scenes = [
-      { title: 'Full Video', desc: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
-      ...chunks.map(({ start_frame, end_frame, duration, clips, thumb }, i) => ({
-        title: `Diff Group ${i + 1}`,
-        desc: `frames ${start_frame}-${end_frame} (${duration}f, ${(duration / 30.0).toFixed(2)}s)`,
-        srcs: [clips.video1, clips.video2, clips.diff],
-        thumb: thumb || '',
-        loop: true,
-      })),
+      { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
+      ...chunks.map(({ start_frame, end_frame, duration, v1_count, v2_count, type, clips, thumb }, i) => {
+        const icon = TYPE_ICON[type] || '';
+        const counts = (type === 'insert')
+          ? `+${v2_count}f`
+          : (type === 'delete')
+            ? `-${v1_count}f`
+            : (v1_count !== v2_count ? `${v1_count}→${v2_count}f` : `${duration}f`);
+        return {
+          title: `${icon} Group ${i + 1}`,
+          desc: `frames ${start_frame}–${end_frame} (${counts}, ${(Math.max(v1_count||0, v2_count||0) / 30.0).toFixed(2)}s)`,
+          type: type || '',
+          srcs: [clips.video1, clips.video2, clips.diff],
+          thumb: thumb || '',
+          loop: true,
+        };
+      }),
     ];
 
-    // Static 3-video player — sources are swapped on scene change.
+    // Build the static 3-video player; badge spans are toggled per-scene.
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
       ${LABELS.map((label, i) => `<td width='33%'><h4>${label}</h4>
-        <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video></td>`).join('')}
+        <div class='vid-wrap'><span id='badge${i}' class='vid-badge' style='display:none'></span>
+        <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video></div></td>`).join('')}
     </tr></tbody></table>`;
     const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));
 
-    // Sync: keep all three videos at the same playhead.
+    // Whether the current scene should loop (managed manually — NOT via v.loop — so that
+    // videos of different lengths don't fight each other through the sync handler).
+    let currentLoop = false;
+
+    // True while a collective restart is in flight (prevents re-entrant restart triggers).
+    let restarting = false;
+
+    // isEnded: a video counts as "done" once it reaches its natural end.
     const isEnded = v => v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
+
+    // Sync: keep playing videos at the same playhead.
+    // Clamp the target time to the destination video's duration so we never force
+    // a shorter video past its end via synchronisation.
     vids.forEach(v => {
-      v.addEventListener('timeupdate', () => vids.forEach(o => {
-        if (o !== v && !isEnded(o) && Math.abs(v.currentTime - o.currentTime) > 0.1) {
-          o.currentTime = v.currentTime;
-          if (o.paused) o.play();
-        }
-      }));
+      v.addEventListener('timeupdate', () => {
+        if (restarting) return;
+        vids.forEach(o => {
+          if (o === v || isEnded(o)) return;
+          const target = Number.isFinite(o.duration) ? Math.min(v.currentTime, o.duration) : v.currentTime;
+          if (Math.abs(target - o.currentTime) > 0.1) {
+            o.currentTime = target;
+            if (o.paused) o.play().catch(() => {});
+          }
+        });
+      });
+
+      // When a video ends: pause it and let the longer ones continue.
+      // Only restart the whole scene once ALL videos have finished.
       v.addEventListener('ended', () => {
         v.pause();
-        if (vids.every(isEnded)) { vids.forEach(v => { v.currentTime = 0; v.play(); }); }
+        if (!restarting && currentLoop && vids.every(isEnded)) {
+          restarting = true;
+          vids.forEach(v => { v.currentTime = 0; });
+          // Brief delay so all currentTime resets settle before we call play().
+          setTimeout(() => {
+            restarting = false;
+            vids.forEach(v => v.play().catch(() => {}));
+          }, 50);
+        }
       });
     });
 
     // Switch to a scene: swap sources, reload, play, and update ?selected query param.
-    function switchTo(i) {
-      vids.forEach(v => v.pause());
-      const { srcs, loop } = scenes[i];
-      vids.forEach((v, j) => { v.loop = loop; v.querySelector('source').src = srcs[j]; v.load(); v.play().catch(() => {}); });
-      document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === i));
-      // Minimal URL update without page reload.
+    function switchTo(idx) {
+      restarting = false;
+      vids.forEach(v => { v.pause(); v.loop = false; });   // never use native loop
+      const { srcs, loop, type } = scenes[idx];
+      currentLoop = loop;
+
+      // Update type badges
+      const badgeLabels = { replace: ['changed', 'changed', 'diff'], insert: ['(none)', 'added', 'added'], delete: ['removed', '(none)', 'removed'] };
+      const badgeTexts = badgeLabels[type] || ['', '', ''];
+      vids.forEach((v, j) => {
+        const badge = document.getElementById(`badge${j}`);
+        if (type && badgeTexts[j]) {
+          badge.textContent = badgeTexts[j];
+          badge.className = `vid-badge ${TYPE_BADGE[type] || ''}`;
+          badge.style.display = '';
+        } else {
+          badge.style.display = 'none';
+        }
+        v.querySelector('source').src = srcs[j];
+        v.load();
+        v.play().catch(() => {});
+      });
+
+      document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === idx));
       const newUrl = new URL(window.location);
-      i > 0 ? newUrl.searchParams.set('selected', i) : newUrl.searchParams.delete('selected');
+      idx > 0 ? newUrl.searchParams.set('selected', idx) : newUrl.searchParams.delete('selected');
       history.replaceState(null, '', newUrl);
     }
 
@@ -83,6 +151,7 @@ <h2>UI Diff</h2>
     if (scenes.length > 1) {
       scenes.forEach((s, i) => {
         const b = document.createElement('button');
+        if (s.type) b.classList.add(TYPE_NAV[s.type] || '');
         if (s.thumb) {
           const img = document.createElement('img');
           img.src = s.thumb;

From 1f399a090252d1ba5c1c5fe2a572385312948230 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 00:24:40 -0600
Subject: [PATCH 032/139] refactor: improve layout and styling of video badges
 in UI diff template

---
 selfdrive/ui/tests/diff/diff_template.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 4ed7dbf2076061..b480ead107a7bd 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -19,9 +19,11 @@
     #nav button.type-delete { border-color: #c0392b; }
     #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
     table.videos { width: 100%; }
-    .vid-wrap { position: relative; }
-    .vid-badge { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: 0.72rem; font-weight: 700;
-                 padding: 2px 6px; border-radius: 4px; pointer-events: none; }
+    .col-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 6px 0; }
+    .col-header h4 { margin: 0; font-size: 1rem; }
+    .vid-wrap { display: block; }
+    .vid-badge { position: relative; z-index: 2; font-size: 0.78rem; font-weight: 700;
+      padding: 4px 8px; border-radius: 4px; pointer-events: none; display: inline-block; }
     .badge-insert { background: #2a9d2a; color: #fff; }
     .badge-delete { background: #c0392b; color: #fff; }
     .badge-replace { background: #d4860a; color: #fff; }
@@ -68,9 +70,12 @@ <h2>UI Diff</h2>
 
     // Build the static 3-video player; badge spans are toggled per-scene.
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
-      ${LABELS.map((label, i) => `<td width='33%'><h4>${label}</h4>
-        <div class='vid-wrap'><span id='badge${i}' class='vid-badge' style='display:none'></span>
-        <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video></div></td>`).join('')}
+      ${LABELS.map((label, i) => `<td width='33%'>
+        <div class='col-header'><h4>${label}</h4><span id='badge${i}' class='vid-badge' style='display:none'></span></div>
+        <div class='vid-wrap'>
+          <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
+        </div>
+      </td>`).join('')}
     </tr></tbody></table>`;
     const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));
 

From 3c146f4352eaacad79d43efa679ecc6fb51ba09a Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 00:35:58 -0600
Subject: [PATCH 033/139] fix

---
 selfdrive/ui/tests/diff/diff_template.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index b480ead107a7bd..9815b96e36e9cb 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -156,7 +156,8 @@ <h2>UI Diff</h2>
     if (scenes.length > 1) {
       scenes.forEach((s, i) => {
         const b = document.createElement('button');
-        if (s.type) b.classList.add(TYPE_NAV[s.type] || '');
+        const navClass = TYPE_NAV[s.type];
+        if (navClass) b.classList.add(navClass);
         if (s.thumb) {
           const img = document.createElement('img');
           img.src = s.thumb;

From eaaa6a66819f16eaf153c9800c89d63bc01a6838 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 00:43:51 -0600
Subject: [PATCH 034/139] loop main

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 9815b96e36e9cb..85ef80dc36b183 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -49,7 +49,7 @@ <h2>UI Diff</h2>
     const TYPE_NAV   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
 
     const scenes = [
-      { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: false },
+      { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ start_frame, end_frame, duration, v1_count, v2_count, type, clips, thumb }, i) => {
         const icon = TYPE_ICON[type] || '';
         const counts = (type === 'insert')

From d0f7e46eaa369bb660116b5352f873305320dab7 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 00:47:00 -0600
Subject: [PATCH 035/139] feat: add 'none' badge style for explicit '(none)'
 labels in UI diff

---
 selfdrive/ui/tests/diff/diff_template.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 85ef80dc36b183..148d413489c1db 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -27,6 +27,7 @@
     .badge-insert { background: #2a9d2a; color: #fff; }
     .badge-delete { background: #c0392b; color: #fff; }
     .badge-replace { background: #d4860a; color: #fff; }
+    .badge-none { background: #9aa0a6; color: #fff; }
     @media (max-width: 800px) {
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; margin: 0.5em 0; }
       #nav button { width: 100%; }
@@ -135,7 +136,9 @@ <h2>UI Diff</h2>
         const badge = document.getElementById(`badge${j}`);
         if (type && badgeTexts[j]) {
           badge.textContent = badgeTexts[j];
-          badge.className = `vid-badge ${TYPE_BADGE[type] || ''}`;
+          // Use a grey 'none' badge when the label is explicitly '(none)'
+          const badgeClass = (badgeTexts[j] === '(none)') ? 'badge-none' : (TYPE_BADGE[type] || '');
+          badge.className = `vid-badge ${badgeClass}`.trim();
           badge.style.display = '';
         } else {
           badge.style.display = 'none';

From f9fe3f3a613d7be9043caf4d2edcd3404596d0bb Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 00:50:52 -0600
Subject: [PATCH 036/139] fix: adjust frame range in UI diff description to be
 1-based

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 148d413489c1db..9c1b67a701848d 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -60,7 +60,7 @@ <h2>UI Diff</h2>
             : (v1_count !== v2_count ? `${v1_count}→${v2_count}f` : `${duration}f`);
         return {
           title: `${icon} Group ${i + 1}`,
-          desc: `frames ${start_frame}–${end_frame} (${counts}, ${(Math.max(v1_count||0, v2_count||0) / 30.0).toFixed(2)}s)`,
+          desc: `frames ${start_frame + 1}–${end_frame + 1} (${counts}, ${(Math.max(v1_count||0, v2_count||0) / 30.0).toFixed(2)}s)`,
           type: type || '',
           srcs: [clips.video1, clips.video2, clips.diff],
           thumb: thumb || '',

From 585d418d47c1de35d4f32066f3c63c5e5e675182 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 01:06:29 -0600
Subject: [PATCH 037/139] improve

---
 selfdrive/ui/tests/diff/diff_template.html | 50 ++++++++++++++++------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 9c1b67a701848d..65d16226154de8 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -8,7 +8,7 @@
     body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
-    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; }
+    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; position: relative; }
     #nav button img { width: 100%; height: auto; display: block; }
     #nav button .nav-title { font-size: 0.82rem; padding-top: 0.3rem; text-align: center; font-weight: 600; }
     #nav button .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
@@ -19,6 +19,10 @@
     #nav button.type-delete { border-color: #c0392b; }
     #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
     table.videos { width: 100%; }
+    .nav-row { display: flex; align-items: center; gap: 8px; width: 100%; }
+    .nav-index { position: absolute; left: 8px; bottom: 6px; font-weight: 600; color: #777; font-size: 0.82rem; }
+    .nav-index.hidden { display: none; }
+    .nav-action { flex: 1; text-align: center; font-size: 0.92rem; font-weight: 600; color: #222; }
     .col-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 6px 0; }
     .col-header h4 { margin: 0; font-size: 1rem; }
     .vid-wrap { display: block; }
@@ -52,15 +56,21 @@ <h2>UI Diff</h2>
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ start_frame, end_frame, duration, v1_count, v2_count, type, clips, thumb }, i) => {
-        const icon = TYPE_ICON[type] || '';
-        const counts = (type === 'insert')
-          ? `+${v2_count}f`
-          : (type === 'delete')
-            ? `-${v1_count}f`
-            : (v1_count !== v2_count ? `${v1_count}→${v2_count}f` : `${duration}f`);
+        // Build an explicit action label like "12 Frames Added" / "8 Frames Removed" / "3→5 Frames Modified"
+        let actionText;
+        if (type === 'insert') {
+          actionText = `Added ${v2_count} frames`;
+        } else if (type === 'delete') {
+          actionText = `Removed ${v1_count} frames`;
+        } else if (type === 'replace') {
+          actionText = (v1_count === v2_count) ? `Modified ${v1_count} Frames` : `Modified ${v1_count}→${v2_count} Frames`;
+        } else {
+          actionText = `${Math.max(v1_count||0, v2_count||0)} Frames`;
+        }
         return {
-          title: `${icon} Group ${i + 1}`,
-          desc: `frames ${start_frame + 1}–${end_frame + 1} (${counts}, ${(Math.max(v1_count||0, v2_count||0) / 30.0).toFixed(2)}s)`,
+          idx: i + 1,
+          title: actionText || `Group ${i + 1}`,
+          desc: `frames ${start_frame + 1}–${end_frame + 1} (${(Math.max(v1_count||0, v2_count||0) / 30.0).toFixed(2)}s)`,
           type: type || '',
           srcs: [clips.video1, clips.video2, clips.diff],
           thumb: thumb || '',
@@ -167,14 +177,26 @@ <h2>UI Diff</h2>
           img.alt = s.title;
           b.appendChild(img);
         }
-        const title = document.createElement('span');
-        title.className = 'nav-title';
-        title.textContent = s.title;
+        const header = document.createElement('div');
+        header.className = 'nav-row';
+        const idxEl = document.createElement('span');
+        idxEl.className = 'nav-index';
+        if (s.idx) {
+          idxEl.textContent = s.idx + '.';
+        } else {
+          idxEl.classList.add('hidden');
+        }
+        const actionEl = document.createElement('span');
+        actionEl.className = 'nav-action';
+        const icon = TYPE_ICON[s.type] || '';
+        actionEl.textContent = (icon ? icon + ' ' : '') + s.title;
+        header.appendChild(actionEl);
+        header.appendChild(idxEl);
         const desc = document.createElement('span');
         desc.className = 'nav-desc';
         desc.textContent = s.desc || '';
-        b.title = (s.title + (s.desc ? ' — ' + s.desc : '')).trim();
-        b.appendChild(title);
+        b.title = ((s.title || '') + (s.desc ? ' — ' + s.desc : '')).trim();
+        b.appendChild(header);
         b.appendChild(desc);
         b.onclick = () => switchTo(i);
         navEl.appendChild(b);

From c12fbed483713bb1edf8dd4827e619a648282f04 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 01:12:51 -0600
Subject: [PATCH 038/139] update

---
 selfdrive/ui/tests/diff/diff_template.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 65d16226154de8..1b14940cc69bb9 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -56,14 +56,13 @@ <h2>UI Diff</h2>
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ start_frame, end_frame, duration, v1_count, v2_count, type, clips, thumb }, i) => {
-        // Build an explicit action label like "12 Frames Added" / "8 Frames Removed" / "3→5 Frames Modified"
         let actionText;
         if (type === 'insert') {
           actionText = `Added ${v2_count} frames`;
         } else if (type === 'delete') {
           actionText = `Removed ${v1_count} frames`;
         } else if (type === 'replace') {
-          actionText = (v1_count === v2_count) ? `Modified ${v1_count} Frames` : `Modified ${v1_count}→${v2_count} Frames`;
+          actionText = (v1_count === v2_count) ? `Changed ${v1_count} Frames` : `Changed ${v1_count}→${v2_count} Frames`;
         } else {
           actionText = `${Math.max(v1_count||0, v2_count||0)} Frames`;
         }

From ce53424bb731291dd33f79ace98394bc01f4df59 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 01:14:11 -0600
Subject: [PATCH 039/139] lowercase

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 1b14940cc69bb9..58d2e2a8dcdee1 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -62,7 +62,7 @@ <h2>UI Diff</h2>
         } else if (type === 'delete') {
           actionText = `Removed ${v1_count} frames`;
         } else if (type === 'replace') {
-          actionText = (v1_count === v2_count) ? `Changed ${v1_count} Frames` : `Changed ${v1_count}→${v2_count} Frames`;
+          actionText = (v1_count === v2_count) ? `Changed ${v1_count} frames` : `Changed ${v1_count}→${v2_count} frames`;
         } else {
           actionText = `${Math.max(v1_count||0, v2_count||0)} Frames`;
         }

From 0f44a8a7e9d7c048121ce5b2a813a5c295c6958e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Thu, 19 Feb 2026 01:18:22 -0600
Subject: [PATCH 040/139] fix: remove duration from UI diff description for
 clarity

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 58d2e2a8dcdee1..d757a9a1e9f2af 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -69,7 +69,7 @@ <h2>UI Diff</h2>
         return {
           idx: i + 1,
           title: actionText || `Group ${i + 1}`,
-          desc: `frames ${start_frame + 1}–${end_frame + 1} (${(Math.max(v1_count||0, v2_count||0) / 30.0).toFixed(2)}s)`,
+          desc: `frames ${start_frame + 1}–${end_frame + 1}`,
           type: type || '',
           srcs: [clips.video1, clips.video2, clips.diff],
           thumb: thumb || '',

From baf2b47776f73f39e43ff25f9165d665e7c6be8a Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 22:18:59 -0600
Subject: [PATCH 041/139] clean

---
 selfdrive/ui/tests/diff/diff_template.html | 39 +++++++++++-----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index d757a9a1e9f2af..ebfac724a01f3c 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -26,8 +26,7 @@
     .col-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 6px 0; }
     .col-header h4 { margin: 0; font-size: 1rem; }
     .vid-wrap { display: block; }
-    .vid-badge { position: relative; z-index: 2; font-size: 0.78rem; font-weight: 700;
-      padding: 4px 8px; border-radius: 4px; pointer-events: none; display: inline-block; }
+    .vid-badge { position: relative; z-index: 2; font-size: 0.78rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; pointer-events: none; display: inline-block; }
     .badge-insert { background: #2a9d2a; color: #fff; }
     .badge-delete { background: #c0392b; color: #fff; }
     .badge-replace { background: #d4860a; color: #fff; }
@@ -166,39 +165,39 @@ <h2>UI Diff</h2>
     // Build nav buttons (hide the nav entirely when there are no diff segments).
     const navEl = document.getElementById('nav');
     if (scenes.length > 1) {
-      scenes.forEach((s, i) => {
-        const b = document.createElement('button');
-        const navClass = TYPE_NAV[s.type];
-        if (navClass) b.classList.add(navClass);
-        if (s.thumb) {
+      scenes.forEach((scene, i) => {
+        const btn = document.createElement('button');
+        const navClass = TYPE_NAV[scene.type];
+        if (navClass) btn.classList.add(navClass);
+        if (scene.thumb) {
           const img = document.createElement('img');
-          img.src = s.thumb;
-          img.alt = s.title;
-          b.appendChild(img);
+          img.src = scene.thumb;
+          img.alt = scene.title;
+          btn.appendChild(img);
         }
         const header = document.createElement('div');
         header.className = 'nav-row';
         const idxEl = document.createElement('span');
         idxEl.className = 'nav-index';
-        if (s.idx) {
-          idxEl.textContent = s.idx + '.';
+        if (scene.idx) {
+          idxEl.textContent = scene.idx + '.';
         } else {
           idxEl.classList.add('hidden');
         }
         const actionEl = document.createElement('span');
         actionEl.className = 'nav-action';
-        const icon = TYPE_ICON[s.type] || '';
-        actionEl.textContent = (icon ? icon + ' ' : '') + s.title;
+        const icon = TYPE_ICON[scene.type] || '';
+        actionEl.textContent = (icon ? icon + ' ' : '') + scene.title;
         header.appendChild(actionEl);
         header.appendChild(idxEl);
         const desc = document.createElement('span');
         desc.className = 'nav-desc';
-        desc.textContent = s.desc || '';
-        b.title = ((s.title || '') + (s.desc ? ' — ' + s.desc : '')).trim();
-        b.appendChild(header);
-        b.appendChild(desc);
-        b.onclick = () => switchTo(i);
-        navEl.appendChild(b);
+        desc.textContent = scene.desc || '';
+        btn.title = ((scene.title || '') + (scene.desc ? ' — ' + scene.desc : '')).trim();
+        btn.appendChild(header);
+        btn.appendChild(desc);
+        btn.onclick = () => switchTo(i);
+        navEl.appendChild(btn);
       });
     } else {
       navEl.style.display = 'none';

From 673c25fccd22822577148e15f2406360915909b7 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 22:37:06 -0600
Subject: [PATCH 042/139] replace '(none)' with 'none'

---
 selfdrive/ui/tests/diff/diff_template.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index ebfac724a01f3c..83d0aa6fcdca50 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -138,14 +138,14 @@ <h2>UI Diff</h2>
       currentLoop = loop;
 
       // Update type badges
-      const badgeLabels = { replace: ['changed', 'changed', 'diff'], insert: ['(none)', 'added', 'added'], delete: ['removed', '(none)', 'removed'] };
+      const badgeLabels = { replace: ['changed', 'changed', 'diff'], insert: ['none', 'added', 'added'], delete: ['removed', 'none', 'removed'] };
       const badgeTexts = badgeLabels[type] || ['', '', ''];
       vids.forEach((v, j) => {
         const badge = document.getElementById(`badge${j}`);
         if (type && badgeTexts[j]) {
           badge.textContent = badgeTexts[j];
-          // Use a grey 'none' badge when the label is explicitly '(none)'
-          const badgeClass = (badgeTexts[j] === '(none)') ? 'badge-none' : (TYPE_BADGE[type] || '');
+          // Use a grey 'none' badge when the label is explicitly 'none'
+          const badgeClass = (badgeTexts[j] === 'none') ? 'badge-none' : (TYPE_BADGE[type] || '');
           badge.className = `vid-badge ${badgeClass}`.trim();
           badge.style.display = '';
         } else {

From 40ccb19258129945445605c692f0d09d73a0a542 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 22:57:59 -0600
Subject: [PATCH 043/139] update

---
 selfdrive/ui/tests/diff/diff.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 7410352c767d6e..d532fa81298efd 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -13,9 +13,9 @@
 DIFF_OUT_DIR = Path(BASEDIR) / "selfdrive" / "ui" / "tests" / "diff" / "report"
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
-CLIP_PADDING_BEFORE = 30  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 30  # extra frames of context to include after each chunk
-CHUNK_FRAME_GAP_TOLERANCE = 60  # allow up to this many identical frames between diffs in a single chunk
+CLIP_PADDING_BEFORE = 0  # extra frames of context to include before each chunk
+CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
+CHUNK_FRAME_GAP_TOLERANCE = -1  # allow up to this many identical frames between diffs in a single chunk
 
 
 def extract_framehashes(video_path):
@@ -60,7 +60,7 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
     v1_start, v1_end, v1_count  – frame range in video 1 (count == 0 for 'insert')
     v2_start, v2_end, v2_count  – frame range in video 2 (count == 0 for 'delete')
   """
-  matcher = difflib.SequenceMatcher(None, hashes1, hashes2, autojunk=False)
+  matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
 
   # Collect only the non-equal opcodes as mutable lists for merging.
   diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']

From 60b4e2777f769f9d2bb5e8d6a51d3fa35905fee3 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:07:28 -0600
Subject: [PATCH 044/139] frames label

---
 selfdrive/ui/tests/diff/diff_template.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 83d0aa6fcdca50..50c44df23f783c 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -52,23 +52,25 @@ <h2>UI Diff</h2>
     const TYPE_BADGE = { replace: 'badge-replace', insert: 'badge-insert', delete: 'badge-delete' };
     const TYPE_NAV   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
 
+    const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
+
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ start_frame, end_frame, duration, v1_count, v2_count, type, clips, thumb }, i) => {
         let actionText;
         if (type === 'insert') {
-          actionText = `Added ${v2_count} frames`;
+          actionText = `Added ${frames_label(v2_count)}`;
         } else if (type === 'delete') {
-          actionText = `Removed ${v1_count} frames`;
+          actionText = `Removed ${frames_label(v1_count)}`;
         } else if (type === 'replace') {
-          actionText = (v1_count === v2_count) ? `Changed ${v1_count} frames` : `Changed ${v1_count}→${v2_count} frames`;
+          actionText = (v1_count === v2_count) ? `Changed ${frames_label(v1_count)}` : `Changed ${v1_count}→${v2_count} frames`;
         } else {
-          actionText = `${Math.max(v1_count||0, v2_count||0)} Frames`;
+          actionText = frames_label(Math.max(v1_count||0, v2_count||0));
         }
         return {
           idx: i + 1,
           title: actionText || `Group ${i + 1}`,
-          desc: `frames ${start_frame + 1}–${end_frame + 1}`,
+          desc: start_frame === end_frame ? `frame ${start_frame + 1}` : `frames ${start_frame + 1}–${end_frame + 1}`,
           type: type || '',
           srcs: [clips.video1, clips.video2, clips.diff],
           thumb: thumb || '',

From 8f50920f9be42d1e6bdbc145b73d2cf574c4e769 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:20:09 -0600
Subject: [PATCH 045/139] bolder selected border

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 50c44df23f783c..d51c562254761f 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -12,7 +12,7 @@
     #nav button img { width: 100%; height: auto; display: block; }
     #nav button .nav-title { font-size: 0.82rem; padding-top: 0.3rem; text-align: center; font-weight: 600; }
     #nav button .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
-    #nav button.active { border-color: #0078d4; background: #e5f2fc; }
+    #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
     #nav button.active .nav-title { color: #0078d4; }
     #nav button.type-insert { border-color: #2a9d2a; }
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }

From fe34a5afc61b4b425ff72c197043a8322b658891 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:31:53 -0600
Subject: [PATCH 046/139] remove CHUNK_FRAME_GAP_TOLERANCE and merging code

---
 selfdrive/ui/tests/diff/diff.py | 25 ++-----------------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index d532fa81298efd..c19e464f5cc7be 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -15,7 +15,6 @@
 
 CLIP_PADDING_BEFORE = 0  # extra frames of context to include before each chunk
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
-CHUNK_FRAME_GAP_TOLERANCE = -1  # allow up to this many identical frames between diffs in a single chunk
 
 
 def extract_framehashes(video_path):
@@ -52,14 +51,7 @@ def find_differences(video1, video2) -> tuple[list[str], list[str]]:
 
 
 def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
-  """
-  Use SequenceMatcher to produce a proper diff (handles mid-video insertions/deletions).
-  Nearby non-equal opcodes are merged so that small identical stretches don't create
-  excessive fragmentation. Each returned chunk has:
-    type        – 'replace' | 'insert' | 'delete'
-    v1_start, v1_end, v1_count  – frame range in video 1 (count == 0 for 'insert')
-    v2_start, v2_end, v2_count  – frame range in video 2 (count == 0 for 'delete')
-  """
+  # Use SequenceMatcher to produce a proper diff (handles mid-video insertions/deletions).
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
 
   # Collect only the non-equal opcodes as mutable lists for merging.
@@ -68,21 +60,8 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
   if not diff_ops:
     return []
 
-  # Merge nearby ops: if the gap (in equal frames) between two consecutive ops is
-  # small enough in BOTH videos, fold them into one 'replace' op.
-  merged: list[list] = [diff_ops[0]]
-  for op in diff_ops[1:]:
-    prev = merged[-1]
-    gap_v1 = op[1] - prev[2]   # equal frames between ops in video 1
-    gap_v2 = op[3] - prev[4]   # equal frames between ops in video 2
-    if max(gap_v1, gap_v2) <= CHUNK_FRAME_GAP_TOLERANCE:
-      # Absorb this op into previous, widening both ranges.
-      merged[-1] = ['replace', prev[1], op[2], prev[3], op[4]]
-    else:
-      merged.append(op)
-
   chunks = []
-  for tag, i1, i2, j1, j2 in merged:
+  for tag, i1, i2, j1, j2 in diff_ops:
     chunks.append({
       'type': tag,
       'v1_start': i1, 'v1_end': i2 - 1, 'v1_count': i2 - i1,

From c9807f0ee2f82fc8b6131b55ae4464f0cf33a147 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:32:50 -0600
Subject: [PATCH 047/139] clarify

---
 selfdrive/ui/tests/diff/diff.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index c19e464f5cc7be..3e126678ac63f1 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -53,13 +53,9 @@ def find_differences(video1, video2) -> tuple[list[str], list[str]]:
 def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
   # Use SequenceMatcher to produce a proper diff (handles mid-video insertions/deletions).
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
-
-  # Collect only the non-equal opcodes as mutable lists for merging.
+  # Collect only the non-equal opcodes
   diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']
-
-  if not diff_ops:
-    return []
-
+  # Create chunks with frame ranges and counts for each video
   chunks = []
   for tag, i1, i2, j1, j2 in diff_ops:
     chunks.append({

From 4bbeb25574709c34ee92ae454e89e6d11b931132 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:33:32 -0600
Subject: [PATCH 048/139] docs

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 3e126678ac63f1..e3b339d0a7058d 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -51,7 +51,7 @@ def find_differences(video1, video2) -> tuple[list[str], list[str]]:
 
 
 def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
-  # Use SequenceMatcher to produce a proper diff (handles mid-video insertions/deletions).
+  """Use difflib to compute diff chunks from the two hash lists. Returns a list of dicts with chunk info."""
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
   # Collect only the non-equal opcodes
   diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']

From f4f47ebaca30a0ef60fd056cec074300d04e5230 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:34:39 -0600
Subject: [PATCH 049/139] reduce diff

---
 selfdrive/ui/tests/diff/diff.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index e3b339d0a7058d..73ba55705c5cea 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -32,9 +32,9 @@ def extract_framehashes(video_path):
 
 
 def create_diff_video(video1, video2, output_path):
-  """Create a diff video using ffmpeg blend filter with difference mode (covers the common-length prefix)."""
+  """Create a diff video using ffmpeg blend filter with difference mode."""
   print("Creating diff video...")
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
+  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
   subprocess.run(cmd, capture_output=True, check=True)
 
 

From 74250fba4ed6c04f9f6b2558ea7a89f244b35c94 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:39:38 -0600
Subject: [PATCH 050/139] create Chunk dataclass for types

---
 selfdrive/ui/tests/diff/diff.py | 41 ++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 73ba55705c5cea..1bd40dfaebe1f6 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -7,6 +7,8 @@
 import subprocess
 import webbrowser
 import argparse
+from dataclasses import dataclass
+from typing import Literal
 from pathlib import Path
 from openpilot.common.basedir import BASEDIR
 
@@ -50,25 +52,36 @@ def find_differences(video1, video2) -> tuple[list[str], list[str]]:
   return hashes1, hashes2
 
 
-def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[dict]:
-  """Use difflib to compute diff chunks from the two hash lists. Returns a list of dicts with chunk info."""
+@dataclass
+class Chunk:
+  type: Literal['replace', 'insert', 'delete']
+  v1_start: int
+  v1_end: int
+  v1_count: int
+  v2_start: int
+  v2_end: int
+  v2_count: int
+
+
+def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
+  """Use difflib to compute diff chunks from the two hash lists. Returns a list of Chunk objects."""
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
   # Collect only the non-equal opcodes
   diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']
   # Create chunks with frame ranges and counts for each video
-  chunks = []
+  chunks: list[Chunk] = []
   for tag, i1, i2, j1, j2 in diff_ops:
-    chunks.append({
-      'type': tag,
-      'v1_start': i1, 'v1_end': i2 - 1, 'v1_count': i2 - i1,
-      'v2_start': j1, 'v2_end': j2 - 1, 'v2_count': j2 - j1,
-    })
+    chunks.append(Chunk(
+      type=tag,
+      v1_start=i1, v1_end=i2 - 1, v1_count=i2 - i1,
+      v2_start=j1, v2_end=j2 - 1, v2_count=j2 - j1,
+    ))
   return chunks
 
 
-def count_different_frames(chunks: list[dict]) -> int:
+def count_different_frames(chunks: list[Chunk]) -> int:
   """Return a headline 'different frame' count for the summary."""
-  return sum(max(c['v1_count'], c['v2_count']) for c in chunks)
+  return sum(max(c.v1_count, c.v2_count) for c in chunks)
 
 
 def get_video_info(video_path: str) -> tuple[float, int, int]:
@@ -123,7 +136,7 @@ def extract_chunk_clips(
   video1: str,
   video2: str,
   diff_video: str,
-  chunks: list[dict],
+  chunks: list[Chunk],
   fps: float,
   width: int,
   height: int,
@@ -137,9 +150,9 @@ def extract_chunk_clips(
   n = len(chunks)
 
   for i, chunk in enumerate(chunks):
-    chunk_type = chunk['type']   # 'replace' | 'insert' | 'delete'
-    v1_start, v1_end, v1_count = chunk['v1_start'], chunk['v1_end'], chunk['v1_count']
-    v2_start, v2_end, v2_count = chunk['v2_start'], chunk['v2_end'], chunk['v2_count']
+    chunk_type = chunk.type
+    v1_start, v1_end, v1_count = chunk.v1_start, chunk.v1_end, chunk.v1_count
+    v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count
     clips: dict[str, str] = {}
 
     def _rel(p: Path) -> str:

From 13e4a0f7a27512157219689e80429cfc074e6e29 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 20 Feb 2026 23:41:56 -0600
Subject: [PATCH 051/139] add divider

---
 selfdrive/ui/tests/diff/diff_template.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index d51c562254761f..a67e4933477c88 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -43,6 +43,7 @@
   <h2>UI Diff</h2>
   <p><strong>Results:</strong> $RESULT_TEXT</p>
   <div id='player'></div>
+  <hr>
   <div id='nav'></div>
   <script>
     const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];

From 5e317cdd0be9a3c8fae77605bfb844853b01fc81 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 00:12:10 -0600
Subject: [PATCH 052/139] don't extract black clips or copy diffs

---
 selfdrive/ui/tests/diff/diff.py            | 63 ++++++----------------
 selfdrive/ui/tests/diff/diff_template.html | 35 ++++++++----
 2 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 1bd40dfaebe1f6..bdaa73e42ad011 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -2,7 +2,6 @@
 import difflib
 import json
 import os
-import shutil
 import sys
 import subprocess
 import webbrowser
@@ -84,30 +83,17 @@ def count_different_frames(chunks: list[Chunk]) -> int:
   return sum(max(c.v1_count, c.v2_count) for c in chunks)
 
 
-def get_video_info(video_path: str) -> tuple[float, int, int]:
-  """Return (fps, width, height) for a video file."""
+def get_video_fps(video_path: str) -> float:
+  """Return fps for a video file."""
   cmd = [
     'ffprobe', '-v', 'error', '-select_streams', 'v:0',
-    '-show_entries', 'stream=r_frame_rate,width,height',
+    '-show_entries', 'stream=r_frame_rate',
     '-of', 'json', str(video_path),
   ]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   info = json.loads(result.stdout)['streams'][0]
   num, den = info['r_frame_rate'].split('/')
-  fps = int(num) / int(den)
-  return fps, int(info['width']), int(info['height'])
-
-
-def create_black_clip(output_path: str, width: int, height: int, fps: float, num_frames: int) -> None:
-  """Generate a solid-black video clip (used as a placeholder for insert/delete lanes)."""
-  duration = num_frames / fps
-  cmd = [
-    'ffmpeg', '-hide_banner', '-loglevel', 'error',
-    '-f', 'lavfi', '-i', f'color=c=black:size={width}x{height}:rate={fps}',
-    '-t', f'{duration:.6f}', '-frames:v', str(num_frames),
-    '-y', output_path,
-  ]
-  subprocess.run(cmd, capture_output=True, check=True)
+  return int(num) / int(den)
 
 
 def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> int:
@@ -138,8 +124,6 @@ def extract_chunk_clips(
   diff_video: str,
   chunks: list[Chunk],
   fps: float,
-  width: int,
-  height: int,
   output_dir: Path,
 ) -> list[dict]:
   """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
@@ -153,7 +137,7 @@ def extract_chunk_clips(
     chunk_type = chunk.type
     v1_start, v1_end, v1_count = chunk.v1_start, chunk.v1_end, chunk.v1_count
     v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count
-    clips: dict[str, str] = {}
+    clips: dict[str, str | None] = {'video1': None, 'video2': None, 'diff': None}
 
     def _rel(p: Path) -> str:
       return os.path.join(folder_name, p.name)
@@ -162,28 +146,15 @@ def _rel(p: Path) -> str:
     v1_clip = chunk_dir / f"{i:03d}_video1.mp4"
     if chunk_type != 'insert':
       print(f"  Chunk {i + 1}/{n} (v1/{chunk_type}) frames {v1_start}-{v1_end}")
-      v1_frames = extract_clip(video1, v1_start, v1_end, str(v1_clip), fps)
-    else:
-      # Pure insertion: video1 has nothing here — generate a black placeholder of
-      # the same total length as the video2 clip (content + padding).
-      padding = min(v2_start, CLIP_PADDING_BEFORE)
-      v1_frames = padding + v2_count + CLIP_PADDING_AFTER
-      print(f"  Chunk {i + 1}/{n} (v1/insert-placeholder) {v1_frames} black frames")
-      create_black_clip(str(v1_clip), width, height, fps, v1_frames)
-    clips['video1'] = _rel(v1_clip)
+      extract_clip(video1, v1_start, v1_end, str(v1_clip), fps)
+      clips['video1'] = _rel(v1_clip)
 
     # --- video2 clip ---
     v2_clip = chunk_dir / f"{i:03d}_video2.mp4"
     if chunk_type != 'delete':
       print(f"  Chunk {i + 1}/{n} (v2/{chunk_type}) frames {v2_start}-{v2_end}")
-      v2_frames = extract_clip(video2, v2_start, v2_end, str(v2_clip), fps)
-    else:
-      # Pure deletion: video2 has nothing here.
-      padding = min(v1_start, CLIP_PADDING_BEFORE)
-      v2_frames = padding + v1_count + CLIP_PADDING_AFTER
-      print(f"  Chunk {i + 1}/{n} (v2/delete-placeholder) {v2_frames} black frames")
-      create_black_clip(str(v2_clip), width, height, fps, v2_frames)
-    clips['video2'] = _rel(v2_clip)
+      extract_clip(video2, v2_start, v2_end, str(v2_clip), fps)
+      clips['video2'] = _rel(v2_clip)
 
     # --- diff/highlight clip ---
     diff_clip = chunk_dir / f"{i:03d}_diff.mp4"
@@ -196,12 +167,7 @@ def _rel(p: Path) -> str:
         '-vsync', '0', '-y', str(diff_clip),
       ]
       subprocess.run(cmd, capture_output=True, check=True)
-    elif chunk_type == 'delete':
-      shutil.copy(str(v1_clip), str(diff_clip))   # show what was removed
-    else:  # insert
-      shutil.copy(str(v2_clip), str(diff_clip))   # show what was added
-
-    clips['diff'] = _rel(diff_clip)
+      clips['diff'] = _rel(diff_clip)
 
     # --- thumbnail (middle frame of the diff content inside the clip) ---
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
@@ -209,8 +175,9 @@ def _rel(p: Path) -> str:
     thumb_frame_in_clip = padding_used + content_count // 2
     thumb_name = f"{i:03d}_thumb.png"
     thumb_path = chunk_dir / thumb_name
+    thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
     print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
-    generate_thumbnail(str(diff_clip), thumb_frame_in_clip, str(thumb_path), fps)
+    generate_thumbnail(str(thumb_source), thumb_frame_in_clip, str(thumb_path), fps)
 
     # Headline frame numbers for the report (expressed in video1 coordinates where
     # possible, video2 for pure inserts).
@@ -253,7 +220,7 @@ def generate_html_report(
   processed_sets = [
     {
       **cs,
-      'clips': {k: os.path.join(basedir, v) if basedir else v for k, v in cs['clips'].items()},
+      'clips': {k: (os.path.join(basedir, v) if (basedir and v) else v) for k, v in cs['clips'].items()},
       'thumb': os.path.join(basedir, cs['thumb']) if (basedir and cs.get('thumb')) else cs.get('thumb', ''),
     }
     for cs in (clip_sets or [])
@@ -311,8 +278,8 @@ def main():
   clip_sets = []
   if chunks:
     print(f"\nExtracting {len(chunks)} different section(s)...")
-    fps, width, height = get_video_info(args.video1)
-    clip_sets = extract_chunk_clips(args.video1, args.video2, diff_video_path, chunks, fps, width, height, DIFF_OUT_DIR)
+    fps = get_video_fps(args.video1)
+    clip_sets = extract_chunk_clips(args.video1, args.video2, diff_video_path, chunks, fps, DIFF_OUT_DIR)
 
   print()
   print("Generating HTML report...")
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index a67e4933477c88..831f67076eb564 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -26,6 +26,7 @@
     .col-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 6px 0; }
     .col-header h4 { margin: 0; font-size: 1rem; }
     .vid-wrap { display: block; }
+    .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; border-radius: 4px; background: #fafafa; color: #666; font-size: 0.95rem; align-items: center; justify-content: center; text-align: center; }
     .vid-badge { position: relative; z-index: 2; font-size: 0.78rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; pointer-events: none; display: inline-block; }
     .badge-insert { background: #2a9d2a; color: #fff; }
     .badge-delete { background: #c0392b; color: #fff; }
@@ -86,10 +87,13 @@ <h2>UI Diff</h2>
         <div class='col-header'><h4>${label}</h4><span id='badge${i}' class='vid-badge' style='display:none'></span></div>
         <div class='vid-wrap'>
           <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
+          <div id='nv${i}' class='no-video'>No video</div>
         </div>
       </td>`).join('')}
     </tr></tbody></table>`;
     const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));
+    const noVideoEls = [0, 1, 2].map(i => document.getElementById(`nv${i}`));
+    let active = [true, true, true];
 
     // Whether the current scene should loop (managed manually — NOT via v.loop — so that
     // videos of different lengths don't fight each other through the sync handler).
@@ -99,16 +103,16 @@ <h2>UI Diff</h2>
     let restarting = false;
 
     // isEnded: a video counts as "done" once it reaches its natural end.
-    const isEnded = v => v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
+    const isEnded = (v, i) => !active[i] || v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
 
     // Sync: keep playing videos at the same playhead.
     // Clamp the target time to the destination video's duration so we never force
     // a shorter video past its end via synchronisation.
-    vids.forEach(v => {
+    vids.forEach((v, vi) => {
       v.addEventListener('timeupdate', () => {
-        if (restarting) return;
-        vids.forEach(o => {
-          if (o === v || isEnded(o)) return;
+        if (restarting || !active[vi]) return;
+        vids.forEach((o, oi) => {
+          if (o === v || !active[oi] || isEnded(o, oi)) return;
           const target = Number.isFinite(o.duration) ? Math.min(v.currentTime, o.duration) : v.currentTime;
           if (Math.abs(target - o.currentTime) > 0.1) {
             o.currentTime = target;
@@ -120,14 +124,15 @@ <h2>UI Diff</h2>
       // When a video ends: pause it and let the longer ones continue.
       // Only restart the whole scene once ALL videos have finished.
       v.addEventListener('ended', () => {
+        if (!active[vi]) return;
         v.pause();
-        if (!restarting && currentLoop && vids.every(isEnded)) {
+        if (!restarting && currentLoop && vids.every((x, i) => isEnded(x, i))) {
           restarting = true;
-          vids.forEach(v => { v.currentTime = 0; });
+          vids.forEach((x, i) => { if (active[i]) x.currentTime = 0; });
           // Brief delay so all currentTime resets settle before we call play().
           setTimeout(() => {
             restarting = false;
-            vids.forEach(v => v.play().catch(() => {}));
+            vids.forEach((x, i) => { if (active[i]) x.play().catch(() => {}); });
           }, 50);
         }
       });
@@ -145,6 +150,8 @@ <h2>UI Diff</h2>
       const badgeTexts = badgeLabels[type] || ['', '', ''];
       vids.forEach((v, j) => {
         const badge = document.getElementById(`badge${j}`);
+        const src = srcs[j];
+        active[j] = !!src;
         if (type && badgeTexts[j]) {
           badge.textContent = badgeTexts[j];
           // Use a grey 'none' badge when the label is explicitly 'none'
@@ -154,9 +161,17 @@ <h2>UI Diff</h2>
         } else {
           badge.style.display = 'none';
         }
-        v.querySelector('source').src = srcs[j];
+        const source = v.querySelector('source');
+        source.src = src || '';
         v.load();
-        v.play().catch(() => {});
+        if (active[j]) {
+          v.style.display = '';
+          noVideoEls[j].style.display = 'none';
+          v.play().catch(() => {});
+        } else {
+          v.style.display = 'none';
+          noVideoEls[j].style.display = 'flex';
+        }
       });
 
       document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === idx));

From a756d8e05237939f5a9ddcb8cc82b076fe09b390 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 00:12:20 -0600
Subject: [PATCH 053/139] refactor

---
 selfdrive/ui/tests/diff/diff.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index bdaa73e42ad011..32c41704f94c56 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -173,8 +173,7 @@ def _rel(p: Path) -> str:
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
     thumb_frame_in_clip = padding_used + content_count // 2
-    thumb_name = f"{i:03d}_thumb.png"
-    thumb_path = chunk_dir / thumb_name
+    thumb_path = chunk_dir / f"{i:03d}_thumb.png"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
     print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
     generate_thumbnail(str(thumb_source), thumb_frame_in_clip, str(thumb_path), fps)

From 4dcd6a1007e56104e71903dce32afc1b6b2bd4f8 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 00:19:54 -0600
Subject: [PATCH 054/139] remove badges

---
 selfdrive/ui/tests/diff/diff_template.html | 23 ++--------------------
 1 file changed, 2 insertions(+), 21 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 831f67076eb564..190e23f3a39473 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -27,11 +27,6 @@
     .col-header h4 { margin: 0; font-size: 1rem; }
     .vid-wrap { display: block; }
     .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; border-radius: 4px; background: #fafafa; color: #666; font-size: 0.95rem; align-items: center; justify-content: center; text-align: center; }
-    .vid-badge { position: relative; z-index: 2; font-size: 0.78rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; pointer-events: none; display: inline-block; }
-    .badge-insert { background: #2a9d2a; color: #fff; }
-    .badge-delete { background: #c0392b; color: #fff; }
-    .badge-replace { background: #d4860a; color: #fff; }
-    .badge-none { background: #9aa0a6; color: #fff; }
     @media (max-width: 800px) {
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; margin: 0.5em 0; }
       #nav button { width: 100%; }
@@ -51,7 +46,6 @@ <h2>UI Diff</h2>
     const chunks = $CHUNKS_JSON;
 
     const TYPE_ICON  = { replace: '✏️', insert: '➕', delete: '➖' };
-    const TYPE_BADGE = { replace: 'badge-replace', insert: 'badge-insert', delete: 'badge-delete' };
     const TYPE_NAV   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
 
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
@@ -81,10 +75,10 @@ <h2>UI Diff</h2>
       }),
     ];
 
-    // Build the static 3-video player; badge spans are toggled per-scene.
+    // Build the static 3-video player layout
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
       ${LABELS.map((label, i) => `<td width='33%'>
-        <div class='col-header'><h4>${label}</h4><span id='badge${i}' class='vid-badge' style='display:none'></span></div>
+        <div class='col-header'><h4>${label}</h4></div>
         <div class='vid-wrap'>
           <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
           <div id='nv${i}' class='no-video'>No video</div>
@@ -145,22 +139,9 @@ <h2>UI Diff</h2>
       const { srcs, loop, type } = scenes[idx];
       currentLoop = loop;
 
-      // Update type badges
-      const badgeLabels = { replace: ['changed', 'changed', 'diff'], insert: ['none', 'added', 'added'], delete: ['removed', 'none', 'removed'] };
-      const badgeTexts = badgeLabels[type] || ['', '', ''];
       vids.forEach((v, j) => {
-        const badge = document.getElementById(`badge${j}`);
         const src = srcs[j];
         active[j] = !!src;
-        if (type && badgeTexts[j]) {
-          badge.textContent = badgeTexts[j];
-          // Use a grey 'none' badge when the label is explicitly 'none'
-          const badgeClass = (badgeTexts[j] === 'none') ? 'badge-none' : (TYPE_BADGE[type] || '');
-          badge.className = `vid-badge ${badgeClass}`.trim();
-          badge.style.display = '';
-        } else {
-          badge.style.display = 'none';
-        }
         const source = v.querySelector('source');
         source.src = src || '';
         v.load();

From 589dab444208e86ec04ee849df29c80f690e8a38 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 00:23:39 -0600
Subject: [PATCH 055/139] rename TYPE_NAV to TYPE_NAV_CLASSES for clarity

---
 selfdrive/ui/tests/diff/diff_template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 190e23f3a39473..3dcaeec4ef4d57 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -46,7 +46,7 @@ <h2>UI Diff</h2>
     const chunks = $CHUNKS_JSON;
 
     const TYPE_ICON  = { replace: '✏️', insert: '➕', delete: '➖' };
-    const TYPE_NAV   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
+    const TYPE_NAV_CLASSES   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
 
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
 
@@ -166,7 +166,7 @@ <h2>UI Diff</h2>
     if (scenes.length > 1) {
       scenes.forEach((scene, i) => {
         const btn = document.createElement('button');
-        const navClass = TYPE_NAV[scene.type];
+        const navClass = TYPE_NAV_CLASSES[scene.type];
         if (navClass) btn.classList.add(navClass);
         if (scene.thumb) {
           const img = document.createElement('img');

From 4b1d2afa12ebde79260f620497454256f50e72ea Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 00:39:14 -0600
Subject: [PATCH 056/139] cleanup styles

---
 selfdrive/ui/tests/diff/diff_template.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3dcaeec4ef4d57..5da7ff6badc485 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -10,8 +10,6 @@
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
     #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; position: relative; }
     #nav button img { width: 100%; height: auto; display: block; }
-    #nav button .nav-title { font-size: 0.82rem; padding-top: 0.3rem; text-align: center; font-weight: 600; }
-    #nav button .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
     #nav button.active .nav-title { color: #0078d4; }
     #nav button.type-insert { border-color: #2a9d2a; }
@@ -22,10 +20,10 @@
     .nav-row { display: flex; align-items: center; gap: 8px; width: 100%; }
     .nav-index { position: absolute; left: 8px; bottom: 6px; font-weight: 600; color: #777; font-size: 0.82rem; }
     .nav-index.hidden { display: none; }
-    .nav-action { flex: 1; text-align: center; font-size: 0.92rem; font-weight: 600; color: #222; }
+    .nav-action { flex: 1; text-align: center; font-size: 0.86rem; font-weight: 600; color: #222; }
+    .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
     .col-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 6px 0; }
     .col-header h4 { margin: 0; font-size: 1rem; }
-    .vid-wrap { display: block; }
     .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; border-radius: 4px; background: #fafafa; color: #666; font-size: 0.95rem; align-items: center; justify-content: center; text-align: center; }
     @media (max-width: 800px) {
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; margin: 0.5em 0; }
@@ -45,9 +43,6 @@ <h2>UI Diff</h2>
     const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];
     const chunks = $CHUNKS_JSON;
 
-    const TYPE_ICON  = { replace: '✏️', insert: '➕', delete: '➖' };
-    const TYPE_NAV_CLASSES   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
-
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
 
     const scenes = [
@@ -79,7 +74,7 @@ <h2>UI Diff</h2>
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
       ${LABELS.map((label, i) => `<td width='33%'>
         <div class='col-header'><h4>${label}</h4></div>
-        <div class='vid-wrap'>
+        <div>
           <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
           <div id='nv${i}' class='no-video'>No video</div>
         </div>
@@ -161,6 +156,9 @@ <h2>UI Diff</h2>
       history.replaceState(null, '', newUrl);
     }
 
+    const TYPE_ICON  = { replace: '✏️', insert: '➕', delete: '➖' };
+    const TYPE_NAV_CLASSES   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
+
     // Build nav buttons (hide the nav entirely when there are no diff segments).
     const navEl = document.getElementById('nav');
     if (scenes.length > 1) {

From 4de0b7691f928f893d1fcdd5ddb505270056caae Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 12:24:54 -0600
Subject: [PATCH 057/139] show explicit frame ranges for clarity

---
 selfdrive/ui/tests/diff/diff.py            | 12 ++----
 selfdrive/ui/tests/diff/diff_template.html | 47 ++++++++++++++++------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 32c41704f94c56..9c5f4cee53ac6f 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -178,16 +178,12 @@ def _rel(p: Path) -> str:
     print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
     generate_thumbnail(str(thumb_source), thumb_frame_in_clip, str(thumb_path), fps)
 
-    # Headline frame numbers for the report (expressed in video1 coordinates where
-    # possible, video2 for pure inserts).
-    display_start = v1_start if chunk_type != 'insert' else v2_start
-    display_end   = v1_end   if chunk_type != 'insert' else v2_end
-
     clip_sets.append({
       'type': chunk_type,
-      'start_frame': display_start,
-      'end_frame': display_end,
-      'duration': max(v1_count, v2_count),
+      'v1_start': v1_start,
+      'v1_end': v1_end,
+      'v2_start': v2_start,
+      'v2_end': v2_end,
       'v1_count': v1_count,
       'v2_count': v2_count,
       'clips': clips,
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 5da7ff6badc485..09b6f9fec50365 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -44,10 +44,13 @@ <h2>UI Diff</h2>
     const chunks = $CHUNKS_JSON;
 
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
+    const frames_range_label = (prefix, start, end) =>
+      prefix + (start === end ? `frame ${start + 1}` : `frames ${start + 1}–${end + 1}`);
+    const video_frames_range_label = (v, start, end) => frames_range_label(`${v}: `, start, end);
 
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
-      ...chunks.map(({ start_frame, end_frame, duration, v1_count, v2_count, type, clips, thumb }, i) => {
+      ...chunks.map(({ v1_start, v1_end, v2_start, v2_end, v1_count, v2_count, type, clips, thumb }, i) => {
         let actionText;
         if (type === 'insert') {
           actionText = `Added ${frames_label(v2_count)}`;
@@ -56,12 +59,30 @@ <h2>UI Diff</h2>
         } else if (type === 'replace') {
           actionText = (v1_count === v2_count) ? `Changed ${frames_label(v1_count)}` : `Changed ${v1_count}→${v2_count} frames`;
         } else {
-          actionText = frames_label(Math.max(v1_count||0, v2_count||0));
+          actionText = frames_label(Math.max(v1_count || 0, v2_count || 0));
         }
+
+        // Build a clear description with explicit per-video ranges.
+        let desc = '';
+        if (type === 'insert') {
+          desc = video_frames_range_label('video2', v2_start, v2_end);
+        } else if (type === 'delete') {
+          desc = video_frames_range_label('video1', v1_start, v1_end);
+        } else if (type === 'replace') {
+          const a = video_frames_range_label('video1', v1_start, v1_end);
+          const b = video_frames_range_label('video2', v2_start, v2_end);
+          desc = `${a} → ${b}`;
+        } else {
+          const parts = [];
+          if (v1_count) parts.push(video_frames_range_label('video1', v1_start, v1_end));
+          if (v2_count) parts.push(video_frames_range_label('video2', v2_start, v2_end));
+          desc = parts.join(' | ');
+        }
+
         return {
           idx: i + 1,
           title: actionText || `Group ${i + 1}`,
-          desc: start_frame === end_frame ? `frame ${start_frame + 1}` : `frames ${start_frame + 1}–${end_frame + 1}`,
+          desc: desc,
           type: type || '',
           srcs: [clips.video1, clips.video2, clips.diff],
           thumb: thumb || '',
@@ -72,14 +93,14 @@ <h2>UI Diff</h2>
 
     // Build the static 3-video player layout
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
-      ${LABELS.map((label, i) => `<td width='33%'>
-        <div class='col-header'><h4>${label}</h4></div>
-        <div>
-          <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
-          <div id='nv${i}' class='no-video'>No video</div>
-        </div>
-      </td>`).join('')}
-    </tr></tbody></table>`;
+        ${LABELS.map((label, i) => `<td width='33%'>
+          <div class='col-header'><h4>${label}</h4></div>
+          <div>
+            <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
+            <div id='nv${i}' class='no-video'>No video</div>
+          </div>
+        </td>`).join('')}
+      </tr></tbody></table>`;
     const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));
     const noVideoEls = [0, 1, 2].map(i => document.getElementById(`nv${i}`));
     let active = [true, true, true];
@@ -156,8 +177,8 @@ <h2>UI Diff</h2>
       history.replaceState(null, '', newUrl);
     }
 
-    const TYPE_ICON  = { replace: '✏️', insert: '➕', delete: '➖' };
-    const TYPE_NAV_CLASSES   = { replace: '', insert: 'type-insert', delete: 'type-delete' };
+    const TYPE_ICON = { replace: '✏️', insert: '➕', delete: '➖' };
+    const TYPE_NAV_CLASSES = { replace: '', insert: 'type-insert', delete: 'type-delete' };
 
     // Build nav buttons (hide the nav entirely when there are no diff segments).
     const navEl = document.getElementById('nav');

From 4a6ae7b4be9b49d8053c75054871e49b8c3a539e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 12:40:10 -0600
Subject: [PATCH 058/139] use jpg for normal video thumbnails

---
 selfdrive/ui/tests/diff/diff.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 9c5f4cee53ac6f..8cd945f42e9b5d 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -114,7 +114,10 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
 def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
   """Create a single-frame PNG thumbnail at the given frame index."""
   t = frame / fps
-  cmd = ['ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-y', str(out_path)]
+  cmd = [
+    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path),
+    '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)
+  ]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
@@ -173,7 +176,8 @@ def _rel(p: Path) -> str:
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
     thumb_frame_in_clip = padding_used + content_count // 2
-    thumb_path = chunk_dir / f"{i:03d}_thumb.png"
+    thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity, JPG for the video ones for better compression
+    thumb_path = chunk_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
     print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
     generate_thumbnail(str(thumb_source), thumb_frame_in_clip, str(thumb_path), fps)

From 0e46bd55218faaa84ebbff209469f14a3d3a6452 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 12:47:13 -0600
Subject: [PATCH 059/139] formatting

---
 selfdrive/ui/tests/diff/diff.py | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 8cd945f42e9b5d..915911ba3ba7d0 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -18,7 +18,7 @@
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
 
 
-def extract_framehashes(video_path):
+def extract_framehashes(video_path: str) -> list[str]:
   cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   hashes = []
@@ -32,7 +32,7 @@ def extract_framehashes(video_path):
   return hashes
 
 
-def create_diff_video(video1, video2, output_path):
+def create_diff_video(video1: str, video2: str, output_path: str) -> None:
   """Create a diff video using ffmpeg blend filter with difference mode."""
   print("Creating diff video...")
   cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
@@ -121,14 +121,7 @@ def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -
   subprocess.run(cmd, capture_output=True, check=True)
 
 
-def extract_chunk_clips(
-  video1: str,
-  video2: str,
-  diff_video: str,
-  chunks: list[Chunk],
-  fps: float,
-  output_dir: Path,
-) -> list[dict]:
+def extract_chunk_clips(video1: str, video2: str, diff_video: str, chunks: list[Chunk], fps: float, output_dir: Path) -> list[dict]:
   """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
   clip_sets: list[dict] = []
   folder_name = f"{Path(diff_video).stem}-chunks"
@@ -164,10 +157,8 @@ def _rel(p: Path) -> str:
     if chunk_type == 'replace':
       # Pixel-difference blend of the two clips (stops at the shorter one).
       cmd = [
-        'ffmpeg', '-hide_banner', '-loglevel', 'error',
-        '-i', str(v1_clip), '-i', str(v2_clip),
-        '-filter_complex', 'blend=all_mode=difference',
-        '-vsync', '0', '-y', str(diff_clip),
+        'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(v1_clip), '-i', str(v2_clip),
+        '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(diff_clip),
       ]
       subprocess.run(cmd, capture_output=True, check=True)
       clips['diff'] = _rel(diff_clip)
@@ -198,12 +189,7 @@ def _rel(p: Path) -> str:
 
 
 def generate_html_report(
-  videos: tuple[str, str],
-  basedir: str,
-  diff_frame_count: int,
-  frame_counts: tuple[int, int],
-  diff_video_name: str,
-  clip_sets: list[dict] | None = None,
+  videos: tuple[str, str], basedir: str, diff_frame_count: int, frame_counts: tuple[int, int], diff_video_name: str, clip_sets: list[dict] | None = None
 ) -> str:
   total_frames = max(frame_counts)
   frame_delta = frame_counts[1] - frame_counts[0]

From 0f459de22c396bc9d0c77f9f46089588c3e394bb Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 12:49:32 -0600
Subject: [PATCH 060/139] refactor

---
 selfdrive/ui/tests/diff/diff.py | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 915911ba3ba7d0..7be41fd70e9b42 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -18,6 +18,13 @@
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
 
 
+def create_diff_video(video1: str, video2: str, output_path: str) -> None:
+  """Create a diff video using ffmpeg blend filter with difference mode."""
+  print("Creating diff video...")
+  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
 def extract_framehashes(video_path: str) -> list[str]:
   cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
@@ -32,22 +39,14 @@ def extract_framehashes(video_path: str) -> list[str]:
   return hashes
 
 
-def create_diff_video(video1: str, video2: str, output_path: str) -> None:
-  """Create a diff video using ffmpeg blend filter with difference mode."""
-  print("Creating diff video...")
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
-  subprocess.run(cmd, capture_output=True, check=True)
-
-
-def find_differences(video1, video2) -> tuple[list[str], list[str]]:
+def get_video_frame_hashes(video1: str, video2: str) -> tuple[list[str], list[str]]:
   """Hash every frame of both videos and return the two hash lists."""
-  print(f"Hashing frames from {video1}...")
+  print(f"Hashing frames from '{video1}'...")
   hashes1 = extract_framehashes(video1)
-
-  print(f"Hashing frames from {video2}...")
+  print(f"  Found {len(hashes1)} frames in '{video1}'.")
+  print(f"Hashing frames from '{video2}'...")
   hashes2 = extract_framehashes(video2)
-
-  print(f"Comparing {len(hashes1)} vs {len(hashes2)} frames...")
+  print(f"  Found {len(hashes2)} frames in '{video2}'.")
   return hashes1, hashes2
 
 
@@ -254,7 +253,7 @@ def main():
   diff_video_path = str(DIFF_OUT_DIR / diff_video_name)
   create_diff_video(args.video1, args.video2, diff_video_path)
 
-  hashes1, hashes2 = find_differences(args.video1, args.video2)
+  hashes1, hashes2 = get_video_frame_hashes(args.video1, args.video2)
   frame_counts = (len(hashes1), len(hashes2))
 
   chunks = compute_diff_chunks(hashes1, hashes2)

From fcc484152510566c430075540944fe9ea5f0d165 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 12:50:09 -0600
Subject: [PATCH 061/139] reduce diff

---
 selfdrive/ui/tests/diff/diff.py | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 7be41fd70e9b42..9b87082912c87c 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -18,13 +18,6 @@
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
 
 
-def create_diff_video(video1: str, video2: str, output_path: str) -> None:
-  """Create a diff video using ffmpeg blend filter with difference mode."""
-  print("Creating diff video...")
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
-  subprocess.run(cmd, capture_output=True, check=True)
-
-
 def extract_framehashes(video_path: str) -> list[str]:
   cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
@@ -39,6 +32,14 @@ def extract_framehashes(video_path: str) -> list[str]:
   return hashes
 
 
+def create_diff_video(video1: str, video2: str, output_path: str) -> None:
+  """Create a diff video using ffmpeg blend filter with difference mode."""
+  print("Creating diff video...")
+  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
+
 def get_video_frame_hashes(video1: str, video2: str) -> tuple[list[str], list[str]]:
   """Hash every frame of both videos and return the two hash lists."""
   print(f"Hashing frames from '{video1}'...")

From 5ba208a690d94350ce7cd6bdce0e6b0f6d2579cd Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 13:11:02 -0600
Subject: [PATCH 062/139] cleanup

---
 selfdrive/ui/tests/diff/diff.py            | 42 ++++++++++------------
 selfdrive/ui/tests/diff/diff_template.html |  2 +-
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 9b87082912c87c..31a15d063cedd2 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -18,6 +18,13 @@
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
 
 
+def create_diff_video(video1: str, video2: str, output_path: str) -> None:
+  """Create a diff video using ffmpeg blend filter with difference mode."""
+  print("Creating diff video...")
+  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
 def extract_framehashes(video_path: str) -> list[str]:
   cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
@@ -32,14 +39,6 @@ def extract_framehashes(video_path: str) -> list[str]:
   return hashes
 
 
-def create_diff_video(video1: str, video2: str, output_path: str) -> None:
-  """Create a diff video using ffmpeg blend filter with difference mode."""
-  print("Creating diff video...")
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', '[0:v]blend=all_mode=difference', '-vsync', '0', '-y', output_path]
-  subprocess.run(cmd, capture_output=True, check=True)
-
-
-
 def get_video_frame_hashes(video1: str, video2: str) -> tuple[list[str], list[str]]:
   """Hash every frame of both videos and return the two hash lists."""
   print(f"Hashing frames from '{video1}'...")
@@ -65,9 +64,7 @@ class Chunk:
 def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
   """Use difflib to compute diff chunks from the two hash lists. Returns a list of Chunk objects."""
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
-  # Collect only the non-equal opcodes
-  diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']
-  # Create chunks with frame ranges and counts for each video
+  diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']  # filter out equal chunks
   chunks: list[Chunk] = []
   for tag, i1, i2, j1, j2 in diff_ops:
     chunks.append(Chunk(
@@ -78,17 +75,11 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
   return chunks
 
 
-def count_different_frames(chunks: list[Chunk]) -> int:
-  """Return a headline 'different frame' count for the summary."""
-  return sum(max(c.v1_count, c.v2_count) for c in chunks)
-
-
 def get_video_fps(video_path: str) -> float:
   """Return fps for a video file."""
   cmd = [
-    'ffprobe', '-v', 'error', '-select_streams', 'v:0',
-    '-show_entries', 'stream=r_frame_rate',
-    '-of', 'json', str(video_path),
+    'ffprobe', '-v', 'error', '-select_streams', 'v:0', '-show_entries',
+    'stream=r_frame_rate', '-of', 'json', str(video_path)
   ]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   info = json.loads(result.stdout)['streams'][0]
@@ -239,6 +230,8 @@ def main():
   if not args.output.lower().endswith('.html'):
     args.output += '.html'
 
+  diff_video_name = Path(args.output).stem + '.mp4'
+
   os.makedirs(DIFF_OUT_DIR, exist_ok=True)
 
   print("=" * 60)
@@ -247,10 +240,10 @@ def main():
   print(f"Video 1: {args.video1}")
   print(f"Video 2: {args.video2}")
   print(f"Output: {args.output}")
+  print(f"Diff video: {diff_video_name}")
   print()
 
   # Create diff video with name derived from output HTML
-  diff_video_name = Path(args.output).stem + '.mp4'
   diff_video_path = str(DIFF_OUT_DIR / diff_video_name)
   create_diff_video(args.video1, args.video2, diff_video_path)
 
@@ -258,7 +251,7 @@ def main():
   frame_counts = (len(hashes1), len(hashes2))
 
   chunks = compute_diff_chunks(hashes1, hashes2)
-  diff_frame_count = count_different_frames(chunks)
+  diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)
 
   clip_sets = []
   if chunks:
@@ -270,13 +263,16 @@ def main():
   print("Generating HTML report...")
   html = generate_html_report((args.video1, args.video2), args.basedir, diff_frame_count, frame_counts, diff_video_name, clip_sets)
 
-  with open(DIFF_OUT_DIR / args.output, 'w') as f:
+  output_path = DIFF_OUT_DIR / args.output
+  with open(output_path, 'w') as f:
     f.write(html)
 
+  print(f"Report generated at '{output_path}'")
+
   # Open in browser by default
   if not args.no_open:
     print(f"Opening {args.output} in browser...")
-    webbrowser.open(f'file://{os.path.abspath(DIFF_OUT_DIR / args.output)}')
+    webbrowser.open(f'file://{os.path.abspath(output_path)}')
 
   return 0 if diff_frame_count == 0 else 1
 
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 09b6f9fec50365..9176d41a738d37 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -117,7 +117,7 @@ <h2>UI Diff</h2>
 
     // Sync: keep playing videos at the same playhead.
     // Clamp the target time to the destination video's duration so we never force
-    // a shorter video past its end via synchronisation.
+    // a shorter video past its end via synchronization.
     vids.forEach((v, vi) => {
       v.addEventListener('timeupdate', () => {
         if (restarting || !active[vi]) return;

From 7275e2dd49bc5615a8414b5e3e4b949c854a22cf Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 13:21:31 -0600
Subject: [PATCH 063/139] reuse create diff video and cleanup

---
 selfdrive/ui/tests/diff/diff.py | 47 ++++++++++-----------------------
 1 file changed, 14 insertions(+), 33 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 31a15d063cedd2..2db119b26ece7a 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -18,13 +18,6 @@
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
 
 
-def create_diff_video(video1: str, video2: str, output_path: str) -> None:
-  """Create a diff video using ffmpeg blend filter with difference mode."""
-  print("Creating diff video...")
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
-  subprocess.run(cmd, capture_output=True, check=True)
-
-
 def extract_framehashes(video_path: str) -> list[str]:
   cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
@@ -77,10 +70,7 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
 
 def get_video_fps(video_path: str) -> float:
   """Return fps for a video file."""
-  cmd = [
-    'ffprobe', '-v', 'error', '-select_streams', 'v:0', '-show_entries',
-    'stream=r_frame_rate', '-of', 'json', str(video_path)
-  ]
+  cmd = ['ffprobe', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'json', str(video_path)]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   info = json.loads(result.stdout)['streams'][0]
   num, den = info['r_frame_rate'].split('/')
@@ -94,10 +84,7 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
   start_time = padded_start / fps
-  cmd = [
-    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path),
-    '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)
-  ]
+  cmd = ['ffmpeg', '-i', str(video_path), '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)]
   subprocess.run(cmd, capture_output=True, check=True)
   return total_frames
 
@@ -105,10 +92,13 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
 def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
   """Create a single-frame PNG thumbnail at the given frame index."""
   t = frame / fps
-  cmd = [
-    'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(video_path),
-    '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)
-  ]
+  cmd = ['ffmpeg', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
+def create_diff_video(video1: str, video2: str, output_path: str) -> None:
+  """Create a diff video of two clips using ffmpeg blend filter with difference mode."""
+  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
@@ -146,12 +136,7 @@ def _rel(p: Path) -> str:
     # --- diff/highlight clip ---
     diff_clip = chunk_dir / f"{i:03d}_diff.mp4"
     if chunk_type == 'replace':
-      # Pixel-difference blend of the two clips (stops at the shorter one).
-      cmd = [
-        'ffmpeg', '-hide_banner', '-loglevel', 'error', '-i', str(v1_clip), '-i', str(v2_clip),
-        '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(diff_clip),
-      ]
-      subprocess.run(cmd, capture_output=True, check=True)
+      create_diff_video(str(v1_clip), str(v2_clip), str(diff_clip))
       clips['diff'] = _rel(diff_clip)
 
     # --- thumbnail (middle frame of the diff content inside the clip) ---
@@ -166,14 +151,9 @@ def _rel(p: Path) -> str:
 
     clip_sets.append({
       'type': chunk_type,
-      'v1_start': v1_start,
-      'v1_end': v1_end,
-      'v2_start': v2_start,
-      'v2_end': v2_end,
-      'v1_count': v1_count,
-      'v2_count': v2_count,
-      'clips': clips,
-      'thumb': _rel(thumb_path),
+      'v1_start': v1_start, 'v1_end': v1_end, 'v1_count': v1_count,
+      'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
+      'clips': clips, 'thumb': _rel(thumb_path),
     })
 
   return clip_sets
@@ -245,6 +225,7 @@ def main():
 
   # Create diff video with name derived from output HTML
   diff_video_path = str(DIFF_OUT_DIR / diff_video_name)
+  print("Creating diff video...")
   create_diff_video(args.video1, args.video2, diff_video_path)
 
   hashes1, hashes2 = get_video_frame_hashes(args.video1, args.video2)

From 60f8bf2422665d7ded0e09d51050d9a9f11c9054 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 13:49:35 -0600
Subject: [PATCH 064/139] refactor: use paths

---
 selfdrive/ui/tests/diff/diff.py | 65 +++++++++++++++++----------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 2db119b26ece7a..0c8d922b016bc7 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -68,7 +68,13 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
   return chunks
 
 
-def get_video_fps(video_path: str) -> float:
+def create_diff_video(video1: Path, video2: Path, output: Path) -> None:
+  """Create a diff video of two clips using ffmpeg blend filter with difference mode."""
+  cmd = ['ffmpeg', '-i', str(video1), '-i', str(video2), '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(output)]
+  subprocess.run(cmd, capture_output=True, check=True)
+
+
+def get_video_fps(video_path: Path) -> float:
   """Return fps for a video file."""
   cmd = ['ffprobe', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'json', str(video_path)]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
@@ -77,7 +83,7 @@ def get_video_fps(video_path: str) -> float:
   return int(num) / int(den)
 
 
-def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path: str, fps: float) -> int:
+def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path: Path, fps: float) -> int:
   """Extract [start_frame, end_frame] plus padding before/after into *output_path*.
   Returns the actual number of frames written."""
   padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
@@ -89,25 +95,18 @@ def extract_clip(video_path: str, start_frame: int, end_frame: int, output_path:
   return total_frames
 
 
-def generate_thumbnail(video_path: str, frame: int, out_path: str, fps: float) -> None:
+def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float) -> None:
   """Create a single-frame PNG thumbnail at the given frame index."""
   t = frame / fps
   cmd = ['ffmpeg', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
-def create_diff_video(video1: str, video2: str, output_path: str) -> None:
-  """Create a diff video of two clips using ffmpeg blend filter with difference mode."""
-  cmd = ['ffmpeg', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output_path]
-  subprocess.run(cmd, capture_output=True, check=True)
-
-
-def extract_chunk_clips(video1: str, video2: str, diff_video: str, chunks: list[Chunk], fps: float, output_dir: Path) -> list[dict]:
+def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: float, folder_name: str) -> list[dict]:
   """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
   clip_sets: list[dict] = []
-  folder_name = f"{Path(diff_video).stem}-chunks"
-  chunk_dir = output_dir / folder_name
-  os.makedirs(chunk_dir, exist_ok=True)
+  output_dir = DIFF_OUT_DIR / folder_name
+  os.makedirs(output_dir, exist_ok=True)
   n = len(chunks)
 
   for i, chunk in enumerate(chunks):
@@ -116,44 +115,45 @@ def extract_chunk_clips(video1: str, video2: str, diff_video: str, chunks: list[
     v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count
     clips: dict[str, str | None] = {'video1': None, 'video2': None, 'diff': None}
 
-    def _rel(p: Path) -> str:
+    def _html_rel_path(p: Path) -> str:
+      """ Return path relative to the HTML report file for use in src attributes."""
       return os.path.join(folder_name, p.name)
 
     # --- video1 clip ---
-    v1_clip = chunk_dir / f"{i:03d}_video1.mp4"
+    v1_clip = output_dir / f"{i:03d}_video1.mp4"
     if chunk_type != 'insert':
       print(f"  Chunk {i + 1}/{n} (v1/{chunk_type}) frames {v1_start}-{v1_end}")
-      extract_clip(video1, v1_start, v1_end, str(v1_clip), fps)
-      clips['video1'] = _rel(v1_clip)
+      extract_clip(video1, v1_start, v1_end, v1_clip, fps)
+      clips['video1'] = _html_rel_path(v1_clip)
 
     # --- video2 clip ---
-    v2_clip = chunk_dir / f"{i:03d}_video2.mp4"
+    v2_clip = output_dir / f"{i:03d}_video2.mp4"
     if chunk_type != 'delete':
       print(f"  Chunk {i + 1}/{n} (v2/{chunk_type}) frames {v2_start}-{v2_end}")
-      extract_clip(video2, v2_start, v2_end, str(v2_clip), fps)
-      clips['video2'] = _rel(v2_clip)
+      extract_clip(video2, v2_start, v2_end, v2_clip, fps)
+      clips['video2'] = _html_rel_path(v2_clip)
 
     # --- diff/highlight clip ---
-    diff_clip = chunk_dir / f"{i:03d}_diff.mp4"
+    diff_clip = output_dir / f"{i:03d}_diff.mp4"
     if chunk_type == 'replace':
-      create_diff_video(str(v1_clip), str(v2_clip), str(diff_clip))
-      clips['diff'] = _rel(diff_clip)
+      create_diff_video(v1_clip, v2_clip, diff_clip)
+      clips['diff'] = _html_rel_path(diff_clip)
 
     # --- thumbnail (middle frame of the diff content inside the clip) ---
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
     thumb_frame_in_clip = padding_used + content_count // 2
     thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity, JPG for the video ones for better compression
-    thumb_path = chunk_dir / f"{i:03d}_thumb.{thumb_ext}"
+    thumb_path = output_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
     print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
-    generate_thumbnail(str(thumb_source), thumb_frame_in_clip, str(thumb_path), fps)
+    generate_thumbnail(thumb_source, thumb_frame_in_clip, thumb_path, fps)
 
     clip_sets.append({
       'type': chunk_type,
       'v1_start': v1_start, 'v1_end': v1_end, 'v1_count': v1_count,
       'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
-      'clips': clips, 'thumb': _rel(thumb_path),
+      'clips': clips, 'thumb': _html_rel_path(thumb_path),
     })
 
   return clip_sets
@@ -210,7 +210,9 @@ def main():
   if not args.output.lower().endswith('.html'):
     args.output += '.html'
 
-  diff_video_name = Path(args.output).stem + '.mp4'
+  output_stem = Path(args.output).stem
+  diff_video_name = f"{output_stem}.mp4"
+  chunks_folder_name = f"{output_stem}-chunks"
 
   os.makedirs(DIFF_OUT_DIR, exist_ok=True)
 
@@ -221,12 +223,11 @@ def main():
   print(f"Video 2: {args.video2}")
   print(f"Output: {args.output}")
   print(f"Diff video: {diff_video_name}")
+  print(f"Diff chunks: {chunks_folder_name}")
   print()
 
-  # Create diff video with name derived from output HTML
-  diff_video_path = str(DIFF_OUT_DIR / diff_video_name)
   print("Creating diff video...")
-  create_diff_video(args.video1, args.video2, diff_video_path)
+  create_diff_video(args.video1, args.video2,  str(DIFF_OUT_DIR / diff_video_name))
 
   hashes1, hashes2 = get_video_frame_hashes(args.video1, args.video2)
   frame_counts = (len(hashes1), len(hashes2))
@@ -236,9 +237,9 @@ def main():
 
   clip_sets = []
   if chunks:
-    print(f"\nExtracting {len(chunks)} different section(s)...")
+    print(f"\nExtracting {len(chunks)} diff chunks(s)...")
     fps = get_video_fps(args.video1)
-    clip_sets = extract_chunk_clips(args.video1, args.video2, diff_video_path, chunks, fps, DIFF_OUT_DIR)
+    clip_sets = extract_chunk_clips(args.video1, args.video2, chunks, fps, chunks_folder_name)
 
   print()
   print("Generating HTML report...")

From 763263ead792842a4d2046ec302ee232cdb0d1e2 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 13:56:25 -0600
Subject: [PATCH 065/139] comment

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 0c8d922b016bc7..cc3ee4e169ba3e 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -143,7 +143,7 @@ def _html_rel_path(p: Path) -> str:
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
     thumb_frame_in_clip = padding_used + content_count // 2
-    thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity, JPG for the video ones for better compression
+    thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity; JPG is smaller for the other thumbnails
     thumb_path = output_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
     print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")

From 049bfeb8c97c2f64a381a5380479e57d38bd347f Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 14:07:00 -0600
Subject: [PATCH 066/139] use basedir for chunk clips

---
 selfdrive/ui/tests/diff/diff.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index cc3ee4e169ba3e..720465a661c7ed 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -102,7 +102,7 @@ def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float)
   subprocess.run(cmd, capture_output=True, check=True)
 
 
-def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: float, folder_name: str) -> list[dict]:
+def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: float, basedir: str, folder_name: str) -> list[dict]:
   """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
   clip_sets: list[dict] = []
   output_dir = DIFF_OUT_DIR / folder_name
@@ -116,8 +116,8 @@ def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: fl
     clips: dict[str, str | None] = {'video1': None, 'video2': None, 'diff': None}
 
     def _html_rel_path(p: Path) -> str:
-      """ Return path relative to the HTML report file for use in src attributes."""
-      return os.path.join(folder_name, p.name)
+      """ Return path relative to the basedir."""
+      return os.path.join(basedir, folder_name, p.name)
 
     # --- video1 clip ---
     v1_clip = output_dir / f"{i:03d}_video1.mp4"
@@ -202,7 +202,7 @@ def main():
   parser.add_argument('video1', help='First video file')
   parser.add_argument('video2', help='Second video file')
   parser.add_argument('output', nargs='?', default='diff.html', help='Output HTML file (default: diff.html)')
-  parser.add_argument("--basedir", type=str, help="Base directory for output", default="")
+  parser.add_argument("--basedir", type=str, help="Base directory or URL for output, for correct src locations in HTML report", default="")
   parser.add_argument('--no-open', action='store_true', help='Do not open HTML report in browser')
 
   args = parser.parse_args()
@@ -239,7 +239,7 @@ def main():
   if chunks:
     print(f"\nExtracting {len(chunks)} diff chunks(s)...")
     fps = get_video_fps(args.video1)
-    clip_sets = extract_chunk_clips(args.video1, args.video2, chunks, fps, chunks_folder_name)
+    clip_sets = extract_chunk_clips(args.video1, args.video2, chunks, fps, args.basedir, chunks_folder_name)
 
   print()
   print("Generating HTML report...")

From e6b8f130084918fec24614f1afa00e60f3f89de0 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 14:10:47 -0600
Subject: [PATCH 067/139] no need to log path again

---
 selfdrive/ui/tests/diff/diff.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 720465a661c7ed..a22cbcbd8117f2 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -34,12 +34,12 @@ def extract_framehashes(video_path: str) -> list[str]:
 
 def get_video_frame_hashes(video1: str, video2: str) -> tuple[list[str], list[str]]:
   """Hash every frame of both videos and return the two hash lists."""
-  print(f"Hashing frames from '{video1}'...")
+  print("Hashing frames from video 1...")
   hashes1 = extract_framehashes(video1)
-  print(f"  Found {len(hashes1)} frames in '{video1}'.")
-  print(f"Hashing frames from '{video2}'...")
+  print(f"  Found {len(hashes1)} frames in video 1.")
+  print("Hashing frames from video 2...")
   hashes2 = extract_framehashes(video2)
-  print(f"  Found {len(hashes2)} frames in '{video2}'.")
+  print(f"  Found {len(hashes2)} frames in video 2.")
   return hashes1, hashes2
 
 

From f10ac0727e04231efb0cfdc622cea2bf20ae4cc8 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 14:18:34 -0600
Subject: [PATCH 068/139] log frame better

---
 selfdrive/ui/tests/diff/diff.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index a22cbcbd8117f2..9a687e1aa49364 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -142,12 +142,12 @@ def _html_rel_path(p: Path) -> str:
     # --- thumbnail (middle frame of the diff content inside the clip) ---
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
-    thumb_frame_in_clip = padding_used + content_count // 2
+    thumb_frame = padding_used + content_count // 2
     thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity; JPG is smaller for the other thumbnails
     thumb_path = output_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
-    print(f"  Chunk {i + 1}/{n} (thumb) clip-frame {thumb_frame_in_clip}")
-    generate_thumbnail(thumb_source, thumb_frame_in_clip, thumb_path, fps)
+    print(f"  Chunk {i + 1}/{n} (thumb) frame {thumb_frame}")
+    generate_thumbnail(thumb_source, thumb_frame, thumb_path, fps)
 
     clip_sets.append({
       'type': chunk_type,

From 5fe3dc3f020d1f33e9d4a795a269e59b779763d9 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 14:18:44 -0600
Subject: [PATCH 069/139] simplify

---
 selfdrive/ui/tests/diff/diff_template.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 9176d41a738d37..113a3a79d1eaae 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -46,7 +46,7 @@ <h2>UI Diff</h2>
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
     const frames_range_label = (prefix, start, end) =>
       prefix + (start === end ? `frame ${start + 1}` : `frames ${start + 1}–${end + 1}`);
-    const video_frames_range_label = (v, start, end) => frames_range_label(`${v}: `, start, end);
+    const video_frames_range_label = (v, start, end) => frames_range_label(`video ${v}: `, start, end);
 
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
@@ -65,17 +65,17 @@ <h2>UI Diff</h2>
         // Build a clear description with explicit per-video ranges.
         let desc = '';
         if (type === 'insert') {
-          desc = video_frames_range_label('video2', v2_start, v2_end);
+          desc = video_frames_range_label(2, v2_start, v2_end);
         } else if (type === 'delete') {
-          desc = video_frames_range_label('video1', v1_start, v1_end);
+          desc = video_frames_range_label(1, v1_start, v1_end);
         } else if (type === 'replace') {
-          const a = video_frames_range_label('video1', v1_start, v1_end);
-          const b = video_frames_range_label('video2', v2_start, v2_end);
+          const a = video_frames_range_label(1, v1_start, v1_end);
+          const b = video_frames_range_label(2, v2_start, v2_end);
           desc = `${a} → ${b}`;
         } else {
           const parts = [];
-          if (v1_count) parts.push(video_frames_range_label('video1', v1_start, v1_end));
-          if (v2_count) parts.push(video_frames_range_label('video2', v2_start, v2_end));
+          if (v1_count) parts.push(video_frames_range_label(1, v1_start, v1_end));
+          if (v2_count) parts.push(video_frames_range_label(2, v2_start, v2_end));
           desc = parts.join(' | ');
         }
 

From 66e6d835efcca199b9b4631967a4fa190face59f Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 14:20:06 -0600
Subject: [PATCH 070/139] simplify again

---
 selfdrive/ui/tests/diff/diff_template.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 113a3a79d1eaae..8b21e596cbf23e 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -44,9 +44,9 @@ <h2>UI Diff</h2>
     const chunks = $CHUNKS_JSON;
 
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
-    const frames_range_label = (prefix, start, end) =>
-      prefix + (start === end ? `frame ${start + 1}` : `frames ${start + 1}–${end + 1}`);
-    const video_frames_range_label = (v, start, end) => frames_range_label(`video ${v}: `, start, end);
+    const frames_range_label = (start, end) =>
+      start === end ? `frame ${start + 1}` : `frames ${start + 1}–${end + 1}`;
+    const video_frames_range_label = (v, start, end) => `video ${v}: ${frames_range_label(start, end)}`;
 
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },

From d4373b39723f94901050ff9b6e04251dff8ece5a Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 15:56:20 -0600
Subject: [PATCH 071/139] rename

---
 selfdrive/ui/tests/diff/diff.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 9a687e1aa49364..13058a4888a6b6 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -115,7 +115,7 @@ def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: fl
     v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count
     clips: dict[str, str | None] = {'video1': None, 'video2': None, 'diff': None}
 
-    def _html_rel_path(p: Path) -> str:
+    def _rel_path(p: Path) -> str:
       """ Return path relative to the basedir."""
       return os.path.join(basedir, folder_name, p.name)
 
@@ -124,20 +124,20 @@ def _html_rel_path(p: Path) -> str:
     if chunk_type != 'insert':
       print(f"  Chunk {i + 1}/{n} (v1/{chunk_type}) frames {v1_start}-{v1_end}")
       extract_clip(video1, v1_start, v1_end, v1_clip, fps)
-      clips['video1'] = _html_rel_path(v1_clip)
+      clips['video1'] = _rel_path(v1_clip)
 
     # --- video2 clip ---
     v2_clip = output_dir / f"{i:03d}_video2.mp4"
     if chunk_type != 'delete':
       print(f"  Chunk {i + 1}/{n} (v2/{chunk_type}) frames {v2_start}-{v2_end}")
       extract_clip(video2, v2_start, v2_end, v2_clip, fps)
-      clips['video2'] = _html_rel_path(v2_clip)
+      clips['video2'] = _rel_path(v2_clip)
 
     # --- diff/highlight clip ---
     diff_clip = output_dir / f"{i:03d}_diff.mp4"
     if chunk_type == 'replace':
       create_diff_video(v1_clip, v2_clip, diff_clip)
-      clips['diff'] = _html_rel_path(diff_clip)
+      clips['diff'] = _rel_path(diff_clip)
 
     # --- thumbnail (middle frame of the diff content inside the clip) ---
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
@@ -153,7 +153,7 @@ def _html_rel_path(p: Path) -> str:
       'type': chunk_type,
       'v1_start': v1_start, 'v1_end': v1_end, 'v1_count': v1_count,
       'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
-      'clips': clips, 'thumb': _html_rel_path(thumb_path),
+      'clips': clips, 'thumb': _rel_path(thumb_path),
     })
 
   return clip_sets

From f9a2ae35ab3613d7314e87ad7c2e06d5dda78008 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:04:16 -0600
Subject: [PATCH 072/139] fix: don't double add basedir

---
 selfdrive/ui/tests/diff/diff.py | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 13058a4888a6b6..166d92f3b7587b 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -84,8 +84,7 @@ def get_video_fps(video_path: Path) -> float:
 
 
 def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path: Path, fps: float) -> int:
-  """Extract [start_frame, end_frame] plus padding before/after into *output_path*.
-  Returns the actual number of frames written."""
+  """Extract [start_frame, end_frame] plus padding before/after into *output_path*. Returns the actual number of frames written."""
   padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
@@ -160,7 +159,7 @@ def _rel_path(p: Path) -> str:
 
 
 def generate_html_report(
-  videos: tuple[str, str], basedir: str, diff_frame_count: int, frame_counts: tuple[int, int], diff_video_name: str, clip_sets: list[dict] | None = None
+  videos: tuple[str, str], basedir: str, diff_frame_count: int, frame_counts: tuple[int, int], diff_video_name: str, clip_sets: list[dict]
 ) -> str:
   total_frames = max(frame_counts)
   frame_delta = frame_counts[1] - frame_counts[0]
@@ -172,16 +171,6 @@ def generate_html_report(
     + (f" Video {'2' if frame_delta > 0 else '1'} is longer by {abs(frame_delta)} frames." if frame_delta != 0 else "")
   )
 
-  # Pre-join basedir into clip paths and thumb so the template needs no path logic
-  processed_sets = [
-    {
-      **cs,
-      'clips': {k: (os.path.join(basedir, v) if (basedir and v) else v) for k, v in cs['clips'].items()},
-      'thumb': os.path.join(basedir, cs['thumb']) if (basedir and cs.get('thumb')) else cs.get('thumb', ''),
-    }
-    for cs in (clip_sets or [])
-  ]
-
   # Load HTML template and replace placeholders
   html = HTML_TEMPLATE_PATH.read_text()
   placeholders = {
@@ -189,7 +178,7 @@ def generate_html_report(
     "VIDEO2_SRC": os.path.join(basedir, os.path.basename(videos[1])),
     "DIFF_SRC": os.path.join(basedir, diff_video_name),
     "RESULT_TEXT": result_text,
-    "CHUNKS_JSON": json.dumps(processed_sets),
+    "CHUNKS_JSON": json.dumps(clip_sets),
   }
   for key, value in placeholders.items():
     html = html.replace(f"${key}", value)

From f73cf72e1b2014f05ab3cf1b898905c3da8863fa Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:06:12 -0600
Subject: [PATCH 073/139] correct

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 166d92f3b7587b..9c054371afb394 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -191,7 +191,7 @@ def main():
   parser.add_argument('video1', help='First video file')
   parser.add_argument('video2', help='Second video file')
   parser.add_argument('output', nargs='?', default='diff.html', help='Output HTML file (default: diff.html)')
-  parser.add_argument("--basedir", type=str, help="Base directory or URL for output, for correct src locations in HTML report", default="")
+  parser.add_argument("--basedir", type=str, help="Base path for files in HTML report", default="")
   parser.add_argument('--no-open', action='store_true', help='Do not open HTML report in browser')
 
   args = parser.parse_args()

From c29977c325f5b528b1f9d90ac2213b7e936ebd14 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:22:18 -0600
Subject: [PATCH 074/139] cleanup

---
 selfdrive/ui/tests/diff/diff.py            |  2 +-
 selfdrive/ui/tests/diff/diff_template.html | 51 ++++++++++------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 9c054371afb394..15413d0ae3b2ad 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -132,7 +132,7 @@ def _rel_path(p: Path) -> str:
       extract_clip(video2, v2_start, v2_end, v2_clip, fps)
       clips['video2'] = _rel_path(v2_clip)
 
-    # --- diff/highlight clip ---
+    # --- diff clip ---
     diff_clip = output_dir / f"{i:03d}_diff.mp4"
     if chunk_type == 'replace':
       create_diff_video(v1_clip, v2_clip, diff_clip)
diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 8b21e596cbf23e..519d541824e684 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -51,6 +51,7 @@ <h2>UI Diff</h2>
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ v1_start, v1_end, v2_start, v2_end, v1_count, v2_count, type, clips, thumb }, i) => {
+        // Build action text based on type and frame counts
         let actionText;
         if (type === 'insert') {
           actionText = `Added ${frames_label(v2_count)}`;
@@ -62,7 +63,7 @@ <h2>UI Diff</h2>
           actionText = frames_label(Math.max(v1_count || 0, v2_count || 0));
         }
 
-        // Build a clear description with explicit per-video ranges.
+        // Build description with frame ranges
         let desc = '';
         if (type === 'insert') {
           desc = video_frames_range_label(2, v2_start, v2_end);
@@ -91,7 +92,7 @@ <h2>UI Diff</h2>
       }),
     ];
 
-    // Build the static 3-video player layout
+    // Build video player table
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
         ${LABELS.map((label, i) => `<td width='33%'>
           <div class='col-header'><h4>${label}</h4></div>
@@ -101,27 +102,20 @@ <h2>UI Diff</h2>
           </div>
         </td>`).join('')}
       </tr></tbody></table>`;
-    const vids = [0, 1, 2].map(i => document.getElementById(`v${i}`));
+    const videos = [0, 1, 2].map(i => document.getElementById(`v${i}`));
     const noVideoEls = [0, 1, 2].map(i => document.getElementById(`nv${i}`));
-    let active = [true, true, true];
+    let active = [true, true, true];  // Whether each video is active/exists for the current scene
 
-    // Whether the current scene should loop (managed manually — NOT via v.loop — so that
-    // videos of different lengths don't fight each other through the sync handler).
-    let currentLoop = false;
+    let currentLoop = false;  // Whether current scene should loop (managed manually — NOT via v.loop — so that videos of different lengths don't fight each other through the sync handler).
+    let restarting = false;  // True while a collective restart is in flight (prevents re-entrant restart triggers).
 
-    // True while a collective restart is in flight (prevents re-entrant restart triggers).
-    let restarting = false;
-
-    // isEnded: a video counts as "done" once it reaches its natural end.
     const isEnded = (v, i) => !active[i] || v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
 
-    // Sync: keep playing videos at the same playhead.
-    // Clamp the target time to the destination video's duration so we never force
-    // a shorter video past its end via synchronization.
-    vids.forEach((v, vi) => {
+    // Sync: keep playing videos at the same playhead
+    videos.forEach((v, vi) => {
       v.addEventListener('timeupdate', () => {
         if (restarting || !active[vi]) return;
-        vids.forEach((o, oi) => {
+        videos.forEach((o, oi) => {
           if (o === v || !active[oi] || isEnded(o, oi)) return;
           const target = Number.isFinite(o.duration) ? Math.min(v.currentTime, o.duration) : v.currentTime;
           if (Math.abs(target - o.currentTime) > 0.1) {
@@ -131,43 +125,42 @@ <h2>UI Diff</h2>
         });
       });
 
-      // When a video ends: pause it and let the longer ones continue.
-      // Only restart the whole scene once ALL videos have finished.
+      // When a video ends, pause it and let the longer ones continue. Only restart the whole scene once ALL videos have finished.
       v.addEventListener('ended', () => {
         if (!active[vi]) return;
         v.pause();
-        if (!restarting && currentLoop && vids.every((x, i) => isEnded(x, i))) {
+        if (!restarting && currentLoop && videos.every((x, i) => isEnded(x, i))) {
           restarting = true;
-          vids.forEach((x, i) => { if (active[i]) x.currentTime = 0; });
+          videos.forEach((x, i) => { if (active[i]) x.currentTime = 0; });
           // Brief delay so all currentTime resets settle before we call play().
           setTimeout(() => {
             restarting = false;
-            vids.forEach((x, i) => { if (active[i]) x.play().catch(() => {}); });
+            videos.forEach((x, i) => { if (active[i]) x.play().catch(() => {}); });
           }, 50);
         }
       });
     });
 
-    // Switch to a scene: swap sources, reload, play, and update ?selected query param.
+    // Switch to a different scene (chunk group)
     function switchTo(idx) {
       restarting = false;
-      vids.forEach(v => { v.pause(); v.loop = false; });   // never use native loop
+      videos.forEach(v => { v.pause(); v.loop = false; });  // never use native loop
       const { srcs, loop, type } = scenes[idx];
       currentLoop = loop;
 
-      vids.forEach((v, j) => {
-        const src = srcs[j];
-        active[j] = !!src;
+      videos.forEach((v, vi) => {
+        const src = srcs[vi];
+        active[vi] = !!src;
         const source = v.querySelector('source');
         source.src = src || '';
         v.load();
-        if (active[j]) {
+        if (active[vi]) {
           v.style.display = '';
-          noVideoEls[j].style.display = 'none';
+          noVideoEls[vi].style.display = 'none';
           v.play().catch(() => {});
         } else {
           v.style.display = 'none';
-          noVideoEls[j].style.display = 'flex';
+          noVideoEls[vi].style.display = 'flex';
         }
       });
 

From d804bebd3866e6a3c77226ebf25c2063f599709d Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:29:50 -0600
Subject: [PATCH 075/139] cleanup

---
 selfdrive/ui/tests/diff/diff_template.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 519d541824e684..d5f0b6cf98f2a8 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -11,7 +11,6 @@
     #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; position: relative; }
     #nav button img { width: 100%; height: auto; display: block; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
-    #nav button.active .nav-title { color: #0078d4; }
     #nav button.type-insert { border-color: #2a9d2a; }
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
     #nav button.type-delete { border-color: #c0392b; }
@@ -106,8 +105,8 @@ <h2>UI Diff</h2>
     const noVideoEls = [0, 1, 2].map(i => document.getElementById(`nv${i}`));
     let active = [true, true, true];  // Whether each video is active/exists for the current scene
 
-    let currentLoop = false;  // Whether current scene should loop (managed manually — NOT via v.loop — so that videos of different lengths don't fight each other through the sync handler).
-    let restarting = false;  // True while a collective restart is in flight (prevents re-entrant restart triggers).
+    let loopEnabled = false;
+    let restarting = false;
 
     const isEnded = (v, i) => !active[i] || v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
 
@@ -129,7 +128,7 @@ <h2>UI Diff</h2>
       v.addEventListener('ended', () => {
         if (!active[vi]) return;
         v.pause();
-        if (!restarting && currentLoop && videos.every((x, i) => isEnded(x, i))) {
+        if (!restarting && loopEnabled && videos.every((x, i) => isEnded(x, i))) {
           restarting = true;
           videos.forEach((x, i) => { if (active[i]) x.currentTime = 0; });
           // Brief delay so all currentTime resets settle before we call play().
@@ -146,7 +145,7 @@ <h2>UI Diff</h2>
       restarting = false;
       videos.forEach(v => { v.pause(); v.loop = false; });  // never use native loop
       const { srcs, loop, type } = scenes[idx];
-      currentLoop = loop;
+      loopEnabled = loop;
 
       videos.forEach((v, vi) => {
         const src = srcs[vi];
@@ -171,7 +170,7 @@ <h2>UI Diff</h2>
     }
 
     const TYPE_ICON = { replace: '✏️', insert: '➕', delete: '➖' };
-    const TYPE_NAV_CLASSES = { replace: '', insert: 'type-insert', delete: 'type-delete' };
+    const TYPE_NAV_CLASSES = { insert: 'type-insert', delete: 'type-delete' };
 
     // Build nav buttons (hide the nav entirely when there are no diff segments).
     const navEl = document.getElementById('nav');

From d1d89d638ad44e2aea929c33e892996a16e4d9fc Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:32:07 -0600
Subject: [PATCH 076/139] remove display block

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index d5f0b6cf98f2a8..a584e7596d07ac 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -9,7 +9,7 @@
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
     #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; position: relative; }
-    #nav button img { width: 100%; height: auto; display: block; }
+    #nav button img { width: 100%; height: auto; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
     #nav button.type-insert { border-color: #2a9d2a; }
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }

From 4045ca5ba45fb43cd94a057ef2883b833a826a98 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:46:11 -0600
Subject: [PATCH 077/139] clean styles

---
 selfdrive/ui/tests/diff/diff_template.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index a584e7596d07ac..f25586b5682893 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -7,9 +7,9 @@
   <style>
     body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
-    #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.75em 0; }
-    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; overflow: hidden; width: 200px; position: relative; }
-    #nav button img { width: 100%; height: auto; }
+    #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
+    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; width: 200px; position: relative; }
+    #nav button img { width: 100%; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
     #nav button.type-insert { border-color: #2a9d2a; }
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
@@ -21,11 +21,9 @@
     .nav-index.hidden { display: none; }
     .nav-action { flex: 1; text-align: center; font-size: 0.86rem; font-weight: 600; color: #222; }
     .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
-    .col-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 6px 0; }
-    .col-header h4 { margin: 0; font-size: 1rem; }
     .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; border-radius: 4px; background: #fafafa; color: #666; font-size: 0.95rem; align-items: center; justify-content: center; text-align: center; }
     @media (max-width: 800px) {
-      #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; margin: 0.5em 0; }
+      #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; }
       #nav button { width: 100%; }
       table.videos tr { display: flex; flex-direction: column; }
       table.videos td { width: 100% !important; }
@@ -94,7 +92,7 @@ <h2>UI Diff</h2>
     // Build video player table
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
         ${LABELS.map((label, i) => `<td width='33%'>
-          <div class='col-header'><h4>${label}</h4></div>
+          <h4>${label}</h4>
           <div>
             <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
             <div id='nv${i}' class='no-video'>No video</div>

From 6d5fadddd837942c6d955d0938f05c6a1f528d9f Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 16:55:44 -0600
Subject: [PATCH 078/139] more cleanup styles

---
 selfdrive/ui/tests/diff/diff_template.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index f25586b5682893..64ce23defeb694 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -17,11 +17,11 @@
     #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
     table.videos { width: 100%; }
     .nav-row { display: flex; align-items: center; gap: 8px; width: 100%; }
-    .nav-index { position: absolute; left: 8px; bottom: 6px; font-weight: 600; color: #777; font-size: 0.82rem; }
+    .nav-index { position: absolute; left: 6px; bottom: 4px; font-weight: 600; color: #777; }
     .nav-index.hidden { display: none; }
-    .nav-action { flex: 1; text-align: center; font-size: 0.86rem; font-weight: 600; color: #222; }
-    .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; color: #333; }
-    .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; border-radius: 4px; background: #fafafa; color: #666; font-size: 0.95rem; align-items: center; justify-content: center; text-align: center; }
+    .nav-action { flex: 1; text-align: center; font-weight: 600; }
+    .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; }
+    .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
     @media (max-width: 800px) {
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; }
       #nav button { width: 100%; }

From d76a6f45305be197288aa2d3b780395315402cb8 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 17:03:16 -0600
Subject: [PATCH 079/139] refactor

---
 selfdrive/ui/tests/diff/diff_template.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 64ce23defeb694..a9c957215423f3 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -7,6 +7,9 @@
   <style>
     body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
+    table.videos { width: 100%; }
+    table.videos td { width: 100%; }
+    .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
     #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; width: 200px; position: relative; }
     #nav button img { width: 100%; }
@@ -15,18 +18,15 @@
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
     #nav button.type-delete { border-color: #c0392b; }
     #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
-    table.videos { width: 100%; }
     .nav-row { display: flex; align-items: center; gap: 8px; width: 100%; }
     .nav-index { position: absolute; left: 6px; bottom: 4px; font-weight: 600; color: #777; }
     .nav-index.hidden { display: none; }
     .nav-action { flex: 1; text-align: center; font-weight: 600; }
     .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; }
-    .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
     @media (max-width: 800px) {
+      table.videos tr { display: flex; flex-direction: column; }
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; }
       #nav button { width: 100%; }
-      table.videos tr { display: flex; flex-direction: column; }
-      table.videos td { width: 100% !important; }
     }
   </style>
 </head>
@@ -91,7 +91,7 @@ <h2>UI Diff</h2>
 
     // Build video player table
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
-        ${LABELS.map((label, i) => `<td width='33%'>
+        ${LABELS.map((label, i) => `<td>
           <h4>${label}</h4>
           <div>
             <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>

From a56a2fb71d57e68034fa99cc1e945d1e9d2a552a Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 17:04:57 -0600
Subject: [PATCH 080/139] fix

---
 selfdrive/ui/tests/diff/diff_template.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index a9c957215423f3..d94dff9f98db78 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -8,7 +8,6 @@
     body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     table.videos { width: 100%; }
-    table.videos td { width: 100%; }
     .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
     #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; width: 200px; position: relative; }
@@ -91,7 +90,7 @@ <h2>UI Diff</h2>
 
     // Build video player table
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
-        ${LABELS.map((label, i) => `<td>
+        ${LABELS.map((label, i) => `<td width='33.33%'>
           <h4>${label}</h4>
           <div>
             <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>

From dd0f331d717f76650f1725a202c2a908d75ac04c Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 17:08:42 -0600
Subject: [PATCH 081/139] fix mobile

---
 selfdrive/ui/tests/diff/diff_template.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index d94dff9f98db78..4f55b39855347a 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -24,6 +24,7 @@
     .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; }
     @media (max-width: 800px) {
       table.videos tr { display: flex; flex-direction: column; }
+      table.videos td { width: 100%; }
       #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5em; }
       #nav button { width: 100%; }
     }

From 8891fd68d76512c90ad27986afe615820eb4e50b Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 17:09:26 -0600
Subject: [PATCH 082/139] remove nav-row

---
 selfdrive/ui/tests/diff/diff_template.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 4f55b39855347a..589062825fdafb 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -17,7 +17,6 @@
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
     #nav button.type-delete { border-color: #c0392b; }
     #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
-    .nav-row { display: flex; align-items: center; gap: 8px; width: 100%; }
     .nav-index { position: absolute; left: 6px; bottom: 4px; font-weight: 600; color: #777; }
     .nav-index.hidden { display: none; }
     .nav-action { flex: 1; text-align: center; font-weight: 600; }
@@ -184,7 +183,6 @@ <h4>${label}</h4>
           btn.appendChild(img);
         }
         const header = document.createElement('div');
-        header.className = 'nav-row';
         const idxEl = document.createElement('span');
         idxEl.className = 'nav-index';
         if (scene.idx) {

From f5f1a771fe84b1d19c4ceaf4a8458ea7cacd9181 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 17:21:46 -0600
Subject: [PATCH 083/139] cleanup

---
 selfdrive/ui/tests/diff/diff_template.html | 74 ++++++++--------------
 1 file changed, 26 insertions(+), 48 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 589062825fdafb..ee4fbd93320249 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -17,10 +17,10 @@
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
     #nav button.type-delete { border-color: #c0392b; }
     #nav button.type-delete.active { border-color: #922b21; background: #fde8e6; }
+    .nav-title { flex: 1; text-align: center; font-weight: 600; }
+    .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; }
     .nav-index { position: absolute; left: 6px; bottom: 4px; font-weight: 600; color: #777; }
     .nav-index.hidden { display: none; }
-    .nav-action { flex: 1; text-align: center; font-weight: 600; }
-    .nav-desc { font-size: 0.60rem; padding: 0.12rem 0.25rem 0.35rem; text-align: center; }
     @media (max-width: 800px) {
       table.videos tr { display: flex; flex-direction: column; }
       table.videos td { width: 100%; }
@@ -47,16 +47,16 @@ <h2>UI Diff</h2>
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ v1_start, v1_end, v2_start, v2_end, v1_count, v2_count, type, clips, thumb }, i) => {
-        // Build action text based on type and frame counts
-        let actionText;
+        // Build title based on type and frame counts
+        let title;
         if (type === 'insert') {
-          actionText = `Added ${frames_label(v2_count)}`;
+          title = `Added ${frames_label(v2_count)}`;
         } else if (type === 'delete') {
-          actionText = `Removed ${frames_label(v1_count)}`;
+          title = `Removed ${frames_label(v1_count)}`;
         } else if (type === 'replace') {
-          actionText = (v1_count === v2_count) ? `Changed ${frames_label(v1_count)}` : `Changed ${v1_count}→${v2_count} frames`;
+          title = (v1_count === v2_count) ? `Changed ${frames_label(v1_count)}` : `Changed ${v1_count}→${v2_count} frames`;
         } else {
-          actionText = frames_label(Math.max(v1_count || 0, v2_count || 0));
+          title = frames_label(Math.max(v1_count || 0, v2_count || 0));
         }
 
         // Build description with frame ranges
@@ -77,13 +77,8 @@ <h2>UI Diff</h2>
         }
 
         return {
-          idx: i + 1,
-          title: actionText || `Group ${i + 1}`,
-          desc: desc,
-          type: type || '',
+          idx: i + 1, title, desc, type, thumb, loop: true,
           srcs: [clips.video1, clips.video2, clips.diff],
-          thumb: thumb || '',
-          loop: true,
         };
       }),
     ];
@@ -171,42 +166,25 @@ <h4>${label}</h4>
 
     // Build nav buttons (hide the nav entirely when there are no diff segments).
     const navEl = document.getElementById('nav');
-    if (scenes.length > 1) {
-      scenes.forEach((scene, i) => {
-        const btn = document.createElement('button');
-        const navClass = TYPE_NAV_CLASSES[scene.type];
-        if (navClass) btn.classList.add(navClass);
-        if (scene.thumb) {
-          const img = document.createElement('img');
-          img.src = scene.thumb;
-          img.alt = scene.title;
-          btn.appendChild(img);
-        }
-        const header = document.createElement('div');
-        const idxEl = document.createElement('span');
-        idxEl.className = 'nav-index';
-        if (scene.idx) {
-          idxEl.textContent = scene.idx + '.';
-        } else {
-          idxEl.classList.add('hidden');
-        }
-        const actionEl = document.createElement('span');
-        actionEl.className = 'nav-action';
-        const icon = TYPE_ICON[scene.type] || '';
-        actionEl.textContent = (icon ? icon + ' ' : '') + scene.title;
-        header.appendChild(actionEl);
-        header.appendChild(idxEl);
-        const desc = document.createElement('span');
-        desc.className = 'nav-desc';
-        desc.textContent = scene.desc || '';
-        btn.title = ((scene.title || '') + (scene.desc ? ' — ' + scene.desc : '')).trim();
-        btn.appendChild(header);
-        btn.appendChild(desc);
+    if (scenes.length === 0) {
+      navEl.style.display = 'none';
+    } else {
+      let navHtml = '';
+      scenes.forEach(({ idx, type, title, desc, thumb }, i) => {
+        const navClass = TYPE_NAV_CLASSES[type] ? TYPE_NAV_CLASSES[type] : '';
+        const icon = TYPE_ICON[type] || '';
+        const thumbHtml = thumb ? `<img src="${thumb}" alt="${title}">` : '';
+        const descHtml = `<span class="nav-desc">${desc || ''}</span>`;
+        const titleHtml = `<span class="nav-title">${icon ? icon + ' ' : ''}${title}</span>`;
+        const idxHtml = `<span class="${idx ? 'nav-index' : 'nav-index hidden'}">${idx ? idx + '.' : ''}</span>`;
+        const headerHtml = `<div>${titleHtml}${idxHtml}</div>`;
+        const btnTitle = ((title || '') + (desc ? ' — ' + desc : '')).trim();
+        navHtml += `<button class="${navClass}" title="${btnTitle}" data-idx="${i}">${thumbHtml}${headerHtml}${descHtml}</button>`;
+      });
+      navEl.innerHTML = navHtml;
+      Array.from(navEl.children).forEach((btn, i) => {
         btn.onclick = () => switchTo(i);
-        navEl.appendChild(btn);
       });
-    } else {
-      navEl.style.display = 'none';
     }
 
     // On load: if ?selected=N is present, select that scene; otherwise default to 0.

From 08d593b2f61c6d1cf0cfd5f513c87fa341298c28 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 17:26:11 -0600
Subject: [PATCH 084/139] clean

---
 selfdrive/ui/tests/diff/diff_template.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index ee4fbd93320249..591f3578359609 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -164,22 +164,21 @@ <h4>${label}</h4>
     const TYPE_ICON = { replace: '✏️', insert: '➕', delete: '➖' };
     const TYPE_NAV_CLASSES = { insert: 'type-insert', delete: 'type-delete' };
 
-    // Build nav buttons (hide the nav entirely when there are no diff segments).
+    // Build nav buttons for each scene/chunk
     const navEl = document.getElementById('nav');
     if (scenes.length === 0) {
-      navEl.style.display = 'none';
+      navEl.style.display = 'none';  // hide the nav container if there are no diff chunks
     } else {
       let navHtml = '';
       scenes.forEach(({ idx, type, title, desc, thumb }, i) => {
-        const navClass = TYPE_NAV_CLASSES[type] ? TYPE_NAV_CLASSES[type] : '';
-        const icon = TYPE_ICON[type] || '';
         const thumbHtml = thumb ? `<img src="${thumb}" alt="${title}">` : '';
-        const descHtml = `<span class="nav-desc">${desc || ''}</span>`;
+        const icon = TYPE_ICON[type] || '';
         const titleHtml = `<span class="nav-title">${icon ? icon + ' ' : ''}${title}</span>`;
-        const idxHtml = `<span class="${idx ? 'nav-index' : 'nav-index hidden'}">${idx ? idx + '.' : ''}</span>`;
+        const descHtml = `<span class="nav-desc">${desc || ''}</span>`;
+        const idxHtml = `<span class="nav-index${idx ? '' : ' hidden'}">${idx ? idx + '.' : ''}</span>`;
         const headerHtml = `<div>${titleHtml}${idxHtml}</div>`;
         const btnTitle = ((title || '') + (desc ? ' — ' + desc : '')).trim();
-        navHtml += `<button class="${navClass}" title="${btnTitle}" data-idx="${i}">${thumbHtml}${headerHtml}${descHtml}</button>`;
+        navHtml += `<button class="${TYPE_NAV_CLASSES[type] || ''}" title="${btnTitle}" data-idx="${i}">${thumbHtml}${headerHtml}${descHtml}</button>`;
       });
       navEl.innerHTML = navHtml;
       Array.from(navEl.children).forEach((btn, i) => {

From ff4a9a5f8c4f0538be5af22c4e6c10435af6fa14 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 18:13:23 -0600
Subject: [PATCH 085/139] more improvements and cleanup

---
 selfdrive/ui/tests/diff/diff_template.html | 26 ++++++++++++----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 591f3578359609..8fe779f1577d86 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -10,9 +10,10 @@
     table.videos { width: 100%; }
     .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
-    #nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; width: 200px; position: relative; }
+    #nav button { width: 200px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; position: relative; }
     #nav button img { width: 100%; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
+    #nav button.type-full { justify-content: center; }
     #nav button.type-insert { border-color: #2a9d2a; }
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }
     #nav button.type-delete { border-color: #c0392b; }
@@ -42,7 +43,7 @@ <h2>UI Diff</h2>
     const frames_label = (n) => `${n} frame${n !== 1 ? 's' : ''}`;
     const frames_range_label = (start, end) =>
       start === end ? `frame ${start + 1}` : `frames ${start + 1}–${end + 1}`;
-    const video_frames_range_label = (v, start, end) => `video ${v}: ${frames_range_label(start, end)}`;
+    const video_frames_range_label = (v, start, end) => `${frames_range_label(start, end)} (video ${v})`;
 
     const scenes = [
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
@@ -50,11 +51,16 @@ <h2>UI Diff</h2>
         // Build title based on type and frame counts
         let title;
         if (type === 'insert') {
-          title = `Added ${frames_label(v2_count)}`;
+          title = `➕ Added ${frames_label(v2_count)}`;
         } else if (type === 'delete') {
-          title = `Removed ${frames_label(v1_count)}`;
+          title = `➖ Removed ${frames_label(v1_count)}`;
         } else if (type === 'replace') {
-          title = (v1_count === v2_count) ? `Changed ${frames_label(v1_count)}` : `Changed ${v1_count}→${v2_count} frames`;
+          if (v1_count === v2_count) {
+            title = `✏️ Changed ${frames_label(v1_count)}`;
+          } else {
+            const changeType = v2_count > v1_count ? '➕' : '➖';
+            title = `✏️${changeType} Changed ${v1_count}→${v2_count} frames`;
+          }
         } else {
           title = frames_label(Math.max(v1_count || 0, v2_count || 0));
         }
@@ -66,9 +72,7 @@ <h2>UI Diff</h2>
         } else if (type === 'delete') {
           desc = video_frames_range_label(1, v1_start, v1_end);
         } else if (type === 'replace') {
-          const a = video_frames_range_label(1, v1_start, v1_end);
-          const b = video_frames_range_label(2, v2_start, v2_end);
-          desc = `${a} → ${b}`;
+          desc = `${video_frames_range_label(1, v1_start, v1_end)} → ${video_frames_range_label(2, v2_start, v2_end)}`;
         } else {
           const parts = [];
           if (v1_count) parts.push(video_frames_range_label(1, v1_start, v1_end));
@@ -161,7 +165,6 @@ <h4>${label}</h4>
       history.replaceState(null, '', newUrl);
     }
 
-    const TYPE_ICON = { replace: '✏️', insert: '➕', delete: '➖' };
     const TYPE_NAV_CLASSES = { insert: 'type-insert', delete: 'type-delete' };
 
     // Build nav buttons for each scene/chunk
@@ -172,13 +175,12 @@ <h4>${label}</h4>
       let navHtml = '';
       scenes.forEach(({ idx, type, title, desc, thumb }, i) => {
         const thumbHtml = thumb ? `<img src="${thumb}" alt="${title}">` : '';
-        const icon = TYPE_ICON[type] || '';
-        const titleHtml = `<span class="nav-title">${icon ? icon + ' ' : ''}${title}</span>`;
+        const titleHtml = `<span class="nav-title">${title}</span>`;
         const descHtml = `<span class="nav-desc">${desc || ''}</span>`;
         const idxHtml = `<span class="nav-index${idx ? '' : ' hidden'}">${idx ? idx + '.' : ''}</span>`;
         const headerHtml = `<div>${titleHtml}${idxHtml}</div>`;
         const btnTitle = ((title || '') + (desc ? ' — ' + desc : '')).trim();
-        navHtml += `<button class="${TYPE_NAV_CLASSES[type] || ''}" title="${btnTitle}" data-idx="${i}">${thumbHtml}${headerHtml}${descHtml}</button>`;
+        navHtml += `<button class="${type ? TYPE_NAV_CLASSES[type] || '' : 'type-full'}" title="${btnTitle}" data-idx="${i}">${thumbHtml}${headerHtml}${descHtml}</button>`;
       });
       navEl.innerHTML = navHtml;
       Array.from(navEl.children).forEach((btn, i) => {

From c900e5e8161dc5c431ecc387f08bae6a732b1650 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 18:22:27 -0600
Subject: [PATCH 086/139] align top

---
 selfdrive/ui/tests/diff/diff_template.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 8fe779f1577d86..51de615d30a6c8 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -8,6 +8,7 @@
     body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     table.videos { width: 100%; }
+    table.videos td { vertical-align: top; }
     .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
     #nav button { width: 200px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; position: relative; }

From e46415d424b898be03e7c0ebee2f736593e67aa3 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 18:58:23 -0600
Subject: [PATCH 087/139] fix no video placeholder size

---
 selfdrive/ui/tests/diff/diff_template.html | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 51de615d30a6c8..8e460aea622e2d 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -9,7 +9,7 @@
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     table.videos { width: 100%; }
     table.videos td { vertical-align: top; }
-    .no-video { display: none; width: 100%; min-height: 180px; border: 1px dashed #aaa; background: #fafafa; color: #666; align-items: center; justify-content: center; text-align: center; }
+    .no-video { display: none; width: 100%; align-items: center; justify-content: center; text-align: center; border: 1px dashed #aaa; box-sizing: border-box; background: #fafafa; color: #666; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
     #nav button { width: 200px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; position: relative; }
     #nav button img { width: 100%; }
@@ -107,8 +107,23 @@ <h4>${label}</h4>
 
     const isEnded = (v, i) => !active[i] || v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
 
+    const applySceneAspectRatio = (ratio) => {
+      noVideoEls.forEach((el) => el.style.aspectRatio = ratio);
+    };
+
+    // Need to sync aspect ratio across videos so the no video placeholders will have the correct size
+    const syncAspectRatioFromAnyActiveVideo = () => {
+      const reference = videos.find((v, i) => active[i] && v.videoWidth > 0 && v.videoHeight > 0);
+      if (!reference) return;
+      applySceneAspectRatio(`${reference.videoWidth} / ${reference.videoHeight}`);
+    };
+
     // Sync: keep playing videos at the same playhead
     videos.forEach((v, vi) => {
+      v.addEventListener('loadedmetadata', () => {
+        if (active[vi]) syncAspectRatioFromAnyActiveVideo();
+      });
+
       v.addEventListener('timeupdate', () => {
         if (restarting || !active[vi]) return;
         videos.forEach((o, oi) => {
@@ -141,7 +156,7 @@ <h4>${label}</h4>
     function switchTo(idx) {
       restarting = false;
       videos.forEach(v => { v.pause(); v.loop = false; });  // never use native loop
-      const { srcs, loop, type } = scenes[idx];
+      const { srcs, loop } = scenes[idx];
       loopEnabled = loop;
 
       videos.forEach((v, vi) => {

From 49a089ee94258a3a9bb42d36dc7953aca0a25165 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 19:17:08 -0600
Subject: [PATCH 088/139] fix flashing

---
 selfdrive/ui/tests/diff/diff_template.html | 36 ++++++++++------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 8e460aea622e2d..c8fb01ea72a664 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -9,7 +9,10 @@
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     table.videos { width: 100%; }
     table.videos td { vertical-align: top; }
-    .no-video { display: none; width: 100%; align-items: center; justify-content: center; text-align: center; border: 1px dashed #aaa; box-sizing: border-box; background: #fafafa; color: #666; }
+    .video-box { width: 100%; position: relative; aspect-ratio: var(--scene-aspect, 16/9); }
+    .video-box video, .video-box .no-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
+    .video-box video { object-fit: contain; }
+    .no-video { display: none; align-items: center; justify-content: center; text-align: center; border: 1px dashed #aaa; box-sizing: border-box; background: #fafafa; color: #666; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
     #nav button { width: 200px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; position: relative; }
     #nav button img { width: 100%; }
@@ -92,13 +95,14 @@ <h2>UI Diff</h2>
     document.getElementById('player').innerHTML = `<table class='videos'><tbody><tr>
         ${LABELS.map((label, i) => `<td width='33.33%'>
           <h4>${label}</h4>
-          <div>
-            <video id='v${i}' width='100%' muted playsinline><source type='video/mp4'></video>
+          <div class='video-box'>
+            <video id='v${i}' width='100%' muted playsinline preload='metadata'><source type='video/mp4'></video>
             <div id='nv${i}' class='no-video'>No video</div>
           </div>
         </td>`).join('')}
       </tr></tbody></table>`;
     const videos = [0, 1, 2].map(i => document.getElementById(`v${i}`));
+    const videoBoxes = Array.from(document.querySelectorAll('.video-box'));
     const noVideoEls = [0, 1, 2].map(i => document.getElementById(`nv${i}`));
     let active = [true, true, true];  // Whether each video is active/exists for the current scene
 
@@ -108,20 +112,17 @@ <h4>${label}</h4>
     const isEnded = (v, i) => !active[i] || v.ended || (Number.isFinite(v.duration) && v.currentTime >= v.duration - 0.05);
 
     const applySceneAspectRatio = (ratio) => {
-      noVideoEls.forEach((el) => el.style.aspectRatio = ratio);
-    };
-
-    // Need to sync aspect ratio across videos so the no video placeholders will have the correct size
-    const syncAspectRatioFromAnyActiveVideo = () => {
-      const reference = videos.find((v, i) => active[i] && v.videoWidth > 0 && v.videoHeight > 0);
-      if (!reference) return;
-      applySceneAspectRatio(`${reference.videoWidth} / ${reference.videoHeight}`);
+      videoBoxes.forEach(box => box.style.setProperty('--scene-aspect', ratio));
     };
 
     // Sync: keep playing videos at the same playhead
     videos.forEach((v, vi) => {
       v.addEventListener('loadedmetadata', () => {
-        if (active[vi]) syncAspectRatioFromAnyActiveVideo();
+        // Once metadata is available for this video, update scene ratio from this video and hide its placeholder
+        if (!active[vi]) return
+        if (v.videoWidth > 0 && v.videoHeight > 0) applySceneAspectRatio(`${v.videoWidth}/${v.videoHeight}`);
+        noVideoEls[vi].style.display = 'none';
+        v.style.display = '';
       });
 
       v.addEventListener('timeupdate', () => {
@@ -165,14 +166,9 @@ <h4>${label}</h4>
         const source = v.querySelector('source');
         source.src = src || '';
         v.load();
-        if (active[vi]) {
-          v.style.display = '';
-          noVideoEls[vi].style.display = 'none';
-          v.play().catch(() => {});
-        } else {
-          v.style.display = 'none';
-          noVideoEls[vi].style.display = 'flex';
-        }
+        v.style.display = src ? '' : 'none';
+        if (src) v.play().catch(() => {});
+        noVideoEls[vi].style.display = 'flex';  // Show placeholder until metadata loads
       });
 
       document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === idx));

From f93b464b1f386ac8fe79b6dbcc0f8f22e79180ab Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 19:25:19 -0600
Subject: [PATCH 089/139] show loading

---
 selfdrive/ui/tests/diff/diff_template.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index c8fb01ea72a664..3a0d7d37d2d1d8 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -168,7 +168,8 @@ <h4>${label}</h4>
         v.load();
         v.style.display = src ? '' : 'none';
         if (src) v.play().catch(() => {});
-        noVideoEls[vi].style.display = 'flex';  // Show placeholder until metadata loads
+        noVideoEls[vi].style.display = 'flex';  // Show placeholder until video is ready
+        noVideoEls[vi].innerHTML = src ? 'Loading…' : 'No video';
       });
 
       document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === idx));

From eca7c6085559bbe747cf3adbdc278b3ff2bc77ee Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 19:27:26 -0600
Subject: [PATCH 090/139] simplify

---
 selfdrive/ui/tests/diff/diff_template.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3a0d7d37d2d1d8..93828fcfd0e19a 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -202,12 +202,10 @@ <h4>${label}</h4>
     }
 
     // On load: if ?selected=N is present, select that scene; otherwise default to 0.
-    (function selectInitialFromQuery() {
-      const params = new URLSearchParams(window.location.search);
-      const v = parseInt(params.get('selected') || '0', 10);
-      const initial = (!Number.isNaN(v) && v >= 0 && v < scenes.length) ? v : 0;
-      switchTo(initial);
-    })();
+    const params = new URLSearchParams(window.location.search);
+    const v = parseInt(params.get('selected') || '0', 10);
+    const initial = (!Number.isNaN(v) && v >= 0 && v < scenes.length) ? v : 0;
+    switchTo(initial);
   </script>
 </body>
 </html>

From c112bd5c081092ac495eb743a9b6b7aef4805962 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 19:37:21 -0600
Subject: [PATCH 091/139] enhance video loading experience with placeholders
 and smooth scrolling

---
 selfdrive/ui/tests/diff/diff_template.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 93828fcfd0e19a..3588cb23357d59 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -160,6 +160,7 @@ <h4>${label}</h4>
       const { srcs, loop } = scenes[idx];
       loopEnabled = loop;
 
+      // Update videos with new sources, show/hide as needed, and show placeholders until ready
       videos.forEach((v, vi) => {
         const src = srcs[vi];
         active[vi] = !!src;
@@ -168,14 +169,21 @@ <h4>${label}</h4>
         v.load();
         v.style.display = src ? '' : 'none';
         if (src) v.play().catch(() => {});
-        noVideoEls[vi].style.display = 'flex';  // Show placeholder until video is ready
-        noVideoEls[vi].innerHTML = src ? 'Loading…' : 'No video';
+        // Show placeholder until video is ready
+        noVideoEls[vi].style.display = 'flex';
+        noVideoEls[vi].innerText = src ? 'Loading…' : 'No video';
       });
 
+      // Update active nav button
       document.querySelectorAll('#nav button').forEach((b, j) => b.classList.toggle('active', j === idx));
+
+      // Update selected query param
       const newUrl = new URL(window.location);
       idx > 0 ? newUrl.searchParams.set('selected', idx) : newUrl.searchParams.delete('selected');
       history.replaceState(null, '', newUrl);
+
+      // Scroll to top (nicer on mobile)
+      window.scrollTo({ top: 0, behavior: 'smooth' });
     }
 
     const TYPE_NAV_CLASSES = { insert: 'type-insert', delete: 'type-delete' };
@@ -201,7 +209,7 @@ <h4>${label}</h4>
       });
     }
 
-    // On load: if ?selected=N is present, select that scene; otherwise default to 0.
+    // If 'selected' query param is present, use that scene; otherwise default to 0.
     const params = new URLSearchParams(window.location.search);
     const v = parseInt(params.get('selected') || '0', 10);
     const initial = (!Number.isNaN(v) && v >= 0 && v < scenes.length) ? v : 0;

From e88183867690e97c0d884585aeeabf1e43bdb320 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 20:51:11 -0600
Subject: [PATCH 092/139] copy diff chunks in workflow

---
 .github/workflows/ui_preview.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ui_preview.yaml b/.github/workflows/ui_preview.yaml
index 72ced4985228d1..3af90d160f3ba8 100644
--- a/.github/workflows/ui_preview.yaml
+++ b/.github/workflows/ui_preview.yaml
@@ -122,6 +122,7 @@ jobs:
 
             cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.html" "${{ github.workspace }}/pr_ui/"
             cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.mp4" "${{ github.workspace }}/pr_ui/"
+            cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" "${{ github.workspace }}/pr_ui/"
 
             REPORT_URL="https://commaai.github.io/ci-artifacts/${diff_name}_pr_${{ github.event.number }}.html"
             if [ $diff_exit_code -eq 0 ]; then

From f7e319768fdad9b8994ab887b869f7ad8785b81d Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 20:56:12 -0600
Subject: [PATCH 093/139] fix bug

---
 selfdrive/ui/tests/diff/diff_template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 3588cb23357d59..f2787a6375aaf6 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -190,8 +190,8 @@ <h4>${label}</h4>
 
     // Build nav buttons for each scene/chunk
     const navEl = document.getElementById('nav');
-    if (scenes.length === 0) {
-      navEl.style.display = 'none';  // hide the nav container if there are no diff chunks
+    if (scenes.length <= 1) {
+      navEl.style.display = 'none';  // hide the nav container if there are no diff chunks (only the full video scene)
     } else {
       let navHtml = '';
       scenes.forEach(({ idx, type, title, desc, thumb }, i) => {

From 5e4fea13fd0eac02aa4bf820ddb3c00655ad5131 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 21:06:13 -0600
Subject: [PATCH 094/139] cleanup and refactor pass

---
 selfdrive/ui/tests/diff/diff.py | 50 +++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 15413d0ae3b2ad..7d52a577db7066 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -121,14 +121,14 @@ def _rel_path(p: Path) -> str:
     # --- video1 clip ---
     v1_clip = output_dir / f"{i:03d}_video1.mp4"
     if chunk_type != 'insert':
-      print(f"  Chunk {i + 1}/{n} (v1/{chunk_type}) frames {v1_start}-{v1_end}")
+      print(f"  [{i + 1}/{n}] video1 ({chunk_type}): frames {v1_start}-{v1_end}")
       extract_clip(video1, v1_start, v1_end, v1_clip, fps)
       clips['video1'] = _rel_path(v1_clip)
 
     # --- video2 clip ---
     v2_clip = output_dir / f"{i:03d}_video2.mp4"
     if chunk_type != 'delete':
-      print(f"  Chunk {i + 1}/{n} (v2/{chunk_type}) frames {v2_start}-{v2_end}")
+      print(f"  [{i + 1}/{n}] video2 ({chunk_type}): frames {v2_start}-{v2_end}")
       extract_clip(video2, v2_start, v2_end, v2_clip, fps)
       clips['video2'] = _rel_path(v2_clip)
 
@@ -145,7 +145,7 @@ def _rel_path(p: Path) -> str:
     thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity; JPG is smaller for the other thumbnails
     thumb_path = output_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
-    print(f"  Chunk {i + 1}/{n} (thumb) frame {thumb_frame}")
+    print(f"  [{i + 1}/{n}] thumbnail: frame {thumb_frame}")
     generate_thumbnail(thumb_source, thumb_frame, thumb_path, fps)
 
     clip_sets.append({
@@ -159,7 +159,7 @@ def _rel_path(p: Path) -> str:
 
 
 def generate_html_report(
-  videos: tuple[str, str], basedir: str, diff_frame_count: int, frame_counts: tuple[int, int], diff_video_name: str, clip_sets: list[dict]
+  videos: tuple[Path, Path], basedir: str, diff_frame_count: int, frame_counts: tuple[int, int], diff_video_name: str, clip_sets: list[dict]
 ) -> str:
   total_frames = max(frame_counts)
   frame_delta = frame_counts[1] - frame_counts[0]
@@ -174,8 +174,8 @@ def generate_html_report(
   # Load HTML template and replace placeholders
   html = HTML_TEMPLATE_PATH.read_text()
   placeholders = {
-    "VIDEO1_SRC": os.path.join(basedir, os.path.basename(videos[0])),
-    "VIDEO2_SRC": os.path.join(basedir, os.path.basename(videos[1])),
+    "VIDEO1_SRC": os.path.join(basedir, videos[0].name),
+    "VIDEO2_SRC": os.path.join(basedir, videos[1].name),
     "DIFF_SRC": os.path.join(basedir, diff_video_name),
     "RESULT_TEXT": result_text,
     "CHUNKS_JSON": json.dumps(clip_sets),
@@ -199,6 +199,12 @@ def main():
   if not args.output.lower().endswith('.html'):
     args.output += '.html'
 
+  video1 = Path(args.video1)
+  video2 = Path(args.video2)
+  missing = [str(p) for p in (video1, video2) if not p.exists()]
+  if missing:
+    parser.error(f"Video file(s) not found: {', '.join(missing)}")
+
   output_stem = Path(args.output).stem
   diff_video_name = f"{output_stem}.mp4"
   chunks_folder_name = f"{output_stem}-chunks"
@@ -206,19 +212,20 @@ def main():
   os.makedirs(DIFF_OUT_DIR, exist_ok=True)
 
   print("=" * 60)
-  print("VIDEO DIFF - HTML REPORT")
+  print("UI VIDEO DIFF REPORT")
   print("=" * 60)
-  print(f"Video 1: {args.video1}")
-  print(f"Video 2: {args.video2}")
-  print(f"Output: {args.output}")
-  print(f"Diff video: {diff_video_name}")
+  print(f"Video 1    : {video1}")
+  print(f"Video 2    : {video2}")
+  print(f"HTML output: {args.output}")
+  print(f"Diff video : {diff_video_name}")
   print(f"Diff chunks: {chunks_folder_name}")
   print()
 
-  print("Creating diff video...")
-  create_diff_video(args.video1, args.video2,  str(DIFF_OUT_DIR / diff_video_name))
+  print("[1/4] Creating full diff video...")
+  create_diff_video(video1, video2, DIFF_OUT_DIR / diff_video_name)
 
-  hashes1, hashes2 = get_video_frame_hashes(args.video1, args.video2)
+  print("[2/4] Hashing frames...")
+  hashes1, hashes2 = get_video_frame_hashes(str(video1), str(video2))
   frame_counts = (len(hashes1), len(hashes2))
 
   chunks = compute_diff_chunks(hashes1, hashes2)
@@ -226,19 +233,20 @@ def main():
 
   clip_sets = []
   if chunks:
-    print(f"\nExtracting {len(chunks)} diff chunks(s)...")
-    fps = get_video_fps(args.video1)
-    clip_sets = extract_chunk_clips(args.video1, args.video2, chunks, fps, args.basedir, chunks_folder_name)
+    print(f"[3/4] Extracting {len(chunks)} diff chunk(s)...")
+    fps = get_video_fps(video1)
+    clip_sets = extract_chunk_clips(video1, video2, chunks, fps, args.basedir, chunks_folder_name)
+  else:
+    print("[3/4] No per-chunk differences found.")
 
-  print()
-  print("Generating HTML report...")
-  html = generate_html_report((args.video1, args.video2), args.basedir, diff_frame_count, frame_counts, diff_video_name, clip_sets)
+  print("[4/4] Generating HTML report...")
+  html = generate_html_report((video1, video2), args.basedir, diff_frame_count, frame_counts, diff_video_name, clip_sets)
 
   output_path = DIFF_OUT_DIR / args.output
   with open(output_path, 'w') as f:
     f.write(html)
 
-  print(f"Report generated at '{output_path}'")
+  print(f"Report generated at: {output_path}")
 
   # Open in browser by default
   if not args.no_open:

From 9221870fca0b11040b9ea04de36d1c6fcc61aace Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 21:31:43 -0600
Subject: [PATCH 095/139] parallelize video frame hashing

---
 selfdrive/ui/tests/diff/diff.py | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 7d52a577db7066..6d38dd8a592e41 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -6,6 +6,7 @@
 import subprocess
 import webbrowser
 import argparse
+from concurrent.futures import ThreadPoolExecutor
 from dataclasses import dataclass
 from typing import Literal
 from pathlib import Path
@@ -33,12 +34,15 @@ def extract_framehashes(video_path: str) -> list[str]:
 
 
 def get_video_frame_hashes(video1: str, video2: str) -> tuple[list[str], list[str]]:
-  """Hash every frame of both videos and return the two hash lists."""
-  print("Hashing frames from video 1...")
-  hashes1 = extract_framehashes(video1)
+  """Hash every frame of both videos in parallel and return the two hash lists."""
+  with ThreadPoolExecutor(max_workers=2) as executor:
+    print("Generating frame hashes for both videos...")
+    future1 = executor.submit(extract_framehashes, video1)
+    future2 = executor.submit(extract_framehashes, video2)
+    hashes1 = future1.result()
+    hashes2 = future2.result()
+
   print(f"  Found {len(hashes1)} frames in video 1.")
-  print("Hashing frames from video 2...")
-  hashes2 = extract_framehashes(video2)
   print(f"  Found {len(hashes2)} frames in video 2.")
   return hashes1, hashes2
 

From 6a29d05574c5234befdb559536d2fdda4526ab73 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 23:20:28 -0600
Subject: [PATCH 096/139] update styles

---
 selfdrive/ui/tests/diff/diff_template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index f2787a6375aaf6..f7002572e3fb0d 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -8,11 +8,11 @@
     body { font-family: sans-serif; margin: 0.75em; }
     h1, h2, h3, h4 { margin: 0.5em 0 0.25em; }
     table.videos { width: 100%; }
-    table.videos td { vertical-align: top; }
+    /* Video box is used to maintain aspect ratio for video placeholder size and to prevent layout shifts when switching scenes */
     .video-box { width: 100%; position: relative; aspect-ratio: var(--scene-aspect, 16/9); }
     .video-box video, .video-box .no-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
     .video-box video { object-fit: contain; }
-    .no-video { display: none; align-items: center; justify-content: center; text-align: center; border: 1px dashed #aaa; box-sizing: border-box; background: #fafafa; color: #666; }
+    .video-box .no-video { display: none; align-items: center; justify-content: center; text-align: center; border: 1px dashed #aaa; box-sizing: border-box; background: #fafafa; color: #666; }
     #nav { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0;}
     #nav button { width: 200px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; position: relative; }
     #nav button img { width: 100%; }

From 5c7eeb0fdd759b4829f9225accc5721491e9586e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 23:31:01 -0600
Subject: [PATCH 097/139] use Path instead

---
 selfdrive/ui/tests/diff/diff.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 6d38dd8a592e41..46885303baa5f2 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -19,8 +19,8 @@
 CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
 
 
-def extract_framehashes(video_path: str) -> list[str]:
-  cmd = ['ffmpeg', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
+def extract_framehashes(video_path: Path) -> list[str]:
+  cmd = ['ffmpeg', '-i', str(video_path), '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   hashes = []
   for line in result.stdout.splitlines():
@@ -33,7 +33,7 @@ def extract_framehashes(video_path: str) -> list[str]:
   return hashes
 
 
-def get_video_frame_hashes(video1: str, video2: str) -> tuple[list[str], list[str]]:
+def get_video_frame_hashes(video1: Path, video2: Path) -> tuple[list[str], list[str]]:
   """Hash every frame of both videos in parallel and return the two hash lists."""
   with ThreadPoolExecutor(max_workers=2) as executor:
     print("Generating frame hashes for both videos...")
@@ -229,7 +229,7 @@ def main():
   create_diff_video(video1, video2, DIFF_OUT_DIR / diff_video_name)
 
   print("[2/4] Hashing frames...")
-  hashes1, hashes2 = get_video_frame_hashes(str(video1), str(video2))
+  hashes1, hashes2 = get_video_frame_hashes(video1, video2)
   frame_counts = (len(hashes1), len(hashes2))
 
   chunks = compute_diff_chunks(hashes1, hashes2)

From a5add3cc1fb07ff6a871ae304503e1fca3da3104 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 23:33:25 -0600
Subject: [PATCH 098/139] do diff in parallel

---
 selfdrive/ui/tests/diff/diff.py | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 46885303baa5f2..b0f6ee2effc0cd 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -6,6 +6,7 @@
 import subprocess
 import webbrowser
 import argparse
+import threading
 from concurrent.futures import ThreadPoolExecutor
 from dataclasses import dataclass
 from typing import Literal
@@ -74,7 +75,7 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
 
 def create_diff_video(video1: Path, video2: Path, output: Path) -> None:
   """Create a diff video of two clips using ffmpeg blend filter with difference mode."""
-  cmd = ['ffmpeg', '-i', str(video1), '-i', str(video2), '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(output)]
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video1), '-i', str(video2), '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(output)]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
@@ -112,6 +113,8 @@ def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: fl
   os.makedirs(output_dir, exist_ok=True)
   n = len(chunks)
 
+  # TODO: We should definitely try to do this in parallel, but it makes it more complex, so leaving for now
+
   for i, chunk in enumerate(chunks):
     chunk_type = chunk.type
     v1_start, v1_end, v1_count = chunk.v1_start, chunk.v1_end, chunk.v1_count
@@ -225,8 +228,9 @@ def main():
   print(f"Diff chunks: {chunks_folder_name}")
   print()
 
-  print("[1/4] Creating full diff video...")
-  create_diff_video(video1, video2, DIFF_OUT_DIR / diff_video_name)
+  print("[1/4] Starting full diff video in background...")
+  diff_thread = threading.Thread(target=create_diff_video, args=(video1, video2, DIFF_OUT_DIR / diff_video_name))
+  diff_thread.start()
 
   print("[2/4] Hashing frames...")
   hashes1, hashes2 = get_video_frame_hashes(video1, video2)
@@ -257,6 +261,9 @@ def main():
     print(f"Opening {args.output} in browser...")
     webbrowser.open(f'file://{os.path.abspath(output_path)}')
 
+  print("Waiting for full diff video to finish...")
+  diff_thread.join()
+
   return 0 if diff_frame_count == 0 else 1
 
 

From 0c31cd33f865769b4c4865d1895a3d69809ee3ae Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 21 Feb 2026 21:26:24 -0600
Subject: [PATCH 099/139] process chunks in parallel

---
 selfdrive/ui/tests/diff/diff.py | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index b0f6ee2effc0cd..84c0db741f0463 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -21,7 +21,7 @@
 
 
 def extract_framehashes(video_path: Path) -> list[str]:
-  cmd = ['ffmpeg', '-i', str(video_path), '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   hashes = []
   for line in result.stdout.splitlines():
@@ -94,7 +94,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
   start_time = padded_start / fps
-  cmd = ['ffmpeg', '-i', str(video_path), '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)]
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)]
   subprocess.run(cmd, capture_output=True, check=True)
   return total_frames
 
@@ -102,7 +102,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
 def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float) -> None:
   """Create a single-frame PNG thumbnail at the given frame index."""
   t = frame / fps
-  cmd = ['ffmpeg', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
@@ -113,9 +113,7 @@ def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: fl
   os.makedirs(output_dir, exist_ok=True)
   n = len(chunks)
 
-  # TODO: We should definitely try to do this in parallel, but it makes it more complex, so leaving for now
-
-  for i, chunk in enumerate(chunks):
+  def process_chunk(i: int, chunk: Chunk) -> dict:
     chunk_type = chunk.type
     v1_start, v1_end, v1_count = chunk.v1_start, chunk.v1_end, chunk.v1_count
     v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count
@@ -128,20 +126,21 @@ def _rel_path(p: Path) -> str:
     # --- video1 clip ---
     v1_clip = output_dir / f"{i:03d}_video1.mp4"
     if chunk_type != 'insert':
-      print(f"  [{i + 1}/{n}] video1 ({chunk_type}): frames {v1_start}-{v1_end}")
+      # print(f"  [{i + 1}/{n}] video1 ({chunk_type}): frames {v1_start}-{v1_end}")
       extract_clip(video1, v1_start, v1_end, v1_clip, fps)
       clips['video1'] = _rel_path(v1_clip)
 
     # --- video2 clip ---
     v2_clip = output_dir / f"{i:03d}_video2.mp4"
     if chunk_type != 'delete':
-      print(f"  [{i + 1}/{n}] video2 ({chunk_type}): frames {v2_start}-{v2_end}")
+      # print(f"  [{i + 1}/{n}] video2 ({chunk_type}): frames {v2_start}-{v2_end}")
       extract_clip(video2, v2_start, v2_end, v2_clip, fps)
       clips['video2'] = _rel_path(v2_clip)
 
     # --- diff clip ---
     diff_clip = output_dir / f"{i:03d}_diff.mp4"
     if chunk_type == 'replace':
+      # print(f"  [{i + 1}/{n}] diff: frames {v1_start}-{v1_end} vs {v2_start}-{v2_end}")
       create_diff_video(v1_clip, v2_clip, diff_clip)
       clips['diff'] = _rel_path(diff_clip)
 
@@ -152,15 +151,22 @@ def _rel_path(p: Path) -> str:
     thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity; JPG is smaller for the other thumbnails
     thumb_path = output_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
-    print(f"  [{i + 1}/{n}] thumbnail: frame {thumb_frame}")
+    # print(f"  [{i + 1}/{n}] thumbnail: frame {thumb_frame}")
     generate_thumbnail(thumb_source, thumb_frame, thumb_path, fps)
 
-    clip_sets.append({
-      'type': chunk_type,
+    return {
+      'type': chunk_type, 'clips': clips, 'thumb': _rel_path(thumb_path),
       'v1_start': v1_start, 'v1_end': v1_end, 'v1_count': v1_count,
       'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
-      'clips': clips, 'thumb': _rel_path(thumb_path),
-    })
+    }
+
+  max_workers = min(8, len(chunks))
+  print(f"  Running with up to {max_workers} threads...")
+  with ThreadPoolExecutor(max_workers) as executor:
+    futures = [executor.submit(process_chunk, i, chunk) for i, chunk in enumerate(chunks)]
+    for future in futures:
+      print(f"  Processed chunk {futures.index(future) + 1}/{n}")
+      clip_sets.append(future.result())
 
   return clip_sets
 

From 8eb625daf1562940862c080780a29be73f086e16 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:07:30 -0600
Subject: [PATCH 100/139] more

---
 selfdrive/ui/tests/diff/diff.py | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 84c0db741f0463..2588bec15e6a9a 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -16,8 +16,9 @@
 DIFF_OUT_DIR = Path(BASEDIR) / "selfdrive" / "ui" / "tests" / "diff" / "report"
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
-CLIP_PADDING_BEFORE = 0  # extra frames of context to include before each chunk
-CLIP_PADDING_AFTER = 0  # extra frames of context to include after each chunk
+# extra frames of context to include before/after each diff chunk
+CLIP_PADDING_BEFORE = 0
+CLIP_PADDING_AFTER = 0
 
 
 def extract_framehashes(video_path: Path) -> list[str]:
@@ -123,6 +124,8 @@ def _rel_path(p: Path) -> str:
       """ Return path relative to the basedir."""
       return os.path.join(basedir, folder_name, p.name)
 
+    # TODO: We could further parallelize by doing some of these calls in parallel within each chunk
+
     # --- video1 clip ---
     v1_clip = output_dir / f"{i:03d}_video1.mp4"
     if chunk_type != 'insert':
@@ -160,6 +163,7 @@ def _rel_path(p: Path) -> str:
       'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
     }
 
+  # Process chunks in parallel with a thread pool
   max_workers = min(8, len(chunks))
   print(f"  Running with up to {max_workers} threads...")
   with ThreadPoolExecutor(max_workers) as executor:
@@ -234,7 +238,7 @@ def main():
   print(f"Diff chunks: {chunks_folder_name}")
   print()
 
-  print("[1/4] Starting full diff video in background...")
+  print("[1/4] Creating full diff video in background...")
   diff_thread = threading.Thread(target=create_diff_video, args=(video1, video2, DIFF_OUT_DIR / diff_video_name))
   diff_thread.start()
 
@@ -251,7 +255,7 @@ def main():
     fps = get_video_fps(video1)
     clip_sets = extract_chunk_clips(video1, video2, chunks, fps, args.basedir, chunks_folder_name)
   else:
-    print("[3/4] No per-chunk differences found.")
+    print("[3/4] No diff chunks found, skipping clip extraction.")
 
   print("[4/4] Generating HTML report...")
   html = generate_html_report((video1, video2), args.basedir, diff_frame_count, frame_counts, diff_video_name, clip_sets)
@@ -267,7 +271,8 @@ def main():
     print(f"Opening {args.output} in browser...")
     webbrowser.open(f'file://{os.path.abspath(output_path)}')
 
-  print("Waiting for full diff video to finish...")
+  if (diff_thread.is_alive()):
+    print("Waiting for diff video generation to finish...")
   diff_thread.join()
 
   return 0 if diff_frame_count == 0 else 1

From b539b24056de5593a27ff86ce5f398bb7458c2fc Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:17:21 -0600
Subject: [PATCH 101/139] parallelize within chunks

---
 selfdrive/ui/tests/diff/diff.py | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 2588bec15e6a9a..56b23368f56d70 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -124,21 +124,22 @@ def _rel_path(p: Path) -> str:
       """ Return path relative to the basedir."""
       return os.path.join(basedir, folder_name, p.name)
 
-    # TODO: We could further parallelize by doing some of these calls in parallel within each chunk
-
-    # --- video1 clip ---
     v1_clip = output_dir / f"{i:03d}_video1.mp4"
-    if chunk_type != 'insert':
-      # print(f"  [{i + 1}/{n}] video1 ({chunk_type}): frames {v1_start}-{v1_end}")
-      extract_clip(video1, v1_start, v1_end, v1_clip, fps)
-      clips['video1'] = _rel_path(v1_clip)
-
-    # --- video2 clip ---
     v2_clip = output_dir / f"{i:03d}_video2.mp4"
-    if chunk_type != 'delete':
-      # print(f"  [{i + 1}/{n}] video2 ({chunk_type}): frames {v2_start}-{v2_end}")
-      extract_clip(video2, v2_start, v2_end, v2_clip, fps)
-      clips['video2'] = _rel_path(v2_clip)
+
+    # Parallelize clip extractions within each chunk
+    with ThreadPoolExecutor(max_workers=2) as executor:
+      futures = []
+      if chunk_type != 'insert':
+        clips['video1'] = _rel_path(v1_clip)
+        # print(f"  [{i + 1}/{n}] video 1: frames {v1_start}-{v1_end}")
+        futures.append(executor.submit(extract_clip, video1, v1_start, v1_end, v1_clip, fps))
+      if chunk_type != 'delete':
+        clips['video2'] = _rel_path(v2_clip)
+        # print(f"  [{i + 1}/{n}] video 2: frames {v2_start}-{v2_end}")
+        futures.append(executor.submit(extract_clip, video2, v2_start, v2_end, v2_clip, fps))
+      for future in futures:
+        future.result()
 
     # --- diff clip ---
     diff_clip = output_dir / f"{i:03d}_diff.mp4"

From b1f4f3ac04cb22ec7e712a9d2f6b336775ba1ad6 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:18:02 -0600
Subject: [PATCH 102/139] should have done this way

---
 selfdrive/ui/tests/diff/diff.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 56b23368f56d70..5ad42d8c9616b3 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -131,13 +131,13 @@ def _rel_path(p: Path) -> str:
     with ThreadPoolExecutor(max_workers=2) as executor:
       futures = []
       if chunk_type != 'insert':
-        clips['video1'] = _rel_path(v1_clip)
         # print(f"  [{i + 1}/{n}] video 1: frames {v1_start}-{v1_end}")
         futures.append(executor.submit(extract_clip, video1, v1_start, v1_end, v1_clip, fps))
+        clips['video1'] = _rel_path(v1_clip)
       if chunk_type != 'delete':
-        clips['video2'] = _rel_path(v2_clip)
         # print(f"  [{i + 1}/{n}] video 2: frames {v2_start}-{v2_end}")
         futures.append(executor.submit(extract_clip, video2, v2_start, v2_end, v2_clip, fps))
+        clips['video2'] = _rel_path(v2_clip)
       for future in futures:
         future.result()
 

From 3cf5dd7f812773e2946a2e421cb73a32bef09c7e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:35:19 -0600
Subject: [PATCH 103/139] comment

---
 selfdrive/ui/tests/diff/diff.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 5ad42d8c9616b3..00a4f1b2010629 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -51,6 +51,7 @@ def get_video_frame_hashes(video1: Path, video2: Path) -> tuple[list[str], list[
 
 @dataclass
 class Chunk:
+  """Represents a contiguous chunk of differences between the two videos. Ranges (start-end) are inclusive."""
   type: Literal['replace', 'insert', 'delete']
   v1_start: int
   v1_end: int

From a8b947d41c05da6b75dcc891663f78e5ff746bfb Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:35:45 -0600
Subject: [PATCH 104/139] rename Chunk to DiffChunk

---
 selfdrive/ui/tests/diff/diff.py | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 00a4f1b2010629..4075e0610b0542 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -50,7 +50,7 @@ def get_video_frame_hashes(video1: Path, video2: Path) -> tuple[list[str], list[
 
 
 @dataclass
-class Chunk:
+class DiffChunk:
   """Represents a contiguous chunk of differences between the two videos. Ranges (start-end) are inclusive."""
   type: Literal['replace', 'insert', 'delete']
   v1_start: int
@@ -61,13 +61,13 @@ class Chunk:
   v2_count: int
 
 
-def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[Chunk]:
-  """Use difflib to compute diff chunks from the two hash lists. Returns a list of Chunk objects."""
+def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[DiffChunk]:
+  """Use difflib to compute diff chunks from the two hash lists. Returns a list of DiffChunk objects."""
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
   diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']  # filter out equal chunks
-  chunks: list[Chunk] = []
+  chunks: list[DiffChunk] = []
   for tag, i1, i2, j1, j2 in diff_ops:
-    chunks.append(Chunk(
+    chunks.append(DiffChunk(
       type=tag,
       v1_start=i1, v1_end=i2 - 1, v1_count=i2 - i1,
       v2_start=j1, v2_end=j2 - 1, v2_count=j2 - j1,
@@ -108,14 +108,14 @@ def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float)
   subprocess.run(cmd, capture_output=True, check=True)
 
 
-def extract_chunk_clips(video1: Path, video2: Path, chunks: list[Chunk], fps: float, basedir: str, folder_name: str) -> list[dict]:
+def extract_chunk_clips(video1: Path, video2: Path, chunks: list[DiffChunk], fps: float, basedir: str, folder_name: str) -> list[dict]:
   """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
   clip_sets: list[dict] = []
   output_dir = DIFF_OUT_DIR / folder_name
   os.makedirs(output_dir, exist_ok=True)
   n = len(chunks)
 
-  def process_chunk(i: int, chunk: Chunk) -> dict:
+  def process_chunk(i: int, chunk: DiffChunk) -> dict:
     chunk_type = chunk.type
     v1_start, v1_end, v1_count = chunk.v1_start, chunk.v1_end, chunk.v1_count
     v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count

From ffa9e300837f3eaff23da242e6cff03f702a3f8e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:37:41 -0600
Subject: [PATCH 105/139] update comment

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 4075e0610b0542..95488d9ab560f7 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -102,7 +102,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
 
 
 def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float) -> None:
-  """Create a single-frame PNG thumbnail at the given frame index."""
+  """Create a single-frame thumbnail at the given frame index. File format is determined by the output extension (e.g. .jpg or .png)."""
   t = frame / fps
   cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
   subprocess.run(cmd, capture_output=True, check=True)

From 0f81204b4322794300b5a37c403851e35dc684d6 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:50:25 -0600
Subject: [PATCH 106/139] cleanup

---
 selfdrive/ui/tests/diff/diff.py | 41 +++++++++++++++++----------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 95488d9ab560f7..bf4a8c00e6a2fd 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -43,9 +43,6 @@ def get_video_frame_hashes(video1: Path, video2: Path) -> tuple[list[str], list[
     future2 = executor.submit(extract_framehashes, video2)
     hashes1 = future1.result()
     hashes2 = future2.result()
-
-  print(f"  Found {len(hashes1)} frames in video 1.")
-  print(f"  Found {len(hashes2)} frames in video 2.")
   return hashes1, hashes2
 
 
@@ -109,11 +106,15 @@ def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float)
 
 
 def extract_chunk_clips(video1: Path, video2: Path, chunks: list[DiffChunk], fps: float, basedir: str, folder_name: str) -> list[dict]:
-  """For each diff chunk extract clips from video1, video2, and a diff/highlight video."""
+  """For each diff chunk, extract clips from video1, video2, a diff video (if both are available), and a thumbnail image."""
   clip_sets: list[dict] = []
   output_dir = DIFF_OUT_DIR / folder_name
   os.makedirs(output_dir, exist_ok=True)
-  n = len(chunks)
+  n: int = len(chunks)
+
+  def get_rel_path(p: Path) -> str:
+    """ Return path relative to the basedir."""
+    return os.path.join(basedir, folder_name, p.name)
 
   def process_chunk(i: int, chunk: DiffChunk) -> dict:
     chunk_type = chunk.type
@@ -121,24 +122,22 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
     v2_start, v2_end, v2_count = chunk.v2_start, chunk.v2_end, chunk.v2_count
     clips: dict[str, str | None] = {'video1': None, 'video2': None, 'diff': None}
 
-    def _rel_path(p: Path) -> str:
-      """ Return path relative to the basedir."""
-      return os.path.join(basedir, folder_name, p.name)
-
     v1_clip = output_dir / f"{i:03d}_video1.mp4"
     v2_clip = output_dir / f"{i:03d}_video2.mp4"
 
-    # Parallelize clip extractions within each chunk
+    # Parallelize video1/video2 clip extractions within each chunk
     with ThreadPoolExecutor(max_workers=2) as executor:
       futures = []
       if chunk_type != 'insert':
+        # --- video 1 clip ---
         # print(f"  [{i + 1}/{n}] video 1: frames {v1_start}-{v1_end}")
         futures.append(executor.submit(extract_clip, video1, v1_start, v1_end, v1_clip, fps))
-        clips['video1'] = _rel_path(v1_clip)
+        clips['video1'] = get_rel_path(v1_clip)
       if chunk_type != 'delete':
+        # --- video 2 clip ---
         # print(f"  [{i + 1}/{n}] video 2: frames {v2_start}-{v2_end}")
         futures.append(executor.submit(extract_clip, video2, v2_start, v2_end, v2_clip, fps))
-        clips['video2'] = _rel_path(v2_clip)
+        clips['video2'] = get_rel_path(v2_clip)
       for future in futures:
         future.result()
 
@@ -147,7 +146,7 @@ def _rel_path(p: Path) -> str:
     if chunk_type == 'replace':
       # print(f"  [{i + 1}/{n}] diff: frames {v1_start}-{v1_end} vs {v2_start}-{v2_end}")
       create_diff_video(v1_clip, v2_clip, diff_clip)
-      clips['diff'] = _rel_path(diff_clip)
+      clips['diff'] = get_rel_path(diff_clip)
 
     # --- thumbnail (middle frame of the diff content inside the clip) ---
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
@@ -160,7 +159,7 @@ def _rel_path(p: Path) -> str:
     generate_thumbnail(thumb_source, thumb_frame, thumb_path, fps)
 
     return {
-      'type': chunk_type, 'clips': clips, 'thumb': _rel_path(thumb_path),
+      'type': chunk_type, 'clips': clips, 'thumb': get_rel_path(thumb_path),
       'v1_start': v1_start, 'v1_end': v1_end, 'v1_count': v1_count,
       'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
     }
@@ -240,33 +239,35 @@ def main():
   print(f"Diff chunks: {chunks_folder_name}")
   print()
 
-  print("[1/4] Creating full diff video in background...")
+  print("[1/5] Starting diff video generation in background thread...")
   diff_thread = threading.Thread(target=create_diff_video, args=(video1, video2, DIFF_OUT_DIR / diff_video_name))
   diff_thread.start()
 
-  print("[2/4] Hashing frames...")
+  print("[2/5] Hashing frames...")
   hashes1, hashes2 = get_video_frame_hashes(video1, video2)
   frame_counts = (len(hashes1), len(hashes2))
+  print(f"  Found {frame_counts[0]} frames in video 1 and {frame_counts[1]} frames in video 2.")
 
+  print("[3/5] Computing diff chunks...")
   chunks = compute_diff_chunks(hashes1, hashes2)
   diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)
 
   clip_sets = []
   if chunks:
-    print(f"[3/4] Extracting {len(chunks)} diff chunk(s)...")
+    print(f"[4/5] Extracting {len(chunks)} diff chunk(s)...")
     fps = get_video_fps(video1)
     clip_sets = extract_chunk_clips(video1, video2, chunks, fps, args.basedir, chunks_folder_name)
   else:
-    print("[3/4] No diff chunks found, skipping clip extraction.")
+    print("[4/5] No diff chunks found, skipping clip extraction.")
 
-  print("[4/4] Generating HTML report...")
+  print("[5/5] Generating HTML report...")
   html = generate_html_report((video1, video2), args.basedir, diff_frame_count, frame_counts, diff_video_name, clip_sets)
 
   output_path = DIFF_OUT_DIR / args.output
   with open(output_path, 'w') as f:
     f.write(html)
 
-  print(f"Report generated at: {output_path}")
+  print(f"  Report generated at: {output_path}")
 
   # Open in browser by default
   if not args.no_open:

From e9449c8e350d255595abfc2d5557d955dd0698c9 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 00:55:33 -0600
Subject: [PATCH 107/139] clean

---
 selfdrive/ui/tests/diff/diff_template.html | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index f7002572e3fb0d..c8b701bd7527e3 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -53,7 +53,7 @@ <h2>UI Diff</h2>
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ v1_start, v1_end, v2_start, v2_end, v1_count, v2_count, type, clips, thumb }, i) => {
         // Build title based on type and frame counts
-        let title;
+        let title = '';
         if (type === 'insert') {
           title = `➕ Added ${frames_label(v2_count)}`;
         } else if (type === 'delete') {
@@ -66,7 +66,7 @@ <h2>UI Diff</h2>
             title = `✏️${changeType} Changed ${v1_count}→${v2_count} frames`;
           }
         } else {
-          title = frames_label(Math.max(v1_count || 0, v2_count || 0));
+          title = frames_label(v1_count || 0, v2_count || 0);
         }
 
         // Build description with frame ranges
@@ -77,11 +77,6 @@ <h2>UI Diff</h2>
           desc = video_frames_range_label(1, v1_start, v1_end);
         } else if (type === 'replace') {
           desc = `${video_frames_range_label(1, v1_start, v1_end)} → ${video_frames_range_label(2, v2_start, v2_end)}`;
-        } else {
-          const parts = [];
-          if (v1_count) parts.push(video_frames_range_label(1, v1_start, v1_end));
-          if (v2_count) parts.push(video_frames_range_label(2, v2_start, v2_end));
-          desc = parts.join(' | ');
         }
 
         return {

From cdb00c767c3a83f719f65cf105cd36b0cf274e30 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 01:05:03 -0600
Subject: [PATCH 108/139] make selected nav index black

---
 selfdrive/ui/tests/diff/diff_template.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index c8b701bd7527e3..7a4534e5a37f18 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -17,6 +17,7 @@
     #nav button { width: 200px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 2px solid #aaa; border-radius: 6px; cursor: pointer; background: #f5f5f5; position: relative; }
     #nav button img { width: 100%; }
     #nav button.active { border-color: #0078d4; background: #e5f2fc; border-width: 3px; }
+    #nav button.active .nav-index { color: black; }
     #nav button.type-full { justify-content: center; }
     #nav button.type-insert { border-color: #2a9d2a; }
     #nav button.type-insert.active { border-color: #1a7a1a; background: #e6f7e6; }

From 0ddcf3d32ceac1aabf4fad44aa62957d9cde9983 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 15:38:45 -0600
Subject: [PATCH 109/139] rename

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index bf4a8c00e6a2fd..ab1cc81dbc7d9c 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -236,7 +236,7 @@ def main():
   print(f"Video 2    : {video2}")
   print(f"HTML output: {args.output}")
   print(f"Diff video : {diff_video_name}")
-  print(f"Diff chunks: {chunks_folder_name}")
+  print(f"Chunks dir : {chunks_folder_name}")
   print()
 
   print("[1/5] Starting diff video generation in background thread...")

From f9ebe5341b5303c92747d000c357fe8368bc32a8 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 15:39:14 -0600
Subject: [PATCH 110/139] align

---
 selfdrive/ui/tests/diff/diff.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index ab1cc81dbc7d9c..0d0937b38400af 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -232,11 +232,11 @@ def main():
   print("=" * 60)
   print("UI VIDEO DIFF REPORT")
   print("=" * 60)
-  print(f"Video 1    : {video1}")
-  print(f"Video 2    : {video2}")
-  print(f"HTML output: {args.output}")
-  print(f"Diff video : {diff_video_name}")
-  print(f"Chunks dir : {chunks_folder_name}")
+  print(f"Video 1:      {video1}")
+  print(f"Video 2:      {video2}")
+  print(f"HTML output:  {args.output}")
+  print(f"Diff video:   {diff_video_name}")
+  print(f"Chunks dir:   {chunks_folder_name}")
   print()
 
   print("[1/5] Starting diff video generation in background thread...")

From bb58c1254f690268041def3d29047f040372395e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 15:40:48 -0600
Subject: [PATCH 111/139] log found chunks count

---
 selfdrive/ui/tests/diff/diff.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 0d0937b38400af..9ae7091e52321d 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -251,6 +251,7 @@ def main():
   print("[3/5] Computing diff chunks...")
   chunks = compute_diff_chunks(hashes1, hashes2)
   diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)
+  print(f"  Found {len(chunks)} diff chunk(s) with a total of {diff_frame_count} different frames.")
 
   clip_sets = []
   if chunks:

From 1db3049834396dd52f5523813842572d2175e618 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 15:51:09 -0600
Subject: [PATCH 112/139] log more

---
 selfdrive/ui/tests/diff/diff.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 9ae7091e52321d..a59e924434c481 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -166,7 +166,7 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
 
   # Process chunks in parallel with a thread pool
   max_workers = min(8, len(chunks))
-  print(f"  Running with up to {max_workers} threads...")
+  print(f"  Processing {len(chunks)} chunks with {max_workers} threads...")
   with ThreadPoolExecutor(max_workers) as executor:
     futures = [executor.submit(process_chunk, i, chunk) for i, chunk in enumerate(chunks)]
     for future in futures:
@@ -256,7 +256,9 @@ def main():
   clip_sets = []
   if chunks:
     print(f"[4/5] Extracting {len(chunks)} diff chunk(s)...")
+    print("  Getting video fps...", end=' ')
     fps = get_video_fps(video1)
+    print(f"{fps:.2f} fps")
     clip_sets = extract_chunk_clips(video1, video2, chunks, fps, args.basedir, chunks_folder_name)
   else:
     print("[4/5] No diff chunks found, skipping clip extraction.")

From 10ef9f48cb43e0331e36aec8ab4f7fbd388848ab Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 15:53:26 -0600
Subject: [PATCH 113/139] add chunks progress bar

---
 selfdrive/ui/tests/diff/diff.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index a59e924434c481..97983f4f380ba1 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -8,9 +8,10 @@
 import argparse
 import threading
 from concurrent.futures import ThreadPoolExecutor
+from tqdm import tqdm
+from pathlib import Path
 from dataclasses import dataclass
 from typing import Literal
-from pathlib import Path
 from openpilot.common.basedir import BASEDIR
 
 DIFF_OUT_DIR = Path(BASEDIR) / "selfdrive" / "ui" / "tests" / "diff" / "report"
@@ -169,8 +170,7 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
   print(f"  Processing {len(chunks)} chunks with {max_workers} threads...")
   with ThreadPoolExecutor(max_workers) as executor:
     futures = [executor.submit(process_chunk, i, chunk) for i, chunk in enumerate(chunks)]
-    for future in futures:
-      print(f"  Processed chunk {futures.index(future) + 1}/{n}")
+    for future in tqdm(futures, desc="Processing chunks"):
       clip_sets.append(future.result())
 
   return clip_sets

From aec975f4750f2322fb6a05b3b6ed2baddd9f6232 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 16:11:23 -0600
Subject: [PATCH 114/139] cleanup and better progress

---
 selfdrive/ui/tests/diff/diff.py | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 97983f4f380ba1..5654eabd7d3c62 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -7,7 +7,7 @@
 import webbrowser
 import argparse
 import threading
-from concurrent.futures import ThreadPoolExecutor
+from concurrent.futures import ThreadPoolExecutor, as_completed
 from tqdm import tqdm
 from pathlib import Path
 from dataclasses import dataclass
@@ -108,10 +108,8 @@ def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float)
 
 def extract_chunk_clips(video1: Path, video2: Path, chunks: list[DiffChunk], fps: float, basedir: str, folder_name: str) -> list[dict]:
   """For each diff chunk, extract clips from video1, video2, a diff video (if both are available), and a thumbnail image."""
-  clip_sets: list[dict] = []
   output_dir = DIFF_OUT_DIR / folder_name
   os.makedirs(output_dir, exist_ok=True)
-  n: int = len(chunks)
 
   def get_rel_path(p: Path) -> str:
     """ Return path relative to the basedir."""
@@ -130,33 +128,29 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
     with ThreadPoolExecutor(max_workers=2) as executor:
       futures = []
       if chunk_type != 'insert':
-        # --- video 1 clip ---
-        # print(f"  [{i + 1}/{n}] video 1: frames {v1_start}-{v1_end}")
+        # video 1 clip
         futures.append(executor.submit(extract_clip, video1, v1_start, v1_end, v1_clip, fps))
         clips['video1'] = get_rel_path(v1_clip)
       if chunk_type != 'delete':
-        # --- video 2 clip ---
-        # print(f"  [{i + 1}/{n}] video 2: frames {v2_start}-{v2_end}")
+        # video 2 clip
         futures.append(executor.submit(extract_clip, video2, v2_start, v2_end, v2_clip, fps))
         clips['video2'] = get_rel_path(v2_clip)
       for future in futures:
         future.result()
 
-    # --- diff clip ---
+    # diff clip
     diff_clip = output_dir / f"{i:03d}_diff.mp4"
     if chunk_type == 'replace':
-      # print(f"  [{i + 1}/{n}] diff: frames {v1_start}-{v1_end} vs {v2_start}-{v2_end}")
       create_diff_video(v1_clip, v2_clip, diff_clip)
       clips['diff'] = get_rel_path(diff_clip)
 
-    # --- thumbnail (middle frame of the diff content inside the clip) ---
+    # thumbnail (middle frame of the diff content inside the clip)
     padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
     thumb_frame = padding_used + content_count // 2
     thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity; JPG is smaller for the other thumbnails
     thumb_path = output_dir / f"{i:03d}_thumb.{thumb_ext}"
     thumb_source = diff_clip if chunk_type == 'replace' else (v1_clip if chunk_type == 'delete' else v2_clip)
-    # print(f"  [{i + 1}/{n}] thumbnail: frame {thumb_frame}")
     generate_thumbnail(thumb_source, thumb_frame, thumb_path, fps)
 
     return {
@@ -168,10 +162,13 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
   # Process chunks in parallel with a thread pool
   max_workers = min(8, len(chunks))
   print(f"  Processing {len(chunks)} chunks with {max_workers} threads...")
+  results = []
   with ThreadPoolExecutor(max_workers) as executor:
     futures = [executor.submit(process_chunk, i, chunk) for i, chunk in enumerate(chunks)]
-    for future in tqdm(futures, desc="Processing chunks"):
-      clip_sets.append(future.result())
+    for future in tqdm(as_completed(futures), total=len(futures), desc="Processing chunks"):
+      results.append(future.result())
+  # results will be out of order due to parallel processing, so sort them back to the original order based on v1_start frame index
+  clip_sets = sorted(results, key=lambda x: x['v1_start'])
 
   return clip_sets
 
@@ -239,7 +236,7 @@ def main():
   print(f"Chunks dir:   {chunks_folder_name}")
   print()
 
-  print("[1/5] Starting diff video generation in background thread...")
+  print("[1/5] Starting full video diff generation in background thread...")
   diff_thread = threading.Thread(target=create_diff_video, args=(video1, video2, DIFF_OUT_DIR / diff_video_name))
   diff_thread.start()
 

From 385ac67670907c0031506d8b6965f7f2d2c0d947 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 17:38:12 -0600
Subject: [PATCH 115/139] move

---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 7a4534e5a37f18..873f89207dbb3f 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -37,9 +37,9 @@
 </head>
 <body>
   <h2>UI Diff</h2>
-  <p><strong>Results:</strong> $RESULT_TEXT</p>
   <div id='player'></div>
   <hr>
+  <p><strong>Results:</strong> $RESULT_TEXT</p>
   <div id='nav'></div>
   <script>
     const LABELS = ['Video 1', 'Video 2', 'Pixel Diff'];

From a332949e00686489ba7ea59b16d9f144e1a5aa17 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 18:10:33 -0600
Subject: [PATCH 116/139] print results

---
 selfdrive/ui/tests/diff/diff.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 5654eabd7d3c62..a8c4dd76803d87 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -185,6 +185,7 @@ def generate_html_report(
     else f"❌ Found {diff_frame_count} different frames out of {total_frames} total ({diff_frame_count / total_frames * 100:.1f}%)."
     + (f" Video {'2' if frame_delta > 0 else '1'} is longer by {abs(frame_delta)} frames." if frame_delta != 0 else "")
   )
+  print(f"  Results: {result_text}")
 
   # Load HTML template and replace placeholders
   html = HTML_TEMPLATE_PATH.read_text()

From 77b37155678756d445c182d388ebab83dd6f5eff Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 18:12:37 -0600
Subject: [PATCH 117/139] add todo

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index a8c4dd76803d87..fda1e4bc4c2ade 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -248,7 +248,7 @@ def main():
 
   print("[3/5] Computing diff chunks...")
   chunks = compute_diff_chunks(hashes1, hashes2)
-  diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)
+  diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)  # TODO: We could be more precise by reporting changes, additions, and deletions separately.
   print(f"  Found {len(chunks)} diff chunk(s) with a total of {diff_frame_count} different frames.")
 
   clip_sets = []

From 83fcc937956552511be5df327fe41cd72fd65738 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 18:40:13 -0600
Subject: [PATCH 118/139] add note about chunk padding

---
 selfdrive/ui/tests/diff/diff.py | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index fda1e4bc4c2ade..8c81fb75fb60df 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -18,8 +18,10 @@
 HTML_TEMPLATE_PATH = Path(__file__).with_name("diff_template.html")
 
 # extra frames of context to include before/after each diff chunk
-CLIP_PADDING_BEFORE = 0
-CLIP_PADDING_AFTER = 0
+# NOTE: adding this can make it difficult to view the exact frames that changed if they are small,
+# but it could be useful for added context or to reduce any video flickering.
+CHUNK_PADDING_BEFORE = 0
+CHUNK_PADDING_AFTER = 0
 
 
 def extract_framehashes(video_path: Path) -> list[str]:
@@ -90,9 +92,9 @@ def get_video_fps(video_path: Path) -> float:
 
 def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path: Path, fps: float) -> int:
   """Extract [start_frame, end_frame] plus padding before/after into *output_path*. Returns the actual number of frames written."""
-  padded_start = max(0, start_frame - CLIP_PADDING_BEFORE)
+  padded_start = max(0, start_frame - CHUNK_PADDING_BEFORE)
   padding_before = start_frame - padded_start
-  total_frames = (end_frame - start_frame + 1) + padding_before + CLIP_PADDING_AFTER
+  total_frames = (end_frame - start_frame + 1) + padding_before + CHUNK_PADDING_AFTER
   start_time = padded_start / fps
   cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)]
   subprocess.run(cmd, capture_output=True, check=True)
@@ -145,7 +147,7 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
       clips['diff'] = get_rel_path(diff_clip)
 
     # thumbnail (middle frame of the diff content inside the clip)
-    padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CLIP_PADDING_BEFORE)
+    padding_used = min((v1_start if chunk_type != 'insert' else v2_start), CHUNK_PADDING_BEFORE)
     content_count = v1_count if chunk_type != 'insert' else v2_count
     thumb_frame = padding_used + content_count // 2
     thumb_ext = 'png' if chunk_type == 'replace' else 'jpg'  # Use PNG for the diff thumbnails for clarity; JPG is smaller for the other thumbnails

From 6c8226edb39da737ea61316b9c07f089da5372c5 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 19:33:13 -0600
Subject: [PATCH 119/139] fix lint

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 8c81fb75fb60df..732f80335ccd8e 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -250,7 +250,7 @@ def main():
 
   print("[3/5] Computing diff chunks...")
   chunks = compute_diff_chunks(hashes1, hashes2)
-  diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)  # TODO: We could be more precise by reporting changes, additions, and deletions separately.
+  diff_frame_count = sum(max(c.v1_count, c.v2_count) for c in chunks)  # TODO: We could be more precise by reporting changes, inserts, and deletions separately.
   print(f"  Found {len(chunks)} diff chunk(s) with a total of {diff_frame_count} different frames.")
 
   clip_sets = []

From 375660bf5845fc4f4dd007aef43515cf071589f4 Mon Sep 17 00:00:00 2001
From: David <49467229+TheSecurityDev@users.noreply.github.com>
Date: Sun, 22 Feb 2026 19:36:28 -0600
Subject: [PATCH 120/139] remove parentheses

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 732f80335ccd8e..40f3e12b844db3 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -277,7 +277,7 @@ def main():
     print(f"Opening {args.output} in browser...")
     webbrowser.open(f'file://{os.path.abspath(output_path)}')
 
-  if (diff_thread.is_alive()):
+  if diff_thread.is_alive():
     print("Waiting for diff video generation to finish...")
   diff_thread.join()
 

From daaaebda90cf1c4e647b289eca15821ff1ba8e56 Mon Sep 17 00:00:00 2001
From: David <49467229+TheSecurityDev@users.noreply.github.com>
Date: Sun, 22 Feb 2026 19:37:06 -0600
Subject: [PATCH 121/139] add semicolon

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 selfdrive/ui/tests/diff/diff_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index 873f89207dbb3f..e2ebf69e4723d9 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -115,7 +115,7 @@ <h4>${label}</h4>
     videos.forEach((v, vi) => {
       v.addEventListener('loadedmetadata', () => {
         // Once metadata is available for this video, update scene ratio from this video and hide its placeholder
-        if (!active[vi]) return
+        if (!active[vi]) return;
         if (v.videoWidth > 0 && v.videoHeight > 0) applySceneAspectRatio(`${v.videoWidth}/${v.videoHeight}`);
         noVideoEls[vi].style.display = 'none';
         v.style.display = '';

From 5b2fa630538659d58f0727878ccbb070f9e16790 Mon Sep 17 00:00:00 2001
From: David <49467229+TheSecurityDev@users.noreply.github.com>
Date: Sun, 22 Feb 2026 19:37:50 -0600
Subject: [PATCH 122/139] only copy if exists

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .github/workflows/ui_preview.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ui_preview.yaml b/.github/workflows/ui_preview.yaml
index 3af90d160f3ba8..c2a560b2999d20 100644
--- a/.github/workflows/ui_preview.yaml
+++ b/.github/workflows/ui_preview.yaml
@@ -122,7 +122,7 @@ jobs:
 
             cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.html" "${{ github.workspace }}/pr_ui/"
             cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.mp4" "${{ github.workspace }}/pr_ui/"
-            cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" "${{ github.workspace }}/pr_ui/"
+            [ -d "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" ] && cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" "${{ github.workspace }}/pr_ui/" || true
 
             REPORT_URL="https://commaai.github.io/ci-artifacts/${diff_name}_pr_${{ github.event.number }}.html"
             if [ $diff_exit_code -eq 0 ]; then

From 0b58a4f822e23059129a83a7320e507712a43916 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 19:44:08 -0600
Subject: [PATCH 123/139] remove

---
 selfdrive/ui/tests/diff/diff_template.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index e2ebf69e4723d9..b497e828461ab7 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -54,7 +54,7 @@ <h2>UI Diff</h2>
       { title: 'Full Video', desc: '', type: '', srcs: ['$VIDEO1_SRC', '$VIDEO2_SRC', '$DIFF_SRC'], loop: true },
       ...chunks.map(({ v1_start, v1_end, v2_start, v2_end, v1_count, v2_count, type, clips, thumb }, i) => {
         // Build title based on type and frame counts
-        let title = '';
+        let title = 'Unknown change';
         if (type === 'insert') {
           title = `➕ Added ${frames_label(v2_count)}`;
         } else if (type === 'delete') {
@@ -66,8 +66,6 @@ <h2>UI Diff</h2>
             const changeType = v2_count > v1_count ? '➕' : '➖';
             title = `✏️${changeType} Changed ${v1_count}→${v2_count} frames`;
           }
-        } else {
-          title = frames_label(v1_count || 0, v2_count || 0);
         }
 
         // Build description with frame ranges

From b48fb3131df702b677b1c2b0db277d9b9af722d6 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sun, 22 Feb 2026 19:47:18 -0600
Subject: [PATCH 124/139] remove check, swallow error

---
 .github/workflows/ui_preview.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ui_preview.yaml b/.github/workflows/ui_preview.yaml
index c2a560b2999d20..fc55807a41ea3e 100644
--- a/.github/workflows/ui_preview.yaml
+++ b/.github/workflows/ui_preview.yaml
@@ -122,7 +122,7 @@ jobs:
 
             cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.html" "${{ github.workspace }}/pr_ui/"
             cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.mp4" "${{ github.workspace }}/pr_ui/"
-            [ -d "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" ] && cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" "${{ github.workspace }}/pr_ui/" || true
+            cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" "${{ github.workspace }}/pr_ui/" || true
 
             REPORT_URL="https://commaai.github.io/ci-artifacts/${diff_name}_pr_${{ github.event.number }}.html"
             if [ $diff_exit_code -eq 0 ]; then

From 30638083026bc8d471b520736b3b202256658064 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Mon, 23 Feb 2026 12:00:08 -0600
Subject: [PATCH 125/139] sort by original index

---
 selfdrive/ui/tests/diff/diff.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 40f3e12b844db3..fdc5d020cda04b 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -156,7 +156,7 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
     generate_thumbnail(thumb_source, thumb_frame, thumb_path, fps)
 
     return {
-      'type': chunk_type, 'clips': clips, 'thumb': get_rel_path(thumb_path),
+      'index': i, 'type': chunk_type, 'clips': clips, 'thumb': get_rel_path(thumb_path),
       'v1_start': v1_start, 'v1_end': v1_end, 'v1_count': v1_count,
       'v2_start': v2_start, 'v2_end': v2_end, 'v2_count': v2_count,
     }
@@ -169,8 +169,8 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
     futures = [executor.submit(process_chunk, i, chunk) for i, chunk in enumerate(chunks)]
     for future in tqdm(as_completed(futures), total=len(futures), desc="Processing chunks"):
       results.append(future.result())
-  # results will be out of order due to parallel processing, so sort them back to the original order based on v1_start frame index
-  clip_sets = sorted(results, key=lambda x: x['v1_start'])
+  # results will be out of order due to parallel processing, so sort them back to the original order
+  clip_sets = sorted(results, key=lambda x: x['index'])
 
   return clip_sets
 

From d2ac36c0fce7f1f5cf4406feadd5b7fe2151f764 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Mon, 23 Feb 2026 12:09:40 -0600
Subject: [PATCH 126/139] fail if fps don't match

---
 selfdrive/ui/tests/diff/diff.py | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index fdc5d020cda04b..2b721663b35884 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -257,9 +257,11 @@ def main():
   if chunks:
     print(f"[4/5] Extracting {len(chunks)} diff chunk(s)...")
     print("  Getting video fps...", end=' ')
-    fps = get_video_fps(video1)
-    print(f"{fps:.2f} fps")
-    clip_sets = extract_chunk_clips(video1, video2, chunks, fps, args.basedir, chunks_folder_name)
+    fps1, fps2 = get_video_fps(video1), get_video_fps(video2)
+    if abs(fps1 - fps2) > 0.01:
+      raise ValueError(f"Videos have different fps values: {fps1:.2f} vs {fps2:.2f}")
+    print(f"{fps1:.2f} fps")
+    clip_sets = extract_chunk_clips(video1, video2, chunks, fps1, args.basedir, chunks_folder_name)
   else:
     print("[4/5] No diff chunks found, skipping clip extraction.")
 

From b5377198a428bd8ee75b3a3e20ab16cfb79016c6 Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Mon, 23 Feb 2026 19:45:28 -0800
Subject: [PATCH 127/139] no more xset

---
 selfdrive/test/setup_xvfb.sh | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/selfdrive/test/setup_xvfb.sh b/selfdrive/test/setup_xvfb.sh
index b185e2b431d6fc..c1b74a850ee4d7 100755
--- a/selfdrive/test/setup_xvfb.sh
+++ b/selfdrive/test/setup_xvfb.sh
@@ -19,5 +19,4 @@ do
 done
 
 touch ~/.Xauthority
-export XDG_SESSION_TYPE="x11"
-xset -q
\ No newline at end of file
+export XDG_SESSION_TYPE="x11"
\ No newline at end of file

From 7427eba4ad2912461262b759a7c2e0472f99c87e Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Tue, 24 Feb 2026 15:12:44 -0600
Subject: [PATCH 128/139] simplify frame range if equal

---
 selfdrive/ui/tests/diff/diff_template.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff_template.html b/selfdrive/ui/tests/diff/diff_template.html
index b497e828461ab7..a6ab78f849d9f2 100644
--- a/selfdrive/ui/tests/diff/diff_template.html
+++ b/selfdrive/ui/tests/diff/diff_template.html
@@ -75,7 +75,11 @@ <h2>UI Diff</h2>
         } else if (type === 'delete') {
           desc = video_frames_range_label(1, v1_start, v1_end);
         } else if (type === 'replace') {
-          desc = `${video_frames_range_label(1, v1_start, v1_end)} → ${video_frames_range_label(2, v2_start, v2_end)}`;
+          if (v1_start === v2_start && v1_end === v2_end) {
+            desc = frames_range_label(v1_start, v1_end);
+          } else {
+            desc = `${video_frames_range_label(1, v1_start, v1_end)} → ${video_frames_range_label(2, v2_start, v2_end)}`;
+          }
         }
 
         return {

From e1c623457276c3e41627e62ccef7aeeedc0a9068 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 25 Feb 2026 14:33:07 -0600
Subject: [PATCH 129/139] upload everything under report

---
 .github/workflows/ui_preview.yaml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/ui_preview.yaml b/.github/workflows/ui_preview.yaml
index fc55807a41ea3e..30ee92ba676fdc 100644
--- a/.github/workflows/ui_preview.yaml
+++ b/.github/workflows/ui_preview.yaml
@@ -120,9 +120,7 @@ jobs:
               "${{ github.workspace }}/pr_ui/${video}_proposed.mp4" \
               "${diff_name}.html" --basedir "$baseurl" --no-open || diff_exit_code=$?
 
-            cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.html" "${{ github.workspace }}/pr_ui/"
-            cp "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}.mp4" "${{ github.workspace }}/pr_ui/"
-            cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/${diff_name}-chunks" "${{ github.workspace }}/pr_ui/" || true
+            cp -r "${{ github.workspace }}/selfdrive/ui/tests/diff/report/"* "${{ github.workspace }}/pr_ui/"
 
             REPORT_URL="https://commaai.github.io/ci-artifacts/${diff_name}_pr_${{ github.event.number }}.html"
             if [ $diff_exit_code -eq 0 ]; then

From 03154923531ce7e60b342b8b324951c16b335b9b Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 27 Feb 2026 22:34:23 -0600
Subject: [PATCH 130/139] update progress bar

---
 selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 2b721663b35884..7164d32e758e25 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -167,7 +167,7 @@ def process_chunk(i: int, chunk: DiffChunk) -> dict:
   results = []
   with ThreadPoolExecutor(max_workers) as executor:
     futures = [executor.submit(process_chunk, i, chunk) for i, chunk in enumerate(chunks)]
-    for future in tqdm(as_completed(futures), total=len(futures), desc="Processing chunks"):
+    for future in tqdm(as_completed(futures), total=len(futures), desc="Processing chunks", unit="chunk", disable=bool(os.getenv("CI"))):
       results.append(future.result())
   # results will be out of order due to parallel processing, so sort them back to the original order
   clip_sets = sorted(results, key=lambda x: x['index'])

From 4aff78cc0bb7654ae7039eb54069f7e5fc25e4e1 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 27 Feb 2026 23:09:56 -0600
Subject: [PATCH 131/139] simplify

---
 selfdrive/ui/tests/diff/diff.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 7164d32e758e25..ea39a6b12371a9 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -217,8 +217,7 @@ def main():
   if not args.output.lower().endswith('.html'):
     args.output += '.html'
 
-  video1 = Path(args.video1)
-  video2 = Path(args.video2)
+  video1, video2 = Path(args.video1), Path(args.video2)
   missing = [str(p) for p in (video1, video2) if not p.exists()]
   if missing:
     parser.error(f"Video file(s) not found: {', '.join(missing)}")

From 61a166862c39a1f497065b8f61e64e51310109ae Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Sat, 28 Feb 2026 00:09:23 -0600
Subject: [PATCH 132/139] use threadpoolexecutor to handle exceptions

---
 selfdrive/ui/tests/diff/diff.py | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index ea39a6b12371a9..04893cb62bbe93 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -6,7 +6,6 @@
 import subprocess
 import webbrowser
 import argparse
-import threading
 from concurrent.futures import ThreadPoolExecutor, as_completed
 from tqdm import tqdm
 from pathlib import Path
@@ -239,8 +238,8 @@ def main():
   print()
 
   print("[1/5] Starting full video diff generation in background thread...")
-  diff_thread = threading.Thread(target=create_diff_video, args=(video1, video2, DIFF_OUT_DIR / diff_video_name))
-  diff_thread.start()
+  diff_executor = ThreadPoolExecutor(max_workers=1)
+  diff_future = diff_executor.submit(create_diff_video, video1, video2, DIFF_OUT_DIR / diff_video_name)
 
   print("[2/5] Hashing frames...")
   hashes1, hashes2 = get_video_frame_hashes(video1, video2)
@@ -278,9 +277,11 @@ def main():
     print(f"Opening {args.output} in browser...")
     webbrowser.open(f'file://{os.path.abspath(output_path)}')
 
-  if diff_thread.is_alive():
+  # Wait for diff video generation to finish before exiting
+  if not diff_future.done():
     print("Waiting for diff video generation to finish...")
-  diff_thread.join()
+  diff_future.result()
+  diff_executor.shutdown()
 
   return 0 if diff_frame_count == 0 else 1
 

From 7f5999393d2457e6b8b28c9da2ece6ce0d61222c Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 11 Mar 2026 17:03:04 -0500
Subject: [PATCH 133/139] improve

---
 selfdrive/ui/tests/diff/diff.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 04893cb62bbe93..5c7212415c5da7 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -24,7 +24,7 @@
 
 
 def extract_framehashes(video_path: Path) -> list[str]:
-  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
+  cmd = ['ffmpeg', '-nostdin', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   hashes = []
   for line in result.stdout.splitlines():
@@ -76,7 +76,7 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[DiffChun
 
 def create_diff_video(video1: Path, video2: Path, output: Path) -> None:
   """Create a diff video of two clips using ffmpeg blend filter with difference mode."""
-  cmd = ['ffmpeg', '-nostdin', '-i', str(video1), '-i', str(video2), '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(output)]
+  cmd = ['ffmpeg', '-nostdin', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
@@ -217,7 +217,7 @@ def main():
     args.output += '.html'
 
   video1, video2 = Path(args.video1), Path(args.video2)
-  missing = [str(p) for p in (video1, video2) if not p.exists()]
+  missing = [str(p) for p in (video1, video2) if not p.is_file()]
   if missing:
     parser.error(f"Video file(s) not found: {', '.join(missing)}")
 

From d4216da9a346ec2bbd1ecb30f0c738cbee98a8bc Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 11 Mar 2026 17:05:02 -0500
Subject: [PATCH 134/139] str cast not needed

---
 selfdrive/ui/tests/diff/diff.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 5c7212415c5da7..2f5e29406f3d4e 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -82,7 +82,7 @@ def create_diff_video(video1: Path, video2: Path, output: Path) -> None:
 
 def get_video_fps(video_path: Path) -> float:
   """Return fps for a video file."""
-  cmd = ['ffprobe', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'json', str(video_path)]
+  cmd = ['ffprobe', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'json', video_path]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   info = json.loads(result.stdout)['streams'][0]
   num, den = info['r_frame_rate'].split('/')
@@ -95,7 +95,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CHUNK_PADDING_AFTER
   start_time = padded_start / fps
-  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)]
+  cmd = ['ffmpeg', '-nostdin', '-i', video_path, '-ss', f"{start_time:.6f}", '-frames:v', total_frames, '-vsync', '0', '-y', output_path]
   subprocess.run(cmd, capture_output=True, check=True)
   return total_frames
 
@@ -103,7 +103,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
 def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float) -> None:
   """Create a single-frame thumbnail at the given frame index. File format is determined by the output extension (e.g. .jpg or .png)."""
   t = frame / fps
-  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
+  cmd = ['ffmpeg', '-nostdin', '-i', video_path, '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', out_path]
   subprocess.run(cmd, capture_output=True, check=True)
 
 

From 3e9eb27ff9354a43e866511b769edee90e5094f8 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Wed, 17 Jun 2026 14:10:23 -0500
Subject: [PATCH 135/139] fix: ensure video paths are converted to string for
 ffmpeg commands

---
 selfdrive/ui/tests/diff/diff.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/selfdrive/ui/tests/diff/diff.py b/selfdrive/ui/tests/diff/diff.py
index 2f5e29406f3d4e..4010bc601c212d 100755
--- a/selfdrive/ui/tests/diff/diff.py
+++ b/selfdrive/ui/tests/diff/diff.py
@@ -24,7 +24,7 @@
 
 
 def extract_framehashes(video_path: Path) -> list[str]:
-  cmd = ['ffmpeg', '-nostdin', '-i', video_path, '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-map', '0:v:0', '-vsync', '0', '-f', 'framehash', '-hash', 'md5', '-']
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   hashes = []
   for line in result.stdout.splitlines():
@@ -76,13 +76,13 @@ def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[DiffChun
 
 def create_diff_video(video1: Path, video2: Path, output: Path) -> None:
   """Create a diff video of two clips using ffmpeg blend filter with difference mode."""
-  cmd = ['ffmpeg', '-nostdin', '-i', video1, '-i', video2, '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', output]
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video1), '-i', str(video2), '-filter_complex', 'blend=all_mode=difference', '-vsync', '0', '-y', str(output)]
   subprocess.run(cmd, capture_output=True, check=True)
 
 
 def get_video_fps(video_path: Path) -> float:
   """Return fps for a video file."""
-  cmd = ['ffprobe', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'json', video_path]
+  cmd = ['ffprobe', '-select_streams', 'v:0', '-show_entries', 'stream=r_frame_rate', '-of', 'json', str(video_path)]
   result = subprocess.run(cmd, capture_output=True, text=True, check=True)
   info = json.loads(result.stdout)['streams'][0]
   num, den = info['r_frame_rate'].split('/')
@@ -95,7 +95,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
   padding_before = start_frame - padded_start
   total_frames = (end_frame - start_frame + 1) + padding_before + CHUNK_PADDING_AFTER
   start_time = padded_start / fps
-  cmd = ['ffmpeg', '-nostdin', '-i', video_path, '-ss', f"{start_time:.6f}", '-frames:v', total_frames, '-vsync', '0', '-y', output_path]
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{start_time:.6f}", '-frames:v', str(total_frames), '-vsync', '0', '-y', str(output_path)]
   subprocess.run(cmd, capture_output=True, check=True)
   return total_frames
 
@@ -103,7 +103,7 @@ def extract_clip(video_path: Path, start_frame: int, end_frame: int, output_path
 def generate_thumbnail(video_path: Path, frame: int, out_path: Path, fps: float) -> None:
   """Create a single-frame thumbnail at the given frame index. File format is determined by the output extension (e.g. .jpg or .png)."""
   t = frame / fps
-  cmd = ['ffmpeg', '-nostdin', '-i', video_path, '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', out_path]
+  cmd = ['ffmpeg', '-nostdin', '-i', str(video_path), '-ss', f"{t:.6f}", '-frames:v', '1', '-vsync', '0', '-y', str(out_path)]
   subprocess.run(cmd, capture_output=True, check=True)
 
 

From e52d8e2ff41005b0a19769e437ba87320c6b79ec Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 7 Aug 2026 17:06:30 -0500
Subject: [PATCH 136/139] refactor: remove unnecessary source

---
 openpilot/selfdrive/ui/tests/diff/diff_template.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/openpilot/selfdrive/ui/tests/diff/diff_template.html b/openpilot/selfdrive/ui/tests/diff/diff_template.html
index a6ab78f849d9f2..55d74577c4f805 100644
--- a/openpilot/selfdrive/ui/tests/diff/diff_template.html
+++ b/openpilot/selfdrive/ui/tests/diff/diff_template.html
@@ -94,7 +94,7 @@ <h2>UI Diff</h2>
         ${LABELS.map((label, i) => `<td width='33.33%'>
           <h4>${label}</h4>
           <div class='video-box'>
-            <video id='v${i}' width='100%' muted playsinline preload='metadata'><source type='video/mp4'></video>
+            <video id='v${i}' width='100%' muted playsinline preload='metadata'></video>
             <div id='nv${i}' class='no-video'>No video</div>
           </div>
         </td>`).join('')}
@@ -162,8 +162,7 @@ <h4>${label}</h4>
       videos.forEach((v, vi) => {
         const src = srcs[vi];
         active[vi] = !!src;
-        const source = v.querySelector('source');
-        source.src = src || '';
+        v.src = src || '';
         v.load();
         v.style.display = src ? '' : 'none';
         if (src) v.play().catch(() => {});

From 7210e53fa8f1ee62a24bc5c4aa98dd0c3ced53c7 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Fri, 7 Aug 2026 17:15:41 -0500
Subject: [PATCH 137/139] remove unnecessary type

---
 openpilot/selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openpilot/selfdrive/ui/tests/diff/diff.py b/openpilot/selfdrive/ui/tests/diff/diff.py
index 3b3e06bbe2cd13..82ace4d261789f 100755
--- a/openpilot/selfdrive/ui/tests/diff/diff.py
+++ b/openpilot/selfdrive/ui/tests/diff/diff.py
@@ -63,7 +63,7 @@ class DiffChunk:
 def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[DiffChunk]:
   """Use difflib to compute diff chunks from the two hash lists. Returns a list of DiffChunk objects."""
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
-  diff_ops: list[list] = [list(op) for op in matcher.get_opcodes() if op[0] != 'equal']  # filter out equal chunks
+  diff_ops = [op for op in matcher.get_opcodes() if op[0] != 'equal']  # filter out equal chunks
   chunks: list[DiffChunk] = []
   for tag, i1, i2, j1, j2 in diff_ops:
     chunks.append(DiffChunk(

From 7bf2ed6b7ac7b0dc4d4ffeab5becdc2adf2b6b25 Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Mon, 10 Aug 2026 14:06:45 -0500
Subject: [PATCH 138/139] fix: type error

---
 openpilot/selfdrive/ui/tests/diff/diff.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openpilot/selfdrive/ui/tests/diff/diff.py b/openpilot/selfdrive/ui/tests/diff/diff.py
index 82ace4d261789f..ca1dab23505c49 100755
--- a/openpilot/selfdrive/ui/tests/diff/diff.py
+++ b/openpilot/selfdrive/ui/tests/diff/diff.py
@@ -51,7 +51,7 @@ def get_video_frame_hashes(video1: Path, video2: Path) -> tuple[list[str], list[
 @dataclass
 class DiffChunk:
   """Represents a contiguous chunk of differences between the two videos. Ranges (start-end) are inclusive."""
-  type: Literal['replace', 'insert', 'delete']
+  type: Literal['replace', 'insert', 'delete', 'equal']
   v1_start: int
   v1_end: int
   v1_count: int

From b4ba5c0e6db8c7d61fa2a56d530132eff4e93b7c Mon Sep 17 00:00:00 2001
From: David <dt052901@gmail.com>
Date: Mon, 10 Aug 2026 14:09:04 -0500
Subject: [PATCH 139/139] fix: better fix

---
 openpilot/selfdrive/ui/tests/diff/diff.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/openpilot/selfdrive/ui/tests/diff/diff.py b/openpilot/selfdrive/ui/tests/diff/diff.py
index ca1dab23505c49..fb02357315bb3e 100755
--- a/openpilot/selfdrive/ui/tests/diff/diff.py
+++ b/openpilot/selfdrive/ui/tests/diff/diff.py
@@ -51,7 +51,7 @@ def get_video_frame_hashes(video1: Path, video2: Path) -> tuple[list[str], list[
 @dataclass
 class DiffChunk:
   """Represents a contiguous chunk of differences between the two videos. Ranges (start-end) are inclusive."""
-  type: Literal['replace', 'insert', 'delete', 'equal']
+  type: Literal['replace', 'insert', 'delete']
   v1_start: int
   v1_end: int
   v1_count: int
@@ -63,9 +63,10 @@ class DiffChunk:
 def compute_diff_chunks(hashes1: list[str], hashes2: list[str]) -> list[DiffChunk]:
   """Use difflib to compute diff chunks from the two hash lists. Returns a list of DiffChunk objects."""
   matcher = difflib.SequenceMatcher(a=hashes1, b=hashes2, autojunk=False)
-  diff_ops = [op for op in matcher.get_opcodes() if op[0] != 'equal']  # filter out equal chunks
   chunks: list[DiffChunk] = []
-  for tag, i1, i2, j1, j2 in diff_ops:
+  for tag, i1, i2, j1, j2 in matcher.get_opcodes():
+    if tag == 'equal':
+      continue
     chunks.append(DiffChunk(
       type=tag,
       v1_start=i1, v1_end=i2 - 1, v1_count=i2 - i1,