Add Coding Plan Authentication

[xuewenjie123]

Overview

This PR introduces comprehensive authentication enhancements including Alibaba Cloud Coding Plan support and a multi-language internationalization system for the WebUI onboarding experience.

Changes

Core Features

1. Coding Plan Authentication
   • Added support for Alibaba Cloud Coding Plan authentication method in both CLI and VSCode extension
   • Supports two regions:
     • 阿里云百炼 (aliyun.com) - China region
     • Alibaba Cloud (alibabacloud.com) - Global region
   • New codingPlanLogic.ts utility for handling Coding Plan authentication flow

2 Enhanced Onboarding Experience

• Updated WebUI Onboarding component with:
  • Authentication method selection interface
  • Coding Plan API key and region input form
  • Custom configuration guidance for OpenAI-compatible APIs
  • Error message display for login failures
• VSCode WebView integration with auth state management
• Improved authentication flow with methodId and _meta parameter passing

Modified Files

CLI Package:

• packages/cli/src/acp-integration/acpAgent.ts - Added Coding Plan auth handling
• packages/cli/src/acp-integration/authMethods.ts - Updated auth method list with i18n
• packages/cli/src/utils/codingPlanLogic.ts - New utility for Coding Plan auth

Core Package:

• packages/core/src/core/contentGenerator.ts - Minor updates
• packages/core/src/models/constants.ts - Added Coding Plan constants

VSCode Extension:

• packages/vscode-ide-companion/src/services/acpConnection.ts
• packages/vscode-ide-companion/src/services/qwenAgentManager.ts
• packages/vscode-ide-companion/src/services/qwenConnectionHandler.ts
• packages/vscode-ide-companion/src/types/acpTypes.ts
• packages/vscode-ide-companion/src/utils/authErrors.ts
• packages/vscode-ide-companion/src/webview/App.tsx
• packages/vscode-ide-companion/src/webview/components/layout/Onboarding.tsx
• packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts
• packages/vscode-ide-companion/src/webview/handlers/MessageRouter.ts
• packages/vscode-ide-companion/src/webview/handlers/SessionMessageHandler.ts
• packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.ts
• packages/vscode-ide-companion/src/webview/providers/MessageHandler.ts
• packages/vscode-ide-companion/src/webview/providers/WebViewProvider.ts

WebUI:

• packages/webui/src/components/layout/Onboarding.tsx - Complete UI overhaul
• packages/webui/src/utils/i18n.ts - New i18n module

Technical Details

Authentication Flow

1. User selects authentication method from onboarding screen
2. For Coding Plan:
   • User enters API key and selects region
   • Credentials passed via _meta parameter to authenticate handler
   • API key stored in settings with proper persistence scope
3. For OAuth: Standard OAuth flow continues
4. For OpenAI-compatible: Guidance to settings.json configuration

Type Safety Notes

Some any types were introduced to handle dynamic authentication metadata passing between components. These should be refined in future iterations with proper interface definitions.

Testing

• Manual testing of OAuth flow (unchanged)
• Manual testing of Coding Plan authentication with both regions
• UI testing of onboarding flow in WebUI
• VSCode extension WebView message handling

Related Issues

• Addresses issue VS Code Extension: Support all authentication methods (Coding Plan, API Key) like the CLI #2134

Screenshots

Video

vc.mp4

[github-actions]

📋 Review Summary

This PR introduces comprehensive authentication enhancements including Alibaba Cloud Coding Plan support and a multi-language internationalization system for the WebUI onboarding experience. The implementation is well-structured overall, with good separation of concerns between CLI, VSCode extension, and WebUI packages. However, there are several areas requiring attention, particularly around type safety, error handling consistency, and some architectural decisions.

🔍 General Feedback

• Positive: Good modular design with clear separation between authentication logic (codingPlanLogic.ts), i18n utilities, and UI components
• Positive: The authentication flow properly supports multiple regions and maintains backward compatibility with existing OAuth flow
• Positive: i18n implementation covers 6 languages with automatic browser detection
• Concern: The PR description mentions "Some any types were introduced" - this should be addressed with proper interface definitions as noted
• Concern: Several files have substantial logic changes without corresponding test files
• Pattern: Good use of existing infrastructure (settings persistence, model provider config) rather than creating parallel systems

🎯 Specific Feedback

🔴 Critical

• File: packages/cli/src/utils/codingPlanLogic.ts:24 - API key is stored in settings and then immediately also set in process.env. This dual storage could lead to inconsistency if one is updated but not the other. Consider making the environment variable derivation purely reactive from settings.

• File: packages/vscode-ide-companion/src/utils/authErrors.ts:73 - The extractAuthMethodsFromError function uses any[] return type and loose type checking. The early return statement if (!error || typeof error !== 'object') {return null;} has inconsistent formatting (missing space before brace).

• File: packages/webui/src/utils/i18n.ts:97 - The getCurrentLanguage() function returns 'en' for SSR environments (typeof navigator === 'undefined'), but this could cause hydration mismatches if the server-rendered content differs from client. Consider making this more explicit or deferring language detection until mount.

🟡 High

• File: packages/cli/src/acp-integration/acpAgent.ts:148-152 - The Coding Plan authentication extracts apiKey and region from _meta without validating their types beyond existence. The region validation only checks for 'global' vs defaulting to China, but doesn't validate that regionStr is actually a valid string.

• File: packages/vscode-ide-companion/src/services/qwenAgentManager.ts:91 - Changed private currentWorkingDir to public (currentWorkingDir). This breaks encapsulation. If external access is needed, consider a getter method instead.

• File: packages/vscode-ide-companion/src/services/qwenAgentManager.ts:92 - New property availableAuthMethods is typed as Array<Record<string, unknown>> | undefined. This should use the AuthMethod type from ACP SDK or a properly defined interface.

• File: packages/vscode-ide-companion/src/webview/App.tsx:85 - State variable authMethods uses Array<Record<string, unknown>> instead of a proper type. This propagates type unsafety throughout the authentication flow.

• File: packages/webui/src/components/layout/Onboarding.tsx:43-48 - The handleLogin function sets selectedMethodId for 'coding-plan' and 'openai', but the type of methodId parameter allows any string. This should be typed more strictly.

🟢 Medium

• File: packages/cli/src/acp-integration/authMethods.ts:10-38 - The auth methods are now using i18n for name and description, but the AuthMethod interface from ACP SDK may not expect localized strings. Consider whether these should be localized at the display layer instead.

• File: packages/vscode-ide-companion/src/utils/authErrors.ts:73-84 - The extractAuthMethodsFromError function has two similar code paths checking record['data'] and record['error']['data']. This could be refactored into a helper function.

• File: packages/vscode-ide-companion/src/webview/App.tsx:945 - The className conditional logic ${hasContent ? 'pb-[140px]' : 'pb-5'} is good, but consider extracting this complex className to a separate variable or using a classnames utility for better readability.

• File: packages/webui/src/utils/i18n.ts:89-96 - Language detection only checks startsWith() which would match 'zh-CN', 'zh-TW', etc. to 'zh'. This is probably intentional, but consider handling Traditional vs Simplified Chinese explicitly if different translations are needed in the future.

• File: packages/cli/src/utils/codingPlanLogic.ts:48-50 - Settings are set for security.auth.selectedType to AuthType.USE_OPENAI after Coding Plan auth. This seems like a workaround that could be confusing. Consider documenting why Coding Plan auth maps to USE_OPENAI.

🔵 Low

• File: packages/vscode-ide-companion/src/services/acpConnection.ts:169 - The comment // eslint-disable-next-line @typescript-eslint/no-this-alias was removed and replaced with just whitespace. Either keep the eslint disable with explanation or remove the self variable entirely by using arrow functions.

• File: packages/webui/src/components/layout/Onboarding.tsx:78 - The error message div uses hardcoded bg-red-500/10 and text-red-500 colors. Consider using CSS variables for theme consistency with VSCode.

• File: packages/webui/src/utils/i18n.ts - Missing translations for some keys that appear in the Onboarding component. For example, "Bring your own API key" and "Paid · Up to 6,000 requests/5 hrs · All Alibaba Cloud Coding Plan Models" from authMethods.ts are not in the i18n file.

• File: packages/vscode-ide-companion/src/webview/handlers/AuthMessageHandler.ts:16 - The type ((methodId?: string, _meta?: any) => Promise<void>) uses any for _meta. Should use a proper interface.

• File: packages/core/src/models/constants.ts:90-95 - The CODING_PLAN auth type mapping has empty arrays for baseUrl and model. This is fine if intentional, but could use a comment explaining why these are empty.

• File: packages/webui/src/components/layout/Onboarding.tsx:120 - The region select options have Chinese characters hardcoded (阿里云百炼, etc.). These should also be translated via i18n keys.

✅ Highlights

• Excellent: The codingPlanLogic.ts utility cleanly separates the authentication flow logic, making it testable and reusable
• Excellent: The i18n module is well-structured with clear translation keys and easy extensibility for additional languages
• Good: Proper error message propagation from backend to UI through the loginErrorMessage state
• Good: The authentication flow preserves existing OAuth functionality while adding new Coding Plan support
• Good: VSCode WebView integration properly handles auth state with authMethods array for dynamic UI rendering
• Good: The Onboarding component provides clear guidance for OpenAI-compatible API configuration with documentation links