From 95a17889b98a8a394777daecedf3406ee52b4099 Mon Sep 17 00:00:00 2001
From: Fran Fitzpatrick <francis.x.fitzpatrick@gmail.com>
Date: Mon, 5 Jan 2026 16:55:15 -0600
Subject: [PATCH] feat: click timestamp to seek in Timeline View
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add click-to-seek functionality on the timestamp/speaker area in Timeline View.
Clicking the timestamp or speaker name now jumps the audio to that point.

Changes:
- Add handleSegmentSeek callback
- Make timestamp/speaker div clickable with hover styles
- Add keyboard accessibility (Enter/Space to activate)
- Add tooltip "Click to jump to this point"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/transcript/TranscriptView.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/frontend/src/components/transcript/TranscriptView.tsx b/web/frontend/src/components/transcript/TranscriptView.tsx
index 1722cba5..a55c8ec7 100644
--- a/web/frontend/src/components/transcript/TranscriptView.tsx
+++ b/web/frontend/src/components/transcript/TranscriptView.tsx
@@ -70,6 +70,11 @@ export const TranscriptView = forwardRef<HTMLDivElement, TranscriptViewProps>(({
         return speakerMappings[originalSpeaker] || originalSpeaker;
     };
 
+    // Click-to-seek handler for timestamp/speaker area in expanded view
+    const handleSegmentSeek = useCallback((segmentStart: number) => {
+        onSeek(segmentStart);
+    }, [onSeek]);
+
     const containerRef = useRef<HTMLDivElement>(null);
     const [isModifierPressed, setIsModifierPressed] = useState(false);
     const isDesktop = useIsDesktop();
@@ -263,15 +268,26 @@ export const TranscriptView = forwardRef<HTMLDivElement, TranscriptViewProps>(({
             <div className="space-y-4"> {/* Reduced spacing from space-y-6 */}
                 {expandedData.map((segment, i) => (
                     <div key={i} className="group flex flex-col sm:flex-row items-start gap-4 p-3 rounded-lg hover:bg-carbon-50 dark:hover:bg-carbon-800/50 transition-colors border border-transparent hover:border-carbon-100 dark:hover:border-carbon-800">
-                        {/* Timestamp & Speaker */}
-                        <div className="flex-shrink-0 w-24 sm:w-28 flex flex-col items-start sm:items-end gap-1 text-xs text-carbon-500 dark:text-carbon-400 select-none mt-1">
+                        {/* Timestamp & Speaker - Clickable to seek */}
+                        <div
+                            className="flex-shrink-0 w-24 sm:w-28 flex flex-col items-start sm:items-end gap-1 text-xs text-carbon-500 dark:text-carbon-400 select-none mt-1 cursor-pointer rounded-md p-1 -m-1 hover:bg-carbon-100 dark:hover:bg-carbon-700/50 transition-colors"
+                            onClick={() => handleSegmentSeek(segment.start)}
+                            role="button"
+                            tabIndex={0}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleSegmentSeek(segment.start);
+                                }
+                            }}
+                            title="Click to jump to this point"
+                        >
                             <span className="font-mono bg-carbon-100 dark:bg-carbon-800/80 px-1.5 py-0.5 rounded text-[10px] sm:text-xs">
                                 {new Date(segment.start * 1000).toISOString().substr(11, 8)}
                             </span>
                             {segment.speaker && (
                                 <span
                                     className="font-medium text-carbon-700 dark:text-carbon-300 truncate max-w-full"
-                                    title={getDisplaySpeakerName(segment.speaker)}
                                 >
                                     {getDisplaySpeakerName(segment.speaker)}
                                 </span>