Massive UX improvements: Fix settings persistence & add model discovery

🎯 **Settings Persistence Fixed:**
- Create backend settings management system
- Settings now persist across app restarts
- No more restart requirement - apply settings immediately
- Bridge localStorage (persistence) with runtime settings

🔄 **Model Discovery Feature:**
- Add /api/models endpoint for all providers
- Refresh button (🔄) fetches available models
- Dropdown selection replaces manual typing
- Support for Ollama, OpenAI, Anthropic, Google, Groq, Together

🔑 **Enhanced Provider Support:**
- Add optional API key support for Ollama (bearer token)
- Better provider configuration management
- Runtime settings override environment variables

⚡ **Instant Settings Application:**
- Remove restart popup/requirement
- Settings take effect immediately
- Better success messaging and feedback
- Loading states and error handling

🎨 **Improved Settings UI:**
- Model dropdown when available, text input as fallback
- Better form validation and user feedback
- Loading states for model discovery
- Clearer instructions and help text
- Enhanced provider-specific guidance

**Major UX Issues Resolved:**
✅ Settings persist across sessions
✅ No restart required for changes
✅ Model discovery prevents typing errors
✅ Better API key management
✅ Immediate feedback and application

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: michael-borck

app/api/getChat/route.ts

@@ -1,18 +1,18 @@
 import {
   createProvider,
-  getDefaultProviderConfig,
   LLMStreamPayload,
 } from "@/utils/providers";
+import { getSettings } from "@/utils/settings";
 
 export async function POST(request: Request) {
   let { messages } = await request.json();
 
   try {
-    const providerConfig = getDefaultProviderConfig();
-    const provider = createProvider(providerConfig);
+    const settings = getSettings();
+    const provider = createProvider(); // Will use runtime settings
 
     const payload: LLMStreamPayload = {
-      model: providerConfig.defaultModel,
+      model: settings.llmModel,
       messages,
       stream: true,
     };

app/api/models/route.ts

@@ -0,0 +1,125 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  try {
+    const { provider, baseUrl, apiKey } = await request.json();
+    
+    let models: string[] = [];
+    
+    switch (provider.toLowerCase()) {
+      case "ollama":
+        models = await getOllamaModels(baseUrl, apiKey);
+        break;
+      case "openai":
+        models = await getOpenAIModels(baseUrl, apiKey);
+        break;
+      case "anthropic":
+      case "claude":
+        models = getAnthropicModels();
+        break;
+      case "google":
+      case "gemini":
+        models = await getGoogleModels(baseUrl, apiKey);
+        break;
+      case "groq":
+        models = await getGroqModels(baseUrl, apiKey);
+        break;
+      case "together":
+        models = await getTogetherModels(baseUrl, apiKey);
+        break;
+      default:
+        return NextResponse.json({ error: "Unsupported provider" }, { status: 400 });
+    }
+    
+    return NextResponse.json({ models });
+  } catch (error) {
+    console.error("Error fetching models:", error);
+    return NextResponse.json({ 
+      error: "Failed to fetch models", 
+      details: error instanceof Error ? error.message : "Unknown error"
+    }, { status: 500 });
+  }
+}
+
+async function getOllamaModels(baseUrl: string, apiKey?: string): Promise<string[]> {
+  const url = `${baseUrl}/api/tags`;
+  const headers: Record<string, string> = {};
+  
+  if (apiKey) {
+    headers.Authorization = `Bearer ${apiKey}`;
+  }
+  
+  const response = await fetch(url, { headers });
+  if (!response.ok) {
+    throw new Error(`Ollama API error: ${response.status} ${response.statusText}`);
+  }
+  
+  const data = await response.json();
+  return data.models?.map((model: any) => model.name) || [];
+}
+
+async function getOpenAIModels(baseUrl: string, apiKey: string): Promise<string[]> {
+  const response = await fetch(`${baseUrl}/v1/models`, {
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+    },
+  });
+  
+  if (!response.ok) {
+    throw new Error(`OpenAI API error: ${response.status} ${response.statusText}`);
+  }
+  
+  const data = await response.json();
+  return data.data?.map((model: any) => model.id) || [];
+}
+
+function getAnthropicModels(): string[] {
+  return [
+    "claude-3-5-sonnet-20241022",
+    "claude-3-5-haiku-20241022", 
+    "claude-3-opus-20240229",
+    "claude-3-sonnet-20240229",
+    "claude-3-haiku-20240307"
+  ];
+}
+
+async function getGoogleModels(baseUrl: string, apiKey: string): Promise<string[]> {
+  const response = await fetch(`${baseUrl}/v1beta/models?key=${apiKey}`);
+  
+  if (!response.ok) {
+    throw new Error(`Google API error: ${response.status} ${response.statusText}`);
+  }
+  
+  const data = await response.json();
+  return data.models?.map((model: any) => model.name.replace('models/', '')) || [];
+}
+
+async function getGroqModels(baseUrl: string, apiKey: string): Promise<string[]> {
+  const response = await fetch(`${baseUrl}/v1/models`, {
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+    },
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Groq API error: ${response.status} ${response.statusText}`);
+  }
+  
+  const data = await response.json();
+  return data.data?.map((model: any) => model.id) || [];
+}
+
+async function getTogetherModels(baseUrl: string, apiKey: string): Promise<string[]> {
+  const response = await fetch(`${baseUrl}/v1/models`, {
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+    },
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Together API error: ${response.status} ${response.statusText}`);
+  }
+  
+  const data = await response.json();
+  return data.data?.map((model: any) => model.id) || [];
+}

app/api/settings/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { getSettings, updateSettings, AppSettings } from "@/utils/settings";
+
+export async function GET() {
+  try {
+    const settings = getSettings();
+    // Don't send API keys to frontend for security
+    const safeSettings = {
+      ...settings,
+      llmApiKey: settings.llmApiKey ? "***" : "",
+      searchApiKey: settings.searchApiKey ? "***" : "",
+    };
+    return NextResponse.json(safeSettings);
+  } catch (error) {
+    console.error("Error getting settings:", error);
+    return NextResponse.json({ error: "Failed to get settings" }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const newSettings: AppSettings = await request.json();
+    
+    // Update runtime settings
+    updateSettings(newSettings);
+    
+    return NextResponse.json({ success: true, message: "Settings updated successfully" });
+  } catch (error) {
+    console.error("Error updating settings:", error);
+    return NextResponse.json({ error: "Failed to update settings" }, { status: 500 });
+  }
+}