feat(redesign): design-system tokens, 23 Vue components, game-aware shell + Fleet/Solo dashboard

Tokens ported 1:1 from the Claude Design bundle (colors/game-themes/type/spacing/elevation/motion/fonts) with the data-theme/data-game theming contract via useThemeGame (+ cc-skin-swap repaint guard). 23 design-system components reimplemented as Vue SFCs (core/forms/data/navigation/feedback/brand). DashboardLayout rebuilt as the game-aware shell (GameSwitcher, grouped nav with permission gating preserved, agent-health footer, topbar). DashboardView: Fleet + Solo with per-game GAME_FIELDS rows and the themed ECharts PlayersChart; Solo wired to the real server store, Fleet on representative data pending the multi-instance backend. All four game skins (Rust/Dune/Conan/Soulmask). vue-tsc + vite build green.

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

frontend/src/views/admin/DashboardView.vue

@@ -1,155 +1,497 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+/**
+ * DashboardView — Fleet / Solo dashboard.
+ * Fleet:  multi-game server cockpit (representative mock data — pending multi-instance backend).
+ * Solo:   single-server detail wired to the real useServerStore where data exists.
+ *
+ * View toggle (Fleet / Solo) lives inside the page so the shell (DashboardLayout) stays clean.
+ * Routing stays at path '/', no new routes added.
+ */
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
 import { useServerStore } from '@/stores/server'
-import { useWipeStore } from '@/stores/wipe'
+import { useThemeGame } from '@/composables/useThemeGame'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import ServerCard from '@/components/ds/data/ServerCard.vue'
+import ConsoleLine from '@/components/ds/data/ConsoleLine.vue'
+import ResourceMeter from '@/components/ds/data/ResourceMeter.vue'
+import PlayersChart from '@/components/ds/data/PlayersChart.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import {
+  MOCK_SERVERS, MOCK_FEED, MOCK_WIPES, buildStats,
+  type MockServer, type GameKey,
+} from './_dashboardMock'
 
-const router = useRouter()
-const auth = useAuthStore()
+// ---- Stores / composables ----
 const server = useServerStore()
-const wipe = useWipeStore()
+const router = useRouter()
+const { activeGame } = useThemeGame()
 
-onMounted(async () => {
-  server.fetchServer()
-  try {
-    await wipe.fetchSchedules()
-  } catch {
-    // Non-critical — dashboard still loads without wipe data
-  }
-})
+// ---- View toggle ----
+const VIEW_KEY = 'cc-dash-view'
+const view = ref<'fleet' | 'solo'>((localStorage.getItem(VIEW_KEY) as 'fleet' | 'solo') ?? 'fleet')
+function setView(v: string) {
+  view.value = v as 'fleet' | 'solo'
+  localStorage.setItem(VIEW_KEY, v)
+}
 
-const nextWipeDate = computed<string>(() => {
-  const upcoming = wipe.schedules
-    .filter(s => s.is_active && s.next_scheduled_run)
-    .map(s => new Date(s.next_scheduled_run!))
-    .sort((a, b) => a.getTime() - b.getTime())
+const viewItems = [
+  { value: 'fleet', label: 'Fleet', icon: 'layout-grid' },
+  { value: 'solo', label: 'Solo', icon: 'square-dashed' },
+]
 
-  if (upcoming.length === 0) return 'Not Scheduled'
+// ---- Fleet: filter servers by activeGame ----
+const serverStatus = ref<'all' | 'online' | 'offline'>('all')
+const statusItems = computed(() => [
+  { value: 'all', label: 'All', count: inGame.value.length },
+  { value: 'online', label: 'Running', count: inGame.value.filter((s) => s.status !== 'offline').length },
+  { value: 'offline', label: 'Stopped', count: inGame.value.filter((s) => s.status === 'offline').length },
+])
 
-  return upcoming[0]!.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
+const GAME_LABEL: Record<string, string> = { rust: 'Rust', dune: 'Dune', conan: 'Conan Exiles', soulmask: 'Soulmask' }
+
+const inGame = computed<MockServer[]>(() =>
+  activeGame.value === 'all'
+    ? MOCK_SERVERS
+    : MOCK_SERVERS.filter((s) => s.game === (activeGame.value as GameKey)),
+)
+
+const shownServers = computed<MockServer[]>(() => {
+  const sv = serverStatus.value
+  return inGame.value.filter((s) => {
+    if (sv === 'all') return true
+    if (sv === 'online') return s.status !== 'offline'
+    return s.status === 'offline'
   })
 })
 
-function statusColor(status: string | undefined): string {
-  switch (status) {
-    case 'connected': return 'bg-green-500'
-    case 'degraded': return 'bg-yellow-500'
-    default: return 'bg-red-500'
+// ---- Fleet KPIs ----
+const runningCount = computed(() => inGame.value.filter((s) => s.status !== 'offline').length)
+const playersCur = computed(() => inGame.value.reduce((a, s) => a + (s.players?.cur ?? 0), 0))
+const playersMax = computed(() => inGame.value.reduce((a, s) => a + (s.players?.max ?? 0), 0))
+const cpuValues = computed(() => inGame.value.filter((s) => s.cpu != null).map((s) => s.cpu as number))
+const avgCpu = computed<string>(() =>
+  cpuValues.value.length
+    ? String(Math.round(cpuValues.value.reduce((a, b) => a + b, 0) / cpuValues.value.length))
+    : '—',
+)
+
+const scopeLabel = computed(() =>
+  activeGame.value === 'all'
+    ? 'Fleet overview'
+    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} fleet`,
+)
+
+const fleetTitle = computed(() => {
+  if (activeGame.value === 'all') {
+    const games = new Set(MOCK_SERVERS.map((s) => s.game)).size
+    return `${MOCK_SERVERS.length} servers · ${games} games`
   }
+  const n = inGame.value.length
+  const label = GAME_LABEL[activeGame.value as string] ?? activeGame.value
+  return `${n} ${label} server${n === 1 ? '' : 's'}`
+})
+
+const chartSubtitle = computed(() =>
+  activeGame.value === 'all'
+    ? 'All servers · last 24 hours'
+    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} servers · last 24 hours`,
+)
+
+// ---- Chart period toggle ----
+const chartPeriod = ref('24h')
+const periodItems = [
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+  { value: '30d', label: '30d' },
+]
+
+// ---- Solo: real store data + representative fallbacks ----
+const soloName = computed(() => server.config?.server_name ?? 'Main · 2x Vanilla')
+const soloPlayers = computed(() => server.stats?.player_count ?? 0)
+const soloMaxPlayers = computed(() => server.stats?.max_players ?? server.config?.max_players ?? 200)
+const soloFps = computed(() => server.stats?.fps ?? 59.8)
+// Memory: store gives memory_usage_mb (no max), use 8192 MB representative max for %
+const soloRamMb = computed(() => server.stats?.memory_usage_mb ?? 0)
+const soloRamPct = computed(() => soloRamMb.value > 0 ? Math.round((soloRamMb.value / 8192) * 100) : 68)
+const soloRamSub = computed(() => soloRamMb.value > 0 ? `${(soloRamMb.value / 1024).toFixed(1)} / 8 GB` : '5.4 / 8 GB')
+// CPU: not in ServerStats; use representative value
+const soloCpuPct = 41
+// Status badge derived from connection_status
+const soloStatus = computed<'online' | 'offline' | 'starting' | 'wiping'>(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'online'
+  if (cs === 'degraded') return 'starting'
+  return 'offline'
+})
+const soloStatusTone = computed<'online' | 'offline' | 'starting' | 'warn'>(() => {
+  if (soloStatus.value === 'online') return 'online'
+  if (soloStatus.value === 'starting') return 'warn'
+  return 'offline'
+})
+const soloStatusLabel = computed(() => {
+  if (soloStatus.value === 'online') return 'Online'
+  if (soloStatus.value === 'starting') return 'Degraded'
+  return 'Offline'
+})
+const soloRegion = computed(() => {
+  const ip = server.connection?.server_ip
+  return ip ? 'Bare metal' : 'US-East'
+})
+const soloIp = computed(() => {
+  const ip = server.connection?.server_ip
+  const port = server.connection?.game_port ?? server.connection?.server_port
+  if (ip && port) return `${ip}:${port}`
+  return '89.142.0.7:28015'
+})
+const soloUptime = computed(() => {
+  const sec = server.stats?.uptime_seconds ?? 0
+  if (sec === 0) return '—'
+  const d = Math.floor(sec / 86400)
+  const h = Math.floor((sec % 86400) / 3600)
+  return `${d}d ${h}h`
+})
+
+// Representative plugin list (uMod plugin state not in backend store)
+const pluginStates = ref([
+  { name: 'RaidableBases', ver: '2.7.4', on: true },
+  { name: 'Kits', ver: '4.3.1', on: true },
+  { name: 'CorrosionTeleportGUI', ver: '1.2.0', on: true },
+  { name: 'Economics', ver: '3.9.6', on: true },
+  { name: 'ZLevels Remastered', ver: '3.2.0', on: false },
+])
+
+// Console input
+const consoleInput = ref('')
+
+function sendConsoleCommand() {
+  if (!consoleInput.value.trim()) return
+  server.sendCommand(consoleInput.value.trim()).catch(() => {})
+  consoleInput.value = ''
 }
 
-function statusLabel(status: string | undefined): string {
-  switch (status) {
-    case 'connected': return 'Online'
-    case 'degraded': return 'Degraded'
-    default: return 'Offline'
-  }
-}
+// Navigation helpers
+function navConsole() { router.push('/console') }
+function navWipes()   { router.push('/wipes') }
 
-function formatUptime(seconds: number | undefined): string {
-  if (!seconds) return '\u2014'
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  if (h > 0) return `${h}h ${m}m`
-  return `${m}m`
-}
+// ---- Lifecycle ----
+onMounted(() => {
+  server.fetchServer()
+})
 </script>
 
 <template>
-  <div class="p-6 space-y-8">
-    <!-- Welcome header -->
-    <div>
-      <h1 class="text-2xl font-bold text-neutral-100">
-        Welcome back, {{ auth.user?.username }}
-      </h1>
-      <p class="text-sm text-neutral-500 mt-1">Here's what's happening with your server.</p>
-    </div>
-
-    <!-- Stat cards grid -->
-    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-      <!-- Server Status -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Server Status</p>
-        <div class="flex items-center gap-2">
-          <span class="h-2.5 w-2.5 rounded-full" :class="statusColor(server.connection?.connection_status)"></span>
-          <span class="text-2xl font-bold text-neutral-100">{{ statusLabel(server.connection?.connection_status) }}</span>
-        </div>
-      </div>
-
-      <!-- Players Online -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Players Online</p>
-        <p class="text-2xl font-bold text-neutral-100">
-          {{ server.stats?.player_count ?? 0 }}/{{ server.stats?.max_players ?? server.config?.max_players ?? 0 }}
-        </p>
-      </div>
-
-      <!-- Next Wipe -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Next Wipe</p>
-        <p class="text-2xl font-bold text-neutral-100">{{ nextWipeDate }}</p>
-      </div>
-
-      <!-- Uptime -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Uptime</p>
-        <p class="text-2xl font-bold text-neutral-100">{{ formatUptime(server.stats?.uptime_seconds) }}</p>
-      </div>
-    </div>
-
-    <!-- Quick Actions -->
-    <div>
-      <h2 class="text-lg font-semibold text-neutral-200 mb-4">Quick Actions</h2>
-      <div class="flex flex-wrap gap-3">
-        <button
-          :disabled="server.connection?.connection_status === 'connected'"
-          @click="server.startServer()"
-          class="px-4 py-2.5 bg-green-600/20 hover:bg-green-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-green-400 border border-green-600/30 rounded-lg text-sm font-medium transition-colors"
-        >
-          Start Server
-        </button>
-        <button
-          :disabled="server.connection?.connection_status !== 'connected'"
-          @click="server.stopServer()"
-          class="px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-red-400 border border-red-600/30 rounded-lg text-sm font-medium transition-colors"
-        >
-          Stop Server
-        </button>
-        <button
-          @click="router.push('/wipes')"
-          class="px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded-lg text-sm font-medium transition-colors"
-        >
-          Trigger Wipe
-        </button>
-      </div>
-    </div>
-
-    <!-- Server Info (if configured) -->
-    <div v-if="server.config" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-lg font-semibold text-neutral-200 mb-3">Server Configuration</h2>
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
+  <div class="dash">
+    <!-- ===== FLEET VIEW ===== -->
+    <template v-if="view === 'fleet'">
+      <!-- Page head -->
+      <div class="page__head">
         <div>
-          <span class="text-neutral-500">Server Name</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.server_name || 'Not set' }}</p>
+          <div class="t-eyebrow">{{ scopeLabel }}</div>
+          <h1 class="page__title">{{ fleetTitle }}</h1>
         </div>
-        <div>
-          <span class="text-neutral-500">Max Players</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.max_players ?? 'Not set' }}</p>
-        </div>
-        <div>
-          <span class="text-neutral-500">World Size</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.world_size ?? 'Not set' }}</p>
-        </div>
-        <div>
-          <span class="text-neutral-500">Current Seed</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.current_seed ?? 'Not set' }}</p>
+        <div class="page__actions">
+          <Tabs v-model="view" :items="viewItems" @update:model-value="setView" />
+          <Button variant="secondary" size="sm" icon="download">Export</Button>
+          <Button size="sm" icon="rocket">Deploy server</Button>
         </div>
       </div>
-    </div>
+
+      <!-- KPIs -->
+      <div class="dash__kpis">
+        <StatCard icon="server" label="Servers running" :value="String(runningCount)" :unit="'/' + inGame.length" delta="+1" note="today" />
+        <StatCard icon="users" label="Players online" :value="String(playersCur)" :unit="'/' + playersMax" delta="+38" note="since wipe" />
+        <StatCard icon="cpu" :label="activeGame === 'all' ? 'Fleet CPU' : 'Avg CPU'" :value="avgCpu" :unit="avgCpu === '—' ? '' : '%'" note="reporting agents" />
+        <StatCard icon="server-cog" label="Agent nodes" value="2" unit="/2" note="all reporting" />
+      </div>
+
+      <!-- Main grid -->
+      <div class="dash__grid">
+        <!-- Left column -->
+        <div class="dash__col">
+          <!-- Players chart panel — themed ECharts -->
+          <Panel title="Players online" :subtitle="chartSubtitle">
+            <template #actions>
+              <Tabs v-model="chartPeriod" :items="periodItems" />
+            </template>
+            <PlayersChart :height="200" :max="200" />
+          </Panel>
+
+          <!-- Servers list -->
+          <Panel :flush-body="true" title="Servers">
+            <template #actions>
+              <Tabs v-model="serverStatus" :items="statusItems" />
+            </template>
+            <div class="server__list">
+              <ServerCard
+                v-for="(s, i) in shownServers"
+                :key="i"
+                :game="s.game"
+                :game-icon="s.gameIcon"
+                :name="s.name"
+                :region="s.region"
+                :map="s.map"
+                :version="s.version"
+                :status="s.status"
+                :players="s.players"
+                :cpu="s.cpu"
+                :ram="s.ram"
+                :ram-sub="s.ramSub"
+                :ip="s.ip"
+                :stats="buildStats(s)"
+              />
+              <div v-if="shownServers.length === 0" class="server__empty">
+                No servers match the current filter.
+              </div>
+            </div>
+          </Panel>
+        </div>
+
+        <!-- Right sidebar column -->
+        <div class="dash__col dash__col--side">
+          <!-- Live activity -->
+          <Panel :flush-body="true" title="Live activity">
+            <template #actions>
+              <Badge tone="online" :dot="true" :pulse="true">Live</Badge>
+            </template>
+            <div class="feed">
+              <ConsoleLine
+                v-for="(f, i) in MOCK_FEED"
+                :key="i"
+                :time="f.time"
+                :level="f.level"
+                :who="f.who"
+              >{{ f.msg }}</ConsoleLine>
+            </div>
+          </Panel>
+
+          <!-- Upcoming wipes -->
+          <Panel title="Upcoming wipes">
+            <div class="wipes">
+              <div
+                v-for="(w, i) in MOCK_WIPES"
+                :key="i"
+                class="wipe"
+                :data-game="w.game"
+              >
+                <div class="wipe__dot" />
+                <div class="wipe__body">
+                  <div class="wipe__name">{{ w.name }}</div>
+                  <div class="wipe__when">{{ w.when }}</div>
+                </div>
+                <Badge :tone="w.tone" size="md">{{ w.label }}</Badge>
+              </div>
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </template>
+
+    <!-- ===== SOLO VIEW ===== -->
+    <template v-else>
+      <!-- Page head -->
+      <div class="page__head">
+        <div class="solo-id">
+          <div class="solo-id__chip">
+            <Icon name="box" :size="21" :stroke-width="2" />
+          </div>
+          <div>
+            <div class="solo-id__name">
+              {{ soloName }}
+              <Badge :tone="soloStatusTone" :dot="true" :pulse="soloStatus === 'online'">{{ soloStatusLabel }}</Badge>
+            </div>
+            <div class="solo-id__meta">
+              {{ soloRegion }} · {{ soloIp }}
+              <span v-if="soloUptime !== '—'"> · up {{ soloUptime }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="page__actions">
+          <Tabs v-model="view" :items="viewItems" @update:model-value="setView" />
+          <Button variant="secondary" size="sm" icon="refresh-cw" @click="server.restartServer()">Restart</Button>
+          <Button variant="danger-soft" size="sm" icon="power" @click="server.stopServer()">Stop</Button>
+          <Button size="sm" icon="terminal" @click="navConsole">Console</Button>
+        </div>
+      </div>
+
+      <!-- KPIs -->
+      <div class="dash__kpis">
+        <StatCard icon="users" label="Players online" :value="String(soloPlayers)" :unit="'/' + soloMaxPlayers" delta="+12" note="since wipe" />
+        <StatCard icon="cpu" label="CPU" :value="String(soloCpuPct)" unit="%" delta="3%" delta-dir="down" note="agent · representative" />
+        <StatCard icon="memory-stick" label="Memory" :value="String(soloRamPct)" unit="%" :note="soloRamSub" />
+        <StatCard icon="gauge" label="Server FPS" :value="String(soloFps)" delta-dir="flat" note="stable" />
+      </div>
+
+      <!-- Solo grid -->
+      <div class="dash__grid">
+        <!-- Left column -->
+        <div class="dash__col">
+          <!-- Players chart — themed ECharts -->
+          <Panel title="Players online" :subtitle="soloName + ' · last 24 hours'">
+            <PlayersChart :height="196" :max="soloMaxPlayers" />
+          </Panel>
+
+          <!-- Console panel -->
+          <Panel :flush-body="true" title="Console">
+            <template #actions>
+              <Badge tone="online" :dot="true" :pulse="soloStatus === 'online'">Live</Badge>
+            </template>
+            <div class="feed feed--solo">
+              <ConsoleLine
+                v-for="(f, i) in MOCK_FEED"
+                :key="i"
+                :time="f.time"
+                :level="f.level"
+                :who="f.who"
+              >{{ f.msg }}</ConsoleLine>
+            </div>
+            <div class="console-bar">
+              <span class="console-bar__prompt">&gt;</span>
+              <Input
+                v-model="consoleInput"
+                :mono="true"
+                size="sm"
+                placeholder="say, kick, ban, oxide.reload …"
+                style="flex: 1"
+                @keydown.enter="sendConsoleCommand"
+              />
+              <Button size="sm" variant="secondary" icon="corner-down-left" @click="sendConsoleCommand">Send</Button>
+            </div>
+          </Panel>
+        </div>
+
+        <!-- Right sidebar -->
+        <div class="dash__col dash__col--side">
+          <!-- Resources -->
+          <Panel title="Resources" subtitle="Companion agent telemetry">
+            <div class="solo-meters">
+              <ResourceMeter label="CPU" :value="soloCpuPct" sub="representative" />
+              <ResourceMeter label="Memory" :value="soloRamPct" :sub="soloRamSub" />
+              <ResourceMeter label="Disk" :value="64" sub="representative" />
+            </div>
+          </Panel>
+
+          <!-- Plugins -->
+          <Panel :flush-body="true" title="Plugins" subtitle="uMod / Oxide">
+            <template #actions>
+              <Button size="sm" variant="ghost" icon="plus" @click="router.push('/plugins')">Add</Button>
+            </template>
+            <div class="plugs">
+              <div
+                v-for="(p, i) in pluginStates"
+                :key="i"
+                class="plug"
+              >
+                <div class="plug__id">
+                  <span class="plug__name">{{ p.name }}</span>
+                  <span class="plug__ver">{{ p.ver }}</span>
+                </div>
+                <Switch v-model="p.on" size="sm" />
+              </div>
+            </div>
+          </Panel>
+
+          <!-- Next wipe -->
+          <Panel title="Next wipe">
+            <div class="solo-wipe">
+              <div>
+                <div class="solo-wipe__when">Thu · 18:00 UTC</div>
+                <div class="solo-wipe__sub">representative — configure in wipe manager</div>
+              </div>
+              <Button size="sm" variant="outline" icon="calendar-clock" @click="navWipes">Edit</Button>
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
+
+<style scoped>
+/* ---------- Shared shell ---------- */
+.dash { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
+
+.page__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; row-gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px; white-space: nowrap;
+}
+.page__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+
+.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
+.dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 16px; align-items: start; }
+.dash__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+
+/* ---------- Servers list ---------- */
+.server__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
+.server__empty { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); text-align: center; padding: 24px; }
+
+/* ---------- Live feed ---------- */
+.feed { padding: 8px 2px; max-height: 340px; overflow-y: auto; }
+.feed--solo { max-height: 230px; }
+
+/* ---------- Upcoming wipes ---------- */
+.wipes { display: flex; flex-direction: column; gap: 4px; }
+.wipe { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: var(--radius-md); }
+.wipe:hover { background: var(--surface-hover); }
+.wipe__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 10px -1px var(--accent-glow); }
+.wipe__body { flex: 1; min-width: 0; }
+.wipe__name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wipe__when { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
+
+/* ---------- Solo identity header ---------- */
+.solo-id { display: flex; align-items: center; gap: 13px; }
+.solo-id__chip {
+  width: 42px; height: 42px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.solo-id__name {
+  display: flex; align-items: center; gap: 10px;
+  font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em;
+  color: var(--text-primary); white-space: nowrap;
+}
+.solo-id__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 3px; }
+
+/* ---------- Console bar ---------- */
+.console-bar {
+  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
+  border-top: 1px solid var(--border-subtle); background: var(--surface-inset);
+}
+.console-bar__prompt { font-family: var(--font-mono); color: var(--accent-text); font-weight: 700; }
+
+/* ---------- Resources ---------- */
+.solo-meters { display: flex; flex-direction: column; gap: 13px; }
+
+/* ---------- Plugin list ---------- */
+.plugs { display: flex; flex-direction: column; }
+.plug { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
+.plug:last-child { border-bottom: 0; }
+.plug__id { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
+.plug__name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.plug__ver { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+/* ---------- Next wipe ---------- */
+.solo-wipe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.solo-wipe__when { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.solo-wipe__sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 1180px) {
+  .dash__grid { grid-template-columns: 1fr; }
+  .server__list { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+  .dash__kpis { grid-template-columns: repeat(2, 1fr); }
+}
+</style>

frontend/src/views/admin/_dashboardMock.ts

@@ -0,0 +1,159 @@
+/**
+ * Dashboard mock data — representative placeholder pending multi-instance backend.
+ * Current backend is single-server-per-license; the fleet view is a forward-looking
+ * surface that will bind to a multi-instance API. All data here is static and clearly
+ * labeled so it is never confused for real tenant data.
+ *
+ * Per-game fields are isolated by game key — a Dune row NEVER receives a Rust field
+ * like `umod`, and vice-versa. See GAME_FIELDS for the row-field contract.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ServerStatus = 'online' | 'offline' | 'starting' | 'wiping' | 'updating'
+export type GameKey = 'rust' | 'dune' | 'conan' | 'soulmask'
+
+export interface MockServer {
+  game: GameKey
+  gameIcon: string
+  name: string
+  region: string
+  map: string
+  version: string
+  status: ServerStatus
+  players: { cur: number; max: number }
+  cpu?: number
+  ram?: number
+  ramSub?: string
+  ip: string
+  // Rust-only
+  umod?: string
+  wipe?: string
+  // Dune-only
+  sietches?: string
+  control?: string
+  // Conan-only
+  clans?: string
+  purge?: string
+  // Soulmask-only
+  tribe?: string
+  mask?: string
+}
+
+export interface MockFeedLine {
+  time: string
+  level: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
+  who?: string
+  msg: string
+}
+
+export interface MockWipe {
+  game: GameKey
+  name: string
+  when: string
+  tone: 'wiping' | 'starting' | 'warn' | 'online'
+  label: string
+}
+
+export interface StatItem {
+  label: string
+  value: string | number
+}
+
+// ---------------------------------------------------------------------------
+// Fleet server roster
+// ---------------------------------------------------------------------------
+
+export const MOCK_SERVERS: MockServer[] = [
+  {
+    game: 'rust', gameIcon: 'box', name: 'Main · 2x Vanilla', region: 'US-East',
+    map: 'Procedural 4500', version: 'v2024.12', status: 'online',
+    players: { cur: 142, max: 200 }, cpu: 41, ram: 68, ramSub: '5.4 / 8 GB',
+    ip: '89.142.0.7:28015', umod: '14', wipe: '2d',
+  },
+  {
+    game: 'rust', gameIcon: 'box', name: '5x Modded · Build', region: 'US-East',
+    map: 'Barren 3000', version: 'v2024.12', status: 'online',
+    players: { cur: 38, max: 100 }, ip: '89.142.0.7:28017', umod: '27', wipe: '2d',
+  },
+  {
+    game: 'rust', gameIcon: 'box', name: 'Hardcore · Solo/Duo', region: 'US-West',
+    map: 'Procedural 3500', version: 'v2024.12', status: 'wiping',
+    players: { cur: 0, max: 80 }, cpu: 8, ram: 30, ramSub: '2.4 / 8 GB',
+    ip: '74.91.3.2:28015', umod: '9', wipe: 'now',
+  },
+  {
+    game: 'dune', gameIcon: 'sun', name: 'Arrakis · Hardcore', region: 'EU-Frankfurt',
+    map: 'Hagga Basin', version: 'v0.9.4', status: 'online',
+    players: { cur: 54, max: 60 }, cpu: 63, ram: 74, ramSub: '11.8 / 16 GB',
+    ip: '51.83.12.4:7777', sietches: '3', control: '62%',
+  },
+  {
+    game: 'dune', gameIcon: 'sun', name: 'Deep Desert · PvP', region: 'EU-Frankfurt',
+    map: 'Deep Desert', version: 'v0.9.4', status: 'starting',
+    players: { cur: 0, max: 40 }, ip: '51.83.12.4:7779', sietches: '0', control: '—',
+  },
+  {
+    game: 'dune', gameIcon: 'sun', name: 'Sietch · Roleplay', region: 'SG-Singapore',
+    map: 'Hagga Basin', version: 'v0.9.4', status: 'offline',
+    players: { cur: 0, max: 50 }, ip: '139.99.4.8:7777', sietches: '5', control: '—',
+  },
+  {
+    game: 'conan', gameIcon: 'swords', name: 'Exiled Lands · PvP-C', region: 'US-East',
+    map: 'Exiled Lands', version: 'v3.0.5', status: 'online',
+    players: { cur: 32, max: 40 }, cpu: 48, ram: 60, ramSub: '9.6 / 16 GB',
+    ip: '89.142.0.7:7777', clans: '7', purge: 'Tier 4',
+  },
+  {
+    game: 'soulmask', gameIcon: 'drama', name: 'Sienna Plateau · PvE', region: 'EU-Frankfurt',
+    map: 'Sienna Plateau', version: 'v1.4', status: 'online',
+    players: { cur: 18, max: 30 }, cpu: 35, ram: 52, ramSub: '8.3 / 16 GB',
+    ip: '51.83.12.4:8777', tribe: '4', mask: 'Jaguar',
+  },
+]
+
+// ---------------------------------------------------------------------------
+// Per-game stat field sets — never share slots across games
+// ---------------------------------------------------------------------------
+
+function pl(s: MockServer): string {
+  return `${s.players.cur} / ${s.players.max}`
+}
+
+export const GAME_FIELDS: Record<GameKey, (s: MockServer) => StatItem[]> = {
+  rust:     (s) => [{ label: 'Players', value: pl(s) }, { label: 'uMod', value: s.umod ?? '—' }, { label: 'Wipe', value: s.wipe ?? '—' }],
+  dune:     (s) => [{ label: 'Players', value: pl(s) }, { label: 'Sietches', value: s.sietches ?? '—' }, { label: 'Control', value: s.control ?? '—' }],
+  conan:    (s) => [{ label: 'Players', value: pl(s) }, { label: 'Clans', value: s.clans ?? '—' }, { label: 'Purge', value: s.purge ?? '—' }],
+  soulmask: (s) => [{ label: 'Players', value: pl(s) }, { label: 'Tribe', value: s.tribe ?? '—' }, { label: 'Mask', value: s.mask ?? '—' }],
+}
+
+export function buildStats(s: MockServer): StatItem[] {
+  const fn = GAME_FIELDS[s.game] ?? GAME_FIELDS.rust
+  return fn(s)
+}
+
+// ---------------------------------------------------------------------------
+// Live activity feed
+// ---------------------------------------------------------------------------
+
+export const MOCK_FEED: MockFeedLine[] = [
+  { time: '18:42:07', level: 'connect', who: 'ShadowFox', msg: 'connected — 89.142.0.7' },
+  { time: '18:41:55', level: 'cmd', who: 'admin', msg: 'oxide.grant group default kits.use' },
+  { time: '18:41:30', level: 'kill', who: 'ironMaiden', msg: 'was killed by Scorpion (AK-47, 84m)' },
+  { time: '18:40:12', level: 'warn', msg: '5x Modded agent reconnected — telemetry resuming' },
+  { time: '18:39:48', level: 'chat', who: 'BlightWalker:', msg: 'anyone selling sulfur?' },
+  { time: '18:38:02', level: 'info', msg: 'RaidableBases spawned Tier-3 at G14' },
+  { time: '18:36:51', level: 'connect', who: 'Vex', msg: 'connected — 51.83.12.4' },
+]
+
+// ---------------------------------------------------------------------------
+// Upcoming wipes
+// ---------------------------------------------------------------------------
+
+export const MOCK_WIPES: MockWipe[] = [
+  { game: 'rust', name: 'Main · 2x Vanilla', when: 'Thu · 18:00 UTC', tone: 'wiping', label: 'Map + BP' },
+  { game: 'rust', name: '5x Modded · Build', when: 'Thu · 18:00 UTC', tone: 'wiping', label: 'Map only' },
+  { game: 'dune', name: 'Deep Desert · PvP', when: 'Sun · 12:00 UTC', tone: 'starting', label: 'Deep Desert' },
+]