openclacky 1.5.3 → 1.5.4

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.

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;
         }

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

@@ -306,7 +306,7 @@ const NewSessionView = (() => {
   const MAX_IMAGE_SIZE       = 5 * 1024 * 1024;
   const MAX_IMAGE_BYTES_SEND = 512 * 1024;
   const MAX_IMAGE_LONG_EDGE  = 1920;
-  const MAX_FILE_BYTES       = 32 * 1024 * 1024;
+  const MAX_FILE_BYTES       = 300 * 1024 * 1024;
   const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 
   function _docTypeIcon(mimeType, filename) {
@@ -390,7 +390,7 @@ const NewSessionView = (() => {
 
   function _addGenericFile(file) {
     if (file.size > MAX_FILE_BYTES) {
-      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "32 MB" }));
+      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "300 MB" }));
       return;
     }
     const formData = new FormData();

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

@@ -20,6 +20,7 @@ const TrashStore = (() => {
   let _sessions       = [];
   let _sessionTotals  = { count: 0, size: 0 };
   let _filterSource   = SOURCES.ALL;
+  let _filterProjectId = null;  // null = all projects
   let _loading        = false;
 
   const _listeners = {};
@@ -48,19 +49,23 @@ const TrashStore = (() => {
     get files()         { return _files; },
     get totals()        { return _totals; },
     get sessions()      {
-      if (_filterSource === SOURCES.ALL) return _sessions;
-      return _filterSource === SOURCES.CRON
-        ? _sessions.filter(s => s.source === SOURCES.CRON)
-        : _sessions.filter(s => s.source !== SOURCES.CRON);
+      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);
+      }
+      if (_filterProjectId !== null) {
+        list = list.filter(s => String(s.project_id ?? "") === _filterProjectId);
+      }
+      return list;
     },
     get sessionTotals() {
-      const filtered = _filterSource === SOURCES.ALL ? _sessions
-        : _filterSource === SOURCES.CRON
-          ? _sessions.filter(s => s.source === SOURCES.CRON)
-          : _sessions.filter(s => s.source !== SOURCES.CRON);
+      const filtered = state.sessions;
       return { count: filtered.length, size: filtered.reduce((sum, s) => sum + (s.file_size || 0), 0) };
     },
-    get filterSource()  { return _filterSource; },
+    get filterSource()     { return _filterSource; },
+    get filterProjectId()  { return _filterProjectId; },
     orphanCount() { return _files.filter(f => _isOrphanRoot(f.project_root)).length; },
     isOrphan(file) { return _isOrphanRoot(file.project_root); },
   };
@@ -76,6 +81,14 @@ const TrashStore = (() => {
       _emit("trash:sessionsChanged");
     },
 
+    setFilterProject(projectId) {
+      // projectId: string/number ID or null/empty (= all)
+      const normalized = (projectId != null && projectId !== "") ? String(projectId) : null;
+      if (normalized === _filterProjectId) return;
+      _filterProjectId = normalized;
+      _emit("trash:sessionsChanged");
+    },
+
     async loadFiles() {
       if (_loading) return;
       _loading = true;
@@ -166,6 +179,7 @@ const TrashStore = (() => {
         if (restored && typeof Sessions !== "undefined") {
           Sessions.add(restored);
           Sessions.renderList();
+          if (typeof Projects !== "undefined") Projects.renderSection();
         }
         return { ok: true, session: restored };
       } catch (e) {

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

@@ -49,6 +49,32 @@ const TrashView = (() => {
     return d.toLocaleDateString();
   }
 
+  // ── Project filter select helpers ────────────────────────────────────
+
+  function _refreshProjectOptions() {
+    const sel = $("trash-filter-project");
+    if (!sel) return;
+
+    const projects = (typeof Projects !== "undefined") ? Projects.all() : [];
+    const currentVal = sel.value;
+
+    // Rebuild options: keep the "all" placeholder, then one per project
+    sel.innerHTML = `<option value="">${I18n.t ? I18n.t("trash.filterAllProjects") : "所有项目"}</option>`;
+    projects.forEach(p => {
+      const opt = document.createElement("option");
+      opt.value       = p.id;
+      opt.textContent = p.name || p.id;
+      sel.appendChild(opt);
+    });
+
+    // Restore previous selection if still valid
+    if (currentVal && projects.some(p => String(p.id) === currentVal)) {
+      sel.value = currentVal;
+    } else {
+      sel.value = "";
+    }
+  }
+
   // ── Tab switching ────────────────────────────────────────────────────
 
   function _switchTab(tab) {
@@ -221,6 +247,7 @@ const TrashView = (() => {
     if (btnOld) btnOld.disabled = sessions.length === 0;
     if (btnAll) btnAll.disabled = sessions.length === 0;
     if (filterBar) filterBar.style.display = "";
+    _refreshProjectOptions();
 
     if (sessions.length === 0) {
       list.innerHTML = `<div class="trash-empty">${_t("trash.noSessionTrash")}</div>`;
@@ -242,6 +269,21 @@ const TrashView = (() => {
     const whenStr   = _humanTime(session.deleted_at || session.created_at);
     const taskLabel = I18n.t("trash.sessionTasks", { n: taskCount });
 
+    // Project badge — resolve name + color from Projects store if available
+    let projectBadgeHtml = "";
+    if (session.project_id && typeof Projects !== "undefined") {
+      const proj = Projects.find(session.project_id);
+      if (proj) {
+        const projName  = escapeHtml(proj.name || "");
+        const dotColor  = proj.color ? `style="background:${escapeHtml(proj.color)}"` : "";
+        projectBadgeHtml = `
+          <span class="trash-session-project-badge" title="${projName}">
+            <span class="trash-session-project-dot" ${dotColor}></span>
+            ${projName}
+          </span>`;
+      }
+    }
+
     card.innerHTML = `
       <div class="trash-session-card-info">
         <div class="trash-session-card-name" title="${escapeHtml(name)}">${escapeHtml(name)}</div>
@@ -250,6 +292,7 @@ const TrashView = (() => {
           <span>${escapeHtml(taskLabel)}</span>
           <span>${sizeStr}</span>
           <span title="${escapeHtml(session.deleted_at || session.created_at || '')}">${escapeHtml(whenStr)}</span>
+          ${projectBadgeHtml}
         </div>
       </div>
       <div class="trash-session-card-actions">
@@ -419,6 +462,14 @@ const TrashView = (() => {
         document.querySelectorAll(".trash-filter-chip").forEach(c => c.classList.toggle("active", c.dataset.filter === val));
       });
     });
+
+    // Project filter select
+    const projSel = $("trash-filter-project");
+    if (projSel) {
+      projSel.addEventListener("change", () => {
+        Trash.setFilterProject(projSel.value || null);
+      });
+    }
   }
 
   function _subscribe() {