openclacky 1.5.19 → 1.5.21

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

@@ -238,6 +238,7 @@ const BillingView = (() => {
     _bindChartTooltip();
     _bindHeatmapTooltip();
     _bindTrendTooltip();
+    _scrollHeatmapToLatest();
   }
 
   // ── Scorecard ───────────────────────────────────────────────────────────────
@@ -350,6 +351,14 @@ const BillingView = (() => {
   // so following the pointer covers the data no matter which side it flips to.
   // There it docks just outside `chart` instead, keeping the plot fully visible.
   const MOBILE_TOOLTIP_MAX_WIDTH = 768;
+  const MOBILE_CHART_MEDIA_QUERY = `(max-width: ${MOBILE_TOOLTIP_MAX_WIDTH}px)`;
+
+  function _isMobileChartLayout() {
+    if (typeof window.matchMedia === "function") {
+      return window.matchMedia(MOBILE_CHART_MEDIA_QUERY).matches;
+    }
+    return window.innerWidth <= MOBILE_TOOLTIP_MAX_WIDTH;
+  }
 
   function _placeTooltip(tooltip, e, chart) {
     tooltip.style.display = "block";
@@ -431,8 +440,7 @@ const BillingView = (() => {
     const tooltip = document.getElementById("billing-tooltip");
     if (!grid || !tooltip) return;
 
-    grid.addEventListener("mousemove", (e) => {
-      const cell = e.target.closest(".billing-heat-cell");
+    const showTooltip = (cell, e) => {
       if (!cell || cell.classList.contains("is-empty") || !cell.dataset.date) {
         tooltip.style.display = "none";
         return;
@@ -453,6 +461,21 @@ const BillingView = (() => {
         </div>
       `;
       _placeTooltip(tooltip, e, grid);
+    };
+
+    grid.addEventListener("mousemove", (e) => {
+      showTooltip(e.target.closest(".billing-heat-cell"), e);
+    });
+
+    grid.addEventListener("click", (e) => {
+      if (!_isMobileChartLayout()) return;
+
+      grid.querySelectorAll(".billing-heat-cell.is-active").forEach(cell => cell.classList.remove("is-active"));
+      const cell = _nearestHeatmapCell(grid, e.clientX, e.clientY);
+      if (cell && !cell.classList.contains("is-empty") && cell.dataset.date) {
+        cell.classList.add("is-active");
+      }
+      showTooltip(cell, e);
     });
 
     grid.addEventListener("mouseleave", () => {
@@ -461,9 +484,49 @@ const BillingView = (() => {
     });
   }
 
-  // The dots are r="3" in viewBox units, which the responsive SVG scales down to
-  // under 5px on a phone — far too small to hit. Snap to the nearest point on the
-  // x axis instead so the whole column width is clickable.
+  // Mobile heatmap cells are intentionally compact, so include the surrounding
+  // gap in their logical hit area by snapping taps to the nearest week and day.
+  function _nearestHeatmapCell(grid, clientX, clientY) {
+    const nearestByRect = (elements, coordinate, startKey, endKey) => {
+      let nearest = null;
+      let nearestDistance = Infinity;
+      elements.forEach(element => {
+        const rect = element.getBoundingClientRect();
+        const distance = coordinate < rect[startKey]
+          ? rect[startKey] - coordinate
+          : coordinate > rect[endKey] ? coordinate - rect[endKey] : 0;
+        if (distance < nearestDistance) {
+          nearest = element;
+          nearestDistance = distance;
+        }
+      });
+      return nearest;
+    };
+
+    const week = nearestByRect(
+      Array.from(grid.querySelectorAll(".billing-heat-week")),
+      clientX,
+      "left",
+      "right"
+    );
+    if (!week) return null;
+
+    return nearestByRect(
+      Array.from(week.querySelectorAll(".billing-heat-cell")),
+      clientY,
+      "top",
+      "bottom"
+    );
+  }
+
+  function _scrollHeatmapToLatest() {
+    if (!_isMobileChartLayout()) return;
+    const scroller = document.querySelector(".billing-heatmap-year .billing-heat-year-wrap");
+    if (scroller) scroller.scrollLeft = scroller.scrollWidth;
+  }
+
+  // Even with larger mobile dots, a single point is too small to target reliably.
+  // Snap to the nearest point on the x axis so the whole column is clickable.
   function _nearestTrendDot(svg, clientX, clientY) {
     const count = parseInt(svg.dataset.count, 10);
     const xStep = parseFloat(svg.dataset.xStep);
@@ -487,7 +550,7 @@ const BillingView = (() => {
     const crosshairX = svg.querySelector(".billing-trend-crosshair-x");
     const crosshairY = svg.querySelector(".billing-trend-crosshair-y");
 
-    svg.addEventListener("mousemove", (e) => {
+    const showTooltip = (e) => {
       const dot = _nearestTrendDot(svg, e.clientX, e.clientY);
       if (!dot) {
         tooltip.style.display = "none";
@@ -515,6 +578,11 @@ const BillingView = (() => {
         </div>
       `;
       _placeTooltip(tooltip, e, svg);
+    };
+
+    svg.addEventListener("mousemove", showTooltip);
+    svg.addEventListener("pointerdown", (e) => {
+      if (e.pointerType !== "mouse") showTooltip(e);
     });
 
     svg.addEventListener("mouseleave", () => {
@@ -788,9 +856,14 @@ const BillingView = (() => {
     const maxCost = Math.max(...costs, 0.0001);
     const minCost = Math.min(...costs);
 
-    const pad = { top: 12, right: 16, bottom: 20, left: 48 };
-    const w = 400;
-    const h = 100;
+    const mobileLayout = _isMobileChartLayout();
+    const contentWidth = document.getElementById("billing-content")?.clientWidth || window.innerWidth;
+    const pad = mobileLayout
+      ? { top: 14, right: 12, bottom: 26, left: 58 }
+      : { top: 12, right: 16, bottom: 20, left: 48 };
+    const w = mobileLayout ? Math.max(240, contentWidth - 30) : 400;
+    const h = mobileLayout ? 160 : 100;
+    const dotRadius = mobileLayout ? 4 : 3;
     const plotW = w - pad.left - pad.right;
     const plotH = h - pad.top - pad.bottom;
 
@@ -851,7 +924,7 @@ const BillingView = (() => {
             <line class="billing-trend-crosshair billing-trend-crosshair-y" x1="${pad.left}" y1="0" x2="${w - pad.right}" y2="0" />
             <path d="${linePath}" fill="none" class="billing-trend-line" />
             ${costs.map((c, i) => `
-              <circle cx="${pts[i].x.toFixed(2)}" cy="${pts[i].y.toFixed(2)}" r="3" class="billing-trend-dot" data-index="${i}" data-date="${days[i].date}" data-cost="${currencySymbol}${_formatCost(c)}" />
+              <circle cx="${pts[i].x.toFixed(2)}" cy="${pts[i].y.toFixed(2)}" r="${dotRadius}" class="billing-trend-dot" data-index="${i}" data-date="${days[i].date}" data-cost="${currencySymbol}${_formatCost(c)}" />
             `).join("")}
           </svg>
         </div>
@@ -1041,6 +1114,7 @@ const BillingView = (() => {
     Billing.on("billing:actionError", _onActionError);
     document.addEventListener("currencychange", () => Billing.refreshView());
     document.getElementById("header-print-receipt")?.addEventListener("click", _openScorecardShare);
+    window.matchMedia?.(MOBILE_CHART_MEDIA_QUERY).addEventListener?.("change", _render);
   }
 
   return { init: _subscribe };

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

@@ -328,6 +328,8 @@ const ChannelsView = (() => {
 
   // ── QQ one-click bind (official QR page) ─────────────────────────────────
 
+  const REFRESH_SVG = `<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg>`;
+
   let _qrPollTimer = null;
   let _qrAbort = false;
 
@@ -336,13 +338,17 @@ const ChannelsView = (() => {
     _qrAbort = true;
   }
 
-  async function _openQrBind() {
+  async function _startQrTask() {
     _stopQrPolling();
+    const task = await Channels.qrStart();
     _qrAbort = false;
+    return task;
+  }
 
+  async function _openQrBind() {
     let task;
     try {
-      task = await Channels.qrStart();
+      task = await _startQrTask();
     } catch (e) {
       Modal.toast("Error: " + e.message, "error");
       return;
@@ -356,26 +362,40 @@ const ChannelsView = (() => {
     overlay.className = "modal-overlay";
     overlay.innerHTML = `
       <div class="modal-box qq-qr-modal" role="dialog" aria-modal="true" aria-labelledby="qq-qr-title">
-        <button type="button" class="modal-close-btn" id="qq-qr-close" aria-label="Close"></button>
+        <button type="button" class="modal-close-btn" id="qq-qr-close" aria-label="${_esc(I18n.t("modal.close"))}"></button>
         <h3 id="qq-qr-title">${_esc(I18n.t("channels.qq.qr.title"))}</h3>
-        <p class="qq-qr-hint">${_esc(I18n.t("channels.qq.qr.hint"))}</p>
-        <div class="qq-qr-status" id="qq-qr-status">${_esc(I18n.t("channels.qq.qr.waiting"))}</div>
-        <div class="qq-qr-actions">
-          <a class="qq-qr-open-btn" id="qq-qr-open" href="${_esc(task.connectUrl)}" target="_blank" rel="noopener">
-            ${_esc(I18n.t("channels.qq.qr.open"))}
-          </a>
-          <button type="button" class="qq-qr-copy-btn" id="qq-qr-copy">${_esc(I18n.t("channels.qq.qr.copy"))}</button>
+        <div class="qq-qr-pending" id="qq-qr-pending">
+          <p class="qq-qr-hint">${_esc(I18n.t("channels.qq.qr.hint"))}</p>
+          <div class="qq-qr-frame-wrap" id="qq-qr-frame-wrap">
+            <iframe class="qq-qr-frame" id="qq-qr-frame" src="${_esc(task.connectUrl)}" title="${_esc(I18n.t("channels.qq.qr.title"))}" referrerpolicy="no-referrer" scrolling="no"></iframe>
+            <button type="button" class="qq-qr-refresh" id="qq-qr-refresh" hidden>
+              <span class="qq-qr-refresh-icon">${REFRESH_SVG}</span>
+              <span id="qq-qr-refresh-text"></span>
+            </button>
+          </div>
+          <div class="qq-qr-status" id="qq-qr-status">${_esc(I18n.t("channels.qq.qr.waiting"))}</div>
+          <div class="qq-qr-actions">
+            <a class="qq-qr-open-btn" id="qq-qr-open" href="${_esc(task.connectUrl)}" target="_blank" rel="noopener">
+              ${_esc(I18n.t("channels.qq.qr.open"))}
+            </a>
+            <button type="button" class="qq-qr-copy-btn" id="qq-qr-copy">${_esc(I18n.t("channels.qq.qr.copy"))}</button>
+          </div>
+        </div>
+        <div class="qq-qr-success" id="qq-qr-success" hidden>
+          <div class="qq-qr-success-title">${_esc(I18n.t("channels.qq.qr.success"))}</div>
+          <p class="qq-qr-hint">${_esc(I18n.t("channels.qq.qr.successDesc"))}</p>
+          <button type="button" class="qq-qr-open-btn" id="qq-qr-done">${_esc(I18n.t("channels.qq.qr.done"))}</button>
         </div>
       </div>
     `;
     document.body.appendChild(overlay);
 
+    let bound = false;
     const closeModal = () => { _stopQrPolling(); overlay.remove(); };
-    overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); });
+    // While waiting, a stray backdrop click would drop the bind before the scan lands.
+    overlay.addEventListener("click", (e) => { if (e.target === overlay && bound) closeModal(); });
     $("qq-qr-close").addEventListener("click", closeModal);
-    $("qq-qr-open").addEventListener("click", () => {
-      $("qq-qr-status").textContent = I18n.t("channels.qq.qr.scanPrompt");
-    });
+    $("qq-qr-done").addEventListener("click", closeModal);
     $("qq-qr-copy").addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(task.connectUrl);
@@ -386,13 +406,44 @@ const ChannelsView = (() => {
       } catch (_) { /* ignore */ }
     });
 
-    // Tencent blocks auto-popup in some contexts, so open directly as well.
-    try { window.open(task.connectUrl, "_blank", "noopener"); } catch (_) { /* ignore */ }
+    const showExpired = (key) => {
+      _stopQrPolling();
+      $("qq-qr-frame-wrap").classList.add("expired");
+      $("qq-qr-refresh-text").textContent = I18n.t(key);
+      $("qq-qr-refresh").hidden = false;
+      $("qq-qr-status").textContent = "";
+    };
 
-    _pollQr(task.taskId, closeModal);
+    $("qq-qr-refresh").addEventListener("click", async () => {
+      const btn = $("qq-qr-refresh");
+      btn.disabled = true;
+      try {
+        task = await _startQrTask();
+      } catch (e) {
+        Modal.toast("Error: " + e.message, "error");
+        btn.disabled = false;
+        return;
+      }
+      $("qq-qr-frame").src = task.connectUrl;
+      $("qq-qr-open").href = task.connectUrl;
+      $("qq-qr-frame-wrap").classList.remove("expired");
+      btn.hidden = true;
+      btn.disabled = false;
+      $("qq-qr-status").textContent = I18n.t("channels.qq.qr.waiting");
+      _pollQr(task.taskId, { onSuccess, onExpired: showExpired });
+    });
+
+    const onSuccess = () => {
+      bound = true;
+      $("qq-qr-pending").hidden = true;
+      $("qq-qr-success").hidden = false;
+      $("qq-qr-done").focus();
+    };
+
+    _pollQr(task.taskId, { onSuccess, onExpired: showExpired });
   }
 
-  async function _pollQr(taskId, closeModal) {
+  function _pollQr(taskId, { onSuccess, onExpired }) {
     const POLL_MS = 2000;
     const tick = async () => {
       if (_qrAbort) return;
@@ -400,27 +451,22 @@ const ChannelsView = (() => {
       try {
         const status = await Channels.qrPoll(taskId);
         if (_qrAbort) return;
-        const statusEl = $("qq-qr-status");
         if (status === "completed") {
-          if (statusEl) statusEl.textContent = I18n.t("channels.qq.qr.success");
+          _stopQrPolling();
+          onSuccess();
           await Channels.load({ silent: true });
-          setTimeout(closeModal, 1200);
           return;
         }
         if (status === "expired") {
-          if (statusEl) statusEl.textContent = I18n.t("channels.qq.qr.expired");
-          _stopQrPolling();
+          onExpired("channels.qq.qr.expired");
           return;
         }
       } catch (e) {
         if (_qrAbort) return;
-        // 404/422 means the session was pruned (~600 s TTL): tell the user to
-        // restart instead of spinning on 等待确认 forever.
+        // 404/422 means the session was pruned (~600 s TTL): offer a refresh
+        // instead of spinning on the stale code forever.
         if (e.status === 404 || e.status === 422) {
-          const statusEl = $("qq-qr-status");
-          if (statusEl) statusEl.textContent = I18n.t("channels.qq.qr.sessionExpired");
-          Modal.toast(I18n.t("channels.qq.qr.sessionExpired"), "warning");
-          _stopQrPolling();
+          onExpired("channels.qq.qr.sessionExpired");
           keepGoing = false;
         }
         // Other errors (network blips) keep polling.

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

@@ -152,11 +152,11 @@ const NewSessionStore = (() => {
     _emit("newSession:creating", { creating: true });
 
     try {
-      // useDefaults=true: quick-create from sidebar — use the default agent and
-      // skip advanced options (model / dir) so the session always starts clean.
+      // useDefaults=true: quick-create from sidebar — ignore the /#new draft
+      // (agent / name / model / dir / project) so the session always starts clean.
       const agentId = useDefaults ? "general" : (_state.selectedAgentId || "general");
       const adv = _state.advanced;
-      const name = adv.name.trim() || _autoName(existingSessions);
+      const name = (!useDefaults && adv.name.trim()) || _autoName(existingSessions);
 
       const payload = { name, agent_profile: agentId, source: "manual" };
       if (!useDefaults) {

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

@@ -471,6 +471,7 @@ const NewSessionView = (() => {
       item.className = "img-preview-item";
       item.title = img.name;
       const thumbnail = document.createElement("img");
+      thumbnail.className = "img-preview-thumb";
       thumbnail.src = img.dataUrl;
       thumbnail.alt = img.name;
       const removeBtn = document.createElement("button");

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

@@ -13,7 +13,7 @@
 // ───────────────────────────────────────────────────────────────────────────
 
 const TrashStore = (() => {
-  const SOURCES = Object.freeze({ ALL: "all", CRON: "cron", MANUAL: "manual" });
+  const SOURCES = Object.freeze({ ALL: "all", CRON: "cron", MANUAL: "manual", CHANNEL: "channel" });
 
   let _files          = [];
   let _totals         = { count: 0, size: 0 };
@@ -51,9 +51,9 @@ const TrashStore = (() => {
     get sessions()      {
       let list = _sessions;
       if (_filterSource !== SOURCES.ALL) {
-        list = _filterSource === SOURCES.CRON
-          ? list.filter(s => s.source === SOURCES.CRON)
-          : list.filter(s => s.source !== SOURCES.CRON);
+        // Same predicate the archive type filter uses: sessions with no source
+        // count as regular ones.
+        list = list.filter(s => (s.source || SOURCES.MANUAL) === _filterSource);
       }
       if (_filterProjectId !== null) {
         list = list.filter(s => String(s.project_id ?? "") === _filterProjectId);
@@ -200,14 +200,14 @@ const TrashStore = (() => {
       }
     },
 
-    countMatching(items, daysOld) {
-      if (!Array.isArray(items)) return 0;
-      if (!daysOld || daysOld <= 0) return items.length;
+    matching(items, daysOld) {
+      if (!Array.isArray(items)) return [];
+      if (!daysOld || daysOld <= 0) return items;
       const cutoff = Date.now() - daysOld * 86400000;
       return items.filter(it => {
         const t = Date.parse(it.deleted_at || "");
         return !isNaN(t) && t < cutoff;
-      }).length;
+      });
     },
 
     async emptyFilesBulk(daysOld) {
@@ -223,10 +223,13 @@ const TrashStore = (() => {
       }
     },
 
-    async emptySessionsBulk(daysOld) {
-      const url = "/api/trash/sessions?" + new URLSearchParams({ days_old: String(daysOld) }).toString();
+    async deleteSessions(sessions) {
       try {
-        const res  = await fetch(url, { method: "DELETE" });
+        const res  = await fetch("/api/trash/sessions/delete", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ session_ids: sessions.map(s => s.session_id) })
+        });
         const data = await res.json();
         if (!res.ok || !data.ok) return { ok: false, error: data.error || res.statusText };
         await Trash.loadSessions();

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

@@ -49,6 +49,46 @@ const TrashView = (() => {
     return d.toLocaleDateString();
   }
 
+// ── Source filter select helpers ─────────────────────────────────────
+
+  // "All types / Regular / Scheduled / Channel" — the archive page filters
+  // archived sessions by the same four sources, so this page mirrors it.
+  function _buildSourceOptions() {
+    const wrap = $("trash-filter-source");
+    if (!wrap) return;
+    const dropdown = wrap.querySelector(".custom-select-dropdown");
+    if (!dropdown || dropdown.dataset.built === "1") return;
+
+    const opts = [
+      { value: "",                   label: _t("trash.filterAllTypes") },
+      { value: Trash.SOURCES.MANUAL, label: _t("trash.filterManual") },
+      { value: Trash.SOURCES.CRON,   label: _t("trash.filterCron") },
+      { value: Trash.SOURCES.CHANNEL, label: _t("trash.filterChannel") },
+    ];
+    dropdown.innerHTML = "";
+    opts.forEach(o => {
+      const el = document.createElement("div");
+      el.className = "custom-select-option";
+      el.dataset.value = o.value;
+      el.dataset.label = o.label;
+      el.textContent = o.label;
+      dropdown.appendChild(el);
+    });
+    dropdown.dataset.built = "1";
+  }
+
+  // The empty option is "every source", so the trigger keeps the placeholder
+  // styling the archive filters show until a real filter is picked.
+  function _syncSourceSelect() {
+    const wrap = $("trash-filter-source");
+    if (!wrap) return;
+    const dropdown = wrap.querySelector(".custom-select-dropdown");
+    const ctl = dropdown && dropdown.__customSelect;
+    if (!ctl) return;
+    const current = Trash.state.filterSource;
+    ctl.setValue(current === Trash.SOURCES.ALL ? "" : current);
+  }
+
   // ── Project filter select helpers ────────────────────────────────────
 
   function _refreshProjectOptions() {
@@ -386,18 +426,18 @@ const TrashView = (() => {
   async function _emptyBulk(daysOld, confirmKey) {
     const isSession  = _activeTab === "session-trash";
     const items      = isSession ? Trash.state.sessions : Trash.state.files;
-    const matchCount = Trash.countMatching(items, daysOld);
+    const matches    = Trash.matching(items, daysOld);
 
-    if (matchCount === 0) {
+    if (matches.length === 0) {
       Modal.toast(_t(daysOld > 0 ? "trash.nothingOld" : "trash.empty"), "info");
       return;
     }
 
-    const confirmed = await Modal.confirm(I18n.t(confirmKey, { count: matchCount }));
+    const confirmed = await Modal.confirm(I18n.t(confirmKey, { count: matches.length }));
     if (!confirmed) return;
 
     if (isSession) {
-      const res = await Trash.emptySessionsBulk(daysOld);
+      const res = await Trash.deleteSessions(matches);
       if (!res.ok) { Modal.toast(I18n.t("trash.cleanFail", { msg: res.error }), "error"); return; }
       Modal.toast(I18n.t("trash.sessionsCleaned", { count: res.deleted_count }), "success");
     } else {
@@ -459,14 +499,21 @@ const TrashView = (() => {
       () => _emptyBulk(0, _activeTab === "session-trash"
         ? "trash.confirmEmptySessionAll" : "trash.confirmEmptyAll"));
 
-    // Filter chips
-    document.querySelectorAll(".trash-filter-chip").forEach(chip => {
-      chip.addEventListener("click", () => {
-        const val = chip.dataset.filter;
-        Trash.setFilterSource(val);
-        document.querySelectorAll(".trash-filter-chip").forEach(c => c.classList.toggle("active", c.dataset.filter === val));
-      });
-    });
+    // Filter selects — source (all / regular / scheduled) and project
+    _buildSourceOptions();
+
+    const sourceWrap = $("trash-filter-source");
+    if (sourceWrap && window.CustomSelect) {
+      const dropdown = sourceWrap.querySelector(".custom-select-dropdown");
+      if (!dropdown.__customSelect) {
+        window.CustomSelect.init({
+          trigger: sourceWrap.querySelector(".custom-select-trigger"),
+          dropdown: dropdown,
+          onSelect: (value) => Trash.setFilterSource(value || Trash.SOURCES.ALL)
+        });
+      }
+      _syncSourceSelect();
+    }
 
     // Project filter select
     const projWrap = $("trash-filter-project");
@@ -501,7 +548,13 @@ const TrashView = (() => {
     onPanelShow() {
       _wire();
       _activeTab = null;
-      _switchTab("file-trash");
+      // Sessions are what people come here for; the file trash is the side trip.
+      _switchTab("session-trash");
+    },
+
+    // Sidebar deletes land in the session trash while this page may be open behind them.
+    refreshIfShown() {
+      if (Router.current === "trash" && _activeTab === "session-trash") Trash.loadSessions();
     }
   };