Add human-readable risk-level UI instead of raw enum display

[Josue19-08]

Description

apps/web showed the raw numeric RiskLevel enum and, for matches, only the plain summary sentence — no readable breakdown of which scam pattern(s) were matched or why.

Changes

• Add riskPresentation.ts mapping each RiskLevel to a human label, color, and icon (e.g. Critical → "🛑 Critical — send blocked", red) and each ScamCategory to a plain-language name (e.g. pig-butchering → "Pig-butchering scam").
• Extract a RiskResult component rendering the mapped label/color/icon, the assessment summary, and a bullet list of matched categories with their evidence snippets in plain language instead of raw JSON.
• App.tsx now renders <RiskResult assessment={assessment} /> instead of the raw {assessment.level} numeric display.

Closes

Closes #9

Notes

Verified visually with a local dev server: an address + "guaranteed return" chat context renders "🔶 High — strong scam signals" with an orange border and the matched-pattern list "Pig-butchering scam — guaranteed return". Critical/Low levels weren't reachable in the current demo data without also flagging an address or lowering confidence, but the mapping was verified by reading AnalyzeSendIntent's level derivation.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added clearer assessment results with risk-level labels, colors, and icons.
  • Displayed matched scam categories with supporting evidence.
  • Added a prominent warning when signing must not proceed.
  • Improved the presentation of risk and scam category information.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 15148a5d-88bf-40ef-891e-9b9485657a23

📥 Commits

Reviewing files that changed from the base of the PR and between 5921a3a and 5769cc9.

📒 Files selected for processing (3)

• apps/web/src/App.tsx
• apps/web/src/RiskResult.tsx
• apps/web/src/riskPresentation.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The web app now uses a dedicated RiskResult component. New presentation mappings convert risk levels and scam categories into human-readable UI data. The result view also shows evidence and hard-block messaging.

Changes

Risk assessment UI

Layer / File(s)	Summary
Risk presentation mappings apps/web/src/riskPresentation.ts	Risk levels map to labels, colors, and icons. Scam categories map to human-readable labels.
Assessment result rendering apps/web/src/App.tsx, apps/web/src/RiskResult.tsx	App delegates assessment rendering to RiskResult. The component displays the risk summary, matched categories, evidence snippets, and conditional hard-block messaging.

Estimated code review effort: 2 (Simple) | ~10 minutes

Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 5769c

The web app now presents assessment levels, scam categories, evidence, and critical hard-block messaging in readable UI. No concrete merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant App
  participant RiskResult
  participant riskPresentation
  App->>RiskResult: render assessment
  RiskResult->>riskPresentation: resolve risk and category presentation
  riskPresentation-->>RiskResult: return labels, colors, icons, and category names
  RiskResult-->>App: render assessment details and hard-block status

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: replacing raw risk-level enum output with human-readable risk-level UI.
Linked Issues check	✅ Passed	The changes satisfy issue [#9]. They add readable risk labels, colors, and icons, and display matched scam categories with evidence in plain language through the new RiskResult component.
Out of Scope Changes check	✅ Passed	All changes support issue [#9] and the stated objectives. No unrelated code changes are evident.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/issue-9-human-readable-risk-ui

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Josue19-08]

Closing — duplicates #27 (salazarsebas), which was opened first (2026-09-09 23:22 UTC vs. this one at 2026-09-10 01:38 UTC) and covers the same issue (#9). See #27 for the review.