frontend update

theater_template.html

@@ -367,43 +367,18 @@
       return colors[index];
     }
 
-    // Prep and flatten messages with random offsets within segment durations
+    // chatData is a flat list of messages with precomputed numeric displayTime.
+    // No segment loops, no timestamp arithmetic, no NaN path.
     function prepareMessages() {
-      flattenedMessages = [];
-      
-      for (let i = 0; i < chatData.length; i++) {
-        const segment = chatData[i];
-        const start = segment.timestamp;
-        
-        // Find next segment timestamp to determine segment duration
-        const nextStart = (i < chatData.length - 1) ? chatData[i+1].timestamp : start + 30;
-        const duration = Math.max(5, nextStart - start);
-        
-        const messages = segment.messages || [];
-        messages.forEach((msg, index) => {
-          // Spread messages evenly or randomly across the duration
-          const randomOffset = Math.random() * duration;
-          const displayTime = start + randomOffset;
-          
-          // Generate unique ID
-          const id = `${start}_${index}_${msg.username}`;
-          
-          // Assign visual badges
-          const isMod = (index % 15 === 0);
-          const isSub = (index % 4 === 0) && !isMod;
-          
-          flattenedMessages.push({
-            id: id,
-            displayTime: displayTime,
-            username: msg.username,
-            text: msg.text,
-            isMod: isMod,
-            isSub: isSub
-          });
-        });
-      }
-      
-      // Sort messages by displayTime
+      flattenedMessages = chatData.map((msg, index) => ({
+        id: msg.id || `msg_${index}`,
+        displayTime: msg.displayTime,  // numeric, pre-computed by pipeline
+        username: msg.username,
+        text: msg.text,
+        isMod: (index % 15 === 0),
+        isSub: (index % 4 === 0) && !(index % 15 === 0),
+      }));
+      // Guaranteed numeric sort — displayTime is never a string or NaN.
       flattenedMessages.sort((a, b) => a.displayTime - b.displayTime);
     }