openclacky 1.3.5 → 1.3.7

data/lib/clacky/web/sessions.js

@@ -41,6 +41,7 @@ const Sessions = (() => {
   let   _searchToken       = 0;       // monotonic counter; in-flight requests check against this
   let   _cronView          = false;  // are we in the cron sub-view?
   let   _cronCount         = 0;      // total cron sessions from server
+  let   _latestCronUpdatedAt = null; // updated_at of the newest cron session (for virtual entry sort position)
   // ── Cron sub-view independent pagination (commit 2) ──────────────────────
   // The folded cron sub-view paginates *independently* of the outer list so
   // that "Load more" inside it never advances the outer list's cursor, and so
@@ -292,6 +293,25 @@ const Sessions = (() => {
 
   let _userScrolledUp = false;  // true if user manually scrolled away from bottom
 
+  let _agentsById = null;
+  let _agentsLoadingPromise = null;
+
+  function _ensureAgentsLoaded() {
+    if (_agentsById) return Promise.resolve(_agentsById);
+    if (_agentsLoadingPromise) return _agentsLoadingPromise;
+    _agentsLoadingPromise = fetch("/api/agents")
+      .then(r => (r.ok ? r.json() : { agents: [] }))
+      .then(data => {
+        const map = {};
+        ((data && data.agents) || []).forEach(a => { map[a.id] = a; });
+        _agentsById = map;
+        return map;
+      })
+      .catch(() => (_agentsById = {}))
+      .finally(() => { _agentsLoadingPromise = null; });
+    return _agentsLoadingPromise;
+  }
+
   function _isAtBottom(container) {
     if (!container) return false;
     const threshold = 150;
@@ -449,76 +469,9 @@ const Sessions = (() => {
   // we call addEventListener directly (no ?. / no `if` guards). If any is
   // missing, it means HTML and JS drifted and we want the loud error.
   function _initNewSessionControls() {
-    // Split button: main (quick create)
     document.getElementById("btn-new-session-inline")
-      .addEventListener("click", () => Sessions.create("general"));
-
-    // Split button: arrow — show dropdown on hover, hide when leaving the whole wrap
-    const arrow = document.getElementById("btn-new-session-arrow");
-    const wrap  = arrow.closest(".btn-split-wrap");
-    const dd    = document.getElementById("new-session-dropdown");
-
-    arrow.addEventListener("mouseenter", () => { dd.hidden = false; });
-    dd.addEventListener("mouseenter",    () => { dd.hidden = false; });
-    wrap.addEventListener("mouseleave",  () => { dd.hidden = true; });
-    dd.addEventListener("mouseleave",    () => { dd.hidden = true; });
-
-    // Dropdown item "Advanced Options…"
-    document.addEventListener("click", (e) => {
-      if (e.target && e.target.id === "btn-new-session-modal") {
-        dd.hidden = true;
-        Sessions.openNewSessionModal();
-      } else if (!wrap.contains(e.target)) {
-        dd.hidden = true;
-      }
-    });
-
-    // Welcome screen "+ New Session" button
-    document.getElementById("btn-welcome-new")
-      .addEventListener("click", () => Sessions.create("general"));
-
-    // Welcome screen starter chips: create a session, then prefill the prompt
-    document.querySelectorAll(".chip[data-welcome-prompt]").forEach((chip) => {
-      chip.addEventListener("click", async () => {
-        await Sessions.create("general");
-        const prompt = I18n.t(chip.dataset.welcomePrompt);
-        const input  = document.getElementById("user-input");
-        if (input && prompt) {
-          input.value = prompt;
-          input.focus();
-          input.dispatchEvent(new Event("input", { bubbles: true }));
-        }
-      });
-    });
-
-    // Modal: cancel / create / overlay click
-    document.getElementById("new-session-cancel")
-      .addEventListener("click", () => Sessions.closeNewSessionModal());
-    document.getElementById("new-session-create")
-      .addEventListener("click", () => Sessions.createFromModal());
-    document.getElementById("new-session-modal")
-      .addEventListener("click", (e) => {
-        // Only close when the click lands on the overlay itself, not on
-        // the inner dialog panel.
-        if (e.target.id === "new-session-modal") {
-          Sessions.closeNewSessionModal();
-        }
-      });
-
-    // Working-directory browse button → reuses the session picker in
-    // session-less mode (no session exists yet, so it browses via /api/dirs).
-    const browseBtn = document.getElementById("new-session-browse-btn");
-    if (browseBtn) {
-      browseBtn.addEventListener("click", async () => {
-        const dirInput = document.getElementById("new-session-directory");
-        const start = dirInput ? dirInput.value.trim() : "";
-        const picked = await window.openDirectoryPicker(start, null);
-        if (picked && dirInput) dirInput.value = picked;
-      });
-    }
+      .addEventListener("click", () => { location.hash = "#new"; });
 
-    // Load-more sessions button is rendered dynamically by renderList(),
-    // so we listen via event delegation.
     document.addEventListener("click", (e) => {
       if (e.target && e.target.id === "btn-load-more-sessions") {
         Sessions.loadMore();
@@ -638,11 +591,11 @@ const Sessions = (() => {
 
   function _addImageFile(file) {
     if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-      alert(`Unsupported image type: ${file.type}\nSupported: PNG, JPEG, GIF, WEBP`);
+      alert(I18n.t("chat.file.unsupportedType", { type: file.type }));
       return;
     }
     if (file.size > MAX_IMAGE_SIZE) {
-      alert(`Image too large: ${file.name} (max 5 MB)`);
+      alert(I18n.t("chat.file.imageTooLarge", { name: file.name, max: "5 MB" }));
       return;
     }
     const seq = ++_imageSeq;
@@ -654,12 +607,12 @@ const Sessions = (() => {
         _pendingImages.push({ dataUrl, name: displayName, mimeType: file.type === "image/png" ? "image/png" : "image/jpeg", seq });
         _renderAttachmentPreviews();
       })
-      .catch(err => alert(`Image processing failed: ${err.message}`));
+      .catch(err => alert(I18n.t("chat.file.processFailed", { msg: err.message })));
   }
 
   function _addGenericFile(file) {
     if (file.size > MAX_FILE_BYTES) {
-      alert(`File too large: ${file.name} (max 32 MB)`);
+      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "32 MB" }));
       return;
     }
     // Upload file to server via HTTP — only the path is returned, no base64 in memory
@@ -668,7 +621,7 @@ const Sessions = (() => {
     fetch("/api/upload", { method: "POST", body: formData })
       .then(r => r.json())
       .then(data => {
-        if (!data.ok) { alert(`Upload failed: ${data.error}`); return; }
+        if (!data.ok) { alert(I18n.t("chat.file.uploadFailed", { msg: data.error })); return; }
         _pendingFiles.push({
           name:      data.name,
           path:      data.path,
@@ -2165,11 +2118,22 @@ const Sessions = (() => {
       ? `<span class="session-badge session-badge--${s.source}">${I18n.t(badgeKey)}</span>`
       : "";
 
-    // Coding profile badge (agent_profile === "coding"). Neutral styling so
-    // it lives peacefully with the source badge and the status dot.
-    const codingBadgeHtml = s.agent_profile === "coding"
-      ? `<span class="session-badge session-badge--coding">${I18n.t("sessions.badge.coding")}</span>`
-      : "";
+    // Agent profile badge: any non-general profile gets a badge. Coding
+    // (built-in) keeps its i18n label + hollow neutral style; extension /
+    // custom agents fall back to their configured title (or profile id).
+    let agentBadgeHtml = "";
+    const profile = s.agent_profile;
+    if (profile && profile !== "general") {
+      if (profile === "coding") {
+        agentBadgeHtml = `<span class="session-badge session-badge--coding">${I18n.t("sessions.badge.coding")}</span>`;
+      } else {
+        const meta = _agentsById && _agentsById[profile];
+        const isZh = I18n.lang && I18n.lang().startsWith("zh");
+        const label = (meta && ((isZh && meta.title_zh) || meta.title)) || profile;
+        const safeLabel = escapeHtml(label);
+        agentBadgeHtml = `<span class="session-badge session-badge--agent" title="${safeLabel}">${safeLabel}</span>`;
+      }
+    }
 
     // Pin icon (always visible for pinned sessions)
     const pinIcon = s.pinned ? `<span class="session-pin-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(45deg);display:block"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg></span>` : "";
@@ -2186,7 +2150,7 @@ const Sessions = (() => {
 
     el.innerHTML = `
       <div class="session-body">
-        <div class="session-name">${dotHtml}<span class="session-name__text">${nameHtml}</span>${badgeHtml}${codingBadgeHtml}${pinIcon}</div>
+        <div class="session-name">${dotHtml}<span class="session-name__text">${nameHtml}</span>${badgeHtml}${agentBadgeHtml}${pinIcon}</div>
         <div class="session-meta">${metaText}</div>
         ${snippetHtml}
       </div>
@@ -2324,6 +2288,7 @@ const Sessions = (() => {
       _initComposer();
       _initSearch();
       _initMessageHistory();
+      _ensureAgentsLoaded().then(() => Sessions.renderList());
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
 
@@ -2378,11 +2343,12 @@ const Sessions = (() => {
     // ── List management ───────────────────────────────────────────────────
 
     /** Populate list from initial session_list WS event (connect only). */
-    setAll(list, hasMore = false, cronCount = 0) {
+    setAll(list, hasMore = false, cronCount = 0, latestCronUpdatedAt = null) {
       _sessions.length = 0;
       _sessions.push(...list);
-      _hasMore   = !!hasMore;
-      _cronCount = cronCount;
+      _hasMore              = !!hasMore;
+      _cronCount            = cronCount;
+      _latestCronUpdatedAt  = latestCronUpdatedAt || null;
     },
 
     /** Insert a newly created session into the local list. */
@@ -2433,6 +2399,14 @@ const Sessions = (() => {
       } else {
         _sessions.unshift({ id, ...fields });
       }
+      // Keep _latestCronUpdatedAt current when a cron session is patched/added.
+      const updated = _sessions.find(s => s.id === id);
+      if (updated?.source === "cron") {
+        const t = updated.updated_at || updated.created_at;
+        if (t && (!_latestCronUpdatedAt || t > _latestCronUpdatedAt)) {
+          _latestCronUpdatedAt = t;
+        }
+      }
     },
 
     /** Remove a session from the list (from session_deleted event). */
@@ -2460,21 +2434,17 @@ const Sessions = (() => {
       Sessions.renderList();
 
       try {
-        // Cursor: oldest activity time (updated_at, falling back to
-        // created_at) in the current list, EXCLUDING pinned sessions. The
-        // backend always returns ALL pinned sessions on the first page (they
-        // bypass pagination), so their time is irrelevant for the cursor.
-        // Including them here would cause the cursor to jump too far back and
-        // skip sessions between the oldest pinned one and the real
-        // last-loaded non-pinned row.
+        // Cursor: oldest activity time of non-pinned, non-cron sessions.
+        // Cron sessions are excluded from the normal list pagination and have
+        // their own independent cursor (_cronBefore) in the sub-view.
         const oldest = _sessions.reduce((min, s) => {
-          if (s.pinned) return min;                       // ignore pinned
+          if (s.pinned || s.source === "cron") return min;
           const t = s.updated_at || s.created_at;
           if (!t) return min;
           return (!min || t < min) ? t : min;
         }, null);
 
-        const params = new URLSearchParams({ limit: "20" });
+        const params = new URLSearchParams({ limit: "20", exclude_type: "cron" });
         if (oldest)          params.set("before", oldest);
         if (_filter.q)       params.set("q",    _filter.q);
         if (_filter.date)    params.set("date", _filter.date);
@@ -2487,8 +2457,9 @@ const Sessions = (() => {
         (data.sessions || []).forEach(s => {
           if (!_sessions.find(x => x.id === s.id)) _sessions.push(s);
         });
-        _hasMore   = !!data.has_more;
-        _cronCount = data.cron_count || 0;
+        _hasMore             = !!data.has_more;
+        _cronCount           = data.cron_count ?? _cronCount;
+        if (data.latest_cron_updated_at) _latestCronUpdatedAt = data.latest_cron_updated_at;
       } catch (e) {
         console.error("loadMore error:", e);
       } finally {
@@ -2884,35 +2855,28 @@ const Sessions = (() => {
         }
         cronSessions.forEach(s => _renderSessionItem(list, s));
       } else if (_cronCount > 0) {
-        // Normal list view: the cron group entry is a *virtual* row that
-        // participates in the time-ordering instead of being pinned to the
-        // top. We walk the already-sorted `visible` list and drop the group
-        // entry at the position of the newest (first-encountered) cron
-        // session — so it sits exactly where the latest folded cron task
-        // would sort by created_at. Pinning is intentionally ignored for the
-        // entry itself: a pinned cron session only takes effect *inside* the
-        // folded sub-view, not on the outer entry.
-        const cronHasRunning = cronSessions.some(s => s.status === "running");
+        // Normal list view: virtual cron group entry positioned by _latestCronUpdatedAt.
+        // Walk the sorted non-cron list and insert the entry at the first row
+        // whose time is older than the newest cron session's updated_at.
+        const cronHasRunning = _sessions.some(s => s.source === "cron" && s.status === "running");
+        const nonCron = visible.filter(s => s.source !== "cron");
         let cronEntryRendered = false;
-        visible.forEach(s => {
-          if (s.source === "cron") {
-            // Render the group entry once, at the first (newest) cron slot;
-            // skip every individual cron session in the flat list.
-            if (!cronEntryRendered) {
+
+        nonCron.forEach(s => {
+          if (!cronEntryRendered && !s.pinned && _latestCronUpdatedAt) {
+            const t = s.updated_at || s.created_at;
+            if (!t || t < _latestCronUpdatedAt) {
               _renderCronGroupItem(list, _cronCount, cronHasRunning);
               cronEntryRendered = true;
             }
-            return;
           }
           _renderSessionItem(list, s);
         });
-        // NOTE: we intentionally do NOT append a fallback entry when no cron
-        // session is loaded yet. The group entry is a virtual row that must
-        // ride along with pagination: it only appears at the sort slot of the
-        // first loaded cron session. If the newest cron lives on a later page,
-        // the entry simply shows up once that page is loaded — rather than
-        // being forced onto the bottom of page 1 (which would mislead the
-        // sort position and miss the running state of an unpaged cron).
+        // If no insertion point found (all normal sessions are newer, or list is empty),
+        // append the entry at the bottom of the loaded rows.
+        if (!cronEntryRendered) {
+          _renderCronGroupItem(list, _cronCount, cronHasRunning);
+        }
       } else {
         // Normal list view, no cron sessions
         visible.forEach(s => _renderSessionItem(list, s));
@@ -2937,14 +2901,22 @@ const Sessions = (() => {
       // has scrolled away to browse other sessions.
       if (scrollToActive) {
         const activeEl = list.querySelector(".session-item.active");
-        if (activeEl) {
-          // If the active session is the very first item, scroll to top of the sidebar
-          // container so sticky headers / expanded panels don't obscure it.
-          if (activeEl === list.firstElementChild) {
-            const sidebarList = document.getElementById("sidebar-list");
-            if (sidebarList) sidebarList.scrollTop = 0;
-          } else {
-            activeEl.scrollIntoView({ block: "nearest" });
+        const sidebarList = document.getElementById("sidebar-list");
+        if (activeEl && sidebarList) {
+          // Only scroll when the active row is not already fully visible.
+          // The "Sessions" divider is position:sticky at the top of
+          // #sidebar-list, so the usable viewport starts *below* it — treat
+          // that as the top edge, otherwise a row tucked under the header
+          // reads as "visible" and never gets revealed.
+          const header = sidebarList.querySelector(".sidebar-divider");
+          const headerH = (header && header.offsetParent) ? header.offsetHeight : 0;
+          const listRect = sidebarList.getBoundingClientRect();
+          const rowRect = activeEl.getBoundingClientRect();
+          const topEdge = listRect.top + headerH;
+          if (rowRect.top < topEdge) {
+            sidebarList.scrollTop += rowRect.top - topEdge;
+          } else if (rowRect.bottom > listRect.bottom) {
+            sidebarList.scrollTop += rowRect.bottom - listRect.bottom;
           }
         }
       }
@@ -3189,7 +3161,7 @@ const Sessions = (() => {
     /** Update the session info bar below the chat header with current session metadata. */
     updateInfoBar(s) {
       this._lastSession = s;
-      if (window.Workspace) Workspace.onSession(s);
+      if (Clacky.Workspace) Clacky.Workspace.onSession(s);
       if (!s) {
         // Hide all spans when no session
         ["sib-id", "sib-status", "sib-dir", "sib-mode", "sib-model", "sib-reasoning", "sib-tasks", "sib-cost"].forEach(id => {
@@ -4028,187 +4000,8 @@ const Sessions = (() => {
       _pendingMessage = null;
       return msg;
     },
-
-    // ── New Session Modal ──────────────────────────────────────────────────
-
-    /** Open the New Session modal with configuration options. */
-    openNewSessionModal() {
-      const modal = $("new-session-modal");
-      if (!modal) return;
-
-      // Populate model dropdown from configured models
-      _populateModelDropdown();
-
-      // Set default working directory to an absolute path (home/clacky_workspace).
-      const dirInput = $("new-session-directory");
-      if (dirInput && !dirInput.value) {
-        fetch("/api/dirs")
-          .then(r => r.ok ? r.json() : null)
-          .then(data => {
-            const home = data && data.home;
-            if (home && !dirInput.value) {
-              dirInput.value = home.replace(/\/+$/, "") + "/clacky_workspace";
-            }
-          })
-          .catch(() => {});
-      }
-
-      // Setup agent type change listener to show/hide init project checkbox
-      const agentSelect = $("new-session-agent");
-      const initProjectField = $("new-session-init-project-field");
-      
-      if (agentSelect && initProjectField) {
-        // Set initial state based on current selection
-        initProjectField.style.display = agentSelect.value === "coding" ? "block" : "none";
-        
-        // Listen for changes
-        agentSelect.addEventListener("change", function() {
-          initProjectField.style.display = this.value === "coding" ? "block" : "none";
-        });
-      }
-
-      // Show modal
-      modal.style.display = "flex";
-    },
-
-    /** Close the New Session modal. */
-    closeNewSessionModal() {
-      const modal = $("new-session-modal");
-      if (modal) modal.style.display = "none";
-    },
-
-    /** Create session from modal form data. */
-    async createFromModal() {
-      const agentSelect = $("new-session-agent");
-      const nameInput = $("new-session-name");
-      const modelSelect = $("new-session-model");
-      const dirInput = $("new-session-directory");
-      const initCheckbox = $("new-session-init-project");
-      const createBtn = $("new-session-create");
-
-      const agentProfile = agentSelect ? agentSelect.value : "general";
-      const customName = nameInput ? nameInput.value.trim() : "";
-      // The dropdown's value is the model's stable runtime id (see
-      // _populateModelDropdown). Using the id — not the model *name* — lets
-      // the backend switch to the right full model entry (api_key, base_url,
-      // anthropic_format) instead of mutating the current default entry's
-      // name in place, which caused "unknown model <name>" errors when the
-      // chosen model belonged to a different provider than the default.
-      const selectedModelId = modelSelect ? modelSelect.value : "";
-      const workingDir = dirInput ? dirInput.value.trim() : "";
-      const initProject = initCheckbox ? initCheckbox.checked : false;
-
-      // Auto-generate name if not provided
-      let name = customName;
-      if (!name) {
-        const maxN = _sessions.reduce((max, s) => {
-          const m = s.name.match(/^Session (\d+)$/);
-          return m ? Math.max(max, parseInt(m[1], 10)) : max;
-        }, 0);
-        name = "Session " + (maxN + 1);
-      }
-
-      if (createBtn) createBtn.disabled = true;
-
-      try {
-        const payload = {
-          name,
-          agent_profile: agentProfile,
-          source: "manual"
-        };
-
-        // Add optional fields
-        if (workingDir) payload.working_dir = workingDir;
-        if (selectedModelId) payload.model_id = selectedModelId;
-
-        const res = await fetch("/api/sessions", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload)
-        });
-        const data = await res.json();
-
-        if (!res.ok) {
-          const msg = data.error || "unknown error";
-          const friendly = res.status === 409
-            ? I18n.t("sessions.dirNotEmpty")
-            : I18n.t("sessions.createError") + msg;
-          alert(friendly);
-          if (createBtn) createBtn.disabled = false;
-          return;
-        }
-
-        const session = data.session;
-        if (!session) return;
-
-        // Close modal and reset form
-        Sessions.closeNewSessionModal();
-        if (nameInput) nameInput.value = "";
-        if (dirInput) dirInput.value = "";
-        if (initCheckbox) initCheckbox.checked = false;
-
-        // Add to list and select
-        Sessions.add(session);
-        Sessions.renderList();
-        Sessions.select(session.id);
-
-        // If init project was checked, send /new command
-        if (initProject) {
-          Sessions.setPendingMessage(session.id, "/new");
-        }
-      } catch (e) {
-        alert(I18n.t("sessions.createError") + e.message);
-      } finally {
-        if (createBtn) createBtn.disabled = false;
-      }
-    },
   };
 
-  // ── Helper: Populate model dropdown ────────────────────────────────────────
-
-  async function _populateModelDropdown() {
-    const modelSelect = $("new-session-model");
-    if (!modelSelect) return;
-
-    try {
-      const res = await fetch("/api/config");
-      const data = await res.json();
-      const models = data.models || [];
-
-      modelSelect.innerHTML = "";
-
-      if (models.length === 0) {
-        const opt = document.createElement("option");
-        opt.value = "";
-        opt.textContent = "No models configured";
-        modelSelect.appendChild(opt);
-        return;
-      }
-
-      // Add each configured model (CLI-style format).
-      // The option's value is the model's stable runtime id — not the bare
-      // model name — so the backend can switch to the exact model entry
-      // (with matching api_key / base_url / anthropic_format) when the user
-      // chooses a non-default model. See createFromModal + build_session.
-      models.forEach(m => {
-        const opt = document.createElement("option");
-        opt.value = m.id || "";
-
-        // Format: [default] abs-claude-sonnet-4-5 (clacky...8825)
-        const typeBadge = m.type === "default" ? "[default] " : "";
-        const label = `${typeBadge}${m.model} (${m.api_key_masked})`;
-        opt.textContent = label;
-
-        // Pre-select default model
-        if (m.type === "default") opt.selected = true;
-        modelSelect.appendChild(opt);
-      });
-    } catch (e) {
-      console.error("Failed to load models:", e);
-      modelSelect.innerHTML = '<option value="">Error loading models</option>';
-    }
-  }
-
   return Sessions;
 })();
 
@@ -5681,7 +5474,7 @@ const Sessions = (() => {
 // ── Session Info Bar Reasoning Effort Switcher ────────────────────────────
 (function() {
   let _isOpen = false;
-  const LEVELS = ["off", "low", "medium", "high"];
+  const LEVELS = ["off", "low", "medium", "high", "xhigh"];
 
   document.addEventListener("click", async (e) => {
     const el = e.target.closest("#sib-reasoning");
@@ -5790,3 +5583,5 @@ document.addEventListener("currencychange", () => {
     scrollTimer = setTimeout(() => sidebarList.classList.remove("is-scrolling"), 1000);
   }, { passive: true });
 })();
+
+Clacky.Sessions = Sessions;

data/lib/clacky/web/settings.js

@@ -20,7 +20,7 @@ const Settings = (() => {
     _loadBrand();
     _loadBrowserStatus();
     _initNetworkSettings();
-    if (window.Backup) Backup.load();
+    if (Clacky.Backup) Clacky.Backup.load();
     _applyAboutTabVisibility();
   }
 

data/lib/clacky/web/skills.js

@@ -452,3 +452,5 @@ const SkillAC = (() => {
     handleKey: _handleKey,
   };
 })();
+
+Clacky.SkillAC = SkillAC;

data/lib/clacky/web/theme.js

@@ -30,11 +30,13 @@ const Theme = (() => {
       // Icon shows what you'd switch TO, not what you are on.
       if (theme === "light") {
         // In light mode → show moon (click to go dark)
+        headerToggle.title = I18n.t("header.theme.toDark");
         headerToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
         </svg>`;
       } else {
         // In dark mode → show sun (click to go light)
+        headerToggle.title = I18n.t("header.theme.toLight");
         headerToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <circle cx="12" cy="12" r="4"/>
           <path d="M12 2v2"/>

data/lib/clacky/web/ws-dispatcher.js

@@ -180,7 +180,7 @@ WS.onEvent(ev => {
 
     // ── Session list ───────────────────────────────────────────────────
     case "session_list": {
-      Sessions.setAll(ev.sessions || [], !!ev.has_more, ev.cron_count || 0);
+      Sessions.setAll(ev.sessions || [], !!ev.has_more, ev.cron_count || 0, ev.latest_cron_updated_at || null);
       Sessions.renderList();
 
       // Restore URL hash once on initial connect; ignore subsequent session_list events.
@@ -281,6 +281,7 @@ WS.onEvent(ev => {
     }
 
     case "session_deleted":
+      if (window.Clacky && Clacky.ext) Clacky.ext.notifySessionRemoved(ev.session_id);
       Sessions.remove(ev.session_id);
       if (ev.session_id === Sessions.activeId) Router.navigate("welcome");
       Sessions.renderList();

data/lib/clacky/web/ws.js

@@ -126,3 +126,5 @@ const WS = (() => {
     get ready() { return _ready; },
   };
 })();
+
+Clacky.WS = WS;