refactor(frontend): contract flow (#8131)

* feat(contract): export wire contract from backend and generate frontend types

Adds a zero-dependency `frontend-contract` bin that serializes the real
NoticeStatus variants and FrontendEvent payloads, scripts/gen-contract.mjs
which emits the committed src/services/contract.ts, and a CI job that
regenerates it and fails on a non-empty diff. events.ts now derives its
event map from the generated contract instead of hand-typed shapes.

* feat(events): route all backend events through a single event bus and store

Adds src/services/bus (the only listen/emit site: one handler per contract
event plus the frontend-internal test-all event) and the React
context/reducer app store. Migrates the five scattered subscriptions
(layout events, pending failures, proxy refresh, profile update/timer,
test-all), deletes the old glue (events.ts, use-listen, use-layout-events,
LoadingCacheProvider), moves run state into the store, and adds an
architecture gate script wired into CI. Behavior is unchanged; the
run-state query's poll/focus safety net is preserved by the store
provider.

* refactor(notice): make the notice table exhaustive and drop dead wire entries

D5 cleanup, frontend and backend in one commit: removes the six
config_validate::* statuses that never receive a backend send and the
set_config::ok send (enum variants, golden list 41→34, send point in
restart_clash_core), their frontend handlers, and the five i18n keys only
those handlers used. The notice table is now typed as a Record over the
generated NoticeStatus union, so a status without a frontend entry fails
to compile. The info status (sent by the silent updater for breaking
change notices, previously dropped with a console warning) now shows an
info toast — the one deliberate behavior delta.

* feat(mutate): single funnel for user-intent commands and invoke gate

Adds src/services/mutate.ts: one path for optimistic apply, services-layer
invoke, Busy handling, failure rollback, and the error toast, with busy
bookkeeping mirrored into the app store. The patch hooks (verge, clash,
profiles) now route through it. Moves the remaining direct invokes
(unlock ×3, DNS ×4) into cmds.ts and turns on the invoke-only-in-services
architecture gate in CI.

* refactor(settings): route settings-domain commands through the mutate funnel

Ports port saving, webdav/local backup operations, core change/restart/
upgrade, service install/uninstall/repair flows, the system-proxy toggle
queue, the DNS override toggle, and app lifecycle commands onto the single
funnel. Bespoke flows keep their own error handling via errorNotice:false;
simple flows gain the funnel's default error toast and revalidation.

* refactor(profiles): route profile operations through the mutate funnel

Ports profile create/import/reorder/delete/update/patch/save-file and
enhance calls onto the funnel; retry and editor flows keep their own
error handling with errorNotice:false. Per-uid ids keep the update
worker pool concurrent under the funnel's in-flight dedupe.

* refactor(proxies): route proxy/home/misc commands through the mutate funnel

Ports mode switching (page and home card), chain runtime updates, node
selection with tray sync, selection recording, provider updates and
syncs, and lightweight-mode entry onto the funnel; every site keeps its
existing optimistic/revert and error-handling behavior.

* docs: add frontend architecture guardrails for src

Layering rules for the contract flow: generated contract as the only
wire-typing source, event bus as the only listen/emit site, pure-reducer
store for event-derived state, the mutate funnel for user intent, and
invoke only in the services layer — each backed by the CI gates.

* fix(events): close run-state race and restore single error toasts

Self-review findings: the bus now re-reads the run-state snapshot in
onSubscribed so an event racing the store's initial read cannot leave a
stale snapshot (the ordering the old layout listener guaranteed), and the
patch hooks pass errorNotice:false so GuardState/page handlers remain the
only error toast, matching the pre-migration behavior.

* fix(frontend): preserve queued intents and fresh runtime snapshots

* refactor(frontend): trim unused mutation and busy state APIs

* docs(frontend): focus guardrails on architecture ownership

src/components/setting/mods/backup-config-viewer.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from 'react-i18next'
 
 import { useVerge } from '@/hooks/use-verge'
 import { saveWebdavConfig, createWebdavBackup } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { errorDetail, showNotice } from '@/services/notice-service'
 import {
   buildWebdavSignature,
@@ -119,7 +120,13 @@ export const BackupConfigViewer = memo(
 
       try {
         setLoading(true)
-        await saveWebdavConfig(trimmedUrl, trimmedUsername, data.password)
+        await mutate(
+          () => saveWebdavConfig(trimmedUrl, trimmedUsername, data.password),
+          {
+            id: 'save-webdav-config',
+            errorNotice: false,
+          },
+        )
         await mutateVerge(
           (current) =>
             current
@@ -156,7 +163,10 @@ export const BackupConfigViewer = memo(
 
       try {
         setLoading(true)
-        await createWebdavBackup().then(async () => {
+        await mutate(() => createWebdavBackup(), {
+          id: 'create-webdav-backup',
+          errorNotice: false,
+        }).then(async () => {
           showNotice.success('settings.modals.backup.messages.backupCreated')
           await onBackupSuccess()
         })

src/components/setting/mods/backup-history-viewer.tsx

@@ -35,6 +35,7 @@ import {
   restoreLocalBackup,
   restoreWebDavBackup,
 } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import {
   buildWebdavSignature,
@@ -228,23 +229,38 @@ export const BackupHistoryViewer = ({
     try {
       if (action === 'delete') {
         if (actionIsLocal) {
-          await deleteLocalBackup(filename)
+          await mutate(() => deleteLocalBackup(filename), {
+            id: 'delete-local-backup',
+            errorNotice: false,
+          })
         } else {
-          await deleteWebdavBackup(filename)
+          await mutate(() => deleteWebdavBackup(filename), {
+            id: 'delete-webdav-backup',
+            errorNotice: false,
+          })
         }
         setPendingConfirmation(null)
         await fetchRows()
       } else {
         if (actionIsLocal) {
-          await restoreLocalBackup(filename)
+          await mutate(() => restoreLocalBackup(filename), {
+            id: 'restore-local-backup',
+            errorNotice: false,
+          })
         } else {
-          await restoreWebDavBackup(filename)
+          await mutate(() => restoreWebDavBackup(filename), {
+            id: 'restore-webdav-backup',
+            errorNotice: false,
+          })
         }
         setPendingConfirmation(null)
         showNotice.success('settings.modals.backup.messages.restoreSuccess')
         setIsRestarting(true)
         window.setTimeout(() => {
-          void restartApp().catch((err: unknown) => {
+          void mutate(() => restartApp(), {
+            id: 'restart-app',
+            errorNotice: false,
+          }).catch((err: unknown) => {
             setIsRestarting(false)
             showNotice.error(err)
           })
@@ -265,8 +281,11 @@ export const BackupHistoryViewer = ({
     const savePath = await save({ defaultPath: filename })
     if (!savePath || Array.isArray(savePath)) return
     try {
-      await exportLocalBackup(filename, savePath)
-      showNotice.success('settings.modals.backup.messages.localBackupExported')
+      await mutate(() => exportLocalBackup(filename, savePath), {
+        id: 'export-local-backup',
+        errorNotice: false,
+        successNotice: 'settings.modals.backup.messages.localBackupExported',
+      })
     } catch (ignoreError: unknown) {
       showNotice.error(
         'settings.modals.backup.messages.localBackupExportFailed',

src/components/setting/mods/backup-viewer.tsx

@@ -19,6 +19,7 @@ import {
   createWebdavBackup,
   importLocalBackup,
 } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { errorDetail, showNotice } from '@/services/notice-service'
 import { buildWebdavSignature, setWebdavStatus } from '@/services/webdav-status'
 
@@ -55,12 +56,18 @@ export function BackupViewer({ ref }: { ref?: Ref<DialogRef> }) {
     try {
       setBusyAction(target)
       if (target === 'local') {
-        await createLocalBackup()
-        showNotice.success('settings.modals.backup.messages.localBackupCreated')
+        await mutate(() => createLocalBackup(), {
+          id: 'create-local-backup',
+          errorNotice: false,
+          successNotice: 'settings.modals.backup.messages.localBackupCreated',
+        })
       } else {
-        await createWebdavBackup()
-        showNotice.success('settings.modals.backup.messages.backupCreated')
-        setWebdavStatus(webdavSignature, 'ready')
+        await mutate(() => createWebdavBackup(), {
+          id: 'create-webdav-backup',
+          errorNotice: false,
+          successNotice: 'settings.modals.backup.messages.backupCreated',
+          onFulfilled: () => setWebdavStatus(webdavSignature, 'ready'),
+        })
       }
     } catch (error) {
       console.error(error)
@@ -86,8 +93,11 @@ export function BackupViewer({ ref }: { ref?: Ref<DialogRef> }) {
     if (!selected || Array.isArray(selected)) return
     try {
       setLocalImporting(true)
-      await importLocalBackup(selected)
-      showNotice.success('settings.modals.backup.messages.localBackupImported')
+      await mutate(() => importLocalBackup(selected), {
+        id: 'import-local-backup',
+        errorNotice: false,
+        successNotice: 'settings.modals.backup.messages.localBackupImported',
+      })
       openHistory('local')
     } catch (error) {
       console.error(error)

src/components/setting/mods/clash-core-viewer.tsx

@@ -21,6 +21,7 @@ import { BaseDialog, DialogRef } from '@/components/base'
 import { useClash, useClashInfo } from '@/hooks/use-clash'
 import { useVerge } from '@/hooks/use-verge'
 import { changeClashCore, restartCore, upgradeClashCore } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 
 const VALID_CORE = [
@@ -60,8 +61,16 @@ export function ClashCoreViewer({ ref }: { ref?: Ref<DialogRef> }) {
 
     try {
       setChangingCore(core)
-      closeAllConnections()
-      const errorMsg = await changeClashCore(core)
+      void mutate(() => closeAllConnections(), {
+        id: 'close-all-connections',
+        errorNotice: false,
+      })
+      const result = await mutate(() => changeClashCore(core), {
+        id: 'change-clash-core',
+        errorNotice: false,
+      })
+      if (!result.ok) return
+      const errorMsg = result.value
 
       if (errorMsg) {
         showNotice.error(errorMsg)
@@ -83,28 +92,33 @@ export function ClashCoreViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const onRestart = useLockFn(async () => {
     try {
       setRestarting(true)
-      await restartCore()
-      showNotice.success(
-        t('settings.feedback.notifications.clash.restartSuccess'),
-      )
+      await mutate(() => restartCore(), {
+        id: 'restart-core',
+        successNotice: t(
+          'settings.feedback.notifications.clash.restartSuccess',
+        ),
+      })
       setRestarting(false)
-    } catch (err) {
+    } catch {
       setRestarting(false)
-      showNotice.error(err)
     }
   })
 
   const onUpgrade = useLockFn(async () => {
     try {
       setUpgrading(true)
-      const report = await upgradeClashCore()
-      showNotice.success(
-        report.upgraded
-          ? t('settings.feedback.notifications.clash.versionUpdated')
-          : t('settings.feedback.notifications.clash.alreadyLatestVersion'),
-      )
-    } catch (err) {
-      showNotice.error(err)
+      await mutate(() => upgradeClashCore(), {
+        id: 'upgrade-clash-core',
+        onFulfilled: (report) => {
+          showNotice.success(
+            report.upgraded
+              ? t('settings.feedback.notifications.clash.versionUpdated')
+              : t('settings.feedback.notifications.clash.alreadyLatestVersion'),
+          )
+        },
+      })
+    } catch {
+      // the funnel already notified
     } finally {
       setUpgrading(false)
     }

src/components/setting/mods/clash-port-viewer.tsx

@@ -17,6 +17,7 @@ import { useClashInfo } from '@/hooks/use-clash'
 import { useDisplayedMixedPort } from '@/hooks/use-displayed-mixed-port'
 import { useVerge } from '@/hooks/use-verge'
 import { type ProxyPortSettings, saveProxyPorts } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import type { TranslationKey } from '@/types/generated/i18n-keys'
 import getSystem from '@/utils/get-system'
@@ -165,22 +166,31 @@ export const ClashPortViewer = forwardRef<ClashPortViewerRef>((_, ref) => {
   ) => setPorts((prev) => ({ ...prev, [key]: { ...prev[key], ...patch } }))
 
   // 添加保存请求，防止GUI卡死
-  const { loading, runAsync: saveSettings } = useRequest(saveProxyPorts, {
-    manual: true,
-    onSuccess: (outcome) => {
-      if (outcome.status === 'conflict') {
-        showNotice.error('settings.modals.clashPort.messages.portInUse', {
-          port: outcome.port,
-        })
-        return
-      }
-      setOpen(false)
-      showNotice.success('settings.modals.clashPort.messages.saved')
+  const { loading, runAsync: saveSettings } = useRequest(
+    async (settings: ProxyPortSettings) =>
+      mutate(() => saveProxyPorts(settings), {
+        id: 'save-proxy-ports',
+        errorNotice: false,
+      }),
+    {
+      manual: true,
+      onSuccess: (result) => {
+        if (!result.ok) return
+        const outcome = result.value
+        if (outcome.status === 'conflict') {
+          showNotice.error('settings.modals.clashPort.messages.portInUse', {
+            port: outcome.port,
+          })
+          return
+        }
+        setOpen(false)
+        showNotice.success('settings.modals.clashPort.messages.saved')
+      },
+      onError: (error) => {
+        showNotice.error('settings.modals.clashPort.messages.saveFailed', error)
+      },
     },
-    onError: (error) => {
-      showNotice.error('settings.modals.clashPort.messages.saveFailed', error)
-    },
-  })
+  )
 
   useImperativeHandle(ref, () => ({
     open: () => {

src/components/setting/mods/dns-viewer.tsx

@@ -13,7 +13,6 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import { invoke } from '@tauri-apps/api/core'
 import { useLockFn } from 'ahooks'
 import * as yaml from 'js-yaml'
 import type { Ref } from 'react'
@@ -36,6 +35,13 @@ import {
 import { useClash } from '@/hooks/use-clash'
 import { useProfiles } from '@/hooks/use-profiles'
 import { useVerge } from '@/hooks/use-verge'
+import {
+  applyDnsConfig,
+  getDnsConfigContent,
+  saveDnsConfig,
+  validateDnsConfig,
+} from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import { useThemeMode } from '@/services/states'
 import type { MonacoEditorInstance } from '@/types/monaco'
@@ -465,10 +471,7 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
 
   const initDnsConfig = useCallback(async () => {
     try {
-      const dnsConfig = await invoke<string | null>(
-        'get_dns_config_content',
-        {},
-      )
+      const dnsConfig = await getDnsConfigContent()
 
       if (dnsConfig !== null) {
         const config = yaml.load(dnsConfig) as any
@@ -517,12 +520,12 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
         config = parsedConfig as Record<string, any>
       }
 
-      await invoke('save_dns_config', { dnsConfig: config })
+      await mutate(() => saveDnsConfig(config), {
+        id: 'save-dns-config',
+        errorNotice: false,
+      })
 
-      const validation = await invoke<ValidationOutcome>(
-        'validate_dns_config',
-        {},
-      )
+      const validation = await validateDnsConfig()
 
       if (validation.status !== 'valid') {
         const errorMsg =
@@ -559,7 +562,10 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
       }
 
       if (dnsEnabled) {
-        await invoke('apply_dns_config', { apply: true })
+        await mutate(() => applyDnsConfig(true), {
+          id: 'apply-dns-config',
+          errorNotice: false,
+        })
         mutateClash()
       }
 

src/components/setting/mods/external-controller-cors.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { BaseDialog, Switch } from '@/components/base'
 import { useClash } from '@/hooks/use-clash'
 import { restartCore } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 
 // Development origins must never be persisted into production configuration.
@@ -135,7 +136,10 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
             ),
           },
         })
-        await restartCore()
+        await mutate(() => restartCore(), {
+          id: 'restart-core',
+          errorNotice: false,
+        })
         await mutateClash()
       },
       {

src/components/setting/mods/layout-viewer.tsx

@@ -22,6 +22,7 @@ import { DEFAULT_HOVER_DELAY } from '@/components/proxy/proxy-group-navigator'
 import { useVerge } from '@/hooks/use-verge'
 import { useWindowDecorations } from '@/hooks/use-window'
 import { copyIconFile, getAppDir } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import getSystem from '@/utils/get-system'
 
@@ -536,7 +537,9 @@ export const LayoutViewer = forwardRef<DialogRef>((_, ref) => {
                   })
 
                   if (selected) {
-                    await copyIconFile(`${selected}`, 'common')
+                    await mutate(() => copyIconFile(`${selected}`, 'common'), {
+                      id: 'copy-icon:common',
+                    })
                     await initIconPath()
                     onChangeData({ common_tray_icon: true })
                     patchVerge({ common_tray_icon: true })
@@ -588,7 +591,10 @@ export const LayoutViewer = forwardRef<DialogRef>((_, ref) => {
                     ],
                   })
                   if (selected) {
-                    await copyIconFile(`${selected}`, 'sysproxy')
+                    await mutate(
+                      () => copyIconFile(`${selected}`, 'sysproxy'),
+                      { id: 'copy-icon:sysproxy' },
+                    )
                     await initIconPath()
                     onChangeData({ sysproxy_tray_icon: true })
                     patchVerge({ sysproxy_tray_icon: true })
@@ -636,7 +642,9 @@ export const LayoutViewer = forwardRef<DialogRef>((_, ref) => {
                     ],
                   })
                   if (selected) {
-                    await copyIconFile(`${selected}`, 'tun')
+                    await mutate(() => copyIconFile(`${selected}`, 'tun'), {
+                      id: 'copy-icon:tun',
+                    })
                     await initIconPath()
                     onChangeData({ tun_tray_icon: true })
                     patchVerge({ tun_tray_icon: true })

src/components/setting/mods/lite-mode-viewer.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next'
 import { BaseDialog, DialogRef, Switch, TooltipIcon } from '@/components/base'
 import { useVerge } from '@/hooks/use-verge'
 import { entry_lightweight_mode } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 
 export function LiteModeViewer({ ref }: { ref?: Ref<DialogRef> }) {
@@ -72,7 +73,12 @@ export function LiteModeViewer({ ref }: { ref?: Ref<DialogRef> }) {
               color: 'primary.main',
               '&:hover': { textDecoration: 'underline' },
             }}
-            onClick={async () => await entry_lightweight_mode()}
+            onClick={async () =>
+              await mutate(() => entry_lightweight_mode(), {
+                id: 'entry-lightweight-mode',
+                errorNotice: false,
+              })
+            }
           >
             {t('shared.actions.enable')}
           </Typography>

src/components/setting/mods/sysproxy-viewer.tsx

@@ -36,22 +36,14 @@ import { useSystemProxyState } from '@/hooks/use-system-proxy-state'
 import { useVerge } from '@/hooks/use-verge'
 import { useSystemData } from '@/providers/app-data-context'
 import {
-  getAutotemProxy,
   getEmbeddedServerPort,
   getNetworkInterfacesInfo,
   getSystemHostname,
-  getSystemProxy,
-  patchVergeConfig,
 } from '@/services/cmds'
 import { showNotice } from '@/services/notice-service'
 import { debugLog } from '@/utils/debug'
 import getSystem from '@/utils/get-system'
 
-const sleep = (ms: number) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, ms)
-  })
-
 const DEFAULT_PAC = `function FindProxyForURL(url, host) {
   return "PROXY %proxy_host%:%mixed-port%; SOCKS5 %proxy_host%:%mixed-port%; DIRECT;";
 }`
@@ -344,13 +336,6 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
       patch.proxy_host = proxyHost
     }
 
-    const needResetProxy =
-      value.pac !== proxy_auto_config ||
-      proxyHost !== proxy_host ||
-      pacContent !== pac_file_content ||
-      value.bypass !== system_proxy_bypass ||
-      value.use_default !== use_default_bypass
-
     Promise.resolve().then(async () => {
       try {
         if (Object.keys(patch).length > 0) {
@@ -359,31 +344,11 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
         if (Object.keys(patch).length > 0) {
           await patchVerge(patch)
         }
-        setTimeout(async () => {
-          try {
-            await invalidateProxyState()
-
-            if (needResetProxy && enabled) {
-              const [currentSysProxy, currentAutoProxy] = await Promise.all([
-                getSystemProxy(),
-                getAutotemProxy(),
-              ])
-
-              const isProxyActive = value.pac
-                ? currentAutoProxy?.enable
-                : currentSysProxy?.enable
-
-              if (isProxyActive) {
-                await patchVergeConfig({ enable_system_proxy: false })
-                await sleep(50)
-                await patchVergeConfig({ enable_system_proxy: true })
-                await invalidateProxyState()
-              }
-            }
-          } catch (err) {
-            console.warn('代理状态更新失败:', err)
-          }
-        }, 50)
+        try {
+          await invalidateProxyState()
+        } catch (err) {
+          console.warn('代理状态更新失败:', err)
+        }
       } catch (err) {
         console.error('配置保存失败:', err)
         mutateVerge()

src/components/setting/mods/tun-viewer.tsx

@@ -21,6 +21,7 @@ import {
 } from '@/components/base'
 import { useClash } from '@/hooks/use-clash'
 import { enhanceProfiles } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import getSystem from '@/utils/get-system'
 import { areValidIpCidrs } from '@/utils/network'
@@ -129,7 +130,10 @@ export function TunViewer({ ref }: { ref?: Ref<DialogRef> }) {
       )
       setOpen(false)
       showNotice.success('settings.modals.tun.messages.applied')
-      void enhanceProfiles().catch((err: any) => {
+      void mutate(() => enhanceProfiles(), {
+        id: 'enhance-profiles',
+        errorNotice: false,
+      }).catch((err: any) => {
         showNotice.error(err)
       })
     } catch (err: any) {

src/components/setting/mods/update-viewer.tsx

@@ -20,6 +20,7 @@ import {
   installUpdate,
   restartApp,
 } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import { useSetUpdateState, useUpdateState } from '@/services/states'
 import { openExternalUrl } from '@/utils/open-external-url'
@@ -274,8 +275,18 @@ export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
     }
 
     try {
-      if (await installUpdate(updateInfo.version, onDownloadEvent)) {
-        await restartApp()
+      const result = await mutate(
+        () => installUpdate(updateInfo.version, onDownloadEvent),
+        {
+          id: 'install-app-update',
+          errorNotice: false,
+        },
+      )
+      if (result.ok && result.value) {
+        await mutate(() => restartApp(), {
+          id: 'restart-app',
+          errorNotice: false,
+        })
       }
     } catch (err: any) {
       showNotice.error(err)
@@ -341,7 +352,10 @@ export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
       onClose={() => setOpen(false)}
       onCancel={() => {
         if (updateState) {
-          void cancelUpdateDownload().catch(showNotice.error)
+          void mutate(() => cancelUpdateDownload(), {
+            id: 'cancel-update-download',
+            errorNotice: false,
+          }).catch(showNotice.error)
         }
         setOpen(false)
       }}

src/components/setting/setting-clash.tsx

@@ -12,6 +12,7 @@ import { useDisplayedMixedPort } from '@/hooks/use-displayed-mixed-port'
 import { useProfiles } from '@/hooks/use-profiles'
 import { useVerge } from '@/hooks/use-verge'
 import { invoke_uwp_tool, setDnsOverride } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import getSystem from '@/utils/get-system'
 
@@ -74,7 +75,10 @@ const SettingClash = ({ onError }: Props) => {
   }
   const onUpdateGeo = async () => {
     try {
-      await updateGeo()
+      await mutate(() => updateGeo(), {
+        id: 'update-geo',
+        errorNotice: false,
+      })
       showNotice.success('settings.feedback.notifications.clash.geoDataUpdated')
     } catch (err: any) {
       showNotice.error(err)
@@ -90,7 +94,15 @@ const SettingClash = ({ onError }: Props) => {
       if (!profileUid) return
       setDnsUpdating(true)
       try {
-        const outcome = await setDnsOverride(profileUid, enable, confirmation)
+        const result = await mutate(
+          () => setDnsOverride(profileUid, enable, confirmation),
+          {
+            id: 'set-dns-override',
+            errorNotice: false,
+          },
+        )
+        if (!result.ok) return
+        const outcome = result.value
         if (outcome.status === 'confirmation_required') {
           setDnsConfirmation({ profileUid, source: outcome.source })
         } else {

src/components/setting/setting-verge-advanced.tsx

@@ -13,6 +13,7 @@ import {
   openDevTools,
   openLogsDir,
 } from '@/services/cmds'
+import { mutate } from '@/services/mutate'
 import { showNotice } from '@/services/notice-service'
 import { checkUpdateSafe as checkUpdate } from '@/services/update'
 import { version } from '@root/package.json'
@@ -61,7 +62,10 @@ const SettingVergeAdvanced = ({ onError: _ }: Props) => {
   }
 
   const onExportDiagnosticInfo = useCallback(async () => {
-    await exportDiagnosticInfo()
+    await mutate(() => exportDiagnosticInfo(), {
+      id: 'export-diagnostic-info',
+      errorNotice: false,
+    })
     showNotice.success('shared.feedback.notifications.common.copySuccess', 1000)
   }, [])
 
@@ -128,7 +132,12 @@ const SettingVergeAdvanced = ({ onError: _ }: Props) => {
       />
 
       <SettingItem
-        onClick={openDevTools}
+        onClick={() => {
+          void mutate(() => openDevTools(), {
+            id: 'open-devtools',
+            errorNotice: false,
+          }).catch(() => {})
+        }}
         label={t('settings.components.verge.advanced.fields.openDevTools')}
       />
 
@@ -145,7 +154,10 @@ const SettingVergeAdvanced = ({ onError: _ }: Props) => {
 
       <SettingItem
         onClick={() => {
-          exitApp()
+          void mutate(() => exitApp(), {
+            id: 'exit-app',
+            errorNotice: false,
+          }).catch(() => {})
         }}
         label={t('settings.components.verge.advanced.fields.exit')}
       />