fix(report): truthful labels + security-product UI redesign for layer modals#239
Merged
Conversation
…odals Make the scan report both factually correct and visually credible, focused on the layer detail modals (the report's signature interactive surface) and the verdict labels around them. No detection logic, scoring weights, or decision.resolve() precedence changed. Correctness / labels - LayerModal: severity-first triage — Issues (loud) -> Not analyzed (neutral) -> Cleared (quiet). Status wording is now precise: "High risk" (>=0.7) / "Issue" (>=0.4) only with evidence; "Not analyzed" when coverage is absent (never "Clear"); "Clear" only when a check ran and found nothing. Triage is a pure, tested helper (triageFactors). - LayerModal header restates the authoritative layer verdict (Safe / Needs review / Not safe) and the top accent rail reflects the verdict band (data-band), so BLOCK/Not-safe never reads like Review. - Sidebar tile: issue count is a real signal (severity-tinted, "N issues", precise wording) instead of gray "N findings" metadata. - Aggregate counter wording unified to "issue(s)". - normalizeScanResult: fix FACTOR_HUMAN_TITLE keys that never matched the backend factor names (Entropy/ManifestPosture/WebStoreTrust/ MaintenanceHealth -> Obfuscation/Manifest/Webstore/Maintenance, + add governance factors) so Key Findings titles humanize and match the modal. Design - Issues use a colored rail + tint + glyph + solid status pill; high risk (red) vs moderate (amber) read differently. Cleared rows are a quiet, dense, low-contrast list (no green pill noise). Not analyzed is dashed + neutral + HelpCircle + an explicit "treat as unknown, not safe" note. - Stronger type hierarchy and spacing rhythm; sharper modal radius (14px). - Sidebar tile tokenized to --risk-*/--theme-* (was hardcoded rgba), removed the templated pulse animation, added a keyboard focus ring. Accessibility / responsive - Status pills use dark ink on solid accent (white-on-amber failed WCAG AA). - Mobile header verdict pill left-aligns when wrapped; cleared names wrap instead of silently truncating; status conveyed by text+icon, not color. Tests - LayerModal.test.jsx covers status mapping (Issue/High risk/Not analyzed/ Clear) and triage ordering (issues severe-first; not-analyzed never in cleared). Verified by executing the real bundled functions (11/11) since vitest can't run in this sandbox; full `npm run build` passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
bug
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughThe PR overhauls the scan results report UI: ChangesSeverity-triaged scan results UI overhaul
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
⚠️ Not ready to approve
The updated LayerModal styles introduce a tooltip-clipping regression and a light-theme status-pill contrast issue that can break usability/accessibility.
Pull request overview
This PR refines the report UI to use “truthful” triage labels (Issues / Not analyzed / Cleared), aligns factor display names between Key Findings and the Layer modal, and updates sidebar/tile visuals to better communicate severity.
Changes:
- Updates factor human-title mapping to match backend factor names and LayerModal labels.
- Reworks LayerModal presentation and styling around severity-tiered triage, with accompanying unit tests.
- Adjusts sidebar issue wording/badges and the aggregate “findings” label to consistently say “issue(s)”.
File summaries
| File | Description |
|---|---|
| frontend/src/utils/normalizeScanResult.ts | Aligns FACTOR_HUMAN_TITLE keys/labels with backend factor names and LayerModal naming. |
| frontend/src/pages/scanner/ScanResultsPageV2.jsx | Renames aggregate counter label from “findings” to “issues”. |
| frontend/src/components/report/ResultsSidebarTile.jsx | Updates tile badge to show “issue(s)” and adds a severity-tinted dot. |
| frontend/src/components/report/ResultsSidebarTile.scss | Removes pulse animation and tokens badge/border colors + focus-visible outline styling. |
| frontend/src/components/report/LayerModal.jsx | Introduces pure triage/humanize helpers and restructures modal rendering into triaged tiers. |
| frontend/src/components/report/LayerModal.scss | Implements the new severity-tier visual language, including verdict accent rail and tier layouts. |
| frontend/src/components/report/LayerModal.test.jsx | Adds unit tests for triage/status helper behavior and ordering. |
Copilot's findings
- Files reviewed: 7/7 changed files
- Comments generated: 2
Note
Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| transition: background 0.15s ease, border-color 0.15s ease; | ||
| animation: lmFadeUp 0.25s var(--lm-ease) both; | ||
| box-sizing: border-box; | ||
| overflow: hidden; |
Comment on lines
457
to
459
| .light .lm-status-issues { | ||
| background: var(--risk-warn-bg); | ||
| border-color: var(--risk-warn-border); | ||
| color: var(--risk-warn); | ||
| } | ||
|
|
||
| .light .lm-info-trigger { | ||
| color: var(--extensionshield-text-muted); | ||
| &:hover, | ||
| &:focus-visible { | ||
| color: var(--extensionshield-text-secondary); | ||
| } | ||
| color: #fff; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
FACTOR_HUMAN_TITLEkeys innormalizeScanResult.tsdidn't match backend factor names — fixed.Files
LayerModal.jsx/scss/test.jsx,ResultsSidebarTile.jsx/scss,ScanResultsPageV2.jsx,normalizeScanResult.tsConstraints respected
decision.resolve()precedence unchangedTests
npm run buildpasses (3015 modules)LayerModal.test.jsxwritten; will run in CI (vitest has a cold-start issue in this sandbox)Summary by CodeRabbit
New Features
Style
Tests