Add better error bubble-up

frontend/src/App.tsx

@@ -352,8 +352,12 @@ export function App() {
   const handleAdvertise = useCallback(async () => {
     try {
       await api.sendAdvertisement(true);
+      toast.success('Advertisement sent');
     } catch (err) {
       console.error('Failed to send advertisement:', err);
+      toast.error('Failed to send advertisement', {
+        description: err instanceof Error ? err.message : 'Check radio connection',
+      });
     }
   }, []);
 
@@ -375,8 +379,12 @@ export function App() {
       await api.deleteChannel(key);
       setChannels((prev) => prev.filter((c) => c.key !== key));
       setActiveConversation(null);
+      toast.success('Channel deleted');
     } catch (err) {
       console.error('Failed to delete channel:', err);
+      toast.error('Failed to delete channel', {
+        description: err instanceof Error ? err.message : undefined,
+      });
     }
   }, []);
 
@@ -387,8 +395,12 @@ export function App() {
       await api.deleteContact(publicKey);
       setContacts((prev) => prev.filter((c) => c.public_key !== publicKey));
       setActiveConversation(null);
+      toast.success('Contact deleted');
     } catch (err) {
       console.error('Failed to delete contact:', err);
+      toast.error('Failed to delete contact', {
+        description: err instanceof Error ? err.message : undefined,
+      });
     }
   }, []);
 

frontend/src/components/CrackerPanel.tsx

@@ -4,6 +4,7 @@ import { ENGLISH_WORDLIST } from 'meshcore-hashtag-cracker/wordlist';
 import NoSleep from 'nosleep.js';
 import type { RawPacket, Channel } from '../types';
 import { api } from '../api';
+import { toast } from './ui/sonner';
 import { cn } from '@/lib/utils';
 
 /**
@@ -338,6 +339,9 @@ export function CrackerPanel({ packets, channels, onChannelCreate, onRunningChan
             }
           } catch (err) {
             console.error('Failed to create channel or decrypt historical:', err);
+            toast.error('Failed to save cracked channel', {
+              description: err instanceof Error ? err.message : 'Channel discovered but could not be saved',
+            });
           }
         }
       } else {
@@ -386,7 +390,9 @@ export function CrackerPanel({ packets, channels, onChannelCreate, onRunningChan
   // Start/stop handlers
   const handleStart = () => {
     if (!gpuAvailable) {
-      alert('WebGPU is not available in your browser. Please use Chrome 113+ or Edge 113+.');
+      toast.error('WebGPU not available', {
+        description: 'Cracking requires Chrome 113+ or Edge 113+ with WebGPU support.',
+      });
       return;
     }
     setIsRunning(true);

frontend/src/components/MessageInput.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useImperativeHandle, forwardRef, useRef, useMemo, type FormEvent, type KeyboardEvent } from 'react';
 import { Input } from './ui/input';
 import { Button } from './ui/button';
+import { toast } from './ui/sonner';
 import { cn } from '@/lib/utils';
 
 // MeshCore message size limits (empirically determined from LoRa packet constraints)
@@ -103,6 +104,9 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(
           setText('');
         } catch (err) {
           console.error('Failed to request telemetry:', err);
+          toast.error('Failed to request telemetry', {
+            description: err instanceof Error ? err.message : 'Check radio connection',
+          });
           return;
         } finally {
           setSending(false);
@@ -117,6 +121,9 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(
           setText('');
         } catch (err) {
           console.error('Failed to send message:', err);
+          toast.error('Failed to send message', {
+            description: err instanceof Error ? err.message : 'Check radio connection',
+          });
           return;
         } finally {
           setSending(false);

frontend/src/hooks/useConversationMessages.ts

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { toast } from '../components/ui/sonner';
 import { api } from '../api';
 import type { Conversation, Message } from '../types';
 
@@ -61,6 +62,9 @@ export function useConversationMessages(
       setHasOlderMessages(data.length >= MESSAGE_PAGE_SIZE);
     } catch (err) {
       console.error('Failed to fetch messages:', err);
+      toast.error('Failed to load messages', {
+        description: err instanceof Error ? err.message : 'Check your connection',
+      });
     } finally {
       if (showLoading) {
         setMessagesLoading(false);
@@ -93,6 +97,9 @@ export function useConversationMessages(
       setHasOlderMessages(data.length >= MESSAGE_PAGE_SIZE);
     } catch (err) {
       console.error('Failed to fetch older messages:', err);
+      toast.error('Failed to load older messages', {
+        description: err instanceof Error ? err.message : 'Check your connection',
+      });
     } finally {
       setLoadingOlder(false);
     }