From feda315c2bfc6fc82fb86110114e03bcb812f1b2 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Fri, 14 Mar 2025 08:53:07 -0700
Subject: [PATCH] feat: make transcript timestamps clickable to seek player

---
 aider/website/_includes/recording.css | 12 ++++++++++++
 aider/website/_includes/recording.js  | 28 +++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/aider/website/_includes/recording.css b/aider/website/_includes/recording.css
index afab7a042..1ce5c53f1 100644
--- a/aider/website/_includes/recording.css
+++ b/aider/website/_includes/recording.css
@@ -87,6 +87,18 @@
   margin-bottom: 20px;
   position: relative;
 }
+
+/* Timestamp link styling */
+.timestamp-link {
+  color: #0366d6;
+  text-decoration: none;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.timestamp-link:hover {
+  text-decoration: underline;
+}
 .asciinema-player-theme-aider {
   /* Foreground (default text) color */
   --term-color-foreground: #444444;  /* colour238 */
diff --git a/aider/website/_includes/recording.js b/aider/website/_includes/recording.js
index 3d8c07b5f..91ba8c4ce 100644
--- a/aider/website/_includes/recording.js
+++ b/aider/website/_includes/recording.js
@@ -1,5 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
-  // Parse the transcript section to create markers
+  let player; // Store player reference to make it accessible to click handlers
+  
+  // Parse the transcript section to create markers and convert timestamps to links
   function parseTranscript() {
     const markers = [];
     // Find the Transcript heading
@@ -20,8 +22,30 @@ document.addEventListener('DOMContentLoaded', function() {
             const minutes = parseInt(match[1], 10);
             const seconds = parseInt(match[2], 10);
             const timeInSeconds = minutes * 60 + seconds;
+            const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;
             const message = match[3].trim();
             
+            // Create link for the timestamp
+            const timeLink = document.createElement('a');
+            timeLink.href = '#';
+            timeLink.textContent = formattedTime;
+            timeLink.className = 'timestamp-link';
+            timeLink.dataset.time = timeInSeconds;
+            
+            // Add click event to seek the player
+            timeLink.addEventListener('click', function(e) {
+              e.preventDefault();
+              if (player && typeof player.seek === 'function') {
+                player.seek(timeInSeconds);
+                player.play();
+              }
+            });
+            
+            // Replace text with the link + message
+            item.textContent = '';
+            item.appendChild(timeLink);
+            item.appendChild(document.createTextNode(' ' + message));
+            
             markers.push([timeInSeconds, message]);
           }
         });
@@ -39,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function() {
   const markers = parseTranscript();
   
   // Create player with a single call
-  const player = AsciinemaPlayer.create(
+  player = AsciinemaPlayer.create(
     url,
     document.getElementById('demo'),
     {