feat(observability): delivery metrics, admin metrics/delivery endpoints, admin API route wiring

app/components/ConsolePage.vue

@@ -108,6 +108,13 @@
             <button class="tab" :class="{ active: view === 'audit' }" @click="switchView('audit')">
               {{ t("tab.audit") }}
             </button>
+            <button
+              class="tab"
+              :class="{ active: view === 'metrics' }"
+              @click="switchView('metrics')"
+            >
+              {{ t("tab.metrics") }}
+            </button>
           </nav>
 
           <template v-if="view === 'groups'">
@@ -210,6 +217,15 @@
               @update:selected-group-id="auditFilterGroup = $event"
             />
           </template>
+
+          <template v-else-if="view === 'metrics'">
+            <MetricsPanel
+              :metrics="metrics"
+              :loading="metricsLoading"
+              :error="metricsError"
+              @refresh="loadMetrics"
+            />
+          </template>
         </template>
       </template>
     </main>
@@ -247,10 +263,10 @@ const router = useRouter();
  * The console view mirrors the URL path so tabs are deep-linkable:
  * /admin (groups) · /admin/logs · /admin/audit. Unknown slugs 404.
  */
-const view = computed<"groups" | "logs" | "audit" | null>(() => {
+const view = computed<"groups" | "logs" | "audit" | "metrics" | null>(() => {
   const seg = route.path.split("/").filter(Boolean)[1];
   if (!seg) return "groups";
-  if (seg === "groups" || seg === "logs" || seg === "audit") return seg;
+  if (seg === "groups" || seg === "logs" || seg === "audit" || seg === "metrics") return seg;
   return null;
 });
 
@@ -265,6 +281,7 @@ const {
   error: auditError,
   load: loadAudit,
 } = useAuditApi();
+const { metrics, loading: metricsLoading, error: metricsError, load: loadMetrics } = useMetrics();
 const {
   groups,
   isSuper,
@@ -319,11 +336,12 @@ watch(
   view,
   (v) => {
     if (v === "audit") loadAudit(50, auditFilterGroup.value || undefined);
+    if (v === "metrics") loadMetrics();
   },
   { immediate: true },
 );
 
-function switchView(next: "groups" | "logs" | "audit"): void {
+function switchView(next: "groups" | "logs" | "audit" | "metrics"): void {
   const path = next === "groups" ? "/admin" : `/admin/${next}`;
   if (route.path !== path) router.replace(path);
 }

app/components/MetricsPanel.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { DeliveryMetrics } from "~/types";
+
+const { t } = useI18n();
+
+defineProps<{
+  metrics: DeliveryMetrics | null;
+  loading: boolean;
+  error: string;
+}>();
+
+const emit = defineEmits<{ refresh: [] }>();
+
+function pct(value: number): string {
+  return `${(value * 100).toFixed(1)}%`;
+}
+</script>
+
+<template>
+  <div class="log-toolbar">
+    <span class="kpi-label">{{ t("metrics.title") }}</span>
+    <button class="btn btn-ghost btn-sm" @click="emit('refresh')">
+      {{ t("metrics.refresh") }}
+    </button>
+  </div>
+
+  <p v-if="error" class="err">{{ error }}</p>
+  <template v-else-if="metrics">
+    <div class="log-list">
+      <article class="log-entry">
+        <div class="log-meta">
+          <span class="kpi-label">{{ t("metrics.total") }}: {{ metrics.total }}</span>
+          <span class="kpi-label">{{ t("metrics.ok") }}: {{ metrics.ok }}</span>
+          <span class="kpi-label">{{ t("metrics.failed") }}: {{ metrics.failed }}</span>
+          <span class="kpi-label"
+            >{{ t("metrics.failureRate") }}: {{ pct(metrics.failureRate) }}</span
+          >
+          <span class="kpi-label">
+            {{ t("metrics.avgDuration") }}: {{ metrics.avgDurationMs.toFixed(0) }}ms
+          </span>
+          <span class="kpi-label">
+            {{ t("metrics.avgAttempts") }}: {{ metrics.avgAttempts.toFixed(1) }}
+          </span>
+        </div>
+      </article>
+
+      <article v-if="metrics.byPlatform.length" class="log-entry">
+        <h3 class="log-head">{{ t("metrics.byPlatform") }}</h3>
+        <div v-for="p in metrics.byPlatform" :key="p.platform" class="log-meta">
+          <span class="kpi-label">{{ p.platform ?? "unknown" }}</span>
+          <span class="kpi-label">{{ t("metrics.ok") }}: {{ p.ok }}</span>
+          <span class="kpi-label">{{ t("metrics.failed") }}: {{ p.failed }}</span>
+        </div>
+      </article>
+
+      <article v-if="metrics.byEvent.length" class="log-entry">
+        <h3 class="log-head">{{ t("metrics.byEvent") }}</h3>
+        <div v-for="e in metrics.byEvent" :key="e.event" class="log-meta">
+          <span class="kpi-label">{{ e.event ?? "unknown" }}</span>
+          <span class="kpi-label">{{ t("metrics.ok") }}: {{ e.ok }}</span>
+          <span class="kpi-label">{{ t("metrics.failed") }}: {{ e.failed }}</span>
+        </div>
+      </article>
+
+      <article v-if="metrics.recentFailures.length" class="log-entry">
+        <h3 class="log-head">{{ t("metrics.recentFailures") }}</h3>
+        <div
+          v-for="f in metrics.recentFailures"
+          :key="f.id ?? `${f.ts}-${f.target}`"
+          class="log-entry"
+        >
+          <span class="log-route">{{ f.event }}</span>
+          <span class="log-meta">{{ f.target }}</span>
+          <span class="log-status ok" v-if="f.errorCode">{{ f.errorCode }}</span>
+        </div>
+      </article>
+    </div>
+  </template>
+  <p v-else-if="!loading" class="empty-log">{{ t("metrics.empty") }}</p>
+</template>