"[UI/UX Design] Design CommitmentEarlyExitModal penalty preview with before/after value breakdown"

[1nonlypiece]

[UI/UX Design] Design CommitmentEarlyExitModal penalty preview with before/after value breakdown

Description

src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx triggers early exit but does not visually break down how the penalty is computed. Using the penalty tiers from src/lib/backend/services/protocolConstants.ts (Safe 2%, Balanced 3%, Aggressive 5%), design a before/after breakdown showing committed amount, penalty deduction, and net refund so users confirm with full transparency.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Pull penalty percent from the protocol constants endpoint at src/app/api/protocol/constants/route.ts
• Show an itemized table: committed, penalty (%), net refund
• Require an explicit confirmation interaction before calling early-exit
• Keep numeric alignment accessible per docs/accessibility-dense-ui.md

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/early-exit-penalty-preview
• Implement changes
  • Update CommitmentEarlyExitModal.tsx with the breakdown panel
  • Add render tests asserting penalty math per risk tier under tests/
  • Document the breakdown in docs/success-state-ux.md
  • Validate rounding and currency formatting edge cases
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: add penalty preview breakdown to CommitmentEarlyExitModal

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours