From d738a44535cd34097b816d60a1497df9329e40f7 Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 30 Sep 2026 11:01:21 +0200
Subject: [PATCH 1/6] fix(webhooks): repair the test button and polish the
 subscription UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- the test call prefixed api/v1/ to a fetch already based on the API
  path and hit /events/api/api/v1/..., which answered "unknown api
  endpoint"
- label each topic section "Webhooks pour l'évènement « title »" and
  add English messages
- keep the delete and save buttons side by side
- give the call history a heading, a titled refresh button and a
  message when the webhook has never been called

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 ui/src/components/webhook-history.vue         | 61 ++++++++++++-------
 .../components/webhook-subscription-form.vue  |  6 +-
 ui/src/pages/embed/subscribe-webhooks.vue     |  6 +-
 3 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/webhook-history.vue b/ui/src/components/webhook-history.vue
index 15f7949..c4cb99d 100644
--- a/ui/src/components/webhook-history.vue
+++ b/ui/src/components/webhook-history.vue
@@ -1,63 +1,78 @@
 <template>
   <v-list
     variant="flat"
-    style="position:relative"
+    density="compact"
+    class="mt-4"
   >
-    <v-row class="ma-0">
+    <div class="d-flex align-center ga-2">
+      <span class="text-subtitle-1">{{ t('history') }}</span>
+      <v-btn
+        icon
+        variant="text"
+        color="primary"
+        density="comfortable"
+        :title="t('refresh')"
+        :aria-label="t('refresh')"
+        :loading="fetchWebhooks.loading.value"
+        @click="fetchWebhooks.refresh()"
+      >
+        <v-icon :icon="mdiRefresh" />
+      </v-btn>
       <v-spacer />
       <v-btn
-        v-if="webhooks"
         color="primary"
         variant="flat"
         :loading="test.loading.value"
         @click="test.execute()"
       >
-        Tester
+        {{ t('test') }}
         <v-icon
           end
           :icon="mdiSend"
         />
       </v-btn>
-      <v-spacer />
-      <v-btn
-        icon
-        variant="flat"
-        color="primary"
-        density="comfortable"
-        @click="fetchWebhooks.refresh()"
-      >
-        <v-icon :icon="mdiRefresh" />
-      </v-btn>
-    </v-row>
-    <div style="height:4px;width:100%;">
-      <v-progress-linear
-        v-if="fetchWebhooks.loading.value"
-        height="4"
-        style="margin:0;"
-      />
     </div>
-    <template v-if="webhooks && webhooks.length">
+    <template v-if="webhooks">
       <webhook-history-item
         v-for="webhook in webhooks"
         :key="webhook._id"
         :webhook="webhook"
         @refresh="fetchWebhooks.refresh()"
       />
+      <v-list-item
+        v-if="!webhooks.length"
+        :subtitle="t('noWebhooks')"
+      />
     </template>
   </v-list>
 </template>
 
+<i18n lang="yaml">
+fr:
+  history: Historique des appels
+  refresh: Rafraîchir l'historique
+  test: Tester
+  noWebhooks: Ce webhook n'a pas encore été appelé.
+en:
+  history: Call history
+  refresh: Refresh the history
+  test: Test
+  noWebhooks: This webhook has not been called yet.
+</i18n>
+
 <script lang="ts" setup>
 import type { Webhook, WebhookSubscription } from '#api/types'
 
 const { subscription } = defineProps<{ subscription: WebhookSubscription }>()
 
+const { t } = useI18n()
+
 const webhooksParams = computed(() => ({ size: 100, subscription: subscription._id }))
 const fetchWebhooks = useFetch<{ results: Webhook[] }>($apiPath + '/webhooks', { query: webhooksParams })
 const webhooks = computed(() => fetchWebhooks.data.value?.results)
 
 const test = useAsyncAction(async () => {
-  await $fetch(`api/v1/webhook-subscriptions/${subscription._id}/_test`, { method: 'POST' })
+  await $fetch(`webhook-subscriptions/${subscription._id}/_test`, { method: 'POST' })
   await fetchWebhooks.refresh()
 })
 </script>
diff --git a/ui/src/components/webhook-subscription-form.vue b/ui/src/components/webhook-subscription-form.vue
index 4c375b2..f9d040c 100644
--- a/ui/src/components/webhook-subscription-form.vue
+++ b/ui/src/components/webhook-subscription-form.vue
@@ -56,8 +56,7 @@
         />
       </v-col>
     </v-row>
-    <v-row class="mx-0 mb-0">
-      <v-spacer />
+    <div class="d-flex justify-end ga-2 mt-4">
       <confirm-menu
         v-if="modelValue._id"
         @confirm="remove.execute()"
@@ -66,13 +65,12 @@
         color="primary"
         variant="flat"
         :loading="save.loading.value"
-        class="ml-2"
         :disabled="JSON.stringify(subscription) === previousState || save.loading.value"
         @click="save.execute()"
       >
         Enregistrer
       </v-btn>
-    </v-row>
+    </div>
   </v-form>
 </template>
 
diff --git a/ui/src/pages/embed/subscribe-webhooks.vue b/ui/src/pages/embed/subscribe-webhooks.vue
index 5a28980..cb0ad35 100644
--- a/ui/src/pages/embed/subscribe-webhooks.vue
+++ b/ui/src/pages/embed/subscribe-webhooks.vue
@@ -51,7 +51,11 @@
 fr:
   logged: Vous devez être connecté pour pouvoir configurer des Webhooks.
   admin: Vous devez être administrateur pour pouvoir configurer des Webhooks.
-  webhooks: "Configurer des Webhooks pour l'évènement {title}"
+  webhooks: "Webhooks pour l'évènement « {title} »"
+en:
+  logged: You must be logged in to configure webhooks.
+  admin: You must be an administrator to configure webhooks.
+  webhooks: "Webhooks for the event “{title}”"
 </i18n>
 
 <script lang="ts" setup>

From 8fe9bf32b504eb809a50355a932cc576ef910138 Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 30 Sep 2026 11:20:08 +0200
Subject: [PATCH 2/6] fix(dev): pre-bundle lib-vue owner.js for the dev page

owner.js is only imported from lib-vuetify's owner-avatar.vue, reached
through the linked lib-vuetify-events package. Vite's dependency scan
does not crawl .vue files inside node_modules, so owner.js was served
raw and its import chain reached the CommonJS ajv-formats: /events/dev
failed to load and the e2e warmup timed out.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 ui/vite.config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 3e1350f..0aba6cb 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -12,7 +12,10 @@ import { autoImports, settingsPath } from '@data-fair/lib-vuetify/vite.js'
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/events',
-  optimizeDeps: { include: ['debug'] },
+  // owner.js is only imported from lib-vuetify's owner-avatar.vue (via lib-vuetify-events), and the
+  // dependency scan does not crawl .vue files inside node_modules: without this it is served raw and
+  // its import chain reaches the CommonJS ajv-formats, which breaks the /events/dev page.
+  optimizeDeps: { include: ['debug', '@data-fair/lib-vue/owner.js'] },
   resolve: {
     alias: {
       '~': path.resolve(__dirname, 'src/')

From 53786bbcafafefd5ce0e51bdab3ae461aa2c9d62 Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 30 Sep 2026 12:19:23 +0200
Subject: [PATCH 3/6] feat(webhooks): a single list of webhooks with a topic
 selector

The subscribe-webhooks embed page showed one list per topic. It now
shows every subscription of the given topics in a single list, each
form starting with a topic selector (hidden when only one topic is
proposed, and keeping a topic that is not proposed selectable).

GET /api/webhook-subscriptions accepts a comma-separated list of topic
keys to support it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 api/src/webhook-subscriptions/router.ts       |  5 +-
 tests/webhooks.api.spec.ts                    | 15 ++++
 ui/src/components/subscribe-webhook.vue       | 75 +++++--------------
 .../components/webhook-subscription-form.vue  | 32 +++++++-
 ui/src/pages/embed/subscribe-webhooks.vue     | 34 ++-------
 5 files changed, 75 insertions(+), 86 deletions(-)

diff --git a/api/src/webhook-subscriptions/router.ts b/api/src/webhook-subscriptions/router.ts
index e2853b6..e5343fd 100644
--- a/api/src/webhook-subscriptions/router.ts
+++ b/api/src/webhook-subscriptions/router.ts
@@ -28,8 +28,9 @@ router.get('', async (req, res, next) => {
     query['sender.type'] = req.query.sender.split(':')[0]
     query['sender.id'] = req.query.sender.split(':')[1]
   }
-  if (req.query.topic) {
-    query['topic.key'] = req.query.topic
+  // a comma-separated list of topic keys, as the subscribe-webhooks embed page receives them
+  if (req.query.topic && typeof req.query.topic === 'string') {
+    query['topic.key'] = { $in: req.query.topic.split(',') }
   }
 
   const [results, count] = await Promise.all([
diff --git a/tests/webhooks.api.spec.ts b/tests/webhooks.api.spec.ts
index bb2b0d2..f718eec 100644
--- a/tests/webhooks.api.spec.ts
+++ b/tests/webhooks.api.spec.ts
@@ -158,6 +158,21 @@ test.describe('webhooks', () => {
     }
   })
 
+  test('should list webhook subscriptions of several topics', async () => {
+    for (const key of ['topic1', 'topic2', 'topic3']) {
+      await admin1.post('/api/webhook-subscriptions', {
+        title: 'Sub ' + key,
+        topic: { key },
+        sender: { type: 'organization', id: 'test1' },
+        url: 'http://localhost:19881/hook'
+      })
+    }
+    const one = await admin1.get('/api/webhook-subscriptions', { params: { topic: 'topic1' } })
+    expect(one.data.results.map((s: any) => s.topic.key)).toEqual(['topic1'])
+    const two = await admin1.get('/api/webhook-subscriptions', { params: { topic: 'topic1,topic3', sort: 'title:1' } })
+    expect(two.data.results.map((s: any) => s.topic.key)).toEqual(['topic1', 'topic3'])
+  })
+
   test('should cancel a webhook', async () => {
     await admin1.post('/api/webhook-subscriptions', {
       title: 'Cancel test',
diff --git a/ui/src/components/subscribe-webhook.vue b/ui/src/components/subscribe-webhook.vue
index 6635cee..4deb80f 100644
--- a/ui/src/components/subscribe-webhook.vue
+++ b/ui/src/components/subscribe-webhook.vue
@@ -16,10 +16,21 @@
         v-for="subscription in fetchSubscriptions.data.value.results"
         :key="subscription._id"
       >
-        <v-expansion-panel-title>{{ subscription.title }}</v-expansion-panel-title>
+        <v-expansion-panel-title>
+          <div>
+            <div>{{ subscription.title }}</div>
+            <div
+              v-if="topics.length > 1"
+              class="text-caption text-medium-emphasis"
+            >
+              {{ subscription.topic.title ?? subscription.topic.key }}
+            </div>
+          </div>
+        </v-expansion-panel-title>
         <v-expansion-panel-text>
           <webhook-subscription-form
             :model-value="subscription"
+            :topics="topics"
             @saved="fetchSubscriptions.refresh()"
             @deleted="onDeleted"
           />
@@ -30,7 +41,8 @@
         <v-expansion-panel-title>{{ t('new') }}</v-expansion-panel-title>
         <v-expansion-panel-text>
           <webhook-subscription-form
-            :model-value="{ topic, sender: sender ?? session.state.account }"
+            :model-value="{ topic: topics.length === 1 ? topics[0] : undefined, sender: sender ?? session.state.account }"
+            :topics="topics"
             @saved="fetchSubscriptions.refresh()"
           />
         </v-expansion-panel-text>
@@ -42,18 +54,19 @@
 <i18n lang="yaml">
 fr:
   new: Déclarer un nouveau Webhook
-  email: email
+en:
+  new: Declare a new webhook
 </i18n>
 
 <script lang="ts" setup>
 import type { Event, WebhookSubscription } from '#api/types'
 
 const {
-  topic,
+  topics,
   sender,
   noSender
 } = defineProps<{
-  topic: { key: string, title: string }
+  topics: { key: string, title: string }[]
   sender?: Event['sender']
   noSender: boolean
 }>()
@@ -65,7 +78,8 @@ const currentPanel = ref<number | null>(null)
 
 const subscriptionsParams = computed(() => ({
   recipient: session.state.user.id,
-  topic: topic.key,
+  topic: topics.map(topic => topic.key).join(','),
+  size: 100,
   sender: noSender ? 'none' : serializeSender(sender ?? session.state.account)
 }))
 const fetchSubscriptions = useFetch<{ results: WebhookSubscription[] }>($apiPath + '/webhook-subscriptions', { query: subscriptionsParams })
@@ -75,55 +89,6 @@ const onDeleted = async () => {
   currentPanel.value = null
 }
 
-/*
-export default {
-  props: {
-    topic: { type: Object, default: null },
-    noSender: { type: Boolean, default: false },
-    sender: { type: Object, default: null }
-  },
-  data: () => ({
-    subscriptions: null,
-    loading: true,
-    currentPanel: null
-  }),
-  computed: {
-    ...mapState('session', ['user']),
-    ...mapGetters('session', ['activeAccount'])
-  },
-  async mounted () {
-    this.refresh()
-  },
-  methods: {
-    async refresh (id) {
-      this.loading = true
-      const params = {
-        recipient: this.user.id,
-        topic: this.topic.key,
-        size: 100
-      }
-      if (this.noSender) {
-        params.noSender = 'true'
-      } else if (this.sender) {
-        params.sender = this.sender.type + ':' + this.sender.id
-      } else {
-        params.sender = this.activeAccount.type + ':' + this.activeAccount.id
-      }
-      this.subscriptions = (await this.$axios.$get('webhook-subscriptions', { params })).results
-
-      this.loading = false
-
-      if (id) {
-        this.currentPanel = null
-        await this.$nextTick()
-        this.currentPanel = this.subscriptions.findIndex(s => s._id === id)
-      }
-    },
-    async saveSubscription (subscription) {
-      await this.$axios.$post('webhook-subscriptions', subscription)
-    }
-  }
-} */
 </script>
 
 <style lang="css" scoped>
diff --git a/ui/src/components/webhook-subscription-form.vue b/ui/src/components/webhook-subscription-form.vue
index f9d040c..3bd3907 100644
--- a/ui/src/components/webhook-subscription-form.vue
+++ b/ui/src/components/webhook-subscription-form.vue
@@ -4,6 +4,24 @@
     @submit="save.execute()"
   >
     <v-row>
+      <v-col
+        v-if="topicItems.length > 1"
+        cols="12"
+      >
+        <v-select
+          v-model="topicKey"
+          :items="topicItems"
+          item-title="title"
+          item-value="key"
+          label="Évènement"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          :rules="[
+            (v: string) => !!v || 'Ce paramètre est requis'
+          ]"
+        />
+      </v-col>
       <v-col cols="12">
         <v-text-field
           v-model="subscription.title"
@@ -79,7 +97,8 @@ import type { VForm } from 'vuetify/components'
 import type { WebhookSubscription } from '#api/types'
 
 // const { modelValue } = defineProps<{ modelValue?: WebhookSubscription }>()
-const modelValue = defineModel<Partial<WebhookSubscription> & Required<Pick<WebhookSubscription, 'topic' | 'sender'>>>({ required: true })
+const modelValue = defineModel<Partial<WebhookSubscription> & Required<Pick<WebhookSubscription, 'sender'>>>({ required: true })
+const { topics } = defineProps<{ topics: { key: string, title: string }[] }>()
 const emit = defineEmits<{ saved: [], deleted: [] }>()
 
 const form = ref<VForm | null>(null)
@@ -99,6 +118,17 @@ watch(modelValue, () => {
 
 const previousState = ref(JSON.stringify(subscription))
 
+// a subscription whose topic is not among the proposed ones keeps it selectable
+const topicItems = computed(() => {
+  const current = subscription.topic
+  if (!current || topics.some(topic => topic.key === current.key)) return topics
+  return [...topics, { key: current.key, title: current.title ?? current.key }]
+})
+const topicKey = computed({
+  get: () => subscription.topic?.key,
+  set: (key) => { subscription.topic = topicItems.value.find(topic => topic.key === key) }
+})
+
 const save = useAsyncAction(async () => {
   const valid = (await form.value?.validate())?.valid
   if (!valid) return
diff --git a/ui/src/pages/embed/subscribe-webhooks.vue b/ui/src/pages/embed/subscribe-webhooks.vue
index cb0ad35..4b13c76 100644
--- a/ui/src/pages/embed/subscribe-webhooks.vue
+++ b/ui/src/pages/embed/subscribe-webhooks.vue
@@ -18,32 +18,12 @@
     >
       {{ t('admin') }}
     </v-alert>
-    <template v-else>
-      <template
-        v-for="topic in topics"
-        :key="topic.key"
-      >
-        <v-row>
-          <v-col>
-            <div
-              class="text-subtitle2"
-              style="height: auto;"
-            >
-              {{ t('webhooks', topic) }}
-            </div>
-          </v-col>
-        </v-row>
-        <v-row
-          class="ma-0"
-        >
-          <subscribe-webhook
-            :topic="topic"
-            :no-sender="!!$route.query.noSender"
-            :sender="sender"
-          />
-        </v-row>
-      </template>
-    </template>
+    <subscribe-webhook
+      v-else
+      :topics="topics"
+      :no-sender="!!$route.query.noSender"
+      :sender="sender"
+    />
   </v-container>
 </template>
 
@@ -51,11 +31,9 @@
 fr:
   logged: Vous devez être connecté pour pouvoir configurer des Webhooks.
   admin: Vous devez être administrateur pour pouvoir configurer des Webhooks.
-  webhooks: "Webhooks pour l'évènement « {title} »"
 en:
   logged: You must be logged in to configure webhooks.
   admin: You must be an administrator to configure webhooks.
-  webhooks: "Webhooks for the event “{title}”"
 </i18n>
 
 <script lang="ts" setup>

From 7cf27867e1bb99d8f3a940762d4f053fcff1fcad Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 30 Sep 2026 12:21:35 +0200
Subject: [PATCH 4/6] refactor(webhooks): drop the unreachable fallback topic
 in the subscription form

The list only loads subscriptions whose topic is among the proposed
ones, so a subscription with a topic outside them never reaches the
form.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 ui/src/components/webhook-subscription-form.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/webhook-subscription-form.vue b/ui/src/components/webhook-subscription-form.vue
index 3bd3907..95c523e 100644
--- a/ui/src/components/webhook-subscription-form.vue
+++ b/ui/src/components/webhook-subscription-form.vue
@@ -5,12 +5,12 @@
   >
     <v-row>
       <v-col
-        v-if="topicItems.length > 1"
+        v-if="topics.length > 1"
         cols="12"
       >
         <v-select
           v-model="topicKey"
-          :items="topicItems"
+          :items="topics"
           item-title="title"
           item-value="key"
           label="Évènement"
@@ -118,15 +118,9 @@ watch(modelValue, () => {
 
 const previousState = ref(JSON.stringify(subscription))
 
-// a subscription whose topic is not among the proposed ones keeps it selectable
-const topicItems = computed(() => {
-  const current = subscription.topic
-  if (!current || topics.some(topic => topic.key === current.key)) return topics
-  return [...topics, { key: current.key, title: current.title ?? current.key }]
-})
 const topicKey = computed({
   get: () => subscription.topic?.key,
-  set: (key) => { subscription.topic = topicItems.value.find(topic => topic.key === key) }
+  set: (key) => { subscription.topic = topics.find(topic => topic.key === key) }
 })
 
 const save = useAsyncAction(async () => {

From 09e6782ffb1307d51313e3ed5b32469852bc60fa Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 30 Sep 2026 12:40:32 +0200
Subject: [PATCH 5/6] feat(webhooks): push the delivery progress of webhooks
 over WS

Every write changing a webhook's status (creation, coalesced reset,
worker pick-up and outcome, retry, cancel) emits the webhook on a
channel scoped to its subscription:
<ownerType>:<ownerId>:webhook-subscriptions/<id>/webhooks, that only
an admin of the owning account can subscribe to.

The call history of the embed page listens to it instead of requiring a
manual refresh, and catches up from the API after a reconnection.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 api/src/server.ts                     |  6 +++-
 api/src/webhooks/router.ts            |  3 ++
 api/src/webhooks/service.ts           | 14 ++++++--
 api/src/webhooks/worker.ts            | 12 ++++---
 tests/webhooks.api.spec.ts            | 52 +++++++++++++++++++++++++++
 ui/src/components/webhook-history.vue | 32 +++++++++--------
 6 files changed, 96 insertions(+), 23 deletions(-)

diff --git a/api/src/server.ts b/api/src/server.ts
index f914826..e7dae8b 100644
--- a/api/src/server.ts
+++ b/api/src/server.ts
@@ -34,9 +34,13 @@ export const start = async () => {
   // await upgradeScripts(mongo.db, resolve(import.meta.dirname, '../..'))
 
   await wsServer.start(server, mongo.db, async (channel, sessionState) => {
-    const [ownerType, ownerId] = channel.split(':')
+    const [ownerType, ownerId, resource] = channel.split(':')
     if (!sessionState.user) return false
     if (sessionState.user.adminMode) return true
+    // same rule as the webhooks routes: an admin of the active account that owns the subscription
+    if (resource?.startsWith('webhook-subscriptions/')) {
+      return sessionState.account?.type === ownerType && sessionState.account.id === ownerId && sessionState.accountRole === 'admin'
+    }
     return ownerType === 'user' && ownerId === sessionState.user.id
   })
   await wsEmitter.init(mongo.db)
diff --git a/api/src/webhooks/router.ts b/api/src/webhooks/router.ts
index 023c757..b4b4016 100644
--- a/api/src/webhooks/router.ts
+++ b/api/src/webhooks/router.ts
@@ -4,6 +4,7 @@ import type { Filter, Sort } from 'mongodb'
 import { Router } from 'express'
 import { session, mongoPagination, httpError } from '@data-fair/lib-express/index.js'
 import mongo from '#mongo'
+import { emitWebhook } from './service.ts'
 
 const router = Router()
 export default router
@@ -34,6 +35,7 @@ router.post('/:id/_retry', async (req, res, next) => {
     { returnDocument: 'after' })
 
   if (!webhook) throw httpError(404)
+  await emitWebhook(webhook)
   res.send(webhook)
 })
 
@@ -47,5 +49,6 @@ router.post('/:id/_cancel', async (req, res, next) => {
     { returnDocument: 'after' })
 
   if (!webhook) throw httpError(404)
+  await emitWebhook(webhook)
   res.send(webhook)
 })
diff --git a/api/src/webhooks/service.ts b/api/src/webhooks/service.ts
index d829b13..4caff45 100644
--- a/api/src/webhooks/service.ts
+++ b/api/src/webhooks/service.ts
@@ -1,9 +1,18 @@
 import type { LocalizedEvent, Webhook, WebhookSubscription } from '#types'
 
 import { nanoid } from 'nanoid'
+import * as wsEmitter from '@data-fair/lib-node/ws-emitter.js'
 import mongo from '#mongo'
 import { coalesceAction, type CoalesceTarget } from './operations.ts'
 
+// the delivery history of a webhook subscription, listened to by its embed page to show progress live
+export const webhooksChannel = (owner: Webhook['owner'], subscriptionId: string) =>
+  `${owner.type}:${owner.id}:webhook-subscriptions/${subscriptionId}/webhooks`
+
+export const emitWebhook = async (webhook: Webhook | null) => {
+  if (webhook) await wsEmitter.emit(webhooksChannel(webhook.owner, webhook.subscription._id), webhook)
+}
+
 export const createWebhook = async (event: LocalizedEvent, webhookSubscription: WebhookSubscription, opts: { coalesce?: boolean } = {}) => {
   const notification: Webhook['notification'] = {
     title: event.title,
@@ -25,8 +34,8 @@ export const createWebhook = async (event: LocalizedEvent, webhookSubscription:
         ? { $set: { notification, status: 'waiting' as const, nbAttempts: 0 }, $unset: { nextAttempt: '' as const, lastAttempt: '' as const } }
         : { $set: { notification } }
       // matching on the observed status: if the worker grabbed it meanwhile, fall through to an insert
-      const res = await mongo.webhooks.updateOne({ _id: action._id, status: action.status }, update)
-      if (res.matchedCount) return
+      const updated = await mongo.webhooks.findOneAndUpdate({ _id: action._id, status: action.status }, update, { returnDocument: 'after' })
+      if (updated) return emitWebhook(updated)
     }
   }
 
@@ -43,4 +52,5 @@ export const createWebhook = async (event: LocalizedEvent, webhookSubscription:
     nbAttempts: 0
   }
   await mongo.webhooks.insertOne(webhook)
+  await emitWebhook(webhook)
 }
diff --git a/api/src/webhooks/worker.ts b/api/src/webhooks/worker.ts
index d24f105..f23f73a 100644
--- a/api/src/webhooks/worker.ts
+++ b/api/src/webhooks/worker.ts
@@ -9,6 +9,7 @@ import axios from '@data-fair/lib-node/axios.js'
 import { internalError } from '@data-fair/lib-node/observer.js'
 import locks from '@data-fair/lib-node/locks.js'
 import { nextAttemptDate } from './operations.ts'
+import { emitWebhook } from './service.ts'
 
 const debug = Debug('webhooks-worker')
 
@@ -39,18 +40,19 @@ const loop = async () => {
       continue
     }
     debug('work on webhook', webhook)
+    await emitWebhook(webhook)
     const date = new Date().toISOString()
     const subscription = await mongo.webhookSubscriptions
       .findOne({ _id: webhook.subscription._id, 'owner.type': webhook.owner.type, 'owner.id': webhook.owner.id })
     if (!subscription) {
       debug('missing subscription for webhook, store as error')
-      await mongo.webhooks.updateOne({ _id: webhook._id }, {
+      await emitWebhook(await mongo.webhooks.findOneAndUpdate({ _id: webhook._id }, {
         $set: {
           status: 'error',
           lastAttempt: { date, error: 'missing subscription' }
         },
         $unset: { nextAttempt: '' }
-      })
+      }, { returnDocument: 'after' }))
       continue
     }
     debug('found matching subscription', subscription)
@@ -62,14 +64,14 @@ const loop = async () => {
       debug('send webhook', subscription.url, webhook.notification)
       const res = await axios.post(subscription.url, webhook.notification, { headers, timeout: 2000 })
       debug('webhook success')
-      await mongo.webhooks.updateOne({ _id: webhook._id }, {
+      await emitWebhook(await mongo.webhooks.findOneAndUpdate({ _id: webhook._id }, {
         $set: {
           status: 'ok',
           lastAttempt: { date, status: res.status }
         },
         $unset: { nextAttempt: '' },
         $inc: { nbAttempts: 1 }
-      })
+      }, { returnDocument: 'after' }))
     } catch (err: any) {
       debug('webhook failed', err)
       const attempt: Webhook['lastAttempt'] = { date }
@@ -89,7 +91,7 @@ const loop = async () => {
         patch.$set.nextAttempt = nextAttemptDate(webhook.nbAttempts + 1)
         debug('webhook failed, progressively backoff', patch.$set.nextAttempt)
       }
-      await mongo.webhooks.updateOne({ _id: webhook._id }, patch)
+      await emitWebhook(await mongo.webhooks.findOneAndUpdate({ _id: webhook._id }, patch, { returnDocument: 'after' }))
     }
   }
   await locks.release('webhooks-loop')
diff --git a/tests/webhooks.api.spec.ts b/tests/webhooks.api.spec.ts
index f718eec..a90398d 100644
--- a/tests/webhooks.api.spec.ts
+++ b/tests/webhooks.api.spec.ts
@@ -1,10 +1,29 @@
 import { test, expect } from '@playwright/test'
 import { createServer } from 'node:http'
+import WebSocket from 'ws'
 import { axios, axiosAuth, clean, devBaseURL } from './support/axios.ts'
 
 const axPush = axios({ params: { key: 'SECRET_EVENTS' }, baseURL: devBaseURL })
 const axDev = axios({ baseURL: devBaseURL })
 const admin1 = await axiosAuth('test1-admin1')
+const user1 = await axiosAuth('test-user1')
+
+// open a WS as this user and subscribe to a channel, resolves with the subscription outcome
+const wsSubscribe = async (ax: typeof admin1, channel: string) => {
+  const cookies = ax.cookieJar.getCookiesSync(`http://${process.env.DEV_HOST}:${process.env.NGINX_PORT}`)
+  const ws = new WebSocket(`ws://localhost:${process.env.DEV_API_PORT}`, { headers: { Cookie: cookies.map(String).join('; ') } })
+  const messages: any[] = []
+  const outcome = await new Promise<string>((resolve, reject) => {
+    ws.on('message', (raw: Buffer) => {
+      const msg = JSON.parse(raw.toString())
+      if (msg.type === 'subscribe-confirm' || msg.type === 'error') resolve(msg.type)
+      if (msg.type === 'message') messages.push(msg.data)
+    })
+    ws.on('open', () => ws.send(JSON.stringify({ type: 'subscribe', channel })))
+    ws.on('error', reject)
+  })
+  return { ws, messages, outcome }
+}
 
 // helper to post event matching a webhook subscription owned by test1-admin1/test1
 const postMatchingEvent = (title: string) => axPush.post('/api/events', [{
@@ -173,6 +192,39 @@ test.describe('webhooks', () => {
     expect(two.data.results.map((s: any) => s.topic.key)).toEqual(['topic1', 'topic3'])
   })
 
+  test('should stream the delivery progress of a webhook subscription over WS', async () => {
+    const hookServer = createServer((req, res) => { req.resume(); req.on('end', () => { res.writeHead(200); res.end() }) })
+    await new Promise<void>(resolve => hookServer.listen(19882, resolve))
+    try {
+      const sub = (await admin1.post('/api/webhook-subscriptions', {
+        title: 'WS progress',
+        topic: { key: 'topic1' },
+        sender: { type: 'organization', id: 'test1' },
+        url: 'http://localhost:19882/hook'
+      })).data
+      const channel = `${sub.owner.type}:${sub.owner.id}:webhook-subscriptions/${sub._id}/webhooks`
+
+      // only an admin of the owning account can listen
+      const other = await wsSubscribe(user1, channel)
+      other.ws.close()
+      expect(other.outcome).toBe('error')
+
+      const { ws, messages, outcome } = await wsSubscribe(admin1, channel)
+      try {
+        expect(outcome).toBe('subscribe-confirm')
+        await postMatchingEvent('ws progress')
+        // the worker polls every 4s
+        await expect.poll(() => messages.map(m => m.status), { timeout: 12000 }).toEqual(['waiting', 'working', 'ok'])
+        expect(new Set(messages.map(m => m._id)).size).toBe(1)
+        expect(messages[2].notification.title).toBe('ws progress')
+      } finally {
+        ws.close()
+      }
+    } finally {
+      hookServer.close()
+    }
+  })
+
   test('should cancel a webhook', async () => {
     await admin1.post('/api/webhook-subscriptions', {
       title: 'Cancel test',
diff --git a/ui/src/components/webhook-history.vue b/ui/src/components/webhook-history.vue
index c4cb99d..8c88956 100644
--- a/ui/src/components/webhook-history.vue
+++ b/ui/src/components/webhook-history.vue
@@ -6,18 +6,6 @@
   >
     <div class="d-flex align-center ga-2">
       <span class="text-subtitle-1">{{ t('history') }}</span>
-      <v-btn
-        icon
-        variant="text"
-        color="primary"
-        density="comfortable"
-        :title="t('refresh')"
-        :aria-label="t('refresh')"
-        :loading="fetchWebhooks.loading.value"
-        @click="fetchWebhooks.refresh()"
-      >
-        <v-icon :icon="mdiRefresh" />
-      </v-btn>
       <v-spacer />
       <v-btn
         color="primary"
@@ -50,12 +38,10 @@
 <i18n lang="yaml">
 fr:
   history: Historique des appels
-  refresh: Rafraîchir l'historique
   test: Tester
   noWebhooks: Ce webhook n'a pas encore été appelé.
 en:
   history: Call history
-  refresh: Refresh the history
   test: Test
   noWebhooks: This webhook has not been called yet.
 </i18n>
@@ -69,7 +55,23 @@ const { t } = useI18n()
 
 const webhooksParams = computed(() => ({ size: 100, subscription: subscription._id }))
 const fetchWebhooks = useFetch<{ results: Webhook[] }>($apiPath + '/webhooks', { query: webhooksParams })
-const webhooks = computed(() => fetchWebhooks.data.value?.results)
+// a local copy, the fetched data is read-only and the WS messages patch it
+const webhooks = ref<Webhook[]>()
+watch(fetchWebhooks.data, (data) => { webhooks.value = data?.results }, { immediate: true })
+
+// the delivery progress is pushed live, see webhooksChannel in the API
+const ws = useWS($apiPath + '/')
+ws?.subscribe<Webhook>(`${subscription.owner.type}:${subscription.owner.id}:webhook-subscriptions/${subscription._id}/webhooks`, (webhook) => {
+  const results = webhooks.value
+  if (!results) return
+  const i = results.findIndex(w => w._id === webhook._id)
+  if (i === -1) results.unshift(webhook)
+  else results[i] = webhook
+})
+// messages sent while the socket was reconnecting are lost, catch up from the API
+watch(() => ws?.opened.value, (opened, wasOpened) => {
+  if (opened && wasOpened === false) fetchWebhooks.refresh()
+})
 
 const test = useAsyncAction(async () => {
   await $fetch(`webhook-subscriptions/${subscription._id}/_test`, { method: 'POST' })

From 003d10707ff513aac0b2cd785b49ce81041354db Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 30 Sep 2026 14:36:35 +0200
Subject: [PATCH 6/6] fix(webhooks): save only editable fields and track real
 changes

Saving an existing webhook subscription posted the listed document with
created, updated, owner and visibility, and the API answered 400. The
form now keeps and posts only the properties accepted by the POST route
and compares them to the saved subscription to enable the save button,
so the refreshed "updated" date after a save is no longer a change.

The new subscription form receives a stable object, an inline literal
was recreated on every render and could reset the chosen topic.

Add e2e tests for the webhooks page: creation with topic selection,
single topic, edition, deletion and live test call progress.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 tests/webhooks.e2e.spec.ts                    | 110 ++++++++++++++++++
 ui/src/components/subscribe-webhook.vue       |   8 +-
 .../components/webhook-subscription-form.vue  |  27 +++--
 3 files changed, 130 insertions(+), 15 deletions(-)
 create mode 100644 tests/webhooks.e2e.spec.ts

diff --git a/tests/webhooks.e2e.spec.ts b/tests/webhooks.e2e.spec.ts
new file mode 100644
index 0000000..44ad5db
--- /dev/null
+++ b/tests/webhooks.e2e.spec.ts
@@ -0,0 +1,110 @@
+import { expect, type Page } from '@playwright/test'
+import { test } from './fixtures/login.ts'
+import { axiosAuth, clean } from './support/axios.ts'
+
+const pageUrl = (keys: string[], titles: string[]) =>
+  `/events/embed/subscribe-webhooks?key=${keys.join(',')}&title=${titles.join(',')}&sender=user:test-user1`
+
+const saveButton = (page: Page) => page.getByRole('button', { name: 'Enregistrer' }).first()
+
+test.describe('Webhooks UI', () => {
+  test.beforeEach(clean)
+
+  test('creates a webhook on a chosen topic', async ({ page, goToWithAuth }) => {
+    await goToWithAuth(pageUrl(['topic1', 'topic2'], ['TopicOne', 'TopicTwo']), 'test-user1')
+    await page.getByText('Declare a new webhook').click()
+    await expect(saveButton(page)).toBeDisabled()
+
+    await page.getByLabel('Libellé').fill('My webhook')
+    await page.getByLabel('URL').fill('https://example.com/hook')
+    await saveButton(page).click()
+    // several topics are proposed, none is preselected
+    await expect(page.getByText('Ce paramètre est requis')).toBeVisible()
+
+    await page.locator('.v-select').click()
+    await page.getByRole('option', { name: 'TopicTwo' }).click()
+    await saveButton(page).click()
+
+    await expect(page.getByText('This webhook has not been called yet.')).toBeVisible()
+    await expect(page.getByRole('button', { name: /My webhook\s*TopicTwo/ })).toBeVisible()
+    await expect(saveButton(page)).toBeDisabled()
+  })
+
+  test('does not propose a topic selector for a single topic', async ({ page, goToWithAuth }) => {
+    await goToWithAuth(pageUrl(['topic1'], ['TopicOne']), 'test-user1')
+    await page.getByText('Declare a new webhook').click()
+    await expect(page.getByLabel('Libellé')).toBeVisible()
+    await expect(page.locator('.v-select')).toHaveCount(0)
+  })
+
+  test('edits an existing webhook', async ({ page, goToWithAuth }) => {
+    const user1 = await axiosAuth('test-user1')
+    await user1.post('/api/webhook-subscriptions', {
+      title: 'Existing webhook',
+      topic: { key: 'topic1', title: 'TopicOne' },
+      sender: { type: 'user', id: 'test-user1' },
+      url: 'https://example.com/hook'
+    })
+
+    await goToWithAuth(pageUrl(['topic1', 'topic2'], ['TopicOne', 'TopicTwo']), 'test-user1')
+    await page.getByRole('button', { name: /Existing webhook/ }).click()
+    await expect(saveButton(page)).toBeDisabled()
+
+    await page.getByLabel('Libellé').first().fill('Renamed webhook')
+    await expect(saveButton(page)).toBeEnabled()
+    await page.locator('.v-select').first().click()
+    await page.getByRole('option', { name: 'TopicTwo' }).click()
+    const saved = page.waitForResponse(res => res.request().method() === 'POST' && res.url().endsWith('/webhook-subscriptions'))
+    await saveButton(page).click()
+    expect((await saved).status()).toBe(200)
+    // the refreshed subscription (new "updated" date) is not a change to save
+    await expect(page.getByRole('button', { name: /Renamed webhook\s*TopicTwo/ })).toBeVisible()
+    await expect(saveButton(page)).toBeDisabled()
+
+    const res = await user1.get('/api/webhook-subscriptions')
+    expect(res.data.results).toHaveLength(1)
+    expect(res.data.results[0].title).toBe('Renamed webhook')
+    expect(res.data.results[0].topic.key).toBe('topic2')
+  })
+
+  test('deletes a webhook', async ({ page, goToWithAuth }) => {
+    const user1 = await axiosAuth('test-user1')
+    await user1.post('/api/webhook-subscriptions', {
+      title: 'Doomed webhook',
+      topic: { key: 'topic1', title: 'TopicOne' },
+      sender: { type: 'user', id: 'test-user1' },
+      url: 'https://example.com/hook'
+    })
+
+    await goToWithAuth(pageUrl(['topic1'], ['TopicOne']), 'test-user1')
+    await page.getByRole('button', { name: /Doomed webhook/ }).click()
+    await page.getByRole('button', { name: 'Supprimer' }).click()
+    await page.getByRole('button', { name: 'Yes', exact: true }).click()
+    await expect(page.getByText('Doomed webhook')).toHaveCount(0)
+    expect((await user1.get('/api/webhook-subscriptions')).data.count).toBe(0)
+  })
+
+  test('shows the progress of a test call without refreshing', async ({ page, goToWithAuth }) => {
+    const user1 = await axiosAuth('test-user1')
+    await user1.post('/api/webhook-subscriptions', {
+      title: 'Tested webhook',
+      topic: { key: 'topic1', title: 'TopicOne' },
+      sender: { type: 'user', id: 'test-user1' },
+      // nothing listens there, the delivery ends in error
+      url: 'http://localhost:19898/closed'
+    })
+
+    await goToWithAuth(pageUrl(['topic1'], ['TopicOne']), 'test-user1')
+    await page.getByRole('button', { name: /Tested webhook/ }).click()
+    await expect(page.getByText('This webhook has not been called yet.')).toBeVisible()
+
+    let listRequests = 0
+    page.on('request', req => { if (req.url().includes('/api/webhooks?')) listRequests++ })
+    await page.getByRole('button', { name: 'Test', exact: true }).click()
+    await expect(page.getByText(/ - waiting| - working/)).toBeVisible()
+    const listRequestsAfterTest = listRequests
+    // the worker polls every 4s, its outcome is pushed over WS
+    await expect(page.getByText(/ - error/)).toBeVisible({ timeout: 15000 })
+    expect(listRequests).toBe(listRequestsAfterTest)
+  })
+})
diff --git a/ui/src/components/subscribe-webhook.vue b/ui/src/components/subscribe-webhook.vue
index 4deb80f..7e1e400 100644
--- a/ui/src/components/subscribe-webhook.vue
+++ b/ui/src/components/subscribe-webhook.vue
@@ -41,7 +41,7 @@
         <v-expansion-panel-title>{{ t('new') }}</v-expansion-panel-title>
         <v-expansion-panel-text>
           <webhook-subscription-form
-            :model-value="{ topic: topics.length === 1 ? topics[0] : undefined, sender: sender ?? session.state.account }"
+            :model-value="newSubscription"
             :topics="topics"
             @saved="fetchSubscriptions.refresh()"
           />
@@ -76,6 +76,12 @@ const session = useSessionAuthenticated()
 
 const currentPanel = ref<number | null>(null)
 
+// a stable object: an inline literal would be recreated on every render and reset the form
+const newSubscription = computed(() => ({
+  topic: topics.length === 1 ? topics[0] : undefined,
+  sender: sender ?? session.state.account
+}))
+
 const subscriptionsParams = computed(() => ({
   recipient: session.state.user.id,
   topic: topics.map(topic => topic.key).join(','),
diff --git a/ui/src/components/webhook-subscription-form.vue b/ui/src/components/webhook-subscription-form.vue
index 95c523e..6ae0df0 100644
--- a/ui/src/components/webhook-subscription-form.vue
+++ b/ui/src/components/webhook-subscription-form.vue
@@ -83,7 +83,7 @@
         color="primary"
         variant="flat"
         :loading="save.loading.value"
-        :disabled="JSON.stringify(subscription) === previousState || save.loading.value"
+        :disabled="!changed || save.loading.value"
         @click="save.execute()"
       >
         Enregistrer
@@ -96,27 +96,27 @@
 import type { VForm } from 'vuetify/components'
 import type { WebhookSubscription } from '#api/types'
 
-// const { modelValue } = defineProps<{ modelValue?: WebhookSubscription }>()
 const modelValue = defineModel<Partial<WebhookSubscription> & Required<Pick<WebhookSubscription, 'sender'>>>({ required: true })
 const { topics } = defineProps<{ topics: { key: string, title: string }[] }>()
 const emit = defineEmits<{ saved: [], deleted: [] }>()
 
 const form = ref<VForm | null>(null)
 
-const subscription = reactive<Partial<WebhookSubscription> & Required<Pick<WebhookSubscription, 'header'>>>({
-  title: '',
-  url: '',
-  header: {
-    key: '',
-    value: ''
-  }
+// only the properties accepted by the POST route, the listed subscriptions also carry
+// created, updated, owner and visibility that the API refuses or sets itself
+const editable = (s: typeof modelValue.value) => ({
+  _id: s._id,
+  topic: s.topic,
+  sender: s.sender,
+  title: s.title ?? '',
+  url: s.url ?? '',
+  header: { key: s.header?.key ?? '', value: s.header?.value ?? '' }
 })
 
-watch(modelValue, () => {
-  if (modelValue.value) Object.assign(subscription, modelValue.value)
-}, { immediate: true })
+const subscription = reactive(editable(modelValue.value))
+watch(modelValue, () => { Object.assign(subscription, editable(modelValue.value)) })
 
-const previousState = ref(JSON.stringify(subscription))
+const changed = computed(() => JSON.stringify(subscription) !== JSON.stringify(editable(modelValue.value)))
 
 const topicKey = computed({
   get: () => subscription.topic?.key,
@@ -127,7 +127,6 @@ const save = useAsyncAction(async () => {
   const valid = (await form.value?.validate())?.valid
   if (!valid) return
   await $fetch<WebhookSubscription>('webhook-subscriptions', { method: 'POST', body: subscription })
-  previousState.value = JSON.stringify(subscription)
   emit('saved')
 })