Feat: AI Credit Management Widget

[blueogin]

Short description of the new GoodWidget

A dashboard widget for users who already use (or are setting up) AI credits. It shows balances, stream status, and buyer/operator setup in one place. Buy/Add credit opens the add-credits widget (navigation TBD). No credit history in v1.

ai-credits-widget is on copilot/buy-ai-coding-credits branch in this branch but this management widget is separated widget from ai-credits-widget

Which repos and packages the AI should work with

Repo / package	Role
GoodWidget	New package packages/ai-credits-manage-widget
GoodWidget/packages/ai-credits-widget	Reuse patterns: adapter, backend client, buyer key, consent, G$ balance read
GoodWidget/packages/ui, packages/core	Primitives, provider, wallet
antseed-integration (antseed)	GET /status, operator, GET .../withdrawable, GET/POST .../withdraw, POST /v1/channels/close, POST /v1/celo/events/record
Storybook examples/storybook	Stories under ai-credits-manage/

UI implementation reference

Design mock (attached to issue): title + bonus badge on plain background; one rounded card below with AI credits → G$ account overview (stream nested) → Operator.

Layout rules

• Outside any card: page title AI credit management + bonus badge (+10% or +20%) with info tooltip. No border/rectangle around this row.
  ┌ AI Credits ────────────────────────┐
  │ Total credits 0.17 │
  │ Est. monthly stream ~0.05 credits │
  │ [ Add credits ] [ Close Channel] │
  │ [ Withdraw credits ] 0.7 │
  └───────────────────────────────────────────────┘
  ┌ G$ Wallet ────────────────────────────────────┐
  │ Wallet balance 42.50 G$ │
  │ Total deposited 15.00 G$ │
  │ ── Stream ── │
  │ Current flow 10.00 G$/mo │
  │ [ Update flow ] 10.23 │
  └───────────────────────────────────────────────┘
  ┌ Buyer & Operator ─────────────────────────────┐
  │ Operator 0x…0004 Accepted ✓ │
  │ Buyer 0xfc12…4c7a │
  │ [ Sign & generate ] [ Sign consent ] │
  │ Private key •••••• [Reveal] │
  │ Public key 0x1..3 [Reveal] │
  └───────────────────────────────────────────────┘

Match dark theme and button styles from existing ai-credits-widget / Storybook demos.

User flows, states and behaviours

Bonus badge (header)

• Show +10% when deposit already exists (deposit bonus path); +20% when verified (stream bonus path). Align with backend: bonus only applies when GoodID verified (credit-bonus.ts) you can get back.
• Info icon → tooltip explaining deposit vs stream bonus and GoodID requirement.

Section: AI credits (inside main card)

Field	Source
Total AI credits now	GET /status → principal + bonus on profile
Estimated monthly stream	From profile.streamFlowRateWeiPerSecond (+ quote/bonus estimate; label as estimate)
Withdrawable (optional hint)	status.withdrawableMicroUsd — max for withdraw input

• Buy/Add credit — primary button; onAddCredits callback TODO (host routes to add-credits widget).
• Withdraw — amount input (credits or micro-USD; validate ≤ withdrawable) + button. Flow: GET .../withdrawable → GET .../withdraw/payload?amountMicroUsd=&recipient={buyer} → buyer key signs EIP-712 → POST .../withdraw. Credits leave Base vault to buyer wallet (profile.buyer). Requires buyer private key in session.
• Close channel — just shows a button and leave it todo

Section: G$ account overview (inside main card)

Field	Source
G$ wallet balance	Payer wallet G$ on Celo (same as buy widget)
Deposited G$	profile.totalGdDepositedWei

Stream management (under G$ account overview)

Field	Source
Current flow	Active / inactive from stream flow rate
Configured amount	G$/month from streamFlowRateWeiPerSecond

• New flow amount — number input (G$/month, min per buy widget rules).
• Update flow — uses input value; Celo Superfluid update + POST /v1/celo/events/record TODO wire in v1 or stub with validation only.

Section: Operator (inside main card)

Field	Source
Operator address	status.operator.operatorAddress
Consent state	e.g. pending signature / accepted from operator.operatorAccepted
Public key	Buyer address (profile.buyer / status.buyer)
Private key	From session after generate only; masked with Reveal

• Sign & generate — payer signs message → derive buyer key (reuse buy widget).
• Sign consent — consent payload → EIP-712 sign → POST .../operator/accept.

If profile.buyer exists but no private key in session: show public key only; no reveal.

States (widget-level)

• Disconnected → connect CTA (or rely on host wallet).
• Connected, no buyer → show operator section actions; AI credits may be 0.
• Connected, buyer + consent done → read-only operator fields; stream/credits populated from status.
• Backend error → inline error + retry.

Out of scope (v1)

• Credit history / transaction list / source filters.
• API setup block (stay on buy widget post-purchase).
• POST /v1/channels/withdraw (separate from close; add later if needed).

Create the plan (keep this section in the issue body)

Create the plan

Based on the above description create an execution plan in a new sub-issue and preserve the original issue content unchanged.
Do not execute the plan until given instructions to do so.

Sub-issue requirements:

• Title format: [DRAFT][PLAN] <what issue is being planned>
• Type: Task
• Description must start with: <sub-issue title>
• Link the sub-issue back to this parent issue.

Instructions when creating the plan:

• Map relevant files that are too be used as reference from all repos mentioned
• import existing @GoodDollar packages
• Map new components that should be created. Assess when a new component should be created in the new savings widget package or made part of the reusable packages/ui

Plan specification required sections:

• Required states, flows, and behaviors
• Execution plan
• acceptance criteria
• human-reviewer checklist