openclacky 1.5.3 → 1.5.5

data/lib/clacky/web/app.js

@@ -506,11 +506,20 @@ const Modal = (() => {
     });
   }
 
-  /** Show a rename dialog. Returns a Promise<string|null>. */
-  function rename(currentName = "") {
+  /** Show a rename dialog. Returns a Promise<string|null>.
+   * @param {string} currentName - pre-filled value
+   * @param {string} [labelI18nKey] - i18n key for the field label (default: sessions.modal.name)
+   */
+  function rename(currentName = "", labelI18nKey = "sessions.modal.name") {
     return new Promise(resolve => {
       const overlay = $("rename-modal-overlay");
       const input = $("rename-modal-input");
+      // Update label text dynamically
+      const labelSpan = overlay.querySelector("label[for='rename-modal-input'] span[data-i18n]");
+      if (labelSpan) {
+        labelSpan.dataset.i18n = labelI18nKey;
+        labelSpan.textContent = I18n.t(labelI18nKey);
+      }
       input.value = currentName;
       input.classList.remove("input-error");
       // Re-attach to <body> end so it stacks above dynamically-appended overlays.
@@ -653,16 +662,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() {
@@ -728,8 +744,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() {

data/lib/clacky/web/components/notify.js

@@ -1,14 +1,15 @@
-// notify.js — Task-complete sound notification module
+// notify.js — Task-complete sound + desktop notification module
 //
-// Plays a short sound when an agent task finishes, driven by the global
-// `task_finished` event the server broadcasts (broadcast_all) the moment a
-// task completes. We listen to this dedicated signal — rather than `complete`
-// (only delivered to subscribers of that session) — so a background session
-// finishing still reaches every browser. Whether a task *finished* is decided
-// on the backend; this module only decides whether the user is looking.
+// Plays a short sound and (when permitted) shows a browser Notification when
+// an agent task finishes, driven by the global `task_finished` event the
+// server broadcasts (broadcast_all) the moment a task completes. We listen to
+// this dedicated signal — rather than `complete` (only delivered to subscribers
+// of that session) — so a background session finishing still reaches every
+// browser. Whether a task *finished* is decided on the backend; this module
+// only decides whether the user is looking.
 //
-// The chime only fires when the user is NOT actively looking at the
-// finished session. "Not looking" means ANY of:
+// Alerts only fire when the user is NOT actively looking at the finished
+// session. "Not looking" means ANY of:
 //   1. The finished session is not the currently open one
 //      (sid !== Sessions.activeId)
 //   2. The browser window has lost focus      (!document.hasFocus())
@@ -18,15 +19,20 @@
 // silent — they can already see the result.
 //
 // The feature is gated behind a header toggle (🔔/🔕) next to the theme
-// switcher. Default OFF; the choice is persisted to localStorage.
+// switcher. Default OFF; the choice is persisted to localStorage. Enabling
+// the toggle also requests browser Notification permission (must happen in
+// the click gesture) so desktop toasts work when the tab is in the background.
 //
-// No history replay: a chime is a live cue, never re-fired on page refresh.
-// The audio file is served as a static asset (/notify.mp3) by WEBrick.
+// No history replay: a chime/toast is a live cue, never re-fired on page
+// refresh. The audio file is served as a static asset (/assets/notify.mp3).
 //
-// Depends on: Sessions (sessions.js) for activeId, I18n (i18n.js) for the
-//             tooltip text. Both are optional — guarded with typeof checks.
+// Depends on: Sessions (sessions.js) for activeId/find, Router (app.js) for
+//             focus-on-click navigation, I18n (i18n.js) for tooltip text.
+//             All are optional — guarded with typeof checks.
 // ─────────────────────────────────────────────────────────────────────────
 const Notify = (() => {
+  // Historical key name kept for existing installs; value now means
+  // "task alerts" (sound + desktop when permitted), not sound-only.
   const STORAGE_KEY = "clacky-notify-sound";
   const AUDIO_SRC   = "/assets/notify.mp3";
 
@@ -41,13 +47,54 @@ const Notify = (() => {
   function setEnabled(on) {
     localStorage.setItem(STORAGE_KEY, on ? "on" : "off");
     _updateToggleIcon();
-    // On enabling, "prime" the audio element within this user gesture so the
-    // browser's autoplay policy lets later programmatic play() calls through.
-    if (on) _prime();
   }
 
-  function toggle() {
-    setEnabled(!enabled());
+  async function toggle() {
+    const next = !enabled();
+    if (next) {
+      // Prime audio inside the click gesture first, then request permission.
+      // Awaiting permission before priming can drop the user-gesture token.
+      _prime();
+      const perm = await _ensurePermission();
+      setEnabled(true);
+      if (perm === "denied" && typeof Modal !== "undefined" && Modal.toast) {
+        Modal.toast(
+          (typeof I18n !== "undefined" && I18n.t("notify.toast.denied")) ||
+            "Sound alerts enabled. Desktop notifications are blocked in browser settings.",
+          "warning"
+        );
+      } else if (perm === "unsupported" && typeof Modal !== "undefined" && Modal.toast) {
+        Modal.toast(
+          (typeof I18n !== "undefined" && I18n.t("notify.toast.noDesktop")) ||
+            "Sound alerts enabled. This browser has no desktop notifications.",
+          "info"
+        );
+      }
+    } else {
+      setEnabled(false);
+    }
+  }
+
+  // ── Browser Notification permission ──────────────────────────────────
+  function _notificationsSupported() {
+    return typeof window !== "undefined" && "Notification" in window;
+  }
+
+  function permission() {
+    if (!_notificationsSupported()) return "unsupported";
+    return Notification.permission; // "granted" | "denied" | "default"
+  }
+
+  async function _ensurePermission() {
+    if (!_notificationsSupported()) return "unsupported";
+    if (Notification.permission === "granted") return "granted";
+    if (Notification.permission === "denied") return "denied";
+    try {
+      const result = await Notification.requestPermission();
+      return result;
+    } catch (_e) {
+      return Notification.permission;
+    }
   }
 
   // ── Audio ────────────────────────────────────────────────────────────
@@ -88,6 +135,46 @@ const Notify = (() => {
     } catch (_e) { /* ignore */ }
   }
 
+  // ── Desktop notification ─────────────────────────────────────────────
+  function _notifyDesktop(sid) {
+    if (!_notificationsSupported()) return;
+    if (Notification.permission !== "granted") return;
+
+    // Keep body generic on purpose — session names can be sensitive on shared
+    // screens. Click focuses the window and navigates to the session.
+    const title = typeof I18n !== "undefined"
+      ? I18n.t("notify.desktop.title")
+      : "Task complete";
+    const body = typeof I18n !== "undefined"
+      ? I18n.t("notify.desktop.body")
+      : "A background task finished. Click to open it.";
+
+    let n;
+    try {
+      n = new Notification(title, {
+        body,
+        tag: sid ? `clacky-task-${sid}` : "clacky-task",
+        renotify: true,
+        silent: true, // sound is handled by our own chime
+      });
+    } catch (_e) {
+      return;
+    }
+
+    n.onclick = () => {
+      try { window.focus(); } catch (_e) { /* ignore */ }
+      if (sid && typeof Router !== "undefined" && typeof Router.navigate === "function") {
+        Router.navigate("session", { id: sid });
+      }
+      try { n.close(); } catch (_e) { /* ignore */ }
+    };
+
+    // Auto-dismiss so toasts don't pile up forever.
+    setTimeout(() => {
+      try { n.close(); } catch (_e) { /* ignore */ }
+    }, 8000);
+  }
+
   // ── Trigger decision ───────────────────────────────────────────────────
   // Returns true when the user is NOT actively viewing the given session.
   function _userIsAway(sid) {
@@ -109,9 +196,19 @@ const Notify = (() => {
     if (!enabled()) return;
     if (!_userIsAway(sid)) return;
     _play();
+    _notifyDesktop(sid);
   }
 
   // ── Toggle button UI ───────────────────────────────────────────────────
+  function _tooltipKey(on) {
+    if (!on) return "notify.tooltip.off";
+    const perm = permission();
+    if (perm === "denied") return "notify.tooltip.onDenied";
+    if (perm === "unsupported") return "notify.tooltip.onNoDesktop";
+    if (perm === "default") return "notify.tooltip.onPending";
+    return "notify.tooltip.on";
+  }
+
   function _updateToggleIcon() {
     const btn = document.getElementById("notify-toggle-header");
     if (!btn) return;
@@ -130,9 +227,10 @@ const Notify = (() => {
         </svg>`;
     btn.classList.toggle("notify-on", on);
     if (typeof I18n !== "undefined") {
-      const tip = I18n.t(on ? "notify.tooltip.on" : "notify.tooltip.off");
+      const tip = I18n.t(_tooltipKey(on));
       btn.title = tip;
       btn.setAttribute("aria-label", tip);
+      btn.setAttribute("data-i18n-title", _tooltipKey(on));
     }
   }
 
@@ -140,10 +238,29 @@ const Notify = (() => {
   function init() {
     _updateToggleIcon();
     const btn = document.getElementById("notify-toggle-header");
-    if (btn) btn.addEventListener("click", toggle);
+    if (btn) {
+      btn.addEventListener("click", () => {
+        // Fire-and-forget; permission prompt is awaited inside toggle.
+        toggle().then(() => _updateToggleIcon()).catch(() => _updateToggleIcon());
+      });
+    }
+    // Permission may change outside the page (browser settings); refresh tip.
+    document.addEventListener("visibilitychange", () => {
+      if (!document.hidden) _updateToggleIcon();
+    });
+    if (typeof I18n !== "undefined") {
+      document.addEventListener("langchange", () => _updateToggleIcon());
+    }
   }
 
-  return { init, toggle, enabled, setEnabled, onTaskFinished };
+  return {
+    init,
+    toggle,
+    enabled,
+    setEnabled,
+    permission,
+    onTaskFinished,
+  };
 })();
 
 Clacky.Notify = Notify;

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

@@ -42,6 +42,13 @@
     if (overlay) overlay.classList.toggle("active", open && !empty);
   }
 
+  function isOpen() {
+    try {
+      const stored = localStorage.getItem(OPEN_KEY);
+      return stored !== null && stored !== "0";
+    } catch (_e) { return false; }
+  }
+
   function setOpen(open) {
     try { localStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch (_e) { /* ignore */ }
     applyOpenState();
@@ -91,7 +98,21 @@
     });
   }
 
+  // ── Public API ────────────────────────────────────────────────────────
+  // Expose setOpen so external code (e.g. WS dispatcher) can open/close the
+  // aside panel programmatically without duplicating localStorage logic here.
+  // open() is a no-op when the panel is already open — safe to call unconditionally.
+  if (window.Clacky) Clacky.Aside = {
+    open:  () => { if (!isOpen()) setOpen(true); },
+    close: () => setOpen(false),
+  };
+
   function init() {
+    // Re-assign in case Clacky was not yet defined when the IIFE ran.
+    if (window.Clacky) Clacky.Aside = {
+      open:  () => { if (!isOpen()) setOpen(true); },
+      close: () => setOpen(false),
+    };
     const collapse = $("btn-aside-collapse");
     const opener   = $("btn-aside-open");
     const overlay  = $("workspace-overlay");

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

@@ -76,7 +76,7 @@ const BrandStore = (() => {
       return false;
     },
 
-    // Re-fetch status to refresh flags only (no UI boot driving).
+    // Re-fetch status and notify views without driving the main boot sequence.
     async refresh() {
       try {
         const res  = await fetch("/api/brand/status");
@@ -84,8 +84,10 @@ const BrandStore = (() => {
         _testMode     = !!data.test_mode;
         _userLicensed = !!data.user_licensed;
         _branded      = !!data.branded;
+        _emit("brand:status", data);
         return data;
       } catch (_) {
+        _emit("brand:status", null);
         return null;
       }
     },

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

@@ -15,7 +15,22 @@
 const BrandView = (() => {
 
   function _onStatus(data) {
-    if (!data || !data.branded) return;
+    if (!data) return;
+    if (!data.branded) {
+      if (data.distribution_refresh_pending) {
+        _scheduleDistributionRefreshPoll();
+        return;
+      }
+      _applyBrandName("OpenClacky");
+      Brand.clearBrandCache();
+      _applyHeaderLogo();
+      const banner = document.getElementById("brand-activation-banner");
+      if (banner) banner.remove();
+      if (typeof Settings !== "undefined" && Settings.loadBrand) Settings.loadBrand();
+      return;
+    }
+
+    if (data.product_name) _applyBrandName(data.product_name);
 
     if (data.needs_activation) {
       if (data.theme_color) Settings.applyAccentColor(data.theme_color, { persist: true });
@@ -268,6 +283,7 @@ const BrandView = (() => {
     logoImg.alt           = "OpenClacky";
     logoImg.style.display = "";
     if (brandWrap) brandWrap.classList.add("has-logo");
+    _applyFavicon("/favicon.svg");
   }
 
   function _applyFavicon(url) {
@@ -333,11 +349,19 @@ const BrandView = (() => {
     let attempt  = 0;
 
     const poll = () => {
-      Brand.clearBrandCache();
-      Brand.fetchInfo().then(info => {
-        const hasFullBrand = !!(info && info.logo_url && info.theme_color);
+      Brand.refresh().then(status => {
+        Brand.clearBrandCache();
+        return Brand.fetchInfo().then(info => ({ status, info }));
+      }).then(({ status, info }) => {
+        if (info && info.product_name) _applyBrandName(info.product_name);
         _applyHeaderLogo();
-        if (hasFullBrand || attempt >= delays.length) {
+        const refreshSettled = !!(
+          status && status.branded && !status.distribution_refresh_pending
+        );
+        if (refreshSettled && typeof Settings !== "undefined" && Settings.loadBrand) {
+          Settings.loadBrand();
+        }
+        if (refreshSettled || attempt >= delays.length) {
           _distRefreshPolling = false;
           return;
         }