feat: Make entire transcript list items clickable

aider/website/_includes/recording.css

@@ -115,6 +115,19 @@ li.active-marker {
   padding: 4px 8px;
   margin-left: -8px;
 }
+
+/* Make list items clickable */
+.transcript-item {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  padding: 4px 8px;
+  margin-left: -8px;
+  border-radius: 4px;
+}
+
+.transcript-item:hover {
+  background-color: #f0f0f0;
+}
 .asciinema-player-theme-aider {
   /* Foreground (default text) color */
   --term-color-foreground: #444444;  /* colour238 */

aider/website/_includes/recording.js

@@ -54,6 +54,30 @@ document.addEventListener('DOMContentLoaded', function() {
             item.appendChild(timeLink);
             item.appendChild(document.createTextNode(' ' + message));
             
+            // Add class and click handler to the entire list item
+            item.classList.add('transcript-item');
+            item.dataset.time = timeInSeconds;
+            item.dataset.message = message;
+            
+            item.addEventListener('click', function(e) {
+              // Prevent click event if the user clicked directly on the timestamp link
+              // This prevents double-firing of the event
+              if (e.target !== timeLink) {
+                e.preventDefault();
+                if (player && typeof player.seek === 'function') {
+                  player.seek(timeInSeconds);
+                  player.play();
+                  
+                  // Also trigger toast and speech
+                  showToast(message);
+                  speakText(message);
+                  
+                  // Highlight this timestamp
+                  highlightTimestamp(timeInSeconds);
+                }
+              }
+            });
+            
             markers.push([timeInSeconds, message]);
           }
         });