@cat-factory/app 0.70.0 → 0.71.0

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

@@ -10,6 +10,7 @@ import type { CustomManifestType } from '@cat-factory/contracts'
 const { t } = useI18n()
 const infra = useInfraConfigStore()
 const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
 
 // A draft for the add/edit form. `manifestId` is locked on edit (it's the PK).
 const draft = reactive({
@@ -79,10 +80,12 @@ async function save() {
 }
 
 async function remove(type: CustomManifestType) {
+  if (!(await confirmAction('remove', type.label))) return
   busy.value = true
   try {
     await infra.removeCustomType(type.manifestId)
     if (editing.value && draft.manifestId === type.manifestId) startAdd()
+    toastDone('remove', type.label)
   } catch (e) {
     toast.add({
       title: t('settings.infrastructure.customType.removeFailed'),

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -31,6 +31,7 @@ const infra = useInfraConfigStore()
 const auth = useAuthStore()
 const ui = useUiStore()
 const toast = useToast()
+const { confirmAction } = useConfirmAction()
 
 const isLocal = computed(() => auth.localMode?.enabled === true)
 
@@ -116,6 +117,26 @@ async function testKube(payload: { config: KubeHandlerConfig; secrets: Record<st
   }
 }
 
+// Test the ALREADY-SAVED workspace kube handler as-is (from its stored non-secret config), so
+// an operator can verify an established connection straight from the list without re-opening the
+// form or re-typing the token — the backend fills the stored token for the probe (empty secrets
+// here ⇒ "use the saved one"). Distinct state from the form's own test so results don't cross.
+const kubeSavedTesting = ref(false)
+const kubeSavedTestResult = ref<TestResult>(null)
+async function testSavedKube() {
+  const config = kubeHandler.value?.config
+  if (!config) return
+  kubeSavedTesting.value = true
+  kubeSavedTestResult.value = null
+  try {
+    kubeSavedTestResult.value = await infra.testHandler({ config, secrets: {} })
+  } catch (e) {
+    kubeSavedTestResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
+  } finally {
+    kubeSavedTesting.value = false
+  }
+}
+
 async function testKubeOverride(payload: {
   config: KubeHandlerConfig
   secrets: Record<string, string>
@@ -154,6 +175,7 @@ async function saveKube(payload: { config: KubeHandlerConfig; secrets: Record<st
 }
 
 async function removeKube() {
+  if (!(await confirmAction('remove', t('settings.infrastructure.handler.kubeNoun')))) return
   busy.value = true
   try {
     await infra.unregisterHandler('kubernetes')
@@ -190,6 +212,8 @@ async function saveKubeOverride(payload: {
 }
 
 async function removeKubeOverride() {
+  if (!(await confirmAction('remove', t('settings.infrastructure.handler.kubeOverrideNoun'))))
+    return
   busy.value = true
   try {
     await infra.removeUserHandler('kubernetes')
@@ -311,6 +335,7 @@ async function saveCustom(payload: {
 
 async function removeCustom() {
   if (!selectedCustomId.value) return
+  if (!(await confirmAction('remove', t('settings.infrastructure.handler.customNoun')))) return
   busy.value = true
   try {
     await infra.unregisterHandler('custom', selectedCustomId.value)
@@ -354,22 +379,57 @@ function notifyError(e: unknown) {
       <h3 class="text-sm font-semibold text-slate-200">
         {{ t('inspector.testConfig.provisionTypes.kubernetes') }}
       </h3>
-      <p
+      <!-- Established-connection card: a prominent checkbox signals a connection is stored, and
+           a Test button verifies the SAVED connection (the token is reused server-side) without
+           re-opening the form. Absent ⇒ the "not connected yet" hint. -->
+      <div
         v-if="kubeHandler"
-        class="flex items-center justify-between gap-2 text-[12px] text-slate-300"
+        class="space-y-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 p-2.5"
       >
-        <span>
+        <div class="flex items-start justify-between gap-2">
+          <UCheckbox
+            :model-value="true"
+            disabled
+            size="lg"
+            :label="t('settings.infrastructure.handler.connectionEstablished')"
+            :ui="{ label: 'text-[13px] font-semibold text-emerald-300' }"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            :aria-label="t('settings.infrastructure.handler.disconnect')"
+            @click="removeKube"
+          />
+        </div>
+        <p class="pl-7 text-[11px] text-slate-300">
           {{ t('settings.infrastructure.handler.activeEngine') }}
           <span class="text-slate-200">{{ kubeHandlerEngineLabel }}</span>
-        </span>
-        <UButton
-          icon="i-lucide-trash-2"
-          color="error"
-          variant="ghost"
-          size="xs"
-          :disabled="busy"
-          @click="removeKube"
-        />
+        </p>
+        <div class="flex items-center gap-2 pl-7">
+          <UButton
+            color="neutral"
+            variant="soft"
+            size="xs"
+            icon="i-lucide-plug-zap"
+            :loading="kubeSavedTesting"
+            @click="testSavedKube"
+          >
+            {{ t('settings.providerConnection.test.button') }}
+          </UButton>
+          <span v-if="kubeSavedTestResult?.ok" class="text-xs text-emerald-400">
+            {{ kubeSavedTestResult.message ?? t('settings.providerConnection.test.ok') }}
+          </span>
+          <span v-else-if="kubeSavedTestResult" class="text-xs text-rose-400">
+            {{ kubeSavedTestResult.message ?? t('settings.providerConnection.test.failed') }}
+          </span>
+        </div>
+      </div>
+      <p v-else class="flex items-center gap-1.5 text-[12px] text-slate-500">
+        <UIcon name="i-lucide-circle-dashed" class="h-3.5 w-3.5" />
+        {{ t('settings.infrastructure.handler.notConnected') }}
       </p>
 
       <div class="space-y-1">

package/app/components/settings/KubernetesEngineForm.vue

@@ -184,9 +184,19 @@ const urlValid = computed(() => {
 })
 
 const connected = computed(() => !!props.handler)
+// Whether a token is already SAVED for this handler. The value is write-only (never returned),
+// so on edit the token field starts blank and the operator may leave it blank to keep the stored
+// token — the backend falls back to it for both the connection test and the save. A new value
+// entered here replaces it.
+const tokenStored = computed(
+  () => !!props.handler && props.handler.secretKeys.includes(KUBERNETES_ENV_TOKEN_SECRET_KEY),
+)
 const canSave = computed(
   () =>
-    !!form.label.trim() && !!form.apiServerUrl.trim() && !!apiToken.value.trim() && urlValid.value,
+    !!form.label.trim() &&
+    !!form.apiServerUrl.trim() &&
+    (tokenStored.value || !!apiToken.value.trim()) &&
+    urlValid.value,
 )
 
 // Why the Connect button is disabled, surfaced as a red hint next to it so a mandatory-field gap
@@ -198,7 +208,10 @@ const connectBlockedReason = computed(() => {
   if (!form.label.trim()) missing.push(t('settings.infrastructure.kubernetesEngine.label'))
   if (!form.apiServerUrl.trim())
     missing.push(t('settings.infrastructure.kubernetesEngine.apiServerUrl'))
-  if (!apiToken.value.trim()) missing.push(t('settings.infrastructure.kubernetesEngine.apiToken'))
+  // The token is required only for a FIRST connect; on edit a saved token is preserved when
+  // the field is left blank, so don't flag it as missing.
+  if (!tokenStored.value && !apiToken.value.trim())
+    missing.push(t('settings.infrastructure.kubernetesEngine.apiToken'))
   if (form.urlSource === 'ingressTemplate' && !form.hostTemplate.trim())
     missing.push(t('settings.infrastructure.kubernetesEngine.hostTemplate'))
   if (form.urlSource === 'serviceStatus' && !form.serviceName.trim())
@@ -239,9 +252,12 @@ function buildPayload(): KubeHandlerPayload {
   if (form.imageTemplate.trim()) kubernetes.imageTemplate = form.imageTemplate.trim()
   // One honest assertion at the boundary that actually builds the shape (the reactive form is
   // dynamically assembled, then validated server-side); the emitted config flows typed onward.
+  // OMIT the token when the field is blank so the backend preserves the saved one (a blank
+  // secret means "keep it") — only a typed value is sent, and it replaces the stored token.
+  const token = apiToken.value.trim()
   return {
     config: { engine: props.engine, kubernetes } as unknown as KubeHandlerConfig,
-    secrets: { [KUBERNETES_ENV_TOKEN_SECRET_KEY]: apiToken.value.trim() },
+    secrets: token ? { [KUBERNETES_ENV_TOKEN_SECRET_KEY]: token } : {},
   }
 }
 
@@ -322,9 +338,29 @@ async function copyAutoSetupCommand() {
 
     <UFormField
       :label="t('settings.infrastructure.kubernetesEngine.apiToken')"
-      :help="t('settings.infrastructure.kubernetesEngine.apiTokenHelp')"
+      :help="
+        tokenStored
+          ? t('settings.infrastructure.kubernetesEngine.apiTokenHelpStored')
+          : t('settings.infrastructure.kubernetesEngine.apiTokenHelp')
+      "
     >
-      <UInput v-model="apiToken" type="password" class="font-mono" autocomplete="off" />
+      <template v-if="tokenStored" #hint>
+        <span class="inline-flex items-center gap-1 text-[11px] text-emerald-400">
+          <UIcon name="i-lucide-check-circle-2" class="h-3.5 w-3.5" />
+          {{ t('settings.infrastructure.kubernetesEngine.tokenSaved') }}
+        </span>
+      </template>
+      <UInput
+        v-model="apiToken"
+        type="password"
+        class="font-mono"
+        autocomplete="off"
+        :placeholder="
+          tokenStored
+            ? t('settings.infrastructure.kubernetesEngine.apiTokenPlaceholderStored')
+            : undefined
+        "
+      />
     </UFormField>
 
     <!-- URL derivation: how the live environment URL is resolved once the service's

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

@@ -12,6 +12,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const store = useReleaseHealthStore()
 const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
 
 const open = computed({
   get: () => ui.observabilityConnectionOpen,
@@ -95,9 +96,12 @@ async function saveIncident() {
 }
 
 async function disconnectIncident() {
+  const noun = t('settings.observabilityConnection.incidentNoun')
+  if (!(await confirmAction('disconnect', noun))) return
   incidentBusy.value = true
   try {
     await store.removeIncident()
+    toastDone('disconnect', noun)
   } catch (e) {
     notifyError(t('settings.observabilityConnection.toast.incidentDisconnectFailed'), e)
   } finally {
@@ -127,9 +131,12 @@ async function saveConnection() {
 }
 
 async function disconnect() {
+  const noun = t('settings.observabilityConnection.connectionNoun')
+  if (!(await confirmAction('disconnect', noun))) return
   busy.value = true
   try {
     await store.removeConnection()
+    toastDone('disconnect', noun)
   } catch (e) {
     notifyError(t('settings.observabilityConnection.toast.disconnectFailed'), e)
   } finally {

package/app/components/settings/ProviderConnectionTab.vue

@@ -29,6 +29,7 @@ const emit = defineEmits<{ connected: [] }>()
 const { t } = useI18n()
 const store = useProviderConnectionsStore()
 const toast = useToast()
+const { confirmAction } = useConfirmAction()
 
 const descriptor = computed(() => store.descriptorFor(props.kind))
 const connection = computed(() => store.connectionFor(props.kind))
@@ -250,6 +251,7 @@ async function saveConfig(payload: {
 }
 
 async function remove() {
+  if (!(await confirmAction('remove', descriptor.value?.label ?? props.kind))) return
   busy.value = true
   try {
     await store.remove(props.kind)

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) {

package/app/components/tasks/ContextIssuePicker.vue

@@ -7,6 +7,7 @@
 // them once the block exists (see useContextLinking). A search hit / pasted ref
 // carries `needsImport: true` so it's fetched + persisted before linking.
 import type { SourceTask, TaskSearchResult, TaskSourceKind } 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. */
@@ -245,15 +246,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-search-x"
+        :title="
           query.trim()
             ? t('tasks.picker.noMatches')
             : searchable
               ? t('tasks.picker.emptySearchable')
               : t('tasks.picker.emptyRefOnly')
-        }}
-      </p>
+        "
+      />
     </div>
   </div>
 </template>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -17,6 +17,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const tasks = useTasksStore()
 const toast = useToast()
+const { confirmAction } = useConfirmAction()
 
 const source = computed(() => ui.taskConnect?.source ?? null)
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
@@ -99,12 +100,12 @@ async function startOAuth() {
 
 async function disconnect() {
   if (!source.value) return
+  const label = descriptor.value?.label ?? t('tasks.connect.sourceFallback')
+  if (!(await confirmAction('disconnect', label))) return
   await tasks.disconnect(source.value)
   await tasks.probe()
   toast.add({
-    title: t('tasks.connect.disconnectedToast', {
-      label: descriptor.value?.label ?? t('tasks.connect.sourceFallback'),
-    }),
+    title: t('tasks.connect.disconnectedToast', { label }),
     icon: 'i-lucide-unplug',
   })
   ui.closeTaskConnect()

package/app/composables/useBlockDeletion.ts

@@ -0,0 +1,63 @@
+import type { Block } from '~/types/domain'
+
+/**
+ * The single, confirm-gated block deletion used by BOTH the inspector's Delete button and
+ * the global keyboard shortcut, so the two paths can never drift (one safe, one not). It
+ * mirrors the ordering the inspector always used — close the inspector, cancel any run, then
+ * optimistically delete (the store restores + toasts on backend failure via `RemovalSnapshot`)
+ * — and only inserts the confirmation prompt in front of the mutation.
+ *
+ * A recurring-pipeline task owns its reused block + run history, so removing the schedule
+ * deletes them server-side; that case deletes the schedule rather than orphaning it.
+ */
+export function useBlockDeletion() {
+  const board = useBoardStore()
+  const execution = useExecutionStore()
+  const ui = useUiStore()
+  const recurring = useRecurringPipelinesStore()
+  const { confirm } = useConfirm()
+  const { t } = useI18n()
+
+  /** Resolve the confirm title/body for a block, matching the inspector's delete-label kinds. */
+  function copyFor(block: Block): { title: string; body: string } {
+    const schedule = recurring.byBlock(block.id)
+    const kind = schedule
+      ? 'recurring'
+      : block.level === 'task'
+        ? 'task'
+        : block.level === 'module'
+          ? 'module'
+          : 'service'
+    return {
+      title: t(`panels.inspector.confirmDelete.${kind}.title`),
+      body: t(`panels.inspector.confirmDelete.${kind}.body`, { name: block.title }),
+    }
+  }
+
+  async function deleteBlock(block: Block | undefined | null): Promise<boolean> {
+    if (!block) return false
+    const { title, body } = copyFor(block)
+    const ok = await confirm({
+      title,
+      description: body,
+      variant: 'destructive',
+      confirmLabel: t('common.delete'),
+      icon: 'i-lucide-trash-2',
+    })
+    if (!ok) return false
+
+    // 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)
+    const schedule = recurring.byBlock(block.id)
+    if (schedule) {
+      void recurring.remove(schedule.id)
+      return true
+    }
+    execution.cancel(block.id)
+    void board.removeBlock(block.id)
+    return true
+  }
+
+  return { deleteBlock }
+}

package/app/composables/useConfirm.ts

@@ -0,0 +1,63 @@
+import { readonly, ref } from 'vue'
+
+/**
+ * A shared, promise-based confirmation dialog. Call `confirm(...)` from anywhere and
+ * `await` the boolean the user chose — resolve on Confirm, reject-to-`false` on Cancel or
+ * any dismissal (backdrop click, Escape, route change). One `<ConfirmDialog />` is mounted
+ * app-wide (in `pages/index.vue`) and reads this singleton, so callers never render a modal
+ * themselves — they just `await useConfirm().confirm({...})` and branch on the result.
+ *
+ * The state lives at module scope (outside the exported function) so every caller and the
+ * single mounted dialog share ONE request queue.
+ */
+export interface ConfirmRequest {
+  title: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  /** `destructive` renders the confirm button in the error colour. */
+  variant?: 'default' | 'destructive'
+  icon?: string
+}
+
+const open = ref(false)
+const current = ref<ConfirmRequest | null>(null)
+let resolver: ((ok: boolean) => void) | null = null
+
+/** Settle the pending promise (if any) with `ok`, then clear it. */
+function settle(ok: boolean): void {
+  const resolve = resolver
+  resolver = null
+  resolve?.(ok)
+}
+
+export function useConfirm() {
+  function confirm(request: ConfirmRequest): Promise<boolean> {
+    // A new request while one is open supersedes the old one — resolve the previous
+    // `false` so its awaiter never hangs, then show the new request.
+    if (resolver) settle(false)
+    current.value = request
+    open.value = true
+    return new Promise<boolean>((resolve) => {
+      resolver = resolve
+    })
+  }
+
+  function accept(): void {
+    open.value = false
+    settle(true)
+  }
+
+  function cancel(): void {
+    open.value = false
+    settle(false)
+  }
+
+  // Called by the dialog when `open` flips to false without an explicit accept/cancel
+  // (backdrop, Escape, unmount). Any still-pending promise resolves `false`.
+  function dismissed(): void {
+    if (resolver) settle(false)
+  }
+
+  return { open, current: readonly(current), confirm, accept, cancel, dismissed }
+}