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-blog-automation.ejs ADDED Viewed

@@ -0,0 +1,877 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Blog Automation - Admin</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
+  <style>
+    .toast { animation: slideIn 0.3s ease-out; }
+    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    .fade-out { animation: fadeOut 0.3s ease-out forwards; }
+    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+    .json-editor { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; }
+  </style>
+</head>
+<body class="bg-gray-100">
+  <div class="min-h-screen">
+    <div class="bg-white shadow">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <div class="flex justify-between items-center">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-900">Blog Automation</h1>
+            <p class="text-sm text-gray-600 mt-1">Configure automated blog post generation</p>
+          </div>
+          <div class="flex items-center gap-4"></div>
+        </div>
+      </div>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Configuration Tabs -->
+      <div class="bg-white rounded-lg shadow">
+        <div class="border-b border-gray-200">
+          <nav class="flex -mb-px">
+            <button class="tab-btn px-6 py-3 border-b-2 border-blue-500 text-blue-600 font-medium text-sm" data-tab="config">
+              Configuration
+            </button>
+            <button class="tab-btn px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium text-sm" data-tab="style">
+              Style Guide
+            </button>
+            <button class="tab-btn px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium text-sm" data-tab="runs">
+              Run History
+            </button>
+          </nav>
+        </div>
+        <!-- Configuration Tab -->
+        <div id="tab-config" class="tab-content p-6">
+          <div class="mb-4">
+            <div class="flex flex-wrap items-end gap-3">
+              <div class="min-w-[280px]">
+                <label class="block text-sm font-medium text-gray-700 mb-2">Configuration</label>
+                <select id="config-select" class="w-full border rounded px-3 py-2 text-sm">
+                  <option value="">Loading...</option>
+                </select>
+                <p class="text-xs text-gray-500 mt-1">Each configuration can have its own schedule and generation settings.</p>
+              </div>
+              <div class="flex gap-2">
+                <button id="btn-new-config" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200">
+                  <i class="ti ti-plus mr-2"></i>New
+                </button>
+                <button id="btn-delete-config" class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600">
+                  <i class="ti ti-trash mr-2"></i>Delete
+                </button>
+              </div>
+              <div class="flex gap-2 ml-auto">
+                <button id="btn-run-now" class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600 hidden">
+                  <i class="ti ti-player-play mr-2"></i>Run Now
+                </button>
+                <button id="btn-load-config" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200">
+                  <i class="ti ti-refresh mr-2"></i>Reload
+                </button>
+                <button id="btn-save-config" class="bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600">
+                  <i class="ti ti-device-floppy mr-2"></i>Save
+                </button>
+              </div>
+            </div>
+          </div>
+          <div id="cfg-actions-hint" class="mb-4 text-xs text-gray-500 hidden">Select a configuration to enable Run Now and prompt preview.</div>
+          <div class="border-b border-gray-200 mb-4">
+            <nav class="flex -mb-px">
+              <button id="subtab-btn-form" class="subtab-btn px-4 py-2 border-b-2 border-blue-500 text-blue-600 font-medium text-sm" data-subtab="form">Form</button>
+              <button id="subtab-btn-advanced" class="subtab-btn px-4 py-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium text-sm" data-subtab="advanced">Advanced (JSON)</button>
+            </nav>
+          </div>
+          <div id="subtab-form">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div class="bg-gray-50 border rounded p-4">
+                <div class="flex items-center justify-between mb-3">
+                  <h3 class="text-sm font-semibold text-gray-800">Basics</h3>
+                  <span class="text-xs text-gray-500" title="Enable controls whether this config is eligible for scheduled runs.">info</span>
+                </div>
+                <div class="mb-3">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                  <input id="cfg-name" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="e.g. Micro-exits weekly" />
+                </div>
+                <div class="mb-3 flex items-center gap-2">
+                  <input id="cfg-enabled" type="checkbox" class="h-4 w-4" />
+                  <label for="cfg-enabled" class="text-sm text-gray-700">Enabled</label>
+                </div>
+                <div class="mb-3">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Schedule mode</label>
+                  <select id="cfg-schedule-managedBy" class="w-full border rounded px-3 py-2 text-sm">
+                    <option value="cronScheduler">CronScheduler</option>
+                    <option value="manualOnly">Manual only</option>
+                  </select>
+                  <p class="text-xs text-gray-500 mt-1">When set to Manual only, the system will delete the CronJob for this config.</p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Cron expression</label>
+                    <input id="cfg-schedule-cronExpression" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="0 9 * * 2,4" />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Timezone</label>
+                    <input id="cfg-schedule-timezone" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="UTC" />
+                  </div>
+                </div>
+              </div>
+              <div class="bg-gray-50 border rounded p-4">
+                <div class="flex items-center justify-between mb-3">
+                  <h3 class="text-sm font-semibold text-gray-800">Defaults</h3>
+                  <span class="text-xs text-gray-500" title="These values influence category/tags/author saved on created draft posts.">info</span>
+                </div>
+                <div class="mb-3">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Default category</label>
+                  <input id="cfg-defaultCategory" list="dl-categories" class="w-full border rounded px-3 py-2 text-sm" placeholder="e.g. Operations" />
+                </div>
+                <div class="mb-3">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Default author</label>
+                  <input id="cfg-defaultAuthorName" list="dl-authors" class="w-full border rounded px-3 py-2 text-sm" placeholder="e.g. superbackend" />
+                </div>
+                <div class="mb-3">
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Default tags (comma separated)</label>
+                  <input id="cfg-defaultTags" class="w-full border rounded px-3 py-2 text-sm" placeholder="e.g. SaaS, Growth" />
+                  <p class="text-xs text-gray-500 mt-1">Autocomplete suggestions come from existing blog posts.</p>
+                </div>
+              </div>
+            </div>
+            <div class="mt-6 bg-gray-50 border rounded p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-sm font-semibold text-gray-800">Limits</h3>
+                <span class="text-xs text-gray-500" title="Guardrails to control automation frequency and output size.">info</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Runs/day limit</label>
+                  <input id="cfg-runsPerDayLimit" type="number" min="0" class="w-full border rounded px-3 py-2 text-sm" />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Max posts/run</label>
+                  <input id="cfg-maxPostsPerRun" type="number" min="1" class="w-full border rounded px-3 py-2 text-sm" />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Dedupe window (days)</label>
+                  <input id="cfg-dedupeWindowDays" type="number" min="0" class="w-full border rounded px-3 py-2 text-sm" />
+                </div>
+              </div>
+            </div>
+            <div class="mt-6 bg-gray-50 border rounded p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-sm font-semibold text-gray-800">LLM (providers/models)</h3>
+                <span class="text-xs text-gray-500" title="Provider/model values are validated by the existing LLM config. Use autocomplete.">info</span>
+              </div>
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div>
+                  <h4 class="text-sm font-semibold text-gray-800 mb-2">Research</h4>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <%- include('partials/llm-provider-model-picker', {
+                      providerInputId: 'cfg-research-providerKey',
+                      modelInputId: 'cfg-research-model',
+                      providerLabel: 'Provider',
+                      modelLabel: 'Model'
+                    }) %>
+                  </div>
+                </div>
+                <div>
+                  <h4 class="text-sm font-semibold text-gray-800 mb-2">Text generation</h4>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <%- include('partials/llm-provider-model-picker', {
+                      providerInputId: 'cfg-textGeneration-providerKey',
+                      modelInputId: 'cfg-textGeneration-model',
+                      providerLabel: 'Provider',
+                      modelLabel: 'Model'
+                    }) %>
+                  </div>
+                </div>
+                <div>
+                  <h4 class="text-sm font-semibold text-gray-800 mb-2">Image generation</h4>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <%- include('partials/llm-provider-model-picker', {
+                      providerInputId: 'cfg-imageGeneration-providerKey',
+                      modelInputId: 'cfg-imageGeneration-model',
+                      providerLabel: 'Provider',
+                      modelLabel: 'Model'
+                    }) %>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="mt-6 bg-gray-50 border rounded p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-sm font-semibold text-gray-800">Style guide override (per config)</h3>
+                <span class="text-xs text-gray-500" title="Optional override for the selected configuration. If enabled, this replaces the global style guide for runs of that config.">info</span>
+              </div>
+              <div class="flex items-center gap-2 mb-3">
+                <input id="cfg-style-override-enabled" type="checkbox" class="h-4 w-4" />
+                <label for="cfg-style-override-enabled" class="text-sm text-gray-700">Enable override for selected config</label>
+                <button id="btn-save-style-override" class="bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600 ml-auto">
+                  <i class="ti ti-device-floppy mr-2"></i>Save override
+                </button>
+              </div>
+              <textarea id="cfg-style-override" class="w-full h-40 border rounded p-3 text-sm" placeholder="Override style guide for this config (optional)"></textarea>
+              <p class="text-xs text-gray-500 mt-1">If override is disabled, the global style guide is used.</p>
+            </div>
+            <div class="mt-6 bg-gray-50 border rounded p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-sm font-semibold text-gray-800">Topics</h3>
+                <span class="text-xs text-gray-500" title="Weighted topic selection: higher weight increases probability.">info</span>
+              </div>
+              <textarea id="cfg-topics-json" class="json-editor w-full h-40 border rounded p-3 text-sm" spellcheck="false" placeholder='[{"key":"operations","label":"Operations","weight":4,"keywords":[]}]'></textarea>
+              <div class="text-xs text-gray-500 mt-2 space-y-1">
+                <div><strong>Selection:</strong> each run picks one topic using weighted randomness (higher <code>weight</code> = more likely).</div>
+                <div><strong>Shape:</strong> <code>{"key": "jokes", "label": "jokes", "weight": 4, "keywords": []}</code></div>
+                <div><strong>Iteration:</strong> changing weights changes how frequently topics appear across runs. <code>keywords</code> are currently used as flexible hints in prompts.</div>
+              </div>
+            </div>
+            <div class="mt-6 bg-gray-50 border rounded p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-sm font-semibold text-gray-800">Images</h3>
+                <span class="text-xs text-gray-500" title="Optional prompt instruction used for image generation (cover/inline).">info</span>
+              </div>
+              <div class="mb-3">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Image prompt extra instruction</label>
+                <textarea id="cfg-images-promptExtraInstruction" class="w-full h-24 border rounded p-3 text-sm" placeholder="Optional. Example: Use a flat minimal illustration style, pastel palette, no logos."></textarea>
+              </div>
+            </div>
+            <div class="mt-6 bg-gray-50 border rounded p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-sm font-semibold text-gray-800">Prompt preview (readonly)</h3>
+                <button id="btn-preview-prompts" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200">
+                  <i class="ti ti-refresh mr-2"></i>Refresh
+                </button>
+              </div>
+              <div class="grid grid-cols-1 gap-3">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Post prompt</label>
+                  <textarea id="preview-post-prompt" class="json-editor w-full h-40 border rounded p-3 text-sm" readonly></textarea>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Cover image prompt</label>
+                  <textarea id="preview-cover-prompt" class="json-editor w-full h-24 border rounded p-3 text-sm" readonly></textarea>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Inline image prompt</label>
+                  <textarea id="preview-inline-prompt" class="json-editor w-full h-24 border rounded p-3 text-sm" readonly></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="subtab-advanced" class="hidden">
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-2">Configuration (JSON)</label>
+              <textarea id="config-json" class="json-editor w-full h-96 border rounded p-3 text-sm" spellcheck="false"></textarea>
+              <p class="text-xs text-gray-500 mt-1">Advanced mode. Editing invalid JSON will prevent saving.</p>
+            </div>
+          </div>
+        </div>
+        <!-- Style Guide Tab -->
+        <div id="tab-style" class="tab-content p-6 hidden">
+          <div class="mb-4">
+            <button id="btn-load-style" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200">
+              <i class="ti ti-refresh mr-2"></i>Reload
+            </button>
+            <button id="btn-save-style" class="bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600 ml-2">
+              <i class="ti ti-device-floppy mr-2"></i>Save
+            </button>
+          </div>
+          <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 mb-2">Style Guide</label>
+            <textarea id="style-guide" class="w-full h-96 border rounded p-3 text-sm" placeholder="Enter writing style guide..."></textarea>
+          </div>
+        </div>
+        <!-- Run History Tab -->
+        <div id="tab-runs" class="tab-content p-6 hidden">
+          <div class="mb-4 flex justify-between items-center">
+            <h3 class="text-lg font-medium text-gray-900">Recent Runs</h3>
+            <button id="btn-refresh-runs" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200">
+              <i class="ti ti-refresh mr-2"></i>Refresh
+            </button>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trigger</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Started</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Result</th>
+                </tr>
+              </thead>
+              <tbody id="runs-tbody" class="bg-white divide-y divide-gray-200">
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Toast Container -->
+  <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
+  <script>
+    const API_BASE = '<%= baseUrl %>/api/admin/blog-automation';
+    const BLOG_API_BASE = '<%= baseUrl %>/api/admin/blog-posts';
+    const LLM_API_BASE = '<%= baseUrl %>/api/admin/llm';
+    let configsCache = null;
+    let activeConfigId = '';
+    let suggestionsCache = null;
+    let llmCache = null;
+    // Utility functions
+    function showToast(message, type = 'success') {
+      const container = document.getElementById('toast-container');
+      const toast = document.createElement('div');
+      toast.className = `toast p-4 rounded shadow-lg ${
+        type === 'success' ? 'bg-green-500 text-white' :
+        type === 'error' ? 'bg-red-500 text-white' :
+        'bg-blue-500 text-white'
+      }`;
+      toast.innerHTML = `
+        <div class="flex items-center">
+          <i class="ti ti-${type === 'success' ? 'check' : type === 'error' ? 'alert-triangle' : 'info'} mr-2"></i>
+          <span>${message}</span>
+        </div>
+      `;
+      container.appendChild(toast);
+      setTimeout(() => {
+        toast.classList.add('fade-out');
+        setTimeout(() => toast.remove(), 300);
+      }, 3000);
+    }
+    function formatDate(dateString) {
+      if (!dateString) return '-';
+      const date = new Date(dateString);
+      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    function formatDuration(started, finished) {
+      if (!started || !finished) return '-';
+      const duration = new Date(finished) - new Date(started);
+      const seconds = Math.floor(duration / 1000);
+      if (seconds < 60) return `${seconds}s`;
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      return `${minutes}m ${remainingSeconds}s`;
+    }
+    function getStatusBadge(status) {
+      const badges = {
+        queued: '<span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">Queued</span>',
+        running: '<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Running</span>',
+        succeeded: '<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Succeeded</span>',
+        failed: '<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Failed</span>',
+        partial: '<span class="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">Partial</span>',
+        skipped: '<span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">Skipped</span>'
+      };
+      return badges[status] || status;
+    }
+    // Tab switching
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tabName = btn.dataset.tab;
+        // Update button styles
+        document.querySelectorAll('.tab-btn').forEach(b => {
+          b.classList.remove('border-blue-500', 'text-blue-600');
+          b.classList.add('border-transparent', 'text-gray-500');
+        });
+        btn.classList.remove('border-transparent', 'text-gray-500');
+        btn.classList.add('border-blue-500', 'text-blue-600');
+        // Show/hide content
+        document.querySelectorAll('.tab-content').forEach(content => {
+          content.classList.add('hidden');
+        });
+        document.getElementById(`tab-${tabName}`).classList.remove('hidden');
+        // Load data if needed
+        if (tabName === 'runs') {
+          loadRuns();
+        }
+      });
+    });
+    // Configuration
+    function getSelectedConfigId() {
+      return String(document.getElementById('config-select')?.value || '').trim();
+    }
+    function setSubtab(name) {
+      const formBtn = document.getElementById('subtab-btn-form');
+      const advBtn = document.getElementById('subtab-btn-advanced');
+      const form = document.getElementById('subtab-form');
+      const adv = document.getElementById('subtab-advanced');
+      const active = ['border-blue-500', 'text-blue-600'];
+      const inactive = ['border-transparent', 'text-gray-500', 'hover:text-gray-700'];
+      const setBtn = (btn, isActive) => {
+        if (!btn) return;
+        btn.classList.remove(...active, ...inactive);
+        if (isActive) btn.classList.add(...active);
+        else btn.classList.add(...inactive);
+      };
+      const isAdv = name === 'advanced';
+      setBtn(formBtn, !isAdv);
+      setBtn(advBtn, isAdv);
+      if (isAdv) {
+        form.classList.add('hidden');
+        adv.classList.remove('hidden');
+      } else {
+        adv.classList.add('hidden');
+        form.classList.remove('hidden');
+      }
+    }
+    async function initProviderPickers() {
+      if (!window.__llmProviderModelPicker || !window.__llmProviderModelPicker.init) return;
+      const apiBase = '<%= baseUrl %>';
+      await window.__llmProviderModelPicker.init({ apiBase, providerInputId: 'cfg-research-providerKey', modelInputId: 'cfg-research-model' });
+      await window.__llmProviderModelPicker.init({ apiBase, providerInputId: 'cfg-textGeneration-providerKey', modelInputId: 'cfg-textGeneration-model' });
+      await window.__llmProviderModelPicker.init({ apiBase, providerInputId: 'cfg-imageGeneration-providerKey', modelInputId: 'cfg-imageGeneration-model' });
+    }
+    function fillStyleOverrideFromConfig(cfg) {
+      const enabled = Boolean(String(cfg?.styleGuideOverride || '').trim());
+      const checkbox = document.getElementById('cfg-style-override-enabled');
+      const textarea = document.getElementById('cfg-style-override');
+      if (checkbox) checkbox.checked = enabled;
+      if (textarea) textarea.value = String(cfg?.styleGuideOverride || '');
+    }
+    document.querySelectorAll('.subtab-btn').forEach(btn => {
+      btn.addEventListener('click', () => setSubtab(btn.dataset.subtab));
+    });
+    async function loadConfigs() {
+      const response = await fetch(`${API_BASE}/configs`);
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || 'Failed to load configs');
+      configsCache = data.configs;
+      const select = document.getElementById('config-select');
+      select.innerHTML = '';
+      for (const c of (configsCache.items || [])) {
+        const opt = document.createElement('option');
+        opt.value = c.id;
+        opt.textContent = `${c.name}${c.enabled ? '' : ' (disabled)'}`;
+        select.appendChild(opt);
+      }
+      if (!select.value && (configsCache.items || []).length) {
+        select.value = configsCache.items[0].id;
+      }
+      activeConfigId = getSelectedConfigId();
+      await loadConfigById(activeConfigId);
+    }
+    async function loadSuggestions() {
+      try {
+        const response = await fetch(`${BLOG_API_BASE}/suggestions`);
+        const data = await response.json();
+        if (!response.ok) return;
+        suggestionsCache = data;
+        const dlCats = document.getElementById('dl-categories');
+        const dlAuthors = document.getElementById('dl-authors');
+        const dlTags = document.getElementById('dl-tags');
+        if (dlCats) dlCats.innerHTML = (data.categories || []).map((x) => `<option value="${String(x).replace(/"/g, '&quot;')}"></option>`).join('');
+        if (dlAuthors) dlAuthors.innerHTML = (data.authorNames || []).map((x) => `<option value="${String(x).replace(/"/g, '&quot;')}"></option>`).join('');
+        if (dlTags) dlTags.innerHTML = (data.tags || []).map((x) => `<option value="${String(x).replace(/"/g, '&quot;')}"></option>`).join('');
+      } catch {
+        // ignore
+      }
+    }
+    async function loadLlmConfig() {
+      try {
+        const response = await fetch(`${LLM_API_BASE}/config`);
+        const data = await response.json();
+        if (!response.ok) return;
+        llmCache = data;
+        const providers = Object.keys(data.providers || {}).map((p) => String(p)).filter(Boolean).sort();
+        const dl = document.getElementById('dl-llm-providers');
+        if (dl) dl.innerHTML = providers.map((x) => `<option value="${String(x).replace(/"/g, '&quot;')}"></option>`).join('');
+      } catch {
+        // ignore
+      }
+    }
+    function readFormToConfigPatch() {
+      const topicsText = String(document.getElementById('cfg-topics-json')?.value || '').trim();
+      let topics = undefined;
+      if (topicsText) {
+        try {
+          const parsed = JSON.parse(topicsText);
+          if (Array.isArray(parsed)) topics = parsed;
+        } catch {
+          // ignore
+        }
+      }
+      const imagesExtra = String(document.getElementById('cfg-images-promptExtraInstruction')?.value || '').trim();
+      return {
+        name: String(document.getElementById('cfg-name')?.value || '').trim(),
+        enabled: Boolean(document.getElementById('cfg-enabled')?.checked),
+        schedule: {
+          managedBy: String(document.getElementById('cfg-schedule-managedBy')?.value || 'cronScheduler'),
+          cronExpression: String(document.getElementById('cfg-schedule-cronExpression')?.value || '').trim(),
+          timezone: String(document.getElementById('cfg-schedule-timezone')?.value || '').trim(),
+        },
+        runsPerDayLimit: Number(document.getElementById('cfg-runsPerDayLimit')?.value || 0),
+        maxPostsPerRun: Number(document.getElementById('cfg-maxPostsPerRun')?.value || 1),
+        dedupeWindowDays: Number(document.getElementById('cfg-dedupeWindowDays')?.value || 0),
+        defaultCategory: String(document.getElementById('cfg-defaultCategory')?.value || '').trim(),
+        defaultAuthorName: String(document.getElementById('cfg-defaultAuthorName')?.value || '').trim(),
+        defaultTags: String(document.getElementById('cfg-defaultTags')?.value || '')
+          .split(',')
+          .map((x) => String(x).trim())
+          .filter(Boolean),
+        research: {
+          providerKey: String(document.getElementById('cfg-research-providerKey')?.value || '').trim(),
+          model: String(document.getElementById('cfg-research-model')?.value || '').trim(),
+        },
+        textGeneration: {
+          providerKey: String(document.getElementById('cfg-textGeneration-providerKey')?.value || '').trim(),
+          model: String(document.getElementById('cfg-textGeneration-model')?.value || '').trim(),
+        },
+        imageGeneration: {
+          providerKey: String(document.getElementById('cfg-imageGeneration-providerKey')?.value || '').trim(),
+          model: String(document.getElementById('cfg-imageGeneration-model')?.value || '').trim(),
+        },
+        images: { promptExtraInstruction: imagesExtra },
+        ...(topics ? { topics } : {}),
+      };
+    }
+    let currentConfig = null;
+    function fillFormFromConfig(cfg) {
+      currentConfig = cfg;
+      document.getElementById('cfg-name').value = String(cfg.name || '');
+      document.getElementById('cfg-enabled').checked = Boolean(cfg.enabled);
+      document.getElementById('cfg-schedule-managedBy').value = String(cfg?.schedule?.managedBy || 'cronScheduler');
+      document.getElementById('cfg-schedule-cronExpression').value = String(cfg?.schedule?.cronExpression || '');
+      document.getElementById('cfg-schedule-timezone').value = String(cfg?.schedule?.timezone || '');
+      document.getElementById('cfg-runsPerDayLimit').value = Number(cfg.runsPerDayLimit || 0);
+      document.getElementById('cfg-maxPostsPerRun').value = Number(cfg.maxPostsPerRun || 1);
+      document.getElementById('cfg-dedupeWindowDays').value = Number(cfg.dedupeWindowDays || 0);
+      document.getElementById('cfg-defaultCategory').value = String(cfg.defaultCategory || '');
+      document.getElementById('cfg-defaultAuthorName').value = String(cfg.defaultAuthorName || '');
+      document.getElementById('cfg-defaultTags').value = Array.isArray(cfg.defaultTags) ? cfg.defaultTags.join(', ') : '';
+      document.getElementById('cfg-research-providerKey').value = String(cfg?.research?.providerKey || '');
+      document.getElementById('cfg-research-model').value = String(cfg?.research?.model || '');
+      document.getElementById('cfg-textGeneration-providerKey').value = String(cfg?.textGeneration?.providerKey || cfg?.generation?.providerKey || '');
+      document.getElementById('cfg-textGeneration-model').value = String(cfg?.textGeneration?.model || cfg?.generation?.model || '');
+      document.getElementById('cfg-imageGeneration-providerKey').value = String(cfg?.imageGeneration?.providerKey || '');
+      document.getElementById('cfg-imageGeneration-model').value = String(cfg?.imageGeneration?.model || '');
+      document.getElementById('cfg-images-promptExtraInstruction').value = String(cfg?.images?.promptExtraInstruction || '');
+      document.getElementById('cfg-topics-json').value = JSON.stringify(cfg.topics || [], null, 2);
+      fillStyleOverrideFromConfig(cfg);
+    }
+    async function saveStyleOverride() {
+      try {
+        const id = getSelectedConfigId();
+        if (!id) throw new Error('configId is required');
+        const enabled = Boolean(document.getElementById('cfg-style-override-enabled')?.checked);
+        const override = enabled ? String(document.getElementById('cfg-style-override')?.value || '').trim() : '';
+        const response = await fetch(`${API_BASE}/configs/${encodeURIComponent(id)}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ config: { styleGuideOverride: override } })
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to save override');
+        showToast('Override saved');
+        await loadConfig();
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function loadConfigById(id) {
+      try {
+        if (!id) throw new Error('configId is required');
+        const response = await fetch(`${API_BASE}/configs/${encodeURIComponent(id)}`);
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to load config');
+        const cfg = data.config;
+        document.getElementById('config-json').value = JSON.stringify(cfg, null, 2);
+        fillFormFromConfig(cfg);
+        await initProviderPickers();
+        updateConfigDependentUi();
+        await loadPromptPreview();
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function loadConfig() {
+      const id = getSelectedConfigId();
+      if (!id) {
+        showToast('configId is required', 'error');
+        return;
+      }
+      await loadConfigById(id);
+    }
+    function updateConfigDependentUi() {
+      const id = getSelectedConfigId();
+      const runBtn = document.getElementById('btn-run-now');
+      const hint = document.getElementById('cfg-actions-hint');
+      if (!id) {
+        if (runBtn) runBtn.classList.add('hidden');
+        if (hint) hint.classList.remove('hidden');
+        return;
+      }
+      if (runBtn) runBtn.classList.remove('hidden');
+      if (hint) hint.classList.add('hidden');
+    }
+    async function loadPromptPreview() {
+      try {
+        const id = getSelectedConfigId();
+        if (!id) return;
+        const response = await fetch(`${API_BASE}/configs/${encodeURIComponent(id)}/preview-prompts`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({})
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to preview prompts');
+        const prompts = data.prompts || {};
+        document.getElementById('preview-post-prompt').value = String(prompts.postPrompt || '');
+        document.getElementById('preview-cover-prompt').value = String(prompts.imageCoverPrompt || '');
+        document.getElementById('preview-inline-prompt').value = String(prompts.imageInlinePrompt || '');
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function loadStyleGuide() {
+      try {
+        const response = await fetch(`${API_BASE}/style-guide`);
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to load style guide');
+        document.getElementById('style-guide').value = String(data.styleGuide || '');
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function saveStyleGuide() {
+      try {
+        const styleGuide = String(document.getElementById('style-guide')?.value || '');
+        const response = await fetch(`${API_BASE}/style-guide`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ styleGuide })
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to save style guide');
+        showToast('Style guide saved');
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function saveConfig() {
+      try {
+        const id = getSelectedConfigId();
+        if (!id) throw new Error('configId is required');
+        let config;
+        const isAdv = !document.getElementById('subtab-advanced').classList.contains('hidden');
+        if (isAdv) {
+          const configText = document.getElementById('config-json').value;
+          config = JSON.parse(configText);
+        } else {
+          config = readFormToConfigPatch();
+        }
+        const response = await fetch(`${API_BASE}/configs/${encodeURIComponent(id)}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ config })
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to save config');
+        showToast('Configuration saved successfully');
+        await loadConfigs();
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function createConfig() {
+      try {
+        const name = prompt('New configuration name');
+        if (name === null) return;
+        const response = await fetch(`${API_BASE}/configs`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name })
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to create config');
+        showToast('Configuration created');
+        await loadConfigs();
+        const select = document.getElementById('config-select');
+        select.value = data.config.id;
+        activeConfigId = data.config.id;
+        await loadConfigById(activeConfigId);
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    async function deleteConfig() {
+      try {
+        const id = getSelectedConfigId();
+        if (!id) throw new Error('configId is required');
+        const name = (configsCache?.items || []).find((x) => x.id === id)?.name || id;
+        const confirmText = prompt(`Type DELETE to delete configuration: ${name}`);
+        if (confirmText !== 'DELETE') return;
+        const response = await fetch(`${API_BASE}/configs/${encodeURIComponent(id)}`, { method: 'DELETE' });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to delete config');
+        showToast('Configuration deleted');
+        await loadConfigs();
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    // Run History
+    async function loadRuns() {
+      try {
+        const id = getSelectedConfigId();
+        if (!id) throw new Error('configId is required');
+        const response = await fetch(`${API_BASE}/runs?configId=${encodeURIComponent(id)}`);
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to load runs');
+        renderRuns(data.runs || []);
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    function renderRuns(runs) {
+      const tbody = document.getElementById('runs-tbody');
+      if (!runs || runs.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">No runs found</td></tr>';
+        return;
+      }
+      tbody.innerHTML = runs.map(run => `
+        <tr>
+          <td class="px-6 py-4 text-sm text-gray-900">${run.trigger || '-'}</td>
+          <td class="px-6 py-4">${getStatusBadge(run.status)}</td>
+          <td class="px-6 py-4 text-sm text-gray-900">${formatDate(run.startedAt)}</td>
+          <td class="px-6 py-4 text-sm text-gray-900">${formatDuration(run.startedAt, run.finishedAt)}</td>
+          <td class="px-6 py-4 text-sm text-gray-900">
+            ${run.results?.postId ? `Post ID: ${run.results.postId}` : '-'}
+            ${run.error ? `<br><span class="text-red-600">${run.error}</span>` : ''}
+          </td>
+        </tr>
+      `).join('');
+    }
+    // Run Now
+    async function runNow() {
+      if (!confirm('Are you sure you want to run blog automation now?')) return;
+      try {
+        const id = getSelectedConfigId();
+        if (!id) throw new Error('configId is required');
+        const response = await fetch(`${API_BASE}/run-now`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ configId: id })
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || 'Failed to run automation');
+        showToast('Automation started successfully');
+        // Switch to runs tab and refresh
+        document.querySelector('[data-tab="runs"]').click();
+      } catch (error) {
+        showToast(error.message, 'error');
+      }
+    }
+    // Event listeners
+    document.getElementById('btn-load-config').addEventListener('click', loadConfig);
+    document.getElementById('btn-save-config').addEventListener('click', saveConfig);
+    document.getElementById('btn-new-config').addEventListener('click', createConfig);
+    document.getElementById('btn-delete-config').addEventListener('click', deleteConfig);
+    document.getElementById('config-select').addEventListener('change', async () => {
+      activeConfigId = getSelectedConfigId();
+      updateConfigDependentUi();
+      await loadConfigById(activeConfigId);
+    });
+    document.getElementById('btn-load-style').addEventListener('click', loadStyleGuide);
+    document.getElementById('btn-save-style').addEventListener('click', saveStyleGuide);
+    document.getElementById('btn-save-style-override').addEventListener('click', saveStyleOverride);
+    document.getElementById('btn-preview-prompts').addEventListener('click', loadPromptPreview);
+    document.getElementById('btn-refresh-runs').addEventListener('click', loadRuns);
+    document.getElementById('btn-run-now').addEventListener('click', runNow);
+    // Initial load
+    setSubtab('form');
+    loadSuggestions();
+    loadConfigs();
+    loadStyleGuide();
+  </script>
+  <datalist id="dl-categories"></datalist>
+  <datalist id="dl-authors"></datalist>
+  <datalist id="dl-tags"></datalist>
+</body>
+</html>