@tekkare/romulus 0.1.244 → 0.1.246

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.243",
+  "version": "0.1.245",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/layer/app/app.config.ts

@@ -55,6 +55,12 @@ export default defineAppConfig({
       Metadata: {
         endpoint: "/api/oip/metadata",
       },
+      Statistics: {
+        /** Audience PostHog de l'ecran et de l'app (GET ?path=&internal=). */
+        endpoint: "/api/oip/stats",
+        /** Classement des utilisateurs, pagine (GET ?period=&scope=&offset=&limit=). */
+        usersEndpoint: "/api/oip/stats/users",
+      },
       Sources: {
         /** Fiches Directus des sources (POST lecture, PATCH correction). */
         endpoint: "/api/oip/sources",

package/layer/app/components/OipShell.vue

@@ -32,6 +32,7 @@ import OipPanelNotes from "./panels/OipPanelNotes.vue";
 import OipPanelProjects from "./panels/OipPanelProjects.vue";
 import OipPanelSources from "./panels/OipPanelSources.vue";
 import OipPanelSourceTables from "./panels/OipPanelSourceTables.vue";
+import OipPanelStatistics from "./panels/OipPanelStatistics.vue";
 import OipPanelTopics from "./panels/OipPanelTopics.vue";
 import OipPanelTutorials from "./panels/OipPanelTutorials.vue";
 
@@ -46,6 +47,7 @@ const LAYER_PANELS: Partial<Record<OipRailTileKey, Component>> = {
   Projects: OipPanelProjects,
   Sources: OipPanelSources,
   SourcesTables: OipPanelSourceTables,
+  Statistics: OipPanelStatistics,
   Topics: OipPanelTopics,
   Tutorials: OipPanelTutorials,
 };
@@ -304,6 +306,7 @@ const baseTiles = computed<(OipRailTile & { ownCount?: boolean })[]>(() => {
       label: en.value ? entry.label.en : entry.label.fr,
       icon: entry.icon,
       ownCount: entry.ownCount,
+      width: entry.width,
       ...extra,
       disabled: !state || !!extra.disabled,
     };
@@ -563,6 +566,7 @@ const tekkareLogo = tekkareLogoRaw.replaceAll('fill="#2100AD"', 'fill="currentCo
           :app-key="appKey"
           :super-admin="superAdmin"
           v-bind="panelProps[openKey as OipRailTileKey] ?? {}"
+          @close="tool = null"
         />
         <slot v-else name="tool" :active="openKey" />
         <!-- Complement de l'app sous le panneau ouvert, sans le remplacer. -->

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

@@ -26,6 +26,9 @@ import { sameViewPage } from "../../../utils/viewPages";
 
 const { locale } = useI18n();
 const route = useRoute();
+// Une vue activee referme le panneau : l'ecran filtre redevient visible.
+const emit = defineEmits<{ close: [] }>();
+
 const views = useViews();
 const brandSync = useAlertBrandSync();
 const alerts = useAlerts();
@@ -376,6 +379,11 @@ function apply(id: string) {
 }
 
 
+function activate(id: string) {
+  apply(id);
+  emit("close");
+}
+
 /**
  * « Nouvelle vue » : meme geste que celui de la pastille. L'ecran repart
  * vierge (cf. `resetAll`), puis la page ouvre son tiroir de selection quand
@@ -681,7 +689,7 @@ async function confirmEdit() {
     :lang="locale === 'en' ? 'en' : 'fr'"
     @save-current="openSave()"
     @reset="startNew"
-    @activate="onTemplates ? start($event) : apply($event)"
+    @activate="onTemplates ? start($event) : activate($event)"
     @star="star"
     @rename="rename"
     @action="onAction"

package/layer/app/components/panels/OipPanelProjects.vue

@@ -22,7 +22,7 @@
     :creating="creating"
     :all-to="allTo"
     :lang="locale === 'en' ? 'en' : 'fr'"
-    @activate="emit('activate', $event)"
+    @activate="activate"
     @open="emit('open', $event)"
     @pin="emit('pin', $event)"
     @create="onCreate"
@@ -75,6 +75,8 @@ const emit = defineEmits<{
   pin: [projectId: string];
   /** Au montage : l'app restaure le projet actif et charge la liste. */
   mounted: [];
+  /** Projet active : le cadre referme le panneau, l'ecran redevient visible. */
+  close: [];
 }>();
 
 const { locale } = useI18n();
@@ -90,5 +92,10 @@ async function onCreate(title: string) {
   }
 }
 
+function activate(id: string) {
+  emit("activate", id);
+  emit("close");
+}
+
 onMounted(() => emit("mounted"));
 </script>

package/layer/app/components/panels/OipPanelStatistics.vue

@@ -0,0 +1,447 @@
+<!--
+  Le volet « Statistiques » du rail : l'audience PostHog de l'écran ouvert et
+  de toute l'app, aujourd'hui et sur 7, 30 et 90 jours.
+
+  Personnes, sessions et vues de page, puis les pages les plus vues et les
+  utilisateurs les plus actifs sur la période choisie (dix par dix). Les comptes @tekkare.com sont écartés par défaut :
+  sans eux, l'équipe qui recette l'app gonflerait chaque chiffre.
+
+  Réservé aux superadmins, comme les métadonnées : la tuile n'est posée par le
+  cadre que pour eux, et la route serveur revalide le droit.
+-->
+<template>
+  <div class="toolbar_tab_container stats_panel">
+    <div class="stats_controls">
+      <div class="stats_switches">
+        <RmSegmented
+          v-model="scope"
+          :options="scopeOptions"
+          size="sm"
+          variant="soft"
+          :aria-label="isFr ? 'Périmètre' : 'Scope'"
+        />
+        <RmSegmented
+          v-model="period"
+          :options="periodOptions"
+          size="sm"
+          variant="soft"
+          class="stats_periods"
+          :aria-label="isFr ? 'Période' : 'Period'"
+        />
+      </div>
+      <label class="stats_internal">
+        <RmToggle v-model="internal" :label="isFr ? 'Inclure Tekkare' : 'Include Tekkare'" />
+        <span>{{ isFr ? "Inclure les comptes Tekkare" : "Include Tekkare accounts" }}</span>
+      </label>
+    </div>
+
+    <div v-if="pending && !data" class="stats_loading">
+      <RmSkeleton v-for="i in 3" :key="i" width="100%" :height="88" radius="8px" />
+    </div>
+
+    <p v-else-if="error" class="stats_error">
+      {{ isFr ? "Statistiques illisibles : " : "Could not read statistics: " }}{{ errorMessage }}
+    </p>
+
+    <template v-else-if="data">
+      <section class="stats_section">
+        <p v-if="scope === 'page'" class="stats_section_title">
+          {{ isFr ? "Cette page" : "This page" }}
+          <span v-if="labelOf(data.path) !== data.path" class="stats_path_label">{{ labelOf(data.path) }}</span>
+          <code class="stats_path">{{ data.path }}</code>
+        </p>
+        <p v-else class="stats_section_title">{{ isFr ? "Toute l'app" : "Whole app" }}</p>
+        <div class="stats_kpis">
+          <RmKpi v-for="k in kpis(data[scope][period])" :key="k.label" :label="k.label" :value="k.value" />
+        </div>
+      </section>
+
+      <section class="stats_section">
+        <p class="stats_section_title">{{ isFr ? "Utilisateurs les plus actifs" : "Most active users" }}</p>
+        <p v-if="usersError" class="stats_error">{{ usersError }}</p>
+        <p v-else-if="!usersLoading && !users.length" class="stats_empty">
+          {{ isFr ? "Aucun utilisateur sur la période." : "No users in this period." }}
+        </p>
+        <table v-if="users.length" class="stats_table">
+          <thead>
+            <tr>
+              <th class="stats_rank">#</th>
+              <th>{{ isFr ? "Utilisateur" : "User" }}</th>
+              <th>Workspace</th>
+              <th class="stats_num">{{ isFr ? "Pages vues" : "Page views" }}</th>
+              <th class="stats_num">{{ isFr ? "Visites" : "Visits" }}</th>
+              <th class="stats_num">
+                <RmTooltip :text="screensHint" dir="bottom" max-width="300px" full>
+                  <span class="stats_hint">{{ isFr ? "Écrans" : "Screens" }}</span>
+                </RmTooltip>
+              </th>
+              <th class="stats_num">{{ isFr ? "Dernière vue" : "Last seen" }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(u, i) in users" :key="u.email || i">
+              <td class="stats_rank">{{ i + 1 }}</td>
+              <td>
+                <div class="stats_user">
+                  <span v-if="u.name" class="stats_user_name">{{ u.name }}</span>
+                  <span class="stats_user_email">{{ u.email || (isFr ? "anonyme" : "anonymous") }}</span>
+                </div>
+              </td>
+              <td class="stats_workspace">{{ u.workspace }}</td>
+              <td class="stats_num">{{ rmNumber(u.pageviews) }}</td>
+              <td class="stats_num">{{ rmNumber(u.sessions) }}</td>
+              <td class="stats_num">{{ rmNumber(u.pages) }}</td>
+              <td class="stats_num">{{ seen(u.lastSeen) }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="usersLoading" class="stats_loading">
+          <RmSkeleton v-for="i in 3" :key="i" width="100%" :height="28" radius="6px" />
+        </div>
+        <RmButton
+          v-else-if="usersHasMore"
+          variant="secondary"
+          size="sm"
+          class="stats_more"
+          @click="loadUsers()"
+        >
+          {{ isFr ? "Charger plus" : "Load more" }}
+        </RmButton>
+      </section>
+
+      <!-- Le classement des pages n'a de sens qu'a l'echelle de l'app. -->
+      <section v-if="scope === 'app'" class="stats_section">
+        <p class="stats_section_title">{{ isFr ? "Pages les plus vues" : "Most viewed pages" }}</p>
+        <p v-if="!topPages.length" class="stats_empty">
+          {{ isFr ? "Aucune vue sur la période." : "No views in this period." }}
+        </p>
+        <table v-else class="stats_table">
+          <thead>
+            <tr>
+              <th>{{ isFr ? "Page" : "Page" }}</th>
+              <th class="stats_num">{{ isFr ? "Pages vues" : "Page views" }}</th>
+              <th class="stats_num">{{ isFr ? "Utilisateurs" : "Users" }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="p in topPages" :key="p.path" :class="{ 'stats_row--current': p.path === data.path }">
+              <td>
+                <NuxtLink :to="p.path" class="stats_page">
+                  <span class="stats_page_label">{{ labelOf(p.path) }}</span>
+                  <span v-if="labelOf(p.path) !== p.path" class="stats_page_path">{{ p.path }}</span>
+                </NuxtLink>
+              </td>
+              <td class="stats_num">{{ rmNumber(p.pageviews[period]) }}</td>
+              <td class="stats_num">{{ rmNumber(p.users[period]) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <p class="stats_note">
+        {{ isFr ? "Source : PostHog, production" : "Source: PostHog, production" }} ({{ data.hosts.join(", ") }})
+      </p>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { rmNumber } from "@tekkare/romulus/utils/format";
+import type { OipStats, OipStatsMetrics, OipStatsPeriod, OipStatsUser, OipStatsUsers } from "../../types/stats";
+
+const props = defineProps<{
+  // Passees par OipShell a tous les panneaux ; les chiffres sont ceux de l'app.
+  appKey?: string;
+  superAdmin?: boolean;
+  /**
+   * Titre lisible d'un chemin (celui de la navigation), donne par l'app dans
+   * `panelProps.Statistics` : les lecteurs du panneau ne lisent pas les URL.
+   * Absent ou sans reponse, le chemin s'affiche tel quel.
+   */
+  pageLabel?: (path: string) => string | undefined;
+}>();
+
+const labelOf = (path: string) => props.pageLabel?.(path) || path;
+
+const { locale } = useI18n();
+const route = useRoute();
+const isFr = computed(() => locale.value !== "en");
+
+const period = ref<OipStatsPeriod>("30d");
+const internal = ref(false);
+
+const periodOptions = computed(() => [
+  { value: "today", label: isFr.value ? "Aujourd'hui" : "Today" },
+  { value: "7d", label: isFr.value ? "7 jours" : "7 days" },
+  { value: "30d", label: isFr.value ? "30 jours" : "30 days" },
+  { value: "90d", label: isFr.value ? "90 jours" : "90 days" },
+]);
+
+// Une requete rend les quatre periodes : changer de periode ne refetch pas.
+const panelConfig = useAppConfig().oip.panels.Statistics;
+const { data, pending, error } = useFetch<OipStats>(panelConfig.endpoint, {
+  key: "oip-rail-statistics",
+  query: computed(() => ({ path: route.path, internal: internal.value ? "1" : "0" })),
+});
+
+const errorMessage = computed(
+  () => (error.value as any)?.data?.message || error.value?.message || ""
+);
+
+function kpis(m: OipStatsMetrics) {
+  return [
+    { label: isFr.value ? "Utilisateurs" : "Users", value: rmNumber(m.users) },
+    { label: isFr.value ? "Visites" : "Visits", value: rmNumber(m.sessions) },
+    { label: isFr.value ? "Pages vues" : "Page views", value: rmNumber(m.pageviews) },
+  ];
+}
+
+// Perimetre de tout le panneau : l'ecran ouvert (par defaut) ou toute l'app.
+const scope = ref<"app" | "page">("page");
+
+// Classement des utilisateurs : dix par dix, remis a zero quand le
+// perimetre change (periode, ecran, comptes Tekkare).
+const USERS_PAGE = 10;
+const scopeOptions = computed(() => [
+  { value: "page", label: isFr.value ? "Cette page" : "This page" },
+  { value: "app", label: isFr.value ? "Toute l'app" : "Whole app" },
+]);
+const users = ref<OipStatsUser[]>([]);
+const usersHasMore = ref(false);
+const usersLoading = ref(false);
+const usersError = ref("");
+let usersRequest = 0;
+
+async function loadUsers(reset = false) {
+  const request = ++usersRequest;
+  if (reset) users.value = [];
+  usersLoading.value = true;
+  usersError.value = "";
+  try {
+    // Deduite de `endpoint` quand l'app ne la donne pas : une config d'app
+    // (ou un cache) d'avant cette cle enverrait sinon `$fetch(undefined)`.
+    const usersEndpoint = panelConfig.usersEndpoint ?? `${panelConfig.endpoint}/users`;
+    const res = await $fetch<OipStatsUsers>(usersEndpoint, {
+      query: {
+        period: period.value,
+        scope: scope.value,
+        path: route.path,
+        internal: internal.value ? "1" : "0",
+        offset: users.value.length,
+        limit: USERS_PAGE,
+      },
+    });
+    if (request !== usersRequest) return;
+    // Une reponse sans liste (page HTML d'un serveur qui ne connait pas la
+    // route, par exemple) : on montre ce qui est arrive plutot que planter.
+    if (!Array.isArray(res?.users)) {
+      throw new Error(`${isFr.value ? "Réponse inattendue" : "Unexpected response"} : ${String(typeof res === "string" ? res : JSON.stringify(res)).slice(0, 160)}`);
+    }
+    users.value = [...users.value, ...res.users];
+    usersHasMore.value = res.hasMore;
+  } catch (err: any) {
+    if (request !== usersRequest) return;
+    usersError.value = err?.data?.message || err?.message || "";
+  } finally {
+    if (request === usersRequest) usersLoading.value = false;
+  }
+}
+watch([period, scope, internal, () => route.path], () => loadUsers(true), { immediate: true });
+
+const screensHint = computed(() =>
+  isFr.value
+    ? "Nombre de pages différentes ouvertes sur la période, langue et paramètres d'URL ignorés. 310 pages vues sur 22 écrans : 310 affichages répartis sur 22 pages. Chaque fiche (une marque, un produit) compte pour un écran."
+    : "Number of distinct pages opened in the period, ignoring language and URL parameters. 310 page views over 22 screens: 310 displays spread across 22 pages. Each detail page (a brand, a product) counts as one screen."
+);
+
+const seen = (iso: string) =>
+  iso ? new Date(iso).toLocaleDateString(isFr.value ? "fr-FR" : "en-GB", { day: "2-digit", month: "short" }) : "";
+
+const topPages = computed(() =>
+  (data.value?.topPages ?? [])
+    .filter((p) => p.pageviews[period.value] > 0)
+    .sort((a, b) => b.pageviews[period.value] - a.pageviews[period.value])
+    .slice(0, 10)
+);
+</script>
+
+<style scoped>
+.stats_panel {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.stats_controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stats_internal {
+  align-items: center;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  gap: 8px;
+}
+
+.stats_loading {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.stats_section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.stats_section_title {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 8px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.stats_path {
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  word-break: break-all;
+}
+
+.stats_switches {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.stats_periods {
+  flex: 1;
+  min-width: 280px;
+}
+
+.stats_rank {
+  color: var(--text-secondary);
+  width: 28px;
+}
+
+.stats_user {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.stats_user_name {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.stats_user_email {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.stats_workspace {
+  overflow-wrap: anywhere;
+}
+
+.stats_hint {
+  cursor: help;
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+}
+
+.stats_more {
+  align-self: center;
+}
+
+.stats_kpis {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.stats_table {
+  border-collapse: collapse;
+  font-size: 13px;
+  width: 100%;
+}
+
+.stats_table th {
+  border-bottom: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-weight: 600;
+  padding: 6px 4px;
+  text-align: left;
+}
+
+.stats_table td {
+  border-bottom: 1px solid var(--border-default);
+  padding: 6px 4px;
+  vertical-align: middle;
+}
+
+.stats_num {
+  text-align: right !important;
+  white-space: nowrap;
+}
+
+.stats_page {
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  overflow-wrap: anywhere;
+  text-decoration: none;
+}
+
+.stats_page:hover .stats_page_label {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.stats_page_path {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.stats_path_label {
+  color: var(--text-primary);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.stats_row--current td {
+  background: var(--bg-surface-hover, var(--bg-surface));
+  font-weight: 600;
+}
+
+.stats_empty,
+.stats_note {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-style: italic;
+  margin: 0;
+}
+
+.stats_error {
+  color: var(--color-danger, #d64545);
+  font-size: 13px;
+  margin: 0;
+}
+</style>

package/layer/app/types/stats.ts

@@ -0,0 +1,49 @@
+// Reponse de GET /api/oip/stats, servie par le layer OIP (panneau « Statistiques »).
+
+export const OIP_STATS_PERIODS = ["today", "7d", "30d", "90d"] as const;
+export type OipStatsPeriod = (typeof OIP_STATS_PERIODS)[number];
+
+export type OipStatsMetrics = {
+  /** Personnes distinctes (person_id PostHog). */
+  users: number;
+  /** Sessions distinctes ($session_id). */
+  sessions: number;
+  /** Vues de page ($pageview). */
+  pageviews: number;
+};
+
+export type OipStatsTopPage = {
+  path: string;
+  pageviews: Record<OipStatsPeriod, number>;
+  users: Record<OipStatsPeriod, number>;
+};
+
+export type OipStats = {
+  /** Chemin de l'ecran mesure, normalise (sans langue ni barre finale). */
+  path: string;
+  /** Hotes PostHog retenus pour l'app (ceux de ses `prod_url`). */
+  hosts: string[];
+  page: Record<OipStatsPeriod, OipStatsMetrics>;
+  app: Record<OipStatsPeriod, OipStatsMetrics>;
+  topPages: OipStatsTopPage[];
+};
+
+export type OipStatsUser = {
+  email: string;
+  /** Prenom et nom PostHog, vide quand la fiche ne les porte pas. */
+  name: string;
+  /** Nom du dernier workspace vu, son id quand l'API ne le connait pas. */
+  workspace: string;
+  pageviews: number;
+  sessions: number;
+  /** Ecrans distincts vus. */
+  pages: number;
+  /** Derniere vue de page, ISO. */
+  lastSeen: string;
+};
+
+/** Reponse de GET /api/oip/stats/users : une page du classement. */
+export type OipStatsUsers = {
+  users: OipStatsUser[];
+  hasMore: boolean;
+};

package/layer/app/utils/oipRail.ts

@@ -16,9 +16,10 @@ export type OipRailTileKey =
   | "Topics"
   | "Tutorials"
   | "Accessibility"
-  | "Metadata";
+  | "Metadata"
+  | "Statistics";
 
-export type OipRailGroupKey = "Documentation" | "ViewsAlerts";
+export type OipRailGroupKey = "Documentation" | "ViewsAlerts" | "Admin";
 
 export type OipRailEntry = {
   key: OipRailTileKey;
@@ -32,11 +33,18 @@ export type OipRailEntry = {
   frame?: boolean;
   /** Sa pastille reste sur son onglet, sans s'ajouter a celle du groupe. */
   ownCount?: boolean;
+  /**
+   * Largeur propre du panneau, au lieu de `panelWidth`. Reservee aux panneaux
+   * d'outillage qui affichent des tableaux larges (statistiques).
+   */
+  width?: string;
 };
 
 export const OIP_RAIL_GROUPS: Record<OipRailGroupKey, { label: { fr: string; en: string }; icon?: string }> = {
   Documentation: { label: { fr: "À propos de l'app", en: "About the app" }, icon: "info" },
   ViewsAlerts: { label: { fr: "Vues et alertes", en: "Views and alerts" } },
+  // Outillage superadmin : ses membres sont `admin`, le groupe n'existe que pour eux.
+  Admin: { label: { fr: "Admin", en: "Admin" }, icon: "shield-check" },
 };
 
 export const OIP_RAIL_TILES: OipRailEntry[] = [
@@ -65,7 +73,25 @@ export const OIP_RAIL_TILES: OipRailEntry[] = [
   { key: "Topics", label: { fr: "Mes sujets", en: "My topics" }, icon: "star" },
   { key: "Tutorials", label: { fr: "Tutoriels", en: "Tutorials" }, icon: "graduation-cap", frame: true },
   { key: "Accessibility", label: { fr: "Accessibilité", en: "Accessibility" }, icon: "person-arms-spread", frame: true },
-  { key: "Metadata", label: { fr: "Métadonnées", en: "Metadata" }, icon: "brackets-curly", admin: true, frame: true },
+  // Statistiques d'abord : le groupe Admin s'ouvre sur elles. La largeur vaut
+  // pour tout le groupe, les onglets ne refluent pas le panneau.
+  {
+    key: "Statistics",
+    label: { fr: "Statistiques", en: "Statistics" },
+    icon: "chart-line-up",
+    group: "Admin",
+    admin: true,
+    frame: true,
+    width: "960px",
+  },
+  {
+    key: "Metadata",
+    label: { fr: "Métadonnées", en: "Metadata" },
+    icon: "brackets-curly",
+    group: "Admin",
+    admin: true,
+    frame: true,
+  },
 ];
 
 /** Etat d'une tuile pour l'ecran : `true` la sert, un objet la sert avec sa pastille. */

package/layer/nuxt.config.ts

@@ -37,5 +37,14 @@ export default defineNuxtConfig({
     oipEsIndicesToken: "",
     /** Vrai en preproduction : interroge `staging_physical` quand il existe. */
     oipEsIndicesStaging: false,
+    /**
+     * Panneau Statistiques : cle personnelle PostHog (scope query:read), id
+     * numerique du projet et hote de l'API (pas celui d'ingestion). Vides :
+     * POSTHOG_STATS_KEY (ou POSTHOG_PERSONAL_API_KEY), POSTHOG_PROJECT_ID,
+     * POSTHOG_API_HOST.
+     */
+    oipPosthogKey: "",
+    oipPosthogProjectId: "",
+    oipPosthogHost: "",
   },
 });

package/layer/server/api/oip/stats/users.get.ts

@@ -0,0 +1,80 @@
+import { defineEventHandler } from "h3";
+import { OIP_STATS_PATH, OIP_STATS_SINCE, oipStatsContext } from "../../../utils/oipPosthog";
+import { oipWorkspaceNames } from "../../../utils/oipWorkspaces";
+import { OIP_STATS_PERIODS, type OipStatsPeriod, type OipStatsUsers } from "../../../../app/types/stats";
+
+/**
+ * GET /api/oip/stats/users?period=7d&scope=app&offset=0&limit=10&path=&internal=0,
+ * servi par le layer OIP (panneau « Statistiques »).
+ *
+ * Le classement des utilisateurs par vues de page sur la periode, pour toute
+ * l'app (`scope=app`) ou l'ecran `path` (`scope=page`), une page a la fois :
+ * `hasMore` dit s'il reste des lignes apres celle-ci.
+ *
+ * Le workspace est le dernier `workspace_id` porte par les vues de la
+ * personne sur la periode, nomme par la Virtual Lab API.
+ *
+ * Perimetre, cle et droit : cf. oipStatsContext.
+ */
+
+const MAX_LIMIT = 100;
+const MAX_OFFSET = 5000;
+const CHUNK = 100;
+
+const prop = (name: string) => `nullIf(toString(person.properties.${name}), '')`;
+
+export default defineEventHandler(async (event): Promise<OipStatsUsers> => {
+  const { query, where, hogql } = await oipStatsContext(event);
+
+  const period = (OIP_STATS_PERIODS as readonly string[]).includes(String(query.period))
+    ? (query.period as OipStatsPeriod)
+    : "7d";
+  const onPage = query.scope === "page";
+  const offset = Math.min(MAX_OFFSET, Math.max(0, Math.floor(Number(query.offset) || 0)));
+  const limit = Math.min(MAX_LIMIT, Math.max(1, Math.floor(Number(query.limit) || 10)));
+
+  // PostHog refuse OFFSET avec une cle personnelle : on lit depuis le haut du
+  // classement et on coupe ici. Une ligne de plus que demande : sa presence
+  // dit qu'il en reste. Lu par paquets de CHUNK lignes : les « Charger plus »
+  // suivants retombent sur la meme requete, servie par le cache.
+  const rowCap = Math.ceil((offset + limit + 1) / CHUNK) * CHUNK;
+  const ranking = hogql(`
+    SELECT
+      any(${prop("email")}),
+      any(${prop("firstName")}), any(${prop("lastName")}),
+      any(${prop("first_name")}), any(${prop("last_name")}), any(${prop("name")}),
+      argMaxIf(toString(properties.workspace_id), timestamp, notEmpty(coalesce(toString(properties.workspace_id), ''))),
+      count() AS pageviews,
+      uniq($session_id),
+      uniq(${OIP_STATS_PATH}),
+      max(timestamp) AS last_seen
+    FROM events
+    WHERE ${where} AND timestamp >= ${OIP_STATS_SINCE[period]}${onPage ? ` AND ${OIP_STATS_PATH} = {path}` : ""}
+    GROUP BY person_id
+    ORDER BY pageviews DESC, last_seen DESC
+    LIMIT ${rowCap}
+  `);
+  const [rows, workspaces] = await Promise.all([ranking, oipWorkspaceNames(event)]);
+
+  const text = (v: unknown) => (v == null ? "" : String(v).trim());
+  return {
+    hasMore: rows.length > offset + limit,
+    users: rows.slice(offset, offset + limit).map((r) => {
+      const [email, firstName, lastName, first_name, last_name, name, workspaceId, pageviews, sessions, pages, lastSeen] =
+        r;
+      const full =
+        [text(firstName), text(lastName)].filter(Boolean).join(" ") ||
+        [text(first_name), text(last_name)].filter(Boolean).join(" ") ||
+        text(name);
+      return {
+        email: text(email),
+        name: full,
+        workspace: workspaces.get(text(workspaceId)) ?? text(workspaceId),
+        pageviews: Number(pageviews) || 0,
+        sessions: Number(sessions) || 0,
+        pages: Number(pages) || 0,
+        lastSeen: text(lastSeen),
+      };
+    }),
+  };
+});

package/layer/server/api/oip/stats.get.ts

@@ -0,0 +1,88 @@
+import { defineEventHandler } from "h3";
+import { OIP_STATS_PATH, OIP_STATS_SINCE, oipStatsContext } from "../../utils/oipPosthog";
+import {
+  OIP_STATS_PERIODS,
+  type OipStats,
+  type OipStatsMetrics,
+  type OipStatsPeriod,
+} from "../../../app/types/stats";
+
+/**
+ * GET /api/oip/stats?path=/hubr/x&internal=0, servi par le layer OIP
+ * (panneau « Statistiques »).
+ *
+ * L'audience de l'ecran ouvert et de toute l'app, lue dans PostHog par une
+ * requete HogQL : personnes, sessions et vues de page, aujourd'hui et sur 7,
+ * 30 et 90 jours, plus les pages les plus vues.
+ *
+ * L'app est designee par l'hote de ses `prod_url` (`$host` des evenements),
+ * comme les notes la designent par son URL : le projet PostHog est commun a
+ * toute la flotte. Le plugin PostHog des apps ne capture ni localhost ni
+ * staging, il n'y a donc que la prod a compter.
+ *
+ * `internal=0` (defaut) ecarte les comptes @tekkare.com.
+ *
+ * Cle PostHog et perimetre commun : cf. oipStatsContext.
+ *
+ * Reservee aux superadmins, comme les metadonnees.
+ */
+
+const TOP_PAGES = 100;
+
+export default defineEventHandler(async (event): Promise<OipStats> => {
+  const { path, hosts, where, hogql } = await oipStatsContext(event);
+  const SINCE = OIP_STATS_SINCE;
+  const PATH = OIP_STATS_PATH;
+
+  const onPage = `${PATH} = {path}`;
+  const metrics = (scope: string, cond: string) =>
+    OIP_STATS_PERIODS.flatMap((p) => {
+      const c = `timestamp >= ${SINCE[p]}${cond ? ` AND ${cond}` : ""}`;
+      return [
+        `uniqIf(person_id, ${c}) AS ${scope}_users_${p.replace(/\W/g, "")}`,
+        `uniqIf($session_id, ${c}) AS ${scope}_sessions_${p.replace(/\W/g, "")}`,
+        `countIf(${c}) AS ${scope}_pageviews_${p.replace(/\W/g, "")}`,
+      ];
+    });
+
+  const [totals, top] = await Promise.all([
+    hogql(`SELECT ${[...metrics("page", onPage), ...metrics("app", "")].join(", ")} FROM events WHERE ${where}`),
+    hogql(`
+      SELECT ${PATH} AS page,
+        ${OIP_STATS_PERIODS.map((p) => `countIf(timestamp >= ${SINCE[p]})`).join(", ")},
+        ${OIP_STATS_PERIODS.map((p) => `uniqIf(person_id, timestamp >= ${SINCE[p]})`).join(", ")}
+      FROM events
+      WHERE ${where}
+      GROUP BY page
+      ORDER BY count() DESC
+      LIMIT ${TOP_PAGES}
+    `),
+  ]);
+
+  // Une ligne : page puis app, chaque periode portant users, sessions, pageviews.
+  const row = (totals[0] ?? []).map(Number);
+  const read = (offset: number) =>
+    Object.fromEntries(
+      OIP_STATS_PERIODS.map((p, i) => {
+        const [users = 0, sessions = 0, pageviews = 0] = row.slice(offset + i * 3, offset + i * 3 + 3);
+        return [p, { users, sessions, pageviews } satisfies OipStatsMetrics];
+      }),
+    ) as Record<OipStatsPeriod, OipStatsMetrics>;
+  const span = OIP_STATS_PERIODS.length * 3;
+
+  const n = OIP_STATS_PERIODS.length;
+  const byPeriod = (cells: unknown[]) =>
+    Object.fromEntries(OIP_STATS_PERIODS.map((p, i) => [p, Number(cells[i]) || 0])) as Record<OipStatsPeriod, number>;
+
+  return {
+    path,
+    hosts,
+    page: read(0),
+    app: read(span),
+    topPages: top.map((r) => ({
+      path: String(r[0] || "/"),
+      pageviews: byPeriod(r.slice(1, 1 + n)),
+      users: byPeriod(r.slice(1 + n, 1 + 2 * n)),
+    })),
+  };
+});

package/layer/server/utils/oipPosthog.ts

@@ -0,0 +1,134 @@
+import type { H3Event } from "h3";
+import type { OipStatsPeriod } from "../../app/types/stats";
+import { assertOipSuperAdmin, oipAppUrls } from "./oipGuards";
+
+// Socle des routes /api/oip/stats* (panneau « Statistiques ») : droit, cle
+// PostHog, perimetre de l'app et appel HogQL. Prefixe `oip` pour ne pas
+// masquer les helpers des apps (utils serveur auto-importes).
+
+// Debut de chaque periode, dans le fuseau du projet PostHog.
+export const OIP_STATS_SINCE: Record<OipStatsPeriod, string> = {
+  today: "toStartOfDay(now())",
+  "7d": "now() - INTERVAL 7 DAY",
+  "30d": "now() - INTERVAL 30 DAY",
+  "90d": "now() - INTERVAL 90 DAY",
+};
+
+// Chemin sans prefixe de langue ni barre finale : `/fr/hubr/x/` et `/hubr/x`
+// sont le meme ecran (meme peigne que `oipStatsNormalize`).
+const BARE = "replaceRegexpOne(replaceRegexpOne(toString(properties.$pathname), '^/(en|fr)(/|$)', '/'), '/+$', '')";
+export const OIP_STATS_PATH = `if(empty(${BARE}), '/', ${BARE})`;
+
+// PostHog plafonne son API de requetes (429 au-dela) : chaque ouverture du
+// panneau, chaque periode, chaque « Charger plus » en coutait une. Les memes
+// requetes sont donc servies de memoire cinq minutes ; les chiffres d'une
+// audience n'ont pas besoin d'etre plus frais.
+const CACHE_TTL_MS = 5 * 60 * 1000;
+const CACHE_MAX = 500;
+const RETRY_MAX_S = 20;
+const cache = new Map<string, { at: number; rows: Promise<unknown[][]> }>();
+
+export function oipStatsNormalize(path: string) {
+  return (path.split("?")[0] || "").replace(/^\/(fr|en)(?=\/|$)/, "").replace(/\/+$/, "") || "/";
+}
+
+/**
+ * Verifie le droit et la configuration, puis rend le perimetre commun : les
+ * vues de page des 90 derniers jours sur les hotes de l'app (`prod_url`),
+ * sans les comptes @tekkare.com sauf `internal=1`, et `hogql` pour
+ * interroger PostHog. `path` (normalise) est passe en placeholder `{path}`.
+ *
+ * Cle personnelle PostHog (scope query:read) et id numerique du projet :
+ * `runtimeConfig.oipPosthogKey` / `oipPosthogProjectId`, sinon les env
+ * POSTHOG_STATS_KEY (ou POSTHOG_PERSONAL_API_KEY, le nom d'oip7) /
+ * POSTHOG_PROJECT_ID. La cle ne quitte jamais le serveur.
+ */
+export async function oipStatsContext(event: H3Event) {
+  await assertOipSuperAdmin(event);
+
+  const config = useRuntimeConfig();
+  const key =
+    (config.oipPosthogKey as string) || process.env.POSTHOG_STATS_KEY || process.env.POSTHOG_PERSONAL_API_KEY;
+  const projectId = (config.oipPosthogProjectId as string) || process.env.POSTHOG_PROJECT_ID;
+  if (!key || !projectId) {
+    throw createError({
+      status: 501,
+      message: "PostHog stats are not configured (POSTHOG_STATS_KEY, POSTHOG_PROJECT_ID)",
+    });
+  }
+  const apiHost = ((config.oipPosthogHost as string) || process.env.POSTHOG_API_HOST || "https://eu.posthog.com").replace(
+    /\/+$/,
+    "",
+  );
+
+  const query = getQuery(event);
+  const path = oipStatsNormalize(String(query.path || "/"));
+  const internal = query.internal === "1";
+  const hosts = [...new Set(oipAppUrls().map((url) => new URL(url).host))];
+
+  // Valeurs passees en placeholders HogQL : PostHog les substitue lui-meme.
+  const values: Record<string, string> = { path };
+  hosts.forEach((h, i) => (values[`host${i}`] = h));
+
+  const where = [
+    "event = '$pageview'",
+    `timestamp >= ${OIP_STATS_SINCE["90d"]}`,
+    `toString(properties.$host) IN (${hosts.map((_, i) => `{host${i}}`).join(", ")})`,
+    internal ? "" : "NOT endsWith(lower(coalesce(toString(person.properties.email), '')), '@tekkare.com')",
+  ]
+    .filter(Boolean)
+    .join(" AND ");
+
+  function hogql(sql: string): Promise<unknown[][]> {
+    // Seules les valeurs que la requete lit : le classement de toute l'app ne
+    // depend pas de l'ecran ouvert, et doit rester en cache d'une page a l'autre.
+    const used = Object.fromEntries(Object.entries(values).filter(([name]) => sql.includes(`{${name}}`)));
+    const cacheKey = JSON.stringify([projectId, sql, used]);
+    const hit = cache.get(cacheKey);
+    if (hit && Date.now() - hit.at < CACHE_TTL_MS) return hit.rows;
+
+    if (cache.size >= CACHE_MAX) {
+      for (const [k, v] of cache) if (Date.now() - v.at >= CACHE_TTL_MS) cache.delete(k);
+      if (cache.size >= CACHE_MAX) cache.delete(cache.keys().next().value!);
+    }
+    // La promesse elle-meme : deux appels simultanes partagent la requete.
+    const rows = run(sql, used);
+    cache.set(cacheKey, { at: Date.now(), rows });
+    rows.catch(() => cache.delete(cacheKey));
+    return rows;
+  }
+
+  async function run(sql: string, used: Record<string, string>, retried = false): Promise<unknown[][]> {
+    try {
+      const res = await $fetch<{ results?: unknown[][] }>(`${apiHost}/api/projects/${projectId}/query/`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${key}` },
+        body: { query: { kind: "HogQLQuery", query: sql, values: used } },
+      });
+      return res.results || [];
+    } catch (err: any) {
+      const status = err?.response?.status ?? err?.statusCode ?? "?";
+      const detail = err?.data?.detail || err?.data?.message || err?.message || String(err);
+      console.error(`[oip/stats] PostHog query failed (${status}): ${String(detail).slice(0, 300)}`);
+      if (status === 429) {
+        // « Request was throttled. Expected available in 1028 seconds. »
+        const wait = Number(/available in (\d+) second/.exec(String(detail))?.[1]);
+        // Limite a la minute (l'ouverture du panneau envoie trois requetes
+        // d'un coup) : on attend et on reessaie une fois. Le quota horaire,
+        // lui, se dit au lecteur.
+        if (!retried && wait && wait <= RETRY_MAX_S) {
+          await new Promise((resolve) => setTimeout(resolve, (wait + 1) * 1000));
+          return run(sql, used, true);
+        }
+        const minutes = wait ? Math.max(1, Math.ceil(wait / 60)) : 1;
+        throw createError({
+          status: 429,
+          message: `Quota de requêtes PostHog atteint, réessayer dans ${minutes} min`,
+        });
+      }
+      throw createError({ status: 502, message: `PostHog query failed (${status})` });
+    }
+  }
+
+  return { query, path, hosts, where, hogql };
+}

package/layer/server/utils/oipWorkspaces.ts

@@ -0,0 +1,51 @@
+import type { H3Event } from "h3";
+import { getOipAccessToken } from "./oipAuth";
+
+// Noms des workspaces de la Virtual Lab API, par id, pour le panneau
+// « Statistiques » : PostHog ne porte que `workspace_id` sur les evenements.
+// Prefixe `oip` pour ne pas masquer les helpers des apps.
+
+// La liste pagine a 100 et trie par date de creation : une seule page
+// cacherait les plus anciens.
+const PAGE_SIZE = 100;
+const MAX_PAGES = 20;
+const TTL_MS = 10 * 60 * 1000;
+
+let cache: { at: number; names: Map<string, string> } | null = null;
+
+/**
+ * Id vers nom de tous les workspaces, lus par `/superadmin/workspaces` avec le
+ * jeton de l'appelant (deja verifie superadmin), gardes dix minutes. En cas
+ * d'echec, une table vide : les statistiques restent lisibles sans les noms.
+ */
+export async function oipWorkspaceNames(event: H3Event): Promise<Map<string, string>> {
+  if (cache && Date.now() - cache.at < TTL_MS) return cache.names;
+
+  const token = await getOipAccessToken(event);
+  const apiUrl = (useRuntimeConfig().oipVirtualLabApiUrl as string) || process.env.VIRTUAL_LAB_API_URL;
+  if (!token || !apiUrl) return new Map();
+
+  type Page = { workspaces?: { id?: string; name?: string }[]; pagination?: { totalPages?: number } };
+  const listPage = (page: number) =>
+    $fetch<Page>(`${apiUrl}/superadmin/workspaces`, {
+      headers: { Authorization: `Bearer ${token}` },
+      query: { page, limit: PAGE_SIZE },
+    });
+
+  try {
+    const first = await listPage(1);
+    const pages = [first];
+    const total = Math.min(first.pagination?.totalPages ?? 1, MAX_PAGES);
+    if (total > 1) pages.push(...(await Promise.all(Array.from({ length: total - 1 }, (_, i) => listPage(i + 2)))));
+
+    const names = new Map<string, string>();
+    for (const page of pages) {
+      for (const w of page.workspaces ?? []) if (w.id && w.name) names.set(w.id, w.name);
+    }
+    cache = { at: Date.now(), names };
+    return names;
+  } catch (err: any) {
+    console.error(`[oip/stats] workspace list failed (${err?.response?.status ?? err?.statusCode ?? "?"})`);
+    return new Map();
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.244",
+  "version": "0.1.246",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",