openclacky 1.5.11 → 1.5.13

data/lib/clacky/web/settings.js

@@ -12,6 +12,9 @@ const Settings = (() => {
   // backend's runtime inference decide.
   let _modalSelectedProviderId = null;
   let _modalProviderIsCustom = false;
+  let _apiFormatSelect = null;
+  let _providerSelect = null;
+  let _providerFilterSelect = null;
   // Live filter text for the model search box; empty = show all.
   let _modelSearchQuery = "";
   // Provider id selected in the model provider filter; empty = show all.
@@ -83,8 +86,10 @@ const Settings = (() => {
   }
 
   function _renderProviderFilter() {
-    const select = document.getElementById("model-provider-filter");
-    if (!select) return;
+    const wrap = document.getElementById("model-provider-filter");
+    if (!wrap) return;
+    const dropdown = wrap.querySelector(".custom-select-dropdown");
+    if (!dropdown) return;
 
     // Count models per provider bucket so the dropdown can sort by usage
     // (most-used providers first), with display name as a stable tiebreaker.
@@ -99,12 +104,13 @@ const Settings = (() => {
       }
     });
 
-    const prev = select.value;
-    select.innerHTML = "";
-    const all = document.createElement("option");
-    all.value = "";
+    const prev = _providerFilterSelect ? _providerFilterSelect.value : "";
+    dropdown.innerHTML = "";
+    const all = document.createElement("div");
+    all.className = "custom-select-option";
+    all.dataset.value = "";
     all.textContent = I18n.t("settings.models.filter.all");
-    select.appendChild(all);
+    dropdown.appendChild(all);
 
     [...names.entries()]
       .sort((a, b) => {
@@ -112,17 +118,18 @@ const Settings = (() => {
         return diff !== 0 ? diff : a[1].localeCompare(b[1]);
       })
       .forEach(([key, name]) => {
-        const opt = document.createElement("option");
-        opt.value = key;
+        const opt = document.createElement("div");
+        opt.className = "custom-select-option";
+        opt.dataset.value = key;
         opt.textContent = name;
-        select.appendChild(opt);
+        dropdown.appendChild(opt);
       });
 
     // Keep the current selection when it still exists, otherwise reset to All.
     if (prev && names.has(prev)) {
-      select.value = prev;
+      if (_providerFilterSelect) _providerFilterSelect.setValue(prev);
     } else {
-      select.value = "";
+      if (_providerFilterSelect) _providerFilterSelect.setValue("");
       _modelProviderFilter = "";
     }
   }
@@ -165,9 +172,14 @@ const Settings = (() => {
   function _getProvider(model) {
     // Prefer the saved provider_id (survives custom base_url edits) over
     // a reverse base_url lookup so the card always shows what the user picked.
-    return (model.provider_id
-      ? _providers.find(pr => pr.id === model.provider_id) || null
-      : null) || _findProviderByBaseUrl(model.base_url);
+    // "custom" is the persisted marker for user-added custom entries (also
+    // implied by an api_format override): neither should reverse-match a
+    // preset — the badge and website link must reflect the user's choice.
+    if (model.provider_id) {
+      return _providers.find(pr => pr.id === model.provider_id) || null;
+    }
+    if (model.api_format) return null;
+    return _findProviderByBaseUrl(model.base_url);
   }
 
   // Stable key used to bucket models by provider for the filter dropdown.
@@ -192,14 +204,28 @@ const Settings = (() => {
     }) || null;
   }
 
+  // Shared resolution for the provider dropdown (edit + duplicate).
+  // Priority: the persisted "custom" marker; saved preset provider_id;
+  // explicit api_format override (also marks custom — the override dropdown
+  // only exists in custom mode, and a base_url reverse lookup must not
+  // re-attach a preset here, because preset mode sends api_format:null on
+  // save and would silently drop the override); legacy base_url lookup;
+  // anthropic_format self-hosted proxy hint.
+  function _resolveModalProviderId(model) {
+    if (model.provider_id === "custom") return null;
+    if (model.provider_id) return model.provider_id;
+    if (model.api_format) return null;
+    const matched = _findProviderByBaseUrl(model.base_url);
+    if (matched) return matched.id;
+    return model.anthropic_format ? "anthropic" : null;
+  }
+
   function _renderCard(container, model, index) {
     const isDefault = model.type === "default";
     const isLite    = model.type === "lite";
-    // Prefer saved provider_id over base_url reverse-lookup so the card
-    // shows the correct provider even when the user has customised base_url.
-    const provider  = (model.provider_id
-      ? _providers.find(p => p.id === model.provider_id) || null
-      : null) || _findProviderByBaseUrl(model.base_url);
+    // Same resolution rule as _getProvider: saved provider_id wins, an
+    // api_format override marks custom, base_url lookup is legacy fallback.
+    const provider  = _getProvider(model);
     const providerName = _providerDisplayName(provider);
     const remark = (model.remark || "").trim();
     const websiteUrl   = provider && provider.website_url;
@@ -249,6 +275,7 @@ const Settings = (() => {
       </div>
       <div class="model-card-grid-footer">
         ${websiteUrl ? `<a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer" style="margin-left:auto">
+          <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="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
           ${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>` : ""}
@@ -294,7 +321,7 @@ const Settings = (() => {
       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-api-format").value = model.api_format || "";
+      if (_apiFormatSelect) _apiFormatSelect.setValue(model.api_format || "");
       document.getElementById("model-modal-default-field").style.display = "";
       // Lock the checkbox when this is the only configured model: the system
       // must always have one default (backend re-promotes on save), so
@@ -305,14 +332,10 @@ const Settings = (() => {
       setDefaultCb.checked = isOnlyModel ? true : (model.type === "default");
       setDefaultCb.disabled = isOnlyModel;
 
-      // Set provider dropdown value.
-      // Priority: 1) saved provider_id on the model record (explicit user choice,
-      // survives base_url edits); 2) reverse-lookup from base_url (legacy records
-      // without provider_id); 3) anthropic_format flag (self-hosted proxy hint).
-      const matched = _findProviderByBaseUrl(model.base_url);
-      const savedProviderId = model.provider_id || null;
-      const resolvedProviderId = savedProviderId ||
-        (matched ? matched.id : (model.anthropic_format ? "anthropic" : null));
+      // Set provider dropdown value (shared resolution: see
+      // _resolveModalProviderId). An api_format override marks custom so the
+      // override survives reopen+save instead of being silently dropped.
+      const resolvedProviderId = _resolveModalProviderId(model);
       _modalSelectedProviderId = resolvedProviderId;
       _modalProviderIsCustom = !resolvedProviderId;
       _syncApiFormatVisibility();
@@ -337,7 +360,7 @@ const Settings = (() => {
       document.getElementById("model-modal-apikey").value = "";
       document.getElementById("model-modal-remark").value = "";
       document.getElementById("model-modal-no-vision").checked = false;
-      document.getElementById("model-modal-api-format").value = "";
+      if (_apiFormatSelect) _apiFormatSelect.setValue("");
       document.getElementById("model-modal-default-field").style.display = "";
       // Default to checked for new models - most users want their first/new
       // model to take over as the default.
@@ -392,12 +415,16 @@ const Settings = (() => {
     document.getElementById("model-modal-baseurl").value = source.base_url || "";
     document.getElementById("model-modal-apikey").value  = source.api_key_masked || "";
     document.getElementById("model-modal-remark").value  = source.remark   || "";
+    if (_apiFormatSelect) _apiFormatSelect.setValue(source.api_format || "");
 
-    const matched = _findProviderByBaseUrl(source.base_url);
-    _modalSelectedProviderId = matched ? matched.id : (source.anthropic_format ? "anthropic" : null);
-    _modalProviderIsCustom = !_modalSelectedProviderId;
+    const resolvedProviderId = _resolveModalProviderId(source);
+    _modalSelectedProviderId = resolvedProviderId;
+    _modalProviderIsCustom = !resolvedProviderId;
     _syncApiFormatVisibility();
     const providerValue = document.getElementById("model-modal-provider-value");
+    const matched = resolvedProviderId
+      ? _providers.find(p => p.id === resolvedProviderId) || null
+      : null;
     if (matched) {
       providerValue.textContent = matched.name;
       providerValue.classList.remove("placeholder");
@@ -428,68 +455,18 @@ const Settings = (() => {
 
   function _populateModalProviderDropdown() {
     const dropdown = document.getElementById("model-modal-provider-dropdown");
+    // The provider list scrolls on its own while the "Custom" entry sits in
+    // a fixed footer area outside the scroll container, so it never scrolls.
     dropdown.innerHTML = `
-      <div class="custom-select-option" data-value="">${I18n.t("settings.models.placeholder.provider")}</div>
-      ${_providers.map(p => { const dn = _providerDisplayName(p); return `<div class="custom-select-option" data-value="${p.id}" data-label="${_esc(dn)}">${_esc(dn)}${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 class="custom-select-list">
+        <div class="custom-select-option" data-value="">${I18n.t("settings.models.placeholder.provider")}</div>
+        ${_providers.map(p => { const dn = _providerDisplayName(p); return `<div class="custom-select-option" data-value="${p.id}" data-label="${_esc(dn)}">${_esc(dn)}${p.id === "openclacky" ? ` <span class="provider-badge-recommended">${I18n.t("provider.recommended")}</span>` : ""}</div>`; }).join("")}
+      </div>
+      <div class="custom-select-option custom-select-option-custom" data-value="custom" data-label="${_esc(I18n.t("settings.models.custom"))}">
+        <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 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+        <span>${I18n.t("settings.models.custom")}</span>
+      </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();
-
-        // Track the picked provider so test/save can flag anthropic_format=true
-        // when the user explicitly picks Anthropic. Empty / "custom" → null.
-        _modalSelectedProviderId = (value && value !== "custom") ? value : null;
-        _modalProviderIsCustom = value === "custom";
-        _syncApiFormatVisibility();
-
-        const providerValue = document.getElementById("model-modal-provider-value");
-        providerValue.textContent = text;
-        providerValue.classList.toggle("placeholder", !value);
-        _syncRemarkField();
-
-        _closeProviderDropdown();
-
-        // 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);
-          }
-        } else {
-          // Selecting "custom" (or the placeholder) abandons the preset:
-          // clear leftover model/base_url so stale values never survive.
-          document.getElementById("model-modal-model").value = "";
-          document.getElementById("model-modal-baseurl").value = "";
-          document.getElementById("model-modal-apikey-link").style.display = "none";
-          setTimeout(() => _updateModalModelDropdown(), 0);
-        }
-      });
-    });
   }
 
   async function _testModel(index) {
@@ -527,7 +504,7 @@ const Settings = (() => {
     // Preset providers own their protocol routing; drop any override so the
     // backend falls back to preset + per-model resolution (overrides are a
     // custom-provider feature).
-    const api_format = _modalProviderIsCustom ? (document.getElementById("model-modal-api-format").value.trim() || null) : null;
+    const api_format = _modalProviderIsCustom ? ((_apiFormatSelect && _apiFormatSelect.value) || null) : null;
 
     saveBtn.disabled = true;
 
@@ -570,7 +547,10 @@ const Settings = (() => {
 
     const hasId = !!existingId;
 
-    const payload = { model, base_url, anthropic_format, api_format, provider_id: _modalSelectedProviderId || null };
+    // Persist the custom choice as provider_id:"custom" so reopening the
+    // modal (and the card badge) stays custom even when base_url matches a
+    // preset endpoint; null would fall into the legacy base_url reverse lookup.
+    const payload = { model, base_url, anthropic_format, api_format, provider_id: _modalProviderIsCustom ? "custom" : (_modalSelectedProviderId || null) };
     payload.remark = document.getElementById("model-modal-remark").value.trim();
     // Vision override only applies to custom (non-preset) providers — preset
     // capability tables live server-side. Checked → vision:false; unchecked →
@@ -644,25 +624,11 @@ const Settings = (() => {
   }
 
   function _openProviderDropdown() {
-    const wrapper = document.getElementById("model-modal-provider-wrapper");
-    const trigger = document.getElementById("model-modal-provider-trigger");
-    const dropdown = document.getElementById("model-modal-provider-dropdown");
-    _positionDropdownFixed(dropdown, wrapper);
-    dropdown.classList.add("open");
-    dropdown.style.display = "block";
-    trigger.classList.add("open");
-    document.body.appendChild(dropdown);
+    if (_providerSelect) _providerSelect.open();
   }
 
   function _closeProviderDropdown() {
-    const wrapper = document.getElementById("model-modal-provider-wrapper");
-    const trigger = document.getElementById("model-modal-provider-trigger");
-    const dropdown = document.getElementById("model-modal-provider-dropdown");
-    dropdown.classList.remove("open");
-    dropdown.style.display = "none";
-    trigger.classList.remove("open");
-    _resetDropdownPosition(dropdown);
-    wrapper.appendChild(dropdown);
+    if (_providerSelect) _providerSelect.close();
   }
 
   function _initModal() {
@@ -686,21 +652,63 @@ const Settings = (() => {
     });
 
     // Provider dropdown toggle (fixed-positioned like the model/base-url dropdowns)
-    const providerTrigger = document.getElementById("model-modal-provider-trigger");
-    providerTrigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const dropdown = document.getElementById("model-modal-provider-dropdown");
-      if (dropdown.classList.contains("open")) {
-        _closeProviderDropdown();
-      } else {
-        _openProviderDropdown();
+    _providerSelect = CustomSelect.init({
+      trigger: document.getElementById("model-modal-provider-trigger"),
+      dropdown: document.getElementById("model-modal-provider-dropdown"),
+      anchor: document.getElementById("model-modal-provider-wrapper"),
+      portal: true,
+      onSelect: function (value) {
+        // Track the picked provider so test/save can flag anthropic_format=true
+        // when the user explicitly picks Anthropic. Empty / "custom" → null.
+        _modalSelectedProviderId = (value && value !== "custom") ? value : null;
+        _modalProviderIsCustom = value === "custom";
+        _syncApiFormatVisibility();
+        _syncRemarkField();
+
+        // 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);
+          }
+        } else {
+          // Selecting "custom" (or the placeholder) abandons the preset:
+          // clear leftover model/base_url so stale values never survive.
+          document.getElementById("model-modal-model").value = "";
+          document.getElementById("model-modal-baseurl").value = "";
+          document.getElementById("model-modal-apikey-link").style.display = "none";
+          setTimeout(() => _updateModalModelDropdown(), 0);
+        }
       }
     });
 
-    // Close dropdowns on outside click
-    document.addEventListener("click", () => {
-      _closeProviderDropdown();
+    const apiFormatSelect = CustomSelect.init({
+      trigger: document.getElementById("model-modal-api-format-trigger"),
+      dropdown: document.getElementById("model-modal-api-format-dropdown"),
+      anchor: document.getElementById("model-modal-api-format-wrapper"),
+      portal: true
     });
+    _apiFormatSelect = apiFormatSelect;
 
     // Toggle API key visibility
     document.getElementById("model-modal-toggle-key").addEventListener("click", () => {
@@ -875,12 +883,9 @@ const Settings = (() => {
   }
 
   function _bindCardEvents(card, index) {
-    // Custom dropdown interactions
     const customSelectWrapper = card.querySelector(".custom-select-wrapper");
     const trigger = customSelectWrapper.querySelector(".custom-select-trigger");
     const dropdown = customSelectWrapper.querySelector(".custom-select-dropdown");
-    const valueSpan = trigger.querySelector(".custom-select-value");
-    const options = dropdown.querySelectorAll(".custom-select-option");
 
     // Initialize promo hint: only show for new cards (no existing model config)
     const quickSetupField = card.querySelector(".quick-setup-field");
@@ -892,44 +897,10 @@ const Settings = (() => {
       _showPromoHint(initialPromoHint);
     }
 
-    // Toggle dropdown
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const isOpen = dropdown.classList.contains("open");
-      // Close all other dropdowns
-      document.querySelectorAll(".custom-select-dropdown.open").forEach(d => {
-        d.classList.remove("open");
-        d.previousElementSibling.classList.remove("open");
-      });
-      if (!isOpen) {
-        dropdown.classList.add("open");
-        trigger.classList.add("open");
-      }
-    });
-
-    // Select option
-    options.forEach(option => {
-      option.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const value = option.dataset.value;
-        const text = option.dataset.label || option.textContent;
-        
-        // Update UI
-        valueSpan.textContent = text;
-        if (value) {
-          valueSpan.classList.remove("placeholder");
-        } else {
-          valueSpan.classList.add("placeholder");
-        }
-        
-        // Update selected state
-        options.forEach(opt => opt.classList.remove("selected"));
-        option.classList.add("selected");
-        
-        // Close dropdown
-        dropdown.classList.remove("open");
-        trigger.classList.remove("open");
-        
+    CustomSelect.init({
+      trigger: trigger,
+      dropdown: dropdown,
+      onSelect: function (value) {
         // Auto-fill model & base_url if a provider preset was selected
         const getApiKeyLink = card.querySelector(`.get-apikey-link[data-index="${index}"]`);
         const promoHint = card.querySelector(`.provider-promo-hint[data-index="${index}"]`);
@@ -961,13 +932,7 @@ const Settings = (() => {
           // Show promo hint when no provider selected (default state)
           if (promoHint) _showPromoHint(promoHint);
         }
-      });
-    });
-
-    // Close dropdown when clicking outside
-    document.addEventListener("click", () => {
-      dropdown.classList.remove("open");
-      trigger.classList.remove("open");
+      }
     });
 
     // Toggle API key visibility
@@ -1563,30 +1528,37 @@ const Settings = (() => {
   // ── Web Search ────────────────────────────────────────────────────────────────
 
   async function _initSearchSettings() {
-    const select  = document.getElementById("settings-search-provider");
+    const trigger  = document.getElementById("settings-search-provider-trigger");
+    const dropdown = document.getElementById("settings-search-provider-dropdown");
     const keyWrap = document.getElementById("search-key-wrap");
     const keyInput = document.getElementById("settings-search-key");
     const saveBtn = document.getElementById("btn-save-search");
     const testBtn = document.getElementById("btn-test-search");
     const status  = document.getElementById("settings-search-status");
-    if (!select || !saveBtn) return;
+    if (!dropdown || !saveBtn) return;
+
+    let select = dropdown.__customSelect;
+    if (!select && trigger) {
+      select = CustomSelect.init({
+        trigger: trigger,
+        dropdown: dropdown,
+        onSelect: function () { _syncKeyVisibility(); }
+      });
+    }
 
     function _syncKeyVisibility() {
-      keyWrap.style.display = select.value ? "" : "none";
+      keyWrap.style.display = (select && select.value) ? "" : "none";
     }
 
     try {
       const res  = await fetch("/api/config/search");
       const data = await res.json();
       if (data.ok) {
-        while (select.options.length > 1) select.remove(1);
-        (data.available || []).forEach((name) => {
-          const opt = document.createElement("option");
-          opt.value = name;
-          opt.textContent = name;
-          select.appendChild(opt);
-        });
-        select.value = data.provider || "";
+        const rows = (data.available || []).map(name =>
+          `<div class="custom-select-option" data-value="${_esc(name)}">${_esc(name)}</div>`).join("");
+        dropdown.innerHTML =
+          `<div class="custom-select-option" data-value="">${I18n.t("settings.search.builtin")}</div>` + rows;
+        if (select) select.setValue(data.provider || "");
         keyInput.value = data.key_masked || "";
       }
     } catch (_) { /* non-critical */ }
@@ -1597,11 +1569,6 @@ const Settings = (() => {
       status.className   = `model-test-result ${ok ? "success" : "error"}`;
     }
 
-    if (!select.dataset.bound) {
-      select.dataset.bound = "1";
-      select.addEventListener("change", _syncKeyVisibility);
-    }
-
     if (!saveBtn.dataset.bound) {
       saveBtn.dataset.bound = "1";
       saveBtn.addEventListener("click", async () => {
@@ -2579,10 +2546,17 @@ const Settings = (() => {
       _modelSearchQuery = e.target.value;
       _renderCards();
     });
-    document.getElementById("model-provider-filter").addEventListener("change", (e) => {
-      _modelProviderFilter = e.target.value;
-      _renderCards();
-    });
+    const providerFilterWrap = document.getElementById("model-provider-filter");
+    if (providerFilterWrap && window.CustomSelect) {
+      _providerFilterSelect = window.CustomSelect.init({
+        trigger: providerFilterWrap.querySelector(".custom-select-trigger"),
+        dropdown: providerFilterWrap.querySelector(".custom-select-dropdown"),
+        onSelect: (value) => {
+          _modelProviderFilter = value;
+          _renderCards();
+        }
+      });
+    }
     document.getElementById("btn-rerun-onboard").addEventListener("click", _rerunOnboard);
     document.getElementById("btn-browser-setup").addEventListener("click", _setupBrowser);
 

data/lib/clacky/web/skills.js

@@ -377,10 +377,8 @@ const SkillAC = (() => {
     const skill = _items[idx];
     if (!skill) return;
     _mruTouch(skill.name);
-    const input  = _inputEl();
-    input.value  = "/" + skill.name + " ";
-    input.style.height = "auto";
-    input.style.height = Math.min(input.scrollHeight, 200) + "px";
+    const input = _inputEl();
+    Composer.setText(input, "/" + skill.name + " ");
     _hide();
     input.focus();
   }
@@ -425,10 +423,9 @@ const SkillAC = (() => {
     $(cfg.slashBtn).addEventListener("click", () => {
       _cfg = cfg;
       const input = $(cfg.input);
-      if (input.value === "" || input.value === "/") {
-        input.value = "/";
-        input.style.height = "auto";
-        input.style.height = Math.min(input.scrollHeight, 200) + "px";
+      const value = Composer.text(input);
+      if (value === "" || value === "/") {
+        Composer.setText(input, "/");
       }
       _toggle();  // Toggle dropdown instead of always opening
       if (_visible) {
@@ -453,22 +450,19 @@ const SkillAC = (() => {
       }
     });
 
-    // Composer input: auto-grow textarea, normalize full-width slash, drive AC.
+    // Composer input: drive skill autocomplete; normalize full-width slash.
     $(cfg.input).addEventListener("input", () => {
       _cfg = cfg;
       const el = $(cfg.input);
-      el.style.height = "auto";
-      el.style.height = Math.min(el.scrollHeight, 200) + "px";
 
       // Replace full-width slash ／ or Chinese dunhao 、 with ASCII / in-place
-      if (/^[／、]/.test(el.value)) {
-        const pos = el.selectionStart;
-        el.value = el.value.replace(/^[／、]/, "/");
-        el.setSelectionRange(pos, pos);
+      const value = Composer.text(el);
+      if (/^[／、]/.test(value)) {
+        Composer.setText(el, value.replace(/^[／、]/, "/"));
       }
 
       // Trigger skill autocomplete
-      _update(el.value);
+      _update(Composer.text(el));
     });
 
     const chk = $(cfg.systemChk);
@@ -479,7 +473,7 @@ const SkillAC = (() => {
         _showSystemSkills = chk.checked;
         localStorage.setItem(SKILL_AC_SHOW_SYSTEM_KEY, _showSystemSkills ? "true" : "false");
         if (_visible) {
-          const query = _getSlashQuery($(cfg.input).value);
+          const query = _getSlashQuery(Composer.text($(cfg.input)));
           if (query !== null) await _render(query);
         }
       });