feat: add toast notifications to all save/modify operations app-wide

Added toast feedback to every mutation operation across the desktop app:
- SpacesPage: create, delete, set active space
- RegistryPage: install, uninstall server
- ClientsPage: save config, delete client, toggle feature set grants,
  toggle individual features (also replaced custom toast with useToast)
- SpaceSwitcher: set active space, create space
- ServerLogViewer: clear logs, copy log path (replaced alert() calls)

Author: Mohammod Al Amin Ashik

apps/desktop/src/components/ServerLogViewer.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { X, Download, Trash2, RefreshCw } from 'lucide-react';
+import { useToast, ToastContainer } from '@mcpmux/ui';
 import { getServerLogs, clearServerLogs, getServerLogFile, type ServerLogEntry } from '@/lib/api/logs';
 
 interface ServerLogViewerProps {
@@ -38,6 +39,7 @@ export function ServerLogViewer({ serverId, serverName, onClose }: ServerLogView
   const [autoRefresh, setAutoRefresh] = useState(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const shouldScrollRef = useRef(true);
+  const { toasts, success, error: showError, dismiss } = useToast();
 
   const loadLogs = async () => {
     try {
@@ -97,19 +99,19 @@ export function ServerLogViewer({ serverId, serverName, onClose }: ServerLogView
     try {
       await clearServerLogs(serverId);
       setLogs([]);
+      success('Logs cleared', `All logs for "${serverName}" have been cleared`);
     } catch (e) {
-      alert(`Failed to clear logs: ${e}`);
+      showError('Failed to clear logs', e instanceof Error ? e.message : String(e));
     }
   };
 
   const handleOpenInEditor = async () => {
     try {
       const filePath = await getServerLogFile(serverId);
-      // Copy path to clipboard for user to paste into their editor
       await navigator.clipboard.writeText(filePath);
-      alert(`Log file path copied to clipboard:\n${filePath}\n\nPaste this into your file explorer or text editor.`);
+      success('Path copied', `Log file path copied to clipboard`);
     } catch (e) {
-      alert(`Failed to get log file path: ${e}`);
+      showError('Failed to get log file path', e instanceof Error ? e.message : String(e));
     }
   };
 
@@ -131,6 +133,7 @@ export function ServerLogViewer({ serverId, serverName, onClose }: ServerLogView
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <ToastContainer toasts={toasts} onClose={dismiss} />
       <div className="bg-[rgb(var(--card))] border border-[rgb(var(--border-subtle))] rounded-xl shadow-xl w-[90vw] h-[85vh] flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-[rgb(var(--border-subtle))]">

apps/desktop/src/components/SpaceSwitcher.tsx

@@ -5,7 +5,7 @@ import {
   Plus,
   Loader2,
 } from 'lucide-react';
-import { Button } from '@mcpmux/ui';
+import { Button, useToast, ToastContainer } from '@mcpmux/ui';
 import {
   useAppStore,
   useActiveSpace,
@@ -25,6 +25,7 @@ export function SpaceSwitcher({ className = '' }: SpaceSwitcherProps) {
   const [newName, setNewName] = useState('');
   const [showCreateInput, setShowCreateInput] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const { toasts, success, error: showError, dismiss } = useToast();
 
   const spaces = useSpaces();
   const activeSpace = useActiveSpace();
@@ -56,8 +57,10 @@ export function SpaceSwitcher({ className = '' }: SpaceSwitcherProps) {
       await setActiveSpaceAPI(spaceId);
       setActiveSpaceInStore(spaceId);
       setIsOpen(false);
+      const activatedSpace = spaces.find(s => s.id === spaceId);
+      success('Space activated', `Switched to "${activatedSpace?.name || 'Space'}"`);
     } catch (e) {
-      console.error('Failed to switch space:', e);
+      showError('Failed to switch space', e instanceof Error ? e.message : String(e));
     }
   };
 
@@ -73,15 +76,17 @@ export function SpaceSwitcher({ className = '' }: SpaceSwitcherProps) {
       setNewName('');
       setShowCreateInput(false);
       setIsOpen(false);
+      success('Space created', `"${space.name}" has been created and activated`);
     } catch (e) {
-      console.error('Failed to create space:', e);
+      showError('Failed to create space', e instanceof Error ? e.message : String(e));
     } finally {
       setIsCreating(false);
     }
   };
 
   return (
     <div ref={dropdownRef} className={`relative ${className}`}>
+      <ToastContainer toasts={toasts} onClose={dismiss} />
       {/* Trigger Button */}
       <button
         onClick={() => setIsOpen(!isOpen)}

apps/desktop/src/features/clients/ClientsPage.tsx

@@ -25,6 +25,8 @@ import {
   Card,
   CardContent,
   Button,
+  useToast,
+  ToastContainer,
 } from '@mcpmux/ui';
 import type { OAuthClient, UpdateClientRequest } from '@/lib/api/gateway';
 import { listOAuthClients, updateOAuthClient, deleteOAuthClient } from '@/lib/api/gateway';
@@ -97,8 +99,7 @@ export default function ClientsPage() {
   // Panel state
   const [selectedClient, setSelectedClient] = useState<OAuthClient | null>(null);
 
-  // Toast notification for reconnects
-  const [toast, setToast] = useState<{ message: string; type: 'info' | 'success' } | null>(null);
+  const { toasts, success, error: showError, info, dismiss } = useToast();
 
   // Edit state
   const [editAlias, setEditAlias] = useState('');
@@ -264,8 +265,7 @@ export default function ClientsPage() {
       // Show toast for reconnections (silent approval)
       if (event.payload.action === 'reconnected') {
         const name = event.payload.client_name || event.payload.client_id;
-        setToast({ message: `${name} connected`, type: 'info' });
-        setTimeout(() => setToast(null), 3000);
+        info('Client connected', `${name} connected`);
       }
     });
 
@@ -309,17 +309,24 @@ export default function ClientsPage() {
   const toggleFeatureSetGrant = async (featureSetId: string) => {
     if (!selectedClient || !activeSpace) return;
 
+    const featureSet = availableFeatureSets.find(fs => fs.id === featureSetId);
+    const fsName = featureSet?.name || 'Feature set';
+    
     try {
       if (grantedFeatureSetIds.includes(featureSetId)) {
         await revokeOAuthClientFeatureSet(selectedClient.client_id, activeSpace.id, featureSetId);
         setGrantedFeatureSetIds(prev => prev.filter(id => id !== featureSetId));
+        success('Permission revoked', `"${fsName}" removed from client`);
       } else {
         await grantOAuthClientFeatureSet(selectedClient.client_id, activeSpace.id, featureSetId);
         setGrantedFeatureSetIds(prev => [...prev, featureSetId]);
+        success('Permission granted', `"${fsName}" added to client`);
       }
       loadResolvedFeatures(selectedClient.client_id);
     } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to update permission', msg);
     }
   };
 
@@ -345,8 +352,11 @@ export default function ClientsPage() {
       ));
 
       setSelectedClient(updated);
+      success('Client settings saved', `"${updated.client_alias || updated.client_name}" has been updated`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to save settings', msg);
     } finally {
       setIsSaving(false);
     }
@@ -355,12 +365,18 @@ export default function ClientsPage() {
   const handleDelete = async (clientId: string) => {
     if (!confirm('Remove this client? All tokens will be revoked.')) return;
 
+    const deletedClient = oauthClients.find(c => c.client_id === clientId);
+    const clientName = deletedClient?.client_alias || deletedClient?.client_name || 'Client';
+    
     try {
       await deleteOAuthClient(clientId);
       setOAuthClients(prev => prev.filter(c => c.client_id !== clientId));
       setSelectedClient(null);
+      success('Client removed', `"${clientName}" and its tokens have been revoked`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to remove client', msg);
     }
   };
 
@@ -440,13 +456,15 @@ export default function ClientsPage() {
     const isAdded = individualFeatureMembers.some(m => m.member_id === featureId);
     console.log('Feature is currently added:', isAdded);
 
+    const feature = availableFeatures.find(f => f.id === featureId);
+    const featureName = feature?.feature_name || 'Feature';
+    
     try {
       if (isAdded) {
-        console.log('Removing feature from set...');
         await removeFeatureFromSet(clientCustomFeatureSet.id, featureId);
         setIndividualFeatureMembers(prev => prev.filter(m => m.member_id !== featureId));
+        success('Feature removed', `"${featureName}" removed from client`);
       } else {
-        console.log('Adding feature to set...');
         await addFeatureToSet(clientCustomFeatureSet.id, featureId, 'include');
         setIndividualFeatureMembers(prev => [...prev, {
           id: '',
@@ -455,14 +473,14 @@ export default function ClientsPage() {
           member_id: featureId,
           mode: 'include',
         }]);
+        success('Feature added', `"${featureName}" added to client`);
       }
 
-      console.log('Reloading resolved features...');
       await loadResolvedFeatures(selectedClient.client_id);
-      console.log('Toggle complete');
     } catch (e) {
-      console.error('Error toggling feature:', e);
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to toggle feature', msg);
     }
   };
 
@@ -1282,21 +1300,7 @@ export default function ClientsPage() {
         </div>
       )}
 
-      {/* Toast notification */}
-      {toast && (
-        <div className="fixed bottom-4 right-4 z-50 animate-in slide-in-from-bottom-4">
-          <div className={`px-4 py-2 rounded-lg shadow-lg ${
-            toast.type === 'success' 
-              ? 'bg-green-600 text-white' 
-              : 'bg-[rgb(var(--surface-elevated))] border border-[rgb(var(--border))] text-[rgb(var(--foreground))]'
-          }`}>
-            <div className="flex items-center gap-2">
-              <Wifi className="h-4 w-4" />
-              <span className="text-sm">{toast.message}</span>
-            </div>
-          </div>
-        </div>
-      )}
+      <ToastContainer toasts={toasts} onClose={dismiss} />
     </div>
   );
 }

apps/desktop/src/features/registry/RegistryPage.tsx

@@ -6,6 +6,7 @@
 
 import { useEffect, useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { useToast, ToastContainer } from '@mcpmux/ui';
 import { useRegistryStore } from '../../stores/registryStore';
 import { ServerCard } from './ServerCard';
 import { ServerDetailModal } from './ServerDetailModal';
@@ -37,6 +38,7 @@ export function RegistryPage() {
 
   const [localSearch, setLocalSearch] = useState('');
   const viewSpace = useViewSpace();
+  const { toasts, success, error: showToastError, dismiss } = useToast();
 
   const itemsPerPage = uiConfig?.items_per_page ?? 24;
 
@@ -89,13 +91,27 @@ export function RegistryPage() {
   }, [localSearch, searchQuery, search]);
 
   const handleInstall = async (id: string) => {
-    await installServer(id, viewSpace?.id);
+    const server = servers.find(s => s.id === id);
+    const serverName = server?.name || 'Server';
+    try {
+      await installServer(id, viewSpace?.id);
+      success('Server installed', `"${serverName}" has been installed`);
+    } catch {
+      showToastError('Install failed', `Failed to install "${serverName}"`);
+    }
   };
 
   const handleUninstall = async (id: string) => {
-    await uninstallServer(id);
-    if (selectedServer?.id === id) {
-      selectServer(null);
+    const server = servers.find(s => s.id === id);
+    const serverName = server?.name || 'Server';
+    try {
+      await uninstallServer(id);
+      if (selectedServer?.id === id) {
+        selectServer(null);
+      }
+      success('Server uninstalled', `"${serverName}" has been uninstalled`);
+    } catch {
+      showToastError('Uninstall failed', `Failed to uninstall "${serverName}"`);
     }
   };
 
@@ -104,6 +120,7 @@ export function RegistryPage() {
 
   return (
     <div className="h-full flex flex-col" data-testid="registry-page">
+      <ToastContainer toasts={toasts} onClose={dismiss} />
       {/* Header */}
       <div className="p-6 border-b border-[rgb(var(--border-subtle))]">
         <div className="flex items-center gap-3 mb-1">

apps/desktop/src/features/spaces/SpacesPage.tsx

@@ -14,6 +14,8 @@ import {
   CardTitle,
   CardContent,
   Button,
+  useToast,
+  ToastContainer,
 } from '@mcpmux/ui';
 import {
   useAppStore,
@@ -37,6 +39,7 @@ export function SpacesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [isActionLoading, setIsActionLoading] = useState<string | null>(null); // ID of space being acted on
+  const { toasts, success, error: showError, dismiss } = useToast();
 
   // Create Modal State
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -55,8 +58,11 @@ export function SpacesPage() {
       setNewSpaceName('');
       setNewSpaceIcon('🌐');
       setShowCreateModal(false);
+      success('Space created', `"${space.name}" has been created`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to create space', msg);
     } finally {
       setIsCreating(false);
     }
@@ -68,10 +74,14 @@ export function SpacesPage() {
     setIsActionLoading(id);
     setError(null);
     try {
+      const deletedSpace = spaces.find(s => s.id === id);
       await deleteSpace(id);
       removeSpace(id);
+      success('Space deleted', `"${deletedSpace?.name || 'Space'}" has been deleted`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to delete space', msg);
     } finally {
       setIsActionLoading(null);
     }
@@ -83,8 +93,12 @@ export function SpacesPage() {
     try {
       await setActiveSpaceAPI(id);
       setActiveSpaceInStore(id);
+      const activatedSpace = spaces.find(s => s.id === id);
+      success('Active space changed', `"${activatedSpace?.name || 'Space'}" is now active`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+      showError('Failed to set active space', msg);
     } finally {
       setIsActionLoading(null);
     }
@@ -101,6 +115,8 @@ export function SpacesPage() {
   });
 
   return (
+    <>
+    <ToastContainer toasts={toasts} onClose={dismiss} />
     <div className="h-full flex flex-col relative" data-testid="spaces-page">
       {/* Header */}
       <div className="flex-shrink-0 p-8 border-b border-[rgb(var(--border-subtle))]">
@@ -323,6 +339,7 @@ export function SpacesPage() {
         </div>
       )}
     </div>
+    </>
   );
 }