Add provider credential management UI (API key / OAuth setup)

[shuv1337]

Summary

The upstream OpenCode server project added the ability to add provider credentials from the TUI in sst/opencode#4569 (commit 23ea8ba). This feature exposes new API endpoints that allow users to:

1. View all available providers (both connected and unconnected)
2. Get authentication methods for each provider (OAuth vs API key)
3. Initiate OAuth flows with support for both "auto" (browser redirect) and "code" (manual entry) methods
4. Set API keys directly

We should add support for this feature in oc-web to allow users to connect providers directly from the web UI.

Problem / Context

Currently, users must configure provider credentials outside of oc-web (via environment variables, config files, or the TUI). This creates friction for onboarding new users and makes it harder to switch or add providers dynamically.

With the new upstream API support, we can now offer a seamless in-app experience for connecting providers.

New API Endpoints

The following endpoints were added to the OpenCode server:

GET /provider

Returns all providers with connection status:

{
  all: Provider[];           // All available providers with models
  default: Record<string, string>;  // Default model per provider
  connected: string[];       // Provider IDs that are currently connected
}

GET /provider/auth

Returns authentication methods per provider:

{
  [providerID: string]: Array<{
    type: "oauth" | "api";
    label: string;
  }>
}

POST /provider/:id/oauth/authorize

Initiates OAuth flow:

• Input: { method: number } (auth method index)
• Output: { url: string, method: "auto" | "code", instructions: string }

POST /provider/:id/oauth/callback

Completes OAuth flow:

• Input: { method: number, code?: string } (code only needed for "code" method)
• Output: boolean

PUT /auth/:id (existing)

Sets API key directly:

• Input: { type: "api", key: string }

Acceptance Criteria

• Users can view a list of available providers (both connected and unconnected) from the model picker or a dedicated UI
• Connected providers are visually distinguished from unconnected ones
• Users can initiate connection for unconnected providers
• For providers supporting OAuth:
  • "Auto" method opens authorization URL and waits for callback
  • "Code" method displays URL and allows manual code entry
• For providers supporting API key auth:
  • Secure input field for entering API key (password type input)
  • Validation feedback on success/failure
• After successful connection, the model picker updates to show newly available models
• Error handling with user-friendly messages for common failures
• Mobile-responsive design

Implementation Details

UI Components to Add

1. ProviderPicker / ProviderDialog

   • List of all providers grouped by connection status
   • Visual indicator for connected vs unconnected
   • "Connect" action for unconnected providers

2. ProviderAuthDialog

   • Displays auth method options (OAuth vs API key)
   • For OAuth: Shows authorization URL, instructions, and handles code entry if needed
   • For API key: Password input field with submit button

3. Integration Points

   • Model picker: Show unconnected providers with "Connect" CTA when no models are available
   • Settings/Configuration: Dedicated provider management section
   • Command palette: "Connect provider" command

API Functions to Add (opencode-http-api.ts)

// Get all providers with connection status
export async function listProviders(directory?: string): Promise<{
  all: Provider[];
  default: Record<string, string>;
  connected: string[];
}>

// Get auth methods for providers
export async function getProviderAuthMethods(directory?: string): Promise<
  Record<string, Array<{ type: "oauth" | "api"; label: string }>>
>

// Start OAuth authorization
export async function authorizeProvider(
  providerId: string,
  methodIndex: number,
  directory?: string
): Promise<{ url: string; method: "auto" | "code"; instructions: string } | undefined>

// Complete OAuth callback
export async function completeProviderAuth(
  providerId: string,
  methodIndex: number,
  code?: string,
  directory?: string
): Promise<boolean>

Type Definitions to Add (types/opencode.ts)

export interface ProviderAuthMethod {
  type: "oauth" | "api";
  label: string;
}

export interface ProviderAuthAuthorization {
  url: string;
  method: "auto" | "code";
  instructions: string;
}

export interface ProviderListResponse {
  all: Provider[];
  default: Record<string, string>;
  connected: string[];
}

Reference Implementation

The TUI implementation in the upstream repo provides a good reference:

• dialog-provider.tsx - Provider selection dialog
• dialog-model.tsx - Model selection with provider integration
• auth.ts - Server-side auth handling

Key patterns from TUI implementation:

• Provider priority ordering (opencode > anthropic > github-copilot > openai > google > openrouter)
• Show "Free" badge for OpenCode provider models with zero cost
• Return to model selection after successful provider connection
• Support for both OAuth flows (auto + code-based)

Tasks

• Add new API functions to opencode-http-api.ts
• Add type definitions to types/opencode.ts
• Create ProviderAuthDialog component
• Integrate provider connection into model picker
• Add "Connect provider" command to command palette
• Add provider management section to settings (if applicable)
• Test OAuth flows (auto and code methods)
• Test API key authentication
• Ensure mobile responsiveness
• Update documentation if needed

External References

• Upstream PR: sst/opencode#4569
• Upstream commit: 23ea8ba
• SDK types: types.gen.ts