feat(ui): update ui style

app/assets/css/main.css

@@ -35,6 +35,8 @@
   --warn-dim: 254 243 199;
   --bad: 220 38 38;
   --bad-dim: 254 242 242;
+  --info: 37 99 235;
+  --info-dim: 239 246 255;
   --body-text: 48 54 61;
   --code-bg: 240 241 243;
 }
@@ -68,6 +70,8 @@
     --warn-dim: 42 36 16;
     --bad: 240 82 82;
     --bad-dim: 42 22 24;
+    --info: 59 130 246;
+    --info-dim: 23 37 84;
     --body-text: 195 202 214;
     --code-bg: 26 34 48;
   }
@@ -241,6 +245,123 @@
     @apply flex flex-shrink-0 gap-1.5;
   }
 
+  /* ---- Route cards ---- */
+  .route-card {
+    @apply flex animate-rise items-start gap-4 rounded border border-border bg-surface p-4 transition-[border-color,opacity] duration-150;
+  }
+
+  .route-card:hover {
+    @apply border-border-strong;
+  }
+
+  .route-card.disabled {
+    @apply opacity-50;
+  }
+
+  .route-card-main {
+    @apply min-w-0 flex-1 space-y-3;
+  }
+
+  .route-card-header {
+    @apply flex flex-wrap items-center gap-2.5;
+  }
+
+  .route-card-title {
+    @apply flex min-w-0 items-center gap-2;
+  }
+
+  .route-card-badges {
+    @apply ml-auto flex flex-wrap items-center gap-1.5;
+  }
+
+  .route-badge {
+    @apply inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[10.5px] font-semibold;
+  }
+
+  .route-badge-dot {
+    @apply inline-block h-1.5 w-1.5 rounded-full;
+  }
+
+  .route-badge-dc {
+    @apply bg-accent-dim/30 text-accent-text;
+  }
+
+  .route-badge-tg {
+    @apply bg-info-dim/30 text-info;
+  }
+
+  .route-badge-fallback {
+    @apply border-warn/30 bg-warn-dim/20 text-warn;
+  }
+
+  .route-badge-stop {
+    @apply border-bad/30 bg-bad-dim/20 text-bad;
+  }
+
+  .route-badge-role {
+    @apply border-accent/30 bg-accent-dim/20 text-accent-text;
+  }
+
+  .route-card-filters {
+    @apply flex flex-wrap gap-1.5;
+  }
+
+  .route-chip {
+    @apply inline-flex items-center gap-1 rounded border border-border bg-surface-2 px-2 py-0.5 text-[11px];
+  }
+
+  .route-chip-type {
+    @apply font-bold uppercase tracking-wider text-faint;
+  }
+
+  .route-chip-val {
+    @apply font-medium text-text;
+  }
+
+  .route-chip.exclude {
+    @apply border-bad/20 bg-bad-dim/20;
+  }
+
+  .route-chip.exclude .route-chip-type {
+    @apply text-bad;
+  }
+
+  .route-chip-empty {
+    @apply italic;
+  }
+
+  .route-card-targets {
+    @apply space-y-1.5;
+  }
+
+  .route-target {
+    @apply space-y-1;
+  }
+
+  .route-target-row {
+    @apply flex items-center gap-2 text-xs;
+  }
+
+  .route-target-label {
+    @apply shrink-0 rounded border border-border bg-surface-2 px-1.5 py-px text-[10px] font-bold uppercase tracking-wider text-faint;
+  }
+
+  .route-target-id {
+    @apply rounded-[5px] bg-surface-2 px-1.5 py-px font-mono text-[11.5px] leading-relaxed text-text;
+  }
+
+  .route-card-actions {
+    @apply flex shrink-0 flex-col gap-0.5;
+  }
+
+  .route-action-btn {
+    @apply flex h-7 w-7 items-center justify-center rounded text-muted transition-colors hover:bg-surface-2 hover:text-text disabled:pointer-events-none disabled:opacity-25;
+  }
+
+  .route-action-btn-danger:hover {
+    @apply bg-bad-dim/30 text-bad;
+  }
+
   /* ---- Toggle switch ---- */
   .switch {
     @apply relative h-[22px] w-[38px] flex-shrink-0;
@@ -353,19 +474,49 @@
   }
 
   .editor-head {
-    @apply flex items-center justify-between border-b border-border px-6 py-5;
+    @apply flex items-center justify-between gap-3 border-b border-border px-6 py-4;
+    background: var(--header-bg);
+    backdrop-filter: blur(12px);
+  }
+
+  .editor-heading {
+    @apply flex min-w-0 flex-col gap-0.5;
+  }
+
+  .editor-eyebrow {
+    @apply text-[10px] font-bold uppercase tracking-[2px] text-accent;
   }
 
   .editor-head h2 {
-    @apply text-lg font-extrabold tracking-tight;
+    @apply truncate text-base font-extrabold tracking-tight;
+  }
+
+  .editor-head .icon-btn {
+    @apply h-8 w-8 rounded-full;
   }
 
   .editor-body {
-    @apply flex-1 overflow-y-auto px-6 py-[22px];
+    @apply flex-1 overflow-y-auto px-6 py-5;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrim) transparent;
+  }
+
+  .editor-section {
+    @apply mb-7;
+  }
+
+  .editor-section-title {
+    @apply mb-3.5 flex items-center gap-2.5 text-[10.5px] font-bold uppercase tracking-[1.5px] text-faint;
+  }
+
+  .editor-section-title::after {
+    content: "";
+    @apply h-px flex-1 bg-border;
   }
 
   .editor-foot {
-    @apply flex justify-end gap-2 border-t border-border px-6 py-4;
+    @apply flex justify-end gap-2 border-t border-border bg-surface px-6 py-4;
+    box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, 0.18);
   }
 
   /* ---- Forms ---- */
@@ -822,6 +973,117 @@
   .webhook-panel .wh-code {
     @apply mt-2.5 overflow-x-auto rounded-sm border border-border bg-surface-2 p-3 text-[11.5px] leading-relaxed text-muted;
   }
+
+  /* ---- Metrics / stats ---- */
+  .metric-kpis {
+    @apply mb-6 grid grid-cols-2 gap-3 max-md:grid-cols-1 sm:grid-cols-3;
+  }
+
+  .metric-kpi {
+    @apply rounded-sm border border-border bg-surface p-4;
+  }
+
+  .metric-kpi-value {
+    @apply block text-2xl font-extrabold tracking-tight tabular-nums;
+  }
+
+  .metric-kpi-label {
+    @apply mt-1 block text-[11px] font-bold uppercase tracking-[1.2px] text-faint;
+  }
+
+  .metric-kpi.accent .metric-kpi-value {
+    @apply text-accent;
+  }
+
+  .metric-kpi.ok .metric-kpi-value {
+    @apply text-ok;
+  }
+
+  .metric-kpi.bad {
+    @apply border-bad/30 bg-bad/5;
+  }
+
+  .metric-kpi.bad .metric-kpi-value {
+    @apply text-bad;
+  }
+
+  .metric-kpi.warn .metric-kpi-value {
+    @apply text-warn;
+  }
+
+  .metric-kpi.info .metric-kpi-value {
+    @apply text-info;
+  }
+
+  .metric-block {
+    @apply mb-4 rounded border border-border bg-surface p-5;
+  }
+
+  .metric-block-title {
+    @apply m-0 text-[11px] font-bold uppercase tracking-[1.2px] text-faint;
+  }
+
+  .metric-block-head {
+    @apply mb-3 flex items-center justify-between gap-2;
+  }
+
+  .metric-block-head .metric-block-title {
+    @apply mb-0;
+  }
+
+  .metric-sort-toggle {
+    @apply rounded px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-faint transition-colors;
+  }
+
+  .metric-sort-toggle:hover {
+    @apply bg-surface-3 text-text;
+  }
+
+  .metric-row {
+    @apply flex items-center gap-3 border-t border-border py-2.5 first:border-t-0 max-sm:flex-wrap;
+  }
+
+  .metric-key {
+    @apply w-[110px] shrink-0 truncate font-mono text-[12.5px] text-text;
+  }
+
+  .metric-total {
+    @apply w-12 shrink-0 text-right text-xs font-semibold tabular-nums text-muted;
+  }
+
+  .metric-bar {
+    @apply flex h-5 flex-1 overflow-hidden rounded bg-surface-3;
+  }
+
+  .metric-fill {
+    @apply flex items-center justify-center text-[11px] font-bold tabular-nums leading-none text-white/90;
+    min-width: 0;
+    transition: flex 0.3s;
+  }
+
+  .metric-fill.ok {
+    @apply bg-ok;
+  }
+
+  .metric-fill.bad {
+    @apply bg-bad;
+  }
+
+  .metric-status-row {
+    @apply flex flex-wrap gap-1.5;
+  }
+
+  .metric-status {
+    @apply rounded-full px-2.5 py-0.5 text-[11px] font-bold tabular-nums tracking-wide;
+  }
+
+  .metric-status.ok {
+    @apply bg-ok-dim text-ok;
+  }
+
+  .metric-status.bad {
+    @apply bg-bad-dim text-bad;
+  }
 }
 
 /* ---- Vue transition glue (lifecycle classes) ---- */

app/components/AdminHome.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import type { DeliveryMetrics, Group, Route, SendRecord } from "~/types";
+
+const props = defineProps<{
+  groups: Group[];
+  logs: SendRecord[];
+  metrics: DeliveryMetrics | null;
+  groupsLoading: boolean;
+  logsLoading: boolean;
+  metricsLoading: boolean;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const routesByGroup = ref<Record<string, Route[]>>({});
+const routesLoading = ref(false);
+
+const allRoutes = computed(() => {
+  const out: Array<Route & { group?: Group }> = [];
+  for (const g of props.groups) {
+    for (const r of routesByGroup.value[g.id] ?? []) out.push({ ...r, group: g });
+  }
+  return out;
+});
+
+async function loadRoutes() {
+  if (!props.groups.length) return;
+  routesLoading.value = true;
+  const entries = await Promise.all(
+    props.groups.map(async (g) => {
+      try {
+        const data = await apiFetch<{ routes?: Route[] }>(
+          `/admin/api/groups/${encodeURIComponent(g.id)}/routes`,
+        );
+        return [g.id, data.routes ?? []] as const;
+      } catch {
+        return [g.id, []] as const;
+      }
+    }),
+  );
+  routesByGroup.value = Object.fromEntries(entries);
+  routesLoading.value = false;
+}
+
+onMounted(loadRoutes);
+watch(() => props.groups, loadRoutes);
+
+const kpis = computed(() => {
+  const m = props.metrics;
+  const total = m?.total ?? 0;
+  const ok = m?.ok ?? 0;
+  const rate = total ? (ok / total) * 100 : 0;
+  return [
+    { label: t("metrics.total"), value: total.toLocaleString(), tone: "accent" },
+    { label: t("metrics.successRate"), value: `${rate.toFixed(1)}%`, tone: "ok" },
+    { label: t("metrics.failed"), value: (m?.failed ?? 0).toLocaleString(), tone: "bad" },
+    {
+      label: t("metrics.avgDuration"),
+      value: `${(m?.avgDurationMs ?? 0).toFixed(0)}ms`,
+      tone: "muted",
+    },
+  ];
+});
+
+const KPI_TEXT: Record<string, string> = {
+  accent: "text-accent",
+  ok: "text-ok",
+  bad: "text-bad",
+  muted: "text-text",
+};
+
+const EVENT_TONES: Record<string, string> = {
+  push: "ok",
+  pull_request: "accent",
+  issues: "warn",
+  workflow_run: "info",
+  check_suite: "info",
+  check_run: "info",
+  release: "ok",
+  deployment: "accent",
+};
+
+const EVENT_BADGE: Record<string, string> = {
+  ok: "bg-ok-dim text-ok",
+  accent: "bg-accent-dim text-accent",
+  warn: "bg-warn-dim text-warn",
+  info: "bg-info-dim text-info",
+  bad: "bg-bad-dim text-bad",
+  muted: "bg-surface-2 text-muted",
+};
+
+function eventBadge(ev: string): string {
+  return EVENT_BADGE[EVENT_TONES[ev] ?? "muted"] ?? EVENT_BADGE.muted!;
+}
+
+function fmtTime(ts: number): string {
+  const d = Date.now() - ts;
+  if (d < 60_000) return `${Math.max(1, Math.round(d / 1000))}s`;
+  if (d < 3_600_000) return `${Math.round(d / 60_000)}m`;
+  if (d < 86_400_000) return `${Math.round(d / 3_600_000)}h`;
+  return `${Math.round(d / 86_400_000)}d`;
+}
+
+function platformLabel(p?: string): string {
+  return p === "telegram" ? "TG" : p === "discord" ? "DC" : "—";
+}
+
+function routeEvents(r: Route): string[] {
+  return r.filters
+    .filter((f) => f.type === "event")
+    .flatMap((f) => (Array.isArray(f.match) ? f.match : [f.match]));
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- KPI cards -->
+    <section class="grid grid-cols-2 gap-4 xl:grid-cols-4">
+      <div v-for="k in kpis" :key="k.label" class="rounded border border-border bg-surface p-5">
+        <div class="text-[11px] font-bold uppercase tracking-[1.5px] text-faint">{{ k.label }}</div>
+        <div
+          class="mt-2 text-2xl font-extrabold tracking-tight [font-variant-numeric:tabular-nums]"
+          :class="KPI_TEXT[k.tone] ?? KPI_TEXT.muted"
+        >
+          {{ metricsLoading ? "—" : k.value }}
+        </div>
+      </div>
+    </section>
+
+    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
+      <!-- Routes overview -->
+      <section class="rounded border border-border bg-surface xl:col-span-2">
+        <div class="flex items-center justify-between border-b border-border px-5 py-4">
+          <h2 class="text-sm font-bold tracking-tight">{{ t("overview.routes") }}</h2>
+          <span class="text-xs text-faint [font-variant-numeric:tabular-nums]">{{
+            allRoutes.length
+          }}</span>
+        </div>
+
+        <div v-if="routesLoading" class="px-5 py-12 text-center text-faint">
+          {{ t("status.loading") }}
+        </div>
+        <div v-else-if="!allRoutes.length" class="px-5 py-12 text-center text-muted">
+          <p class="mb-3">{{ t("routes.emptyGroup") }}</p>
+          <button class="btn btn-accent btn-sm" @click="router.replace('/admin/groups')">
+            {{ t("routes.createFirst") }}
+          </button>
+        </div>
+
+        <div v-else class="overflow-x-auto">
+          <table class="w-full min-w-[560px] text-left text-[13px]">
+            <thead>
+              <tr
+                class="border-b border-border text-[10px] font-bold uppercase tracking-[1.2px] text-faint"
+              >
+                <th class="px-5 py-2.5">Route</th>
+                <th class="px-3 py-2.5">Group</th>
+                <th class="px-3 py-2.5">Events</th>
+                <th class="px-3 py-2.5">Targets</th>
+                <th class="px-5 py-2.5 text-right">State</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="r in allRoutes.slice(0, 8)"
+                :key="r.id"
+                class="cursor-pointer border-b border-border transition-colors last:border-0 hover:bg-surface-2"
+                @click="router.replace('/admin/groups')"
+              >
+                <td class="px-5 py-3">
+                  <div class="font-semibold text-text">{{ r.name || r.id }}</div>
+                  <div class="font-mono text-[11px] text-faint">{{ r.id }}</div>
+                </td>
+                <td class="px-3 py-3 text-muted">{{ r.group?.name || "—" }}</td>
+                <td class="px-3 py-3">
+                  <div class="flex flex-wrap gap-1">
+                    <span
+                      v-for="ev in routeEvents(r).slice(0, 2)"
+                      :key="ev"
+                      class="rounded-full bg-accent-dim px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-accent"
+                    >
+                      {{ ev }}
+                    </span>
+                    <span v-if="routeEvents(r).length > 2" class="text-[10px] text-faint">
+                      +{{ routeEvents(r).length - 2 }}
+                    </span>
+                  </div>
+                </td>
+                <td class="px-3 py-3">
+                  <div class="flex items-center gap-1">
+                    <span
+                      v-for="tg in r.targets.slice(0, 3)"
+                      :key="tg.channelId ?? tg.chatId ?? platformLabel(tg.platform)"
+                      class="rounded border border-border bg-surface-2 px-1.5 py-0.5 font-mono text-[10px] text-muted"
+                    >
+                      {{ platformLabel(tg.platform) }}
+                    </span>
+                    <span v-if="r.targets.length > 3" class="text-[10px] text-faint">
+                      +{{ r.targets.length - 3 }}
+                    </span>
+                  </div>
+                </td>
+                <td class="px-5 py-3 text-right">
+                  <span class="dot" :class="r.enabled ? 'ok' : 'bad'" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- Recent send logs -->
+      <section class="rounded border border-border bg-surface">
+        <div class="flex items-center justify-between border-b border-border px-5 py-4">
+          <h2 class="text-sm font-bold tracking-tight">{{ t("overview.recent") }}</h2>
+          <button class="text-xs font-semibold text-accent" @click="router.replace('/admin/logs')">
+            {{ t("overview.viewAll") }}
+          </button>
+        </div>
+
+        <div v-if="logsLoading" class="px-5 py-12 text-center text-faint">
+          {{ t("status.loading") }}
+        </div>
+        <div v-else-if="!logs.length" class="px-5 py-12 text-center text-faint">
+          {{ t("metrics.empty") }}
+        </div>
+
+        <ul v-else class="divide-y divide-border">
+          <li
+            v-for="log in logs.slice(0, 10)"
+            :key="log.id ?? `${log.ts}-${log.target}`"
+            class="flex items-center gap-3 px-5 py-3"
+          >
+            <span class="dot" :class="log.ok ? 'ok' : 'bad'" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <span
+                  class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide"
+                  :class="eventBadge(log.event)"
+                >
+                  {{ log.event }}
+                </span>
+                <span class="truncate text-[12px] text-muted">{{ log.repo || log.target }}</span>
+              </div>
+              <div class="mt-0.5 truncate font-mono text-[11px] text-faint">{{ log.target }}</div>
+            </div>
+            <span class="text-[11px] font-medium text-faint [font-variant-numeric:tabular-nums]">
+              {{ fmtTime(log.ts) }}
+            </span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>

app/components/ConsolePage.vue

@@ -1,123 +1,181 @@
 <template>
-  <div class="shell">
-    <header class="header">
-      <div class="brand">
+  <div class="flex min-h-screen bg-bg text-text">
+    <!-- Sidebar -->
+    <aside
+      class="sticky top-0 z-30 flex h-screen w-[240px] flex-shrink-0 flex-col border-r border-border bg-surface max-lg:hidden"
+    >
+      <div class="flex items-center gap-3 px-5 py-5">
         <div class="brand-mark">WH</div>
         <div>
-          <h1>WebHooker</h1>
-          <span class="tagline">{{ t("app.tagline") }}</span>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <button class="btn btn-ghost btn-sm" @click="toggle">{{ t("app.langToggle") }}</button>
-        <button
-          v-if="!needLogin && selectedGroup && canEditRoutes(selectedGroup.id)"
-          class="btn btn-accent"
-          @click="openNew"
-        >
-          {{ t("app.newRoute") }}
-        </button>
-        <button
-          v-if="!needLogin && !selectedGroup && view === 'groups' && isSuper"
-          class="btn btn-accent"
-          @click="openNewGroup"
-        >
-          {{ t("app.newGroup") }}
-        </button>
-        <a v-if="!needLogin" class="btn btn-ghost" href="/admin/logout">{{ t("app.signOut") }}</a>
-      </div>
-    </header>
-
-    <main class="main">
-      <div v-if="needLogin" class="login">
-        <div class="login-card">
-          <h2>{{ t("login.title") }}</h2>
-          <p v-if="forbidden">{{ t("login.forbidden") }}</p>
-          <p v-else>{{ t("login.prompt") }}</p>
-          <a class="btn btn-accent btn-lg" href="/admin/login">{{ t("login.button") }}</a>
+          <div class="text-sm font-extrabold tracking-tight">WebHooker</div>
+          <div class="text-[10px] font-semibold uppercase tracking-[2px] text-faint">
+            {{ t("app.tagline") }}
+          </div>
         </div>
       </div>
 
-      <template v-else>
-        <!-- Group detail view -->
-        <template v-if="selectedGroup">
-          <section class="toolbar">
-            <div class="crumbs">
-              <button class="btn btn-ghost btn-sm" @click="exitGroup">{{ t("group.back") }}</button>
-              <span class="kpi-label">{{ t("group.routesIn", { name: selectedGroup.name }) }}</span>
-              <span class="kpi">{{ groupRoutes.length }}</span>
-            </div>
-            <div class="status">
-              <span class="dot" :class="groupRoutesLoading ? '' : 'ok'"></span>
-              <span>{{ groupRoutesLoading ? t("status.loading") : t("status.connected") }}</span>
-            </div>
-          </section>
-
-          <p v-if="groupRoutesError" class="err">{{ groupRoutesError }}</p>
-
-          <section class="routes">
-            <RouteCard
-              v-for="(r, i) in groupRoutes"
-              :key="r.id"
-              :route="r"
-              :at-first="i === 0"
-              :at-last="i === groupRoutes.length - 1"
-              :readonly="!canEditRoutes(selectedGroup.id)"
-              :style="{ animationDelay: i * 45 + 'ms' }"
-              @toggle="onToggle"
-              @edit="openEdit"
-              @delete="onDelete"
-              @move="onMove"
-            />
-          </section>
-
-          <section v-if="!groupRoutesLoading && !groupRoutes.length" class="empty">
-            <p>{{ t("routes.emptyGroup") }}</p>
-            <button v-if="canEditRoutes(selectedGroup.id)" class="btn btn-accent" @click="openNew">
-              {{ t("routes.createFirst") }}
-            </button>
-          </section>
-
-          <MembersPanel
-            :group="selectedGroup"
-            :can-edit="canEditGroup(selectedGroup.id)"
-            :saving="savingGroup"
-            @save="onSaveGroupFromPanel"
+      <nav class="flex-1 space-y-0.5 px-3">
+        <button
+          v-for="n in nav"
+          :key="n.id"
+          class="flex w-full items-center gap-3 rounded-[8px] px-3 py-2 text-[13px] font-semibold transition-colors"
+          :class="
+            n.id === activeNav
+              ? 'bg-accent-dim text-accent'
+              : 'text-muted hover:bg-surface-2 hover:text-text'
+          "
+          @click="switchView(n.id)"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="n.id === activeNav ? 'bg-accent' : 'bg-border-strong'"
           />
+          {{ n.label }}
+        </button>
+      </nav>
 
-          <WebhookPanel
-            v-if="canEditGroup(selectedGroup.id)"
-            :group-id="selectedGroup.id"
-            :can-edit="canEditGroup(selectedGroup.id)"
-          />
-        </template>
+      <div class="border-t border-border px-3 py-4">
+        <a
+          class="block rounded-[8px] px-3 py-2 text-[13px] font-semibold text-muted transition-colors hover:bg-surface-2"
+          href="/admin/logout"
+        >
+          {{ t("app.signOut") }}
+        </a>
+      </div>
+    </aside>
+
+    <!-- Main column -->
+    <div class="flex min-w-0 flex-1 flex-col">
+      <header
+        class="sticky top-0 z-20 flex items-center justify-between gap-4 border-b border-border px-6 py-3"
+        style="background: var(--header-bg); backdrop-filter: blur(12px)"
+      >
+        <div>
+          <h1 class="text-[15px] font-extrabold tracking-tight">{{ pageTitle }}</h1>
+          <p v-if="needLogin" class="text-[11px] text-faint">{{ t("login.title") }}</p>
+          <p v-else class="text-[11px] text-faint">
+            {{ loadingAny ? t("status.loading") : t("status.connected") }}
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            v-if="view === 'overview'"
+            class="btn btn-ghost btn-sm"
+            @click="refreshOverview"
+          >
+            {{ t("metrics.refresh") }}
+          </button>
+          <button class="btn btn-ghost btn-sm" @click="toggle">{{ t("app.langToggle") }}</button>
+          <button
+            v-if="!needLogin && selectedGroup && canEditRoutes(selectedGroup.id)"
+            class="btn btn-accent btn-sm"
+            @click="openNew"
+          >
+            {{ t("app.newRoute") }}
+          </button>
+          <button
+            v-if="!needLogin && !selectedGroup && view === 'groups' && isSuper"
+            class="btn btn-accent btn-sm"
+            @click="openNewGroup"
+          >
+            {{ t("app.newGroup") }}
+          </button>
+        </div>
+      </header>
+
+      <!-- Mobile nav -->
+      <nav class="flex gap-1 overflow-x-auto border-b border-border px-4 py-2 lg:hidden">
+        <button
+          v-for="n in nav"
+          :key="n.id"
+          class="whitespace-nowrap rounded-[7px] px-3 py-1.5 text-[13px] font-semibold transition-colors"
+          :class="n.id === activeNav ? 'bg-accent-dim text-accent' : 'text-muted'"
+          @click="switchView(n.id)"
+        >
+          {{ n.label }}
+        </button>
+      </nav>
+
+      <main class="mx-auto w-full max-w-[1180px] px-6 pb-24 pt-6 max-sm:px-4">
+        <div v-if="needLogin" class="login">
+          <div class="login-card">
+            <h2>{{ t("login.title") }}</h2>
+            <p v-if="forbidden">{{ t("login.forbidden") }}</p>
+            <p v-else>{{ t("login.prompt") }}</p>
+            <a class="btn btn-accent btn-lg" href="/admin/login">{{ t("login.button") }}</a>
+          </div>
+        </div>
 
-        <!-- Top-level views -->
         <template v-else>
-          <nav class="tabs">
-            <button
-              class="tab"
-              :class="{ active: view === 'groups' }"
-              @click="switchView('groups')"
-            >
-              {{ t("tab.groups") }}
-            </button>
-            <button class="tab" :class="{ active: view === 'logs' }" @click="switchView('logs')">
-              {{ t("tab.logs") }}
-            </button>
-            <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>
+          <!-- Overview dashboard -->
+          <AdminHome
+            v-if="view === 'overview'"
+            :key="refreshKey"
+            :groups="groups"
+            :logs="logs"
+            :metrics="metrics"
+            :groups-loading="groupsLoading"
+            :logs-loading="logsLoading"
+            :metrics-loading="metricsLoading"
+          />
 
-          <template v-if="view === 'groups'">
+          <!-- Group detail view -->
+          <template v-else-if="selectedGroup">
+            <section class="toolbar">
+              <div class="crumbs">
+                <button class="btn btn-ghost btn-sm" @click="exitGroup">
+                  {{ t("group.back") }}
+                </button>
+                <span class="kpi-label">{{ t("group.routesIn", { name: selectedGroup.name }) }}</span>
+                <span class="kpi">{{ groupRoutes.length }}</span>
+              </div>
+              <div class="status">
+                <span class="dot" :class="groupRoutesLoading ? '' : 'ok'"></span>
+                <span>{{ groupRoutesLoading ? t("status.loading") : t("status.connected") }}</span>
+              </div>
+            </section>
+
+            <p v-if="groupRoutesError" class="err">{{ groupRoutesError }}</p>
+
+            <section class="routes">
+              <RouteCard
+                v-for="(r, i) in groupRoutes"
+                :key="r.id"
+                :route="r"
+                :at-first="i === 0"
+                :at-last="i === groupRoutes.length - 1"
+                :readonly="!canEditRoutes(selectedGroup.id)"
+                :style="{ animationDelay: i * 45 + 'ms' }"
+                @toggle="onToggle"
+                @edit="openEdit"
+                @delete="onDelete"
+                @move="onMove"
+              />
+            </section>
+
+            <section v-if="!groupRoutesLoading && !groupRoutes.length" class="empty">
+              <p>{{ t("routes.emptyGroup") }}</p>
+              <button v-if="canEditRoutes(selectedGroup.id)" class="btn btn-accent" @click="openNew">
+                {{ t("routes.createFirst") }}
+              </button>
+            </section>
+
+            <MembersPanel
+              :group="selectedGroup"
+              :can-edit="canEditGroup(selectedGroup.id)"
+              :saving="savingGroup"
+              @save="onSaveGroupFromPanel"
+            />
+
+            <WebhookPanel
+              v-if="canEditGroup(selectedGroup.id)"
+              :group-id="selectedGroup.id"
+              :can-edit="canEditGroup(selectedGroup.id)"
+            />
+          </template>
+
+          <!-- Top-level views -->
+          <template v-else-if="view === 'groups'">
             <section class="toolbar">
               <div>
                 <span class="kpi-label">{{ t("kpi.groups") }}</span>
@@ -223,12 +281,16 @@
               :metrics="metrics"
               :loading="metricsLoading"
               :error="metricsError"
-              @refresh="loadMetrics"
+              :groups="groups"
+              :selected-group-id="metricsFilterGroup"
+              @refresh="loadMetrics(metricsFilterGroup || undefined)"
+              @filter="loadMetrics(metricsFilterGroup || undefined)"
+              @update:selected-group-id="metricsFilterGroup = $event"
             />
           </template>
         </template>
-      </template>
-    </main>
+      </main>
+    </div>
 
     <RouteEditor
       :open="editorOpen"
@@ -253,6 +315,7 @@
 import type { Group, Route } from "~/types";
 import { useAuditApi } from "~/composables/useAudit";
 import WebhookPanel from "~/components/WebhookPanel.vue";
+import AdminHome from "~/components/AdminHome.vue";
 
 const { t, toggle } = useI18n();
 const { push } = useToasts();
@@ -260,13 +323,16 @@ const route = useRoute();
 const router = useRouter();
 
 /**
- * The console view mirrors the URL path so tabs are deep-linkable:
- * /admin (groups) · /admin/logs · /admin/audit. Unknown slugs 404.
+ * The console view mirrors the URL path so navigation is deep-linkable:
+ * /admin (overview) · /admin/groups · /admin/logs · /admin/audit · /admin/metrics.
+ * Unknown slugs 404.
  */
-const view = computed<"groups" | "logs" | "audit" | "metrics" | null>(() => {
+type View = "overview" | "groups" | "logs" | "audit" | "metrics";
+const view = computed<View | null>(() => {
   const seg = route.path.split("/").filter(Boolean)[1];
-  if (!seg) return "groups";
-  if (seg === "groups" || seg === "logs" || seg === "audit" || seg === "metrics") return seg;
+  if (!seg) return "overview";
+  if (seg === "overview" || seg === "groups" || seg === "logs" || seg === "audit" || seg === "metrics")
+    return seg;
   return null;
 });
 
@@ -274,6 +340,43 @@ if (view.value === null) {
   throw createError({ statusCode: 404, statusMessage: "Page not found", fatal: false });
 }
 
+const nav = computed(() => [
+  { id: "overview" as View, label: t("tab.overview"), path: "/admin" },
+  { id: "groups" as View, label: t("tab.groups"), path: "/admin/groups" },
+  { id: "logs" as View, label: t("tab.logs"), path: "/admin/logs" },
+  { id: "audit" as View, label: t("tab.audit"), path: "/admin/audit" },
+  { id: "metrics" as View, label: t("tab.metrics"), path: "/admin/metrics" },
+]);
+
+const activeNav = computed<View>(() => view.value ?? "overview");
+
+const pageTitle = computed(() => {
+  if (selectedGroup.value) return t("group.routesIn", { name: selectedGroup.value.name });
+  switch (view.value) {
+    case "overview":
+      return t("tab.overview");
+    case "groups":
+      return t("tab.groups");
+    case "logs":
+      return t("tab.logs");
+    case "audit":
+      return t("tab.audit");
+    case "metrics":
+      return t("tab.metrics");
+    default:
+      return "";
+  }
+});
+
+const loadingAny = computed(
+  () =>
+    groupsLoading.value ||
+    logsLoading.value ||
+    metricsLoading.value ||
+    groupRoutesLoading.value ||
+    auditLoading.value,
+);
+
 const { logs, loading: logsLoading, error: logsError, load: loadLogs } = useSendLogs();
 const {
   entries: auditEntries,
@@ -316,6 +419,8 @@ const savingGroup = ref(false);
 
 const logFilterGroup = ref("");
 const auditFilterGroup = ref("");
+const metricsFilterGroup = ref("");
+const refreshKey = ref(0);
 
 onMounted(() => {
   if (typeof window !== "undefined") {
@@ -328,6 +433,7 @@ onMounted(() => {
   }
   loadGroups();
   loadLogs(50, logFilterGroup.value || undefined);
+  loadMetrics();
 });
 
 // Tab switches are client-side navigations (no remount), so load the audit
@@ -336,18 +442,25 @@ watch(
   view,
   (v) => {
     if (v === "audit") loadAudit(50, auditFilterGroup.value || undefined);
-    if (v === "metrics") loadMetrics();
+    if (v === "metrics") loadMetrics(metricsFilterGroup.value || undefined);
   },
   { immediate: true },
 );
 
-function switchView(next: "groups" | "logs" | "audit" | "metrics"): void {
-  const path = next === "groups" ? "/admin" : `/admin/${next}`;
+function switchView(next: View): void {
+  const path = next === "overview" ? "/admin" : `/admin/${next}`;
   if (route.path !== path) router.replace(path);
 }
 
+async function refreshOverview(): Promise<void> {
+  refreshKey.value++;
+  await Promise.all([loadGroups(), loadLogs(50, logFilterGroup.value || undefined), loadMetrics()]);
+  push(t("overview.refreshed"));
+}
+
 function enterGroup(group: Group): void {
   selectedGroup.value = group;
+  groupRoutes.value = [];
   loadGroupRoutes(group.id);
 }
 

app/components/GroupEditor.vue

@@ -6,55 +6,64 @@
     <Transition name="slide">
       <aside v-if="open" class="editor" role="dialog" aria-modal="true">
         <div class="editor-head">
-          <h2>{{ isEdit ? t("groupEditor.editTitle") : t("groupEditor.newTitle") }}</h2>
+          <div class="editor-heading">
+            <span class="editor-eyebrow">{{ t("groupEditor.eyebrow") }}</span>
+            <h2>{{ isEdit ? t("groupEditor.editTitle") : t("groupEditor.newTitle") }}</h2>
+          </div>
           <button class="icon-btn" :title="t('groupEditor.close')" @click="close">✕</button>
         </div>
         <form class="editor-body" @submit.prevent="save">
-          <div class="row2">
-            <div class="field">
-              <label>{{ t("groupEditor.name") }}</label>
-              <input
-                v-model="form.name"
-                type="text"
-                class="input"
-                :placeholder="t('groupEditor.namePlaceholder')"
-                required
-              />
-            </div>
-            <div class="field">
-              <label>{{ t("groupEditor.id") }}</label>
-              <input
-                v-model="form.id"
-                type="text"
-                class="input"
-                :placeholder="t('groupEditor.idPlaceholder')"
-                required
-              />
-              <div class="hint">
-                {{ isEdit ? t("groupEditor.renameHint") : t("groupEditor.idHint") }}
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("groupEditor.sectionBasic") }}</h3>
+            <div class="row2">
+              <div class="field">
+                <label>{{ t("groupEditor.name") }}</label>
+                <input
+                  v-model="form.name"
+                  type="text"
+                  class="input"
+                  :placeholder="t('groupEditor.namePlaceholder')"
+                  required
+                />
+              </div>
+              <div class="field">
+                <label>{{ t("groupEditor.id") }}</label>
+                <input
+                  v-model="form.id"
+                  type="text"
+                  class="input"
+                  :placeholder="t('groupEditor.idPlaceholder')"
+                  required
+                />
+                <div class="hint">
+                  {{ isEdit ? t("groupEditor.renameHint") : t("groupEditor.idHint") }}
+                </div>
               </div>
             </div>
-          </div>
-          <div class="row2">
-            <div class="field">
-              <label>{{ t("groupEditor.language") }}</label>
-              <input
-                v-model="form.lang"
-                type="text"
-                class="input"
-                :placeholder="t('groupEditor.langPlaceholder')"
-              />
-              <div class="hint">{{ t("groupEditor.langHint") }}</div>
-            </div>
-            <div class="field">
-              <label
-                >{{ t("groupEditor.emoji") }}
-                <span class="lbl-note">{{ t("groupEditor.emojiNote") }}</span></label
-              >
-              <label class="inline">
-                <input v-model="form.emoji" type="checkbox" />
-                <span>{{ t("groupEditor.emojiLabel") }}</span>
-              </label>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("groupEditor.sectionPreferences") }}</h3>
+            <div class="row2">
+              <div class="field">
+                <label>{{ t("groupEditor.language") }}</label>
+                <input
+                  v-model="form.lang"
+                  type="text"
+                  class="input"
+                  :placeholder="t('groupEditor.langPlaceholder')"
+                />
+                <div class="hint">{{ t("groupEditor.langHint") }}</div>
+              </div>
+              <div class="field">
+                <label
+                  >{{ t("groupEditor.emoji") }}
+                  <span class="lbl-note">{{ t("groupEditor.emojiNote") }}</span></label
+                >
+                <label class="inline">
+                  <input v-model="form.emoji" type="checkbox" />
+                  <span>{{ t("groupEditor.emojiLabel") }}</span>
+                </label>
+              </div>
             </div>
             <div class="field">
               <label
@@ -91,115 +100,124 @@
               </button>
               <div class="hint">{{ t("groupEditor.forgeSourcesHint") }}</div>
             </div>
-          </div>
-          <div class="field">
-            <label
-              >{{ t("groupEditor.membersNote") }}
-              <span class="lbl-note">{{ t("groupEditor.membersHint") }}</span></label
-            >
-            <p class="hint">
-              {{ t("groupEditor.membersGoPanel") }}
-            </p>
-          </div>
-          <div v-if="superAdmin" class="field">
-            <label
-              >{{ t("groupEditor.owners") }}
-              <span class="lbl-note">{{ t("groupEditor.ownersNote") }}</span></label
-            >
-            <input
-              v-model="form.owners"
-              type="text"
-              class="input"
-              :placeholder="t('groupEditor.ownersPlaceholder')"
-            />
-            <div class="hint">{{ t("groupEditor.ownersHint") }}</div>
-          </div>
-          <div v-else class="field">
-            <label
-              >{{ t("groupEditor.owners") }}
-              <span class="lbl-note">{{ t("groupEditor.ownersSuperOnly") }}</span></label
-            >
-            <input v-model="ownersReadonly" type="text" class="input opacity-60" disabled />
-          </div>
-          <div class="field">
-            <label
-              >{{ t("groupEditor.providers") }}
-              <span class="lbl-note">{{ t("groupEditor.providersNote") }}</span></label
-            >
-            <div class="flex flex-wrap gap-4">
-              <label class="inline">
-                <input
-                  type="checkbox"
-                  :checked="form.providers.includes('github')"
-                  @change="toggleProvider('github', $event)"
-                />
-                <span>GitHub</span>
-              </label>
-              <label class="inline">
-                <input
-                  type="checkbox"
-                  :checked="form.providers.includes('gitea')"
-                  @change="toggleProvider('gitea', $event)"
-                />
-                <span>Gitea</span>
-              </label>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("groupEditor.sectionAccess") }}</h3>
+            <div class="field">
+              <label
+                >{{ t("groupEditor.membersNote") }}
+                <span class="lbl-note">{{ t("groupEditor.membersHint") }}</span></label
+              >
+              <p class="hint">
+                {{ t("groupEditor.membersGoPanel") }}
+              </p>
             </div>
-            <div class="hint">{{ t("groupEditor.providersHint") }}</div>
-          </div>
-          <div class="field">
-            <label
-              >{{ t("groupEditor.installationId") }}
-              <span class="lbl-note">{{ t("groupEditor.installationIdNote") }}</span></label
-            >
-            <input
-              v-model="form.installationId"
-              type="text"
-              class="input"
-              inputmode="numeric"
-              :placeholder="t('groupEditor.installationIdPlaceholder')"
-            />
-            <div class="hint">{{ t("groupEditor.installationIdHint") }}</div>
-          </div>
-          <div class="field">
-            <label
-              >{{ t("groupEditor.logTarget") }}
-              <span class="lbl-note">{{ t("groupEditor.logTargetNote") }}</span></label
-            >
-            <select v-model="form.logPlatform" class="select">
-              <option value="">{{ t("groupEditor.logDisabled") }}</option>
-              <option value="discord">Discord</option>
-              <option value="telegram">Telegram</option>
-            </select>
-            <template v-if="form.logPlatform === 'discord'">
+            <div v-if="superAdmin" class="field">
+              <label
+                >{{ t("groupEditor.owners") }}
+                <span class="lbl-note">{{ t("groupEditor.ownersNote") }}</span></label
+              >
               <input
-                v-model="form.logChannelId"
+                v-model="form.owners"
                 type="text"
-                class="input mt-2"
-                :placeholder="t('routeEditor.channelPlaceholder')"
+                class="input"
+                :placeholder="t('groupEditor.ownersPlaceholder')"
               />
+              <div class="hint">{{ t("groupEditor.ownersHint") }}</div>
+            </div>
+            <div v-else class="field">
+              <label
+                >{{ t("groupEditor.owners") }}
+                <span class="lbl-note">{{ t("groupEditor.ownersSuperOnly") }}</span></label
+              >
+              <input v-model="ownersReadonly" type="text" class="input opacity-60" disabled />
+            </div>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("groupEditor.sectionProviders") }}</h3>
+            <div class="field">
+              <label
+                >{{ t("groupEditor.providers") }}
+                <span class="lbl-note">{{ t("groupEditor.providersNote") }}</span></label
+              >
+              <div class="flex flex-wrap gap-4">
+                <label class="inline">
+                  <input
+                    type="checkbox"
+                    :checked="form.providers.includes('github')"
+                    @change="toggleProvider('github', $event)"
+                  />
+                  <span>GitHub</span>
+                </label>
+                <label class="inline">
+                  <input
+                    type="checkbox"
+                    :checked="form.providers.includes('gitea')"
+                    @change="toggleProvider('gitea', $event)"
+                  />
+                  <span>Gitea</span>
+                </label>
+              </div>
+              <div class="hint">{{ t("groupEditor.providersHint") }}</div>
+            </div>
+            <div class="field">
+              <label
+                >{{ t("groupEditor.installationId") }}
+                <span class="lbl-note">{{ t("groupEditor.installationIdNote") }}</span></label
+              >
               <input
-                v-model="form.logThreadId"
+                v-model="form.installationId"
                 type="text"
-                class="input mt-2"
-                :placeholder="t('routeEditor.threadPlaceholder')"
+                class="input"
+                inputmode="numeric"
+                :placeholder="t('groupEditor.installationIdPlaceholder')"
               />
-            </template>
-            <template v-else-if="form.logPlatform === 'telegram'">
-              <input
-                v-model="form.logChatId"
-                type="text"
-                class="input mt-2"
-                :placeholder="t('routeEditor.chatPlaceholder')"
-              />
-              <input
-                v-model="form.logTopicId"
-                type="text"
-                class="input mt-2"
-                :placeholder="t('routeEditor.topicPlaceholder')"
-              />
-            </template>
-            <div class="hint">{{ t("groupEditor.logTargetHint") }}</div>
-          </div>
+              <div class="hint">{{ t("groupEditor.installationIdHint") }}</div>
+            </div>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("groupEditor.sectionLog") }}</h3>
+            <div class="field">
+              <label
+                >{{ t("groupEditor.logTarget") }}
+                <span class="lbl-note">{{ t("groupEditor.logTargetNote") }}</span></label
+              >
+              <select v-model="form.logPlatform" class="select">
+                <option value="">{{ t("groupEditor.logDisabled") }}</option>
+                <option value="discord">Discord</option>
+                <option value="telegram">Telegram</option>
+              </select>
+              <template v-if="form.logPlatform === 'discord'">
+                <input
+                  v-model="form.logChannelId"
+                  type="text"
+                  class="input mt-2"
+                  :placeholder="t('routeEditor.channelPlaceholder')"
+                />
+                <input
+                  v-model="form.logThreadId"
+                  type="text"
+                  class="input mt-2"
+                  :placeholder="t('routeEditor.threadPlaceholder')"
+                />
+              </template>
+              <template v-else-if="form.logPlatform === 'telegram'">
+                <input
+                  v-model="form.logChatId"
+                  type="text"
+                  class="input mt-2"
+                  :placeholder="t('routeEditor.chatPlaceholder')"
+                />
+                <input
+                  v-model="form.logTopicId"
+                  type="text"
+                  class="input mt-2"
+                  :placeholder="t('routeEditor.topicPlaceholder')"
+                />
+              </template>
+              <div class="hint">{{ t("groupEditor.logTargetHint") }}</div>
+            </div>
+          </section>
           <div class="err">{{ formError }}</div>
         </form>
         <div class="editor-foot">

app/components/MetricsPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DeliveryMetrics } from "~/types";
+import type { DeliveryMetrics, Group, MetricsBreakdown } from "~/types";
 
 const { t } = useI18n();
 
@@ -7,74 +7,229 @@ defineProps<{
   metrics: DeliveryMetrics | null;
   loading: boolean;
   error: string;
+  groups: Group[];
+  selectedGroupId: string;
 }>();
 
-const emit = defineEmits<{ refresh: [] }>();
+const emit = defineEmits<{
+  (e: "refresh"): void;
+  (e: "filter"): void;
+  (e: "update:selectedGroupId", value: string): void;
+}>();
+
+const sortBy = ref<"total" | "failed" | "rate">("total");
 
 function pct(value: number): string {
   return `${(value * 100).toFixed(1)}%`;
 }
+
+function pctOf(count: number, total: number): string {
+  if (total <= 0) return "0%";
+  return `${((count / total) * 100).toFixed(0)}%`;
+}
+
+function onGroupFilter(e: Event): void {
+  emit("update:selectedGroupId", (e.target as HTMLSelectElement).value);
+  emit("filter");
+}
+
+function eventLabel(raw: string): string {
+  const key = `event.${raw}`;
+  const label = t(key);
+  return label === key ? raw : label;
+}
+
+const TONE: Record<string, string> = {
+  accent: "metric-kpi accent",
+  ok: "metric-kpi ok",
+  bad: "metric-kpi bad",
+  warn: "metric-kpi warn",
+  info: "metric-kpi info",
+};
+
+const summary = (m: DeliveryMetrics) => [
+  {
+    label: t("metrics.total"),
+    value: m.total.toLocaleString(),
+    tone: "accent",
+  },
+  {
+    label: t("metrics.successRate"),
+    value: pct(1 - m.failureRate),
+    tone: "ok",
+  },
+  {
+    label: t("metrics.failed"),
+    value: m.failed.toLocaleString(),
+    tone: "bad",
+  },
+  {
+    label: t("metrics.avgDuration"),
+    value: `${m.avgDurationMs.toFixed(0)}ms`,
+    tone: "warn",
+  },
+  {
+    label: t("metrics.retryRate"),
+    value: m.totalAttempts > m.total ? pct((m.totalAttempts - m.total) / m.total) : "0%",
+    tone: "info",
+  },
+];
+
+function rows(list: MetricsBreakdown[], key: (r: MetricsBreakdown) => string) {
+  const raw = list.map((r) => ({
+    key: key(r),
+    rawKey: key(r),
+    total: r.total,
+    ok: r.ok,
+    failed: r.failed,
+    rate: r.total > 0 ? r.failed / r.total : 0,
+  }));
+  if (sortBy.value === "total") {
+    raw.sort((a, b) => b.total - a.total);
+  } else if (sortBy.value === "failed") {
+    raw.sort((a, b) => b.failed - a.failed || b.total - a.total);
+  } else {
+    raw.sort((a, b) => b.rate - a.rate || b.failed - a.failed);
+  }
+  return raw;
+}
+
+function sortLabel(): string {
+  if (sortBy.value === "total") return t("metrics.sortTotal");
+  if (sortBy.value === "failed") return t("metrics.sortFailed");
+  return t("metrics.sortRate");
+}
+
+function cycleSort(): void {
+  if (sortBy.value === "total") sortBy.value = "failed";
+  else if (sortBy.value === "failed") sortBy.value = "rate";
+  else sortBy.value = "total";
+}
 </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>
+  <div>
+    <div class="log-toolbar">
+      <span class="kpi-label">{{ t("metrics.title") }}</span>
+      <div class="log-filters">
+        <label class="filter-label">{{ t("metrics.filterGroup") }}</label>
+        <select
+          class="filter-select"
+          :value="selectedGroupId"
+          :disabled="loading"
+          @change="onGroupFilter"
+        >
+          <option value="">{{ t("metrics.allGroups") }}</option>
+          <option v-for="g in groups" :key="g.id" :value="g.id">
+            {{ g.name || g.id }}
+          </option>
+        </select>
+      </div>
+      <button class="btn btn-ghost btn-sm" :disabled="loading" @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
+    <p v-if="error" class="err">{{ error }}</p>
+    <p v-else-if="!loading && !metrics" class="empty-log">{{ t("metrics.empty") }}</p>
+
+    <template v-else-if="metrics">
+      <div class="metric-kpis">
+        <div
+          v-for="k in summary(metrics)"
+          :key="k.label"
+          class="metric-kpi"
+          :class="TONE[k.tone] ?? ''"
+        >
+          <span class="metric-kpi-value">{{ k.value }}</span>
+          <span class="metric-kpi-label">{{ k.label }}</span>
+        </div>
+      </div>
+
+      <article v-if="metrics.byPlatform.length" class="metric-block">
+        <h3 class="metric-block-title">{{ t("metrics.byPlatform") }}</h3>
+        <div
+          v-for="r in rows(metrics.byPlatform, (r) => r.platform ?? 'unknown')"
+          :key="r.key"
+          class="metric-row"
+        >
+          <span class="metric-key">{{ r.key }}</span>
+          <div class="metric-bar">
+            <span
+              v-if="r.ok > 0"
+              class="metric-fill ok"
+              :style="{ flex: String(r.ok) }"
+              :title="`${t('metrics.ok')} ${r.ok} (${pctOf(r.ok, r.total)})`"
+            ></span>
+            <span
+              v-if="r.failed > 0"
+              class="metric-fill bad"
+              :style="{ flex: String(r.failed), minWidth: '4px' }"
+              :title="`${t('metrics.failed')} ${r.failed} (${pctOf(r.failed, r.total)})`"
+            ></span>
+          </div>
+          <span class="metric-total">{{ r.total }}</span>
+        </div>
+      </article>
+
+      <article v-if="metrics.byEvent.length" class="metric-block">
+        <div class="metric-block-head">
+          <h3 class="metric-block-title">{{ t("metrics.byEvent") }}</h3>
+          <button class="metric-sort-toggle" @click="cycleSort">{{ sortLabel() }}</button>
+        </div>
+        <div
+          v-for="r in rows(metrics.byEvent, (r) => r.event ?? 'unknown')"
+          :key="r.key"
+          class="metric-row"
+        >
+          <span class="metric-key" :title="r.rawKey">{{ eventLabel(r.rawKey) }}</span>
+          <div class="metric-bar">
+            <span
+              v-if="r.ok > 0"
+              class="metric-fill ok"
+              :style="{ flex: String(r.ok), minWidth: r.ok > 0 ? '4px' : '0' }"
+              :title="`${t('metrics.ok')} ${r.ok} (${pctOf(r.ok, r.total)})`"
+            ></span>
+            <span
+              v-if="r.failed > 0"
+              class="metric-fill bad"
+              :style="{ flex: String(r.failed), minWidth: '4px' }"
+              :title="`${t('metrics.failed')} ${r.failed} (${pctOf(r.failed, r.total)})`"
+            ></span>
+          </div>
+          <span class="metric-total">{{ r.total }}</span>
+        </div>
+      </article>
+
+      <article v-if="metrics.byStatus.length" class="metric-block">
+        <h3 class="metric-block-title">{{ t("metrics.byStatus") }}</h3>
+        <div class="metric-status-row">
+          <span
+            v-for="s in metrics.byStatus"
+            :key="s.status"
+            class="metric-status"
+            :class="{ ok: !s.status.startsWith('5') && s.status !== '0', bad: s.status.startsWith('5') || s.status === '0' }"
           >
-          <span class="kpi-label">
-            {{ t("metrics.avgDuration") }}: {{ metrics.avgDurationMs.toFixed(0) }}ms
-          </span>
-          <span class="kpi-label">
-            {{ t("metrics.avgAttempts") }}: {{ metrics.avgAttempts.toFixed(1) }}
+            {{ s.status }} · {{ s.count }}
           </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>
+      <article v-if="metrics.recentFailures.length" class="metric-block">
+        <h3 class="metric-block-title">{{ t("metrics.recentFailures") }}</h3>
         <div
           v-for="f in metrics.recentFailures"
           :key="f.id ?? `${f.ts}-${f.target}`"
-          class="log-entry"
+          class="log-entry fail"
         >
-          <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 class="log-head">
+            <span class="dot bad"></span>
+            <span class="log-route">{{ f.event }}</span>
+            <span v-if="f.errorCode" class="log-status bad">{{ f.errorCode }}</span>
+            <span class="log-time">{{ f.target }}</span>
+          </div>
         </div>
       </article>
-    </div>
-  </template>
-  <p v-else-if="!loading" class="empty-log">{{ t("metrics.empty") }}</p>
-</template>
+    </template>
+  </div>
+</template>

app/components/RouteCard.vue

@@ -1,86 +1,96 @@
 <template>
-  <article class="card" :class="{ disabled: !route.enabled }">
-    <div class="card-head">
-      <div class="card-title">
+  <article class="route-card" :class="{ disabled: !route.enabled }">
+    <div class="route-card-main">
+      <div class="route-card-header">
         <label v-if="!readonly" class="switch">
           <input type="checkbox" :checked="route.enabled" @change="onToggle" />
           <span class="track"></span>
         </label>
         <span v-if="readonly" class="dot" :class="route.enabled ? 'ok' : 'bad'"></span>
-        <span class="route-name">{{ route.name || t("route.untitled") }}</span>
-        <span class="route-id">{{ route.id }}</span>
+        <div class="route-card-title">
+          <span class="route-name">{{ route.name || t("route.untitled") }}</span>
+          <span class="route-id">{{ route.id }}</span>
+        </div>
+        <div class="route-card-badges">
+          <span
+            v-for="(tg, i) in route.targets"
+            :key="i"
+            class="route-badge"
+            :class="tg.platform === 'telegram' ? 'route-badge-tg' : 'route-badge-dc'"
+          >
+            <span class="route-badge-dot" :class="tg.platform === 'telegram' ? 'bg-info' : 'bg-accent'"></span>
+            {{ tg.platform === "telegram" ? "Telegram" : "Discord" }}
+          </span>
+          <span v-if="route.fallback" class="route-badge route-badge-fallback">{{ t("route.fallback") }}</span>
+          <span v-if="route.stop" class="route-badge route-badge-stop">{{ t("route.stop") }}</span>
+          <span v-if="route.discordRoleIds?.length" class="route-badge route-badge-role">@roles</span>
+        </div>
+      </div>
+
+      <div class="route-card-filters">
         <span
-          v-for="(tg, i) in route.targets"
+          v-for="(f, i) in route.filters"
           :key="i"
-          class="badge"
-          :class="tg.platform === 'telegram' ? 'fallback' : 'lang'"
-          >{{ tg.platform === "telegram" ? "Telegram" : "Discord" }}</span
+          class="route-chip"
+          :class="{ exclude: f.exclude }"
         >
-        <span v-if="route.fallback" class="badge fallback">{{ t("route.fallback") }}</span>
-        <span v-if="route.stop" class="badge stop">{{ t("route.stop") }}</span>
-        <span v-if="route.discordRoleIds?.length" class="badge lang">@roles</span>
+          <span class="route-chip-type">{{ f.exclude ? t("routeEditor.not") + " " : "" }}{{ t("filter." + f.type) }}</span>
+          <span class="route-chip-val">{{ fmtMatch(f.match) }}</span>
+        </span>
+        <span v-if="!route.filters.length" class="route-chip route-chip-empty">
+          <span class="route-chip-type">{{ t("route.noFilters") }}</span>
+        </span>
       </div>
-      <div class="card-actions">
-        <template v-if="!readonly">
-          <button
-            class="icon-btn"
-            :disabled="atFirst"
-            :title="t('route.moveUp')"
-            @click="$emit('move', route, -1)"
-          >
-            ↑
-          </button>
-          <button
-            class="icon-btn"
-            :disabled="atLast"
-            :title="t('route.moveDown')"
-            @click="$emit('move', route, 1)"
-          >
-            ↓
-          </button>
-          <button
-            class="icon-btn"
-            :title="t('routeEditor.editTitle')"
-            @click="$emit('edit', route)"
-          >
-            ✎
-          </button>
-          <button
-            class="icon-btn danger"
-            :title="t('routeEditor.close')"
-            @click="$emit('delete', route)"
-          >
-            ✕
-          </button>
-        </template>
+
+      <div class="route-card-targets" v-if="route.targets.length">
+        <div v-for="(tg, i) in route.targets" :key="i" class="route-target">
+          <div class="route-target-row">
+            <span class="route-target-label">
+              <template v-if="tg.platform === 'telegram'">{{ t("route.chat") }}</template>
+              <template v-else-if="tg.threadId">{{ t("route.thread") }}</template>
+              <template v-else>{{ t("route.channel") }}</template>
+            </span>
+            <code class="route-target-id">
+              <template v-if="tg.platform === 'telegram'">{{ tg.chatId }}</template>
+              <template v-else-if="tg.threadId">{{ tg.threadId }}</template>
+              <template v-else>{{ tg.channelId }}</template>
+            </code>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="chips">
-      <span v-for="(f, i) in route.filters" :key="i" class="chip" :class="{ exclude: f.exclude }">
-        <span class="f-type"
-          >{{ f.exclude ? t("routeEditor.not") + " " : "" }}{{ t("filter." + f.type) }}</span
-        >
-        <span class="f-val">{{ fmtMatch(f.match) }}</span>
-      </span>
-      <span v-if="!route.filters.length" class="chip"
-        ><span class="f-type">{{ t("route.noFilters") }}</span></span
+
+    <div v-if="!readonly" class="route-card-actions">
+      <button
+        class="route-action-btn"
+        :disabled="atFirst"
+        :title="t('route.moveUp')"
+        @click="$emit('move', route, -1)"
       >
-    </div>
-    <div class="target">
-      <div v-for="(tg, i) in route.targets" :key="i" class="flex flex-wrap gap-x-[18px] gap-y-2">
-        <span
-          ><b>{{ tg.platform === "telegram" ? t("route.chat") : t("route.channel") }}</b
-          ><code>{{ tg.platform === "telegram" ? tg.chatId : tg.channelId }}</code></span
-        >
-        <span v-if="tg.platform === 'telegram' && tg.topicId"
-          ><b>{{ t("route.topic") }}</b
-          ><code>{{ tg.topicId }}</code></span
-        >
-        <span v-else-if="tg.platform !== 'telegram' && tg.threadId"
-          ><b>{{ t("route.thread") }}</b
-          ><code>{{ tg.threadId }}</code></span
-        >
-      </div>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </button>
+      <button
+        class="route-action-btn"
+        :disabled="atLast"
+        :title="t('route.moveDown')"
+        @click="$emit('move', route, 1)"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+      <button
+        class="route-action-btn"
+        :title="t('routeEditor.editTitle')"
+        @click="$emit('edit', route)"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+      </button>
+      <button
+        class="route-action-btn route-action-btn-danger"
+        :title="t('routeEditor.close')"
+        @click="$emit('delete', route)"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
     </div>
   </article>
 </template>
@@ -108,4 +118,4 @@ function onToggle(event: Event): void {
   const next = { ...props.route, enabled: (event.target as HTMLInputElement).checked };
   emit("toggle", next);
 }
-</script>
+</script>

app/components/RouteEditor.vue

@@ -6,149 +6,166 @@
     <Transition name="slide">
       <aside v-if="open" class="editor" role="dialog" aria-modal="true">
         <div class="editor-head">
-          <h2>{{ isEdit ? t("routeEditor.editTitle") : t("routeEditor.newTitle") }}</h2>
+          <div class="editor-heading">
+            <span class="editor-eyebrow">{{ t("routeEditor.eyebrow") }}</span>
+            <h2>{{ isEdit ? t("routeEditor.editTitle") : t("routeEditor.newTitle") }}</h2>
+          </div>
           <button class="icon-btn" :title="t('routeEditor.close')" @click="close">✕</button>
         </div>
         <form class="editor-body" @submit.prevent="save">
-          <div v-if="!isEdit" class="field">
-            <label
-              >{{ t("routeEditor.templates") }}
-              <span class="lbl-note">{{ t("routeEditor.templatesNote") }}</span></label
-            >
-            <div class="templates">
-              <button
-                v-for="tmpl in ROUTE_TEMPLATES"
-                :key="tmpl.id"
-                type="button"
-                class="template-chip"
-                :class="{ active: form.id === tmpl.id }"
-                @click="applyTemplate(tmpl)"
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("routeEditor.sectionBasic") }}</h3>
+            <div v-if="!isEdit" class="field">
+              <label
+                >{{ t("routeEditor.templates") }}
+                <span class="lbl-note">{{ t("routeEditor.templatesNote") }}</span></label
               >
-                {{ t(tmpl.nameKey) }}
-              </button>
+              <div class="templates">
+                <button
+                  v-for="tmpl in ROUTE_TEMPLATES"
+                  :key="tmpl.id"
+                  type="button"
+                  class="template-chip"
+                  :class="{ active: form.id === tmpl.id }"
+                  @click="applyTemplate(tmpl)"
+                >
+                  {{ t(tmpl.nameKey) }}
+                </button>
+              </div>
             </div>
-          </div>
-          <div class="field">
-            <label>{{ t("routeEditor.name") }}</label>
-            <input
-              v-model="form.name"
-              type="text"
-              class="input"
-              :placeholder="t('routeEditor.namePlaceholder')"
-              required
-            />
-          </div>
-          <div class="field">
-            <label>{{ t("routeEditor.id") }}</label>
-            <input v-model="form.id" type="text" class="input" placeholder="my-route" required />
-            <div class="hint">{{ t("routeEditor.idHint") }}</div>
-          </div>
-          <div class="field inline">
-            <input v-model="form.enabled" type="checkbox" />
-            <span>{{ t("routeEditor.enabled") }}</span>
-          </div>
-          <div class="field inline">
-            <input v-model="form.fallback" type="checkbox" />
-            <span
-              >{{ t("routeEditor.fallback") }}
-              <span class="lbl-note">{{ t("routeEditor.fallbackHint") }}</span></span
-            >
-          </div>
-          <div class="field inline">
-            <input v-model="form.stop" type="checkbox" />
-            <span
-              >{{ t("routeEditor.stop") }}
-              <span class="lbl-note">{{ t("routeEditor.stopHint") }}</span></span
-            >
-          </div>
-          <div class="field">
-            <label
-              >{{ t("routeEditor.discordRoles") }}
-              <span class="lbl-note">{{ t("routeEditor.discordRolesNote") }}</span></label
-            >
-            <input
-              v-model="form.discordRolesText"
-              type="text"
-              class="input"
-              :placeholder="t('routeEditor.discordRolesPlaceholder')"
-            />
-            <div class="hint">{{ t("routeEditor.discordRolesHint") }}</div>
-          </div>
-          <div class="field">
-            <label
-              >{{ t("routeEditor.filters") }}
-              <span class="lbl-note">{{ t("routeEditor.filtersNote") }}</span></label
-            >
-            <div v-for="(f, i) in form.filters" :key="i" class="filter-row">
-              <select v-model="f.type">
-                <option v-for="ft in FILTER_TYPES" :key="ft" :value="ft">
-                  {{ t("filter." + ft) }}
-                </option>
-              </select>
+            <div class="field">
+              <label>{{ t("routeEditor.name") }}</label>
               <input
-                v-model="f.matchText"
+                v-model="form.name"
                 type="text"
-                :placeholder="t('routeEditor.matchPlaceholder')"
+                class="input"
+                :placeholder="t('routeEditor.namePlaceholder')"
+                required
               />
-              <label class="inline">
-                <input v-model="f.exclude" type="checkbox" /><span>{{ t("routeEditor.not") }}</span>
-              </label>
-              <button type="button" class="icon-btn danger" @click="form.filters.splice(i, 1)">
-                ✕
-              </button>
             </div>
-            <button type="button" class="btn btn-ghost add-filter" @click="addFilter">
-              {{ t("routeEditor.addFilter") }}
-            </button>
-            <div class="err">{{ filterError }}</div>
-          </div>
-          <div class="field">
-            <label
-              >{{ t("routeEditor.targets") }}
-              <span class="lbl-note">{{ t("routeEditor.targetsNote") }}</span></label
-            >
-            <div v-for="(tg, i) in form.targets" :key="i" class="target-row">
-              <select v-model="tg.platform">
-                <option value="discord">Discord</option>
-                <option value="telegram">Telegram</option>
-              </select>
-              <template v-if="tg.platform === 'discord'">
-                <input
-                  v-model="tg.channelId"
-                  type="text"
-                  class="tg-in1"
-                  :placeholder="t('routeEditor.channelPlaceholder')"
-                />
-                <input
-                  v-model="tg.threadId"
-                  type="text"
-                  class="tg-in2"
-                  :placeholder="t('routeEditor.threadPlaceholder')"
-                />
-              </template>
-              <template v-else>
-                <input
-                  v-model="tg.chatId"
-                  type="text"
-                  class="tg-in1"
-                  :placeholder="t('routeEditor.chatPlaceholder')"
-                />
-                <input
-                  v-model="tg.topicId"
-                  type="text"
-                  class="tg-in2"
-                  :placeholder="t('routeEditor.topicPlaceholder')"
-                />
-              </template>
-              <button type="button" class="icon-btn danger" @click="form.targets.splice(i, 1)">
-                ✕
-              </button>
+            <div class="field">
+              <label>{{ t("routeEditor.id") }}</label>
+              <input v-model="form.id" type="text" class="input" placeholder="my-route" required />
+              <div class="hint">{{ t("routeEditor.idHint") }}</div>
             </div>
-            <button type="button" class="btn btn-ghost add-filter" @click="addTarget">
-              {{ t("routeEditor.addTarget") }}
-            </button>
-            <div class="err">{{ targetError }}</div>
-          </div>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("routeEditor.sectionOptions") }}</h3>
+            <div class="field inline">
+              <input v-model="form.enabled" type="checkbox" />
+              <span>{{ t("routeEditor.enabled") }}</span>
+            </div>
+            <div class="field inline">
+              <input v-model="form.fallback" type="checkbox" />
+              <span
+                >{{ t("routeEditor.fallback") }}
+                <span class="lbl-note">{{ t("routeEditor.fallbackHint") }}</span></span
+              >
+            </div>
+            <div class="field inline">
+              <input v-model="form.stop" type="checkbox" />
+              <span
+                >{{ t("routeEditor.stop") }}
+                <span class="lbl-note">{{ t("routeEditor.stopHint") }}</span></span
+              >
+            </div>
+            <div class="field">
+              <label
+                >{{ t("routeEditor.discordRoles") }}
+                <span class="lbl-note">{{ t("routeEditor.discordRolesNote") }}</span></label
+              >
+              <input
+                v-model="form.discordRolesText"
+                type="text"
+                class="input"
+                :placeholder="t('routeEditor.discordRolesPlaceholder')"
+              />
+              <div class="hint">{{ t("routeEditor.discordRolesHint") }}</div>
+            </div>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("routeEditor.sectionFilters") }}</h3>
+            <div class="field">
+              <label
+                >{{ t("routeEditor.filters") }}
+                <span class="lbl-note">{{ t("routeEditor.filtersNote") }}</span></label
+              >
+              <div v-for="(f, i) in form.filters" :key="i" class="filter-row">
+                <select v-model="f.type">
+                  <option v-for="ft in FILTER_TYPES" :key="ft" :value="ft">
+                    {{ t("filter." + ft) }}
+                  </option>
+                </select>
+                <input
+                  v-model="f.matchText"
+                  type="text"
+                  :placeholder="t('routeEditor.matchPlaceholder')"
+                />
+                <label class="inline">
+                  <input v-model="f.exclude" type="checkbox" /><span
+                    >{{ t("routeEditor.not") }}</span
+                  >
+                </label>
+                <button type="button" class="icon-btn danger" @click="form.filters.splice(i, 1)">
+                  ✕
+                </button>
+              </div>
+              <button type="button" class="btn btn-ghost add-filter" @click="addFilter">
+                {{ t("routeEditor.addFilter") }}
+              </button>
+              <div class="err">{{ filterError }}</div>
+            </div>
+          </section>
+          <section class="editor-section">
+            <h3 class="editor-section-title">{{ t("routeEditor.sectionTargets") }}</h3>
+            <div class="field">
+              <label
+                >{{ t("routeEditor.targets") }}
+                <span class="lbl-note">{{ t("routeEditor.targetsNote") }}</span></label
+              >
+              <div v-for="(tg, i) in form.targets" :key="i" class="target-row">
+                <select v-model="tg.platform">
+                  <option value="discord">Discord</option>
+                  <option value="telegram">Telegram</option>
+                </select>
+                <template v-if="tg.platform === 'discord'">
+                  <input
+                    v-model="tg.channelId"
+                    type="text"
+                    class="tg-in1"
+                    :placeholder="t('routeEditor.channelPlaceholder')"
+                  />
+                  <input
+                    v-model="tg.threadId"
+                    type="text"
+                    class="tg-in2"
+                    :placeholder="t('routeEditor.threadPlaceholder')"
+                  />
+                </template>
+                <template v-else>
+                  <input
+                    v-model="tg.chatId"
+                    type="text"
+                    class="tg-in1"
+                    :placeholder="t('routeEditor.chatPlaceholder')"
+                  />
+                  <input
+                    v-model="tg.topicId"
+                    type="text"
+                    class="tg-in2"
+                    :placeholder="t('routeEditor.topicPlaceholder')"
+                  />
+                </template>
+                <button type="button" class="icon-btn danger" @click="form.targets.splice(i, 1)">
+                  ✕
+                </button>
+              </div>
+              <button type="button" class="btn btn-ghost add-filter" @click="addTarget">
+                {{ t("routeEditor.addTarget") }}
+              </button>
+              <div class="err">{{ targetError }}</div>
+            </div>
+          </section>
           <div class="err">{{ formError }}</div>
         </form>
         <div class="editor-foot">

app/composables/useI18n.ts

@@ -14,11 +14,17 @@ const en: Dict = {
   "login.forbidden": "Access denied — this GitHub account is not an admin or group admin.",
   "login.prompt": "Sign in with GitHub to manage routes.",
   "login.button": "Sign in with GitHub",
+  "tab.overview": "Overview",
   "tab.groups": "Groups",
   "tab.logs": "Send Logs",
   "tab.audit": "Audit Log",
-  "tab.metrics": "Metrics",
-  "metrics.title": "Delivery Metrics",
+  "tab.metrics": "Stats",
+  "metrics.title": "Delivery Stats",
+  "metrics.successRate": "Success rate",
+  "overview.routes": "Routes",
+  "overview.recent": "Recent deliveries",
+  "overview.viewAll": "View all",
+  "overview.refreshed": "Refreshed",
   "metrics.refresh": "Refresh",
   "metrics.total": "Total",
   "metrics.ok": "OK",
@@ -28,8 +34,44 @@ const en: Dict = {
   "metrics.avgAttempts": "Avg attempts",
   "metrics.byPlatform": "By platform",
   "metrics.byEvent": "By event",
+  "metrics.byStatus": "By status",
   "metrics.recentFailures": "Recent failures",
   "metrics.empty": "No delivery data yet",
+  "metrics.filterGroup": "Group",
+  "metrics.allGroups": "All groups",
+  "metrics.sortTotal": "By total",
+  "metrics.sortFailed": "By failures",
+  "metrics.sortRate": "By failure rate",
+  "metrics.retryRate": "Retry rate",
+  "event.push": "push",
+  "event.pull_request": "pull_request",
+  "event.pull_request_review": "pull_request_review",
+  "event.pull_request_review_comment": "pull_request_review_comment",
+  "event.issues": "issues",
+  "event.issue_comment": "issue_comment",
+  "event.workflow_run": "workflow_run",
+  "event.workflow_job": "workflow_job",
+  "event.status": "status",
+  "event.deployment": "deployment",
+  "event.deployment_status": "deployment_status",
+  "event.ping": "ping",
+  "event.release": "release",
+  "event.create": "create",
+  "event.delete": "delete",
+  "event.star": "star",
+  "event.fork": "fork",
+  "event.check_run": "check_run",
+  "event.check_suite": "check_suite",
+  "event.commit_comment": "commit_comment",
+  "event.member": "member",
+  "event.label": "label",
+  "event.milestone": "milestone",
+  "event.discussion": "discussion",
+  "event.discussion_comment": "discussion_comment",
+  "event.repository": "repository",
+  "event.code_scanning_alert": "code_scanning_alert",
+  "event.dependabot_alert": "dependabot_alert",
+  "event.custom": "custom",
   "status.loading": "loading",
   "status.connected": "connected",
   "kpi.groups": "GROUPS",
@@ -113,7 +155,12 @@ const en: Dict = {
   "filter.keyword": "Keyword",
   "routeEditor.editTitle": "Edit route",
   "routeEditor.newTitle": "New route",
+  "routeEditor.eyebrow": "Route",
   "routeEditor.close": "Close",
+  "routeEditor.sectionBasic": "Basic",
+  "routeEditor.sectionOptions": "Options",
+  "routeEditor.sectionFilters": "Filters",
+  "routeEditor.sectionTargets": "Targets",
   "routeEditor.templates": "Templates",
   "routeEditor.templatesNote": "(click to prefill filters)",
   "templates.push": "Push",
@@ -174,7 +221,13 @@ const en: Dict = {
   "routeEditor.errChannel": "Target {n} channel ID is required",
   "groupEditor.editTitle": "Edit group",
   "groupEditor.newTitle": "New group",
+  "groupEditor.eyebrow": "Group",
   "groupEditor.close": "Close",
+  "groupEditor.sectionBasic": "Basic",
+  "groupEditor.sectionPreferences": "Preferences",
+  "groupEditor.sectionAccess": "Access & members",
+  "groupEditor.sectionProviders": "Providers",
+  "groupEditor.sectionLog": "Logging",
   "groupEditor.name": "Name",
   "groupEditor.namePlaceholder": "My Team",
   "groupEditor.id": "ID",
@@ -291,11 +344,17 @@ const zh: Dict = {
   "login.forbidden": "访问被拒绝 —— 该 GitHub 账号不是超级管理员或分组管理员。",
   "login.prompt": "使用 GitHub 登录以管理路由。",
   "login.button": "使用 GitHub 登录",
+  "tab.overview": "概览",
   "tab.groups": "分组",
   "tab.logs": "发送日志",
   "tab.audit": "审计日志",
-  "tab.metrics": "指标",
-  "metrics.title": "投递指标",
+  "tab.metrics": "统计",
+  "metrics.title": "投递统计",
+  "metrics.successRate": "成功率",
+  "overview.routes": "路由",
+  "overview.recent": "最近投递",
+  "overview.viewAll": "查看全部",
+  "overview.refreshed": "已刷新",
   "metrics.refresh": "刷新",
   "metrics.total": "总计",
   "metrics.ok": "成功",
@@ -305,8 +364,44 @@ const zh: Dict = {
   "metrics.avgAttempts": "平均尝试次数",
   "metrics.byPlatform": "按平台",
   "metrics.byEvent": "按事件",
+  "metrics.byStatus": "按状态",
   "metrics.recentFailures": "最近失败",
   "metrics.empty": "暂无投递数据",
+  "metrics.filterGroup": "分组",
+  "metrics.allGroups": "全部分组",
+  "metrics.sortTotal": "按总量",
+  "metrics.sortFailed": "按失败",
+  "metrics.sortRate": "按失败率",
+  "metrics.retryRate": "重试率",
+  "event.push": "推送",
+  "event.pull_request": "拉取请求",
+  "event.pull_request_review": "PR 审查",
+  "event.pull_request_review_comment": "PR 审查评论",
+  "event.issues": "议题",
+  "event.issue_comment": "议题评论",
+  "event.workflow_run": "工作流运行",
+  "event.workflow_job": "工作流任务",
+  "event.status": "提交状态",
+  "event.deployment": "部署",
+  "event.deployment_status": "部署状态",
+  "event.ping": "心跳",
+  "event.release": "发布",
+  "event.create": "创建",
+  "event.delete": "删除",
+  "event.star": "星标",
+  "event.fork": "复刻",
+  "event.check_run": "检查运行",
+  "event.check_suite": "检查套件",
+  "event.commit_comment": "提交评论",
+  "event.member": "成员",
+  "event.label": "标签",
+  "event.milestone": "里程碑",
+  "event.discussion": "讨论",
+  "event.discussion_comment": "讨论评论",
+  "event.repository": "仓库",
+  "event.code_scanning_alert": "代码扫描",
+  "event.dependabot_alert": "依赖告警",
+  "event.custom": "自定义",
   "status.loading": "加载中",
   "status.connected": "已连接",
   "kpi.groups": "分组",
@@ -386,7 +481,12 @@ const zh: Dict = {
   "filter.keyword": "关键词",
   "routeEditor.editTitle": "编辑路由",
   "routeEditor.newTitle": "新建路由",
+  "routeEditor.eyebrow": "路由",
   "routeEditor.close": "关闭",
+  "routeEditor.sectionBasic": "基本信息",
+  "routeEditor.sectionOptions": "选项",
+  "routeEditor.sectionFilters": "过滤器",
+  "routeEditor.sectionTargets": "目标",
   "routeEditor.templates": "模板",
   "routeEditor.templatesNote": "（点击可预填过滤器）",
   "templates.push": "推送",
@@ -446,7 +546,13 @@ const zh: Dict = {
   "routeEditor.errChannel": "第 {n} 个目标频道 ID 为必填项",
   "groupEditor.editTitle": "编辑分组",
   "groupEditor.newTitle": "新建分组",
+  "groupEditor.eyebrow": "分组",
   "groupEditor.close": "关闭",
+  "groupEditor.sectionBasic": "基本信息",
+  "groupEditor.sectionPreferences": "偏好",
+  "groupEditor.sectionAccess": "访问与成员",
+  "groupEditor.sectionProviders": "提供方",
+  "groupEditor.sectionLog": "日志",
   "groupEditor.name": "名称",
   "groupEditor.namePlaceholder": "我的团队",
   "groupEditor.id": "ID",

app/composables/useMetrics.ts

@@ -6,12 +6,13 @@ export function useMetrics() {
   const loading = ref(false);
   const error = ref("");
 
-  async function load(): Promise<void> {
+  async function load(groupId?: string): Promise<void> {
     loading.value = true;
     error.value = "";
     needLogin.value = false;
     try {
-      const data = await apiFetch<{ metrics?: DeliveryMetrics }>("/admin/api/metrics");
+      const qs = groupId ? `?groupId=${encodeURIComponent(groupId)}` : "";
+      const data = await apiFetch<{ metrics?: DeliveryMetrics }>(`/admin/api/metrics${qs}`);
       metrics.value = data.metrics ?? null;
     } catch (err) {
       if (!needLogin.value) error.value = err instanceof Error ? err.message : String(err);