feat: generate transcript and event-driven particle processing

This generates the transcript and shows the caption experience on the
client side for media particles. It also simplifies other side effects
that we must perform such as updating the `last_child_created_at` field
for stream and container particles.

js/src/features/particles/media-particle-view.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import type { Particle } from "@/api/types";
 import { useDownloadUrl } from "@/hooks/use-download-url";
+import { useTranscriptPlayback } from "@/hooks/use-transcript-playback";
+import { TranscriptOverlay } from "@/features/particles/transcript-overlay";
 import { Skeleton } from "@/components/ui/skeleton";
 import { AudioLevelBars } from "@/components/audio/audio-level-bars";
 import { useAudioSource } from "@/components/audio/use-audio-source";
@@ -25,6 +27,13 @@ export function MediaParticleView({
   const videoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
   const isAudio = particle.properties.mime_type?.startsWith("audio/");
+  const [currentTime, setCurrentTime] = useState(0);
+
+  const transcript = particle.properties.transcript;
+  const { activeParagraph, activeWordIndex } = useTranscriptPlayback(
+    transcript,
+    currentTime,
+  );
 
   // WORKAROUND: useAudioSource needs an audio element, but audioRef is only set after mount
   const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
@@ -55,6 +64,20 @@ export function MediaParticleView({
     return <Skeleton className="h-full w-full rounded-none" />;
   }
 
+  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLAudioElement | HTMLVideoElement>) => {
+    const { currentTime: time, duration } = e.currentTarget;
+    setCurrentTime(time);
+    if (duration > 0) onProgress?.(time / duration);
+  };
+
+  const captionOverlay = transcript ? (
+    <TranscriptOverlay
+      transcript={transcript}
+      activeParagraph={activeParagraph}
+      activeWordIndex={activeWordIndex}
+    />
+  ) : null;
+
   if (isAudio) {
     return (
       <div className="relative flex h-full w-full items-center justify-center bg-black/90">
@@ -67,10 +90,7 @@ export function MediaParticleView({
           src={url}
           autoPlay
           onEnded={onEnded}
-          onTimeUpdate={(e) => {
-            const { currentTime, duration } = e.currentTarget;
-            if (duration > 0) onProgress?.(currentTime / duration);
-          }}
+          onTimeUpdate={handleTimeUpdate}
         />
 
         {audioSource && (
@@ -78,6 +98,8 @@ export function MediaParticleView({
             <AudioLevelBars sourceNode={audioSource.sourceNode} />
           </div>
         )}
+
+        {captionOverlay}
       </div>
     );
   }
@@ -90,12 +112,11 @@ export function MediaParticleView({
         autoPlay
         playsInline
         onEnded={onEnded}
-        onTimeUpdate={(e) => {
-          const { currentTime, duration } = e.currentTarget;
-          if (duration > 0) onProgress?.(currentTime / duration);
-        }}
+        onTimeUpdate={handleTimeUpdate}
         className="h-full w-full object-cover"
       />
+
+      {captionOverlay}
     </div>
   );
 }

js/src/features/particles/transcript-overlay.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import type { Transcript } from "@/api/types";
+
+interface TranscriptOverlayProps {
+  transcript: Transcript;
+  activeParagraph: Transcript["paragraphs"][number] | null;
+  activeWordIndex: number | null;
+}
+
+export function TranscriptOverlay({
+  transcript,
+  activeParagraph,
+  activeWordIndex,
+}: TranscriptOverlayProps) {
+  // Find the words that belong to the active paragraph by time range
+  const paragraphWords = useMemo(() => {
+    if (!activeParagraph) return [];
+    return transcript.words.filter(
+      (w) => w.start >= activeParagraph.start && w.end <= activeParagraph.end,
+    );
+  }, [transcript.words, activeParagraph]);
+
+  if (!activeParagraph || paragraphWords.length === 0) return null;
+
+  // The active word from the flat array — find it by index to compare
+  const activeWord =
+    activeWordIndex !== null ? transcript.words[activeWordIndex] : null;
+
+  return (
+    <div className="absolute bottom-10 left-0 right-0 flex justify-center px-6 py-4 max-w-md">
+      <p className="rounded-lg bg-black/20 px-5 py-3 text-base leading-relaxed backdrop-blur-sm text-lg text-left">
+        {paragraphWords.map((word, i) => {
+          const isSpoken =
+            activeWord !== null && word.start <= activeWord.end;
+
+          return (
+            <span
+              key={`${word.start}-${i}`}
+              className={
+                isSpoken
+                  ? "text-white font-medium transition-colors duration-150"
+                  : "text-white/40 transition-colors duration-150"
+              }
+            >
+              {i > 0 ? " " : ""}
+              {word.word}
+            </span>
+          );
+        })}
+      </p>
+    </div>
+  );
+}