From 5bc35d781db4a3125f4f009b5abf5b28fe30707a Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Thu, 5 Feb 2026 17:49:06 +0100
Subject: [PATCH 1/7] refactor: organize api in folders

---
 api/config/development.mjs                    |  2 +-
 api/config/test.mjs                           |  2 +-
 api/src/{admin.ts => admin/router.ts}         |  8 ++-
 api/src/admin/status.ts                       | 55 +++++++++++++++++++
 api/src/app.ts                                | 14 ++---
 .../{routers/limits.ts => limits/router.ts}   |  0
 api/src/{ => misc}/routers/identities.ts      |  0
 api/src/{ => misc}/utils/api-docs.ts          |  2 +-
 api/src/{ => misc}/utils/find.ts              |  0
 api/src/{ => misc}/utils/permissions.ts       |  0
 .../router.ts}                                |  0
 .../{routers/plugins.ts => plugins/router.ts} |  2 +-
 .../processings.ts => processings/router.ts}  |  8 +--
 api/src/{routers/runs.ts => runs/router.ts}   |  4 +-
 api/src/{utils/runs.ts => runs/service.ts}    |  0
 api/src/server.ts                             |  2 +-
 dev/resources/nginx.conf                      |  4 +-
 docker-compose.yml                            |  5 +-
 scripts/re-schedule-all.ts                    |  2 +-
 ui/.gitignore                                 |  1 +
 ui/dts/auto-imports.d.ts                      |  1 -
 ui/dts/typed-router.d.ts                      |  1 +
 ui/src/components/private-access.vue          |  3 -
 .../processing/processing-actions.vue         |  3 -
 .../components/processing/processing-card.vue |  4 +-
 .../components/processing/processing-runs.vue |  3 -
 ui/src/pages/dev.vue                          |  3 -
 worker/config/development.mjs                 |  2 +-
 28 files changed, 89 insertions(+), 42 deletions(-)
 rename api/src/{admin.ts => admin/router.ts} (79%)
 create mode 100644 api/src/admin/status.ts
 rename api/src/{routers/limits.ts => limits/router.ts} (100%)
 rename api/src/{ => misc}/routers/identities.ts (100%)
 rename api/src/{ => misc}/utils/api-docs.ts (99%)
 rename api/src/{ => misc}/utils/find.ts (100%)
 rename api/src/{ => misc}/utils/permissions.ts (100%)
 rename api/src/{routers/plugins-registry.ts => plugins-registry/router.ts} (100%)
 rename api/src/{routers/plugins.ts => plugins/router.ts} (99%)
 rename api/src/{routers/processings.ts => processings/router.ts} (98%)
 rename api/src/{routers/runs.ts => runs/router.ts} (96%)
 rename api/src/{utils/runs.ts => runs/service.ts} (100%)

diff --git a/api/config/development.mjs b/api/config/development.mjs
index 9e37ef41..ee27bada 100644
--- a/api/config/development.mjs
+++ b/api/config/development.mjs
@@ -7,7 +7,7 @@ export default {
   },
   port: 8082,
   privateDirectoryUrl: 'http://localhost:8080',
-  privateEventsUrl: 'http://localhost:8084',
+  privateEventsUrl: 'http://localhost:8083',
   secretKeys: {
     identities: 'secret-identities',
     events: 'secret-events'
diff --git a/api/config/test.mjs b/api/config/test.mjs
index aafec418..0c4481ef 100644
--- a/api/config/test.mjs
+++ b/api/config/test.mjs
@@ -7,7 +7,7 @@ export default {
   },
   port: 8082,
   privateDirectoryUrl: 'http://localhost:8080',
-  privateEventsUrl: 'http://localhost:8084',
+  privateEventsUrl: 'http://localhost:8083',
   secretKeys: {
     identities: 'secret-identities',
     events: 'secret-events'
diff --git a/api/src/admin.ts b/api/src/admin/router.ts
similarity index 79%
rename from api/src/admin.ts
rename to api/src/admin/router.ts
index bc6ed9b6..a0e7bd80 100644
--- a/api/src/admin.ts
+++ b/api/src/admin/router.ts
@@ -2,7 +2,8 @@ import { resolve } from 'node:path'
 import { readFile } from 'node:fs/promises'
 import { Router } from 'express'
 import { reqOrigin, session } from '@data-fair/lib-express'
-import getApiDoc from './utils/api-docs.ts'
+import { getStatus } from './status.ts'
+import getApiDoc from '../misc/utils/api-docs.ts'
 
 const router = Router()
 export default router
@@ -21,6 +22,11 @@ router.get('/info', (req, res) => {
   res.send(info)
 })
 
+router.get('/status', async (req, res) => {
+  const status = await getStatus(req)
+  res.send(status)
+})
+
 // Get the full API documentation of the service
 router.get('/api-docs.json', async (req, res) => {
   res.json(getApiDoc(reqOrigin(req)))
diff --git a/api/src/admin/status.ts b/api/src/admin/status.ts
new file mode 100644
index 00000000..2e03ddb1
--- /dev/null
+++ b/api/src/admin/status.ts
@@ -0,0 +1,55 @@
+import type { Request } from 'express'
+import mongo from '#mongo'
+import config from '#config'
+import fs from 'node:fs/promises'
+
+const mongoStatus = async () => { await mongo.db.command({ ping: 1 }) }
+const volumeStatus = async () => {
+  await fs.writeFile(`${config.dataDir}/check-access.txt`, 'ok')
+}
+
+export const getStatus = async (req: Request) =>
+  runHealthChecks(req, [
+    { fn: mongoStatus, name: 'mongodb' },
+    { fn: volumeStatus, name: 'data volume' }
+  ])
+
+// Helper functions
+const getSingleStatus = async (req: Request, fn: (req: Request) => Promise<void>, name: string) => {
+  const start = performance.now()
+  try {
+    await fn(req)
+    return {
+      status: 'ok',
+      name,
+      timeInMs: Math.round(performance.now() - start)
+    }
+  } catch (err) {
+    return {
+      status: 'error',
+      message: err instanceof Error ? err.message : String(err),
+      name,
+      timeInMs: Math.round(performance.now() - start)
+    }
+  }
+}
+const runHealthChecks = async (
+  req: Request,
+  checks: Array<{ fn: (req: Request) => Promise<void>; name: string }>
+) => {
+  let results
+  try {
+    results = await Promise.all(checks.map(({ fn, name }) => getSingleStatus(req, fn, name)))
+  } catch (err: any) {
+    return {
+      status: 'error',
+      details: err.toString()
+    }
+  }
+  const errors = results.filter(r => r.status === 'error')
+  return {
+    status: errors.length ? 'error' : 'ok',
+    message: errors.length ? ('Problem with : ' + errors.map(s => s.name).join(', ')) : 'Service is ok',
+    details: results
+  }
+}
diff --git a/api/src/app.ts b/api/src/app.ts
index 44241549..c5846148 100644
--- a/api/src/app.ts
+++ b/api/src/app.ts
@@ -1,13 +1,13 @@
 import { resolve } from 'node:path'
 import express from 'express'
 import { session, errorHandler, createSiteMiddleware, createSpaMiddleware, defaultNonceCSPDirectives } from '@data-fair/lib-express/index.js'
-import identitiesRouter from './routers/identities.ts'
-import limitsRouter from './routers/limits.ts'
-import pluginsRegistryRouter from './routers/plugins-registry.ts'
-import pluginsRouter from './routers/plugins.ts'
-import processingsRouter from './routers/processings.ts'
-import runsRouter from './routers/runs.ts'
-import adminRouter from './admin.ts'
+import identitiesRouter from './misc/routers/identities.ts'
+import limitsRouter from './limits/router.ts'
+import pluginsRegistryRouter from './plugins-registry/router.ts'
+import pluginsRouter from './plugins/router.ts'
+import processingsRouter from './processings/router.ts'
+import runsRouter from './runs/router.ts'
+import adminRouter from './admin/router.ts'
 import config, { uiConfig } from '#config'
 
 export const app = express()
diff --git a/api/src/routers/limits.ts b/api/src/limits/router.ts
similarity index 100%
rename from api/src/routers/limits.ts
rename to api/src/limits/router.ts
diff --git a/api/src/routers/identities.ts b/api/src/misc/routers/identities.ts
similarity index 100%
rename from api/src/routers/identities.ts
rename to api/src/misc/routers/identities.ts
diff --git a/api/src/utils/api-docs.ts b/api/src/misc/utils/api-docs.ts
similarity index 99%
rename from api/src/utils/api-docs.ts
rename to api/src/misc/utils/api-docs.ts
index 932f0670..612a1af9 100644
--- a/api/src/utils/api-docs.ts
+++ b/api/src/misc/utils/api-docs.ts
@@ -4,7 +4,7 @@ import { type Plugin, resolvedSchema as PluginSchema } from '#types/plugin/index
 import { readFileSync } from 'node:fs'
 import path from 'path'
 
-const packageJson = JSON.parse(readFileSync(path.resolve(import.meta.dirname, '../../package.json'), 'utf-8'))
+const packageJson = JSON.parse(readFileSync(path.resolve(import.meta.dirname, '../../../package.json'), 'utf-8'))
 
 // CTRL + K CTRL + 4 to fold operations levels
 
diff --git a/api/src/utils/find.ts b/api/src/misc/utils/find.ts
similarity index 100%
rename from api/src/utils/find.ts
rename to api/src/misc/utils/find.ts
diff --git a/api/src/utils/permissions.ts b/api/src/misc/utils/permissions.ts
similarity index 100%
rename from api/src/utils/permissions.ts
rename to api/src/misc/utils/permissions.ts
diff --git a/api/src/routers/plugins-registry.ts b/api/src/plugins-registry/router.ts
similarity index 100%
rename from api/src/routers/plugins-registry.ts
rename to api/src/plugins-registry/router.ts
diff --git a/api/src/routers/plugins.ts b/api/src/plugins/router.ts
similarity index 99%
rename from api/src/routers/plugins.ts
rename to api/src/plugins/router.ts
index ec976f54..6750e06f 100644
--- a/api/src/routers/plugins.ts
+++ b/api/src/plugins/router.ts
@@ -15,7 +15,7 @@ import multer from 'multer'
 import { session, httpError } from '@data-fair/lib-express'
 import mongo from '#mongo'
 import config from '#config'
-import permissions from '../utils/permissions.ts'
+import permissions from '../misc/utils/permissions.ts'
 
 // @ts-ignore
 const ajv = ajvFormats(new Ajv({ strict: false }))
diff --git a/api/src/routers/processings.ts b/api/src/processings/router.ts
similarity index 98%
rename from api/src/routers/processings.ts
rename to api/src/processings/router.ts
index a504e58f..1a4daf6a 100644
--- a/api/src/routers/processings.ts
+++ b/api/src/processings/router.ts
@@ -15,15 +15,15 @@ import eventsQueue from '@data-fair/lib-node/events-queue.js'
 import { reqOrigin, session } from '@data-fair/lib-express/index.js'
 import { httpError } from '@data-fair/lib-utils/http-errors.js'
 import { createNext } from '@data-fair/processings-shared/runs.ts'
-import { applyProcessing, deleteProcessing } from '../utils/runs.ts'
+import { applyProcessing, deleteProcessing } from '../runs/service.ts'
 import { cipher, decipher } from '@data-fair/processings-shared/cipher.ts'
 import mongo from '#mongo'
 import config from '#config'
 import locks from '#locks'
 import { resolvedSchema as processingSchema } from '#types/processing/index.ts'
-import getApiDoc from '../utils/api-docs.ts'
-import findUtils from '../utils/find.ts'
-import permissions from '../utils/permissions.ts'
+import getApiDoc from '../misc/utils/api-docs.ts'
+import findUtils from '../misc/utils/find.ts'
+import permissions from '../misc/utils/permissions.ts'
 
 const router = Router()
 export default router
diff --git a/api/src/routers/runs.ts b/api/src/runs/router.ts
similarity index 96%
rename from api/src/routers/runs.ts
rename to api/src/runs/router.ts
index 4dcbbb4f..3120e38b 100644
--- a/api/src/routers/runs.ts
+++ b/api/src/runs/router.ts
@@ -5,8 +5,8 @@ import * as wsEmitter from '@data-fair/lib-node/ws-emitter.js'
 import { session } from '@data-fair/lib-express/index.js'
 import { Router } from 'express'
 import mongo from '#mongo'
-import findUtils from '../utils/find.ts'
-import permissions from '../utils/permissions.ts'
+import findUtils from '../misc/utils/find.ts'
+import permissions from '../misc/utils/permissions.ts'
 
 const router = Router()
 export default router
diff --git a/api/src/utils/runs.ts b/api/src/runs/service.ts
similarity index 100%
rename from api/src/utils/runs.ts
rename to api/src/runs/service.ts
diff --git a/api/src/server.ts b/api/src/server.ts
index 9726d97f..f2ab198f 100644
--- a/api/src/server.ts
+++ b/api/src/server.ts
@@ -13,7 +13,7 @@ import config from '#config'
 import mongo from '#mongo'
 import locks from '#locks'
 import http from 'http'
-import permissions from './utils/permissions.ts'
+import permissions from './misc/utils/permissions.ts'
 
 const exec = promisify(execCallback)
 const server = http.createServer(app)
diff --git a/dev/resources/nginx.conf b/dev/resources/nginx.conf
index 47881c69..e53f3211 100644
--- a/dev/resources/nginx.conf
+++ b/dev/resources/nginx.conf
@@ -98,11 +98,11 @@ http {
         }
 
         location /openapi-viewer {
-            proxy_pass http://localhost:8083;
+            proxy_pass http://localhost:8084;
         }
 
         location /events/ {
-            proxy_pass http://localhost:8084;
+            proxy_pass http://localhost:8083;
         }
     }
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index f0a26534..318d22f6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -68,9 +68,8 @@ services:
     profiles:
       - dev
     image: ghcr.io/data-fair/openapi-viewer:master
-    ports:
-      - 8083:8080
     environment:
+      - PORT=8084
       - USE_SIMPLE_DIRECTORY=true
       - ALLOWED_URLS={"processings":"http://localhost:5600/processings/api/v1/api-docs.json","processingsId":"http://localhost:5600/processings/api/v1/processings/{id}/api-docs.json","processingsAdmin":"http://localhost:5600/processings/api/v1/admin/api-docs.json"}
 
@@ -80,7 +79,7 @@ services:
     image: ghcr.io/data-fair/events:main
     network_mode: host
     environment:
-      - PORT=8084
+      - PORT=8083
       - PRIVATE_DIRECTORY_URL=http://localhost:5600/simple-directory
       - SECRET_IDENTITIES=secret-identities
       - SECRET_EVENTS=secret-events
diff --git a/scripts/re-schedule-all.ts b/scripts/re-schedule-all.ts
index e038eb02..a8c2af12 100644
--- a/scripts/re-schedule-all.ts
+++ b/scripts/re-schedule-all.ts
@@ -1,4 +1,4 @@
-import runs from '../api/src/utils/runs.ts'
+import runs from '../api/src/runs/service.ts'
 
 async function main () {
   const { db } = await require('../api/utils/db').connect()
diff --git a/ui/.gitignore b/ui/.gitignore
index b6cdf575..55e510f1 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 *.tsbuildinfo
+dts
 
 # Editor directories and files
 .vscode/*
diff --git a/ui/dts/auto-imports.d.ts b/ui/dts/auto-imports.d.ts
index fc4303ad..4035690e 100644
--- a/ui/dts/auto-imports.d.ts
+++ b/ui/dts/auto-imports.d.ts
@@ -60,7 +60,6 @@ declare global {
   const mdiPencil: typeof import('@mdi/js')['mdiPencil']
   const mdiPlay: typeof import('@mdi/js')['mdiPlay']
   const mdiPlayCircle: typeof import('@mdi/js')['mdiPlayCircle']
-  const mdiPlug: typeof import('@mdi/js')['mdiPlug']
   const mdiPlusCircle: typeof import('@mdi/js')['mdiPlusCircle']
   const mdiPlusCircleOutline: typeof import('@mdi/js')['mdiPlusCircleOutline']
   const mdiPowerPlug: typeof import('@mdi/js')['mdiPowerPlug']
diff --git a/ui/dts/typed-router.d.ts b/ui/dts/typed-router.d.ts
index 0201f23b..e671f935 100644
--- a/ui/dts/typed-router.d.ts
+++ b/ui/dts/typed-router.d.ts
@@ -20,6 +20,7 @@ declare module 'vue-router/auto-routes' {
   export interface RouteNamedMap {
     '/admin/': RouteRecordInfo<'/admin/', '/admin', Record<never, never>, Record<never, never>>,
     '/admin/plugins': RouteRecordInfo<'/admin/plugins', '/admin/plugins', Record<never, never>, Record<never, never>>,
+    '/dev': RouteRecordInfo<'/dev', '/dev', Record<never, never>, Record<never, never>>,
     '/processings/': RouteRecordInfo<'/processings/', '/processings', Record<never, never>, Record<never, never>>,
     '/processings/[id]/': RouteRecordInfo<'/processings/[id]/', '/processings/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/processings/[id]/runs/[runId]': RouteRecordInfo<'/processings/[id]/runs/[runId]', '/processings/:id/runs/:runId', { id: ParamValue<true>, runId: ParamValue<true> }, { id: ParamValue<false>, runId: ParamValue<false> }>,
diff --git a/ui/src/components/private-access.vue b/ui/src/components/private-access.vue
index aaf18b9b..f737225a 100644
--- a/ui/src/components/private-access.vue
+++ b/ui/src/components/private-access.vue
@@ -103,6 +103,3 @@ function onChange () {
   loading.value = false
 }
 </script>
-
-<style>
-</style>
diff --git a/ui/src/components/processing/processing-actions.vue b/ui/src/components/processing/processing-actions.vue
index 3ce6aead..42ae521a 100644
--- a/ui/src/components/processing/processing-actions.vue
+++ b/ui/src/components/processing/processing-actions.vue
@@ -454,6 +454,3 @@ watch(showTriggerMenu, async (newValue) => {
   }
 })
 </script>
-
-<style>
-</style>
diff --git a/ui/src/components/processing/processing-card.vue b/ui/src/components/processing/processing-card.vue
index 900e722f..616d610b 100644
--- a/ui/src/components/processing/processing-card.vue
+++ b/ui/src/components/processing/processing-card.vue
@@ -56,9 +56,7 @@
           <template #prepend>
             <v-icon :icon="mdiPowerPlug" />
           </template>
-          <span>
-            {{ pluginFetch.data.value?.metadata.name }}
-          </span>
+          {{ pluginFetch.data.value?.metadata.name }}
         </v-list-item>
 
         <!-- Linked dataset -->
diff --git a/ui/src/components/processing/processing-runs.vue b/ui/src/components/processing/processing-runs.vue
index f0df5076..122f79f6 100644
--- a/ui/src/components/processing/processing-runs.vue
+++ b/ui/src/components/processing/processing-runs.vue
@@ -85,6 +85,3 @@ onUnmounted(() => {
 
 defineExpose({ refresh: () => runs.refresh() })
 </script>
-
-<style>
-</style>
diff --git a/ui/src/pages/dev.vue b/ui/src/pages/dev.vue
index 57e88f48..a35aa138 100644
--- a/ui/src/pages/dev.vue
+++ b/ui/src/pages/dev.vue
@@ -43,6 +43,3 @@
 <script setup>
 import personalMenu from '@data-fair/lib-vuetify/personal-menu.vue'
 </script>
-
-<style>
-</style>
diff --git a/worker/config/development.mjs b/worker/config/development.mjs
index c6dbb051..edffb4e8 100644
--- a/worker/config/development.mjs
+++ b/worker/config/development.mjs
@@ -12,7 +12,7 @@ export default {
     port: 9091
   },
   privateDataFairUrl: 'http://localhost:8081',
-  privateEventsUrl: 'http://localhost:8084',
+  privateEventsUrl: 'http://localhost:8083',
   runsRetention: 5,
   upgradeRoot: '../'
 }

From 56838a2c02af373f0708bfb08bf0dca7591fb7c1 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Fri, 6 Feb 2026 10:24:17 +0100
Subject: [PATCH 2/7] chore: wip

---
 package-lock.json              |  16 +-
 ui/package.json                |   4 +
 ui/src/pages/admin/plugins.vue | 334 ++++++++++++++++++++++-----------
 3 files changed, 243 insertions(+), 111 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f5b45a2..a1d8efd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2262,9 +2262,9 @@
       "license": "MIT"
     },
     "node_modules/@types/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==",
       "dev": true,
       "license": "MIT"
     },
@@ -9332,9 +9332,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -11296,6 +11296,7 @@
         "iframe-resizer": "^4.4.5",
         "reconnecting-websocket": "^4.4.0",
         "sass-embedded": "^1.80.5",
+        "semver": "^7.7.4",
         "timezones.json": "^1.7.1",
         "unplugin-auto-import": "^0.18.3",
         "unplugin-fonts": "^1.1.1",
@@ -11307,6 +11308,9 @@
         "vue-i18n": "^11.1.2",
         "vue-router": "^4.4.5",
         "vue-tsc": "^2.1.10"
+      },
+      "devDependencies": {
+        "@types/semver": "^7.7.1"
       }
     },
     "worker": {
diff --git a/ui/package.json b/ui/package.json
index 009729e9..55dc89b7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -32,6 +32,7 @@
     "iframe-resizer": "^4.4.5",
     "reconnecting-websocket": "^4.4.0",
     "sass-embedded": "^1.80.5",
+    "semver": "^7.7.4",
     "timezones.json": "^1.7.1",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-fonts": "^1.1.1",
@@ -43,5 +44,8 @@
     "vue-i18n": "^11.1.2",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.10"
+  },
+  "devDependencies": {
+    "@types/semver": "^7.7.1"
   }
 }
diff --git a/ui/src/pages/admin/plugins.vue b/ui/src/pages/admin/plugins.vue
index c1577371..ef6bcbb7 100644
--- a/ui/src/pages/admin/plugins.vue
+++ b/ui/src/pages/admin/plugins.vue
@@ -9,7 +9,7 @@
       density="compact"
       hide-details
       placeholder="rechercher"
-      style="max-width:400px;"
+      max-width="400"
       variant="outlined"
     />
 
@@ -41,78 +41,129 @@
     <v-card
       v-for="result in filteredInstalledPlugins"
       :key="'installed-' + result.id"
+      :loading="pluginLocked === `${result.id}` ? 'primary' : false"
       class="mb-4"
     >
-      <v-progress-linear
-        v-if="pluginLocked === `${result.name}-${result.distTag}`"
-        indeterminate
-        color="primary"
-      />
       <v-toolbar
+        :title="result.distTag === 'latest' ? result.name : result.name + ' (' + result.distTag + ')'"
         density="compact"
-        flat
         variant="outlined"
+        flat
       >
-        <v-toolbar-title>
-          {{ result.distTag === 'latest' ? result.name : result.name + ' (' + result.distTag + ')' }}
-        </v-toolbar-title>
-        <v-spacer />
-        Utilisé {{ result.usages }} fois -
-        {{ result.version }}
-        <v-btn
-          v-if="updateAvailable(result)[0]"
-          :title="`Mettre à jour (${updateAvailable(result)[1]})`"
-          :icon="mdiUpdate"
-          color="primary"
-          :disabled="!!pluginLocked"
-          @click="update(result)"
-        />
-        <v-menu
-          :key="result.id"
-          :close-on-content-click="false"
-          max-width="500"
-        >
-          <template #activator="{ props }">
+        <template #append>
+          Utilisé {{ result.usages }} fois - {{ result.version }}
+          <template v-if="updateAvailable(result)[0]">
             <v-btn
-              v-bind="props"
-              title="Désinstaller"
-              :icon="mdiDelete"
-              color="warning"
+              v-if="!updateAvailable(result)[2]"
+              :title="`Mettre à jour (${updateAvailable(result)[1]})`"
+              :icon="mdiUpdate"
+              color="primary"
               :disabled="!!pluginLocked"
-              @click="deleteMenuShowed = result.id"
+              @click="update(result)"
             />
+            <v-menu
+              v-else
+              :key="`major-update-${result.id}`"
+              :close-on-content-click="false"
+              max-width="500"
+            >
+              <template #activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  :title="`Mettre à jour (${updateAvailable(result)[1]})`"
+                  :icon="mdiUpdate"
+                  color="warning"
+                  :disabled="!!pluginLocked"
+                  @click="showMajorUpdateMenu = result.id"
+                />
+              </template>
+              <v-card v-if="showMajorUpdateMenu === result.id">
+                <v-card-title primary-title>
+                  Mise à jour majeure
+                </v-card-title>
+                <v-progress-linear
+                  v-if="pluginLocked === `${result.id}`"
+                  indeterminate
+                  color="warning"
+                />
+                <v-card-text>
+                  Mettre à jour vers une nouvelle version majeure risque d'entraîner une rupture de compatibilité. Vous pouvez choisir de confirmer la montée en version, ou préférer l'installation de la nouvelle version séparée.
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer />
+                  <v-btn
+                    :disabled="!!pluginLocked"
+                    @click="showMajorUpdateMenu = null"
+                  >
+                    Annuler
+                  </v-btn>
+                  <v-btn
+                    color="warning"
+                    variant="flat"
+                    :disabled="!!pluginLocked"
+                    @click="showMajorUpdateMenu = null; update(result)"
+                  >
+                    Mettre à jour
+                  </v-btn>
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    :disabled="!!pluginLocked"
+                    @click="showMajorUpdateMenu = null; installParallel(result)"
+                  >
+                    Installer séparément
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-menu>
           </template>
-          <v-card v-if="deleteMenuShowed">
-            <v-card-title primary-title>
-              Désinstallation du plugin
-            </v-card-title>
-            <v-progress-linear
-              v-if="pluginLocked === `${result.name}-${result.distTag}`"
-              indeterminate
-              color="warning"
-            />
-            <v-card-text>
-              Voulez-vous vraiment désinstaller le plugin "{{ result.name }}" ?
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                :disabled="!!pluginLocked"
-                @click="deleteMenuShowed = null"
-              >
-                Non
-              </v-btn>
+          <v-menu
+            :key="result.id"
+            :close-on-content-click="false"
+            max-width="500"
+          >
+            <template #activator="{ props }">
               <v-btn
+                v-bind="props"
+                title="Désinstaller"
+                :icon="mdiDelete"
                 color="warning"
-                variant="flat"
                 :disabled="!!pluginLocked"
-                @click="uninstall.execute(result)"
-              >
-                Oui
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-menu>
+                @click="showDeleteMenu = result.id"
+              />
+            </template>
+            <v-card v-if="showDeleteMenu">
+              <v-card-title primary-title>
+                Désinstallation du plugin
+              </v-card-title>
+              <v-progress-linear
+                v-if="pluginLocked === `${result.id}`"
+                indeterminate
+                color="warning"
+              />
+              <v-card-text>
+                Voulez-vous vraiment désinstaller le plugin "{{ result.name }}" ?
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  :disabled="!!pluginLocked"
+                  @click="showDeleteMenu = null"
+                >
+                  Non
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  variant="flat"
+                  :disabled="!!pluginLocked"
+                  @click="uninstall.execute(result)"
+                >
+                  Oui
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-menu>
+        </template>
       </v-toolbar>
 
       <v-card-text class="py-2">
@@ -168,7 +219,7 @@
       plugins disponibles
 
       <v-menu
-        v-model="showForceInstall"
+        v-model="showManualInstallMenu"
         :close-on-content-click="false"
         max-width="500"
       >
@@ -193,7 +244,7 @@
                 Installer depuis npm
               </p>
               <v-text-field
-                v-model="forceInstallPlugin.name"
+                v-model="manualInstallPlugin.name"
                 class="mb-2"
                 placeholder="@data-fair/processing-my-plugin"
                 label="Nom du plugin"
@@ -203,7 +254,7 @@
                 hide-details
               />
               <v-text-field
-                v-model="forceInstallPlugin.version"
+                v-model="manualInstallPlugin.version"
                 class="mb-2"
                 placeholder="0.0.0"
                 label="Version du plugin"
@@ -211,7 +262,7 @@
                 hide-details
               />
               <v-text-field
-                v-model="forceInstallPlugin.distTag"
+                v-model="manualInstallPlugin.distTag"
                 placeholder="latest"
                 label="Tag de distribution"
                 :disabled="!!pluginLocked || !!selectedFile"
@@ -238,7 +289,7 @@
             <v-spacer />
             <v-btn
               :disabled="!!pluginLocked || install.loading.value"
-              @click="showForceInstall = false; forceInstallPlugin = { name: '', version: '', distTag: 'latest', description: '' }; selectedFile = undefined"
+              @click="showManualInstallMenu = false; manualInstallPlugin = { name: '', version: '', distTag: 'latest' }; selectedFile = undefined"
             >
               Annuler
             </v-btn>
@@ -274,30 +325,25 @@
     <v-card
       v-for="result in filteredAvailablePlugins"
       v-else
-      :key="'available-' + result.name + '-' + result.version"
+      :key="'available-' + result.id"
+      :loading="pluginLocked === `${result.id}` ? 'primary' : false"
       class="mb-4"
     >
-      <v-progress-linear
-        v-if="pluginLocked === `${result.name}-${result.distTag}`"
-        indeterminate
-        color="primary"
-      />
       <v-toolbar
+        :title="result.distTag === 'latest' ? result.name : result.name + ' (' + result.distTag + ')'"
         dense
         flat
       >
-        <v-toolbar-title>
-          {{ result.distTag === 'latest' ? result.name : result.name + ' (' + result.distTag + ')' }}
-        </v-toolbar-title>
-        <v-spacer />
-        {{ result.version }}
-        <v-btn
-          title="Installer"
-          :icon="mdiDownload"
-          color="primary"
-          :disabled="!!pluginLocked"
-          @click="install.execute(result)"
-        />
+        <template #append>
+          {{ result.version }}
+          <v-btn
+            title="Installer"
+            :icon="mdiDownload"
+            color="primary"
+            :disabled="!!pluginLocked"
+            @click="install.execute(result)"
+          />
+        </template>
       </v-toolbar>
       <v-card-text
         v-if="result.description"
@@ -330,8 +376,9 @@ if (!session.state.user?.adminMode) {
 onMounted(() => setBreadcrumbs([{ text: 'Plugins' }]))
 
 type AvailablePlugin = {
+  id?: string // Calculated from name version and distTag
   name: string
-  description: string
+  description?: string
   distTag: string
   version: string
 }
@@ -356,6 +403,7 @@ const installedPluginsFetch = useFetch<{
   count: number
 }>(`${$apiPath}/plugins`)
 
+// Assign usage count to each installed plugin and make old config schema compatible with vjsf 3
 const installedPlugins = computed(() => {
   const results = installedPluginsFetch.data.value?.results || []
   const usages = installedPluginsFetch.data.value?.facets.usages || {}
@@ -370,9 +418,11 @@ const availablePluginsFetch = useFetch<{
   results: AvailablePlugin[],
   count: number
 }>(`${$apiPath}/plugins-registry`, { query: query.value })
+
 const availablePlugins = computed(() => {
   const results = availablePluginsFetch.data.value?.results || []
   results.sort((a, b) => a.name.localeCompare(b.name) || a.version.localeCompare(b.version))
+  results.forEach(r => { r.id = generatePluginId(r.name, r.version, r.distTag) })
   return results
 })
 
@@ -384,7 +434,7 @@ const filteredInstalledPlugins = computed(() => {
 
 const filteredAvailablePlugins = computed(() => {
   const filteredPlugins = availablePlugins.value.filter(result =>
-    !installedPlugins.value.find(r => r.name === result.name && r.distTag === result.distTag)
+    !installedPlugins.value.find(r => r.id === result.id)
   )
 
   if (!search.value) return filteredPlugins
@@ -394,18 +444,20 @@ const filteredAvailablePlugins = computed(() => {
   )
 })
 
-const deleteMenuShowed = ref(null) as Ref<string | null>
+const showDeleteMenu = ref(null) as Ref<string | null>
+const showMajorUpdateMenu = ref(null) as Ref<string | null>
+const showManualInstallMenu = ref<boolean>(false)
 const pluginLocked = ref(null) as Ref<string | null>
-const showForceInstall = ref<boolean>(false)
-const forceInstallPlugin = ref<AvailablePlugin>({ name: '', version: '', distTag: 'latest', description: '' })
+const manualInstallPlugin = ref<AvailablePlugin>({ name: '', version: '', distTag: 'latest' })
 const selectedFile = ref<File>()
 
 const hasNpmFields = computed(() =>
-  !!(forceInstallPlugin.value.name?.trim() || forceInstallPlugin.value.version?.trim())
+  !!(manualInstallPlugin.value.name?.trim() || manualInstallPlugin.value.version?.trim())
 )
 
+// Tue if form is valid
 const canForceInstall = computed(() => {
-  if (hasNpmFields.value) return forceInstallPlugin.value.name && forceInstallPlugin.value.version && forceInstallPlugin.value.distTag
+  if (hasNpmFields.value) return manualInstallPlugin.value.name && manualInstallPlugin.value.version && manualInstallPlugin.value.distTag
   else if (selectedFile.value) return true
   return false
 })
@@ -416,16 +468,20 @@ const install = useAsyncAction(
 
     let body: FormData | AvailablePlugin
 
-    // Installation depuis un fichier
+    // From a file
     if (selectedFile.value) {
       body = new FormData()
       body.append('file', selectedFile.value)
 
-    // Installation depuis npm
+    // From npm registry
     } else {
-      const pluginPost = plugin || forceInstallPlugin.value
-      pluginLocked.value = `${pluginPost.name}-${pluginPost.distTag}`
-      body = pluginPost
+      const pluginPost = plugin || manualInstallPlugin.value
+      pluginLocked.value = `${pluginPost.id || generatePluginId(pluginPost.name, pluginPost.version, pluginPost.distTag)}`
+      body = {
+        name: pluginPost.name,
+        version: pluginPost.version,
+        distTag: pluginPost.distTag
+      }
     }
 
     await $fetch('/plugins', {
@@ -434,9 +490,9 @@ const install = useAsyncAction(
     })
     installedPluginsFetch.refresh()
     pluginLocked.value = null
-    showForceInstall.value = false
+    showManualInstallMenu.value = false
     selectedFile.value = undefined
-    forceInstallPlugin.value = { name: '', version: '', distTag: 'latest', description: '' }
+    manualInstallPlugin.value = { name: '', version: '', distTag: 'latest' }
   },
   {
     error: 'Erreur lors de l\'installation du plugin',
@@ -452,7 +508,7 @@ const uninstall = useAsyncAction(
     })
     installedPluginsFetch.refresh()
     pluginLocked.value = null
-    deleteMenuShowed.value = null
+    showDeleteMenu.value = null
   },
   {
     error: 'Erreur lors de la désinstallation du plugin',
@@ -461,16 +517,78 @@ const uninstall = useAsyncAction(
 )
 
 /**
- * Check if an update is available for a plugin (same distTag, same name, different version)
+ * Check if an update is available for a plugin (same distTag, same name, higher major version)
  * @param plugin - The plugin to check
- * @returns - A tuple with a boolean indicating if an update is available and the new version
+ * @returns - A tuple with a boolean indicating if an update is available, the new version and a major-update flag
  */
-function updateAvailable (plugin: InstalledPlugin): [boolean, string] {
-  if (availablePlugins.value.length === 0) return [false, '']
+function updateAvailable (plugin: InstalledPlugin): [boolean, string, boolean] {
+  if (availablePlugins.value.length === 0) return [false, '', false]
   const availablePlugin = availablePlugins.value.find(r => (r.name === plugin.name && r.distTag === plugin.distTag))
-  if (availablePlugin &&
-    availablePlugin.version !== plugin.version) return [true, availablePlugin.version]
-  return [false, '']
+  if (!availablePlugin) return [false, '', false]
+
+  const relatedInstalled = installedPlugins.value.filter(r => r.name === plugin.name && r.distTag === plugin.distTag)
+  if (relatedInstalled.length === 0) return [false, '', false]
+
+  let latestInstalled = relatedInstalled[0]
+  for (const candidate of relatedInstalled.slice(1)) {
+    const candidateParts = candidate.version.split('.')
+    const latestParts = latestInstalled.version.split('.')
+    let candidateIsNewer = false
+
+    for (let i = 0; i < 3; i += 1) {
+      const candidatePart = Number.parseInt(candidateParts[i] || '0', 10)
+      const latestPart = Number.parseInt(latestParts[i] || '0', 10)
+
+      if (candidatePart > latestPart) {
+        candidateIsNewer = true
+        break
+      }
+      if (candidatePart < latestPart) {
+        candidateIsNewer = false
+        break
+      }
+    }
+
+    if (candidateIsNewer) latestInstalled = candidate
+  }
+
+  if (latestInstalled.id !== plugin.id) return [false, '', false]
+
+  const availableParts = availablePlugin.version.split('.')
+  const installedParts = latestInstalled.version.split('.')
+  let availableIsNewer = false
+  let versionsEqual = true
+
+  for (let i = 0; i < 3; i += 1) {
+    const availablePart = Number.parseInt(availableParts[i] || '0', 10)
+    const installedPart = Number.parseInt(installedParts[i] || '0', 10)
+
+    if (availablePart > installedPart) {
+      availableIsNewer = true
+      versionsEqual = false
+      break
+    }
+    if (availablePart < installedPart) {
+      availableIsNewer = false
+      versionsEqual = false
+      break
+    }
+  }
+
+  if (versionsEqual) return [false, '', false]
+  if (availableIsNewer) {
+    const installedMajor = Number.parseInt(installedParts[0] || '0', 10)
+    const availableMajor = Number.parseInt(availableParts[0] || '0', 10)
+    const isMajorUpdate = availableMajor > installedMajor
+    return [true, availablePlugin.version, isMajorUpdate]
+  }
+  return [false, '', false]
+}
+
+async function installParallel (plugin: InstalledPlugin) {
+  const availablePlugin = availablePlugins.value.find(r => r.name === plugin.name && r.distTag === plugin.distTag)
+  if (!availablePlugin) return
+  await install.execute(availablePlugin)
 }
 
 async function update (plugin: InstalledPlugin) {
@@ -501,6 +619,12 @@ const vjsfOptions = computed<VjsfOptions>(() => ({
   xI18n: true
 }))
 
+const generatePluginId = (name: string, version: string, distTag: string) => {
+  let id = name.replace('/', '-') + '-' + version.split('.')[0]
+  if (distTag && distTag !== 'latest') id += '-' + distTag
+  return id
+}
+
 </script>
 
 <style scoped>

From 6a8537f2a24450799a6f3915cde122eda353606b Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Fri, 6 Feb 2026 11:02:08 +0100
Subject: [PATCH 3/7] refactor: plugin admin page to manage major versions

---
 api/package.json               |   3 +-
 api/src/routers/plugins.ts     |   1 +
 package-lock.json              |   9 +-
 package.json                   |   1 +
 ui/package.json                |   4 +-
 ui/src/pages/admin/plugins.vue | 388 ++++++++++++++++++---------------
 6 files changed, 218 insertions(+), 188 deletions(-)

diff --git a/api/package.json b/api/package.json
index dcc67962..92e2b0a0 100644
--- a/api/package.json
+++ b/api/package.json
@@ -18,7 +18,6 @@
     "@types/memoizee": "^0.4.11",
     "@types/multer": "^1.4.13",
     "@types/resolve-path": "^1.4.3",
-    "@types/semver": "^7.5.8",
     "@types/ws": "^8.5.12"
   },
   "dependencies": {
@@ -38,7 +37,7 @@
     "multer": "^2.0.1",
     "nanoid": "^5.0.8",
     "resolve-path": "^1.4.0",
-    "semver": "^7.6.3",
+    "semver": "^7.7.4",
     "tmp-promise": "^3.0.3",
     "ws": "^8.18.0"
   }
diff --git a/api/src/routers/plugins.ts b/api/src/routers/plugins.ts
index ec976f54..29d64340 100644
--- a/api/src/routers/plugins.ts
+++ b/api/src/routers/plugins.ts
@@ -264,6 +264,7 @@ router.delete('/:id', permissions.isSuperAdmin, async (req, res) => {
   await fs.remove(path.join(pluginsDir, req.params.id))
   await fs.remove(path.join(pluginsDir, req.params.id + '-config.json'))
   await fs.remove(path.join(pluginsDir, req.params.id + '-access.json'))
+  await fs.remove(path.join(pluginsDir, req.params.id + '-metadata.json'))
   res.status(204).send()
 })
 
diff --git a/package-lock.json b/package-lock.json
index a1d8efd5..42a04fb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@data-fair/lib-utils": "^1.6.1",
         "@types/config": "^3.3.5",
         "@types/debug": "^4.1.12",
+        "@types/semver": "^7.7.1",
         "eslint": "^9.29.0",
         "eslint-plugin-vue": "^10.2.0",
         "eslint-plugin-vuetify": "github:albanm/eslint-plugin-vuetify",
@@ -52,7 +53,7 @@
         "multer": "^2.0.1",
         "nanoid": "^5.0.8",
         "resolve-path": "^1.4.0",
-        "semver": "^7.6.3",
+        "semver": "^7.7.4",
         "tmp-promise": "^3.0.3",
         "ws": "^8.18.0"
       },
@@ -61,7 +62,6 @@
         "@types/memoizee": "^0.4.11",
         "@types/multer": "^1.4.13",
         "@types/resolve-path": "^1.4.3",
-        "@types/semver": "^7.5.8",
         "@types/ws": "^8.5.12"
       }
     },
@@ -2265,7 +2265,6 @@
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
       "integrity": "sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/send": {
@@ -11290,6 +11289,7 @@
         "@koumoul/vjsf": "^3.20.4",
         "@mdi/js": "^7.4.47",
         "@types/config": "^3.3.5",
+        "@types/semver": "^7.7.1",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vueuse/core": "^11.2.0",
         "cronstrue": "^3.2.0",
@@ -11308,9 +11308,6 @@
         "vue-i18n": "^11.1.2",
         "vue-router": "^4.4.5",
         "vue-tsc": "^2.1.10"
-      },
-      "devDependencies": {
-        "@types/semver": "^7.7.1"
       }
     },
     "worker": {
diff --git a/package.json b/package.json
index 7eef919b..167dbdc3 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@data-fair/lib-utils": "^1.6.1",
     "@types/config": "^3.3.5",
     "@types/debug": "^4.1.12",
+    "@types/semver": "^7.7.1",
     "eslint": "^9.29.0",
     "eslint-plugin-vue": "^10.2.0",
     "eslint-plugin-vuetify": "github:albanm/eslint-plugin-vuetify",
diff --git a/ui/package.json b/ui/package.json
index 55dc89b7..8c648eb8 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -26,6 +26,7 @@
     "@koumoul/vjsf": "^3.20.4",
     "@mdi/js": "^7.4.47",
     "@types/config": "^3.3.5",
+    "@types/semver": "^7.7.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vueuse/core": "^11.2.0",
     "cronstrue": "^3.2.0",
@@ -44,8 +45,5 @@
     "vue-i18n": "^11.1.2",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.10"
-  },
-  "devDependencies": {
-    "@types/semver": "^7.7.1"
   }
 }
diff --git a/ui/src/pages/admin/plugins.vue b/ui/src/pages/admin/plugins.vue
index ef6bcbb7..4bca01da 100644
--- a/ui/src/pages/admin/plugins.vue
+++ b/ui/src/pages/admin/plugins.vue
@@ -3,39 +3,39 @@
     <v-text-field
       v-model="search"
       :append-inner-icon="mdiMagnify"
+      :placeholder="t('searchPlaceholder')"
       class="my-2"
-      clearable
       color="primary"
       density="compact"
-      hide-details
-      placeholder="rechercher"
       max-width="400"
       variant="outlined"
+      clearable
+      hide-details
     />
 
     <v-list-subheader>
       <v-progress-circular
         v-if="installedPluginsFetch.loading.value"
-        indeterminate
+        color="primary"
         size="16"
         width="2"
-        color="primary"
+        indeterminate
       />
       <v-icon
         v-else-if="installedPluginsFetch.error.value"
-        color="error"
         :icon="mdiAlert"
+        color="error"
       />
       <template v-else-if="installedPluginsFetch.data.value">
         {{ installedPluginsFetch.data.value.count }}
       </template>
-      plugins installés
+      {{ t('installedPluginsLabel') }}
     </v-list-subheader>
     <v-skeleton-loader
       v-if="installedPluginsFetch.loading.value"
+      :class="$vuetify.theme.current.dark ? 'my-4' : 'my-4 skeleton'"
       :height="100"
       type="list-item-two-line"
-      :class="$vuetify.theme.current.dark ? 'my-4' : 'my-4 skeleton'"
     />
 
     <v-card
@@ -51,14 +51,14 @@
         flat
       >
         <template #append>
-          Utilisé {{ result.usages }} fois - {{ result.version }}
-          <template v-if="updateAvailable(result)[0]">
+          {{ t('usageCount', { count: result.usages }) }} - {{ result.version }}
+          <template v-if="updateInfoById[result.id]?.available">
             <v-btn
-              v-if="!updateAvailable(result)[2]"
-              :title="`Mettre à jour (${updateAvailable(result)[1]})`"
+              v-if="!updateInfoById[result.id]?.isMajor"
+              :disabled="!!pluginLocked"
               :icon="mdiUpdate"
+              :title="t('updateWithVersion', { version: updateInfoById[result.id]?.version })"
               color="primary"
-              :disabled="!!pluginLocked"
               @click="update(result)"
             />
             <v-menu
@@ -70,24 +70,24 @@
               <template #activator="{ props }">
                 <v-btn
                   v-bind="props"
-                  :title="`Mettre à jour (${updateAvailable(result)[1]})`"
+                  :disabled="!!pluginLocked"
                   :icon="mdiUpdate"
+                  :title="t('updateWithVersion', { version: updateInfoById[result.id]?.version })"
                   color="warning"
-                  :disabled="!!pluginLocked"
                   @click="showMajorUpdateMenu = result.id"
                 />
               </template>
               <v-card v-if="showMajorUpdateMenu === result.id">
                 <v-card-title primary-title>
-                  Mise à jour majeure
+                  {{ t('majorUpdateTitleWithVersions', { from: result.version, to: updateInfoById[result.id]?.version }) }}
                 </v-card-title>
                 <v-progress-linear
                   v-if="pluginLocked === `${result.id}`"
-                  indeterminate
                   color="warning"
+                  indeterminate
                 />
                 <v-card-text>
-                  Mettre à jour vers une nouvelle version majeure risque d'entraîner une rupture de compatibilité. Vous pouvez choisir de confirmer la montée en version, ou préférer l'installation de la nouvelle version séparée.
+                  {{ t('majorUpdateBody') }}
                 </v-card-text>
                 <v-card-actions>
                   <v-spacer />
@@ -95,23 +95,23 @@
                     :disabled="!!pluginLocked"
                     @click="showMajorUpdateMenu = null"
                   >
-                    Annuler
+                    {{ t('cancel') }}
                   </v-btn>
                   <v-btn
+                    :disabled="!!pluginLocked"
                     color="warning"
                     variant="flat"
-                    :disabled="!!pluginLocked"
                     @click="showMajorUpdateMenu = null; update(result)"
                   >
-                    Mettre à jour
+                    {{ t('update') }}
                   </v-btn>
                   <v-btn
+                    :disabled="!!pluginLocked"
                     color="primary"
                     variant="flat"
-                    :disabled="!!pluginLocked"
                     @click="showMajorUpdateMenu = null; installParallel(result)"
                   >
-                    Installer séparément
+                    {{ t('installSeparately') }}
                   </v-btn>
                 </v-card-actions>
               </v-card>
@@ -125,24 +125,24 @@
             <template #activator="{ props }">
               <v-btn
                 v-bind="props"
-                title="Désinstaller"
+                :disabled="!!pluginLocked"
                 :icon="mdiDelete"
+                :title="t('uninstall')"
                 color="warning"
-                :disabled="!!pluginLocked"
                 @click="showDeleteMenu = result.id"
               />
             </template>
             <v-card v-if="showDeleteMenu">
               <v-card-title primary-title>
-                Désinstallation du plugin
+                {{ t('uninstallTitle') }}
               </v-card-title>
               <v-progress-linear
                 v-if="pluginLocked === `${result.id}`"
-                indeterminate
                 color="warning"
+                indeterminate
               />
               <v-card-text>
-                Voulez-vous vraiment désinstaller le plugin "{{ result.name }}" ?
+                {{ t('uninstallConfirm', { name: result.name }) }}
               </v-card-text>
               <v-card-actions>
                 <v-spacer />
@@ -150,15 +150,15 @@
                   :disabled="!!pluginLocked"
                   @click="showDeleteMenu = null"
                 >
-                  Non
+                  {{ t('no') }}
                 </v-btn>
                 <v-btn
+                  :disabled="!!pluginLocked"
                   color="warning"
                   variant="flat"
-                  :disabled="!!pluginLocked"
                   @click="uninstall.execute(result)"
                 >
-                  Oui
+                  {{ t('yes') }}
                 </v-btn>
               </v-card-actions>
             </v-card>
@@ -179,8 +179,8 @@
         />
         <v-form
           :ref="'form-metadata-' + result.id"
-          autocomplete="off"
           class="mt-4"
+          autocomplete="off"
         >
           <vjsf
             v-model="result.metadata"
@@ -208,15 +208,15 @@
     <v-list-subheader>
       <v-progress-circular
         v-if="availablePluginsFetch.loading.value"
-        indeterminate
+        color="primary"
         size="16"
         width="2"
-        color="primary"
+        indeterminate
       />
       <span v-else-if="filteredAvailablePlugins">
         {{ filteredAvailablePlugins.length }}
       </span>
-      plugins disponibles
+      {{ t('availablePluginsLabel') }}
 
       <v-menu
         v-model="showManualInstallMenu"
@@ -226,59 +226,59 @@
         <template #activator="{ props }">
           <v-btn
             v-bind="props"
+            :disabled="!!pluginLocked"
             class="mx-4"
             size="x-small"
             variant="tonal"
-            :disabled="!!pluginLocked"
           >
-            Installer manuellement
+            {{ t('manualInstall') }}
           </v-btn>
         </template>
         <v-card
-          title="Installation manuelle d'un plugin"
           :loading="install.loading.value ? 'warning' : false"
+          :title="t('manualInstallTitle')"
         >
           <v-card-text class="pb-0">
             <div class="mb-4">
               <p class="text-body-2 font-italic mb-2">
-                Installer depuis npm
+                {{ t('manualInstallFromNpm') }}
               </p>
               <v-text-field
                 v-model="manualInstallPlugin.name"
-                class="mb-2"
-                placeholder="@data-fair/processing-my-plugin"
-                label="Nom du plugin"
-                :loading="availablePluginsFetch.loading.value"
                 :disabled="!!pluginLocked || !!selectedFile"
+                :label="t('manualInstallName')"
+                :loading="availablePluginsFetch.loading.value"
+                placeholder="@data-fair/processing-my-plugin"
+                class="mb-2"
                 autofocus
                 hide-details
               />
               <v-text-field
                 v-model="manualInstallPlugin.version"
-                class="mb-2"
-                placeholder="0.0.0"
-                label="Version du plugin"
                 :disabled="!!pluginLocked || !!selectedFile"
+                :label="t('manualInstallVersion')"
+                placeholder="1.0.0"
+                class="mb-2"
                 hide-details
               />
               <v-text-field
                 v-model="manualInstallPlugin.distTag"
-                placeholder="latest"
-                label="Tag de distribution"
                 :disabled="!!pluginLocked || !!selectedFile"
+                :label="t('manualInstallDistTag')"
+                placeholder="latest"
                 hide-details
               />
             </div>
 
             <div>
               <p class="text-body-2 font-italic mb-2">
-                Installer depuis un fichier
+                {{ t('manualInstallFromFile') }}
               </p>
               <v-file-input
                 v-model="selectedFile"
-                accept=".tgz"
-                label="Sélectionner un fichier .tgz"
                 :disabled="!!pluginLocked || hasNpmFields"
+                :label="t('manualInstallFileLabel')"
+                accept=".tgz"
                 chips
                 hide-details
                 show-size
@@ -289,16 +289,16 @@
             <v-spacer />
             <v-btn
               :disabled="!!pluginLocked || install.loading.value"
-              @click="showManualInstallMenu = false; manualInstallPlugin = { name: '', version: '', distTag: 'latest' }; selectedFile = undefined"
+              @click="resetManualInstall()"
             >
-              Annuler
+              {{ t('cancel') }}
             </v-btn>
             <v-btn
-              color="warning"
               :disabled="!!pluginLocked || !canForceInstall || install.loading.value"
+              color="warning"
               @click="install.execute()"
             >
-              Installer
+              {{ t('install') }}
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -307,7 +307,7 @@
 
     <v-checkbox
       v-model="query.showAll"
-      label="Afficher les versions de test des plugins"
+      :label="t('showAllLabel')"
       color="primary"
       density="compact"
     />
@@ -316,9 +316,9 @@
       <v-skeleton-loader
         v-for="n in 4"
         :key="n"
+        :class="$vuetify.theme.current.dark ? 'my-4' : 'my-4 skeleton'"
         :height="100"
         type="list-item-two-line"
-        :class="$vuetify.theme.current.dark ? 'my-4' : 'my-4 skeleton'"
       />
     </template>
 
@@ -337,10 +337,10 @@
         <template #append>
           {{ result.version }}
           <v-btn
-            title="Installer"
+            :disabled="!!pluginLocked"
             :icon="mdiDownload"
+            :title="t('install')"
             color="primary"
-            :disabled="!!pluginLocked"
             @click="install.execute(result)"
           />
         </template>
@@ -360,20 +360,17 @@
 <script setup lang="ts">
 import Vjsf, { type Options as VjsfOptions } from '@koumoul/vjsf'
 import { v2compat } from '@koumoul/vjsf/compat/v2'
+import { compare, gt, major } from 'semver'
 
+const { t } = useI18n()
 const session = useSession()
 const search = useStringSearchParam('q')
 const query = ref({ showAll: false })
 const valid = ref<Record<string, boolean>>({})
 
-if (!session.state.user) {
-  throw new Error('Authentification nécessaire')
-}
-if (!session.state.user?.adminMode) {
-  throw new Error('Vous n\'avez pas la permission d\'accéder à cette page, il faut avoir activé le mode super-administration.')
-}
-
-onMounted(() => setBreadcrumbs([{ text: 'Plugins' }]))
+if (!session.state.user) throw new Error(t('authRequired'))
+if (!session.state.user?.adminMode) throw new Error(t('adminRequired'))
+setBreadcrumbs([{ text: t('pluginsBreadcrumb') }])
 
 type AvailablePlugin = {
   id?: string // Calculated from name version and distTag
@@ -403,22 +400,15 @@ const installedPluginsFetch = useFetch<{
   count: number
 }>(`${$apiPath}/plugins`)
 
-// Assign usage count to each installed plugin and make old config schema compatible with vjsf 3
-const installedPlugins = computed(() => {
-  const results = installedPluginsFetch.data.value?.results || []
-  const usages = installedPluginsFetch.data.value?.facets.usages || {}
-  return results.map(r => ({
-    ...r,
-    pluginConfigSchema: v2compat(r.pluginConfigSchema),
-    usages: usages[r.id] || 0
-  }))
-})
+/** Build a stable key for grouping plugins by name and dist tag. */
+const pluginKey = (name: string, distTag: string) => `${name}::${distTag}`
 
 const availablePluginsFetch = useFetch<{
   results: AvailablePlugin[],
   count: number
 }>(`${$apiPath}/plugins-registry`, { query: query.value })
 
+/** Sort registry plugins and inject computed ids. */
 const availablePlugins = computed(() => {
   const results = availablePluginsFetch.data.value?.results || []
   results.sort((a, b) => a.name.localeCompare(b.name) || a.version.localeCompare(b.version))
@@ -426,42 +416,125 @@ const availablePlugins = computed(() => {
   return results
 })
 
+const showDeleteMenu = ref(null) as Ref<string | null>
+const showMajorUpdateMenu = ref(null) as Ref<string | null>
+const showManualInstallMenu = ref<boolean>(false)
+const pluginLocked = ref(null) as Ref<string | null>
+const manualInstallPlugin = ref<AvailablePlugin>({ name: '', version: '', distTag: 'latest' })
+const selectedFile = ref<File>()
+
+/** Fast lookup of available plugins by key. */
+const availableByKey = computed(() => {
+  const map = new Map<string, AvailablePlugin>()
+  for (const plugin of availablePlugins.value) {
+    map.set(pluginKey(plugin.name, plugin.distTag), plugin)
+  }
+  return map
+})
+
+/** Assign usage count and normalize schema for VJSF v3. */
+const installedPlugins = computed(() => {
+  const results = installedPluginsFetch.data.value?.results || []
+  const usages = installedPluginsFetch.data.value?.facets.usages || {}
+  return results.map(r => ({
+    ...r,
+    pluginConfigSchema: v2compat(r.pluginConfigSchema),
+    usages: usages[r.id] || 0
+  }))
+})
+
+/** Keep the latest installed version per plugin key. */
+const latestInstalledByKey = computed(() => {
+  const map = new Map<string, InstalledPlugin>()
+  for (const plugin of installedPlugins.value) {
+    const key = pluginKey(plugin.name, plugin.distTag)
+    const current = map.get(key)
+    if (!current || compare(plugin.version, current.version) > 0) {
+      map.set(key, plugin)
+    }
+  }
+  return map
+})
+
+/**
+ * Precompute update availability for each installed plugin.
+ * A plugin is updatable if there's an available version with a higher version number than the latest installed one.
+ * We also detect whether the update is a major version change to warn the user about potential breaking changes.
+ * @return A map of plugin id to update info, including availability, latest version and whether it's a major update.
+ */
+const updateInfoById = computed(() => {
+  const info: Record<string, { available: boolean, version: string, isMajor: boolean }> = {}
+  for (const plugin of installedPlugins.value) {
+    const key = pluginKey(plugin.name, plugin.distTag)
+    const latestInstalled = latestInstalledByKey.value.get(key)
+    const available = availableByKey.value.get(key)
+
+    if (!latestInstalled || !available || latestInstalled.id !== plugin.id) {
+      info[plugin.id] = { available: false, version: '', isMajor: false }
+      continue
+    }
+
+    if (!gt(available.version, latestInstalled.version)) {
+      info[plugin.id] = { available: false, version: '', isMajor: false }
+      continue
+    }
+
+    const installedMajor = major(latestInstalled.version)
+    const availableMajor = major(available.version)
+    info[plugin.id] = {
+      available: true,
+      version: available.version,
+      isMajor: availableMajor > installedMajor
+    }
+  }
+  return info
+})
+
+/** Filter installed plugins by search term. */
 const filteredInstalledPlugins = computed(() => {
   if (!search.value) return installedPlugins.value
   return installedPlugins.value
     .filter(r => r.name.includes(search.value) || (r.description && r.description.includes(search.value)))
 })
 
+/** Filter registry plugins by search term, excluding already installed ones. */
 const filteredAvailablePlugins = computed(() => {
   const filteredPlugins = availablePlugins.value.filter(result =>
     !installedPlugins.value.find(r => r.id === result.id)
   )
 
   if (!search.value) return filteredPlugins
-  return filteredPlugins.filter(result =>
-    result.name.includes(search.value) ||
-    (result.description && result.description.includes(search.value))
-  )
+  return filteredPlugins
+    .filter(r => r.name.includes(search.value) || (r.description && r.description.includes(search.value)))
 })
 
-const showDeleteMenu = ref(null) as Ref<string | null>
-const showMajorUpdateMenu = ref(null) as Ref<string | null>
-const showManualInstallMenu = ref<boolean>(false)
-const pluginLocked = ref(null) as Ref<string | null>
-const manualInstallPlugin = ref<AvailablePlugin>({ name: '', version: '', distTag: 'latest' })
-const selectedFile = ref<File>()
-
+/** Detect whether any npm fields are filled for manual install. */
 const hasNpmFields = computed(() =>
   !!(manualInstallPlugin.value.name?.trim() || manualInstallPlugin.value.version?.trim())
 )
 
-// Tue if form is valid
+/** Ensure enough info is provided to install manually. */
 const canForceInstall = computed(() => {
   if (hasNpmFields.value) return manualInstallPlugin.value.name && manualInstallPlugin.value.version && manualInstallPlugin.value.distTag
-  else if (selectedFile.value) return true
+  if (selectedFile.value) return true
   return false
 })
 
+/** Reset manual install form state. */
+const resetManualInstall = () => {
+  showManualInstallMenu.value = false
+  manualInstallPlugin.value = { name: '', version: '', distTag: 'latest' }
+  selectedFile.value = undefined
+}
+
+/** Build a stable plugin id from name, major version and dist tag. */
+const generatePluginId = (name: string, version: string, distTag: string) => {
+  let id = name.replace('/', '-') + '-' + major(version)
+  if (distTag && distTag !== 'latest') id += '-' + distTag
+  return id
+}
+
+/** Install a plugin from registry or a local tgz file. */
 const install = useAsyncAction(
   async (plugin?: AvailablePlugin) => {
     if (!canForceInstall.value && !plugin) return
@@ -490,16 +563,15 @@ const install = useAsyncAction(
     })
     installedPluginsFetch.refresh()
     pluginLocked.value = null
-    showManualInstallMenu.value = false
-    selectedFile.value = undefined
-    manualInstallPlugin.value = { name: '', version: '', distTag: 'latest' }
+    resetManualInstall()
   },
   {
-    error: 'Erreur lors de l\'installation du plugin',
-    success: 'Plugin installé !'
+    error: t('installError'),
+    success: t('installSuccess')
   }
 )
 
+/** Uninstall a plugin by id. */
 const uninstall = useAsyncAction(
   async (plugin: InstalledPlugin) => {
     pluginLocked.value = `${plugin.name}-${plugin.distTag}`
@@ -511,87 +583,20 @@ const uninstall = useAsyncAction(
     showDeleteMenu.value = null
   },
   {
-    error: 'Erreur lors de la désinstallation du plugin',
-    success: 'Plugin désinstallé !'
+    error: t('uninstallError'),
+    success: t('uninstallSuccess')
   }
 )
 
-/**
- * Check if an update is available for a plugin (same distTag, same name, higher major version)
- * @param plugin - The plugin to check
- * @returns - A tuple with a boolean indicating if an update is available, the new version and a major-update flag
- */
-function updateAvailable (plugin: InstalledPlugin): [boolean, string, boolean] {
-  if (availablePlugins.value.length === 0) return [false, '', false]
-  const availablePlugin = availablePlugins.value.find(r => (r.name === plugin.name && r.distTag === plugin.distTag))
-  if (!availablePlugin) return [false, '', false]
-
-  const relatedInstalled = installedPlugins.value.filter(r => r.name === plugin.name && r.distTag === plugin.distTag)
-  if (relatedInstalled.length === 0) return [false, '', false]
-
-  let latestInstalled = relatedInstalled[0]
-  for (const candidate of relatedInstalled.slice(1)) {
-    const candidateParts = candidate.version.split('.')
-    const latestParts = latestInstalled.version.split('.')
-    let candidateIsNewer = false
-
-    for (let i = 0; i < 3; i += 1) {
-      const candidatePart = Number.parseInt(candidateParts[i] || '0', 10)
-      const latestPart = Number.parseInt(latestParts[i] || '0', 10)
-
-      if (candidatePart > latestPart) {
-        candidateIsNewer = true
-        break
-      }
-      if (candidatePart < latestPart) {
-        candidateIsNewer = false
-        break
-      }
-    }
-
-    if (candidateIsNewer) latestInstalled = candidate
-  }
-
-  if (latestInstalled.id !== plugin.id) return [false, '', false]
-
-  const availableParts = availablePlugin.version.split('.')
-  const installedParts = latestInstalled.version.split('.')
-  let availableIsNewer = false
-  let versionsEqual = true
-
-  for (let i = 0; i < 3; i += 1) {
-    const availablePart = Number.parseInt(availableParts[i] || '0', 10)
-    const installedPart = Number.parseInt(installedParts[i] || '0', 10)
-
-    if (availablePart > installedPart) {
-      availableIsNewer = true
-      versionsEqual = false
-      break
-    }
-    if (availablePart < installedPart) {
-      availableIsNewer = false
-      versionsEqual = false
-      break
-    }
-  }
-
-  if (versionsEqual) return [false, '', false]
-  if (availableIsNewer) {
-    const installedMajor = Number.parseInt(installedParts[0] || '0', 10)
-    const availableMajor = Number.parseInt(availableParts[0] || '0', 10)
-    const isMajorUpdate = availableMajor > installedMajor
-    return [true, availablePlugin.version, isMajorUpdate]
-  }
-  return [false, '', false]
-}
-
-async function installParallel (plugin: InstalledPlugin) {
+/** Install the next major version as a separate plugin entry. */
+const installParallel = async (plugin: InstalledPlugin) => {
   const availablePlugin = availablePlugins.value.find(r => r.name === plugin.name && r.distTag === plugin.distTag)
   if (!availablePlugin) return
   await install.execute(availablePlugin)
 }
 
-async function update (plugin: InstalledPlugin) {
+/** Update the currently installed plugin to the latest available version. */
+const update = async (plugin: InstalledPlugin) => {
   pluginLocked.value = `${plugin.name}-${plugin.distTag}`
   if (availablePlugins.value.length === 0) return false
   const availablePlugin = availablePlugins.value.find(r => r.name === plugin.name)
@@ -601,7 +606,8 @@ async function update (plugin: InstalledPlugin) {
   pluginLocked.value = null
 }
 
-async function save (plugin: InstalledPlugin, type: 'config' | 'access' | 'metadata') {
+/** Persist config/access/metadata changes for a plugin. */
+const save = async (plugin: InstalledPlugin, type: 'config' | 'access' | 'metadata') => {
   pluginLocked.value = `${plugin.name}-${plugin.distTag}`
   await $fetch(`/plugins/${plugin.id}/${type}`, {
     method: 'PUT',
@@ -610,6 +616,7 @@ async function save (plugin: InstalledPlugin, type: 'config' | 'access' | 'metad
   pluginLocked.value = null
 }
 
+/** Shared VJSF options for schema-driven forms. */
 const vjsfOptions = computed<VjsfOptions>(() => ({
   density: 'compact',
   initialValidation: 'always',
@@ -619,13 +626,40 @@ const vjsfOptions = computed<VjsfOptions>(() => ({
   xI18n: true
 }))
 
-const generatePluginId = (name: string, version: string, distTag: string) => {
-  let id = name.replace('/', '-') + '-' + version.split('.')[0]
-  if (distTag && distTag !== 'latest') id += '-' + distTag
-  return id
-}
-
 </script>
 
-<style scoped>
-</style>
+<i18n lang="yaml">
+fr:
+  adminRequired: Vous n'avez pas la permission d'accéder à cette page, il faut avoir activé le mode super-administration.
+  authRequired: Authentification nécessaire
+  availablePluginsLabel: plugins disponibles
+  cancel: Annuler
+  install: Installer
+  installError: Erreur lors de l'installation du plugin
+  installSeparately: Installer séparément
+  installSuccess: Plugin installé !
+  installedPluginsLabel: plugins installés
+  majorUpdateBody: Mettre à jour vers une nouvelle version majeure risque d'entraîner une rupture de compatibilité. Vous pouvez choisir de confirmer la montée en version, ou préférer l'installation de la nouvelle version séparée.
+  majorUpdateTitleWithVersions: "Mise à jour majeure - {from} vers {to}"
+  manualInstall: Installer manuellement
+  manualInstallDistTag: Tag de distribution
+  manualInstallFileLabel: Sélectionner un fichier .tgz
+  manualInstallFromFile: Installer depuis un fichier
+  manualInstallFromNpm: Installer depuis npm
+  manualInstallName: Nom du plugin
+  manualInstallTitle: Installation manuelle d'un plugin
+  manualInstallVersion: Version du plugin
+  no: Non
+  pluginsBreadcrumb: Plugins
+  searchPlaceholder: rechercher
+  showAllLabel: Afficher les versions de test des plugins
+  uninstall: Désinstaller
+  uninstallConfirm: Voulez-vous vraiment désinstaller le plugin "{name}" ?
+  uninstallError: Erreur lors de la désinstallation du plugin
+  uninstallSuccess: Plugin désinstallé !
+  uninstallTitle: Désinstallation du plugin
+  update: Mettre à jour
+  updateWithVersion: Mettre à jour ({version})
+  usageCount: Utilisé {count} fois
+  yes: Oui
+</i18n>

From 3c6eb2f098a0f6e9a109428b4cd20f52ee68c2f9 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Fri, 6 Feb 2026 12:25:15 +0100
Subject: [PATCH 4/7] refactor: copy catalogs template

---
 docker-compose.yml                            |  33 +-
 package-lock.json                             | 137 +---
 package.json                                  |   2 +-
 ui/dts/auto-imports.d.ts                      | 271 --------
 ui/dts/components.d.ts                        |  24 -
 ui/dts/typed-router.d.ts                      |  29 -
 ui/eslint.config.mjs                          |  16 +-
 ui/package.json                               |  10 +-
 .../layout/layout-actions-button.vue          |  21 -
 .../layout/layout-actions-right.vue           |  13 -
 ui/src/components/layout/layout-actions.vue   |   8 -
 .../processing/processing-actions.vue         | 599 +++++++++---------
 ui/src/components/processings-actions.vue     | 253 ++++----
 ui/src/pages/admin/plugins.vue                |   2 +-
 ui/src/pages/dev.vue                          |   6 +-
 ui/src/pages/processings/[id]/index.vue       |   5 +-
 ui/src/pages/processings/index.vue            |  79 ++-
 ui/src/pages/processings/new.vue              |  28 +-
 18 files changed, 538 insertions(+), 998 deletions(-)
 delete mode 100644 ui/dts/auto-imports.d.ts
 delete mode 100644 ui/dts/components.d.ts
 delete mode 100644 ui/dts/typed-router.d.ts
 delete mode 100644 ui/src/components/layout/layout-actions-button.vue
 delete mode 100644 ui/src/components/layout/layout-actions-right.vue
 delete mode 100644 ui/src/components/layout/layout-actions.vue

diff --git a/docker-compose.yml b/docker-compose.yml
index 318d22f6..bdbb688b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -52,26 +52,23 @@ services:
         condition: service_healthy
     environment:
       - PORT=8081
-      - DEBUG=files
       - MONGO_URL=mongodb://localhost:27017/data-fair
-      - OPENAPI_VIEWER_URL=http://localhost:5600/openapi-viewer/
       - DIRECTORY_URL=http://localhost:5600/simple-directory
-      - NOTIFY_URL=http://localhost:5600/events
+      - PRIVATE_EVENTS_URL=http://localhost:8083
+      - PRIVATE_DIRECTORY_URL=http://localhost:8080
       - PUBLIC_URL=http://localhost:5600/data-fair
       - WS_PUBLIC_URL=ws://localhost:5600/data-fair
-      - EXTRA_NAV_ITEMS=[{"id":"events","can":"admin","iframe":"http://localhost:5600/events/embed/events","basePath":"/events","icon":"mdi-clipboard-text-clock","title":"Traçabilité"}, {"id":"processings","can":"contrib","iframe":"http://localhost:5600/processings/processings","basePath":"/processings","icon":"mdi-cog-transfer-outline","title":"Traitements périodiques"}]
-      - EXTRA_ADMIN_NAV_ITEMS=[{"id":"processings","iframe":"http://localhost:5600/processings/admin","basePath":"/processings","icon":"mdi-cog-transfer-outline","title":"Plugins - Traitements"},{"id":"processingsAdminDoc","href":"http://localhost:5600/openapi-viewer?urlType=processingsAdmin","icon":"mdi-cog-transfer-outline","title":"API Traitements périodiques"}]
       - OBSERVER_ACTIVE=false
+
+      - PRIVATE_PROCESSINGS_URL=http://localhost:8082
+      - SECRET_EVENTS=secret-events
+      - EXTRA_ADMIN_NAV_ITEMS=[{"id":"processingsAdminDoc","href":"http://localhost:5600/openapi-viewer?urlType=processingsAdmin","icon":"mdi-cog-transfer-outline","title":"API Traitements périodiques"}]
+      - OPENAPI_VIEWER_URL=http://localhost:5600/openapi-viewer/
       - OPENAPI_VIEWER_V2=true
 
-  openapi-viewer:
-    profiles:
-      - dev
-    image: ghcr.io/data-fair/openapi-viewer:master
-    environment:
-      - PORT=8084
-      - USE_SIMPLE_DIRECTORY=true
-      - ALLOWED_URLS={"processings":"http://localhost:5600/processings/api/v1/api-docs.json","processingsId":"http://localhost:5600/processings/api/v1/processings/{id}/api-docs.json","processingsAdmin":"http://localhost:5600/processings/api/v1/admin/api-docs.json"}
+  #####
+  # optional services
+  #####
 
   events:
     profiles:
@@ -80,12 +77,22 @@ services:
     network_mode: host
     environment:
       - PORT=8083
+      - MONGO_URL=mongodb://localhost:27017/data-fair-events
       - PRIVATE_DIRECTORY_URL=http://localhost:5600/simple-directory
       - SECRET_IDENTITIES=secret-identities
       - SECRET_EVENTS=secret-events
       - SECRET_SENDMAILS=secret-sendmails
       - OBSERVER_ACTIVE=false
 
+  openapi-viewer:
+    profiles:
+      - dev
+    image: ghcr.io/data-fair/openapi-viewer:master
+    environment:
+      - PORT=8084
+      - USE_SIMPLE_DIRECTORY=true
+      - ALLOWED_URLS={"processings":"http://localhost:5600/processings/api/v1/api-docs.json","processingsId":"http://localhost:5600/processings/api/v1/processings/{id}/api-docs.json","processingsAdmin":"http://localhost:5600/processings/api/v1/admin/api-docs.json"}
+
   #####
   # db and search engine
   #####
diff --git a/package-lock.json b/package-lock.json
index 42a04fb5..8b23d640 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "@types/semver": "^7.7.1",
         "eslint": "^9.29.0",
         "eslint-plugin-vue": "^10.2.0",
-        "eslint-plugin-vuetify": "github:albanm/eslint-plugin-vuetify",
+        "eslint-plugin-vuetify": "^2.5.3",
         "husky": "^9.1.6",
         "neostandard": "^0.12.1",
         "tough-cookie": "^5.0.0",
@@ -581,9 +581,9 @@
       }
     },
     "node_modules/@data-fair/lib-vuetify": {
-      "version": "1.12.4",
-      "resolved": "https://registry.npmjs.org/@data-fair/lib-vuetify/-/lib-vuetify-1.12.4.tgz",
-      "integrity": "sha512-IjO5f7nqujEBC4m9DgaRnKTF9B35Wgtw7wbbKbq/fp+qKk7rKq9h79tEAzF3smA6TRRujmSMB1+P1otJgWDcRg==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@data-fair/lib-vuetify/-/lib-vuetify-1.13.1.tgz",
+      "integrity": "sha512-Cv6Vr6XJPn7vate+YZx//sh8YT1quMbtliNhV1Eh1jAo4Rb6BU98hJRBD2xIseGCtvsNuCfqw7f5LWA1o8fN/A==",
       "license": "MIT",
       "dependencies": {
         "@data-fair/lib-common-types": "^1.10.4",
@@ -5083,131 +5083,20 @@
       }
     },
     "node_modules/eslint-plugin-vuetify": {
-      "version": "2.4.0",
-      "resolved": "git+ssh://git@github.com/albanm/eslint-plugin-vuetify.git#e25c604300a03f8b852593c71a5ce9f4d25c2acd",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-2.5.3.tgz",
+      "integrity": "sha512-HQQ3HSeg4lOQp+bImVuGsIQBgRexMGudZBZ8iK7ypQsNkKlVu2JSDDslOoTUGTj+QY/SE5PtXOwz0lMITuv8Rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-plugin-vue": "^9.6.0",
+        "eslint-plugin-vue": ">=9.6.0",
         "requireindex": "^1.2.0"
       },
       "peerDependencies": {
-        "eslint": "^9.0.0",
+        "eslint": "^8.0.0 || ^9.0.0",
         "vuetify": "^3.0.0"
       }
     },
-    "node_modules/eslint-plugin-vuetify/node_modules/eslint-plugin-vue": {
-      "version": "9.33.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.33.0.tgz",
-      "integrity": "sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "globals": "^13.24.0",
-        "natural-compare": "^1.4.0",
-        "nth-check": "^2.1.1",
-        "postcss-selector-parser": "^6.0.15",
-        "semver": "^7.6.3",
-        "vue-eslint-parser": "^9.4.3",
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": "^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/vue-eslint-parser": {
-      "version": "9.4.3",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
-      "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.4",
-        "eslint-scope": "^7.1.1",
-        "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.1",
-        "esquery": "^1.4.0",
-        "lodash": "^4.17.21",
-        "semver": "^7.3.6"
-      },
-      "engines": {
-        "node": "^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      },
-      "peerDependencies": {
-        "eslint": ">=6.0.0"
-      }
-    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -7215,9 +7104,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "license": "MIT"
     },
     "node_modules/lodash.camelcase": {
@@ -11282,7 +11171,7 @@
         "@data-fair/frame": "^0.14.0",
         "@data-fair/lib-utils": "^1.6.1",
         "@data-fair/lib-vue": "^1.21.1",
-        "@data-fair/lib-vuetify": "^1.10.1",
+        "@data-fair/lib-vuetify": "^1.13.0",
         "@data-fair/processings-shared": "*",
         "@intlify/unplugin-vue-i18n": "^6.0.8",
         "@koumoul/v-iframe": "^2.4.5",
diff --git a/package.json b/package.json
index 167dbdc3..4f34f18d 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "@types/semver": "^7.7.1",
     "eslint": "^9.29.0",
     "eslint-plugin-vue": "^10.2.0",
-    "eslint-plugin-vuetify": "github:albanm/eslint-plugin-vuetify",
+    "eslint-plugin-vuetify": "^2.5.3",
     "husky": "^9.1.6",
     "neostandard": "^0.12.1",
     "tough-cookie": "^5.0.0",
diff --git a/ui/dts/auto-imports.d.ts b/ui/dts/auto-imports.d.ts
deleted file mode 100644
index 4035690e..00000000
--- a/ui/dts/auto-imports.d.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-  const $apiPath: typeof import('~/context')['$apiPath']
-  const $cspNonce: typeof import('~/context')['$cspNonce']
-  const $fetch: typeof import('~/context')['$fetch']
-  const $sitePath: typeof import('~/context')['$sitePath']
-  const $uiConfig: typeof import('~/context')['$uiConfig']
-  const EffectScope: typeof import('vue')['EffectScope']
-  const breadcrumbs: typeof import('../src/utils/breadcrumbs')['default']
-  const computed: typeof import('vue')['computed']
-  const computedDeepDiff: typeof import('@data-fair/lib-vue/deep-diff.js')['computedDeepDiff']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const dfDateMatchFilter: typeof import('@data-fair/lib-vuetify/date-match-filter.vue')['default']
-  const dfDateRangePicker: typeof import('@data-fair/lib-vuetify/date-range-picker.vue')['default']
-  const dfLangSwitcher: typeof import('@data-fair/lib-vuetify/lang-switcher.vue')['default']
-  const dfNavigationRight: typeof import('@data-fair/lib-vuetify/navigation-right.vue')['default']
-  const dfOwnerAvatar: typeof import('@data-fair/lib-vuetify/owner-avatar.vue')['default']
-  const dfOwnerPick: typeof import('@data-fair/lib-vuetify/owner-pick.vue')['default']
-  const dfPersonalMenu: typeof import('@data-fair/lib-vuetify/personal-menu.vue')['default']
-  const dfThemeSwitcher: typeof import('@data-fair/lib-vuetify/theme-switcher.vue')['default']
-  const dfTutorialAlert: typeof import('@data-fair/lib-vuetify/tutorial-alert.vue')['default']
-  const dfUiNotif: typeof import('@data-fair/lib-vuetify/ui-notif.vue')['default']
-  const dfUiNotifAlert: typeof import('@data-fair/lib-vuetify/ui-notif-alert.vue')['default']
-  const dfUserAvatar: typeof import('@data-fair/lib-vuetify/ui-user-avatar.vue')['default']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const mdiAccount: typeof import('@mdi/js')['mdiAccount']
-  const mdiAlert: typeof import('@mdi/js')['mdiAlert']
-  const mdiAlertCircle: typeof import('@mdi/js')['mdiAlertCircle']
-  const mdiBell: typeof import('@mdi/js')['mdiBell']
-  const mdiBookOpenVariant: typeof import('@mdi/js')['mdiBookOpenVariant']
-  const mdiCheckCircle: typeof import('@mdi/js')['mdiCheckCircle']
-  const mdiClock: typeof import('@mdi/js')['mdiClock']
-  const mdiCloud: typeof import('@mdi/js')['mdiCloud']
-  const mdiContentDuplicate: typeof import('@mdi/js')['mdiContentDuplicate']
-  const mdiDatabase: typeof import('@mdi/js')['mdiDatabase']
-  const mdiDelete: typeof import('@mdi/js')['mdiDelete']
-  const mdiDotsVertical: typeof import('@mdi/js')['mdiDotsVertical']
-  const mdiDownload: typeof import('@mdi/js')['mdiDownload']
-  const mdiInformation: typeof import('@mdi/js')['mdiInformation']
-  const mdiMagnify: typeof import('@mdi/js')['mdiMagnify']
-  const mdiOpenInNew: typeof import('@mdi/js')['mdiOpenInNew']
-  const mdiPencil: typeof import('@mdi/js')['mdiPencil']
-  const mdiPlay: typeof import('@mdi/js')['mdiPlay']
-  const mdiPlayCircle: typeof import('@mdi/js')['mdiPlayCircle']
-  const mdiPlusCircle: typeof import('@mdi/js')['mdiPlusCircle']
-  const mdiPlusCircleOutline: typeof import('@mdi/js')['mdiPlusCircleOutline']
-  const mdiPowerPlug: typeof import('@mdi/js')['mdiPowerPlug']
-  const mdiStop: typeof import('@mdi/js')['mdiStop']
-  const mdiToggleSwitch: typeof import('@mdi/js')['mdiToggleSwitch']
-  const mdiToggleSwitchOff: typeof import('@mdi/js')['mdiToggleSwitchOff']
-  const mdiUpdate: typeof import('@mdi/js')['mdiUpdate']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const setBreadcrumbs: typeof import('../src/utils/breadcrumbs')['setBreadcrumbs']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAsyncAction: typeof import('@data-fair/lib-vue/async-action.js')['useAsyncAction']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useBooleanSearchParam: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useBooleanSearchParam']
-  const useConceptFilters: typeof import('@data-fair/lib-vue/concept-filters.js')['useConceptFilters']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useFetch: typeof import('@data-fair/lib-vue/fetch.js')['useFetch']
-  const useI18n: typeof import('vue-i18n')['useI18n']
-  const useId: typeof import('vue')['useId']
-  const useLink: typeof import('vue-router')['useLink']
-  const useLocaleDayjs: typeof import('@data-fair/lib-vue/locale-dayjs.js')['useLocaleDayjs']
-  const useModel: typeof import('vue')['useModel']
-  const useNumberSearchParam: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useNumberSearchParam']
-  const usePluginFetch: typeof import('../src/composables/use-plugin-fetch')['default']
-  const useReactiveSearchParams: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useReactiveSearchParams']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSession: typeof import('@data-fair/lib-vue/session.js')['useSession']
-  const useSessionAuthenticated: typeof import('@data-fair/lib-vue/session.js')['useSessionAuthenticated']
-  const useSlots: typeof import('vue')['useSlots']
-  const useStringSearchParam: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringSearchParam']
-  const useStringsArraySearchParam: typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringsArraySearchParam']
-  const useTemplateRef: typeof import('vue')['useTemplateRef']
-  const useUiNotif: typeof import('@data-fair/lib-vue/ui-notif.js')['useUiNotif']
-  const useWS: typeof import('@data-fair/lib-vue/ws.js')['useWS']
-  const watch: typeof import('vue')['watch']
-  const watchDeepDiff: typeof import('@data-fair/lib-vue/deep-diff.js')['watchDeepDiff']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-  const withUiNotif: typeof import('@data-fair/lib-vue/ui-notif.js')['withUiNotif']
-}
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
-  import('vue')
-}
-
-// for vue template auto import
-import { UnwrapRef } from 'vue'
-declare module 'vue' {
-  interface GlobalComponents {}
-  interface ComponentCustomProperties {
-    readonly $apiPath: UnwrapRef<typeof import('~/context')['$apiPath']>
-    readonly $cspNonce: UnwrapRef<typeof import('~/context')['$cspNonce']>
-    readonly $fetch: UnwrapRef<typeof import('~/context')['$fetch']>
-    readonly $sitePath: UnwrapRef<typeof import('~/context')['$sitePath']>
-    readonly $uiConfig: UnwrapRef<typeof import('~/context')['$uiConfig']>
-    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly breadcrumbs: UnwrapRef<typeof import('../src/utils/breadcrumbs')['default']>
-    readonly computed: UnwrapRef<typeof import('vue')['computed']>
-    readonly computedDeepDiff: UnwrapRef<typeof import('@data-fair/lib-vue/deep-diff.js')['computedDeepDiff']>
-    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
-    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
-    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly dfDateMatchFilter: UnwrapRef<typeof import('@data-fair/lib-vuetify/date-match-filter.vue')['default']>
-    readonly dfDateRangePicker: UnwrapRef<typeof import('@data-fair/lib-vuetify/date-range-picker.vue')['default']>
-    readonly dfLangSwitcher: UnwrapRef<typeof import('@data-fair/lib-vuetify/lang-switcher.vue')['default']>
-    readonly dfNavigationRight: UnwrapRef<typeof import('@data-fair/lib-vuetify/navigation-right.vue')['default']>
-    readonly dfOwnerAvatar: UnwrapRef<typeof import('@data-fair/lib-vuetify/owner-avatar.vue')['default']>
-    readonly dfOwnerPick: UnwrapRef<typeof import('@data-fair/lib-vuetify/owner-pick.vue')['default']>
-    readonly dfPersonalMenu: UnwrapRef<typeof import('@data-fair/lib-vuetify/personal-menu.vue')['default']>
-    readonly dfThemeSwitcher: UnwrapRef<typeof import('@data-fair/lib-vuetify/theme-switcher.vue')['default']>
-    readonly dfTutorialAlert: UnwrapRef<typeof import('@data-fair/lib-vuetify/tutorial-alert.vue')['default']>
-    readonly dfUiNotif: UnwrapRef<typeof import('@data-fair/lib-vuetify/ui-notif.vue')['default']>
-    readonly dfUiNotifAlert: UnwrapRef<typeof import('@data-fair/lib-vuetify/ui-notif-alert.vue')['default']>
-    readonly dfUserAvatar: UnwrapRef<typeof import('@data-fair/lib-vuetify/ui-user-avatar.vue')['default']>
-    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
-    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
-    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
-    readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
-    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
-    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
-    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
-    readonly mdiAccount: UnwrapRef<typeof import('@mdi/js')['mdiAccount']>
-    readonly mdiAlert: UnwrapRef<typeof import('@mdi/js')['mdiAlert']>
-    readonly mdiAlertCircle: UnwrapRef<typeof import('@mdi/js')['mdiAlertCircle']>
-    readonly mdiBell: UnwrapRef<typeof import('@mdi/js')['mdiBell']>
-    readonly mdiBookOpenVariant: UnwrapRef<typeof import('@mdi/js')['mdiBookOpenVariant']>
-    readonly mdiCheckCircle: UnwrapRef<typeof import('@mdi/js')['mdiCheckCircle']>
-    readonly mdiClock: UnwrapRef<typeof import('@mdi/js')['mdiClock']>
-    readonly mdiCloud: UnwrapRef<typeof import('@mdi/js')['mdiCloud']>
-    readonly mdiContentDuplicate: UnwrapRef<typeof import('@mdi/js')['mdiContentDuplicate']>
-    readonly mdiDatabase: UnwrapRef<typeof import('@mdi/js')['mdiDatabase']>
-    readonly mdiDelete: UnwrapRef<typeof import('@mdi/js')['mdiDelete']>
-    readonly mdiDotsVertical: UnwrapRef<typeof import('@mdi/js')['mdiDotsVertical']>
-    readonly mdiDownload: UnwrapRef<typeof import('@mdi/js')['mdiDownload']>
-    readonly mdiInformation: UnwrapRef<typeof import('@mdi/js')['mdiInformation']>
-    readonly mdiMagnify: UnwrapRef<typeof import('@mdi/js')['mdiMagnify']>
-    readonly mdiOpenInNew: UnwrapRef<typeof import('@mdi/js')['mdiOpenInNew']>
-    readonly mdiPencil: UnwrapRef<typeof import('@mdi/js')['mdiPencil']>
-    readonly mdiPlay: UnwrapRef<typeof import('@mdi/js')['mdiPlay']>
-    readonly mdiPlayCircle: UnwrapRef<typeof import('@mdi/js')['mdiPlayCircle']>
-    readonly mdiPlusCircle: UnwrapRef<typeof import('@mdi/js')['mdiPlusCircle']>
-    readonly mdiPlusCircleOutline: UnwrapRef<typeof import('@mdi/js')['mdiPlusCircleOutline']>
-    readonly mdiPowerPlug: UnwrapRef<typeof import('@mdi/js')['mdiPowerPlug']>
-    readonly mdiStop: UnwrapRef<typeof import('@mdi/js')['mdiStop']>
-    readonly mdiToggleSwitch: UnwrapRef<typeof import('@mdi/js')['mdiToggleSwitch']>
-    readonly mdiToggleSwitchOff: UnwrapRef<typeof import('@mdi/js')['mdiToggleSwitchOff']>
-    readonly mdiUpdate: UnwrapRef<typeof import('@mdi/js')['mdiUpdate']>
-    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
-    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
-    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
-    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
-    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
-    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
-    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
-    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
-    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
-    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
-    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
-    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
-    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
-    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
-    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
-    readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
-    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
-    readonly ref: UnwrapRef<typeof import('vue')['ref']>
-    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly setBreadcrumbs: UnwrapRef<typeof import('../src/utils/breadcrumbs')['setBreadcrumbs']>
-    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
-    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
-    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
-    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
-    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
-    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
-    readonly unref: UnwrapRef<typeof import('vue')['unref']>
-    readonly useAsyncAction: UnwrapRef<typeof import('@data-fair/lib-vue/async-action.js')['useAsyncAction']>
-    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
-    readonly useBooleanSearchParam: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useBooleanSearchParam']>
-    readonly useConceptFilters: UnwrapRef<typeof import('@data-fair/lib-vue/concept-filters.js')['useConceptFilters']>
-    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
-    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useFetch: UnwrapRef<typeof import('@data-fair/lib-vue/fetch.js')['useFetch']>
-    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
-    readonly useId: UnwrapRef<typeof import('vue')['useId']>
-    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
-    readonly useLocaleDayjs: UnwrapRef<typeof import('@data-fair/lib-vue/locale-dayjs.js')['useLocaleDayjs']>
-    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
-    readonly useNumberSearchParam: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useNumberSearchParam']>
-    readonly usePluginFetch: UnwrapRef<typeof import('../src/composables/use-plugin-fetch')['default']>
-    readonly useReactiveSearchParams: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useReactiveSearchParams']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
-    readonly useSession: UnwrapRef<typeof import('@data-fair/lib-vue/session.js')['useSession']>
-    readonly useSessionAuthenticated: UnwrapRef<typeof import('@data-fair/lib-vue/session.js')['useSessionAuthenticated']>
-    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
-    readonly useStringSearchParam: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringSearchParam']>
-    readonly useStringsArraySearchParam: UnwrapRef<typeof import('@data-fair/lib-vue/reactive-search-params.js')['useStringsArraySearchParam']>
-    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
-    readonly useUiNotif: UnwrapRef<typeof import('@data-fair/lib-vue/ui-notif.js')['useUiNotif']>
-    readonly useWS: UnwrapRef<typeof import('@data-fair/lib-vue/ws.js')['useWS']>
-    readonly watch: UnwrapRef<typeof import('vue')['watch']>
-    readonly watchDeepDiff: UnwrapRef<typeof import('@data-fair/lib-vue/deep-diff.js')['watchDeepDiff']>
-    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
-    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
-    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
-    readonly withUiNotif: UnwrapRef<typeof import('@data-fair/lib-vue/ui-notif.js')['withUiNotif']>
-  }
-}
\ No newline at end of file
diff --git a/ui/dts/components.d.ts b/ui/dts/components.d.ts
deleted file mode 100644
index f7a02057..00000000
--- a/ui/dts/components.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    LayoutActions: typeof import('./../src/components/layout/layout-actions.vue')['default']
-    LayoutActionsButton: typeof import('./../src/components/layout/layout-actions-button.vue')['default']
-    LayoutActionsRight: typeof import('./../src/components/layout/layout-actions-right.vue')['default']
-    PrivateAccess: typeof import('./../src/components/private-access.vue')['default']
-    ProcessingActions: typeof import('./../src/components/processing/processing-actions.vue')['default']
-    ProcessingActivity: typeof import('./../src/components/processing/processing-activity.vue')['default']
-    ProcessingCard: typeof import('./../src/components/processing/processing-card.vue')['default']
-    ProcessingRuns: typeof import('./../src/components/processing/processing-runs.vue')['default']
-    ProcessingsActions: typeof import('./../src/components/processings-actions.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    RunListItem: typeof import('./../src/components/run/run-list-item.vue')['default']
-    RunLogsList: typeof import('./../src/components/run/run-logs-list.vue')['default']
-  }
-}
diff --git a/ui/dts/typed-router.d.ts b/ui/dts/typed-router.d.ts
deleted file mode 100644
index e671f935..00000000
--- a/ui/dts/typed-router.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
-// It's recommended to commit this file.
-// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
-
-declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'vue-router'
-
-  /**
-   * Route name map generated by unplugin-vue-router
-   */
-  export interface RouteNamedMap {
-    '/admin/': RouteRecordInfo<'/admin/', '/admin', Record<never, never>, Record<never, never>>,
-    '/admin/plugins': RouteRecordInfo<'/admin/plugins', '/admin/plugins', Record<never, never>, Record<never, never>>,
-    '/dev': RouteRecordInfo<'/dev', '/dev', Record<never, never>, Record<never, never>>,
-    '/processings/': RouteRecordInfo<'/processings/', '/processings', Record<never, never>, Record<never, never>>,
-    '/processings/[id]/': RouteRecordInfo<'/processings/[id]/', '/processings/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
-    '/processings/[id]/runs/[runId]': RouteRecordInfo<'/processings/[id]/runs/[runId]', '/processings/:id/runs/:runId', { id: ParamValue<true>, runId: ParamValue<true> }, { id: ParamValue<false>, runId: ParamValue<false> }>,
-    '/processings/new': RouteRecordInfo<'/processings/new', '/processings/new', Record<never, never>, Record<never, never>>,
-  }
-}
diff --git a/ui/eslint.config.mjs b/ui/eslint.config.mjs
index 04edcabe..e408dc5d 100644
--- a/ui/eslint.config.mjs
+++ b/ui/eslint.config.mjs
@@ -1,33 +1,25 @@
 import neostandard from 'neostandard'
 import pluginVue from 'eslint-plugin-vue'
+import pluginVuetify from 'eslint-plugin-vuetify'
 import dfLibRecommended from '@data-fair/lib-utils/eslint/recommended.js'
-// cf https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/98
-// @ts-ignore
-import vuetify from 'eslint-plugin-vuetify/src/index.js'
 
 export default [
   ...dfLibRecommended,
   ...pluginVue.configs['flat/recommended'],
-  {
-    rules: {
-      'vue/multi-word-component-names': 'off'
-    }
-  },
+  ...pluginVuetify.configs['flat/recommended'],
   {
     files: ['**/*.vue'],
     languageOptions: {
       parserOptions: {
         parser: '@typescript-eslint/parser'
       }
-    },
-    plugins: { vuetify },
-    rules: {
-      ...vuetify.configs.base.rules
     }
   },
   ...neostandard({ ts: true }),
   {
     rules: {
+      'vue/require-default-prop': 'off',
+      'vue/multi-word-component-names': 'off',
       'no-undef': 'off' // typescript takes care of this with autoImport support
     }
   },
diff --git a/ui/package.json b/ui/package.json
index 8c648eb8..967c6374 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -3,12 +3,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "NODE_CONFIG_DIR=../api/config/ vite --port 3039",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview",
+    "build": "vite build",
     "check-types": "vue-tsc",
+    "dev": "NODE_CONFIG_DIR=../api/config/ vite --port 3039",
     "lint": "eslint .",
-    "lint-fix": "eslint --fix ."
+    "lint-fix": "eslint --fix .",
+    "preview": "vite preview"
   },
   "imports": {
     "#api/doc": "../api/doc/index.ts",
@@ -19,7 +19,7 @@
     "@data-fair/frame": "^0.14.0",
     "@data-fair/lib-utils": "^1.6.1",
     "@data-fair/lib-vue": "^1.21.1",
-    "@data-fair/lib-vuetify": "^1.10.1",
+    "@data-fair/lib-vuetify": "^1.13.0",
     "@data-fair/processings-shared": "*",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@koumoul/v-iframe": "^2.4.5",
diff --git a/ui/src/components/layout/layout-actions-button.vue b/ui/src/components/layout/layout-actions-button.vue
deleted file mode 100644
index 7641698d..00000000
--- a/ui/src/components/layout/layout-actions-button.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <v-fab
-    size="small"
-    color="primary"
-    location="top right"
-    app
-    icon
-  >
-    <v-icon
-      :icon="mdiDotsVertical"
-    />
-    <v-menu
-      activator="parent"
-      :close-on-content-click="false"
-    >
-      <v-card max-width="300">
-        <slot />
-      </v-card>
-    </v-menu>
-  </v-fab>
-</template>
diff --git a/ui/src/components/layout/layout-actions-right.vue b/ui/src/components/layout/layout-actions-right.vue
deleted file mode 100644
index 85d2f5b0..00000000
--- a/ui/src/components/layout/layout-actions-right.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <v-navigation-drawer
-    location="right"
-    class="pt-12"
-    permanent
-    floating
-    style="background-color: transparent;"
-  >
-    <template #default>
-      <slot />
-    </template>
-  </v-navigation-drawer>
-</template>
diff --git a/ui/src/components/layout/layout-actions.vue b/ui/src/components/layout/layout-actions.vue
deleted file mode 100644
index f2afab33..00000000
--- a/ui/src/components/layout/layout-actions.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <layout-actions-right v-if="$vuetify.display.lgAndUp">
-    <slot />
-  </layout-actions-right>
-  <layout-actions-button v-else>
-    <slot />
-  </layout-actions-button>
-</template>
diff --git a/ui/src/components/processing/processing-actions.vue b/ui/src/components/processing/processing-actions.vue
index 42ae521a..3666a949 100644
--- a/ui/src/components/processing/processing-actions.vue
+++ b/ui/src/components/processing/processing-actions.vue
@@ -1,329 +1,322 @@
-<!-- eslint-disable vue/no-deprecated-slot-attribute -->
 <template>
-  <v-list
-    density="compact"
-    class="list-actions"
-    style="background-color: transparent;"
-    data-iframe-height
+  <!-- Execute -->
+  <v-menu
+    v-if="canAdmin || canExec"
+    v-model="showTriggerMenu"
+    :close-on-content-click="false"
+    max-width="800"
   >
-    <v-menu
-      v-if="canAdmin || canExec"
-      v-model="showTriggerMenu"
-      :close-on-content-click="false"
-      max-width="800"
+    <template #activator="{ props }">
+      <v-list-item
+        v-if="processingSchema !== null"
+        v-bind="props"
+        :disabled="!processing?.active || edited"
+        rounded
+      >
+        <template #prepend>
+          <v-icon
+            color="primary"
+            :icon="mdiPlay"
+          />
+        </template>
+        <span>Exécuter</span>
+      </v-list-item>
+      <v-progress-linear
+        v-if="edited"
+        indeterminate
+        color="primary"
+      />
+    </template>
+    <v-card
+      rounded="lg"
+      title="Exécution du traitement"
+      variant="elevated"
+      :loading="triggerExecution.loading.value ? 'primary' : false"
     >
-      <template #activator="{ props }">
-        <v-list-item
-          v-if="processingSchema !== null"
-          v-bind="props"
-          :disabled="!processing?.active || edited"
-          rounded
+      <v-card-text class="py-0">
+        <p v-if="canAdmin">
+          Vous pouvez déclencher une exécution sans être connecté à la plateforme en envoyant une requête HTTP POST à cette URL sécurisée :
+          <br><code>{{ webhookLink }}</code>
+        </p>
+        <v-text-field
+          v-model="triggerDelay"
+          class="py-4"
+          type="number"
+          label="Appliquer un délai en secondes"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          :disabled="triggerExecution.loading.value"
+          @click="showTriggerMenu = false"
         >
-          <template #prepend>
-            <v-icon
-              color="primary"
-              :icon="mdiPlay"
-            />
-          </template>
-          <span>Exécuter</span>
-        </v-list-item>
-        <v-progress-linear
-          v-if="edited"
-          indeterminate
+          Annuler
+        </v-btn>
+        <v-btn
           color="primary"
-        />
-      </template>
-      <v-card
-        rounded="lg"
-        title="Exécution du traitement"
-        variant="elevated"
-        :loading="triggerExecution.loading.value ? 'primary' : false"
+          variant="flat"
+          :loading="triggerExecution.loading.value"
+          @click="triggerExecution.execute()"
+        >
+          Déclencher manuellement
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+
+  <!-- Duplicate -->
+  <v-menu
+    v-if="canAdmin"
+    v-model="showDuplicateMenu"
+    :close-on-content-click="false"
+    max-width="500"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
       >
-        <v-card-text class="py-0">
-          <p v-if="canAdmin">
-            Vous pouvez déclencher une exécution sans être connecté à la plateforme en envoyant une requête HTTP POST à cette URL sécurisée :
-            <br><code>{{ webhookLink }}</code>
-          </p>
-          <v-text-field
-            v-model="triggerDelay"
-            class="py-4"
-            type="number"
-            label="Appliquer un délai en secondes"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            :disabled="triggerExecution.loading.value"
-            @click="showTriggerMenu = false"
-          >
-            Annuler
-          </v-btn>
-          <v-btn
+        <template #prepend>
+          <v-icon
             color="primary"
-            variant="flat"
-            :loading="triggerExecution.loading.value"
-            @click="triggerExecution.execute()"
-          >
-            Déclencher manuellement
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
-
-    <v-menu
-      v-if="canAdmin"
-      v-model="showDuplicateMenu"
-      :close-on-content-click="false"
-      max-width="500"
+            :icon="mdiContentDuplicate"
+          />
+        </template>
+        Dupliquer
+      </v-list-item>
+    </template>
+    <v-card
+      rounded="lg"
+      title="Duplication du traitement"
+      variant="elevated"
+      :loading="confirmDuplicate.loading.value ? 'primary' : false"
     >
-      <template #activator="{ props }">
-        <v-list-item
-          v-bind="props"
-          rounded
+      <v-card-text>
+        Vous êtes sur le point de créer une copie du traitement "{{ processing?.title }}".
+        <v-text-field
+          v-model="duplicateTitle"
+          label="Titre du nouveau traitement"
+          class="mt-4"
+          :placeholder="processing?.title + ' (copie)'"
+          hide-details="auto"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          :disabled="confirmDuplicate.loading.value"
+          @click="showDuplicateMenu = false"
+        >
+          Annuler
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="confirmDuplicate.loading.value"
+          @click="confirmDuplicate.execute()"
         >
-          <template #prepend>
-            <v-icon
-              color="primary"
-              :icon="mdiContentDuplicate"
-            />
-          </template>
           Dupliquer
-        </v-list-item>
-      </template>
-      <v-card
-        rounded="lg"
-        title="Duplication du traitement"
-        variant="elevated"
-        :loading="confirmDuplicate.loading.value ? 'primary' : false"
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+
+  <!-- Delete -->
+  <v-menu
+    v-if="canAdmin"
+    v-model="showDeleteMenu"
+    :close-on-content-click="false"
+    max-width="500"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
       >
-        <v-card-text>
-          Vous êtes sur le point de créer une copie du traitement "{{ processing?.title }}".
-          <v-text-field
-            v-model="duplicateTitle"
-            label="Titre du nouveau traitement"
-            class="mt-4"
-            :placeholder="processing?.title + ' (copie)'"
-            hide-details="auto"
+        <template #prepend>
+          <v-icon
+            color="warning"
+            :icon="mdiDelete"
           />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            :disabled="confirmDuplicate.loading.value"
-            @click="showDuplicateMenu = false"
-          >
-            Annuler
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="flat"
-            :loading="confirmDuplicate.loading.value"
-            @click="confirmDuplicate.execute()"
-          >
-            Dupliquer
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
-
-    <v-menu
-      v-if="canAdmin"
-      v-model="showDeleteMenu"
-      :close-on-content-click="false"
-      max-width="500"
+        </template>
+        Supprimer
+      </v-list-item>
+    </template>
+    <v-card
+      rounded="lg"
+      title="Suppression du traitement"
+      variant="elevated"
+      :loading="confirmRemove.loading.value ? 'warning' : false"
     >
-      <template #activator="{ props }">
-        <v-list-item
-          v-bind="props"
-          rounded
+      <v-card-text>
+        Voulez-vous vraiment supprimer le traitement "{{ processing?.title }}" et tout son historique ? La suppression est définitive et les données ne pourront pas être récupérées.
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          :disabled="confirmRemove.loading.value"
+          @click="showDeleteMenu = false"
         >
-          <template #prepend>
-            <v-icon
-              color="warning"
-              :icon="mdiDelete"
-            />
-          </template>
-          Supprimer
-        </v-list-item>
-      </template>
-      <v-card
-        rounded="lg"
-        title="Suppression du traitement"
-        variant="elevated"
-        :loading="confirmRemove.loading.value ? 'warning' : false"
+          Non
+        </v-btn>
+        <v-btn
+          color="warning"
+          variant="flat"
+          :loading="confirmRemove.loading.value"
+          @click="confirmRemove.execute()"
+        >
+          Oui
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+
+  <!-- Change owner -->
+  <v-menu
+    v-if="canAdmin"
+    v-model="showChangeOwnerMenu"
+    :close-on-content-click="false"
+    max-width="500"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
       >
-        <v-card-text>
-          Voulez-vous vraiment supprimer le traitement "{{ processing?.title }}" et tout son historique ? La suppression est définitive et les données ne pourront pas être récupérées.
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            :disabled="confirmRemove.loading.value"
-            @click="showDeleteMenu = false"
-          >
-            Non
-          </v-btn>
-          <v-btn
+        <template #prepend>
+          <v-icon
             color="warning"
-            variant="flat"
-            :loading="confirmRemove.loading.value"
-            @click="confirmRemove.execute()"
-          >
-            Oui
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
-
-    <v-menu
-      v-if="canAdmin"
-      v-model="showChangeOwnerMenu"
-      :close-on-content-click="false"
-      max-width="500"
+            :icon="mdiAccount"
+          />
+        </template>
+        Changer le propriétaire
+      </v-list-item>
+    </template>
+    <v-card
+      rounded="lg"
+      title="Changer le proriétaire"
+      variant="elevated"
     >
-      <template #activator="{ props }">
-        <v-list-item
-          v-bind="props"
-          rounded
+      <v-progress-linear
+        v-if="confirmChangeOwner.loading.value"
+        indeterminate
+        color="warning"
+      />
+      <v-card-text>
+        <owner-pick
+          v-model="newOwner"
+          v-model:ready="ownersReady"
+          message=" "
+          other-accounts
+        />
+        <v-alert
+          type="warning"
+          title="Opération sensible"
+          text="Changer le propriétaire d'un traitement peut avoir des conséquences sur l'execution du traitement."
+          variant="outlined"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          :disabled="confirmChangeOwner.loading.value"
+          @click="showChangeOwnerMenu = false"
         >
-          <template #prepend>
-            <v-icon
-              color="warning"
-              :icon="mdiAccount"
-            />
-          </template>
-          Changer le proriétaire
-        </v-list-item>
-      </template>
-      <v-card
-        rounded="lg"
-        title="Changer le proriétaire"
-        variant="elevated"
-      >
-        <v-progress-linear
-          v-if="confirmChangeOwner.loading.value"
-          indeterminate
+          Annuler
+        </v-btn>
+        <v-btn
           color="warning"
-        />
-        <v-card-text>
-          <owner-pick
-            v-model="newOwner"
-            v-model:ready="ownersReady"
-            message=" "
-            other-accounts
-          />
-          <v-alert
-            type="warning"
-            title="Opération sensible"
-            text="Changer le propriétaire d'un traitement peut avoir des conséquences sur l'execution du traitement."
-            variant="outlined"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            :disabled="confirmChangeOwner.loading.value"
-            @click="showChangeOwnerMenu = false"
-          >
-            Annuler
-          </v-btn>
-          <v-btn
-            color="warning"
-            variant="flat"
-            :disabled="!ownersReady"
-            :loading="confirmChangeOwner.loading.value"
-            @click="confirmChangeOwner.execute()"
-          >
-            Confirmer
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
+          variant="flat"
+          :disabled="!ownersReady"
+          :loading="confirmChangeOwner.loading.value"
+          @click="confirmChangeOwner.execute()"
+        >
+          Confirmer
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
 
-    <v-list-item
-      v-if="processing?.config?.dataset?.id"
-      :href="`/data-fair/dataset/${processing.config.dataset.id}`"
-      target="_blank"
-      rounded
-    >
-      <template #prepend>
-        <v-icon
-          color="primary"
-          :icon="mdiOpenInNew"
-        />
-      </template>
-      Voir le jeu de données
-    </v-list-item>
+  <!-- Dataset link -->
+  <v-list-item
+    v-if="processing?.config?.dataset?.id"
+    :href="`/data-fair/dataset/${processing.config.dataset.id}`"
+    target="_blank"
+    rounded
+  >
+    <template #prepend>
+      <v-icon
+        color="primary"
+        :icon="mdiOpenInNew"
+      />
+    </template>
+    Voir le jeu de données
+  </v-list-item>
 
-    <v-list-item
-      v-if="metadata?.documentation"
-      :href="metadata.documentation"
-      target="_blank"
-      rounded
-    >
-      <template #prepend>
-        <v-icon
-          color="primary"
-          :icon="mdiBookOpenVariant"
-        />
-      </template>
-      Tutoriel
-    </v-list-item>
+  <!-- Documentation link -->
+  <v-list-item
+    v-if="metadata?.documentation"
+    :href="metadata.documentation"
+    target="_blank"
+    rounded
+  >
+    <template #prepend>
+      <v-icon
+        color="primary"
+        :icon="mdiBookOpenVariant"
+      />
+    </template>
+    Tutoriel
+  </v-list-item>
 
-    <v-list-item
-      v-if="session.state.user.adminMode"
-      :href="`${origin}/openapi-viewer?urlType=processingsId&id=${processing?._id}`"
-      target="_blank"
-      rounded
-    >
-      <template #prepend>
-        <v-icon
-          color="primary"
-          :icon="mdiCloud"
-        />
-      </template>
-      Utiliser l'API
-    </v-list-item>
+  <!-- API link -->
+  <v-list-item
+    v-if="session.state.user.adminMode"
+    :href="`${origin}/openapi-viewer?urlType=processingsId&id=${processing?._id}`"
+    target="_blank"
+    rounded
+  >
+    <template #prepend>
+      <v-icon
+        color="primary"
+        :icon="mdiCloud"
+      />
+    </template>
+    Utiliser l'API
+  </v-list-item>
 
-    <v-menu
-      v-if="notifUrl && canSubscribeNotif"
-      v-model="showNotifMenu"
-      :close-on-content-click="false"
-      max-width="500"
-    >
-      <template #activator="{ props }">
-        <v-list-item
-          v-bind="props"
-          rounded
-        >
-          <template #prepend>
-            <v-icon
-              color="primary"
-              :icon="mdiBell"
-            />
-          </template>
-          Notifications
-        </v-list-item>
-      </template>
-      <v-card
-        rounded="lg"
-        title="Notifications"
-        variant="elevated"
+  <!-- Notifications menu -->
+  <v-menu
+    v-if="eventsSubscribeUrl && canSubscribeNotif"
+    v-model="showNotifMenu"
+    :close-on-content-click="false"
+    max-width="500"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
       >
-        <v-card-text class="py-0 px-3">
-          <d-frame
-            :src="notifUrl"
-            resize
-          >
-            <div slot="loader">
-              <v-skeleton-loader type="paragraph" />
-            </div>
-          </d-frame>
-        </v-card-text>
-      </v-card>
-    </v-menu>
-  </v-list>
+        <template #prepend>
+          <v-icon
+            color="primary"
+            :icon="mdiBell"
+          />
+        </template>
+        Notifications
+      </v-list-item>
+    </template>
+    <v-card
+      rounded="lg"
+      title="Notifications"
+      variant="elevated"
+    >
+      <v-card-text class="pa-0">
+        <d-frame :src="eventsSubscribeUrl" />
+      </v-card-text>
+    </v-card>
+  </v-menu>
 </template>
 
 <script setup lang="ts">
@@ -360,7 +353,7 @@ const duplicateTitle = ref(`${processing.title} (copie)`)
 const canSubscribeNotif = computed(() => processing?.owner.type === session.state.account.type && processing?.owner.id === session.state.account.id)
 const ownerString = computed(() => `${processing?.owner.type}:${processing?.owner.id}${processing?.owner.department ? ':' + processing?.owner.department : ''}`)
 
-const notifUrl = computed(() => {
+const eventsSubscribeUrl = computed(() => {
   const topics = [
     { key: `processings:processing-finish-ok:${processing?._id ?? ''}`, title: `Le traitement ${processing?.title ?? ''} s'est terminé sans erreurs`, sender: ownerString.value },
     { key: `processings:processing-finish-error:${processing?._id}`, title: `Le traitement ${processing?.title} a échoué`, sender: ownerString.value },
diff --git a/ui/src/components/processings-actions.vue b/ui/src/components/processings-actions.vue
index aa95908a..30ef10ea 100644
--- a/ui/src/components/processings-actions.vue
+++ b/ui/src/components/processings-actions.vue
@@ -1,135 +1,128 @@
-<!-- eslint-disable vue/no-deprecated-slot-attribute -->
 <template>
-  <v-list
-    density="compact"
-    class="list-actions"
-    style="background-color: transparent;"
-    data-iframe-height
+  <!-- Create new processing -->
+  <v-list-item
+    v-if="canAdmin"
+    rounded
+    @click="router.push({ path: '/processings/new', query: { owner: ownersSelected.length ? String(ownersSelected[0]) : undefined } })"
   >
-    <v-list-item
-      v-if="canAdmin"
-      rounded
-      @click="router.push({ path: '/processings/new', query: { owner: ownersSelected.length ? String(ownersSelected[0]) : undefined } })"
-    >
-      <template #prepend>
-        <v-icon
-          color="primary"
-          :icon="mdiPlusCircle"
-        />
-      </template>
-      Créer un nouveau traitement
-    </v-list-item>
-    <v-menu
-      v-if="notifUrl"
-      v-model="showNotifMenu"
-      :close-on-content-click="false"
-      max-width="500"
-    >
-      <template #activator="{ props }">
-        <v-list-item
-          v-bind="props"
-          rounded
-        >
-          <template #prepend>
-            <v-icon
-              color="primary"
-              :icon="mdiBell"
-            />
-          </template>
-          Notifications
-        </v-list-item>
-      </template>
-      <v-card
-        rounded="lg"
-        title="Notifications"
-        variant="elevated"
+    <template #prepend>
+      <v-icon
+        color="primary"
+        :icon="mdiPlusCircle"
+      />
+    </template>
+    Créer un nouveau traitement
+  </v-list-item>
+
+  <!-- Notifications menu -->
+  <v-menu
+    v-if="eventsSubscribeUrl"
+    v-model="showNotifMenu"
+    :close-on-content-click="false"
+    max-width="500"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
       >
-        <v-card-text class="py-0 px-3">
-          <d-frame
-            :src="notifUrl"
-            resize
-          >
-            <div slot="loader">
-              <v-skeleton-loader type="paragraph" />
-            </div>
-          </d-frame>
-        </v-card-text>
-      </v-card>
-    </v-menu>
-    <v-text-field
-      v-model="search"
-      :append-inner-icon="mdiMagnify"
-      class="mt-4 mx-4"
-      clearable
-      color="primary"
-      density="compact"
-      hide-details
-      hide-selected
-      placeholder="rechercher"
-      style="max-width:400px;"
-      variant="outlined"
-    />
-    <v-select
-      v-model="statusesSelected"
-      :items="statusesItems"
-      item-title="display"
-      item-value="statusKey"
-      label="Statut"
-      chips
-      class="mt-4 mx-4"
-      clearable
-      closable-chips
-      density="compact"
-      hide-details
-      multiple
-      rounded="xl"
-      variant="outlined"
-      style="max-width:400px;"
-    />
-    <v-autocomplete
-      v-model="pluginsSelected"
-      :items="pluginsItems"
-      item-title="display"
-      item-value="pluginKey"
-      label="Plugin"
-      chips
-      class="mt-4 mx-4"
-      clearable
-      closable-chips
-      density="compact"
-      hide-details
-      multiple
-      rounded="xl"
-      variant="outlined"
-      style="max-width:400px;"
-    />
-    <v-switch
-      v-if="adminMode"
-      v-model="showAll"
-      color="admin"
-      label="Voir tous les traitements"
-      hide-details
-      class="mt-2 mx-4 text-admin"
-    />
-    <v-autocomplete
-      v-if="showAll"
-      v-model="ownersSelected"
-      :items="ownersItems"
-      item-title="display"
-      item-value="ownerKey"
-      label="Propriétaire"
-      chips
-      class="mt-2 mx-4 text-admin"
-      clearable
-      closable-chips
-      density="compact"
-      hide-details
-      multiple
-      rounded="xl"
-      variant="outlined"
-      style="max-width:400px;"
-    />
-  </v-list>
+        <template #prepend>
+          <v-icon
+            color="primary"
+            :icon="mdiBell"
+          />
+        </template>
+        Notifications
+      </v-list-item>
+    </template>
+    <v-card
+      title="Notifications"
+      rounded="lg"
+    >
+      <v-card-text class="pa-0">
+        <d-frame :src="eventsSubscribeUrl" />
+      </v-card-text>
+    </v-card>
+  </v-menu>
+
+  <!-- Search field -->
+  <v-text-field
+    v-model="search"
+    :append-inner-icon="mdiMagnify"
+    label="Rechercher"
+    class="mt-4 mx-4"
+    color="primary"
+    density="compact"
+    variant="outlined"
+    autofocus
+    hide-details
+    clearable
+  />
+
+  <!-- Status filters -->
+  <v-select
+    v-model="statusesSelected"
+    :items="statusesItems"
+    item-title="display"
+    item-value="statusKey"
+    class="mt-4 mx-4"
+    density="compact"
+    label="Status"
+    rounded="xl"
+    variant="outlined"
+    hide-details
+    chips
+    clearable
+    closable-chips
+    multiple
+  />
+
+  <!-- Plugin filters -->
+  <v-autocomplete
+    v-model="pluginsSelected"
+    :items="pluginsItems"
+    item-title="display"
+    item-value="pluginKey"
+    class="mt-4 mx-4"
+    density="compact"
+    label="Plugin"
+    rounded="xl"
+    variant="outlined"
+    hide-details
+    chips
+    clearable
+    closable-chips
+    multiple
+  />
+
+  <!-- Show all switch (admin only) -->
+  <v-switch
+    v-if="adminMode"
+    v-model="showAll"
+    color="admin"
+    label="Voir tous les traitements"
+    hide-details
+    class="mt-2 mx-4 text-admin"
+  />
+
+  <!-- Owner filters (only if showAll and admin) -->
+  <v-autocomplete
+    v-if="showAll"
+    v-model="ownersSelected"
+    :items="ownersItems"
+    item-title="display"
+    item-value="ownerKey"
+    class="mt-2 mx-4 text-admin"
+    density="compact"
+    label="Propriétaire"
+    rounded="xl"
+    variant="outlined"
+    chips
+    clearable
+    closable-chips
+    hide-details
+    multiple
+  />
 </template>
 
 <script setup lang="ts">
@@ -181,7 +174,7 @@ type InstalledPlugin = {
 const installedPluginsFetch = useFetch<{ results: InstalledPlugin[], count: number }>(`${$apiPath}/plugins?privateAccess=${processingsProps.ownerFilter}`)
 const installedPlugins = computed(() => installedPluginsFetch.data.value?.results)
 
-const notifUrl = computed(() => {
+const eventsSubscribeUrl = computed(() => {
   const topics = [
     { key: 'processings:processing-finish-ok', title: 'Un traitement s\'est terminé sans erreurs' },
     { key: 'processings:processing-finish-error', title: 'Un traitement a échoué' },
diff --git a/ui/src/pages/admin/plugins.vue b/ui/src/pages/admin/plugins.vue
index 4bca01da..94e020c4 100644
--- a/ui/src/pages/admin/plugins.vue
+++ b/ui/src/pages/admin/plugins.vue
@@ -331,7 +331,7 @@
     >
       <v-toolbar
         :title="result.distTag === 'latest' ? result.name : result.name + ' (' + result.distTag + ')'"
-        dense
+        density="compact"
         flat
       >
         <template #append>
diff --git a/ui/src/pages/dev.vue b/ui/src/pages/dev.vue
index a35aa138..2ba33140 100644
--- a/ui/src/pages/dev.vue
+++ b/ui/src/pages/dev.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-app-bar
-    flat
-    dense
-    class="px-0 main-app-bar"
-  >
+  <v-app-bar flat>
     <v-toolbar-items>
       <v-btn
         variant="text"
diff --git a/ui/src/pages/processings/[id]/index.vue b/ui/src/pages/processings/[id]/index.vue
index aa9e9cbb..daaaf5cb 100644
--- a/ui/src/pages/processings/[id]/index.vue
+++ b/ui/src/pages/processings/[id]/index.vue
@@ -53,7 +53,7 @@
     />
   </v-container>
 
-  <layout-actions v-if="processing">
+  <navigation-right v-if="processing">
     <processing-actions
       :processing="processing"
       :processing-schema="processingSchema"
@@ -64,7 +64,7 @@
       :metadata="plugin?.metadata"
       @triggered="runs && runs.refresh()"
     />
-  </layout-actions>
+  </navigation-right>
 </template>
 
 <script setup lang="ts">
@@ -79,6 +79,7 @@ import timeZones from 'timezones.json'
 import Vjsf, { type Options as VjsfOptions } from '@koumoul/vjsf'
 import { v2compat } from '@koumoul/vjsf/compat/v2'
 import { toCRON } from '@data-fair/processings-shared/runs.ts'
+import NavigationRight from '@data-fair/lib-vuetify/navigation-right.vue'
 
 const { t } = useI18n()
 const route = useRoute<'/processings/[id]/'>()
diff --git a/ui/src/pages/processings/index.vue b/ui/src/pages/processings/index.vue
index 46fa57d4..929dc1ad 100644
--- a/ui/src/pages/processings/index.vue
+++ b/ui/src/pages/processings/index.vue
@@ -3,6 +3,7 @@
     data-iframe-height
     style="min-height:500px"
   >
+    <!-- Skeleton loader-->
     <v-row
       v-if="processingsFetch.loading.value"
       class="d-flex align-stretch"
@@ -22,13 +23,22 @@
         />
       </v-col>
     </v-row>
+    <!-- No processings created -->
+    <span
+      v-else-if="!processingsFetch.data.value?.results.length"
+      class="d-flex justify-center text-h6 mt-4"
+    >
+      {{ t('noProcessingsCreated') }}
+    </span>
+    <!-- No processings displayed (filters) -->
+    <span
+      v-else-if="!displayProcessings.length"
+      class="d-flex justify-center text-h6 mt-4"
+    >
+      {{ t('noProcessingsDisplayed') }}
+    </span>
+    <!-- List of catalogs -->
     <template v-else>
-      <v-list-subheader v-if="displayProcessings.length > 1">
-        {{ displayProcessings.length }}/{{ processingsFetch.data.value?.count }} traitements affichés
-      </v-list-subheader>
-      <v-list-subheader v-else>
-        {{ displayProcessings.length }}/{{ processingsFetch.data.value?.count }} traitement affiché
-      </v-list-subheader>
       <v-row class="d-flex align-stretch">
         <v-col
           v-for="processing in displayProcessings"
@@ -44,28 +54,30 @@
         </v-col>
       </v-row>
     </template>
-  </v-container>
 
-  <layout-actions v-if="processingsFetch.data.value">
-    <processings-actions
-      v-model:search="search"
-      v-model:show-all="showAll"
-      v-model:plugins-selected="plugins"
-      v-model:statuses-selected="statuses"
-      v-model:owners-selected="owners"
-      :admin-mode="!!session.state.user?.adminMode"
-      :can-admin="canAdmin"
-      :facets="processingsFetch.data.value.facets"
-      :is-small="true"
-      :owner-filter="ownerFilter"
-      :processings="displayProcessings"
-    />
-  </layout-actions>
+    <navigation-right v-if="processingsFetch.data.value">
+      <processings-actions
+        v-model:search="search"
+        v-model:show-all="showAll"
+        v-model:plugins-selected="plugins"
+        v-model:statuses-selected="statuses"
+        v-model:owners-selected="owners"
+        :admin-mode="!!session.state.user?.adminMode"
+        :can-admin="canAdmin"
+        :facets="processingsFetch.data.value.facets"
+        :is-small="true"
+        :owner-filter="ownerFilter"
+        :processings="displayProcessings"
+      />
+    </navigation-right>
+  </v-container>
 </template>
 
 <script setup lang="ts">
 import type { Processing } from '#api/types'
+import NavigationRight from '@data-fair/lib-vuetify/navigation-right.vue'
 
+const { t } = useI18n()
 const session = useSessionAuthenticated(() => new Error('Authentification nécessaire'))
 const showAll = useBooleanSearchParam('showAll')
 const search = useStringSearchParam('q')
@@ -73,8 +85,6 @@ const plugins = useStringsArraySearchParam('plugin')
 const statuses = useStringsArraySearchParam('status')
 const owners = useStringsArraySearchParam('owner')
 
-onMounted(() => setBreadcrumbs([{ text: 'Traitements' }]))
-
 /*
   Permissions
 */
@@ -136,7 +146,28 @@ const displayProcessings = computed(() => {
   return processings.filter(processing => processing.title.toLowerCase().includes(search.value.toLowerCase()))
 })
 
+watch(
+  [() => processingsFetch.data.value?.count, () => displayProcessings.value.length],
+  ([count, displayed]) => {
+    setBreadcrumbs([{ text: t('processingDisplayed', { count: count ?? 0, displayed }) }])
+  },
+  { immediate: true }
+)
+
 </script>
 
+<i18n lang="yaml">
+  en:
+    processingDisplayed: No processings | {displayed}/{count} processing displayed | {displayed}/{count} processings displayed
+    noProcessingsCreated: You haven't created any processings yet.
+    noProcessingsDisplayed: No results match the search criteria.
+
+  fr:
+    processingDisplayed: Aucun traitement | {displayed}/{count} traitement affiché | {displayed}/{count} traitements affichés
+    noProcessingsCreated: Vous n'avez pas encore créé de traitement.
+    noProcessingsDisplayed: Aucun résultat ne correspond aux critères de recherche.
+
+</i18n>
+
 <style scoped>
 </style>
diff --git a/ui/src/pages/processings/new.vue b/ui/src/pages/processings/new.vue
index a1d20712..7f12b545 100644
--- a/ui/src/pages/processings/new.vue
+++ b/ui/src/pages/processings/new.vue
@@ -7,7 +7,8 @@
   >
     <v-stepper
       v-model="step"
-      hide-actions
+      style="background-color: transparent"
+      flat
     >
       <v-stepper-header>
         <v-stepper-item
@@ -41,7 +42,6 @@
                   :key="plugin.id"
                   md="3"
                   sm="4"
-                  xs="6"
                   cols="12"
                 >
                   <v-card
@@ -74,28 +74,32 @@
           <v-text-field
             v-model="newProcessing.title"
             label="Titre"
+            hide-details
           />
           <owner-pick
             v-model="newProcessing.owner"
             v-model:ready="ownersReady"
           />
+        </v-stepper-window-item>
+      </v-stepper-window>
+
+      <v-stepper-actions
+        v-if="step !== '1'"
+        prev-text="Précédent"
+        @click:prev="step = '1'"
+      >
+        <template #next>
           <v-btn
+            color="primary"
+            variant="flat"
             :disabled="!ownersReady || !newProcessing.title || !newProcessing.plugin"
             :loading="createProcessing.loading.value"
-            color="primary"
             @click="createProcessing.execute()"
           >
             Créer
           </v-btn>
-          <v-btn
-            :disabled="createProcessing.loading.value"
-            variant="text"
-            @click="step = '1'"
-          >
-            Retour
-          </v-btn>
-        </v-stepper-window-item>
-      </v-stepper-window>
+        </template>
+      </v-stepper-actions>
     </v-stepper>
   </v-container>
 </template>

From 962c8dcb53f4fb141961ff50c3e88e1eac70f70b Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 9 Feb 2026 11:44:42 +0100
Subject: [PATCH 5/7] fix: build.json path

---
 api/src/admin/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/admin/router.ts b/api/src/admin/router.ts
index a0e7bd80..260525fa 100644
--- a/api/src/admin/router.ts
+++ b/api/src/admin/router.ts
@@ -16,7 +16,7 @@ router.use(async (req, res, next) => {
 
 let info = { version: process.env.NODE_ENV }
 if (process.env.NODE_ENV === 'production') {
-  info = JSON.parse(await readFile(resolve(import.meta.dirname, '../../BUILD.json'), 'utf8'))
+  info = JSON.parse(await readFile(resolve(import.meta.dirname, '../../../BUILD.json'), 'utf8'))
 }
 router.get('/info', (req, res) => {
   res.send(info)

From 16388e45424367aebd4066ca87d91154309d8f7e Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Wed, 25 Feb 2026 17:23:58 +0100
Subject: [PATCH 6/7] chore: replace tooltip by titles

---
 .../components/processing/processing-card.vue | 14 ++++------
 ui/src/pages/processings/[id]/index.vue       | 26 +++++++++----------
 .../pages/processings/[id]/runs/[runId].vue   |  2 +-
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/processing/processing-card.vue b/ui/src/components/processing/processing-card.vue
index 616d610b..980572da 100644
--- a/ui/src/components/processing/processing-card.vue
+++ b/ui/src/components/processing/processing-card.vue
@@ -6,16 +6,12 @@
     <v-card-item class="text-primary">
       <!-- Processing title -->
       <template #title>
-        <span class="font-weight-bold">
-          {{ processing.title || processing._id }}
+        <span
+          :title="processing.title"
+          class="font-weight-bold"
+        >
+          {{ processing.title }}
         </span>
-        <v-tooltip
-          v-if="processing.title && processing.title.length > 15"
-          activator="parent"
-          location="top left"
-          open-delay="300"
-          :text="processing.title"
-        />
       </template>
 
       <!-- Owner -->
diff --git a/ui/src/pages/processings/[id]/index.vue b/ui/src/pages/processings/[id]/index.vue
index daaaf5cb..7a2fe079 100644
--- a/ui/src/pages/processings/[id]/index.vue
+++ b/ui/src/pages/processings/[id]/index.vue
@@ -51,20 +51,20 @@
       :processing="processing"
       class="mt-4"
     />
-  </v-container>
 
-  <navigation-right v-if="processing">
-    <processing-actions
-      :processing="processing"
-      :processing-schema="processingSchema"
-      :can-admin="canAdminProcessing"
-      :can-exec="canExecProcessing"
-      :edited="edited"
-      :is-small="false"
-      :metadata="plugin?.metadata"
-      @triggered="runs && runs.refresh()"
-    />
-  </navigation-right>
+    <navigation-right v-if="processing">
+      <processing-actions
+        :processing="processing"
+        :processing-schema="processingSchema"
+        :can-admin="canAdminProcessing"
+        :can-exec="canExecProcessing"
+        :edited="edited"
+        :is-small="false"
+        :metadata="plugin?.metadata"
+        @triggered="runs && runs.refresh()"
+      />
+    </navigation-right>
+  </v-container>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/src/pages/processings/[id]/runs/[runId].vue b/ui/src/pages/processings/[id]/runs/[runId].vue
index 7f3ae056..e951cc59 100644
--- a/ui/src/pages/processings/[id]/runs/[runId].vue
+++ b/ui/src/pages/processings/[id]/runs/[runId].vue
@@ -144,7 +144,7 @@ onMounted(async () => {
     text: fetchedRun.processing.title,
     to: `/processings/${fetchedRun.processing._id}`
   }, {
-    text: 'exécution'
+    text: 'Exécution',
   }])
   loading.value = false
 })

From ee42e114cb1edec901960d3b4746c9c8e329824a Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Thu, 26 Feb 2026 08:58:24 +0100
Subject: [PATCH 7/7] fix: simple-directory docker image

---
 docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index bdbb688b..d138fca4 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,7 +17,7 @@ services:
     profiles:
       - dev
       - test
-    image: ghcr.io/data-fair/simple-directory:master
+    image: ghcr.io/data-fair/simple-directory:8
     network_mode: host
     depends_on:
       - mongo