@tekkare/romulus 0.1.243 → 0.1.245

package/layer/app/components/layout/tool/alerts.vue

@@ -0,0 +1,969 @@
+<!--
+  Panneau « Alertes » du rail.
+
+  Une alerte surveille le perimetre d'une vue sauvegardee et signale ce qui y
+  apparait, y change ou en sort. Le panneau vit dans le cadre, comme celui des
+  vues : il ne connait pas la page, c'est `useAlertSource` qui lui dit ce que
+  l'ecran sait surveiller.
+
+  Une alerte ne peut naitre que depuis la page qu'elle surveille : elle part
+  avec la requete Elasticsearch de l'ecran, que l'API ne sait pas
+  reconstruire. Le bouton reste donc visible partout, avec la raison sous lui
+  quand il ne peut rien faire.
+-->
+<script setup lang="ts">
+import { sameViewPage } from "../../../utils/viewPages";
+import { ALERT_BRAND_DIRECTORY, alertEventSourceLabel, alertProjectPath } from "#oip-app/alerts";
+import { oipSnackbar } from "#oip-app/ui";
+import type {
+  RmAlert,
+  RmAlertDraft,
+  RmAlertEvent,
+  RmAlertMenuItem,
+} from "@tekkare/romulus/utils/alerts";
+import type { Alert } from "#oip-app/api";
+import { rmFilterOptions, rmFilterOptionsQuery } from "@tekkare/romulus/utils/filterOptions";
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const alerts = useAlerts();
+const source = useAlertSource();
+const views = useViews();
+
+const lang = computed<"fr" | "en">(() => (locale.value === "en" ? "en" : "fr"));
+
+/** Le magasin de scopes de la page affichee, comme dans le panneau des vues. */
+const store = () => views.scopes.value();
+
+/**
+ * Les vues enregistrees de cette page : le choix offert par la modale.
+ *
+ * La vue active en tete : le formulaire preselectionne la premiere, et
+ * l'alerte doit porter par defaut la vue que l'ecran affiche, pas une autre.
+ */
+const pageViews = computed(() => {
+  const page = views.current.value?.page;
+  if (!page) return [];
+  const list: { id: string; title: string }[] = store()
+    .scopeList.value.filter((scope: any) => sameViewPage(scope.page, page))
+    .map((scope: any) => ({ id: String(scope.id), title: String(scope.title) }));
+  const activeId = alerts.watchableView.value?.id;
+  return [...list.filter((view) => view.id === activeId), ...list.filter((view) => view.id !== activeId)];
+});
+
+/**
+ * L'ecran porte des filtres qui pourraient devenir une vue.
+ *
+ * Sans eux, proposer « ecran actuel » creerait une vue vide, donc une alerte
+ * sur tout l'index.
+ */
+const canSaveScreen = computed(
+  () => (views.current.value?.criteria?.().length ?? 0) > 0,
+);
+const tab = ref<"active" | "paused" | "events">("active");
+// Ouverture du formulaire : etat partage (cf. useAlerts), pour que la visite
+// guidee puisse l'ouvrir elle-meme. Il est remis a faux au demontage, sinon
+// rouvrir la tuile rouvrirait la modale laissee ouverte.
+const creating = alerts.creating;
+/** Alerte en cours de modification, quand la modale sert a editer. */
+const editing = ref<Alert | null>(null);
+const submitting = ref(false);
+const events = ref<RmAlertEvent[]>([]);
+/** Compte rendu du dernier passage lance a la main, en mode d'essai. */
+const lastRun = ref<string | null>(null);
+
+/**
+ * Marques proposees dans la modale, pour une alerte de produit.
+ *
+ * Elles viennent du repertoire des marques, le meme index que le panneau de
+ * selection de produits du portail : une alerte de produit ne depend d'aucune
+ * page, elle ne peut donc pas se servir du catalogue de l'ecran.
+ */
+const brandOptions = ref<string[]>([]);
+const brandsLoading = ref(false);
+/** Numero de la derniere recherche partie : une reponse plus ancienne est ignoree. */
+let brandSearchSeq = 0;
+
+/**
+ * Champs interroges par la recherche de marques.
+ *
+ * Une ligne du repertoire porte a la fois la marque, la molecule, la classe
+ * et le laboratoire. Chercher sur les quatre et n'agreger que la marque, c'est
+ * ce qui fait les synonymes : « pembrolizumab » sort KEYTRUDA, « L01FF » sort
+ * les anti-PD-1, « MSD » sort le portefeuille du laboratoire. La regle vient
+ * du panneau de selection du portail, elle n'est pas propre aux alertes.
+ */
+const brandSearchFields = computed(() => ALERT_BRAND_DIRECTORY.searchFields(locale.value === "en" ? "en" : "fr"));
+
+async function searchBrands(input: string) {
+  // La liste du montage et celle de la marque de la page partent en parallele :
+  // sans ce compteur, la derniere reponse arrivee ecrasait la derniere demandee.
+  const seq = ++brandSearchSeq;
+  brandsLoading.value = true;
+  try {
+    const res: any = await ALERT_BRAND_DIRECTORY.search(
+      rmFilterOptionsQuery({
+        field: ALERT_BRAND_DIRECTORY.field,
+        search: brandSearchFields.value,
+        input,
+      }),
+    );
+    if (seq !== brandSearchSeq) return;
+    brandOptions.value = rmFilterOptions(res).map((option) => option.value);
+  } finally {
+    if (seq === brandSearchSeq) brandsLoading.value = false;
+  }
+}
+
+// Une premiere liste des le montage : un selecteur vide donne l'impression
+// qu'il n'y a rien a choisir.
+onMounted(() => searchBrands(""));
+
+/**
+ * La marque que la page met en avant, confrontee au repertoire.
+ *
+ * Une fiche produit nomme sa marque, l'ecran de recherche nomme ce qui a ete
+ * cherche : ce sont des candidats, pas des marques. « pembrolizumab » ne
+ * designe aucune ligne du repertoire, et cocher un terme absent ferait une
+ * alerte qui ne rapporte jamais rien. On ne pre-coche donc que sur egalite
+ * exacte ; sinon le selecteur s'ouvre quand meme filtre sur le terme, et
+ * « pembrolizumab » y liste KEYTRUDA.
+ */
+const brandCandidate = computed(() => source.brands.value[0] ?? "");
+const suggestedBrands = ref<string[]>([]);
+
+watch(
+  brandCandidate,
+  async (term) => {
+    suggestedBrands.value = [];
+    if (!term) return;
+    await searchBrands(term);
+    // Le terme a pu changer pendant l'aller-retour : la reponse d'avant
+    // cocherait la marque de la page precedente.
+    if (brandCandidate.value !== term) return;
+    const hit = brandOptions.value.find(
+      (option) => option.toLowerCase() === term.toLowerCase(),
+    );
+    suggestedBrands.value = hit ? [hit] : [];
+  },
+  { immediate: true },
+);
+
+// Relecture a chaque ouverture du panneau : l'etat d'une alerte bouge cote
+// worker, pas cote ecran. S'en tenir au premier chargement de la session
+// laissait une carte annoncer « en préparation » longtemps apres l'echec de
+// son passage.
+onMounted(async () => {
+  await alerts.load(true);
+  alerts.followSeeding();
+});
+
+/** Dates lisibles : les composants ne mettent rien en forme eux-memes. */
+function when(value: string | null | undefined): string | null {
+  if (!value) return null;
+  return new Date(value).toLocaleDateString(locale.value === "en" ? "en-GB" : "fr-FR", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+function whenExact(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "en" ? "en-GB" : "fr-FR", {
+    day: "numeric",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+/**
+ * Libelles des champs suivis, tels que la page les nomme.
+ *
+ * La sentinelle `*` ne designe aucun champ du catalogue : elle dit qu'on
+ * compare le document entier. L'ecrire telle quelle laissait une etoile nue
+ * dans la carte. Une alerte d'une autre page ne trouve rien dans la source de
+ * l'ecran : le catalogue commun des champs prend le relais.
+ */
+const fieldLabel = (field: string) => {
+  if (field === "*") {
+    return lang.value === "en" ? "All fields" : "Tous les champs";
+  }
+  return (
+    source.current.value?.fields.find((entry) => entry.value === field)?.label ??
+    alertFieldLabel(field, null, t, locale.value).label
+  );
+};
+
+/**
+ * Ou ranger chaque alerte dans la liste.
+ *
+ * Trois cas, et pas deux : une alerte de marque suit tout le hub, donc elle
+ * couvre aussi la page affichee. La ranger dans « autres pages » serait faux,
+ * la ranger dans « cette page » ferait croire qu'elle s'y limite.
+ */
+const pageAlertIds = computed(
+  () => new Set(alerts.forCurrentPage.value.map((alert) => alert.id)),
+);
+
+const GROUPS = {
+  fr: {
+    page: "Cette page",
+    hub: "Marques suivies partout",
+    project: "Projets suivis",
+    other: "Autres pages",
+    elsewhere: "Autres applications",
+  },
+  en: {
+    page: "This page",
+    hub: "Brands watched everywhere",
+    project: "Watched projects",
+    other: "Other pages",
+    elsewhere: "Other applications",
+  },
+};
+
+function groupOf(alert: Alert): "page" | "hub" | "project" | "other" | "elsewhere" {
+  // Avant tout le reste : une alerte de marque posee ailleurs suit les index
+  // de son app, pas ceux de ce hub.
+  if (!alerts.fromThisApp(alert)) return "elsewhere";
+  if (alert.kind === "product") return "hub";
+  if (alert.kind === "project") return "project";
+  return pageAlertIds.value.has(alert.id) ? "page" : "other";
+}
+
+/** La page affichee d'abord : c'est la reponse a « qu'est-ce qui veille ici ». */
+const GROUP_ORDER = { page: 0, hub: 1, project: 2, other: 3, elsewhere: 4 };
+
+/** Les autres apps restent consultables, repliees en bas de liste. */
+const collapsedGroups = computed(() => [GROUPS[lang.value].elsewhere]);
+
+/** Les alertes de la page en tete, sans quoi les sections s'entrelaceraient. */
+const sorted = computed(() =>
+  [...alerts.alerts.value].sort(
+    (a, b) => GROUP_ORDER[groupOf(a)] - GROUP_ORDER[groupOf(b)],
+  ),
+);
+
+const cards = computed<RmAlert[]>(() =>
+  sorted.value.map((alert) => ({
+    id: alert.id,
+    title: alert.title,
+    kind: alert.kind,
+    // Une alerte de produit ne surveille pas une vue : la carte annonce ses
+    // marques a la place.
+    viewTitle:
+      alert.kind === "product"
+        ? alert.brands.join(", ")
+        : alert.kind === "project"
+          ? alert.projectTitle
+          : alert.pulseTitle,
+    status: alert.status,
+    triggers: alert.triggers,
+    watchedLabels: alert.watchedFields.map(fieldLabel),
+    channels: alert.channels,
+    cadence: alert.channels.includes("email") ? alert.cadence : undefined,
+    trackedCount: alert.trackedCount,
+    unreadCount: alert.unreadCount,
+    lastError: alert.lastError,
+    lastErrorKind: alert.lastErrorKind,
+    lastErrorCount: alert.lastErrorCount,
+    maxTracked: alert.maxTracked,
+    reseededAt: when(alert.reseededAt),
+    createdLabel: when(alert.createdAt),
+    lastEventLabel: when(alert.lastRunAt),
+    shared: alert.visibility === "workspace",
+    isOwner: alert.isOwner,
+    group: GROUPS[lang.value][groupOf(alert)],
+  })),
+);
+
+/**
+ * Le journal, toutes alertes confondues.
+ *
+ * L'API rend les evenements par alerte : le panneau les rassemble lui-meme.
+ * Avec une poignee d'alertes c'est une poignee d'appels, et ca evite une
+ * route de plus tant que la fonctionnalite n'a pas prouve son usage.
+ */
+function toEventCard(event: any, alertTitle: string) {
+  return {
+    id: event.id,
+    kind: event.kind,
+    title: event.title,
+    subtitle: event.subtitle,
+    // Le moteur libelle avec les noms de la donnee : le chemin est relu ici,
+    // avec les mots de l'app. Les evenements deja en base en profitent, leur
+    // libelle etant fige au moment ou ils ont ete rapportes.
+    // Les cles techniques ne se montrent pas : un identifiant interne qui
+    // bouge n'apprend rien et noie la ligne d'a cote. Le moteur ne les
+    // rapporte plus, ce filtre vaut pour ce qui est deja journalise.
+    changes: (event.changes ?? [])
+      .filter((change: any) => !isAlertNoiseField(change.field))
+      .map((change: any) => ({
+        ...change,
+        ...alertFieldLabel(change.field, change.label, t, locale.value),
+        before: alertChangeValue(change.before, t, locale.value),
+        after: alertChangeValue(change.after, t, locale.value),
+      })),
+    dateLabel: whenExact(event.detectedAt),
+    // Une alerte de marque traverse tout le hub : sans la provenance, la carte
+    // dit qu'il s'est passe quelque chose sans dire ou aller le lire.
+    source: alertEventSourceLabel(event.docId, t, lang.value),
+    alertTitle,
+    read: event.read,
+    detectedAt: event.detectedAt,
+  };
+}
+
+/**
+ * Une carte vide ne se montre pas.
+ *
+ * Un evenement journalise avant le filtre des cles techniques peut n'avoir
+ * plus aucune ligne a montrer : « MODIFIE » suivi de rien n'est pas une
+ * information. Une apparition ou une sortie de perimetre, elles, se suffisent
+ * a leur titre.
+ */
+function hasSomethingToSay(card: { kind: string; changes: unknown[] }): boolean {
+  return card.kind !== "changed" || card.changes.length > 0;
+}
+
+async function loadEvents() {
+  // Toutes les alertes, dans l'ordre des cartes : couper la liste brute a dix
+  // faisait taire des alertes au hasard de l'ordre de l'API.
+  const lists = await Promise.all(
+    // Le journal ne parle que de cette app, comme la pastille de la tuile.
+    sorted.value.filter(alerts.fromThisApp).map(async (alert) => {
+      const rows = await alerts.events(alert.id, 20);
+      return rows.map((event) => toEventCard(event, alert.title)).filter(hasSomethingToSay);
+    }),
+  );
+
+  events.value = lists
+    .flat()
+    .sort((a, b) => b.detectedAt.localeCompare(a.detectedAt))
+    .slice(0, 60);
+}
+
+watch(tab, (value) => {
+  if (value === "events") loadEvents();
+});
+
+/**
+ * Depliement d'une carte : ce que cette alerte, elle, a rapporte.
+ *
+ * Une seule a la fois. Le journal se lit alerte par alerte, et garder
+ * plusieurs listes ouvertes demanderait autant d'appels a chaque relecture
+ * pour un panneau deja long.
+ */
+const expandedId = ref<string | null>(null);
+const expandedEvents = ref<RmAlertEvent[]>([]);
+const expandedLoading = ref(false);
+
+async function onOpen(id: string) {
+  if (expandedId.value === id) {
+    expandedId.value = null;
+    return;
+  }
+  expandedId.value = id;
+  expandedEvents.value = [];
+  expandedLoading.value = true;
+  try {
+    const alert = alerts.alerts.value.find((entry) => entry.id === id);
+    const rows = await alerts.events(id, 20);
+    // L'alerte a pu etre repliee entre-temps : ecrire dans le vide y
+    // rouvrirait un journal que personne n'a demande.
+    if (expandedId.value !== id) return;
+    expandedEvents.value = rows
+      .map((event) => toEventCard(event, alert?.title ?? ""))
+      .filter(hasSomethingToSay);
+  } finally {
+    if (expandedId.value === id) expandedLoading.value = false;
+  }
+}
+
+const menu = computed<RmAlertMenuItem[]>(() => [
+  {
+    key: "edit",
+    label: lang.value === "en" ? "Edit" : "Modifier",
+    icon: "PencilSimple",
+  },
+  {
+    key: "toggle",
+    label: lang.value === "en" ? "Pause / resume" : "Mettre en pause ou réactiver",
+    icon: "Pause",
+  },
+  {
+    key: "read",
+    label: lang.value === "en" ? "Mark as read" : "Marquer comme lu",
+    icon: "Check",
+  },
+  // Mode d'essai seulement : derouler la chaine sans attendre le cron.
+  ...(alerts.testCadence.value
+    ? [
+        {
+          key: "run",
+          label: lang.value === "en" ? "Run now (test)" : "Lancer maintenant (essai)",
+          icon: "Play",
+        },
+        {
+          key: "simulate",
+          label:
+            lang.value === "en"
+              ? "Simulate a change on 2 sources (test)"
+              : "Simuler un changement sur 2 sources (essai)",
+          icon: "Flask",
+        },
+        {
+          key: "digest",
+          label: lang.value === "en" ? "Send my digest (test)" : "M’envoyer le digest (essai)",
+          icon: "Envelope",
+        },
+      ]
+    : []),
+  {
+    key: "delete",
+    label: lang.value === "en" ? "Delete" : "Supprimer",
+    icon: "Trash",
+    danger: true,
+  },
+]);
+
+async function onMenu({ key, id }: { key: string; id: string }) {
+  const alert = alerts.alerts.value.find((entry) => entry.id === id);
+  if (!alert) return;
+
+  if (key === "edit") {
+    // Une alerte de projet se regle sur la page du projet, pas dans le
+    // formulaire des vues : elle n'a ni vue ni marques a choisir.
+    if (alert.kind === "project" && alert.projectId) {
+      await navigateTo(localePath(alertProjectPath(alert.projectId)));
+      return;
+    }
+    editing.value = alert;
+    creating.value = true;
+    return;
+  }
+  if (key === "toggle") {
+    // Une alerte de projet ne se met pas en pause : elle couperait tous ses
+    // abonnes. Chacun arrete son propre suivi, depuis la page du projet.
+    if (alert.kind === "project" && alert.projectId) {
+      await navigateTo(localePath(alertProjectPath(alert.projectId)));
+      return;
+    }
+    await alerts.update(id, { status: alert.status === "paused" ? "active" : "paused" });
+    return;
+  }
+  if (key === "read") {
+    await alerts.markRead({ alertId: id });
+    return;
+  }
+  if (key === "run") {
+    const result = await alerts.runNow(id);
+    lastRun.value =
+      result.status === "refused"
+        ? (result.reason ?? "refusé")
+        : `${result.status} : ${result.trackedCount} suivis, ${result.events} évènement(s)`;
+    if (tab.value === "events") await loadEvents();
+    return;
+  }
+  if (key === "simulate") {
+    const result = await alerts.simulate(id, { kind: "changed", count: 1, sources: 2 });
+    lastRun.value =
+      result.status === "refused"
+        ? (result.reason ?? "refusé")
+        : `simulation sur ${result.sources.length} source(s) : ${result.events} évènement(s)`;
+    // Le journal de la carte est deja ouvert : le relire evite de replier
+    // puis rouvrir pour voir ce que la simulation vient de produire.
+    if (expandedId.value === id) {
+      expandedId.value = null;
+      await onOpen(id);
+    }
+    if (tab.value === "events") await loadEvents();
+    return;
+  }
+  if (key === "digest") {
+    const result = await alerts.sendDigestNow();
+    lastRun.value = `digest ${result.status} : ${result.eventCount} évènement(s)${
+      result.reason ? ` (${result.reason})` : ""
+    }`;
+    return;
+  }
+  if (key === "delete") {
+    await alerts.remove(id);
+  }
+}
+
+/**
+ * Poser a l'ecran la vue choisie dans la modale.
+ *
+ * Indispensable : la requete Elasticsearch part de la page, pas des criteres.
+ * Creer une alerte sur une vue non appliquee lui ferait porter les filtres de
+ * l'ecran sous le nom d'une autre vue.
+ */
+function applyView(id: string) {
+  const scope = store().scopeList.value.find((entry: any) => entry.id === id);
+  if (!scope) return;
+  // Copie volontaire, meme raison que dans le panneau des vues : les filtres
+  // se rejouent sur un changement de reference de `selectedScope`.
+  store().setSelectedScope({ ...scope });
+  views.applyPrefs(scope, views.current.value?.prefsScope);
+  views.current.value?.onApply?.(scope);
+}
+
+/**
+ * Attend que les filtres de l'ecran soient ceux de la vue qu'on vient
+ * d'appliquer.
+ *
+ * Les filtres se rejouent par des watchers, pas dans le meme tour : capturer
+ * la requete juste apres `applyView` pouvait encore lire l'ecran d'avant.
+ * Seuls les filtres comptent, pas le « Personnaliser » : c'est eux qui font
+ * la requete Elasticsearch. Rend faux si l'ecran ne rejoint jamais la vue, ce
+ * qui arrive quand la vue appartient a un autre onglet du meme chemin (les six
+ * onglets des avis HAS partagent leur page) : ses criteres ne s'appliquent a
+ * rien ici.
+ */
+async function settled(scope: any, attempts = 10): Promise<boolean> {
+  const wanted = viewSignature(viewHandFilters(parseViewCriteria(scope)));
+  const matches = () => viewSignature(viewHandFilters(views.criteriaOf())) === wanted;
+  for (let i = 0; i < attempts; i++) {
+    await nextTick();
+    if (matches()) return true;
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  return matches();
+}
+
+function notify(text: string) {
+  oipSnackbar([
+    { attribute: "isVisible", value: true },
+    { attribute: "text", value: text },
+    { attribute: "loader", value: false },
+    { attribute: "hasTimeOut", value: true },
+  ]);
+}
+
+/**
+ * Rearmer : repointer l'alerte sur la requete de SA vue, pas sur l'ecran.
+ *
+ * Le bouton sort sur toute alerte perimee des que la page sait construire une
+ * requete, y compris celles d'une autre page : envoyer la requete d'ici a une
+ * alerte de la-bas la ferait surveiller un autre index sous son ancien nom.
+ * Et sur la bonne page, l'ecran peut porter d'autres filtres que la vue : on
+ * applique la vue d'abord, puis on capture une fois les filtres rejoues.
+ */
+async function onRearm(id: string) {
+  const alert = alerts.alerts.value.find((entry) => entry.id === id);
+  if (!alert) return;
+
+  const here = alerts.forCurrentPage.value.some((entry) => entry.id === id);
+  const scope = here
+    ? store().scopeList.value.find((entry: any) => entry.id === alert.pulseId)
+    : null;
+  if (!scope) {
+    notify(
+      lang.value === "en"
+        ? "Open the page this alert watches to re-arm it."
+        : "Ouvrez la page que cette alerte surveille pour la réarmer.",
+    );
+    return;
+  }
+
+  applyView(scope.id);
+  if (!(await settled(scope))) {
+    notify(
+      lang.value === "en"
+        ? `Open the tab of the view “${scope.title}” to re-arm this alert.`
+        : `Ouvrez l’onglet de la vue « ${scope.title} » pour réarmer cette alerte.`,
+    );
+    return;
+  }
+
+  await alerts.rearm(id);
+}
+
+async function submit(draft: RmAlertDraft) {
+  submitting.value = true;
+  try {
+    // Modification : la vue ne bouge pas, donc la requete figee non plus.
+    // Seuls le titre, les declencheurs, les champs suivis et la remise
+    // partent a l'API, qui repose la reference si les champs ont change.
+    if (editing.value) {
+      // Les marques ne partent que si elles ont bouge : les renvoyer telles
+      // quelles remettrait l'alerte a zero pour rien.
+      const brandsBefore = [...(editing.value.brands ?? [])].sort().join("|");
+      const brandsAfter = [...draft.brands].sort().join("|");
+      await alerts.update(editing.value.id, {
+        title: draft.title,
+        triggers: draft.triggers,
+        watchedFields: draft.watchedFields,
+        // Les libelles viennent de la page surveillee : depuis une autre page,
+        // la source de l'ecran nomme d'autres champs, et un dictionnaire vide
+        // effacerait ceux que l'alerte porte deja.
+        ...(editingHere.value
+          ? {
+              fieldLabels: Object.fromEntries(
+                (source.current.value?.fields ?? [])
+                  .filter((field) => draft.watchedFields.includes("*") || draft.watchedFields.includes(field.value))
+                  .map((field: any) => [field.value, field.label]),
+              ),
+            }
+          : {}),
+        ...(editing.value.kind === "product" && brandsAfter !== brandsBefore
+          ? { brands: draft.brands }
+          : {}),
+        channels: draft.channels,
+        cadence: draft.cadence,
+      });
+      creating.value = false;
+      editing.value = null;
+      await alerts.load(true);
+      alerts.followSeeding();
+      return;
+    }
+
+    // « Ecran actuel » : la vue n'existe pas encore, on l'enregistre sous le
+    // nom de l'alerte avant de s'y accrocher. Une alerte de PRODUIT, elle,
+    // ne surveille aucune vue : lui en creer une laissait une vue fantome
+    // dans le panneau des vues, nommee comme l'alerte.
+    if (!draft.viewId && draft.kind !== "product") {
+      const page = views.current.value?.page;
+      // Les identifiants d'avant : la creation ne rend pas la vue, elle
+      // recharge la liste. Chercher par titre confondait deux vues homonymes.
+      const before = new Set(store().scopeList.value.map((scope: any) => scope.id));
+      await store().createScope({
+        title: draft.title,
+        // `criteriaOf` et non `criteria()` : la vue emporte aussi le
+        // « Personnaliser », comme celles du panneau Mes vues et de la pastille.
+        criteria: views.criteriaOf(),
+        currentPage: page,
+      });
+      const created = store()
+        .scopeList.value.filter((scope: any) => sameViewPage(scope.page, page))
+        .find((scope: any) => !before.has(scope.id));
+      if (!created) return;
+      applyView(created.id);
+      // Laisser les watchers de filtres de la page rejouer avant la capture.
+      await settled(created);
+    } else if (draft.kind !== "product" && draft.viewId !== alerts.watchableView.value?.id) {
+      // Vue nommee sans avoir ete appliquee (preselection du formulaire, ou
+      // vue d'un autre onglet de la meme page) : la requete part de l'ecran,
+      // elle doit donc etre celle de cette vue. Meme garde que le rearmement.
+      const scope = store().scopeList.value.find((entry: any) => entry.id === draft.viewId);
+      if (!scope) {
+        notify(
+          lang.value === "en"
+            ? "This view no longer exists. Pick another one."
+            : "Cette vue n’existe plus. Choisissez-en une autre.",
+        );
+        return;
+      }
+      applyView(scope.id);
+      if (!(await settled(scope))) {
+        notify(
+          lang.value === "en"
+            ? `Open the tab of the view “${scope.title}” to create this alert.`
+            : `Ouvrez l’onglet de la vue « ${scope.title} » pour créer cette alerte.`,
+        );
+        return;
+      }
+    }
+
+    const alert = await alerts.create(draft);
+    // Rien de cree (vue ou requete manquante) : fermer sans rien dire
+    // laissait croire que l'alerte existait.
+    if (!alert) {
+      notify(
+        lang.value === "en"
+          ? "The alert could not be created. Save a view on this page first."
+          : "L’alerte n’a pas pu être créée. Enregistrez d’abord une vue sur cette page.",
+      );
+      return;
+    }
+    creating.value = false;
+  } finally {
+    submitting.value = false;
+  }
+}
+
+/**
+ * Pourquoi le bouton ne peut rien faire, quand il ne peut rien faire. Deux
+ * raisons distinctes, et l'utilisateur ne peut agir que sur la seconde.
+ */
+const createHint = computed(() => {
+  if (alerts.canCreate.value) return "";
+  // Ni requete d'ecran, ni vue : la page n'offre aucune prise. Les autres cas
+  // se debloquent en enregistrant une vue, y compris celui d'une page de
+  // ventes, ou seule l'alerte de marque est possible.
+  if (!source.current.value && !views.current.value) {
+    return lang.value === "en"
+      ? "This page cannot be watched yet. Open a page that offers saved views."
+      : "Cette page ne se surveille pas encore. Ouvrez une page qui propose des vues sauvegardées.";
+  }
+  return lang.value === "en"
+    ? "Save the current view first: an alert is attached to a view, not to a screen."
+    : "Enregistrez d’abord la vue affichée : une alerte s’accroche à une vue, pas à un écran.";
+});
+
+const modalTitle = computed(() => {
+  if (editing.value) return lang.value === "en" ? "Edit alert" : "Modifier l’alerte";
+  return lang.value === "en" ? "New alert" : "Nouvelle alerte";
+});
+
+/**
+ * Les marques que porte la vue affichee, posees d'avance dans le formulaire.
+ *
+ * Evite de retaper a la main ce que l'ecran affiche deja. La liste part figee
+ * dans l'alerte : une vue retouchee plus tard ne l'entraine pas d'elle-meme,
+ * c'est le propre d'une alerte de marque, qui ne tient d'aucune page. Le
+ * report est propose a l'enregistrement de la vue, cf. useAlertBrandSync.
+ */
+const viewBrands = computed(() =>
+  viewBrandsFromCriteria(views.current.value?.criteria?.() ?? []),
+);
+
+/**
+ * L'alerte editee est-elle de cette page ? Sinon l'ecran ne connait ni ses
+ * champs ni leurs libelles : le formulaire ne propose rien a cocher.
+ */
+const editingHere = computed(
+  () => !!editing.value && alerts.forCurrentPage.value.some((entry) => entry.id === editing.value!.id),
+);
+
+/**
+ * L'alerte editee, dans la forme que le formulaire attend. `kind` et `brands`
+ * en font partie : sans eux, une alerte de produit s'editait comme une vue.
+ */
+const editingDraft = computed(() =>
+  editing.value
+    ? {
+        title: editing.value.title,
+        // Une alerte de projet n'arrive jamais ici : « Modifier » mene a la
+        // page du projet (cf. `onMenu`).
+        kind: editing.value.kind === "product" ? ("product" as const) : ("view" as const),
+        brands: editing.value.brands ?? [],
+        triggers: editing.value.triggers,
+        watchedFields: editing.value.watchedFields,
+        channels: editing.value.channels,
+        cadence: editing.value.cadence as "daily" | "weekly" | "monthly",
+      }
+    : undefined,
+);
+
+/**
+ * Ce dont le formulaire part.
+ *
+ * En modification, l'alerte elle-meme. En creation, les marques de la vue,
+ * et seulement la ou la page ne livre pas de requete : ailleurs l'alerte de
+ * vue reste le choix par defaut, et pre-cocher des marques la ferait
+ * basculer en alerte de produit sans que personne l'ait demande.
+ */
+const initialDraft = computed(() => {
+  if (editing.value) return editingDraft.value;
+  // La marque de la page l'emporte : elle est ce que l'ecran montre, et une
+  // page qui en nomme une n'a de toute facon pas de vue a surveiller.
+  if (suggestedBrands.value.length) {
+    const brands = suggestedBrands.value;
+    return {
+      kind: "product" as const,
+      brands,
+      // Le formulaire ne nomme l'alerte que sur un changement de marque, et
+      // ici les marques arrivent deja posees : sans ce titre, le champ reste
+      // vide et le bouton refuse.
+      title: `${lang.value === "en" ? "Watch" : "Veille"} ${brands.join(", ")}`,
+    };
+  }
+  if (source.current.value || viewBrands.value.length === 0) return undefined;
+  // Meme titre que ci-dessus : sans vue en base, `viewTitle` est vide et le
+  // formulaire refuserait un brouillon sans nom.
+  return {
+    kind: "product" as const,
+    brands: viewBrands.value,
+    title: `${lang.value === "en" ? "Watch" : "Veille"} ${viewBrands.value.join(", ")}`,
+  };
+});
+
+/** Fermer remet la modale a zero : sinon la suivante rouvre sur l'ancienne. */
+function close(open = false) {
+  creating.value = open;
+  if (!open) editing.value = null;
+}
+
+/**
+ * Le formulaire s'ecarte de sa reference de depart (cf. `update:dirty` de
+ * RmAlertForm). Fermer sans le dire perdrait une alerte a moitie composee.
+ */
+const formDirty = ref(false);
+const confirmingClose = ref(false);
+
+function requestClose() {
+  if (formDirty.value) {
+    confirmingClose.value = true;
+    return;
+  }
+  close(false);
+}
+
+function onModalUpdate(open: boolean) {
+  if (open) {
+    close(true);
+    return;
+  }
+  requestClose();
+}
+
+function cancelConfirmClose() {
+  confirmingClose.value = false;
+}
+
+function discardClose() {
+  confirmingClose.value = false;
+  formDirty.value = false;
+  close(false);
+}
+
+// L'etat d'ouverture est partage (la visite guidee l'ouvre) : il faut donc le
+// refermer avec le panneau, sans quoi la modale ressortirait a la prochaine
+// ouverture de la tuile.
+onBeforeUnmount(() => close(false));
+
+/**
+ * Les alertes de cette page peuvent etre rearmees ici, parce que l'ecran sait
+ * reconstruire leur requete. Ailleurs, le bouton n'apparait pas.
+ */
+const onWatchedPage = computed(
+  () => !!source.current.value && alerts.forCurrentPage.value.length > 0,
+);
+</script>
+
+<template>
+  <div>
+    <RmAlerts
+      v-model:tab="tab"
+      :alerts="cards"
+      :collapsed-groups="collapsedGroups"
+      :events="events"
+      :menu="menu"
+      :loading="alerts.loading.value"
+      :can-create="alerts.canCreate.value"
+      :create-hint="createHint"
+      :on-watched-page="onWatchedPage"
+      :expanded-id="expandedId"
+      :expanded-events="expandedEvents"
+      :expanded-loading="expandedLoading"
+      :lang="lang"
+      @open="onOpen"
+      @create="editing = null; creating = true"
+      @rearm="onRearm"
+      @menu="onMenu"
+      @read-all="alerts.markRead({}).then(() => alerts.load(true))"
+    />
+
+    <p v-if="lastRun" class="alerts_test_run">
+      {{ lang === "en" ? "Test run" : "Passage d’essai" }} : {{ lastRun }}
+    </p>
+
+    <!-- Large plutot que moyenne : le formulaire empile sept sections, et les
+         libelles de champ (« Dernier mouvement de prix (date) ») se coupaient
+         sur deux lignes a 640px. -->
+    <RmModal
+      :model-value="creating"
+      mode="free"
+      size="lg"
+      :label="modalTitle"
+      @update:model-value="onModalUpdate"
+    >
+      <template #header>{{ modalTitle }}</template>
+
+      <RmAlertForm
+        v-if="
+          source.current.value ||
+          editing ||
+          pageViews.length ||
+          source.brands.value.length ||
+          viewBrands.length
+        "
+        :key="editing?.id ?? 'new'"
+        :mode="editing ? 'edit' : 'create'"
+        :initial="initialDraft"
+        :view-title="
+          editing
+            ? (editing.kind === 'view' ? editing.pulseTitle ?? '' : '')
+            : alerts.watchableView.value?.title ?? ''
+        "
+        :views="pageViews"
+        :can-save-screen="canSaveScreen"
+        :fields="editing && !editingHere ? [] : source.current.value?.fields ?? []"
+        :submitting="submitting"
+        :brand-options="brandOptions"
+        :brands-loading="brandsLoading"
+        :max-brands="
+          alerts.alerts.value.find((entry) => entry.kind === 'product')?.maxBrands ?? 20
+        "
+        :can-watch-view="!!source.current.value"
+        :test-cadence="alerts.testCadence.value"
+        :lang="lang"
+        @select-view="applyView"
+        @search-brands="searchBrands"
+        @submit="submit"
+        @cancel="requestClose"
+        @update:dirty="formDirty = $event"
+      />
+    </RmModal>
+
+    <!-- Un brouillon d'alerte non enregistre se perd a la fermeture : la
+         modale n'en garde rien entre deux ouvertures. -->
+    <RmModal
+      v-model="confirmingClose"
+      size="sm"
+      mode="free"
+      :label="lang === 'en' ? 'Close without saving?' : 'Fermer sans enregistrer ?'"
+    >
+      <template #header>
+        {{ lang === "en" ? "Close without saving?" : "Fermer sans enregistrer ?" }}
+      </template>
+      <p class="alerts_confirm_text">
+        {{
+          lang === "en"
+            ? "This alert isn't saved. It will be lost if you close now."
+            : "Cette alerte n’est pas enregistrée. Elle sera perdue si vous fermez maintenant."
+        }}
+      </p>
+      <template #footer>
+        <div class="alerts_confirm_actions">
+          <RmButton variant="secondary" @click="cancelConfirmClose">
+            {{ lang === "en" ? "Cancel" : "Annuler" }}
+          </RmButton>
+          <RmButton variant="danger" prefix-icon="Trash" @click="discardClose">
+            {{ lang === "en" ? "Close without saving" : "Fermer sans enregistrer" }}
+          </RmButton>
+        </div>
+      </template>
+    </RmModal>
+  </div>
+</template>
+
+<style scoped>
+/* Compte rendu du mode d'essai : volontairement sobre, il ne fait pas partie
+   du produit et ne sortira jamais en production. */
+.alerts_test_run {
+  margin: 10px 0 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--bg-surface-3);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.alerts_confirm_text {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.alerts_confirm_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>