@cat-factory/app 0.70.0 → 0.70.1

package/app/components/board/AgentFailureCard.vue

@@ -53,6 +53,8 @@ async function retry() {
   <div
     class="nodrag rounded-lg border border-rose-900/60 bg-rose-950/40"
     :class="compact ? 'px-3 py-2' : 'px-3 py-2.5'"
+    data-testid="agent-failure-banner"
+    :data-run-kind="run.kind"
   >
     <div class="flex items-center gap-1.5" :class="compact ? 'text-[11px]' : 'text-xs'">
       <UIcon
@@ -95,6 +97,7 @@ async function retry() {
       class="nodrag mt-2 flex items-center gap-1 rounded-md bg-rose-900/40 text-rose-200 hover:bg-rose-900/70 disabled:opacity-60"
       :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
       :disabled="retrying"
+      data-testid="agent-failure-retry"
       @click.stop="retry"
     >
       <UIcon

package/app/components/board/nodes/BlockNode.vue

@@ -256,7 +256,11 @@ const ITEM_ICON: Record<string, string> = {
     >
       <div class="h-1.5 w-full" :style="{ backgroundColor: accent }" />
       <!-- bootstrap-in-progress banner -->
-      <div v-if="bootstrapping" class="border-b border-amber-900/50 bg-amber-950/30 px-3 py-2">
+      <div
+        v-if="bootstrapping"
+        class="border-b border-amber-900/50 bg-amber-950/30 px-3 py-2"
+        data-testid="bootstrap-progress"
+      >
         <div class="flex items-center gap-1.5 text-[11px]">
           <UIcon
             name="i-lucide-loader-circle"
@@ -334,7 +338,11 @@ const ITEM_ICON: Record<string, string> = {
     >
       <div class="h-1.5 w-full rounded-t-2xl" :style="{ backgroundColor: accent }" />
       <!-- bootstrap-in-progress banner -->
-      <div v-if="bootstrapping" class="border-b border-amber-900/50 bg-amber-950/30 px-4 py-2">
+      <div
+        v-if="bootstrapping"
+        class="border-b border-amber-900/50 bg-amber-950/30 px-4 py-2"
+        data-testid="bootstrap-progress"
+      >
         <div class="flex items-center gap-1.5 text-xs">
           <UIcon
             name="i-lucide-loader-circle"

package/app/components/board/nodes/TaskCard.vue

@@ -87,7 +87,18 @@ async function run() {
   // the start was refused — the store surfaces the actionable toast itself). Revert the
   // optimistic state; on success the button unmounts once the stream pushes in_progress.
   const started = await execution.start(props.taskId, pipeline)
-  if (!started) starting.value = false
+  if (started) {
+    // Confirm the (optimistic) start landed — the button unmounts once the stream pushes
+    // in_progress, so without this the successful action gives no feedback.
+    toast.add({
+      title: t('board.task.startedToast.title'),
+      description: t('board.task.startedToast.body', { name: pipeline.name }),
+      color: 'success',
+      icon: 'i-lucide-play',
+    })
+  } else {
+    starting.value = false
+  }
 }
 
 function review() {

package/app/components/common/ConfirmDialog.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// The single, app-wide confirmation dialog. Mounted once in `pages/index.vue` and driven
+// entirely by the `useConfirm()` singleton, so any caller can `await confirm({...})` without
+// rendering its own modal. UModal already provides the focus trap, Escape-to-close and
+// backdrop, so this component adds none of that — it only resolves the pending promise and,
+// crucially, resolves `false` whenever the modal closes without an explicit choice.
+
+const { t } = useI18n()
+const { open, current, accept, cancel, dismissed } = useConfirm()
+
+const model = computed({
+  get: () => open.value,
+  set: (v: boolean) => {
+    // The user dismissed via backdrop / Escape — treat as cancel so the promise settles.
+    if (!v) dismissed()
+  },
+})
+
+const isDestructive = computed(() => current.value?.variant === 'destructive')
+</script>
+
+<template>
+  <UModal
+    v-model:open="model"
+    :title="current?.title ?? t('common.confirm.defaultTitle')"
+    :ui="{ content: 'max-w-md' }"
+  >
+    <template #body>
+      <div class="flex items-start gap-3" data-testid="confirm-dialog">
+        <div
+          v-if="current?.icon"
+          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+          :class="isDestructive ? 'bg-red-500/10 text-red-400' : 'bg-slate-700/40 text-slate-300'"
+        >
+          <UIcon :name="current.icon" class="h-5 w-5" />
+        </div>
+        <p v-if="current?.description" class="text-sm text-slate-300">
+          {{ current.description }}
+        </p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="ghost" data-testid="confirm-cancel" @click="cancel">
+          {{ current?.cancelLabel ?? t('common.cancel') }}
+        </UButton>
+        <UButton
+          :color="isDestructive ? 'error' : 'primary'"
+          data-testid="confirm-accept"
+          autofocus
+          @click="accept"
+        >
+          {{ current?.confirmLabel ?? t('common.confirm.confirm') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/common/EmptyState.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// A small, presentational "nothing here yet" placeholder — the reusable version of the
+// hand-coded empty renders scattered across the app (context pickers, dependency lists,
+// execution history, preset lists). Dumb by design: it takes already-resolved copy and an
+// icon, and exposes a default slot for an optional call-to-action button. `compact` shrinks
+// it for inline use inside a narrow panel section.
+withDefaults(
+  defineProps<{
+    icon?: string
+    title: string
+    description?: string
+    compact?: boolean
+  }>(),
+  { icon: 'i-lucide-inbox', compact: false },
+)
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center text-center text-slate-500"
+    :class="compact ? 'gap-1 py-4' : 'gap-2 py-10'"
+    data-testid="empty-state"
+  >
+    <UIcon :name="icon" :class="compact ? 'h-5 w-5' : 'h-8 w-8'" class="text-slate-600" />
+    <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-slate-400">
+      {{ title }}
+    </p>
+    <p v-if="description" :class="compact ? 'text-[11px]' : 'text-xs'" class="max-w-xs">
+      {{ description }}
+    </p>
+    <div v-if="$slots.default" :class="compact ? 'mt-1' : 'mt-2'">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/common/KeyboardShortcutsHelp.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// The keyboard-shortcuts cheatsheet, opened with "?" (or from the command bar). A plain
+// UModal listing every global shortcut with its keys rendered as UKbd chips. Driven by the
+// ui store so "?" anywhere toggles it.
+const { t } = useI18n()
+const ui = useUiStore()
+
+const open = computed({
+  get: () => ui.shortcutsHelpOpen,
+  set: (v: boolean) => (v ? ui.openShortcutsHelp() : ui.closeShortcutsHelp()),
+})
+
+// Each row: the display keys + the action label. `mod` renders as ⌘ on Apple, Ctrl elsewhere.
+// `navigator.platform` is deprecated; prefer the userAgentData hint, fall back to userAgent.
+const nav = typeof navigator !== 'undefined' ? navigator : undefined
+const platformHint =
+  (nav as { userAgentData?: { platform?: string } } | undefined)?.userAgentData?.platform ??
+  nav?.userAgent ??
+  ''
+const isApple = /Mac|iPhone|iPad/.test(platformHint)
+const modKey = isApple ? '⌘' : 'Ctrl'
+
+const shortcuts = computed(() => [
+  { keys: [modKey, 'K'], label: t('layout.shortcuts.commandBar') },
+  { keys: ['Esc'], label: t('layout.shortcuts.deselect') },
+  { keys: ['Del'], label: t('layout.shortcuts.deleteBlock') },
+  { keys: ['?'], label: t('layout.shortcuts.help') },
+])
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('layout.shortcuts.title')" :ui="{ content: 'max-w-md' }">
+    <template #body>
+      <dl class="space-y-2" data-testid="shortcuts-help">
+        <div
+          v-for="(s, i) in shortcuts"
+          :key="i"
+          class="flex items-center justify-between gap-4 rounded-md px-1 py-1.5"
+        >
+          <dt class="text-sm text-slate-300">{{ s.label }}</dt>
+          <dd class="flex shrink-0 items-center gap-1">
+            <UKbd v-for="k in s.keys" :key="k" :value="k" />
+          </dd>
+        </div>
+      </dl>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/ContextDocumentPicker.vue

@@ -9,6 +9,7 @@
 // useContextLinking). A search hit / pasted ref carries `needsImport: true` so
 // it's fetched + persisted before linking. Mirrors ContextIssuePicker.
 import type { DocumentSearchResult, DocumentSourceKind } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
@@ -238,15 +239,18 @@ onMounted(() => {
         </span>
       </button>
 
-      <p v-if="empty" class="px-2 py-1.5 text-[11px] text-slate-500">
-        {{
+      <EmptyState
+        v-if="empty"
+        compact
+        icon="i-lucide-file-search"
+        :title="
           query.trim()
             ? t('documents.picker.noMatches')
             : searchable
               ? t('documents.picker.emptySearchable')
               : t('documents.picker.emptyRefOnly')
-        }}
-      </p>
+        "
+      />
     </div>
   </div>
 </template>

package/app/components/fragments/FragmentLibraryManager.vue

@@ -31,6 +31,7 @@ const library =
 const documents = useDocumentsStore()
 const toast = useToast()
 const { t, d } = useI18n()
+const { confirm } = useConfirm()
 
 const isWorkspace = props.kind === 'workspace'
 /** Linking a document at the account scope needs a workspace connection to fetch through. */
@@ -121,6 +122,15 @@ async function createFragment() {
 }
 
 async function removeFragment(id: string) {
+  const name = library.fragments.find((f) => f.id === id)?.title ?? ''
+  const ok = await confirm({
+    title: t('fragments.confirmRemove.title'),
+    description: t('fragments.confirmRemove.body', { name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   try {
     await library.remove(id)
     toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })

package/app/components/github/GitHubPanel.vue

@@ -16,6 +16,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const github = useGitHubStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.githubOpen,
@@ -46,6 +47,14 @@ function notifyError(title: string, e: unknown) {
 }
 
 async function disconnect() {
+  const ok = await confirm({
+    title: t('github.panel.confirmDisconnect.title'),
+    description: t('github.panel.confirmDisconnect.body'),
+    variant: 'destructive',
+    confirmLabel: t('common.disconnect'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
   try {
     await github.disconnect()
     toast.add({ title: t('github.panel.toast.disconnected'), icon: 'i-lucide-unplug' })

package/app/components/layout/BoardSwitcher.vue

@@ -12,6 +12,7 @@ const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
 const ui = useUiStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const busy = ref(false)
 
@@ -142,6 +143,16 @@ async function switchBoard(id: string) {
 async function removeBoard() {
   const id = workspace.workspaceId
   if (!id) return
+  const ok = await confirm({
+    title: t('layout.boardSwitcher.confirmDelete.title'),
+    description: t('layout.boardSwitcher.confirmDelete.body', {
+      name: workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback'),
+    }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await workspace.remove(id)

package/app/components/layout/CommandBar.vue

@@ -212,6 +212,14 @@ const commands = computed<Command[]>(() => {
     keywords: t('layout.commandBar.keywords.sandbox'),
     run: () => ui.openSandbox(),
   })
+  list.push({
+    id: 'keyboard-shortcuts',
+    label: t('layout.commandBar.cmd.shortcuts'),
+    group: groupWorkspace,
+    icon: 'i-lucide-keyboard',
+    keywords: t('layout.commandBar.keywords.shortcuts'),
+    run: () => ui.openShortcutsHelp(),
+  })
 
   return list
 })

package/app/components/layout/NotificationsInbox.vue

@@ -12,6 +12,7 @@ const { t, te } = useI18n()
 const notifications = useNotificationsStore()
 const ui = useUiStore()
 const execution = useExecutionStore()
+const toast = useToast()
 
 const busy = ref<string | null>(null)
 
@@ -92,6 +93,11 @@ async function act(n: Notification) {
   busy.value = n.id
   try {
     await notifications.act(n.id)
+    toast.add({
+      title: t('layout.notifications.toast.acted'),
+      color: 'success',
+      icon: 'i-lucide-check',
+    })
   } finally {
     busy.value = null
   }
@@ -101,6 +107,11 @@ async function dismiss(n: Notification) {
   busy.value = n.id
   try {
     await notifications.dismiss(n.id)
+    toast.add({
+      title: t('layout.notifications.toast.dismissed'),
+      color: 'neutral',
+      icon: 'i-lucide-check',
+    })
   } finally {
     busy.value = null
   }

package/app/components/panels/InspectorPanel.vue

@@ -145,20 +145,11 @@ const runMenu = computed(() =>
   })),
 )
 
+// Delegate to the shared confirm-gated deletion so the button and the keyboard shortcut
+// (Delete/Backspace) follow the exact same prompt + optimistic-delete + rollback path.
+const { deleteBlock } = useBlockDeletion()
 function remove() {
-  if (!block.value) return
-  const id = block.value.id
-  // Close the inspector right away; the stores hide the block optimistically and
-  // restore it (with a toast) only if the backend delete fails.
-  ui.select(null)
-  // A schedule owns its reused block + run history — removing the schedule deletes
-  // them server-side, so delete the schedule rather than orphaning it.
-  if (schedule.value) {
-    void recurring.remove(schedule.value.id)
-    return
-  }
-  execution.cancel(id)
-  void board.removeBlock(id)
+  void deleteBlock(block.value)
 }
 
 // ---- failed agent run (bootstrap or execution) ------------------------------
@@ -492,6 +483,7 @@ const showOriginalDescription = ref(false)
           size="sm"
           icon="i-lucide-trash-2"
           class="ms-auto"
+          data-testid="inspector-delete"
           :title="deleteLabel"
           @click="remove"
         >

package/app/components/panels/StepContainerStatus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useClipboard } from '@vueuse/core'
 import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
 
@@ -61,6 +62,22 @@ const CONTAINER_STATUS_META: Record<
 
 // The friendly phase label (clone → "Preparing workspace", …); only meaningful while up.
 const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phase, { t, te }))
+
+// Make the container id / URL one-click copyable (they're long and used to be
+// select-and-copy-by-hand), with a toast confirming the copy landed.
+const toast = useToast()
+const { copy, isSupported } = useClipboard()
+async function copyText(text: string) {
+  // Only claim success once the write actually landed — a failed/unsupported clipboard
+  // (insecure context, denied permission) must not show a misleading "Copied" toast.
+  try {
+    if (!isSupported.value) throw new Error('clipboard unsupported')
+    await copy(text)
+    toast.add({ title: t('common.copied'), color: 'success', icon: 'i-lucide-check' })
+  } catch {
+    toast.add({ title: t('common.copyFailed'), color: 'error', icon: 'i-lucide-x' })
+  }
+}
 </script>
 
 <template>
@@ -94,6 +111,16 @@ const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phas
           <dd class="truncate font-mono text-[11px] text-slate-300" :title="step.container.id">
             {{ step.container.id }}
           </dd>
+          <UButton
+            icon="i-lucide-copy"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="ms-auto shrink-0"
+            :title="t('panels.stepMeta.container.copyId')"
+            :aria-label="t('panels.stepMeta.container.copyId')"
+            @click="copyText(step.container.id)"
+          />
         </div>
         <div v-if="step.container?.url" class="flex items-center gap-2">
           <dt class="shrink-0 text-[11px] uppercase tracking-wide text-slate-500">
@@ -109,6 +136,16 @@ const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phas
               {{ step.container.url }}
             </a>
           </dd>
+          <UButton
+            icon="i-lucide-copy"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="ms-auto shrink-0"
+            :title="t('panels.stepMeta.container.copyUrl')"
+            :aria-label="t('panels.stepMeta.container.copyUrl')"
+            @click="copyText(step.container.url)"
+          />
         </div>
       </dl>
     </div>

package/app/components/panels/inspector/TaskDependencies.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const { depLabel } = useDepLabels()
+const { confirm } = useConfirm()
 const { t } = useI18n()
 
 const deps = computed(() =>
@@ -27,8 +29,15 @@ const depMenu = computed(() => {
     }))
 })
 
-function removeDep(depId: string) {
-  board.removeDependency(props.block.id, depId)
+async function removeDep(dep: Block) {
+  const ok = await confirm({
+    title: t('inspector.dependencies.confirmRemove.title'),
+    description: t('inspector.dependencies.confirmRemove.body', { name: label(dep) }),
+    variant: 'destructive',
+    confirmLabel: t('common.remove'),
+    icon: 'i-lucide-unlink',
+  })
+  if (ok) board.removeDependency(props.block.id, dep.id)
 }
 </script>
 
@@ -61,13 +70,18 @@ function removeDep(depId: string) {
             ? t('inspector.dependencies.merged')
             : t('inspector.dependencies.notMerged')
         "
-        @click="removeDep(d.id)"
+        @click="removeDep(d)"
       >
         {{ label(d) }}
         <UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <div v-else class="text-[11px] text-slate-500">{{ t('inspector.dependencies.empty') }}</div>
+    <EmptyState
+      v-else
+      compact
+      icon="i-lucide-git-branch"
+      :title="t('inspector.dependencies.empty')"
+    />
     <div v-if="!runnable" class="mt-1 text-[10px] text-amber-400">
       {{ t('inspector.dependencies.blocked') }}
     </div>

package/app/components/panels/inspector/TaskExecution.vue

@@ -8,6 +8,7 @@ import {
   containerPhaseLabel,
 } from '~/utils/pipelineRender'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -34,6 +35,16 @@ const reviewStageLabel = computed(() =>
 )
 
 const instance = computed(() => execution.getInstance(props.block.executionId))
+
+// Nothing to show yet: no run, no failed run, no PR, and not awaiting a merge — render an
+// empty state instead of a blank gap so the section reads as "no runs yet" rather than broken.
+const isEmpty = computed(
+  () =>
+    !instance.value &&
+    !failedRun.value &&
+    !props.block.pullRequest &&
+    props.block.status !== 'pr_ready',
+)
 // A failed run is no longer executing: a step left mid-flight must stop showing
 // its live "Spinning up…" phase (the shared failure banner renders below).
 const runFailed = computed(() => instance.value?.status === 'failed')
@@ -184,6 +195,9 @@ async function resetRun() {
           :key="i"
           class="rounded-md px-2 py-1"
           :class="i === instance.currentStep ? 'bg-slate-800/70' : ''"
+          data-testid="run-step"
+          :data-step-kind="s.agentKind"
+          :data-step-state="s.state"
         >
           <div class="flex items-center gap-2">
             <!-- Every agent is clickable: it opens the step-detail overlay (timing,
@@ -221,6 +235,7 @@ async function resetRun() {
             <span
               v-if="s.subtasks && s.subtasks.total > 0"
               class="ms-auto font-mono text-[10px] tabular-nums text-slate-300"
+              data-testid="run-subtasks"
               :title="
                 s.subtasks.inProgress > 0
                   ? t('inspector.execution.subtasksProgress', {
@@ -399,6 +414,15 @@ async function resetRun() {
       </p>
     </div>
 
+    <!-- No run yet: read as "nothing here" rather than a blank gap. -->
+    <EmptyState
+      v-if="isEmpty"
+      compact
+      icon="i-lucide-play-circle"
+      :title="t('inspector.execution.empty.title')"
+      :description="t('inspector.execution.empty.body')"
+    />
+
     <!-- PR ready: merge -->
     <UButton
       v-if="block.status === 'pr_ready'"

package/app/components/pipeline/PipelineBuilder.vue

@@ -198,6 +198,18 @@ function edit(p: Pipeline) {
   pipelines.loadForEdit(p)
 }
 
+const { confirm } = useConfirm()
+async function removePipeline(p: Pipeline) {
+  const ok = await confirm({
+    title: t('pipeline.builder.confirmDeletePipeline.title'),
+    description: t('pipeline.builder.confirmDeletePipeline.body', { name: p.name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (ok) void pipelines.removePipeline(p.id)
+}
+
 /** Clone any pipeline (incl. a read-only built-in) into an editable copy, then edit it. */
 async function clone(p: Pipeline) {
   try {
@@ -776,7 +788,7 @@ async function clone(p: Pipeline) {
                     variant="ghost"
                     size="xs"
                     :title="t('pipeline.builder.delete')"
-                    @click="pipelines.removePipeline(p.id)"
+                    @click="removePipeline(p)"
                   />
                 </div>
               </div>

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -13,6 +13,7 @@ const workspace = useWorkspaceStore()
 const models = useModelsStore()
 const toast = useToast()
 const { t, d } = useI18n()
+const { confirm } = useConfirm()
 
 // Personal subscriptions are stored per-user, so they need a signed-in user. When there
 // isn't one (a deployment running without sign-in), block the form so the user doesn't
@@ -141,6 +142,14 @@ async function connect() {
 }
 
 async function disconnect(v: SubscriptionVendor) {
+  const ok = await confirm({
+    title: t('personalSubscriptions.confirmDisconnect.title'),
+    description: t('personalSubscriptions.confirmDisconnect.body', { vendor: vendorLabel(v) }),
+    variant: 'destructive',
+    confirmLabel: t('common.disconnect'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
   try {
     await personal.remove(v)
     // Removing the subscription may drop the workspace's last usable model — refresh so the

package/app/components/providers/VendorCredentialsModal.vue

@@ -14,6 +14,7 @@ const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const creds = useVendorCredentialsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.vendorCredentialsOpen,
@@ -139,9 +140,17 @@ async function add() {
   }
 }
 
-async function remove(id: string) {
+async function remove(cred: { id: string; label: string }) {
+  const ok = await confirm({
+    title: t('providers.vendorCredentials.confirmRemove.title'),
+    description: t('providers.vendorCredentials.confirmRemove.body', { name: cred.label }),
+    variant: 'destructive',
+    confirmLabel: t('common.remove'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   try {
-    await creds.remove(id)
+    await creds.remove(cred.id)
   } catch (e) {
     toast.add({
       title: t('providers.vendorCredentials.toast.removeFailed'),
@@ -258,7 +267,7 @@ function vendorLabel(v: SubscriptionVendor): string {
                   color="error"
                   variant="ghost"
                   size="xs"
-                  @click="remove(c.id)"
+                  @click="remove(c)"
                 />
               </div>
             </div>