Prepare AI Credits Widget for GoodWallet Integration

[L03TJ3]

Assume GoodWidget PR #131 is not merged. Use its Web Component packaging changes as a reference, but do not merge or reproduce its release automation.

Feature summary

Make @goodwidget/ai-credits-widget installable in GoodWallet as a Web Component, while retaining its React export as an optional fallback.

GoodWallet should only need to provide its EIP-1193 wallet provider and optional theme overrides. AI Credits must continue to own its configuration, user flow, transaction state, success state, and errors.

Problem or opportunity

AI Credits works as a standalone widget, but its published package boundary must be verified before GoodWallet can consume it safely.

In particular, the Web Component must receive the same provider and theming inputs as the React export, and the package must be safe for a Next.js build to inspect without executing browser-only code.

Proposed solution

Prepare the existing package rather than creating a Wallet-specific version:

• Selectively replicate the relevant work from GoodWidget PR #131: the SSR-safe register entry, safe element creation during server module inspection, and the package exports/tarball configuration needed by a consumer. Do not copy its workflows, release scripts, dispatch logic, CODEOWNERS changes, or integration-manifest automation.
• Use packages/ai-credits-widget/src/AiCreditsWidget.tsx and packages/ai-credits-widget/src/widgetRuntimeContract.ts for the public React host contract.
• Use packages/ai-credits-widget/src/element.ts and packages/embed/src/createMiniAppElement.tsx for the Web Component bridge. Confirm that the injected provider and themeOverrides reach AiCreditsWidget, rather than falling back to window.ethereum.
• Keep production backend, RPC, and contract defaults owned by AI Credits. Overrides may remain available for development and testing, but GoodWallet should not need to assemble the widget's production configuration.
• Fail closed when required production configuration is unavailable. Production mode must never silently select the mock backend or mock chain client.
• Keep the browser-only element import behind the guard in packages/ai-credits-widget/src/register.ts.
• Keep the React, ./element, and ./register exports in packages/ai-credits-widget/package.json and packages/ai-credits-widget/tsup.config.ts.
• Document and test the EIP-1193 requests AI Credits actually makes so the GoodWallet security review can approve the minimum required capability set.

Acceptance criteria

• The React export works with an injected EIP-1193 provider and optional theme overrides.
• The Web Component receives the same provider and theme inputs as the React export.
• Neither integration mode requires access to GoodWallet signer or session internals.
• The production widget works without GoodWallet supplying AI Credits backend, RPC, or contract configuration.
• Missing production configuration produces a clear disabled/error state and never selects mock clients.
• @goodwidget/ai-credits-widget/register is a harmless no-op during Node/Next.js server evaluation and registers normally in the browser.
• The package exposes typed ESM and CommonJS entries for ., ./element, and ./register.
• The packed tarball contains the built entries required by a consumer.
• A clean Next.js test consumer can install the packed package and complete a production build.
• Tests cover provider/config handoff, theming, Custom Element events, missing production configuration, and required EIP-1193 requests.
• pnpm build, pnpm lint, an SSR import check, and the relevant AI Credits tests pass.

Additional context

Primary references:

• GoodWidget PR #131, only for the Web Component/SSR/package portions described above
• packages/ai-credits-widget/src/AiCreditsWidget.tsx
• packages/ai-credits-widget/src/widgetRuntimeContract.ts
• packages/ai-credits-widget/src/element.ts
• packages/ai-credits-widget/src/register.ts
• packages/ai-credits-widget/src/backendClient.ts
• packages/ai-credits-widget/src/chainClient.ts
• packages/ai-credits-widget/package.json
• packages/ai-credits-widget/tsup.config.ts
• packages/embed/src/createMiniAppElement.tsx
• packages/embed/src/bridge.ts
• examples/storybook/src/stories/ai-credits-widget/
• tests/widgets/ai-credits-widget/states.spec.ts

Out of scope:

• GoodWallet registry, routes, dashboard, authentication, or provider policy
• integration manifests, release automation, repository dispatch, or Copilot automation from PR add: automated release flow for widgets/packages, and event dispatch for automated wallet integration trigger #131
• moving widget-owned states or transaction UI into GoodWallet
• publishing the package as part of this implementation task

Create the plan

Create an execution plan in a new sub-issue and leave this feature request unchanged. Do not implement it until instructed.

• Title: [DRAFT][PLAN] Prepare AI Credits Widget for GoodWallet integration
• Type: Task
• Start the description with the sub-issue title.
• Link the sub-issue to this feature request.
• Start from the exact reference paths and the limited PR add: automated release flow for widgets/packages, and event dispatch for automated wallet integration trigger #131 diff above.
• Identify the smallest required code and test changes.
• Include required behavior, execution steps, acceptance criteria, and a human-reviewer checklist.
• Do not plan changes in the GoodWallet repository.