@antelopejs/dms-marketing 0.6.1 → 0.7.0

package/frontend-vue/i18n/locales/marketing-fr-FR.json

@@ -105,8 +105,8 @@
           "name": "Avis de collecte en pause"
         },
         "context": {
-          "description": "Choisit le site et la période que lisent tous les blocs de la page.",
-          "name": "Barre site et période"
+          "description": "Affiche les blocs de la page une fois un site choisi, ou les guides de démarrage et d'installation.",
+          "name": "Accès au site"
         },
         "devices": {
           "description": "Sessions par type d'appareil.",
@@ -168,6 +168,10 @@
           "description": "Les pages suivies et leurs heatmaps de clics et de défilement.",
           "name": "Pages et heatmaps"
         },
+        "period": {
+          "description": "La période et la comparaison que lisent tous les blocs de la page.",
+          "name": "Période"
+        },
         "quality": {
           "description": "Taux de rebond, durée moyenne de session et pages par session.",
           "name": "Qualité des sessions"
@@ -196,6 +200,10 @@
           "description": "La part des pages vues qui enregistrent les clics.",
           "name": "Échantillonnage"
         },
+        "toolbar": {
+          "description": "La barre de la page : le site, Direct / Pause et la période que lisent tous les blocs de la page.",
+          "name": "Barre site et période"
+        },
         "tops": {
           "description": "Contenu, acquisition, audience et événements personnalisés.",
           "name": "Classements"
@@ -232,13 +240,17 @@
           "description": "Sessions par jour, ou par heure sur une seule journée.",
           "name": "Sessions dans le temps"
         },
+        "website_picker": {
+          "description": "Choisit le site que lisent tous les blocs de la page, avec son état de suivi.",
+          "name": "Choix du site"
+        },
         "website_waiting": {
           "description": "Affichée tant que le site n'a envoyé aucune page vue, avec un lien vers le guide d'installation.",
           "name": "Alerte première page vue"
         },
-        "websites_grid": {
-          "description": "Les sites suivis et leurs paramètres.",
-          "name": "Sites"
+        "websites_table": {
+          "name": "Sites",
+          "description": "Les sites suivis en cartes, chacune ouvrant ses paramètres."
         }
       },
       "builder": {
@@ -332,7 +344,7 @@
         "window_max": "Max {max} h",
         "window_presets": {
           "1": "1 h",
-          "24": "Toute la session"
+          "24": "24 h"
         },
         "step_matched_as": "Cherché comme {path}",
         "step_unseen": "Aucun événement brut ne lui correspond ces 30 derniers jours : les funnels comptent les événements bruts, pas les statistiques journalières ci-contre"
@@ -376,40 +388,34 @@
       },
       "context": {
         "add_website": "Ajouter un site",
-        "comparisons": {
-          "none": "Sans comparaison",
-          "previous-period": "vs période précédente",
-          "previous-year": "vs année précédente"
-        },
         "error": {
           "description": "Le suivi continue et rien n'est perdu. Réessayez dans un instant.",
           "title": "Impossible de charger vos sites"
         },
         "idle": "Dernier événement {ago}",
         "imported": "Historique importé · dernier événement {ago}",
+        "just_now": "à l'instant",
         "label": "Site et période",
         "live": "En direct · dernier événement {ago}",
         "no_website": "Aucun site pour l'instant",
-        "presets": {
-          "custom": "Personnalisée",
-          "last-30-days": "30 j",
-          "last-7-days": "7 j",
-          "last-90-days": "90 j",
-          "today": "Aujourd'hui"
-        },
         "range_cut": "Seuls les {days} derniers jours de cette plage sont affichés.",
-        "refresh": "Actualiser",
         "state": {
           "imported": "Historique importé uniquement",
           "live": "En direct",
           "paused": "Suivi en pause pour ce site",
           "waiting": "En attente du premier événement"
         },
+        "state_short": {
+          "imported": "Importé",
+          "live": "En direct",
+          "paused": "En pause",
+          "waiting": "En attente"
+        },
         "switch_error": "Impossible de passer sur ce site",
         "switch_website": "Changer de site",
         "utc_days": "Les statistiques sont comptées par jour UTC : chaque jour affiché ici commence à {time}, heure locale.",
-        "vs_previous": "vs période précédente",
         "vs_previous_short": "vs précédente",
+        "vs_previous_year_short": "vs année précédente",
         "waiting_guide": {
           "action": "Ouvrir le guide d'installation",
           "description": "Ajoutez le traceur au site, puis ouvrez une de ses pages : les premiers chiffres apparaissent ici en moins d'une minute.",
@@ -427,6 +433,7 @@
         "xr": "Casque XR"
       },
       "errors": {
+        "dashboard_website_kept": "C'est le site du tableau de bord lui-même : il ne peut pas être supprimé. Mettez son suivi en pause ou purgez ses données à la place.",
         "duplicate_host": "Un autre site de cet espace déclare déjà cet hôte.",
         "duplicate_host_named": "{site} déclare déjà {host} : un hôte n'appartient qu'à un site de l'espace.",
         "duplicate_experiment_key": "Un autre test A/B de ce site utilise déjà cette clé.",
@@ -451,7 +458,8 @@
         },
         "snapshot_retention_above_raw": "Les instantanés de page ne peuvent pas durer plus longtemps que les événements bruts : ils survivraient aux clics qu'ils illustrent.",
         "statistics_retention_below_raw": "Les statistiques ne peuvent pas durer moins longtemps que les événements bruts : funnels et résultats A/B perdraient les sessions de leurs événements.",
-        "website_not_found": "Ce site n'existe pas ou appartient à un autre espace de travail."
+        "website_not_found": "Ce site n'existe pas ou appartient à un autre espace de travail.",
+        "workspace_not_found": "Cet espace n'existe pas, n'a pas de suivi du tableau de bord, ou vous n'avez pas accès à ses données."
       },
       "experiment": {
         "colours_note": "Chaque variante garde sa couleur partout : A est neutre, B a la couleur principale. Le vert et le rouge ne signifient qu'un verdict.",
@@ -724,6 +732,7 @@
         "coverage": {
           "period_title": "Les funnels ne couvrent cette période qu'à partir du {date}",
           "previous_title": "Pas de comparaison avec la période précédente",
+          "previous_year_title": "Pas de comparaison avec l'année précédente",
           "description": "Les funnels sont calculés sur les événements bruts, conservés à partir du {date} : les jours antérieurs ne comptent rien, et une période de comparaison qu'ils ne couvrent pas est écartée plutôt qu'affichée comme une énorme variation."
         }
       },
@@ -902,7 +911,6 @@
         },
         "list_truncated": "Seules les {count} premières pages sont listées. Filtrez, ou saisissez un chemin, pour en trouver une autre.",
         "missing_hint": "Une page manque ? Saisissez son chemin exact ci-dessus.",
-        "more_list": "Autres actions de la liste",
         "most_clicked": "Les plus cliqués",
         "most_clicked_empty": "Aucun élément ancré pour l'instant : les clics s'affichent seulement sur la page.",
         "no_match": {
@@ -923,7 +931,12 @@
           "all_masked": "Tout le texte est masqué",
           "approximate_layout": "Instantané {layout} affiché à {width} px",
           "approximate_layout_hint": "Aucun instantané n'a encore été pris à cette largeur : la mise en page est recalculée. Les clics restent sur leur élément.",
+          "captured_from": "depuis {url}",
+          "captured_from_hint": "La page sur laquelle l'instantané a été pris. Sa chaîne de requête et son fragment ne sont jamais conservés : ils peuvent contenir des jetons ou des adresses.",
+          "drift": "{share} des clics visent des éléments absents de cet instantané",
+          "drift_hint": "La page a peut-être changé depuis le {date}. Ces clics sont placés là où ils sont tombés dans la page, pas sur leur élément. Réinitialiser la page efface ses clics et son instantané pour repartir de la version actuelle.",
           "enable_snapshots": "Activer les instantanés de page",
+          "end_of_page": "Fin de la page",
           "fields_masked": "Texte visible, champs de formulaire masqués",
           "layout": "Format",
           "layout_desktop": "Ordinateur",
@@ -942,12 +955,15 @@
           "overflow_hint": "L'instantané se dispose sur {width} px. La heatmap suit le document et reste donc alignée ; l'instantané, lui, peut être coupé.",
           "oversized": "Page trop haute pour un aperçu fidèle",
           "oversized_hint": "Le document dépasse la plus grande surface dessinable : la heatmap et l'instantané ne coïncident plus. Les chiffres de clics ne sont pas affectés.",
+          "snapshot_settings": "Réglages des instantanés",
           "snapshots_enabled": "Instantanés de page",
           "snapshots_off": "Les instantanés de page sont désactivés pour ce site",
           "snapshots_off_hint": "Les clics et défilements sont toujours comptés, mais la heatmap ne se dessine que par-dessus un instantané de la page telle que les visiteurs la voient : son texte et ses images sont alors stockés, tous les champs de formulaire masqués, pendant la rétention des instantanés fixée dans les réglages du module. Activez-le si c'est compatible avec les engagements de confidentialité de ce site.",
           "status_line": "Instantané du {date} · {layout} {width} px",
+          "strip_details": "Pourquoi cet avertissement",
           "too_heavy": "Page trop lourde pour un instantané",
-          "too_heavy_hint": "La dernière page vue échantillonnée a sérialisé {size} Mio de HTML et de CSS, au-delà du plafond d'envoi de {limit} Mio : cette page n'a donc pas d'instantané. Les chiffres de clics et de défilement ci-dessus n'en sont pas affectés. Un nouvel essai a lieu chaque jour : un balisage plus léger — ou une section lourde marquée data-dms-marketing-block — la ramène sous le plafond."
+          "too_heavy_hint": "L'instantané de la dernière page vue échantillonnée pesait {size} Mio à l'envoi (compressé quand le navigateur le permet), au-delà du plafond de {limit} Mio : cette page n'a donc pas d'instantané. Les chiffres de clics et de défilement ci-dessus n'en sont pas affectés. Un nouvel essai a lieu chaque jour : un balisage plus léger — ou une section lourde marquée data-dms-marketing-block — la ramène sous le plafond, et l'option snapshotMaxBytes du module relève le plafond.",
+          "workspace_masked": "Page d'un autre espace : tout le texte est masqué"
         },
         "reset": {
           "and": "{first} et {second}",
@@ -962,13 +978,16 @@
           "page_description": "Supprime les clics, profondeurs de défilement et instantanés de cette page, quelle que soit la période. Saisissez son chemin pour confirmer.",
           "page_done": "Heatmap de la page réinitialisée",
           "page_title": "Réinitialiser la heatmap de cette page ?",
-          "site_button": "Réinitialiser toutes les heatmaps…",
-          "site_description": "Supprime tous les clics, profondeurs de défilement et instantanés de page du site, quelle que soit la période. Saisissez le domaine pour confirmer.",
-          "site_done": "Heatmaps de {name} réinitialisées",
-          "site_title": "Réinitialiser les heatmaps de {name} ?",
           "snapshots": "{count} instantané | {count} instantanés"
         },
         "row_clicks": "{count} clic | {count} clics",
+        "row_snapshot": {
+          "none": "Pas d'instantané",
+          "none_title": "Pas encore d'instantané : la prochaine visite échantillonnée en prendra un",
+          "title": "Instantané du {date} · {layouts} | Instantanés jusqu'au {date} · {layouts}",
+          "too_heavy": "Trop lourde",
+          "too_heavy_title": "Page trop lourde pour un instantané (essai du {date})"
+        },
         "row_views": "{count} vue | {count} vues",
         "sampled_unit": "vue échantillonnée | vues échantillonnées",
         "sampling_note": "Clics et défilements ont été enregistrés sur {rate} des pages vues sur cette période.",
@@ -1007,6 +1026,16 @@
           "description": "Les pages et heatmaps apparaissent dès que le traceur est sur le site et qu'une première page est chargée.",
           "title": "{website} n'a encore envoyé aucune page vue"
         },
+        "workspace": {
+          "all": "Tous les espaces",
+          "all_hint": "{count} espace combiné | {count} espaces combinés",
+          "combined_note": "Combiné sur {count} espace, en lecture seule. Les instantanés s'affichent avec leur texte masqué. | Combiné sur {count} espaces, en lecture seule. Les instantanés s'affichent avec leur texte masqué.",
+          "label": "Espace :",
+          "note_label": "À propos de cette vue",
+          "other_note": "Tableau de bord d'un autre espace, en lecture seule. Les instantanés s'affichent avec leur texte masqué.",
+          "switch": "Changer l'espace dont les heatmaps sont lues",
+          "yours": "Votre espace"
+        },
         "quoted": "« {text} »"
       },
       "quick_actions": {
@@ -1069,13 +1098,17 @@
         },
         "column": {
           "domain": "Domaine",
-          "name": "Nom"
+          "name": "Nom",
+          "tracking": "Suivi",
+          "snapshots": "Instantanés de page",
+          "created": "Ajouté"
         },
         "create": "Ajouter un site",
         "delete": {
           "action": "Supprimer le site…",
           "confirm": "Supprimer le site",
           "description": "Tout ce qui a été suivi sur ce site disparaît, pour toutes les périodes. Saisissez le domaine pour confirmer.",
+          "dashboard_kept": "C'est le site du tableau de bord lui-même, que le module suit tout seul : il ne peut pas être supprimé. Mettez son suivi en pause ou purgez ses données à la place.",
           "done": "{name} supprimé",
           "funnels": "Funnels et leurs tests A/B",
           "impact_error": "Impossible de lister ce que la suppression de ce site effacerait.",
@@ -1088,14 +1121,38 @@
           "snapshots": "Instantanés de page",
           "title": "Supprimer {name} ?"
         },
+        "purge": {
+          "all_action": "Purger toutes les données…",
+          "all_confirm": "Purger toutes les données",
+          "all_description": "Tout ce qui a été collecté sur ce site disparaît, pour toutes les périodes : pages vues, sessions, statistiques quotidiennes, clics, profondeurs de défilement, instantanés, expositions A/B et historique importé. Le site, ses réglages et ses funnels restent ; leurs résultats repartent de zéro. Saisissez le domaine pour confirmer.",
+          "all_done": "Données de {name} purgées",
+          "all_hint": "Tout ce qui a été collecté : trafic, sessions, heatmaps, expositions A/B et historique importé.",
+          "all_title": "Purger toutes les données de {name} ?",
+          "done_all_counts": "Supprimé : {events} événements, {sessions} sessions et {snapshots} instantanés.",
+          "done_heatmaps_counts": "Supprimé : {events} clics et profondeurs de défilement, et {snapshots} instantanés.",
+          "heatmap_events": "Clics et profondeurs de défilement, depuis le début",
+          "heatmaps_action": "Purger les heatmaps…",
+          "heatmaps_confirm": "Purger les heatmaps",
+          "heatmaps_description": "Les clics, profondeurs de défilement et instantanés de toutes les pages disparaissent, pour toutes les périodes : les nombres de clics retombent à zéro partout. Pages vues, sessions et funnels sont conservés. Saisissez le domaine pour confirmer.",
+          "heatmaps_done": "Heatmaps de {name} purgées",
+          "heatmaps_hint": "Clics, profondeurs de défilement et instantanés de toutes les pages. Le trafic est conservé.",
+          "heatmaps_title": "Purger les heatmaps de {name} ?",
+          "kept": "Le site, ses réglages, ses funnels et ses tests A/B sont conservés",
+          "kept_traffic": "Pages vues, sessions, funnels et tests A/B sont conservés",
+          "section": "Purger les données collectées",
+          "section_description": "Le site garde ses réglages, ses funnels et ses tests A/B ; leurs résultats repartent de zéro."
+        },
         "description": "Les sites qui envoient des données à cet espace, leur traceur et ce qui est enregistré sur chacun.",
-        "drawer": {
-          "added": "ajouté le {date}",
-          "capture": "Instantanés",
-          "close": "Fermer",
-          "danger": "Zone de danger",
-          "eyebrow": "Site",
-          "general": "Général"
+        "discard_confirm": {
+          "title": "Supprimer les instantanés du site ?",
+          "description": "Modifier cette option supprime l'instantané de page du site. Les clics et la profondeur de défilement sont conservés ; les prochaines visites échantillonnées recaptureront les pages. | Modifier cette option supprime les {count} instantanés de page du site. Les clics et la profondeur de défilement sont conservés ; les prochaines visites échantillonnées recaptureront les pages.",
+          "description_unknown": "Modifier cette option supprime les instantanés de page existants du site. Les clics et la profondeur de défilement sont conservés ; les prochaines visites échantillonnées recaptureront les pages.",
+          "confirm": "Modifier et supprimer",
+          "cancel": "Garder les instantanés",
+          "cancel_none": "Annuler",
+          "confirm_none": "Modifier",
+          "description_none": "Le site ne détient encore aucun instantané. Les prochaines visites échantillonnées prendront ses pages avec le nouveau réglage.",
+          "title_none": "Modifier les réglages d'instantané du site ?"
         },
         "error": "Impossible de charger les sites",
         "fields": {
@@ -1124,6 +1181,7 @@
         "save_error": "Le site n'a pas pu être enregistré.",
         "saved": "Site enregistré",
         "snapshots": "Instantanés de page",
+        "snapshots_edit": "Réglages des instantanés de page de {name}",
         "snapshots_masked": "Actives · texte masqué",
         "snapshots_off": "Désactivées",
         "snapshots_on": "Actives · texte visible",
@@ -1144,7 +1202,25 @@
         "edit_named": "Paramètres du site {name}",
         "snippet_named": "Balise du traceur du site {name}",
         "open_overview_named": "Ouvrir la vue d'ensemble du site {name}",
-        "finish_install_named": "Terminer l'installation du site {name}"
+        "finish_install_named": "Terminer l'installation du site {name}",
+        "search": "Rechercher un site",
+        "menu_named": "Actions pour {name}",
+        "edit": "Paramètres",
+        "no_match": "Aucun site ne correspond à ces filtres.",
+        "count": "{count} site | {count} sites",
+        "modal": {
+          "title": "Paramètres du site",
+          "general": "Général",
+          "danger": "Zone de danger",
+          "added": "ajouté le {date}"
+        },
+        "create_modal": {
+          "title": "Ajouter un site",
+          "description": "Nommez le site et son domaine ; le guide d'installation vous donne ensuite la balise à coller."
+        }
+      },
+      "live": {
+        "new_events": "{count} nouvel événement | {count} nouveaux événements"
       }
     }
   }

package/frontend-vue/package.json

@@ -7,7 +7,7 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.6.5",
   "engines": {
-    "@antelopejs/dms-frontend": ">=0.6.3 <0.8.0"
+    "@antelopejs/dms-frontend": ">=0.8.0 <0.9.0"
   },
   "scripts": {
     "dev": "pnpm --dir ../playground frontend:dev",

package/frontend-vue/tests/anchor-drift.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import {
+  anchorDrift,
+  DRIFT_MIN_CLICKS,
+  DRIFT_MIN_SHARE,
+} from '../app/utils/anchor-drift'
+
+const anchor = (selector: string, nth = 0) => ({ selector, nth })
+const gone = new Set(['#old-cta\u00000', '.card\u00002'])
+const isMissing = (a: { selector: string; nth: number }) =>
+  gone.has(`${a.selector}\u0000${a.nth}`)
+
+describe('anchor drift', () => {
+  it('counts the clicks whose element the snapshot lacks, by weight', () => {
+    const drift = anchorDrift(
+      [
+        { weight: 40, anchor: anchor('#buy') },
+        { weight: 6, anchor: anchor('#old-cta') },
+        { weight: 4, anchor: anchor('.card', 2) },
+        // Same selector, an nth the snapshot still has.
+        { weight: 10, anchor: anchor('.card', 1) },
+        // A click on the document itself cannot drift.
+        { weight: 100 },
+      ],
+      isMissing,
+    )
+    expect(drift).toEqual({
+      anchored: 60,
+      missing: 10,
+      share: 10 / 60,
+      significant: true,
+    })
+  })
+
+  it('warns from 10 % and 5 clicks, not below either', () => {
+    expect(DRIFT_MIN_SHARE).toBe(0.1)
+    expect(DRIFT_MIN_CLICKS).toBe(5)
+    const at = (missing: number, kept: number) =>
+      anchorDrift(
+        [
+          { weight: missing, anchor: anchor('#old-cta') },
+          { weight: kept, anchor: anchor('#buy') },
+        ],
+        isMissing,
+      ).significant
+    expect(at(5, 45)).toBe(true) // 10 %, 5 clicks
+    expect(at(5, 46)).toBe(false) // under 10 %
+    expect(at(4, 0)).toBe(false) // 100 %, but 4 clicks
+  })
+
+  it('reads no drift without anchored clicks', () => {
+    expect(anchorDrift([{ weight: 9 }], isMissing)).toEqual({
+      anchored: 0,
+      missing: 0,
+      share: 0,
+      significant: false,
+    })
+  })
+})

package/frontend-vue/tests/build-flags.test.ts

@@ -0,0 +1,38 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The DMS builds the module's frontend with Vite alone, not Nuxt: Nuxt's
+ * `import.meta.client` / `import.meta.server` are undefined there, so a branch
+ * on them never runs in the browser (nor on the server). The context gate's
+ * client-navigation wait was dead code that way. Vite's `import.meta.env.SSR`
+ * is the flag both sides define. Checked on the sources themselves so a new
+ * file cannot bring the Nuxt flags back.
+ */
+
+const APP = fileURLToPath(new URL('../app', import.meta.url))
+const ROOT = fileURLToPath(new URL('..', import.meta.url))
+const NUXT_FLAG = /import\.meta\.(client|server|browser|dev|prerender)\b/
+
+function sources(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) {
+      return sources(path)
+    }
+    return /\.(vue|ts)$/.test(entry.name) ? [path] : []
+  })
+}
+
+describe('build flags', () => {
+  it('reads no Nuxt-only import.meta flag', () => {
+    const files = [...sources(APP), join(ROOT, 'dms.frontend.ts')]
+    const offending = files
+      .filter((file) => NUXT_FLAG.test(readFileSync(file, 'utf8')))
+      .map((file) => relative(ROOT, file).replaceAll('\\', '/'))
+    expect(files.length).toBeGreaterThan(0)
+    expect(offending).toEqual([])
+  })
+})

package/frontend-vue/tests/context-bar.test.ts

@@ -0,0 +1,226 @@
+import {
+  computed,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  type Ref,
+} from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import Context from '../app/components/Context.vue'
+import WebsitePicker from '../app/components/WebsitePicker.vue'
+import type { MarketingContextPayload } from '../app/composables/useMarketingContext'
+
+const route = vi.hoisted(() => ({ query: {} as Record<string, string> }))
+
+vi.mock('#dms/frontend-module', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  useDmsRoute: () => ({ query: route.query, path: '/' }),
+  useDmsRouter: () => ({ push: async () => {}, replace: async () => {} }),
+}))
+
+const NOW = Date.UTC(2026, 9, 16, 12)
+
+const CONTEXT: MarketingContextPayload = {
+  websites: [
+    {
+      id: 'acme-shop',
+      name: 'Acme Shop',
+      domain: 'shop.example.com',
+      state: 'live',
+      lastActivityAt: NOW - 60_000,
+    },
+  ],
+  selectedId: 'acme-shop',
+}
+
+let contextData: Ref<MarketingContextPayload | null>
+let readOptions: Record<string, unknown>
+let paused: Ref<boolean>
+let liveRefreshes: Array<{
+  refresh: () => void
+  options: Record<string, unknown>
+}>
+let topicHandlers: Map<string, (event: object) => void>
+let blockRefreshes: number
+let contextReads: number
+
+beforeEach(() => {
+  vi.useFakeTimers({ now: NOW })
+  contextData = ref(CONTEXT)
+  readOptions = {}
+  paused = ref(false)
+  liveRefreshes = []
+  topicHandlers = new Map()
+  blockRefreshes = 0
+  contextReads = 0
+  route.query = {}
+  vi.stubGlobal(
+    'useApiData',
+    (_url: unknown, options: Record<string, unknown> = {}) => {
+      readOptions = options
+      return {
+        data: contextData,
+        error: ref(null),
+        status: ref('success'),
+        refresh: async () => {
+          contextReads += 1
+        },
+        then: (resolve: (value: undefined) => void) => resolve(undefined),
+      }
+    },
+  )
+  vi.stubGlobal('useAuthFetch', () => ({ $authFetch: async () => ({}) }))
+  vi.stubGlobal('useToast', () => ({ add: () => {} }))
+  vi.stubGlobal('useDmsState', (_key: string, init: () => unknown) =>
+    ref(init()),
+  )
+  vi.stubGlobal('usePeriodScope', () =>
+    ref({
+      range: {
+        from: new Date(NOW - 30 * 86_400_000),
+        to: new Date(NOW + 3_600_000),
+      },
+    }),
+  )
+  vi.stubGlobal('usePageLive', () => ({
+    isPaused: computed(() => paused.value),
+  }))
+  vi.stubGlobal('refreshLivePageBlocks', () => {
+    blockRefreshes += 1
+  })
+  vi.stubGlobal(
+    'usePageLiveRefresh',
+    (refresh: () => void, options: Record<string, unknown> = {}) => {
+      liveRefreshes.push({ refresh, options })
+      return {
+        missed: computed(() => 0),
+        trigger: () => {},
+        refreshNow: refresh,
+      }
+    },
+  )
+  vi.stubGlobal(
+    'useRealtimeTopic',
+    (topic: string, handler: (event: object) => void) => {
+      topicHandlers.set(topic, handler)
+    },
+  )
+  vi.stubGlobal('readerTimeZone', () => 'UTC')
+  vi.stubGlobal('usePageToolbarSize', () => ({ size: computed(() => 'sm') }))
+  vi.stubGlobal('withQuery', (path: string) => path)
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+const slot = (name: string) =>
+  defineComponent({
+    name,
+    inheritAttrs: false,
+    setup:
+      (_props, { slots }) =>
+      () =>
+        h('div', slots.default?.()),
+  })
+
+const TOPIC = 'marketing.events'
+
+async function render(
+  component: object,
+  props: Record<string, unknown> = {},
+): Promise<string> {
+  const app = createSSRApp(
+    defineComponent({
+      setup: () => () =>
+        h(component, props, { default: () => h('main', 'blocks') }),
+    }),
+  )
+  for (const name of [
+    'UDropdownMenu',
+    'UButton',
+    'USkeleton',
+    'UIcon',
+    'UTooltip',
+    'DmsEmptyState',
+    'DmsMarketingFirstRun',
+  ]) {
+    app.component(name, slot(name))
+  }
+  return renderToString(app)
+}
+
+const renderPicker = (props: Record<string, unknown> = {}) =>
+  render(WebsitePicker, { realtimeTopic: TOPIC, ...props })
+
+describe('the website picker of the page toolbar', () => {
+  it("shows the website's state as a dot and the age of its last event", async () => {
+    const html = await renderPicker()
+    expect(html).toContain('Acme Shop')
+    // The full line is the tooltip and the accessible name.
+    expect(html).toContain('aria-label="page.marketing.context.live"')
+    expect(html).toMatch(/>1 min\.? ago</)
+  })
+
+  it("says when the reader's days start in the state's name, not in a chip", async () => {
+    vi.stubGlobal('readerTimeZone', () => 'Europe/Brussels')
+    const html = await renderPicker()
+    expect(html).toContain(
+      'aria-label="page.marketing.context.live. page.marketing.context.utc_days"',
+    )
+    expect(html).not.toMatch(/>\s*UTC\s*</)
+  })
+
+  it('names no website before there is one', async () => {
+    contextData.value = { websites: [], selectedId: null }
+    const html = await renderPicker()
+    expect(html).toContain('page.marketing.context.no_website')
+    expect(html).not.toContain('data-website-picker')
+  })
+
+  it("reads the websites' last events through the page's live gate, on no clock", async () => {
+    await renderPicker()
+    expect(readOptions.refreshOnPageRefresh).toBe(false)
+    expect(readOptions).not.toHaveProperty('refreshInterval')
+    const [contextLive] = liveRefreshes
+    expect(liveRefreshes).toHaveLength(1)
+    expect(contextLive?.options).toEqual({ realtimeTopic: TOPIC })
+    contextLive?.refresh()
+    expect(contextReads).toBe(1)
+    // Nothing of its own ticks the blocks.
+    await vi.advanceTimersByTimeAsync(5 * 60_000)
+    expect(blockRefreshes).toBe(0)
+    expect(topicHandlers.size).toBe(0)
+  })
+})
+
+describe('the context gate', () => {
+  it('draws no toolbar of its own: the page declares it', async () => {
+    route.query = { website: 'acme-shop' }
+    const html = await render(Context)
+    expect(html).toContain('blocks')
+    expect(html).not.toContain('Acme Shop')
+    expect(liveRefreshes).toHaveLength(0)
+  })
+
+  it('sits 16px under the page toolbar, not 24px as the page stack', async () => {
+    route.query = { website: 'acme-shop' }
+    const html = await render(Context)
+    expect(html).toMatch(/^<div class="-mt-2 flex flex-col gap-4"/)
+  })
+
+  it('holds the blocks until the URL names the website', async () => {
+    const html = await render(Context)
+    expect(html).not.toContain('blocks')
+  })
+
+  it('shows the first-run hero without a website', async () => {
+    contextData.value = { websites: [], selectedId: null }
+    const html = await render(Context)
+    expect(html).not.toContain('blocks')
+  })
+})