feat: improve local provider connectivity with CORS bypass

- Add @tauri-apps/plugin-http dependency
- Implement dual fetch strategy for local vs remote providers
- Auto-detect local providers (localhost, Ollama:11434, LM Studio:1234)
- Make API key optional for local providers
- Add comprehensive test coverage for provider fetching

Author: samhvw8

web-app/package.json

@@ -32,6 +32,7 @@
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-deep-link": "~2",
     "@tauri-apps/plugin-dialog": "^2.2.1",
+    "@tauri-apps/plugin-http": "^2.2.1",
     "@tauri-apps/plugin-opener": "^2.2.7",
     "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-updater": "^2.7.1",

web-app/src/services/providers.test.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+// Mock the Tauri fetch - use factory function to avoid hoisting issues
+vi.mock('@tauri-apps/plugin-http', () => ({
+  fetch: vi.fn()
+}))
+
+// Import after mocking
+import { fetchModelsFromProvider } from './providers'
+import { fetch as fetchTauri } from '@tauri-apps/plugin-http'
+
+// Mock global fetch
+const mockGlobalFetch = vi.fn()
+global.fetch = mockGlobalFetch
+
+// Get the mocked fetchTauri
+const mockFetchTauri = vi.mocked(fetchTauri)
+
+describe('fetchModelsFromProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    const mockResponse = {
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      json: () => Promise.resolve({ data: [{ id: 'test-model' }] })
+    } as Partial<Response>
+    mockFetchTauri.mockResolvedValue(mockResponse as Response)
+    mockGlobalFetch.mockResolvedValue(mockResponse as Response)
+  })
+
+  it('should use fetchTauri for localhost URLs', async () => {
+    const provider = {
+      provider: 'test',
+      base_url: 'http://localhost:8080/v1',
+      api_key: 'test-key',
+      models: [],
+      settings: [],
+      active: true
+    }
+
+    await fetchModelsFromProvider(provider)
+    
+    expect(mockFetchTauri).toHaveBeenCalledWith('http://localhost:8080/v1/models', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': 'test-key',
+        'Authorization': 'Bearer test-key'
+      }
+    })
+    expect(mockGlobalFetch).not.toHaveBeenCalled()
+  })
+
+  it('should use fetchTauri for 127.0.0.1 URLs', async () => {
+    const provider = {
+      provider: 'test',
+      base_url: 'http://127.0.0.1:8080/v1',
+      api_key: 'test-key',
+      models: [],
+      settings: [],
+      active: true
+    }
+
+    await fetchModelsFromProvider(provider)
+    
+    expect(mockFetchTauri).toHaveBeenCalled()
+    expect(mockGlobalFetch).not.toHaveBeenCalled()
+  })
+
+  it('should use fetchTauri for Ollama port 11434', async () => {
+    const provider = {
+      provider: 'ollama',
+      base_url: 'http://192.168.1.100:11434/v1',
+      api_key: '',
+      models: [],
+      settings: [],
+      active: true
+    }
+
+    await fetchModelsFromProvider(provider)
+    
+    expect(mockFetchTauri).toHaveBeenCalled()
+    expect(mockGlobalFetch).not.toHaveBeenCalled()
+  })
+
+  it('should use fetchTauri for LM Studio port 1234', async () => {
+    const provider = {
+      provider: 'lmstudio',
+      base_url: 'http://192.168.1.100:1234/v1',
+      api_key: '',
+      models: [],
+      settings: [],
+      active: true
+    }
+
+    await fetchModelsFromProvider(provider)
+    
+    expect(mockFetchTauri).toHaveBeenCalled()
+    expect(mockGlobalFetch).not.toHaveBeenCalled()
+  })
+
+  it('should use fetchTauri when skipPreflight is true', async () => {
+    const provider = {
+      provider: 'openai',
+      base_url: 'https://api.openai.com/v1',
+      api_key: 'test-key',
+      models: [],
+      settings: [],
+      active: true
+    }
+
+    await fetchModelsFromProvider(provider, true)
+    
+    expect(mockFetchTauri).toHaveBeenCalled()
+    expect(mockGlobalFetch).not.toHaveBeenCalled()
+  })
+
+  it('should not require API key for local providers', async () => {
+    const provider = {
+      provider: 'ollama',
+      base_url: 'http://127.0.0.1:11434/v1',
+      api_key: '',
+      models: [],
+      settings: [],
+      active: true
+    }
+
+    await fetchModelsFromProvider(provider)
+    
+    expect(mockFetchTauri).toHaveBeenCalledWith('http://127.0.0.1:11434/v1/models', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+  })
+})

web-app/src/services/providers.ts

@@ -13,6 +13,10 @@ import {
 import { modelSettings } from '@/lib/predefined'
 import { fetchModels } from './models'
 import { ExtensionManager } from '@/lib/extension'
+import { fetch as fetchTauri } from '@tauri-apps/plugin-http'
+
+// Ensure we have access to the global fetch for non-Tauri requests
+const globalFetch = globalThis.fetch || window.fetch
 
 export const getProviders = async (): Promise<ModelProvider[]> => {
   const engines = !localStorage.getItem('migration_completed')
@@ -163,32 +167,80 @@ export const getProviders = async (): Promise<ModelProvider[]> => {
   return runtimeProviders.concat(builtinProviders as ModelProvider[])
 }
 
+/**
+ * Checks if a URL is a local provider (localhost or 127.0.0.1) or uses specific ports (Ollama/LM Studio)
+ * @param url The URL to check
+ * @returns boolean indicating if it's a local provider or uses known local AI ports
+ */
+const shouldBypassPreflightCheck = (url: string): boolean => {
+  try {
+    const urlObj = new URL(url)
+    const isLocalHost = urlObj.hostname === 'localhost' ||
+                       urlObj.hostname === '127.0.0.1' ||
+                       urlObj.hostname === '0.0.0.0'
+    
+    // Check for specific ports used by local AI providers
+    const port = parseInt(urlObj.port)
+    const isOllamaPort = port === 11434
+    const isLMStudioPort = port === 1234
+    
+    return isLocalHost || isOllamaPort || isLMStudioPort
+  } catch {
+    return false
+  }
+}
+
 /**
  * Fetches models from a provider's API endpoint
+ * Uses Tauri's HTTP client for local providers or when skipPreflight is true to bypass CORS issues
  * @param provider The provider object containing base_url and api_key
+ * @param skipPreflight Whether to skip CORS preflight by using Tauri fetch (default: false)
  * @returns Promise<string[]> Array of model IDs
  */
 export const fetchModelsFromProvider = async (
-  provider: ModelProvider
+  provider: ModelProvider,
+  skipPreflight: boolean = false
 ): Promise<string[]> => {
-  if (!provider.base_url || !provider.api_key) {
-    throw new Error('Provider must have base_url and api_key configured')
+  if (!provider.base_url) {
+    throw new Error('Provider must have base_url configured')
   }
 
+  // For local providers, we don't require API key as they often don't use authentication
+  const isPreflightCheckBypassed = shouldBypassPreflightCheck(provider.base_url)
+  
+  // Determine whether to use Tauri fetch to bypass CORS preflight
+  const shouldUseTauriFetch = isPreflightCheckBypassed || skipPreflight
+  
   try {
-    const response = await fetch(`${provider.base_url}/models`, {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+
+    // Only add authentication headers if API key is provided
+    if (provider.api_key) {
+      headers['x-api-key'] = provider.api_key
+      headers['Authorization'] = `Bearer ${provider.api_key}`
+    }
+
+    // Use Tauri's fetch for local providers or when skipPreflight is true to avoid CORS issues
+    // Use regular fetch for remote providers to maintain normal browser behavior
+    const fetchFunction = shouldUseTauriFetch ? fetchTauri : globalFetch
+    const response = await fetchFunction(`${provider.base_url}/models`, {
       method: 'GET',
-      headers: {
-        'x-api-key': provider.api_key,
-        'Authorization': `Bearer ${provider.api_key}`,
-        'Content-Type': 'application/json',
-      },
+      headers,
     })
 
     if (!response.ok) {
-      throw new Error(
-        `Failed to fetch models: ${response.status} ${response.statusText}`
-      )
+      // Provide more specific error messages for local providers
+      if (isPreflightCheckBypassed) {
+        throw new Error(
+          `Failed to connect to local provider at ${provider.base_url}. Please ensure the service is running and accessible.`
+        )
+      } else {
+        throw new Error(
+          `Failed to fetch models: ${response.status} ${response.statusText}`
+        )
+      }
     }
 
     const data = await response.json()
@@ -213,6 +265,16 @@ export const fetchModelsFromProvider = async (
     }
   } catch (error) {
     console.error('Error fetching models from provider:', error)
+    
+    // Provide helpful error messages for common local provider issues
+    if (isPreflightCheckBypassed && error instanceof Error) {
+      if (error.message.includes('fetch')) {
+        throw new Error(
+          `Cannot connect to ${provider.provider} at ${provider.base_url}. Please check that the service is running and accessible.`
+        )
+      }
+    }
+    
     throw error
   }
 }