@cat-factory/app 0.261.2 → 0.261.4

package/app/components/layout/AccountTeamSettings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { apiErrorEnvelope } from '~/composables/api/errors'
 import type { AccountRole } from '~/types/domain'
 import type { InvitationStatus } from '@cat-factory/contracts'
 import AccountAuditLog from '~/components/layout/AccountAuditLog.vue'
@@ -20,6 +19,7 @@ const accounts = useAccountsStore()
 const uiMode = useUiModeStore()
 const auth = useAuthStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t, te } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 const busy = ref(false)
@@ -64,7 +64,7 @@ async function updateMemberRoles(userId: string, roles: AccountRole[]) {
   try {
     await accounts.setMemberRoles(props.accountId, userId, roles.length ? roles : ['developer'])
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.updateRoles'), e)
+    present(e, 'layout.accountTeam.errors.updateRoles')
   }
 }
 
@@ -78,19 +78,10 @@ async function revokeSessions(userId: string, label: string) {
     await accounts.revokeMemberSessions(props.accountId, userId)
     toast.add({ title: t('layout.accountTeam.members.sessionsRevoked'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.revokeSessions'), e)
+    present(e, 'layout.accountTeam.errors.revokeSessions')
   }
 }
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: apiErrorEnvelope(e)?.message ?? (e instanceof Error ? e.message : String(e)),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 async function loadAll(accountId: string) {
   try {
     const jobs: Promise<unknown>[] = [accounts.loadEmailConnection(accountId)]
@@ -98,7 +89,7 @@ async function loadAll(accountId: string) {
     if (isOrg.value) jobs.push(accounts.loadRoster(accountId))
     await Promise.all(jobs)
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.loadSettings'), e)
+    present(e, 'layout.accountTeam.errors.loadSettings')
   }
 }
 
@@ -124,7 +115,7 @@ async function createOrganization() {
     newOrgName.value = ''
     toast.add({ title: t('layout.accountTeam.org.created'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.createOrg'), e)
+    present(e, 'layout.accountTeam.errors.createOrg')
   } finally {
     busy.value = false
   }
@@ -152,7 +143,7 @@ async function sendInvite() {
       icon: 'i-lucide-mail-check',
     })
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.sendInvite'), e)
+    present(e, 'layout.accountTeam.errors.sendInvite')
   } finally {
     busy.value = false
   }
@@ -164,7 +155,7 @@ async function revoke(id: string, email: string) {
     await accounts.revokeInvite(props.accountId, id)
     toastDone('revoke', email)
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.revokeInvite'), e)
+    present(e, 'layout.accountTeam.errors.revokeInvite')
   }
 }
 
@@ -185,7 +176,7 @@ async function connectEmail() {
     emailApiKey.value = ''
     toast.add({ title: t('layout.accountTeam.email.connected'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.connectEmail'), e)
+    present(e, 'layout.accountTeam.errors.connectEmail')
   } finally {
     busy.value = false
   }
@@ -199,7 +190,7 @@ async function disconnectEmail() {
     await accounts.disconnectEmail(props.accountId)
     toastDone('disconnect', noun)
   } catch (e) {
-    notifyError(t('layout.accountTeam.errors.disconnectEmail'), e)
+    present(e, 'layout.accountTeam.errors.disconnectEmail')
   } finally {
     busy.value = false
   }

package/app/components/layout/BoardSwitcher.vue

@@ -19,20 +19,12 @@ const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
 const ui = useUiStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const access = useWorkspaceAccess()
 const { confirm } = useConfirm()
 
 const busy = ref(false)
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: e instanceof Error ? e.message : String(e),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 // The cloud provider new services in the active account default to (a service may
 // override it per-frame). `docker` is the local Docker/Podman backend. The brand
 // names (Cloudflare/AWS/GCP/Azure) are proper nouns kept verbatim; only the
@@ -52,7 +44,7 @@ async function setDefaultProvider(provider: CloudProvider) {
   try {
     await accounts.setDefaultCloudProvider(id, provider)
   } catch (e) {
-    notifyError(t('layout.boardSwitcher.toast.updateProviderFailed'), e)
+    present(e, 'layout.boardSwitcher.toast.updateProviderFailed')
   }
 }
 
@@ -146,7 +138,7 @@ async function selectAccount(id: string) {
   try {
     await workspace.selectAccount(id)
   } catch (e) {
-    notifyError(t('layout.boardSwitcher.toast.switchAccountFailed'), e)
+    present(e, 'layout.boardSwitcher.toast.switchAccountFailed')
   } finally {
     busy.value = false
   }
@@ -157,7 +149,7 @@ async function switchBoard(id: string) {
   try {
     await workspace.switchTo(id)
   } catch (e) {
-    notifyError(t('layout.boardSwitcher.toast.openBoardFailed'), e)
+    present(e, 'layout.boardSwitcher.toast.openBoardFailed')
   } finally {
     busy.value = false
   }
@@ -181,7 +173,7 @@ async function removeBoard() {
     await workspace.remove(id)
     toast.add({ title: t('layout.boardSwitcher.toast.boardDeleted'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError(t('layout.boardSwitcher.toast.deleteBoardFailed'), e)
+    present(e, 'layout.boardSwitcher.toast.deleteBoardFailed')
   } finally {
     busy.value = false
   }
@@ -248,7 +240,7 @@ async function submitPrompt() {
     }
     prompt.value = null
   } catch (e) {
-    notifyError(t('common.actionFailed'), e)
+    present(e, 'common.actionFailed')
   } finally {
     busy.value = false
   }

package/app/components/layout/BoardToolbar.vue

@@ -15,6 +15,7 @@ const workspace = useWorkspaceStore()
 const workspaceSettings = useWorkspaceSettingsStore()
 const services = useServicesStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const access = useWorkspaceAccess()
 const { t, n } = useI18n()
 const { fitView, zoomIn, zoomOut, resetZoom } = useBoardFlow()
@@ -28,11 +29,7 @@ async function mountService(serviceId: string, title: string) {
       color: 'success',
     })
   } catch (e) {
-    toast.add({
-      title: t('board.toolbar.serviceAddFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      color: 'error',
-    })
+    present(e, 'board.toolbar.serviceAddFailed')
   }
 }
 
@@ -59,11 +56,7 @@ async function restoreService(id: string, title: string) {
       color: 'neutral',
     })
   } catch (e) {
-    toast.add({
-      title: t('board.toast.restoreFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      color: 'error',
-    })
+    present(e, 'board.toast.restoreFailed')
   }
 }
 

package/app/components/layout/NotificationsInbox.vue

@@ -16,20 +16,10 @@ const access = useWorkspaceAccess()
 const execution = useExecutionStore()
 const trackRecords = useMergeTrackRecordsStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 
 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'
@@ -203,7 +193,7 @@ async function act(n: Notification) {
       icon: 'i-lucide-check',
     })
   } catch (e) {
-    notifyError(t('layout.notifications.toast.actFailed'), e)
+    present(e, 'layout.notifications.toast.actFailed')
   } finally {
     busy.value = null
   }
@@ -219,7 +209,7 @@ async function dismiss(n: Notification) {
       icon: 'i-lucide-check',
     })
   } catch (e) {
-    notifyError(t('layout.notifications.toast.dismissFailed'), e)
+    present(e, 'layout.notifications.toast.dismissFailed')
   } finally {
     busy.value = null
   }

package/app/components/layout/WorkspaceMembersSettings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { apiErrorEnvelope } from '~/composables/api/errors'
 import type { WorkspaceAccessMode, WorkspaceRole } from '~/types/domain'
 
 // Workspace-membership management (workspace-rbac initiative, slice 9). The tier BELOW
@@ -18,6 +17,7 @@ const members = useWorkspaceMembersStore()
 const accounts = useAccountsStore()
 const auth = useAuthStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -57,15 +57,6 @@ const candidates = computed(() => {
 const addUserId = ref<string | undefined>(undefined)
 const addRole = ref<WorkspaceRole>('member')
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: apiErrorEnvelope(e)?.message ?? (e instanceof Error ? e.message : String(e)),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 async function loadAll(workspaceId: string) {
   try {
     const jobs: Promise<unknown>[] = [members.load(workspaceId)]
@@ -74,7 +65,7 @@ async function loadAll(workspaceId: string) {
     if (accountId.value) jobs.push(accounts.loadRoster(accountId.value))
     await Promise.all(jobs)
   } catch (e) {
-    notifyError(t('layout.workspaceMembers.errors.load'), e)
+    present(e, 'layout.workspaceMembers.errors.load')
   }
 }
 
@@ -92,7 +83,7 @@ async function setAccessMode(next: boolean) {
   try {
     await members.setAccessMode(props.workspaceId, mode)
   } catch (e) {
-    notifyError(t('layout.workspaceMembers.errors.accessMode'), e)
+    present(e, 'layout.workspaceMembers.errors.accessMode')
   } finally {
     busy.value = false
   }
@@ -103,7 +94,7 @@ async function updateRole(userId: string, role: WorkspaceRole) {
   try {
     await members.setRole(props.workspaceId, userId, role)
   } catch (e) {
-    notifyError(t('layout.workspaceMembers.errors.setRole'), e)
+    present(e, 'layout.workspaceMembers.errors.setRole')
   } finally {
     busy.value = false
   }
@@ -119,7 +110,7 @@ async function addMember() {
     addRole.value = 'member'
     toast.add({ title: t('layout.workspaceMembers.add.added'), icon: 'i-lucide-user-plus' })
   } catch (e) {
-    notifyError(t('layout.workspaceMembers.errors.add'), e)
+    present(e, 'layout.workspaceMembers.errors.add')
   } finally {
     busy.value = false
   }
@@ -132,7 +123,7 @@ async function removeMember(userId: string, name: string) {
     await members.remove(props.workspaceId, userId)
     toastDone('remove', name)
   } catch (e) {
-    notifyError(t('layout.workspaceMembers.errors.remove'), e)
+    present(e, 'layout.workspaceMembers.errors.remove')
   } finally {
     busy.value = false
   }

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -30,6 +30,7 @@ const ui = useUiStore()
 const notifications = useNotificationsStore()
 const slack = useSlackStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
 const open = computed({
@@ -70,15 +71,6 @@ function applyMatrix(matrix: NotificationRoutingMatrix | null | undefined) {
   }
 }
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: e instanceof Error ? e.message : String(e),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 /**
  * The grid is editable only once the board's OWN matrix is in hand.
  *
@@ -95,7 +87,7 @@ async function load() {
     await notifications.loadSettings()
     applyMatrix(notifications.settings?.matrix)
   } catch (e) {
-    notifyError(t('notificationSettings.error.load'), e)
+    present(e, 'notificationSettings.error.load')
   }
 }
 
@@ -132,7 +124,7 @@ async function save() {
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('notificationSettings.error.save'), e)
+    present(e, 'notificationSettings.error.save')
   } finally {
     busy.value = false
   }

package/app/components/panels/DecisionModal.vue

@@ -4,7 +4,7 @@ import { agentKindMeta } from '~/utils/catalog'
 const execution = useExecutionStore()
 const board = useBoardStore()
 const ui = useUiStore()
-const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 
 const ctx = computed(() => ui.decisionContext)
@@ -44,12 +44,7 @@ async function choose(option: string) {
     )
     if (resolved) ui.closeDecision()
   } catch (e) {
-    toast.add({
-      title: t('panels.decision.resolveFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
+    present(e, 'panels.decision.resolveFailed')
   } finally {
     resolvingOption.value = null
   }

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

@@ -8,7 +8,7 @@ import type { Recurrence } from '~/types/recurring'
 const props = defineProps<{ block: Block }>()
 const recurring = useRecurringPipelinesStore()
 const pipelines = usePipelinesStore()
-const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t, d } = useI18n()
 
 const schedule = computed(() => recurring.byBlock(props.block.id))
@@ -72,11 +72,7 @@ async function saveEdit() {
     await recurring.update(schedule.value.id, { recurrence: draft.value })
     editing.value = false
   } catch (e) {
-    toast.add({
-      title: t('inspector.recurring.updateFailed'),
-      description: errMsg(e),
-      color: 'error',
-    })
+    present(e, 'inspector.recurring.updateFailed')
   } finally {
     busy.value = false
   }
@@ -88,11 +84,7 @@ async function toggleEnabled() {
   try {
     await recurring.update(schedule.value.id, { enabled: !schedule.value.enabled })
   } catch (e) {
-    toast.add({
-      title: t('inspector.recurring.updateFailed'),
-      description: errMsg(e),
-      color: 'error',
-    })
+    present(e, 'inspector.recurring.updateFailed')
   } finally {
     busy.value = false
   }
@@ -104,20 +96,12 @@ async function runNow() {
   try {
     await recurring.runNow(schedule.value.id)
   } catch (e) {
-    toast.add({
-      title: t('inspector.recurring.runNowFailed'),
-      description: errMsg(e),
-      color: 'error',
-    })
+    present(e, 'inspector.recurring.runNowFailed')
   } finally {
     busy.value = false
   }
 }
 
-function errMsg(e: unknown) {
-  return e instanceof Error ? e.message : String(e)
-}
-
 const RUN_COLOR: Record<string, string> = {
   running: 'text-amber-400',
   done: 'text-emerald-400',

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

@@ -14,6 +14,7 @@ const store = useReleaseHealthStore()
 const ui = useUiStore()
 const uiMode = useUiModeStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -52,15 +53,6 @@ watch(
   { immediate: true },
 )
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: e instanceof Error ? e.message : String(e),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 async function save() {
   busy.value = true
   try {
@@ -75,7 +67,7 @@ async function save() {
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('inspector.releaseHealth.saveFailed'), e)
+    present(e, 'inspector.releaseHealth.saveFailed')
   } finally {
     busy.value = false
   }
@@ -92,7 +84,7 @@ async function clear() {
     draft.envTag = ''
     toastDone('clear', noun)
   } catch (e) {
-    notifyError(t('inspector.releaseHealth.clearFailed'), e)
+    present(e, 'inspector.releaseHealth.clearFailed')
   } finally {
     busy.value = false
   }

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

@@ -18,6 +18,7 @@ const props = defineProps<{ block: Block }>()
 
 const store = useTestSecretsStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -90,15 +91,6 @@ function removeRow(index: number) {
   draft.rows.splice(index, 1)
 }
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: e instanceof Error ? e.message : String(e),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 async function save() {
   busy.value = true
   try {
@@ -115,7 +107,7 @@ async function save() {
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('inspector.testSecrets.saveFailed'), e)
+    present(e, 'inspector.testSecrets.saveFailed')
   } finally {
     busy.value = false
   }
@@ -129,7 +121,7 @@ async function clearAll() {
     await store.clear(props.block.id)
     toastDone('clear', noun)
   } catch (e) {
-    notifyError(t('inspector.testSecrets.clearFailed'), e)
+    present(e, 'inspector.testSecrets.clearFailed')
   } finally {
     busy.value = false
   }

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

@@ -20,6 +20,7 @@ const props = defineProps<{ block: Block }>()
 
 const store = useValidationChecksStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { t, te } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -65,15 +66,6 @@ function removeRow(index: number) {
   rows.value.splice(index, 1)
 }
 
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: e instanceof Error ? e.message : String(e),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
 // Ecosystem label KEYS, exhaustive over the contracts `ValidationEcosystem` union: a new
 // backend detector fails THIS typecheck until it is mapped (the key is assembled at runtime,
 // so the typed-message-keys check cannot see the `t()` lookup — the map's exhaustiveness is
@@ -162,7 +154,7 @@ async function detect() {
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('inspector.validationChecks.detect.failed'), e)
+    present(e, 'inspector.validationChecks.detect.failed')
   } finally {
     detecting.value = false
   }
@@ -183,7 +175,7 @@ async function save() {
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('inspector.validationChecks.saveFailed'), e)
+    present(e, 'inspector.validationChecks.saveFailed')
   } finally {
     busy.value = false
   }
@@ -199,7 +191,7 @@ async function clear() {
     dependencyInstall.value = ''
     toastDone('clear', noun)
   } catch (e) {
-    notifyError(t('inspector.validationChecks.clearFailed'), e)
+    present(e, 'inspector.validationChecks.clearFailed')
   } finally {
     busy.value = false
   }

package/app/components/pipeline/PipelineBuilder.vue

@@ -279,6 +279,7 @@ function toggleSaved(id: string) {
 }
 
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 
 // ---- "Add agent" mini-form -------------------------------------------------
 const addAgentOpen = ref(false)
@@ -329,13 +330,9 @@ async function save() {
       toast.add({ title: t('pipeline.builder.toast.addOneFirst'), color: 'warning' })
     }
   } catch (e) {
-    // Surface the backend reason (e.g. post-release-health rejected without an
-    // observability integration) rather than a generic failure.
-    toast.add({
-      title: t('pipeline.builder.toast.saveFailed'),
-      description: e instanceof Error ? e.message : undefined,
-      color: 'error',
-    })
+    // Through the funnel, so the backend reason (e.g. post-release-health rejected without an
+    // observability integration) is reachable as copyable detail rather than raw prose up front.
+    present(e, 'pipeline.builder.toast.saveFailed')
   }
 }
 

package/app/components/providers/ApiKeysSection.vue

@@ -28,6 +28,7 @@ const keys = useApiKeysStore()
 const models = useModelsStore()
 const auth = useAuthStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 const { confirmAction, toastDone } = useConfirmAction()
 
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
@@ -202,11 +203,7 @@ async function add() {
       color: 'success',
     })
   } catch (e) {
-    toast.add({
-      title: t('providers.apiKeys.toast.connectFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      color: 'error',
-    })
+    present(e, 'providers.apiKeys.toast.connectFailed')
   } finally {
     busy.value = false
   }
@@ -221,11 +218,7 @@ async function updateKey(k: ApiKey, patch: { enabled?: boolean; isDefault?: bool
     // Enabling/disabling changes provider selectability in the picker — refresh it.
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
   } catch (e) {
-    toast.add({
-      title: t('providers.apiKeys.toast.updateFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      color: 'error',
-    })
+    present(e, 'providers.apiKeys.toast.updateFailed')
   }
 }
 
@@ -239,11 +232,7 @@ async function remove(k: ApiKey) {
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
     toastDone('remove', noun)
   } catch (e) {
-    toast.add({
-      title: t('providers.apiKeys.toast.removeFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      color: 'error',
-    })
+    present(e, 'providers.apiKeys.toast.removeFailed')
   }
 }
 </script>

package/app/components/providers/PersonalCredentialModal.vue

@@ -11,6 +11,7 @@ const { t } = useI18n()
 const personal = usePersonalSubscriptionsStore()
 const ui = useUiStore()
 const toast = useToast()
+const { present } = usePipelineErrorToast()
 
 const password = ref('')
 const busy = ref(false)
@@ -73,11 +74,7 @@ async function submit() {
     })
   } catch (e) {
     // A fresh 428 (e.g. still-wrong password) re-arms `pending`, keeping the modal open.
-    toast.add({
-      title: t('providers.personalCredential.toast.startFailed'),
-      description: e instanceof Error ? e.message : String(e),
-      color: 'error',
-    })
+    present(e, 'providers.personalCredential.toast.startFailed')
   } finally {
     busy.value = false
   }