feat: Highlight last-played marker in transcript

aider/website/_includes/recording.css

@@ -99,6 +99,22 @@
 .timestamp-link:hover {
   text-decoration: underline;
 }
+
+/* Active timestamp styling */
+.timestamp-active {
+  background-color: #f0f8ff; /* Light blue background */
+  border-radius: 3px;
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+
+/* Highlight the list item containing the active timestamp */
+li.active-marker {
+  background-color: #f6f8fa;
+  border-radius: 4px;
+  padding: 4px 8px;
+  margin-left: -8px;
+}
 .asciinema-player-theme-aider {
   /* Foreground (default text) color */
   --term-color-foreground: #444444;  /* colour238 */

aider/website/_includes/recording.js

@@ -43,6 +43,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 // Also trigger toast and speech
                 showToast(message);
                 speakText(message);
+                
+                // Highlight this timestamp
+                highlightTimestamp(timeInSeconds);
               }
             });
             
@@ -153,6 +156,43 @@ document.addEventListener('DOMContentLoaded', function() {
       console.warn('Speech synthesis not supported in this browser');
     }
   }
+  
+  // Function to highlight the active timestamp in the transcript
+  function highlightTimestamp(timeInSeconds) {
+    // Remove previous highlights
+    document.querySelectorAll('.timestamp-active').forEach(el => {
+      el.classList.remove('timestamp-active');
+    });
+    
+    document.querySelectorAll('.active-marker').forEach(el => {
+      el.classList.remove('active-marker');
+    });
+    
+    // Find the timestamp link with matching time
+    const timestampLinks = document.querySelectorAll('.timestamp-link');
+    let activeLink = null;
+    
+    for (const link of timestampLinks) {
+      if (parseInt(link.dataset.time) === timeInSeconds) {
+        activeLink = link;
+        break;
+      }
+    }
+    
+    if (activeLink) {
+      // Add highlight class to the link
+      activeLink.classList.add('timestamp-active');
+      
+      // Also highlight the parent list item
+      const listItem = activeLink.closest('li');
+      if (listItem) {
+        listItem.classList.add('active-marker');
+        
+        // Scroll the list item into view if needed
+        listItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    }
+  }
 
   // Add event listener with safety checks
   if (player && typeof player.addEventListener === 'function') {
@@ -164,6 +204,9 @@ document.addEventListener('DOMContentLoaded', function() {
         // Speak the marker label and show toast
         speakText(label);
         showToast(label);
+        
+        // Highlight the corresponding timestamp in the transcript
+        highlightTimestamp(time);
       } catch (error) {
         console.error('Error in marker event handler:', error);
       }