portal.js

// Anypoint API Portal - Interactive Features

// ============================================================================
// Helper Functions for Rendering
// ============================================================================

function renderJsonPath(jsonPath) {
    if (!jsonPath) return '';

    // Syntax highlighting for JSONPath
    var html = '<code class="jsonpath">';

    // Color different parts of the JSONPath
    var parts = jsonPath.split('.');
    var colored = parts.map(function(part, idx) {
        if (part.startsWith('$')) {
            return '<span class="jsonpath-root">' + escapeHtml(part) + '</span>';
        } else if (part.includes('[')) {
            // Handle array notation
            var match = part.match(/^([^\[]+)(\[.+\])$/);
            if (match) {
                return '<span class="jsonpath-field">' + escapeHtml(match[1]) + '</span>' +
                       '<span class="jsonpath-bracket">' + escapeHtml(match[2]) + '</span>';
            }
            return '<span class="jsonpath-field">' + escapeHtml(part) + '</span>';
        } else if (part === '*') {
            return '<span class="jsonpath-wildcard">' + escapeHtml(part) + '</span>';
        } else {
            return '<span class="jsonpath-field">' + escapeHtml(part) + '</span>';
        }
    });

    html += colored.join('<span class="jsonpath-dot">.</span>');
    html += '</code>';

    return html;
}

/**
 * Build a [method] [serverUrl + path] URL bar as an HTML string.
 * Used in x-origin modals, workflow steps, and anywhere operation info is shown.
 * @param {string} method - HTTP method (GET, POST, etc.)
 * @param {string} serverUrl - Resolved server base URL
 * @param {string} path - Operation path template
 * @param {string} [link] - Optional href to link the whole bar to an operation detail page
 */
function buildUrlBarHtml(method, serverUrl, path, link) {
    var methodClass = method.toLowerCase();
    var html = '<div class="operation-url-bar-inline">';
    if (link) html += '<a href="' + escapeHtml(link) + '" class="operation-url-bar-link">';
    html += '<span class="method method-' + methodClass + '">' + escapeHtml(method) + '</span>';
    html += '<code class="url-bar-text">';
    html += '<span class="url-server-part">' + escapeHtml(serverUrl) + '</span>';
    html += '<span class="url-path-part">' + escapeHtml(path) + '</span>';
    html += '</code>';
    if (link) html += '</a>';
    html += '</div>';
    return html;
}

// ============================================================================
// X-Origin Modal and Interactive Fetching
// ============================================================================

// Stack of x-origin modals for nested pickers
var xOriginModalStack = [];

function openXOriginModal(opId, paramName, location) {
    var inputId = 'param-' + opId + '-' + paramName;
    var input = document.getElementById(inputId);
    if (!input) {
        console.error('X-Origin modal: Could not find input element with ID:', inputId);
        return;
    }

    var originsJson = input.getAttribute('data-x-origins');
    if (!originsJson) {
        console.error('X-Origin modal: No data-x-origins attribute found on input:', inputId);
        return;
    }

    var origins = [];
    try {
        // Try Base64 decoding first (new format)
        if (originsJson.indexOf('[') !== 0 && originsJson.indexOf('{') !== 0) {
            originsJson = atob(originsJson);
        }
        origins = JSON.parse(originsJson);
    } catch (e) {
        console.error('Failed to parse x-origins:', e);
        console.error('Origins JSON:', originsJson);
        return;
    }

    // Hide current modal if one is open (nested modal)
    var modal = document.getElementById('xorigin-modal');
    if (modal && modal.style.display === 'flex') {
        modal.style.display = 'none';
    }

    // Push new modal context to stack
    xOriginModalStack.push({ opId: opId, paramName: paramName, location: location, origins: origins });

    var modal = document.getElementById('xorigin-modal');
    var title = document.getElementById('xorigin-modal-title');
    var body = document.getElementById('xorigin-modal-body');

    if (!modal || !title || !body) {
        console.error('X-Origin modal: Modal elements not found', { modal: !!modal, title: !!title, body: !!body });
        return;
    }

    title.textContent = 'Select a value for: ' + paramName;

    // Get operation lookup for parameter details
    var opLookup = window.__OP_LOOKUP__ || {};

    // Load environment variables to pre-fill form
    var envVars = loadEnvVars();
    var envVarsMap = {};
    envVars.forEach(function(v) {
        envVarsMap[v.name] = v.value;
    });

    // Build source selector dropdown (no execute button here - it's in the panel)
    var html = '<div class="xorigin-selector-container">';
    html += '<select id="xorigin-source-selector" class="xorigin-source-select" onchange="switchXOriginSource()">';

    origins.forEach(function(origin, idx) {
        var apiSlug = (origin.api || '').replace('urn:api:', '');
        var operationId = origin.operation || '';
        var name = origin.name;
        var technicalRef = apiSlug + '#' + operationId;

        var optionLabel = name ? (name + ' - ' + technicalRef) : technicalRef;
        html += '<option value="' + idx + '">' + escapeHtml(optionLabel) + '</option>';
    });

    html += '</select>';
    html += '</div>';

    // Build source containers (hidden by default, first one visible)
    origins.forEach(function(origin, idx) {
        var apiSlug = (origin.api || '').replace('urn:api:', '');
        var operationId = origin.operation || '';

        html += '<div class="xorigin-source" data-source-idx="' + idx + '" style="display:' + (idx === 0 ? 'block' : 'none') + '">';

        // Get operation details for this source
        var apiEntry = opLookup[apiSlug];
        var opMeta = apiEntry ? apiEntry.ops[operationId] : null;

        // Show operation URL bar and parameters
        if (opMeta) {
            var xoriginServerUrl = getServerForApi(apiSlug).replace(/\/$/, '');

            // Panel header matching try-panel-header structure (title and Send in same row)
            var linkPrefix = window.__API_LINK_PREFIX__ || '';
            html += '<div class="try-panel-header">';

            // Left side: operationId as link (with xpath info if available)
            html += '<div class="xorigin-title-section">';
            html += '<a href="' + escapeHtml(linkPrefix + apiSlug + '.html#op-' + operationId) + '" target="_blank" class="xorigin-operation-link">';
            html += '<h4>' + escapeHtml(apiSlug) + '.' + escapeHtml(operationId) + '</h4>';
            html += '</a>';
            // Xpath expressions inline
            if (origin.values || origin.labels) {
                html += '<span class="xorigin-xpath-info">';
                if (origin.values) {
                    html += '<span class="xorigin-path-inline">';
                    html += '<span class="xorigin-path-label">values:</span>';
                    html += '<code class="xorigin-path-value">' + escapeHtml(origin.values) + '</code>';
                    html += '</span>';
                }
                if (origin.labels) {
                    html += '<span class="xorigin-path-inline">';
                    html += '<span class="xorigin-path-label">labels:</span>';
                    html += '<code class="xorigin-path-value">' + escapeHtml(origin.labels) + '</code>';
                    html += '</span>';
                }
                html += '</span>';
            }
            html += '</div>';

            // Right side: actions (spinner + send button + dropdown)
            html += '<div class="try-header-actions">';
            html += '<span class="try-spinner" id="spinner-xorigin-' + idx + '" style="display:none">Sending...</span>';
            html += '<button class="btn-send" onclick="executeXOriginSource(' + idx + ', this)">';
            html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';
            html += '<span>Send</span>';
            html += '</button>';
            html += '<button class="btn-copy-curl" onclick="copyCurlCommand(\'xorigin-' + idx + '\', this)">';
            html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
            html += '<span>Copy cURL</span>';
            html += '</button>';
            html += '</div>';
            html += '</div>';

            // Operation URL bar (below header)
            html += '<div class="operation-url-bar-container">';
            html += buildUrlBarHtml(opMeta.method, xoriginServerUrl, opMeta.path, null);
            html += '</div>';

            // Use shared panel renderer for two-column layout (no execute button - it's in header)
            var xoriginOpId = 'xorigin-' + idx;
            html += renderOperationPanel(xoriginOpId, opMeta, {
                yamlInputs: envVarsMap,
                enableVariableRefs: false,
                slug: '',
                contextType: 'xorigin',
                showExecuteButton: false  // Button is in header now
            });
            // Extracted values will be shown in the "Extracted Values" tab of the response section
        }

        html += '</div>';
    });

    body.innerHTML = html;
    modal.style.display = 'flex';

    // Initialize ACE editors for request bodies
    initCodeMirrorEditors();

    // Focus trap: focus the first focusable element and store previous focus
    modal._previousFocus = document.activeElement;
    var firstFocusable = modal.querySelector('button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    if (firstFocusable) firstFocusable.focus();
}

function closeXOriginModal() {
    // Pop current modal from stack
    xOriginModalStack.pop();

    var modal = document.getElementById('xorigin-modal');

    // If there's a parent modal in the stack, restore it
    if (xOriginModalStack.length > 0) {
        var parentModal = xOriginModalStack[xOriginModalStack.length - 1];
        // Reopen the parent modal
        reopenXOriginModal(parentModal);
    } else {
        // No parent modal, close completely
        modal.style.display = 'none';
        // Restore focus to the element that opened the modal
        if (modal._previousFocus) modal._previousFocus.focus();
    }
}

function reopenXOriginModal(modalContext) {
    var modal = document.getElementById('xorigin-modal');
    var title = document.getElementById('xorigin-modal-title');
    var body = document.getElementById('xorigin-modal-body');

    if (!modal || !title || !body) {
        console.error('X-Origin modal: Modal elements not found');
        return;
    }

    var opId = modalContext.opId;
    var paramName = modalContext.paramName;
    var origins = modalContext.origins;

    title.textContent = 'Select a value for: ' + paramName;

    // Get operation lookup for parameter details
    var opLookup = window.__OP_LOOKUP__ || {};

    // Load environment variables to pre-fill form
    var envVars = loadEnvVars();
    var envVarsMap = {};
    envVars.forEach(function(v) {
        envVarsMap[v.name] = v.value;
    });

    // Build source selector dropdown
    var html = '<div class="xorigin-selector-container">';
    html += '<select id="xorigin-source-selector" class="xorigin-source-select" onchange="switchXOriginSource()">';

    origins.forEach(function(origin, idx) {
        var apiSlug = (origin.api || '').replace('urn:api:', '');
        var operationId = origin.operation || '';
        var name = origin.name;
        var technicalRef = apiSlug + '#' + operationId;

        var optionLabel = name ? (name + ' - ' + technicalRef) : technicalRef;
        html += '<option value="' + idx + '">' + escapeHtml(optionLabel) + '</option>';
    });

    html += '</select>';
    html += '</div>';

    // Build source containers
    origins.forEach(function(origin, idx) {
        var apiSlug = (origin.api || '').replace('urn:api:', '');
        var operationId = origin.operation || '';

        html += '<div class="xorigin-source" data-source-idx="' + idx + '" style="display:' + (idx === 0 ? 'block' : 'none') + '">';

        var apiEntry = opLookup[apiSlug];
        var opMeta = apiEntry ? apiEntry.ops[operationId] : null;

        if (opMeta) {
            var xoriginServerUrl = getServerForApi(apiSlug).replace(/\/$/, '');

            var linkPrefix = window.__API_LINK_PREFIX__ || '';
            html += '<div class="try-panel-header">';

            html += '<div class="xorigin-title-section">';
            html += '<a href="' + escapeHtml(linkPrefix + apiSlug + '.html#op-' + operationId) + '" target="_blank" class="xorigin-operation-link">';
            html += '<h4>' + escapeHtml(apiSlug) + '.' + escapeHtml(operationId) + '</h4>';
            html += '</a>';
            if (origin.values || origin.labels) {
                html += '<span class="xorigin-xpath-info">';
                if (origin.values) {
                    html += '<span class="xorigin-path-inline">';
                    html += '<span class="xorigin-path-label">values:</span>';
                    html += '<code class="xorigin-path-value">' + escapeHtml(origin.values) + '</code>';
                    html += '</span>';
                }
                if (origin.labels) {
                    html += '<span class="xorigin-path-inline">';
                    html += '<span class="xorigin-path-label">labels:</span>';
                    html += '<code class="xorigin-path-value">' + escapeHtml(origin.labels) + '</code>';
                    html += '</span>';
                }
                html += '</span>';
            }
            html += '</div>';

            html += '<div class="try-header-actions">';
            html += '<span class="try-spinner" id="spinner-xorigin-' + idx + '" style="display:none">Sending...</span>';
            html += '<button class="btn-send" onclick="executeXOriginSource(' + idx + ', this)">';
            html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';
            html += '<span>Send</span>';
            html += '</button>';
            html += '<button class="btn-copy-curl" onclick="copyCurlCommand(\'xorigin-' + idx + '\', this)">';
            html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
            html += '<span>Copy cURL</span>';
            html += '</button>';
            html += '</div>';
            html += '</div>';

            html += '<div class="operation-url-bar-container">';
            html += buildUrlBarHtml(opMeta.method, xoriginServerUrl, opMeta.path, null);
            html += '</div>';

            var xoriginOpId = 'xorigin-' + idx;
            html += renderOperationPanel(xoriginOpId, opMeta, {
                yamlInputs: envVarsMap,
                enableVariableRefs: false,
                slug: '',
                contextType: 'xorigin',
                showExecuteButton: false
            });
        }

        html += '</div>';
    });

    body.innerHTML = html;
    modal.style.display = 'flex';

    // Initialize ACE editors
    initCodeMirrorEditors();
}

function switchXOriginSource() {
    var selector = document.getElementById('xorigin-source-selector');
    if (!selector) return;

    var selectedIdx = parseInt(selector.value, 10);
    var allSources = document.querySelectorAll('.xorigin-source');

    allSources.forEach(function(source, idx) {
        source.style.display = (idx === selectedIdx) ? 'block' : 'none';
    });
}

async function executeXOriginSource(sourceIdx, buttonEl) {
    // If sourceIdx not provided, get it from the selector
    if (sourceIdx === undefined) {
        var selector = document.getElementById('xorigin-source-selector');
        if (selector) {
            sourceIdx = parseInt(selector.value, 10);
        } else {
            sourceIdx = 0;
        }
    }

    var xoriginOpId = 'xorigin-' + sourceIdx;
    var sourceDiv = document.querySelector('.xorigin-source[data-source-idx="' + sourceIdx + '"]');
    var responseDiv = document.getElementById('response-' + xoriginOpId);
    var statusBadge = document.getElementById('status-' + xoriginOpId);
    var responseBodyDiv = document.getElementById('respbody-' + xoriginOpId);
    var responseHeadersDiv = document.getElementById('respheaders-' + xoriginOpId);
    var valuesOutputDiv = document.getElementById('xorigin-values-' + sourceIdx);

    if (!responseDiv) {
        console.error('Response div not found', { responseDiv: !!responseDiv, sourceIdx: sourceIdx });
        return;
    }

    // Button feedback
    var originalText = 'Send';
    if (buttonEl) {
        var textSpan = buttonEl.querySelector('span');
        if (textSpan) {
            originalText = textSpan.textContent;
            textSpan.textContent = 'Sending...';
        }
        buttonEl.disabled = true;
    }

    // Helper to reset button state
    function resetButton() {
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) textSpan.textContent = originalText;
            buttonEl.disabled = false;
        }
    }

    // Get the origin configuration from current modal context
    var currentModal = xOriginModalStack[xOriginModalStack.length - 1];
    if (!currentModal) {
        console.error('No current x-origin modal in stack');
        resetButton();
        return;
    }
    var origins = currentModal.origins;
    var origin = origins[sourceIdx];

    // Check authentication
    var token = sessionStorage.getItem('anypoint_token');
    if (!token) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Please authenticate first.</div>';
        responseDiv.classList.remove('empty');
        switchResponseTab(xoriginOpId, 'body');
        resetButton();
        return;
    }
    if (isTokenExpired()) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Token expired. Please re-authenticate.</div>';
        responseDiv.classList.remove('empty');
        switchResponseTab(xoriginOpId, 'body');
        resetButton();
        return;
    }

    var apiSlug = (origin.api || '').replace('urn:api:', '');
    var operationId = origin.operation || '';
    var valuesPath = origin.values || '';
    var labelsPath = origin.labels || '';

    // Get operation metadata
    var opLookup = window.__OP_LOOKUP__ || {};
    var apiEntry = opLookup[apiSlug];
    if (!apiEntry) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">API "' + escapeHtml(apiSlug) + '" not found.</div>';
        responseDiv.classList.remove('empty');
        switchResponseTab(xoriginOpId, 'body');
        resetButton();
        return;
    }

    var opMeta = apiEntry.ops[operationId];
    if (!opMeta) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Operation "' + escapeHtml(operationId) + '" not found.</div>';
        responseDiv.classList.remove('empty');
        switchResponseTab(xoriginOpId, 'body');
        resetButton();
        return;
    }

    var method = opMeta.method;
    var pathTemplate = opMeta.path;

    // Collect parameters from input fields in the modal
    var paramInputs = sourceDiv.querySelectorAll('input[data-param], select[data-param]');

    var paramsByLocation = { path: {}, query: {}, header: {} };
    var missingParams = [];

    paramInputs.forEach(function(input) {
        var paramName = input.getAttribute('data-param');
        var paramIn = input.getAttribute('data-in');
        var value = input.value;

        if (value) {
            paramsByLocation[paramIn][paramName] = value;
        } else if (input.hasAttribute('required')) {
            missingParams.push(paramName);
        }
    });

    if (missingParams.length > 0) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Missing required parameters: ' + escapeHtml(missingParams.join(', ')) + '</div>';
        responseDiv.classList.remove('empty');
        switchResponseTab(xoriginOpId, 'body');
        resetButton();
        return;
    }

    // Build URL - substitute path parameters
    var path = pathTemplate;
    for (var paramName in paramsByLocation.path) {
        var value = paramsByLocation.path[paramName];
        path = path.replace('{' + paramName + '}', encodeURIComponent(value));
    }

    // Check for any remaining unsubstituted path parameters
    var unresolvedParams = (path.match(/\{([^}]+)\}/g) || []);
    if (unresolvedParams.length > 0) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Missing path parameters: ' + escapeHtml(unresolvedParams.join(', ')) + '</div>';
        responseDiv.classList.remove('empty');
        switchResponseTab(xoriginOpId, 'body');
        resetButton();
        return;
    }

    // Build query string
    var queryParts = [];
    for (var paramName in paramsByLocation.query) {
        queryParts.push(encodeURIComponent(paramName) + '=' + encodeURIComponent(paramsByLocation.query[paramName]));
    }
    if (queryParts.length > 0) {
        path += '?' + queryParts.join('&');
    }

    // Get server URL for the target API
    var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
    var fullUrl = serverUrl + path;

    // Update UI state
    if (responseDiv) responseDiv.classList.add('empty');

    try {
        // Build headers including auth headers and parameter headers
        var headers = Object.assign(
            {'Content-Type': 'application/json'},
            getAuthHeaders(),
            paramsByLocation.header
        );

        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: method,
                url: fullUrl,
                headers: headers,
                body: null
            })
        });

        var data = await resp.json();
        await handleProxyResponse(data);

        resetButton();

        if (responseDiv) responseDiv.classList.remove('empty');

        // Update status badge
        if (statusBadge) {
            var statusClass = 'status-error';
            if (data.status >= 200 && data.status < 300) {
                statusClass = 'status-2xx';
            } else if (data.status >= 300 && data.status < 400) {
                statusClass = 'status-3xx';
            } else if (data.status >= 400 && data.status < 500) {
                statusClass = 'status-4xx';
            } else if (data.status >= 500) {
                statusClass = 'status-5xx';
            }
            statusBadge.className = 'response-status-badge ' + statusClass;
            statusBadge.textContent = data.status;
        }

        if (data.error) {
            if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Error: ' + escapeHtml(data.error) + '</div>';
            if (responseDiv) responseDiv.classList.remove('empty');
            switchResponseTab(xoriginOpId, 'body');
            resetButton();
            return;
        }

        if (data.status < 200 || data.status >= 300) {
            if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Request returned status ' + data.status + '</div>';
            if (responseDiv) responseDiv.classList.remove('empty');
            switchResponseTab(xoriginOpId, 'body');
            resetButton();
            return;
        }

        // Display response using shared function
        displayResponseInAceEditors(responseBodyDiv, responseHeadersDiv, data);

        // Parse response body for value extraction
        var body = null;
        try {
            body = JSON.parse(data.body || '{}');
        } catch (e) {
            console.warn('X-Origin: Response is not valid JSON, cannot extract values');
            resetButton();
            return;
        }

        // Extract values and labels using paths
        var values = extractXOriginValues(body, valuesPath);
        var labels = [];
        if (labelsPath) {
            labels = extractXOriginValues(body, labelsPath);
            if (labels.length !== values.length) {
                console.warn('Labels count mismatch: ' + labels.length + ' labels vs ' + values.length + ' values.');
                labels = [];
            }
        }

        // Show extracted values in the "Extracted Values" tab
        var extractedTab = document.getElementById('respextracted-xorigin-' + sourceIdx);
        if (extractedTab) {
            if (values.length > 0) {
                // Build array of items with name and id
                var items = values.map(function(val, valIdx) {
                    var valueStr = typeof val === 'object' ? JSON.stringify(val) : String(val);
                    var labelStr = labels[valIdx] ? String(labels[valIdx]) : valueStr;
                    return {
                        name: labelStr,
                        id: valueStr,
                        index: valIdx
                    };
                });

                // Sort by name
                items.sort(function(a, b) {
                    return a.name.localeCompare(b.name);
                });

                var valuesHtml = '<div class="xorigin-values-section">';
                valuesHtml += '<table class="xorigin-values-table">';
                valuesHtml += '<thead><tr><th>Name</th><th>ID</th><th></th></tr></thead>';
                valuesHtml += '<tbody>';
                items.forEach(function(item) {
                    valuesHtml += '<tr>';
                    valuesHtml += '<td class="xorigin-name-cell">' + escapeHtml(item.name) + '</td>';
                    valuesHtml += '<td class="xorigin-id-cell"><code>' + escapeHtml(item.id) + '</code></td>';
                    valuesHtml += '<td class="xorigin-action-cell"><button class="btn-use-value" data-value="' + escapeHtml(item.id) + '" onclick="useXOriginValue(' + sourceIdx + ', ' + item.index + ', this.getAttribute(\'data-value\'))">Select</button></td>';
                    valuesHtml += '</tr>';
                });
                valuesHtml += '</tbody>';
                valuesHtml += '</table>';
                valuesHtml += '</div>';

                extractedTab.innerHTML = valuesHtml;
            } else {
                extractedTab.innerHTML = '<div class="xorigin-error">No values found at path: ' + escapeHtml(valuesPath) + '</div>';
            }
        }

    } catch (e) {
        // Restore button
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) textSpan.textContent = originalText;
            buttonEl.disabled = false;
        }

        if (responseDiv) responseDiv.classList.remove('empty');
        if (statusBadge) {
            statusBadge.textContent = 'Error';
            statusBadge.className = 'response-status-badge status-error';
        }
        if (responseBodyDiv) {
            responseBodyDiv.innerHTML = '<div class="xorigin-error">Request failed: ' + escapeHtml(e.message) + '</div>';
        }
    }
}

function useXOriginValue(sourceIdx, valueIdx, valueStr) {
    var displayVal = valueStr;

    // Get current modal context
    var currentModal = xOriginModalStack[xOriginModalStack.length - 1];
    if (!currentModal) {
        console.error('No current x-origin modal in stack');
        return;
    }

    var paramName = currentModal.paramName;

    // Set the value in the input — MCP inputs use a different ID pattern
    var inputId = currentModal.isMcp
        ? 'mcp-param-' + currentModal.opId + '-' + paramName.replace(/\./g, '-')
        : 'param-' + currentModal.opId + '-' + paramName;
    var input = document.getElementById(inputId);
    if (input) {
        input.value = displayVal;
    }

    // Add or update environment variable
    var vars = loadEnvVars();
    var existingVar = vars.find(function(v) { return v.name === paramName; });

    if (existingVar) {
        // Update existing variable
        existingVar.value = displayVal;
    } else {
        // Add new variable
        vars.push({ name: paramName, value: displayVal });
    }

    // Save and re-render environment variables
    sessionStorage.setItem(ENV_STORAGE_KEY, JSON.stringify(vars));
    renderEnvVars();

    // If this is the last modal in the stack (closing back to the original panel),
    // update all fields in the original panel with environment variable values
    var isClosingToOriginalPanel = xOriginModalStack.length === 1;
    if (isClosingToOriginalPanel) {
        // Get the root opId (the original Try it out panel)
        var rootOpId = currentModal.opId;
        updatePanelFieldsFromEnvVars(rootOpId);
    }

    // Close modal
    closeXOriginModal();

    // Show feedback
    showAuthMessage('Value set for ' + paramName + ': ' + displayVal + ' (added to environment variables)', false);
}

function updatePanelFieldsFromEnvVars(opId) {
    // Load all environment variables
    var vars = loadEnvVars();
    var envVarsMap = {};
    vars.forEach(function(v) {
        envVarsMap[v.name] = v.value;
    });

    // Find all parameter inputs in the panel (try regular API panel first, then playground)
    var panel = document.getElementById('try-' + opId);
    if (!panel) {
        panel = document.getElementById('playground-panel-' + opId);
    }
    if (!panel) return;

    var inputs = panel.querySelectorAll('[data-param]');
    inputs.forEach(function(input) {
        var paramName = input.getAttribute('data-param');
        // Only update if field is empty or doesn't have a variable reference
        var currentValue = input.value || '';
        var hasVarRef = currentValue && detectVariableReferences(currentValue).length > 0;

        if (!hasVarRef && envVarsMap[paramName] !== undefined && envVarsMap[paramName] !== '') {
            input.value = envVarsMap[paramName];
        }
    });
}

// Update all playground panels with current environment variables
function updateAllPlaygroundPanelsFromEnvVars() {
    var playgroundPanels = document.querySelectorAll('[id^="playground-panel-"]');
    playgroundPanels.forEach(function(panel) {
        var sid = panel.id.replace('playground-panel-', '');
        updatePanelFieldsFromEnvVars(sid);
    });
}

function switchXOriginTab(sourceIdx, tabName) {
    var source = document.querySelector('.xorigin-source[data-source-idx="' + sourceIdx + '"]');
    if (!source) return;

    // Update tab buttons
    var tabButtons = source.querySelectorAll('.xorigin-tab-btn');
    tabButtons.forEach(function(btn) {
        btn.classList.remove('active');
    });
    var activeButton = Array.from(tabButtons).find(function(btn) {
        return btn.textContent.toLowerCase().startsWith(tabName.toLowerCase());
    });
    if (activeButton) activeButton.classList.add('active');

    // Update tab panels
    var panels = source.querySelectorAll('.xorigin-tab-panel');
    panels.forEach(function(panel) {
        panel.classList.remove('active');
    });
    var activePanel = document.getElementById('xorigin-tab-' + tabName + '-' + sourceIdx);
    if (activePanel) activePanel.classList.add('active');
}

// ============================================================================
// X-Origin for MCP Tool Inputs
// ============================================================================

function openMcpXOriginModal(invocableId, dataPath) {
    var inputId = 'mcp-param-' + invocableId + '-' + dataPath.replace(/\./g, '-');
    var input = document.getElementById(inputId);
    if (!input) return;

    var originsJson = input.getAttribute('data-x-origins');
    if (!originsJson) return;

    var origins = [];
    try {
        if (originsJson.indexOf('[') !== 0 && originsJson.indexOf('{') !== 0) {
            originsJson = atob(originsJson);
        }
        origins = JSON.parse(originsJson);
    } catch (e) {
        console.error('Failed to parse x-origins for MCP:', e);
        return;
    }

    var modal = document.getElementById('xorigin-modal');
    if (modal && modal.style.display === 'flex') {
        modal.style.display = 'none';
    }

    xOriginModalStack.push({
        opId: invocableId,
        paramName: dataPath,
        origins: origins,
        isMcp: true
    });

    var modal = document.getElementById('xorigin-modal');
    var title = document.getElementById('xorigin-modal-title');
    var body = document.getElementById('xorigin-modal-body');
    if (!modal || !title || !body) return;

    title.textContent = 'Select a value for: ' + dataPath;

    var opLookup = window.__OP_LOOKUP__ || {};
    var mcpLookup = window.__MCP_LOOKUP__ || {};
    var envVars = loadEnvVars();
    var envVarsMap = {};
    envVars.forEach(function(v) { envVarsMap[v.name] = v.value; });

    var html = '';
    if (origins.length > 1) {
        html += '<div class="xorigin-selector-container">';
        html += '<select id="xorigin-source-selector" class="xorigin-source-select" onchange="switchXOriginSource()">';
        origins.forEach(function(origin, idx) {
            var urn = origin.api || '';
            var opName = origin.operation || '';
            var slug = urn.replace(/^urn:(api|mcp):/, '');
            var sourceType = urn.startsWith('urn:mcp:') ? 'mcp' : 'api';
            var technicalRef = slug + '#' + opName;
            var label = origin.name ? (origin.name + ' - ' + technicalRef) : technicalRef;
            html += '<option value="' + idx + '">[' + sourceType + '] ' + escapeHtml(label) + '</option>';
        });
        html += '</select></div>';
    }

    origins.forEach(function(origin, idx) {
        var urn = origin.api || '';
        var opName = origin.operation || '';
        var isMcpSource = urn.startsWith('urn:mcp:');
        var slug = urn.replace(/^urn:(api|mcp):/, '');

        html += '<div class="xorigin-source" data-source-idx="' + idx + '" style="display:' + (idx === 0 ? 'block' : 'none') + '">';

        if (isMcpSource) {
            html += _buildMcpSourcePanel(idx, slug, opName, origin, mcpLookup, envVarsMap);
        } else {
            html += _buildApiSourcePanel(idx, slug, opName, origin, opLookup, envVarsMap);
        }

        html += '</div>';
    });

    body.innerHTML = html;
    modal.style.display = 'flex';
    initCodeMirrorEditors();

    modal._previousFocus = document.activeElement;
    var firstFocusable = modal.querySelector('button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    if (firstFocusable) firstFocusable.focus();
}

function _buildApiSourcePanel(idx, apiSlug, operationId, origin, opLookup, envVarsMap) {
    var apiEntry = opLookup[apiSlug];
    var opMeta = apiEntry ? apiEntry.ops[operationId] : null;
    if (!opMeta) return '<div class="xorigin-error">API "' + escapeHtml(apiSlug) + '#' + escapeHtml(operationId) + '" not found in lookup.</div>';

    var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
    var linkPrefix = window.__API_LINK_PREFIX__ || '';
    var html = '';

    html += '<div class="try-panel-header">';
    html += '<div class="xorigin-title-section">';
    html += '<a href="' + escapeHtml(linkPrefix + apiSlug + '.html#op-' + operationId) + '" target="_blank" class="xorigin-operation-link">';
    html += '<h4>' + escapeHtml(apiSlug) + '.' + escapeHtml(operationId) + '</h4>';
    html += '</a>';
    html += _buildXpathInfoHtml(origin);
    html += '</div>';
    html += '<div class="try-header-actions">';
    html += '<span class="try-spinner" id="spinner-xorigin-' + idx + '" style="display:none">Sending...</span>';
    html += '<button class="btn-send" onclick="executeXOriginSource(' + idx + ', this)">';
    html += '<img src="../assets/icons/send-icon.svg" alt="" width="13" height="11"><span>Send</span></button>';
    html += '<button class="btn-copy-curl" onclick="copyCurlCommand(\'xorigin-' + idx + '\', this)">';
    html += '<img src="../assets/icons/copy-curl-icon.svg" alt="" width="13" height="13"><span>Copy cURL</span></button>';
    html += '</div></div>';

    html += '<div class="operation-url-bar-container">';
    html += buildUrlBarHtml(opMeta.method, serverUrl, opMeta.path, null);
    html += '</div>';

    var xoriginOpId = 'xorigin-' + idx;
    html += renderOperationPanel(xoriginOpId, opMeta, {
        yamlInputs: envVarsMap,
        enableVariableRefs: false,
        slug: '',
        contextType: 'xorigin',
        showExecuteButton: false
    });

    return html;
}

function _buildMcpSourcePanel(idx, mcpSlug, toolName, origin, mcpLookup, envVarsMap) {
    var mcpEntry = mcpLookup[mcpSlug];
    if (!mcpEntry) return '<div class="xorigin-error">MCP "' + escapeHtml(mcpSlug) + '" not found in lookup.</div>';
    var toolMeta = mcpEntry.tools[toolName];
    if (!toolMeta) return '<div class="xorigin-error">Tool "' + escapeHtml(toolName) + '" not found on MCP "' + escapeHtml(mcpSlug) + '".</div>';

    var linkPrefix = window.__MCP_LINK_PREFIX__ || '';
    var xoriginOpId = 'xorigin-' + idx;
    var html = '';

    // Header: title + xpath info + action buttons (same as API panel)
    html += '<div class="try-panel-header">';
    html += '<div class="xorigin-title-section">';
    html += '<a href="' + escapeHtml(linkPrefix + mcpSlug + '.html#tool-' + toolName) + '" target="_blank" class="xorigin-operation-link">';
    html += '<h4>' + escapeHtml(mcpSlug) + '.' + escapeHtml(toolName) + '</h4>';
    html += '</a>';
    html += _buildXpathInfoHtml(origin);
    html += '</div>';
    html += '<div class="try-header-actions">';
    html += '<span class="try-spinner" id="spinner-xorigin-' + idx + '" style="display:none">Sending...</span>';
    html += '<button class="btn-send" onclick="executeMcpXOriginSource(' + idx + ', this)">';
    html += '<img src="../assets/icons/send-icon.svg" alt="" width="13" height="11"><span>Send</span></button>';
    html += '<button class="btn-copy-curl" onclick="copyXOriginMcpCurl(\'' + xoriginOpId + '\', ' + idx + ', this)">';
    html += '<img src="../assets/icons/copy-curl-icon.svg" alt="" width="13" height="13"><span>Copy cURL</span></button>';
    html += '</div></div>';

    // URL bar
    html += '<div class="operation-url-bar-container">';
    html += '<div class="operation-url-bar-inline">';
    html += '<span class="method method-mcp-tool">TOOL</span>';
    html += '<code class="url-bar-text">' + escapeHtml(toolName) + '</code>';
    html += '</div></div>';

    var inputSchema = toolMeta.inputSchema || {};
    var properties = inputSchema.properties || {};
    var required = inputSchema.required || [];

    // Two-column grid (same as renderOperationPanel)
    html += '<div class="operation-panel-grid">';

    // Left column: Form + action buttons
    html += '<div class="operation-panel-form">';

    var propNames = Object.keys(properties);
    if (propNames.length > 0) {
        propNames.forEach(function(name) {
            var prop = properties[name];
            var ptype = (prop && prop.type) || 'string';
            var isRequired = required.indexOf(name) !== -1;
            var defaultVal = prop.default !== undefined && prop.default !== null ? prop.default : '';
            var placeholder = ptype;
            var prefilledVal = envVarsMap[name] || defaultVal;

            html += '<div class="try-param-row">';
            html += '<label><span class="param-name-wrapper"><code>' + escapeHtml(name) + '</code>';
            if (isRequired) html += '&nbsp;<span class="param-required" title="Required">*</span>';
            html += ': <code class="param-type-inline">' + escapeHtml(ptype) + '</code></span></label>';

            if (ptype === 'object' || ptype === 'array') {
                var exampleJson = '';
                if (prop._example_json) exampleJson = prop._example_json;
                html += '<div id="mcp-arg-' + xoriginOpId + '-' + name + '" class="try-request-editor-cm"';
                html += ' data-param="' + escapeHtml(name) + '" data-in="mcp-arg" data-type="' + ptype + '"';
                html += ' data-content-type="application/json"';
                html += ' data-example-body="' + escapeHtml(exampleJson) + '"></div>';
            } else if (ptype === 'boolean') {
                html += '<select data-param="' + escapeHtml(name) + '" data-in="mcp-arg" data-type="boolean">';
                html += '<option value=""></option><option value="true">true</option><option value="false">false</option>';
                html += '</select>';
            } else {
                html += '<input type="' + (ptype === 'integer' || ptype === 'number' ? 'number' : 'text') + '"';
                html += ' data-param="' + escapeHtml(name) + '" data-in="mcp-arg" data-type="' + escapeHtml(ptype) + '"';
                html += ' placeholder="' + escapeHtml(String(placeholder)) + '"';
                html += ' value="' + escapeHtml(String(prefilledVal)) + '"';
                if (isRequired) html += ' required';
                html += '>';
            }
            html += '</div>';
        });
    } else {
        html += '<p class="security-desc">This tool accepts no arguments.</p>';
    }

    html += '</div>'; // End form column

    // Right column: Response (same structure as renderOperationPanel with xorigin context)
    html += '<div class="operation-panel-response">';
    html += '<div class="try-response empty" id="response-' + xoriginOpId + '" aria-live="polite">';
    html += '<div class="try-response-header"><h5>Response</h5>';
    html += '<div class="response-badges"><span class="response-status-badge" id="status-' + xoriginOpId + '"></span></div></div>';
    html += '<div class="try-response-tabs">';
    html += '<button class="try-tab-btn active" onclick="switchResponseTab(\'' + xoriginOpId + '\', \'extracted\')">Extracted Values</button>';
    html += '<button class="try-tab-btn" onclick="switchResponseTab(\'' + xoriginOpId + '\', \'body\')">Body</button>';
    html += '<button class="try-tab-btn" onclick="switchResponseTab(\'' + xoriginOpId + '\', \'headers\')">Headers</button>';
    html += '</div>';
    html += '<div class="try-response-content">';
    html += '<div class="try-response-extracted active" id="respextracted-' + xoriginOpId + '"></div>';
    html += '<div class="try-response-body" id="respbody-' + xoriginOpId + '"></div>';
    html += '<div class="try-response-headers" id="respheaders-' + xoriginOpId + '"></div>';
    html += '</div></div>';
    html += '</div>'; // End response column

    html += '</div>'; // End grid

    return html;
}

function _buildXpathInfoHtml(origin) {
    var html = '';
    if (origin.values || origin.labels) {
        html += '<span class="xorigin-xpath-info">';
        if (origin.values) {
            html += '<span class="xorigin-path-inline">';
            html += '<span class="xorigin-path-label">values:</span>';
            html += '<code class="xorigin-path-value">' + escapeHtml(typeof origin.values === 'string' ? origin.values : JSON.stringify(origin.values)) + '</code>';
            html += '</span>';
        }
        if (origin.labels) {
            html += '<span class="xorigin-path-inline">';
            html += '<span class="xorigin-path-label">labels:</span>';
            html += '<code class="xorigin-path-value">' + escapeHtml(typeof origin.labels === 'string' ? origin.labels : JSON.stringify(origin.labels)) + '</code>';
            html += '</span>';
        }
        html += '</span>';
    }
    return html;
}

function getMcpEndpointForSlug(mcpSlug) {
    var lookup = window.__MCP_LOOKUP__ || {};
    var entry = lookup[mcpSlug];
    if (!entry) return null;
    var servers = entry.servers || [];
    if (servers.length === 0) return null;
    var server = pickServerTemplate(servers);
    return resolveServerUrl(server, null);
}

function unwrapMcpToolResponse(proxyData) {
    var body = {};
    try { body = JSON.parse(proxyData.body || '{}'); } catch (e) { return body; }
    var result = body.result || {};
    var content = result.content || [];
    for (var i = 0; i < content.length; i++) {
        if (content[i].type === 'text' && content[i].text) {
            try { return JSON.parse(content[i].text); } catch (e) {
                // Try NDJSON: newline-delimited JSON objects
                var lines = content[i].text.split('\n').filter(function(l) { return l.trim(); });
                if (lines.length > 1) {
                    var parsed = [];
                    for (var j = 0; j < lines.length; j++) {
                        try { parsed.push(JSON.parse(lines[j])); } catch (e2) { /* skip */ }
                    }
                    if (parsed.length > 0) return parsed;
                }
                return content[i].text;
            }
        }
    }
    return body;
}

async function executeMcpXOriginSource(sourceIdx, buttonEl) {
    var xoriginOpId = 'xorigin-' + sourceIdx;
    var sourceDiv = document.querySelector('.xorigin-source[data-source-idx="' + sourceIdx + '"]');
    var responseDiv = document.getElementById('response-' + xoriginOpId);
    var statusBadge = document.getElementById('status-' + xoriginOpId);
    var responseBodyDiv = document.getElementById('respbody-' + xoriginOpId);
    var responseHeadersDiv = document.getElementById('respheaders-' + xoriginOpId);

    if (!responseDiv || !sourceDiv) return;

    var originalText = 'Send';
    if (buttonEl) {
        var textSpan = buttonEl.querySelector('span');
        if (textSpan) { originalText = textSpan.textContent; textSpan.textContent = 'Sending...'; }
        buttonEl.disabled = true;
    }

    var currentModal = xOriginModalStack[xOriginModalStack.length - 1];
    if (!currentModal) return;
    var origin = currentModal.origins[sourceIdx];
    var mcpSlug = (origin.api || '').replace('urn:mcp:', '');
    var toolName = origin.operation || '';
    var valuesPath = origin.values || '';
    var labelsPath = origin.labels || '';

    var token = sessionStorage.getItem('anypoint_token');
    if (!token) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Please authenticate first.</div>';
        responseDiv.style.display = 'block';
        _restoreButton(buttonEl, originalText);
        return;
    }

    var endpoint = getMcpEndpointForSlug(mcpSlug);
    if (!endpoint) {
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">MCP endpoint for "' + escapeHtml(mcpSlug) + '" not found.</div>';
        responseDiv.style.display = 'block';
        _restoreButton(buttonEl, originalText);
        return;
    }

    var args = {};
    var paramInputs = sourceDiv.querySelectorAll('input[data-param], select[data-param]');
    paramInputs.forEach(function(input) {
        var name = input.getAttribute('data-param');
        var val = input.value;
        if (val) {
            var dtype = input.getAttribute('data-type') || 'string';
            if (dtype === 'integer') args[name] = parseInt(val, 10);
            else if (dtype === 'number') args[name] = parseFloat(val);
            else if (dtype === 'boolean') args[name] = val === 'true';
            else args[name] = val;
        }
    });
    sourceDiv.querySelectorAll('.try-request-editor-cm[data-param]').forEach(function(div) {
        var name = div.getAttribute('data-param');
        var editor = getCodeMirrorEditor(div.id);
        if (editor) {
            var raw = editor.getValue();
            try { args[name] = JSON.parse(raw); } catch (e) { args[name] = raw; }
        }
    });

    var payload = {
        jsonrpc: '2.0',
        id: typeof __nextMcpId === 'function' ? __nextMcpId() : 1,
        method: 'tools/call',
        params: { name: toolName, arguments: args }
    };

    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                method: 'POST',
                url: endpoint,
                headers: Object.assign({ 'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream' }, getAuthHeaders()),
                body: JSON.stringify(payload)
            })
        });

        var data = await resp.json();
        _restoreButton(buttonEl, originalText);
        if (responseDiv) responseDiv.classList.remove('empty');

        if (statusBadge) {
            var sc = 'status-error';
            if (data.status >= 200 && data.status < 300) sc = 'status-2xx';
            else if (data.status >= 400 && data.status < 500) sc = 'status-4xx';
            else if (data.status >= 500) sc = 'status-5xx';
            statusBadge.className = 'response-status-badge ' + sc;
            statusBadge.textContent = data.status;
        }

        if (data.error || data.status < 200 || data.status >= 300) {
            switchResponseTab(xoriginOpId, 'body');
            if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Request failed (status ' + data.status + ')</div>';
            return;
        }

        displayResponseInAceEditors(responseBodyDiv, responseHeadersDiv, data);

        var unwrapped = unwrapMcpToolResponse(data);
        if (typeof unwrapped !== 'object') {
            console.warn('MCP x-origin: response content is not JSON, cannot extract values');
            return;
        }

        var values = extractXOriginValues(unwrapped, valuesPath);
        var labels = [];
        if (labelsPath) {
            labels = extractXOriginValues(unwrapped, labelsPath);
            if (labels.length !== values.length) labels = [];
        }

        var extractedTab = document.getElementById('respextracted-' + xoriginOpId);
        if (extractedTab) {
            if (values.length > 0) {
                var items = values.map(function(val, i) {
                    var valueStr = typeof val === 'object' ? JSON.stringify(val) : String(val);
                    var labelStr = labels[i] ? String(labels[i]) : valueStr;
                    return { name: labelStr, id: valueStr, index: i };
                });
                items.sort(function(a, b) { return a.name.localeCompare(b.name); });

                var vh = '<div class="xorigin-values-section"><table class="xorigin-values-table">';
                vh += '<thead><tr><th>Name</th><th>ID</th><th></th></tr></thead><tbody>';
                items.forEach(function(item) {
                    vh += '<tr><td class="xorigin-name-cell">' + escapeHtml(item.name) + '</td>';
                    vh += '<td class="xorigin-id-cell"><code>' + escapeHtml(item.id) + '</code></td>';
                    vh += '<td class="xorigin-action-cell"><button class="btn-use-value" data-value="' + escapeHtml(item.id) + '" onclick="useXOriginValue(' + sourceIdx + ', ' + item.index + ', this.getAttribute(\'data-value\'))">Select</button></td>';
                    vh += '</tr>';
                });
                vh += '</tbody></table></div>';
                extractedTab.innerHTML = vh;
            } else {
                extractedTab.innerHTML = '<div class="xorigin-error">No values found at path: ' + escapeHtml(typeof valuesPath === 'string' ? valuesPath : JSON.stringify(valuesPath)) + '</div>';
            }
        }
    } catch (e) {
        _restoreButton(buttonEl, originalText);
        if (responseDiv) responseDiv.classList.remove('empty');
        if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-error'; }
        if (responseBodyDiv) responseBodyDiv.innerHTML = '<div class="xorigin-error">Request failed: ' + escapeHtml(e.message) + '</div>';
    }
}

function _restoreButton(buttonEl, originalText) {
    if (!buttonEl) return;
    var textSpan = buttonEl.querySelector('span');
    if (textSpan) textSpan.textContent = originalText;
    buttonEl.disabled = false;
}

function escapeHtml(str) {
    var div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// ============================================================================
// X-Origin configurations for common global parameters
// ============================================================================

var GLOBAL_PARAM_X_ORIGIN = {};

// ============================================================================
// Filter APIs by category
// ============================================================================

// ============================================================================
// Tag-based Search System
// ============================================================================

var selectedTags = [];
var availableTags = [];
var currentSuggestionIndex = -1;
var lastNonEmptySuggestions = [];

function buildAvailableTags() {
    const tagSet = new Set();
    const cardLinks = document.querySelectorAll('.catalog-card-link');

    cardLinks.forEach(cardLink => {
        // Add name
        const name = cardLink.dataset.name || '';
        if (name) tagSet.add(name.toLowerCase());

        // Add category
        const category = cardLink.dataset.category || '';
        if (category) tagSet.add(category.toLowerCase());

        // Add type
        const type = cardLink.dataset.type || '';
        if (type) {
            tagSet.add(type.toLowerCase());
            // Also add variations
            if (type === 'api') tagSet.add('api');
        }

        // Add spec-declared tags (data-tags="tag1,tag2")
        const tagsAttr = cardLink.dataset.tags || '';
        tagsAttr.split(',').forEach(t => {
            const trimmed = t.trim().toLowerCase();
            if (trimmed) tagSet.add(trimmed);
        });

        // Extract individual words from name
        name.split(/\s+/).forEach(word => {
            if (word.length > 2) tagSet.add(word.toLowerCase());
        });

        // Extract individual words from category
        category.split(/\s+/).forEach(word => {
            if (word.length > 2) tagSet.add(word.toLowerCase());
        });
    });

    availableTags = Array.from(tagSet).sort();
}

function showTagSuggestions(query) {
    const suggestionsDiv = document.getElementById('tagSuggestions');
    if (!suggestionsDiv) return;

    if (!query || query.length < 1) {
        suggestionsDiv.style.display = 'none';
        currentSuggestionIndex = -1;
        return;
    }

    const lowerQuery = query.toLowerCase();
    const matches = availableTags.filter(tag =>
        tag.includes(lowerQuery) && !selectedTags.includes(tag)
    ).slice(0, 10);

    const displayList = matches.length > 0 ? matches : lastNonEmptySuggestions;

    if (matches.length > 0) {
        lastNonEmptySuggestions = matches;
    }

    if (displayList.length === 0) {
        suggestionsDiv.style.display = 'none';
        currentSuggestionIndex = -1;
        return;
    }

    let html = '';
    displayList.forEach((tag, index) => {
        const activeClass = index === currentSuggestionIndex ? 'active' : '';
        html += '<div class="tag-suggestion-item ' + activeClass + '" data-tag="' + escapeHtml(tag) + '">' + escapeHtml(tag) + '</div>';
    });

    suggestionsDiv.innerHTML = html;
    suggestionsDiv.style.display = 'block';

    // Add click handlers
    suggestionsDiv.querySelectorAll('.tag-suggestion-item').forEach((item, index) => {
        item.addEventListener('click', function() {
            addTag(item.dataset.tag);
        });
    });
}

function addTag(tag) {
    if (!tag || selectedTags.includes(tag.toLowerCase())) return;

    const normalizedTag = tag.toLowerCase();
    selectedTags.push(normalizedTag);
    renderSelectedTags();
    filterByTags();

    // Clear input
    const input = document.getElementById('tagSearchInput');
    if (input) {
        input.value = '';
        input.focus();
    }

    // Hide suggestions
    const suggestionsDiv = document.getElementById('tagSuggestions');
    if (suggestionsDiv) {
        suggestionsDiv.style.display = 'none';
    }
    currentSuggestionIndex = -1;
}

function removeTag(tag) {
    selectedTags = selectedTags.filter(t => t !== tag);
    renderSelectedTags();
    filterByTags();
}

function renderSelectedTags() {
    const container = document.getElementById('selectedTags');
    if (!container) return;

    if (selectedTags.length === 0) {
        container.innerHTML = '';
        updatePlaceholder();
        return;
    }

    let html = '';
    selectedTags.forEach(tag => {
        html += '<div class="tag-chip">';
        html += '<span>' + escapeHtml(tag) + '</span>';
        html += '<button class="tag-chip-remove" onclick="removeTag(\'' + escapeHtml(tag) + '\')" aria-label="Remove tag">&times;</button>';
        html += '</div>';
    });

    container.innerHTML = html;
    updatePlaceholder();
}

function updatePlaceholder() {
    const input = document.getElementById('tagSearchInput');
    if (!input) return;

    if (selectedTags.length > 0) {
        input.placeholder = '';
    } else {
        input.placeholder = 'Search by tags';
    }
}

function filterByTags() {
    const cardLinks = document.querySelectorAll('.catalog-card-link');
    const activeTab = document.querySelector('.hero-tab.active');
    const selectedType = activeTab ? activeTab.dataset.filter : 'all';

    let visibleApis = 0;
    let visibleMcps = 0;
    let visibleSkills = 0;
    let visibleTerraform = 0;

    cardLinks.forEach(cardLink => {
        const name = (cardLink.dataset.name || '').toLowerCase();
        const category = (cardLink.dataset.category || '').toLowerCase();
        const type = (cardLink.dataset.type || '').toLowerCase();
        const tagsAttr = (cardLink.dataset.tags || '').toLowerCase();

        // Check type filter
        const matchesType = selectedType === 'all' || type === selectedType;

        // Check tag filter
        let matchesTags = true;
        if (selectedTags.length > 0) {
            const searchableText = name + ' ' + category + ' ' + type + ' ' + tagsAttr;
            matchesTags = selectedTags.some(tag => searchableText.includes(tag));
        }

        // Show if matches both type AND tags (or no tags selected)
        if (matchesType && matchesTags) {
            cardLink.style.display = '';
            // Count visible items by type
            if (type === 'api') {
                visibleApis++;
            } else if (type === 'mcp') {
                visibleMcps++;
            } else if (type === 'skill') {
                visibleSkills++;
            } else if (type === 'terraform') {
                visibleTerraform++;
            }
        } else {
            cardLink.style.display = 'none';
        }
    });

    // Update results count and type
    const totalVisible = visibleApis + visibleMcps + visibleSkills + visibleTerraform;
    updateResultsCount(totalVisible, selectedType);

    // Toggle empty state when no cards match
    const catalogGrid = document.getElementById('catalogGrid');
    const catalogEmptyState = document.getElementById('catalogEmptyState');
    if (catalogGrid && catalogEmptyState) {
        catalogGrid.style.display = totalVisible === 0 ? 'none' : '';
        catalogEmptyState.style.display = totalVisible === 0 ? '' : 'none';
    }

    // Highlight matched terms on visible cards
    applyTagHighlights();

    // Update URL with current state
    updateURLState();
}

function applyTagHighlights() {
    const cardLinks = document.querySelectorAll('.catalog-card-link');
    cardLinks.forEach(cardLink => {
        const targets = cardLink.querySelectorAll('.catalog-card-title, .catalog-card-description');
        targets.forEach(target => {
            // Restore original text from data-original or capture once
            if (!target.dataset.originalText) {
                target.dataset.originalText = target.textContent;
            }
            const original = target.dataset.originalText;
            if (selectedTags.length === 0 || cardLink.style.display === 'none') {
                target.textContent = original;
                return;
            }
            target.innerHTML = highlightTerms(original, selectedTags);
        });
    });
}

function highlightTerms(text, terms) {
    // Escape HTML once, then wrap matches in <mark>
    let escaped = escapeHtml(text);
    // Sort longest first to avoid partial matches eating multi-word tags
    const sorted = terms.slice().sort((a, b) => b.length - a.length);
    sorted.forEach(term => {
        if (!term) return;
        const escapedTerm = escapeHtml(term).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const re = new RegExp('(' + escapedTerm + ')', 'gi');
        escaped = escaped.replace(re, '<mark class="search-highlight">$1</mark>');
    });
    return escaped;
}

function updateURLState() {
    const url = new URL(window.location);

    const activeTab = document.querySelector('.hero-tab.active');
    const filterType = activeTab ? activeTab.dataset.filter : 'all';
    if (filterType && filterType !== 'all') {
        url.searchParams.set('filter', filterType);
    } else {
        url.searchParams.delete('filter');
    }

    if (selectedTags.length > 0) {
        url.searchParams.set('tags', selectedTags.join(','));
    } else {
        url.searchParams.delete('tags');
    }

    // View mode disabled for launch - always grid
    // const activeViewBtn = document.querySelector('.view-toggle-btn.active');
    // const viewMode = activeViewBtn ? activeViewBtn.dataset.view : null;
    // if (viewMode && viewMode !== 'grid') {
    //     url.searchParams.set('view', viewMode);
    // } else {
    //     url.searchParams.delete('view');
    // }

    window.history.replaceState({}, '', url);
}

function getFilterFromURL() {
    const url = new URL(window.location);
    return url.searchParams.get('filter') || 'all';
}

function getTagsFromURL() {
    const url = new URL(window.location);
    const tags = url.searchParams.get('tags');
    if (!tags) return [];
    return tags.split(',').map(t => t.trim().toLowerCase()).filter(Boolean);
}

function getViewFromURL() {
    const url = new URL(window.location);
    return url.searchParams.get('view') || 'grid';
}

function updateResultsCount(count, filterType) {
    const resultsCount = document.getElementById('resultsCount');
    const resultsType = document.getElementById('resultsType');

    if (resultsCount) {
        resultsCount.textContent = count;
    }

    if (resultsType) {
        if (filterType === 'api') {
            resultsType.textContent = 'APIs';
        } else if (filterType === 'mcp') {
            resultsType.textContent = 'MCP Servers';
        } else if (filterType === 'skill') {
            resultsType.textContent = 'Skills';
        } else if (filterType === 'terraform') {
            resultsType.textContent = 'Terraform Providers';
        } else {
            resultsType.textContent = 'All';
        }
    }
}


// ============================================================================
// Toggle between grid and list view (DISABLED FOR LAUNCH)
// ============================================================================

// function toggleView(viewMode) {
//     const catalogGrids = document.querySelectorAll('.catalog-grid');
//     const viewButtons = document.querySelectorAll('.view-toggle-btn');
//
//     if (catalogGrids.length === 0) return;
//
//     viewButtons.forEach(btn => {
//         if (btn.dataset.view === viewMode) {
//             btn.classList.add('active');
//         } else {
//             btn.classList.remove('active');
//         }
//     });
//
//     catalogGrids.forEach(grid => {
//         if (viewMode === 'list') {
//             grid.classList.add('list-view');
//         } else {
//             grid.classList.remove('list-view');
//         }
//     });
//
//     updateURLState();
// }

// ============================================================================
// Search operations
// ============================================================================

function searchOperations(query) {
    const operations = document.querySelectorAll('.operation');
    const lowerQuery = query.toLowerCase();

    operations.forEach(op => {
        const text = op.textContent.toLowerCase();
        if (text.includes(lowerQuery)) {
            op.style.display = 'block';
        } else {
            op.style.display = 'none';
        }
    });
}

// ============================================================================
// Initialize
// ============================================================================

// ============================================================================
// Navigate to a hash target (shared logic for all navigation)
// ============================================================================

var MCP_INVOCABLE_PREFIXES = ['tool-', 'prompt-', 'resource-', 'resource-template-'];

function isMcpInvocableId(id) {
    for (var i = 0; i < MCP_INVOCABLE_PREFIXES.length; i += 1) {
        if (id.indexOf(MCP_INVOCABLE_PREFIXES[i]) === 0) return true;
    }
    return false;
}

function navigateToHash(hash, smooth) {
    if (!hash || hash === '#') return false;

    const targetId = hash.substring(1);
    const targetElement = document.getElementById(targetId);
    if (!targetElement) return false;

    const overview = document.getElementById('overview');

    // Hide all operations
    document.querySelectorAll('.operation-detail').forEach(op => op.classList.remove('active'));

    // Hide overview
    if (overview) overview.style.display = 'none';

    // Show the target
    if (targetId.startsWith('op-')) {
        targetElement.classList.add('active');
        applyEnvVarsToPanel('try-' + targetId.substring(3));
    } else if (targetId.startsWith('doc-')) {
        document.querySelectorAll('.terraform-subsection[id^="doc-"]').forEach(function(s) {
            s.classList.remove('active');
        });
        targetElement.classList.add('active');
        if (overview) overview.style.display = 'none';
    } else if (isMcpInvocableId(targetId)) {
        targetElement.classList.add('active');
    } else if (targetId === 'overview' || targetId === 'main-content') {
        if (overview) overview.style.display = 'block';
        document.querySelectorAll('.terraform-subsection[id^="doc-"]').forEach(function(s) {
            s.classList.remove('active');
        });
    }

    // For terraform docs, scroll to the top of main-content (not the doc element)
    // so the header sticky doesn't cover content. Other types scroll into the target.
    if (targetId.startsWith('doc-')) {
        var mainContent = document.getElementById('main-content');
        if (mainContent) {
            window.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
        } else {
            targetElement.scrollIntoView({ behavior: smooth ? 'smooth' : 'auto', block: 'start' });
        }
    } else {
        targetElement.scrollIntoView({ behavior: smooth ? 'smooth' : 'auto', block: 'start' });
    }

    // Update sidebar active state
    const navLinks = document.querySelectorAll('.nav-link');
    const navLink = document.querySelector('.nav-link[href="' + hash + '"]');
    if (navLink) {
        navLinks.forEach(l => l.classList.remove('active'));
        navLink.classList.add('active');
    }

    // Switch to Operations tab if viewing an operation
    if (targetId.startsWith('op-')) {
        switchSidebarTab('operations');
    }

    return true;
}

function updateSuggestionHighlight(items) {
    items.forEach((item, index) => {
        if (index === currentSuggestionIndex) {
            item.classList.add('active');
            item.scrollIntoView({ block: 'nearest' });
        } else {
            item.classList.remove('active');
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    // Close modal on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            var modal = document.getElementById('xorigin-modal');
            if (modal && modal.style.display !== 'none') {
                closeXOriginModal();
            }
        }
    });

    // Initialize playground steps in skills
    initializePlaygroundSteps();

    // At <=1200px, mark try-response panels as empty so placeholder shows
    if (window.innerWidth <= 1200) {
        document.querySelectorAll('.try-response').forEach(function(el) {
            if (!el.querySelector('.try-response-body.active')?.textContent.trim()) {
                el.classList.add('empty');
            }
        });
    }

    // Build available tags from catalog
    buildAvailableTags();

    // Set up hero tabs for filtering
    const heroTabs = document.querySelectorAll('.hero-tab');
    heroTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // Remove active class from all tabs
            heroTabs.forEach(t => t.classList.remove('active'));
            // Add active class to clicked tab
            tab.classList.add('active');
            // Filter catalog
            filterByTags();
        });
    });

    // Restore state from URL on page load
    const urlFilter = getFilterFromURL();
    if (urlFilter !== 'all') {
        const targetTab = document.querySelector(`.hero-tab[data-filter="${urlFilter}"]`);
        if (targetTab) {
            heroTabs.forEach(t => t.classList.remove('active'));
            targetTab.classList.add('active');
        }
    }

    const urlTags = getTagsFromURL();
    if (urlTags.length > 0) {
        urlTags.forEach(tag => {
            if (!selectedTags.includes(tag)) {
                selectedTags.push(tag);
            }
        });
        renderSelectedTags();
    }

    if (urlFilter !== 'all' || urlTags.length > 0) {
        filterByTags();
    }

    // Set up tag search input
    const tagSearchInput = document.getElementById('tagSearchInput');
    const tagSearchContainer = document.getElementById('tagSearchInputContainer');

    if (tagSearchInput && tagSearchContainer) {
        // Click on container focuses input
        tagSearchContainer.addEventListener('click', (e) => {
            if (e.target !== tagSearchInput && !e.target.closest('.tag-chip-remove')) {
                tagSearchInput.focus();
            }
        });

        // Input event for suggestions
        tagSearchInput.addEventListener('input', (e) => {
            showTagSuggestions(e.target.value);
            updatePlaceholder();
        });

        // Keyboard navigation
        tagSearchInput.addEventListener('keydown', (e) => {
            const suggestionsDiv = document.getElementById('tagSuggestions');

            // Handle backspace to delete last tag when input is empty
            if (e.key === 'Backspace' && e.target.value === '' && selectedTags.length > 0) {
                e.preventDefault();
                removeTag(selectedTags[selectedTags.length - 1]);
                return;
            }

            if (!suggestionsDiv || suggestionsDiv.style.display === 'none') {
                return;
            }

            const items = suggestionsDiv.querySelectorAll('.tag-suggestion-item');

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                currentSuggestionIndex = Math.min(currentSuggestionIndex + 1, items.length - 1);
                updateSuggestionHighlight(items);
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                currentSuggestionIndex = Math.max(currentSuggestionIndex - 1, -1);
                updateSuggestionHighlight(items);
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (currentSuggestionIndex >= 0 && items[currentSuggestionIndex]) {
                    addTag(items[currentSuggestionIndex].dataset.tag);
                } else if (e.target.value.trim()) {
                    // Add current input as tag
                    addTag(e.target.value.trim());
                }
            } else if (e.key === 'Escape') {
                suggestionsDiv.style.display = 'none';
                currentSuggestionIndex = -1;
            }
        });

        // Hide suggestions when clicking outside
        document.addEventListener('click', function(e) {
            const suggestionsDiv = document.getElementById('tagSuggestions');
            const wrapper = tagSearchInput.closest('.tag-search-wrapper');
            if (suggestionsDiv && wrapper && !wrapper.contains(e.target)) {
                suggestionsDiv.style.display = 'none';
                currentSuggestionIndex = -1;
            }
        });
    }

    // Set up view toggle buttons (DISABLED FOR LAUNCH)
    // const viewToggleButtons = document.querySelectorAll('.view-toggle-btn');
    // viewToggleButtons.forEach(btn => {
    //     btn.addEventListener('click', (e) => {
    //         const viewMode = e.currentTarget.dataset.view;
    //         toggleView(viewMode);
    //     });
    // });

    // Restore view mode from URL (DISABLED FOR LAUNCH)
    // const savedView = getViewFromURL();
    // if (savedView === 'list') {
    //     toggleView(savedView);
    // }

    // Set up operation search (for detail pages)
    const searchInput = document.getElementById('searchOperations');
    if (searchInput) {
        searchInput.addEventListener('input', (e) => {
            searchOperations(e.target.value);
        });
    }

    // Sidebar navigation (for detail pages)
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            const href = link.getAttribute('href');
            if (href && href.startsWith('#')) {
                e.preventDefault();
                if (navigateToHash(href, true)) {
                    history.pushState(null, null, href);
                }
            }
        });
    });

    // Highlight active section on scroll (detail pages)
    const detailContent = document.getElementById('main-content');
    if (detailContent) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const id = entry.target.id;
                    if (!id.startsWith('op-') || entry.target.classList.contains('active')) {
                        const link = document.querySelector('.nav-link[href="#' + id + '"]');
                        if (link && !id.startsWith('op-')) {
                            navLinks.forEach(l => l.classList.remove('active'));
                            link.classList.add('active');
                        }
                    }
                }
            });
        }, {
            threshold: 0.2,
            rootMargin: '-100px 0px -50% 0px'
        });

        document.querySelectorAll('.content-section:not(.operation-detail)').forEach(section => {
            observer.observe(section);
        });
    }

    // Handle in-page links to operations/skills (e.g., from skill step "API Call" links)
    document.addEventListener('click', (e) => {
        const anchor = e.target.closest('a');
        if (!anchor || anchor.classList.contains('nav-link')) return;

        const href = anchor.getAttribute('href');
        if (!href) return;

        // Extract hash from href (handles both "#op-..." and "same-page.html#op-...")
        let hash = '';
        if (href.startsWith('#')) {
            hash = href;
        } else if (href.includes('#')) {
            const [filePart, fragment] = href.split('#', 2);
            const currentFile = window.location.pathname.split('/').pop() || 'index.html';
            if (filePart === currentFile || filePart === '') {
                hash = '#' + fragment;
            } else {
                return; // Different page, let normal navigation happen
            }
        } else {
            return;
        }

        if (!hash.startsWith('#op-') && !hash.startsWith('#skill-') && !isMcpInvocableId(hash.substring(1))) return;

        e.preventDefault();
        if (navigateToHash(hash, true)) {
            history.pushState(null, null, hash);
        }
    });

    // Handle back/forward browser navigation
    window.addEventListener('popstate', () => {
        const hash = window.location.hash;
        if (hash) {
            navigateToHash(hash, false);
        } else {
            // No hash — show overview (default state)
            navigateToHash('#overview', false);
        }
    });

    // Handle hash on initial page load
    if (window.location.hash) {
        setTimeout(() => {
            navigateToHash(window.location.hash, true);
        }, 100);
    }
});

// ============================================================================
// Sidebar Search/Filter
// ============================================================================

function clearSidebarSearch() {
    var input = document.getElementById('sidebarSearch');
    if (input) {
        input.value = '';
        filterSidebar('');
    }
}

// ============================================================================
// Sidebar tabs
// ============================================================================

function switchSidebarTab(tabName) {
    // Update tab buttons
    var tabs = document.querySelectorAll('.sidebar-tab');
    tabs.forEach(function(tab) {
        var isActive = tab.getAttribute('data-tab') === tabName;
        tab.classList.toggle('active', isActive);
        tab.setAttribute('aria-selected', isActive);
    });

    // Update tab panels
    var panels = document.querySelectorAll('.sidebar-panel');
    panels.forEach(function(panel) {
        var isActive = panel.id === tabName + '-panel';
        panel.classList.toggle('active', isActive);
        if (isActive) {
            panel.style.display = 'block';
        } else {
            panel.style.display = 'none';
        }
    });
}

// Helper function to highlight text matches
function highlightText(text, query) {
    if (!query) return text;

    var lowerText = text.toLowerCase();
    var lowerQuery = query.toLowerCase();
    var index = lowerText.indexOf(lowerQuery);

    if (index === -1) return text;

    var before = text.substring(0, index);
    var match = text.substring(index, index + query.length);
    var after = text.substring(index + query.length);

    return before + '<span class="search-highlight">' + match + '</span>' + highlightText(after, query);
}

function filterSidebar(query) {
    var lowerQuery = query.toLowerCase();
    var clearBtn = document.querySelector('.btn-clear-sidebar-search');

    // Show/hide clear button
    if (clearBtn) {
        clearBtn.style.display = query ? 'block' : 'none';
    }

    // Count visible items
    var visibleOperationsCount = 0;
    var visibleSkillsCount = 0;

    // Filter operations - match by method, path, summary, or description
    var operationLinks = document.querySelectorAll('.nav-operation');

    operationLinks.forEach(function(link) {
        var method = link.querySelector('.method-badge')?.textContent.toLowerCase() || '';
        var summaryElement = link.querySelector('.op-summary-only, .op-name');
        var summaryText = summaryElement?.textContent || '';
        var title = link.getAttribute('title') || '';
        var titleLines = title.toLowerCase().split('\n');
        var path = titleLines[0] || '';
        var description = titleLines[1] || '';

        var matches = !query ||
                      method.includes(lowerQuery) ||
                      summaryText.toLowerCase().includes(lowerQuery) ||
                      path.includes(lowerQuery) ||
                      description.includes(lowerQuery);

        var listItem = link.closest('li');
        if (listItem) {
            listItem.style.display = matches ? 'block' : 'none';
            if (matches) visibleOperationsCount++;
        }

        // Apply highlighting to summary if searching
        if (summaryElement) {
            if (!summaryElement.hasAttribute('data-original-text')) {
                summaryElement.setAttribute('data-original-text', summaryText);
            }
            if (query && matches && summaryText.toLowerCase().includes(lowerQuery)) {
                summaryElement.innerHTML = highlightText(summaryText, query);
            } else {
                summaryElement.textContent = summaryElement.getAttribute('data-original-text') || summaryText;
            }
        }
    });

    // Filter skill steps
    var stepLinks = document.querySelectorAll('.nav-skill-step');

    stepLinks.forEach(function(link) {
        var titleElement = link.querySelector('.step-title-short');
        var titleText = titleElement?.textContent || '';
        var fullTitle = link.getAttribute('title') || '';
        var matches = !query ||
                      titleText.toLowerCase().includes(lowerQuery) ||
                      fullTitle.toLowerCase().includes(lowerQuery);

        var listItem = link.closest('li');
        if (listItem) {
            listItem.style.display = matches ? 'block' : 'none';
            if (matches) visibleSkillsCount++;
        }

        // Apply highlighting to title if searching
        if (titleElement) {
            if (!titleElement.hasAttribute('data-original-text')) {
                titleElement.setAttribute('data-original-text', titleText);
            }
            if (query && matches && titleText.toLowerCase().includes(lowerQuery)) {
                titleElement.innerHTML = highlightText(titleText, query);
            } else {
                titleElement.textContent = titleElement.getAttribute('data-original-text') || titleText;
            }
        }
    });

    // Filter skills in skills panel
    var skillLinks = document.querySelectorAll('#skills-panel .nav-operation-flat');

    skillLinks.forEach(function(link) {
        var nameElement = link.querySelector('.op-name');
        var nameText = nameElement?.textContent || '';
        var matches = !query || nameText.toLowerCase().includes(lowerQuery);

        var listItem = link.closest('li');
        if (listItem) {
            listItem.style.display = matches ? 'block' : 'none';
            if (matches) visibleSkillsCount++;
        }

        if (nameElement) {
            if (!nameElement.hasAttribute('data-original-text')) {
                nameElement.setAttribute('data-original-text', nameText);
            }
            if (query && matches && nameText.toLowerCase().includes(lowerQuery)) {
                nameElement.innerHTML = highlightText(nameText, query);
            } else {
                nameElement.textContent = nameElement.getAttribute('data-original-text') || nameText;
            }
        }
    });

    // Show/hide groups based on visible children
    var operationGroups = document.querySelectorAll('.nav-group');
    operationGroups.forEach(function(group) {
        var groupItems = group.querySelectorAll(':scope > .nav-group-items > li');
        var hasVisible = false;
        var visibleCount = 0;

        groupItems.forEach(function(item) {
            if (item.style.display !== 'none') {
                hasVisible = true;
                visibleCount++;
            }
        });

        // Show group if it has visible children
        group.style.display = hasVisible ? 'block' : 'none';

        // Auto-expand groups when searching
        if (query && hasVisible) {
            var groupId = group.querySelector('.nav-group-header')?.getAttribute('onclick')?.match(/toggleGroup\('([^']+)'\)/)?.[1];
            if (groupId) {
                var groupItemsContainer = document.getElementById('group-' + groupId);
                var toggle = document.getElementById('toggle-' + groupId);
                if (groupItemsContainer && toggle) {
                    groupItemsContainer.style.display = 'block';
                    toggle.classList.add('expanded');
                }
            }
        }

        // Update group count to reflect filtered results
        var groupCountEl = group.querySelector(':scope > .nav-group-header .group-count');
        if (groupCountEl) {
            if (!groupCountEl.hasAttribute('data-total-count')) {
                groupCountEl.setAttribute('data-total-count', groupCountEl.textContent);
            }
            var totalCount = groupCountEl.getAttribute('data-total-count');
            groupCountEl.textContent = query ? '(' + visibleCount + ')' : totalCount;
        }

        // Apply highlighting to group names if searching
        var groupNameElement = group.querySelector('.group-name');
        if (groupNameElement) {
            var groupNameText = groupNameElement.textContent;
            if (!groupNameElement.hasAttribute('data-original-text')) {
                groupNameElement.setAttribute('data-original-text', groupNameText);
            }
            if (query && groupNameText.toLowerCase().includes(lowerQuery)) {
                groupNameElement.innerHTML = highlightText(groupNameText, query);
            } else {
                groupNameElement.textContent = groupNameElement.getAttribute('data-original-text') || groupNameText;
            }
        }
    });

    // Update tab counts - only show when searching
    var skillsCountEl = document.getElementById('skills-count');
    var operationsCountEl = document.getElementById('operations-count');

    if (query) {
        // Show filtered counts when searching
        if (skillsCountEl) {
            skillsCountEl.textContent = '(' + visibleSkillsCount + ')';
            skillsCountEl.style.display = 'inline';
        }
        if (operationsCountEl) {
            operationsCountEl.textContent = '(' + visibleOperationsCount + ')';
            operationsCountEl.style.display = 'inline';
        }
    } else {
        // Hide counts when not searching
        if (skillsCountEl) {
            skillsCountEl.style.display = 'none';
        }
        if (operationsCountEl) {
            operationsCountEl.style.display = 'none';
        }
    }

    // Toggle empty state when no operations / skills / steps match
    var emptyState = document.getElementById('sidebarEmptyState');
    if (emptyState) {
        var totalVisible = visibleOperationsCount + visibleSkillsCount;
        var anyGroupVisible = false;
        document.querySelectorAll('.sidebar-nav .nav-group').forEach(function(g) {
            if (g.style.display !== 'none') anyGroupVisible = true;
        });
        var showEmpty = !!query && totalVisible === 0 && !anyGroupVisible;
        emptyState.style.display = showEmpty ? '' : 'none';
    }
}

// ============================================================================
// Collapsible sidebar groups
// ============================================================================

function toggleGroup(groupId) {
    const group = document.getElementById('group-' + groupId);
    const toggle = document.getElementById('toggle-' + groupId);
    const header = toggle ? toggle.closest('.nav-group-header') : null;

    if (group && toggle) {
        var expanded = group.style.display === 'none' || group.style.display === '';
        group.style.display = expanded ? 'block' : 'none';
        toggle.classList.toggle('expanded', expanded);
        if (header) header.setAttribute('aria-expanded', expanded);
    }
}

function expandAllGroups() {
    document.querySelectorAll('.nav-group-items').forEach(group => {
        group.style.display = 'block';
    });
    document.querySelectorAll('.group-toggle').forEach(toggle => {
        toggle.classList.add('expanded');
    });
    document.querySelectorAll('.nav-group-header[aria-expanded]').forEach(h => {
        h.setAttribute('aria-expanded', 'true');
    });
}

function collapseAllGroups() {
    document.querySelectorAll('.nav-group-items').forEach(group => {
        group.style.display = 'none';
    });
    document.querySelectorAll('.group-toggle').forEach(toggle => {
        toggle.classList.remove('expanded');
    });
    document.querySelectorAll('.nav-group-header[aria-expanded]').forEach(h => {
        h.setAttribute('aria-expanded', 'false');
    });
}

// ============================================================================
// Collapsible skills
// ============================================================================

function switchSkillView(slug, view) {
    var structured = document.getElementById('structured-' + slug);
    var markdown = document.getElementById('markdown-' + slug);
    var section = structured ? structured.closest('.skill-detail') : null;
    if (!section) return;
    var tabs = section.querySelectorAll('.skill-tab');

    if (view === 'markdown') {
        structured.style.display = 'none';
        markdown.style.display = 'block';
        tabs[0].classList.remove('active');
        tabs[1].classList.add('active');
    } else {
        structured.style.display = 'block';
        markdown.style.display = 'none';
        tabs[0].classList.add('active');
        tabs[1].classList.remove('active');
    }
}

function toggleSkill(skillId) {
    const content = document.getElementById('content-skill-' + skillId);
    const toggle = document.getElementById('toggle-skill-' + skillId);

    if (content && toggle) {
        if (content.style.display === 'none' || content.style.display === '') {
            content.style.display = 'block';
            toggle.textContent = '▲';
        } else {
            content.style.display = 'none';
            toggle.textContent = '▼';
        }
    }
}

// ============================================================================
// Try It Out — Authentication
// ============================================================================

// Proxy URL can be configured via window.__PROXY_CONFIG__ or defaults to localhost:8080
var PROXY_URL = (window.__PROXY_CONFIG__ && window.__PROXY_CONFIG__.url) || 'http://localhost:8080/proxy';

function openAuthModal() {
    var modal = document.getElementById('authModal');
    if (!modal) return;
    modal.style.display = 'flex';
    applyAuthModalMode();
    modal._previousFocus = document.activeElement;
    var firstFocusable = modal.querySelector('button:not([style*="display:none"]):not([style*="display: none"]), input:not([readonly]), select:not([disabled]), textarea, [tabindex]:not([tabindex="-1"])');
    if (firstFocusable) firstFocusable.focus();
}

// Testing shim: expose a name-and-argument variant of applyAuthModalMode
// used by unit tests to drive the locked / unlocked auth UI without having
// to seed sessionStorage. Production code should keep calling
// applyAuthModalMode() directly.
function refreshAuthUiFor(authenticated, identity, authMethod) {
    if (authenticated) {
        sessionStorage.setItem('anypoint_token', 'test-token');
        sessionStorage.setItem('anypoint_token_expires_at', String(Date.now() + 3600000));
        sessionStorage.setItem('anypoint_auth_method',
            (authMethod && authMethod.toLowerCase().indexOf('oauth') !== -1) ? 'OAuth2' : 'Bearer');
        if (identity) sessionStorage.setItem('anypoint_identity', identity);
    } else {
        sessionStorage.removeItem('anypoint_token');
        sessionStorage.removeItem('anypoint_token_expires_at');
        sessionStorage.removeItem('anypoint_auth_method');
        sessionStorage.removeItem('anypoint_identity');
    }
    applyAuthModalMode();
}

function applyAuthModalMode() {
    var token = sessionStorage.getItem('anypoint_token');
    var authenticated = !!token && !isTokenExpired();
    var authMethod = sessionStorage.getItem('anypoint_auth_method') || 'Bearer';
    var identity = sessionStorage.getItem('anypoint_identity') || '—';

    var username = document.getElementById('authUsername');
    var password = document.getElementById('authPassword');
    var clientId = document.getElementById('authClientId');
    var clientSecret = document.getElementById('authClientSecret');
    var bearerLoginBtn = document.getElementById('authBearerLoginBtn');
    var bearerLogoutBtn = document.getElementById('authBearerLogoutBtn');
    var oauth2LoginBtn = document.getElementById('authOauth2LoginBtn');
    var oauth2LogoutBtn = document.getElementById('authOauth2LogoutBtn');
    var bearerLoggedAs = document.getElementById('authBearerLoggedAs');
    var bearerLoggedAsValue = document.getElementById('authBearerLoggedAsValue');
    var oauth2LoggedAs = document.getElementById('authOauth2LoggedAs');
    var oauth2LoggedAsValue = document.getElementById('authOauth2LoggedAsValue');
    var serverSelect = document.getElementById('serverSelect');
    var regionSelectEl = document.getElementById('regionSelect');
    var regionCustom = document.getElementById('regionCustomInput');
    var bearerTab = document.querySelector('.auth-tab[data-tab="bearer"]');
    var oauth2Tab = document.querySelector('.auth-tab[data-tab="oauth2"]');

    var SERVER_LOCKED_TOOLTIP = 'Log out and log in again to switch server.';
    var METHOD_LOCKED_TOOLTIP = 'Log out and log in again to switch authentication method.';

    if (authenticated) {
        var activeTab = (authMethod === 'OAuth2') ? 'oauth2' : 'bearer';
        switchAuthTab(activeTab);

        // Both tabs visible (active keeps blue pill), but neither is clickable.
        if (bearerTab) { bearerTab.disabled = true; bearerTab.style.display = ''; bearerTab.title = METHOD_LOCKED_TOOLTIP; }
        if (oauth2Tab) { oauth2Tab.disabled = true; oauth2Tab.style.display = ''; oauth2Tab.title = METHOD_LOCKED_TOOLTIP; }

        // Show the "LOGGED IN AS <user>" block, hide the credential inputs.
        if (activeTab === 'bearer') {
            if (bearerLoggedAsValue) bearerLoggedAsValue.textContent = identity;
            if (bearerLoggedAs) bearerLoggedAs.style.display = '';
            if (username) username.style.display = 'none';
            if (password) password.style.display = 'none';
            if (bearerLoginBtn) bearerLoginBtn.style.display = 'none';
            if (bearerLogoutBtn) bearerLogoutBtn.style.display = '';
        } else {
            if (oauth2LoggedAsValue) oauth2LoggedAsValue.textContent = identity;
            if (oauth2LoggedAs) oauth2LoggedAs.style.display = '';
            if (clientId) clientId.style.display = 'none';
            if (clientSecret) clientSecret.style.display = 'none';
            if (oauth2LoginBtn) oauth2LoginBtn.style.display = 'none';
            if (oauth2LogoutBtn) oauth2LogoutBtn.style.display = '';
        }

        // Server combo + region inputs disabled (chevron stays, value visible).
        if (regionSelectEl) { regionSelectEl.disabled = true; regionSelectEl.title = SERVER_LOCKED_TOOLTIP; }
        if (serverSelect) { serverSelect.disabled = true; serverSelect.title = SERVER_LOCKED_TOOLTIP; }
        if (regionCustom) { regionCustom.disabled = true; regionCustom.title = SERVER_LOCKED_TOOLTIP; }
    } else {
        if (bearerTab) { bearerTab.disabled = false; bearerTab.style.display = ''; bearerTab.removeAttribute('title'); }
        if (oauth2Tab) { oauth2Tab.disabled = false; oauth2Tab.style.display = ''; oauth2Tab.removeAttribute('title'); }

        if (bearerLoggedAs) bearerLoggedAs.style.display = 'none';
        if (oauth2LoggedAs) oauth2LoggedAs.style.display = 'none';

        if (username) { username.value = ''; username.style.display = ''; }
        if (password) { password.value = ''; password.style.display = ''; }
        if (clientId) { clientId.value = ''; clientId.style.display = ''; }
        if (clientSecret) { clientSecret.value = ''; clientSecret.style.display = ''; }

        if (bearerLoginBtn) bearerLoginBtn.style.display = '';
        if (bearerLogoutBtn) bearerLogoutBtn.style.display = 'none';
        if (oauth2LoginBtn) oauth2LoginBtn.style.display = '';
        if (oauth2LogoutBtn) oauth2LogoutBtn.style.display = 'none';

        if (regionSelectEl) { regionSelectEl.disabled = false; regionSelectEl.removeAttribute('title'); }
        if (serverSelect) { serverSelect.disabled = false; serverSelect.removeAttribute('title'); }
        if (regionCustom) { regionCustom.disabled = false; regionCustom.removeAttribute('title'); }
    }
}

function closeAuthModal() {
    var modal = document.getElementById('authModal');
    if (!modal) return;
    modal.style.display = 'none';
    // Restore focus to the element that opened the modal
    if (modal._previousFocus) modal._previousFocus.focus();
}

function switchAuthTab(tab) {
    var tabs = document.querySelectorAll('.auth-tab');
    var panels = document.querySelectorAll('.auth-tab-content');
    tabs.forEach(function(t) {
        var isActive = t.getAttribute('data-tab') === tab;
        t.classList.toggle('active', isActive);
        t.setAttribute('aria-selected', isActive ? 'true' : 'false');
    });
    panels.forEach(function(p) { p.classList.remove('active'); });
    var targetId = tab === 'bearer' ? 'authTabBearer' : 'authTabOauth2';
    var target = document.getElementById(targetId);
    if (target) target.classList.add('active');
}

function isTokenExpired() {
    var token = sessionStorage.getItem('anypoint_token');
    if (!token) return true;

    var expiresAt = sessionStorage.getItem('anypoint_token_expires_at');
    if (!expiresAt) return false; // If no expiration info, assume valid

    var now = Date.now();
    return now >= parseInt(expiresAt, 10);
}

function updateAuthSummary() {
    var token = sessionStorage.getItem('anypoint_token');
    var identity = sessionStorage.getItem('anypoint_identity') || '';
    var expired = isTokenExpired();

    // Auth status dot + text + container state
    var dot = document.getElementById('authStatusDot');
    var statusText = document.getElementById('authStatusText');
    var statusContainer = document.getElementById('authStatusContainer');
    var lockIcon = document.getElementById('authLockIcon');

    if (dot) {
        // Extract base path from current src (e.g., "assets/icons" or "../assets/icons")
        var basePath = dot.src.substring(0, dot.src.lastIndexOf('/'));
        if (token && !expired) {
            dot.src = basePath + '/status-dot-green.svg';
        } else if (token && expired) {
            dot.src = basePath + '/status-dot-amber.svg';
        } else {
            dot.src = basePath + '/status-dot-red.svg';
        }
    }

    if (lockIcon) {
        // Extract base path from current src
        var basePath = lockIcon.src.substring(0, lockIcon.src.lastIndexOf('/'));
        if (token && !expired) {
            lockIcon.src = basePath + '/lock-green.svg';
        } else if (token && expired) {
            lockIcon.src = basePath + '/lock-amber.svg';
        } else {
            lockIcon.src = basePath + '/lock-red.svg';
        }
    }

    if (statusText) {
        if (token && expired) {
            statusText.textContent = 'Token Expired';
        } else if (token) {
            statusText.textContent = 'Authenticated';
        } else {
            statusText.textContent = 'Not authenticated';
        }
    }

    if (statusContainer) {
        if (token && !expired) {
            statusContainer.classList.add('authenticated');
            statusContainer.classList.remove('not-authenticated', 'expired');
        } else if (token && expired) {
            statusContainer.classList.add('expired');
            statusContainer.classList.remove('authenticated', 'not-authenticated');
        } else {
            statusContainer.classList.add('not-authenticated');
            statusContainer.classList.remove('authenticated', 'expired');
        }
    }

    // User section (show only when authenticated)
    var userSection = document.getElementById('authUserSection');
    var userText = document.getElementById('authUserText');
    var infoSeparator = document.getElementById('authInfoSeparator');
    if (userSection && userText) {
        if (token && !expired && identity) {
            userText.textContent = identity;
            userSection.style.display = '';
            if (infoSeparator) infoSeparator.style.display = '';
        } else {
            userSection.style.display = 'none';
            if (infoSeparator) infoSeparator.style.display = 'none';
        }
    }

    // Region
    var regionText = document.getElementById('authRegionText');
    if (regionText) {
        var type = getSelectedServerType();
        if (type === 'eu') {
            var euRegion = getSelectedRegion();
            regionText.textContent = euRegion ? euRegion.toUpperCase() : 'EU1';
        } else if (type === 'platform') {
            var region = getSelectedRegion();
            regionText.textContent = region ? region.toUpperCase() : 'CA1';
        } else {
            regionText.textContent = 'US';
        }
    }
}

function setAuthStatus(authenticated, message, authMethod) {
    // Store auth method for display
    if (authenticated && authMethod) {
        sessionStorage.setItem('anypoint_auth_method', authMethod);
    }
    if (!authenticated) {
        sessionStorage.removeItem('anypoint_token');
        sessionStorage.removeItem('anypoint_auth_method');
        sessionStorage.removeItem('anypoint_identity');
        sessionStorage.removeItem('anypoint_token_expires_at');
        stopTtlTimer();
    }

    updateAuthSummary();
}

function logout() {
    sessionStorage.removeItem('anypoint_token');
    sessionStorage.removeItem('anypoint_auth_method');
    sessionStorage.removeItem('anypoint_identity');
    sessionStorage.removeItem('anypoint_token_expires_at');
    stopTtlTimer();
    updateAuthSummary();
    var modal = document.getElementById('authModal');
    if (modal && modal.style.display !== 'none') {
        applyAuthModalMode();
    }
}

function onAuthButtonClick() {
    openAuthModal();
}

function showAuthMessage(msg, isError) {
    var el = document.getElementById('authMessage');
    if (!el) return;
    el.textContent = msg;
    el.className = 'auth-message ' + (isError ? 'auth-error' : 'auth-success');
    el.style.display = 'block';
    setTimeout(function() { el.style.display = 'none'; }, 5000);
}

async function loginBearer() {
    var username = document.getElementById('authUsername').value.trim();
    var password = document.getElementById('authPassword').value;
    if (!username || !password) {
        showAuthMessage('Please enter username and password.', true);
        return;
    }
    var loginBtn = document.querySelector('#authTabBearer .btn-auth-login');
    if (loginBtn) { loginBtn.disabled = true; loginBtn.classList.add('loading'); }
    var serverBase = getSelectedBaseUrl();
    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: 'POST',
                url: serverBase + '/accounts/login',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({username: username, password: password})
            })
        });
        var data = await resp.json();
        if (data.error) {
            showAuthMessage('Server error: ' + data.error, true);
            return;
        }
        var body;
        try { body = JSON.parse(data.body); } catch (_) { body = {}; }
        if (data.status === 200 && body.access_token) {
            sessionStorage.setItem('anypoint_token', body.access_token);
            sessionStorage.setItem('anypoint_identity', username);

            var introspectResult = await introspectToken();
            if (introspectResult && introspectResult.exp) {
                setTokenExpiration(parseInt(introspectResult.exp, 10));
            } else {
                setTokenExpiration(Date.now() + _SESSION_TTL);
            }

            setAuthStatus(true, null, 'Bearer');
            showAuthMessage('Login successful!', false);

            if (typeof updateAllPlaygroundPanelsFromEnvVars === 'function') {
                updateAllPlaygroundPanelsFromEnvVars();
            }
            applyAuthModalMode();
        } else {
            var errMsg = body.message || body.error || data.body || 'Unknown error';
            showAuthMessage('Login failed: ' + errMsg, true);
        }
    } catch (e) {
        showAuthMessage('Unable to connect to the server. Please check your network connection and try again.', true);
    } finally {
        if (loginBtn) { loginBtn.disabled = false; loginBtn.classList.remove('loading'); }
    }
}

async function loginOAuth2() {
    var clientId = document.getElementById('authClientId').value.trim();
    var clientSecret = document.getElementById('authClientSecret').value.trim();
    if (!clientId || !clientSecret) {
        showAuthMessage('Please enter Client Id and Client Secret.', true);
        return;
    }
    var loginBtn = document.querySelector('#authTabOauth2 .btn-auth-login');
    if (loginBtn) { loginBtn.disabled = true; loginBtn.classList.add('loading'); }
    var serverBase = getSelectedBaseUrl();
    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: 'POST',
                url: serverBase + '/accounts/api/v2/oauth2/token',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: 'grant_type=client_credentials&client_id=' + encodeURIComponent(clientId) + '&client_secret=' + encodeURIComponent(clientSecret)
            })
        });
        var data = await resp.json();
        if (data.error) {
            showAuthMessage('Server error: ' + data.error, true);
            return;
        }
        var body;
        try { body = JSON.parse(data.body); } catch (_) { body = {}; }
        if (data.status === 200 && body.access_token) {
            sessionStorage.setItem('anypoint_token', body.access_token);
            sessionStorage.setItem('anypoint_identity', clientId);

            if (body.expires_in) {
                setTokenExpiration(Date.now() + (body.expires_in * 1000));
            } else {
                var introspectResult = await introspectToken();
                if (introspectResult && introspectResult.exp) {
                    setTokenExpiration(parseInt(introspectResult.exp, 10));
                } else {
                    setTokenExpiration(Date.now() + _SESSION_TTL);
                }
            }

            setAuthStatus(true, null, 'OAuth2');
            showAuthMessage('Token obtained successfully!', false);

            if (typeof updateAllPlaygroundPanelsFromEnvVars === 'function') {
                updateAllPlaygroundPanelsFromEnvVars();
            }
            applyAuthModalMode();
        } else {
            var errMsg = body.error_description || body.error || data.body || 'Unknown error';
            showAuthMessage('Token request failed: ' + errMsg, true);
        }
    } catch (e) {
        showAuthMessage('Unable to connect to the server. Please check your network connection and try again.', true);
    } finally {
        if (loginBtn) { loginBtn.disabled = false; loginBtn.classList.remove('loading'); }
    }
}

function getAuthHeaders() {
    var token = sessionStorage.getItem('anypoint_token');
    if (token) return {'Authorization': 'Bearer ' + token};
    return {};
}

// ============================================================================
// MCP Try It Out — JSON-RPC over streamable HTTP
// ============================================================================
// sendMcpRequest is the MCP counterpart to sendRequest(): it collects inputs
// from the try panel, builds a JSON-RPC 2.0 payload (tools/call, prompts/get,
// or resources/read), and posts it through the same proxy used for REST. The
// Authorization header is injected via getAuthHeaders() so bearer / OAuth2
// tokens obtained through the shared auth panel flow straight through.

var __mcpJsonRpcId = 0;
function __nextMcpId() { __mcpJsonRpcId += 1; return __mcpJsonRpcId; }

function __mcpEndpointUrl() {
    // Resolve through getEffectiveMcpRemote — the SAME MCP-specific region
    // logic the URL bar renders — so the request/cURL endpoint matches what
    // the user sees (including the omni region-subdomain rewrite). Using
    // getSelectedServer() here would run the API-operations path instead and
    // miss the omni prefix, sending the wrong URL in the payload.
    var meta = window.__MCP_META__;
    if (!meta || !meta.servers) return null;
    var effective = getEffectiveMcpRemote(meta.servers);
    return effective.url || null;
}

function __mcpCoerceValue(value, type) {
    if (value === '' || value === null || value === undefined) return undefined;
    if (type === 'integer') {
        var intVal = parseInt(value, 10);
        return isNaN(intVal) ? value : intVal;
    }
    if (type === 'number') {
        var numVal = Number(value);
        return isNaN(numVal) ? value : numVal;
    }
    if (type === 'boolean') {
        if (value === 'true' || value === true) return true;
        if (value === 'false' || value === false) return false;
        return undefined;
    }
    if (type === 'object' || type === 'array') {
        try { return JSON.parse(value); }
        catch (e) { return value; }
    }
    return value;
}

function __mcpCollectArgs(section) {
    // Returns an arguments object built from inputs with data-mcp-arg attributes.
    // Supports dotted paths (e.g. payload.name) to build nested objects.
    // For object/array args the element is a div hosting an ACE editor rather
    // than an <input>, so read the editor's value via getCodeMirrorEditor.
    // If the editor hasn't hydrated yet (e.g. Copy cURL clicked before
    // initCodeMirrorEditors ran), fall back to the pre-rendered example
    // stored on data-example-body so the payload isn't silently empty.
    var args = {};
    var inputs = section.querySelectorAll('[data-mcp-arg]');
    inputs.forEach(function(input) {
        var path = input.getAttribute('data-mcp-arg');
        var type = input.getAttribute('data-type') || 'string';
        var raw;
        if (input.tagName === 'DIV') {
            var editor = getCodeMirrorEditor(input.id);
            if (editor) {
                raw = editor.getValue();
            } else {
                raw = input.getAttribute('data-example-body') || '';
            }
        } else {
            raw = input.value;
        }
        var coerced = __mcpCoerceValue(raw, type);
        if (coerced === undefined) return;

        var keys = path.split('.');
        var cursor = args;
        for (var i = 0; i < keys.length - 1; i += 1) {
            if (cursor[keys[i]] === undefined || typeof cursor[keys[i]] !== 'object') {
                cursor[keys[i]] = {};
            }
            cursor = cursor[keys[i]];
        }
        cursor[keys[keys.length - 1]] = coerced;
    });
    return args;
}

function __mcpBuildPayload(section) {
    var kind = section.getAttribute('data-mcp-kind');
    var id = __nextMcpId();
    if (kind === 'tool') {
        return {
            jsonrpc: '2.0',
            id: id,
            method: 'tools/call',
            params: {
                name: section.getAttribute('data-mcp-name'),
                arguments: __mcpCollectArgs(section),
            },
        };
    }
    if (kind === 'prompt') {
        return {
            jsonrpc: '2.0',
            id: id,
            method: 'prompts/get',
            params: {
                name: section.getAttribute('data-mcp-name'),
                arguments: __mcpCollectArgs(section),
            },
        };
    }
    if (kind === 'resource') {
        return {
            jsonrpc: '2.0',
            id: id,
            method: 'resources/read',
            params: { uri: section.getAttribute('data-mcp-uri') },
        };
    }
    if (kind === 'resource-template') {
        var args = __mcpCollectArgs(section);
        var uri = args.uri || section.getAttribute('data-mcp-uri-template') || '';
        return {
            jsonrpc: '2.0',
            id: id,
            method: 'resources/read',
            params: { uri: uri },
        };
    }
    return null;
}

function copyMcpCurlCommand(invocableId, buttonEl) {
    var section = document.getElementById(invocableId);
    if (!section) return;
    var endpoint = __mcpEndpointUrl();
    if (!endpoint) {
        alert('cURL is only available for the streamableHttp transport.');
        return;
    }
    var payload = __mcpBuildPayload(section);
    if (!payload) return;

    var headers = Object.assign(
        {'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream'},
        getAuthHeaders()
    );

    var curl = 'curl -X POST \\\n  "' + endpoint + '"';
    for (var headerName in headers) {
        curl += ' \\\n  -H "' + headerName + ': ' + headers[headerName] + '"';
    }
    var body = JSON.stringify(payload);
    curl += " \\\n  -d '" + body.replace(/'/g, "'\\''") + "'";

    navigator.clipboard.writeText(curl).then(function() {
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) {
                var originalText = textSpan.textContent;
                textSpan.textContent = 'Copied';
                setTimeout(function() { textSpan.textContent = originalText; }, 1500);
            }
        }
    }).catch(function(err) {
        console.error('Failed to copy cURL command:', err);
        alert('Failed to copy to clipboard. Please try again.');
    });
}

async function sendMcpRequest(invocableId, buttonEl) {
    var section = document.getElementById(invocableId);
    if (!section) return;

    var endpoint = __mcpEndpointUrl();
    var responseDiv = document.getElementById('response-' + invocableId);
    var statusBadge = document.getElementById('status-' + invocableId);
    var responseBody = document.getElementById('respbody-' + invocableId);
    var responseHeaders = document.getElementById('respheaders-' + invocableId);

    if (responseDiv) { responseDiv.classList.add('empty'); responseDiv.style.display = 'block'; }

    if (!endpoint) {
        if (statusBadge) { statusBadge.textContent = 'Unsupported'; statusBadge.className = 'response-status-badge status-4xx'; }
        if (responseBody) {
            createReadOnlyAceEditor(
                responseBody,
                'The interactive console currently supports the streamableHttp transport only. '
                + 'This MCP server exposes a different transport.',
                'text'
            );
        }
        return;
    }

    var payload = __mcpBuildPayload(section);
    if (!payload) return;

    var headers = Object.assign(
        {'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream'},
        getAuthHeaders()
    );

    var originalText = 'Send';
    if (buttonEl) {
        var textSpan = buttonEl.querySelector('span');
        if (textSpan) { originalText = textSpan.textContent; textSpan.textContent = 'Sending...'; }
        buttonEl.disabled = true;
    }

    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: 'POST',
                url: endpoint,
                headers: headers,
                body: JSON.stringify(payload),
            }),
        });
        var data = await resp.json();

        if (buttonEl) {
            var textSpan2 = buttonEl.querySelector('span');
            if (textSpan2) textSpan2.textContent = originalText;
            buttonEl.disabled = false;
        }
        if (responseDiv) responseDiv.classList.remove('empty');

        if (data.error) {
            if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-5xx'; }
            if (responseBody) createReadOnlyAceEditor(responseBody, data.error, 'text');
            if (responseDiv) responseDiv.scrollIntoView({behavior: 'smooth', block: 'nearest'});
            return;
        }

        var status = data.status;
        var statusClass = 'status-' + String(status).charAt(0) + 'xx';
        if (statusBadge) { statusBadge.textContent = status; statusBadge.className = 'response-status-badge ' + statusClass; }

        displayResponseInAceEditors(responseBody, responseHeaders, data);
        if (responseDiv) responseDiv.scrollIntoView({behavior: 'smooth', block: 'nearest'});
    } catch (e) {
        if (buttonEl) {
            var textSpan3 = buttonEl.querySelector('span');
            if (textSpan3) textSpan3.textContent = originalText;
            buttonEl.disabled = false;
        }
        if (responseDiv) { responseDiv.classList.remove('empty'); responseDiv.style.display = 'block'; }
        if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-5xx'; }
        if (responseBody) {
            createReadOnlyAceEditor(
                responseBody,
                'Unable to connect to the server. Please check your network connection and try again.',
                'text'
            );
        }
    }
}

// ============================================================================
// Try It Out — Session TTL Management
// ============================================================================

var _ttlTimerId = null;
var _ttlExpirationTimerId = null;
var _TTL_CHECK_INTERVAL = 30000;
var _SESSION_TTL = 3600000;

async function introspectToken() {
    var token = sessionStorage.getItem('anypoint_token');
    if (!token) return null;
    var serverBase = getSelectedBaseUrl();
    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: 'POST',
                url: serverBase + '/accounts/oauth2/introspect',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token
                },
                body: JSON.stringify({token: token, token_type_hint: 'access_token'})
            })
        });
        var data = await resp.json();
        if (data.error) return null;
        var body = JSON.parse(data.body);
        return body;
    } catch (e) {
        return null;
    }
}

function setTokenExpiration(expMs) {
    sessionStorage.setItem('anypoint_token_expires_at', String(expMs));
    startTtlTimer();
    scheduleExpirationCheck(expMs);
}

function scheduleExpirationCheck(expMs) {
    if (_ttlExpirationTimerId !== null) {
        clearTimeout(_ttlExpirationTimerId);
        _ttlExpirationTimerId = null;
    }
    var delay = expMs - Date.now();
    if (delay <= 0) {
        checkTtlExpiration();
        return;
    }
    _ttlExpirationTimerId = setTimeout(function() {
        _ttlExpirationTimerId = null;
        checkTtlExpiration();
    }, delay);
}

function markTokenExpired() {
    sessionStorage.setItem('anypoint_token_expires_at', '0');
    stopTtlTimer();
    updateAuthSummary();
}

function startTtlTimer() {
    stopTtlTimer();
    _ttlTimerId = setInterval(checkTtlExpiration, _TTL_CHECK_INTERVAL);
}

function stopTtlTimer() {
    if (_ttlTimerId !== null) {
        clearInterval(_ttlTimerId);
        _ttlTimerId = null;
    }
    if (_ttlExpirationTimerId !== null) {
        clearTimeout(_ttlExpirationTimerId);
        _ttlExpirationTimerId = null;
    }
}

async function checkTtlExpiration() {
    var token = sessionStorage.getItem('anypoint_token');
    if (!token) {
        stopTtlTimer();
        return;
    }
    if (!isTokenExpired()) return;

    var result = await introspectToken();
    if (result && result.active === true && result.exp) {
        setTokenExpiration(parseInt(result.exp, 10));
        updateAuthSummary();
    } else if (result && result.active === false) {
        markTokenExpired();
    }
}

async function handleProxyResponse(data) {
    if (data.status === 401) {
        var result = await introspectToken();
        if (result && result.active === true && result.exp) {
            setTokenExpiration(parseInt(result.exp, 10));
        } else {
            markTokenExpired();
        }
    }
}

// ============================================================================
// Try It Out — Environment Variables
// ============================================================================

var ENV_STORAGE_KEY = 'anypoint_env_vars';
var DEFAULT_ENV_VARS = [];

function loadEnvVars() {
    try {
        var stored = sessionStorage.getItem(ENV_STORAGE_KEY);
        if (stored) return JSON.parse(stored);
    } catch (e) {}
    return DEFAULT_ENV_VARS.map(function(v) { return {name: v.name, value: v.value}; });
}

function saveEnvVars() {
    var vars = [];
    var rows = document.querySelectorAll('.env-var-row');
    rows.forEach(function(row) {
        var nameInput = row.querySelector('.env-var-name');
        var valueInput = row.querySelector('.env-var-value');
        if (nameInput && valueInput) {
            var name = nameInput.value.trim();
            if (name) vars.push({name: name, value: valueInput.value});
        }
    });
    sessionStorage.setItem(ENV_STORAGE_KEY, JSON.stringify(vars));

    // Update all playground panels with new environment variable values
    if (typeof updateAllPlaygroundPanelsFromEnvVars === 'function') {
        updateAllPlaygroundPanelsFromEnvVars();
    }
}

function renderEnvVars() {
    var container = document.getElementById('envVarsList');
    if (!container) return;
    var vars = loadEnvVars();
    container.innerHTML = '';
    vars.forEach(function(v, i) {
        var row = document.createElement('div');
        row.className = 'env-var-row';

        // Check if this parameter has x-origin configuration
        var xorigin = GLOBAL_PARAM_X_ORIGIN[v.name];
        var valueHtml = '';
        if (xorigin) {
            var xoriginId = 'envvar-' + v.name;
            var datalistId = 'datalist-envvar-' + v.name;
            var xoriginJson = JSON.stringify(xorigin).replace(/"/g, '&quot;');
            valueHtml = '<div class="x-origin-input-group">' +
                '<input type="text" class="env-var-value" id="' + xoriginId + '" ' +
                'data-x-origin="' + xoriginJson + '" ' +
                'value="' + escapeAttr(v.value) + '" placeholder="Value" ' +
                'onchange="saveEnvVars()" autocomplete="off" list="' + datalistId + '">' +
                '<datalist id="' + datalistId + '"></datalist>' +
                '<button class="btn-load-xorigin" ' +
                'onclick="loadXOriginValuesForEnv(\'' + v.name + '\'); return false;" ' +
                'title="' + escapeAttr(xorigin.description) + '">↻</button>' +
                '</div>';
        } else {
            valueHtml = '<input type="text" class="env-var-value" value="' + escapeAttr(v.value) + '" placeholder="Value" onchange="saveEnvVars()">';
        }

        row.innerHTML =
            '<input type="text" class="env-var-name" value="' + escapeAttr(v.name) + '" placeholder="Variable name" onchange="saveEnvVars()">' +
            valueHtml +
            '<button class="btn-env-remove" onclick="removeEnvVar(this)" title="Remove">&#x2715;</button>';
        container.appendChild(row);
    });
}

function escapeAttr(str) {
    return String(str).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

function addEnvVar() {
    var vars = loadEnvVars();
    vars.push({name: '', value: ''});
    sessionStorage.setItem(ENV_STORAGE_KEY, JSON.stringify(vars));
    renderEnvVars();
    // Focus the new name input
    var rows = document.querySelectorAll('.env-var-row');
    if (rows.length > 0) {
        var lastRow = rows[rows.length - 1];
        var nameInput = lastRow.querySelector('.env-var-name');
        if (nameInput) nameInput.focus();
    }
}

function removeEnvVar(btn) {
    var row = btn.closest('.env-var-row');
    if (row) row.remove();
    saveEnvVars();
}

function getEnvVarsMap() {
    var vars = loadEnvVars();
    var map = {};
    vars.forEach(function(v) {
        if (v.name && v.value) map[v.name] = v.value;
    });
    return map;
}

function applyEnvVarsToPanel(panelId) {
    var panel = document.getElementById(panelId);
    if (!panel) return;
    var envMap = getEnvVarsMap();
    var inputs = panel.querySelectorAll('[data-param]');
    inputs.forEach(function(input) {
        var paramName = input.getAttribute('data-param');
        if (paramName in envMap && !input.value) {
            input.value = envMap[paramName];
        }
    });
}

// ============================================================================
// x-origin Auto-populate with suggestions
// ============================================================================

async function loadXOriginValues(opId, paramName) {
    var input = document.getElementById('xorigin-' + opId + '-' + paramName);
    var datalist = document.getElementById('datalist-' + opId + '-' + paramName);
    if (!input || !datalist) return;

    // Check if authenticated
    var token = sessionStorage.getItem('anypoint_token');
    if (!token) {
        showAuthMessage('Please authenticate first to fetch values.', true);
        return;
    }
    if (isTokenExpired()) {
        showAuthMessage('Token expired. Please re-authenticate to fetch values.', true);
        return;
    }

    // Parse x-origin configuration
    var originJson = input.getAttribute('data-x-origin');
    if (!originJson) return;

    var origin = {};
    try {
        origin = JSON.parse(originJson);
    } catch (e) {
        console.error('Failed to parse x-origin:', e);
        return;
    }

    var apiSlug = origin.api ? origin.api.replace('urn:api:', '') : '';
    var operationId = origin.operation || '';
    var valuesPath = origin.values || '';
    var labelsPath = origin.labels || '';

    if (!apiSlug || !operationId || !valuesPath) {
        console.error('Invalid x-origin configuration');
        return;
    }

    // Get operation metadata
    var opLookup = window.__OP_LOOKUP__ || {};
    var apiEntry = opLookup[apiSlug];
    if (!apiEntry) {
        showAuthMessage('API "' + apiSlug + '" not found in lookup.', true);
        return;
    }

    var opMeta = apiEntry.ops[operationId];
    if (!opMeta) {
        showAuthMessage('Operation "' + operationId + '" not found in ' + apiSlug + '.', true);
        return;
    }

    var method = opMeta.method;
    var pathTemplate = opMeta.path;

    // Build URL - substitute any {param} from environment variables
    var envMap = getEnvVarsMap();
    var path = pathTemplate;
    var missingParams = [];

    var pathParams = (path.match(/\{([^}]+)\}/g) || []).map(function(m) {
        return m.slice(1, -1);
    });

    pathParams.forEach(function(paramName) {
        var value = envMap[paramName];
        if (value) {
            path = path.replace('{' + paramName + '}', encodeURIComponent(value));
        } else {
            missingParams.push(paramName);
        }
    });

    if (missingParams.length > 0) {
        showAuthMessage('Missing path parameters for x-origin: ' + missingParams.join(', ') + '. Set them in environment variables.', true);
        return;
    }

    // Get server URL for the target API
    var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
    var fullUrl = serverUrl + path;

    // Update button state
    var btn = input.nextElementSibling.nextElementSibling; // Skip datalist
    if (btn && btn.classList.contains('btn-load-xorigin')) {
        btn.disabled = true;
        btn.textContent = '⟳';
        btn.classList.add('loading');
    }

    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: method,
                url: fullUrl,
                headers: Object.assign(
                    {'Content-Type': 'application/json'},
                    getAuthHeaders()
                ),
                body: null
            })
        });

        var data = await resp.json();
        await handleProxyResponse(data);

        if (btn) {
            btn.disabled = false;
            btn.textContent = '↻';
            btn.classList.remove('loading');
        }

        if (data.error) {
            showAuthMessage('x-origin fetch error: ' + data.error, true);
            return;
        }

        if (data.status < 200 || data.status >= 300) {
            showAuthMessage('x-origin returned status ' + data.status, true);
            return;
        }

        // Parse response body
        var body = null;
        try {
            body = JSON.parse(data.body || '{}');
        } catch (e) {
            showAuthMessage('x-origin response is not valid JSON', true);
            return;
        }

        // Extract values and labels using paths
        var values = extractXOriginValues(body, valuesPath);
        if (!values || values.length === 0) {
            showAuthMessage('No values found at path: ' + valuesPath, true);
            return;
        }

        var labels = [];
        if (labelsPath) {
            labels = extractXOriginValues(body, labelsPath);
            // Ensure labels array matches values length
            if (labels.length !== values.length) {
                console.warn('Labels count mismatch: ' + labels.length + ' labels vs ' + values.length + ' values. Using values only.');
                labels = [];
            }
        }

        // Populate datalist for autocomplete
        datalist.innerHTML = '';
        values.forEach(function(val, idx) {
            var valueStr = typeof val === 'object' ? JSON.stringify(val) : String(val);
            var labelStr = labels[idx] ? String(labels[idx]) : valueStr;

            var option = document.createElement('option');
            option.value = valueStr;
            // If we have a label different from value, show "label (value)"
            if (labels[idx] && labelStr !== valueStr) {
                option.label = labelStr + ' (' + valueStr + ')';
            } else {
                option.label = valueStr;
            }
            datalist.appendChild(option);
        });

        // Show success message
        var message = 'Loaded ' + values.length + ' suggestion(s) from ' + apiSlug + '#' + operationId;
        if (labelsPath) {
            message += ' with labels';
        }
        message += '. Start typing to see suggestions.';
        showAuthMessage(message, false);

        // Focus the input to show suggestions
        input.focus();

    } catch (e) {
        if (btn) {
            btn.disabled = false;
            btn.textContent = '↻';
            btn.classList.remove('loading');
        }
        showAuthMessage('Unable to connect to the server. Please check your network connection and try again.', true);
    }
}

function extractXOriginValues(responseBody, fieldPath) {
    // Handle array of paths (v2 format supports multiple extraction paths)
    if (Array.isArray(fieldPath)) {
        var allValues = [];
        fieldPath.forEach(function(path) {
            var extracted = extractXOriginValues(responseBody, path);
            if (extracted && extracted.length > 0) {
                allValues = allValues.concat(extracted);
            }
        });
        return allValues;
    }

    // Single path extraction
    if (!fieldPath || !responseBody) {
        if (Array.isArray(responseBody)) return responseBody;
        return [responseBody];
    }

    var result = extractByPath(responseBody, fieldPath);
    if (result === undefined || result === null) return [];
    if (Array.isArray(result)) return result;
    return [result];
}

async function loadXOriginValuesForEnv(paramName) {
    var xorigin = GLOBAL_PARAM_X_ORIGIN[paramName];
    if (!xorigin) return;

    var inputId = 'envvar-' + paramName;
    var input = document.getElementById(inputId);
    var datalistId = 'datalist-envvar-' + paramName;
    var datalist = document.getElementById(datalistId);
    if (!input || !datalist) return;

    // Check if authenticated
    var token = sessionStorage.getItem('anypoint_token');
    if (!token) {
        showAuthMessage('Please authenticate first to fetch values.', true);
        return;
    }
    if (isTokenExpired()) {
        showAuthMessage('Token expired. Please re-authenticate to fetch values.', true);
        return;
    }

    var apiSlug = xorigin.api.replace('urn:api:', '');
    var operationId = xorigin.operation;
    var valuesPath = xorigin.values || '';
    var labelsPath = xorigin.labels || '';

    // Get operation metadata
    var opLookup = window.__OP_LOOKUP__ || {};
    var apiEntry = opLookup[apiSlug];
    if (!apiEntry) {
        showAuthMessage('API "' + apiSlug + '" not found in lookup.', true);
        return;
    }

    var opMeta = apiEntry.ops[operationId];
    if (!opMeta) {
        showAuthMessage('Operation "' + operationId + '" not found in ' + apiSlug + '.', true);
        return;
    }

    var method = opMeta.method;
    var pathTemplate = opMeta.path;

    // Build URL - substitute any {param} from environment variables
    var envMap = getEnvVarsMap();
    var path = pathTemplate;
    var missingParams = [];

    var pathParams = (path.match(/\{([^}]+)\}/g) || []).map(function(m) {
        return m.slice(1, -1);
    });

    pathParams.forEach(function(paramName) {
        var value = envMap[paramName];
        if (value) {
            path = path.replace('{' + paramName + '}', encodeURIComponent(value));
        } else {
            missingParams.push(paramName);
        }
    });

    if (missingParams.length > 0) {
        showAuthMessage('Missing parameters: ' + missingParams.join(', ') + '. Set them in environment variables first.', true);
        return;
    }

    // Get server URL for the target API
    var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
    var fullUrl = serverUrl + path;

    // Update button state
    var btn = input.parentElement.querySelector('.btn-load-xorigin');
    if (btn) {
        btn.disabled = true;
        btn.textContent = '⟳';
        btn.classList.add('loading');
    }

    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: method,
                url: fullUrl,
                headers: Object.assign(
                    {'Content-Type': 'application/json'},
                    getAuthHeaders()
                ),
                body: null
            })
        });

        var data = await resp.json();
        await handleProxyResponse(data);

        if (btn) {
            btn.disabled = false;
            btn.textContent = '↻';
            btn.classList.remove('loading');
        }

        if (data.error) {
            showAuthMessage('Error: ' + data.error, true);
            return;
        }

        if (data.status < 200 || data.status >= 300) {
            showAuthMessage('Request returned status ' + data.status, true);
            return;
        }

        // Parse response body
        var body = null;
        try {
            body = JSON.parse(data.body || '{}');
        } catch (e) {
            showAuthMessage('Response is not valid JSON', true);
            return;
        }

        // Extract values and labels using paths
        var values = extractXOriginValues(body, valuesPath);
        if (!values || values.length === 0) {
            showAuthMessage('No values found at path: ' + valuesPath, true);
            return;
        }

        var labels = [];
        if (labelsPath) {
            labels = extractXOriginValues(body, labelsPath);
            if (labels.length !== values.length) {
                console.warn('Labels count mismatch for ' + paramName + ': ' + labels.length + ' labels vs ' + values.length + ' values.');
                labels = [];
            }
        }

        // Populate datalist for autocomplete
        datalist.innerHTML = '';
        values.forEach(function(val, idx) {
            var valueStr = typeof val === 'object' ? JSON.stringify(val) : String(val);
            var labelStr = labels[idx] ? String(labels[idx]) : valueStr;

            var option = document.createElement('option');
            option.value = valueStr;
            // If we have a label different from value, show "label (value)"
            if (labels[idx] && labelStr !== valueStr) {
                option.label = labelStr + ' (' + valueStr + ')';
            } else {
                option.label = valueStr;
            }
            datalist.appendChild(option);
        });

        // Show success message
        showAuthMessage('Loaded ' + values.length + ' suggestion(s). Start typing to see them.', false);

        // Focus the input to show suggestions
        input.focus();

    } catch (e) {
        if (btn) {
            btn.disabled = false;
            btn.textContent = '↻';
            btn.classList.remove('loading');
        }
        showAuthMessage('Unable to connect to the server. Please check your network connection and try again.', true);
    }
}

// ============================================================================
// Try It Out — Request execution
// ============================================================================

function toggleTryItOut(opId) {
    var section = document.getElementById('op-' + opId);
    if (!section) return;

    var wrapper = section.querySelector('.operation-content-wrapper');
    if (!wrapper) return;

    var isCollapsed = wrapper.classList.contains('try-panel-collapsed');

    // Find the button
    var btn = section.querySelector('.btn-try-it');

    if (isCollapsed) {
        // Expanding - apply env vars first
        applyEnvVarsToPanel('try-' + opId);
        wrapper.classList.remove('try-panel-collapsed');
        if (btn) btn.textContent = 'Hide Try It Out';
    } else {
        // Collapsing
        wrapper.classList.add('try-panel-collapsed');
        if (btn) btn.textContent = 'Try It Out';
    }
}

function toggleTryItOutExpand(opId) {
    var container = document.getElementById('op-container-' + opId);
    if (!container) return;

    var isExpanded = container.classList.contains('try-expanded');
    var btn = container.querySelector('.btn-expand-try');
    var icon = btn ? btn.querySelector('img') : null;
    var responseDiv = document.getElementById('response-' + opId);

    if (isExpanded) {
        // Collapse
        container.classList.remove('try-expanded');
        if (btn) {
            btn.setAttribute('aria-label', 'Expand try it out panel');
            btn.setAttribute('title', 'Expand');
        }
        if (icon) {
            var basePath = icon.src.substring(0, icon.src.lastIndexOf('/'));
            icon.src = basePath + '/expand.svg';
        }
    } else {
        // Expand
        container.classList.add('try-expanded');
        if (btn) {
            btn.setAttribute('aria-label', 'Collapse try it out panel');
            btn.setAttribute('title', 'Collapse');
        }
        if (icon) {
            var basePath = icon.src.substring(0, icon.src.lastIndexOf('/'));
            icon.src = basePath + '/collapse.svg';
        }

        // If response div is hidden, mark it as empty for placeholder
        if (responseDiv && responseDiv.style.display === 'none') {
            responseDiv.classList.add('empty');
        }
    }
}

// ============================================================================
// Server URL resolution
// ============================================================================

// Region × domain matrix. Each domain key maps to the regions that exist on
// that domain. Used to filter out region/domain combinations that have no
// deployed endpoint (e.g. ca1.anypoint.mulesoft.com does not exist).
//
// 'us' is the global anypoint endpoint (no subdomain) — listed under anypoint
// so the matrix stays self-describing.
var DOMAIN_REGIONS = {
    anypoint: ['us', 'eu1'],
    platform: ['ca1', 'jp1', 'in1', 'au1']
};

function _getDomainKeyFromUrl(url) {
    if (!url) return null;
    if (url.indexOf('.platform.mulesoft.com') !== -1) return 'platform';
    if (url.indexOf('.anypoint.mulesoft.com') !== -1) return 'anypoint';
    if (url.indexOf('://anypoint.mulesoft.com') !== -1) return 'anypoint';
    return null;
}

function isServerValidForRegion(server, region) {
    if (!server || !server.url) return false;
    // No region selected = US/global — keep all servers.
    if (region == null || region === '') return true;
    var domain = _getDomainKeyFromUrl(server.url);
    if (!domain) return true; // unknown domain — don't filter
    // If region is not known in any domain, skip filtering (custom/unknown region).
    var allKnown = Object.keys(DOMAIN_REGIONS).reduce(function(acc, k) {
        return acc.concat(DOMAIN_REGIONS[k]);
    }, []);
    if (allKnown.indexOf(region) === -1) return true;
    var hasTemplate = server.url.indexOf('{region}') !== -1 ||
                      server.url.indexOf('{REGION_ID}') !== -1;
    if (hasTemplate) {
        // Template server: valid only for regions served by this domain.
        var domainRegions = DOMAIN_REGIONS[domain] || [];
        return domainRegions.indexOf(region) !== -1;
    }
    // Fixed-URL server: valid only if its URL contains the exact region code.
    return server.url.indexOf(region + '.') !== -1 ||
           server.url.indexOf('/' + region + '.') !== -1;
}

function filterServersForRegion(servers, region) {
    if (!servers || servers.length === 0) return [];
    if (region == null || region === '') return servers.slice();
    var filtered = servers.filter(function(s) { return isServerValidForRegion(s, region); });
    // If region is unknown to the matrix, no server will pass the strict check
    // for either domain — fall back to the unfiltered list to avoid hiding
    // valid endpoints for custom regions the matrix doesn't know about.
    var anypointKnown = (DOMAIN_REGIONS.anypoint || []).indexOf(region) !== -1;
    var platformKnown = (DOMAIN_REGIONS.platform || []).indexOf(region) !== -1;
    if (!anypointKnown && !platformKnown) return servers.slice();
    return filtered;
}

/**
 * Rewrite the host of a mulesoft URL so it uses `region` as subdomain, when
 * the URL belongs to the currently selected server type's domain. Leaves
 * everything else (foreign hosts, us type) untouched.
 *
 * Handles URLs with or without an existing subdomain:
 *   https://anypoint.mulesoft.com/x     + region=aaa, type=eu       -> https://aaa.anypoint.mulesoft.com/x
 *   https://eu1.anypoint.mulesoft.com/x + region=aaa, type=eu       -> https://aaa.anypoint.mulesoft.com/x
 *   https://ca1.platform.mulesoft.com/x + region=aaa, type=platform -> https://aaa.platform.mulesoft.com/x
 *   https://example.com/x               + any                       -> unchanged (foreign host)
 *   any                                 + type=us                   -> unchanged (us has no custom region)
 */
function _rewriteRegionInHost(url, region, type) {
    if (!url || !region || type === 'us') return url;
    var result;
    if (type === 'platform') {
        result = url.replace(/:\/\/(?:[a-z0-9-]+\.)?platform\.mulesoft\.com/,
            '://' + region + '.platform.mulesoft.com');
        if (result !== url) return result;
        // Cross-domain: API only declares anypoint servers but platform region selected.
        return url.replace(/:\/\/(?:[a-z0-9-]+\.)?anypoint\.mulesoft\.com/,
            '://' + region + '.platform.mulesoft.com');
    }
    if (type === 'eu') {
        result = url.replace(/:\/\/(?:[a-z0-9-]+\.)?anypoint\.mulesoft\.com/,
            '://' + region + '.anypoint.mulesoft.com');
        if (result !== url) return result;
        // Cross-domain: API only declares platform servers but anypoint region selected.
        return url.replace(/:\/\/(?:[a-z0-9-]+\.)?platform\.mulesoft\.com/,
            '://' + region + '.anypoint.mulesoft.com');
    }
    return url;
}

function getServerTypeForRegion(region) {
    if (!region || region === 'us') return 'us';
    if ((DOMAIN_REGIONS.anypoint || []).indexOf(region) !== -1) return 'eu';
    if ((DOMAIN_REGIONS.platform || []).indexOf(region) !== -1) return 'platform';
    return null;
}

function _safeSessionGet(key) {
    try {
        var v = sessionStorage.getItem(key);
        return (v && v.length > 0) ? v : null;
    } catch (e) {
        return null;
    }
}

function getSelectedServerType() {
    var region = document.getElementById('regionSelect');
    if (region) {
        if (region.value === 'us') return 'us';
        if (region.value === 'custom') {
            var srv = document.getElementById('serverSelect');
            if (srv && (srv.value === 'eu' || srv.value === 'platform')) return srv.value;
        } else if (region.value) {
            var derived = getServerTypeForRegion(region.value);
            if (derived) return derived;
        }
    }
    // Backward-compat: pre-existing DOM fixtures (tests, legacy sessions before
    // the DOMContentLoaded restore path has run) still use #serverSelect. Only
    // prefer the DOM value when it's a real (non-default) pick — otherwise fall
    // through to sessionStorage so the persisted selection survives the
    // DOMContentLoaded race. See W-22945464.
    var sel = document.getElementById('serverSelect');
    var domValue = sel ? sel.value : null;
    if (domValue && (domValue === 'eu' || domValue === 'platform')) {
        return domValue;
    }
    var stored = _safeSessionGet('anypoint_server_type');
    if (stored === 'eu' || stored === 'platform' || stored === 'us') return stored;
    return 'us';
}

function getSelectedRegion() {
    var type = getSelectedServerType();
    if (type === 'us') return null;
    var region = document.getElementById('regionSelect');
    if (region) {
        if (region.value === 'custom') {
            var customInput = document.getElementById('regionCustomInput');
            if (customInput && customInput.value.trim()) return customInput.value.trim();
            return _safeSessionGet('anypoint_region');
        }
        if (region.value && region.value !== 'us') return region.value;
    }
    // Backward-compat: legacy DOM path (#regionPreset) or persisted value.
    var sel = document.getElementById('serverSelect');
    if (sel && sel.value !== 'us') {
        var preset = document.getElementById('regionPreset');
        if (preset) {
            if (preset.value === 'custom') {
                var customInputLegacy = document.getElementById('regionCustomInput');
                if (customInputLegacy && customInputLegacy.value.trim()) return customInputLegacy.value.trim();
            } else if (preset.value) {
                return preset.value;
            }
        }
    }
    return _safeSessionGet('anypoint_region');
}

function getSelectedBaseUrl() {
    var type = getSelectedServerType();
    var region = getSelectedRegion();
    if (type === 'eu') return 'https://' + (region || 'eu1') + '.anypoint.mulesoft.com';
    if (type === 'platform') return 'https://' + (region || 'ca1') + '.platform.mulesoft.com';
    return 'https://anypoint.mulesoft.com';
}

/**
 * Resolve the effective server for the current region.
 *
 * Reads the region from sessionStorage-backed helpers (getSelectedRegion /
 * getSelectedServerType) and picks the first server in `servers` whose URL
 * matches the region. If no server matches, force-substitutes {region} on
 * servers[0] and returns supported=false so callers can render a notice.
 *
 * Returns {server, url, supported}.
 */
function getEffectiveServer(servers, opId) {
    if (!servers || servers.length === 0) {
        return { server: null, url: '', supported: true };
    }
    var region = getSelectedRegion();
    var type = getSelectedServerType();
    // If no server declares a region-aware host (anypoint/platform), the API
    // is region-agnostic — region doesn't apply, pass through.
    var anyRegionAware = false;
    for (var k = 0; k < servers.length; k++) {
        if (servers[k] && servers[k].url && _getDomainKeyFromUrl(servers[k].url)) {
            anyRegionAware = true;
            break;
        }
    }
    if (!anyRegionAware) {
        return {
            server: servers[0],
            url: resolveServerUrl(servers[0], opId),
            supported: true
        };
    }
    // Custom / unknown region: the API cannot possibly declare a server for a
    // region outside DOMAIN_REGIONS, so treat as unsupported and surface the
    // notice. Pick a server whose domain matches the selected type so the URL
    // rewrite lands on the right host; fall back to servers[0] if none match.
    if (region) {
        var anypointKnown = (DOMAIN_REGIONS.anypoint || []).indexOf(region) !== -1;
        var platformKnown = (DOMAIN_REGIONS.platform || []).indexOf(region) !== -1;
        if (!anypointKnown && !platformKnown) {
            var template = servers[0];
            for (var ci = 0; ci < servers.length; ci++) {
                var cs = servers[ci];
                if (!cs || !cs.url) continue;
                var cd = _getDomainKeyFromUrl(cs.url);
                if ((type === 'eu' && cd === 'anypoint') ||
                    (type === 'platform' && cd === 'platform')) {
                    template = cs;
                    break;
                }
            }
            return {
                server: null,
                url: _rewriteRegionInHost(resolveServerUrl(template, opId), region, type),
                supported: false
            };
        }
    }
    var filtered = filterServersForRegion(servers, region);
    if (filtered && filtered.length > 0) {
        var match = filtered[0];
        return {
            server: match,
            url: _rewriteRegionInHost(resolveServerUrl(match, opId), region, type),
            supported: true
        };
    }
    // No server declared for this region: force-substitute {region} on the
    // first server (template) so the URL still reflects the selected region.
    // resolveServerUrl already reads region from getSelectedRegion(), so a
    // template with {region} yields the forced URL naturally. For fixed-URL
    // servers we return the raw URL as best-effort.
    var fallback = servers[0];
    return {
        server: null,
        url: _rewriteRegionInHost(resolveServerUrl(fallback, opId), region, type),
        supported: false
    };
}

/**
 * Detect an omni host (omni.mulesoft.com), with or without an existing
 * subdomain. omni is a product-specific host — neither anypoint nor platform —
 * so it's invisible to _getDomainKeyFromUrl / DOMAIN_REGIONS. MCP-only.
 */
function _isOmniHost(url) {
    return !!url && /:\/\/(?:[a-z0-9-]+\.)?omni\.mulesoft\.com/.test(url);
}

/**
 * Rewrite the host of an omni URL so it uses `region` as subdomain. Strips any
 * existing subdomain first to avoid double-prefixing, and leaves the path
 * (e.g. /mcp/ or /mcp-sse/sse) untouched. Ignores server type — omni is a
 * single undifferentiated domain, unlike anypoint/platform. MCP-only.
 *
 *   https://omni.mulesoft.com/mcp/         + region=eu1 -> https://eu1.omni.mulesoft.com/mcp/
 *   https://omni.mulesoft.com/mcp-sse/sse  + region=jp1 -> https://jp1.omni.mulesoft.com/mcp-sse/sse
 *   https://eu1.omni.mulesoft.com/mcp/     + region=aaa -> https://aaa.omni.mulesoft.com/mcp/
 */
function _rewriteOmniRegionInHost(url, region) {
    if (!url || !region) return url;
    return url.replace(/:\/\/(?:[a-z0-9-]+\.)?omni\.mulesoft\.com/,
        '://' + region + '.omni.mulesoft.com');
}

/**
 * Resolve the effective MCP remote for the current region.
 *
 * remotes[].url is always fully qualified (MCP registry schema — no templates).
 * Matching is done by domain-key inference on the host and comparing against
 * the selected region.
 *
 * Returns {remote, url, supported}.
 */
function getEffectiveMcpRemote(remotes) {
    if (!remotes || remotes.length === 0) {
        return { remote: null, url: '', supported: true };
    }
    var region = getSelectedRegion();
    var type = getSelectedServerType();
    // Omni (omni.mulesoft.com) is a product-specific host that DOES deploy
    // per-region but is invisible to the anypoint/platform domain logic below.
    // Prefix the selected region as a subdomain regardless of server type;
    // no region (== us) keeps the bare host. supported stays true — MCP never
    // surfaces a region notice.
    if (_isOmniHost(remotes[0].url)) {
        if (region == null || region === '') {
            return { remote: remotes[0], url: remotes[0].url, supported: true };
        }
        return {
            remote: remotes[0],
            url: _rewriteOmniRegionInHost(remotes[0].url, region),
            supported: true
        };
    }
    // No region selected == 'us' == pass-through: first remote wins.
    if (region == null || region === '') {
        return { remote: remotes[0], url: remotes[0].url, supported: true };
    }
    // If no remote declares a region-aware host (anypoint/platform), the
    // server is region-agnostic — region doesn't apply, pass through.
    var anyRegionAware = false;
    for (var k = 0; k < remotes.length; k++) {
        if (remotes[k] && remotes[k].url && _getDomainKeyFromUrl(remotes[k].url)) {
            anyRegionAware = true;
            break;
        }
    }
    if (!anyRegionAware) {
        return { remote: remotes[0], url: remotes[0].url, supported: true };
    }
    var anypointKnown = (DOMAIN_REGIONS.anypoint || []).indexOf(region) !== -1;
    var platformKnown = (DOMAIN_REGIONS.platform || []).indexOf(region) !== -1;
    // Custom / unknown region: no remote can declare this region, so mark as
    // unsupported and rewrite the first suitable host to the custom subdomain
    // so "Try it" still fires against the selected region.
    if (!anypointKnown && !platformKnown) {
        for (var j = 0; j < remotes.length; j++) {
            var rj = remotes[j];
            if (!rj || !rj.url) continue;
            var djd = _getDomainKeyFromUrl(rj.url);
            if ((type === 'eu' && djd === 'anypoint') ||
                (type === 'platform' && djd === 'platform')) {
                return {
                    remote: null,
                    url: _rewriteRegionInHost(rj.url, region, type),
                    supported: false
                };
            }
        }
        return {
            remote: null,
            url: _rewriteRegionInHost(remotes[0].url, region, type),
            supported: false
        };
    }
    for (var i = 0; i < remotes.length; i++) {
        var r = remotes[i];
        if (!r || !r.url) continue;
        var domain = _getDomainKeyFromUrl(r.url);
        if (!domain) continue;
        var domainRegions = DOMAIN_REGIONS[domain] || [];
        if (domainRegions.indexOf(region) === -1) continue;
        // 'us' is the global anypoint endpoint (no subdomain).
        if (region === 'us') {
            if (r.url.indexOf('://anypoint.mulesoft.com') !== -1) {
                return { remote: r, url: r.url, supported: true };
            }
            continue;
        }
        if (r.url.indexOf(region + '.') !== -1) {
            return { remote: r, url: r.url, supported: true };
        }
    }
    return {
        remote: null,
        url: _rewriteRegionInHost(remotes[0].url, region, type),
        supported: false
    };
}

/**
 * Pick the right server template from a servers array based on region selection.
 * If region is set, pick the server whose URL contains {region} (or similar region var).
 * Otherwise pick the first server (typically the global one).
 */
function pickServerTemplate(servers) {
    if (!servers || servers.length === 0) return null;
    var type = getSelectedServerType();
    if (type === 'eu') {
        for (var i = 0; i < servers.length; i++) {
            if (servers[i].url.indexOf('.anypoint.mulesoft.com') !== -1 &&
                servers[i].url.indexOf('{region}') !== -1) return servers[i];
        }
        for (var i = 0; i < servers.length; i++) {
            if (servers[i].url.indexOf('eu1.anypoint.mulesoft.com') !== -1) return servers[i];
        }
    } else if (type === 'platform') {
        for (var i = 0; i < servers.length; i++) {
            if (servers[i].url.indexOf('platform.mulesoft.com') !== -1) return servers[i];
        }
    }
    return servers[0];
}

/**
 * Get the list of server variables that are NOT region-related.
 * These need user input in the operation UI.
 */
function getNonRegionVars(server) {
    if (!server || !server.variables) return {};
    var result = {};
    for (var vname in server.variables) {
        if (vname !== 'region' && vname !== 'REGION_ID') {
            result[vname] = server.variables[vname];
        }
    }
    return result;
}

/**
 * Resolve a server URL template by substituting all variables.
 * - region/REGION_ID: uses the auth panel selection
 * - other vars: uses values from the operation's server-var inputs, or defaults
 */
function resolveServerUrl(server, opId) {
    if (!server) return 'https://anypoint.mulesoft.com';
    var url = server.url;
    var vars = server.variables || {};
    var region = getSelectedRegion();

    for (var vname in vars) {
        var placeholder = '{' + vname + '}';
        if (url.indexOf(placeholder) === -1) continue;

        if (vname === 'region' || vname === 'REGION_ID') {
            url = url.replace(placeholder, region || vars[vname].default || '');
        } else {
            // Look for input in the operation's server-vars section
            var value = vars[vname].default || '';
            if (opId) {
                var input = document.querySelector('#server-vars-' + opId + ' [data-server-var="' + vname + '"]');
                if (input && input.value.trim()) {
                    value = input.value.trim();
                }
            }
            url = url.replace(placeholder, value);
        }
    }
    return url;
}

/**
 * Get the resolved server URL for the current API page.
 * Uses the per-operation selection if available.
 */
function getSelectedServer(opId) {
    var meta = window.__API_META__;
    if (!meta || !meta.servers) return 'https://anypoint.mulesoft.com';
    return getEffectiveServer(meta.servers, opId).url;
}

/**
 * Get the resolved server URL for a cross-API call (x-origin).
 */
function getServerForApi(apiSlug) {
    var opLookup = window.__OP_LOOKUP__;
    if (opLookup && opLookup[apiSlug] && opLookup[apiSlug].servers && opLookup[apiSlug].servers.length > 0) {
        return getEffectiveServer(opLookup[apiSlug].servers, null).url;
    }
    return getSelectedServer(null);
}

var _REGION_LABELS = {
    eu1: 'Europe (eu1)',
    ca1: 'Canada (ca1)',
    jp1: 'Japan (jp1)',
    in1: 'India (in1)',
    au1: 'Australia (au1)'
};

function _regionLabel(r) {
    return _REGION_LABELS[r] || r;
}

function onServerChange() {
    // Called from the Custom sub-row: user picked a different server domain
    // while regionSelect === 'custom'. Region select and preset are no longer
    // touched here.
    var sel = document.getElementById('serverSelect');
    if (sel) sessionStorage.setItem('anypoint_server_type', sel.value);
    sessionStorage.setItem('anypoint_region', getSelectedRegion() || '');
    updateAuthSummary();
    updateAllServerBars();
    updateAllMcpUrls();
    initStepUrlBars();
    updateAllPlaygroundUrls();
}

function onRegionSelectChange() {
    var regionSelect = document.getElementById('regionSelect');
    var customRow    = document.getElementById('customServerRow');
    var serverSelect = document.getElementById('serverSelect');
    var customInput  = document.getElementById('regionCustomInput');
    if (!regionSelect) return;
    var val = regionSelect.value;
    if (val === 'custom') {
        if (customRow) customRow.style.display = 'flex';
        var type = (serverSelect && serverSelect.value) || 'eu';
        sessionStorage.setItem('anypoint_server_type', type);
        sessionStorage.setItem(
            'anypoint_region',
            (customInput && customInput.value.trim()) || ''
        );
        if (customInput) customInput.focus();
    } else {
        if (customRow) customRow.style.display = 'none';
        var derived = getServerTypeForRegion(val);
        sessionStorage.setItem('anypoint_server_type', derived);
        sessionStorage.setItem('anypoint_region', val === 'us' ? '' : val);
        if (serverSelect && derived !== 'us') serverSelect.value = derived;
    }
    updateAuthSummary();
    updateAllServerBars();
    updateAllMcpUrls();
    initStepUrlBars();
    updateAllPlaygroundUrls();
}

/**
 * Initialize per-operation URL bars. Called from DOMContentLoaded.
 */
function initOperationUrls() {
    var meta = window.__API_META__;
    if (!meta || !meta.servers || meta.servers.length === 0) return;

    var bars = document.querySelectorAll('.operation-url-bar[data-path]');
    bars.forEach(function(bar) {
        var opId = bar.getAttribute('data-op-id');
        var path = bar.getAttribute('data-path');
        buildUrlBar(bar, opId, path, meta.servers);
    });
}

function buildUrlBar(bar, opId, path, servers) {
    bar.innerHTML = '';
    _clearRegionNotice(bar);

    var effective = getEffectiveServer(servers, opId);
    var fullUrl = effective.url + path;

    var urlText = document.createElement('span');
    urlText.className = 'url-text-plain';
    urlText.textContent = fullUrl;
    bar.appendChild(urlText);

    if (!effective.supported) {
        _placeRegionNotice(bar, _regionNoticeText('api', getSelectedRegion()));
    }
}

/**
 * Remove any previously-placed region notice for this url bar. Called at the
 * top of each render so region changes don't leave stale notices behind.
 * Searches the operation header (or the url-bar's parent, if the bar is not
 * inside a header — supports test harnesses with minimal wrappers).
 */
function _clearRegionNotice(bar) {
    var host = bar.closest ? bar.closest('.operation-header-detail') : null;
    if (!host && bar.parentElement) host = bar.parentElement;
    if (!host) return;
    var old = host.querySelector('.operation-region-notice');
    if (old) old.remove();
}

/**
 * Place the region notice one line above the method + URL row when the url
 * bar lives inside an .operation-header-detail; fall back to a sibling of the
 * url bar otherwise (test harnesses that build a bare wrapper).
 */
function _placeRegionNotice(bar, text) {
    var notice = document.createElement('div');
    notice.className = 'operation-region-notice';
    notice.setAttribute('role', 'status');
    notice.setAttribute('aria-live', 'polite');
    // TODO(marcelo): confirm final copy before shipping.
    notice.textContent = text;

    var header = bar.closest ? bar.closest('.operation-header-detail') : null;
    if (header) {
        var titleRow = header.querySelector('.operation-title-row');
        if (titleRow) {
            header.insertBefore(notice, titleRow);
            return;
        }
        header.insertBefore(notice, header.firstChild);
        return;
    }
    if (bar.parentElement) {
        bar.parentElement.insertBefore(notice, bar);
    } else {
        bar.appendChild(notice);
    }
}

function _regionNoticeText(kind, region) {
    var label = region ? String(region).toUpperCase() : 'this region';
    var subject = kind === 'mcp' ? 'This MCP server' : 'This API';
    return subject + ' is not available in ' + label +
           ', you may see authentication or data-scope errors.';
}

/**
 * Update all URL bars with current resolved server URLs.
 * Called when region or server variables change.
 */
function updateAllServerBars() {
    var meta = window.__API_META__;
    if (!meta || !meta.servers || meta.servers.length === 0) return;

    var bars = document.querySelectorAll('.operation-url-bar[data-path]');
    bars.forEach(function(bar) {
        var opId = bar.getAttribute('data-op-id');
        var path = bar.getAttribute('data-path');
        buildUrlBar(bar, opId, path, meta.servers);
    });
}

function initMcpUrls() {
    var meta = window.__API_META__;
    if (!meta || !meta.servers || meta.servers.length === 0) return;

    var bars = document.querySelectorAll('.operation-url-bar[data-mcp="1"]');
    bars.forEach(function(bar) {
        _renderMcpUrlBar(bar, meta.servers);
    });
}

function updateAllMcpUrls() {
    var meta = window.__API_META__;
    if (!meta || !meta.servers || meta.servers.length === 0) return;

    var bars = document.querySelectorAll('.operation-url-bar[data-mcp="1"]');
    bars.forEach(function(bar) {
        _renderMcpUrlBar(bar, meta.servers);
    });
}

function updateAllPlaygroundUrls() {
    var opLookup = window.__OP_LOOKUP__ || {};
    var panels = document.querySelectorAll('[id^="playground-panel-"]');
    panels.forEach(function(panel) {
        if (!panel.dataset.initialized) return;
        var apiUrn = panel.dataset.wfApi;
        if (!apiUrn) return;
        var apiSlug = apiUrn.replace('urn:api:', '');
        var apiEntry = opLookup[apiSlug];
        var effective;
        if (apiEntry && apiEntry.servers && apiEntry.servers.length > 0) {
            effective = getEffectiveServer(apiEntry.servers, null);
        } else {
            effective = { server: null, url: getSelectedServer(null), supported: true };
        }
        var serverUrl = effective.url.replace(/\/$/, '');
        var serverPart = panel.querySelector('.url-server-part');
        if (serverPart) serverPart.textContent = serverUrl;
        var notice = panel.querySelector('.operation-region-notice');
        if (notice) {
            if (effective.supported) {
                notice.style.display = 'none';
                notice.textContent = '';
            } else {
                notice.style.display = '';
                notice.textContent = _regionNoticeText('api', getSelectedRegion());
            }
        }
    });
}

function _renderMcpUrlBar(bar, remotes) {
    bar.innerHTML = '';
    _clearRegionNotice(bar);

    var effective = getEffectiveMcpRemote(remotes);

    var urlText = document.createElement('span');
    urlText.className = 'url-text-plain';
    urlText.textContent = effective.url;
    bar.appendChild(urlText);

    // MCP never surfaces a region-availability notice (product decision):
    // the URL always reflects the selected region and "Try it" fires against
    // it, so no "not available in this region" warning is shown for MCP.
}

/**
 * Build server variable inputs for operations that have non-region variables.
 */
function initServerVarInputs() {
    var meta = window.__API_META__;
    if (!meta || !meta.servers || meta.servers.length === 0) return;

    var server = pickServerTemplate(meta.servers);
    if (!server) return;

    var nonRegionVars = getNonRegionVars(server);
    var varNames = Object.keys(nonRegionVars);
    if (varNames.length === 0) return;

    // Find all server-vars containers and populate them
    var containers = document.querySelectorAll('.try-server-vars');
    containers.forEach(function(container) {
        var opId = container.id.replace('server-vars-', '');
        container.style.display = '';
        container.innerHTML = '<h5 class="try-server-vars-title">Server Variables</h5>';

        varNames.forEach(function(vname) {
            var vdef = nonRegionVars[vname];
            var row = document.createElement('div');
            row.className = 'try-param-row';

            var label = document.createElement('label');
            var nameWrapper = document.createElement('span');
            nameWrapper.className = 'param-name-wrapper';
            var code = document.createElement('code');
            code.textContent = vname;
            nameWrapper.appendChild(code);
            label.appendChild(nameWrapper);

            if (vdef.description) {
                var infoWrapper = document.createElement('span');
                infoWrapper.className = 'param-info-wrapper';
                infoWrapper.setAttribute('data-tooltip', vdef.description);
                var infoIcon = document.createElement('span');
                infoIcon.className = 'param-info-icon';
                infoIcon.setAttribute('aria-label', 'more-info');
                infoWrapper.appendChild(infoIcon);
                label.appendChild(infoWrapper);
            }

            var input = document.createElement('input');
            input.type = 'text';
            input.setAttribute('data-server-var', vname);
            input.placeholder = vdef.description || vname;
            input.value = vdef.default || '';
            input.addEventListener('input', function() {
                updateAllServerBars();
            });

            row.appendChild(label);
            row.appendChild(input);
            container.appendChild(row);
        });
    });
}

/**
 * Replace .step-url-bar placeholders in skill step_yaml templates with URL bars.
 */
function initStepUrlBars() {
    var opLookup = window.__OP_LOOKUP__ || {};
    var bars = document.querySelectorAll('.step-url-bar');
    bars.forEach(function(bar) {
        var apiSlug = bar.getAttribute('data-api-slug');
        var operationId = bar.getAttribute('data-operation-id');
        var link = bar.getAttribute('data-link');
        var apiEntry = opLookup[apiSlug];
        if (!apiEntry) return;
        var opMeta = apiEntry.ops[operationId];
        if (!opMeta) return;
        var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
        bar.innerHTML = buildUrlBarHtml(opMeta.method, serverUrl, opMeta.path, link);
    });
}

// Custom parameter management
function addCustomParam(opId, location) {
    const containerId = location === 'query' ? 'custom-query-' + opId : 'custom-header-' + opId;
    const container = document.getElementById(containerId);
    if (!container) return;

    const paramRow = document.createElement('div');
    paramRow.className = 'custom-param-row';

    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.placeholder = location === 'query' ? 'Parameter name' : 'Header name';
    nameInput.className = 'custom-param-name';

    const valueInput = document.createElement('input');
    valueInput.type = 'text';
    valueInput.placeholder = 'Value';
    valueInput.className = 'custom-param-value';
    valueInput.setAttribute('data-param', '');
    valueInput.setAttribute('data-in', location);

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'btn-remove-custom-param';
    removeBtn.textContent = '×';
    removeBtn.onclick = function() {
        paramRow.remove();
    };

    // Update data-param when name changes
    nameInput.addEventListener('input', function() {
        valueInput.setAttribute('data-param', nameInput.value);
    });

    const inputsWrapper = document.createElement('div');
    inputsWrapper.appendChild(nameInput);
    inputsWrapper.appendChild(valueInput);

    paramRow.appendChild(inputsWrapper);
    paramRow.appendChild(removeBtn);
    container.appendChild(paramRow);

    nameInput.focus();
}

// Custom parameter management for x-origin modal
function addCustomParamXOrigin(sourceIdx, location) {
    const containerId = location === 'query' ? 'custom-query-xorigin-' + sourceIdx : 'custom-header-xorigin-' + sourceIdx;
    const container = document.getElementById(containerId);
    if (!container) return;

    const paramRow = document.createElement('div');
    paramRow.className = 'custom-param-row';

    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.placeholder = location === 'query' ? 'Parameter name' : 'Header name';
    nameInput.className = 'custom-param-name';

    const valueInput = document.createElement('input');
    valueInput.type = 'text';
    valueInput.placeholder = 'Value';
    valueInput.className = 'custom-param-value';
    valueInput.setAttribute('data-param', '');
    valueInput.setAttribute('data-in', location);

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'btn-remove-custom-param';
    removeBtn.textContent = '×';
    removeBtn.onclick = function() {
        paramRow.remove();
    };

    // Update data-param when name changes
    nameInput.addEventListener('input', function() {
        valueInput.setAttribute('data-param', nameInput.value);
    });

    const inputsWrapper = document.createElement('div');
    inputsWrapper.appendChild(nameInput);
    inputsWrapper.appendChild(valueInput);

    paramRow.appendChild(inputsWrapper);
    paramRow.appendChild(removeBtn);
    container.appendChild(paramRow);

    nameInput.focus();
}

// Custom parameter management for workflow steps
function addCustomParamWf(sid, location) {
    const containerId = location === 'query' ? 'custom-query-wf-' + sid : 'custom-header-wf-' + sid;
    const container = document.getElementById(containerId);
    if (!container) return;

    const paramRow = document.createElement('div');
    paramRow.className = 'custom-param-row';

    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.placeholder = location === 'query' ? 'Parameter name' : 'Header name';
    nameInput.className = 'custom-param-name';

    const valueInput = document.createElement('input');
    valueInput.type = 'text';
    valueInput.placeholder = 'Value';
    valueInput.className = 'custom-param-value';
    valueInput.setAttribute('data-wf-param', '');
    valueInput.setAttribute('data-in', location);

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'btn-remove-custom-param';
    removeBtn.textContent = '×';
    removeBtn.onclick = function() {
        paramRow.remove();
    };

    // Update data-wf-param when name changes
    nameInput.addEventListener('input', function() {
        valueInput.setAttribute('data-wf-param', nameInput.value);
    });

    const inputsWrapper = document.createElement('div');
    inputsWrapper.appendChild(nameInput);
    inputsWrapper.appendChild(valueInput);

    paramRow.appendChild(inputsWrapper);
    paramRow.appendChild(removeBtn);
    container.appendChild(paramRow);

    nameInput.focus();
}

function copyCurlCommand(opId, buttonEl) {
    // Try to find regular API operation section first
    var section = document.getElementById('op-' + opId);
    var tryPanel = document.getElementById('try-' + opId);
    var method, pathTemplate, serverUrl;

    // If not found, check if this is a playground panel (format: skillSlug-stepIndex)
    if (!section || !tryPanel) {
        var playgroundPanel = document.getElementById('playground-panel-' + opId);
        if (!playgroundPanel) {
            console.error('Could not find operation or playground panel for:', opId);
            return;
        }

        // Get operation metadata from __OP_LOOKUP__
        var apiUrn = playgroundPanel.dataset.wfApi;
        var operationId = playgroundPanel.dataset.wfOperation;
        if (!apiUrn || !operationId) {
            console.error('Playground panel missing API or operation data');
            return;
        }

        var apiSlug = apiUrn.replace('urn:api:', '');
        var opLookup = window.__OP_LOOKUP__ || {};
        var apiEntry = opLookup[apiSlug];
        if (!apiEntry) {
            console.error('API not found in lookup:', apiSlug);
            return;
        }

        var opMeta = apiEntry.ops[operationId];
        if (!opMeta) {
            console.error('Operation not found in lookup:', operationId);
            return;
        }

        method = opMeta.method;
        pathTemplate = opMeta.path;
        serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
        tryPanel = playgroundPanel; // Use the playground panel as the input source
    } else {
        // Regular API operation page
        method = section.getAttribute('data-method');
        pathTemplate = section.getAttribute('data-path');
        serverUrl = getSelectedServer(opId).replace(/\/$/, '');
    }

    // Collect parameters
    var path = pathTemplate;
    var queryParams = [];
    var extraHeaders = {};

    var inputs = tryPanel.querySelectorAll('[data-param]');
    inputs.forEach(function(input) {
        var name = input.getAttribute('data-param');
        var location = input.getAttribute('data-in');
        var value = input.value;
        if (!value) return;

        if (location === 'path') {
            path = path.replace('{' + name + '}', encodeURIComponent(value));
        } else if (location === 'query') {
            queryParams.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
        } else if (location === 'header') {
            extraHeaders[name] = value;
        }
    });

    // Build full URL
    var fullUrl = serverUrl + path;
    if (queryParams.length > 0) {
        fullUrl += '?' + queryParams.join('&');
    }

    // Request body
    var body = null;
    var bodyEditor = getCodeMirrorEditor('body-' + opId);
    if (bodyEditor) {
        var editorContent = bodyEditor.getValue();
        if (editorContent.trim()) {
            body = editorContent.trim();
        }
    }

    // Headers
    var headers = Object.assign(
        {'Content-Type': 'application/json'},
        getAuthHeaders(),
        extraHeaders
    );

    // Build cURL command
    var curlCommand = 'curl -X ' + method + ' \\\n';
    curlCommand += '  "' + fullUrl + '"';

    // Add headers
    for (var headerName in headers) {
        curlCommand += ' \\\n  -H "' + headerName + ': ' + headers[headerName] + '"';
    }

    // Add body if present
    if (body) {
        // Escape single quotes in body
        var escapedBody = body.replace(/'/g, "'\\''");
        curlCommand += ' \\\n  -d \'' + escapedBody + '\'';
    }

    // Copy to clipboard
    navigator.clipboard.writeText(curlCommand).then(function() {
        // Show "Copied" feedback on button
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) {
                var originalText = textSpan.textContent;
                textSpan.textContent = 'Copied';

                setTimeout(function() {
                    textSpan.textContent = originalText;
                }, 1500);
            }
        }
    }).catch(function(err) {
        console.error('Failed to copy cURL command:', err);
        alert('Failed to copy to clipboard. Please try again.');
    });
}

function copyXOriginMcpCurl(xoriginOpId, sourceIdx, buttonEl) {
    var currentModal = xOriginModalStack[xOriginModalStack.length - 1];
    if (!currentModal) return;
    var origin = currentModal.origins[sourceIdx];
    var mcpSlug = (origin.api || '').replace('urn:mcp:', '');
    var toolName = origin.operation || '';

    var endpoint = getMcpEndpointForSlug(mcpSlug);
    if (!endpoint) return;

    var sourceDiv = document.querySelector('.xorigin-source[data-source-idx="' + sourceIdx + '"]');
    if (!sourceDiv) return;

    var args = {};
    sourceDiv.querySelectorAll('input[data-param], select[data-param]').forEach(function(input) {
        var name = input.getAttribute('data-param');
        var val = input.value;
        if (val) {
            var dtype = input.getAttribute('data-type') || 'string';
            if (dtype === 'integer') args[name] = parseInt(val, 10);
            else if (dtype === 'number') args[name] = parseFloat(val);
            else if (dtype === 'boolean') args[name] = val === 'true';
            else args[name] = val;
        }
    });
    sourceDiv.querySelectorAll('.try-request-editor-cm[data-param]').forEach(function(div) {
        var name = div.getAttribute('data-param');
        var editor = getCodeMirrorEditor(div.id);
        if (editor) {
            var raw = editor.getValue();
            try { args[name] = JSON.parse(raw); } catch (e) { args[name] = raw; }
        }
    });

    var payload = {
        jsonrpc: '2.0',
        id: 1,
        method: 'tools/call',
        params: { name: toolName, arguments: args }
    };

    var headers = Object.assign(
        {'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream'},
        getAuthHeaders()
    );

    var curlCommand = 'curl -X POST \\\n';
    curlCommand += '  "' + endpoint + '"';
    for (var headerName in headers) {
        curlCommand += ' \\\n  -H "' + headerName + ': ' + headers[headerName] + '"';
    }
    var escapedBody = JSON.stringify(payload).replace(/'/g, "'\\''");
    curlCommand += ' \\\n  -d \'' + escapedBody + '\'';

    navigator.clipboard.writeText(curlCommand).then(function() {
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) {
                var originalText = textSpan.textContent;
                textSpan.textContent = 'Copied';
                setTimeout(function() { textSpan.textContent = originalText; }, 1500);
            }
        }
    }).catch(function(err) {
        console.error('Failed to copy cURL command:', err);
    });
}

function toggleSendDropdown(opId) {
    var dropdown = document.getElementById('send-dropdown-' + opId);
    if (!dropdown) return;

    var isVisible = dropdown.style.display !== 'none';

    // Close all other dropdowns first
    document.querySelectorAll('.send-dropdown-menu').forEach(function(d) {
        d.style.display = 'none';
    });

    dropdown.style.display = isVisible ? 'none' : 'block';
}

function closeSendDropdown(opId) {
    var dropdown = document.getElementById('send-dropdown-' + opId);
    if (dropdown) {
        dropdown.style.display = 'none';
    }
}

function copyCurlFromTerminal(button) {
    // Find the terminal-content element (the code block)
    var terminalWindow = button.closest('.terminal-window');
    if (!terminalWindow) return;

    var terminalContent = terminalWindow.querySelector('.terminal-content code');
    if (!terminalContent) return;

    // Get the text content (this will strip HTML tags)
    var curlCommand = terminalContent.textContent || terminalContent.innerText;

    // Copy to clipboard
    navigator.clipboard.writeText(curlCommand).then(function() {
        // Show "Copied" feedback
        var originalHTML = button.innerHTML;
        button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
        button.style.color = '#04844B';

        // Reset after 1.5 seconds
        setTimeout(function() {
            button.innerHTML = originalHTML;
            button.style.color = '';
        }, 1500);
    }).catch(function(err) {
        console.error('Failed to copy cURL command:', err);
        alert('Failed to copy to clipboard. Please try again.');
    });
}

// ============================================================================
// Skill Actions Dropdown
// ============================================================================

function toggleSkillDropdown(slug) {
    var menu = document.getElementById('skill-dropdown-menu-' + slug);
    if (!menu) return;
    var toggle = menu.closest('.skill-split-btn').querySelector('.skill-split-toggle');

    // Close any other open skill dropdowns
    document.querySelectorAll('.skill-dropdown-menu').forEach(function(m) {
        if (m !== menu && m.style.display !== 'none') {
            m.style.display = 'none';
            var t = m.closest('.skill-split-btn').querySelector('.skill-split-toggle');
            if (t) t.setAttribute('aria-expanded', 'false');
        }
    });

    var isVisible = menu.style.display !== 'none';
    menu.style.display = isVisible ? 'none' : 'block';
    if (toggle) toggle.setAttribute('aria-expanded', isVisible ? 'false' : 'true');
}

// ============================================================================
// Terraform Version Dropdown
// ============================================================================

function toggleTfVersionDropdown(toggleEl) {
    var root = toggleEl.closest('.tf-version-dropdown');
    if (!root) return;
    var menu = root.querySelector('.tf-version-dropdown-menu');
    if (!menu) return;
    var isOpen = !menu.hasAttribute('hidden');
    document.querySelectorAll('.tf-version-dropdown-menu').forEach(function (m) {
        if (m !== menu) {
            m.setAttribute('hidden', '');
            var t = m.parentElement.querySelector('.tf-version-dropdown-toggle');
            if (t) t.setAttribute('aria-expanded', 'false');
        }
    });
    if (isOpen) {
        menu.setAttribute('hidden', '');
        toggleEl.setAttribute('aria-expanded', 'false');
    } else {
        menu.removeAttribute('hidden');
        toggleEl.setAttribute('aria-expanded', 'true');
    }
}

function navigateTfVersion(itemEl) {
    var root = itemEl.closest('.tf-version-dropdown');
    if (!root) return;
    var target = itemEl.dataset.version;
    var current = root.dataset.currentVersion;
    if (!target || target === current) return;
    var anchorsEl = root.querySelector('#tf-version-anchors');
    var anchors = {};
    if (anchorsEl) {
        try { anchors = JSON.parse(anchorsEl.textContent) || {}; } catch (e) { anchors = {}; }
    }
    var hash = window.location.hash;
    var fragment = (hash.indexOf('#doc-') === 0) ? hash.slice('#doc-'.length) : '';
    var slugs = anchors[target] || [];
    var has = fragment && slugs.indexOf(fragment) !== -1;
    window.location.href = target + '.html' + (has ? '#doc-' + fragment : '');
}

document.addEventListener('click', function (ev) {
    if (ev.target.closest('.tf-version-dropdown')) return;
    document.querySelectorAll('.tf-version-dropdown-menu').forEach(function (m) {
        m.setAttribute('hidden', '');
        var t = m.parentElement.querySelector('.tf-version-dropdown-toggle');
        if (t) t.setAttribute('aria-expanded', 'false');
    });
});

function openInstallModal(slug) {
    var modal = document.getElementById('install-modal-' + slug);
    if (modal) modal.style.display = 'flex';
    _closeAllSkillDropdowns();
}

function closeInstallModal(slug) {
    var modal = document.getElementById('install-modal-' + slug);
    if (modal) modal.style.display = 'none';
}

function copyInstallFromModal(slug, buttonEl) {
    var codeEl = document.getElementById('install-cmd-' + slug);
    if (!codeEl) return;
    var command = codeEl.textContent;
    navigator.clipboard.writeText(command).then(function() {
        closeInstallModal(slug);
        // Show feedback on the main split button
        var actions = document.getElementById('skill-actions-' + slug);
        if (!actions) return;
        var mainBtn = actions.querySelector('.skill-split-main');
        if (!mainBtn) return;
        _showSkillCopiedFeedback(mainBtn);
    }).catch(function(err) {
        console.error('Failed to copy install command:', err);
    });
}

function copySkillContent(slug, buttonEl) {
    var url = '../skills/' + slug + '/SKILL.md';
    fetch(url).then(function(res) { return res.text(); }).then(function(content) {
        navigator.clipboard.writeText(content).then(function() {
            _showSkillCopiedFeedback(buttonEl);
        });
    }).catch(function(err) {
        console.error('Failed to copy skill content:', err);
    });
    _closeAllSkillDropdowns();
}

function _showSkillCopiedFeedback(buttonEl) {
    if (!buttonEl) return;
    var splitBtn = buttonEl.closest('.skill-split-btn');
    if (!splitBtn) return;
    var mainBtn = splitBtn.querySelector('.skill-split-main');
    if (!mainBtn) return;
    var label = mainBtn.querySelector('span');
    if (!label) return;
    var saved = label.textContent;
    label.textContent = 'Copied!';
    mainBtn.style.color = '#04844B';
    setTimeout(function() {
        label.textContent = saved;
        mainBtn.style.color = '';
    }, 1500);
}

function _closeAllSkillDropdowns() {
    document.querySelectorAll('.skill-dropdown-menu').forEach(function(m) {
        m.style.display = 'none';
        var splitBtn = m.closest('.skill-split-btn');
        if (splitBtn) {
            var t = splitBtn.querySelector('.skill-split-toggle');
            if (t) t.setAttribute('aria-expanded', 'false');
        }
    });
}

// Close dropdowns on outside click
document.addEventListener('click', function(e) {
    if (!e.target.closest('.skill-split-btn')) {
        _closeAllSkillDropdowns();
    }
});

// ============================================================================
// Response Status Selector
// ============================================================================

function toggleStatusDropdown(opId) {
    var dropdown = document.getElementById('status-dropdown-' + opId);
    if (!dropdown) return;

    var isVisible = dropdown.style.display !== 'none';

    // Close all other status dropdowns first
    document.querySelectorAll('.status-dropdown-menu').forEach(function(d) {
        d.style.display = 'none';
    });

    if (!isVisible) {
        // Position the dropdown relative to the button
        var button = dropdown.previousElementSibling;
        if (button) {
            var rect = button.getBoundingClientRect();
            dropdown.style.top = (rect.bottom + 4) + 'px';
            dropdown.style.right = (window.innerWidth - rect.right) + 'px';
        }
        dropdown.style.display = 'block';
    }
}

function selectResponseStatus(opId, status) {
    // Update the selected status display
    var selectedDisplay = document.getElementById('selected-status-' + opId);
    if (selectedDisplay) {
        var statusNum = String(status);
        var dotClass = 'status-dot-default';
        if (statusNum.startsWith('2')) {
            dotClass = 'status-dot-2xx';
        } else if (statusNum.startsWith('4')) {
            dotClass = 'status-dot-4xx';
        }

        selectedDisplay.innerHTML = '<span class="status-dot ' + dotClass + '"></span>' + escapeHtml(status);
    }

    // Hide all response content for this operation
    document.querySelectorAll('[id^="response-' + opId + '-"]').forEach(function(content) {
        content.style.display = 'none';
    });

    // Show the selected response content
    var selectedContent = document.getElementById('response-' + opId + '-' + status);
    if (selectedContent) {
        selectedContent.style.display = 'block';

        // Update content type badge
        var contentTypeBadge = document.getElementById('content-type-badge-' + opId);
        if (contentTypeBadge) {
            var contentTypesJson = selectedContent.getAttribute('data-content-types');
            if (contentTypesJson) {
                try {
                    var contentTypes = JSON.parse(contentTypesJson);
                    if (contentTypes && contentTypes.length > 0) {
                        if (contentTypes.indexOf('application/json') !== -1) {
                            contentTypeBadge.textContent = 'json';
                        } else {
                            contentTypeBadge.textContent = contentTypes[0].replace('application/', '').replace('text/', '');
                        }
                        contentTypeBadge.style.display = '';
                    } else {
                        contentTypeBadge.style.display = 'none';
                    }
                } catch (e) {
                    contentTypeBadge.style.display = 'none';
                }
            } else {
                contentTypeBadge.style.display = 'none';
            }
        }
    }

    // Close the dropdown
    var dropdown = document.getElementById('status-dropdown-' + opId);
    if (dropdown) {
        dropdown.style.display = 'none';
    }
}

// Close status dropdowns when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('.response-status-selector')) {
        document.querySelectorAll('.status-dropdown-menu').forEach(function(d) {
            d.style.display = 'none';
        });
    }
});

// ============================================================================
// Nested Properties Toggle
// ============================================================================

function toggleNestedProps(id) {
    var nested = document.getElementById(id);
    if (!nested) return;

    var button = nested.previousElementSibling;
    while (button && !button.classList.contains('param-header')) {
        button = button.previousElementSibling;
    }
    if (button) {
        button = button.querySelector('.nested-prop-toggle');
    }

    if (nested.style.display === 'none' || nested.style.display === '') {
        nested.style.display = 'block';
        if (button) {
            button.classList.add('expanded');
        }
    } else {
        nested.style.display = 'none';
        if (button) {
            button.classList.remove('expanded');
        }
    }
}

function switchResponseTab(opId, tabName) {
    var responseDiv = document.getElementById('response-' + opId);
    if (!responseDiv) return;

    // Update tab buttons
    var tabButtons = responseDiv.querySelectorAll('.try-tab-btn');
    tabButtons.forEach(function(btn) {
        btn.classList.remove('active');
        btn.setAttribute('aria-selected', 'false');
    });
    var activeTab = Array.from(tabButtons).find(function(btn) {
        return btn.textContent.toLowerCase().includes(tabName.toLowerCase());
    });
    if (activeTab) {
        activeTab.classList.add('active');
        activeTab.setAttribute('aria-selected', 'true');
    }

    // Update content
    var bodyContent = document.getElementById('respbody-' + opId);
    var headersContent = document.getElementById('respheaders-' + opId);
    var extractedContent = document.getElementById('respextracted-' + opId);
    var dataContent = document.getElementById('respdata-' + opId);

    // Remove active class from all
    if (bodyContent) bodyContent.classList.remove('active');
    if (headersContent) headersContent.classList.remove('active');
    if (extractedContent) extractedContent.classList.remove('active');
    if (dataContent) dataContent.classList.remove('active');

    // Add active class to the selected tab
    if (tabName === 'body' && bodyContent) {
        bodyContent.classList.add('active');
    } else if (tabName === 'headers' && headersContent) {
        headersContent.classList.add('active');
    } else if (tabName === 'extracted' && extractedContent) {
        extractedContent.classList.add('active');
    } else if (tabName === 'data' && dataContent) {
        dataContent.classList.add('active');
    }
}

async function sendRequest(opId, buttonEl) {
    var section = document.getElementById('op-' + opId);
    if (!section) {
        console.error('[DEBUG] Section not found for opId:', opId);
        return;
    }

    var method = section.getAttribute('data-method');
    var pathTemplate = section.getAttribute('data-path');
    var tryPanel = document.getElementById('try-' + opId);
    if (!tryPanel) {
        console.error('[DEBUG] Try panel not found for opId:', opId);
        return;
    }

    // Collect parameters
    var path = pathTemplate;
    var queryParams = [];
    var extraHeaders = {};

    var inputs = tryPanel.querySelectorAll('[data-param]');
    inputs.forEach(function(input) {
        var name = input.getAttribute('data-param');
        var location = input.getAttribute('data-in');
        var value = input.value;
        if (!value) return;

        if (location === 'path') {
            path = path.replace('{' + name + '}', encodeURIComponent(value));
        } else if (location === 'query') {
            queryParams.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
        } else if (location === 'header') {
            extraHeaders[name] = value;
        }
    });

    // Build full URL
    var serverUrl = getSelectedServer(opId).replace(/\/$/, '');
    var fullUrl = serverUrl + path;
    if (queryParams.length > 0) {
        fullUrl += '?' + queryParams.join('&');
    }

    // Request body
    var body = null;
    var bodyEditor = getCodeMirrorEditor('body-' + opId);
    if (bodyEditor) {
        var editorContent = bodyEditor.getValue();
        if (editorContent.trim()) {
            body = editorContent.trim();
        }
    }
    // Ensure body is always a string (not an object)
    if (body !== null && typeof body !== 'string') {
        body = JSON.stringify(body);
    }

    // Headers
    var headers = Object.assign(
        {'Content-Type': 'application/json'},
        getAuthHeaders(),
        extraHeaders
    );

    // UI feedback on button
    var originalText = 'Send';
    if (buttonEl) {
        var textSpan = buttonEl.querySelector('span');
        if (textSpan) {
            originalText = textSpan.textContent;
            textSpan.textContent = 'Sending...';
        }
        buttonEl.disabled = true;
    }

    var responseDiv = document.getElementById('response-' + opId);
    var statusBadge = document.getElementById('status-' + opId);
    var responseBody = document.getElementById('respbody-' + opId);
    var responseHeaders = document.getElementById('respheaders-' + opId);

    // Always show response area with 'empty' class before request
    // Override template's inline display:none
    if (responseDiv) {
        responseDiv.classList.add('empty');
        responseDiv.style.display = 'block';  // Show the response area
    }

    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: method,
                url: fullUrl,
                headers: headers,
                body: body
            })
        });
        var data = await resp.json();
        await handleProxyResponse(data);

        // Restore button
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) textSpan.textContent = originalText;
            buttonEl.disabled = false;
        }

        if (responseDiv) {
            responseDiv.style.display = 'block';  // Keep response visible
            responseDiv.classList.remove('empty');
        }

        if (data.error) {
            console.error('[DEBUG] Error in response:', data.error);
            if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-5xx'; }
            if (responseBody) {
                createReadOnlyAceEditor(responseBody, data.error, 'text');
            }
            if (responseDiv) responseDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            return;
        }

        // Display status
        var status = data.status;
        var statusClass = 'status-' + String(status).charAt(0) + 'xx';
        if (statusBadge) { statusBadge.textContent = status; statusBadge.className = 'response-status-badge ' + statusClass; }

        displayResponseInAceEditors(responseBody, responseHeaders, data);

        // Scroll response into view
        if (responseDiv) {
            responseDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

    } catch (e) {
        // Restore button
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) textSpan.textContent = originalText;
            buttonEl.disabled = false;
        }

        if (responseDiv) {
            responseDiv.style.display = 'block';  // Keep response visible
            responseDiv.classList.remove('empty');
        }
        if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-5xx'; }
        if (responseBody) {
            createReadOnlyAceEditor(responseBody, 'Unable to connect to the server. Please check your network connection and try again.', 'text');
        }
        if (responseDiv) responseDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

// ============================================================================
// Ace Editor Initialization
// ============================================================================

// Helper function to get appropriate ACE theme based on current theme
function getAceTheme() {
    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    return isDark ? 'ace/theme/one_dark' : 'ace/theme/github';
}

// Helper function to update ACE editor background color
function updateAceEditorBackground(editor) {
    if (!editor || !editor.container) return;
    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    // Remove hardcoded background, let theme handle it
    editor.container.style.backgroundColor = '';
}

// Function to update all ACE editors when theme changes
function updateAllAceEditors() {
    if (!window.aceEditors) return;
    var newTheme = getAceTheme();
    Object.keys(window.aceEditors).forEach(function(key) {
        var editor = window.aceEditors[key];
        if (editor && editor.setTheme) {
            editor.setTheme(newTheme);
            updateAceEditorBackground(editor);
        }
    });
}

function initCodeMirrorEditors() {
    if (typeof ace === 'undefined') {
        setTimeout(initCodeMirrorEditors, 500);
        return;
    }

    if (!window.aceEditors) {
        window.aceEditors = {};
    }

    var requestEditors = document.querySelectorAll('.try-request-editor-cm');

    requestEditors.forEach(function(el) {
        var contentType = el.dataset.contentType || 'application/json';
        var exampleBody = el.dataset.exampleBody || '';
        var mode = 'ace/mode/json';

        if (contentType.includes('yaml')) {
            mode = 'ace/mode/yaml';
        } else if (contentType.includes('xml')) {
            mode = 'ace/mode/xml';
        }

        var editor = ace.edit(el, {
            mode: mode,
            theme: getAceTheme(),
            value: exampleBody,
            minLines: 10,
            maxLines: 15,
            showPrintMargin: false,
            highlightActiveLine: true,
            showGutter: true,
            fontSize: '13px'
        });

        window.aceEditors[el.id] = editor;
    });
}

function getCodeMirrorEditor(id) {
    if (!window.aceEditors) {
        window.aceEditors = {};
    }
    return window.aceEditors[id];
}

function createReadOnlyAceEditor(container, content, language) {
    if (typeof ace === 'undefined' || !container) return null;

    var mode = 'ace/mode/json';
    if (language === 'yaml') {
        mode = 'ace/mode/yaml';
    } else if (language === 'xml') {
        mode = 'ace/mode/xml';
    } else if (language === 'none' || language === 'text') {
        mode = 'ace/mode/text';
    }

    // Check if container already has an Ace editor instance
    if (container.env && container.env.editor) {
        // Reuse existing editor, just update content and mode
        var editor = container.env.editor;
        editor.session.setMode(mode);
        editor.setValue(content || '', -1);
        editor.setTheme(getAceTheme());
        updateAceEditorBackground(editor);
        return editor;
    }

    // Clear container
    container.innerHTML = '';

    var editor = ace.edit(container, {
        mode: mode,
        theme: getAceTheme(),
        value: content || '',
        readOnly: true,
        showPrintMargin: false,
        highlightActiveLine: false,
        showGutter: true,
        fontSize: '13px'
    });

    // Use ace's internal scrolling within a fixed-height container
    editor.setOptions({
        minLines: 10,
        maxLines: undefined
    });
    container.style.height = '500px';

    // Set read-only background
    updateAceEditorBackground(editor);

    // Register editor so theme toggles can update it
    if (!window.aceEditors) window.aceEditors = {};
    if (container.id) {
        window.aceEditors[container.id] = editor;
    }

    return editor;
}

// Backward compatibility alias
function createReadOnlyCodeMirror(container, content, language) {
    return createReadOnlyAceEditor(container, content, language);
}

function _extractSseData(raw) {
    // Extract and merge JSON objects from SSE data: lines
    var lines = raw.split('\n');
    var jsonObjects = [];
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i];
        if (line.indexOf('data:') === 0) {
            var payload = line.substring(5).trim();
            try {
                jsonObjects.push(JSON.parse(payload));
            } catch (e) { /* skip non-JSON data lines */ }
        }
    }
    if (jsonObjects.length === 0) return null;
    if (jsonObjects.length === 1) return JSON.stringify(jsonObjects[0], null, 2);
    return JSON.stringify(jsonObjects, null, 2);
}

function displayResponseInAceEditors(responseBodyContainer, responseHeadersContainer, data) {
    if (!data) return;

    // Display body (try to pretty-print JSON)
    if (responseBodyContainer) {
        var bodyText = data.body || '';
        var bodyLang = 'json';
        try {
            bodyText = JSON.stringify(JSON.parse(bodyText), null, 2);
        } catch (e) {
            bodyLang = 'text';
        }
        createReadOnlyAceEditor(responseBodyContainer, bodyText, bodyLang);

        // If SSE response, populate the Data tab with parsed JSON
        var isSse = data.body && (data.body.indexOf('event:') !== -1 || /^data:/m.test(data.body));
        if (isSse) {
            var opId = responseBodyContainer.id.replace('respbody-', '');
            var dataContainer = document.getElementById('respdata-' + opId);
            var dataTab = document.getElementById('datatab-' + opId);
            var extracted = _extractSseData(data.body);
            if (extracted && dataContainer && dataTab) {
                createReadOnlyAceEditor(dataContainer, extracted, 'json');
                dataTab.style.display = '';
                // Auto-switch to Data tab
                switchResponseTab(opId, 'data');
            }
        }
    }

    // Display headers
    if (responseHeadersContainer && data.headers) {
        var headersText = '';
        for (var headerName in data.headers) {
            headersText += headerName + ': ' + data.headers[headerName] + '\n';
        }
        createReadOnlyAceEditor(responseHeadersContainer, headersText || 'No headers returned', 'text');
    }

    // Update content-type badge if present
    if (data.headers && responseBodyContainer) {
        var opId = responseBodyContainer.id.replace('respbody-', '');
        var contentTypeBadge = document.getElementById('content-type-badge-' + opId);
        if (contentTypeBadge) {
            var contentType = data.headers['content-type'] || data.headers['Content-Type'] || '';
            if (contentType) {
                var mimeType = contentType.split(';')[0].trim();
                var shortType = mimeType.replace('application/', '').replace('text/', '');
                contentTypeBadge.textContent = shortType;
                contentTypeBadge.style.display = 'inline-block';
            }
        }
    }
}

// ============================================================================
// Shared Operation Panel Rendering
// Used in: Try-It-Out Expanded, X-Origin Modal, Playground Mode
// ============================================================================

/**
 * Renders a complete operation panel with form and response sections in a two-column layout
 * @param {string} opId - Operation identifier for generating unique IDs
 * @param {object} opMeta - Operation metadata (method, path, parameters, requestBody)
 * @param {object} options - Rendering options
 * @returns {string} HTML string for the complete operation panel
 */
function renderOperationPanel(opId, opMeta, options) {
    options = options || {};
    var showExecuteButton = options.showExecuteButton !== false;
    var executeButtonText = options.executeButtonText || 'Send';
    var executeButtonClick = options.executeButtonClick || '';
    var contextType = options.contextType || 'tryitout';
    var showTitle = options.showTitle || false;
    var titleText = options.titleText || '';

    var html = '';

    // Optional title header (for x-origin and playground)
    if (showTitle && titleText) {
        html += '<div class="operation-panel-title">';
        html += '<h4>' + escapeHtml(titleText) + '</h4>';
        html += '</div>';
    }

    // Two-column grid container
    html += '<div class="operation-panel-grid">';

    // Left column: Form
    html += '<div class="operation-panel-form">';
    html += renderOperationForm(opId, opMeta, options);

    // Execute buttons
    if (showExecuteButton) {
        html += '<div class="operation-panel-actions">';
        html += '<button class="btn-send" ' + (executeButtonClick ? 'onclick="' + executeButtonClick + ', this)"' : '') + '>';
        html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';
        html += '<span>' + executeButtonText + '</span>';
        html += '</button>';
        html += '<button class="btn-copy-curl" onclick="copyCurlCommand(\'' + opId + '\', this)">';
        html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
        html += '<span>Copy cURL</span>';
        html += '</button>';
        html += '<span class="try-spinner" id="spinner-' + opId + '" style="display:none">Sending...</span>';
        html += '</div>';
    }

    html += '</div>'; // End form column

    // Right column: Response
    html += '<div class="operation-panel-response">';
    html += '<div class="try-response empty" id="response-' + opId + '" aria-live="polite">';
    html += '<div class="try-response-header">';
    html += '<h5>Response</h5>';
    html += '<div class="response-badges">';
    html += '<span class="response-status-badge" id="status-' + opId + '"></span>';
    html += '<span class="content-type-badge" id="content-type-badge-' + opId + '" style="display:none"></span>';
    html += '</div>';
    html += '</div>';
    html += '<div class="try-response-tabs">';

    // Add Extracted Values tab for x-origin context
    if (contextType === 'xorigin') {
        html += '<button class="try-tab-btn active" onclick="switchResponseTab(\'' + opId + '\', \'extracted\')">Extracted Values</button>';
        html += '<button class="try-tab-btn" onclick="switchResponseTab(\'' + opId + '\', \'body\')">Body</button>';
        html += '<button class="try-tab-btn" onclick="switchResponseTab(\'' + opId + '\', \'headers\')">Headers</button>';
    } else {
        html += '<button class="try-tab-btn active" onclick="switchResponseTab(\'' + opId + '\', \'body\')">Body</button>';
        html += '<button class="try-tab-btn" onclick="switchResponseTab(\'' + opId + '\', \'headers\')">Headers</button>';
    }

    html += '</div>';
    html += '<div class="try-response-content">';

    // Add Extracted Values content for x-origin context
    if (contextType === 'xorigin') {
        html += '<div class="try-response-extracted active" id="respextracted-' + opId + '"></div>';
        html += '<div class="try-response-body" id="respbody-' + opId + '"></div>';
    } else {
        html += '<div class="try-response-body active" id="respbody-' + opId + '"></div>';
    }

    html += '<div class="try-response-headers" id="respheaders-' + opId + '"></div>';
    html += '</div>';
    html += '</div>'; // End try-response
    html += '</div>'; // End response column

    html += '</div>'; // End grid

    return html;
}

/**
 * Renders an operation form with parameters and request body
 * @param {string} opId - Operation identifier for generating unique IDs
 * @param {object} opMeta - Operation metadata (method, path, parameters, requestBody)
 * @param {object} options - Rendering options
 * @returns {string} HTML string for the operation form
 */
// Helper function to detect variable references in a value
// Supports both {{variable}} and ${step.variable} formats
function detectVariableReferences(value) {
    var matches = [];

    // Match ${variableName} format
    var regex = /\$\{([^}]+)\}/g;
    var match;
    while ((match = regex.exec(value)) !== null) {
        var varName = match[1].trim();
        matches.push({ type: 'variable', varName: varName, fullMatch: match[0] });
    }

    return matches;
}

// Helper function to render value as plain text (no links)
function renderValueWithVariableLinks(value, slug) {
    // Ensure value is a string
    if (typeof value === 'object') {
        value = JSON.stringify(value);
    } else if (value == null) {
        value = '';
    } else {
        value = String(value);
    }

    // Just return escaped HTML, no links
    return escapeHtml(value);
}

// Helper function to render variable reference hints
function renderVariableReferenceHints(value, contextType, slug) {
    var varRefs = detectVariableReferences(value);
    if (varRefs.length === 0) return '';

    var html = '<div class="variable-references-hint">';
    html += '<span class="variable-ref-icon">🔗</span>';
    html += '<span class="variable-ref-text">References: ';
    varRefs.forEach(function(ref, idx) {
        if (idx > 0) html += ', ';

        // Just show as plain code text, no links
        var displayText = ref.type === 'step' ? (ref.stepName + '.' + ref.varName) : ref.varName;
        html += '<code>' + escapeHtml(displayText) + '</code>';
    });
    html += '</span>';
    html += '</div>';
    return html;
}

function renderOperationForm(opId, opMeta, options) {
    options = options || {};
    var yamlInputs = options.yamlInputs || {};
    var enableVariableRefs = options.enableVariableRefs || false;
    var slug = options.slug || '';
    var contextType = options.contextType || '';

    var html = '';
    var parameters = opMeta.parameters || [];

    // Group parameters by location
    var paramsByLocation = {
        path: parameters.filter(function(p) { return p.in === 'path'; }),
        query: parameters.filter(function(p) { return p.in === 'query'; }),
        header: parameters.filter(function(p) { return p.in === 'header'; })
    };

    // Render parameter sections
    [
        { location: 'path', label: 'Path Parameters', params: paramsByLocation.path },
        { location: 'query', label: 'Query Parameters', params: paramsByLocation.query },
        { location: 'header', label: 'Header Parameters', params: paramsByLocation.header }
    ].forEach(function(section) {
        if (section.params.length > 0) {
            var hasRequired = section.params.some(function(p) { return p.required || false; });

            html += '<details class="try-params"' + (hasRequired ? ' open' : '') + '>';
            html += '<summary>' + section.label + '</summary>';
            html += '<div class="try-params-content">';

            section.params.forEach(function(param) {
                var paramName = param.name || '';
                var schema = param.schema || {};
                var ptype = schema.type || 'string';
                var required = param.required || false;
                var description = param.description || '';
                var defaultVal = schema.default || '';

                // Check if YAML provided a value
                var yamlValue = yamlInputs[paramName] || defaultVal;

                // If yamlValue is an object with a 'ref' property, extract the reference string
                if (typeof yamlValue === 'object' && yamlValue !== null) {
                    if (yamlValue.ref) {
                        yamlValue = yamlValue.ref;
                    } else if (yamlValue.value !== undefined) {
                        // Object has an explicit value property
                        yamlValue = yamlValue.value;
                    } else {
                        // Object without ref or value - likely just metadata (description, etc.)
                        // Use empty string so the input is blank and user can fill it in
                        yamlValue = '';
                    }
                } else if (yamlValue == null) {
                    yamlValue = '';
                } else {
                    yamlValue = String(yamlValue);
                }

                // If no YAML value, check environment variables
                if (!yamlValue && contextType === 'playground') {
                    var envVars = loadEnvVars();
                    var envVar = envVars.find(function(v) { return v.name === paramName; });
                    if (envVar && envVar.value) {
                        yamlValue = envVar.value;
                    }
                }

                html += '<div class="try-param-row">';

                // Check for x-origin
                var xOrigin = param['x-origin'];
                if (xOrigin) {
                    var origins = Array.isArray(xOrigin) ? xOrigin : [xOrigin];
                    html += '<label>';
                    html += '<span class="param-name-wrapper">';
                    html += '<code>' + escapeHtml(paramName) + '</code>';
                    if (required) html += '&nbsp;<span class="param-required" aria-label="required" title="Required">*</span>';
                    html += '</span>';
                    if (description) {
                        html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                        html += '<span class="param-info-icon" aria-label="more-info"></span>';
                        html += '</span>';
                    }
                    html += '</label>';
                    // Input field with magnifier button wrapper
                    html += '<div class="param-input-with-xorigin">';
                    html += '<input type="text" data-param="' + escapeHtml(paramName) + '" data-in="' + section.location + '" ';
                    // Use Base64 encoding to avoid escaping issues
                    html += 'data-x-origins="' + btoa(JSON.stringify(origins)) + '" ';
                    html += 'id="param-' + opId + '-' + paramName + '" ';
                    html += 'placeholder="' + ptype + '" value="' + escapeHtml(yamlValue) + '"';
                    if (required) html += ' required';

                    var hasVarRef = false;
                    var substitutedValue = yamlValue;
                    // Add class if has variable references
                    if (contextType === 'playground' && slug && yamlValue && detectVariableReferences(yamlValue).length > 0) {
                        substitutedValue = substituteVariables(yamlValue, slug);
                        if (substitutedValue !== yamlValue) {
                            html += ' class="has-variable-ref"';
                            hasVarRef = true;
                        }
                    }

                    html += '>';
                    // Magnifier button
                    html += '<button type="button" class="btn-xorigin-search" ';
                    html += 'onclick="openXOriginModal(\'' + opId + '\', \'' + paramName + '\', \'' + section.location + '\'); return false;" ';
                    html += 'title="Fetch values from ' + origins.length + ' source(s)" aria-label="Search values">';
                    html += '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">'+
                        '<path d="M7 12C9.76142 12 12 9.76142 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
                        '<path d="M14 14L10.65 10.65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
                    '</svg>';
                    html += '</button>';
                    // Show resolved value in grey italic AFTER the button
                    if (hasVarRef && substitutedValue !== yamlValue) {
                        html += '<span class="variable-resolved-value">' + escapeHtml(substitutedValue) + '</span>';
                    }
                    html += '</div>';
                } else if (schema.enum) {
                    // Enum - dropdown
                    html += '<label>';
                    html += '<span class="param-name-wrapper">';
                    html += '<code>' + escapeHtml(paramName) + '</code>';
                    if (required) html += '&nbsp;<span class="param-required" aria-label="required" title="Required">*</span>';
                    html += '</span>';
                    if (description) {
                        html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                        html += '<span class="param-info-icon" aria-label="more-info"></span>';
                        html += '</span>';
                    }
                    html += '</label>';
                    html += '<select data-param="' + escapeHtml(paramName) + '" data-in="' + section.location + '"';
                    if (required) html += ' required';
                    html += '>';
                    schema.enum.forEach(function(v) {
                        html += '<option value="' + escapeHtml(v) + '"';
                        if (String(v) === String(yamlValue)) html += ' selected';
                        html += '>' + escapeHtml(v) + '</option>';
                    });
                    html += '</select>';
                } else {
                    // Regular input
                    html += '<label>';
                    html += '<span class="param-name-wrapper">';
                    html += '<code>' + escapeHtml(paramName) + '</code>';
                    if (required) html += '&nbsp;<span class="param-required" aria-label="required" title="Required">*</span>';
                    html += '</span>';
                    if (description) {
                        html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                        html += '<span class="param-info-icon" aria-label="more-info"></span>';
                        html += '</span>';
                    }
                    html += '</label>';

                    var hasVarRef2 = false;
                    var substitutedValue2 = yamlValue;
                    // Check if has variable references
                    if (contextType === 'playground' && slug && yamlValue && detectVariableReferences(yamlValue).length > 0) {
                        substitutedValue2 = substituteVariables(yamlValue, slug);
                        if (substitutedValue2 !== yamlValue) {
                            hasVarRef2 = true;
                        }
                    }

                    html += '<input type="text" data-param="' + escapeHtml(paramName) + '" data-in="' + section.location + '" ';
                    html += 'placeholder="' + ptype + '" value="' + escapeHtml(yamlValue) + '"';
                    if (required) html += ' required';
                    // Add class if has variable references
                    if (hasVarRef2) {
                        html += ' class="has-variable-ref"';
                    }
                    html += '>';

                    // Show resolved value in grey italic AFTER the input
                    if (hasVarRef2) {
                        html += '<span class="variable-resolved-value">' + escapeHtml(substitutedValue2) + '</span>';
                    }
                }

                html += '</div>';
            });

            html += '</div>';
            html += '</details>';
        }
    });

    // Custom Query Parameters
    html += '<details class="try-params try-custom-params">';
    html += '<summary>Custom Query Parameters</summary>';
    html += '<div class="try-params-content">';
    html += '<div id="custom-query-' + opId + '" class="custom-params-container"></div>';
    html += '<button type="button" class="btn-add-custom-param" onclick="addCustomParam(\'' + opId + '\', \'query\')">+ Add Query Parameter</button>';
    html += '</div>';
    html += '</details>';

    // Custom Headers
    html += '<details class="try-params try-custom-params">';
    html += '<summary>Custom Headers</summary>';
    html += '<div class="try-params-content">';
    html += '<div id="custom-header-' + opId + '" class="custom-params-container"></div>';
    html += '<button type="button" class="btn-add-custom-param" onclick="addCustomParam(\'' + opId + '\', \'header\')">+ Add Header</button>';
    html += '</div>';
    html += '</details>';

    // Request body (if present)
    if (opMeta.requestBody) {
        var rb = opMeta.requestBody;
        var contentTypes = rb.content_types || [];
        var ctDefault = contentTypes[0] || 'application/json';
        var exampleBody = opMeta._example_body || '';

        html += '<details class="try-body" open>';
        html += '<summary>Request Body <code>' + escapeHtml(ctDefault) + '</code></summary>';
        html += '<div class="try-body-content">';
        html += '<div id="body-' + opId + '" class="try-request-editor-cm" ';
        html += 'data-content-type="' + escapeHtml(ctDefault) + '" ';
        html += 'data-example-body="' + escapeHtml(exampleBody) + '"></div>';
        html += '</div>';
        html += '</details>';
    }

    return html;
}

// ============================================================================
// Playground Mode (Skills)
// ============================================================================

function toggleSkillMode(slug) {
    var toggle = document.getElementById('toggle-' + slug);
    var variablesSidebar = document.getElementById('variables-sidebar-' + slug);
    var isInteractive = toggle && toggle.getAttribute('aria-checked') === 'true';

    if (isInteractive) {
        // Switch to documentation mode (show curl)
        toggle.setAttribute('aria-checked', 'false');

        // Hide variables sidebar
        if (variablesSidebar) variablesSidebar.style.display = 'none';

        // Toggle all steps to show documentation view
        var docViews = document.querySelectorAll('.step-documentation-view');
        var interactiveViews = document.querySelectorAll('.step-interactive-view');

        docViews.forEach(function(view) { view.style.display = 'block'; });
        interactiveViews.forEach(function(view) { view.style.display = 'none'; });

        // Update URL to remove playground parameter
        var url = new URL(window.location);
        url.searchParams.delete('playground');
        window.history.replaceState({}, '', url);
    } else {
        // Switch to interactive mode (show operation runners)
        toggle.setAttribute('aria-checked', 'true');

        // Show variables sidebar
        if (variablesSidebar) variablesSidebar.style.display = 'block';

        // Toggle all steps to show interactive view
        var docViews = document.querySelectorAll('.step-documentation-view');
        var interactiveViews = document.querySelectorAll('.step-interactive-view');

        docViews.forEach(function(view) { view.style.display = 'none'; });
        interactiveViews.forEach(function(view) { view.style.display = 'block'; });

        // Update URL to add playground parameter
        var url = new URL(window.location);
        url.searchParams.set('playground', 'true');
        window.history.replaceState({}, '', url);

        // Initialize playground steps if not already done
        initializePlaygroundSteps();

        // Scroll to the first step
        var firstStep = document.getElementById('step-' + slug + '-0');
        if (firstStep) {
            firstStep.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
}

// Check URL parameter on page load to activate playground mode
document.addEventListener('DOMContentLoaded', function() {
    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('playground') === 'true') {
        // Find the skill on this page and activate playground mode
        var skillSection = document.querySelector('.skill-detail');
        if (skillSection) {
            var skillId = skillSection.id;
            var slug = skillId.replace('skill-', '');
            // Trigger toggle programmatically
            setTimeout(function() {
                var toggle = document.getElementById('toggle-' + slug);
                if (toggle && toggle.getAttribute('aria-checked') !== 'true') {
                    toggleSkillMode(slug);
                }
            }, 100);
        }
    }
});

// Debugger state tracking
var debuggerState = {};

// Global variable store per skill slug
var skillVariables = {};

function startDebugger(slug) {

    // Initialize debugger state
    debuggerState[slug] = {
        currentStep: 0,
        isRunning: true,
        totalSteps: document.querySelectorAll('[id^="step-' + slug + '-"]').length,
        allStepsCompleted: false
    };

    // Switch UI to running state
    var runState = document.getElementById('debugger-run-' + slug);
    var runningState = document.getElementById('debugger-running-' + slug);
    if (runState) runState.style.display = 'none';
    if (runningState) runningState.style.display = 'flex';

    // Execute first step
    executeStepByIndex(slug, 0);
}

function cancelDebugger(slug) {

    // Reset state and clear variables
    debuggerState[slug] = { isRunning: false };
    skillVariables[slug] = {};
    if (window.skillArrayVariables && window.skillArrayVariables[slug]) {
        window.skillArrayVariables[slug] = {};
    }

    // Switch UI back to initial state
    var runState = document.getElementById('debugger-run-' + slug);
    var runningState = document.getElementById('debugger-running-' + slug);
    if (runState) runState.style.display = 'block';
    if (runningState) runningState.style.display = 'none';

    // Clear variables table
    var tableBody = document.querySelector('#variables-table-' + slug + ' tbody');
    if (tableBody) {
        tableBody.innerHTML = '<tr><td colspan="3" style="text-align:center; color:#9ca3af; padding:2rem 0.5rem;">No variables captured yet</td></tr>';
    }

    // Clear executing step display
    updateExecutingStepDisplay(slug, null);
}

function nextStep(slug) {
    var state = debuggerState[slug];
    if (!state || !state.isRunning) return;

    var nextIndex = state.currentStep + 1;
    if (nextIndex < state.totalSteps) {
        // Check if we can proceed (previous step must have succeeded)
        if (!canProceedToNextStep(slug, nextIndex)) {
            console.warn('Cannot proceed to next step - previous step failed');
            alert('Cannot proceed: previous step failed. Please fix the error before continuing.');
            return;
        }
        state.currentStep = nextIndex;
        executeStepByIndex(slug, nextIndex);

        // Check if we just executed the last step
        if (nextIndex === state.totalSteps - 1) {
            state.allStepsCompleted = true;
        }
    } else if (nextIndex >= state.totalSteps) {
        // Clicked Next after last step was executed
        if (state.allStepsCompleted) {
            cancelDebugger(slug);
        }
    }
}

function previousStep(slug) {
    var state = debuggerState[slug];
    if (!state || !state.isRunning) return;

    var prevIndex = state.currentStep - 1;
    if (prevIndex >= 0) {
        state.currentStep = prevIndex;

        // Clean variables from future steps (time travel backwards)
        cleanFutureStepVariables(slug, prevIndex);

        scrollToStepByIndex(slug, prevIndex);

        // Update executing display for previous step
        var steps = document.querySelectorAll('[id^="step-' + slug + '-"]');
        if (prevIndex < steps.length) {
            var step = steps[prevIndex];
            var stepTitle = step.querySelector('.step-title');
            var stepName = 'Step ' + (prevIndex + 1);
            if (stepTitle) {
                stepName = stepTitle.textContent.trim();
                // Remove all "Step N:" prefixes (in case there are duplicates)
                stepName = stepName.replace(/^(?:Step \d+:\s*)+/, '');
            }
            updateExecutingStepDisplay(slug, stepName);
        }
    }
}

// Clean variables that were captured by steps after the current step
function cleanFutureStepVariables(slug, currentIndex) {

    var steps = document.querySelectorAll('[id^="step-' + slug + '-"]');
    var variablesToKeep = {};

    // Collect variables from steps 0 to currentIndex
    for (var i = 0; i <= currentIndex; i++) {
        var step = steps[i];
        var panel = step.querySelector('[id^="playground-panel-"]');
        if (!panel) continue;

        var outputsAttr = panel.getAttribute('data-wf-outputs');
        if (outputsAttr) {
            try {
                var outputs = JSON.parse(outputsAttr);
                if (Array.isArray(outputs)) {
                    outputs.forEach(function(output) {
                        if (output.name) variablesToKeep[output.name] = true;
                    });
                } else {
                    for (var varName in outputs) {
                        variablesToKeep[varName] = true;
                    }
                }
            } catch (e) {
                console.error('Error parsing outputs for step', i, e);
            }
        }
    }


    // Remove variables not in the keep list
    if (skillVariables[slug]) {
        for (var varName in skillVariables[slug]) {
            if (!variablesToKeep[varName]) {
                delete skillVariables[slug][varName];
            }
        }
    }

    // Also clean array variables
    if (window.skillArrayVariables && window.skillArrayVariables[slug]) {
        for (var varName in window.skillArrayVariables[slug]) {
            if (!variablesToKeep[varName]) {
                delete window.skillArrayVariables[slug][varName];
            }
        }
    }

    // Also clean array labels
    if (window.skillArrayLabels && window.skillArrayLabels[slug]) {
        for (var varName in window.skillArrayLabels[slug]) {
            if (!variablesToKeep[varName]) {
                delete window.skillArrayLabels[slug][varName];
            }
        }
    }

    // Update the variables table
    var tableBody = document.querySelector('#variables-table-' + slug + ' tbody');
    if (tableBody) {
        // Remove rows for deleted variables
        var rows = tableBody.querySelectorAll('tr[data-var-name]');
        rows.forEach(function(row) {
            var varName = row.getAttribute('data-var-name');
            if (!variablesToKeep[varName]) {
                row.remove();
            }
        });

        // Show "no variables" if table is empty
        if (tableBody.querySelectorAll('tr[data-var-name]').length === 0) {
            tableBody.innerHTML = '<tr><td colspan="3" style="text-align:center; color:#9ca3af; padding:2rem 0.5rem;">No variables captured yet</td></tr>';
        }
    }

    // Update variable tooltips
    updateVariableTooltips(slug);
}

// Update the executing step display in variables panel
function updateExecutingStepDisplay(slug, stepName) {
    var variablesPanelHeader = document.querySelector('#variables-sidebar-' + slug + ' h4');
    if (variablesPanelHeader) {
        if (stepName) {
            variablesPanelHeader.innerHTML = 'Variables<div style="font-size: 0.75rem; font-weight: 400; color: #6b7280; margin-top: 0.25rem;">Executing: ' + escapeHtml(stepName) + '</div>';
        } else {
            variablesPanelHeader.textContent = 'Variables';
        }
    }
}

function executeStepByIndex(slug, index) {
    var steps = document.querySelectorAll('[id^="step-' + slug + '-"]');
    if (index < 0 || index >= steps.length) return;

    var step = steps[index];
    var panel = step.querySelector('[id^="playground-panel-"]');
    if (!panel) return;

    var sid = panel.id.replace('playground-panel-', '');

    // Get step title (remove "Step N:" prefix - may appear multiple times)
    var stepTitle = step.querySelector('.step-title');
    var stepName = 'Step ' + (index + 1);
    if (stepTitle) {
        stepName = stepTitle.textContent.trim();
        // Remove all "Step N:" prefixes (in case there are duplicates)
        stepName = stepName.replace(/^(?:Step \d+:\s*)+/, '');
    }

    // Update variables panel header with current step
    updateExecutingStepDisplay(slug, stepName);

    // Scroll to step
    step.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Highlight step
    step.style.outline = '2px solid #0176D3';
    step.style.outlineOffset = '4px';
    setTimeout(function() {
        step.style.outline = '';
        step.style.outlineOffset = '';
    }, 1000);

    // Execute the step
    executePlaygroundStep(sid);
}

function scrollToStepByIndex(slug, index) {
    var steps = document.querySelectorAll('[id^="step-' + slug + '-"]');
    if (index < 0 || index >= steps.length) return;

    var step = steps[index];
    step.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Highlight step
    step.style.outline = '2px solid #0176D3';
    step.style.outlineOffset = '4px';
    setTimeout(function() {
        step.style.outline = '';
        step.style.outlineOffset = '';
    }, 1000);
}

// Scroll to the step that defines a variable
function scrollToVariableSource(slug, varName) {

    var foundStep = null;

    // Look through all steps to find which one outputs this variable
    var playgroundSteps = document.querySelectorAll('[id^="step-' + slug + '-"]');

    playgroundSteps.forEach(function(stepWrapper) {
        var panel = stepWrapper.querySelector('[id^="playground-panel-"]');
        if (!panel) return;

        // Check if this step has outputs defined (these are the variables it captures)
        var outputsAttr = panel.getAttribute('data-wf-outputs');
        if (outputsAttr) {
            try {
                var outputs = JSON.parse(outputsAttr);
                // Check if this variable is in the outputs (handle both array and object format)
                if (Array.isArray(outputs)) {
                    for (var i = 0; i < outputs.length; i++) {
                        if (outputs[i].name === varName) {
                            foundStep = stepWrapper;
                            return;
                        }
                    }
                } else if (outputs && outputs[varName]) {
                    foundStep = stepWrapper;
                    return;
                }
            } catch (e) {
                console.error('Error parsing outputs:', e);
            }
        }
    });

    if (foundStep) {
        // Scroll to the step
        foundStep.scrollIntoView({ behavior: 'smooth', block: 'center' });

        // Highlight the step briefly
        foundStep.style.outline = '3px solid #0176D3';
        foundStep.style.outlineOffset = '6px';
        foundStep.style.borderRadius = '8px';
        setTimeout(function() {
            foundStep.style.outline = '';
            foundStep.style.outlineOffset = '';
            foundStep.style.borderRadius = '';
        }, 2500);
    } else {
        // Variable source not found, just highlight variables panel
        var variablesPanel = document.getElementById('variables-sidebar-' + slug);
        if (variablesPanel) {
            variablesPanel.style.animation = 'highlight-pulse 1s ease';
            setTimeout(function() {
                variablesPanel.style.animation = '';
            }, 1000);
        }
    }
}

function initializePlaygroundSteps() {
    var playgroundPanels = document.querySelectorAll('[id^="playground-panel-"]');
    playgroundPanels.forEach(function(panel) {
        if (!panel.dataset.initialized) {
            var sid = panel.id.replace('playground-panel-', '');
            initializePlaygroundStep(sid);
        }
    });
}

function initializePlaygroundStep(sid) {
    var panel = document.getElementById('playground-panel-' + sid);
    if (!panel || panel.dataset.initialized) return;

    panel.dataset.initialized = 'true';

    var apiUrn = panel.dataset.wfApi;
    var operationId = panel.dataset.wfOperation;
    var inputsJson = panel.dataset.wfInputs;

    if (!apiUrn || !operationId) {
        panel.innerHTML = '<p>No API operation defined for this step</p>';
        return;
    }

    var apiSlug = apiUrn.replace('urn:api:', '');
    var opLookup = window.__OP_LOOKUP__ || {};
    var apiEntry = opLookup[apiSlug];

    if (!apiEntry) {
        panel.innerHTML = '<p>API not found: ' + apiSlug + '</p>';
        return;
    }

    var opMeta = apiEntry.ops[operationId];
    if (!opMeta) {
        panel.innerHTML = '<p>Operation not found: ' + operationId + '</p>';
        return;
    }

    // Parse YAML inputs
    var yamlInputs = {};
    try {
        yamlInputs = JSON.parse(inputsJson || '{}');
    } catch (e) {
        console.error('Failed to parse playground inputs:', e);
    }

    var effective;
    if (apiEntry.servers && apiEntry.servers.length > 0) {
        effective = getEffectiveServer(apiEntry.servers, null);
    } else {
        effective = { server: null, url: getSelectedServer(null), supported: true };
    }
    var serverUrl = effective.url.replace(/\/$/, '');
    var linkPrefix = window.__API_LINK_PREFIX__ || '';

    // Get the slug from the panel's parent to enable variable reference links
    var skillSlug = '';
    var stepWrapper = panel.closest('[id^="step-"]');
    if (stepWrapper) {
        var stepId = stepWrapper.id;
        var match = stepId.match(/step-([^-]+)-/);
        if (match) skillSlug = match[1];
    }

    var html = '';

    // Header with title and Send button (matching try-panel-header structure)
    html += '<div class="try-panel-header">';

    // Left side: operationId as link
    html += '<a href="' + escapeHtml(linkPrefix + apiSlug + '.html#op-' + operationId) + '" target="_blank" class="playground-operation-link">';
    html += '<h4>' + escapeHtml(apiSlug) + '.' + escapeHtml(operationId) + '</h4>';
    html += '</a>';

    // Right side: actions (spinner + send button + dropdown)
    html += '<div class="try-header-actions">';
    html += '<span class="try-spinner" id="spinner-' + sid + '" style="display:none">Sending...</span>';
    html += '<button class="btn-send" onclick="executePlaygroundStep(\'' + sid + '\', this)">';
    html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';
    html += '<span>Send</span>';
    html += '</button>';
    html += '<button class="btn-copy-curl" onclick="copyCurlCommand(\'' + sid + '\', this)">';
    html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
    html += '<span>Copy cURL</span>';
    html += '</button>';
    html += '</div>';
    html += '</div>';

    // Region notice (shown when the API doesn't declare a server for the
    // selected region). Always emitted so updateAllPlaygroundUrls() can toggle
    // it in place without re-rendering the whole panel.
    var noticeDisplay = effective.supported ? 'none' : '';
    var noticeText = effective.supported ? '' : _regionNoticeText('api', getSelectedRegion());
    html += '<div class="operation-region-notice" role="status" aria-live="polite" ' +
            'style="display:' + noticeDisplay + '">' + escapeHtml(noticeText) + '</div>';

    // Operation URL bar (after header)
    html += '<div class="operation-url-bar-container">';
    html += buildUrlBarHtml(opMeta.method, serverUrl, opMeta.path, null);
    html += '</div>';

    // Use shared panel renderer (no execute button - it's in header now)
    html += renderOperationPanel(sid, opMeta, {
        yamlInputs: yamlInputs,
        enableVariableRefs: true,
        slug: skillSlug,
        contextType: 'playground',
        showExecuteButton: false  // Button is in header now
    });

    panel.innerHTML = html;

    // Add blur event listeners to inputs to re-evaluate variables
    var inputs = panel.querySelectorAll('input[type="text"]');
    inputs.forEach(function(input) {
        input.addEventListener('blur', function() {
            // Re-evaluate variables when input loses focus
            if (skillSlug) {
                updateVariableTooltips(skillSlug);
            }
        });
    });

    // Initialize ACE editors
    setTimeout(function() {
        initCodeMirrorEditors();
    }, 0);
}

// Function to capture variables from API response
function captureVariablesFromResponse(panel, result) {
    if (!panel) return;

    var outputsJson = panel.dataset.wfOutputs;
    if (!outputsJson || outputsJson === '{}') return;

    var outputs = {};
    try {
        outputs = JSON.parse(outputsJson);
    } catch (e) {
        console.error('Failed to parse outputs:', e);
        return;
    }

    // Get skill slug from panel ID
    var stepWrapper = panel.closest('[id^="step-"]');
    if (!stepWrapper) return;

    var stepId = stepWrapper.id;
    // Match step-<slug>-<step-index>
    var match = stepId.match(/^step-(.+)-(\d+)$/);
    if (!match) return;

    var slug = match[1];
    var stepIndex = parseInt(match[2]);
    var stepNumber = stepIndex + 1;

    // Get step title for source (remove all "Step N:" prefixes)
    var stepWrapper = panel.closest('[id^="step-"]');
    var stepTitle = stepWrapper ? stepWrapper.querySelector('.step-title') : null;
    var stepName = 'Step ' + stepNumber;
    if (stepTitle) {
        stepName = stepTitle.textContent.trim();
        // Remove all "Step N:" prefixes (in case there are duplicates)
        stepName = stepName.replace(/^(?:Step \d+:\s*)+/, '');
    }

    // Parse response body
    var responseBody = result.body;
    if (typeof responseBody === 'string') {
        try {
            responseBody = JSON.parse(responseBody);
        } catch (e) {
            console.error('Failed to parse response body:', e);
            return;
        }
    }


    // Extract variables using JSONPath-like simple extraction
    var capturedVars = {};

    // Handle array format: [{name: 'var1', path: '$.path', labels: '$.path'}, ...]
    if (Array.isArray(outputs)) {
        for (var i = 0; i < outputs.length; i++) {
            var outputDef = outputs[i];
            var varName = outputDef.name;
            var path = outputDef.path;
            var labelsPath = outputDef.labels; // Optional labels path


            if (!varName || !path) {
                console.warn('Missing name or path in output definition:', outputDef);
                continue;
            }

            var value = extractValueByPath(responseBody, path);

            if (value !== undefined) {
                capturedVars[varName] = value;

                // If labels path is provided, extract labels too
                if (labelsPath && Array.isArray(value)) {
                    var labels = extractValueByPath(responseBody, labelsPath);
                    if (labels && Array.isArray(labels)) {
                        // Store labels alongside values
                        if (!capturedVars.__labels__) {
                            capturedVars.__labels__ = {};
                        }
                        capturedVars.__labels__[varName] = labels;
                    }
                }
            }
        }
    } else {
        // Handle object format: {var1: '$.path', var2: {path: '$.path', labels: '$.path'}}
        for (var varName in outputs) {
            var pathConfig = outputs[varName];

            // Handle both string paths and object configs
            var path;
            var labelsPath;
            if (typeof pathConfig === 'string') {
                path = pathConfig;
            } else if (typeof pathConfig === 'object' && pathConfig.path) {
                path = pathConfig.path;
                labelsPath = pathConfig.labels; // Optional labels path
            } else {
                console.warn('Invalid path config for', varName, ':', pathConfig);
                continue;
            }

            var value = extractValueByPath(responseBody, path);
            if (value !== undefined) {
                capturedVars[varName] = value;

                // If labels path is provided, extract labels too
                if (labelsPath && Array.isArray(value)) {
                    var labels = extractValueByPath(responseBody, labelsPath);
                    if (labels && Array.isArray(labels)) {
                        // Store labels alongside values
                        if (!capturedVars.__labels__) {
                            capturedVars.__labels__ = {};
                        }
                        capturedVars.__labels__[varName] = labels;
                    }
                }
            }
        }
    }

    // Store variables globally for this skill
    if (!skillVariables[slug]) {
        skillVariables[slug] = {};
    }

    // Keep track of which variables are arrays (for table display)
    if (!window.skillArrayVariables) {
        window.skillArrayVariables = {};
    }
    if (!window.skillArrayVariables[slug]) {
        window.skillArrayVariables[slug] = {};
    }

    // Keep track of labels for array variables
    if (!window.skillArrayLabels) {
        window.skillArrayLabels = {};
    }
    if (!window.skillArrayLabels[slug]) {
        window.skillArrayLabels[slug] = {};
    }

    // Extract labels from captured vars if present
    var labelsMap = capturedVars.__labels__ || {};

    // For array variables, store the first element as the default selected value
    for (var varName in capturedVars) {
        if (varName === '__labels__') continue; // Skip the labels metadata

        var value = capturedVars[varName];
        if (Array.isArray(value) && value.length > 0) {
            // Store full array for dropdown display
            window.skillArrayVariables[slug][varName] = value;

            // Store labels if available
            if (labelsMap[varName]) {
                window.skillArrayLabels[slug][varName] = labelsMap[varName];
            }

            // Only set to first element if variable doesn't exist yet (preserve user selection)
            if (skillVariables[slug][varName] === undefined) {
                skillVariables[slug][varName] = value[0];
            } else {
            }
        } else {
            skillVariables[slug][varName] = value;
        }
    }


    // Update variables table with ALL accumulated variables
    // For array variables, pass the full array; for others, pass the value
    var tableVariables = {};
    for (var varName in skillVariables[slug]) {
        if (window.skillArrayVariables[slug][varName]) {
            // This is an array variable - show full array in dropdown
            tableVariables[varName] = window.skillArrayVariables[slug][varName];
        } else {
            // Regular variable
            tableVariables[varName] = skillVariables[slug][varName];
        }
    }
    updateVariablesTable(slug, tableVariables, stepName);

    // Update tooltips on all input fields with variable references
    updateVariableTooltips(slug);
}

// Update tooltips and resolved value displays on input fields that contain variable references
function updateVariableTooltips(slug) {

    // Find all steps for this skill
    var steps = document.querySelectorAll('[id^="step-' + slug + '-"]');

    steps.forEach(function(step, stepIndex) {

        // Find the playground panel within this step
        var panel = step.querySelector('[id^="playground-panel-"]');
        if (!panel) {
            return;
        }

        // Find ALL text inputs in this panel
        var allInputs = panel.querySelectorAll('input[type="text"]');

        allInputs.forEach(function(input) {
            var value = input.value;
            var varRefs = detectVariableReferences(value);

            if (varRefs.length > 0) {
                var substitutedValue = substituteVariables(value, slug);

                if (substitutedValue !== value) {
                    // Add the has-variable-ref class if not already present
                    if (!input.classList.contains('has-variable-ref')) {
                        input.classList.add('has-variable-ref');
                    }

                    // Update or create the resolved value span
                    var nextSibling = input.nextElementSibling;
                    if (nextSibling && nextSibling.classList.contains('variable-resolved-value')) {
                        nextSibling.textContent = substitutedValue;
                    } else if (nextSibling && nextSibling.classList.contains('btn-xorigin-search')) {
                        // For x-origin fields, the button comes first, check after it
                        var spanAfterButton = nextSibling.nextElementSibling;
                        if (spanAfterButton && spanAfterButton.classList.contains('variable-resolved-value')) {
                            spanAfterButton.textContent = substitutedValue;
                        } else {
                            // Create new span after the button
                            var span = document.createElement('span');
                            span.className = 'variable-resolved-value';
                            span.textContent = substitutedValue;
                            nextSibling.parentNode.insertBefore(span, nextSibling.nextSibling);
                        }
                    } else {
                        // Create new span
                        var span = document.createElement('span');
                        span.className = 'variable-resolved-value';
                        span.textContent = substitutedValue;
                        input.parentNode.insertBefore(span, input.nextSibling);
                    }
                } else {
                    // Variable not yet resolved
                    if (!input.classList.contains('has-variable-ref')) {
                        input.classList.add('has-variable-ref');
                    }
                }
            }
        });
    });
}

// Substitute variable references in a value
function substituteVariables(value, slug) {
    if (!value || typeof value !== 'string') return value;

    var vars = skillVariables[slug] || {};
    var result = value;

    // Replace ${variableName} with actual values
    var regex = /\$\{([^}]+)\}/g;
    result = result.replace(regex, function(match, varName) {
        varName = varName.trim();
        if (varName in vars) {
            var varValue = vars[varName];
            // Convert to string if not already
            return typeof varValue === 'object' ? JSON.stringify(varValue) : String(varValue);
        }
        // Variable not found, return original
        console.warn('Variable not found:', varName);
        return match;
    });

    return result;
}

// Simple JSONPath-like extraction
function extractValueByPath(obj, path) {
    if (!path || !obj) return undefined;

    // Ensure path is a string
    if (typeof path !== 'string') {
        console.warn('Path is not a string:', path, 'Type:', typeof path);
        return undefined;
    }

    // Remove leading $. if present
    path = path.replace(/^\$\./, '');

    var parts = path.split('.');
    var current = obj;

    for (var i = 0; i < parts.length; i++) {
        var part = parts[i];

        // Handle array wildcard like data[*].id
        var wildcardMatch = part.match(/^(.+)\[\*\]$/);
        if (wildcardMatch) {
            var arrayName = wildcardMatch[1];
            current = current[arrayName];
            if (!current || !Array.isArray(current)) return undefined;

            // If this is the last part, return the array itself
            if (i === parts.length - 1) {
                return current;
            }

            // Otherwise, collect the next property from each array element
            var remaining = parts.slice(i + 1);
            var results = [];
            for (var j = 0; j < current.length; j++) {
                var item = current[j];
                for (var k = 0; k < remaining.length; k++) {
                    if (item === undefined) break;
                    item = item[remaining[k]];
                }
                if (item !== undefined) {
                    results.push(item);
                }
            }
            return results.length > 0 ? results : undefined;
        }

        // Handle array indexing like items[0]
        var arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
        if (arrayMatch) {
            var arrayName = arrayMatch[1];
            var index = parseInt(arrayMatch[2]);
            current = current[arrayName];
            if (!current || !Array.isArray(current)) return undefined;
            current = current[index];
        } else {
            current = current[part];
        }

        if (current === undefined) return undefined;
    }

    return current;
}

// Update variables table with captured values
function updateVariablesTable(slug, variables, source) {

    var tableBody = document.querySelector('#variables-table-' + slug + ' tbody');
    if (!tableBody) {
        console.error('❌ Table body not found for slug:', slug);
        return;
    }

    // Clear "No variables" message if present
    var noVarsRow = tableBody.querySelector('.no-variables-row');
    if (noVarsRow) {
        noVarsRow.remove();
    }

    // Count existing rows
    var existingRowsCount = tableBody.querySelectorAll('tr[data-var-name]').length;

    // Add or update each variable
    var variableCount = 0;
    for (var varName in variables) {
        variableCount++;
        var value = variables[varName];

        // Check if variable already exists
        var existingRow = tableBody.querySelector('tr[data-var-name="' + varName + '"]');

        if (existingRow) {
            // Update existing row - update ONLY the value cell, keep original source
            renderVariableValue(existingRow.cells[1], value, varName, slug);
            // Do NOT update source - keep the original step that produced this variable
        } else {
            // Add new row
            var row = document.createElement('tr');
            row.className = 'variable-row';
            row.setAttribute('data-var-name', varName);

            var nameCell = document.createElement('td');
            nameCell.textContent = varName;
            nameCell.style.fontFamily = 'var(--font-mono)';
            nameCell.style.fontWeight = '600';

            var valueCell = document.createElement('td');
            valueCell.style.fontFamily = 'var(--font-mono)';
            valueCell.style.fontSize = '0.8125rem';
            renderVariableValue(valueCell, value, varName, slug);

            var sourceCell = document.createElement('td');
            sourceCell.textContent = source;
            sourceCell.style.fontSize = '0.75rem';
            sourceCell.style.color = '#6b7280';

            var actionsCell = document.createElement('td');
            actionsCell.innerHTML = '<button class="btn-delete-variable" onclick="deleteVariable(\'' + slug + '\', \'' + varName + '\')" title="Delete variable">✕</button>';

            row.appendChild(nameCell);
            row.appendChild(valueCell);
            row.appendChild(sourceCell);
            row.appendChild(actionsCell);

            tableBody.appendChild(row);
        }
    }

    // Count final rows
    var finalRowsCount = tableBody.querySelectorAll('tr[data-var-name]').length;
}

// Render variable value based on its type
function renderVariableValue(cell, value, varName, slug) {
    cell.innerHTML = '';

    if (Array.isArray(value)) {
        // Array: render as dropdown with indices
        var select = document.createElement('select');
        select.className = 'variable-array-select';

        // Check if labels are available for this variable
        var labels = null;
        if (window.skillArrayLabels && window.skillArrayLabels[slug] && window.skillArrayLabels[slug][varName]) {
            labels = window.skillArrayLabels[slug][varName];
        }

        for (var i = 0; i < value.length; i++) {
            var option = document.createElement('option');
            var itemValue = value[i];
            var itemStr = typeof itemValue === 'object' ? JSON.stringify(itemValue) : String(itemValue);
            option.value = itemStr;

            // Format: [index] Label (value) if labels available, otherwise [index] value
            var displayText = '[' + i + '] ';
            if (labels && labels[i]) {
                var labelStr = String(labels[i]);
                // Truncate label to fit in 185px width (roughly 20 chars for label + ID)
                var truncatedLabel = labelStr.length > 15 ? labelStr.substring(0, 15) + '...' : labelStr;
                var truncatedValue = itemStr.length > 8 ? itemStr.substring(0, 8) + '...' : itemStr;
                displayText += truncatedLabel + ' (' + truncatedValue + ')';
            } else {
                // Without labels, show more of the value
                displayText += (itemStr.length > 25 ? itemStr.substring(0, 25) + '...' : itemStr);
            }
            option.textContent = displayText;
            option.setAttribute('title', '[' + i + '] ' + (labels && labels[i] ? labels[i] + ' (' + itemStr + ')' : itemStr));
            select.appendChild(option);
        }

        // Store the full array and selection state
        select.setAttribute('data-var-name', varName);
        select.setAttribute('data-var-array', JSON.stringify(value));
        select.setAttribute('data-slug', slug);

        // Add change handler to update variable store and refresh displays
        select.onchange = function() {
            var selectedIndex = this.selectedIndex;
            var arrayData = JSON.parse(this.getAttribute('data-var-array'));
            var varName = this.getAttribute('data-var-name');
            var slug = this.getAttribute('data-slug');

            // Store selected value (not array) in skillVariables
            if (skillVariables[slug]) {
                skillVariables[slug][varName] = arrayData[selectedIndex];

                // Update all input tooltips to reflect new value
                updateVariableTooltips(slug);
            }
        };

        // Restore previously selected value if it exists in skillVariables
        if (skillVariables[slug] && skillVariables[slug][varName] !== undefined) {
            var currentValue = skillVariables[slug][varName];
            // Find the index that matches the current value
            for (var j = 0; j < value.length; j++) {
                var itemValue = value[j];
                var itemStr = typeof itemValue === 'object' ? JSON.stringify(itemValue) : String(itemValue);
                var currentStr = typeof currentValue === 'object' ? JSON.stringify(currentValue) : String(currentValue);
                if (itemStr === currentStr) {
                    select.selectedIndex = j;
                    break;
                }
            }
        }

        cell.appendChild(select);
    } else if (typeof value === 'object' && value !== null) {
        // Object: render as expandable tree view
        var treeContainer = document.createElement('div');
        treeContainer.className = 'variable-tree-view';
        treeContainer.style.fontSize = '0.8125rem';

        var toggleBtn = document.createElement('button');
        toggleBtn.textContent = '▶';
        toggleBtn.className = 'tree-toggle-btn';
        toggleBtn.style.border = 'none';
        toggleBtn.style.background = 'none';
        toggleBtn.style.cursor = 'pointer';
        toggleBtn.style.padding = '0 0.25rem';
        toggleBtn.style.fontFamily = 'monospace';

        var summary = document.createElement('span');
        summary.textContent = '{...}';
        summary.style.color = '#6b7280';

        var treeContent = document.createElement('div');
        treeContent.className = 'tree-content';
        treeContent.style.display = 'none';
        treeContent.style.marginLeft = '1rem';
        treeContent.style.marginTop = '0.25rem';
        treeContent.style.borderLeft = '2px solid #e5e7eb';
        treeContent.style.paddingLeft = '0.5rem';

        // Build tree structure
        renderObjectTree(treeContent, value, 0);

        toggleBtn.onclick = function() {
            if (treeContent.style.display === 'none') {
                treeContent.style.display = 'block';
                toggleBtn.textContent = '▼';
            } else {
                treeContent.style.display = 'none';
                toggleBtn.textContent = '▶';
            }
        };

        treeContainer.appendChild(toggleBtn);
        treeContainer.appendChild(summary);
        treeContainer.appendChild(treeContent);
        cell.appendChild(treeContainer);
    } else {
        // Primitive value: render as text with tooltip
        var valueStr = String(value);
        cell.textContent = valueStr;
        // Add tooltip if value is long (more than 30 characters)
        if (valueStr.length > 30) {
            cell.setAttribute('title', valueStr);
        }
    }
}

// Recursively render object tree
function renderObjectTree(container, obj, depth) {
    if (depth > 5) {
        container.textContent = '... (max depth reached)';
        return;
    }

    for (var key in obj) {
        var value = obj[key];
        var line = document.createElement('div');
        line.style.marginBottom = '0.125rem';

        var keySpan = document.createElement('span');
        keySpan.textContent = key + ': ';
        keySpan.style.color = '#059669';
        keySpan.style.fontWeight = '600';
        line.appendChild(keySpan);

        if (Array.isArray(value)) {
            var valueSpan = document.createElement('span');
            valueSpan.textContent = '[Array(' + value.length + ')]';
            valueSpan.style.color = '#6b7280';
            line.appendChild(valueSpan);
        } else if (typeof value === 'object' && value !== null) {
            var nestedToggle = document.createElement('button');
            nestedToggle.textContent = '▶';
            nestedToggle.style.border = 'none';
            nestedToggle.style.background = 'none';
            nestedToggle.style.cursor = 'pointer';
            nestedToggle.style.padding = '0 0.25rem';
            nestedToggle.style.fontFamily = 'monospace';
            nestedToggle.style.fontSize = '0.75rem';

            var nestedSummary = document.createElement('span');
            nestedSummary.textContent = '{...}';
            nestedSummary.style.color = '#6b7280';

            var nestedContent = document.createElement('div');
            nestedContent.style.display = 'none';
            nestedContent.style.marginLeft = '1rem';
            nestedContent.style.borderLeft = '1px solid #e5e7eb';
            nestedContent.style.paddingLeft = '0.5rem';
            nestedContent.style.marginTop = '0.25rem';

            renderObjectTree(nestedContent, value, depth + 1);

            nestedToggle.onclick = function(content, btn, summary) {
                return function() {
                    if (content.style.display === 'none') {
                        content.style.display = 'block';
                        btn.textContent = '▼';
                    } else {
                        content.style.display = 'none';
                        btn.textContent = '▶';
                    }
                };
            }(nestedContent, nestedToggle, nestedSummary);

            line.appendChild(nestedToggle);
            line.appendChild(nestedSummary);
            line.appendChild(nestedContent);
        } else {
            var valueSpan = document.createElement('span');
            valueSpan.textContent = String(value);
            valueSpan.style.color = typeof value === 'string' ? '#dc2626' : '#2563eb';
            line.appendChild(valueSpan);
        }

        container.appendChild(line);
    }
}

async function executePlaygroundStep(sid, buttonEl) {
    var panel = document.getElementById('playground-panel-' + sid);
    if (!panel) return;

    var apiUrn = panel.dataset.wfApi;
    var operationId = panel.dataset.wfOperation;
    var apiSlug = apiUrn.replace('urn:api:', '');

    // Extract skill slug from sid (format: skillSlug-stepIndex)
    var skillSlug = sid.substring(0, sid.lastIndexOf('-'));

    var opLookup = window.__OP_LOOKUP__ || {};
    var apiEntry = opLookup[apiSlug];
    if (!apiEntry) {
        console.error('API not found:', apiSlug);
        markStepFailed(skillSlug, sid);
        return;
    }

    var opMeta = apiEntry.ops[operationId];
    if (!opMeta) {
        console.error('Operation not found:', operationId);
        markStepFailed(skillSlug, sid);
        return;
    }

    // Get UI elements
    var responseDiv = document.getElementById('response-' + sid);
    var statusBadge = document.getElementById('status-' + sid);
    var responseBodyDiv = document.getElementById('respbody-' + sid);
    var responseHeadersDiv = document.getElementById('respheaders-' + sid);

    // Button feedback
    var originalText = 'Send';
    if (buttonEl) {
        var textSpan = buttonEl.querySelector('span');
        if (textSpan) {
            originalText = textSpan.textContent;
            textSpan.textContent = 'Sending...';
        }
        buttonEl.disabled = true;
    }

    if (responseDiv) responseDiv.classList.add('empty');

    try {
        // Collect parameters
        var pathParams = {};
        var queryParams = {};
        var headerParams = {};
        var bodyContent = '';

        panel.querySelectorAll('[data-param]').forEach(function(input) {
            var paramName = input.getAttribute('data-param');
            var location = input.getAttribute('data-in');
            var value = input.value;

            if (!value) return;

            // Substitute variables in the value
            value = substituteVariables(value, skillSlug);

            if (paramName === '__body__') {
                bodyContent = value;
            } else if (location === 'path') {
                pathParams[paramName] = value;
            } else if (location === 'query') {
                queryParams[paramName] = value;
            } else if (location === 'header') {
                headerParams[paramName] = value;
            }
        });

        // Check for request body from ACE editor
        var bodyEditor = getCodeMirrorEditor('body-' + sid);
        if (bodyEditor) {
            var editorContent = bodyEditor.getValue();
            if (editorContent.trim()) {
                bodyContent = substituteVariables(editorContent.trim(), skillSlug);
            }
        }

        // Build URL
        var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
        var path = opMeta.path;

        // Replace path parameters
        for (var paramName in pathParams) {
            path = path.replace('{' + paramName + '}', encodeURIComponent(pathParams[paramName]));
        }

        var fullUrl = serverUrl + path;

        // Add query parameters
        var queryString = Object.keys(queryParams)
            .map(function(k) { return encodeURIComponent(k) + '=' + encodeURIComponent(queryParams[k]); })
            .join('&');
        if (queryString) {
            fullUrl += '?' + queryString;
        }

        // Prepare headers
        var headers = Object.assign(
            {'Content-Type': 'application/json'},
            getAuthHeaders(),
            headerParams
        );

        // Make the API call through proxy
        var PROXY_URL = window.__PROXY_CONFIG__ ? window.__PROXY_CONFIG__.url : '/proxy';
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: opMeta.method,
                url: fullUrl,
                headers: headers,
                body: bodyContent || null
            })
        });

        var result = await resp.json();
        await handleProxyResponse(result);

        // Restore button
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) textSpan.textContent = originalText;
            buttonEl.disabled = false;
        }

        if (responseDiv) responseDiv.classList.remove('empty');

        // Update status badge
        if (statusBadge) {
            var statusClass = 'status-error';
            if (result.status >= 200 && result.status < 300) {
                statusClass = 'status-2xx';
            } else if (result.status >= 300 && result.status < 400) {
                statusClass = 'status-3xx';
            } else if (result.status >= 400 && result.status < 500) {
                statusClass = 'status-4xx';
            } else if (result.status >= 500) {
                statusClass = 'status-5xx';
            }
            statusBadge.className = 'response-status-badge ' + statusClass;
            statusBadge.textContent = result.status;
        }

        if (result.error) {
            if (responseBodyDiv) {
                createReadOnlyAceEditor(responseBodyDiv, result.error, 'text');
            }
            markStepFailed(skillSlug, sid);
            return;
        }

        // Check if response is successful
        var isSuccess = result.status >= 200 && result.status < 300;

        // Display response using shared function
        displayResponseInAceEditors(responseBodyDiv, responseHeadersDiv, result);

        // Store response for evaluation panel
        if (result.body) {
            try {
                // Try to parse the response body as JSON
                window.lastStepResponse = JSON.parse(result.body);
            } catch (e) {
                // If not JSON, store the raw text
                window.lastStepResponse = result.body;
            }
        }

        if (isSuccess) {
            // Capture variables from response if outputs are defined
            captureVariablesFromResponse(panel, result);
            markStepSuccess(skillSlug, sid);
        } else {
            markStepFailed(skillSlug, sid);
        }

    } catch (error) {
        console.error('Playground execution failed:', error);

        // Restore button
        if (buttonEl) {
            var textSpan = buttonEl.querySelector('span');
            if (textSpan) textSpan.textContent = originalText;
            buttonEl.disabled = false;
        }

        if (responseDiv) responseDiv.classList.remove('empty');
        if (statusBadge) {
            statusBadge.textContent = 'Error';
            statusBadge.className = 'response-status-badge status-error';
        }
        if (responseBodyDiv) {
            createReadOnlyAceEditor(responseBodyDiv, 'Error: ' + error.message, 'text');
        }
        markStepFailed(skillSlug, sid);
    }
}

// Mark step as successful
function markStepSuccess(skillSlug, sid) {
    if (debuggerState[skillSlug]) {
        if (!debuggerState[skillSlug].successfulSteps) {
            debuggerState[skillSlug].successfulSteps = {};
        }
        debuggerState[skillSlug].successfulSteps[sid] = true;
    }
}

// Mark step as failed
function markStepFailed(skillSlug, sid) {
    if (debuggerState[skillSlug]) {
        if (!debuggerState[skillSlug].successfulSteps) {
            debuggerState[skillSlug].successfulSteps = {};
        }
        debuggerState[skillSlug].successfulSteps[sid] = false;

        // Stop debugger if running
        if (debuggerState[skillSlug].isRunning) {
            cancelDebugger(skillSlug);
        }
    }
}

// Check if previous step was successful
function canProceedToNextStep(skillSlug, currentStepIndex) {
    if (currentStepIndex === 0) return true; // First step can always run

    var state = debuggerState[skillSlug];
    if (!state || !state.successfulSteps) return false;

    // Check if previous step was successful
    var prevSid = skillSlug + '-' + (currentStepIndex - 1);
    return state.successfulSteps[prevSid] === true;
}

// ============================================================================
// Initialize server selector
// ============================================================================

function restoreServerSelection() {
    var regionSelect = document.getElementById('regionSelect');
    var customRow    = document.getElementById('customServerRow');
    var serverSelect = document.getElementById('serverSelect');
    var customInput  = document.getElementById('regionCustomInput');
    if (!regionSelect) return;

    var storedType   = sessionStorage.getItem('anypoint_server_type');
    var storedRegion = sessionStorage.getItem('anypoint_region');

    // Nothing stored → default US, custom row hidden.
    if (!storedType) {
        regionSelect.value = 'us';
        if (customRow) customRow.style.display = 'none';
        return;
    }

    // US → region select = 'us', custom hidden.
    if (storedType === 'us') {
        regionSelect.value = 'us';
        if (customRow) customRow.style.display = 'none';
        return;
    }

    // Non-US: known region matches a preset option?
    if (storedType === 'eu' || storedType === 'platform') {
        var domainRegions = (storedType === 'eu')
            ? (DOMAIN_REGIONS.anypoint || [])
            : (DOMAIN_REGIONS.platform || []);
        var isKnown = storedRegion && domainRegions.indexOf(storedRegion) !== -1 && storedRegion !== 'us';
        if (isKnown) {
            regionSelect.value = storedRegion;
            if (customRow) customRow.style.display = 'none';
            return;
        }
        // Custom: unknown region for this server type.
        regionSelect.value = 'custom';
        if (customRow) customRow.style.display = 'flex';
        if (serverSelect) serverSelect.value = storedType;
        if (customInput) customInput.value = storedRegion || '';
        return;
    }

    // Unknown stored type → default US.
    regionSelect.value = 'us';
    if (customRow) customRow.style.display = 'none';
}

(function initServerSelect() {
    document.addEventListener('DOMContentLoaded', function() {
        var customInput = document.getElementById('regionCustomInput');
        if (customInput) {
            customInput.addEventListener('input', function() {
                sessionStorage.setItem('anypoint_region', customInput.value.trim());
                updateAuthSummary();
                updateAllServerBars();
                updateAllMcpUrls();
                initStepUrlBars();
                updateAllPlaygroundUrls();
            });
        }
        restoreServerSelection();

        // Check for existing token
        var token = sessionStorage.getItem('anypoint_token');
        var authMethod = sessionStorage.getItem('anypoint_auth_method') || '';
        if (token && authMethod) {
            setAuthStatus(true, null, authMethod);
            if (sessionStorage.getItem('anypoint_token_expires_at')) {
                startTtlTimer();
            }
        }

        // Render environment variables
        renderEnvVars();

        // Initialize auth summary display
        updateAuthSummary();

        // Initialize server URL combos, variable inputs, and step URL bars
        initOperationUrls();
        initMcpUrls();
        initServerVarInputs();
        initStepUrlBars();

        // Initialize all Try It Out panels with environment variables
        var tryItOutPanels = document.querySelectorAll('.try-it-out');
        tryItOutPanels.forEach(function(panel) {
            applyEnvVarsToPanel(panel.id);
        });

        // Initialize CodeMirror editors
        initCodeMirrorEditors();
    });
})();

// ============================================================================
// Workflow Execution Engine
// ============================================================================

var workflowContexts = {};

function initWorkflowContext(skillSlug) {
    var section = document.querySelector('[data-wf-slug="' + skillSlug + '"]');
    if (!section) return;
    var stepsData = [];
    try {
        stepsData = JSON.parse(section.getAttribute('data-wf-steps') || '[]');
    } catch (e) {}
    workflowContexts[skillSlug] = {
        stepsData: stepsData,
        stepResults: []
    };
    // Reset all step statuses
    for (var i = 0; i < stepsData.length; i++) {
        workflowContexts[skillSlug].stepResults[i] = {inputs: {}, outputs: {}, response: null};
        setWfStepStatus(skillSlug, i, 'pending');
    }
}

function setWfStepStatus(skillSlug, stepIndex, status) {
    var el = document.getElementById('wf-status-' + skillSlug + '-' + stepIndex);
    if (!el) return;
    var labels = {pending: 'Pending', running: 'Running', done: 'Done', error: 'Error'};
    el.textContent = labels[status] || status;
    el.className = 'wf-status-badge wf-' + status;
}

function renderWorkflowStepForms(skillSlug) {
    var panels = document.querySelectorAll('[id^="wf-try-' + skillSlug + '-"]');
    var opLookup = window.__OP_LOOKUP__ || {};
    var envMap = getEnvVarsMap();

    panels.forEach(function(panel, stepIndex) {
        var formContainer = panel.querySelector('.wf-form-container');
        if (!formContainer || formContainer.hasAttribute('data-rendered')) return;

        var apiUrn = panel.getAttribute('data-wf-api');
        var operationId = panel.getAttribute('data-wf-operation');
        var inputsJson = panel.getAttribute('data-wf-inputs');

        if (!apiUrn || !operationId) return;

        var apiSlug = apiUrn.replace('urn:api:', '');
        var apiEntry = opLookup[apiSlug];
        if (!apiEntry) return;

        var opMeta = apiEntry.ops[operationId];
        if (!opMeta) return;

        var yamlInputs = {};
        try {
            yamlInputs = JSON.parse(inputsJson || '{}');
        } catch (e) {
            console.error('Failed to parse yamlInputs:', e);
        }

        // Render URL bar in the section header
        var wfServerUrl = getServerForApi(apiSlug).replace(/\/$/, '');
        var sid = skillSlug + '-' + stepIndex;
        var urlBarHeader = document.getElementById('wf-urlbar-' + sid);
        if (urlBarHeader) {
            urlBarHeader.innerHTML = buildUrlBarHtml(opMeta.method, wfServerUrl, opMeta.path,
                apiSlug + '.html#op-' + operationId);
        }

        // Build form HTML
        var html = '';
        var parameters = opMeta.parameters || [];

        // Group parameters by location
        var paramsByLocation = {
            path: parameters.filter(function(p) { return p.in === 'path'; }),
            query: parameters.filter(function(p) { return p.in === 'query'; }),
            header: parameters.filter(function(p) { return p.in === 'header'; })
        };

        // Render parameter sections
        [
            { location: 'path', label: 'Path Parameters', params: paramsByLocation.path },
            { location: 'query', label: 'Query Parameters', params: paramsByLocation.query },
            { location: 'header', label: 'Header Parameters', params: paramsByLocation.header }
        ].forEach(function(section) {
            if (section.params.length > 0) {
                // Check if any parameter is required
                var hasRequired = section.params.some(function(p) { return p.required || false; });
                html += '<details class="wf-params-section"' + (hasRequired ? ' open' : '') + '>';
                html += '<summary>' + section.label + '</summary>';
                html += '<div class="wf-params-content">';

                section.params.forEach(function(param) {
                    var paramName = param.name || '';
                    var schema = param.schema || {};
                    var paramType = schema.type || 'string';
                    var required = param.required || false;
                    var xOrigin = param['x-origin'];
                    var description = param.description || '';

                    // Get value from YAML inputs or environment variables
                    var value = '';
                    if (yamlInputs[paramName]) {
                        var inputDef = yamlInputs[paramName];
                        if (inputDef.value !== undefined) {
                            value = inputDef.value;
                        }
                    }
                    if (!value && envMap[paramName]) {
                        value = envMap[paramName];
                    }
                    if (!value && schema.default) {
                        value = schema.default;
                    }

                    // Attach YAML input source for step-to-step resolution
                    var sourceAttr = '';
                    if (yamlInputs[paramName]) {
                        sourceAttr = ' data-wf-source="' + escapeAttr(JSON.stringify(yamlInputs[paramName])) + '"';
                    }
                    html += '<div class="wf-param-row"' + sourceAttr + '>';

                    // Label with x-origin support
                    if (xOrigin) {
                        var origins = Array.isArray(xOrigin) ? xOrigin : [xOrigin];
                        var originsJsonStr = JSON.stringify(origins);
                        var sid = skillSlug + '-' + stepIndex;

                        html += '<div class="param-input-with-xorigin">';
                        html += '<label>';
                        html += '<span class="param-name-wrapper">';
                        html += '<code>' + escapeHtml(paramName) + '</code>';
                        if (required) html += '&nbsp;<span class="param-required" aria-label="required" title="Required">*</span>';
                        html += '</span>';
                        if (description) {
                            html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                            html += '<span class="param-info-icon" aria-label="more-info"></span>';
                            html += '</span>';
                        }
                        html += '</label>';
                        html += '<input type="text" data-wf-param="' + escapeHtml(paramName) + '" ';
                        html += 'data-in="' + section.location + '" ';
                        // Use Base64 encoding to avoid escaping issues
                        html += 'data-x-origins="' + btoa(originsJsonStr) + '" ';
                        html += 'id="param-' + sid + '-' + escapeHtml(paramName) + '" ';
                        html += 'placeholder="' + escapeHtml(paramType) + '" ';
                        html += 'value="' + escapeHtml(value) + '"';
                        if (required) html += ' required';
                        html += '>';
                        // Magnifier button
                        html += '<button type="button" class="btn-xorigin-search" ';
                        html += 'onclick="openXOriginModal(\'' + sid + '\', \'' + escapeHtml(paramName) + '\', \'' + section.location + '\'); return false;" ';
                        html += 'title="Fetch values from ' + origins.length + ' source(s)" aria-label="Search values">';
                        html += '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">'+
                        '<path d="M7 12C9.76142 12 12 9.76142 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
                        '<path d="M14 14L10.65 10.65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'+
                        '</svg>';
                        html += '</button>';
                        html += '</div>';
                    } else if (schema.enum) {
                        // Enum dropdown
                        html += '<label>';
                        html += '<span class="param-name-wrapper">';
                        html += '<code>' + escapeHtml(paramName) + '</code>';
                        if (required) html += '&nbsp;<span class="param-required" aria-label="required" title="Required">*</span>';
                        html += '</span>';
                        if (description) {
                            html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                            html += '<span class="param-info-icon" aria-label="more-info"></span>';
                            html += '</span>';
                        }
                        html += '</label>';
                        html += '<select data-wf-param="' + escapeHtml(paramName) + '" data-in="' + section.location + '"';
                        if (required) html += ' required';
                        html += '>';
                        schema.enum.forEach(function(enumVal) {
                            var selected = String(enumVal) === String(value) ? ' selected' : '';
                            html += '<option value="' + escapeHtml(String(enumVal)) + '"' + selected + '>';
                            html += escapeHtml(String(enumVal)) + '</option>';
                        });
                        html += '</select>';
                    } else {
                        // Regular text input
                        html += '<label>';
                        html += '<span class="param-name-wrapper">';
                        html += '<code>' + escapeHtml(paramName) + '</code>';
                        if (required) html += '&nbsp;<span class="param-required" aria-label="required" title="Required">*</span>';
                        html += '</span>';
                        if (description) {
                            html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                            html += '<span class="param-info-icon" aria-label="more-info"></span>';
                            html += '</span>';
                        }
                        html += '</label>';
                        html += '<input type="text" data-wf-param="' + escapeHtml(paramName) + '" ';
                        html += 'data-in="' + section.location + '" ';
                        html += 'placeholder="' + escapeHtml(paramType) + '" ';
                        html += 'value="' + escapeHtml(value) + '"';
                        if (required) html += ' required';
                        html += '>';
                    }

                    html += '</div>';
                });

                html += '</div></details>';
            }
        });

        // Add custom query parameters section
        var sid = skillSlug + '-' + stepIndex;
        html += '<details class="wf-params-section try-custom-params">';
        html += '<summary>Custom Query Parameters</summary>';
        html += '<div class="wf-params-content">';
        html += '<div id="custom-query-wf-' + sid + '" class="custom-params-container"></div>';
        html += '<button type="button" class="btn-add-custom-param" onclick="addCustomParamWf(\'' + sid + '\', \'query\')">+ Add Query Parameter</button>';
        html += '</div>';
        html += '</details>';

        // Add custom headers section
        html += '<details class="wf-params-section try-custom-params">';
        html += '<summary>Custom Headers</summary>';
        html += '<div class="wf-params-content">';
        html += '<div id="custom-header-wf-' + sid + '" class="custom-params-container"></div>';
        html += '<button type="button" class="btn-add-custom-param" onclick="addCustomParamWf(\'' + sid + '\', \'header\')">+ Add Header</button>';
        html += '</div>';
        html += '</details>';

        // Render request body if present
        var requestBody = opMeta.requestBody;
        if (requestBody) {
            var sid = skillSlug + '-' + stepIndex;

            // Identify body fields from YAML inputs (inputs that aren't path/query/header params)
            var bodyFields = [];
            var bodyObj = {};
            for (var key in yamlInputs) {
                var inputDef = yamlInputs[key];
                var isParam = parameters.find(function(p) { return p.name === key; });
                if (isParam) continue;

                var fieldPath = key;
                if (fieldPath.indexOf('body.') === 0) {
                    fieldPath = fieldPath.substring(5);
                }
                bodyFields.push({key: key, fieldPath: fieldPath, def: inputDef});

                // Build initial body object from static values
                if (inputDef.value !== undefined) {
                    if (fieldPath.indexOf('.') >= 0 || fieldPath.indexOf('[') >= 0) {
                        setNestedValue(bodyObj, fieldPath, inputDef.value);
                    } else {
                        bodyObj[fieldPath] = tryParseJson(String(inputDef.value));
                    }
                }
            }

            // Render individual body field inputs
            if (bodyFields.length > 0) {
                html += '<details class="wf-body-section wf-body-fields" open>';
                html += '<summary>Request Body Fields</summary>';
                html += '<div class="wf-params-content">';

                bodyFields.forEach(function(bf) {
                    var value = '';
                    if (bf.def.value !== undefined) {
                        value = String(bf.def.value);
                    } else if (bf.def.example) {
                        value = '';  // Show as placeholder, not pre-filled
                    }

                    var sourceAttr = ' data-wf-source="' + escapeAttr(JSON.stringify(bf.def)) + '"';
                    var description = bf.def.description || '';
                    var isUserProvided = bf.def.userProvided || false;
                    var hasFrom = bf.def.from && typeof bf.def.from === 'object';

                    html += '<div class="wf-param-row"' + sourceAttr + '>';
                    html += '<label>';
                    html += '<span class="param-name-wrapper">';
                    html += '<code>' + escapeHtml(bf.fieldPath) + '</code>';
                    if (isUserProvided) html += '&nbsp;<span class="param-required" aria-label="user provided" title="User provided">*</span>';
                    html += '</span>';
                    if (description) {
                        html += '<span class="param-info-wrapper" data-tooltip="' + escapeHtml(description) + '">';
                        html += '<span class="param-info-icon" aria-label="more-info"></span>';
                        html += '</span>';
                    }
                    html += '</label>';

                    // Source hint
                    var hint = '';
                    if (hasFrom && bf.def.from.variable) {
                        hint = 'from variable: ' + bf.def.from.variable;
                    } else if (isUserProvided) {
                        hint = 'user provided';
                    } else if (bf.def.value !== undefined) {
                        hint = 'static value';
                    }

                    html += '<input type="text" data-wf-param="' + escapeHtml(bf.fieldPath) + '" ';
                    html += 'data-in="body" ';
                    html += 'placeholder="' + escapeHtml(bf.def.example || bf.fieldPath) + '" ';
                    html += 'value="' + escapeHtml(value) + '" ';
                    html += 'oninput="syncBodyFieldsToRaw(\'' + escapeAttr(sid) + '\')">';
                    if (hint) html += '<span class="wf-source-hint">' + escapeHtml(hint) + '</span>';
                    html += '</div>';
                });

                html += '</div></details>';
            }

            // Raw body textarea (advanced override)
            var bodyValue = '';
            if (Object.keys(bodyObj).length > 0) {
                bodyValue = JSON.stringify(bodyObj, null, 2);
            }

            html += '<details class="wf-body-section">';
            html += '<summary>Raw Body <code>application/json</code></summary>';
            html += '<div class="wf-body-content">';
            html += '<div id="wf-body-' + sid + '" class="wf-request-editor-cm" data-wf-param="__body__" data-example-body="' + escapeHtml(bodyValue) + '"></div>';
            html += '</div></details>';
        }

        formContainer.innerHTML = html;
        formContainer.setAttribute('data-rendered', 'true');

        // Initialize Ace editor for workflow body editor
        var bodyEditorEl = document.getElementById('wf-body-' + sid);
        if (bodyEditorEl && typeof ace !== 'undefined') {
            if (!window.aceEditors) {
                window.aceEditors = {};
            }
            var editor = ace.edit(bodyEditorEl, {
                mode: 'ace/mode/json',
                theme: getAceTheme(),
                value: bodyValue,
                minLines: 10,
                maxLines: 15,
                showPrintMargin: false,
                highlightActiveLine: true,
                showGutter: true,
                fontSize: '13px'
            });
            window.aceEditors['wf-body-' + sid] = editor;
        }
    });
}

function syncBodyFieldsToRaw(sid) {
    var panel = document.getElementById('wf-try-' + sid);
    if (!panel) return;
    var bodyEditor = getCodeMirrorEditor('wf-body-' + sid);
    if (!bodyEditor) return;

    var bodyObj = {};
    panel.querySelectorAll('[data-in="body"][data-wf-param]').forEach(function(input) {
        var fieldPath = input.getAttribute('data-wf-param');
        var value = input.value;
        if (!value) return;
        var parsed = tryParseJson(value);
        if (fieldPath.indexOf('.') >= 0 || fieldPath.indexOf('[') >= 0) {
            setNestedValue(bodyObj, fieldPath, parsed);
        } else {
            bodyObj[fieldPath] = parsed;
        }
    });

    var newContent = Object.keys(bodyObj).length > 0 ? JSON.stringify(bodyObj, null, 2) : '';
    bodyEditor.setValue(newContent, -1);
}

function toggleWorkflow(skillSlug) {
    var panels = document.querySelectorAll('[id^="wf-try-' + skillSlug + '-"]');
    if (!panels.length) return;

    var firstPanel = panels[0];
    var isHidden = firstPanel.style.display === 'none';

    panels.forEach(function(panel) {
        panel.style.display = isHidden ? 'block' : 'none';
    });

    if (isHidden) {
        initWorkflowContext(skillSlug);
        renderWorkflowStepForms(skillSlug);
        for (var i = 0; i < (workflowContexts[skillSlug].stepsData || []).length; i++) {
            resolveWorkflowInputs(skillSlug, i);
        }
    }
}

function injectMissingPathParams(skillSlug) {
    // For each step, check the operation path for {param} placeholders
    // that don't have a matching input field, and inject editable fields for them
    var ctx = workflowContexts[skillSlug];
    if (!ctx) return;
    var opLookup = window.__OP_LOOKUP__ || {};

    ctx.stepsData.forEach(function(stepData, i) {
        if (!stepData || !stepData.api || !stepData.operationId) return;
        var apiSlug = stepData.api.replace('urn:api:', '');
        var apiEntry = opLookup[apiSlug] || {};
        var opMeta = (apiEntry.ops || {})[stepData.operationId];
        if (!opMeta) return;

        var panel = document.getElementById('wf-try-' + skillSlug + '-' + i);
        if (!panel) return;

        // Find all {param} in the path
        var pathParams = (opMeta.path.match(/\{([^}]+)\}/g) || []).map(function(m) {
            return m.slice(1, -1);
        });

        // Check which are already covered by existing input fields
        var existingParams = new Set();
        panel.querySelectorAll('[data-wf-param]').forEach(function(input) {
            existingParams.add(input.getAttribute('data-wf-param'));
        });

        var missing = pathParams.filter(function(p) { return !existingParams.has(p); });
        if (missing.length === 0) return;

        // Find or create the inputs container
        var inputsDiv = panel.querySelector('.wf-inputs');
        if (!inputsDiv) {
            inputsDiv = document.createElement('div');
            inputsDiv.className = 'wf-inputs';
            inputsDiv.innerHTML = '<h5>Inputs</h5>';
            panel.insertBefore(inputsDiv, panel.firstChild);
        }

        // Add fields for missing path params (at the top)
        var h5 = inputsDiv.querySelector('h5');
        missing.forEach(function(paramName) {
            var row = document.createElement('div');
            row.className = 'wf-input-row';
            row.setAttribute('data-wf-source', '{}');
            row.innerHTML =
                '<label><code>' + escapeHtml(paramName) + '</code>' +
                '<span class="wf-source-hint">path parameter</span></label>' +
                '<input type="text" data-wf-param="' + escapeAttr(paramName) + '" placeholder="' + escapeAttr(paramName) + '">';
            if (h5 && h5.nextSibling) {
                inputsDiv.insertBefore(row, h5.nextSibling);
            } else {
                inputsDiv.appendChild(row);
            }
        });
    });
}

// --- JSONPath extraction (powered by jsonpath-plus) ---

function extractByPath(responseBody, path) {
    if (!path || !responseBody) return undefined;
    // Ensure path starts with $
    if (path.charAt(0) !== '$') path = '$.' + path;
    var result = JSONPath.JSONPath({path: path, json: responseBody, wrap: false});
    return result;
}

// --- Input resolution ---

function resolveWorkflowInputs(skillSlug, stepIndex) {
    var ctx = workflowContexts[skillSlug];
    if (!ctx) return;

    var panel = document.getElementById('wf-try-' + skillSlug + '-' + stepIndex);
    if (!panel) return;

    var envMap = getEnvVarsMap();
    var rows = panel.querySelectorAll('.wf-input-row, .wf-param-row');

    rows.forEach(function(row) {
        var input = row.querySelector('[data-wf-param]');
        if (!input) return;
        var paramName = input.getAttribute('data-wf-param');

        var sourceJson = row.getAttribute('data-wf-source');
        var source = {};
        if (sourceJson) {
            try { source = JSON.parse(sourceJson) || {}; } catch (e) {}
        }

        var resolved = null;
        var resolvedFrom = '';

        // 1. Static value
        if ('value' in source) {
            resolved = String(source.value);
            resolvedFrom = 'static';
        }

        // 2. From variable (search previous steps in reverse order)
        if (source.from && typeof source.from === 'object' && source.from.variable) {
            var varName = source.from.variable;
            var field = source.from.field || '';

            // Search previous steps in reverse order (most recent first)
            var val = null;
            for (var s = stepIndex - 1; s >= 0; s--) {
                if (!ctx.stepResults[s]) continue;
                var srcResult = ctx.stepResults[s];
                // Check outputs first (higher priority)
                if (srcResult.outputs && srcResult.outputs[varName] !== undefined) {
                    val = srcResult.outputs[varName];
                    break;
                }
                // Then check inputs
                if (srcResult.inputs && srcResult.inputs[varName] !== undefined) {
                    val = srcResult.inputs[varName];
                    break;
                }
            }
            // Apply field navigation if present
            if (val != null && field) {
                val = extractByPath(val, field);
            }
            if (val != null) {
                resolved = typeof val === 'object' ? JSON.stringify(val) : String(val);
                resolvedFrom = 'variable';
            }
        }

        // 3. Environment variables (if not already resolved and matches by name)
        if (resolved == null && envMap[paramName]) {
            resolved = envMap[paramName];
            resolvedFrom = 'env';
        }

        // Apply resolved value
        if (resolved != null) {
            input.value = resolved;
            row.classList.add('wf-resolved');
        } else {
            row.classList.remove('wf-resolved');
        }
    });

    // Sync body field inputs to raw body textarea
    var sid = skillSlug + '-' + stepIndex;
    syncBodyFieldsToRaw(sid);
}

function findStepByTitle(skillSlug, stepName) {
    var ctx = workflowContexts[skillSlug];
    if (!ctx) return -1;
    for (var i = 0; i < ctx.stepsData.length; i++) {
        // The step YAML data doesn't have the title, but we can match from the DOM
        var card = document.getElementById('step-' + skillSlug + '-' + i);
        if (card) {
            var titleEl = card.querySelector('.skill-step-title');
            if (titleEl) {
                var title = titleEl.textContent.trim();
                // Match: "Step N: Title" pattern — stepName might be "Step N: Title" or just partial
                if (title === stepName || title.indexOf(stepName) >= 0 || stepName.indexOf(title) >= 0) {
                    return i;
                }
                // Also try matching without "Step N: " prefix
                var stripped = title.replace(/^Step \d+:\s*/, '');
                if (stripped === stepName || stepName === stripped) {
                    return i;
                }
            }
        }
    }
    return -1;
}

// --- Step execution ---

async function runWorkflowStep(skillSlug, stepIndex) {
    var ctx = workflowContexts[skillSlug];
    if (!ctx) {
        initWorkflowContext(skillSlug);
        ctx = workflowContexts[skillSlug];
    }

    var stepData = ctx.stepsData[stepIndex];
    if (!stepData || !stepData.api || !stepData.operationId) {
        showAuthMessage('Step has no API call defined.', true);
        return;
    }

    var sid = skillSlug + '-' + stepIndex;
    var panel = document.getElementById('wf-try-' + sid);
    if (!panel) return;

    // Collect input values by location
    var pathParams = {};
    var queryParams = {};
    var headerParams = {};
    var bodyFieldValues = {};
    var rawBodyContent = '';

    panel.querySelectorAll('[data-wf-param]').forEach(function(input) {
        var paramName = input.getAttribute('data-wf-param');
        var location = input.getAttribute('data-in');
        var value = input.value;

        // Check if this is an Ace editor
        if (paramName === '__body__' && input.classList.contains('wf-request-editor-cm')) {
            var bodyEditor = getCodeMirrorEditor(input.id);
            if (bodyEditor) {
                value = bodyEditor.getValue();
            } else {
                value = '';
            }
        }

        if (!value) return;

        if (paramName === '__body__') {
            rawBodyContent = value;
        } else if (location === 'body') {
            bodyFieldValues[paramName] = value;
        } else if (location === 'path') {
            pathParams[paramName] = value;
        } else if (location === 'query') {
            queryParams[paramName] = value;
        } else if (location === 'header') {
            headerParams[paramName] = value;
        }
    });

    // Build body from individual fields, falling back to raw textarea
    var bodyContent = '';
    if (Object.keys(bodyFieldValues).length > 0) {
        var bodyObj = {};
        for (var fieldPath in bodyFieldValues) {
            var val = tryParseJson(bodyFieldValues[fieldPath]);
            if (fieldPath.indexOf('.') >= 0 || fieldPath.indexOf('[') >= 0) {
                setNestedValue(bodyObj, fieldPath, val);
            } else {
                bodyObj[fieldPath] = val;
            }
        }
        bodyContent = JSON.stringify(bodyObj);
    } else if (rawBodyContent) {
        bodyContent = rawBodyContent;
    }

    ctx.stepResults[stepIndex].inputs = Object.assign({}, pathParams, queryParams, headerParams, bodyFieldValues);

    // Look up operation method + path + server
    var apiSlug = stepData.api.replace('urn:api:', '');
    var opLookup = window.__OP_LOOKUP__ || {};
    var apiEntry = opLookup[apiSlug] || {};
    var opMeta = (apiEntry.ops || {})[stepData.operationId];

    if (!opMeta) {
        showAuthMessage('Operation ' + stepData.operationId + ' not found in ' + apiSlug + ' spec.', true);
        return;
    }

    var method = opMeta.method;
    var pathTemplate = opMeta.path;

    // Substitute path parameters
    var path = pathTemplate;
    Object.keys(pathParams).forEach(function(name) {
        path = path.replace('{' + name + '}', encodeURIComponent(pathParams[name]));
    });

    // Fill any remaining {param} placeholders from env vars
    var envMap = getEnvVarsMap();
    var remaining = path.match(/\{([^}]+)\}/g);
    if (remaining) {
        remaining.forEach(function(placeholder) {
            var name = placeholder.slice(1, -1);
            if (envMap[name]) {
                path = path.replace(placeholder, encodeURIComponent(envMap[name]));
            }
        });
        // Check if there are still unfilled placeholders
        var stillMissing = path.match(/\{([^}]+)\}/g);
        if (stillMissing) {
            setWfStepStatus(skillSlug, stepIndex, 'error');
            showAuthMessage('Missing path parameters: ' + stillMissing.join(', ') + '. Fill them in the step inputs or environment variables.', true);
            return;
        }
    }

    // Build query string
    var queryString = '';
    var queryParts = [];
    Object.keys(queryParams).forEach(function(name) {
        queryParts.push(encodeURIComponent(name) + '=' + encodeURIComponent(queryParams[name]));
    });
    if (queryParts.length > 0) {
        queryString = '?' + queryParts.join('&');
    }

    // Use the step's API server, not the current page's server
    var serverUrl = getServerForApi(apiSlug).replace(/\/$/, '');
    var fullUrl = serverUrl + path + queryString;

    // Prepare request body
    var requestBody = null;
    if (bodyContent) {
        requestBody = bodyContent;
    }
    // Ensure requestBody is always a string (not an object)
    if (requestBody !== null && typeof requestBody !== 'string') {
        requestBody = JSON.stringify(requestBody);
    }

    // Build headers
    var headers = Object.assign(
        {'Content-Type': 'application/json'},
        getAuthHeaders(),
        headerParams
    );

    // UI feedback
    setWfStepStatus(skillSlug, stepIndex, 'running');
    var spinner = document.getElementById('wf-spinner-' + sid);
    var rightPanel = document.getElementById('wf-right-' + sid);
    var statusBadge = document.getElementById('wf-respstatus-' + sid);
    var responseBodyEl = document.getElementById('wf-respbody-' + sid);
    var responseHeadersEl = document.getElementById('wf-respheaders-' + sid);
    var outputsTable = document.getElementById('wf-outtable-' + sid);

    if (spinner) spinner.style.display = 'inline';
    if (rightPanel) rightPanel.removeAttribute('open');

    try {
        var resp = await fetch(PROXY_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                method: method,
                url: fullUrl,
                headers: headers,
                body: requestBody
            })
        });
        var data = await resp.json();
        await handleProxyResponse(data);

        if (spinner) spinner.style.display = 'none';
        if (rightPanel) rightPanel.setAttribute('open', '');

        if (data.error) {
            setWfStepStatus(skillSlug, stepIndex, 'error');
            if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-5xx'; }
            if (responseBodyEl) createReadOnlyAceEditor(responseBodyEl, data.error, 'text');
            return;
        }

        // Display status
        var status = data.status;
        var statusClass = 'status-' + String(status).charAt(0) + 'xx';
        if (statusBadge) { statusBadge.textContent = status; statusBadge.className = 'response-status-badge ' + statusClass; }

        // Display response body and headers
        displayResponseInAceEditors(responseBodyEl, responseHeadersEl, data);

        // Parse body for output extraction
        var parsedBody = null;
        try {
            parsedBody = JSON.parse(data.body || '{}');
        } catch (e) {}

        ctx.stepResults[stepIndex].response = parsedBody || data.body;

        // Extract outputs
        if (status >= 200 && status < 300 && parsedBody) {
            var outputDefs = [];
            try {
                outputDefs = JSON.parse(panel.getAttribute('data-wf-outputs') || '[]');
            } catch (e) {}

            var extractedOutputs = {};
            var fullArrayOutputs = {};
            var fullArrayLabels = {};

            outputDefs.forEach(function(outDef) {
                if (!outDef || !outDef.name) return;
                var value = extractByPath(parsedBody, outDef.path);

                if (Array.isArray(value) && value.length > 1) {
                    fullArrayOutputs[outDef.name] = value;
                    extractedOutputs[outDef.name] = value[0];

                    // Extract labels if a labels path is defined
                    if (outDef.labels) {
                        var labelVals = extractByPath(parsedBody, outDef.labels);
                        if (!Array.isArray(labelVals)) labelVals = labelVals != null ? [labelVals] : [];
                        if (labelVals.length === value.length) {
                            fullArrayLabels[outDef.name] = labelVals;
                        } else {
                            console.warn('Output labels count mismatch for "' + outDef.name + '": '
                                + labelVals.length + ' labels vs ' + value.length + ' values. Ignoring labels.');
                        }
                    }
                } else {
                    if (Array.isArray(value) && value.length === 1) {
                        value = value[0];
                    }
                    extractedOutputs[outDef.name] = value;
                }
            });

            ctx.stepResults[stepIndex]._fullArrayOutputs = fullArrayOutputs;
            ctx.stepResults[stepIndex].outputs = extractedOutputs;

            // Render outputs UI — one row per output, dropdowns for multi-value
            if (outputsTable) {
                var tbody = outputsTable.querySelector('tbody');
                if (!tbody) { tbody = document.createElement('tbody'); outputsTable.appendChild(tbody); }

                var html = '';
                outputDefs.forEach(function(outDef) {
                    if (!outDef || !outDef.name) return;
                    var name = outDef.name;
                    if (fullArrayOutputs[name]) {
                        html += renderOutputDropdownRow(sid, skillSlug, stepIndex, name, fullArrayOutputs[name], fullArrayLabels[name] || null);
                    } else {
                        var displayVal = extractedOutputs[name];
                        var displayStr = (displayVal != null && typeof displayVal === 'object') ? JSON.stringify(displayVal) : String(displayVal != null ? displayVal : '');
                        html += '<tr><td><code>' + escapeHtml(name) + '</code></td>'
                            + '<td><code class="wf-output-value">' + escapeHtml(displayStr.substring(0, 200)) + '</code></td></tr>';
                    }
                });

                tbody.innerHTML = html;
            }

            setWfStepStatus(skillSlug, stepIndex, 'done');

            // Auto-resolve next step inputs (and all subsequent steps)
            for (var nextIdx = stepIndex + 1; nextIdx < ctx.stepsData.length; nextIdx++) {
                resolveWorkflowInputs(skillSlug, nextIdx);
            }
        } else {
            setWfStepStatus(skillSlug, stepIndex, status >= 200 && status < 300 ? 'done' : 'error');
        }

    } catch (e) {
        if (spinner) spinner.style.display = 'none';
        if (rightPanel) rightPanel.setAttribute('open', '');
        setWfStepStatus(skillSlug, stepIndex, 'error');
        if (statusBadge) { statusBadge.textContent = 'Error'; statusBadge.className = 'response-status-badge status-5xx'; }
        if (responseBodyEl) responseBodyEl.textContent = 'Unable to connect to the server. Please check your network connection and try again.';
    }
}

// --- Array output dropdown ---

function renderOutputDropdownRow(sid, skillSlug, stepIndex, outputName, values, labels) {
    var html = '<tr>';
    html += '<td><code>' + escapeHtml(outputName) + '</code></td>';
    html += '<td><select class="wf-output-select"'
        + ' data-skill="' + escapeAttr(skillSlug) + '"'
        + ' data-step="' + stepIndex + '"'
        + ' data-output-name="' + escapeAttr(outputName) + '">';
    values.forEach(function(val, i) {
        var valueStr = (val != null && typeof val === 'object') ? JSON.stringify(val) : String(val != null ? val : '');
        var labelStr = (labels && labels[i] != null) ? String(labels[i]) : null;
        var optionText;
        if (labelStr && labelStr !== valueStr) {
            optionText = '[' + i + '] ' + labelStr + ' (' + valueStr.substring(0, 60) + ')';
        } else {
            optionText = '[' + i + '] ' + valueStr.substring(0, 80);
        }
        html += '<option value="' + i + '"' + (i === 0 ? ' selected' : '') + '>' + escapeHtml(optionText) + '</option>';
    });
    html += '</select></td>';
    html += '</tr>';
    return html;
}

// Delegated change handler for output dropdowns
document.addEventListener('change', function(e) {
    var select = e.target.closest('select.wf-output-select');
    if (!select) return;

    var skillSlug = select.getAttribute('data-skill');
    var stepIndex = parseInt(select.getAttribute('data-step'), 10);
    var outputName = select.getAttribute('data-output-name');
    var selectedIndex = parseInt(select.value, 10);
    onOutputDropdownChanged(skillSlug, stepIndex, outputName, selectedIndex);
});

function onOutputDropdownChanged(skillSlug, stepIndex, outputName, selectedIndex) {
    var ctx = workflowContexts[skillSlug];
    if (!ctx || !ctx.stepResults[stepIndex]) return;

    var fullArrays = ctx.stepResults[stepIndex]._fullArrayOutputs || {};
    if (fullArrays[outputName] && selectedIndex < fullArrays[outputName].length) {
        ctx.stepResults[stepIndex].outputs[outputName] = fullArrays[outputName][selectedIndex];
    }

    // Re-resolve all subsequent step inputs
    for (var nextIdx = stepIndex + 1; nextIdx < ctx.stepsData.length; nextIdx++) {
        resolveWorkflowInputs(skillSlug, nextIdx);
    }
}

function switchWfTab(sid, tabName) {
    var rightPanel = document.getElementById('wf-right-' + sid);
    if (!rightPanel) return;

    // Update tab buttons
    var tabButtons = rightPanel.querySelectorAll('.wf-tab-btn');
    tabButtons.forEach(function(btn) {
        btn.classList.remove('active');
    });

    var activeButton = rightPanel.querySelector('.wf-tab-btn[onclick*="' + tabName + '"]');
    if (activeButton) activeButton.classList.add('active');

    // Update tab panels
    var tabPanels = rightPanel.querySelectorAll('.wf-tab-panel');
    tabPanels.forEach(function(panel) {
        panel.classList.remove('active');
    });

    var activePanel = document.getElementById('wf-tab-' + tabName + '-' + sid);
    if (activePanel) activePanel.classList.add('active');
}

// --- Helpers ---

function escapeHtml(str) {
    var div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

function tryParseJson(str) {
    try { return JSON.parse(str); } catch (e) { return str; }
}

function highlightJson(json) {
    // Simple JSON syntax highlighting
    if (typeof json !== 'string') {
        json = JSON.stringify(json, null, 2);
    }

    // Replace special characters
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

    // Highlight patterns
    return json
        .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, function(match) {
            var cls = 'json-key';
            if (match.charAt(match.length - 1) !== ':') {
                cls = 'json-string';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        })
        .replace(/\b(true|false|null)\b/g, '<span class="json-boolean">$1</span>')
        .replace(/\b(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)\b/g, '<span class="json-number">$1</span>');
}

function setNestedValue(obj, path, value) {
    // Parse path that can contain dots and array indices
    // e.g., "configurationData.rateLimits[0].maximumRequests"
    var tokens = [];
    var current = '';

    for (var i = 0; i < path.length; i++) {
        var char = path[i];
        if (char === '.') {
            if (current) tokens.push({type: 'key', value: current});
            current = '';
        } else if (char === '[') {
            if (current) tokens.push({type: 'key', value: current});
            current = '';
            var endIndex = path.indexOf(']', i);
            if (endIndex > i) {
                tokens.push({type: 'index', value: parseInt(path.substring(i + 1, endIndex), 10)});
                i = endIndex;
            }
        } else if (char !== ']') {
            current += char;
        }
    }
    if (current) tokens.push({type: 'key', value: current});

    // Navigate/create the nested structure
    var target = obj;
    for (var j = 0; j < tokens.length - 1; j++) {
        var token = tokens[j];
        var nextToken = tokens[j + 1];

        if (token.type === 'key') {
            if (!target[token.value]) {
                target[token.value] = (nextToken.type === 'index') ? [] : {};
            }
            target = target[token.value];
        } else if (token.type === 'index') {
            while (target.length <= token.value) {
                target.push(null);
            }
            if (!target[token.value]) {
                target[token.value] = (nextToken.type === 'index') ? [] : {};
            }
            target = target[token.value];
        }
    }

    // Set the final value
    var lastToken = tokens[tokens.length - 1];
    if (lastToken.type === 'key') {
        target[lastToken.value] = tryParseJson(value);
    } else if (lastToken.type === 'index') {
        while (target.length <= lastToken.value) {
            target.push(null);
        }
        target[lastToken.value] = tryParseJson(value);
    }
}

// ============================================================================
// Tooltip system for [data-tooltip] elements
// ============================================================================

(function initTooltips() {
    var tip = null;

    function renderInlineMarkdown(text) {
        if (!text) return '';
        // Escape HTML first
        var safe = text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        // Render inline markdown: **bold**, *italic*, `code`
        safe = safe
            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.+?)\*/g, '<em>$1</em>')
            .replace(/`([^`]+)`/g, '<code>$1</code>');
        // Convert newlines to <br>
        safe = safe.replace(/\n/g, '<br>');
        return safe;
    }

    function createTip() {
        var el = document.createElement('div');
        el.id = 'portal-tooltip';
        el.setAttribute('role', 'tooltip');
        el.style.cssText = [
            'position:fixed',
            'z-index:9999',
            'pointer-events:none',
            'opacity:0',
            'transition:opacity 0.15s ease',
            'max-width:300px',
            'padding:7px 11px',
            'border-radius:5px',
            'font-size:12px',
            'line-height:1.5',
            'word-break:break-word',
            'box-shadow:0 2px 10px rgba(0,0,0,0.28)',
        ].join(';');
        document.body.appendChild(el);
        return el;
    }

    function positionTip(anchorRect) {
        if (!tip) return;
        var MARGIN = 8;
        var vw = window.innerWidth;
        var vh = window.innerHeight;
        var tw = tip.offsetWidth;
        var th = tip.offsetHeight;

        // Prefer above; fall back to below if not enough room
        var top = anchorRect.top - th - MARGIN;
        if (top < MARGIN) {
            top = anchorRect.bottom + MARGIN;
        }
        // Horizontally center on anchor, then clamp to viewport
        var left = anchorRect.left + anchorRect.width / 2 - tw / 2;
        left = Math.max(MARGIN, Math.min(left, vw - tw - MARGIN));

        tip.style.top = Math.round(top) + 'px';
        tip.style.left = Math.round(left) + 'px';
    }

    function showTip(el) {
        var text = el.getAttribute('data-tooltip');
        if (!text) return;
        if (!tip) tip = createTip();
        // Apply theme colors at show-time (CSS vars resolved then)
        var cs = getComputedStyle(document.documentElement);
        var bg = cs.getPropertyValue('--lume-color-neutral-10').trim() || '#1a1a2e';
        var fg = cs.getPropertyValue('--lume-color-neutral-1').trim() || '#fff';
        tip.style.background = bg;
        tip.style.color = fg;
        tip.innerHTML = renderInlineMarkdown(text);
        tip.style.opacity = '0';
        tip.style.display = 'block';
        // Position after paint so offsetWidth/Height are available
        requestAnimationFrame(function() {
            positionTip(el.getBoundingClientRect());
            tip.style.opacity = '1';
        });
    }

    function hideTip() {
        if (tip) {
            tip.style.opacity = '0';
        }
    }

    // Use event delegation on document so dynamically added icons work too
    document.addEventListener('mouseover', function(e) {
        var target = e.target.closest('[data-tooltip]');
        if (target) showTip(target);
    });
    document.addEventListener('mouseout', function(e) {
        var target = e.target.closest('[data-tooltip]');
        if (target) hideTip();
    });
    document.addEventListener('scroll', hideTip, true);
})();

// ============================================================================
// Auto-initialize all workflows on page load
// ============================================================================

(function autoInitWorkflows() {
    // Find all skill step containers and collect unique skill slugs
    var containers = document.querySelectorAll('.workflow-try-container');
    var slugs = {};
    containers.forEach(function(el) {
        var id = el.id || '';
        // id format: wf-try-<slug>-<stepIndex>
        var match = id.match(/^wf-try-(.+)-(\d+)$/);
        if (match) {
            slugs[match[1]] = true;
        }
    });

    var slugList = Object.keys(slugs);
    if (slugList.length === 0) return;

    slugList.forEach(function(slug) {
        initWorkflowContext(slug);
        renderWorkflowStepForms(slug);
        var ctx = workflowContexts[slug];
        if (ctx) {
            for (var i = 0; i < (ctx.stepsData || []).length; i++) {
                resolveWorkflowInputs(slug, i);
            }
        }
    });
})();

// Close send dropdown when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('.btn-group-send')) {
        document.querySelectorAll('.send-dropdown-menu').forEach(function(dropdown) {
            dropdown.style.display = 'none';
        });
    }
});

// Initialize line numbers for request editors
function updateLineNumbers(textarea) {
    var lineNumbersDiv = textarea.parentElement.querySelector('.request-line-numbers');
    if (!lineNumbersDiv) return;

    var lines = textarea.value.split('\n').length;
    var lineNumbersHtml = '';
    for (var i = 1; i <= lines; i++) {
        lineNumbersHtml += i + '\n';
    }
    lineNumbersDiv.textContent = lineNumbersHtml;
}

// Sync scrolling between textarea and line numbers
function syncScroll(textarea) {
    var lineNumbersDiv = textarea.parentElement.querySelector('.request-line-numbers');
    if (lineNumbersDiv) {
        lineNumbersDiv.scrollTop = textarea.scrollTop;
    }
}

// Map content types to language classes for syntax highlighting
function getLanguageFromContentType(contentType) {
    if (!contentType) return 'json';

    var lower = contentType.toLowerCase();
    if (lower.includes('json')) return 'json';
    if (lower.includes('xml')) return 'xml';
    if (lower.includes('yaml') || lower.includes('yml')) return 'yaml';
    if (lower.includes('html')) return 'html';
    if (lower.includes('javascript')) return 'javascript';
    if (lower.includes('text/plain')) return 'none';

    // Default to JSON
    return 'json';
}

// Initialize all request editors with line numbers
document.addEventListener('DOMContentLoaded', function() {
    var requestEditors = document.querySelectorAll('.try-request-editor');
    requestEditors.forEach(function(textarea) {
        // Initial line numbers
        updateLineNumbers(textarea);

        // Get content type and add language class
        var contentType = textarea.getAttribute('data-content-type');
        var language = getLanguageFromContentType(contentType);
        textarea.classList.add('language-' + language);

        // Update line numbers on input
        textarea.addEventListener('input', function() {
            updateLineNumbers(textarea);
        });

        // Sync scroll
        textarea.addEventListener('scroll', function() {
            syncScroll(textarea);
        });
    });

    // Highlight curl commands in documentation
    highlightCurlCommands();
});

// Function to add syntax highlighting to curl commands
function highlightCurlCommands() {
    var codeBlocks = document.querySelectorAll('.skill-view-markdown pre code');
    codeBlocks.forEach(function(codeBlock) {
        var text = codeBlock.textContent;

        // Check if it contains curl command
        if (text.includes('curl')) {
            var highlighted = text
                // Highlight curl command
                .replace(/(^|\s)(curl)(\s)/g, '$1<span style="color:#c586c0">$2</span>$3')
                // Highlight flags (-X, -H, etc.)
                .replace(/(\s)(-[A-Za-z]+)(\s)/g, '$1<span style="color:#9cdcfe">$2</span>$3')
                // Highlight URLs (https://...)
                .replace(/(https?:\/\/[^\s"']+)/g, '<span style="color:#ce9178">$1</span>')
                // Highlight strings in quotes
                .replace(/("[^"]*")/g, '<span style="color:#ce9178">$1</span>')
                .replace(/('[^']*')/g, '<span style="color:#ce9178">$1</span>');

            codeBlock.innerHTML = highlighted;
        }
    });
}
// ============================================================================
// Execution Panel - Tab Switching and Evaluation
// ============================================================================

function switchExecutionTab(slug, tab) {
    // Switch tab active state
    var tabs = document.querySelectorAll('.execution-tab');
    tabs.forEach(function(t) {
        var isActive = t.getAttribute('data-tab') === tab;
        t.classList.toggle('active', isActive);
        t.setAttribute('aria-selected', isActive ? 'true' : 'false');
    });
    
    // Switch content visibility
    var variablesSection = document.getElementById('execution-variables-' + slug);
    var evaluationSection = document.getElementById('execution-evaluation-' + slug);
    
    if (tab === 'variables') {
        if (variablesSection) variablesSection.style.display = 'block';
        if (evaluationSection) evaluationSection.style.display = 'none';
    } else if (tab === 'evaluation') {
        if (variablesSection) variablesSection.style.display = 'none';
        if (evaluationSection) evaluationSection.style.display = 'block';
    }
}

function evaluateExpression(slug) {
    var input = document.getElementById('evaluation-input-' + slug);
    var resultContainer = document.getElementById('evaluation-result-' + slug);

    if (!input || !resultContainer) {
        console.error('Evaluation elements not found');
        return;
    }

    var expression = input.value.trim();
    if (!expression) {
        // Remove any existing ACE editor and show placeholder
        if (resultContainer.env && resultContainer.env.editor) {
            resultContainer.env.editor.destroy();
            resultContainer.env = null;
        }
        resultContainer.innerHTML = '<div class="evaluation-placeholder">Please enter a JSONPath expression</div>';
        resultContainer.classList.remove('evaluation-success', 'evaluation-error');
        return;
    }

    try {
        // Get the last response from the most recent step execution
        var lastResponse = window.lastStepResponse || null;


        if (!lastResponse) {
            // Remove any existing ACE editor and show placeholder
            if (resultContainer.env && resultContainer.env.editor) {
                resultContainer.env.editor.destroy();
                resultContainer.env = null;
            }
            resultContainer.innerHTML = '<div class="evaluation-placeholder">No response data available. Please execute a step first.</div>';
            resultContainer.classList.remove('evaluation-success', 'evaluation-error');
            return;
        }

        // Evaluate JSONPath expression
        var result = evaluateJsonPath(lastResponse, expression);

        if (result === undefined || result === null) {
            // Remove any existing ACE editor and show placeholder
            if (resultContainer.env && resultContainer.env.editor) {
                resultContainer.env.editor.destroy();
                resultContainer.env = null;
            }
            resultContainer.innerHTML = '<div class="evaluation-placeholder">No matches found for: ' + expression + '</div>';
            resultContainer.classList.remove('evaluation-success', 'evaluation-error');
        } else {
            // Remove placeholder if it exists
            var placeholder = resultContainer.querySelector('.evaluation-placeholder');
            if (placeholder) {
                placeholder.remove();
            }

            // Pretty print the result
            var formatted = JSON.stringify(result, null, 2);

            // Create or reuse ACE editor for the result
            createReadOnlyAceEditor(resultContainer, formatted, 'json');

            // Add success styling to the container
            resultContainer.classList.remove('evaluation-error');
            resultContainer.classList.add('evaluation-success');
        }
    } catch (e) {
        // Remove placeholder if it exists
        var placeholder = resultContainer.querySelector('.evaluation-placeholder');
        if (placeholder) {
            placeholder.remove();
        }

        var errorMsg = 'Error: ' + e.message + '\n\nExpression: ' + expression;
        createReadOnlyAceEditor(resultContainer, errorMsg, 'text');

        resultContainer.classList.remove('evaluation-success');
        resultContainer.classList.add('evaluation-error');
    }
}

// Simple JSONPath evaluator (supports basic queries)
function evaluateJsonPath(data, path) {
    if (!path || !path.startsWith('$')) {
        throw new Error('JSONPath must start with $');
    }
    
    // Remove the leading $
    path = path.substring(1);
    
    // If path is just $, return entire object
    if (!path || path === '') {
        return data;
    }
    
    // Remove leading dot
    if (path.startsWith('.')) {
        path = path.substring(1);
    }
    
    var current = data;
    var parts = path.split('.');
    
    for (var i = 0; i < parts.length; i++) {
        var part = parts[i];
        
        if (!part) continue;
        
        // Handle array wildcard: field[*]
        if (part.includes('[*]')) {
            var field = part.replace('[*]', '');
            if (field && current[field]) {
                current = current[field];
            }
            
            if (!Array.isArray(current)) {
                throw new Error('Cannot use [*] on non-array');
            }
            
            // Collect remaining path
            var remainingPath = parts.slice(i + 1).join('.');
            if (remainingPath) {
                return current.map(function(item) {
                    return evaluateJsonPath(item, '$.' + remainingPath);
                });
            }
            return current;
        }
        
        // Handle array index: field[0]
        var arrayMatch = part.match(/^([^\[]+)\[(\d+)\]$/);
        if (arrayMatch) {
            var field = arrayMatch[1];
            var index = parseInt(arrayMatch[2], 10);
            
            if (field && current[field]) {
                current = current[field];
            }
            
            if (!Array.isArray(current)) {
                throw new Error('Cannot use [index] on non-array');
            }
            
            current = current[index];
        } else {
            // Simple field access
            if (current === null || current === undefined) {
                return undefined;
            }
            current = current[part];
        }
        
        if (current === undefined) {
            return undefined;
        }
    }
    
    return current;
}

// Store last response for evaluation
window.lastStepResponse = null;

// ============================================================================
// Collapsible Description Functionality
// ============================================================================

function toggleParamDescription(button) {
    var paramItem = button.closest('.param-item');
    var wrapper = paramItem.querySelector('.param-description-wrapper');

    if (!wrapper) return;

    if (wrapper.classList.contains('collapsed')) {
        wrapper.classList.remove('collapsed');
        paramItem.classList.add('expanded');
    } else {
        wrapper.classList.add('collapsed');
        paramItem.classList.remove('expanded');
    }
}

// ============================================================================
// Sort Modal Functionality
// ============================================================================

function getSortDisplayLabel(sortBy, filterType) {
    if (sortBy === 'count') {
        var countLabels = { api: 'Endpoints', mcp: 'Tools', skill: 'Steps', terraform: 'Docs' };
        return countLabels[filterType] || 'Count';
    }
    return sortBy === 'name' ? 'Name' : 'Type';
}

(function() {
    const sortBtn = document.querySelector('.sort-btn');
    const sortModal = document.getElementById('sortModal');
    const applySortBtn = document.getElementById('applySortBtn');
    const sortBySelect = document.getElementById('sortBy');
    const sortDirectionSelect = document.getElementById('sortDirection');
    const catalogGrid = document.getElementById('catalogGrid');

    if (!sortBtn || !sortModal) return;

    // Open modal
    sortBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        sortModal.style.display = 'block';
    });

    // Close modal when clicking outside
    document.addEventListener('click', function(e) {
        if (sortModal.style.display === 'block' && !sortModal.contains(e.target) && e.target !== sortBtn) {
            sortModal.style.display = 'none';
        }
    });

    // Apply sort
    applySortBtn.addEventListener('click', function() {
        const sortBy = sortBySelect.value;
        const direction = sortDirectionSelect.value;

        sortCatalog(sortBy, direction);
        updateSortIndicator(sortBy);
        sortModal.style.display = 'none';
    });

    function getActiveFilterType() {
        var activeTab = document.querySelector('.hero-tab.active');
        return activeTab ? activeTab.dataset.filter : 'all';
    }

    function updateSortIndicator(sortBy) {
        var indicator = document.getElementById('sortIndicator');
        var label = document.getElementById('sortLabel');
        if (!indicator || !label) return;

        var filterType = getActiveFilterType();
        label.textContent = getSortDisplayLabel(sortBy, filterType);
        indicator.style.display = 'inline';
    }

    function resetSort() {
        var indicator = document.getElementById('sortIndicator');
        if (indicator) indicator.style.display = 'none';
        sortBySelect.value = 'name';
        sortDirectionSelect.value = 'asc';
    }


    // Listen for filter changes (hero tab clicks)
    document.querySelectorAll('.hero-tab').forEach(function(tab) {
        tab.addEventListener('click', function() {
            resetSort();
            var filterType = tab.dataset.filter || 'all';
            var typeOption = sortBySelect.querySelector('option[value="type"]');
            if (typeOption) {
                typeOption.disabled = filterType !== 'all';
            }
        });
    });

    function sortCatalog(sortBy, direction) {
        const cards = Array.from(catalogGrid.children);

        cards.sort(function(a, b) {
            let aValue, bValue;

            if (sortBy === 'name') {
                aValue = a.getAttribute('data-name') || '';
                bValue = b.getAttribute('data-name') || '';
                return direction === 'asc'
                    ? aValue.localeCompare(bValue)
                    : bValue.localeCompare(aValue);
            } else if (sortBy === 'type') {
                aValue = a.getAttribute('data-type') || '';
                bValue = b.getAttribute('data-type') || '';
                // Sort by type, then by name as secondary sort
                const typeCompare = direction === 'asc'
                    ? aValue.localeCompare(bValue)
                    : bValue.localeCompare(aValue);

                if (typeCompare !== 0) {
                    return typeCompare;
                }

                // Secondary sort by name
                const aName = a.getAttribute('data-name') || '';
                const bName = b.getAttribute('data-name') || '';
                return aName.localeCompare(bName);
            } else if (sortBy === 'count') {
                const aCard = a.querySelector('.badge-count');
                const bCard = b.querySelector('.badge-count');

                aValue = 0;
                bValue = 0;

                if (aCard && aCard.textContent) {
                    const match = aCard.textContent.match(/\d+/);
                    aValue = match ? parseInt(match[0]) : 0;
                }

                if (bCard && bCard.textContent) {
                    const match = bCard.textContent.match(/\d+/);
                    bValue = match ? parseInt(match[0]) : 0;
                }

                return direction === 'asc'
                    ? aValue - bValue
                    : bValue - aValue;
            }

            return 0;
        });

        // Re-append sorted cards
        cards.forEach(function(card) {
            catalogGrid.appendChild(card);
        });
    }
})();

// ============================================================================
// Manual Variable Management
// ============================================================================

function addManualVariable(slug) {
    var table = document.getElementById('variables-table-' + slug);
    if (!table) return;

    var tbody = table.querySelector('tbody');

    // Remove "no variables" row if present
    var noVarsRow = tbody.querySelector('.no-variables-row');
    if (noVarsRow) {
        noVarsRow.remove();
    }

    // Create new row for manual input
    var row = document.createElement('tr');
    row.className = 'variable-row manual-variable-row';

    row.innerHTML = '<td><input type="text" class="manual-var-name" placeholder="variableName" /></td>' +
                    '<td><input type="text" class="manual-var-value" placeholder="value" /></td>' +
                    '<td><span class="var-source">User Input</span></td>' +
                    '<td><button class="btn-delete-variable" onclick="deleteVariable(this, \'' + slug + '\')" title="Delete variable">' +
                    '<img src="assets/icons/x-mark.svg" width="14" height="14" alt="Delete" style="vertical-align: top;">' +
                    '</button></td>';

    tbody.appendChild(row);

    // Focus on name input
    var nameInput = row.querySelector('.manual-var-name');
    nameInput.focus();

    // Add event listeners to save variable on blur or enter
    var saveVariable = function() {
        var name = row.querySelector('.manual-var-name').value.trim();
        var value = row.querySelector('.manual-var-value').value.trim();

        if (name && value) {
            // Initialize skillVariables if needed
            if (!skillVariables[slug]) {
                skillVariables[slug] = {};
            }

            // Store the variable
            skillVariables[slug][name] = value;

            // Convert inputs to display mode
            row.querySelector('td:first-child').innerHTML = '<code class="var-name">' + escapeHtml(name) + '</code>';
            var valueCell = row.querySelector('td:nth-child(2)');
            valueCell.innerHTML = '<code class="var-value">' + escapeHtml(value) + '</code>';
            // Add tooltip if value is long
            if (value.length > 30) {
                valueCell.setAttribute('title', value);
            }
            row.classList.remove('manual-variable-row');

            // Update variable tooltips
            updateVariableTooltips(slug);

        } else if (!name && !value) {
            // Remove empty row
            row.remove();

            // Check if we need to add back "no variables" row
            if (tbody.querySelectorAll('.variable-row').length === 0) {
                tbody.innerHTML = '<tr class="no-variables-row"><td colspan="4" style="text-align:center; color:#9ca3af; padding:2rem 0.5rem;">No variables yet</td></tr>';
            }
        }
    };

    nameInput.addEventListener('blur', saveVariable);
    row.querySelector('.manual-var-value').addEventListener('blur', saveVariable);

    nameInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            row.querySelector('.manual-var-value').focus();
        }
    });

    row.querySelector('.manual-var-value').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            saveVariable();
        }
    });
}

function deleteVariable(button, slug) {
    var row = button.closest('tr');
    var nameCell = row.querySelector('.var-name');

    if (nameCell) {
        var varName = nameCell.textContent;

        // Remove from skillVariables
        if (skillVariables[slug] && skillVariables[slug][varName]) {
            delete skillVariables[slug][varName];
        }

        // Update variable tooltips
        updateVariableTooltips(slug);
    }

    // Remove the row
    row.remove();

    // Check if we need to add back "no variables" row
    var table = document.getElementById('variables-table-' + slug);
    var tbody = table.querySelector('tbody');
    if (tbody.querySelectorAll('.variable-row').length === 0) {
        tbody.innerHTML = '<tr class="no-variables-row"><td colspan="4" style="text-align:center; color:#9ca3af; padding:2rem 0.5rem;">No variables yet</td></tr>';
    }
}

function clearAllVariables(slug) {
    if (!confirm('Are you sure you want to clear all variables?')) {
        return;
    }

    // Clear from skillVariables
    skillVariables[slug] = {};

    // Clear from array variables if exists
    if (window.skillArrayVariables && window.skillArrayVariables[slug]) {
        window.skillArrayVariables[slug] = {};
    }

    // Clear the table
    var table = document.getElementById('variables-table-' + slug);
    if (table) {
        var tbody = table.querySelector('tbody');
        tbody.innerHTML = '<tr class="no-variables-row"><td colspan="4" style="text-align:center; color:#9ca3af; padding:2rem 0.5rem;">No variables yet</td></tr>';
    }

    // Update variable tooltips
    updateVariableTooltips(slug);

}

// ============================================================================
// Dark Mode Toggle
// ============================================================================

(function initDarkMode() {
    // Restore saved theme immediately to prevent flash
    var savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'dark');
    } else if (savedTheme === 'light') {
        document.documentElement.setAttribute('data-theme', 'light');
    }
    // Create and inject dark mode toggle button
    var toggleButton = document.createElement('button');
    toggleButton.id = 'dark-mode-toggle';
    toggleButton.className = 'dark-mode-toggle';
    toggleButton.setAttribute('aria-label', 'Toggle dark mode');
    toggleButton.innerHTML = '<svg class="theme-icon theme-icon-dark" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" fill="currentColor"/></svg><svg class="theme-icon theme-icon-light" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill="currentColor"/></svg>';

    // Add toggle button to page after DOM is ready
    function addToggleButton() {
        // Try to add to header if it exists, otherwise add to body
        var header = document.querySelector('.ms-com-content-header') || document.querySelector('header');
        if (header) {
            header.appendChild(toggleButton);
        } else {
            document.body.appendChild(toggleButton);
        }

        // Add click handler
        toggleButton.addEventListener('click', toggleDarkMode);

        // Update button state
        updateToggleButton();
    }

    function toggleDarkMode() {
        var currentTheme = document.documentElement.getAttribute('data-theme');
        var newTheme = currentTheme === 'dark' ? 'light' : 'dark';

        document.documentElement.setAttribute('data-theme', newTheme);

        localStorage.setItem('theme', newTheme);
        updateToggleButton();
        updateAllAceEditors();
    }

    function updateToggleButton() {
        var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
        toggleButton.setAttribute('aria-pressed', isDark);
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', addToggleButton);
    } else {
        addToggleButton();
    }

    // Listen for system theme changes
    if (window.matchMedia) {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            // Only auto-switch if user hasn't manually set a preference
            if (!localStorage.getItem('theme')) {
                document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
                updateToggleButton();
                updateAllAceEditors();
            }
        });
    }
})();


// Terraform sidebar navigation
function filterTerraformSidebar(query) {
    var lowerQuery = query.toLowerCase();
    var clearBtn = document.querySelector('.btn-clear-sidebar-search');
    if (clearBtn) clearBtn.style.display = query ? 'block' : 'none';

    // Filter individual doc links (deepest level, tree-level-1 group items)
    document.querySelectorAll('.terraform-page .nav-group.tree-level-1 .nav-group-items > li').forEach(function(li) {
        var link = li.querySelector('.nav-link');
        if (!link) return;
        var titleEl = link.querySelector('.op-name');
        var text = (titleEl || link).textContent.toLowerCase();
        var matches = !query || text.includes(lowerQuery);
        li.style.display = matches ? '' : 'none';
        if (titleEl) {
            if (!titleEl.hasAttribute('data-original-text')) {
                titleEl.setAttribute('data-original-text', titleEl.textContent);
            }
            var originalText = titleEl.getAttribute('data-original-text');
            titleEl.innerHTML = (query && matches) ? highlightText(originalText, query) : originalText;
        }
    });

    // Show/hide subcategories (tree-level-1) based on visible doc items
    document.querySelectorAll('.terraform-page .nav-group.tree-level-1').forEach(function(subcat) {
        var docList = subcat.querySelector(':scope > .nav-group-items');
        var hasVisible = false;
        var visibleCount = 0;
        if (docList) {
            var items = docList.querySelectorAll(':scope > li');
            for (var i = 0; i < items.length; i++) {
                if (items[i].style.display !== 'none') { hasVisible = true; visibleCount++; }
            }
        }
        subcat.style.display = (!query || hasVisible) ? '' : 'none';

        var header = subcat.querySelector(':scope > .nav-group-header');
        if (header) _setTerraformGroupExpanded(header, query && hasVisible);

        var countEl = subcat.querySelector(':scope > .nav-group-header .group-count');
        if (countEl) {
            if (!countEl.hasAttribute('data-total-count')) {
                countEl.setAttribute('data-total-count', countEl.textContent);
            }
            countEl.textContent = query ? '(' + visibleCount + ')' : countEl.getAttribute('data-total-count');
        }
    });

    // Show/hide top-level categories (tree-level-0) based on visible subcategories
    var anyCategoryVisible = false;
    document.querySelectorAll('.terraform-page .nav-group.tree-level-0').forEach(function(cat) {
        var subcatList = cat.querySelector(':scope > .nav-group-items');
        var hasVisible = false;
        var visibleDocCount = 0;
        if (subcatList) {
            var subcats = subcatList.querySelectorAll(':scope > .nav-group');
            for (var i = 0; i < subcats.length; i++) {
                if (subcats[i].style.display !== 'none') { hasVisible = true; }
            }
            // Count actual visible docs (leaf items) across all subcategories
            var leafItems = subcatList.querySelectorAll('.nav-group.tree-level-1 .nav-group-items > li');
            for (var j = 0; j < leafItems.length; j++) {
                if (leafItems[j].style.display !== 'none') visibleDocCount++;
            }
        }
        cat.style.display = (!query || hasVisible) ? '' : 'none';
        if (!query || hasVisible) anyCategoryVisible = true;

        var header = cat.querySelector(':scope > .nav-group-header');
        if (header) _setTerraformGroupExpanded(header, query && hasVisible);

        var countEl = cat.querySelector(':scope > .nav-group-header .group-count');
        if (countEl) {
            if (!countEl.hasAttribute('data-total-count')) {
                countEl.setAttribute('data-total-count', countEl.textContent);
            }
            countEl.textContent = query ? '(' + visibleDocCount + ')' : countEl.getAttribute('data-total-count');
        }
    });

    // Toggle empty state when nothing matches
    var emptyState = document.getElementById('sidebarEmptyState');
    var navList = document.querySelector('.terraform-page .sidebar-nav .nav-list');
    if (emptyState) {
        var showEmpty = !!query && !anyCategoryVisible;
        emptyState.style.display = showEmpty ? '' : 'none';
        if (navList) navList.style.display = showEmpty ? 'none' : '';
    }
}

function _setTerraformGroupExpanded(header, expanded) {
    header.setAttribute('aria-expanded', expanded ? 'true' : 'false');
    var controlsId = header.getAttribute('aria-controls');
    var group = controlsId ? document.getElementById(controlsId) : header.nextElementSibling;
    if (group) group.style.display = expanded ? 'block' : 'none';
    var toggle = header.querySelector('.group-toggle');
    if (toggle) toggle.classList.toggle('expanded', !!expanded);
}

function clearTerraformSidebarSearch() {
    var input = document.getElementById('sidebarSearch');
    if (input) { input.value = ''; filterTerraformSidebar(''); }
}

function wrapTerraformCodeBlocks() {
    wrapCodeBlocksWithCopyHeader('.terraform-view-markdown pre');
}

function wrapSkillCodeBlocks() {
    wrapCodeBlocksWithCopyHeader('.step-prose pre');
    wrapCodeBlocksWithCopyHeader('.skill-view-markdown pre');
    wrapCodeBlocksWithCopyHeader('.skill-prose-content pre');
}

function wrapMcpCodeBlocks() {
    // MCP config blocks already have their own copy button inside `.mcp-config-block`,
    // so only the install pre gets the unified wrapper.
    wrapCodeBlocksWithCopyHeader('pre.mcp-install-command');
}

function wrapCodeBlocksWithCopyHeader(selector) {
    document.querySelectorAll(selector).forEach(function(pre) {
        if (pre.parentElement.classList.contains('code-block-wrapper')) return;
        if (pre.querySelector('code.language-mermaid')) return;
        var wrapper = document.createElement('div');
        wrapper.className = 'code-block-wrapper';
        var header = document.createElement('div');
        header.className = 'code-block-header';
        var btn = document.createElement('button');
        btn.className = 'code-block-copy-btn';
        btn.onclick = function() { copyTerraformCode(btn); };
        btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
        header.appendChild(btn);
        pre.parentNode.insertBefore(wrapper, pre);
        wrapper.appendChild(header);
        wrapper.appendChild(pre);
    });
}

function copyTerraformCode(button) {
    var wrapper = button.closest('.code-block-wrapper');
    if (!wrapper) return;
    var code = wrapper.querySelector('pre code') || wrapper.querySelector('pre');
    var text = code.textContent || code.innerText;
    navigator.clipboard.writeText(text).then(function() {
        var originalHTML = button.innerHTML;
        button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
        button.style.color = '#04844B';
        setTimeout(function() {
            button.innerHTML = originalHTML;
            button.style.color = '';
        }, 1500);
    });
}

function openTerraformProviderModal() {
    var modal = document.getElementById('terraform-install-modal');
    if (modal) modal.style.display = 'flex';
}

function closeTerraformProviderModal() {
    var modal = document.getElementById('terraform-install-modal');
    if (modal) modal.style.display = 'none';
}

function copyTerraformInstallSnippetFromDropdown(buttonEl) {
    var codeEl = document.getElementById('terraform-install-snippet-code');
    if (!codeEl) return;
    var text = codeEl.textContent || codeEl.innerText;
    navigator.clipboard.writeText(text).then(function() {
        _showSkillCopiedFeedback(buttonEl);
    }).catch(function(err) {
        console.error('Failed to copy snippet:', err);
    });
    _closeAllSkillDropdowns();
}

// MCP IDE Config Modal
function openMcpIdeModal() {
    var modal = document.getElementById('mcp-ide-modal');
    if (modal) modal.style.display = 'flex';
    _closeAllSkillDropdowns();
}

function closeMcpIdeModal() {
    var modal = document.getElementById('mcp-ide-modal');
    if (modal) modal.style.display = 'none';
}

function switchMcpIdeTab(tabKey) {
    document.querySelectorAll('.mcp-ide-tab').forEach(function(tab) {
        tab.classList.remove('active');
        tab.setAttribute('aria-selected', 'false');
    });
    document.querySelectorAll('.mcp-ide-panel').forEach(function(panel) {
        panel.classList.remove('active');
        panel.style.display = 'none';
    });
    var tab = document.querySelector('.mcp-ide-tab[data-ide-tab="' + tabKey + '"]');
    if (tab) {
        tab.classList.add('active');
        tab.setAttribute('aria-selected', 'true');
    }
    var panel = document.getElementById('mcp-ide-panel-' + tabKey);
    if (panel) {
        panel.classList.add('active');
        panel.style.display = 'block';
        if (window.Prism) {
            panel.querySelectorAll('code').forEach(function(code) { Prism.highlightElement(code); });
        }
    }
}

function onMcpServerChange() {
    var servers = window.__MCP_IDE_SERVERS__;
    var slug = window.__MCP_IDE_SLUG__;
    if (!servers || !slug) return;
    var select = document.getElementById('mcp-server-select');
    if (!select) return;
    var srv = servers[parseInt(select.value, 10)];
    if (!srv) return;

    var configs = {
        claude_code: { mcpServers: {} },
        cursor: { mcpServers: {} },
        vscode: { mcp: { servers: {} } }
    };
    configs.claude_code.mcpServers[slug] = { type: srv.ide_type, url: srv.url };
    configs.cursor.mcpServers[slug] = { type: srv.ide_type, url: srv.url };
    configs.vscode.mcp.servers[slug] = { type: srv.vscode_type, url: srv.url };

    ['claude_code', 'cursor', 'vscode'].forEach(function(key) {
        var codeEl = document.getElementById('mcp-config-' + key);
        if (codeEl) {
            codeEl.textContent = JSON.stringify(configs[key], null, 2);
            if (window.Prism) Prism.highlightElement(codeEl);
        }
    });
}

function copyMcpIdeConfig(tabKey) {
    var codeEl = document.getElementById('mcp-config-' + tabKey);
    if (!codeEl) return;
    var text = codeEl.textContent || codeEl.innerText;
    var btn = codeEl.closest('.mcp-config-block').querySelector('.btn-copy-config');
    navigator.clipboard.writeText(text).then(function() {
        if (btn) {
            var origHTML = btn.innerHTML;
            btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#04844B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
            btn.style.color = '#04844B';
            setTimeout(function() { btn.innerHTML = origHTML; btn.style.color = ''; }, 1500);
        }
    });
}

function copyMcpInstallCommand(buttonEl) {
    var codeEl = document.getElementById('mcp-ide-install-cmd');
    if (!codeEl) return;
    navigator.clipboard.writeText(codeEl.textContent).then(function() {
        _showSkillCopiedFeedback(buttonEl);
    });
    _closeAllSkillDropdowns();
}

function copyToClipboard(text, buttonEl) {
    navigator.clipboard.writeText(text).then(function() {
        var originalHTML = buttonEl.innerHTML;
        buttonEl.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
        buttonEl.style.color = '#04844B';
        setTimeout(function() {
            buttonEl.innerHTML = originalHTML;
            buttonEl.style.color = '';
        }, 1500);
    });
}


function downloadSkillZip(skillRelPath, slug) {
    var basePath = '../skills/' + skillRelPath + '/';
    fetch(basePath + 'manifest.json')
        .then(function(r) { return r.json(); })
        .then(function(manifest) {
            var zip = new JSZip();
            var fetches = manifest.files.map(function(file) {
                return fetch(basePath + file)
                    .then(function(r) { return r.blob(); })
                    .then(function(blob) { zip.file(file, blob); });
            });
            return Promise.all(fetches).then(function() { return zip; });
        })
        .then(function(zip) {
            return zip.generateAsync({ type: 'blob' });
        })
        .then(function(blob) {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = slug + '.zip';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(a.href);
        })
        .catch(function(err) {
            console.error('Failed to download skill:', err);
            alert('Download failed. Please try again.');
        });
}