feat: add SQLite and MySQL database support with setup wizard selection (RCA-21)

Replace in-memory storage with a database abstraction layer supporting SQLite
and MySQL. Users choose their preferred database during the first-time setup
wizard. The server persists the database config to data/db-config.json and
loads it automatically on restart.

- Add database abstraction interfaces (ICookieStore, IDeviceStore, IAgentStore, IAdminStore)
- Implement SQLite driver using better-sqlite3 with WAL mode
- Implement MySQL driver using mysql2 connection pooling
- Keep memory-backed driver for backwards compatibility and testing
- Add database selection step (step 2) to the setup wizard UI
- Update setup API to accept dbConfig and initialize the chosen database
- Update RelayServer to use async store interfaces with runtime store replacement

Co-Authored-By: Paperclip <noreply@paperclip.ing>

web/src/views/SetupView.vue

@@ -7,14 +7,24 @@ import { markSetupComplete } from "@/router";
 const router = useRouter();
 
 const step = ref(1);
-const totalSteps = 4;
+const totalSteps = 5;
 
-// Step 2: Admin account
+// Step 2: Database config
+type DbType = "sqlite" | "mysql";
+const dbType = ref<DbType>("sqlite");
+const sqlitePath = ref("./data/cookiebridge.db");
+const mysqlHost = ref("localhost");
+const mysqlPort = ref(3306);
+const mysqlUser = ref("root");
+const mysqlPassword = ref("");
+const mysqlDatabase = ref("cookiebridge");
+
+// Step 3: Admin account
 const username = ref("");
 const password = ref("");
 const confirmPassword = ref("");
 
-// Step 3: Basic config
+// Step 4: Basic config
 const listenPort = ref(8100);
 const enableHttps = ref(false);
 
@@ -25,16 +35,28 @@ const passwordMismatch = computed(
   () => confirmPassword.value.length > 0 && password.value !== confirmPassword.value,
 );
 
-const canProceedStep2 = computed(
+const canProceedStep3 = computed(
   () =>
     username.value.length >= 3 &&
     password.value.length >= 8 &&
     password.value === confirmPassword.value,
 );
 
+const canProceedStep2 = computed(() => {
+  if (dbType.value === "sqlite") {
+    return sqlitePath.value.length > 0;
+  }
+  return (
+    mysqlHost.value.length > 0 &&
+    mysqlPort.value > 0 &&
+    mysqlUser.value.length > 0 &&
+    mysqlDatabase.value.length > 0
+  );
+});
+
 function nextStep() {
   error.value = "";
-  if (step.value === 2 && passwordMismatch.value) {
+  if (step.value === 3 && passwordMismatch.value) {
     error.value = "Passwords do not match";
     return;
   }
@@ -46,6 +68,20 @@ function prevStep() {
   step.value = Math.max(step.value - 1, 1);
 }
 
+function buildDbConfig() {
+  if (dbType.value === "sqlite") {
+    return { type: "sqlite" as const, path: sqlitePath.value };
+  }
+  return {
+    type: "mysql" as const,
+    host: mysqlHost.value,
+    port: mysqlPort.value,
+    user: mysqlUser.value,
+    password: mysqlPassword.value,
+    database: mysqlDatabase.value,
+  };
+}
+
 async function completeSetup() {
   error.value = "";
   loading.value = true;
@@ -53,11 +89,13 @@ async function completeSetup() {
     await api.post("/setup/init", {
       username: username.value,
       password: password.value,
+      dbConfig: buildDbConfig(),
     });
     markSetupComplete();
     step.value = totalSteps;
-  } catch {
-    error.value = "Setup failed. Please try again.";
+  } catch (e: unknown) {
+    const axiosError = e as { response?: { data?: { error?: string } } };
+    error.value = axiosError.response?.data?.error ?? "Setup failed. Please try again.";
   } finally {
     loading.value = false;
   }
@@ -110,8 +148,143 @@ function goToLogin() {
         </button>
       </div>
 
-      <!-- Step 2: Admin account -->
+      <!-- Step 2: Database selection -->
       <div v-if="step === 2">
+        <h2 class="text-xl font-semibold text-gray-900">Database Configuration</h2>
+        <p class="mt-1 text-sm text-gray-500">Choose how to store your data</p>
+
+        <div class="mt-5 space-y-4">
+          <!-- Database type selection -->
+          <div class="grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              class="rounded-lg border-2 px-4 py-3 text-left transition-colors"
+              :class="
+                dbType === 'sqlite'
+                  ? 'border-blue-600 bg-blue-50'
+                  : 'border-gray-200 hover:border-gray-300'
+              "
+              @click="dbType = 'sqlite'"
+            >
+              <p class="text-sm font-medium text-gray-900">SQLite</p>
+              <p class="mt-0.5 text-xs text-gray-500">Simple, no setup required</p>
+            </button>
+            <button
+              type="button"
+              class="rounded-lg border-2 px-4 py-3 text-left transition-colors"
+              :class="
+                dbType === 'mysql'
+                  ? 'border-blue-600 bg-blue-50'
+                  : 'border-gray-200 hover:border-gray-300'
+              "
+              @click="dbType = 'mysql'"
+            >
+              <p class="text-sm font-medium text-gray-900">MySQL</p>
+              <p class="mt-0.5 text-xs text-gray-500">For production deployments</p>
+            </button>
+          </div>
+
+          <!-- SQLite config -->
+          <div v-if="dbType === 'sqlite'">
+            <label class="block text-sm font-medium text-gray-700" for="sqlite-path">
+              Database File Path
+            </label>
+            <input
+              id="sqlite-path"
+              v-model="sqlitePath"
+              type="text"
+              class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              placeholder="./data/cookiebridge.db"
+            />
+            <p class="mt-1 text-xs text-gray-500">
+              File will be created automatically. Relative paths are from the server directory.
+            </p>
+          </div>
+
+          <!-- MySQL config -->
+          <div v-if="dbType === 'mysql'" class="space-y-3">
+            <div class="grid grid-cols-3 gap-3">
+              <div class="col-span-2">
+                <label class="block text-sm font-medium text-gray-700" for="mysql-host">Host</label>
+                <input
+                  id="mysql-host"
+                  v-model="mysqlHost"
+                  type="text"
+                  class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  placeholder="localhost"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700" for="mysql-port">Port</label>
+                <input
+                  id="mysql-port"
+                  v-model.number="mysqlPort"
+                  type="number"
+                  class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  placeholder="3306"
+                />
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="mysql-user">Username</label>
+              <input
+                id="mysql-user"
+                v-model="mysqlUser"
+                type="text"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                placeholder="root"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="mysql-password">
+                Password
+              </label>
+              <input
+                id="mysql-password"
+                v-model="mysqlPassword"
+                type="password"
+                autocomplete="off"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                placeholder="Optional"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="mysql-database">
+                Database Name
+              </label>
+              <input
+                id="mysql-database"
+                v-model="mysqlDatabase"
+                type="text"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                placeholder="cookiebridge"
+              />
+            </div>
+          </div>
+
+          <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+
+          <div class="flex gap-3 pt-2">
+            <button
+              type="button"
+              class="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+              @click="prevStep"
+            >
+              Back
+            </button>
+            <button
+              :disabled="!canProceedStep2"
+              class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+              @click="nextStep"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 3: Admin account -->
+      <div v-if="step === 3">
         <h2 class="text-xl font-semibold text-gray-900">Create Admin Account</h2>
         <p class="mt-1 text-sm text-gray-500">Set up your administrator credentials</p>
 
@@ -178,7 +351,7 @@ function goToLogin() {
             </button>
             <button
               type="submit"
-              :disabled="!canProceedStep2"
+              :disabled="!canProceedStep3"
               class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
             >
               Next
@@ -187,8 +360,8 @@ function goToLogin() {
         </form>
       </div>
 
-      <!-- Step 3: Basic config -->
-      <div v-if="step === 3">
+      <!-- Step 4: Basic config -->
+      <div v-if="step === 4">
         <h2 class="text-xl font-semibold text-gray-900">Basic Configuration</h2>
         <p class="mt-1 text-sm text-gray-500">Configure your relay server</p>
 
@@ -241,14 +414,14 @@ function goToLogin() {
               class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
               @click="completeSetup"
             >
-              {{ loading ? "Setting up..." : "Next" }}
+              {{ loading ? "Setting up..." : "Complete Setup" }}
             </button>
           </div>
         </div>
       </div>
 
-      <!-- Step 4: Done -->
-      <div v-if="step === 4" class="text-center">
+      <!-- Step 5: Done -->
+      <div v-if="step === 5" class="text-center">
         <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
           <span class="text-2xl text-green-600">&#10003;</span>
         </div>
@@ -256,6 +429,9 @@ function goToLogin() {
         <p class="mt-2 text-sm text-gray-500">
           Your CookieBridge server is ready. Sign in with your admin credentials.
         </p>
+        <p class="mt-1 text-xs text-gray-400">
+          Database: {{ dbType === 'sqlite' ? 'SQLite' : 'MySQL' }}
+        </p>
         <button
           class="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
           @click="goToLogin"