@arcadialdev/arcality 2.4.29 → 2.4.30

package/tests/_helpers/ArcalityReporter.ts

@@ -1,733 +0,0 @@
-import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult, TestStep } from '@playwright/test/reporter';
-import fs from 'fs';
-import path from 'path';
-
-interface EnhancedResult {
-    test: TestCase;
-    result: TestResult;
-    stepsHtml: string;
-    attachments: { name: string, path?: string, contentType: string, body?: Buffer }[];
-}
-
-class ArcalityReporter implements Reporter {
-    private outputDir: string;
-    private results: EnhancedResult[] = [];
-    private totalDuration: number = 0;
-    private startTime: Date = new Date();
-
-    constructor(options: { outputDir?: string } = {}) {
-        this.outputDir = options.outputDir || 'arcality-report';
-    }
-
-    onBegin(config: FullConfig, suite: Suite) {
-        // Clean output directory to avoid stale reports/attachments
-        if (fs.existsSync(this.outputDir)) {
-            try {
-                fs.rmSync(this.outputDir, { recursive: true, force: true });
-                console.log(`🧹 Cleaned old report data at: ${this.outputDir}`);
-            } catch (err: any) {
-                console.warn(`⚠️ Could not fully clean report dir: ${err.message}`);
-            }
-        }
-        
-        if (!fs.existsSync(this.outputDir)) {
-            fs.mkdirSync(this.outputDir, { recursive: true });
-        }
-        this.startTime = new Date();
-        console.log(`🚀 Arcality Mission started at ${this.startTime.toLocaleTimeString()}`);
-    }
-
-    onTestEnd(test: TestCase, result: TestResult) {
-        // Collect steps with recursion
-        const stepsHtml = result.steps.map(step => this.renderStep(step, 0)).join('');
-
-        // Handle attachments: copy to report dir
-        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.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}${extension}`;
-            const attachmentsDir = path.join(this.outputDir, 'attachments');
-            const destPath = path.join(attachmentsDir, fileName);
-
-            if (!fs.existsSync(attachmentsDir)) {
-                fs.mkdirSync(attachmentsDir, { recursive: true });
-            }
-
-            try {
-                if (att.path && fs.existsSync(att.path)) {
-                    // Si ya existe el archivo físico, lo copiamos
-                    fs.copyFileSync(att.path, destPath);
-                } else if (att.body) {
-                    // Si viene como Buffer (evidencia del agente), lo guardamos
-                    fs.writeFileSync(destPath, att.body);
-                }
-                return { ...att, path: `attachments/${fileName}` };
-            } catch (e) {
-                console.error(`Failed to process attachment ${att.name}:`, e);
-                return att;
-            }
-        });
-
-        if (result.status === 'failed' || result.error) {
-            console.log(`
-❌ [TEST ENGINE FAILURE] ${test.title} failed:`);
-            console.log(`${result.error?.message || result.error?.stack || 'Unknown error'}
-`);
-            if (result.error?.stack) {
-                console.log(result.error.stack);
-            }
-        }
-
-        this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
-    }
-
-    async onEnd(result: FullResult) {
-        this.totalDuration = result.duration;
-        const htmlContent = this.generateHtml();
-        const reportPath = path.join(this.outputDir, 'index.html');
-        fs.writeFileSync(reportPath, htmlContent);
-        console.log(`✨ Arcality Mission Report generated at: ${reportPath}`);
-    }
-
-    private renderStep(step: TestStep, depth: number): string {
-        // Humanize: Hide internal Playwright hooks to only show Agent decisions
-        if (step.category === 'hook' || step.category === 'fixture') return '';
-
-        const padding = depth * 16;
-        const statusClass = step.error ? 'step-error' : 'step-passed';
-        const icon = step.error ? '✕' : '✓';
-        const duration = step.duration >= 0 ? `<span class="step-duration">${step.duration}ms</span>` : '';
-
-        let title = this.escapeHtml(step.title);
-        // Highlight common playwright actions
-        title = title.replace(/^(click|fill|navigate|wait|expect|goto|press)/i, '<span class="step-action">$1</span>');
-
-        let children = '';
-        if (step.steps && step.steps.length > 0) {
-            children = `<div class="step-children">${step.steps.map(s => this.renderStep(s, depth + 1)).join('')}</div>`;
-        }
-
-        const isExpandable = step.steps && step.steps.length > 0;
-        const expandableAttr = isExpandable ? 'data-expandable="true"' : '';
-
-        return `
-            <div class="step-wrapper ${statusClass}" style="margin-left: ${padding}px" ${expandableAttr}>
-                <div class="step-header">
-                    <span class="step-icon">${icon}</span>
-                    <span class="step-title">${title}</span>
-                    ${duration}
-                </div>
-                ${children}
-            </div>
-        `;
-    }
-
-    private getEngineVersion(): string {
-        try {
-            const packageJsonPath = path.join(process.cwd(), 'package.json');
-            if (fs.existsSync(packageJsonPath)) {
-                const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-                return pkg.version || '2.2.0';
-            }
-        } catch (e) {
-            console.error('Error reading package.json version:', e);
-        }
-        return '2.2.0';
-    }
-
-    private generateHtml(): string {
-        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
-        };
-
-        return `
-<!DOCTYPE html>
-<html lang="en">
-<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-deep: #020617;
-            --bg-card: #0f172a;
-            --bg-hover: #1e293b;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --primary: #6366f1;
-            --success: #10b981;
-            --error: #f43f5e;
-            --warning: #f59e0b;
-            --border: #1e293b;
-            --accent: #c084fc;
-        }
-
-        * { box-sizing: border-box; }
-        body {
-            font-family: 'Plus Jakarta Sans', sans-serif;
-            background-color: var(--bg-deep);
-            color: var(--text-main);
-            margin: 0;
-            line-height: 1.6;
-        }
-
-        .container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
-
-        /* HEADER */
-        .main-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 3rem;
-            padding-bottom: 2rem;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .brand-section h1 {
-            font-size: 2.5rem;
-            font-weight: 800;
-            margin: 0;
-            background: linear-gradient(to right, #818cf8, #c084fc);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .mission-id {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 3px;
-        }
-
-        /* DASHBOARD STATS */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 3rem;
-        }
-        .stat-card {
-            background: var(--bg-card);
-            padding: 1.5rem;
-            border-radius: 16px;
-            border: 1px solid var(--border);
-            text-align: center;
-        }
-        .stat-value { font-size: 2rem; font-weight: 800; display: block; }
-        .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
-        
-        .val-total { color: var(--text-main); }
-        .val-passed { color: var(--success); }
-        .val-failed { color: var(--error); }
-        .val-skipped { color: var(--text-muted); }
-        .val-flaky { color: var(--warning); }
-
-        /* TEST LIST */
-        .test-entry {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 20px;
-            margin-bottom: 2rem;
-            overflow: hidden;
-            transition: transform 0.2s;
-        }
-        .test-entry:hover { border-color: var(--primary); }
-
-        .test-header {
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            background: rgba(255,255,255,0.02);
-        }
-        .test-info { display: flex; align-items: center; gap: 1rem; }
-        .status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
-        .status-passed .status-dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
-        .status-failed .status-dot { background: var(--error); box-shadow: 0 0 10px var(--error); }
-        .status-skipped .status-dot { background: var(--text-muted); }
-
-        .test-name { font-weight: 700; font-size: 1.1rem; }
-        .test-meta { font-size: 0.8rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
-
-        .test-details { padding: 0 2rem 2rem; }
-
-        /* ERROR BLOCK */
-        .error-block {
-            background: rgba(244, 63, 94, 0.1);
-            border-left: 4px solid var(--error);
-            padding: 1.5rem;
-            border-radius: 8px;
-            margin: 1rem 0;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.9rem;
-            color: #fda4af;
-            white-space: pre-wrap;
-        }
-
-        /* SUCCESS BLOCK */
-        .success-block {
-            background: rgba(16, 185, 129, 0.1);
-            border-left: 4px solid var(--success);
-            padding: 1.2rem;
-            border-radius: 12px;
-            margin: 1rem 0;
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: #6ee7b7;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        .success-block::before {
-            content: "✨";
-            font-size: 1.4rem;
-        }
-
-        /* STEPS UI */
-        .steps-section { margin-top: 2rem; }
-        .section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 1rem; display: block; }
-        
-        .step-wrapper {
-            border-left: 1px solid var(--border);
-            padding: 8px 16px;
-            position: relative;
-        }
-        .step-header { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; }
-        .step-icon { width: 16px; font-size: 0.8rem; opacity: 0.7; }
-        .step-action { color: var(--primary); font-weight: 700; }
-        .step-duration { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
-        .step-error { border-left-color: var(--error); color: #fb7185; }
-        .step-error .step-icon { color: var(--error); }
-
-        /* ATTACHMENTS (Screenshots, Videos) */
-        .attachments-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 1.5rem;
-            margin-top: 2rem;
-        }
-        .attachment-item {
-            background: var(--bg-deep);
-            border-radius: 12px;
-            overflow: hidden;
-            border: 1px solid var(--border);
-        }
-        .attachment-item img, .attachment-item video {
-            width: 100%;
-            height: 180px;
-            object-fit: cover;
-            display: block;
-            cursor: zoom-in;
-        }
-        .att-label {
-            padding: 0.75rem;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-align: center;
-            background: rgba(255,255,255,0.05);
-            display: block;
-            text-decoration: none;
-            color: var(--text-muted);
-        }
-        .att-label:hover { color: var(--text-main); }
-        
-        .btn-trace {
-            background: var(--primary);
-            color: white;
-            padding: 6px 12px;
-            border-radius: 6px;
-            font-size: 0.7rem;
-            font-weight: 700;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        footer {
-            margin-top: 5rem;
-            text-align: center;
-            padding: 2rem;
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            border-top: 1px solid var(--border);
-        }
-
-        /* UTILS */
-        .tag { padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
-        .tag-project { background: rgba(192, 132, 252, 0.2); color: var(--accent); }
-        .tag-retry { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
-        
-        /* SECURITY REPORT SECTION */
-        .security-section {
-            margin: 2rem 0;
-            background: var(--bg-card);
-            border-radius: 16px;
-            overflow: hidden;
-            border: 1px solid #4a4a4a
-        }
-        .security-header {
-            padding: 1rem 1.5rem;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.0) 70%);
-        }
-        .security-header:hover {
-            background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05) 70%);
-        }
-        .security-header h3 {
-            margin: 0;
-            font-size: 1.2rem;
-            color: var(--warning);
-            font-weight: 700;
-        }
-        .security-risk-badge {
-            padding: 4px 10px;
-            border-radius: 6px;
-            font-size: 0.8rem;
-            font-weight: 800;
-            color: white;
-            margin-left: auto;
-        }
-        .security-details {
-            padding: 1.5rem;
-            background: #0c1322;
-        }
-        .security-summary {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 1rem;
-            margin-bottom: 2rem;
-            padding-bottom: 1.5rem;
-            border-bottom: 1px solid var(--border);
-            text-align: center;
-        }
-        .summary-item .count {
-            font-size: 1.5rem;
-            font-weight: 800;
-        }
-        .summary-item .label {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            color: var(--text-muted);
-        }
-        .count-Critical { color: var(--error); }
-        .count-High { color: #fb923c; }
-        .count-Medium { color: var(--warning); }
-        .count-Low { color: #38bdf8; }
-
-        .vuln-list { display: flex; flex-direction: column; gap: 1rem; }
-        .vuln-card {
-            background: var(--bg-deep);
-            border: 1px solid var(--border);
-            border-left-width: 4px;
-            border-radius: 8px;
-            padding: 1.5rem;
-        }
-        .vuln-card-title { font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 10px;}
-        .vuln-card-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
-        .vuln-card-evidence {
-            background: #020617;
-            padding: 0.75rem;
-            border-radius: 4px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.8rem;
-            white-space: pre-wrap;
-            word-break: break-all;
-            margin-bottom: 1rem;
-            border: 1px solid var(--border);
-            max-height: 200px;
-            overflow-y: auto;
-        }
-        .vuln-card-remediation { font-size: 0.9rem; color: var(--success); }
-        pre { margin: 0; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="main-header">
-            <div class="brand-section">
-                <span class="mission-id">Mission Alpha System</span>
-                <h1>Arcality Mission Report</h1>
-                <p style="color: var(--text-muted)">Testing Intelligence & Diagnostics Console</p>
-            </div>
-            <div style="text-align: right">
-                <div class="meta-item" style="color: var(--accent); font-weight: 700;">${this.startTime.toLocaleDateString()}</div>
-                <div class="meta-item" style="font-family: 'JetBrains Mono'; font-size: 0.8rem;">ENGINE VERSION ${this.getEngineVersion()}</div>
-            </div>
-        </div>
-
-        <div class="stats-grid">
-            <div class="stat-card"><span class="stat-value val-total">${stats.total}</span><span class="stat-label">Total Missions</span></div>
-            <div class="stat-card"><span class="stat-value val-passed">${stats.passed}</span><span class="stat-label">Successful</span></div>
-            <div class="stat-card"><span class="stat-value val-failed">${stats.failed}</span><span class="stat-label">Fatal Errors</span></div>
-            <div class="stat-card"><span class="stat-value val-flaky">${stats.flaky}</span><span class="stat-label">Flaky Tests</span></div>
-            <div class="stat-card"><span class="stat-value val-total">${(this.totalDuration / 1000).toFixed(2)}s</span><span class="stat-label">Total Duration</span></div>
-        </div>
-
-        <div class="test-list">
-            ${this.results.map((r, i) => {
-            const statusClass = `status-${r.result.status}`;
-            const projectName = r.test.parent.project()?.name || 'default';
-            
-            return `
-                <div class="test-entry ${statusClass}">
-                    <div class="test-header" onclick="toggleDetails('details-${i}')">
-                        <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-project">${projectName}</span>
-                                    ${r.result.retry > 0 ? `<span class="tag tag-retry">Retry #${r.result.retry}</span>` : ''}
-                                    <span>${(r.result.duration / 1000).toFixed(2)}s</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div style="display:flex; gap: 10px; align-items: center;">
-                            <span style="opacity:0.5; font-size: 1.2rem">▼</span>
-                        </div>
-                    </div>
-                    
-                    <div class="test-details" id="details-${i}" style="display: none;">
-                        ${r.result.status === 'passed' ? (() => {
-                            const successSummary = r.attachments.find(a => a.name === 'success_summary');
-                            const text = this.getAttachmentText(successSummary);
-                            return text ? `<div class="success-block">${this.escapeHtml(text)}</div>` : '';
-                        })() : ''}
-
-                        ${r.result.error ? `
-                            <div class="steps-section">
-                                <span class="section-title">Analysis of the Obstacle</span>
-                                <div class="error-block">${this.escapeHtml(r.result.error.message || 'Unknown Failure')}</div>
-                            </div>
-                        ` : ''}
-                        
-                        ${this._renderSecuritySection(r.attachments, i)}
-
-                        <div class="steps-section">
-                            <span class="section-title">🧠 Agent Cognitive Process</span>
-                            <div class="steps-container">
-                                ${r.stepsHtml || '<p style="opacity:0.5">No steps recorded.</p>'}
-                            </div>
-                        </div>
-
-                        ${r.attachments.length > 0 ? `
-                        <div class="steps-section">
-                            <span class="section-title">Visual Evidence</span>
-                            <div class="attachments-grid">
-                                ${r.attachments.map(att => {
-                                    if (att.contentType.startsWith('image/')) {
-                                        return `
-                                            <div class="attachment-item">
-                                                <img src="${att.path}" alt="${att.name}" onclick="window.open('${att.path}')">
-                                                <a href="${att.path}" target="_blank" class="att-label">${att.name}</a>
-                                            </div>
-                                        `;
-                                    }
-                                    if (att.contentType.startsWith('video/')) {
-                                        return `
-                                            <div class="attachment-item">
-                                                <video controls src="${att.path}"></video>
-                                                <a href="${att.path}" target="_blank" class="att-label">${att.name}</a>
-                                            </div>
-                                        `;
-                                    }
-                                    return '';
-                                }).join('')}
-                            </div>
-                        </div>
-                        ` : ''}
-                    </div>
-                </div>
-                `;
-            }).join('')}
-        </div>
-
-        <footer>
-            ARCALITY ENGINE v${this.getEngineVersion()} • SYSTEM TIME [${new Date().toISOString()}] • GENERATED FOR ARCADIAL
-        </footer>
-    </div>
-
-    <script>
-        function toggleDetails(id) {
-            const el = document.getElementById(id);
-            if (el) {
-                const isSecurityDetails = id.startsWith('security-details');
-                if (isSecurityDetails) {
-                     // Independent toggle for security section
-                    el.style.display = (el.style.display === 'none') ? 'block' : 'none';
-                } else {
-                    // Main test details toggle
-                    el.style.display = (el.style.display === 'none' || el.style.display === '') ? 'block' : 'none';
-                }
-            }
-        }
-    </script>
-</body>
-</html>
-        `;
-    }
-
-    private getAttachmentText(att: { body?: Buffer, path?: string } | undefined): string | null {
-        if (!att) return null;
-        if (att.body) return att.body.toString();
-        if (att.path) {
-            const actualPath = path.isAbsolute(att.path) ? att.path : path.join(this.outputDir, att.path);
-            if (fs.existsSync(actualPath)) {
-                return fs.readFileSync(actualPath, 'utf8');
-            }
-        }
-        return null;
-    }
-
-    private _renderSecuritySection(attachments: any[], index: number): string {
-        let vulnerabilities: any[] = [];
-        
-        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 };
-        type Severity = keyof typeof severityOrder;
-        
-        const severityCounts: Record<Severity, number> = { 'Critical': 0, 'High': 0, 'Medium': 0, 'Low': 0, 'Info': 0 };
-        let worstSeverity: Severity = 'Info';
-
-        vulnerabilities.forEach(v => {
-            const severity = v.severity as Severity;
-            if (severityCounts[severity] !== undefined) {
-                severityCounts[severity]++;
-            }
-            if (severityOrder[severity] < severityOrder[worstSeverity]) {
-                worstSeverity = severity;
-            }
-        });
-
-        const riskColor = worstSeverity === 'Critical' ? 'var(--error)' :
-                           worstSeverity === 'High' ? '#fb923c' :
-                           worstSeverity === 'Medium' ? 'var(--warning)' :
-                           '#38bdf8';
-
-        return `
-            <div class="security-section">
-                <div class="security-header" onclick="toggleDetails('security-details-${index}')">
-                    <h3>🛡️ Security Assessment</h3>
-                    <span class="security-risk-badge" style="background-color: ${riskColor};">${worstSeverity} Risk</span>
-                </div>
-                <div class="security-details" id="security-details-${index}" style="display: block;">
-                    <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="vuln-list">
-                        ${vulnerabilities.map(v => {
-                            const sev = v.severity as Severity;
-                            const cardColor = sev === 'Critical' ? 'var(--error)' :
-                                              sev === 'High' ? '#fb923c' :
-                                              sev === 'Medium' ? 'var(--warning)' :
-                                              '#38bdf8';
-                            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};">${v.severity}</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.8rem; opacity: 0.8; margin-top: 5px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px;">
-                                        ${v.type ? `<span><strong style="color:var(--accent);">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-impact" style="font-size: 0.85rem; color: #fb923c; margin-bottom: 10px;"><strong>Potential 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 class="vuln-card-repro" style="margin: 10px 0; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; border-left: 2px solid ${cardColor}80;">
-                                        <strong style="font-size: 0.85rem; color: var(--text-muted);">Reproduction Steps:</strong>
-                                        <ol style="margin: 5px 0 0 20px; font-size: 0.85rem; color: var(--text-main);">
-                                            ${v.reproductionSteps.map((s: string) => `<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.75rem; opacity: 0.5; margin-top: 12px; display: flex; gap: 15px; font-family: 'JetBrains Mono', monospace;">
-                                        ${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>
-            </div>
-        `;
-    }
-
-    private escapeHtml(unsafe: string | undefined): string {
-        if (!unsafe) return '';
-        return unsafe
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#039;");
-    }
-}
-
-export default ArcalityReporter;