4 files changed, 35 insertions, 4 deletions
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index edd9d79..ea90414 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -20,10 +20,17 @@
   }
 </script>
 
-<div class="message" class:delete-armed={deleteArmed} role="article" data-at={at} {onmouseleave}>
+<div
+  class="message"
+  class:delete-armed={deleteArmed}
+  class:unsent={id === null}
+  role="article"
+  data-at={at}
+  {onmouseleave}
+>
   <div class="handle">
     {atFormatted}
-    {#if editable}
+    {#if editable && id}
       <button onclick={ondelete}>&#x1F5D1;&#xFE0F;</button>
     {/if}
   </div>
diff --git a/ui/lib/outbox.svelte.js b/ui/lib/outbox.svelte.js
index fd7fdba..0e4cf29 100644
--- a/ui/lib/outbox.svelte.js
+++ b/ui/lib/outbox.svelte.js
@@ -1,3 +1,6 @@
+import { DateTime } from 'luxon';
+import * as msg from './state/remote/messages.svelte.js';
+
 import * as api from './apiServer.js';
 import * as md from './markdown.js';
 
@@ -5,9 +8,21 @@ class PostToChannel {
   constructor(channel, body) {
     this.channel = channel;
     this.body = body;
+    this.at = DateTime.now();
     this.renderedBody = md.render(body);
   }
 
+  toSkeleton(sender) {
+    return {
+      id: null,
+      at: this.at,
+      channel: this.channel,
+      sender,
+      body: this.body,
+      renderedBody: this.renderedBody
+    };
+  }
+
   async send() {
     return await api.retry(() => api.postToChannel(this.channel, this.body));
   }
@@ -35,6 +50,7 @@ class CreateChannel {
 
 export class Outbox {
   pending = $state([]);
+  messages = $derived(this.pending.filter((operation) => operation instanceof PostToChannel));
 
   static empty() {
     return new Outbox([]);
diff --git a/ui/lib/runs.js b/ui/lib/runs.js
index f4e90be..e3d4c20 100644
--- a/ui/lib/runs.js
+++ b/ui/lib/runs.js
@@ -21,5 +21,13 @@ function runKey(message) {
 }
 
 function continueRun([lastSender, lastAt], [newSender, newAt]) {
-  return lastSender === newSender && newAt - lastAt < RUN_COALESCE_MAX_INTERVAL;
+  const { id: lastId, name: lastName } = lastSender;
+  const { id: newId, name: newName } = newSender;
+  if (lastId !== newId) {
+    return false;
+  }
+  if (lastName !== newName) {
+    return false;
+  }
+  return newAt - lastAt < RUN_COALESCE_MAX_INTERVAL;
 }
diff --git a/ui/lib/state/remote/messages.svelte.js b/ui/lib/state/remote/messages.svelte.js
index 576a74e..c6d31f0 100644
--- a/ui/lib/state/remote/messages.svelte.js
+++ b/ui/lib/state/remote/messages.svelte.js
@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { render } from '$lib/markdown.js';
 
-class Message {
+export class Message {
   static boot({ id, at, channel, sender, body }) {
     return new Message({
       id,