@cat-factory/app 0.69.1 → 0.70.1

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

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {
+  Block,
+  FrontendBackendBinding,
+  FrontendConfig,
+  FrontendEnvInjection,
+  FrontendPackageManager,
+  FrontendServeMode,
+} from '~/types/domain'
+
+// Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
+// frontend for a self-contained UI test (+ an optional browsable preview on local/node),
+// and its backend bindings. Each binding names an env var the frontend reads for an upstream
+// URL and where that URL resolves — a bound SERVICE frame's ephemeral env (the service under
+// test), or WireMock. The bindings ARE the board's frontend→service links. Persisted as a
+// serialized FrontendConfig on the block via the shared updateBlock PATCH.
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const { t } = useI18n()
+
+const config = computed<FrontendConfig>(() => props.block.frontendConfig ?? { backendBindings: [] })
+const bindings = computed(() => config.value.backendBindings ?? [])
+
+// Merge a partial onto the current config, preserving the other fields, and persist. A field
+// set to undefined is dropped (JSON.stringify omits it), so the harness default applies.
+function save(patch: Partial<FrontendConfig>) {
+  const base: FrontendConfig = props.block.frontendConfig ?? { backendBindings: [] }
+  board.updateBlock(props.block.id, { frontendConfig: { ...base, ...patch } })
+}
+
+// A trimmed string field: an empty value clears it (undefined) so the harness default applies.
+function saveText(field: keyof FrontendConfig, value: string) {
+  save({ [field]: value.trim() || undefined } as Partial<FrontendConfig>)
+}
+
+// The serve port must be an integer in [1, 65535] (the contract's schema bounds). Coerce and
+// clamp to a valid port, dropping anything else to undefined (clears it → the harness default),
+// so an out-of-range or non-integer value never 422s the PATCH.
+function saveServePort(value: string) {
+  const n = Math.trunc(Number(value.trim()))
+  save({ servePort: Number.isInteger(n) && n >= 1 && n <= 65535 ? n : undefined })
+}
+
+const PACKAGE_MANAGERS: FrontendPackageManager[] = ['pnpm', 'npm', 'yarn']
+const packageManager = computed(() => config.value.packageManager ?? 'pnpm')
+const serveMode = computed<FrontendServeMode>(() => config.value.serveMode ?? 'static')
+const envInjection = computed<FrontendEnvInjection>(() => config.value.envInjection ?? 'build')
+
+// The service frames on the board a binding can point at (its ephemeral env URL becomes the
+// service under test). Every other binding resolves to WireMock.
+const serviceFrames = computed(() => board.frames.filter((b) => b.type === 'service'))
+
+// USelect options for a binding's source: WireMock, or one of the service frames.
+const sourceItems = computed(() => [
+  { label: t('inspector.frontendConfig.bindings.mock'), value: 'mock' },
+  ...serviceFrames.value.map((f) => ({ label: f.title || f.id, value: f.id })),
+])
+
+// The select value for a binding: 'mock', or the bound service block id.
+function sourceValue(binding: FrontendBackendBinding): string {
+  return binding.source.kind === 'service' ? binding.source.serviceBlockId : 'mock'
+}
+
+function replaceBinding(index: number, next: FrontendBackendBinding) {
+  save({ backendBindings: bindings.value.map((b, i) => (i === index ? next : b)) })
+}
+
+function setBindingEnvVar(index: number, value: string) {
+  const b = bindings.value[index]
+  if (b) replaceBinding(index, { ...b, envVar: value.trim() })
+}
+
+function setBindingSource(index: number, value: string) {
+  const b = bindings.value[index]
+  if (!b) return
+  const source: FrontendBackendBinding['source'] =
+    value === 'mock' ? { kind: 'mock' } : { kind: 'service', serviceBlockId: value }
+  replaceBinding(index, { ...b, source })
+}
+
+function addBinding() {
+  save({ backendBindings: [...bindings.value, { envVar: '', source: { kind: 'mock' } }] })
+}
+
+function removeBinding(index: number) {
+  save({ backendBindings: bindings.value.filter((_, i) => i !== index) })
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      {{ t('inspector.frontendConfig.title') }}
+    </div>
+    <p class="text-[11px] leading-snug text-slate-500">
+      {{ t('inspector.frontendConfig.hint') }}
+    </p>
+
+    <!-- Package manager -->
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.packageManager')
+      }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="pm in PACKAGE_MANAGERS"
+          :key="pm"
+          :color="packageManager === pm ? 'primary' : 'neutral'"
+          :variant="packageManager === pm ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ packageManager: pm })"
+        >
+          {{ pm }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Build: install command + build script + output dir -->
+    <div class="space-y-1">
+      <label class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.installCommand')
+      }}</label>
+      <UInput
+        :model-value="config.installCommand ?? ''"
+        size="xs"
+        class="font-mono"
+        maxlength="400"
+        placeholder="pnpm install --frozen-lockfile"
+        @blur="(e: FocusEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)"
+        @keydown.enter="
+          (e: KeyboardEvent) => saveText('installCommand', (e.target as HTMLInputElement).value)
+        "
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.buildScript')
+        }}</label>
+        <UInput
+          :model-value="config.buildScript ?? ''"
+          size="xs"
+          class="font-mono"
+          maxlength="200"
+          placeholder="build"
+          @blur="(e: FocusEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)"
+          @keydown.enter="
+            (e: KeyboardEvent) => saveText('buildScript', (e.target as HTMLInputElement).value)
+          "
+        />
+      </div>
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.outputDir')
+        }}</label>
+        <UInput
+          :model-value="config.outputDir ?? ''"
+          size="xs"
+          class="font-mono"
+          maxlength="400"
+          placeholder="dist"
+          @blur="(e: FocusEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)"
+          @keydown.enter="
+            (e: KeyboardEvent) => saveText('outputDir', (e.target as HTMLInputElement).value)
+          "
+        />
+      </div>
+    </div>
+
+    <!-- Serve: mode (static vs command) + serve script (command mode) + port -->
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">{{ t('inspector.frontendConfig.serveMode') }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          :color="serveMode === 'static' ? 'primary' : 'neutral'"
+          :variant="serveMode === 'static' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ serveMode: 'static' })"
+        >
+          {{ t('inspector.frontendConfig.serveStatic') }}
+        </UButton>
+        <UButton
+          :color="serveMode === 'command' ? 'primary' : 'neutral'"
+          :variant="serveMode === 'command' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ serveMode: 'command' })"
+        >
+          {{ t('inspector.frontendConfig.serveCommand') }}
+        </UButton>
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.serveModeHint') }}
+      </p>
+    </div>
+
+    <div v-if="serveMode === 'command'" class="space-y-1">
+      <label class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.serveScript')
+      }}</label>
+      <UInput
+        :model-value="config.serveScript ?? ''"
+        size="xs"
+        class="font-mono"
+        maxlength="200"
+        placeholder="preview"
+        @blur="(e: FocusEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)"
+        @keydown.enter="
+          (e: KeyboardEvent) => saveText('serveScript', (e.target as HTMLInputElement).value)
+        "
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.servePort')
+        }}</label>
+        <UInput
+          :model-value="config.servePort != null ? String(config.servePort) : ''"
+          type="number"
+          min="1"
+          max="65535"
+          step="1"
+          size="xs"
+          class="font-mono"
+          placeholder="8080"
+          @blur="(e: FocusEvent) => saveServePort((e.target as HTMLInputElement).value)"
+        />
+      </div>
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.frontendConfig.mockMappingsPath')
+        }}</label>
+        <UInput
+          :model-value="config.mockMappingsPath ?? ''"
+          size="xs"
+          class="font-mono"
+          maxlength="400"
+          placeholder="mocks/"
+          @blur="
+            (e: FocusEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
+          "
+          @keydown.enter="
+            (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
+          "
+        />
+      </div>
+    </div>
+
+    <!-- Env injection: build-time env vars vs a runtime window.env shim -->
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">{{
+        t('inspector.frontendConfig.envInjection')
+      }}</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          :color="envInjection === 'build' ? 'primary' : 'neutral'"
+          :variant="envInjection === 'build' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ envInjection: 'build' })"
+        >
+          {{ t('inspector.frontendConfig.envBuild') }}
+        </UButton>
+        <UButton
+          :color="envInjection === 'runtime' ? 'primary' : 'neutral'"
+          :variant="envInjection === 'runtime' ? 'soft' : 'ghost'"
+          size="xs"
+          @click="save({ envInjection: 'runtime' })"
+        >
+          {{ t('inspector.frontendConfig.envRuntime') }}
+        </UButton>
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.envInjectionHint') }}
+      </p>
+    </div>
+
+    <!-- Backend bindings: env var → upstream. These double as the board's frontend→service links. -->
+    <div class="space-y-2 border-t border-slate-800 pt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ t('inspector.frontendConfig.bindings.title') }}
+        </span>
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          @click="addBinding"
+        />
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.bindings.hint') }}
+      </p>
+
+      <div v-if="bindings.length" class="space-y-1.5">
+        <div v-for="(b, i) in bindings" :key="i" class="flex items-center gap-1">
+          <UInput
+            :model-value="b.envVar"
+            size="xs"
+            class="flex-1 font-mono"
+            maxlength="200"
+            placeholder="PUB_BACKEND_URL"
+            @blur="(e: FocusEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)"
+            @keydown.enter="
+              (e: KeyboardEvent) => setBindingEnvVar(i, (e.target as HTMLInputElement).value)
+            "
+          />
+          <USelect
+            :model-value="sourceValue(b)"
+            :items="sourceItems"
+            size="xs"
+            class="flex-1"
+            @update:model-value="(v: string) => setBindingSource(i, v)"
+          />
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-x"
+            :title="t('inspector.frontendConfig.bindings.remove')"
+            @click="removeBinding(i)"
+          />
+        </div>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        {{ t('inspector.frontendConfig.bindings.empty') }}
+      </div>
+    </div>
+
+    <!-- Browsable preview (local/node only). -->
+    <div class="border-t border-slate-800 pt-2">
+      <UCheckbox
+        :model-value="config.previewEnabled === true"
+        :label="t('inspector.frontendConfig.previewEnabled')"
+        size="xs"
+        @update:model-value="
+          (v: boolean | 'indeterminate') => save({ previewEnabled: v === true ? true : undefined })
+        "
+      />
+      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+        {{ t('inspector.frontendConfig.previewHint') }}
+      </p>
+    </div>
+  </div>
+</template>

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>

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -13,6 +13,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const store = useLocalModelsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.localModelsOpen,
@@ -140,6 +141,16 @@ async function save() {
 }
 
 async function remove(p: LocalRunner) {
+  const ok = await confirm({
+    title: t('settings.localModelEndpoints.confirmRemove.title'),
+    description: t('settings.localModelEndpoints.confirmRemove.body', {
+      name: LOCAL_RUNNER_LABELS[p],
+    }),
+    variant: 'destructive',
+    confirmLabel: t('common.remove'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await store.remove(p)

package/app/components/settings/MergeThresholdsPanel.vue

@@ -29,6 +29,7 @@ const CONCERN_LEVELS = computed<{ value: RequirementConcernLevel; label: string
 
 const store = useMergePresetsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 // Local editable copy per preset, kept in sync with the store. Percentages are
 // edited 0..100 and stored 0..1.
@@ -116,6 +117,14 @@ async function makeDefault(p: MergeThresholdPreset) {
 }
 
 async function remove(p: MergeThresholdPreset) {
+  const ok = await confirm({
+    title: t('settings.mergeThresholds.confirmDelete.title'),
+    description: t('settings.mergeThresholds.confirmDelete.body', { name: p.name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = p.id
   try {
     await store.remove(p.id)

package/app/components/settings/ModelConfigurationPanel.vue

@@ -25,6 +25,7 @@ const agents = useAgentsStore()
 const creds = useVendorCredentialsStore()
 const workspace = useWorkspaceStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.modelConfigOpen,
@@ -144,6 +145,14 @@ async function setDefault(p: ModelPreset) {
 }
 
 async function remove(p: ModelPreset) {
+  const ok = await confirm({
+    title: t('settings.modelConfiguration.confirmDelete.title'),
+    description: t('settings.modelConfiguration.confirmDelete.body', { name: p.name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await presets.remove(p.id)

package/app/components/settings/UserSecretsSection.vue

@@ -12,6 +12,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const store = useUserSecretsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.userSecretsOpen,
@@ -117,6 +118,16 @@ async function save() {
 }
 
 async function remove() {
+  const ok = await confirm({
+    title: t('settings.userSecrets.confirmRemove.title'),
+    description: t('settings.userSecrets.confirmRemove.body', {
+      name: descriptor.value?.label ?? t('settings.userSecrets.secretFallback'),
+    }),
+    variant: 'destructive',
+    confirmLabel: t('common.remove'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await store.remove(kind.value)

package/app/components/slack/SlackPanel.vue

@@ -13,6 +13,7 @@ const ui = useUiStore()
 const slack = useSlackStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.slackOpen,
@@ -108,6 +109,14 @@ async function connectWithToken() {
 }
 
 async function disconnect() {
+  const ok = await confirm({
+    title: t('slack.confirmDisconnect.title'),
+    description: t('slack.confirmDisconnect.body'),
+    variant: 'destructive',
+    confirmLabel: t('common.disconnect'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
   try {
     await slack.disconnect()
   } catch (e) {