leaderboard v2, filtro por round, game, datos historicos, salas activas

client/src/views/Leaderboard.vue

@@ -1,87 +1,213 @@
 <template>
-  <div class="leaderboard">
-    <div class="container">
-      <div class="header">
-        <h1>📈 Leaderboard</h1>
-        <div class="actions">
-          <button class="btn" @click="refreshAll" :disabled="loading">{{ loading ? 'Actualizando…' : 'Actualizar' }}</button>
-          <button class="btn toggle" :class="{ active: showPercent }" @click="showPercent = !showPercent" :disabled="loading">
-            {{ showPercent ? 'Ver conteos' : 'Ver %' }}
+  <div class="leaderboard light">
+    <div class="header glass light">
+      <h1>📈 Leaderboard</h1>
+      <div class="actions">
+        <button class="btn" @click="refreshAll" :disabled="loading">{{ loading ? 'Actualizando…' : 'Actualizar' }}</button>
+        <button class="btn toggle" :class="{ active: showPercent }" @click="showPercent = !showPercent" :disabled="loading">
+          {{ showPercent ? 'Ver conteos' : 'Ver %' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="data-source-selector glass light">
+      <div class="source-label">Fuente de datos:</div>
+      <div class="source-buttons">
+        <button 
+          class="source-btn" 
+          :class="{ active: dataSource === 'aggregated' }"
+          @click="dataSource = 'aggregated'"
+          title="Muestra el total histórico de todas las acciones registradas de los jugadores"
+        >
+          <span class="source-icon">📁</span>
+          Datos Agregados (Histórico)
+        </button>
+        <button 
+          class="source-btn" 
+          :class="{ active: dataSource === 'active-rooms' }"
+          @click="dataSource = 'active-rooms'"
+          title="Muestra solo los datos de las salas actualmente activas"
+        >
+          <span class="source-icon">🔴</span>
+          Salas Activas (Tiempo Real)
+        </button>
+      </div>
+    </div>
+
+    <div class="filters-container glass light">
+      <div class="filter-group">
+        <label class="filter-label">Round:</label>
+        <div class="filter-buttons">
+          <button 
+            class="filter-btn" 
+            :class="{ active: roundFilter === 'all' }"
+            @click="roundFilter = 'all'"
+            title="Mostrar todas las rondas"
+          >
+            Todas
+          </button>
+          <button 
+            v-for="r in [1, 2, 3]" 
+            :key="r"
+            class="filter-btn" 
+            :class="{ active: roundFilter === r }"
+            @click="roundFilter = r as (1 | 2 | 3)"
+            :title="`Mostrar solo Round ${r}`"
+          >
+            R{{ r }}
           </button>
         </div>
       </div>
-
-      <div class="section">
-        <h2 class="section-title">Eventos globales (detalle por tipo)</h2>
-        <div v-if="loading" class="placeholder">Cargando datos…</div>
-        <div v-else class="bars">
-          <div v-for="k in EVENTS" :key="k" class="bar-row">
-            <span class="label">{{ friendlyKind(k) }}</span>
-            <div class="bar">
-              <div class="bar-fill p1" :style="{ width: globalBarWidth(k) + '%' }"></div>
-            </div>
-            <span class="value">{{ globalValueLabel(k) }}</span>
-          </div>
-          <div class="hint small">Nota: basado en mensajes disponibles por sala.</div>
+      
+      <div class="filter-group">
+        <label class="filter-label">Game:</label>
+        <div class="filter-buttons">
+          <button 
+            class="filter-btn" 
+            :class="{ active: gameFilter === 'all' }"
+            @click="gameFilter = 'all'"
+            title="Mostrar todas las variantes"
+          >
+            Todas
+          </button>
+          <button 
+            v-for="g in ['G1', 'G2', 'G3', 'G4', 'G5']" 
+            :key="g"
+            class="filter-btn" 
+            :class="{ active: gameFilter === g }"
+            @click="gameFilter = g as ('G1' | 'G2' | 'G3' | 'G4' | 'G5')"
+            :title="`Mostrar solo variante ${g}`"
+          >
+            {{ g }}
+          </button>
         </div>
       </div>
+    </div>
 
-      <div class="section">
-        <h2 class="section-title">Estadísticas por jugador</h2>
-        <div class="player-filter">
-          <label>Jugador:</label>
-          <select v-model="selectedUuid" @change="loadPlayerHistory" class="select">
-            <option value="">— Seleccionar —</option>
-            <option v-for="p in playersFiltered" :key="p.uuid" :value="p.uuid">{{ p.name }} ({{ p.uuid.slice(0,8) }})</option>
-          </select>
-          <input class="search" v-model="search" placeholder="Buscar jugador..." />
+    <div class="controls glass light">
+      <div class="legend">
+        <span class="key global"></span> Global
+        <span class="sep">·</span>
+        <span class="key player" v-if="selectedUuid"></span> Jugador
+      </div>
+      <div class="player-chips">
+        <input class="search" v-model="search" placeholder="Buscar jugador…" />
+        <div class="chips">
+          <button
+            v-for="p in playersPage"
+            :key="p.uuid"
+            class="chip"
+            :class="{ active: p.uuid === selectedUuid }"
+            @click="selectPlayer(p.uuid)"
+            :title="p.uuid"
+            :style="{ '--primary': p.color || '#667eea' } as any"
+          >
+            <span class="avatar">{{ initials(p.name) }}</span>
+            <span class="label">{{ p.name || 'Jugador' }}</span>
+          </button>
+          <button v-if="selectedUuid" class="chip clear" @click="clearPlayer">Quitar selección</button>
         </div>
-        <div v-if="playerLoading" class="placeholder">Cargando historial del jugador…</div>
-        <div v-else-if="!selectedUuid" class="placeholder">Selecciona un jugador para ver sus eventos.</div>
-        <div v-else class="player-stats">
-          <div class="bars">
-            <div class="bar-row" v-for="k in EVENTS" :key="'p-' + k">
-              <span class="label">{{ friendlyKind(k) }}</span>
-              <div class="bar"><div class="bar-fill p2" :style="{ width: playerBarWidth(k) + '%' }"></div></div>
-              <span class="value">{{ playerValueLabel(k) }}</span>
-            </div>
-          </div>
+        <div class="pagination">
+          <button class="pg-btn" @click="prevPage" :disabled="page <= 1">«</button>
+          <span class="pg-ind">{{ page }} / {{ pageCount }}</span>
+          <button class="pg-btn" @click="nextPage" :disabled="page >= pageCount">»</button>
         </div>
       </div>
+    </div>
 
-      <div class="section">
-        <h2 class="section-title">Acciones por jugador (total)</h2>
-        <div class="table-wrapper">
-          <div class="table">
-            <div class="thead">
-              <div class="th name" @click="setSort('name')">Jugador <span class="sort" :class="sortIcon('name')"></span></div>
-              <div class="th total" @click="setSort('total')">Total <span class="sort" :class="sortIcon('total')"></span></div>
-            </div>
-            <div class="tr" v-for="row in sortedPlayersActions" :key="row.uuid">
-              <div class="td name">{{ row.name || '(sin nombre)' }} <span class="uid">({{ row.uuid.slice(0,8) }})</span></div>
-              <div class="td total">{{ row.total }}</div>
+    <div class="panel glass">
+      <h2 class="panel-title">Eventos y comparación</h2>
+      <div v-if="loading" class="placeholder">Cargando datos…</div>
+      <div v-else class="bars big">
+        <div v-for="k in EVENTS" :key="k" class="bar-row" :class="{ highlight: highlighted === k }" @mouseenter="highlighted = k" @mouseleave="highlighted = ''">
+          <div class="bar">
+            <div class="bar-fill global shimmer" :style="{ width: globalBarWidth(k) + '%', background: EVENT_STYLES[k]?.gradient || 'linear-gradient(90deg, #94a3b8, #64748b)' }"></div>
+            <div v-if="selectedUuid" class="bar-fill player" :style="{ width: playerBarWidth(k) + '%', background: playerBarGradient }"></div>
+            <div class="bar-chip" :style="{ background: getEventChipBg(k), borderColor: getEventBorderColor(k) }">
+              <span class="event-icon">{{ EVENT_STYLES[k]?.icon || '📊' }}</span>
+              <span class="chip-label">{{ friendlyKind(k) }}</span>
+              <span class="chip-count global">{{ globalValueLabel(k) }}</span>
+              <span v-if="selectedUuid" class="chip-count player">{{ playerValueLabel(k) }}</span>
             </div>
           </div>
         </div>
+        <div class="hint small">Basado en mensajes disponibles por sala. Click jugador para comparar.</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 
 interface RoomInfo { roomId: string; metadata?: any; }
 interface RoomState { players?: any[]; systemMessages?: { kind: string }[] }
 
 const loading = ref(false);
+const dataSource = ref<'aggregated' | 'active-rooms'>('aggregated'); // Default to aggregated data
+const roundFilter = ref<'all' | 1 | 2 | 3>('all');
+const gameFilter = ref<'all' | 'G1' | 'G2' | 'G3' | 'G4' | 'G5'>('all');
 const EVENTS = [
   'p1_propose', 'p1_no_offer',
   'p2_snatch', 'p2_accept', 'p2_force', 'p2_no_force', 'p2_reject',
   'p1_shame', 'p1_no_shame', 'p1_report', 'p1_no_report'
 ];
+
+// Event styles matching OfferActions and OfferControls components
+const EVENT_STYLES: Record<string, { icon: string; color: string; gradient: string }> = {
+  'p1_propose': { icon: '✨', color: '#667eea', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
+  'p1_no_offer': { icon: '❌', color: '#6b7280', gradient: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)' },
+  'p2_accept': { icon: '✓', color: '#10b981', gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)' },
+  'p2_reject': { icon: '✕', color: '#f59e0b', gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)' },
+  'p2_snatch': { icon: '👹', color: '#ef4444', gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)' },
+  'p2_force': { icon: '⚡', color: '#667eea', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
+  'p2_no_force': { icon: '🚫', color: '#6b7280', gradient: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)' },
+  'p1_shame': { icon: '😶', color: '#fbbf24', gradient: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)' },
+  'p1_no_shame': { icon: '🙂', color: '#6b7280', gradient: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)' },
+  'p1_report': { icon: '⚖️', color: '#8b5cf6', gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)' },
+  'p1_no_report': { icon: '🤝', color: '#6b7280', gradient: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)' }
+};
 const globalEventCounts = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
+const globalEventCountsAggregated = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
+const globalEventCountsActiveRooms = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
+
+// Store detailed event data with round and game info
+const detailedEventsAggregated = ref<Array<{ kind: string; round?: number; gameVariant?: string }>>([]);
+const detailedEventsActiveRooms = ref<Array<{ kind: string; round?: number; gameVariant?: string }>>([]); 
 const showPercent = ref(false);
+// Function to apply filters and recalculate counts
+function applyFilters() {
+  const sourceEvents = dataSource.value === 'aggregated' 
+    ? detailedEventsAggregated.value 
+    : detailedEventsActiveRooms.value;
+  
+  // Filter events based on round and game
+  const filteredEvents = sourceEvents.filter(event => {
+    if (roundFilter.value !== 'all' && event.round !== roundFilter.value) {
+      return false;
+    }
+    if (gameFilter.value !== 'all' && event.gameVariant !== gameFilter.value) {
+      return false;
+    }
+    return true;
+  });
+  
+  // Recalculate counts from filtered events
+  const counts: Record<string, number> = Object.fromEntries(EVENTS.map(k => [k, 0])) as any;
+  filteredEvents.forEach(event => {
+    if (EVENTS.includes(event.kind)) {
+      counts[event.kind] = (counts[event.kind] || 0) + 1;
+    }
+  });
+  
+  globalEventCounts.value = counts;
+}
+
+// Watch for changes in filters and data source
+watch([dataSource, roundFilter, gameFilter], () => {
+  applyFilters();
+});
+
 const globalMax = computed(() => {
   const vals = EVENTS.map(k => globalEventCounts.value[k] || 0);
   const m = Math.max(0, ...vals);
@@ -97,7 +223,7 @@ function globalValueLabel(k: string) {
   return showPercent.value ? `${Math.round((v / globalTotal.value) * 100)}%` : String(v);
 }
 const rooms = ref<RoomInfo[]>([]);
-const players = ref<{ uuid: string; name: string }[]>([]);
+const players = ref<{ uuid: string; name: string; color?: string }[]>([]);
 const search = ref('');
 const playersFiltered = computed(() => {
   const q = (search.value || '').toLowerCase();
@@ -105,7 +231,20 @@ const playersFiltered = computed(() => {
   return players.value.filter(p => (p.name || '').toLowerCase().includes(q) || (p.uuid || '').toLowerCase().includes(q));
 });
 
+// Reset page when search changes
+watch(search, () => {
+  page.value = 1;
+});
+const page = ref(1);
+const pageSize = 20;
+const pageCount = computed(() => Math.max(1, Math.ceil((playersFiltered.value.length || 0) / pageSize)));
+const playersPage = computed(() => {
+  const start = (page.value - 1) * pageSize;
+  return playersFiltered.value.slice(start, start + pageSize);
+});
+
 const selectedUuid = ref('');
+const highlighted = ref('');
 const playerLoading = ref(false);
 const playerEventCounts = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
 const playersActionsByUuid = ref<Record<string, Record<string, number>>>({});
@@ -124,6 +263,55 @@ function playerValueLabel(k: string) {
   return showPercent.value ? `${Math.round((v / playerTotal.value) * 100)}%` : String(v);
 }
 
+function initials(name: string): string {
+  const n = (name || '').trim();
+  if (!n) return '🙂';
+  const parts = n.split(/\s+/).slice(0, 2);
+  const chars = parts.map(p => p[0]?.toUpperCase()).join('');
+  return chars || '🙂';
+}
+
+function selectPlayer(uuid: string) {
+  if (selectedUuid.value === uuid) return;
+  selectedUuid.value = uuid;
+  loadPlayerHistory();
+}
+
+function clearPlayer() {
+  selectedUuid.value = '';
+}
+
+function prevPage() { page.value = Math.max(1, page.value - 1); }
+function nextPage() { page.value = Math.min(pageCount.value, page.value + 1); }
+
+// Ensure page doesn't exceed pageCount when players change
+watch(pageCount, (newCount) => {
+  if (page.value > newCount) {
+    page.value = Math.max(1, newCount);
+  }
+});
+
+// Dynamic per-player overlay bar gradient and label color
+const playerBarGradient = computed(() => {
+  const p = players.value.find(x => x.uuid === selectedUuid.value);
+  const c = p?.color || '#667eea';
+  return `linear-gradient(90deg, ${c}, ${c})`;
+});
+
+// Helper functions for event styling
+function getEventChipBg(k: string): string {
+  const style = EVENT_STYLES[k];
+  if (!style) return 'rgba(255,255,255,0.82)';
+  return `linear-gradient(135deg, ${style.color}15 0%, rgba(255,255,255,0.9) 100%)`;
+}
+
+function getEventBorderColor(k: string): string {
+  const style = EVENT_STYLES[k];
+  if (!style) return 'rgba(229,231,235,0.9)';
+  return `${style.color}40`;
+}
+
+
 const apiBase = (import.meta as any).env?.VITE_API_URL || `${window.location.protocol}//${window.location.host}/api`;
 const esRooms = ref<EventSource|null>(null);
 const esUuids = ref<EventSource|null>(null);
@@ -147,27 +335,44 @@ function setupStreams() {
     try {
       const data = JSON.parse((e as MessageEvent).data || '{}');
       const details = data?.roomDetails || {};
-      // Recompute global counts
+      
+      // Collect detailed events for active rooms
+      const detailedEvents: Array<{ kind: string; round?: number; gameVariant?: string }> = [];
       const counts: Record<string, number> = Object.fromEntries(EVENTS.map(k => [k, 0])) as any;
+      
       Object.values(details).forEach((d: any) => {
         (Array.isArray(d?.systemMessages) ? d.systemMessages : []).forEach((m: any) => {
           const k = (m?.kind || '').toString();
-          if (EVENTS.includes(k)) counts[k] = (counts[k] || 0) + 1;
+          if (EVENTS.includes(k)) {
+            counts[k] = (counts[k] || 0) + 1;
+            detailedEvents.push({
+              kind: k,
+              round: m?.round,
+              gameVariant: m?.gameVariant || m?.variant
+            });
+          }
         });
       });
-      globalEventCounts.value = counts as any;
-      // Build players list from room details
-      const playerMap = new Map<string, string>();
+      
+      globalEventCountsActiveRooms.value = counts as any;
+      detailedEventsActiveRooms.value = detailedEvents;
+      
+      // Apply filters and update display
+      if (dataSource.value === 'active-rooms') {
+        applyFilters();
+      }
+      // Build players list from room details (keep color if provided)
+      const playerMap = new Map<string, { name: string; color?: string }>();
       Object.values(details).forEach((d: any) => {
         (d?.players || []).forEach((p: any) => {
           const uuid = (p?.uuid || p?.sessionId || '').toString();
-          if (uuid && !playerMap.has(uuid)) playerMap.set(uuid, (p?.name || 'player'));
+          if (uuid && !playerMap.has(uuid)) playerMap.set(uuid, { name: (p?.name || 'player'), color: p?.color });
         });
       });
-      const merged = new Map<string, string>();
-      players.value.forEach(p => merged.set(p.uuid, p.name));
-      playerMap.forEach((name, uuid) => merged.set(uuid, name));
-      players.value = Array.from(merged.entries()).map(([uuid, name]) => ({ uuid, name })).sort((a,b)=>a.name.localeCompare(b.name));
+      const merged = new Map<string, { name: string; color?: string }>();
+      players.value.forEach(p => merged.set(p.uuid, { name: p.name, color: p.color }));
+      playerMap.forEach((obj, uuid) => merged.set(uuid, { name: obj.name, color: obj.color || merged.get(uuid)?.color }));
+      players.value = Array.from(merged.entries()).map(([uuid, obj]) => ({ uuid, name: obj.name, color: obj.color })).sort((a,b)=>a.name.localeCompare(b.name));
     } finally {
       loading.value = false;
     }
@@ -180,15 +385,16 @@ function setupStreams() {
     try {
       const data = JSON.parse((e as MessageEvent).data || '{}');
       const list = Array.isArray(data?.uuids) ? data.uuids : [];
-      const existing = new Map<string, string>();
-      players.value.forEach(p => existing.set(p.uuid, p.name));
+      const existing = new Map<string, { name: string; color?: string }>();
+      players.value.forEach(p => existing.set(p.uuid, { name: p.name, color: p.color }));
       list.forEach((u: any) => {
         const uuid = (u?.uuid || '').toString();
         if (!uuid) return;
-        const name = (u?.name || existing.get(uuid) || 'player').toString();
-        existing.set(uuid, name);
+        const prev = existing.get(uuid);
+        const name = (u?.name || prev?.name || 'player').toString();
+        existing.set(uuid, { name, color: prev?.color });
       });
-      players.value = Array.from(existing.entries()).map(([uuid, name]) => ({ uuid, name })).sort((a,b)=>a.name.localeCompare(b.name));
+      players.value = Array.from(existing.entries()).map(([uuid, obj]) => ({ uuid, name: obj.name, color: obj.color })).sort((a,b)=>a.name.localeCompare(b.name));
     } catch {}
   };
   esUuids.value.onerror = () => {};
@@ -200,6 +406,11 @@ function setupStreams() {
       const data = JSON.parse((e as MessageEvent).data || '{}');
       const list = Array.isArray(data?.players) ? data.players : [];
       allPlayersActions.value = list.map((p: any) => ({ uuid: String(p.uuid||''), name: String(p.name||''), total: Number(p.total||0) }));
+      
+      // Collect all detailed events from all players
+      const allDetailedEvents: Array<{ kind: string; round?: number; gameVariant?: string }> = [];
+      const aggregatedCounts: Record<string, number> = Object.fromEntries(EVENTS.map(k => [k, 0])) as any;
+      
       // Update detailed counts map
       const byUuid: Record<string, Record<string, number>> = {};
       list.forEach((p: any) => {
@@ -207,25 +418,44 @@ function setupStreams() {
         if (!uuid) return;
         const src = p?.counts || {};
         const normalized: Record<string, number> = Object.fromEntries(EVENTS.map(k => [k, 0])) as any;
-        EVENTS.forEach(k => { normalized[k] = Number(src[k] || 0); });
+        
+        // Add detailed history events
+        if (Array.isArray(p?.detailedHistory)) {
+          allDetailedEvents.push(...p.detailedHistory);
+        }
+        
+        EVENTS.forEach(k => { 
+          const count = Number(src[k] || 0);
+          normalized[k] = count;
+          aggregatedCounts[k] = (aggregatedCounts[k] || 0) + count;
+        });
         byUuid[uuid] = normalized;
       });
+      
       playersActionsByUuid.value = byUuid;
+      globalEventCountsAggregated.value = aggregatedCounts;
+      detailedEventsAggregated.value = allDetailedEvents;
+      
+      // Apply filters and update display if viewing aggregated data
+      if (dataSource.value === 'aggregated') {
+        applyFilters();
+      }
       // If a player is selected, update playerEventCounts live
       if (selectedUuid.value) {
         const counts = byUuid[selectedUuid.value];
         if (counts) playerEventCounts.value = counts as any;
       }
-      // Merge names into players list
-      const existing = new Map<string, string>();
-      players.value.forEach(p => existing.set(p.uuid, p.name));
+      // Merge names into players list; preserve colors from previous streams
+      const existing = new Map<string, { name: string; color?: string }>();
+      players.value.forEach(p => existing.set(p.uuid, { name: p.name, color: p.color }));
       list.forEach((u: any) => {
         const uuid = (u?.uuid || '').toString();
         if (!uuid) return;
-        const name = (u?.name || existing.get(uuid) || 'player').toString();
-        existing.set(uuid, name);
+        const prev = existing.get(uuid);
+        const name = (u?.name || prev?.name || 'player').toString();
+        existing.set(uuid, { name, color: prev?.color });
       });
-      players.value = Array.from(existing.entries()).map(([uuid, name]) => ({ uuid, name })).sort((a,b)=>a.name.localeCompare(b.name));
+      players.value = Array.from(existing.entries()).map(([uuid, obj]) => ({ uuid, name: obj.name, color: obj.color })).sort((a,b)=>a.name.localeCompare(b.name));
     } catch {}
   };
   esActions.value.onerror = () => {};
@@ -248,7 +478,7 @@ async function refreshAll() {
     rooms.value = (list || []).filter((r: any) => r?.name === 'game');
     // reset counts
     globalEventCounts.value = Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>;
-    const playerMap = new Map<string, string>();
+    const playerMap = new Map<string, { name: string; color?: string }>();
 
     for (const r of rooms.value) {
       try {
@@ -263,11 +493,11 @@ async function refreshAll() {
         // collect players for filter
         (s?.players || []).forEach((p: any) => {
           const uuid = (p?.uuid || p?.sessionId || '').toString();
-          if (uuid && !playerMap.has(uuid)) playerMap.set(uuid, (p?.name || 'player'));
+          if (uuid && !playerMap.has(uuid)) playerMap.set(uuid, { name: (p?.name || 'player'), color: p?.color });
         });
       } catch {}
     }
-    players.value = Array.from(playerMap.entries()).map(([uuid, name]) => ({ uuid, name }));
+    players.value = Array.from(playerMap.entries()).map(([uuid, obj]) => ({ uuid, name: obj.name, color: obj.color }));
   } finally {
     loading.value = false;
   }
@@ -284,36 +514,22 @@ async function loadPlayerHistory() {
   playerLoading.value = false;
 }
 
-onMounted(setupStreams);
+onMounted(() => {
+  setupStreams();
+  // Initialize with aggregated data as default
+  globalEventCounts.value = { ...globalEventCountsAggregated.value };
+});
 onUnmounted(closeStreams);
 
-// Table of all players actions (from SSE actions stream)
-const allPlayersActions = ref<{ uuid: string; name: string; total: number }[]>([]);
-const sortKey = ref<'name'|'total'>('total');
-const sortDir = ref<'asc'|'desc'>('desc');
-function setSort(key: 'name'|'total') {
-  if (sortKey.value === key) {
-    sortDir.value = (sortDir.value === 'asc' ? 'desc' : 'asc');
-  } else {
-    sortKey.value = key;
-    sortDir.value = (key === 'name' ? 'asc' : 'desc');
-  }
-}
-function sortIcon(key: 'name'|'total') {
-  if (sortKey.value !== key) return '';
-  return (sortDir.value === 'asc' ? 'asc' : 'desc');
-}
-const sortedPlayersActions = computed(() => {
-  const q = (search.value || '').toLowerCase();
-  let arr = allPlayersActions.value || [];
-  if (q) arr = arr.filter(p => (p.name || '').toLowerCase().includes(q) || (p.uuid || '').toLowerCase().includes(q));
-  return [...arr].sort((a,b) => {
-    const dir = (sortDir.value === 'asc' ? 1 : -1);
-    if (sortKey.value === 'name') return a.name.localeCompare(b.name) * dir;
-    return (a.total - b.total) * dir;
-  });
+// Reset to first page when search changes or players list length shrinks below current page
+watch(() => search.value, () => { page.value = 1; });
+watch(() => playersFiltered.value.length, () => {
+  if (page.value > pageCount.value) page.value = pageCount.value;
 });
 
+// Removed totals table and sorting; keep actions stream for per-player counts only
+const allPlayersActions = ref<{ uuid: string; name: string; total: number }[]>([]);
+
 function friendlyKind(kind: string): string {
   const k = (kind || '').toString();
   const map: Record<string, string> = {
@@ -334,42 +550,293 @@ function friendlyKind(kind: string): string {
 </script>
 
 <style scoped>
-.leaderboard { min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; }
-.container { background:#fff; border-radius: 16px; border:1px solid #e5e9f0; box-shadow: 0 18px 50px rgba(0,0,0,0.35); max-width: 1000px; margin: 0 auto; padding: 16px; }
-.header { display:flex; align-items:center; justify-content:space-between; }
+/* Light theme aligned with PlayerStats/GameEndModal */
+.leaderboard.light { min-height: 100vh; padding: 20px; background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%); color:#0f172a; display:flex; flex-direction:column; }
+
+.glass.light { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(229, 231, 235, 0.9); box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: 16px; }
+
+.header { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; margin-bottom: 14px; }
 .header h1 { margin: 0; }
-.actions .btn { background:#667eea; color:#fff; border:none; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; }
+.actions { display:flex; gap: 8px; }
+.actions .btn { background:#667eea; color:#fff; border:none; border-radius:10px; padding:8px 12px; font-weight:800; cursor:pointer; }
 .actions .btn.toggle { background:#eef2ff; color:#3949ab; border:1px solid #c7d2fe; }
 .actions .btn.toggle.active { background:#3949ab; color:#fff; border-color:#2e3f9a; }
-.section { margin-top: 16px; padding: 12px; background:#f8fafc; border:1px solid #e5e9f0; border-radius: 12px; }
-.section-title { margin: 0 0 10px; color:#334155; }
-.placeholder { color:#64748b; padding: 12px; background:#fff; border:1px dashed #e5e9f0; border-radius:10px; }
-.bars { display:flex; flex-direction:column; gap:8px; }
-.bar-row { display:grid; grid-template-columns: 180px 1fr 70px; gap:8px; align-items:center; }
-.bar { height: 14px; background:#eef2ff; border-radius: 999px; overflow:hidden; border:1px solid #c7d2fe; }
-.bar-fill { height: 100%; }
-.bar-fill.p1 { background: #667eea; }
-.bar-fill.p2 { background: #764ba2; }
-.value { font-weight:800; color:#334155; text-align:right; }
+
+.controls { display:grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; margin-bottom: 14px; }
+.legend { font-size: 13px; color:#334155; display:flex; align-items:center; gap:10px; }
+.key { width: 12px; height: 12px; border-radius: 999px; display:inline-block; }
+.key.global { background: linear-gradient(90deg, #34d399, #10b981); box-shadow: 0 0 8px rgba(16,185,129,0.35); }
+.key.player { background: linear-gradient(90deg, #a78bfa, #6366f1); box-shadow: 0 0 8px rgba(99,102,241,0.35); }
+.sep { opacity: 0.6; }
+
+.player-chips { display:flex; align-items:flex-start; gap: 10px; flex-wrap: wrap; }
+.search { padding:8px 10px; border:1px solid #cbd5e1; background:#fff; color:#0f172a; border-radius: 10px; min-width: 240px; outline:none; }
+.search::placeholder { color:#64748b; }
+.chips { display:flex; gap:10px; flex-wrap: wrap; }
+.chip { display:flex; align-items:center; gap:8px; background: color-mix(in srgb, var(--primary) 6%, white); border:1px solid color-mix(in srgb, var(--primary) 24%, #e5e7eb); padding:8px 12px; border-radius: 999px; color:#111827; cursor:pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
+.chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 10%, white); box-shadow: 0 6px 18px rgba(102,126,234,0.18); }
+.chip.active { background: color-mix(in srgb, var(--primary) 18%, white); border-color: color-mix(in srgb, var(--primary) 45%, #c7d2fe); box-shadow: 0 6px 22px rgba(99,102,241,0.22); }
+.chip.clear { background:#fff; border-style:dashed; color:#334155; }
+.avatar { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 25%, #eef2ff); display:grid; place-items:center; font-weight:900; color: color-mix(in srgb, var(--primary) 80%, #111); }
+
+.panel { padding: 14px 16px; display:flex; flex-direction:column; flex: 1 1 auto; min-height: 0; }
+.panel-title { margin: 0 0 10px; color:#334155; }
+.placeholder { color:#64748b; padding: 12px; border:1px dashed #e5e9f0; border-radius:10px; background:#fff; }
+
+.bars { display:flex; flex-direction:column; gap: 8px; flex: 1 1 auto; min-height: 0; }
+.bars.big { height: 100%; }
+.bars.big .bar-row { flex: 1 1 0; min-height: 36px; }
+.bar-row { display:flex; align-items:stretch; padding: 0; background: transparent; transition: transform .18s ease; }
+.bar-row.highlight { transform: translateX(4px); }
+
+/* Remove the chip-glass style since we're making containers transparent */
+.chip-glass { background: transparent; border: none; box-shadow: none; }
+
+.bar { position:relative; height: 100%; background: linear-gradient(135deg, rgba(238,242,255,0.4) 0%, rgba(199,210,254,0.2) 100%); border-radius: 12px; overflow: hidden; border: 1px solid rgba(199,210,254,0.3); width: 100%; }
+.bar-fill { position:absolute; left:0; top:0; height: 100%; transform-origin: left center; transition: width .65s cubic-bezier(.2,.7,.1,1); border-radius: 12px; }
+.bar-fill.global { backdrop-filter: blur(4px); opacity: 0.75; }
+.bar-fill.player { mix-blend-mode: normal; opacity: 0.85; backdrop-filter: blur(4px); }
+.bar-chip { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius: 999px; border:1px solid; box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); transition: all 0.3s ease; }
+.bar-row:hover .bar-chip { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
+.event-icon { font-size: 14px; }
+.chip-label { font-weight:800; color:#0f172a; letter-spacing:.1px; white-space: nowrap; font-size: 13px; }
+.chip-count { padding:2px 6px; border-radius:999px; font-weight:800; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-left: 2px; }
+.chip-count.global { background: rgba(255,255,255,0.7); color:#1f2937; border:1px solid rgba(229,231,235,0.5); }
+.chip-count.player { background: rgba(99,102,241,0.15); color:#312e81; border:1px solid rgba(99,102,241,0.3); }
+
+/* Shimmer on global bars for subtle movement */
+.shimmer::after { content:''; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite; }
+@keyframes shimmer { 0%{ transform: translateX(-100%); } 45%{ transform: translateX(110%); } 100%{ transform: translateX(110%); } }
+
 .hint.small { font-size: 12px; color:#64748b; }
 
-.player-filter { display:flex; align-items:center; gap:8px; margin-bottom: 8px; }
-.select { padding:6px 8px; border:1px solid #cbd5e1; border-radius:8px; }
-.search { padding:6px 8px; border:1px solid #cbd5e1; border-radius:8px; min-width: 180px; }
-.player-stats { display:flex; flex-direction:column; gap:10px; }
-.events-list { background:#fff; border:1px solid #e5e9f0; border-radius:8px; padding:8px; }
-.events-head { font-weight:800; color:#334155; font-size: 13px; margin-bottom: 6px; }
-.events-body { display:flex; gap:6px; flex-wrap: wrap; }
-.pill { padding:4px 8px; background:#f1f5f9; border:1px solid #cbd5e1; border-radius:999px; font-size:12px; font-weight:700; color:#334155; }
+/* Data Source Selector */
+.data-source-selector {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+}
 
-.table-wrapper { overflow:auto; }
-.table { border:1px solid #e5e9f0; border-radius:8px; background:#fff; }
-.thead { display:grid; grid-template-columns: 1fr 100px; background:#eef2ff; border-bottom:1px solid #e5e9f0; position: sticky; top: 0; z-index: 1; }
-.th { padding:8px 10px; font-weight:800; color:#3949ab; cursor:pointer; display:flex; align-items:center; gap:6px; }
-.tr { display:grid; grid-template-columns: 1fr 100px; border-bottom:1px solid #f1f5f9; }
-.td { padding:8px 10px; }
-.td.total { font-weight:800; text-align:right; }
-.uid { color:#64748b; font-size:12px; margin-left:6px; }
-.sort.asc::after { content:'▲'; font-size:10px; }
-.sort.desc::after { content:'▼'; font-size:10px; }
+.source-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #334155;
+}
+
+.source-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.source-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: rgba(255,255,255,0.6);
+  color: #64748b;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.source-btn:hover {
+  background: rgba(255,255,255,0.9);
+  border-color: #cbd5e1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.source-btn.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: #667eea;
+  box-shadow: 0 6px 20px rgba(102,126,234,0.3);
+}
+
+.source-btn.active:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(102,126,234,0.4);
+}
+
+.source-icon {
+  font-size: 16px;
+}
+
+@media (max-width: 640px) {
+  .data-source-selector {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .source-buttons {
+    flex-direction: column;
+  }
+  
+  .source-btn {
+    justify-content: center;
+  }
+}
+
+/* Pagination styles */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: rgba(255,255,255,0.82);
+  border: 1px solid rgba(229,231,235,0.9);
+  border-radius: 999px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
+  backdrop-filter: blur(10px) saturate(120%);
+  -webkit-backdrop-filter: blur(10px) saturate(120%);
+}
+
+.pg-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid #cbd5e1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-weight: 900;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(102,126,234,0.25);
+}
+
+.pg-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102,126,234,0.35);
+}
+
+.pg-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #e5e7eb;
+  color: #94a3b8;
+  box-shadow: none;
+}
+
+.pg-ind {
+  font-weight: 700;
+  color: #334155;
+  font-size: 14px;
+  min-width: 60px;
+  text-align: center;
+}
+
+/* Filters Container */
+.filters-container {
+  display: flex;
+  gap: 20px;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #334155;
+  min-width: 60px;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: rgba(255,255,255,0.6);
+  color: #64748b;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.filter-btn:hover {
+  background: rgba(255,255,255,0.9);
+  border-color: #cbd5e1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.filter-btn.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: #667eea;
+  box-shadow: 0 4px 16px rgba(102,126,234,0.3);
+}
+
+.filter-btn.active:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
+}
+
+@media (max-width: 768px) {
+  .filters-container {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  
+  .filter-group {
+    justify-content: space-between;
+  }
+  
+  .filter-buttons {
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 480px) {
+  .player-chips {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .pagination {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .filter-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .filter-label {
+    min-width: auto;
+    text-align: center;
+  }
+  
+  .filter-buttons {
+    justify-content: center;
+  }
+}
 </style>

client/src/views/games/PlayerStats.vue

@@ -53,6 +53,7 @@
             <span class="th r">Rol</span>
             <span class="th tok">Tokens</span>
             <span class="th k">Evento</span>
+            <span class="th rnd">Round/Game</span>
             <span class="th x">Mensaje</span>
             <span class="th room">Sala</span>
           </div>
@@ -61,6 +62,7 @@
             <span class="r">{{ (m.role || '') || '—' }}</span>
             <span class="tok">🦃 {{ m.pavoTokens ?? 0 }} · 🌽 {{ m.eloteTokens ?? 0 }} <span v-if="(m.shameTokens ?? 0) > 0">· 😶 {{ m.shameTokens }}</span></span>
             <span class="k">{{ friendlyKind(m.kind) }}</span>
+            <span class="rnd" :title="`Round ${m.round || '?'} - Game ${m.gameVariant || m.variant || '?'}`">R{{ m.round || '?' }}/{{ (m.gameVariant || m.variant || '?').replace('G', '') }}</span>
             <span class="x">{{ m.text }}</span>
             <span class="room">{{ (m.roomId || '').slice(0,8) }}</span>
           </div>
@@ -218,7 +220,7 @@ function friendlyKind(kind: string): string {
 .history-loading, .history-empty { font-size:12px; color:#666; padding:6px; text-align:center; }
 .history-table {}
 .history-scroll { max-height: 60vh; overflow:auto; border:1px solid #e5e9f0; border-radius:8px; background:#fff; margin: 10px; }
-.history-grid { display:grid; grid-template-columns: 82px 36px 160px 110px 2fr 70px; gap:6px; align-items:center; }
+.history-grid { display:grid; grid-template-columns: 82px 36px 160px 110px 65px 2fr 70px; gap:6px; align-items:center; }
 .history-header { position: sticky; top: 0; z-index: 1; background:#667eea; border-bottom:1px solid #e5e9f0; padding:6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
 .history-header .th { font-size:11px; font-weight:800; color:#ffffff; text-transform: uppercase; }
 .history-row { padding:6px; border-bottom:1px solid #f1f5f9; }
@@ -227,6 +229,7 @@ function friendlyKind(kind: string): string {
 .history-row .r { font-size:11px; font-weight:700; color:#555; text-transform: uppercase; }
 .history-row .tok { font-size:12px; color:#334155; }
 .history-row .k { font-size:12px; font-weight:700; color:#334155; }
+.history-row .rnd { font-size:11px; font-weight:600; color:#667eea; font-family: monospace; }
 .history-row .x { font-size:12px; color:#475569; }
 .history-row .room { font-family: monospace; font-size:11px; color:#777; text-align:right; }
 .shame-badge { margin-left:8px; margin-right:0; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; border-radius:999px; padding:2px 8px; font-weight:800; font-size:12px; display:flex; align-items:center; gap:6px; }

server/src/adminApi.ts

@@ -816,18 +816,28 @@ async function sendPlayersActionsUpdate(client?: Response) {
     const players = uuids.map((uuid: string) => {
       const history = nameManager.getSystemHistory(uuid) || [];
       const counts: any = Object.fromEntries(ACTION_EVENTS.map(k => [k, 0]));
+      const detailedHistory: any[] = [];
+      
       for (const entry of history) {
         const kind = (entry as any)?.kind || '';
         if (!ACTION_EVENTS.includes(kind)) continue;
         if (!isActionMade(kind, (entry as any)?.role)) continue;
         counts[kind] = (counts[kind] || 0) + 1;
+        
+        // Include detailed event info
+        detailedHistory.push({
+          kind,
+          round: (entry as any)?.round,
+          gameVariant: (entry as any)?.gameVariant || (entry as any)?.variant
+        });
       }
       const total = ACTION_EVENTS.reduce((acc, k) => acc + (counts[k] || 0), 0);
       return {
         uuid,
         name: nameManager.getPlayerName(uuid) || null,
         counts,
-        total
+        total,
+        detailedHistory
       };
     }).filter((p: any) => p.total > 0 || p.name);
 

server/src/rooms/GameRoom.ts

@@ -6,7 +6,7 @@ import { broadcastDashboardUpdate } from "../adminApi";
 
 export class GameRoom extends Room<GameState> {
   maxClients = 2;
-  private systemMessages: { text: string; kind: string; timestamp: number }[] = [];
+  private systemMessages: { text: string; kind: string; timestamp: number; round?: number; gameVariant?: string }[] = [];
 
   getFilterOptions() {
     // If waiting for shuffled players, report as available regardless of current client count
@@ -46,8 +46,14 @@ export class GameRoom extends Room<GameState> {
     if (kind !== 'round_advance') {
       this.recentSystemMessage = { text, kind, timestamp };
     }
-    // Persist in per-room history (keep last 200)
-    this.systemMessages.push({ text, kind, timestamp });
+    // Persist in per-room history (keep last 200) with round and game variant info
+    this.systemMessages.push({ 
+      text, 
+      kind, 
+      timestamp,
+      round: this.state.currentRound,
+      gameVariant: this.state.currentVariant
+    });
     if (this.systemMessages.length > 200) {
       this.systemMessages.splice(0, this.systemMessages.length - 200);
     }
@@ -78,7 +84,7 @@ export class GameRoom extends Room<GameState> {
             kind,
             text,
             roomId: this.roomId,
-            variant: this.state.currentVariant,
+            gameVariant: this.state.currentVariant,
             round: this.state.currentRound,
             role: (player as any)?.role || '',
             pavoTokens: (player as any)?.pavoTokens || 0,

server/src/utils/nameManager.ts

@@ -9,6 +9,7 @@ export class NameManager {
     text: string;
     roomId?: string;
     variant?: string;
+    gameVariant?: string;
     round?: number;
     role?: 'P1' | 'P2' | '';
     pavoTokens?: number;
@@ -174,7 +175,7 @@ export class NameManager {
   // Per-UUID system message history (as seen while connected)
   appendSystemMessage(uuid: string, entry: {
     timestamp: number; kind: string; text: string;
-    roomId?: string; variant?: string; round?: number;
+    roomId?: string; variant?: string; gameVariant?: string; round?: number;
     role?: 'P1'|'P2'|''; pavoTokens?: number; eloteTokens?: number; shameTokens?: number;
   }): void {
     if (!uuid) return;
@@ -184,7 +185,8 @@ export class NameManager {
       kind: (entry.kind || '').toString(),
       text: (entry.text || '').toString(),
       roomId: entry.roomId,
-      variant: entry.variant,
+      variant: entry.variant || entry.gameVariant,
+      gameVariant: entry.gameVariant || entry.variant,
       round: entry.round,
       role: entry.role || '',
       pavoTokens: Number(entry.pavoTokens ?? 0),
@@ -197,7 +199,7 @@ export class NameManager {
 
   getSystemHistory(uuid: string): {
     timestamp: number; kind: string; text: string;
-    roomId?: string; variant?: string; round?: number;
+    roomId?: string; variant?: string; gameVariant?: string; round?: number;
     role?: 'P1'|'P2'|''; pavoTokens?: number; eloteTokens?: number; shameTokens?: number;
   }[] {
     return [...(this.uuidToSystemHistory.get(uuid) || [])];