From 2c59a5cc64d51a73a723b0736bed3ed26719247e Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Fri, 8 May 2026 18:08:29 -0400
Subject: [PATCH 01/13] rebuild moderation as a /moderation route with
 activity, lookup, moderators, and server-owner tabs

Replaces the floating admin panel with a real route. Tabs gate by permission:
activity feed with stats, smart lookup that detects steam id / objectid,
moderator directory with per-mod drilldown and reverse window, and a new
server-owner self-invalidate surface for /so_moderate. Adds cross-page bulk
selection with named saved selections, and a recap-confirm step for ban,
unban, and reverse actions.
---
 src/App.vue                                   |  11 +-
 src/api/offstylesApi.ts                       |  19 +
 .../Moderation/AdminModerationPanel.vue       | 770 ------------------
 src/components/Moderation/ModerationModal.vue |  46 +-
 .../Moderation/Panel/ActionBadge.vue          |  37 +
 .../Moderation/Panel/ActivityTab.vue          | 261 ++++++
 .../Moderation/Panel/BulkSelectionTray.vue    | 278 +++++++
 .../Moderation/Panel/ConfirmActionDialog.vue  |  79 ++
 src/components/Moderation/Panel/LookupTab.vue | 276 +++++++
 .../Moderation/Panel/ModeratorsTab.vue        | 318 ++++++++
 .../Moderation/Panel/ServerOwnerTab.vue       | 160 ++++
 src/composables/useBulkSelection.ts           | 156 ++++
 src/router/index.ts                           |   5 +
 src/stores/moderation.ts                      |  33 +-
 src/views/ModerationView.vue                  | 161 ++++
 15 files changed, 1829 insertions(+), 781 deletions(-)
 delete mode 100644 src/components/Moderation/AdminModerationPanel.vue
 create mode 100644 src/components/Moderation/Panel/ActionBadge.vue
 create mode 100644 src/components/Moderation/Panel/ActivityTab.vue
 create mode 100644 src/components/Moderation/Panel/BulkSelectionTray.vue
 create mode 100644 src/components/Moderation/Panel/ConfirmActionDialog.vue
 create mode 100644 src/components/Moderation/Panel/LookupTab.vue
 create mode 100644 src/components/Moderation/Panel/ModeratorsTab.vue
 create mode 100644 src/components/Moderation/Panel/ServerOwnerTab.vue
 create mode 100644 src/composables/useBulkSelection.ts
 create mode 100644 src/views/ModerationView.vue

diff --git a/src/App.vue b/src/App.vue
index d548555..1b02572 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,13 +2,14 @@
 import { RouterLink, RouterView } from 'vue-router'
 import { onMounted } from 'vue'
 import AuthButton from '@/components/AuthButton.vue'
-import AdminModerationPanel from '@/components/Moderation/AdminModerationPanel.vue'
 import IconDiscord from '@/components/icons/IconDiscord.vue'
 import IconYoutube from '@/components/icons/IconYoutube.vue'
 import IconGithub from '@/components/icons/IconGithub.vue'
 import { useAuth } from '@/stores/auth'
+import { useModerationStore } from '@/stores/moderation'
 
 const { initAuth } = useAuth()
+const moderationStore = useModerationStore()
 
 onMounted(async () => {
   await initAuth()
@@ -31,6 +32,11 @@ onMounted(async () => {
             <router-link class="hover:text-gray-100 text-nowrap" to="/maps">Map Leaderboards</router-link>
             <router-link class="hover:text-gray-100 text-nowrap" to="/players">Player Lookup</router-link>
             <router-link class="hover:text-gray-100 text-nowrap" to="/servers">Servers</router-link>
+            <router-link
+              v-if="moderationStore.canAccessModerationPanel.value"
+              class="hover:text-gray-100 text-nowrap text-purple-300 hover:text-purple-200"
+              to="/moderation"
+            >Moderation</router-link>
           </nav>
           <AuthButton />
         </div>
@@ -38,9 +44,6 @@ onMounted(async () => {
     </header>
     <RouterView class="mb-auto" />
 
-    <!-- Admin Moderation Panel -->
-    <AdminModerationPanel />
-
     <!-- Footer -->
     <footer class="pt-8">
       <div class="flex flex-col items-center justify-center text-center">
diff --git a/src/api/offstylesApi.ts b/src/api/offstylesApi.ts
index ebd8954..0466a06 100644
--- a/src/api/offstylesApi.ts
+++ b/src/api/offstylesApi.ts
@@ -239,6 +239,25 @@ class OffstylesApi extends Api {
     if (!response.ok) await throwApiError(response);
   }
 
+  // Server-owner self-invalidation (always invalidates; backend verifies the
+  // caller owns the server each record was set on).
+  static async serverOwnerInvalidate(recordIds: string[], reason: string): Promise<void> {
+    const params = new URLSearchParams({
+      ids: recordIds.join(","),
+    });
+
+    const response = await fetch(`${this.offstylesApiUrl}/so_moderate?${params.toString()}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "text/plain",
+      },
+      body: reason,
+      credentials: "include",
+    });
+
+    if (!response.ok) await throwApiError(response);
+  }
+
   // Get user profile data
   static async getUserProfile(steamId: string): Promise<User> {
     const params = new URLSearchParams({
diff --git a/src/components/Moderation/AdminModerationPanel.vue b/src/components/Moderation/AdminModerationPanel.vue
deleted file mode 100644
index 52c84be..0000000
--- a/src/components/Moderation/AdminModerationPanel.vue
+++ /dev/null
@@ -1,770 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { Ref } from 'vue'
-import { useModerationStore } from '@/stores/moderation'
-import { ModerationTargetFilter, type RecentModAction } from '@/types/moderation'
-
-const moderationStore = useModerationStore()
-
-const showPanel: Ref<boolean> = ref(false)
-const showReversalForm: Ref<boolean> = ref(false)
-
-// Reversal form state
-const moderatorSteamId: Ref<string> = ref('')
-const timeframeHours: Ref<number> = ref(24)
-const reversalReason: Ref<string> = ref('')
-const isProcessingReversal: Ref<boolean> = ref(false)
-const reversalResult: Ref<string> = ref('')
-
-// Moderation logs state
-const logId: Ref<string> = ref('')
-const moderationLogs: Ref<any> = ref(null)
-const isLoadingLogs: Ref<boolean> = ref(false)
-
-// Recent general moderation logs state
-const recentLogs: Ref<RecentModAction[]> = ref([])
-const isLoadingRecentLogs: Ref<boolean> = ref(false)
-const selectedFilter: Ref<ModerationTargetFilter | undefined> = ref(undefined)
-const showRecentLogs: Ref<boolean> = ref(false)
-
-// Modal state for focused view
-const showRecentLogsModal: Ref<boolean> = ref(false)
-const showSpecificLogModal: Ref<boolean> = ref(false)
-const selectedLogForModal: Ref<any> = ref(null)
-
-// Modal state for specific logs (record/player logs)
-const showSpecificLogsModal: Ref<boolean> = ref(false)
-const showSpecificLogDetailModal: Ref<boolean> = ref(false)
-const selectedSpecificLogForModal: Ref<any> = ref(null)
-
-const canAccessPanel = computed(() => {
-  return moderationStore.canUndoModerationActions.value
-})
-
-const togglePanel = () => {
-  showPanel.value = !showPanel.value
-  // Reset forms when closing
-  if (!showPanel.value) {
-    resetForms()
-  }
-}
-
-const resetForms = () => {
-  showReversalForm.value = false
-  moderatorSteamId.value = ''
-  timeframeHours.value = 24
-  reversalReason.value = ''
-  reversalResult.value = ''
-  logId.value = ''
-  moderationLogs.value = null
-  showRecentLogs.value = false
-  recentLogs.value = []
-  selectedFilter.value = undefined
-}
-
-const showReversalFormToggle = () => {
-  showReversalForm.value = !showReversalForm.value
-  if (!showReversalForm.value) {
-    moderatorSteamId.value = ''
-    timeframeHours.value = 24
-    reversalReason.value = ''
-    reversalResult.value = ''
-  }
-}
-
-const toggleRecentLogs = () => {
-  showRecentLogs.value = !showRecentLogs.value
-  if (showRecentLogs.value) {
-    loadRecentModerationLogs()
-  }
-}
-
-const loadRecentModerationLogs = async () => {
-  isLoadingRecentLogs.value = true
-  try {
-    const logs = await moderationStore.getRecentModerationLogs(selectedFilter.value)
-    // Sort by timestamp descending (most recent first)
-    recentLogs.value = logs.sort((a: any, b: any) => b.timestamp - a.timestamp)
-  } catch (error) {
-    console.error('Failed to load recent moderation logs:', error)
-    recentLogs.value = []
-  } finally {
-    isLoadingRecentLogs.value = false
-  }
-}
-
-const onFilterChange = () => {
-  if (showRecentLogs.value) {
-    loadRecentModerationLogs()
-  }
-}
-
-// Modal functions
-const openRecentLogsModal = () => {
-  showRecentLogsModal.value = true
-  if (recentLogs.value.length === 0) {
-    loadRecentModerationLogs()
-  }
-}
-
-const closeRecentLogsModal = () => {
-  showRecentLogsModal.value = false
-}
-
-const openSpecificLogModal = (log: any) => {
-  selectedLogForModal.value = log
-  showSpecificLogModal.value = true
-}
-
-const closeSpecificLogModal = () => {
-  showSpecificLogModal.value = false
-  selectedLogForModal.value = null
-}
-
-// Modal functions for specific logs (record/player logs)
-const openSpecificLogsModal = () => {
-  showSpecificLogsModal.value = true
-}
-
-const closeSpecificLogsModal = () => {
-  showSpecificLogsModal.value = false
-}
-
-const openSpecificLogDetailModal = (log: any) => {
-  selectedSpecificLogForModal.value = log
-  showSpecificLogDetailModal.value = true
-}
-
-const closeSpecificLogDetailModal = () => {
-  showSpecificLogDetailModal.value = false
-  selectedSpecificLogForModal.value = null
-}
-
-const canSubmitReversal = computed(() => {
-  return moderatorSteamId.value.trim() && 
-         timeframeHours.value > 0 && 
-         reversalReason.value.trim() && 
-         !isProcessingReversal.value
-})
-
-const submitReversal = async () => {
-  if (!canSubmitReversal.value) return
-
-  isProcessingReversal.value = true
-  reversalResult.value = ''
-
-  try {
-    const result = await moderationStore.reverseModerationActions(
-      moderatorSteamId.value.trim(),
-      timeframeHours.value,
-      reversalReason.value.trim()
-    )
-    reversalResult.value = result
-  } catch (error) {
-    console.error('Failed to reverse moderation actions:', error)
-    reversalResult.value = `Error: ${error instanceof Error ? error.message : 'Unknown error'}`
-  } finally {
-    isProcessingReversal.value = false
-  }
-}
-
-const loadModerationLogs = async () => {
-  if (!logId.value.trim()) return
-
-  isLoadingLogs.value = true
-  moderationLogs.value = null
-
-  try {
-    const logs = await moderationStore.getModerationLogs(logId.value.trim())
-    // Sort actions by timestamp descending (most recent first)
-    if (logs && logs.actions) {
-      logs.actions = logs.actions.sort((a: any, b: any) => b.timestamp - a.timestamp)
-    }
-    moderationLogs.value = logs
-  } catch (error) {
-    console.error('Failed to load moderation logs:', error)
-    moderationLogs.value = { error: error instanceof Error ? error.message : 'Unknown error' }
-  } finally {
-    isLoadingLogs.value = false
-  }
-}
-
-const formatTimestamp = (timestamp: number) => {
-  return new Date(timestamp).toLocaleString()
-}
-
-const getActionColor = (action: string) => {
-  switch (action.toLowerCase()) {
-    case 'ban':
-    case 'invalidate':
-      return 'text-red-400 bg-red-900/20'
-    case 'unban':
-    case 'revalidate':
-      return 'text-green-400 bg-green-900/20'
-    case 'note':
-      return 'text-blue-400 bg-blue-900/20'
-    case 'reverse':
-      return 'text-purple-400 bg-purple-900/20'
-    default:
-      return 'text-gray-400 bg-gray-900/20'
-  }
-}
-</script>
-
-<template>
-  <div v-if="canAccessPanel" class="fixed top-4 right-4 z-50">
-    <!-- Toggle Button -->
-    <button
-      @click="togglePanel"
-      class="bg-main-700 hover:bg-main-600 border border-main-500 text-gray-200 px-4 py-2 rounded-lg shadow-lg transition-colors cursor-pointer"
-    >
-      {{ showPanel ? 'Close' : 'Admin Panel' }}
-    </button>
-
-    <!-- Admin Panel -->
-    <div 
-      v-if="showPanel"
-      class="absolute top-12 right-0 w-[500px] bg-main-800 border border-main-400 rounded-lg shadow-xl max-h-[80vh] overflow-y-auto"
-    >
-      <div class="p-4 border-b border-main-400">
-        <h3 class="text-lg font-medium text-gray-200">Admin Moderation Panel</h3>
-      </div>
-
-      <div class="p-4 space-y-4">
-        <!-- Reverse Moderation Actions Section -->
-        <div class="space-y-2">
-          <button
-            @click="showReversalFormToggle"
-            class="w-full text-left px-3 py-2 bg-main-700 hover:bg-main-600 rounded border border-main-500 text-gray-200 transition-colors cursor-pointer"
-          >
-            {{ showReversalForm ? '▼' : '▶' }} Reverse Moderation Actions
-          </button>
-
-          <div v-if="showReversalForm" class="space-y-3 pl-4">
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-1">
-                Moderator Steam ID
-              </label>
-              <input
-                v-model="moderatorSteamId"
-                type="text"
-                class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200"
-                placeholder="76561198000000000"
-              />
-            </div>
-
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-1">
-                Timeframe (hours)
-              </label>
-              <input
-                v-model.number="timeframeHours"
-                type="number"
-                min="1"
-                class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200"
-              />
-            </div>
-
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-1">
-                Reason
-              </label>
-              <textarea
-                v-model="reversalReason"
-                rows="2"
-                class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200"
-                placeholder="Reason for reversal..."
-              ></textarea>
-            </div>
-
-            <button
-              @click="submitReversal"
-              :disabled="!canSubmitReversal"
-              class="w-full px-3 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white rounded transition-colors cursor-pointer"
-            >
-              {{ isProcessingReversal ? 'Processing...' : 'Reverse Actions' }}
-            </button>
-
-            <div v-if="reversalResult" class="text-sm p-2 rounded" :class="reversalResult.startsWith('Error') ? 'bg-red-900/20 text-red-400' : 'bg-green-900/20 text-green-400'">
-              {{ reversalResult }}
-            </div>
-          </div>
-        </div>
-
-        <!-- Moderation Logs Section -->
-        <div class="space-y-2">
-          <h4 class="text-sm font-medium text-gray-300">View Moderation Logs</h4>
-          <div class="flex gap-2">
-            <input
-              v-model="logId"
-              type="text"
-              class="flex-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200"
-              placeholder="Moderation ID (invalid_ref or ban_ref)"
-            />
-            <button
-              @click="loadModerationLogs"
-              :disabled="!logId.trim() || isLoadingLogs"
-              class="px-3 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded transition-colors cursor-pointer"
-            >
-              {{ isLoadingLogs ? '...' : 'Load' }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Moderation Logs Display -->
-        <div v-if="moderationLogs" class="space-y-2">
-          <div v-if="moderationLogs.error" class="text-red-400 text-sm">
-            Error: {{ moderationLogs.error }}
-          </div>
-          <div v-else class="bg-main-900 rounded p-3 text-sm">
-            <div class="flex justify-between items-center mb-2">
-              <h5 class="text-gray-300 font-medium">Moderation History</h5>
-              <button
-                @click="openSpecificLogsModal"
-                class="px-2 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-xs transition-colors cursor-pointer"
-              >
-                Full View
-              </button>
-            </div>
-            <div class="space-y-2 max-h-40 overflow-y-auto">
-              <div 
-                v-for="(action, index) in moderationLogs.actions" 
-                :key="index"
-                @click="openSpecificLogDetailModal(action)"
-                class="border-l-2 border-main-400 pl-2 py-1 cursor-pointer hover:bg-main-700/50 rounded-r transition-colors"
-              >
-                <div class="flex justify-between items-start">
-                  <span class="font-medium text-gray-200">{{ action.action }}</span>
-                  <span class="text-xs text-gray-400">{{ formatTimestamp(action.timestamp) }}</span>
-                </div>
-                <div class="text-xs text-gray-300">by {{ action.mod.username }}</div>
-                <div v-if="action.notes" class="text-xs text-gray-400 mt-1">{{ action.notes }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Recent General Moderation Logs Section -->
-        <div class="space-y-2">
-          <button
-            @click="toggleRecentLogs"
-            class="w-full text-left px-3 py-2 bg-main-700 hover:bg-main-600 rounded border border-main-500 text-gray-200 transition-colors cursor-pointer"
-          >
-            {{ showRecentLogs ? '▼' : '▶' }} Recent General Moderation Logs
-          </button>
-
-          <div v-if="showRecentLogs" class="space-y-3 pl-4">
-            <!-- Filter Selection -->
-            <div>
-              <label class="block text-sm font-medium text-gray-300 mb-1">
-                Filter by Target Type
-              </label>
-              <select
-                v-model="selectedFilter"
-                @change="onFilterChange"
-                class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200"
-              >
-                <option :value="undefined">All Actions</option>
-                <option :value="ModerationTargetFilter.Player">Player Actions Only</option>
-                <option :value="ModerationTargetFilter.Record">Record Actions Only</option>
-              </select>
-            </div>
-
-            <!-- Recent Logs Display -->
-            <div class="bg-main-900 rounded p-3 text-sm">
-              <div class="flex justify-between items-center mb-2">
-                <h5 class="text-gray-300 font-medium">Recent Actions</h5>
-                <div class="flex gap-2">
-                  <button
-                    @click="openRecentLogsModal"
-                    class="px-2 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-xs transition-colors cursor-pointer"
-                  >
-                    Full View
-                  </button>
-                  <button
-                    @click="loadRecentModerationLogs"
-                    :disabled="isLoadingRecentLogs"
-                    class="px-2 py-1 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded text-xs transition-colors cursor-pointer"
-                  >
-                    {{ isLoadingRecentLogs ? '...' : 'Refresh' }}
-                  </button>
-                </div>
-              </div>
-              
-              <div v-if="isLoadingRecentLogs" class="text-center py-4 text-gray-400">
-                Loading recent logs...
-              </div>
-              
-              <div v-else-if="recentLogs.length === 0" class="text-center py-4 text-gray-400">
-                No recent moderation actions found
-              </div>
-              
-              <div v-else class="space-y-2 max-h-60 overflow-y-auto">
-                <div 
-                  v-for="(action, index) in recentLogs" 
-                  :key="index"
-                  @click="openSpecificLogModal(action)"
-                  class="border-l-4 border-main-400 pl-4 py-3 bg-main-700/50 rounded-r cursor-pointer hover:bg-main-700/70 transition-colors"
-                >
-                  <!-- Action Header -->
-                  <div class="flex justify-between items-start mb-2">
-                    <div class="flex items-center gap-2">
-                      <span 
-                        class="px-2 py-1 rounded text-xs font-medium"
-                        :class="getActionColor(action.action)"
-                      >
-                        {{ action.action }}
-                      </span>
-                      <span class="text-xs px-1 py-0.5 rounded" :class="action.target_type === 'Player' ? 'bg-blue-900 text-blue-300' : 'bg-green-900 text-green-300'">
-                        {{ action.target_type }}
-                      </span>
-                    </div>
-                    <span class="text-xs text-gray-400">{{ formatTimestamp(action.timestamp) }}</span>
-                  </div>
-
-                  <!-- Target and Moderator Info -->
-                  <div class="text-sm text-gray-300 mb-2">
-                    Target: <span class="font-medium">{{ action.target_name }}</span>
-                  </div>
-                  
-                  <!-- Moderator Info with Avatar -->
-                  <div class="flex items-center gap-2 mb-2">
-                    <img 
-                      v-if="action.moderator_avatar_url"
-                      :src="action.moderator_avatar_url" 
-                      :alt="action.moderator_name"
-                      class="w-6 h-6 rounded-full"
-                    />
-                    <div class="text-sm text-gray-300">
-                      by <span class="font-medium">{{ action.moderator_name }}</span>
-                    </div>
-                  </div>
-
-                  <!-- Moderator Steam ID -->
-                  <div class="text-xs text-gray-400 mb-2">
-                    Steam ID: {{ action.moderator_steam_id }}
-                  </div>
-
-                  <!-- Notes -->
-                  <div v-if="action.notes" class="text-sm text-gray-200 bg-main-800 p-2 rounded">
-                    {{ action.notes }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Recent Logs Full View Modal -->
-  <div 
-    v-if="showRecentLogsModal"
-    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[60]"
-    @click.self="closeRecentLogsModal"
-  >
-    <div class="bg-main-800 border border-main-400 rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-hidden flex flex-col">
-      <!-- Header -->
-      <div class="p-4 border-b border-main-400 flex justify-between items-center">
-        <h3 class="text-lg font-medium text-gray-200">Recent Moderation Logs - Full View</h3>
-        <button
-          @click="closeRecentLogsModal"
-          class="text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
-        >
-          ✕
-        </button>
-      </div>
-
-      <!-- Filter Controls -->
-      <div class="p-4 border-b border-main-400">
-        <div class="flex gap-4 items-center">
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-1">
-              Filter by Target Type
-            </label>
-            <select
-              v-model="selectedFilter"
-              @change="onFilterChange"
-              class="px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200"
-            >
-              <option :value="undefined">All Actions</option>
-              <option :value="ModerationTargetFilter.Player">Player Actions Only</option>
-              <option :value="ModerationTargetFilter.Record">Record Actions Only</option>
-            </select>
-          </div>
-          <button
-            @click="loadRecentModerationLogs"
-            :disabled="isLoadingRecentLogs"
-            class="px-3 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded transition-colors cursor-pointer"
-          >
-            {{ isLoadingRecentLogs ? 'Loading...' : 'Refresh' }}
-          </button>
-        </div>
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 overflow-y-auto p-4">
-        <div v-if="isLoadingRecentLogs" class="text-center py-8 text-gray-400">
-          Loading recent logs...
-        </div>
-        
-        <div v-else-if="recentLogs.length === 0" class="text-center py-8 text-gray-400">
-          No recent moderation actions found
-        </div>
-        
-        <div v-else class="space-y-4">
-          <div 
-            v-for="(action, index) in recentLogs" 
-            :key="index"
-            @click="openSpecificLogModal(action)"
-            class="border border-main-500 rounded-lg p-4 bg-main-700/30 hover:bg-main-700/50 transition-colors cursor-pointer"
-          >
-            <!-- Action Header -->
-            <div class="flex justify-between items-start mb-3">
-              <div class="flex items-center gap-3">
-                <span 
-                  class="px-3 py-1 rounded text-sm font-medium"
-                  :class="getActionColor(action.action)"
-                >
-                  {{ action.action }}
-                </span>
-                <span class="text-sm px-2 py-1 rounded" :class="action.target_type === 'Player' ? 'bg-blue-900 text-blue-300' : 'bg-green-900 text-green-300'">
-                  {{ action.target_type }}
-                </span>
-              </div>
-              <span class="text-sm text-gray-400">{{ formatTimestamp(action.timestamp) }}</span>
-            </div>
-
-            <!-- Target and Moderator Info -->
-            <div class="text-sm text-gray-300 mb-2">
-              Target: <span class="font-medium">{{ action.target_name }}</span>
-            </div>
-            
-            <!-- Moderator Info with Avatar -->
-            <div class="flex items-center gap-2 mb-2">
-              <img 
-                v-if="action.moderator_avatar_url"
-                :src="action.moderator_avatar_url" 
-                :alt="action.moderator_name"
-                class="w-8 h-8 rounded-full"
-              />
-              <div class="text-sm text-gray-300">
-                by <span class="font-medium">{{ action.moderator_name }}</span>
-              </div>
-            </div>
-
-            <!-- Moderator Steam ID -->
-            <div class="text-xs text-gray-400 mb-2">
-              Steam ID: {{ action.moderator_steam_id }}
-            </div>
-
-            <!-- Notes -->
-            <div v-if="action.notes" class="text-sm text-gray-200 bg-main-800 p-3 rounded">
-              {{ action.notes }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Specific Log Detail Modal -->
-  <div 
-    v-if="showSpecificLogModal && selectedLogForModal"
-    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[70]"
-    @click.self="closeSpecificLogModal"
-  >
-    <div class="bg-main-800 border border-main-400 rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[80vh] overflow-hidden flex flex-col">
-      <!-- Header -->
-      <div class="p-4 border-b border-main-400 flex justify-between items-center">
-        <h3 class="text-lg font-medium text-gray-200">Moderation Action Details</h3>
-        <button
-          @click="closeSpecificLogModal"
-          class="text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
-        >
-          ✕
-        </button>
-      </div>
-
-      <!-- Content -->
-      <div class="p-6 space-y-6">
-        <!-- Action Info -->
-        <div class="space-y-4">
-          <div class="flex items-center gap-3">
-            <span 
-              class="px-4 py-2 rounded text-lg font-medium"
-              :class="getActionColor(selectedLogForModal.action)"
-            >
-              {{ selectedLogForModal.action }}
-            </span>
-            <span class="text-lg px-3 py-1 rounded" :class="selectedLogForModal.target_type === 'Player' ? 'bg-blue-900 text-blue-300' : 'bg-green-900 text-green-300'">
-              {{ selectedLogForModal.target_type }}
-            </span>
-          </div>
-
-          <div class="text-lg text-gray-300">
-            <span class="text-gray-400">Timestamp:</span> {{ formatTimestamp(selectedLogForModal.timestamp) }}
-          </div>
-        </div>
-
-        <!-- Target Details -->
-        <div class="bg-main-700/50 rounded-lg p-4">
-          <h4 class="text-lg font-medium text-gray-200 mb-2">Target</h4>
-          <div class="space-y-2">
-            <div class="text-gray-300">
-              <span class="text-gray-400">Name:</span> <span class="font-medium">{{ selectedLogForModal.target_name }}</span>
-            </div>
-            <div class="text-gray-300">
-              <span class="text-gray-400">ID:</span> <span class="font-mono text-sm">{{ selectedLogForModal.target_id }}</span>
-            </div>
-            <div class="text-gray-300">
-              <span class="text-gray-400">Type:</span> {{ selectedLogForModal.target_type }}
-            </div>
-          </div>
-        </div>
-
-        <!-- Moderator Details -->
-        <div class="bg-main-700/50 rounded-lg p-4">
-          <h4 class="text-lg font-medium text-gray-200 mb-3">Moderator</h4>
-          <div class="flex items-start gap-4">
-            <img 
-              v-if="selectedLogForModal.moderator_avatar_url"
-              :src="selectedLogForModal.moderator_avatar_url" 
-              :alt="selectedLogForModal.moderator_name"
-              class="w-12 h-12 rounded-full"
-            />
-            <div class="space-y-2">
-              <div class="text-gray-300">
-                <span class="text-gray-400">Name:</span> <span class="font-medium">{{ selectedLogForModal.moderator_name }}</span>
-              </div>
-              <div class="text-gray-300">
-                <span class="text-gray-400">Steam ID:</span> <span class="font-mono text-sm">{{ selectedLogForModal.moderator_steam_id }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Notes/Reason -->
-        <div v-if="selectedLogForModal.notes" class="bg-main-700/50 rounded-lg p-4">
-          <h4 class="text-lg font-medium text-gray-200 mb-2">Reason/Notes</h4>
-          <div class="text-gray-300 whitespace-pre-wrap">{{ selectedLogForModal.notes }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Specific Logs Full View Modal (Record/Player Logs) -->
-  <div 
-    v-if="showSpecificLogsModal && moderationLogs && !moderationLogs.error"
-    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[60]"
-    @click.self="closeSpecificLogsModal"
-  >
-    <div class="bg-main-800 border border-main-400 rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-hidden flex flex-col">
-      <!-- Header -->
-      <div class="p-4 border-b border-main-400 flex justify-between items-center">
-        <h3 class="text-lg font-medium text-gray-200">Moderation History - Full View</h3>
-        <button
-          @click="closeSpecificLogsModal"
-          class="text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
-        >
-          ✕
-        </button>
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 overflow-y-auto p-4">
-        <div v-if="moderationLogs.actions.length === 0" class="text-center py-8 text-gray-400">
-          No moderation actions found
-        </div>
-        
-        <div v-else class="space-y-4">
-          <div 
-            v-for="(action, index) in moderationLogs.actions" 
-            :key="index"
-            @click="openSpecificLogDetailModal(action)"
-            class="border border-main-500 rounded-lg p-4 bg-main-700/30 hover:bg-main-700/50 transition-colors cursor-pointer"
-          >
-            <!-- Action Header -->
-            <div class="flex justify-between items-start mb-3">
-              <div class="flex items-center gap-3">
-                <span 
-                  class="px-3 py-1 rounded text-sm font-medium"
-                  :class="getActionColor(action.action)"
-                >
-                  {{ action.action }}
-                </span>
-              </div>
-              <span class="text-sm text-gray-400">{{ formatTimestamp(action.timestamp) }}</span>
-            </div>
-
-            <!-- Moderator Info -->
-            <div class="text-sm text-gray-300 mb-2">
-              by <span class="font-medium">{{ action.mod.username }}</span>
-            </div>
-
-            <!-- Notes -->
-            <div v-if="action.notes" class="text-sm text-gray-200 bg-main-800 p-3 rounded">
-              {{ action.notes }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Specific Log Detail Modal (Record/Player Logs) -->
-  <div 
-    v-if="showSpecificLogDetailModal && selectedSpecificLogForModal"
-    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[70]"
-    @click.self="closeSpecificLogDetailModal"
-  >
-    <div class="bg-main-800 border border-main-400 rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[80vh] overflow-hidden flex flex-col">
-      <!-- Header -->
-      <div class="p-4 border-b border-main-400 flex justify-between items-center">
-        <h3 class="text-lg font-medium text-gray-200">Moderation Action Details</h3>
-        <button
-          @click="closeSpecificLogDetailModal"
-          class="text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
-        >
-          ✕
-        </button>
-      </div>
-
-      <!-- Content -->
-      <div class="p-6 space-y-6">
-        <!-- Action Info -->
-        <div class="space-y-4">
-          <div class="flex items-center gap-3">
-            <span 
-              class="px-4 py-2 rounded text-lg font-medium"
-              :class="getActionColor(selectedSpecificLogForModal.action)"
-            >
-              {{ selectedSpecificLogForModal.action }}
-            </span>
-          </div>
-
-          <div class="text-lg text-gray-300">
-            <span class="text-gray-400">Timestamp:</span> {{ formatTimestamp(selectedSpecificLogForModal.timestamp) }}
-          </div>
-        </div>
-
-        <!-- Moderator Details -->
-        <div class="bg-main-700/50 rounded-lg p-4">
-          <h4 class="text-lg font-medium text-gray-200 mb-3">Moderator</h4>
-          <div class="space-y-2">
-            <div class="text-gray-300">
-              <span class="text-gray-400">Name:</span> <span class="font-medium">{{ selectedSpecificLogForModal.mod.username }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Notes/Reason -->
-        <div v-if="selectedSpecificLogForModal.notes" class="bg-main-700/50 rounded-lg p-4">
-          <h4 class="text-lg font-medium text-gray-200 mb-2">Reason/Notes</h4>
-          <div class="text-gray-300 whitespace-pre-wrap">{{ selectedSpecificLogForModal.notes }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/Moderation/ModerationModal.vue b/src/components/Moderation/ModerationModal.vue
index 5743a6d..a0d6c44 100644
--- a/src/components/Moderation/ModerationModal.vue
+++ b/src/components/Moderation/ModerationModal.vue
@@ -4,6 +4,8 @@ import type { Ref } from 'vue'
 import { ModerationActionType } from '@/types/moderation'
 import { useModerationStore, type ModerationTarget } from '@/stores/moderation'
 import ModerationLogsModal from './ModerationLogsModal.vue'
+import ConfirmActionDialog from './Panel/ConfirmActionDialog.vue'
+import type { ConfirmRow } from './Panel/ConfirmActionDialog.vue'
 import IconCheck from '@/components/icons/IconCheck.vue'
 
 const emit = defineEmits(['moderationComplete', 'close'])
@@ -21,6 +23,19 @@ const isSubmitting: Ref<boolean> = ref(false)
 const showSuccess: Ref<boolean> = ref(false)
 const showLogsModal: Ref<boolean> = ref(false)
 const errorMessage: Ref<string> = ref('')
+const showConfirm: Ref<boolean> = ref(false)
+
+const requiresConfirm = computed(() => {
+  return selectedAction.value === ModerationActionType.Ban
+      || selectedAction.value === ModerationActionType.Unban
+})
+
+const confirmRows = computed<ConfirmRow[]>(() => [
+  { label: 'Action', value: selectedAction.value ?? '' },
+  { label: 'Target', value: props.target.name },
+  { label: 'Type', value: props.target.type === 'player' ? 'Player' : 'Record' },
+  { label: 'ID', value: props.target.id },
+])
 
 const availableActions = computed(() => {
   return moderationStore.getAvailableActions(props.target)
@@ -73,33 +88,39 @@ const resetForm = () => {
   reason.value = ''
   errorMessage.value = ''
   showSuccess.value = false
+  showConfirm.value = false
 }
 
 const selectAction = (action: ModerationActionType) => {
   selectedAction.value = action
 }
 
-const handleSubmit = async () => {
+const handleSubmit = () => {
   if (!canSubmit.value || !selectedAction.value) return
+  errorMessage.value = ''
+  if (requiresConfirm.value) {
+    showConfirm.value = true
+    return
+  }
+  performAction()
+}
 
+const performAction = async () => {
+  if (!selectedAction.value) return
   isSubmitting.value = true
   errorMessage.value = ''
-
   try {
     await moderationStore.performModerationAction(
       selectedAction.value,
       reason.value,
       props.target
     )
-
+    showConfirm.value = false
     showSuccess.value = true
-
-    // Auto close after success
     setTimeout(() => {
       emit('moderationComplete')
       emit('close')
     }, 1500)
-
   } catch (error) {
     console.error('Moderation action failed:', error)
     errorMessage.value = error instanceof Error ? error.message : 'Unknown error occurred'
@@ -263,4 +284,17 @@ const getActionColor = (action: ModerationActionType) => {
     :show="showLogsModal"
     @close="closeLogsModal"
   />
+
+  <!-- Confirmation step for Ban/Unban -->
+  <ConfirmActionDialog
+    :show="showConfirm"
+    :title="`${selectedAction} ${target.type === 'player' ? 'player' : 'record'}?`"
+    intent="danger"
+    :rows="confirmRows"
+    :reason="reason"
+    :confirm-label="`Yes, ${selectedAction?.toLowerCase()}`"
+    :is-processing="isSubmitting"
+    @confirm="performAction"
+    @cancel="showConfirm = false"
+  />
 </template>
diff --git a/src/components/Moderation/Panel/ActionBadge.vue b/src/components/Moderation/Panel/ActionBadge.vue
new file mode 100644
index 0000000..5b01c8e
--- /dev/null
+++ b/src/components/Moderation/Panel/ActionBadge.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  action: string
+  size?: 'sm' | 'md'
+}>()
+
+const colorClass = computed(() => {
+  switch (props.action.toLowerCase()) {
+    case 'ban':
+    case 'invalidate':
+      return 'text-red-300 bg-red-900/30 border border-red-800/40'
+    case 'unban':
+    case 'revalidate':
+      return 'text-green-300 bg-green-900/30 border border-green-800/40'
+    case 'note':
+      return 'text-blue-300 bg-blue-900/30 border border-blue-800/40'
+    case 'reverse':
+      return 'text-purple-300 bg-purple-900/30 border border-purple-800/40'
+    default:
+      return 'text-gray-300 bg-gray-900/30 border border-gray-800/40'
+  }
+})
+
+const sizeClass = computed(() => {
+  return props.size === 'sm'
+    ? 'px-1.5 py-0.5 text-[10px] tracking-wide font-semibold uppercase'
+    : 'px-2 py-0.5 text-xs tracking-wide font-semibold uppercase'
+})
+</script>
+
+<template>
+  <span :class="['rounded inline-flex items-center', sizeClass, colorClass]">
+    {{ action }}
+  </span>
+</template>
diff --git a/src/components/Moderation/Panel/ActivityTab.vue b/src/components/Moderation/Panel/ActivityTab.vue
new file mode 100644
index 0000000..652491c
--- /dev/null
+++ b/src/components/Moderation/Panel/ActivityTab.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useModerationStore } from '@/stores/moderation'
+import { ModerationTargetFilter, ModerationActionType, type RecentModAction } from '@/types/moderation'
+import ActionBadge from './ActionBadge.vue'
+import RelativeDate from '@/components/RelativeDate.vue'
+
+type Filter = ModerationTargetFilter | 'All'
+
+const emit = defineEmits<{
+  inspectMod: [steamId: string]
+  inspectTarget: [action: RecentModAction]
+}>()
+
+const moderationStore = useModerationStore()
+
+const filter: Ref<Filter> = ref('All')
+const logs: Ref<RecentModAction[]> = ref([])
+const isLoading: Ref<boolean> = ref(false)
+const lastLoaded: Ref<number | null> = ref(null)
+const expandedKeys: Ref<Set<string>> = ref(new Set())
+
+const filterToParam = (f: Filter): ModerationTargetFilter | undefined => {
+  return f === 'All' ? undefined : f
+}
+
+const load = async () => {
+  isLoading.value = true
+  try {
+    const data = await moderationStore.getRecentModerationLogs(filterToParam(filter.value))
+    logs.value = data.sort((a, b) => b.timestamp - a.timestamp)
+    lastLoaded.value = Date.now()
+  } catch (e) {
+    console.error('Failed to load recent moderation logs:', e)
+    logs.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+watch(filter, load)
+
+const onVisibility = () => {
+  if (document.visibilityState === 'visible') {
+    const stale = !lastLoaded.value || Date.now() - lastLoaded.value > 30_000
+    if (stale) load()
+  }
+}
+
+onMounted(() => {
+  load()
+  document.addEventListener('visibilitychange', onVisibility)
+  window.addEventListener('focus', onVisibility)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('visibilitychange', onVisibility)
+  window.removeEventListener('focus', onVisibility)
+})
+
+const stats = computed(() => {
+  const since24h = Date.now() - 24 * 3600_000
+  const recent = logs.value.filter(l => l.timestamp >= since24h)
+  const mods = new Set(logs.value.map(l => l.moderator_steam_id))
+  const counts = { ban: 0, invalidate: 0, unban: 0, revalidate: 0, note: 0 }
+  for (const l of logs.value) {
+    const k = l.action.toLowerCase() as keyof typeof counts
+    if (k in counts) counts[k]++
+  }
+  return {
+    total: logs.value.length,
+    in24h: recent.length,
+    activeMods: mods.size,
+    counts,
+  }
+})
+
+const keyOf = (a: RecentModAction) => `${a.timestamp}:${a.target_id}:${a.action}`
+
+const toggleExpand = (a: RecentModAction) => {
+  const k = keyOf(a)
+  if (expandedKeys.value.has(k)) expandedKeys.value.delete(k)
+  else expandedKeys.value.add(k)
+}
+
+const isDestructive = (action: ModerationActionType | string) => {
+  const a = action.toString().toLowerCase()
+  return a === 'ban' || a === 'invalidate'
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Stats header -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
+        <div class="text-xs text-gray-400 uppercase tracking-wide">Recent actions</div>
+        <div class="text-2xl font-semibold text-gray-100 mt-1">{{ stats.total }}</div>
+        <div class="text-xs text-gray-500 mt-0.5">last 20 site-wide</div>
+      </div>
+      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
+        <div class="text-xs text-gray-400 uppercase tracking-wide">In last 24h</div>
+        <div class="text-2xl font-semibold text-gray-100 mt-1">{{ stats.in24h }}</div>
+        <div class="text-xs text-gray-500 mt-0.5">{{ stats.activeMods }} mod{{ stats.activeMods === 1 ? '' : 's' }} active</div>
+      </div>
+      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
+        <div class="text-xs text-gray-400 uppercase tracking-wide">Restrictive</div>
+        <div class="text-2xl font-semibold text-red-300 mt-1">{{ stats.counts.ban + stats.counts.invalidate }}</div>
+        <div class="text-xs text-gray-500 mt-0.5">{{ stats.counts.ban }} ban · {{ stats.counts.invalidate }} invalidate</div>
+      </div>
+      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
+        <div class="text-xs text-gray-400 uppercase tracking-wide">Permissive</div>
+        <div class="text-2xl font-semibold text-green-300 mt-1">{{ stats.counts.unban + stats.counts.revalidate }}</div>
+        <div class="text-xs text-gray-500 mt-0.5">{{ stats.counts.note }} note{{ stats.counts.note === 1 ? '' : 's' }}</div>
+      </div>
+    </div>
+
+    <!-- Filter + refresh -->
+    <div class="flex items-center justify-between gap-3 flex-wrap">
+      <div class="flex gap-1">
+        <button
+          v-for="f in (['All', ModerationTargetFilter.Player, ModerationTargetFilter.Record] as Filter[])"
+          :key="f"
+          @click="filter = f"
+          :class="[
+            'px-3 py-1.5 text-sm rounded-md transition-colors cursor-pointer border',
+            filter === f
+              ? 'bg-main-600 text-white border-main-300'
+              : 'bg-main-800 text-gray-300 border-main-500 hover:border-main-400',
+          ]"
+        >
+          {{ f }}
+        </button>
+      </div>
+      <div class="flex items-center gap-3">
+        <span v-if="lastLoaded" class="text-xs text-gray-500">
+          Updated <RelativeDate :date="lastLoaded" />
+        </span>
+        <button
+          @click="load"
+          :disabled="isLoading"
+          class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+        >
+          {{ isLoading ? 'Loading…' : 'Refresh' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Feed -->
+    <div v-if="isLoading && logs.length === 0" class="text-center py-12 text-gray-500">
+      Loading recent activity…
+    </div>
+    <div v-else-if="logs.length === 0" class="text-center py-12 text-gray-500">
+      No moderation activity in this window.
+    </div>
+    <div v-else class="space-y-2">
+      <div
+        v-for="entry in logs"
+        :key="keyOf(entry)"
+        class="bg-main-800 border border-main-500 rounded-lg overflow-hidden hover:border-main-400 transition-colors"
+      >
+        <button
+          @click="toggleExpand(entry)"
+          class="w-full text-left p-3 flex items-start gap-3 cursor-pointer"
+        >
+          <ActionBadge :action="entry.action" />
+          <span
+            class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded border shrink-0"
+            :class="entry.target_type === 'Player'
+              ? 'text-blue-300 border-blue-800/40 bg-blue-900/20'
+              : 'text-emerald-300 border-emerald-800/40 bg-emerald-900/20'"
+          >
+            {{ entry.target_type }}
+          </span>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm text-gray-200 truncate">
+              <span class="font-medium">{{ entry.target_name }}</span>
+              <span class="text-gray-500"> by </span>
+              <span class="text-gray-300">{{ entry.moderator_name }}</span>
+            </div>
+            <div v-if="entry.notes" class="text-xs text-gray-500 truncate mt-0.5">
+              "{{ entry.notes }}"
+            </div>
+          </div>
+          <div class="text-xs text-gray-500 shrink-0 whitespace-nowrap">
+            <RelativeDate :date="entry.timestamp" />
+          </div>
+        </button>
+
+        <!-- Expanded detail -->
+        <div v-if="expandedKeys.has(keyOf(entry))" class="border-t border-main-500/60 bg-main-900/50 p-4 space-y-3">
+          <div class="grid sm:grid-cols-2 gap-3 text-sm">
+            <div>
+              <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Target</div>
+              <div class="text-gray-200">{{ entry.target_name }}</div>
+              <div class="text-xs text-gray-500 font-mono break-all">{{ entry.target_id }}</div>
+            </div>
+            <div>
+              <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Moderator</div>
+              <div class="flex items-center gap-2">
+                <img
+                  v-if="entry.moderator_avatar_url"
+                  :src="entry.moderator_avatar_url"
+                  class="w-6 h-6 rounded-full"
+                />
+                <span class="text-gray-200">{{ entry.moderator_name }}</span>
+              </div>
+              <div class="text-xs text-gray-500 font-mono break-all">{{ entry.moderator_steam_id }}</div>
+            </div>
+          </div>
+
+          <div v-if="entry.notes">
+            <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Reason</div>
+            <div class="text-sm text-gray-200 whitespace-pre-wrap bg-main-800 border border-main-500 rounded p-2">{{ entry.notes }}</div>
+          </div>
+
+          <div class="text-xs text-gray-500">
+            {{ new Date(entry.timestamp).toLocaleString() }}
+          </div>
+
+          <div class="flex flex-wrap gap-2 pt-1">
+            <button
+              @click="emit('inspectTarget', entry)"
+              class="px-2.5 py-1 text-xs bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer"
+            >
+              View target history
+            </button>
+            <button
+              v-if="moderationStore.canUndoModerationActions.value"
+              @click="emit('inspectMod', entry.moderator_steam_id)"
+              class="px-2.5 py-1 text-xs bg-main-700 hover:bg-main-600 border border-main-500 rounded text-purple-300 cursor-pointer"
+            >
+              Inspect moderator
+            </button>
+            <a
+              v-if="entry.target_type === 'Player'"
+              :href="`/players/${entry.target_id}`"
+              class="px-2.5 py-1 text-xs bg-main-700 hover:bg-main-600 border border-main-500 rounded text-blue-300 cursor-pointer"
+            >
+              Open player →
+            </a>
+            <a
+              v-else-if="entry.target_type === 'Record'"
+              :href="`/run/${entry.target_id}`"
+              class="px-2.5 py-1 text-xs bg-main-700 hover:bg-main-600 border border-main-500 rounded text-emerald-300 cursor-pointer"
+            >
+              Open record →
+            </a>
+            <span
+              v-if="isDestructive(entry.action)"
+              class="px-2.5 py-1 text-xs text-gray-500 italic"
+            >
+              Mistake? An admin can reverse via the Moderators tab.
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Moderation/Panel/BulkSelectionTray.vue b/src/components/Moderation/Panel/BulkSelectionTray.vue
new file mode 100644
index 0000000..f1dd4bc
--- /dev/null
+++ b/src/components/Moderation/Panel/BulkSelectionTray.vue
@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Ref } from 'vue'
+import { ModerationActionType } from '@/types/moderation'
+import { useModerationStore } from '@/stores/moderation'
+import { useBulkSelection } from '@/composables/useBulkSelection'
+import ConfirmActionDialog from './ConfirmActionDialog.vue'
+import type { ConfirmRow } from './ConfirmActionDialog.vue'
+
+const emit = defineEmits<{
+  done: []
+}>()
+
+const moderationStore = useModerationStore()
+const bulk = useBulkSelection()
+
+const expanded: Ref<boolean> = ref(false)
+const showSavedPanel: Ref<boolean> = ref(false)
+const saveName: Ref<string> = ref('')
+
+const reason: Ref<string> = ref('')
+const action: Ref<ModerationActionType> = ref(ModerationActionType.Invalidate)
+const isProcessing: Ref<boolean> = ref(false)
+const error: Ref<string> = ref('')
+const success: Ref<string> = ref('')
+const showConfirm: Ref<boolean> = ref(false)
+const useServerOwnerEndpoint: Ref<boolean> = ref(false)
+
+const visible = computed(() => moderationStore.canAccessModerationPanel.value && !bulk.isEmpty.value)
+
+const availableActions = computed(() => {
+  const acts: { value: ModerationActionType; label: string }[] = []
+  if (moderationStore.canInvalidateTimes.value) {
+    acts.push({ value: ModerationActionType.Invalidate, label: 'Invalidate' })
+    acts.push({ value: ModerationActionType.Revalidate, label: 'Revalidate' })
+    acts.push({ value: ModerationActionType.Note, label: 'Add Note' })
+  }
+  return acts
+})
+
+const canSubmit = computed(() => {
+  if (isProcessing.value) return false
+  if (!reason.value.trim()) return false
+  if (bulk.count.value === 0) return false
+  if (useServerOwnerEndpoint.value) {
+    return moderationStore.canServerOwnerInvalidate.value
+        && action.value === ModerationActionType.Invalidate
+  }
+  return moderationStore.canInvalidateTimes.value
+})
+
+const confirmRows = computed<ConfirmRow[]>(() => {
+  const rows: ConfirmRow[] = [
+    { label: 'Action', value: action.value },
+    { label: 'Records', value: `${bulk.count.value} record${bulk.count.value === 1 ? '' : 's'}` },
+  ]
+  if (useServerOwnerEndpoint.value) {
+    rows.push({ label: 'Endpoint', value: 'Server-owner self-invalidate' })
+  }
+  return rows
+})
+
+const submit = () => {
+  error.value = ''
+  success.value = ''
+  if (!canSubmit.value) return
+  showConfirm.value = true
+}
+
+const performSubmit = async () => {
+  isProcessing.value = true
+  error.value = ''
+  try {
+    if (useServerOwnerEndpoint.value) {
+      await moderationStore.performServerOwnerInvalidate(bulk.ids.value, reason.value)
+    } else {
+      await moderationStore.performBulkModerationAction(action.value, reason.value, bulk.ids.value)
+    }
+    success.value = `Applied ${action.value} to ${bulk.count.value} record${bulk.count.value === 1 ? '' : 's'}.`
+    bulk.clear()
+    reason.value = ''
+    showConfirm.value = false
+    emit('done')
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed'
+  } finally {
+    isProcessing.value = false
+  }
+}
+
+const handleSave = () => {
+  if (!saveName.value.trim()) return
+  bulk.save(saveName.value)
+  saveName.value = ''
+}
+</script>
+
+<template>
+  <div v-if="visible" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 w-[min(880px,calc(100vw-2rem))]">
+    <div class="bg-main-800/95 backdrop-blur border border-main-400 rounded-xl shadow-2xl">
+      <!-- Collapsed bar -->
+      <div class="flex items-center gap-3 px-4 py-3">
+        <button
+          @click="expanded = !expanded"
+          class="flex items-center gap-2 text-gray-200 hover:text-white cursor-pointer"
+        >
+          <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-blue-600/20 text-blue-300 text-sm font-bold">
+            {{ bulk.count.value }}
+          </span>
+          <span class="font-medium">selected</span>
+          <span class="text-gray-400 text-sm">{{ expanded ? '▾' : '▸' }}</span>
+        </button>
+
+        <div class="ml-auto flex items-center gap-2">
+          <button
+            @click="showSavedPanel = !showSavedPanel"
+            class="px-3 py-1.5 text-xs bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer"
+            title="Saved selections"
+          >
+            Saved ({{ bulk.saved.value.length }})
+          </button>
+          <button
+            @click="bulk.clear()"
+            class="px-3 py-1.5 text-xs bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-300 hover:text-red-300 cursor-pointer"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      <!-- Saved selections panel -->
+      <div v-if="showSavedPanel" class="border-t border-main-500 p-4 space-y-3 bg-main-900/40">
+        <div class="flex gap-2">
+          <input
+            v-model="saveName"
+            type="text"
+            placeholder="Name this selection…"
+            class="flex-1 px-3 py-1.5 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500"
+            @keyup.enter="handleSave"
+          />
+          <button
+            @click="handleSave"
+            :disabled="!saveName.trim() || bulk.count.value === 0"
+            class="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded cursor-pointer"
+          >
+            Save current
+          </button>
+        </div>
+        <div v-if="bulk.saved.value.length === 0" class="text-sm text-gray-500 text-center py-2">
+          No saved selections yet.
+        </div>
+        <div v-else class="space-y-1 max-h-48 overflow-y-auto">
+          <div
+            v-for="slot in bulk.saved.value"
+            :key="slot.name"
+            class="flex items-center gap-2 px-3 py-2 bg-main-700/50 border border-main-500 rounded"
+          >
+            <div class="flex-1 min-w-0">
+              <div class="text-sm text-gray-200 truncate">{{ slot.name }}</div>
+              <div class="text-xs text-gray-500">
+                {{ slot.entries.length }} record{{ slot.entries.length === 1 ? '' : 's' }} ·
+                {{ new Date(slot.saved_at).toLocaleDateString() }}
+              </div>
+            </div>
+            <button
+              @click="bulk.restore(slot.name, 'replace')"
+              class="px-2 py-1 text-xs bg-main-600 hover:bg-main-500 text-gray-200 rounded cursor-pointer"
+            >
+              Load
+            </button>
+            <button
+              @click="bulk.restore(slot.name, 'merge')"
+              class="px-2 py-1 text-xs bg-main-600 hover:bg-main-500 text-gray-200 rounded cursor-pointer"
+              title="Merge with current selection"
+            >
+              + Merge
+            </button>
+            <button
+              @click="bulk.deleteSaved(slot.name)"
+              class="px-2 py-1 text-xs text-gray-400 hover:text-red-300 cursor-pointer"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Expanded action panel -->
+      <div v-if="expanded" class="border-t border-main-500 p-4 space-y-3">
+        <div class="max-h-32 overflow-y-auto bg-main-900/60 border border-main-500 rounded">
+          <div
+            v-for="entry in bulk.list.value"
+            :key="entry.id"
+            class="flex items-center gap-2 px-3 py-1.5 text-sm border-b border-main-500/40 last:border-b-0"
+          >
+            <span class="flex-1 text-gray-200 truncate">{{ entry.label }}</span>
+            <button
+              @click="bulk.remove(entry.id)"
+              class="text-gray-500 hover:text-red-300 cursor-pointer text-xs"
+              title="Remove from selection"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-[auto_1fr] gap-3 items-start">
+          <div class="flex flex-col gap-1.5">
+            <label class="text-xs text-gray-400 uppercase tracking-wide">Action</label>
+            <div class="flex flex-wrap gap-1">
+              <button
+                v-for="opt in availableActions"
+                :key="opt.value"
+                @click="action = opt.value; useServerOwnerEndpoint = false"
+                :class="[
+                  'px-2.5 py-1.5 text-xs rounded border transition-colors cursor-pointer',
+                  action === opt.value && !useServerOwnerEndpoint
+                    ? 'bg-main-600 border-main-300 text-white'
+                    : 'bg-main-700 border-main-500 text-gray-300 hover:border-main-400',
+                ]"
+              >
+                {{ opt.label }}
+              </button>
+              <button
+                v-if="moderationStore.canServerOwnerInvalidate.value"
+                @click="useServerOwnerEndpoint = true; action = ModerationActionType.Invalidate"
+                :class="[
+                  'px-2.5 py-1.5 text-xs rounded border transition-colors cursor-pointer',
+                  useServerOwnerEndpoint
+                    ? 'bg-purple-700 border-purple-400 text-white'
+                    : 'bg-main-700 border-main-500 text-purple-300 hover:border-purple-500',
+                ]"
+                title="Use server-owner endpoint (only for runs on your servers)"
+              >
+                SO Invalidate
+              </button>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-1.5">
+            <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
+            <textarea
+              v-model="reason"
+              rows="2"
+              placeholder="Required. Will appear in the audit log."
+              class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
+            />
+          </div>
+        </div>
+
+        <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
+        <div v-if="success" class="text-green-400 text-sm">{{ success }}</div>
+
+        <div class="flex justify-end">
+          <button
+            @click="submit"
+            :disabled="!canSubmit"
+            class="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 disabled:cursor-not-allowed text-white text-sm rounded-lg transition-colors cursor-pointer"
+          >
+            Apply to {{ bulk.count.value }} record{{ bulk.count.value === 1 ? '' : 's' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <ConfirmActionDialog
+      :show="showConfirm"
+      :title="`${action} ${bulk.count.value} record${bulk.count.value === 1 ? '' : 's'}?`"
+      :intent="action === ModerationActionType.Invalidate ? 'danger' : action === ModerationActionType.Note ? 'neutral' : 'warning'"
+      :rows="confirmRows"
+      :reason="reason"
+      :confirm-label="`Yes, ${action.toLowerCase()}`"
+      :is-processing="isProcessing"
+      @confirm="performSubmit"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
diff --git a/src/components/Moderation/Panel/ConfirmActionDialog.vue b/src/components/Moderation/Panel/ConfirmActionDialog.vue
new file mode 100644
index 0000000..3c6ad69
--- /dev/null
+++ b/src/components/Moderation/Panel/ConfirmActionDialog.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+export interface ConfirmRow {
+  label: string
+  value: string
+}
+
+defineProps<{
+  show: boolean
+  title: string
+  intent: 'danger' | 'warning' | 'neutral'
+  rows: ConfirmRow[]
+  reason: string
+  confirmLabel: string
+  isProcessing?: boolean
+}>()
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const intentBtnClass = {
+  danger: 'bg-red-600 hover:bg-red-700 disabled:bg-red-400',
+  warning: 'bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400',
+  neutral: 'bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400',
+} as const
+
+const intentRingClass = {
+  danger: 'ring-red-500/30',
+  warning: 'ring-purple-500/30',
+  neutral: 'ring-blue-500/30',
+} as const
+</script>
+
+<template>
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-black/60 flex items-start justify-center z-[80] p-4 overflow-y-auto"
+    @click.self="emit('cancel')"
+  >
+    <div :class="['bg-main-800 border border-main-400 rounded-lg shadow-2xl w-full max-w-md my-12 mx-auto ring-2', intentRingClass[intent]]">
+      <div class="p-4 border-b border-main-400">
+        <h3 class="text-lg font-medium text-gray-100">{{ title }}</h3>
+        <p class="text-sm text-gray-400 mt-1">Review the details before confirming.</p>
+      </div>
+
+      <div class="p-4 space-y-3">
+        <dl class="bg-main-900/60 border border-main-500 rounded p-3 text-sm space-y-2">
+          <div v-for="row in rows" :key="row.label" class="flex gap-3">
+            <dt class="text-gray-400 w-32 shrink-0">{{ row.label }}</dt>
+            <dd class="text-gray-200 break-all">{{ row.value }}</dd>
+          </div>
+        </dl>
+
+        <div class="bg-main-900/60 border border-main-500 rounded p-3">
+          <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Reason</div>
+          <div class="text-sm text-gray-200 whitespace-pre-wrap">{{ reason || '(no reason supplied)' }}</div>
+        </div>
+      </div>
+
+      <div class="p-4 border-t border-main-400 flex justify-end gap-3">
+        <button
+          @click="emit('cancel')"
+          :disabled="isProcessing"
+          class="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors cursor-pointer disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          @click="emit('confirm')"
+          :disabled="isProcessing"
+          :class="['px-4 py-2 text-white rounded-lg transition-colors cursor-pointer', intentBtnClass[intent]]"
+        >
+          {{ isProcessing ? 'Working…' : confirmLabel }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Moderation/Panel/LookupTab.vue b/src/components/Moderation/Panel/LookupTab.vue
new file mode 100644
index 0000000..6146979
--- /dev/null
+++ b/src/components/Moderation/Panel/LookupTab.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useModerationStore } from '@/stores/moderation'
+import OffstylesApi from '@/api/offstylesApi'
+import type { User } from '@/types/User'
+import type { Time } from '@/types/Time'
+import ActionBadge from './ActionBadge.vue'
+import RelativeDate from '@/components/RelativeDate.vue'
+
+interface ResolvedPlayer {
+  kind: 'player'
+  user: User
+  logs: { actions: Array<{ action: string; timestamp: number; notes?: string; mod: { username: string; steam_id: string; avatar_url?: string } }> } | null
+}
+interface ResolvedRecord {
+  kind: 'record'
+  time: Time
+  logs: { actions: Array<{ action: string; timestamp: number; notes?: string; mod: { username: string; steam_id: string; avatar_url?: string } }> } | null
+}
+interface ResolvedRef {
+  kind: 'ref'
+  ref_id: string
+  logs: { actions: Array<{ action: string; timestamp: number; notes?: string; mod: { username: string; steam_id: string; avatar_url?: string } }> }
+}
+type Resolved = ResolvedPlayer | ResolvedRecord | ResolvedRef
+
+const props = defineProps<{
+  prefillQuery?: string
+}>()
+
+const moderationStore = useModerationStore()
+
+const query: Ref<string> = ref(props.prefillQuery ?? '')
+const isLoading: Ref<boolean> = ref(false)
+const error: Ref<string> = ref('')
+const result: Ref<Resolved | null> = ref(null)
+
+// Steam IDs are 17-digit numbers starting with 7656119; record/ref IDs are
+// 24-character hex (Mongo ObjectId). Anything else is treated as ambiguous
+// and we'll try the mod-log lookup first, falling back to time lookup.
+const detectKind = (raw: string): 'steam' | 'oid' | 'unknown' => {
+  const s = raw.trim()
+  if (/^7656119\d{10}$/.test(s)) return 'steam'
+  if (/^[a-f0-9]{24}$/i.test(s)) return 'oid'
+  return 'unknown'
+}
+
+const detected = computed(() => detectKind(query.value))
+
+const lookup = async () => {
+  const q = query.value.trim()
+  if (!q) return
+  isLoading.value = true
+  error.value = ''
+  result.value = null
+
+  try {
+    const kind = detectKind(q)
+    if (kind === 'steam') {
+      const user = await OffstylesApi.getUserProfile(q)
+      let logs: ResolvedPlayer['logs'] = null
+      if (user.ban_ref) {
+        try {
+          const r = await moderationStore.getModerationLogs(user.ban_ref)
+          logs = { actions: (r.actions || []).sort((a, b) => b.timestamp - a.timestamp) }
+        } catch {
+          logs = null
+        }
+      }
+      result.value = { kind: 'player', user, logs }
+    } else if (kind === 'oid') {
+      // Try as a record ID first; if that fails, treat as a mod-log ref.
+      try {
+        const time = await OffstylesApi.getSingleTime(q)
+        let logs: ResolvedRecord['logs'] = null
+        if (time.invalid_ref) {
+          try {
+            const r = await moderationStore.getModerationLogs(time.invalid_ref)
+            logs = { actions: (r.actions || []).sort((a, b) => b.timestamp - a.timestamp) }
+          } catch {
+            logs = null
+          }
+        }
+        result.value = { kind: 'record', time, logs }
+      } catch {
+        const r = await moderationStore.getModerationLogs(q)
+        result.value = {
+          kind: 'ref',
+          ref_id: q,
+          logs: { actions: (r.actions || []).sort((a, b) => b.timestamp - a.timestamp) },
+        }
+      }
+    } else {
+      throw new Error('Enter a 17-digit Steam ID or a 24-char ObjectId.')
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Lookup failed'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const reset = () => {
+  query.value = ''
+  result.value = null
+  error.value = ''
+}
+
+onMounted(() => {
+  if (props.prefillQuery && detectKind(props.prefillQuery) !== 'unknown') {
+    lookup()
+  }
+})
+
+watch(() => props.prefillQuery, (q) => {
+  if (q && detectKind(q) !== 'unknown') {
+    query.value = q
+    lookup()
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
+      <div>
+        <label class="text-xs text-gray-400 uppercase tracking-wide">Lookup</label>
+        <p class="text-sm text-gray-500 mt-1">
+          Paste a Steam ID, run ID, or moderation log reference. Type is detected automatically.
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <input
+          v-model="query"
+          type="text"
+          placeholder="76561198… or 24-char hex"
+          class="flex-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 placeholder-gray-500 focus:outline-none focus:border-main-300 font-mono text-sm"
+          @keyup.enter="lookup"
+        />
+        <button
+          @click="lookup"
+          :disabled="!query.trim() || isLoading"
+          class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded transition-colors cursor-pointer"
+        >
+          {{ isLoading ? 'Searching…' : 'Search' }}
+        </button>
+        <button
+          v-if="query"
+          @click="reset"
+          class="px-3 py-2 text-gray-400 hover:text-gray-200 cursor-pointer"
+        >
+          Clear
+        </button>
+      </div>
+      <div v-if="query" class="text-xs text-gray-500">
+        Detected:
+        <span v-if="detected === 'steam'" class="text-blue-300">Steam ID (player profile)</span>
+        <span v-else-if="detected === 'oid'" class="text-emerald-300">ObjectId (run or mod-log ref)</span>
+        <span v-else class="text-gray-500">unrecognized — search will reject</span>
+      </div>
+    </div>
+
+    <div v-if="error" class="bg-red-900/20 border border-red-800/40 text-red-300 rounded-lg p-3 text-sm">
+      {{ error }}
+    </div>
+
+    <!-- Player result -->
+    <div v-if="result?.kind === 'player'" class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+      <div class="p-4 border-b border-main-500 flex items-start gap-3">
+        <img v-if="result.user.avatar_url" :src="result.user.avatar_url" class="w-12 h-12 rounded" />
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2">
+            <span class="text-lg font-medium text-gray-100">{{ result.user.username }}</span>
+            <span v-if="result.user.is_banned" class="px-1.5 py-0.5 text-[10px] uppercase tracking-wide rounded bg-red-900/30 text-red-300 border border-red-800/40">Banned</span>
+          </div>
+          <div class="text-xs text-gray-500 font-mono">{{ result.user.steam_id }}</div>
+          <div class="text-xs text-gray-500 mt-1">
+            Joined {{ new Date(result.user.created_at * 1000).toLocaleDateString() }} ·
+            Permissions: <span class="font-mono">0x{{ result.user.permissions.toString(16) }}</span>
+          </div>
+        </div>
+        <a :href="`/players/${result.user.steam_id}`" class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer shrink-0">
+          Open profile →
+        </a>
+      </div>
+      <div class="p-4">
+        <div class="text-xs text-gray-400 uppercase tracking-wide mb-2">Moderation history</div>
+        <div v-if="!result.user.ban_ref" class="text-sm text-gray-500 italic">
+          No moderation actions on record.
+        </div>
+        <div v-else-if="!result.logs" class="text-sm text-yellow-400">
+          Has a ban_ref but logs failed to load.
+        </div>
+        <div v-else class="space-y-1.5">
+          <div
+            v-for="(a, i) in result.logs.actions"
+            :key="i"
+            class="flex items-start gap-2 px-2 py-1.5 bg-main-900/40 border border-main-500/40 rounded text-sm"
+          >
+            <ActionBadge :action="a.action" size="sm" />
+            <span class="text-gray-300">{{ a.mod.username }}</span>
+            <span class="text-gray-500 ml-auto text-xs"><RelativeDate :date="a.timestamp" /></span>
+            <div v-if="a.notes" class="basis-full text-xs text-gray-400 italic">"{{ a.notes }}"</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Record result -->
+    <div v-else-if="result?.kind === 'record'" class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+      <div class="p-4 border-b border-main-500 flex items-start gap-3">
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2">
+            <span class="text-lg font-medium text-gray-100">{{ result.time.map }}</span>
+            <span v-if="result.time.is_invalid" class="px-1.5 py-0.5 text-[10px] uppercase tracking-wide rounded bg-red-900/30 text-red-300 border border-red-800/40">Invalid</span>
+          </div>
+          <div class="text-sm text-gray-300">
+            {{ result.time.name }} · {{ result.time.time.toFixed(3) }}s
+          </div>
+          <div class="text-xs text-gray-500 font-mono mt-1">{{ result.time._id }}</div>
+        </div>
+        <a :href="`/run/${result.time._id}`" class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer shrink-0">
+          Open record →
+        </a>
+      </div>
+      <div class="p-4">
+        <div class="text-xs text-gray-400 uppercase tracking-wide mb-2">Moderation history</div>
+        <div v-if="!result.time.invalid_ref" class="text-sm text-gray-500 italic">
+          No moderation actions on record.
+        </div>
+        <div v-else-if="!result.logs" class="text-sm text-yellow-400">
+          Has an invalid_ref but logs failed to load.
+        </div>
+        <div v-else class="space-y-1.5">
+          <div
+            v-for="(a, i) in result.logs.actions"
+            :key="i"
+            class="flex items-start gap-2 px-2 py-1.5 bg-main-900/40 border border-main-500/40 rounded text-sm"
+          >
+            <ActionBadge :action="a.action" size="sm" />
+            <span class="text-gray-300">{{ a.mod.username }}</span>
+            <span class="text-gray-500 ml-auto text-xs"><RelativeDate :date="a.timestamp" /></span>
+            <div v-if="a.notes" class="basis-full text-xs text-gray-400 italic">"{{ a.notes }}"</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bare mod-log ref result -->
+    <div v-else-if="result?.kind === 'ref'" class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+      <div class="p-4 border-b border-main-500">
+        <div class="text-xs text-gray-400 uppercase tracking-wide">Moderation log reference</div>
+        <div class="text-sm font-mono text-gray-200 mt-1">{{ result.ref_id }}</div>
+        <div class="text-xs text-gray-500 mt-1">Not a known run; treating as a raw mod-log ID.</div>
+      </div>
+      <div class="p-4">
+        <div v-if="result.logs.actions.length === 0" class="text-sm text-gray-500 italic">
+          No actions on this reference.
+        </div>
+        <div v-else class="space-y-1.5">
+          <div
+            v-for="(a, i) in result.logs.actions"
+            :key="i"
+            class="flex items-start gap-2 px-2 py-1.5 bg-main-900/40 border border-main-500/40 rounded text-sm"
+          >
+            <ActionBadge :action="a.action" size="sm" />
+            <span class="text-gray-300">{{ a.mod.username }}</span>
+            <span class="text-gray-500 ml-auto text-xs"><RelativeDate :date="a.timestamp" /></span>
+            <div v-if="a.notes" class="basis-full text-xs text-gray-400 italic">"{{ a.notes }}"</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Moderation/Panel/ModeratorsTab.vue b/src/components/Moderation/Panel/ModeratorsTab.vue
new file mode 100644
index 0000000..6d13a48
--- /dev/null
+++ b/src/components/Moderation/Panel/ModeratorsTab.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useModerationStore } from '@/stores/moderation'
+import type { RecentModAction } from '@/types/moderation'
+import ActionBadge from './ActionBadge.vue'
+import ConfirmActionDialog from './ConfirmActionDialog.vue'
+import type { ConfirmRow } from './ConfirmActionDialog.vue'
+import RelativeDate from '@/components/RelativeDate.vue'
+
+interface ModSummary {
+  steam_id: string
+  name: string
+  avatar_url?: string
+  recent: RecentModAction[]
+  last_action_ts: number
+  counts: { ban: number; invalidate: number; unban: number; revalidate: number; note: number; reverse: number }
+}
+
+const props = defineProps<{
+  preselectSteamId?: string
+}>()
+
+const moderationStore = useModerationStore()
+
+const allRecent: Ref<RecentModAction[]> = ref([])
+const isLoading: Ref<boolean> = ref(false)
+const selected: Ref<string | null> = ref(null)
+const advancedMode: Ref<boolean> = ref(false)
+
+// Reverse form
+const rawSteamId: Ref<string> = ref('')
+const timeframeHours: Ref<number> = ref(24)
+const reason: Ref<string> = ref('')
+const isReversing: Ref<boolean> = ref(false)
+const reverseError: Ref<string> = ref('')
+const reverseResult: Ref<string> = ref('')
+const showConfirm: Ref<boolean> = ref(false)
+
+const load = async () => {
+  isLoading.value = true
+  try {
+    const both = await moderationStore.getRecentModerationLogs(undefined)
+    allRecent.value = both.sort((a, b) => b.timestamp - a.timestamp)
+  } catch (e) {
+    console.error('Failed to load mod activity:', e)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  load()
+  if (props.preselectSteamId) selected.value = props.preselectSteamId
+})
+
+watch(() => props.preselectSteamId, (sid) => {
+  if (sid) selected.value = sid
+})
+
+const moderators = computed<ModSummary[]>(() => {
+  const map = new Map<string, ModSummary>()
+  for (const a of allRecent.value) {
+    let m = map.get(a.moderator_steam_id)
+    if (!m) {
+      m = {
+        steam_id: a.moderator_steam_id,
+        name: a.moderator_name,
+        avatar_url: a.moderator_avatar_url,
+        recent: [],
+        last_action_ts: 0,
+        counts: { ban: 0, invalidate: 0, unban: 0, revalidate: 0, note: 0, reverse: 0 },
+      }
+      map.set(a.moderator_steam_id, m)
+    }
+    m.recent.push(a)
+    if (a.timestamp > m.last_action_ts) m.last_action_ts = a.timestamp
+    const k = a.action.toLowerCase() as keyof ModSummary['counts']
+    if (k in m.counts) m.counts[k]++
+  }
+  return Array.from(map.values()).sort((a, b) => b.last_action_ts - a.last_action_ts)
+})
+
+const selectedMod = computed(() => {
+  if (!selected.value) return null
+  return moderators.value.find(m => m.steam_id === selected.value) ?? null
+})
+
+const effectiveSteamId = computed(() => {
+  return advancedMode.value ? rawSteamId.value.trim() : (selected.value ?? '')
+})
+
+const canSubmit = computed(() => {
+  return !!effectiveSteamId.value
+      && timeframeHours.value > 0
+      && reason.value.trim().length > 0
+      && !isReversing.value
+})
+
+const startReverse = () => {
+  reverseError.value = ''
+  reverseResult.value = ''
+  if (!canSubmit.value) return
+  showConfirm.value = true
+}
+
+const performReverse = async () => {
+  isReversing.value = true
+  reverseError.value = ''
+  try {
+    const result = await moderationStore.reverseModerationActions(
+      effectiveSteamId.value,
+      timeframeHours.value,
+      reason.value.trim(),
+    )
+    reverseResult.value = result || 'Reversed.'
+    showConfirm.value = false
+    reason.value = ''
+    await load()
+  } catch (e) {
+    reverseError.value = e instanceof Error ? e.message : 'Failed'
+  } finally {
+    isReversing.value = false
+  }
+}
+
+const confirmRows = computed<ConfirmRow[]>(() => [
+  { label: 'Moderator', value: selectedMod.value?.name ?? '(by Steam ID only)' },
+  { label: 'Steam ID', value: effectiveSteamId.value },
+  { label: 'Timeframe', value: `${timeframeHours.value} hour${timeframeHours.value === 1 ? '' : 's'}` },
+])
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between gap-3 flex-wrap">
+      <div>
+        <h3 class="text-sm font-medium text-gray-200">Reverse moderator actions</h3>
+        <p class="text-xs text-gray-500 mt-0.5">
+          Pick a moderator from the directory to see their recent activity, then reverse a slice of it.
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <label class="text-xs text-gray-400 flex items-center gap-2 cursor-pointer">
+          <input v-model="advancedMode" type="checkbox" class="rounded" />
+          Raw Steam ID
+        </label>
+        <button
+          @click="load"
+          :disabled="isLoading"
+          class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+        >
+          {{ isLoading ? 'Loading…' : 'Refresh' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="grid lg:grid-cols-[280px_1fr] gap-4">
+      <!-- Directory -->
+      <div class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+        <div class="px-3 py-2 border-b border-main-500 text-xs text-gray-400 uppercase tracking-wide">
+          Active moderators
+        </div>
+        <div v-if="moderators.length === 0" class="p-4 text-sm text-gray-500 text-center">
+          No moderator activity.
+        </div>
+        <div v-else class="max-h-[460px] overflow-y-auto">
+          <button
+            v-for="m in moderators"
+            :key="m.steam_id"
+            @click="selected = m.steam_id; advancedMode = false"
+            :class="[
+              'w-full text-left px-3 py-2.5 flex items-center gap-2.5 border-b border-main-500/40 last:border-b-0 cursor-pointer transition-colors',
+              selected === m.steam_id ? 'bg-main-700' : 'hover:bg-main-700/50',
+            ]"
+          >
+            <img v-if="m.avatar_url" :src="m.avatar_url" class="w-8 h-8 rounded shrink-0" />
+            <div v-else class="w-8 h-8 rounded bg-main-600 shrink-0"></div>
+            <div class="flex-1 min-w-0">
+              <div class="text-sm text-gray-200 truncate">{{ m.name }}</div>
+              <div class="text-xs text-gray-500">
+                {{ m.recent.length }} action{{ m.recent.length === 1 ? '' : 's' }} ·
+                <RelativeDate :date="m.last_action_ts" />
+              </div>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <!-- Detail / reverse form -->
+      <div class="space-y-3">
+        <div v-if="advancedMode" class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
+          <div class="text-sm font-medium text-gray-200">Raw Steam ID mode</div>
+          <input
+            v-model="rawSteamId"
+            type="text"
+            placeholder="76561198…"
+            class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 placeholder-gray-500 font-mono text-sm focus:outline-none focus:border-main-300"
+          />
+          <p class="text-xs text-gray-500">Reverses every action by this Steam ID in the timeframe below.</p>
+        </div>
+
+        <div v-else-if="!selectedMod" class="bg-main-800 border border-main-500 rounded-lg p-12 text-center text-gray-500 text-sm">
+          Pick a moderator from the directory.
+        </div>
+
+        <div v-else class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+          <div class="p-4 border-b border-main-500 flex items-center gap-3">
+            <img v-if="selectedMod.avatar_url" :src="selectedMod.avatar_url" class="w-12 h-12 rounded" />
+            <div class="flex-1 min-w-0">
+              <div class="text-base font-medium text-gray-100">{{ selectedMod.name }}</div>
+              <div class="text-xs text-gray-500 font-mono">{{ selectedMod.steam_id }}</div>
+            </div>
+            <div class="text-right text-xs text-gray-500">
+              <div class="text-gray-300 font-medium">{{ selectedMod.recent.length }}</div>
+              <div>recent</div>
+            </div>
+          </div>
+
+          <div class="px-4 py-3 border-b border-main-500 grid grid-cols-3 sm:grid-cols-6 gap-2 text-center">
+            <div v-for="(v, k) in selectedMod.counts" :key="k">
+              <div class="text-base font-medium text-gray-200">{{ v }}</div>
+              <div class="text-[10px] text-gray-500 uppercase tracking-wide">{{ k }}</div>
+            </div>
+          </div>
+
+          <div class="max-h-[260px] overflow-y-auto">
+            <div
+              v-for="(a, i) in selectedMod.recent"
+              :key="i"
+              class="px-4 py-2 border-b border-main-500/40 last:border-b-0 flex items-center gap-2 text-sm"
+            >
+              <ActionBadge :action="a.action" size="sm" />
+              <span class="text-gray-300 truncate">{{ a.target_name }}</span>
+              <span class="text-[10px] uppercase tracking-wide text-gray-500 ml-1">{{ a.target_type }}</span>
+              <span class="ml-auto text-xs text-gray-500"><RelativeDate :date="a.timestamp" /></span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Reverse form -->
+        <div v-if="advancedMode || selectedMod" class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
+          <div class="flex items-center gap-2">
+            <span class="px-2 py-0.5 text-[10px] uppercase tracking-wide rounded bg-purple-900/30 text-purple-300 border border-purple-800/40 font-semibold">
+              Admin
+            </span>
+            <span class="text-sm font-medium text-gray-200">Reverse window</span>
+          </div>
+
+          <div class="grid sm:grid-cols-[140px_1fr] gap-3">
+            <div>
+              <label class="text-xs text-gray-400 uppercase tracking-wide">Timeframe</label>
+              <div class="flex items-center gap-1 mt-1">
+                <input
+                  v-model.number="timeframeHours"
+                  type="number"
+                  min="1"
+                  class="w-20 px-2 py-1.5 bg-main-700 border border-main-500 rounded text-gray-200 text-sm focus:outline-none focus:border-main-300"
+                />
+                <span class="text-xs text-gray-400">hours</span>
+              </div>
+              <div class="flex gap-1 mt-1.5">
+                <button
+                  v-for="preset in [1, 6, 24, 72]"
+                  :key="preset"
+                  @click="timeframeHours = preset"
+                  :class="[
+                    'text-[10px] px-1.5 py-0.5 rounded border cursor-pointer',
+                    timeframeHours === preset
+                      ? 'bg-main-600 border-main-300 text-white'
+                      : 'bg-main-700 border-main-500 text-gray-400 hover:border-main-400',
+                  ]"
+                >
+                  {{ preset }}h
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
+              <textarea
+                v-model="reason"
+                rows="2"
+                placeholder="Why is this reversal warranted?"
+                class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
+              />
+            </div>
+          </div>
+
+          <div v-if="reverseError" class="text-red-400 text-sm">{{ reverseError }}</div>
+          <div v-if="reverseResult" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ reverseResult }}</div>
+
+          <div class="flex justify-end">
+            <button
+              @click="startReverse"
+              :disabled="!canSubmit"
+              class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
+            >
+              Reverse {{ timeframeHours }}h of actions
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ConfirmActionDialog
+      :show="showConfirm"
+      title="Reverse moderation actions?"
+      intent="warning"
+      :rows="confirmRows"
+      :reason="reason"
+      confirm-label="Yes, reverse"
+      :is-processing="isReversing"
+      @confirm="performReverse"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
diff --git a/src/components/Moderation/Panel/ServerOwnerTab.vue b/src/components/Moderation/Panel/ServerOwnerTab.vue
new file mode 100644
index 0000000..512719b
--- /dev/null
+++ b/src/components/Moderation/Panel/ServerOwnerTab.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Ref } from 'vue'
+import { useModerationStore } from '@/stores/moderation'
+import { useBulkSelection } from '@/composables/useBulkSelection'
+import ConfirmActionDialog from './ConfirmActionDialog.vue'
+import type { ConfirmRow } from './ConfirmActionDialog.vue'
+
+const moderationStore = useModerationStore()
+const bulk = useBulkSelection()
+
+const idsRaw: Ref<string> = ref('')
+const reason: Ref<string> = ref('')
+const isProcessing: Ref<boolean> = ref(false)
+const error: Ref<string> = ref('')
+const success: Ref<string> = ref('')
+const showConfirm: Ref<boolean> = ref(false)
+
+const parsedIds = computed(() => {
+  return idsRaw.value
+    .split(/[\s,]+/)
+    .map(s => s.trim())
+    .filter(s => /^[a-f0-9]{24}$/i.test(s))
+})
+
+const dedupedIds = computed(() => {
+  const set = new Set<string>([...parsedIds.value, ...bulk.ids.value])
+  return Array.from(set)
+})
+
+const canSubmit = computed(() => {
+  return moderationStore.canServerOwnerInvalidate.value
+      && dedupedIds.value.length > 0
+      && reason.value.trim().length > 0
+      && !isProcessing.value
+})
+
+const includeBulk: Ref<boolean> = ref(true)
+
+const effectiveIds = computed(() => {
+  if (includeBulk.value) return dedupedIds.value
+  return parsedIds.value
+})
+
+const start = () => {
+  error.value = ''
+  success.value = ''
+  if (effectiveIds.value.length === 0) {
+    error.value = 'Provide at least one valid 24-char ObjectId.'
+    return
+  }
+  if (!reason.value.trim()) {
+    error.value = 'Reason is required.'
+    return
+  }
+  showConfirm.value = true
+}
+
+const perform = async () => {
+  isProcessing.value = true
+  error.value = ''
+  try {
+    await moderationStore.performServerOwnerInvalidate(effectiveIds.value, reason.value)
+    success.value = `Invalidated ${effectiveIds.value.length} record${effectiveIds.value.length === 1 ? '' : 's'}.`
+    showConfirm.value = false
+    idsRaw.value = ''
+    reason.value = ''
+    if (includeBulk.value) bulk.clear()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed'
+  } finally {
+    isProcessing.value = false
+  }
+}
+
+const confirmRows = computed<ConfirmRow[]>(() => [
+  { label: 'Records', value: `${effectiveIds.value.length}` },
+  { label: 'Source', value: includeBulk.value && bulk.count.value > 0 ? 'Pasted IDs + bulk selection' : 'Pasted IDs' },
+  { label: 'Endpoint', value: '/so_moderate (server-owner)' },
+])
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="bg-purple-900/10 border border-purple-800/40 text-purple-200 rounded-lg p-3 text-sm">
+      <div class="font-medium">Server-owner self-invalidation</div>
+      <p class="text-purple-200/80 text-xs mt-1">
+        Use this to invalidate runs set on servers you own (e.g. before a major rule change, or to clear out test runs).
+        The backend rejects records that weren't set on a server tied to your owner key.
+      </p>
+    </div>
+
+    <div v-if="!moderationStore.canServerOwnerInvalidate.value" class="bg-red-900/20 border border-red-800/40 text-red-300 rounded-lg p-3 text-sm">
+      You don't have the server-owner invalidate permission. This tab is read-only.
+    </div>
+
+    <div class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
+      <div>
+        <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
+        <textarea
+          v-model="idsRaw"
+          rows="4"
+          placeholder="Paste ObjectIds — comma, space, or newline separated"
+          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
+        />
+        <div class="flex justify-between text-xs mt-1">
+          <span class="text-gray-500">{{ parsedIds.length }} valid · {{ idsRaw.split(/\s|,/).filter(s => s.trim()).length - parsedIds.length }} invalid</span>
+        </div>
+      </div>
+
+      <div v-if="bulk.count.value > 0" class="flex items-start gap-2 px-3 py-2 bg-main-900/40 border border-main-500 rounded">
+        <input
+          v-model="includeBulk"
+          type="checkbox"
+          class="mt-1"
+        />
+        <div class="flex-1 text-sm">
+          <div class="text-gray-200">Include bulk selection ({{ bulk.count.value }} record{{ bulk.count.value === 1 ? '' : 's' }})</div>
+          <div class="text-xs text-gray-500">Combines with the IDs above; duplicates are removed.</div>
+        </div>
+        <span class="text-xs text-gray-400">total: {{ effectiveIds.length }}</span>
+      </div>
+
+      <div>
+        <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
+        <textarea
+          v-model="reason"
+          rows="2"
+          placeholder="Required. Will appear in the audit log."
+          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
+        />
+      </div>
+
+      <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
+      <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
+
+      <div class="flex justify-end">
+        <button
+          @click="start"
+          :disabled="!canSubmit"
+          class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
+        >
+          Invalidate {{ effectiveIds.length }} record{{ effectiveIds.length === 1 ? '' : 's' }}
+        </button>
+      </div>
+    </div>
+
+    <ConfirmActionDialog
+      :show="showConfirm"
+      title="Self-invalidate records?"
+      intent="warning"
+      :rows="confirmRows"
+      :reason="reason"
+      confirm-label="Yes, invalidate"
+      :is-processing="isProcessing"
+      @confirm="perform"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
diff --git a/src/composables/useBulkSelection.ts b/src/composables/useBulkSelection.ts
new file mode 100644
index 0000000..14f9366
--- /dev/null
+++ b/src/composables/useBulkSelection.ts
@@ -0,0 +1,156 @@
+import { ref, computed } from 'vue'
+import type { Ref } from 'vue'
+
+// Heavy bulk: cross-page record selection that survives page navigation
+// (sessionStorage) and named "saved selections" that persist across sessions
+// (localStorage). One module-level store; every consumer of useBulkSelection
+// sees the same set, which is the point — selections accrue as the moderator
+// scrolls through different lists.
+
+export interface BulkRecordEntry {
+  id: string
+  // Human-readable label for the tray; should be self-contained without
+  // needing the original list context (e.g. "player on map · 12.345s").
+  label: string
+}
+
+export interface SavedSelection {
+  name: string
+  saved_at: number
+  entries: BulkRecordEntry[]
+}
+
+const SESSION_KEY = 'mod-bulk-selection-v1'
+const SAVED_KEY = 'mod-bulk-saved-v1'
+
+const loadSession = (): Map<string, BulkRecordEntry> => {
+  try {
+    const raw = sessionStorage.getItem(SESSION_KEY)
+    if (!raw) return new Map()
+    const arr: BulkRecordEntry[] = JSON.parse(raw)
+    return new Map(arr.map(e => [e.id, e]))
+  } catch {
+    return new Map()
+  }
+}
+
+const loadSaved = (): SavedSelection[] => {
+  try {
+    const raw = localStorage.getItem(SAVED_KEY)
+    if (!raw) return []
+    return JSON.parse(raw)
+  } catch {
+    return []
+  }
+}
+
+const entries: Ref<Map<string, BulkRecordEntry>> = ref(loadSession())
+const saved: Ref<SavedSelection[]> = ref(loadSaved())
+
+const persistSession = () => {
+  try {
+    sessionStorage.setItem(SESSION_KEY, JSON.stringify(Array.from(entries.value.values())))
+  } catch {
+    // sessionStorage full or disabled — selection is still live in memory
+  }
+}
+
+const persistSaved = () => {
+  try {
+    localStorage.setItem(SAVED_KEY, JSON.stringify(saved.value))
+  } catch {
+    // localStorage full or disabled
+  }
+}
+
+export const useBulkSelection = () => {
+  const count = computed(() => entries.value.size)
+  const ids = computed(() => Array.from(entries.value.keys()))
+  const list = computed(() => Array.from(entries.value.values()))
+  const isEmpty = computed(() => entries.value.size === 0)
+
+  const has = (id: string) => entries.value.has(id)
+
+  const add = (entry: BulkRecordEntry) => {
+    entries.value.set(entry.id, entry)
+    persistSession()
+  }
+
+  const remove = (id: string) => {
+    if (entries.value.delete(id)) persistSession()
+  }
+
+  const toggle = (entry: BulkRecordEntry) => {
+    if (entries.value.has(entry.id)) {
+      entries.value.delete(entry.id)
+    } else {
+      entries.value.set(entry.id, entry)
+    }
+    persistSession()
+  }
+
+  const addMany = (newEntries: BulkRecordEntry[]) => {
+    for (const e of newEntries) entries.value.set(e.id, e)
+    persistSession()
+  }
+
+  const removeMany = (idsToRemove: string[]) => {
+    let changed = false
+    for (const id of idsToRemove) if (entries.value.delete(id)) changed = true
+    if (changed) persistSession()
+  }
+
+  const clear = () => {
+    if (entries.value.size === 0) return
+    entries.value.clear()
+    persistSession()
+  }
+
+  const save = (name: string) => {
+    const trimmed = name.trim()
+    if (!trimmed || entries.value.size === 0) return
+    const existing = saved.value.findIndex(s => s.name === trimmed)
+    const snapshot: SavedSelection = {
+      name: trimmed,
+      saved_at: Date.now(),
+      entries: Array.from(entries.value.values()),
+    }
+    if (existing >= 0) saved.value[existing] = snapshot
+    else saved.value.unshift(snapshot)
+    persistSaved()
+  }
+
+  const restore = (name: string, mode: 'replace' | 'merge' = 'replace') => {
+    const slot = saved.value.find(s => s.name === name)
+    if (!slot) return
+    if (mode === 'replace') entries.value.clear()
+    for (const e of slot.entries) entries.value.set(e.id, e)
+    persistSession()
+  }
+
+  const deleteSaved = (name: string) => {
+    const before = saved.value.length
+    saved.value = saved.value.filter(s => s.name !== name)
+    if (saved.value.length !== before) persistSaved()
+  }
+
+  return {
+    count,
+    ids,
+    list,
+    isEmpty,
+    saved: computed(() => saved.value),
+
+    has,
+    add,
+    remove,
+    toggle,
+    addMany,
+    removeMany,
+    clear,
+
+    save,
+    restore,
+    deleteSaved,
+  }
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index a445034..339144a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -43,6 +43,11 @@ const router = createRouter({
       path: '/servers',
       name: 'servers',
       component: () => import('../views/ServersView.vue')
+    },
+    {
+      path: '/moderation',
+      name: 'moderation',
+      component: () => import('../views/ModerationView.vue')
     }
   ],
 })
diff --git a/src/stores/moderation.ts b/src/stores/moderation.ts
index 5993354..7189c09 100644
--- a/src/stores/moderation.ts
+++ b/src/stores/moderation.ts
@@ -49,6 +49,19 @@ export const useModerationStore = () => {
     return userPermissions.value.contains(UserPermissions.UNDO_MOD_ACTION)
   })
 
+  // Server owners can self-invalidate runs on their own servers. Backend
+  // requires both SERVER_OWNER_INVALIDATE_TIMES and INVALIDATE_TIMES.
+  const canServerOwnerInvalidate = computed(() => {
+    return userPermissions.value.contains(UserPermissions.SERVER_OWNER_INVALIDATE_TIMES)
+        && userPermissions.value.contains(UserPermissions.INVALIDATE_TIMES)
+  })
+
+  // Truthy for anyone with at least one moderation-adjacent capability —
+  // mods, admins, and server owners. Used to gate the /moderation route.
+  const canAccessModerationPanel = computed(() => {
+    return canModerate.value || canUndoModerationActions.value || canServerOwnerInvalidate.value
+  })
+
   const getAvailableActions = (target: ModerationTarget) => {
     if (!canModerate.value) return []
     
@@ -121,6 +134,21 @@ export const useModerationStore = () => {
     }
   }
 
+  const performServerOwnerInvalidate = async (recordIds: string[], reason: string): Promise<void> => {
+    if (!reason.trim()) {
+      throw new Error('Reason is required')
+    }
+    if (recordIds.length === 0) {
+      throw new Error('No records selected')
+    }
+    isLoading.value = true
+    try {
+      await OffstylesApi.serverOwnerInvalidate(recordIds, reason.trim())
+    } finally {
+      isLoading.value = false
+    }
+  }
+
   const getModerationLogs = async (id: string) => {
     return await OffstylesApi.getModerationLogs(id)
   }
@@ -144,14 +172,17 @@ export const useModerationStore = () => {
     canBanPlayers,
     canInvalidateTimes,
     canUndoModerationActions,
+    canServerOwnerInvalidate,
+    canAccessModerationPanel,
     userPermissions,
-    
+
     // Actions
     getAvailableActions,
     openModerationModal,
     closeModerationModal,
     performModerationAction,
     performBulkModerationAction,
+    performServerOwnerInvalidate,
     getModerationLogs,
     reverseModerationActions,
     getRecentModerationLogs
diff --git a/src/views/ModerationView.vue b/src/views/ModerationView.vue
new file mode 100644
index 0000000..371bce0
--- /dev/null
+++ b/src/views/ModerationView.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useModerationStore } from '@/stores/moderation'
+import { useAuth } from '@/stores/auth'
+import ActivityTab from '@/components/Moderation/Panel/ActivityTab.vue'
+import LookupTab from '@/components/Moderation/Panel/LookupTab.vue'
+import ModeratorsTab from '@/components/Moderation/Panel/ModeratorsTab.vue'
+import ServerOwnerTab from '@/components/Moderation/Panel/ServerOwnerTab.vue'
+import BulkSelectionTray from '@/components/Moderation/Panel/BulkSelectionTray.vue'
+import type { RecentModAction } from '@/types/moderation'
+
+type TabKey = 'activity' | 'lookup' | 'moderators' | 'server-owner'
+
+const route = useRoute()
+const router = useRouter()
+const moderationStore = useModerationStore()
+const { user, isLoading: authLoading } = useAuth()
+
+const tabs = computed<{ key: TabKey; label: string; visible: boolean; description: string }[]>(() => [
+  {
+    key: 'activity',
+    label: 'Activity',
+    visible: moderationStore.canModerate.value || moderationStore.canUndoModerationActions.value,
+    description: 'Recent moderation actions across the site.',
+  },
+  {
+    key: 'lookup',
+    label: 'Lookup',
+    visible: moderationStore.canModerate.value || moderationStore.canUndoModerationActions.value,
+    description: 'Search by Steam ID, run ID, or mod-log reference.',
+  },
+  {
+    key: 'moderators',
+    label: 'Moderators',
+    visible: moderationStore.canUndoModerationActions.value,
+    description: 'Per-moderator activity and reverse window (admin).',
+  },
+  {
+    key: 'server-owner',
+    label: 'Server Owner',
+    visible: moderationStore.canServerOwnerInvalidate.value,
+    description: 'Self-invalidate runs on your servers.',
+  },
+])
+
+const visibleTabs = computed(() => tabs.value.filter(t => t.visible))
+
+const activeTab: Ref<TabKey> = ref('activity')
+const preselectModSteamId: Ref<string | undefined> = ref(undefined)
+const lookupPrefill: Ref<string | undefined> = ref(undefined)
+
+const syncTabFromRoute = () => {
+  const tab = (route.query.tab as TabKey) || 'activity'
+  if (visibleTabs.value.some(t => t.key === tab)) {
+    activeTab.value = tab
+  } else if (visibleTabs.value.length > 0) {
+    activeTab.value = visibleTabs.value[0].key
+  }
+}
+
+watch(() => route.query.tab, syncTabFromRoute)
+watch(visibleTabs, syncTabFromRoute, { immediate: true })
+
+const setTab = (key: TabKey) => {
+  activeTab.value = key
+  router.replace({ query: { ...route.query, tab: key } })
+}
+
+const onInspectMod = (steamId: string) => {
+  preselectModSteamId.value = steamId
+  setTab('moderators')
+}
+
+const onInspectTarget = (action: RecentModAction) => {
+  // /mod_logs_recent doesn't return the moderation document ref, so the
+  // Lookup tab is the only path that can resolve the audit history (it
+  // calls /profile or /times first to pick up the ref, then /mod_logs).
+  lookupPrefill.value = action.target_id
+  setTab('lookup')
+}
+
+const accessGranted = computed(() => moderationStore.canAccessModerationPanel.value)
+
+onMounted(() => {
+  syncTabFromRoute()
+})
+</script>
+
+<template>
+  <main class="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto w-full">
+    <!-- Loading skeleton while auth resolves -->
+    <div v-if="authLoading" class="text-center py-16 text-gray-500">
+      Checking permissions…
+    </div>
+
+    <!-- Not allowed -->
+    <div v-else-if="!user" class="bg-main-800 border border-main-500 rounded-lg p-12 text-center">
+      <h2 class="text-lg font-medium text-gray-200">Sign in required</h2>
+      <p class="text-sm text-gray-500 mt-2">The moderation panel is for staff only.</p>
+    </div>
+    <div v-else-if="!accessGranted" class="bg-main-800 border border-main-500 rounded-lg p-12 text-center">
+      <h2 class="text-lg font-medium text-gray-200">Not authorized</h2>
+      <p class="text-sm text-gray-500 mt-2">Your account doesn't have moderation permissions.</p>
+    </div>
+
+    <!-- Authorized -->
+    <div v-else class="space-y-5">
+      <!-- Header -->
+      <div class="flex items-end justify-between gap-4 flex-wrap">
+        <div>
+          <h1 class="text-2xl font-semibold text-gray-100 roboto">Moderation</h1>
+          <p class="text-sm text-gray-500 mt-1">
+            {{ visibleTabs.find(t => t.key === activeTab)?.description }}
+          </p>
+        </div>
+        <div class="text-xs text-gray-500 text-right">
+          Signed in as <span class="text-gray-300">{{ user.username }}</span><br />
+          <span class="font-mono">perms 0x{{ user.permissions.toString(16) }}</span>
+        </div>
+      </div>
+
+      <!-- Tab nav -->
+      <div class="border-b border-main-500 -mx-1">
+        <div class="flex gap-1 overflow-x-auto px-1">
+          <button
+            v-for="t in visibleTabs"
+            :key="t.key"
+            @click="setTab(t.key)"
+            :class="[
+              'px-4 py-2.5 text-sm font-medium rounded-t-md border-b-2 transition-colors cursor-pointer whitespace-nowrap',
+              activeTab === t.key
+                ? 'text-gray-100 border-blue-500 bg-main-800'
+                : 'text-gray-400 border-transparent hover:text-gray-200 hover:bg-main-800/50',
+            ]"
+          >
+            {{ t.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Active tab -->
+      <div>
+        <ActivityTab
+          v-if="activeTab === 'activity'"
+          @inspect-mod="onInspectMod"
+          @inspect-target="onInspectTarget"
+        />
+        <LookupTab v-else-if="activeTab === 'lookup'" :prefill-query="lookupPrefill" />
+        <ModeratorsTab
+          v-else-if="activeTab === 'moderators'"
+          :preselect-steam-id="preselectModSteamId"
+        />
+        <ServerOwnerTab v-else-if="activeTab === 'server-owner'" />
+      </div>
+    </div>
+
+    <BulkSelectionTray />
+  </main>
+</template>

From 20c3ca17dd3355ad88346360ed09fa12b3cf18f1 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Fri, 8 May 2026 18:55:45 -0400
Subject: [PATCH 02/13] show permissions as named badges on profile and
 moderation header

Adds describePermissions() that decodes the bitflag into labeled chips,
plus a shared PermissionBadges component. The moderation header now
shows them in place of the hex value, the lookup tab shows them on
player results, and they appear directly on player profile pages
whenever a user has any permission set.
---
 src/components/Moderation/Panel/LookupTab.vue |  7 ++-
 src/components/PermissionBadges.vue           | 48 ++++++++++++++++++
 src/components/PlayerDetails.vue              |  4 ++
 src/types/moderation.ts                       | 50 +++++++++++++++++--
 src/views/ModerationView.vue                  |  9 ++--
 5 files changed, 108 insertions(+), 10 deletions(-)
 create mode 100644 src/components/PermissionBadges.vue

diff --git a/src/components/Moderation/Panel/LookupTab.vue b/src/components/Moderation/Panel/LookupTab.vue
index 6146979..43cd8cd 100644
--- a/src/components/Moderation/Panel/LookupTab.vue
+++ b/src/components/Moderation/Panel/LookupTab.vue
@@ -7,6 +7,7 @@ import type { User } from '@/types/User'
 import type { Time } from '@/types/Time'
 import ActionBadge from './ActionBadge.vue'
 import RelativeDate from '@/components/RelativeDate.vue'
+import PermissionBadges from '@/components/PermissionBadges.vue'
 
 interface ResolvedPlayer {
   kind: 'player'
@@ -176,8 +177,10 @@ watch(() => props.prefillQuery, (q) => {
           </div>
           <div class="text-xs text-gray-500 font-mono">{{ result.user.steam_id }}</div>
           <div class="text-xs text-gray-500 mt-1">
-            Joined {{ new Date(result.user.created_at * 1000).toLocaleDateString() }} ·
-            Permissions: <span class="font-mono">0x{{ result.user.permissions.toString(16) }}</span>
+            Joined {{ new Date(result.user.created_at * 1000).toLocaleDateString() }}
+          </div>
+          <div class="mt-2">
+            <PermissionBadges :permissions="result.user.permissions" />
           </div>
         </div>
         <a :href="`/players/${result.user.steam_id}`" class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer shrink-0">
diff --git a/src/components/PermissionBadges.vue b/src/components/PermissionBadges.vue
new file mode 100644
index 0000000..095e5e6
--- /dev/null
+++ b/src/components/PermissionBadges.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { describePermissions, permissionRoleLabel, type PermissionTone } from '@/types/moderation'
+
+const props = withDefaults(defineProps<{
+  permissions: number
+  size?: 'sm' | 'md'
+  showRole?: boolean
+}>(), {
+  size: 'sm',
+  showRole: true,
+})
+
+const labels = computed(() => describePermissions(props.permissions))
+const role = computed(() => permissionRoleLabel(props.permissions))
+
+const toneClass: Record<PermissionTone, string> = {
+  red:    'text-red-300 bg-red-900/30 border-red-800/40',
+  purple: 'text-purple-300 bg-purple-900/30 border-purple-800/40',
+  yellow: 'text-yellow-300 bg-yellow-900/30 border-yellow-800/40',
+  blue:   'text-blue-300 bg-blue-900/30 border-blue-800/40',
+  gray:   'text-gray-300 bg-gray-900/30 border-gray-800/40',
+}
+
+const sizeClass = computed(() => {
+  return props.size === 'sm'
+    ? 'px-1.5 py-0.5 text-[10px] tracking-wide'
+    : 'px-2 py-0.5 text-xs tracking-wide'
+})
+</script>
+
+<template>
+  <div v-if="labels.length > 0" class="flex flex-wrap items-center gap-1">
+    <span
+      v-if="showRole && role"
+      :class="['rounded border font-semibold uppercase', sizeClass, toneClass[role === 'Admin' ? 'purple' : role === 'Moderator' ? 'red' : 'purple']]"
+    >
+      {{ role }}
+    </span>
+    <span
+      v-for="l in labels"
+      :key="l.name"
+      :class="['rounded border', sizeClass, toneClass[l.tone]]"
+    >
+      {{ l.name }}
+    </span>
+  </div>
+</template>
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index 322bfbc..410d627 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -17,6 +17,7 @@
   import ModerationModal from './Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
   import TimesListPagination from './TimeLists/TimesListPagination.vue';
+  import PermissionBadges from './PermissionBadges.vue';
 
   const route = useRoute();
   const router = useRouter();
@@ -268,6 +269,9 @@
             >{{ playerName }}</a>
           </h1>
           <div v-if="playerStatus" :class="`text-sm ${playerStatus.class}`">{{ playerStatus.message }}</div>
+          <div v-if="userProfile && userProfile.permissions > 0" class="mt-1.5">
+            <PermissionBadges :permissions="userProfile.permissions" />
+          </div>
         </div>
       </div>
       <button
diff --git a/src/types/moderation.ts b/src/types/moderation.ts
index 8f48dec..0536101 100644
--- a/src/types/moderation.ts
+++ b/src/types/moderation.ts
@@ -65,27 +65,67 @@ export class UserPermissions {
   static readonly BYPASS_RATELIMITS = 1 << 29;
   static readonly CREATE_KEY = 1 << 30;
   static readonly MANAGE_KEYS = 1 << 31;
-  
+
   // Permission groups
   static readonly MODERATOR = UserPermissions.INVALIDATE_TIMES | UserPermissions.BAN_PLAYERS;
   static readonly ADMIN = UserPermissions.MODERATOR | UserPermissions.UNDO_MOD_ACTION | UserPermissions.CREATE_KEY;
   // OWNER would have all permissions
-  
+
   constructor(private value: number) {}
-  
+
   contains(permission: number): boolean {
     return (this.value & permission) === permission;
   }
-  
+
   isModerator(): boolean {
     return this.contains(UserPermissions.MODERATOR);
   }
-  
+
   isAdmin(): boolean {
     return this.contains(UserPermissions.ADMIN);
   }
 }
 
+export type PermissionTone = 'red' | 'purple' | 'yellow' | 'blue' | 'gray'
+
+export interface PermissionLabel {
+  name: string
+  tone: PermissionTone
+}
+
+const KNOWN_FLAGS: Array<[number, PermissionLabel]> = [
+  [UserPermissions.INVALIDATE_TIMES,             { name: 'Invalidate Times',    tone: 'red' }],
+  [UserPermissions.BAN_PLAYERS,                  { name: 'Ban Players',         tone: 'red' }],
+  [UserPermissions.SERVER_OWNER_INVALIDATE_TIMES,{ name: 'Server-Owner Invalidate', tone: 'purple' }],
+  [UserPermissions.UNDO_MOD_ACTION,              { name: 'Reverse Mod Actions', tone: 'purple' }],
+  [UserPermissions.BYPASS_RATELIMITS,            { name: 'Bypass Rate Limits',  tone: 'yellow' }],
+  [UserPermissions.CREATE_KEY,                   { name: 'Create API Keys',     tone: 'blue' }],
+  [UserPermissions.MANAGE_KEYS,                  { name: 'Manage API Keys',     tone: 'blue' }],
+]
+
+export function describePermissions(value: number): PermissionLabel[] {
+  const out: PermissionLabel[] = []
+  let covered = 0
+  for (const [bit, label] of KNOWN_FLAGS) {
+    if ((value & bit) === bit) {
+      out.push(label)
+      covered |= bit
+    }
+  }
+  const rest = value & ~covered
+  if (rest !== 0) {
+    out.push({ name: `Other (0x${rest.toString(16)})`, tone: 'gray' })
+  }
+  return out
+}
+
+export function permissionRoleLabel(value: number): string | null {
+  if ((value & UserPermissions.ADMIN) === UserPermissions.ADMIN) return 'Admin'
+  if ((value & UserPermissions.MODERATOR) === UserPermissions.MODERATOR) return 'Moderator'
+  if ((value & UserPermissions.SERVER_OWNER_INVALIDATE_TIMES) === UserPermissions.SERVER_OWNER_INVALIDATE_TIMES) return 'Server Owner'
+  return null
+}
+
 // Standard API error response
 export interface JsonError {
   error: string;
diff --git a/src/views/ModerationView.vue b/src/views/ModerationView.vue
index 371bce0..986d493 100644
--- a/src/views/ModerationView.vue
+++ b/src/views/ModerationView.vue
@@ -9,6 +9,7 @@ import LookupTab from '@/components/Moderation/Panel/LookupTab.vue'
 import ModeratorsTab from '@/components/Moderation/Panel/ModeratorsTab.vue'
 import ServerOwnerTab from '@/components/Moderation/Panel/ServerOwnerTab.vue'
 import BulkSelectionTray from '@/components/Moderation/Panel/BulkSelectionTray.vue'
+import PermissionBadges from '@/components/PermissionBadges.vue'
 import type { RecentModAction } from '@/types/moderation'
 
 type TabKey = 'activity' | 'lookup' | 'moderators' | 'server-owner'
@@ -115,9 +116,11 @@ onMounted(() => {
             {{ visibleTabs.find(t => t.key === activeTab)?.description }}
           </p>
         </div>
-        <div class="text-xs text-gray-500 text-right">
-          Signed in as <span class="text-gray-300">{{ user.username }}</span><br />
-          <span class="font-mono">perms 0x{{ user.permissions.toString(16) }}</span>
+        <div class="text-xs text-gray-500 sm:text-right">
+          <div>Signed in as <span class="text-gray-300">{{ user.username }}</span></div>
+          <div class="mt-1 sm:flex sm:justify-end">
+            <PermissionBadges :permissions="user.permissions" />
+          </div>
         </div>
       </div>
 

From 33de8bf238e5535603bba377fc509d5db82a1e8c Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Fri, 8 May 2026 19:04:59 -0400
Subject: [PATCH 03/13] decode SERVER_OWNER_EDIT_SERVER and EDIT_SERVERS
 permission bits

---
 src/types/moderation.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/types/moderation.ts b/src/types/moderation.ts
index 0536101..35dc444 100644
--- a/src/types/moderation.ts
+++ b/src/types/moderation.ts
@@ -61,7 +61,9 @@ export class UserPermissions {
   static readonly INVALIDATE_TIMES = 1 << 0;
   static readonly BAN_PLAYERS = 1 << 1;
   static readonly SERVER_OWNER_INVALIDATE_TIMES = 1 << 2;
+  static readonly SERVER_OWNER_EDIT_SERVER = 1 << 3;
   static readonly UNDO_MOD_ACTION = 1 << 15;
+  static readonly EDIT_SERVERS = 1 << 28;
   static readonly BYPASS_RATELIMITS = 1 << 29;
   static readonly CREATE_KEY = 1 << 30;
   static readonly MANAGE_KEYS = 1 << 31;
@@ -97,7 +99,9 @@ const KNOWN_FLAGS: Array<[number, PermissionLabel]> = [
   [UserPermissions.INVALIDATE_TIMES,             { name: 'Invalidate Times',    tone: 'red' }],
   [UserPermissions.BAN_PLAYERS,                  { name: 'Ban Players',         tone: 'red' }],
   [UserPermissions.SERVER_OWNER_INVALIDATE_TIMES,{ name: 'Server-Owner Invalidate', tone: 'purple' }],
+  [UserPermissions.SERVER_OWNER_EDIT_SERVER,     { name: 'Server-Owner Edit',   tone: 'purple' }],
   [UserPermissions.UNDO_MOD_ACTION,              { name: 'Reverse Mod Actions', tone: 'purple' }],
+  [UserPermissions.EDIT_SERVERS,                 { name: 'Edit Servers',        tone: 'blue' }],
   [UserPermissions.BYPASS_RATELIMITS,            { name: 'Bypass Rate Limits',  tone: 'yellow' }],
   [UserPermissions.CREATE_KEY,                   { name: 'Create API Keys',     tone: 'blue' }],
   [UserPermissions.MANAGE_KEYS,                  { name: 'Manage API Keys',     tone: 'blue' }],

From bad54cef1044ea423de3328e2107d05c38fdaf03 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Fri, 8 May 2026 19:35:44 -0400
Subject: [PATCH 04/13] npm audit fix

---
 package-lock.json | 84 ++++++++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c7c5886..64ed94b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -926,10 +926,11 @@
       }
     },
     "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -993,10 +994,11 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1256,10 +1258,11 @@
       }
     },
     "node_modules/@rollup/pluginutils/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -2560,10 +2563,11 @@
       "dev": true
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -3054,10 +3058,11 @@
       }
     },
     "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3314,10 +3319,11 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
-      "dev": true
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/fs-extra": {
       "version": "11.3.0",
@@ -3963,9 +3969,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "dev": true,
       "license": "MIT"
     },
@@ -4378,10 +4384,11 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },
@@ -4402,9 +4409,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.5.tgz",
-      "integrity": "sha512-d/jtm+rdNT8tpXuHY5MMtcbJFBkhXE6593XVR9UoGCH8jSFGci7jGvMGH5RYd5PBJW+00NZQt6gf7CbagJCrhg==",
+      "version": "8.5.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
+      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4419,6 +4426,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4813,9 +4821,10 @@
       }
     },
     "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -4977,9 +4986,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+      "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -5157,9 +5166,10 @@
       }
     },
     "node_modules/vite/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },

From bad7103f111be17a1d29c97fe7a6b1707d846d83 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 18:42:19 -0400
Subject: [PATCH 05/13] wire bulk selection through times lists; retire old
 bulk modal

per-row right-click toggle and visual ring; page select/clear button
in the times list header; tray mounted globally so selections persist
across navigation between maps, players, and the moderation panel.
---
 src/App.vue                                   |   3 +
 .../Moderation/BulkModerationModal.vue        | 306 ------------------
 src/components/TimeLists/TimesList.vue        |  77 ++---
 src/components/TimeLists/TimesListItem.vue    |  39 ++-
 src/views/ModerationView.vue                  |   2 -
 5 files changed, 78 insertions(+), 349 deletions(-)
 delete mode 100644 src/components/Moderation/BulkModerationModal.vue

diff --git a/src/App.vue b/src/App.vue
index 1b02572..7aedfb6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { RouterLink, RouterView } from 'vue-router'
 import { onMounted } from 'vue'
 import AuthButton from '@/components/AuthButton.vue'
+import BulkSelectionTray from '@/components/Moderation/Panel/BulkSelectionTray.vue'
 import IconDiscord from '@/components/icons/IconDiscord.vue'
 import IconYoutube from '@/components/icons/IconYoutube.vue'
 import IconGithub from '@/components/icons/IconGithub.vue'
@@ -44,6 +45,8 @@ onMounted(async () => {
     </header>
     <RouterView class="mb-auto" />
 
+    <BulkSelectionTray v-if="moderationStore.canAccessModerationPanel.value" />
+
     <!-- Footer -->
     <footer class="pt-8">
       <div class="flex flex-col items-center justify-center text-center">
diff --git a/src/components/Moderation/BulkModerationModal.vue b/src/components/Moderation/BulkModerationModal.vue
deleted file mode 100644
index c341d02..0000000
--- a/src/components/Moderation/BulkModerationModal.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { Ref } from 'vue'
-import type { Time } from '@/types/Time'
-import { ModerationActionType } from '@/types/moderation'
-import { useModerationStore } from '@/stores/moderation'
-import IconCheck from '@/components/icons/IconCheck.vue'
-
-const emit = defineEmits(['moderationComplete', 'close'])
-
-const props = defineProps<{
-  times: Time[]
-  show: boolean
-}>()
-
-const moderationStore = useModerationStore()
-
-const selectedRecords: Ref<Set<string>> = ref(new Set())
-const selectedAction: Ref<ModerationActionType | null> = ref(null)
-const reason: Ref<string> = ref('')
-const isSubmitting: Ref<boolean> = ref(false)
-const showSuccess: Ref<boolean> = ref(false)
-const errorMessage: Ref<string> = ref('')
-
-const availableActions = computed(() => {
-  const actions = []
-  if (moderationStore.canInvalidateTimes.value) {
-    actions.push({ action: ModerationActionType.Invalidate, label: 'Invalidate Records' })
-    actions.push({ action: ModerationActionType.Revalidate, label: 'Revalidate Records' })
-  }
-  actions.push({ action: ModerationActionType.Note, label: 'Add Note to Records' })
-  return actions
-})
-
-const validRecords = computed(() => {
-  return props.times.filter(time => time._id)
-})
-
-const canSubmit = computed(() => {
-  return selectedRecords.value.size > 0 &&
-         selectedAction.value &&
-         reason.value.trim().length > 0 &&
-         !isSubmitting.value
-})
-
-const allSelected = computed(() => {
-  return validRecords.value.length > 0 &&
-         selectedRecords.value.size === validRecords.value.length
-})
-
-const someSelected = computed(() => {
-  return selectedRecords.value.size > 0 &&
-         selectedRecords.value.size < validRecords.value.length
-})
-
-const resetForm = () => {
-  selectedRecords.value.clear()
-  selectedAction.value = null
-  reason.value = ''
-  errorMessage.value = ''
-  showSuccess.value = false
-}
-
-const toggleSelectAll = () => {
-  if (allSelected.value) {
-    selectedRecords.value.clear()
-  } else {
-    validRecords.value.forEach(time => {
-      if (time._id) selectedRecords.value.add(time._id)
-    })
-  }
-}
-
-const toggleRecord = (recordId: string) => {
-  if (selectedRecords.value.has(recordId)) {
-    selectedRecords.value.delete(recordId)
-  } else {
-    selectedRecords.value.add(recordId)
-  }
-}
-
-const selectAction = (action: ModerationActionType) => {
-  selectedAction.value = action
-}
-
-const handleSubmit = async () => {
-  if (!canSubmit.value || !selectedAction.value) return
-
-  isSubmitting.value = true
-  errorMessage.value = ''
-
-  try {
-    // Use the moderation store's bulk action method
-    const recordIds = Array.from(selectedRecords.value)
-    await moderationStore.performBulkModerationAction(selectedAction.value, reason.value, recordIds)
-
-    showSuccess.value = true
-
-    // Auto close after success
-    setTimeout(() => {
-      emit('moderationComplete')
-      emit('close')
-    }, 1500)
-
-  } catch (error) {
-    console.error('Bulk moderation failed:', error)
-    errorMessage.value = error instanceof Error ? error.message : 'Unknown error occurred'
-  } finally {
-    isSubmitting.value = false
-  }
-}
-
-const handleClose = () => {
-  emit('close')
-}
-
-const getActionColor = (action: ModerationActionType) => {
-  switch (action) {
-    case ModerationActionType.Invalidate:
-      return 'text-red-400 hover:bg-red-900/20'
-    case ModerationActionType.Revalidate:
-      return 'text-green-400 hover:bg-green-900/20'
-    case ModerationActionType.Note:
-      return 'text-blue-400 hover:bg-blue-900/20'
-    default:
-      return 'text-gray-400 hover:bg-gray-900/20'
-  }
-}
-
-// Reset form when modal opens/closes and handle body scroll
-import { watch, onUnmounted } from 'vue'
-
-// Prevent body scroll when modal is open
-watch(() => props.show, (newShow) => {
-  if (newShow) {
-    resetForm()
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = ''
-  }
-})
-
-// Cleanup on unmount
-onUnmounted(() => {
-  document.body.style.overflow = ''
-})
-</script>
-
-<template>
-  <!-- Modal Overlay -->
-  <div
-    v-if="show"
-    class="fixed inset-0 bg-black/50 flex items-start justify-center z-50 p-4 overflow-y-auto"
-    @click.self="handleClose"
-  >
-    <!-- Modal Content -->
-    <div class="bg-main-800 border border-main-400 rounded-lg shadow-lg w-full max-w-2xl min-h-[600px] my-4 mx-auto">
-      <!-- Header -->
-      <div class="p-4 border-b border-main-400">
-        <h3 class="text-lg font-medium text-gray-200">
-          Bulk Moderate Records
-        </h3>
-        <p class="text-sm text-gray-400 mt-1">Select records and apply moderation actions</p>
-      </div>
-
-      <!-- Success State -->
-      <div v-if="showSuccess" class="p-6 text-center">
-        <div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
-          <IconCheck class="w-6 h-6 text-white" />
-        </div>
-        <p class="text-green-400 font-medium">Bulk moderation completed successfully!</p>
-        <p class="text-gray-400 text-sm mt-2">{{ selectedRecords.size }} record(s) processed</p>
-      </div>
-
-      <!-- Form -->
-      <div v-else>
-        <!-- Record Selection -->
-        <div class="p-4 border-b border-main-400">
-          <div class="flex items-center justify-between mb-3">
-            <label class="text-sm font-medium text-gray-300">
-              Select Records ({{ selectedRecords.size }}/{{ validRecords.length }})
-            </label>
-            <button
-              @click="toggleSelectAll"
-              class="text-xs px-2 py-1 bg-main-600 hover:bg-main-500 text-gray-200 rounded transition-colors cursor-pointer"
-            >
-              {{ allSelected ? 'Deselect All' : 'Select All' }}
-            </button>
-          </div>
-
-          <!-- Master checkbox -->
-          <div class="flex items-center gap-2 mb-2">
-            <input
-              type="checkbox"
-              :checked="allSelected"
-              :indeterminate="someSelected"
-              @change="toggleSelectAll"
-              class="rounded"
-            />
-            <span class="text-sm text-gray-300">Select all records</span>
-          </div>
-        </div>
-
-        <!-- Record List -->
-        <div class="max-h-[300px] overflow-y-auto">
-          <div class="p-4 space-y-2">
-            <div
-              v-for="(time, index) in validRecords"
-              :key="time._id || `record-${index}`"
-              class="flex items-center gap-3 p-2 rounded border border-main-500 hover:border-main-400 transition-colors"
-            >
-              <input
-                type="checkbox"
-                :checked="selectedRecords.has(time._id!)"
-                @change="toggleRecord(time._id!)"
-                class="rounded"
-              />
-              <div class="flex-1 min-w-0">
-                <div class="text-sm text-gray-200 truncate">
-                  {{ time.map }} by {{ time.name }}
-                </div>
-                <div class="text-xs text-gray-400">
-                  Time: {{ time.time.toFixed(3) }}s
-                  <span v-if="time.is_invalid" class="text-yellow-400 ml-2">⚠️ Invalid</span>
-                  <span v-if="time.is_banned" class="text-red-400 ml-2">🚫 Banned</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Action Selection and Form -->
-        <div class="p-4 border-t border-main-400 space-y-4">
-          <!-- Action Selection -->
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-2">
-              Select Action
-            </label>
-            <div class="grid grid-cols-1 gap-1">
-              <button
-                v-for="action in availableActions"
-                :key="action.action"
-                @click="selectAction(action.action)"
-                class="w-full text-left px-3 py-2 rounded border transition-colors cursor-pointer"
-                :class="[
-                  selectedAction === action.action
-                    ? 'border-main-300 bg-main-600'
-                    : 'border-main-500 hover:border-main-400',
-                  getActionColor(action.action)
-                ]"
-              >
-                <div class="flex items-center justify-between">
-                  <span>{{ action.label }}</span>
-                  <div
-                    v-if="selectedAction === action.action"
-                    class="w-4 h-4 bg-main-300 rounded-full flex items-center justify-center"
-                  >
-                    <div class="w-2 h-2 bg-white rounded-full"></div>
-                  </div>
-                </div>
-              </button>
-            </div>
-          </div>
-
-          <!-- Reason Input -->
-          <div>
-            <label for="bulk-reason" class="block text-sm font-medium text-gray-300 mb-2">
-              Reason <span class="text-red-400">*</span>
-            </label>
-            <textarea
-              id="bulk-reason"
-              v-model="reason"
-              rows="2"
-              class="w-full px-3 py-2 bg-main-700 border border-main-500 rounded-md text-gray-200 placeholder-gray-400 focus:outline-none focus:border-main-300"
-              placeholder="Enter reason for bulk moderation..."
-              :disabled="isSubmitting"
-            ></textarea>
-          </div>
-
-          <!-- Error Message -->
-          <div v-if="errorMessage" class="text-red-400 text-sm">
-            {{ errorMessage }}
-          </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="p-4 border-t border-main-400 flex justify-end gap-3">
-          <button
-            @click="handleClose"
-            class="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
-            :disabled="isSubmitting"
-          >
-            Cancel
-          </button>
-          <button
-            @click="handleSubmit"
-            :disabled="!canSubmit"
-            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:bg-red-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
-            {{ isSubmitting ? 'Processing...' : `Apply to ${selectedRecords.size} record${selectedRecords.size !== 1 ? 's' : ''}` }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/TimeLists/TimesList.vue b/src/components/TimeLists/TimesList.vue
index 3e076dd..57e4725 100644
--- a/src/components/TimeLists/TimesList.vue
+++ b/src/components/TimeLists/TimesList.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import type { Ref } from 'vue'
+import { computed } from 'vue'
 import TimesListItem from './TimesListItem.vue';
 import type { Time } from '@/types/Time';
 import type { TimeListColumn } from '@/types/TimeListColumn';
 import TimesListHeading from './TimesListHeading.vue';
-import BulkModerationModal from '../Moderation/BulkModerationModal.vue';
 import { useModerationStore } from '@/stores/moderation';
+import { useBulkSelection } from '@/composables/useBulkSelection';
 
   const props = defineProps<{
       times: Time[],
@@ -16,62 +15,68 @@ import { useModerationStore } from '@/stores/moderation';
   const emit = defineEmits(['refreshData'])
 
   const moderationStore = useModerationStore()
-  const showBulkModal: Ref<boolean> = ref(false)
+  const bulk = useBulkSelection()
 
   const handleRefreshData = () => {
     emit('refreshData')
   }
 
-  const openBulkModeration = () => {
-    showBulkModal.value = true
-  }
+  const pageEntries = computed(() => {
+    return props.times
+      .filter(t => !!t._id)
+      .map(t => ({
+        id: t._id!,
+        label: `${t.name} · ${t.map} · ${t.time.toFixed(3)}s`,
+      }))
+  })
 
-  const closeBulkModeration = () => {
-    showBulkModal.value = false
-  }
+  const pageSelectedCount = computed(() => {
+    return pageEntries.value.filter(e => bulk.has(e.id)).length
+  })
 
-  const handleBulkModerationComplete = () => {
-    emit('refreshData')
-    showBulkModal.value = false
+  const allPageSelected = computed(() => {
+    return pageEntries.value.length > 0 && pageSelectedCount.value === pageEntries.value.length
+  })
+
+  const togglePageSelection = () => {
+    if (allPageSelected.value) {
+      bulk.removeMany(pageEntries.value.map(e => e.id))
+    } else {
+      bulk.addMany(pageEntries.value)
+    }
   }
 </script>
 
 
 <template>
   <div>
-    <!-- Bulk moderation button above header -->
-    <div v-if="moderationStore.canInvalidateTimes.value && props.times.length > 0" 
-         class="flex justify-end mb-2">
+    <div v-if="moderationStore.canAccessModerationPanel.value && pageEntries.length > 0"
+         class="flex items-center justify-end gap-3 mb-2 text-sm">
+      <span v-if="pageSelectedCount > 0" class="text-gray-400">
+        {{ pageSelectedCount }} of {{ pageEntries.length }} selected
+      </span>
       <button
-        @click="openBulkModeration"
-        class="px-3 py-1 bg-main-700 hover:bg-main-600 border border-main-500 text-gray-200 text-sm rounded transition-colors whitespace-nowrap cursor-pointer"
+        @click="togglePageSelection"
+        class="px-3 py-1 bg-main-700 hover:bg-main-600 border border-main-500 text-gray-200 rounded transition-colors whitespace-nowrap cursor-pointer"
       >
-        Bulk Moderate
+        {{ allPageSelected ? 'Clear page' : 'Select page' }}
       </button>
     </div>
-    
+
     <!-- Header -->
     <div>
       <TimesListHeading :cols="props.cols"></TimesListHeading>
     </div>
-    
+
     <!-- Times list -->
-    <TimesListItem 
-      v-for="(time,index) in props.times" 
-      :key="index" 
-      :placement="index+1" 
-      :time="time" 
-      :cols="props.cols" 
+    <TimesListItem
+      v-for="(time,index) in props.times"
+      :key="index"
+      :placement="index+1"
+      :time="time"
+      :cols="props.cols"
       :wrTime="props.times[0]"
       @refresh-data="handleRefreshData"
     ></TimesListItem>
-
-    <!-- Bulk Moderation Modal -->
-    <BulkModerationModal
-      :times="props.times"
-      :show="showBulkModal"
-      @moderationComplete="handleBulkModerationComplete"
-      @close="closeBulkModeration"
-    />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/TimeLists/TimesListItem.vue b/src/components/TimeLists/TimesListItem.vue
index b0208a5..e925b46 100644
--- a/src/components/TimeLists/TimesListItem.vue
+++ b/src/components/TimeLists/TimesListItem.vue
@@ -7,6 +7,7 @@
   import TimesListItemMoreDetails from './TimesListItemMoreDetails.vue';
   import ModerationModal from '../Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
+  import { useBulkSelection } from '@/composables/useBulkSelection';
 
   const props = defineProps<{
       time: Time,
@@ -18,6 +19,7 @@
   const emit = defineEmits(['refreshData']);
 
   const moderationStore = useModerationStore();
+  const bulk = useBulkSelection();
   const showModerationModal: Ref<boolean> = ref(false);
 
   // Context menu state
@@ -25,6 +27,18 @@
   const contextMenuX: Ref<number> = ref(0);
   const contextMenuY: Ref<number> = ref(0);
 
+  const isSelected = computed(() => !!props.time._id && bulk.has(props.time._id));
+
+  const bulkLabel = computed(() => {
+    const t = props.time;
+    return `${t.name} · ${t.map} · ${t.time.toFixed(3)}s`;
+  });
+
+  const toggleBulkSelection = () => {
+    if (!props.time._id) return;
+    bulk.toggle({ id: props.time._id, label: bulkLabel.value });
+  };
+
   const totalRows = computed(()=>{
     return Math.max(...props.cols.map((v)=>(v.row ?? 1) + (v.rowSpan ?? 1) - 1));
   })
@@ -115,6 +129,11 @@
     closeContextMenu();
   }
 
+  const handleContextBulkToggle = () => {
+    toggleBulkSelection();
+    closeContextMenu();
+  }
+
   const handleDocumentClick = () => {
     if (showContextMenu.value) {
       closeContextMenu();
@@ -132,11 +151,13 @@
 
 
 <template>
-  <div class="transition-[padding border-color background-color] duration-200 border-b hover:bg-main-500 group"
-  :class="showDetails ?
-    'bg-main-500':
-    'bg-main-600 odd:bg-main-700 hover:border-gray-400 border-transparent border-gray-400 hover:border-gray-200'
-  ">
+  <div class="transition-[padding border-color background-color] duration-200 border-b hover:bg-main-500 group relative"
+  :class="[
+    showDetails
+      ? 'bg-main-500'
+      : 'bg-main-600 odd:bg-main-700 hover:border-gray-400 border-transparent border-gray-400 hover:border-gray-200',
+    isSelected ? 'ring-1 ring-blue-500/50 ring-inset' : '',
+  ]">
     <div class="grid os-grid-cols-auto p-1.5 px-1
        cursor-pointer transition-[padding border-color background-color] duration-200  hover:pb-2.5 relative"
     :class="showDetails ?
@@ -169,6 +190,14 @@
         <span class="text-xs">⚙️</span>
         <span>Moderate Record</span>
       </button>
+      <button
+        v-if="time._id"
+        @click="handleContextBulkToggle"
+        class="w-full px-3 py-2 text-left text-gray-200 hover:bg-main-700 transition-colors cursor-pointer flex items-center gap-2"
+      >
+        <span class="text-xs">{{ isSelected ? '☑' : '☐' }}</span>
+        <span>{{ isSelected ? 'Remove from selection' : 'Add to selection' }}</span>
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/views/ModerationView.vue b/src/views/ModerationView.vue
index 986d493..6279a45 100644
--- a/src/views/ModerationView.vue
+++ b/src/views/ModerationView.vue
@@ -8,7 +8,6 @@ import ActivityTab from '@/components/Moderation/Panel/ActivityTab.vue'
 import LookupTab from '@/components/Moderation/Panel/LookupTab.vue'
 import ModeratorsTab from '@/components/Moderation/Panel/ModeratorsTab.vue'
 import ServerOwnerTab from '@/components/Moderation/Panel/ServerOwnerTab.vue'
-import BulkSelectionTray from '@/components/Moderation/Panel/BulkSelectionTray.vue'
 import PermissionBadges from '@/components/PermissionBadges.vue'
 import type { RecentModAction } from '@/types/moderation'
 
@@ -159,6 +158,5 @@ onMounted(() => {
       </div>
     </div>
 
-    <BulkSelectionTray />
   </main>
 </template>

From 1923d2ff7fcf40183b465616974b903a3bf7e044 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 18:42:41 -0400
Subject: [PATCH 06/13] fix server-owner invalid-id counter and surface
 offending tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

old counter split on a single space-or-comma, while the parser used
[\s,]+ — pasting "id1, id2" reported a phantom invalid token. tokenize
once, derive valid/invalid from the same source, and show the first
few rejected tokens so the moderator can see what to fix.
---
 .../Moderation/Panel/ServerOwnerTab.vue       | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/Moderation/Panel/ServerOwnerTab.vue b/src/components/Moderation/Panel/ServerOwnerTab.vue
index 512719b..be85416 100644
--- a/src/components/Moderation/Panel/ServerOwnerTab.vue
+++ b/src/components/Moderation/Panel/ServerOwnerTab.vue
@@ -16,11 +16,19 @@ const error: Ref<string> = ref('')
 const success: Ref<string> = ref('')
 const showConfirm: Ref<boolean> = ref(false)
 
-const parsedIds = computed(() => {
+const tokens = computed(() => {
   return idsRaw.value
     .split(/[\s,]+/)
     .map(s => s.trim())
-    .filter(s => /^[a-f0-9]{24}$/i.test(s))
+    .filter(s => s.length > 0)
+})
+
+const parsedIds = computed(() => {
+  return tokens.value.filter(s => /^[a-f0-9]{24}$/i.test(s))
+})
+
+const invalidTokens = computed(() => {
+  return tokens.value.filter(s => !/^[a-f0-9]{24}$/i.test(s))
 })
 
 const dedupedIds = computed(() => {
@@ -103,8 +111,18 @@ const confirmRows = computed<ConfirmRow[]>(() => [
           placeholder="Paste ObjectIds — comma, space, or newline separated"
           class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
         />
-        <div class="flex justify-between text-xs mt-1">
-          <span class="text-gray-500">{{ parsedIds.length }} valid · {{ idsRaw.split(/\s|,/).filter(s => s.trim()).length - parsedIds.length }} invalid</span>
+        <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
+          <span class="text-gray-500">
+            {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
+          </span>
+        </div>
+        <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
+          <span
+            v-for="t in invalidTokens.slice(0, 8)"
+            :key="t"
+            class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
+          >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
+          <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
         </div>
       </div>
 

From c366d6a4c01cd6693be5dcb6bc319e13ae535932 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 18:44:12 -0400
Subject: [PATCH 07/13] add username search and url query deep-link to lookup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

unknown queries now go through autocomplete_players: a single match
auto-resolves to the profile, multiple matches present a candidate
picker. lookup writes the active query to ?q= on submit and reads it
back on mount, so /moderation?tab=lookup&q=… is shareable from chat.
---
 src/components/Moderation/Panel/LookupTab.vue | 106 ++++++++++++++----
 1 file changed, 82 insertions(+), 24 deletions(-)

diff --git a/src/components/Moderation/Panel/LookupTab.vue b/src/components/Moderation/Panel/LookupTab.vue
index 43cd8cd..f56f3d4 100644
--- a/src/components/Moderation/Panel/LookupTab.vue
+++ b/src/components/Moderation/Panel/LookupTab.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import type { Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useModerationStore } from '@/stores/moderation'
 import OffstylesApi from '@/api/offstylesApi'
 import type { User } from '@/types/User'
@@ -24,52 +25,69 @@ interface ResolvedRef {
   ref_id: string
   logs: { actions: Array<{ action: string; timestamp: number; notes?: string; mod: { username: string; steam_id: string; avatar_url?: string } }> }
 }
-type Resolved = ResolvedPlayer | ResolvedRecord | ResolvedRef
+interface ResolvedCandidates {
+  kind: 'candidates'
+  candidates: Array<{ username: string; steam_id: string }>
+}
+type Resolved = ResolvedPlayer | ResolvedRecord | ResolvedRef | ResolvedCandidates
 
 const props = defineProps<{
   prefillQuery?: string
 }>()
 
+const route = useRoute()
+const router = useRouter()
 const moderationStore = useModerationStore()
 
-const query: Ref<string> = ref(props.prefillQuery ?? '')
+const query: Ref<string> = ref(props.prefillQuery ?? (route.query.q as string) ?? '')
 const isLoading: Ref<boolean> = ref(false)
 const error: Ref<string> = ref('')
 const result: Ref<Resolved | null> = ref(null)
 
 // Steam IDs are 17-digit numbers starting with 7656119; record/ref IDs are
-// 24-character hex (Mongo ObjectId). Anything else is treated as ambiguous
-// and we'll try the mod-log lookup first, falling back to time lookup.
-const detectKind = (raw: string): 'steam' | 'oid' | 'unknown' => {
+// 24-character hex (Mongo ObjectId). Anything else is treated as a username
+// and routed through autocomplete_players.
+type Kind = 'steam' | 'oid' | 'name'
+const detectKind = (raw: string): Kind => {
   const s = raw.trim()
   if (/^7656119\d{10}$/.test(s)) return 'steam'
   if (/^[a-f0-9]{24}$/i.test(s)) return 'oid'
-  return 'unknown'
+  return 'name'
 }
 
 const detected = computed(() => detectKind(query.value))
 
+const syncQueryToUrl = (q: string) => {
+  const next = q ? { ...route.query, q } : { ...route.query, q: undefined }
+  router.replace({ query: next }).catch(() => {})
+}
+
+const resolveSteam = async (steamId: string): Promise<ResolvedPlayer> => {
+  const user = await OffstylesApi.getUserProfile(steamId)
+  let logs: ResolvedPlayer['logs'] = null
+  if (user.ban_ref) {
+    try {
+      const r = await moderationStore.getModerationLogs(user.ban_ref)
+      logs = { actions: (r.actions || []).sort((a, b) => b.timestamp - a.timestamp) }
+    } catch {
+      logs = null
+    }
+  }
+  return { kind: 'player', user, logs }
+}
+
 const lookup = async () => {
   const q = query.value.trim()
   if (!q) return
   isLoading.value = true
   error.value = ''
   result.value = null
+  syncQueryToUrl(q)
 
   try {
     const kind = detectKind(q)
     if (kind === 'steam') {
-      const user = await OffstylesApi.getUserProfile(q)
-      let logs: ResolvedPlayer['logs'] = null
-      if (user.ban_ref) {
-        try {
-          const r = await moderationStore.getModerationLogs(user.ban_ref)
-          logs = { actions: (r.actions || []).sort((a, b) => b.timestamp - a.timestamp) }
-        } catch {
-          logs = null
-        }
-      }
-      result.value = { kind: 'player', user, logs }
+      result.value = await resolveSteam(q)
     } else if (kind === 'oid') {
       // Try as a record ID first; if that fails, treat as a mod-log ref.
       try {
@@ -93,7 +111,19 @@ const lookup = async () => {
         }
       }
     } else {
-      throw new Error('Enter a 17-digit Steam ID or a 24-char ObjectId.')
+      const matches = await OffstylesApi.getPlayersForAutoComplete(q)
+      if (matches.length === 0) {
+        throw new Error(`No players match "${q}". Try a Steam ID or 24-char ObjectId.`)
+      }
+      if (matches.length === 1) {
+        const [, steamId] = matches[0]
+        result.value = await resolveSteam(steamId)
+      } else {
+        result.value = {
+          kind: 'candidates',
+          candidates: matches.slice(0, 12).map(([username, steam_id]) => ({ username, steam_id })),
+        }
+      }
     }
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'Lookup failed'
@@ -102,20 +132,26 @@ const lookup = async () => {
   }
 }
 
+const pickCandidate = async (steamId: string) => {
+  query.value = steamId
+  await lookup()
+}
+
 const reset = () => {
   query.value = ''
   result.value = null
   error.value = ''
+  syncQueryToUrl('')
 }
 
 onMounted(() => {
-  if (props.prefillQuery && detectKind(props.prefillQuery) !== 'unknown') {
+  if (query.value) {
     lookup()
   }
 })
 
 watch(() => props.prefillQuery, (q) => {
-  if (q && detectKind(q) !== 'unknown') {
+  if (q) {
     query.value = q
     lookup()
   }
@@ -128,15 +164,15 @@ watch(() => props.prefillQuery, (q) => {
       <div>
         <label class="text-xs text-gray-400 uppercase tracking-wide">Lookup</label>
         <p class="text-sm text-gray-500 mt-1">
-          Paste a Steam ID, run ID, or moderation log reference. Type is detected automatically.
+          Search by username, Steam ID, run ID, or moderation log reference. Type is detected automatically.
         </p>
       </div>
       <div class="flex gap-2">
         <input
           v-model="query"
           type="text"
-          placeholder="76561198… or 24-char hex"
-          class="flex-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 placeholder-gray-500 focus:outline-none focus:border-main-300 font-mono text-sm"
+          placeholder="username, 76561198…, or 24-char hex"
+          class="flex-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 placeholder-gray-500 focus:outline-none focus:border-main-300 text-sm"
           @keyup.enter="lookup"
         />
         <button
@@ -158,7 +194,7 @@ watch(() => props.prefillQuery, (q) => {
         Detected:
         <span v-if="detected === 'steam'" class="text-blue-300">Steam ID (player profile)</span>
         <span v-else-if="detected === 'oid'" class="text-emerald-300">ObjectId (run or mod-log ref)</span>
-        <span v-else class="text-gray-500">unrecognized — search will reject</span>
+        <span v-else class="text-yellow-300">username (autocomplete search)</span>
       </div>
     </div>
 
@@ -166,6 +202,28 @@ watch(() => props.prefillQuery, (q) => {
       {{ error }}
     </div>
 
+    <!-- Username candidates -->
+    <div v-if="result?.kind === 'candidates'" class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+      <div class="px-4 py-2 border-b border-main-500 flex items-center justify-between">
+        <div class="text-xs text-gray-400 uppercase tracking-wide">Multiple matches — pick one</div>
+        <div class="text-xs text-gray-500">{{ result.candidates.length }} result{{ result.candidates.length === 1 ? '' : 's' }}</div>
+      </div>
+      <div>
+        <button
+          v-for="c in result.candidates"
+          :key="c.steam_id"
+          @click="pickCandidate(c.steam_id)"
+          class="w-full text-left px-4 py-2.5 flex items-center gap-3 border-b border-main-500/40 last:border-b-0 hover:bg-main-700/50 cursor-pointer"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="text-sm text-gray-200 truncate">{{ c.username }}</div>
+            <div class="text-xs text-gray-500 font-mono truncate">{{ c.steam_id }}</div>
+          </div>
+          <span class="text-xs text-gray-500">→</span>
+        </button>
+      </div>
+    </div>
+
     <!-- Player result -->
     <div v-if="result?.kind === 'player'" class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
       <div class="p-4 border-b border-main-500 flex items-start gap-3">

From b13f15671f8d49f5a225f3cf9d0f6148736ad842 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 18:45:25 -0400
Subject: [PATCH 08/13] rework activity tab: honest stats, moderator and action
 filters, density toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

old kpis silently summarized "the last 20" while labelling cards "in
last 24h" / "restrictive" / "permissive" — misleading on busy days.
replaced with a single header that names the cap and a per-action-
type breakdown. added moderator and action multi-select filters
(persisted via localStorage), a comfortable/compact density toggle,
and a non-empty filtered-empty state with a clear-filters shortcut.
keyOf now includes the row index to avoid collisions on dup actions.
---
 .../Moderation/Panel/ActivityTab.vue          | 307 ++++++++++++++----
 1 file changed, 246 insertions(+), 61 deletions(-)

diff --git a/src/components/Moderation/Panel/ActivityTab.vue b/src/components/Moderation/Panel/ActivityTab.vue
index 652491c..d74e2f3 100644
--- a/src/components/Moderation/Panel/ActivityTab.vue
+++ b/src/components/Moderation/Panel/ActivityTab.vue
@@ -6,7 +6,26 @@ import { ModerationTargetFilter, ModerationActionType, type RecentModAction } fr
 import ActionBadge from './ActionBadge.vue'
 import RelativeDate from '@/components/RelativeDate.vue'
 
-type Filter = ModerationTargetFilter | 'All'
+type TargetFilter = ModerationTargetFilter | 'All'
+type Density = 'compact' | 'comfortable'
+
+const STORAGE_KEY = 'mod-activity-prefs-v1'
+interface Prefs {
+  density: Density
+  targetFilter: TargetFilter
+  modIds: string[]
+  actionTypes: string[]
+}
+const loadPrefs = (): Prefs => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return { density: 'comfortable', targetFilter: 'All', modIds: [], actionTypes: [] }
+    return { density: 'comfortable', targetFilter: 'All', modIds: [], actionTypes: [], ...JSON.parse(raw) }
+  } catch {
+    return { density: 'comfortable', targetFilter: 'All', modIds: [], actionTypes: [] }
+  }
+}
+const initialPrefs = loadPrefs()
 
 const emit = defineEmits<{
   inspectMod: [steamId: string]
@@ -15,20 +34,39 @@ const emit = defineEmits<{
 
 const moderationStore = useModerationStore()
 
-const filter: Ref<Filter> = ref('All')
+const targetFilter: Ref<TargetFilter> = ref(initialPrefs.targetFilter)
+const selectedModIds: Ref<Set<string>> = ref(new Set(initialPrefs.modIds))
+const selectedActionTypes: Ref<Set<string>> = ref(new Set(initialPrefs.actionTypes))
+const density: Ref<Density> = ref(initialPrefs.density)
+const showFilters: Ref<boolean> = ref(false)
+
 const logs: Ref<RecentModAction[]> = ref([])
 const isLoading: Ref<boolean> = ref(false)
 const lastLoaded: Ref<number | null> = ref(null)
 const expandedKeys: Ref<Set<string>> = ref(new Set())
 
-const filterToParam = (f: Filter): ModerationTargetFilter | undefined => {
+const persistPrefs = () => {
+  try {
+    const p: Prefs = {
+      density: density.value,
+      targetFilter: targetFilter.value,
+      modIds: Array.from(selectedModIds.value),
+      actionTypes: Array.from(selectedActionTypes.value),
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(p))
+  } catch { /* storage full or disabled */ }
+}
+
+watch([density, targetFilter, selectedModIds, selectedActionTypes], persistPrefs, { deep: true })
+
+const filterToParam = (f: TargetFilter): ModerationTargetFilter | undefined => {
   return f === 'All' ? undefined : f
 }
 
 const load = async () => {
   isLoading.value = true
   try {
-    const data = await moderationStore.getRecentModerationLogs(filterToParam(filter.value))
+    const data = await moderationStore.getRecentModerationLogs(filterToParam(targetFilter.value))
     logs.value = data.sort((a, b) => b.timestamp - a.timestamp)
     lastLoaded.value = Date.now()
   } catch (e) {
@@ -39,7 +77,7 @@ const load = async () => {
   }
 }
 
-watch(filter, load)
+watch(targetFilter, load)
 
 const onVisibility = () => {
   if (document.visibilityState === 'visible') {
@@ -59,29 +97,75 @@ onUnmounted(() => {
   window.removeEventListener('focus', onVisibility)
 })
 
-const stats = computed(() => {
-  const since24h = Date.now() - 24 * 3600_000
-  const recent = logs.value.filter(l => l.timestamp >= since24h)
-  const mods = new Set(logs.value.map(l => l.moderator_steam_id))
-  const counts = { ban: 0, invalidate: 0, unban: 0, revalidate: 0, note: 0 }
+const ALL_ACTION_TYPES = [
+  ModerationActionType.Ban,
+  ModerationActionType.Unban,
+  ModerationActionType.Invalidate,
+  ModerationActionType.Revalidate,
+  ModerationActionType.Note,
+] as const
+
+const moderatorOptions = computed(() => {
+  const seen = new Map<string, { steam_id: string; name: string; count: number }>()
   for (const l of logs.value) {
-    const k = l.action.toLowerCase() as keyof typeof counts
-    if (k in counts) counts[k]++
+    const cur = seen.get(l.moderator_steam_id)
+    if (cur) cur.count++
+    else seen.set(l.moderator_steam_id, { steam_id: l.moderator_steam_id, name: l.moderator_name, count: 1 })
   }
-  return {
-    total: logs.value.length,
-    in24h: recent.length,
-    activeMods: mods.size,
-    counts,
+  return Array.from(seen.values()).sort((a, b) => b.count - a.count)
+})
+
+const filteredLogs = computed(() => {
+  return logs.value.filter(l => {
+    if (selectedModIds.value.size > 0 && !selectedModIds.value.has(l.moderator_steam_id)) return false
+    if (selectedActionTypes.value.size > 0 && !selectedActionTypes.value.has(l.action)) return false
+    return true
+  })
+})
+
+const counts = computed(() => {
+  const c = { ban: 0, unban: 0, invalidate: 0, revalidate: 0, note: 0 }
+  for (const l of logs.value) {
+    const k = l.action.toLowerCase() as keyof typeof c
+    if (k in c) c[k]++
   }
+  return c
+})
+
+const activeModCount = computed(() => moderatorOptions.value.length)
+
+const totalIsCapped = computed(() => logs.value.length >= 20)
+
+const toggleMod = (id: string) => {
+  if (selectedModIds.value.has(id)) selectedModIds.value.delete(id)
+  else selectedModIds.value.add(id)
+  selectedModIds.value = new Set(selectedModIds.value)
+}
+
+const toggleAction = (a: string) => {
+  if (selectedActionTypes.value.has(a)) selectedActionTypes.value.delete(a)
+  else selectedActionTypes.value.add(a)
+  selectedActionTypes.value = new Set(selectedActionTypes.value)
+}
+
+const clearFilters = () => {
+  selectedModIds.value = new Set()
+  selectedActionTypes.value = new Set()
+  targetFilter.value = 'All'
+}
+
+const filtersActive = computed(() => {
+  return selectedModIds.value.size > 0
+      || selectedActionTypes.value.size > 0
+      || targetFilter.value !== 'All'
 })
 
-const keyOf = (a: RecentModAction) => `${a.timestamp}:${a.target_id}:${a.action}`
+const keyOf = (a: RecentModAction, i: number) => `${i}:${a.timestamp}:${a.target_id}:${a.action}`
 
-const toggleExpand = (a: RecentModAction) => {
-  const k = keyOf(a)
+const toggleExpand = (k: string) => {
   if (expandedKeys.value.has(k)) expandedKeys.value.delete(k)
   else expandedKeys.value.add(k)
+  expandedKeys.value = new Set(expandedKeys.value)
 }
 
 const isDestructive = (action: ModerationActionType | string) => {
@@ -92,46 +176,96 @@ const isDestructive = (action: ModerationActionType | string) => {
 
 <template>
   <div class="space-y-4">
-    <!-- Stats header -->
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
-        <div class="text-xs text-gray-400 uppercase tracking-wide">Recent actions</div>
-        <div class="text-2xl font-semibold text-gray-100 mt-1">{{ stats.total }}</div>
-        <div class="text-xs text-gray-500 mt-0.5">last 20 site-wide</div>
-      </div>
-      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
-        <div class="text-xs text-gray-400 uppercase tracking-wide">In last 24h</div>
-        <div class="text-2xl font-semibold text-gray-100 mt-1">{{ stats.in24h }}</div>
-        <div class="text-xs text-gray-500 mt-0.5">{{ stats.activeMods }} mod{{ stats.activeMods === 1 ? '' : 's' }} active</div>
-      </div>
-      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
-        <div class="text-xs text-gray-400 uppercase tracking-wide">Restrictive</div>
-        <div class="text-2xl font-semibold text-red-300 mt-1">{{ stats.counts.ban + stats.counts.invalidate }}</div>
-        <div class="text-xs text-gray-500 mt-0.5">{{ stats.counts.ban }} ban · {{ stats.counts.invalidate }} invalidate</div>
-      </div>
-      <div class="bg-main-800 border border-main-500 rounded-lg p-3">
-        <div class="text-xs text-gray-400 uppercase tracking-wide">Permissive</div>
-        <div class="text-2xl font-semibold text-green-300 mt-1">{{ stats.counts.unban + stats.counts.revalidate }}</div>
-        <div class="text-xs text-gray-500 mt-0.5">{{ stats.counts.note }} note{{ stats.counts.note === 1 ? '' : 's' }}</div>
+    <!-- Stats: honest about the 20-action window -->
+    <div class="bg-main-800 border border-main-500 rounded-lg p-3 sm:p-4">
+      <div class="flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <div class="text-xs text-gray-400 uppercase tracking-wide">Recent moderation activity</div>
+          <div class="text-sm text-gray-300 mt-0.5">
+            <span class="text-gray-100 font-medium">{{ logs.length }}</span>
+            action{{ logs.length === 1 ? '' : 's' }}<span v-if="totalIsCapped"> (most recent — site cap)</span>
+            · <span class="text-gray-100 font-medium">{{ activeModCount }}</span>
+            mod{{ activeModCount === 1 ? '' : 's' }} appeared
+          </div>
+        </div>
+        <div class="grid grid-cols-5 gap-2 text-center">
+          <div>
+            <div class="text-base font-semibold text-red-300">{{ counts.ban }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-gray-500">Ban</div>
+          </div>
+          <div>
+            <div class="text-base font-semibold text-red-300">{{ counts.invalidate }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-gray-500">Invl</div>
+          </div>
+          <div>
+            <div class="text-base font-semibold text-green-300">{{ counts.unban }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-gray-500">Unban</div>
+          </div>
+          <div>
+            <div class="text-base font-semibold text-green-300">{{ counts.revalidate }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-gray-500">Reval</div>
+          </div>
+          <div>
+            <div class="text-base font-semibold text-blue-300">{{ counts.note }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-gray-500">Note</div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <!-- Filter + refresh -->
+    <!-- Filter row -->
     <div class="flex items-center justify-between gap-3 flex-wrap">
-      <div class="flex gap-1">
+      <div class="flex flex-wrap items-center gap-2">
+        <div class="flex gap-1">
+          <button
+            v-for="f in (['All', ModerationTargetFilter.Player, ModerationTargetFilter.Record] as TargetFilter[])"
+            :key="f"
+            @click="targetFilter = f"
+            :class="[
+              'px-3 py-1.5 text-sm rounded-md transition-colors cursor-pointer border',
+              targetFilter === f
+                ? 'bg-main-600 text-white border-main-300'
+                : 'bg-main-800 text-gray-300 border-main-500 hover:border-main-400',
+            ]"
+          >
+            {{ f }}
+          </button>
+        </div>
         <button
-          v-for="f in (['All', ModerationTargetFilter.Player, ModerationTargetFilter.Record] as Filter[])"
-          :key="f"
-          @click="filter = f"
+          @click="showFilters = !showFilters"
           :class="[
-            'px-3 py-1.5 text-sm rounded-md transition-colors cursor-pointer border',
-            filter === f
-              ? 'bg-main-600 text-white border-main-300'
+            'px-3 py-1.5 text-sm rounded-md border cursor-pointer transition-colors',
+            filtersActive
+              ? 'bg-blue-600/20 text-blue-200 border-blue-500/60'
               : 'bg-main-800 text-gray-300 border-main-500 hover:border-main-400',
           ]"
         >
-          {{ f }}
+          Filters{{ (selectedModIds.size + selectedActionTypes.size) > 0 ? ` · ${selectedModIds.size + selectedActionTypes.size}` : '' }}
+          <span class="ml-1 text-xs">{{ showFilters ? '▾' : '▸' }}</span>
         </button>
+        <button
+          v-if="filtersActive"
+          @click="clearFilters"
+          class="px-2 py-1 text-xs text-gray-400 hover:text-gray-200 cursor-pointer"
+        >
+          Clear
+        </button>
+        <div class="flex gap-1 ml-2 border-l border-main-500 pl-2">
+          <button
+            v-for="d in (['comfortable', 'compact'] as Density[])"
+            :key="d"
+            @click="density = d"
+            :title="`Density: ${d}`"
+            :class="[
+              'px-2 py-1.5 text-xs rounded border cursor-pointer transition-colors',
+              density === d
+                ? 'bg-main-600 text-white border-main-300'
+                : 'bg-main-800 text-gray-400 border-main-500 hover:border-main-400',
+            ]"
+          >
+            {{ d === 'comfortable' ? '▤' : '☰' }}
+          </button>
+        </div>
       </div>
       <div class="flex items-center gap-3">
         <span v-if="lastLoaded" class="text-xs text-gray-500">
@@ -147,6 +281,50 @@ const isDestructive = (action: ModerationActionType | string) => {
       </div>
     </div>
 
+    <!-- Filter panel -->
+    <div v-if="showFilters" class="bg-main-800 border border-main-500 rounded-lg p-3 space-y-3">
+      <div>
+        <div class="text-xs text-gray-400 uppercase tracking-wide mb-2">Action type</div>
+        <div class="flex flex-wrap gap-1">
+          <button
+            v-for="a in ALL_ACTION_TYPES"
+            :key="a"
+            @click="toggleAction(a)"
+            :class="[
+              'px-2 py-1 text-xs rounded border cursor-pointer transition-colors',
+              selectedActionTypes.has(a)
+                ? 'bg-main-600 border-main-300 text-white'
+                : 'bg-main-700 border-main-500 text-gray-300 hover:border-main-400',
+            ]"
+          >
+            {{ a }}
+          </button>
+        </div>
+      </div>
+      <div>
+        <div class="text-xs text-gray-400 uppercase tracking-wide mb-2">
+          Moderator
+          <span v-if="moderatorOptions.length === 0" class="normal-case text-gray-500 lowercase">— none in current data</span>
+        </div>
+        <div class="flex flex-wrap gap-1">
+          <button
+            v-for="m in moderatorOptions"
+            :key="m.steam_id"
+            @click="toggleMod(m.steam_id)"
+            :class="[
+              'px-2 py-1 text-xs rounded border cursor-pointer transition-colors flex items-center gap-1.5',
+              selectedModIds.has(m.steam_id)
+                ? 'bg-main-600 border-main-300 text-white'
+                : 'bg-main-700 border-main-500 text-gray-300 hover:border-main-400',
+            ]"
+          >
+            <span>{{ m.name }}</span>
+            <span class="text-[10px] text-gray-400">{{ m.count }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- Feed -->
     <div v-if="isLoading && logs.length === 0" class="text-center py-12 text-gray-500">
       Loading recent activity…
@@ -154,24 +332,31 @@ const isDestructive = (action: ModerationActionType | string) => {
     <div v-else-if="logs.length === 0" class="text-center py-12 text-gray-500">
       No moderation activity in this window.
     </div>
-    <div v-else class="space-y-2">
+    <div v-else-if="filteredLogs.length === 0" class="text-center py-12 text-gray-500">
+      No actions match the current filters.
+      <button @click="clearFilters" class="ml-2 text-blue-400 hover:underline cursor-pointer">Clear filters</button>
+    </div>
+    <div v-else :class="density === 'compact' ? 'space-y-1' : 'space-y-2'">
       <div
-        v-for="entry in logs"
-        :key="keyOf(entry)"
+        v-for="(entry, i) in filteredLogs"
+        :key="keyOf(entry, i)"
         class="bg-main-800 border border-main-500 rounded-lg overflow-hidden hover:border-main-400 transition-colors"
       >
         <button
-          @click="toggleExpand(entry)"
-          class="w-full text-left p-3 flex items-start gap-3 cursor-pointer"
+          @click="toggleExpand(keyOf(entry, i))"
+          :class="[
+            'w-full text-left flex items-center gap-3 cursor-pointer',
+            density === 'compact' ? 'px-3 py-1.5' : 'p-3',
+          ]"
         >
-          <ActionBadge :action="entry.action" />
+          <ActionBadge :action="entry.action" :size="density === 'compact' ? 'sm' : 'md'" />
           <span
             class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded border shrink-0"
             :class="entry.target_type === 'Player'
               ? 'text-blue-300 border-blue-800/40 bg-blue-900/20'
               : 'text-emerald-300 border-emerald-800/40 bg-emerald-900/20'"
           >
-            {{ entry.target_type }}
+            {{ entry.target_type === 'Player' ? 'P' : 'R' }}
           </span>
           <div class="flex-1 min-w-0">
             <div class="text-sm text-gray-200 truncate">
@@ -179,7 +364,7 @@ const isDestructive = (action: ModerationActionType | string) => {
               <span class="text-gray-500"> by </span>
               <span class="text-gray-300">{{ entry.moderator_name }}</span>
             </div>
-            <div v-if="entry.notes" class="text-xs text-gray-500 truncate mt-0.5">
+            <div v-if="density === 'comfortable' && entry.notes" class="text-xs text-gray-500 truncate mt-0.5">
               "{{ entry.notes }}"
             </div>
           </div>
@@ -189,7 +374,7 @@ const isDestructive = (action: ModerationActionType | string) => {
         </button>
 
         <!-- Expanded detail -->
-        <div v-if="expandedKeys.has(keyOf(entry))" class="border-t border-main-500/60 bg-main-900/50 p-4 space-y-3">
+        <div v-if="expandedKeys.has(keyOf(entry, i))" class="border-t border-main-500/60 bg-main-900/50 p-4 space-y-3">
           <div class="grid sm:grid-cols-2 gap-3 text-sm">
             <div>
               <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Target</div>
@@ -215,8 +400,8 @@ const isDestructive = (action: ModerationActionType | string) => {
             <div class="text-sm text-gray-200 whitespace-pre-wrap bg-main-800 border border-main-500 rounded p-2">{{ entry.notes }}</div>
           </div>
 
-          <div class="text-xs text-gray-500">
-            {{ new Date(entry.timestamp).toLocaleString() }}
+          <div class="text-xs text-gray-500" :title="new Date(entry.timestamp).toISOString()">
+            <RelativeDate :date="entry.timestamp" />
           </div>
 
           <div class="flex flex-wrap gap-2 pt-1">

From f1e1ec6ae4852b922d38a3fa46f552d7eec79c1b Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 18:46:02 -0400
Subject: [PATCH 09/13] preview affected actions before confirming a reverse
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

reverse window was confirmed sight-unseen — admin saw timeframe and
moderator name but no count or list of actions. compute the visible
slice from the already-loaded feed, surface it in the confirm dialog,
and flag when the feed is capped so the admin understands the actual
reversal may include more.
---
 .../Moderation/Panel/ConfirmActionDialog.vue  |  2 +
 .../Moderation/Panel/ModeratorsTab.vue        | 39 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/Moderation/Panel/ConfirmActionDialog.vue b/src/components/Moderation/Panel/ConfirmActionDialog.vue
index 3c6ad69..34afb26 100644
--- a/src/components/Moderation/Panel/ConfirmActionDialog.vue
+++ b/src/components/Moderation/Panel/ConfirmActionDialog.vue
@@ -56,6 +56,8 @@ const intentRingClass = {
           <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Reason</div>
           <div class="text-sm text-gray-200 whitespace-pre-wrap">{{ reason || '(no reason supplied)' }}</div>
         </div>
+
+        <slot name="preview" />
       </div>
 
       <div class="p-4 border-t border-main-400 flex justify-end gap-3">
diff --git a/src/components/Moderation/Panel/ModeratorsTab.vue b/src/components/Moderation/Panel/ModeratorsTab.vue
index 6d13a48..9031f32 100644
--- a/src/components/Moderation/Panel/ModeratorsTab.vue
+++ b/src/components/Moderation/Panel/ModeratorsTab.vue
@@ -124,10 +124,23 @@ const performReverse = async () => {
   }
 }
 
+// Actions from the loaded site-wide feed that fall inside the timeframe
+// for the targeted moderator. Empty in raw mode if the mod hasn't shown
+// up in the recent feed; the reversal still runs server-side, but we
+// can't preview what's about to be reverted.
+const previewActions = computed(() => {
+  if (!effectiveSteamId.value || timeframeHours.value <= 0) return []
+  const cutoff = Date.now() - timeframeHours.value * 3600_000
+  return allRecent.value
+    .filter(a => a.moderator_steam_id === effectiveSteamId.value && a.timestamp >= cutoff)
+    .sort((a, b) => b.timestamp - a.timestamp)
+})
+
 const confirmRows = computed<ConfirmRow[]>(() => [
   { label: 'Moderator', value: selectedMod.value?.name ?? '(by Steam ID only)' },
   { label: 'Steam ID', value: effectiveSteamId.value },
   { label: 'Timeframe', value: `${timeframeHours.value} hour${timeframeHours.value === 1 ? '' : 's'}` },
+  { label: 'Visible actions', value: `${previewActions.value.length}${allRecent.value.length >= 20 ? ' (capped feed — actual reversal may be more)' : ''}` },
 ])
 </script>
 
@@ -313,6 +326,30 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       :is-processing="isReversing"
       @confirm="performReverse"
       @cancel="showConfirm = false"
-    />
+    >
+      <template #preview>
+        <div class="bg-main-900/60 border border-main-500 rounded p-3">
+          <div class="text-xs text-gray-400 uppercase tracking-wide mb-2">
+            Actions visible in this window
+            <span v-if="previewActions.length === 0" class="normal-case lowercase text-gray-500">— none in loaded feed</span>
+          </div>
+          <div v-if="previewActions.length === 0" class="text-xs text-gray-500">
+            Nothing matches in the recent feed. The server-side reversal still runs over the full window.
+          </div>
+          <div v-else class="max-h-44 overflow-y-auto space-y-1">
+            <div
+              v-for="(a, i) in previewActions"
+              :key="i"
+              class="flex items-center gap-2 text-xs"
+            >
+              <ActionBadge :action="a.action" size="sm" />
+              <span class="text-gray-300 truncate">{{ a.target_name }}</span>
+              <span class="text-[10px] uppercase tracking-wide text-gray-500">{{ a.target_type }}</span>
+              <span class="ml-auto text-gray-500"><RelativeDate :date="a.timestamp" /></span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ConfirmActionDialog>
   </div>
 </template>

From 19473101dedb7aff79eddf38ebe95e7fe26f5d42 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 18:47:18 -0400
Subject: [PATCH 10/13] a11y, simpler header, wider container

tablist now exposes role/aria-selected and supports Left/Right/Home/
End to switch tabs; tabpanel is properly labelled and focusable.
ConfirmActionDialog autofocuses cancel, listens for Esc to cancel and
Ctrl+Enter to confirm, and exposes role=dialog. moderator's own
header drops the per-bit permission badge wall in favour of a single
role label with the bitfield hex as a tooltip; container widens to
max-w-7xl since the moderator/feed views want the room.
---
 .../Moderation/Panel/ConfirmActionDialog.vue  | 44 +++++++++++--
 src/views/ModerationView.vue                  | 65 ++++++++++++++++---
 2 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/src/components/Moderation/Panel/ConfirmActionDialog.vue b/src/components/Moderation/Panel/ConfirmActionDialog.vue
index 34afb26..d706ea3 100644
--- a/src/components/Moderation/Panel/ConfirmActionDialog.vue
+++ b/src/components/Moderation/Panel/ConfirmActionDialog.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+
 export interface ConfirmRow {
   label: string
   value: string
 }
 
-defineProps<{
+const props = defineProps<{
   show: boolean
   title: string
   intent: 'danger' | 'warning' | 'neutral'
@@ -30,6 +32,36 @@ const intentRingClass = {
   warning: 'ring-purple-500/30',
   neutral: 'ring-blue-500/30',
 } as const
+
+const cancelBtnRef = ref<HTMLButtonElement | null>(null)
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!props.show) return
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    if (!props.isProcessing) emit('cancel')
+  } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault()
+    if (!props.isProcessing) emit('confirm')
+  }
+}
+
+watch(() => props.show, async (val) => {
+  if (val) {
+    await nextTick()
+    // Autofocus cancel — for destructive confirmation, the safer default
+    // is "don't fire on a stray Enter." Cmd/Ctrl+Enter still confirms.
+    cancelBtnRef.value?.focus()
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydown)
+})
 </script>
 
 <template>
@@ -37,11 +69,14 @@ const intentRingClass = {
     v-if="show"
     class="fixed inset-0 bg-black/60 flex items-start justify-center z-[80] p-4 overflow-y-auto"
     @click.self="emit('cancel')"
+    role="dialog"
+    aria-modal="true"
+    :aria-label="title"
   >
     <div :class="['bg-main-800 border border-main-400 rounded-lg shadow-2xl w-full max-w-md my-12 mx-auto ring-2', intentRingClass[intent]]">
       <div class="p-4 border-b border-main-400">
         <h3 class="text-lg font-medium text-gray-100">{{ title }}</h3>
-        <p class="text-sm text-gray-400 mt-1">Review the details before confirming.</p>
+        <p class="text-sm text-gray-400 mt-1">Review the details before confirming. <span class="text-gray-500">(Esc to cancel · Ctrl+Enter to confirm)</span></p>
       </div>
 
       <div class="p-4 space-y-3">
@@ -62,16 +97,17 @@ const intentRingClass = {
 
       <div class="p-4 border-t border-main-400 flex justify-end gap-3">
         <button
+          ref="cancelBtnRef"
           @click="emit('cancel')"
           :disabled="isProcessing"
-          class="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors cursor-pointer disabled:opacity-50"
+          class="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors cursor-pointer disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400/60 rounded"
         >
           Cancel
         </button>
         <button
           @click="emit('confirm')"
           :disabled="isProcessing"
-          :class="['px-4 py-2 text-white rounded-lg transition-colors cursor-pointer', intentBtnClass[intent]]"
+          :class="['px-4 py-2 text-white rounded-lg transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60', intentBtnClass[intent]]"
         >
           {{ isProcessing ? 'Working…' : confirmLabel }}
         </button>
diff --git a/src/views/ModerationView.vue b/src/views/ModerationView.vue
index 6279a45..368d5ad 100644
--- a/src/views/ModerationView.vue
+++ b/src/views/ModerationView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import type { Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useModerationStore } from '@/stores/moderation'
@@ -8,7 +8,7 @@ import ActivityTab from '@/components/Moderation/Panel/ActivityTab.vue'
 import LookupTab from '@/components/Moderation/Panel/LookupTab.vue'
 import ModeratorsTab from '@/components/Moderation/Panel/ModeratorsTab.vue'
 import ServerOwnerTab from '@/components/Moderation/Panel/ServerOwnerTab.vue'
-import PermissionBadges from '@/components/PermissionBadges.vue'
+import { permissionRoleLabel } from '@/types/moderation'
 import type { RecentModAction } from '@/types/moderation'
 
 type TabKey = 'activity' | 'lookup' | 'moderators' | 'server-owner'
@@ -83,13 +83,33 @@ const onInspectTarget = (action: RecentModAction) => {
 
 const accessGranted = computed(() => moderationStore.canAccessModerationPanel.value)
 
+const role = computed(() => user.value ? permissionRoleLabel(user.value.permissions) : null)
+
+const tablistRef = ref<HTMLElement | null>(null)
+
+const onTabKey = async (e: KeyboardEvent) => {
+  const keys = visibleTabs.value.map(t => t.key)
+  const i = keys.indexOf(activeTab.value)
+  let nextIdx = i
+  if (e.key === 'ArrowRight') nextIdx = (i + 1) % keys.length
+  else if (e.key === 'ArrowLeft') nextIdx = (i - 1 + keys.length) % keys.length
+  else if (e.key === 'Home') nextIdx = 0
+  else if (e.key === 'End') nextIdx = keys.length - 1
+  else return
+  e.preventDefault()
+  setTab(keys[nextIdx])
+  await nextTick()
+  const btn = tablistRef.value?.querySelector<HTMLButtonElement>(`[data-tab-key="${keys[nextIdx]}"]`)
+  btn?.focus()
+}
+
 onMounted(() => {
   syncTabFromRoute()
 })
 </script>
 
 <template>
-  <main class="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto w-full">
+  <main class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
     <!-- Loading skeleton while auth resolves -->
     <div v-if="authLoading" class="text-center py-16 text-gray-500">
       Checking permissions…
@@ -115,23 +135,42 @@ onMounted(() => {
             {{ visibleTabs.find(t => t.key === activeTab)?.description }}
           </p>
         </div>
-        <div class="text-xs text-gray-500 sm:text-right">
+        <div class="text-xs text-gray-500 sm:text-right flex items-center gap-2 sm:flex-col sm:items-end">
           <div>Signed in as <span class="text-gray-300">{{ user.username }}</span></div>
-          <div class="mt-1 sm:flex sm:justify-end">
-            <PermissionBadges :permissions="user.permissions" />
-          </div>
+          <span
+            v-if="role"
+            class="px-1.5 py-0.5 rounded border text-[10px] uppercase tracking-wide font-semibold"
+            :class="role === 'Admin' ? 'text-purple-300 bg-purple-900/30 border-purple-800/40'
+                  : role === 'Server Owner' ? 'text-purple-300 bg-purple-900/30 border-purple-800/40'
+                  : 'text-red-300 bg-red-900/30 border-red-800/40'"
+            :title="`Permissions bitfield: 0x${user.permissions.toString(16)}`"
+          >
+            {{ role }}
+          </span>
         </div>
       </div>
 
       <!-- Tab nav -->
       <div class="border-b border-main-500 -mx-1">
-        <div class="flex gap-1 overflow-x-auto px-1">
+        <div
+          ref="tablistRef"
+          role="tablist"
+          aria-label="Moderation sections"
+          class="flex gap-1 overflow-x-auto px-1"
+          @keydown="onTabKey"
+        >
           <button
             v-for="t in visibleTabs"
             :key="t.key"
+            :data-tab-key="t.key"
+            role="tab"
+            :aria-selected="activeTab === t.key"
+            :aria-controls="`tabpanel-${t.key}`"
+            :id="`tab-${t.key}`"
+            :tabindex="activeTab === t.key ? 0 : -1"
             @click="setTab(t.key)"
             :class="[
-              'px-4 py-2.5 text-sm font-medium rounded-t-md border-b-2 transition-colors cursor-pointer whitespace-nowrap',
+              'px-4 py-2.5 text-sm font-medium rounded-t-md border-b-2 transition-colors cursor-pointer whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60',
               activeTab === t.key
                 ? 'text-gray-100 border-blue-500 bg-main-800'
                 : 'text-gray-400 border-transparent hover:text-gray-200 hover:bg-main-800/50',
@@ -143,7 +182,13 @@ onMounted(() => {
       </div>
 
       <!-- Active tab -->
-      <div>
+      <div
+        role="tabpanel"
+        :id="`tabpanel-${activeTab}`"
+        :aria-labelledby="`tab-${activeTab}`"
+        tabindex="0"
+        class="focus:outline-none"
+      >
         <ActivityTab
           v-if="activeTab === 'activity'"
           @inspect-mod="onInspectMod"

From 433ab7aac735d63248e869b651c9c86532b40185 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 19:09:33 -0400
Subject: [PATCH 11/13] add server scope to /times and rebuild server-owner tab
 around it

TimesScope gains a 'server' kind that maps to the new ?server=<id>
parameter. ServerOwnerTab leads with browse-by-server: pick from your
owned servers, page through the runs, right-click or "Add page to
selection" to feed the global tray, then invalidate via SO Invalidate.
The paste-IDs flow is kept as a collapsible advanced section for IDs
sourced out of band.
---
 src/api/offstylesApi.ts                       |   3 +
 .../Moderation/Panel/ServerOwnerTab.vue       | 379 ++++++++++++++----
 src/types/TimesFilter.ts                      |   1 +
 3 files changed, 310 insertions(+), 73 deletions(-)

diff --git a/src/api/offstylesApi.ts b/src/api/offstylesApi.ts
index 0466a06..f6b9e80 100644
--- a/src/api/offstylesApi.ts
+++ b/src/api/offstylesApi.ts
@@ -105,6 +105,9 @@ class OffstylesApi extends Api {
       case 'player':
         params.append("steamid", filter.scope.steamid);
         break;
+      case 'server':
+        params.append("server", filter.scope.server);
+        break;
       case 'globals':
         if (filter.scope.recent) params.append("recent", "true");
         if (filter.scope.wr !== undefined) params.append("wr", filter.scope.wr.toString());
diff --git a/src/components/Moderation/Panel/ServerOwnerTab.vue b/src/components/Moderation/Panel/ServerOwnerTab.vue
index be85416..eccebce 100644
--- a/src/components/Moderation/Panel/ServerOwnerTab.vue
+++ b/src/components/Moderation/Panel/ServerOwnerTab.vue
@@ -1,14 +1,179 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import type { Ref } from 'vue'
 import { useModerationStore } from '@/stores/moderation'
 import { useBulkSelection } from '@/composables/useBulkSelection'
+import { useAuth } from '@/stores/auth'
+import OffstylesApi from '@/api/offstylesApi'
+import type { ServerActivityResponse } from '@/api/offstylesApi'
+import type { Time } from '@/types/Time'
+import type { TimesFilter } from '@/types/TimesFilter'
+import type { TimeListColumn } from '@/types/TimeListColumn'
+import dateTimeFormats from '@/utils/dateTimeFormats'
+import TimesList from '@/components/TimeLists/TimesList.vue'
 import ConfirmActionDialog from './ConfirmActionDialog.vue'
 import type { ConfirmRow } from './ConfirmActionDialog.vue'
 
 const moderationStore = useModerationStore()
 const bulk = useBulkSelection()
+const { user } = useAuth()
 
+// --- Owned servers + browse state --------------------------------------
+
+const servers: Ref<ServerActivityResponse[]> = ref([])
+const serversLoading: Ref<boolean> = ref(false)
+const serversError: Ref<string> = ref('')
+const selectedServerId: Ref<string> = ref('')
+const includeInvalidated: Ref<boolean> = ref(false)
+
+const PAGE_SIZE = 20
+
+const times: Ref<Time[]> = ref([])
+const totalTimes: Ref<number> = ref(0)
+const currentPage: Ref<number> = ref(1)
+const timesLoading: Ref<boolean> = ref(false)
+const timesError: Ref<string> = ref('')
+
+// Server is "owned" by the signed-in user when their steam_id matches the
+// owner. Admins also see all so they can act on any server they manage.
+const ownedServers = computed(() => {
+  if (!user.value) return []
+  return servers.value.filter(s => s.user?.steam_id === user.value!.steam_id)
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(totalTimes.value / PAGE_SIZE)))
+
+const browseCols = computed((): TimeListColumn[] => [
+  {
+    label: 'Map',
+    data: 'map',
+    col: 1,
+    row: 1,
+    rowSpan: 2,
+    colMobile: 1,
+    rowMobile: 1,
+    width: '32%',
+    widthMobile: '40%',
+    alignmentClasses: 'text-left justify-start',
+  },
+  {
+    label: 'Player',
+    data: 'name',
+    col: 2,
+    row: 1,
+    rowSpan: 2,
+    colMobile: 1,
+    colSpanMobile: 3,
+    rowMobile: 2,
+    width: '28%',
+    classes: 'text-sm text-gray-300',
+    alignmentClasses: 'text-left justify-start',
+  },
+  {
+    label: 'Time',
+    data: 'time',
+    col: 3,
+    row: 1,
+    colMobile: 2,
+    colSpanMobile: 2,
+    rowMobile: 1,
+    width: '20%',
+    widthMobile: '25%',
+    classes: 'monospace',
+    alignmentClasses: 'text-right justify-end',
+    numFormat: dateTimeFormats.time,
+  },
+  {
+    label: 'Date',
+    data: 'date',
+    col: 3,
+    row: 2,
+    colMobile: 3,
+    rowMobile: 3,
+    classes: 'text-xs text-gray-400',
+    alignmentClasses: 'text-right justify-end',
+  },
+])
+
+const loadServers = async () => {
+  serversLoading.value = true
+  serversError.value = ''
+  try {
+    servers.value = await OffstylesApi.getServers()
+    if (!selectedServerId.value && ownedServers.value.length > 0) {
+      selectedServerId.value = ownedServers.value[0]._id
+    }
+  } catch (e) {
+    serversError.value = e instanceof Error ? e.message : 'Failed to load servers'
+  } finally {
+    serversLoading.value = false
+  }
+}
+
+const loadTimes = async () => {
+  if (!selectedServerId.value) {
+    times.value = []
+    totalTimes.value = 0
+    return
+  }
+  timesLoading.value = true
+  timesError.value = ''
+  try {
+    const filter: TimesFilter = {
+      scope: { kind: 'server', server: selectedServerId.value },
+      page: currentPage.value,
+      limit: PAGE_SIZE,
+      sort: 'Newest',
+      best: false,
+      invalidated: includeInvalidated.value ? undefined : false,
+    }
+    const page = await OffstylesApi.getTimes(filter)
+    times.value = page.data
+    totalTimes.value = page.total
+  } catch (e) {
+    timesError.value = e instanceof Error ? e.message : 'Failed to load times'
+    times.value = []
+    totalTimes.value = 0
+  } finally {
+    timesLoading.value = false
+  }
+}
+
+watch(selectedServerId, () => {
+  currentPage.value = 1
+  loadTimes()
+})
+watch(includeInvalidated, () => {
+  currentPage.value = 1
+  loadTimes()
+})
+
+const goToPage = (p: number) => {
+  if (p < 1 || p > totalPages.value || timesLoading.value) return
+  currentPage.value = p
+  loadTimes()
+}
+
+const selectAllOnPage = () => {
+  bulk.addMany(
+    times.value
+      .filter(t => !!t._id)
+      .map(t => ({ id: t._id!, label: `${t.name} · ${t.map} · ${t.time.toFixed(3)}s` })),
+  )
+}
+
+onMounted(loadServers)
+watch(ownedServers, () => {
+  if (selectedServerId.value && !ownedServers.value.some(s => s._id === selectedServerId.value)) {
+    selectedServerId.value = ownedServers.value[0]?._id ?? ''
+  } else if (!selectedServerId.value && ownedServers.value.length > 0) {
+    selectedServerId.value = ownedServers.value[0]._id
+  }
+})
+
+// --- Manual paste flow (advanced) --------------------------------------
+
+const pasteOpen: Ref<boolean> = ref(false)
 const idsRaw: Ref<string> = ref('')
 const reason: Ref<string> = ref('')
 const isProcessing: Ref<boolean> = ref(false)
@@ -31,29 +196,17 @@ const invalidTokens = computed(() => {
   return tokens.value.filter(s => !/^[a-f0-9]{24}$/i.test(s))
 })
 
-const dedupedIds = computed(() => {
-  const set = new Set<string>([...parsedIds.value, ...bulk.ids.value])
-  return Array.from(set)
-})
-
-const canSubmit = computed(() => {
+const canSubmitPaste = computed(() => {
   return moderationStore.canServerOwnerInvalidate.value
-      && dedupedIds.value.length > 0
+      && parsedIds.value.length > 0
       && reason.value.trim().length > 0
       && !isProcessing.value
 })
 
-const includeBulk: Ref<boolean> = ref(true)
-
-const effectiveIds = computed(() => {
-  if (includeBulk.value) return dedupedIds.value
-  return parsedIds.value
-})
-
-const start = () => {
+const startPaste = () => {
   error.value = ''
   success.value = ''
-  if (effectiveIds.value.length === 0) {
+  if (parsedIds.value.length === 0) {
     error.value = 'Provide at least one valid 24-char ObjectId.'
     return
   }
@@ -64,16 +217,16 @@ const start = () => {
   showConfirm.value = true
 }
 
-const perform = async () => {
+const performPaste = async () => {
   isProcessing.value = true
   error.value = ''
   try {
-    await moderationStore.performServerOwnerInvalidate(effectiveIds.value, reason.value)
-    success.value = `Invalidated ${effectiveIds.value.length} record${effectiveIds.value.length === 1 ? '' : 's'}.`
+    await moderationStore.performServerOwnerInvalidate(parsedIds.value, reason.value)
+    success.value = `Invalidated ${parsedIds.value.length} record${parsedIds.value.length === 1 ? '' : 's'}.`
     showConfirm.value = false
     idsRaw.value = ''
     reason.value = ''
-    if (includeBulk.value) bulk.clear()
+    loadTimes()
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'Failed'
   } finally {
@@ -82,8 +235,7 @@ const perform = async () => {
 }
 
 const confirmRows = computed<ConfirmRow[]>(() => [
-  { label: 'Records', value: `${effectiveIds.value.length}` },
-  { label: 'Source', value: includeBulk.value && bulk.count.value > 0 ? 'Pasted IDs + bulk selection' : 'Pasted IDs' },
+  { label: 'Records', value: `${parsedIds.value.length}` },
   { label: 'Endpoint', value: '/so_moderate (server-owner)' },
 ])
 </script>
@@ -93,7 +245,7 @@ const confirmRows = computed<ConfirmRow[]>(() => [
     <div class="bg-purple-900/10 border border-purple-800/40 text-purple-200 rounded-lg p-3 text-sm">
       <div class="font-medium">Server-owner self-invalidation</div>
       <p class="text-purple-200/80 text-xs mt-1">
-        Use this to invalidate runs set on servers you own (e.g. before a major rule change, or to clear out test runs).
+        Browse runs from your servers and invalidate them via the floating selection tray, or paste record IDs directly below.
         The backend rejects records that weren't set on a server tied to your owner key.
       </p>
     </div>
@@ -102,64 +254,145 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       You don't have the server-owner invalidate permission. This tab is read-only.
     </div>
 
+    <!-- Browse section -->
     <div class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
-      <div>
-        <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
-        <textarea
-          v-model="idsRaw"
-          rows="4"
-          placeholder="Paste ObjectIds — comma, space, or newline separated"
-          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
-        />
-        <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
-          <span class="text-gray-500">
-            {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
-          </span>
-        </div>
-        <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
-          <span
-            v-for="t in invalidTokens.slice(0, 8)"
-            :key="t"
-            class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
-          >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
-          <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
+      <div class="flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <div class="text-sm font-medium text-gray-200">Browse runs on your servers</div>
+          <div class="text-xs text-gray-500">Right-click a row or use "Select page" to add records to the selection.</div>
         </div>
+        <button
+          @click="loadServers"
+          :disabled="serversLoading"
+          class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+        >
+          {{ serversLoading ? 'Loading…' : 'Reload servers' }}
+        </button>
       </div>
 
-      <div v-if="bulk.count.value > 0" class="flex items-start gap-2 px-3 py-2 bg-main-900/40 border border-main-500 rounded">
-        <input
-          v-model="includeBulk"
-          type="checkbox"
-          class="mt-1"
-        />
-        <div class="flex-1 text-sm">
-          <div class="text-gray-200">Include bulk selection ({{ bulk.count.value }} record{{ bulk.count.value === 1 ? '' : 's' }})</div>
-          <div class="text-xs text-gray-500">Combines with the IDs above; duplicates are removed.</div>
+      <div v-if="serversError" class="text-red-400 text-sm">{{ serversError }}</div>
+
+      <div v-if="!serversLoading && ownedServers.length === 0" class="text-sm text-gray-500 italic py-2">
+        No servers registered to your Steam ID. Contact an admin if this looks wrong.
+      </div>
+
+      <div v-else-if="ownedServers.length > 0" class="grid sm:grid-cols-[1fr_auto] gap-3 items-end">
+        <div>
+          <label class="text-xs text-gray-400 uppercase tracking-wide">Server</label>
+          <select
+            v-model="selectedServerId"
+            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm focus:outline-none focus:border-main-300"
+          >
+            <option v-for="s in ownedServers" :key="s._id" :value="s._id">
+              {{ s.name }}<span v-if="!s.active"> (inactive)</span>
+            </option>
+          </select>
         </div>
-        <span class="text-xs text-gray-400">total: {{ effectiveIds.length }}</span>
+        <label class="flex items-center gap-2 text-xs text-gray-300 cursor-pointer pb-2">
+          <input v-model="includeInvalidated" type="checkbox" class="rounded" />
+          Include invalidated
+        </label>
       </div>
 
-      <div>
-        <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
-        <textarea
-          v-model="reason"
-          rows="2"
-          placeholder="Required. Will appear in the audit log."
-          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
-        />
+      <div v-if="selectedServerId" class="space-y-2">
+        <div v-if="timesError" class="text-red-400 text-sm">{{ timesError }}</div>
+
+        <div v-if="timesLoading && times.length === 0" class="text-center py-8 text-gray-500 text-sm">
+          Loading runs…
+        </div>
+        <div v-else-if="!timesLoading && times.length === 0" class="text-center py-8 text-gray-500 text-sm">
+          No runs found for this server.
+        </div>
+        <template v-else>
+          <div class="flex items-center justify-between text-xs text-gray-400">
+            <span>{{ totalTimes }} record{{ totalTimes === 1 ? '' : 's' }} on this server</span>
+            <button
+              @click="selectAllOnPage"
+              class="px-2.5 py-1 bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer"
+            >
+              Add page to selection
+            </button>
+          </div>
+          <TimesList :times="times" :cols="browseCols" @refresh-data="loadTimes" />
+          <div v-if="totalPages > 1" class="flex items-center justify-between pt-1 text-sm">
+            <div class="text-gray-400">
+              Page <span class="text-gray-200">{{ currentPage }}</span> of <span class="text-gray-200">{{ totalPages }}</span>
+            </div>
+            <div class="flex gap-1">
+              <button
+                @click="goToPage(currentPage - 1)"
+                :disabled="currentPage <= 1 || timesLoading"
+                class="px-2.5 py-1 bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+              >‹ Prev</button>
+              <button
+                @click="goToPage(currentPage + 1)"
+                :disabled="currentPage >= totalPages || timesLoading"
+                class="px-2.5 py-1 bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+              >Next ›</button>
+            </div>
+          </div>
+        </template>
       </div>
+    </div>
+
+    <!-- Paste section (advanced) -->
+    <div class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+      <button
+        @click="pasteOpen = !pasteOpen"
+        class="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-200 hover:bg-main-700/50 cursor-pointer"
+      >
+        <span>
+          <span class="font-medium">Paste record IDs</span>
+          <span class="text-gray-500 ml-2 text-xs">advanced — for IDs supplied out-of-band</span>
+        </span>
+        <span class="text-xs text-gray-400">{{ pasteOpen ? '▾' : '▸' }}</span>
+      </button>
+      <div v-if="pasteOpen" class="border-t border-main-500 p-4 space-y-3">
+        <div>
+          <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
+          <textarea
+            v-model="idsRaw"
+            rows="4"
+            placeholder="Paste ObjectIds — comma, space, or newline separated"
+            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
+          />
+          <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
+            <span class="text-gray-500">
+              {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
+            </span>
+          </div>
+          <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
+            <span
+              v-for="t in invalidTokens.slice(0, 8)"
+              :key="t"
+              class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
+            >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
+            <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
+          </div>
+        </div>
 
-      <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
-      <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
+        <div>
+          <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
+          <textarea
+            v-model="reason"
+            rows="2"
+            placeholder="Required. Will appear in the audit log."
+            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
+          />
+        </div>
 
-      <div class="flex justify-end">
-        <button
-          @click="start"
-          :disabled="!canSubmit"
-          class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
-        >
-          Invalidate {{ effectiveIds.length }} record{{ effectiveIds.length === 1 ? '' : 's' }}
-        </button>
+        <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
+        <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
+
+        <div class="flex justify-end">
+          <button
+            @click="startPaste"
+            :disabled="!canSubmitPaste"
+            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
+          >
+            Invalidate {{ parsedIds.length }} record{{ parsedIds.length === 1 ? '' : 's' }}
+          </button>
+        </div>
       </div>
     </div>
 
@@ -171,7 +404,7 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       :reason="reason"
       confirm-label="Yes, invalidate"
       :is-processing="isProcessing"
-      @confirm="perform"
+      @confirm="performPaste"
       @cancel="showConfirm = false"
     />
   </div>
diff --git a/src/types/TimesFilter.ts b/src/types/TimesFilter.ts
index 35c91d1..16568db 100644
--- a/src/types/TimesFilter.ts
+++ b/src/types/TimesFilter.ts
@@ -3,6 +3,7 @@ export type SortOrder = 'Fastest' | 'Slowest' | 'Newest' | 'Oldest';
 export type TimesScope =
   | { kind: 'map'; map: string }
   | { kind: 'player'; steamid: string }
+  | { kind: 'server'; server: string }
   | { kind: 'globals'; wr?: boolean; recent?: boolean };
 
 export interface TimesFilter {

From 73cc94b6f57a1470ee98ebf4341b341594f04beb Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 19:16:11 -0400
Subject: [PATCH 12/13] revert server-owner browse ui until /servers exposes
 the key id

/times?server= matches against records' server.key_id (the keyinfo
ObjectId), but /servers projects only the serverdata _id and the
keyinfo id isn't exposed anywhere a non-admin can reach. browsing by
serverdata _id silently returns no rows. keep the TimesScope.server
plumbing and getTimes wiring (correct and forward-compatible) and
restore the paste-only flow on this tab. once /servers exposes a key
id, the browse view drops back in.
---
 .../Moderation/Panel/ServerOwnerTab.vue       | 379 ++++--------------
 1 file changed, 73 insertions(+), 306 deletions(-)

diff --git a/src/components/Moderation/Panel/ServerOwnerTab.vue b/src/components/Moderation/Panel/ServerOwnerTab.vue
index eccebce..be85416 100644
--- a/src/components/Moderation/Panel/ServerOwnerTab.vue
+++ b/src/components/Moderation/Panel/ServerOwnerTab.vue
@@ -1,179 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed } from 'vue'
 import type { Ref } from 'vue'
 import { useModerationStore } from '@/stores/moderation'
 import { useBulkSelection } from '@/composables/useBulkSelection'
-import { useAuth } from '@/stores/auth'
-import OffstylesApi from '@/api/offstylesApi'
-import type { ServerActivityResponse } from '@/api/offstylesApi'
-import type { Time } from '@/types/Time'
-import type { TimesFilter } from '@/types/TimesFilter'
-import type { TimeListColumn } from '@/types/TimeListColumn'
-import dateTimeFormats from '@/utils/dateTimeFormats'
-import TimesList from '@/components/TimeLists/TimesList.vue'
 import ConfirmActionDialog from './ConfirmActionDialog.vue'
 import type { ConfirmRow } from './ConfirmActionDialog.vue'
 
 const moderationStore = useModerationStore()
 const bulk = useBulkSelection()
-const { user } = useAuth()
 
-// --- Owned servers + browse state --------------------------------------
-
-const servers: Ref<ServerActivityResponse[]> = ref([])
-const serversLoading: Ref<boolean> = ref(false)
-const serversError: Ref<string> = ref('')
-const selectedServerId: Ref<string> = ref('')
-const includeInvalidated: Ref<boolean> = ref(false)
-
-const PAGE_SIZE = 20
-
-const times: Ref<Time[]> = ref([])
-const totalTimes: Ref<number> = ref(0)
-const currentPage: Ref<number> = ref(1)
-const timesLoading: Ref<boolean> = ref(false)
-const timesError: Ref<string> = ref('')
-
-// Server is "owned" by the signed-in user when their steam_id matches the
-// owner. Admins also see all so they can act on any server they manage.
-const ownedServers = computed(() => {
-  if (!user.value) return []
-  return servers.value.filter(s => s.user?.steam_id === user.value!.steam_id)
-})
-
-const totalPages = computed(() => Math.max(1, Math.ceil(totalTimes.value / PAGE_SIZE)))
-
-const browseCols = computed((): TimeListColumn[] => [
-  {
-    label: 'Map',
-    data: 'map',
-    col: 1,
-    row: 1,
-    rowSpan: 2,
-    colMobile: 1,
-    rowMobile: 1,
-    width: '32%',
-    widthMobile: '40%',
-    alignmentClasses: 'text-left justify-start',
-  },
-  {
-    label: 'Player',
-    data: 'name',
-    col: 2,
-    row: 1,
-    rowSpan: 2,
-    colMobile: 1,
-    colSpanMobile: 3,
-    rowMobile: 2,
-    width: '28%',
-    classes: 'text-sm text-gray-300',
-    alignmentClasses: 'text-left justify-start',
-  },
-  {
-    label: 'Time',
-    data: 'time',
-    col: 3,
-    row: 1,
-    colMobile: 2,
-    colSpanMobile: 2,
-    rowMobile: 1,
-    width: '20%',
-    widthMobile: '25%',
-    classes: 'monospace',
-    alignmentClasses: 'text-right justify-end',
-    numFormat: dateTimeFormats.time,
-  },
-  {
-    label: 'Date',
-    data: 'date',
-    col: 3,
-    row: 2,
-    colMobile: 3,
-    rowMobile: 3,
-    classes: 'text-xs text-gray-400',
-    alignmentClasses: 'text-right justify-end',
-  },
-])
-
-const loadServers = async () => {
-  serversLoading.value = true
-  serversError.value = ''
-  try {
-    servers.value = await OffstylesApi.getServers()
-    if (!selectedServerId.value && ownedServers.value.length > 0) {
-      selectedServerId.value = ownedServers.value[0]._id
-    }
-  } catch (e) {
-    serversError.value = e instanceof Error ? e.message : 'Failed to load servers'
-  } finally {
-    serversLoading.value = false
-  }
-}
-
-const loadTimes = async () => {
-  if (!selectedServerId.value) {
-    times.value = []
-    totalTimes.value = 0
-    return
-  }
-  timesLoading.value = true
-  timesError.value = ''
-  try {
-    const filter: TimesFilter = {
-      scope: { kind: 'server', server: selectedServerId.value },
-      page: currentPage.value,
-      limit: PAGE_SIZE,
-      sort: 'Newest',
-      best: false,
-      invalidated: includeInvalidated.value ? undefined : false,
-    }
-    const page = await OffstylesApi.getTimes(filter)
-    times.value = page.data
-    totalTimes.value = page.total
-  } catch (e) {
-    timesError.value = e instanceof Error ? e.message : 'Failed to load times'
-    times.value = []
-    totalTimes.value = 0
-  } finally {
-    timesLoading.value = false
-  }
-}
-
-watch(selectedServerId, () => {
-  currentPage.value = 1
-  loadTimes()
-})
-watch(includeInvalidated, () => {
-  currentPage.value = 1
-  loadTimes()
-})
-
-const goToPage = (p: number) => {
-  if (p < 1 || p > totalPages.value || timesLoading.value) return
-  currentPage.value = p
-  loadTimes()
-}
-
-const selectAllOnPage = () => {
-  bulk.addMany(
-    times.value
-      .filter(t => !!t._id)
-      .map(t => ({ id: t._id!, label: `${t.name} · ${t.map} · ${t.time.toFixed(3)}s` })),
-  )
-}
-
-onMounted(loadServers)
-watch(ownedServers, () => {
-  if (selectedServerId.value && !ownedServers.value.some(s => s._id === selectedServerId.value)) {
-    selectedServerId.value = ownedServers.value[0]?._id ?? ''
-  } else if (!selectedServerId.value && ownedServers.value.length > 0) {
-    selectedServerId.value = ownedServers.value[0]._id
-  }
-})
-
-// --- Manual paste flow (advanced) --------------------------------------
-
-const pasteOpen: Ref<boolean> = ref(false)
 const idsRaw: Ref<string> = ref('')
 const reason: Ref<string> = ref('')
 const isProcessing: Ref<boolean> = ref(false)
@@ -196,17 +31,29 @@ const invalidTokens = computed(() => {
   return tokens.value.filter(s => !/^[a-f0-9]{24}$/i.test(s))
 })
 
-const canSubmitPaste = computed(() => {
+const dedupedIds = computed(() => {
+  const set = new Set<string>([...parsedIds.value, ...bulk.ids.value])
+  return Array.from(set)
+})
+
+const canSubmit = computed(() => {
   return moderationStore.canServerOwnerInvalidate.value
-      && parsedIds.value.length > 0
+      && dedupedIds.value.length > 0
       && reason.value.trim().length > 0
       && !isProcessing.value
 })
 
-const startPaste = () => {
+const includeBulk: Ref<boolean> = ref(true)
+
+const effectiveIds = computed(() => {
+  if (includeBulk.value) return dedupedIds.value
+  return parsedIds.value
+})
+
+const start = () => {
   error.value = ''
   success.value = ''
-  if (parsedIds.value.length === 0) {
+  if (effectiveIds.value.length === 0) {
     error.value = 'Provide at least one valid 24-char ObjectId.'
     return
   }
@@ -217,16 +64,16 @@ const startPaste = () => {
   showConfirm.value = true
 }
 
-const performPaste = async () => {
+const perform = async () => {
   isProcessing.value = true
   error.value = ''
   try {
-    await moderationStore.performServerOwnerInvalidate(parsedIds.value, reason.value)
-    success.value = `Invalidated ${parsedIds.value.length} record${parsedIds.value.length === 1 ? '' : 's'}.`
+    await moderationStore.performServerOwnerInvalidate(effectiveIds.value, reason.value)
+    success.value = `Invalidated ${effectiveIds.value.length} record${effectiveIds.value.length === 1 ? '' : 's'}.`
     showConfirm.value = false
     idsRaw.value = ''
     reason.value = ''
-    loadTimes()
+    if (includeBulk.value) bulk.clear()
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'Failed'
   } finally {
@@ -235,7 +82,8 @@ const performPaste = async () => {
 }
 
 const confirmRows = computed<ConfirmRow[]>(() => [
-  { label: 'Records', value: `${parsedIds.value.length}` },
+  { label: 'Records', value: `${effectiveIds.value.length}` },
+  { label: 'Source', value: includeBulk.value && bulk.count.value > 0 ? 'Pasted IDs + bulk selection' : 'Pasted IDs' },
   { label: 'Endpoint', value: '/so_moderate (server-owner)' },
 ])
 </script>
@@ -245,7 +93,7 @@ const confirmRows = computed<ConfirmRow[]>(() => [
     <div class="bg-purple-900/10 border border-purple-800/40 text-purple-200 rounded-lg p-3 text-sm">
       <div class="font-medium">Server-owner self-invalidation</div>
       <p class="text-purple-200/80 text-xs mt-1">
-        Browse runs from your servers and invalidate them via the floating selection tray, or paste record IDs directly below.
+        Use this to invalidate runs set on servers you own (e.g. before a major rule change, or to clear out test runs).
         The backend rejects records that weren't set on a server tied to your owner key.
       </p>
     </div>
@@ -254,145 +102,64 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       You don't have the server-owner invalidate permission. This tab is read-only.
     </div>
 
-    <!-- Browse section -->
     <div class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
-      <div class="flex items-center justify-between gap-3 flex-wrap">
-        <div>
-          <div class="text-sm font-medium text-gray-200">Browse runs on your servers</div>
-          <div class="text-xs text-gray-500">Right-click a row or use "Select page" to add records to the selection.</div>
+      <div>
+        <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
+        <textarea
+          v-model="idsRaw"
+          rows="4"
+          placeholder="Paste ObjectIds — comma, space, or newline separated"
+          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
+        />
+        <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
+          <span class="text-gray-500">
+            {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
+          </span>
         </div>
-        <button
-          @click="loadServers"
-          :disabled="serversLoading"
-          class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
-        >
-          {{ serversLoading ? 'Loading…' : 'Reload servers' }}
-        </button>
-      </div>
-
-      <div v-if="serversError" class="text-red-400 text-sm">{{ serversError }}</div>
-
-      <div v-if="!serversLoading && ownedServers.length === 0" class="text-sm text-gray-500 italic py-2">
-        No servers registered to your Steam ID. Contact an admin if this looks wrong.
-      </div>
-
-      <div v-else-if="ownedServers.length > 0" class="grid sm:grid-cols-[1fr_auto] gap-3 items-end">
-        <div>
-          <label class="text-xs text-gray-400 uppercase tracking-wide">Server</label>
-          <select
-            v-model="selectedServerId"
-            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm focus:outline-none focus:border-main-300"
-          >
-            <option v-for="s in ownedServers" :key="s._id" :value="s._id">
-              {{ s.name }}<span v-if="!s.active"> (inactive)</span>
-            </option>
-          </select>
+        <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
+          <span
+            v-for="t in invalidTokens.slice(0, 8)"
+            :key="t"
+            class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
+          >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
+          <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
         </div>
-        <label class="flex items-center gap-2 text-xs text-gray-300 cursor-pointer pb-2">
-          <input v-model="includeInvalidated" type="checkbox" class="rounded" />
-          Include invalidated
-        </label>
       </div>
 
-      <div v-if="selectedServerId" class="space-y-2">
-        <div v-if="timesError" class="text-red-400 text-sm">{{ timesError }}</div>
-
-        <div v-if="timesLoading && times.length === 0" class="text-center py-8 text-gray-500 text-sm">
-          Loading runs…
+      <div v-if="bulk.count.value > 0" class="flex items-start gap-2 px-3 py-2 bg-main-900/40 border border-main-500 rounded">
+        <input
+          v-model="includeBulk"
+          type="checkbox"
+          class="mt-1"
+        />
+        <div class="flex-1 text-sm">
+          <div class="text-gray-200">Include bulk selection ({{ bulk.count.value }} record{{ bulk.count.value === 1 ? '' : 's' }})</div>
+          <div class="text-xs text-gray-500">Combines with the IDs above; duplicates are removed.</div>
         </div>
-        <div v-else-if="!timesLoading && times.length === 0" class="text-center py-8 text-gray-500 text-sm">
-          No runs found for this server.
-        </div>
-        <template v-else>
-          <div class="flex items-center justify-between text-xs text-gray-400">
-            <span>{{ totalTimes }} record{{ totalTimes === 1 ? '' : 's' }} on this server</span>
-            <button
-              @click="selectAllOnPage"
-              class="px-2.5 py-1 bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer"
-            >
-              Add page to selection
-            </button>
-          </div>
-          <TimesList :times="times" :cols="browseCols" @refresh-data="loadTimes" />
-          <div v-if="totalPages > 1" class="flex items-center justify-between pt-1 text-sm">
-            <div class="text-gray-400">
-              Page <span class="text-gray-200">{{ currentPage }}</span> of <span class="text-gray-200">{{ totalPages }}</span>
-            </div>
-            <div class="flex gap-1">
-              <button
-                @click="goToPage(currentPage - 1)"
-                :disabled="currentPage <= 1 || timesLoading"
-                class="px-2.5 py-1 bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
-              >‹ Prev</button>
-              <button
-                @click="goToPage(currentPage + 1)"
-                :disabled="currentPage >= totalPages || timesLoading"
-                class="px-2.5 py-1 bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
-              >Next ›</button>
-            </div>
-          </div>
-        </template>
+        <span class="text-xs text-gray-400">total: {{ effectiveIds.length }}</span>
       </div>
-    </div>
-
-    <!-- Paste section (advanced) -->
-    <div class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
-      <button
-        @click="pasteOpen = !pasteOpen"
-        class="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-200 hover:bg-main-700/50 cursor-pointer"
-      >
-        <span>
-          <span class="font-medium">Paste record IDs</span>
-          <span class="text-gray-500 ml-2 text-xs">advanced — for IDs supplied out-of-band</span>
-        </span>
-        <span class="text-xs text-gray-400">{{ pasteOpen ? '▾' : '▸' }}</span>
-      </button>
-      <div v-if="pasteOpen" class="border-t border-main-500 p-4 space-y-3">
-        <div>
-          <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
-          <textarea
-            v-model="idsRaw"
-            rows="4"
-            placeholder="Paste ObjectIds — comma, space, or newline separated"
-            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
-          />
-          <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
-            <span class="text-gray-500">
-              {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
-            </span>
-          </div>
-          <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
-            <span
-              v-for="t in invalidTokens.slice(0, 8)"
-              :key="t"
-              class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
-            >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
-            <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
-          </div>
-        </div>
 
-        <div>
-          <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
-          <textarea
-            v-model="reason"
-            rows="2"
-            placeholder="Required. Will appear in the audit log."
-            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
-          />
-        </div>
+      <div>
+        <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
+        <textarea
+          v-model="reason"
+          rows="2"
+          placeholder="Required. Will appear in the audit log."
+          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
+        />
+      </div>
 
-        <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
-        <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
+      <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
+      <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
 
-        <div class="flex justify-end">
-          <button
-            @click="startPaste"
-            :disabled="!canSubmitPaste"
-            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
-          >
-            Invalidate {{ parsedIds.length }} record{{ parsedIds.length === 1 ? '' : 's' }}
-          </button>
-        </div>
+      <div class="flex justify-end">
+        <button
+          @click="start"
+          :disabled="!canSubmit"
+          class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
+        >
+          Invalidate {{ effectiveIds.length }} record{{ effectiveIds.length === 1 ? '' : 's' }}
+        </button>
       </div>
     </div>
 
@@ -404,7 +171,7 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       :reason="reason"
       confirm-label="Yes, invalidate"
       :is-processing="isProcessing"
-      @confirm="performPaste"
+      @confirm="perform"
       @cancel="showConfirm = false"
     />
   </div>

From 754e9aff9b95521304c5d5af224a10234fca1935 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 9 May 2026 19:39:44 -0400
Subject: [PATCH 13/13] restore server-owner browse view now that /servers
 exposes key_id

ServerActivityResponse picks up the new key_id field, the SO browse
dropdown drives /times?server=<key_id>, and ServersView preserves
key_id when reconstructing entries after an edit. depends on the
matching api change on branch expose-key-id-on-servers.
---
 src/api/offstylesApi.ts                       |   1 +
 .../Moderation/Panel/ServerOwnerTab.vue       | 379 ++++++++++++++----
 src/views/ServersView.vue                     |   5 +-
 3 files changed, 311 insertions(+), 74 deletions(-)

diff --git a/src/api/offstylesApi.ts b/src/api/offstylesApi.ts
index f6b9e80..57c52b7 100644
--- a/src/api/offstylesApi.ts
+++ b/src/api/offstylesApi.ts
@@ -30,6 +30,7 @@ export interface ServerActivityOwner {
 
 export interface ServerActivityResponse {
   _id: string;
+  key_id: string;
   name: string;
   servers: ServerInfo[];
   permissions: number;
diff --git a/src/components/Moderation/Panel/ServerOwnerTab.vue b/src/components/Moderation/Panel/ServerOwnerTab.vue
index be85416..76f2fb7 100644
--- a/src/components/Moderation/Panel/ServerOwnerTab.vue
+++ b/src/components/Moderation/Panel/ServerOwnerTab.vue
@@ -1,14 +1,179 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import type { Ref } from 'vue'
 import { useModerationStore } from '@/stores/moderation'
 import { useBulkSelection } from '@/composables/useBulkSelection'
+import { useAuth } from '@/stores/auth'
+import OffstylesApi from '@/api/offstylesApi'
+import type { ServerActivityResponse } from '@/api/offstylesApi'
+import type { Time } from '@/types/Time'
+import type { TimesFilter } from '@/types/TimesFilter'
+import type { TimeListColumn } from '@/types/TimeListColumn'
+import dateTimeFormats from '@/utils/dateTimeFormats'
+import TimesList from '@/components/TimeLists/TimesList.vue'
 import ConfirmActionDialog from './ConfirmActionDialog.vue'
 import type { ConfirmRow } from './ConfirmActionDialog.vue'
 
 const moderationStore = useModerationStore()
 const bulk = useBulkSelection()
+const { user } = useAuth()
 
+// --- Owned servers + browse state --------------------------------------
+
+const servers: Ref<ServerActivityResponse[]> = ref([])
+const serversLoading: Ref<boolean> = ref(false)
+const serversError: Ref<string> = ref('')
+const selectedServerId: Ref<string> = ref('')
+const includeInvalidated: Ref<boolean> = ref(false)
+
+const PAGE_SIZE = 20
+
+const times: Ref<Time[]> = ref([])
+const totalTimes: Ref<number> = ref(0)
+const currentPage: Ref<number> = ref(1)
+const timesLoading: Ref<boolean> = ref(false)
+const timesError: Ref<string> = ref('')
+
+// Server is "owned" by the signed-in user when their steam_id matches the
+// owner. Admins also see all so they can act on any server they manage.
+const ownedServers = computed(() => {
+  if (!user.value) return []
+  return servers.value.filter(s => s.user?.steam_id === user.value!.steam_id)
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(totalTimes.value / PAGE_SIZE)))
+
+const browseCols = computed((): TimeListColumn[] => [
+  {
+    label: 'Map',
+    data: 'map',
+    col: 1,
+    row: 1,
+    rowSpan: 2,
+    colMobile: 1,
+    rowMobile: 1,
+    width: '32%',
+    widthMobile: '40%',
+    alignmentClasses: 'text-left justify-start',
+  },
+  {
+    label: 'Player',
+    data: 'name',
+    col: 2,
+    row: 1,
+    rowSpan: 2,
+    colMobile: 1,
+    colSpanMobile: 3,
+    rowMobile: 2,
+    width: '28%',
+    classes: 'text-sm text-gray-300',
+    alignmentClasses: 'text-left justify-start',
+  },
+  {
+    label: 'Time',
+    data: 'time',
+    col: 3,
+    row: 1,
+    colMobile: 2,
+    colSpanMobile: 2,
+    rowMobile: 1,
+    width: '20%',
+    widthMobile: '25%',
+    classes: 'monospace',
+    alignmentClasses: 'text-right justify-end',
+    numFormat: dateTimeFormats.time,
+  },
+  {
+    label: 'Date',
+    data: 'date',
+    col: 3,
+    row: 2,
+    colMobile: 3,
+    rowMobile: 3,
+    classes: 'text-xs text-gray-400',
+    alignmentClasses: 'text-right justify-end',
+  },
+])
+
+const loadServers = async () => {
+  serversLoading.value = true
+  serversError.value = ''
+  try {
+    servers.value = await OffstylesApi.getServers()
+    if (!selectedServerId.value && ownedServers.value.length > 0) {
+      selectedServerId.value = ownedServers.value[0].key_id
+    }
+  } catch (e) {
+    serversError.value = e instanceof Error ? e.message : 'Failed to load servers'
+  } finally {
+    serversLoading.value = false
+  }
+}
+
+const loadTimes = async () => {
+  if (!selectedServerId.value) {
+    times.value = []
+    totalTimes.value = 0
+    return
+  }
+  timesLoading.value = true
+  timesError.value = ''
+  try {
+    const filter: TimesFilter = {
+      scope: { kind: 'server', server: selectedServerId.value },
+      page: currentPage.value,
+      limit: PAGE_SIZE,
+      sort: 'Newest',
+      best: false,
+      invalidated: includeInvalidated.value ? undefined : false,
+    }
+    const page = await OffstylesApi.getTimes(filter)
+    times.value = page.data
+    totalTimes.value = page.total
+  } catch (e) {
+    timesError.value = e instanceof Error ? e.message : 'Failed to load times'
+    times.value = []
+    totalTimes.value = 0
+  } finally {
+    timesLoading.value = false
+  }
+}
+
+watch(selectedServerId, () => {
+  currentPage.value = 1
+  loadTimes()
+})
+watch(includeInvalidated, () => {
+  currentPage.value = 1
+  loadTimes()
+})
+
+const goToPage = (p: number) => {
+  if (p < 1 || p > totalPages.value || timesLoading.value) return
+  currentPage.value = p
+  loadTimes()
+}
+
+const selectAllOnPage = () => {
+  bulk.addMany(
+    times.value
+      .filter(t => !!t._id)
+      .map(t => ({ id: t._id!, label: `${t.name} · ${t.map} · ${t.time.toFixed(3)}s` })),
+  )
+}
+
+onMounted(loadServers)
+watch(ownedServers, () => {
+  if (selectedServerId.value && !ownedServers.value.some(s => s.key_id === selectedServerId.value)) {
+    selectedServerId.value = ownedServers.value[0]?.key_id ?? ''
+  } else if (!selectedServerId.value && ownedServers.value.length > 0) {
+    selectedServerId.value = ownedServers.value[0].key_id
+  }
+})
+
+// --- Manual paste flow (advanced) --------------------------------------
+
+const pasteOpen: Ref<boolean> = ref(false)
 const idsRaw: Ref<string> = ref('')
 const reason: Ref<string> = ref('')
 const isProcessing: Ref<boolean> = ref(false)
@@ -31,29 +196,17 @@ const invalidTokens = computed(() => {
   return tokens.value.filter(s => !/^[a-f0-9]{24}$/i.test(s))
 })
 
-const dedupedIds = computed(() => {
-  const set = new Set<string>([...parsedIds.value, ...bulk.ids.value])
-  return Array.from(set)
-})
-
-const canSubmit = computed(() => {
+const canSubmitPaste = computed(() => {
   return moderationStore.canServerOwnerInvalidate.value
-      && dedupedIds.value.length > 0
+      && parsedIds.value.length > 0
       && reason.value.trim().length > 0
       && !isProcessing.value
 })
 
-const includeBulk: Ref<boolean> = ref(true)
-
-const effectiveIds = computed(() => {
-  if (includeBulk.value) return dedupedIds.value
-  return parsedIds.value
-})
-
-const start = () => {
+const startPaste = () => {
   error.value = ''
   success.value = ''
-  if (effectiveIds.value.length === 0) {
+  if (parsedIds.value.length === 0) {
     error.value = 'Provide at least one valid 24-char ObjectId.'
     return
   }
@@ -64,16 +217,16 @@ const start = () => {
   showConfirm.value = true
 }
 
-const perform = async () => {
+const performPaste = async () => {
   isProcessing.value = true
   error.value = ''
   try {
-    await moderationStore.performServerOwnerInvalidate(effectiveIds.value, reason.value)
-    success.value = `Invalidated ${effectiveIds.value.length} record${effectiveIds.value.length === 1 ? '' : 's'}.`
+    await moderationStore.performServerOwnerInvalidate(parsedIds.value, reason.value)
+    success.value = `Invalidated ${parsedIds.value.length} record${parsedIds.value.length === 1 ? '' : 's'}.`
     showConfirm.value = false
     idsRaw.value = ''
     reason.value = ''
-    if (includeBulk.value) bulk.clear()
+    loadTimes()
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'Failed'
   } finally {
@@ -82,8 +235,7 @@ const perform = async () => {
 }
 
 const confirmRows = computed<ConfirmRow[]>(() => [
-  { label: 'Records', value: `${effectiveIds.value.length}` },
-  { label: 'Source', value: includeBulk.value && bulk.count.value > 0 ? 'Pasted IDs + bulk selection' : 'Pasted IDs' },
+  { label: 'Records', value: `${parsedIds.value.length}` },
   { label: 'Endpoint', value: '/so_moderate (server-owner)' },
 ])
 </script>
@@ -93,7 +245,7 @@ const confirmRows = computed<ConfirmRow[]>(() => [
     <div class="bg-purple-900/10 border border-purple-800/40 text-purple-200 rounded-lg p-3 text-sm">
       <div class="font-medium">Server-owner self-invalidation</div>
       <p class="text-purple-200/80 text-xs mt-1">
-        Use this to invalidate runs set on servers you own (e.g. before a major rule change, or to clear out test runs).
+        Browse runs from your servers and invalidate them via the floating selection tray, or paste record IDs directly below.
         The backend rejects records that weren't set on a server tied to your owner key.
       </p>
     </div>
@@ -102,64 +254,145 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       You don't have the server-owner invalidate permission. This tab is read-only.
     </div>
 
+    <!-- Browse section -->
     <div class="bg-main-800 border border-main-500 rounded-lg p-4 space-y-3">
-      <div>
-        <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
-        <textarea
-          v-model="idsRaw"
-          rows="4"
-          placeholder="Paste ObjectIds — comma, space, or newline separated"
-          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
-        />
-        <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
-          <span class="text-gray-500">
-            {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
-          </span>
-        </div>
-        <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
-          <span
-            v-for="t in invalidTokens.slice(0, 8)"
-            :key="t"
-            class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
-          >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
-          <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
+      <div class="flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <div class="text-sm font-medium text-gray-200">Browse runs on your servers</div>
+          <div class="text-xs text-gray-500">Right-click a row or use "Select page" to add records to the selection.</div>
         </div>
+        <button
+          @click="loadServers"
+          :disabled="serversLoading"
+          class="px-3 py-1.5 text-sm bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+        >
+          {{ serversLoading ? 'Loading…' : 'Reload servers' }}
+        </button>
       </div>
 
-      <div v-if="bulk.count.value > 0" class="flex items-start gap-2 px-3 py-2 bg-main-900/40 border border-main-500 rounded">
-        <input
-          v-model="includeBulk"
-          type="checkbox"
-          class="mt-1"
-        />
-        <div class="flex-1 text-sm">
-          <div class="text-gray-200">Include bulk selection ({{ bulk.count.value }} record{{ bulk.count.value === 1 ? '' : 's' }})</div>
-          <div class="text-xs text-gray-500">Combines with the IDs above; duplicates are removed.</div>
+      <div v-if="serversError" class="text-red-400 text-sm">{{ serversError }}</div>
+
+      <div v-if="!serversLoading && ownedServers.length === 0" class="text-sm text-gray-500 italic py-2">
+        No servers registered to your Steam ID. Contact an admin if this looks wrong.
+      </div>
+
+      <div v-else-if="ownedServers.length > 0" class="grid sm:grid-cols-[1fr_auto] gap-3 items-end">
+        <div>
+          <label class="text-xs text-gray-400 uppercase tracking-wide">Server</label>
+          <select
+            v-model="selectedServerId"
+            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm focus:outline-none focus:border-main-300"
+          >
+            <option v-for="s in ownedServers" :key="s.key_id" :value="s.key_id">
+              {{ s.name }}<span v-if="!s.active"> (inactive)</span>
+            </option>
+          </select>
         </div>
-        <span class="text-xs text-gray-400">total: {{ effectiveIds.length }}</span>
+        <label class="flex items-center gap-2 text-xs text-gray-300 cursor-pointer pb-2">
+          <input v-model="includeInvalidated" type="checkbox" class="rounded" />
+          Include invalidated
+        </label>
       </div>
 
-      <div>
-        <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
-        <textarea
-          v-model="reason"
-          rows="2"
-          placeholder="Required. Will appear in the audit log."
-          class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
-        />
+      <div v-if="selectedServerId" class="space-y-2">
+        <div v-if="timesError" class="text-red-400 text-sm">{{ timesError }}</div>
+
+        <div v-if="timesLoading && times.length === 0" class="text-center py-8 text-gray-500 text-sm">
+          Loading runs…
+        </div>
+        <div v-else-if="!timesLoading && times.length === 0" class="text-center py-8 text-gray-500 text-sm">
+          No runs found for this server.
+        </div>
+        <template v-else>
+          <div class="flex items-center justify-between text-xs text-gray-400">
+            <span>{{ totalTimes }} record{{ totalTimes === 1 ? '' : 's' }} on this server</span>
+            <button
+              @click="selectAllOnPage"
+              class="px-2.5 py-1 bg-main-700 hover:bg-main-600 border border-main-500 rounded text-gray-200 cursor-pointer"
+            >
+              Add page to selection
+            </button>
+          </div>
+          <TimesList :times="times" :cols="browseCols" @refresh-data="loadTimes" />
+          <div v-if="totalPages > 1" class="flex items-center justify-between pt-1 text-sm">
+            <div class="text-gray-400">
+              Page <span class="text-gray-200">{{ currentPage }}</span> of <span class="text-gray-200">{{ totalPages }}</span>
+            </div>
+            <div class="flex gap-1">
+              <button
+                @click="goToPage(currentPage - 1)"
+                :disabled="currentPage <= 1 || timesLoading"
+                class="px-2.5 py-1 bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+              >‹ Prev</button>
+              <button
+                @click="goToPage(currentPage + 1)"
+                :disabled="currentPage >= totalPages || timesLoading"
+                class="px-2.5 py-1 bg-main-700 hover:bg-main-600 disabled:opacity-50 border border-main-500 rounded text-gray-200 cursor-pointer"
+              >Next ›</button>
+            </div>
+          </div>
+        </template>
       </div>
+    </div>
+
+    <!-- Paste section (advanced) -->
+    <div class="bg-main-800 border border-main-500 rounded-lg overflow-hidden">
+      <button
+        @click="pasteOpen = !pasteOpen"
+        class="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-200 hover:bg-main-700/50 cursor-pointer"
+      >
+        <span>
+          <span class="font-medium">Paste record IDs</span>
+          <span class="text-gray-500 ml-2 text-xs">advanced — for IDs supplied out-of-band</span>
+        </span>
+        <span class="text-xs text-gray-400">{{ pasteOpen ? '▾' : '▸' }}</span>
+      </button>
+      <div v-if="pasteOpen" class="border-t border-main-500 p-4 space-y-3">
+        <div>
+          <label class="text-xs text-gray-400 uppercase tracking-wide">Record IDs</label>
+          <textarea
+            v-model="idsRaw"
+            rows="4"
+            placeholder="Paste ObjectIds — comma, space, or newline separated"
+            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm font-mono placeholder-gray-500 focus:outline-none focus:border-main-300"
+          />
+          <div class="flex flex-wrap justify-between gap-2 text-xs mt-1">
+            <span class="text-gray-500">
+              {{ parsedIds.length }} valid<span v-if="invalidTokens.length"> · <span class="text-red-400">{{ invalidTokens.length }} invalid</span></span>
+            </span>
+          </div>
+          <div v-if="invalidTokens.length" class="flex flex-wrap gap-1 text-[11px] mt-1">
+            <span
+              v-for="t in invalidTokens.slice(0, 8)"
+              :key="t"
+              class="px-1.5 py-0.5 rounded bg-red-900/20 border border-red-800/40 text-red-300 font-mono"
+            >{{ t.length > 18 ? t.slice(0, 16) + '…' : t }}</span>
+            <span v-if="invalidTokens.length > 8" class="text-red-400">+{{ invalidTokens.length - 8 }} more</span>
+          </div>
+        </div>
 
-      <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
-      <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
+        <div>
+          <label class="text-xs text-gray-400 uppercase tracking-wide">Reason</label>
+          <textarea
+            v-model="reason"
+            rows="2"
+            placeholder="Required. Will appear in the audit log."
+            class="w-full mt-1 px-3 py-2 bg-main-700 border border-main-500 rounded text-gray-200 text-sm placeholder-gray-500 focus:outline-none focus:border-main-300"
+          />
+        </div>
 
-      <div class="flex justify-end">
-        <button
-          @click="start"
-          :disabled="!canSubmit"
-          class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
-        >
-          Invalidate {{ effectiveIds.length }} record{{ effectiveIds.length === 1 ? '' : 's' }}
-        </button>
+        <div v-if="error" class="text-red-400 text-sm">{{ error }}</div>
+        <div v-if="success" class="text-green-400 text-sm bg-green-900/20 border border-green-800/40 rounded p-2">{{ success }}</div>
+
+        <div class="flex justify-end">
+          <button
+            @click="startPaste"
+            :disabled="!canSubmitPaste"
+            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 disabled:cursor-not-allowed text-white text-sm rounded-lg cursor-pointer"
+          >
+            Invalidate {{ parsedIds.length }} record{{ parsedIds.length === 1 ? '' : 's' }}
+          </button>
+        </div>
       </div>
     </div>
 
@@ -171,7 +404,7 @@ const confirmRows = computed<ConfirmRow[]>(() => [
       :reason="reason"
       confirm-label="Yes, invalidate"
       :is-processing="isProcessing"
-      @confirm="perform"
+      @confirm="performPaste"
       @cancel="showConfirm = false"
     />
   </div>
diff --git a/src/views/ServersView.vue b/src/views/ServersView.vue
index df996c7..708a512 100644
--- a/src/views/ServersView.vue
+++ b/src/views/ServersView.vue
@@ -414,9 +414,12 @@ const onServerUpdated = (updatedServer: ServerDataDocument) => {
   // Find and update the server in the list
   const index = servers.value.findIndex(s => s._id === updatedServer._id);
   if (index !== -1 && updatedServer._id && updatedServer.user && updatedServer.servers) {
-    // Convert ServerDataDocument back to ServerActivityResponse format
+    // Convert ServerDataDocument back to ServerActivityResponse format,
+    // preserving key_id from the existing entry since the update payload
+    // doesn't carry it.
     const response: ServerActivityResponse = {
       _id: updatedServer._id,
+      key_id: servers.value[index].key_id,
       name: updatedServer.name,
       servers: updatedServer.servers,
       user: updatedServer.user,