fix(web): confirm dialogs respond to Enter and await async actions (#1744)

* fix(web): confirm dialogs respond to Enter and await async actions

The confirm dialog's initial focus was resolved from the Button
component's $el, which is a text node in dev builds (the component has
a template-root comment, so it renders as a fragment). Focus fell back
to the header close button, so Enter cancelled instead of confirming.
Resolve the initial focus with a CSS selector on the confirm button
instead.

ConfirmOptions now accepts an async action: the dialog stays open with
a loading state (cancel/Esc/overlay suppressed) until the work settles.
The archive-session, remove-workspace, and delete-provider confirms
move from the menu components into App.vue so the dialog can await the
actual client call.

* fix(web): block superseding a confirm dialog while its action runs

A second confirm() during an in-flight action would replace the busy
dialog and inherit the global busy state, opening inert until the first
action settled. Resolve the new request unconfirmed instead.

Author: wbxl2000

.changeset/web-confirm-dialog-async-loading.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Fix Enter not confirming modal confirmation dialogs in dev builds, and keep the dialog open with a loading state until the confirmed action (such as archiving a session) completes.

apps/kimi-web/src/App.vue

@@ -27,6 +27,7 @@ import GlobalLoading from './components/GlobalLoading.vue';
 import DebugPanel from './debug/DebugPanel.vue';
 import { isTraceEnabled } from './debug/trace';
 import { useKimiWebClient } from './composables/useKimiWebClient';
+import { useConfirmDialog } from './composables/useConfirmDialog';
 import { useAuthGate } from './composables/useAuthGate';
 import { usePageTitle } from './composables/usePageTitle';
 import { useSidebarLayout } from './composables/useSidebarLayout';
@@ -72,6 +73,7 @@ provide(
   (toolCallId: string): SwarmMember[] => client.swarmMembersByToolCallId.value.get(toolCallId) ?? [],
 );
 const { t } = useI18n();
+const { confirm } = useConfirmDialog();
 
 // KAP/daemon debug panel — opt-in via ?debug=1 or localStorage kimi-web.debug=1.
 const debugEnabled = isTraceEnabled();
@@ -411,14 +413,43 @@ async function handleAddProvider(input: { type: string; apiKey?: string; baseUrl
   await client.addProvider(input);
 }
 
-async function handleDeleteProvider(id: string): Promise<void> {
-  await client.deleteProvider(id);
-}
-
 async function handleRefreshProvider(id: string): Promise<void> {
   await client.refreshProvider(id);
 }
 
+// Destructive session/workspace/provider actions confirm through the shared
+// modal here (the menu components only emit the intent). Each passes its work
+// as the dialog `action`, so the dialog stays open with a loading state until
+// the operation settles. All three client calls toast their own errors and
+// never reject.
+async function confirmArchiveSession(id: string): Promise<void> {
+  await confirm({
+    title: t('sidebar.archive'),
+    message: t('sidebar.archiveConfirm'),
+    variant: 'danger',
+    action: () => client.archiveSession(id),
+  });
+}
+
+async function confirmDeleteWorkspace(id: string): Promise<void> {
+  const name = client.workspacesView.value.find((w) => w.id === id)?.name ?? id;
+  await confirm({
+    title: t('sidebar.removeWorkspace'),
+    message: t('workspace.removeWorkspaceConfirm', { name }),
+    variant: 'danger',
+    action: () => client.deleteWorkspace(id),
+  });
+}
+
+async function confirmDeleteProvider(id: string): Promise<void> {
+  await confirm({
+    title: t('providers.delete'),
+    message: t('providers.confirmDelete'),
+    variant: 'danger',
+    action: () => client.deleteProvider(id),
+  });
+}
+
 async function handleUpdateConfig(patch: Partial<AppConfig>): Promise<void> {
   configSaving.value = true;
   try {
@@ -706,11 +737,11 @@ function openPr(url: string): void {
         @select-workspace="client.openWorkspace($event)"
         @add-workspace="showAddWorkspace = true"
         @rename="(id, title) => client.renameSession(id, title)"
-        @archive="(id) => client.archiveSession(id)"
+        @archive="confirmArchiveSession($event)"
         @fork="(id) => client.forkSession(id)"
         @export="(id) => client.exportSession(id)"
         @rename-workspace="(id, name) => client.renameWorkspace(id, name)"
-        @delete-workspace="(id) => client.deleteWorkspace(id)"
+        @delete-workspace="confirmDeleteWorkspace($event)"
         @reorder-workspaces="client.reorderWorkspaces($event)"
         @set-workspace-sort-mode="client.setWorkspaceSortMode($event)"
         @load-more-sessions="(id) => void client.loadMoreSessions(id)"
@@ -812,7 +843,7 @@ function openPr(url: string): void {
       @refresh-git-status="client.activeSessionId.value && client.loadGitStatus(client.activeSessionId.value)"
       @rename-session="(id, title) => client.renameSession(id, title)"
       @fork-session="(id) => client.forkSession(id)"
-      @archive-session="(id) => client.archiveSession(id)"
+      @archive-session="confirmArchiveSession($event)"
       @export-session="(id) => client.exportSession(id)"
       @compact="client.compact()"
       @pick-model="openModelPicker()"
@@ -991,7 +1022,7 @@ function openPr(url: string): void {
       :unavailable="providersUnavailable"
       @add="handleAddProvider($event)"
       @refresh="handleRefreshProvider($event)"
-      @delete="handleDeleteProvider($event)"
+      @delete="confirmDeleteProvider($event)"
       @open-login="() => { showProviders = false; openLogin(); }"
       @close="showProviders = false"
     />
@@ -1056,8 +1087,8 @@ function openPr(url: string): void {
       @create-in-workspace="handleCreateSessionInWorkspace($event)"
       @add-workspace="showAddWorkspace = true"
       @rename="(id, title) => client.renameSession(id, title)"
-      @archive="(id) => client.archiveSession(id)"
-      @delete-workspace="(id) => client.deleteWorkspace(id)"
+      @archive="confirmArchiveSession($event)"
+      @delete-workspace="confirmDeleteWorkspace($event)"
       @load-more="(id) => void client.loadMoreSessions(id)"
     />
 

apps/kimi-web/src/components/SessionRow.vue

@@ -8,15 +8,13 @@ import type { Session } from '../types';
 import { copyTextToClipboard } from '../lib/clipboard';
 import Spinner from './ui/Spinner.vue';
 import Badge from './ui/Badge.vue';
-import { useConfirmDialog } from '../composables/useConfirmDialog';
 import IconButton from './ui/IconButton.vue';
 import Menu from './ui/Menu.vue';
 import MenuItem from './ui/MenuItem.vue';
 import Icon from './ui/Icon.vue';
 import Tooltip from './ui/Tooltip.vue';
 
 const { t } = useI18n();
-const { confirm } = useConfirmDialog();
 
 const props = withDefaults(
   defineProps<{
@@ -168,18 +166,11 @@ function exportRow(): void {
   emit('export', props.session.id);
 }
 
-// Archive confirm — modal, consistent with remove-workspace.
-async function startArchive(): Promise<void> {
+// Archive — the modal confirm and the async work live in App.vue
+// (confirmArchiveSession); the row only emits the intent.
+function startArchive(): void {
   closeMenu();
-  if (
-    await confirm({
-      title: t('sidebar.archive'),
-      message: t('sidebar.archiveConfirm'),
-      variant: 'danger',
-    })
-  ) {
-    emit('archive', props.session.id);
-  }
+  emit('archive', props.session.id);
 }
 
 // Expose closeMenu so the parent can close on outside-click.

apps/kimi-web/src/components/Sidebar.vue

@@ -30,10 +30,8 @@ import Kbd from './ui/Kbd.vue';
 import Menu from './ui/Menu.vue';
 import MenuItem from './ui/MenuItem.vue';
 import Pill from './ui/Pill.vue';
-import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const { t } = useI18n();
-const { confirm } = useConfirmDialog();
 
 // Dev-only affordance: when the page is served by the Vite dev server, the
 // logo turns yellow and a backend pill next to the brand shows the engine
@@ -371,19 +369,12 @@ function startRenameFromMenu(): void {
   closeGhMenu();
 }
 
-async function deleteFromMenu(): Promise<void> {
+function deleteFromMenu(): void {
   const ws = ghMenuTarget.value;
   if (!ws) return;
   closeGhMenu();
-  if (
-    await confirm({
-      title: t('sidebar.removeWorkspace'),
-      message: t('workspace.removeWorkspaceConfirm', { name: ws.name }),
-      variant: 'danger',
-    })
-  ) {
-    emit('deleteWorkspace', ws.id);
-  }
+  // The modal confirm + async delete live in App.vue (confirmDeleteWorkspace).
+  emit('deleteWorkspace', ws.id);
 }
 
 // ---------------------------------------------------------------------------
@@ -449,17 +440,10 @@ function startRenameWs(ws: WorkspaceView): void {
   closeWsMenu();
 }
 
-async function deleteWs(ws: WorkspaceView): Promise<void> {
+function deleteWs(ws: WorkspaceView): void {
   closeWsMenu();
-  if (
-    await confirm({
-      title: t('sidebar.removeWorkspace'),
-      message: t('workspace.removeWorkspaceConfirm', { name: ws.name }),
-      variant: 'danger',
-    })
-  ) {
-    emit('deleteWorkspace', ws.id);
-  }
+  // The modal confirm + async delete live in App.vue (confirmDeleteWorkspace).
+  emit('deleteWorkspace', ws.id);
 }
 
 // ---------------------------------------------------------------------------

apps/kimi-web/src/components/chat/ChatHeader.vue

@@ -12,10 +12,8 @@ import MenuItem from '../ui/MenuItem.vue';
 import IconButton from '../ui/IconButton.vue';
 import Icon from '../ui/Icon.vue';
 import Tooltip from '../ui/Tooltip.vue';
-import { useConfirmDialog } from '../../composables/useConfirmDialog';
 
 const { t } = useI18n();
-const { confirm } = useConfirmDialog();
 
 const props = defineProps<{
   sessionId?: string;
@@ -210,21 +208,13 @@ function exportSession(): void {
 }
 
 // ---------------------------------------------------------------------------
-// Archive — modal confirm (the header has no session row to swap, so use the
-// shared ConfirmDialog instead of the inline strip used in SessionRow).
+// Archive — the modal confirm and the async work live in App.vue
+// (confirmArchiveSession); the header only emits the intent.
 // ---------------------------------------------------------------------------
-async function startArchive(): Promise<void> {
+function startArchive(): void {
   if (!props.sessionId) return;
   closeMenu();
-  if (
-    await confirm({
-      title: t('header.archiveSession'),
-      message: t('sidebar.archiveConfirm'),
-      variant: 'danger',
-    })
-  ) {
-    emit('archiveSession', props.sessionId);
-  }
+  emit('archiveSession', props.sessionId);
 }
 </script>
 

apps/kimi-web/src/components/dialogs/ConfirmDialog.vue

@@ -3,18 +3,11 @@
      Dialog (height auto, right-aligned footer). The single confirmation surface
      for user actions — driven app-wide by useConfirmDialog(). -->
 <script setup lang="ts">
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Dialog from '../ui/Dialog.vue';
 import Button from '../ui/Button.vue';
 
-const confirmButtonRef = ref<InstanceType<typeof Button> | null>(null);
-
-function confirmButtonElement(): HTMLElement | null {
-  const el = confirmButtonRef.value?.$el;
-  return el instanceof HTMLElement ? el : null;
-}
-
 const props = withDefaults(defineProps<{
   open: boolean;
   title: string;
@@ -37,6 +30,10 @@ const emit = defineEmits<{
 const { t } = useI18n();
 
 function onCancel(): void {
+  // While the confirm action runs (loading), every cancel path — Cancel
+  // button, header close, Esc, overlay click — is inert so the dialog can't
+  // be dismissed out from under the in-flight work.
+  if (props.loading) return;
   emit('update:open', false);
   emit('cancel');
 }
@@ -70,11 +67,17 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+  <!-- initial-focus uses a selector, not the Button component's $el: Button
+       has a template-root comment, so in dev builds it renders as a fragment
+       whose $el is a text node (unfocusable) — focus would fall back to the
+       header close button and Enter would cancel instead of confirm. -->
   <Dialog
     :open="open"
     :title="title"
     height="auto"
-    :initial-focus="confirmButtonElement"
+    initial-focus=".confirm-dialog__confirm"
+    :close-on-esc="!loading"
+    :close-on-overlay="!loading"
     @update:open="emit('update:open', $event)"
     @close="onCancel"
   >
@@ -84,7 +87,7 @@ onBeforeUnmount(() => {
         {{ cancelLabel ?? t('common.cancel') }}
       </Button>
       <Button
-        ref="confirmButtonRef"
+        class="confirm-dialog__confirm"
         :variant="variant"
         :loading="loading"
         @click="emit('confirm')"

apps/kimi-web/src/components/dialogs/ConfirmDialogHost.vue

@@ -5,7 +5,13 @@
 import { useConfirmDialog } from '../../composables/useConfirmDialog';
 import ConfirmDialog from './ConfirmDialog.vue';
 
-const { current, settle } = useConfirmDialog();
+const { current, busy, settle, runAction } = useConfirmDialog();
+
+// runAction never rejects (a failing action rejects the confirm() promise
+// instead), so the floating promise is safe to drop here.
+function onConfirm(): void {
+  void runAction();
+}
 </script>
 
 <template>
@@ -16,7 +22,8 @@ const { current, settle } = useConfirmDialog();
     :confirm-label="current?.confirmLabel"
     :cancel-label="current?.cancelLabel"
     :variant="current?.variant"
-    @confirm="settle(true)"
+    :loading="busy"
+    @confirm="onConfirm"
     @cancel="settle(false)"
   />
 </template>