Add a confirmation dialog before the destructive "Regenerate" API key action

[greatest0fallt1me]

Description

This is a UI/UX issue covering destructive-action safety. The danger-button "Regenerate" in src/ApiUsage.tsx immediately replaces the API key via handleRegenerateApiKey with no confirmation. Since regenerating invalidates the existing key and breaks live integrations, an accidental click is costly.

Requirements and Context

• Introduce a reusable confirmation dialog (accessible: role="dialog", focus trap, Escape to cancel) that explains the consequence before regenerating.
• Default focus to the safe "Cancel" action; require explicit confirmation to proceed.
• Reuse this dialog pattern so it can be applied to future destructive actions.
• 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/regenerate-confirm-dialog

2. Implement changes
   • src/components/ConfirmDialog.tsx (new) with focus trap and Escape handling
   • src/ApiUsage.tsx — gate handleRegenerateApiKey behind the dialog
   • src/index.css — token-driven dialog styling
3. Test and commit
   • npm run dev, open /api-usage, click Regenerate and verify the confirm flow
   • Include test output and notes in the PR

Example commit message

feat: add confirmation dialog for API key regeneration

Acceptance Criteria

• Regenerate requires explicit confirmation
• Dialog is accessible (role, focus trap, Escape, default-to-Cancel)
• Cancel leaves the existing key unchanged
• Dialog is reusable for other destructive actions

Guidelines

• Meet WCAG 2.1 AA 3.3.4 (Error Prevention) for the destructive step
• Clear documentation and inline comments
• Timeframe: 96 hours