1 files changed, 16 insertions, 1 deletions
diff --git a/ui/lib/store/messages.svelte.js b/ui/lib/store/messages.svelte.js
index 2442675..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] };
@@ -29,6 +42,8 @@ export class Messages {
       }
     }
 
+    this.channels[channel] = runs;
+
     return this;
   }