feat: add correction suggestions to vulnerability findings and display them in UI

- Add a `correction` field to every `finding()` call in detect.py with
  actionable remediation advice for all 12 vulnerability types
- Add `CorrectionPanel` component to FindingCard.jsx that renders the
  correction text under the technical details when a card is expanded
- Add `.correction` CSS styles with accent-tinted background and a
  "HOW TO FIX" label to visually distinguish remediation from details
This commit is contained in:
LORDBABUINO
2026-02-27 14:26:37 -03:00
parent a2970018c5
commit a6aec9b620
3 changed files with 126 additions and 1 deletions

View File

@@ -117,6 +117,16 @@ function DetailsPanel({ details }) {
return <div className={styles.details}>{parts}</div>
}
function CorrectionPanel({ text }) {
if (!text) return null
return (
<div className={styles.correction}>
<div className={styles.correctionLabel}>How to fix</div>
<p className={styles.correctionText}>{text}</p>
</div>
)
}
export default function FindingCard({ finding }) {
const [open, setOpen] = useState(false)
@@ -129,7 +139,12 @@ export default function FindingCard({ finding }) {
</div>
<span className={`${styles.chevron} ${open ? styles.open : ''}`}></span>
</button>
{open && <DetailsPanel details={finding.details} />}
{open && (
<>
<DetailsPanel details={finding.details} />
<CorrectionPanel text={finding.correction} />
</>
)}
</div>
)
}

View File

@@ -151,6 +151,31 @@
color: var(--text-muted);
}
/* Correction panel */
.correction {
border-top: 1px solid var(--border);
padding: 14px 16px;
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
display: flex;
flex-direction: column;
gap: 6px;
}
.correctionLabel {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
}
.correctionText {
font-size: 12px;
color: var(--text);
line-height: 1.6;
margin: 0;
}
/* Key-value */
.kvList {
display: flex;