openclacky 1.0.0 → 1.0.2

data/lib/clacky/web/settings.js

@@ -110,8 +110,17 @@ const Settings = (() => {
         </label>
         <label class="model-field">
           <span class="field-label">${I18n.t("settings.models.field.baseurl")}</span>
-          <input type="text" class="field-input" data-key="base_url" data-index="${index}"
-            placeholder="${I18n.t("settings.models.placeholder.baseurl")}" value="${_esc(model.base_url)}">
+          <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">
@@ -267,10 +276,21 @@ const Settings = (() => {
     // Build model list from current base_url's provider
     const _updateModelDropdown = () => {
       const baseUrlInput = card.querySelector(`[data-key="base_url"]`);
-      const baseUrl = baseUrlInput ? baseUrlInput.value.trim() : "";
-      
-      // Find provider by base_url
-      const provider = _providers.find(p => p.base_url === baseUrl);
+      const baseUrl = baseUrlInput ? baseUrlInput.value.trim().replace(/\/+$/, "") : "";
+
+      // Find provider by matching base_url against BOTH the canonical
+      // preset.base_url AND every endpoint_variants[].base_url — otherwise
+      // picking e.g. GLM's Coding-Plan variant would wipe the model list
+      // because only the canonical URL would match.
+      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 baseUrl === norm || baseUrl.startsWith(norm + "/");
+        });
+      });
       const models = provider?.models || [];
 
       if (models.length === 0) {
@@ -322,6 +342,107 @@ const Settings = (() => {
         _updateModelDropdown();
       });
     }
+
+    // Base URL combobox: dropdown button + endpoint_variants list.
+    //
+    // Rationale: some providers (GLM on Zhipu/Z.ai, MiniMax on .com/.io) run
+    // multiple regional / billing-plan endpoints under a single identity.
+    // Listing every variant lets the user pick the right one instead of
+    // hand-editing the URL, while still allowing free-form input for
+    // unknown / self-hosted proxies. Mirrors the model-name combobox.
+    //
+    // Data source: the endpoint_variants[] field on each provider preset,
+    // resolved by matching the currently-entered base_url against every
+    // preset's {base_url + endpoint_variants[].base_url}. When no variants
+    // are declared for the matched provider (single-endpoint providers like
+    // Anthropic, OpenClacky), the dropdown shows an "empty" hint.
+    const baseUrlCombobox   = card.querySelector(".base-url-combobox");
+    const baseUrlDropdownBtn = baseUrlCombobox.querySelector(".base-url-dropdown-btn");
+    const baseUrlDropdown   = baseUrlCombobox.querySelector(".base-url-dropdown");
+
+    // Resolve the "active" provider preset from the current form values:
+    // 1. If the Quick Setup select points at a known provider, use that
+    //    (even before the base_url input is typed into).
+    // 2. Otherwise fall back to matching the current base_url against all
+    //    preset base_url + endpoint_variants. Unknown URLs → null.
+    const _currentProvider = () => {
+      const selected = card.querySelector(".custom-select-option.selected");
+      const selectedId = selected?.dataset.value;
+      if (selectedId && selectedId !== "custom") {
+        const byId = _providers.find(p => p.id === selectedId);
+        if (byId) return byId;
+      }
+      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;
+    };
+
+    const _renderBaseUrlDropdown = () => {
+      const provider = _currentProvider();
+      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 => {
+        // Prefer i18n key (localised per UI language); fall back to literal
+        // `label` (shipped English copy) and finally to base_url for safety.
+        // Pattern: _translateVariant(v) -> "大陆 · 按量付费" in zh, "Mainland · Pay-as-you-go" in en.
+        const translated = v.label_key ? I18n.t(v.label_key) : null;
+        // I18n.t typically returns the key itself when missing — treat that as a miss.
+        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();
+          if (baseUrlInput) {
+            baseUrlInput.value = opt.dataset.value;
+            // Trigger model-list refresh since base_url just changed.
+            _updateModelDropdown();
+          }
+          baseUrlDropdown.style.display = "none";
+        });
+      });
+    };
+
+    baseUrlDropdownBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = baseUrlDropdown.style.display === "block";
+      // Close sibling dropdowns (model-name + other base-url) to avoid overlap.
+      document.querySelectorAll(".model-name-dropdown, .base-url-dropdown").forEach(d => {
+        d.style.display = "none";
+      });
+      if (!isOpen) {
+        _renderBaseUrlDropdown();
+        baseUrlDropdown.style.display = "block";
+      }
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", () => {
+      baseUrlDropdown.style.display = "none";
+    });
   }
 
   // ── Read form values from a card ────────────────────────────────────────────

data/lib/clacky/web/sidebar.js

@@ -0,0 +1,39 @@
+// ── sidebar.js — Left sidebar navigation ──────────────────────────────────
+//
+// Owns ONLY the left-rail navigation buttons whose sole job is to switch
+// the main router view. Any "business action" button that happens to live
+// in the sidebar (e.g. "new session") belongs to its own domain module
+// (Sessions, Skills, …), not here.
+//
+// Contract:
+//   Sidebar.init()   — attach click handlers. Must be called after DOM ready.
+// ──────────────────────────────────────────────────────────────────────────
+
+const Sidebar = (() => {
+  function init() {
+    // Settings button toggles between "settings" and "welcome" view.
+    document.getElementById("btn-settings").addEventListener("click", () => {
+      if (Router.current === "settings") {
+        Router.navigate("welcome");
+      } else {
+        Router.navigate("settings");
+      }
+    });
+
+    // Primary navigation items — each just swaps the current route.
+    document.getElementById("tasks-sidebar-item").addEventListener("click", () => Router.navigate("tasks"));
+    document.getElementById("skills-sidebar-item").addEventListener("click", () => Router.navigate("skills"));
+    document.getElementById("channels-sidebar-item").addEventListener("click", () => Router.navigate("channels"));
+    document.getElementById("trash-sidebar-item").addEventListener("click", () => Router.navigate("trash"));
+    document.getElementById("profile-sidebar-item").addEventListener("click", () => Router.navigate("profile"));
+
+    // memories-sidebar-item is retained as a hidden legacy placeholder — no click handler.
+
+    // creator-sidebar-item is conditionally rendered (only when user_licensed).
+    // This ?. is a legitimate business guard, not defensive padding — the
+    // element genuinely may not exist in the DOM for unlicensed users.
+    document.getElementById("creator-sidebar-item")?.addEventListener("click", () => Router.navigate("creator"));
+  }
+
+  return { init };
+})();

data/lib/clacky/web/skills.js

@@ -764,3 +764,463 @@ const Skills = (() => {
     },
   };
 })();
+
+// ─────────────────────────────────────────────────────────────────────────
+// SkillAC — slash-command skill autocomplete dropdown + composer bindings
+//
+// Handles the "/xxx" slash-command autocomplete UI above the message input,
+// plus all composer keyboard/composition/input DOM bindings that depend on it
+// (Enter to send, / button, IME composition guard).
+//
+// Moved verbatim from app.js; structural changes only:
+//   - `_lastCompositionEndTime` moved into the IIFE closure (was module-level)
+//   - The bare DOM bindings (btn-slash, user-input keydown/input/compositionend,
+//     btn-create-skill, btn-import-skill) are wrapped in a private
+//     `_initDOMBindings()` function called at the end of `init()`.
+//
+// Depends on: Sessions (sendMessage), Skills (createInSession, toggleImportBar),
+//             I18n, global $ helper.
+// ─────────────────────────────────────────────────────────────────────────
+const SkillAC = (() => {
+  let _initialized    = false;
+  let _visible        = false;
+  let _activeIndex    = -1;
+  let _items          = [];  // filtered [{ name, description, encrypted, source }]
+  let _currentSession = null; // track active session id for live fetch
+
+  // Load from localStorage, default to false (hide system skills)
+  let _showSystemSkills = localStorage.getItem("skill-ac-show-system") === "true";
+
+  // Cross-browser IME composition fix:
+  // Safari fires compositionend BEFORE keydown (violating W3C spec), and the
+  // gap between compositionend and keydown is ~5ms on Safari. We record the
+  // timestamp of compositionend and treat any Enter keydown within 20ms as
+  // still-composing. Chrome is unaffected because e.isComposing is still true.
+  // Reference: https://bugs.webkit.org/show_bug.cgi?id=165004
+  let _lastCompositionEndTime = -Infinity;
+
+  /** Called whenever the active session changes — just store the id, no prefetch. */
+  function _loadForSession(sessionId) {
+    _currentSession = sessionId || null;
+  }
+
+  /** Fetch live skill list from server for the current session. */
+  async function _fetchSkills() {
+    if (!_currentSession) return [];
+    try {
+      const res  = await fetch(`/api/sessions/${_currentSession}/skills`);
+      const data = await res.json();
+      return data.skills || [];
+    } catch (e) {
+      console.error("[SkillAC] fetchSkills failed", e);
+      return [];
+    }
+  }
+
+  /** Return the /xxx prefix if the entire input is a slash command, else null. */
+  function _getSlashQuery(value) {
+    // Full-width slash / dunhao are already replaced in the input event handler,
+    // but guard here too in case value is passed programmatically.
+    let trimmed = value.replace(/^[／、]/, "/");
+
+    // Only activate when the whole input starts with / (no leading space)
+    if (!trimmed.startsWith("/")) return null;
+    // Only single-word slash token — no spaces allowed after /
+    if (/^\/\S*$/.test(trimmed)) return trimmed.slice(1).toLowerCase();
+    return null;
+  }
+
+  /**
+   * Score how well a skill matches the query string.
+   * Only matches against name and name_zh — description is intentionally excluded.
+   * All matches are contiguous substring matches (no fuzzy/subsequence).
+   * Returns 0 if no match (should be filtered out).
+   *
+   * Scoring tiers:
+   *   100 — name or name_zh exact match
+   *    80 — name or name_zh starts-with
+   *    60 — name or name_zh contains
+   *     0 — no match
+   */
+  function _scoreMatch(skill, query) {
+    if (!query) return 50; // empty query → show all with neutral score
+
+    const q    = query.toLowerCase();
+    const name = (skill.name || "").toLowerCase();
+    const zh   = (skill.name_zh || "").toLowerCase();
+
+    // Exact match
+    if (name === q || zh === q) return 100;
+
+    // Prefix match
+    if (name.startsWith(q) || zh.startsWith(q)) return 80;
+
+    // Contains match (contiguous substring)
+    if (name.includes(q) || zh.includes(q)) return 60;
+
+    return 0;
+  }
+
+  /**
+   * Wrap the matching substring in <mark> for highlighting.
+   * Returns an array of DOM nodes (text + mark nodes).
+   */
+  function _highlight(text, query) {
+    if (!query) return [document.createTextNode(text)];
+    const idx = text.toLowerCase().indexOf(query.toLowerCase());
+    if (idx === -1) return [document.createTextNode(text)];
+
+    const nodes = [];
+    if (idx > 0) nodes.push(document.createTextNode(text.slice(0, idx)));
+    const mark = document.createElement("span");
+    mark.className = "skill-ac-highlight";
+    mark.textContent = text.slice(idx, idx + query.length);
+    nodes.push(mark);
+    if (idx + query.length < text.length) {
+      nodes.push(document.createTextNode(text.slice(idx + query.length)));
+    }
+    return nodes;
+  }
+
+  async function _render(query) {
+    const all = await _fetchSkills();
+
+    // Score and filter
+    let scored = all
+      .map(s => ({ skill: s, score: _scoreMatch(s, query) }))
+      .filter(({ score }) => score > 0);
+
+    if (!_showSystemSkills) {
+      scored = scored.filter(({ skill }) => skill.source_type !== "default");
+    }
+
+    // Sort by score descending, stable secondary sort by name
+    scored.sort((a, b) => b.score - a.score || a.skill.name.localeCompare(b.skill.name));
+
+    _items = scored.map(({ skill }) => skill);
+
+    const list = $("skill-autocomplete-list");
+    list.innerHTML = "";
+
+    if (_items.length === 0) {
+      // Show empty state instead of hiding the dropdown
+      const emptyEl = document.createElement("div");
+      emptyEl.className = "skill-ac-empty";
+      emptyEl.textContent = I18n.t("skills.ac.empty");
+      list.appendChild(emptyEl);
+      $("skill-autocomplete").style.display = "";
+      _visible = true;
+      _createOverlay();
+      return;
+    }
+
+    _items.forEach((skill, idx) => {
+      const item = document.createElement("div");
+      item.className = "skill-ac-item" + (idx === _activeIndex ? " active" : "");
+      item.setAttribute("role", "option");
+      item.setAttribute("data-idx", idx);
+
+      const nameEl = document.createElement("span");
+      nameEl.className = "skill-ac-name";
+
+      const currentLangForName = I18n.lang();
+      const showZhFirst = currentLangForName === "zh" && skill.name_zh;
+
+      if (showZhFirst) {
+        // Chinese UI: /中文名 first (with slash), then english id (no slash) after
+        const zhEl = document.createElement("span");
+        zhEl.className = "skill-ac-name-zh";
+        zhEl.appendChild(document.createTextNode("/"));
+        _highlight(skill.name_zh, query).forEach(function(n) { zhEl.appendChild(n); });
+        nameEl.appendChild(zhEl);
+
+        const nameTextEl = document.createElement("span");
+        nameTextEl.className = "skill-ac-name-id";
+        _highlight(skill.name, query).forEach(function(n) { nameTextEl.appendChild(n); });
+        nameEl.appendChild(nameTextEl);
+      } else {
+        // English UI (or no zh name): show /id only, no zh name
+        const nameTextEl = document.createElement("span");
+        nameTextEl.appendChild(document.createTextNode("/"));
+        _highlight(skill.name, query).forEach(function(n) { nameTextEl.appendChild(n); });
+        nameEl.appendChild(nameTextEl);
+      }
+
+      // meta: encrypted badge + source type label (subtle)
+      const metaEl = document.createElement("span");
+      metaEl.className = "skill-ac-meta";
+      if (skill.encrypted) {
+        const encBadge = document.createElement("span");
+        encBadge.className = "skill-ac-enc";
+        encBadge.textContent = "🔒";
+        metaEl.appendChild(encBadge);
+      }
+      const sourceLabel = {
+        "default":        "built-in",
+        "global_clacky":  "user",
+        "global_claude":  "user",
+        "project_clacky": "project",
+        "project_claude": "project",
+        "brand":          "brand",
+      }[skill.source_type];
+      if (sourceLabel) {
+        const srcEl = document.createElement("span");
+        srcEl.className = "skill-ac-src";
+        srcEl.textContent = sourceLabel;
+        metaEl.appendChild(srcEl);
+      }
+
+      const descEl = document.createElement("span");
+      descEl.className = "skill-ac-desc";
+      // Choose description based on current language
+      const description = (currentLangForName === "zh" && skill.description_zh)
+                          ? skill.description_zh
+                          : skill.description || "";
+      descEl.textContent = description;
+
+      item.appendChild(nameEl);
+      item.appendChild(metaEl);
+      item.appendChild(descEl);
+
+      item.addEventListener("mousedown", e => {
+        // mousedown fires before blur — prevent input losing focus
+        e.preventDefault();
+        _select(idx);
+      });
+
+      list.appendChild(item);
+    });
+
+    $("skill-autocomplete").style.display = "";
+    _visible = true;
+    _createOverlay();
+  }
+
+  function _hide() {
+    $("skill-autocomplete").style.display = "none";
+    _visible     = false;
+    _activeIndex = -1;
+    _items       = [];
+    $("btn-slash")?.classList.remove("active");
+    _removeOverlay();
+  }
+
+  function _createOverlay() {
+    // Remove existing overlay if any
+    _removeOverlay();
+
+    const overlay = document.createElement("div");
+    overlay.id = "skill-ac-overlay";
+    overlay.style.cssText = "position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: transparent;";
+
+    // Click overlay to close dropdown
+    overlay.addEventListener("click", () => {
+      _hide();
+    });
+
+    document.body.appendChild(overlay);
+  }
+
+  function _removeOverlay() {
+    const overlay = document.getElementById("skill-ac-overlay");
+    if (overlay) overlay.remove();
+  }
+
+  function _select(idx) {
+    const skill = _items[idx];
+    if (!skill) return;
+    const input  = $("user-input");
+    input.value  = "/" + skill.name + " ";
+    input.style.height = "auto";
+    input.style.height = Math.min(input.scrollHeight, 200) + "px";
+    _hide();
+    input.focus();
+  }
+
+  function _moveActive(delta) {
+    if (!_visible || _items.length === 0) return;
+    _activeIndex = (_activeIndex + delta + _items.length) % _items.length;
+    // Re-render to apply active class
+    const list  = $("skill-autocomplete-list");
+    list.querySelectorAll(".skill-ac-item").forEach((el, i) => {
+      el.classList.toggle("active", i === _activeIndex);
+      if (i === _activeIndex) el.scrollIntoView({ block: "nearest" });
+    });
+  }
+
+  /** Open the dropdown showing all skills, used by the / button. */
+  async function _openAll() {
+    _activeIndex = 0;  // Default to first item
+    await _render("");
+    $("user-input").focus();
+  }
+
+  /** Toggle the dropdown (open if hidden, close if visible). */
+  async function _toggle() {
+    if (_visible) {
+      _hide();
+    } else {
+      await _openAll();
+    }
+  }
+
+  // ── DOM bindings: composer keyboard/composition/input + slash button + ────
+  // ── skill-panel create/import buttons. Called once from init().           ──
+  function _initDOMBindings() {
+    // / button: set input to "/" and open skill autocomplete.
+    // mousedown + preventDefault prevents the textarea from losing focus
+    // (which would trigger the blur→hide timer and immediately close
+    //  the dropdown we're about to open).
+    $("btn-slash").addEventListener("mousedown", e => {
+      e.preventDefault();  // keep focus on user-input
+    });
+    $("btn-slash").addEventListener("click", () => {
+      const input = $("user-input");
+      if (input.value === "" || input.value === "/") {
+        input.value = "/";
+        input.style.height = "auto";
+        input.style.height = Math.min(input.scrollHeight, 200) + "px";
+      }
+      _toggle();  // Toggle dropdown instead of always opening
+      if (_visible) {
+        $("btn-slash").classList.add("active");
+      }
+      input.focus();
+    });
+
+    // IME composition guard: record timestamp of compositionend so the
+    // Enter keydown handler can detect Safari's out-of-order firing.
+    $("user-input").addEventListener("compositionend", () => {
+      _lastCompositionEndTime = Date.now();
+    });
+
+    // Main composer keydown: SkillAC consumes nav keys first, then Enter → send.
+    $("user-input").addEventListener("keydown", e => {
+      // Let skill autocomplete consume arrow/enter/escape first
+      if (_handleKey(e)) return;
+
+      if (e.key === "Enter" && !e.shiftKey && !e.isComposing && (Date.now() - _lastCompositionEndTime) > 20) {
+        e.preventDefault();
+        Sessions.sendMessage();
+      }
+    });
+
+    // Composer input: auto-grow textarea, normalize full-width slash, drive AC.
+    $("user-input").addEventListener("input", () => {
+      const el = $("user-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);
+      }
+
+      // Trigger skill autocomplete
+      _update(el.value);
+    });
+
+    // Skills panel action buttons (domain belongs to Skills, but the
+    // bindings live here because this is where all composer/skill-related
+    // DOM wiring was historically colocated).
+    $("btn-create-skill").addEventListener("click", () => Skills.createInSession());
+    $("btn-import-skill").addEventListener("click", () => Skills.toggleImportBar());
+  }
+
+  // Update handler — driven from the input event above. Exposed on the
+  // public API for programmatic use too.
+  function _update(value) {
+    const query = _getSlashQuery(value);
+    if (query === null) { _hide(); return; }
+    _activeIndex = 0;  // Always highlight the first match
+    _render(query);  // async, fire-and-forget
+  }
+
+  // Keyboard handler for the dropdown. Returns true if the event was consumed.
+  function _handleKey(e) {
+    if (!_visible) return false;
+    if (e.key === "ArrowDown") { e.preventDefault(); _moveActive(1);  return true; }
+    if (e.key === "ArrowUp")   { e.preventDefault(); _moveActive(-1); return true; }
+    if (e.key === "Escape")    { e.preventDefault(); _hide();         return true; }
+    if (e.key === "Tab") {
+      // Tab: select active item if one is highlighted, otherwise select first item
+      e.preventDefault();
+      const targetIdx = _activeIndex >= 0 ? _activeIndex : 0;
+      _select(targetIdx);
+      return true;
+    }
+    if (e.key === "Enter" && !e.isComposing && (Date.now() - _lastCompositionEndTime) > 20) {
+      if (_activeIndex >= 0) {
+        e.preventDefault();
+        _select(_activeIndex);
+        return true;
+      }
+      // No item highlighted — select first item if available
+      if (_items.length > 0) {
+        e.preventDefault();
+        _select(0);
+        return true;
+      }
+      // No items — let Enter fall through to sendMessage
+      _hide();
+      return false;
+    }
+    return false;
+  }
+
+  return {
+    get visible()      { return _visible; },
+    get activeIndex()  { return _activeIndex; },
+
+    /** Initialize event listeners (call once on page load). */
+    init() {
+      if (_initialized) return;
+      _initialized = true;
+
+      const chk = $("chk-ac-show-system-skills");
+
+      if (chk) {
+        // Restore state from localStorage
+        chk.checked = _showSystemSkills;
+
+        chk.addEventListener("change", async () => {
+          _showSystemSkills = chk.checked;
+          // Persist to localStorage
+          localStorage.setItem("skill-ac-show-system", _showSystemSkills ? "true" : "false");
+
+          // If dropdown is visible, re-fetch and re-render
+          if (_visible) {
+            const input = $("user-input");
+            const query = _getSlashQuery(input.value);
+            if (query !== null) {
+              await _render(query);
+            }
+          }
+        });
+      }
+
+      // Wire up all composer/slash DOM bindings.
+      _initDOMBindings();
+    },
+
+    /** Called on every `input` event — decide whether to show/hide/update. */
+    update: _update,
+
+    /** Open dropdown with all skills (triggered by / button). */
+    openAll: _openAll,
+
+    /** Toggle dropdown visibility (used by / button). */
+    toggle: _toggle,
+
+    /** Hide the dropdown. */
+    hide: _hide,
+
+    /** Reload session-scoped skill list when the active session changes. */
+    loadForSession: _loadForSession,
+
+    /** Handle keyboard nav inside the dropdown. Returns true if event was consumed. */
+    handleKey: _handleKey,
+  };
+})();