public/css/shared.css

@@ -593,6 +593,77 @@ a:hover {
     margin-top: 2px;
 }
 
+/* ── KPI Tiles ────────────────────────────────── */
+
+.kpi-strip {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 14px;
+    margin-bottom: 16px;
+    list-style: none;
+    padding: 0;
+}
+
+.kpi-tile {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 14px 16px;
+    display: flex;
+    gap: 12px;
+    box-shadow: var(--shadow-card);
+}
+
+.kpi-rail {
+    width: 3px;
+    align-self: stretch;
+    border-radius: 2px;
+    background: var(--ink-3);
+    flex-shrink: 0;
+}
+
+.kpi-rail.up {
+    background: var(--up);
+}
+
+.kpi-rail.down {
+    background: var(--down);
+}
+
+.kpi-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.kpi-value {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum", "zero";
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--ink);
+    line-height: 1;
+}
+
+.kpi-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ink);
+}
+
+.kpi-sub {
+    font-size: 12px;
+    color: var(--ink-3);
+}
+
+@media (max-width: 880px) {
+    .kpi-strip {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 /* ── Table Toolbar + Pill Toggle ─────────────── */
 
 .table-toolbar {

views/pages/index.ejs

@@ -16,6 +16,43 @@
                 </button>
             </div>
         </div>
+
+        <!-- KPI Summary Tiles -->
+        <section class="kpi-strip" aria-label="Tracker overview">
+          <article class="kpi-tile">
+            <span class="kpi-rail"></span>
+            <div class="kpi-body">
+              <div class="kpi-value"><%= kpis.tracked %></div>
+              <div class="kpi-label">Tracked</div>
+              <div class="kpi-sub"><%= kpis.active %> active</div>
+            </div>
+          </article>
+          <article class="kpi-tile">
+            <span class="kpi-rail"></span>
+            <div class="kpi-body">
+              <div class="kpi-value"><%= kpis.avg ?? '—' %></div>
+              <div class="kpi-label">Avg rating</div>
+              <div class="kpi-sub">across active players</div>
+            </div>
+          </article>
+          <article class="kpi-tile">
+            <span class="kpi-rail up"></span>
+            <div class="kpi-body">
+              <div class="kpi-value"><%= kpis.climbing %></div>
+              <div class="kpi-label">Climbing</div>
+              <div class="kpi-sub">this month</div>
+            </div>
+          </article>
+          <article class="kpi-tile">
+            <span class="kpi-rail down"></span>
+            <div class="kpi-body">
+              <div class="kpi-value"><%= kpis.slipping %></div>
+              <div class="kpi-label">Slipping</div>
+              <div class="kpi-sub">this month</div>
+            </div>
+          </article>
+        </section>
+
         <div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px;">
             <a href="#" onclick="clearCache(); return false;" style="color: var(--text-muted); font-size: 12px; text-decoration: none; opacity: 0.4;" title="Clear cache"><i class="fas fa-cog"></i></a>
         </div>