feat: Implement 6 views + updated hero — Server, Chat, Team, Notifications, Settings, Setup Wizard

Server: Connection status, start/stop/restart controls, config editor
with edit mode, automation toggles (crash recovery, force wipe, auto-update).

Chat Log: Message feed with channel filter (global/team/server), search,
flag/unflag per message, timestamped entries with channel badges.

Team: Member table with role badges, invite form with role select,
pending/active status, remove action.

Notifications: Discord webhook, Pushbullet, email toggle cards.
6 event triggers (wipe start/complete/fail, crash, offline, purchase).

Settings: 3-tab layout (Account, License, Domain). Account editing,
license info display, subdomain + custom domain config with CNAME hint.

Setup Wizard: 3-step flow (Configure → Install Agent → Done).
Connection type radio cards, RCON/game port config, companion agent
install instructions with license key pre-filled.

Also swaps hero graphic to corrected version (two-column Control vs
Infrastructure layout per brand brief).

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

frontend/src/views/admin/ChatLogView.vue

@@ -1,10 +1,162 @@
 <script setup lang="ts">
-// TODO: Implement real-time chat feed from the game server
+import { ref, computed, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import type { ChatMessage } from '@/types'
+import { MessageSquare, Search, Flag, RefreshCw } from 'lucide-vue-next'
+
+const api = useApi()
+
+const messages = ref<ChatMessage[]>([])
+const isLoading = ref(false)
+const searchQuery = ref('')
+const channelFilter = ref<'all' | 'global' | 'team' | 'server'>('all')
+
+const filteredMessages = computed(() => {
+  let result = messages.value
+
+  if (channelFilter.value !== 'all') {
+    result = result.filter(m => m.channel === channelFilter.value)
+  }
+
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(m =>
+      m.player_name.toLowerCase().includes(q) ||
+      m.message.toLowerCase().includes(q) ||
+      m.steam_id.includes(q)
+    )
+  }
+
+  return result
+})
+
+function channelBadgeClass(channel: string): string {
+  switch (channel) {
+    case 'global': return 'bg-oxide-500/15 text-oxide-400'
+    case 'team': return 'bg-blue-500/15 text-blue-400'
+    case 'server': return 'bg-neutral-700/50 text-neutral-400'
+    default: return 'bg-neutral-700/50 text-neutral-400'
+  }
+}
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString('en-US', { hour12: false })
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+async function fetchMessages() {
+  isLoading.value = true
+  try {
+    const data = await api.get<{ messages: ChatMessage[] }>('/chat')
+    messages.value = data.messages
+  } catch {
+    // API not wired yet
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function toggleFlag(msg: ChatMessage) {
+  try {
+    await api.put(`/chat/${msg.id}/flag`, { flagged: !msg.flagged })
+    msg.flagged = !msg.flagged
+  } catch {
+    // Handle error
+  }
+}
+
+onMounted(() => {
+  fetchMessages()
+})
 </script>
 
 <template>
-  <div class="p-6">
+  <div class="p-6 space-y-6">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Chat Log</h1>
+    <!-- Header -->
-    <p class="text-neutral-400">Real-time chat feed from your Rust server with search and filtering.</p>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <MessageSquare class="w-5 h-5 text-oxide-500" />
+        <div>
+          <h1 class="text-2xl font-bold text-neutral-100">Chat Log</h1>
+          <p class="text-sm text-neutral-500 mt-0.5">{{ messages.length }} messages</p>
+        </div>
+      </div>
+      <button
+        @click="fetchMessages"
+        :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 messages, players, or Steam IDs..."
+          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', 'global', 'team', 'server'] as const)"
+          :key="opt"
+          @click="channelFilter = opt"
+          class="px-3 py-2 text-sm font-medium transition-colors capitalize"
+          :class="channelFilter === opt
+            ? 'bg-oxide-500/15 text-oxide-400'
+            : 'text-neutral-400 hover:text-neutral-200'"
+        >
+          {{ opt }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Messages -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg divide-y divide-neutral-800">
+      <div v-if="filteredMessages.length === 0" class="px-4 py-12 text-center text-neutral-500 text-sm">
+        <template v-if="isLoading">Loading chat messages...</template>
+        <template v-else-if="searchQuery">No messages matching "{{ searchQuery }}"</template>
+        <template v-else>No chat messages yet. Messages will appear when the server is active.</template>
+      </div>
+      <div
+        v-for="msg in filteredMessages"
+        :key="msg.id"
+        class="flex items-start gap-4 px-4 py-3 hover:bg-neutral-800/50 transition-colors"
+        :class="{ 'bg-red-500/5 border-l-2 border-l-red-500/30': msg.flagged }"
+      >
+        <div class="shrink-0 text-right w-20">
+          <p class="text-xs text-neutral-500">{{ formatDate(msg.created_at) }}</p>
+          <p class="text-xs text-neutral-600">{{ formatTime(msg.created_at) }}</p>
+        </div>
+        <span
+          class="shrink-0 text-xs font-medium px-2 py-0.5 rounded-full mt-0.5"
+          :class="channelBadgeClass(msg.channel)"
+        >
+          {{ msg.channel }}
+        </span>
+        <div class="flex-1 min-w-0">
+          <span class="text-sm font-medium text-oxide-400">{{ msg.player_name }}</span>
+          <span class="text-sm text-neutral-500 ml-2 font-mono">{{ msg.steam_id }}</span>
+          <p class="text-sm text-neutral-300 mt-0.5 break-words">{{ msg.message }}</p>
+        </div>
+        <button
+          @click="toggleFlag(msg)"
+          class="shrink-0 p-1 rounded transition-colors"
+          :class="msg.flagged ? 'text-red-400 hover:text-red-300' : 'text-neutral-600 hover:text-neutral-400'"
+          :title="msg.flagged ? 'Unflag message' : 'Flag message'"
+        >
+          <Flag class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
   </div>
 </template>

frontend/src/views/admin/NotificationsView.vue

@@ -1,10 +1,183 @@
 <script setup lang="ts">
-// TODO: Implement notification channel configuration for Discord and Pushbullet
+import { ref, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import type { NotificationConfig } from '@/types'
+import { Bell, Save, Loader2 } from 'lucide-vue-next'
+
+const api = useApi()
+
+const config = ref<NotificationConfig>({
+  discord_webhook_url: null,
+  discord_enabled: false,
+  pushbullet_api_key: null,
+  pushbullet_enabled: false,
+  email_alerts_enabled: false,
+  notify_wipe_start: true,
+  notify_wipe_complete: true,
+  notify_wipe_failed: true,
+  notify_server_crash: true,
+  notify_server_offline: true,
+  notify_store_purchase: false,
+})
+
+const saving = ref(false)
+const isLoading = ref(false)
+
+const eventToggles = [
+  { key: 'notify_wipe_start' as const, label: 'Wipe Started', desc: 'When a wipe begins' },
+  { key: 'notify_wipe_complete' as const, label: 'Wipe Complete', desc: 'When a wipe finishes successfully' },
+  { key: 'notify_wipe_failed' as const, label: 'Wipe Failed', desc: 'When a wipe fails or rolls back' },
+  { key: 'notify_server_crash' as const, label: 'Server Crash', desc: 'When the server process crashes' },
+  { key: 'notify_server_offline' as const, label: 'Server Offline', desc: 'When the server goes unreachable' },
+  { key: 'notify_store_purchase' as const, label: 'Store Purchase', desc: 'When a player buys from the store' },
+]
+
+async function fetchConfig() {
+  isLoading.value = true
+  try {
+    const data = await api.get<{ config: NotificationConfig }>('/notifications/config')
+    config.value = data.config
+  } catch {
+    // API not wired yet
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function saveConfig() {
+  saving.value = true
+  try {
+    await api.put('/notifications/config', config.value)
+  } catch {
+    // Handle error
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  fetchConfig()
+})
 </script>
 
 <template>
-  <div class="p-6">
+  <div class="p-6 space-y-6">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Notifications</h1>
+    <!-- Header -->
-    <p class="text-neutral-400">Configure Discord webhooks, Pushbullet, and other notification channels.</p>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <Bell class="w-5 h-5 text-oxide-500" />
+        <h1 class="text-2xl font-bold text-neutral-100">Notifications</h1>
+      </div>
+      <button
+        @click="saveConfig"
+        :disabled="saving"
+        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+      >
+        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
+        <Save v-else class="w-4 h-4" />
+        {{ saving ? 'Saving...' : 'Save Changes' }}
+      </button>
+    </div>
+
+    <!-- Discord -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h2 class="text-sm font-medium text-neutral-200">Discord Webhook</h2>
+          <p class="text-xs text-neutral-500 mt-0.5">Send notifications to a Discord channel</p>
+        </div>
+        <button
+          @click="config.discord_enabled = !config.discord_enabled"
+          class="w-9 h-5 rounded-full transition-colors"
+          :class="config.discord_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
+        >
+          <div
+            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+            :class="config.discord_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
+          />
+        </button>
+      </div>
+      <input
+        v-model="config.discord_webhook_url"
+        type="url"
+        placeholder="https://discord.com/api/webhooks/..."
+        :disabled="!config.discord_enabled"
+        class="w-full px-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 disabled:opacity-40"
+      />
+    </div>
+
+    <!-- Pushbullet -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h2 class="text-sm font-medium text-neutral-200">Pushbullet</h2>
+          <p class="text-xs text-neutral-500 mt-0.5">Push notifications to your devices</p>
+        </div>
+        <button
+          @click="config.pushbullet_enabled = !config.pushbullet_enabled"
+          class="w-9 h-5 rounded-full transition-colors"
+          :class="config.pushbullet_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
+        >
+          <div
+            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+            :class="config.pushbullet_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
+          />
+        </button>
+      </div>
+      <input
+        v-model="config.pushbullet_api_key"
+        type="text"
+        placeholder="Pushbullet API key"
+        :disabled="!config.pushbullet_enabled"
+        class="w-full px-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 disabled:opacity-40"
+      />
+    </div>
+
+    <!-- Email -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-sm font-medium text-neutral-200">Email Alerts</h2>
+          <p class="text-xs text-neutral-500 mt-0.5">Send critical alerts to your registered email</p>
+        </div>
+        <button
+          @click="config.email_alerts_enabled = !config.email_alerts_enabled"
+          class="w-9 h-5 rounded-full transition-colors"
+          :class="config.email_alerts_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
+        >
+          <div
+            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+            :class="config.email_alerts_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
+          />
+        </button>
+      </div>
+    </div>
+
+    <!-- Event Toggles -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Event Triggers</h2>
+      <div class="space-y-4">
+        <div
+          v-for="toggle in eventToggles"
+          :key="toggle.key"
+          class="flex items-center justify-between"
+        >
+          <div>
+            <p class="text-sm text-neutral-200">{{ toggle.label }}</p>
+            <p class="text-xs text-neutral-500">{{ toggle.desc }}</p>
+          </div>
+          <button
+            @click="config[toggle.key] = !config[toggle.key]"
+            class="w-9 h-5 rounded-full transition-colors"
+            :class="config[toggle.key] ? 'bg-oxide-500' : 'bg-neutral-700'"
+          >
+            <div
+              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+              :class="config[toggle.key] ? 'translate-x-4.5' : 'translate-x-0.5'"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>

frontend/src/views/admin/ServerView.vue

@@ -1,10 +1,296 @@
 <script setup lang="ts">
-// TODO: Implement server configuration and start/stop/restart controls
+import { ref, onMounted } from 'vue'
+import { useServerStore } from '@/stores/server'
+import {
+  Server,
+  Wifi,
+  WifiOff,
+  Play,
+  Square,
+  RotateCcw,
+  Save,
+  Loader2,
+} from 'lucide-vue-next'
+
+const server = useServerStore()
+
+const editMode = ref(false)
+const saving = ref(false)
+const actionLoading = ref<string | null>(null)
+
+const form = ref({
+  server_name: '',
+  max_players: 0,
+  world_size: 0,
+  current_seed: 0,
+})
+
+function loadFormFromConfig() {
+  if (server.config) {
+    form.value = {
+      server_name: server.config.server_name || '',
+      max_players: server.config.max_players ?? 100,
+      world_size: server.config.world_size ?? 4000,
+      current_seed: server.config.current_seed ?? 0,
+    }
+  }
+}
+
+async function saveConfig() {
+  saving.value = true
+  try {
+    await server.updateConfig(form.value)
+    editMode.value = false
+  } catch {
+    // Handle error
+  } finally {
+    saving.value = false
+  }
+}
+
+async function serverAction(action: 'start' | 'stop' | 'restart') {
+  actionLoading.value = action
+  try {
+    if (action === 'start') await server.startServer()
+    else if (action === 'stop') await server.stopServer()
+    else await server.restartServer()
+    await server.fetchServer()
+  } catch {
+    // Handle error
+  } finally {
+    actionLoading.value = null
+  }
+}
+
+onMounted(async () => {
+  await server.fetchServer()
+  loadFormFromConfig()
+})
 </script>
 
 <template>
-  <div class="p-6">
+  <div class="p-6 space-y-6">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Server Management</h1>
+    <!-- Header -->
-    <p class="text-neutral-400">Configure server settings and control start, stop, and restart operations.</p>
+    <div class="flex items-center gap-3">
+      <Server class="w-5 h-5 text-oxide-500" />
+      <h1 class="text-2xl font-bold text-neutral-100">Server Management</h1>
+    </div>
+
+    <!-- Connection Status Card -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Connection</h2>
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Status</p>
+          <div class="flex items-center gap-2">
+            <component
+              :is="server.connection?.connection_status === 'connected' ? Wifi : WifiOff"
+              class="w-4 h-4"
+              :class="server.connection?.connection_status === 'connected' ? 'text-green-400' : 'text-red-400'"
+            />
+            <span class="text-sm font-medium text-neutral-100 capitalize">
+              {{ server.connection?.connection_status || 'Unknown' }}
+            </span>
+          </div>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Connection Type</p>
+          <p class="text-sm font-medium text-neutral-100 uppercase">
+            {{ server.connection?.connection_type || '\u2014' }}
+          </p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Server IP</p>
+          <p class="text-sm font-mono text-neutral-300">
+            {{ server.connection?.server_ip || '\u2014' }}:{{ server.connection?.server_port || '' }}
+          </p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Game Port</p>
+          <p class="text-sm font-mono text-neutral-300">
+            {{ server.connection?.game_port || '\u2014' }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Server Controls -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Controls</h2>
+      <div class="flex flex-wrap gap-3">
+        <button
+          @click="serverAction('start')"
+          :disabled="server.connection?.connection_status === 'connected' || actionLoading !== null"
+          class="flex items-center gap-2 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"
+        >
+          <Loader2 v-if="actionLoading === 'start'" class="w-4 h-4 animate-spin" />
+          <Play v-else class="w-4 h-4" />
+          Start Server
+        </button>
+        <button
+          @click="serverAction('stop')"
+          :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
+          class="flex items-center gap-2 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"
+        >
+          <Loader2 v-if="actionLoading === 'stop'" class="w-4 h-4 animate-spin" />
+          <Square v-else class="w-4 h-4" />
+          Stop Server
+        </button>
+        <button
+          @click="serverAction('restart')"
+          :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
+          class="flex items-center gap-2 px-4 py-2.5 bg-oxide-600/20 hover:bg-oxide-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-oxide-400 border border-oxide-600/30 rounded-lg text-sm font-medium transition-colors"
+        >
+          <Loader2 v-if="actionLoading === 'restart'" class="w-4 h-4 animate-spin" />
+          <RotateCcw v-else class="w-4 h-4" />
+          Restart Server
+        </button>
+      </div>
+    </div>
+
+    <!-- Configuration -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Configuration</h2>
+        <button
+          v-if="!editMode"
+          @click="editMode = true; loadFormFromConfig()"
+          class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors"
+        >
+          Edit
+        </button>
+      </div>
+
+      <!-- Read mode -->
+      <div v-if="!editMode" class="grid grid-cols-2 lg:grid-cols-4 gap-6">
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Server Name</p>
+          <p class="text-sm text-neutral-200">{{ server.config?.server_name || 'Not configured' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Max Players</p>
+          <p class="text-sm text-neutral-200">{{ server.config?.max_players ?? '\u2014' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">World Size</p>
+          <p class="text-sm text-neutral-200">{{ server.config?.world_size ?? '\u2014' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Current Seed</p>
+          <p class="text-sm text-neutral-200">{{ server.config?.current_seed ?? '\u2014' }}</p>
+        </div>
+      </div>
+
+      <!-- Edit mode -->
+      <form v-else @submit.prevent="saveConfig" class="space-y-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="col-span-2">
+            <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
+            <input
+              v-model="form.server_name"
+              type="text"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            />
+          </div>
+          <div>
+            <label class="block text-xs text-neutral-500 mb-1">Max Players</label>
+            <input
+              v-model.number="form.max_players"
+              type="number"
+              min="1"
+              max="500"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            />
+          </div>
+          <div>
+            <label class="block text-xs text-neutral-500 mb-1">World Size</label>
+            <input
+              v-model.number="form.world_size"
+              type="number"
+              min="1000"
+              max="8000"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            />
+          </div>
+          <div>
+            <label class="block text-xs text-neutral-500 mb-1">Current Seed</label>
+            <input
+              v-model.number="form.current_seed"
+              type="number"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            />
+          </div>
+        </div>
+        <div class="flex items-center gap-3 pt-2">
+          <button
+            type="submit"
+            :disabled="saving"
+            class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+          >
+            <Save class="w-4 h-4" />
+            {{ saving ? 'Saving...' : 'Save Changes' }}
+          </button>
+          <button
+            type="button"
+            @click="editMode = false"
+            class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Advanced Settings -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Automation</h2>
+      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-neutral-200">Auto-Restart</p>
+            <p class="text-xs text-neutral-500">Restart on crash detection</p>
+          </div>
+          <div
+            class="w-9 h-5 rounded-full transition-colors cursor-pointer"
+            :class="server.config?.crash_recovery_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
+          >
+            <div
+              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+              :class="server.config?.crash_recovery_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
+            />
+          </div>
+        </div>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-neutral-200">Auto-Update on Force Wipe</p>
+            <p class="text-xs text-neutral-500">Update when Facepunch pushes</p>
+          </div>
+          <div
+            class="w-9 h-5 rounded-full transition-colors cursor-pointer"
+            :class="server.config?.auto_update_on_force_wipe ? 'bg-oxide-500' : 'bg-neutral-700'"
+          >
+            <div
+              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+              :class="server.config?.auto_update_on_force_wipe ? 'translate-x-4.5' : 'translate-x-0.5'"
+            />
+          </div>
+        </div>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-neutral-200">Force Wipe Eligible</p>
+            <p class="text-xs text-neutral-500">Server participates in force wipes</p>
+          </div>
+          <div
+            class="w-9 h-5 rounded-full transition-colors cursor-pointer"
+            :class="server.config?.force_wipe_eligible ? 'bg-oxide-500' : 'bg-neutral-700'"
+          >
+            <div
+              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
+              :class="server.config?.force_wipe_eligible ? 'translate-x-4.5' : 'translate-x-0.5'"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>

frontend/src/views/admin/SettingsView.vue

@@ -1,10 +1,210 @@
 <script setup lang="ts">
-// TODO: Implement settings for license, subdomain, and account management
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useApi } from '@/composables/useApi'
+import { Settings, Key, Globe, User, Save, Loader2 } from 'lucide-vue-next'
+
+const auth = useAuthStore()
+const api = useApi()
+
+const saving = ref(false)
+const section = ref<'account' | 'license' | 'domain'>('account')
+
+const accountForm = ref({
+  username: '',
+  email: '',
+})
+
+const domainForm = ref({
+  subdomain: '',
+  custom_domain: '',
+})
+
+function loadForms() {
+  if (auth.user) {
+    accountForm.value.username = auth.user.username
+    accountForm.value.email = auth.user.email
+  }
+  if (auth.license) {
+    domainForm.value.subdomain = auth.license.subdomain || ''
+    domainForm.value.custom_domain = auth.license.custom_domain || ''
+  }
+}
+
+async function saveAccount() {
+  saving.value = true
+  try {
+    await api.put('/auth/profile', accountForm.value)
+  } catch {
+    // Handle error
+  } finally {
+    saving.value = false
+  }
+}
+
+async function saveDomain() {
+  saving.value = true
+  try {
+    await api.put('/settings/domain', domainForm.value)
+  } catch {
+    // Handle error
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  loadForms()
+})
 </script>
 
 <template>
-  <div class="p-6">
+  <div class="p-6 space-y-6">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Settings</h1>
+    <!-- Header -->
-    <p class="text-neutral-400">Manage your license, subdomain configuration, and account settings.</p>
+    <div class="flex items-center gap-3">
+      <Settings class="w-5 h-5 text-oxide-500" />
+      <h1 class="text-2xl font-bold text-neutral-100">Settings</h1>
+    </div>
+
+    <!-- Section tabs -->
+    <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden w-fit">
+      <button
+        v-for="tab in ([
+          { key: 'account', label: 'Account', icon: User },
+          { key: 'license', label: 'License', icon: Key },
+          { key: 'domain', label: 'Domain', icon: Globe },
+        ] as const)"
+        :key="tab.key"
+        @click="section = tab.key"
+        class="flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors"
+        :class="section === tab.key
+          ? 'bg-oxide-500/15 text-oxide-400'
+          : 'text-neutral-400 hover:text-neutral-200'"
+      >
+        <component :is="tab.icon" class="w-4 h-4" />
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <!-- Account -->
+    <div v-if="section === 'account'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Account Details</h2>
+      <div class="grid grid-cols-2 gap-4">
+        <div>
+          <label class="block text-xs text-neutral-500 mb-1">Username</label>
+          <input
+            v-model="accountForm.username"
+            type="text"
+            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+          />
+        </div>
+        <div>
+          <label class="block text-xs text-neutral-500 mb-1">Email</label>
+          <input
+            v-model="accountForm.email"
+            type="email"
+            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+          />
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <p class="text-xs text-neutral-500">
+          2FA: <span :class="auth.user?.totp_enabled ? 'text-green-400' : 'text-yellow-400'">
+            {{ auth.user?.totp_enabled ? 'Enabled' : 'Not configured' }}
+          </span>
+        </p>
+      </div>
+      <button
+        @click="saveAccount"
+        :disabled="saving"
+        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+      >
+        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
+        <Save v-else class="w-4 h-4" />
+        Save
+      </button>
+    </div>
+
+    <!-- License -->
+    <div v-if="section === 'license'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">License Information</h2>
+      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">License Key</p>
+          <p class="text-sm font-mono text-neutral-300">{{ auth.license?.license_key || '\u2014' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Status</p>
+          <span
+            class="text-xs font-medium px-2 py-0.5 rounded-full"
+            :class="{
+              'bg-green-500/10 text-green-400': auth.license?.status === 'active',
+              'bg-yellow-500/10 text-yellow-400': auth.license?.status === 'suspended',
+              'bg-red-500/10 text-red-400': auth.license?.status === 'expired' || auth.license?.status === 'revoked',
+            }"
+          >
+            {{ auth.license?.status || 'Unknown' }}
+          </span>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Expires</p>
+          <p class="text-sm text-neutral-300">
+            {{ auth.license?.expires_at ? new Date(auth.license.expires_at).toLocaleDateString() : 'Never' }}
+          </p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Server Name</p>
+          <p class="text-sm text-neutral-300">{{ auth.license?.server_name || 'Not set' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Webstore</p>
+          <p class="text-sm text-neutral-300">{{ auth.license?.webstore_active ? 'Active' : 'Inactive' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-neutral-500 mb-1">Modules</p>
+          <p class="text-sm text-neutral-300">{{ auth.license?.modules_enabled?.length ?? 0 }} enabled</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Domain -->
+    <div v-if="section === 'domain'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
+      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Domain & Subdomain</h2>
+      <div class="space-y-4">
+        <div>
+          <label class="block text-xs text-neutral-500 mb-1">Subdomain</label>
+          <div class="flex items-center gap-0">
+            <input
+              v-model="domainForm.subdomain"
+              type="text"
+              placeholder="my-server"
+              class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-l-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"
+            />
+            <span class="px-3 py-2 bg-neutral-700 border border-l-0 border-neutral-700 rounded-r-lg text-sm text-neutral-400">
+              .corrosionmgmt.com
+            </span>
+          </div>
+        </div>
+        <div>
+          <label class="block text-xs text-neutral-500 mb-1">Custom Domain (optional)</label>
+          <input
+            v-model="domainForm.custom_domain"
+            type="text"
+            placeholder="panel.myserver.com"
+            class="w-full px-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"
+          />
+          <p class="text-xs text-neutral-600 mt-1">Point a CNAME record to panel.corrosionmgmt.com</p>
+        </div>
+      </div>
+      <button
+        @click="saveDomain"
+        :disabled="saving"
+        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+      >
+        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
+        <Save v-else class="w-4 h-4" />
+        Save
+      </button>
+    </div>
   </div>
 </template>

frontend/src/views/admin/TeamView.vue

@@ -1,10 +1,202 @@
 <script setup lang="ts">
-// TODO: Implement team management with role-based access control
+import { ref, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import type { TeamMember, Role } from '@/types'
+import { UserPlus, Shield, Mail, Trash2, RefreshCw } from 'lucide-vue-next'
+
+const api = useApi()
+
+const members = ref<TeamMember[]>([])
+const roles = ref<Role[]>([])
+const isLoading = ref(false)
+const showInvite = ref(false)
+const inviteEmail = ref('')
+const inviteRole = ref('')
+const inviting = ref(false)
+
+function roleBadgeClass(roleName: string): string {
+  switch (roleName.toLowerCase()) {
+    case 'owner': return 'bg-oxide-500/15 text-oxide-400'
+    case 'admin': return 'bg-purple-500/15 text-purple-400'
+    case 'moderator': return 'bg-blue-500/15 text-blue-400'
+    default: return 'bg-neutral-700/50 text-neutral-400'
+  }
+}
+
+async function fetchTeam() {
+  isLoading.value = true
+  try {
+    const data = await api.get<{ members: TeamMember[]; roles: Role[] }>('/team')
+    members.value = data.members
+    roles.value = data.roles
+  } catch {
+    // API not wired yet
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function sendInvite() {
+  if (!inviteEmail.value.trim() || !inviteRole.value) return
+  inviting.value = true
+  try {
+    await api.post('/team/invite', {
+      email: inviteEmail.value.trim(),
+      role_id: inviteRole.value,
+    })
+    inviteEmail.value = ''
+    inviteRole.value = ''
+    showInvite.value = false
+    await fetchTeam()
+  } catch {
+    // Handle error
+  } finally {
+    inviting.value = false
+  }
+}
+
+async function removeMember(member: TeamMember) {
+  if (!confirm(`Remove ${member.username} from the team?`)) return
+  try {
+    await api.del(`/team/${member.id}`)
+    await fetchTeam()
+  } catch {
+    // Handle error
+  }
+}
+
+onMounted(() => {
+  fetchTeam()
+})
 </script>
 
 <template>
-  <div class="p-6">
+  <div class="p-6 space-y-6">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Team Management</h1>
+    <!-- Header -->
-    <p class="text-neutral-400">Invite team members and manage role-based access to the panel.</p>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <UserPlus class="w-5 h-5 text-oxide-500" />
+        <div>
+          <h1 class="text-2xl font-bold text-neutral-100">Team Management</h1>
+          <p class="text-sm text-neutral-500 mt-0.5">{{ members.length }} members</p>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <button
+          @click="fetchTeam"
+          :disabled="isLoading"
+          class="flex items-center gap-2 px-3 py-2 text-sm text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
+        >
+          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
+        </button>
+        <button
+          @click="showInvite = !showInvite"
+          class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          <Mail class="w-4 h-4" />
+          Invite Member
+        </button>
+      </div>
+    </div>
+
+    <!-- Invite form -->
+    <div v-if="showInvite" class="bg-neutral-900 border border-oxide-500/20 rounded-lg p-5">
+      <h3 class="text-sm font-medium text-neutral-200 mb-3">Invite a Team Member</h3>
+      <form @submit.prevent="sendInvite" class="flex items-end gap-3">
+        <div class="flex-1">
+          <label class="block text-xs text-neutral-500 mb-1">Email Address</label>
+          <input
+            v-model="inviteEmail"
+            type="email"
+            required
+            placeholder="team@example.com"
+            class="w-full px-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="w-48">
+          <label class="block text-xs text-neutral-500 mb-1">Role</label>
+          <select
+            v-model="inviteRole"
+            required
+            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+          >
+            <option value="" disabled>Select role...</option>
+            <option v-for="role in roles" :key="role.id" :value="role.id">
+              {{ role.role_name }}
+            </option>
+          </select>
+        </div>
+        <button
+          type="submit"
+          :disabled="inviting"
+          class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          {{ inviting ? 'Sending...' : 'Send Invite' }}
+        </button>
+      </form>
+    </div>
+
+    <!-- Team 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">Member</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Email</th>
+            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Role</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 text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-neutral-800">
+          <tr v-if="members.length === 0">
+            <td colspan="5" class="px-4 py-12 text-center text-neutral-500 text-sm">
+              <template v-if="isLoading">Loading team...</template>
+              <template v-else>No team members yet. Invite someone to get started.</template>
+            </td>
+          </tr>
+          <tr
+            v-for="member in members"
+            :key="member.id"
+            class="hover:bg-neutral-800/50 transition-colors"
+          >
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                <Shield class="w-4 h-4 text-neutral-600" />
+                <span class="text-sm font-medium text-neutral-100">{{ member.username }}</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ member.email }}</td>
+            <td class="px-4 py-3">
+              <span
+                class="text-xs font-medium px-2 py-0.5 rounded-full"
+                :class="roleBadgeClass(member.role_name)"
+              >
+                {{ member.role_name }}
+              </span>
+            </td>
+            <td class="px-4 py-3">
+              <span
+                class="text-xs font-medium px-2 py-0.5 rounded-full"
+                :class="member.accepted_at
+                  ? 'bg-green-500/10 text-green-400'
+                  : 'bg-yellow-500/10 text-yellow-400'"
+              >
+                {{ member.accepted_at ? 'Active' : 'Pending' }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-right">
+              <button
+                @click="removeMember(member)"
+                class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
+                title="Remove member"
+              >
+                <Trash2 class="w-4 h-4" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>

frontend/src/views/auth/SetupWizardView.vue

@@ -1,10 +1,237 @@
 <script setup lang="ts">
-// TODO: Implement multi-step setup wizard for initial server configuration
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useApi } from '@/composables/useApi'
+import { Server, Wifi, CheckCircle, ArrowRight, Loader2 } from 'lucide-vue-next'
+
+const router = useRouter()
+const auth = useAuthStore()
+const api = useApi()
+
+const step = ref(1)
+const isLoading = ref(false)
+const error = ref('')
+
+const serverForm = ref({
+  server_name: '',
+  connection_type: 'bare_metal' as 'amp' | 'pterodactyl' | 'bare_metal',
+  server_ip: '',
+  server_port: 28016,
+  game_port: 28015,
+})
+
+const connectionTypes = [
+  { value: 'bare_metal', label: 'Bare Metal / VPS', desc: 'Direct connection via Companion Agent' },
+  { value: 'amp', label: 'AMP (CubeCoders)', desc: 'Connect through AMP panel API' },
+  { value: 'pterodactyl', label: 'Pterodactyl', desc: 'Connect through Pterodactyl panel API' },
+]
+
+async function submitServerConfig() {
+  if (!serverForm.value.server_name.trim()) {
+    error.value = 'Server name is required.'
+    return
+  }
+
+  error.value = ''
+  isLoading.value = true
+
+  try {
+    await api.post('/setup/server', serverForm.value)
+    step.value = 2
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : 'Setup failed. Please try again.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function completeSetup() {
+  isLoading.value = true
+  try {
+    await api.post('/setup/complete')
+    router.push('/')
+  } catch {
+    router.push('/')
+  }
+}
 </script>
 
 <template>
-  <div class="p-6">
+  <div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Setup Your Server</h1>
+    <div class="w-full max-w-lg">
-    <p class="text-neutral-400">Multi-step wizard to configure your Rust server for the first time.</p>
+      <!-- Progress -->
+      <div class="flex items-center justify-center gap-3 mb-8">
+        <div
+          class="flex items-center gap-2 text-sm"
+          :class="step >= 1 ? 'text-oxide-400' : 'text-neutral-600'"
+        >
+          <Server class="w-4 h-4" />
+          Server
+        </div>
+        <div class="w-8 h-px" :class="step >= 2 ? 'bg-oxide-500' : 'bg-neutral-700'" />
+        <div
+          class="flex items-center gap-2 text-sm"
+          :class="step >= 2 ? 'text-oxide-400' : 'text-neutral-600'"
+        >
+          <Wifi class="w-4 h-4" />
+          Connect
+        </div>
+        <div class="w-8 h-px" :class="step >= 3 ? 'bg-oxide-500' : 'bg-neutral-700'" />
+        <div
+          class="flex items-center gap-2 text-sm"
+          :class="step >= 3 ? 'text-oxide-400' : 'text-neutral-600'"
+        >
+          <CheckCircle class="w-4 h-4" />
+          Done
+        </div>
+      </div>
+
+      <!-- Step 1: Server Config -->
+      <div v-if="step === 1" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
+        <div class="text-center mb-6">
+          <img src="/logo.png" alt="Corrosion" class="h-12 w-12 mx-auto mb-3" />
+          <h1 class="text-xl font-bold text-neutral-100">Configure Your Server</h1>
+          <p class="text-sm text-neutral-500 mt-1">Let's get your Rust server connected to Corrosion.</p>
+        </div>
+
+        <div v-if="error" class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
+          {{ error }}
+        </div>
+
+        <form @submit.prevent="submitServerConfig" class="space-y-4">
+          <div>
+            <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
+            <input
+              v-model="serverForm.server_name"
+              type="text"
+              required
+              placeholder="My Rust Server"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            />
+          </div>
+
+          <div>
+            <label class="block text-xs text-neutral-500 mb-2">Connection Type</label>
+            <div class="space-y-2">
+              <label
+                v-for="ct in connectionTypes"
+                :key="ct.value"
+                class="flex items-start gap-3 p-3 bg-neutral-800 border rounded-lg cursor-pointer transition-colors"
+                :class="serverForm.connection_type === ct.value
+                  ? 'border-oxide-500/50 bg-oxide-500/5'
+                  : 'border-neutral-700 hover:border-neutral-600'"
+              >
+                <input
+                  v-model="serverForm.connection_type"
+                  :value="ct.value"
+                  type="radio"
+                  name="connection_type"
+                  class="mt-0.5 accent-oxide-500"
+                />
+                <div>
+                  <p class="text-sm font-medium text-neutral-200">{{ ct.label }}</p>
+                  <p class="text-xs text-neutral-500">{{ ct.desc }}</p>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-3 gap-3">
+            <div class="col-span-1">
+              <label class="block text-xs text-neutral-500 mb-1">Server IP</label>
+              <input
+                v-model="serverForm.server_ip"
+                type="text"
+                placeholder="0.0.0.0"
+                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              />
+            </div>
+            <div>
+              <label class="block text-xs text-neutral-500 mb-1">RCON Port</label>
+              <input
+                v-model.number="serverForm.server_port"
+                type="number"
+                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              />
+            </div>
+            <div>
+              <label class="block text-xs text-neutral-500 mb-1">Game Port</label>
+              <input
+                v-model.number="serverForm.game_port"
+                type="number"
+                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="isLoading"
+            class="w-full flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+          >
+            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
+            <template v-else>
+              Continue
+              <ArrowRight class="w-4 h-4" />
+            </template>
+          </button>
+        </form>
+      </div>
+
+      <!-- Step 2: Connection Instructions -->
+      <div v-if="step === 2" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
+        <div class="text-center mb-6">
+          <Wifi class="w-10 h-10 text-oxide-500 mx-auto mb-3" />
+          <h1 class="text-xl font-bold text-neutral-100">Install the Companion Agent</h1>
+          <p class="text-sm text-neutral-500 mt-1">
+            The Companion Agent runs on your server and connects to Corrosion securely — no inbound ports required.
+          </p>
+        </div>
+
+        <div class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 mb-6">
+          <p class="text-neutral-500 mb-2"># Download and install the Companion Agent</p>
+          <p class="text-oxide-400">curl -sSL https://get.corrosionmgmt.com | sh</p>
+          <p class="text-neutral-500 mt-3 mb-2"># Start the agent with your license key</p>
+          <p class="text-oxide-400">corrosion-agent start --key {{ auth.license?.license_key || 'YOUR-LICENSE-KEY' }}</p>
+        </div>
+
+        <p class="text-xs text-neutral-500 text-center mb-6">
+          The agent will automatically register with your panel. You can also use the uMod plugin for lightweight integration.
+        </p>
+
+        <div class="flex gap-3">
+          <button
+            @click="step = 3"
+            class="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium rounded-lg text-sm transition-colors text-center"
+          >
+            Skip for Now
+          </button>
+          <button
+            @click="step = 3"
+            class="flex-1 flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg text-sm transition-colors"
+          >
+            I've Installed It
+            <ArrowRight class="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Step 3: Complete -->
+      <div v-if="step === 3" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 text-center">
+        <CheckCircle class="w-12 h-12 text-green-400 mx-auto mb-4" />
+        <h1 class="text-xl font-bold text-neutral-100 mb-2">You're All Set</h1>
+        <p class="text-sm text-neutral-500 mb-6">
+          Your server is configured. Head to the dashboard to start managing your Rust server.
+        </p>
+        <button
+          @click="completeSetup"
+          :disabled="isLoading"
+          class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+        >
+          Go to Dashboard
+        </button>
+      </div>
+    </div>
   </div>
 </template>