openclacky 1.5.7 → 1.5.9

data/lib/clacky/web/components/chat-navigator.js

@@ -163,7 +163,7 @@
     popup.style.bottom = "";
     const popupHeight = popup.offsetHeight;
     let top = barCenter - popupHeight / 2;
-    top = Math.max(0, Math.min(top, navRect.height - popupHeight));
+    top = Math.max(48, Math.min(top, navRect.height - popupHeight));
     popup.style.top = top + "px";
 
     const target = items[idx].popupItem;

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

@@ -2,7 +2,7 @@
 //
 // Owns billing state (summary / daily / sessions / model list / current period
 // & model filter), currency conversion utilities (localStorage-backed), the
-// data fetch, and clear-data actions. It never renders.
+// data fetch, and clear-data actions (retained for API use). It never renders.
 //
 // Currency utilities are pure and read by both the view and other modules, so
 // they live with the data layer. Emits store events the view reacts to; mirrors
@@ -103,8 +103,8 @@ const BillingStore = (() => {
       if (_summary) _emit("billing:changed");
     },
 
-    setPeriod(period) { _currentPeriod = period; return Billing.load(); },
-    setModel(model)   { _currentModel = model;   return Billing.load(); },
+    setPeriod(period) { _currentPeriod = period; _emit("billing:changed"); return Billing.load(); },
+    setModel(model)   { _currentModel = model;   _emit("billing:changed"); return Billing.load(); },
 
     async load() {
       const isFirstLoad = !_summary;

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

@@ -1,8 +1,8 @@
 // ── Billing · view — dashboard rendering, charts, tooltips, DOM wiring ─────
 //
 // Owns every render function (stats, heatmap, trend, breakdowns, sessions),
-// tooltip binding, and the clear-data popup. Reads through BillingStore.state
-// and currency helpers; period / model / clear / share go through store actions.
+// tooltip binding. Reads through BillingStore.state
+// and currency helpers; period / model / share go through store actions.
 //
 // Augments the `Billing` facade with onPanelShow.
 //
@@ -10,7 +10,6 @@
 // ───────────────────────────────────────────────────────────────────────────
 
 const BillingView = (() => {
-  let _clearPopupVisible = false;
 
   // ── Loading / error ───────────────────────────────────────────────────────
 
@@ -118,7 +117,7 @@ const BillingView = (() => {
 
     const periods = ["day", "week", "month", "year", "all"];
     const periodBtns = periods.map(p =>
-      `<button class="billing-period-btn ${p === BillingStore.state.currentPeriod ? 'active' : ''}" data-period="${p}">${_periodLabel(p)}</button>`
+      `<button class="segmented-control__btn ${p === BillingStore.state.currentPeriod ? 'active' : ''}" data-period="${p}">${_periodLabel(p)}</button>`
     ).join("");
 
     const allModels = BillingStore.state.allModels;
@@ -135,21 +134,12 @@ const BillingView = (() => {
             <span class="billing-subtitle">${_getSummaryHint()}</span>
           </div>
           <div class="billing-controls">
-            <div class="billing-period-group">${periodBtns}</div>
+            <div class="segmented-control">${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'}">
               <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'}">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-              </button>
-              <div id="billing-clear-popup" class="billing-clear-popup" style="display: none;">
-                <button id="billing-clear-today" class="billing-clear-option">${I18n.t('billing.clearToday') || 'Clear Today'}</button>
-                <button id="billing-clear-all" class="billing-clear-option billing-clear-danger">${I18n.t('billing.clearAll') || 'Clear All'}</button>
-              </div>
-            </div>
           </div>
         </div>
 
@@ -217,7 +207,7 @@ const BillingView = (() => {
       </div>
     `;
 
-    document.querySelectorAll(".billing-period-btn").forEach(btn => {
+    document.querySelectorAll(".segmented-control__btn").forEach(btn => {
       btn.addEventListener("click", (e) => Billing.setPeriod(e.target.dataset.period));
     });
 
@@ -225,7 +215,6 @@ const BillingView = (() => {
       Billing.setModel(e.target.value);
     });
 
-    _bindClearHandlers();
     document.getElementById("billing-share-btn")?.addEventListener("click", _openScorecardShare);
 
     _bindChartTooltip();
@@ -416,50 +405,6 @@ const BillingView = (() => {
     });
   }
 
-  // ── Clear popup ────────────────────────────────────────────────────────────
-
-  function _bindClearHandlers() {
-    const clearBtn = document.getElementById("billing-clear-btn");
-    const clearPopup = document.getElementById("billing-clear-popup");
-    const clearToday = document.getElementById("billing-clear-today");
-    const clearAll = document.getElementById("billing-clear-all");
-
-    if (!clearBtn || !clearPopup) return;
-
-    clearBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      _clearPopupVisible = !_clearPopupVisible;
-      clearPopup.style.display = _clearPopupVisible ? "flex" : "none";
-    });
-
-    clearToday?.addEventListener("click", (e) => {
-      e.stopPropagation();
-      _hideClearPopup();
-      Billing.clearData("today");
-    });
-
-    clearAll?.addEventListener("click", (e) => {
-      e.stopPropagation();
-      _hideClearPopup();
-      Billing.clearData("all");
-    });
-
-    document.addEventListener("click", _closeClearPopup);
-  }
-
-  function _hideClearPopup() {
-    const clearPopup = document.getElementById("billing-clear-popup");
-    if (clearPopup) clearPopup.style.display = "none";
-    _clearPopupVisible = false;
-  }
-
-  function _closeClearPopup(e) {
-    const clearPopup = document.getElementById("billing-clear-popup");
-    const clearBtn = document.getElementById("billing-clear-btn");
-    if (!clearPopup || !clearBtn) return;
-    if (!clearPopup.contains(e.target) && !clearBtn.contains(e.target)) _hideClearPopup();
-  }
-
   // ── Section renderers ────────────────────────────────────────────────────────
 
   function _getSummaryHint() {
@@ -678,7 +623,6 @@ const BillingView = (() => {
       <div class="billing-chart-card billing-trend-card">
         <div class="billing-chart-header">
           <h4>${I18n.t("billing.costTrend") || "Cost Trend"}</h4>
-          <span class="billing-trend-total">${currencySymbol}${_formatCost(costs.reduce((a, b) => a + b, 0))}</span>
         </div>
         <div class="billing-trend-chart">
           <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid meet" class="billing-trend-svg">

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

@@ -32,7 +32,11 @@ const ExtensionsStore = (() => {
   let _filterSystem    = false;      // when true, show system (builtin) extensions
   let _filterMarket    = true;     // when true, show marketplace extensions
   let _onlyInstalled   = (function() { try { return localStorage.getItem(EXT_INSTALLED_KEY) === "installed"; } catch (_) { return false; } })();
+  const PAGE_SIZE   = 20;        // requested page size, sent to the platform as per_page
+  let _page         = 1;         // current marketplace page (1-based)
+  let _hasMore      = false;     // whether the marketplace has another page
   let _loading    = false;
+  let _loadingMore = false;
   let _error      = null;      // soft warning when the store is unreachable
   let _detail     = null;      // currently opened extension detail, or null
   let _detailLoading = false;
@@ -69,6 +73,8 @@ const ExtensionsStore = (() => {
     get filterMarket()    { return _filterMarket; },
     get onlyInstalled()   { return _onlyInstalled; },
     get loading()    { return _loading; },
+    get loadingMore(){ return _loadingMore; },
+    get hasMore()    { return _hasMore; },
     get error()      { return _error; },
     get detail()        { return _detail; },
     get detailLoading() { return _detailLoading; },
@@ -86,31 +92,7 @@ const ExtensionsStore = (() => {
       if (_filterSystem) return Extensions.loadSystemExtensions();
       if (_filterInstalled) return;
       if (_filterBrand) return Extensions.loadBrandExtensions();
-      if (_filterMarket) return Extensions.loadMarketExtensions();
-      _loading = true;
-      _error   = null;
-      _emit("extensions:loading");
-      try {
-        const params = new URLSearchParams();
-        if (_query) params.set("q", _query);
-        if (_sort)  params.set("sort", _sort);
-        const qs   = params.toString();
-        const res  = await fetch("/api/store/extensions" + (qs ? "?" + qs : ""));
-        const data = await res.json();
-        _allExtensions = data.extensions || [];
-        _error      = data.warning || null;
-        _loading    = false;
-        _extensions = _allExtensions;
-        _emit("extensions:changed", { extensions: _extensions, warning: _error });
-      } catch (e) {
-        console.error("[Extensions] load failed", e);
-        _extensions = [];
-        _error      = I18n.t("extensions.loadFailed");
-        _loading    = false;
-        _emit("extensions:error", { network: true });
-      } finally {
-        _loading = false;
-      }
+      return Extensions.loadMarketExtensions();
     },
 
     /** Load builtin system extensions from /api/store/extensions/system. */
@@ -140,31 +122,61 @@ const ExtensionsStore = (() => {
       }
     },
 
-    /** Load marketplace extensions (all, not filtered by installed). */
+    /** Load marketplace extensions (all, not filtered by installed) — first page. */
     async loadMarketExtensions() {
-      _loading = true;
-      _error   = null;
-      _emit("extensions:loading");
+      _page = 1;
+      return Extensions._loadMarketPage(true);
+    },
+
+    /** Load the next marketplace page and append it to the current list. */
+    async loadMoreMarketExtensions() {
+      if (_loading || _loadingMore || !_hasMore) return;
+      return Extensions._loadMarketPage(false);
+    },
+
+    async _loadMarketPage(reset) {
+      const page = reset ? 1 : _page + 1;
+      if (reset) {
+        _loading = true;
+        _error   = null;
+        _emit("extensions:loading");
+      } else {
+        _loadingMore = true;
+        _emit("extensions:loadingMore");
+      }
       try {
         const params = new URLSearchParams();
         if (_query) params.set("q", _query);
         if (_sort)  params.set("sort", _sort);
+        if (page > 1) params.set("page", String(page));
+        params.set("per_page", String(PAGE_SIZE));
         const qs   = params.toString();
         const res  = await fetch("/api/store/extensions" + (qs ? "?" + qs : ""));
         const data = await res.json();
-        _allExtensions = data.extensions || [];
-        _error      = data.warning || null;
-        _loading    = false;
-        _extensions = _onlyInstalled ? _allExtensions.filter(e => e.installed) : _allExtensions;
-        _emit("extensions:changed", { extensions: _extensions, warning: _error });
+        const incoming = data.extensions || [];
+        _error = data.warning || null;
+
+        if (reset) {
+          _allExtensions = incoming;
+          _extensions = _onlyInstalled ? incoming.filter(e => e.installed) : incoming;
+        } else {
+          _allExtensions = _allExtensions.concat(incoming);
+          const incomingFiltered = _onlyInstalled ? incoming.filter(e => e.installed) : incoming;
+          _extensions = _extensions.concat(incomingFiltered);
+        }
+
+        _page    = page;
+        _hasMore = _computeHasMore(data.meta, incoming);
       } catch (e) {
         console.error("[Extensions] loadMarketExtensions failed", e);
-        _extensions = [];
-        _error      = I18n.t("extensions.loadFailed");
-        _loading    = false;
-        _emit("extensions:error", { network: true });
+        if (reset) {
+          _extensions = [];
+          _error      = I18n.t("extensions.loadFailed");
+        }
       } finally {
-        _loading = false;
+        _loading     = false;
+        _loadingMore = false;
+        _emit("extensions:changed", { extensions: _extensions, warning: _error, reset: reset });
       }
     },
 
@@ -191,7 +203,8 @@ const ExtensionsStore = (() => {
       try { localStorage.setItem(EXT_INSTALLED_KEY, _onlyInstalled ? "installed" : "all"); } catch (_) {}
       if (_filterSystem) return Extensions.loadSystemExtensions();
       if (_filterBrand) return Extensions.loadBrandExtensions();
-      return Extensions.loadMarketExtensions();
+      _extensions = _onlyInstalled ? _allExtensions.filter(e => e.installed) : _allExtensions;
+      _emit("extensions:changed", { extensions: _extensions, warning: _error, reset: true });
     },
 
     /** Switch to the system (builtin) extensions tab. */
@@ -362,7 +375,7 @@ const ExtensionsStore = (() => {
         });
         const data = await res.json();
         if (!res.ok || !data.ok) throw new Error(data.error || "toggle failed");
-        const activeTab = _filterSystem ? "system" : _filterBrand ? "brand" : "market";
+        const activeTab = _filterSystem ? "system" : _filterBrand ? "brand" : _filterInstalled ? "installed" : "market";
         try { sessionStorage.setItem(EXT_TAB_KEY, activeTab); } catch (_) {}
         location.reload();
       } catch (e) {
@@ -453,6 +466,17 @@ const ExtensionsStore = (() => {
 
   };
 
+  // Whether another marketplace page exists. Prefers the platform's pagination
+  // meta; falls back to "a full page came back" for older platform builds that
+  // don't return meta yet.
+  function _computeHasMore(meta, incoming) {
+    if (meta && meta.total_pages != null) {
+      const current = meta.current_page != null ? Number(meta.current_page) : _page;
+      return current < Number(meta.total_pages);
+    }
+    return (incoming || []).length >= PAGE_SIZE;
+  }
+
   // Poll /api/store/extension/install/status until done, updating _installJob each tick.
   // `token` is the _pollToken snapshot taken when the poll started; if the
   // user closes the detail panel, closeDetail() bumps _pollToken and this

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

@@ -14,10 +14,12 @@
 const ExtensionsView = (() => {
   let _domWired    = false;
   let _searchTimer = null;
+  let _renderedCount = 0;   // cards already appended to the list DOM
 
   function _renderLoading() {
     const container = $("extensions-list");
     if (!container) return;
+    _renderedCount = 0;
     container.innerHTML = Array.from({ length: 4 }).map(() => `
       <div class="extension-card">
         <div class="extension-card-main">
@@ -33,25 +35,63 @@ const ExtensionsView = (() => {
   function _renderEmpty() {
     const container = $("extensions-list");
     if (!container) return;
+    _renderedCount = 0;
     const key = ExtensionsStore.state.query ? "extensions.noResults" : "extensions.empty";
     container.innerHTML = `<div class="extensions-empty">${escapeHtml(I18n.t(key))}</div>`;
   }
 
-  function _renderList() {
+  function _renderList(payload) {
     const container = $("extensions-list");
     if (!container) return;
 
-    if (ExtensionsStore.state.loading) { _renderLoading(); return; }
+    const st = ExtensionsStore.state;
+    const reset = !payload || payload.reset !== false;
+
+    if (st.loading && reset) { _renderLoading(); return; }
 
-    const list = ExtensionsStore.state.extensions;
+    const list = st.extensions;
     if (!list || list.length === 0) { _renderEmpty(); return; }
 
-    container.innerHTML = "";
-    list.forEach(ext => container.appendChild(_renderCard(ext)));
+    if (reset) {
+      container.innerHTML = "";
+      _renderedCount = 0;
+    }
+
+    for (let i = _renderedCount; i < list.length; i++) {
+      container.appendChild(_renderCard(list[i]));
+    }
+    _renderedCount = list.length;
+
+    _renderLoadMore(container, st.hasMore, st.loadingMore);
 
     _applyWarning(ExtensionsStore.state.error);
   }
 
+  function _renderLoadMore(container, hasMore, loadingMore) {
+    const existing = container.querySelector(".extensions-load-more");
+    if (existing) existing.remove();
+    if (!hasMore) return;
+    // Only the marketplace tab is paginated; the other tabs are full loads.
+    if (!ExtensionsStore.state.filterMarket) return;
+
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "extensions-load-more";
+    btn.textContent = loadingMore ? I18n.t("extensions.loadingMore") : I18n.t("extensions.loadMore");
+    btn.disabled = loadingMore;
+    btn.addEventListener("click", () => Extensions.loadMoreMarketExtensions());
+    container.appendChild(btn);
+  }
+
+  function _renderLoadingMore() {
+    const container = $("extensions-list");
+    const btn = container && container.querySelector(".extensions-load-more");
+    if (btn) {
+      btn.disabled = true;
+      btn.textContent = I18n.t("extensions.loadingMore");
+    }
+  }
+
   function _applyWarning(warning) {
     const banner = $("extensions-warning");
     if (!banner) return;
@@ -108,6 +148,8 @@ const ExtensionsView = (() => {
       ? `<span class="extension-updatable">${escapeHtml(I18n.t("extensions.updatable"))}</span>` : "";
     const unlistedHtml = (ext.unlisted && ext.installed)
       ? `<span class="extension-unlisted">${escapeHtml(I18n.t("extensions.unlisted"))}</span>` : "";
+    const verifiedHtml = (ext.verified && !ext.installed)
+      ? `<span class="extension-verified">${escapeHtml(I18n.t("extensions.verified"))}</span>` : "";
     const unitsText = _formatUnits(ext.units);
     const unitsHtml = unitsText
       ? `<span class="extension-units">${escapeHtml(unitsText)}</span>` : "";
@@ -137,6 +179,7 @@ const ExtensionsView = (() => {
             ${installedHtml}
             ${updatableHtml}
             ${unlistedHtml}
+            ${verifiedHtml}
             ${unitsHtml}
             ${authorHtml}
             ${installsHtml}
@@ -160,6 +203,7 @@ const ExtensionsView = (() => {
     } else {
       card.addEventListener("click", (e) => {
         if (e.target.closest("a")) return;
+        _saveCurrentTab();
         const router = window.Clacky && window.Clacky.Router;
         const isBrand = card.dataset.extOrigin === "self" || Extensions.state.filterBrand;
         const source  = isBrand ? "brand" : null;
@@ -181,6 +225,17 @@ const ExtensionsView = (() => {
       </button>`;
   }
 
+  function _saveCurrentTab() {
+    try {
+      var s = ExtensionsStore.state;
+      var tab = "market";
+      if (s.filterSystem) tab = "system";
+      else if (s.filterBrand) tab = "brand";
+      else if (s.filterInstalled) tab = "installed";
+      sessionStorage.setItem(EXT_TAB_KEY, tab);
+    } catch (_) {}
+  }
+
   // Returns a human-readable button label for a given install job state.
   function _installJobLabel(job) {
     if (!job) return I18n.t("extensions.action.install");
@@ -300,13 +355,14 @@ const ExtensionsView = (() => {
 
     const installBtn = document.querySelector("[data-ext-install]");
     if (installBtn) {
-      installBtn.addEventListener("click", () => {
+      installBtn.addEventListener("click", async () => {
         const id = installBtn.getAttribute("data-ext-install");
+        const ext = ExtensionsStore.state.detail;
+        if (ext && !ext.verified && !(typeof Brand !== "undefined" && Brand.branded)) {
+          const confirmed = await Modal.confirm(I18n.t("extensions.unverifiedInstallWarning"));
+          if (!confirmed) return;
+        }
         installBtn.disabled = true;
-        // Show a "downloading" placeholder rather than a generic "installing" —
-        // the next real state is always the download starting, so this avoids
-        // a jarring "installing → downloading → installing" flash before any
-        // real progress data has arrived.
         installBtn.textContent = _installJobLabel({ stage: "downloading", progress: null });
         Extensions.install(id);
       });
@@ -350,6 +406,10 @@ const ExtensionsView = (() => {
       ? `<span class="extension-installed">${installedLabel}</span>` : "";
     const unlistedHtml = ext.unlisted
       ? `<span class="extension-unlisted">${escapeHtml(I18n.t("extensions.unlisted"))}</span>` : "";
+    const verifiedHtml = ext.verified
+      ? `<span class="extension-verified">${escapeHtml(I18n.t("extensions.verified"))}</span>` : "";
+    const unverifiedBannerHtml = (!ext.verified && !ext.installed && !(typeof Brand !== "undefined" && Brand.branded))
+      ? `<div class="extension-unverified-banner"><svg class="extension-unverified-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="6.25" stroke="currentColor" stroke-width="1.2"/><path d="M7 4V7.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="10" r="0.7" fill="currentColor"/></svg>${escapeHtml(I18n.t("extensions.unverifiedBanner"))}</div>` : "";
     const unitsText = _formatUnits(ext.units);
     const unitsHtml = unitsText
       ? `<span class="extension-units">${escapeHtml(unitsText)}</span>` : "";
@@ -370,12 +430,14 @@ const ExtensionsView = (() => {
             ${versionHtml}
             ${installedHtml}
             ${unlistedHtml}
+            ${verifiedHtml}
             ${unitsHtml}
             ${authorHtml}
             ${installsHtml}
           </div>
           ${description ? `<div class="extension-desc extension-desc-detail">${escapeHtml(description)}</div>` : ""}
           ${homepageHtml ? `<div class="extension-meta">${homepageHtml}</div>` : ""}
+          ${unverifiedBannerHtml}
           ${_renderActions(ext)}
         </div>
       </div>
@@ -584,6 +646,7 @@ const ExtensionsView = (() => {
         if (e.target.closest("a")) return;
         const card = e.target.closest(".extension-card-clickable");
         if (card && card.dataset.extId) {
+          _saveCurrentTab();
           const router = window.Clacky && window.Clacky.Router;
           // Use origin stored on the card; origin="self" means brand-private extension.
           const isBrand = card.dataset.extOrigin === "self" || Extensions.state.filterBrand;
@@ -605,6 +668,7 @@ const ExtensionsView = (() => {
 
   function _subscribe() {
     Extensions.on("extensions:loading", _renderLoading);
+    Extensions.on("extensions:loadingMore", _renderLoadingMore);
     Extensions.on("extensions:changed", _renderList);
     Extensions.on("extensions:error",   _renderList);
     Extensions.on("extensions:detail",  _renderDetail);

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

@@ -620,6 +620,27 @@ const NewSessionView = (() => {
         _renderContextBar();
       });
       pop.appendChild(clearItem);
+
+      // "Create new project" action
+      const actionSep = document.createElement("div");
+      actionSep.style.cssText = "height:1px;background:var(--color-border-primary);margin:4px 8px";
+      pop.appendChild(actionSep);
+      const createItem = document.createElement("button");
+      createItem.type = "button";
+      createItem.className = "ns-ctx-popover-item";
+      createItem.style.cssText = "display:flex;align-items:center;gap:6px";
+      const plusIcon = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M12 5v14M5 12h14"/></svg>';
+      createItem.innerHTML = plusIcon + `<span>${zh ? "新建项目" : "New project"}</span>`;
+      createItem.addEventListener("click", async () => {
+        _dismissCtxPopover();
+        const project = await Projects.promptCreate();
+        if (project) {
+          const dir = project.working_dir || NewSessionStore.state.defaultDir || "";
+          NewSessionStore.updateAdvanced({ projectId: project.id, workingDir: dir });
+          _renderContextBar();
+        }
+      });
+      pop.appendChild(createItem);
     });
   }
 
@@ -786,6 +807,9 @@ const NewSessionView = (() => {
     const display = hasFiles ? _buildBubbleHtml(finalContent) : null;
 
     Sessions.add(session);
+    if (session.project_id && typeof Projects !== "undefined" && Projects.expand) {
+      Projects.expand(session.project_id);
+    }
     Sessions.setPendingMessage(session.id, finalContent, display, files);
     input.value = "";
     _pendingImages.length = 0;

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

@@ -41,6 +41,7 @@ const VersionView = (() => {
     if (!badge || !text) return;
 
     text.textContent = s.current ? `v${s.current}` : "";
+    text.href = "https://github.com/clacky-ai/openclacky/releases";
 
     if (dot)        dot.style.display        = "none";
     if (restartDot) restartDot.style.display = "none";
@@ -142,11 +143,10 @@ const VersionView = (() => {
       <p class="vup-versions">v${s.current} <span class="vup-arrow">→</span> v${s.latest}</p>
       <div class="vup-actions">
         <button id="vup-btn-upgrade" class="vup-btn-primary">${I18n.t("upgrade.btn.upgrade")}</button>
-        <button id="vup-btn-cancel"  class="vup-btn-cancel">${I18n.t("upgrade.btn.cancel")}</button>
+        ${(typeof Brand !== "undefined" && Brand.branded) ? "" : `<a id="vup-btn-changelog" class="vup-btn-changelog" href="https://github.com/clacky-ai/openclacky/releases" target="_blank" rel="noopener noreferrer">${I18n.t("upgrade.btn.changelog")}</a>`}
       </div>
     `;
     $("vup-btn-upgrade").addEventListener("click", () => Version.startUpgrade());
-    $("vup-btn-cancel").addEventListener("click", _closePopover);
   }
 
   function _renderProgressState(pop, s) {