@freshworks/shiftleft-tools 1.1.8

package/templates/postman/scripts/lib/report_utils.py

@@ -0,0 +1,973 @@
+"""
+Shared utilities, CSS, and UI component builders for all report types.
+"""
+
+import glob
+import os
+import json
+from datetime import datetime
+from html import escape as esc
+
+
+# =============================================================================
+# Jenkins-safe report helpers (CSP-compatible tabs, relative links)
+# =============================================================================
+
+def relative_href(from_html_path, to_path):
+    """Return a relative URL between HTML files (works in Jenkins HTML Publisher)."""
+    if not to_path or not from_html_path:
+        return None
+    from_dir = os.path.dirname(os.path.abspath(from_html_path))
+    if os.path.isdir(to_path):
+        to_path = os.path.join(to_path, 'index.html')
+    to_abs = os.path.abspath(to_path)
+    if not os.path.isfile(to_abs):
+        return None
+    rel = os.path.relpath(to_abs, from_dir)
+    return rel.replace(os.sep, '/')
+
+
+def resolve_staged_artifact_href(output_html, relative_path):
+    """Use artifacts copied under postman/reports/artifacts/ for Jenkins."""
+    if not output_html:
+        return None
+    output_dir = os.path.dirname(os.path.abspath(output_html))
+    staged = os.path.join(output_dir, relative_path)
+    if os.path.isfile(staged):
+        return relative_path.replace(os.sep, '/')
+    return None
+
+
+def find_pit_index_path(mutations_xml):
+    if not mutations_xml or not os.path.isfile(mutations_xml):
+        return None
+    pit_dir = os.path.dirname(os.path.abspath(mutations_xml))
+    index_path = os.path.join(pit_dir, 'index.html')
+    if os.path.isfile(index_path):
+        return index_path
+    matches = glob.glob(os.path.join(pit_dir, '**/index.html'), recursive=True)
+    return matches[0] if matches else None
+
+
+def resolve_jacoco_href(output_html, jacoco_xml):
+    staged = resolve_staged_artifact_href(output_html, 'artifacts/jacoco/index.html')
+    if staged:
+        return staged
+    if jacoco_xml:
+        index_path = os.path.join(os.path.dirname(os.path.abspath(jacoco_xml)), 'index.html')
+        return relative_href(output_html, index_path)
+    return None
+
+
+def resolve_pit_href(output_html, mutations_xml):
+    staged = resolve_staged_artifact_href(output_html, 'artifacts/pit/index.html')
+    if staged:
+        return staged
+    pit_index = find_pit_index_path(mutations_xml)
+    return relative_href(output_html, pit_index) if pit_index else None
+
+
+def resolve_sibling_report_href(output_html, report_path):
+    if not report_path:
+        return None
+    if not os.path.isabs(report_path):
+        return report_path.replace(os.sep, '/')
+    return relative_href(output_html, report_path)
+
+
+def report_detail_links_row(cards):
+    """Render a row of links to detailed reports (no inline JS)."""
+    visible = [(subtitle, title, href) for subtitle, title, href in cards if href]
+    if not visible:
+        return ''
+    html = (
+        '<div style="margin-bottom: 1.5rem;">'
+        '<div style="background: var(--color-card); border: 1px solid var(--color-border); '
+        'border-radius: var(--radius-sm); padding: 1.5rem; box-shadow: var(--shadow-sm);">'
+        '<div style="display: flex; justify-content: space-between; align-items: center; '
+        'gap: 2rem; flex-wrap: wrap;">'
+    )
+    for subtitle, title, href in visible:
+        html += f'''
+            <div style="flex: 1; min-width: 250px;">
+                <div style="color: var(--color-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">{subtitle}</div>
+                <a href="{href}" class="report-detail-link">
+                    <span>{title}</span>
+                    <span class="report-detail-link-arrow">→</span>
+                </a>
+            </div>'''
+    html += '</div></div></div>'
+    return html
+
+
+def build_css_tabs(tab_prefix, tabs, default_index=0):
+    """
+    Build CSP-safe tabs using radio inputs (no JavaScript).
+    tabs: list of (suffix, label, content_html)
+    """
+    group_name = f"{tab_prefix}-group"
+    style_rules = []
+    parts = ['<div class="css-tabs">']
+    for i, (suffix, _label, _content) in enumerate(tabs):
+        radio_id = f"{tab_prefix}-{suffix}"
+        panel_id = f"{tab_prefix}-panel-{suffix}"
+        checked = ' checked' if i == default_index else ''
+        parts.append(f'<input type="radio" name="{group_name}" id="{radio_id}"{checked}>')
+        style_rules.append(f'#{radio_id}:checked ~ #{panel_id} {{ display: block; }}')
+        style_rules.append(
+            f'#{radio_id}:checked ~ .tab-labels label[for="{radio_id}"] {{ '
+            f'color: var(--color-primary); border-bottom-color: var(--color-primary); }}'
+        )
+    parts.append('<div class="tab-labels">')
+    for suffix, label, _content in tabs:
+        radio_id = f"{tab_prefix}-{suffix}"
+        parts.append(f'<label for="{radio_id}" class="tab">{label}</label>')
+    parts.append('</div>')
+    for suffix, _label, panel_content in tabs:
+        panel_id = f"{tab_prefix}-panel-{suffix}"
+        parts.append(f'<div class="tab-panel" id="{panel_id}">{panel_content}</div>')
+    parts.append('</div>')
+    style_block = '<style>\n' + '\n'.join(style_rules) + '\n</style>\n'
+    return style_block + ''.join(parts)
+
+
+# =============================================================================
+# Shared CSS - Single source of truth for all reports
+# =============================================================================
+
+SHARED_CSS = '''
+:root {
+    --color-primary: #6366f1;
+    --color-primary-light: #818cf8;
+    --color-success: #22c55e;
+    --color-success-bg: #f0fdf4;
+    --color-warning: #f59e0b;
+    --color-warning-bg: #fffbeb;
+    --color-error: #ef4444;
+    --color-error-bg: #fef2f2;
+    --color-info: #3b82f6;
+    --color-muted: #64748b;
+    --color-bg: #f8fafc;
+    --color-card: #ffffff;
+    --color-border: #e2e8f0;
+    --color-text: #334155;
+    --color-heading: #0f172a;
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
+    --radius: 16px;
+    --radius-sm: 10px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--color-bg);
+    color: var(--color-text);
+    line-height: 1.6;
+    padding: 2rem 1.5rem;
+}
+
+.container { max-width: 1600px; margin: 0 auto; padding: 0 1rem; }
+
+/* Header */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 2.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.header-left .logo {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.5rem;
+}
+
+.header h1 {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: var(--color-heading);
+    letter-spacing: -0.02em;
+}
+
+.header .timestamp {
+    color: var(--color-muted);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+
+.health-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1.25rem;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.health-badge.excellent { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857; }
+.health-badge.good { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }
+.health-badge.fair { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #c2410c; }
+.health-badge.poor { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }
+
+/* Sections */
+.section { margin-bottom: 2.5rem; }
+
+.section-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--color-heading);
+    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.section-title .count {
+    background: var(--color-border);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-muted);
+}
+
+/* Summary Grid */
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 1.25rem;
+    margin-bottom: 2.5rem;
+}
+
+.summary-card {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    padding: 1.5rem 1.25rem;
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.summary-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.summary-card.health { border-width: 2px; }
+.summary-card.health.excellent { border-color: var(--color-success); background: var(--color-success-bg); }
+.summary-card.health.good { border-color: var(--color-warning); background: var(--color-warning-bg); }
+.summary-card.health.poor { border-color: var(--color-error); background: var(--color-error-bg); }
+
+.summary-card .icon { font-size: 1.75rem; margin-bottom: 0.375rem; }
+.summary-card .value {
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    line-height: 1.2;
+}
+.summary-card .label {
+    color: var(--color-muted);
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-top: 0.375rem;
+}
+.summary-card .detail {
+    color: var(--color-muted);
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+}
+.summary-card.success .value { color: var(--color-success); }
+.summary-card.warning .value { color: var(--color-warning); }
+.summary-card.error .value { color: var(--color-error); }
+
+/* Progress Bar */
+.progress-container {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    padding: 1.75rem;
+    margin-bottom: 2.5rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.25rem;
+}
+
+.progress-title { font-weight: 600; font-size: 1.1rem; color: var(--color-heading); }
+.progress-value { font-size: 2.25rem; font-weight: 700; }
+
+.progress-bar {
+    height: 14px;
+    background: var(--color-border);
+    border-radius: 7px;
+    overflow: hidden;
+}
+
+.progress-bar.small { height: 8px; border-radius: 4px; }
+
+.progress-fill {
+    height: 100%;
+    border-radius: 7px;
+    transition: width 0.5s ease-out;
+}
+
+.progress-fill.success { background: linear-gradient(90deg, #22c55e, #4ade80); }
+.progress-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
+.progress-fill.error { background: linear-gradient(90deg, #ef4444, #f87171); }
+
+/* Tables */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    font-size: 0.875rem;
+    box-shadow: var(--shadow-sm);
+}
+
+th, td {
+    padding: 0.875rem 1.125rem;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+}
+
+th {
+    background: #f1f5f9;
+    font-weight: 600;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-muted);
+}
+
+td.center { text-align: center; }
+tr:hover { background: #fafbfc; }
+tr:last-child td { border-bottom: none; }
+
+/* Badges */
+.badge {
+    display: inline-block;
+    padding: 0.3rem 0.875rem;
+    border-radius: 20px;
+    font-size: 0.7rem;
+    font-weight: 600;
+}
+
+.badge-success { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857; }
+.badge-warning { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }
+.badge-error { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }
+.badge-info { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
+
+/* Cards */
+.card {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: 1.25rem;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* Grid layouts */
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
+
+/* Code styling */
+.code {
+    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.875rem;
+    color: var(--color-heading);
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 2px solid var(--color-border);
+    margin-bottom: 1.5rem;
+}
+
+.tab {
+    padding: 0.75rem 1.5rem;
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid transparent;
+    color: var(--color-muted);
+    font-weight: 500;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin-bottom: -2px;
+}
+
+.tab:hover {
+    color: var(--color-heading);
+    background: var(--color-bg);
+}
+
+.tab.active {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary);
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.top-tab-content {
+    display: none;
+}
+
+.top-tab-content.active {
+    display: block;
+}
+
+.sub-tab-content {
+    display: none;
+}
+
+.sub-tab-content.active {
+    display: block;
+}
+
+/* CSS-only tabs (Jenkins Content-Security-Policy compatible) */
+.css-tabs {
+    position: relative;
+}
+
+.css-tabs > input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+}
+
+.css-tabs > .tab-labels {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 2px solid var(--color-border);
+    margin-bottom: 1.5rem;
+}
+
+.css-tabs > .tab-panel {
+    display: none;
+}
+
+.report-detail-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem 1.125rem;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-heading);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.9rem;
+    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    box-shadow: var(--shadow-sm);
+}
+
+.report-detail-link:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-primary);
+}
+
+.report-detail-link-arrow {
+    color: var(--color-primary);
+}
+
+#top-tabs {
+    border-bottom-width: 3px;
+    margin-bottom: 2rem;
+}
+
+#top-tabs .tab {
+    font-size: 1rem;
+    padding: 0.875rem 2rem;
+    font-weight: 600;
+}
+
+/* Feature sections */
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 1.25rem;
+}
+
+.feature-section {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: 1.25rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.feature-section h4 {
+    font-size: 0.95rem;
+    margin-bottom: 0.875rem;
+    color: var(--color-heading);
+}
+
+.feature-list { list-style: none; max-height: 220px; overflow-y: auto; }
+.feature-list li {
+    padding: 0.625rem 0;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 0.825rem;
+}
+.feature-list li:last-child { border-bottom: none; }
+
+/* Method badges for API coverage */
+.method {
+    display: inline-block;
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    font-weight: 600;
+    font-size: 0.6rem;
+    color: white;
+}
+.method.GET { background: #22c55e; }
+.method.POST { background: #3b82f6; }
+.method.PUT { background: #f59e0b; }
+.method.DELETE { background: #ef4444; }
+.method.PATCH { background: #8b5cf6; }
+
+/* Footer */
+footer {
+    margin-top: 3rem;
+    text-align: center;
+    color: var(--color-muted);
+    font-size: 0.85rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--color-border);
+}
+
+footer span {
+    opacity: 0.5;
+    margin: 0 0.5rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    body { padding: 1.25rem; }
+    .header { flex-direction: column; gap: 1rem; }
+    .summary-grid { grid-template-columns: repeat(2, 1fr); }
+    .feature-grid { grid-template-columns: 1fr; }
+    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+}
+
+/* ========== Coverage Report Specific Styles ========== */
+
+/* Executive Summary - 8-column grid */
+.executive-summary {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 1.25rem;
+    margin-bottom: 2.5rem;
+    width: 100%;
+}
+
+.summary-card {
+    min-height: 110px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.summary-card.health { padding: 1.25rem 1rem; }
+.summary-card.health.fair { border-color: var(--color-warning); background: var(--color-warning-bg); }
+
+.summary-card .sub-value {
+    color: var(--color-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+.summary-card .health-label {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--color-heading);
+}
+
+.summary-card .health-desc {
+    font-size: 0.75rem;
+    color: var(--color-muted);
+    margin-top: 0.375rem;
+    line-height: 1.4;
+}
+
+/* Coverage Grid */
+.coverage-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.25rem;
+}
+
+.coverage-item {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: 1.25rem;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.coverage-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.coverage-item .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.875rem;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.coverage-item .metric-name { font-weight: 500; font-size: 0.9rem; color: var(--color-text); }
+.coverage-item .metric-value { font-weight: 700; font-size: 1.125rem; }
+.coverage-item .details { margin-top: 0.625rem; font-size: 0.8rem; color: var(--color-muted); }
+
+/* Gaps Section */
+.gaps-section {
+    background: var(--color-error-bg);
+    border: 1px solid #fecaca;
+    border-radius: var(--radius-sm);
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.gaps-section.warning { background: var(--color-warning-bg); border-color: #fde68a; }
+
+.gaps-section .title {
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--color-error);
+    margin-bottom: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.gaps-section.warning .title { color: var(--color-warning); }
+
+.gap-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+
+.gap-item {
+    background: white;
+    padding: 0.375rem 0.625rem;
+    border-radius: 6px;
+    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.75rem;
+    border: 1px solid #fecaca;
+    transition: transform 0.15s;
+}
+
+.gap-item:hover { transform: scale(1.02); }
+.gaps-section.warning .gap-item { border-color: #fde68a; }
+
+/* Method badges - detailed colors */
+.method {
+    font-weight: 600;
+    padding: 0.25rem 0.625rem;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    display: inline-block;
+    min-width: 55px;
+}
+
+.method-GET { background: #dbeafe; color: #1d4ed8; }
+.method-POST { background: #d1fae5; color: #047857; }
+.method-PUT { background: #fef3c7; color: #b45309; }
+.method-PATCH { background: #ede9fe; color: #6d28d9; }
+.method-DELETE { background: #fee2e2; color: #b91c1c; }
+
+.path {
+    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.825rem;
+    color: var(--color-heading);
+}
+
+.status-icon { font-size: 1rem; }
+
+/* Collapsible Details */
+details {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    margin-bottom: 1rem;
+    box-shadow: var(--shadow-sm);
+}
+
+summary {
+    padding: 1rem 1.25rem;
+    cursor: pointer;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background 0.15s;
+}
+
+summary:hover { background: #fafbfc; }
+details[open] summary { border-bottom: 1px solid var(--color-border); }
+details .content { padding: 1.25rem; }
+
+/* Table enhancements for coverage */
+th, td { padding: 0.75rem 0.625rem; text-align: center; vertical-align: middle; }
+td.left { text-align: left; }
+
+/* Extended Responsive */
+@media (max-width: 1200px) {
+    .executive-summary { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (max-width: 992px) {
+    .executive-summary { grid-template-columns: repeat(2, 1fr); }
+    .coverage-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 640px) {
+    .executive-summary { grid-template-columns: 1fr; }
+    .coverage-grid { grid-template-columns: 1fr; }
+}
+'''
+
+
+def get_css():
+    return SHARED_CSS
+
+
+def get_html_template(title, logo, content, timestamp=None, health_badge=None, subtitle=None, footer_text="Generated by Report Generator"):
+    timestamp = timestamp or datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+    health_html = ""
+    if health_badge:
+        badge_class = esc(str(health_badge.get('class', 'good')))
+        badge_icon = esc(str(health_badge.get('icon', '')))
+        badge_label = esc(str(health_badge.get('label', '')))
+        health_html = f'''
+        <div class="health-badge {badge_class}">
+            {badge_icon} {badge_label}
+        </div>
+        '''
+
+    subtitle_html = f'<p class="timestamp">{esc(subtitle)}</p>' if subtitle else ""
+    safe_title = esc(title)
+    safe_logo = esc(logo)
+    safe_footer = esc(footer_text)
+    safe_timestamp = esc(timestamp)
+
+    return f'''<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{safe_title} | {safe_logo}</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>{SHARED_CSS}</style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="header-left">
+                <div class="logo">{safe_logo}</div>
+                <h1>{safe_title}</h1>
+                <p class="timestamp">Generated: {safe_timestamp}</p>
+                {subtitle_html}
+            </div>
+            {health_html}
+        </div>
+
+        {content}
+
+        <footer>{safe_footer}</footer>
+    </div>
+</body>
+</html>'''
+
+
+# =============================================================================
+# HTML Component Builders
+# =============================================================================
+
+def format_mutator_name(mutator):
+    import re
+    name = mutator.replace('Mutator', '').replace('Mutators', '')
+    name = re.sub(r'([a-z])([A-Z])', r'\1 \2', name)
+    replacements = {
+        'CONDITIONALS BOUNDARY': 'Conditionals Boundary',
+        'INCREMENTS': 'Increments',
+        'INVERT NEGS': 'Invert Negatives',
+        'MATH': 'Math Operations',
+        'NEGATE CONDITIONALS': 'Negate Conditionals',
+        'VOID METHOD CALLS': 'Void Method Calls',
+        'RETURN VALS': 'Return Values',
+        'NON VOID METHOD CALLS': 'Non-Void Method Calls',
+        'CONSTRUCTOR CALLS': 'Constructor Calls',
+        'INLINE CONSTANT': 'Inline Constants',
+        'EMPTY RETURNS': 'Empty Returns',
+        'FALSE RETURNS': 'False Returns',
+        'TRUE RETURNS': 'True Returns',
+        'NULL RETURNS': 'Null Returns',
+        'PRIMITIVE RETURNS': 'Primitive Returns',
+    }
+    name_upper = name.upper().strip()
+    if name_upper in replacements:
+        return replacements[name_upper]
+    return name.strip().title()
+
+
+def build_summary_card(value, label, sub_value=None, status=None, icon=None, is_health=False, health_class=None, health_desc=None):
+    classes = ['summary-card']
+    if status:
+        classes.append(esc(str(status)))
+    if is_health:
+        classes.append('health')
+        if health_class:
+            classes.append(esc(str(health_class)))
+
+    icon_html = f'<div class="icon">{esc(str(icon))}</div>' if icon else ''
+    sub_html = f'<div class="sub-value">{esc(str(sub_value))}</div>' if sub_value else ''
+
+    if is_health:
+        return f'''<div class="{' '.join(classes)}">
+    {icon_html}
+    <div class="health-label">{esc(str(value))}</div>
+    <div class="health-desc">{esc(str(health_desc or ''))}</div>
+</div>'''
+    else:
+        return f'''<div class="{' '.join(classes)}">
+    <div class="value">{esc(str(value))}</div>
+    <div class="label">{esc(str(label))}</div>
+    {sub_html}
+</div>'''
+
+
+def build_coverage_item(name, value, percentage, details, color=None):
+    status_class = 'success' if percentage >= 80 else 'warning' if percentage >= 50 else 'error'
+    color = color or f"var(--color-{status_class})"
+    safe_pct = min(float(percentage), 100)
+    return f'''<div class="coverage-item">
+    <div class="header">
+        <span class="metric-name">{esc(str(name))}</span>
+        <span class="metric-value" style="color: {color};">{esc(str(value))}</span>
+    </div>
+    <div class="progress-bar">
+        <div class="progress-fill {status_class}" style="width: {safe_pct:.1f}%;"></div>
+    </div>
+    <div class="details">{esc(str(details))}</div>
+</div>'''
+
+
+def build_gaps_section(title, items, warning=False):
+    if not items:
+        return ''
+    section_class = 'gaps-section warning' if warning else 'gaps-section'
+
+    def gap_item(item):
+        method = esc(str(item["method"]))
+        path = esc(str(item["path"]))
+        count = item.get("count")
+        count_str = f" ({esc(str(count))} tests)" if count else ""
+        return f'<div class="gap-item"><span class="method method-{method}">{method}</span> {path}{count_str}</div>'
+
+    items_html = '\n'.join(gap_item(item) for item in items)
+    return f'''<div class="{section_class}">
+    <div class="title">{esc(str(title))}</div>
+    <div class="gap-list">{items_html}</div>
+</div>'''
+
+
+def build_collapsible_table(title, count, headers, rows):
+    if not rows:
+        return ''
+    headers_html = ''.join(f'<th style="{h.get("style", "")}">{h["label"]}</th>' for h in headers)
+    rows_html = '\n'.join(rows)
+    return f'''<details>
+    <summary>
+        {title}
+        <span class="count" style="background: var(--color-border); padding: 0.125rem 0.5rem; border-radius: 10px; font-size: 0.75rem; font-weight: 500;">{count}</span>
+    </summary>
+    <div class="content">
+        <table>
+            <thead><tr>{headers_html}</tr></thead>
+            <tbody>{rows_html}</tbody>
+        </table>
+    </div>
+</details>'''
+
+
+def build_endpoint_row(endpoint, stats):
+    test_count = stats.get('test_count', 0)
+    status_codes = stats.get('status_codes', set())
+    codes_str = ', '.join(sorted(status_codes, key=lambda x: int(x) if x.isdigit() else 0)) if status_codes else '—'
+    body = stats.get('body_assertions', 0) or '—'
+    has_2xx = any(str(c).startswith('2') for c in status_codes)
+    success_icon = '✅' if has_2xx else ('❌' if test_count > 0 else '—')
+
+    defined = endpoint.get('defined_params', set())
+    tested = stats.get('query_params', set())
+    if not defined:
+        qp_str = '—'
+    else:
+        tested_norm = set(p.lower().replace('_', '') for p in tested)
+        covered = len(defined.intersection(tested_norm))
+        qp_str = f'{covered}/{len(defined)}'
+
+    oneof = stats.get('oneof_count', 0)
+    weak_str = f'⚠️ {oneof}' if oneof > 0 else '—'
+
+    if test_count == 0:
+        icon, style = '❌', 'background: #fef2f2;'
+    elif test_count < 3:
+        icon, style = '⚠️', ''
+    else:
+        icon, style = '✅', ''
+
+    return f'''<tr style="{style}">
+    <td class="status-icon">{icon}</td>
+    <td><span class="method method-{endpoint['method']}">{endpoint['method']}</span></td>
+    <td class="left"><span class="path">{endpoint['path']}</span></td>
+    <td>{test_count}</td>
+    <td class="status-icon">{success_icon}</td>
+    <td>{codes_str}</td>
+    <td>{body}</td>
+    <td>{qp_str}</td>
+    <td>{weak_str}</td>
+</tr>'''