🐛(frontend) ensure transcript segments are sorted by their timestamp

Switching from Deepgram to our custom Kyutai implementation introduced changes
in how segment data is returned by the LiveKit agent, so the segment start time
is now treated as optional.

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to
 - ♿️(frontend) announce copy state in invite dialog #877
 - 📝(frontend) align close dialog label in rooms locale #878
 - 🩹(backend) use case-insensitive email matching in the external api #887
+- 🐛(frontend) ensure transcript segments are sorted by their timestamp #899
 
 ## [1.3.0] - 2026-01-13
 

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -13,7 +13,7 @@ export interface TranscriptionSegment {
   id: string
   text: string
   language: string
-  startTime: number
+  startTime?: number
   endTime: number
   final: boolean
   firstReceivedTime: number
@@ -24,8 +24,9 @@ export interface TranscriptionRow {
   id: string
   participant: Participant
   segments: TranscriptionSegment[]
-  startTime: number
+  startTime?: number
   lastUpdateTime: number
+  lastReceivedTime: number
 }
 
 const useTranscriptionState = () => {
@@ -72,7 +73,9 @@ const useTranscriptionState = () => {
           id: `${participant.identity}-${now}`,
           participant,
           segments: [...segments],
-          startTime: Math.min(...segments.map((s) => s.startTime)),
+          lastReceivedTime: Math.min(
+            ...segments.map((s) => s.lastReceivedTime)
+          ),
           lastUpdateTime: now,
         }
         updatedRows.push(newRow)
@@ -228,7 +231,11 @@ export const Subtitles = () => {
       >
         {transcriptionRows
           .slice()
-          .reverse()
+          .sort(
+            (a, b) =>
+              (b.startTime ?? b.lastUpdateTime) -
+              (a.startTime ?? a.lastUpdateTime)
+          )
           .map((row) => (
             <Transcription key={row.id} row={row} />
           ))}