Skip to content

[claude-code] Add ClaudeCode settings UI component #762

Description

@edelauna

Parent issue

#756

Depends on

#757 #761

Context

Adds the provider settings panel for Claude Code, following the OpenAICodex component pattern. No sign-in button needed — authentication is done externally via claude login.

Files

  • webview-ui/src/components/settings/providers/ClaudeCode.tsx (new)
  • webview-ui/src/components/settings/providers/index.ts
  • webview-ui/src/components/settings/ApiOptions.tsx (register provider)
  • i18n keys in src/i18n/locales/en/settings.json
  • webview-ui/src/components/settings/providers/__tests__/ClaudeCode.spec.tsx (new)

Work

  • Auth status indicator: green checkmark + version string when connected; amber warning "Claude CLI not found — run claude login" when not
  • Model picker with hidePricing (subscription-based, same as Codex)
  • Optional CLI path text input, maps to claudeCodeCliPath setting
  • Billing note: "Uses your Claude Pro/Max subscription. Usage draws from your plan limits."
  • Requests claudeCodeAuthStatus on mount; re-checks when claudeCodeCliPath changes

Tests

  • Renders connected state with version string
  • Renders disconnected state with install instructions
  • CLI path input updates claudeCodeCliPath via setApiConfigurationField
  • Model picker is present
  • Billing note is rendered

Acceptance criteria

  • Component renders correctly in light, dark, and high-contrast themes (uses VS Code CSS variables)
  • All i18n keys present in settings.json
  • All tests pass

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions