qa360 1.4.5 → 2.0.1

package/dist/core/coverage/vault.js

@@ -0,0 +1,405 @@
+/**
+ * Coverage Vault Integration
+ *
+ * Integrates coverage data storage and retrieval with the Evidence Vault.
+ */
+import { promisify } from 'util';
+/**
+ * Coverage Vault class
+ */
+export class CoverageVault {
+    db;
+    dbRun;
+    dbAll;
+    dbGet;
+    constructor(db) {
+        this.db = db;
+        this.dbRun = promisify(db.run.bind(db));
+        this.dbAll = promisify(db.all.bind(db));
+        this.dbGet = promisify(db.get.bind(db));
+    }
+    /**
+     * Initialize coverage tables
+     */
+    async initialize() {
+        const schema = `
+      -- Coverage metrics table
+      CREATE TABLE IF NOT EXISTS coverage_metrics (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          run_id TEXT NOT NULL REFERENCES runs(id) ON DELETE CASCADE,
+          gate TEXT NOT NULL,
+          file_path TEXT NOT NULL,
+          total_lines INTEGER DEFAULT 0,
+          covered_lines INTEGER DEFAULT 0,
+          branch_coverage REAL DEFAULT 0,
+          function_coverage REAL DEFAULT 0,
+          line_coverage REAL DEFAULT 0,
+          statement_coverage REAL DEFAULT 0,
+          total_branches INTEGER DEFAULT 0,
+          covered_branches INTEGER DEFAULT 0,
+          total_functions INTEGER DEFAULT 0,
+          covered_functions INTEGER DEFAULT 0,
+          total_statements INTEGER DEFAULT 0,
+          covered_statements INTEGER DEFAULT 0,
+          uncovered_lines TEXT,
+          created_at INTEGER NOT NULL DEFAULT (strftime('%s', 'now') * 1000)
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_coverage_metrics_run_id ON coverage_metrics(run_id);
+      CREATE INDEX IF NOT EXISTS idx_coverage_metrics_gate ON coverage_metrics(gate);
+      CREATE INDEX IF NOT EXISTS idx_coverage_metrics_file_path ON coverage_metrics(file_path);
+      CREATE INDEX IF NOT EXISTS idx_coverage_metrics_run_gate ON coverage_metrics(run_id, gate);
+
+      -- Coverage trends table
+      CREATE TABLE IF NOT EXISTS coverage_trends (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          test_id TEXT NOT NULL,
+          file_path TEXT NOT NULL,
+          run_id TEXT NOT NULL REFERENCES runs(id) ON DELETE CASCADE,
+          coverage_type TEXT NOT NULL,
+          coverage_value REAL NOT NULL,
+          date INTEGER NOT NULL,
+          commit TEXT,
+          branch TEXT,
+          UNIQUE(test_id, file_path, coverage_type, date)
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_coverage_trends_test_id ON coverage_trends(test_id);
+      CREATE INDEX IF NOT EXISTS idx_coverage_trends_file_path ON coverage_trends(file_path);
+      CREATE INDEX IF NOT EXISTS idx_coverage_trends_date ON coverage_trends(date);
+      CREATE INDEX IF NOT EXISTS idx_coverage_trends_type ON coverage_trends(coverage_type);
+
+      -- Coverage summary table (aggregate metrics per run)
+      CREATE TABLE IF NOT EXISTS coverage_summary (
+          run_id TEXT PRIMARY KEY REFERENCES runs(id) ON DELETE CASCADE,
+          line_coverage REAL NOT NULL DEFAULT 0,
+          branch_coverage REAL NOT NULL DEFAULT 0,
+          function_coverage REAL NOT NULL DEFAULT 0,
+          statement_coverage REAL NOT NULL DEFAULT 0,
+          total_files INTEGER DEFAULT 0,
+          files_meeting_threshold INTEGER DEFAULT 0,
+          total_lines INTEGER DEFAULT 0,
+          covered_lines INTEGER DEFAULT 0,
+          thresholds_met INTEGER DEFAULT 1,
+          created_at INTEGER NOT NULL DEFAULT (strftime('%s', 'now') * 1000)
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_coverage_summary_created_at ON coverage_summary(created_at);
+    `;
+        const statements = schema
+            .split(';')
+            .map(s => s.trim())
+            .filter(s => s.length > 0);
+        for (const statement of statements) {
+            await this.dbRun(statement, []);
+        }
+    }
+    /**
+     * Store coverage result for a run
+     */
+    async storeCoverage(runId, result) {
+        // Store per-file metrics
+        for (const [filePath, fileCoverage] of Object.entries(result.files)) {
+            const record = {
+                run_id: runId,
+                gate: result.gate,
+                file_path: filePath,
+                total_lines: fileCoverage.totalLines,
+                covered_lines: fileCoverage.coveredLines,
+                branch_coverage: fileCoverage.branchCoverage,
+                function_coverage: fileCoverage.functionCoverage,
+                line_coverage: fileCoverage.lineCoverage,
+                statement_coverage: fileCoverage.statementCoverage,
+                total_branches: fileCoverage.totalBranches,
+                covered_branches: fileCoverage.coveredBranches,
+                total_functions: fileCoverage.totalFunctions,
+                covered_functions: fileCoverage.coveredFunctions,
+                total_statements: fileCoverage.totalStatements,
+                covered_statements: fileCoverage.coveredStatements,
+                uncovered_lines: JSON.stringify(fileCoverage.uncoveredLines),
+                created_at: Date.now()
+            };
+            await this.dbRun(`INSERT INTO coverage_metrics (
+          run_id, gate, file_path, total_lines, covered_lines,
+          branch_coverage, function_coverage, line_coverage, statement_coverage,
+          total_branches, covered_branches, total_functions, covered_functions,
+          total_statements, covered_statements, uncovered_lines, created_at
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
+                record.run_id, record.gate, record.file_path, record.total_lines, record.covered_lines,
+                record.branch_coverage, record.function_coverage, record.line_coverage, record.statement_coverage,
+                record.total_branches, record.covered_branches, record.total_functions, record.covered_functions,
+                record.total_statements, record.covered_statements, record.uncovered_lines, record.created_at
+            ]);
+        }
+        // Store aggregate summary
+        await this.storeSummary(runId, result.metrics);
+    }
+    /**
+     * Store coverage summary for a run
+     */
+    async storeSummary(runId, metrics) {
+        await this.dbRun(`INSERT OR REPLACE INTO coverage_summary (
+        run_id, line_coverage, branch_coverage, function_coverage, statement_coverage,
+        total_files, files_meeting_threshold, total_lines, covered_lines, thresholds_met, created_at
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
+            runId,
+            metrics.lineCoverage,
+            metrics.branchCoverage,
+            metrics.functionCoverage,
+            metrics.statementCoverage,
+            metrics.totalFiles,
+            metrics.filesMeetingThreshold,
+            metrics.totalLines,
+            metrics.coveredLines,
+            1, // thresholds_met placeholder
+            Date.now()
+        ]);
+    }
+    /**
+     * Retrieve coverage for a run
+     */
+    async getCoverage(runId) {
+        const rows = await this.dbAll(`SELECT * FROM coverage_metrics WHERE run_id = ?`, [runId]);
+        if (rows.length === 0) {
+            return null;
+        }
+        const files = {};
+        let gate = 'unknown';
+        for (const row of rows) {
+            gate = row.gate;
+            files[row.file_path] = {
+                path: row.file_path,
+                totalLines: row.total_lines,
+                coveredLines: row.covered_lines,
+                lineCoverage: row.line_coverage,
+                totalBranches: row.total_branches,
+                coveredBranches: row.covered_branches,
+                branchCoverage: row.branch_coverage,
+                totalFunctions: row.total_functions,
+                coveredFunctions: row.covered_functions,
+                functionCoverage: row.function_coverage,
+                totalStatements: row.total_statements,
+                coveredStatements: row.covered_statements,
+                statementCoverage: row.statement_coverage,
+                uncoveredLines: JSON.parse(row.uncovered_lines || '[]'),
+                partiallyCoveredLines: [],
+                branchesByLine: {}
+            };
+        }
+        // Get summary
+        const summary = await this.getSummary(runId);
+        const metrics = summary || {
+            lineCoverage: 0,
+            branchCoverage: 0,
+            functionCoverage: 0,
+            statementCoverage: 0,
+            totalFiles: Object.keys(files).length,
+            filesWithCoverage: Object.keys(files).length,
+            filesMeetingThreshold: 0,
+            totalLines: 0,
+            coveredLines: 0,
+            timestamp: Date.now()
+        };
+        return {
+            source: 'custom',
+            gate,
+            files,
+            metrics,
+            format: 'json',
+            timestamp: Date.now()
+        };
+    }
+    /**
+     * Get coverage summary for a run
+     */
+    async getSummary(runId) {
+        const row = await this.dbGet(`SELECT * FROM coverage_summary WHERE run_id = ?`, [runId]);
+        if (!row) {
+            return null;
+        }
+        return {
+            lineCoverage: row.line_coverage,
+            branchCoverage: row.branch_coverage,
+            functionCoverage: row.function_coverage,
+            statementCoverage: row.statement_coverage,
+            totalFiles: row.total_files,
+            filesWithCoverage: row.total_files,
+            filesMeetingThreshold: row.files_meeting_threshold,
+            totalLines: row.total_lines,
+            coveredLines: row.covered_lines,
+            timestamp: row.created_at
+        };
+    }
+    /**
+     * Get coverage trends for a file
+     */
+    async getTrends(filePath, coverageType = 'line', limit = 30) {
+        const rows = await this.dbAll(`SELECT * FROM coverage_trends
+       WHERE file_path = ? AND coverage_type = ?
+       ORDER BY date DESC
+       LIMIT ?`, [filePath, coverageType, limit]);
+        const trends = [];
+        for (let i = rows.length - 1; i >= 0; i--) {
+            const row = rows[i];
+            const prev = i > 0 ? rows[i - 1] : null;
+            trends.push({
+                runId: row.run_id,
+                timestamp: row.date,
+                coverage: row.coverage_value,
+                type: coverageType,
+                change: prev ? row.coverage_value - prev.coverage_value : 0,
+                commit: row.commit,
+                branch: row.branch
+            });
+        }
+        return trends;
+    }
+    /**
+     * Get overall coverage trends
+     */
+    async getOverallTrends(coverageType = 'line', limit = 30) {
+        const rows = await this.dbAll(`SELECT
+        run_id,
+        ${coverageType}_coverage as coverage_value,
+        created_at as date
+       FROM coverage_summary
+       ORDER BY date DESC
+       LIMIT ?`, [limit]);
+        const trends = [];
+        for (let i = rows.length - 1; i >= 0; i--) {
+            const row = rows[i];
+            const prev = i > 0 ? rows[i - 1] : null;
+            trends.push({
+                runId: row.run_id,
+                timestamp: row.date,
+                coverage: row.coverage_value,
+                type: coverageType,
+                change: prev ? row.coverage_value - prev.coverage_value : 0
+            });
+        }
+        return trends;
+    }
+    /**
+     * Get coverage by gate
+     */
+    async getCoverageByGate(gate, limit = 10) {
+        const rows = await this.dbAll(`SELECT
+        cs.line_coverage,
+        cs.branch_coverage,
+        cs.function_coverage,
+        cs.statement_coverage,
+        cs.total_files,
+        cs.files_meeting_threshold,
+        cs.total_lines,
+        cs.covered_lines,
+        cs.created_at as timestamp
+       FROM coverage_summary cs
+       JOIN runs r ON cs.run_id = r.id
+       JOIN gates g ON g.run_id = r.id
+       WHERE g.name = ?
+       ORDER BY cs.created_at DESC
+       LIMIT ?`, [gate, limit]);
+        return rows.map(row => ({
+            lineCoverage: row.line_coverage,
+            branchCoverage: row.branch_coverage,
+            functionCoverage: row.function_coverage,
+            statementCoverage: row.statement_coverage,
+            totalFiles: row.total_files,
+            filesWithCoverage: row.total_files,
+            filesMeetingThreshold: row.files_meeting_threshold,
+            totalLines: row.total_lines,
+            coveredLines: row.covered_lines,
+            timestamp: row.timestamp
+        }));
+    }
+    /**
+     * Get files with lowest coverage
+     */
+    async getLowestCoverageFiles(limit = 10) {
+        const rows = await this.dbAll(`SELECT
+        file_path,
+        AVG(line_coverage) as avg_coverage,
+        gate
+       FROM coverage_metrics
+       GROUP BY file_path
+       ORDER BY avg_coverage ASC
+       LIMIT ?`, [limit]);
+        return rows.map(row => ({
+            filePath: row.file_path,
+            coverage: row.avg_coverage,
+            gate: row.gate
+        }));
+    }
+    /**
+     * Get files with highest coverage
+     */
+    async getHighestCoverageFiles(limit = 10) {
+        const rows = await this.dbAll(`SELECT
+        file_path,
+        AVG(line_coverage) as avg_coverage,
+        gate
+       FROM coverage_metrics
+       GROUP BY file_path
+       ORDER BY avg_coverage DESC
+       LIMIT ?`, [limit]);
+        return rows.map(row => ({
+            filePath: row.file_path,
+            coverage: row.avg_coverage,
+            gate: row.gate
+        }));
+    }
+    /**
+     * Get coverage statistics across all runs
+     */
+    async getStatistics() {
+        const totalRuns = await this.dbGet(`SELECT COUNT(DISTINCT run_id) as count FROM coverage_summary`, []);
+        const averages = await this.dbGet(`SELECT
+        AVG(line_coverage) as line,
+        AVG(branch_coverage) as branch,
+        AVG(function_coverage) as function
+       FROM coverage_summary`, []);
+        const best = await this.dbGet(`SELECT run_id, line_coverage FROM coverage_summary ORDER BY line_coverage DESC LIMIT 1`, []);
+        const worst = await this.dbGet(`SELECT run_id, line_coverage FROM coverage_summary ORDER BY line_coverage ASC LIMIT 1`, []);
+        return {
+            totalRuns: totalRuns?.count || 0,
+            averageLineCoverage: averages?.line || 0,
+            averageBranchCoverage: averages?.branch || 0,
+            averageFunctionCoverage: averages?.function || 0,
+            bestCoverage: { runId: best?.run_id || '', coverage: best?.line_coverage || 0 },
+            worstCoverage: { runId: worst?.run_id || '', coverage: worst?.line_coverage || 0 }
+        };
+    }
+    /**
+     * Delete coverage data for a run
+     */
+    async deleteCoverage(runId) {
+        await this.dbRun(`DELETE FROM coverage_metrics WHERE run_id = ?`, [runId]);
+        await this.dbRun(`DELETE FROM coverage_summary WHERE run_id = ?`, [runId]);
+        await this.dbRun(`DELETE FROM coverage_trends WHERE run_id = ?`, [runId]);
+    }
+    /**
+     * Get recent coverage changes (comparison with previous run)
+     */
+    async getRecentChanges(limit = 5) {
+        const rows = await this.dbAll(`SELECT
+        run_id,
+        created_at as timestamp,
+        line_coverage
+       FROM coverage_summary
+       ORDER BY created_at DESC
+       LIMIT ?`, [limit * 2] // Get extra to calculate changes
+        );
+        const result = [];
+        for (let i = 0; i < Math.min(rows.length - 1, limit); i++) {
+            const current = rows[i];
+            const previous = rows[i + 1];
+            result.push({
+                runId: current.run_id,
+                timestamp: current.timestamp,
+                lineCoverage: current.line_coverage,
+                change: previous ? current.line_coverage - previous.line_coverage : 0
+            });
+        }
+        return result;
+    }
+}

package/dist/core/dashboard/assets.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dashboard Assets - HTML/CSS/JS for the web dashboard
+ * Embedded as strings to avoid external file dependencies
+ */
+export declare const DASHBOARD_HTML = "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>QA360 - Test Execution Dashboard</title>\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    :root {\n      --bg-primary: #0d1117;\n      --bg-secondary: #161b22;\n      --bg-tertiary: #21262d;\n      --border: #30363d;\n      --text-primary: #c9d1d9;\n      --text-secondary: #8b949e;\n      --accent: #58a6ff;\n      --success: #3fb950;\n      --danger: #f85149;\n      --warning: #d29922;\n      --pending: #8b949e;\n    }\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      background: var(--bg-primary);\n      color: var(--text-primary);\n      min-height: 100vh;\n      line-height: 1.5;\n    }\n    .container {\n      max-width: 1400px;\n      margin: 0 auto;\n      padding: 20px;\n    }\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 20px;\n      background: var(--bg-secondary);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      margin-bottom: 20px;\n    }\n    .header h1 {\n      font-size: 24px;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .badge {\n      padding: 4px 12px;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n    .badge.idle { background: var(--bg-tertiary); color: var(--pending); }\n    .badge.running { background: rgba(88, 166, 255, 0.15); color: var(--accent); animation: pulse 2s infinite; }\n    .badge.completed { background: rgba(63, 185, 80, 0.15); color: var(--success); }\n    .badge.failed { background: rgba(248, 81, 73, 0.15); color: var(--danger); }\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.7; }\n    }\n    .stats {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 15px;\n      margin-bottom: 20px;\n    }\n    .stat-card {\n      background: var(--bg-secondary);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      padding: 20px;\n    }\n    .stat-label {\n      font-size: 12px;\n      color: var(--text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n    .stat-value {\n      font-size: 32px;\n      font-weight: 700;\n      margin-top: 5px;\n    }\n    .stat-value.success { color: var(--success); }\n    .stat-value.danger { color: var(--danger); }\n    .progress-section {\n      background: var(--bg-secondary);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      padding: 20px;\n      margin-bottom: 20px;\n    }\n    .progress-bar {\n      height: 8px;\n      background: var(--bg-tertiary);\n      border-radius: 4px;\n      overflow: hidden;\n      margin-top: 10px;\n    }\n    .progress-fill {\n      height: 100%;\n      background: linear-gradient(90deg, var(--accent), var(--success));\n      transition: width 0.3s ease;\n    }\n    .gates-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n      gap: 15px;\n    }\n    .gate-card {\n      background: var(--bg-secondary);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      padding: 15px;\n      transition: all 0.2s ease;\n    }\n    .gate-card:hover {\n      border-color: var(--accent);\n    }\n    .gate-card.running {\n      border-color: var(--accent);\n      box-shadow: 0 0 0 1px var(--accent);\n    }\n    .gate-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n    .gate-name {\n      font-weight: 600;\n    }\n    .gate-status {\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n    }\n    .gate-status.pending { background: var(--pending); }\n    .gate-status.running { background: var(--accent); animation: pulse 1s infinite; }\n    .gate-status.passed { background: var(--success); }\n    .gate-status.failed { background: var(--danger); }\n    .gate-status.skipped { background: var(--pending); }\n    .gate-tests {\n      font-size: 13px;\n      color: var(--text-secondary);\n    }\n    .gate-duration {\n      font-size: 12px;\n      color: var(--text-secondary);\n      margin-top: 5px;\n    }\n    .footer {\n      text-align: center;\n      padding: 20px;\n      color: var(--text-secondary);\n      font-size: 13px;\n    }\n    .reconnect-info {\n      text-align: center;\n      padding: 10px;\n      background: var(--bg-tertiary);\n      border-radius: 4px;\n      margin-bottom: 20px;\n      font-size: 12px;\n      color: var(--text-secondary);\n    }\n    .flakiness-section {\n      background: var(--bg-secondary);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      padding: 20px;\n      margin-bottom: 20px;\n    }\n    .flakiness-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 15px;\n    }\n    .flakiness-title {\n      font-size: 18px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .flakiness-score {\n      font-size: 48px;\n      font-weight: 700;\n      text-align: center;\n      padding: 15px;\n      border-radius: 8px;\n      background: var(--bg-tertiary);\n    }\n    .flakiness-score.legendary { color: #3fb950; }\n    .flakiness-score.solid { color: #3fb950; }\n    .flakiness-score.good { color: #d29922; }\n    .flakiness-score.shaky { color: #d29922; }\n    .flakiness-score.unstable { color: #f85149; }\n    .flakiness-score-label {\n      text-align: center;\n      font-size: 14px;\n      color: var(--text-secondary);\n      margin-top: 5px;\n    }\n    .flakiness-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n      gap: 10px;\n      margin-top: 15px;\n    }\n    .flakiness-dist-item {\n      background: var(--bg-tertiary);\n      border-radius: 6px;\n      padding: 10px;\n      text-align: center;\n    }\n    .flakiness-dist-emoji {\n      font-size: 20px;\n    }\n    .flakiness-dist-label {\n      font-size: 11px;\n      color: var(--text-secondary);\n      margin-top: 4px;\n    }\n    .flakiness-dist-value {\n      font-size: 20px;\n      font-weight: 600;\n      margin-top: 4px;\n    }\n    .quarantine-list {\n      margin-top: 15px;\n    }\n    .quarantine-item {\n      background: var(--bg-tertiary);\n      border-left: 3px solid var(--danger);\n      border-radius: 4px;\n      padding: 12px;\n      margin-bottom: 10px;\n    }\n    .quarantine-item.resolved {\n      border-left-color: var(--success);\n      opacity: 0.7;\n    }\n    .quarantine-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 6px;\n    }\n    .quarantine-test-name {\n      font-weight: 600;\n    }\n    .quarantine-badge {\n      padding: 2px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n    .quarantine-badge.active {\n      background: rgba(248, 81, 73, 0.15);\n      color: var(--danger);\n    }\n    .quarantine-badge.resolved {\n      background: rgba(63, 185, 80, 0.15);\n      color: var(--success);\n    }\n    .quarantine-reason {\n      font-size: 13px;\n      color: var(--text-secondary);\n    }\n    .quarantine-meta {\n      font-size: 11px;\n      color: var(--text-secondary);\n      margin-top: 6px;\n    }\n    .patterns-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 10px;\n      margin-top: 15px;\n    }\n    .pattern-card {\n      background: var(--bg-tertiary);\n      border-radius: 6px;\n      padding: 12px;\n    }\n    .pattern-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n    .pattern-type {\n      font-size: 12px;\n      font-weight: 600;\n      text-transform: uppercase;\n      color: var(--accent);\n    }\n    .pattern-confidence {\n      font-size: 11px;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(88, 166, 255, 0.15);\n      color: var(--accent);\n    }\n    .pattern-test {\n      font-size: 13px;\n      font-weight: 500;\n      margin-bottom: 4px;\n    }\n    .pattern-description {\n      font-size: 12px;\n      color: var(--text-secondary);\n      margin-bottom: 6px;\n    }\n    .pattern-fix {\n      font-size: 11px;\n      color: var(--success);\n    }\n    .section-tabs {\n      display: flex;\n      gap: 10px;\n      margin-bottom: 15px;\n      border-bottom: 1px solid var(--border);\n    }\n    .tab {\n      padding: 8px 16px;\n      cursor: pointer;\n      border-bottom: 2px solid transparent;\n      color: var(--text-secondary);\n      transition: all 0.2s;\n    }\n    .tab:hover {\n      color: var(--text-primary);\n    }\n    .tab.active {\n      color: var(--accent);\n      border-bottom-color: var(--accent);\n    }\n    .tab-content {\n      display: none;\n    }\n    .tab-content.active {\n      display: block;\n    }\n    .empty-state {\n      text-align: center;\n      padding: 30px;\n      color: var(--text-secondary);\n    }\n    .empty-state-icon {\n      font-size: 40px;\n      margin-bottom: 10px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"container\">\n    <div class=\"header\">\n      <h1>\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M12 2L2 7l10 5 10-5-10-5z\"/>\n          <path d=\"M2 17l10 5 10-5\"/>\n          <path d=\"M2 12l10 5 10-5\"/>\n        </svg>\n        QA360 Dashboard\n      </h1>\n      <span id=\"status-badge\" class=\"badge idle\">Idle</span>\n    </div>\n\n    <div class=\"reconnect-info\" id=\"connection-status\">\n      Connecting...\n    </div>\n\n    <div class=\"stats\">\n      <div class=\"stat-card\">\n        <div class=\"stat-label\">Total Gates</div>\n        <div class=\"stat-value\" id=\"total-gates\">0</div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-label\">Passed</div>\n        <div class=\"stat-value success\" id=\"passed-gates\">0</div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-label\">Failed</div>\n        <div class=\"stat-value danger\" id=\"failed-gates\">0</div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-label\">Duration</div>\n        <div class=\"stat-value\" id=\"duration\">0s</div>\n      </div>\n    </div>\n\n    <div class=\"progress-section\">\n      <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n        <span id=\"phase-label\">Ready to start</span>\n        <span id=\"progress-percent\">0%</span>\n      </div>\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill\" id=\"progress-fill\" style=\"width: 0%\"></div>\n      </div>\n    </div>\n\n    <!-- Flakiness Section -->\n    <div class=\"flakiness-section\" id=\"flakiness-section\" style=\"display: none;\">\n      <div class=\"flakiness-header\">\n        <div class=\"flakiness-title\">\n          <span>\uD83C\uDFB2</span>\n          <span>Test Flakiness</span>\n        </div>\n        <span id=\"flakiness-badge\" class=\"badge\"></span>\n      </div>\n\n      <div class=\"section-tabs\">\n        <div class=\"tab active\" data-tab=\"overview\">Overview</div>\n        <div class=\"tab\" data-tab=\"quarantine\">Quarantine</div>\n        <div class=\"tab\" data-tab=\"patterns\">Patterns</div>\n      </div>\n\n      <!-- Overview Tab -->\n      <div class=\"tab-content active\" id=\"tab-overview\">\n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;\">\n          <div>\n            <div class=\"flakiness-score\" id=\"flakiness-score\">-</div>\n            <div class=\"flakiness-score-label\">Average Score</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Total Tests</div>\n            <div class=\"stat-value\" id=\"flakiness-total\">0</div>\n          </div>\n        </div>\n\n        <div class=\"flakiness-grid\">\n          <div class=\"flakiness-dist-item\">\n            <div class=\"flakiness-dist-emoji\">\uD83D\uDFE2</div>\n            <div class=\"flakiness-dist-label\">Legendary</div>\n            <div class=\"flakiness-dist-value\" id=\"dist-legendary\">0</div>\n          </div>\n          <div class=\"flakiness-dist-item\">\n            <div class=\"flakiness-dist-emoji\">\uD83D\uDFE2</div>\n            <div class=\"flakiness-dist-label\">Solid</div>\n            <div class=\"flakiness-dist-value\" id=\"dist-solid\">0</div>\n          </div>\n          <div class=\"flakiness-dist-item\">\n            <div class=\"flakiness-dist-emoji\">\uD83D\uDFE1</div>\n            <div class=\"flakiness-dist-label\">Good</div>\n            <div class=\"flakiness-dist-value\" id=\"dist-good\">0</div>\n          </div>\n          <div class=\"flakiness-dist-item\">\n            <div class=\"flakiness-dist-emoji\">\uD83D\uDFE0</div>\n            <div class=\"flakiness-dist-label\">Shaky</div>\n            <div class=\"flakiness-dist-value\" id=\"dist-shaky\">0</div>\n          </div>\n          <div class=\"flakiness-dist-item\">\n            <div class=\"flakiness-dist-emoji\">\uD83D\uDD34</div>\n            <div class=\"flakiness-dist-label\">Unstable</div>\n            <div class=\"flakiness-dist-value\" id=\"dist-unstable\">0</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Quarantine Tab -->\n      <div class=\"tab-content\" id=\"tab-quarantine\">\n        <div id=\"quarantine-list\" class=\"quarantine-list\"></div>\n      </div>\n\n      <!-- Patterns Tab -->\n      <div class=\"tab-content\" id=\"tab-patterns\">\n        <div id=\"patterns-grid\" class=\"patterns-grid\"></div>\n      </div>\n    </div>\n\n    <div class=\"gates-grid\" id=\"gates-container\"></div>\n\n    <div class=\"footer\">\n      QA360 v1.4.7 - Real-time test execution monitoring\n    </div>\n  </div>\n\n  <script>\n    let eventSource = null;\n    let reconnectTimer = null;\n\n    // Tab switching\n    document.querySelectorAll('.tab').forEach(tab => {\n      tab.addEventListener('click', () => {\n        const tabName = tab.dataset.tab;\n        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));\n        tab.classList.add('active');\n        document.getElementById('tab-' + tabName).classList.add('active');\n      });\n    });\n\n    function connect() {\n      eventSource = new EventSource('/events');\n\n      eventSource.onopen = () => {\n        console.log('Connected to dashboard');\n        document.getElementById('connection-status').textContent = 'Connected';\n        document.getElementById('connection-status').style.display = 'none';\n        if (reconnectTimer) {\n          clearTimeout(reconnectTimer);\n          reconnectTimer = null;\n        }\n      };\n\n      eventSource.onmessage = (event) => {\n        const state = JSON.parse(event.data);\n        updateState(state);\n      };\n\n      eventSource.onerror = (error) => {\n        console.error('SSE error:', error);\n        document.getElementById('connection-status').textContent = 'Disconnected, reconnecting...';\n        document.getElementById('connection-status').style.display = 'block';\n        if (eventSource) {\n          eventSource.close();\n        }\n        reconnectTimer = setTimeout(connect, 2000);\n      };\n    }\n\n    function updateState(state) {\n      // Update status badge\n      const badge = document.getElementById('status-badge');\n      badge.className = 'badge ' + state.status;\n      badge.textContent = state.status;\n\n      // Update stats\n      document.getElementById('total-gates').textContent = state.gates.length;\n      document.getElementById('passed-gates').textContent =\n        state.gates.filter(g => g.status === 'passed').length;\n      document.getElementById('failed-gates').textContent =\n        state.gates.filter(g => g.status === 'failed').length;\n      document.getElementById('duration').textContent = formatDuration(state.elapsed);\n\n      // Update progress\n      document.getElementById('phase-label').textContent = state.currentPhase || 'Ready';\n      document.getElementById('progress-percent').textContent = state.progress.toFixed(1) + '%';\n      document.getElementById('progress-fill').style.width = state.progress + '%';\n\n      // Update flakiness section\n      updateFlakiness(state.flakiness);\n\n      // Update gates\n      renderGates(state.gates);\n    }\n\n    function updateFlakiness(flakiness) {\n      const section = document.getElementById('flakiness-section');\n      if (!flakiness || !flakiness.enabled) {\n        section.style.display = 'none';\n        return;\n      }\n\n      section.style.display = 'block';\n\n      // Update badge\n      const badge = document.getElementById('flakiness-badge');\n      const scoreClass = getScoreClass(flakiness.averageScore);\n      badge.className = 'badge ' + scoreClass;\n      badge.textContent = Math.round(flakiness.averageScore) + '%';\n\n      // Update score display\n      const scoreEl = document.getElementById('flakiness-score');\n      scoreEl.textContent = Math.round(flakiness.averageScore) + '%';\n      scoreEl.className = 'flakiness-score ' + scoreClass;\n\n      // Update total tests\n      document.getElementById('flakiness-total').textContent = flakiness.totalTests;\n\n      // Update distribution\n      document.getElementById('dist-legendary').textContent = flakiness.distribution.legendary;\n      document.getElementById('dist-solid').textContent = flakiness.distribution.solid;\n      document.getElementById('dist-good').textContent = flakiness.distribution.good;\n      document.getElementById('dist-shaky').textContent = flakiness.distribution.shaky;\n      document.getElementById('dist-unstable').textContent = flakiness.distribution.unstable;\n\n      // Update quarantine list\n      renderQuarantine(flakiness.quarantined);\n\n      // Update patterns\n      renderPatterns(flakiness.recentPatterns);\n    }\n\n    function getScoreClass(score) {\n      if (score >= 90) return 'legendary';\n      if (score >= 75) return 'good';\n      if (score >= 50) return 'shaky';\n      return 'unstable';\n    }\n\n    function renderQuarantine(quarantined) {\n      const container = document.getElementById('quarantine-list');\n      if (!quarantined || quarantined.length === 0) {\n        container.innerHTML = `\n          <div class=\"empty-state\">\n            <div class=\"empty-state-icon\">\uD83D\uDEAB</div>\n            <div>No tests in quarantine</div>\n          </div>\n        `;\n        return;\n      }\n\n      container.innerHTML = quarantined.map(q => `\n        <div class=\"quarantine-item ${q.resolved ? 'resolved' : ''}\">\n          <div class=\"quarantine-header\">\n            <span class=\"quarantine-test-name\">${q.testName}</span>\n            <span class=\"quarantine-badge ${q.resolved ? 'resolved' : 'active'}\">\n              ${q.resolved ? 'Resolved' : 'Active'}\n            </span>\n          </div>\n          <div class=\"quarantine-reason\">${q.reason}</div>\n          <div class=\"quarantine-meta\">\n            ${q.gate} \u2022 Score: ${q.score}% \u2022 ${new Date(q.quarantinedAt).toLocaleDateString()}\n          </div>\n        </div>\n      `).join('');\n    }\n\n    function renderPatterns(patterns) {\n      const container = document.getElementById('patterns-grid');\n      if (!patterns || patterns.length === 0) {\n        container.innerHTML = `\n          <div class=\"empty-state\" style=\"grid-column: 1 / -1;\">\n            <div class=\"empty-state-icon\">\uD83D\uDD0D</div>\n            <div>No flakiness patterns detected</div>\n          </div>\n        `;\n        return;\n      }\n\n      container.innerHTML = patterns.map(p => `\n        <div class=\"pattern-card\">\n          <div class=\"pattern-header\">\n            <span class=\"pattern-type\">${p.patternType.replace(/_/g, ' ')}</span>\n            <span class=\"pattern-confidence\">${Math.round(p.confidence * 100)}% confidence</span>\n          </div>\n          <div class=\"pattern-test\">${p.testName}</div>\n          <div class=\"pattern-description\">${p.description}</div>\n          <div class=\"pattern-fix\">\uD83D\uDCA1 ${p.suggestedFix}</div>\n          <div style=\"font-size: 10px; color: var(--text-secondary); margin-top: 6px;\">\n            Detected ${p.detectionCount}x\n          </div>\n        </div>\n      `).join('');\n    }\n\n    function renderGates(gates) {\n      const container = document.getElementById('gates-container');\n      container.innerHTML = gates.map(gate => `\n        <div class=\"gate-card ${gate.status}\">\n          <div class=\"gate-header\">\n            <span class=\"gate-name\">${gate.name}</span>\n            <span class=\"gate-status ${gate.status}\"></span>\n          </div>\n          <div class=\"gate-tests\">\n            ${gate.testsTotal ? `${gate.testsPassed || 0}/${gate.testsTotal}` : '--'}\n            ${gate.testsFailed ? ` (${gate.testsFailed} failed)` : ''}\n          </div>\n          ${gate.duration ? `<div class=\"gate-duration\">${formatDuration(gate.duration)}</div>` : ''}\n        </div>\n      `).join('');\n    }\n\n    function formatDuration(ms) {\n      if (ms < 1000) return ms + 'ms';\n      if (ms < 60000) return (ms / 1000).toFixed(1) + 's';\n      const min = Math.floor(ms / 60000);\n      const sec = Math.floor((ms % 60000) / 1000);\n      return min + 'm ' + sec + 's';\n    }\n\n    // Auto-connect\n    connect();\n  </script>\n</body>\n</html>";
+export declare const DASHBOARD_FAVICON = "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><text y=\".9em\" font-size=\"90\">\uD83D\uDCCA</text></svg>";