@cat-factory/app 0.251.0 → 0.253.0

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

@@ -469,6 +469,7 @@ function selectTask() {
           variant="soft"
           size="xs"
           icon="i-lucide-scan-eye"
+          data-testid="task-review"
           @click.stop="review"
         >
           {{ t('board.task.review') }}

package/app/components/layout/AccountDeploymentSettings.vue

@@ -60,16 +60,67 @@ const contentBackendLabels = computed<Record<ContentStorageBackend, string>>(()
   s3: t('layout.accountDeployment.contentStorage.backends.s3'),
   r2: t('layout.accountDeployment.contentStorage.backends.r2'),
   db: t('layout.accountDeployment.contentStorage.backends.db'),
+  custom: t('layout.accountDeployment.contentStorage.backends.custom'),
 }))
 const storageCapability = computed(() => store.view?.contentStorageCapability ?? null)
 const storageSummary = computed(() => summary.value?.contentStorage ?? null)
-const backendItems = computed(() =>
-  (storageCapability.value?.supportedBackends ?? []).map((b) => ({
-    label: contentBackendLabels.value[b],
-    value: b,
-  })),
+// A deployment-registered store is selected as `custom` PLUS an id, so one select carries both:
+// each registered store is its own option, tagged so the save path can tell it from a built-in
+// backend. A two-control version (backend, then store) would leave "custom" selectable with no
+// store chosen, which is the one content-storage config that means nothing.
+const CUSTOM_OPTION_PREFIX = 'custom:'
+const customStores = computed(() => storageCapability.value?.customStores ?? [])
+/**
+ * The store an account is configured with that this deployment does NOT register: its build no
+ * longer carries it, or it never did. Kept as its own selectable option rather than dropped, so
+ * the control shows what is actually stored; hiding it would render an empty select over a
+ * working-looking account whose artifacts are going nowhere.
+ */
+const unregisteredStoreId = computed(() => {
+  const configured = store.view?.config?.contentStorage
+  if (configured?.backend !== 'custom') return null
+  const id = configured.custom?.storeId
+  if (!id || customStores.value.some((s) => s.id === id)) return null
+  return id
+})
+const backendItems = computed(() => [
+  ...(storageCapability.value?.supportedBackends ?? []).flatMap((b) =>
+    b === 'custom'
+      ? customStores.value.map((s) => ({
+          label: s.name,
+          value: `${CUSTOM_OPTION_PREFIX}${s.id}`,
+        }))
+      : [{ label: contentBackendLabels.value[b], value: b as string }],
+  ),
+  ...(unregisteredStoreId.value
+    ? [
+        {
+          label: t('layout.accountDeployment.contentStorage.unregisteredStore', {
+            store: unregisteredStoreId.value,
+          }),
+          value: `${CUSTOM_OPTION_PREFIX}${unregisteredStoreId.value}`,
+        },
+      ]
+    : []),
+])
+/** The select's value: a backend id, or `custom:<storeId>` for a registered store. */
+const csBackend = ref<string>('off')
+/** The registered store the select currently names, for the note under it. */
+const selectedCustomStore = computed(() =>
+  customStores.value.find((s) => `${CUSTOM_OPTION_PREFIX}${s.id}` === csBackend.value),
 )
-const csBackend = ref<ContentStorageBackend>('off')
+/**
+ * What the status badge says. `custom` is the one backend whose own label names nothing an
+ * operator can act on, so it resolves to the STORE: its registered name, or the bare id when this
+ * build does not register it (which the warning below then explains).
+ */
+const configuredStorageLabel = computed(() => {
+  const configured = storageSummary.value
+  if (!configured?.backend) return null
+  if (configured.backend !== 'custom') return contentBackendLabels.value[configured.backend]
+  const registered = customStores.value.find((s) => s.id === configured.customStoreId)
+  return registered?.name ?? configured.customStoreId ?? contentBackendLabels.value.custom
+})
 const cs = reactive({
   basePath: '',
   region: '',
@@ -84,7 +135,10 @@ const savingStorage = ref(false)
 
 function hydrateStorage() {
   const cfg = store.view?.config?.contentStorage
-  csBackend.value = cfg?.backend ?? storageCapability.value?.defaultBackend ?? 'off'
+  csBackend.value =
+    cfg?.backend === 'custom' && cfg.custom?.storeId
+      ? `${CUSTOM_OPTION_PREFIX}${cfg.custom.storeId}`
+      : (cfg?.backend ?? storageCapability.value?.defaultBackend ?? 'off')
   cs.basePath = cfg?.fs?.basePath ?? ''
   cs.region = cfg?.s3?.region ?? ''
   cs.bucket = cfg?.s3?.bucket ?? ''
@@ -113,8 +167,16 @@ onMounted(async () => {
 })
 
 async function saveStorage() {
-  const backend = csBackend.value
-  const config: ContentStorageConfig = { backend }
+  const selected = csBackend.value
+  const customStoreId = selected.startsWith(CUSTOM_OPTION_PREFIX)
+    ? selected.slice(CUSTOM_OPTION_PREFIX.length)
+    : null
+  const backend: ContentStorageBackend = customStoreId
+    ? 'custom'
+    : (selected as ContentStorageBackend)
+  const config: ContentStorageConfig = customStoreId
+    ? { backend, custom: { storeId: customStoreId } }
+    : { backend }
   if (backend === 'fs' && cs.basePath.trim()) {
     config.fs = { basePath: cs.basePath.trim() }
   }
@@ -677,11 +739,10 @@ async function clearWeb() {
           size="xs"
         >
           {{
-            storageSummary?.backend
-              ? contentBackendLabels[storageSummary.backend]
-              : t('layout.accountDeployment.contentStorage.default', {
-                  backend: contentBackendLabels[storageCapability.defaultBackend],
-                })
+            configuredStorageLabel ??
+            t('layout.accountDeployment.contentStorage.default', {
+              backend: contentBackendLabels[storageCapability.defaultBackend],
+            })
           }}
         </UBadge>
       </div>
@@ -691,6 +752,16 @@ async function clearWeb() {
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
         <USelect v-model="csBackend" :items="backendItems" value-key="value" size="sm" />
       </div>
+      <p v-if="selectedCustomStore?.summary" class="text-[11px] text-slate-400">
+        {{ selectedCustomStore.summary }}
+      </p>
+      <p v-if="unregisteredStoreId" class="text-[11px] text-amber-400">
+        {{
+          t('layout.accountDeployment.contentStorage.unregisteredStoreWarning', {
+            store: unregisteredStoreId,
+          })
+        }}
+      </p>
 
       <!-- Filesystem -->
       <div v-if="csBackend === 'fs'" class="grid grid-cols-1 gap-2">

package/app/components/layout/CommandBar.vue

@@ -72,6 +72,14 @@ const dynamicIntegrationCommands = computed<Command[]>(() => {
       run: () => ui.openSlack(),
     })
   }
+  list.push({
+    id: 'notification-settings',
+    label: t('layout.commandBar.cmd.notificationSettings'),
+    group: groupIntegrations,
+    icon: 'i-lucide-bell',
+    keywords: t('layout.commandBar.keywords.notificationSettings'),
+    run: () => ui.openNotificationSettings(),
+  })
   if (documents.available) {
     for (const src of documents.sources) {
       list.push({

package/app/components/layout/IntegrationsHub.vue

@@ -150,6 +150,16 @@ const groups = computed<IntegrationGroup[]>(() => {
       onClick: () => go(ui.openSlack),
     })
   }
+  // The notification manager is always listed: it configures the channels every deployment has
+  // (the in-app inbox, and email once an account connects a sender), so unlike the integrations
+  // around it there is no connection to probe before it is useful.
+  comms.push({
+    key: 'notificationSettings',
+    icon: 'i-lucide-bell',
+    label: t('layout.integrationsHub.items.notificationSettings.label'),
+    description: t('layout.integrationsHub.items.notificationSettings.description'),
+    onClick: () => go(ui.openNotificationSettings),
+  })
   if (comms.length)
     out.push({ title: t('layout.integrationsHub.groups.communication'), items: comms })
 

package/app/components/media/ImageCompare.vue

@@ -16,6 +16,13 @@ const props = defineProps<{
   referenceId: string | null | undefined
   blobs: ArtifactBlobs
   busy?: boolean
+  /**
+   * Where the reference came from, when the caller knows. A frame rendered from a linked design
+   * and a mock a person attached are different claims about what "the reference" is, so the
+   * caption says which; absent leaves the plain label, which is what an unattributed reference
+   * honestly is.
+   */
+  referenceOrigin?: 'upload' | 'design' | null
 }>()
 
 const emit = defineEmits<{
@@ -196,6 +203,9 @@ function onRefInput(e: Event) {
       <figure class="space-y-1">
         <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
           {{ t('media.compare.reference') }}
+          <span v-if="referenceOrigin === 'design'" class="text-amber-300/80">
+            {{ t('media.compare.fromLinkedDesign') }}
+          </span>
         </figcaption>
         <button
           v-if="refUrl"

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+// The notification manager: which notification types this board delivers on which channel.
+//
+// One row per notification type, one switch per routed channel. The switches render the
+// RESOLVED routing (a workspace's override, else the shipped default) through the same
+// `isNotificationRouted` the delivery path uses, so what the toggle says is what the engine
+// does. Saving writes only the cells that differ from their default, which is what makes
+// "put this back the way it ships" expressible at all — and what lets a later change to a
+// default reach every board that never opted out of it.
+//
+// Slack and the outbound webhooks are deliberately absent: each answers "which types" where
+// its DESTINATION is declared (a Slack route's channel, a webhook endpoint's own filter), so
+// a second switch here would be a place to look that does not decide. The footer says so and
+// links to the Slack panel.
+import { computed, reactive, ref, watch } from 'vue'
+import {
+  NOTIFICATION_DELIVERY_CHANNELS,
+  defaultNotificationRoute,
+  isNotificationRouted,
+  notificationTypeSchema,
+} from '@cat-factory/contracts'
+import type {
+  NotificationDeliveryChannel,
+  NotificationRoutingMatrix,
+  NotificationType,
+} from '~/types/notifications'
+import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+
+const ui = useUiStore()
+const notifications = useNotificationsStore()
+const slack = useSlackStore()
+const toast = useToast()
+const { t } = useI18n()
+
+const open = computed({
+  get: () => ui.notificationSettingsOpen,
+  set: (v: boolean) => (v ? ui.openNotificationSettings() : ui.closeNotificationSettings()),
+})
+const back = useIntegrationBack(open)
+
+/**
+ * Every notification type, in the picklist's own order, taken from the SCHEMA rather than a
+ * hand-kept list: a type added to the vocabulary appears here with its shipped default instead
+ * of being invisible to the only surface that can change it.
+ */
+const TYPES = notificationTypeSchema.options as readonly NotificationType[]
+
+/** The editable grid: `resolved[type][channel]` is the switch's state. */
+const resolved = reactive(
+  Object.fromEntries(
+    TYPES.map((type) => [
+      type,
+      Object.fromEntries(
+        NOTIFICATION_DELIVERY_CHANNELS.map((channel) => [
+          channel,
+          defaultNotificationRoute(type, channel),
+        ]),
+      ) as Record<NotificationDeliveryChannel, boolean>,
+    ]),
+  ) as Record<NotificationType, Record<NotificationDeliveryChannel, boolean>>,
+)
+
+const busy = ref(false)
+
+function applyMatrix(matrix: NotificationRoutingMatrix | null | undefined) {
+  for (const type of TYPES) {
+    for (const channel of NOTIFICATION_DELIVERY_CHANNELS) {
+      resolved[type][channel] = isNotificationRouted(matrix, type, channel)
+    }
+  }
+}
+
+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.
+ *
+ * The switches start on the shipped defaults, which is right while loading and wrong as a
+ * statement about the board: on a failed read the panel used to render them as the current
+ * configuration, and save is a full replace, so one press would write that guess over whatever
+ * overrides were stored. `failed` therefore gets its own state with a retry and no save, kept
+ * distinct from the settled `unavailable`.
+ */
+const editable = computed(() => notifications.settingsStatus === 'ready')
+
+async function load() {
+  try {
+    await notifications.loadSettings()
+    applyMatrix(notifications.settings?.matrix)
+  } catch (e) {
+    notifyError(t('notificationSettings.error.load'), e)
+  }
+}
+
+watch(
+  () => open.value,
+  async (isOpen) => {
+    if (!isOpen) return
+    await load()
+  },
+  // Lazy v-if mount: the panel mounts with `open` already true, so load immediately.
+  { immediate: true },
+)
+
+async function save() {
+  // Store only what DIFFERS from the shipped default. A full grid would freeze today's
+  // defaults onto every board that saved once, so a later change to what "high impact" means
+  // would reach nobody who had ever opened this panel.
+  const matrix: NotificationRoutingMatrix = {}
+  for (const type of TYPES) {
+    const overrides: Partial<Record<NotificationDeliveryChannel, boolean>> = {}
+    for (const channel of NOTIFICATION_DELIVERY_CHANNELS) {
+      if (resolved[type][channel] !== defaultNotificationRoute(type, channel)) {
+        overrides[channel] = resolved[type][channel]
+      }
+    }
+    if (Object.keys(overrides).length > 0) matrix[type] = overrides
+  }
+  busy.value = true
+  try {
+    await notifications.updateSettings(matrix)
+    toast.add({
+      title: t('notificationSettings.toast.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError(t('notificationSettings.error.save'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+/** Restore every type to its shipped routing (the switches; nothing is written until save). */
+function resetToDefaults() {
+  applyMatrix({})
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('notificationSettings.panel.title')"
+    :ui="{ content: 'max-w-2xl' }"
+  >
+    <template #title>
+      <IntegrationBackTitle :title="t('notificationSettings.panel.title')" @back="back" />
+    </template>
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-xs text-slate-400">{{ t('notificationSettings.panel.intro') }}</p>
+
+        <div
+          v-if="notifications.settingsStatus === 'unavailable'"
+          class="rounded-lg border border-slate-700 bg-slate-800/40 p-3 text-xs text-slate-400"
+        >
+          {{ t('notificationSettings.unavailable') }}
+        </div>
+
+        <div
+          v-else-if="notifications.settingsStatus === 'failed'"
+          class="space-y-3 rounded-lg border border-amber-700/60 bg-amber-950/30 p-3 text-xs text-amber-200"
+        >
+          <p>{{ t('notificationSettings.loadFailed') }}</p>
+          <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-rotate-cw" @click="load">
+            {{ t('common.retry') }}
+          </UButton>
+        </div>
+
+        <div
+          v-else-if="!editable"
+          class="rounded-lg border border-slate-700 bg-slate-800/40 p-3 text-xs text-slate-400"
+        >
+          {{ t('common.loading') }}
+        </div>
+
+        <template v-else>
+          <div
+            class="flex items-center gap-3 px-2 text-[10px] uppercase tracking-wide text-slate-500"
+          >
+            <span class="flex-1">{{ t('notificationSettings.column.event') }}</span>
+            <span class="w-16 text-center">{{ t('notificationSettings.column.inApp') }}</span>
+            <span class="w-16 text-center">{{ t('notificationSettings.column.email') }}</span>
+          </div>
+
+          <div class="max-h-[50vh] space-y-1 overflow-y-auto pr-1">
+            <div
+              v-for="type in TYPES"
+              :key="type"
+              class="flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-2"
+            >
+              <span class="flex-1 text-sm text-slate-300">
+                {{ t(`notificationSettings.type.${type}`) }}
+              </span>
+              <div class="flex w-16 justify-center">
+                <USwitch v-model="resolved[type]!.in_app" size="sm" />
+              </div>
+              <div class="flex w-16 justify-center">
+                <USwitch v-model="resolved[type]!.email" size="sm" />
+              </div>
+            </div>
+          </div>
+
+          <p class="text-[11px] text-slate-500">{{ t('notificationSettings.panel.inAppNote') }}</p>
+          <p class="text-[11px] text-slate-500">{{ t('notificationSettings.panel.emailNote') }}</p>
+          <p class="text-[11px] text-slate-500">
+            {{ t('notificationSettings.panel.otherChannelsNote') }}
+            <UButton
+              v-if="slack.available"
+              color="neutral"
+              variant="link"
+              size="xs"
+              class="px-1"
+              @click="ui.openSlack()"
+            >
+              {{ t('notificationSettings.panel.openSlack') }}
+            </UButton>
+          </p>
+
+          <div class="flex justify-between">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              icon="i-lucide-rotate-ccw"
+              @click="resetToDefaults"
+            >
+              {{ t('notificationSettings.action.reset') }}
+            </UButton>
+            <UButton
+              color="primary"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-save"
+              :loading="busy || notifications.savingSettings"
+              @click="save"
+            >
+              {{ t('notificationSettings.action.save') }}
+            </UButton>
+          </div>
+        </template>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -8,7 +8,7 @@
 // (per-view notes + a freeform box, composed into the Tester's fixer findings), or recapture.
 // References can be dropped straight onto a pair, or uploaded for any view below.
 import { computed, onUnmounted, reactive, ref, watch } from 'vue'
-import type { VisualConfirmStepState } from '~/types/execution'
+import type { VisualConfirmDesignGapReason, VisualConfirmStepState } from '~/types/execution'
 import { useArtifactBlobs } from '~/composables/useArtifactBlobs'
 import ImageCompare from '~/components/media/ImageCompare.vue'
 import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
@@ -63,6 +63,23 @@ const OUTCOME_LABELS = computed<Record<'completed' | 'failed', string>>(() => ({
   failed: t('visualConfirm.outcome.failed'),
 }))
 
+// What the task's LINKED DESIGNS contributed. Present whenever a design is linked, including
+// when everything worked: a reviewer comparing a screen against a Figma frame needs to know the
+// frame is the design's own, and one seeing no design frames needs to know whether a design is
+// linked at all. Absent ⇒ the task links none, which this panel must not invent a line about.
+const design = computed(() => vc.value?.designReferences ?? null)
+
+// Exhaustive map of the gap vocabulary → copy, literal-keyed for the same drift-guard reason as
+// the outcome labels above. Each names a DIFFERENT fix, which is why the backend keeps them apart
+// instead of collapsing them into one "no images" absence.
+const DESIGN_GAP_LABELS = computed<Record<VisualConfirmDesignGapReason, string>>(() => ({
+  partial: t('visualConfirm.design.gap.partial'),
+  failed: t('visualConfirm.design.gap.failed'),
+  none: t('visualConfirm.design.gap.none'),
+  storage_unavailable: t('visualConfirm.design.gap.storage_unavailable'),
+  not_retained: t('visualConfirm.design.gap.not_retained'),
+}))
+
 // Resolve every pair's artifacts (the gallery + the lightbox share this one cache).
 watch(
   pairs,
@@ -212,6 +229,35 @@ async function onFilePicked(e: Event) {
           {{ vc.degradedReason }}
         </p>
 
+        <!-- What the linked designs contributed. Rendered even when nothing is missing, so a
+             reference the reviewer is judging against is never anonymous. -->
+        <section
+          v-if="design"
+          class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2 text-[12px] text-slate-300"
+        >
+          <p class="flex items-center gap-1.5">
+            <UIcon name="i-lucide-figma" class="h-3.5 w-3.5 shrink-0 text-amber-300" />
+            <span>{{
+              t('visualConfirm.design.summary', { count: design.images }, design.images)
+            }}</span>
+            <span v-if="design.dropped" class="text-slate-500">
+              {{ t('visualConfirm.design.dropped', { count: design.dropped }, design.dropped) }}
+            </span>
+          </p>
+          <!-- One line per short design, carrying both ways it can fall short: what its source
+               kept, and what this gallery's shared ceiling cut from it. A design the ceiling shut
+               out entirely reads as one with no frames unless it is named here. -->
+          <ul v-if="design.gaps?.length" class="mt-1.5 space-y-1 text-[11px] text-amber-300/90">
+            <li v-for="gap in design.gaps" :key="`${gap.title}-${gap.reason ?? 'capped'}`">
+              {{ t('visualConfirm.design.gapLine', { title: gap.title }) }}
+              <template v-if="gap.reason">{{ DESIGN_GAP_LABELS[gap.reason] }}</template>
+              <template v-if="gap.dropped">{{
+                t('visualConfirm.design.gapDropped', { count: gap.dropped }, gap.dropped)
+              }}</template>
+            </li>
+          </ul>
+        </section>
+
         <p
           v-if="working"
           class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] text-slate-300"
@@ -228,6 +274,7 @@ async function onFilePicked(e: Event) {
               :view="p.view"
               :actual-id="p.actualArtifactId"
               :reference-id="p.referenceArtifactId"
+              :reference-origin="p.referenceOrigin"
               :blobs="blobs"
               :busy="busy"
               @expand="expand"

package/app/composables/api/notifications.ts

@@ -1,12 +1,15 @@
 import {
   actNotificationContract,
   dismissNotificationContract,
+  getNotificationSettingsContract,
   listNotificationsContract,
+  updateNotificationSettingsContract,
 } from '@cat-factory/contracts'
 import type { ReviewEffort } from '~/types/merge'
+import type { NotificationRoutingMatrix } from '~/types/notifications'
 import type { ApiContext } from './context'
 
-/** The human-actionable notification inbox (act / dismiss). */
+/** The human-actionable notification inbox (act / dismiss) + the per-workspace manager. */
 export function notificationsApi({ send, ws }: ApiContext) {
   return {
     // ---- notifications (human-actionable board items) ---------------------
@@ -29,5 +32,14 @@ export function notificationsApi({ send, ws }: ApiContext) {
         pathPrefix: ws(workspaceId),
         pathParams: { notificationId: id },
       }),
+
+    // ---- the notification manager (per-workspace channel routing) ---------
+    // Which types this board delivers on which channel. The read is member-visible; the
+    // write is admin-tier (a 403 from the backend, which the panel surfaces).
+    getNotificationSettings: (workspaceId: string) =>
+      send(getNotificationSettingsContract, { pathPrefix: ws(workspaceId) }),
+
+    updateNotificationSettings: (workspaceId: string, matrix: NotificationRoutingMatrix) =>
+      send(updateNotificationSettingsContract, { pathPrefix: ws(workspaceId), body: { matrix } }),
   }
 }

package/app/composables/usePipelineErrorToast.ts

@@ -335,6 +335,7 @@ const UNAVAILABLE_DESCRIPTION_KEYS: Record<UnavailableReason, string> = {
     'errors.unavailable.description.foundational_builtins_unreachable',
   connection_credentials_unreadable:
     'errors.unavailable.description.connection_credentials_unreadable',
+  vcs_capability_unsupported: 'errors.unavailable.description.vcs_capability_unsupported',
 }
 
 /**

package/app/pages/index.vue

@@ -66,6 +66,9 @@ const AddServiceFromRepoModal = defineAsyncComponent(
 )
 const GitHubPanel = defineAsyncComponent(() => import('~/components/github/GitHubPanel.vue'))
 const SlackPanel = defineAsyncComponent(() => import('~/components/slack/SlackPanel.vue'))
+const NotificationSettingsPanel = defineAsyncComponent(
+  () => import('~/components/notifications/NotificationSettingsPanel.vue'),
+)
 const FragmentLibraryPanel = defineAsyncComponent(
   () => import('~/components/fragments/FragmentLibraryPanel.vue'),
 )
@@ -480,6 +483,7 @@ watch(
         <AddServiceFromRepoModal v-if="ui.addServiceOpen" />
         <GitHubPanel v-if="ui.githubOpen" />
         <SlackPanel v-if="ui.slackOpen" />
+        <NotificationSettingsPanel v-if="ui.notificationSettingsOpen" />
         <FragmentLibraryPanel v-if="ui.fragmentLibraryOpen" />
         <FoundationalServicePanel v-if="ui.foundationalServicesOpen" />
         <PipelineHealthModal v-if="ui.pipelineHealthOpen" />

package/app/stores/notifications.settings.spec.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { ApiError } from '~/composables/api/errors'
+import { useNotificationsStore } from '~/stores/notifications'
+import { useWorkspaceStore } from '~/stores/workspace'
+
+// The notification manager's LOAD outcome, which decides whether the settings panel may offer a
+// save at all. Its write is a full replace of the board's overrides, and the grid it saves is
+// pre-filled with the shipped defaults, so a load that ended in anything but `ready` must be
+// distinguishable: rendering an unknown configuration as the current one turns one press of Save
+// into a silent wipe of every override the board had.
+
+describe('notifications store: manager settings load outcome', () => {
+  beforeEach(() => {
+    useWorkspaceStore().workspaceId = 'ws1'
+  })
+
+  it('is `ready` with the board matrix once the read succeeds', async () => {
+    const settings = { matrix: { merge_review: { email: false } }, updatedAt: 7 }
+    vi.stubGlobal('useApi', () => ({
+      getNotificationSettings: () => Promise.resolve(settings),
+    }))
+
+    const store = useNotificationsStore()
+    await store.loadSettings()
+
+    expect(store.settingsStatus).toBe('ready')
+    expect(store.settings).toEqual(settings)
+  })
+
+  it('is `unavailable` (settled, not an error) when the deployment wired no routing store', async () => {
+    vi.stubGlobal('useApi', () => ({
+      getNotificationSettings: () =>
+        Promise.reject(
+          new ApiError(503, { error: { code: 'unavailable', message: 'no routing store' } }),
+        ),
+    }))
+
+    const store = useNotificationsStore()
+    // A 503 is the opt-in shape, so the caller is not asked to report it.
+    await expect(store.loadSettings()).resolves.toBeUndefined()
+
+    expect(store.settingsStatus).toBe('unavailable')
+    expect(store.settings).toBeNull()
+  })
+
+  it('is `failed`, NOT `unavailable`, on a transient read fault, and still surfaces it', async () => {
+    vi.stubGlobal('useApi', () => ({
+      getNotificationSettings: () =>
+        Promise.reject(
+          new ApiError(500, { error: { code: 'internal', message: 'upstream exploded' } }),
+        ),
+    }))
+
+    const store = useNotificationsStore()
+    await expect(store.loadSettings()).rejects.toThrow('upstream exploded')
+
+    // The distinction IS the fix: `unavailable` means the shipped defaults are the whole truth,
+    // while `failed` means the board's real configuration is unknown and must not be written over.
+    expect(store.settingsStatus).toBe('failed')
+    expect(store.settings).toBeNull()
+  })
+
+  it('leaves no stale matrix behind when a reload fails after a good load', async () => {
+    let fail = false
+    vi.stubGlobal('useApi', () => ({
+      getNotificationSettings: () =>
+        fail
+          ? Promise.reject(new ApiError(500, { error: { code: 'internal', message: 'gone' } }))
+          : Promise.resolve({ matrix: { ci_failed: { in_app: false } }, updatedAt: 1 }),
+    }))
+
+    const store = useNotificationsStore()
+    await store.loadSettings()
+    fail = true
+    await expect(store.loadSettings()).rejects.toThrow()
+
+    expect(store.settingsStatus).toBe('failed')
+    expect(store.settings).toBeNull()
+  })
+})