Add inline, accessible validation UX to AmountInput for draw/repay amounts

[greatest0fallt1me]

Description

This is a UI/UX issue. src/components/AmountInput.tsx is the shared numeric entry for draw and repay flows, but it needs robust, accessible inline validation so users immediately understand limits (min, available credit, outstanding balance) without submitting. Add live validation messaging tied to the field with correct ARIA wiring and consistent error styling.

Requirements and Context

• Validate against min/max/available and show errors via aria-invalid + aria-describedby linking to the message (reuse FormMessage/FormField patterns).
• Provide helper text showing the available limit and a "Max" quick-fill button with an accessible name.
• Format the displayed value consistently with fmt and keep the raw numeric model intact.
• Ensure error/focus styling uses design tokens and remains visible in dark mode.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/amount-input-validation

2. Implement changes
   • src/components/AmountInput.tsx
   • src/components/FormMessage.tsx / FormField.css as needed
3. Test and commit
   • npm run test
   • Verify error announcement and Max button
   • Include screenshots in the PR

Example commit message

feat: add accessible inline validation to AmountInput

Acceptance Criteria

• Errors wired via aria-invalid + aria-describedby
• Helper text shows available limit; Max button labeled
• Consistent formatting without losing raw value
• Error/focus styling visible in dark mode

Guidelines

• WCAG 2.1 AA: 3.3.1, 3.3.3, 4.1.2; forms/validation UX
• Clear documentation and inline comments
• Timeframe: 96 hours