openclacky 1.5.1 → 1.5.3

data/lib/clacky/web/app.css

@@ -2173,6 +2173,40 @@ body {
   margin-top: -0.625rem;
   padding-left: 0.125rem;
 }
+
+/* ── Starter Prompts ── */
+.new-session-starter-prompts {
+  margin-top: 0.25rem;
+}
+.ns-starter-label {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: 0.5rem;
+}
+.ns-starter-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.ns-starter-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.5rem;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  cursor: pointer;
+  transition: border-color 0.14s, background-color 0.14s, color 0.14s;
+}
+.ns-starter-item:hover {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-primary));
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
 .ns-panels-label {
   width: 100%;
   font-size: 0.75rem;
@@ -2637,7 +2671,6 @@ body {
 .session-banner { flex-shrink: 0; }
 .session-composer {
   flex-shrink: 0;
-  margin-bottom: -9px;
   display: flex;
   padding-inline: 24px;
 }
@@ -5343,7 +5376,7 @@ body {
 }
 .field-input-row .field-input { flex: 1; }
 .btn-toggle-key {
-  background: var(--color-border-secondary);
+  background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: 6px;
   color: var(--color-text-secondary);
@@ -5351,8 +5384,19 @@ body {
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn-toggle-key:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.btn-toggle-key:active {
+  background: var(--color-bg-hover);
+  filter: brightness(0.94);
+  transform: scale(0.95);
 }
-.btn-toggle-key:hover { color: var(--color-text-primary); }
 .field-checkbox {
   width: 1rem;
   height: 1rem;
@@ -5745,14 +5789,15 @@ body {
   max-height: 90vh;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  /* Do NOT use overflow:hidden here — it clips absolutely-positioned dropdowns
+     inside the modal (e.g. the provider custom-select). Border-radius still
+     applies because there is no overflow to clip. */
+  overflow: visible;
 }
 .model-edit-modal-content {
   max-width: 500px;
 }
-.model-edit-modal-content .modal-body {
-  overflow-y: auto;
-}
+/* overflow override for model-edit modal is applied after .modal-content .modal-body below */
 .modal-content .modal-header {
   display: flex;
   align-items: center;
@@ -5790,6 +5835,12 @@ body {
   gap: 0.875rem;
   padding: 1.25rem;
 }
+/* model-edit modal: allow absolutely-positioned dropdowns to escape the body.
+   Must come after .modal-content .modal-body to win the cascade. */
+.modal-content.model-edit-modal-content .modal-body {
+  overflow: visible;
+  padding-bottom: 0;
+}
 .modal-content .modal-footer {
   display: flex;
   align-items: center;
@@ -6173,6 +6224,9 @@ body {
   font-size: 0.75rem;
   flex: 1;
 }
+.model-test-result:empty {
+  display: none;
+}
 .result-ok      { color: var(--color-success); }
 .result-fail    { color: var(--color-error); }
 .result-testing { color: var(--color-text-secondary); }
@@ -8137,6 +8191,127 @@ body {
   border-radius: 4px;
 }
 
+/* ── Markdown split-pane layout ─────────────────────────────────────────── */
+.code-editor-modal--md {
+  max-width: 1280px;
+  width: 98%;
+  height: 90vh;
+  max-height: 960px;
+}
+.code-editor-body--split {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+.code-editor-split-left {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+}
+.code-editor-split-left .cm-editor {
+  height: 100%;
+  flex: 1;
+}
+.code-editor-split-left > .cm-editor {
+  height: 100%;
+}
+.code-editor-split-divider {
+  display: none;
+}
+.code-editor-split-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.code-editor-markdown-preview {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-text-primary);
+}
+.code-editor-markdown-preview h1,
+.code-editor-markdown-preview h2,
+.code-editor-markdown-preview h3,
+.code-editor-markdown-preview h4 {
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+.code-editor-markdown-preview h1:first-child,
+.code-editor-markdown-preview h2:first-child,
+.code-editor-markdown-preview h3:first-child { margin-top: 0; }
+.code-editor-markdown-preview h1 { font-size: 1.375rem; }
+.code-editor-markdown-preview h2 { font-size: 1.125rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.25em; }
+.code-editor-markdown-preview h3 { font-size: 1rem; }
+.code-editor-markdown-preview p  { margin: 0.5em 0; }
+.code-editor-markdown-preview ul,
+.code-editor-markdown-preview ol { padding-left: 1.5em; margin: 0.5em 0; }
+.code-editor-markdown-preview li { margin: 0.2em 0; }
+.code-editor-markdown-preview code {
+  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+  font-size: 0.8125em;
+  background: rgba(128, 128, 128, 0.15);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+}
+.code-editor-markdown-preview pre {
+  background: rgba(128, 128, 128, 0.15);
+  border-radius: 8px;
+  padding: 0.875em;
+  overflow-x: auto;
+  margin: 0.625em 0;
+}
+.code-editor-markdown-preview pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.8125rem;
+}
+.code-editor-markdown-preview blockquote {
+  border-left: 3px solid var(--color-accent-primary, #7c3aed);
+  margin: 0.75em 0;
+  padding: 0.25em 1em;
+  color: var(--color-text-secondary);
+}
+.code-editor-markdown-preview a {
+  color: var(--color-accent-primary);
+  text-decoration: none;
+}
+.code-editor-markdown-preview a:hover { text-decoration: underline; }
+.code-editor-markdown-preview img {
+  display: inline;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+.code-editor-markdown-preview hr {
+  border: none;
+  border-top: 1px solid var(--color-border-primary);
+  margin: 1.25em 0;
+}
+.code-editor-markdown-preview table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.8125rem;
+}
+.code-editor-markdown-preview th,
+.code-editor-markdown-preview td {
+  border: 1px solid var(--color-border-primary);
+  padding: 0.375em 0.75em;
+  text-align: left;
+}
+.code-editor-markdown-preview th {
+  background: rgba(128, 128, 128, 0.15);
+  font-weight: 600;
+}
+
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
 #skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
 
@@ -8967,10 +9142,11 @@ body.setup-mode[data-theme="dark"] {
   padding-top: 0.75rem;
   border-top: 1px solid var(--color-border-primary);
 }
-.badge-active    { color: var(--color-success); }
-.badge-expired   { color: var(--color-error); }
-.badge-expiring  { color: var(--color-warning); }
-.badge-inactive  { color: var(--color-text-secondary); }
+.badge-active       { color: var(--color-success); }
+.badge-expired      { color: var(--color-error); }
+.badge-expiring     { color: var(--color-warning); }
+.badge-unreachable  { color: var(--color-text-secondary); }
+.badge-inactive     { color: var(--color-text-secondary); }
 
 /* Support QR code */
 .brand-support-contact {
@@ -10908,6 +11084,19 @@ body.setup-mode[data-theme="dark"] {
   flex-wrap: wrap;
 }
 
+/* ── Disclaimer notice ──────────────────────────────────────────────── */
+.billing-disclaimer {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  padding: 0.4rem 0.75rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+}
+
 /* ── Period Button Group ─────────────────────────────────────────────── */
 .billing-period-group {
   display: flex;
@@ -11008,7 +11197,7 @@ body.setup-mode[data-theme="dark"] {
 .billing-share-btn:hover {
   background: var(--color-bg-tertiary);
   color: var(--color-text-primary);
-  border-color: var(--color-text-secondary);
+  border-color: var(--color-accent-primary);
 }
 .billing-clear-popup {
   position: absolute;
@@ -11084,10 +11273,10 @@ body.setup-mode[data-theme="dark"] {
   justify-content: center;
   flex-shrink: 0;
 }
-.billing-stat-icon-cost     { background: color-mix(in srgb, #10b981 10%, transparent); color: #10b981; }
-.billing-stat-icon-tokens   { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; }
+.billing-stat-icon-cost      { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); color: var(--color-accent-primary); }
+.billing-stat-icon-tokens   { background: color-mix(in srgb, #2075ffbf 10%, transparent); color: #2075ffbf; }
 .billing-stat-icon-requests { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #f59e0b; }
-.billing-stat-icon-cache    { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); color: var(--color-accent-primary); }
+.billing-stat-icon-cache    { background: color-mix(in srgb, #10b981 10%, transparent); color: #10b981; }
 .billing-stat-icon svg {
   width: 18px;
   height: 18px;
@@ -11318,7 +11507,7 @@ body.setup-mode[data-theme="dark"] {
   align-items: stretch;
 }
 .billing-cache-hit {
-  background: #3b82f6;
+  background: #2075ffbf;
   width: 100%;
   border-radius: 2px 2px 0 0;
   transition: height 0.2s ease;
@@ -11346,7 +11535,7 @@ body.setup-mode[data-theme="dark"] {
 
 /* Legend colors — indigo + emerald */
 .billing-legend-total     { background: var(--color-accent-primary); }
-.billing-legend-cache-hit { background: #3b82f6; }
+.billing-legend-cache-hit { background: #2075ffbf; }
 .billing-legend-cache-miss{ background: #f59e0b; }
 .billing-legend-output    { background: #34d399; }
 
@@ -11397,7 +11586,7 @@ body.setup-mode[data-theme="dark"] {
   flex-shrink: 0;
 }
 .tooltip-total     { background: var(--color-accent-primary); }
-.tooltip-cache-hit { background: #3b82f6; }
+.tooltip-cache-hit { background: #2075ffbf; }
 .tooltip-cache-miss{ background: #f59e0b; }
 .tooltip-output    { background: #34d399; }.tooltip-label {
   flex: 1;
@@ -11472,7 +11661,7 @@ body.setup-mode[data-theme="dark"] {
   background: #34d399;
 }
 .billing-bar-cache-read {
-  background: #3b82f6;
+  background: #2075ffbf;
 }
 .billing-bar-cache-miss {
   background: #f59e0b;
@@ -11951,7 +12140,7 @@ body.setup-mode[data-theme="dark"] {
 }
 
 .swatch-indigo         { background: #4f46e5; }
-.swatch-aurora-blue    { background: #3B82F6; }
+.swatch-aurora-blue    { background: #2075ffbf; }
 .swatch-forest-green   { background: #10B981; }
 .swatch-sunrise-orange { background: #F59E0B; }
 .swatch-rose-violet    { background: #8B5CF6; }
@@ -12172,7 +12361,7 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-accent-primary);
 }
 .billing-cell-hit {
-  color: #3b82f6;
+  color: #2075ffbf;
 }
 .billing-cell-miss {
   color: #f59e0b;

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

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/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'}">
@@ -152,6 +153,11 @@ const BillingView = (() => {
           </div>
         </div>
 
+        <div class="billing-disclaimer">
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M8 7v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="5" r="0.7" fill="currentColor"/></svg>
+          ${I18n.t("billing.disclaimer")}
+        </div>
+
         <div class="billing-stats-row">
           <div class="billing-stat-card">
             <div class="billing-stat-icon billing-stat-icon-cost">

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

@@ -158,7 +158,11 @@ const ExtensionsStore = (() => {
       try {
         const res  = await fetch("/api/store/extensions/brand");
         const data = await res.json();
-        _extensions = data.extensions || [];
+        const all  = data.extensions || [];
+        _extensions = _query
+          ? all.filter(e => [e.name, e.name_zh, e.description].some(
+              f => f && f.toLowerCase().includes(_query.toLowerCase())))
+          : all;
         _error      = data.warning || null;
         _loading    = false;
         _emit("extensions:changed", { extensions: _extensions, warning: _error });
@@ -174,14 +178,18 @@ 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 res  = await fetch("/api/store/extension?id=" + encodeURIComponent(id));
+        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);
         const data = await res.json();
         if (res.ok && data.ok && data.extension) {
           _detail      = data.extension;
@@ -243,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();