fix: auto-open client panel when navigating from Manage Permissions

After OAuth approval, clicking "Manage Permissions" now sets a
pendingClientId in the store. When ClientsPage mounts and loads data,
it detects the pending ID and auto-opens that client's detail panel
so the user can configure permissions immediately.

Also adds e2e tests for the ConfirmDialog component verifying that
delete prompts appear, cancel dismisses without action, and overlay
click dismisses.

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/OAuthConsentModal.tsx

@@ -16,7 +16,7 @@ import { listen, emit } 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 { useNavigateTo } from '@/stores';
+import { useNavigateTo, useSetPendingClientId } from '@/stores';
 import { resolveKnownClientKey } from '@/lib/clientIcons';
 import cursorIcon from '@/assets/client-icons/cursor.svg';
 import vscodeIcon from '@/assets/client-icons/vscode.png';
@@ -74,7 +74,7 @@ type ModalState =
   | { type: 'loading'; requestId: string }
   | { type: 'error'; requestId: string; error: ConsentError }
   | { type: 'consent'; details: ConsentRequestDetails }
-  | { type: 'approved'; clientName: string };
+  | { type: 'approved'; clientName: string; clientId: string };
 
 /** Open a URL using the backend open command (handles custom protocols like cursor://) */
 async function openRedirectUrl(url: string): Promise<void> {
@@ -124,6 +124,7 @@ export function OAuthConsentModal() {
   /** 2-second cooldown before the Approve button becomes active */
   const [approveReady, setApproveReady] = useState(false);
   const navigateTo = useNavigateTo();
+  const setPendingClientId = useSetPendingClientId();
 
   // Load spaces when modal opens
   useEffect(() => {
@@ -199,7 +200,7 @@ export function OAuthConsentModal() {
       if (response.success && response.redirect_url) {
         console.log('[OAuth] Approved, redirecting to:', response.redirect_url);
         await openRedirectUrl(response.redirect_url);
-        setModalState({ type: 'approved', clientName: clientAlias || details.clientName });
+        setModalState({ type: 'approved', clientName: clientAlias || details.clientName, clientId: details.clientId });
       } else {
         setProcessError(response.error || 'Failed to approve consent');
       }
@@ -328,6 +329,7 @@ export function OAuthConsentModal() {
                 variant="primary"
                 className="flex-1 whitespace-nowrap"
                 onClick={() => {
+                  setPendingClientId(modalState.clientId);
                   handleDismiss();
                   navigateTo('clients');
                   // Emit event after a short delay so ClientsPage has time to mount

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

@@ -38,7 +38,7 @@ import type { OAuthClient, UpdateClientRequest } from '@/lib/api/gateway';
 import { listOAuthClients, updateOAuthClient, deleteOAuthClient } from '@/lib/api/gateway';
 import type { Space } from '@/lib/api/spaces';
 import { listSpaces } from '@/lib/api/spaces';
-import { useViewSpace } from '@/stores';
+import { useViewSpace, usePendingClientId, useSetPendingClientId } from '@/stores';
 import type { FeatureSet } from '@/lib/api/featureSets';
 import { listFeatureSetsBySpace } from '@/lib/api/featureSets';
 import { 
@@ -122,6 +122,8 @@ export default function ClientsPage() {
 
   const { toasts, success, error: showError, info, dismiss } = useToast();
   const { confirm, ConfirmDialogElement } = useConfirm();
+  const pendingClientId = usePendingClientId();
+  const setPendingClientId = useSetPendingClientId();
 
   // Edit state
   const [editAlias, setEditAlias] = useState('');
@@ -267,6 +269,16 @@ export default function ClientsPage() {
     loadData();
   }, []);
 
+  // Auto-open a client panel when navigated from "Manage Permissions"
+  useEffect(() => {
+    if (!pendingClientId || isLoading) return;
+    const client = oauthClients.find(c => c.client_id === pendingClientId);
+    if (client) {
+      openPanel(client);
+      setPendingClientId(null);
+    }
+  }, [pendingClientId, isLoading, oauthClients]);
+
   useEffect(() => {
     setActiveSpace(viewSpace);
   }, [viewSpace?.id]);

apps/desktop/src/stores/appStore.ts

@@ -8,6 +8,7 @@ const initialState: AppState = {
   activeSpaceId: null,
   viewSpaceId: null,
   activeNav: 'home',
+  pendingClientId: null,
   sidebarCollapsed: false,
   theme: 'system',
   analyticsEnabled: true,
@@ -92,6 +93,11 @@ export const useAppStore = create<AppStore>()(
           state.activeNav = nav;
         }),
 
+      setPendingClientId: (id) =>
+        set((state) => {
+          state.pendingClientId = id;
+        }),
+
       // UI
       toggleSidebar: () =>
         set((state) => {

apps/desktop/src/stores/selectors.ts

@@ -7,6 +7,8 @@ export const useActiveSpaceId = () => useAppStore((state) => state.activeSpaceId
 export const useViewSpaceId = () => useAppStore((state) => state.viewSpaceId);
 export const useActiveNav = () => useAppStore((state) => state.activeNav);
 export const useNavigateTo = () => useAppStore((state) => state.navigateTo);
+export const usePendingClientId = () => useAppStore((state) => state.pendingClientId);
+export const useSetPendingClientId = () => useAppStore((state) => state.setPendingClientId);
 export const useTheme = () => useAppStore((state) => state.theme);
 export const useSidebarCollapsed = () => useAppStore((state) => state.sidebarCollapsed);
 export const useAnalyticsEnabled = () => useAppStore((state) => state.analyticsEnabled);

apps/desktop/src/stores/types.ts

@@ -10,6 +10,8 @@ export interface AppState {
 
   // Navigation
   activeNav: NavItem;
+  /** Client ID to auto-select when navigating to Clients page */
+  pendingClientId: string | null;
 
   // UI state
   sidebarCollapsed: boolean;
@@ -34,6 +36,7 @@ export interface AppActions {
 
   // Navigation
   navigateTo: (nav: NavItem) => void;
+  setPendingClientId: (id: string | null) => void;
 
   // UI
   toggleSidebar: () => void;

tests/e2e/specs/confirm-dialog.spec.ts

@@ -0,0 +1,113 @@
+import { test, expect } from '@playwright/test';
+import { DashboardPage, SpacesPage, ClientsPage } from '../pages';
+
+// Helper to click Spaces in sidebar (avoids space switcher button)
+async function goToSpaces(page: import('@playwright/test').Page) {
+  await page.locator('nav button:has-text("Spaces")').last().click();
+}
+
+test.describe('ConfirmDialog – Spaces', () => {
+  test('should show confirm dialog when clicking delete on a non-default space', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+    await goToSpaces(page);
+    await expect(page.locator('h1:has-text("Workspaces")')).toBeVisible();
+
+    // Look for a delete button
+    const deleteBtn = page.locator('[data-testid^="delete-space-"]').first();
+    if (await deleteBtn.isVisible().catch(() => false)) {
+      await deleteBtn.click();
+
+      // Confirm dialog should appear
+      await expect(page.getByTestId('confirm-dialog')).toBeVisible();
+      await expect(page.getByTestId('confirm-dialog-confirm')).toBeVisible();
+      await expect(page.getByTestId('confirm-dialog-cancel')).toBeVisible();
+
+      // Title should mention delete
+      await expect(page.getByTestId('confirm-dialog').locator('h3')).toContainText(/[Dd]elete/);
+    }
+  });
+
+  test('should dismiss confirm dialog on cancel without deleting', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+    await goToSpaces(page);
+    await expect(page.locator('h1:has-text("Workspaces")')).toBeVisible();
+
+    const deleteBtn = page.locator('[data-testid^="delete-space-"]').first();
+    if (await deleteBtn.isVisible().catch(() => false)) {
+      // Count spaces before
+      const spaceBefore = await page.locator('[data-testid^="space-card-"]').count();
+
+      await deleteBtn.click();
+      await expect(page.getByTestId('confirm-dialog')).toBeVisible();
+
+      // Click cancel
+      await page.getByTestId('confirm-dialog-cancel').click();
+
+      // Dialog should close
+      await expect(page.getByTestId('confirm-dialog')).not.toBeVisible();
+
+      // Space count should be the same (nothing was deleted)
+      const spaceAfter = await page.locator('[data-testid^="space-card-"]').count();
+      expect(spaceAfter).toBe(spaceBefore);
+    }
+  });
+
+  test('should dismiss confirm dialog when clicking overlay', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+    await goToSpaces(page);
+    await expect(page.locator('h1:has-text("Workspaces")')).toBeVisible();
+
+    const deleteBtn = page.locator('[data-testid^="delete-space-"]').first();
+    if (await deleteBtn.isVisible().catch(() => false)) {
+      await deleteBtn.click();
+      await expect(page.getByTestId('confirm-dialog')).toBeVisible();
+
+      // Click overlay (outside the dialog)
+      await page.getByTestId('confirm-dialog-overlay').click({ position: { x: 5, y: 5 } });
+
+      // Dialog should close
+      await expect(page.getByTestId('confirm-dialog')).not.toBeVisible();
+    }
+  });
+});
+
+test.describe('ConfirmDialog – Clients', () => {
+  test('should show confirm dialog when clicking Remove Client', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+    await page.locator('nav button:has-text("Clients")').click();
+    await expect(page.getByRole('heading', { name: 'Connected Clients' })).toBeVisible();
+
+    // Click the first client card to open the detail panel
+    const clientCards = page.locator('[data-testid^="client-card-"]');
+    const count = await clientCards.count();
+
+    if (count > 0) {
+      await clientCards.first().click();
+
+      // Wait for panel to open
+      await page.waitForTimeout(300);
+
+      // Find the Remove Client button in the panel
+      const removeBtn = page.getByRole('button', { name: /Remove Client/i });
+      if (await removeBtn.isVisible().catch(() => false)) {
+        await removeBtn.click();
+
+        // Confirm dialog should appear
+        await expect(page.getByTestId('confirm-dialog')).toBeVisible();
+        await expect(page.getByTestId('confirm-dialog-confirm')).toHaveText(/Remove/i);
+
+        // Cancel should dismiss without removing
+        await page.getByTestId('confirm-dialog-cancel').click();
+        await expect(page.getByTestId('confirm-dialog')).not.toBeVisible();
+
+        // Client should still be there
+        const countAfter = await clientCards.count();
+        expect(countAfter).toBe(count);
+      }
+    }
+  });
+});

tests/ts/stores/appStore.test.ts

@@ -10,6 +10,7 @@ describe('appStore', () => {
       activeSpaceId: null,
       viewSpaceId: null,
       activeNav: 'home',
+      pendingClientId: null,
       sidebarCollapsed: false,
       theme: 'system',
       loading: { spaces: false, servers: false },
@@ -299,6 +300,18 @@ describe('appStore', () => {
     });
   });
 
+  describe('setPendingClientId', () => {
+    it('should set and clear pending client id', () => {
+      expect(useAppStore.getState().pendingClientId).toBeNull();
+
+      useAppStore.getState().setPendingClientId('client-123');
+      expect(useAppStore.getState().pendingClientId).toBe('client-123');
+
+      useAppStore.getState().setPendingClientId(null);
+      expect(useAppStore.getState().pendingClientId).toBeNull();
+    });
+  });
+
   describe('setLoading', () => {
     it('should set spaces loading state', () => {
       useAppStore.getState().setLoading('spaces', true);