@onmax/nuxt-better-auth 0.0.2-alpha.9 → 0.0.3

package/dist/runtime/app/pages/__better-auth-devtools.vue

@@ -1,426 +1,380 @@
 <script setup>
+import { useFetch, useRuntimeConfig } from "#imports";
 import { useDevtoolsClient } from "@nuxt/devtools-kit/iframe-client";
-import { refDebounced } from "@vueuse/core";
-definePageMeta({ layout: false });
-const toast = useToast();
+import { computed, ref, watch, watchEffect } from "vue";
+const pageSize = 20;
+const tabLabels = {
+  sessions: "Sessions",
+  users: "Users",
+  accounts: "Accounts",
+  config: "Config"
+};
 const devtoolsClient = useDevtoolsClient();
 const runtimeConfig = useRuntimeConfig();
 const hasDb = computed(() => runtimeConfig.public.auth?.useDatabase ?? false);
 const isDark = computed(() => devtoolsClient.value?.host?.app?.colorMode?.value === "dark");
 watchEffect(() => {
-  if (import.meta.client) {
+  if (import.meta.client)
     document.documentElement.classList.toggle("dark", isDark.value);
-  }
+});
+const activeTab = ref(hasDb.value ? "sessions" : "config");
+const tabs = computed(() => hasDb.value ? ["sessions", "users", "accounts", "config"] : ["config"]);
+watch(hasDb, (enabled) => {
+  if (!enabled)
+    activeTab.value = "config";
 });
 const sessionsPage = ref(1);
 const usersPage = ref(1);
 const accountsPage = ref(1);
 const deleteConfirm = ref(null);
-const sessionsSearchRaw = ref("");
-const usersSearchRaw = ref("");
-const accountsSearchRaw = ref("");
-const sessionsSearch = refDebounced(sessionsSearchRaw, 300);
-const usersSearch = refDebounced(usersSearchRaw, 300);
-const accountsSearch = refDebounced(accountsSearchRaw, 300);
+const notice = ref("");
+const sessionsSearch = ref("");
+const usersSearch = ref("");
+const accountsSearch = ref("");
 watch(sessionsSearch, () => sessionsPage.value = 1);
 watch(usersSearch, () => usersPage.value = 1);
 watch(accountsSearch, () => accountsPage.value = 1);
-const sessionsQuery = computed(() => ({ page: sessionsPage.value, limit: 20, search: sessionsSearch.value }));
-const usersQuery = computed(() => ({ page: usersPage.value, limit: 20, search: usersSearch.value }));
-const accountsQuery = computed(() => ({ page: accountsPage.value, limit: 20, search: accountsSearch.value }));
+const sessionsQuery = computed(() => ({ page: sessionsPage.value, limit: pageSize, search: sessionsSearch.value }));
+const usersQuery = computed(() => ({ page: usersPage.value, limit: pageSize, search: usersSearch.value }));
+const accountsQuery = computed(() => ({ page: accountsPage.value, limit: pageSize, search: accountsSearch.value }));
 const { data: sessionsData, refresh: refreshSessions } = await useFetch("/api/_better-auth/sessions", { query: sessionsQuery, immediate: hasDb.value });
 const { data: usersData, refresh: refreshUsers } = await useFetch("/api/_better-auth/users", { query: usersQuery, immediate: hasDb.value });
 const { data: accountsData, refresh: refreshAccounts } = await useFetch("/api/_better-auth/accounts", { query: accountsQuery, immediate: hasDb.value });
 const { data: configData } = await useFetch("/api/_better-auth/config");
-const tabs = computed(() => {
-  const dbTabs = [
-    { label: "Sessions", value: "sessions", icon: "i-lucide-key", slot: "sessions" },
-    { label: "Users", value: "users", icon: "i-lucide-users", slot: "users" },
-    { label: "Accounts", value: "accounts", icon: "i-lucide-link", slot: "accounts" }
-  ];
-  const configTab = { label: "Config", value: "config", icon: "i-lucide-settings", slot: "config" };
-  return hasDb.value ? [...dbTabs, configTab] : [configTab];
-});
+const sessions = computed(() => sessionsData.value?.sessions ?? []);
+const users = computed(() => usersData.value?.users ?? []);
+const accounts = computed(() => accountsData.value?.accounts ?? []);
+let noticeTimer;
+function showNotice(message) {
+  notice.value = message;
+  if (noticeTimer)
+    clearTimeout(noticeTimer);
+  noticeTimer = setTimeout(() => notice.value = "", 2200);
+}
 function isExpired(date) {
-  if (!date)
-    return false;
-  return new Date(date) < /* @__PURE__ */ new Date();
+  return date ? new Date(date) < /* @__PURE__ */ new Date() : false;
 }
 function formatDate(date) {
-  if (!date)
-    return "-";
-  return new Date(date).toLocaleString();
+  return date ? new Date(date).toLocaleString() : "-";
 }
-function truncate(str, len = 12) {
+function truncate(str, len = 14) {
   if (!str)
     return "-";
   if (str.length <= len)
     return str;
-  const half = Math.floor((len - 1) / 2);
-  return `${str.slice(0, half)}\u2026${str.slice(-half)}`;
+  const half = Math.floor((len - 3) / 2);
+  return `${str.slice(0, half)}...${str.slice(-half)}`;
+}
+function totalPages(total) {
+  return Math.max(1, Math.ceil((total ?? 0) / pageSize));
+}
+function pageBack(page) {
+  page.value = Math.max(1, page.value - 1);
+}
+function pageNext(page, total) {
+  page.value = Math.min(totalPages(total), page.value + 1);
 }
 async function copyToClipboard(text, label = "Value") {
   try {
     await navigator.clipboard.writeText(text);
-    toast.add({ title: `${label} copied`, icon: "i-lucide-check", color: "success" });
+    showNotice(`${label} copied`);
   } catch {
-    toast.add({ title: "Copy failed", icon: "i-lucide-x", color: "error" });
+    showNotice("Copy failed");
   }
 }
 function generateConfigMarkdown() {
   const config = configData.value?.config;
   if (!config)
     return "";
-  const moduleJson = JSON.stringify(config.module, null, 2);
-  const serverJson = JSON.stringify(config.server, null, 2);
   return `## Module Config (\`nuxt.config.ts\`)
 
 \`\`\`json
-${moduleJson}
+${JSON.stringify(config.module ?? {}, null, 2)}
 \`\`\`
 
 ## Server Config (\`server/auth.config.ts\`)
 
 \`\`\`json
-${serverJson}
+${JSON.stringify(config.server ?? {}, null, 2)}
 \`\`\`
 `;
 }
+function json(value) {
+  return JSON.stringify(value ?? {}, null, 2);
+}
 async function deleteSession(id) {
   try {
-    await $fetch("/api/_better-auth/sessions", { method: "DELETE", body: { id } });
-    toast.add({ title: "Session deleted", icon: "i-lucide-trash-2", color: "success" });
+    const response = await fetch("/api/_better-auth/sessions", {
+      method: "DELETE",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ id })
+    });
+    if (!response.ok)
+      throw new Error("Delete failed");
     deleteConfirm.value = null;
-    refreshSessions();
+    showNotice("Session deleted");
+    await refreshSessions();
   } catch {
-    toast.add({ title: "Failed to delete session", icon: "i-lucide-x", color: "error" });
+    showNotice("Failed to delete session");
   }
 }
-const sessionColumns = [
-  { accessorKey: "id", header: "ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.id)) },
-  {
-    accessorKey: "userId",
-    header: "User",
-    cell: ({ row }) => h("div", { class: "min-w-0" }, [
-      h("p", { class: "font-mono text-sm truncate" }, truncate(row.original.userId)),
-      h("p", { class: "text-sm text-muted-foreground font-mono" }, row.original.ipAddress || "No IP")
-    ])
-  },
-  { accessorKey: "userAgent", header: "User Agent", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground max-w-48 truncate block" }, truncate(row.original.userAgent, 30)) },
-  {
-    accessorKey: "expiresAt",
-    header: "Status",
-    cell: ({ row }) => {
-      const expired = isExpired(row.original.expiresAt);
-      return h(resolveComponent("UBadge"), { color: expired ? "error" : "success", variant: "subtle", size: "sm" }, () => expired ? "Expired" : "Active");
-    }
-  },
-  { accessorKey: "createdAt", header: "Created", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground" }, formatDate(row.original.createdAt)) }
-];
-const userColumns = [
-  { accessorKey: "id", header: "ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.id)) },
-  {
-    accessorKey: "name",
-    header: "User",
-    cell: ({ row }) => h("div", { class: "min-w-0" }, [
-      h("p", { class: "font-medium truncate" }, row.original.name || "Unnamed"),
-      h("p", { class: "text-sm text-muted-foreground font-mono truncate" }, row.original.email)
-    ])
-  },
-  {
-    accessorKey: "emailVerified",
-    header: "Verified",
-    cell: ({ row }) => h(resolveComponent("UBadge"), { color: row.original.emailVerified ? "success" : "neutral", variant: "subtle", size: "sm" }, () => row.original.emailVerified ? "Yes" : "No")
-  },
-  { accessorKey: "createdAt", header: "Created", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground" }, formatDate(row.original.createdAt)) }
-];
-const accountColumns = [
-  { accessorKey: "id", header: "ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.id)) },
-  {
-    accessorKey: "providerId",
-    header: "Provider",
-    cell: ({ row }) => {
-      const provider = row.original.providerId;
-      const iconMap = { github: "i-simple-icons-github", google: "i-simple-icons-google", discord: "i-simple-icons-discord", twitter: "i-simple-icons-x", facebook: "i-simple-icons-facebook" };
-      return h("div", { class: "flex items-center gap-2" }, [
-        h(resolveComponent("UIcon"), { name: iconMap[provider] || "i-lucide-key", class: "size-4" }),
-        h("div", { class: "min-w-0" }, [
-          h("p", { class: "capitalize font-medium" }, provider),
-          h("p", { class: "text-sm text-muted-foreground font-mono truncate" }, truncate(row.original.accountId, 16))
-        ])
-      ]);
-    }
-  },
-  { accessorKey: "userId", header: "User ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.userId)) },
-  { accessorKey: "createdAt", header: "Created", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground" }, formatDate(row.original.createdAt)) }
-];
-function getSessionActions(row) {
-  return [
-    [{ label: "Copy ID", icon: "i-lucide-copy", click: () => copyToClipboard(row.id, "Session ID") }],
-    [{ label: "Delete", icon: "i-lucide-trash-2", color: "error", click: () => {
-      deleteConfirm.value = row.id;
-    } }]
-  ];
-}
-function getUserActions(row) {
-  return [
-    [{ label: "Copy ID", icon: "i-lucide-copy", click: () => copyToClipboard(row.id, "User ID") }],
-    [{ label: "Copy Email", icon: "i-lucide-mail", click: () => copyToClipboard(row.email, "Email") }]
-  ];
-}
-function getAccountActions(row) {
-  return [[{ label: "Copy ID", icon: "i-lucide-copy", click: () => copyToClipboard(row.id, "Account ID") }]];
+async function deleteConfirmedSession() {
+  if (deleteConfirm.value)
+    await deleteSession(deleteConfirm.value);
 }
 </script>
 
 <template>
-  <div class="min-h-screen bg-background text-foreground">
-    <!-- Header -->
-    <header class="flex items-center justify-between border-b border-border px-4 py-3">
-      <div class="flex items-center gap-3">
-        <svg width="60" height="45" viewBox="0 0 60 45" fill="none" class="h-4 w-auto" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z" class="fill-current" />
+  <div class="devtools-shell">
+    <header class="devtools-header">
+      <div class="brand">
+        <svg width="60" height="45" viewBox="0 0 60 45" fill="none" class="brand-mark" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z" fill="currentColor" />
         </svg>
-        <span class="font-medium text-sm">Better Auth DevTools</span>
-      </div>
-      <div class="flex items-center">
-        <a href="https://www.better-auth.com/docs" target="_blank" class="header-link border-r border-border">Docs</a>
-        <a href="https://github.com/onmax/nuxt-better-auth" target="_blank" class="header-link">
-          <UIcon name="i-simple-icons-github" class="size-4" />
-        </a>
+        <span>Better Auth DevTools</span>
       </div>
+      <nav class="links">
+        <a href="https://www.better-auth.com/docs" target="_blank" rel="noreferrer">Docs</a>
+        <a href="https://github.com/onmax/nuxt-better-auth" target="_blank" rel="noreferrer">GitHub</a>
+      </nav>
     </header>
 
-    <!-- Tabs -->
-    <UTabs :items="tabs" class="w-full" :ui="{ list: 'border-b border-border rounded-none bg-transparent justify-start', trigger: 'rounded-none data-[state=active]:shadow-none data-[state=active]:bg-[var(--tab-active-bg)] data-[state=active]:text-foreground flex-none text-muted-foreground' }">
-      <!-- Sessions Tab -->
-      <template #sessions>
-        <div class="p-4 space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <UInput v-model="sessionsSearchRaw" placeholder="Search by user ID or IP..." icon="i-lucide-search" class="max-w-xs" />
-            <div class="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
-              <span>{{ sessionsData?.total ?? 0 }} sessions</span>
-              <UButton variant="ghost" size="xs" icon="i-lucide-refresh-cw" @click="() => refreshSessions()" />
-            </div>
-          </div>
-
-          <UAlert v-if="deleteConfirm" title="Delete session?" description="This will invalidate the session immediately." color="error" variant="soft" icon="i-lucide-alert-triangle" :actions="[{ label: 'Cancel', color: 'neutral', variant: 'outline', onClick: () => {
-  deleteConfirm = null;
-} }, { label: 'Delete', color: 'error', onClick: () => deleteSession(deleteConfirm) }]" />
+    <nav class="tabs" aria-label="Devtools sections">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        type="button"
+        :class="{ active: activeTab === tab }"
+        @click="activeTab = tab"
+      >
+        {{ tabLabels[tab] }}
+      </button>
+    </nav>
 
-          <p v-if="sessionsData?.error" class="text-destructive text-sm">
-            {{ sessionsData.error }}
-          </p>
+    <p v-if="notice" class="notice">
+      {{ notice }}
+    </p>
 
-          <UTable v-else-if="sessionsData?.sessions?.length" :data="sessionsData.sessions" :columns="sessionColumns" class="rounded-none border border-border">
-            <template #actions="{ row }">
-              <UDropdownMenu :items="getSessionActions(row.original)">
-                <UButton variant="ghost" size="xs" icon="i-lucide-more-horizontal" />
-              </UDropdownMenu>
-            </template>
-          </UTable>
-
-          <p v-else class="text-muted-foreground text-sm py-8 text-center">
-            No sessions found
-          </p>
-
-          <UPagination v-if="(sessionsData?.total ?? 0) > 20" v-model:page="sessionsPage" :total="sessionsData?.total ?? 0" :items-per-page="20" />
-        </div>
-      </template>
-
-      <!-- Users Tab -->
-      <template #users>
-        <div class="p-4 space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <UInput v-model="usersSearchRaw" placeholder="Search by name or email..." icon="i-lucide-search" class="max-w-xs" />
-            <div class="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
-              <span>{{ usersData?.total ?? 0 }} users</span>
-              <UButton variant="ghost" size="xs" icon="i-lucide-refresh-cw" @click="() => refreshUsers()" />
-            </div>
+    <main class="panel">
+      <section v-if="activeTab === 'sessions'" class="section">
+        <div class="toolbar">
+          <input v-model="sessionsSearch" type="search" placeholder="Search by user ID or IP...">
+          <div class="toolbar-meta">
+            <span>{{ sessionsData?.total ?? 0 }} sessions</span>
+            <button type="button" @click="() => refreshSessions()">
+              Refresh
+            </button>
           </div>
+        </div>
 
-          <p v-if="usersData?.error" class="text-destructive text-sm">
-            {{ usersData.error }}
-          </p>
-
-          <UTable v-else-if="usersData?.users?.length" :data="usersData.users" :columns="userColumns" class="rounded-none border border-border">
-            <template #actions="{ row }">
-              <UDropdownMenu :items="getUserActions(row.original)">
-                <UButton variant="ghost" size="xs" icon="i-lucide-more-horizontal" />
-              </UDropdownMenu>
-            </template>
-          </UTable>
+        <div v-if="deleteConfirm" class="confirm">
+          <span>Delete this session?</span>
+          <button type="button" @click="deleteConfirm = null">
+            Cancel
+          </button>
+          <button type="button" class="danger" @click="deleteConfirmedSession">
+            Delete
+          </button>
+        </div>
 
-          <p v-else class="text-muted-foreground text-sm py-8 text-center">
-            No users found
-          </p>
+        <p v-if="sessionsData?.error" class="error">
+          {{ sessionsData.error }}
+        </p>
+        <table v-else-if="sessions.length">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>User</th>
+              <th>User Agent</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="session in sessions" :key="session.id">
+              <td><code>{{ truncate(session.id) }}</code></td>
+              <td>
+                <code>{{ truncate(session.userId) }}</code>
+                <small>{{ session.ipAddress || "No IP" }}</small>
+              </td>
+              <td>{{ truncate(session.userAgent, 32) }}</td>
+              <td>
+                <span class="badge" :class="isExpired(session.expiresAt) ? 'bad' : 'good'">
+                  {{ isExpired(session.expiresAt) ? "Expired" : "Active" }}
+                </span>
+              </td>
+              <td>{{ formatDate(session.createdAt) }}</td>
+              <td class="actions">
+                <button type="button" @click="copyToClipboard(session.id, 'Session ID')">
+                  Copy
+                </button>
+                <button type="button" class="danger" @click="deleteConfirm = session.id">
+                  Delete
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="empty">
+          No sessions found
+        </p>
 
-          <UPagination v-if="(usersData?.total ?? 0) > 20" v-model:page="usersPage" :total="usersData?.total ?? 0" :items-per-page="20" />
+        <div v-if="(sessionsData?.total ?? 0) > pageSize" class="pagination">
+          <button type="button" :disabled="sessionsPage === 1" @click="pageBack(sessionsPage)">
+            Previous
+          </button>
+          <span>Page {{ sessionsPage }} of {{ totalPages(sessionsData?.total) }}</span>
+          <button type="button" :disabled="sessionsPage >= totalPages(sessionsData?.total)" @click="pageNext(sessionsPage, sessionsData?.total)">
+            Next
+          </button>
         </div>
-      </template>
+      </section>
 
-      <!-- Accounts Tab -->
-      <template #accounts>
-        <div class="p-4 space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <UInput v-model="accountsSearchRaw" placeholder="Search by provider..." icon="i-lucide-search" class="max-w-xs" />
-            <div class="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
-              <span>{{ accountsData?.total ?? 0 }} accounts</span>
-              <UButton variant="ghost" size="xs" icon="i-lucide-refresh-cw" @click="() => refreshAccounts()" />
-            </div>
+      <section v-else-if="activeTab === 'users'" class="section">
+        <div class="toolbar">
+          <input v-model="usersSearch" type="search" placeholder="Search by name or email...">
+          <div class="toolbar-meta">
+            <span>{{ usersData?.total ?? 0 }} users</span>
+            <button type="button" @click="() => refreshUsers()">
+              Refresh
+            </button>
           </div>
+        </div>
 
-          <p v-if="accountsData?.error" class="text-destructive text-sm">
-            {{ accountsData.error }}
-          </p>
-
-          <UTable v-else-if="accountsData?.accounts?.length" :data="accountsData.accounts" :columns="accountColumns" class="rounded-none border border-border">
-            <template #actions="{ row }">
-              <UDropdownMenu :items="getAccountActions(row.original)">
-                <UButton variant="ghost" size="xs" icon="i-lucide-more-horizontal" />
-              </UDropdownMenu>
-            </template>
-          </UTable>
-
-          <p v-else class="text-muted-foreground text-sm py-8 text-center">
-            No accounts found
-          </p>
+        <p v-if="usersData?.error" class="error">
+          {{ usersData.error }}
+        </p>
+        <table v-else-if="users.length">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>User</th>
+              <th>Verified</th>
+              <th>Created</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="user in users" :key="user.id">
+              <td><code>{{ truncate(user.id) }}</code></td>
+              <td>
+                <strong>{{ user.name || "Unnamed" }}</strong>
+                <small>{{ user.email }}</small>
+              </td>
+              <td>
+                <span class="badge" :class="user.emailVerified ? 'good' : ''">
+                  {{ user.emailVerified ? "Yes" : "No" }}
+                </span>
+              </td>
+              <td>{{ formatDate(user.createdAt) }}</td>
+              <td class="actions">
+                <button type="button" @click="copyToClipboard(user.id, 'User ID')">
+                  Copy ID
+                </button>
+                <button type="button" @click="copyToClipboard(user.email, 'Email')">
+                  Copy Email
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="empty">
+          No users found
+        </p>
 
-          <UPagination v-if="(accountsData?.total ?? 0) > 20" v-model:page="accountsPage" :total="accountsData?.total ?? 0" :items-per-page="20" />
+        <div v-if="(usersData?.total ?? 0) > pageSize" class="pagination">
+          <button type="button" :disabled="usersPage === 1" @click="pageBack(usersPage)">
+            Previous
+          </button>
+          <span>Page {{ usersPage }} of {{ totalPages(usersData?.total) }}</span>
+          <button type="button" :disabled="usersPage >= totalPages(usersData?.total)" @click="pageNext(usersPage, usersData?.total)">
+            Next
+          </button>
         </div>
-      </template>
+      </section>
 
-      <!-- Config Tab -->
-      <template #config>
-        <div class="p-3 space-y-3">
-          <div class="flex items-center justify-end">
-            <UButton variant="ghost" size="xs" icon="i-lucide-copy" @click="copyToClipboard(generateConfigMarkdown(), 'Config')">
-              Copy
-            </UButton>
+      <section v-else-if="activeTab === 'accounts'" class="section">
+        <div class="toolbar">
+          <input v-model="accountsSearch" type="search" placeholder="Search by provider...">
+          <div class="toolbar-meta">
+            <span>{{ accountsData?.total ?? 0 }} accounts</span>
+            <button type="button" @click="() => refreshAccounts()">
+              Refresh
+            </button>
           </div>
+        </div>
 
-          <p v-if="configData?.error" class="text-destructive text-sm">
-            {{ configData.error }}
-          </p>
-
-          <template v-else-if="configData?.config?.server">
-            <!-- Row 1: Endpoints + Session + Auth Methods -->
-            <div class="grid gap-3 md:grid-cols-3">
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-globe" class="size-4" /><span>Endpoints</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Base URL</span><span class="font-mono">{{ configData.config.server.baseURL || "auto" }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Path</span><span class="font-mono">{{ configData.config.server.basePath }}</span>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-clock" class="size-4" /><span>Session</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Expires</span><span class="font-mono">{{ configData.config.server.session?.expiresIn }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Update</span><span class="font-mono">{{ configData.config.server.session?.updateAge }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Cache</span><UBadge :color="configData.config.server.session?.cookieCache ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.server.session?.cookieCache ? "On" : "Off" }}
-                  </UBadge>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-key-round" class="size-4" /><span>Auth</span>
-                </div>
-                <div class="flex flex-wrap gap-1">
-                  <UBadge v-if="configData.config.server.emailAndPassword" variant="subtle" color="success" size="sm">
-                    Email
-                  </UBadge>
-                  <UBadge v-for="provider in configData.config.server.socialProviders" :key="provider" variant="subtle" color="neutral" size="sm" class="capitalize">
-                    {{ provider }}
-                  </UBadge>
-                  <span v-if="!configData.config.server.emailAndPassword && !configData.config.server.socialProviders?.length" class="text-muted-foreground text-sm">None</span>
-                </div>
-              </div>
-            </div>
+        <p v-if="accountsData?.error" class="error">
+          {{ accountsData.error }}
+        </p>
+        <table v-else-if="accounts.length">
+          <thead>
+            <tr>
+              <th>Provider</th>
+              <th>Account</th>
+              <th>User ID</th>
+              <th>Created</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="account in accounts" :key="account.id">
+              <td class="capitalize">
+                {{ account.providerId }}
+              </td>
+              <td><code>{{ truncate(account.accountId, 18) }}</code></td>
+              <td><code>{{ truncate(account.userId) }}</code></td>
+              <td>{{ formatDate(account.createdAt) }}</td>
+              <td class="actions">
+                <button type="button" @click="copyToClipboard(account.id, 'Account ID')">
+                  Copy
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="empty">
+          No accounts found
+        </p>
 
-            <!-- Row 2: Security + Module + Plugins -->
-            <div class="grid gap-3 md:grid-cols-3">
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-shield" class="size-4" /><span>Security</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Cookies</span><span class="font-mono">{{ configData.config.server.advanced?.useSecureCookies }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">CSRF</span><UBadge :color="configData.config.server.advanced?.disableCSRFCheck ? 'error' : 'success'" variant="subtle" size="sm">
-                    {{ configData.config.server.advanced?.disableCSRFCheck ? "Off" : "On" }}
-                  </UBadge>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Rate Limit</span><UBadge :color="configData.config.server.rateLimit ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.server.rateLimit ? "On" : "Off" }}
-                  </UBadge>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-settings-2" class="size-4" /><span>Module</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Login</span><span class="font-mono">{{ configData.config.module?.redirects?.login }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Guest</span><span class="font-mono">{{ configData.config.module?.redirects?.guest }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">DB</span><UBadge :color="configData.config.module?.useDatabase ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.module?.useDatabase ? "Hub" : "Off" }}
-                  </UBadge>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">KV</span><UBadge :color="configData.config.module?.secondaryStorage ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.module?.secondaryStorage ? "On" : "Off" }}
-                  </UBadge>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-puzzle" class="size-4" /><span>Plugins</span>
-                </div>
-                <div class="flex flex-wrap gap-1">
-                  <UBadge v-for="plugin in configData.config.server.plugins" :key="plugin" variant="subtle" color="neutral" size="sm">
-                    {{ plugin }}
-                  </UBadge>
-                  <span v-if="!configData.config.server.plugins?.length" class="text-muted-foreground text-sm">None</span>
-                </div>
-              </div>
-            </div>
+        <div v-if="(accountsData?.total ?? 0) > pageSize" class="pagination">
+          <button type="button" :disabled="accountsPage === 1" @click="pageBack(accountsPage)">
+            Previous
+          </button>
+          <span>Page {{ accountsPage }} of {{ totalPages(accountsData?.total) }}</span>
+          <button type="button" :disabled="accountsPage >= totalPages(accountsData?.total)" @click="pageNext(accountsPage, accountsData?.total)">
+            Next
+          </button>
+        </div>
+      </section>
 
-            <!-- Trusted Origins (if any) -->
-            <div v-if="configData.config.server.trustedOrigins?.length" class="config-section">
-              <div class="config-header">
-                <UIcon name="i-lucide-shield-check" class="size-4" /><span>Trusted Origins</span>
-              </div>
-              <div class="flex flex-wrap gap-1">
-                <UBadge v-for="origin in configData.config.server.trustedOrigins" :key="origin" variant="subtle" color="neutral" size="sm" class="font-mono">
-                  {{ origin }}
-                </UBadge>
-              </div>
-            </div>
-          </template>
+      <section v-else class="section config-grid">
+        <div class="toolbar">
+          <span />
+          <button type="button" @click="copyToClipboard(generateConfigMarkdown(), 'Config')">
+            Copy config
+          </button>
         </div>
-      </template>
-    </UTabs>
+
+        <p v-if="configData?.error" class="error">
+          {{ configData.error }}
+        </p>
+        <template v-else>
+          <article>
+            <h2>Module Config</h2>
+            <pre>{{ json(configData?.config?.module) }}</pre>
+          </article>
+          <article>
+            <h2>Server Config</h2>
+            <pre>{{ json(configData?.config?.server) }}</pre>
+          </article>
+        </template>
+      </section>
+    </main>
   </div>
 </template>
 
 <style>
-:root{--background:#fff;--foreground:#0c0a09;--card:#fff;--card-foreground:#0c0a09;--muted-foreground:#78716c;--border:#e7e5e4;--destructive:#ef4444;--tab-active-bg:#eeedec}.dark{--background:#0c0a09;--foreground:#fafaf9;--card:#0c0a09;--card-foreground:#fafaf9;--muted-foreground:#a8a29e;--border:#292524;--destructive:#7f1d1d;--tab-active-bg:#292524}.bg-background{background-color:var(--background)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-destructive{color:var(--destructive)}.border-border{border-color:var(--border)}.header-link{align-items:center;color:var(--muted-foreground);display:flex;font-size:.75rem;padding:.5rem .75rem;position:relative;transition:color .2s}.header-link:hover{color:var(--foreground)}.header-link:after{background:var(--foreground);bottom:0;content:"";height:1px;left:.75rem;position:absolute;right:.75rem;transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}.header-link:hover:after{transform:scaleX(1)}.config-section{border:1px solid var(--border);padding:.5rem}.config-header{color:var(--muted-foreground);font-size:.8125rem;font-weight:500;gap:.375rem;margin-bottom:.375rem}.config-header,.config-row{align-items:center;display:flex}.config-row{font-size:.75rem;justify-content:space-between;padding:.125rem 0}.config-label{color:var(--muted-foreground)}
+:root{--ba-bg:#fff;--ba-fg:#1f1f1f;--ba-muted:#707070;--ba-border:#e5e5e5;--ba-soft:#f7f7f7;--ba-hover:#efefef;--ba-good:#047857;--ba-bad:#b91c1c}.dark{--ba-bg:#111;--ba-fg:#f4f4f5;--ba-muted:#a1a1aa;--ba-border:#2d2d2d;--ba-soft:#191919;--ba-hover:#242424;--ba-good:#34d399;--ba-bad:#f87171}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.devtools-shell{background:var(--ba-bg);color:var(--ba-fg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;min-height:100vh}.devtools-header{border-bottom:1px solid var(--ba-border);gap:16px;justify-content:space-between;min-height:48px;padding:0 16px}.actions,.brand,.confirm,.devtools-header,.links,.pagination,.toolbar,.toolbar-meta{align-items:center;display:flex}.brand{font-weight:600;gap:10px}.brand-mark{height:auto;width:24px}.links a{color:var(--ba-muted);padding:8px 10px;text-decoration:none}.links a:hover{color:var(--ba-fg)}.tabs{border-bottom:1px solid var(--ba-border);display:flex;gap:4px;padding:8px 12px 0}.actions button,.confirm button,.pagination button,.tabs button,.toolbar button{background:transparent;border:1px solid var(--ba-border);color:var(--ba-fg);cursor:pointer;min-height:30px;padding:5px 10px}.tabs button{border-bottom:0}.tabs button.active,button:hover:not(:disabled){background:var(--ba-hover)}button:disabled{color:var(--ba-muted);cursor:default}button.danger{color:var(--ba-bad)}.panel{padding:16px}.section{display:grid;gap:14px}.toolbar{gap:12px;justify-content:space-between}.actions,.confirm,.pagination,.toolbar-meta{gap:8px}input{background:var(--ba-bg);border:1px solid var(--ba-border);color:var(--ba-fg);padding:7px 10px;width:min(340px,100%)}table{border:1px solid var(--ba-border);border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--ba-border);padding:9px 10px;text-align:left;vertical-align:top}th{background:var(--ba-soft);font-weight:500}td small,th{color:var(--ba-muted)}td small{display:block;margin-top:3px}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.badge{background:var(--ba-soft);border:1px solid var(--ba-border);color:var(--ba-muted);display:inline-flex;padding:2px 8px}.badge.good{color:var(--ba-good)}.badge.bad,.error{color:var(--ba-bad)}.confirm,.empty,.notice{background:var(--ba-soft);border:1px solid var(--ba-border);padding:10px 12px}.empty,.notice{color:var(--ba-muted)}.config-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.config-grid .error,.config-grid .toolbar{grid-column:1/-1}article{background:var(--ba-soft);border:1px solid var(--ba-border)}h2{border-bottom:1px solid var(--ba-border);font-size:13px;padding:10px 12px}h2,pre{margin:0}pre{font-size:12px;line-height:1.5;overflow:auto;padding:12px}.capitalize{text-transform:capitalize}@media (max-width:720px){.devtools-header,.toolbar,.toolbar-meta{align-items:stretch;flex-direction:column}.actions,.tabs{flex-wrap:wrap}table{display:block;overflow-x:auto}}
 </style>