feat: Implement Console and Players views — two core admin screens

Console: Terminal-style RCON interface with timestamped output,
color-coded log types, command input, clear button, and connection
status indicator. Uses server.sendCommand() from the store.

Players: Full management table with search, online/offline/all
filter tabs, Steam ID display, session time, ping, playtime,
admin badges, and kick/ban action buttons. Sorted online-first.

Both views use Oxide Orange brand colors per guidelines.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/views/admin/PlayersView.vue

@@ -1,10 +1,233 @@
 <script setup lang="ts">
-// TODO: Implement player list with kick, ban, and moderation actions
+import { ref, computed, onMounted } from 'vue'
+import { useServerStore } from '@/stores/server'
+import { useApi } from '@/composables/useApi'
+import { Users, Search, Ban, LogOut, Shield, RefreshCw } from 'lucide-vue-next'
+
+const server = useServerStore()
+const api = useApi()
+
+interface Player {
+  steam_id: string
+  display_name: string
+  is_online: boolean
+  ping_ms: number | null
+  connected_at: string | null
+  playtime_seconds: number
+  is_admin: boolean
+  is_banned: boolean
+}
+
+const players = ref<Player[]>([])
+const isLoading = ref(false)
+const searchQuery = ref('')
+const filterStatus = ref<'all' | 'online' | 'offline'>('all')
+
+const filteredPlayers = computed(() => {
+  let result = players.value
+
+  if (filterStatus.value === 'online') {
+    result = result.filter(p => p.is_online)
+  } else if (filterStatus.value === 'offline') {
+    result = result.filter(p => !p.is_online)
+  }
+
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(p =>
+      p.display_name.toLowerCase().includes(q) ||
+      p.steam_id.includes(q)
+    )
+  }
+
+  return result.sort((a, b) => {
+    if (a.is_online !== b.is_online) return a.is_online ? -1 : 1
+    return a.display_name.localeCompare(b.display_name)
+  })
+})
+
+const onlineCount = computed(() => players.value.filter(p => p.is_online).length)
+
+function formatPlaytime(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (h > 0) return `${h}h ${m}m`
+  return `${m}m`
+}
+
+function formatConnectedTime(iso: string | null): string {
+  if (!iso) return '\u2014'
+  const diff = Date.now() - new Date(iso).getTime()
+  const m = Math.floor(diff / 60000)
+  const h = Math.floor(m / 60)
+  if (h > 0) return `${h}h ${m % 60}m`
+  return `${m}m`
+}
+
+async function fetchPlayers() {
+  isLoading.value = true
+  try {
+    const data = await api.get<{ players: Player[] }>('/players')
+    players.value = data.players
+  } catch {
+    // API not wired yet — will show empty state
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function kickPlayer(steamId: string, name: string) {
+  if (!confirm(`Kick ${name}?`)) return
+  try {
+    await server.sendCommand(`kick ${steamId}`)
+    await fetchPlayers()
+  } catch {
+    // Handle error
+  }
+}
+
+async function banPlayer(steamId: string, name: string) {
+  if (!confirm(`Ban ${name}? This will also kick them.`)) return
+  try {
+    await server.sendCommand(`ban ${steamId}`)
+    await fetchPlayers()
+  } catch {
+    // Handle error
+  }
+}
+
+onMounted(() => {
+  fetchPlayers()
+})
 </script>
 
 <template>
-  <div class="p-6">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Player Management</h1>
-    <p class="text-neutral-400">View connected players and manage kick, ban, and moderation actions.</p>
+  <div class="p-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <Users class="w-5 h-5 text-oxide-500" />
+        <div>
+          <h1 class="text-2xl font-bold text-neutral-100">Player Management</h1>
+          <p class="text-sm text-neutral-500 mt-0.5">
+            {{ onlineCount }} online / {{ players.length }} total
+          </p>
+        </div>
+      </div>
+      <button
+        @click="fetchPlayers"
+        :disabled="isLoading"
+        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
+      >
+        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
+        Refresh
+      </button>
+    </div>
+
+    <!-- Filters -->
+    <div class="flex items-center gap-4">
+      <div class="relative flex-1 max-w-sm">
+        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search by name or Steam ID..."
+          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+        />
+      </div>
+      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
+        <button
+          v-for="opt in (['all', 'online', 'offline'] as const)"
+          :key="opt"
+          @click="filterStatus = opt"
+          class="px-3 py-2 text-sm font-medium transition-colors capitalize"
+          :class="filterStatus === opt
+            ? 'bg-oxide-500/15 text-oxide-400'
+            : 'text-neutral-400 hover:text-neutral-200'"
+        >
+          {{ opt }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Player table -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-neutral-800 text-left">
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Player</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Steam ID</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Session</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Playtime</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Ping</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-neutral-800">
+          <tr v-if="filteredPlayers.length === 0">
+            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
+              <template v-if="isLoading">Loading players...</template>
+              <template v-else-if="searchQuery">No players matching "{{ searchQuery }}"</template>
+              <template v-else>No players found. Server may be offline or API not connected.</template>
+            </td>
+          </tr>
+          <tr
+            v-for="player in filteredPlayers"
+            :key="player.steam_id"
+            class="hover:bg-neutral-800/50 transition-colors"
+          >
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-neutral-100">{{ player.display_name }}</span>
+                <Shield v-if="player.is_admin" class="w-3.5 h-3.5 text-oxide-400" title="Admin" />
+              </div>
+            </td>
+            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ player.steam_id }}</td>
+            <td class="px-4 py-3">
+              <span
+                class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full"
+                :class="player.is_online
+                  ? 'bg-green-500/10 text-green-400'
+                  : player.is_banned
+                    ? 'bg-red-500/10 text-red-400'
+                    : 'bg-neutral-700/50 text-neutral-400'"
+              >
+                <span
+                  class="h-1.5 w-1.5 rounded-full"
+                  :class="player.is_online ? 'bg-green-500' : player.is_banned ? 'bg-red-500' : 'bg-neutral-500'"
+                />
+                {{ player.is_banned ? 'Banned' : player.is_online ? 'Online' : 'Offline' }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-sm text-neutral-400">
+              {{ player.is_online ? formatConnectedTime(player.connected_at) : '\u2014' }}
+            </td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatPlaytime(player.playtime_seconds) }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">
+              {{ player.is_online && player.ping_ms ? `${player.ping_ms}ms` : '\u2014' }}
+            </td>
+            <td class="px-4 py-3 text-right">
+              <div class="flex items-center justify-end gap-1" v-if="player.is_online">
+                <button
+                  @click="kickPlayer(player.steam_id, player.display_name)"
+                  class="p-1.5 text-neutral-500 hover:text-yellow-400 rounded transition-colors"
+                  title="Kick"
+                >
+                  <LogOut class="w-4 h-4" />
+                </button>
+                <button
+                  @click="banPlayer(player.steam_id, player.display_name)"
+                  class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
+                  title="Ban"
+                >
+                  <Ban class="w-4 h-4" />
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>