@arcadialdev/arcality 2.4.24 → 2.4.25

package/tests/_helpers/ArcalityReporter.ts

@@ -43,7 +43,12 @@ class ArcalityReporter implements Reporter {
 
         // Handle attachments: copy to report dir
         const processedAttachments = result.attachments.map(att => {
-            const fileName = att.path ? path.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}.png`;
+            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);
 
@@ -67,8 +72,10 @@ class ArcalityReporter implements Reporter {
         });
 
         if (result.status === 'failed' || result.error) {
-            console.log(`\n❌ [TEST ENGINE FAILURE] ${test.title} failed:`);
-            console.log(`${result.error?.message || result.error?.stack || 'Unknown error'}\n`);
+            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);
             }
@@ -361,6 +368,92 @@ class ArcalityReporter implements Reporter {
         .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>
@@ -389,12 +482,10 @@ class ArcalityReporter implements Reporter {
             ${this.results.map((r, i) => {
             const statusClass = `status-${r.result.status}`;
             const projectName = r.test.parent.project()?.name || 'default';
-            const hasTrace = r.attachments.some(a => a.name === 'trace');
-            const traceFile = r.attachments.find(a => a.name === 'trace')?.path;
-
+            
             return `
                 <div class="test-entry ${statusClass}">
-                    <div class="test-header" onclick="toggleDetails(${i})">
+                    <div class="test-header" onclick="toggleDetails('details-${i}')">
                         <div class="test-info">
                             <span class="status-dot"></span>
                             <div>
@@ -411,14 +502,12 @@ class ArcalityReporter implements Reporter {
                         </div>
                     </div>
                     
-                    <div class="test-details" id="details-${i}">
+                    <div class="test-details" id="details-${i}" style="display: none;">
                         ${r.result.status === 'passed' ? (() => {
-                    const successSummary = r.attachments.find(a => a.name === 'success_summary');
-                    if (successSummary && successSummary.body) {
-                        return `<div class="success-block">${this.escapeHtml(successSummary.body.toString())}</div>`;
-                    }
-                    return '';
-                })() : ''}
+                            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">
@@ -426,6 +515,8 @@ class ArcalityReporter implements Reporter {
                                 <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>
@@ -439,31 +530,31 @@ class ArcalityReporter implements Reporter {
                             <span class="section-title">Visual Evidence</span>
                             <div class="attachments-grid">
                                 ${r.attachments.map(att => {
-                    if (att.contentType.startsWith('image/')) {
-                        return `
+                                    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 `
+                                    }
+                                    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('')}
+                                    }
+                                    return '';
+                                }).join('')}
                             </div>
                         </div>
                         ` : ''}
                     </div>
                 </div>
                 `;
-        }).join('')}
+            }).join('')}
         </div>
 
         <footer>
@@ -473,17 +564,161 @@ class ArcalityReporter implements Reporter {
 
     <script>
         function toggleDetails(id) {
-            const el = document.getElementById('details-' + id);
-            el.style.display = (el.style.display === 'none' || el.style.display === '') ? 'block' : 'none';
+            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';
+                }
+            }
         }
-        // Collapse all by default
-        document.querySelectorAll('.test-details').forEach(d => d.style.display = '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