implement failed messages counter

examples/dogfooding/index.html

@@ -34,6 +34,10 @@
                         <span class="counter-value" id="receivedOthersCount">0</span>
                         <span class="counter-label">Received (Others)</span>
                     </div>
+                    <div>
+                        <span class="counter-value" id="failedToSendCount">0</span>
+                        <span class="counter-label">Failed to Send</span>
+                    </div>
                 </div>
             </section>
 

examples/dogfooding/src/index.ts

@@ -16,6 +16,7 @@ import {
   incrementSentByMe,
   incrementReceivedMine,
   incrementReceivedOthers,
+  incrementFailedToSend,
   addMessageToLog,
   renderMessages,
   getSearchTerm,
@@ -67,9 +68,33 @@ async function initializeApp() {
             addMessageToLog(chatMessage, 'sent');
           } else {
             console.warn(`Failed to send message ${i + 1} (ID: ${chatMessage.id}):`, result.failures);
+            const failureReason = result.failures.length > 0 
+              ? String(result.failures[0].error) || 'Unknown error'
+              : 'No peers available';
+            const failedPeer = result.failures.length > 0 
+              ? result.failures[0].peerId?.toString()
+              : undefined;
+            
+            const failedMessage: ChatMessage = {
+              ...chatMessage,
+              failureInfo: {
+                error: failureReason,
+                peer: failedPeer
+              }
+            };
+            incrementFailedToSend();
+            addMessageToLog(failedMessage, 'failed');
           }
         } catch (error) {
           console.error(`Error sending message ${i + 1} (ID: ${chatMessage.id}):`, error);
+          const failedMessage: ChatMessage = {
+            ...chatMessage,
+            failureInfo: {
+              error: String(error) || 'Unknown error'
+            }
+          };
+          incrementFailedToSend();
+          addMessageToLog(failedMessage, 'failed');
         }
         await new Promise(resolve => setTimeout(resolve, 100));
       }

examples/dogfooding/src/message-service.ts

@@ -13,6 +13,10 @@ export interface ChatMessage {
     timestamp: number;
     senderPeerId: string;
     content: string;
+    failureInfo?: {
+        error: string;
+        peer?: string;
+    };
 }
 
 export function encodeMessage(content: string): Uint8Array {

examples/dogfooding/src/ui-manager.ts

@@ -6,10 +6,12 @@ const receivedOthersCountEl = document.getElementById("receivedOthersCount") as
 const peerIdDisplayEl = document.getElementById("peerIdDisplay") as HTMLSpanElement;
 const messageListEl = document.getElementById("messageList") as HTMLDivElement;
 const searchInputEl = document.getElementById("searchInput") as HTMLInputElement;
+const failedToSendCountEl = document.getElementById("failedToSendCount") as HTMLSpanElement;
 
 let sentByMe = 0;
 let receivedMine = 0;
 let receivedOthers = 0;
+let failedToSend = 0;
 
 let currentMessages: ChatMessage[] = [];
 let currentPeerId: string | undefined;
@@ -36,7 +38,12 @@ export function incrementReceivedOthers() {
     if (receivedOthersCountEl) receivedOthersCountEl.textContent = receivedOthers.toString();
 }
 
-export function addMessageToLog(message: ChatMessage, type: 'sent' | 'received-mine' | 'received-other') {
+export function incrementFailedToSend() {
+    failedToSend++;
+    if (failedToSendCountEl) failedToSendCountEl.textContent = failedToSend.toString();
+}
+
+export function addMessageToLog(message: ChatMessage, type: 'sent' | 'received-mine' | 'received-other' | 'failed') {
     currentMessages.push(message);
     renderMessages(); 
 }
@@ -66,7 +73,12 @@ export function renderMessages(filterText?: string) {
         let typeClass = '';
         let senderPrefix = '';
 
-        if (message.senderPeerId === currentPeerId) {
+        if (message.failureInfo) {
+            typeClass = 'failed';
+            senderPrefix = 'Me (Failed)';
+            item.style.backgroundColor = '#ffebee';
+            item.style.borderLeft = '4px solid #f44336';
+        } else if (message.senderPeerId === currentPeerId) {
             typeClass = 'sent';
             senderPrefix = 'Me';
         } else {
@@ -96,6 +108,17 @@ export function renderMessages(filterText?: string) {
         item.appendChild(senderInfoP);
         item.appendChild(contentP);
         item.appendChild(timestampP);
+
+        // Add failure information if present
+        if (message.failureInfo) {
+            const failureInfoP = document.createElement("p");
+            failureInfoP.classList.add("failure-info");
+            failureInfoP.style.color = '#d32f2f';
+            failureInfoP.style.fontWeight = 'bold';
+            failureInfoP.textContent = `Failed: ${message.failureInfo.error}${message.failureInfo.peer ? ` (Peer: ${message.failureInfo.peer.substring(0, 12)}...)` : ''}`;
+            item.appendChild(failureInfoP);
+        }
+
         messageListEl.appendChild(item);
     });
 }