From 3da1dfd3efab2478c637a7a608a83fd1a9e4dbbc Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Mon, 28 Sep 2026 17:54:27 -0400
Subject: [PATCH 1/5] feature: edit or delete your own chat messages for 10
 minutes

The message menu offers the author Edit Message and Delete Message on a
line they sent from the website in the last ten minutes, in every room
including direct conversations. Moderators keep their delete in group
rooms, and nobody edits someone else's words. The window is checked
when the menu opens rather than on a timer; a trigger left over from
before the window closed goes away with a toast saying why.

Editing happens in place: Enter saves, Esc cancels, Shift+Enter breaks
the line, and the box counts down near the 2000 character cap like the
composer. Only one editor is open across a list. An unchanged edit just
closes, a failure keeps the editor open with a toast, and a closed
window or a message that is gone closes it.

The socket sends lobby:edit through the same request plumbing as a
delete, applies the text on the ack, and listens for the room's
`edited` event, which never creates a message and never revives a
deleted one. A stale history snapshot keeps an edit it predates.
Edited lines carry an "(edited)" marker with the edit time in a
tooltip. Conversation badges now know which messages they counted, so
a deleted direct message comes off the badge.
---
 components/chat/ChatInput.vue                 |   9 +-
 components/chat/ChatMessage.vue               |  80 +++++-
 components/chat/ChatMessageActions.vue        |  89 ++++--
 components/chat/ChatMessageEditor.vue         | 186 +++++++++++++
 components/chat/ChatMessages.vue              |  16 ++
 composables/useChatTabSetup.ts                |  14 +-
 composables/useIncomingDirectMessages.ts      |  12 +-
 constants/chat.ts                             |   2 +
 i18n/locales/ar_SA.json                       |   9 +
 i18n/locales/da_DK.json                       |   9 +
 i18n/locales/de_DE.json                       |   9 +
 i18n/locales/en.json                          |   9 +
 i18n/locales/es_ES.json                       |   9 +
 i18n/locales/fr_FR.json                       |   9 +
 i18n/locales/it_IT.json                       |   9 +
 i18n/locales/ja_JP.json                       |   9 +
 i18n/locales/ko_KR.json                       |   9 +
 i18n/locales/pl_PL.json                       |   9 +
 i18n/locales/pt_BR.json                       |   9 +
 i18n/locales/ru_RU.json                       |   9 +
 i18n/locales/sv_SE.json                       |   9 +
 i18n/locales/tr_TR.json                       |   9 +
 i18n/locales/uk_UA.json                       |   9 +
 i18n/locales/zh_Hans.json                     |   9 +
 i18n/locales/zh_Hant.json                     |   9 +
 tests/components/ChatMessage.spec.ts          | 255 +++++++++++++++++-
 tests/components/ChatMessageActions.spec.ts   | 117 +++++++-
 tests/components/ChatMessages.spec.ts         |  87 ++++++
 .../useChatTabSetupDeletes.spec.ts            |  86 ++++++
 tests/utilities/chatErrors.spec.ts            |  41 +++
 tests/utilities/chatLobbyMessages.spec.ts     | 109 ++++++++
 tests/utilities/chatMessageActions.spec.ts    | 113 +++++++-
 tests/web-sockets/SocketChatError.spec.ts     | 230 ++++++++++++++++
 utilities/chatErrors.ts                       |  26 +-
 utilities/chatLobbyMessages.ts                |  91 ++++++-
 utilities/chatMessageActions.ts               |  40 ++-
 web-sockets/Socket.ts                         | 113 ++++++--
 37 files changed, 1811 insertions(+), 58 deletions(-)
 create mode 100644 components/chat/ChatMessageEditor.vue
 create mode 100644 tests/components/ChatMessages.spec.ts

diff --git a/components/chat/ChatInput.vue b/components/chat/ChatInput.vue
index 0bc90492..9d1a78db 100644
--- a/components/chat/ChatInput.vue
+++ b/components/chat/ChatInput.vue
@@ -167,9 +167,10 @@ import { useForm } from "vee-validate";
 import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import { chatEnterAction } from "~/utilities/chatInputKeys";
 import { toastChatError } from "~/utilities/chatErrors";
-import { CHAT_MESSAGE_MAX_LENGTH } from "~/constants/chat";
-
-const REMAINING_HINT_AT = 200;
+import {
+  CHAT_MESSAGE_MAX_LENGTH,
+  CHAT_REMAINING_HINT_AT,
+} from "~/constants/chat";
 
 export interface ChatInputChannel {
   value: string;
@@ -232,7 +233,7 @@ export default {
       return CHAT_MESSAGE_MAX_LENGTH - message.length;
     },
     showRemaining(): boolean {
-      return this.remainingCharacters <= REMAINING_HINT_AT;
+      return this.remainingCharacters <= CHAT_REMAINING_HINT_AT;
     },
     activeChannelValue() {
       return this.destination ?? this.channels[0]?.value;
diff --git a/components/chat/ChatMessage.vue b/components/chat/ChatMessage.vue
index d4ed9512..bf68bef1 100644
--- a/components/chat/ChatMessage.vue
+++ b/components/chat/ChatMessage.vue
@@ -3,6 +3,8 @@ import { dateLocale } from "~/utilities/dateLocale";
 import TimeAgo from "~/components/TimeAgo.vue";
 import PlayerDisplay from "~/components/PlayerDisplay.vue";
 import ChatMessageActions from "~/components/chat/ChatMessageActions.vue";
+import ChatMessageEditor from "~/components/chat/ChatMessageEditor.vue";
+import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
 </script>
 
 <template>
@@ -74,20 +76,48 @@ import ChatMessageActions from "~/components/chat/ChatMessageActions.vue";
           {{ $t("chat.team_tag") }}
         </span>
       </div>
-      <p class="text-[11px] leading-snug break-words whitespace-pre-wrap">
-        {{ message.message }}
+      <ChatMessageEditor
+        v-if="editing && room"
+        :message="message"
+        :room="room"
+        @close="$emit('edit-end')"
+      />
+      <p
+        v-else
+        class="text-[11px] leading-snug break-words whitespace-pre-wrap"
+      >
+        <span>{{ message.message }}</span>
+        <FiveStackToolTip
+          v-if="editedAtLabel"
+          as-child
+          :delay-duration="120"
+          side="top"
+        >
+          <template #trigger>
+            <span
+              class="ml-1 whitespace-nowrap text-[9px] text-muted-foreground/70"
+              data-chat-edited
+            >
+              {{ $t("chat.edited") }}
+            </span>
+          </template>
+          {{ $t("chat.edited_at", { time: editedAtLabel }) }}
+        </FiveStackToolTip>
       </p>
     </div>
 
     <!-- Centred on the first line rather than hung off its top: the trigger is
          taller than a line of chat. -->
     <ChatMessageActions
-      v-if="hasActions"
+      v-if="hasActions && !editing"
       class="absolute right-0 z-10"
       :style="{ top: `calc(${padTopRem}rem - 0.25rem)` }"
       :message="message"
       :room="room"
       :permissions="permissions"
+      :own="isOwnMessage"
+      @open="recheckPermissions"
+      @edit="$emit('edit')"
     />
   </div>
 </template>
@@ -95,9 +125,11 @@ import ChatMessageActions from "~/components/chat/ChatMessageActions.vue";
 <script lang="ts">
 import type { PropType } from "vue";
 import type { ChatType } from "~/web-sockets/Socket";
+import { toast } from "@/components/ui/toast";
 import {
   chatMessagePermissions,
   hasChatMessageActions,
+  isOwnChatMessage,
 } from "~/utilities/chatMessageActions";
 
 export default {
@@ -124,13 +156,55 @@ export default {
       type: Boolean,
       default: false,
     },
+    editing: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["edit", "edit-end"],
+  data() {
+    return {
+      // Not a ticking clock: the menu refreshes it when it opens.
+      permissionsCheckedAt: Date.now(),
+    };
+  },
+  methods: {
+    // A menu opened after the window closed has nothing left to offer, so the
+    // trigger goes and the reason is given instead of an empty menu.
+    recheckPermissions() {
+      this.permissionsCheckedAt = Date.now();
+
+      if (!hasChatMessageActions(this.permissions)) {
+        toast({ title: this.$t("chat.own_message_window_closed") });
+      }
+    },
   },
   computed: {
+    viewerSteamId() {
+      return useAuthStore().me?.steam_id ?? null;
+    },
+    isOwnMessage() {
+      return isOwnChatMessage(this.message, this.viewerSteamId);
+    },
     permissions() {
       return chatMessagePermissions({
         message: this.message,
+        viewerSteamId: this.viewerSteamId,
         canModerate: this.canModerate,
         roomType: this.room?.type ?? "",
+        now: this.permissionsCheckedAt,
+      });
+    },
+    editedAtLabel() {
+      const editedAt = new Date(this.message?.edited_at ?? NaN);
+
+      if (Number.isNaN(editedAt.getTime())) {
+        return "";
+      }
+
+      return editedAt.toLocaleString(dateLocale(), {
+        dateStyle: "medium",
+        timeStyle: "short",
       });
     },
     hasActions() {
diff --git a/components/chat/ChatMessageActions.vue b/components/chat/ChatMessageActions.vue
index 80d07c67..f903f627 100644
--- a/components/chat/ChatMessageActions.vue
+++ b/components/chat/ChatMessageActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch } from "vue";
-import { MoreVertical, Trash2 } from "lucide-vue-next";
+import { MoreVertical, Pencil, Trash2 } from "lucide-vue-next";
 import { useRightSidebar } from "~/composables/useRightSidebar";
 import socket, { type ChatType, type LobbyMessage } from "~/web-sockets/Socket";
 import {
@@ -16,32 +16,63 @@ const props = defineProps<{
   // the room the panel was opened for.
   room: { type: ChatType; id: string };
   permissions: ChatMessagePermissions;
+  own?: boolean;
+}>();
+
+const emit = defineEmits<{
+  open: [];
+  edit: [];
 }>();
 
 const menuOpen = ref(false);
 const confirmDelete = ref(false);
+const editRequested = ref(false);
+
+// Before the menu renders, so the row re-checks the ten minute window against
+// the clock now rather than when the line first rendered.
+function setMenuOpen(open: boolean) {
+  if (open) {
+    editRequested.value = false;
+    emit("open");
+  }
+
+  menuOpen.value = open;
+}
+
+function startEdit() {
+  editRequested.value = true;
+  emit("edit");
+}
+
+// The editor takes focus as it mounts; handing it back to the trigger would
+// pull it straight out again.
+function onCloseAutoFocus(event: Event) {
+  if (editRequested.value) {
+    event.preventDefault();
+  }
+}
 
 // The menu and the confirm after it sit over the right hub, which closes itself
-// when the pointer leaves. Both count as still interacting with it.
-function holdRightHub(open: boolean, wasOpen: boolean) {
-  const rightSidebar = useRightSidebar();
-
-  if (open && !wasOpen) {
-    rightSidebar.suspendHoverClose();
-  } else if (!open && wasOpen) {
-    rightSidebar.resumeHoverClose();
+// when the pointer leaves. Both count as still interacting with it. The row can
+// unmount this before a watcher sees the menu open, so only locks actually
+// taken are released.
+const hubHolds = new Set<"menu" | "confirm">();
+
+function holdRightHub(hold: "menu" | "confirm", open: boolean) {
+  if (open && !hubHolds.has(hold)) {
+    hubHolds.add(hold);
+    useRightSidebar().suspendHoverClose();
+  } else if (!open && hubHolds.delete(hold)) {
+    useRightSidebar().resumeHoverClose();
   }
 }
 
-watch(menuOpen, holdRightHub);
-watch(confirmDelete, holdRightHub);
+watch(menuOpen, (open) => holdRightHub("menu", open));
+watch(confirmDelete, (open) => holdRightHub("confirm", open));
 
 onBeforeUnmount(() => {
-  for (const open of [menuOpen.value, confirmDelete.value]) {
-    if (open) {
-      useRightSidebar().resumeHoverClose();
-    }
-  }
+  holdRightHub("menu", false);
+  holdRightHub("confirm", false);
 });
 
 async function deleteMessage() {
@@ -59,7 +90,10 @@ async function deleteMessage() {
   } catch (error) {
     toastChatError(error as ChatError);
 
-    if (!chatErrorFailed(error as ChatError)) {
+    if (
+      !chatErrorFailed(error as ChatError) ||
+      (error as ChatError)?.code === "window_closed"
+    ) {
       confirmDelete.value = false;
     }
   }
@@ -70,7 +104,7 @@ async function deleteMessage() {
   <div
     class="opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover/chat-message:opacity-100 has-[[data-state=open]]:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100"
   >
-    <DropdownMenu v-model:open="menuOpen" :modal="false">
+    <DropdownMenu :open="menuOpen" :modal="false" @update:open="setMenuOpen">
       <DropdownMenuTrigger as-child>
         <Button
           variant="ghost"
@@ -81,7 +115,19 @@ async function deleteMessage() {
           <MoreVertical />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" class="w-48" data-right-hub-interactive>
+      <DropdownMenuContent
+        align="end"
+        class="w-48"
+        data-right-hub-interactive
+        @close-auto-focus="onCloseAutoFocus"
+      >
+        <DropdownMenuItem v-if="permissions.canEdit" @select="startEdit">
+          <Pencil />
+          <span>{{ $t("chat.edit_message") }}</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator
+          v-if="permissions.canEdit && permissions.canDelete"
+        />
         <DropdownMenuItem
           v-if="permissions.canDelete"
           class="text-destructive focus:text-destructive"
@@ -99,7 +145,10 @@ async function deleteMessage() {
           <AlertDialogTitle>
             {{ $t("chat.delete_confirm_title") }}
           </AlertDialogTitle>
-          <AlertDialogDescription>
+          <AlertDialogDescription v-if="own">
+            {{ $t("chat.delete_own_confirm_description") }}
+          </AlertDialogDescription>
+          <AlertDialogDescription v-else>
             {{
               $t("chat.delete_confirm_description", {
                 name: message.from?.name || $t("common.unknown"),
diff --git a/components/chat/ChatMessageEditor.vue b/components/chat/ChatMessageEditor.vue
new file mode 100644
index 00000000..62d0b9d1
--- /dev/null
+++ b/components/chat/ChatMessageEditor.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import socket, { type ChatType, type LobbyMessage } from "~/web-sockets/Socket";
+import { chatEnterAction } from "~/utilities/chatInputKeys";
+import { toastChatError, type ChatError } from "~/utilities/chatErrors";
+import {
+  CHAT_MESSAGE_MAX_LENGTH,
+  CHAT_REMAINING_HINT_AT,
+} from "~/constants/chat";
+
+const props = defineProps<{
+  message: LobbyMessage;
+  room: { type: ChatType; id: string };
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const draft = ref(props.message.message ?? "");
+const saving = ref(false);
+const formRef = ref<HTMLFormElement | null>(null);
+const inputRef = ref<{ $el?: HTMLTextAreaElement } | null>(null);
+
+const text = computed(() => draft.value.trim());
+const remainingCharacters = computed(
+  () => CHAT_MESSAGE_MAX_LENGTH - text.value.length,
+);
+const showRemaining = computed(
+  () => remainingCharacters.value <= CHAT_REMAINING_HINT_AT,
+);
+
+function field() {
+  return inputRef.value?.$el ?? null;
+}
+
+function growToFit() {
+  const element = field();
+
+  if (!element) {
+    return;
+  }
+
+  element.style.height = "auto";
+  element.style.height = `${Math.min(element.scrollHeight, 160)}px`;
+}
+
+watch(draft, () => {
+  void nextTick(growToFit);
+});
+
+onMounted(() => {
+  void nextTick(() => {
+    const element = field();
+
+    if (!element) {
+      return;
+    }
+
+    growToFit();
+    element.focus({ preventScroll: true });
+    element.setSelectionRange(element.value.length, element.value.length);
+    formRef.value?.scrollIntoView?.({ block: "nearest" });
+  });
+});
+
+function onEnter(event: KeyboardEvent) {
+  if (chatEnterAction(event) === "newline") {
+    return;
+  }
+
+  event.preventDefault();
+  void save();
+}
+
+function onEscape(event: KeyboardEvent) {
+  if (event.isComposing) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  emit("close");
+}
+
+async function save() {
+  if (saving.value || !text.value || !props.message.id) {
+    return;
+  }
+
+  if (text.value.length > CHAT_MESSAGE_MAX_LENGTH) {
+    toastChatError({
+      code: "too_long",
+      action: "edit",
+      max: CHAT_MESSAGE_MAX_LENGTH,
+    });
+    return;
+  }
+
+  if (text.value === props.message.message) {
+    emit("close");
+    return;
+  }
+
+  saving.value = true;
+
+  try {
+    await socket.editMessage(
+      props.room.type,
+      props.room.id,
+      props.message.id,
+      text.value,
+    );
+    emit("close");
+  } catch (error) {
+    const code = (error as ChatError)?.code;
+
+    toastChatError(error as ChatError);
+
+    if (code === "window_closed" || code === "not_found") {
+      emit("close");
+    }
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <form ref="formRef" class="mt-0.5" @submit.prevent="save">
+    <div
+      class="rounded-md border border-border/60 bg-background transition-[border-color,box-shadow] duration-150 focus-within:ring-1 focus-within:ring-ring motion-reduce:transition-none"
+    >
+      <Textarea
+        ref="inputRef"
+        v-model="draft"
+        rows="1"
+        :aria-label="$t('chat.edit_message')"
+        data-1p-ignore="true"
+        data-lpignore="true"
+        data-bwignore="true"
+        data-form-type="other"
+        class="min-h-0 resize-none border-0 px-2 py-1 text-[11px] leading-snug shadow-none focus-visible:ring-0"
+        @keydown.enter="onEnter"
+        @keydown.esc="onEscape"
+      />
+    </div>
+    <div class="mt-1 flex items-center gap-1.5">
+      <span
+        class="min-w-0 flex-1 truncate text-[9px] text-muted-foreground/70 [@media(hover:none)]:invisible"
+      >
+        {{ $t("chat.edit_hint") }}
+      </span>
+      <span
+        v-if="showRemaining"
+        class="shrink-0 font-mono text-[0.6rem] tabular-nums leading-none"
+        :class="
+          remainingCharacters < 0
+            ? 'text-destructive'
+            : 'text-muted-foreground/70'
+        "
+      >
+        {{ remainingCharacters }}
+      </span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="xs"
+        class="h-6 px-2 text-[10px]"
+        @click="emit('close')"
+      >
+        {{ $t("common.cancel") }}
+      </Button>
+      <Button
+        type="submit"
+        size="xs"
+        class="h-6 px-2 text-[10px]"
+        :loading="saving"
+        :min-loading-ms="0"
+        :disabled="!text"
+      >
+        {{ $t("common.save") }}
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/components/chat/ChatMessages.vue b/components/chat/ChatMessages.vue
index a6d60ba8..ee0e8b8b 100644
--- a/components/chat/ChatMessages.vue
+++ b/components/chat/ChatMessages.vue
@@ -54,6 +54,9 @@
             :next-message="messages[index + 1]"
             :room="messageRoom ? messageRoom(message) : null"
             :can-moderate="canModerate"
+            :editing="!!message.id && message.id === editingId"
+            @edit="editingId = message.id"
+            @edit-end="stopEditing(message.id)"
           />
         </div>
       </TransitionGroup>
@@ -113,12 +116,18 @@ export default {
   data() {
     return {
       isAtBottom: false,
+      editingId: null as string | null,
     };
   },
   methods: {
     messageKey(message: any) {
       return chatMessageKey(message);
     },
+    stopEditing(messageId?: string) {
+      if (this.editingId === messageId) {
+        this.editingId = null;
+      }
+    },
     checkIfAtBottom() {
       const chatMessages = this.$refs.chatMessages as HTMLElement;
       if (chatMessages) {
@@ -166,6 +175,13 @@ export default {
   watch: {
     messages: {
       handler(current, prev) {
+        if (
+          this.editingId &&
+          !current.some((message: any) => message?.id === this.editingId)
+        ) {
+          this.editingId = null;
+        }
+
         this.$nextTick(() => {
           this.scrollToBottom(prev.length === 0);
           this.checkIfAtBottom();
diff --git a/composables/useChatTabSetup.ts b/composables/useChatTabSetup.ts
index 7de185cb..1750bda8 100644
--- a/composables/useChatTabSetup.ts
+++ b/composables/useChatTabSetup.ts
@@ -5,6 +5,7 @@ import { useChatReadState } from "~/composables/useChatReadState";
 import { useMatchLobbyStore } from "~/stores/MatchLobbyStore";
 import { useAuthStore } from "~/stores/AuthStore";
 import { e_player_roles_enum } from "~/generated/zeus";
+import { newestMessageIdsFrom } from "~/utilities/chatLobbyMessages";
 import socket, {
   type Lobby,
   type LobbyMessageDeleted,
@@ -36,6 +37,7 @@ export function useChatTabSetup() {
   const { t } = useI18n();
   const {
     tabs,
+    unreadCounts,
     openTab,
     closeTab,
     setPinned,
@@ -83,11 +85,19 @@ export function useChatTabSetup() {
     // and agree with the other devices -- the live handler above only ever
     // knew about this session.
     //
-    // Conversations are left alone: their count comes from
+    // A conversation keeps its count: it comes from
     // /chat/direct/conversations, which counts the whole thread rather than
-    // the last 200 messages of it.
+    // the last 200 messages of it. Only the ids behind it are filled in, so a
+    // deleted message can come off the badge.
     lobby.on("lobby:messages", (messages: any[]) => {
       if (tab.type === "direct") {
+        const count = unreadCounts.value[tab.id] ?? 0;
+
+        setUnread(
+          tab.id,
+          count,
+          newestMessageIdsFrom(messages ?? [], count, authStore.me?.steam_id),
+        );
         return;
       }
 
diff --git a/composables/useIncomingDirectMessages.ts b/composables/useIncomingDirectMessages.ts
index 5da37406..75cfc270 100644
--- a/composables/useIncomingDirectMessages.ts
+++ b/composables/useIncomingDirectMessages.ts
@@ -1,5 +1,6 @@
 import { watch } from "vue";
 import socket, { type LobbyMessage } from "~/web-sockets/Socket";
+import { newestMessageIdsFrom } from "~/utilities/chatLobbyMessages";
 import {
   directTabId,
   peerSteamId,
@@ -42,11 +43,18 @@ export function useIncomingDirectMessages() {
     });
 
     if (unread > 0) {
-      setUnread(directTabId(roomId), unread);
+      setUnread(
+        directTabId(roomId),
+        unread,
+        newestMessageIdsFrom(
+          socket.lobbyMessages("direct", roomId),
+          unread,
+          authStore.me?.steam_id,
+        ),
+      );
     }
   }
 
-
   // The server owns both what is unread and what is on the rail, so this is
   // the whole of it. Both used to be split -- unread from here, the open set
   // from localStorage -- which is why two devices showed different bars.
diff --git a/constants/chat.ts b/constants/chat.ts
index cb13c34e..3146c2d2 100644
--- a/constants/chat.ts
+++ b/constants/chat.ts
@@ -1,3 +1,5 @@
 // Must match the api's ChatService.MAX_MESSAGE_LENGTH. Both sides count
 // .length (UTF-16 code units) of the trimmed text.
 export const CHAT_MESSAGE_MAX_LENGTH = 2000;
+
+export const CHAT_REMAINING_HINT_AT = 200;
diff --git a/i18n/locales/ar_SA.json b/i18n/locales/ar_SA.json
index 99bd7357..8bd73300 100644
--- a/i18n/locales/ar_SA.json
+++ b/i18n/locales/ar_SA.json
@@ -8482,9 +8482,18 @@
     "delete_message": "حذف الرسالة",
     "delete_confirm_title": "حذف الرسالة؟",
     "delete_confirm_description": "ستُزال رسالة {name} لدى جميع من في هذه الدردشة.",
+    "delete_own_confirm_description": "ستُزال رسالتك لدى جميع من في هذه الدردشة.",
     "delete_failed": "تعذّر حذف الرسالة",
     "delete_timeout": "لم يستجب الخادم. قد تتم إزالة الرسالة لاحقًا.",
     "message_already_gone": "تمت إزالة الرسالة بالفعل",
+    "own_message_window_closed": "يمكنك تعديل رسائلك أو حذفها خلال 10 دقائق فقط.",
+    "edit_message": "تعديل الرسالة",
+    "edit_hint": "Enter للحفظ · Esc للإلغاء",
+    "edited": "(مُعدّلة)",
+    "edited_at": "عُدّلت {time}",
+    "edit_failed": "تعذّر تعديل الرسالة",
+    "edit_timeout": "لم يستجب الخادم. قد يُحفظ تعديلك لاحقًا.",
+    "edit_window_closed": "يمكنك تعديل الرسالة خلال 10 دقائق فقط.",
     "direct": {
       "message": "رسالة",
       "empty": "لا رسائل بعد. ألقِ التحية."
diff --git a/i18n/locales/da_DK.json b/i18n/locales/da_DK.json
index 7d8ee006..bf273d94 100644
--- a/i18n/locales/da_DK.json
+++ b/i18n/locales/da_DK.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Slet besked",
     "delete_confirm_title": "Slet besked?",
     "delete_confirm_description": "Beskeden fra {name} bliver fjernet for alle i denne chat.",
+    "delete_own_confirm_description": "Din besked bliver fjernet for alle i denne chat.",
     "delete_failed": "Beskeden kunne ikke slettes",
     "delete_timeout": "Serveren svarede ikke. Beskeden kan stadig blive fjernet.",
     "message_already_gone": "Beskeden er allerede fjernet",
+    "own_message_window_closed": "Du kan kun redigere eller slette dine beskeder i 10 minutter.",
+    "edit_message": "Rediger besked",
+    "edit_hint": "Enter for at gemme · Esc for at annullere",
+    "edited": "(redigeret)",
+    "edited_at": "Redigeret {time}",
+    "edit_failed": "Beskeden kunne ikke redigeres",
+    "edit_timeout": "Serveren svarede ikke. Din ændring kan stadig blive gemt.",
+    "edit_window_closed": "Du kan kun redigere en besked i 10 minutter.",
     "direct": {
       "message": "Besked",
       "empty": "Ingen beskeder endnu. Sig hej."
diff --git a/i18n/locales/de_DE.json b/i18n/locales/de_DE.json
index 2324853e..d718f1f5 100644
--- a/i18n/locales/de_DE.json
+++ b/i18n/locales/de_DE.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Nachricht löschen",
     "delete_confirm_title": "Nachricht löschen?",
     "delete_confirm_description": "Die Nachricht von {name} wird für alle in diesem Chat entfernt.",
+    "delete_own_confirm_description": "Deine Nachricht wird für alle in diesem Chat entfernt.",
     "delete_failed": "Nachricht konnte nicht gelöscht werden",
     "delete_timeout": "Der Server hat nicht geantwortet. Die Nachricht wird eventuell trotzdem entfernt.",
     "message_already_gone": "Nachricht wurde bereits entfernt",
+    "own_message_window_closed": "Du kannst deine Nachrichten nur 10 Minuten lang bearbeiten oder löschen.",
+    "edit_message": "Nachricht bearbeiten",
+    "edit_hint": "Enter zum Speichern · Esc zum Abbrechen",
+    "edited": "(bearbeitet)",
+    "edited_at": "Bearbeitet am {time}",
+    "edit_failed": "Nachricht konnte nicht bearbeitet werden",
+    "edit_timeout": "Der Server hat nicht geantwortet. Deine Änderung wird eventuell trotzdem gespeichert.",
+    "edit_window_closed": "Du kannst eine Nachricht nur 10 Minuten lang bearbeiten.",
     "direct": {
       "message": "Nachricht",
       "empty": "Noch keine Nachrichten. Sag Hallo."
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fc3a35bb..c2a895d7 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Delete Message",
     "delete_confirm_title": "Delete Message?",
     "delete_confirm_description": "The message from {name} will be removed for everyone in this chat.",
+    "delete_own_confirm_description": "Your message will be removed for everyone in this chat.",
     "delete_failed": "Failed to delete message",
     "delete_timeout": "The server didn't answer. The message may still be removed.",
     "message_already_gone": "Message already removed",
+    "own_message_window_closed": "You can only edit or delete your messages for 10 minutes.",
+    "edit_message": "Edit Message",
+    "edit_hint": "Enter to save · Esc to cancel",
+    "edited": "(edited)",
+    "edited_at": "Edited {time}",
+    "edit_failed": "Failed to edit message",
+    "edit_timeout": "The server didn't answer. Your edit may still be saved.",
+    "edit_window_closed": "You can only edit a message for 10 minutes.",
     "direct": {
       "message": "Message",
       "empty": "No messages yet. Say hello."
diff --git a/i18n/locales/es_ES.json b/i18n/locales/es_ES.json
index 5115a0bf..e9a701bd 100644
--- a/i18n/locales/es_ES.json
+++ b/i18n/locales/es_ES.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Eliminar mensaje",
     "delete_confirm_title": "¿Eliminar mensaje?",
     "delete_confirm_description": "El mensaje de {name} se eliminará para todos en este chat.",
+    "delete_own_confirm_description": "Tu mensaje se eliminará para todos en este chat.",
     "delete_failed": "No se ha podido eliminar el mensaje",
     "delete_timeout": "El servidor no ha respondido. Puede que el mensaje se elimine de todos modos.",
     "message_already_gone": "El mensaje ya se había eliminado",
+    "own_message_window_closed": "Solo puedes editar o eliminar tus mensajes durante 10 minutos.",
+    "edit_message": "Editar mensaje",
+    "edit_hint": "Intro para guardar · Esc para cancelar",
+    "edited": "(editado)",
+    "edited_at": "Editado el {time}",
+    "edit_failed": "No se ha podido editar el mensaje",
+    "edit_timeout": "El servidor no ha respondido. Puede que tu edición se guarde de todos modos.",
+    "edit_window_closed": "Solo puedes editar un mensaje durante 10 minutos.",
     "direct": {
       "message": "Mensaje",
       "empty": "Aún no hay mensajes. Saluda."
diff --git a/i18n/locales/fr_FR.json b/i18n/locales/fr_FR.json
index 1599ef73..302b27d5 100644
--- a/i18n/locales/fr_FR.json
+++ b/i18n/locales/fr_FR.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Supprimer le message",
     "delete_confirm_title": "Supprimer le message ?",
     "delete_confirm_description": "Le message de {name} sera supprimé pour tous les participants de ce chat.",
+    "delete_own_confirm_description": "Votre message sera supprimé pour tous les participants de ce chat.",
     "delete_failed": "Impossible de supprimer le message",
     "delete_timeout": "Le serveur n'a pas répondu. Le message peut tout de même être supprimé.",
     "message_already_gone": "Message déjà supprimé",
+    "own_message_window_closed": "Vous ne pouvez modifier ou supprimer vos messages que pendant 10 minutes.",
+    "edit_message": "Modifier le message",
+    "edit_hint": "Entrée pour enregistrer · Échap pour annuler",
+    "edited": "(modifié)",
+    "edited_at": "Modifié le {time}",
+    "edit_failed": "Impossible de modifier le message",
+    "edit_timeout": "Le serveur n'a pas répondu. Votre modification peut tout de même être enregistrée.",
+    "edit_window_closed": "Vous ne pouvez modifier un message que pendant 10 minutes.",
     "direct": {
       "message": "Message",
       "empty": "Aucun message pour l'instant. Dites bonjour."
diff --git a/i18n/locales/it_IT.json b/i18n/locales/it_IT.json
index 375c854c..3ed5c62f 100644
--- a/i18n/locales/it_IT.json
+++ b/i18n/locales/it_IT.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Elimina messaggio",
     "delete_confirm_title": "Eliminare il messaggio?",
     "delete_confirm_description": "Il messaggio di {name} verrà rimosso per tutti i partecipanti a questa chat.",
+    "delete_own_confirm_description": "Il tuo messaggio verrà rimosso per tutti i partecipanti a questa chat.",
     "delete_failed": "Impossibile eliminare il messaggio",
     "delete_timeout": "Il server non ha risposto. Il messaggio potrebbe comunque essere rimosso.",
     "message_already_gone": "Messaggio già rimosso",
+    "own_message_window_closed": "Puoi modificare o eliminare i tuoi messaggi solo per 10 minuti.",
+    "edit_message": "Modifica messaggio",
+    "edit_hint": "Invio per salvare · Esc per annullare",
+    "edited": "(modificato)",
+    "edited_at": "Modificato il {time}",
+    "edit_failed": "Impossibile modificare il messaggio",
+    "edit_timeout": "Il server non ha risposto. La modifica potrebbe comunque essere salvata.",
+    "edit_window_closed": "Puoi modificare un messaggio solo per 10 minuti.",
     "direct": {
       "message": "Messaggio",
       "empty": "Ancora nessun messaggio. Fatti sentire."
diff --git a/i18n/locales/ja_JP.json b/i18n/locales/ja_JP.json
index fb9c86c5..f635d05a 100644
--- a/i18n/locales/ja_JP.json
+++ b/i18n/locales/ja_JP.json
@@ -8482,9 +8482,18 @@
     "delete_message": "メッセージを削除",
     "delete_confirm_title": "メッセージを削除しますか？",
     "delete_confirm_description": "{name} のメッセージは、このチャットの全員に対して削除されます。",
+    "delete_own_confirm_description": "あなたのメッセージは、このチャットの全員に対して削除されます。",
     "delete_failed": "メッセージを削除できませんでした",
     "delete_timeout": "サーバーから応答がありませんでした。メッセージは後で削除される可能性があります。",
     "message_already_gone": "メッセージはすでに削除されています",
+    "own_message_window_closed": "自分のメッセージを編集・削除できるのは送信後10分間だけです。",
+    "edit_message": "メッセージを編集",
+    "edit_hint": "Enter で保存 · Esc でキャンセル",
+    "edited": "（編集済み）",
+    "edited_at": "{time} に編集",
+    "edit_failed": "メッセージを編集できませんでした",
+    "edit_timeout": "サーバーから応答がありませんでした。編集は後で保存される可能性があります。",
+    "edit_window_closed": "メッセージを編集できるのは送信後10分間だけです。",
     "direct": {
       "message": "メッセージ",
       "empty": "まだメッセージはありません。あいさつしてみましょう。"
diff --git a/i18n/locales/ko_KR.json b/i18n/locales/ko_KR.json
index 07f5754f..0aea4c9d 100644
--- a/i18n/locales/ko_KR.json
+++ b/i18n/locales/ko_KR.json
@@ -8482,9 +8482,18 @@
     "delete_message": "메시지 삭제",
     "delete_confirm_title": "메시지를 삭제할까요?",
     "delete_confirm_description": "{name}님의 메시지가 이 채팅의 모든 사람에게서 삭제됩니다.",
+    "delete_own_confirm_description": "내 메시지가 이 채팅의 모든 사람에게서 삭제됩니다.",
     "delete_failed": "메시지를 삭제하지 못했습니다",
     "delete_timeout": "서버가 응답하지 않았습니다. 메시지가 나중에 삭제될 수도 있습니다.",
     "message_already_gone": "이미 삭제된 메시지입니다",
+    "own_message_window_closed": "내 메시지는 보낸 후 10분 동안만 편집하거나 삭제할 수 있습니다.",
+    "edit_message": "메시지 편집",
+    "edit_hint": "Enter로 저장 · Esc로 취소",
+    "edited": "(편집됨)",
+    "edited_at": "{time}에 편집됨",
+    "edit_failed": "메시지를 편집하지 못했습니다",
+    "edit_timeout": "서버가 응답하지 않았습니다. 편집 내용이 나중에 저장될 수도 있습니다.",
+    "edit_window_closed": "메시지는 보낸 후 10분 동안만 편집할 수 있습니다.",
     "direct": {
       "message": "메시지",
       "empty": "아직 메시지가 없습니다. 인사를 건네보세요."
diff --git a/i18n/locales/pl_PL.json b/i18n/locales/pl_PL.json
index 9ff7eadc..ce9c1efa 100644
--- a/i18n/locales/pl_PL.json
+++ b/i18n/locales/pl_PL.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Usuń wiadomość",
     "delete_confirm_title": "Usunąć wiadomość?",
     "delete_confirm_description": "Wiadomość od {name} zostanie usunięta dla wszystkich na tym czacie.",
+    "delete_own_confirm_description": "Twoja wiadomość zostanie usunięta dla wszystkich na tym czacie.",
     "delete_failed": "Nie udało się usunąć wiadomości",
     "delete_timeout": "Serwer nie odpowiedział. Wiadomość może mimo to zostać usunięta.",
     "message_already_gone": "Wiadomość została już usunięta",
+    "own_message_window_closed": "Swoje wiadomości możesz edytować lub usuwać tylko przez 10 minut.",
+    "edit_message": "Edytuj wiadomość",
+    "edit_hint": "Enter, aby zapisać · Esc, aby anulować",
+    "edited": "(edytowano)",
+    "edited_at": "Edytowano {time}",
+    "edit_failed": "Nie udało się edytować wiadomości",
+    "edit_timeout": "Serwer nie odpowiedział. Twoja zmiana może mimo to zostać zapisana.",
+    "edit_window_closed": "Wiadomość możesz edytować tylko przez 10 minut.",
     "direct": {
       "message": "Wiadomość",
       "empty": "Brak wiadomości. Przywitaj się."
diff --git a/i18n/locales/pt_BR.json b/i18n/locales/pt_BR.json
index 41259446..45bcb6a8 100644
--- a/i18n/locales/pt_BR.json
+++ b/i18n/locales/pt_BR.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Excluir Mensagem",
     "delete_confirm_title": "Excluir Mensagem?",
     "delete_confirm_description": "A mensagem de {name} será removida para todos neste chat.",
+    "delete_own_confirm_description": "Sua mensagem será removida para todos neste chat.",
     "delete_failed": "Não foi possível excluir a mensagem",
     "delete_timeout": "O servidor não respondeu. A mensagem ainda pode ser removida.",
     "message_already_gone": "Mensagem já removida",
+    "own_message_window_closed": "Você só pode editar ou excluir suas mensagens por 10 minutos.",
+    "edit_message": "Editar Mensagem",
+    "edit_hint": "Enter para salvar · Esc para cancelar",
+    "edited": "(editada)",
+    "edited_at": "Editada em {time}",
+    "edit_failed": "Não foi possível editar a mensagem",
+    "edit_timeout": "O servidor não respondeu. Sua edição ainda pode ser salva.",
+    "edit_window_closed": "Você só pode editar uma mensagem por 10 minutos.",
     "direct": {
       "message": "Mensagem",
       "empty": "Nenhuma mensagem ainda. Diga Olá."
diff --git a/i18n/locales/ru_RU.json b/i18n/locales/ru_RU.json
index b60e91fd..59b5f39a 100644
--- a/i18n/locales/ru_RU.json
+++ b/i18n/locales/ru_RU.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Удалить сообщение",
     "delete_confirm_title": "Удалить сообщение?",
     "delete_confirm_description": "Сообщение от {name} будет удалено у всех участников этого чата.",
+    "delete_own_confirm_description": "Ваше сообщение будет удалено у всех участников этого чата.",
     "delete_failed": "Не удалось удалить сообщение",
     "delete_timeout": "Сервер не ответил. Сообщение всё ещё может быть удалено.",
     "message_already_gone": "Сообщение уже удалено",
+    "own_message_window_closed": "Редактировать и удалять свои сообщения можно только в течение 10 минут.",
+    "edit_message": "Изменить сообщение",
+    "edit_hint": "Enter — сохранить · Esc — отменить",
+    "edited": "(изменено)",
+    "edited_at": "Изменено {time}",
+    "edit_failed": "Не удалось изменить сообщение",
+    "edit_timeout": "Сервер не ответил. Изменение всё ещё может быть сохранено.",
+    "edit_window_closed": "Изменить сообщение можно только в течение 10 минут.",
     "direct": {
       "message": "Сообщение",
       "empty": "Сообщений пока нет. Поздоровайтесь."
diff --git a/i18n/locales/sv_SE.json b/i18n/locales/sv_SE.json
index 091508f1..c9e41be5 100644
--- a/i18n/locales/sv_SE.json
+++ b/i18n/locales/sv_SE.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Ta bort meddelande",
     "delete_confirm_title": "Ta bort meddelande?",
     "delete_confirm_description": "Meddelandet från {name} tas bort för alla i den här chatten.",
+    "delete_own_confirm_description": "Ditt meddelande tas bort för alla i den här chatten.",
     "delete_failed": "Meddelandet kunde inte tas bort",
     "delete_timeout": "Servern svarade inte. Meddelandet kan fortfarande tas bort.",
     "message_already_gone": "Meddelandet har redan tagits bort",
+    "own_message_window_closed": "Du kan bara redigera eller ta bort dina meddelanden i 10 minuter.",
+    "edit_message": "Redigera meddelande",
+    "edit_hint": "Enter för att spara · Esc för att avbryta",
+    "edited": "(redigerat)",
+    "edited_at": "Redigerat {time}",
+    "edit_failed": "Meddelandet kunde inte redigeras",
+    "edit_timeout": "Servern svarade inte. Din ändring kan fortfarande sparas.",
+    "edit_window_closed": "Du kan bara redigera ett meddelande i 10 minuter.",
     "direct": {
       "message": "Meddelande",
       "empty": "Inga meddelanden än. Säg hej."
diff --git a/i18n/locales/tr_TR.json b/i18n/locales/tr_TR.json
index 648dacac..22170f0e 100644
--- a/i18n/locales/tr_TR.json
+++ b/i18n/locales/tr_TR.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Mesajı sil",
     "delete_confirm_title": "Mesaj silinsin mi?",
     "delete_confirm_description": "{name} adlı oyuncunun mesajı bu sohbetteki herkes için kaldırılacak.",
+    "delete_own_confirm_description": "Mesajın bu sohbetteki herkes için kaldırılacak.",
     "delete_failed": "Mesaj silinemedi",
     "delete_timeout": "Sunucu yanıt vermedi. Mesaj yine de kaldırılabilir.",
     "message_already_gone": "Mesaj zaten kaldırılmış",
+    "own_message_window_closed": "Mesajlarını yalnızca 10 dakika boyunca düzenleyebilir veya silebilirsin.",
+    "edit_message": "Mesajı düzenle",
+    "edit_hint": "Kaydetmek için Enter · Vazgeçmek için Esc",
+    "edited": "(düzenlendi)",
+    "edited_at": "Düzenlenme: {time}",
+    "edit_failed": "Mesaj düzenlenemedi",
+    "edit_timeout": "Sunucu yanıt vermedi. Düzenlemen yine de kaydedilebilir.",
+    "edit_window_closed": "Bir mesajı yalnızca 10 dakika boyunca düzenleyebilirsin.",
     "direct": {
       "message": "Mesaj",
       "empty": "Henüz mesaj yok. Merhaba de."
diff --git a/i18n/locales/uk_UA.json b/i18n/locales/uk_UA.json
index 9e66a293..6db6d157 100644
--- a/i18n/locales/uk_UA.json
+++ b/i18n/locales/uk_UA.json
@@ -8482,9 +8482,18 @@
     "delete_message": "Видалити повідомлення",
     "delete_confirm_title": "Видалити повідомлення?",
     "delete_confirm_description": "Повідомлення від {name} буде видалено для всіх учасників цього чату.",
+    "delete_own_confirm_description": "Ваше повідомлення буде видалено для всіх учасників цього чату.",
     "delete_failed": "Не вдалося видалити повідомлення",
     "delete_timeout": "Сервер не відповів. Повідомлення ще може бути видалено.",
     "message_already_gone": "Повідомлення вже видалено",
+    "own_message_window_closed": "Редагувати й видаляти свої повідомлення можна лише протягом 10 хвилин.",
+    "edit_message": "Редагувати повідомлення",
+    "edit_hint": "Enter — зберегти · Esc — скасувати",
+    "edited": "(змінено)",
+    "edited_at": "Змінено {time}",
+    "edit_failed": "Не вдалося змінити повідомлення",
+    "edit_timeout": "Сервер не відповів. Зміну ще може бути збережено.",
+    "edit_window_closed": "Редагувати повідомлення можна лише протягом 10 хвилин.",
     "direct": {
       "message": "Повідомлення",
       "empty": "Повідомлень поки немає. Привітайтеся."
diff --git a/i18n/locales/zh_Hans.json b/i18n/locales/zh_Hans.json
index b056794e..fde32490 100644
--- a/i18n/locales/zh_Hans.json
+++ b/i18n/locales/zh_Hans.json
@@ -8482,9 +8482,18 @@
     "delete_message": "删除消息",
     "delete_confirm_title": "要删除消息吗？",
     "delete_confirm_description": "{name} 的这条消息将对本聊天中的所有人移除。",
+    "delete_own_confirm_description": "你的这条消息将对本聊天中的所有人移除。",
     "delete_failed": "消息删除失败",
     "delete_timeout": "服务器没有响应。该消息仍可能被移除。",
     "message_already_gone": "该消息已被移除",
+    "own_message_window_closed": "你只能在发送后 10 分钟内编辑或删除自己的消息。",
+    "edit_message": "编辑消息",
+    "edit_hint": "按 Enter 保存 · 按 Esc 取消",
+    "edited": "（已编辑）",
+    "edited_at": "编辑于 {time}",
+    "edit_failed": "消息编辑失败",
+    "edit_timeout": "服务器没有响应。你的修改仍可能被保存。",
+    "edit_window_closed": "你只能在发送后 10 分钟内编辑消息。",
     "direct": {
       "message": "消息",
       "empty": "还没有消息，先打个招呼吧。"
diff --git a/i18n/locales/zh_Hant.json b/i18n/locales/zh_Hant.json
index 793f9d89..dd9bb1aa 100644
--- a/i18n/locales/zh_Hant.json
+++ b/i18n/locales/zh_Hant.json
@@ -8482,9 +8482,18 @@
     "delete_message": "刪除訊息",
     "delete_confirm_title": "要刪除訊息嗎？",
     "delete_confirm_description": "{name} 的這則訊息將對此聊天中的所有人移除。",
+    "delete_own_confirm_description": "你的這則訊息將對此聊天中的所有人移除。",
     "delete_failed": "訊息刪除失敗",
     "delete_timeout": "伺服器沒有回應。該訊息仍可能被移除。",
     "message_already_gone": "該訊息已被移除",
+    "own_message_window_closed": "你只能在傳送後 10 分鐘內編輯或刪除自己的訊息。",
+    "edit_message": "編輯訊息",
+    "edit_hint": "按 Enter 儲存 · 按 Esc 取消",
+    "edited": "（已編輯）",
+    "edited_at": "編輯於 {time}",
+    "edit_failed": "訊息編輯失敗",
+    "edit_timeout": "伺服器沒有回應。你的修改仍可能被儲存。",
+    "edit_window_closed": "你只能在傳送後 10 分鐘內編輯訊息。",
     "direct": {
       "message": "訊息",
       "empty": "還沒有訊息，先打個招呼吧。"
diff --git a/tests/components/ChatMessage.spec.ts b/tests/components/ChatMessage.spec.ts
index bb348a65..7c19ca86 100644
--- a/tests/components/ChatMessage.spec.ts
+++ b/tests/components/ChatMessage.spec.ts
@@ -1,6 +1,17 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { flushPromises } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ChatMessage from "~/components/chat/ChatMessage.vue";
+import { useRightSidebar } from "~/composables/useRightSidebar";
+import { CHAT_MESSAGE_MAX_LENGTH } from "~/constants/chat";
+import socket from "~/web-sockets/Socket";
+
+const { toast } = vi.hoisted(() => ({ toast: vi.fn() }));
+
+vi.mock("@/components/ui/toast", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/components/ui/toast")>()),
+  toast,
+}));
 
 const line = (steamId: string, minute: number, message: string) => ({
   id: message,
@@ -52,3 +63,245 @@ describe("ChatMessage grouping", () => {
     expect(wrapper.get("h4").text()).toBe("Player 76561198000000001");
   });
 });
+
+describe("ChatMessage editing", () => {
+  const ME = "76561198000000001";
+  const ROOM = { type: "match", id: "match-1" };
+  const TRIGGER = 'button[aria-label="Message actions"]';
+
+  const own = (overrides: Record<string, unknown> = {}) => ({
+    id: "7f1d0c2e-8b1a-4c6e-9f00-000000000001",
+    message: "gg",
+    source: "web",
+    timestamp: new Date(Date.now() - 60_000).toISOString(),
+    from: { steam_id: ME, name: "Me" },
+    ...overrides,
+  });
+
+  let unmount: (() => void) | undefined;
+
+  beforeEach(() => {
+    useAuthStore().me = { steam_id: ME, role: "user" } as any;
+    while (useRightSidebar().hoverCloseSuspended.value) {
+      useRightSidebar().resumeHoverClose();
+    }
+  });
+
+  afterEach(() => {
+    unmount?.();
+    unmount = undefined;
+    useAuthStore().me = undefined;
+    vi.restoreAllMocks();
+    toast.mockClear();
+  });
+
+  async function mountMessage(props: Record<string, unknown> = {}) {
+    const wrapper = await mountSuspended(ChatMessage, {
+      props: { message: own(), room: ROOM, ...props },
+      attachTo: document.body,
+    });
+    unmount = () => wrapper.unmount();
+    await flushPromises();
+    return wrapper;
+  }
+
+  const textarea = (wrapper: Awaited<ReturnType<typeof mountMessage>>) =>
+    wrapper.get("textarea").element as HTMLTextAreaElement;
+
+  const press = async (
+    wrapper: Awaited<ReturnType<typeof mountMessage>>,
+    key: string,
+    options: Record<string, unknown> = {},
+  ) => {
+    await wrapper.get("textarea").trigger("keydown", { key, ...options });
+    await flushPromises();
+  };
+
+  it("offers the author an edit on their own recent message", async () => {
+    const wrapper = await mountMessage();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    const edit = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === "Edit Message");
+    edit!.click();
+    await flushPromises();
+
+    expect(wrapper.emitted("edit")).toHaveLength(1);
+  });
+
+  it("takes the trigger away and says why once the window has closed", async () => {
+    const wrapper = await mountMessage();
+    const sentAt = Date.parse(own().timestamp);
+    vi.spyOn(Date, "now").mockReturnValue(sentAt + 10 * 60_000);
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    expect(wrapper.find(TRIGGER).exists()).toBe(false);
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
+    expect(toast).toHaveBeenCalledWith({
+      title: "You can only edit or delete your messages for 10 minutes.",
+    });
+    expect(useRightSidebar().hoverCloseSuspended.value).toBe(false);
+  });
+
+  it("opens the editor on the current text, focused", async () => {
+    const wrapper = await mountMessage({ editing: true });
+
+    expect(textarea(wrapper).value).toBe("gg");
+    expect(document.activeElement).toBe(textarea(wrapper));
+    expect(textarea(wrapper).selectionStart).toBe(2);
+    expect(wrapper.text()).toContain("Enter to save · Esc to cancel");
+    expect(wrapper.find(TRIGGER).exists()).toBe(false);
+  });
+
+  it("saves the trimmed text on Enter and closes", async () => {
+    const editMessage = vi
+      .spyOn(socket, "editMessage")
+      .mockResolvedValue(undefined);
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue("  fixed  ");
+    await press(wrapper, "Enter");
+
+    expect(editMessage).toHaveBeenCalledWith(
+      "match",
+      "match-1",
+      own().id,
+      "fixed",
+    );
+    expect(wrapper.emitted("edit-end")).toHaveLength(1);
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("breaks the line on Shift+Enter instead of saving", async () => {
+    const editMessage = vi.spyOn(socket, "editMessage");
+    const wrapper = await mountMessage({ editing: true });
+
+    await press(wrapper, "Enter", { shiftKey: true });
+
+    expect(editMessage).not.toHaveBeenCalled();
+    expect(wrapper.emitted("edit-end")).toBeUndefined();
+  });
+
+  it("cancels on Esc without saving", async () => {
+    const editMessage = vi.spyOn(socket, "editMessage");
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue("fixed");
+    await press(wrapper, "Escape");
+
+    expect(editMessage).not.toHaveBeenCalled();
+    expect(wrapper.emitted("edit-end")).toHaveLength(1);
+  });
+
+  it("just closes when nothing changed", async () => {
+    const editMessage = vi.spyOn(socket, "editMessage");
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue(" gg ");
+    await press(wrapper, "Enter");
+
+    expect(editMessage).not.toHaveBeenCalled();
+    expect(wrapper.emitted("edit-end")).toHaveLength(1);
+  });
+
+  it("won't save an empty message", async () => {
+    const editMessage = vi.spyOn(socket, "editMessage");
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue("   ");
+    await press(wrapper, "Enter");
+
+    expect(editMessage).not.toHaveBeenCalled();
+    expect(wrapper.emitted("edit-end")).toBeUndefined();
+    expect(
+      wrapper.get('button[type="submit"]').attributes("disabled"),
+    ).toBeDefined();
+  });
+
+  it("counts down near the cap and refuses to go over it", async () => {
+    const editMessage = vi.spyOn(socket, "editMessage");
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper
+      .get("textarea")
+      .setValue("a".repeat(CHAT_MESSAGE_MAX_LENGTH - 150));
+    expect(wrapper.find(".tabular-nums").text()).toBe("150");
+
+    await wrapper
+      .get("textarea")
+      .setValue("a".repeat(CHAT_MESSAGE_MAX_LENGTH + 1));
+    expect(wrapper.find(".tabular-nums").text()).toBe("-1");
+    expect(wrapper.find(".tabular-nums").classes()).toContain(
+      "text-destructive",
+    );
+
+    await press(wrapper, "Enter");
+
+    expect(editMessage).not.toHaveBeenCalled();
+    expect(wrapper.emitted("edit-end")).toBeUndefined();
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to edit message",
+      description: "Messages can be up to 2000 characters.",
+      variant: "destructive",
+    });
+  });
+
+  it("stays open with the text when the edit fails", async () => {
+    vi.spyOn(socket, "editMessage").mockRejectedValue({
+      code: "timeout",
+      action: "edit",
+    });
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue("fixed");
+    await wrapper.get("form").trigger("submit");
+    await flushPromises();
+
+    expect(wrapper.emitted("edit-end")).toBeUndefined();
+    expect(textarea(wrapper).value).toBe("fixed");
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to edit message",
+      description: "The server didn't answer. Your edit may still be saved.",
+      variant: "destructive",
+    });
+  });
+
+  it("closes and explains when the window closed first", async () => {
+    vi.spyOn(socket, "editMessage").mockRejectedValue({
+      code: "window_closed",
+      action: "edit",
+    });
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue("fixed");
+    await press(wrapper, "Enter");
+
+    expect(wrapper.emitted("edit-end")).toHaveLength(1);
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to edit message",
+      description: "You can only edit a message for 10 minutes.",
+      variant: "destructive",
+    });
+  });
+
+  it("marks an edited message, with the time in a tooltip", async () => {
+    const wrapper = await mountMessage({
+      message: own({ edited_at: new Date().toISOString() }),
+    });
+
+    const marker = wrapper.get("[data-chat-edited]");
+    expect(marker.text()).toBe("(edited)");
+    expect(marker.attributes("data-state")).toBe("closed");
+  });
+
+  it("leaves an unedited message unmarked", async () => {
+    const wrapper = await mountMessage();
+
+    expect(wrapper.find("[data-chat-edited]").exists()).toBe(false);
+  });
+});
diff --git a/tests/components/ChatMessageActions.spec.ts b/tests/components/ChatMessageActions.spec.ts
index a757912f..c79c18e2 100644
--- a/tests/components/ChatMessageActions.spec.ts
+++ b/tests/components/ChatMessageActions.spec.ts
@@ -102,7 +102,7 @@ describe("ChatMessageActions", () => {
       props: {
         message: MESSAGE,
         room: { type: "match_team", id: "match-1:lineup-1" },
-        permissions: { canDelete: true },
+        permissions: { canDelete: true, canEdit: false },
       },
       attachTo: document.body,
     });
@@ -214,3 +214,118 @@ describe("ChatMessageActions", () => {
     expect(hubHeld()).toBe(false);
   });
 });
+
+describe("ChatMessageActions for the author", () => {
+  const menuItems = () =>
+    Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).map((item) => item.textContent?.trim());
+
+  const menuItem = (label: string) =>
+    Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === label);
+
+  const dialog = () =>
+    document.body.querySelector<HTMLElement>('[role="alertdialog"]');
+
+  const dialogButton = (label: string) =>
+    Array.from(dialog()?.querySelectorAll("button") ?? []).find(
+      (button) => button.textContent?.trim() === label,
+    );
+
+  beforeEach(() => {
+    while (useRightSidebar().hoverCloseSuspended.value) {
+      useRightSidebar().resumeHoverClose();
+    }
+  });
+
+  async function openMenu(
+    permissions = { canDelete: true, canEdit: true },
+    own = true,
+  ) {
+    const wrapper = await mountSuspended(ChatMessageActions, {
+      props: {
+        message: MESSAGE,
+        room: { type: "direct", id: "1:2" },
+        permissions,
+        own,
+      },
+      attachTo: document.body,
+    });
+    unmount = () => wrapper.unmount();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    return wrapper;
+  }
+
+  it("asks the row to re-check its window before the menu opens", async () => {
+    const wrapper = await openMenu();
+
+    expect(wrapper.emitted("open")).toHaveLength(1);
+  });
+
+  it("puts Edit first, and Delete after a separator", async () => {
+    await openMenu();
+
+    expect(menuItems()).toEqual(["Edit Message", "Delete Message"]);
+    expect(
+      document.body.querySelector('[role="menu"] [role="separator"]'),
+    ).not.toBeNull();
+  });
+
+  it("leaves the separator out when there is nothing to separate", async () => {
+    await openMenu({ canDelete: false, canEdit: true });
+
+    expect(menuItems()).toEqual(["Edit Message"]);
+    expect(
+      document.body.querySelector('[role="menu"] [role="separator"]'),
+    ).toBeNull();
+  });
+
+  it("hands the edit to the row and lets go of the hub", async () => {
+    const wrapper = await openMenu();
+
+    menuItem("Edit Message")!.click();
+    await flushPromises();
+
+    expect(wrapper.emitted("edit")).toHaveLength(1);
+    expect(document.body.querySelector('[role="menu"]')).toBeNull();
+    expect(useRightSidebar().hoverCloseSuspended.value).toBe(false);
+  });
+
+  it("asks about the author's own message in their own terms", async () => {
+    await openMenu();
+
+    menuItem("Delete Message")!.click();
+    await flushPromises();
+
+    expect(dialog()?.textContent).toContain("Delete Message?");
+    expect(dialog()?.textContent).toContain(
+      "Your message will be removed for everyone in this chat.",
+    );
+  });
+
+  it("closes the confirm once the window has closed", async () => {
+    vi.spyOn(socket, "deleteMessage").mockRejectedValue({
+      code: "window_closed",
+      action: "delete",
+    });
+
+    await openMenu();
+
+    menuItem("Delete Message")!.click();
+    await flushPromises();
+    dialogButton("Delete")!.click();
+    await flushPromises();
+
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to delete message",
+      description: "You can only edit or delete your messages for 10 minutes.",
+      variant: "destructive",
+    });
+    expect(dialog()).toBeNull();
+  });
+});
diff --git a/tests/components/ChatMessages.spec.ts b/tests/components/ChatMessages.spec.ts
new file mode 100644
index 00000000..56c91e99
--- /dev/null
+++ b/tests/components/ChatMessages.spec.ts
@@ -0,0 +1,87 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ChatMessage from "~/components/chat/ChatMessage.vue";
+import ChatMessages from "~/components/chat/ChatMessages.vue";
+
+const ME = "76561198000000001";
+const ROOM = { type: "match", id: "match-1" };
+
+const own = (id: string, secondsAgo: number) => ({
+  id,
+  message: `line ${id}`,
+  source: "web",
+  timestamp: new Date(Date.now() - secondsAgo * 1000).toISOString(),
+  from: { steam_id: ME, name: "Me" },
+});
+
+let unmount: (() => void) | undefined;
+
+beforeEach(() => {
+  useAuthStore().me = { steam_id: ME, role: "user" } as any;
+});
+
+afterEach(() => {
+  unmount?.();
+  unmount = undefined;
+  useAuthStore().me = undefined;
+});
+
+describe("ChatMessages editing", () => {
+  async function mountList(messages = [own("a", 30), own("b", 20)]) {
+    const wrapper = await mountSuspended(ChatMessages, {
+      props: { messages, messageRoom: () => ROOM },
+    });
+    unmount = () => wrapper.unmount();
+    return wrapper;
+  }
+
+  const rows = (wrapper: Awaited<ReturnType<typeof mountList>>) =>
+    wrapper.findAllComponents(ChatMessage);
+
+  it("keeps a single editor open across the list", async () => {
+    const wrapper = await mountList();
+
+    rows(wrapper)[0].vm.$emit("edit");
+    await flushPromises();
+
+    expect(wrapper.findAll("textarea")).toHaveLength(1);
+    expect(rows(wrapper)[0].props("editing")).toBe(true);
+
+    rows(wrapper)[1].vm.$emit("edit");
+    await flushPromises();
+
+    expect(wrapper.findAll("textarea")).toHaveLength(1);
+    expect(rows(wrapper)[0].props("editing")).toBe(false);
+    expect(rows(wrapper)[1].props("editing")).toBe(true);
+  });
+
+  it("ignores a close from a row that is no longer the one editing", async () => {
+    const wrapper = await mountList();
+
+    rows(wrapper)[1].vm.$emit("edit");
+    rows(wrapper)[0].vm.$emit("edit-end");
+    await flushPromises();
+
+    expect(rows(wrapper)[1].props("editing")).toBe(true);
+
+    rows(wrapper)[1].vm.$emit("edit-end");
+    await flushPromises();
+
+    expect(wrapper.findAll("textarea")).toHaveLength(0);
+  });
+
+  it("forgets the editor when its message is deleted", async () => {
+    const wrapper = await mountList();
+
+    rows(wrapper)[1].vm.$emit("edit");
+    await flushPromises();
+
+    await wrapper.setProps({ messages: [own("a", 30)] });
+    await flushPromises();
+    await wrapper.setProps({ messages: [own("a", 30), own("b", 20)] });
+    await flushPromises();
+
+    expect(wrapper.findAll("textarea")).toHaveLength(0);
+  });
+});
diff --git a/tests/composables/useChatTabSetupDeletes.spec.ts b/tests/composables/useChatTabSetupDeletes.spec.ts
index 846d5c89..fcdf7362 100644
--- a/tests/composables/useChatTabSetupDeletes.spec.ts
+++ b/tests/composables/useChatTabSetupDeletes.spec.ts
@@ -4,6 +4,9 @@ import { flushPromises } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { useChatTabs } from "~/composables/useChatTabs";
 import { useChatTabSetup } from "~/composables/useChatTabSetup";
+import {
+  useIncomingDirectMessages,
+} from "~/composables/useIncomingDirectMessages";
 import { useRightSidebar } from "~/composables/useRightSidebar";
 import { setActiveHub } from "~/composables/useHubState";
 import { useMatchLobbyStore } from "~/stores/MatchLobbyStore";
@@ -146,3 +149,86 @@ describe("useChatTabSetup deletes", () => {
     expect(unread()).toBe(1);
   });
 });
+
+describe("useChatTabSetup conversation deletes", () => {
+  let dmRoom = "";
+  let dmTab = "";
+
+  const dmUnread = () => useChatTabs().unreadCounts.value[dmTab];
+
+  const history = () => [
+    line("dm-read", 0),
+    line("dm-1", 2),
+    line("dm-mine", 3, ME),
+    line("dm-2", 4),
+  ];
+
+  beforeEach(() => {
+    dmRoom = `${ME}:dm-${lobbyCounter}`;
+    dmTab = `direct:${dmRoom}`;
+  });
+
+  it("takes a deleted message off a conversation's badge", async () => {
+    useChatTabs().openTab({
+      id: dmTab,
+      label: "Other",
+      instance: "direct",
+      type: "direct",
+      lobbyId: dmRoom,
+      activate: false,
+    });
+    useChatTabs().setUnread(dmTab, 2);
+    await flushPromises();
+
+    socket.emit(`lobby:direct:${dmRoom}:messages`, { messages: history() });
+    expect(dmUnread()).toBe(2);
+
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-read" });
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-mine" });
+    expect(dmUnread()).toBe(2);
+
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-2" });
+    expect(dmUnread()).toBe(1);
+  });
+
+  it("knows the ids behind a count that lands after the history", async () => {
+    const held = socket.joinLobby("spec-held", "direct", dmRoom);
+    socket.emit(`lobby:direct:${dmRoom}:messages`, { messages: history() });
+
+    vi.stubGlobal(
+      "$fetch",
+      vi.fn().mockResolvedValue({
+        conversations: [
+          {
+            roomId: dmRoom,
+            unread: 1,
+            isOpen: true,
+            position: 0,
+            peer: { steam_id: OTHER, name: "Other" },
+          },
+        ],
+      }),
+    );
+
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          useIncomingDirectMessages();
+          return () => h("div");
+        },
+      }),
+    );
+    await flushPromises();
+
+    expect(dmUnread()).toBe(1);
+
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-1" });
+    expect(dmUnread()).toBe(1);
+
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-2" });
+    expect(dmUnread()).toBe(0);
+
+    wrapper.unmount();
+    held.leave();
+  });
+});
diff --git a/tests/utilities/chatErrors.spec.ts b/tests/utilities/chatErrors.spec.ts
index 1e70732d..704b2981 100644
--- a/tests/utilities/chatErrors.spec.ts
+++ b/tests/utilities/chatErrors.spec.ts
@@ -79,6 +79,12 @@ describe("chat error actions", () => {
     );
   });
 
+  it("says why the author's own delete came too late", () => {
+    expect(
+      chatErrorDescription({ code: "window_closed", action: "delete" }, t),
+    ).toBe("chat.own_message_window_closed");
+  });
+
   it.each(["not_allowed", "offline", "gagged", "too_long"])(
     "adds nothing to a failed delete for %s",
     (code) => {
@@ -88,3 +94,38 @@ describe("chat error actions", () => {
     },
   );
 });
+
+describe("chat edit errors", () => {
+  it("titles every edit error as a failed edit", () => {
+    for (const code of ["not_allowed", "not_found", "window_closed"]) {
+      const error = { code, action: "edit" as const };
+
+      expect(chatErrorTitle(error, t)).toBe("chat.edit_failed");
+      expect(chatErrorFailed(error)).toBe(true);
+    }
+  });
+
+  it.each([
+    ["window_closed", "chat.edit_window_closed"],
+    ["not_found", "chat.message_already_gone"],
+    ["gagged", "chat.gagged"],
+    ["timeout", "chat.edit_timeout"],
+  ])("describes %s", (code, description) => {
+    expect(chatErrorDescription({ code, action: "edit" }, t)).toBe(
+      description,
+    );
+  });
+
+  it("says how long an edit can be", () => {
+    expect(
+      chatErrorDescription({ code: "too_long", action: "edit", max: 2000 }, t),
+    ).toBe('chat.message_too_long {"max":2000}');
+  });
+
+  it.each(["not_allowed", "invalid", "offline"])(
+    "adds nothing to a failed edit for %s",
+    (code) => {
+      expect(chatErrorDescription({ code, action: "edit" }, t)).toBeUndefined();
+    },
+  );
+});
diff --git a/tests/utilities/chatLobbyMessages.spec.ts b/tests/utilities/chatLobbyMessages.spec.ts
index 5010f863..73d11f92 100644
--- a/tests/utilities/chatLobbyMessages.spec.ts
+++ b/tests/utilities/chatLobbyMessages.spec.ts
@@ -1,9 +1,11 @@
 import { describe, expect, it } from "vitest";
 import {
+  applyChatMessageEdit,
   chatMessageKey,
   insertChatMessage,
   isChatMessageDeleted,
   mergeChatSnapshot,
+  newestMessageIdsFrom,
   removeChatMessage,
 } from "~/utilities/chatLobbyMessages";
 import type { LobbyMessage } from "~/web-sockets/Socket";
@@ -107,6 +109,40 @@ describe("mergeChatSnapshot", () => {
     expect(ids(merged)).toEqual(["a", "live"]);
   });
 
+  it("keeps an edit a stale snapshot doesn't know about yet", () => {
+    const edited = {
+      ...line("a", 1),
+      message: "fixed",
+      edited_at: "2026-09-28T12:05:00.000Z",
+    };
+
+    const merged = mergeChatSnapshot(
+      [edited],
+      [line("a", 1), line("b", 2)],
+      new Set(),
+    );
+
+    expect(merged[0]).toEqual(edited);
+    expect(ids(merged)).toEqual(["a", "b"]);
+  });
+
+  it("takes a later edit from the snapshot over the one held", () => {
+    const held = {
+      ...line("a", 1),
+      message: "fixed",
+      edited_at: "2026-09-28T12:05:00.000Z",
+    };
+    const newer = {
+      ...line("a", 1),
+      message: "fixed again",
+      edited_at: "2026-09-28T12:06:00.000Z",
+    };
+
+    const merged = mergeChatSnapshot([held], [newer], new Set());
+
+    expect(merged).toEqual([newer]);
+  });
+
   it("treats a missing snapshot as an empty room", () => {
     expect(mergeChatSnapshot([line("a", 1)], null, new Set())).toEqual([
       line("a", 1),
@@ -123,3 +159,76 @@ describe("chatMessageKey", () => {
     );
   });
 });
+
+describe("applyChatMessageEdit", () => {
+  const edit = {
+    id: "b",
+    message: "fixed",
+    edited_at: "2026-09-28T12:05:00.000Z",
+  };
+
+  it("changes the text and stamps the edit, and nothing else", () => {
+    const messages = [line("a", 0), line("b", 1)];
+
+    const edited = applyChatMessageEdit(messages, edit, new Set());
+
+    expect(edited).not.toBeNull();
+    expect(edited![1]).toEqual({
+      ...line("b", 1),
+      message: "fixed",
+      edited_at: edit.edited_at,
+    });
+    expect(edited![0]).toBe(messages[0]);
+    expect(messages[1].message).toBe("line b");
+  });
+
+  it("ignores an edit for a line it doesn't hold, rather than creating it", () => {
+    expect(
+      applyChatMessageEdit([line("a", 0)], { ...edit, id: "b" }, new Set()),
+    ).toBeNull();
+  });
+
+  it("ignores an edit that lands after the line was deleted", () => {
+    expect(
+      applyChatMessageEdit([line("b", 1)], edit, new Set(["b"])),
+    ).toBeNull();
+  });
+
+  it.each([
+    ["no id", { message: "fixed" }],
+    ["an empty id", { id: "", message: "fixed" }],
+    ["no text", { id: "b" }],
+  ])("ignores an edit with %s", (_, malformed) => {
+    expect(
+      applyChatMessageEdit([line("b", 1)], malformed, new Set()),
+    ).toBeNull();
+  });
+});
+
+describe("newestMessageIdsFrom", () => {
+  const ME = "76561198000000009";
+
+  it("names the newest lines from the other party, as many as counted", () => {
+    const messages = [
+      line("old", 0),
+      line("newer", 1),
+      { ...line("mine", 2), from: { steam_id: ME } },
+      line("newest", 3),
+    ];
+
+    expect(newestMessageIdsFrom(messages, 2, ME)).toEqual([
+      "newer",
+      "newest",
+    ]);
+  });
+
+  it("names nothing for a count of zero", () => {
+    expect(newestMessageIdsFrom([line("a", 0)], 0, ME)).toEqual([]);
+  });
+
+  it("skips lines with no id", () => {
+    expect(
+      newestMessageIdsFrom([line("a", 0), line(undefined, 1)], 2, ME),
+    ).toEqual(["a"]);
+  });
+});
diff --git a/tests/utilities/chatMessageActions.spec.ts b/tests/utilities/chatMessageActions.spec.ts
index 49fffae1..2e198df5 100644
--- a/tests/utilities/chatMessageActions.spec.ts
+++ b/tests/utilities/chatMessageActions.spec.ts
@@ -2,7 +2,9 @@ import { describe, expect, it } from "vitest";
 import {
   chatMessagePermissions,
   hasChatMessageActions,
+  SELF_SERVICE_WINDOW_MS,
 } from "~/utilities/chatMessageActions";
+import type { LobbyMessage } from "~/web-sockets/Socket";
 
 const message = {
   id: "7f1d0c2e-8b1a-4c6e-9f00-000000000001",
@@ -29,7 +31,7 @@ describe("chatMessagePermissions", () => {
         canModerate: true,
         roomType,
       }),
-    ).toEqual({ canDelete: true });
+    ).toEqual({ canDelete: true, canEdit: false });
   });
 
   it("never offers a delete in a direct conversation", () => {
@@ -66,9 +68,114 @@ describe("chatMessagePermissions", () => {
   });
 });
 
+describe("chatMessagePermissions for the author", () => {
+  const sentAt = Date.parse("2026-09-28T12:00:00.000Z");
+
+  const own: LobbyMessage = {
+    ...message,
+    source: "web",
+    from: { steam_id: viewerSteamId },
+  };
+
+  const permissions = (
+    overrides: Partial<LobbyMessage> = {},
+    options: { roomType?: string; canModerate?: boolean; age?: number } = {},
+  ) =>
+    chatMessagePermissions({
+      message: { ...own, ...overrides },
+      viewerSteamId,
+      canModerate: options.canModerate ?? false,
+      roomType: options.roomType ?? "match",
+      now: sentAt + (options.age ?? 60_000),
+    });
+
+  it.each(["match", "matchmaking", "tournament", "direct"])(
+    "lets the author edit and delete their own message in a %s room",
+    (roomType) => {
+      expect(permissions({}, { roomType })).toEqual({
+        canDelete: true,
+        canEdit: true,
+      });
+    },
+  );
+
+  it("holds the window open until the last millisecond", () => {
+    expect(permissions({}, { age: SELF_SERVICE_WINDOW_MS - 1 })).toEqual({
+      canDelete: true,
+      canEdit: true,
+    });
+    expect(permissions({}, { age: SELF_SERVICE_WINDOW_MS })).toEqual({
+      canDelete: false,
+      canEdit: false,
+    });
+  });
+
+  it("keeps a moderator's delete once their own window has closed", () => {
+    expect(
+      permissions(
+        {},
+        { canModerate: true, age: SELF_SERVICE_WINDOW_MS + 60_000 },
+      ),
+    ).toEqual({ canDelete: true, canEdit: false });
+  });
+
+  it("gives nobody a delete in a conversation once the window closes", () => {
+    expect(
+      permissions(
+        {},
+        {
+          roomType: "direct",
+          canModerate: true,
+          age: SELF_SERVICE_WINDOW_MS,
+        },
+      ),
+    ).toEqual({ canDelete: false, canEdit: false });
+  });
+
+  it("never lets a moderator edit someone else's message", () => {
+    expect(
+      permissions(
+        { from: { steam_id: "76561198000000002" } },
+        { canModerate: true },
+      ),
+    ).toEqual({ canDelete: true, canEdit: false });
+  });
+
+  it.each([
+    ["relayed from the game", { source: "game" as const }],
+    ["stored before sources were recorded", { source: undefined }],
+    ["with no id", { id: undefined }],
+    ["with a timestamp that doesn't parse", { timestamp: "not a date" }],
+  ])("offers the author nothing for a line %s", (_, overrides) => {
+    expect(permissions(overrides)).toEqual({
+      canDelete: false,
+      canEdit: false,
+    });
+  });
+
+  it("offers nothing to a signed-out viewer", () => {
+    expect(
+      chatMessagePermissions({
+        message: own,
+        viewerSteamId: null,
+        canModerate: false,
+        roomType: "match",
+        now: sentAt,
+      }),
+    ).toEqual({ canDelete: false, canEdit: false });
+  });
+});
+
 describe("hasChatMessageActions", () => {
   it("is true only when something is permitted", () => {
-    expect(hasChatMessageActions({ canDelete: true })).toBe(true);
-    expect(hasChatMessageActions({ canDelete: false })).toBe(false);
+    expect(hasChatMessageActions({ canDelete: true, canEdit: false })).toBe(
+      true,
+    );
+    expect(hasChatMessageActions({ canDelete: false, canEdit: true })).toBe(
+      true,
+    );
+    expect(hasChatMessageActions({ canDelete: false, canEdit: false })).toBe(
+      false,
+    );
   });
 });
diff --git a/tests/web-sockets/SocketChatError.spec.ts b/tests/web-sockets/SocketChatError.spec.ts
index 25278883..73122de8 100644
--- a/tests/web-sockets/SocketChatError.spec.ts
+++ b/tests/web-sockets/SocketChatError.spec.ts
@@ -37,6 +37,13 @@ function sentDeletes(send: ReturnType<typeof vi.fn>) {
     .map(({ data }) => data);
 }
 
+function sentEdits(send: ReturnType<typeof vi.fn>) {
+  return send.mock.calls
+    .map(([payload]) => JSON.parse(payload))
+    .filter(({ event }) => event === "lobby:edit")
+    .map(({ data }) => data);
+}
+
 async function settled(promise: Promise<unknown>) {
   let state = "pending";
   promise.then(
@@ -329,3 +336,226 @@ describe("Socket lobby deletes", () => {
     expect(ids(lobby.messages)).toEqual(["a", "c"]);
   });
 });
+
+describe("Socket editMessage", () => {
+  let send: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    toast.mockClear();
+    send = connect();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    disconnect();
+  });
+
+  it("asks the api to edit the message with a request id", () => {
+    void socket
+      .editMessage("direct", "1:2", "message-1", "fixed")
+      .catch(() => {});
+
+    const [request] = sentEdits(send);
+    expect(request).toMatchObject({
+      type: "direct",
+      id: "1:2",
+      messageId: "message-1",
+      message: "fixed",
+    });
+    expect(typeof request.requestId).toBe("string");
+  });
+
+  it("resolves only on the edit ack for its own request", async () => {
+    const pending = socket.editMessage("match", "match-1", "message-1", "x");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:ack", { requestId, action: "delete" });
+    expect(await settled(pending)).toBe("pending");
+
+    socket.emit("chat:ack", { requestId: "someone-else", action: "edit" });
+    expect(await settled(pending)).toBe("pending");
+
+    socket.emit("chat:ack", {
+      requestId,
+      messageId: "message-1",
+      action: "edit",
+    });
+    await expect(pending).resolves.toBeUndefined();
+  });
+
+  it("rejects on its own error without a global toast", async () => {
+    const pending = socket.editMessage("match", "match-1", "message-1", "x");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:error", {
+      code: "window_closed",
+      action: "edit",
+      requestId,
+    });
+
+    await expect(pending).rejects.toMatchObject({
+      code: "window_closed",
+      action: "edit",
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("gives up when the api never answers", async () => {
+    vi.useFakeTimers();
+    const pending = socket.editMessage("match", "match-1", "message-1", "x");
+
+    vi.advanceTimersByTime(7999);
+    expect(await settled(pending)).toBe("pending");
+
+    vi.advanceTimersByTime(1);
+    await expect(pending).rejects.toMatchObject({
+      code: "timeout",
+      action: "edit",
+    });
+  });
+
+  it("refuses straight away while offline and sends nothing", async () => {
+    disconnect();
+
+    await expect(
+      socket.editMessage("match", "match-1", "message-1", "x"),
+    ).rejects.toMatchObject({ code: "offline", action: "edit" });
+    expect(sentEdits(send)).toEqual([]);
+    expect((socket as any).offlineQueue).not.toContainEqual(
+      expect.objectContaining({ event: "lobby:edit" }),
+    );
+  });
+
+  it("titles an edit error nobody is waiting on as a failed edit", () => {
+    socket.emit("chat:error", {
+      code: "window_closed",
+      action: "edit",
+      requestId: "nobody-asked",
+    });
+
+    expect(toast).toHaveBeenCalledWith({
+      title: "Failed to edit message",
+      description: "You can only edit a message for 10 minutes.",
+      variant: "destructive",
+    });
+  });
+});
+
+describe("Socket lobby edits", () => {
+  let lobby: ReturnType<typeof socket.joinLobby>;
+  const EDITED_AT = "2026-09-28T12:05:00.000Z";
+
+  beforeEach(() => {
+    vi.spyOn(console, "info").mockImplementation(() => {});
+    lobby = socket.joinLobby("socket-spec", "direct", "1:2");
+    socket.emit("lobby:direct:1:2:messages", {
+      messages: [line("a", 0), line("b", 1)],
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    lobby.leave();
+    disconnect();
+    vi.restoreAllMocks();
+  });
+
+  const text = () => lobby.messages.map((message) => message.message);
+
+  it("applies an edit to the message it names", () => {
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "fixed",
+      edited_at: EDITED_AT,
+    });
+
+    expect(text()).toEqual(["line a", "fixed"]);
+    expect(lobby.messages[1].edited_at).toBe(EDITED_AT);
+  });
+
+  it("never creates a message from an edit for an id it doesn't hold", () => {
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "c",
+      message: "ghost",
+      edited_at: EDITED_AT,
+    });
+
+    expect(ids(lobby.messages)).toEqual(["a", "b"]);
+  });
+
+  it("ignores an edit that arrives after the delete it raced", () => {
+    socket.emit("lobby:direct:1:2:deleted", { id: "b" });
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "fixed",
+      edited_at: EDITED_AT,
+    });
+    socket.emit("lobby:direct:1:2:messages", {
+      messages: [line("a", 0), line("b", 1)],
+    });
+
+    expect(ids(lobby.messages)).toEqual(["a"]);
+  });
+
+  it("keeps an edit through a snapshot built before it", () => {
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "fixed",
+      edited_at: EDITED_AT,
+    });
+    socket.emit("lobby:direct:1:2:messages", {
+      messages: [line("a", 0), line("b", 1)],
+    });
+
+    expect(text()).toEqual(["line a", "fixed"]);
+  });
+
+  it("shows the new text on the ack, before the room hears about it", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "fixed");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:ack", { requestId, messageId: "b", action: "edit" });
+    await pending;
+
+    expect(text()).toEqual(["line a", "fixed"]);
+    expect(lobby.messages[1].edited_at).toEqual(expect.any(String));
+
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "fixed",
+      edited_at: EDITED_AT,
+    });
+    expect(lobby.messages[1].edited_at).toBe(EDITED_AT);
+  });
+
+  it("drops the line when the api says it is already gone", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "fixed");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:error", {
+      code: "not_found",
+      action: "edit",
+      requestId,
+    });
+
+    await expect(pending).rejects.toMatchObject({ code: "not_found" });
+    expect(ids(lobby.messages)).toEqual(["a"]);
+  });
+
+  it("leaves the line alone when the edit is refused", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "fixed");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:error", {
+      code: "window_closed",
+      action: "edit",
+      requestId,
+    });
+
+    await expect(pending).rejects.toMatchObject({ code: "window_closed" });
+    expect(text()).toEqual(["line a", "line b"]);
+  });
+});
diff --git a/utilities/chatErrors.ts b/utilities/chatErrors.ts
index ef8a50ec..28084906 100644
--- a/utilities/chatErrors.ts
+++ b/utilities/chatErrors.ts
@@ -3,7 +3,7 @@ import { CHAT_MESSAGE_MAX_LENGTH } from "~/constants/chat";
 
 // Echoed by the api on `chat:ack` and `chat:error`. An api that predates it
 // sends none, and only ever answered sends.
-export type ChatAction = "send" | "delete";
+export type ChatAction = "send" | "delete" | "edit";
 
 export interface ChatError {
   code: string;
@@ -31,6 +31,8 @@ export function chatErrorTitle(error: ChatError, t: Translate): string {
         return t("chat.message_already_gone");
       }
       return t("chat.delete_failed");
+    case "edit":
+      return t("chat.edit_failed");
     case "send":
     default:
       return t("chat.send_failed");
@@ -45,6 +47,28 @@ export function chatErrorDescription(
     switch (error?.code) {
       case "timeout":
         return t("chat.delete_timeout");
+      case "window_closed":
+        return t("chat.own_message_window_closed");
+      case "not_allowed":
+      default:
+        return undefined;
+    }
+  }
+
+  if (chatErrorAction(error) === "edit") {
+    switch (error?.code) {
+      case "timeout":
+        return t("chat.edit_timeout");
+      case "window_closed":
+        return t("chat.edit_window_closed");
+      case "not_found":
+        return t("chat.message_already_gone");
+      case "too_long":
+        return t("chat.message_too_long", {
+          max: error.max ?? CHAT_MESSAGE_MAX_LENGTH,
+        });
+      case "gagged":
+        return t("chat.gagged");
       case "not_allowed":
       default:
         return undefined;
diff --git a/utilities/chatLobbyMessages.ts b/utilities/chatLobbyMessages.ts
index ff2c8809..b06abb60 100644
--- a/utilities/chatLobbyMessages.ts
+++ b/utilities/chatLobbyMessages.ts
@@ -36,12 +36,24 @@ export function isChatMessageDeleted(
 // window between the server building the snapshot and it arriving here. The
 // same window means a snapshot can still carry a message deleted since, so the
 // tombstones apply to both halves.
+//
+// The same goes for an edit: a message is never un-edited, so a snapshot copy
+// older than the edit this client already applied keeps the edit.
 export function mergeChatSnapshot(
   current: LobbyMessage[],
   snapshot: LobbyMessage[] | null | undefined,
   deleted: ReadonlySet<string>,
 ) {
-  const history = snapshot || [];
+  const edited = new Map<string, LobbyMessage>();
+  for (const message of current) {
+    if (message?.id && message.edited_at) {
+      edited.set(message.id, message);
+    }
+  }
+
+  const history = (snapshot || []).map((message) =>
+    keepNewerEdit(message, message?.id ? edited.get(message.id) : undefined),
+  );
   const snapshotKeys = new Set(history.map(chatMessageKey));
 
   const newest = history.reduce(
@@ -65,6 +77,21 @@ export function mergeChatSnapshot(
   return merged;
 }
 
+function editTime(message: LobbyMessage | undefined) {
+  return new Date(message?.edited_at ?? 0).getTime() || 0;
+}
+
+function keepNewerEdit(
+  snapshot: LobbyMessage,
+  held: LobbyMessage | undefined,
+) {
+  if (!held || editTime(held) <= editTime(snapshot)) {
+    return snapshot;
+  }
+
+  return { ...snapshot, message: held.message, edited_at: held.edited_at };
+}
+
 export function insertChatMessage(
   current: LobbyMessage[],
   message: LobbyMessage,
@@ -102,3 +129,65 @@ export function removeChatMessage(
 
   return { messages, message, index };
 }
+
+// A conversation's unread count comes from the server, which counts every
+// message from the other party after the read cursor -- which are always the
+// newest of theirs. So the ids behind the count can be read off the room
+// without trusting this browser's copy of the cursor.
+export function newestMessageIdsFrom(
+  messages: readonly LobbyMessage[],
+  count: number,
+  viewerSteamId?: string | null,
+): string[] {
+  if (count <= 0) {
+    return [];
+  }
+
+  return messages
+    .filter(
+      (message) =>
+        !!message?.id &&
+        String(message.from?.steam_id) !== String(viewerSteamId),
+    )
+    .slice(-count)
+    .map((message) => message.id as string);
+}
+
+export interface ChatMessageEdit {
+  id?: string;
+  message?: string;
+  edited_at?: string;
+}
+
+// An edit can race a delete and arrive after it, so it only ever changes a
+// message this client still holds and never brings one back.
+export function applyChatMessageEdit(
+  current: LobbyMessage[],
+  edit: ChatMessageEdit | null | undefined,
+  deleted: ReadonlySet<string>,
+): LobbyMessage[] | null {
+  const id = edit?.id;
+
+  if (typeof id !== "string" || !id || typeof edit?.message !== "string") {
+    return null;
+  }
+
+  if (deleted.has(id)) {
+    return null;
+  }
+
+  const index = current.findIndex((message) => message?.id === id);
+
+  if (index === -1) {
+    return null;
+  }
+
+  const messages = current.slice();
+  messages[index] = {
+    ...messages[index],
+    message: edit.message,
+    edited_at: edit.edited_at ?? new Date().toISOString(),
+  };
+
+  return messages;
+}
diff --git a/utilities/chatMessageActions.ts b/utilities/chatMessageActions.ts
index a00744ea..69a2af70 100644
--- a/utilities/chatMessageActions.ts
+++ b/utilities/chatMessageActions.ts
@@ -1,7 +1,11 @@
 import type { ChatType, LobbyMessage } from "~/web-sockets/Socket";
 
+// Must match the api's ChatService.SELF_SERVICE_WINDOW_MS.
+export const SELF_SERVICE_WINDOW_MS = 600_000;
+
 export interface ChatMessagePermissions {
   canDelete: boolean;
+  canEdit: boolean;
 }
 
 export interface ChatMessagePermissionInput {
@@ -9,20 +13,48 @@ export interface ChatMessagePermissionInput {
   viewerSteamId?: string | null;
   canModerate: boolean;
   roomType: ChatType | string;
+  now?: number;
 }
 
-// Mirrors the api's ChatService.canDelete, so the menu never offers what the
-// server would refuse. The api only addresses a message by its id; lines from
-// before it stamped one can't be targeted at all.
+export function isOwnChatMessage(
+  message: LobbyMessage | null | undefined,
+  viewerSteamId?: string | null,
+) {
+  const author = message?.from?.steam_id;
+
+  if (!viewerSteamId || author === undefined || author === null) {
+    return false;
+  }
+
+  return String(author) === String(viewerSteamId);
+}
+
+// Mirrors the api's ChatService.canDelete and selfServiceRefusal, so the menu
+// never offers what the server would refuse. The api only addresses a message
+// by its id; lines from before it stamped one can't be targeted at all, and
+// lines stored before it recorded a source are nobody's to change.
 export function chatMessagePermissions({
   message,
+  viewerSteamId,
   canModerate,
   roomType,
+  now = Date.now(),
 }: ChatMessagePermissionInput): ChatMessagePermissions {
   const addressable = !!message?.id;
 
+  const sentAt = new Date(message?.timestamp ?? NaN).getTime();
+
+  const selfService =
+    addressable &&
+    message?.source === "web" &&
+    isOwnChatMessage(message, viewerSteamId) &&
+    Number.isFinite(sentAt) &&
+    now - sentAt < SELF_SERVICE_WINDOW_MS;
+
   return {
-    canDelete: addressable && canModerate && roomType !== "direct",
+    canDelete:
+      addressable && ((canModerate && roomType !== "direct") || selfService),
+    canEdit: selfService,
   };
 }
 
diff --git a/web-sockets/Socket.ts b/web-sockets/Socket.ts
index 133e68c9..81062080 100644
--- a/web-sockets/Socket.ts
+++ b/web-sockets/Socket.ts
@@ -9,11 +9,13 @@ import {
   type ChatError,
 } from "~/utilities/chatErrors";
 import {
+  applyChatMessageEdit,
   chatMessageKey,
   insertChatMessage,
   isChatMessageDeleted,
   mergeChatSnapshot,
   removeChatMessage,
+  type ChatMessageEdit,
   type RemovedChatMessage,
 } from "~/utilities/chatLobbyMessages";
 import guid from "~/utilities/uuid";
@@ -25,6 +27,7 @@ export interface LobbyMessage {
   message: string;
   timestamp: string;
   source?: "web" | "game";
+  edited_at?: string;
   from?: {
     role?: string;
     name?: string;
@@ -411,35 +414,89 @@ export class Socket extends EventEmitter {
     });
   }
 
-  // Never queued: a moderator told the delete failed must not have it carried
-  // out behind their back once the connection comes back.
   public deleteMessage(
     type: ChatType,
     id: string,
     messageId: string,
+  ): Promise<void> {
+    const lobbyId = `${type}:${id}`;
+
+    return this.chatRequest(
+      "delete",
+      { id, type, messageId },
+      {
+        resolved: () => {
+          this.removeMessageFromLobby(lobbyId, messageId);
+        },
+        rejected: (error) => {
+          if (error?.code === "not_found") {
+            this.removeMessageFromLobby(lobbyId, messageId);
+          }
+        },
+      },
+    );
+  }
+
+  // The ack beats the room's `edited` broadcast, which goes round through
+  // redis, so the text is applied here rather than flashing back to the old
+  // one. The broadcast then settles the server's edited_at.
+  public editMessage(
+    type: ChatType,
+    id: string,
+    messageId: string,
+    message: string,
+  ): Promise<void> {
+    const lobbyId = `${type}:${id}`;
+
+    return this.chatRequest(
+      "edit",
+      { id, type, messageId, message },
+      {
+        resolved: () => {
+          this.editMessageInLobby(lobbyId, {
+            id: messageId,
+            message,
+            edited_at: new Date().toISOString(),
+          });
+        },
+        rejected: (error) => {
+          if (error?.code === "not_found") {
+            this.removeMessageFromLobby(lobbyId, messageId);
+          }
+        },
+      },
+    );
+  }
+
+  // Never queued: someone told a delete or an edit failed must not have it
+  // carried out behind their back once the connection comes back.
+  private chatRequest(
+    action: Exclude<ChatAction, "send">,
+    data: Record<string, unknown>,
+    handlers: {
+      resolved: () => void;
+      rejected: (error: ChatError) => void;
+    },
   ): Promise<void> {
     if (!this.connected || !this.connection) {
-      return Promise.reject({ code: "offline", action: "delete" });
+      return Promise.reject({ code: "offline", action });
     }
 
     const requestId = guid();
-    const lobbyId = `${type}:${id}`;
 
     return new Promise<void>((resolve, reject) => {
       const pending: PendingChatRequest = {
-        action: "delete",
+        action,
         resolve: () => {
-          this.removeMessageFromLobby(lobbyId, messageId);
+          handlers.resolved();
           resolve();
         },
         reject: (error) => {
-          if (error?.code === "not_found") {
-            this.removeMessageFromLobby(lobbyId, messageId);
-          }
+          handlers.rejected(error);
           reject(error);
         },
         timer: setTimeout(() => {
-          reject({ code: "timeout", action: "delete", requestId });
+          reject({ code: "timeout", action, requestId });
           pending.timer = setTimeout(() => {
             this.pendingRequests.delete(requestId);
           }, Socket.LATE_ANSWER_MS);
@@ -448,12 +505,7 @@ export class Socket extends EventEmitter {
 
       this.pendingRequests.set(requestId, pending);
 
-      this.event(`lobby:delete`, {
-        id,
-        type,
-        messageId,
-        requestId,
-      });
+      this.event(`lobby:${action}`, { ...data, requestId });
     });
   }
 
@@ -547,6 +599,10 @@ export class Socket extends EventEmitter {
     );
   }
 
+  public lobbyMessages(type: ChatType, id: string): readonly LobbyMessage[] {
+    return this.lobbies.get(`${type}:${id}`)?.messages.value ?? [];
+  }
+
   public listen(event: string, callback: (data: any) => void) {
     this.on(event, callback);
     this.listening.add(event);
@@ -626,6 +682,12 @@ export class Socket extends EventEmitter {
       }),
     );
 
+    lobby.listeners.push(
+      this.listen(`lobby:${lobbyId}:edited`, (edit: ChatMessageEdit) => {
+        this.editLobbyMessage(lobby, edit);
+      }),
+    );
+
     this.join(`lobby`, {
       id: _id,
       type,
@@ -661,6 +723,25 @@ export class Socket extends EventEmitter {
     this.emitToLobbyInstances(lobby, "lobby:chat", message);
   }
 
+  private editMessageInLobby(lobbyId: string, edit: ChatMessageEdit) {
+    const lobby = this.lobbies.get(lobbyId);
+    if (lobby) {
+      this.editLobbyMessage(lobby, edit);
+    }
+  }
+
+  private editLobbyMessage(lobby: LobbyState, edit: ChatMessageEdit) {
+    const messages = applyChatMessageEdit(
+      lobby.messages.value,
+      edit,
+      lobby.deleted,
+    );
+
+    if (messages) {
+      lobby.messages.value = messages;
+    }
+  }
+
   private removeMessageFromLobby(lobbyId: string, messageId: string) {
     const lobby = this.lobbies.get(lobbyId);
     if (lobby) {

From 228c76dbe6d8c99a19e46570fac9753645d4d3ae Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Mon, 28 Sep 2026 18:14:07 -0400
Subject: [PATCH 2/5] bug: chat self-edit review fixes

A gagged player no longer gets Edit in a group room, which the api
refuses, and an edit refused as gagged or not allowed closes the editor
since no retry can succeed. Esc and Cancel wait for a save in flight.
Closing the editor hands focus back to the message's trigger, and a
closed window seen by an edit or a self-delete re-checks the row so the
trigger stops offering it.

The edit ack no longer overwrites the server's edited_at when the room
broadcast got there first; the two race, since the ack waits on the
notification update. A conversation emptied by a delete closes its tab
when it isn't on screen, matching the api dropping the conversation.
The edited marker is keyboard-focusable so its time can be reached.
---
 components/chat/ChatMessage.vue               | 22 +++++++-
 components/chat/ChatMessageActions.vue        | 39 +++++++-------
 components/chat/ChatMessageEditor.vue         | 14 ++++-
 composables/useChatTabSetup.ts                | 10 ++++
 tests/components/ChatMessage.spec.ts          | 54 +++++++++++++++++++
 tests/components/ChatMessageActions.spec.ts   |  3 +-
 tests/components/ChatMessages.spec.ts         | 42 +++++++++++++++
 .../useChatTabSetupDeletes.spec.ts            | 49 +++++++++++++++--
 tests/utilities/chatMessageActions.spec.ts    | 26 +++++++++
 tests/web-sockets/SocketChatError.spec.ts     | 17 ++++++
 utilities/chatMessageActions.ts               |  7 ++-
 web-sockets/Socket.ts                         | 15 ++++--
 12 files changed, 263 insertions(+), 35 deletions(-)

diff --git a/components/chat/ChatMessage.vue b/components/chat/ChatMessage.vue
index bf68bef1..debc247d 100644
--- a/components/chat/ChatMessage.vue
+++ b/components/chat/ChatMessage.vue
@@ -80,7 +80,7 @@ import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
         v-if="editing && room"
         :message="message"
         :room="room"
-        @close="$emit('edit-end')"
+        @close="endEdit"
       />
       <p
         v-else
@@ -95,7 +95,8 @@ import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
         >
           <template #trigger>
             <span
-              class="ml-1 whitespace-nowrap text-[9px] text-muted-foreground/70"
+              tabindex="0"
+              class="ml-1 whitespace-nowrap rounded-sm text-[9px] text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               data-chat-edited
             >
               {{ $t("chat.edited") }}
@@ -110,6 +111,7 @@ import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
          taller than a line of chat. -->
     <ChatMessageActions
       v-if="hasActions && !editing"
+      ref="actions"
       class="absolute right-0 z-10"
       :style="{ top: `calc(${padTopRem}rem - 0.25rem)` }"
       :message="message"
@@ -117,6 +119,7 @@ import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
       :permissions="permissions"
       :own="isOwnMessage"
       @open="recheckPermissions"
+      @expired="permissionsCheckedAt = Date.now()"
       @edit="$emit('edit')"
     />
   </div>
@@ -178,6 +181,20 @@ export default {
         toast({ title: this.$t("chat.own_message_window_closed") });
       }
     },
+    // Focus goes back to the trigger the edit came from, if the window still
+    // leaves it anything to offer, rather than falling to the page.
+    endEdit() {
+      this.permissionsCheckedAt = Date.now();
+      this.$emit("edit-end");
+
+      void this.$nextTick(() => {
+        const actions = this.$refs.actions as
+          | { focusTrigger?: () => void }
+          | undefined;
+
+        actions?.focusTrigger?.();
+      });
+    },
   },
   computed: {
     viewerSteamId() {
@@ -190,6 +207,7 @@ export default {
       return chatMessagePermissions({
         message: this.message,
         viewerSteamId: this.viewerSteamId,
+        viewerGagged: !!useAuthStore().me?.is_gagged,
         canModerate: this.canModerate,
         roomType: this.room?.type ?? "",
         now: this.permissionsCheckedAt,
diff --git a/components/chat/ChatMessageActions.vue b/components/chat/ChatMessageActions.vue
index f903f627..6f068a6b 100644
--- a/components/chat/ChatMessageActions.vue
+++ b/components/chat/ChatMessageActions.vue
@@ -21,37 +21,31 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   open: [];
+  expired: [];
   edit: [];
 }>();
 
+const triggerRef = ref<{ $el?: HTMLElement } | null>(null);
+
+defineExpose({
+  focusTrigger() {
+    triggerRef.value?.$el?.focus();
+  },
+});
+
 const menuOpen = ref(false);
 const confirmDelete = ref(false);
-const editRequested = ref(false);
 
 // Before the menu renders, so the row re-checks the ten minute window against
 // the clock now rather than when the line first rendered.
 function setMenuOpen(open: boolean) {
   if (open) {
-    editRequested.value = false;
     emit("open");
   }
 
   menuOpen.value = open;
 }
 
-function startEdit() {
-  editRequested.value = true;
-  emit("edit");
-}
-
-// The editor takes focus as it mounts; handing it back to the trigger would
-// pull it straight out again.
-function onCloseAutoFocus(event: Event) {
-  if (editRequested.value) {
-    event.preventDefault();
-  }
-}
-
 // The menu and the confirm after it sit over the right hub, which closes itself
 // when the pointer leaves. Both count as still interacting with it. The row can
 // unmount this before a watcher sees the menu open, so only locks actually
@@ -90,10 +84,13 @@ async function deleteMessage() {
   } catch (error) {
     toastChatError(error as ChatError);
 
-    if (
-      !chatErrorFailed(error as ChatError) ||
-      (error as ChatError)?.code === "window_closed"
-    ) {
+    if ((error as ChatError)?.code === "window_closed") {
+      confirmDelete.value = false;
+      emit("expired");
+      return;
+    }
+
+    if (!chatErrorFailed(error as ChatError)) {
       confirmDelete.value = false;
     }
   }
@@ -107,6 +104,7 @@ async function deleteMessage() {
     <DropdownMenu :open="menuOpen" :modal="false" @update:open="setMenuOpen">
       <DropdownMenuTrigger as-child>
         <Button
+          ref="triggerRef"
           variant="ghost"
           size="icon"
           class="h-6 w-6 text-muted-foreground hover:bg-[hsl(var(--tac-amber)/0.12)] hover:text-[hsl(var(--tac-amber))] [&_svg]:size-3.5"
@@ -119,9 +117,8 @@ async function deleteMessage() {
         align="end"
         class="w-48"
         data-right-hub-interactive
-        @close-auto-focus="onCloseAutoFocus"
       >
-        <DropdownMenuItem v-if="permissions.canEdit" @select="startEdit">
+        <DropdownMenuItem v-if="permissions.canEdit" @select="emit('edit')">
           <Pencil />
           <span>{{ $t("chat.edit_message") }}</span>
         </DropdownMenuItem>
diff --git a/components/chat/ChatMessageEditor.vue b/components/chat/ChatMessageEditor.vue
index 62d0b9d1..eca85dd0 100644
--- a/components/chat/ChatMessageEditor.vue
+++ b/components/chat/ChatMessageEditor.vue
@@ -73,6 +73,7 @@ function onEnter(event: KeyboardEvent) {
   void save();
 }
 
+// Not while saving: closing would leave the edit to land, or fail, unseen.
 function onEscape(event: KeyboardEvent) {
   if (event.isComposing) {
     return;
@@ -80,7 +81,10 @@ function onEscape(event: KeyboardEvent) {
 
   event.preventDefault();
   event.stopPropagation();
-  emit("close");
+
+  if (!saving.value) {
+    emit("close");
+  }
 }
 
 async function save() {
@@ -117,7 +121,12 @@ async function save() {
 
     toastChatError(error as ChatError);
 
-    if (code === "window_closed" || code === "not_found") {
+    if (
+      code === "window_closed" ||
+      code === "not_found" ||
+      code === "not_allowed" ||
+      code === "gagged"
+    ) {
       emit("close");
     }
   } finally {
@@ -167,6 +176,7 @@ async function save() {
         variant="ghost"
         size="xs"
         class="h-6 px-2 text-[10px]"
+        :disabled="saving"
         @click="emit('close')"
       >
         {{ $t("common.cancel") }}
diff --git a/composables/useChatTabSetup.ts b/composables/useChatTabSetup.ts
index 1750bda8..2bb6e4bc 100644
--- a/composables/useChatTabSetup.ts
+++ b/composables/useChatTabSetup.ts
@@ -78,6 +78,16 @@ export function useChatTabSetup() {
       if (message?.id) {
         decrementUnread(tab.id, message.id);
       }
+
+      // The api forgets a conversation whose only message is deleted, so an
+      // empty tab left behind would still say something had been sent.
+      if (
+        tab.type === "direct" &&
+        lobby.messages.length === 0 &&
+        !isChatTabOnScreen(tab.id)
+      ) {
+        closeTab(tab.id);
+      }
     });
 
     // The room's history, which arrives on join and on every rejoin. Counting
diff --git a/tests/components/ChatMessage.spec.ts b/tests/components/ChatMessage.spec.ts
index 7c19ca86..ec31eabd 100644
--- a/tests/components/ChatMessage.spec.ts
+++ b/tests/components/ChatMessage.spec.ts
@@ -271,6 +271,60 @@ describe("ChatMessage editing", () => {
     });
   });
 
+  it.each(["gagged", "not_allowed"])(
+    "closes on %s, which no retry can fix",
+    async (code) => {
+      vi.spyOn(socket, "editMessage").mockRejectedValue({
+        code,
+        action: "edit",
+      });
+      const wrapper = await mountMessage({ editing: true });
+
+      await wrapper.get("textarea").setValue("fixed");
+      await press(wrapper, "Enter");
+
+      expect(wrapper.emitted("edit-end")).toHaveLength(1);
+    },
+  );
+
+  it("won't cancel while a save is in flight", async () => {
+    let finish: () => void = () => {};
+    vi.spyOn(socket, "editMessage").mockReturnValue(
+      new Promise<void>((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const wrapper = await mountMessage({ editing: true });
+
+    await wrapper.get("textarea").setValue("fixed");
+    await press(wrapper, "Enter");
+    await press(wrapper, "Escape");
+
+    expect(wrapper.emitted("edit-end")).toBeUndefined();
+    const cancel = wrapper
+      .findAll("button")
+      .find((button) => button.text() === "Cancel");
+    expect(cancel!.attributes("disabled")).toBeDefined();
+
+    finish();
+    await flushPromises();
+
+    expect(wrapper.emitted("edit-end")).toHaveLength(1);
+  });
+
+  it("offers no edit to a gagged author in a group room", async () => {
+    useAuthStore().me = { steam_id: ME, role: "user", is_gagged: true } as any;
+    const wrapper = await mountMessage();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    const items = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).map((item) => item.textContent?.trim());
+    expect(items).toEqual(["Delete Message"]);
+  });
+
   it("closes and explains when the window closed first", async () => {
     vi.spyOn(socket, "editMessage").mockRejectedValue({
       code: "window_closed",
diff --git a/tests/components/ChatMessageActions.spec.ts b/tests/components/ChatMessageActions.spec.ts
index c79c18e2..6c426fc1 100644
--- a/tests/components/ChatMessageActions.spec.ts
+++ b/tests/components/ChatMessageActions.spec.ts
@@ -314,7 +314,7 @@ describe("ChatMessageActions for the author", () => {
       action: "delete",
     });
 
-    await openMenu();
+    const wrapper = await openMenu();
 
     menuItem("Delete Message")!.click();
     await flushPromises();
@@ -327,5 +327,6 @@ describe("ChatMessageActions for the author", () => {
       variant: "destructive",
     });
     expect(dialog()).toBeNull();
+    expect(wrapper.emitted("expired")).toHaveLength(1);
   });
 });
diff --git a/tests/components/ChatMessages.spec.ts b/tests/components/ChatMessages.spec.ts
index 56c91e99..1b4d8148 100644
--- a/tests/components/ChatMessages.spec.ts
+++ b/tests/components/ChatMessages.spec.ts
@@ -71,6 +71,48 @@ describe("ChatMessages editing", () => {
     expect(wrapper.findAll("textarea")).toHaveLength(0);
   });
 
+  it("hands focus to the editor picked from the menu, and keeps it", async () => {
+    const wrapper = await mountSuspended(ChatMessages, {
+      props: { messages: [own("a", 30)], messageRoom: () => ROOM },
+      attachTo: document.body,
+    });
+    unmount = () => wrapper.unmount();
+
+    const trigger = wrapper.get('button[aria-label="Message actions"]');
+    (trigger.element as HTMLElement).focus();
+    await trigger.trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    const edit = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === "Edit Message");
+    edit!.click();
+    await flushPromises();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    await flushPromises();
+
+    expect(document.activeElement).toBe(wrapper.get("textarea").element);
+  });
+
+  it("gives focus back to the trigger when the editor closes", async () => {
+    const wrapper = await mountSuspended(ChatMessages, {
+      props: { messages: [own("a", 30)], messageRoom: () => ROOM },
+      attachTo: document.body,
+    });
+    unmount = () => wrapper.unmount();
+
+    rows(wrapper)[0].vm.$emit("edit");
+    await flushPromises();
+
+    await wrapper.get("textarea").trigger("keydown", { key: "Escape" });
+    await flushPromises();
+
+    expect(wrapper.find("textarea").exists()).toBe(false);
+    expect(document.activeElement).toBe(
+      wrapper.get('button[aria-label="Message actions"]').element,
+    );
+  });
+
   it("forgets the editor when its message is deleted", async () => {
     const wrapper = await mountList();
 
diff --git a/tests/composables/useChatTabSetupDeletes.spec.ts b/tests/composables/useChatTabSetupDeletes.spec.ts
index fcdf7362..35d4178b 100644
--- a/tests/composables/useChatTabSetupDeletes.spec.ts
+++ b/tests/composables/useChatTabSetupDeletes.spec.ts
@@ -4,9 +4,7 @@ import { flushPromises } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { useChatTabs } from "~/composables/useChatTabs";
 import { useChatTabSetup } from "~/composables/useChatTabSetup";
-import {
-  useIncomingDirectMessages,
-} from "~/composables/useIncomingDirectMessages";
+import { useIncomingDirectMessages } from "~/composables/useIncomingDirectMessages";
 import { useRightSidebar } from "~/composables/useRightSidebar";
 import { setActiveHub } from "~/composables/useHubState";
 import { useMatchLobbyStore } from "~/stores/MatchLobbyStore";
@@ -168,7 +166,7 @@ describe("useChatTabSetup conversation deletes", () => {
     dmTab = `direct:${dmRoom}`;
   });
 
-  it("takes a deleted message off a conversation's badge", async () => {
+  function openConversationTab() {
     useChatTabs().openTab({
       id: dmTab,
       label: "Other",
@@ -177,6 +175,12 @@ describe("useChatTabSetup conversation deletes", () => {
       lobbyId: dmRoom,
       activate: false,
     });
+  }
+
+  const hasTab = () => useChatTabs().tabs.value.some((tab) => tab.id === dmTab);
+
+  it("takes a deleted message off a conversation's badge", async () => {
+    openConversationTab();
     useChatTabs().setUnread(dmTab, 2);
     await flushPromises();
 
@@ -191,6 +195,43 @@ describe("useChatTabSetup conversation deletes", () => {
     expect(dmUnread()).toBe(1);
   });
 
+  it("closes a conversation whose only message was deleted", async () => {
+    openConversationTab();
+    await flushPromises();
+
+    socket.emit(`lobby:direct:${dmRoom}:messages`, {
+      messages: [line("dm-only", 2)],
+    });
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-only" });
+
+    expect(hasTab()).toBe(false);
+  });
+
+  it("keeps a conversation that still has messages", async () => {
+    openConversationTab();
+    await flushPromises();
+
+    socket.emit(`lobby:direct:${dmRoom}:messages`, { messages: history() });
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-2" });
+
+    expect(hasTab()).toBe(true);
+  });
+
+  it("keeps an emptied conversation that is on screen", async () => {
+    openConversationTab();
+    useChatTabs().setActiveTab(dmTab);
+    useRightSidebar().setRightSidebarOpen(true);
+    setActiveHub("chat");
+    await flushPromises();
+
+    socket.emit(`lobby:direct:${dmRoom}:messages`, {
+      messages: [line("dm-only", 2)],
+    });
+    socket.emit(`lobby:direct:${dmRoom}:deleted`, { id: "dm-only" });
+
+    expect(hasTab()).toBe(true);
+  });
+
   it("knows the ids behind a count that lands after the history", async () => {
     const held = socket.joinLobby("spec-held", "direct", dmRoom);
     socket.emit(`lobby:direct:${dmRoom}:messages`, { messages: history() });
diff --git a/tests/utilities/chatMessageActions.spec.ts b/tests/utilities/chatMessageActions.spec.ts
index 2e198df5..8d64c865 100644
--- a/tests/utilities/chatMessageActions.spec.ts
+++ b/tests/utilities/chatMessageActions.spec.ts
@@ -132,6 +132,32 @@ describe("chatMessagePermissions for the author", () => {
     ).toEqual({ canDelete: false, canEdit: false });
   });
 
+  it("keeps a gagged author's delete in a group room but not the edit", () => {
+    expect(
+      chatMessagePermissions({
+        message: own,
+        viewerSteamId,
+        viewerGagged: true,
+        canModerate: false,
+        roomType: "match",
+        now: sentAt,
+      }),
+    ).toEqual({ canDelete: true, canEdit: false });
+  });
+
+  it("lets a gagged author edit in a direct conversation", () => {
+    expect(
+      chatMessagePermissions({
+        message: own,
+        viewerSteamId,
+        viewerGagged: true,
+        canModerate: false,
+        roomType: "direct",
+        now: sentAt,
+      }),
+    ).toEqual({ canDelete: true, canEdit: true });
+  });
+
   it("never lets a moderator edit someone else's message", () => {
     expect(
       permissions(
diff --git a/tests/web-sockets/SocketChatError.spec.ts b/tests/web-sockets/SocketChatError.spec.ts
index 73122de8..1a8dd6d3 100644
--- a/tests/web-sockets/SocketChatError.spec.ts
+++ b/tests/web-sockets/SocketChatError.spec.ts
@@ -529,6 +529,23 @@ describe("Socket lobby edits", () => {
     expect(lobby.messages[1].edited_at).toBe(EDITED_AT);
   });
 
+  it("keeps the server's edit time when the broadcast beats the ack", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "fixed");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "fixed",
+      edited_at: EDITED_AT,
+    });
+    socket.emit("chat:ack", { requestId, messageId: "b", action: "edit" });
+    await pending;
+
+    expect(text()).toEqual(["line a", "fixed"]);
+    expect(lobby.messages[1].edited_at).toBe(EDITED_AT);
+  });
+
   it("drops the line when the api says it is already gone", async () => {
     const send = connect();
     const pending = socket.editMessage("direct", "1:2", "b", "fixed");
diff --git a/utilities/chatMessageActions.ts b/utilities/chatMessageActions.ts
index 69a2af70..ba70576c 100644
--- a/utilities/chatMessageActions.ts
+++ b/utilities/chatMessageActions.ts
@@ -11,6 +11,7 @@ export interface ChatMessagePermissions {
 export interface ChatMessagePermissionInput {
   message: LobbyMessage | null | undefined;
   viewerSteamId?: string | null;
+  viewerGagged?: boolean;
   canModerate: boolean;
   roomType: ChatType | string;
   now?: number;
@@ -32,10 +33,12 @@ export function isOwnChatMessage(
 // Mirrors the api's ChatService.canDelete and selfServiceRefusal, so the menu
 // never offers what the server would refuse. The api only addresses a message
 // by its id; lines from before it stamped one can't be targeted at all, and
-// lines stored before it recorded a source are nobody's to change.
+// lines stored before it recorded a source are nobody's to change. A gag stops
+// an edit in a group room, like a send, but never the author's own delete.
 export function chatMessagePermissions({
   message,
   viewerSteamId,
+  viewerGagged = false,
   canModerate,
   roomType,
   now = Date.now(),
@@ -54,7 +57,7 @@ export function chatMessagePermissions({
   return {
     canDelete:
       addressable && ((canModerate && roomType !== "direct") || selfService),
-    canEdit: selfService,
+    canEdit: selfService && !(viewerGagged && roomType !== "direct"),
   };
 }
 
diff --git a/web-sockets/Socket.ts b/web-sockets/Socket.ts
index 81062080..68649c6f 100644
--- a/web-sockets/Socket.ts
+++ b/web-sockets/Socket.ts
@@ -437,9 +437,10 @@ export class Socket extends EventEmitter {
     );
   }
 
-  // The ack beats the room's `edited` broadcast, which goes round through
-  // redis, so the text is applied here rather than flashing back to the old
-  // one. The broadcast then settles the server's edited_at.
+  // The ack and the room's `edited` broadcast race: the broadcast goes round
+  // through redis, the ack waits on the notification update. Whichever lands
+  // first shows the text. The ack carries no edited_at, so it stamps this
+  // browser's clock only when the broadcast hasn't already set the server's.
   public editMessage(
     type: ChatType,
     id: string,
@@ -453,6 +454,14 @@ export class Socket extends EventEmitter {
       { id, type, messageId, message },
       {
         resolved: () => {
+          const held = this.lobbyMessages(type, id).find(
+            (lobbyMessage) => lobbyMessage?.id === messageId,
+          );
+
+          if (held?.edited_at && held.message === message) {
+            return;
+          }
+
           this.editMessageInLobby(lobbyId, {
             id: messageId,
             message,

From 898287cd53475520179664304943632c7ba8d283 Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Mon, 28 Sep 2026 18:56:51 -0400
Subject: [PATCH 3/5] bug: take edited_at from the edit ack and never apply an
 older edit

---
 tests/utilities/chatLobbyMessages.spec.ts | 101 ++++++++++++++++++++++
 tests/web-sockets/SocketChatError.spec.ts |  72 ++++++++++++++-
 utilities/chatLobbyMessages.ts            |  48 ++++++++--
 web-sockets/Socket.ts                     |  38 +++++---
 4 files changed, 237 insertions(+), 22 deletions(-)

diff --git a/tests/utilities/chatLobbyMessages.spec.ts b/tests/utilities/chatLobbyMessages.spec.ts
index 73d11f92..5845e866 100644
--- a/tests/utilities/chatLobbyMessages.spec.ts
+++ b/tests/utilities/chatLobbyMessages.spec.ts
@@ -143,6 +143,50 @@ describe("mergeChatSnapshot", () => {
     expect(merged).toEqual([newer]);
   });
 
+  it("keeps a newer edit over an older one the snapshot carries", () => {
+    const held = {
+      ...line("a", 1),
+      message: "second",
+      edited_at: "2026-09-28T12:06:00.000Z",
+    };
+    const older = {
+      ...line("a", 1),
+      message: "first",
+      edited_at: "2026-09-28T12:05:00.000Z",
+    };
+
+    expect(mergeChatSnapshot([held], [older], new Set())).toEqual([held]);
+  });
+
+  it("keeps an edit stamped by this browser through a snapshot with no edit", () => {
+    const local = {
+      ...line("a", 1),
+      message: "fixed",
+      edited_at: "2026-09-28T12:05:00.000Z",
+      __edited_locally: true,
+    };
+
+    expect(mergeChatSnapshot([local], [line("a", 1)], new Set())).toEqual([
+      local,
+    ]);
+  });
+
+  it("takes the server's edit over one stamped by this browser, whatever the clocks say", () => {
+    const local = {
+      ...line("a", 1),
+      message: "fixed",
+      edited_at: "2026-09-28T12:07:00.000Z",
+      __edited_locally: true,
+    };
+    const server = {
+      ...line("a", 1),
+      message: "fixed",
+      edited_at: "2026-09-28T12:05:00.000Z",
+    };
+
+    expect(mergeChatSnapshot([local], [server], new Set())).toEqual([server]);
+  });
+
   it("treats a missing snapshot as an empty room", () => {
     expect(mergeChatSnapshot([line("a", 1)], null, new Set())).toEqual([
       line("a", 1),
@@ -194,6 +238,63 @@ describe("applyChatMessageEdit", () => {
     ).toBeNull();
   });
 
+  it("ignores an edit older than the one the line already has", () => {
+    const newer = {
+      ...line("b", 1),
+      message: "newer",
+      edited_at: edit.edited_at,
+    };
+
+    expect(
+      applyChatMessageEdit(
+        [newer],
+        { ...edit, message: "older", edited_at: "2026-09-28T12:04:59.999Z" },
+        new Set(),
+      ),
+    ).toBeNull();
+  });
+
+  it("applies an edit stamped at the same time as the one held", () => {
+    const held = {
+      ...line("b", 1),
+      message: "held",
+      edited_at: edit.edited_at,
+    };
+
+    expect(applyChatMessageEdit([held], edit, new Set())![0].message).toBe(
+      "fixed",
+    );
+  });
+
+  it("stamps this browser's clock on an edit with no time, and marks it", () => {
+    const edited = applyChatMessageEdit(
+      [line("b", 1)],
+      { id: "b", message: "fixed" },
+      new Set(),
+    );
+
+    expect(edited![0].edited_at).toEqual(expect.any(String));
+    expect(edited![0].__edited_locally).toBe(true);
+  });
+
+  it("replaces an edit stamped by this browser with the server's, even an earlier one", () => {
+    const local = {
+      ...line("b", 1),
+      message: "fixed",
+      edited_at: "2026-09-28T12:07:00.000Z",
+      __edited_locally: true,
+    };
+
+    const edited = applyChatMessageEdit([local], edit, new Set());
+
+    expect(edited![0]).toEqual({
+      ...line("b", 1),
+      message: "fixed",
+      edited_at: edit.edited_at,
+    });
+    expect("__edited_locally" in edited![0]).toBe(false);
+  });
+
   it.each([
     ["no id", { message: "fixed" }],
     ["an empty id", { id: "", message: "fixed" }],
diff --git a/tests/web-sockets/SocketChatError.spec.ts b/tests/web-sockets/SocketChatError.spec.ts
index 1a8dd6d3..d49dc822 100644
--- a/tests/web-sockets/SocketChatError.spec.ts
+++ b/tests/web-sockets/SocketChatError.spec.ts
@@ -510,7 +510,28 @@ describe("Socket lobby edits", () => {
     expect(text()).toEqual(["line a", "fixed"]);
   });
 
-  it("shows the new text on the ack, before the room hears about it", async () => {
+  it("shows what the server stored on the ack, before the room hears about it", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "fixed");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:ack", {
+      requestId,
+      messageId: "b",
+      action: "edit",
+      message: "fixed as stored",
+      edited_at: EDITED_AT,
+    });
+    await pending;
+
+    expect(text()).toEqual(["line a", "fixed as stored"]);
+    expect(lobby.messages[1].edited_at).toBe(EDITED_AT);
+    expect(lobby.messages[1].__edited_locally).toBeUndefined();
+  });
+
+  it("stamps this browser's clock on an ack from an older api, until the server's arrives", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-09-28T12:05:30.000Z"));
     const send = connect();
     const pending = socket.editMessage("direct", "1:2", "b", "fixed");
     const [{ requestId }] = sentEdits(send);
@@ -519,7 +540,7 @@ describe("Socket lobby edits", () => {
     await pending;
 
     expect(text()).toEqual(["line a", "fixed"]);
-    expect(lobby.messages[1].edited_at).toEqual(expect.any(String));
+    expect(lobby.messages[1].edited_at).toBe("2026-09-28T12:05:30.000Z");
 
     socket.emit("lobby:direct:1:2:edited", {
       id: "b",
@@ -527,6 +548,53 @@ describe("Socket lobby edits", () => {
       edited_at: EDITED_AT,
     });
     expect(lobby.messages[1].edited_at).toBe(EDITED_AT);
+    expect(lobby.messages[1].__edited_locally).toBeUndefined();
+  });
+
+  it("ignores an older edit's ack that lands after a newer edit's broadcast", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "mine");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "other tab",
+      edited_at: "2026-09-28T12:06:00.000Z",
+    });
+    socket.emit("chat:ack", {
+      requestId,
+      messageId: "b",
+      action: "edit",
+      message: "mine",
+      edited_at: EDITED_AT,
+    });
+    await pending;
+
+    expect(text()).toEqual(["line a", "other tab"]);
+    expect(lobby.messages[1].edited_at).toBe("2026-09-28T12:06:00.000Z");
+  });
+
+  it("ignores an older edit's broadcast that lands after a newer edit's ack", async () => {
+    const send = connect();
+    const pending = socket.editMessage("direct", "1:2", "b", "mine");
+    const [{ requestId }] = sentEdits(send);
+
+    socket.emit("chat:ack", {
+      requestId,
+      messageId: "b",
+      action: "edit",
+      message: "mine",
+      edited_at: "2026-09-28T12:06:00.000Z",
+    });
+    await pending;
+    socket.emit("lobby:direct:1:2:edited", {
+      id: "b",
+      message: "other tab",
+      edited_at: EDITED_AT,
+    });
+
+    expect(text()).toEqual(["line a", "mine"]);
+    expect(lobby.messages[1].edited_at).toBe("2026-09-28T12:06:00.000Z");
   });
 
   it("keeps the server's edit time when the broadcast beats the ack", async () => {
diff --git a/utilities/chatLobbyMessages.ts b/utilities/chatLobbyMessages.ts
index b06abb60..57c4c277 100644
--- a/utilities/chatLobbyMessages.ts
+++ b/utilities/chatLobbyMessages.ts
@@ -77,19 +77,41 @@ export function mergeChatSnapshot(
   return merged;
 }
 
-function editTime(message: LobbyMessage | undefined) {
-  return new Date(message?.edited_at ?? 0).getTime() || 0;
+function editTime(message: { edited_at?: string }) {
+  return new Date(message.edited_at ?? 0).getTime() || 0;
+}
+
+// Two tabs can edit one message, and each edit's ack and broadcast land in
+// any order, so an older server stamp never replaces a newer one. A stamp
+// taken from this browser's clock can't be ordered against the server's: the
+// server's stamp always replaces it.
+function isOlderEdit(edit: { edited_at?: string }, held: LobbyMessage) {
+  if (!edit.edited_at || held.__edited_locally) {
+    return false;
+  }
+
+  return editTime(edit) < editTime(held);
 }
 
 function keepNewerEdit(
   snapshot: LobbyMessage,
   held: LobbyMessage | undefined,
 ) {
-  if (!held || editTime(held) <= editTime(snapshot)) {
+  if (!held || (snapshot.edited_at && !isOlderEdit(snapshot, held))) {
     return snapshot;
   }
 
-  return { ...snapshot, message: held.message, edited_at: held.edited_at };
+  const kept: LobbyMessage = {
+    ...snapshot,
+    message: held.message,
+    edited_at: held.edited_at,
+  };
+
+  if (held.__edited_locally) {
+    kept.__edited_locally = true;
+  }
+
+  return kept;
 }
 
 export function insertChatMessage(
@@ -182,12 +204,24 @@ export function applyChatMessageEdit(
     return null;
   }
 
-  const messages = current.slice();
-  messages[index] = {
-    ...messages[index],
+  if (isOlderEdit(edit, current[index])) {
+    return null;
+  }
+
+  const edited: LobbyMessage = {
+    ...current[index],
     message: edit.message,
     edited_at: edit.edited_at ?? new Date().toISOString(),
   };
 
+  if (edit.edited_at) {
+    delete edited.__edited_locally;
+  } else {
+    edited.__edited_locally = true;
+  }
+
+  const messages = current.slice();
+  messages[index] = edited;
+
   return messages;
 }
diff --git a/web-sockets/Socket.ts b/web-sockets/Socket.ts
index 68649c6f..65f594fe 100644
--- a/web-sockets/Socket.ts
+++ b/web-sockets/Socket.ts
@@ -40,6 +40,9 @@ export interface LobbyMessage {
   // client where two rooms are merged into one stream and a line has to say
   // which one it went to. See ChatLobby's merged `messages`.
   __channel?: "everyone" | "team";
+  // Never sent by the server either: set while `edited_at` is this browser's
+  // clock, stamped for an api that acked an edit without the server's time.
+  __edited_locally?: boolean;
 }
 
 export interface Lobby {
@@ -79,11 +82,13 @@ interface ChatAck {
   requestId?: string;
   messageId?: string;
   action?: ChatAction;
+  message?: string;
+  edited_at?: string;
 }
 
 interface PendingChatRequest {
   action: ChatAction;
-  resolve: () => void;
+  resolve: (ack: ChatAck) => void;
   reject: (error: ChatError) => void;
   timer: ReturnType<typeof setTimeout>;
 }
@@ -439,8 +444,10 @@ export class Socket extends EventEmitter {
 
   // The ack and the room's `edited` broadcast race: the broadcast goes round
   // through redis, the ack waits on the notification update. Whichever lands
-  // first shows the text. The ack carries no edited_at, so it stamps this
-  // browser's clock only when the broadcast hasn't already set the server's.
+  // first shows the text. Both carry the server's stored text and edited_at,
+  // except from an older api whose ack has neither: that ack stamps this
+  // browser's clock unless the broadcast already showed the same text, and
+  // the server's next stamp for the message replaces it.
   public editMessage(
     type: ChatType,
     id: string,
@@ -453,7 +460,16 @@ export class Socket extends EventEmitter {
       "edit",
       { id, type, messageId, message },
       {
-        resolved: () => {
+        resolved: (ack) => {
+          if (ack.edited_at) {
+            this.editMessageInLobby(lobbyId, {
+              id: messageId,
+              message: ack.message ?? message,
+              edited_at: ack.edited_at,
+            });
+            return;
+          }
+
           const held = this.lobbyMessages(type, id).find(
             (lobbyMessage) => lobbyMessage?.id === messageId,
           );
@@ -462,11 +478,7 @@ export class Socket extends EventEmitter {
             return;
           }
 
-          this.editMessageInLobby(lobbyId, {
-            id: messageId,
-            message,
-            edited_at: new Date().toISOString(),
-          });
+          this.editMessageInLobby(lobbyId, { id: messageId, message });
         },
         rejected: (error) => {
           if (error?.code === "not_found") {
@@ -483,7 +495,7 @@ export class Socket extends EventEmitter {
     action: Exclude<ChatAction, "send">,
     data: Record<string, unknown>,
     handlers: {
-      resolved: () => void;
+      resolved: (ack: ChatAck) => void;
       rejected: (error: ChatError) => void;
     },
   ): Promise<void> {
@@ -496,8 +508,8 @@ export class Socket extends EventEmitter {
     return new Promise<void>((resolve, reject) => {
       const pending: PendingChatRequest = {
         action,
-        resolve: () => {
-          handlers.resolved();
+        resolve: (ack) => {
+          handlers.resolved(ack);
           resolve();
         },
         reject: (error) => {
@@ -519,7 +531,7 @@ export class Socket extends EventEmitter {
   }
 
   public resolveChatRequest(ack: ChatAck) {
-    this.takeChatRequest(ack)?.resolve();
+    this.takeChatRequest(ack)?.resolve(ack);
   }
 
   public rejectChatRequest(error: ChatError) {

From 4de3de82a21b026a0234760484e2cbb54f92dbd8 Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Mon, 28 Sep 2026 20:35:52 -0400
Subject: [PATCH 4/5] test: prove the closed-window recheck and per-lock hub
 holds are fixed

An edit or self-delete answered window_closed now takes the row's
trigger away, and a stale trigger unmounting before its watcher runs no
longer releases a hub lock someone else holds. Each test fails with its
fix reverted.
---
 tests/components/ChatMessage.spec.ts | 56 ++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/tests/components/ChatMessage.spec.ts b/tests/components/ChatMessage.spec.ts
index ec31eabd..c2330e1a 100644
--- a/tests/components/ChatMessage.spec.ts
+++ b/tests/components/ChatMessage.spec.ts
@@ -148,6 +148,62 @@ describe("ChatMessage editing", () => {
     expect(useRightSidebar().hoverCloseSuspended.value).toBe(false);
   });
 
+  it("leaves another hold on the hub alone when a stale trigger goes away", async () => {
+    const wrapper = await mountMessage();
+    const sentAt = Date.parse(own().timestamp);
+    vi.spyOn(Date, "now").mockReturnValue(sentAt + 10 * 60_000);
+    useRightSidebar().suspendHoverClose();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    expect(wrapper.find(TRIGGER).exists()).toBe(false);
+    expect(useRightSidebar().hoverCloseSuspended.value).toBe(true);
+  });
+
+  it("takes the trigger away when a self-delete finds the window closed", async () => {
+    vi.spyOn(socket, "deleteMessage").mockRejectedValue({
+      code: "window_closed",
+      action: "delete",
+    });
+    const byText = (selector: string, text: string) =>
+      Array.from(document.body.querySelectorAll<HTMLElement>(selector)).find(
+        (element) => element.textContent?.trim() === text,
+      );
+    const wrapper = await mountMessage();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+    byText('[role="menuitem"]', "Delete Message")!.click();
+    await flushPromises();
+
+    const sentAt = Date.parse(own().timestamp);
+    vi.spyOn(Date, "now").mockReturnValue(sentAt + 10 * 60_000);
+    byText('[role="alertdialog"] button', "Delete")!.click();
+    await flushPromises();
+
+    expect(document.body.querySelector('[role="alertdialog"]')).toBeNull();
+    expect(wrapper.find(TRIGGER).exists()).toBe(false);
+  });
+
+  it("takes the trigger away when an edit finds the window closed", async () => {
+    vi.spyOn(socket, "editMessage").mockRejectedValue({
+      code: "window_closed",
+      action: "edit",
+    });
+    const wrapper = await mountMessage({ editing: true });
+
+    const sentAt = Date.parse(own().timestamp);
+    vi.spyOn(Date, "now").mockReturnValue(sentAt + 10 * 60_000);
+    await wrapper.get("textarea").setValue("fixed");
+    await press(wrapper, "Enter");
+    await wrapper.setProps({ editing: false });
+    await flushPromises();
+
+    expect(wrapper.emitted("edit-end")).toHaveLength(1);
+    expect(wrapper.find(TRIGGER).exists()).toBe(false);
+  });
+
   it("opens the editor on the current text, focused", async () => {
     const wrapper = await mountMessage({ editing: true });
 

From ea4fce8261b21f90ab53f62839e0f04bd7d40b4d Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Mon, 28 Sep 2026 21:16:33 -0400
Subject: [PATCH 5/5] test: a conversation's burst is still counted once after
 its join fills in the ids

---
 .../useIncomingDirectMessages.spec.ts         | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/tests/composables/useIncomingDirectMessages.spec.ts b/tests/composables/useIncomingDirectMessages.spec.ts
index b2d5f2ac..bedc9613 100644
--- a/tests/composables/useIncomingDirectMessages.spec.ts
+++ b/tests/composables/useIncomingDirectMessages.spec.ts
@@ -62,6 +62,9 @@ vi.mock("~/web-sockets/Socket", async (importOriginal) => ({
         },
       };
     },
+    lobbyMessages() {
+      return [];
+    },
     markLobbyRead() {},
   },
 }));
@@ -167,6 +170,29 @@ describe("useIncomingDirectMessages", () => {
     expect(unread()).toBe(3);
   });
 
+  it("still counts a burst once after the join's history fills in its ids", async () => {
+    await mountChat();
+
+    incoming("m1");
+    incoming("m2");
+    incoming("m3");
+    await flushPromises();
+
+    socketMock.emitLobby(`direct:${ROOM}`, "lobby:messages", [
+      line("m1"),
+      line("m2"),
+      line("m3"),
+    ]);
+    expect(unread()).toBe(3);
+
+    roomChat("m3");
+    incoming("m2");
+    expect(unread()).toBe(3);
+
+    roomChat("m4");
+    expect(unread()).toBe(4);
+  });
+
   it("counts a message once when the joined room delivers it too", async () => {
     await mountChat();