npm - @intranefr/superbackend - Versions diffs - 1.4.4 → 1.5.1 - Mend

@intranefr/superbackend 1.4.4 → 1.5.1

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 (195) hide show

package/.env.example +5 -0
package/README.md +11 -0
package/index.js +39 -1
package/package.json +11 -3
package/public/sdk/ui-components.iife.js +191 -0
package/sdk/ui-components/browser/src/index.js +228 -0
package/src/admin/endpointRegistry.js +120 -0
package/src/controllers/admin.controller.js +111 -5
package/src/controllers/adminBlockDefinitions.controller.js +127 -0
package/src/controllers/adminBlockDefinitionsAi.controller.js +54 -0
package/src/controllers/adminCache.controller.js +342 -0
package/src/controllers/adminContextBlockDefinitions.controller.js +141 -0
package/src/controllers/adminCrons.controller.js +388 -0
package/src/controllers/adminDbBrowser.controller.js +124 -0
package/src/controllers/adminEjsVirtual.controller.js +13 -3
package/src/controllers/adminHeadless.controller.js +91 -2
package/src/controllers/adminHealthChecks.controller.js +570 -0
package/src/controllers/adminI18n.controller.js +51 -29
package/src/controllers/adminLlm.controller.js +126 -2
package/src/controllers/adminPages.controller.js +720 -0
package/src/controllers/adminPagesContextBlocksAi.controller.js +54 -0
package/src/controllers/adminProxy.controller.js +113 -0
package/src/controllers/adminRateLimits.controller.js +138 -0
package/src/controllers/adminRbac.controller.js +803 -0
package/src/controllers/adminScripts.controller.js +320 -0
package/src/controllers/adminSeoConfig.controller.js +71 -48
package/src/controllers/adminTerminals.controller.js +39 -0
package/src/controllers/adminUiComponents.controller.js +315 -0
package/src/controllers/adminUiComponentsAi.controller.js +34 -0
package/src/controllers/blogAdmin.controller.js +279 -0
package/src/controllers/blogAiAdmin.controller.js +224 -0
package/src/controllers/blogAutomationAdmin.controller.js +141 -0
package/src/controllers/blogInternal.controller.js +26 -0
package/src/controllers/blogPublic.controller.js +89 -0
package/src/controllers/fileManager.controller.js +190 -0
package/src/controllers/fileManagerStoragePolicy.controller.js +23 -0
package/src/controllers/healthChecksPublic.controller.js +196 -0
package/src/controllers/metrics.controller.js +64 -4
package/src/controllers/orgAdmin.controller.js +366 -0
package/src/controllers/uiComponentsPublic.controller.js +118 -0
package/src/middleware/auth.js +7 -0
package/src/middleware/internalCronAuth.js +29 -0
package/src/middleware/rbac.js +62 -0
package/src/middleware.js +879 -56
package/src/models/BlockDefinition.js +27 -0
package/src/models/BlogAutomationLock.js +14 -0
package/src/models/BlogAutomationRun.js +39 -0
package/src/models/BlogPost.js +42 -0
package/src/models/CacheEntry.js +26 -0
package/src/models/ConsoleEntry.js +32 -0
package/src/models/ConsoleLog.js +23 -0
package/src/models/ContextBlockDefinition.js +33 -0
package/src/models/CronExecution.js +47 -0
package/src/models/CronJob.js +70 -0
package/src/models/ExternalDbConnection.js +49 -0
package/src/models/FileEntry.js +22 -0
package/src/models/HeadlessModelDefinition.js +10 -0
package/src/models/HealthAutoHealAttempt.js +57 -0
package/src/models/HealthCheck.js +132 -0
package/src/models/HealthCheckRun.js +51 -0
package/src/models/HealthIncident.js +49 -0
package/src/models/Page.js +95 -0
package/src/models/PageCollection.js +42 -0
package/src/models/ProxyEntry.js +66 -0
package/src/models/RateLimitCounter.js +19 -0
package/src/models/RateLimitMetricBucket.js +20 -0
package/src/models/RbacGrant.js +25 -0
package/src/models/RbacGroup.js +16 -0
package/src/models/RbacGroupMember.js +13 -0
package/src/models/RbacGroupRole.js +13 -0
package/src/models/RbacRole.js +25 -0
package/src/models/RbacUserRole.js +13 -0
package/src/models/ScriptDefinition.js +42 -0
package/src/models/ScriptRun.js +22 -0
package/src/models/UiComponent.js +29 -0
package/src/models/UiComponentProject.js +26 -0
package/src/models/UiComponentProjectComponent.js +18 -0
package/src/routes/admin.routes.js +1 -0
package/src/routes/adminBlog.routes.js +21 -0
package/src/routes/adminBlogAi.routes.js +16 -0
package/src/routes/adminBlogAutomation.routes.js +27 -0
package/src/routes/adminCache.routes.js +20 -0
package/src/routes/adminConsoleManager.routes.js +302 -0
package/src/routes/adminCrons.routes.js +25 -0
package/src/routes/adminDbBrowser.routes.js +65 -0
package/src/routes/adminEjsVirtual.routes.js +2 -1
package/src/routes/adminHeadless.routes.js +8 -1
package/src/routes/adminHealthChecks.routes.js +28 -0
package/src/routes/adminI18n.routes.js +4 -3
package/src/routes/adminLlm.routes.js +4 -2
package/src/routes/adminPages.routes.js +55 -0
package/src/routes/adminProxy.routes.js +15 -0
package/src/routes/adminRateLimits.routes.js +17 -0
package/src/routes/adminRbac.routes.js +38 -0
package/src/routes/adminScripts.routes.js +21 -0
package/src/routes/adminSeoConfig.routes.js +5 -4
package/src/routes/adminTerminals.routes.js +13 -0
package/src/routes/adminUiComponents.routes.js +30 -0
package/src/routes/blogInternal.routes.js +14 -0
package/src/routes/blogPublic.routes.js +9 -0
package/src/routes/fileManager.routes.js +62 -0
package/src/routes/fileManagerStoragePolicy.routes.js +9 -0
package/src/routes/healthChecksPublic.routes.js +9 -0
package/src/routes/log.routes.js +43 -60
package/src/routes/metrics.routes.js +4 -2
package/src/routes/orgAdmin.routes.js +6 -0
package/src/routes/pages.routes.js +123 -0
package/src/routes/proxy.routes.js +46 -0
package/src/routes/rbac.routes.js +47 -0
package/src/routes/uiComponentsPublic.routes.js +9 -0
package/src/routes/webhook.routes.js +2 -1
package/src/routes/workflows.routes.js +4 -0
package/src/services/blockDefinitionsAi.service.js +247 -0
package/src/services/blog.service.js +99 -0
package/src/services/blogAutomation.service.js +978 -0
package/src/services/blogCronsBootstrap.service.js +184 -0
package/src/services/blogPublishing.service.js +58 -0
package/src/services/cacheLayer.service.js +696 -0
package/src/services/consoleManager.service.js +700 -0
package/src/services/consoleOverride.service.js +6 -1
package/src/services/cronScheduler.service.js +350 -0
package/src/services/dbBrowser.service.js +536 -0
package/src/services/ejsVirtual.service.js +102 -32
package/src/services/fileManager.service.js +475 -0
package/src/services/fileManagerStoragePolicy.service.js +285 -0
package/src/services/headlessExternalModels.service.js +292 -0
package/src/services/headlessModels.service.js +26 -6
package/src/services/healthChecks.service.js +650 -0
package/src/services/healthChecksBootstrap.service.js +109 -0
package/src/services/healthChecksScheduler.service.js +106 -0
package/src/services/llmDefaults.service.js +190 -0
package/src/services/migrationAssets/s3.js +2 -2
package/src/services/pages.service.js +602 -0
package/src/services/pagesContext.service.js +331 -0
package/src/services/pagesContextBlocksAi.service.js +349 -0
package/src/services/proxy.service.js +535 -0
package/src/services/rateLimiter.service.js +623 -0
package/src/services/rbac.service.js +212 -0
package/src/services/scriptsRunner.service.js +259 -0
package/src/services/terminals.service.js +152 -0
package/src/services/terminalsWs.service.js +100 -0
package/src/services/uiComponentsAi.service.js +299 -0
package/src/services/uiComponentsCrypto.service.js +39 -0
package/src/services/workflow.service.js +23 -8
package/src/utils/orgRoles.js +14 -0
package/src/utils/rbac/engine.js +60 -0
package/src/utils/rbac/rightsRegistry.js +29 -0
package/views/admin-blog-automation.ejs +877 -0
package/views/admin-blog-edit.ejs +542 -0
package/views/admin-blog.ejs +399 -0
package/views/admin-cache.ejs +681 -0
package/views/admin-console-manager.ejs +680 -0
package/views/admin-crons.ejs +645 -0
package/views/admin-db-browser.ejs +445 -0
package/views/admin-ejs-virtual.ejs +16 -10
package/views/admin-file-manager.ejs +942 -0
package/views/admin-headless.ejs +294 -24
package/views/admin-health-checks.ejs +725 -0
package/views/admin-i18n.ejs +59 -5
package/views/admin-llm.ejs +99 -1
package/views/admin-organizations.ejs +528 -10
package/views/admin-pages.ejs +2424 -0
package/views/admin-proxy.ejs +491 -0
package/views/admin-rate-limiter.ejs +625 -0
package/views/admin-rbac.ejs +1331 -0
package/views/admin-scripts.ejs +497 -0
package/views/admin-seo-config.ejs +61 -7
package/views/admin-terminals.ejs +328 -0
package/views/admin-ui-components.ejs +741 -0
package/views/admin-users.ejs +261 -4
package/views/admin-workflows.ejs +7 -7
package/views/file-manager.ejs +866 -0
package/views/pages/blocks/contact.ejs +27 -0
package/views/pages/blocks/cta.ejs +18 -0
package/views/pages/blocks/faq.ejs +20 -0
package/views/pages/blocks/features.ejs +19 -0
package/views/pages/blocks/hero.ejs +13 -0
package/views/pages/blocks/html.ejs +5 -0
package/views/pages/blocks/image.ejs +14 -0
package/views/pages/blocks/testimonials.ejs +26 -0
package/views/pages/blocks/text.ejs +10 -0
package/views/pages/layouts/default.ejs +51 -0
package/views/pages/layouts/minimal.ejs +42 -0
package/views/pages/layouts/sidebar.ejs +54 -0
package/views/pages/partials/footer.ejs +13 -0
package/views/pages/partials/header.ejs +12 -0
package/views/pages/partials/sidebar.ejs +8 -0
package/views/pages/runtime/page.ejs +10 -0
package/views/pages/templates/article.ejs +20 -0
package/views/pages/templates/default.ejs +12 -0
package/views/pages/templates/landing.ejs +14 -0
package/views/pages/templates/listing.ejs +15 -0
package/views/partials/admin-image-upload-modal.ejs +221 -0
package/views/partials/dashboard/nav-items.ejs +14 -0
package/views/partials/llm-provider-model-picker.ejs +183 -0

package/views/admin-crons.ejs ADDED Viewed

@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Admin Crons</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
+</head>
+<body class="bg-gray-50">
+  <div id="app" class="max-w-7xl mx-auto px-6 py-6">
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-2xl font-semibold text-gray-900">Crons</h1>
+        <div class="text-sm text-gray-500">Schedule scripts and HTTP calls to run automatically</div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button @click="showCreateModal = true" class="px-3 py-2 rounded bg-blue-600 text-white text-sm hover:bg-blue-700">
+          <i class="ti ti-plus mr-1"></i> New Cron
+        </button>
+        <button @click="loadCrons" class="px-3 py-2 rounded bg-gray-600 text-white text-sm hover:bg-gray-700">
+          <i class="ti ti-refresh mr-1"></i> Refresh
+        </button>
+      </div>
+    </div>
+    <!-- Crons List -->
+    <div class="bg-white border border-gray-200 rounded-lg">
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead class="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Schedule</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Run</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr v-for="cron in crons" :key="cron._id" class="hover:bg-gray-50">
+              <td class="px-4 py-3">
+                <div>
+                  <div class="text-sm font-medium text-gray-900">{{ cron.name }}</div>
+                  <div class="text-xs text-gray-500">{{ cron.description || 'No description' }}</div>
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <div class="text-sm text-gray-900 font-mono">{{ cron.cronExpression }}</div>
+                <div class="text-xs text-gray-500">{{ cron.timezone }}</div>
+              </td>
+              <td class="px-4 py-3">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+                      :class="cron.taskType === 'script' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'">
+                  <i :class="cron.taskType === 'script' ? 'ti ti-terminal-2' : 'ti ti-world'" class="mr-1"></i>
+                  {{ cron.taskType }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-900">
+                {{ formatNextRun(cron.nextRunAt) }}
+              </td>
+              <td class="px-4 py-3">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+                      :class="cron.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'">
+                  {{ cron.enabled ? 'Enabled' : 'Disabled' }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-1">
+                  <button @click="triggerCron(cron._id)"
+                          class="p-1 text-emerald-600 hover:bg-emerald-50 rounded"
+                          title="Run now">
+                    <i class="ti ti-player-play"></i>
+                  </button>
+                  <button @click="toggleCron(cron)"
+                          :class="cron.enabled ? 'text-orange-600 hover:bg-orange-50' : 'text-green-600 hover:bg-green-50'"
+                          class="p-1 rounded"
+                          :title="cron.enabled ? 'Disable' : 'Enable'">
+                    <i :class="cron.enabled ? 'ti ti-player-pause' : 'ti ti-player-track-next'"></i>
+                  </button>
+                  <button @click="viewHistory(cron)"
+                          class="p-1 text-blue-600 hover:bg-blue-50 rounded"
+                          title="View history">
+                    <i class="ti ti-history"></i>
+                  </button>
+                  <button @click="editCron(cron)"
+                          class="p-1 text-gray-600 hover:bg-gray-50 rounded"
+                          title="Edit">
+                    <i class="ti ti-edit"></i>
+                  </button>
+                  <button @click="deleteCron(cron)"
+                          class="p-1 text-red-600 hover:bg-red-50 rounded"
+                          title="Delete">
+                    <i class="ti ti-trash"></i>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="crons.length === 0" class="text-center py-8 text-gray-500">
+          No cron jobs configured. Click "New Cron" to create one.
+        </div>
+      </div>
+    </div>
+    <!-- Create/Edit Modal -->
+    <div v-if="showCreateModal || editingCron" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div class="p-6">
+          <h2 class="text-lg font-semibold mb-4">{{ editingCron ? 'Edit Cron Job' : 'Create Cron Job' }}</h2>
+          <div class="space-y-4">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                <input v-model="form.name" type="text" class="w-full border rounded px-3 py-2" placeholder="My scheduled task" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                <input v-model="form.description" type="text" class="w-full border rounded px-3 py-2" placeholder="(optional)" />
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Cron Expression</label>
+                <div class="flex gap-2">
+                  <input v-model="form.cronExpression" type="text" class="flex-1 border rounded px-3 py-2 font-mono text-sm"
+                         placeholder="0 9 * * *" />
+                  <button @click="showPresets = !showPresets" class="px-3 py-2 border rounded text-sm hover:bg-gray-50">
+                    Presets
+                  </button>
+                </div>
+                <div v-if="showPresets" class="mt-2 p-2 bg-gray-50 rounded text-sm">
+                  <div v-for="preset in presets" :key="preset.expression"
+                       @click="form.cronExpression = preset.expression; showPresets = false"
+                       class="cursor-pointer hover:bg-white px-2 py-1 rounded">
+                    {{ preset.label }}: <code class="text-xs">{{ preset.expression }}</code>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Timezone</label>
+                <input v-model="form.timezone" type="text" class="w-full border rounded px-3 py-2" placeholder="UTC" />
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Task Type</label>
+              <select v-model="form.taskType" @change="onTaskTypeChange" class="w-full border rounded px-3 py-2">
+                <option value="">Select task type</option>
+                <option value="script">Script</option>
+                <option value="http">HTTP Call</option>
+              </select>
+            </div>
+            <!-- Script Configuration -->
+            <div v-if="form.taskType === 'script'" class="space-y-4 p-4 bg-gray-50 rounded">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Script</label>
+                <select v-model="form.scriptId" class="w-full border rounded px-3 py-2">
+                  <option value="">Select a script</option>
+                  <option v-for="script in scripts" :key="script._id" :value="script._id">
+                    {{ script.name }} ({{ script.type }})
+                  </option>
+                </select>
+              </div>
+              <div>
+                <div class="flex items-center justify-between mb-2">
+                  <label class="text-sm font-medium text-gray-700">Override Environment Variables</label>
+                  <button @click="addScriptEnv" type="button" class="text-sm text-blue-600 hover:underline">Add</button>
+                </div>
+                <div v-for="(env, index) in form.scriptEnv" :key="index" class="flex gap-2 mb-2">
+                  <input v-model="env.key" type="text" placeholder="Key" class="flex-1 border rounded px-3 py-2 text-sm" />
+                  <input v-model="env.value" type="text" placeholder="Value" class="flex-1 border rounded px-3 py-2 text-sm" />
+                  <button @click="form.scriptEnv.splice(index, 1)" class="text-red-600 hover:text-red-800">
+                    <i class="ti ti-trash"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <!-- HTTP Configuration -->
+            <div v-if="form.taskType === 'http'" class="space-y-4 p-4 bg-gray-50 rounded">
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Method</label>
+                  <select v-model="form.httpMethod" class="w-full border rounded px-3 py-2">
+                    <option value="GET">GET</option>
+                    <option value="POST">POST</option>
+                    <option value="PUT">PUT</option>
+                    <option value="DELETE">DELETE</option>
+                    <option value="PATCH">PATCH</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">URL</label>
+                  <input v-model="form.httpUrl" type="url" class="w-full border rounded px-3 py-2" placeholder="https://api.example.com/webhook" />
+                </div>
+              </div>
+              <div v-if="['POST', 'PUT', 'PATCH'].includes(form.httpMethod)">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Body Type</label>
+                <select v-model="form.httpBodyType" class="w-full border rounded px-3 py-2">
+                  <option value="raw">Raw Text</option>
+                  <option value="json">JSON</option>
+                  <option value="form">Form Data</option>
+                </select>
+                <textarea v-model="form.httpBody" rows="4" class="mt-2 w-full border rounded px-3 py-2 font-mono text-sm"
+                          placeholder="Request body content"></textarea>
+              </div>
+              <div>
+                <div class="flex items-center justify-between mb-2">
+                  <label class="text-sm font-medium text-gray-700">Headers</label>
+                  <button @click="addHttpHeader" type="button" class="text-sm text-blue-600 hover:underline">Add</button>
+                </div>
+                <div v-for="(header, index) in form.httpHeaders" :key="index" class="flex gap-2 mb-2">
+                  <input v-model="header.key" type="text" placeholder="Key" class="flex-1 border rounded px-3 py-2 text-sm" />
+                  <input v-model="header.value" type="text" placeholder="Value" class="flex-1 border rounded px-3 py-2 text-sm" />
+                  <button @click="form.httpHeaders.splice(index, 1)" class="text-red-600 hover:text-red-800">
+                    <i class="ti ti-trash"></i>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Authentication</label>
+                <select v-model="form.httpAuth.type" class="w-full border rounded px-3 py-2">
+                  <option value="none">None</option>
+                  <option value="bearer">Bearer Token</option>
+                  <option value="basic">Basic Auth</option>
+                </select>
+                <div v-if="form.httpAuth.type === 'bearer'" class="mt-2">
+                  <input v-model="form.httpAuth.token" type="text" placeholder="Bearer token"
+                         class="w-full border rounded px-3 py-2 font-mono text-sm" />
+                </div>
+                <div v-if="form.httpAuth.type === 'basic'" class="mt-2 grid grid-cols-2 gap-2">
+                  <input v-model="form.httpAuth.username" type="text" placeholder="Username"
+                         class="border rounded px-3 py-2" />
+                  <input v-model="form.httpAuth.password" type="password" placeholder="Password"
+                         class="border rounded px-3 py-2" />
+                </div>
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Timeout (ms)</label>
+                <input v-model.number="form.timeoutMs" type="number" class="w-full border rounded px-3 py-2" placeholder="300000" />
+              </div>
+              <div class="flex items-center pt-6">
+                <input v-model="form.enabled" type="checkbox" class="h-4 w-4" />
+                <label class="ml-2 text-sm text-gray-700">Enable immediately</label>
+              </div>
+            </div>
+          </div>
+          <div class="mt-6 flex justify-end gap-2">
+            <button @click="closeModal" class="px-4 py-2 border rounded text-gray-700 hover:bg-gray-50">Cancel</button>
+            <button @click="saveCron" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+              {{ editingCron ? 'Update' : 'Create' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Execution History Modal -->
+    <div v-if="showHistoryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold">Execution History</h2>
+            <button @click="showHistoryModal = false" class="text-gray-400 hover:text-gray-600">
+              <i class="ti ti-x text-xl"></i>
+            </button>
+          </div>
+          <div class="mb-4">
+            <p class="text-sm text-gray-600">Showing history for: <strong>{{ selectedCron?.name }}</strong></p>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th class="px-4 py-2 text-left">Started</th>
+                  <th class="px-4 py-2 text-left">Duration</th>
+                  <th class="px-4 py-2 text-left">Status</th>
+                  <th class="px-4 py-2 text-left">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y">
+                <tr v-for="exec in executions" :key="exec._id">
+                  <td class="px-4 py-2">{{ formatDate(exec.startedAt) }}</td>
+                  <td class="px-4 py-2">{{ exec.durationMs ? `${exec.durationMs}ms` : '-' }}</td>
+                  <td class="px-4 py-2">
+                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
+                          :class="getStatusClass(exec.status)">
+                      {{ exec.status }}
+                    </span>
+                  </td>
+                  <td class="px-4 py-2">
+                    <button @click="viewExecution(exec)" class="text-blue-600 hover:underline text-sm">
+                      View Details
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div v-if="executions.length === 0" class="text-center py-4 text-gray-500">
+              No executions found
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Execution Details Modal -->
+    <div v-if="showExecutionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg w-full max-w-3xl max-h-[90vh] overflow-y-auto">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold">Execution Details</h2>
+            <button @click="showExecutionModal = false" class="text-gray-400 hover:text-gray-600">
+              <i class="ti ti-x text-xl"></i>
+            </button>
+          </div>
+          <div v-if="selectedExecution" class="space-y-4">
+            <div class="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <span class="font-medium">Status:</span>
+                <span class="ml-2" :class="getStatusClass(selectedExecution.status)">
+                  {{ selectedExecution.status }}
+                </span>
+              </div>
+              <div>
+                <span class="font-medium">Duration:</span>
+                <span class="ml-2">{{ selectedExecution.durationMs ? `${selectedExecution.durationMs}ms` : '-' }}</span>
+              </div>
+              <div>
+                <span class="font-medium">Started:</span>
+                <span class="ml-2">{{ formatDate(selectedExecution.startedAt) }}</span>
+              </div>
+              <div>
+                <span class="font-medium">Finished:</span>
+                <span class="ml-2">{{ formatDate(selectedExecution.finishedAt) }}</span>
+              </div>
+              <div v-if="selectedExecution.httpStatusCode">
+                <span class="font-medium">HTTP Status:</span>
+                <span class="ml-2">{{ selectedExecution.httpStatusCode }}</span>
+              </div>
+            </div>
+            <div v-if="selectedExecution.error" class="p-3 bg-red-50 border border-red-200 rounded">
+              <h3 class="text-sm font-medium text-red-800 mb-1">Error</h3>
+              <pre class="text-sm text-red-700 whitespace-pre-wrap">{{ selectedExecution.error }}</pre>
+            </div>
+            <div v-if="selectedExecution.output" class="p-3 bg-gray-50 border rounded">
+              <h3 class="text-sm font-medium text-gray-800 mb-2">Output</h3>
+              <pre class="text-sm text-gray-700 whitespace-pre-wrap font-mono">{{ selectedExecution.output }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const { createApp } = Vue;
+    createApp({
+      data() {
+        return {
+          crons: [],
+          scripts: [],
+          presets: [],
+          executions: [],
+          showCreateModal: false,
+          showHistoryModal: false,
+          showExecutionModal: false,
+          showPresets: false,
+          editingCron: null,
+          selectedCron: null,
+          selectedExecution: null,
+          form: {
+            name: '',
+            description: '',
+            cronExpression: '',
+            timezone: 'UTC',
+            enabled: true,
+            taskType: '',
+            scriptId: '',
+            scriptEnv: [],
+            httpMethod: 'GET',
+            httpUrl: '',
+            httpHeaders: [],
+            httpBody: '',
+            httpBodyType: 'raw',
+            httpAuth: { type: 'none', token: '', username: '', password: '' },
+            timeoutMs: 300000
+          }
+        };
+      },
+      async mounted() {
+        await this.loadCrons();
+        await this.loadScripts();
+        await this.loadPresets();
+      },
+      methods: {
+        async loadCrons() {
+          try {
+            const response = await fetch('/api/admin/crons');
+            const data = await response.json();
+            this.crons = data.items || [];
+          } catch (error) {
+            console.error('Failed to load crons:', error);
+          }
+        },
+        async loadScripts() {
+          try {
+            const response = await fetch('/api/admin/scripts');
+            const data = await response.json();
+            this.scripts = data.items || [];
+          } catch (error) {
+            console.error('Failed to load scripts:', error);
+          }
+        },
+        async loadPresets() {
+          try {
+            const response = await fetch('/api/admin/crons/presets');
+            const data = await response.json();
+            this.presets = data.presets || [];
+          } catch (error) {
+            console.error('Failed to load presets:', error);
+          }
+        },
+        async saveCron() {
+          try {
+            // Don't send scriptId for HTTP tasks
+            if (this.form.taskType === 'http') {
+              this.form.scriptId = undefined;
+            }
+            const url = this.editingCron ? `/api/admin/crons/${this.editingCron._id}` : '/api/admin/crons';
+            const method = this.editingCron ? 'PUT' : 'POST';
+            const response = await fetch(url, {
+              method,
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(this.form)
+            });
+            if (response.ok) {
+              this.closeModal();
+              await this.loadCrons();
+            } else {
+              const error = await response.json();
+              alert(error.error || 'Failed to save cron job');
+            }
+          } catch (error) {
+            console.error('Failed to save cron:', error);
+            alert('Failed to save cron job');
+          }
+        },
+        async toggleCron(cron) {
+          try {
+            const endpoint = cron.enabled ? 'disable' : 'enable';
+            const response = await fetch(`/api/admin/crons/${cron._id}/${endpoint}`, { method: 'POST' });
+            if (response.ok) {
+              await this.loadCrons();
+            } else {
+              alert('Failed to toggle cron job');
+            }
+          } catch (error) {
+            console.error('Failed to toggle cron:', error);
+            alert('Failed to toggle cron job');
+          }
+        },
+        async triggerCron(cronId) {
+          try {
+            const response = await fetch(`/api/admin/crons/${cronId}/trigger`, { method: 'POST' });
+            if (response.ok) {
+              const data = await response.json();
+              alert(`Cron job triggered successfully!\nExecution ID: ${data.executionId}`);
+              // Optionally refresh the executions if history modal is open
+              if (this.showHistoryModal && this.selectedCron?._id === cronId) {
+                await this.viewHistory(this.selectedCron);
+              }
+            } else {
+              const error = await response.json();
+              alert(`Failed to trigger cron job: ${error.error || 'Unknown error'}`);
+            }
+          } catch (error) {
+            console.error('Failed to trigger cron:', error);
+            alert('Failed to trigger cron job');
+          }
+        },
+        async deleteCron(cron) {
+          if (!confirm(`Are you sure you want to delete "${cron.name}"?`)) return;
+          try {
+            const response = await fetch(`/api/admin/crons/${cron._id}`, { method: 'DELETE' });
+            if (response.ok) {
+              await this.loadCrons();
+            } else {
+              alert('Failed to delete cron job');
+            }
+          } catch (error) {
+            console.error('Failed to delete cron:', error);
+            alert('Failed to delete cron job');
+          }
+        },
+        async viewHistory(cron) {
+          this.selectedCron = cron;
+          this.showHistoryModal = true;
+          try {
+            const response = await fetch(`/api/admin/crons/${cron._id}/executions`);
+            const data = await response.json();
+            this.executions = data.items || [];
+          } catch (error) {
+            console.error('Failed to load executions:', error);
+          }
+        },
+        async viewExecution(execution) {
+          try {
+            const response = await fetch(`/api/admin/crons/${this.selectedCron._id}/executions/${execution._id}`);
+            const data = await response.json();
+            this.selectedExecution = data.item;
+            this.showExecutionModal = true;
+          } catch (error) {
+            console.error('Failed to load execution details:', error);
+          }
+        },
+        editCron(cron) {
+          this.editingCron = cron;
+          this.form = {
+            name: cron.name,
+            description: cron.description,
+            cronExpression: cron.cronExpression,
+            timezone: cron.timezone,
+            enabled: cron.enabled,
+            taskType: cron.taskType,
+            scriptId: cron.scriptId || undefined,
+            scriptEnv: cron.scriptEnv ? [...cron.scriptEnv] : [],
+            httpMethod: cron.httpMethod || 'GET',
+            httpUrl: cron.httpUrl || '',
+            httpHeaders: cron.httpHeaders ? [...cron.httpHeaders] : [],
+            httpBody: cron.httpBody || '',
+            httpBodyType: cron.httpBodyType || 'raw',
+            httpAuth: cron.httpAuth || { type: 'none', token: '', username: '', password: '' },
+            timeoutMs: cron.timeoutMs || 300000
+          };
+        },
+        onTaskTypeChange() {
+          // Reset task-specific fields when type changes
+          this.form.scriptId = undefined;
+          this.form.scriptEnv = [];
+          this.form.httpMethod = 'GET';
+          this.form.httpUrl = '';
+          this.form.httpHeaders = [];
+          this.form.httpBody = '';
+          this.form.httpAuth = { type: 'none', token: '', username: '', password: '' };
+        },
+        addScriptEnv() {
+          this.form.scriptEnv.push({ key: '', value: '' });
+        },
+        addHttpHeader() {
+          this.form.httpHeaders.push({ key: '', value: '' });
+        },
+        closeModal() {
+          this.showCreateModal = false;
+          this.editingCron = null;
+          this.form = {
+            name: '',
+            description: '',
+            cronExpression: '',
+            timezone: 'UTC',
+            enabled: true,
+            taskType: '',
+            scriptId: undefined,
+            scriptEnv: [],
+            httpMethod: 'GET',
+            httpUrl: '',
+            httpHeaders: [],
+            httpBody: '',
+            httpBodyType: 'raw',
+            httpAuth: { type: 'none', token: '', username: '', password: '' },
+            timeoutMs: 300000
+          };
+        },
+        formatNextRun(date) {
+          if (!date) return 'Not scheduled';
+          return new Date(date).toLocaleString();
+        },
+        formatDate(date) {
+          if (!date) return '-';
+          return new Date(date).toLocaleString();
+        },
+        getStatusClass(status) {
+          switch (status) {
+            case 'succeeded': return 'bg-green-100 text-green-800';
+            case 'failed': return 'bg-red-100 text-red-800';
+            case 'running': return 'bg-blue-100 text-blue-800';
+            case 'timed_out': return 'bg-yellow-100 text-yellow-800';
+            default: return 'bg-gray-100 text-gray-800';
+          }
+        }
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>