@@ -1,12 +1,32 @@
 import './style.scss';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { useEffect } from 'react';
 import { Button } from '../../../shared/components/Button/Button';
 import { ButtonSize, ButtonVariant } from '../../../shared/components/Button/types';
 import { Icon, IconKind } from '../../../shared/components/Icon';
 import { WindowHeader } from '../../../shared/components/WindowHeader/WindowHeader';
 import { api } from '../../../shared/rust-api/api';
+import {
+  getInstancesQueryOptions,
+  getTunnelsQueryOptions,
+} from '../../../shared/rust-api/query';
 import { CompactPage } from '../CompactPage/CompactPage';
 
 export const CompactEmptyPage = () => {
+  const navigate = useNavigate();
+
+  const { data: instances } = useQuery(getInstancesQueryOptions);
+  const { data: tunnels } = useQuery(getTunnelsQueryOptions);
+
+  const hasAny = (instances?.length ?? 0) > 0 || (tunnels?.length ?? 0) > 0;
+
+  useEffect(() => {
+    if (hasAny) {
+      void navigate({ to: '/compact', replace: true });
+    }
+  }, [hasAny, navigate]);
+
   return (
     <CompactPage containerProps={{ id: 'compact-empty-page' }}>
       <WindowHeader variant="compact" />
 
@@ -1,22 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { useEffect } from 'react';
-
-import { hasAnyVisibleLocationsQueryOptions } from '../shared/rust-api/query';
+import { createFileRoute } from '@tanstack/react-router';
+import { CompactEmptyPage } from '../pages/compact/CompactEmptyPage/CompactEmptyPage';
 
 export const Route = createFileRoute('/empty')({
-  component: RouteComponent,
+  component: CompactEmptyPage,
 });
-
-function RouteComponent() {
-  const navigate = useNavigate();
-  const { data: hasLocations } = useQuery(hasAnyVisibleLocationsQueryOptions);
-
-  useEffect(() => {
-    if (hasLocations === true) {
-      void navigate({ to: '/' });
-    }
-  }, [hasLocations, navigate]);
-
-  return <div></div>;
-}
@@ -6,6 +6,7 @@ import { error } from '@tauri-apps/plugin-log';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../../../rust-api/api';
 import {
+  isCancelled,
   isConnectFailure,
   isMfaPostureError,
   isServiceUnavailable,
@@ -14,6 +15,7 @@ import {
 import { getInstancesQueryOptions } from '../../../rust-api/query';
 import type { LocationInfo, MfaErrorPayload } from '../../../rust-api/types';
 import { MfaMethod, TauriEvent } from '../../../rust-api/types';
+import { isPresent } from '../../../utils/isPresent';
 
 type TokenData = {
   token: string;
@@ -27,10 +29,18 @@ type Options = {
 };
 
 export const useMfaMobileConnect = (location: LocationInfo, options?: Options) => {
-  const { onConnected, onPostureError, onServiceUnavailable } = options ?? {};
-
   const { data: instances } = useQuery(getInstancesQueryOptions);
   const instance = instances?.find((i) => i.id === location.instance_id);
+  const instanceId = instance?.id;
+  const instanceUuid = instance?.uuid;
+  const locationId = location.id;
+
+  // Read through refs so callers passing inline callbacks or a re-fetched
+  // `location` object don't restart the mobile-approve task on every render.
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const locationRef = useRef(location);
+  locationRef.current = location;
 
   const [isStarting, setIsStarting] = useState(false);
   const [startError, setStartError] = useState<string | null>(null);
@@ -61,7 +71,7 @@ export const useMfaMobileConnect = (location: LocationInfo, options?: Options) =
 
   // Connect WebSocket via Rust when tokenData is available
   useEffect(() => {
-    if (!tokenData || !instance) return;
+    if (!tokenData || !isPresent(instanceId)) return;
 
     let cancelled = false;
     cleanupListeners();
@@ -71,8 +81,8 @@ export const useMfaMobileConnect = (location: LocationInfo, options?: Options) =
     (async () => {
       try {
         const taskId = await api.mfaConnectMobileApprove(
-          instance.id,
-          location.id,
+          instanceId,
+          locationId,
           tokenData.token,
         );
         if (cancelled) {
@@ -84,18 +94,20 @@ export const useMfaMobileConnect = (location: LocationInfo, options?: Options) =
         // The backend brings up the connection itself; completion means connected.
         const completeUnlisten = await listen(TauriEvent.MfaMobileComplete, () => {
           cleanupListeners();
+          taskIdRef.current = null;
           setIsConnecting(false);
-          onConnected?.();
+          optionsRef.current?.onConnected?.();
         });
 
         const errorUnlisten = await listen<MfaErrorPayload>(
           TauriEvent.MfaMobileError,
           (event) => {
+            // Emitted app-wide without a task id, so our own cancels land here.
+            if (isCancelled(event.payload.error)) return;
             cleanupListeners();
+            taskIdRef.current = null;
             setIsConnecting(false);
-            error(
-              `Mobile MFA failed for location ${location.id}: ${event.payload.error}`,
-            );
+            error(`Mobile MFA failed for location ${locationId}: ${event.payload.error}`);
             const message = mfaErrorMessage(event.payload.error);
             setConnectionError(
               isConnectFailure(message)
@@ -113,30 +125,35 @@ export const useMfaMobileConnect = (location: LocationInfo, options?: Options) =
         if (!cancelled) {
           setIsConnecting(false);
           setConnectionError('Failed to start mobile approval. Please try again.');
-          error(`Mobile MFA connect failed for location ${location.id}: ${e}`);
+          error(`Mobile MFA connect failed for location ${locationId}: ${e}`);
         }
       }
     })();
 
     return () => {
       cancelled = true;
       cleanupListeners();
+      const taskId = taskIdRef.current;
+      if (taskId) {
+        taskIdRef.current = null;
+        void api.cancelMfa(taskId).catch(() => {});
+      }
       setIsConnecting(false);
     };
-  }, [tokenData, instance, location, onConnected, cleanupListeners]);
+  }, [tokenData, instanceId, locationId, cleanupListeners]);
 
   const qrValue = useMemo(() => {
-    if (!tokenData || !instance) return null;
+    if (!tokenData || !isPresent(instanceUuid)) return null;
     const json = JSON.stringify({
       token: tokenData.token,
       challenge: tokenData.challenge,
-      instance_id: instance.uuid,
+      instance_id: instanceUuid,
     });
     return encode(new TextEncoder().encode(json));
-  }, [tokenData, instance]);
+  }, [tokenData, instanceUuid]);
 
   const start = useCallback(async () => {
-    if (!instance) {
+    if (!isPresent(instanceId)) {
       setStartError('Instance not found');
       return;
     }
@@ -148,28 +165,28 @@ export const useMfaMobileConnect = (location: LocationInfo, options?: Options) =
     setTokenData(null);
 
     try {
-      const info = await api.mfaStart(instance.id, location.id, MfaMethod.MobileApprove);
+      const info = await api.mfaStart(instanceId, locationId, MfaMethod.MobileApprove);
       if (!info.challenge) {
         setStartError('Unsupported response from proxy');
         return;
       }
 
       setTokenData({ token: info.token, challenge: info.challenge });
     } catch (e) {
-      void error(`Mobile MFA start failed for location ${location.id}: ${e}`);
-      if (isMfaPostureError(e, location)) {
-        onPostureError?.(mfaErrorMessage(e));
+      void error(`Mobile MFA start failed for location ${locationId}: ${e}`);
+      if (isMfaPostureError(e, locationRef.current)) {
+        optionsRef.current?.onPostureError?.(mfaErrorMessage(e));
         return;
       }
       if (isServiceUnavailable(e)) {
-        onServiceUnavailable?.();
+        optionsRef.current?.onServiceUnavailable?.();
         return;
       }
       setStartError(mfaErrorMessage(e));
     } finally {
       setIsStarting(false);
     }
-  }, [instance, location, onPostureError, onServiceUnavailable]);
+  }, [instanceId, locationId]);
 
   const reset = useCallback(() => {
     cleanupListeners();
 
@@ -5,6 +5,7 @@ import { error } from '@tauri-apps/plugin-log';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { api } from '../../../rust-api/api';
 import {
+  isCancelled,
   isConnectFailure,
   isMfaPostureError,
   isServiceUnavailable,
@@ -81,6 +82,8 @@ export const useMfaOidcConnect = () => {
       const errorUnlisten = await listen<MfaErrorPayload>(
         TauriEvent.MfaOpenIdError,
         (event) => {
+          // Emitted app-wide without a task id, so our own cancels land here.
+          if (isCancelled(event.payload.error)) return;
           cleanup();
           setIsPolling(false);
           error(`OIDC MFA failed for location ${location.id}: ${event.payload.error}`);
 
@@ -37,6 +37,10 @@ export const isSessionExpired = (message: string): boolean =>
 export const isTimeout = (err: unknown): boolean =>
   parseMfaError(err)?.type === 'timeout';
 
+/** The task was cancelled via `cancel_mfa`, not a user-facing failure. */
+export const isCancelled = (err: unknown): boolean =>
+  parseMfaError(err)?.type === 'cancelled';
+
 /** A submitted one-time code was rejected. */
 export const isInvalidCode = (message: string): boolean =>
   message.includes('Unauthorized');