feat: Frontend gap closure — Schedules, Alerts, Migration, Changelog views

Implements missing frontend views and API integrations:

New Views:
- SchedulesView: CRUD for scheduled tasks (restart/announcement/command/plugin_reload)
- MigrationView: Export/import interface with file upload and history tracking
- ChangelogView: Paginated changelog feed with category badges
- ForgotPasswordView: Password reset flow with email submission
- AlertsView: Alert config dashboard with threshold settings and history

Component Updates:
- ErrorBoundary: Global error handler with retry functionality
- DashboardLayout: Mobile responsive sidebar, permission-based nav, new menu items
- ServerInfoView: Complete rewrite for public server info display

Infrastructure:
- useApi: Token refresh interceptor with 401 retry and infinite loop prevention
- plugins store: Implemented all stubbed methods with real API calls
- auth store: Added hasPermission() helper for RBAC UI visibility
- Router: Added new routes with catch-all fallback

Purpose: Closes frontend implementation gaps. Hardens auth flow, improves mobile UX,
enables server automation scheduling, alert configuration, and data migration tools.

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

frontend/src/views/admin/AlertsView.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import { AlertTriangle, Save, Loader2 } from 'lucide-vue-next'
+
+interface AlertConfig {
+  population_drop_enabled: boolean
+  population_drop_threshold_percent: number
+  fps_degradation_enabled: boolean
+  fps_threshold: number
+  notify_discord: boolean
+  notify_pushbullet: boolean
+  notify_email: boolean
+}
+
+interface AlertHistoryEntry {
+  id: string
+  triggered_at: string
+  alert_type: string
+  severity: 'info' | 'warning' | 'critical'
+  title: string
+  message: string
+}
+
+const api = useApi()
+const config = ref<AlertConfig>({
+  population_drop_enabled: false,
+  population_drop_threshold_percent: 50,
+  fps_degradation_enabled: false,
+  fps_threshold: 30,
+  notify_discord: false,
+  notify_pushbullet: false,
+  notify_email: false,
+})
+const history = ref<AlertHistoryEntry[]>([])
+const isSaving = ref(false)
+const isLoading = ref(false)
+
+async function fetchConfig() {
+  isLoading.value = true
+  try {
+    config.value = await api.get<AlertConfig>('/alerts/config')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function fetchHistory() {
+  history.value = await api.get<AlertHistoryEntry[]>('/alerts/history?limit=50')
+}
+
+async function saveConfig() {
+  isSaving.value = true
+  try {
+    await api.put('/alerts/config', config.value)
+    alert('Alert configuration saved')
+  } catch (err) {
+    alert(err instanceof Error ? err.message : 'Failed to save configuration')
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function getSeverityColor(severity: string): string {
+  switch (severity) {
+    case 'info': return 'bg-blue-500/10 text-blue-400'
+    case 'warning': return 'bg-yellow-500/10 text-yellow-400'
+    case 'critical': return 'bg-red-500/10 text-red-400'
+    default: return 'bg-neutral-700/50 text-neutral-400'
+  }
+}
+
+onMounted(() => {
+  fetchConfig()
+  fetchHistory()
+})
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center gap-3">
+      <AlertTriangle class="w-5 h-5 text-oxide-500" />
+      <h1 class="text-2xl font-bold text-neutral-100">Alerts</h1>
+    </div>
+
+    <!-- Alert Configuration -->
+    <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">Alert Configuration</h2>
+
+      <div v-if="isLoading" class="py-8 flex justify-center">
+        <Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
+      </div>
+
+      <div v-else class="space-y-6">
+        <!-- Population Drop Alert -->
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <label class="text-sm font-medium text-neutral-200">Population Drop Alert</label>
+            <button
+              @click="config.population_drop_enabled = !config.population_drop_enabled"
+              class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+              :class="config.population_drop_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
+            >
+              <span
+                class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+                :class="config.population_drop_enabled ? 'translate-x-6' : 'translate-x-1'"
+              />
+            </button>
+          </div>
+          <div v-if="config.population_drop_enabled">
+            <label class="block text-xs text-neutral-500 mb-2">Threshold (%)</label>
+            <input
+              v-model.number="config.population_drop_threshold_percent"
+              type="range"
+              min="10"
+              max="100"
+              class="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-oxide-500"
+            />
+            <div class="text-xs text-neutral-400 mt-1">{{ config.population_drop_threshold_percent }}%</div>
+          </div>
+        </div>
+
+        <!-- FPS Degradation Alert -->
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <label class="text-sm font-medium text-neutral-200">FPS Degradation Alert</label>
+            <button
+              @click="config.fps_degradation_enabled = !config.fps_degradation_enabled"
+              class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+              :class="config.fps_degradation_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
+            >
+              <span
+                class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+                :class="config.fps_degradation_enabled ? 'translate-x-6' : 'translate-x-1'"
+              />
+            </button>
+          </div>
+          <div v-if="config.fps_degradation_enabled">
+            <label class="block text-xs text-neutral-500 mb-2">FPS Threshold</label>
+            <input
+              v-model.number="config.fps_threshold"
+              type="number"
+              min="10"
+              max="60"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
+            />
+          </div>
+        </div>
+
+        <!-- Notification Channels -->
+        <div class="border-t border-neutral-800 pt-4">
+          <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-3">Notification Channels</h3>
+          <div class="space-y-2">
+            <label class="flex items-center gap-3 cursor-pointer">
+              <input
+                v-model="config.notify_discord"
+                type="checkbox"
+                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-500 focus:ring-2 focus:ring-oxide-500"
+              />
+              <span class="text-sm text-neutral-200">Discord</span>
+            </label>
+            <label class="flex items-center gap-3 cursor-pointer">
+              <input
+                v-model="config.notify_pushbullet"
+                type="checkbox"
+                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-500 focus:ring-2 focus:ring-oxide-500"
+              />
+              <span class="text-sm text-neutral-200">Pushbullet</span>
+            </label>
+            <label class="flex items-center gap-3 cursor-pointer">
+              <input
+                v-model="config.notify_email"
+                type="checkbox"
+                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-500 focus:ring-2 focus:ring-oxide-500"
+              />
+              <span class="text-sm text-neutral-200">Email</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Save Button -->
+        <button
+          @click="saveConfig"
+          :disabled="isSaving"
+          class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+        >
+          <Loader2 v-if="isSaving" class="w-4 h-4 animate-spin" />
+          <Save v-else class="w-4 h-4" />
+          Save Configuration
+        </button>
+      </div>
+    </div>
+
+    <!-- Alert History -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
+      <div class="p-5 border-b border-neutral-800">
+        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Alert History</h2>
+      </div>
+      <div v-if="history.length === 0" class="p-8 text-center text-neutral-500">
+        No alerts triggered yet.
+      </div>
+      <table v-else class="w-full">
+        <thead class="bg-neutral-800/50 border-b border-neutral-800">
+          <tr>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Triggered</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Severity</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Title</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Message</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-neutral-800">
+          <tr v-for="alert in history" :key="alert.id" class="hover:bg-neutral-800/30">
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ new Date(alert.triggered_at).toLocaleString() }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ alert.alert_type }}</td>
+            <td class="px-4 py-3">
+              <span
+                class="text-xs font-medium px-2 py-0.5 rounded-full capitalize"
+                :class="getSeverityColor(alert.severity)"
+              >
+                {{ alert.severity }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-sm text-neutral-200">{{ alert.title }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ alert.message }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/ChangelogView.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import { FileText, Tag, Loader2 } from 'lucide-vue-next'
+
+interface ChangelogEntry {
+  id: string
+  version: string
+  title: string
+  body: string
+  category: 'feature' | 'bugfix' | 'module' | 'security'
+  published_at: string
+}
+
+const api = useApi()
+const entries = ref<ChangelogEntry[]>([])
+const isLoading = ref(false)
+const page = ref(1)
+const hasMore = ref(true)
+
+async function fetchChangelog() {
+  isLoading.value = true
+  try {
+    const result = await api.get<ChangelogEntry[]>(`/changelog?page=${page.value}&limit=20`)
+    if (result.length === 0) {
+      hasMore.value = false
+    } else {
+      entries.value.push(...result)
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function loadMore() {
+  page.value++
+  fetchChangelog()
+}
+
+function getCategoryColor(category: string): string {
+  switch (category) {
+    case 'feature': return 'bg-green-500/10 text-green-400'
+    case 'bugfix': return 'bg-red-500/10 text-red-400'
+    case 'module': return 'bg-blue-500/10 text-blue-400'
+    case 'security': return 'bg-yellow-500/10 text-yellow-400'
+    default: return 'bg-neutral-700/50 text-neutral-400'
+  }
+}
+
+onMounted(() => {
+  fetchChangelog()
+})
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center gap-3">
+      <FileText class="w-5 h-5 text-oxide-500" />
+      <h1 class="text-2xl font-bold text-neutral-100">Changelog</h1>
+    </div>
+
+    <!-- Changelog Feed -->
+    <div class="space-y-4">
+      <div
+        v-for="entry in entries"
+        :key="entry.id"
+        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
+      >
+        <div class="flex items-start justify-between mb-3">
+          <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2 px-2 py-1 bg-oxide-500/10 border border-oxide-500/20 rounded-lg">
+              <Tag class="w-3 h-3 text-oxide-400" />
+              <span class="text-xs font-mono text-oxide-400">{{ entry.version }}</span>
+            </div>
+            <span
+              class="text-xs font-medium px-2 py-0.5 rounded-full capitalize"
+              :class="getCategoryColor(entry.category)"
+            >
+              {{ entry.category }}
+            </span>
+          </div>
+          <span class="text-xs text-neutral-500">{{ new Date(entry.published_at).toLocaleDateString() }}</span>
+        </div>
+        <h3 class="text-lg font-bold text-neutral-100 mb-2">{{ entry.title }}</h3>
+        <div class="text-sm text-neutral-300 whitespace-pre-line leading-relaxed">
+          {{ entry.body }}
+        </div>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="isLoading" class="flex justify-center py-6">
+        <Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
+      </div>
+
+      <!-- Load More -->
+      <div v-else-if="hasMore" class="flex justify-center">
+        <button
+          @click="loadMore"
+          class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
+        >
+          Load More
+        </button>
+      </div>
+
+      <!-- End of List -->
+      <div v-else class="text-center py-6 text-sm text-neutral-500">
+        No more changelog entries
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/MigrationView.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import { Download, Upload, FileText, Loader2 } from 'lucide-vue-next'
+
+interface ExportRecord {
+  id: string
+  export_type: 'full' | 'config_only' | 'store_only'
+  file_size_bytes: number
+  created_at: string
+  download_url?: string
+}
+
+const api = useApi()
+const exports = ref<ExportRecord[]>([])
+const isExporting = ref(false)
+const isImporting = ref(false)
+const exportType = ref<'full' | 'config_only' | 'store_only'>('full')
+const uploadFile = ref<File | null>(null)
+
+async function fetchExports() {
+  exports.value = await api.get<ExportRecord[]>('/migration/exports')
+}
+
+async function createExport() {
+  if (!confirm(`Export ${exportType.value.replace('_', ' ')} data?`)) return
+  isExporting.value = true
+  try {
+    const result = await api.post<{ export_id: string }>('/migration/export', { export_type: exportType.value })
+    alert(`Export created: ${result.export_id}`)
+    await fetchExports()
+  } finally {
+    isExporting.value = false
+  }
+}
+
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    uploadFile.value = target.files[0]
+  }
+}
+
+async function importData() {
+  if (!uploadFile.value) return
+  if (!confirm('Import data? This will overwrite existing configuration.')) return
+
+  isImporting.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', uploadFile.value)
+
+    const response = await fetch('/api/migration/import', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error('Import failed')
+    }
+
+    alert('Import successful')
+    uploadFile.value = null
+  } catch (err) {
+    alert(err instanceof Error ? err.message : 'Import failed')
+  } finally {
+    isImporting.value = false
+  }
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
+}
+
+onMounted(() => {
+  fetchExports()
+})
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center gap-3">
+      <FileText class="w-5 h-5 text-oxide-500" />
+      <h1 class="text-2xl font-bold text-neutral-100">Migration</h1>
+    </div>
+
+    <!-- Export Section -->
+    <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">Export Data</h2>
+      <div class="flex items-end gap-4">
+        <div>
+          <label class="block text-xs text-neutral-500 mb-2">Export Type</label>
+          <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
+            <button
+              v-for="opt in (['full', 'config_only', 'store_only'] as const)"
+              :key="opt"
+              @click="exportType = opt"
+              class="px-4 py-2 text-sm font-medium transition-colors capitalize"
+              :class="exportType === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
+            >
+              {{ opt.replace('_', ' ') }}
+            </button>
+          </div>
+        </div>
+        <button
+          @click="createExport"
+          :disabled="isExporting"
+          class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+        >
+          <Loader2 v-if="isExporting" class="w-4 h-4 animate-spin" />
+          <Download v-else class="w-4 h-4" />
+          Export
+        </button>
+      </div>
+    </div>
+
+    <!-- Export History -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
+      <div class="p-5 border-b border-neutral-800">
+        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Export History</h2>
+      </div>
+      <div v-if="exports.length === 0" class="p-8 text-center text-neutral-500">
+        No exports yet.
+      </div>
+      <table v-else class="w-full">
+        <thead class="bg-neutral-800/50 border-b border-neutral-800">
+          <tr>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Created</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Size</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-neutral-800">
+          <tr v-for="exp in exports" :key="exp.id" class="hover:bg-neutral-800/30">
+            <td class="px-4 py-3 text-sm text-neutral-200 capitalize">{{ exp.export_type.replace('_', ' ') }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ new Date(exp.created_at).toLocaleString() }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatBytes(exp.file_size_bytes) }}</td>
+            <td class="px-4 py-3">
+              <a
+                v-if="exp.download_url"
+                :href="exp.download_url"
+                class="text-oxide-400 hover:text-oxide-300 text-sm transition-colors"
+              >
+                Download
+              </a>
+              <span v-else class="text-sm text-neutral-600">Preparing...</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Import Section -->
+    <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">Import Data</h2>
+      <div class="space-y-4">
+        <div class="border-2 border-dashed border-neutral-700 rounded-lg p-6 text-center">
+          <Upload class="w-8 h-8 text-neutral-500 mx-auto mb-2" />
+          <input
+            type="file"
+            accept=".json,.zip"
+            @change="handleFileSelect"
+            class="hidden"
+            id="file-upload"
+          />
+          <label for="file-upload" class="cursor-pointer">
+            <span class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors">
+              {{ uploadFile ? uploadFile.name : 'Click to select file' }}
+            </span>
+          </label>
+          <p class="text-xs text-neutral-500 mt-1">JSON or ZIP exports</p>
+        </div>
+        <button
+          @click="importData"
+          :disabled="!uploadFile || isImporting"
+          class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
+        >
+          <Loader2 v-if="isImporting" class="w-4 h-4 animate-spin" />
+          <Upload v-else class="w-4 h-4" />
+          Import
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/admin/SchedulesView.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
+import { Clock, Plus, Edit, Trash2, Power, Loader2 } from 'lucide-vue-next'
+
+interface ScheduledTask {
+  id: string
+  task_name: string
+  task_type: 'restart' | 'announcement' | 'command' | 'plugin_reload'
+  cron_expression: string
+  timezone: string
+  is_active: boolean
+  next_run: string | null
+  task_config: Record<string, any>
+}
+
+const api = useApi()
+const tasks = ref<ScheduledTask[]>([])
+const isLoading = ref(false)
+const showModal = ref(false)
+const editingTask = ref<ScheduledTask | null>(null)
+
+const formData = ref({
+  task_name: '',
+  task_type: 'restart' as 'restart' | 'announcement' | 'command' | 'plugin_reload',
+  cron_expression: '0 0 * * *',
+  timezone: 'UTC',
+  task_config: '{}',
+})
+
+const timezones = ['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'Europe/London', 'Europe/Paris', 'Asia/Tokyo']
+
+async function fetchTasks() {
+  isLoading.value = true
+  try {
+    tasks.value = await api.get<ScheduledTask[]>('/schedules/tasks')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function openCreateModal() {
+  editingTask.value = null
+  formData.value = {
+    task_name: '',
+    task_type: 'restart',
+    cron_expression: '0 0 * * *',
+    timezone: 'UTC',
+    task_config: '{}',
+  }
+  showModal.value = true
+}
+
+function openEditModal(task: ScheduledTask) {
+  editingTask.value = task
+  formData.value = {
+    task_name: task.task_name,
+    task_type: task.task_type,
+    cron_expression: task.cron_expression,
+    timezone: task.timezone,
+    task_config: JSON.stringify(task.task_config, null, 2),
+  }
+  showModal.value = true
+}
+
+async function saveTask() {
+  try {
+    const payload = {
+      ...formData.value,
+      task_config: JSON.parse(formData.value.task_config),
+    }
+
+    if (editingTask.value) {
+      await api.put(`/schedules/tasks/${editingTask.value.id}`, payload)
+    } else {
+      await api.post('/schedules/tasks', payload)
+    }
+
+    showModal.value = false
+    await fetchTasks()
+  } catch (err) {
+    alert(err instanceof Error ? err.message : 'Failed to save task')
+  }
+}
+
+async function deleteTask(id: string) {
+  if (!confirm('Delete this scheduled task?')) return
+  await api.del(`/schedules/tasks/${id}`)
+  await fetchTasks()
+}
+
+async function toggleActive(task: ScheduledTask) {
+  await api.put(`/schedules/tasks/${task.id}`, { is_active: !task.is_active })
+  await fetchTasks()
+}
+
+onMounted(() => {
+  fetchTasks()
+})
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <Clock class="w-5 h-5 text-oxide-500" />
+        <h1 class="text-2xl font-bold text-neutral-100">Scheduled Tasks</h1>
+      </div>
+      <button
+        @click="openCreateModal"
+        class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
+      >
+        <Plus class="w-4 h-4" />
+        New Task
+      </button>
+    </div>
+
+    <!-- Tasks Table -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
+      <div v-if="isLoading" class="p-8 flex justify-center">
+        <Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
+      </div>
+      <div v-else-if="tasks.length === 0" class="p-8 text-center text-neutral-500">
+        No scheduled tasks configured.
+      </div>
+      <table v-else class="w-full">
+        <thead class="bg-neutral-800/50 border-b border-neutral-800">
+          <tr>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Task Name</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Schedule</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timezone</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Next Run</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
+            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-neutral-800">
+          <tr v-for="task in tasks" :key="task.id" class="hover:bg-neutral-800/30">
+            <td class="px-4 py-3 text-sm text-neutral-200">{{ task.task_name }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400 capitalize">{{ task.task_type.replace('_', ' ') }}</td>
+            <td class="px-4 py-3 text-sm font-mono text-neutral-400">{{ task.cron_expression }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ task.timezone }}</td>
+            <td class="px-4 py-3 text-sm text-neutral-400">{{ task.next_run ? new Date(task.next_run).toLocaleString() : '—' }}</td>
+            <td class="px-4 py-3">
+              <span
+                class="text-xs font-medium px-2 py-0.5 rounded-full"
+                :class="task.is_active ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
+              >
+                {{ task.is_active ? 'Active' : 'Paused' }}
+              </span>
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                <button
+                  @click="toggleActive(task)"
+                  class="text-neutral-400 hover:text-oxide-400 transition-colors"
+                  :title="task.is_active ? 'Pause' : 'Activate'"
+                >
+                  <Power class="w-4 h-4" />
+                </button>
+                <button
+                  @click="openEditModal(task)"
+                  class="text-neutral-400 hover:text-oxide-400 transition-colors"
+                >
+                  <Edit class="w-4 h-4" />
+                </button>
+                <button
+                  @click="deleteTask(task.id)"
+                  class="text-neutral-400 hover:text-red-400 transition-colors"
+                >
+                  <Trash2 class="w-4 h-4" />
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Create/Edit Modal -->
+    <div
+      v-if="showModal"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      @click.self="showModal = false"
+    >
+      <div class="bg-neutral-900 border border-neutral-800 rounded-lg w-full max-w-lg">
+        <div class="p-5 border-b border-neutral-800">
+          <h2 class="text-lg font-bold text-neutral-100">{{ editingTask ? 'Edit Task' : 'New Task' }}</h2>
+        </div>
+        <div class="p-5 space-y-4">
+          <div>
+            <label class="block text-sm text-neutral-400 mb-2">Task Name</label>
+            <input
+              v-model="formData.task_name"
+              type="text"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500"
+              placeholder="Daily restart"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-neutral-400 mb-2">Task Type</label>
+            <select
+              v-model="formData.task_type"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
+            >
+              <option value="restart">Restart</option>
+              <option value="announcement">Announcement</option>
+              <option value="command">Command</option>
+              <option value="plugin_reload">Plugin Reload</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm text-neutral-400 mb-2">Cron Expression</label>
+            <input
+              v-model="formData.cron_expression"
+              type="text"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500"
+              placeholder="0 0 * * *"
+            />
+            <p class="text-xs text-neutral-500 mt-1">Example: "0 0 * * *" = daily at midnight</p>
+          </div>
+          <div>
+            <label class="block text-sm text-neutral-400 mb-2">Timezone</label>
+            <select
+              v-model="formData.timezone"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
+            >
+              <option v-for="tz in timezones" :key="tz" :value="tz">{{ tz }}</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm text-neutral-400 mb-2">Task Config (JSON)</label>
+            <textarea
+              v-model="formData.task_config"
+              rows="4"
+              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500"
+              placeholder='{"message": "Server restarting..."}'
+            />
+          </div>
+        </div>
+        <div class="p-5 border-t border-neutral-800 flex justify-end gap-3">
+          <button
+            @click="showModal = false"
+            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            @click="saveTask"
+            class="px-4 py-2 text-sm font-medium bg-oxide-500 hover:bg-oxide-600 text-white rounded-lg transition-colors"
+          >
+            {{ editingTask ? 'Update' : 'Create' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>