openclacky 1.5.4 → 1.5.6

data/lib/clacky/web/app.js

@@ -65,6 +65,10 @@ const PANELS = [
 const Router = (() => {
   let _current     = null;  // current view name
   let _params      = {};    // current params (e.g. { id: "abc" } for session view)
+  // Teardown function returned by the current ext-workspace render (if any).
+  // Invoked when leaving the workspace so the extension's WS subscriptions /
+  // timers don't leak across re-entries. See the render contract in ext.js.
+  let _wsTeardown  = null;
   let _skipNextHashChange = false;  // prevent echo loop when we set hash ourselves
 
   // Hide all panels.
@@ -154,6 +158,12 @@ const Router = (() => {
     _mobileCloseSidebar();
 
     // ── Clean up previous state ──────────────────────────────────────────
+    // Leaving the current view — if it was an ext-workspace, run its teardown
+    // so the extension's WS subscriptions / timers don't leak across re-entries.
+    if (typeof _wsTeardown === "function") {
+      try { _wsTeardown(); } catch (_e) { /* extension teardown errors are non-fatal */ }
+      _wsTeardown = null;
+    }
     if (Sessions.activeId) {
       Sessions._cacheActiveAndDeselect();
     }
@@ -316,7 +326,7 @@ const Router = (() => {
         const container = $("ext-slot-main-workspace");
         container.replaceChildren();
         container.style.display = "block";
-        try { ws.render(container, {}); }
+        try { _wsTeardown = ws.render(container, {}); }
         catch (err) { console.error("ext workspace render failed:", err); }
         Sessions.renderList();
         break;
@@ -662,16 +672,23 @@ function showConfirmModal(confId, message) {
 
 // ── DOM event listeners ───────────────────────────────────────────────────
 // Sidebar toggle (with mobile overlay support)
+// Persist the sidebar's visibility so a hard refresh keeps the user's last
+// state instead of always snapping back to "open". (Matches the treatment
+// already given to sidebar *width*, the aside panel, and the todo panel.)
+const _SIDEBAR_HIDDEN_KEY = "clacky-sidebar-hidden";
+
 function _isMobile() { return window.innerWidth <= 768; }
 
 function _closeSidebar() {
   $("sidebar").classList.add("hidden");
   $("sidebar-overlay").classList.remove("active");
+  try { localStorage.setItem(_SIDEBAR_HIDDEN_KEY, "1"); } catch (_e) { /* ignore */ }
 }
 
 function _openSidebar() {
   $("sidebar").classList.remove("hidden");
   if (_isMobile()) $("sidebar-overlay").classList.add("active");
+  try { localStorage.setItem(_SIDEBAR_HIDDEN_KEY, "0"); } catch (_e) { /* ignore */ }
 }
 
 function _toggleSidebar() {
@@ -737,8 +754,15 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
   });
 })();
 
-// On mobile: start with sidebar hidden
-if (_isMobile()) _closeSidebar();
+// On mobile: start with sidebar hidden.
+// On desktop: restore the user's last sidebar visibility (persisted).
+if (_isMobile()) {
+  _closeSidebar();
+} else {
+  try {
+    if (localStorage.getItem(_SIDEBAR_HIDDEN_KEY) === "1") _closeSidebar();
+  } catch (_e) { /* ignore */ }
+}
 
 // On mobile: auto-close sidebar when switching sessions/pages
 function _mobileCloseSidebar() {
@@ -771,6 +795,7 @@ Sidebar.init();
 Settings.init();
 Channels.init();
 Sessions.init();
+ChatNavigator.init();
 
 // Boot sequence:
 //   1. Brand check    — shows a dismissible top banner if license activation is needed.

data/lib/clacky/web/components/chat-navigator.js

@@ -0,0 +1,260 @@
+// ── Chat Navigator - vertical minimap on the right edge of the chat ────────
+//
+// Shows one bar per user message. Hovering a bar opens a scrollable popup
+// listing every user message preview; clicking a bar or popup item scrolls
+// the chat to that message.
+//
+// The navigator element is absolutely positioned inside #chat-main and its
+// vertical bounds are synced to #messages via ResizeObserver so it never
+// overlaps the composer / info bar below.
+//
+// Depends on: global $ helper (app.js), I18n.
+// ───────────────────────────────────────────────────────────────────────────
+"use strict";
+
+(() => {
+  const $ = (id) => document.getElementById(id);
+
+  const NAV_SELECTOR = ".msg-user-wrap";
+
+  let nav, track, popup, popupList;
+  let messages, chatMain;
+  let items = [];          // [{ el, bar, popupItem, type, preview }]
+  let activeIdx = -1;
+  let mo, ro;
+  let rebuildTimer = null;
+  let scrollTimer = null;
+  let hideTimer = null;
+  let hoveredIdx = -1;
+
+  // ── Preview text extraction ────────────────────────────────────────────
+
+  function _previewFor(el) {
+    const bubble = el.querySelector(".msg-user");
+    if (!bubble) return "";
+    const clone = bubble.cloneNode(true);
+    clone
+      .querySelectorAll("img, .msg-pdf-badge, .msg-user-action-bar, .msg-time")
+      .forEach((e) => e.remove());
+    const text = clone.textContent.trim();
+    return text || (I18n.t("chat.nav.empty") || "(empty)");
+  }
+
+  // ── Position sync ───────────────────────────────────────────────────────
+
+  function _syncBounds() {
+    if (!nav || !messages || !chatMain) return;
+    const msgRect = messages.getBoundingClientRect();
+    const mainRect = chatMain.getBoundingClientRect();
+    nav.style.top = msgRect.top - mainRect.top + "px";
+    nav.style.height = msgRect.height + "px";
+  }
+
+  // ── Rebuild bars + popup list ───────────────────────────────────────────
+
+  function _scheduleRebuild() {
+    clearTimeout(rebuildTimer);
+    rebuildTimer = setTimeout(_rebuild, 120);
+  }
+
+  function _rebuild() {
+    if (!messages || !track) return;
+    const els = Array.from(messages.querySelectorAll(NAV_SELECTOR));
+    items = els.map((el) => ({
+      el,
+      preview: _previewFor(el),
+    }));
+
+    // Hide navigator when content fits without scrolling
+    const scrollable = messages.scrollHeight > messages.clientHeight + 40;
+    nav.style.display = scrollable && items.length > 1 ? "" : "none";
+    if (!scrollable || items.length <= 1) return;
+
+    // Build bars
+    track.innerHTML = "";
+    items.forEach((item, i) => {
+      const bar = document.createElement("div");
+      bar.className = "chat-nav-bar";
+      bar.dataset.idx = String(i);
+      bar.title = item.preview.slice(0, 120);
+      bar.addEventListener("mouseenter", () => _onBarHover(i));
+      bar.addEventListener("click", () => _scrollToIdx(i));
+      track.appendChild(bar);
+      item.bar = bar;
+    });
+
+    // Build popup list (lazy: build once per rebuild)
+    popupList.innerHTML = "";
+    items.forEach((item, i) => {
+      const li = document.createElement("div");
+      li.className = "chat-nav-popup-item";
+      li.dataset.idx = String(i);
+      li.innerHTML =
+        `<span class="chat-nav-popup-item-text">${escapeHtml(item.preview)}</span>`;
+      li.addEventListener("mouseenter", () => _onItemHover(i));
+      li.addEventListener("click", () => _scrollToIdx(i));
+      popupList.appendChild(li);
+      item.popupItem = li;
+    });
+
+    activeIdx = -1;
+    _updateActive();
+  }
+
+  // ── Active bar tracking ─────────────────────────────────────────────────
+
+  function _updateActive() {
+    if (!items.length) return;
+    const threshold = messages.getBoundingClientRect().top + 30;
+    let idx = 0;
+    for (let i = 0; i < items.length; i++) {
+      if (!items[i].el || !items[i].el.isConnected) {
+        _scheduleRebuild();
+        return;
+      }
+      const top = items[i].el.getBoundingClientRect().top;
+      if (top <= threshold) idx = i;
+      else break;
+    }
+    if (idx !== activeIdx) {
+      activeIdx = idx;
+      items.forEach((item, i) => {
+        item.bar.classList.toggle("active", i === idx);
+      });
+    }
+  }
+
+  function _onScroll() {
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(_updateActive, 80);
+  }
+
+  // ── Popup interaction ───────────────────────────────────────────────────
+
+  function _onBarHover(idx) {
+    clearTimeout(hideTimer);
+    _showPopup(idx);
+  }
+
+  function _onItemHover(idx) {
+    clearTimeout(hideTimer);
+    hoveredIdx = idx;
+    items.forEach((item, i) => {
+      item.bar.classList.toggle("hovered", i === idx);
+    });
+  }
+
+  function _showPopup(idx) {
+    if (!popup || !items.length) return;
+    hoveredIdx = idx;
+    popup.style.display = "flex";
+
+    items.forEach((item, i) => {
+      item.popupItem.classList.toggle("highlighted", i === idx);
+      item.bar.classList.toggle("hovered", i === idx);
+    });
+
+    // Position popup vertically centered on the hovered bar
+    const bar = items[idx].bar;
+    const navRect = nav.getBoundingClientRect();
+    const barRect = bar.getBoundingClientRect();
+    const barCenter = barRect.top + barRect.height / 2 - navRect.top;
+    popup.style.top = "";
+    popup.style.bottom = "";
+    const popupHeight = popup.offsetHeight;
+    let top = barCenter - popupHeight / 2;
+    top = Math.max(0, Math.min(top, navRect.height - popupHeight));
+    popup.style.top = top + "px";
+
+    const target = items[idx].popupItem;
+    if (target) {
+      const listRect = popupList.getBoundingClientRect();
+      const itemRect = target.getBoundingClientRect();
+      const offset =
+        itemRect.top - listRect.top - (listRect.height - itemRect.height) / 2;
+      popupList.scrollTop += offset;
+    }
+  }
+
+  function _hidePopup() {
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      if (!popup) return;
+      popup.style.display = "none";
+      hoveredIdx = -1;
+      items.forEach((item) => {
+        item.bar.classList.remove("hovered");
+        item.popupItem.classList.remove("highlighted");
+      });
+    }, 200);
+  }
+
+  // ── Scroll to message ───────────────────────────────────────────────────
+
+  function _scrollToIdx(idx) {
+    if (!items[idx] || !items[idx].el) return;
+    const el = items[idx].el;
+    const msgRect = messages.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const offset = elRect.top - msgRect.top;
+    messages.scrollTop += offset - 12;
+    _hidePopup();
+  }
+
+  // ── Init ────────────────────────────────────────────────────────────────
+
+  function init() {
+    messages = $("messages");
+    chatMain = $("chat-main");
+    if (!messages || !chatMain) return;
+
+    nav = document.createElement("div");
+    nav.className = "chat-navigator";
+    nav.style.display = "none";
+    nav.innerHTML =
+      '<div class="chat-nav-track"></div>' +
+      '<div class="chat-nav-popup" style="display:none">' +
+      '<div class="chat-nav-popup-header">' +
+      '<span class="chat-nav-popup-title"></span>' +
+      "</div>" +
+      '<div class="chat-nav-popup-list"></div>' +
+      "</div>";
+    chatMain.appendChild(nav);
+    track = nav.querySelector(".chat-nav-track");
+    popup = nav.querySelector(".chat-nav-popup");
+    popupList = nav.querySelector(".chat-nav-popup-list");
+
+    const titleEl = nav.querySelector(".chat-nav-popup-title");
+    if (titleEl) titleEl.textContent = I18n.t("chat.nav.title") || "Messages";
+
+    // Hover open / leave close
+    nav.addEventListener("mouseenter", () => clearTimeout(hideTimer));
+    nav.addEventListener("mouseleave", _hidePopup);
+
+    // Observe message children changes (add / remove / clear)
+    mo = new MutationObserver(() => _scheduleRebuild());
+    mo.observe(messages, { childList: true });
+
+    // Sync navigator bounds when layout changes
+    ro = new ResizeObserver(() => {
+      _syncBounds();
+      _scheduleRebuild();
+    });
+    ro.observe(chatMain);
+    ro.observe(messages);
+
+    // Track scroll position for active bar
+    messages.addEventListener("scroll", _onScroll, { passive: true });
+
+    // Re-render title on language change
+    document.addEventListener("langchange", () => {
+      const t = nav.querySelector(".chat-nav-popup-title");
+      if (t) t.textContent = I18n.t("chat.nav.title") || "Messages";
+    });
+
+    _syncBounds();
+    _scheduleRebuild();
+  }
+
+  window.ChatNavigator = { init };
+})();

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

@@ -819,13 +819,13 @@ const BillingView = (() => {
           <div class="billing-cell billing-cell-number billing-cell-total">${_formatCompact(totalTokens)}</div>
           <div class="billing-cell billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)}</div>
           <div class="billing-cell billing-cell-number billing-cell-miss">${_formatCompact(cacheMiss)}</div>
-          <div class="billing-cell billing-cell-number">${_formatCompact(completionTokens)}</div>
+          <div class="billing-cell billing-cell-number billing-cell-output">${_formatCompact(completionTokens)}</div>
           <div class="billing-cell billing-cell-cost">${Billing.getCurrencySymbol()}${_formatCost(totalCost)}</div>
           <div class="billing-cell billing-cell-time">${lastRequest}</div>
           <div class="billing-session-numbers-row">
             <span class="billing-cell-number">${_formatCompact(totalTokens)} tok</span>
             <span class="billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)} hit</span>
-            <span class="billing-cell-number">${_formatCompact(completionTokens)} out</span>
+            <span class="billing-cell-number billing-cell-output">${_formatCompact(completionTokens)} out</span>
             <span class="billing-cell-cost">${Billing.getCurrencySymbol()}${_formatCost(totalCost)}</span>
             <span class="billing-cell-time">${lastRequest}</span>
           </div>

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

@@ -237,7 +237,11 @@ const BrandView = (() => {
       const hasLogo = !!(info.logo_url && logoImg);
 
       if (hasLogo) {
-        if (logoImg.src && logoImg.src === info.logo_url) {
+        const normalizedSrc = logoImg.src ? logoImg.src.replace(/\/$/, "") : "";
+        const normalizedUrl = info.logo_url.replace(/\/$/, "");
+        if (normalizedSrc === normalizedUrl) {
+          logoImg.style.display = "";
+          if (brandWrap) brandWrap.classList.add("has-logo");
           _applyFavicon(info.logo_url);
         } else {
           const img = new Image();