openclacky 1.5.11 → 1.5.13

data/lib/clacky/web/core/ext.js

@@ -379,6 +379,19 @@ Clacky.ext = (() => {
     map.set(key, teardown);
   }
 
+  // Run and forget a single teardown by key. Used when a tab re-renders within
+  // the same session (e.g. an eager onAttach re-running) so its previous
+  // subscriptions are released before a new one is registered.
+  function _runViewTeardown(sessionId, key) {
+    if (!sessionId) return;
+    const map = _viewTeardowns.get(sessionId);
+    if (!map) return;
+    const fn = map.get(key);
+    if (typeof fn !== "function") return;
+    map.delete(key);
+    try { fn(); } catch (_e) { /* already guarded by caller */ }
+  }
+
   // Invoke a renderer's render function. Handles the (container, ctx, runtime)
   // signature used everywhere; if the render returns a function it is stored
   // as the view teardown, run before the next render or on session exit.
@@ -632,6 +645,31 @@ Clacky.ext = (() => {
       body.setAttribute("data-panel", id);
       bodyEls[id] = body;
       bodies.appendChild(body);
+
+      // Eager init: a tab can run setup (surface a badge, pre-fetch data,
+      // start a subscription) before the user ever opens it. onAttach runs
+      // immediately with a ctx carrying sessionId + setBadge; returning a
+      // function registers it as a teardown run on the next render pass /
+      // session switch. Any tab may opt in — no per-extension wiring needed.
+      if (typeof entry.tab.onAttach === "function") {
+        const attachKey = _mountKey(slot, entry) + "::attach";
+        // Re-running within the same session (rare, e.g. a host re-render)
+        // must release the previous teardown first to avoid leaks.
+        _runViewTeardown(renderCtx.sessionId, attachKey);
+        const attachCtx = Object.assign({}, renderCtx, {
+          setBadge: (n) => _setTabBadge(tabBtns[id], n),
+        });
+        let teardown;
+        try {
+          teardown = entry.tab.onAttach(attachCtx);
+        } catch (err) {
+          console.error(`[Clacky.ext] onAttach for tab "${id}" threw:`, err);
+          teardown = null;
+        }
+        if (typeof teardown === "function" && renderCtx.sessionId) {
+          _rememberViewTeardown(renderCtx.sessionId, attachKey, teardown);
+        }
+      }
     });
 
     container.appendChild(tabBar);

data/lib/clacky/web/features/billing/store.js

@@ -112,19 +112,15 @@ const BillingStore = (() => {
 
       try {
         const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
-        const [summaryRes, dailyRes, sessionsRes] = await Promise.all([
+        const [summaryRes, dailyRes] = await Promise.all([
           fetch(`/api/billing/summary?period=${_currentPeriod}${modelParam}`),
-          fetch(`/api/billing/daily?days=30${modelParam}`),
-          fetch(`/api/billing/sessions?period=${_currentPeriod}${modelParam}&limit=100`)
+          fetch(`/api/billing/daily?days=30${modelParam}`)
         ]);
 
         _summary = await summaryRes.json();
         const dailyData = await dailyRes.json();
         _daily = dailyData.days || [];
 
-        const sessionsData = await sessionsRes.json();
-        _sessions = sessionsData.sessions || [];
-
         if (!_currentModel || _currentModel === "all") {
           _allModels = _summary.by_model ? Object.keys(_summary.by_model) : [];
         }

data/lib/clacky/web/features/billing/view.js

@@ -122,8 +122,8 @@ const BillingView = (() => {
 
     const allModels = BillingStore.state.allModels;
     const models = allModels.length > 0 ? allModels : (summary.by_model ? Object.keys(summary.by_model) : []);
-    const modelOptions = [`<option value="all">${I18n.t("billing.allModels") || "All Models"}</option>`]
-      .concat(models.filter(m => m).map(m => `<option value="${_esc(m)}" ${m === BillingStore.state.currentModel ? "selected" : ""}>${_esc(m)}</option>`))
+    const modelOptions = [`<div class="custom-select-option" data-value="all">${I18n.t("billing.allModels") || "All Models"}</div>`]
+      .concat(models.filter(m => m).map(m => `<div class="custom-select-option" data-value="${_esc(m)}">${_esc(m)}</div>`))
       .join("");
 
     container.innerHTML = `
@@ -135,7 +135,15 @@ const BillingView = (() => {
           </div>
           <div class="billing-controls">
             <div class="segmented-control">${periodBtns}</div>
-            <select id="billing-model-filter" class="billing-model-filter">${modelOptions}</select>
+            <div class="custom-select-wrapper billing-model-filter" id="billing-model-filter">
+              <div class="custom-select-trigger" tabindex="0">
+                <span class="custom-select-value">${I18n.t("billing.allModels") || "All Models"}</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">${modelOptions}</div>
+            </div>
             <button id="billing-share-btn" class="billing-share-btn" title="${I18n.t('billing.share.tooltip') || 'Share scorecard'}">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><polyline points="16 6 12 2 8 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="2" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
               ${I18n.t('billing.share.btn') || 'Share scorecard'}
@@ -200,10 +208,6 @@ const BillingView = (() => {
         <div class="billing-chart-row">
           ${_renderCombinedChart()}
         </div>
-
-        <div class="billing-sessions-row">
-          ${_renderSessionList()}
-        </div>
       </div>
     `;
 
@@ -211,9 +215,15 @@ const BillingView = (() => {
       btn.addEventListener("click", (e) => Billing.setPeriod(e.target.dataset.period));
     });
 
-    document.getElementById("billing-model-filter")?.addEventListener("change", (e) => {
-      Billing.setModel(e.target.value);
-    });
+    const billingModelWrap = document.getElementById("billing-model-filter");
+    if (billingModelWrap && window.CustomSelect) {
+      const sel = window.CustomSelect.init({
+        trigger: billingModelWrap.querySelector(".custom-select-trigger"),
+        dropdown: billingModelWrap.querySelector(".custom-select-dropdown"),
+        onSelect: (value) => Billing.setModel(value)
+      });
+      sel.setValue(BillingStore.state.currentModel || "all");
+    }
 
     document.getElementById("billing-share-btn")?.addEventListener("click", _openScorecardShare);
 
@@ -238,7 +248,7 @@ const BillingView = (() => {
   function _cacheHitRateOf(summary) {
     const prompt = summary.prompt_tokens || 0;
     const cacheRead = summary.cache_read_tokens || 0;
-    return prompt === 0 ? "0" : ((cacheRead / prompt) * 100).toFixed(1);
+    return prompt === 0 ? "0" : Math.min((cacheRead / prompt) * 100, 100).toFixed(1);
   }
 
   function _heatmapDays() {
@@ -325,12 +335,18 @@ const BillingView = (() => {
         </div>
       `;
       tooltip.style.display = "block";
-      tooltip.style.left = `${e.clientX + 15}px`;
-      tooltip.style.top = `${e.clientY - 10}px`;
+      tooltip.style.visibility = "hidden";
+      const rect = tooltip.getBoundingClientRect();
+      const ovfX = e.clientX + 15 + rect.width - window.innerWidth;
+      const ovfY = e.clientY - 10 + rect.height - window.innerHeight;
+      tooltip.style.left = ovfX > 0 ? `${e.clientX - 15 - rect.width}px` : `${e.clientX + 15}px`;
+      tooltip.style.top = ovfY > 0 ? `${e.clientY - 10 - rect.height}px` : `${e.clientY - 10}px`;
+      tooltip.style.visibility = "visible";
     });
 
     container.addEventListener("mouseleave", () => {
       tooltip.style.display = "none";
+      tooltip.style.visibility = "";
     });
   }
 
@@ -431,7 +447,7 @@ const BillingView = (() => {
     const promptTokens = summary.prompt_tokens || 0;
     const completionTokens = summary.completion_tokens || 0;
     const cacheReadTokens = summary.cache_read_tokens || 0;
-    const cacheMissTokens = promptTokens - cacheReadTokens;
+    const cacheMissTokens = Math.max(promptTokens - cacheReadTokens, 0);
 
     return `
       <div class="billing-section billing-token-section">
@@ -668,7 +684,7 @@ const BillingView = (() => {
     const chartBars = recentDays.map((d, i) => {
       const cacheHit = d.cache_read_tokens || 0;
       const totalPrompt = d.prompt_tokens || 0;
-      const cacheMiss = totalPrompt - cacheHit;
+      const cacheMiss = Math.max(totalPrompt - cacheHit, 0);
       const output = d.completion_tokens || 0;
       const totalInput = totalPrompt;
       const totalTokens = totalInput + output;
@@ -746,7 +762,7 @@ const BillingView = (() => {
       const totalTokens = s.total_tokens || 0;
       const promptTokens = s.prompt_tokens || 0;
       const cacheHit = s.cache_read_tokens || 0;
-      const cacheMiss = promptTokens - cacheHit;
+      const cacheMiss = Math.max(promptTokens - cacheHit, 0);
       const completionTokens = s.completion_tokens || 0;
       const requests = s.requests || 0;
       const models = (s.models || []).join(", ");

data/lib/clacky/web/features/extensions/view.js

@@ -587,18 +587,30 @@ const ExtensionsView = (() => {
       });
     }
 
-    const sortSelect = $("extensions-sort");
-    if (sortSelect) {
-      sortSelect.value = ExtensionsStore.state.sort;
-      sortSelect.addEventListener("change", () => Extensions.setSort(sortSelect.value));
+    const sortWrap = $("extensions-sort");
+    if (sortWrap && window.CustomSelect) {
+      const sortDropdown = sortWrap.querySelector(".custom-select-dropdown");
+      if (!sortDropdown.__customSelect) {
+        window.CustomSelect.init({
+          trigger: sortWrap.querySelector(".custom-select-trigger"),
+          dropdown: sortDropdown,
+          onSelect: (value) => Extensions.setSort(value)
+        });
+      }
+      sortDropdown.__customSelect.setValue(ExtensionsStore.state.sort);
     }
 
-    const installedFilter = $("extensions-installed-filter");
-    if (installedFilter) {
-      installedFilter.value = ExtensionsStore.state.onlyInstalled ? "installed" : "all";
-      installedFilter.addEventListener("change", () => {
-        Extensions.setOnlyInstalled(installedFilter.value === "installed");
-      });
+    const installedWrap = $("extensions-installed-filter");
+    if (installedWrap && window.CustomSelect) {
+      const installedDropdown = installedWrap.querySelector(".custom-select-dropdown");
+      if (!installedDropdown.__customSelect) {
+        window.CustomSelect.init({
+          trigger: installedWrap.querySelector(".custom-select-trigger"),
+          dropdown: installedDropdown,
+          onSelect: (value) => Extensions.setOnlyInstalled(value === "installed")
+        });
+      }
+      installedDropdown.__customSelect.setValue(ExtensionsStore.state.onlyInstalled ? "installed" : "all");
     }
     document.querySelectorAll(".extensions-filter-tab").forEach(btn => {
       btn.addEventListener("click", () => {

data/lib/clacky/web/features/new-session/store.js

@@ -53,7 +53,9 @@ const NewSessionStore = (() => {
       const res = await fetch("/api/agents");
       if (!res.ok) return;
       const data = await res.json();
-      _state.agents = (data && data.agents) || [];
+      // Hidden agents are still returned (so existing sessions can resolve
+      // their display names) but must not appear in the new-session picker.
+      _state.agents = ((data && data.agents) || []).filter((a) => !a.hidden);
 
       // Restore last-used agent from localStorage; fall back to the first
       // available one (typically "general").
@@ -206,6 +208,17 @@ const NewSessionStore = (() => {
     }
   }
 
+  async function loadAgentName() {
+    try {
+      const res = await fetch("/api/profile");
+      if (!res.ok) return "";
+      const data = await res.json();
+      return (data.soul && data.soul.name) || "";
+    } catch (e) {
+      return "";
+    }
+  }
+
   return {
     get state() { return _state; },
     on: _on,
@@ -218,6 +231,7 @@ const NewSessionStore = (() => {
     loadDefaultDirectory,
     createSession,
     fetchSkillsForAgent,
+    loadAgentName,
     reset,
   };
 })();

data/lib/clacky/web/features/new-session/view.js

@@ -15,10 +15,33 @@ const NewSessionView = (() => {
   let _initialized = false;
   let _modelsLoaded = false;
 
+  let _agentName        = "";
+  let _agentNamePromise = null;
+
   function _isZh() {
     return I18n.lang && I18n.lang().startsWith("zh");
   }
 
+  function _loadAgentName() {
+    if (_agentName) return Promise.resolve(_agentName);
+    if (_agentNamePromise) return _agentNamePromise;
+    _agentNamePromise = NewSessionStore.loadAgentName()
+      .then(name => {
+        _agentName = name || "";
+        return _agentName;
+      })
+      .finally(() => { _agentNamePromise = null; });
+    return _agentNamePromise;
+  }
+
+  function _renderTitle() {
+    const el = document.querySelector(".new-session-title");
+    if (!el) return;
+    el.textContent = _agentName
+      ? I18n.t("sessions.new.title.named", { name: _agentName })
+      : I18n.t("sessions.new.title");
+  }
+
   function _agentLabel(a) {
     if (_isZh() && a.title_zh) return a.title_zh;
     return a.title || a.id;
@@ -191,8 +214,7 @@ const NewSessionView = (() => {
       btn.addEventListener("click", () => {
         const input = $("new-session-input");
         if (!input) return;
-        input.value = zh ? p.zh : p.en;
-        input.focus();
+        Composer.setText(input, zh ? p.zh : p.en);
         _updateSendButton();
       });
       list.appendChild(btn);
@@ -204,7 +226,7 @@ const NewSessionView = (() => {
   function _updatePlaceholder() {
     const input = $("new-session-input");
     if (!input) return;
-    input.placeholder = I18n.t("chat.input.placeholder");
+    Composer.setPlaceholder(input, I18n.t("chat.input.placeholder"));
   }
 
   async function _populateModels() {
@@ -245,10 +267,10 @@ const NewSessionView = (() => {
     const btn = $("new-session-send");
     const input = $("new-session-input");
     if (!btn || !input) return;
-    const hasText = input.value.trim().length > 0;
+    const hasContent = Composer.hasContent(input);
     const hasFiles = _pendingImages.length > 0 || _pendingFiles.length > 0;
     const initProject = NewSessionStore.state.advanced.initProject === true;
-    btn.disabled = (!hasText && !hasFiles && !initProject) || NewSessionStore.state.creating;
+    btn.disabled = (!hasContent && !hasFiles && !initProject) || NewSessionStore.state.creating;
   }
 
   // ── Attachments (image compression + generic file upload) ───────────────
@@ -428,8 +450,18 @@ const NewSessionView = (() => {
     ];
   }
 
-  function _buildBubbleHtml(content) {
+  function _buildBubbleHtml(content, mentionChips = []) {
     let html = content ? escapeHtml(content) : "";
+    if (mentionChips.length > 0) {
+      const badges = mentionChips.map((ch) => {
+        const path = ch.type === "session"
+          ? MentionAC.icons.message
+          : (ch.type === "directory" ? MentionAC.icons.folder : MentionAC.icons.file);
+        return `<span class="msg-mention-badge"><span class="msg-mention-badge-icon">${MentionAC.svgHtml(path, 13)}</span>` +
+          `<span class="msg-mention-badge-name">${escapeHtml(ch.name)}</span></span>`;
+      }).join(" ");
+      html = badges + (html ? "<br>" + html : "");
+    }
     if (_pendingImages.length > 0) {
       const thumbs = _pendingImages
         .map((img) => `<img src="${img.dataUrl}" alt="${escapeHtml(img.name)}" class="msg-image-thumb">`)
@@ -663,32 +695,15 @@ const NewSessionView = (() => {
         pop.appendChild(empty);
         return;
       }
-      models.forEach((m) => {
-        const isDefault = m.type === "default";
-        const modelName = m.model || m.id || "";
-
-        const item = document.createElement("button");
-        item.type = "button";
-        item.className = "ns-ctx-popover-item sib-model-option" + ((m.id || "") === currentId ? " active" : "");
-        item.style.cssText = "display:flex;align-items:center;justify-content:space-between;gap:0.5rem;";
-
-        const nameSpan = document.createElement("span");
-        nameSpan.textContent = modelName;
-        item.appendChild(nameSpan);
-
-        if (isDefault) {
-          const badge = document.createElement("span");
-          badge.className = "model-badge default";
-          badge.textContent = "default";
-          item.appendChild(badge);
-        }
 
-        item.addEventListener("click", () => {
+      ModelPicker.populate(pop, {
+        models,
+        currentId,
+        onSelect: (m) => {
           NewSessionStore.updateAdvanced({ modelId: m.id || "" });
           _dismissCtxPopover();
           _renderContextBar();
-        });
-        pop.appendChild(item);
+        },
       });
     });
   }
@@ -780,11 +795,12 @@ const NewSessionView = (() => {
   async function _submit() {
     const input = $("new-session-input");
     if (!input) return;
-    const content = input.value.trim();
+    const content = Composer.text(input).trim();
+    const mentionChips = Composer.chips(input);
     const hasFiles = _pendingImages.length > 0 || _pendingFiles.length > 0;
     const initProject = NewSessionStore.state.advanced.initProject === true;
     // Allow empty input when initProject is checked — /new will be auto-sent.
-    if (!content && !hasFiles && !initProject) return;
+    if (!content && mentionChips.length === 0 && !hasFiles && !initProject) return;
 
     const btn = $("new-session-send");
     if (btn) btn.disabled = true;
@@ -803,15 +819,30 @@ const NewSessionView = (() => {
     const finalContent = initProject
       ? (content ? `/new\n${content}` : "/new")
       : content;
-    const files = hasFiles ? _buildPendingFiles() : null;
-    const display = hasFiles ? _buildBubbleHtml(finalContent) : null;
+
+    // Mention chips: file/directory references ride the files payload (agent.run
+    // lists directory contents), session references ride references.
+    const fileDirChips = mentionChips.filter(c => c.type === "file" || c.type === "directory");
+    const references = mentionChips.map(c => {
+      const ref = { type: c.type, name: c.name };
+      if (c.type === "session") ref.session_id = c.session_id;
+      else ref.path = c.path;
+      return ref;
+    });
+
+    const files = (hasFiles || fileDirChips.length > 0)
+      ? _buildPendingFiles().concat(fileDirChips.map(c => ({ name: c.name, path: c.path, reference: true })))
+      : null;
+    const display = (hasFiles || mentionChips.length > 0)
+      ? _buildBubbleHtml(finalContent, mentionChips)
+      : null;
 
     Sessions.add(session);
     if (session.project_id && typeof Projects !== "undefined" && Projects.expand) {
       Projects.expand(session.project_id);
     }
-    Sessions.setPendingMessage(session.id, finalContent, display, files);
-    input.value = "";
+    Sessions.setPendingMessage(session.id, finalContent, display, files, references);
+    Composer.clear(input);
     _pendingImages.length = 0;
     _pendingFiles.length = 0;
     _imageSeq = 0;
@@ -828,6 +859,8 @@ const NewSessionView = (() => {
     if (_initialized) return;
     _initialized = true;
 
+    document.addEventListener("langchange", _renderTitle);
+
     NewSessionStore.on("newSession:agents-loaded", _renderAgents);
     NewSessionStore.on("newSession:selection-changed", () => {
       _renderAgents();
@@ -841,6 +874,18 @@ const NewSessionView = (() => {
       // Enter-to-send + slash-command navigation are owned by SkillAC.attach().
     }
 
+    // @ mention autocomplete — register before Composer/SkillAC so its keydown
+    // stopImmediatePropagation wins over chip deletion / Enter-send.
+    if (input && typeof MentionAC !== "undefined") {
+      MentionAC.attach({
+        input:         "new-session-input",
+        menu:          "ns-mention-autocomplete",
+        getWorkingDir: () => NewSessionStore.state.advanced.workingDir || "",
+      });
+    }
+    // contenteditable composer: chip deletion, plain-text paste, Shift+Enter.
+    if (input) Composer.init(input);
+
     // Slash-command skill autocomplete for this composer (mirrors chat).
     if (typeof SkillAC !== "undefined" && input) {
       SkillAC.attach({
@@ -901,6 +946,7 @@ const NewSessionView = (() => {
 
   async function onPanelShow() {
     _bindOnce();
+    _loadAgentName().then(_renderTitle);
     await NewSessionStore.loadAgents();
     // Must run after loadAgents(): that call restores the remembered
     // projectId from localStorage, which decides whether the working dir is

data/lib/clacky/web/features/trash/view.js

@@ -52,26 +52,33 @@ const TrashView = (() => {
   // ── Project filter select helpers ────────────────────────────────────
 
   function _refreshProjectOptions() {
-    const sel = $("trash-filter-project");
-    if (!sel) return;
+    const wrap = $("trash-filter-project");
+    if (!wrap) return;
+    const dropdown = wrap.querySelector(".custom-select-dropdown");
+    if (!dropdown) return;
+    const ctl = dropdown.__customSelect;
+    const currentVal = ctl ? ctl.value : "";
 
     const projects = (typeof Projects !== "undefined") ? Projects.all() : [];
-    const currentVal = sel.value;
-
-    // Rebuild options: keep the "all" placeholder, then one per project
-    sel.innerHTML = `<option value="">${I18n.t ? I18n.t("trash.filterAllProjects") : "所有项目"}</option>`;
+    const allLabel = I18n.t ? I18n.t("trash.filterAllProjects") : "所有项目";
+
+    dropdown.innerHTML = "";
+    const all = document.createElement("div");
+    all.className = "custom-select-option";
+    all.dataset.value = "";
+    all.textContent = allLabel;
+    dropdown.appendChild(all);
     projects.forEach(p => {
-      const opt = document.createElement("option");
-      opt.value       = p.id;
+      const opt = document.createElement("div");
+      opt.className = "custom-select-option";
+      opt.dataset.value = p.id;
       opt.textContent = p.name || p.id;
-      sel.appendChild(opt);
+      dropdown.appendChild(opt);
     });
 
-    // Restore previous selection if still valid
-    if (currentVal && projects.some(p => String(p.id) === currentVal)) {
-      sel.value = currentVal;
-    } else {
-      sel.value = "";
+    if (ctl) {
+      const restore = (currentVal && projects.some(p => String(p.id) === currentVal)) ? currentVal : "";
+      ctl.setValue(restore);
     }
   }
 
@@ -464,11 +471,16 @@ const TrashView = (() => {
     });
 
     // Project filter select
-    const projSel = $("trash-filter-project");
-    if (projSel) {
-      projSel.addEventListener("change", () => {
-        Trash.setFilterProject(projSel.value || null);
-      });
+    const projWrap = $("trash-filter-project");
+    if (projWrap && window.CustomSelect) {
+      const dropdown = projWrap.querySelector(".custom-select-dropdown");
+      if (!dropdown.__customSelect) {
+        window.CustomSelect.init({
+          trigger: projWrap.querySelector(".custom-select-trigger"),
+          dropdown: dropdown,
+          onSelect: (value) => Trash.setFilterProject(value || null)
+        });
+      }
     }
   }
 

data/lib/clacky/web/features/workspace/store.js

@@ -110,6 +110,7 @@ const WorkspaceStore = (() => {
         body: JSON.stringify({ path: _absPath(entry.path), action: "save", content })
       });
       if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      _emit("workspace:fileSaved", { sessionId: _sessionId, path: entry.path, name: entry.name });
     },
   };