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
+16 -1
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>
)
}