slik-report 1.0.2 → 1.0.3

package/dist/index.js

@@ -25,19 +25,24 @@ function stripAnsi(str) {
     const ansiRegex = /[\u001b\u009b][[()#;?]*.{0,2}(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
     return str.replace(ansiRegex, '');
 }
-/**
- * Escapes a JSON string for safe embedding within an HTML <script> tag.
- * This prevents the JSON from prematurely closing the script block (e.g., if it contains </script>).
- */
 function escapeJsonForHtml(jsonString) {
     return jsonString.replace(/<\/script>/g, '<\\/script>');
 }
+function calculateStdDev(values) {
+    if (values.length < 2)
+        return 0;
+    const mean = values.reduce((sum, v) => sum + v, 0) / values.length;
+    const variance = values.reduce((sum, v) => sum + Math.pow(v - mean, 2), 0) / (values.length - 1);
+    return Math.sqrt(variance);
+}
 class AggregatorReporter {
     constructor(opts) {
         this.options = opts || {};
         this.input = (this.options.input) || './playwright-report/report.json';
         this.outputHtml = (this.options.output) || './summary-report.html';
         this.historyDir = (this.options.history) || './reports/reports_history';
+        // New Option: Path to external HTML report
+        this.anotherHTML = (this.options.externalHtml) || './playwright-report/reports/index.html';
     }
     async onEnd(result) {
         try {
@@ -48,12 +53,21 @@ class AggregatorReporter {
             }
             console.log('AggregatorReporter: JSON file found. Reading file...');
             const report = JSON.parse(fs.readFileSync(this.input, 'utf8'));
-            console.log('AggregatorReporter: JSON data read. Processing and generating report...');
+            // Check if external HTML exists
+            const hasExternalHtml = fs.existsSync(this.anotherHTML);
+            // Ensure we use a relative path for the HTML src attribute
+            const externalHtmlPath = this.anotherHTML;
+            console.log('AggregatorReporter: JSON data read. Processing...');
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const historyFile = path.join(this.historyDir, `run-${timestamp}.json`);
             writeFile(historyFile, safeJson(report));
             const history = await this.loadHistory();
             const processedReport = this.processReportWithHistory(report, history);
+            // Inject external HTML config
+            processedReport.config = {
+                hasExternalHtml: hasExternalHtml,
+                externalHtmlPath: externalHtmlPath
+            };
             const htmlContent = this.generateReportHtml(processedReport);
             writeFile(this.outputHtml, htmlContent);
             console.log('AggregatorReporter: Report generation successful!');
@@ -62,39 +76,22 @@ class AggregatorReporter {
             console.error('AggregatorReporter failed:', e);
         }
     }
-    /**
-     * Helper function to robustly get the array of top-level test suites.
-     * This handles standard Playwright and various custom/merged report formats.
-     */
     getTestSuites(report) {
         if (!report)
             return [];
-        // 1. Standard Playwright structure
-        if (report.suites && Array.isArray(report.suites)) {
+        if (report.suites && Array.isArray(report.suites))
             return report.suites;
-        }
-        // 2. Common alternative in merged reports (a flat array of specs)
-        if (report.specs && Array.isArray(report.specs) && report.specs.length > 0) {
-            console.log('AggregatorReporter: Using flat "specs" array as report root.');
-            return [{ title: 'Root Suite (Flat Specs)', suites: [], specs: report.specs, file: 'N/A' }];
-        }
-        // 3. Check for a Playwright V2/aggregator structure where tests are flatly listed
-        if (report.tests && Array.isArray(report.tests) && report.tests.length > 0) {
-            console.log('AggregatorReporter: Using flat "tests" array as report root. (Playwright V2 or custom)');
+        if (report.specs && Array.isArray(report.specs))
+            return [{ title: 'Root (Specs)', suites: [], specs: report.specs, file: 'N/A' }];
+        // Handle flattened 'tests' structure if strictly flat
+        if (report.tests && Array.isArray(report.tests)) {
             return [{
-                    title: 'Root Suite (Flat Tests)',
+                    title: 'Root (Flat Tests)',
                     suites: [],
-                    specs: report.tests.map(t => ({
-                        title: t.title,
-                        file: t.file,
-                        tests: [t]
-                    })),
+                    specs: report.tests.map(t => ({ title: t.title, file: t.file, tests: [t] })),
                     file: 'N/A'
                 }];
         }
-        if (report.stats) {
-            console.warn('AggregatorReporter: Could not find "suites" or alternative test structure. Returning empty suites list.');
-        }
         return [];
     }
     findAllSpecs(suites) {
@@ -104,9 +101,8 @@ class AggregatorReporter {
         for (const suite of suites) {
             if (suite.specs)
                 specs.push(...suite.specs);
-            if (suite.suites) {
+            if (suite.suites)
                 specs.push(...this.findAllSpecs(suite.suites));
-            }
         }
         return specs;
     }
@@ -122,16 +118,8 @@ class AggregatorReporter {
                 const filePath = path.join(this.historyDir, file);
                 const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
                 const dateStr = file.replace('run-', '').replace('.json', '');
-                // The file name format is ISO-like but uses hyphens/underscores instead of colons/dots. We reconstruct a valid ISO string.
-                const validIso = dateStr.slice(0, 10) + 'T' +
-                    dateStr.slice(11, 13) + ':' +
-                    dateStr.slice(14, 16) + ':' +
-                    dateStr.slice(17, 19) + '.' +
-                    dateStr.slice(20) + 'Z';
-                history.push({
-                    date: new Date(validIso).toLocaleDateString(),
-                    report: data
-                });
+                const validIso = dateStr.slice(0, 10) + 'T' + dateStr.slice(11, 13) + ':' + dateStr.slice(14, 16) + ':' + dateStr.slice(17, 19) + '.' + dateStr.slice(20);
+                history.push({ date: new Date(validIso).toLocaleDateString(), report: data });
             }
             catch (e) {
                 console.warn(`Could not read history file: ${file}`, e);
@@ -141,56 +129,110 @@ class AggregatorReporter {
     }
     processReportWithHistory(report, history) {
         const stats = this.processStats(report);
+        const historyData = this.processHistoryData(history, report);
         const suites = this.processSuites(report, history);
         const categories = this.processCategories(report);
-        const historyData = this.processHistoryData(history, report);
         const timeline = this.processTimeline(report);
         const metadata = this.processMetadata(report);
-        return {
-            stats,
-            suites,
-            categories,
-            history: historyData,
-            timeline,
-            metadata
-        };
+        const tagStats = this.processTags(report); // New Tag Processor
+        // KPI Calculations
+        const lastFivePassRates = historyData.slice(-5).map(h => h.passRate);
+        stats.passRateConsistency = calculateStdDev(lastFivePassRates).toFixed(2);
+        let flakyCount = 0;
+        let failedAndReproduced = 0;
+        suites.forEach(suite => {
+            suite.specs.forEach(spec => {
+                const test = spec.tests?.[0];
+                if (test) {
+                    if (test.flaky)
+                        flakyCount++;
+                    if (test.status === 'failed' && test.previousStatus === 'failed')
+                        failedAndReproduced++;
+                }
+            });
+        });
+        const totalTests = stats.total;
+        stats.flakyCount = flakyCount;
+        stats.flakyPercentage = totalTests > 0 ? ((flakyCount / totalTests) * 100).toFixed(2) + '%' : 'N/A';
+        const currentFailedTests = stats.failed;
+        stats.failureReproducibility = currentFailedTests > 0
+            ? ((failedAndReproduced / currentFailedTests) * 100).toFixed(2) + '%'
+            : 'N/A';
+        return { stats, suites, categories, history: historyData, timeline, metadata, tagStats };
     }
     processStats(report) {
         const stats = report.stats || {};
         const { expected = 0, unexpected = 0, skipped = 0, duration = 0 } = stats;
+        let retries = 0;
+        const allSpecs = this.findAllSpecs(this.getTestSuites(report));
+        allSpecs.forEach(spec => {
+            if (spec.tests) {
+                spec.tests.forEach(test => { if (test.results)
+                    retries += Math.max(0, test.results.length - 1); });
+            }
+        });
         const total = expected + unexpected + skipped;
-        const passRate = total > 0 ? `${((expected / total) * 100).toFixed(0)}%` : 'N/A';
-        const avgDuration = total > 0 ? `${(duration / total / 1000).toFixed(2)}s` : 'N/A';
         return {
-            total,
-            passed: expected,
-            failed: unexpected,
-            skipped,
-            passRate,
-            avgDuration,
-            totalDuration: `${(duration / 1000).toFixed(2)}s`
+            total, passed: expected, failed: unexpected, skipped, retries,
+            passRate: total > 0 ? `${((expected / total) * 100).toFixed(0)}%` : 'N/A',
+            avgDuration: total > 0 ? `${(duration / total / 1000).toFixed(2)}s` : 'N/A',
+            totalDuration: `${(duration / 1000).toFixed(2)}s`,
+            passRateConsistency: 'N/A', flakyPercentage: 'N/A', failureReproducibility: 'N/A',
         };
     }
     processMetadata(report) {
-        // Safely access project name from the projects array
         const projectName = report.config?.projects?.[0]?.name || report.config?.metadata?.project || 'N/A';
         return {
             browser: projectName,
-            os: report.config?.metadata?.platform || 'N/A', // Using 'platform' if available in ortoni/custom meta
+            os: report.config?.metadata?.platform || 'N/A',
             startTime: report.stats?.startTime ? new Date(report.stats.startTime).toLocaleString() : 'N/A',
             totalDuration: report.stats?.duration ? `${(report.stats.duration / 1000).toFixed(2)}s` : 'N/A'
         };
     }
+    processTags(report) {
+        const tagMap = {};
+        const allSpecs = this.findAllSpecs(this.getTestSuites(report));
+        allSpecs.forEach(spec => {
+            // Collect tags from spec or test level
+            const tags = spec.tags || [];
+            if (spec.tests && spec.tests[0] && spec.tests[0].tags) {
+                tags.push(...spec.tests[0].tags);
+            }
+            const uniqueTags = [...new Set(tags)]; // Dedup
+            const result = spec.tests?.[0]?.results?.[0];
+            const status = result?.status || 'skipped';
+            const duration = result?.duration || 0;
+            uniqueTags.forEach(tag => {
+                // Clean tag (remove @ if present for display)
+                const tagName = tag.startsWith('@') ? tag.substring(1) : tag;
+                if (!tagMap[tagName]) {
+                    tagMap[tagName] = { name: tagName, total: 0, passed: 0, failed: 0, skipped: 0, duration: 0, tests: [] };
+                }
+                tagMap[tagName].total++;
+                if (status === 'passed')
+                    tagMap[tagName].passed++;
+                else if (status === 'failed' || status === 'timedOut')
+                    tagMap[tagName].failed++;
+                else
+                    tagMap[tagName].skipped++;
+                tagMap[tagName].duration += duration;
+                tagMap[tagName].tests.push({
+                    title: spec.title,
+                    status: status,
+                    duration: duration
+                });
+            });
+        });
+        return Object.values(tagMap);
+    }
     processSuites(report, history) {
         const historyDataMap = new Map();
         history.forEach(run => {
             const allSpecs = this.findAllSpecs(this.getTestSuites(run.report));
             allSpecs.forEach(spec => {
                 const testId = `${spec.file}::${spec.title}`;
-                if (!historyDataMap.has(testId)) {
+                if (!historyDataMap.has(testId))
                     historyDataMap.set(testId, []);
-                }
-                // Safely get status, prioritizing unexpected over passed/skipped if multiple results exist
                 const resultStatus = spec.tests?.[0]?.results?.[0]?.status || 'skipped';
                 historyDataMap.get(testId).push(resultStatus);
             });
@@ -208,26 +250,31 @@ class AggregatorReporter {
                         const currentTest = spec.tests?.[0];
                         const currentResult = currentTest?.results?.[0];
                         const currentStatus = currentResult?.status || 'skipped';
-                        // We only want the history statuses from previous runs + the current one
-                        const lastRuns = historyStatuses.slice(-4);
-                        // Ensure the current run is included, and limit to 5 total runs
-                        if (lastRuns.length === 0 || lastRuns[lastRuns.length - 1] !== currentStatus) {
-                            lastRuns.push(currentStatus);
+                        const previousStatus = historyStatuses[historyStatuses.length - 1] || 'N/A';
+                        const allRuns = [...historyStatuses, currentStatus];
+                        const displayRuns = allRuns.slice(-5);
+                        const isFlaky = new Set(displayRuns).size > 1;
+                        const logs = (currentResult?.stdout || []).map(s => stripAnsi(s.text || s)).join('');
+                        // Extract Stack Trace
+                        let stack = '';
+                        if (currentResult?.error?.stack) {
+                            stack = stripAnsi(currentResult.error.stack);
                         }
-                        else if (lastRuns.length > 5) {
-                            lastRuns.splice(0, lastRuns.length - 5);
+                        else if (currentResult?.errors && currentResult.errors.length > 0) {
+                            stack = currentResult.errors.map(e => stripAnsi(e.stack || e.message)).join('\n');
                         }
-                        const isFlaky = new Set(lastRuns).size > 1;
-                        const logs = (currentResult?.stdout || []).map(s => stripAnsi(s.text || '')).join('');
                         return {
                             ...spec,
                             tests: spec.tests.map(test => ({
                                 ...test,
-                                history: lastRuns,
+                                history: displayRuns,
+                                previousStatus: previousStatus,
                                 flaky: isFlaky,
                                 status: currentStatus,
                                 duration: currentResult?.duration || 0,
-                                logs: logs
+                                logs: logs,
+                                stack: stack, // Added Stack
+                                results: test.results || [],
                             }))
                         };
                     })
@@ -246,30 +293,19 @@ class AggregatorReporter {
         allSpecs.forEach(spec => {
             const result = spec.tests?.[0]?.results?.[0];
             if (result?.status === 'failed' && result.error) {
-                // Use the raw error message to preserve newlines and ANSI for stripping/display
                 const cleanMessage = stripAnsi(result.error.message || result.error.stack || 'Unknown error');
                 let errorName;
                 const expectMatch = cleanMessage.match(/Expected: (.*)\s*Received: (.*)/);
                 if (expectMatch) {
-                    const expected = (expectMatch[1] || '').trim();
-                    const received = (expectMatch[2] || '').trim();
-                    errorName = `AssertionError: Expected '${expected}' but received '${received}'`;
+                    errorName = `AssertionError: Expected '${expectMatch[1].trim()}' but received '${expectMatch[2].trim()}'`;
                 }
                 else {
                     errorName = (cleanMessage.split('\n')[0] || 'Unknown Error').replace('Error: ', '').trim();
                 }
-                if (!categories[errorName]) {
-                    categories[errorName] = {
-                        name: errorName,
-                        count: 0,
-                        tests: []
-                    };
-                }
+                if (!categories[errorName])
+                    categories[errorName] = { name: errorName, count: 0, tests: [] };
                 categories[errorName].count++;
-                categories[errorName].tests.push({
-                    title: `${spec.file} -> ${spec.title}`,
-                    trace: cleanMessage
-                });
+                categories[errorName].tests.push({ title: `${spec.file} -> ${spec.title}`, trace: cleanMessage });
             }
         });
         return Object.values(categories);
@@ -277,22 +313,15 @@ class AggregatorReporter {
     processHistoryData(history, currentReport) {
         const allRuns = [...history];
         const today = new Date().toLocaleDateString();
-        // Add current report to historical runs for chart, checking for duplicates
         if (!history.find(h => h.report.stats?.startTime === currentReport.stats?.startTime)) {
-            allRuns.push({
-                date: today,
-                report: currentReport,
-            });
+            allRuns.push({ date: today, report: currentReport });
         }
         return allRuns.map(run => {
             const stats = run.report.stats || {};
             const { expected = 0, unexpected = 0, skipped = 0 } = stats;
             const total = expected + unexpected + skipped;
             return {
-                date: run.date,
-                passed: expected,
-                failed: unexpected,
-                skipped,
+                date: run.date, passed: expected, failed: unexpected, skipped,
                 passRate: total > 0 ? (expected / total) * 100 : 0
             };
         });
@@ -304,27 +333,20 @@ class AggregatorReporter {
         allSpecs.forEach(spec => {
             const result = spec.tests?.[0]?.results?.[0];
             const duration = result?.duration || 0;
-            timeline.push({
-                name: spec.title,
-                start: cumulativeDuration,
-                duration: duration,
-                status: result?.status || 'skipped'
-            });
+            timeline.push({ name: spec.title, start: cumulativeDuration, duration: duration, status: result?.status || 'skipped' });
             cumulativeDuration += duration;
         });
         return timeline;
     }
     generateReportHtml(report) {
-        // 1. Stringify the report object
         const reportJson = JSON.stringify(report);
-        // 2. Escape the stringified JSON for safe HTML embedding (CRITICAL FIX)
         const safeReportJson = escapeJsonForHtml(reportJson);
         return `
 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8"/>
-<title>DIS API Test Summary - Enhanced</title>
+<title>DIS API Test Summary</title>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
 <style>
@@ -333,59 +355,75 @@ class AggregatorReporter {
   --pass-bg:#e6ffed; --pass-text:#0a7a0a; --fail-bg:#fff0f0; --fail-text:#b00020;
   --skipped-bg:#f0f0f0; --skipped-text:#6B7280; --shadow: 0 6px 18px rgba(15,23,42,0.08);
   --table-header-bg: rgba(15,23,42,0.03); --table-border: rgba(15,23,42,0.04);
-  --log-bg: #eef0f3;
+  --log-bg: #eef0f3; --retry-bg: #fffbe6; --retry-text: #8a6d3b;
+  --consistency-bg: #e0f7fa; --consistency-text: #00838f;
+  --flaky-bg: #fff3e0; --flaky-text: #ff9800;
+  --repro-bg: #f3e5f5; --repro-text: #4a148c;
 }
 [data-theme="dark"]{
   --bg:#1a202c; --card:#2d3748; --text:#e2e8f0; --muted:#a0aec0; --accent:#63b3ed;
   --pass-bg:#2A4838; --pass-text:#68D391; --fail-bg:#582C2C; --fail-text:#FC8181;
   --skipped-bg:#4a5568; --skipped-text:#e2e8f0; --shadow: 0 6px 18px rgba(0,0,0,0.4);
   --table-header-bg: rgba(255,255,255,0.05); --table-border: rgba(255,255,255,0.08);
-  --log-bg: #1e293b;
-}
-body {
-  margin: 0; padding: 0; font-family: 'Inter', sans-serif; font-size: 14px;
-  line-height: 1.6; color: var(--text); background-color: var(--bg); transition: background-color 0.3s, color 0.3s;
+  --log-bg: #1e293b; --retry-bg: #4c3c13; --retry-text: #ffeb3b;
+  --consistency-bg: #1a4e58; --consistency-text: #80deea;
+  --flaky-bg: #5f4a13; --flaky-text: #ffc107;
+  --repro-bg: #40234a; --repro-text: #ce93d8;
 }
+body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text); background-color: var(--bg); transition: background-color 0.4s, color 0.4s; }
 .app-container { display: flex; min-height: 100vh; }
-.sidebar { width: 250px; background-color: var(--card); padding: 24px; box-shadow: var(--shadow); z-index: 10; flex-shrink: 0; }
+.download-buttons{display:flex;gap:10px}.download-buttons button{padding:8px 14px;border:1px solid var(--table-border);background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--card) 90%,black));color:var(--text);border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .25s}.download-buttons button:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--table-header-bg),var(--card));box-shadow:0 6px 16px rgba(0,0,0,.15)}.download-buttons button:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.2) inset}
+.sidebar { width: 200px; background-color: var(--card); padding: 24px; box-shadow: var(--shadow); z-index: 10; flex-shrink: 0; }
 .sidebar-header { font-weight: 700; font-size: 1.5em; margin-bottom: 30px; color: var(--accent); }
 .sidebar-menu { list-style: none; padding: 0; }
 .sidebar-menu-item { margin-bottom: 12px; }
-.sidebar-menu-item a { display: block; padding: 12px 16px; color: var(--text); text-decoration: none; border-radius: 8px; transition: background-color 0.2s, color 0.2s; }
-.sidebar-menu-item a:hover { background-color: var(--table-header-bg); }
+.sidebar-menu-item a { display: block; padding: 8px 16px; color: var(--text); text-decoration: none; border-radius: 8px; transition: background-color 0.2s, transform 0.1s; }
+.sidebar-menu-item a:hover { background-color: var(--table-header-bg); transform: translateX(4px); }
 .sidebar-menu-item a.active { background-color: var(--accent); color: white; }
 .main-content { flex-grow: 1; padding: 32px; overflow-x: auto; }
 .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;}
 .header h1 { font-size: 2em; font-weight: 600; margin: 0; }
 .filters, .actions { display: flex; gap: 16px; align-items: center; }
 .filters label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
-.card { background-color: var(--card); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
+.card { background-color: var(--card); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 24px; animation: fadeIn 0.5s ease-out; }
 h2 { font-size: 1.5em; font-weight: 600; margin: 0 0 20px; display: flex; justify-content: space-between; align-items: center;}
 h3 { font-size: 1.1em; font-weight: 600; margin: 0 0 12px; text-align: center; }
 .header-stats { display: flex; gap: 8px; font-size: 0.7em; font-weight: normal; }
 .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
-.kpi-card { text-align: center; padding: 16px; border-radius: 8px; background-color: var(--bg); border: 1px solid var(--table-border); }
+.kpi-card { text-align: center; padding: 16px; border-radius: 8px; background-color: var(--bg); border: 1px solid var(--table-border); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
+.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(15,23,42,0.1); }
 .kpi-value { font-size: 2em; font-weight: 700; color: var(--text); }
 .kpi-label { color: var(--muted); font-size: 0.9em; }
-.kpi-pass-rate .kpi-value { color: var(--pass-text); }
+.kpi-pass-rate .kpi-value, .kpi-passed .kpi-value { color: var(--pass-text); }
 .kpi-failed .kpi-value { color: var(--fail-text); }
+.kpi-retries .kpi-value { color: var(--retry-text); }
+.kpi-retries { border-left: 5px solid var(--retry-text); }
+.kpi-consistency { border-left: 5px solid var(--consistency-text); background-color: var(--consistency-bg); }
+.kpi-flaky-percent { border-left: 5px solid var(--flaky-text); background-color: var(--flaky-bg); }
+.kpi-reproducibility { border-left: 5px solid var(--repro-text); background-color: var(--repro-bg); }
+.kpi-consistency .kpi-value { color: var(--consistency-text); }
+.kpi-flaky-percent .kpi-value { color: var(--flaky-text); }
+.kpi-reproducibility .kpi-value { color: var(--repro-text); }
 .status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-weight: 600; font-size: 0.8em; text-transform: uppercase; }
 .status-passed { background-color: var(--pass-bg); color: var(--pass-text); }
 .status-failed { background-color: var(--fail-bg); color: var(--fail-text); }
 .status-skipped { background-color: var(--skipped-bg); color: var(--skipped-text); }
+.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); animation: modalFadeIn 0.3s; }
+.modal-content { background-color: var(--card); margin: 5vh auto; padding: 20px; border: 1px solid var(--table-border); width: 90%; max-width: 1200px; border-radius: 12px; position: relative; max-height: 90vh; display: flex; flex-direction: column; }
+.close-button { color: var(--muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; top: 15px; right: 20px; }
+.modal-body { overflow-y: auto; flex-grow: 1; }
+.modal table { font-size: 0.9em; min-width: 100%; }
 table { width: 100%; border-collapse: collapse; }
 th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--table-border); }
 th { background-color: var(--table-header-bg); font-weight: 600; }
-tr:last-child td { border-bottom: none; }
 .suite-header { cursor: pointer; padding: 12px 16px; background-color: var(--table-header-bg); border-bottom: 1px solid var(--table-border); display: flex; align-items: center; gap: 8px; font-weight: 600; }
 .collapse-icon { width: 1em; height: 1em; text-align: center; transition: transform 0.2s; }
 .collapse-icon.expanded { transform: rotate(90deg); }
-.test-card-header { cursor: pointer; display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 8px 12px;}
+.test-card-header { cursor: pointer; display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 16px; align-items: center; padding: 8px 12px;}
 .test-card-header:hover { background-color: var(--table-header-bg); }
 .test-card { border-bottom: 1px solid var(--table-border); }
-.log-row { background-color: var(--table-header-bg); }
+.log-row, .stack-row { background-color: var(--table-header-bg); display: none; }
 .log-container { padding: 16px; }
-.log-container h4 { margin: 0 0 8px; text-align: left;}
 .log-container pre { white-space: pre-wrap; word-wrap: break-word; background: var(--log-bg); padding: 12px; border-radius: 8px; max-height: 300px; overflow-y: auto; color: var(--muted); font-family: monospace; }
 .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; }
 .dot.passed { background-color: #4CAF50; }
@@ -396,19 +434,19 @@ tr:last-child td { border-bottom: none; }
 .dark-mode-toggle:hover { background-color: var(--table-header-bg); }
 .tab-content { display: none; }
 .tab-content.active { display: block; }
-.download-buttons { display: flex; gap: 10px; }
-.download-buttons button { padding: 10px 16px; border: 1px solid var(--table-border); background-color: var(--card); color: var(--text); border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
-.download-buttons button:hover { background-color: var(--table-header-bg); }
 .chart-container { position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); }
 .category-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 12px; border-bottom: 1px solid var(--table-border); }
 .category-content { padding: 0 12px; }
 .category-test { border-bottom: 1px solid var(--table-border); padding: 12px 0; }
-.category-test:last-child { border-bottom: none; }
-.category-test pre { background-color: var(--bg); padding: 8px; border-radius: 6px; margin-top: 8px; font-family: monospace; }
 .metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px;}
 .metadata-item { background-color: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--table-border); }
 .metadata-label { font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px;}
-.metadata-value { font-size: 1.1em;}
+.metadata-value { font-size: 1.0em;}
+.action-btn { background: none; border: 1px solid var(--muted); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 0.8em; margin-left: 5px; color: var(--text); }
+.action-btn:hover { background-color: var(--table-header-bg); }
+iframe { width: 100%; height: 80vh; border: none; border-radius: 8px; box-shadow: var(--shadow); }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
 </style>
 </head>
 <body>
@@ -423,6 +461,8 @@ tr:last-child td { border-bottom: none; }
       <li class="sidebar-menu-item"><a href="#" data-tab="graphs">Graphs</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="timeline">Timeline</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="history">Historical Runs</a></li>
+      <li class="sidebar-menu-item" id="tagsMenu" style="display:none;"><a href="#" data-tab="tags">Tags</a></li>
+      <li class="sidebar-menu-item" id="htmlReportMenu" style="display:none;"><a href="#" data-tab="external-html">HTML Report</a></li>
     </ul>
   </div>
 
@@ -433,7 +473,6 @@ tr:last-child td { border-bottom: none; }
         <button id="downloadHtml">Download HTML</button>
         <button id="downloadCsv">Download CSV</button>
         <button id="downloadJson">Download JSON</button>
-        <button id="downloadPdf">Download PDF</button>
       </div>
       <div class="actions">
         <div class="filters">
@@ -478,21 +517,18 @@ tr:last-child td { border-bottom: none; }
                 <h3>Pass/Fail/Skip</h3>
                 <div class="chart-container" style="height: 300px;">
                     <canvas id="statusChart"></canvas>
-                    <div>Loading Chart...</div>
                 </div>
             </div>
             <div style="flex: 1 1 400px; min-width: 400px;">
                 <h3>Duration Distribution</h3>
                  <div class="chart-container" style="height: 300px;">
                     <canvas id="durationHistogram"></canvas>
-                    <div>Loading Chart...</div>
                 </div>
             </div>
             <div style="flex: 1 1 100%; min-width: 400px;">
                 <h3>Pass Rate Trend</h3>
                 <div class="chart-container" style="height: 300px;">
                     <canvas id="historyChart"></canvas>
-                    <div>Loading Chart...</div>
                 </div>
             </div>
         </div>
@@ -504,7 +540,6 @@ tr:last-child td { border-bottom: none; }
         <h2>Test Execution Timeline</h2>
         <div id="timelineContainer" class="chart-container" style="height: 600px;">
           <canvas id="timelineChart"></canvas>
-           <div>Loading Chart...</div>
         </div>
       </div>
     </div>
@@ -514,25 +549,69 @@ tr:last-child td { border-bottom: none; }
             <h2 id="historyRunsTitle">Historical Runs</h2>
             <div id="historyGraphContainer" class="chart-container" style="height: 400px;">
                 <canvas id="historicalRunsChart"></canvas>
-                <div>Loading Chart...</div>
             </div>
         </div>
     </div>
 
+    <div id="tags" class="tab-content">
+        <div class="card">
+            <h2>Tag Analysis</h2>
+            <div style="display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px;">
+                <div style="flex: 1 1 300px;">
+                    <h3>Distribution by Tag</h3>
+                    <div class="chart-container" style="height: 300px;">
+                        <canvas id="tagsPieChart"></canvas>
+                    </div>
+                </div>
+                <div style="flex: 1 1 300px;">
+                    <h3>Duration by Tag (Total)</h3>
+                     <div class="chart-container" style="height: 300px;">
+                        <canvas id="tagsBarChart"></canvas>
+                    </div>
+                </div>
+            </div>
+            <h3>Test List by Tag</h3>
+            <div id="tagsTableContainer"></div>
+        </div>
+    </div>
+
+    <div id="external-html" class="tab-content">
+        <div class="card">
+             <h2 style="margin-bottom: 10px;">Full HTML Report</h2>
+             <div id="iframeContainer" style="width:100%; height:80vh;"></div>
+        </div>
+    </div>
+
   </div>
 </div>
 
+<div id="testModal" class="modal">
+  <div class="modal-content">
+    <span class="close-button">&times;</span>
+    <h2 id="modalTitle"></h2>
+    <div class="modal-body">
+      <table>
+        <thead id="modalTableHeader"></thead>
+        <tbody id="modalTableBody"></tbody>
+      </table>
+    </div>
+  </div>
+</div>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 
 <script>
 const reportData = ${safeReportJson};
+let allTests = []; 
 
 (function() {
   const root = document.documentElement;
   const darkModeToggle = document.getElementById('darkModeToggle');
-  const renderedTabs = new Set();
+  const modal = document.getElementById('testModal');
+  const closeBtn = document.querySelector('.close-button');
+  const modalBody = document.getElementById('modalTableBody');
+  const modalHeader = document.getElementById('modalTableHeader');
 
   function applyTheme(theme) {
       if (theme === 'dark') {
@@ -551,12 +630,21 @@ const reportData = ${safeReportJson};
   }
 
   darkModeToggle.addEventListener('click', toggleTheme);
-  
+
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme) {
       applyTheme(savedTheme);
   }
-  
+
+  // --- Show/Hide Dynamic Menus ---
+  if(reportData.config.hasExternalHtml) {
+      document.getElementById('htmlReportMenu').style.display = 'block';
+  }
+
+  if(reportData.tagStats && reportData.tagStats.length > 0) {
+      document.getElementById('tagsMenu').style.display = 'block';
+  }
+
   const tabs = document.querySelectorAll('.sidebar-menu-item a');
   const tabContents = document.querySelectorAll('.tab-content');
 
@@ -568,32 +656,150 @@ const reportData = ${safeReportJson};
       e.target.classList.add('active');
       tabContents.forEach(c => c.classList.remove('active'));
       document.getElementById(targetId).classList.add('active');
-      if (renderedTabs.has(targetId)) return;
-      if (targetId === 'graphs') { renderCharts(); renderedTabs.add(targetId); }
-      if (targetId === 'timeline') { renderTimeline(); renderedTabs.add(targetId); }
-      if (targetId === 'history') { renderHistoryGraph(); renderedTabs.add(targetId); }
+
+      // Fix: Handle External HTML rendering specifically
+      if (targetId === 'external-html') {
+          renderIframe();
+          return;
+      }
+
+      if (targetId === 'graphs') { renderCharts(); }
+      if (targetId === 'timeline') { renderTimeline(); }
+      if (targetId === 'history') { renderHistoryGraph(); }
+      if (targetId === 'tags') { renderTags(); }
     });
   });
+  
+  function getAllTestsFlat() {
+    if (allTests.length > 0) return allTests; 
+
+    reportData.suites.forEach(suite => {
+        suite.specs.forEach(spec => {
+            spec.tests.forEach(test => {
+                const result = test.results[0];
+                const status = result?.status || 'skipped';
+                const isRetry = test.results.length > 1;
+
+                allTests.push({
+                    suite: suite.title,
+                    test: spec.title,
+                    duration: result?.duration || 0,
+                    status: status,
+                    isRetry: isRetry
+                });
+            });
+        });
+    });
+    return allTests;
+  }
+  
+  function openTestModal(filterStatus) {
+    const allTests = getAllTestsFlat();
+    let filteredTests = [];
+    let title = '';
+
+    if (filterStatus === 'total') {
+        filteredTests = allTests;
+        title = 'All Test Cases';
+    } else if (filterStatus === 'retries') {
+        filteredTests = allTests.filter(t => t.isRetry);
+        title = 'Tests With Retries (' + reportData.stats.retries + ')';
+    } else { 
+        filteredTests = allTests.filter(t => t.status === filterStatus);
+        const count = reportData.stats[filterStatus];
+        title = filterStatus.charAt(0).toUpperCase() + filterStatus.slice(1) + ' Test Cases (' + count + ')';
+    }
+
+    document.getElementById('modalTitle').textContent = title;
+    
+    // FIX: String concatenation for safety
+    modalHeader.innerHTML = '<tr><th>Suite</th><th>Test Case</th><th>Status</th><th>Duration (s)</th></tr>';
+
+    modalBody.innerHTML = filteredTests.map(t => 
+      '<tr>' +
+        '<td>' + t.suite + '</td>' +
+        '<td>' + t.test + '</td>' +
+        '<td><span class="status-badge status-' + t.status + '">' + t.status + '</span></td>' +
+        '<td>' + (t.duration / 1000).toFixed(2) + '</td>' +
+      '</tr>'
+    ).join('');
+    
+    modal.style.display = 'block';
+  }
+  
+  closeBtn.onclick = function() {
+    modal.style.display = 'none';
+  }
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = 'none';
+    }
+  }
 
   function renderOverview() {
+    getAllTestsFlat(); 
+    
     const { stats, metadata } = reportData;
     const kpiGrid = document.getElementById('kpiGrid');
-    kpiGrid.innerHTML = \`
-      <div class="kpi-card kpi-total"><div class="kpi-value">\${stats.total}</div><div class="kpi-label">Total Tests</div></div>
-      <div class="kpi-card kpi-passed"><div class="kpi-value">\${stats.passed}</div><div class="kpi-label">Passed</div></div>
-      <div class="kpi-card kpi-failed"><div class="kpi-value">\${stats.failed}</div><div class="kpi-label">Failed</div></div>
-      <div class="kpi-card kpi-skipped"><div class="kpi-value">\${stats.skipped}</div><div class="kpi-label">Skipped</div></div>
-      <div class="kpi-card kpi-pass-rate"><div class="kpi-value">\${stats.passRate}</div><div class="kpi-label">Pass Rate</div></div>
-      <div class="kpi-card kpi-duration"><div class="kpi-value">\${stats.totalDuration}</div><div class="kpi-label">Total Duration</div></div>
-    \`;
+    
+    kpiGrid.innerHTML = 
+      '<div class="kpi-card kpi-total" data-status="total"><div class="kpi-value">' + stats.total + '</div><div class="kpi-label">Total Tests</div></div>' +
+      '<div class="kpi-card kpi-passed" data-status="passed"><div class="kpi-value">' + stats.passed + '</div><div class="kpi-label">Passed</div></div>' +
+      '<div class="kpi-card kpi-failed" data-status="failed"><div class="kpi-value">' + stats.failed + '</div><div class="kpi-label">Failed</div></div>' +
+      '<div class="kpi-card kpi-retries" data-status="retries"><div class="kpi-value">' + stats.retries + '</div><div class="kpi-label">Retries</div></div>' +
+      '<div class="kpi-card kpi-skipped" data-status="skipped"><div class="kpi-value">' + stats.skipped + '</div><div class="kpi-label">Skipped</div></div>' +
+      '<div class="kpi-card kpi-pass-rate"><div class="kpi-value">' + stats.passRate + '</div><div class="kpi-label">Pass Rate</div></div>' +
+      '<div class="kpi-card kpi-duration"><div class="kpi-value">' + stats.totalDuration + '</div><div class="kpi-label">Total Duration</div></div>'+
+      '<div class="kpi-card kpi-consistency"><div class="kpi-value">' + stats.passRateConsistency + '</div><div class="kpi-label">Pass Rate Consistency (SD)</div></div>' +
+      '<div class="kpi-card kpi-flaky-percent"><div class="kpi-value">' + stats.flakyPercentage + '</div><div class="kpi-label">Flaky Test Percentage</div></div>' +
+      '<div class="kpi-card kpi-reproducibility"><div class="kpi-value">' + stats.failureReproducibility + '</div><div class="kpi-label">Failure Reproducibility</div></div>';
+      
+    
+    document.querySelectorAll('.kpi-card').forEach(card => {
+        const status = card.getAttribute('data-status');
+        if (status) {
+            card.addEventListener('click', () => openTestModal(status));
+        }
+    });
     
     const metadataGrid = document.getElementById('metadataGrid');
-    metadataGrid.innerHTML = \`
-        <div class="metadata-item"><span class="metadata-label">Start Time</span><span class="metadata-value">\${metadata.startTime}</span></div>
-        <div class="metadata-item"><span class="metadata-label">Total Duration</span><span class="metadata-value">\${metadata.totalDuration}</span></div>
-        <div class="metadata-item"><span class="metadata-label">Browser</span><span class="metadata-value">\${metadata.browser}</span></div>
-        <div class="metadata-item"><span class="metadata-label">Operating System</span><span class="metadata-value">\${metadata.os}</span></div>
-    \`;
+    metadataGrid.innerHTML = 
+        '<div class="metadata-item"><span class="metadata-label">Start Time</span><span class="metadata-value">' + metadata.startTime + '</span></div>' +
+        '<div class="metadata-item"><span class="metadata-label">Total Duration</span><span class="metadata-value">' + metadata.totalDuration + '</span></div>' +
+        '<div class="metadata-item"><span class="metadata-label">Browser</span><span class="metadata-value">' + metadata.browser + '</span></div>' +
+        '<div class="metadata-item"><span class="metadata-label">Operating System</span><span class="metadata-value">' + metadata.os + '</span></div>';
+     
+  const kpiValues = kpiGrid.querySelectorAll('.kpi-value');
+  kpiValues.forEach(kpiValueEl => {
+    const targetText = kpiValueEl.textContent;
+    const isPercentage = targetText.includes('%');
+    const isDuration = targetText.includes('s');
+    const isDecimal = targetText.includes('.');
+    let targetValue = parseFloat(targetText.replace(/[^0-9.]/g, ''));
+    if (isNaN(targetValue)) targetValue = 0;
+    const startValue = 0;
+    const duration = 2000; 
+    let startTime = null;
+    function animate(currentTime) {
+      if (!startTime) startTime = currentTime;
+      const progress = Math.min((currentTime - startTime) / duration, 1);
+      const easedProgress = 1 - Math.pow(1 - progress, 3);
+      let currentValue = startValue + (targetValue - startValue) * easedProgress;
+      if (progress < 1) {
+        if (isPercentage || isDecimal) {
+          kpiValueEl.textContent = currentValue.toFixed(2) + (isPercentage ? '%' : '');
+        } else if (isDuration) {
+          kpiValueEl.textContent = currentValue.toFixed(2) + 's';
+        } else {
+          kpiValueEl.textContent = Math.round(currentValue);
+        }
+        requestAnimationFrame(animate);
+      } else {
+        kpiValueEl.textContent = targetText;
+      }
+    }
+    requestAnimationFrame(animate);
+  });
   }
 
   function renderCategories() {
@@ -603,22 +809,22 @@ const reportData = ${safeReportJson};
       categoryList.innerHTML = '<p>No failed tests categorized.</p>';
       return;
     }
-    categoryList.innerHTML = categories.map(cat => \`
-      <div class="card">
-        <div class="category-header">
-            <span>\${cat.name}</span>
-            <span class="status-badge status-failed">\${cat.count} failed</span>
-        </div>
-        <div class="category-content" style="display: none;">
-            \${cat.tests.map(test => \`
-                <div class="category-test">
-                    <strong>\${test.title}</strong>
-                    <pre>\${test.trace}</pre>
-                </div>
-            \`).join('')}
-        </div>
-      </div>
-    \`).join('');
+    categoryList.innerHTML = categories.map(cat => 
+      '<div class="card">' +
+        '<div class="category-header">' +
+            '<span>' + cat.name + '</span>' +
+            '<span class="status-badge status-failed">' + cat.count + ' failed</span>' +
+        '</div>' +
+        '<div class="category-content" style="display: none;">' +
+            cat.tests.map(test => 
+                '<div class="category-test">' +
+                    '<strong>' + test.title + '</strong>' +
+                    '<pre>' + test.trace + '</pre>' +
+                '</div>'
+            ).join('') +
+        '</div>' +
+      '</div>'
+    ).join('');
 
     document.querySelectorAll('.category-header').forEach(header => {
         header.addEventListener('click', () => {
@@ -633,44 +839,54 @@ const reportData = ${safeReportJson};
     const suitesContainer = document.getElementById('suitesContainer');
     const suitesHeader = document.getElementById('suitesHeader');
     
-    suitesHeader.innerHTML = \`
-        Suites & Tests
-        <div class="header-stats">
-            <span class="status-badge status-passed">\${stats.passed} Passed</span>
-            <span class="status-badge status-failed">\${stats.failed} Failed</span>
-            <span class="status-badge status-skipped">\${stats.skipped} Skipped</span>
-        </div>
-    \`;
+    suitesHeader.innerHTML = 
+        'Suites & Tests' +
+        '<div class="header-stats">' +
+            '<span class="status-badge status-passed">' + stats.passed + ' Passed</span>' +
+            '<span class="status-badge status-failed">' + stats.failed + ' Failed</span>' +
+            '<span class="status-badge status-skipped">' + stats.skipped + ' Skipped</span>' +
+        '</div>';
 
-    suitesContainer.innerHTML = suites.map(suite => \`
-      <div class="card">
-        <div class="suite-header">
-          <svg class="collapse-icon" fill="currentColor" viewBox="0 0 20 20" style="width:20px; height:20px;"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-          \${suite.title}
-        </div>
-        <div class="suite-content" style="display: none;">
-          \${suite.specs.flatMap(spec =>
-            spec.tests.map(test => \`
-            <div class="test-card">
-              <div class="test-card-header">
-                <span style="font-weight: 500;">\${spec.title}</span>
-                <span class="status-badge status-\${test.status}">\${test.status}</span>
-                <span>\${(test.duration / 1000).toFixed(2)}s</span>
-                <span>\${test.history.map(h => \`<span class="dot \${h}"></span>\`).join('')}</span>
-              </div>
-              \${test.logs ? \`
-              <div class="log-row" style="display: none;">
-                <div class="log-container">
-                    <h4>Logs</h4>
-                    <pre>\${test.logs.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>
-                </div>
-              </div>\` : ''}
-            </div>
-            \`)
-          ).join('')}
-        </div>
-      </div>
-    \`).join('');
+    suitesContainer.innerHTML = suites.map(suite => 
+      '<div class="card">' +
+        '<div class="suite-header">' +
+          '<svg class="collapse-icon" fill="currentColor" viewBox="0 0 20 20" style="width:20px; height:20px;"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>' +
+          ' ' + suite.title +
+        '</div>' +
+        '<div class="suite-content" style="display: none;">' +
+          suite.specs.flatMap(spec =>
+            spec.tests.map(test => 
+            '<div class="test-card">' +
+              '<div class="test-card-header">' +
+                '<span style="font-weight: 500;">' + spec.title + '</span>' +
+                '<span class="status-badge status-' + test.status + '">' + test.status + ' ' + (test.flaky ? '<span class="flaky-badge">FLAKY</span>' : '') + '</span>' +
+                '<span>' + (test.duration / 1000).toFixed(2) + 's</span>' +
+                '<span>' + test.history.map(h => '<span class="dot ' + h + '"></span>').join('') + '</span>' +
+                '<span>' +
+                    (test.logs ? '<button class="action-btn toggle-logs">Logs</button>' : '') +
+                    (test.stack ? '<button class="action-btn toggle-stack">Stack</button>' : '') +
+                '</span>' +
+              '</div>' +
+              (test.logs ? 
+              '<div class="log-row" style="display: none;">' +
+                '<div class="log-container">' +
+                    '<h4>Logs</h4>' +
+                    '<pre>' + test.logs.replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</pre>' +
+                '</div>' +
+              '</div>' : '') +
+               (test.stack ? 
+              '<div class="stack-row" style="display: none;">' +
+                '<div class="log-container">' +
+                    '<h4>Error Stack</h4>' +
+                    '<pre>' + test.stack.replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</pre>' +
+                '</div>' +
+              '</div>' : '') +
+            '</div>'
+            )
+          ).join('') +
+        '</div>' +
+      '</div>'
+    ).join('');
 
     document.querySelectorAll('.suite-header').forEach(header => {
       header.addEventListener('click', () => {
@@ -682,22 +898,117 @@ const reportData = ${safeReportJson};
       });
     });
     
-    document.querySelectorAll('.test-card-header').forEach(row => {
-      row.addEventListener('click', (e) => {
-        const logRow = row.nextElementSibling;
-        if (logRow && logRow.classList.contains('log-row')) {
-           logRow.style.display = logRow.style.display === 'none' ? 'block' : 'none';
-        }
+    // Toggle Logs
+    document.querySelectorAll('.toggle-logs').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const card = btn.closest('.test-card');
+          const logRow = card.querySelector('.log-row');
+          if(logRow) logRow.style.display = logRow.style.display === 'none' ? 'block' : 'none';
       });
     });
+
+    // Toggle Stack
+     document.querySelectorAll('.toggle-stack').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const card = btn.closest('.test-card');
+          const stackRow = card.querySelector('.stack-row');
+          if(stackRow) stackRow.style.display = stackRow.style.display === 'none' ? 'block' : 'none';
+      });
+    });
+
+    // Make entire test-card-header clickable to toggle both Logs and Stack
+    document.querySelectorAll('.test-card-header').forEach(header => {
+      header.addEventListener('click', (e) => {
+        const card = header.closest('.test-card');
+        if (!card) return;
+        const logRow = card.querySelector('.log-row');
+        const stackRow = card.querySelector('.stack-row');
+        if (logRow) logRow.style.display = logRow.style.display === 'none' ? 'block' : 'none';
+        if (stackRow) stackRow.style.display = stackRow.style.display === 'none' ? 'block' : 'none';
+      });
+    });
+  }
+
+  function renderIframe() {
+    const container = document.getElementById('iframeContainer');
+    // Always refresh if path exists to prevent blank display on tab switch
+    if (reportData.config.hasExternalHtml && reportData.config.externalHtmlPath) {
+        let src = reportData.config.externalHtmlPath;
+        // Optimization: only set innerHTML once, but ensure it's correct
+        if (container.innerHTML === "") {
+          container.innerHTML = '<iframe src="' + src + '" style="height:80vh; width:100%; border:none;"></iframe>';
+        }
+    } else {
+        container.innerHTML = '<p style="padding:20px; text-align:center; color:var(--muted);">External HTML report not found at ' + reportData.config.externalHtmlPath + '</p>';
+    }
+  }
+
+  function renderTags() {
+    const stats = reportData.tagStats;
+    if (!stats || stats.length === 0) return;
+    
+    // 1. Pie Chart
+    const pieCtx = document.getElementById('tagsPieChart');
+    if (pieCtx && !pieCtx.chart) {
+        new Chart(pieCtx, {
+            type: 'pie',
+            data: {
+                labels: stats.map(s => s.name),
+                datasets: [{
+                    data: stats.map(s => s.total),
+                    backgroundColor: [
+                        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'
+                    ]
+                }]
+            },
+            options: { responsive: true, maintainAspectRatio: false }
+        });
+        pieCtx.chart = true; // Flag to prevent re-render
+    }
+
+    // 2. Bar Chart (Duration)
+    const barCtx = document.getElementById('tagsBarChart');
+     if (barCtx && !barCtx.chart) {
+        new Chart(barCtx, {
+            type: 'bar',
+            data: {
+                labels: stats.map(s => s.name),
+                datasets: [{
+                    label: 'Total Duration (s)',
+                    data: stats.map(s => s.duration / 1000),
+                    backgroundColor: '#36A2EB'
+                }]
+            },
+            options: { responsive: true, maintainAspectRatio: false }
+        });
+        barCtx.chart = true;
+    }
+
+    // 3. Table
+    const tableContainer = document.getElementById('tagsTableContainer');
+    let tableHtml = '<table><thead><tr><th>Tag</th><th>Test Case</th><th>Status</th><th>Duration (s)</th></tr></thead><tbody>';
+    
+    stats.forEach(tag => {
+        tag.tests.forEach(t => {
+             tableHtml += '<tr>' +
+                '<td><span class="status-badge" style="background:#eee; color:#333;">' + tag.name + '</span></td>' +
+                '<td>' + t.title + '</td>' +
+                '<td><span class="status-badge status-' + t.status + '">' + t.status + '</span></td>' +
+                '<td>' + (t.duration / 1000).toFixed(2) + '</td>' +
+             '</tr>';
+        });
+    });
+    tableHtml += '</tbody></table>';
+    tableContainer.innerHTML = tableHtml;
   }
 
   let statusChart, durationChart, historyChart, timelineChart, historicalRunsChart;
 
   function renderCharts() {
     const statusCtx = document.getElementById('statusChart');
-    statusCtx.nextElementSibling.style.display = 'none';
-    statusChart = new Chart(statusCtx, {
+     statusChart = new Chart(statusCtx, {
       type: 'doughnut',
       data: {
         labels: ['Passed', 'Failed', 'Skipped'],
@@ -706,16 +1017,22 @@ const reportData = ${safeReportJson};
           backgroundColor: ['#4CAF50', '#F44336', '#9E9E9E'],
         }]
       },
-      options: { responsive: true, maintainAspectRatio: false, animation: { animateScale: true } }
+      options: { 
+        responsive: true, 
+        maintainAspectRatio: false, 
+        animation: {
+          animateRotate: true,
+          animateScale: true,
+          duration: 1500,
+          easing: 'easeOutQuart'
+        } 
+      }
     });
     
-    // Duration Histogram
     const histogramCtx = document.getElementById('durationHistogram');
-    histogramCtx.nextElementSibling.style.display = 'none';
     const durations = reportData.suites.flatMap(s => s.specs.flatMap(sp => sp.tests.map(t => t.duration / 1000)));
     const labels = ['<1s', '1-2s', '2-5s', '5-10s', '10-30s', '30-60s', '>60s'];
     const data = new Array(labels.length).fill(0);
-    
     durations.forEach(d => {
         if (d < 1) data[0]++;
         else if (d < 2) data[1]++;
@@ -725,7 +1042,6 @@ const reportData = ${safeReportJson};
         else if (d < 60) data[5]++;
         else data[6]++;
     });
-
     new Chart(histogramCtx, {
         type: 'bar',
         data: {
@@ -737,15 +1053,16 @@ const reportData = ${safeReportJson};
             }]
         },
         options: {
-            responsive: true,
-            maintainAspectRatio: false,
+            responsive: true, maintainAspectRatio: false,
+            animation: {
+              duration: 1200, 
+              easing: 'easeOutQuart'
+            },
             scales: { y: { beginAtZero: true, title: { display: true, text: 'Test Count' } } }
         }
     });
 
-
     const historyCtx = document.getElementById('historyChart');
-    historyCtx.nextElementSibling.style.display = 'none';
     historyChart = new Chart(historyCtx, {
       type: 'line',
       data: {
@@ -758,19 +1075,24 @@ const reportData = ${safeReportJson};
           tension: 0.1
         }]
       },
-      options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } } }
+      options: { 
+        responsive: true, 
+        maintainAspectRatio: false,
+        animation: {
+          duration: 1200, 
+          easing: 'easeOutQuart'
+        }, 
+        scales: { y: { beginAtZero: true, max: 100 } } 
+      }
     });
   }
   
   function renderTimeline() {
     const timelineCtx = document.getElementById('timelineChart');
-    timelineCtx.nextElementSibling.style.display = 'none';
-    
-    // Transform timeline data for Chart.js gantt-like chart
     const labels = reportData.timeline.map(t => t.name);
     const datasets = [{
       label: 'Execution Time',
-      data: reportData.timeline.map(t => [t.start, t.start + t.duration]),
+      data: reportData.timeline.map(t => [t.start / 1000, (t.start + t.duration) / 1000]),
       backgroundColor: reportData.timeline.map(t => {
         if (t.status === 'passed') return 'rgba(76, 175, 80, 0.8)';
         if (t.status === 'failed') return 'rgba(244, 67, 54, 0.8)';
@@ -778,23 +1100,20 @@ const reportData = ${safeReportJson};
       }),
     }];
     
-    // Only render chart if there is data
     if (reportData.timeline.length > 0) {
-        timelineCtx.parentElement.style.height = (reportData.timeline.length * 30 + 100) + 'px'; // Dynamic height based on number of tests
+        timelineCtx.parentElement.style.height = (reportData.timeline.length * 30 + 100) + 'px'; 
         timelineChart = new Chart(timelineCtx, {
           type: 'bar',
-          data: {
-            labels: labels,
-            datasets: datasets
-          },
+          data: { labels: labels, datasets: datasets },
           options: {
             indexAxis: 'y',
-            responsive: true,
-            maintainAspectRatio: false,
+            responsive: true, maintainAspectRatio: false,
             plugins: { legend: { display: false } },
-            scales: {
-              x: { min: 0, title: { display: true, text: 'Time (ms)' } },
-            }
+            animation: {
+              duration: 2000, 
+              easing: 'easeOutQuart'
+            },
+            scales: { x: { min: 0, title: { display: true, text: 'Time (s)' } } }
           }
         });
     } else {
@@ -804,11 +1123,8 @@ const reportData = ${safeReportJson};
 
   function renderHistoryGraph() {
       const history = reportData.history;
-      document.getElementById('historyRunsTitle').textContent = \`Historical Runs (Count: \${history.length})\`;
+      document.getElementById('historyRunsTitle').textContent = 'Historical Runs (Count: ' + history.length + ')';
       const historyCtx = document.getElementById('historicalRunsChart');
-      historyCtx.nextElementSibling.style.display = 'none';
-      
-      // Only render chart if there is data
       if (history.length > 0) {
           historicalRunsChart = new Chart(historyCtx, {
               type: 'bar',
@@ -816,60 +1132,24 @@ const reportData = ${safeReportJson};
                   labels: history.map(h => h.date),
                   datasets: [
                       {
-                          type: 'line',
-                          label: 'Pass Rate',
-                          data: history.map(h => h.passRate),
-                          borderColor: 'rgb(255, 159, 64)',
-                          yAxisID: 'y1',
-                          tension: 0.1,
-                          pointRadius: 5,
-                          pointBackgroundColor: 'rgb(255, 159, 64)',
-                          order: 0, // Draw line on top of bars
+                          type: 'line', label: 'Pass Rate', data: history.map(h => h.passRate),
+                          borderColor: 'rgb(255, 159, 64)', yAxisID: 'y1', tension: 0.1, pointRadius: 5, pointBackgroundColor: 'rgb(255, 159, 64)', order: 0, 
                       },
-                      {
-                          type: 'bar',
-                          label: 'Passed',
-                          data: history.map(h => h.passed),
-                          backgroundColor: 'rgba(75, 192, 192, 0.8)',
-                          order: 1,
-                      },
-                      {
-                          type: 'bar',
-                          label: 'Failed',
-                          data: history.map(h => h.failed),
-                          backgroundColor: 'rgba(255, 99, 132, 0.8)',
-                          order: 1,
-                      },
-                      {
-                          type: 'bar',
-                          label: 'Skipped',
-                          data: history.map(h => h.skipped),
-                          backgroundColor: 'rgba(158, 158, 158, 0.8)',
-                          order: 1,
-                      }
+                      { type: 'bar', label: 'Passed', data: history.map(h => h.passed), backgroundColor: '#4CAF50', order: 1 },
+                      { type: 'bar', label: 'Failed', data: history.map(h => h.failed), backgroundColor: 'rgba(255, 99, 132, 0.8)', order: 1 },
+                      { type: 'bar', label: 'Skipped', data: history.map(h => h.skipped), backgroundColor: 'rgba(158, 158, 158, 0.8)', order: 1 }
                   ]
               },
               options: {
-                  responsive: true,
-                  maintainAspectRatio: false,
+                  responsive: true, maintainAspectRatio: false,
+                  animation: {
+                    duration: 1200, 
+                    easing: 'easeOutQuart'
+                  },
                   scales: {
                       x: { stacked: true, },
-                      y: {
-                          stacked: true,
-                          beginAtZero: true,
-                          title: { display: true, text: 'Test Count' }
-                      },
-                      y1: {
-                          position: 'right',
-                          beginAtZero: true,
-                          max: 100,
-                          title: { display: true, text: 'Pass Rate (%)' },
-                          grid: { drawOnChartArea: false }
-                      }
-                  },
-                   tooltips: {
-                      mode: 'index',
-                      intersect: false
+                      y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Test Count' } },
+                      y1: { position: 'right', beginAtZero: true, max: 100, title: { display: true, text: 'Pass Rate (%)' }, grid: { drawOnChartArea: false } }
                   }
               }
           });
@@ -886,22 +1166,16 @@ const reportData = ${safeReportJson};
     const showPassed = filterPassed.checked;
     const showFailed = filterFailed.checked;
     const showSkipped = filterSkipped.checked;
-    
-    // Hide all log rows initially when filters change
-    document.querySelectorAll('.log-row').forEach(logRow => {
-        logRow.style.display = 'none'; 
-    });
-    
+    document.querySelectorAll('.log-row').forEach(logRow => { logRow.style.display = 'none'; });
     document.querySelectorAll('.test-card').forEach(card => {
         const header = card.querySelector('.test-card-header');
         const status = header.querySelector('.status-badge').textContent.toLowerCase();
         let display = false;
-        if (status === 'passed' && showPassed) display = true;
-        if (status === 'failed' && showFailed) display = true;
-        if (status === 'skipped' && showSkipped) display = true;
+        if (status.includes('passed') && showPassed) display = true;
+        if (status.includes('failed') && showFailed) display = true;
+        if (status.includes('skipped') && showSkipped) display = true;
         card.style.display = display ? '' : 'none';
         
-        // Hide the parent suite card if all its tests are hidden
         let parentSuiteContent = card.closest('.suite-content');
         if (parentSuiteContent) {
             let visibleTests = Array.from(parentSuiteContent.querySelectorAll('.test-card')).filter(t => t.style.display !== 'none');
@@ -935,40 +1209,24 @@ const reportData = ${safeReportJson};
     URL.revokeObjectURL(a.href);
   });
   document.getElementById('downloadCsv').addEventListener('click', () => {
-    let csvContent = "data:text/csv;charset=utf-8,Suite,Test,Status,Duration (s),History\\n";
+    let csvContent = "data:text/csv;charset=utf-8,Suite,Test,Status,Duration (s),Flaky,History\\n";
     reportData.suites.forEach(suite => {
       suite.specs.forEach(spec => {
         const testData = spec.tests && spec.tests[0];
         const status = testData ? testData.status : 'N/A';
         const duration = testData ? (testData.duration / 1000).toFixed(2) : 'N/A';
+        const isFlaky = testData?.flaky ? 'Yes' : 'No';
         const history = testData && testData.history ? testData.history.join(" | ") : 'N/A';
-        
-        const row = [\`"\${suite.title.replace(/"/g,'""')}"\`,\`"\${spec.title.replace(/"/g,'""')}"\`,status,duration,history].join(",");
+        const safeSuiteTitle = '"' + suite.title.replace(/"/g,'""') + '"';
+        const safeSpecTitle = '"' + spec.title.replace(/"/g,'""') + '"';
+        const row = [safeSuiteTitle, safeSpecTitle, status, duration, isFlaky, history].join(",");
         csvContent += row + '\\n';
       });
     });
     const encodedUri = encodeURI(csvContent);
     const a = document.createElement('a'); a.href = encodedUri; a.download = 'test_report.csv'; a.click();
   });
-  document.getElementById('downloadPdf').addEventListener('click', () => {
-    const doc = new window.jspdf.jsPDF();
-    const element = document.querySelector('.main-content');
-    html2canvas(element, { scale: 2 }).then(canvas => {
-      const imgData = canvas.toDataURL('image/png');
-      const imgWidth = 210; const pageHeight = 295;  
-      const imgHeight = canvas.height * imgWidth / canvas.width;
-      let heightLeft = imgHeight; let position = 0;
-      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-      heightLeft -= pageHeight;
-      while (heightLeft >= 0) {
-        position = heightLeft - imgHeight;
-        doc.addPage();
-        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-      }
-      doc.save('report.pdf');
-    });
-  });
-
+ 
   renderOverview();
   renderCategories();
   renderSuites();