@intranefr/superbackend 1.5.2 → 1.6.3

package/public/js/admin-ui-components.js

@@ -0,0 +1,408 @@
+(() => {
+  const { createApp, ref, computed, onMounted, onBeforeUnmount, nextTick, watch } = Vue;
+
+  function withToast(fn, showToast) {
+    return async (...args) => {
+      try {
+        return await fn(...args);
+      } catch (e) {
+        showToast(e.message, 'error');
+        return null;
+      }
+    };
+  }
+
+  createApp({
+    setup() {
+      const cfg = window.__adminUiComponentsConfig || {};
+      const baseUrl = String(cfg.baseUrl || '');
+      const adminPath = String(cfg.adminPath || '/admin');
+      const API_BASE = window.location.origin + baseUrl;
+
+      const STORAGE_KEYS = {
+        providerKey: 'uiComponents.ai.providerKey',
+        model: 'uiComponents.ai.model',
+        helpOpen: 'uiComponents.help.open',
+      };
+
+      const toast = ref({ show: false, message: '', type: 'success' });
+      let toastTimer = null;
+      const showToast = (message, type) => {
+        toast.value = { show: true, message: String(message || ''), type: type || 'success' };
+        if (toastTimer) clearTimeout(toastTimer);
+        toastTimer = setTimeout(() => {
+          toast.value.show = false;
+        }, 2500);
+      };
+
+      const api = async (path, options) => {
+        const res = await fetch(baseUrl + path, {
+          method: (options && options.method) || 'GET',
+          headers: { 'Content-Type': 'application/json' },
+          body: options && options.body ? JSON.stringify(options.body) : undefined,
+        });
+        const text = await res.text();
+        let data = null;
+        try { data = text ? JSON.parse(text) : null; } catch { data = null; }
+        if (!res.ok) throw new Error((data && data.error) || ('Request failed: ' + res.status));
+        return data;
+      };
+
+      const helpOpen = ref(false);
+      const projects = ref([]);
+      const components = ref([]);
+      const selectedProject = ref(null);
+      const assignments = ref([]);
+      const lastGeneratedKey = ref('');
+      const newProject = ref({ name: '', projectId: '', isPublic: true });
+      const componentEditor = ref({ code: '', name: '', html: '', js: '', css: '', usageMarkdown: '' });
+
+      const ai = ref({
+        providerKey: localStorage.getItem(STORAGE_KEYS.providerKey) || '',
+        model: localStorage.getItem(STORAGE_KEYS.model) || '',
+        prompt: '',
+        mode: 'minimal',
+        targets: { html: true, css: true, js: true, usageMarkdown: true },
+      });
+      const aiLoading = ref(false);
+      const aiProposal = ref(null);
+      const aiWarnings = ref([]);
+
+      const previewMode = ref('iframe');
+      const previewCssIsolation = ref('scoped');
+      const previewPropsJson = ref('{"message":"Hello from preview"}');
+      const previewStatus = ref('idle');
+      const previewLogs = ref([]);
+      const previewCommand = ref('const i = await uiCmp.create({ message: "Hello" });\nlog("instance", i);');
+      const previewFullscreen = ref(false);
+      const previewContainerRef = ref(null);
+      const previewTopMountRef = ref(null);
+      const previewIframeRef = ref(null);
+      const previewLogsText = computed(() => previewLogs.value.join('\n'));
+
+      const previewManager = window.AdminUiComponentsPreview.createManager({
+        nextTick,
+        previewMode,
+        previewCssIsolation,
+        previewPropsJson,
+        previewStatus,
+        previewLogs,
+        previewContainerRef,
+        previewTopMountRef,
+        previewIframeRef,
+        componentEditor,
+        showToast,
+      });
+
+      const loadHelpState = () => {
+        try {
+          const raw = localStorage.getItem(STORAGE_KEYS.helpOpen);
+          if (raw === '1') helpOpen.value = true;
+          if (raw === '0') helpOpen.value = false;
+        } catch {}
+      };
+
+      const toggleHelp = () => {
+        helpOpen.value = !helpOpen.value;
+        try { localStorage.setItem(STORAGE_KEYS.helpOpen, helpOpen.value ? '1' : '0'); } catch {}
+      };
+
+      const persistAiSettings = () => {
+        try {
+          localStorage.setItem(STORAGE_KEYS.providerKey, String(ai.value.providerKey || ''));
+          localStorage.setItem(STORAGE_KEYS.model, String(ai.value.model || ''));
+        } catch {}
+      };
+
+      const 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 || '');
+      };
+
+      const wireAiPickerListeners = () => {
+        const providerEl = document.getElementById('uiComponentsAiProviderKey');
+        const modelEl = document.getElementById('uiComponentsAiModel');
+        if (!providerEl || !modelEl || providerEl.dataset.wired === '1') return;
+        providerEl.dataset.wired = '1';
+        modelEl.dataset.wired = '1';
+        const onProvider = () => { ai.value.providerKey = String(providerEl.value || ''); persistAiSettings(); };
+        const onModel = () => { ai.value.model = String(modelEl.value || ''); persistAiSettings(); };
+        providerEl.addEventListener('input', onProvider);
+        providerEl.addEventListener('change', onProvider);
+        modelEl.addEventListener('input', onModel);
+        modelEl.addEventListener('change', onModel);
+      };
+
+      const initAiPicker = async () => {
+        if (!window.__llmProviderModelPicker || !window.__llmProviderModelPicker.init) return;
+        await window.__llmProviderModelPicker.init({
+          apiBase: baseUrl,
+          providerInputId: 'uiComponentsAiProviderKey',
+          modelInputId: 'uiComponentsAiModel',
+        });
+        syncAiPickerToVue();
+        wireAiPickerListeners();
+      };
+
+      const loadLlmConfig = withToast(async () => {
+        await initAiPicker();
+        showToast('LLM config reloaded', 'success');
+      }, showToast);
+
+      const refreshProjects = async () => {
+        const data = await api('/api/admin/ui-components/projects');
+        projects.value = data && data.items ? data.items : [];
+      };
+      const refreshComponents = async () => {
+        const data = await api('/api/admin/ui-components/components');
+        components.value = data && data.items ? data.items : [];
+      };
+      const refreshAssignments = async (projectId) => {
+        const data = await api('/api/admin/ui-components/projects/' + encodeURIComponent(projectId) + '/components');
+        assignments.value = data && data.items ? data.items : [];
+      };
+
+      const refreshAllCore = async () => {
+        await Promise.all([refreshProjects(), refreshComponents()]);
+        if (selectedProject.value) await refreshAssignments(selectedProject.value.projectId);
+      };
+
+      const refreshAll = withToast(async () => {
+        await refreshAllCore();
+        showToast('Refreshed', 'success');
+      }, showToast);
+
+      const createProject = withToast(async () => {
+        lastGeneratedKey.value = '';
+        const data = await api('/api/admin/ui-components/projects', {
+          method: 'POST',
+          body: {
+            name: newProject.value.name,
+            projectId: newProject.value.projectId || undefined,
+            isPublic: Boolean(newProject.value.isPublic),
+          },
+        });
+        if (data && data.apiKey) lastGeneratedKey.value = data.apiKey;
+        newProject.value = { name: '', projectId: '', isPublic: true };
+        await refreshProjects();
+        showToast('Project created', 'success');
+      }, showToast);
+
+      const selectProject = withToast(async (p) => {
+        lastGeneratedKey.value = '';
+        selectedProject.value = { ...p };
+        await refreshAssignments(p.projectId);
+      }, showToast);
+
+      const isAssigned = (code) => assignments.value.some((a) => a.componentCode === code && a.enabled);
+
+      const toggleAssignment = withToast(async (code, enabled) => {
+        if (!selectedProject.value) return;
+        const url = '/api/admin/ui-components/projects/' + encodeURIComponent(selectedProject.value.projectId) + '/components/' + encodeURIComponent(code);
+        if (enabled) await api(url, { method: 'POST', body: { enabled: true } });
+        else await api(url, { method: 'DELETE' });
+        await refreshAssignments(selectedProject.value.projectId);
+        showToast('Updated assignment', 'success');
+      }, showToast);
+
+      const toggleProjectPublic = withToast(async () => {
+        lastGeneratedKey.value = '';
+        const data = await api('/api/admin/ui-components/projects/' + encodeURIComponent(selectedProject.value.projectId), {
+          method: 'PUT',
+          body: { isPublic: Boolean(selectedProject.value.isPublic) },
+        });
+        if (data && data.apiKey) lastGeneratedKey.value = data.apiKey;
+        await refreshAllCore();
+        showToast('Project updated', 'success');
+      }, showToast);
+
+      const rotateKey = withToast(async () => {
+        lastGeneratedKey.value = '';
+        const data = await api('/api/admin/ui-components/projects/' + encodeURIComponent(selectedProject.value.projectId) + '/rotate-key', { method: 'POST' });
+        if (data && data.apiKey) lastGeneratedKey.value = data.apiKey;
+        showToast('Key rotated', 'success');
+      }, showToast);
+
+      const clearComponentEditor = () => {
+        componentEditor.value = { code: '', name: '', html: '', js: '', css: '', usageMarkdown: '' };
+      };
+
+      const loadComponentIntoEditor = withToast(async (code) => {
+        const data = await api('/api/admin/ui-components/components/' + encodeURIComponent(code));
+        const c = data && data.item ? data.item : null;
+        if (!c) return;
+        aiProposal.value = null;
+        aiWarnings.value = [];
+        componentEditor.value = {
+          code: c.code || '',
+          name: c.name || '',
+          html: c.html || '',
+          js: c.js || '',
+          css: c.css || '',
+          usageMarkdown: c.usageMarkdown || '',
+        };
+        await previewManager.run();
+      }, showToast);
+
+      const saveComponent = withToast(async () => {
+        const code = String(componentEditor.value.code || '').trim().toLowerCase();
+        if (!code) throw new Error('code is required');
+        const payload = {
+          code,
+          name: componentEditor.value.name,
+          html: componentEditor.value.html,
+          js: componentEditor.value.js,
+          css: componentEditor.value.css,
+          usageMarkdown: componentEditor.value.usageMarkdown,
+        };
+        if (components.value.find((c) => c.code === code)) {
+          await api('/api/admin/ui-components/components/' + encodeURIComponent(code), { method: 'PUT', body: payload });
+        } else {
+          await api('/api/admin/ui-components/components', { method: 'POST', body: payload });
+        }
+        await refreshAllCore();
+        showToast('Component saved', 'success');
+      }, showToast);
+
+      const aiPropose = withToast(async () => {
+        const code = String(componentEditor.value.code || '').trim().toLowerCase();
+        const prompt = String(ai.value.prompt || '').trim();
+        if (!code) throw new Error('Select or enter a component code first');
+        if (!prompt) throw new Error('Prompt is required');
+        persistAiSettings();
+        aiLoading.value = true;
+        aiProposal.value = null;
+        aiWarnings.value = [];
+        const data = await api('/api/admin/ui-components/ai/components/' + encodeURIComponent(code) + '/propose', {
+          method: 'POST',
+          body: {
+            prompt,
+            providerKey: ai.value.providerKey || undefined,
+            model: ai.value.model || undefined,
+            targets: ai.value.targets,
+            mode: ai.value.mode,
+          },
+        });
+        aiProposal.value = data && data.proposal ? data.proposal : null;
+        aiWarnings.value = aiProposal.value && Array.isArray(aiProposal.value.warnings) ? aiProposal.value.warnings : [];
+        showToast('AI proposal ready', 'success');
+        aiLoading.value = false;
+      }, showToast);
+
+      const aiApply = () => {
+        if (!aiProposal.value || !aiProposal.value.fields) return;
+        const f = aiProposal.value.fields;
+        if (f.html !== undefined) componentEditor.value.html = f.html;
+        if (f.css !== undefined) componentEditor.value.css = f.css;
+        if (f.js !== undefined) componentEditor.value.js = f.js;
+        if (f.usageMarkdown !== undefined) componentEditor.value.usageMarkdown = f.usageMarkdown;
+        showToast('Applied proposal into editor (click Save to persist)', 'success');
+      };
+
+      const runPreview = withToast(() => previewManager.run(), showToast);
+      const resetPreview = () => previewManager.reset();
+      const clearPreviewLogs = () => previewManager.clearLogs();
+      const runPreviewCommand = withToast(() => previewManager.runCommand(previewCommand.value), showToast);
+      const togglePreviewFullscreen = withToast(() => previewManager.toggleFullscreen(), showToast);
+
+      const setPreviewCommandExample = (kind) => {
+        const code = String(componentEditor.value.code || '').trim().toLowerCase();
+        const component = components.value.find((c) => c.code === code);
+
+        console.log('setPreviewCommandExample',{
+          component,
+          kind
+        })
+
+        if (kind === 'create') {
+          if (component?.previewExample) {
+            previewCommand.value = component.previewExample;
+          } else {
+            previewCommand.value = 'const instance = await uiCmp.create({ message: "Hello from command" });\nlog("created", Object.keys(instance || {}));';
+          }
+        } else if (kind === 'call') {
+          if (component?.code === 'sui_alert') {
+            previewCommand.value = 'const i = uiCmp.getInstance();\nif (!i || !i.exported) { log("No instance"); return; }\nif (typeof i.exported.show === "function") i.exported.show("Title", "Message");\nlog("called show() if present");';
+          } else if (component?.code === 'sui_toast') {
+            previewCommand.value = 'const i = uiCmp.getInstance();\nif (!i || !i.exported) { log("No instance"); return; }\nif (typeof i.exported.info === "function") i.exported.info("Info", "Message");\nlog("called info() if present");';
+          } else {
+            previewCommand.value = 'const i = uiCmp.getInstance();\nif (!i || !i.exported) { log("No instance"); return; }\nif (typeof i.exported.show === "function") i.exported.show();\nlog("called show() if present");';
+          }
+        } else {
+          previewCommand.value = 'uiCmp.destroy();\nlog("destroyed")';
+        }
+      };
+
+      const onFullscreenChange = () => {
+        previewFullscreen.value = Boolean(document.fullscreenElement && document.fullscreenElement === previewContainerRef.value);
+      };
+
+      watch(previewMode, async () => {
+        resetPreview();
+      });
+
+      onMounted(async () => {
+        await refreshAllCore();
+        await initAiPicker();
+        // Indicate that Vue is ready and process any queued LLM picker initializations
+        window.__llmProviderModelPickerReady = true;
+        if (window.__llmProviderModelPickerQueue && Array.isArray(window.__llmProviderModelPickerQueue)) {
+          window.__llmProviderModelPickerQueue.forEach(fn => {
+            try { fn(); } catch (_) {}
+          });
+          window.__llmProviderModelPickerQueue = [];
+        }
+      });
+
+      return {
+        baseUrl,
+        adminPath,
+        toast,
+        helpOpen,
+        projects,
+        components,
+        selectedProject,
+        assignments,
+        lastGeneratedKey,
+        newProject,
+        componentEditor,
+        toggleHelp,
+        ai,
+        aiLoading,
+        aiProposal,
+        aiWarnings,
+        refreshAll,
+        createProject,
+        selectProject,
+        isAssigned,
+        toggleAssignment,
+        toggleProjectPublic,
+        rotateKey,
+        clearComponentEditor,
+        loadComponentIntoEditor,
+        saveComponent,
+        aiPropose,
+        aiApply,
+        loadLlmConfig,
+        previewMode,
+        previewCssIsolation,
+        previewPropsJson,
+        previewStatus,
+        previewCommand,
+        previewLogsText,
+        previewFullscreen,
+        previewContainerRef,
+        previewTopMountRef,
+        previewIframeRef,
+        runPreview,
+        resetPreview,
+        runPreviewCommand,
+        clearPreviewLogs,
+        setPreviewCommandExample,
+        togglePreviewFullscreen,
+      };
+    },
+  }).mount('#app');
+})();

package/public/js/llm-provider-model-picker.js

@@ -0,0 +1,193 @@
+(function () {
+  // Only initialize if Vue has indicated it's ready (prevents premature execution in Vue contexts)
+  if (typeof window !== 'undefined' && window.__llmProviderModelPickerReady === true) {
+    initializeLlmProviderModelPicker();
+  } else if (typeof window !== 'undefined') {
+    // Queue initialization for when Vue indicates readiness
+    window.__llmProviderModelPickerQueue = window.__llmProviderModelPickerQueue || [];
+    window.__llmProviderModelPickerQueue.push(initializeLlmProviderModelPicker);
+  }
+
+  function initializeLlmProviderModelPicker() {
+    if (!window.__llmProviderModelPicker) {
+      window.__llmProviderModelPicker = { instances: {} };
+    }
+
+    function safeJsonParse(raw, fallback) {
+      try {
+        return JSON.parse(raw);
+      } catch (_) {
+        return fallback;
+      }
+    }
+
+    async function fetchJson(url) {
+      const res = await fetch(url);
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data?.error || 'Request failed');
+      }
+      return data;
+    }
+
+    function setDatalistOptions(datalistEl, items) {
+      datalistEl.innerHTML = '';
+      const uniq = Array.from(new Set((items || []).filter(Boolean)));
+      for (const item of uniq) {
+        const opt = document.createElement('option');
+        opt.value = String(item);
+        datalistEl.appendChild(opt);
+      }
+    }
+
+    function trim(v) {
+      return String(v || '').trim();
+    }
+
+    function isOpenRouterProvider({ providerKey, providerConfig }) {
+      const pk = String(providerKey || '').trim().toLowerCase();
+      if (pk === 'openrouter') return true;
+
+      const baseUrl = providerConfig && typeof providerConfig === 'object'
+        ? String(providerConfig.baseUrl || providerConfig.baseURL || '').trim().toLowerCase()
+        : '';
+
+      return Boolean(baseUrl && baseUrl.includes('openrouter'));
+    }
+
+    function getInstanceKey({ providerInputId, modelInputId }) {
+      return `${String(providerInputId || '').trim()}::${String(modelInputId || '').trim()}`;
+    }
+
+    function getOrCreateInstance(opts) {
+      const key = getInstanceKey(opts);
+      const existing = window.__llmProviderModelPicker.instances[key];
+      if (existing) {
+        console.log('[LLM Picker Debug] Using existing instance:', key, 'apiBase:', existing.apiBase);
+        return existing;
+      }
+
+      const apiBase = opts.apiBase !== undefined ? opts.apiBase : (window.__llmProviderModelPicker.defaultApiBase || null);
+      console.log('[LLM Picker Debug] Creating new instance:', key, 'opts.apiBase:', opts.apiBase, 'defaultApiBase:', window.__llmProviderModelPicker.defaultApiBase, 'final apiBase:', apiBase);
+      
+      const inst = {
+        apiBase: apiBase,
+        providerInputId: opts.providerInputId,
+        modelInputId: opts.modelInputId,
+        providers: {},
+        providerModels: {},
+      };
+
+      window.__llmProviderModelPicker.instances[key] = inst;
+      return inst;
+    }
+
+    async function loadConfig(inst) {
+      const url = `${inst.apiBase}/api/admin/llm/config`;
+      console.log('[LLM Picker Debug] loadConfig called with apiBase:', inst.apiBase, 'full URL:', url);
+      const data = await fetchJson(url);
+      inst.providers = data.providers || {};
+      inst.providerModels = data.providerModels || {};
+      return data;
+    }
+
+    function renderProviderOptions(inst) {
+      const providerInput = document.getElementById(inst.providerInputId);
+      const providerList = document.getElementById(`${inst.providerInputId}__datalist`);
+      if (!providerInput || !providerList) return;
+
+      const providerKeys = Object.keys(inst.providers || {}).sort();
+      setDatalistOptions(providerList, providerKeys);
+    }
+
+    function renderModelOptions(inst) {
+      const providerInput = document.getElementById(inst.providerInputId);
+      const modelList = document.getElementById(`${inst.modelInputId}__datalist`);
+      if (!providerInput || !modelList) return;
+
+      const providerKey = trim(providerInput.value);
+      const models = providerKey && inst.providerModels && typeof inst.providerModels === 'object'
+        ? inst.providerModels[providerKey]
+        : null;
+
+      setDatalistOptions(modelList, Array.isArray(models) ? models : []);
+    }
+
+    async function maybeAutoFetchOpenRouterModels(inst) {
+      try {
+        const providerInput = document.getElementById(inst.providerInputId);
+        if (!providerInput) return;
+
+        const providerKey = trim(providerInput.value);
+        const providerConfig = inst.providers && typeof inst.providers === 'object' ? inst.providers[providerKey] : null;
+        if (!isOpenRouterProvider({ providerKey, providerConfig })) return;
+
+        const existing = inst.providerModels && typeof inst.providerModels === 'object' ? inst.providerModels.openrouter : null;
+        if (Array.isArray(existing) && existing.length > 0) return;
+
+        await fetchOpenRouterModels({
+          apiBase: inst.apiBase,
+          providerInputId: inst.providerInputId,
+          modelInputId: inst.modelInputId,
+        });
+      } catch {
+        // ignore
+      }
+    }
+
+    async function fetchOpenRouterModels(opts) {
+      console.log('[LLM Picker Debug] fetchOpenRouterModels called with opts:', opts);
+      const inst = getOrCreateInstance(opts || {});
+      console.log('[LLM Picker Debug] fetchOpenRouterModels - inst.apiBase before update:', inst.apiBase);
+      inst.apiBase = (opts && opts.apiBase !== undefined) ? opts.apiBase : (inst.apiBase !== undefined ? inst.apiBase : (window.__llmProviderModelPicker.defaultApiBase || null));
+      console.log('[LLM Picker Debug] fetchOpenRouterModels - inst.apiBase after update:', inst.apiBase);
+      if (inst.apiBase == null) {
+        console.error('[LLM Picker] No apiBase available for fetchOpenRouterModels');
+        return;
+      }
+
+      const data = await fetchJson(`${inst.apiBase}/api/admin/llm/openrouter/models`);
+      const models = Array.isArray(data?.models) ? data.models : [];
+
+      inst.providerModels = inst.providerModels && typeof inst.providerModels === 'object' ? inst.providerModels : {};
+      inst.providerModels.openrouter = models;
+      renderModelOptions(inst);
+    }
+
+    async function init(opts) {
+      console.log('[LLM Picker Debug] init called with opts:', opts);
+      const inst = getOrCreateInstance(opts || {});
+
+      if (opts && opts.apiBase) {
+        console.log('[LLM Picker Debug] Setting apiBase to:', opts.apiBase);
+        window.__llmProviderModelPicker.defaultApiBase = opts.apiBase;
+        // Update apiBase for this instance and all existing instances
+        inst.apiBase = opts.apiBase;
+        // Update all existing instances to have the correct apiBase
+        Object.values(window.__llmProviderModelPicker.instances).forEach(existingInst => {
+          console.log('[LLM Picker Debug] Updating existing instance apiBase from', existingInst.apiBase, 'to', opts.apiBase);
+          existingInst.apiBase = opts.apiBase;
+        });
+      }
+
+      console.log('[LLM Picker Debug] About to call loadConfig, inst.apiBase:', inst.apiBase);
+      await loadConfig(inst);
+      renderProviderOptions(inst);
+      renderModelOptions(inst);
+      await maybeAutoFetchOpenRouterModels(inst);
+
+      const providerInput = document.getElementById(inst.providerInputId);
+      if (providerInput) {
+        providerInput.addEventListener('change', async () => {
+          renderModelOptions(inst);
+          await maybeAutoFetchOpenRouterModels(inst);
+        });
+        providerInput.addEventListener('input', () => renderModelOptions(inst));
+      }
+    }
+
+    window.__llmProviderModelPicker.init = init;
+    window.__llmProviderModelPicker.fetchOpenRouterModels = fetchOpenRouterModels;
+    window.__llmProviderModelPicker._util = { safeJsonParse };
+  }
+})();

package/public/test-iframe-fix.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Iframe Fix Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; }
+        .test-container { margin: 20px 0; }
+        iframe { width: 100%; height: 400px; border: 2px solid #ccc; }
+        .success { color: green; font-weight: bold; }
+        .error { color: red; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <h1>Iframe Authentication Fix Test</h1>
+    
+    <div class="test-container">
+        <h2>Test 1: Iframe with Token (Should Work)</h2>
+        <iframe src="/admin/stats/dashboard-home?iframe_token=authenticated"></iframe>
+        <p id="test1-result">Loading...</p>
+    </div>
+    
+    <div class="test-container">
+        <h2>Test 2: Iframe without Token (Should Redirect to Login)</h2>
+        <iframe src="/admin/stats/dashboard-home"></iframe>
+        <p id="test2-result">Loading...</p>
+    </div>
+
+    <script>
+        // Test if iframe loads correctly
+        setTimeout(() => {
+            const iframes = document.querySelectorAll('iframe');
+            
+            // Test 1 - should show Command Center
+            iframes[0].contentDocument && iframes[0].contentDocument.body) {
+                const content = iframes[0].contentDocument.body.innerText;
+                if (content.includes('Command Center')) {
+                    document.getElementById('test1-result').innerHTML = '<span class="success">✅ SUCCESS: Iframe with token loads correctly</span>';
+                } else if (content.includes('login') || content.includes('Login')) {
+                    document.getElementById('test1-result').innerHTML = '<span class="error">❌ FAILED: Iframe with token redirected to login</span>';
+                } else {
+                    document.getElementById('test1-result').innerHTML = '<span class="error">❌ UNKNOWN: Could not determine iframe content</span>';
+                }
+            } else {
+                document.getElementById('test1-result').innerHTML = '<span class="error">❌ FAILED: Could not access iframe content (cross-origin)</span>';
+            }
+            
+            // Test 2 - should redirect to login
+            if (iframes[1].contentDocument && iframes[1].contentDocument.body) {
+                const content = iframes[1].contentDocument.body.innerText;
+                if (content.includes('login') || content.includes('Login')) {
+                    document.getElementById('test2-result').innerHTML = '<span class="success">✅ SUCCESS: Iframe without token correctly redirects to login</span>';
+                } else if (content.includes('Command Center')) {
+                    document.getElementById('test2-result').innerHTML = '<span class="error">❌ FAILED: Iframe without token loaded content (security issue)</span>';
+                } else {
+                    document.getElementById('test2-result').innerHTML = '<span class="error">❌ UNKNOWN: Could not determine iframe content</span>';
+                }
+            } else {
+                document.getElementById('test2-result').innerHTML = '<span class="error">❌ FAILED: Could not access iframe content (cross-origin)</span>';
+            }
+        }, 3000);
+    </script>
+</body>
+</html>

package/public/test-iframe.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Iframe Test</title>
+</head>
+<body>
+    <h1>Iframe Test</h1>
+    <p>Testing iframe loading of admin dashboard content...</p>
+    
+    <iframe src="/admin/stats/dashboard-home" width="100%" height="500" style="border: 1px solid #ccc;"></iframe>
+    
+    <p>If you see the admin dashboard content above, iframes work. If you see a login page, there's a cookie/session issue.</p>
+</body>
+</html>