feat(agent): support cancelling installs and upgrades

2026-11-15 06:51:27 +00:00 · 2026-08-18 15:36:52 +08:00
1 parent 5196e92b24
commit c712be3e02
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted, computed, watch, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
-import { Activity, ExternalLink, Cpu, FolderOpen, FolderSync, MemoryStick, Search, Square, Trash2, Download, RotateCcw, Loader2, RefreshCw, Check, Clock3, FileUp } from "@lucide/vue";
+import { Activity, ExternalLink, Cpu, FolderOpen, FolderSync, MemoryStick, Search, Square, Trash2, Download, RotateCcw, Loader2, RefreshCw, Check, Clock3, FileUp, X } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -23,6 +23,8 @@ import {
  addDriverInstallQueue,
  driverInstallProgressChannel,
  driverInstallProgressPercent,
+  isDriverInstallCanceledError,
+  isDriverInstallCancellationTarget,
  isDriverInstallProgressForOperation,
  isDriverInstallProgressTarget,
  removeDriverInstallQueue,
@@ -188,11 +190,13 @@ const agentDriverSearch = ref("");
 const selectedDriverCategory = ref<string>("all");
 const installing = ref<string | null>(null);
 const upgradingAll = ref(false);
+const preparingUpgradeAll = ref(false);
 const upgradingCompletedCount = ref(0);
 const upgradingTotal = ref(0);
 const queuedDriverInstalls = ref<string[]>([]);
 const reinstallingJre = ref<string | null>(null);
 const activeAgentOperationId = ref<string | null>(null);
+const cancellableAgentInstallDbType = ref<string | null>(null);
 const refreshing = ref(false);
 const agentProgressByDbType = reactive<Record<string, DriverInstallProgress | null | undefined>>({});
 const jdbcPluginProgress = ref<DriverInstallProgress | null>(null);
@@ -329,6 +333,15 @@ function isDriverProgressActive(dbType: string): boolean {
  });
 }

+function isDriverInstallCancellable(dbType: string): boolean {
+  return isDriverInstallCancellationTarget(dbType, {
+    activeOperationId: activeAgentOperationId.value,
+    cancellableDbType: cancellableAgentInstallDbType.value,
+    upgradingAll: upgradingAll.value,
+    progressMap: agentProgressByDbType,
+  });
+}
+
 function driverRequiresJavaRuntime(driver: AgentDriverInfo): boolean {
  return driver.requires_java_runtime ?? Boolean(driver.jre);
 }
@@ -455,7 +468,7 @@ async function chooseCustomJavaPath() {
 }

 async function installDriver(dbType: string) {
-  if (installing.value !== null || upgradingAll.value) {
+  if (installing.value !== null || preparingUpgradeAll.value || upgradingAll.value) {
    queueDriverInstall(dbType);
    return;
  }
@@ -466,7 +479,6 @@ async function installDriver(dbType: string) {
 async function runDriverInstall(dbType: string) {
  const label = driverLabel(dbType);
  installing.value = dbType;
-  activeAgentOperationId.value = uuid();
  resetAgentInstallProgress();
  try {
    const managedResult = await installRegisteredManagedJdbcDriver(dbType, jdbcMavenBundles.value, jdbcPluginStatus.value, api);
@@ -486,20 +498,28 @@ async function runDriverInstall(dbType: string) {
      toast(t("driverStore.driverUpdateBlocked", { labels: blockers.map((blocker) => blocker.label).join(", ") }));
      return;
    }
-    await api.installAgent(dbType, activeAgentOperationId.value);
+    const operationId = uuid();
+    activeAgentOperationId.value = operationId;
+    cancellableAgentInstallDbType.value = dbType;
+    await api.installAgent(dbType, operationId);
    await refreshAgents();
    toast(t("driverStore.driverInstallSuccess", { label }));
  } catch (e: any) {
+    if (isDriverInstallCanceledError(e)) {
+      toast(t("driverStore.driverInstallCancelled", { label }));
+      return;
+    }
    toast(t("driverStore.driverInstallFailed", { label, error: backendError(e) }));
  } finally {
    installing.value = null;
    activeAgentOperationId.value = null;
+    cancellableAgentInstallDbType.value = null;
    resetAgentInstallProgress();
  }
 }

 async function runQueuedDriverInstalls() {
-  if (installing.value !== null || upgradingAll.value) return;
+  if (installing.value !== null || preparingUpgradeAll.value || upgradingAll.value) return;

  const result = takeNextDriverInstallQueue(queuedDriverInstalls.value, canInstallOrUpdateDriver);
  queuedDriverInstalls.value = result.queue;
@@ -510,21 +530,29 @@ async function runQueuedDriverInstalls() {
 }

 async function upgradeAll() {
-  upgradingAll.value = true;
-  activeAgentOperationId.value = uuid();
-  upgradingCompletedCount.value = 0;
-  queuedDriverInstalls.value = [];
-  resetAgentInstallProgress();
+  if (preparingUpgradeAll.value || upgradingAll.value) return;
+  preparingUpgradeAll.value = true;
  try {
    const updatableDbTypes = drivers.value.filter((driver) => driver.update_available).map((driver) => driver.db_type);
-    upgradingTotal.value = updatableDbTypes.length;
    const blockers = await api.checkAgentUpdateBlockers(updatableDbTypes);
    if (blockers.length > 0) {
      toast(t("driverStore.driverUpdateBlocked", { labels: blockers.map((blocker) => blocker.label).join(", ") }));
      return;
    }
+    // Do not expose Cancel until the backend operation has registered its token.
+    // Otherwise a cancel during this client-side blocker check is silently lost.
+    upgradingAll.value = true;
+    activeAgentOperationId.value = uuid();
+    upgradingCompletedCount.value = 0;
+    upgradingTotal.value = updatableDbTypes.length;
+    queuedDriverInstalls.value = [];
+    resetAgentInstallProgress();
    const result = await api.upgradeAllAgents(activeAgentOperationId.value);
    await refreshAgents();
+    if (result.cancelled > 0 && result.failed.length === 0) {
+      toast(t("driverStore.upgradeAllCancelled", { count: result.cancelled }));
+      return;
+    }
    if (result.failed.length > 0) {
      const failedLabels = result.failed.map((item) => drivers.value.find((driver) => driver.db_type === item.db_type)?.label ?? item.db_type).join(", ");
      toast(t("driverStore.upgradeAllPartial", { count: result.upgraded, failed: failedLabels }));
@@ -532,8 +560,13 @@ async function upgradeAll() {
      toast(t("driverStore.upgradeAllSuccess", { count: result.upgraded }));
    }
  } catch (e: any) {
+    if (isDriverInstallCanceledError(e)) {
+      toast(t("driverStore.upgradeAllCancelled", { count: 0 }));
+      return;
+    }
    toast(t("driverStore.upgradeAllFailed", { error: backendError(e) }));
  } finally {
+    preparingUpgradeAll.value = false;
    upgradingAll.value = false;
    activeAgentOperationId.value = null;
    upgradingCompletedCount.value = 0;
@@ -542,6 +575,25 @@ async function upgradeAll() {
  }
 }

+/** Abort a single driver's install, whether started alone or inside a batch. */
+async function cancelDriverInstall(dbType: string) {
+  if (!isDriverInstallCancellable(dbType) || !activeAgentOperationId.value) return;
+  try {
+    await api.cancelAgentInstall(dbType, activeAgentOperationId.value);
+  } catch {
+    // A cancel that arrives after the download finished is a no-op.
+  }
+}
+
+/** Abort the whole batch upgrade: in-flight downloads stop, queued ones never start. */
+async function cancelUpgradeAll() {
+  try {
+    await api.cancelAgentUpgradeAll(activeAgentOperationId.value ?? undefined);
+  } catch {
+    // The batch may have just finished; treat a failed cancel as a no-op.
+  }
+}
+
 async function uninstallDriver(dbType: string) {
  const label = driverLabel(dbType);
  try {
@@ -1429,11 +1481,16 @@ watch(driverStoreTab, (tab) => {
                  <div class="text-sm font-semibold">{{ t("driverStore.updatesAvailableTitle") }} ({{ globalUpdatableDrivers.length }})</div>
                  <p class="text-xs text-muted-foreground">{{ t("driverStore.updatesAvailableDescription") }}</p>
                </div>
-                <Button size="sm" class="h-7 rounded-md text-xs shrink-0 ml-3" :disabled="installing !== null || upgradingAll || agentImportBusy" @click="upgradeAll">
-                  <Loader2 v-if="upgradingAll" class="h-3 w-3 animate-spin mr-1" />
-                  <Download v-else class="h-3 w-3 mr-1" />
-                  {{ upgradingAll ? t("driverStore.upgradingProgress", { current: upgradingCompletedCount, total: upgradingTotal }) : t("driverStore.upgradeAll") }}
-                </Button>
+                <div class="flex shrink-0 items-center gap-2">
+                  <Button size="sm" class="h-7 rounded-md text-xs shrink-0 ml-3" :disabled="installing !== null || preparingUpgradeAll || upgradingAll || agentImportBusy" @click="upgradeAll">
+                    <Loader2 v-if="upgradingAll" class="h-3 w-3 animate-spin mr-1" />
+                    <Download v-else class="h-3 w-3 mr-1" />
+                    {{ upgradingAll ? t("driverStore.upgradingProgress", { current: upgradingCompletedCount, total: upgradingTotal }) : t("driverStore.upgradeAll") }}
+                  </Button>
+                  <Button v-if="upgradingAll" type="button" variant="outline" size="icon-sm" class="h-7 w-7 rounded-md shrink-0 text-muted-foreground hover:text-destructive" :title="t('driverStore.cancelUpgradeAll')" :aria-label="t('driverStore.cancelUpgradeAll')" @click="cancelUpgradeAll">
+                    <X class="h-3.5 w-3.5" />
+                  </Button>
+                </div>
              </div>
              <div
                v-for="driver in globalUpdatableDrivers"
@@ -1461,14 +1518,24 @@ watch(driverStoreTab, (tab) => {
                    size="sm"
                    variant="outline"
                    class="h-7 rounded-md border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
-                    :disabled="upgradingAll || agentImportBusy"
+                    :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy"
                    @click="removeQueuedDriverInstall(driver.db_type)"
                  >
                    <Clock3 class="h-3 w-3 mr-1" />
                    {{ t("driverStore.queued") }}
                  </Button>
-                  <DriverInstallProgressCircle v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.installing'))" />
-                  <Button v-else-if="!driver.installed" size="sm" class="h-7 rounded-md text-xs" :disabled="upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
+                  <DriverInstallProgressCircle v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.installing'))" /><Button
+                    v-if="!driver.installed && isDriverProgressActive(driver.db_type) && isDriverInstallCancellable(driver.db_type)"
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    class="h-7 w-7 rounded-md text-muted-foreground hover:text-destructive"
+                    :title="t('driverStore.cancelInstall')"
+                    :aria-label="t('driverStore.cancelInstall')"
+                    @click="cancelDriverInstall(driver.db_type)"
+                    ><X class="h-3.5 w-3.5"
+                  /></Button>
+                  <Button v-else-if="!driver.installed && !isDriverProgressActive(driver.db_type)" size="sm" class="h-7 rounded-md text-xs" :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
                    <Download class="h-3 w-3 mr-1" />
                    {{ t("driverStore.install") }}
                  </Button>
@@ -1478,7 +1545,7 @@ watch(driverStoreTab, (tab) => {
                    variant="ghost"
                    class="driver-store-local-import-button h-7 w-7 rounded-md text-xs text-muted-foreground"
                    :title="importingDriver === driver.db_type ? t('driverStore.importing') : t('driverStore.importLocalJar')"
-                    :disabled="upgradingAll || installing !== null || agentImportBusy"
+                    :disabled="preparingUpgradeAll || upgradingAll || installing !== null || agentImportBusy"
                    @click="importDriverFile(driver)"
                  >
                    <Loader2 v-if="importingDriver === driver.db_type" class="h-3.5 w-3.5 animate-spin" />
@@ -1490,17 +1557,34 @@ watch(driverStoreTab, (tab) => {
                    size="sm"
                    variant="outline"
                    class="h-7 rounded-md border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
-                    :disabled="upgradingAll || agentImportBusy"
+                    :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy"
                    @click="removeQueuedDriverInstall(driver.db_type)"
                  >
                    <Clock3 class="h-3 w-3 mr-1" />
                    {{ t("driverStore.queued") }}
                  </Button>
-                  <DriverInstallProgressCircle v-else-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.updating'))" />
-                  <Button v-else-if="driver.installed && driver.update_available" size="sm" variant="outline" class="h-7 rounded-md text-xs" :disabled="upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
+                  <DriverInstallProgressCircle v-else-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.updating'))" /><Button
+                    v-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type) && isDriverInstallCancellable(driver.db_type)"
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    class="h-7 w-7 rounded-md text-muted-foreground hover:text-destructive"
+                    :title="t('driverStore.cancelInstall')"
+                    :aria-label="t('driverStore.cancelInstall')"
+                    @click="cancelDriverInstall(driver.db_type)"
+                    ><X class="h-3.5 w-3.5"
+                  /></Button>
+                  <Button v-else-if="driver.installed && driver.update_available && !isDriverProgressActive(driver.db_type)" size="sm" variant="outline" class="h-7 rounded-md text-xs" :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
                    {{ t("driverStore.update") }}
                  </Button>
-                  <Button v-if="driver.installed" variant="ghost" size="sm" class="h-7 rounded-md text-xs text-muted-foreground hover:text-destructive" :disabled="installing !== null || upgradingAll || agentImportBusy || isDriverQueued(driver.db_type)" @click="uninstallDriver(driver.db_type)">
+                  <Button
+                    v-if="driver.installed"
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 rounded-md text-xs text-muted-foreground hover:text-destructive"
+                    :disabled="installing !== null || preparingUpgradeAll || upgradingAll || agentImportBusy || isDriverQueued(driver.db_type)"
+                    @click="uninstallDriver(driver.db_type)"
+                  >
                    {{ t("driverStore.uninstall") }}
                  </Button>
                </div>
@@ -1579,14 +1663,24 @@ watch(driverStoreTab, (tab) => {
                            size="sm"
                            variant="outline"
                            class="h-7 rounded-md border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
-                            :disabled="upgradingAll || agentImportBusy"
+                            :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy"
                            @click="removeQueuedDriverInstall(driver.db_type)"
                          >
                            <Clock3 class="h-3 w-3 mr-1" />
                            {{ t("driverStore.queued") }}
                          </Button>
-                          <DriverInstallProgressCircle v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.installing'))" />
-                          <Button v-else-if="!driver.installed" size="sm" class="h-7 rounded-md text-xs" :disabled="upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
+                          <DriverInstallProgressCircle v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.installing'))" /><Button
+                            v-if="!driver.installed && isDriverProgressActive(driver.db_type) && isDriverInstallCancellable(driver.db_type)"
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            class="h-7 w-7 rounded-md text-muted-foreground hover:text-destructive"
+                            :title="t('driverStore.cancelInstall')"
+                            :aria-label="t('driverStore.cancelInstall')"
+                            @click="cancelDriverInstall(driver.db_type)"
+                            ><X class="h-3.5 w-3.5"
+                          /></Button>
+                          <Button v-else-if="!driver.installed && !isDriverProgressActive(driver.db_type)" size="sm" class="h-7 rounded-md text-xs" :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
                            <Download class="h-3 w-3 mr-1" />
                            {{ t("driverStore.install") }}
                          </Button>
@@ -1596,7 +1690,7 @@ watch(driverStoreTab, (tab) => {
                            variant="ghost"
                            class="driver-store-local-import-button h-7 w-7 rounded-md text-xs text-muted-foreground"
                            :title="importingDriver === driver.db_type ? t('driverStore.importing') : t('driverStore.importLocalJar')"
-                            :disabled="upgradingAll || installing !== null || agentImportBusy"
+                            :disabled="preparingUpgradeAll || upgradingAll || installing !== null || agentImportBusy"
                            @click="importDriverFile(driver)"
                          >
                            <Loader2 v-if="importingDriver === driver.db_type" class="h-3.5 w-3.5 animate-spin" />
@@ -1608,14 +1702,24 @@ watch(driverStoreTab, (tab) => {
                            size="sm"
                            variant="outline"
                            class="h-7 rounded-md border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
-                            :disabled="upgradingAll || agentImportBusy"
+                            :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy"
                            @click="removeQueuedDriverInstall(driver.db_type)"
                          >
                            <Clock3 class="h-3 w-3 mr-1" />
                            {{ t("driverStore.queued") }}
                          </Button>
-                          <DriverInstallProgressCircle v-else-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.updating'))" />
-                          <Button v-else-if="driver.installed && driver.update_available" size="sm" variant="outline" class="h-7 rounded-md text-xs" :disabled="upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
+                          <DriverInstallProgressCircle v-else-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.updating'))" /><Button
+                            v-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type) && isDriverInstallCancellable(driver.db_type)"
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            class="h-7 w-7 rounded-md text-muted-foreground hover:text-destructive"
+                            :title="t('driverStore.cancelInstall')"
+                            :aria-label="t('driverStore.cancelInstall')"
+                            @click="cancelDriverInstall(driver.db_type)"
+                            ><X class="h-3.5 w-3.5"
+                          /></Button>
+                          <Button v-else-if="driver.installed && driver.update_available && !isDriverProgressActive(driver.db_type)" size="sm" variant="outline" class="h-7 rounded-md text-xs" :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
                            {{ t("driverStore.update") }}
                          </Button>
                          <Button
@@ -1623,7 +1727,7 @@ watch(driverStoreTab, (tab) => {
                            variant="ghost"
                            size="sm"
                            class="h-7 rounded-md text-xs text-muted-foreground hover:text-destructive"
-                            :disabled="installing !== null || upgradingAll || agentImportBusy || isDriverQueued(driver.db_type)"
+                            :disabled="installing !== null || preparingUpgradeAll || upgradingAll || agentImportBusy || isDriverQueued(driver.db_type)"
                            @click="uninstallDriver(driver.db_type)"
                          >
                            {{ t("driverStore.uninstall") }}
@@ -1663,14 +1767,24 @@ watch(driverStoreTab, (tab) => {
                        size="sm"
                        variant="outline"
                        class="h-7 rounded-md border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
-                        :disabled="upgradingAll || agentImportBusy"
+                        :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy"
                        @click="removeQueuedDriverInstall(driver.db_type)"
                      >
                        <Clock3 class="h-3 w-3 mr-1" />
                        {{ t("driverStore.queued") }}
                      </Button>
-                      <DriverInstallProgressCircle v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.installing'))" />
-                      <Button v-else-if="!driver.installed" size="sm" class="h-7 rounded-md text-xs" :disabled="upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
+                      <DriverInstallProgressCircle v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.installing'))" /><Button
+                        v-if="!driver.installed && isDriverProgressActive(driver.db_type) && isDriverInstallCancellable(driver.db_type)"
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
+                        class="h-7 w-7 rounded-md text-muted-foreground hover:text-destructive"
+                        :title="t('driverStore.cancelInstall')"
+                        :aria-label="t('driverStore.cancelInstall')"
+                        @click="cancelDriverInstall(driver.db_type)"
+                        ><X class="h-3.5 w-3.5"
+                      /></Button>
+                      <Button v-else-if="!driver.installed && !isDriverProgressActive(driver.db_type)" size="sm" class="h-7 rounded-md text-xs" :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
                        <Download class="h-3 w-3 mr-1" />
                        {{ t("driverStore.install") }}
                      </Button>
@@ -1680,7 +1794,7 @@ watch(driverStoreTab, (tab) => {
                        variant="ghost"
                        class="driver-store-local-import-button h-7 w-7 rounded-md text-xs text-muted-foreground"
                        :title="importingDriver === driver.db_type ? t('driverStore.importing') : t('driverStore.importLocalJar')"
-                        :disabled="upgradingAll || installing !== null || agentImportBusy"
+                        :disabled="preparingUpgradeAll || upgradingAll || installing !== null || agentImportBusy"
                        @click="importDriverFile(driver)"
                      >
                        <Loader2 v-if="importingDriver === driver.db_type" class="h-3.5 w-3.5 animate-spin" />
@@ -1692,17 +1806,34 @@ watch(driverStoreTab, (tab) => {
                        size="sm"
                        variant="outline"
                        class="h-7 rounded-md border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
-                        :disabled="upgradingAll || agentImportBusy"
+                        :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy"
                        @click="removeQueuedDriverInstall(driver.db_type)"
                      >
                        <Clock3 class="h-3 w-3 mr-1" />
                        {{ t("driverStore.queued") }}
                      </Button>
-                      <DriverInstallProgressCircle v-else-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.updating'))" />
-                      <Button v-else-if="driver.installed && driver.update_available" size="sm" variant="outline" class="h-7 rounded-md text-xs" :disabled="upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
+                      <DriverInstallProgressCircle v-else-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type)" :percent="getAgentProgressPercent(driver.db_type)" :title="getAgentProgressTitle(driver.db_type, t('driverStore.updating'))" /><Button
+                        v-if="driver.installed && driver.update_available && isDriverProgressActive(driver.db_type) && isDriverInstallCancellable(driver.db_type)"
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
+                        class="h-7 w-7 rounded-md text-muted-foreground hover:text-destructive"
+                        :title="t('driverStore.cancelInstall')"
+                        :aria-label="t('driverStore.cancelInstall')"
+                        @click="cancelDriverInstall(driver.db_type)"
+                        ><X class="h-3.5 w-3.5"
+                      /></Button>
+                      <Button v-else-if="driver.installed && driver.update_available && !isDriverProgressActive(driver.db_type)" size="sm" variant="outline" class="h-7 rounded-md text-xs" :disabled="preparingUpgradeAll || upgradingAll || agentImportBusy" @click="installDriver(driver.db_type)">
                        {{ t("driverStore.update") }}
                      </Button>
-                      <Button v-if="driver.installed" variant="ghost" size="sm" class="h-7 rounded-md text-xs text-muted-foreground hover:text-destructive" :disabled="installing !== null || upgradingAll || agentImportBusy || isDriverQueued(driver.db_type)" @click="uninstallDriver(driver.db_type)">
+                      <Button
+                        v-if="driver.installed"
+                        variant="ghost"
+                        size="sm"
+                        class="h-7 rounded-md text-xs text-muted-foreground hover:text-destructive"
+                        :disabled="installing !== null || preparingUpgradeAll || upgradingAll || agentImportBusy || isDriverQueued(driver.db_type)"
+                        @click="uninstallDriver(driver.db_type)"
+                      >
                        {{ t("driverStore.uninstall") }}
                      </Button>
                    </div>
@@ -67,7 +67,7 @@ import { loadConnectionPickerView, saveConnectionPickerView, type DbPickerView }
 import { normalizeRocketmqNamesrvAddr } from "@/lib/connection/rocketmqNamesrv";
 import { normalizeRabbitmqAddresses } from "@/lib/connection/rabbitmqAddresses";
 import { detectMqUiAuthKind, isMqAuthKindAllowedForSystem, type MqUiAuthKind } from "@/lib/connection/mqAuth";
-import { driverInstallProgressChannel, driverInstallProgressPercent, isDriverInstallProgressForOperation, type DriverInstallProgress } from "@/lib/connection/driverInstallProgressUi";
+import { driverInstallProgressChannel, driverInstallProgressPercent, isDriverInstallProgressForOperation, requestAgentInstallCancellation, resolveAgentInstallOutcome, type DriverInstallProgress } from "@/lib/connection/driverInstallProgressUi";
 import { requiresSqlServerLegacyCompatibilityComponent, setSqlServerLegacyCompatibilityConfig, sqlServerUsesLegacyCompatibility, SQLSERVER_LEGACY_COMPATIBILITY_DRIVER_KEY } from "@/lib/connection/sqlServerLegacyCompatibility";
 import { normalizeNacosEndpoint, normalizeNacosMetricsUrl, parseNacosManagedNamespaces } from "@/lib/nacos/nacosAdmin";
 import { loadReadableNacosNamespaces, nacosNamespaceIdentity, normalizeNacosNamespaceSelection } from "@/lib/nacos/nacosNamespaceVisibility";
@@ -259,6 +259,11 @@ const agentInstallDriverKey = ref("");
 const agentInstallLabel = ref("");
 const agentInstallProgress = ref<DriverInstallProgress | null>(null);
 const agentInstallError = ref("");
+const agentInstallCancelError = ref("");
+const agentInstallCancelling = ref(false);
+/** Set when the user cancels from the modal, so the pending promise's
+ * "canceled by user" error is treated as a non-failure by its caller. */
+const agentInstallCancelRequested = ref(false);
 const showConnectionErrorDialog = ref(false);
 const connectionErrorRawDetail = ref("");
 const connectionErrorDetail = ref("");
@@ -1890,31 +1895,67 @@ async function refreshLocalAgentDrivers(): Promise<AgentDriverInstallState[]> {
  return drivers;
 }

-function beginAgentDriverInstall(driverKey: string, label: string) {
+function beginAgentDriverInstall(driverKey: string, label: string): string {
  agentInstallOperationId.value = uuid();
  agentInstallDriverKey.value = driverKey;
  agentInstallLabel.value = label;
  agentInstallProgress.value = null;
  agentInstallError.value = "";
+  agentInstallCancelError.value = "";
+  agentInstallCancelling.value = false;
+  agentInstallCancelRequested.value = false;
  agentInstallRunning.value = true;
  showAgentInstallDialog.value = true;
+  return agentInstallOperationId.value;
 }

-function finishAgentDriverInstall() {
+/**
+ * Clear the install dialog, unless a newer operation now owns it. Stale
+ * operation promises (cancelled, then retried before settling) must not
+ * finish/reset the retry's dialog state.
+ */
+function finishAgentDriverInstall(operationId?: string | null) {
+  if (operationId !== undefined && operationId !== null && agentInstallOperationId.value !== operationId) return;
  agentInstallOperationId.value = null;
  agentInstallRunning.value = false;
  agentInstallProgress.value = null;
  agentInstallError.value = "";
+  agentInstallCancelError.value = "";
+  agentInstallCancelling.value = false;
  showAgentInstallDialog.value = false;
 }

-function failAgentDriverInstall(error: unknown) {
+function failAgentDriverInstall(operationId: string | null | undefined, error: unknown) {
+  if (operationId !== undefined && operationId !== null && agentInstallOperationId.value !== operationId) return;
  agentInstallOperationId.value = null;
  agentInstallRunning.value = false;
+  agentInstallCancelError.value = "";
+  agentInstallCancelling.value = false;
  agentInstallError.value = translateBackendError(t, error);
  showAgentInstallDialog.value = true;
 }

+/**
+ * Abort an in-flight agent driver install from the modal's Cancel button.
+ * The backend stops the download; the pending `installAgent` promise resolves
+ * with a "canceled by user" error, which callers treat as a non-failure.
+ */
+async function cancelActiveAgentInstall() {
+  const operationId = agentInstallOperationId.value;
+  if (!agentInstallDriverKey.value || !operationId || agentInstallCancelling.value) return;
+  agentInstallCancelling.value = true;
+  agentInstallCancelError.value = "";
+  const result = await requestAgentInstallCancellation(() => api.cancelAgentInstall(agentInstallDriverKey.value, operationId));
+  if (agentInstallOperationId.value !== operationId) return;
+  agentInstallCancelling.value = false;
+  if (!result.ok) {
+    agentInstallCancelError.value = translateBackendError(t, result.error);
+    return;
+  }
+  agentInstallCancelRequested.value = true;
+  finishAgentDriverInstall(operationId);
+}
+
 function showConnectionError(message: string) {
  connectionErrorRawDetail.value = message;
  connectionErrorDetail.value = translateBackendError(t, message);
@@ -1964,14 +2005,35 @@ async function ensureRequiredAgentDriverInstalled(config: ConnectionConfig): Pro

  const label = config.driver_label || driverKey;
  testResult.value = { ok: true, message: `Installing ${label} driver...` };
-  beginAgentDriverInstall(driverKey, label);
+  const operationId = beginAgentDriverInstall(driverKey, label);
  try {
-    await api.installAgent(driverKey, agentInstallOperationId.value ?? undefined);
+    await api.installAgent(driverKey, operationId);
    await refreshLocalAgentDrivers();
-    finishAgentDriverInstall();
+    // A stale promise (cancelled then retried) must not close the retry's dialog.
+    if (agentInstallOperationId.value === operationId) finishAgentDriverInstall(operationId);
  } catch (error) {
+    const outcome = resolveAgentInstallOutcome(
+      { ok: false, error },
+      {
+        operationId,
+        currentOperationId: agentInstallOperationId.value,
+        cancelRequested: agentInstallCancelRequested.value,
+      },
+    );
+    if (outcome.kind === "cancelled") {
+      // User cancelled: close silently, do not surface a failure.
+      if (outcome.ownsState) {
+        testResult.value = null;
+        finishAgentDriverInstall(operationId);
+      }
+      return;
+    }
+    if (!outcome.ownsState) {
+      // A newer operation owns the dialog; leave its state untouched.
+      return;
+    }
    testResult.value = { ok: false, message: translateBackendError(t, error) };
-    failAgentDriverInstall(error);
+    failAgentDriverInstall(operationId, error);
    throw error;
  }
 }
@@ -2019,14 +2081,32 @@ async function installSqlServerLegacyCompatibilityComponentIfNeeded(): Promise<b
  if (await api.isAgentInstalled(SQLSERVER_LEGACY_COMPATIBILITY_DRIVER_KEY)) return true;

  const label = t("connection.sqlServerLegacyCompatibilityComponent");
-  beginAgentDriverInstall(SQLSERVER_LEGACY_COMPATIBILITY_DRIVER_KEY, label);
+  const operationId = beginAgentDriverInstall(SQLSERVER_LEGACY_COMPATIBILITY_DRIVER_KEY, label);
  try {
-    await api.installAgent(SQLSERVER_LEGACY_COMPATIBILITY_DRIVER_KEY, agentInstallOperationId.value ?? undefined);
+    await api.installAgent(SQLSERVER_LEGACY_COMPATIBILITY_DRIVER_KEY, operationId);
    await refreshLocalAgentDrivers();
-    finishAgentDriverInstall();
+    // A stale promise (cancelled then retried) must not close the retry's dialog.
+    if (agentInstallOperationId.value === operationId) finishAgentDriverInstall(operationId);
  } catch (error) {
+    const outcome = resolveAgentInstallOutcome(
+      { ok: false, error },
+      {
+        operationId,
+        currentOperationId: agentInstallOperationId.value,
+        cancelRequested: agentInstallCancelRequested.value,
+      },
+    );
+    if (outcome.kind === "cancelled") {
+      // User cancelled the download: the toggle's caller falls back to `auto`.
+      if (outcome.ownsState) finishAgentDriverInstall(operationId);
+      return false;
+    }
+    if (!outcome.ownsState) {
+      // A newer operation owns the dialog; leave its state untouched.
+      return false;
+    }
    testResult.value = { ok: false, message: translateBackendError(t, error) };
-    failAgentDriverInstall(error);
+    failAgentDriverInstall(operationId, error);
    throw error;
  }
  return true;
@@ -2042,7 +2122,13 @@ async function setSqlServerDriverMode(mode: "auto" | "legacy") {
  }

  try {
-    await installSqlServerLegacyCompatibilityComponentIfNeeded();
+    const installed = await installSqlServerLegacyCompatibilityComponentIfNeeded();
+    if (!installed) {
+      // User cancelled the download: never leave the form in legacy mode
+      // without the component installed.
+      setSqlServerLegacyCompatibilityConfig(form.value, false);
+      return;
+    }
    setSqlServerLegacyCompatibilityConfig(form.value, true);
    testResult.value = null;
  } catch {
@@ -8535,6 +8621,9 @@ function openExternalUrl(url: string) {
          <div class="text-sm font-medium text-destructive">{{ t("connection.driverInstall.fullError") }}</div>
          <pre class="max-h-56 min-w-0 max-w-full overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-all [overflow-wrap:anywhere] rounded-md border bg-muted/30 p-3 text-xs leading-5 text-destructive">{{ agentInstallError }}</pre>
        </div>
+        <div v-else-if="agentInstallCancelError" class="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+          {{ agentInstallCancelError }}
+        </div>
      </div>

      <DialogFooter class="gap-2">
@@ -8542,6 +8631,9 @@ function openExternalUrl(url: string) {
          <Copy class="mr-1.5 h-3.5 w-3.5" />
          {{ t("connection.copyError") }}
        </Button>
+        <Button v-if="agentInstallRunning && !agentInstallError" variant="outline" :disabled="agentInstallCancelling" @click="cancelActiveAgentInstall">
+          {{ t("common.cancel") }}
+        </Button>
        <Button :disabled="!canCloseAgentInstallDialog" @click="showAgentInstallDialog = false">
          {{ agentInstallError ? t("common.close") : t("connection.driverInstall.installingButton") }}
        </Button>