Add LLM settings modal + Ollama/OllaBridge/OpenAI support

app/inference.py

@@ -1,41 +1,139 @@
-"""OllaBridge / OpenAI-compatible inference client."""
-import os
+"""
+Unified inference client supporting Ollama, OllaBridge, and OpenAI-compatible endpoints.
+
+Provider hierarchy:
+  1. OllaBridge (remote, OpenAI-compatible /v1 API)
+  2. Ollama (local, OpenAI-compatible /v1 API at :11434)
+  3. OpenAI / any OpenAI-compatible server
+
+All three expose the same /v1/chat/completions and /v1/models interface.
+"""
+from __future__ import annotations
+
 import json
+import os
 import re
-import requests
+import threading
 from typing import Optional
 
-DEFAULT_OLLABRIDGE_URL = "http://localhost:8000"
-DEFAULT_MODEL = "qwen2.5:1.5b"
+import requests
 
+# ── Defaults ────────────────────────────────────────────────────────
+
+PROVIDER_DEFAULTS = {
+    "ollama": {
+        "base_url": "http://localhost:11434",
+        "model": "qwen2.5:1.5b",
+        "api_key": "",
+    },
+    "ollabridge": {
+        "base_url": "http://localhost:8000",
+        "model": "qwen2.5:1.5b",
+        "api_key": "",
+    },
+    "openai": {
+        "base_url": "https://api.openai.com",
+        "model": "gpt-4o",
+        "api_key": "",
+    },
+}
 
-class InferenceClient:
-    """Calls OpenAI-compatible /v1/chat/completions endpoint."""
+
+class InferenceSettings:
+    """Thread-safe mutable settings for the inference provider."""
 
     def __init__(self):
-        self.base_url = os.environ.get("OLLABRIDGE_BASE_URL", DEFAULT_OLLABRIDGE_URL).rstrip("/")
-        self.model = os.environ.get("OLLABRIDGE_MODEL", DEFAULT_MODEL)
-        self.api_key = os.environ.get("OLLABRIDGE_API_KEY", "")
+        self._lock = threading.Lock()
+        # Determine initial provider
+        self.provider: str = os.environ.get("LLM_PROVIDER", "ollama")
+        defaults = PROVIDER_DEFAULTS.get(self.provider, PROVIDER_DEFAULTS["ollama"])
+
+        self.base_url: str = os.environ.get(
+            "OLLABRIDGE_BASE_URL",
+            os.environ.get("OLLAMA_BASE_URL", defaults["base_url"]),
+        )
+        self.model: str = os.environ.get(
+            "OLLABRIDGE_MODEL",
+            os.environ.get("OLLAMA_MODEL", defaults["model"]),
+        )
+        self.api_key: str = os.environ.get(
+            "OLLABRIDGE_API_KEY",
+            os.environ.get("OPENAI_API_KEY", defaults["api_key"]),
+        )
+        self.temperature: float = float(os.environ.get("LLM_TEMPERATURE", "0.7"))
+        self.max_tokens: int = int(os.environ.get("LLM_MAX_TOKENS", "4096"))
+
+    def update(self, **kwargs) -> dict:
+        """Update settings. Returns the new state."""
+        with self._lock:
+            for key in ("provider", "base_url", "model", "api_key", "temperature", "max_tokens"):
+                if key in kwargs and kwargs[key] is not None:
+                    val = kwargs[key]
+                    if key == "temperature":
+                        val = max(0.0, min(2.0, float(val)))
+                    elif key == "max_tokens":
+                        val = max(1, int(val))
+                    setattr(self, key, val)
+            # If provider changed, apply defaults for empty fields
+            if "provider" in kwargs:
+                defaults = PROVIDER_DEFAULTS.get(self.provider, {})
+                if not self.base_url or self.base_url in [d["base_url"] for d in PROVIDER_DEFAULTS.values()]:
+                    self.base_url = defaults.get("base_url", self.base_url)
+                if not self.model or self.model in [d["model"] for d in PROVIDER_DEFAULTS.values()]:
+                    self.model = defaults.get("model", self.model)
+        return self.to_dict()
+
+    def to_dict(self) -> dict:
+        return {
+            "provider": self.provider,
+            "base_url": self.base_url,
+            "model": self.model,
+            "api_key": "***" if self.api_key else "",
+            "temperature": self.temperature,
+            "max_tokens": self.max_tokens,
+        }
+
+
+class InferenceClient:
+    """Unified client for Ollama / OllaBridge / OpenAI-compatible endpoints."""
+
+    def __init__(self, settings: InferenceSettings):
+        self.settings = settings
+
+    def _headers(self) -> dict:
+        h = {"Content-Type": "application/json"}
+        if self.settings.api_key:
+            h["Authorization"] = f"Bearer {self.settings.api_key}"
+        return h
+
+    def _api_base(self) -> str:
+        base = self.settings.base_url.rstrip("/")
+        # Ollama native API is at /v1, OllaBridge too
+        if not base.endswith("/v1"):
+            return f"{base}/v1"
+        return base
 
     @property
     def available(self) -> bool:
-        """Check if inference endpoint is reachable."""
+        """Check if the endpoint is reachable."""
         try:
-            headers = {}
-            if self.api_key:
-                headers["Authorization"] = f"Bearer {self.api_key}"
-            resp = requests.get(f"{self.base_url}/v1/models", headers=headers, timeout=3)
+            resp = requests.get(
+                f"{self._api_base()}/models",
+                headers=self._headers(),
+                timeout=3,
+            )
             return resp.status_code == 200
         except Exception:
             return False
 
     def list_models(self) -> list[str]:
-        """Get available models from the endpoint."""
+        """Get available models."""
         try:
-            headers = {}
-            if self.api_key:
-                headers["Authorization"] = f"Bearer {self.api_key}"
-            resp = requests.get(f"{self.base_url}/v1/models", headers=headers, timeout=5)
+            resp = requests.get(
+                f"{self._api_base()}/models",
+                headers=self._headers(),
+                timeout=5,
+            )
             if resp.status_code == 200:
                 data = resp.json()
                 return [m.get("id", "") for m in data.get("data", [])]
@@ -43,27 +141,25 @@ class InferenceClient:
             pass
         return []
 
-    def generate(self, prompt: str, system: str = "", temperature: float = 0.7, max_tokens: int = 4096) -> str:
-        """Generate completion using chat/completions endpoint."""
-        headers = {"Content-Type": "application/json"}
-        if self.api_key:
-            headers["Authorization"] = f"Bearer {self.api_key}"
-
+    def generate(self, prompt: str, system: str = "",
+                 temperature: float | None = None,
+                 max_tokens: int | None = None) -> str:
+        """Generate a chat completion."""
         messages = []
         if system:
             messages.append({"role": "system", "content": system})
         messages.append({"role": "user", "content": prompt})
 
         payload = {
-            "model": self.model,
+            "model": self.settings.model,
             "messages": messages,
-            "temperature": temperature,
-            "max_tokens": max_tokens,
+            "temperature": temperature if temperature is not None else self.settings.temperature,
+            "max_tokens": max_tokens if max_tokens is not None else self.settings.max_tokens,
         }
 
         resp = requests.post(
-            f"{self.base_url}/v1/chat/completions",
-            headers=headers,
+            f"{self._api_base()}/chat/completions",
+            headers=self._headers(),
             json=payload,
             timeout=120,
         )
@@ -72,37 +168,28 @@ class InferenceClient:
         return data["choices"][0]["message"]["content"]
 
     def generate_plan(self, prompt: str) -> Optional[dict]:
-        """Use LLM to generate a structured project plan from prompt."""
-        system_prompt = """You are an expert AI systems architect. Given a user request, produce a JSON project plan.
-
-Output ONLY valid JSON with this structure:
-{
-  "name": "project-slug",
-  "description": "One-line description",
-  "framework": "crewai",
-  "agents": [
-    {"id": "agent_id", "role": "Role Name", "goal": "What they do", "backstory": "Background", "tools": ["tool_id"]}
-  ],
-  "tasks": [
-    {"id": "task_id", "description": "What to do", "agent_id": "agent_id", "expected_output": "What it produces", "depends_on": []}
-  ],
-  "tools": [
-    {"id": "tool_id", "template": "web_search"}
-  ]
-}
-
-Available frameworks: crewai, langgraph, watsonx_orchestrate, crewai_flow, react
-Available tools: web_search, pdf_reader, http_client, sql_query, vector_search, file_writer
-Use snake_case for IDs. Create distinct agents with clear roles."""
-
+        """Use the LLM to generate a structured project plan."""
+        system_prompt = (
+            "You are an expert AI systems architect. Given a user request, produce a JSON project plan.\n\n"
+            "Output ONLY valid JSON with this structure:\n"
+            '{\n  "name": "project-slug",\n  "description": "One-line description",\n'
+            '  "framework": "crewai",\n'
+            '  "agents": [{"id": "agent_id", "role": "Role Name", "goal": "What they do", '
+            '"backstory": "Background", "tools": ["tool_id"]}],\n'
+            '  "tasks": [{"id": "task_id", "description": "What to do", "agent_id": "agent_id", '
+            '"expected_output": "What it produces", "depends_on": []}],\n'
+            '  "tools": [{"id": "tool_id", "template": "web_search"}]\n}\n\n'
+            "Available frameworks: crewai, langgraph, watsonx_orchestrate, crewai_flow, react\n"
+            "Available tools: web_search, pdf_reader, http_client, sql_query, vector_search, file_writer\n"
+            "Use snake_case for IDs. Create distinct agents with clear roles."
+        )
         try:
             raw = self.generate(prompt, system=system_prompt, temperature=0.3)
-            # Extract JSON from response
-            match = re.search(r'```(?:json)?\s*\n?(.*?)```', raw, re.DOTALL)
+            match = re.search(r"```(?:json)?\s*\n?(.*?)```", raw, re.DOTALL)
             if match:
                 raw = match.group(1)
             else:
-                match = re.search(r'\{.*\}', raw, re.DOTALL)
+                match = re.search(r"\{.*\}", raw, re.DOTALL)
                 if match:
                     raw = match.group(0)
             return json.loads(raw.strip())
@@ -110,12 +197,21 @@ Use snake_case for IDs. Create distinct agents with clear roles."""
             return None
 
 
-# Singleton
+# ── Singletons ──────────────────────────────────────────────────────
+
+_settings: Optional[InferenceSettings] = None
 _client: Optional[InferenceClient] = None
 
 
+def get_inference_settings() -> InferenceSettings:
+    global _settings
+    if _settings is None:
+        _settings = InferenceSettings()
+    return _settings
+
+
 def get_inference_client() -> InferenceClient:
     global _client
     if _client is None:
-        _client = InferenceClient()
+        _client = InferenceClient(get_inference_settings())
     return _client

app/main.py

@@ -16,9 +16,9 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
 from app.generator import generate_project, plan_project
-from app.inference import get_inference_client
+from app.inference import get_inference_client, get_inference_settings, PROVIDER_DEFAULTS
 
-app = FastAPI(title="Agent Generator", version="2.0.0")
+app = FastAPI(title="Agent Generator", version="0.1.3")
 
 BASE_DIR = Path(__file__).resolve().parent
 app.mount("/static", StaticFiles(directory=str(BASE_DIR / "static")), name="static")
@@ -416,17 +416,64 @@ async def health():
     inference = get_inference_client()
     return {
         "status": "ok",
-        "version": "2.0.0",
+        "version": "0.1.3",
         "inference_available": inference.available,
     }
 
 
 @app.get("/api/models")
 async def api_models():
-    """List available LLM models from OllaBridge."""
+    """List available LLM models."""
     inference = get_inference_client()
     models = inference.list_models()
-    return {"models": models, "current": inference.model}
+    settings = get_inference_settings()
+    return {"models": models, "current": settings.model, "provider": settings.provider}
+
+
+@app.get("/api/settings")
+async def api_get_settings():
+    """Get current LLM settings."""
+    settings = get_inference_settings()
+    client = get_inference_client()
+    return {
+        **settings.to_dict(),
+        "available": client.available,
+        "available_models": client.list_models(),
+        "providers": list(PROVIDER_DEFAULTS.keys()),
+    }
+
+
+@app.post("/api/settings")
+async def api_update_settings(request: Request):
+    """Update LLM settings (provider, model, base_url, api_key, temperature, max_tokens)."""
+    body = await request.json()
+    settings = get_inference_settings()
+    new_state = settings.update(**body)
+    client = get_inference_client()
+    return {
+        **new_state,
+        "available": client.available,
+        "available_models": client.list_models(),
+    }
+
+
+@app.post("/api/settings/test")
+async def api_test_connection():
+    """Test the current LLM connection with a simple prompt."""
+    client = get_inference_client()
+    if not client.available:
+        return JSONResponse(
+            content={"ok": False, "error": "Endpoint not reachable"},
+            status_code=503,
+        )
+    try:
+        response = client.generate("Say hello in one sentence.", temperature=0.1, max_tokens=50)
+        return {"ok": True, "response": response}
+    except Exception as e:
+        return JSONResponse(
+            content={"ok": False, "error": str(e)[:200]},
+            status_code=500,
+        )
 
 
 @app.get("/api/inference-status")

app/static/app.js

@@ -16,18 +16,16 @@ document.addEventListener('DOMContentLoaded', () => {
    Inference Status Indicator (all pages)
    ---------------------------------------------------------- */
 function checkInferenceStatus() {
-  const dot = document.getElementById('inferenceStatus');
-  if (!dot) return;
   fetch('/api/inference-status')
     .then(r => r.json())
     .then(data => {
-      dot.classList.remove('bg-green-500', 'bg-gray-400');
-      dot.classList.add(data.available ? 'bg-green-500' : 'bg-gray-400');
+      const dot = document.getElementById('statusDot');
+      if (dot) {
+        dot.style.background = data.available ? '#22c55e' : '#3f3f50';
+        dot.style.boxShadow = data.available ? '0 0 8px rgba(34,197,94,0.5)' : 'none';
+      }
     })
-    .catch(() => {
-      dot.classList.remove('bg-green-500');
-      dot.classList.add('bg-gray-400');
-    });
+    .catch(() => {});
 }
 
 /* ----------------------------------------------------------
@@ -500,3 +498,183 @@ function setLoading(btn, text) {
     btn.textContent = text;
   }
 }
+
+
+/* ============================================================
+   Settings Modal
+   ============================================================ */
+
+function openSettings() {
+  const modal = document.getElementById('settingsModal');
+  if (!modal) return;
+  modal.style.display = 'flex';
+  loadSettings();
+}
+
+function closeSettings() {
+  const modal = document.getElementById('settingsModal');
+  if (modal) modal.style.display = 'none';
+}
+
+// Close on backdrop click
+document.addEventListener('click', function(e) {
+  const modal = document.getElementById('settingsModal');
+  if (modal && e.target === modal) closeSettings();
+});
+
+// Close on Escape
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') closeSettings();
+});
+
+function loadSettings() {
+  fetch('/api/settings')
+    .then(r => r.json())
+    .then(data => {
+      // Set provider radio
+      const radio = document.querySelector(`input[name="s_provider"][value="${data.provider}"]`);
+      if (radio) { radio.checked = true; highlightProviderCard(data.provider); }
+      // Set fields
+      const url = document.getElementById('settingsBaseUrl');
+      const model = document.getElementById('settingsModel');
+      const key = document.getElementById('settingsApiKey');
+      const temp = document.getElementById('settingsTemp');
+      const tempVal = document.getElementById('settingsTempValue');
+      if (url) url.value = data.base_url || '';
+      if (model) model.value = data.model || '';
+      if (key) key.value = data.api_key === '***' ? '' : (data.api_key || '');
+      if (temp) temp.value = data.temperature || 0.7;
+      if (tempVal) tempVal.textContent = data.temperature || '0.7';
+      // Status
+      updateSettingsStatus(data.available);
+      // Model suggestions
+      showModelSuggestions(data.available_models || [], data.model);
+    })
+    .catch(() => updateSettingsStatus(false));
+}
+
+function highlightProviderCard(provider) {
+  ['Ollama', 'Ollabridge', 'Openai'].forEach(p => {
+    const el = document.getElementById('prov' + p);
+    if (el) el.classList.toggle('selected', p.toLowerCase() === provider);
+  });
+}
+
+function onProviderChange(provider) {
+  highlightProviderCard(provider);
+  // Apply defaults
+  const defaults = { ollama: { url: 'http://localhost:11434', model: 'qwen2.5:1.5b' }, ollabridge: { url: 'http://localhost:8000', model: 'qwen2.5:1.5b' }, openai: { url: 'https://api.openai.com', model: 'gpt-4o' } };
+  const d = defaults[provider] || defaults.ollama;
+  const url = document.getElementById('settingsBaseUrl');
+  const model = document.getElementById('settingsModel');
+  if (url) url.value = d.url;
+  if (model) model.value = d.model;
+}
+
+function updateSettingsStatus(available) {
+  const dot = document.getElementById('settingsStatusDot');
+  const text = document.getElementById('settingsStatusText');
+  if (dot) {
+    dot.style.background = available ? '#22c55e' : '#ef4444';
+    dot.style.boxShadow = available ? '0 0 8px rgba(34,197,94,0.5)' : '0 0 8px rgba(239,68,68,0.3)';
+  }
+  if (text) {
+    text.textContent = available ? 'Connected' : 'Not connected';
+    text.style.color = available ? '#22c55e' : '#ef4444';
+  }
+}
+
+function showModelSuggestions(models, current) {
+  const container = document.getElementById('modelSuggestions');
+  if (!container) return;
+  container.innerHTML = '';
+  models.forEach(m => {
+    if (!m) return;
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = 'tag-chip';
+    chip.textContent = m;
+    if (m === current) chip.style.borderColor = 'var(--cyan)';
+    chip.onclick = function() {
+      document.getElementById('settingsModel').value = m;
+      container.querySelectorAll('.tag-chip').forEach(c => c.style.borderColor = '');
+      chip.style.borderColor = 'var(--cyan)';
+    };
+    container.appendChild(chip);
+  });
+}
+
+function refreshModels() {
+  fetch('/api/models')
+    .then(r => r.json())
+    .then(data => {
+      showModelSuggestions(data.models || [], data.current);
+    })
+    .catch(() => {});
+}
+
+function saveSettings() {
+  const provider = document.querySelector('input[name="s_provider"]:checked');
+  const body = {
+    provider: provider ? provider.value : undefined,
+    base_url: document.getElementById('settingsBaseUrl')?.value || undefined,
+    model: document.getElementById('settingsModel')?.value || undefined,
+    temperature: parseFloat(document.getElementById('settingsTemp')?.value || '0.7'),
+  };
+  const apiKey = document.getElementById('settingsApiKey')?.value;
+  if (apiKey) body.api_key = apiKey;
+
+  fetch('/api/settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+    .then(r => r.json())
+    .then(data => {
+      updateSettingsStatus(data.available);
+      checkInferenceStatus();
+      closeSettings();
+    })
+    .catch(() => alert('Failed to save settings'));
+}
+
+function testConnection() {
+  const btn = document.getElementById('testBtn');
+  const text = document.getElementById('testBtnText');
+  const spin = document.getElementById('testSpinner');
+  if (btn) btn.disabled = true;
+  if (text) text.textContent = 'Testing...';
+  if (spin) spin.style.display = 'inline-block';
+
+  // Save first, then test
+  const provider = document.querySelector('input[name="s_provider"]:checked');
+  const body = {
+    provider: provider ? provider.value : undefined,
+    base_url: document.getElementById('settingsBaseUrl')?.value || undefined,
+    model: document.getElementById('settingsModel')?.value || undefined,
+    temperature: parseFloat(document.getElementById('settingsTemp')?.value || '0.7'),
+  };
+  const apiKey = document.getElementById('settingsApiKey')?.value;
+  if (apiKey) body.api_key = apiKey;
+
+  fetch('/api/settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+    .then(() => fetch('/api/settings/test', { method: 'POST' }))
+    .then(r => r.json())
+    .then(data => {
+      if (data.ok) {
+        updateSettingsStatus(true);
+        if (text) text.textContent = 'Connected!';
+        setTimeout(() => { if (text) text.textContent = 'Test Connection'; }, 2000);
+      } else {
+        updateSettingsStatus(false);
+        if (text) text.textContent = data.error ? 'Failed' : 'Not reachable';
+        setTimeout(() => { if (text) text.textContent = 'Test Connection'; }, 3000);
+      }
+    })
+    .catch(() => {
+      updateSettingsStatus(false);
+      if (text) text.textContent = 'Error';
+      setTimeout(() => { if (text) text.textContent = 'Test Connection'; }, 2000);
+    })
+    .finally(() => {
+      if (btn) btn.disabled = false;
+      if (spin) spin.style.display = 'none';
+      checkInferenceStatus();
+    });
+}

app/templates/base.html

@@ -677,14 +677,18 @@
       </div>
 
       <!-- Right side -->
-      <div style="display: flex; align-items: center; gap: 12px; flex-shrink: 0;">
-        <!-- Inference status -->
-        {% set inference_available = inference_available | default(false) %}
-        <div style="display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted);" title="{{ 'OllaBridge connected' if inference_available else 'Inference offline' }}">
-          <div style="width: 8px; height: 8px; border-radius: 50%; background: {{ '#22c55e' if inference_available else '#3f3f50' }}; {{ 'box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);' if inference_available else '' }}"></div>
-          <span style="display: none;">{{ 'Online' if inference_available else 'Offline' }}</span>
+      <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
+        <!-- Inference status dot -->
+        <div id="inferenceStatusDot" style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); cursor: pointer;" title="Click to open settings" onclick="openSettings()">
+          <div id="statusDot" style="width: 8px; height: 8px; border-radius: 50%; background: #3f3f50;"></div>
+          <span id="statusLabel" style="display: none;">Offline</span>
         </div>
-        <a href="https://github.com/ruslanmv/agent-generator" target="_blank" class="btn-glass" style="padding: 6px 12px; font-size: 12px; border-radius: 10px;">
+        <!-- Settings gear -->
+        <button onclick="openSettings()" class="btn-glass" style="padding: 6px 10px; font-size: 12px; border-radius: 10px;" title="LLM Settings">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+        </button>
+        <!-- GitHub -->
+        <a href="https://github.com/ruslanmv/agent-generator" target="_blank" class="btn-glass" style="padding: 6px 10px; font-size: 12px; border-radius: 10px;" title="GitHub">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
         </a>
       </div>
@@ -708,6 +712,99 @@
     </div>
   </footer>
 
+  <!-- Settings Modal -->
+  <div id="settingsModal" style="display:none; position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); align-items:center; justify-content:center;">
+    <div class="glass" style="width:100%; max-width:520px; margin:24px; padding:0; overflow:hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.5);">
+      <!-- Header -->
+      <div style="padding:20px 24px; border-bottom:1px solid var(--glass-border); display:flex; justify-content:space-between; align-items:center;">
+        <div style="display:flex; align-items:center; gap:10px;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+          <span style="font-weight:700; font-size:16px; color:var(--text-primary);">LLM Settings</span>
+        </div>
+        <button onclick="closeSettings()" style="background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+
+      <!-- Body -->
+      <div style="padding:24px; display:flex; flex-direction:column; gap:20px; max-height:70vh; overflow-y:auto;">
+        <!-- Connection Status -->
+        <div id="settingsStatus" style="padding:12px 16px; border-radius:10px; font-size:13px; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);">
+          <div id="settingsStatusDot" style="width:8px; height:8px; border-radius:50%; background:#3f3f50; flex-shrink:0;"></div>
+          <span id="settingsStatusText" style="color:var(--text-muted);">Checking connection...</span>
+        </div>
+
+        <!-- Provider -->
+        <div>
+          <label style="display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.05em;">Provider</label>
+          <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;">
+            <label class="framework-card" style="padding:10px 12px; text-align:center; border-radius:10px;" id="provOllama">
+              <input type="radio" name="s_provider" value="ollama" onchange="onProviderChange(this.value)">
+              <div style="font-weight:600; font-size:13px; color:var(--text-primary);">Ollama</div>
+              <div style="font-size:11px; color:var(--text-muted);">Local LLM</div>
+            </label>
+            <label class="framework-card" style="padding:10px 12px; text-align:center; border-radius:10px;" id="provOllabridge">
+              <input type="radio" name="s_provider" value="ollabridge" onchange="onProviderChange(this.value)">
+              <div style="font-weight:600; font-size:13px; color:var(--text-primary);">OllaBridge</div>
+              <div style="font-size:11px; color:var(--text-muted);">Remote LLM</div>
+            </label>
+            <label class="framework-card" style="padding:10px 12px; text-align:center; border-radius:10px;" id="provOpenai">
+              <input type="radio" name="s_provider" value="openai" onchange="onProviderChange(this.value)">
+              <div style="font-weight:600; font-size:13px; color:var(--text-primary);">OpenAI</div>
+              <div style="font-size:11px; color:var(--text-muted);">Cloud API</div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Base URL -->
+        <div>
+          <label style="display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;">Endpoint URL</label>
+          <input type="text" id="settingsBaseUrl" placeholder="http://localhost:11434" style="font-family:'JetBrains Mono',monospace; font-size:13px;">
+        </div>
+
+        <!-- Model -->
+        <div>
+          <label style="display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;">Model</label>
+          <div style="display:flex; gap:8px;">
+            <input type="text" id="settingsModel" placeholder="qwen2.5:1.5b" style="font-family:'JetBrains Mono',monospace; font-size:13px; flex:1;">
+            <button onclick="refreshModels()" class="btn-glass" style="padding:8px 12px; border-radius:10px; white-space:nowrap; font-size:12px;" title="Refresh model list">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2v6h-6M3 12a9 9 0 0115.36-6.36L21 8M3 22v-6h6M21 12a9 9 0 01-15.36 6.36L3 16"/></svg>
+            </button>
+          </div>
+          <div id="modelSuggestions" style="margin-top:6px; display:flex; flex-wrap:wrap; gap:4px;"></div>
+        </div>
+
+        <!-- API Key -->
+        <div>
+          <label style="display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;">API Key <span style="font-weight:400; text-transform:none; color:var(--text-muted);">(optional for local)</span></label>
+          <input type="password" id="settingsApiKey" placeholder="Leave empty for local Ollama" style="font-family:'JetBrains Mono',monospace; font-size:13px;">
+        </div>
+
+        <!-- Temperature -->
+        <div>
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
+            <label style="font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em;">Temperature</label>
+            <span id="settingsTempValue" style="font-size:12px; color:var(--cyan); font-family:'JetBrains Mono',monospace;">0.7</span>
+          </div>
+          <input type="range" id="settingsTemp" min="0" max="2" step="0.1" value="0.7" oninput="document.getElementById('settingsTempValue').textContent=this.value">
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div style="padding:16px 24px; border-top:1px solid var(--glass-border); display:flex; justify-content:space-between; align-items:center; gap:8px;">
+        <button onclick="testConnection()" class="btn-glass" style="padding:8px 16px; font-size:13px; border-radius:10px;" id="testBtn">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
+          <span id="testBtnText">Test Connection</span>
+          <div class="spinner" id="testSpinner" style="display:none; width:14px; height:14px;"></div>
+        </button>
+        <div style="display:flex; gap:8px;">
+          <button onclick="closeSettings()" class="btn-glass" style="padding:8px 16px; font-size:13px; border-radius:10px;">Cancel</button>
+          <button onclick="saveSettings()" class="btn-gradient" style="padding:8px 20px; font-size:13px; border-radius:10px;">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script>
     // Show wizard steps on non-tiny screens
     (function() {

tests/test_generate_hello_world.py

@@ -0,0 +1,141 @@
+"""
+Unit tests: generate a 'hello world' project for each framework.
+
+Verifies that every framework produces valid, non-empty files
+and that Python files pass AST parsing.
+"""
+import ast
+import sys
+from pathlib import Path
+
+import yaml
+
+# Add the hf/app directory to the path
+sys.path.insert(0, str(Path(__file__).resolve().parent.parent / "app"))
+
+from generator import generate_project
+
+
+FRAMEWORKS = ["crewai", "langgraph", "watsonx_orchestrate", "react", "crewai_flow"]
+
+HELLO_PROMPT = "Build a simple hello-world agent that greets the user and responds to questions."
+
+
+def _validate_python(code: str, filepath: str):
+    """Assert the code is valid Python."""
+    try:
+        ast.parse(code, filename=filepath)
+    except SyntaxError as exc:
+        raise AssertionError(f"{filepath}: SyntaxError at line {exc.lineno}: {exc.msg}") from exc
+
+
+def _validate_yaml(content: str, filepath: str):
+    """Assert the content is valid YAML."""
+    try:
+        data = yaml.safe_load(content)
+        assert data is not None, f"{filepath}: YAML parsed as None"
+    except yaml.YAMLError as exc:
+        raise AssertionError(f"{filepath}: YAML error: {exc}") from exc
+
+
+# ── Per-framework tests ─────────────────────────────────────────
+
+
+def test_crewai_hello_world():
+    plan, files = generate_project(HELLO_PROMPT, "crewai", "code_and_yaml")
+    assert plan["framework"] == "crewai"
+    assert len(files) >= 4, f"Expected >=4 files, got {len(files)}: {list(files.keys())}"
+
+    # Must have YAML configs
+    yaml_files = [f for f in files if f.endswith((".yaml", ".yml"))]
+    assert yaml_files, "CrewAI code_and_yaml should produce YAML files"
+
+    # Validate all files
+    for path, content in files.items():
+        assert content.strip(), f"{path} is empty"
+        if path.endswith(".py"):
+            _validate_python(content, path)
+        elif path.endswith((".yaml", ".yml")):
+            _validate_yaml(content, path)
+
+
+def test_langgraph_hello_world():
+    plan, files = generate_project(HELLO_PROMPT, "langgraph", "code_only")
+    assert plan["framework"] == "langgraph"
+    assert len(files) >= 2
+
+    py_files = [f for f in files if f.endswith(".py")]
+    assert py_files, "LangGraph should produce Python files"
+
+    for path, content in files.items():
+        assert content.strip(), f"{path} is empty"
+        if path.endswith(".py"):
+            _validate_python(content, path)
+
+
+def test_watsonx_hello_world():
+    plan, files = generate_project(HELLO_PROMPT, "watsonx_orchestrate", "yaml_only")
+    assert plan["framework"] == "watsonx_orchestrate"
+    assert len(files) >= 1
+
+    yaml_files = [f for f in files if f.endswith((".yaml", ".yml"))]
+    assert yaml_files, "WatsonX should produce YAML files"
+
+    for path, content in files.items():
+        assert content.strip(), f"{path} is empty"
+        if path.endswith((".yaml", ".yml")):
+            _validate_yaml(content, path)
+
+
+def test_react_hello_world():
+    plan, files = generate_project(HELLO_PROMPT, "react", "code_only")
+    assert plan["framework"] == "react"
+    assert len(files) >= 2
+
+    for path, content in files.items():
+        assert content.strip(), f"{path} is empty"
+        if path.endswith(".py"):
+            _validate_python(content, path)
+
+
+def test_crewai_flow_hello_world():
+    plan, files = generate_project(HELLO_PROMPT, "crewai_flow", "code_only")
+    assert plan["framework"] == "crewai_flow"
+    assert len(files) >= 2
+
+    for path, content in files.items():
+        assert content.strip(), f"{path} is empty"
+        if path.endswith(".py"):
+            _validate_python(content, path)
+
+
+# ── Cross-framework tests ───────────────────────────────────────
+
+
+def test_all_frameworks_produce_readme():
+    for fw in FRAMEWORKS:
+        _, files = generate_project(HELLO_PROMPT, fw)
+        readme = [f for f in files if f.lower() == "readme.md"]
+        assert readme, f"{fw} should produce a README.md"
+
+
+def test_all_frameworks_produce_nonempty():
+    for fw in FRAMEWORKS:
+        _, files = generate_project(HELLO_PROMPT, fw)
+        assert len(files) >= 1, f"{fw} produced no files"
+        for path, content in files.items():
+            assert len(content) > 10, f"{fw}/{path} is too short ({len(content)} chars)"
+
+
+def test_plan_detects_framework():
+    """Verify framework detection from prompt keywords."""
+    from generator import plan_project
+
+    plan = plan_project("Build a LangGraph state machine pipeline")
+    assert plan["framework"] == "langgraph"
+
+    plan = plan_project("Create a WatsonX Orchestrate assistant")
+    assert plan["framework"] == "watsonx_orchestrate"
+
+    plan = plan_project("Build a CrewAI multi-agent research team")
+    assert plan["framework"] == "crewai"