@intranefr/superbackend 1.5.0 → 1.5.2

package/views/admin-seo-config.ejs

@@ -102,6 +102,15 @@
                   <label class="block text-sm font-medium">Route path</label>
                   <input id="seo-ai-route" class="mt-1 w-full border rounded px-3 py-2 text-sm" placeholder="/marketplace" />
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                  <%- include('partials/llm-provider-model-picker', {
+                    providerInputId: 'seoAiProviderKey',
+                    modelInputId: 'seoAiModel',
+                    providerLabel: 'Provider',
+                    modelLabel: 'Model',
+                    showOpenRouterFetch: true,
+                  }) %>
+                </div>
                 <div class="flex gap-2">
                   <button class="px-3 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 text-sm" onclick="seoAiGenerateFromView()">Generate entry</button>
                   <button class="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm" onclick="seoAiApplyProposed()">Apply</button>
@@ -124,6 +133,15 @@
                   <label class="block text-sm font-medium">Instruction</label>
                   <input id="seo-ai-instruction" class="mt-1 w-full border rounded px-3 py-2 text-sm" placeholder="Improve description including desktop apps" />
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                  <%- include('partials/llm-provider-model-picker', {
+                    providerInputId: 'seoAiImproveProviderKey',
+                    modelInputId: 'seoAiImproveModel',
+                    providerLabel: 'Provider',
+                    modelLabel: 'Model',
+                    showOpenRouterFetch: true,
+                  }) %>
+                </div>
                 <div class="flex gap-2">
                   <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                     <input id="seo-ai-robots-noindex" type="checkbox" class="rounded border-gray-300" />
@@ -219,9 +237,16 @@
       </div>
 
       <div class="mb-3">
-        <label class="block text-sm font-medium mb-1">Model (optional override)</label>
-        <input id="ai-model" class="w-full border rounded px-3 py-2 text-sm" placeholder="google/gemini-2.5-flash-lite" />
-        <div class="mt-1 text-xs text-gray-600">Uses <code>seoconfig.ai.openrouter.*</code> settings with fallback to <code>ai.openrouter.*</code>. Disabled if no API key.</div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <%- include('partials/llm-provider-model-picker', {
+            providerInputId: 'ogAiProviderKey',
+            modelInputId: 'ai-model',
+            providerLabel: 'Provider',
+            modelLabel: 'Model (optional override)',
+            showOpenRouterFetch: true,
+          }) %>
+        </div>
+        <div class="mt-1 text-xs text-gray-600">Legacy OpenRouter keys (<code>seoconfig.ai.openrouter.apiKey</code> / <code>ai.openrouter.apiKey</code>) are still supported when provider is <code>openrouter</code>.</div>
       </div>
 
       <div class="flex justify-end gap-2">
@@ -233,7 +258,15 @@
   </div>
 
   <script>
-    const API_BASE = window.location.origin + "<%= baseUrl %>";
+    const API_BASE = window.location.origin + "<%= baseUrl || '' %>";
+
+    function initLlmPickers() {
+      if (!window.__llmProviderModelPicker || !window.__llmProviderModelPicker.init) return;
+
+      window.__llmProviderModelPicker.init({ apiBase: API_BASE, providerInputId: 'seoAiProviderKey', modelInputId: 'seoAiModel' });
+      window.__llmProviderModelPicker.init({ apiBase: API_BASE, providerInputId: 'seoAiImproveProviderKey', modelInputId: 'seoAiImproveModel' });
+      window.__llmProviderModelPicker.init({ apiBase: API_BASE, providerInputId: 'ogAiProviderKey', modelInputId: 'ai-model' });
+    }
 
     function showToast(message, type = 'success') {
       const container = document.getElementById('toast-container');
@@ -409,10 +442,17 @@
       try {
         const viewPath = document.getElementById('seo-ai-view').value;
         const routePath = document.getElementById('seo-ai-route').value;
+        const providerKey = document.getElementById('seoAiProviderKey')?.value;
+        const model = document.getElementById('seoAiModel')?.value;
         const res = await fetch(`${API_BASE}/api/admin/seo-config/ai/generate-entry`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ viewPath, routePath }),
+          body: JSON.stringify({
+            viewPath,
+            routePath,
+            providerKey: providerKey ? String(providerKey).trim() : undefined,
+            model: model ? String(model).trim() : undefined,
+          }),
         });
         const data = await res.json().catch(() => ({}));
         if (!res.ok) throw new Error(data?.error || 'Failed to generate entry');
@@ -432,10 +472,17 @@
       try {
         const routePath = document.getElementById('seo-ai-existing-route').value;
         const instruction = document.getElementById('seo-ai-instruction').value;
+        const providerKey = document.getElementById('seoAiImproveProviderKey')?.value;
+        const model = document.getElementById('seoAiImproveModel')?.value;
         const res = await fetch(`${API_BASE}/api/admin/seo-config/ai/improve-entry`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ routePath, instruction }),
+          body: JSON.stringify({
+            routePath,
+            instruction,
+            providerKey: providerKey ? String(providerKey).trim() : undefined,
+            model: model ? String(model).trim() : undefined,
+          }),
         });
         const data = await res.json().catch(() => ({}));
         if (!res.ok) throw new Error(data?.error || 'Failed to improve entry');
@@ -617,6 +664,7 @@
       document.getElementById('ai-instruction').value = '';
       document.getElementById('ai-model').value = '';
       document.getElementById('ai-modal').classList.remove('hidden');
+      initLlmPickers();
     }
 
     function closeAiModal() {
@@ -634,11 +682,17 @@
         const svgRaw = document.getElementById('og-svg-raw').value;
         const instruction = document.getElementById('ai-instruction').value;
         const model = document.getElementById('ai-model').value;
+        const providerKey = document.getElementById('ogAiProviderKey')?.value;
 
         const res = await fetch(`${API_BASE}/api/admin/seo-config/ai/edit-svg`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ svgRaw, instruction, model: model || undefined }),
+          body: JSON.stringify({
+            svgRaw,
+            instruction,
+            providerKey: providerKey ? String(providerKey).trim() : undefined,
+            model: model || undefined,
+          }),
         });
         const data = await res.json().catch(() => ({}));
         if (!res.ok) throw new Error(data?.error || 'AI failed');

package/views/admin-ui-components.ejs

@@ -207,17 +207,13 @@ curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
               </div>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-                <div>
-                  <label class="block text-xs font-medium text-gray-600 mb-1">Provider</label>
-                  <select v-model="ai.providerKey" class="w-full border rounded px-2 py-2 text-sm">
-                    <option value="">(default)</option>
-                    <option v-for="k in llmProviderKeys" :key="k" :value="k">{{ k }}</option>
-                  </select>
-                </div>
-                <div>
-                  <label class="block text-xs font-medium text-gray-600 mb-1">Model</label>
-                  <input v-model="ai.model" class="w-full border rounded px-2 py-2 text-sm" placeholder="(default)" />
-                </div>
+                <%- include('partials/llm-provider-model-picker', {
+                  providerInputId: 'uiComponentsAiProviderKey',
+                  modelInputId: 'uiComponentsAiModel',
+                  providerLabel: 'Provider',
+                  modelLabel: 'Model',
+                  showOpenRouterFetch: true,
+                }) %>
               </div>
 
               <div>
@@ -346,6 +342,7 @@ curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
         setup() {
           const baseUrl = '<%= baseUrl %>';
           const adminPath = '<%= adminPath %>';
+          const API_BASE = window.location.origin + baseUrl;
 
           const STORAGE_KEYS = {
             providerKey: 'uiComponents.ai.providerKey',
@@ -393,7 +390,6 @@ curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
           const assignments = ref([]);
           const lastGeneratedKey = ref('');
 
-          const llmProviderKeys = ref([]);
           const ai = ref({
             providerKey: localStorage.getItem(STORAGE_KEYS.providerKey) || '',
             model: localStorage.getItem(STORAGE_KEYS.model) || '',
@@ -428,11 +424,56 @@ curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
             persistHelpState();
           }
 
+          function syncAiPickerToVue() {
+            const providerEl = document.getElementById('uiComponentsAiProviderKey');
+            const modelEl = document.getElementById('uiComponentsAiModel');
+            if (providerEl) providerEl.value = String(ai.value.providerKey || '');
+            if (modelEl) modelEl.value = String(ai.value.model || '');
+          }
+
+          function wireAiPickerListeners() {
+            const providerEl = document.getElementById('uiComponentsAiProviderKey');
+            const modelEl = document.getElementById('uiComponentsAiModel');
+            if (!providerEl || !modelEl) return;
+
+            if (providerEl.dataset.wired === '1') return;
+            providerEl.dataset.wired = '1';
+            modelEl.dataset.wired = '1';
+
+            providerEl.addEventListener('input', () => {
+              ai.value.providerKey = String(providerEl.value || '');
+              persistAiSettings();
+            });
+            providerEl.addEventListener('change', () => {
+              ai.value.providerKey = String(providerEl.value || '');
+              persistAiSettings();
+            });
+
+            modelEl.addEventListener('input', () => {
+              ai.value.model = String(modelEl.value || '');
+              persistAiSettings();
+            });
+            modelEl.addEventListener('change', () => {
+              ai.value.model = String(modelEl.value || '');
+              persistAiSettings();
+            });
+          }
+
+          async function initAiPicker() {
+            if (!window.__llmProviderModelPicker || !window.__llmProviderModelPicker.init) return;
+            await window.__llmProviderModelPicker.init({
+              apiBase: API_BASE,
+              providerInputId: 'uiComponentsAiProviderKey',
+              modelInputId: 'uiComponentsAiModel',
+            });
+            syncAiPickerToVue();
+            wireAiPickerListeners();
+          }
+
           async function loadLlmConfig() {
             try {
-              const data = await api('/api/admin/llm/config');
-              const providers = data && data.providers ? data.providers : {};
-              llmProviderKeys.value = Object.keys(providers || {}).sort();
+              await initAiPicker();
+              showToast('LLM config reloaded', 'success');
             } catch (e) {
               showToast(e.message, 'error');
             }
@@ -658,13 +699,8 @@ curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
           onMounted(async () => {
             try {
               loadHelpState();
-              await loadLlmConfig();
               await refreshAll();
-              // Replace __ORIGIN__ in auto-inject snippet
-              const snippetEl = document.querySelector('.autoInjectSnippet code');
-              if (snippetEl) {
-                snippetEl.innerHTML = snippetEl.innerHTML.split('__ORIGIN__').join(window.location.origin);
-              }
+              await initAiPicker();
             } catch (e) {
               showToast(e.message, 'error');
             }
@@ -683,14 +719,10 @@ curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
             newProject,
             componentEditor,
             toggleHelp,
-            llmProviderKeys,
             ai,
             aiLoading,
             aiProposal,
             aiWarnings,
-            loadLlmConfig,
-            aiPropose,
-            aiApply,
             refreshAll,
             createProject,
             selectProject,

package/views/admin-workflows.ejs

@@ -220,11 +220,11 @@
             this.loadWorkflows().then(() => {
               if (workflowIdFromUrl !== 'new' && workflowIdFromUrl.length > 5) {
                 const wf = this.workflows.find(w => w._id === workflowIdFromUrl);
-                if (wf) this.editWorkflow(wf); else fetch(`/saas/api/workflows/${workflowIdFromUrl}`).then(res => res.ok && res.json().then(data => this.editWorkflow(data)));
+                if (wf) this.editWorkflow(wf); else fetch(`/saas/api/admin/workflows/${workflowIdFromUrl}`).then(res => res.ok && res.json().then(data => this.editWorkflow(data)));
               } else if (workflowIdFromUrl === 'new') this.createNew();
             });
           },
-          async loadWorkflows() { const res = await fetch('/saas/api/workflows'); this.workflows = await res.json(); },
+          async loadWorkflows() { const res = await fetch('/saas/api/admin/workflows'); this.workflows = await res.json(); },
           createNew() { this.workflow = { name: 'New Workflow', status: 'inactive', entrypoint: { awaitResponse: false, allowedMethods: ['POST', 'GET'], auth: { type: 'none' } }, testDataset: { method: 'POST', body: { message: 'Hello' }, query: {}, headers: {} }, nodes: [] }; this.view = 'editor'; },
           editWorkflow(wf) {
             const currentView = this.view; this.workflow = JSON.parse(JSON.stringify(wf)); this.showRuns = false; this.runs = []; this.inspectedRun = null;
@@ -233,7 +233,7 @@
             this.view = (currentView === 'list') ? 'editor' : currentView;
           },
           toggleMethod(m) { this.workflow.entrypoint.allowedMethods = this.workflow.entrypoint.allowedMethods || []; const idx = this.workflow.entrypoint.allowedMethods.indexOf(m); if (idx > -1) this.workflow.entrypoint.allowedMethods.splice(idx, 1); else this.workflow.entrypoint.allowedMethods.push(m); },
-          async deleteWorkflow(id) { if (confirm('Are you sure?')) { await fetch(`/saas/api/workflows/${id}`, { method: 'DELETE' }); await this.loadWorkflows(); } },
+          async deleteWorkflow(id) { if (confirm('Are you sure?')) { await fetch(`/saas/api/admin/workflows/${id}`, { method: 'DELETE' }); await this.loadWorkflows(); } },
           getWebhookUrl() { return window.location.origin + '/saas/w/' + (this.workflow._id || 'NEW'); },
           copyWebhookUrl() { navigator.clipboard.writeText(this.getWebhookUrl()); this.showToast('Copied!'); },
           addNode(type) { this.workflow.nodes.push({ id: 'node_' + Date.now(), type, name: 'node_' + (this.workflow.nodes.length + 1) }); },
@@ -247,7 +247,7 @@
           getNodeIcon(type) { return { llm: 'ti-brain', if: 'ti-git-branch', http: 'ti-world', exit: 'ti-door-exit', parallel: 'ti-git-merge' }[type] || 'ti-circle'; },
           getNodeColor(type) { return { llm: 'bg-indigo-500', if: 'bg-yellow-500', http: 'bg-blue-500', exit: 'bg-red-500', parallel: 'bg-purple-500' }[type]; },
           async saveWorkflow(silent = false) {
-            const res = await fetch(this.workflow._id ? `/saas/api/workflows/${this.workflow._id}` : '/saas/api/workflows', { method: this.workflow._id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.workflow) });
+            const res = await fetch(this.workflow._id ? `/saas/api/admin/workflows/${this.workflow._id}` : '/saas/api/admin/workflows', { method: this.workflow._id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.workflow) });
             if (res.ok) { const saved = await res.json(); if (!silent) this.showToast('Saved!'); await this.loadWorkflows(); this.editWorkflow(saved); }
           },
           async runFullTest(entrypointOnly = false) {
@@ -255,7 +255,7 @@
             try {
               const payload = { method: this.testConfig.method, body: JSON.parse(this.testConfig.body), query: JSON.parse(this.testConfig.query), headers: JSON.parse(this.testConfig.headers) };
               if (entrypointOnly) { this.workflow.testDataset = payload; await this.saveWorkflow(true); return this.showToast('Dataset set.'); }
-              this.testing = true; const res = await fetch(`/saas/api/workflows/${this.workflow._id}/test`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+              this.testing = true; const res = await fetch(`/saas/api/admin/workflows/${this.workflow._id}/test`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
               this.testResult = await res.json(); if (this.showRuns) this.loadRuns(); this.showToast('Ran.');
             } catch (e) { this.showToast('Failed', 'error'); } finally { this.testing = false; }
           },
@@ -263,11 +263,11 @@
           async testIsolatedNode(node) {
             const context = { entrypoint: this.workflow.testDataset, payload: this.workflow.testDataset, lastNode: this.workflow.testDataset };
             try {
-              const res = await fetch(`/saas/api/workflows/${this.workflow._id}/nodes/${node.id}/test`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ context, node }) });
+              const res = await fetch(`/saas/api/admin/workflows/${this.workflow._id}/nodes/${node.id}/test`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ context, node }) });
               const data = await res.json(); node.testOutput = data.result; node.testResult = data.result; this.showToast('Tested');
             } catch (e) { this.showToast('Failed', 'error'); }
           },
-          async loadRuns() { if (!this.workflow._id) return; const res = await fetch(`/saas/api/workflows/${this.workflow._id}/runs`); this.runs = await res.json(); },
+          async loadRuns() { if (!this.workflow._id) return; const res = await fetch(`/saas/api/admin/workflows/${this.workflow._id}/runs`); this.runs = await res.json(); },
           inspectRun(run) { this.inspectedRun = run; }, testWorkflow() { this.showTestPanel = true; },
           showToast(message, type = 'success') {
             const id = Date.now(); this.toasts.push({ id, message, type, show: true });