@cat-factory/app 0.72.0 → 0.74.0

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

@@ -14,6 +14,7 @@ const agentRuns = useAgentRunsStore()
 const reviews = useReviewStage()
 const toast = useToast()
 const { t } = useI18n()
+const { confirm } = useConfirm()
 
 const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
@@ -106,8 +107,17 @@ function review() {
   ui.focus(props.taskId)
 }
 
-function merge() {
-  execution.mergePr(props.taskId)
+async function merge() {
+  // Merging a PR into its base is consequential and effectively irreversible — gate it behind a
+  // confirm (plain, not the destructive shape). `execution.mergePr` surfaces its own error toast.
+  const ok = await confirm({
+    title: t('board.task.mergeConfirm.title'),
+    description: t('board.task.mergeConfirm.body'),
+    confirmLabel: t('board.task.mergeConfirm.confirm'),
+    icon: 'i-lucide-git-merge',
+  })
+  if (!ok) return
+  await execution.mergePr(props.taskId)
 }
 
 // A `blocked` task is waiting on a human for one of two reasons — an agent-raised

package/app/components/bootstrap/BootstrapModal.vue

@@ -444,7 +444,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <UInput v-model="repoName" placeholder="payments-service" class="w-full" />
+                <UInput
+                  v-model="repoName"
+                  :placeholder="t('bootstrap.targetRepo.namePlaceholder')"
+                  class="w-full"
+                />
                 <UButton
                   color="neutral"
                   variant="subtle"
@@ -493,7 +497,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <UInput
               v-model="description"
-              placeholder="Handles payment intents and refunds"
+              :placeholder="t('bootstrap.description.placeholder')"
               class="w-full"
             />
           </UFormField>
@@ -640,7 +644,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               <USelect
                 v-model="archRepoSlug"
                 :items="repoOptions"
-                placeholder="owner/name"
+                :placeholder="t('bootstrap.arch.pickRepo.placeholder')"
                 class="w-full"
               />
             </UFormField>
@@ -650,14 +654,26 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.arch.name.description')"
               required
             >
-              <UInput v-model="archForm.name" placeholder="Service Template" class="w-full" />
+              <UInput
+                v-model="archForm.name"
+                :placeholder="t('bootstrap.arch.name.placeholder')"
+                class="w-full"
+              />
             </UFormField>
             <div class="grid grid-cols-2 gap-2">
               <UFormField :label="t('bootstrap.arch.repoOwner')" required>
-                <UInput v-model="archForm.repoOwner" placeholder="acme" class="w-full" />
+                <UInput
+                  v-model="archForm.repoOwner"
+                  :placeholder="t('bootstrap.arch.repoOwnerPlaceholder')"
+                  class="w-full"
+                />
               </UFormField>
               <UFormField :label="t('bootstrap.arch.repoName')" required>
-                <UInput v-model="archForm.repoName" placeholder="service-template" class="w-full" />
+                <UInput
+                  v-model="archForm.repoName"
+                  :placeholder="t('bootstrap.arch.repoNamePlaceholder')"
+                  class="w-full"
+                />
               </UFormField>
             </div>
             <UFormField :label="t('bootstrap.description.label')">
@@ -674,7 +690,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               <UTextarea
                 v-model="archForm.defaultInstructions"
                 :rows="2"
-                placeholder="e.g. keep the structure; rename packages to match the new service"
+                :placeholder="t('bootstrap.arch.defaultInstructions.placeholder')"
                 class="w-full"
               />
             </UFormField>

package/app/components/brainstorm/BrainstormWindow.vue

@@ -256,6 +256,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/clarity/ClarityReviewWindow.vue

@@ -246,6 +246,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -98,6 +98,8 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/focus/BlockFocusView.vue

@@ -62,6 +62,8 @@ function openApprovalFor(approvalId: string) {
   <div
     v-if="block && statusMeta && typeMeta"
     class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    role="dialog"
+    aria-modal="true"
   >
     <!-- header / breadcrumb -->
     <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/followUp/FollowUpWindow.vue

@@ -90,6 +90,8 @@ const STATUS_META: Record<
     >
       <div
         class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/gates/GateResultView.vue

@@ -170,6 +170,8 @@ const conflictVerdict = computed(() => {
     >
       <div
         class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/github/AddServiceFromRepoModal.vue

@@ -4,14 +4,14 @@
 // it in a container), this just links a repo the App can access to a fresh,
 // `ready` service frame. The workspace need not track the repo yet: the backend
 // links + syncs it on import. If the App can't see the wanted repo, the user
-// grants it access from here, then refreshes the list.
+// grants it access from here, then searches for it again.
 //
 // MONOREPO support: a repo flagged a monorepo can back SEVERAL services, each
 // pinned to a subdirectory. When the selected repo is a monorepo, the user
 // browses its tree and picks the service's directory before adding (and may add
 // more than one, a subset of the repo's services).
 import { refDebounced } from '@vueuse/core'
-import type { FrameRepoType } from '~/types/domain'
+import type { FrameRepoType, GitHubAvailableRepo } from '~/types/domain'
 import GitHubConnect from '~/components/github/GitHubConnect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
@@ -42,7 +42,10 @@ const adding = ref(false)
 async function loadRepos() {
   try {
     await github.probe()
-    if (github.connected) await Promise.all([github.load(), github.loadAvailableRepos()])
+    // Load only the linked-repo projection (to flag repos already on the board). The
+    // available-repos list is NOT prefetched — it's searched server-side on demand once
+    // the user types (see the repoQueryRaw watcher), so a wide install isn't shipped whole.
+    if (github.connected) await github.load()
   } catch {
     // Integration off / unreachable → the picker stays empty, GitHubConnect shows.
   }
@@ -66,76 +69,57 @@ const onBoardIds = computed(
   () => new Set(github.repos.filter((r) => r.blockId).map((r) => r.githubId)),
 )
 
-const repoItems = computed(() =>
-  github.availableRepos.map((r) => {
-    const onBoard = onBoardIds.value.has(r.githubId) && !r.isMonorepo
-    const suffix = [
-      r.private ? t('github.addService.repoLabel.private') : '',
-      r.isMonorepo ? t('github.addService.repoLabel.monorepo') : '',
-      onBoard ? t('github.addService.repoLabel.onBoard') : '',
-    ].join('')
-    return {
-      label: `${r.owner}/${r.name}${suffix}`,
-      // Searched on (lowercased once) — the owner/name, so the filter matches either.
-      search: `${r.owner}/${r.name}`.toLowerCase(),
-      value: r.githubId,
-      disabled: onBoard,
-    }
-  }),
-)
+// Map an available repo to a combobox item. The label carries the private/monorepo/
+// on-board suffixes; an on-board whole-repo is disabled (it already backs a service).
+function toRepoItem(r: GitHubAvailableRepo) {
+  const onBoard = onBoardIds.value.has(r.githubId) && !r.isMonorepo
+  const suffix = [
+    r.private ? t('github.addService.repoLabel.private') : '',
+    r.isMonorepo ? t('github.addService.repoLabel.monorepo') : '',
+    onBoard ? t('github.addService.repoLabel.onBoard') : '',
+  ].join('')
+  return { label: `${r.owner}/${r.name}${suffix}`, value: r.githubId, disabled: onBoard }
+}
+
+const repoItems = computed(() => github.availableRepos.map(toRepoItem))
 
-// The PAT (or a wide App install) can expose hundreds of repos, far too many for a plain
-// dropdown — so the picker is a typeahead combobox. The user types and matching repos
-// surface: matching is a debounced, case-insensitive substring over `owner/name` (so any
-// part of either matches). For a LARGE list the search only kicks in once at least
-// MIN_SEARCH_LEN characters are typed, to keep early keystrokes from listing hundreds of
-// rows; but when the whole list is small enough to browse (<= BROWSE_ALL_MAX) the gate is
-// dropped and every repo is offered up-front (typing then narrows), so a handful of repos
-// stays pickable without having to type — matching the old always-open dropdown.
+// A wide App install (or a PAT) can expose hundreds of repos, far too many to prefetch and
+// filter in the browser — so the picker searches SERVER-SIDE. Nothing is fetched on open;
+// once the user types at least MIN_SEARCH_LEN characters the (debounced) query is sent to
+// the backend, which returns only the `owner/name` matches. Below the gate the list stays
+// empty and the field prompts for more characters.
 const MIN_SEARCH_LEN = 3
-const BROWSE_ALL_MAX = 25
 const repoSearch = ref('')
 const repoSearchDebounced = refDebounced(repoSearch, 250)
-// Trimmed (original case) for display; lowercased for matching.
+// Trimmed for display + the min-length gate; the backend matches case-insensitively.
 const repoQueryRaw = computed(() => repoSearchDebounced.value.trim())
-const repoQuery = computed(() => repoQueryRaw.value.toLowerCase())
-
-// Small lists are browseable without typing; large lists require the min-length gate.
-const browseAll = computed(() => repoItems.value.length <= BROWSE_ALL_MAX)
-// True only on a large list whose query is still too short to search.
-const belowMinChars = computed(() => !browseAll.value && repoQuery.value.length < MIN_SEARCH_LEN)
-
-// Matches for the current query. On a small list an empty query lists everything; on a
-// large list nothing surfaces until the query passes the min length.
-const queryMatches = computed(() => {
-  if (belowMinChars.value) return []
-  if (!repoQuery.value) return repoItems.value
-  return repoItems.value.filter((r) => r.search.includes(repoQuery.value))
+
+// True while the query is too short to search — the picker shows the "type N chars" hint.
+const belowMinChars = computed(() => repoQueryRaw.value.length < MIN_SEARCH_LEN)
+
+// The selected repo, captured when picked (below). The loaded list is volatile — a later
+// search replaces it — so the selection can't be derived from `availableRepos` after the fact.
+const selectedRepo = ref<GitHubAvailableRepo | undefined>(undefined)
+
+// Fetch matches server-side as the debounced query changes; below the gate clear the list
+// so stale matches don't linger (the hint shows instead). Granting the App access needs no
+// manual refresh — the next search hits GitHub live, with no cached list to invalidate.
+watch(repoQueryRaw, (q) => {
+  void github.loadAvailableRepos(q.length >= MIN_SEARCH_LEN ? q : '')
 })
 
-// Items fed to the combobox: the query matches plus the current selection kept present,
-// so the menu can still render the selected repo's label once the (reset) search term no
-// longer matches it.
+// The server already filtered, so the matches ARE the loaded repos (empty below the gate).
+const queryMatches = computed(() => (belowMinChars.value ? [] : repoItems.value))
+
+// Items fed to the combobox: the matches plus the current selection kept present, so the
+// menu still renders the selected repo's label after a later search replaces the list.
 const repoMenuItems = computed(() => {
   const matches = queryMatches.value
   if (selectedRepoId.value === undefined) return matches
   if (matches.some((r) => r.value === selectedRepoId.value)) return matches
-  const selected = repoItems.value.find((r) => r.value === selectedRepoId.value)
-  return selected ? [selected, ...matches] : matches
+  return selectedRepo.value ? [toRepoItem(selectedRepo.value), ...matches] : matches
 })
 
-// The count summary under the field is shown only when it's meaningful: there are matches
-// to count AND the user is actually searching (or browsing a small list). After a
-// selection resets the search term this is false, so the field doesn't claim "Showing 0"
-// or nag "type 3 characters" right under the repo the user just picked. The zero-match and
-// min-length messages are owned by the combobox's own empty state instead.
-const showResultCount = computed(() => !belowMinChars.value && queryMatches.value.length > 0)
-
-const hasRepos = computed(() => github.availableRepos.length > 0)
-const selectedRepo = computed(() =>
-  github.availableRepos.find((r) => r.githubId === selectedRepoId.value),
-)
-
 // ---- monorepo flag + directory picker ------------------------------------
 
 // The monorepo flag is MODAL-LOCAL state, sent as part of the add-service request
@@ -151,8 +135,14 @@ function toggleMonorepo(value: boolean) {
   selectedDirectory.value = undefined
 }
 
-// On repo change, seed the toggle from the repo's persisted flag and clear the rest.
-watch(selectedRepoId, () => {
+// On repo change, capture the picked repo (from the volatile loaded list, before a later
+// search replaces it), seed the monorepo toggle from its persisted flag, and clear the rest.
+watch(selectedRepoId, (id) => {
+  if (id === undefined) selectedRepo.value = undefined
+  else {
+    const found = github.availableRepos.find((r) => r.githubId === id)
+    if (found) selectedRepo.value = found
+  }
   isMonorepo.value = selectedRepo.value?.isMonorepo === true
   selectedDirectory.value = undefined
   configuredBlockId.value = undefined
@@ -286,10 +276,7 @@ function done() {
             :description="t('github.addService.repositoryHint')"
             required
           >
-            <div v-if="!hasRepos" class="text-sm text-slate-400">
-              {{ t('github.addService.noReposAvailable') }}
-            </div>
-            <div v-else class="space-y-1.5">
+            <div class="space-y-1.5">
               <UInputMenu
                 v-model="selectedRepoId"
                 v-model:search-term="repoSearch"
@@ -317,19 +304,11 @@ function done() {
                       t('github.addService.searchMinChars', { min: MIN_SEARCH_LEN }, MIN_SEARCH_LEN)
                     }}
                   </span>
-                  <span v-else>{{
+                  <span v-else-if="!github.loadingAvailable">{{
                     t('github.addService.noMatches', { query: repoQueryRaw })
                   }}</span>
                 </template>
               </UInputMenu>
-              <p v-if="showResultCount" class="text-xs text-slate-500">
-                {{
-                  t('github.addService.showingCount', {
-                    shown: queryMatches.length,
-                    total: repoItems.length,
-                  })
-                }}
-              </p>
             </div>
           </UFormField>
 
@@ -402,16 +381,6 @@ function done() {
             >
               {{ t('github.addService.grantAccess') }}
             </UButton>
-            <UButton
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              icon="i-lucide-refresh-cw"
-              :loading="github.loadingAvailable"
-              @click="github.loadAvailableRepos()"
-            >
-              {{ t('github.addService.refreshList') }}
-            </UButton>
           </div>
 
           <div class="flex justify-end gap-2">

package/app/components/humanTest/HumanTestWindow.vue

@@ -142,6 +142,8 @@ const canDestroy = computed(
     >
       <div
         class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/layout/ConnectionStatusBanner.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+// A slim top strip shown when the real-time WebSocket has dropped and is reconnecting, so a
+// silently-frozen board (events stop arriving, nothing updates) is no longer indistinguishable
+// from an idle one. `useWorkspaceStream` already reconnects with exponential backoff and
+// resyncs on reconnect — this only makes that state visible. The `connected` ref is passed in
+// as a prop (the page owns the single stream instance; creating another here would open a
+// second socket).
+const props = defineProps<{ connected: boolean }>()
+
+const { t } = useI18n()
+
+// Only surface a RE-connection, never the initial connect: once we've been connected we know a
+// later drop is a real interruption worth flagging. A short debounce rides out a quick socket
+// flap so a momentary blip doesn't flash the strip.
+const everConnected = ref(false)
+const showAfterDelay = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.connected,
+  (connected) => {
+    if (connected) {
+      everConnected.value = true
+      showAfterDelay.value = false
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      return
+    }
+    if (!everConnected.value || timer) return
+    timer = setTimeout(() => {
+      showAfterDelay.value = true
+      timer = null
+    }, 1500)
+  },
+  { immediate: true },
+)
+
+const visible = computed(() => everConnected.value && !props.connected && showAfterDelay.value)
+
+// Don't leave a pending debounce timer firing into a torn-down component.
+onBeforeUnmount(() => {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="visible"
+      class="pointer-events-none absolute inset-x-0 top-0 z-50 flex justify-center px-4 pt-2"
+    >
+      <div
+        class="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-500/60 bg-amber-950/90 px-3 py-1.5 text-xs text-amber-100 shadow-lg backdrop-blur"
+        role="status"
+        aria-live="polite"
+        data-testid="stream-reconnecting"
+      >
+        <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin" />
+        <span>{{ t('app.reconnecting') }}</span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/layout/NotificationsInbox.vue

@@ -16,6 +16,17 @@ const toast = useToast()
 
 const busy = ref<string | null>(null)
 
+/** Toast a failed act/dismiss — the store throws, so without this a failure was silent and the
+ * item just stayed in the inbox with no explanation. */
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
 /** Per-type display metadata (icon, colour). The primary-action label is resolved
  * separately through the i18n catalog (`ACTION_KEYS`). */
 type Accent = 'warning' | 'primary' | 'error'
@@ -98,6 +109,8 @@ async function act(n: Notification) {
       color: 'success',
       icon: 'i-lucide-check',
     })
+  } catch (e) {
+    notifyError(t('layout.notifications.toast.actFailed'), e)
   } finally {
     busy.value = null
   }
@@ -112,6 +125,8 @@ async function dismiss(n: Notification) {
       color: 'neutral',
       icon: 'i-lucide-check',
     })
+  } catch (e) {
+    notifyError(t('layout.notifications.toast.dismissFailed'), e)
   } finally {
     busy.value = null
   }

package/app/components/panels/GenericStructuredResultView.vue

@@ -60,6 +60,8 @@ const customJson = computed<string | null>(() => {
     >
       <div
         class="m-4 flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/panels/InspectorPanel.vue

@@ -54,6 +54,21 @@ const block = computed<Block | undefined>(() =>
 )
 const level = computed(() => block.value?.level ?? 'frame')
 const isFrame = computed(() => level.value === 'frame')
+
+// The title to fall back to when the user clears the field and blurs. Editing the title binds
+// straight to the store object via v-model, so there is nothing to fall back to otherwise —
+// restore this rather than persisting (and showing) an empty title. It is captured fresh at
+// edit start (`captureTitle` on focus), so it always reflects the current known-good value —
+// robust against a failed save (which rolls the title back) and an external rename of the same
+// block. Seeded here on block switch so the fallback is sane even before the first focus.
+const lastSavedTitle = ref('')
+watch(
+  () => block.value?.id,
+  () => {
+    lastSavedTitle.value = block.value?.title ?? ''
+  },
+  { immediate: true },
+)
 const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
 const isTask = computed(() => level.value === 'task')
 const isEpic = computed(() => level.value === 'epic')
@@ -103,11 +118,24 @@ const started = computed(
 )
 const editable = computed(() => !started.value)
 
+// Snapshot the current title as the fallback the moment editing begins, so it reflects the
+// last known-good value (survives a failed save or an external rename) rather than a value we
+// only optimistically assumed had persisted.
+function captureTitle() {
+  lastSavedTitle.value = block.value?.title ?? ''
+}
 function saveTitle() {
   const b = block.value
   if (!b) return
   const next = b.title.trim()
-  if (next) board.updateBlock(b.id, { title: next })
+  // An emptied title can't persist — restore the last saved value so the field never shows a
+  // blank the user didn't intend (and the board keeps a real label).
+  if (!next) {
+    b.title = lastSavedTitle.value
+    return
+  }
+  b.title = next
+  board.updateBlock(b.id, { title: next })
 }
 function saveDescription() {
   const b = block.value
@@ -253,6 +281,7 @@ const showOriginalDescription = ref(false)
           size="sm"
           class="w-full"
           :placeholder="t('panels.inspector.titlePlaceholder')"
+          @focus="captureTitle"
           @change="saveTitle"
           @blur="saveTitle"
         />

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

@@ -18,6 +18,7 @@ const ui = useUiStore()
 const models = useModelsStore()
 const reviews = useReviewStage()
 const { t, te } = useI18n()
+const { confirm } = useConfirm()
 
 // The async stage this task's iterative reviewer gate (requirements-review / clarity-review)
 // is mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate is
@@ -146,6 +147,16 @@ async function stopRun() {
 const resetting = ref(false)
 async function resetRun() {
   if (resetting.value) return
+  // Destructive: discards the run and returns the task to planned — gate it behind a confirm,
+  // matching the confirm-then-mutate contract the board delete path uses.
+  const ok = await confirm({
+    title: t('inspector.execution.resetConfirm.title'),
+    description: t('inspector.execution.resetConfirm.body'),
+    variant: 'destructive',
+    confirmLabel: t('inspector.execution.resetConfirm.confirm'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   resetting.value = true
   try {
     await execution.cancel(props.block.id)
@@ -153,6 +164,19 @@ async function resetRun() {
     resetting.value = false
   }
 }
+
+// Merging a PR is consequential and effectively irreversible — confirm first. `execution.mergePr`
+// surfaces its own error toast, so no catch is needed here.
+async function mergePr() {
+  const ok = await confirm({
+    title: t('inspector.execution.mergeConfirm.title'),
+    description: t('inspector.execution.mergeConfirm.body'),
+    confirmLabel: t('inspector.execution.mergeConfirm.confirm'),
+    icon: 'i-lucide-git-merge',
+  })
+  if (!ok) return
+  await execution.mergePr(props.block.id)
+}
 </script>
 
 <template>
@@ -436,7 +460,7 @@ async function resetRun() {
       size="sm"
       icon="i-lucide-git-merge"
       block
-      @click="execution.mergePr(block.id)"
+      @click="mergePr"
     >
       {{ t('inspector.execution.mergePr') }}
     </UButton>