docs(settings): add help tooltips to routing-input fields (strategy, max chars, cache TTL, profile)

- The model id is now auto-filled from the model name as you type, and if left
  blank it's derived on save (slug of the last path segment, e.g.
  "qwen/qwen3.7-max" → "qwen3-7-max") — saving no longer errors on a blank id.
- probe/test auth failures (401 / "User not found" / "No auth") now append a
  hint to check the API key (for OpenRouter: use an inference key, not a
  provisioning/management key).

Cargo.lock

@@ -285,7 +285,7 @@ checksum = "1d07550c9036bf2ae0c684c4297d503f838287c83c53686d05370d0e139ae570"
 
 [[package]]
 name = "cortiq-gateway"
-version = "0.2.8"
+version = "0.2.13"
 dependencies = [
  "anyhow",
  "arc-swap",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cortiq-gateway"
-version = "0.2.8"
+version = "0.2.13"
 edition = "2021"
 rust-version = "1.75"
 license = "Apache-2.0"

src/admin/mod.rs

@@ -178,6 +178,8 @@ pub fn api_routes(admin_token: String) -> Router<SharedState> {
         .route("/admin/api/cmf", get(cmf_status))
         .route("/admin/api/cmf/install", post(cmf_install))
         .route("/admin/api/cmf/port", get(cmf_port_check))
+        .route("/admin/api/cmf/files", get(cmf_files))
+        .route("/admin/api/provider/models", post(provider_models))
         .route("/admin/api/requests", get(get_requests))
         .route("/admin/api/test", post(run_test))
         .route("/admin/api/test/stream", post(run_test_stream))
@@ -390,18 +392,105 @@ async fn router_probe(State(state): State<SharedState>) -> ApiResult {
     ok(json!({ "ok": true, "status": "ok", "latency_ms": latency_ms, "usage": usage }))
 }
 
+#[derive(Deserialize)]
+struct ProviderModelsBody {
+    provider: String,
+    base_url: String,
+    /// Key typed into the form (takes priority)…
+    #[serde(default)]
+    api_key: Option<String>,
+    /// …or the name of a stored secret to reuse if no key was typed.
+    #[serde(default)]
+    api_key_env: Option<String>,
+}
+
+/// Concise error line from a provider's JSON error body.
+fn provider_err(body: &str, status: u16) -> String {
+    if let Ok(v) = serde_json::from_str::<Value>(body) {
+        if let Some(m) = v["error"]["message"]
+            .as_str()
+            .or_else(|| v["error"].as_str())
+            .or_else(|| v["message"].as_str())
+        {
+            return format!("{status}: {m}");
+        }
+    }
+    format!("HTTP {status}")
+}
+
+/// Validate a provider API key and list its models by calling the provider's
+/// `/models` endpoint — powers the "Test key & load models" button. The key is
+/// used transiently (from the form) or resolved from a stored secret; it is not
+/// persisted here.
+async fn provider_models(
+    State(state): State<SharedState>,
+    Json(b): Json<ProviderModelsBody>,
+) -> ApiResult {
+    let base = b.base_url.trim_end_matches('/').to_string();
+    if base.is_empty() {
+        return Err(ApiError::bad("base URL is required"));
+    }
+    let key = b.api_key.filter(|k| !k.trim().is_empty()).or_else(|| {
+        b.api_key_env
+            .as_deref()
+            .and_then(|e| state.secrets.resolve(e))
+    });
+    let key = key.as_deref();
+
+    let client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_secs(15))
+        .build()
+        .map_err(|e| ApiError::bad(e.to_string()))?;
+
+    // Anthropic uses x-api-key + anthropic-version and /v1/models; every other
+    // (OpenAI-compatible) provider uses a Bearer token and /models.
+    let resp = if b.provider == "anthropic" {
+        let mut r = client
+            .get(format!("{base}/v1/models"))
+            .header("anthropic-version", "2023-06-01");
+        if let Some(k) = key {
+            r = r.header("x-api-key", k);
+        }
+        r.send().await
+    } else {
+        let mut r = client.get(format!("{base}/models"));
+        if let Some(k) = key {
+            r = r.header("authorization", format!("Bearer {k}"));
+        }
+        r.send().await
+    };
+    let resp = resp.map_err(|e| ApiError::bad(format!("request failed: {e}")))?;
+    let status = resp.status().as_u16();
+    let body = resp.text().await.unwrap_or_default();
+    if !(200..300).contains(&status) {
+        return ok(json!({ "ok": false, "status": status, "error": provider_err(&body, status) }));
+    }
+    // OpenAI + Anthropic both return { "data": [ { "id": ... } ] }.
+    let v: Value = serde_json::from_str(&body).unwrap_or(json!({}));
+    let mut models: Vec<String> = v["data"]
+        .as_array()
+        .map(|arr| {
+            arr.iter()
+                .filter_map(|m| m["id"].as_str().map(|s| s.to_string()))
+                .collect()
+        })
+        .unwrap_or_default();
+    models.sort();
+    ok(json!({ "ok": true, "count": models.len(), "models": models }))
+}
+
 async fn meta() -> ApiResult {
     ok(json!({
         "version": env!("CARGO_PKG_VERSION"),
-        "providers": ["openai", "anthropic", "ollama", "http"],
-        "provider_impl": { "openai": true, "ollama": true, "http": true, "anthropic": true },
-        "cost_tiers": ["cheap", "mid", "expensive"],
+        "providers": ["openai", "anthropic", "openrouter", "lmstudio", "ollama", "http"],
+        "provider_impl": { "openai": true, "anthropic": true, "openrouter": true, "lmstudio": true, "ollama": true, "http": true },
+        "cost_tiers": ["cheap", "mid", "expensive", "local"],
         "kinds": ["chat", "embedding"],
         "profiles": ["cost-saver", "balanced", "quality-first"],
         "text_strategies": ["last_user", "last_user_plus_system", "concat_all"],
         "policy_modes": ["fixed_table", "cost_aware"],
         "tiers": ["low", "medium", "high"],
-        "caps": ["tools", "vision"],
+        "caps": ["tools", "vision", "audio", "reasoning", "json", "caching"],
         "protocols_impl": {
             "openai_chat": true, "openai_completions": true, "openai_embeddings": true,
             "openai_models": true, "anthropic_messages": true, "mcp": true, "native_passthrough": true
@@ -605,15 +694,25 @@ async fn delete_model(State(state): State<SharedState>, Path(id): Path<String>)
 
 async fn probe_model(State(state): State<SharedState>, Path(id): Path<String>) -> ApiResult {
     let live = state.live();
-    let mcfg = live
+    // Provider string: from the static pool, or "openai" for a managed local
+    // model (which is synthesized into the registry, not [[models]]).
+    let provider_str = live
         .cfg
         .models
         .iter()
         .find(|m| m.id == id)
-        .ok_or_else(|| ApiError::not_found(format!("model '{id}' not found")))?
-        .clone();
+        .map(|m| m.provider.clone())
+        .or_else(|| {
+            live.cfg
+                .cmf
+                .effective_servers()
+                .iter()
+                .find(|s| s.id == id)
+                .map(|_| "openai".to_string())
+        })
+        .ok_or_else(|| ApiError::not_found(format!("model '{id}' not found")))?;
 
-    if mcfg.provider == "anthropic" {
+    if provider_str == "anthropic" {
         return ok(json!({
             "ok": false,
             "error": "anthropic provider not yet implemented (planned v0.2)",
@@ -650,7 +749,21 @@ async fn probe_model(State(state): State<SharedState>, Path(id): Path<String>) -
     let latency_ms = started.elapsed().as_millis() as u64;
     match res {
         Ok(_) => ok(json!({ "ok": true, "latency_ms": latency_ms })),
-        Err(e) => ok(json!({ "ok": false, "latency_ms": latency_ms, "error": e.to_string() })),
+        Err(e) => {
+            let msg = e.to_string();
+            // Make auth failures actionable — a raw "User not found" (OpenRouter's
+            // 401) usually means the API key is wrong or the wrong type.
+            let hint = if msg.contains("401")
+                || msg.contains("Unauthorized")
+                || msg.contains("User not found")
+                || msg.contains("No auth")
+            {
+                " — check the API key (for OpenRouter use an inference key, not a provisioning/management key)"
+            } else {
+                ""
+            };
+            ok(json!({ "ok": false, "latency_ms": latency_ms, "error": format!("{msg}{hint}") }))
+        }
     }
 }
 
@@ -843,6 +956,36 @@ async fn cmf_install(State(state): State<SharedState>) -> ApiResult {
     ok(json!({ "started": true }))
 }
 
+/// List the `.cmf` model files available under `models_dir` so the UI can offer
+/// them as a dropdown instead of a hand-typed path. Includes tensor-dir `.cmf`.
+async fn cmf_files(State(state): State<SharedState>) -> ApiResult {
+    let dir = state.live().cfg.cmf.models_dir.clone();
+    let mut entries: Vec<(String, String, Option<u64>, bool)> = Vec::new();
+    if let Ok(rd) = std::fs::read_dir(&dir) {
+        for e in rd.flatten() {
+            let name = e.file_name().to_string_lossy().to_string();
+            if !name.ends_with(".cmf") {
+                continue;
+            }
+            let p = e.path();
+            let is_dir = p.is_dir();
+            let size = if is_dir {
+                None
+            } else {
+                std::fs::metadata(&p).ok().map(|m| m.len())
+            };
+            let path = format!("{}/{}", dir.trim_end_matches('/'), name);
+            entries.push((name, path, size, is_dir));
+        }
+    }
+    entries.sort_by(|a, b| a.0.cmp(&b.0));
+    let files: Vec<Value> = entries
+        .into_iter()
+        .map(|(name, path, size, is_dir)| json!({ "name": name, "path": path, "size": size, "is_dir": is_dir }))
+        .collect();
+    ok(json!({ "dir": dir, "files": files }))
+}
+
 #[derive(Deserialize)]
 struct PortQuery {
     port: u16,

src/registry.rs

@@ -21,7 +21,10 @@ impl Registry {
                 .as_ref()
                 .and_then(|name| secrets.resolve(name));
             let provider: Arc<dyn Provider> = match m.provider.as_str() {
-                "openai" | "ollama" | "http" => Arc::new(OpenAiProvider::new(m, api_key)?),
+                // openrouter + lmstudio are OpenAI-compatible (Bearer + /chat/completions)
+                "openai" | "ollama" | "http" | "openrouter" | "lmstudio" => {
+                    Arc::new(OpenAiProvider::new(m, api_key)?)
+                }
                 "anthropic" => Arc::new(AnthropicProvider::new(m, api_key)?),
                 other => anyhow::bail!("unknown provider '{}' for model '{}'", other, m.id),
             };

web/js/api.js

@@ -99,6 +99,8 @@ export const api = {
   cmfStatus: () => j("GET", "/cmf"),
   cmfInstall: () => j("POST", "/cmf/install"),
   cmfPortCheck: (port) => j("GET", "/cmf/port?port=" + encodeURIComponent(port)),
+  cmfFiles: () => j("GET", "/cmf/files"),
+  providerModels: (b) => j("POST", "/provider/models", b),
 
   // CMF model factory (HuggingFace → local .cmf)
   hfSearch: (q, limit = 24) =>

web/js/i18n/en.js

@@ -129,6 +129,18 @@ export default {
   "models.form.secretMissing": "not set",
   "models.form.secretPlaceholder": "set or replace key (write-only)",
   "models.deleteConfirm": "Delete model \"{id}\"?",
+  "models.form.idOrModel": "Enter an id or a model name",
+  "models.form.apiKey": "API Key",
+  "models.form.apiKeyPlaceholder": "paste your API key",
+  "models.form.apiKeyNotNeeded": "not required (local server)",
+  "models.form.apiKeyHint": "Stored securely on the gateway; it is not shown again.",
+  "models.form.keyStored": "A key is saved — leave blank to keep it, or paste a new one.",
+  "models.form.keyFromEnv": "Using a key from an environment variable.",
+  "models.form.testKey": "Test & load models",
+  "models.form.testing": "checking…",
+  "models.form.foundModels": "{n} models loaded",
+  "models.form.modelPlaceholder": "type to search…",
+  "models.form.modelHint": "Click “Test & load models” to pull the list from your key, then pick one.",
   "models.managed": "managed",
   "models.managedHint": "Provided by the managed CMF server (Settings → Local models). Configure it there.",
 
@@ -244,9 +256,10 @@ export default {
   "settings.cmf.threads": "Worker threads",
   "settings.cmf.gpu": "Use GPU (Metal / wgpu)",
   "settings.cmf.speedNote": "Threads parallelise the decode matvecs (~3x faster; 0 = runtime default). GPU offload mainly helps prefill of long prompts — decode is memory-bandwidth-bound, so on Apple Silicon it is roughly neutral.",
+  "settings.cmf.pick": "select a model",
   "settings.cmf.models": "Local models",
   "settings.cmf.modelsHelp": "Each row is one model the gateway runs (its own cortiq serve on its own port) and registers in the pool. Add as many as you have .cmf files and free ports.",
-  "settings.cmf.rowHint": "id · path to .cmf · port · threads · GPU. Changes apply on restart; deleting a row stops that server.",
+  "settings.cmf.rowHint": "id · .cmf file · port · threads · GPU. Changes apply on restart; deleting a row stops that server.",
   "settings.cmf.addServer": "+ Add local model",
   "settings.cmf.checkPort": "Check port",
   "settings.cmf.portFree": "port is free",
@@ -303,6 +316,10 @@ export default {
   "settings.route.maxChars": "Max chars",
   "settings.route.cacheTtl": "Cache TTL",
   "settings.route.profile": "Default profile",
+  "settings.route.strategyHelp": "What text is sent to the router for classification: last_user = only the last user message; last_user_plus_system = last user message + system prompt; concat_all = the whole conversation.",
+  "settings.route.maxCharsHelp": "Max characters of that text sent to the router (longer is truncated). More = more accurate classification, but slower/pricier router calls.",
+  "settings.route.cacheTtlHelp": "How long a routing decision is cached for an identical request before the router is asked again (e.g. 60s, 5m).",
+  "settings.route.profileHelp": "Default routing profile when a request doesn't specify one: cost-saver (cheapest), balanced, or quality-first (best model). Biases which model the router picks.",
   "settings.breaker": "Circuit breaker",
   "settings.breaker.threshold": "Error threshold",
   "settings.breaker.cooldown": "Cooldown",

web/js/i18n/ru.js

@@ -128,6 +128,18 @@ export default {
   "models.form.secretMissing": "не задан",
   "models.form.secretPlaceholder": "задать или заменить ключ (только запись)",
   "models.deleteConfirm": "Удалить модель \"{id}\"?",
+  "models.form.idOrModel": "Укажите id или имя модели",
+  "models.form.apiKey": "API-ключ",
+  "models.form.apiKeyPlaceholder": "вставьте API-ключ",
+  "models.form.apiKeyNotNeeded": "не нужен (локальный сервер)",
+  "models.form.apiKeyHint": "Хранится безопасно на шлюзе; больше не показывается.",
+  "models.form.keyStored": "Ключ сохранён — оставьте пустым, чтобы не менять, или вставьте новый.",
+  "models.form.keyFromEnv": "Используется ключ из переменной окружения.",
+  "models.form.testKey": "Проверить и загрузить модели",
+  "models.form.testing": "проверка…",
+  "models.form.foundModels": "загружено моделей: {n}",
+  "models.form.modelPlaceholder": "введите для поиска…",
+  "models.form.modelHint": "Нажмите «Проверить и загрузить модели», чтобы подтянуть список по ключу, затем выберите.",
   "models.managed": "управляемая",
   "models.managedHint": "Предоставляется CMF-сервером (Настройки → Локальные модели). Настраивается там.",
 
@@ -243,9 +255,10 @@ export default {
   "settings.cmf.threads": "Рабочие потоки",
   "settings.cmf.gpu": "Использовать GPU (Metal / wgpu)",
   "settings.cmf.speedNote": "Потоки распараллеливают декод-матвеки (~×3; 0 = по умолчанию рантайма). GPU-оффлоад помогает в основном на prefill длинных промптов — декод упирается в пропускную способность памяти, поэтому на Apple Silicon почти нейтрален.",
+  "settings.cmf.pick": "выберите модель",
   "settings.cmf.models": "Локальные модели",
   "settings.cmf.modelsHelp": "Каждая строка — отдельная модель: шлюз поднимает свой cortiq serve на своём порту и регистрирует её в пуле. Добавляйте столько, сколько есть .cmf-файлов и свободных портов.",
-  "settings.cmf.rowHint": "id · путь к .cmf · порт · потоки · GPU. Изменения применяются после перезапуска; удаление строки останавливает сервер.",
+  "settings.cmf.rowHint": "id · файл .cmf · порт · потоки · GPU. Изменения применяются после перезапуска; удаление строки останавливает сервер.",
   "settings.cmf.addServer": "+ Добавить модель",
   "settings.cmf.checkPort": "Проверить порт",
   "settings.cmf.portFree": "порт свободен",
@@ -302,6 +315,10 @@ export default {
   "settings.route.maxChars": "Макс. символов",
   "settings.route.cacheTtl": "TTL кэша",
   "settings.route.profile": "Профиль по умолчанию",
+  "settings.route.strategyHelp": "Какой текст отправляется роутеру для классификации: last_user — только последнее сообщение пользователя; last_user_plus_system — последнее сообщение + системный промпт; concat_all — вся переписка.",
+  "settings.route.maxCharsHelp": "Максимум символов этого текста, отправляемого роутеру (длиннее — обрезается). Больше = точнее классификация, но медленнее/дороже вызовы роутера.",
+  "settings.route.cacheTtlHelp": "Сколько кэшируется решение роутинга для одинакового запроса, прежде чем роутер спрашивается снова (напр. 60s, 5m).",
+  "settings.route.profileHelp": "Профиль роутинга по умолчанию, если запрос его не задаёт: cost-saver (дешевле), balanced (баланс) или quality-first (качество). Влияет на выбор модели роутером.",
   "settings.breaker": "Автоматический выключатель",
   "settings.breaker.threshold": "Порог ошибок",
   "settings.breaker.cooldown": "Время восстановления",

web/js/ui.js

@@ -25,7 +25,9 @@ export function clear(node) {
 
 export function mount(node, ...children) {
   clear(node);
-  for (const c of children.flat()) if (c != null && c !== false) node.appendChild(c);
+  for (const c of children.flat())
+    if (c != null && c !== false)
+      node.appendChild(typeof c === "object" ? c : document.createTextNode(String(c)));
   return node;
 }
 

web/js/views/models.js

@@ -16,52 +16,142 @@ function keyBadge(src) {
   return h("span", { class: "badge " + (map[src] ?? "") }, src);
 }
 
+// Verified per-provider defaults (base URL, key env, whether a key is needed).
+const PROVIDER_DEFAULTS = {
+  openai:     { base: "https://api.openai.com/v1",    keyEnv: "OPENAI_API_KEY",     needsKey: true,  tier: "mid",       caps: ["tools", "vision"] },
+  anthropic:  { base: "https://api.anthropic.com",    keyEnv: "ANTHROPIC_API_KEY",  needsKey: true,  tier: "expensive", caps: ["tools", "vision"] },
+  openrouter: { base: "https://openrouter.ai/api/v1", keyEnv: "OPENROUTER_API_KEY", needsKey: true,  tier: "mid",       caps: ["tools", "vision"] },
+  lmstudio:   { base: "http://localhost:1234/v1",     keyEnv: "",                   needsKey: false, tier: "local",     caps: ["tools", "vision"] },
+  ollama:     { base: "http://localhost:11434/v1",    keyEnv: "",                   needsKey: false, tier: "local",     caps: ["tools"] },
+  http:       { base: "",                              keyEnv: "",                   needsKey: false, tier: "cheap",     caps: ["tools"] },
+};
+
+// Derive a clean model id from a model name (last path segment, slugified).
+// e.g. "qwen/qwen3.7-max" → "qwen3-7-max".
+function slugId(name) {
+  const base = (name || "").split("/").pop() || "";
+  return base.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
 function modelForm(meta, existing) {
-  const m = existing || { provider: "openai", kind: "chat", cost_tier: "cheap", caps: [], price_in: 0, price_out: 0 };
-  const idIn = h("input", { value: m.id || "", placeholder: "local-qwen", disabled: existing ? true : null });
+  const m = existing || { provider: "openai", kind: "chat", cost_tier: "mid", caps: ["tools"], price_in: 0, price_out: 0 };
+  const idIn = h("input", { value: m.id || "", placeholder: "my-model", disabled: existing ? true : null });
   const providerSel = h("select", {}, ...(meta.providers || ["openai"]).map((p) => opt(p, p, p === m.provider)));
-  const baseUrlIn = h("input", { value: m.base_url || "", placeholder: "http://localhost:8000/v1" });
-  const modelIn = h("input", { value: m.model || "", placeholder: "qwen2.5-7b-instruct" });
+  const baseUrlIn = h("input", { value: m.base_url || "", placeholder: "https://api.openai.com/v1" });
+
+  // API key — typed directly, stored securely as a secret under a provider env name.
+  const keyIn = h("input", { type: "password", placeholder: t("models.form.apiKeyPlaceholder"), autocomplete: "new-password" });
+  const testBtn = h("button", { class: "btn small", type: "button" }, t("models.form.testKey"));
+  const keyStatus = h("span", { class: "small", style: "margin-left:8px" });
+
+  // Model — below the key (some providers list models from the key); searchable datalist.
+  const dlId = "model-opts-" + (m.id || "new");
+  const dl = h("datalist", { id: dlId });
+  if (m.model) dl.appendChild(h("option", { value: m.model }));
+  const modelIn = h("input", { value: m.model || "", placeholder: t("models.form.modelPlaceholder"), list: dlId, autocomplete: "off" });
+
   const kindSel = h("select", {}, ...(meta.kinds || ["chat"]).map((k) => opt(k, k, k === m.kind)));
   const tierSel = h("select", {}, ...(meta.cost_tiers || ["cheap"]).map((c) => opt(c, c, c === m.cost_tier)));
   const priceInIn = h("input", { type: "number", step: "0.01", value: m.price_in ?? 0 });
   const priceOutIn = h("input", { type: "number", step: "0.01", value: m.price_out ?? 0 });
-  const keyEnvIn = h("input", { value: m.api_key_env || "", placeholder: "OPENAI_API_KEY" });
-  const secretIn = h("input", { type: "password", placeholder: t("models.form.secretPlaceholder") });
   const capInputs = (meta.caps || ["tools", "vision"]).map((c) => {
     const cb = h("input", { type: "checkbox", checked: (m.caps || []).includes(c) ? true : null });
     return { c, cb };
   });
 
+  const envFor = () =>
+    (existing && existing.api_key_env) ||
+    (PROVIDER_DEFAULTS[providerSel.value] || {}).keyEnv ||
+    providerSel.value.toUpperCase().replace(/[^A-Z0-9]/g, "_") + "_API_KEY";
+
+  // Fill in a provider's verified defaults when it is selected.
+  function applyDefaults() {
+    const d = PROVIDER_DEFAULTS[providerSel.value];
+    if (!d) return;
+    baseUrlIn.value = d.base;
+    tierSel.value = d.tier;
+    capInputs.forEach(({ c, cb }) => { cb.checked = d.caps.includes(c); });
+    keyIn.placeholder = d.needsKey ? t("models.form.apiKeyPlaceholder") : t("models.form.apiKeyNotNeeded");
+    mount(keyStatus, "");
+  }
+  providerSel.addEventListener("change", applyDefaults);
+  if (!existing) applyDefaults();
+
+  // Auto-fill the id from the model name (until the user edits id by hand).
+  if (!existing) {
+    modelIn.addEventListener("input", () => {
+      if (!idIn.value || idIn._auto) {
+        idIn.value = slugId(modelIn.value);
+        idIn._auto = true;
+      }
+    });
+    idIn.addEventListener("input", () => { idIn._auto = false; });
+  }
+
+  async function testKey() {
+    if (!baseUrlIn.value.trim()) { mount(keyStatus, h("span", { style: "color:var(--bad)" }, t("models.form.baseUrl") + "?")); return; }
+    testBtn.disabled = true;
+    mount(keyStatus, t("models.form.testing"));
+    try {
+      const r = await api.providerModels({
+        provider: providerSel.value,
+        base_url: baseUrlIn.value.trim(),
+        api_key: keyIn.value.trim() || null,
+        api_key_env: envFor(),
+      });
+      if (r.ok) {
+        dl.replaceChildren(...(r.models || []).map((mm) => h("option", { value: mm })));
+        mount(keyStatus, h("span", { style: "color:var(--good)" }, "✓ " + t("models.form.foundModels", { n: r.count })));
+        modelIn.focus();
+      } else {
+        mount(keyStatus, h("span", { style: "color:var(--bad)" }, "✗ " + (r.error || t("common.error"))));
+      }
+    } catch (e) {
+      mount(keyStatus, h("span", { style: "color:var(--bad)" }, "✗ " + String(e.message || e)));
+    }
+    testBtn.disabled = false;
+  }
+  testBtn.addEventListener("click", testKey);
+
+  const keyHint =
+    existing && existing.key_source === "store" ? t("models.form.keyStored")
+    : existing && existing.key_source === "env" ? t("models.form.keyFromEnv")
+    : t("models.form.apiKeyHint");
+
   const node = h(
     "div",
     {},
     h("div", { class: "row" }, field(t("models.form.id"), idIn, existing ? null : t("models.form.idHint")), field(t("models.form.provider"), providerSel)),
     field(t("models.form.baseUrl"), baseUrlIn),
-    field(t("models.form.model"), modelIn),
+    field(t("models.form.apiKey"), h("div", { class: "flex wrap", style: "gap:8px;align-items:center" }, keyIn, testBtn, keyStatus), keyHint),
+    field(t("models.form.model"), modelIn, t("models.form.modelHint")),
+    dl,
     h("div", { class: "row" }, field(t("models.form.kind"), kindSel), field(t("models.form.costTier"), tierSel)),
     h("div", { class: "row" }, field(t("models.form.priceIn"), priceInIn), field(t("models.form.priceOut"), priceOutIn)),
-    field(t("models.form.caps"), h("div", { class: "flex wrap" }, ...capInputs.map(({ c, cb }) => h("label", { class: "check" }, cb, c)))),
-    field(t("models.form.apiKeyEnv"), keyEnvIn, t("models.form.apiKeyEnvHint")),
-    field(t("models.form.secret"), secretIn)
+    field(t("models.form.caps"), h("div", { class: "flex wrap" }, ...capInputs.map(({ c, cb }) => h("label", { class: "check" }, cb, c))))
   );
 
-  const getValue = () => ({
-    model: {
-      id: existing ? m.id : idIn.value.trim(),
-      provider: providerSel.value,
-      base_url: baseUrlIn.value.trim(),
-      model: modelIn.value.trim(),
-      kind: kindSel.value,
-      cost_tier: tierSel.value,
-      price_in: parseFloat(priceInIn.value) || 0,
-      price_out: parseFloat(priceOutIn.value) || 0,
-      api_key_env: keyEnvIn.value.trim() || null,
-      caps: capInputs.filter(({ cb }) => cb.checked).map(({ c }) => c),
-    },
-    secret: secretIn.value,
-    keyEnv: keyEnvIn.value.trim(),
-  });
+  const getValue = () => {
+    const typedKey = keyIn.value.trim();
+    const hasKey = !!typedKey || !!(existing && existing.api_key_env);
+    const keyEnv = envFor();
+    return {
+      model: {
+        id: existing ? m.id : idIn.value.trim(),
+        provider: providerSel.value,
+        base_url: baseUrlIn.value.trim(),
+        model: modelIn.value.trim(),
+        kind: kindSel.value,
+        cost_tier: tierSel.value,
+        price_in: parseFloat(priceInIn.value) || 0,
+        price_out: parseFloat(priceOutIn.value) || 0,
+        api_key_env: hasKey ? keyEnv : null,
+        caps: capInputs.filter(({ cb }) => cb.checked).map(({ c }) => c),
+      },
+      secret: typedKey,
+      keyEnv,
+    };
+  };
 
   return { node, getValue };
 }
@@ -70,12 +160,14 @@ async function openModal(meta, existing, reload) {
   const { node, getValue } = modelForm(meta, existing);
   modal(existing ? t("models.form.editTitle") : t("models.form.addTitle"), node, async () => {
     const { model, secret, keyEnv } = getValue();
+    // Forgot the id? Derive it from the model name so saving never errors on a
+    // blank id.
+    if (!model.id) model.id = slugId(model.model);
     if (!model.id) {
-      toast(t("models.form.id") + "?", "bad");
+      toast(t("models.form.idOrModel"), "bad");
       return false;
     }
-    // strip null api_key_env so serde keeps it optional
-    if (!model.api_key_env) delete model.api_key_env;
+    if (!model.api_key_env) delete model.api_key_env; // keep serde field optional
     try {
       if (existing) await api.updateModel(existing.id, model);
       else await api.createModel(model);
@@ -193,7 +285,7 @@ function row(m, meta, reload) {
               try {
                 await api.deleteModel(m.id);
                 toast(t("toast.deleted"), "good");
-                reload();
+                await reload();
               } catch (e) {
                 toast(String(e.message || e), "bad");
               }

web/js/views/settings.js

@@ -214,6 +214,9 @@ export async function renderSettings() {
     ? [{ id: s.cmf.model_id || "cmf-local", model: s.cmf.local_model, port: s.cmf.local_port ?? 8081, threads: s.cmf.threads ?? 8, gpu: !!s.cmf.gpu }]
     : [];
   const initServers = (s.cmf?.servers && s.cmf.servers.length) ? s.cmf.servers : legacyServers;
+  // available .cmf files under models_dir → offer as a dropdown, not a typed path
+  const cmfFiles = ((await api.cmfFiles().catch(() => ({ files: [] }))).files) || [];
+  const fileLabel = (f) => f.name + (f.size ? ` (${(f.size / 1073741824).toFixed(f.size >= 1073741824 ? 1 : 2)} GB)` : f.is_dir ? " (dir)" : "");
   function autoId(path) {
     const base = (path || "").split("/").pop().replace(/\.cmf$/i, "");
     return base ? "cmf-" + base.replace(/[^a-zA-Z0-9_-]/g, "-") : "";
@@ -221,14 +224,20 @@ export async function renderSettings() {
   function makeServerRow(sv) {
     sv = sv || { id: "", model: "", port: 8090, threads: 8, gpu: false };
     const idIn = h("input", { value: sv.id || "", placeholder: "cmf-id", style: "width:130px" });
-    const modelIn = h("input", { value: sv.model || "", placeholder: "models/model.cmf", style: "flex:2;min-width:150px" });
+    // pick from existing .cmf files rather than typing a path
+    const modelSel = h("select", { style: "flex:2;min-width:150px" });
+    const seen = new Set();
+    modelSel.appendChild(h("option", { value: "" }, "— " + t("settings.cmf.pick") + " —"));
+    cmfFiles.forEach((f) => { modelSel.appendChild(h("option", { value: f.path }, fileLabel(f))); seen.add(f.path); });
+    if (sv.model && !seen.has(sv.model)) modelSel.appendChild(h("option", { value: sv.model }, sv.model));
+    modelSel.value = sv.model || "";
     const portIn = h("input", { type: "number", value: sv.port ?? 8090, style: "width:82px" });
     const threadsIn = h("input", { type: "number", min: 0, value: sv.threads ?? 8, style: "width:60px", title: t("settings.cmf.threadsHelp") });
     const gpuIn = h("input", { type: "checkbox", checked: sv.gpu ? true : null, title: t("settings.cmf.gpuHelp") });
     const checkBtn = h("button", { class: "btn small", type: "button" }, t("settings.cmf.checkPort"));
     const removeBtn = h("button", { class: "btn small danger", type: "button", title: t("common.delete") }, "✕");
     const st = h("span", { class: "small" });
-    modelIn.addEventListener("input", () => { if (!idIn.value || idIn._auto) { idIn.value = autoId(modelIn.value); idIn._auto = true; } });
+    modelSel.addEventListener("change", () => { if (!idIn.value || idIn._auto) { idIn.value = autoId(modelSel.value); idIn._auto = true; } });
     idIn.addEventListener("input", () => { idIn._auto = false; });
     checkBtn.addEventListener("click", async () => {
       const p = parseInt(portIn.value, 10); if (!p) return;
@@ -245,8 +254,8 @@ export async function renderSettings() {
       checkBtn.disabled = false;
     });
     const row = h("div", { class: "flex wrap", style: "gap:6px;align-items:center;margin:6px 0" },
-      idIn, modelIn, portIn, checkBtn, threadsIn, h("label", { class: "flex", style: "gap:4px" }, gpuIn, "GPU"), removeBtn, st);
-    const entry = { node: row, read: () => ({ id: idIn.value.trim() || autoId(modelIn.value), model: modelIn.value.trim(), port: parseInt(portIn.value) || 8090, threads: parseInt(threadsIn.value) || 0, gpu: gpuIn.checked }) };
+      idIn, modelSel, portIn, checkBtn, threadsIn, h("label", { class: "flex", style: "gap:4px" }, gpuIn, "GPU"), removeBtn, st);
+    const entry = { node: row, read: () => ({ id: idIn.value.trim() || autoId(modelSel.value), model: modelSel.value.trim(), port: parseInt(portIn.value) || 8090, threads: parseInt(threadsIn.value) || 0, gpu: gpuIn.checked }) };
     removeBtn.addEventListener("click", () => { const i = serverRows.indexOf(entry); if (i >= 0) serverRows.splice(i, 1); row.remove(); });
     serverRows.push(entry);
     serversWrap.appendChild(row);
@@ -433,9 +442,11 @@ export async function renderSettings() {
         "div",
         { class: "card" },
         h("div", { class: "card-head" }, h("h3", {}, t("settings.route"))),
-        field(t("settings.route.strategy"), strategySel),
-        h("div", { class: "row" }, field(t("settings.route.maxChars"), maxChars), field(t("settings.route.cacheTtl"), cacheTtl)),
-        field(t("settings.route.profile"), profileSel)
+        field(t("settings.route.strategy"), strategySel, null, t("settings.route.strategyHelp")),
+        h("div", { class: "row" },
+          field(t("settings.route.maxChars"), maxChars, null, t("settings.route.maxCharsHelp")),
+          field(t("settings.route.cacheTtl"), cacheTtl, null, t("settings.route.cacheTtlHelp"))),
+        field(t("settings.route.profile"), profileSel, null, t("settings.route.profileHelp"))
       ),
       h(
         "div",