1 files changed, 18 insertions, 4 deletions

diff --git a/ui/lib/store/messages.svelte.js b/ui/lib/store/messages.svelte.js
index 4630a40..c0db71b 100644
--- a/ui/lib/store/messages.svelte.js
+++ b/ui/lib/store/messages.svelte.js
@@ -11,7 +11,20 @@ export class Messages {
     let parsedAt = new Date(at);
     const message = { id, at: parsedAt, body };
 
-    let runs = (this.channels[channel] ||= []);
+    // You might be thinking, can't this be
+    //
+    //     let runs = (this.channels[channel] ||= []);
+    //
+    // Let me tell you, I thought that too. Javascript's semantics allow it. It
+    // didn't work - the first message in each channel was getting lost as the
+    // update to `this.channels` wasn't actually happening. I suspect this is
+    // due to the implementation of Svelte's `$state` rune, but I don't know it
+    // for sure.
+    //
+    // In any case, splitting the read and write up like this has the same
+    // semantics, and _works_. (This time, for sure!)
+    let runs = this.channels[channel] || [];
+
     let currentRun = runs.slice(-1)[0];
     if (currentRun === undefined) {
       currentRun = { sender, messages: [message] };
@@ -19,8 +32,7 @@ export class Messages {
     } else {
       let lastMessage = currentRun.messages.slice(-1)[0];
       let newRun =
-        currentRun.sender !== sender
-        || parsedAt - lastMessage.at > RUN_COALESCE_MAX_INTERVAL;
+        currentRun.sender !== sender || parsedAt - lastMessage.at > RUN_COALESCE_MAX_INTERVAL;
 
       if (newRun) {
         currentRun = { sender, messages: [message] };
@@ -30,13 +42,15 @@ export class Messages {
       }
     }
 
+    this.channels[channel] = runs;
+
     return this;
   }
 
   setMessages(messages) {
     this.channels = {};
     for (let { channel, id, at, sender, body } of messages) {
-      this.addMessage(channel, id, at, sender, body);
+      this.addMessage(channel, id, { at, sender, body });
     }
     return this;
   }