@arcadialdev/arcality 4.1.0 → 4.1.1

package/tests/_helpers/ArcalityReporter.js

@@ -1,1255 +1,1342 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-class ArcalityReporter {
-    constructor(options = {}) {
-        this.results = [];
-        this.totalDuration = 0;
-        this.startTime = new Date();
-        this.outputDir = options.outputDir || 'arcality-report';
-    }
-    onBegin(config, suite) {
-        // Clean output directory to avoid stale reports/attachments.
-        if (fs_1.default.existsSync(this.outputDir)) {
-            try {
-                fs_1.default.rmSync(this.outputDir, { recursive: true, force: true });
-                console.log(`Cleaned old report data at: ${this.outputDir}`);
-            }
-            catch (err) {
-                console.warn(`Could not fully clean report dir: ${err.message}`);
-            }
-        }
-        if (!fs_1.default.existsSync(this.outputDir)) {
-            fs_1.default.mkdirSync(this.outputDir, { recursive: true });
-        }
-        this.startTime = new Date();
-        console.log(`Arcality Mission started at ${this.startTime.toLocaleTimeString()}`);
-    }
-    onTestEnd(test, result) {
-        const stepsHtml = result.steps.map(step => this.renderStep(step, 0)).join('');
-        const processedAttachments = result.attachments.map(att => {
-            let extension = '.png';
-            if (att.contentType === 'application/json')
-                extension = '.json';
-            else if (att.contentType === 'text/plain')
-                extension = '.txt';
-            else if (att.contentType === 'text/yaml')
-                extension = '.yaml';
-            const fileName = att.path ? path_1.default.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}${extension}`;
-            const attachmentsDir = path_1.default.join(this.outputDir, 'attachments');
-            const destPath = path_1.default.join(attachmentsDir, fileName);
-            if (!fs_1.default.existsSync(attachmentsDir)) {
-                fs_1.default.mkdirSync(attachmentsDir, { recursive: true });
-            }
-            try {
-                let copied = false;
-                if (att.path && fs_1.default.existsSync(att.path)) {
-                    fs_1.default.copyFileSync(att.path, destPath);
-                    copied = true;
-                }
-                else if (att.body) {
-                    fs_1.default.writeFileSync(destPath, att.body);
-                    copied = true;
-                }
-                return copied ? { ...att, path: `attachments/${fileName}` } : att;
-            }
-            catch (e) {
-                console.error(`Failed to process attachment ${att.name}:`, e);
-                return att;
-            }
-        });
-        if (result.status === 'failed' || result.error) {
-            const isAppBug = result.error?.message?.includes('APPLICATION BUG');
-            const prefix = isAppBug ? '[APPLICATION BUG FOUND]' : '[TEST ENGINE FAILURE]';
-            console.log(`\n${prefix} ${test.title} failed:`);
-            console.log(`${result.error?.message || result.error?.stack || 'Unknown error'}\n`);
-            if (result.error?.stack && !isAppBug) {
-                console.log(result.error.stack);
-            }
-        }
-        this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
-    }
-    async onEnd(result) {
-        this.totalDuration = result.duration;
-        const htmlContent = this.generateHtml();
-        const reportPath = path_1.default.join(this.outputDir, 'index.html');
-        fs_1.default.writeFileSync(reportPath, htmlContent);
-        console.log(`Arcality Mission Report generated at: ${reportPath}`);
-    }
-    renderStep(step, depth) {
-        if (step.category === 'hook' || step.category === 'fixture')
-            return '';
-        const statusClass = step.error ? 'step-error' : 'step-passed';
-        const duration = step.duration >= 0 ? `<span class="step-duration">${this.formatDuration(step.duration)}</span>` : '';
-        let title = this.escapeHtml(step.title);
-        title = title.replace(/^(click|fill|navigate|wait|expect|goto|press)/i, '<span class="step-action">$1</span>');
-        const children = step.steps && step.steps.length > 0
-            ? `<div class="step-children">${step.steps.map(s => this.renderStep(s, depth + 1)).join('')}</div>`
-            : '';
-        const expandableAttr = step.steps && step.steps.length > 0 ? 'data-expandable="true"' : '';
-        return `
-            <div class="step-wrapper ${statusClass}" style="--step-depth: ${Math.min(depth, 8)}" ${expandableAttr}>
-                <div class="step-header">
-                    <span class="step-marker" aria-hidden="true"></span>
-                    <span class="step-title">${title}</span>
-                    ${duration}
-                </div>
-                ${children}
-            </div>
-        `;
-    }
-    formatDuration(milliseconds) {
-        if (milliseconds >= 1000) {
-            const seconds = milliseconds / 1000;
-            return `${seconds >= 10 ? seconds.toFixed(0) : seconds.toFixed(1)}s`;
-        }
-        return `${Math.max(0, Math.round(milliseconds))}ms`;
-    }
-    getStatusLabel(status) {
-        switch (status) {
-            case 'passed': return 'Exitosa';
-            case 'failed': return 'Error';
-            case 'timedOut': return 'Tiempo agotado';
-            case 'skipped': return 'Omitida';
-            case 'interrupted': return 'Interrumpida';
-            default: return status;
-        }
-    }
-    getStatusTone(status) {
-        if (status === 'failed' || status === 'timedOut' || status === 'interrupted')
-            return 'failed';
-        if (status === 'passed')
-            return 'passed';
-        return 'neutral';
-    }
-    getEngineVersion() {
-        try {
-            const packageJsonPath = path_1.default.join(process.cwd(), 'package.json');
-            if (fs_1.default.existsSync(packageJsonPath)) {
-                const pkg = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf8'));
-                return pkg.version || '2.2.0';
-            }
-        }
-        catch (e) {
-            console.error('Error reading package.json version:', e);
-        }
-        return '2.2.0';
-    }
-    getBrandLogoDataUri() {
-        const roots = [
-            process.env.ARCALITY_ROOT,
-            path_1.default.resolve(__dirname, '..', '..'),
-            process.cwd()
-        ].filter(Boolean);
-        const logoNames = ['logo.png', 'logo-arcadial-blanco.png'];
-        for (const root of roots) {
-            for (const logoName of logoNames) {
-                const logoPath = path_1.default.join(root, 'public', logoName);
-                if (!fs_1.default.existsSync(logoPath))
-                    continue;
-                try {
-                    const logoBuffer = fs_1.default.readFileSync(logoPath);
-                    return `data:image/png;base64,${logoBuffer.toString('base64')}`;
-                }
-                catch (e) {
-                    console.warn(`Could not load Arcality logo from ${logoPath}`);
-                }
-            }
-        }
-        return null;
-    }
-    generateHtml() {
-        const stats = {
-            total: this.results.length,
-            passed: this.results.filter(r => r.result.status === 'passed').length,
-            failed: this.results.filter(r => r.result.status === 'failed' || r.result.status === 'timedOut').length,
-            skipped: this.results.filter(r => r.result.status === 'skipped').length,
-            flaky: this.results.filter(r => r.result.status === 'passed' && r.result.retry > 0).length
-        };
-        const evidenceCount = this.results.reduce((count, r) => {
-            return count + r.attachments.filter(att => att.path && (att.contentType.startsWith('image/') || att.contentType.startsWith('video/'))).length;
-        }, 0);
-        const reportTone = stats.failed > 0 ? 'failed' : stats.total === 0 ? 'neutral' : 'passed';
-        const reportStatus = stats.failed > 0 ? 'Ejecucion con errores' : stats.total === 0 ? 'Sin ejecuciones' : 'Ejecucion exitosa';
-        const reportSummary = stats.failed > 0
-            ? `${stats.failed} mision${stats.failed === 1 ? '' : 'es'} fallida${stats.failed === 1 ? '' : 's'}. Revisa el diagnostico y la evidencia visual.`
-            : stats.total === 0
-                ? 'No se registraron misiones en esta ejecucion.'
-                : 'Todas las misiones ejecutadas finalizaron correctamente.';
-        const generatedAt = new Date();
-        const reportTitle = stats.total > 1 ? 'Reporte de coleccion' : 'Reporte de ejecucion';
-        const brandLogo = this.getBrandLogoDataUri();
-        return `
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arcality Mission Report</title>
-    <link rel="shortcut icon" href="https://raw.githubusercontent.com/microsoft/playwright/main/packages/playwright-core/src/server/chromium/test-results/favicon.ico">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
-
-        :root {
-            --bg: #07080d;
-            --surface: #10131b;
-            --surface-soft: #151925;
-            --line: #293042;
-            --line-soft: rgba(255,255,255,0.08);
-            --text: #f7f4ff;
-            --muted: #a9afc0;
-            --faint: #72798c;
-            --brand: #b56cff;
-            --brand-soft: rgba(181, 108, 255, 0.16);
-            --blue: #6bbcff;
-            --success: #39d99f;
-            --success-soft: rgba(57, 217, 159, 0.12);
-            --error: #ff5f7a;
-            --error-soft: rgba(255, 95, 122, 0.12);
-            --warning: #ffc857;
-            --warning-soft: rgba(255, 200, 87, 0.12);
-            --shadow: 0 18px 60px rgba(0,0,0,0.28);
-        }
-
-        * { box-sizing: border-box; }
-        html { background: var(--bg); }
-        body {
-            font-family: 'Plus Jakarta Sans', sans-serif;
-            background: linear-gradient(180deg, #080910 0%, #10121a 44%, #07080d 100%);
-            color: var(--text);
-            margin: 0;
-            min-height: 100vh;
-            line-height: 1.55;
-        }
-        body::before {
-            content: "";
-            position: fixed;
-            inset: 0;
-            pointer-events: none;
-            background-image:
-                linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
-            background-size: 52px 52px;
-            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 68%);
-        }
-
-        button, a { font: inherit; }
-        a { color: inherit; }
-        .container {
-            position: relative;
-            max-width: 1480px;
-            margin: 0 auto;
-            padding: 32px;
-        }
-
-        .mission-brief {
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) auto;
-            gap: 28px;
-            align-items: start;
-            padding: 6px 0 28px;
-            border-bottom: 1px solid var(--line);
-            margin-bottom: 22px;
-        }
-        .brand-row {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-            margin-bottom: 26px;
-        }
-        .brand-mark {
-            width: 38px;
-            height: 38px;
-            border: 1px solid rgba(181,108,255,0.45);
-            border-radius: 8px;
-            background: linear-gradient(135deg, rgba(181,108,255,0.92), rgba(107,188,255,0.62)), #141720;
-            box-shadow: 0 0 28px rgba(181,108,255,0.22);
-        }
-        .brand-mark.has-logo {
-            width: 42px;
-            height: 42px;
-            padding: 5px;
-            background: rgba(255,255,255,0.035);
-            box-shadow: 0 0 24px rgba(181,108,255,0.12);
-        }
-        .brand-mark img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            filter: drop-shadow(0 0 10px rgba(181,108,255,0.28));
-        }
-        .brand-name {
-            font-size: 0.74rem;
-            color: var(--muted);
-            letter-spacing: 0.16em;
-            text-transform: uppercase;
-            font-weight: 800;
-        }
-        .brand-subtitle {
-            color: var(--faint);
-            font-size: 0.86rem;
-            margin-top: 1px;
-        }
-        .mission-title {
-            font-size: clamp(2rem, 4vw, 4.6rem);
-            line-height: 0.96;
-            letter-spacing: 0;
-            max-width: 900px;
-            margin: 0;
-            font-weight: 800;
-        }
-        .mission-copy {
-            margin: 18px 0 0;
-            max-width: 720px;
-            color: var(--muted);
-            font-size: 1rem;
-        }
-        .status-card {
-            width: min(380px, 100%);
-            border: 1px solid var(--line);
-            background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
-            border-radius: 8px;
-            padding: 18px;
-            box-shadow: var(--shadow);
-        }
-        .status-card.passed { border-color: rgba(57,217,159,0.42); }
-        .status-card.failed { border-color: rgba(255,95,122,0.48); }
-        .status-card.neutral { border-color: rgba(169,175,192,0.28); }
-        .status-eyebrow {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 16px;
-            color: var(--faint);
-            font-size: 0.72rem;
-            font-family: 'JetBrains Mono', monospace;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-        }
-        .status-pill {
-            display: inline-flex;
-            align-items: center;
-            gap: 7px;
-            border: 1px solid var(--line-soft);
-            border-radius: 999px;
-            padding: 5px 9px;
-            color: var(--text);
-            background: rgba(255,255,255,0.04);
-        }
-        .status-pill::before {
-            content: "";
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background: var(--faint);
-        }
-        .status-card.passed .status-pill::before { background: var(--success); }
-        .status-card.failed .status-pill::before { background: var(--error); }
-        .status-title {
-            font-size: 1.7rem;
-            line-height: 1.05;
-            margin: 24px 0 10px;
-            font-weight: 800;
-        }
-        .status-summary {
-            color: var(--muted);
-            margin: 0;
-            font-size: 0.95rem;
-        }
-        .brief-grid {
-            display: grid;
-            grid-template-columns: repeat(6, minmax(120px, 1fr));
-            gap: 1px;
-            background: var(--line);
-            border: 1px solid var(--line);
-            border-radius: 8px;
-            overflow: hidden;
-            margin-bottom: 18px;
-        }
-        .brief-metric {
-            background: rgba(16,19,27,0.94);
-            padding: 16px 18px;
-            min-height: 92px;
-        }
-        .metric-value {
-            display: block;
-            font-size: 1.7rem;
-            line-height: 1;
-            font-weight: 800;
-        }
-        .metric-label {
-            display: block;
-            margin-top: 10px;
-            color: var(--faint);
-            font-size: 0.72rem;
-            letter-spacing: 0.1em;
-            text-transform: uppercase;
-            font-weight: 800;
-        }
-        .val-passed { color: var(--success); }
-        .val-failed { color: var(--error); }
-        .val-flaky { color: var(--warning); }
-        .val-blue { color: var(--blue); }
-
-        .test-entry {
-            border-top: 1px solid var(--line);
-        }
-        .test-entry:last-child {
-            border-bottom: 1px solid var(--line);
-        }
-        .test-header {
-            width: 100%;
-            appearance: none;
-            border: 0;
-            color: var(--text);
-            background: transparent;
-            padding: 22px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 24px;
-            text-align: left;
-            cursor: pointer;
-        }
-        .test-header:hover .test-name { color: var(--brand); }
-        .test-info {
-            min-width: 0;
-            display: flex;
-            align-items: center;
-            gap: 14px;
-        }
-        .status-dot {
-            width: 11px;
-            height: 44px;
-            border-radius: 999px;
-            background: var(--faint);
-            flex: 0 0 auto;
-        }
-        .status-passed .status-dot { background: var(--success); }
-        .status-failed .status-dot { background: var(--error); }
-        .status-neutral .status-dot { background: var(--faint); }
-        .test-name {
-            font-weight: 800;
-            font-size: 1.08rem;
-            line-height: 1.25;
-            transition: color 0.16s ease;
-        }
-        .test-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 8px;
-            color: var(--muted);
-            font-size: 0.78rem;
-            font-family: 'JetBrains Mono', monospace;
-        }
-        .test-chevron {
-            width: 32px;
-            height: 32px;
-            border: 1px solid var(--line);
-            border-radius: 8px;
-            display: inline-grid;
-            place-items: center;
-            color: var(--muted);
-            flex: 0 0 auto;
-            transition: transform 0.16s ease, border-color 0.16s ease;
-        }
-        .test-header[aria-expanded="true"] .test-chevron {
-            transform: rotate(180deg);
-            border-color: rgba(181,108,255,0.48);
-            color: var(--text);
-        }
-        .test-details {
-            padding: 0 0 28px;
-        }
-        .test-details-grid {
-            display: grid;
-            grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
-            gap: 24px;
-            align-items: start;
-        }
-        .primary-column,
-        .context-column {
-            min-width: 0;
-        }
-        .context-column {
-            display: flex;
-            flex-direction: column;
-            gap: 14px;
-        }
-        .outcome-block,
-        .side-panel,
-        .timeline-wrap {
-            border: 1px solid var(--line);
-            border-radius: 8px;
-            background: rgba(16,19,27,0.78);
-        }
-        .outcome-block {
-            padding: 18px;
-            margin-bottom: 18px;
-        }
-        .outcome-block.success {
-            border-color: rgba(57,217,159,0.36);
-            background: var(--success-soft);
-        }
-        .outcome-block.error {
-            border-color: rgba(255,95,122,0.4);
-            background: var(--error-soft);
-        }
-        .outcome-label {
-            display: block;
-            color: var(--faint);
-            font-size: 0.72rem;
-            letter-spacing: 0.12em;
-            text-transform: uppercase;
-            font-weight: 800;
-            margin-bottom: 8px;
-        }
-        .success-block {
-            margin: 0;
-            color: #bff7df;
-            font-size: 1rem;
-            font-weight: 700;
-        }
-        .error-block {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.86rem;
-            color: #ffd0d8;
-            white-space: pre-wrap;
-            margin: 0;
-        }
-        .panel-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 12px;
-            padding: 14px 16px;
-            border-bottom: 1px solid var(--line-soft);
-        }
-        .panel-title {
-            color: var(--text);
-            font-size: 0.8rem;
-            letter-spacing: 0.1em;
-            text-transform: uppercase;
-            font-weight: 800;
-        }
-        .panel-kicker {
-            color: var(--faint);
-            font-size: 0.72rem;
-            font-family: 'JetBrains Mono', monospace;
-            text-transform: uppercase;
-        }
-        .panel-body {
-            padding: 16px;
-        }
-        .info-block {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.8rem;
-            color: #d7dcff;
-            white-space: pre-wrap;
-            margin: 0;
-        }
-        .metadata-list {
-            display: grid;
-            gap: 12px;
-            margin: 0;
-        }
-        .metadata-row {
-            display: flex;
-            justify-content: space-between;
-            gap: 16px;
-            border-bottom: 1px solid var(--line-soft);
-            padding-bottom: 10px;
-        }
-        .metadata-row:last-child {
-            border-bottom: 0;
-            padding-bottom: 0;
-        }
-        .metadata-row dt {
-            color: var(--faint);
-            margin: 0;
-            font-size: 0.74rem;
-            text-transform: uppercase;
-            letter-spacing: 0.08em;
-            font-weight: 800;
-        }
-        .metadata-row dd {
-            margin: 0;
-            color: var(--text);
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.8rem;
-            text-align: right;
-        }
-
-        .steps-section { margin-top: 0; }
-        .section-title {
-            display: block;
-            padding: 15px 18px;
-            border-bottom: 1px solid var(--line-soft);
-            color: var(--muted);
-            font-size: 0.76rem;
-            text-transform: uppercase;
-            letter-spacing: 0.12em;
-            font-weight: 800;
-        }
-        .timeline-wrap {
-            overflow: hidden;
-        }
-        .steps-container {
-            padding: 12px 0;
-        }
-        .step-wrapper {
-            margin-left: calc(var(--step-depth) * 18px);
-            padding: 7px 18px 7px 20px;
-            position: relative;
-        }
-        .step-wrapper::before {
-            content: "";
-            position: absolute;
-            left: 5px;
-            top: 0;
-            bottom: 0;
-            width: 1px;
-            background: var(--line-soft);
-        }
-        .step-header {
-            display: grid;
-            grid-template-columns: 14px minmax(0, 1fr) auto;
-            align-items: start;
-            gap: 10px;
-            font-size: 0.9rem;
-        }
-        .step-marker {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--success);
-            margin-top: 7px;
-            box-shadow: 0 0 0 4px rgba(57,217,159,0.08);
-        }
-        .step-title {
-            color: #e6e9f5;
-            min-width: 0;
-            overflow-wrap: anywhere;
-        }
-        .step-action {
-            color: var(--blue);
-            font-weight: 800;
-        }
-        .step-duration {
-            color: var(--faint);
-            font-size: 0.72rem;
-            font-family: 'JetBrains Mono', monospace;
-            white-space: nowrap;
-            padding-top: 2px;
-        }
-        .step-error .step-title { color: #ffd0d8; }
-        .step-error .step-marker {
-            background: var(--error);
-            box-shadow: 0 0 0 4px rgba(255,95,122,0.09);
-        }
-        .step-children {
-            margin-top: 2px;
-        }
-
-        .evidence-hero {
-            position: relative;
-            overflow: hidden;
-            background: #080910;
-        }
-        .evidence-hero img,
-        .evidence-hero video {
-            width: 100%;
-            max-height: 320px;
-            object-fit: contain;
-            display: block;
-            cursor: zoom-in;
-        }
-        .evidence-link,
-        .evidence-thumb {
-            text-decoration: none;
-        }
-        .evidence-link {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-            padding: 11px 13px;
-            color: var(--muted);
-            border-top: 1px solid var(--line-soft);
-            font-size: 0.78rem;
-            font-family: 'JetBrains Mono', monospace;
-        }
-        .evidence-link:hover,
-        .evidence-thumb:hover {
-            color: var(--text);
-        }
-        .evidence-thumbs {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 10px;
-            padding: 12px;
-            border-top: 1px solid var(--line-soft);
-        }
-        .evidence-thumb {
-            border: 1px solid var(--line-soft);
-            border-radius: 8px;
-            overflow: hidden;
-            color: var(--muted);
-            background: rgba(255,255,255,0.03);
-            font-size: 0.72rem;
-        }
-        .evidence-thumb img,
-        .evidence-thumb video {
-            width: 100%;
-            aspect-ratio: 16 / 9;
-            object-fit: cover;
-            display: block;
-            background: #07080d;
-        }
-        .thumb-name {
-            display: block;
-            padding: 8px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        footer {
-            margin-top: 34px;
-            text-align: center;
-            padding: 22px 0 6px;
-            font-size: 0.76rem;
-            color: var(--faint);
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        .tag {
-            display: inline-flex;
-            align-items: center;
-            min-height: 22px;
-            padding: 3px 8px;
-            border-radius: 999px;
-            border: 1px solid var(--line-soft);
-            background: rgba(255,255,255,0.035);
-            color: var(--muted);
-            font-size: 0.68rem;
-            font-weight: 800;
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
-        }
-        .tag-project {
-            color: #e2c7ff;
-            background: var(--brand-soft);
-            border-color: rgba(181,108,255,0.26);
-        }
-        .tag-bug {
-            color: #b7e4ff;
-            background: rgba(80,170,255,0.12);
-            border-color: rgba(80,170,255,0.3);
-        }
-        .tag-retry {
-            color: #ffe2a6;
-            background: var(--warning-soft);
-            border-color: rgba(255,200,87,0.28);
-        }
-        .tag-status-passed {
-            color: #bff7df;
-            background: var(--success-soft);
-            border-color: rgba(57,217,159,0.28);
-        }
-        .tag-status-failed {
-            color: #ffd0d8;
-            background: var(--error-soft);
-            border-color: rgba(255,95,122,0.28);
-        }
-        .tag-status-neutral {
-            color: var(--muted);
-        }
-
-        .security-section {
-            overflow: hidden;
-        }
-        .security-header {
-            width: 100%;
-            border: 0;
-            background: transparent;
-            color: var(--text);
-            cursor: pointer;
-        }
-        .security-risk-badge {
-            padding: 5px 9px;
-            border-radius: 999px;
-            font-size: 0.72rem;
-            font-weight: 800;
-            color: #07080d;
-        }
-        .security-summary {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 1px;
-            background: var(--line-soft);
-            text-align: center;
-            border-bottom: 1px solid var(--line-soft);
-        }
-        .summary-item {
-            background: rgba(7,8,13,0.48);
-            padding: 12px 8px;
-        }
-        .summary-item .count {
-            font-size: 1.2rem;
-            font-weight: 800;
-        }
-        .summary-item .label {
-            font-size: 0.66rem;
-            text-transform: uppercase;
-            color: var(--faint);
-            letter-spacing: 0.08em;
-        }
-        .count-Critical { color: var(--error); }
-        .count-High { color: #ff9d66; }
-        .count-Medium { color: var(--warning); }
-        .count-Low { color: var(--blue); }
-
-        .vuln-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            padding: 14px;
-        }
-        .vuln-card {
-            background: rgba(7,8,13,0.52);
-            border: 1px solid var(--line-soft);
-            border-left-width: 4px;
-            border-radius: 8px;
-            padding: 14px;
-        }
-        .vuln-card-title {
-            font-weight: 800;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-        .vuln-card-desc {
-            color: var(--muted);
-            font-size: 0.88rem;
-            margin: 10px 0;
-        }
-        .vuln-card-evidence {
-            background: #07080d;
-            padding: 10px;
-            border-radius: 4px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.74rem;
-            white-space: pre-wrap;
-            word-break: break-all;
-            margin: 10px 0;
-            border: 1px solid var(--line-soft);
-            max-height: 200px;
-            overflow-y: auto;
-        }
-        .vuln-card-remediation {
-            font-size: 0.88rem;
-            color: #bff7df;
-        }
-        pre { margin: 0; }
-
-        @media (max-width: 1040px) {
-            .mission-brief,
-            .test-details-grid {
-                grid-template-columns: 1fr;
-            }
-            .status-card {
-                width: 100%;
-            }
-            .brief-grid {
-                grid-template-columns: repeat(3, minmax(0, 1fr));
-            }
-        }
-        @media (max-width: 680px) {
-            .container {
-                padding: 20px;
-            }
-            .mission-title {
-                font-size: 2.3rem;
-            }
-            .brief-grid {
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-            }
-            .test-header {
-                align-items: flex-start;
-            }
-            .test-details-grid {
-                gap: 16px;
-            }
-            .step-header {
-                grid-template-columns: 14px minmax(0, 1fr);
-            }
-            .step-duration {
-                grid-column: 2;
-                justify-self: start;
-                padding-top: 0;
-            }
-            .evidence-thumbs,
-            .security-summary {
-                grid-template-columns: 1fr 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <header class="mission-brief">
-            <div>
-                <div class="brand-row">
-                    <span class="brand-mark ${brandLogo ? 'has-logo' : ''}" aria-hidden="true">
-                        ${brandLogo ? `<img src="${brandLogo}" alt="">` : ''}
-                    </span>
-                    <div>
-                        <div class="brand-name">Arcality QA Engine</div>
-                        <div class="brand-subtitle">Consola de diagnostico autonomo</div>
-                    </div>
-                </div>
-                <h1 class="mission-title">${reportTitle}</h1>
-                <p class="mission-copy">${reportSummary}</p>
-            </div>
-            <div class="status-card ${reportTone}">
-                <div class="status-eyebrow">
-                    <span>Estado general</span>
-                    <span class="status-pill">${reportStatus}</span>
-                </div>
-                <div class="status-title">${reportStatus}</div>
-                <p class="status-summary">Inicio ${this.startTime.toLocaleString()} | Engine ${this.getEngineVersion()}</p>
-            </div>
-        </header>
-
-        <div class="brief-grid" aria-label="Resumen de ejecucion">
-            <div class="brief-metric"><span class="metric-value">${stats.total}</span><span class="metric-label">Misiones</span></div>
-            <div class="brief-metric"><span class="metric-value val-passed">${stats.passed}</span><span class="metric-label">Exitosas</span></div>
-            <div class="brief-metric"><span class="metric-value val-failed">${stats.failed}</span><span class="metric-label">Errores</span></div>
-            <div class="brief-metric"><span class="metric-value val-flaky">${stats.flaky}</span><span class="metric-label">Reintentos</span></div>
-            <div class="brief-metric"><span class="metric-value val-blue">${evidenceCount}</span><span class="metric-label">Evidencias</span></div>
-            <div class="brief-metric"><span class="metric-value">${this.formatDuration(this.totalDuration)}</span><span class="metric-label">Duracion</span></div>
-        </div>
-
-        <div class="test-list">
-            ${this.results.map((r, i) => {
-            const tone = this.getStatusTone(r.result.status);
-            const statusClass = `status-${tone}`;
-            const projectName = r.test.parent.project()?.name || 'default';
-            const isOpen = this.results.length === 1 || tone === 'failed' || i === 0;
-            const successSummary = r.attachments.find(a => a.name === 'success_summary');
-            const successText = this.getAttachmentText(successSummary);
-            const bugClassificationAtt = r.attachments.find(a => a.name === 'bug_classification');
-            const bugClassification = (this.getAttachmentText(bugClassificationAtt) || '').trim();
-            const evidenceHtml = this.renderVisualEvidence(r.attachments);
-            const contextHtml = this.renderTextAttachmentSection(r.attachments, 'qa_context_summary', 'Contexto QA aplicado');
-            const securityHtml = this._renderSecuritySection(r.attachments, i);
-            return `
-                <div class="test-entry ${statusClass}">
-                    <button class="test-header" type="button" onclick="toggleDetails('details-${i}', this)" aria-expanded="${isOpen ? 'true' : 'false'}">
-                        <div class="test-info">
-                            <span class="status-dot"></span>
-                            <div>
-                                <div class="test-name">${this.escapeHtml(r.test.title)}</div>
-                                <div class="test-meta">
-                                    <span class="tag tag-status-${tone}">${this.getStatusLabel(r.result.status)}</span>
-                                    <span class="tag tag-project">${this.escapeHtml(projectName)}</span>
-                                    ${bugClassification ? `<span class="tag tag-bug">${this.escapeHtml(bugClassification)}</span>` : ''}
-                                    ${r.result.retry > 0 ? `<span class="tag tag-retry">Retry #${r.result.retry}</span>` : ''}
-                                    <span class="tag">${this.formatDuration(r.result.duration)}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <span class="test-chevron" aria-hidden="true">v</span>
-                    </button>
-
-                    <div class="test-details" id="details-${i}" style="display: ${isOpen ? 'block' : 'none'};">
-                        <div class="test-details-grid">
-                            <main class="primary-column">
-                                ${r.result.status === 'passed' && successText ? `
-                                    <div class="outcome-block success">
-                                        <span class="outcome-label">Resultado</span>
-                                        <p class="success-block">${this.escapeHtml(successText)}</p>
-                                    </div>
-                                ` : ''}
-
-                                ${r.result.error && bugClassification ? `
-                                    <div class="outcome-block error">
-                                        <span class="outcome-label">Clasificacion AI</span>
-                                        <pre class="error-block">${this.escapeHtml(bugClassification)}</pre>
-                                    </div>
-                                ` : ''}
-
-                                ${r.result.error ? `
-                                    <div class="outcome-block error">
-                                        <span class="outcome-label">Diagnostico del bloqueo</span>
-                                        <pre class="error-block">${this.escapeHtml(r.result.error.message || 'Unknown Failure')}</pre>
-                                    </div>
-                                ` : ''}
-
-                                <section class="steps-section timeline-wrap">
-                                    <span class="section-title">Proceso cognitivo del agente</span>
-                                    <div class="steps-container">
-                                        ${r.stepsHtml || '<p style="opacity:0.5; padding: 0 18px;">No hay pasos registrados.</p>'}
-                                    </div>
-                                </section>
-                            </main>
-
-                            <aside class="context-column">
-                                ${evidenceHtml}
-                                ${contextHtml}
-                                ${securityHtml}
-                                <section class="side-panel">
-                                    <div class="panel-header">
-                                        <span class="panel-title">Metadata</span>
-                                    </div>
-                                    <div class="panel-body">
-                                        <dl class="metadata-list">
-                                            <div class="metadata-row"><dt>Proyecto</dt><dd>${this.escapeHtml(projectName)}</dd></div>
-                                            <div class="metadata-row"><dt>Estado</dt><dd>${this.getStatusLabel(r.result.status)}</dd></div>
-                                            <div class="metadata-row"><dt>Duracion</dt><dd>${this.formatDuration(r.result.duration)}</dd></div>
-                                            <div class="metadata-row"><dt>Retry</dt><dd>${r.result.retry}</dd></div>
-                                        </dl>
-                                    </div>
-                                </section>
-                            </aside>
-                        </div>
-                    </div>
-                </div>
-                `;
-        }).join('')}
-        </div>
-
-        <footer>
-            ARCALITY ENGINE v${this.getEngineVersion()} | ${generatedAt.toISOString()} | GENERATED FOR ARCADIAL
-        </footer>
-    </div>
-
-    <script>
-        function toggleDetails(id, trigger) {
-            const el = document.getElementById(id);
-            if (!el) return;
-            const isHidden = el.style.display === 'none' || el.style.display === '';
-            el.style.display = isHidden ? 'block' : 'none';
-            if (trigger) trigger.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
-        }
-    </script>
-</body>
-</html>
-        `;
-    }
-    renderVisualEvidence(attachments) {
-        const media = attachments.filter(att => att.path && (att.contentType.startsWith('image/') || att.contentType.startsWith('video/')));
-        if (media.length === 0)
-            return '';
-        const primary = media[0];
-        const primaryPath = this.escapeHtml(primary.path);
-        const primaryName = this.escapeHtml(primary.name);
-        const primaryMedia = primary.contentType.startsWith('image/')
-            ? `<img src="${primaryPath}" alt="${primaryName}" onclick="window.open(this.src)">`
-            : `<video controls src="${primaryPath}"></video>`;
-        return `
-            <section class="side-panel evidence-panel">
-                <div class="panel-header">
-                    <span class="panel-title">Evidencia visual</span>
-                    <span class="panel-kicker">${media.length} archivo${media.length === 1 ? '' : 's'}</span>
-                </div>
-                <div class="evidence-hero">
-                    ${primaryMedia}
-                    <a class="evidence-link" href="${primaryPath}" target="_blank" rel="noreferrer">
-                        <span>${primaryName}</span>
-                        <span>Abrir</span>
-                    </a>
-                </div>
-                ${media.length > 1 ? `
-                    <div class="evidence-thumbs">
-                        ${media.map(att => {
-            const mediaPath = this.escapeHtml(att.path);
-            const mediaName = this.escapeHtml(att.name);
-            const thumb = att.contentType.startsWith('image/')
-                ? `<img src="${mediaPath}" alt="${mediaName}">`
-                : `<video src="${mediaPath}"></video>`;
-            return `
-                                <a class="evidence-thumb" href="${mediaPath}" target="_blank" rel="noreferrer">
-                                    ${thumb}
-                                    <span class="thumb-name">${mediaName}</span>
-                                </a>
-                            `;
-        }).join('')}
-                    </div>
-                ` : ''}
-            </section>
-        `;
-    }
-    getAttachmentText(att) {
-        if (!att)
-            return null;
-        if (att.body)
-            return att.body.toString();
-        if (att.path) {
-            const actualPath = path_1.default.isAbsolute(att.path) ? att.path : path_1.default.join(this.outputDir, att.path);
-            if (fs_1.default.existsSync(actualPath)) {
-                return fs_1.default.readFileSync(actualPath, 'utf8');
-            }
-        }
-        return null;
-    }
-    renderTextAttachmentSection(attachments, attachmentName, title) {
-        const attachment = attachments.find(att => att.name === attachmentName);
-        const text = this.getAttachmentText(attachment);
-        if (!text)
-            return '';
-        return `
-            <section class="side-panel">
-                <div class="panel-header">
-                    <span class="panel-title">${this.escapeHtml(title)}</span>
-                </div>
-                <div class="panel-body">
-                    <pre class="info-block">${this.escapeHtml(text)}</pre>
-                </div>
-            </section>
-        `;
-    }
-    _renderSecuritySection(attachments, index) {
-        let vulnerabilities = [];
-        const reportAtt = attachments.find(a => a.name === 'security_report');
-        if (reportAtt) {
-            const text = this.getAttachmentText(reportAtt);
-            if (text) {
-                try {
-                    const parsed = JSON.parse(text);
-                    if (Array.isArray(parsed))
-                        vulnerabilities.push(...parsed);
-                }
-                catch (e) { }
-            }
-        }
-        const findingAtts = attachments.filter(a => a.name === 'security_finding');
-        for (const findingAtt of findingAtts) {
-            const text = this.getAttachmentText(findingAtt);
-            if (text) {
-                try {
-                    const parsed = JSON.parse(text);
-                    vulnerabilities.push(parsed);
-                }
-                catch (e) { }
-            }
-        }
-        if (vulnerabilities.length === 0)
-            return '';
-        const severityOrder = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3, 'Info': 4 };
-        const severityCounts = { 'Critical': 0, 'High': 0, 'Medium': 0, 'Low': 0, 'Info': 0 };
-        let worstSeverity = 'Info';
-        const normalizeSeverity = (value) => {
-            const severity = String(value || 'Info');
-            return severityCounts[severity] !== undefined ? severity : 'Info';
-        };
-        vulnerabilities.forEach(v => {
-            const severity = normalizeSeverity(v.severity);
-            severityCounts[severity]++;
-            if (severityOrder[severity] < severityOrder[worstSeverity]) {
-                worstSeverity = severity;
-            }
-        });
-        const getSeverityColor = (sev) => {
-            switch (sev) {
-                case 'Critical': return 'var(--error)';
-                case 'High': return '#ff9d66';
-                case 'Medium': return 'var(--warning)';
-                case 'Low': return 'var(--blue)';
-                case 'Info': return 'var(--faint)';
-            }
-        };
-        const riskColor = getSeverityColor(worstSeverity);
-        return `
-            <section class="side-panel security-section">
-                <button type="button" class="security-header panel-header" onclick="toggleDetails('security-details-${index}', this)" aria-expanded="false">
-                    <span class="panel-title">Evaluacion de seguridad</span>
-                    <span class="security-risk-badge" style="background-color: ${riskColor};">${worstSeverity}</span>
-                </button>
-                <div class="security-summary">
-                    <div class="summary-item">
-                        <div class="count count-Critical">${severityCounts.Critical}</div>
-                        <div class="label">Critical</div>
-                    </div>
-                    <div class="summary-item">
-                        <div class="count count-High">${severityCounts.High}</div>
-                        <div class="label">High</div>
-                    </div>
-                    <div class="summary-item">
-                        <div class="count count-Medium">${severityCounts.Medium}</div>
-                        <div class="label">Medium</div>
-                    </div>
-                    <div class="summary-item">
-                        <div class="count count-Low">${severityCounts.Low}</div>
-                        <div class="label">Low</div>
-                    </div>
-                </div>
-                <div class="security-details" id="security-details-${index}" style="display: none;">
-                    <div class="vuln-list">
-                        ${vulnerabilities.map(v => {
-            const sev = normalizeSeverity(v.severity);
-            const cardColor = getSeverityColor(sev);
-            return `
-                                <div class="vuln-card" style="border-left-color: ${cardColor};">
-                                    <div class="vuln-card-title">
-                                        <span class="tag" style="background-color: ${cardColor}20; color: ${cardColor};">${sev}</span>
-                                        <span>${this.escapeHtml(v.category)} ${v.subcategory ? `<span style="opacity:0.7">- ${this.escapeHtml(v.subcategory)}</span>` : ''}</span>
-                                    </div>
-                                    <div style="font-size: 0.78rem; opacity: 0.82; margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 10px;">
-                                        ${v.type ? `<span><strong style="color:var(--brand);">Type:</strong> ${this.escapeHtml(v.type)}</span>` : ''}
-                                        ${v.confidence ? `<span><strong>Confidence:</strong> ${this.escapeHtml(v.confidence)}</span>` : ''}
-                                        ${v.exploitability ? `<span><strong>Exploitability:</strong> ${this.escapeHtml(v.exploitability)}</span>` : ''}
-                                    </div>
-                                    <p class="vuln-card-desc">${this.escapeHtml(v.description)}</p>
-                                    ${v.impact ? `<p class="vuln-card-desc" style="color:#ffd89a;"><strong>Impact:</strong> ${this.escapeHtml(v.impact)}</p>` : ''}
-
-                                    <div class="vuln-card-evidence">
-                                        <strong>Evidence:</strong>
-                                        <pre>${this.escapeHtml(JSON.stringify(v.evidence, null, 2))}</pre>
-                                    </div>
-
-                                    ${v.reproductionSteps && v.reproductionSteps.length > 0 ? `
-                                    <div style="margin: 10px 0; background: rgba(0,0,0,0.18); padding: 10px; border-radius: 6px; border-left: 2px solid ${cardColor}80;">
-                                        <strong style="font-size: 0.82rem; color: var(--muted);">Reproduction Steps:</strong>
-                                        <ol style="margin: 5px 0 0 20px; font-size: 0.82rem; color: var(--text);">
-                                            ${v.reproductionSteps.map((s) => `<li>${this.escapeHtml(s)}</li>`).join('')}
-                                        </ol>
-                                    </div>` : ''}
-
-                                    <div class="vuln-card-remediation">
-                                        <strong>Remediation:</strong> ${this.escapeHtml(v.remediation)}
-                                    </div>
-
-                                    ${v.classification ? `
-                                    <div style="font-size: 0.72rem; opacity: 0.55; margin-top: 12px; display: flex; gap: 15px; font-family: 'JetBrains Mono', monospace; flex-wrap: wrap;">
-                                        ${v.classification.owaspTop10 ? `<span>[OWASP: ${this.escapeHtml(v.classification.owaspTop10)}]</span>` : ''}
-                                        ${v.classification.cwe ? `<span>[CWE: ${this.escapeHtml(v.classification.cwe)}]</span>` : ''}
-                                    </div>` : ''}
-                                </div>
-                            `;
-        }).join('')}
-                    </div>
-                </div>
-            </section>
-        `;
-    }
-    escapeHtml(unsafe) {
-        if (!unsafe)
-            return '';
-        return unsafe
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#039;");
-    }
-}
-exports.default = ArcalityReporter;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+class ArcalityReporter {
+    constructor(options = {}) {
+        this.results = [];
+        this.totalDuration = 0;
+        this.startTime = new Date();
+        this.outputDir = options.outputDir || 'arcality-report';
+    }
+    onBegin(config, suite) {
+        // Clean output directory to avoid stale reports/attachments.
+        if (fs_1.default.existsSync(this.outputDir)) {
+            try {
+                fs_1.default.rmSync(this.outputDir, { recursive: true, force: true });
+                console.log(`Cleaned old report data at: ${this.outputDir}`);
+            }
+            catch (err) {
+                console.warn(`Could not fully clean report dir: ${err.message}`);
+            }
+        }
+        if (!fs_1.default.existsSync(this.outputDir)) {
+            fs_1.default.mkdirSync(this.outputDir, { recursive: true });
+        }
+        this.startTime = new Date();
+        console.log(`Arcality Mission started at ${this.startTime.toLocaleTimeString()}`);
+    }
+    onTestEnd(test, result) {
+        const stepsHtml = result.steps.map(step => this.renderStep(step, 0)).join('');
+        const processedAttachments = result.attachments.map(att => {
+            let extension = '.png';
+            if (att.contentType === 'application/json')
+                extension = '.json';
+            else if (att.contentType === 'text/plain')
+                extension = '.txt';
+            else if (att.contentType === 'text/yaml')
+                extension = '.yaml';
+            const fileName = att.path ? path_1.default.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}${extension}`;
+            const attachmentsDir = path_1.default.join(this.outputDir, 'attachments');
+            const destPath = path_1.default.join(attachmentsDir, fileName);
+            if (!fs_1.default.existsSync(attachmentsDir)) {
+                fs_1.default.mkdirSync(attachmentsDir, { recursive: true });
+            }
+            try {
+                let copied = false;
+                if (att.path && fs_1.default.existsSync(att.path)) {
+                    fs_1.default.copyFileSync(att.path, destPath);
+                    copied = true;
+                }
+                else if (att.body) {
+                    fs_1.default.writeFileSync(destPath, att.body);
+                    copied = true;
+                }
+                return copied ? { ...att, path: `attachments/${fileName}` } : att;
+            }
+            catch (e) {
+                console.error(`Failed to process attachment ${att.name}:`, e);
+                return att;
+            }
+        });
+        if (result.status === 'failed' || result.error) {
+            const isAppBug = result.error?.message?.includes('APPLICATION BUG');
+            const prefix = isAppBug ? '[APPLICATION BUG FOUND]' : '[TEST ENGINE FAILURE]';
+            console.log(`\n${prefix} ${test.title} failed:`);
+            console.log(`${result.error?.message || result.error?.stack || 'Unknown error'}\n`);
+            if (result.error?.stack && !isAppBug) {
+                console.log(result.error.stack);
+            }
+        }
+        this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
+    }
+    async onEnd(result) {
+        this.totalDuration = result.duration;
+        const htmlContent = this.generateHtml();
+        const reportPath = path_1.default.join(this.outputDir, 'index.html');
+        fs_1.default.writeFileSync(reportPath, htmlContent);
+        console.log(`Arcality Mission Report generated at: ${reportPath}`);
+    }
+    renderStep(step, depth) {
+        if (step.category === 'hook' || step.category === 'fixture')
+            return '';
+        const statusClass = step.error ? 'step-error' : 'step-passed';
+        const duration = step.duration >= 0 ? `<span class="step-duration">${this.formatDuration(step.duration)}</span>` : '';
+        let title = this.escapeHtml(step.title);
+        title = title.replace(/^(click|fill|navigate|wait|expect|goto|press)/i, '<span class="step-action">$1</span>');
+        const children = step.steps && step.steps.length > 0
+            ? `<div class="step-children">${step.steps.map(s => this.renderStep(s, depth + 1)).join('')}</div>`
+            : '';
+        const expandableAttr = step.steps && step.steps.length > 0 ? 'data-expandable="true"' : '';
+        return `
+            <div class="step-wrapper ${statusClass}" style="--step-depth: ${Math.min(depth, 8)}" ${expandableAttr}>
+                <div class="step-header">
+                    <span class="step-marker" aria-hidden="true"></span>
+                    <span class="step-title">${title}</span>
+                    ${duration}
+                </div>
+                ${children}
+            </div>
+        `;
+    }
+    formatDuration(milliseconds) {
+        if (milliseconds >= 1000) {
+            const seconds = milliseconds / 1000;
+            return `${seconds >= 10 ? seconds.toFixed(0) : seconds.toFixed(1)}s`;
+        }
+        return `${Math.max(0, Math.round(milliseconds))}ms`;
+    }
+    getStatusLabel(status) {
+        switch (status) {
+            case 'passed': return 'Exitosa';
+            case 'failed': return 'Error';
+            case 'timedOut': return 'Tiempo agotado';
+            case 'skipped': return 'Omitida';
+            case 'interrupted': return 'Interrumpida';
+            default: return status;
+        }
+    }
+    getStatusTone(status) {
+        if (status === 'failed' || status === 'timedOut' || status === 'interrupted')
+            return 'failed';
+        if (status === 'passed')
+            return 'passed';
+        return 'neutral';
+    }
+    getEngineVersion() {
+        try {
+            const packageJsonPath = path_1.default.join(process.cwd(), 'package.json');
+            if (fs_1.default.existsSync(packageJsonPath)) {
+                const pkg = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf8'));
+                return pkg.version || '2.2.0';
+            }
+        }
+        catch (e) {
+            console.error('Error reading package.json version:', e);
+        }
+        return '2.2.0';
+    }
+    getBrandLogoDataUri() {
+        const roots = [
+            process.env.ARCALITY_ROOT,
+            path_1.default.resolve(__dirname, '..', '..'),
+            process.cwd()
+        ].filter(Boolean);
+        const logoNames = ['logo.png', 'logo-arcadial-blanco.png'];
+        for (const root of roots) {
+            for (const logoName of logoNames) {
+                const logoPath = path_1.default.join(root, 'public', logoName);
+                if (!fs_1.default.existsSync(logoPath))
+                    continue;
+                try {
+                    const logoBuffer = fs_1.default.readFileSync(logoPath);
+                    return `data:image/png;base64,${logoBuffer.toString('base64')}`;
+                }
+                catch (e) {
+                    console.warn(`Could not load Arcality logo from ${logoPath}`);
+                }
+            }
+        }
+        return null;
+    }
+    generateHtml() {
+        const stats = {
+            total: this.results.length,
+            passed: this.results.filter(r => r.result.status === 'passed').length,
+            failed: this.results.filter(r => r.result.status === 'failed' || r.result.status === 'timedOut').length,
+            skipped: this.results.filter(r => r.result.status === 'skipped').length,
+            flaky: this.results.filter(r => r.result.status === 'passed' && r.result.retry > 0).length
+        };
+        const evidenceCount = this.results.reduce((count, r) => {
+            return count + r.attachments.filter(att => att.path && (att.contentType.startsWith('image/') || att.contentType.startsWith('video/'))).length;
+        }, 0);
+        const reportTone = stats.failed > 0 ? 'failed' : stats.total === 0 ? 'neutral' : 'passed';
+        const reportStatus = stats.failed > 0 ? 'Ejecucion con errores' : stats.total === 0 ? 'Sin ejecuciones' : 'Ejecucion exitosa';
+        const reportSummary = stats.failed > 0
+            ? `${stats.failed} mision${stats.failed === 1 ? '' : 'es'} fallida${stats.failed === 1 ? '' : 's'}. Revisa el diagnostico y la evidencia visual.`
+            : stats.total === 0
+                ? 'No se registraron misiones en esta ejecucion.'
+                : 'Todas las misiones ejecutadas finalizaron correctamente.';
+        const generatedAt = new Date();
+        const reportTitle = stats.total > 1 ? 'Reporte de coleccion' : 'Reporte de ejecucion';
+        const brandLogo = this.getBrandLogoDataUri();
+        return `
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Arcality Mission Report</title>
+    <link rel="shortcut icon" href="https://raw.githubusercontent.com/microsoft/playwright/main/packages/playwright-core/src/server/chromium/test-results/favicon.ico">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
+        :root {
+            --bg: #07080d;
+            --surface: #10131b;
+            --surface-soft: #151925;
+            --line: #293042;
+            --line-soft: rgba(255,255,255,0.08);
+            --text: #f7f4ff;
+            --muted: #a9afc0;
+            --faint: #72798c;
+            --brand: #b56cff;
+            --brand-soft: rgba(181, 108, 255, 0.16);
+            --blue: #6bbcff;
+            --success: #39d99f;
+            --success-soft: rgba(57, 217, 159, 0.12);
+            --error: #ff5f7a;
+            --error-soft: rgba(255, 95, 122, 0.12);
+            --warning: #ffc857;
+            --warning-soft: rgba(255, 200, 87, 0.12);
+            --shadow: 0 18px 60px rgba(0,0,0,0.28);
+        }
+
+        * { box-sizing: border-box; }
+        html { background: var(--bg); }
+        body {
+            font-family: 'Plus Jakarta Sans', sans-serif;
+            background: linear-gradient(180deg, #080910 0%, #10121a 44%, #07080d 100%);
+            color: var(--text);
+            margin: 0;
+            min-height: 100vh;
+            line-height: 1.55;
+        }
+        body::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            background-image:
+                linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+            background-size: 52px 52px;
+            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 68%);
+        }
+
+        button, a { font: inherit; }
+        a { color: inherit; }
+        .container {
+            position: relative;
+            max-width: 1480px;
+            margin: 0 auto;
+            padding: 32px;
+        }
+
+        .mission-brief {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 28px;
+            align-items: start;
+            padding: 6px 0 28px;
+            border-bottom: 1px solid var(--line);
+            margin-bottom: 22px;
+        }
+        .brand-row {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            margin-bottom: 26px;
+        }
+        .brand-mark {
+            width: 38px;
+            height: 38px;
+            border: 1px solid rgba(181,108,255,0.45);
+            border-radius: 8px;
+            background: linear-gradient(135deg, rgba(181,108,255,0.92), rgba(107,188,255,0.62)), #141720;
+            box-shadow: 0 0 28px rgba(181,108,255,0.22);
+        }
+        .brand-mark.has-logo {
+            width: 42px;
+            height: 42px;
+            padding: 5px;
+            background: rgba(255,255,255,0.035);
+            box-shadow: 0 0 24px rgba(181,108,255,0.12);
+        }
+        .brand-mark img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            filter: drop-shadow(0 0 10px rgba(181,108,255,0.28));
+        }
+        .brand-name {
+            font-size: 0.74rem;
+            color: var(--muted);
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            font-weight: 800;
+        }
+        .brand-subtitle {
+            color: var(--faint);
+            font-size: 0.86rem;
+            margin-top: 1px;
+        }
+        .mission-title {
+            font-size: clamp(2rem, 4vw, 4.6rem);
+            line-height: 0.96;
+            letter-spacing: 0;
+            max-width: 900px;
+            margin: 0;
+            font-weight: 800;
+        }
+        .mission-copy {
+            margin: 18px 0 0;
+            max-width: 720px;
+            color: var(--muted);
+            font-size: 1rem;
+        }
+        .status-card {
+            width: min(380px, 100%);
+            border: 1px solid var(--line);
+            background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
+            border-radius: 8px;
+            padding: 18px;
+            box-shadow: var(--shadow);
+        }
+        .status-card.passed { border-color: rgba(57,217,159,0.42); }
+        .status-card.failed { border-color: rgba(255,95,122,0.48); }
+        .status-card.neutral { border-color: rgba(169,175,192,0.28); }
+        .status-eyebrow {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            color: var(--faint);
+            font-size: 0.72rem;
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+        }
+        .status-pill {
+            display: inline-flex;
+            align-items: center;
+            gap: 7px;
+            border: 1px solid var(--line-soft);
+            border-radius: 999px;
+            padding: 5px 9px;
+            color: var(--text);
+            background: rgba(255,255,255,0.04);
+        }
+        .status-pill::before {
+            content: "";
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            background: var(--faint);
+        }
+        .status-card.passed .status-pill::before { background: var(--success); }
+        .status-card.failed .status-pill::before { background: var(--error); }
+        .status-title {
+            font-size: 1.7rem;
+            line-height: 1.05;
+            margin: 24px 0 10px;
+            font-weight: 800;
+        }
+        .status-summary {
+            color: var(--muted);
+            margin: 0;
+            font-size: 0.95rem;
+        }
+        .brief-grid {
+            display: grid;
+            grid-template-columns: repeat(6, minmax(120px, 1fr));
+            gap: 1px;
+            background: var(--line);
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            overflow: hidden;
+            margin-bottom: 18px;
+        }
+        .brief-metric {
+            background: rgba(16,19,27,0.94);
+            padding: 16px 18px;
+            min-height: 92px;
+        }
+        .metric-value {
+            display: block;
+            font-size: 1.7rem;
+            line-height: 1;
+            font-weight: 800;
+        }
+        .metric-label {
+            display: block;
+            margin-top: 10px;
+            color: var(--faint);
+            font-size: 0.72rem;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            font-weight: 800;
+        }
+        .val-passed { color: var(--success); }
+        .val-failed { color: var(--error); }
+        .val-flaky { color: var(--warning); }
+        .val-blue { color: var(--blue); }
+
+        .test-entry {
+            border-top: 1px solid var(--line);
+        }
+        .test-entry:last-child {
+            border-bottom: 1px solid var(--line);
+        }
+        .test-header {
+            width: 100%;
+            appearance: none;
+            border: 0;
+            color: var(--text);
+            background: transparent;
+            padding: 22px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 24px;
+            text-align: left;
+            cursor: pointer;
+        }
+        .test-header:hover .test-name { color: var(--brand); }
+        .test-info {
+            min-width: 0;
+            display: flex;
+            align-items: center;
+            gap: 14px;
+        }
+        .status-dot {
+            width: 11px;
+            height: 44px;
+            border-radius: 999px;
+            background: var(--faint);
+            flex: 0 0 auto;
+        }
+        .status-passed .status-dot { background: var(--success); }
+        .status-failed .status-dot { background: var(--error); }
+        .status-neutral .status-dot { background: var(--faint); }
+        .test-name {
+            font-weight: 800;
+            font-size: 1.08rem;
+            line-height: 1.25;
+            transition: color 0.16s ease;
+        }
+        .test-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 8px;
+            color: var(--muted);
+            font-size: 0.78rem;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .test-chevron {
+            width: 32px;
+            height: 32px;
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            display: inline-grid;
+            place-items: center;
+            color: var(--muted);
+            flex: 0 0 auto;
+            transition: transform 0.16s ease, border-color 0.16s ease;
+        }
+        .test-header[aria-expanded="true"] .test-chevron {
+            transform: rotate(180deg);
+            border-color: rgba(181,108,255,0.48);
+            color: var(--text);
+        }
+        .test-details {
+            padding: 0 0 28px;
+        }
+        .test-details-grid {
+            display: grid;
+            grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
+            gap: 24px;
+            align-items: start;
+        }
+        .primary-column,
+        .context-column {
+            min-width: 0;
+        }
+        .context-column {
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+        .outcome-block,
+        .side-panel,
+        .timeline-wrap {
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            background: rgba(16,19,27,0.78);
+        }
+        .outcome-block {
+            padding: 18px;
+            margin-bottom: 18px;
+        }
+        .outcome-block.success {
+            border-color: rgba(57,217,159,0.36);
+            background: var(--success-soft);
+        }
+        .outcome-block.error {
+            border-color: rgba(255,95,122,0.4);
+            background: var(--error-soft);
+        }
+        .outcome-label {
+            display: block;
+            color: var(--faint);
+            font-size: 0.72rem;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            font-weight: 800;
+            margin-bottom: 8px;
+        }
+        .success-block {
+            margin: 0;
+            color: #bff7df;
+            font-size: 1rem;
+            font-weight: 700;
+        }
+        .error-block {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.86rem;
+            color: #ffd0d8;
+            white-space: pre-wrap;
+            margin: 0;
+        }
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
+            padding: 14px 16px;
+            border-bottom: 1px solid var(--line-soft);
+        }
+        .panel-title {
+            color: var(--text);
+            font-size: 0.8rem;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            font-weight: 800;
+        }
+        .panel-kicker {
+            color: var(--faint);
+            font-size: 0.72rem;
+            font-family: 'JetBrains Mono', monospace;
+            text-transform: uppercase;
+        }
+        .panel-body {
+            padding: 16px;
+        }
+        .info-block {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            color: #d7dcff;
+            white-space: pre-wrap;
+            margin: 0;
+        }
+        .metadata-list {
+            display: grid;
+            gap: 12px;
+            margin: 0;
+        }
+        .metadata-row {
+            display: flex;
+            justify-content: space-between;
+            gap: 16px;
+            border-bottom: 1px solid var(--line-soft);
+            padding-bottom: 10px;
+        }
+        .metadata-row:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+        }
+        .metadata-row dt {
+            color: var(--faint);
+            margin: 0;
+            font-size: 0.74rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            font-weight: 800;
+        }
+        .metadata-row dd {
+            margin: 0;
+            color: var(--text);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            text-align: right;
+        }
+
+        .steps-section { margin-top: 0; }
+        .section-title {
+            display: block;
+            padding: 15px 18px;
+            border-bottom: 1px solid var(--line-soft);
+            color: var(--muted);
+            font-size: 0.76rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            font-weight: 800;
+        }
+        .timeline-wrap {
+            overflow: hidden;
+        }
+        .steps-container {
+            padding: 12px 0;
+        }
+        .step-wrapper {
+            margin-left: calc(var(--step-depth) * 18px);
+            padding: 7px 18px 7px 20px;
+            position: relative;
+        }
+        .step-wrapper::before {
+            content: "";
+            position: absolute;
+            left: 5px;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: var(--line-soft);
+        }
+        .step-header {
+            display: grid;
+            grid-template-columns: 14px minmax(0, 1fr) auto;
+            align-items: start;
+            gap: 10px;
+            font-size: 0.9rem;
+        }
+        .step-marker {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--success);
+            margin-top: 7px;
+            box-shadow: 0 0 0 4px rgba(57,217,159,0.08);
+        }
+        .step-title {
+            color: #e6e9f5;
+            min-width: 0;
+            overflow-wrap: anywhere;
+        }
+        .step-action {
+            color: var(--blue);
+            font-weight: 800;
+        }
+        .step-duration {
+            color: var(--faint);
+            font-size: 0.72rem;
+            font-family: 'JetBrains Mono', monospace;
+            white-space: nowrap;
+            padding-top: 2px;
+        }
+        .step-error .step-title { color: #ffd0d8; }
+        .step-error .step-marker {
+            background: var(--error);
+            box-shadow: 0 0 0 4px rgba(255,95,122,0.09);
+        }
+        .step-children {
+            margin-top: 2px;
+        }
+
+        .evidence-hero {
+            position: relative;
+            overflow: hidden;
+            background: #080910;
+        }
+        .evidence-hero img,
+        .evidence-hero video {
+            width: 100%;
+            max-height: 320px;
+            object-fit: contain;
+            display: block;
+            cursor: zoom-in;
+        }
+        .evidence-link,
+        .evidence-thumb {
+            text-decoration: none;
+        }
+        .evidence-link {
+            display: flex;
+            justify-content: space-between;
+            gap: 12px;
+            padding: 11px 13px;
+            color: var(--muted);
+            border-top: 1px solid var(--line-soft);
+            font-size: 0.78rem;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .evidence-link:hover,
+        .evidence-thumb:hover {
+            color: var(--text);
+        }
+        .evidence-thumbs {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 10px;
+            padding: 12px;
+            border-top: 1px solid var(--line-soft);
+        }
+        .evidence-thumb {
+            border: 1px solid var(--line-soft);
+            border-radius: 8px;
+            overflow: hidden;
+            color: var(--muted);
+            background: rgba(255,255,255,0.03);
+            font-size: 0.72rem;
+        }
+        .evidence-thumb img,
+        .evidence-thumb video {
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            object-fit: cover;
+            display: block;
+            background: #07080d;
+        }
+        .thumb-name {
+            display: block;
+            padding: 8px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        footer {
+            margin-top: 34px;
+            text-align: center;
+            padding: 22px 0 6px;
+            font-size: 0.76rem;
+            color: var(--faint);
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .tag {
+            display: inline-flex;
+            align-items: center;
+            min-height: 22px;
+            padding: 3px 8px;
+            border-radius: 999px;
+            border: 1px solid var(--line-soft);
+            background: rgba(255,255,255,0.035);
+            color: var(--muted);
+            font-size: 0.68rem;
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
+        }
+        .tag-project {
+            color: #e2c7ff;
+            background: var(--brand-soft);
+            border-color: rgba(181,108,255,0.26);
+        }
+        .tag-bug {
+            color: #b7e4ff;
+            background: rgba(80,170,255,0.12);
+            border-color: rgba(80,170,255,0.3);
+        }
+        .tag-retry {
+            color: #ffe2a6;
+            background: var(--warning-soft);
+            border-color: rgba(255,200,87,0.28);
+        }
+        .tag-status-passed {
+            color: #bff7df;
+            background: var(--success-soft);
+            border-color: rgba(57,217,159,0.28);
+        }
+        .tag-status-failed {
+            color: #ffd0d8;
+            background: var(--error-soft);
+            border-color: rgba(255,95,122,0.28);
+        }
+        .tag-status-neutral {
+            color: var(--muted);
+        }
+
+        .security-section {
+            overflow: hidden;
+        }
+        .security-header {
+            width: 100%;
+            border: 0;
+            background: transparent;
+            color: var(--text);
+            cursor: pointer;
+        }
+        .security-risk-badge {
+            padding: 5px 9px;
+            border-radius: 999px;
+            font-size: 0.72rem;
+            font-weight: 800;
+            color: #07080d;
+        }
+        .security-summary {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1px;
+            background: var(--line-soft);
+            text-align: center;
+            border-bottom: 1px solid var(--line-soft);
+        }
+        .summary-item {
+            background: rgba(7,8,13,0.48);
+            padding: 12px 8px;
+        }
+        .summary-item .count {
+            font-size: 1.2rem;
+            font-weight: 800;
+        }
+        .summary-item .label {
+            font-size: 0.66rem;
+            text-transform: uppercase;
+            color: var(--faint);
+            letter-spacing: 0.08em;
+        }
+        .count-Critical { color: var(--error); }
+        .count-High { color: #ff9d66; }
+        .count-Medium { color: var(--warning); }
+        .count-Low { color: var(--blue); }
+
+        .vuln-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            padding: 14px;
+        }
+        .vuln-card {
+            background: rgba(7,8,13,0.52);
+            border: 1px solid var(--line-soft);
+            border-left-width: 4px;
+            border-radius: 8px;
+            padding: 14px;
+        }
+        .vuln-card-title {
+            font-weight: 800;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .vuln-card-desc {
+            color: var(--muted);
+            font-size: 0.88rem;
+            margin: 10px 0;
+        }
+        .vuln-card-evidence {
+            background: #07080d;
+            padding: 10px;
+            border-radius: 4px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.74rem;
+            white-space: pre-wrap;
+            word-break: break-all;
+            margin: 10px 0;
+            border: 1px solid var(--line-soft);
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .vuln-card-remediation {
+            font-size: 0.88rem;
+            color: #bff7df;
+        }
+        pre { margin: 0; }
+
+        @media (max-width: 1040px) {
+            .mission-brief,
+            .test-details-grid {
+                grid-template-columns: 1fr;
+            }
+            .status-card {
+                width: 100%;
+            }
+            .brief-grid {
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
+        }
+        @media (max-width: 680px) {
+            .container {
+                padding: 20px;
+            }
+            .mission-title {
+                font-size: 2.3rem;
+            }
+            .brief-grid {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+            .test-header {
+                align-items: flex-start;
+            }
+            .test-details-grid {
+                gap: 16px;
+            }
+            .step-header {
+                grid-template-columns: 14px minmax(0, 1fr);
+            }
+            .step-duration {
+                grid-column: 2;
+                justify-self: start;
+                padding-top: 0;
+            }
+            .evidence-thumbs,
+            .security-summary {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="mission-brief">
+            <div>
+                <div class="brand-row">
+                    <span class="brand-mark ${brandLogo ? 'has-logo' : ''}" aria-hidden="true">
+                        ${brandLogo ? `<img src="${brandLogo}" alt="">` : ''}
+                    </span>
+                    <div>
+                        <div class="brand-name">Arcality QA Engine</div>
+                        <div class="brand-subtitle">Consola de diagnostico autonomo</div>
+                    </div>
+                </div>
+                <h1 class="mission-title">${reportTitle}</h1>
+                <p class="mission-copy">${reportSummary}</p>
+            </div>
+            <div class="status-card ${reportTone}">
+                <div class="status-eyebrow">
+                    <span>Estado general</span>
+                    <span class="status-pill">${reportStatus}</span>
+                </div>
+                <div class="status-title">${reportStatus}</div>
+                <p class="status-summary">Inicio ${this.startTime.toLocaleString()} | Engine ${this.getEngineVersion()}</p>
+            </div>
+        </header>
+
+        <div class="brief-grid" aria-label="Resumen de ejecucion">
+            <div class="brief-metric"><span class="metric-value">${stats.total}</span><span class="metric-label">Misiones</span></div>
+            <div class="brief-metric"><span class="metric-value val-passed">${stats.passed}</span><span class="metric-label">Exitosas</span></div>
+            <div class="brief-metric"><span class="metric-value val-failed">${stats.failed}</span><span class="metric-label">Errores</span></div>
+            <div class="brief-metric"><span class="metric-value val-flaky">${stats.flaky}</span><span class="metric-label">Reintentos</span></div>
+            <div class="brief-metric"><span class="metric-value val-blue">${evidenceCount}</span><span class="metric-label">Evidencias</span></div>
+            <div class="brief-metric"><span class="metric-value">${this.formatDuration(this.totalDuration)}</span><span class="metric-label">Duracion</span></div>
+        </div>
+
+        <div class="test-list">
+            ${this.results.map((r, i) => {
+            const tone = this.getStatusTone(r.result.status);
+            const statusClass = `status-${tone}`;
+            const projectName = r.test.parent.project()?.name || 'default';
+            const isOpen = this.results.length === 1 || tone === 'failed' || i === 0;
+            const successSummary = r.attachments.find(a => a.name === 'success_summary');
+            const successText = this.getAttachmentText(successSummary);
+            const bugClassificationAtt = r.attachments.find(a => a.name === 'bug_classification');
+            const bugClassification = (this.getAttachmentText(bugClassificationAtt) || '').trim();
+            const evidenceHtml = this.renderVisualEvidence(r.attachments);
+            const contextHtml = this.renderTextAttachmentSection(r.attachments, 'qa_context_summary', 'Contexto QA aplicado');
+            const securityHtml = this._renderSecuritySection(r.attachments, i);
+            const databasePreviewHtml = this.renderDatabasePreviewSection(r.attachments);
+            const databaseHtml = this.renderDatabaseValidationSection(r.attachments);
+            return `
+                <div class="test-entry ${statusClass}">
+                    <button class="test-header" type="button" onclick="toggleDetails('details-${i}', this)" aria-expanded="${isOpen ? 'true' : 'false'}">
+                        <div class="test-info">
+                            <span class="status-dot"></span>
+                            <div>
+                                <div class="test-name">${this.escapeHtml(r.test.title)}</div>
+                                <div class="test-meta">
+                                    <span class="tag tag-status-${tone}">${this.getStatusLabel(r.result.status)}</span>
+                                    <span class="tag tag-project">${this.escapeHtml(projectName)}</span>
+                                    ${bugClassification ? `<span class="tag tag-bug">${this.escapeHtml(bugClassification)}</span>` : ''}
+                                    ${r.result.retry > 0 ? `<span class="tag tag-retry">Retry #${r.result.retry}</span>` : ''}
+                                    <span class="tag">${this.formatDuration(r.result.duration)}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <span class="test-chevron" aria-hidden="true">v</span>
+                    </button>
+
+                    <div class="test-details" id="details-${i}" style="display: ${isOpen ? 'block' : 'none'};">
+                        <div class="test-details-grid">
+                            <main class="primary-column">
+                                ${r.result.status === 'passed' && successText ? `
+                                    <div class="outcome-block success">
+                                        <span class="outcome-label">Resultado</span>
+                                        <p class="success-block">${this.escapeHtml(successText)}</p>
+                                    </div>
+                                ` : ''}
+
+                                ${r.result.error && bugClassification ? `
+                                    <div class="outcome-block error">
+                                        <span class="outcome-label">Clasificacion AI</span>
+                                        <pre class="error-block">${this.escapeHtml(bugClassification)}</pre>
+                                    </div>
+                                ` : ''}
+
+                                ${r.result.error ? `
+                                    <div class="outcome-block error">
+                                        <span class="outcome-label">Diagnostico del bloqueo</span>
+                                        <pre class="error-block">${this.escapeHtml(r.result.error.message || 'Unknown Failure')}</pre>
+                                    </div>
+                                ` : ''}
+
+                                <section class="steps-section timeline-wrap">
+                                    <span class="section-title">Proceso cognitivo del agente</span>
+                                    <div class="steps-container">
+                                        ${r.stepsHtml || '<p style="opacity:0.5; padding: 0 18px;">No hay pasos registrados.</p>'}
+                                    </div>
+                                </section>
+                            </main>
+
+                            <aside class="context-column">
+                                ${evidenceHtml}
+                                ${contextHtml}
+                                ${databasePreviewHtml}
+                                ${databaseHtml}
+                                ${securityHtml}
+                                <section class="side-panel">
+                                    <div class="panel-header">
+                                        <span class="panel-title">Metadata</span>
+                                    </div>
+                                    <div class="panel-body">
+                                        <dl class="metadata-list">
+                                            <div class="metadata-row"><dt>Proyecto</dt><dd>${this.escapeHtml(projectName)}</dd></div>
+                                            <div class="metadata-row"><dt>Estado</dt><dd>${this.getStatusLabel(r.result.status)}</dd></div>
+                                            <div class="metadata-row"><dt>Duracion</dt><dd>${this.formatDuration(r.result.duration)}</dd></div>
+                                            <div class="metadata-row"><dt>Retry</dt><dd>${r.result.retry}</dd></div>
+                                        </dl>
+                                    </div>
+                                </section>
+                            </aside>
+                        </div>
+                    </div>
+                </div>
+                `;
+        }).join('')}
+        </div>
+
+        <footer>
+            ARCALITY ENGINE v${this.getEngineVersion()} | ${generatedAt.toISOString()} | GENERATED FOR ARCADIAL
+        </footer>
+    </div>
+
+    <script>
+        function toggleDetails(id, trigger) {
+            const el = document.getElementById(id);
+            if (!el) return;
+            const isHidden = el.style.display === 'none' || el.style.display === '';
+            el.style.display = isHidden ? 'block' : 'none';
+            if (trigger) trigger.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
+        }
+    </script>
+</body>
+</html>
+        `;
+    }
+    renderVisualEvidence(attachments) {
+        const media = attachments.filter(att => att.path && (att.contentType.startsWith('image/') || att.contentType.startsWith('video/')));
+        if (media.length === 0)
+            return '';
+        const primary = media[0];
+        const primaryPath = this.escapeHtml(primary.path);
+        const primaryName = this.escapeHtml(primary.name);
+        const primaryMedia = primary.contentType.startsWith('image/')
+            ? `<img src="${primaryPath}" alt="${primaryName}" onclick="window.open(this.src)">`
+            : `<video controls src="${primaryPath}"></video>`;
+        return `
+            <section class="side-panel evidence-panel">
+                <div class="panel-header">
+                    <span class="panel-title">Evidencia visual</span>
+                    <span class="panel-kicker">${media.length} archivo${media.length === 1 ? '' : 's'}</span>
+                </div>
+                <div class="evidence-hero">
+                    ${primaryMedia}
+                    <a class="evidence-link" href="${primaryPath}" target="_blank" rel="noreferrer">
+                        <span>${primaryName}</span>
+                        <span>Abrir</span>
+                    </a>
+                </div>
+                ${media.length > 1 ? `
+                    <div class="evidence-thumbs">
+                        ${media.map(att => {
+            const mediaPath = this.escapeHtml(att.path);
+            const mediaName = this.escapeHtml(att.name);
+            const thumb = att.contentType.startsWith('image/')
+                ? `<img src="${mediaPath}" alt="${mediaName}">`
+                : `<video src="${mediaPath}"></video>`;
+            return `
+                                <a class="evidence-thumb" href="${mediaPath}" target="_blank" rel="noreferrer">
+                                    ${thumb}
+                                    <span class="thumb-name">${mediaName}</span>
+                                </a>
+                            `;
+        }).join('')}
+                    </div>
+                ` : ''}
+            </section>
+        `;
+    }
+    getAttachmentText(att) {
+        if (!att)
+            return null;
+        if (att.body)
+            return att.body.toString();
+        if (att.path) {
+            const actualPath = path_1.default.isAbsolute(att.path) ? att.path : path_1.default.join(this.outputDir, att.path);
+            if (fs_1.default.existsSync(actualPath)) {
+                return fs_1.default.readFileSync(actualPath, 'utf8');
+            }
+        }
+        return null;
+    }
+    renderTextAttachmentSection(attachments, attachmentName, title) {
+        const attachment = attachments.find(att => att.name === attachmentName);
+        const text = this.getAttachmentText(attachment);
+        if (!text)
+            return '';
+        return `
+            <section class="side-panel">
+                <div class="panel-header">
+                    <span class="panel-title">${this.escapeHtml(title)}</span>
+                </div>
+                <div class="panel-body">
+                    <pre class="info-block">${this.escapeHtml(text)}</pre>
+                </div>
+            </section>
+        `;
+    }
+    renderDatabasePreviewSection(attachments) {
+        const previews = [];
+        const previewAtts = attachments.filter(a => a.name === 'database_validation_preview');
+        for (const previewAtt of previewAtts) {
+            const text = this.getAttachmentText(previewAtt);
+            if (!text)
+                continue;
+            try {
+                previews.push(JSON.parse(text));
+            }
+            catch (e) { }
+        }
+        if (previews.length === 0)
+            return '';
+        const preview = previews[previews.length - 1];
+        const provider = this.escapeHtml(String(preview.provider || 'unknown'));
+        const queryId = this.escapeHtml(String(preview.query_id || ''));
+        const rowCount = Number(preview.row_count || 0);
+        const sampleRows = this.escapeHtml(JSON.stringify(preview.rows_sample || [], null, 2));
+        return `
+            <section class="side-panel">
+                <div class="panel-header">
+                    <span class="panel-title">Preview BD</span>
+                    <span class="panel-kicker">${provider}</span>
+                </div>
+                <div class="panel-body">
+                    <dl class="metadata-list">
+                        <div class="metadata-row"><dt>Query ID</dt><dd>${queryId || 'N/A'}</dd></div>
+                        <div class="metadata-row"><dt>Filas</dt><dd>${rowCount}</dd></div>
+                    </dl>
+                    <pre class="info-block">${sampleRows}</pre>
+                </div>
+            </section>
+        `;
+    }
+    renderDatabaseValidationSection(attachments) {
+        const reports = [];
+        const reportAtts = attachments.filter(a => a.name === 'database_validation_report');
+        for (const reportAtt of reportAtts) {
+            const text = this.getAttachmentText(reportAtt);
+            if (!text)
+                continue;
+            try {
+                reports.push(JSON.parse(text));
+            }
+            catch (e) { }
+        }
+        if (reports.length === 0)
+            return '';
+        const report = reports[reports.length - 1];
+        const summary = report.summary || { total: 0, passed: 0, failed: 0 };
+        const passed = report.passed === true;
+        const statusText = passed ? 'PASS' : 'FAIL';
+        const statusColor = passed ? 'var(--success)' : 'var(--error)';
+        const validations = Array.isArray(report.validations) ? report.validations : [];
+        const validationRows = validations.map((validation) => {
+            const validationPassed = validation.passed === true;
+            const checks = Array.isArray(validation.checks) ? validation.checks : [];
+            return `
+                <div class="metadata-row"><dt>${this.escapeHtml(validation.name || validation.query_id || 'validacion')}</dt><dd style="color:${validationPassed ? 'var(--success)' : 'var(--error)'}">${validationPassed ? 'PASS' : 'FAIL'}</dd></div>
+                ${checks.slice(0, 6).map((check) => `
+                    <div class="metadata-row"><dt>${this.escapeHtml(check.type || 'check')}${check.field ? `.${this.escapeHtml(check.field)}` : ''}</dt><dd>${check.passed ? 'OK' : 'Mismatch'}</dd></div>
+                `).join('')}
+            `;
+        }).join('');
+        return `
+            <section class="side-panel">
+                <div class="panel-header">
+                    <span class="panel-title">Validacion BD</span>
+                    <span class="panel-kicker" style="color:${statusColor}">${statusText}</span>
+                </div>
+                <div class="panel-body">
+                    <dl class="metadata-list">
+                        <div class="metadata-row"><dt>Total</dt><dd>${summary.total || 0}</dd></div>
+                        <div class="metadata-row"><dt>Exitosas</dt><dd>${summary.passed || 0}</dd></div>
+                        <div class="metadata-row"><dt>Fallidas</dt><dd>${summary.failed || 0}</dd></div>
+                        ${validationRows}
+                    </dl>
+                    <pre class="info-block">${this.escapeHtml(JSON.stringify(report, null, 2))}</pre>
+                </div>
+            </section>
+        `;
+    }
+    _renderSecuritySection(attachments, index) {
+        let vulnerabilities = [];
+        const reportAtt = attachments.find(a => a.name === 'security_report');
+        if (reportAtt) {
+            const text = this.getAttachmentText(reportAtt);
+            if (text) {
+                try {
+                    const parsed = JSON.parse(text);
+                    if (Array.isArray(parsed))
+                        vulnerabilities.push(...parsed);
+                }
+                catch (e) { }
+            }
+        }
+        const findingAtts = attachments.filter(a => a.name === 'security_finding');
+        for (const findingAtt of findingAtts) {
+            const text = this.getAttachmentText(findingAtt);
+            if (text) {
+                try {
+                    const parsed = JSON.parse(text);
+                    vulnerabilities.push(parsed);
+                }
+                catch (e) { }
+            }
+        }
+        if (vulnerabilities.length === 0)
+            return '';
+        const severityOrder = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3, 'Info': 4 };
+        const severityCounts = { 'Critical': 0, 'High': 0, 'Medium': 0, 'Low': 0, 'Info': 0 };
+        let worstSeverity = 'Info';
+        const normalizeSeverity = (value) => {
+            const severity = String(value || 'Info');
+            return severityCounts[severity] !== undefined ? severity : 'Info';
+        };
+        vulnerabilities.forEach(v => {
+            const severity = normalizeSeverity(v.severity);
+            severityCounts[severity]++;
+            if (severityOrder[severity] < severityOrder[worstSeverity]) {
+                worstSeverity = severity;
+            }
+        });
+        const getSeverityColor = (sev) => {
+            switch (sev) {
+                case 'Critical': return 'var(--error)';
+                case 'High': return '#ff9d66';
+                case 'Medium': return 'var(--warning)';
+                case 'Low': return 'var(--blue)';
+                case 'Info': return 'var(--faint)';
+            }
+        };
+        const riskColor = getSeverityColor(worstSeverity);
+        return `
+            <section class="side-panel security-section">
+                <button type="button" class="security-header panel-header" onclick="toggleDetails('security-details-${index}', this)" aria-expanded="false">
+                    <span class="panel-title">Evaluacion de seguridad</span>
+                    <span class="security-risk-badge" style="background-color: ${riskColor};">${worstSeverity}</span>
+                </button>
+                <div class="security-summary">
+                    <div class="summary-item">
+                        <div class="count count-Critical">${severityCounts.Critical}</div>
+                        <div class="label">Critical</div>
+                    </div>
+                    <div class="summary-item">
+                        <div class="count count-High">${severityCounts.High}</div>
+                        <div class="label">High</div>
+                    </div>
+                    <div class="summary-item">
+                        <div class="count count-Medium">${severityCounts.Medium}</div>
+                        <div class="label">Medium</div>
+                    </div>
+                    <div class="summary-item">
+                        <div class="count count-Low">${severityCounts.Low}</div>
+                        <div class="label">Low</div>
+                    </div>
+                </div>
+                <div class="security-details" id="security-details-${index}" style="display: none;">
+                    <div class="vuln-list">
+                        ${vulnerabilities.map(v => {
+            const sev = normalizeSeverity(v.severity);
+            const cardColor = getSeverityColor(sev);
+            return `
+                                <div class="vuln-card" style="border-left-color: ${cardColor};">
+                                    <div class="vuln-card-title">
+                                        <span class="tag" style="background-color: ${cardColor}20; color: ${cardColor};">${sev}</span>
+                                        <span>${this.escapeHtml(v.category)} ${v.subcategory ? `<span style="opacity:0.7">- ${this.escapeHtml(v.subcategory)}</span>` : ''}</span>
+                                    </div>
+                                    <div style="font-size: 0.78rem; opacity: 0.82; margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 10px;">
+                                        ${v.type ? `<span><strong style="color:var(--brand);">Type:</strong> ${this.escapeHtml(v.type)}</span>` : ''}
+                                        ${v.confidence ? `<span><strong>Confidence:</strong> ${this.escapeHtml(v.confidence)}</span>` : ''}
+                                        ${v.exploitability ? `<span><strong>Exploitability:</strong> ${this.escapeHtml(v.exploitability)}</span>` : ''}
+                                    </div>
+                                    <p class="vuln-card-desc">${this.escapeHtml(v.description)}</p>
+                                    ${v.impact ? `<p class="vuln-card-desc" style="color:#ffd89a;"><strong>Impact:</strong> ${this.escapeHtml(v.impact)}</p>` : ''}
+
+                                    <div class="vuln-card-evidence">
+                                        <strong>Evidence:</strong>
+                                        <pre>${this.escapeHtml(JSON.stringify(v.evidence, null, 2))}</pre>
+                                    </div>
+
+                                    ${v.reproductionSteps && v.reproductionSteps.length > 0 ? `
+                                    <div style="margin: 10px 0; background: rgba(0,0,0,0.18); padding: 10px; border-radius: 6px; border-left: 2px solid ${cardColor}80;">
+                                        <strong style="font-size: 0.82rem; color: var(--muted);">Reproduction Steps:</strong>
+                                        <ol style="margin: 5px 0 0 20px; font-size: 0.82rem; color: var(--text);">
+                                            ${v.reproductionSteps.map((s) => `<li>${this.escapeHtml(s)}</li>`).join('')}
+                                        </ol>
+                                    </div>` : ''}
+
+                                    <div class="vuln-card-remediation">
+                                        <strong>Remediation:</strong> ${this.escapeHtml(v.remediation)}
+                                    </div>
+
+                                    ${v.classification ? `
+                                    <div style="font-size: 0.72rem; opacity: 0.55; margin-top: 12px; display: flex; gap: 15px; font-family: 'JetBrains Mono', monospace; flex-wrap: wrap;">
+                                        ${v.classification.owaspTop10 ? `<span>[OWASP: ${this.escapeHtml(v.classification.owaspTop10)}]</span>` : ''}
+                                        ${v.classification.cwe ? `<span>[CWE: ${this.escapeHtml(v.classification.cwe)}]</span>` : ''}
+                                    </div>` : ''}
+                                </div>
+                            `;
+        }).join('')}
+                    </div>
+                </div>
+            </section>
+        `;
+    }
+    escapeHtml(unsafe) {
+        if (!unsafe)
+            return '';
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+}
+exports.default = ArcalityReporter;