Files
compliance-scanner-agent/compliance-agent/src/pentest/report/html/styles.rs
Sharang Parnerkar a912ec9ad9 feat: pentest feature improvements — streaming, pause/resume, encryption, browser tool, reports, docs
- True SSE streaming via broadcast channels (DashMap per session)
- Session pause/resume with watch channels + dashboard buttons
- AES-256-GCM credential encryption at rest (PENTEST_ENCRYPTION_KEY)
- Concurrency limiter (Semaphore, max 5 sessions, 429 on overflow)
- Browser tool: headless Chrome CDP automation (navigate, click, fill, screenshot, evaluate)
- Report code-level correlation: SAST findings, code graph, SBOM linked per DAST finding
- Split html.rs (1919 LOC) into html/ module directory (8 files)
- Wizard: target/repo dropdowns from existing data, SSH key display, close button on all steps
- Auth: auto-register with optional registration URL (Playwright discovery), plus-addressing email, IMAP overrides
- Attack chain: tool input/output in detail panel, running node pulse animation
- Architecture docs with Mermaid diagrams + 8 screenshots

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-17 00:07:50 +01:00

890 lines
18 KiB
Rust

pub(super) fn styles() -> String {
r##"<style>
/* ──────────────── Base / Print-first ──────────────── */
@page {
size: A4;
margin: 20mm 18mm 25mm 18mm;
}
@page :first {
margin: 0;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--text: #1a1a2e;
--text-secondary: #475569;
--text-muted: #64748b;
--heading: #0d2137;
--accent: #1a56db;
--accent-light: #dbeafe;
--border: #d1d5db;
--border-light: #e5e7eb;
--bg-subtle: #f8fafc;
--bg-section: #f1f5f9;
--sev-critical: #991b1b;
--sev-high: #c2410c;
--sev-medium: #a16207;
--sev-low: #1d4ed8;
--sev-info: #4b5563;
--font-serif: 'Libre Baskerville', 'Georgia', serif;
--font-sans: 'Source Sans 3', 'Helvetica Neue', sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
}
body {
font-family: var(--font-sans);
color: var(--text);
background: #fff;
line-height: 1.65;
font-size: 10.5pt;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.report-body {
max-width: 190mm;
margin: 0 auto;
padding: 0 16px;
}
/* ──────────────── Cover Page ──────────────── */
.cover {
height: 100vh;
min-height: 297mm;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40mm 30mm;
page-break-after: always;
break-after: page;
position: relative;
background: #fff;
}
.cover-shield {
width: 72px;
height: 72px;
margin-bottom: 32px;
}
.cover-tag {
display: inline-block;
background: var(--sev-critical);
color: #fff;
font-family: var(--font-sans);
font-size: 8pt;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 16px;
border-radius: 2px;
margin-bottom: 28px;
}
.cover-title {
font-family: var(--font-serif);
font-size: 28pt;
font-weight: 700;
color: var(--heading);
line-height: 1.2;
margin-bottom: 8px;
}
.cover-subtitle {
font-family: var(--font-serif);
font-size: 14pt;
color: var(--text-secondary);
font-weight: 400;
font-style: italic;
margin-bottom: 48px;
}
.cover-meta {
font-size: 10pt;
color: var(--text-secondary);
line-height: 2;
}
.cover-meta strong {
color: var(--text);
}
.cover-divider {
width: 60px;
height: 2px;
background: var(--accent);
margin: 24px auto;
}
.cover-footer {
position: absolute;
bottom: 30mm;
left: 0;
right: 0;
text-align: center;
font-size: 8pt;
color: var(--text-muted);
letter-spacing: 0.05em;
}
/* ──────────────── Typography ──────────────── */
h2 {
font-family: var(--font-serif);
font-size: 16pt;
font-weight: 700;
color: var(--heading);
margin: 36px 0 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--heading);
page-break-after: avoid;
break-after: avoid;
}
h3 {
font-family: var(--font-serif);
font-size: 12pt;
font-weight: 700;
color: var(--heading);
margin: 24px 0 10px;
page-break-after: avoid;
break-after: avoid;
}
h4 {
font-family: var(--font-sans);
font-size: 10pt;
font-weight: 700;
color: var(--text-secondary);
margin: 16px 0 8px;
}
p {
margin: 8px 0;
font-size: 10.5pt;
}
code {
font-family: var(--font-mono);
font-size: 9pt;
background: var(--bg-section);
padding: 1px 5px;
border-radius: 3px;
border: 1px solid var(--border-light);
word-break: break-all;
}
/* ──────────────── Section Numbers ──────────────── */
.section-num {
color: var(--accent);
margin-right: 8px;
}
/* ──────────────── Table of Contents ──────────────── */
.toc {
page-break-after: always;
break-after: page;
padding-top: 24px;
}
.toc h2 {
border-bottom-color: var(--accent);
margin-top: 0;
}
.toc-entry {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px dotted var(--border);
font-size: 11pt;
}
.toc-entry .toc-num {
font-weight: 700;
color: var(--accent);
min-width: 24px;
margin-right: 10px;
}
.toc-entry .toc-label {
flex: 1;
font-weight: 600;
color: var(--heading);
}
.toc-sub {
padding: 3px 0 3px 34px;
font-size: 9.5pt;
color: var(--text-secondary);
}
/* ──────────────── Executive Summary ──────────────── */
.exec-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 12px;
margin: 16px 0 20px;
}
.kpi-card {
border: 1px solid var(--border);
border-radius: 6px;
padding: 14px 12px;
text-align: center;
background: var(--bg-subtle);
}
.kpi-value {
font-family: var(--font-serif);
font-size: 22pt;
font-weight: 700;
line-height: 1.1;
}
.kpi-label {
font-size: 8pt;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-top: 4px;
font-weight: 600;
}
/* Risk gauge */
.risk-gauge {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-subtle);
margin: 16px 0;
}
.risk-gauge-meter {
width: 140px;
flex-shrink: 0;
}
.risk-gauge-track {
height: 10px;
background: var(--border-light);
border-radius: 5px;
overflow: hidden;
position: relative;
}
.risk-gauge-fill {
height: 100%;
border-radius: 5px;
transition: width 0.3s;
}
.risk-gauge-score {
font-family: var(--font-serif);
font-size: 9pt;
font-weight: 700;
text-align: center;
margin-top: 3px;
}
.risk-gauge-text {
flex: 1;
}
.risk-gauge-label {
font-family: var(--font-serif);
font-size: 14pt;
font-weight: 700;
}
.risk-gauge-desc {
font-size: 9.5pt;
color: var(--text-secondary);
margin-top: 2px;
}
/* Severity bar */
.sev-bar {
display: flex;
height: 28px;
border-radius: 4px;
overflow: hidden;
margin: 12px 0 6px;
border: 1px solid var(--border);
}
.sev-bar-seg {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 8.5pt;
font-weight: 700;
min-width: 24px;
}
.sev-bar-critical { background: var(--sev-critical); }
.sev-bar-high { background: var(--sev-high); }
.sev-bar-medium { background: var(--sev-medium); }
.sev-bar-low { background: var(--sev-low); }
.sev-bar-info { background: var(--sev-info); }
.sev-bar-legend {
display: flex;
gap: 16px;
font-size: 8.5pt;
color: var(--text-secondary);
margin-bottom: 16px;
}
.sev-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: 4px;
vertical-align: middle;
}
/* ──────────────── Info Tables ──────────────── */
table.info {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 10pt;
}
table.info td,
table.info th {
padding: 7px 12px;
border: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
table.info td:first-child,
table.info th:first-child {
width: 160px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-subtle);
}
/* Methodology tools table */
table.tools-table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 10pt;
}
table.tools-table th {
background: var(--heading);
color: #fff;
padding: 8px 12px;
text-align: left;
font-weight: 600;
font-size: 9pt;
text-transform: uppercase;
letter-spacing: 0.04em;
}
table.tools-table td {
padding: 6px 12px;
border-bottom: 1px solid var(--border-light);
}
table.tools-table tr:nth-child(even) td {
background: var(--bg-subtle);
}
table.tools-table td:first-child {
width: 32px;
text-align: center;
color: var(--text-muted);
font-weight: 600;
}
/* ──────────────── Badges ──────────────── */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: 7.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
vertical-align: middle;
}
.badge-exploit {
background: var(--sev-critical);
color: #fff;
}
/* ──────────────── Findings ──────────────── */
.sev-group-title {
font-family: var(--font-sans);
font-size: 11pt;
font-weight: 700;
color: var(--heading);
padding: 8px 0 6px 12px;
margin: 20px 0 8px;
border-left: 4px solid;
page-break-after: avoid;
break-after: avoid;
}
.finding {
border: 1px solid var(--border);
border-left: 4px solid;
border-radius: 0 4px 4px 0;
padding: 14px 16px;
margin-bottom: 12px;
background: #fff;
page-break-inside: avoid;
break-inside: avoid;
}
.finding-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.finding-id {
font-family: var(--font-mono);
font-size: 9pt;
font-weight: 500;
color: var(--text-muted);
background: var(--bg-section);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--border-light);
}
.finding-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 11pt;
flex: 1;
color: var(--heading);
}
.finding-meta {
border-collapse: collapse;
margin: 6px 0;
font-size: 9.5pt;
width: 100%;
}
.finding-meta td {
padding: 3px 10px 3px 0;
vertical-align: top;
}
.finding-meta td:first-child {
color: var(--text-muted);
font-weight: 600;
width: 90px;
white-space: nowrap;
}
.finding-desc {
margin: 8px 0;
font-size: 10pt;
color: var(--text);
line-height: 1.6;
}
.remediation {
margin-top: 10px;
padding: 10px 14px;
background: var(--accent-light);
border-left: 3px solid var(--accent);
border-radius: 0 4px 4px 0;
font-size: 9.5pt;
line-height: 1.55;
}
.remediation-label {
font-weight: 700;
font-size: 8.5pt;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin-bottom: 3px;
}
.evidence-block {
margin: 10px 0;
page-break-inside: avoid;
break-inside: avoid;
}
.evidence-title {
font-weight: 700;
font-size: 8.5pt;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-bottom: 4px;
}
.evidence-table {
width: 100%;
border-collapse: collapse;
font-size: 9pt;
}
.evidence-table th {
background: var(--bg-section);
padding: 5px 8px;
text-align: left;
font-weight: 600;
font-size: 8.5pt;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.evidence-table td {
padding: 5px 8px;
border: 1px solid var(--border-light);
vertical-align: top;
word-break: break-word;
}
.evidence-payload {
font-size: 8.5pt;
color: var(--sev-critical);
}
.linked-sast {
font-size: 9pt;
color: var(--text-muted);
margin: 6px 0;
font-style: italic;
}
/* ──────────────── Code-Level Correlation ──────────────── */
.code-correlation {
margin: 12px 0;
border: 1px solid #e2e8f0;
border-radius: 6px;
overflow: hidden;
}
.code-correlation-title {
background: #1e293b;
color: #f8fafc;
padding: 6px 12px;
font-size: 9pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.code-correlation-item {
padding: 10px 12px;
border-bottom: 1px solid #e2e8f0;
}
.code-correlation-item:last-child { border-bottom: none; }
.code-correlation-badge {
display: inline-block;
background: #3b82f6;
color: #fff;
font-size: 7pt;
font-weight: 600;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.code-meta {
width: 100%;
font-size: 8.5pt;
border-collapse: collapse;
margin-bottom: 6px;
}
.code-meta td:first-child {
width: 80px;
font-weight: 600;
color: var(--text-muted);
padding: 2px 8px 2px 0;
vertical-align: top;
}
.code-meta td:last-child {
padding: 2px 0;
}
.code-snippet-block, .code-fix-block {
margin: 6px 0;
}
.code-snippet-label, .code-fix-label {
font-size: 7.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-bottom: 3px;
}
.code-snippet-label { color: #dc2626; }
.code-fix-label { color: #16a34a; }
.code-snippet {
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 3px solid #dc2626;
padding: 8px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 8pt;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
border-radius: 0 4px 4px 0;
margin: 0;
}
.code-fix {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 3px solid #16a34a;
padding: 8px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 8pt;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
border-radius: 0 4px 4px 0;
margin: 0;
}
.code-remediation {
font-size: 8.5pt;
color: var(--text-secondary);
margin-top: 4px;
padding: 4px 0;
}
.code-linked-vulns {
font-size: 8.5pt;
margin-top: 4px;
}
.code-linked-vulns ul {
margin: 2px 0 0 16px;
padding: 0;
}
.code-linked-vulns li {
margin-bottom: 2px;
}
/* ──────────────── Attack Chain ──────────────── */
.phase-block {
margin-bottom: 20px;
page-break-inside: avoid;
break-inside: avoid;
}
.phase-header {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--heading);
color: #fff;
border-radius: 4px 4px 0 0;
font-size: 9.5pt;
}
.phase-num {
font-weight: 700;
font-size: 8pt;
text-transform: uppercase;
letter-spacing: 0.1em;
background: rgba(255,255,255,0.15);
padding: 2px 8px;
border-radius: 3px;
}
.phase-label {
font-weight: 600;
flex: 1;
}
.phase-count {
font-size: 8.5pt;
opacity: 0.7;
}
.phase-steps {
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 4px 4px;
}
.step-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 14px;
border-bottom: 1px solid var(--border-light);
position: relative;
}
.step-row:last-child {
border-bottom: none;
}
.step-num {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bg-section);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 8pt;
font-weight: 700;
color: var(--text-secondary);
flex-shrink: 0;
margin-top: 1px;
}
.step-connector {
display: none;
}
.step-content {
flex: 1;
min-width: 0;
}
.step-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.step-tool {
font-family: var(--font-mono);
font-size: 9.5pt;
font-weight: 500;
color: var(--heading);
}
.step-status {
font-size: 7.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 7px;
border-radius: 3px;
}
.step-completed { background: #dcfce7; color: #166534; }
.step-failed { background: #fef2f2; color: #991b1b; }
.step-running { background: #fef9c3; color: #854d0e; }
.step-findings {
font-size: 8pt;
font-weight: 600;
color: var(--sev-high);
background: #fff7ed;
padding: 1px 7px;
border-radius: 3px;
border: 1px solid #fed7aa;
}
.step-risk {
font-size: 7.5pt;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
}
.risk-high { background: #fef2f2; color: var(--sev-critical); border: 1px solid #fecaca; }
.risk-med { background: #fffbeb; color: var(--sev-medium); border: 1px solid #fde68a; }
.risk-low { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.step-reasoning {
font-size: 9pt;
color: var(--text-muted);
margin-top: 3px;
line-height: 1.5;
font-style: italic;
}
/* ──────────────── Footer ──────────────── */
.report-footer {
margin-top: 48px;
padding-top: 14px;
border-top: 2px solid var(--heading);
font-size: 8pt;
color: var(--text-muted);
text-align: center;
line-height: 1.8;
}
.report-footer .footer-company {
font-weight: 700;
color: var(--text-secondary);
}
/* ──────────────── Page Break Utilities ──────────────── */
.page-break {
page-break-before: always;
break-before: page;
}
.avoid-break {
page-break-inside: avoid;
break-inside: avoid;
}
/* ──────────────── Print Overrides ──────────────── */
@media print {
body {
font-size: 10pt;
}
.cover {
height: auto;
min-height: 250mm;
padding: 50mm 20mm;
}
.report-body {
padding: 0;
}
.no-print {
display: none !important;
}
a {
color: var(--accent);
text-decoration: none;
}
}
/* ──────────────── Screen Enhancements ──────────────── */
@media screen {
body {
background: #e2e8f0;
}
.cover {
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.report-body {
background: #fff;
padding: 20px 32px 40px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
margin-bottom: 40px;
}
}
</style>"##
.to_string()
}