openclacky 1.3.2 → 1.3.4

data/lib/clacky/web/settings.js

@@ -96,6 +96,10 @@ const Settings = (() => {
           <span class="model-card-grid-name">${_esc(displayName)}</span>
           ${isDefault ? `<span class="badge badge-default">${I18n.t("settings.models.badge.default")}</span>` : ""}
           ${isLite ? `<span class="badge badge-lite">${I18n.t("settings.models.badge.lite")}</span>` : ""}
+          ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default" style="margin-left:auto">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+            <span>${I18n.t("settings.models.btn.setDefault")}</span>
+          </button>` : ""}
         </div>
         <div class="model-card-grid-provider">${_esc(providerName)}</div>
         ${model.api_key_masked ? `<div class="model-card-grid-model">${_esc(model.api_key_masked)}</div>` : ""}
@@ -113,6 +117,10 @@ const Settings = (() => {
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
             <span>${I18n.t("settings.models.btn.edit")}</span>
           </button>
+          <button class="btn-card-grid-action" data-index="${index}" data-action="duplicate">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            <span>${I18n.t("settings.models.btn.duplicate")}</span>
+          </button>
           ${_models.length > 1 ? `<button class="btn-card-grid-action btn-card-grid-action-danger" data-index="${index}" data-action="delete">
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
             <span>${I18n.t("settings.models.btn.delete")}</span>
@@ -120,11 +128,7 @@ const Settings = (() => {
         </div>
       </div>
       <div class="model-card-grid-footer">
-        ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-          <span>${I18n.t("settings.models.btn.setDefault")}</span>
-        </button>` : `<span></span>`}
-        ${websiteUrl ? `<a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer">
+        ${websiteUrl ? `<a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer" style="margin-left:auto">
           ${I18n.t("settings.models.link.topUp")}
           <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
         </a>` : ""}
@@ -140,10 +144,11 @@ const Settings = (() => {
       btn.addEventListener("click", () => {
         const action = btn.dataset.action;
         switch (action) {
-          case "edit":    _openModal(index); break;
-          case "test":    _testModel(index); break;
-          case "delete":  _removeModel(index); break;
-          case "default": _setAsDefault(index); break;
+          case "edit":      _openModal(index); break;
+          case "test":      _testModel(index); break;
+          case "delete":    _removeModel(index); break;
+          case "default":   _setAsDefault(index); break;
+          case "duplicate": _openModalDuplicate(index); break;
         }
       });
     });
@@ -157,6 +162,7 @@ const Settings = (() => {
     const indexInput = document.getElementById("model-modal-index");
 
     indexInput.value = index;
+    document.getElementById("model-modal-source-id").value = "";
 
     // Populate provider dropdown
     _populateModalProviderDropdown();
@@ -169,7 +175,14 @@ const Settings = (() => {
       document.getElementById("model-modal-baseurl").value = model.base_url || "";
       document.getElementById("model-modal-apikey").value = model.api_key_masked || "";
       document.getElementById("model-modal-default-field").style.display = "";
-      document.getElementById("model-modal-set-default").checked = (model.type === "default");
+      // Lock the checkbox when this is the only configured model: the system
+      // must always have one default (backend re-promotes on save), so
+      // unchecking would be a silent no-op. Force-checked + disabled makes
+      // the constraint visible without any extra copy.
+      const setDefaultCb = document.getElementById("model-modal-set-default");
+      const isOnlyModel = _models.length === 1;
+      setDefaultCb.checked = isOnlyModel ? true : (model.type === "default");
+      setDefaultCb.disabled = isOnlyModel;
 
       // Set provider dropdown value
       const matched = _findProviderByBaseUrl(model.base_url);
@@ -190,6 +203,9 @@ const Settings = (() => {
       // Default to checked for new models — most users want their first/new
       // model to take over as the default.
       document.getElementById("model-modal-set-default").checked = true;
+      // Reset disabled flag in case the previous open was edit-mode on the
+      // sole-model lock path.
+      document.getElementById("model-modal-set-default").disabled = false;
 
       // Reset provider dropdown
       _modalSelectedProviderId = null;
@@ -222,6 +238,30 @@ const Settings = (() => {
     document.body.style.overflow = "";
   }
 
+  function _openModalDuplicate(index) {
+    const source = _models[index];
+    if (!source) return;
+
+    _openModal(-1);
+
+    document.getElementById("model-modal-source-id").value = source.id || "";
+    document.getElementById("model-modal-title").textContent = I18n.t("settings.models.modal.duplicate");
+    document.getElementById("model-modal-model").value   = source.model    || "";
+    document.getElementById("model-modal-baseurl").value = source.base_url || "";
+    document.getElementById("model-modal-apikey").value  = source.api_key_masked || "";
+
+    const matched = _findProviderByBaseUrl(source.base_url);
+    _modalSelectedProviderId = matched ? matched.id : (source.anthropic_format ? "anthropic" : null);
+    const providerValue = document.getElementById("model-modal-provider-value");
+    if (matched) {
+      providerValue.textContent = matched.name;
+      providerValue.classList.remove("placeholder");
+
+      const promoHint = document.getElementById("model-modal-promo-hint");
+      if (matched.id !== "openclacky") promoHint.classList.remove("visible");
+    }
+  }
+
   function _populateModalProviderDropdown() {
     const dropdown = document.getElementById("model-modal-provider-dropdown");
     dropdown.innerHTML = `
@@ -323,13 +363,14 @@ const Settings = (() => {
     const isNew = index < 0;
     const existing = isNew ? {} : (_models[index] || {});
     const existingId = existing.id || null;
+    const sourceId = document.getElementById("model-modal-source-id").value || null;
 
     // Step 1: Test first
     saveBtn.textContent = I18n.t("settings.models.btn.testing");
     _showModalTestResult(null, "");
 
     const result = await ModelTester.testConnection({
-      model, base_url, api_key, index, id: existingId, anthropic_format
+      model, base_url, api_key, index, id: existingId || sourceId, anthropic_format
     });
 
     if (result.rewrote) {
@@ -365,10 +406,14 @@ const Settings = (() => {
     }
 
     if (!hasId && !payload.api_key) {
-      saveBtn.textContent = I18n.t("settings.models.btn.save");
-      saveBtn.disabled = false;
-      _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
-      return;
+      if (sourceId) {
+        payload.source_id = sourceId;
+      } else {
+        saveBtn.textContent = I18n.t("settings.models.btn.save");
+        saveBtn.disabled = false;
+        _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
+        return;
+      }
     }
 
     const saveResult = await ModelTester.saveModel(payload, { existingId: hasId ? existingId : null });
@@ -395,6 +440,25 @@ const Settings = (() => {
     el.className = `model-test-result ${ok ? "result-ok" : "result-fail"}`;
   }
 
+  function _positionDropdownFixed(dropdown, anchor) {
+    const rect = anchor.getBoundingClientRect();
+    dropdown.style.position = "fixed";
+    dropdown.style.top = (rect.bottom + 4) + "px";
+    dropdown.style.left = rect.left + "px";
+    dropdown.style.width = rect.width + "px";
+    dropdown.style.right = "auto";
+    dropdown.style.zIndex = "9999";
+  }
+
+  function _resetDropdownPosition(dropdown) {
+    dropdown.style.position = "";
+    dropdown.style.top = "";
+    dropdown.style.left = "";
+    dropdown.style.width = "";
+    dropdown.style.right = "";
+    dropdown.style.zIndex = "";
+  }
+
   function _initModal() {
     // Close button
     document.getElementById("model-modal-close").addEventListener("click", _closeModal);
@@ -448,34 +512,58 @@ const Settings = (() => {
     // Model dropdown functionality
     const modelDropdownBtn = document.getElementById("model-modal-model-dropdown-btn");
     const modelDropdown = document.getElementById("model-modal-model-dropdown");
+    const modelCombobox = document.getElementById("model-modal-model-combobox");
     const modelInput = document.getElementById("model-modal-model");
 
+    function _openModelDropdown() {
+      _closeBaseUrlDropdown();
+      _updateModalModelDropdown();
+      _positionDropdownFixed(modelDropdown, modelCombobox);
+      modelDropdown.style.display = "block";
+      document.body.appendChild(modelDropdown);
+    }
+
+    function _closeModelDropdown() {
+      modelDropdown.style.display = "none";
+      _resetDropdownPosition(modelDropdown);
+      modelCombobox.appendChild(modelDropdown);
+    }
+
     modelDropdownBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      const isOpen = modelDropdown.style.display === "block";
-      document.querySelectorAll(".model-name-dropdown, .base-url-dropdown").forEach(d => {
-        d.style.display = "none";
-      });
-      if (!isOpen) {
-        _updateModalModelDropdown();
-        modelDropdown.style.display = "block";
+      if (modelDropdown.style.display === "block") {
+        _closeModelDropdown();
+      } else {
+        _openModelDropdown();
       }
     });
 
     // Base URL dropdown functionality
     const baseUrlDropdownBtn = document.getElementById("model-modal-baseurl-dropdown-btn");
     const baseUrlDropdown = document.getElementById("model-modal-baseurl-dropdown");
+    const baseUrlCombobox = document.getElementById("model-modal-baseurl-combobox");
     const baseUrlInput = document.getElementById("model-modal-baseurl");
 
+    function _openBaseUrlDropdown() {
+      _closeModelDropdown();
+      _updateModalBaseUrlDropdown();
+      _positionDropdownFixed(baseUrlDropdown, baseUrlCombobox);
+      baseUrlDropdown.style.display = "block";
+      document.body.appendChild(baseUrlDropdown);
+    }
+
+    function _closeBaseUrlDropdown() {
+      baseUrlDropdown.style.display = "none";
+      _resetDropdownPosition(baseUrlDropdown);
+      baseUrlCombobox.appendChild(baseUrlDropdown);
+    }
+
     baseUrlDropdownBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      const isOpen = baseUrlDropdown.style.display === "block";
-      document.querySelectorAll(".model-name-dropdown, .base-url-dropdown").forEach(d => {
-        d.style.display = "none";
-      });
-      if (!isOpen) {
-        _updateModalBaseUrlDropdown();
-        baseUrlDropdown.style.display = "block";
+      if (baseUrlDropdown.style.display === "block") {
+        _closeBaseUrlDropdown();
+      } else {
+        _openBaseUrlDropdown();
       }
     });
 
@@ -484,10 +572,14 @@ const Settings = (() => {
       _updateModalModelDropdown();
     });
 
-    // Close all modal dropdowns on document click
-    document.addEventListener("click", () => {
-      modelDropdown.style.display = "none";
-      baseUrlDropdown.style.display = "none";
+    // Close dropdowns on outside click
+    document.addEventListener("mousedown", (e) => {
+      if (!modelCombobox.contains(e.target) && !modelDropdown.contains(e.target)) {
+        _closeModelDropdown();
+      }
+      if (!baseUrlCombobox.contains(e.target) && !baseUrlDropdown.contains(e.target)) {
+        _closeBaseUrlDropdown();
+      }
     });
   }
 
@@ -1463,22 +1555,24 @@ const Settings = (() => {
   // ── Init ──────────────────────────────────────────────────────────────────────
 
   function _initTabs() {
-    const tabs = document.querySelectorAll("#settings-tabs .settings-tab");
-    const contents = document.querySelectorAll("#settings-body .settings-tab-content");
-
-    tabs.forEach(tab => {
-      tab.addEventListener("click", () => {
-        const targetTab = tab.dataset.tab;
-
-        // Update tab buttons
-        tabs.forEach(t => t.classList.toggle("active", t.dataset.tab === targetTab));
-
-        // Update tab content panels
-        contents.forEach(c => {
-          const isActive = c.dataset.tabContent === targetTab;
-          c.classList.toggle("active", isActive);
-          c.style.display = isActive ? "" : "none";
-        });
+    const bar = document.getElementById("settings-tabs");
+    if (!bar) return;
+
+    // Delegated so extension tabs (mounted into the settings.tabs slot after
+    // this runs) switch correctly without re-binding.
+    bar.addEventListener("click", (e) => {
+      const tab = e.target.closest(".settings-tab");
+      if (!tab || !bar.contains(tab)) return;
+      const targetTab = tab.dataset.tab;
+      if (!targetTab) return;
+
+      document.querySelectorAll("#settings-tabs .settings-tab").forEach(t =>
+        t.classList.toggle("active", t.dataset.tab === targetTab));
+
+      document.querySelectorAll("#settings-body .settings-tab-content").forEach(c => {
+        const isActive = c.dataset.tabContent === targetTab;
+        c.classList.toggle("active", isActive);
+        c.style.display = isActive ? "" : "none";
       });
     });
   }