@antelopejs/dms-marketing 0.3.2 → 0.4.0

package/frontend-vue/app/components/PagePreview.vue

@@ -4,14 +4,27 @@ import { useI18n } from '#dms/frontend-module'
 import { useLatestRequest } from '../composables/useLatestRequest'
 import {
   useMarketingApi,
+  type MarketingPeriod,
   type MarketingHeatmap,
   type MarketingPageSnapshotResponse,
   type MarketingScrollDepth,
   type MarketingSnapshotLayout,
   type MarketingWebsite,
   type MarketingWebsitePatch,
+  type MarketingFunnelListItem,
 } from '../composables/useMarketingApi'
+import { funnelLink, settingsLink } from '../composables/useMarketingRoutes'
+import { formatNumber, formatShortDate } from '../utils/format'
 import {
+  heatmapDataLabel,
+  heatmapResetImpact,
+} from '../utils/heatmap'
+import { heatLegendGradient } from '../utils/heatmapPalette'
+import {
+  DEFAULT_RENDER_HEIGHT,
+  MAX_RENDER_HEIGHT,
+  MAX_RENDER_WIDTH,
+  MIN_RENDER_HEIGHT,
   useSnapshotFrame,
   type AnchorBox,
   type AnchorRequest,
@@ -53,18 +66,29 @@ import { rewriteViewportUnits } from '../utils/snapshotViewportUnits'
 const props = defineProps<{
   website: MarketingWebsite | null
   path: string
-  period: string
-  /** Share of visits capturing clicks — why a quiet page looks empty. */
-  sampleRate: number
+  /** Days the counts cover — the context bar's period scope. */
+  period: MarketingPeriod
+  /**
+   * Measured share of the site's page loads sampled for clicks, written for
+   * a sentence — why a quiet page looks empty. Null while too few pageviews
+   * tell it.
+   */
+  sampleRateLabel: string | null
   trackerEnabled: boolean
   /** Pageviews of this path over the window, for the sampling hint. */
   pageviews?: number
   /** Bumped by the parent when it resets clicks out from under this view. */
   refreshToken?: number
+  /** Funnels with a page step on this path. */
+  usedIn?: MarketingFunnelListItem[]
 }>()
 
 /** The site's snapshot options were changed here; the parent owns the row. */
-const emit = defineEmits<{ 'website-updated': [] }>()
+const emit = defineEmits<{
+  'website-updated': []
+  /** The page lost its clicks: the inventory counts them too. */
+  'heatmap-reset': []
+}>()
 
 interface LayoutPreset {
   width: number
@@ -79,9 +103,24 @@ interface LayoutPreset {
  * breakpoints already dress as desktop — the button would repeat 1280.
  */
 const LAYOUT_PRESETS: LayoutPreset[] = [
-  { width: 1280, layout: 'desktop', icon: 'i-ph-monitor', labelKey: 'page.marketing.pages.preview.layout_desktop' },
-  { width: 768, layout: 'tablet', icon: 'i-ph-device-tablet', labelKey: 'page.marketing.pages.preview.layout_tablet' },
-  { width: 390, layout: 'phone', icon: 'i-ph-device-mobile', labelKey: 'page.marketing.pages.preview.layout_phone' },
+  {
+    width: 1280,
+    layout: 'desktop',
+    icon: 'i-ph-monitor',
+    labelKey: 'page.marketing.pages.preview.layout_desktop',
+  },
+  {
+    width: 768,
+    layout: 'tablet',
+    icon: 'i-ph-device-tablet',
+    labelKey: 'page.marketing.pages.preview.layout_tablet',
+  },
+  {
+    width: 390,
+    layout: 'phone',
+    icon: 'i-ph-device-mobile',
+    labelKey: 'page.marketing.pages.preview.layout_phone',
+  },
 ]
 const DEFAULT_LAYOUT_WIDTH = 1280
 /** Viewport the snapshot is measured through when it recorded none. */
@@ -113,12 +152,6 @@ const {
     : null,
 )
 
-watch(
-  () => [props.website?._id, props.path, props.period, props.refreshToken],
-  () => void loadHeatmap(),
-  { immediate: true },
-)
-
 const points = computed(() => heatmap.value?.points ?? [])
 const maxWeight = computed(() => heatmap.value?.maxWeight ?? 0)
 const totalClicks = computed(() => heatmap.value?.totalClicks ?? 0)
@@ -127,6 +160,9 @@ const totalClicks = computed(() => heatmap.value?.totalClicks ?? 0)
 
 const overlayMode = ref<'clicks' | 'scroll'>('clicks')
 
+// Read with the clicks, not when its overlay opens: every sampled view
+// reports one depth, so its count is the page's sampled views the header
+// and the empty states speak of.
 const {
   data: scrollDepth,
   loading: loadingScroll,
@@ -138,34 +174,35 @@ const {
     : null,
 )
 
-/**
- * Lazy on purpose: nothing is fetched until the overlay is first opened,
- * then kept fresh against the same keys the click read watches. The key
- * comparison is what keeps a mere clicks↔scroll round trip from refetching.
- */
-let scrollLoadedKey = ''
-
-function ensureScrollDepth(): void {
-  if (overlayMode.value !== 'scroll') {
-    return
-  }
-  const key = [props.website?._id, props.path, props.period, props.refreshToken].join('|')
-  if (key === scrollLoadedKey) {
-    return
-  }
-  scrollLoadedKey = key
-  void loadScrollDepth()
-}
-
 watch(
-  () => [props.website?._id, props.path, props.period, props.refreshToken, overlayMode.value],
-  ensureScrollDepth,
+  () => [
+    props.website?._id,
+    props.path,
+    props.period?.range?.from.getTime(),
+    props.period?.range?.to.getTime(),
+    props.refreshToken,
+  ],
+  () => {
+    void loadHeatmap()
+    void loadScrollDepth()
+  },
   { immediate: true },
 )
 
 const scrollViews = computed(() => scrollDepth.value?.views ?? 0)
 const scrollReached = computed(() => scrollDepth.value?.reached ?? [])
 
+/** Deepest depth at least half of the sampled views reached. */
+const medianDepth = computed(() => {
+  const half = scrollViews.value / 2
+  for (let depth = scrollReached.value.length - 1; depth >= 0; depth--) {
+    if ((scrollReached.value[depth] ?? 0) >= half) {
+      return depth
+    }
+  }
+  return 0
+})
+
 /**
  * Where depth 0 sits on the drawn page: the bottom of the first screen.
  * Depth is a fraction of the visitor's scrollable range; the captured
@@ -185,38 +222,49 @@ const toast = useToast()
 const resetting = ref(false)
 
 /** Deletes the clicks, scrolls and snapshots of the page (every period),
- *  then refetches the proof for whichever overlay is showing. */
+ *  counted by the server before asking, then refetches both overlays. */
 async function resetPageHeatmap() {
   const website = props.website
   if (!website) {
     return
   }
-  const confirmed = await confirm({
+  const path = props.path
+  resetting.value = true
+  const counts = await api
+    .countHeatmap(website._id, path)
+    .catch(() => null)
+    .finally(() => (resetting.value = false))
+  await confirm({
     title: t('page.marketing.pages.reset.page_title'),
-    description: t('page.marketing.pages.reset.page_description', { path: props.path }),
-    confirmLabel: t('page.marketing.pages.reset.confirm'),
-    confirmColor: 'error',
+    description: t('page.marketing.pages.reset.page_description'),
+    color: 'error',
+    icon: 'i-ph-eraser',
+    confirmLabel:
+      counts && counts.events + counts.snapshots > 0
+        ? t('page.marketing.pages.reset.confirm_count', {
+            what: heatmapDataLabel(counts, t, locale.value),
+          })
+        : t('page.marketing.pages.reset.confirm'),
+    confirmText: path,
+    impact: heatmapResetImpact(counts, t, locale.value),
+    onConfirm: async () => {
+      resetting.value = true
+      try {
+        const deleted = await api.resetHeatmap(website._id, path)
+        toast.add({
+          color: 'success',
+          title: t('page.marketing.pages.reset.page_done'),
+          description: t('page.marketing.pages.reset.done', {
+            what: heatmapDataLabel(deleted, t, locale.value),
+          }),
+        })
+        emit('heatmap-reset')
+        await Promise.all([loadHeatmap(), loadScrollDepth(), loadSnapshot()])
+      } finally {
+        resetting.value = false
+      }
+    },
   })
-  if (!confirmed) {
-    return
-  }
-  resetting.value = true
-  try {
-    const { deleted } = await api.resetHeatmap(website._id, props.path)
-    toast.add({
-      color: 'success',
-      title: t('page.marketing.pages.reset.done', { count: deleted }, deleted),
-    })
-    scrollLoadedKey = ''
-    ensureScrollDepth()
-    await Promise.all([loadHeatmap(), loadSnapshot()])
-  }
-  catch {
-    toast.add({ color: 'error', title: t('page.marketing.pages.reset.error') })
-  }
-  finally {
-    resetting.value = false
-  }
 }
 
 // --- Snapshot ---------------------------------------------------------------
@@ -224,10 +272,14 @@ async function resetPageHeatmap() {
 const layoutWidth = ref(DEFAULT_LAYOUT_WIDTH)
 
 const layout = computed<MarketingSnapshotLayout>(
-  () => LAYOUT_PRESETS.find(preset => preset.width === layoutWidth.value)?.layout ?? 'desktop',
+  () =>
+    LAYOUT_PRESETS.find((preset) => preset.width === layoutWidth.value)
+      ?.layout ?? 'desktop',
 )
 
-const snapshotsEnabled = computed(() => props.website?.snapshotsEnabled ?? false)
+const snapshotsEnabled = computed(
+  () => props.website?.snapshotsEnabled ?? false,
+)
 
 // Not fetched while the site has snapshots off: the option's banner is the
 // whole story then, and a leftover capture must not contradict it.
@@ -242,7 +294,13 @@ const {
 )
 
 watch(
-  () => [props.website?._id, snapshotsEnabled.value, props.path, layout.value, props.refreshToken],
+  () => [
+    props.website?._id,
+    snapshotsEnabled.value,
+    props.path,
+    layout.value,
+    props.refreshToken,
+  ],
   () => void loadSnapshot(),
   { immediate: true },
 )
@@ -262,32 +320,25 @@ const frameDocument = computed(() =>
     : '',
 )
 const noSnapshotYet = computed(
-  () => snapshotsEnabled.value && snapshotSettled.value && snapshot.value === null,
+  () =>
+    snapshotsEnabled.value && snapshotSettled.value && snapshot.value === null,
+)
+const tooHeavy = computed(
+  () => snapshot.value !== null && backdrop.value === null,
 )
-const tooHeavy = computed(() => snapshot.value !== null && backdrop.value === null)
 const snapshotScheme = computed(() => snapshot.value?.colorScheme ?? 'light')
-const capturedAtLabel = computed(() => {
-  if (!snapshot.value) {
-    return ''
-  }
-  const date = new Date(snapshot.value.capturedAt).toLocaleString(locale.value)
-  return t(
-    tooHeavy.value
-      ? 'page.marketing.pages.preview.attempted_at'
-      : 'page.marketing.pages.preview.captured_at',
-    { date },
-  )
-})
 
 function mebibytes(bytes: number): string {
-  return new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }).format(
-    bytes / (1024 * 1024),
-  )
+  return new Intl.NumberFormat(locale.value, {
+    maximumFractionDigits: 1,
+  }).format(bytes / (1024 * 1024))
 }
 
 const savingOptions = ref(false)
 
-async function updateSnapshotOptions(patch: MarketingWebsitePatch): Promise<void> {
+async function updateSnapshotOptions(
+  patch: MarketingWebsitePatch,
+): Promise<void> {
   const website = props.website
   if (!website) {
     return
@@ -296,59 +347,35 @@ async function updateSnapshotOptions(patch: MarketingWebsitePatch): Promise<void
   try {
     await api.updateWebsite(website._id, patch)
     emit('website-updated')
-  }
-  catch {
-    toast.add({ color: 'error', title: t('page.marketing.pages.preview.options_error') })
-  }
-  finally {
+  } catch {
+    toast.add({
+      color: 'error',
+      title: t('page.marketing.pages.preview.options_error'),
+    })
+  } finally {
     savingOptions.value = false
   }
 }
 
 // --- Frame geometry ---------------------------------------------------------
 
-/** Free text: an empty field must stay empty, not refill with the applied value. */
-const heightField = ref('')
-
-const heightOverride = computed(() => {
-  const typed = Number.parseInt(heightField.value, 10)
-  return Number.isFinite(typed) && typed > 0 ? typed : null
-})
-
 const frame = ref<HTMLIFrameElement | null>(null)
-const {
-  measuredWidth,
-  measuredHeight,
-  tier,
-  close: closeFrame,
-  measureAnchors,
-} = useSnapshotFrame(frame)
-
-// Typing a height resizes the frame by hand, so the next reading would
-// measure that — stop reading rather than latch it.
-watch(heightOverride, (value) => {
-  if (value !== null && tier.value === 'pending') {
-    closeFrame()
-  }
-})
-
-// A different width is a different rendering of the snapshot: the frame
-// remounts on the key change, and the composable re-arms on the new one.
-watch(layoutWidth, () => {
-  heightField.value = ''
-})
-
-// A typed height belongs to the page it was typed on.
-watch(() => [props.website?._id, props.path], () => {
-  heightField.value = ''
-})
+const { measuredWidth, measuredHeight, tier, measureAnchors } =
+  useSnapshotFrame(frame)
 
 const frameKey = computed(() =>
-  [props.path, snapshot.value?.layout, snapshot.value?.capturedAt, layoutWidth.value].join('|'),
+  [
+    props.path,
+    snapshot.value?.layout,
+    snapshot.value?.capturedAt,
+    layoutWidth.value,
+  ].join('|'),
 )
 
 /** Viewport the frame is pinned to until its size is read. */
-const probeHeight = computed(() => snapshot.value?.viewport.height ?? PROBE_VIEWPORT_HEIGHT)
+const probeHeight = computed(
+  () => snapshot.value?.viewport.height ?? PROBE_VIEWPORT_HEIGHT,
+)
 
 /**
  * Height of the drawn surface — the overlay's coordinate space. Falls back to
@@ -356,7 +383,7 @@ const probeHeight = computed(() => snapshot.value?.viewport.height ?? PROBE_VIEW
  * readable before (and without) any snapshot.
  */
 const renderHeight = computed(() => {
-  const chosen = heightOverride.value ?? measuredHeight.value
+  const chosen = measuredHeight.value
   if (chosen !== null) {
     return Math.min(Math.max(chosen, MIN_RENDER_HEIGHT), MAX_RENDER_HEIGHT)
   }
@@ -369,9 +396,6 @@ const renderHeight = computed(() => {
  * being waited on. An operator override takes it back by hand.
  */
 const frameHeight = computed(() => {
-  if (heightOverride.value !== null) {
-    return renderHeight.value
-  }
   if (measuredHeight.value !== null) {
     return measuredHeight.value
   }
@@ -386,7 +410,10 @@ const frameHeight = computed(() => {
  * part is clipped by the pane, exactly as it is clipped inside the frame.
  */
 const overlayWidth = computed(() =>
-  Math.min(Math.max(measuredWidth.value ?? 0, layoutWidth.value), MAX_RENDER_WIDTH),
+  Math.min(
+    Math.max(measuredWidth.value ?? 0, layoutWidth.value),
+    MAX_RENDER_WIDTH,
+  ),
 )
 
 // --- Element anchoring ------------------------------------------------------
@@ -458,7 +485,7 @@ async function refreshAnchorBoxes(): Promise<void> {
     return
   }
   await nextTick()
-  await new Promise(resolve => requestAnimationFrame(resolve))
+  await new Promise((resolve) => requestAnimationFrame(resolve))
   if (token !== measureToken) {
     return
   }
@@ -482,8 +509,8 @@ watch(
  */
 const oversized = computed(
   () =>
-    (measuredHeight.value ?? 0) > MAX_RENDER_HEIGHT
-    || (measuredWidth.value ?? 0) > MAX_RENDER_WIDTH,
+    (measuredHeight.value ?? 0) > MAX_RENDER_HEIGHT ||
+    (measuredWidth.value ?? 0) > MAX_RENDER_WIDTH,
 )
 
 const overflowing = computed(
@@ -518,36 +545,49 @@ watch(container, (el) => {
 
 onBeforeUnmount(() => observer?.disconnect())
 
+// Only ever scaled down: a phone or tablet layout narrower than the pane is
+// shown at its own width, centred like a device, never blown up to fill it.
 const scale = computed(() =>
-  containerWidth.value > 0 ? containerWidth.value / layoutWidth.value : 1,
+  containerWidth.value > 0
+    ? Math.min(1, containerWidth.value / layoutWidth.value)
+    : 1,
 )
 
+/** Width of the drawn surface in the pane's own pixels. */
+const surfaceWidth = computed(() => Math.round(layoutWidth.value * scale.value))
+
 /** Height of the zoomed surface in the pane's own pixels — the scroll range
  *  of the pane and the space the scroll-depth overlay draws in. */
-const scrolledHeight = computed(() => Math.round(renderHeight.value * scale.value))
-
-// --- Emptiness, explained ---------------------------------------------------
+const scrolledHeight = computed(() =>
+  Math.round(renderHeight.value * scale.value),
+)
 
 /**
- * Page loads whose clicks were captured at all. Sampling is drawn once per
- * page load (tracker.js), so this bounds whether a heatmap could exist — it
- * is not a click estimate, and must not be shown as one next to the real
- * count.
+ * The pane grows with the page, up to the window's height: a short capture
+ * leaves no empty band below it, and a long one scrolls inside a pane that
+ * still fits the screen. The border is counted, or a 2px scroll would remain.
  */
-const expectedSampledPageLoads = computed(() =>
-  props.pageviews ? Math.round(props.pageviews * props.sampleRate) : null,
-)
+const paneStyle = computed(() => ({
+  height: `${scrolledHeight.value + 2}px`,
+  maxHeight: 'calc(100dvh - 8rem)',
+  minHeight: '12rem',
+}))
 
-/** Silence has shared causes (collection off, sampled out) before the
+// --- Emptiness, explained ---------------------------------------------------
+
+
+/** Silence has shared causes (collection off, no view sampled) before the
  *  per-overlay one; both overlays explain themselves through this. */
 function captureEmptyReason(fallbackKey: string): string {
   if (!props.trackerEnabled) {
     return t('page.marketing.pages.empty.tracking_off')
   }
-  if (expectedSampledPageLoads.value !== null && expectedSampledPageLoads.value < 1) {
-    return t('page.marketing.pages.empty.sampled_out', {
-      rate: Math.round(props.sampleRate * 100),
-    })
+  if (props.pageviews && scrollViews.value === 0) {
+    return props.sampleRateLabel === null
+      ? t('page.marketing.pages.empty.none_sampled')
+      : t('page.marketing.pages.empty.none_sampled_rate', {
+          rate: props.sampleRateLabel,
+        })
   }
   return t(fallbackKey)
 }
@@ -562,7 +602,11 @@ const emptyState = computed(() => {
       description: captureEmptyReason('page.marketing.pages.empty.no_clicks'),
     }
   }
-  if (loadingScroll.value || scrollDepth.value === null || scrollViews.value > 0) {
+  if (
+    loadingScroll.value ||
+    scrollDepth.value === null ||
+    scrollViews.value > 0
+  ) {
     return null
   }
   return {
@@ -605,311 +649,740 @@ const truncatedState = computed(() => {
   return null
 })
 
-/** The real page, on the origin the snapshot was captured from — opened,
- *  never framed. */
+const LOCAL_HOST = /^(localhost|127\.|\[?::1\]?$)/
+
+/** The real page — opened, never framed: on the origin the snapshot was
+ *  captured from, else on the site's declared domain. */
 const externalUrl = computed(() => {
-  if (!snapshot.value || !props.path) {
+  const domain = props.website?.domain
+  const origin =
+    snapshot.value?.origin ??
+    (domain
+      ? `${LOCAL_HOST.test(domain) ? 'http' : 'https'}://${domain}`
+      : null)
+  if (!origin || !props.path) {
     return ''
   }
   try {
-    return new URL(props.path, snapshot.value.origin).toString()
+    return new URL(props.path, origin).toString()
+  } catch {
+    return ''
   }
-  catch {
+})
+
+// --- One status strip -------------------------------------------------------
+
+interface StripAction {
+  label: string
+  run?: () => void
+  to?: string
+}
+
+interface StatusStrip {
+  tone: 'error' | 'warning' | 'info' | 'primary' | 'success'
+  neutral?: boolean
+  icon: string
+  title: string
+  description: string
+  action?: StripAction
+}
+
+/**
+ * Highest priority first: one strip says what needs attention, instead of
+ * every applicable alert stacked above the page. The numbers in the header
+ * stay exact whatever it says.
+ */
+const statusStrip = computed<StatusStrip | null>(() => {
+  const candidates: Array<StatusStrip | null> = [
+    !props.trackerEnabled
+      ? {
+          tone: 'error',
+          icon: 'i-ph-plugs',
+          title: t('page.marketing.pages.strip.collection_off'),
+          description: t('page.marketing.pages.strip.collection_off_hint'),
+          action: {
+            label: t('page.marketing.pages.strip.open_settings'),
+            to: settingsLink(),
+          },
+        }
+      : null,
+    !snapshotsEnabled.value
+      ? {
+          tone: 'info',
+          icon: 'i-ph-camera-slash',
+          title: t('page.marketing.pages.preview.snapshots_off'),
+          description: t('page.marketing.pages.preview.snapshots_off_hint'),
+          action: {
+            label: t('page.marketing.pages.preview.enable_snapshots'),
+            run: () => void updateSnapshotOptions({ snapshotsEnabled: true }),
+          },
+        }
+      : null,
+    noSnapshotYet.value
+      ? {
+          tone: 'primary',
+          icon: 'i-ph-hourglass',
+          title: t('page.marketing.pages.preview.no_snapshot'),
+          description:
+            props.sampleRateLabel === null
+              ? t('page.marketing.pages.preview.no_snapshot_hint')
+              : t('page.marketing.pages.preview.no_snapshot_hint_rate', {
+                  rate: props.sampleRateLabel,
+                }),
+        }
+      : null,
+    snapshot.value && tooHeavy.value
+      ? {
+          tone: 'warning',
+          icon: 'i-ph-file-x',
+          title: t('page.marketing.pages.preview.too_heavy'),
+          description: t('page.marketing.pages.preview.too_heavy_hint', {
+            size: mebibytes(snapshot.value.bytes),
+            limit: mebibytes(SNAPSHOT_BYTE_CAP),
+          }),
+        }
+      : null,
+    truncatedState.value
+      ? {
+          tone: 'warning',
+          icon: 'i-ph-warning',
+          title: truncatedState.value.title,
+          description: truncatedState.value.description,
+        }
+      : null,
+    oversized.value
+      ? {
+          tone: 'warning',
+          icon: 'i-ph-arrows-out-line-vertical',
+          title: t('page.marketing.pages.preview.oversized'),
+          description: t('page.marketing.pages.preview.oversized_hint'),
+        }
+      : null,
+    snapshot.value && !snapshot.value.exact
+      ? {
+          tone: 'info',
+          neutral: true,
+          icon: 'i-ph-arrows-out-line-horizontal',
+          title: t('page.marketing.pages.preview.approximate_layout', {
+            layout: t(
+              `page.marketing.pages.preview.layout_${snapshot.value.layout}`,
+            ).toLowerCase(),
+            width: layoutWidth.value,
+          }),
+          description: t(
+            'page.marketing.pages.preview.approximate_layout_hint',
+          ),
+        }
+      : null,
+    overflowing.value
+      ? {
+          tone: 'info',
+          neutral: true,
+          icon: 'i-ph-arrows-horizontal',
+          title: t('page.marketing.pages.preview.overflow'),
+          description: t('page.marketing.pages.preview.overflow_hint', {
+            width: measuredWidth.value,
+          }),
+        }
+      : null,
+  ]
+  return candidates.find((candidate) => candidate !== null) ?? null
+})
+
+const statusLine = computed(() => {
+  if (!snapshot.value) {
     return ''
   }
+  const layoutLabel = t(
+    `page.marketing.pages.preview.layout_${snapshot.value.layout}`,
+  ).toLowerCase()
+  return t('page.marketing.pages.preview.status_line', {
+    date: formatShortDate(snapshot.value.capturedAt, locale.value),
+    layout: layoutLabel,
+    width: snapshot.value.viewport.width,
+  })
+})
+
+const maskLine = computed(() =>
+  t(
+    props.website?.snapshotMaskText
+      ? 'page.marketing.pages.preview.all_masked'
+      : 'page.marketing.pages.preview.fields_masked',
+  ),
+)
+
+// --- Most clicked -----------------------------------------------------------
+
+const MOST_CLICKED = 5
+
+interface ClickedElement {
+  key: string
+  selector: string
+  weight: number
+  text: string
+  box: AnchorBox | undefined
+}
+
+/** The anchored elements with the most clicks, the backend's own cells summed. */
+const mostClicked = computed<ClickedElement[]>(() => {
+  const groups = new Map<string, ClickedElement>()
+  for (const point of points.value) {
+    if (!point.anchor) {
+      continue
+    }
+    const key = anchorKey(point.anchor)
+    const existing = groups.get(key)
+    if (existing) {
+      existing.weight += point.weight
+      continue
+    }
+    const box = anchorBoxes.value.get(key)
+    groups.set(key, {
+      key,
+      selector: point.anchor.selector,
+      weight: point.weight,
+      text: box?.text ?? '',
+      box,
+    })
+  }
+  return [...groups.values()]
+    .sort((a, b) => b.weight - a.weight)
+    .slice(0, MOST_CLICKED)
+})
+
+/** Half a pin's footprint on screen, and the step that unstacks two pins. */
+const PIN_HALF_WIDTH = 28
+const PIN_HALF_HEIGHT = 11
+const PIN_STEP = 22
+
+interface Pin {
+  key: string
+  weight: number
+  left: number
+  top: number
+}
+
+/**
+ * Count badges pinned on the hottest elements, in the surface's own pixels:
+ * kept inside the surface (an element flush with the right edge would cut
+ * its badge in half) and pushed down past the badges already placed.
+ */
+const pins = computed(() => {
+  if (overlayMode.value !== 'clicks') {
+    return []
+  }
+  const unit = 1 / scale.value
+  const placed: Pin[] = []
+  for (const element of mostClicked.value) {
+    const box = element.box
+    if (!box) {
+      continue
+    }
+    const left = Math.min(
+      Math.max(box.x + box.width, PIN_HALF_WIDTH * unit),
+      layoutWidth.value - PIN_HALF_WIDTH * unit,
+    )
+    let top = Math.max(box.y, PIN_HALF_HEIGHT * unit)
+    while (
+      placed.some(
+        (pin) =>
+          Math.abs(pin.left - left) < 2 * PIN_HALF_WIDTH * unit &&
+          Math.abs(pin.top - top) < PIN_STEP * unit,
+      )
+    ) {
+      top += PIN_STEP * unit
+    }
+    placed.push({ key: element.key, weight: element.weight, left, top })
+  }
+  return placed
+})
+
+// --- Toolbar ------------------------------------------------------------------
+
+const overlayItems = computed(() => [
+  {
+    value: 'clicks',
+    label: t('page.marketing.pages.overlay.clicks'),
+    icon: 'i-ph-cursor-click',
+  },
+  {
+    value: 'scroll',
+    label: t('page.marketing.pages.overlay.scroll'),
+    icon: 'i-ph-caret-double-down',
+  },
+])
+
+const layoutItems = computed(() =>
+  LAYOUT_PRESETS.map((preset) => ({
+    value: preset.width,
+    label: '',
+    icon: preset.icon,
+  })),
+)
+
+/**
+ * Names the icon-only layout segments: DmsSegmented renders an item's label
+ * as its only text and has no per-item aria-label, so a screen reader would
+ * read three unnamed radios. Set on the rendered buttons, in preset order.
+ */
+const layoutSwitch = ref<HTMLElement | null>(null)
+
+watch(
+  [layoutSwitch, locale],
+  ([wrapper]) => {
+    wrapper?.querySelectorAll('[role="radio"]').forEach((radio, index) => {
+      const preset = LAYOUT_PRESETS[index]
+      if (preset) {
+        radio.setAttribute('aria-label', t(preset.labelKey))
+        radio.setAttribute('title', t(preset.labelKey))
+      }
+    })
+  },
+  { flush: 'post' },
+)
+
+const moreItems = computed(() => [
+  [
+    {
+      type: 'checkbox' as const,
+      label: t('page.marketing.pages.preview.snapshots_enabled'),
+      checked: snapshotsEnabled.value,
+      onUpdateChecked: (value: boolean) =>
+        void updateSnapshotOptions({ snapshotsEnabled: value }),
+    },
+    {
+      type: 'checkbox' as const,
+      label: t('page.marketing.pages.preview.mask_text'),
+      checked: props.website?.snapshotMaskText === true,
+      disabled: !snapshotsEnabled.value,
+      onUpdateChecked: (value: boolean) =>
+        void updateSnapshotOptions({ snapshotMaskText: value }),
+    },
+  ],
+  ...(externalUrl.value
+    ? [
+        [
+          {
+            label: t('page.marketing.pages.preview.open_in_tab'),
+            icon: 'i-ph-arrow-square-out',
+            to: externalUrl.value,
+            target: '_blank',
+          },
+        ],
+      ]
+    : []),
+  [
+    {
+      label: t('page.marketing.pages.reset.page_button'),
+      icon: 'i-ph-eraser',
+      color: 'error' as const,
+      onSelect: () => void resetPageHeatmap(),
+    },
+  ],
+])
+
+// --- Surface ----------------------------------------------------------------
+
+/**
+ * What the left cell draws. One empty state whose texts change with the
+ * reason, never several swapped in turn: replacing one DmsEmptyState by
+ * another landed the new one outside the cell.
+ */
+const surface = computed(() => {
+  if (activeFailed.value) {
+    return 'error'
+  }
+  if (snapshot.value && backdrop.value !== null) {
+    return 'frame'
+  }
+  if (emptyState.value) {
+    return 'empty'
+  }
+  if (snapshotsEnabled.value && !snapshotSettled.value) {
+    return 'loading'
+  }
+  return 'no_backdrop'
+})
+
+const surfaceEmpty = computed(() => {
+  if (surface.value === 'error') {
+    return {
+      variant: 'error' as const,
+      icon: undefined,
+      title: t('page.marketing.common.load_error'),
+      description: undefined,
+    }
+  }
+  if (surface.value === 'empty' && emptyState.value) {
+    return {
+      variant: undefined,
+      icon:
+        overlayMode.value === 'clicks'
+          ? 'i-ph-cursor-click'
+          : 'i-ph-caret-double-down',
+      ...emptyState.value,
+    }
+  }
+  return {
+    variant: undefined,
+    icon: 'i-ph-image-broken',
+    title: t('page.marketing.pages.preview.no_backdrop'),
+    description: t('page.marketing.pages.preview.no_backdrop_hint'),
+  }
 })
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 p-4">
+  <section class="dms-card flex min-w-0 flex-col overflow-hidden p-0">
     <!-- Toolbar -->
-    <div class="flex flex-wrap items-center justify-between gap-3">
-      <div class="min-w-0">
-        <p class="truncate font-mono text-sm text-highlighted">{{ props.path }}</p>
-        <p class="text-xs text-muted">
-          <template v-if="overlayMode === 'clicks'">
-            {{ t('page.marketing.pages.clicks', { count: totalClicks }, totalClicks) }}
-          </template>
-          <template v-else>
-            {{ t('page.marketing.pages.scroll.views', { count: scrollViews }, scrollViews) }}
-          </template>
-          <span v-if="props.pageviews">
-            · {{ t('page.marketing.pages.pageviews', { count: props.pageviews }, props.pageviews) }}
+    <header
+      class="flex flex-wrap items-center justify-between gap-3 border-b border-default px-4 py-3"
+    >
+      <div class="min-w-0 flex-1 basis-64">
+        <p
+          class="flex min-w-0 items-center gap-2 font-mono text-base font-semibold text-highlighted"
+        >
+          <span class="min-w-0 truncate" :title="props.path">
+            {{ props.path }}
+          </span>
+          <UButton
+            v-if="externalUrl"
+            :to="externalUrl"
+            target="_blank"
+            icon="i-ph-arrow-square-out"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            class="shrink-0"
+            :aria-label="t('page.marketing.pages.preview.open_in_tab')"
+          />
+        </p>
+        <p class="flex flex-wrap gap-x-3 text-xs text-muted">
+          <span v-if="props.pageviews !== undefined">
+            <b class="font-mono text-highlighted">
+              {{ formatNumber(props.pageviews, locale) }}
+            </b>
+            {{ t('page.marketing.pages.views_unit', props.pageviews) }}
           </span>
-          <span v-if="capturedAtLabel">
-            · {{ capturedAtLabel }}
+          <span>
+            <b class="font-mono text-highlighted">
+              {{ formatNumber(totalClicks, locale) }}
+            </b>
+            {{ t('page.marketing.pages.clicks_unit', totalClicks) }}
+          </span>
+          <span v-if="scrollDepth !== null">
+            <b class="font-mono text-highlighted">
+              {{ formatNumber(scrollViews, locale) }}
+            </b>
+            {{ t('page.marketing.pages.sampled_unit', scrollViews) }}
           </span>
         </p>
       </div>
-      <div class="flex flex-wrap items-center gap-2">
-        <UFieldGroup size="sm">
-          <UButton
-            icon="i-ph-cursor-click"
-            :color="overlayMode === 'clicks' ? 'primary' : 'neutral'"
-            variant="subtle"
-            :label="t('page.marketing.pages.overlay.clicks')"
-            @click="overlayMode = 'clicks'"
-          />
-          <UButton
-            icon="i-ph-caret-double-down"
-            :color="overlayMode === 'scroll' ? 'primary' : 'neutral'"
-            variant="subtle"
-            :label="t('page.marketing.pages.overlay.scroll')"
-            @click="overlayMode = 'scroll'"
-          />
-        </UFieldGroup>
-        <UFieldGroup size="sm">
-          <UButton
-            v-for="preset in LAYOUT_PRESETS"
-            :key="preset.width"
-            :icon="preset.icon"
-            :color="layoutWidth === preset.width ? 'primary' : 'neutral'"
-            variant="subtle"
-            :title="`${t(preset.labelKey)} · ${preset.width}px`"
-            :aria-label="`${t(preset.labelKey)} · ${preset.width}px`"
-            :ui="{ leadingIcon: 'size-5' }"
-            @click="layoutWidth = preset.width"
-          />
-        </UFieldGroup>
-        <UInput
-          v-model="heightField"
-          type="number"
-          :min="MIN_RENDER_HEIGHT"
-          :placeholder="`${renderHeight}`"
-          step="200"
+      <div class="flex shrink-0 flex-wrap items-center gap-2">
+        <DmsSegmented
+          v-model="overlayMode"
+          :items="overlayItems"
           size="xs"
-          class="w-24"
-          :title="t('page.marketing.pages.preview.height_override')"
+          :aria-label="t('page.marketing.pages.overlay.label')"
         />
-        <UButton
-          v-if="externalUrl"
-          icon="i-ph-arrow-square-out"
-          :to="externalUrl"
-          target="_blank"
-          color="neutral"
-          variant="ghost"
-          size="xs"
-          :label="t('page.marketing.pages.preview.open_in_tab')"
-        />
-        <UPopover v-if="props.website">
+        <span ref="layoutSwitch" class="contents">
+          <DmsSegmented
+            v-model="layoutWidth"
+            :items="layoutItems"
+            size="xs"
+            :aria-label="t('page.marketing.pages.preview.layout')"
+          />
+        </span>
+        <UDropdownMenu :items="moreItems" :content="{ align: 'end' }">
           <UButton
-            icon="i-ph-camera"
+            icon="i-ph-dots-three"
+            size="xs"
             color="neutral"
             variant="ghost"
-            size="xs"
-            :loading="savingOptions"
-            :title="t('page.marketing.pages.preview.options')"
-            :aria-label="t('page.marketing.pages.preview.options')"
+            :loading="savingOptions || resetting"
+            :aria-label="t('page.marketing.pages.preview.more')"
           />
-          <template #content>
-            <div class="flex w-80 flex-col gap-4 p-4">
-              <USwitch
-                :model-value="snapshotsEnabled"
-                :disabled="savingOptions"
-                :label="t('page.marketing.pages.preview.snapshots_enabled')"
-                :description="t('page.marketing.pages.preview.snapshots_enabled_hint')"
-                @update:model-value="(value: boolean) => updateSnapshotOptions({ snapshotsEnabled: value })"
-              />
-              <USwitch
-                :model-value="props.website.snapshotMaskText === true"
-                :disabled="savingOptions || !snapshotsEnabled"
-                :label="t('page.marketing.pages.preview.mask_text')"
-                :description="t('page.marketing.pages.preview.mask_text_hint')"
-                @update:model-value="(value: boolean) => updateSnapshotOptions({ snapshotMaskText: value })"
-              />
-            </div>
-          </template>
-        </UPopover>
-        <UButton
-          icon="i-ph-eraser"
-          color="error"
-          variant="ghost"
-          size="xs"
-          :loading="resetting"
-          :title="t('page.marketing.pages.reset.page_button')"
-          @click="resetPageHeatmap"
-        />
+        </UDropdownMenu>
       </div>
-    </div>
+    </header>
 
-    <!-- Backdrop-state banners. None of these affect the numbers below. -->
-    <UAlert
-      v-if="!snapshotsEnabled"
-      icon="i-ph-camera-slash"
-      color="neutral"
-      variant="subtle"
-      :title="t('page.marketing.pages.preview.snapshots_off')"
-      :description="t('page.marketing.pages.preview.snapshots_off_hint')"
-      :actions="[{
-        label: t('page.marketing.pages.preview.enable_snapshots'),
-        color: 'neutral',
-        variant: 'subtle',
-        loading: savingOptions,
-        onClick: () => updateSnapshotOptions({ snapshotsEnabled: true }),
-      }]"
-    />
-
-    <UAlert
-      v-else-if="noSnapshotYet"
-      icon="i-ph-camera"
-      color="neutral"
-      variant="subtle"
-      :title="t('page.marketing.pages.preview.no_snapshot')"
-      :description="t('page.marketing.pages.preview.no_snapshot_hint', { rate: Math.round(props.sampleRate * 100) })"
-    />
-
-    <UAlert
-      v-else-if="snapshot && tooHeavy"
-      icon="i-ph-file-x"
-      color="warning"
-      variant="subtle"
-      :title="t('page.marketing.pages.preview.too_heavy')"
-      :description="t('page.marketing.pages.preview.too_heavy_hint', {
-        size: mebibytes(snapshot.bytes),
-        limit: mebibytes(SNAPSHOT_BYTE_CAP),
-      })"
-    />
-
-    <UAlert
-      v-else-if="snapshot && !snapshot.exact"
-      icon="i-ph-arrows-out-line-horizontal"
-      color="neutral"
-      variant="subtle"
-      :title="t('page.marketing.pages.preview.approximate_layout')"
-      :description="t('page.marketing.pages.preview.approximate_layout_hint', {
-        layout: t(`page.marketing.pages.preview.layout_${snapshot.layout}`).toLowerCase(),
-      })"
-    />
-
-    <!-- Geometry banners stand on their own: a reflowed layout can overflow
-         too, and the second fact must not hide behind the first. -->
-    <UAlert
-      v-if="oversized"
-      icon="i-ph-arrows-out-line-vertical"
-      color="warning"
-      variant="subtle"
-      :title="t('page.marketing.pages.preview.oversized')"
-      :description="t('page.marketing.pages.preview.oversized_hint')"
-    />
-
-    <UAlert
-      v-else-if="overflowing"
-      icon="i-ph-arrows-horizontal"
-      color="neutral"
-      variant="subtle"
-      :title="t('page.marketing.pages.preview.overflow')"
-      :description="t('page.marketing.pages.preview.overflow_hint', { width: measuredWidth })"
-    />
-
-    <UAlert
-      v-if="truncatedState"
-      icon="i-ph-warning"
-      color="warning"
-      variant="subtle"
-      :title="truncatedState.title"
-      :description="truncatedState.description"
-    />
-
-    <UAlert
-      v-if="emptyState"
-      :icon="overlayMode === 'clicks' ? 'i-ph-cursor-click' : 'i-ph-caret-double-down'"
-      :title="emptyState.title"
-      :description="emptyState.description"
-    />
-
-    <!-- Surface: only over a snapshot. While the snapshot is being fetched
-         the space is reserved, so a page that has one does not jump. -->
-    <div v-if="activeFailed" class="flex flex-col items-start gap-3">
-      <p class="text-sm text-error">{{ t('page.marketing.pages.error') }}</p>
-      <UButton
-        icon="i-ph-arrow-clockwise"
-        :label="t('page.marketing.pages.retry')"
-        color="neutral"
-        variant="subtle"
+    <!-- One status line, or the one strip that needs attention -->
+    <div v-if="statusStrip" class="px-3 pt-3">
+      <DmsBanner
+        :tone="statusStrip.tone"
         size="sm"
-        @click="retryActive"
-      />
+        :icon="statusStrip.icon"
+        :title="statusStrip.title"
+        :description="statusStrip.description"
+      >
+        <template v-if="statusStrip.action" #actions>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="outline"
+            :loading="savingOptions"
+            :label="statusStrip.action.label"
+            :to="statusStrip.action.to"
+            @click="statusStrip.action.run?.()"
+          />
+        </template>
+      </DmsBanner>
     </div>
+    <p
+      v-else-if="snapshot"
+      class="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-default px-4 py-2 text-xs text-muted"
+    >
+      <span class="flex items-center gap-1.5">
+        <UIcon name="i-ph-camera" class="size-3.5 text-success" />
+        {{ statusLine }}
+      </span>
+      <span class="text-dimmed">· {{ maskLine }}</span>
+    </p>
+
+    <div class="grid min-h-0 xl:grid-cols-[minmax(0,1fr)_15rem]">
+      <div class="min-w-0 p-3">
+        <USkeleton
+          v-if="surface === 'loading'"
+          class="w-full rounded-lg"
+          :style="{ height: `${PANE_HEIGHT}px` }"
+        />
 
-    <USkeleton
-      v-else-if="snapshotsEnabled && !snapshotSettled"
-      class="w-full rounded-lg"
-      :style="{ height: `${PANE_HEIGHT}px` }"
-    />
-
-    <!-- Kept mounted across refetches: tearing it down would re-render the
-         snapshot — and re-measure it — on every period change. -->
-    <div v-else-if="snapshot && backdrop !== null" class="relative">
-      <div
-        ref="container"
-        class="overflow-y-scroll overflow-x-hidden rounded-lg border border-default bg-elevated"
-        :style="{ height: `${PANE_HEIGHT}px` }"
-      >
-        <div class="relative" :style="{ height: `${scrolledHeight}px` }">
+        <!-- Kept mounted across refetches: tearing it down would re-render the
+             snapshot — and re-measure it — on every period change. -->
+        <div v-else-if="surface === 'frame'" class="relative">
           <div
-            class="absolute left-0 top-0"
-            :style="{
-              width: `${layoutWidth}px`,
-              height: `${renderHeight}px`,
-              zoom: scale,
-            }"
+            ref="container"
+            class="overflow-x-hidden overflow-y-scroll rounded-lg border border-default bg-elevated"
+            :style="paneStyle"
           >
-            <!-- Inert on purpose: pointer-events none means no link, form or
-                 hover state inside the snapshot can fire, and the wheel
-                 scrolls the pane instead of dying in the frame. The sandbox
-                 allows same-origin and nothing else — no script, no form,
-                 no navigation — which is what lets useSnapshotFrame read the
-                 document directly while a capture that arrived through a
-                 public endpoint stays inert. `color-scheme` and the canvas
-                 color follow the visitor's mode at capture: the page's
-                 media queries resolve the way they did for them, and a page
-                 with no background of its own stays on the canvas it had. -->
-            <iframe
-              :key="frameKey"
-              ref="frame"
-              :srcdoc="frameDocument"
-              class="pointer-events-none absolute left-0 top-0 w-full border-0"
+            <!-- A layout narrower than the pane keeps its width, centred. -->
+            <div
+              class="relative mx-auto overflow-hidden"
+              :class="
+                surfaceWidth < containerWidth ? 'ring-1 ring-accented' : ''
+              "
               :style="{
-                height: `${frameHeight}px`,
-                colorScheme: snapshotScheme,
-                backgroundColor: snapshotScheme === 'dark' ? DARK_CANVAS : LIGHT_CANVAS,
+                width: `${surfaceWidth}px`,
+                height: `${scrolledHeight}px`,
               }"
-              sandbox="allow-same-origin"
-              scrolling="no"
-              referrerpolicy="no-referrer"
-              :title="props.path"
-            />
-            <DmsMarketingHeatmapCanvas
-              v-if="overlayMode === 'clicks'"
-              :points="drawnPoints"
-              :max-weight="maxWeight"
-              :width="overlayWidth"
-              :height="renderHeight"
-            />
+            >
+              <div
+                class="absolute top-0 left-0"
+                :style="{
+                  width: `${layoutWidth}px`,
+                  height: `${renderHeight}px`,
+                  zoom: scale,
+                }"
+              >
+                <!-- Inert on purpose: pointer-events none means no link, form or
+                     hover state inside the snapshot can fire. The sandbox allows
+                     same-origin and nothing else — no script, no form, no
+                     navigation — which is what lets useSnapshotFrame read the
+                     document while a capture that arrived through a public
+                     endpoint stays inert. Hidden from assistive technology:
+                     "Most clicked" is its readable alternative. -->
+                <iframe
+                  :key="frameKey"
+                  ref="frame"
+                  :srcdoc="frameDocument"
+                  class="pointer-events-none absolute top-0 left-0 w-full border-0"
+                  :style="{
+                    height: `${frameHeight}px`,
+                    colorScheme: snapshotScheme,
+                    backgroundColor:
+                      snapshotScheme === 'dark' ? DARK_CANVAS : LIGHT_CANVAS,
+                  }"
+                  sandbox="allow-same-origin"
+                  scrolling="no"
+                  referrerpolicy="no-referrer"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  inert
+                  :title="props.path"
+                />
+                <DmsMarketingHeatmapCanvas
+                  v-if="overlayMode === 'clicks'"
+                  :points="drawnPoints"
+                  :max-weight="maxWeight"
+                  :width="overlayWidth"
+                  :height="renderHeight"
+                />
+                <span
+                  v-for="pin in pins"
+                  :key="pin.key"
+                  aria-hidden="true"
+                  class="pointer-events-none absolute flex -translate-x-1/2 -translate-y-1/2 items-center gap-1 rounded-full bg-neutral-900/90 px-2 py-0.5 font-mono font-semibold text-white shadow"
+                  :style="{
+                    left: `${pin.left * scale}px`,
+                    top: `${pin.top * scale}px`,
+                    zoom: 1 / scale,
+                    fontSize: '12px',
+                  }"
+                >
+                  <span class="size-1.5 rounded-full bg-red-500" />
+                  {{ formatNumber(pin.weight, locale) }}
+                </span>
+              </div>
+
+              <!-- In the pane's scaled space, not the document's: depth only
+                   varies vertically, and the labels must not shrink with the
+                   page — see the component. -->
+              <DmsMarketingScrollDepthOverlay
+                v-if="overlayMode === 'scroll' && scrollViews > 0"
+                :reached="scrollReached"
+                :views="scrollViews"
+                :height="scrolledHeight"
+                :fold-ratio="scrollFoldRatio"
+              />
+            </div>
           </div>
 
-          <!-- In the pane's scaled space, not the document's: depth only
-               varies vertically, and the labels must not shrink with the
-               page — see the component. -->
-          <DmsMarketingScrollDepthOverlay
-            v-if="overlayMode === 'scroll' && scrollViews > 0"
-            :reached="scrollReached"
-            :views="scrollViews"
-            :height="scrolledHeight"
-            :fold-ratio="scrollFoldRatio"
-          />
-      </div>
-
+          <!-- Outside the scrollport on purpose: inside, it is laid out at the
+               top of the content and scrolls out of sight on a tall page. -->
+          <div
+            v-if="activeLoading"
+            class="absolute inset-0 flex items-center justify-center rounded-lg bg-default/60"
+          >
+            <UIcon
+              name="i-ph-circle-notch"
+              class="size-6 animate-spin text-muted"
+            />
+          </div>
+        </div>
+
+        <!-- One empty state for every reason, in a plain wrapper: see `surface`. -->
+        <div v-else>
+          <DmsEmptyState
+            :variant="surfaceEmpty.variant"
+            :icon="surfaceEmpty.icon"
+            :hatched="surface !== 'error'"
+            :size="surface === 'error' ? 'sm' : undefined"
+            :title="surfaceEmpty.title"
+            :description="surfaceEmpty.description"
+          >
+            <template v-if="surface === 'error'" #actions>
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="outline"
+                icon="i-ph-arrow-clockwise"
+                :label="t('page.marketing.common.retry')"
+                @click="retryActive"
+              />
+            </template>
+          </DmsEmptyState>
+        </div>
       </div>
 
-      <!-- Outside the scrollport on purpose: inside, it is laid out at the top
-           of the content and scrolls out of sight on a tall page. -->
-      <div
-        v-if="activeLoading"
-        class="absolute inset-0 flex items-center justify-center rounded-lg bg-default/60"
+      <aside
+        class="flex flex-col gap-4 border-t border-default p-4 xl:border-t-0 xl:border-l"
       >
-        <UIcon name="i-ph-circle-notch" class="size-6 animate-spin text-muted" />
-      </div>
+        <template v-if="overlayMode === 'clicks'">
+          <div class="flex flex-col gap-1.5">
+            <DmsEyebrow :label="t('page.marketing.pages.density')" />
+            <span
+              class="h-2 rounded-full"
+              :style="{ backgroundImage: heatLegendGradient() }"
+            />
+            <span class="flex justify-between text-[10px] text-dimmed">
+              <span>{{ t('page.marketing.pages.density_few') }}</span>
+              <span>{{ t('page.marketing.pages.density_many') }}</span>
+            </span>
+          </div>
+          <div class="flex flex-col gap-2">
+            <DmsEyebrow :label="t('page.marketing.pages.most_clicked')" />
+            <p v-if="mostClicked.length === 0" class="text-xs text-muted">
+              {{ t('page.marketing.pages.most_clicked_empty') }}
+            </p>
+            <ul v-else class="flex flex-col gap-2.5">
+              <li
+                v-for="element in mostClicked"
+                :key="element.key"
+                class="flex min-w-0 flex-col"
+              >
+                <span class="flex items-start justify-between gap-2">
+                  <span
+                    class="truncate text-[13px] font-medium text-highlighted"
+                    :class="element.text ? '' : 'font-mono'"
+                    :title="element.text || element.selector"
+                  >
+                    {{
+                      element.text
+                        ? t('page.marketing.pages.quoted', {
+                            text: element.text,
+                          })
+                        : element.selector
+                    }}
+                  </span>
+                  <span class="font-mono text-xs text-highlighted">
+                    {{ formatNumber(element.weight, locale) }}
+                  </span>
+                </span>
+                <span
+                  v-if="element.text"
+                  class="truncate font-mono text-[10px] text-dimmed"
+                  :title="element.selector"
+                >
+                  {{ element.selector }}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </template>
+        <div v-else class="flex flex-col gap-2">
+          <DmsEyebrow :label="t('page.marketing.pages.scroll.legend_title')" />
+          <span
+            class="h-2 rounded-full"
+            :style="{ backgroundImage: heatLegendGradient(true) }"
+          />
+          <span class="flex justify-between text-[10px] text-dimmed">
+            <span>{{ t('page.marketing.pages.scroll.legend_all') }}</span>
+            <span>{{ t('page.marketing.pages.scroll.legend_few') }}</span>
+          </span>
+          <span
+            v-if="scrollViews > 0 && scrollFoldRatio > 0 && scrollFoldRatio < 1"
+            class="flex items-center gap-2 text-xs text-muted"
+          >
+            <span
+              class="h-2 w-2 shrink-0 rounded-full bg-default shadow ring-1 ring-default"
+              aria-hidden="true"
+            />
+            <span class="h-px w-4 shrink-0 bg-current" aria-hidden="true" />
+            {{ t('page.marketing.pages.scroll.fold_line') }}
+          </span>
+          <p v-if="scrollViews > 0" class="text-xs text-muted">
+            {{
+              t('page.marketing.pages.scroll.median', {
+                depth: medianDepth,
+              })
+            }}
+          </p>
+          <p class="text-xs text-dimmed">
+            {{ t('page.marketing.pages.scroll.lines_hint') }}
+          </p>
+        </div>
+        <div v-if="usedIn && usedIn.length > 0" class="flex flex-col gap-2">
+          <DmsEyebrow :label="t('page.marketing.pages.used_in')" />
+          <DmsAutoLink
+            v-for="funnel in usedIn"
+            :key="funnel._id"
+            :to="funnelLink(funnel._id)"
+            class="flex items-center gap-2 rounded-lg border border-default p-2.5 transition-colors hover:border-primary"
+          >
+            <DmsIconWell icon="i-ph-funnel" size="sm" tone="primary" />
+            <span class="truncate text-sm font-medium text-highlighted">
+              {{ funnel.name }}
+            </span>
+          </DmsAutoLink>
+        </div>
+        <p
+          v-if="overlayMode === 'clicks'"
+          class="mt-auto flex gap-1.5 text-xs text-dimmed"
+        >
+          <UIcon name="i-ph-crosshair" class="mt-0.5 size-3.5 shrink-0" />
+          {{ t('page.marketing.pages.anchoring_note') }}
+        </p>
+      </aside>
     </div>
-  </div>
+  </section>
 </template>