fix: replace broken window.confirm() with async ConfirmDialog and improve UI

window.confirm() doesn't block in Tauri webviews, causing destructive
actions (delete space, remove client, delete featureset, clear logs) to
execute before the user responds. Replace all 4 usages with a promise-based
useConfirm() hook and ConfirmDialog component. Also improve Add Custom
Server button and ConfigEditorModal styling.

Signed-off-by: mcpmux <mcpmux@users.noreply.github.com>
Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src/components/ConfigEditorModal.tsx

@@ -163,13 +163,18 @@ export function ConfigEditorModal({ spaceId, spaceName, onClose, onSaved }: Conf
       <div className="bg-[rgb(var(--surface))] w-full max-w-4xl h-[80vh] rounded-xl shadow-2xl flex flex-col border border-[rgb(var(--border))]">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-[rgb(var(--border))]">
-          <div>
-            <h3 className="text-lg font-semibold flex items-center gap-2">
-              Add Custom Server
-            </h3>
-            <p className="text-sm text-[rgb(var(--muted))]">
-              Edit the JSON configuration for space: {spaceName}
-            </p>
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-[rgb(var(--primary))]/10 border border-[rgb(var(--primary))]/20">
+              <Save className="h-4 w-4 text-[rgb(var(--primary))]" />
+            </div>
+            <div>
+              <h3 className="text-base font-semibold">
+                Custom Server Configuration
+              </h3>
+              <p className="text-xs text-[rgb(var(--muted))]">
+                {spaceName} &middot; JSON config
+              </p>
+            </div>
           </div>
           <button
             onClick={onClose}
@@ -180,36 +185,40 @@ export function ConfigEditorModal({ spaceId, spaceName, onClose, onSaved }: Conf
         </div>
 
         {/* Toolbar */}
-        <div className="flex items-center gap-2 p-2 border-b border-[rgb(var(--border))] bg-[rgb(var(--surface-dim))]">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-[rgb(var(--border))] bg-[rgb(var(--surface-dim))]">
           <button
             onClick={handleSave}
             disabled={isSaving || isLoading || !isValidJson}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))] rounded-md hover:bg-[rgb(var(--primary-hover))] disabled:opacity-50 transition-colors"
+            className="flex items-center gap-2 px-3.5 py-1.5 text-sm font-medium bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))] rounded-lg hover:bg-[rgb(var(--primary-hover))] disabled:opacity-50 shadow-sm transition-colors"
           >
             {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-            Save Changes
+            Save
           </button>
-          
-          <div className="h-4 w-px bg-[rgb(var(--border))]" />
+
+          <div className="h-5 w-px bg-[rgb(var(--border))]" />
 
           <button
             onClick={handleFormat}
             disabled={isLoading || !isValidJson}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-[rgb(var(--foreground))] hover:bg-[rgb(var(--surface-hover))] rounded-md transition-colors disabled:opacity-50"
+            className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-[rgb(var(--muted))] hover:text-[rgb(var(--foreground))] hover:bg-[rgb(var(--surface-hover))] rounded-lg transition-colors disabled:opacity-50"
             title="Format JSON (Ctrl+Shift+F)"
           >
             <Wand2 className="h-4 w-4" />
             Format
           </button>
 
           <div className="flex-1" />
-          
+
           {!isValidJson && (
             <span className="flex items-center gap-1.5 text-xs text-[rgb(var(--error))] px-2 font-medium">
               <AlertTriangle className="h-3 w-3" />
               {validationErrors.length > 0 ? 'Schema Error' : 'Invalid JSON'}
             </span>
           )}
+
+          <span className="text-xs text-[rgb(var(--muted))]">
+            Ctrl+S save &middot; Ctrl+Shift+F format
+          </span>
         </div>
 
         {/* Editor Area */}

apps/desktop/src/components/OAuthConsentModal.tsx

@@ -16,7 +16,7 @@ import { listen } from '@tauri-apps/api/event';
 import { Check, X, AlertCircle, Loader2, Globe, Lock } from 'lucide-react';
 import { Button, Card, CardHeader, CardTitle, CardDescription, CardContent } from '@mcpmux/ui';
 import { listSpaces, type Space } from '@/lib/api/spaces';
-import { useAppStore } from '@/stores';
+import { useNavigateTo } from '@/stores';
 import { resolveKnownClientKey } from '@/lib/clientIcons';
 import cursorIcon from '@/assets/client-icons/cursor.svg';
 import vscodeIcon from '@/assets/client-icons/vscode.png';
@@ -123,6 +123,7 @@ export function OAuthConsentModal() {
   const [processError, setProcessError] = useState<string | null>(null);
   /** 2-second cooldown before the Approve button becomes active */
   const [approveReady, setApproveReady] = useState(false);
+  const navigateTo = useNavigateTo();
 
   // Load spaces when modal opens
   useEffect(() => {
@@ -293,7 +294,6 @@ export function OAuthConsentModal() {
 
   // Approved state - show success with next-step guidance
   if (modalState.type === 'approved') {
-    const navigateTo = useAppStore.getState().navigateTo;
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
         <Card className="animate-in fade-in zoom-in mx-4 w-full max-w-md shadow-xl duration-200">
@@ -320,21 +320,21 @@ export function OAuthConsentModal() {
             <div className="flex gap-3">
               <Button
                 variant="secondary"
-                className="flex-1"
                 onClick={handleDismiss}
               >
                 Later
               </Button>
               <Button
                 variant="primary"
-                className="flex-1"
+                className="flex-1 whitespace-nowrap"
                 onClick={() => {
                   navigateTo('clients');
                   handleDismiss();
                 }}
                 data-testid="go-to-clients-btn"
               >
-                Manage Permissions →
+                Manage Permissions
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
               </Button>
             </div>
           </CardContent>

apps/desktop/src/components/ServerLogViewer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { X, Download, Trash2, RefreshCw } from 'lucide-react';
-import { useToast, ToastContainer } from '@mcpmux/ui';
+import { useToast, ToastContainer, useConfirm } from '@mcpmux/ui';
 import { getServerLogs, clearServerLogs, getServerLogFile, type ServerLogEntry } from '@/lib/api/logs';
 
 interface ServerLogViewerProps {
@@ -41,6 +41,7 @@ export function ServerLogViewer({ serverId, serverName, onClose }: ServerLogView
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const shouldScrollRef = useRef(true);
   const { toasts, success, error: showError, dismiss } = useToast();
+  const { confirm, ConfirmDialogElement } = useConfirm();
 
   const loadLogs = async () => {
     try {
@@ -93,7 +94,12 @@ export function ServerLogViewer({ serverId, serverName, onClose }: ServerLogView
   };
 
   const handleClearLogs = async () => {
-    if (!confirm('Clear all logs for this server? This cannot be undone.')) {
+    if (!await confirm({
+      title: 'Clear logs',
+      message: `Clear all logs for "${serverName}"? This cannot be undone.`,
+      confirmLabel: 'Clear',
+      variant: 'danger',
+    })) {
       return;
     }
 
@@ -135,6 +141,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} />
+      {ConfirmDialogElement}
       <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/features/clients/ClientsPage.tsx

@@ -32,6 +32,7 @@ import {
   Button,
   useToast,
   ToastContainer,
+  useConfirm,
 } from '@mcpmux/ui';
 import type { OAuthClient, UpdateClientRequest } from '@/lib/api/gateway';
 import { listOAuthClients, updateOAuthClient, deleteOAuthClient } from '@/lib/api/gateway';
@@ -120,7 +121,8 @@ export default function ClientsPage() {
   const [selectedClient, setSelectedClient] = useState<OAuthClient | null>(null);
 
   const { toasts, success, error: showError, info, dismiss } = useToast();
-  
+  const { confirm, ConfirmDialogElement } = useConfirm();
+
   // Edit state
   const [editAlias, setEditAlias] = useState('');
   const [editMode, setEditMode] = useState('follow_active');
@@ -383,9 +385,14 @@ 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 name = deletedClient?.client_alias || deletedClient?.client_name || 'this client';
+    if (!await confirm({
+      title: 'Remove client',
+      message: `Remove "${name}"? All tokens will be revoked.`,
+      confirmLabel: 'Remove',
+      variant: 'danger',
+    })) return;
     const clientName = deletedClient?.client_alias || deletedClient?.client_name || 'Client';
 
     try {
@@ -1321,6 +1328,7 @@ export default function ClientsPage() {
       )}
 
       <ToastContainer toasts={toasts} onClose={dismiss} />
+      {ConfirmDialogElement}
     </div>
   );
 }

apps/desktop/src/features/featuresets/FeatureSetPanel.tsx

@@ -20,7 +20,7 @@ import {
   Shield,
   Save,
 } from 'lucide-react';
-import { Button, useToast, ToastContainer } from '@mcpmux/ui';
+import { Button, useToast, ToastContainer, useConfirm } from '@mcpmux/ui';
 import type { FeatureSet, AddMemberInput } from '@/lib/api/featureSets';
 import { setFeatureSetMembers } from '@/lib/api/featureSets';
 import type { ServerFeature } from '@/lib/api/serverFeatures';
@@ -49,6 +49,7 @@ export function FeatureSetPanel({ featureSet, spaceId, onClose, onDelete, onUpda
   const [error, setError] = useState<string | null>(null);
   const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
   const { toasts, success, error: showError, dismiss } = useToast();
+  const { confirm, ConfirmDialogElement } = useConfirm();
 
   // Collapsible sections - only one expanded at a time, features by default
   const [expandedSections, setExpandedSections] = useState({
@@ -279,6 +280,7 @@ export function FeatureSetPanel({ featureSet, spaceId, onClose, onDelete, onUpda
   return (
     <div className="fixed right-0 top-0 bottom-0 w-full max-w-[45%] min-w-[600px] bg-[rgb(var(--surface))] border-l border-[rgb(var(--border))] shadow-2xl flex flex-col animate-in slide-in-from-right duration-300 z-50">
       <ToastContainer toasts={toasts} onClose={dismiss} />
+      {ConfirmDialogElement}
       {/* Panel Header */}
       <div className="flex-shrink-0 p-4 border-b border-[rgb(var(--border))] bg-[rgb(var(--surface-elevated))]">
         <div className="flex items-start justify-between mb-3">
@@ -598,8 +600,13 @@ export function FeatureSetPanel({ featureSet, spaceId, onClose, onDelete, onUpda
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => {
-              if (confirm('Delete this feature set?')) {
+            onClick={async () => {
+              if (await confirm({
+                title: 'Delete feature set',
+                message: `Delete "${featureSet.name}"? This cannot be undone.`,
+                confirmLabel: 'Delete',
+                variant: 'danger',
+              })) {
                 onDelete(featureSet.id);
               }
             }}

apps/desktop/src/features/servers/ServersPage.tsx

@@ -847,9 +847,9 @@ export function ServersPage() {
         {viewSpace && (
           <button
             onClick={() => setEditConfigSpace({ id: viewSpace.id, name: viewSpace.name })}
-            className="flex items-center gap-2 px-4 py-2 text-sm border border-[rgb(var(--border))] rounded-lg hover:bg-[rgb(var(--surface-hover))] transition-colors"
+            className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-[rgb(var(--surface-elevated))] border border-[rgb(var(--border))] hover:bg-[rgb(var(--surface-hover))] hover:border-[rgb(var(--border-subtle))] shadow-sm hover:shadow transition-all"
           >
-            <FileJson className="h-4 w-4" />
+            <FileJson className="h-4 w-4 text-[rgb(var(--primary))]" />
             Add Custom Server
           </button>
         )}
@@ -893,10 +893,11 @@ export function ServersPage() {
           <p className="text-lg mb-2">No servers installed</p>
           <button
             onClick={() => navigateTo('registry')}
-            className="mt-3 px-6 py-2.5 rounded-lg text-sm font-semibold text-white bg-gradient-to-r from-primary-500 to-purple-500 hover:from-primary-600 hover:to-purple-600 shadow-md hover:shadow-lg transition-all hover:scale-[1.03]"
+            className="mt-3 inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))] hover:bg-[rgb(var(--primary-hover))] shadow-sm hover:shadow transition-all"
             data-testid="discover-servers-btn"
           >
             Discover MCP Servers
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
           </button>
         </div>
       ) : (

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

@@ -16,6 +16,7 @@ import {
   Button,
   useToast,
   ToastContainer,
+  useConfirm,
 } from '@mcpmux/ui';
 import {
   useAppStore,
@@ -39,6 +40,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 { confirm, ConfirmDialogElement } = useConfirm();
   const { toasts, success, error: showError, dismiss } = useToast();
 
   // Create Modal State
@@ -69,7 +71,13 @@ export function SpacesPage() {
   };
 
   const handleDelete = async (id: string) => {
-    if (!confirm('Are you sure you want to delete this space? This action cannot be undone.')) return;
+    const spaceName = spaces.find(s => s.id === id)?.name || 'this space';
+    if (!await confirm({
+      title: 'Delete workspace',
+      message: `Are you sure you want to delete "${spaceName}"? This action cannot be undone.`,
+      confirmLabel: 'Delete',
+      variant: 'danger',
+    })) return;
 
     setIsActionLoading(id);
     setError(null);
@@ -117,6 +125,7 @@ export function SpacesPage() {
   return (
     <>
     <ToastContainer toasts={toasts} onClose={dismiss} />
+    {ConfirmDialogElement}
     <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))]">