// Define critical functions immediately so they're available before any HTML is rendered
// Debug logging controlled by localStorage.setItem('pluginDebug', 'true')
const _PLUGIN_DEBUG_EARLY = typeof localStorage !== 'undefined' && localStorage.getItem('pluginDebug') === 'true';
if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS SCRIPT] Defining configurePlugin and togglePlugin at top level...');
// Expose on-demand functions early as stubs (will be replaced when IIFE runs)
window.openOnDemandModal = function(pluginId) {
console.warn('openOnDemandModal called before initialization, waiting...');
// Wait for the real function to be available
let attempts = 0;
const maxAttempts = 50; // 2.5 seconds
const checkInterval = setInterval(() => {
attempts++;
if (window.__openOnDemandModalImpl) {
clearInterval(checkInterval);
window.__openOnDemandModalImpl(pluginId);
} else if (attempts >= maxAttempts) {
clearInterval(checkInterval);
console.error('openOnDemandModal not available after waiting');
if (typeof showNotification === 'function') {
showNotification('On-demand modal unavailable. Please refresh the page.', 'error');
}
}
}, 50);
};
window.requestOnDemandStop = function({ stopService = false } = {}) {
console.warn('requestOnDemandStop called before initialization, waiting...');
// Wait for the real function to be available
let attempts = 0;
const maxAttempts = 50; // 2.5 seconds
const checkInterval = setInterval(() => {
attempts++;
if (window.__requestOnDemandStopImpl) {
clearInterval(checkInterval);
return window.__requestOnDemandStopImpl({ stopService });
} else if (attempts >= maxAttempts) {
clearInterval(checkInterval);
console.error('requestOnDemandStop not available after waiting');
if (typeof showNotification === 'function') {
showNotification('On-demand stop unavailable. Please refresh the page.', 'error');
}
return Promise.reject(new Error('Function not available'));
}
}, 50);
return Promise.resolve();
};
// Define updatePlugin early as a stub to ensure it's always available
window.updatePlugin = window.updatePlugin || function(pluginId) {
if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] updatePlugin called for', pluginId);
// Validate pluginId
if (!pluginId || typeof pluginId !== 'string') {
console.error('Invalid pluginId:', pluginId);
if (typeof showNotification === 'function') {
showNotification('Invalid plugin ID', 'error');
}
return Promise.reject(new Error('Invalid plugin ID'));
}
// Show immediate feedback
if (typeof showNotification === 'function') {
showNotification(`Updating ${pluginId}...`, 'info');
}
// Prepare request body
const requestBody = { plugin_id: pluginId };
const requestBodyJson = JSON.stringify(requestBody);
console.log('[UPDATE] Sending request:', { url: '/api/v3/plugins/update', body: requestBodyJson });
// Make the API call directly
return fetch('/api/v3/plugins/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: requestBodyJson
})
.then(async response => {
// Check if response is OK before parsing
if (!response.ok) {
// Try to parse error response
let errorData;
try {
const text = await response.text();
console.error('[UPDATE] Error response:', { status: response.status, statusText: response.statusText, body: text });
errorData = JSON.parse(text);
} catch (e) {
errorData = { message: `Server error: ${response.status} ${response.statusText}` };
}
if (typeof showNotification === 'function') {
showNotification(errorData.message || `Update failed: ${response.status}`, 'error');
}
throw new Error(errorData.message || `Update failed: ${response.status}`);
}
// Parse successful response
return response.json();
})
.then(data => {
if (typeof showNotification === 'function') {
showNotification(data.message || 'Update initiated', data.status || 'info');
}
// Refresh installed plugins if available
if (typeof loadInstalledPlugins === 'function') {
loadInstalledPlugins();
} else if (typeof window.pluginManager?.loadInstalledPlugins === 'function') {
window.pluginManager.loadInstalledPlugins();
}
return data;
})
.catch(error => {
console.error('[UPDATE] Error updating plugin:', error);
if (typeof showNotification === 'function') {
showNotification('Error updating plugin: ' + error.message, 'error');
}
throw error;
});
};
// Define uninstallPlugin early as a stub
window.uninstallPlugin = window.uninstallPlugin || function(pluginId) {
if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] uninstallPlugin called for', pluginId);
if (!confirm(`Are you sure you want to uninstall ${pluginId}?`)) {
return Promise.resolve({ cancelled: true });
}
if (typeof showNotification === 'function') {
showNotification(`Uninstalling ${pluginId}...`, 'info');
}
return fetch('/api/v3/plugins/uninstall', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ plugin_id: pluginId })
})
.then(response => response.json())
.then(data => {
if (typeof showNotification === 'function') {
showNotification(data.message || 'Uninstall initiated', data.status || 'info');
}
// Refresh installed plugins if available
if (typeof loadInstalledPlugins === 'function') {
loadInstalledPlugins();
} else if (typeof window.pluginManager?.loadInstalledPlugins === 'function') {
window.pluginManager.loadInstalledPlugins();
}
return data;
})
.catch(error => {
console.error('Error uninstalling plugin:', error);
if (typeof showNotification === 'function') {
showNotification('Error uninstalling plugin: ' + error.message, 'error');
}
throw error;
});
};
// Cleanup orphaned modals from previous executions to prevent duplicates when moving to body
try {
const existingModals = document.querySelectorAll('#plugin-config-modal');
if (existingModals.length > 0) {
existingModals.forEach(el => {
// Only remove modals that were moved to body (orphaned from previous loads)
// The new modal in the current content should be inside a container, not direct body child
if (el.parentElement === document.body) {
console.log('[PLUGINS SCRIPT] Cleaning up orphaned plugin modal');
el.remove();
}
});
}
} catch (e) {
console.warn('[PLUGINS SCRIPT] Error cleaning up modals:', e);
}
// Track pending render data for when DOM isn't ready yet
window.__pendingInstalledPlugins = window.__pendingInstalledPlugins || null;
window.__pendingStorePlugins = window.__pendingStorePlugins || null;
window.__pluginDomReady = window.__pluginDomReady || false;
// Set up global event delegation for plugin actions (works even before plugins are loaded)
(function setupGlobalEventDelegation() {
// Use document-level delegation so it works for dynamically added content
const handleGlobalPluginAction = function(event) {
// Only handle if it's a plugin action
const button = event.target.closest('button[data-action][data-plugin-id]') ||
event.target.closest('input[data-action][data-plugin-id]');
if (!button) return;
const action = button.getAttribute('data-action');
const pluginId = button.getAttribute('data-plugin-id');
// For toggle and configure, ensure functions are available
if (action === 'toggle' || action === 'configure') {
const funcName = action === 'toggle' ? 'togglePlugin' : 'configurePlugin';
if (!window[funcName] || typeof window[funcName] !== 'function') {
// Prevent default and stop propagation immediately to avoid double handling
event.preventDefault();
event.stopPropagation();
console.warn(`[GLOBAL DELEGATION] ${funcName} not available yet, waiting...`);
// Capture state synchronously from plugin data (source of truth)
let targetChecked = false;
if (action === 'toggle') {
const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
let currentEnabled;
if (plugin) {
currentEnabled = Boolean(plugin.enabled);
} else if (button.type === 'checkbox') {
currentEnabled = button.checked;
} else {
currentEnabled = false;
}
targetChecked = !currentEnabled; // Toggle to opposite state
}
// Wait for function to be available
let attempts = 0;
const maxAttempts = 20; // 1 second total
const checkInterval = setInterval(() => {
attempts++;
if (window[funcName] && typeof window[funcName] === 'function') {
clearInterval(checkInterval);
// Call the function directly
if (action === 'toggle') {
window.togglePlugin(pluginId, targetChecked);
} else {
window.configurePlugin(pluginId);
}
} else if (attempts >= maxAttempts) {
clearInterval(checkInterval);
console.error(`[GLOBAL DELEGATION] ${funcName} not available after ${maxAttempts} attempts`);
if (typeof showNotification === 'function') {
showNotification(`${funcName} not loaded. Please refresh the page.`, 'error');
}
}
}, 50);
return; // Don't proceed with normal handling
}
}
// Prevent default and stop propagation to avoid double handling
event.preventDefault();
event.stopPropagation();
// If handlePluginAction exists, use it; otherwise handle directly
if (typeof handlePluginAction === 'function') {
handlePluginAction(event);
} else {
// Fallback: handle directly if functions are available
if (action === 'toggle' && window.togglePlugin) {
// Get the current enabled state from plugin data (source of truth)
const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
let currentEnabled;
if (plugin) {
currentEnabled = Boolean(plugin.enabled);
} else if (button.type === 'checkbox') {
currentEnabled = button.checked;
} else {
currentEnabled = false;
}
// Toggle the state - we want the opposite of current state
const isChecked = !currentEnabled;
// Prevent default behavior to avoid double-toggling and change event
// (Already done at start of function, but safe to repeat)
event.preventDefault();
event.stopPropagation();
console.log('[DEBUG toggle fallback] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked);
window.togglePlugin(pluginId, isChecked);
} else if (action === 'configure' && window.configurePlugin) {
event.preventDefault();
event.stopPropagation();
window.configurePlugin(pluginId);
}
}
};
// Set up delegation on document (capture phase for better reliability)
document.addEventListener('click', handleGlobalPluginAction, true);
document.addEventListener('change', handleGlobalPluginAction, true);
console.log('[PLUGINS SCRIPT] Global event delegation set up');
})();
window.configurePlugin = window.configurePlugin || async function(pluginId) {
console.log('[DEBUG] ===== configurePlugin called =====');
console.log('[DEBUG] Plugin ID:', pluginId);
// Switch to the plugin's configuration tab instead of opening a modal
// This matches the behavior of clicking the plugin tab at the top
function getAppComponent() {
if (window.Alpine) {
const appElement = document.querySelector('[x-data="app()"]');
if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
return appElement._x_dataStack[0];
}
}
return null;
}
const appComponent = getAppComponent();
if (appComponent) {
// Set the active tab to the plugin ID
appComponent.activeTab = pluginId;
console.log('[DEBUG] Switched to plugin tab:', pluginId);
// Scroll to top of page to ensure the tab is visible
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
console.error('Alpine.js app instance not found');
if (typeof showNotification === 'function') {
showNotification('Unable to switch to plugin configuration. Please refresh the page.', 'error');
}
}
};
window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
console.log('[DEBUG] ===== togglePlugin called =====');
console.log('[DEBUG] Plugin ID:', pluginId, 'Enabled:', enabled);
const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
const action = enabled ? 'enabling' : 'disabling';
// Update UI immediately for better UX
const toggleCheckbox = document.getElementById(`toggle-${pluginId}`);
const toggleLabel = document.getElementById(`toggle-label-${pluginId}`);
const wrapperDiv = toggleCheckbox?.parentElement?.querySelector('.flex.items-center.gap-2');
const toggleTrack = wrapperDiv?.querySelector('.relative.w-14');
const toggleHandle = toggleTrack?.querySelector('.absolute');
if (toggleCheckbox) toggleCheckbox.checked = enabled;
// Update wrapper background and border
if (wrapperDiv) {
if (enabled) {
wrapperDiv.classList.remove('bg-gray-50', 'border-gray-300');
wrapperDiv.classList.add('bg-green-50', 'border-green-500');
} else {
wrapperDiv.classList.remove('bg-green-50', 'border-green-500');
wrapperDiv.classList.add('bg-gray-50', 'border-gray-300');
}
}
// Update toggle track
if (toggleTrack) {
if (enabled) {
toggleTrack.classList.remove('bg-gray-300');
toggleTrack.classList.add('bg-green-500');
} else {
toggleTrack.classList.remove('bg-green-500');
toggleTrack.classList.add('bg-gray-300');
}
}
// Update toggle handle
if (toggleHandle) {
if (enabled) {
toggleHandle.classList.add('translate-x-full', 'border-green-500');
toggleHandle.classList.remove('border-gray-400');
toggleHandle.innerHTML = '';
} else {
toggleHandle.classList.remove('translate-x-full', 'border-green-500');
toggleHandle.classList.add('border-gray-400');
toggleHandle.innerHTML = '';
}
}
// Update label with icon and text
if (toggleLabel) {
if (enabled) {
toggleLabel.className = 'text-sm font-semibold text-green-700 flex items-center gap-1.5';
toggleLabel.innerHTML = 'Enabled';
} else {
toggleLabel.className = 'text-sm font-semibold text-gray-600 flex items-center gap-1.5';
toggleLabel.innerHTML = 'Disabled';
}
}
if (typeof showNotification === 'function') {
showNotification(`${action.charAt(0).toUpperCase() + action.slice(1)} ${pluginName}...`, 'info');
}
fetch('/api/v3/plugins/toggle', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ plugin_id: pluginId, enabled: enabled })
})
.then(response => response.json())
.then(data => {
if (typeof showNotification === 'function') {
showNotification(data.message, data.status);
}
if (data.status === 'success') {
// Update local state
if (plugin) {
plugin.enabled = enabled;
}
// Refresh the list to ensure consistency
if (typeof loadInstalledPlugins === 'function') {
loadInstalledPlugins();
}
} else {
// Revert the toggle if API call failed
if (plugin) {
plugin.enabled = !enabled;
}
if (typeof loadInstalledPlugins === 'function') {
loadInstalledPlugins();
}
}
})
.catch(error => {
if (typeof showNotification === 'function') {
showNotification('Error toggling plugin: ' + error.message, 'error');
}
// Revert the toggle if API call failed
if (plugin) {
plugin.enabled = !enabled;
}
if (typeof loadInstalledPlugins === 'function') {
loadInstalledPlugins();
}
});
};
// Verify functions are defined (debug only)
if (_PLUGIN_DEBUG_EARLY) {
console.log('[PLUGINS SCRIPT] Functions defined:', {
configurePlugin: typeof window.configurePlugin,
togglePlugin: typeof window.togglePlugin
});
if (typeof window.configurePlugin === 'function') {
console.log('[PLUGINS SCRIPT] ✓ configurePlugin ready');
}
if (typeof window.togglePlugin === 'function') {
console.log('[PLUGINS SCRIPT] ✓ togglePlugin ready');
}
}
// GitHub Token Collapse Handler - Define early so it's available before IIFE
console.log('[DEFINE] Defining attachGithubTokenCollapseHandler function...');
window.attachGithubTokenCollapseHandler = function() {
console.log('[attachGithubTokenCollapseHandler] Starting...');
const toggleTokenCollapseBtn = document.getElementById('toggle-github-token-collapse');
console.log('[attachGithubTokenCollapseHandler] Button found:', !!toggleTokenCollapseBtn);
if (!toggleTokenCollapseBtn) {
console.warn('[attachGithubTokenCollapseHandler] GitHub token collapse button not found');
return;
}
console.log('[attachGithubTokenCollapseHandler] Checking toggleGithubTokenContent...', {
exists: typeof window.toggleGithubTokenContent
});
if (!window.toggleGithubTokenContent) {
console.warn('[attachGithubTokenCollapseHandler] toggleGithubTokenContent function not defined');
return;
}
// Remove any existing listeners by cloning the button
const parent = toggleTokenCollapseBtn.parentNode;
if (!parent) {
console.warn('[attachGithubTokenCollapseHandler] Button parent not found');
return;
}
const newBtn = toggleTokenCollapseBtn.cloneNode(true);
parent.replaceChild(newBtn, toggleTokenCollapseBtn);
// Attach listener to the new button
newBtn.addEventListener('click', function(e) {
console.log('[attachGithubTokenCollapseHandler] Button clicked, calling toggleGithubTokenContent');
window.toggleGithubTokenContent(e);
});
console.log('[attachGithubTokenCollapseHandler] Handler attached to button:', newBtn.id);
};
// Toggle GitHub Token Settings section
console.log('[DEFINE] Defining toggleGithubTokenContent function...');
window.toggleGithubTokenContent = function(e) {
console.log('[toggleGithubTokenContent] called', e);
if (e) {
e.stopPropagation();
e.preventDefault();
}
const tokenContent = document.getElementById('github-token-content');
const tokenIconCollapse = document.getElementById('github-token-icon-collapse');
const toggleTokenCollapseBtn = document.getElementById('toggle-github-token-collapse');
console.log('[toggleGithubTokenContent] Elements found:', {
tokenContent: !!tokenContent,
tokenIconCollapse: !!tokenIconCollapse,
toggleTokenCollapseBtn: !!toggleTokenCollapseBtn
});
if (!tokenContent || !toggleTokenCollapseBtn) {
console.warn('[toggleGithubTokenContent] GitHub token content or button not found');
return;
}
const hasHiddenClass = tokenContent.classList.contains('hidden');
const computedDisplay = window.getComputedStyle(tokenContent).display;
console.log('[toggleGithubTokenContent] Current state:', {
hasHiddenClass,
computedDisplay,
buttonText: toggleTokenCollapseBtn.querySelector('span')?.textContent
});
if (hasHiddenClass || computedDisplay === 'none') {
// Show content - remove hidden class, add block class, remove inline display
tokenContent.classList.remove('hidden');
tokenContent.classList.add('block');
tokenContent.style.removeProperty('display');
if (tokenIconCollapse) {
tokenIconCollapse.classList.remove('fa-chevron-down');
tokenIconCollapse.classList.add('fa-chevron-up');
}
const span = toggleTokenCollapseBtn.querySelector('span');
if (span) span.textContent = 'Collapse';
console.log('[toggleGithubTokenContent] Content shown - removed hidden, added block');
} else {
// Hide content - add hidden class, remove block class, ensure display is none
tokenContent.classList.add('hidden');
tokenContent.classList.remove('block');
tokenContent.style.display = 'none';
if (tokenIconCollapse) {
tokenIconCollapse.classList.remove('fa-chevron-up');
tokenIconCollapse.classList.add('fa-chevron-down');
}
const span = toggleTokenCollapseBtn.querySelector('span');
if (span) span.textContent = 'Expand';
console.log('[toggleGithubTokenContent] Content hidden - added hidden, removed block, set display:none');
}
};
// GitHub Authentication Status - Define early so it's available in IIFE
// Shows warning banner only when token is missing or invalid
// The token itself is never exposed to the frontend for security
// Returns a Promise so it can be awaited
console.log('[DEFINE] Defining checkGitHubAuthStatus function...');
window.checkGitHubAuthStatus = function checkGitHubAuthStatus() {
console.log('[checkGitHubAuthStatus] Starting...');
return fetch('/api/v3/plugins/store/github-status')
.then(response => {
console.log('checkGitHubAuthStatus: Response status:', response.status);
return response.json();
})
.then(data => {
console.log('checkGitHubAuthStatus: Data received:', data);
if (data.status === 'success') {
const authData = data.data;
const tokenStatus = authData.token_status || (authData.authenticated ? 'valid' : 'none');
console.log('checkGitHubAuthStatus: Token status:', tokenStatus);
const warning = document.getElementById('github-auth-warning');
const settings = document.getElementById('github-token-settings');
const rateLimit = document.getElementById('rate-limit-count');
console.log('checkGitHubAuthStatus: Elements found:', {
warning: !!warning,
settings: !!settings,
rateLimit: !!rateLimit
});
// Show warning only when token is missing ('none') or invalid ('invalid')
if (tokenStatus === 'none' || tokenStatus === 'invalid') {
// Check if user has dismissed the warning (stored in session storage)
const dismissed = sessionStorage.getItem('github-auth-warning-dismissed');
if (!dismissed) {
if (warning && rateLimit) {
rateLimit.textContent = authData.rate_limit;
// Update warning message for invalid tokens
if (tokenStatus === 'invalid' && authData.error) {
const warningText = warning.querySelector('p.text-sm.text-yellow-700');
if (warningText) {
// Preserve the structure but update the message
const errorMsg = authData.message || authData.error;
warningText.innerHTML = `Token Invalid: ${errorMsg}. Please update your GitHub token to increase API rate limits to 5,000 requests/hour.`;
}
}
// For 'none' status, use the default message from HTML template
// Show warning using both classList and style.display
warning.classList.remove('hidden');
warning.style.display = '';
console.log(`GitHub token status: ${tokenStatus} - showing API limit warning`);
}
}
// Ensure settings panel is accessible when token is missing or invalid
// Panel can be opened via "Configure Token" link in warning
// Don't force it to be visible, but don't prevent it from being shown
} else if (tokenStatus === 'valid') {
// Token is valid - hide warning and ensure settings panel is visible but collapsed
if (warning) {
// Hide warning using both classList and style.display
warning.classList.add('hidden');
warning.style.display = 'none';
console.log('GitHub token is valid - hiding API limit warning');
}
// Make settings panel visible but collapsed (accessible for token management)
if (settings) {
// Remove hidden class from panel itself - make it visible using both methods
settings.classList.remove('hidden');
settings.style.display = '';
// Always collapse the content when token is valid (user must click expand)
const tokenContent = document.getElementById('github-token-content');
if (tokenContent) {
// Collapse the content - add hidden, remove block, set display none
tokenContent.classList.add('hidden');
tokenContent.classList.remove('block');
tokenContent.style.display = 'none';
}
// Update collapse button state to show "Expand"
const tokenIconCollapse = document.getElementById('github-token-icon-collapse');
if (tokenIconCollapse) {
tokenIconCollapse.classList.remove('fa-chevron-up');
tokenIconCollapse.classList.add('fa-chevron-down');
}
const toggleTokenCollapseBtn = document.getElementById('toggle-github-token-collapse');
if (toggleTokenCollapseBtn) {
const span = toggleTokenCollapseBtn.querySelector('span');
if (span) span.textContent = 'Expand';
// Ensure event listener is attached
if (window.attachGithubTokenCollapseHandler) {
window.attachGithubTokenCollapseHandler();
}
}
}
// Clear dismissal flag when token becomes valid
sessionStorage.removeItem('github-auth-warning-dismissed');
}
}
})
.catch(error => {
console.error('Error checking GitHub auth status:', error);
console.error('Error stack:', error.stack || 'No stack trace');
});
};
(function() {
'use strict';
if (_PLUGIN_DEBUG_EARLY) console.log('Plugin manager script starting...');
// Local variables for this instance
let installedPlugins = [];
window.currentPluginConfig = null;
let pluginStoreCache = null; // Cache for plugin store to speed up subsequent loads
let cacheTimestamp = null;
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
let onDemandStatusInterval = null;
let currentOnDemandPluginId = null;
let hasLoadedOnDemandStatus = false;
// Shared on-demand status store (mirrors Alpine store when available)
window.__onDemandStore = window.__onDemandStore || {
loading: true,
state: {},
service: {},
error: null,
lastUpdated: null
};
function ensureOnDemandStore() {
if (window.Alpine && typeof Alpine.store === 'function') {
if (!Alpine.store('onDemand')) {
Alpine.store('onDemand', {
loading: window.__onDemandStore.loading,
state: window.__onDemandStore.state,
service: window.__onDemandStore.service,
error: window.__onDemandStore.error,
lastUpdated: window.__onDemandStore.lastUpdated
});
}
const store = Alpine.store('onDemand');
window.__onDemandStore = store;
return store;
}
return window.__onDemandStore;
}
function markOnDemandLoading() {
const store = ensureOnDemandStore();
store.loading = true;
store.error = null;
}
function updateOnDemandSnapshot(store) {
if (!window.__onDemandStore) {
window.__onDemandStore = {};
}
window.__onDemandStore.loading = store.loading;
window.__onDemandStore.state = store.state;
window.__onDemandStore.service = store.service;
window.__onDemandStore.error = store.error;
window.__onDemandStore.lastUpdated = store.lastUpdated;
}
function updateOnDemandStore(data) {
const store = ensureOnDemandStore();
store.loading = false;
store.state = data?.state || {};
store.service = data?.service || {};
store.error = (data?.state?.status === 'error') ? (data.state.error || data.message || 'On-demand error') : null;
store.lastUpdated = Date.now();
updateOnDemandSnapshot(store);
document.dispatchEvent(new CustomEvent('onDemand:updated', {
detail: {
state: store.state,
service: store.service,
error: store.error,
lastUpdated: store.lastUpdated
}
}));
}
function setOnDemandError(message) {
const store = ensureOnDemandStore();
store.loading = false;
store.state = {};
store.service = {};
store.error = message || 'Failed to load on-demand status';
store.lastUpdated = Date.now();
updateOnDemandSnapshot(store);
document.dispatchEvent(new CustomEvent('onDemand:updated', {
detail: {
state: store.state,
service: store.service,
error: store.error,
lastUpdated: store.lastUpdated
}
}));
}
// Track initialization state
window.pluginManager = window.pluginManager || {};
window.pluginManager.initialized = false;
window.pluginManager.initializing = false; // Track if initialization is in progress
// Initialize when DOM is ready or when HTMX loads content
window.initPluginsPage = function() {
// Prevent duplicate initialization
if (window.pluginManager.initialized || window.pluginManager.initializing) {
console.log('Plugin page already initialized or initializing, skipping...');
return;
}
// Check if required elements exist
const installedGrid = document.getElementById('installed-plugins-grid');
if (!installedGrid) {
console.log('Plugin elements not ready yet');
return false;
}
window.pluginManager.initializing = true;
window.__pluginDomReady = true;
// Check GitHub auth status immediately (don't wait for full initialization)
// This can run in parallel with other initialization
if (window.checkGitHubAuthStatus) {
console.log('[INIT] Checking GitHub auth status immediately...');
window.checkGitHubAuthStatus();
}
// If we fetched data before the DOM existed, render it now
if (window.__pendingInstalledPlugins) {
console.log('[RENDER] Applying pending installed plugins data');
renderInstalledPlugins(window.__pendingInstalledPlugins);
window.__pendingInstalledPlugins = null;
}
if (window.__pendingStorePlugins) {
console.log('[RENDER] Applying pending plugin store data');
renderPluginStore(window.__pendingStorePlugins);
window.__pendingStorePlugins = null;
}
initializePlugins();
// Event listeners (remove old ones first to prevent duplicates)
const refreshBtn = document.getElementById('refresh-plugins-btn');
const updateAllBtn = document.getElementById('update-all-plugins-btn');
const restartBtn = document.getElementById('restart-display-btn');
const searchBtn = document.getElementById('search-plugins-btn');
const closeBtn = document.getElementById('close-plugin-config');
const closeOnDemandModalBtn = document.getElementById('close-on-demand-modal');
const cancelOnDemandBtn = document.getElementById('cancel-on-demand');
const onDemandForm = document.getElementById('on-demand-form');
const onDemandModal = document.getElementById('on-demand-modal');
if (refreshBtn) {
refreshBtn.replaceWith(refreshBtn.cloneNode(true));
document.getElementById('refresh-plugins-btn').addEventListener('click', refreshPlugins);
}
if (updateAllBtn) {
updateAllBtn.replaceWith(updateAllBtn.cloneNode(true));
document.getElementById('update-all-plugins-btn').addEventListener('click', runUpdateAllPlugins);
}
if (restartBtn) {
restartBtn.replaceWith(restartBtn.cloneNode(true));
document.getElementById('restart-display-btn').addEventListener('click', restartDisplay);
}
if (searchBtn) {
searchBtn.replaceWith(searchBtn.cloneNode(true));
document.getElementById('search-plugins-btn').addEventListener('click', searchPluginStore);
}
if (closeBtn) {
closeBtn.replaceWith(closeBtn.cloneNode(true));
document.getElementById('close-plugin-config').addEventListener('click', closePluginConfigModal);
// View toggle buttons
document.getElementById('view-toggle-form')?.addEventListener('click', () => switchPluginConfigView('form'));
document.getElementById('view-toggle-json')?.addEventListener('click', () => switchPluginConfigView('json'));
// Reset to defaults button
document.getElementById('reset-to-defaults-btn')?.addEventListener('click', resetPluginConfigToDefaults);
// JSON editor save button
document.getElementById('save-json-config-btn')?.addEventListener('click', saveConfigFromJsonEditor);
}
if (closeOnDemandModalBtn) {
closeOnDemandModalBtn.replaceWith(closeOnDemandModalBtn.cloneNode(true));
document.getElementById('close-on-demand-modal').addEventListener('click', closeOnDemandModal);
}
if (cancelOnDemandBtn) {
cancelOnDemandBtn.replaceWith(cancelOnDemandBtn.cloneNode(true));
document.getElementById('cancel-on-demand').addEventListener('click', closeOnDemandModal);
}
if (onDemandForm) {
onDemandForm.replaceWith(onDemandForm.cloneNode(true));
document.getElementById('on-demand-form').addEventListener('submit', submitOnDemandRequest);
}
if (onDemandModal) {
onDemandModal.onclick = closeOnDemandModalOnBackdrop;
}
loadOnDemandStatus(true);
startOnDemandStatusPolling();
window.pluginManager.initialized = true;
window.pluginManager.initializing = false;
return true;
}
// Consolidated initialization function
function initializePluginPageWhenReady() {
console.log('Checking for plugin elements...');
return window.initPluginsPage();
}
// Single initialization entry point
(function() {
console.log('Plugin manager script loaded, setting up initialization...');
let initTimer = null;
function attemptInit() {
// Clear any pending timer
if (initTimer) {
clearTimeout(initTimer);
initTimer = null;
}
// Try immediate initialization
if (initializePluginPageWhenReady()) {
console.log('Initialized immediately');
return;
}
}
// Strategy 1: Immediate check (for direct page loads)
if (document.readyState === 'complete' || document.readyState === 'interactive') {
// DOM is already ready, try immediately with a small delay to ensure scripts are loaded
initTimer = setTimeout(attemptInit, 50);
} else {
// Strategy 2: DOMContentLoaded (for direct page loads)
document.addEventListener('DOMContentLoaded', function() {
initTimer = setTimeout(attemptInit, 50);
});
}
// Strategy 3: HTMX afterSwap event (for HTMX-loaded content)
// This is the primary way plugins content is loaded
if (typeof htmx !== 'undefined') {
document.body.addEventListener('htmx:afterSwap', function(event) {
const target = event.detail.target;
// Check if plugins content was swapped in
if (target.id === 'plugins-content' ||
target.querySelector('#installed-plugins-grid') ||
document.getElementById('installed-plugins-grid')) {
console.log('HTMX swap detected for plugins, initializing...');
// Reset initialization flag to allow re-initialization after HTMX swap
window.pluginManager.initialized = false;
window.pluginManager.initializing = false;
initTimer = setTimeout(attemptInit, 100);
}
}, { once: false }); // Allow multiple swaps
}
})();
// Initialization guard to prevent multiple initializations
let pluginsInitialized = false;
function initializePlugins() {
console.log('[initializePlugins] Called, pluginsInitialized:', pluginsInitialized);
// Guard against multiple initializations
if (pluginsInitialized) {
console.log('[initializePlugins] Already initialized, skipping');
pluginLog('[INIT] Plugins already initialized, skipping');
return;
}
pluginsInitialized = true;
console.log('[initializePlugins] Starting initialization...');
pluginLog('[INIT] Initializing plugins...');
// Check GitHub authentication status
console.log('[INIT] Checking for checkGitHubAuthStatus function...', {
exists: typeof window.checkGitHubAuthStatus,
type: typeof window.checkGitHubAuthStatus
});
if (window.checkGitHubAuthStatus) {
console.log('[INIT] Calling checkGitHubAuthStatus...');
try {
window.checkGitHubAuthStatus();
} catch (error) {
console.error('[INIT] Error calling checkGitHubAuthStatus:', error);
}
} else {
console.warn('[INIT] checkGitHubAuthStatus not available yet');
}
// Load both installed plugins and plugin store
loadInstalledPlugins();
searchPluginStore(true); // Load plugin store with fresh metadata from GitHub
// Setup search functionality (with guard against duplicate listeners)
const searchInput = document.getElementById('plugin-search');
const categorySelect = document.getElementById('plugin-category');
if (searchInput && !searchInput._listenerSetup) {
searchInput._listenerSetup = true;
searchInput.addEventListener('input', debounce(searchPluginStore, 300));
}
if (categorySelect && !categorySelect._listenerSetup) {
categorySelect._listenerSetup = true;
categorySelect.addEventListener('change', searchPluginStore);
}
// Setup GitHub installation handlers
setupGitHubInstallHandlers();
// Setup collapsible section handlers
setupCollapsibleSections();
// Load saved repositories
loadSavedRepositories();
pluginLog('[INIT] Plugins initialized');
}
// Track in-flight requests to prevent duplicates
// ===== PLUGIN LOADING WITH REQUEST DEDUPLICATION & CACHING =====
// Prevents redundant API calls by caching results for a short time
const pluginLoadCache = {
promise: null, // Current in-flight request
data: null, // Cached plugin data
timestamp: 0, // When cache was last updated
TTL: 3000, // Cache valid for 3 seconds
isValid() {
return this.data && (Date.now() - this.timestamp < this.TTL);
},
invalidate() {
this.data = null;
this.timestamp = 0;
}
};
// Debug flag - set via localStorage.setItem('pluginDebug', 'true')
const PLUGIN_DEBUG = typeof localStorage !== 'undefined' && localStorage.getItem('pluginDebug') === 'true';
function pluginLog(...args) {
if (PLUGIN_DEBUG) console.log(...args);
}
function loadInstalledPlugins(forceRefresh = false) {
// Return cached data if valid and not forcing refresh
if (!forceRefresh && pluginLoadCache.isValid()) {
pluginLog('[CACHE] Returning cached plugin data');
// Update window.installedPlugins from cache
window.installedPlugins = pluginLoadCache.data;
// Dispatch event to notify Alpine component
document.dispatchEvent(new CustomEvent('pluginsUpdated', {
detail: { plugins: pluginLoadCache.data }
}));
pluginLog('[CACHE] Dispatched pluginsUpdated event from cache');
// Still render to ensure UI is updated
renderInstalledPlugins(pluginLoadCache.data);
return Promise.resolve(pluginLoadCache.data);
}
// If a request is already in progress, return the existing promise
if (pluginLoadCache.promise) {
pluginLog('[CACHE] Request in progress, returning existing promise');
return pluginLoadCache.promise;
}
pluginLog('[FETCH] Loading installed plugins...');
// Use PluginAPI if available, otherwise fall back to direct fetch
const fetchPromise = (window.PluginAPI && window.PluginAPI.getInstalledPlugins) ?
window.PluginAPI.getInstalledPlugins().then(plugins => {
const pluginsArray = Array.isArray(plugins) ? plugins : [];
return { status: 'success', data: { plugins: pluginsArray } };
}) :
fetch('/api/v3/plugins/installed').then(response => response.json());
// Store the promise
pluginLoadCache.promise = fetchPromise
.then(data => {
if (data.status === 'success') {
const pluginsData = data.data?.plugins;
installedPlugins = Array.isArray(pluginsData) ? pluginsData : [];
// Update cache
pluginLoadCache.data = installedPlugins;
pluginLoadCache.timestamp = Date.now();
// Always update window.installedPlugins to ensure Alpine component can detect changes
const currentPlugins = Array.isArray(window.installedPlugins) ? window.installedPlugins : [];
const currentIds = currentPlugins.map(p => p.id).sort().join(',');
const newIds = installedPlugins.map(p => p.id).sort().join(',');
const pluginsChanged = currentIds !== newIds;
if (pluginsChanged) {
window.installedPlugins = installedPlugins;
} else {
// Even if IDs haven't changed, update the array reference to trigger Alpine reactivity
window.installedPlugins = installedPlugins;
}
// Dispatch event to notify Alpine component to update tabs
document.dispatchEvent(new CustomEvent('pluginsUpdated', {
detail: { plugins: installedPlugins }
}));
pluginLog('[FETCH] Dispatched pluginsUpdated event with', installedPlugins.length, 'plugins');
pluginLog('[FETCH] Loaded', installedPlugins.length, 'plugins');
// Debug logging only when enabled
if (PLUGIN_DEBUG) {
installedPlugins.forEach(plugin => {
console.log(`[DEBUG] Plugin ${plugin.id}: enabled=${plugin.enabled}`);
});
}
renderInstalledPlugins(installedPlugins);
// Update count
const countEl = document.getElementById('installed-count');
if (countEl) {
countEl.textContent = installedPlugins.length + ' installed';
}
return installedPlugins;
} else {
const errorMsg = 'Failed to load installed plugins: ' + data.message;
showError(errorMsg);
throw new Error(errorMsg);
}
})
.catch(error => {
console.error('Error loading installed plugins:', error);
let errorMsg = 'Error loading plugins: ' + error.message;
if (error.message && error.message.includes('Failed to Fetch')) {
errorMsg += ' - Please try refreshing your browser.';
}
showError(errorMsg);
throw error;
})
.finally(() => {
// Clear the in-flight promise (but keep cache data)
pluginLoadCache.promise = null;
});
return pluginLoadCache.promise;
}
// Force refresh function for explicit user actions
function refreshInstalledPlugins() {
pluginLoadCache.invalidate();
return loadInstalledPlugins(true);
}
// Expose loadInstalledPlugins on window.pluginManager for Alpine.js integration
window.pluginManager.loadInstalledPlugins = loadInstalledPlugins;
// Note: searchPluginStore will be exposed after its definition (see below)
function renderInstalledPlugins(plugins) {
const container = document.getElementById('installed-plugins-grid');
if (!container) {
console.warn('[RENDER] installed-plugins-grid not yet available, deferring render until plugin tab loads');
window.__pendingInstalledPlugins = plugins;
return;
}
// Always update window.installedPlugins to ensure Alpine component reactivity
window.installedPlugins = plugins;
pluginLog('[RENDER] Set window.installedPlugins to:', plugins.length, 'plugins');
// Dispatch event to notify Alpine component to update tabs
document.dispatchEvent(new CustomEvent('pluginsUpdated', {
detail: { plugins: plugins }
}));
pluginLog('[RENDER] Dispatched pluginsUpdated event');
// Also try direct Alpine update as fallback
if (window.Alpine && document.querySelector('[x-data="app()"]')) {
const appElement = document.querySelector('[x-data="app()"]');
if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
appElement._x_dataStack[0].installedPlugins = plugins;
if (typeof appElement._x_dataStack[0].updatePluginTabs === 'function') {
appElement._x_dataStack[0].updatePluginTabs();
pluginLog('[RENDER] Triggered Alpine.js to update plugin tabs directly');
}
}
}
if (plugins.length === 0) {
container.innerHTML = `
No plugins installed
Install plugins from the store to get started
`;
return;
}
// Helper function to escape attributes for use in HTML
const escapeAttr = (text) => {
return (text || '').replace(/'/g, "\\'").replace(/"/g, '"');
};
// Helper function to escape for JavaScript strings (use JSON.stringify for proper escaping)
// JSON.stringify returns a quoted string, so we can use it directly in JavaScript
const escapeJs = (text) => {
return JSON.stringify(text || '');
};
container.innerHTML = plugins.map(plugin => {
// Convert enabled to boolean for consistent rendering
const enabledBool = Boolean(plugin.enabled);
// Debug: Log enabled status during rendering (only when debug enabled)
if (PLUGIN_DEBUG) {
console.log(`[DEBUG RENDER] Plugin ${plugin.id}: enabled=${enabledBool}`);
}
// Escape plugin ID for use in HTML attributes and JavaScript
const escapedPluginId = escapeAttr(plugin.id);
return `
`;
}).join('');
// Set up event delegation for plugin action buttons (fallback if onclick doesn't work)
// Only set up once per container to avoid redundant listeners
const setupEventDelegation = () => {
const container = document.getElementById('installed-plugins-grid');
if (!container) {
pluginLog('[RENDER] installed-plugins-grid not found for event delegation');
return;
}
// Skip if already set up (guard against multiple calls)
if (container._eventDelegationSetup) {
pluginLog('[RENDER] Event delegation already set up, skipping');
return;
}
// Mark as set up
container._eventDelegationSetup = true;
container._pluginActionHandler = handlePluginAction;
// Add listeners for both click and change events
container.addEventListener('click', handlePluginAction, true);
container.addEventListener('change', handlePluginAction, true);
pluginLog('[RENDER] Event delegation set up for installed-plugins-grid');
};
// Set up immediately
setupEventDelegation();
// Also retry after a short delay to ensure it's attached even if container wasn't ready
setTimeout(setupEventDelegation, 100);
}
function handlePluginAction(event) {
// Check for both button and input (for toggle)
const button = event.target.closest('button[data-action]') || event.target.closest('input[data-action]');
if (!button) return;
const action = button.getAttribute('data-action');
const pluginId = button.getAttribute('data-plugin-id');
if (!pluginId) return;
event.preventDefault();
event.stopPropagation();
console.log('[EVENT DELEGATION] Plugin action:', action, 'Plugin ID:', pluginId);
// Helper function to wait for a function to be available
const waitForFunction = (funcName, maxAttempts = 10, delay = 50) => {
return new Promise((resolve, reject) => {
let attempts = 0;
const check = () => {
attempts++;
if (window[funcName] && typeof window[funcName] === 'function') {
resolve(window[funcName]);
} else if (attempts >= maxAttempts) {
reject(new Error(`${funcName} not available after ${maxAttempts} attempts`));
} else {
setTimeout(check, delay);
}
};
check();
});
};
switch(action) {
case 'toggle':
// Get the current enabled state from plugin data (source of truth)
// rather than from the checkbox DOM which might be out of sync
const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
// Special handling: If plugin data isn't found or is stale, fallback to DOM but be careful
// If the user clicked the checkbox, the 'checked' property has *already* toggled in the DOM
// (even though we preventDefault later, sometimes it's too late for the property read)
// However, we used preventDefault() in the global handler, so the checkbox state *should* be reliable if we didn't touch it.
// BUT: The issue is that 'currentEnabled' calculation might be wrong if window.installedPlugins is outdated.
// If the user toggles ON, enabled becomes true. If they click again, we want enabled=false.
// Let's try a simpler approach: Use the checkbox state as the source of truth for the *desired* state
// Since we preventDefault(), the checkbox state reflects the *old* state (before the click)
// wait... if we preventDefault() on 'click', the checkbox does NOT change visually or internally.
// So button.checked is the OLD state.
// We want the NEW state to be !button.checked.
let currentEnabled;
if (plugin) {
currentEnabled = Boolean(plugin.enabled);
} else if (button.type === 'checkbox') {
currentEnabled = button.checked;
} else {
currentEnabled = false;
}
// Toggle the state - we want the opposite of current state
const isChecked = !currentEnabled;
console.log('[DEBUG toggle] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked, 'Event type:', event.type);
waitForFunction('togglePlugin', 10, 50)
.then(toggleFunc => {
toggleFunc(pluginId, isChecked);
})
.catch(error => {
console.error('[EVENT DELEGATION]', error.message);
if (typeof showNotification === 'function') {
showNotification('Toggle function not loaded. Please refresh the page.', 'error');
} else {
alert('Toggle function not loaded. Please refresh the page.');
}
});
break;
case 'configure':
waitForFunction('configurePlugin', 10, 50)
.then(configureFunc => {
configureFunc(pluginId);
})
.catch(error => {
console.error('[EVENT DELEGATION]', error.message);
if (typeof showNotification === 'function') {
showNotification('Configure function not loaded. Please refresh the page.', 'error');
} else {
alert('Configure function not loaded. Please refresh the page.');
}
});
break;
case 'update':
waitForFunction('updatePlugin', 10, 50)
.then(updateFunc => {
updateFunc(pluginId);
})
.catch(error => {
console.error('[EVENT DELEGATION]', error.message);
if (typeof showNotification === 'function') {
showNotification('Update function not loaded. Please refresh the page.', 'error');
} else {
alert('Update function not loaded. Please refresh the page.');
}
});
break;
case 'uninstall':
waitForFunction('uninstallPlugin', 10, 50)
.then(uninstallFunc => {
uninstallFunc(pluginId);
})
.catch(error => {
console.error('[EVENT DELEGATION]', error.message);
if (typeof showNotification === 'function') {
showNotification('Uninstall function not loaded. Please refresh the page.', 'error');
} else {
alert('Uninstall function not loaded. Please refresh the page.');
}
});
break;
}
}
function findInstalledPlugin(pluginId) {
const plugins = window.installedPlugins || installedPlugins || [];
if (!plugins || plugins.length === 0) {
return undefined;
}
return plugins.find(plugin => plugin.id === pluginId);
}
function resolvePluginDisplayName(pluginId) {
const plugin = findInstalledPlugin(pluginId);
if (!plugin) {
return pluginId;
}
return plugin.name || pluginId;
}
function loadOnDemandStatus(fromRefreshButton = false) {
if (!hasLoadedOnDemandStatus || fromRefreshButton) {
markOnDemandLoading();
}
return fetch('/api/v3/display/on-demand/status')
.then(response => response.json())
.then(result => {
if (result.status === 'success') {
updateOnDemandStore(result.data);
hasLoadedOnDemandStatus = true;
if (fromRefreshButton && typeof showNotification === 'function') {
showNotification('On-demand status refreshed', 'success');
}
} else {
const message = result.message || 'Failed to load on-demand status';
setOnDemandError(message);
if (typeof showNotification === 'function') {
showNotification(message, 'error');
}
}
})
.catch(error => {
console.error('Error fetching on-demand status:', error);
setOnDemandError(error?.message || 'Error fetching on-demand status');
if (typeof showNotification === 'function') {
showNotification('Error fetching on-demand status: ' + error.message, 'error');
}
});
}
function startOnDemandStatusPolling() {
if (onDemandStatusInterval) {
clearInterval(onDemandStatusInterval);
}
onDemandStatusInterval = setInterval(() => loadOnDemandStatus(false), 15000);
}
window.loadOnDemandStatus = loadOnDemandStatus;
function runUpdateAllPlugins() {
const button = document.getElementById('update-all-plugins-btn');
if (!button) {
if (typeof showNotification === 'function') {
showNotification('Unable to locate bulk update controls. Refresh the Plugin Manager tab.', 'error');
} else {
console.error('update-all-plugins-btn element not found');
}
return;
}
if (button.dataset.running === 'true') {
return;
}
if (typeof window.updateAllPlugins !== 'function') {
if (typeof showNotification === 'function') {
showNotification('Bulk update handler unavailable. Refresh the Plugin Manager tab.', 'error');
} else {
console.error('window.updateAllPlugins is not defined');
}
return;
}
const originalContent = button.innerHTML;
button.dataset.running = 'true';
button.disabled = true;
button.classList.add('opacity-60', 'cursor-wait');
button.innerHTML = 'Updating...';
Promise.resolve(window.updateAllPlugins())
.catch(error => {
console.error('Error updating all plugins:', error);
if (typeof showNotification === 'function') {
showNotification('Error updating all plugins: ' + error.message, 'error');
}
})
.finally(() => {
button.innerHTML = originalContent;
button.disabled = false;
button.classList.remove('opacity-60', 'cursor-wait');
button.dataset.running = 'false';
});
}
// Store the real implementation and replace the stub
window.__openOnDemandModalImpl = function(pluginId) {
const plugin = findInstalledPlugin(pluginId);
if (!plugin) {
if (typeof showNotification === 'function') {
showNotification(`Plugin ${pluginId} not found`, 'error');
}
return;
}
if (!plugin.enabled) {
if (typeof showNotification === 'function') {
showNotification('Enable the plugin before running it on-demand.', 'error');
}
return;
}
currentOnDemandPluginId = pluginId;
const modal = document.getElementById('on-demand-modal');
const modeSelect = document.getElementById('on-demand-mode');
const modeHint = document.getElementById('on-demand-mode-hint');
const durationInput = document.getElementById('on-demand-duration');
const pinnedCheckbox = document.getElementById('on-demand-pinned');
const startServiceCheckbox = document.getElementById('on-demand-start-service');
const modalTitle = document.getElementById('on-demand-modal-title');
if (!modal || !modeSelect || !modeHint || !durationInput || !pinnedCheckbox || !startServiceCheckbox || !modalTitle) {
console.error('On-demand modal elements not found');
return;
}
modalTitle.textContent = `Run ${resolvePluginDisplayName(pluginId)} On-Demand`;
modeSelect.innerHTML = '';
const displayModes = Array.isArray(plugin.display_modes) && plugin.display_modes.length > 0
? plugin.display_modes
: [pluginId];
displayModes.forEach(mode => {
const option = document.createElement('option');
option.value = mode;
option.textContent = mode;
modeSelect.appendChild(option);
});
if (displayModes.length > 1) {
modeHint.textContent = 'Select the display mode to show on the matrix.';
} else {
modeHint.textContent = 'This plugin exposes a single display mode.';
}
durationInput.value = '';
pinnedCheckbox.checked = false;
startServiceCheckbox.checked = true;
// Check service status and show warning if needed
fetch('/api/v3/display/on-demand/status')
.then(response => response.json())
.then(data => {
const serviceWarning = document.getElementById('on-demand-service-warning');
const serviceActive = data?.data?.service?.active || false;
if (serviceWarning) {
if (!serviceActive) {
serviceWarning.classList.remove('hidden');
// Auto-check the start service checkbox
startServiceCheckbox.checked = true;
} else {
serviceWarning.classList.add('hidden');
}
}
})
.catch(error => {
console.error('Error checking service status:', error);
});
modal.style.display = 'flex';
};
// Replace the stub with the real implementation
window.openOnDemandModal = window.__openOnDemandModalImpl;
function closeOnDemandModal() {
const modal = document.getElementById('on-demand-modal');
if (modal) {
modal.style.display = 'none';
}
currentOnDemandPluginId = null;
}
function submitOnDemandRequest(event) {
event.preventDefault();
if (!currentOnDemandPluginId) {
if (typeof showNotification === 'function') {
showNotification('Select a plugin before starting on-demand mode.', 'error');
}
return;
}
const form = document.getElementById('on-demand-form');
if (!form) {
return;
}
const formData = new FormData(form);
const mode = formData.get('mode');
const pinned = formData.get('pinned') === 'on';
const startService = formData.get('start_service') === 'on';
const durationValue = formData.get('duration');
const payload = {
plugin_id: currentOnDemandPluginId,
mode,
pinned,
start_service: startService
};
if (durationValue !== null && durationValue !== '') {
const parsedDuration = parseInt(durationValue, 10);
if (!Number.isNaN(parsedDuration) && parsedDuration >= 0) {
payload.duration = parsedDuration;
}
}
markOnDemandLoading();
fetch('/api/v3/display/on-demand/start', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
})
.then(response => response.json())
.then(result => {
if (result.status === 'success') {
if (typeof showNotification === 'function') {
const pluginName = resolvePluginDisplayName(currentOnDemandPluginId);
showNotification(`Requested on-demand mode for ${pluginName}`, 'success');
}
closeOnDemandModal();
setTimeout(() => loadOnDemandStatus(true), 700);
} else {
if (typeof showNotification === 'function') {
showNotification(result.message || 'Failed to start on-demand mode', 'error');
}
}
})
.catch(error => {
console.error('Error starting on-demand mode:', error);
if (typeof showNotification === 'function') {
showNotification('Error starting on-demand mode: ' + error.message, 'error');
}
});
}
function requestOnDemandStop({ stopService = false } = {}) {
markOnDemandLoading();
return fetch('/api/v3/display/on-demand/stop', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
stop_service: stopService
})
})
.then(response => response.json())
.then(result => {
if (result.status === 'success') {
if (typeof showNotification === 'function') {
const message = stopService
? 'On-demand mode stop requested and display service will be stopped.'
: 'On-demand mode stop requested';
showNotification(message, 'success');
}
setTimeout(() => loadOnDemandStatus(true), 700);
} else {
if (typeof showNotification === 'function') {
showNotification(result.message || 'Failed to stop on-demand mode', 'error');
}
}
})
.catch(error => {
console.error('Error stopping on-demand mode:', error);
if (typeof showNotification === 'function') {
showNotification('Error stopping on-demand mode: ' + error.message, 'error');
}
});
}
function stopOnDemand(event) {
const stopService = event && event.shiftKey;
requestOnDemandStop({ stopService });
}
// Store the real implementation and replace the stub
window.__requestOnDemandStopImpl = requestOnDemandStop;
window.requestOnDemandStop = requestOnDemandStop;
function closeOnDemandModalOnBackdrop(event) {
if (event.target === event.currentTarget) {
closeOnDemandModal();
}
}
// configurePlugin is already defined at the top of the script - no need to redefine
window.showPluginConfigModal = function(pluginId, config) {
const modal = document.getElementById('plugin-config-modal');
const title = document.getElementById('plugin-config-title');
const content = document.getElementById('plugin-config-content');
if (!modal) {
console.error('[DEBUG] Plugin config modal element not found');
if (typeof showError === 'function') {
showError('Plugin configuration modal not found. Please refresh the page.');
} else if (typeof showNotification === 'function') {
showNotification('Plugin configuration modal not found. Please refresh the page.', 'error');
}
return;
}
console.log('[DEBUG] ===== Opening plugin config modal =====');
console.log('[DEBUG] Plugin ID:', pluginId);
console.log('[DEBUG] Config:', config);
// Check if modal elements exist (already checked above, but double-check for safety)
if (!title) {
console.error('[DEBUG] Plugin config title element not found');
if (typeof showError === 'function') {
showError('Plugin configuration title element not found.');
} else if (typeof showNotification === 'function') {
showNotification('Plugin configuration title element not found.', 'error');
}
return;
}
if (!content) {
console.error('[DEBUG] Plugin config content element not found');
if (typeof showError === 'function') {
showError('Plugin configuration content element not found.');
} else if (typeof showNotification === 'function') {
showNotification('Plugin configuration content element not found.', 'error');
}
return;
}
// Initialize state
currentPluginConfigState.pluginId = pluginId;
currentPluginConfigState.config = config || {};
currentPluginConfigState.jsonEditor = null;
// Reset view to form
switchPluginConfigView('form');
// Hide validation errors
displayValidationErrors([]);
title.textContent = `Configure ${pluginId}`;
// Show loading state while form is generated
content.innerHTML = '
';
// Move modal to body to avoid z-index/overflow issues
if (modal.parentElement !== document.body) {
document.body.appendChild(modal);
}
// Remove any inline display:none that might be in the HTML FIRST
// This is critical because the HTML template has style="display: none;" inline
// We need to remove it before setting new styles
let currentStyle = modal.getAttribute('style') || '';
if (currentStyle.includes('display: none') || currentStyle.includes('display:none')) {
currentStyle = currentStyle.replace(/display:\s*none[;]?/gi, '').trim();
// Clean up any double semicolons or trailing semicolons
currentStyle = currentStyle.replace(/;;+/g, ';').replace(/^;|;$/g, '');
if (currentStyle) {
modal.setAttribute('style', currentStyle);
} else {
modal.removeAttribute('style');
}
}
// Show modal immediately - use important to override any other styles
// Also ensure visibility, opacity, and z-index are set correctly
modal.style.setProperty('display', 'flex', 'important');
modal.style.setProperty('visibility', 'visible', 'important');
modal.style.setProperty('opacity', '1', 'important');
modal.style.setProperty('z-index', '9999', 'important');
modal.style.setProperty('position', 'fixed', 'important');
// Ensure modal content is also visible
const modalContent = modal.querySelector('.modal-content');
if (modalContent) {
modalContent.style.setProperty('display', 'block', 'important');
modalContent.style.setProperty('visibility', 'visible', 'important');
modalContent.style.setProperty('opacity', '1', 'important');
}
console.log('[DEBUG] Modal display set to flex');
console.log('[DEBUG] Modal computed style:', window.getComputedStyle(modal).display);
console.log('[DEBUG] Modal z-index:', window.getComputedStyle(modal).zIndex);
console.log('[DEBUG] Modal visibility:', window.getComputedStyle(modal).visibility);
console.log('[DEBUG] Modal opacity:', window.getComputedStyle(modal).opacity);
console.log('[DEBUG] Modal in DOM:', document.body.contains(modal));
console.log('[DEBUG] Modal parent:', modal.parentElement?.tagName);
console.log('[DEBUG] Modal rect:', modal.getBoundingClientRect());
// Load schema for validation
fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`)
.then(r => r.json())
.then(schemaData => {
if (schemaData.status === 'success' && schemaData.data?.schema) {
currentPluginConfigState.schema = schemaData.data.schema;
}
})
.catch(err => console.warn('Could not load schema:', err));
// Generate form asynchronously
generatePluginConfigForm(pluginId, config)
.then(formHtml => {
console.log('[DEBUG] Form generated, setting content. HTML length:', formHtml.length);
content.innerHTML = formHtml;
// Attach form submit handler after form is inserted
const form = document.getElementById('plugin-config-form');
if (form) {
form.addEventListener('submit', handlePluginConfigSubmit);
console.log('Form submit handler attached');
}
})
.catch(error => {
console.error('Error generating config form:', error);
content.innerHTML = '
Error loading configuration form
';
});
}
// Helper function to get the full property object from schema
function getSchemaProperty(schema, path) {
if (!schema || !schema.properties) return null;
const parts = path.split('.');
let current = schema.properties;
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
if (current && current[part]) {
if (i === parts.length - 1) {
// Last part - return the property
return current[part];
} else if (current[part].properties) {
// Navigate into nested object
current = current[part].properties;
} else {
return null;
}
} else {
return null;
}
}
return null;
}
// Helper function to find property type in nested schema using dot notation
function getSchemaPropertyType(schema, path) {
const prop = getSchemaProperty(schema, path);
return prop; // Return the full property object (was returning just type, but callers expect object)
}
// Helper function to convert dot notation to nested object
function dotToNested(obj) {
const result = {};
for (const key in obj) {
const parts = key.split('.');
let current = result;
for (let i = 0; i < parts.length - 1; i++) {
if (!current[parts[i]]) {
current[parts[i]] = {};
}
current = current[parts[i]];
}
current[parts[parts.length - 1]] = obj[key];
}
return result;
}
// Helper function to collect all boolean fields from schema (including nested)
function collectBooleanFields(schema, prefix = '') {
const boolFields = [];
if (!schema || !schema.properties) return boolFields;
Object.entries(schema.properties).forEach(([key, prop]) => {
const fullKey = prefix ? `${prefix}.${key}` : key;
if (prop.type === 'boolean') {
boolFields.push(fullKey);
} else if (prop.type === 'object' && prop.properties) {
boolFields.push(...collectBooleanFields(prop, fullKey));
}
});
return boolFields;
}
function handlePluginConfigSubmit(e) {
e.preventDefault();
console.log('Form submitted');
if (!currentPluginConfig) {
showNotification('Plugin configuration not loaded', 'error');
return;
}
const pluginId = currentPluginConfig.pluginId;
const schema = currentPluginConfig.schema;
const form = e.target;
// Fix invalid hidden fields before submission
// This prevents "invalid form control is not focusable" errors
const allInputs = form.querySelectorAll('input[type="number"]');
allInputs.forEach(input => {
const min = parseFloat(input.getAttribute('min'));
const max = parseFloat(input.getAttribute('max'));
const value = parseFloat(input.value);
if (!isNaN(value)) {
if (!isNaN(min) && value < min) {
input.value = min;
} else if (!isNaN(max) && value > max) {
input.value = max;
}
}
});
const formData = new FormData(form);
const flatConfig = {};
console.log('Schema loaded:', schema ? 'Yes' : 'No');
// Process form data with type conversion (using dot notation for nested fields)
for (const [key, value] of formData.entries()) {
// Check if this is a patternProperties hidden input (contains JSON data)
if (key.endsWith('_data') || key.includes('_data')) {
try {
const baseKey = key.replace(/_data$/, '');
const jsonValue = JSON.parse(value);
if (typeof jsonValue === 'object' && !Array.isArray(jsonValue)) {
flatConfig[baseKey] = jsonValue;
console.log(`PatternProperties field ${baseKey}: parsed JSON object`, jsonValue);
continue; // Skip normal processing for patternProperties
}
} catch (e) {
// Not valid JSON, continue with normal processing
}
}
// Skip key_value pair inputs (they're handled by the hidden _data input)
if (key.includes('[key_') || key.includes('[value_')) {
continue;
}
// Try to get schema property - handle both dot notation and underscore notation
let propSchema = getSchemaPropertyType(schema, key);
let actualKey = key;
let actualValue = value;
// If not found with dots, try converting underscores to dots (for nested fields)
if (!propSchema && key.includes('_')) {
const dotKey = key.replace(/_/g, '.');
propSchema = getSchemaPropertyType(schema, dotKey);
if (propSchema) {
// Use the dot notation key for consistency
actualKey = dotKey;
actualValue = value;
}
}
if (propSchema) {
const propType = propSchema.type;
if (propType === 'array') {
// Check if this is a file upload widget (JSON array)
if (propSchema['x-widget'] === 'file-upload') {
// Try to parse as JSON first (for file uploads)
try {
// Handle HTML entity encoding (from hidden input)
let decodedValue = actualValue;
if (typeof actualValue === 'string') {
// Decode HTML entities if present
const tempDiv = document.createElement('div');
tempDiv.innerHTML = actualValue;
decodedValue = tempDiv.textContent || tempDiv.innerText || actualValue;
}
const jsonValue = JSON.parse(decodedValue);
if (Array.isArray(jsonValue)) {
flatConfig[actualKey] = jsonValue;
console.log(`File upload array field ${actualKey}: parsed JSON array with ${jsonValue.length} items`);
} else {
// Fallback to comma-separated
const arrayValue = decodedValue ? decodedValue.split(',').map(v => v.trim()).filter(v => v) : [];
flatConfig[actualKey] = arrayValue;
}
} catch (e) {
// Not JSON, use comma-separated
const arrayValue = actualValue ? actualValue.split(',').map(v => v.trim()).filter(v => v) : [];
flatConfig[actualKey] = arrayValue;
console.log(`Array field ${actualKey}: "${actualValue}" -> `, arrayValue);
}
} else {
// Regular array: convert comma-separated string to array
const arrayValue = actualValue ? actualValue.split(',').map(v => v.trim()).filter(v => v) : [];
flatConfig[actualKey] = arrayValue;
console.log(`Array field ${actualKey}: "${actualValue}" -> `, arrayValue);
}
} else if (propType === 'integer') {
flatConfig[actualKey] = parseInt(actualValue, 10);
} else if (propType === 'number') {
flatConfig[actualKey] = parseFloat(actualValue);
} else if (propType === 'boolean') {
const formElement = form.elements[actualKey] || form.elements[key];
flatConfig[actualKey] = formElement ? formElement.checked : (actualValue === 'true' || actualValue === true);
} else {
flatConfig[actualKey] = actualValue;
}
} else {
// No schema, try to infer type
// Check if value looks like a JSON string (starts with [ or {)
if (typeof actualValue === 'string' && (actualValue.trim().startsWith('[') || actualValue.trim().startsWith('{'))) {
try {
// Handle HTML entity encoding
let decodedValue = actualValue;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = actualValue;
decodedValue = tempDiv.textContent || tempDiv.innerText || actualValue;
const parsed = JSON.parse(decodedValue);
flatConfig[actualKey] = parsed;
console.log(`No schema for ${actualKey}, but parsed as JSON:`, parsed);
} catch (e) {
// Not valid JSON, save as string
flatConfig[actualKey] = actualValue;
}
} else {
const formElement = form.elements[actualKey] || form.elements[key];
if (formElement && formElement.type === 'checkbox') {
flatConfig[actualKey] = formElement.checked;
} else {
flatConfig[actualKey] = actualValue;
}
}
}
}
// Handle unchecked checkboxes (not in FormData) - including nested ones
if (schema && schema.properties) {
const allBoolFields = collectBooleanFields(schema);
allBoolFields.forEach(key => {
if (!(key in flatConfig)) {
flatConfig[key] = false;
}
});
}
// Convert dot notation to nested object
const config = dotToNested(flatConfig);
console.log('Flat config:', flatConfig);
console.log('Nested config to save:', config);
// Save the configuration
fetch('/api/v3/plugins/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
plugin_id: pluginId,
config: config
})
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// Hide validation errors on success
displayValidationErrors([]);
showNotification('Configuration saved successfully', 'success');
closePluginConfigModal();
loadInstalledPlugins(); // Refresh to show updated config
} else {
// Display validation errors if present
if (data.validation_errors && Array.isArray(data.validation_errors)) {
displayValidationErrors(data.validation_errors);
}
showNotification('Error saving configuration: ' + data.message, 'error');
}
})
.catch(error => {
console.error('Error saving plugin config:', error);
showNotification('Error saving configuration: ' + error.message, 'error');
});
}
function generatePluginConfigForm(pluginId, config) {
console.log('[DEBUG] ===== Generating plugin config form =====');
console.log('[DEBUG] Plugin ID:', pluginId);
// Load plugin schema and actions for dynamic form generation
const installedPluginsPromise = (window.PluginAPI && window.PluginAPI.getInstalledPlugins) ?
window.PluginAPI.getInstalledPlugins().then(plugins => ({ status: 'success', data: { plugins: plugins } })) :
fetch(`/api/v3/plugins/installed`).then(r => r.json());
return Promise.all([
fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()),
installedPluginsPromise
])
.then(([schemaData, pluginsData]) => {
console.log('[DEBUG] Schema data received:', schemaData.status);
// Get plugin info including web_ui_actions
let pluginInfo = null;
if (pluginsData.status === 'success' && pluginsData.data && pluginsData.data.plugins) {
pluginInfo = pluginsData.data.plugins.find(p => p.id === pluginId);
console.log('[DEBUG] Plugin info found:', pluginInfo ? 'yes' : 'no');
if (pluginInfo) {
console.log('[DEBUG] Plugin info keys:', Object.keys(pluginInfo));
console.log('[DEBUG] web_ui_actions in pluginInfo:', 'web_ui_actions' in pluginInfo);
console.log('[DEBUG] web_ui_actions value:', pluginInfo.web_ui_actions);
}
} else {
console.log('[DEBUG] pluginsData status:', pluginsData.status);
}
const webUiActions = pluginInfo ? (pluginInfo.web_ui_actions || []) : [];
console.log('[DEBUG] Final webUiActions:', webUiActions, 'length:', webUiActions.length);
if (schemaData.status === 'success' && schemaData.data.schema) {
console.log('[DEBUG] Schema has properties:', Object.keys(schemaData.data.schema.properties || {}));
// Store plugin ID, schema, and actions for form submission
currentPluginConfig = {
pluginId: pluginId,
schema: schemaData.data.schema,
webUiActions: webUiActions
};
// Also update state
currentPluginConfigState.schema = schemaData.data.schema;
console.log('[DEBUG] Calling generateFormFromSchema...');
return generateFormFromSchema(schemaData.data.schema, config, webUiActions);
} else {
// Fallback to simple form if no schema
currentPluginConfig = { pluginId: pluginId, schema: null, webUiActions: webUiActions };
return generateSimpleConfigForm(config, webUiActions);
}
})
.catch(error => {
console.error('Error loading schema:', error);
currentPluginConfig = { pluginId: pluginId, schema: null, webUiActions: [] };
return generateSimpleConfigForm(config, []);
});
}
// Helper to flatten nested config for form display (converts {nfl: {enabled: true}} to {'nfl.enabled': true})
function flattenConfig(obj, prefix = '') {
let result = {};
for (const key in obj) {
const value = obj[key];
const fullKey = prefix ? `${prefix}.${key}` : key;
if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
// Recursively flatten nested objects
Object.assign(result, flattenConfig(value, fullKey));
} else {
result[fullKey] = value;
}
}
return result;
}
// Generate field HTML for a single property (used recursively)
function generateFieldHtml(key, prop, value, prefix = '') {
const fullKey = prefix ? `${prefix}.${key}` : key;
const label = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
const description = prop.description || '';
let html = '';
// Debug logging for categories field
if (key === 'categories') {
console.log(`[DEBUG] Processing categories field:`, {
type: prop.type,
hasAdditionalProperties: !!(prop.additionalProperties),
additionalPropertiesType: prop.additionalProperties?.type,
hasProperties: !!(prop.properties),
allKeys: Object.keys(prop)
});
}
// Handle patternProperties objects (dynamic key-value pairs like custom_feeds, feed_logo_map)
if (prop.type === 'object' && prop.patternProperties && !prop.properties) {
const fieldId = fullKey.replace(/\./g, '_');
const currentValue = value || {};
const patternProp = Object.values(prop.patternProperties)[0]; // Get the pattern property schema
const valueType = patternProp.type || 'string';
const maxProperties = prop.maxProperties || 50;
const entries = Object.entries(currentValue);
html += `
`;
} else {
// Regular array input
console.log(`[DEBUG] ❌ NOT a file upload widget for ${fullKey}, using regular array input`);
// Handle null/undefined values - use default if available
let arrayValue = '';
if (value === null || value === undefined) {
arrayValue = Array.isArray(prop.default) ? prop.default.join(', ') : '';
} else if (Array.isArray(value)) {
arrayValue = value.join(', ');
} else {
arrayValue = '';
}
html += `
Enter values separated by commas
`;
}
} else if (prop.enum) {
html += ``;
} else if (prop['x-widget'] === 'custom-html') {
// Custom HTML widget - load HTML from plugin directory
const htmlFile = prop['x-html-file'];
const pluginId = currentPluginConfig?.pluginId || window.currentPluginConfig?.pluginId || '';
const fieldId = fullKey.replace(/\./g, '_');
console.log(`[Custom HTML Widget] Generating widget for ${fullKey}:`, {
htmlFile,
pluginId,
fieldId,
hasPluginId: !!pluginId
});
if (htmlFile && pluginId) {
html += `
Loading file manager...
`;
// Load HTML asynchronously
setTimeout(() => {
loadCustomHtmlWidget(fieldId, pluginId, htmlFile);
}, 100);
} else {
console.error(`[Custom HTML Widget] Missing configuration for ${fullKey}:`, {
htmlFile,
pluginId,
currentPluginConfig: currentPluginConfig?.pluginId,
windowPluginConfig: window.currentPluginConfig?.pluginId
});
html += `
Custom HTML widget configuration error: missing html-file or plugin-id
htmlFile: ${htmlFile || 'missing'}, pluginId: ${pluginId || 'missing'}
`;
}
} else if (prop.type === 'object') {
// Fallback for objects that don't match any special case - render as JSON textarea
console.warn(`[DEBUG] Object field ${fullKey} doesn't match any special handler, rendering as JSON textarea`);
const jsonValue = typeof value === 'object' && value !== null ? JSON.stringify(value, null, 2) : (value || '{}');
html += `
Edit as JSON object
`;
} else {
// Check if this is a secret field
const isSecret = prop['x-secret'] === true;
const inputType = isSecret ? 'password' : 'text';
const maxLength = prop.maxLength || '';
const maxLengthAttr = maxLength ? `maxlength="${maxLength}"` : '';
const secretClass = isSecret ? 'pr-10' : '';
html += `
`;
if (isSecret) {
html += `
`;
}
html += `
`;
}
html += `
`;
return html;
}
// Load custom HTML widget from plugin directory
async function loadCustomHtmlWidget(fieldId, pluginId, htmlFile) {
try {
const container = document.getElementById(`${fieldId}_custom_html`);
if (!container) {
console.warn(`[Custom HTML Widget] Container not found: ${fieldId}_custom_html`);
return;
}
// Fetch HTML from plugin static files endpoint
const response = await fetch(`/api/v3/plugins/${pluginId}/static/${htmlFile}`);
if (!response.ok) {
throw new Error(`Failed to load custom HTML: ${response.statusText}`);
}
const html = await response.text();
// Inject HTML into container
container.innerHTML = html;
// Execute any script tags in the loaded HTML
const scripts = container.querySelectorAll('script');
scripts.forEach(oldScript => {
const newScript = document.createElement('script');
Array.from(oldScript.attributes).forEach(attr => {
newScript.setAttribute(attr.name, attr.value);
});
newScript.appendChild(document.createTextNode(oldScript.innerHTML));
oldScript.parentNode.replaceChild(newScript, oldScript);
});
console.log(`[Custom HTML Widget] Loaded ${htmlFile} for plugin ${pluginId}`);
} catch (error) {
console.error(`[Custom HTML Widget] Error loading ${htmlFile} for plugin ${pluginId}:`, error);
const container = document.getElementById(`${fieldId}_custom_html`);
if (container) {
container.innerHTML = `
Failed to load custom HTML: ${error.message}
`;
}
}
}
function generateFormFromSchema(schema, config, webUiActions = []) {
console.log('[DEBUG] ===== generateFormFromSchema called =====');
console.log('[DEBUG] Schema properties:', Object.keys(schema.properties || {}));
console.log('[DEBUG] Web UI Actions:', webUiActions.length);
let formHtml = '
`;
return Promise.resolve(formHtml);
}
// Functions to handle patternProperties key-value pairs
window.addKeyValuePair = function(fieldId, fullKey, maxProperties) {
const pairsContainer = document.getElementById(fieldId + '_pairs');
if (!pairsContainer) return;
const currentPairs = pairsContainer.querySelectorAll('.key-value-pair');
if (currentPairs.length >= maxProperties) {
alert(`Maximum ${maxProperties} entries allowed`);
return;
}
const newIndex = currentPairs.length;
const valueType = 'string'; // Default to string, could be determined from schema
const pairHtml = `
`;
pairsContainer.insertAdjacentHTML('beforeend', pairHtml);
updateKeyValuePairData(fieldId, fullKey);
// Update add button state
const addButton = pairsContainer.nextElementSibling;
if (addButton && currentPairs.length + 1 >= maxProperties) {
addButton.disabled = true;
addButton.style.opacity = '0.5';
addButton.style.cursor = 'not-allowed';
}
};
window.removeKeyValuePair = function(fieldId, index) {
const pairsContainer = document.getElementById(fieldId + '_pairs');
if (!pairsContainer) return;
const pair = pairsContainer.querySelector(`.key-value-pair[data-index="${index}"]`);
if (pair) {
pair.remove();
// Re-index remaining pairs
const remainingPairs = pairsContainer.querySelectorAll('.key-value-pair');
remainingPairs.forEach((p, newIndex) => {
p.setAttribute('data-index', newIndex);
const keyInput = p.querySelector('[data-key-index]');
const valueInput = p.querySelector('[data-value-index]');
if (keyInput) {
keyInput.setAttribute('name', keyInput.getAttribute('name').replace(/\[key_\d+\]/, `[key_${newIndex}]`));
keyInput.setAttribute('data-key-index', newIndex);
keyInput.setAttribute('onchange', `updateKeyValuePairData('${fieldId}', '${keyInput.getAttribute('name').split('[')[0]}')`);
}
if (valueInput) {
valueInput.setAttribute('name', valueInput.getAttribute('name').replace(/\[value_\d+\]/, `[value_${newIndex}]`));
valueInput.setAttribute('data-value-index', newIndex);
valueInput.setAttribute('onchange', `updateKeyValuePairData('${fieldId}', '${valueInput.getAttribute('name').split('[')[0]}')`);
}
const removeButton = p.querySelector('button[onclick*="removeKeyValuePair"]');
if (removeButton) {
removeButton.setAttribute('onclick', `removeKeyValuePair('${fieldId}', ${newIndex})`);
}
});
const hiddenInput = pairsContainer.closest('.key-value-pairs-container').querySelector('input[type="hidden"]');
if (hiddenInput) {
const hiddenName = hiddenInput.getAttribute('name').replace(/_data$/, '');
updateKeyValuePairData(fieldId, hiddenName);
}
// Update add button state
const addButton = pairsContainer.nextElementSibling;
if (addButton) {
const maxProperties = parseInt(addButton.getAttribute('onclick').match(/\d+/)[0]);
if (remainingPairs.length < maxProperties) {
addButton.disabled = false;
addButton.style.opacity = '1';
addButton.style.cursor = 'pointer';
}
}
}
};
window.updateKeyValuePairData = function(fieldId, fullKey) {
const pairsContainer = document.getElementById(fieldId + '_pairs');
const hiddenInput = document.getElementById(fieldId + '_data');
if (!pairsContainer || !hiddenInput) return;
const pairs = {};
const keyInputs = pairsContainer.querySelectorAll('[data-key-index]');
const valueInputs = pairsContainer.querySelectorAll('[data-value-index]');
keyInputs.forEach((keyInput, idx) => {
const key = keyInput.value.trim();
const valueInput = Array.from(valueInputs).find(v => v.getAttribute('data-value-index') === keyInput.getAttribute('data-key-index'));
if (key && valueInput) {
const value = valueInput.value.trim();
if (value) {
pairs[key] = value;
}
}
});
hiddenInput.value = JSON.stringify(pairs);
};
// Function to toggle nested sections
window.toggleNestedSection = function(sectionId, event) {
// Prevent event bubbling if event is provided
if (event) {
event.stopPropagation();
event.preventDefault();
}
const content = document.getElementById(sectionId);
const icon = document.getElementById(sectionId + '-icon');
if (!content || !icon) return;
// Prevent multiple simultaneous toggles
if (content.dataset.toggling === 'true') {
return;
}
// Mark as toggling
content.dataset.toggling = 'true';
// Check current state before making changes
const hasCollapsed = content.classList.contains('collapsed');
const hasExpanded = content.classList.contains('expanded');
const displayStyle = content.style.display;
const computedDisplay = window.getComputedStyle(content).display;
// Check if content is currently collapsed - prioritize class over display style
const isCollapsed = hasCollapsed || (!hasExpanded && (displayStyle === 'none' || computedDisplay === 'none'));
if (isCollapsed) {
// Expand the section
content.classList.remove('collapsed');
content.classList.add('expanded');
content.style.display = 'block';
content.style.overflow = 'hidden'; // Prevent content jumping during animation
// CRITICAL FIX: Use setTimeout to ensure browser has time to layout the element
// When element goes from display:none to display:block, scrollHeight might be 0
// We need to wait for the browser to calculate the layout
setTimeout(() => {
// Force reflow to ensure transition works
void content.offsetHeight;
// Now measure the actual content height after layout
const scrollHeight = content.scrollHeight;
if (scrollHeight > 0) {
content.style.maxHeight = scrollHeight + 'px';
} else {
// Fallback: if scrollHeight is still 0, try measuring again after a brief delay
setTimeout(() => {
const retryHeight = content.scrollHeight;
content.style.maxHeight = retryHeight > 0 ? retryHeight + 'px' : '500px';
}, 10);
}
}, 10);
icon.classList.remove('fa-chevron-right');
icon.classList.add('fa-chevron-down');
// Allow parent section to show overflow when expanded
const sectionElement = content.closest('.nested-section');
if (sectionElement) {
sectionElement.style.overflow = 'visible';
}
// After animation completes, remove max-height constraint to allow natural expansion
// This allows parent sections to automatically expand
setTimeout(() => {
// Only set to none if still expanded (prevent race condition)
if (content.classList.contains('expanded') && !content.classList.contains('collapsed')) {
content.style.maxHeight = 'none';
content.style.overflow = '';
}
// Clear toggling flag
content.dataset.toggling = 'false';
}, 320); // Slightly longer than transition duration
// Scroll the expanded content into view after a short delay to allow animation
setTimeout(() => {
if (sectionElement) {
// Find the modal container
const modalContent = sectionElement.closest('.modal-content');
if (modalContent) {
// Scroll the section header into view within the modal
const headerButton = sectionElement.querySelector('button');
if (headerButton) {
headerButton.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
}
} else {
// If not in a modal, just scroll the section
sectionElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
}, 350); // Wait for animation to complete
} else {
// Collapse the section
content.classList.add('collapsed');
content.classList.remove('expanded');
content.style.overflow = 'hidden'; // Prevent content jumping during animation
// Set max-height to current scroll height first (required for smooth animation)
const currentHeight = content.scrollHeight;
content.style.maxHeight = currentHeight + 'px';
// Force reflow to apply the height
void content.offsetHeight;
// Then animate to 0
setTimeout(() => {
content.style.maxHeight = '0';
}, 10);
// Restore parent section overflow when collapsed
const sectionElement = content.closest('.nested-section');
if (sectionElement) {
sectionElement.style.overflow = 'hidden';
}
// Use setTimeout to set display:none after transition completes
setTimeout(() => {
if (content.classList.contains('collapsed')) {
content.style.display = 'none';
content.style.overflow = '';
}
// Clear toggling flag
content.dataset.toggling = 'false';
}, 320); // Match the CSS transition duration + small buffer
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-right');
}
}
function generateSimpleConfigForm(config, webUiActions = []) {
console.log('[DEBUG] generateSimpleConfigForm - webUiActions:', webUiActions, 'length:', webUiActions ? webUiActions.length : 0);
let actionsHtml = '';
if (webUiActions && webUiActions.length > 0) {
console.log('[DEBUG] Rendering', webUiActions.length, 'actions in simple form');
actionsHtml = `
`}