`)
+ .replace(/\x1b\[1;37m/g, ``)
+
+ // handle any remaining escape sequences
+ .replace(/\x1b\[[0-9;]*m/g, '');
+
+ // clean up any unclosed spans at the end
+ const openSpans = (result.match(/]*>/g) || []).length;
+ const closeSpans = (result.match(/<\/span>/g) || []).length;
+ if (openSpans > closeSpans) {
+ result += ' '.repeat(openSpans - closeSpans);
+ }
+
+ return result;
+}
+
+// format state file information
+function formatStateFile(stateFile) {
+ if (!stateFile) {
+ return 'No state information available
';
+ }
+
+ const resources = stateFile.resources || [];
+ const outputs = stateFile.outputs || {};
+
+ return `
+
+
+
+ ${resources.length > 0 ? formatResources(resources) : ''}
+
+
+
+ ${resources.map(resource => `
+
+
+
${resource.name || 'unnamed'}
+
+ ${extractProviderName(resource.provider)}
+ Instances: ${resource.instances ? resource.instances.length : 0}
+
+
+ `).join('')}
+
+
No outputs defined
';
+ }
+
+ return `
+
+
+
+ ${Object.entries(outputs).map(([key, value]) => `
+
+
${key}
+
+ ${formatOutputValue(value.value)}
+ ${value.type || 'unknown'}
+
+
+ `).join('')}
+
+
No timing information available
';
+ }
+
+ const startTime = data.start_time ? new Date(data.start_time) : null;
+ const endTime = data.end_time ? new Date(data.end_time) : null;
+
+ return `
+
+
+
+ ${startTime ? `
+
+ Started:
+ ${startTime.toLocaleString()}
+
+ ` : ''}
+ ${endTime ? `
+
+ Completed:
+ ${endTime.toLocaleString()}
+
+ ` : ''}
+ ${data.elapsed_time ? `
+
+ Duration:
+ ${data.elapsed_time.toFixed(3)} seconds
+
+ ` : ''}
+ ${data.return_code !== undefined ? `
+
+ Return Code:
+ ${data.return_code}
+
+ ` : ''}
+
+
+
+ Console Output
+ Stack Trace
+ Performance
+ Environment
+ Raw Data
+
+
+
+ ${formatPythonConsoleOutput(data)}
+
+
+
+ ${formatPythonStackTrace(data)}
+
+
+
+ ${formatPythonPerformance(data)}
+
+
+
+ ${formatPythonEnvironment(data)}
+
+
+
+
${escapeHtml(JSON.stringify(data, null, 2))}
+
+
No console output available
';
+ }
+
+ let html = '';
+
+ if (data.stdout) {
+ const formattedStdout = formatPythonLogOutput(data.stdout);
+ html += `
+
+ `;
+ }
+
+ if (data.stderr) {
+ const formattedStderr = formatPythonLogOutput(data.stderr);
+ html += `
+
+ `;
+ }
+
+ return html;
+}
+
+// format python output with log level detection and syntax highlighting
+function formatPythonLogOutput(text) {
+ if (!text) return '';
+
+ let result = escapeHtml(text);
+
+ // python log level patterns with colors
+ result = result
+ .replace(/\b(CRITICAL|FATAL)(\s*[:\-]|\b)/gi, '$1$2 ')
+ .replace(/\b(ERROR)(\s*[:\-]|\b)/gi, '$1$2 ')
+ .replace(/\b(WARNING|WARN)(\s*[:\-]|\b)/gi, '$1$2 ')
+ .replace(/\b(INFO)(\s*[:\-]|\b)/gi, '$1$2 ')
+ .replace(/\b(DEBUG)(\s*[:\-]|\b)/gi, '$1$2 ')
+
+ // highlight json objects
+ .replace(/(\{[^{}]*\})/g, '$1 ')
+
+ // highlight file paths and line numbers
+ .replace(/(\w+\.py):(\d+)/g, '$1 :$2 ')
+
+ // highlight execution times
+ .replace(/(\d+\.?\d*)\s*(s|ms|seconds?|milliseconds?)\b/gi, '$1$2 ')
+
+ // highlight success indicators
+ .replace(/\b(SUCCESS|PASSED|OK|COMPLETE)\b/gi, '$1 ')
+
+ // highlight failure indicators
+ .replace(/\b(FAILED?|FAILURE|ERROR|EXCEPTION|TRACEBACK)\b/gi, '$1 ');
+
+ return result;
+}
+
+// format python stack trace with file links
+function formatPythonStackTrace(data) {
+ const text = data.stderr || data.stdout || '';
+
+ if (!text.includes('Traceback') && !text.includes('Exception')) {
+ return 'No stack trace information available
';
+ }
+
+ // extract traceback sections
+ const tracebackPattern = /Traceback \(most recent call last\):[\s\S]*?(?=\n\n|\n[A-Z]|\n$|$)/g;
+ const tracebacks = text.match(tracebackPattern) || [];
+
+ if (tracebacks.length === 0) {
+ return 'No stack trace information available
';
+ }
+
+ return `
+
+
+ ${tracebacks.map((trace, index) => `
+
+
Traceback ${index + 1}
+
${formatStackTraceText(trace)}
+
+ `).join('')}
+
$2 ", line $3 ')
+
+ // highlight function names
+ .replace(/in\s+([a-zA-Z_][a-zA-Z0-9_]*)/g, 'in $1 ')
+
+ // highlight exception types
+ .replace(/^([A-Z][a-zA-Z]*Error|[A-Z][a-zA-Z]*Exception):/gm,
+ '$1 :')
+
+ // highlight traceback header
+ .replace(/(Traceback \(most recent call last\):)/, '');
+
+ return result;
+}
+
+// format python performance metrics
+function formatPythonPerformance(data) {
+ const text = (data.stdout || '') + (data.stderr || '');
+
+ // extract timing information
+ const timingPatterns = [
+ /executed in (\d+\.?\d*)\s*(s|ms|seconds?|milliseconds?)/gi,
+ /took (\d+\.?\d*)\s*(s|ms|seconds?|milliseconds?)/gi,
+ /duration[:\s]+(\d+\.?\d*)\s*(s|ms|seconds?|milliseconds?)/gi,
+ /time[:\s]+(\d+\.?\d*)\s*(s|ms|seconds?|milliseconds?)/gi
+ ];
+
+ let timings = [];
+ timingPatterns.forEach(pattern => {
+ let match;
+ while ((match = pattern.exec(text)) !== null) {
+ timings.push({
+ value: parseFloat(match[1]),
+ unit: match[2],
+ context: text.substring(Math.max(0, match.index - 50), match.index + 100)
+ });
+ }
+ });
+
+ if (timings.length === 0 && !data.elapsed_time) {
+ return 'No performance information available
';
+ }
+
+ return `
+
+ `;
+}
+
+// format python environment information
+function formatPythonEnvironment(data) {
+ const text = (data.stdout || '') + (data.stderr || '');
+
+ // extract import statements and module information
+ const imports = extractPythonImports(text);
+ const modules = extractPythonModules(text);
+
+ return `
+
+
+
+ ${data.start_time ? `
+
+
+
+
+ Started:
+ ${new Date(data.start_time).toLocaleString()}
+
+ ${data.end_time ? `
+
+ Completed:
+ ${new Date(data.end_time).toLocaleString()}
+
+ ` : ''}
+
+
+ ` : ''}
+
+ ${imports.length > 0 ? `
+
+
+
+ ${imports.map(imp => `
+ ${imp}
+ `).join('')}
+
+
+ ` : ''}
+
+ ${modules.length > 0 ? `
+
+
+
+ ${modules.map(module => `
+
+ ${module.name}
+ ${module.version ? `${module.version} ` : ''}
+
+ `).join('')}
+
+
+ ` : ''}
+
+
+ Play Summary
+ Task Details
+ Host Results
+ Variables
+ Console Log
+ Raw Data
+
+
+
+ ${formatAnsibleSummary(data)}
+
+
+
+ ${formatAnsibleTasks(data)}
+
+
+
+ ${formatAnsibleHosts(data)}
+
+
+
+ ${formatAnsibleVariables(data)}
+
+
+
+ ${formatAnsibleConsole(data)}
+
+
+
+
${escapeHtml(JSON.stringify(data, null, 2))}
+
+
+
+
+
+
+
+ Total Plays:
+ ${playResults.length}
+
+
+ Hosts:
+ ${Object.keys(hostSummary).length}
+
+
+ Duration:
+ ${data.elapsed_time ? data.elapsed_time.toFixed(2) + 's' : 'N/A'}
+
+
+ Result:
+ ${data.return_code === 0 ? 'SUCCESS' : 'FAILED'}
+
+
+
+
+ ${Object.keys(hostSummary).length > 0 ? `
+
+
+
+ ${Object.entries(hostSummary).map(([host, stats]) => `
+
+
${host}
+
+ ${stats.ok || 0} ok
+ ${stats.changed || 0} changed
+ ${stats.failed || 0} failed
+ ${stats.skipped || 0} skipped
+
+
+ `).join('')}
+
+
+ ` : ''}
+
+ ${playResults.length > 0 ? `
+
+
+
+ ${playResults.map((play, index) => `
+
+
+
+ Tasks: ${play.tasks || 0}
+ Hosts: ${play.hosts || 0}
+
+
+ `).join('')}
+
+
+ ` : ''}
+
No task information available
';
+ }
+
+ return `
+
+
+
+
+ ${tasks.map((task, index) => `
+
+
+
+
+
+
${task.module || 'unknown'}
+ ${task.duration ? `
${task.duration}
` : ''}
+
+ ${task.hosts && task.hosts.length > 0 ? `
+
+ Affected hosts:
+ ${task.hosts.map(host => `${host} `).join('')}
+
+ ` : ''}
+ ${task.changes && task.changes.length > 0 ? `
+
+
+
${escapeHtml(task.changes.join('\n'))}
+
+ ` : ''}
+
+
+ `).join('')}
+
+
No host results available
';
+ }
+
+ return `
+
+
+
+
+ ${Object.entries(hostResults).map(([host, result]) => `
+
+
+
+
+
+ OK:
+ ${result.ok || 0}
+
+
+ Changed:
+ ${result.changed || 0}
+
+
+ Failed:
+ ${result.failed || 0}
+
+
+ Skipped:
+ ${result.skipped || 0}
+
+
+ Unreachable:
+ ${result.unreachable || 0}
+
+
+
+ ${result.tasks && result.tasks.length > 0 ? `
+
+
+
+ ${result.tasks.slice(0, 5).map(task => `
+
+ ${task.name}
+
+ `).join('')}
+ ${result.tasks.length > 5 ? `
+${result.tasks.length - 5} more tasks
` : ''}
+
+
+ ` : ''}
+
+ `).join('')}
+
+
No variable information available
';
+ }
+
+ return `
+
+
+
+
+ ${Object.entries(variables).map(([category, vars]) => `
+
+
${category}
+
+ ${Object.entries(vars).slice(0, 10).map(([key, value]) => `
+
+
${key}
+
+ ${typeof value === 'object' ?
+ `
${escapeHtml(JSON.stringify(value, null, 2))} ` :
+ escapeHtml(String(value))
+ }
+
+
+ `).join('')}
+ ${Object.keys(vars).length > 10 ? `
+${Object.keys(vars).length - 10} more variables
` : ''}
+
+
+ `).join('')}
+
+
No console output available
';
+ }
+
+ let html = '';
+
+ if (data.stdout) {
+ const formattedStdout = formatAnsibleLogOutput(data.stdout);
+ html += `
+
+ `;
+ }
+
+ if (data.stderr) {
+ const formattedStderr = formatAnsibleLogOutput(data.stderr);
+ html += `
+
+ `;
+ }
+
+ return html;
+}
+
+// format ansible log output with color coding
+function formatAnsibleLogOutput(text) {
+ if (!text) return '';
+
+ let result = escapeHtml(text);
+
+ // ansible status patterns with colors
+ result = result
+ .replace(/\b(PLAY RECAP)\b/g, '$1 ')
+ .replace(/\b(TASK|PLAY)\s*\[(.*?)\]/g, '$1 [$2 ]')
+ .replace(/\b(ok|OK)\b/g, '$1 ')
+ .replace(/\b(changed|CHANGED)\b/g, '$1 ')
+ .replace(/\b(failed|FAILED|fatal)\b/g, '$1 ')
+ .replace(/\b(skipping|skipped|SKIPPED)\b/g, '$1 ')
+ .replace(/\b(unreachable|UNREACHABLE)\b/g, '$1 ')
+
+ // highlight ansible host references
+ .replace(/(\w+\.[\w.-]+|\d+\.\d+\.\d+\.\d+)\s*:/g, '$1 :')
+
+ // highlight timing
+ .replace(/(\d+\.?\d*)\s*(s|sec|seconds?)\b/gi, '$1$2 ')
+
+ // highlight json/yaml content
+ .replace(/(\{[^{}]*\})/g, '$1 ')
+ .replace(/(---|\.\.\.|^[\s]*[-\w]+:)/gm, '$1 ');
+
+ return result;
+}
+
+// extraction functions for ansible data
+function extractAnsiblePlayResults(text) {
+ const playPattern = /PLAY \[(.*?)\]/g;
+ let plays = [];
+ let match;
+
+ while ((match = playPattern.exec(text)) !== null) {
+ plays.push({
+ name: match[1],
+ status: text.includes('fatal:') ? 'failed' : 'ok',
+ tasks: 0,
+ hosts: 0
+ });
+ }
+
+ return plays;
+}
+
+function extractAnsibleHostSummary(text) {
+ const recapPattern = /PLAY RECAP[\s\S]*?(?=\n\n|$)/;
+ const match = text.match(recapPattern);
+
+ if (!match) return {};
+
+ const recapText = match[0];
+ const hostPattern = /(\S+)\s+:\s+ok=(\d+)\s+changed=(\d+)(?:\s+unreachable=(\d+))?\s+failed=(\d+)(?:\s+skipped=(\d+))?/g;
+ let hosts = {};
+ let hostMatch;
+
+ while ((hostMatch = hostPattern.exec(recapText)) !== null) {
+ hosts[hostMatch[1]] = {
+ ok: parseInt(hostMatch[2]),
+ changed: parseInt(hostMatch[3]),
+ unreachable: parseInt(hostMatch[4] || 0),
+ failed: parseInt(hostMatch[5]),
+ skipped: parseInt(hostMatch[6] || 0)
+ };
+ }
+
+ return hosts;
+}
+
+function extractAnsibleTasks(text) {
+ const taskPattern = /TASK \[(.*?)\][\s\S]*?(?=TASK \[|PLAY \[|PLAY RECAP|$)/g;
+ let tasks = [];
+ let match;
+
+ while ((match = taskPattern.exec(text)) !== null) {
+ const taskText = match[0];
+ const name = match[1];
+
+ tasks.push({
+ name: name,
+ status: taskText.includes('failed:') ? 'failed' :
+ taskText.includes('changed:') ? 'changed' :
+ taskText.includes('skipping:') ? 'skipped' : 'ok',
+ module: extractModuleName(taskText),
+ hosts: extractTaskHosts(taskText),
+ changes: extractTaskChanges(taskText)
+ });
+ }
+
+ return tasks;
+}
+
+function extractAnsibleHostResults(text) {
+ const hostSummary = extractAnsibleHostSummary(text);
+ const tasks = extractAnsibleTasks(text);
+
+ let hostResults = {};
+
+ Object.entries(hostSummary).forEach(([host, stats]) => {
+ hostResults[host] = {
+ ...stats,
+ overall_status: stats.failed > 0 ? 'failed' :
+ stats.changed > 0 ? 'changed' : 'ok',
+ tasks: tasks.filter(task => task.hosts.includes(host))
+ };
+ });
+
+ return hostResults;
+}
+
+function extractAnsibleVariables(text) {
+ // basic variable extraction - could be enhanced based on actual ansible output format
+ return {
+ 'Facts': extractAnsibleFacts(text),
+ 'Variables': extractAnsibleVars(text)
+ };
+}
+
+function extractModuleName(taskText) {
+ const moduleMatch = taskText.match(/(\w+):\s*\{/);
+ return moduleMatch ? moduleMatch[1] : 'unknown';
+}
+
+function extractTaskHosts(taskText) {
+ const hostMatches = taskText.match(/(\w+[\w.-]*)\s*:/g);
+ return hostMatches ? hostMatches.map(h => h.replace(':', '')) : [];
+}
+
+function extractTaskChanges(taskText) {
+ const changePattern = /changed:\s*\[(.*?)\]/g;
+ let changes = [];
+ let match;
+
+ while ((match = changePattern.exec(taskText)) !== null) {
+ changes.push(match[1]);
+ }
+
+ return changes;
+}
+
+function extractAnsibleFacts(text) {
+ // extract common ansible facts from output
+ const facts = {};
+ const factPatterns = {
+ 'ansible_os_family': /ansible_os_family['"]\s*:\s*['"]([^'"]+)['"]/,
+ 'ansible_distribution': /ansible_distribution['"]\s*:\s*['"]([^'"]+)['"]/,
+ 'ansible_python_version': /ansible_python_version['"]\s*:\s*['"]([^'"]+)['"]/
+ };
+
+ Object.entries(factPatterns).forEach(([key, pattern]) => {
+ const match = text.match(pattern);
+ if (match) facts[key] = match[1];
+ });
+
+ return facts;
+}
+
+function extractAnsibleVars(text) {
+ // extract ansible variables from output
+ const vars = {};
+ const varPattern = /(\w+)\s*:\s*([^,}\n]+)/g;
+ let match;
+
+ while ((match = varPattern.exec(text)) !== null && Object.keys(vars).length < 10) {
+ if (!match[1].startsWith('ansible_')) {
+ vars[match[1]] = match[2].trim();
+ }
+ }
+
+ return vars;
+}
+
+// switch between ansible output tabs
+function switchAnsibleTab(tabId, button) {
+ const container = button.closest('.ansible-tabs');
+
+ const contents = container.querySelectorAll('.ansible-tab-content');
+ contents.forEach(content => {
+ content.classList.remove('active');
+ });
+
+ const buttons = container.querySelectorAll('.tab-button');
+ buttons.forEach(btn => {
+ btn.classList.remove('active');
+ });
+
+ const targetTab = document.getElementById(tabId);
+ if (targetTab) {
+ targetTab.classList.add('active');
+ }
+
+ button.classList.add('active');
+}
+
// close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('execution-modal');