feat(ui): integrate pricing overrides into provider config

[monotykamary]

Summary

This PR integrates the existing PricingOverridesFormFragment into the Provider Configuration sheet, enabling users to set custom pricing for any provider (including custom providers) through the UI. Previously, pricing overrides could only be set via API or config.json.

Changes

UI Changes

• ProviderConfigSheet: Added "Pricing" tab to the provider configuration sheet
• PricingOverridesFormFragment: Refactored to use react-hook-form with zodResolver for consistent form handling
  • Replaced manual useState with proper form state management
  • Added real-time JSON validation
  • Integrated with updateProvider mutation
  • Added RBAC permission checks
  • Proper form dirty state tracking

E2E Test Coverage

• providers.page.ts: Added 8 new methods for pricing tab interaction
• providers.spec.ts: Added 7 comprehensive E2E tests
• pricing.smoke.spec.ts: Added 4 smoke tests for critical paths
• pricing.types.spec.ts: Added 4 TypeScript type validation tests
• pricing.api.spec.ts: Added 2 API integration tests
• selectors.ts: Added pricing tab and form selectors

Type of change

• Feature
• Refactor

Affected areas

• UI (Next.js)
• Transports (HTTP) - E2E tests

How to test

UI Development

cd ui
pnpm i
pnpm dev

1. Navigate to Providers → Select any provider (e.g., OpenAI)
2. Click "Edit Provider Config"
3. Select the "Pricing" tab
4. Enter JSON pricing overrides:

[
  {
    "model_pattern": "gpt-4o*",
    "match_type": "wildcard",
    "request_types": ["chat_completion"],
    "input_cost_per_token": 0.000005,
    "output_cost_per_token": 0.000015
  }
]

5. Click "Save Pricing Overrides"

E2E Tests

# Install dependencies
cd tests/e2e && npm ci

# Run pricing-specific tests
npx playwright test features/providers/pricing.smoke.spec.ts
npx playwright test features/providers/providers.spec.ts -g "Pricing Overrides"

Screenshots/Recordings

N/A - The UI follows existing design patterns from other config tabs (Network, Proxy, Performance, Governance).

The Pricing tab:

• Shows a JSON textarea with validation
• Has Reset and Save buttons
• Displays validation errors inline
• Follows the same layout as other configuration tabs

Breaking changes

• No

Related issues

N/A - This is a feature enhancement based on user inquiry about setting custom provider costs through the UI.

Security considerations

• RBAC permissions are checked using useRbac(RbacResource.ModelProvider, RbacOperation.Update)
• Form is disabled for users without update permissions
• No new secrets or auth mechanisms introduced

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate (18 new tests total)
• I verified builds succeed (Go and UI)
• E2E tests follow existing patterns in the codebase
• UI follows established form patterns (DebuggingFormFragment, GovernanceFormFragment)

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}