openclacky 1.5.2 → 1.5.4

data/lib/clacky/web/app.js

@@ -97,7 +97,11 @@ const Router = (() => {
     if (h === "mcp")                  return { view: "mcp",      params: {} };
     if (h === "extensions")           return { view: "extensions", params: {} };
     const mExtDetail = h.match(/^extensions\/(.+)$/);
-    if (mExtDetail)                   return { view: "extensions", params: { detailId: mExtDetail[1] } };
+    if (mExtDetail) {
+      const [detailId, qs] = mExtDetail[1].split("?");
+      const source = new URLSearchParams(qs || "").get("source") || null;
+      return { view: "extensions", params: { detailId, source } };
+    }
     if (h === "trash")                return { view: "trash",    params: {} };
     if (h === "profile")              return { view: "profile",  params: {} };
     // Legacy: #memories redirects to #profile (memories are now merged into
@@ -256,8 +260,9 @@ const Router = (() => {
       case "extensions":
         $("extensions-panel").style.display = "flex";
         if (params.detailId) {
-          _setHash(`extensions/${params.detailId}`);
-          Extensions.onPanelShow({ detailId: params.detailId });
+          const sourceQs = params.source ? `?source=${encodeURIComponent(params.source)}` : "";
+          _setHash(`extensions/${params.detailId}${sourceQs}`);
+          Extensions.onPanelShow({ detailId: params.detailId, source: params.source });
         } else {
           _setHash("extensions");
           Extensions.onPanelShow();
@@ -501,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/code-editor.js

@@ -1,4 +1,4 @@
-/* global CM */
+/* global CM, marked */
 /**
  * CodeEditor — a reusable wrapper around CodeMirror 6.
  *
@@ -31,16 +31,20 @@
   }
 
   function _detectLanguage(filename) {
-    if (!filename) return "markdown";
+    if (!filename) return null;
     const ext = filename.split(".").pop().toLowerCase();
     const map = { md: "markdown", markdown: "markdown" };
-    return map[ext] || "markdown";
+    return map[ext] || null;
   }
 
   function _isDark() {
     return document.documentElement.getAttribute("data-theme") === "dark";
   }
 
+  function _isMarkdown(language) {
+    return language === "markdown" || language === "md";
+  }
+
   function _buildExtensions(opts) {
     const extensions = [
       CM.lineNumbers(),
@@ -86,9 +90,24 @@
       }]));
     }
 
+    if (opts.onChange) {
+      extensions.push(CM.EditorView.updateListener.of((update) => {
+        if (update.docChanged) opts.onChange(update.state.doc.toString());
+      }));
+    }
+
     return extensions;
   }
 
+  function _renderMarkdownHtml(text) {
+    if (typeof marked !== "undefined") {
+      try {
+        return marked.parse(text, { breaks: true, gfm: true });
+      } catch (_) { /* fall through */ }
+    }
+    return `<pre>${text.replace(/</g, "&lt;")}</pre>`;
+  }
+
   function open(opts) {
     const {
       content = "",
@@ -101,6 +120,7 @@
 
     const kind = opts.kind || (opts.filename ? _fileKind(opts.filename) : "text");
     const language = opts.language || _detectLanguage(opts.filename);
+    const isMd = _isMarkdown(language) && kind !== "image";
 
     let overlay = document.getElementById("code-editor-overlay");
     if (overlay) overlay.remove();
@@ -110,8 +130,8 @@
     overlay.className = "modal-overlay";
 
     const cancelLabel = I18n.t("modal.cancel");
-    const closeLabel = I18n.t("modal.close");
-    const saveLabel = I18n.t("modal.save");
+    const closeLabel  = I18n.t("modal.close");
+    const saveLabel   = I18n.t("modal.save");
 
     const isReadOnlyOrImage = readOnly || kind === "image";
     const footerActions = isReadOnlyOrImage
@@ -119,12 +139,14 @@
       : `<button class="btn btn-secondary code-editor-cancel">${cancelLabel}</button><button class="btn btn-primary code-editor-save">${saveLabel}</button>`;
 
     overlay.innerHTML = `
-      <div class="code-editor-modal${kind === "image" ? " code-editor-modal--image" : ""}">
+      <div class="code-editor-modal${kind === "image" ? " code-editor-modal--image" : ""}${isMd ? " code-editor-modal--md" : ""}">
         <div class="code-editor-header">
           <h3 class="code-editor-title"></h3>
           <button class="code-editor-close" title="${closeLabel}">&times;</button>
         </div>
-        <div class="code-editor-body"></div>
+        <div class="code-editor-body${isMd ? " code-editor-body--split" : ""}">
+          ${isMd ? `<div class="code-editor-split-left"></div><div class="code-editor-split-divider"></div><div class="code-editor-split-right"><div class="code-editor-markdown-preview"></div></div>` : ""}
+        </div>
         <div class="code-editor-footer">
           <span class="code-editor-status"></span>
           <div class="code-editor-actions">${footerActions}</div>
@@ -134,8 +156,8 @@
     document.body.appendChild(overlay);
     overlay.querySelector(".code-editor-title").textContent = title;
 
-    const body    = overlay.querySelector(".code-editor-body");
-    const status  = overlay.querySelector(".code-editor-status");
+    const body      = overlay.querySelector(".code-editor-body");
+    const status    = overlay.querySelector(".code-editor-status");
     const closeBtn  = overlay.querySelector(".code-editor-close");
     const cancelBtn = overlay.querySelector(".code-editor-cancel");
     const saveBtn   = overlay.querySelector(".code-editor-save");
@@ -147,7 +169,6 @@
 
     closeBtn.addEventListener("click", close);
     if (cancelBtn) cancelBtn.addEventListener("click", close);
-    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
 
     if (kind === "image") {
       body.classList.add("code-editor-body--image");
@@ -159,7 +180,21 @@
       return { close };
     }
 
-    const editorOpts = { language, readOnly, onSave: null, _getContent: null };
+    // Editor mount target: left pane for markdown split, body itself otherwise
+    const editorParent = isMd ? overlay.querySelector(".code-editor-split-left") : body;
+    const previewPane  = isMd ? overlay.querySelector(".code-editor-markdown-preview") : null;
+
+    function updatePreview(text) {
+      if (previewPane) previewPane.innerHTML = _renderMarkdownHtml(text);
+    }
+
+    const editorOpts = {
+      language: language || "markdown",
+      readOnly,
+      onSave: null,
+      _getContent: null,
+      onChange: isMd ? updatePreview : null,
+    };
     const getContent = () => view.state.doc.toString();
     editorOpts._getContent = getContent;
     editorOpts.onSave = onSave ? () => doSave() : null;
@@ -169,9 +204,12 @@
         doc: content,
         extensions: _buildExtensions(editorOpts),
       }),
-      parent: body,
+      parent: editorParent,
     });
 
+    // Render initial preview
+    if (isMd) updatePreview(content);
+
     async function doSave() {
       if (!onSave) return;
       if (saveBtn) saveBtn.disabled = true;

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/billing/view.js

@@ -138,7 +138,8 @@ const BillingView = (() => {
             <div class="billing-period-group">${periodBtns}</div>
             <select id="billing-model-filter" class="billing-model-filter">${modelOptions}</select>
             <button id="billing-share-btn" class="billing-share-btn" title="${I18n.t('billing.share.tooltip') || 'Share scorecard'}">
-              📤 ${I18n.t('billing.share.btn') || 'Share scorecard'}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><polyline points="16 6 12 2 8 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="2" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              ${I18n.t('billing.share.btn') || 'Share scorecard'}
             </button>
             <div class="billing-clear-container">
               <button id="billing-clear-btn" class="billing-clear-btn" title="${I18n.t('billing.clearData') || 'Clear Data'}">

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/extensions/store.js

@@ -178,14 +178,15 @@ const ExtensionsStore = (() => {
     },
 
     /** Open the detail view for one extension (fetches contributes + versions). */
-    async loadDetail(id) {
+    async loadDetail(id, source) {
       if (!id) return;
       _detail        = null;
       _detailLoading = true;
       _detailError   = null;
       _emit("extensions:detail");
       try {
-        const url  = _filterBrand
+        const isBrand = source === "brand" || _filterBrand;
+        const url  = isBrand
           ? "/api/store/extension?id=" + encodeURIComponent(id) + "&source=brand"
           : "/api/store/extension?id=" + encodeURIComponent(id);
         const res  = await fetch(url);
@@ -250,10 +251,18 @@ const ExtensionsStore = (() => {
     async install(id) {
       if (!id) return;
       try {
-        const detailRes  = await fetch("/api/store/extension?id=" + encodeURIComponent(id));
-        const detailData = await detailRes.json();
-        if (!detailRes.ok || !detailData.ok) throw new Error(detailData.error || "fetch detail failed");
-        const ext          = detailData.extension;
+        // Prefer the already-loaded detail (avoids a second round-trip and correctly
+        // handles brand-private extensions whose detail was fetched with &source=brand).
+        let ext;
+        if (_detail && String(_detail.id) === String(id)) {
+          ext = _detail;
+        } else {
+          const source     = _filterBrand ? "&source=brand" : "";
+          const detailRes  = await fetch("/api/store/extension?id=" + encodeURIComponent(id) + source);
+          const detailData = await detailRes.json();
+          if (!detailRes.ok || !detailData.ok) throw new Error(detailData.error || "fetch detail failed");
+          ext = detailData.extension;
+        }
         const download_url = ext.download_url;
         if (!download_url) throw new Error("No download URL available");
         const res = await fetch("/api/store/extension/install", {

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

@@ -121,7 +121,8 @@ const ExtensionsView = (() => {
 
     const card = document.createElement("div");
     card.className = "extension-card extension-card-clickable";
-    card.dataset.extId = ext.id != null ? String(ext.id) : (ext.name || "");
+    card.dataset.extId     = ext.id != null ? String(ext.id) : (ext.name || "");
+    card.dataset.extOrigin = ext.origin || "";
     card.innerHTML = `
       <div class="extension-card-main">
         ${emojiHtml}
@@ -474,8 +475,11 @@ const ExtensionsView = (() => {
         const card = e.target.closest(".extension-card-clickable");
         if (card && card.dataset.extId) {
           const router = window.Clacky && window.Clacky.Router;
-          if (router) router.navigate("extensions", { detailId: card.dataset.extId });
-          else Extensions.loadDetail(card.dataset.extId);
+          // Use origin stored on the card; origin="self" means brand-private extension.
+          const isBrand = card.dataset.extOrigin === "self" || Extensions.state.filterBrand;
+          const source  = isBrand ? "brand" : null;
+          if (router) router.navigate("extensions", { detailId: card.dataset.extId, source });
+          else Extensions.loadDetail(card.dataset.extId, source);
         }
       });
     }
@@ -506,7 +510,7 @@ const ExtensionsView = (() => {
       const detailId = opts && opts.detailId;
       if (detailId) {
         Extensions.load();
-        Extensions.loadDetail(detailId);
+        Extensions.loadDetail(detailId, opts && opts.source);
       } else {
         Extensions.closeDetail();
         Extensions.load();

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();