Feature: AI Credits Widget UX improvements, GoodID verification, and buy-flow polish

[blueogin]

Summary

Closes #74.
Polishes the AI Credits widget so buying and managing credits feels clearer and less error-prone on mobile and in the wallet flow.

What changed

• Clearer Connecting… state while the wallet loads
• Manage tab is easier to read on small screens, with clearer credit, deposit, stream, and withdrawable amounts
• Buy flow improvements: safer buyer-key handling, visible GoodID bonuses, and a simpler verify action
• Returning users see their current monthly stream when updating it
• Canceling or leaving GoodID verification no longer looks like a failed payment

[Copilot]

Pull request overview

This PR improves the AI Credits widget purchase/manage UX, adds a dedicated wallet “connecting” state, introduces GoodID verification via @goodsdks/citizen-sdk, and refactors quoting/balance math toward USD-micro based accounting.

Changes:

• Add a first-class connecting widget status + Storybook/Playwright coverage for it.
• Refactor buy/manage flows: buyer key handling via in-memory payer session, updated stepper/drawer behavior, updated stats layout, new FAQ, and backend-fetched credit history.
• Rework quote/minimums and backend types to center on USD micro amounts (and GoodID bonus display).

Reviewed changes

Copilot reviewed 34 out of 47 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tests/widgets/ai-credits-widget/states.spec.ts	Adds a QA state test + screenshot for the new connecting state.
pnpm-lock.yaml	Locks new dependency versions after adding Citizen SDK.
packages/ui/src/components-test/ScrollArea.tsx	Introduces a ScrollArea test component with hidden scrollbars (web).
packages/ui/src/components-test/ScrollArea.ts	Removes the old ScrollArea test component definition.
packages/ai-credits-widget/src/widgetRuntimeContract.ts	Updates the runtime contract: new connecting status and reshaped state/actions/events.
packages/ai-credits-widget/src/vaultMinimums.ts	Changes minimum validation and messaging to use USD thresholds and quote-derived USD values.
packages/ai-credits-widget/src/Untitled	Adds a stray file (should be removed).
packages/ai-credits-widget/src/quoteMath.ts	Refactors quote math and formatting helpers; adds GoodID bonus helpers and USD display formatting.
packages/ai-credits-widget/src/payerSession.ts	Adds in-memory payer session storage for buyer/operator session fields.
packages/ai-credits-widget/src/integration.ts	Registers the new connecting state in integration metadata.
packages/ai-credits-widget/src/index.ts	Updates public exports to match renamed/removed types and helpers.
packages/ai-credits-widget/src/goodIdVerification.ts	Adds GoodID verification entrypoint using Citizen SDK + wallet provider transport.
packages/ai-credits-widget/src/components/theme/cards.ts	Tweaks Bonus badge spacing/alignment for better small-screen layout.
packages/ai-credits-widget/src/components/manage/UsageLog.tsx	Switches UsageLog to fetch backend entries and render a scrollable funding history.
packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx	Changes API setup snippet generation and makes it conditional on buyer pubkey.
packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx	Updates Manage stats layout and switches displayed balances to USD micro amounts.
packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx	Renames buyer/operator fields and updates consent/key UI.
packages/ai-credits-widget/src/components/index.ts	Exports the new Buy Credits FAQ component.
packages/ai-credits-widget/src/components/flow/purchaseFlowUtils.ts	Updates flow-step mapping logic to new buyer key + consent model.
packages/ai-credits-widget/src/components/flow/AiCreditsPurchaseFlow.tsx	Refactors purchase flow drawer behavior, quote handling, and GoodID verify flow.
packages/ai-credits-widget/src/components/flow/AiCreditsFlowStepper.tsx	Updates stepper to incorporate the “saved buyer key” gating.
packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx	Renames props/state to match new buyer key + consent fields.
packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx	Updates buyer key UI to new pub/prv naming and “saved” confirmation state.
packages/ai-credits-widget/src/components/buy/BuyCreditsFaq.tsx	Adds an FAQ card explaining buyer/operator, GoodID bonuses, and flows.
packages/ai-credits-widget/src/components/buy/AmountPicker.tsx	Refactors amounts UI around live quote building, USD estimates, and GoodID bonus UI.
packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx	Simplifies hero bonus badge logic and text.
packages/ai-credits-widget/src/chainClient.ts	Simplifies chain quote building to return quote amounts only.
packages/ai-credits-widget/src/backendTypes.ts	Updates backend types: makes credit/profile fields required and renames settlement output.
packages/ai-credits-widget/src/backendClient.ts	Updates balance helpers and account-view building; changes usage log to return raw entries.
packages/ai-credits-widget/src/AiCreditsWidget.tsx	Updates widget UI to support connecting state, new buy/manage UIs, and adds FAQ.
packages/ai-credits-widget/src/adapter.ts	Refactors adapter state/actions for new quoting, payer session, and GoodID verification.
packages/ai-credits-widget/package.json	Adds @goodsdks/citizen-sdk dependency.
examples/storybook/src/stories/helpers/aiCreditsWidgetStories.tsx	Updates QA runtime fixtures to new contract + adds Connecting story.
examples/storybook/src/stories/ai-credits-widget/AiCreditsWidgetQA.stories.tsx	Adds the Connecting QA story export.
examples/storybook/src/stories/ai-credits-widget/AiCreditsWidget.mdx	Updates docs copy to reflect new drawer/stepper interaction.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file