openclacky 1.1.5 → 1.2.0

data/lib/clacky/web/sessions.js

@@ -25,6 +25,8 @@ const Sessions = (() => {
   // Search state
   const _filter            = { q: "", date: "", type: "" };  // committed filter (applied to server)
   let   _searchOpen        = false;   // is the search panel visible?
+  let   _cronView          = false;  // are we in the cron sub-view?
+  let   _cronCount         = 0;      // total cron sessions from server
   let   _pendingRunTaskId  = null;  // session_id waiting to send "run_task" after subscribe
   let   _pendingMessage    = null;  // { session_id, content } — slash command to send after subscribe
   // Buffer for tool_stdout lines that arrive before history has finished rendering.
@@ -284,6 +286,7 @@ const Sessions = (() => {
     const tip1     = I18n.t("chat.empty.tip1");
     const tip2     = I18n.t("chat.empty.tip2");
     const tip3     = I18n.t("chat.empty.tip3");
+    const tip4     = I18n.t("chat.empty.tip4");
     return `
       <div class="chat-empty-icon" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
@@ -296,6 +299,7 @@ const Sessions = (() => {
         <li>${escapeHtml(tip1)}</li>
         <li>${escapeHtml(tip2)}</li>
         <li>${escapeHtml(tip3)}</li>
+        <li>${escapeHtml(tip4)}</li>
       </ul>
     `;
   }
@@ -482,6 +486,7 @@ const Sessions = (() => {
 
   const _pendingImages = [];
   const _pendingFiles  = [];
+  let   _imageSeq      = 0;
   const MAX_IMAGE_SIZE        = 5 * 1024 * 1024;   // 5 MB — hard reject before compression
   const MAX_IMAGE_BYTES_SEND  = 512 * 1024;         // 512 KB — target after compression
   const MAX_IMAGE_LONG_EDGE   = 1920;               // px — scale down if larger
@@ -608,9 +613,13 @@ const Sessions = (() => {
       alert(`Image too large: ${file.name} (max 5 MB)`);
       return;
     }
+    const seq = ++_imageSeq;
+    const ext = (file.name.split('.').pop() || 'png').toLowerCase();
+    const displayName = `IMG_${String(seq).padStart(3, '0')}.${ext}`;
+
     _compressImage(file)
       .then(dataUrl => {
-        _pendingImages.push({ dataUrl, name: file.name, mimeType: "image/jpeg" });
+        _pendingImages.push({ dataUrl, name: displayName, mimeType: "image/jpeg", seq });
         _renderAttachmentPreviews();
       })
       .catch(err => alert(`Image processing failed: ${err.message}`));
@@ -778,6 +787,8 @@ const Sessions = (() => {
     Sessions.appendMsg("user", bubbleHtml, { time: new Date() });
 
     // Merge images and files into unified files array for WS payload.
+    _pendingImages.sort((a, b) => a.seq - b.seq);
+
     const files = [
       ..._pendingImages.map(img => ({
         name:      img.name,
@@ -792,9 +803,19 @@ const Sessions = (() => {
     ];
     _pendingImages.length = 0;
     _pendingFiles.length  = 0;
+    _imageSeq = 0;
     _renderAttachmentPreviews();
 
     WS.send({ type: "message", session_id: Sessions.activeId, content, files });
+
+    // Disable any pending feedback cards — user has replied (either by clicking
+    // an option button or by typing directly). The backend has already consumed
+    // the feedback; make the frontend reflect that immediately.
+    document.querySelectorAll(".feedback-card:not(.feedback-card--submitted)").forEach(card => {
+      card.querySelectorAll(".feedback-option-btn").forEach(b => { b.disabled = true; });
+      card.classList.add("feedback-card--submitted");
+    });
+
     input.value        = "";
     input.style.height = "auto";
     setTimeout(() => { _sending = false; }, 300);
@@ -1227,6 +1248,63 @@ const Sessions = (() => {
         break;
       }
 
+      case "request_feedback": {
+        // Collapse any open tool group
+        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; }
+
+        const rfQuestion = ev.question || "";
+        const rfContext  = ev.context  || "";
+        const rfOptions  = ev.options;
+        const rfHasOptions = Array.isArray(rfOptions) && rfOptions.length > 0;
+
+        if (!rfHasOptions) {
+          // No options — render as plain assistant bubble
+          const normalizeBullets = (t) => t ? t.replace(/^[•·‣▸▪\-–]\s*/gm, "- ") : t;
+          const parts = [rfContext && rfContext.trim(), rfQuestion].filter(Boolean);
+          const rfText = parts.map(normalizeBullets).join("\n\n");
+          const rfEl = document.createElement("div");
+          rfEl.className = "msg msg-assistant";
+          rfEl.dataset.raw = rfText;
+          rfEl.innerHTML = _renderMarkdown(rfText);
+          _appendCopyButton(rfEl);
+          container.appendChild(rfEl);
+          break;
+        }
+
+        // Has options — answered → disabled card; pending → active card (same as live)
+        const rfAnswered = ev._answered === true;
+        const rfCard = document.createElement("div");
+        rfCard.className = rfAnswered ? "feedback-card feedback-card--submitted" : "feedback-card";
+        let rfHtml = "";
+        if (rfContext && rfContext.trim()) {
+          rfHtml += `<div class="feedback-context msg-assistant">${_renderMarkdown(rfContext)}</div>`;
+        }
+        rfHtml += `<div class="feedback-question msg-assistant">${_renderMarkdown(rfQuestion)}</div>`;
+        rfHtml += `<div class="feedback-options">`;
+        rfOptions.forEach((opt, idx) => {
+          rfHtml += `<button class="feedback-option-btn" data-option-index="${idx}"${rfAnswered ? " disabled" : ""}>${escapeHtml(opt)}</button>`;
+        });
+        rfHtml += `</div>`;
+        rfHtml += `<div class="feedback-hint">${I18n.t("chat.feedback_hint")}</div>`;
+        rfCard.innerHTML = rfHtml;
+
+        // If still pending, wire up click handlers (same as showFeedbackRequest)
+        if (!rfAnswered) {
+          rfCard.querySelectorAll(".feedback-option-btn").forEach(btn => {
+            btn.onclick = () => {
+              rfCard.querySelectorAll(".feedback-option-btn").forEach(b => b.disabled = true);
+              rfCard.classList.add("feedback-card--submitted");
+              const input = $("user-input");
+              if (input) input.value = btn.textContent.trim();
+              _sendMessage();
+            };
+          });
+        }
+
+        container.appendChild(rfCard);
+        break;
+      }
+
       default:
         return; // skip unknown types
     }
@@ -1296,6 +1374,20 @@ const Sessions = (() => {
         }
       });
 
+      // Pre-scan: mark each request_feedback as answered.
+      // A feedback card is disabled as soon as any subsequent history_user_message appears
+      // (user either clicked an option or typed a reply).
+      {
+        let lastFeedbackIdx = -1;
+        events.forEach((ev, i) => {
+          if (ev.type === "request_feedback") { ev._answered = false; lastFeedbackIdx = i; }
+          if (ev.type === "history_user_message" && lastFeedbackIdx >= 0 && i > lastFeedbackIdx) {
+            events[lastFeedbackIdx]._answered = true;
+            lastFeedbackIdx = -1;
+          }
+        });
+      }
+
       // Dedup by created_at: skip rounds already rendered (e.g. arrived via live WS)
       const dedup = _renderedCreatedAt[id] || (_renderedCreatedAt[id] = new Set());
       const frag  = document.createDocumentFragment();
@@ -1637,6 +1729,49 @@ const Sessions = (() => {
     container.appendChild(el);
   }
 
+  // ── Cron group entry (renders the folded "Scheduled Tasks" entry) ─────
+  function _renderCronGroupItem(container, count) {
+    const el = document.createElement("div");
+    el.className = "session-item cron-group-item";
+    el.innerHTML = `
+      <div class="session-body">
+        <div class="session-name">
+          <span class="session-dot dot-idle" style="display:inline-block;opacity:0.6"></span>
+          <span class="session-name__text">📋 ${I18n.t("sessions.cronGroup")} (${count})</span>
+        </div>
+        <div class="session-meta">${I18n.t("sessions.cronGroupMeta", { n: count })}</div>
+      </div>
+    `;
+    el.onclick = () => {
+      _cronView = true;
+      Sessions.renderList();
+    };
+    container.appendChild(el);
+  }
+
+  // ── Chat-section header visibility ────────────────────────────────────
+  function _updateChatHeader(isCronView) {
+    const chatSection   = document.getElementById("chat-section");
+    if (!chatSection) return;
+
+    const normalHeader  = chatSection.querySelector(":scope > .sidebar-divider:first-of-type");
+    const cronHeader    = document.getElementById("cron-view-header");
+    const searchBar     = document.getElementById("session-search-bar");
+    const newSessionBtn = document.getElementById("btn-session-search-toggle");
+
+    if (isCronView) {
+      if (normalHeader) normalHeader.style.display = "none";
+      if (cronHeader)   cronHeader.style.display   = "";
+      if (searchBar)    searchBar.hidden            = true;
+      if (newSessionBtn) newSessionBtn.style.display = "none";
+    } else {
+      if (normalHeader) normalHeader.style.display = "";
+      if (cronHeader)   cronHeader.style.display   = "none";
+      if (searchBar)    searchBar.hidden            = !_searchOpen;
+      // newSessionBtn display managed by renderList's magnifier logic
+    }
+  }
+
   // ── Public API ─────────────────────────────────────────────────────────
   return {
     get all()        { return _sessions; },
@@ -1658,6 +1793,14 @@ const Sessions = (() => {
       _initMessageHistory();
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
+
+      // Cron view back button
+      document.getElementById("btn-cron-back")
+        .addEventListener("click", () => {
+          _cronView = false;
+          Sessions.renderList();
+        });
+
       // Browsers block file:// navigation from http:// pages. Intercept clicks on
       // file:// links and delegate to the backend API.
       // Local deployments (localhost / 127.0.0.1 / ::1): open the file with the
@@ -1702,16 +1845,18 @@ const Sessions = (() => {
     // ── List management ───────────────────────────────────────────────────
 
     /** Populate list from initial session_list WS event (connect only). */
-    setAll(list, hasMore = false) {
+    setAll(list, hasMore = false, cronCount = 0) {
       _sessions.length = 0;
       _sessions.push(...list);
-      _hasMore = !!hasMore;
+      _hasMore   = !!hasMore;
+      _cronCount = cronCount;
     },
 
     /** Insert a newly created session into the local list. */
     add(session) {
       if (!_sessions.find(s => s.id === session.id)) {
         _sessions.push(session);
+        if (session.source === "cron") _cronCount++;
       }
     },
 
@@ -1730,7 +1875,10 @@ const Sessions = (() => {
     /** Remove a session from the list (from session_deleted event). */
     remove(id) {
       const idx = _sessions.findIndex(s => s.id === id);
-      if (idx !== -1) _sessions.splice(idx, 1);
+      if (idx !== -1) {
+        if (_sessions[idx].source === "cron") _cronCount = Math.max(0, _cronCount - 1);
+        _sessions.splice(idx, 1);
+      }
       // Clean up per-session progress state (timer + DOM + logical state)
       Sessions._deleteProgressState(id);
     },
@@ -1772,7 +1920,8 @@ const Sessions = (() => {
         (data.sessions || []).forEach(s => {
           if (!_sessions.find(x => x.id === s.id)) _sessions.push(s);
         });
-        _hasMore = !!data.has_more;
+        _hasMore   = !!data.has_more;
+        _cronCount = data.cron_count || 0;
       } catch (e) {
         console.error("loadMore error:", e);
       } finally {
@@ -1809,7 +1958,8 @@ const Sessions = (() => {
         if (!res.ok) return;
         const data = await res.json();
         _sessions.push(...(data.sessions || []));
-        _hasMore = !!data.has_more;
+        _hasMore   = !!data.has_more;
+        _cronCount = data.cron_count || 0;
       } catch (e) {
         console.error("commitSearch error:", e);
       } finally {
@@ -1994,14 +2144,53 @@ const Sessions = (() => {
       const qEl = document.getElementById("session-search-q");
       if (qClearBtn) qClearBtn.hidden = !(qEl && qEl.value);
 
+      // ── Split cron vs non-cron for folding ───────────────────────────
+      const hasActiveFilter = !!(_filter.q || _filter.type || _filter.date);
+      const isCronView      = _cronView && !hasActiveFilter;
+      const cronSessions    = visible.filter(s => s.source === "cron");
+      const nonCronSessions = visible.filter(s => s.source !== "cron");
+
+      // Update chat-section header based on view mode
+      _updateChatHeader(isCronView);
+
       const list = $("session-list");
       list.innerHTML = "";
-      if (visible.length === 0) {
-        list.innerHTML = `<div class="session-empty">${I18n.t("sessions.empty")}</div>`;
+
+      if (hasActiveFilter) {
+        // Filter active: show all matching results flat, no group entry
+        visible.forEach(s => _renderSessionItem(list, s));
+      } else if (isCronView) {
+        // Cron sub-view: show only cron sessions.
+        // If none are loaded yet, auto-load more pages until we find them.
+        if (cronSessions.length === 0) {
+          if (_hasMore && !_loadingMore) {
+            list.innerHTML = `<div class="session-empty">${I18n.t("sessions.cronLoading")}</div>`;
+            Sessions.loadMore();  // async — will call renderList() again when done
+            return;               // skip empty-state / load-more button for now
+          }
+          if (_loadingMore) {
+            // A loadMore() call is already in flight (its own renderList call
+            // reached us).  Keep the loading indicator so the user never sees
+            // the "no sessions" empty state during the gap.
+            list.innerHTML = `<div class="session-empty">${I18n.t("sessions.cronLoading")}</div>`;
+            return;
+          }
+        }
+        cronSessions.forEach(s => _renderSessionItem(list, s));
+      } else if (_cronCount > 0) {
+        // Normal list view: group entry (uses total count, not just loaded) + non-cron sessions
+        _renderCronGroupItem(list, _cronCount);
+        nonCronSessions.forEach(s => _renderSessionItem(list, s));
       } else {
+        // Normal list view, no cron sessions
         visible.forEach(s => _renderSessionItem(list, s));
       }
 
+      // Empty state fallback
+      if (list.children.length === 0) {
+        list.innerHTML = `<div class="session-empty">${I18n.t("sessions.empty")}</div>`;
+      }
+
       if (_hasMore) list.appendChild(_makeLoadMoreBtn());
 
       // Scroll active session into view so the sidebar always shows the current session.
@@ -2089,6 +2278,8 @@ const Sessions = (() => {
         if (action === "pin") {
           await Sessions.togglePin(session.id);
         } else if (action === "rename") {
+          // Close sidebar on mobile so the rename dialog isn't obscured
+          window.mobileCloseSidebar?.();
           // Find the session item by data-session-id attribute
           const sessionItem = document.querySelector(`.session-item[data-session-id="${session.id}"]`);
           if (sessionItem) {
@@ -2096,6 +2287,8 @@ const Sessions = (() => {
             Sessions._startRename(session.id, nameDiv, session.name);
           }
         } else if (action === "delete") {
+          // Close sidebar on mobile so the delete dialog isn't obscured
+          window.mobileCloseSidebar?.();
           await Sessions.deleteSession(session.id);
         }
       });
@@ -2178,7 +2371,10 @@ const Sessions = (() => {
       // info while the agent is working.
       const inp = $("user-input");
       if (inp) {
-        const key = status === "running" ? "chat.input.placeholderRunning" : "chat.input.placeholder";
+        const mobile = window.innerWidth <= 768;
+        const key = status === "running"
+          ? (mobile ? "chat.input.placeholderRunningMobile" : "chat.input.placeholderRunning")
+          : (mobile ? "chat.input.placeholderMobile"        : "chat.input.placeholder");
         inp.setAttribute("data-i18n-placeholder", key);
         inp.setAttribute("placeholder", I18n.t(key));
       }
@@ -2258,6 +2454,17 @@ const Sessions = (() => {
         sibModel.textContent = s.model || "";
         // Store current session ID on the model element for later use
         sibModel.dataset.sessionId = s.id;
+        if (s.model_id) {
+          sibModel.dataset.modelId = s.model_id;
+        } else {
+          delete sibModel.dataset.modelId;
+        }
+        // Disable model switching while the agent is responding
+        const busy = s.status === "running";
+        sibModel.classList.toggle("sib-model-disabled", busy);
+        sibModel.title = busy
+          ? I18n.t("sib.model.tooltip.busy")
+          : I18n.t("sib.model.tooltip");
       }
       if (sibModelWrap) sibModelWrap.style.display = s.model ? "" : "none";
 
@@ -2288,7 +2495,9 @@ const Sessions = (() => {
       const sibCost = $("sib-cost");
       if (sibCost) {
         if (s.cost_source && s.cost_source !== "estimated") {
-          sibCost.textContent = `$${(s.total_cost || 0).toFixed(2)}`;
+          const symbol = typeof Billing !== "undefined" ? Billing.getCurrencySymbol() : "$";
+          const cost = typeof Billing !== "undefined" ? Billing.convertCost(s.total_cost || 0) : (s.total_cost || 0);
+          sibCost.textContent = `${symbol}${cost.toFixed(2)}`;
         } else {
           sibCost.textContent = "N/A";
         }
@@ -2367,6 +2576,46 @@ const Sessions = (() => {
 
       wrap.style.display = "";
       if (sep) sep.style.display = "";
+
+      // Mobile: bind tap-to-show popup once (flag prevents re-binding on every update)
+      if (!el._signalTapBound) {
+        el._signalTapBound = true;
+        el.addEventListener("click", (e) => {
+          if (window.innerWidth > 768) return;  // desktop: native title tooltip is fine
+          e.stopPropagation();
+          // Remove any existing popup
+          const existing = document.querySelector(".sib-signal-popup");
+          if (existing) { existing.remove(); return; }
+
+          const popup = document.createElement("div");
+          popup.className = "sib-signal-popup";
+          // Format tooltip text: replace " · " with newlines for readability
+          popup.textContent = el.title.replace(/ · /g, "\n");
+          document.body.appendChild(popup);
+
+          // Position: above the signal element, aligned to its left edge
+          const rect = el.getBoundingClientRect();
+          let   left = rect.left;
+          // Prevent overflow off right edge
+          const popupWidth = 220;
+          if (left + popupWidth > window.innerWidth - 8) {
+            left = window.innerWidth - popupWidth - 8;
+          }
+          popup.style.left = left + "px";
+          popup.style.visibility = "hidden";
+          // Use rAF to get actual rendered height before positioning
+          requestAnimationFrame(() => {
+            const popupHeight = popup.getBoundingClientRect().height;
+            popup.style.top  = (rect.top - popupHeight - 6) + "px";
+            popup.style.visibility = "";
+          });
+
+          // Close on next tap anywhere
+          setTimeout(() => {
+            document.addEventListener("click", () => popup.remove(), { once: true });
+          }, 0);
+        });
+      }
     },
 
     // ── Message helpers ────────────────────────────────────────────────────
@@ -2456,14 +2705,16 @@ const Sessions = (() => {
       // :api       => "$0.00123"   (exact, from API response)
       // :price     => "~$0.00123"  (estimated from pricing table)
       // :estimated => "N/A"        (model unknown in pricing table)
-      const cost = ev.cost || 0;
+      const rawCost = ev.cost || 0;
+      const symbol = typeof Billing !== "undefined" ? Billing.getCurrencySymbol() : "$";
+      const cost = typeof Billing !== "undefined" ? Billing.convertCost(rawCost) : rawCost;
       let costStr;
       if (!ev.cost_source || ev.cost_source === "estimated") {
         costStr = "N/A";
       } else if (ev.cost_source === "price") {
-        costStr = `~$${cost.toFixed(5)}`;
+        costStr = `~${symbol}${cost.toFixed(5)}`;
       } else {
-        costStr = `$${cost.toFixed(5)}`;
+        costStr = `${symbol}${cost.toFixed(5)}`;
       }
 
       // Always-visible: label, delta, cache indicator, cost
@@ -3143,6 +3394,7 @@ const Sessions = (() => {
     const modelEl = e.target.closest("#sib-model");
     if (modelEl) {
       e.stopPropagation();
+      if (modelEl.classList.contains("sib-model-disabled")) return;
       const dropdown = $("sib-model-dropdown");
       if (!dropdown) return;
 
@@ -3150,7 +3402,7 @@ const Sessions = (() => {
         dropdown.style.display = "none";
         _isOpen = false;
       } else {
-        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.textContent.trim());
+        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.dataset.modelId || null);
         
         // Calculate position relative to the model element (fixed positioning)
         const rect = modelEl.getBoundingClientRect();
@@ -3173,7 +3425,7 @@ const Sessions = (() => {
   });
 
   // Populate dropdown with available models
-  async function _populateModelDropdown(sessionId, currentModel) {
+  async function _populateModelDropdown(sessionId, currentModelId) {
     const dropdown = $("sib-model-dropdown");
     if (!dropdown) return;
 
@@ -3217,16 +3469,41 @@ const Sessions = (() => {
       });
 
       // ── Model rows ─────────────────────────────────────────────────────
+      const _nameCounts = models.reduce((acc, m) => {
+        acc[m.model] = (acc[m.model] || 0) + 1;
+        return acc;
+      }, {});
+
       models.forEach(m => {
-        console.log("[Model Switcher] Adding model:", m.model, "id:", m.id, "current:", currentModel);
+        console.log("[Model Switcher] Adding model:", m.model, "id:", m.id, "current:", currentModelId);
         const opt = document.createElement("div");
         opt.className = "sib-model-option";
         opt.dataset.modelId = m.id;
-        if (m.model === currentModel) opt.classList.add("current");
+        if (m.id === currentModelId) opt.classList.add("current");
 
         const left = document.createElement("span");
         left.className = "sib-model-name";
-        left.textContent = m.model;
+
+        const nameLine = document.createElement("span");
+        nameLine.className = "sib-model-name-main";
+        nameLine.textContent = m.model;
+        left.appendChild(nameLine);
+
+        if (_nameCounts[m.model] > 1) {
+          left.classList.add("has-sub");
+          const host = (() => {
+            try { return new URL(m.base_url).host; } catch { return m.base_url || ""; }
+          })();
+          const subBits = [host, m.api_key_masked].filter(Boolean);
+          if (subBits.length) {
+            const subLine = document.createElement("span");
+            subLine.className = "sib-model-name-sub";
+            subLine.textContent = subBits.join(" · ");
+            left.appendChild(subLine);
+            opt.title = `${m.model} · ${subBits.join(" · ")}`;
+          }
+        }
+
         opt.appendChild(left);
 
         const right = document.createElement("span");
@@ -3677,3 +3954,7 @@ const Sessions = (() => {
 document.addEventListener("langchange", () => {
   if (Sessions._lastSession) Sessions.updateInfoBar(Sessions._lastSession);
 });
+
+document.addEventListener("currencychange", () => {
+  if (Sessions._lastSession) Sessions.updateInfoBar(Sessions._lastSession);
+});