From 99c87759639f58b267b4ecca724df7d0cc7d2821 Mon Sep 17 00:00:00 2001
From: Sudo-Ivan <ivan@quad4.io>
Date: Tue, 10 Mar 2026 04:26:43 -0500
Subject: [PATCH] Add retry functionality for failed messages in
 ConversationViewer and enhance message handling in MessagesPage

---
 .../messages/ConversationViewer.vue           | 69 ++++++++------
 .../components/messages/MessagesPage.vue      | 94 ++++++++++++++++++-
 2 files changed, 133 insertions(+), 30 deletions(-)

diff --git a/meshchatx/src/frontend/components/messages/ConversationViewer.vue b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
index bf20c70..8f2d527 100644
--- a/meshchatx/src/frontend/components/messages/ConversationViewer.vue
+++ b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
@@ -838,6 +838,15 @@
                                     >
                                         {{ chatItem.lxmf_message.state === "rejected" ? "Rejected" : "Failed" }}
                                     </span>
+                                    <button
+                                        v-if="['failed', 'cancelled'].includes(chatItem.lxmf_message.state)"
+                                        type="button"
+                                        class="ml-0.5 p-0.5 rounded hover:bg-white/20 transition-colors"
+                                        title="Retry sending"
+                                        @click.stop="retrySendingMessage(chatItem)"
+                                    >
+                                        <MaterialDesignIcon icon-name="refresh" class="size-3 text-white" />
+                                    </button>
 
                                     <!-- delivered: double check -->
                                     <MaterialDesignIcon
@@ -1214,6 +1223,21 @@
                 <MaterialDesignIcon icon-name="code-json" class="size-4 text-gray-400" />
                 <span class="font-medium">View Raw LXM</span>
             </button>
+            <button
+                v-if="
+                    messageContextMenu.chatItem?.is_outbound &&
+                    ['failed', 'cancelled'].includes(messageContextMenu.chatItem?.lxmf_message?.state)
+                "
+                type="button"
+                class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-all active:scale-95"
+                @click="
+                    retrySendingMessage(messageContextMenu.chatItem);
+                    messageContextMenu.show = false;
+                "
+            >
+                <MaterialDesignIcon icon-name="refresh" class="size-4" />
+                <span class="font-medium">Retry</span>
+            </button>
             <div class="border-t border-gray-100 dark:border-zinc-700 my-1.5 mx-2"></div>
             <button
                 type="button"
@@ -2613,52 +2637,54 @@ export default {
             }
             GlobalEmitter.emit("compose-new-message", destinationHash);
         },
+        normalizeLxmfMessage(msg, isOutbound) {
+            const normalized = { ...msg };
+            if (!normalized.created_at && normalized.timestamp) {
+                normalized.created_at = new Date(normalized.timestamp * 1000).toISOString();
+            }
+            if (isOutbound && normalized.state === "unknown") {
+                normalized.state = "outbound";
+            }
+            return normalized;
+        },
         onLxmfMessageReceived(lxmfMessage) {
-            // only add if it's for the current conversation
             if (lxmfMessage.source_hash !== this.selectedPeer?.destination_hash) {
                 return;
             }
 
-            // add inbound message to ui
             this.chatItems.push({
                 type: "lxmf_message",
-                lxmf_message: lxmfMessage,
+                is_outbound: false,
+                lxmf_message: this.normalizeLxmfMessage(lxmfMessage, false),
             });
 
-            // mark conversation as read
             const conversation = this.findConversation(this.selectedPeer.destination_hash);
             if (conversation) {
                 this.markConversationAsRead(conversation);
             }
 
-            // auto scroll to bottom if we want to
             if (this.autoScrollOnNewMessage) {
                 this.scrollMessagesToBottom();
             }
 
-            // auto load audio
             this.autoLoadAudioAttachments();
         },
         onLxmfMessageCreated(lxmfMessage) {
-            // only add if it's for the current conversation
             if (lxmfMessage.destination_hash !== this.selectedPeer?.destination_hash) {
                 return;
             }
 
-            // add new outbound lxmf message from server
             if (!this.isLxmfMessageInUi(lxmfMessage.hash)) {
                 this.chatItems.push({
                     type: "lxmf_message",
-                    lxmf_message: lxmfMessage,
+                    lxmf_message: this.normalizeLxmfMessage(lxmfMessage, true),
                     is_outbound: true,
                 });
             }
 
-            // auto load audio
             this.autoLoadAudioAttachments();
         },
         onLxmfMessageUpdated(lxmfMessage) {
-            // find existing chat item by lxmf message hash
             const lxmfMessageHash = lxmfMessage.hash;
             const chatItemIndex = this.chatItems.findIndex(
                 (chatItem) => chatItem.lxmf_message?.hash === lxmfMessageHash
@@ -2667,8 +2693,6 @@ export default {
                 return;
             }
 
-            // update lxmf message from server, while ensuring ui updates from nested object change
-            // we merge to preserve client-side only fields or database fields not present in state updates
             this.chatItems[chatItemIndex].lxmf_message = {
                 ...this.chatItems[chatItemIndex].lxmf_message,
                 ...lxmfMessage,
@@ -3271,16 +3295,14 @@ export default {
                         },
                     });
 
-                    // add outbound message to ui
                     if (!this.isLxmfMessageInUi(response.data.lxmf_message.hash)) {
                         this.chatItems.push({
                             type: "lxmf_message",
-                            lxmf_message: response.data.lxmf_message,
+                            lxmf_message: this.normalizeLxmfMessage(response.data.lxmf_message, true),
                             is_outbound: true,
                         });
                     }
                 } else {
-                    // send first image with message text and other fields
                     const firstImage = images[0];
                     const firstFields = {
                         ...fields,
@@ -3300,16 +3322,14 @@ export default {
                         },
                     });
 
-                    // add outbound message to ui
                     if (!this.isLxmfMessageInUi(response.data.lxmf_message.hash)) {
                         this.chatItems.push({
                             type: "lxmf_message",
-                            lxmf_message: response.data.lxmf_message,
+                            lxmf_message: this.normalizeLxmfMessage(response.data.lxmf_message, true),
                             is_outbound: true,
                         });
                     }
 
-                    // send subsequent images as separate messages with image name as content
                     for (let i = 1; i < images.length; i++) {
                         const image = images[i];
                         const subsequentFields = {
@@ -3326,17 +3346,15 @@ export default {
                                 },
                             });
 
-                            // add outbound message to ui
                             if (!this.isLxmfMessageInUi(subResponse.data.lxmf_message.hash)) {
                                 this.chatItems.push({
                                     type: "lxmf_message",
-                                    lxmf_message: subResponse.data.lxmf_message,
+                                    lxmf_message: this.normalizeLxmfMessage(subResponse.data.lxmf_message, true),
                                     is_outbound: true,
                                 });
                             }
                         } catch (subError) {
                             console.error(`Failed to send image ${i + 1}:`, subError);
-                            // we continue sending other images even if one fails
                         }
                     }
                 }
@@ -3390,11 +3408,9 @@ export default {
             }
         },
         async retrySendingMessage(chatItem) {
-            // force delete existing message
             await this.deleteChatItem(chatItem, false);
 
             try {
-                // send message to reticulum
                 const replyQuoted =
                     chatItem.lxmf_message.fields?.reply_quoted_content ||
                     (chatItem.lxmf_message.reply_to_hash &&
@@ -3409,19 +3425,16 @@ export default {
                     },
                 });
 
-                // add outbound message to ui
                 if (!this.isLxmfMessageInUi(response.data.lxmf_message.hash)) {
                     this.chatItems.push({
                         type: "lxmf_message",
-                        lxmf_message: response.data.lxmf_message,
+                        lxmf_message: this.normalizeLxmfMessage(response.data.lxmf_message, true),
                         is_outbound: true,
                     });
                 }
 
-                // always scroll to bottom since we just sent a message
                 this.scrollMessagesToBottom();
             } catch (e) {
-                // show error
                 const message = e.response?.data?.message ?? "failed to send message";
                 DialogUtils.alert(message);
                 console.log(e);
diff --git a/meshchatx/src/frontend/components/messages/MessagesPage.vue b/meshchatx/src/frontend/components/messages/MessagesPage.vue
index dc73404..e2fb5c7 100644
--- a/meshchatx/src/frontend/components/messages/MessagesPage.vue
+++ b/meshchatx/src/frontend/components/messages/MessagesPage.vue
@@ -262,8 +262,10 @@ export default {
                 return;
             }
 
+            const existingConversation = this.conversations.find((c) => c.destination_hash === destinationHash);
             this.onPeerClick({
-                display_name: "Unknown Peer",
+                display_name: existingConversation?.display_name ?? "Anonymous Peer",
+                custom_display_name: existingConversation?.custom_display_name ?? null,
                 destination_hash: destinationHash,
             });
         },
@@ -291,10 +293,17 @@ export default {
                     break;
                 }
                 case "lxmf.delivery": {
-                    // reload conversations when a new message is received
                     await this.getConversations();
                     break;
                 }
+                case "lxmf_message_created": {
+                    this.onOutboundMessageCreated(json.lxmf_message);
+                    break;
+                }
+                case "lxmf_message_state_updated": {
+                    this.onOutboundMessageStateUpdated(json.lxmf_message);
+                    break;
+                }
                 case "lxmf.telemetry": {
                     // update tracking status if peer matches
                     const destHash = json.destination_hash;
@@ -422,6 +431,87 @@ export default {
                 this.isLoadingMore = false;
             }
         },
+        peerHashFromMessage(msg) {
+            return msg.is_incoming ? msg.source_hash : msg.destination_hash;
+        },
+        onOutboundMessageCreated(msg) {
+            const peerHash = this.peerHashFromMessage(msg);
+            const idx = this.conversations.findIndex((c) => c.destination_hash === peerHash);
+            if (idx !== -1) {
+                const conv = this.conversations[idx];
+                conv.latest_message_preview = msg.content;
+                conv.latest_message_title = msg.title;
+                conv.latest_message_created_at = msg.timestamp;
+                conv.updated_at = new Date(msg.timestamp * 1000).toISOString();
+            } else {
+                const peer = this.peers[peerHash];
+                this.conversations.unshift({
+                    destination_hash: peerHash,
+                    display_name: peer?.display_name ?? this.selectedPeer?.display_name ?? "Anonymous Peer",
+                    custom_display_name: peer?.custom_display_name ?? this.selectedPeer?.custom_display_name ?? null,
+                    contact_image: peer?.contact_image ?? null,
+                    lxmf_user_icon: peer?.lxmf_user_icon ?? null,
+                    is_unread: false,
+                    is_tracking: peer?.is_tracking ?? false,
+                    failed_messages_count: 0,
+                    has_attachments: false,
+                    latest_message_preview: msg.content,
+                    latest_message_title: msg.title,
+                    latest_message_created_at: msg.timestamp,
+                    updated_at: new Date(msg.timestamp * 1000).toISOString(),
+                    is_contact: false,
+                });
+                this.resolvePeerDisplayName(peerHash);
+            }
+        },
+        onOutboundMessageStateUpdated(msg) {
+            const peerHash = this.peerHashFromMessage(msg);
+            const conv = this.conversations.find((c) => c.destination_hash === peerHash);
+            if (!conv) return;
+
+            const oldState = conv._lastKnownState;
+            const newState = msg.state;
+            conv._lastKnownState = newState;
+
+            if (newState === "failed" && oldState !== "failed") {
+                conv.failed_messages_count = (conv.failed_messages_count || 0) + 1;
+            } else if (oldState === "failed" && newState !== "failed") {
+                conv.failed_messages_count = Math.max(0, (conv.failed_messages_count || 1) - 1);
+            }
+        },
+        async resolvePeerDisplayName(peerHash) {
+            try {
+                const response = await window.axios.get(`/api/v1/lxmf/conversations`, {
+                    params: { search: peerHash, limit: 1 },
+                });
+                const results = response.data.conversations;
+                if (!results || results.length === 0) return;
+
+                const fresh = results[0];
+                if (fresh.destination_hash !== peerHash) return;
+
+                const conv = this.conversations.find((c) => c.destination_hash === peerHash);
+                if (conv) {
+                    if (fresh.display_name) conv.display_name = fresh.display_name;
+                    if (fresh.custom_display_name) conv.custom_display_name = fresh.custom_display_name;
+                    if (fresh.contact_image) conv.contact_image = fresh.contact_image;
+                    if (fresh.lxmf_user_icon) conv.lxmf_user_icon = fresh.lxmf_user_icon;
+                    if (fresh.is_contact) conv.is_contact = fresh.is_contact;
+                }
+
+                if (this.selectedPeer && this.selectedPeer.destination_hash === peerHash) {
+                    if (fresh.display_name && fresh.display_name !== this.selectedPeer.display_name) {
+                        this.selectedPeer = {
+                            ...this.selectedPeer,
+                            display_name: fresh.display_name,
+                            custom_display_name: fresh.custom_display_name ?? this.selectedPeer.custom_display_name,
+                        };
+                    }
+                }
+            } catch {
+                // non-critical
+            }
+        },
         async getFolders() {
             try {
                 const response = await window.axios.get("/api/v1/lxmf/folders");