Show the live transcript as one flowing row of confidence chips.

Drop per-segment cards and plain text so only colored word chips wrap in a single container while transcription runs.

resources/js/transcription.js

@@ -171,6 +171,32 @@ export function transcriptionMonitor({ statusUrl, initial, userId }) {
             return this.status.has_transcript ? 'Re-transcribe' : 'Start transcription';
         },
 
+        get whisperWords() {
+            return this.whisper.segments.flatMap((segment, segmentIndex) => {
+                if (Array.isArray(segment.words) && segment.words.length) {
+                    return segment.words.map((word, wordIndex) => ({
+                        word: word.word,
+                        start: word.start,
+                        probability: word.probability,
+                        key: [segmentIndex, wordIndex, word.start ?? '', word.word ?? ''].join(':'),
+                    }));
+                }
+
+                const text = typeof segment.text === 'string' ? segment.text.trim() : '';
+
+                if (text === '') {
+                    return [];
+                }
+
+                return [{
+                    word: text,
+                    start: segment.start,
+                    probability: null,
+                    key: segmentIndex + ':text',
+                }];
+            });
+        },
+
         start() {
             this.leaveChannel = subscribeToRecording({
                 recordingId: this.status.id,
@@ -421,10 +447,6 @@ export function transcriptionMonitor({ statusUrl, initial, userId }) {
             return segments.concat([segment]);
         },
 
-        segmentDomKey(segment, index) {
-            return segmentKey(segment) + '#' + index;
-        },
-
         seekTo(seconds) {
             const player = this.$refs.player;