frontend/src/routes/documents/[id]/+page.svelte

@@ -124,16 +124,22 @@ function handleBlockFocus(blockId: string) {
 	}
 }
 
-function handleAnnotationClick(annotationId: string) {
+async function handleAnnotationClick(annotationId: string) {
 	activeAnnotationId = annotationId;
-	// In transcribe mode, focus the block that owns this annotation
-	if (transcribeMode) {
+
+	if (!transcribeMode) {
+		transcribeMode = true;
+		await loadTranscriptionBlocks();
+	}
+
+	// Wait for DOM to render the blocks, then scroll to the matching one
+	requestAnimationFrame(() => {
 		const block = transcriptionBlocks.find((b) => b.annotationId === annotationId);
 		if (block) {
 			const el = document.querySelector(`[data-block-id="${block.id}"]`);
 			el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 		}
-	}
+	});
 }
 
 // Load blocks when transcribe mode is entered