Opened channels list and close flow in AI Credits widget

[sirpy]

Context

Parent issue: #120

Today closing a channel requires manually pasting a channel ID. The AI Credits widget should instead show a list of channels opened for the selected buyer and allow closing a channel directly from that list.

Relevant code

• packages/ai-credits-widget/src/backendClient.ts

  • AiCreditsBackendClient.closeChannel (around line 597) posts to POST /v1/channels/:channelId/close.
  • There is currently no getChannels or equivalent backend method.

• packages/ai-credits-widget/src/adapter.ts

  • handleCloseChannel (around line 973) signs a request-close typed-data message with the buyer private key.
  • It validates the channel ID format but does not fetch a list of channels.

• packages/ai-credits-widget/src/buyerSignatures.ts

  • signRequestClose handles the EIP-712 signature needed for POST /v1/channels/:channelId/close.

• packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx

  • Close channel UI is currently a text input for channelId plus a Close button (around line 272).

• packages/ai-credits-widget/src/widgetRuntimeContract.ts

  • AiCreditsWidgetAdapterActions.closeChannel: (channelId: string) => Promise<void>.

• examples/storybook/src/stories/ai-credits-widget/AiCreditsWidget.mdx

  • Docs state: "There is no channel-list API — paste the channel ID manually."

Requirements

• Display a list of channels opened for the selected buyer.
• For each channel, show at least channel ID, status, and available balance/capacity.
• Provide a close action on each listed channel that does not require pasting the channel ID.
• Update the list when the selected buyer changes.

Acceptance Criteria

• A list of opened channels appears for the currently selected buyer.
• Each channel row shows channel ID, status, and balance/capacity.
• A user can close a channel directly from the list without pasting the channel ID.
• Switching buyers updates the channel list to that buyer's channels.
• Empty and error states are handled with appropriate messaging.

---

Create the plan

Sub-issue metadata to use when executing planning workflow:

• Title: [DRAFT][PLAN] Opened channels list and close flow in AI Credits widget
• Type: Task
• Description first line: [DRAFT][PLAN] Opened channels list and close flow in AI Credits widget
• Parent link: this issue (#124) linked back to parent initiative (#120)

Required states, flows, and behaviors

1. Buyer-scoped channels list state

   • When Manage tab is active and a buyer is available, fetch channels for the selected buyer.
   • Render list rows with at least: channel ID, status, available balance/capacity.
   • When buyer changes, refresh list for the new buyer and discard stale buyer data.

2. Close-from-list flow

   • Each row exposes a close action wired to existing EIP-712 request-close signing flow.
   • Close action should not require manual channel ID entry.
   • While close is in-flight, reflect per-row pending UX and prevent duplicate submissions.

3. Empty and error states

   • Empty state: clear message when buyer has no channels.
   • Error state: clear retry/recovery message when list fetch fails.
   • Preserve current buyer-key-required messaging for close action when buyer private key is missing.

4. Documentation and QA behavior

   • Storybook docs should describe channel list behavior (remove manual paste limitation statement).
   • QA stories/tests should cover list visible, empty list, fetch error, and close action availability.

Execution plan

1. Backend + types contract updates (ai-credits-widget package)

   • Add channel list response types and getChannels(buyer) method to backend client contract and implementations (packages/ai-credits-widget/src/backendClient.ts).
   • Ensure production client calls backend list endpoint and mock client returns deterministic fixture data.

2. Adapter state/actions wiring

   • Extend runtime adapter state with buyer-scoped channel list data and loading/error markers.
   • Add adapter logic to fetch channels when selected buyer becomes available and whenever buyer changes.
   • Reuse existing close signing flow; on successful close, refresh channel list for current buyer.

3. Manage UI replacement

   • Replace manual channel-ID input section in CreditsManagementCard.tsx with channel rows.
   • Render row details (ID/status/available balance or capacity) and row-level close button.
   • Add empty/error/loading UI states with concise messaging.

4. Runtime contract + docs alignment

   • Update any adapter/runtime types affected by channel-list state and row close action plumbing.
   • Update examples/storybook/src/stories/ai-credits-widget/AiCreditsWidget.mdx backend/API section to document channel-list behavior.

5. Storybook + Playwright coverage

   • Add/adjust AI Credits QA stories in examples/storybook/src/stories/ai-credits-widget/ for:
     • buyer with channels
     • empty channels
     • channels fetch failure
   • Update tests/widgets/ai-credits-widget/states.spec.ts assertions/screenshots for the new manage close flow.

6. Validation

   • Run targeted checks for touched scope (storybook tests and/or widget Playwright tests) before final merge.

acceptance criteria

• A list of opened channels appears for the currently selected buyer.
• Each channel row shows channel ID, status, and balance/capacity.
• A user can close a channel directly from the list without pasting the channel ID.
• Switching buyers updates the channel list to that buyer's channels.
• Empty and error states are handled with appropriate messaging.

human-reviewer checklist

• Confirm no manual channel-ID paste field remains in Manage close flow.
• Confirm buyer switch causes channel list refresh and no stale rows are shown.
• Confirm close action still requires valid buyer signing context and surfaces clear errors.
• Confirm Storybook docs and QA fixture stories reflect channel-list behavior.
• Confirm Playwright widget state coverage includes manage list rendering + empty/error state evidence.
• Confirm changes are limited to AI Credits widget scope (no unrelated package refactors).

[blueogin]

@sirpy
Where do we get channel list?