openclacky 1.1.6 → 1.2.0

data/lib/clacky/web/settings.js

@@ -13,6 +13,7 @@ const Settings = (() => {
     _load();
     _loadBrand();
     _loadBrowserStatus();
+    _applyAboutTabVisibility();
   }
 
   // ── Data Loading ────────────────────────────────────────────────────────────
@@ -50,112 +51,499 @@ const Settings = (() => {
     _models.forEach((m, i) => _renderCard(container, m, i));
   }
 
+  function _getProviderName(model) {
+    if (!model.base_url) return I18n.t("settings.models.provider.custom");
+    const url = model.base_url.trim().replace(/\/+$/, "");
+    const provider = _providers.find(p => {
+      const candidates = [p.base_url].concat(
+        Array.isArray(p.endpoint_variants) ? p.endpoint_variants.map(v => v.base_url) : []
+      ).filter(Boolean);
+      return candidates.some(c => {
+        const norm = String(c).replace(/\/+$/, "");
+        return url === norm || url.startsWith(norm + "/");
+      });
+    });
+    return provider ? provider.name : I18n.t("settings.models.provider.custom");
+  }
+
   function _renderCard(container, model, index) {
     const isDefault = model.type === "default";
     const isLite    = model.type === "lite";
+    const providerName = _getProviderName(model);
+    const displayName = model.model || I18n.t("settings.models.unnamed");
 
     const card = document.createElement("div");
-    card.className = "model-card";
+    card.className = "model-card-grid" + (isDefault ? " model-card-grid-default" : "");
     card.dataset.index = index;
 
-    // Build provider options
-    const providerOptions = _providers.map(p =>
-      `<option value="${p.id}">${p.name}</option>`
-    ).join("");
-
     card.innerHTML = `
-      <div class="model-card-header">
-        <div class="model-card-badges">
+      <div class="model-card-grid-info">
+        <div class="model-card-grid-name-row">
+          <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 && !isLite ? `<span class="badge badge-secondary">${I18n.t("settings.models.badge.model", { n: index + 1 })}</span>` : ""}
+          ${isLite ? `<span class="badge badge-lite">${I18n.t("settings.models.badge.lite")}</span>` : ""}
         </div>
-        <div class="model-card-actions">
-          ${_models.length > 1
-            ? `<button class="btn-model-remove" data-index="${index}" title="Remove this model">×</button>`
-            : ""}
+        <div class="model-card-grid-provider">${_esc(providerName)}</div>
+        ${model.model ? `<div class="model-card-grid-model">${_esc(model.model)}</div>` : ""}
+        <div class="model-card-grid-status">
+          <span class="model-test-result" data-index="${index}"></span>
         </div>
       </div>
-
-      <div class="model-fields">
-        <label class="model-field quick-setup-field" ${(model.model || model.base_url) ? 'style="display:none"' : ''}>
-          <span class="field-label">${I18n.t("settings.models.field.quicksetup")}</span>
-          <div class="custom-select-wrapper" data-index="${index}">
-            <div class="custom-select-trigger" tabindex="0">
-              <span class="custom-select-value placeholder">${I18n.t("settings.models.placeholder.provider")}</span>
-              <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-              </svg>
-            </div>
-            <div class="custom-select-dropdown">
-              <div class="custom-select-option" data-value="">${I18n.t("settings.models.placeholder.provider")}</div>
-              ${_providers.map(p => `<div class="custom-select-option" data-value="${p.id}" data-label="${_esc(p.name)}">${_esc(p.name)}${p.id === "openclacky" ? ` <span class="provider-badge-recommended">${I18n.t("provider.recommended")}</span>` : ""}</div>`).join("")}
-              <div class="custom-select-option" data-value="custom">${I18n.t("settings.models.custom")}</div>
-            </div>
-          </div>
-          <div class="provider-promo-hint" data-index="${index}"></div>
-        </label>
-        <label class="model-field">
-          <span class="field-label">${I18n.t("settings.models.field.model")}</span>
-          <div class="model-name-combobox" data-index="${index}">
-            <input type="text" class="field-input model-name-input" data-key="model" data-index="${index}"
-              placeholder="${I18n.t("settings.models.placeholder.model")}" value="${_esc(model.model)}"
-              autocomplete="off">
-            <button class="model-name-dropdown-btn" type="button" title="Select from presets">
-              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-              </svg>
-            </button>
-            <div class="model-name-dropdown" style="display:none"></div>
-          </div>
-        </label>
-        <label class="model-field">
-          <span class="field-label">${I18n.t("settings.models.field.baseurl")}</span>
-          <div class="base-url-combobox" data-index="${index}">
-            <input type="text" class="field-input base-url-input" data-key="base_url" data-index="${index}"
-              placeholder="${I18n.t("settings.models.placeholder.baseurl")}" value="${_esc(model.base_url)}"
-              autocomplete="off">
-            <button class="base-url-dropdown-btn" type="button" title="Select preset endpoint">
-              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-              </svg>
-            </button>
-            <div class="base-url-dropdown" style="display:none"></div>
-          </div>
-        </label>
-        <label class="model-field">
-          <span class="field-label">
-            ${I18n.t("settings.models.field.apikey")}
-            <a class="get-apikey-link" data-index="${index}" href="#" target="_blank" rel="noopener" style="display:none;margin-left:0.5rem;font-size:0.75rem;color:var(--accent,#6366f1);text-decoration:none;opacity:0.85;">${I18n.t("settings.models.field.getApiKey")}</a>
-          </span>
-          <div class="field-input-row">
-            <input type="password" class="field-input api-key-input" data-key="api_key" data-index="${index}"
-              placeholder="${I18n.t("settings.models.placeholder.apikey")}" value="${_esc(model.api_key_masked)}">
-            <button class="btn-toggle-key" data-index="${index}" title="Show/hide key">
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-              </svg>
-            </button>
-          </div>
-        </label>
-      </div>
-
-      <div class="model-card-footer">
-        ${!model.api_key_masked ? `<span class="model-card-docs-link" style="font-size:0.75rem;">
-          <span style="color:var(--muted,#6b7280);">${I18n.t("settings.models.field.docsGuide.question")}</span>
-          <a href="https://www.openclacky.com/docs/ai-key-guide" target="_blank" rel="noopener" style="margin-left:0.25rem;color:var(--accent,#6366f1);text-decoration:none;">${I18n.t("settings.models.field.docsGuide.cta")}</a>
-        </span>` : ""}
-        <span class="model-test-result" data-index="${index}"></span>
-        <div class="model-card-actions-row">
-          ${!isDefault ? `<button class="btn-set-default" data-index="${index}" title="${I18n.t("settings.models.btn.setDefault")}">${I18n.t("settings.models.btn.setDefault")}</button>` : ""}
-          <button class="btn-save-model btn-primary" data-index="${index}">${I18n.t("settings.models.btn.save")}</button>
-        </div>
+      <div class="model-card-grid-actions">
+        ${!isDefault ? `<button class="btn-card-grid-action" data-index="${index}" data-action="default" title="${I18n.t("settings.models.btn.setDefault")}">
+          <svg width="14" height="14" 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>` : ""}
+        <button class="btn-card-grid-action" data-index="${index}" data-action="test" title="${I18n.t("settings.models.btn.test")}">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+          <span>${I18n.t("settings.models.btn.test")}</span>
+        </button>
+        <button class="btn-card-grid-action" data-index="${index}" data-action="edit" title="${I18n.t("settings.models.btn.edit")}">
+          <svg width="14" height="14" 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>
+        ${_models.length > 1 ? `<button class="btn-card-grid-action btn-card-grid-action-danger" data-index="${index}" data-action="delete" title="${I18n.t("settings.models.btn.delete")}">
+          <svg width="14" height="14" 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>
+        </button>` : ""}
       </div>
     `;
 
     container.appendChild(card);
-    _bindCardEvents(card, index);
+    _bindCompactCardEvents(card, index);
+  }
+
+  function _bindCompactCardEvents(card, index) {
+    // Bind all action buttons using data-action attribute
+    card.querySelectorAll(".btn-card-grid-action").forEach(btn => {
+      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;
+        }
+      });
+    });
+  }
+
+  // ── Modal Functions ────────────────────────────────────────────────────────
+
+  function _openModal(index = -1) {
+    const modal = document.getElementById("model-edit-modal");
+    const titleEl = document.getElementById("model-modal-title");
+    const indexInput = document.getElementById("model-modal-index");
+
+    indexInput.value = index;
+
+    // Populate provider dropdown
+    _populateModalProviderDropdown();
+
+    if (index >= 0 && _models[index]) {
+      // Edit mode
+      const model = _models[index];
+      titleEl.textContent = I18n.t("settings.models.modal.edit");
+      document.getElementById("model-modal-model").value = model.model || "";
+      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 = "none";
+
+      // Set provider dropdown value
+      const providerName = _getProviderName(model);
+      const providerValue = document.getElementById("model-modal-provider-value");
+      providerValue.textContent = providerName;
+      providerValue.classList.remove("placeholder");
+    } else {
+      // Add mode
+      titleEl.textContent = I18n.t("settings.models.modal.add");
+      document.getElementById("model-modal-model").value = "";
+      document.getElementById("model-modal-baseurl").value = "";
+      document.getElementById("model-modal-apikey").value = "";
+      document.getElementById("model-modal-default-field").style.display = "";
+      document.getElementById("model-modal-set-default").checked = true;
+
+      // Reset provider dropdown
+      const providerValue = document.getElementById("model-modal-provider-value");
+      providerValue.textContent = I18n.t("settings.models.placeholder.provider");
+      providerValue.classList.add("placeholder");
+    }
+
+    // Clear test result
+    document.getElementById("model-modal-test-result").textContent = "";
+    document.getElementById("model-modal-test-result").className = "model-test-result";
+
+    // Show promo hint by default for new models
+    const promoHint = document.getElementById("model-modal-promo-hint");
+    _showPromoHint(promoHint);
+
+    modal.style.display = "";
+    document.body.style.overflow = "hidden";
+    document.getElementById("model-modal-provider-trigger").focus();
+  }
+
+  function _closeModal() {
+    const modal = document.getElementById("model-edit-modal");
+    modal.style.display = "none";
+    document.body.style.overflow = "";
+  }
+
+  function _populateModalProviderDropdown() {
+    const dropdown = document.getElementById("model-modal-provider-dropdown");
+    dropdown.innerHTML = `
+      <div class="custom-select-option" data-value="">${I18n.t("settings.models.placeholder.provider")}</div>
+      ${_providers.map(p => `<div class="custom-select-option" data-value="${p.id}" data-label="${_esc(p.name)}">${_esc(p.name)}${p.id === "openclacky" ? ` <span class="provider-badge-recommended">${I18n.t("provider.recommended")}</span>` : ""}</div>`).join("")}
+      <div class="custom-select-option" data-value="custom">${I18n.t("settings.models.custom")}</div>
+    `;
+
+    // Bind click events for options
+    dropdown.querySelectorAll(".custom-select-option").forEach(option => {
+      option.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const value = option.dataset.value;
+        const text = option.dataset.label || option.textContent.trim();
+
+        const providerValue = document.getElementById("model-modal-provider-value");
+        providerValue.textContent = text;
+        providerValue.classList.toggle("placeholder", !value);
+
+        dropdown.classList.remove("open");
+        document.getElementById("model-modal-provider-trigger").classList.remove("open");
+
+        // Show/hide promo hint
+        const promoHint = document.getElementById("model-modal-promo-hint");
+        if (value === "openclacky" || !value) {
+          _showPromoHint(promoHint);
+        } else {
+          promoHint.classList.remove("visible");
+        }
+
+        // Auto-fill if provider selected
+        if (value && value !== "custom") {
+          const preset = _providers.find(p => p.id === value);
+          if (preset) {
+            document.getElementById("model-modal-model").value = preset.default_model || "";
+            document.getElementById("model-modal-baseurl").value = preset.base_url || "";
+
+            const apikeyLink = document.getElementById("model-modal-apikey-link");
+            if (preset.website_url) {
+              apikeyLink.href = preset.website_url;
+              apikeyLink.style.display = "";
+            } else {
+              apikeyLink.style.display = "none";
+            }
+
+            // Update model dropdown with provider's models
+            setTimeout(() => _updateModalModelDropdown(), 0);
+          }
+        }
+      });
+    });
+  }
+
+  async function _testModel(index) {
+    const model = _models[index];
+    if (!model) return;
+
+    const testBtn = document.querySelector(`.btn-test-model[data-index="${index}"]`);
+    if (testBtn) testBtn.disabled = true;
+
+    _showTestResult(index, null, "");
+
+    try {
+      const testRes = await fetch("/api/config/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          model: model.model,
+          base_url: model.base_url,
+          api_key: model.api_key_masked,
+          index
+        })
+      });
+      const testData = await testRes.json();
+      _showTestResult(index, testData.ok, testData.message);
+    } catch (e) {
+      _showTestResult(index, false, e.message);
+    } finally {
+      if (testBtn) testBtn.disabled = false;
+    }
+  }
+
+  async function _saveModalModel() {
+    const saveBtn = document.getElementById("model-modal-save");
+    const index = parseInt(document.getElementById("model-modal-index").value, 10);
+
+    const model = document.getElementById("model-modal-model").value.trim();
+    const base_url = document.getElementById("model-modal-baseurl").value.trim();
+    const api_key = document.getElementById("model-modal-apikey").value.trim();
+
+    saveBtn.disabled = true;
+
+    // Step 1: Test first
+    saveBtn.textContent = I18n.t("settings.models.btn.testing");
+    _showModalTestResult(null, "");
+
+    try {
+      const testRes = await fetch("/api/config/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model, base_url, api_key, index })
+      });
+      const testData = await testRes.json();
+      _showModalTestResult(testData.ok, testData.message);
+
+      if (!testData.ok) {
+        saveBtn.textContent = I18n.t("settings.models.btn.save");
+        saveBtn.disabled = false;
+        return;
+      }
+    } catch (e) {
+      _showModalTestResult(false, e.message);
+      saveBtn.textContent = I18n.t("settings.models.btn.save");
+      saveBtn.disabled = false;
+      return;
+    }
+
+    // Step 2: Save
+    saveBtn.textContent = I18n.t("settings.models.btn.saving");
+
+    const isNew = index < 0;
+    const existing = isNew ? {} : (_models[index] || {});
+    const hasId = !!existing.id;
+
+    const payload = { model, base_url, anthropic_format: false };
+    if (isNew) {
+      if (document.getElementById("model-modal-set-default").checked) {
+        payload.type = "default";
+        _models.forEach(m => { if (m.type === "default") m.type = null; });
+      } else {
+        payload.type = null;
+      }
+    } else {
+      payload.type = existing.type;
+    }
+
+    if (api_key && !api_key.includes("****")) {
+      payload.api_key = api_key;
+    }
+
+    try {
+      let res, data;
+      if (hasId) {
+        res = await fetch(`/api/config/models/${encodeURIComponent(existing.id)}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        data = await res.json();
+      } else {
+        if (!payload.api_key) {
+          saveBtn.textContent = I18n.t("settings.models.btn.save");
+          saveBtn.disabled = false;
+          _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
+          return;
+        }
+        res = await fetch(`/api/config/models`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        data = await res.json();
+      }
+
+      if (data.ok) {
+        saveBtn.textContent = I18n.t("settings.models.btn.saved");
+        setTimeout(() => {
+          _closeModal();
+          _load();
+        }, 800);
+      } else {
+        saveBtn.textContent = I18n.t("settings.models.btn.save");
+        saveBtn.disabled = false;
+        _showModalTestResult(false, data.error || I18n.t("settings.models.saveFailed"));
+      }
+    } catch (e) {
+      saveBtn.textContent = I18n.t("settings.models.btn.save");
+      saveBtn.disabled = false;
+      _showModalTestResult(false, e.message);
+    }
+  }
+
+  function _showModalTestResult(ok, message) {
+    const el = document.getElementById("model-modal-test-result");
+    if (!el) return;
+    if (ok === null) { el.textContent = I18n.t("settings.models.btn.testing"); el.className = "model-test-result result-testing"; return; }
+    el.textContent = ok ? `✓ ${message || I18n.t("settings.models.connected")}` : `✗ ${I18n.t("settings.models.testFail")}: ${message || I18n.t("settings.models.failed")}`;
+    el.className = `model-test-result ${ok ? "result-ok" : "result-fail"}`;
+  }
+
+  function _initModal() {
+    // Close button
+    document.getElementById("model-modal-close").addEventListener("click", _closeModal);
+    document.getElementById("model-modal-cancel").addEventListener("click", _closeModal);
+
+    // Save button
+    document.getElementById("model-modal-save").addEventListener("click", _saveModalModel);
+
+    // Click overlay to close
+    document.getElementById("model-edit-modal").addEventListener("click", (e) => {
+      if (e.target.id === "model-edit-modal") _closeModal();
+    });
+
+    // ESC to close
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && document.getElementById("model-edit-modal").style.display !== "none") {
+        _closeModal();
+      }
+    });
+
+    // Provider dropdown toggle
+    const providerTrigger = document.getElementById("model-modal-provider-trigger");
+    const providerDropdown = document.getElementById("model-modal-provider-dropdown");
+    providerTrigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = providerDropdown.classList.contains("open");
+      document.querySelectorAll(".custom-select-dropdown.open").forEach(d => {
+        d.classList.remove("open");
+      });
+      if (!isOpen) {
+        providerDropdown.classList.add("open");
+        providerTrigger.classList.add("open");
+      } else {
+        providerDropdown.classList.remove("open");
+        providerTrigger.classList.remove("open");
+      }
+    });
+
+    // Close dropdowns on outside click
+    document.addEventListener("click", () => {
+      providerDropdown.classList.remove("open");
+      providerTrigger.classList.remove("open");
+    });
+
+    // Toggle API key visibility
+    document.getElementById("model-modal-toggle-key").addEventListener("click", () => {
+      const input = document.getElementById("model-modal-apikey");
+      input.type = input.type === "password" ? "text" : "password";
+    });
+
+    // Model dropdown functionality
+    const modelDropdownBtn = document.getElementById("model-modal-model-dropdown-btn");
+    const modelDropdown = document.getElementById("model-modal-model-dropdown");
+    const modelInput = document.getElementById("model-modal-model");
+
+    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";
+      }
+    });
+
+    // Base URL dropdown functionality
+    const baseUrlDropdownBtn = document.getElementById("model-modal-baseurl-dropdown-btn");
+    const baseUrlDropdown = document.getElementById("model-modal-baseurl-dropdown");
+    const baseUrlInput = document.getElementById("model-modal-baseurl");
+
+    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";
+      }
+    });
+
+    // Update model dropdown when base_url changes
+    baseUrlInput.addEventListener("blur", () => {
+      _updateModalModelDropdown();
+    });
+
+    // Close all modal dropdowns on document click
+    document.addEventListener("click", () => {
+      modelDropdown.style.display = "none";
+      baseUrlDropdown.style.display = "none";
+    });
+  }
+
+  function _getModalCurrentProvider() {
+    const baseUrlInput = document.getElementById("model-modal-baseurl");
+    const url = (baseUrlInput?.value || "").trim().replace(/\/+$/, "");
+    if (!url) return null;
+    return _providers.find(p => {
+      const candidates = [p.base_url].concat(
+        Array.isArray(p.endpoint_variants) ? p.endpoint_variants.map(v => v.base_url) : []
+      ).filter(Boolean);
+      return candidates.some(c => {
+        const norm = String(c).replace(/\/+$/, "");
+        return url === norm || url.startsWith(norm + "/");
+      });
+    }) || null;
+  }
+
+  function _updateModalModelDropdown() {
+    const modelDropdown = document.getElementById("model-modal-model-dropdown");
+    const modelInput = document.getElementById("model-modal-model");
+    const provider = _getModalCurrentProvider();
+    const models = provider?.models || [];
+
+    if (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("");
+
+    modelDropdown.querySelectorAll(".model-dropdown-option").forEach(opt => {
+      opt.addEventListener("click", (e) => {
+        e.stopPropagation();
+        modelInput.value = opt.dataset.value;
+        modelDropdown.style.display = "none";
+      });
+    });
+  }
+
+  function _updateModalBaseUrlDropdown() {
+    const baseUrlDropdown = document.getElementById("model-modal-baseurl-dropdown");
+    const baseUrlInput = document.getElementById("model-modal-baseurl");
+    const provider = _getModalCurrentProvider();
+    const variants = provider && Array.isArray(provider.endpoint_variants) ? provider.endpoint_variants : [];
+
+    if (variants.length === 0) {
+      baseUrlDropdown.innerHTML = `<div class="model-dropdown-empty">${I18n.t("settings.models.baseurl.noVariants")}</div>`;
+      return;
+    }
+
+    baseUrlDropdown.innerHTML = variants.map(v => {
+      const translated = v.label_key ? I18n.t(v.label_key) : null;
+      const labelText = (translated && translated !== v.label_key) ? translated : (v.label || v.base_url);
+      const label = _esc(labelText);
+      const url = _esc(v.base_url);
+      return `
+        <div class="model-dropdown-option base-url-dropdown-option" data-value="${url}">
+          <div class="base-url-dropdown-label">${label}</div>
+          <div class="base-url-dropdown-url">${url}</div>
+        </div>`;
+    }).join("");
+
+    baseUrlDropdown.querySelectorAll(".base-url-dropdown-option").forEach(opt => {
+      opt.addEventListener("click", (e) => {
+        e.stopPropagation();
+        baseUrlInput.value = opt.dataset.value;
+        baseUrlDropdown.style.display = "none";
+        _updateModalModelDropdown();
+      });
+    });
   }
 
   function _showPromoHint(promoHint) {
@@ -610,7 +998,7 @@ const Settings = (() => {
   function _showTestResult(index, ok, message) {
     const el = document.querySelector(`.model-test-result[data-index="${index}"]`);
     if (!el) return;
-    if (ok === null) { el.textContent = ""; el.className = "model-test-result"; return; }
+    if (ok === null) { el.textContent = I18n.t("settings.models.btn.testing"); el.className = "model-test-result result-testing"; return; }
     el.textContent = ok ? `✓ ${message || I18n.t("settings.models.connected")}` : `✗ ${I18n.t("settings.models.testFail")}: ${message || I18n.t("settings.models.failed")}`;
     el.className   = `model-test-result ${ok ? "result-ok" : "result-fail"}`;
   }
@@ -618,19 +1006,18 @@ const Settings = (() => {
   // ── Set as Default Model ───────────────────────────────────────────────────
 
   async function _setAsDefault(index) {
-    const btn = document.querySelector(`.btn-set-default[data-index="${index}"]`);
-    if (!btn) return;
-
+    const btn = document.querySelector(`.btn-card-grid-action[data-index="${index}"][data-action="default"]`);
     const target = _models[index];
     if (!target || !target.id) {
-      // Can only promote saved models. Locally-added unsaved cards have
-      // no id yet — user must save them first.
       alert(I18n.t("settings.models.setDefaultFailed"));
       return;
     }
 
-    btn.disabled    = true;
-    btn.textContent = I18n.t("settings.models.btn.setting");
+    if (btn) {
+      btn.disabled = true;
+      const span = btn.querySelector("span");
+      if (span) span.textContent = I18n.t("settings.models.btn.setting");
+    }
 
     try {
       const res = await fetch(`/api/config/models/${encodeURIComponent(target.id)}/default`, {
@@ -639,17 +1026,25 @@ const Settings = (() => {
       const data = await res.json();
 
       if (data.ok) {
-        btn.textContent = I18n.t("settings.models.btn.done");
-        // Reload to refresh the UI
+        if (btn) {
+          const span = btn.querySelector("span");
+          if (span) span.textContent = I18n.t("settings.models.btn.done");
+        }
         setTimeout(_load, 800);
       } else {
-        btn.textContent = I18n.t("settings.models.btn.setDefault");
-        btn.disabled    = false;
+        if (btn) {
+          btn.disabled = false;
+          const span = btn.querySelector("span");
+          if (span) span.textContent = I18n.t("settings.models.btn.setDefault");
+        }
         alert(data.error || I18n.t("settings.models.setDefaultFailed"));
       }
     } catch (e) {
-      btn.textContent = I18n.t("settings.models.btn.setDefault");
-      btn.disabled    = false;
+      if (btn) {
+        btn.disabled = false;
+        const span = btn.querySelector("span");
+        if (span) span.textContent = I18n.t("settings.models.btn.setDefault");
+      }
       alert(I18n.t("settings.models.errorPrefix") + e.message);
     }
   }
@@ -657,76 +1052,8 @@ const Settings = (() => {
   // ── Add / Remove model ───────────────────────────────────────────────────────
 
   function _addModel() {
-    // Locally append an empty card. No server call here — the new entry
-    // is persisted via POST /api/config/models only when the user clicks
-    // "Save" (inside _saveModel). This means typing into a half-filled
-    // new card can never mutate the real config on the backend.
-    //
-    // UX convention: a newly added model becomes the "default" once
-    // saved — users overwhelmingly add a new model because they want to
-    // use it. We mark it default locally for the preview, and flip the
-    // other cards' type to null so the UI only shows one default badge.
-    // The backend enforces the single-default invariant on save anyway.
-    _models.forEach(m => { if (m.type === "default") m.type = null; });
-    _models.push({
-      id:               null,   // will be assigned by server on first save
-      index:            _models.length,
-      model:            "",
-      base_url:         "",
-      api_key_masked:   "",
-      anthropic_format: false,
-      type:             "default"
-    });
-    _renderCards();
-
-    // Scroll the new (last) card into view.
-    //
-    // Why not just scrollIntoView: the settings panel uses #settings-body
-    // as a flex scroll container. When the page hasn't overflowed yet,
-    // scrollIntoView is a no-op; and across browsers the "smooth" path
-    // has been flaky when the scrolling element is a flex child.
-    //
-    // Two rAFs ensure the freshly rendered card has been laid out before
-    // we compute its position.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        const container = document.getElementById("settings-body");
-        if (!container) return;
-        const cards = container.querySelectorAll(".model-card");
-        const last  = cards[cards.length - 1];
-        if (!last) return;
-
-        // Align the new card's top with the container's top, minus a
-        // small breathing-room offset so it doesn't touch the edge.
-        // offsetTop is relative to the nearest positioned ancestor, so
-        // we compute position via getBoundingClientRect delta — robust
-        // regardless of the card's offsetParent chain.
-        const OFFSET = 16;
-        const delta  = last.getBoundingClientRect().top
-                     - container.getBoundingClientRect().top;
-        container.scrollTo({
-          top:      container.scrollTop + delta - OFFSET,
-          behavior: "smooth"
-        });
-
-        // Put focus on the new card so the user can start configuring.
-        // Priority order:
-        //   1. The provider `.custom-select-trigger` — nudges the user to
-        //      pick a provider first (step 1 of the 3-field form). It's a
-        //      div with tabindex="0", so it gets the accent border via
-        //      `:focus` without expanding the dropdown.
-        //   2. Fall back to the first form input (used when the quick-setup
-        //      field is hidden, e.g. on a model card that already has values).
-        const providerTrigger = last.querySelector(".custom-select-wrapper .custom-select-trigger");
-        const isVisible = el => el && el.offsetParent !== null;
-        if (isVisible(providerTrigger)) {
-          providerTrigger.focus({ preventScroll: true });
-        } else {
-          const firstInput = last.querySelector("input, select, textarea");
-          if (firstInput) firstInput.focus({ preventScroll: true });
-        }
-      });
-    });
+    // Open modal in add mode (index = -1)
+    _openModal(-1);
   }
 
   async function _removeModel(index) {
@@ -1058,6 +1385,52 @@ 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";
+        });
+      });
+    });
+  }
+
+  function _applyAboutTabVisibility() {
+    const branded  = typeof Brand !== "undefined" && Brand.branded;
+    const tabBtn   = document.querySelector('#settings-tabs .settings-tab[data-tab="about"]');
+    const tabPanel = document.querySelector('#settings-body .settings-tab-content[data-tab-content="about"]');
+    if (!tabBtn || !tabPanel) return;
+
+    if (branded) {
+      tabBtn.style.display = "none";
+      if (tabBtn.classList.contains("active")) {
+        tabBtn.classList.remove("active");
+        tabPanel.classList.remove("active");
+        tabPanel.style.display = "none";
+        const fallback = document.querySelector('#settings-tabs .settings-tab[data-tab="models"]');
+        const fallbackPanel = document.querySelector('#settings-body .settings-tab-content[data-tab-content="models"]');
+        if (fallback) fallback.classList.add("active");
+        if (fallbackPanel) {
+          fallbackPanel.classList.add("active");
+          fallbackPanel.style.display = "";
+        }
+      }
+    } else {
+      tabBtn.style.display = "";
+    }
+  }
+
   function _initLangBtns() {
     // Highlight the active language button on open
     document.querySelectorAll("#language-section .settings-lang-btn").forEach(btn => {
@@ -1071,7 +1444,70 @@ const Settings = (() => {
     });
   }
 
+  // ── Advanced Settings ────────────────────────────────────────────────────────
+
+  async function _loadAdvancedSettings() {
+    try {
+      const res = await fetch("/api/config/settings");
+      const data = await res.json();
+      if (data.ok) {
+        const comp = document.getElementById("settings-compression-toggle");
+        const cache = document.getElementById("settings-prompt-caching-toggle");
+        const mem = document.getElementById("settings-memory-update-toggle");
+        if (comp) comp.checked = data.enable_compression !== false;
+        if (cache) cache.checked = data.enable_prompt_caching !== false;
+        if (mem) mem.checked = data.memory_update_enabled !== false;
+      }
+    } catch (e) {
+      console.error("Failed to load advanced settings:", e);
+    }
+  }
+
+  async function _saveAdvancedSetting(key, value) {
+    try {
+      await fetch("/api/config/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ [key]: value })
+      });
+    } catch (e) {
+      console.error("Failed to save setting:", e);
+    }
+  }
+
+  function _initAdvancedSettings() {
+    _loadAdvancedSettings();
+    document.getElementById("settings-compression-toggle")?.addEventListener("change", (e) => {
+      _saveAdvancedSetting("enable_compression", e.target.checked);
+    });
+    document.getElementById("settings-prompt-caching-toggle")?.addEventListener("change", (e) => {
+      _saveAdvancedSetting("enable_prompt_caching", e.target.checked);
+    });
+    document.getElementById("settings-memory-update-toggle")?.addEventListener("change", (e) => {
+      _saveAdvancedSetting("memory_update_enabled", e.target.checked);
+    });
+  }
+
+  // ── About Tab ───────────────────────────────────────────────────────────────
+
+  async function _loadAboutInfo() {
+    try {
+      const res = await fetch("/api/version");
+      const data = await res.json();
+      if (data.current) {
+        const el = document.getElementById("about-version");
+        if (el) el.textContent = `v${data.current}`;
+      }
+    } catch (e) {
+      console.error("Failed to load version info:", e);
+    }
+  }
+
   function init() {
+    _initTabs();
+    _initModal();
+    _initAdvancedSettings();
+    _loadAboutInfo();
     document.getElementById("btn-add-model").addEventListener("click", _addModel);
     document.getElementById("btn-rerun-onboard").addEventListener("click", _rerunOnboard);
     document.getElementById("btn-browser-setup").addEventListener("click", _setupBrowser);
@@ -1142,11 +1578,87 @@ const Settings = (() => {
 
     _initLangBtns();
     _initFontBtns();
+    _initCurrencyBtns();
 
     // Re-render model cards when language changes (dynamic HTML, not data-i18n)
     document.addEventListener("langchange", () => _renderCards());
   }
 
+  // ── Currency ──────────────────────────────────────────────────────────
+  const CURRENCY_STORAGE_KEY = "clacky-currency";
+  const EXCHANGE_RATE_STORAGE_KEY = "clacky-exchange-rate";
+  const CURRENCY_DEFAULT     = "USD";
+  const DEFAULT_EXCHANGE_RATE = 6.7944;
+
+  function _applyCurrency(currency) {
+    try { localStorage.setItem(CURRENCY_STORAGE_KEY, currency); } catch (_) {}
+    // Update active state on all currency buttons
+    document.querySelectorAll("#currency-section .settings-lang-btn").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.currency === currency);
+    });
+    // Show/hide exchange rate input based on currency
+    const exchangeRateSection = document.getElementById("exchange-rate-section");
+    if (exchangeRateSection) {
+      exchangeRateSection.style.display = currency === "CNY" ? "block" : "none";
+    }
+    // Dispatch event for billing panel to update
+    document.dispatchEvent(new CustomEvent("currencychange", { detail: { currency } }));
+  }
+
+  function _getExchangeRate() {
+    try {
+      const rate = localStorage.getItem(EXCHANGE_RATE_STORAGE_KEY);
+      if (rate) {
+        const parsed = parseFloat(rate);
+        if (!isNaN(parsed) && parsed > 0) return parsed;
+      }
+    } catch (_) {}
+    return DEFAULT_EXCHANGE_RATE;
+  }
+
+  function _setExchangeRate(rate) {
+    try {
+      if (rate && !isNaN(rate) && rate > 0) {
+        localStorage.setItem(EXCHANGE_RATE_STORAGE_KEY, rate.toString());
+        document.dispatchEvent(new CustomEvent("currencychange"));
+      }
+    } catch (_) {}
+  }
+
+  function _initCurrencyBtns() {
+    // Apply saved preference (or default) on page load
+    let saved = null;
+    try { saved = localStorage.getItem(CURRENCY_STORAGE_KEY); } catch (_) {}
+    const current = saved || CURRENCY_DEFAULT;
+
+    // Wire up button clicks
+    document.querySelectorAll("#currency-section .settings-lang-btn").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.currency === current);
+      btn.addEventListener("click", () => {
+        _applyCurrency(btn.dataset.currency);
+      });
+    });
+
+    // Initialize exchange rate input
+    const exchangeRateInput = document.getElementById("settings-exchange-rate");
+    const exchangeRateSection = document.getElementById("exchange-rate-section");
+    if (exchangeRateInput && exchangeRateSection) {
+      // Set initial value
+      exchangeRateInput.value = _getExchangeRate();
+      // Show/hide based on current currency
+      exchangeRateSection.style.display = current === "CNY" ? "block" : "none";
+      // Handle input changes
+      exchangeRateInput.addEventListener("change", () => {
+        const rate = parseFloat(exchangeRateInput.value);
+        if (!isNaN(rate) && rate > 0) {
+          _setExchangeRate(rate);
+        } else {
+          exchangeRateInput.value = _getExchangeRate();
+        }
+      });
+    }
+  }
+
   // ── Font Size ──────────────────────────────────────────────────────────
   const FONT_STORAGE_KEY = "clacky-font-size";
   const FONT_DEFAULT     = "medium";