Add Vue frontend application

frontend/src/components/stats/SummaryRow.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+  items: { label: string; value: string | number }[]
+  columns?: number
+}>()
+</script>
+
+<template>
+  <div class="summary-row" :style="{ '--cols': columns || 4 }">
+    <div v-for="item in items" :key="item.label" class="summary-item">
+      <span class="summary-value">{{ item.value }}</span>
+      <span class="summary-label">{{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.summary-row {
+  display: grid;
+  grid-template-columns: repeat(var(--cols), 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-dim);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.summary-item:hover {
+  border-color: var(--border-mid);
+}
+
+.summary-value {
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--accent-cyan);
+  text-shadow: 0 0 8px var(--accent-cyan-glow);
+}
+
+.summary-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-dim);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+</style>