ai-changelog-generator-extension 0.4.0

package/src/views/OnboardingPanelProvider.ts

@@ -0,0 +1,1366 @@
+import * as vscode from 'vscode'
+import { ExtensionConfigurationManager } from '../services/ExtensionConfigurationManager'
+import { EnvFileService } from '../services/EnvFileService'
+import { StatusService } from '../services/StatusService'
+
+export class OnboardingPanelProvider {
+  public static currentPanel: OnboardingPanelProvider | undefined
+  private readonly _panel: vscode.WebviewPanel
+  private _disposables: vscode.Disposable[] = []
+
+  public static createOrShow(
+    extensionUri: vscode.Uri,
+    configManager: ExtensionConfigurationManager
+  ) {
+    // Open in the active editor column, or first column if none active
+    const column = vscode.window.activeTextEditor
+      ? vscode.window.activeTextEditor.viewColumn
+      : vscode.ViewColumn.One
+
+    // If we already have a panel, show it
+    if (OnboardingPanelProvider.currentPanel) {
+      OnboardingPanelProvider.currentPanel._panel.reveal(column)
+      return
+    }
+
+    // Otherwise, create a new panel in the main editor area
+    const panel = vscode.window.createWebviewPanel(
+      'aiChangelogOnboarding',
+      '🚀 AI Changelog Setup',
+      column || vscode.ViewColumn.One,
+      {
+        enableScripts: true,
+        localResourceRoots: [extensionUri],
+        retainContextWhenHidden: true,
+      }
+    )
+
+    OnboardingPanelProvider.currentPanel = new OnboardingPanelProvider(
+      panel,
+      extensionUri,
+      configManager
+    )
+  }
+
+  private constructor(
+    panel: vscode.WebviewPanel,
+    extensionUri: vscode.Uri,
+    private readonly _configManager: ExtensionConfigurationManager
+  ) {
+    this._panel = panel
+
+    // Set the webview's initial html content
+    this._panel.webview.html = this._getHtmlForWebview(this._panel.webview)
+
+    // Listen for when the panel is disposed
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables)
+
+    // Handle messages from the webview
+    this._panel.webview.onDidReceiveMessage(
+      async (message) => {
+        switch (message.type) {
+          case 'testStorageMode':
+            await this._testStorageMode(message.mode)
+            break
+          case 'testProvider':
+            await this._testProvider(message.provider)
+            break
+          case 'testApiKey':
+            await this._testApiKey(message.provider, message.apiKey)
+            break
+          case 'saveConfiguration':
+            await this._saveConfiguration(message.config)
+            break
+          case 'testFullConnection':
+            await this._testFullConnection()
+            break
+          case 'skipSetup':
+            await this._skipSetup()
+            break
+          case 'loadCurrentConfig':
+            await this._loadCurrentConfig()
+            break
+        }
+      },
+      null,
+      this._disposables
+    )
+
+    // Load current configuration
+    this._loadCurrentConfig()
+  }
+
+  private async _testStorageMode(mode: string) {
+    StatusService.log(`[Onboarding] Testing storage mode: ${mode}`)
+
+    try {
+      if (mode === 'env') {
+        const envVars = await EnvFileService.detectEnvironmentVariables()
+        const keyCount = Object.keys(envVars).length
+
+        if (keyCount > 0) {
+          // Send detected env vars to auto-fill the form
+          this._sendMessage({
+            type: 'validationResult',
+            step: 'storage',
+            success: true,
+            message: `✅ Found ${keyCount} configuration(s) in .env files`,
+            data: { keys: Object.keys(envVars), envVars },
+          })
+
+          // Also send a message to pre-fill the form with detected values
+          this._sendMessage({
+            type: 'envDetected',
+            envVars,
+          })
+        } else {
+          this._sendMessage({
+            type: 'validationResult',
+            step: 'storage',
+            success: false,
+            message: '⚠️ No .env file found. You can create one or choose a different storage mode.',
+          })
+        }
+      } else if (mode === 'secrets') {
+        this._sendMessage({
+          type: 'validationResult',
+          step: 'storage',
+          success: true,
+          message: '✅ Secure storage is available and ready to use',
+        })
+      } else if (mode === 'settings') {
+        this._sendMessage({
+          type: 'validationResult',
+          step: 'storage',
+          success: true,
+          message: '⚠️ Settings storage works but stores keys in plain text (not recommended)',
+        })
+      }
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error)
+      this._sendMessage({
+        type: 'validationResult',
+        step: 'storage',
+        success: false,
+        message: `❌ Error: ${errorMsg}`,
+      })
+    }
+  }
+
+  private async _testProvider(provider: string) {
+    StatusService.log(`[Onboarding] Testing provider: ${provider}`)
+
+    try {
+      if (provider === 'ollama') {
+        const config = vscode.workspace.getConfiguration('aiChangelog')
+        const host = config.get<string>('ollamaHost', 'http://localhost:11434')
+
+        try {
+          const response = await fetch(`${host}/api/tags`)
+          if (response.ok) {
+            const data = await response.json()
+            const models = data.models?.map((m: any) => m.name) || []
+            this._sendMessage({
+              type: 'validationResult',
+              step: 'provider',
+              success: true,
+              message: `✅ Ollama is running with ${models.length} model(s)`,
+              data: { models, requiresApiKey: false },
+            })
+          } else {
+            throw new Error(`HTTP ${response.status}`)
+          }
+        } catch (err) {
+          this._sendMessage({
+            type: 'validationResult',
+            step: 'provider',
+            success: false,
+            message: '❌ Ollama is not running. Please start Ollama first.',
+          })
+        }
+        return
+      }
+
+      if (provider === 'lmstudio') {
+        const config = vscode.workspace.getConfiguration('aiChangelog')
+        const host = config.get<string>('lmStudioHost', 'http://localhost:1234')
+
+        try {
+          const response = await fetch(`${host}/v1/models`)
+          if (response.ok) {
+            const data = await response.json()
+            const models = data.data?.map((m: any) => m.id) || []
+            this._sendMessage({
+              type: 'validationResult',
+              step: 'provider',
+              success: true,
+              message: `✅ LM Studio is running with ${models.length} model(s)`,
+              data: { models, requiresApiKey: false },
+            })
+          } else {
+            throw new Error(`HTTP ${response.status}`)
+          }
+        } catch (err) {
+          this._sendMessage({
+            type: 'validationResult',
+            step: 'provider',
+            success: false,
+            message: '❌ LM Studio is not running. Please start LM Studio first.',
+          })
+        }
+        return
+      }
+
+      // Cloud providers need API keys
+      this._sendMessage({
+        type: 'validationResult',
+        step: 'provider',
+        success: true,
+        message: `✅ ${this._getProviderDisplayName(provider)} selected. API key required in next step.`,
+        data: { requiresApiKey: true },
+      })
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error)
+      this._sendMessage({
+        type: 'validationResult',
+        step: 'provider',
+        success: false,
+        message: `❌ Error: ${errorMsg}`,
+      })
+    }
+  }
+
+  private async _testApiKey(provider: string, apiKey: string) {
+    StatusService.log(`[Onboarding] Testing API key for ${provider}`)
+
+    if (!apiKey || apiKey.length < 10) {
+      this._sendMessage({
+        type: 'validationResult',
+        step: 'apiKey',
+        success: false,
+        message: '❌ API key is too short or empty',
+      })
+      return
+    }
+
+    // Show loading state
+    this._sendMessage({
+      type: 'validationResult',
+      step: 'apiKey',
+      success: null,
+      message: '🔄 Testing API connection...',
+    })
+
+    try {
+      // Temporarily store the key to test it
+      await this._configManager.storeApiKey(provider, apiKey)
+
+      // Test connection using the command
+      await vscode.commands.executeCommand('ai-changelog.testConnection')
+
+      this._sendMessage({
+        type: 'validationResult',
+        step: 'apiKey',
+        success: true,
+        message: `✅ API key is valid! Connection successful.`,
+      })
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error)
+      this._sendMessage({
+        type: 'validationResult',
+        step: 'apiKey',
+        success: false,
+        message: `❌ Connection failed: ${errorMsg}`,
+      })
+    }
+  }
+
+  private async _saveConfiguration(config: any) {
+    StatusService.log('[Onboarding] Saving configuration...')
+
+    try {
+      const wsConfig = vscode.workspace.getConfiguration('aiChangelog')
+
+      // Save all settings
+      await wsConfig.update('storageMode', config.storageMode, vscode.ConfigurationTarget.Workspace)
+      await wsConfig.update('provider', config.provider, vscode.ConfigurationTarget.Workspace)
+
+      if (config.model) {
+        await wsConfig.update('model', config.model, vscode.ConfigurationTarget.Workspace)
+      }
+
+      if (config.temperature !== undefined) {
+        await wsConfig.update('temperature', config.temperature, vscode.ConfigurationTarget.Workspace)
+      }
+
+      // Provider-specific settings
+      if (config.azureEndpoint) {
+        await wsConfig.update('azureEndpoint', config.azureEndpoint, vscode.ConfigurationTarget.Workspace)
+      }
+      if (config.azureDeploymentName) {
+        await wsConfig.update('azureDeploymentName', config.azureDeploymentName, vscode.ConfigurationTarget.Workspace)
+      }
+      if (config.ollamaHost) {
+        await wsConfig.update('ollamaHost', config.ollamaHost, vscode.ConfigurationTarget.Workspace)
+      }
+      if (config.lmStudioHost) {
+        await wsConfig.update('lmStudioHost', config.lmStudioHost, vscode.ConfigurationTarget.Workspace)
+      }
+
+      // Save API key if provided
+      if (config.apiKey) {
+        await this._configManager.storeApiKey(config.provider, config.apiKey)
+      }
+
+      // Mark setup as complete
+      await wsConfig.update('setupCompleted', true, vscode.ConfigurationTarget.Workspace)
+
+      // Reinitialize config manager
+      await this._configManager.initialize()
+      StatusService.updateStatus(this._configManager)
+
+      this._sendMessage({
+        type: 'saveComplete',
+        success: true,
+        message: '✅ Setup complete! You can now use AI Changelog Generator.',
+      })
+
+      StatusService.log('[Onboarding] Configuration saved successfully')
+
+      // Show success message and close panel after short delay
+      setTimeout(() => {
+        vscode.window.showInformationMessage(
+          '🎉 AI Changelog Generator is ready to use!',
+          'Generate Commit',
+          'Generate Release'
+        ).then((action) => {
+          if (action === 'Generate Commit') {
+            vscode.commands.executeCommand('ai-changelog.generateCommit')
+          } else if (action === 'Generate Release') {
+            vscode.commands.executeCommand('ai-changelog.generateRelease')
+          }
+        })
+
+        this._panel.dispose()
+      }, 2000)
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error)
+      this._sendMessage({
+        type: 'saveComplete',
+        success: false,
+        message: `❌ Failed to save: ${errorMsg}`,
+      })
+      StatusService.log(`[Onboarding] Save failed: ${errorMsg}`)
+    }
+  }
+
+  private async _testFullConnection() {
+    StatusService.log('[Onboarding] Testing full connection...')
+
+    this._sendMessage({
+      type: 'connectionTest',
+      status: 'testing',
+      message: '🔄 Testing connection to AI provider...',
+    })
+
+    try {
+      await vscode.commands.executeCommand('ai-changelog.testConnection')
+
+      this._sendMessage({
+        type: 'connectionTest',
+        status: 'success',
+        message: '✅ Connection successful! Everything is working.',
+      })
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error)
+      this._sendMessage({
+        type: 'connectionTest',
+        status: 'error',
+        message: `❌ Connection failed: ${errorMsg}`,
+      })
+    }
+  }
+
+  private async _skipSetup() {
+    const wsConfig = vscode.workspace.getConfiguration('aiChangelog')
+    await wsConfig.update('setupCompleted', true, vscode.ConfigurationTarget.Workspace)
+
+    vscode.window.showInformationMessage(
+      'Setup skipped. You can configure settings later from the Settings panel.',
+      'Open Settings'
+    ).then((action) => {
+      if (action === 'Open Settings') {
+        vscode.commands.executeCommand('ai-changelog-settings-view.focus')
+      }
+    })
+
+    this._panel.dispose()
+  }
+
+  private async _loadCurrentConfig() {
+    const config = vscode.workspace.getConfiguration('aiChangelog')
+
+    this._sendMessage({
+      type: 'configLoaded',
+      config: {
+        storageMode: config.get<string>('storageMode', 'secrets'),
+        provider: config.get<string>('provider', 'openai'),
+        model: config.get<string>('model', ''),
+        temperature: config.get<number>('temperature', 0.3),
+        azureEndpoint: config.get<string>('azureEndpoint', ''),
+        azureDeploymentName: config.get<string>('azureDeploymentName', ''),
+        ollamaHost: config.get<string>('ollamaHost', 'http://localhost:11434'),
+        lmStudioHost: config.get<string>('lmStudioHost', 'http://localhost:1234'),
+      },
+    })
+  }
+
+  private _getProviderDisplayName(provider: string): string {
+    const names: { [key: string]: string } = {
+      openai: 'OpenAI',
+      anthropic: 'Anthropic (Claude)',
+      google: 'Google (Gemini)',
+      azure: 'Azure OpenAI',
+      bedrock: 'AWS Bedrock',
+      ollama: 'Ollama',
+      lmstudio: 'LM Studio',
+    }
+    return names[provider] || provider
+  }
+
+  private _sendMessage(message: any) {
+    this._panel.webview.postMessage(message)
+  }
+
+  public dispose() {
+    OnboardingPanelProvider.currentPanel = undefined
+
+    this._panel.dispose()
+
+    while (this._disposables.length) {
+      const disposable = this._disposables.pop()
+      if (disposable) {
+        disposable.dispose()
+      }
+    }
+  }
+
+  private _getHtmlForWebview(webview: vscode.Webview): string {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Changelog Setup</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--vscode-font-family);
+      font-size: var(--vscode-font-size);
+      color: var(--vscode-foreground);
+      background: var(--vscode-editor-background);
+      padding: 0;
+      overflow-x: hidden;
+    }
+
+    .container {
+      max-width: 700px;
+      margin: 0 auto;
+      padding: 40px 20px;
+    }
+
+    .header {
+      text-align: center;
+      margin-bottom: 48px;
+    }
+
+    .header h1 {
+      font-size: 32px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      background: linear-gradient(135deg, var(--vscode-textLink-foreground), var(--vscode-textLink-activeForeground));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .header p {
+      color: var(--vscode-descriptionForeground);
+      font-size: 14px;
+    }
+
+    .progress-bar {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 48px;
+      position: relative;
+    }
+
+    .progress-bar::before {
+      content: '';
+      position: absolute;
+      top: 18px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--vscode-input-border);
+      z-index: 0;
+    }
+
+    .progress-fill {
+      position: absolute;
+      top: 18px;
+      left: 0;
+      height: 2px;
+      background: var(--vscode-textLink-foreground);
+      z-index: 1;
+      transition: width 0.3s ease;
+    }
+
+    .step-indicator {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--vscode-input-background);
+      border: 2px solid var(--vscode-input-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 14px;
+      z-index: 2;
+      position: relative;
+      transition: all 0.3s ease;
+    }
+
+    .step-indicator.active {
+      background: var(--vscode-textLink-foreground);
+      border-color: var(--vscode-textLink-foreground);
+      color: white;
+    }
+
+    .step-indicator.completed {
+      background: var(--vscode-testing-iconPassed);
+      border-color: var(--vscode-testing-iconPassed);
+      color: white;
+    }
+
+    .step-indicator.completed::after {
+      content: '✓';
+    }
+
+    .step {
+      display: none;
+      animation: fadeIn 0.3s ease;
+    }
+
+    .step.active {
+      display: block;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .step-title {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .step-description {
+      color: var(--vscode-descriptionForeground);
+      margin-bottom: 32px;
+      font-size: 13px;
+      line-height: 1.6;
+    }
+
+    .option-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    .option {
+      padding: 16px;
+      border: 2px solid var(--vscode-input-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      background: var(--vscode-input-background);
+    }
+
+    .option:hover {
+      border-color: var(--vscode-textLink-foreground);
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .option.selected {
+      border-color: var(--vscode-textLink-foreground);
+      background: var(--vscode-list-activeSelectionBackground);
+    }
+
+    .option-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+    }
+
+    .option-icon {
+      font-size: 24px;
+    }
+
+    .option-title {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .option-badge {
+      margin-left: auto;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .option-badge.recommended {
+      background: rgba(22, 163, 74, 0.2);
+      color: var(--vscode-terminal-ansiGreen);
+    }
+
+    .option-badge.local {
+      background: rgba(59, 130, 246, 0.2);
+      color: var(--vscode-terminal-ansiBlue);
+    }
+
+    .option-description {
+      color: var(--vscode-descriptionForeground);
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+    }
+
+    input, select {
+      width: 100%;
+      padding: 10px 12px;
+      background: var(--vscode-input-background);
+      color: var(--vscode-input-foreground);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 4px;
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    input[type="password"] {
+      font-family: monospace;
+    }
+
+    input:focus, select:focus {
+      outline: 1px solid var(--vscode-focusBorder);
+      border-color: var(--vscode-focusBorder);
+    }
+
+    .input-hint {
+      margin-top: 6px;
+      font-size: 11px;
+      color: var(--vscode-descriptionForeground);
+      font-style: italic;
+    }
+
+    .validation-message {
+      margin-top: 12px;
+      padding: 12px;
+      border-radius: 4px;
+      font-size: 13px;
+      display: none;
+      animation: slideDown 0.2s ease;
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-5px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .validation-message.show {
+      display: block;
+    }
+
+    .validation-message.success {
+      background: rgba(22, 163, 74, 0.15);
+      color: var(--vscode-terminal-ansiGreen);
+      border: 1px solid rgba(22, 163, 74, 0.3);
+    }
+
+    .validation-message.error {
+      background: rgba(239, 68, 68, 0.15);
+      color: var(--vscode-errorForeground);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+
+    .validation-message.loading {
+      background: rgba(59, 130, 246, 0.15);
+      color: var(--vscode-terminal-ansiBlue);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+    }
+
+    .button-group {
+      display: flex;
+      gap: 12px;
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid var(--vscode-panel-border);
+    }
+
+    button {
+      flex: 1;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 4px;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .btn-primary {
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: var(--vscode-button-hoverBackground);
+    }
+
+    .btn-secondary {
+      background: var(--vscode-button-secondaryBackground);
+      color: var(--vscode-button-secondaryForeground);
+    }
+
+    .btn-secondary:hover:not(:disabled) {
+      background: var(--vscode-button-secondaryHoverBackground);
+    }
+
+    .btn-text {
+      background: transparent;
+      color: var(--vscode-textLink-foreground);
+      border: 1px solid var(--vscode-input-border);
+    }
+
+    .btn-text:hover:not(:disabled) {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .test-button {
+      margin-top: 12px;
+      width: auto;
+      padding: 8px 20px;
+      background: var(--vscode-button-secondaryBackground);
+      color: var(--vscode-button-secondaryForeground);
+    }
+
+    .summary-section {
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 24px;
+    }
+
+    .summary-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--vscode-panel-border);
+    }
+
+    .summary-item:last-child {
+      border-bottom: none;
+    }
+
+    .summary-label {
+      color: var(--vscode-descriptionForeground);
+      font-size: 13px;
+    }
+
+    .summary-value {
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .success-icon {
+      font-size: 64px;
+      text-align: center;
+      margin-bottom: 24px;
+    }
+
+    .azure-fields, .ollama-fields, .lmstudio-fields {
+      display: none;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid var(--vscode-panel-border);
+    }
+
+    .azure-fields.show, .ollama-fields.show, .lmstudio-fields.show {
+      display: block;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>🚀 Welcome to AI Changelog Generator</h1>
+      <p>Let's get you set up in just a few steps</p>
+    </div>
+
+    <div class="progress-bar">
+      <div class="progress-fill" id="progressFill"></div>
+      <div class="step-indicator" data-step="1">1</div>
+      <div class="step-indicator" data-step="2">2</div>
+      <div class="step-indicator" data-step="3">3</div>
+      <div class="step-indicator" data-step="4">4</div>
+    </div>
+
+    <!-- Step 1: Storage Mode -->
+    <div class="step active" data-step="1">
+      <h2 class="step-title">Choose Storage Method</h2>
+      <p class="step-description">
+        Select how you want to store your AI provider API keys. We recommend secure storage for best security.
+      </p>
+
+      <div class="option-group">
+        <div class="option" data-value="secrets" onclick="selectStorage('secrets')">
+          <div class="option-header">
+            <span class="option-icon">🔒</span>
+            <span class="option-title">Secure Storage</span>
+            <span class="option-badge recommended">Recommended</span>
+          </div>
+          <p class="option-description">
+            API keys are encrypted and stored in VSCode's secure storage (keychain/credential manager)
+          </p>
+        </div>
+
+        <div class="option" data-value="env" onclick="selectStorage('env')">
+          <div class="option-header">
+            <span class="option-icon">📄</span>
+            <span class="option-title">Environment File</span>
+          </div>
+          <p class="option-description">
+            Store API keys in a .env.local file (add to .gitignore to avoid committing)
+          </p>
+        </div>
+
+        <div class="option" data-value="settings" onclick="selectStorage('settings')">
+          <div class="option-header">
+            <span class="option-icon">⚙️</span>
+            <span class="option-title">Settings File</span>
+          </div>
+          <p class="option-description">
+            Store in VSCode settings.json (not secure - keys stored in plain text)
+          </p>
+        </div>
+      </div>
+
+      <div id="storage-validation" class="validation-message"></div>
+
+      <div class="button-group">
+        <button class="btn-text" onclick="skipSetup()">Skip Setup</button>
+        <button class="btn-primary" id="storageNext" disabled onclick="nextStep()">Continue →</button>
+      </div>
+    </div>
+
+    <!-- Step 2: Provider Selection -->
+    <div class="step" data-step="2">
+      <h2 class="step-title">Select AI Provider</h2>
+      <p class="step-description">
+        Choose which AI service you want to use for analyzing your code changes.
+      </p>
+
+      <div class="option-group">
+        <div class="option" data-value="openai" onclick="selectProvider('openai')">
+          <div class="option-header">
+            <span class="option-icon">🤖</span>
+            <span class="option-title">OpenAI</span>
+            <span class="option-badge recommended">Popular</span>
+          </div>
+          <p class="option-description">GPT-4 and other OpenAI models</p>
+        </div>
+
+        <div class="option" data-value="anthropic" onclick="selectProvider('anthropic')">
+          <div class="option-header">
+            <span class="option-icon">🧠</span>
+            <span class="option-title">Anthropic Claude</span>
+          </div>
+          <p class="option-description">Claude 3 models for detailed analysis</p>
+        </div>
+
+        <div class="option" data-value="google" onclick="selectProvider('google')">
+          <div class="option-header">
+            <span class="option-icon">✨</span>
+            <span class="option-title">Google Gemini</span>
+          </div>
+          <p class="option-description">Gemini models with large context windows</p>
+        </div>
+
+        <div class="option" data-value="azure" onclick="selectProvider('azure')">
+          <div class="option-header">
+            <span class="option-icon">☁️</span>
+            <span class="option-title">Azure OpenAI</span>
+          </div>
+          <p class="option-description">Enterprise OpenAI deployment on Azure</p>
+        </div>
+
+        <div class="option" data-value="ollama" onclick="selectProvider('ollama')">
+          <div class="option-header">
+            <span class="option-icon">🦙</span>
+            <span class="option-title">Ollama</span>
+            <span class="option-badge local">Local</span>
+          </div>
+          <p class="option-description">Run models locally on your machine</p>
+        </div>
+
+        <div class="option" data-value="lmstudio" onclick="selectProvider('lmstudio')">
+          <div class="option-header">
+            <span class="option-icon">💻</span>
+            <span class="option-title">LM Studio</span>
+            <span class="option-badge local">Local</span>
+          </div>
+          <p class="option-description">Local inference with LM Studio</p>
+        </div>
+      </div>
+
+      <div id="provider-validation" class="validation-message"></div>
+
+      <div class="button-group">
+        <button class="btn-secondary" onclick="previousStep()">← Back</button>
+        <button class="btn-primary" id="providerNext" disabled onclick="nextStep()">Continue →</button>
+      </div>
+    </div>
+
+    <!-- Step 3: API Configuration -->
+    <div class="step" data-step="3">
+      <h2 class="step-title">Configure API Access</h2>
+      <p class="step-description" id="apiStepDescription">
+        Enter your API key to connect to the selected provider.
+      </p>
+
+      <div class="form-group" id="apiKeyGroup">
+        <label for="apiKey">API Key</label>
+        <input type="password" id="apiKey" placeholder="sk-..." />
+        <p class="input-hint">Your API key will be stored securely</p>
+        <button class="test-button" onclick="testApiKey()">🔌 Test Connection</button>
+      </div>
+
+      <div class="form-group">
+        <label for="model">Model (Optional)</label>
+        <input type="text" id="model" placeholder="Leave empty for provider default" />
+        <p class="input-hint">e.g., gpt-4-turbo, claude-3-5-sonnet-20241022</p>
+      </div>
+
+      <!-- Azure-specific fields -->
+      <div class="azure-fields" id="azureFields">
+        <div class="form-group">
+          <label for="azureEndpoint">Azure Endpoint *</label>
+          <input type="text" id="azureEndpoint" placeholder="https://your-resource.openai.azure.com" />
+        </div>
+        <div class="form-group">
+          <label for="azureDeployment">Deployment Name *</label>
+          <input type="text" id="azureDeployment" placeholder="gpt-4" />
+        </div>
+      </div>
+
+      <!-- Ollama-specific fields -->
+      <div class="ollama-fields" id="ollamaFields">
+        <div class="form-group">
+          <label for="ollamaHost">Ollama Host</label>
+          <input type="text" id="ollamaHost" value="http://localhost:11434" />
+        </div>
+      </div>
+
+      <!-- LM Studio-specific fields -->
+      <div class="lmstudio-fields" id="lmstudioFields">
+        <div class="form-group">
+          <label for="lmstudioHost">LM Studio Host</label>
+          <input type="text" id="lmstudioHost" value="http://localhost:1234" />
+        </div>
+      </div>
+
+      <div id="apiKey-validation" class="validation-message"></div>
+
+      <div class="button-group">
+        <button class="btn-secondary" onclick="previousStep()">← Back</button>
+        <button class="btn-primary" id="apiNext" onclick="nextStep()">Continue →</button>
+      </div>
+    </div>
+
+    <!-- Step 4: Review & Complete -->
+    <div class="step" data-step="4">
+      <h2 class="step-title">Review Configuration</h2>
+      <p class="step-description">
+        Everything looks good! Review your settings and complete the setup.
+      </p>
+
+      <div class="summary-section">
+        <div class="summary-item">
+          <span class="summary-label">Storage Method:</span>
+          <span class="summary-value" id="summaryStorage">-</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">AI Provider:</span>
+          <span class="summary-value" id="summaryProvider">-</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Model:</span>
+          <span class="summary-value" id="summaryModel">Default</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">API Key:</span>
+          <span class="summary-value" id="summaryApiKey">Configured ✓</span>
+        </div>
+      </div>
+
+      <button class="test-button" onclick="testFullConnection()" style="width: 100%; margin-bottom: 20px;">
+        🔌 Test Full Connection
+      </button>
+
+      <div id="connection-validation" class="validation-message"></div>
+
+      <div class="button-group">
+        <button class="btn-secondary" onclick="previousStep()">← Back</button>
+        <button class="btn-primary" onclick="completeSetup()">🎉 Complete Setup</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const vscode = acquireVsCodeApi();
+
+    let currentStep = 1;
+    let config = {
+      storageMode: '',
+      provider: '',
+      apiKey: '',
+      model: '',
+      azureEndpoint: '',
+      azureDeploymentName: '',
+      ollamaHost: 'http://localhost:11434',
+      lmStudioHost: 'http://localhost:1234',
+      temperature: 0.3
+    };
+
+    // Load existing config
+    vscode.postMessage({ type: 'loadCurrentConfig' });
+
+    function updateProgress() {
+      const progress = ((currentStep - 1) / 3) * 100;
+      document.getElementById('progressFill').style.width = progress + '%';
+
+      document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
+        indicator.classList.remove('active', 'completed');
+        if (index + 1 < currentStep) {
+          indicator.classList.add('completed');
+        } else if (index + 1 === currentStep) {
+          indicator.classList.add('active');
+        }
+      });
+
+      document.querySelectorAll('.step').forEach((step, index) => {
+        step.classList.remove('active');
+        if (index + 1 === currentStep) {
+          step.classList.add('active');
+        }
+      });
+    }
+
+    function selectStorage(mode) {
+      config.storageMode = mode;
+
+      document.querySelectorAll('[data-step="1"] .option').forEach(opt => {
+        opt.classList.remove('selected');
+      });
+      document.querySelector(\`[data-step="1"] .option[data-value="\${mode}"]\`).classList.add('selected');
+
+      document.getElementById('storageNext').disabled = false;
+
+      // Test the storage mode
+      vscode.postMessage({ type: 'testStorageMode', mode });
+    }
+
+    function selectProvider(provider) {
+      config.provider = provider;
+
+      document.querySelectorAll('[data-step="2"] .option').forEach(opt => {
+        opt.classList.remove('selected');
+      });
+      document.querySelector(\`[data-step="2"] .option[data-value="\${provider}"]\`).classList.add('selected');
+
+      document.getElementById('providerNext').disabled = false;
+
+      // Show/hide provider-specific fields
+      document.getElementById('azureFields').classList.toggle('show', provider === 'azure');
+      document.getElementById('ollamaFields').classList.toggle('show', provider === 'ollama');
+      document.getElementById('lmstudioFields').classList.toggle('show', provider === 'lmstudio');
+
+      // Update API step description
+      const needsKey = !['ollama', 'lmstudio'].includes(provider);
+      document.getElementById('apiStepDescription').textContent = needsKey
+        ? 'Enter your API key to connect to the selected provider.'
+        : 'Configure connection settings for your local provider.';
+
+      document.getElementById('apiKeyGroup').style.display = needsKey ? 'block' : 'none';
+
+      // Test the provider
+      vscode.postMessage({ type: 'testProvider', provider });
+    }
+
+    function testApiKey() {
+      const apiKey = document.getElementById('apiKey').value;
+      if (!apiKey) {
+        showValidation('apiKey', 'error', '❌ Please enter an API key');
+        return;
+      }
+
+      config.apiKey = apiKey;
+      vscode.postMessage({
+        type: 'testApiKey',
+        provider: config.provider,
+        apiKey: apiKey
+      });
+    }
+
+    function testFullConnection() {
+      vscode.postMessage({ type: 'testFullConnection' });
+    }
+
+    function nextStep() {
+      if (currentStep === 3) {
+        // Capture all form values before moving to review
+        config.apiKey = document.getElementById('apiKey').value;
+        config.model = document.getElementById('model').value;
+
+        if (config.provider === 'azure') {
+          config.azureEndpoint = document.getElementById('azureEndpoint').value;
+          config.azureDeploymentName = document.getElementById('azureDeployment').value;
+        } else if (config.provider === 'ollama') {
+          config.ollamaHost = document.getElementById('ollamaHost').value;
+        } else if (config.provider === 'lmstudio') {
+          config.lmStudioHost = document.getElementById('lmstudioHost').value;
+        }
+
+        updateSummary();
+      }
+
+      currentStep++;
+      updateProgress();
+    }
+
+    function previousStep() {
+      currentStep--;
+      updateProgress();
+    }
+
+    function updateSummary() {
+      const storageNames = {
+        secrets: '🔒 Secure Storage',
+        env: '📄 Environment File',
+        settings: '⚙️ Settings File'
+      };
+
+      const providerNames = {
+        openai: '🤖 OpenAI',
+        anthropic: '🧠 Anthropic Claude',
+        google: '✨ Google Gemini',
+        azure: '☁️ Azure OpenAI',
+        bedrock: '🚀 AWS Bedrock',
+        ollama: '🦙 Ollama',
+        lmstudio: '💻 LM Studio'
+      };
+
+      document.getElementById('summaryStorage').textContent = storageNames[config.storageMode] || config.storageMode;
+      document.getElementById('summaryProvider').textContent = providerNames[config.provider] || config.provider;
+      document.getElementById('summaryModel').textContent = config.model || 'Default';
+
+      const hasKey = config.apiKey || ['ollama', 'lmstudio'].includes(config.provider);
+      document.getElementById('summaryApiKey').textContent = hasKey ? 'Configured ✓' : 'Not configured';
+    }
+
+    function completeSetup() {
+      vscode.postMessage({
+        type: 'saveConfiguration',
+        config: config
+      });
+    }
+
+    function skipSetup() {
+      if (confirm('Are you sure you want to skip setup? You can configure settings later.')) {
+        vscode.postMessage({ type: 'skipSetup' });
+      }
+    }
+
+    function showValidation(step, type, message) {
+      const validationEl = document.getElementById(step + '-validation');
+      if (!validationEl) return;
+
+      validationEl.className = 'validation-message show ' + type;
+      validationEl.textContent = message;
+
+      if (type === 'success' || type === 'error') {
+        setTimeout(() => {
+          validationEl.classList.remove('show');
+        }, 5000);
+      }
+    }
+
+    // Handle messages from extension
+    window.addEventListener('message', event => {
+      const message = event.data;
+
+      switch (message.type) {
+        case 'validationResult':
+          const feedbackType = message.success === true ? 'success' :
+                             message.success === false ? 'error' :
+                             message.success === null ? 'loading' : 'error';
+          showValidation(message.step, feedbackType, message.message);
+
+          // Enable next button on successful validation
+          if (message.success === true && message.step === 'storage') {
+            document.getElementById('storageNext').disabled = false;
+          }
+          if (message.success === true && message.step === 'provider') {
+            document.getElementById('providerNext').disabled = false;
+          }
+          break;
+
+        case 'connectionTest':
+          if (message.status === 'testing') {
+            showValidation('connection', 'loading', message.message);
+          } else if (message.status === 'success') {
+            showValidation('connection', 'success', message.message);
+          } else {
+            showValidation('connection', 'error', message.message);
+          }
+          break;
+
+        case 'saveComplete':
+          if (message.success) {
+            showValidation('connection', 'success', message.message);
+          } else {
+            showValidation('connection', 'error', message.message);
+          }
+          break;
+
+        case 'configLoaded':
+          // Pre-fill form with existing config if available
+          if (message.config) {
+            config = { ...config, ...message.config };
+
+            if (config.storageMode) {
+              const storageOption = document.querySelector(\`[data-step="1"] .option[data-value="\${config.storageMode}"]\`);
+              if (storageOption) storageOption.classList.add('selected');
+            }
+
+            if (config.provider) {
+              const providerOption = document.querySelector(\`[data-step="2"] .option[data-value="\${config.provider}"]\`);
+              if (providerOption) providerOption.classList.add('selected');
+            }
+
+            document.getElementById('model').value = config.model || '';
+            document.getElementById('azureEndpoint').value = config.azureEndpoint || '';
+            document.getElementById('azureDeployment').value = config.azureDeploymentName || '';
+            document.getElementById('ollamaHost').value = config.ollamaHost || 'http://localhost:11434';
+            document.getElementById('lmstudioHost').value = config.lmStudioHost || 'http://localhost:1234';
+          }
+          break;
+
+        case 'envDetected':
+          // Auto-fill form with detected .env values
+          if (message.envVars) {
+            const env = message.envVars;
+
+            // Set provider based on AI_PROVIDER env var
+            if (env.AI_PROVIDER) {
+              config.provider = env.AI_PROVIDER;
+              const providerOption = document.querySelector(\`[data-step="2"] .option[data-value="\${env.AI_PROVIDER}"]\`);
+              if (providerOption) {
+                providerOption.classList.add('selected');
+                document.getElementById('providerNext').disabled = false;
+              }
+            }
+
+            // Auto-fill API keys based on detected provider
+            if (env.OPENAI_API_KEY && (config.provider === 'openai' || !config.provider)) {
+              document.getElementById('apiKey').value = env.OPENAI_API_KEY;
+              config.apiKey = env.OPENAI_API_KEY;
+            }
+            if (env.ANTHROPIC_API_KEY && config.provider === 'anthropic') {
+              document.getElementById('apiKey').value = env.ANTHROPIC_API_KEY;
+              config.apiKey = env.ANTHROPIC_API_KEY;
+            }
+            if (env.AZURE_OPENAI_KEY && config.provider === 'azure') {
+              document.getElementById('apiKey').value = env.AZURE_OPENAI_KEY;
+              config.apiKey = env.AZURE_OPENAI_KEY;
+            }
+            if (env.GOOGLE_API_KEY && config.provider === 'google') {
+              document.getElementById('apiKey').value = env.GOOGLE_API_KEY;
+              config.apiKey = env.GOOGLE_API_KEY;
+            }
+
+            // Auto-fill Azure config
+            if (env.AZURE_OPENAI_ENDPOINT) {
+              document.getElementById('azureEndpoint').value = env.AZURE_OPENAI_ENDPOINT;
+              config.azureEndpoint = env.AZURE_OPENAI_ENDPOINT;
+            }
+            if (env.AZURE_OPENAI_DEPLOYMENT_NAME) {
+              document.getElementById('azureDeployment').value = env.AZURE_OPENAI_DEPLOYMENT_NAME;
+              config.azureDeploymentName = env.AZURE_OPENAI_DEPLOYMENT_NAME;
+            }
+
+            // Auto-fill Ollama host
+            if (env.OLLAMA_HOST) {
+              document.getElementById('ollamaHost').value = env.OLLAMA_HOST;
+              config.ollamaHost = env.OLLAMA_HOST;
+            }
+
+            // Auto-fill LM Studio
+            if (env.LMSTUDIO_BASE_URL) {
+              document.getElementById('lmstudioHost').value = env.LMSTUDIO_BASE_URL;
+              config.lmStudioHost = env.LMSTUDIO_BASE_URL;
+            }
+
+            showValidation('storage', 'success', '\u2705 Configuration loaded from .env.local');
+          }
+          break;
+      }
+    });
+
+    updateProgress();
+  </script>
+</body>
+</html>`
+  }
+}