@cat-factory/app 0.70.0 → 0.71.0

package/app/components/layout/InfraSetupBanner.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// Loud prompt that this deployment needs a piece of infrastructure the operator hasn't set up
+// yet, so a whole class of agents can't run. Driven off the server-computed `infraSetup`
+// snapshot projection (`not_defined` per area) — so it only fires on a runtime that actually
+// requires the piece (the runner-pool executor matters on remote Node; binary storage on any
+// runtime whose account picked no backend — incl. Cloudflare without an ARTIFACT_BUCKET binding;
+// ephemeral test environments on any runtime that wires the integration).
+//
+// Positioning/stacking against the sibling advisory banners (AI-readiness, provider-config) is
+// owned by the shared, click-through banner column in `pages/index.vue` — so concurrent prompts
+// stack vertically instead of drawing on top of each other. This component only stacks its OWN
+// (up to three) area cards; each card re-enables pointer events while the column stays inert.
+//
+// Dismissal offers the two choices the product asks for: hide for THIS SESSION (a ui-store flag,
+// cleared on workspace switch, re-nags next load) or "I'm OK with the limitations, don't notify
+// me again" — a PERMANENT, per-USER dismissal persisted in localStorage keyed by the signed-in
+// user id (so it's this-user-only and survives reloads).
+//
+// Scope note: the permanent dismissal is per-USER and DEPLOYMENT-wide, not per-account. That is
+// exact for `agentExecutor`/`ephemeralEnvironments` (deployment-level wiring). `binaryStorage` is
+// per-account, so a user who permanently silences it on one account won't be re-nagged on another
+// account that also has no storage — an accepted trade-off (the setting stays reachable from
+// account settings, and the SESSION dismissal re-nags on the next load regardless).
+//
+// Freshness note: `infraSetup` is a server projection recomputed only on snapshot (re)load, so a
+// banner clears on the next board load after the operator configures the area via the deep-link,
+// not the instant the config panel saves.
+import { useLocalStorage } from '@vueuse/core'
+import { computed } from 'vue'
+// The localStorage key holding the permanent per-user dismissals lives in `@cat-factory/contracts`
+// (a dependency-free package the SPA and the e2e suite both import), so the key + shape can't drift
+// between this component and the e2e seed in `backend/internal/e2e/tests/helpers.ts` (`pinWorkspace`).
+import { INFRA_SETUP_DISMISSED_STORAGE_KEY } from '@cat-factory/contracts'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { InfraSetupArea } from '~/types/domain'
+
+const { t } = useI18n()
+const ui = useUiStore()
+const auth = useAuthStore()
+const workspace = useWorkspaceStore()
+
+// Severity order: no executor blocks EVERY agent, so it leads; a missing test environment blocks
+// only testing agents; missing storage only degrades the UI-tester's screenshots.
+const AREAS: InfraSetupArea[] = ['agentExecutor', 'ephemeralEnvironments', 'binaryStorage']
+
+// Exhaustive per-area presentation (an exhaustive `Record<InfraSetupArea, …>`, so adding an area
+// without a meta entry fails typecheck — the tier-2 guard). The i18n keys are resolved
+// dynamically (`t(AREA_META[area].titleKey)`), so tier-1 typed-key checking doesn't cover them;
+// the `i18n:check` drift guard (tier 3) catches any that are absent from the catalog. `action`
+// deep-links into the relevant setup surface.
+const AREA_META: Record<
+  InfraSetupArea,
+  { icon: string; titleKey: string; bodyKey: string; actionKey: string; onConfigure: () => void }
+> = {
+  agentExecutor: {
+    icon: 'i-lucide-server-cog',
+    titleKey: 'layout.infraSetupBanner.agentExecutor.title',
+    bodyKey: 'layout.infraSetupBanner.agentExecutor.body',
+    actionKey: 'layout.infraSetupBanner.agentExecutor.action',
+    onConfigure: () => ui.openProviderConnection('runner-pool'),
+  },
+  ephemeralEnvironments: {
+    icon: 'i-lucide-flask-conical',
+    titleKey: 'layout.infraSetupBanner.ephemeralEnvironments.title',
+    bodyKey: 'layout.infraSetupBanner.ephemeralEnvironments.body',
+    actionKey: 'layout.infraSetupBanner.ephemeralEnvironments.action',
+    onConfigure: () => ui.openProviderConnection('environment'),
+  },
+  binaryStorage: {
+    icon: 'i-lucide-hard-drive',
+    titleKey: 'layout.infraSetupBanner.binaryStorage.title',
+    bodyKey: 'layout.infraSetupBanner.binaryStorage.body',
+    actionKey: 'layout.infraSetupBanner.binaryStorage.action',
+    onConfigure: () => ui.openContentStorageSettings(),
+  },
+}
+
+// Permanent, per-user dismissals: one shared localStorage record keyed BY user id (so it's
+// scoped to the signed-in user and doesn't leak across accounts on a shared browser). No
+// signed-in user (local/auth-off single-user mode) ⇒ the `local` bucket.
+const permanentDismissed = useLocalStorage<Record<string, InfraSetupArea[]>>(
+  INFRA_SETUP_DISMISSED_STORAGE_KEY,
+  {},
+)
+const userKey = computed(() => auth.user?.id ?? 'local')
+const dismissedForUser = computed(() => permanentDismissed.value[userKey.value] ?? [])
+function dismissPermanently(area: InfraSetupArea) {
+  const current = permanentDismissed.value[userKey.value] ?? []
+  if (!current.includes(area)) {
+    permanentDismissed.value = {
+      ...permanentDismissed.value,
+      [userKey.value]: [...current, area],
+    }
+  }
+}
+
+const visible = computed<InfraSetupArea[]>(() => {
+  const status = workspace.infraSetup
+  if (!status) return []
+  return AREAS.filter(
+    (area) =>
+      status[area] === 'not_defined' &&
+      !ui.infraSetupSessionDismissed.includes(area) &&
+      !dismissedForUser.value.includes(area),
+  )
+})
+
+// The dismiss dropdown: the product wants the user asked WHICH kind of dismissal on close.
+function dismissMenu(area: InfraSetupArea): DropdownMenuItem[][] {
+  return [
+    [
+      {
+        label: t('layout.infraSetupBanner.dismiss.session'),
+        icon: 'i-lucide-clock',
+        onSelect: () => ui.dismissInfraSetupForSession(area),
+      },
+      {
+        label: t('layout.infraSetupBanner.dismiss.permanent'),
+        icon: 'i-lucide-bell-off',
+        onSelect: () => dismissPermanently(area),
+      },
+    ],
+  ]
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <!-- One polite live region for ALL area cards (plus the sibling AI/provider banners) rather
+         than an assertive `role="alert"` per card — an advisory setup nag shouldn't interrupt a
+         screen reader, and up to three stacked alerts would spam it. -->
+    <div
+      v-if="visible.length > 0"
+      class="flex w-full flex-col items-center gap-2"
+      role="status"
+      aria-live="polite"
+    >
+      <div
+        v-for="area in visible"
+        :key="area"
+        class="pointer-events-auto w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        :data-testid="`infra-setup-banner-${area}`"
+      >
+        <div class="flex items-start gap-4">
+          <UIcon :name="AREA_META[area].icon" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="text-lg font-semibold text-amber-100">
+                {{ t(AREA_META[area].titleKey) }}
+              </h2>
+              <UDropdownMenu :items="dismissMenu(area)" :content="{ align: 'end' }">
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  icon="i-lucide-x"
+                  :aria-label="t('common.close')"
+                  :data-testid="`infra-setup-dismiss-${area}`"
+                />
+              </UDropdownMenu>
+            </div>
+            <p class="mt-1 text-sm text-amber-200/90">
+              {{ t(AREA_META[area].bodyKey) }}
+            </p>
+            <div class="mt-4">
+              <UButton
+                color="warning"
+                variant="solid"
+                icon="i-lucide-settings"
+                :data-testid="`infra-setup-configure-${area}`"
+                @click="AREA_META[area].onConfigure()"
+              >
+                {{ t(AREA_META[area].actionKey) }}
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </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

@@ -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/layout/ProviderConfigBanner.vue

@@ -38,7 +38,9 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
 
 <template>
   <Transition name="fade">
-    <div v-if="show" class="absolute inset-x-0 top-0 z-40 flex justify-center px-4 pt-4">
+    <!-- Positioning/stacking is owned by the shared banner column in `pages/index.vue`; this
+         renders only its card and re-enables pointer events on it. -->
+    <div v-if="show" class="pointer-events-auto w-full max-w-3xl">
       <div
         class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
         role="alert"

package/app/components/panels/InspectorPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Block, BlockStatus } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 import TaskContextDocs from '~/components/documents/TaskContextDocs.vue'
 import TaskContextIssues from '~/components/tasks/TaskContextIssues.vue'
 import TaskAgentConfig from '~/components/panels/inspector/TaskAgentConfig.vue'
@@ -137,28 +138,24 @@ const taskBranchUrl = computed(() => {
   return base ? `${base}/tree/${pr.branch}` : null
 })
 
-const runMenu = computed(() =>
-  pipelines.pipelines.map((p) => ({
-    label: p.name,
-    icon: 'i-lucide-play',
-    onSelect: () => block.value && execution.start(block.value.id, p),
-  })),
-)
+// Hide UI-testing pipelines when this block's frame has no UI to exercise — they'd be refused
+// at run start (see utils/pipeline + the backend gate).
+const runMenu = computed(() => {
+  const frame = block.value ? board.serviceOf(block.value) : undefined
+  return pipelines.pipelines
+    .filter((p) => pipelineAllowedForFrame(p, frame, board.blocks))
+    .map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-play',
+      onSelect: () => block.value && execution.start(block.value.id, p),
+    }))
+})
 
+// 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 +489,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/FrontendConfig.vue

@@ -18,8 +18,15 @@ import type {
 const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
+const auth = useAuthStore()
 const { t } = useI18n()
 
+// A browsable preview needs a long-lived host serve, so it is a local/node runtime capability
+// the deployment advertises (`infrastructure.frontendPreview.supported`); the Worker reports it
+// unsupported. Default to true until the auth handshake resolves so the toggle isn't briefly
+// disabled on a runtime that does support it.
+const previewSupported = computed(() => auth.infrastructure?.frontendPreview?.supported !== false)
+
 const config = computed<FrontendConfig>(() => props.block.frontendConfig ?? { backendBindings: [] })
 const bindings = computed(() => config.value.backendBindings ?? [])
 
@@ -226,7 +233,7 @@ function removeBinding(index: number) {
           step="1"
           size="xs"
           class="font-mono"
-          placeholder="8080"
+          placeholder="4173"
           @blur="(e: FocusEvent) => saveServePort((e.target as HTMLInputElement).value)"
         />
       </div>
@@ -247,6 +254,9 @@ function removeBinding(index: number) {
             (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
           "
         />
+        <p class="col-span-2 text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.frontendConfig.mockMappingsHint') }}
+        </p>
       </div>
     </div>
 
@@ -331,18 +341,23 @@ function removeBinding(index: number) {
       </div>
     </div>
 
-    <!-- Browsable preview (local/node only). -->
+    <!-- Browsable preview (local/node only; the Worker reports it unsupported). -->
     <div class="border-t border-slate-800 pt-2">
       <UCheckbox
-        :model-value="config.previewEnabled === true"
+        :model-value="previewSupported && config.previewEnabled === true"
         :label="t('inspector.frontendConfig.previewEnabled')"
+        :disabled="!previewSupported"
         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') }}
+        {{
+          previewSupported
+            ? t('inspector.frontendConfig.previewHint')
+            : t('inspector.frontendConfig.previewUnsupported')
+        }}
       </p>
     </div>
   </div>

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

@@ -12,6 +12,7 @@ const store = useReleaseHealthStore()
 const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
 
 const busy = ref(false)
 const draft = reactive({ monitorIds: '', sloIds: '', envTag: '' })
@@ -70,12 +71,15 @@ async function save() {
 }
 
 async function clear() {
+  const noun = t('inspector.releaseHealth.configNoun')
+  if (!(await confirmAction('clear', noun))) return
   busy.value = true
   try {
     await store.removeConfig(props.block.id)
     draft.monitorIds = ''
     draft.sloIds = ''
     draft.envTag = ''
+    toastDone('clear', noun)
   } catch (e) {
     notifyError(t('inspector.releaseHealth.clearFailed'), e)
   } finally {

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/panels/inspector/TaskRunSettings.vue

@@ -3,6 +3,7 @@ import { computed, onMounted } from 'vue'
 import type { Block } from '~/types/domain'
 import type { WritebackOverride } from '~/types/tracker'
 import { mergePresetOptionLabel, mergePresetThresholds } from '~/utils/mergePreset'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 
 const props = defineProps<{ block: Block }>()
 
@@ -129,6 +130,12 @@ function setModelPreset(id: string) {
 const selectedPipeline = computed(() =>
   props.block.pipelineId ? pipelines.getPipeline(props.block.pipelineId) : undefined,
 )
+// Hide UI-testing pipelines when this task's frame has no UI to exercise — they'd be refused at
+// run start (see utils/pipeline + the backend gate).
+const taskFrame = computed(() => board.serviceOf(props.block))
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) => pipelineAllowedForFrame(p, taskFrame.value, board.blocks)),
+)
 const pipelineMenu = computed(() => [
   [
     {
@@ -136,7 +143,7 @@ const pipelineMenu = computed(() => [
       icon: 'i-lucide-rotate-ccw',
       onSelect: () => setPipeline(''),
     },
-    ...pipelines.pipelines.map((p) => ({
+    ...selectablePipelines.value.map((p) => ({
       label: p.name,
       icon: 'i-lucide-workflow',
       onSelect: () => setPipeline(p.id),

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/ApiKeysSection.vue

@@ -27,6 +27,7 @@ const keys = useApiKeysStore()
 const models = useModelsStore()
 const auth = useAuthStore()
 const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
 
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
 const isAccount = computed(() => !!props.accountId)
@@ -209,11 +210,14 @@ async function add() {
 }
 
 async function remove(k: ApiKey) {
+  const noun = t('providers.apiKeys.keyNoun')
+  if (!(await confirmAction('remove', noun))) return
   try {
     if (k.scope === 'account') await keys.removeAccountKey(k.id)
     else if (k.scope === 'workspace') await keys.removeWorkspaceKey(k.id)
     else await keys.removeUserKey(k.id)
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
+    toastDone('remove', noun)
   } catch (e) {
     toast.add({
       title: t('providers.apiKeys.toast.removeFailed'),

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