openclacky 1.5.13 → 1.5.15

data/lib/clacky/web/settings.js

@@ -15,6 +15,14 @@ const Settings = (() => {
   let _apiFormatSelect = null;
   let _providerSelect = null;
   let _providerFilterSelect = null;
+  // Model list pulled from an endpoint for the modal's custom-provider flow:
+  // `{ key, models }` where key is base_url+api_key, so editing either field
+  // silently discards a list fetched for the previous pair. Filled by the
+  // automatic fetch triggered on API-key blur / Base-URL blur / dropdown open.
+  let _modalRemoteModels = null;
+  // Guards against overlapping fetches (blur → open-dropdown can fire within
+  // the same second).
+  let _remoteLoadInFlight = false;
   // Live filter text for the model search box; empty = show all.
   let _modelSearchQuery = "";
   // Provider id selected in the model provider filter; empty = show all.
@@ -310,6 +318,8 @@ const Settings = (() => {
 
     indexInput.value = index;
     document.getElementById("model-modal-source-id").value = "";
+    // Drop any model list fetched for a previously opened model/endpoint.
+    _modalRemoteModels = null;
 
     // Populate provider dropdown
     _populateModalProviderDropdown();
@@ -735,6 +745,11 @@ const Settings = (() => {
       _positionDropdownFixed(modelDropdown, modelCombobox);
       modelDropdown.style.display = "block";
       document.body.appendChild(modelDropdown);
+      // Opening the dropdown is an explicit "show me what this endpoint
+      // offers" intent — fetch when there is no fresh list yet. Masked keys
+      // are allowed on this trigger only: the server resolves them from the
+      // stored config, so editing a saved custom model can still list it.
+      _loadRemoteModels({ allowMasked: true });
     }
 
     function _closeModelDropdown() {
@@ -782,9 +797,19 @@ const Settings = (() => {
       }
     });
 
-    // Update model dropdown when base_url changes
+    // Update model dropdown when base_url changes, and refresh the fetched
+    // list for the new endpoint (skipped for presets/masked keys — see
+    // _shouldFetchRemoteModels).
     baseUrlInput.addEventListener("blur", () => {
       _updateModalModelDropdown();
+      _loadRemoteModels();
+    });
+
+    // Finishing the API key is the moment a custom endpoint becomes listable:
+    // fetch its models in the background so the dropdown is already populated
+    // when the user opens it.
+    document.getElementById("model-modal-apikey").addEventListener("blur", () => {
+      _loadRemoteModels();
     });
 
     // Close dropdowns on outside click
@@ -817,16 +842,29 @@ const Settings = (() => {
     const modelDropdown = document.getElementById("model-modal-model-dropdown");
     const modelInput = document.getElementById("model-modal-model");
     const provider = _getModalCurrentProvider();
-    const models = provider?.models || [];
+    const picked = _modalDropdownModels(provider);
 
-    if (models.length === 0) {
+    if (picked.models.length === 0) {
       modelDropdown.innerHTML = `<div class="model-dropdown-empty">${I18n.t("settings.models.noModels") || "No preset models available"}</div>`;
       return;
     }
 
-    modelDropdown.innerHTML = models.map(m =>
-      `<div class="model-dropdown-option" data-value="${_esc(m)}">${_esc(m)}</div>`
-    ).join("");
+    const status = picked.remote
+      ? `<div class="model-dropdown-status">${I18n.t("settings.models.fetchedFrom", { endpoint: _esc(picked.endpoint), count: picked.models.length })}</div>`
+      : "";
+
+    modelDropdown.innerHTML = status;
+    picked.models.forEach(m => {
+      const opt = document.createElement("div");
+      opt.className = "model-dropdown-option";
+      opt.dataset.value = m;
+      opt.appendChild(ModelPicker.vendorBadge(m));
+      const label = document.createElement("span");
+      label.className = "model-dropdown-option-label";
+      label.textContent = m;
+      opt.appendChild(label);
+      modelDropdown.appendChild(opt);
+    });
 
     modelDropdown.querySelectorAll(".model-dropdown-option").forEach(opt => {
       opt.addEventListener("click", (e) => {
@@ -837,6 +875,117 @@ const Settings = (() => {
     });
   }
 
+  // Which model ids the dropdown should offer: the list fetched from the
+  // endpoint the user typed wins, but only while that exact base_url+api_key
+  // pair is still in the form. Otherwise fall back to the matched provider's
+  // preset models.
+  function _modalDropdownModels(provider) {
+    const baseUrl = (document.getElementById("model-modal-baseurl")?.value || "").trim();
+    const apiKey = (document.getElementById("model-modal-apikey")?.value || "").trim();
+    const fresh = _modalRemoteModels && _modalRemoteModels.key === _remoteModelsKey(baseUrl, apiKey);
+    return fresh
+      ? { models: _modalRemoteModels.models, remote: true, endpoint: _prettyEndpoint(baseUrl) }
+      : { models: provider?.models || [], remote: false, endpoint: "" };
+  }
+
+  // Cache identity for a fetched list — editing Base URL or API Key should not
+  // keep offering models that were listed for the previous pair.
+  function _remoteModelsKey(baseUrl, apiKey) {
+    return baseUrl + "\u0000" + apiKey;
+  }
+
+  // "https://llm.example.com/v1/" → "llm.example.com/v1" for the status row.
+  function _prettyEndpoint(rawUrl) {
+    const trimmed = String(rawUrl || "").trim();
+    try {
+      const parsed = new URL(trimmed);
+      return (parsed.host + parsed.pathname).replace(/\/+$/, "");
+    } catch (e) {
+      return trimmed.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+    }
+  }
+
+  function _modalApiFormat() {
+    return _modalProviderIsCustom ? ((_apiFormatSelect && _apiFormatSelect.value) || null) : null;
+  }
+
+  // Decide whether a trigger (API-key blur, Base-URL blur, dropdown open)
+  // should fetch the endpoint's model list. Shared by all triggers so they
+  // cannot double-fire or race each other.
+  //
+  // `allowMasked` is true only for the dropdown-open trigger: there the user
+  // explicitly asked for a list, and the server resolves a masked key back to
+  // the stored secret via the model id/index. Blur-triggered fetches skip
+  // masked keys (upstream guidance) so merely opening a model for editing
+  // never fires a request at the provider.
+  function _shouldFetchRemoteModels({ allowMasked }) {
+    if (_remoteLoadInFlight) return false;
+    const baseUrl = (document.getElementById("model-modal-baseurl")?.value || "").trim();
+    const apiKey = (document.getElementById("model-modal-apikey")?.value || "").trim();
+    if (!baseUrl || !apiKey) return false;
+    if (!allowMasked && apiKey.includes("****")) return false;
+    // Preset providers keep their static model list (upstream guidance).
+    if (_getModalCurrentProvider()) return false;
+    // Same pair already fetched — reuse the cache.
+    if (_modalRemoteModels && _modalRemoteModels.key === _remoteModelsKey(baseUrl, apiKey)) {
+      return false;
+    }
+    return true;
+  }
+
+  // Query the typed endpoint for the model ids it advertises and offer them in
+  // the Model dropdown. Triggered automatically, never by a dedicated button.
+  async function _loadRemoteModels({ allowMasked = false } = {}) {
+    if (!_shouldFetchRemoteModels({ allowMasked })) return;
+
+    const dropdown = document.getElementById("model-modal-model-dropdown");
+    const baseUrl = (document.getElementById("model-modal-baseurl")?.value || "").trim();
+    const apiKey = (document.getElementById("model-modal-apikey")?.value || "").trim();
+    const index = parseInt(document.getElementById("model-modal-index").value, 10);
+    const sourceId = document.getElementById("model-modal-source-id").value || null;
+    const existing = index >= 0 ? (_models[index] || {}) : {};
+
+    // Paint progress/errors only while the dropdown is open, checked live at
+    // paint time: a blur-triggered fetch runs in the background, and the user
+    // may open the dropdown while it is still in flight — the outcome (error,
+    // empty, loading) is exactly what they are waiting for then. Failures and
+    // empty results are deliberately not cached, so reopening retries.
+    function _paint(text) {
+      if (dropdown.style.display !== "block") return;
+      dropdown.innerHTML = `<div class="model-dropdown-empty">${text}</div>`;
+    }
+
+    _remoteLoadInFlight = true;
+    let result;
+    try {
+      _paint(I18n.t("settings.models.loadingModels") || "Loading models…");
+      result = await ModelTester.listModels({
+        base_url: baseUrl,
+        api_key: apiKey,
+        api_format: _modalApiFormat(),
+        id: existing.id || sourceId,
+        index: index >= 0 ? index : undefined
+      });
+    } catch (e) {
+      result = { ok: false, message: e.message };
+    }
+    _remoteLoadInFlight = false;
+
+    if (!result.ok) {
+      _paint(I18n.t("settings.models.loadFailed", { msg: _esc(result.message || "") })
+        || "Couldn't load models");
+      return;
+    }
+
+    if (result.models.length === 0) {
+      _paint(I18n.t("settings.models.loadEmpty") || "Endpoint returned no models");
+      return;
+    }
+
+    _modalRemoteModels = { key: _remoteModelsKey(baseUrl, apiKey), models: result.models };
+    _updateModalModelDropdown();
+  }
+
   function _updateModalBaseUrlDropdown() {
     const baseUrlDropdown = document.getElementById("model-modal-baseurl-dropdown");
     const baseUrlInput = document.getElementById("model-modal-baseurl");

data/lib/clacky/web/utils.js

@@ -56,6 +56,40 @@ const IME = (() => {
   return { track, bindEnter };
 })();
 
+// Compact, non-interactive Markdown for short previews. Only inline formatting
+// is emitted; raw HTML and images cannot introduce active content.
+const MarkdownPreview = (() => {
+  function render(text) {
+    if (!text) return "";
+    if (typeof marked === "undefined") return escapeHtml(text);
+
+    const renderer = new marked.Renderer();
+    renderer.html = renderer.image = renderer.checkbox = () => "";
+    renderer.hr = renderer.br = () => " ";
+    renderer.link = function({ tokens }) { return this.parser.parseInline(tokens); };
+    renderer.paragraph = renderer.heading = function({ tokens }) {
+      return this.parser.parseInline(tokens) + " ";
+    };
+    renderer.blockquote = renderer.listitem = function({ tokens }) {
+      return this.parser.parse(tokens).trim() + " ";
+    };
+    renderer.list = function({ items }) {
+      return items.map(item => this.listitem(item)).join("");
+    };
+    renderer.table = function({ header, rows }) {
+      return [header, ...rows].map(row => row.map(cell => this.parser.parseInline(cell.tokens)).join(" ")).join(" ") + " ";
+    };
+    renderer.code = function({ text }) { return `<code>${escapeHtml(text)}</code> `; };
+    try {
+      return marked.parse(text, { gfm: true, breaks: false, renderer }).trim();
+    } catch (_) {
+      return escapeHtml(text);
+    }
+  }
+
+  return { render };
+})();
+
 const Tooltip = (() => {
   const GAP = 8;
   let el = null;