@arcadialdev/arcality 2.4.24 → 2.4.25

package/tests/_helpers/ArcalityReporter.js

@@ -1,112 +1,119 @@
-// tests/_helpers/ArcalityReporter.js
-// Plain JavaScript CJS version — compatible with any Playwright version
-// Avoids TypeScript compilation issues when loaded as a reporter
-
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ArcalityReporter_exports = {};
+__export(ArcalityReporter_exports, {
+  default: () => ArcalityReporter_default
+});
+module.exports = __toCommonJS(ArcalityReporter_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
 class ArcalityReporter {
-    constructor(options = {}) {
-        this.outputDir = options.outputDir || 'arcality-report';
-        this.results = [];
-        this.totalDuration = 0;
-        this.startTime = new Date();
+  outputDir;
+  results = [];
+  totalDuration = 0;
+  startTime = /* @__PURE__ */ new Date();
+  constructor(options = {}) {
+    this.outputDir = options.outputDir || "arcality-report";
+  }
+  onBegin(config, suite) {
+    if (import_fs.default.existsSync(this.outputDir)) {
+      try {
+        import_fs.default.rmSync(this.outputDir, { recursive: true, force: true });
+        console.log(`\u{1F9F9} Cleaned old report data at: ${this.outputDir}`);
+      } catch (err) {
+        console.warn(`\u26A0\uFE0F Could not fully clean report dir: ${err.message}`);
+      }
     }
-
-    onBegin(_config, _suite) {
-        if (fs.existsSync(this.outputDir)) {
-            try {
-                fs.rmSync(this.outputDir, { recursive: true, force: true });
-            } catch (err) {
-                // ignore
-            }
-        }
-        if (!fs.existsSync(this.outputDir)) {
-            fs.mkdirSync(this.outputDir, { recursive: true });
-        }
-        this.startTime = new Date();
+    if (!import_fs.default.existsSync(this.outputDir)) {
+      import_fs.default.mkdirSync(this.outputDir, { recursive: true });
     }
-
-    onTestEnd(test, result) {
-        const stepsHtml = result.steps.map(step => this.renderStep(step, 0)).join('');
-
-        const processedAttachments = result.attachments.map(att => {
-            const fileName = att.path ? path.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}.png`;
-            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)) {
-                    fs.copyFileSync(att.path, destPath);
-                } else if (att.body) {
-                    fs.writeFileSync(destPath, att.body);
-                }
-                return { ...att, path: `attachments/${fileName}` };
-            } catch (e) {
-                return att;
-            }
-        });
-
-        if (result.status !== 'passed') {
-            console.log(`\n⚠️ [TEST END] ${test.title} ended with status: ${result.status}`);
-            if (result.error) console.log(`Error: ${result.error?.message || result.error?.stack || 'Unknown'}`);
+    this.startTime = /* @__PURE__ */ new Date();
+    console.log(`\u{1F680} 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 ? import_path.default.basename(att.path) : `${att.name || "attachment"}-${Date.now()}${extension}`;
+      const attachmentsDir = import_path.default.join(this.outputDir, "attachments");
+      const destPath = import_path.default.join(attachmentsDir, fileName);
+      if (!import_fs.default.existsSync(attachmentsDir)) {
+        import_fs.default.mkdirSync(attachmentsDir, { recursive: true });
+      }
+      try {
+        if (att.path && import_fs.default.existsSync(att.path)) {
+          import_fs.default.copyFileSync(att.path, destPath);
+        } else if (att.body) {
+          import_fs.default.writeFileSync(destPath, att.body);
         }
-
-        this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
-    }
-
-    onTestBegin(test) {
-        console.log(`▶️ [TEST BEGIN] ${test.title}`);
+        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(`
+\u274C [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);
+      }
     }
-
-    onStdErr(chunk, test, result) {
-        console.error(`[STDERR] ${chunk.toString()}`);
+    this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
+  }
+  async onEnd(result) {
+    this.totalDuration = result.duration;
+    const htmlContent = this.generateHtml();
+    const reportPath = import_path.default.join(this.outputDir, "index.html");
+    import_fs.default.writeFileSync(reportPath, htmlContent);
+    console.log(`\u2728 Arcality Mission Report generated at: ${reportPath}`);
+  }
+  renderStep(step, depth) {
+    if (step.category === "hook" || step.category === "fixture") return "";
+    const padding = depth * 16;
+    const statusClass = step.error ? "step-error" : "step-passed";
+    const icon = step.error ? "\u2715" : "\u2713";
+    const duration = step.duration >= 0 ? `<span class="step-duration">${step.duration}ms</span>` : "";
+    let title = this.escapeHtml(step.title);
+    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>`;
     }
-
-    onStdOut(chunk, test, result) {
-        console.log(`[STDOUT] ${chunk.toString()}`);
-    }
-
-    onError(error) {
-        console.log(`\n❌ [FATAL GLOBAL ERROR]`);
-        console.log(error.message || error.stack || JSON.stringify(error));
-        if (error.stack) console.log(error.stack);
-        if (error.value) console.log(error.value);
-    }
-
-    async onEnd(result) {
-        this.totalDuration = result.duration;
-        const htmlContent = this.generateHtml();
-        const reportPath = path.join(this.outputDir, 'index.html');
-        fs.writeFileSync(reportPath, htmlContent);
-        // Intentionally silent — CLI handles the report open notification
-    }
-
-    renderStep(step, depth) {
-        // Humanize: hide internal Playwright hooks
-        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);
-        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>`;
-        }
-
-        return `
-            <div class="step-wrapper ${statusClass}" style="margin-left: ${padding}px">
+    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>
@@ -115,141 +122,334 @@ class ArcalityReporter {
                 ${children}
             </div>
         `;
+  }
+  getEngineVersion() {
+    try {
+      const packageJsonPath = import_path.default.join(process.cwd(), "package.json");
+      if (import_fs.default.existsSync(packageJsonPath)) {
+        const pkg = JSON.parse(import_fs.default.readFileSync(packageJsonPath, "utf8"));
+        return pkg.version || "2.2.0";
+      }
+    } catch (e) {
+      console.error("Error reading package.json version:", e);
     }
-
-    getEngineVersion() {
-        try {
-            // Check Arcality's own package.json first, then cwd fallback
-            const toolPkg = path.join(__dirname, '..', '..', 'package.json');
-            const cwdPkg = path.join(process.cwd(), 'package.json');
-            const pkgPath = fs.existsSync(toolPkg) ? toolPkg : cwdPkg;
-            if (fs.existsSync(pkgPath)) {
-                const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-                return pkg.version || '2.2.9';
-            }
-        } catch (e) { /* ignore */ }
-        return '2.2.9';
-    }
-
-    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,
-            flaky: this.results.filter(r => r.result.status === 'passed' && r.result.retry > 0).length,
-        };
-
-        const testCards = this.results.map((r, i) => {
-            const statusClass = `status-${r.result.status}`;
-            const projectName = (r.test.parent && r.test.parent.project && r.test.parent.project()) ? r.test.parent.project().name : 'default';
-
-            const successSummaryAtt = r.attachments.find(a => a.name === 'success_summary');
-            const successBlock = (r.result.status === 'passed' && successSummaryAtt && successSummaryAtt.body)
-                ? `<div class="success-block">${this.escapeHtml(successSummaryAtt.body.toString())}</div>`
-                : '';
-
-            const errorBlock = 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>`
-                : '';
-
-            const mediaAttachments = r.attachments.filter(a => a.contentType && (a.contentType.startsWith('image/') || a.contentType.startsWith('video/')));
-            const mediaGrid = mediaAttachments.length > 0 ? `
-                <div class="steps-section">
-                    <span class="section-title">Visual Evidence</span>
-                    <div class="attachments-grid">
-                        ${mediaAttachments.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>` : '';
-
-            return `
-                <div class="test-entry ${statusClass}">
-                    <div class="test-header" onclick="toggleDetails(${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>
-                        <span style="opacity:0.5; font-size: 1.2rem">▼</span>
-                    </div>
-                    <div class="test-details" id="details-${i}">
-                        ${successBlock}
-                        ${errorBlock}
-                        <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>
-                        ${mediaGrid}
-                    </div>
-                </div>`;
-        }).join('');
-
-        return `<!DOCTYPE html>
+    return "2.2.0";
+  }
+  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
+    };
+    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; --text-main: #f8fafc; --text-muted: #94a3b8;
-            --primary: #6366f1; --success: #10b981; --error: #f43f5e; --warning: #f59e0b;
-            --border: #1e293b; --accent: #c084fc;
+            --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; }
+        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; }
-        .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; }
-        .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; }
+
+        /* 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-flaky { color: var(--warning); }
-        .test-entry { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 2rem; overflow: hidden; }
+        
+        .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-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 { 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 { 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; }
+
+        /* 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: "\u2728";
+            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-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; }
-        .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); }
+        .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); }
-        footer { margin-top: 5rem; text-align: center; padding: 2rem; font-size: 0.8rem; color: var(--text-muted); border-top: 1px solid var(--border); }
+        .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>
@@ -258,11 +458,11 @@ class ArcalityReporter {
             <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 &amp; Diagnostics Console</p>
+                <p style="color: var(--text-muted)">Testing Intelligence & Diagnostics Console</p>
             </div>
             <div style="text-align: right">
-                <div style="color: var(--accent); font-weight: 700;">${this.startTime.toLocaleDateString()}</div>
-                <div style="font-family: 'JetBrains Mono'; font-size: 0.8rem;">ENGINE VERSION ${this.getEngineVersion()}</div>
+                <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>
 
@@ -271,33 +471,236 @@ class ArcalityReporter {
             <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 class="stat-card"><span class="stat-value val-total">${(this.totalDuration / 1e3).toFixed(2)}s</span><span class="stat-label">Total Duration</span></div>
         </div>
 
-        <div class="test-list">${testCards}</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 / 1e3).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">\u25BC</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">\u{1F9E0} 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>
+        <footer>
+            ARCALITY ENGINE v${this.getEngineVersion()} \u2022 SYSTEM TIME [${(/* @__PURE__ */ new Date()).toISOString()}] \u2022 GENERATED FOR ARCADIAL
+        </footer>
     </div>
+
     <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';
+                }
+            }
         }
-        document.querySelectorAll('.test-details').forEach(d => d.style.display = 'none');
     </script>
 </body>
-</html>`;
+</html>
+        `;
+  }
+  getAttachmentText(att) {
+    if (!att) return null;
+    if (att.body) return att.body.toString();
+    if (att.path) {
+      const actualPath = import_path.default.isAbsolute(att.path) ? att.path : import_path.default.join(this.outputDir, att.path);
+      if (import_fs.default.existsSync(actualPath)) {
+        return import_fs.default.readFileSync(actualPath, "utf8");
+      }
     }
-
-    escapeHtml(unsafe) {
-        if (!unsafe) return '';
-        return String(unsafe)
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
+    return null;
+  }
+  _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";
+    vulnerabilities.forEach((v) => {
+      const severity = v.severity;
+      if (severityCounts[severity] !== void 0) {
+        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>\u{1F6E1}\uFE0F 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;
+      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">\u2014 ${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) => `<li>${this.escapeHtml(s)}</li>`).join("")}
+                                        </ol>
+                                    </div>` : ""}
+
+                                    <div class="vuln-card-remediation">
+                                        <strong>\u2192 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>
+        `;
+  }
+  escapeHtml(unsafe) {
+    if (!unsafe) return "";
+    return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
 }
-
-module.exports = ArcalityReporter;
+var ArcalityReporter_default = ArcalityReporter;