npm - chadstart - Versions diffs - 1.0.0 - Mend

chadstart 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/.dockerignore +10 -0
package/.env.example +46 -0
package/.github/workflows/browser-test.yml +34 -0
package/.github/workflows/docker-publish.yml +54 -0
package/.github/workflows/docs.yml +31 -0
package/.github/workflows/npm-chadstart.yml +27 -0
package/.github/workflows/npm-sdk.yml +38 -0
package/.github/workflows/test.yml +85 -0
package/.weblate +9 -0
package/Dockerfile +23 -0
package/README.md +348 -0
package/admin/index.html +2802 -0
package/admin/login.html +207 -0
package/chadstart.example.yml +416 -0
package/chadstart.schema.json +367 -0
package/chadstart.yaml +53 -0
package/cli/cli.js +295 -0
package/core/api-generator.js +606 -0
package/core/auth.js +298 -0
package/core/db.js +384 -0
package/core/entity-engine.js +166 -0
package/core/error-reporter.js +132 -0
package/core/file-storage.js +97 -0
package/core/functions-engine.js +353 -0
package/core/openapi.js +171 -0
package/core/plugin-loader.js +92 -0
package/core/realtime.js +93 -0
package/core/schema-validator.js +50 -0
package/core/seeder.js +231 -0
package/core/telemetry.js +119 -0
package/core/upload.js +372 -0
package/core/workers/php_worker.php +19 -0
package/core/workers/python_worker.py +33 -0
package/core/workers/ruby_worker.rb +21 -0
package/core/yaml-loader.js +64 -0
package/demo/chadstart.yaml +178 -0
package/demo/docker-compose.yml +31 -0
package/demo/functions/greet.go +39 -0
package/demo/functions/hello.cpp +18 -0
package/demo/functions/hello.py +13 -0
package/demo/functions/hello.rb +10 -0
package/demo/functions/onTodoCreated.js +13 -0
package/demo/functions/ping.sh +13 -0
package/demo/functions/stats.js +22 -0
package/demo/public/index.html +522 -0
package/docker-compose.yml +17 -0
package/docs/access-policies.md +155 -0
package/docs/admin-ui.md +29 -0
package/docs/angular.md +69 -0
package/docs/astro.md +71 -0
package/docs/auth.md +160 -0
package/docs/cli.md +56 -0
package/docs/config.md +127 -0
package/docs/crud.md +627 -0
package/docs/deploy.md +113 -0
package/docs/docker.md +59 -0
package/docs/entities.md +385 -0
package/docs/functions.md +196 -0
package/docs/getting-started.md +79 -0
package/docs/groups.md +85 -0
package/docs/index.md +5 -0
package/docs/llm-rules.md +81 -0
package/docs/middlewares.md +78 -0
package/docs/overrides/home.html +350 -0
package/docs/plugins.md +59 -0
package/docs/react.md +75 -0
package/docs/realtime.md +43 -0
package/docs/s3-storage.md +40 -0
package/docs/security.md +23 -0
package/docs/stylesheets/extra.css +375 -0
package/docs/svelte.md +71 -0
package/docs/telemetry.md +97 -0
package/docs/upload.md +168 -0
package/docs/validation.md +115 -0
package/docs/vue.md +86 -0
package/docs/webhooks.md +87 -0
package/index.js +11 -0
package/locales/en/admin.json +169 -0
package/mkdocs.yml +82 -0
package/package.json +65 -0
package/playwright.config.js +24 -0
package/public/.gitkeep +0 -0
package/sdk/README.md +284 -0
package/sdk/package.json +39 -0
package/sdk/scripts/build.js +58 -0
package/sdk/src/index.js +368 -0
package/sdk/test/sdk.test.cjs +340 -0
package/sdk/types/index.d.ts +217 -0
package/server/express-server.js +734 -0
package/test/access-policies.test.js +96 -0
package/test/ai.test.js +81 -0
package/test/api-keys.test.js +361 -0
package/test/auth.test.js +122 -0
package/test/browser/admin-ui.spec.js +127 -0
package/test/browser/global-setup.js +71 -0
package/test/browser/global-teardown.js +11 -0
package/test/db.test.js +227 -0
package/test/entity-engine.test.js +193 -0
package/test/error-reporter.test.js +140 -0
package/test/functions-engine.test.js +240 -0
package/test/groups.test.js +212 -0
package/test/hot-reload.test.js +153 -0
package/test/i18n.test.js +173 -0
package/test/middleware.test.js +76 -0
package/test/openapi.test.js +67 -0
package/test/schema-validator.test.js +83 -0
package/test/sdk.test.js +90 -0
package/test/seeder.test.js +279 -0
package/test/settings.test.js +109 -0
package/test/telemetry.test.js +254 -0
package/test/test.js +17 -0
package/test/upload.test.js +265 -0
package/test/validation.test.js +96 -0
package/test/yaml-loader.test.js +93 -0
package/utils/logger.js +24 -0

package/admin/index.html ADDED Viewed

@@ -0,0 +1,2802 @@
+<!DOCTYPE html>
+<html lang="en" id="html-root">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ChadStart Admin</title>
+  <script src="/admin/vendor/tailwind.js"></script>
+  <style type="text/tailwindcss">
+    @theme {
+      --color-cs-bg: #121212;
+      --color-cs-surface: #1e1e1e;
+      --color-cs-border: #2a2a2a;
+      --color-cs-primary: #34b1eb;
+      --color-cs-accent: #03dac6;
+      --color-cs-text: #e1e1e1;
+      --color-cs-muted: #888888;
+    }
+  </style>
+  <style>
+    /* ── Sidebar nav items ─────────────────────────────────────────── */
+    .nav-item {
+      display: block; padding: 7px 16px; font-size: .875rem; cursor: pointer;
+      color: var(--color-cs-muted); border-left: 2px solid transparent;
+      transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .nav-item:hover { background: rgba(128,128,128,.08); color: var(--color-cs-text); }
+    .nav-item.active { background: rgba(52,177,235,.07); border-left-color: #34b1eb; color: #34b1eb; }
+    /* ── Thin sidebar scrollbar ────────────────────────────────────── */
+    .sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--color-cs-border) transparent; }
+    /* ── Config editor tab active state ────────────────────────────── */
+    .cfg-tab.active { background: rgba(52,177,235,.12); border-color: #34b1eb; color: #34b1eb; }
+    /* ── Animated glowing border button ────────────────────────────── */
+    @property --glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+    @keyframes spin-glow { to { --glow-a: 360deg; } }
+    .btn-glow {
+      border: 2px solid transparent;
+      background:
+        linear-gradient(var(--color-cs-surface), var(--color-cs-surface)) padding-box,
+        conic-gradient(from var(--glow-a), #34b1eb 0%, #0e7fc4 40%, transparent 60%, #34b1eb 100%) border-box;
+      animation: spin-glow 2s linear infinite;
+      color: #34b1eb; font-weight: 500;
+      transition: opacity 150ms ease;
+    }
+    .btn-glow:hover { opacity: 0.8; }
+    .btn-glow:disabled { opacity: 0.4; animation: none; }
+    /* ── Tab buttons ──────────────────────────────────────────────── */
+    .tab-btn { padding: 5px 14px; font-size: 12px; border: 1px solid var(--color-cs-border); border-radius: 4px; cursor: pointer; color: var(--color-cs-muted); background: transparent; transition: all 150ms; }
+    .tab-btn.active { border-color: #34b1eb; color: #34b1eb; background: rgba(52,177,235,.08); }
+    /* ── Code block ───────────────────────────────────────────────── */
+    .code-block { background: var(--color-cs-bg); border: 1px solid var(--color-cs-border); border-radius: 6px; padding: 12px 14px; font-family: monospace; font-size: 12px; color: var(--color-cs-text); white-space: pre; overflow-x: auto; line-height: 1.6; }
+    /* ── Activity feed ────────────────────────────────────────────── */
+    .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
+    .dot-create { background: #34b1eb; }
+    .dot-update { background: #fbbf24; }
+    .dot-delete { background: #f87171; }
+    /* ── Row highlight (vim nav) ──────────────────────────────────── */
+    tr.row-hl td { background: rgba(52,177,235,.06) !important; }
+  </style>
+  <script src="/admin/vendor/cronstrue.min.js"></script>
+</head>
+<body class="bg-cs-bg text-cs-text min-h-screen flex" style="font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;">
+<!-- ── Mobile sidebar backdrop ────────────────────────────────────────────── -->
+<div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden lg:hidden" onclick="closeSidebar()"></div>
+<!-- ── Sidebar ────────────────────────────────────────────────────────────── -->
+<aside id="sidebar"
+  class="fixed inset-y-0 left-0 z-40 w-60 bg-cs-surface border-r border-cs-border flex flex-col
+         -translate-x-full lg:translate-x-0" style="transition: transform 150ms ease;">
+  <div class="px-4 py-4 border-b border-cs-border">
+    <div id="project-name" class="text-lg font-bold text-cs-text truncate">Loading…</div>
+    <div class="text-[10px] text-cs-muted mt-0.5">Powered by ChadStart.com</div>
+  </div>
+  <nav class="sidebar-nav flex-1 overflow-y-auto py-2">
+    <div class="px-4 pt-2 pb-1 text-xs text-cs-muted">Overview</div>
+    <div id="nav-dashboard">
+      <div class="nav-item" id="nav-dashboard-item" onclick="selectDashboard(this)">📊 Dashboard</div>
+    </div>
+    <div class="px-4 pt-3 pb-1 text-xs text-cs-muted border-t border-cs-border mt-2">Collections</div>
+    <div id="nav-user-collections"></div>
+    <div class="px-4 pt-3 pb-1 text-xs text-cs-muted border-t border-cs-border mt-2">Entities</div>
+    <div id="nav-entities"></div>
+    <div class="px-4 pt-3 pb-1 text-xs text-cs-muted border-t border-cs-border mt-2">Admin</div>
+    <div id="nav-admin">
+      <div class="nav-item" id="nav-config-item" onclick="selectConfig(this)" data-i18n="sidebar.config_editor">⚙ Config Editor</div>
+      <div class="nav-item" id="nav-apikeys-item" onclick="selectApiKeys(this)" data-i18n="sidebar.api_keys">🔑 API Keys</div>
+    </div>
+  </nav>
+  <div class="border-t border-cs-border px-4 py-3">
+    <div class="flex items-center gap-2 mb-3">
+      <div id="user-avatar"
+        class="w-7 h-7 rounded bg-cs-border flex items-center justify-center font-medium text-xs text-cs-text shrink-0">?</div>
+      <div class="min-w-0 flex-1">
+        <div id="user-name" class="text-sm text-cs-text truncate">–</div>
+        <div id="user-collection-label" class="text-xs text-cs-muted truncate">–</div>
+      </div>
+    </div>
+    <button onclick="logout()"
+      class="w-full text-sm text-cs-muted border border-cs-border rounded py-1.5 px-3
+             hover:border-red-500/50 hover:text-red-400" style="transition: color 150ms ease, border-color 150ms ease;"
+      data-i18n="sidebar.log_out">Log out</button>
+  </div>
+</aside>
+<!-- ── Main ───────────────────────────────────────────────────────────────── -->
+<div id="main" class="flex-1 flex flex-col min-w-0 lg:ml-60">
+  <!-- Header -->
+  <header class="flex items-center justify-between px-5 py-3 border-b border-cs-border bg-cs-surface sticky top-0 z-20">
+    <div class="flex items-center gap-3">
+      <button class="lg:hidden text-cs-muted hover:text-cs-text" onclick="openSidebar()" aria-label="Menu" style="transition: color 150ms ease;">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+      </button>
+      <span id="page-title" class="font-medium text-sm text-cs-text">Dashboard</span>
+    </div>
+    <div id="header-actions" class="flex items-center gap-2">
+      <!-- Table-only buttons -->
+      <button onclick="openThemeSettings()" title="Theme Settings"
+        class="py-1.5 px-3 rounded text-sm cursor-pointer border border-cs-border text-cs-muted hover:text-cs-text" style="transition: color 150ms,background 150ms;">🎨 Theme</button>
+      <button id="btn-share" onclick="shareView()" title="Share current view"
+        class="hidden py-1.5 px-3 rounded text-sm cursor-pointer border border-cs-border text-cs-muted hover:text-cs-text" style="transition: color 150ms,background 150ms;">🔗 Share</button>
+      <button id="btn-devs" onclick="openDevsModal()"
+        class="hidden py-1.5 px-3 rounded text-sm cursor-pointer border border-cs-border text-cs-muted hover:text-cs-text" style="transition: color 150ms,background 150ms;">&lt;/&gt; Developers</button>
+      <button id="btn-seed" onclick="openSeedModal()"
+        class="py-1.5 px-3 rounded text-sm cursor-pointer border border-cs-border text-cs-muted hover:text-cs-text" style="transition: color 150ms,background 150ms;">🌱 Seed</button>
+      <button onclick="openShortcutsModal()" title="Keyboard shortcuts (?)"
+        class="py-1.5 px-2 rounded text-sm cursor-pointer border border-cs-border text-cs-muted hover:text-cs-text" style="transition: color 150ms,background 150ms;">?</button>
+      <button id="btn-add" onclick="openAddModal()"
+        class="btn-glow hidden py-1.5 px-3 rounded text-sm cursor-pointer">+ New record</button>
+      <!-- AI chat button — hidden until /admin/ai/status says configured -->
+      <button id="btn-ai" onclick="toggleAiPanel()"
+        class="hidden items-center gap-1.5 py-1.5 px-3 rounded text-sm cursor-pointer border border-cs-border text-cs-muted hover:text-cs-text hover:bg-cs-border"
+        style="transition: background 150ms ease, color 150ms ease;" title="Ask AI assistant">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+            d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+        </svg>
+        Ask AI
+      </button>
+    </div>
+  </header>
+  <main class="p-5 flex-1 overflow-auto">
+    <!-- Loading spinner -->
+    <div id="loading" class="hidden flex justify-center py-16">
+      <div class="w-6 h-6 border-2 border-cs-border border-t-cs-primary rounded-full animate-spin"></div>
+    </div>
+    <!-- ── Dashboard ──────────────────────────────────────────────────── -->
+    <div id="dashboard-area" class="hidden">
+      <div id="stats-grid" class="grid gap-4 mb-6" style="grid-template-columns: repeat(auto-fill, minmax(180px,1fr));"></div>
+      <div class="grid gap-4" style="grid-template-columns: 1fr 1fr;">
+        <div class="bg-cs-surface border border-cs-border rounded p-4">
+          <div class="text-sm font-medium text-cs-text mb-3 flex items-center gap-2">
+            <span>📡 Live Activity</span>
+            <span id="ws-badge" class="text-[10px] px-1.5 py-0.5 rounded" style="background:rgba(52,177,235,.12);color:#34b1eb;">connecting…</span>
+          </div>
+          <div id="activity-feed" class="space-y-0 max-h-80 overflow-y-auto text-xs"></div>
+        </div>
+        <div class="bg-cs-surface border border-cs-border rounded p-4">
+          <div class="text-sm font-medium text-cs-text mb-3">📈 Entity Summary</div>
+          <div id="entity-summary"></div>
+        </div>
+      </div>
+    </div>
+    <!-- ── Table view ──────────────────────────────────────────────────── -->
+    <div id="table-view" class="hidden">
+      <!-- Search & filter toolbar -->
+      <div id="search-toolbar" class="mb-4">
+        <div class="flex gap-2 flex-wrap items-center mb-2">
+          <input id="search-input" type="search" placeholder="Search…"
+            class="bg-cs-bg border border-cs-border rounded text-cs-text px-3 py-1.5 text-sm outline-none focus:border-cs-primary flex-1 min-w-40"
+            style="transition: border-color 150ms;" oninput="onSearchInput()" />
+          <button onclick="toggleAdvancedSearch()" id="btn-adv"
+            class="py-1.5 px-3 text-sm border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer whitespace-nowrap" style="transition: color 150ms;">⚙ Filters</button>
+          <select id="order-by-sel" onchange="onOrderChange()"
+            class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none cursor-pointer">
+            <option value="createdAt">Created</option>
+            <option value="updatedAt">Updated</option>
+            <option value="id">ID</option>
+          </select>
+          <select id="order-dir-sel" onchange="onOrderChange()"
+            class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none cursor-pointer">
+            <option value="DESC">↓ Desc</option>
+            <option value="ASC">↑ Asc</option>
+          </select>
+          <select id="per-page-sel" onchange="onPerPageChange()"
+            class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none cursor-pointer">
+            <option value="10">10/pg</option>
+            <option value="20" selected>20/pg</option>
+            <option value="50">50/pg</option>
+            <option value="100">100/pg</option>
+          </select>
+          <button onclick="exportData('csv')" title="Export CSV"
+            class="py-1.5 px-3 text-sm border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer whitespace-nowrap" style="transition: color 150ms;">↓ CSV</button>
+          <button onclick="exportData('json')" title="Export JSON"
+            class="py-1.5 px-3 text-sm border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer whitespace-nowrap" style="transition: color 150ms;">↓ JSON</button>
+          <button id="btn-columns" onclick="openColumnsPanel()" title="Customize columns"
+            class="py-1.5 px-3 text-sm border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer whitespace-nowrap" style="transition: color 150ms;">⊞ Columns</button>
+        </div>
+        <!-- Advanced filter panel -->
+        <div id="adv-panel" class="hidden bg-cs-surface border border-cs-border rounded p-3 mb-2">
+          <div class="text-xs text-cs-muted mb-2">Advanced Filters</div>
+          <div id="adv-filter-list" class="space-y-2"></div>
+          <div class="flex gap-2 mt-2">
+            <button onclick="addAdvFilter()" class="text-xs border border-cs-border rounded px-2 py-1 text-cs-muted hover:text-cs-text cursor-pointer">+ Add filter</button>
+            <button onclick="applyAdvFilters()" class="text-xs border rounded px-2 py-1 cursor-pointer" style="border-color:#34b1eb;color:#34b1eb;">Apply</button>
+            <button onclick="clearAdvFilters()" class="text-xs border border-cs-border rounded px-2 py-1 text-cs-muted hover:text-cs-text cursor-pointer">Clear</button>
+          </div>
+        </div>
+        <!-- Bulk actions bar -->
+        <div id="bulk-bar" class="hidden flex items-center gap-3 bg-cs-surface border border-cs-border rounded px-3 py-2 mb-2">
+          <span id="bulk-count" class="text-sm text-cs-text">0 selected</span>
+          <button onclick="bulkDelete()" class="text-xs border rounded px-2 py-1 cursor-pointer" style="border-color:rgba(239,68,68,.4);color:#f87171;">Delete selected</button>
+          <button onclick="clearSelection()" class="text-xs border border-cs-border rounded px-2 py-1 text-cs-muted hover:text-cs-text cursor-pointer">Clear</button>
+        </div>
+      </div>
+      <div id="table-area"></div>
+      <!-- Pagination -->
+      <div id="pagination" class="hidden flex items-center justify-between mt-4 flex-wrap gap-2">
+        <span id="pg-info" class="text-xs text-cs-muted"></span>
+        <div class="flex items-center gap-1">
+          <button onclick="goPage(1)" id="pg-first" class="px-2 py-1 text-xs border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer">«</button>
+          <button onclick="goPage(curPage-1)" id="pg-prev" class="px-2 py-1 text-xs border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer">‹</button>
+          <span id="pg-btns" class="flex gap-1"></span>
+          <button onclick="goPage(curPage+1)" id="pg-next" class="px-2 py-1 text-xs border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer">›</button>
+          <button onclick="goPage(curLastPage)" id="pg-last" class="px-2 py-1 text-xs border border-cs-border rounded text-cs-muted hover:text-cs-text cursor-pointer">»</button>
+        </div>
+      </div>
+    </div>
+    <!-- ── API Keys Panel ────────────────────────────────────────── -->
+    <div id="api-keys-area" class="hidden">
+      <div class="flex items-center justify-between mb-4">
+        <p class="text-xs" style="color:var(--color-cs-muted);">Manage API keys for programmatic access. Keys are shown only at creation time.</p>
+        <button onclick="openCreateApiKeyModal()"
+          class="text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer" style="transition:color 150ms,background 150ms;">+ Create API Key</button>
+      </div>
+      <div id="api-keys-list">
+        <div class="flex justify-center py-8"><div class="w-5 h-5 border-2 border-cs-border border-t-cs-primary rounded-full animate-spin"></div></div>
+      </div>
+    </div>
+    <!-- ── Config Editor ─────────────────────────────────────────── -->
+    <div id="config-area" class="hidden">
+      <div class="flex gap-1 flex-wrap mb-4 border-b border-cs-border pb-3">
+        <button onclick="showConfigTab('general')"   id="cfg-tab-general"   class="cfg-tab px-3 py-1.5 text-xs rounded border border-cs-border text-cs-muted hover:text-cs-text" style="transition:color 150ms,background 150ms;" data-i18n="config.tabs.general">General</button>
+        <button onclick="showConfigTab('entities')"  id="cfg-tab-entities"  class="cfg-tab px-3 py-1.5 text-xs rounded border border-cs-border text-cs-muted hover:text-cs-text" style="transition:color 150ms,background 150ms;" data-i18n="config.tabs.entities">Entities</button>
+        <button onclick="showConfigTab('functions')" id="cfg-tab-functions" class="cfg-tab px-3 py-1.5 text-xs rounded border border-cs-border text-cs-muted hover:text-cs-text" style="transition:color 150ms,background 150ms;" data-i18n="config.tabs.functions">Functions</button>
+        <button onclick="showConfigTab('files')"     id="cfg-tab-files"     class="cfg-tab px-3 py-1.5 text-xs rounded border border-cs-border text-cs-muted hover:text-cs-text" style="transition:color 150ms,background 150ms;" data-i18n="config.tabs.files">Files &amp; Uploads</button>
+        <button onclick="showConfigTab('settings')"  id="cfg-tab-settings"  class="cfg-tab px-3 py-1.5 text-xs rounded border border-cs-border text-cs-muted hover:text-cs-text" style="transition:color 150ms,background 150ms;" data-i18n="config.tabs.settings">Settings</button>
+        <button onclick="showConfigTab('all')"       id="cfg-tab-all"       class="cfg-tab px-3 py-1.5 text-xs rounded border border-cs-border text-cs-muted hover:text-cs-text" style="transition:color 150ms,background 150ms;" data-i18n="config.tabs.all">All</button>
+      </div>
+      <p id="cfg-section-desc" class="text-xs mb-3" style="color:var(--color-cs-muted);"></p>
+      <div id="cfg-form" class="hidden mb-6"></div>
+      <div id="cfg-json-section" class="hidden">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-xs font-medium" style="color:var(--color-cs-muted);" id="cfg-json-label">Full Configuration JSON</span>
+          <span class="text-xs" style="color:var(--color-cs-muted);" id="cfg-json-hint"></span>
+        </div>
+        <textarea id="cfg-editor"
+          class="w-full bg-cs-bg border border-cs-border rounded text-cs-text px-3 py-2.5 text-xs font-mono outline-none focus:border-cs-primary resize-y"
+          style="min-height:300px;transition:border-color 150ms;line-height:1.6;tab-size:2;"
+          spellcheck="false"></textarea>
+      </div>
+      <div class="flex items-center gap-3 mt-4">
+        <button onclick="saveConfig()" id="cfg-save-btn"
+          class="py-1.5 px-4 rounded text-sm cursor-pointer font-medium hover:opacity-90 disabled:opacity-50"
+          style="background:#34b1eb;color:#121212;transition:opacity 150ms;">Save Config</button>
+        <button onclick="resetConfigTab()"
+          class="text-sm border border-cs-border rounded py-1.5 px-4 text-cs-muted hover:text-cs-text hover:bg-cs-border" style="transition:color 150ms,background 150ms;"
+          data-i18n="config.reset_btn">Reset</button>
+        <span id="cfg-status" class="text-xs" style="color:var(--color-cs-muted);"></span>
+      </div>
+      <div id="cfg-s3-note" class="hidden mt-4 p-3 rounded border text-xs" style="border-color:var(--color-cs-border);color:var(--color-cs-muted);">
+        <strong style="color:var(--color-cs-text);">S3 Storage</strong> is configured via environment variables:<br>
+        <code style="color:#34b1eb;">S3_BUCKET</code>, <code style="color:#34b1eb;">S3_ENDPOINT</code>,
+        <code style="color:#34b1eb;">S3_REGION</code>, <code style="color:#34b1eb;">S3_ACCESS_KEY_ID</code>,
+        <code style="color:#34b1eb;">S3_SECRET_ACCESS_KEY</code>.<br>
+        Set these in your <code style="color:#34b1eb;">.env</code> file or deployment environment.
+      </div>
+    </div>
+  </main>
+</div>
+<!-- ── Toast ──────────────────────────────────────────────────────────────── -->
+<div id="toast" class="hidden fixed bottom-6 right-6 z-50"></div>
+<!-- ── Theme Settings modal ───────────────────────────────────────────────── -->
+<div id="theme-modal-backdrop" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-sm" style="box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm">🎨 Theme Settings</span>
+      <button onclick="closeThemeSettings()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div class="p-5 space-y-5">
+      <!-- Dark/Light mode -->
+      <div>
+        <div class="text-xs text-cs-muted mb-2">Mode</div>
+        <div class="flex gap-2">
+          <button id="theme-dark-btn" onclick="setThemeMode('dark')"
+            class="flex-1 py-2 text-sm rounded border cursor-pointer" style="transition: all 150ms;">Dark</button>
+          <button id="theme-light-btn" onclick="setThemeMode('light')"
+            class="flex-1 py-2 text-sm rounded border cursor-pointer" style="transition: all 150ms;">Light</button>
+        </div>
+      </div>
+      <!-- Primary color -->
+      <div>
+        <div class="text-xs text-cs-muted mb-2">Primary Color</div>
+        <div class="flex flex-wrap gap-2 mb-2" id="theme-palette">
+          <!-- populated by JS -->
+        </div>
+        <div class="flex items-center gap-2">
+          <input type="color" id="theme-custom-color" value="#34b1eb"
+            class="w-8 h-8 rounded cursor-pointer border border-cs-border bg-cs-bg"
+            style="padding: 1px;" oninput="onCustomColorInput(this.value)" />
+          <span class="text-xs text-cs-muted">Custom color</span>
+          <span id="theme-custom-hex" class="text-xs font-mono" style="color:var(--color-cs-muted);">#34b1eb</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- ── Columns visibility modal ───────────────────────────────────────────── -->
+<div id="columns-modal-backdrop" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-xs" style="box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm">⊞ Visible Columns</span>
+      <button onclick="closeColumnsPanel()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div class="p-4">
+      <p class="text-xs text-cs-muted mb-3">Choose which columns to show for <strong id="columns-entity-name" class="text-cs-text"></strong>.</p>
+      <div id="columns-list" class="space-y-1.5 max-h-60 overflow-y-auto mb-4"></div>
+      <div class="flex gap-2">
+        <button onclick="saveColumnsPrefs()"
+          class="flex-1 text-sm py-1.5 rounded cursor-pointer font-medium hover:opacity-90"
+          style="background:#34b1eb;color:#121212;transition:opacity 150ms;">Apply</button>
+        <button onclick="resetColumnsPrefs()"
+          class="text-sm border border-cs-border rounded py-1.5 px-3 text-cs-muted hover:text-cs-text cursor-pointer" style="transition: color 150ms, background 150ms;">Reset</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- ── Record lookup modal ─────────────────────────────────────────────────── -->
+<div id="lookup-modal-backdrop" class="fixed inset-0 bg-black/60 z-100 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-md max-h-[80vh] flex flex-col" style="box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span id="lookup-modal-title" class="font-medium text-sm">Record</span>
+      <button onclick="closeLookupModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div id="lookup-modal-body" class="p-5 overflow-y-auto flex-1 text-xs font-mono" style="color:var(--color-cs-text);white-space:pre;"></div>
+  </div>
+</div>
+<!-- ── ID Picker modal ──────────────────────────────────────────────────────── -->
+<div id="id-picker-backdrop" class="fixed inset-0 bg-black/60 z-100 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-lg max-h-[80vh] flex flex-col" style="box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span id="id-picker-title" class="font-medium text-sm">Select Record</span>
+      <button onclick="closeIdPicker()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div class="px-4 py-2 border-b border-cs-border">
+      <input id="id-picker-search" type="search" placeholder="Search…"
+        class="w-full bg-cs-bg border border-cs-border rounded text-cs-text px-3 py-1.5 text-sm outline-none focus:border-cs-primary"
+        style="transition: border-color 150ms;" oninput="onIdPickerSearch()" />
+    </div>
+    <div id="id-picker-list" class="overflow-y-auto flex-1 p-2 space-y-0.5"></div>
+  </div>
+</div>
+<!-- ── Impersonate modal ──────────────────────────────────────────────── -->
+<div id="impersonate-modal-backdrop" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-md" style="box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm">Impersonate User</span>
+      <button onclick="closeImpersonateModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div class="p-5">
+      <p class="text-xs mb-3" style="color:var(--color-cs-muted);">A short-lived token (1 hour) has been generated for this user. Use it to test API requests as this user.</p>
+      <div id="impersonate-user-info" class="mb-3 text-xs" style="color:var(--color-cs-muted);"></div>
+      <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">Token</label>
+      <textarea id="impersonate-token" readonly
+        class="w-full bg-cs-bg border border-cs-border rounded text-cs-text px-3 py-2 text-xs font-mono outline-none resize-none"
+        style="height:80px;line-height:1.5;" spellcheck="false"></textarea>
+      <div class="flex gap-2 mt-3">
+        <button onclick="copyImpersonateToken()"
+          class="text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer" style="transition:color 150ms,background 150ms;">Copy Token</button>
+        <button onclick="closeImpersonateModal()"
+          class="text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer" style="transition:color 150ms,background 150ms;">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- ── Create API Key modal ───────────────────────────────────────────── -->
+<div id="apikey-modal-backdrop" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-lg" style="box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm" id="apikey-modal-title">Create API Key</span>
+      <button onclick="closeApiKeyModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div class="p-5 space-y-4">
+      <!-- Result (shown after creation) -->
+      <div id="apikey-result" class="hidden">
+        <p class="text-xs mb-2" style="color:#03dac6;">✓ API key created. Copy it now — it will not be shown again.</p>
+        <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">Your API Key</label>
+        <div class="flex gap-2">
+          <input type="text" id="apikey-result-value" readonly
+            class="flex-1 bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-xs font-mono outline-none" />
+          <button onclick="copyApiKey()"
+            class="text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer whitespace-nowrap" style="transition:color 150ms,background 150ms;">Copy</button>
+        </div>
+        <button onclick="closeApiKeyModal()" class="mt-3 text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer" style="transition:color 150ms,background 150ms;">Close</button>
+      </div>
+      <!-- Form (shown before creation) -->
+      <div id="apikey-form">
+        <div class="space-y-3">
+          <div>
+            <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">Name</label>
+            <input type="text" id="apikey-name" placeholder="My API Key"
+              class="w-full bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none focus:border-cs-primary" style="transition:border-color 150ms;" />
+          </div>
+          <div>
+            <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">User (for admin creation)</label>
+            <select id="apikey-user-entity" class="w-full bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none focus:border-cs-primary" style="transition:border-color 150ms;">
+              <option value="">— Create for myself —</option>
+            </select>
+          </div>
+          <div id="apikey-user-id-row" class="hidden">
+            <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">User ID</label>
+            <input type="text" id="apikey-user-id" placeholder="user-uuid"
+              class="w-full bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none focus:border-cs-primary" style="transition:border-color 150ms;" />
+          </div>
+          <div>
+            <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">Permissions <span style="color:var(--color-cs-muted);">(leave empty for full access)</span></label>
+            <div class="flex flex-wrap gap-3">
+              <label class="flex items-center gap-1.5 text-xs cursor-pointer select-none" style="color:var(--color-cs-muted);"><input type="checkbox" class="apikey-perm" value="create" /> create</label>
+              <label class="flex items-center gap-1.5 text-xs cursor-pointer select-none" style="color:var(--color-cs-muted);"><input type="checkbox" class="apikey-perm" value="read" /> read</label>
+              <label class="flex items-center gap-1.5 text-xs cursor-pointer select-none" style="color:var(--color-cs-muted);"><input type="checkbox" class="apikey-perm" value="update" /> update</label>
+              <label class="flex items-center gap-1.5 text-xs cursor-pointer select-none" style="color:var(--color-cs-muted);"><input type="checkbox" class="apikey-perm" value="delete" /> delete</label>
+            </div>
+          </div>
+          <div>
+            <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">Entity access <span style="color:var(--color-cs-muted);">(leave empty for all entities)</span></label>
+            <div id="apikey-entities-list" class="flex flex-wrap gap-2"></div>
+          </div>
+          <div>
+            <label class="block text-xs mb-1" style="color:var(--color-cs-muted);">Expiration date <span style="color:var(--color-cs-muted);">(optional)</span></label>
+            <input type="datetime-local" id="apikey-expires"
+              class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none focus:border-cs-primary" style="transition:border-color 150ms;" />
+          </div>
+        </div>
+        <div id="apikey-form-error" class="hidden text-red-400 text-xs mt-2"></div>
+        <div class="flex gap-2 mt-4">
+          <button onclick="submitCreateApiKey()"
+            class="text-sm py-1.5 px-4 rounded cursor-pointer bg-cs-primary text-cs-bg font-medium hover:opacity-90 disabled:opacity-50" id="apikey-submit-btn" style="transition:opacity 150ms;">Create Key</button>
+          <button onclick="closeApiKeyModal()"
+            class="text-sm border border-cs-border rounded py-1.5 px-4 text-cs-muted hover:text-cs-text hover:bg-cs-border cursor-pointer" style="transition:color 150ms,background 150ms;">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- ── Record modal ───────────────────────────────────────────────────── -->
+<div id="modal-backdrop" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-lg max-h-[90vh] flex flex-col" style="box-shadow: 0 2px 8px rgba(0,0,0,.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span id="modal-title" class="font-medium text-sm">New record</span>
+      <button onclick="closeModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease;">×</button>
+    </div>
+    <div id="modal-body" class="p-5 overflow-y-auto flex-1"></div>
+    <div class="flex justify-end gap-2 px-5 py-3 border-t border-cs-border">
+      <button onclick="closeModal()"
+        class="text-sm border border-cs-border rounded py-1.5 px-4 text-cs-muted hover:text-cs-text hover:bg-cs-border" style="transition: color 150ms ease, background 150ms ease;"
+        data-i18n="modal.cancel">Cancel</button>
+      <button id="modal-save-btn" onclick="saveRecord()"
+        class="py-1.5 px-4 rounded text-sm cursor-pointer font-medium hover:opacity-90 disabled:opacity-50"
+        style="background:#34b1eb;color:#121212;transition:opacity 150ms;"><span>Save</span></button>
+    </div>
+  </div>
+</div>
+<!-- ── Developers modal ───────────────────────────────────────────────────── -->
+<div id="devs-modal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-2xl max-h-[90vh] flex flex-col" style="box-shadow: 0 2px 8px rgba(0,0,0,.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm">&lt;/&gt; Developer Examples</span>
+      <button onclick="closeDevsModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none">×</button>
+    </div>
+    <div class="px-5 pt-3 pb-2 flex gap-2 border-b border-cs-border">
+      <button class="tab-btn active" id="devs-sdk-tab" onclick="switchDevsTab('sdk')">JS SDK</button>
+      <button class="tab-btn" id="devs-rest-tab" onclick="switchDevsTab('rest')">cURL</button>
+    </div>
+    <div id="devs-body" class="p-5 overflow-y-auto flex-1"></div>
+  </div>
+</div>
+<!-- ── Seed modal ─────────────────────────────────────────────────────────── -->
+<div id="seed-modal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-md max-h-[90vh] flex flex-col" style="box-shadow: 0 2px 8px rgba(0,0,0,.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm">🌱 Seed Database</span>
+      <button onclick="closeSeedModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none">×</button>
+    </div>
+    <div class="p-5 overflow-y-auto flex-1">
+      <p class="text-xs text-cs-muted mb-4">Choose entities and how many fake records to generate.</p>
+      <div id="seed-list" class="space-y-2 mb-4"></div>
+      <div id="seed-result" class="hidden text-xs mt-2" style="color:#34b1eb;"></div>
+    </div>
+    <div class="flex justify-end gap-2 px-5 py-3 border-t border-cs-border">
+      <button onclick="closeSeedModal()" class="text-sm border border-cs-border rounded py-1.5 px-4 text-cs-muted hover:text-cs-text">Cancel</button>
+      <button id="seed-btn" onclick="doSeed()" class="py-1.5 px-4 rounded text-sm cursor-pointer font-medium hover:opacity-90" style="background:#34b1eb;color:#121212;transition:opacity 150ms;">Seed</button>
+    </div>
+  </div>
+</div>
+<!-- ── Keyboard shortcuts modal ───────────────────────────────────────────── -->
+<div id="shortcuts-modal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
+  <div class="bg-cs-surface border border-cs-border rounded w-full max-w-sm" style="box-shadow: 0 2px 8px rgba(0,0,0,.3);">
+    <div class="flex items-center justify-between px-5 py-3 border-b border-cs-border">
+      <span class="font-medium text-sm">⌨ Keyboard Shortcuts</span>
+      <button onclick="closeShortcutsModal()" class="text-cs-muted hover:text-cs-text text-xl leading-none">×</button>
+    </div>
+    <div class="p-5">
+      <table class="w-full text-xs">
+        <tbody>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">j / k</kbd></td><td class="py-1 text-cs-muted">Navigate rows down / up</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">/</kbd></td><td class="py-1 text-cs-muted">Focus search</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">n</kbd></td><td class="py-1 text-cs-muted">New record</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">e</kbd></td><td class="py-1 text-cs-muted">Edit highlighted row</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">d</kbd></td><td class="py-1 text-cs-muted">Delete highlighted row</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">] / [</kbd></td><td class="py-1 text-cs-muted">Next / previous page</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">g g</kbd></td><td class="py-1 text-cs-muted">First page</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">G</kbd></td><td class="py-1 text-cs-muted">Last page</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">Esc</kbd></td><td class="py-1 text-cs-muted">Close modal / blur</td></tr>
+          <tr><td class="py-1 pr-6"><kbd class="bg-cs-bg border border-cs-border rounded px-1.5 py-0.5 font-mono">?</kbd></td><td class="py-1 text-cs-muted">Show this help</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+<!-- ── AI Chat Panel ──────────────────────────────────────────────────── -->
+<div id="ai-panel"
+  class="fixed inset-y-0 right-0 z-50 w-full max-w-sm bg-cs-surface border-l border-cs-border flex flex-col"
+  style="translate: 100%; transition: translate 200ms ease; box-shadow: -2px 0 12px rgba(0,0,0,0.3);">
+  <!-- Panel header -->
+  <div class="flex items-center justify-between px-4 py-3 border-b border-cs-border shrink-0">
+    <div class="flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:#bb86fc;">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+          d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+      </svg>
+      <span class="font-medium text-sm text-cs-text">AI Assistant</span>
+    </div>
+    <div class="flex items-center gap-2">
+      <button onclick="clearAiChat()" class="text-xs text-cs-muted hover:text-cs-text" style="transition: color 150ms ease; background: none; border: none; cursor: pointer;" title="Clear chat">Clear</button>
+      <button onclick="closeAiPanel()" class="text-cs-muted hover:text-cs-text text-xl leading-none" style="transition: color 150ms ease; background: none; border: none; cursor: pointer;" aria-label="Close">×</button>
+    </div>
+  </div>
+  <!-- Messages area -->
+  <div id="ai-messages" class="flex-1 overflow-y-auto p-4 space-y-3" style="scrollbar-width: thin; scrollbar-color: #2a2a2a transparent;"></div>
+  <!-- Input area -->
+  <div class="shrink-0 border-t border-cs-border p-3">
+    <div class="flex gap-2">
+      <textarea id="ai-input" rows="2" placeholder="Ask anything about your data, API, or config…"
+        class="flex-1 bg-cs-bg border border-cs-border rounded text-cs-text px-3 py-2 text-sm outline-none focus:border-cs-primary resize-none"
+        style="transition: border-color 150ms ease; line-height: 1.4;"
+        onkeydown="aiInputKeydown(event)"></textarea>
+      <button id="ai-send-btn" onclick="sendAiMessage()"
+        class="py-2 px-3 rounded text-sm cursor-pointer bg-cs-primary text-cs-bg font-medium hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+        style="transition: opacity 150ms ease; align-self: flex-end;">Send</button>
+    </div>
+    <p class="text-xs mt-1.5 text-cs-muted">Shift+Enter for new line · Enter to send</p>
+  </div>
+</div>
+<script>
+  // ── i18n ───────────────────────────────────────────────────────────────
+  let i18n = {}, currentLang = 'en';
+  /**
+   * Load locale JSON from /admin/i18n/<lang>.
+   * Falls back to English when the requested language is unavailable.
+   */
+  async function loadI18n(lang) {
+    currentLang = lang;
+    try {
+      const res = await fetch(`/admin/i18n/${encodeURIComponent(lang)}`);
+      if (res.ok) { i18n = await res.json(); applyI18n(); return; }
+    } catch { /* ignore */ }
+    if (lang !== 'en') {
+      try {
+        const res = await fetch('/admin/i18n/en');
+        if (res.ok) { i18n = await res.json(); currentLang = 'en'; }
+      } catch { /* ignore */ }
+    }
+    applyI18n();
+  }
+  /**
+   * Translate a dot-separated key, optionally interpolating {{param}} placeholders.
+   * Falls back to the key itself when the translation is missing.
+   *
+   * @param {string} key     Dot-separated translation key, e.g. "login.sign_in".
+   * @param {object} [params] Interpolation parameters, e.g. { name: 'Post' }.
+   * @returns {string}
+   */
+  function t(key, params) {
+    const parts = key.split('.');
+    let val = i18n;
+    for (const p of parts) {
+      if (val && typeof val === 'object') val = val[p];
+      else { val = undefined; break; }
+    }
+    if (typeof val !== 'string') return key;
+    if (!params) return val;
+    return val.replace(/\{\{(\w+)\}\}/g, (_, k) => params[k] !== undefined ? String(params[k]) : `{{${k}}}`);
+  }
+  /** Apply translations to all [data-i18n] and [data-i18n-ph] elements. */
+  function applyI18n() {
+    document.documentElement.lang = currentLang;
+    document.title = t('page.title');
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+      el.textContent = t(el.dataset.i18n);
+    });
+    document.querySelectorAll('[data-i18n-ph]').forEach(el => {
+      el.placeholder = t(el.dataset.i18nPh);
+    });
+  }
+  // ── State ──────────────────────────────────────────────────────────────
+  let schema = null, currentItem = null, editingRecord = null, toastTimer;
+  let authToken = localStorage.getItem('cs_token') || null; // NOTE: httpOnly cookie preferred in production
+  let authUser = null, authCollection = null;
+  // Table state
+  let curPage = 1, curLastPage = 1, curPerPage = 20;
+  let curSearch = '', curOrderBy = 'createdAt', curOrder = 'DESC';
+  let advFilters = [];
+  let selectedIds = new Set();
+  let tableRows = [];
+  let hlRowIdx = -1;
+  let searchDebounce = null;
+  // Vim key chording
+  let lastVimKey = '', lastVimTime = 0;
+  // Realtime
+  let activityLog = [];
+  let rtWs = null;
+  // Devs modal
+  let devsTab = 'sdk';
+  // Config editor
+  let configMode = false;
+  let configData = null;
+  let configActiveTab = 'general';
+  let _cfgEntityId = 0, _cfgEndpointId = 0, _cfgFileId = 0, _cfgRlId = 0, _cfgTriggerId = 0;
+  // ── HTMX: inject Bearer token and language on every request ───────────
+  document.body.addEventListener('htmx:configRequest', e => {
+    if (authToken) e.detail.headers['Authorization'] = 'Bearer ' + authToken;
+    e.detail.headers['Accept-Language'] = currentLang;
+  });
+  // ── HTMX: after table partial swaps in ─────────────────────────────────
+  document.body.addEventListener('htmx:afterSwap', e => {
+    if (e.detail.target.id !== 'table-area') return;
+    document.getElementById('loading').classList.add('hidden');
+  });
+  document.body.addEventListener('htmx:responseError', e => {
+    if (e.detail.target?.id === 'table-area') {
+      document.getElementById('loading').classList.add('hidden');
+      toast(t('toast.failed_load_data'), 'error');
+    }
+  });
+  // ── Bootstrap ─────────────────────────────────────────────────────────
+  async function init() {
+    const preferredLang = ((navigator.language || 'en').split('-')[0] || 'en').toLowerCase();
+    await loadI18n(preferredLang);
+    try {
+      schema = await fetch('/admin/schema').then(r => r.json());
+    } catch { toast(t('toast.failed_load_schema'), 'error'); return; }
+    document.getElementById('project-name').textContent = schema.name;
+    buildSidebar();
+    if (authToken) {
+      try {
+        const col = getAdminCollections()[0];
+        if (col) {
+          const r = await apiFetch(`/api/auth/${toSlug(col.name)}/me`);
+          if (r.ok) { authUser = await r.json(); authCollection = col.name; showApp(); return; }
+        }
+      } catch { /* fall through to login */ }
+      authToken = null;
+      localStorage.removeItem('cs_token');
+    }
+    window.location.replace('/login');
+  }
+  // ── Auth ───────────────────────────────────────────────────────────────
+  function getAdminCollections() {
+    return (schema.userCollections || schema.entities || []).filter(e => e.admin !== false);
+  }
+  function getNonAuthEntities() {
+    return (schema.entities || []).filter(function(e) { return !e.authenticable; });
+  }
+  // ── Sidebar (mobile) ───────────────────────────────────────────────────
+  function openSidebar() {
+    document.getElementById('sidebar').classList.replace('-translate-x-full', 'translate-x-0');
+    document.getElementById('sidebar-overlay').classList.remove('hidden');
+  }
+  function closeSidebar() {
+    document.getElementById('sidebar').classList.replace('translate-x-0', '-translate-x-full');
+    document.getElementById('sidebar-overlay').classList.add('hidden');
+  }
+  // ── Sidebar nav ────────────────────────────────────────────────────────
+  function buildSidebar() {
+    document.getElementById('nav-user-collections').innerHTML =
+      (schema.userCollections || []).map(uc =>
+        `<div class="nav-item" onclick="selectItem('collection','${escHtml(uc.name)}',this)">${escHtml(uc.name)}</div>`
+      ).join('');
+    document.getElementById('nav-entities').innerHTML =
+      getNonAuthEntities().map(e =>
+        `<div class="nav-item" onclick="selectItem('entity','${escHtml(e.name)}',this)">${escHtml(e.name)}</div>`
+      ).join('');
+  }
+  function selectItem(type, name, el) {
+    configMode = false;
+    document.getElementById('config-area').classList.add('hidden');
+    document.getElementById('api-keys-area').classList.add('hidden');
+    document.getElementById('table-area').classList.remove('hidden');
+    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+    el.classList.add('active');
+    currentItem = { type, name };
+    document.getElementById('page-title').textContent = name;
+    document.getElementById('btn-add').classList.remove('hidden');
+    closeSidebar();
+    loadTable(type, name);
+  }
+function logout() {
+  authToken = null; authUser = null; authCollection = null;
+  localStorage.removeItem('cs_token'); currentItem = null;
+  if (rtWs) { try { rtWs.close(); } catch {} rtWs = null; }
+  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+  window.location.replace('/login');
+}
+function showLogin() {
+  window.location.replace('/login');
+}
+function showApp() {
+  document.getElementById('login-overlay') && document.getElementById('login-overlay').classList.add('hidden');
+  const name = authUser ? (authUser.name || authUser.email || '?') : '?';
+  document.getElementById('user-name').textContent = name;
+  document.getElementById('user-collection-label').textContent = authCollection || '';
+  document.getElementById('user-avatar').textContent = name[0].toUpperCase();
+  setupRealtime();
+  // Restore entity from URL if present
+  const qp = new URLSearchParams(location.search);
+  if (qp.get('entity')) {
+    const navEl = [...document.querySelectorAll('.nav-item')].find(el => el.textContent.trim() === qp.get('entity'));
+    if (navEl) { navEl.click(); return; }
+  }
+  selectDashboard(document.getElementById('nav-dashboard-item'));
+}
+// ── Realtime ──────────────────────────────────────────────────────────────────
+function setupRealtime() {
+  if (rtWs) return;
+  try {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    rtWs = new WebSocket(`${proto}//${location.host}/realtime`);
+    const badge = document.getElementById('ws-badge');
+    rtWs.onopen = () => {
+      rtWs.send(JSON.stringify({ type: 'subscribe', channel: '*' }));
+      if (badge) { badge.textContent = 'live'; badge.style.background = 'rgba(52,177,235,.15)'; badge.style.color = '#34b1eb'; }
+    };
+    rtWs.onmessage = e => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'event') onRealtimeEvent(msg);
+      } catch {}
+    };
+    rtWs.onclose = () => {
+      rtWs = null;
+      if (badge) { badge.textContent = 'offline'; badge.style.color = '#888'; }
+    };
+  } catch {}
+}
+function onRealtimeEvent(msg) {
+  const [entityName, action] = (msg.event || '').split('.');
+  const data = msg.data || {};
+  const label = data.name || data.title || data.email || `${entityName} #${String(data.id || '').slice(0, 8)}`;
+  activityLog.unshift({ entityName, action: action || 'event', label, id: data.id, at: new Date().toISOString() });
+  if (activityLog.length > 60) activityLog.pop();
+  renderActivityFeed();
+  // Refresh table if viewing this entity
+  if (currentItem && currentItem.name === entityName && !document.getElementById('table-view').classList.contains('hidden')) {
+    loadTableData();
+  }
+}
+// ── Sidebar ───────────────────────────────────────────────────────────────────
+function openSidebar() {
+  document.getElementById('sidebar').classList.replace('-translate-x-full', 'translate-x-0');
+  document.getElementById('sidebar-overlay').classList.remove('hidden');
+}
+function closeSidebar() {
+  document.getElementById('sidebar').classList.replace('translate-x-0', '-translate-x-full');
+  document.getElementById('sidebar-overlay').classList.add('hidden');
+}
+function buildSidebar() {
+  // Collections = authenticable entities (🆔 emoji)
+  document.getElementById('nav-user-collections').innerHTML =
+    (schema.entities || []).filter(e => e.authenticable).map(e =>
+      `<div class="nav-item" onclick="selectItem('collection','${escHtml(e.name)}',this)">🆔 ${escHtml(e.name)}</div>`
+    ).join('');
+  // Entities = non-authenticable (📁 emoji)
+  document.getElementById('nav-entities').innerHTML =
+    (schema.entities || []).filter(e => !e.authenticable).map(e =>
+      `<div class="nav-item" onclick="selectItem('entity','${escHtml(e.name)}',this)">📁 ${escHtml(e.name)}</div>`
+    ).join('');
+}
+function setActiveNav(el) {
+  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+  if (el) el.classList.add('active');
+}
+function showOnlyArea(id) {
+  ['dashboard-area', 'table-view', 'config-area', 'api-keys-area'].forEach(a => {
+    document.getElementById(a).classList.toggle('hidden', a !== id);
+  });
+}
+function selectDashboard(el) {
+  configMode = false;
+  setActiveNav(el);
+  showOnlyArea('dashboard-area');
+  document.getElementById('btn-add').classList.add('hidden');
+  document.getElementById('btn-share').classList.add('hidden');
+  document.getElementById('btn-devs').classList.add('hidden');
+  document.getElementById('page-title').textContent = 'Dashboard';
+  currentItem = null;
+  closeSidebar();
+  loadDashboard();
+}
+function selectItem(type, name, el) {
+  configMode = false;
+  setActiveNav(el);
+  showOnlyArea('table-view');
+  currentItem = { type, name };
+  document.getElementById('page-title').textContent = name;
+  document.getElementById('btn-add').classList.remove('hidden');
+  document.getElementById('btn-share').classList.remove('hidden');
+  document.getElementById('btn-devs').classList.remove('hidden');
+  closeSidebar();
+  // Reset table state
+  curPage = 1; curSearch = ''; advFilters = [];
+  selectedIds.clear(); hlRowIdx = -1;
+  document.getElementById('search-input').value = '';
+  document.getElementById('order-by-sel').value = 'createdAt';
+  document.getElementById('order-dir-sel').value = 'DESC';
+  updateSortOptions(name);
+  loadTableData();
+}
+function selectConfig(el) {
+  configMode = true;
+  setActiveNav(el);
+  showOnlyArea('config-area');
+  document.getElementById('btn-add').classList.add('hidden');
+  document.getElementById('btn-share').classList.add('hidden');
+  document.getElementById('btn-devs').classList.add('hidden');
+  document.getElementById('page-title').textContent = 'Config Editor';
+  currentItem = null;
+  closeSidebar();
+  loadConfig();
+}
+function updateSortOptions(entityName) {
+  const entity = (schema.entities || []).find(e => e.name === entityName);
+  const sel = document.getElementById('order-by-sel');
+  const cur = sel.value;
+  sel.innerHTML = '<option value="createdAt">Created</option><option value="updatedAt">Updated</option><option value="id">ID</option>';
+  if (entity && entity.properties) {
+    for (const p of entity.properties) {
+      const pName = typeof p === 'string' ? p : p.name;
+      if (!['createdAt', 'updatedAt', 'id'].includes(pName)) {
+        const opt = document.createElement('option');
+        opt.value = pName; opt.textContent = pName;
+        sel.appendChild(opt);
+      }
+    }
+  }
+  sel.value = ['createdAt', 'updatedAt', 'id'].includes(cur) ? cur : 'createdAt';
+}
+// ── Dashboard ─────────────────────────────────────────────────────────────────
+async function loadDashboard() {
+  document.getElementById('stats-grid').innerHTML = '<div class="text-xs text-cs-muted">Loading stats…</div>';
+  try {
+    const r = await apiFetch('/admin/stats');
+    if (!r.ok) throw new Error('Stats fetch failed');
+    const data = await r.json();
+    renderStatsGrid(data.entities || []);
+    renderEntitySummary(data.entities || []);
+    // Seed activity log with server data (if not already live)
+    for (const item of (data.recentActivity || [])) {
+      if (!activityLog.find(a => a.id === item.id && a.entityName === item.entityName)) {
+        activityLog.push({ entityName: item.entityName, action: item.action, label: item.label, id: item.id, at: item.createdAt });
+      }
+    }
+    activityLog.sort((a, b) => new Date(b.at) - new Date(a.at));
+    renderActivityFeed();
+  } catch {
+    document.getElementById('stats-grid').innerHTML = '<div class="text-xs text-red-400">Failed to load stats</div>';
+  }
+}
+function renderStatsGrid(entities) {
+  const grid = document.getElementById('stats-grid');
+  if (!entities.length) { grid.innerHTML = '<div class="text-xs text-cs-muted">No entities found.</div>'; return; }
+  grid.innerHTML = entities.map(e => `
+    <div class="bg-cs-surface border border-cs-border rounded p-4 cursor-pointer hover:border-cs-primary" style="transition:border-color 150ms;"
+      onclick="document.querySelector('.nav-item:not(#nav-dashboard-item):not(#nav-config-item)')?.click()">
+      <div class="text-xs text-cs-muted mb-1">${escHtml(e.name)}</div>
+      <div class="text-2xl font-bold" style="color:#34b1eb;">${e.total}</div>
+      <div class="text-xs mt-1 space-x-2">
+        <span class="text-green-400">+${e.lastWeek} this week</span>
+        <span class="text-cs-muted">+${e.lastMonth} this month</span>
+      </div>
+    </div>`).join('');
+}
+function renderEntitySummary(entities) {
+  const el = document.getElementById('entity-summary');
+  el.innerHTML = entities.map(e => `
+    <div class="flex items-center justify-between py-2 border-b border-cs-border last:border-0">
+      <span class="text-sm text-cs-text">${escHtml(e.name)}</span>
+      <div class="flex gap-3 text-xs">
+        <span class="text-cs-muted">${e.total} total</span>
+        <span class="text-green-400">+${e.lastWeek}/wk</span>
+      </div>
+    </div>`).join('') || '<div class="text-xs text-cs-muted">No entities.</div>';
+}
+function renderActivityFeed() {
+  const el = document.getElementById('activity-feed');
+  if (!activityLog.length) {
+    el.innerHTML = '<div class="text-xs text-cs-muted py-4">No activity yet. Live events will appear here.</div>';
+    return;
+  }
+  async function deleteRecord(id) {
+    if (!currentItem || !confirm(t('table.delete_confirm', { id }))) return;
+    try {
+      const r = await apiFetch(`/api/${toKebab(currentItem.name)}s/${id}`, { method: 'DELETE' });
+      if (!r.ok) { const d = await r.json(); throw new Error(d.error || t('toast.record_deleted')); }
+      toast(t('toast.record_deleted'), 'success');
+      reloadTable();
+    } catch (e) { toast(e.message, 'error'); }
+  }
+  const dotClass = a => ({ created: 'dot-create', updated: 'dot-update', deleted: 'dot-delete' }[a] || 'dot-create');
+  el.innerHTML = activityLog.slice(0, 40).map(item => `
+    <div class="flex items-start gap-2 py-1.5 border-b border-cs-border last:border-0">
+      <div class="activity-dot ${dotClass(item.action)} mt-1"></div>
+      <div class="flex-1 min-w-0">
+        <span class="text-cs-text font-medium truncate block">${escHtml(item.label || item.entityName)}</span>
+        <span class="text-cs-muted">${escHtml(item.entityName)} · ${escHtml(item.action)}</span>
+      </div>
+      <span class="text-cs-muted shrink-0 text-[10px]">${fmtTime(item.at)}</span>
+    </div>`).join('');
+}
+function fmtTime(iso) {
+  try { return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } catch { return ''; }
+}
+// ── Table ─────────────────────────────────────────────────────────────────────
+async function loadTableData() {
+  if (!currentItem) return;
+  document.getElementById('table-area').innerHTML = '';
+  document.getElementById('pagination').classList.add('hidden');
+  document.getElementById('loading').classList.remove('hidden');
+  const params = new URLSearchParams({
+    type: currentItem.type, name: currentItem.name,
+    page: curPage, perPage: curPerPage,
+    orderBy: curOrderBy, order: curOrder,
+  });
+  if (curSearch) params.set('search', curSearch);
+  for (const f of advFilters) {
+    if (f.col && f.op !== undefined && f.val !== '') params.set(`${f.col}${f.op}`, f.val);
+  }
+  try {
+    const r = await apiFetch('/admin/data?' + params.toString());
+    const result = await r.json();
+    document.getElementById('loading').classList.add('hidden');
+    if (!r.ok) { document.getElementById('table-area').innerHTML = `<div class="text-red-400 text-sm p-4">${escHtml(result.error || 'Error')}</div>`; return; }
+    curLastPage = result.lastPage || 1;
+    curPage = result.currentPage || 1;
+    tableRows = result.data || [];
+    renderTable(tableRows);
+    renderPagination(result);
+  } catch (err) {
+    document.getElementById('loading').classList.add('hidden');
+    document.getElementById('table-area').innerHTML = `<div class="text-red-400 text-sm p-4">${escHtml(err.message)}</div>`;
+  }
+}
+function renderTable(rows) {
+  selectedIds.clear(); updateBulkBar();
+  if (!rows.length) {
+    document.getElementById('table-area').innerHTML = `
+      <div class="flex flex-col items-center justify-center py-20 text-center">
+        <div class="text-4xl mb-3" aria-hidden="true">&#128237;</div>
+        <p class="text-sm" style="color:var(--color-cs-muted);">No records found. Click <span style="color:var(--color-cs-text);">+ New record</span> to create one.</p>
+      </div>`;
+    return;
+  }
+  const allCols = Object.keys(rows[0]);
+  const hiddenCols = new Set(currentItem ? getHiddenColumns(currentItem.name) : []);
+  const cols = allCols.filter(c => !hiddenCols.has(c));
+  const selectAllTh = `<th class="px-3 py-2.5 w-8"><input type="checkbox" id="select-all" onchange="toggleSelectAll()" style="accent-color:${currentPrimaryColor};cursor:pointer;" /></th>`;
+  const actionsTh = `<th class="px-3 py-2.5 text-left text-xs font-medium whitespace-nowrap" style="color:var(--color-cs-muted);">Actions</th>`;
+  const dataThs = cols.map(c => `<th class="px-3 py-2.5 text-left text-xs font-medium whitespace-nowrap" style="color:var(--color-cs-muted);">${escHtml(c)}</th>`).join('');
+  const trs = rows.map((row, idx) => {
+    const safeJson = JSON.stringify(row).replace(/&/g,'\\u0026').replace(/'/g,'\\u0027').replace(/</g,'\\u003c').replace(/>/g,'\\u003e');
+    const rowId = String(row.id);
+    const actions = `<td class="px-3 py-2.5"><div class="flex gap-1">
+      <button class="text-xs border rounded px-2 py-0.5 cursor-pointer hover:opacity-80" style="border-color:var(--color-cs-border);color:var(--color-cs-muted);" onclick='viewRecord(${safeJson})'>View</button>
+      <button class="text-xs border rounded px-2 py-0.5 cursor-pointer hover:opacity-80" style="border-color:var(--color-cs-border);color:var(--color-cs-text);" onclick='openEditModal(${safeJson})'>Edit</button>
+      <button class="text-xs border rounded px-2 py-0.5 cursor-pointer hover:opacity-80" style="border-color:rgba(239,68,68,.4);color:#f87171;" onclick="deleteRecord('${rowId}')">Delete</button>
+    </div></td>`;
+    const tds = cols.map(c => `<td class="px-3 py-2.5 max-w-xs truncate text-sm" style="color:var(--color-cs-text);" title="${escAttr(String(row[c] ?? ''))}">${escHtml(String(row[c] ?? ''))}</td>`).join('');
+    return `<tr class="border-b" style="border-color:var(--color-cs-border);" data-idx="${idx}" data-id="${escAttr(rowId)}" onclick="handleRowClick(event,'${rowId}',${idx})">
+      <td class="px-3 py-2.5 w-8"><input type="checkbox" class="row-cb cursor-pointer" value="${escAttr(rowId)}" onchange="toggleRowSel('${rowId}')" onclick="event.stopPropagation()" style="accent-color:${currentPrimaryColor};" ${selectedIds.has(rowId) ? 'checked' : ''} /></td>
+      ${actions}${tds}
+    </tr>`;
+  }).join('');
+  document.getElementById('table-area').innerHTML = `
+    <div class="overflow-x-auto border rounded" style="border-color:var(--color-cs-border);">
+      <table class="w-full text-sm" style="color:var(--color-cs-text);">
+        <thead style="background:var(--color-cs-surface);"><tr class="border-b" style="border-color:var(--color-cs-border);">${selectAllTh}${actionsTh}${dataThs}</tr></thead>
+        <tbody>${trs}</tbody>
+      </table>
+    </div>`;
+  if (hlRowIdx >= 0 && hlRowIdx < rows.length) highlightRow(hlRowIdx);
+}
+function handleRowClick(event, id, idx) {
+  if (event.target.type === 'checkbox') return;
+  hlRowIdx = idx;
+  highlightRow(idx);
+}
+function highlightRow(idx) {
+  document.querySelectorAll('#table-area tbody tr').forEach((r, i) => r.classList.toggle('row-hl', i === idx));
+}
+function renderPagination(result) {
+  const pg = document.getElementById('pagination');
+  pg.classList.remove('hidden');
+  document.getElementById('pg-info').textContent = `${result.from || 0}–${result.to || 0} of ${result.total || 0}`;
+  const btns = document.getElementById('pg-btns');
+  btns.innerHTML = '';
+  const s = Math.max(1, curPage - 2), e = Math.min(curLastPage, curPage + 2);
+  for (let i = s; i <= e; i++) {
+    const b = document.createElement('button');
+    b.textContent = i; b.onclick = () => goPage(i);
+    b.className = 'px-2 py-1 text-xs border rounded cursor-pointer';
+    b.style.cssText = i === curPage ? 'border-color:#34b1eb;color:#34b1eb;background:rgba(52,177,235,.08);' : 'border-color:var(--color-cs-border);color:var(--color-cs-muted);';
+    btns.appendChild(b);
+  }
+  document.getElementById('pg-first').disabled = curPage <= 1;
+  document.getElementById('pg-prev').disabled = curPage <= 1;
+  document.getElementById('pg-next').disabled = curPage >= curLastPage;
+  document.getElementById('pg-last').disabled = curPage >= curLastPage;
+}
+function goPage(n) {
+  n = Math.max(1, Math.min(curLastPage, parseInt(n, 10) || 1));
+  if (n === curPage) return;
+  curPage = n; loadTableData();
+}
+function onSearchInput() {
+  clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(() => {
+    curSearch = document.getElementById('search-input').value;
+    curPage = 1; loadTableData();
+  }, 300);
+}
+function onOrderChange() {
+  curOrderBy = document.getElementById('order-by-sel').value;
+  curOrder = document.getElementById('order-dir-sel').value;
+  curPage = 1; loadTableData();
+}
+function onPerPageChange() {
+  curPerPage = parseInt(document.getElementById('per-page-sel').value, 10);
+  curPage = 1; loadTableData();
+}
+function reloadTable() { if (currentItem) loadTableData(); }
+// ── Advanced filters ──────────────────────────────────────────────────────────
+function toggleAdvancedSearch() {
+  const p = document.getElementById('adv-panel');
+  const hidden = p.classList.contains('hidden');
+  p.classList.toggle('hidden', !hidden);
+  if (hidden && !document.getElementById('adv-filter-list').children.length) addAdvFilter();
+}
+function getEntityCols() {
+  if (!currentItem) return [];
+  const e = (schema.entities || []).find(e => e.name === currentItem.name);
+  const cols = ['id', 'createdAt', 'updatedAt'];
+  if (e) for (const p of e.properties || []) cols.push(typeof p === 'string' ? p : p.name);
+  return cols;
+}
+function addAdvFilter() {
+  const cols = getEntityCols();
+  const ops = [['', '='], ['_eq', '='], ['_neq', '≠'], ['_gt', '>'], ['_gte', '≥'], ['_lt', '<'], ['_lte', '≤'], ['_like', 'like'], ['_in', 'in (a,b,c)']];
+  const colOpts = cols.map(c => `<option value="${escAttr(c)}">${escHtml(c)}</option>`).join('');
+  const opOpts = ops.map(([v, l]) => `<option value="${escAttr(v)}">${escHtml(l)}</option>`).join('');
+  const div = document.createElement('div');
+  div.className = 'flex gap-2 items-center';
+  div.innerHTML = `
+    <select data-role="col" class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1 text-xs outline-none flex-1">${colOpts}</select>
+    <select data-role="op" class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1 text-xs outline-none">${opOpts}</select>
+    <input type="text" data-role="val" placeholder="value" class="bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1 text-xs outline-none flex-1" />
+    <button onclick="this.parentElement.remove()" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer">✕</button>`;
+  document.getElementById('adv-filter-list').appendChild(div);
+}
+function applyAdvFilters() {
+  advFilters = [];
+  for (const row of document.getElementById('adv-filter-list').children) {
+    const col = row.querySelector('[data-role=col]').value;
+    const op = row.querySelector('[data-role=op]').value;
+    const val = row.querySelector('[data-role=val]').value;
+    if (col && val !== '') advFilters.push({ col, op, val });
+  }
+  // Entities tab: card list with name, flags, relations, property rows
+  function renderEntitiesForm() {
+    _cfgEntityId = 0;
+    const entities = (configData && configData.entities) || {};
+    let cards = '';
+    for (const key of Object.keys(entities)) cards += renderEntityCard(key, entities[key]);
+    return '<div id="cfg-entities-list" class="space-y-3">' + cards + '</div>'
+      + '<button type="button" onclick="addEntityCard()"'
+      + ' class="mt-3 text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer"'
+      + ' style="transition:color 150ms,background 150ms;">' + t('config.entities.add_entity') + '</button>';
+  }
+  curPage = 1; loadTableData();
+}
+function clearAdvFilters() {
+  advFilters = [];
+  document.getElementById('adv-filter-list').innerHTML = '';
+  curPage = 1; loadTableData();
+}
+// ── Bulk actions ──────────────────────────────────────────────────────────────
+function toggleRowSel(id) {
+  if (selectedIds.has(id)) selectedIds.delete(id); else selectedIds.add(id);
+  updateBulkBar();
+}
+function toggleSelectAll() {
+  const cb = document.getElementById('select-all');
+  if (cb && cb.checked) tableRows.forEach(r => selectedIds.add(String(r.id)));
+  else selectedIds.clear();
+  document.querySelectorAll('.row-cb').forEach(c => { c.checked = selectedIds.has(c.value); });
+  updateBulkBar();
+}
+function clearSelection() {
+  selectedIds.clear();
+  document.querySelectorAll('.row-cb').forEach(c => c.checked = false);
+  const sa = document.getElementById('select-all'); if (sa) sa.checked = false;
+  updateBulkBar();
+}
+function updateBulkBar() {
+  const bar = document.getElementById('bulk-bar');
+  const cnt = selectedIds.size;
+  if (cnt > 0) { bar.classList.remove('hidden'); document.getElementById('bulk-count').textContent = `${cnt} selected`; }
+  else bar.classList.add('hidden');
+}
+async function bulkDelete() {
+  if (!currentItem || selectedIds.size === 0) return;
+  if (!confirm(`Delete ${selectedIds.size} record(s)?`)) return;
+  const ids = [...selectedIds];
+  let failed = 0;
+  for (const id of ids) {
+    try {
+      const r = await apiFetch(getApiPath(id), { method: 'DELETE' });
+      if (!r.ok) failed++;
+    } catch { failed++; }
+  }
+  toast(failed ? `Deleted ${ids.length - failed}, failed ${failed}` : `Deleted ${ids.length} records`, failed ? 'error' : 'success');
+  selectedIds.clear(); loadTableData();
+}
+function getApiPath(id) {
+  if (!currentItem) return '';
+  return `/api/collections/${toSlug(currentItem.name)}${id ? '/' + id : ''}`;
+}
+// ── Export ────────────────────────────────────────────────────────────────────
+async function exportData(format) {
+  if (!currentItem) return;
+  let rows;
+  // If there is an active selection, export only selected records from the current page
+  if (selectedIds.size > 0) {
+    rows = tableRows.filter(r => selectedIds.has(String(r.id)));
+  } else {
+    const params = new URLSearchParams({ type: currentItem.type, name: currentItem.name, page: 1, perPage: 10000, orderBy: curOrderBy, order: curOrder });
+    if (curSearch) params.set('search', curSearch);
+    for (const f of advFilters) if (f.col && f.val !== '') params.set(`${f.col}${f.op}`, f.val);
+    try {
+      const r = await apiFetch('/admin/data?' + params.toString());
+      const result = await r.json();
+      rows = result.data || [];
+    } catch (e) { toast('Export failed: ' + e.message, 'error'); return; }
+  }
+  try {
+    let content, mime, ext;
+    if (format === 'json') {
+      content = JSON.stringify(rows, null, 2); mime = 'application/json'; ext = 'json';
+    } else {
+      const cols = rows.length ? Object.keys(rows[0]) : [];
+      const csvRow = arr => arr.map(v => `"${String(v ?? '').replace(/"/g, '""')}"`).join(',');
+      content = [csvRow(cols), ...rows.map(row => csvRow(cols.map(c => row[c] ?? '')))].join('\n');
+      mime = 'text/csv'; ext = 'csv';
+    }
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(new Blob([content], { type: mime }));
+    a.download = `${currentItem.name}_export.${ext}`;
+    a.click();
+  } catch (e) { toast('Export failed: ' + e.message, 'error'); }
+}
+// ── Share View ────────────────────────────────────────────────────────────────
+function shareView() {
+  if (!currentItem) return;
+  const url = new URL(location.href);
+  url.search = '';
+  url.searchParams.set('entity', currentItem.name);
+  url.searchParams.set('type', currentItem.type);
+  if (curSearch) url.searchParams.set('search', curSearch);
+  url.searchParams.set('orderBy', curOrderBy);
+  url.searchParams.set('order', curOrder);
+  url.searchParams.set('page', String(curPage));
+  navigator.clipboard.writeText(url.toString())
+    .then(() => toast('Link copied!', 'success'))
+    .catch(() => toast('Copy failed', 'error'));
+}
+// ── Developers modal ──────────────────────────────────────────────────────────
+function openDevsModal() {
+  document.getElementById('devs-modal').classList.remove('hidden');
+  devsTab = 'sdk';
+  document.getElementById('devs-sdk-tab').classList.add('active');
+  document.getElementById('devs-rest-tab').classList.remove('active');
+  renderDevsBody();
+}
+function closeDevsModal() { document.getElementById('devs-modal').classList.add('hidden'); }
+function switchDevsTab(t) {
+  devsTab = t;
+  document.getElementById('devs-sdk-tab').classList.toggle('active', t === 'sdk');
+  document.getElementById('devs-rest-tab').classList.toggle('active', t === 'rest');
+  renderDevsBody();
+}
+function buildQueryStr() {
+  const parts = [];
+  if (curSearch) parts.push(`search=${encodeURIComponent(curSearch)}`);
+  parts.push(`page=${curPage}`, `perPage=${curPerPage}`, `orderBy=${curOrderBy}`, `order=${curOrder}`);
+  for (const f of advFilters) if (f.col && f.val !== '') parts.push(`${f.col}${f.op}=${encodeURIComponent(f.val)}`);
+  return parts.join('&');
+}
+function renderDevsBody() {
+  if (!currentItem) { document.getElementById('devs-body').innerHTML = '<p class="text-cs-muted text-sm">Select an entity first.</p>'; return; }
+  const slug = toSlug(currentItem.name) + 's';
+  const base = location.origin;
+  const qs = buildQueryStr();
+  const qsDisplay = qs ? `?${qs}` : '';
+  const authNote = `// Set your auth token\nconst TOKEN = 'your_jwt_token_here';`;
+  const sdkCode = `import ChadStart from '@chadstart/sdk';
+const cs = new ChadStart('${base}');
+// cs.setToken(TOKEN); // if auth required
+// List records${qs ? ' (current filters applied)' : ''}
+const list = await cs.from('${slug}').find(${qs ? `{\n  params: { ${qs.replace(/&/g, ', ').replace(/=/g, ': ')} }\n}` : ''});
+// Get one by ID
+const item = await cs.from('${slug}').findOne('RECORD_ID');
+// Create new
+const created = await cs.from('${slug}').create({ /* fields */ });
+// Update
+const updated = await cs.from('${slug}').update('RECORD_ID', { /* fields */ });
+// Delete
+await cs.from('${slug}').delete('RECORD_ID');`;
+  const curlCode = `# List records${qs ? ' (current filters)' : ''}
+curl "${base}/api/collections/${toSlug(currentItem.name)}${qsDisplay}" \\
+  -H "Authorization: Bearer $TOKEN"
+# Get by ID
+curl "${base}/api/collections/${toSlug(currentItem.name)}/RECORD_ID" \\
+  -H "Authorization: Bearer $TOKEN"
+# Create
+curl -X POST "${base}/api/collections/${toSlug(currentItem.name)}" \\
+  -H "Authorization: Bearer $TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{"field": "value"}'
+# Update
+curl -X PATCH "${base}/api/collections/${toSlug(currentItem.name)}/RECORD_ID" \\
+  -H "Authorization: Bearer $TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{"field": "new_value"}'
+# Delete
+curl -X DELETE "${base}/api/collections/${toSlug(currentItem.name)}/RECORD_ID" \\
+  -H "Authorization: Bearer $TOKEN"`;
+  const code = devsTab === 'sdk' ? sdkCode : curlCode;
+  document.getElementById('devs-body').innerHTML = `
+    ${qs ? '<div class="text-xs mb-2" style="color:#34b1eb;">⚡ Current filters applied in examples</div>' : ''}
+    <div class="code-block">${escHtml(code)}</div>
+    <button onclick="copyDevCode()" class="mt-2 text-xs border border-cs-border rounded px-2 py-1 text-cs-muted hover:text-cs-text cursor-pointer">Copy</button>`;
+}
+function copyDevCode() {
+  const el = document.querySelector('#devs-body .code-block');
+  if (el) navigator.clipboard.writeText(el.textContent).then(() => toast('Copied!', 'success'));
+}
+// ── Seed modal ────────────────────────────────────────────────────────────────
+function openSeedModal() {
+  document.getElementById('seed-modal').classList.remove('hidden');
+  document.getElementById('seed-result').classList.add('hidden');
+  const entities = (schema.entities || []).filter(e => !e.single);
+  document.getElementById('seed-list').innerHTML = entities.map(e => `
+    <div class="flex items-center gap-3 py-2 border-b border-cs-border last:border-0">
+      <input type="checkbox" id="seed-cb-${escAttr(e.name)}" value="${escAttr(e.name)}" checked style="accent-color:#34b1eb;cursor:pointer;" />
+      <label for="seed-cb-${escAttr(e.name)}" class="text-sm text-cs-text flex-1 cursor-pointer">${escHtml(e.name)}</label>
+      <input type="number" id="seed-cnt-${escAttr(e.name)}" value="10" min="1" max="500"
+        class="w-20 bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1 text-sm outline-none focus:border-cs-primary text-right" />
+    </div>`).join('') || '<p class="text-xs text-cs-muted">No entities found.</p>';
+}
+function closeSeedModal() { document.getElementById('seed-modal').classList.add('hidden'); }
+async function doSeed() {
+  const entities = (schema.entities || []).filter(e => !e.single);
+  const toSeed = [];
+  for (const e of entities) {
+    const cb = document.getElementById(`seed-cb-${e.name}`);
+    const cnt = document.getElementById(`seed-cnt-${e.name}`);
+    if (cb && cb.checked) toSeed.push({ name: e.name, tableName: e.tableName, count: parseInt(cnt?.value || '10', 10) });
+  }
+  if (!toSeed.length) { toast('Select at least one entity', 'error'); return; }
+  const btn = document.getElementById('seed-btn');
+  btn.disabled = true; btn.textContent = 'Seeding…';
+  try {
+    const r = await apiFetch('/admin/seed', { method: 'POST', body: JSON.stringify({ entities: toSeed }), headers: { 'Content-Type': 'application/json' } });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.error || 'Seed failed');
+    const msg = (data.results || []).map(r => `${r.name}: +${r.created}`).join(', ');
+    const res = document.getElementById('seed-result');
+    res.textContent = '✓ Seeded: ' + msg; res.classList.remove('hidden');
+    toast('Database seeded!', 'success');
+    if (currentItem) reloadTable();
+  } catch (e) { toast(e.message, 'error'); }
+  btn.disabled = false; btn.textContent = 'Seed';
+}
+// ── Shortcuts modal ───────────────────────────────────────────────────────────
+function openShortcutsModal() { document.getElementById('shortcuts-modal').classList.remove('hidden'); }
+function closeShortcutsModal() { document.getElementById('shortcuts-modal').classList.add('hidden'); }
+// ── Vim keyboard shortcuts ────────────────────────────────────────────────────
+document.addEventListener('keydown', e => {
+  const inInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName);
+  const anyModal = ['modal-backdrop','devs-modal','seed-modal','shortcuts-modal'].some(id => !document.getElementById(id).classList.contains('hidden'));
+  const loginOpen = !document.getElementById('login-overlay').classList.contains('hidden');
+  if (e.key === 'Escape') {
+    if (!document.getElementById('shortcuts-modal').classList.contains('hidden')) { closeShortcutsModal(); return; }
+    if (!document.getElementById('devs-modal').classList.contains('hidden')) { closeDevsModal(); return; }
+    if (!document.getElementById('seed-modal').classList.contains('hidden')) { closeSeedModal(); return; }
+    if (!document.getElementById('modal-backdrop').classList.contains('hidden')) { closeModal(); return; }
+    if (inInput) { document.activeElement.blur(); return; }
+  }
+  function renderPropRow(name, type) {
+    return '<div class="flex gap-2 items-center prop-row">'
+      + '<input type="text" value="' + escAttr(name) + '" placeholder="' + escAttr(t('config.entities.property_placeholder')) + '"'
+      + ' class="flex-1 ' + _INP_XS + ' prop-name" style="transition:border-color 150ms;" />'
+      + _propTypeSelect(_INP_XS + ' prop-type', type)
+      + '<button type="button" onclick="_cfgRmPropRow(this)"'
+      + ' class="text-xs px-1.5 rounded cursor-pointer" style="color:var(--color-cs-muted);background:transparent;" title="' + escAttr(t('config.entities.remove')) + '">\xd7</button>'
+      + '</div>';
+  }
+  function addPropRow(entityId) {
+    document.getElementById('cfg-e-props-' + entityId).insertAdjacentHTML('beforeend', renderPropRow('', 'string'));
+  }
+  if (loginOpen || anyModal || inInput) return;
+  const now = Date.now();
+  if (e.key === 'g' && lastVimKey === 'g' && now - lastVimTime < 600) { goPage(1); lastVimKey = ''; return; }
+  lastVimKey = e.key; lastVimTime = now;
+  const rows = document.querySelectorAll('#table-area tbody tr');
+  switch (e.key) {
+    case '?': openShortcutsModal(); break;
+    case '/': e.preventDefault(); document.getElementById('search-input')?.focus(); break;
+    case 'n': if (currentItem) openAddModal(); break;
+    case 'G': goPage(curLastPage); break;
+    case 'j':
+      if (!rows.length) break;
+      hlRowIdx = Math.min(rows.length - 1, hlRowIdx + 1);
+      highlightRow(hlRowIdx); rows[hlRowIdx]?.scrollIntoView({ block: 'nearest' }); break;
+    case 'k':
+      if (!rows.length) break;
+      hlRowIdx = Math.max(0, hlRowIdx - 1);
+      highlightRow(hlRowIdx); rows[hlRowIdx]?.scrollIntoView({ block: 'nearest' }); break;
+    case 'e':
+      if (hlRowIdx >= 0 && tableRows[hlRowIdx]) openEditModal(tableRows[hlRowIdx]); break;
+    case 'd':
+      if (hlRowIdx >= 0 && tableRows[hlRowIdx]) deleteRecord(String(tableRows[hlRowIdx].id)); break;
+    case ']': goPage(curPage + 1); break;
+    case '[': goPage(curPage - 1); break;
+  }
+});
+// ── Record modal ──────────────────────────────────────────────────────────────
+function getCurrentSchema() {
+  if (!currentItem) return null;
+  return (schema.entities || []).find(e => e.name === currentItem.name) || null;
+}
+function getFields(isCollection) {
+  const s = getCurrentSchema();
+  if (!s) return [];
+  // For authenticable collections, email and password are always included once.
+  // Filter them out from s.properties to avoid duplication.
+  const RESERVED = new Set(isCollection ? ['email', 'password'] : []);
+  const props = (s.properties || []).filter(p => {
+    const pName = typeof p === 'string' ? p : p.name;
+    return !RESERVED.has(pName);
+  });
+  const fields = isCollection
+    ? [{ name: 'email', type: 'email' }, { name: 'password', type: 'password' }, ...props]
+    : [...props];
+  if (!isCollection && s.belongsTo) {
+    for (const rel of s.belongsTo) {
+      const relName = typeof rel === 'string' ? rel : (rel.entity || rel.name || String(rel));
+      const relEntity = (schema.entities || []).find(e => e.name === relName);
+      fields.push({ name: `${toSnake(relName)}_id`, type: 'id', relEntity });
+    }
+  }
+  return fields;
+}
+function fieldHtml(f, value = '', forcePassword = false) {
+  const fType = f.type || 'string';
+  let inputHtml;
+  const baseCls = 'w-full bg-cs-bg border border-cs-border rounded text-cs-text px-3 py-2 text-sm outline-none focus:border-cs-primary';
+  const baseStyle = 'transition: border-color 150ms ease;';
+  if (forcePassword || fType === 'password') {
+    inputHtml = `<input type="password" id="field-${escAttr(f.name)}" value="${escAttr(value)}" placeholder="••••••••"
+      class="${baseCls}" style="${baseStyle}" autocomplete="new-password"/>`;
+  } else if (fType === 'email') {
+    inputHtml = `<input type="email" id="field-${escAttr(f.name)}" value="${escAttr(value)}" placeholder="${escAttr(f.name)}"
+      class="${baseCls}" style="${baseStyle}" autocomplete="email"/>`;
+  } else if (fType === 'date') {
+    inputHtml = `<input type="date" id="field-${escAttr(f.name)}" value="${escAttr(value)}"
+      class="${baseCls}" style="${baseStyle}"/>`;
+  } else if (fType === 'timestamp') {
+    // Convert ISO string to datetime-local format if needed
+    let dtVal = value;
+    if (dtVal && dtVal.includes('T')) dtVal = dtVal.slice(0, 16);
+    inputHtml = `<input type="datetime-local" id="field-${escAttr(f.name)}" value="${escAttr(dtVal)}"
+      class="${baseCls}" style="${baseStyle}"/>`;
+  } else if (fType === 'integer' || fType === 'number' || fType === 'float' || fType === 'real' || fType === 'money') {
+    inputHtml = `<input type="number" id="field-${escAttr(f.name)}" value="${escAttr(value)}" placeholder="0"
+      class="${baseCls}" style="${baseStyle}" ${fType === 'integer' ? 'step="1"' : 'step="any"'}/>`;
+  } else if (fType === 'boolean') {
+    const checked = value === 'true' || value === '1' || value === true;
+    inputHtml = `<label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" id="field-${escAttr(f.name)}" ${checked ? 'checked' : ''} style="accent-color:${escAttr(currentPrimaryColor)};width:16px;height:16px;" />
+      <span class="text-sm text-cs-muted">${escHtml(f.name)}</span>
+    </label>`;
+    return `<div class="mb-4">${inputHtml}</div>`;
+  } else if (fType === 'text' || fType === 'richText' || fType === 'json') {
+    inputHtml = `<textarea id="field-${escAttr(f.name)}" placeholder="${escAttr(f.name)}"
+      class="${baseCls} resize-y" style="${baseStyle} min-height:80px;">${escHtml(value)}</textarea>`;
+  } else if (fType === 'id') {
+    // ID field with click-to-select picker button
+    const relName = f.relEntity ? f.relEntity.name : f.name.replace(/_id$/, '');
+    const mainProp = f.relEntity && f.relEntity.mainProp ? f.relEntity.mainProp : 'id';
+    inputHtml = `<div class="flex gap-1">
+      <input type="text" id="field-${escAttr(f.name)}" value="${escAttr(value)}" placeholder="Record ID"
+        class="${baseCls} flex-1" style="${baseStyle}" list="dl-${escAttr(f.name)}" oninput="onIdFieldInput('${escAttr(f.name)}','${escAttr(relName)}','${escAttr(mainProp)}')"/>
+      <datalist id="dl-${escAttr(f.name)}"></datalist>
+      <button type="button" onclick="openIdPicker('${escAttr(f.name)}','${escAttr(relName)}','${escAttr(mainProp)}')"
+        class="text-xs border border-cs-border rounded px-2 py-1 text-cs-muted hover:text-cs-text cursor-pointer whitespace-nowrap" style="transition: color 150ms;" title="Select record">Select</button>
+    </div>`;
+  } else {
+    inputHtml = `<input type="text" id="field-${escAttr(f.name)}" value="${escAttr(value)}" placeholder="${escAttr(f.name)}"
+      class="${baseCls}" style="${baseStyle}"/>`;
+  }
+  return `<div class="mb-4">
+    <label class="block text-sm text-cs-muted mb-1">${escHtml(f.name)}${fType !== 'string' && fType !== 'text' ? ` <span class="text-[10px] opacity-60">(${fType})</span>` : ''}</label>
+    ${inputHtml}
+  </div>`;
+}
+function openAddModal() {
+  if (!currentItem) return;
+  editingRecord = null;
+  const isCollection = currentItem.type === 'collection';
+  document.getElementById('modal-title').textContent = `New ${currentItem.name}`;
+  const fields = getFields(isCollection);
+  document.getElementById('modal-body').innerHTML = fields.map(f => fieldHtml(f, '')).join('');
+  // Autofill ID fields that refer to an authenticable (user) entity with the logged-in user's ID
+  if (authUser && authUser.id) {
+    const userCollectionNames = new Set((schema.userCollections || []).map(uc => uc.name));
+    for (const f of fields) {
+      if (f.type === 'id' && f.relEntity && (f.relEntity.authenticable || userCollectionNames.has(f.relEntity.name))) {
+        const el = document.getElementById(`field-${f.name}`);
+        if (el && !el.value) el.value = String(authUser.id);
+      }
+    }
+  }
+  showModal();
+}
+function openEditModal(record) {
+  if (!currentItem) return;
+  editingRecord = record;
+  const isCollection = currentItem.type === 'collection';
+  document.getElementById('modal-title').textContent = `Edit ${currentItem.name} #${record.id}`;
+  document.getElementById('modal-body').innerHTML =
+    getFields(isCollection).filter(f => f.type !== 'password' && f.name !== 'password').map(f => fieldHtml(f, String(record[f.name] ?? ''))).join('');
+  showModal();
+}
+function showModal() {
+  document.getElementById('modal-backdrop').classList.remove('hidden');
+  const btn = document.getElementById('modal-save-btn');
+  btn.disabled = false; btn.querySelector('span').textContent = 'Save';
+}
+function closeModal() {
+  document.getElementById('modal-backdrop').classList.add('hidden');
+  editingRecord = null;
+}
+function getFieldValue(f) {
+  const el = document.getElementById(`field-${f.name}`);
+  if (!el) return undefined;
+  const fType = f.type || 'string';
+  if (fType === 'boolean') return el.checked ? true : false;
+  const val = el.value;
+  if (val === '' || val === undefined) return undefined;
+  if (fType === 'integer') return parseInt(val, 10);
+  if (fType === 'number' || fType === 'float' || fType === 'real' || fType === 'money') return parseFloat(val);
+  return val;
+}
+async function saveRecord() {
+  if (!currentItem) return;
+  const isCollection = currentItem.type === 'collection';
+  const fields = getFields(isCollection);
+  const editFields = editingRecord ? fields.filter(f => f.type !== 'password' && f.name !== 'password') : fields;
+  const body = {};
+  for (const f of editFields) {
+    const val = getFieldValue(f);
+    if (val !== undefined) body[f.name] = val;
+  }
+  const btn = document.getElementById('modal-save-btn');
+  btn.disabled = true; btn.querySelector('span').textContent = 'Saving…';
+  try {
+    let r;
+    if (editingRecord) {
+      r = await apiFetch(getApiPath(editingRecord.id), { method: 'PATCH', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json' } });
+    } else if (isCollection) {
+      r = await apiFetch(`/api/auth/${toSlug(currentItem.name)}/signup`, { method: 'POST', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json' } });
+    } else {
+      r = await apiFetch(getApiPath(''), { method: 'POST', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json' } });
+    }
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.error || 'Save failed');
+    toast(editingRecord ? 'Record updated' : 'Record created', 'success');
+    closeModal(); reloadTable();
+  } catch (err) {
+    toast(err.message, 'error');
+    btn.disabled = false; btn.querySelector('span').textContent = 'Save';
+  }
+}
+async function deleteRecord(id) {
+  if (!currentItem || !confirm(`Delete record #${id}?`)) return;
+  try {
+    const r = await apiFetch(getApiPath(id), { method: 'DELETE' });
+    if (!r.ok) { const d = await r.json(); throw new Error(d.error || 'Delete failed'); }
+    toast('Record deleted', 'success'); reloadTable();
+  } catch (e) { toast(e.message, 'error'); }
+}
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function apiFetch(url, opts = {}) {
+  return fetch(url, { ...opts, headers: { ...(opts.headers || {}), ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}) } });
+}
+function toast(msg, type = 'info') {
+  const el = document.getElementById('toast');
+  const cls = { error: 'border-red-500/60 text-red-400', success: 'border-cs-primary/60 text-cs-primary', info: 'border-cs-border text-cs-text' };
+  el.className = `fixed bottom-5 right-5 z-50 bg-cs-surface border rounded px-4 py-2.5 text-sm max-w-xs ${cls[type] || cls.info}`;
+  el.style.boxShadow = '0 2px 8px rgba(0,0,0,.3)';
+  el.textContent = msg;
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { el.className = 'hidden'; }, 3000);
+}
+function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+function escAttr(s) { return String(s).replace(/"/g,'&quot;'); }
+function toKebab(s) { return s.replace(/([A-Z])/g,(m,p,o)=>(o>0?'-':'')+p.toLowerCase()).replace(/^-/,''); }
+function toSlug(s) { return s.replace(/([A-Z])/g,(m,p,o)=>(o>0?'-':'')+p.toLowerCase()).replace(/^-/,'').replace(/[^a-z0-9-]/g,'-'); }
+function toSnake(s) { return s.replace(/([A-Z])/g,(m,p,o)=>(o>0?'_':'')+p.toLowerCase()).replace(/^_/,''); }
+// ── Config Editor ─────────────────────────────────────────────────────────────
+const CFG_TABS = {
+  general:   { keys: ['name','port','database','public'], desc: 'Application name, port, database path, and public static folder.' },
+  entities:  { keys: ['entities'], desc: 'Entity definitions — properties, relations, and flags.' },
+  functions: { keys: ['functions'], desc: 'Custom function-based HTTP endpoint definitions (path, method, function).' },
+  files:     { keys: ['files'], desc: 'File bucket definitions for local uploads.', s3: true },
+  settings:  { keys: ['settings','groups'], desc: 'API rate limits and reusable property groups.' },
+  all:       { keys: null, desc: 'Full configuration — all sections combined (raw JSON for advanced use).' },
+};
+const CFG_FORM_TABS = new Set(['general','entities','functions','files','settings']);
+const PROP_TYPES = ['string','text','richText','integer','number','float','money','boolean','email','password','date','timestamp','link','file','image','choice','location','json'];
+const _INP    = 'bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1.5 text-sm outline-none focus:border-cs-primary';
+const _INP_XS = 'bg-cs-bg border border-cs-border rounded text-cs-text px-2 py-1 text-xs outline-none focus:border-cs-primary';
+const _LBL    = 'block text-xs mb-1';
+async function loadConfig() {
+  try {
+    const r = await apiFetch('/admin/config');
+    if (!r.ok) throw new Error('Failed to load config');
+    configData = await r.json();
+    showConfigTab('general');
+  } catch (e) { toast(e.message, 'error'); }
+}
+function showConfigTab(tab) {
+  configActiveTab = tab;
+  document.querySelectorAll('.cfg-tab').forEach(b => b.classList.remove('active'));
+  document.getElementById(`cfg-tab-${tab}`)?.classList.add('active');
+  document.getElementById('cfg-section-desc').textContent = CFG_TABS[tab]?.desc || '';
+  document.getElementById('cfg-s3-note').classList.toggle('hidden', !CFG_TABS[tab]?.s3);
+  const form = document.getElementById('cfg-form');
+  const editor = document.getElementById('cfg-editor');
+  if (tab === 'all') {
+    form.classList.add('hidden'); editor.classList.remove('hidden');
+    editor.value = JSON.stringify(configData || {}, null, 2);
+  } else if (CFG_FORM_TABS.has(tab)) {
+    editor.classList.add('hidden'); form.classList.remove('hidden');
+    form.innerHTML = renderFormTab(tab);
+  }
+}
+function renderFormTab(tab) {
+  if (!configData) return '<p class="text-xs text-cs-muted">Loading…</p>';
+  if (tab === 'general')   return renderGeneralForm();
+  if (tab === 'entities')  return renderEntitiesForm();
+  if (tab === 'functions') return renderEndpointsForm();
+  if (tab === 'files')     return renderFilesForm();
+  if (tab === 'settings')  return renderSettingsForm();
+  return '';
+}
+function renderGeneralForm() {
+  const d = configData || {}, pub = d.public || {};
+  function fld(label, id, val, ph, type, hint) {
+    return '<div>'
+      + '<label class="' + _LBL + '" style="color:var(--color-cs-muted);">' + label + '</label>'
+      + '<input type="' + (type || 'text') + '" id="' + id + '" value="' + escAttr(String(val != null ? val : '')) + '" placeholder="' + escAttr(ph) + '"'
+      + ' class="w-full ' + _INP + '" style="transition:border-color 150ms;" />'
+      + (hint ? '<p class="text-xs mt-1" style="color:var(--color-cs-muted);">' + hint + '</p>' : '')
+      + '</div>';
+  }
+  return '<div class="space-y-4 max-w-lg">'
+    + fld(t('config.general.app_name') + ' <span style="color:#f87171;">*</span>', 'cfg-f-name',          d.name || '',                       'My App',                                      'text')
+    + fld(t('config.general.port'),                                                 'cfg-f-port',          d.port !== undefined ? d.port : '', '3000',                                        'number', t('config.general.port_hint'))
+    + fld(t('config.general.database'),                                             'cfg-f-database',      d.database || '',                   t('config.general.database_placeholder'),      'text',   t('config.general.database_hint'))
+    + fld(t('config.general.public_folder'),                                        'cfg-f-public-folder', pub.folder || '',                   t('config.general.public_folder_placeholder'), 'text',   t('config.general.public_folder_hint'))
+    + '</div>';
+}
+function collectGeneralForm() {
+  const name = document.getElementById('cfg-f-name').value.trim();
+  const portStr = document.getElementById('cfg-f-port').value.trim();
+  const db = document.getElementById('cfg-f-database').value.trim();
+  const folder = document.getElementById('cfg-f-public-folder').value.trim();
+  const result = { name: name || (configData && configData.name) || 'App' };
+  if (portStr) result.port = parseInt(portStr, 10);
+  if (db) result.database = db;
+  if (folder) result.public = { folder };
+  return result;
+}
+function renderEntitiesForm() {
+  _cfgEntityId = 0;
+  const entities = (configData && configData.entities) || {};
+  let cards = '';
+  for (const key of Object.keys(entities)) cards += renderEntityCard(key, entities[key]);
+  return '<div id="cfg-entities-list" class="space-y-3">' + cards + '</div>'
+    + '<button type="button" onclick="addEntityCard()" class="mt-3 text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer" style="transition:color 150ms,background 150ms;">+ Add entity</button>';
+}
+function _propTypeSelect(cls, sel) {
+  let opts = '';
+  for (const t of PROP_TYPES) opts += '<option value="' + t + '"' + (t === sel ? ' selected' : '') + '>' + t + '</option>';
+  return '<select class="' + cls + '" style="transition:border-color 150ms;">' + opts + '</select>';
+}
+function renderEntityCard(entityName, def) {
+  const id = _cfgEntityId++;
+  const props = def.properties || [];
+  const btArr  = (def.belongsTo     || []).map(r => typeof r === 'string' ? r : (r.entity || '')).filter(Boolean);
+  const btmArr = (def.belongsToMany || []).map(r => typeof r === 'string' ? r : (r.entity || '')).filter(Boolean);
+  let propsHtml = '';
+  for (const p of props) propsHtml += renderPropRow(typeof p === 'string' ? p : (p.name || ''), typeof p === 'string' ? 'string' : (p.type || 'string'), id);
+  return '<div class="bg-cs-bg border border-cs-border rounded p-3" data-entity-id="' + id + '">'
+    + '<div class="flex items-center gap-2 mb-3">'
+    + '<input type="text" placeholder="EntityName" value="' + escAttr(entityName) + '" data-role="entity-name" class="' + _INP + ' flex-1" style="transition:border-color 150ms;" />'
+    + '<label class="flex items-center gap-1 text-xs text-cs-muted cursor-pointer"><input type="checkbox"' + (def.authenticable ? ' checked' : '') + ' data-role="authenticable" style="accent-color:#34b1eb;" /> Auth</label>'
+    + '<label class="flex items-center gap-1 text-xs text-cs-muted cursor-pointer"><input type="checkbox"' + (def.single ? ' checked' : '') + ' data-role="single" style="accent-color:#34b1eb;" /> Single</label>'
+    + '<button type="button" onclick="removeEntityCard(' + id + ')" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer px-1">✕</button></div>'
+    + '<div class="text-xs text-cs-muted mb-1">Properties</div>'
+    + '<div id="cfg-props-' + id + '" class="space-y-1">' + propsHtml + '</div>'
+    + '<button type="button" onclick="addPropRow(' + id + ')" class="mt-1 text-xs text-cs-muted hover:text-cs-text cursor-pointer">+ Add property</button>'
+    + '<div class="mt-2"><div class="text-xs text-cs-muted mb-1">belongsTo</div>'
+    + '<input type="text" value="' + escAttr(btArr.join(', ')) + '" data-role="belongsTo" class="w-full ' + _INP_XS + '" style="transition:border-color 150ms;" /></div>'
+    + '<div class="mt-2"><div class="text-xs text-cs-muted mb-1">belongsToMany</div>'
+    + '<input type="text" value="' + escAttr(btmArr.join(', ')) + '" data-role="belongsToMany" class="w-full ' + _INP_XS + '" style="transition:border-color 150ms;" /></div>'
+    + '</div>';
+}
+function renderPropRow(name, type, entityId) {
+  return '<div class="flex gap-1 items-center"><input type="text" placeholder="name" value="' + escAttr(name) + '" data-role="prop-name" class="' + _INP_XS + ' flex-1" style="transition:border-color 150ms;" />'
+    + _propTypeSelect(_INP_XS + ' w-32', type)
+    + '<button type="button" onclick="this.parentElement.remove()" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer px-0.5">✕</button></div>';
+}
+function addPropRow(entityId) {
+  const c = document.getElementById('cfg-props-' + entityId); if (!c) return;
+  const d = document.createElement('div'); d.innerHTML = renderPropRow('', 'string', entityId);
+  c.appendChild(d.firstElementChild);
+}
+function addEntityCard() {
+  const l = document.getElementById('cfg-entities-list'); if (!l) return;
+  const d = document.createElement('div'); d.innerHTML = renderEntityCard('', {});
+  l.appendChild(d.firstElementChild);
+}
+function removeEntityCard(id) {
+  document.querySelector(`[data-entity-id="${id}"]`)?.remove();
+}
+function collectEntitiesForm() {
+  const entities = {};
+  for (const card of document.querySelectorAll('[data-entity-id]')) {
+    const name = card.querySelector('[data-role=entity-name]')?.value.trim();
+    if (!name) continue;
+    const authenticable = card.querySelector('[data-role=authenticable]')?.checked || false;
+    const single = card.querySelector('[data-role=single]')?.checked || false;
+    const props = [];
+    for (const row of card.querySelectorAll('[data-role=prop-name]')) {
+      const pName = row.value.trim(), pType = row.nextElementSibling?.value || 'string';
+      if (pName) props.push(pType === 'string' ? pName : { name: pName, type: pType });
+    }
+    const bt  = (card.querySelector('[data-role=belongsTo]')?.value || '').split(',').map(s => s.trim()).filter(Boolean);
+    const btm = (card.querySelector('[data-role=belongsToMany]')?.value || '').split(',').map(s => s.trim()).filter(Boolean);
+    const def = { properties: props };
+    if (authenticable) def.authenticable = true;
+    if (single) def.single = true;
+    if (bt.length) def.belongsTo = bt;
+    if (btm.length) def.belongsToMany = btm;
+    entities[name] = def;
+  }
+  return entities;
+}
+function renderEndpointsForm() {
+  _cfgEndpointId = 0;
+  _cfgTriggerId = 0;
+  const endpoints = (configData && configData.functions) || {};
+  let cards = '';
+  for (const [k, ep] of Object.entries(endpoints)) cards += renderEndpointCard(k, ep);
+  return '<div id="cfg-endpoints-list" class="space-y-3">' + cards + '</div>'
+    + '<button type="button" onclick="addEndpointCard()" class="mt-3 text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer">+ Add endpoint</button>';
+}
+function cronHuman(schedule) {
+  try { return (typeof cronstrue !== 'undefined') ? cronstrue.toString(schedule) : schedule; }
+  catch { return schedule; }
+}
+function renderTriggerBadges(ep) {
+  const triggers = ep.triggers || [];
+  return triggers.map(t => {
+    if (t.type === 'http') return '<span class="px-1.5 py-0.5 rounded text-xs" style="background:rgba(52,177,235,.15);color:#34b1eb;">'
+      + escAttr(t.method || 'GET') + ' ' + escAttr(t.path || '') + '</span>';
+    if (t.type === 'cron') return '<span class="px-1.5 py-0.5 rounded text-xs" title="' + escAttr(cronHuman(t.schedule||'')) + '" style="background:rgba(3,218,198,.15);color:#03dac6;">cron: '
+      + escAttr(t.schedule || '') + '</span>';
+    if (t.type === 'event') return '<span class="px-1.5 py-0.5 rounded text-xs" style="background:rgba(187,134,252,.15);color:#bb86fc;">event: '
+      + escAttr(t.name || '') + '</span>';
+    return '';
+  }).join(' ');
+}
+function renderTriggerRow(epId, tId, trigger) {
+  const type    = trigger.type || 'http';
+  const method  = trigger.method || 'GET';
+  const path    = trigger.path  || '';
+  const sched   = trigger.schedule || '';
+  const evtName = trigger.name || '';
+  const policy  = (trigger.policies && trigger.policies[0]) ? (trigger.policies[0].access || 'public') : 'public';
+  const typeOpts = ['http','cron','event'].map(t =>
+    '<option value="' + t + '"' + (t === type ? ' selected' : '') + '>' + t + '</option>').join('');
+  const methodOpts = ['GET','POST','PUT','PATCH','DELETE'].map(m =>
+    '<option value="' + m + '"' + (m === method ? ' selected' : '') + '>' + m + '</option>').join('');
+  const policyOpts = ['public','restricted','admin','forbidden'].map(a =>
+    '<option value="' + a + '"' + (a === policy ? ' selected' : '') + '>' + a + '</option>').join('');
+  return '<div class="flex flex-wrap gap-1.5 items-center p-2 rounded" style="background:var(--color-cs-bg);border:1px solid var(--color-cs-border);" data-trigger-id="' + tId + '">'
+    + '<select data-role="tr-type" onchange="_onTrTypeChange(this)" class="' + _INP_XS + '" style="width:64px;">' + typeOpts + '</select>'
+    // HTTP fields
+    + '<select data-role="tr-method" class="' + _INP_XS + '" style="width:74px;' + (type !== 'http' ? 'display:none;' : '') + '">' + methodOpts + '</select>'
+    + '<input type="text"   data-role="tr-path"    placeholder="/path"          value="' + escAttr(path)    + '" class="' + _INP_XS + ' flex-1" style="min-width:90px;' + (type !== 'http' ? 'display:none;' : '') + '" />'
+    + '<select data-role="tr-policy" class="' + _INP_XS + '" title="Access policy" style="width:88px;' + (type !== 'http' ? 'display:none;' : '') + '">' + policyOpts + '</select>'
+    // Cron fields
+    + '<input type="text"   data-role="tr-schedule" placeholder="* * * * * or @daily" value="' + escAttr(sched) + '" class="' + _INP_XS + ' flex-1" style="min-width:130px;' + (type !== 'cron' ? 'display:none;' : '') + '" />'
+    // Event fields
+    + '<input type="text"   data-role="tr-event"    placeholder="event.name"    value="' + escAttr(evtName) + '" class="' + _INP_XS + ' flex-1" style="min-width:130px;' + (type !== 'event' ? 'display:none;' : '') + '" />'
+    + '<button type="button" onclick="this.closest(\'[data-trigger-id]\').remove()" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer" title="Remove trigger">✕</button>'
+    + '</div>';
+}
+function _onTrTypeChange(sel) {
+  const row = sel.closest('[data-trigger-id]');
+  const type = sel.value;
+  const show = (role) => { const el = row.querySelector('[data-role=' + role + ']'); if (el) el.style.display = ''; };
+  const hide = (role) => { const el = row.querySelector('[data-role=' + role + ']'); if (el) el.style.display = 'none'; };
+  ['tr-method','tr-path','tr-policy'].forEach(hide);
+  ['tr-schedule'].forEach(hide);
+  ['tr-event'].forEach(hide);
+  if (type === 'http')  { show('tr-method'); show('tr-path'); show('tr-policy'); }
+  if (type === 'cron')  { show('tr-schedule'); }
+  if (type === 'event') { show('tr-event'); }
+}
+function addTriggerToEndpoint(epId) {
+  const card = document.querySelector('[data-ep-id="' + epId + '"]');
+  if (!card) return;
+  const list = card.querySelector('[data-role=trigger-list]');
+  if (!list) return;
+  const tId = _cfgTriggerId++;
+  const d = document.createElement('div');
+  d.innerHTML = renderTriggerRow(epId, tId, {});
+  list.appendChild(d.firstElementChild);
+}
+function renderEndpointCard(name, ep) {
+  const id = _cfgEndpointId++;
+  const runtimes = ['js','bash','python','go','c++','ruby','php'];
+  const rOpts = runtimes.map(r => '<option value="' + r + '"' + (r === (ep.runtime||'js') ? ' selected' : '') + '>' + r + '</option>').join('');
+  const triggers = ep.triggers || [];
+  let triggersHtml = '';
+  for (const tr of triggers) { const tId = _cfgTriggerId++; triggersHtml += renderTriggerRow(id, tId, tr); }
+  return '<div class="bg-cs-bg border border-cs-border rounded p-3 space-y-2" data-ep-id="' + id + '">'
+    + '<div class="flex gap-2 items-center"><input type="text" placeholder="Name" value="' + escAttr(name) + '" data-role="ep-name" class="' + _INP_XS + ' flex-1" />'
+    + '<select data-role="ep-runtime" class="' + _INP_XS + '" title="Runtime">' + rOpts + '</select>'
+    + '<button type="button" onclick="this.closest(\'[data-ep-id]\').remove()" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer">✕</button></div>'
+    + '<input type="text" placeholder="function.js" value="' + escAttr(ep.function||'') + '" data-role="ep-function" class="w-full ' + _INP_XS + '" />'
+    + '<div class="space-y-1.5" data-role="trigger-list">' + triggersHtml + '</div>'
+    + '<button type="button" onclick="addTriggerToEndpoint(' + id + ')" class="text-xs text-cs-muted hover:text-cs-text cursor-pointer" style="background:transparent;border:none;padding:0;">+ Add trigger</button>'
+    + '</div>';
+}
+function addEndpointCard() {
+  const l = document.getElementById('cfg-endpoints-list'); if (!l) return;
+  const d = document.createElement('div'); d.innerHTML = renderEndpointCard('', {});
+  l.appendChild(d.firstElementChild);
+}
+function collectEndpointsForm() {
+  const endpoints = {};
+  for (const card of document.querySelectorAll('[data-ep-id]')) {
+    const name    = card.querySelector('[data-role=ep-name]')?.value.trim();
+    const fn      = card.querySelector('[data-role=ep-function]')?.value.trim();
+    const runtime = card.querySelector('[data-role=ep-runtime]')?.value || 'js';
+    const triggers = [];
+    for (const row of card.querySelectorAll('[data-trigger-id]')) {
+      const type = row.querySelector('[data-role=tr-type]')?.value || 'http';
+      if (type === 'http') {
+        const method = row.querySelector('[data-role=tr-method]')?.value || 'GET';
+        const path   = row.querySelector('[data-role=tr-path]')?.value.trim() || '';
+        const access = row.querySelector('[data-role=tr-policy]')?.value || 'public';
+        const trigger = { type, method, path };
+        if (access !== 'public') trigger.policies = [{ access }];
+        if (path) triggers.push(trigger);
+      } else if (type === 'cron') {
+        const schedule = row.querySelector('[data-role=tr-schedule]')?.value.trim() || '';
+        if (schedule) triggers.push({ type, schedule });
+      } else if (type === 'event') {
+        const evtName = row.querySelector('[data-role=tr-event]')?.value.trim() || '';
+        if (evtName) triggers.push({ type, name: evtName });
+      }
+    }
+    if (name && fn) endpoints[name] = { runtime, function: fn, triggers };
+  }
+  return endpoints;
+}
+function renderFilesForm() {
+  _cfgFileId = 0;
+  const files = (configData && configData.files) || {};
+  let cards = '';
+  for (const [k, f] of Object.entries(files)) cards += renderFileCard(k, f);
+  return '<div id="cfg-files-list" class="space-y-3">' + cards + '</div>'
+    + '<button type="button" onclick="addFileCard()" class="mt-3 text-xs border border-cs-border rounded px-3 py-1.5 text-cs-muted hover:text-cs-text cursor-pointer">+ Add bucket</button>';
+}
+function renderFileCard(name, f) {
+  const id = _cfgFileId++;
+  return '<div class="bg-cs-bg border border-cs-border rounded p-3 space-y-2" data-file-id="' + id + '">'
+    + '<div class="flex gap-2 items-center"><input type="text" placeholder="Bucket name" value="' + escAttr(name) + '" data-role="file-name" class="' + _INP_XS + ' flex-1" />'
+    + '<button type="button" onclick="this.closest(\'[data-file-id]\').remove()" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer">✕</button></div>'
+    + '<input type="text" placeholder="./uploads" value="' + escAttr(f.path||'') + '" data-role="file-path" class="w-full ' + _INP_XS + '" />'
+    + '<label class="flex items-center gap-1 text-xs text-cs-muted cursor-pointer"><input type="checkbox"' + (f.public ? ' checked' : '') + ' data-role="file-public" style="accent-color:#34b1eb;" /> Public</label>'
+    + '</div>';
+}
+function addFileCard() {
+  const l = document.getElementById('cfg-files-list'); if (!l) return;
+  const d = document.createElement('div'); d.innerHTML = renderFileCard('', {});
+  l.appendChild(d.firstElementChild);
+}
+function collectFilesForm() {
+  const files = {};
+  for (const card of document.querySelectorAll('[data-file-id]')) {
+    const name = card.querySelector('[data-role=file-name]')?.value.trim();
+    const path = card.querySelector('[data-role=file-path]')?.value.trim();
+    const pub = card.querySelector('[data-role=file-public]')?.checked || false;
+    if (name) files[name] = { path: path || './uploads', public: pub };
+  }
+  return files;
+}
+function renderSettingsForm() {
+  _cfgRlId = 0;
+  const settings = (configData && configData.settings) || {};
+  const rls = settings.rateLimits || [];
+  let rlHtml = '';
+  for (const rl of rls) rlHtml += renderRlRow(rl);
+  return '<div class="space-y-3"><div><div class="text-xs text-cs-muted mb-2">Rate Limits</div>'
+    + '<div id="cfg-rl-list" class="space-y-2">' + rlHtml + '</div>'
+    + '<button type="button" onclick="addRlRow()" class="mt-1 text-xs border border-cs-border rounded px-2 py-1 text-cs-muted hover:text-cs-text cursor-pointer">+ Add rule</button></div></div>';
+}
+function renderRlRow(rl) {
+  const id = _cfgRlId++;
+  return '<div class="flex gap-2 items-center" data-rl-id="' + id + '">'
+    + '<input type="number" placeholder="TTL ms" value="' + escAttr(String(rl.ttl||60000)) + '" data-role="rl-ttl" class="' + _INP_XS + ' w-28" />'
+    + '<input type="number" placeholder="Max requests" value="' + escAttr(String(rl.limit||100)) + '" data-role="rl-limit" class="' + _INP_XS + ' w-28" />'
+    + '<button type="button" onclick="this.parentElement.remove()" class="text-cs-muted hover:text-red-400 text-xs cursor-pointer">✕</button></div>';
+}
+function addRlRow() {
+  const l = document.getElementById('cfg-rl-list'); if (!l) return;
+  const d = document.createElement('div'); d.innerHTML = renderRlRow({});
+  l.appendChild(d.firstElementChild);
+}
+function collectSettingsForm() {
+  const rls = [];
+  for (const row of document.querySelectorAll('[data-rl-id]')) {
+    const ttl = parseInt(row.querySelector('[data-role=rl-ttl]')?.value || '60000', 10);
+    const limit = parseInt(row.querySelector('[data-role=rl-limit]')?.value || '100', 10);
+    if (!isNaN(ttl) && !isNaN(limit)) rls.push({ ttl, limit });
+  }
+  return rls.length ? { rateLimits: rls } : {};
+}
+function collectConfigForm() {
+  if (configActiveTab === 'all') return JSON.parse(document.getElementById('cfg-editor').value);
+  const base = { ...(configData || {}) };
+  if (configActiveTab === 'general')   Object.assign(base, collectGeneralForm());
+  if (configActiveTab === 'entities')  base.entities = collectEntitiesForm();
+  if (configActiveTab === 'functions') base.functions = collectEndpointsForm();
+  if (configActiveTab === 'files')     base.files = collectFilesForm();
+  if (configActiveTab === 'settings')  base.settings = collectSettingsForm();
+  return base;
+}
+async function saveConfig() {
+  const btn = document.getElementById('cfg-save-btn');
+  const status = document.getElementById('cfg-status');
+  btn.disabled = true; status.textContent = 'Saving…';
+  try {
+    const newCfg = collectConfigForm();
+    const r = await apiFetch('/admin/config', { method: 'PUT', body: JSON.stringify(newCfg), headers: { 'Content-Type': 'application/json' } });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.error || 'Save failed');
+    status.textContent = data.message || 'Saved!';
+    configData = newCfg;
+    toast(data.message || 'Config saved', 'success');
+  } catch (e) { status.textContent = e.message; toast(e.message, 'error'); }
+  btn.disabled = false;
+}
+function resetConfigTab() { showConfigTab(configActiveTab); }
+// ── Theme Settings ────────────────────────────────────────────────────────────
+const THEME_PALETTE_COLORS = ['#34b1eb','#6366f1','#8b5cf6','#ec4899','#f59e0b','#10b981','#ef4444','#f97316'];
+/** Validate a CSS hex color string — accepts #RGB or #RRGGBB. Returns safe fallback on invalid input. */
+function sanitizeColor(raw, fallback) {
+  if (typeof raw === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(raw.trim())) return raw.trim();
+  return fallback || '#34b1eb';
+}
+let currentPrimaryColor = sanitizeColor(localStorage.getItem('cs_primary_color'), '#34b1eb');
+let currentThemeMode = (localStorage.getItem('cs_theme_mode') === 'light') ? 'light' : 'dark';
+function applyTheme() {
+  const root = document.documentElement;
+  if (currentThemeMode === 'light') {
+    root.style.setProperty('--color-cs-bg', '#f8f9fa');
+    root.style.setProperty('--color-cs-surface', '#ffffff');
+    root.style.setProperty('--color-cs-border', '#e2e8f0');
+    root.style.setProperty('--color-cs-text', '#1a202c');
+    root.style.setProperty('--color-cs-muted', '#64748b');
+  } else {
+    root.style.setProperty('--color-cs-bg', '#121212');
+    root.style.setProperty('--color-cs-surface', '#1e1e1e');
+    root.style.setProperty('--color-cs-border', '#2a2a2a');
+    root.style.setProperty('--color-cs-text', '#e1e1e1');
+    root.style.setProperty('--color-cs-muted', '#888888');
+  }
+  root.style.setProperty('--color-cs-primary', currentPrimaryColor);
+  // Also update inline glow animation and btn colors to reflect new primary
+  document.querySelectorAll('.btn-glow').forEach(el => {
+    el.style.background = `linear-gradient(var(--color-cs-surface),var(--color-cs-surface)) padding-box, conic-gradient(from var(--glow-a),${currentPrimaryColor} 0%,${currentPrimaryColor}88 40%,transparent 60%,${currentPrimaryColor} 100%) border-box`;
+    el.style.color = currentPrimaryColor;
+  });
+}
+function openThemeSettings() {
+  // Build palette
+  const pal = document.getElementById('theme-palette');
+  pal.innerHTML = THEME_PALETTE_COLORS.map(c =>
+    `<button onclick="setPrimaryColor('${c}')" title="${c}"
+      style="width:24px;height:24px;border-radius:50%;background:${c};border:2px solid ${c === currentPrimaryColor ? '#fff' : 'transparent'};cursor:pointer;transition:border-color 150ms;"></button>`
+  ).join('');
+  // Set current color picker
+  document.getElementById('theme-custom-color').value = currentPrimaryColor;
+  document.getElementById('theme-custom-hex').textContent = currentPrimaryColor;
+  // Set mode buttons
+  const isDark = currentThemeMode === 'dark';
+  document.getElementById('theme-dark-btn').style.cssText = isDark
+    ? `border-color:${currentPrimaryColor};color:${currentPrimaryColor};background:rgba(52,177,235,.1);`
+    : 'border-color:var(--color-cs-border);color:var(--color-cs-muted);background:transparent;';
+  document.getElementById('theme-light-btn').style.cssText = !isDark
+    ? `border-color:${currentPrimaryColor};color:${currentPrimaryColor};background:rgba(52,177,235,.1);`
+    : 'border-color:var(--color-cs-border);color:var(--color-cs-muted);background:transparent;';
+  document.getElementById('theme-modal-backdrop').classList.remove('hidden');
+}
+function closeThemeSettings() {
+  document.getElementById('theme-modal-backdrop').classList.add('hidden');
+}
+function setThemeMode(mode) {
+  currentThemeMode = mode;
+  localStorage.setItem('cs_theme_mode', mode);
+  applyTheme();
+  openThemeSettings(); // re-render to update button states
+}
+function setPrimaryColor(color) {
+  currentPrimaryColor = sanitizeColor(color, '#34b1eb');
+  localStorage.setItem('cs_primary_color', currentPrimaryColor);
+  applyTheme();
+  openThemeSettings(); // re-render palette
+}
+function onCustomColorInput(color) {
+  const safe = sanitizeColor(color, '#34b1eb');
+  document.getElementById('theme-custom-hex').textContent = safe;
+  setPrimaryColor(safe);
+}
+// ── Column Visibility ─────────────────────────────────────────────────────────
+function getColumnPrefsKey(entityName) {
+  return `cs_cols_${entityName}`;
+}
+function getHiddenColumns(entityName) {
+  try {
+    const raw = localStorage.getItem(getColumnPrefsKey(entityName));
+    return raw ? JSON.parse(raw) : [];
+  } catch { return []; }
+}
+function openColumnsPanel() {
+  if (!currentItem) return;
+  const entityName = currentItem.name;
+  const s = (schema.entities || []).find(e => e.name === entityName);
+  const hiddenCols = getHiddenColumns(entityName);
+  const allCols = ['id', 'createdAt', 'updatedAt'];
+  if (s) {
+    for (const p of s.properties || []) allCols.push(typeof p === 'string' ? p : p.name);
+    if (s.authenticable) { if (!allCols.includes('email')) allCols.push('email'); }
+  }
+  document.getElementById('columns-entity-name').textContent = entityName;
+  document.getElementById('columns-list').innerHTML = allCols.map(col =>
+    `<label class="flex items-center gap-2 cursor-pointer text-sm" style="color:var(--color-cs-text);">
+      <input type="checkbox" class="col-vis-cb" value="${escAttr(col)}" ${hiddenCols.includes(col) ? '' : 'checked'}
+        style="accent-color:${escAttr(currentPrimaryColor)};width:14px;height:14px;" />
+      ${escHtml(col)}
+    </label>`
+  ).join('');
+  document.getElementById('columns-modal-backdrop').classList.remove('hidden');
+}
+function closeColumnsPanel() {
+  document.getElementById('columns-modal-backdrop').classList.add('hidden');
+}
+function saveColumnsPrefs() {
+  if (!currentItem) return;
+  const hidden = [];
+  document.querySelectorAll('.col-vis-cb').forEach(cb => {
+    if (!cb.checked) hidden.push(cb.value);
+  });
+  localStorage.setItem(getColumnPrefsKey(currentItem.name), JSON.stringify(hidden));
+  closeColumnsPanel();
+  reloadTable();
+}
+function resetColumnsPrefs() {
+  if (!currentItem) return;
+  localStorage.removeItem(getColumnPrefsKey(currentItem.name));
+  closeColumnsPanel();
+  reloadTable();
+}
+// ── ID Field helpers (autocomplete + lookup) ──────────────────────────────────
+async function onIdFieldInput(fieldName, relEntityName, mainProp) {
+  const el = document.getElementById(`field-${fieldName}`);
+  if (!el) return;
+  const dl = document.getElementById(`dl-${fieldName}`);
+  if (!dl) return;
+  const q = el.value.trim();
+  if (q.length < 1) { dl.innerHTML = ''; return; }
+  try {
+    const r = await apiFetch(`/admin/data?type=entity&name=${encodeURIComponent(relEntityName)}&perPage=10&search=${encodeURIComponent(q)}`);
+    if (!r.ok) return;
+    const data = await r.json();
+    dl.innerHTML = (data.data || []).map(row => {
+      const label = row[mainProp] || row.name || row.title || row.email || row.id;
+      return `<option value="${escAttr(String(row.id))}" label="${escAttr(String(label))}"></option>`;
+    }).join('');
+  } catch { /* ignore */ }
+}
+async function lookupIdRecord(fieldName, relEntityName) {
+  const el = document.getElementById(`field-${fieldName}`);
+  if (!el) return;
+  const id = el.value.trim();
+  if (!id) { toast('Enter an ID to look up', 'info'); return; }
+  try {
+    const r = await apiFetch(`/admin/data?type=entity&name=${encodeURIComponent(relEntityName)}&perPage=1&id_eq=${encodeURIComponent(id)}`);
+    if (!r.ok) { toast('Record not found', 'error'); return; }
+    const data = await r.json();
+    const record = data.data && data.data[0];
+    if (!record) { toast('Record not found', 'error'); return; }
+    document.getElementById('lookup-modal-title').textContent = `${relEntityName} #${id}`;
+    document.getElementById('lookup-modal-body').textContent = JSON.stringify(record, null, 2);
+    document.getElementById('lookup-modal-backdrop').classList.remove('hidden');
+  } catch (e) { toast('Lookup failed: ' + e.message, 'error'); }
+}
+function closeLookupModal() {
+  document.getElementById('lookup-modal-backdrop').classList.add('hidden');
+}
+// ── View Record (table action) ─────────────────────────────────────────────────
+function viewRecord(record) {
+  const entityName = currentItem ? currentItem.name : 'Record';
+  document.getElementById('lookup-modal-title').textContent = `${entityName} #${record.id}`;
+  document.getElementById('lookup-modal-body').textContent = JSON.stringify(record, null, 2);
+  document.getElementById('lookup-modal-backdrop').classList.remove('hidden');
+}
+// ── ID Picker (select related entity record) ──────────────────────────────────
+let _idPickerField = '', _idPickerEntity = '', _idPickerMainProp = '', _idPickerDebounce = null;
+async function openIdPicker(fieldName, relEntityName, mainProp) {
+  _idPickerField = fieldName;
+  _idPickerEntity = relEntityName;
+  _idPickerMainProp = mainProp || 'id';
+  document.getElementById('id-picker-title').textContent = `Select ${relEntityName}`;
+  document.getElementById('id-picker-search').value = '';
+  document.getElementById('id-picker-list').innerHTML = '';
+  document.getElementById('id-picker-backdrop').classList.remove('hidden');
+  await loadIdPickerResults('');
+}
+function closeIdPicker() {
+  document.getElementById('id-picker-backdrop').classList.add('hidden');
+}
+function onIdPickerSearch() {
+  clearTimeout(_idPickerDebounce);
+  _idPickerDebounce = setTimeout(async () => {
+    const q = document.getElementById('id-picker-search').value.trim();
+    await loadIdPickerResults(q);
+  }, 250);
+}
+async function loadIdPickerResults(q) {
+  const listEl = document.getElementById('id-picker-list');
+  listEl.innerHTML = '<div class="text-xs text-cs-muted text-center py-4">Loading…</div>';
+  try {
+    const params = new URLSearchParams({ type: 'entity', name: _idPickerEntity, perPage: 20 });
+    if (q) params.set('search', q);
+    const r = await apiFetch('/admin/data?' + params.toString());
+    if (!r.ok) throw new Error('Failed to load');
+    const data = await r.json();
+    const rows = data.data || [];
+    if (!rows.length) { listEl.innerHTML = '<div class="text-xs text-cs-muted text-center py-4">No records found</div>'; return; }
+    listEl.innerHTML = rows.map(row => {
+      const humanLabel = (_idPickerMainProp !== 'id' && row[_idPickerMainProp]) || row.title || row.name || row.email;
+      const label = humanLabel || row.id;
+      const safeId = escAttr(String(row.id));
+      const safeLabel = escHtml(String(label));
+      return `<button type="button" onclick="selectIdPickerRow('${safeId}')"
+        class="w-full text-left px-3 py-2 rounded text-sm hover:bg-cs-border cursor-pointer flex items-center justify-between gap-2" style="transition: background 150ms;">
+        <span style="color:var(--color-cs-text);">${safeLabel}</span>
+        <span class="text-xs shrink-0" style="color:var(--color-cs-muted);">#${safeId}</span>
+      </button>`;
+    }).join('');
+  } catch (e) { listEl.innerHTML = '<div class="text-xs text-red-400 text-center py-4">' + escHtml(e.message) + '</div>'; }
+}
+function selectIdPickerRow(id) {
+  const el = document.getElementById(`field-${_idPickerField}`);
+  if (el) el.value = id;
+  closeIdPicker();
+}
+// ── Start ─────────────────────────────────────────────────────────────────────
+// Apply saved theme on load
+applyTheme();
+init();
+  function collectFormData() {
+    if (configActiveTab === 'general')   return collectGeneralForm();
+    if (configActiveTab === 'entities')  return { entities: collectEntitiesForm() };
+    if (configActiveTab === 'functions') return { functions: collectEndpointsForm() };
+    if (configActiveTab === 'files')     return { files: collectFilesForm() };
+    if (configActiveTab === 'settings')  return collectSettingsForm();
+    return null;
+  }
+  function selectConfig(el) {
+    document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
+    el.classList.add('active');
+    configMode = true;
+    document.getElementById('page-title').textContent = t('config.editor_title');
+    document.getElementById('btn-add').classList.add('hidden');
+    document.getElementById('btn-share').classList.add('hidden');
+    document.getElementById('btn-devs').classList.add('hidden');
+    showOnlyArea('config-area');
+    closeSidebar();
+    loadConfig();
+  }
+  async function loadConfig() {
+    document.getElementById('cfg-status').textContent = t('config.status.loading');
+    try {
+      const r = await apiFetch('/admin/config');
+      if (!r.ok) { const d = await r.json(); throw new Error(d.error || 'Failed to load'); }
+      configData = await r.json();
+      showConfigTab(configActiveTab);
+      document.getElementById('cfg-status').textContent = '';
+    } catch (e) {
+      document.getElementById('cfg-status').textContent = 'Error: ' + e.message;
+      toast(t('toast.config_load_failed', { message: e.message }), 'error');
+    }
+  }
+  function showConfigTab(tab) {
+    configActiveTab = tab;
+    document.querySelectorAll('.cfg-tab').forEach(function(btn) { btn.classList.remove('active'); });
+    const tabEl = document.getElementById('cfg-tab-' + tab);
+    if (tabEl) tabEl.classList.add('active');
+    const def = CFG_TABS[tab] || CFG_TABS.all;
+    const descKey = 'config.descriptions.' + tab;
+    const desc = t(descKey);
+    document.getElementById('cfg-section-desc').textContent = desc !== descKey ? desc : '';
+    const s3Note = document.getElementById('cfg-s3-note');
+    if (def.s3) s3Note.classList.remove('hidden'); else s3Note.classList.add('hidden');
+    const formEl      = document.getElementById('cfg-form');
+    const editorEl    = document.getElementById('cfg-editor');
+    const jsonSection = document.getElementById('cfg-json-section');
+    const jsonLabel   = document.getElementById('cfg-json-label');
+    const jsonHint    = document.getElementById('cfg-json-hint');
+    if (CFG_FORM_TABS.has(tab)) {
+      // Show form only — hide the JSON reference section
+      formEl.classList.remove('hidden');
+      formEl.innerHTML = renderFormTab(tab);
+      jsonSection.classList.add('hidden');
+    } else {
+      // All tab: JSON only, fully editable
+      formEl.classList.add('hidden');
+      editorEl.value = JSON.stringify(configData || {}, null, 2);
+      editorEl.readOnly = false;
+      editorEl.style.opacity = '';
+      jsonLabel.textContent = t('config.json_label_edit') || 'Full Configuration JSON';
+      jsonHint.textContent = t('config.json_hint_edit') || '(edit directly — changes are saved on Save)';
+      jsonSection.classList.remove('hidden');
+    }
+  }
+  async function saveConfig() {
+    let sectionData;
+    if (CFG_FORM_TABS.has(configActiveTab)) {
+      sectionData = collectFormData();
+      if (sectionData === null) { toast(t('toast.form_read_error'), 'error'); return; }
+    } else {
+      const rawText = document.getElementById('cfg-editor').value.trim();
+      try {
+        sectionData = JSON.parse(rawText);
+      } catch (e) {
+        toast(t('toast.invalid_json', { message: e.message }), 'error');
+        return;
+      }
+      if (typeof sectionData !== 'object' || Array.isArray(sectionData) || sectionData === null) {
+        toast(t('toast.config_not_object'), 'error');
+        return;
+      }
+    }
+    // Merge section into full config
+    let fullConfig;
+    if (configActiveTab === 'all') {
+      fullConfig = sectionData;
+    } else {
+      fullConfig = Object.assign({}, configData || {});
+      const tabKeys = CFG_TABS[configActiveTab].keys || [];
+      for (const key of tabKeys) delete fullConfig[key];
+      Object.assign(fullConfig, sectionData);
+    }
+    const btn = document.getElementById('cfg-save-btn');
+    btn.disabled = true; btn.textContent = t('config.saving_btn');
+    document.getElementById('cfg-status').textContent = '';
+    try {
+      const r = await apiFetch('/admin/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(fullConfig),
+      });
+      const data = await r.json();
+      if (!r.ok) throw new Error(data.error || 'Save failed');
+      configData = fullConfig;
+      // Refresh the JSON display to reflect the newly saved config
+      const editorEl = document.getElementById('cfg-editor');
+      if (editorEl) editorEl.value = JSON.stringify(configData, null, 2);
+      if (data.reloading) {
+        document.getElementById('cfg-status').textContent = t('config.status.reloading');
+        toast(t('toast.config_reloading'), 'info');
+        setTimeout(async function() {
+          try {
+            schema = await fetch('/admin/schema').then(function(r2) { return r2.json(); });
+            document.getElementById('project-name').textContent = schema.name;
+            buildSidebar();
+            document.getElementById('cfg-status').textContent = t('config.status.applied');
+            toast(t('toast.config_applied'), 'success');
+          } catch (ex) {
+            document.getElementById('cfg-status').textContent = t('config.status.saved_reload');
+          }
+        }, 800);
+      } else {
+        document.getElementById('cfg-status').textContent = t('config.status.saved_restart');
+        toast(t('toast.config_saved'), 'success');
+      }
+    } catch (e) {
+      toast(t('toast.save_failed', { message: e.message }), 'error');
+    } finally {
+      btn.disabled = false; btn.textContent = t('config.save_btn');
+    }
+  }
+  function resetConfigTab() {
+    if (!configData) return;
+    showConfigTab(configActiveTab);
+    toast(t('toast.config_reset'), 'info');
+  }
+  // ── API Keys Panel ─────────────────────────────────────────────────────
+  function selectApiKeys(el) {
+    document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
+    el.classList.add('active');
+    configMode = false;
+    currentItem = null;
+    document.getElementById('page-title').textContent = 'API Keys';
+    document.getElementById('btn-add').classList.add('hidden');
+    document.getElementById('btn-share').classList.add('hidden');
+    document.getElementById('btn-devs').classList.add('hidden');
+    showOnlyArea('api-keys-area');
+    closeSidebar();
+    loadApiKeys();
+  }
+  async function loadApiKeys() {
+    const listEl = document.getElementById('api-keys-list');
+    listEl.innerHTML = '<div class="flex justify-center py-8"><div class="w-5 h-5 border-2 border-cs-border border-t-cs-primary rounded-full animate-spin"></div></div>';
+    try {
+      const r = await apiFetch('/admin/api-keys');
+      if (!r.ok) throw new Error('Failed to load API keys');
+      const keys = await r.json();
+      listEl.innerHTML = renderApiKeysList(keys);
+    } catch (e) {
+      listEl.innerHTML = '<p class="text-red-400 text-sm p-4">' + escHtml(e.message) + '</p>';
+    }
+  }
+  function renderApiKeysList(keys) {
+    if (!keys.length) {
+      return '<div class="flex flex-col items-center justify-center py-16 text-center"><p class="text-sm" style="color:var(--color-cs-muted);">No API keys yet. Click <span style="color:var(--color-cs-text);">+ Create API Key</span> to add one.</p></div>';
+    }
+    const rows = keys.map(function(k) {
+      const perms = (k.permissions && k.permissions.length) ? k.permissions.join(', ') : 'all';
+      const ents  = (k.entities && k.entities.length)       ? k.entities.join(', ')     : 'all';
+      const exp   = k.expiresAt ? new Date(k.expiresAt).toLocaleDateString() : '—';
+      return '<tr class="border-b" style="border-color:var(--color-cs-border);">'
+        + '<td class="px-4 py-2.5 text-sm" style="color:var(--color-cs-text);">' + escHtml(k.name) + '</td>'
+        + '<td class="px-4 py-2.5 text-xs" style="color:var(--color-cs-muted);">' + escHtml(k.userEntity) + '</td>'
+        + '<td class="px-4 py-2.5 text-xs" style="color:var(--color-cs-muted);" title="' + escHtml(k.userId) + '">' + escHtml(k.userId.substring(0, 8)) + '…</td>'
+        + '<td class="px-4 py-2.5 text-xs" style="color:var(--color-cs-muted);">' + escHtml(perms) + '</td>'
+        + '<td class="px-4 py-2.5 text-xs" style="color:var(--color-cs-muted);">' + escHtml(ents) + '</td>'
+        + '<td class="px-4 py-2.5 text-xs" style="color:var(--color-cs-muted);">' + escHtml(exp) + '</td>'
+        + '<td class="px-4 py-2.5 text-xs" style="color:var(--color-cs-muted);">' + escHtml(k.lastUsedAt ? new Date(k.lastUsedAt).toLocaleDateString() : '—') + '</td>'
+        + '<td class="px-4 py-2.5"><button class="text-xs border rounded px-2 py-1 hover:opacity-80" style="border-color:rgba(239,68,68,0.4);color:#f87171;background:transparent;" onclick="deleteApiKeyAdmin(' + "'" + escHtml(k.id) + "'" + ')">Delete</button></td>'
+        + '</tr>';
+    }).join('');
+    return '<div class="overflow-x-auto border rounded" style="border-color:var(--color-cs-border);">'
+      + '<table class="w-full text-sm" style="color:var(--color-cs-text);">'
+      + '<thead style="background:var(--color-cs-surface);"><tr class="border-b" style="border-color:var(--color-cs-border);">'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Name</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Collection</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">User ID</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Permissions</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Entities</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Expires</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Last Used</th>'
+      + '<th class="px-4 py-2.5 text-left text-xs font-medium" style="color:var(--color-cs-muted);">Actions</th>'
+      + '</tr></thead><tbody>' + rows + '</tbody></table></div>';
+  }
+  async function deleteApiKeyAdmin(id) {
+    if (!confirm('Delete this API key? This cannot be undone.')) return;
+    try {
+      const r = await apiFetch('/admin/api-keys/' + encodeURIComponent(id), { method: 'DELETE' });
+      if (!r.ok) { const d = await r.json(); throw new Error(d.error || 'Delete failed'); }
+      toast('API key deleted', 'success');
+      loadApiKeys();
+    } catch (e) { toast('Delete failed: ' + e.message, 'error'); }
+  }
+  // ── Create API Key modal ─────────────────────────────────────────────────
+  function openCreateApiKeyModal(prefillUserId, prefillEntity) {
+    document.getElementById('apikey-form').classList.remove('hidden');
+    document.getElementById('apikey-result').classList.add('hidden');
+    document.getElementById('apikey-form-error').classList.add('hidden');
+    document.getElementById('apikey-name').value = '';
+    document.getElementById('apikey-expires').value = '';
+    document.getElementById('apikey-user-id').value = prefillUserId || '';
+    document.querySelectorAll('.apikey-perm').forEach(function(cb) { cb.checked = false; });
+    // Populate entity access checkboxes
+    const entList = document.getElementById('apikey-entities-list');
+    entList.innerHTML = getNonAuthEntities().map(function(e) {
+      return '<label class="flex items-center gap-1.5 text-xs cursor-pointer select-none" style="color:var(--color-cs-muted);">'
+        + '<input type="checkbox" class="apikey-entity-cb" value="' + escAttr(e.slug) + '" /> ' + escHtml(e.name) + '</label>';
+    }).join('');
+    // Populate user entity selector for admin (create key for another user)
+    const sel = document.getElementById('apikey-user-entity');
+    sel.innerHTML = '<option value="">— Create for myself —</option>'
+      + (schema.userCollections || []).map(function(uc) {
+          return '<option value="' + escAttr(uc.name) + '"' + (prefillEntity === uc.name ? ' selected' : '') + '>' + escHtml(uc.name) + '</option>';
+        }).join('');
+    sel.onchange = function() {
+      const row = document.getElementById('apikey-user-id-row');
+      row.classList.toggle('hidden', !sel.value);
+    };
+    if (prefillEntity) {
+      sel.value = prefillEntity;
+      document.getElementById('apikey-user-id-row').classList.remove('hidden');
+    } else {
+      document.getElementById('apikey-user-id-row').classList.add('hidden');
+    }
+    document.getElementById('apikey-modal-backdrop').classList.remove('hidden');
+  }
+  function closeApiKeyModal() {
+    document.getElementById('apikey-modal-backdrop').classList.add('hidden');
+  }
+  async function submitCreateApiKey() {
+    const name      = document.getElementById('apikey-name').value.trim() || 'API Key';
+    const expiresAt = document.getElementById('apikey-expires').value;
+    const permissions = Array.from(document.querySelectorAll('.apikey-perm:checked')).map(function(cb) { return cb.value; });
+    const entities  = Array.from(document.querySelectorAll('.apikey-entity-cb:checked')).map(function(cb) { return cb.value; });
+    const selEntity = document.getElementById('apikey-user-entity').value;
+    const selUserId = document.getElementById('apikey-user-id').value.trim();
+    const errEl = document.getElementById('apikey-form-error');
+    errEl.classList.add('hidden');
+    const btn = document.getElementById('apikey-submit-btn');
+    btn.disabled = true; btn.textContent = 'Creating…';
+    try {
+      let r, data;
+      if (selEntity && selUserId) {
+        // Admin creates key for another user
+        r = await apiFetch('/admin/api-keys', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ userId: selUserId, userEntity: selEntity, name, permissions, entities, expiresAt: expiresAt || null }),
+        });
+      } else {
+        // User creates key for themselves
+        const col = getAdminCollections()[0];
+        if (!col) throw new Error('No admin collection found');
+        r = await apiFetch('/api/auth/' + toSlug(col.name) + '/api-keys', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, permissions, entities, expiresAt: expiresAt || null }),
+        });
+      }
+      data = await r.json();
+      if (!r.ok) throw new Error(data.error || 'Failed to create key');
+      document.getElementById('apikey-result-value').value = data.key;
+      document.getElementById('apikey-form').classList.add('hidden');
+      document.getElementById('apikey-result').classList.remove('hidden');
+      // Refresh list if on API keys panel
+      if (!document.getElementById('api-keys-area').classList.contains('hidden')) loadApiKeys();
+    } catch (e) {
+      errEl.textContent = e.message;
+      errEl.classList.remove('hidden');
+    } finally {
+      btn.disabled = false; btn.textContent = 'Create Key';
+    }
+  }
+  function copyApiKey() {
+    const val = document.getElementById('apikey-result-value').value;
+    if (navigator.clipboard) { navigator.clipboard.writeText(val).then(function() { toast('Copied!', 'success'); }); }
+    else { document.getElementById('apikey-result-value').select(); document.execCommand('copy'); toast('Copied!', 'success'); }
+  }
+  // ── Impersonate ───────────────────────────────────────────────────────────
+  async function impersonateUser(userId, entityName) {
+    try {
+      const r = await apiFetch('/admin/impersonate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId, userEntity: entityName }),
+      });
+      const data = await r.json();
+      if (!r.ok) throw new Error(data.error || 'Impersonate failed');
+      document.getElementById('impersonate-token').value = data.token;
+      document.getElementById('impersonate-user-info').textContent =
+        'User: ' + (data.user && data.user.email ? data.user.email : userId) + ' (' + entityName + ')' +
+        ' · Expires: ' + new Date(data.expiresAt).toLocaleTimeString();
+      document.getElementById('impersonate-modal-backdrop').classList.remove('hidden');
+    } catch (e) { toast('Impersonate failed: ' + e.message, 'error'); }
+  }
+  function closeImpersonateModal() {
+    document.getElementById('impersonate-modal-backdrop').classList.add('hidden');
+  }
+  function copyImpersonateToken() {
+    const val = document.getElementById('impersonate-token').value;
+    if (navigator.clipboard) { navigator.clipboard.writeText(val).then(function() { toast('Copied!', 'success'); }); }
+    else { document.getElementById('impersonate-token').select(); document.execCommand('copy'); toast('Copied!', 'success'); }
+  }
+  // ── AI Chat ────────────────────────────────────────────────────────────
+  let aiMessages = []; // { role: 'user'|'assistant', content: string }
+  let aiPanelOpen = false;
+  async function checkAiStatus() {
+    try {
+      const r = await fetch('/admin/ai/status');
+      if (!r.ok) return;
+      const data = await r.json();
+      if (data.configured) {
+        const btn = document.getElementById('btn-ai');
+        btn.classList.remove('hidden');
+        btn.classList.add('flex');
+      }
+    } catch (e) { console.warn('AI status check failed:', e); }
+  }
+  function toggleAiPanel() {
+    if (aiPanelOpen) closeAiPanel(); else openAiPanel();
+  }
+  function openAiPanel() {
+    aiPanelOpen = true;
+    document.getElementById('ai-panel').style.translate = '0';
+    if (aiMessages.length === 0) renderAiWelcome();
+    setTimeout(() => document.getElementById('ai-input').focus(), 220);
+  }
+  function closeAiPanel() {
+    aiPanelOpen = false;
+    document.getElementById('ai-panel').style.translate = '100%';
+  }
+  function clearAiChat() {
+    aiMessages = [];
+    document.getElementById('ai-messages').innerHTML = '';
+    renderAiWelcome();
+  }
+  function renderAiWelcome() {
+    const el = document.getElementById('ai-messages');
+    el.innerHTML = '<div class="text-xs text-center py-6" style="color:var(--color-cs-muted);">Ask me anything about your data, API routes, entity config, or how ChadStart works.</div>';
+  }
+  function appendAiMessage(role, content) {
+    const container = document.getElementById('ai-messages');
+    // Remove welcome message if present
+    const welcome = container.querySelector('.text-center');
+    if (welcome) welcome.remove();
+    const isUser = role === 'user';
+    const bubble = document.createElement('div');
+    bubble.className = 'flex ' + (isUser ? 'justify-end' : 'justify-start');
+    const inner = document.createElement('div');
+    inner.className = 'max-w-[85%] rounded px-3 py-2 text-sm';
+    inner.style.cssText = isUser
+      ? 'background:rgba(187,134,252,0.15);color:var(--color-cs-text);border:1px solid rgba(187,134,252,0.25);'
+      : 'background:var(--color-cs-surface);color:var(--color-cs-text);border:1px solid var(--color-cs-border);white-space:pre-wrap;';
+    inner.textContent = content;
+    bubble.appendChild(inner);
+    container.appendChild(bubble);
+    container.scrollTop = container.scrollHeight;
+  }
+  function appendAiThinking() {
+    const container = document.getElementById('ai-messages');
+    const bubble = document.createElement('div');
+    bubble.id = 'ai-thinking';
+    bubble.className = 'flex justify-start';
+    bubble.innerHTML = '<div class="rounded px-3 py-2 text-sm" style="background:var(--color-cs-surface);color:var(--color-cs-muted);border:1px solid var(--color-cs-border);">Thinking…</div>';
+    container.appendChild(bubble);
+    container.scrollTop = container.scrollHeight;
+  }
+  function removeAiThinking() {
+    const el = document.getElementById('ai-thinking');
+    if (el) el.remove();
+  }
+  function aiInputKeydown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendAiMessage(); }
+  }
+  async function sendAiMessage() {
+    const inputEl = document.getElementById('ai-input');
+    const sendBtn = document.getElementById('ai-send-btn');
+    const text = inputEl.value.trim();
+    if (!text) return;
+    inputEl.value = '';
+    inputEl.disabled = true;
+    sendBtn.disabled = true;
+    aiMessages.push({ role: 'user', content: text });
+    appendAiMessage('user', text);
+    appendAiThinking();
+    try {
+      const r = await apiFetch('/admin/ai/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: aiMessages }),
+      });
+      const data = await r.json();
+      removeAiThinking();
+      if (!r.ok) throw new Error(data.error || 'AI request failed');
+      const reply = data.message;
+      aiMessages.push({ role: 'assistant', content: reply });
+      appendAiMessage('assistant', reply);
+    } catch (err) {
+      removeAiThinking();
+      appendAiMessage('assistant', '⚠ ' + err.message);
+      // Don't push error into history — let the user retry
+      aiMessages.pop();
+    } finally {
+      inputEl.disabled = false;
+      sendBtn.disabled = false;
+      inputEl.focus();
+    }
+  }
+</script>
+</body>
+</html>