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/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">
-    <h1 class="text-2xl font-bold text-neutral-100 mb-4">Setup Your Server</h1>
-    <p class="text-neutral-400">Multi-step wizard to configure your Rust server for the first time.</p>
+  <div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
+    <div class="w-full max-w-lg">
+      <!-- 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>