qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/analytics.vue

@@ -0,0 +1,618 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue"
+
+definePageMeta({ layout: false })
+
+type AnalyticsRange = "24h" | "7d" | "30d" | "90d"
+
+const analyticsRange = ref<AnalyticsRange>("7d")
+const analyticsLoading = ref(false)
+const initialLoading = ref(true)
+const summaryData = ref<any>(null)
+const customEvents = ref<any[]>([])
+const activeTab = ref<"overview" | "events">("overview")
+const sendingEvent = ref(false)
+
+const fallbackData = {
+  totalPageviews: 18450,
+  uniqueVisitors: 4120,
+  totalEvents: 1240,
+  avgDurationMs: 3.2,
+  topPages: [
+    { path: "/", views: 6840 },
+    { path: "/docs", views: 4210 },
+    { path: "/blog/edge-computing", views: 2890 },
+    { path: "/pricing", views: 1640 },
+    { path: "/about", views: 980 },
+    { path: "/login", views: 890 },
+  ],
+  topReferrers: [
+    { referrer: "Direct / Organic", count: 8200 },
+    { referrer: "github.com", count: 4100 },
+    { referrer: "google.com", count: 3200 },
+    { referrer: "x.com", count: 1850 },
+    { referrer: "news.ycombinator.com", count: 1100 },
+  ],
+  countries: [
+    { country: "United States", code: "US", count: 7200 },
+    { country: "Germany", code: "DE", count: 2850 },
+    { country: "United Kingdom", code: "GB", count: 2420 },
+    { country: "Japan", code: "JP", count: 1810 },
+    { country: "France", code: "FR", count: 1240 },
+    { country: "Canada", code: "CA", count: 980 },
+  ],
+  devices: [
+    { name: "Desktop (Mac / Windows / Linux)", count: 11400, percent: 62 },
+    { name: "Mobile (iOS / Android)", count: 5600, percent: 30 },
+    { name: "Tablet (iPad / Android Tablet)", count: 1450, percent: 8 },
+  ],
+}
+
+const fallbackEvents = [
+  {
+    name: "auth_passkey_register",
+    count: 240,
+    lastSeen: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
+    sampleMetadata: { method: "webauthn", authenticator: "platform" },
+  },
+  {
+    name: "kv_cache_purge",
+    count: 512,
+    lastSeen: new Date(Date.now() - 1000 * 60 * 18).toISOString(),
+    sampleMetadata: { tags: ["cms", "blog"] },
+  },
+  {
+    name: "cms_entry_publish",
+    count: 88,
+    lastSeen: new Date(Date.now() - 1000 * 60 * 42).toISOString(),
+    sampleMetadata: { collection: "posts", id: "edge-performance" },
+  },
+  {
+    name: "agent_chat_query",
+    count: 380,
+    lastSeen: new Date(Date.now() - 1000 * 60 * 75).toISOString(),
+    sampleMetadata: { agent: "agent_chat", stream: true },
+  },
+]
+
+const isPreviewMode = ref(false)
+
+async function loadAnalytics() {
+  analyticsLoading.value = true
+  try {
+    const [summaryRes, eventsRes] = await Promise.all([
+      $fetch<any>("/_qarpeo/api/analytics/summary", {
+        query: { range: analyticsRange.value },
+      }).catch(() => null),
+      $fetch<any>("/_qarpeo/api/analytics/events", {
+        query: { range: analyticsRange.value },
+      }).catch(() => null),
+    ])
+
+    if (summaryRes && summaryRes.totalPageviews !== undefined) {
+      summaryData.value = summaryRes
+      isPreviewMode.value = Boolean(summaryRes.preview)
+    } else {
+      summaryData.value = fallbackData
+      isPreviewMode.value = true
+    }
+
+    if (eventsRes && Array.isArray(eventsRes.events)) {
+      customEvents.value = eventsRes.events
+    } else {
+      customEvents.value = fallbackEvents
+    }
+  } finally {
+    analyticsLoading.value = false
+    initialLoading.value = false
+  }
+}
+
+const maxPageViews = computed(() => {
+  const pages = summaryData.value?.topPages || []
+  return pages.length > 0 ? Math.max(...pages.map((p: any) => p.views)) : 1
+})
+
+const maxReferrers = computed(() => {
+  const refs = summaryData.value?.topReferrers || []
+  return refs.length > 0 ? Math.max(...refs.map((r: any) => r.count)) : 1
+})
+
+const maxCountries = computed(() => {
+  const list = summaryData.value?.countries || []
+  return list.length > 0 ? Math.max(...list.map((c: any) => c.count)) : 1
+})
+
+function fmtDate(iso?: string) {
+  if (!iso) return "—"
+  return new Date(iso).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+async function emitTestEvent() {
+  sendingEvent.value = true
+  try {
+    const eventNames = ["user_signup", "checkout_completed", "export_downloaded", "agent_invoked"]
+    const chosen = eventNames[Math.floor(Math.random() * eventNames.length)]
+
+    // Send real event to API
+    await $fetch("/api/analytics/events", {
+      method: "POST",
+      body: {
+        event: chosen,
+        metadata: { source: "devtools_simulator", site: "playground" },
+      },
+    }).catch(() => {})
+
+    const existing = customEvents.value.find((e) => e.name === chosen)
+    if (existing) {
+      existing.count++
+      existing.lastSeen = new Date().toISOString()
+    } else {
+      customEvents.value.unshift({
+        name: chosen,
+        count: 1,
+        lastSeen: new Date().toISOString(),
+        sampleMetadata: { source: "devtools_simulator", site: "playground" },
+      })
+    }
+  } finally {
+    sendingEvent.value = false
+  }
+}
+
+watch(analyticsRange, () => {
+  loadAnalytics()
+})
+
+onMounted(() => {
+  loadAnalytics()
+})
+</script>
+
+<template>
+  <UDashboardPanel id="devtools-analytics">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-bar-chart-3" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Edge Analytics</span>
+            <UBadge size="xs" color="primary" variant="subtle">Zero-Cookie</UBadge>
+            <UBadge size="xs" color="neutral" variant="subtle">Cloudflare AE</UBadge>
+            <UBadge
+              v-if="isPreviewMode"
+              size="xs"
+              color="warning"
+              variant="subtle"
+              icon="i-lucide-flask-conical"
+              >Preview Data</UBadge
+            >
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-2">
+            <UButton
+              icon="i-lucide-plus"
+              label="Simulate Event"
+              size="xs"
+              color="neutral"
+              variant="subtle"
+              :loading="sendingEvent"
+              @click="emitTestEvent"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh metrics"
+              :loading="analyticsLoading"
+              @click="loadAnalytics"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- Time Range & View Mode Toolbar -->
+      <UDashboardToolbar>
+        <div class="flex items-center justify-between w-full flex-wrap gap-2">
+          <!-- Time Range Segmented Control -->
+          <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+            <UButton
+              v-for="r in ['24h', '7d', '30d', '90d'] as const"
+              :key="r"
+              :label="r.toUpperCase()"
+              size="xs"
+              :color="analyticsRange === r ? 'primary' : 'neutral'"
+              :variant="analyticsRange === r ? 'subtle' : 'ghost'"
+              @click="analyticsRange = r"
+            />
+          </div>
+
+          <!-- View Mode Tabs -->
+          <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+            <UButton
+              label="Overview"
+              icon="i-lucide-layout-grid"
+              size="xs"
+              :color="activeTab === 'overview' ? 'primary' : 'neutral'"
+              :variant="activeTab === 'overview' ? 'subtle' : 'ghost'"
+              @click="activeTab = 'overview'"
+            />
+            <UButton
+              label="Custom Events"
+              icon="i-lucide-activity"
+              size="xs"
+              :color="activeTab === 'events' ? 'primary' : 'neutral'"
+              :variant="activeTab === 'events' ? 'subtle' : 'ghost'"
+              @click="activeTab = 'events'"
+            >
+              <template #trailing>
+                <UBadge size="xs" color="neutral" variant="subtle">
+                  {{ customEvents.length }}
+                </UBadge>
+              </template>
+            </UButton>
+          </div>
+        </div>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <!-- ── TAB 1: OVERVIEW METRICS ──────────────────────────────────── -->
+      <template v-if="activeTab === 'overview'">
+        <!-- Skeleton: Top Summary Cards -->
+        <div v-if="initialLoading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <UCard v-for="i in 4" :key="`kpi-skel-${i}`">
+            <div class="h-3 w-24 rounded bg-muted animate-pulse mb-2"></div>
+            <div class="h-7 w-32 rounded bg-muted animate-pulse mb-2"></div>
+            <div class="h-2 w-28 rounded bg-muted animate-pulse"></div>
+          </UCard>
+        </div>
+
+        <!-- KPI Top Summary Cards -->
+        <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Total Pageviews</span>
+              <UIcon name="i-lucide-eye" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="text-2xl font-extrabold text-highlighted">
+              {{
+                (
+                  summaryData?.totalPageviews ||
+                  summaryData?.summary?.totalPageviews ||
+                  0
+                ).toLocaleString()
+              }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">Zero-cookie edge counts</div>
+          </UCard>
+
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Unique Visitors</span>
+              <UIcon name="i-lucide-users" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="text-2xl font-extrabold text-primary">
+              {{
+                (
+                  summaryData?.uniqueVisitors ||
+                  summaryData?.summary?.uniqueVisitors ||
+                  0
+                ).toLocaleString()
+              }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">Daily rotated anonymous hash</div>
+          </UCard>
+
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Custom Events</span>
+              <UIcon name="i-lucide-zap" class="w-4 h-4 text-success" />
+            </div>
+            <div class="text-2xl font-extrabold text-success">
+              {{
+                (
+                  summaryData?.totalEvents ||
+                  summaryData?.summary?.totalEvents ||
+                  0
+                ).toLocaleString()
+              }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">Conversions & actions</div>
+          </UCard>
+
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Average Response</span>
+              <UIcon name="i-lucide-gauge" class="w-4 h-4 text-warning" />
+            </div>
+            <div class="text-2xl font-extrabold text-highlighted">
+              {{ summaryData?.avgDurationMs ?? 3.4 }} ms
+            </div>
+            <div class="text-[11px] text-muted mt-1">Cloudflare Edge compute</div>
+          </UCard>
+        </div>
+
+        <!-- Skeleton: Distribution Breakdown Grid -->
+        <div v-if="initialLoading" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <UCard v-for="c in 4" :key="`dist-skel-${c}`">
+            <template #header>
+              <div class="h-4 w-32 rounded bg-muted animate-pulse"></div>
+            </template>
+            <div class="space-y-4">
+              <div v-for="r in 4" :key="r" class="space-y-1.5">
+                <div class="flex justify-between">
+                  <div class="h-3 w-36 rounded bg-muted animate-pulse"></div>
+                  <div class="h-3 w-16 rounded bg-muted animate-pulse"></div>
+                </div>
+                <div class="h-2 w-full rounded bg-muted animate-pulse"></div>
+              </div>
+            </div>
+          </UCard>
+        </div>
+
+        <!-- Distribution Breakdown Grid -->
+        <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <!-- Top Paths with Percentage Meters -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span class="font-bold text-sm text-highlighted flex items-center gap-2">
+                  <UIcon name="i-lucide-file-text" class="w-4 h-4 text-primary" />
+                  Top Visited Paths
+                </span>
+                <span class="text-xs text-muted font-mono"
+                  >{{ (summaryData?.topPages || []).length }} paths</span
+                >
+              </div>
+            </template>
+
+            <div class="space-y-3">
+              <div
+                v-for="item in summaryData?.topPages || []"
+                :key="item.path"
+                class="space-y-1 text-xs"
+              >
+                <div class="flex items-center justify-between font-mono">
+                  <span class="text-default font-semibold truncate">{{ item.path }}</span>
+                  <span class="text-muted shrink-0 ml-2"
+                    >{{ item.views.toLocaleString() }} views</span
+                  >
+                </div>
+                <!-- Progress Bar -->
+                <div class="w-full bg-muted/40 h-1.5 rounded-full overflow-hidden">
+                  <div
+                    class="bg-primary h-full rounded-full transition-all duration-500"
+                    :style="{
+                      width: `${Math.round((item.views / maxPageViews) * 100)}%`,
+                    }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Top Referrers with Percentage Meters -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span class="font-bold text-sm text-highlighted flex items-center gap-2">
+                  <UIcon name="i-lucide-compass" class="w-4 h-4 text-primary" />
+                  Top Referrers
+                </span>
+                <span class="text-xs text-muted font-mono"
+                  >{{ (summaryData?.topReferrers || []).length }} sources</span
+                >
+              </div>
+            </template>
+
+            <div class="space-y-3">
+              <div
+                v-for="item in summaryData?.topReferrers || []"
+                :key="item.referrer"
+                class="space-y-1 text-xs"
+              >
+                <div class="flex items-center justify-between">
+                  <span class="text-default font-semibold truncate">{{ item.referrer }}</span>
+                  <span class="text-muted shrink-0 font-mono ml-2"
+                    >{{ item.count.toLocaleString() }} visits</span
+                  >
+                </div>
+                <!-- Progress Bar -->
+                <div class="w-full bg-muted/40 h-1.5 rounded-full overflow-hidden">
+                  <div
+                    class="bg-info h-full rounded-full transition-all duration-500"
+                    :style="{
+                      width: `${Math.round((item.count / maxReferrers) * 100)}%`,
+                    }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Top Countries -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span class="font-bold text-sm text-highlighted flex items-center gap-2">
+                  <UIcon name="i-lucide-globe" class="w-4 h-4 text-primary" />
+                  Top Countries
+                </span>
+                <span class="text-xs text-muted font-mono"
+                  >{{ (summaryData?.countries || []).length }} countries</span
+                >
+              </div>
+            </template>
+
+            <div class="space-y-3">
+              <div
+                v-for="c in summaryData?.countries || []"
+                :key="c.country"
+                class="space-y-1 text-xs"
+              >
+                <div class="flex items-center justify-between">
+                  <span class="flex items-center gap-1.5 text-default font-semibold">
+                    <UBadge size="xs" color="neutral" variant="subtle">{{ c.code || "—" }}</UBadge>
+                    {{ c.country }}
+                  </span>
+                  <span class="text-muted font-mono">{{ c.count.toLocaleString() }} visitors</span>
+                </div>
+                <div class="w-full bg-muted/40 h-1.5 rounded-full overflow-hidden">
+                  <div
+                    class="bg-success h-full rounded-full transition-all duration-500"
+                    :style="{
+                      width: `${Math.round((c.count / maxCountries) * 100)}%`,
+                    }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Devices Distribution -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span class="font-bold text-sm text-highlighted flex items-center gap-2">
+                  <UIcon name="i-lucide-monitor" class="w-4 h-4 text-primary" />
+                  Device Distribution
+                </span>
+              </div>
+            </template>
+
+            <div class="space-y-4">
+              <div
+                v-for="d in summaryData?.devices || []"
+                :key="d.name"
+                class="space-y-1.5 text-xs"
+              >
+                <div class="flex items-center justify-between">
+                  <span class="text-default font-semibold">{{ d.name }}</span>
+                  <span class="text-muted font-mono"
+                    >{{ d.count.toLocaleString() }} ({{
+                      d.percent ?? Math.round((d.count / (summaryData?.totalPageviews || 1)) * 100)
+                    }}%)</span
+                  >
+                </div>
+                <div class="w-full bg-muted/40 h-2 rounded-full overflow-hidden">
+                  <div
+                    class="bg-primary h-full rounded-full transition-all duration-500"
+                    :style="{
+                      width: `${
+                        d.percent ??
+                        Math.round((d.count / (summaryData?.totalPageviews || 1)) * 100)
+                      }%`,
+                    }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </template>
+
+      <!-- ── TAB 2: CUSTOM EVENTS ────────────────────────────────────── -->
+      <template v-else>
+        <UCard :ui="{ body: 'p-0 overflow-hidden' }">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div>
+                <h3 class="font-bold text-sm text-highlighted flex items-center gap-2">
+                  <UIcon name="i-lucide-activity" class="w-4 h-4 text-primary" />
+                  Custom Edge Events
+                </h3>
+                <p class="text-xs text-muted mt-0.5">
+                  Tracked via
+                  <code class="font-mono text-primary"
+                    >qarpeo.analytics.track("event_name", { ... })</code
+                  >
+                </p>
+              </div>
+              <UButton
+                label="Simulate New Event"
+                icon="i-lucide-plus"
+                size="xs"
+                color="primary"
+                :loading="sendingEvent"
+                @click="emitTestEvent"
+              />
+            </div>
+          </template>
+
+          <div class="overflow-x-auto">
+            <table class="w-full text-left text-xs">
+              <thead>
+                <tr class="border-b border-default bg-muted/40 text-muted font-mono">
+                  <th class="py-2.5 px-4 font-semibold">Event Name</th>
+                  <th class="py-2.5 px-4 font-semibold">Occurrences</th>
+                  <th class="py-2.5 px-4 font-semibold">Last Recorded</th>
+                  <th class="py-2.5 px-4 font-semibold">Sample Payload</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-default font-mono">
+                <!-- Skeleton rows during loading -->
+                <tr
+                  v-if="initialLoading"
+                  v-for="i in 5"
+                  :key="`ev-skel-${i}`"
+                  class="animate-pulse"
+                >
+                  <td class="py-3 px-4">
+                    <div class="h-3.5 w-36 rounded bg-muted"></div>
+                  </td>
+                  <td class="py-3 px-4">
+                    <div class="h-4 w-10 rounded bg-muted"></div>
+                  </td>
+                  <td class="py-3 px-4">
+                    <div class="h-3.5 w-20 rounded bg-muted"></div>
+                  </td>
+                  <td class="py-3 px-4">
+                    <div class="h-4 w-48 rounded bg-muted"></div>
+                  </td>
+                </tr>
+
+                <template v-else>
+                  <tr
+                    v-for="ev in customEvents"
+                    :key="ev.name"
+                    class="hover:bg-elevated/50 transition-colors"
+                  >
+                    <td class="py-3 px-4 font-bold text-primary">
+                      {{ ev.name }}
+                    </td>
+                    <td class="py-3 px-4 text-default">
+                      <UBadge size="xs" color="neutral" variant="subtle">
+                        {{ ev.count?.toLocaleString() || 1 }}
+                      </UBadge>
+                    </td>
+                    <td class="py-3 px-4 text-muted">
+                      {{ fmtDate(ev.lastSeen) }}
+                    </td>
+                    <td class="py-3 px-4">
+                      <pre
+                        class="text-[10px] text-muted bg-muted/30 p-1.5 rounded inline-block max-w-sm truncate"
+                        :title="JSON.stringify(ev.sampleMetadata)"
+                        >{{ JSON.stringify(ev.sampleMetadata) }}</pre>
+                    </td>
+                  </tr>
+                  <tr v-if="!customEvents.length">
+                    <td colspan="4" class="text-center py-12 text-muted text-xs font-sans">
+                      No custom events recorded yet. Click "Simulate New Event" above.
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </UCard>
+      </template>
+    </template>
+  </UDashboardPanel>
+</template>