@sonicjs-cms/core 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createAuth } from './chunk-SOZUG52O.js';
-import { getEmailService, hasEmailService, setEmailService, invalidateVariablesCache, resolveVariablesInObject, resolveDocScope, denyIfNotAllowed, DocumentRepository, dispatchHookEvent, getCustomData, createDocumentSchema, renderTable, getVariablesCached, setVariablesCache, TenantService, isValidMemberRole, renderConfirmationDialog, getConfirmationDialogScript, VALID_MEMBER_ROLES, userProfilesPlugin, lexicalEditorPlugin, api_media_default, api_system_default, apiDocumentsRoutes, api_default, adminDocumentsRoutes, admin_api_default, adminCollectionsRoutes, adminSettingsRoutes, router2, admin_content_default, adminMediaRoutes, router, adminPluginRoutes, adminLogsRoutes, userRoutes, auth_default, test_cleanup_default } from './chunk-5UCMLBRQ.js';
-export { DocumentRepository, ROUTES_INFO, admin_api_default as adminApiRoutes, adminCheckboxRoutes, adminCollectionsRoutes, admin_content_default as adminContentRoutes, router as adminDashboardRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, userRoutes as adminUsersRoutes, api_content_crud_default as apiContentCrudRoutes, api_media_default as apiMediaRoutes, api_default as apiRoutes, api_system_default as apiSystemRoutes, auth_default as authRoutes, createUserProfilesPlugin, defineUserProfile, getUserProfileConfig, userProfilesPlugin } from './chunk-5UCMLBRQ.js';
+import { getEmailService, hasEmailService, setEmailService, invalidateVariablesCache, resolveVariablesInObject, resolveDocScope, denyIfNotAllowed, DocumentRepository, dispatchHookEvent, getCustomData, createDocumentSchema, renderTable, getVariablesCached, setVariablesCache, TenantService, isValidMemberRole, renderConfirmationDialog, getConfirmationDialogScript, VALID_MEMBER_ROLES, userProfilesPlugin, lexicalEditorPlugin, api_media_default, api_system_default, apiDocumentsRoutes, api_default, adminDocumentsRoutes, admin_api_default, adminCollectionsRoutes, adminSettingsRoutes, router2, admin_content_default, adminMediaRoutes, router, adminPluginRoutes, adminLogsRoutes, userRoutes, auth_default, test_cleanup_default } from './chunk-ZP77LTN4.js';
+export { DocumentRepository, ROUTES_INFO, admin_api_default as adminApiRoutes, adminCheckboxRoutes, adminCollectionsRoutes, admin_content_default as adminContentRoutes, router as adminDashboardRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, userRoutes as adminUsersRoutes, api_content_crud_default as apiContentCrudRoutes, api_media_default as apiMediaRoutes, api_default as apiRoutes, api_system_default as apiSystemRoutes, auth_default as authRoutes, createUserProfilesPlugin, defineUserProfile, getUserProfileConfig, userProfilesPlugin } from './chunk-ZP77LTN4.js';
 import './chunk-VVYVFCML.js';
 import './chunk-RMRJGMDE.js';
 import { SettingsService, setAppInstance } from './chunk-2XAQTPAE.js';
@@ -8,30 +8,30 @@ export { Logger, getLogger, initLogger } from './chunk-2XAQTPAE.js';
 import { getAllCacheStats, CACHE_CONFIGS, getCacheService, clearAllCaches, parseCacheKey } from './chunk-K25XHMM3.js';
 import { schema_exports } from './chunk-AI663NBO.js';
 export { apiTokens, content, contentVersions, insertContentSchema, insertLogConfigSchema, insertMediaSchema, insertPluginActivityLogSchema, insertPluginAssetSchema, insertPluginHookSchema, insertPluginRouteSchema, insertPluginSchema, insertSystemLogSchema, insertUserSchema, insertWorkflowHistorySchema, logConfig, media, pluginActivityLog, pluginAssets, pluginHooks, pluginRoutes, plugins, selectContentSchema, selectLogConfigSchema, selectMediaSchema, selectPluginActivityLogSchema, selectPluginAssetSchema, selectPluginHookSchema, selectPluginRouteSchema, selectPluginSchema, selectSystemLogSchema, selectUserSchema, selectWorkflowHistorySchema, systemLogs, users, workflowHistory } from './chunk-AI663NBO.js';
-import { requireAuth, DocumentTypeRegistry, requireRbac, requireRole, getJwtExpirySecondsFromDb, AuthManager, metricsMiddleware, bootstrapMiddleware, securityHeadersMiddleware, csrfProtection } from './chunk-WCA4VENG.js';
-export { AuthManager, PermissionManager, bootstrapDocumentTypes, bootstrapMiddleware, cacheHeaders, compressionMiddleware, detailedLoggingMiddleware, getActivePlugins, isPluginActive, logActivity, loggingMiddleware, optionalAuth, performanceLoggingMiddleware, requireActivePlugin, requireActivePlugins, requireAnyPermission, requireAuth, requirePermission, requireRole, securityHeadersMiddleware as securityHeaders, securityLoggingMiddleware } from './chunk-WCA4VENG.js';
+import { requireAuth, DocumentTypeRegistry, requireRbac, requireRole, getJwtExpirySecondsFromDb, AuthManager, metricsMiddleware, bootstrapMiddleware, securityHeadersMiddleware, csrfProtection } from './chunk-4UYJPHSV.js';
+export { AuthManager, PermissionManager, bootstrapDocumentTypes, bootstrapMiddleware, cacheHeaders, compressionMiddleware, detailedLoggingMiddleware, getActivePlugins, isPluginActive, logActivity, loggingMiddleware, optionalAuth, performanceLoggingMiddleware, requireActivePlugin, requireActivePlugins, requireAnyPermission, requireAuth, requirePermission, requireRole, securityHeadersMiddleware as securityHeaders, securityLoggingMiddleware } from './chunk-4UYJPHSV.js';
 import { RbacService, DocumentsService } from './chunk-3TMTYJAJ.js';
 export { DocumentsService, RbacService } from './chunk-3TMTYJAJ.js';
 import { nanoid } from './chunk-UWUP2VMT.js';
-import { PluginService, PLUGIN_REGISTRY, invalidateTenantCache, getCollectionRegistry, TENANT_COOKIE, MULTI_TENANT_PLUGIN_ID, collectionRecordToRow, tenantMiddleware } from './chunk-RDH6PUOP.js';
-export { PluginBootstrapService, PluginService as PluginServiceClass, getAvailableCollectionNames, loadCollectionConfig, loadCollectionConfigs, registerCollections, validateCollectionConfig } from './chunk-RDH6PUOP.js';
-export { MigrationService } from './chunk-DSXEVMOM.js';
+import { PluginService, PLUGIN_REGISTRY, invalidateTenantCache, getCollectionRegistry, TENANT_COOKIE, MULTI_TENANT_PLUGIN_ID, collectionRecordToRow, tenantMiddleware } from './chunk-4LVVMVQI.js';
+export { PluginBootstrapService, PluginService as PluginServiceClass, getAvailableCollectionNames, loadCollectionConfig, loadCollectionConfigs, registerCollections, validateCollectionConfig } from './chunk-4LVVMVQI.js';
+export { MigrationService } from './chunk-5U75XP74.js';
 export { renderFilterBar } from './chunk-JQISFW6U.js';
 import { renderAdminLayout } from './chunk-OBA2RYZN.js';
 export { getConfirmationDialogScript, renderAlert, renderConfirmationDialog, renderForm, renderFormField, renderPagination, renderTable } from './chunk-OBA2RYZN.js';
 import { init_admin_layout_catalyst_template, renderAdminLayoutCatalyst } from './chunk-5V62WT6M.js';
 export { renderAdminLayoutCatalyst } from './chunk-5V62WT6M.js';
-import { TurnstileService, HookSystemImpl, createPluginWirer, registerPluginRoutes, setPluginMenu, resolvePluginMenuItems } from './chunk-MYQ7KZUQ.js';
-export { HookSystemImpl, HookUtils, PluginDependencyCycleError, PluginManager as PluginManagerClass, PluginRegistryImpl, PluginValidator as PluginValidatorClass, RegisterPluginsError, ScopedHookSystem as ScopedHookSystemClass, collectCronSchedules, collectCrons, createScheduledHandler, dispatchCronTick, getPluginMenu, registerPlugins, resetPluginMenu, resolvePluginMenuItems, setPluginMenu, topoSort } from './chunk-MYQ7KZUQ.js';
-import { definePlugin, setPluginDefinitions } from './chunk-GMZ5TGYP.js';
-export { applySchemaDefaults, definePlugin, isDefinedPlugin, parseConfigSchema, parseFormDataToSettings, renderSchemaFields } from './chunk-GMZ5TGYP.js';
+import { TurnstileService, HookSystemImpl, createPluginWirer, registerPluginRoutes, setPluginMenu, resolvePluginMenuItems } from './chunk-GICS5AIO.js';
+export { HookSystemImpl, HookUtils, PluginDependencyCycleError, PluginManager as PluginManagerClass, PluginRegistryImpl, PluginValidator as PluginValidatorClass, RegisterPluginsError, ScopedHookSystem as ScopedHookSystemClass, collectCronSchedules, collectCrons, createScheduledHandler, dispatchCronTick, getPluginMenu, registerPlugins, resetPluginMenu, resolvePluginMenuItems, setPluginMenu, topoSort } from './chunk-GICS5AIO.js';
+import { definePlugin, setPluginDefinitions } from './chunk-7OTOXWEB.js';
+export { applySchemaDefaults, definePlugin, isDefinedPlugin, parseConfigSchema, parseFormDataToSettings, renderSchemaFields } from './chunk-7OTOXWEB.js';
 import { setHookSystem } from './chunk-RNZFGN4R.js';
 export { getHookSystem, getTypedHooks, hasHookSystem, resetHookSystem, setHookSystem } from './chunk-RNZFGN4R.js';
 export { QueryFilterBuilder, TemplateRenderer, buildQuery, renderTemplate, templateRenderer } from './chunk-QZGABF2M.js';
 export { metricsTracker } from './chunk-FICTAGD4.js';
 import './chunk-X7ZAEI5S.js';
-import { getCoreVersion, package_default } from './chunk-W53J3BJ2.js';
-export { SONICJS_VERSION, getCoreVersion } from './chunk-W53J3BJ2.js';
+import { getCoreVersion, package_default } from './chunk-JEX3UPZL.js';
+export { SONICJS_VERSION, getCoreVersion } from './chunk-JEX3UPZL.js';
 import { escapeHtml, sanitizeInput } from './chunk-TQABQWOP.js';
 export { escapeHtml, sanitizeInput, sanitizeObject } from './chunk-TQABQWOP.js';
 export { HOOKS } from './chunk-QXOZI5Q2.js';
@@ -193,9 +193,9 @@ var DatabaseToolsService = class {
     }
   }
   /**
-   * Get table data with optional pagination and sorting
+   * Get table data with optional pagination, sorting, and search
    */
-  async getTableData(tableName, limit = 100, offset = 0, sortColumn, sortDirection = "asc") {
+  async getTableData(tableName, limit = 100, offset = 0, sortColumn, sortDirection = "asc", search) {
     try {
       const tables = await this.getTables();
       if (!tables.includes(tableName)) {
@@ -206,14 +206,26 @@ var DatabaseToolsService = class {
       if (sortColumn && !columns.includes(sortColumn)) {
         sortColumn = void 0;
       }
-      const countResult = await this.db.prepare(`SELECT COUNT(*) as count FROM ${tableName}`).first();
+      const searchTerm = search?.trim();
+      let whereClause = "";
+      let bindings = [];
+      if (searchTerm) {
+        const conditions = columns.map(() => `CAST(? AS TEXT) IS NOT NULL AND CAST(? AS TEXT) LIKE ?`).join(" OR ");
+        const colConditions = columns.map((col) => `CAST("${col}" AS TEXT) LIKE ?`).join(" OR ");
+        whereClause = ` WHERE (${colConditions})`;
+        bindings = columns.map(() => `%${searchTerm}%`);
+      }
+      const countQuery = `SELECT COUNT(*) as count FROM "${tableName}"${whereClause}`;
+      const countStmt = this.db.prepare(countQuery);
+      const countResult = bindings.length > 0 ? await countStmt.bind(...bindings).first() : await countStmt.first();
       const totalRows = countResult?.count || 0;
-      let query = `SELECT * FROM ${tableName}`;
+      let query = `SELECT * FROM "${tableName}"${whereClause}`;
       if (sortColumn) {
-        query += ` ORDER BY ${sortColumn} ${sortDirection.toUpperCase()}`;
+        query += ` ORDER BY "${sortColumn}" ${sortDirection.toUpperCase()}`;
       }
       query += ` LIMIT ${limit} OFFSET ${offset}`;
-      const dataResult = await this.db.prepare(query).all();
+      const dataStmt = this.db.prepare(query);
+      const dataResult = bindings.length > 0 ? await dataStmt.bind(...bindings).all() : await dataStmt.all();
       return {
         tableName,
         columns,
@@ -317,6 +329,43 @@ function renderDatabaseTablePage(data) {
         </div>
       </div>
 
+      <!-- Search bar -->
+      <div class="flex items-center gap-3">
+        <div class="relative flex-1 max-w-xl">
+          <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <svg class="h-4 w-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
+            </svg>
+          </div>
+          <input
+            id="searchInput"
+            type="text"
+            placeholder="Search all columns including JSON data..."
+            value="${escapeHtml2(data.search || "")}"
+            class="block w-full rounded-lg border-0 py-2.5 pl-10 pr-10 text-sm text-zinc-900 dark:text-white bg-white dark:bg-zinc-800 ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
+            onkeydown="if(event.key==='Enter') doSearch()"
+          />
+          ${data.search ? `
+          <button
+            onclick="clearSearch()"
+            class="absolute inset-y-0 right-0 flex items-center pr-3 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200"
+            title="Clear search"
+          >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+          ` : ""}
+        </div>
+        <button
+          onclick="doSearch()"
+          class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors shadow-sm"
+        >
+          Search
+        </button>
+        ${data.search ? `<span class="text-sm text-zinc-500 dark:text-zinc-400">Filtered: <strong class="text-zinc-900 dark:text-white">${escapeHtml2(data.search)}</strong></span>` : ""}
+      </div>
+
       <!-- Table Card -->
       <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 overflow-hidden">
         <!-- Table -->
@@ -351,7 +400,7 @@ function renderDatabaseTablePage(data) {
                   <tr class="${idx % 2 === 0 ? "bg-white dark:bg-zinc-900" : "bg-zinc-50 dark:bg-zinc-900/50"}">
                     ${data.columns.map((col) => `
                       <td class="px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300 whitespace-nowrap max-w-xs overflow-hidden text-ellipsis" title="${escapeHtml2(String(row[col] ?? ""))}">
-                        ${formatCellValue(row[col])}
+                        ${formatCellValue(row[col], col)}
                       </td>
                     `).join("")}
                   </tr>
@@ -427,79 +476,143 @@ function renderDatabaseTablePage(data) {
       </div>
     </div>
 
+    <!-- JSON Viewer Modal -->
+    <div id="jsonModal" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true">
+      <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" onclick="closeJsonModal()"></div>
+      <div class="fixed inset-0 flex items-center justify-center p-4 pointer-events-none">
+        <div class="pointer-events-auto relative w-full max-w-4xl max-h-[85vh] flex flex-col rounded-xl bg-white dark:bg-zinc-900 shadow-2xl ring-1 ring-zinc-950/10 dark:ring-white/10">
+          <div class="flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
+            <div>
+              <h3 id="jsonModalTitle" class="text-base font-semibold text-zinc-900 dark:text-white">Field Value</h3>
+              <p id="jsonModalSubtitle" class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5"></p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button onclick="copyJsonValue()" class="inline-flex items-center gap-1.5 rounded-lg bg-zinc-100 dark:bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                </svg>
+                Copy
+              </button>
+              <button onclick="closeJsonModal()" class="rounded-lg p-1.5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="flex-1 overflow-auto p-6">
+            <pre id="jsonModalContent" class="text-sm font-mono text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words leading-relaxed"></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script>
       const currentTableName = '${data.tableName}';
       let currentPage = ${data.currentPage};
       let currentPageSize = ${data.pageSize};
       let currentSort = '${data.sortColumn || ""}';
       let currentSortDir = '${data.sortDirection || "asc"}';
+      let currentSearch = ${JSON.stringify(data.search || "")};
+
+      function buildParams(overrides = {}) {
+        const params = new URLSearchParams();
+        const p = { page: currentPage, pageSize: currentPageSize, sort: currentSort, dir: currentSortDir, search: currentSearch, ...overrides };
+        if (p.page) params.set('page', p.page);
+        if (p.pageSize) params.set('pageSize', p.pageSize);
+        if (p.sort) { params.set('sort', p.sort); params.set('dir', p.dir || 'asc'); }
+        if (p.search) params.set('search', p.search);
+        return params;
+      }
 
       function goToPage(page) {
         if (page < 1 || page > ${totalPages}) return;
-        const params = new URLSearchParams();
-        params.set('page', page);
-        params.set('pageSize', currentPageSize);
-        if (currentSort) {
-          params.set('sort', currentSort);
-          params.set('dir', currentSortDir);
-        }
-        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${params}\`;
+        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${buildParams({ page })}\`;
       }
 
       function sortTable(column) {
-        let newDir = 'asc';
-        if (currentSort === column && currentSortDir === 'asc') {
-          newDir = 'desc';
-        }
-
-        const params = new URLSearchParams();
-        params.set('page', '1');
-        params.set('pageSize', currentPageSize);
-        params.set('sort', column);
-        params.set('dir', newDir);
-        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${params}\`;
+        const newDir = (currentSort === column && currentSortDir === 'asc') ? 'desc' : 'asc';
+        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${buildParams({ page: 1, sort: column, dir: newDir })}\`;
       }
 
       function changePageSize(newSize) {
-        const params = new URLSearchParams();
-        params.set('page', '1');
-        params.set('pageSize', newSize);
-        if (currentSort) {
-          params.set('sort', currentSort);
-          params.set('dir', currentSortDir);
-        }
-        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${params}\`;
+        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${buildParams({ page: 1, pageSize: newSize })}\`;
       }
 
       function refreshTableData() {
         window.location.reload();
       }
 
-      function formatCellValue(value) {
-        if (value === null || value === undefined) {
-          return '<span class="text-zinc-400 dark:text-zinc-500 italic">null</span>';
-        }
-        if (typeof value === 'boolean') {
-          return \`<span class="px-2 py-0.5 rounded text-xs font-medium \${value ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-400'}">\${value}</span>\`;
-        }
-        if (typeof value === 'object') {
-          return '<span class="text-xs font-mono text-zinc-600 dark:text-zinc-400">' + JSON.stringify(value).substring(0, 50) + (JSON.stringify(value).length > 50 ? '...' : '') + '</span>';
-        }
-        const str = String(value);
-        if (str.length > 100) {
-          return escapeHtml(str.substring(0, 100)) + '...';
+      function doSearch() {
+        const val = document.getElementById('searchInput').value.trim();
+        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${buildParams({ page: 1, search: val })}\`;
+      }
+
+      function clearSearch() {
+        window.location.href = \`/admin/database-tools/tables/\${currentTableName}?\${buildParams({ page: 1, search: '' })}\`;
+      }
+
+      // JSON viewer modal
+      let _jsonModalValue = '';
+
+      function openJsonModal(rawValue, colName) {
+        // rawValue comes from dataset \u2014 browser already decoded HTML entities, so it's the original string
+        _jsonModalValue = rawValue;
+        document.getElementById('jsonModalTitle').textContent = colName;
+        const el = document.getElementById('jsonModalContent');
+        const subtitle = document.getElementById('jsonModalSubtitle');
+        try {
+          const parsed = JSON.parse(rawValue);
+          const pretty = JSON.stringify(parsed, null, 2);
+          subtitle.textContent = 'JSON \u2022 ' + rawValue.length + ' chars';
+          el.innerHTML = syntaxHighlight(pretty);
+        } catch {
+          el.textContent = rawValue;
+          subtitle.textContent = rawValue.length + ' chars';
         }
-        return escapeHtml(str);
+        document.getElementById('jsonModal').classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
       }
 
+      function closeJsonModal() {
+        document.getElementById('jsonModal').classList.add('hidden');
+        document.body.style.overflow = '';
+      }
+
+      function copyJsonValue() {
+        navigator.clipboard.writeText(_jsonModalValue).then(() => {
+          const btn = event.currentTarget;
+          const orig = btn.innerHTML;
+          btn.textContent = 'Copied!';
+          setTimeout(() => { btn.innerHTML = orig; }, 1500);
+        });
+      }
+
+      function syntaxHighlight(json) {
+        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return json.replace(/("(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\"])*"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function(match) {
+          let cls = 'text-purple-600 dark:text-purple-400'; // number
+          if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+              cls = 'text-blue-600 dark:text-blue-400 font-medium'; // key
+            } else {
+              cls = 'text-green-700 dark:text-green-400'; // string value
+            }
+          } else if (/true|false/.test(match)) {
+            cls = 'text-orange-600 dark:text-orange-400';
+          } else if (/null/.test(match)) {
+            cls = 'text-zinc-400 italic';
+          }
+          return \`<span class="\${cls}">\${match}</span>\`;
+        });
+      }
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') closeJsonModal();
+      });
+
       function escapeHtml(text) {
-        const map = {
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          '"': '&quot;',
-          "'": '&#039;'
-        };
+        const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
         return String(text).replace(/[&<>"']/g, m => map[m]);
       }
     </script>
@@ -566,7 +679,16 @@ function escapeHtml2(text) {
   };
   return String(text).replace(/[&<>"']/g, (m) => map[m] || m);
 }
-function formatCellValue(value) {
+function isJsonString(str2) {
+  const s = str2.trim();
+  return (s.startsWith("{") || s.startsWith("[")) && (s.endsWith("}") || s.endsWith("]"));
+}
+function jsonButton(raw, colName) {
+  const preview = raw.length > 60 ? escapeHtml2(raw.substring(0, 60)) + "\u2026" : escapeHtml2(raw);
+  return `<button data-json-val="${escapeHtml2(raw)}" data-col-name="${escapeHtml2(colName)}" onclick="openJsonModal(this.dataset.jsonVal, this.dataset.colName)" class="text-left text-xs font-mono text-indigo-600 dark:text-indigo-400 hover:underline">${preview}</button>`;
+}
+function formatCellValue(value, colName) {
+  const col = colName || "value";
   if (value === null || value === void 0) {
     return '<span class="text-zinc-400 dark:text-zinc-500 italic">null</span>';
   }
@@ -574,11 +696,15 @@ function formatCellValue(value) {
     return `<span class="px-2 py-0.5 rounded text-xs font-medium ${value ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-400"}">${value}</span>`;
   }
   if (typeof value === "object") {
-    return '<span class="text-xs font-mono text-zinc-600 dark:text-zinc-400">' + JSON.stringify(value).substring(0, 50) + (JSON.stringify(value).length > 50 ? "..." : "") + "</span>";
+    return jsonButton(JSON.stringify(value), col);
   }
   const str2 = String(value);
-  if (str2.length > 100) {
-    return escapeHtml2(str2.substring(0, 100)) + "...";
+  if (isJsonString(str2)) {
+    return jsonButton(str2, col);
+  }
+  if (str2.length > 120) {
+    const preview = escapeHtml2(str2.substring(0, 120)) + "\u2026";
+    return `<button data-json-val="${escapeHtml2(str2)}" data-col-name="${escapeHtml2(col)}" onclick="openJsonModal(this.dataset.jsonVal, this.dataset.colName)" class="text-left text-sm text-zinc-700 dark:text-zinc-300 hover:underline">${preview}</button>`;
   }
   return escapeHtml2(str2);
 }
@@ -713,9 +839,10 @@ function createDatabaseToolsAdminRoutes() {
       const offset = parseInt(c.req.query("offset") || "0");
       const sortColumn = c.req.query("sort");
       const sortDirection = c.req.query("dir") || "asc";
+      const search = c.req.query("search");
       const db = c.env.DB;
       const service = new DatabaseToolsService(db);
-      const tableData = await service.getTableData(tableName, limit, offset, sortColumn, sortDirection);
+      const tableData = await service.getTableData(tableName, limit, offset, sortColumn, sortDirection, search);
       return c.json({
         success: true,
         data: tableData
@@ -739,10 +866,11 @@ function createDatabaseToolsAdminRoutes() {
       const pageSize = parseInt(c.req.query("pageSize") || "20");
       const sortColumn = c.req.query("sort");
       const sortDirection = c.req.query("dir") || "asc";
+      const search = c.req.query("search");
       const offset = (page - 1) * pageSize;
       const db = c.env.DB;
       const service = new DatabaseToolsService(db);
-      const tableData = await service.getTableData(tableName, pageSize, offset, sortColumn, sortDirection);
+      const tableData = await service.getTableData(tableName, pageSize, offset, sortColumn, sortDirection, search);
       const pageData = {
         user: {
           name: user.email.split("@")[0] || "Unknown",
@@ -756,7 +884,8 @@ function createDatabaseToolsAdminRoutes() {
         currentPage: page,
         pageSize,
         sortColumn,
-        sortDirection
+        sortDirection,
+        search
       };
       return c.html(renderDatabaseTablePage(pageData));
     } catch (error) {