openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/{share.js → features/share/view.js}

@@ -1,31 +1,21 @@
-// share.js — Share hooks for spreading the word at peak-delight moments.
+// ── Share · view — themes, Canvas posters, copy, modal, public actions ────
 //
-// Two entry points, one shared UI:
-//   Share.openModal()              — always-available header button
-//   Share.maybePromptOnComplete()  — fires after a task succeeds, gated by
-//                                    a frequency cap (first + 5th success,
-//                                    then a 7-day cooldown after dismissal)
+// Renders the share modal and the pure-frontend Canvas posters (product +
+// scorecard), owns the copy/clipboard/theme/period UI, and exposes the public
+// entry points (openModal / openScorecard / addScorecardPeriod / closeModal /
+// maybePromptOnComplete / init) on the `Share` facade.
 //
-// Brand-aware: when this install is white-labelled, ALL share content
-// (product name, landing link, QR target, logo) switches to the brand's
-// values. It NEVER leaks "OpenClacky" / openclacky.com into a branded build.
+// All data — brand identity, scorecard stats, frequency cap, telemetry —
+// lives in ShareStore; the view reads it through Share.state and drives state
+// changes through store actions.
 //
-// Depends on: qrcode (vendor/qrcode/qrcode.min.js), I18n, Modal.toast.
-// ─────────────────────────────────────────────────────────────────────────
-const Share = (() => {
-  const DEFAULT_NAME     = "OpenClacky";
-  const DEFAULT_HOMEPAGE = "https://www.openclacky.com/";
-
-  const COUNT_KEY    = "clacky-share-success-count";
-  const COOLDOWN_KEY = "clacky-share-cooldown-until";
-  const COOLDOWN_MS  = 7 * 24 * 60 * 60 * 1000;
-  const PROMPT_AT    = [1, 5]; // success counts that trigger an auto-prompt
-
-  const THEME_KEY = "clacky-share-theme"; // remembers last picked poster style
-  const DRAFT_KEY = "clacky-share-draft"; // remembers last hand-edited text
-
-  // Poster themes: each is a palette the canvas renderers read from, so the
-  // layout stays shared and only colors change. Order = picker order.
+// Depends on: ShareStore, qrcode, I18n, Modal.
+// ───────────────────────────────────────────────────────────────────────────
+
+const ShareView = (() => {
+  const THEME_KEY = "clacky-share-theme";
+  const DRAFT_KEY = "clacky-share-draft";
+
   const THEMES = {
     geek: {
       labelKey: "share.theme.geek", style: "geek",
@@ -79,50 +69,20 @@ const Share = (() => {
   function _theme() { return THEMES[_themeId()]; }
   function _setTheme(id) { if (THEMES[id]) localStorage.setItem(THEME_KEY, id); }
 
-  // Brand info, hydrated once from /api/brand/status. Falls back to defaults
-  // (un-branded OpenClacky) until the fetch resolves or if it fails.
-  let _brand = { name: DEFAULT_NAME, homepageUrl: DEFAULT_HOMEPAGE, logoUrl: null };
-
-  // Current scorecard stats, set by openScorecard() before building the
-  // scorecard poster / copy. Null in plain product-share mode.
-  // Shape: { periods: { day|week|month: {period,cacheHitRate,costStr,...} },
-  //          defaultPeriod, heatmap: [{date,tokens}], ...flat fallback }
-  let _scorecard = null;
-  // Currently selected scorecard period key (day | week | month).
-  let _scorePeriod = null;
-  // Set while a scorecard modal is open; lets billing hot-swap in late-arriving
-  // period data and re-render the period switcher.
-  let _rerenderPeriods = null;
-
-  // ── Brand source (single source of truth) ─────────────────────────────
-  async function _hydrateBrand() {
-    try {
-      const res = await fetch("/api/brand/status");
-      if (!res.ok) return;
-      const data = await res.json();
-      if (data && data.branded) {
-        _brand = {
-          name:        (data.product_name || "").trim() || DEFAULT_NAME,
-          // Branded builds must NEVER fall back to openclacky.com. If the brand
-          // has no homepage configured, we simply show no link / QR.
-          homepageUrl: (data.homepage_url || "").trim() || null,
-          logoUrl:     (data.logo_url || "").trim() || null
-        };
-      }
-    } catch (_e) { /* keep defaults */ }
-  }
+  function _brandName() { return Share.state.brand.name; }
+  function _shareUrl()  { return Share.state.shareUrl(); }
+  function _scorecard() { return Share.state.scorecard; }
+  function _scorePeriod() { return Share.state.scorePeriod; }
+  function _curStats()  { return Share.state.curStats(); }
 
   // ── Share copy (i18n + brand interpolation) ───────────────────────────
-  // Candidate variants per platform; the UI shuffles among them and lets the
-  // user hand-edit before posting. Product mode shares one generic pool
-  // (`share.copy.*`); scorecard mode has per-platform pools with live numbers.
   function _candidatesFor(platform) {
-    if (_scorecard) {
+    if (_scorecard()) {
       const list = I18n.tList("share.scorecard.copy." + platform, _scorecardVars());
       return list.length ? list : [_scorecardCopy("copylink")];
     }
-    const list = I18n.tList("share.copy", { brand: _brand.name });
-    return list.length ? list : [I18n.t("share.copy.1", { brand: _brand.name })];
+    const list = I18n.tList("share.copy", { brand: _brandName() });
+    return list.length ? list : [I18n.t("share.copy.1", { brand: _brandName() })];
   }
 
   function _pickCopy(platform, exclude) {
@@ -138,24 +98,10 @@ const Share = (() => {
     return pick;
   }
 
-  function _shareUrl() {
-    return _brand.homepageUrl; // null when branded build has no homepage
-  }
-
-  // ── Scorecard copy (per-platform, numbers from stats) ─────────────────
-  // Returns the stats object for the currently-selected period, falling back
-  // to the flat fields billing.js passes for back-compat.
-  function _curStats() {
-    if (_scorecard.periods && _scorePeriod && _scorecard.periods[_scorePeriod]) {
-      return _scorecard.periods[_scorePeriod];
-    }
-    return _scorecard;
-  }
-
   function _scorecardVars() {
     const s = _curStats();
     return {
-      brand:        _brand.name,
+      brand:        _brandName(),
       period:       s.period,
       cacheHitRate: s.cacheHitRate,
       cost:         s.costStr,
@@ -168,35 +114,13 @@ const Share = (() => {
     return I18n.t("share.scorecard.copy." + platform + ".1", _scorecardVars()).trim();
   }
 
-  // Pick a dynamic golden line based on how strong the numbers are.
   function _scorecardGoldenLine() {
     const rate = parseFloat(_curStats().cacheHitRate) || 0;
     const key = rate >= 90 ? "high" : rate >= 60 ? "mid" : "low";
     return I18n.t("share.scorecard.golden." + key, _scorecardVars());
   }
 
-  // ── Frequency cap (C2: first + 5th, 7-day cooldown after dismissal) ────
-  function _successCount() {
-    return parseInt(localStorage.getItem(COUNT_KEY) || "0", 10) || 0;
-  }
-
-  function _bumpSuccessCount() {
-    const n = _successCount() + 1;
-    localStorage.setItem(COUNT_KEY, String(n));
-    return n;
-  }
-
-  function _inCooldown() {
-    const until = parseInt(localStorage.getItem(COOLDOWN_KEY) || "0", 10) || 0;
-    return Date.now() < until;
-  }
-
-  function _startCooldown() {
-    localStorage.setItem(COOLDOWN_KEY, String(Date.now() + COOLDOWN_MS));
-  }
-
-  // ── QR code (reuses qrcode-generator) ─────────────────────────────────
-  // Draws the QR for `url` onto a canvas 2d context at (x, y) sized `sizePx`.
+  // ── QR code ───────────────────────────────────────────────────────────
   function _drawQrToCanvas(ctx, url, x, y, sizePx) {
     const qr = qrcode(0, "M");
     qr.addData(url);
@@ -223,9 +147,7 @@ const Share = (() => {
     }
   }
 
-  // ── Poster (pure-frontend Canvas, zero token, instant) ────────────────
-  // Returns a data URL (PNG). `copy` is the live editor text, drawn as the
-  // poster's main line so the poster matches exactly what the user will post.
+  // ── Poster (product) ──────────────────────────────────────────────────
   function _buildPoster(copy) {
     const W = 720, H = 1080;
     const t = _theme();
@@ -234,21 +156,17 @@ const Share = (() => {
     canvas.height = H;
     const ctx = canvas.getContext("2d");
 
-    // Background.
     _paintBackground(ctx, W, H, t, t.bg);
 
-    // Brand name.
     ctx.fillStyle = t.title;
     ctx.textAlign = "center";
     ctx.font = "700 60px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
-    ctx.fillText(_brand.name, W / 2, 150);
+    ctx.fillText(_brandName(), W / 2, 150);
 
-    // Main line = the live editor text (so poster === shared text).
-    const text = (copy || "").trim() || I18n.t("share.poster.tagline", { brand: _brand.name });
+    const text = (copy || "").trim() || I18n.t("share.poster.tagline", { brand: _brandName() });
     ctx.fillStyle = t.tagline;
     _drawAutoText(ctx, text, W / 2, 250, W - 120, 480 - 250);
 
-    // QR code (only when there's a URL to point at).
     const url = _shareUrl();
     if (url) {
       const qrSize = 300;
@@ -271,8 +189,7 @@ const Share = (() => {
     return canvas.toDataURL("image/png");
   }
 
-  // ── Scorecard poster (B-line: spend / cache-hit bragging card) ────────
-  // Hero = the cache-hit rate (the delight number). Brand is a footer chip.
+  // ── Scorecard poster ──────────────────────────────────────────────────
   function _buildScorecardPoster(copy) {
     const W = 720, H = 1080;
     const t = _theme();
@@ -285,19 +202,18 @@ const Share = (() => {
 
     ctx.textAlign = "center";
 
-    // Title + period.
     ctx.fillStyle = t.title;
     ctx.font = "700 48px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
     ctx.fillText(I18n.t("share.scorecard.poster.title"), W / 2, 110);
 
     const s = _curStats();
-    const showHeat = _scorePeriod === "month" && _scorecard.heatmap && _scorecard.heatmap.length > 0;
+    const sc = _scorecard();
+    const showHeat = _scorePeriod() === "month" && sc.heatmap && sc.heatmap.length > 0;
 
     ctx.fillStyle = t.period;
     ctx.font = "400 28px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
     ctx.fillText(s.period, W / 2, 162);
 
-    // Hero: cache hit rate.
     ctx.fillStyle = t.hero;
     ctx.font = "800 150px -apple-system, 'PingFang SC', sans-serif";
     ctx.fillText(s.cacheHitRate + "%", W / 2, 348);
@@ -306,7 +222,6 @@ const Share = (() => {
     ctx.font = "400 32px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
     ctx.fillText(I18n.t("share.scorecard.poster.cacheLabel"), W / 2, 408);
 
-    // Secondary metrics: cost + tokens.
     ctx.fillStyle = t.metric;
     ctx.font = "700 48px -apple-system, 'PingFang SC', sans-serif";
     ctx.fillText(s.costStr, W / 2 - 160, 494);
@@ -316,20 +231,17 @@ const Share = (() => {
     ctx.fillText(I18n.t("share.scorecard.poster.costLabel"), W / 2 - 160, 534);
     ctx.fillText(I18n.t("share.scorecard.poster.tokensLabel"), W / 2 + 160, 534);
 
-    // Monthly heatmap (calendar style). Pushes everything below down.
     let cursorY = 574;
     if (showHeat) {
       cursorY = _drawHeatmap(ctx, W, 552, t);
     }
 
-    // Golden line = live editor text (poster matches what gets posted).
     const goldenTop = showHeat ? cursorY + 14 : 614;
     const goldenH = showHeat ? 78 : 110;
     const line = (copy || "").trim() || _scorecardGoldenLine();
     ctx.fillStyle = t.golden;
     _drawAutoText(ctx, line, W / 2, goldenTop, W - 120, goldenH);
 
-    // QR + brand chip (gated: branded builds with no homepage show neither).
     const url = _shareUrl();
     const qrSize = showHeat ? 152 : 230;
     const qrY = goldenTop + goldenH + (showHeat ? 14 : 30);
@@ -342,7 +254,7 @@ const Share = (() => {
 
       ctx.fillStyle = t.brand;
       ctx.font = "600 28px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
-      ctx.fillText(_brand.name, W / 2, qrY + qrSize + (showHeat ? 40 : 52));
+      ctx.fillText(_brandName(), W / 2, qrY + qrSize + (showHeat ? 40 : 52));
       if (!showHeat) {
         ctx.fillStyle = t.scan;
         ctx.font = "400 23px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
@@ -351,19 +263,14 @@ const Share = (() => {
     } else {
       ctx.fillStyle = t.brand;
       ctx.font = "600 34px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
-      ctx.fillText(_brand.name, W / 2, qrY + 40);
+      ctx.fillText(_brandName(), W / 2, qrY + 40);
     }
 
     return canvas.toDataURL("image/png");
   }
 
-  // Draws a GitHub-contribution-style heatmap of daily token usage. Cells are
-  // laid out in columns of 7 (one week per column), oldest → newest. Color
-  // Draws a calendar-style heatmap of daily token usage: 7 columns (Sun→Sat),
-  // one week per row, aligned to real weekdays. Color ramps with usage via the
-  // theme's `heat` scale. Returns the Y just below it.
   function _drawHeatmap(ctx, W, top, t) {
-    const days = _scorecard.heatmap;
+    const days = _scorecard().heatmap;
     const heat = t.heat || { empty: "rgba(255,255,255,0.08)", scale: ["#9be9a8", "#40c463", "#30a14e", "#216e39", "#0a4020"] };
     const cols = 7;
     const gap = 6;
@@ -371,7 +278,6 @@ const Share = (() => {
     const gridW = cols * cell + (cols - 1) * gap;
     const x0 = (W - gridW) / 2;
 
-    // Title above the grid.
     ctx.textAlign = "center";
     ctx.fillStyle = t.metricLabel;
     ctx.font = "400 24px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
@@ -380,7 +286,6 @@ const Share = (() => {
     const gridTop = top + 18;
     const maxTok = Math.max.apply(null, days.map((d) => d.tokens).concat([1]));
 
-    // Weekday offset of the first day so columns line up with real weekdays.
     const firstDow = days.length ? new Date(days[0].date + "T00:00:00").getDay() : 0;
     let maxRow = 0;
 
@@ -405,9 +310,6 @@ const Share = (() => {
     return gridTop + (maxRow + 1) * (cell + gap) - gap;
   }
 
-  // Draws `text` centered at cx, fitting within (maxWidth × maxHeight) starting
-  // at startY. Picks the largest font (from a descending ladder) whose wrapped
-  // lines fit the height, honoring explicit "\n" breaks. Vertically centers.
   function _drawAutoText(ctx, text, cx, startY, maxWidth, maxHeight) {
     const sizes = [40, 36, 32, 28, 24, 20];
     let chosen = null;
@@ -429,7 +331,6 @@ const Share = (() => {
     }
   }
 
-  // Wraps text into lines fitting maxWidth, honoring explicit "\n" breaks.
   function _wrapLines(ctx, text, maxWidth) {
     const out = [];
     for (const para of String(text).split("\n")) {
@@ -457,9 +358,6 @@ const Share = (() => {
     ctx.closePath();
   }
 
-  // Paints a richer-than-flat poster background: base diagonal gradient, soft
-  // radial color glows, and a faint grid. Deterministic (no randomness) so the
-  // poster is reproducible and white-label safe.
   function _paintBackground(ctx, W, H, t, base) {
     const baseGrad = ctx.createLinearGradient(0, 0, W, H);
     baseGrad.addColorStop(0, base[0]);
@@ -487,7 +385,6 @@ const Share = (() => {
       ctx.stroke();
     }
 
-    // Subtle top sheen for depth.
     const sheen = ctx.createLinearGradient(0, 0, 0, H * 0.35);
     sheen.addColorStop(0, t.style === "geek" ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.18)");
     sheen.addColorStop(1, "rgba(255,255,255,0)");
@@ -519,7 +416,6 @@ const Share = (() => {
     finally { ta.remove(); }
   }
 
-  // Append the landing URL (when present) to a body of share text.
   function _withUrl(body) {
     const url = _shareUrl();
     return url ? `${body} ${url}`.trim() : body;
@@ -532,14 +428,13 @@ const Share = (() => {
     window.open(share, "_blank", "noopener,noreferrer");
   }
 
-  // ── Poster sharing helpers ────────────────────────────────────────────
   function _posterFilename() {
-    return `${_brand.name.toLowerCase()}-${_scorecard ? "scorecard" : "share"}.png`;
+    return `${_brandName().toLowerCase()}-${_scorecard() ? "scorecard" : "share"}.png`;
   }
 
   function _downloadPoster(copy) {
     const a = document.createElement("a");
-    a.href = _scorecard ? _buildScorecardPoster(copy) : _buildPoster(copy);
+    a.href = _scorecard() ? _buildScorecardPoster(copy) : _buildPoster(copy);
     a.download = _posterFilename();
     a.click();
   }
@@ -554,23 +449,17 @@ const Share = (() => {
   // ── Modal UI ──────────────────────────────────────────────────────────
   let _overlay = null;
   let _activePlatform = "weibo";
+  let _rerenderPeriods = null;
 
   const PLATFORMS = ["weibo", "xhs", "wechat", "bilibili"];
 
-  function _telemetry(event, extra) {
-    if (typeof fetch === "undefined") return;
-    const body = JSON.stringify({ event: event, extra: extra || {} });
-    fetch("/api/telemetry", { method: "POST", headers: { "Content-Type": "application/json" }, body: body }).catch(() => {});
-  }
-
   function openModal() {
-    // Tear down a stale overlay without clearing scorecard state (closeModal
-    // nulls _scorecard, which openScorecard has just set).
     if (_overlay) { _overlay.remove(); _overlay = null; }
 
     const hasUrl = !!_shareUrl();
-    const titleKey    = _scorecard ? "share.scorecard.modal.title"    : "share.modal.title";
-    const subtitleKey = _scorecard ? "share.scorecard.modal.subtitle" : "share.modal.subtitle";
+    const sc = _scorecard();
+    const titleKey    = sc ? "share.scorecard.modal.title"    : "share.modal.title";
+    const subtitleKey = sc ? "share.scorecard.modal.subtitle" : "share.modal.subtitle";
 
     _activePlatform = "weibo";
 
@@ -591,13 +480,10 @@ const Share = (() => {
         _esc(I18n.t("share.platform." + p)) + '</button>';
     }).join("");
 
-    // Scorecard period switcher slot (filled by renderPeriodTabs below; can be
-    // re-rendered when billing hot-swaps in more periods asynchronously).
-
     o.innerHTML =
       '<div class="share-modal" role="dialog" aria-modal="true">' +
         '<button type="button" class="share-close" aria-label="Close">&times;</button>' +
-        '<h3 class="share-title">' + _esc(I18n.t(titleKey, { brand: _brand.name })) + '</h3>' +
+        '<h3 class="share-title">' + _esc(I18n.t(titleKey, { brand: _brandName() })) + '</h3>' +
         '<p class="share-subtitle">' + _esc(I18n.t(subtitleKey)) + '</p>' +
         '<div class="share-body">' +
           '<div class="share-poster-wrap"><img class="share-poster-img" alt="poster"/></div>' +
@@ -633,18 +519,16 @@ const Share = (() => {
 
     const renderPoster = () => {
       const copy = (textarea.value || "").trim();
-      try { img.src = _scorecard ? _buildScorecardPoster(copy) : _buildPoster(copy); }
+      try { img.src = _scorecard() ? _buildScorecardPoster(copy) : _buildPoster(copy); }
       catch (_e) { o.querySelector(".share-poster-wrap").style.display = "none"; }
     };
 
-    // Seed the editor: prefer the user's last hand-edited draft (product mode
-    // only — scorecard text carries live numbers and shouldn't be stale).
-    const draft = _scorecard ? "" : _loadDraft();
+    const draft = _scorecard() ? "" : _loadDraft();
     textarea.value = draft || _pickCopy(_activePlatform);
     renderPoster();
 
     textarea.addEventListener("input", () => {
-      if (!_scorecard) _saveDraft(textarea.value);
+      if (!_scorecard()) _saveDraft(textarea.value);
       renderPoster();
     });
 
@@ -654,7 +538,7 @@ const Share = (() => {
         b.classList.toggle("is-active", b.getAttribute("data-platform") === p);
       });
       textarea.value = _pickCopy(p);
-      if (!_scorecard) _saveDraft(textarea.value);
+      if (!_scorecard()) _saveDraft(textarea.value);
       _updatePrimaryLabel(o);
       renderPoster();
     };
@@ -677,17 +561,18 @@ const Share = (() => {
       const slot = o.querySelector(".share-periods-slot");
       if (!slot) return;
       const order = ["day", "week", "month"];
-      const avail = _scorecard && _scorecard.periods ? _scorecard.periods : {};
+      const sc2 = _scorecard();
+      const avail = sc2 && sc2.periods ? sc2.periods : {};
       const keys = order.filter((p) => avail[p]);
       if (keys.length <= 1) { slot.innerHTML = ""; return; }
       slot.innerHTML = '<div class="share-periods">' + keys.map((p) => {
-        const on = p === _scorePeriod ? " is-active" : "";
+        const on = p === _scorePeriod() ? " is-active" : "";
         return '<button type="button" class="share-period' + on + '" data-period="' + p + '">' +
           _esc(I18n.t("share.scorecard.period." + p)) + '</button>';
       }).join("") + '</div>';
       slot.querySelectorAll(".share-period").forEach((b) => {
         b.onclick = () => {
-          _scorePeriod = b.getAttribute("data-period");
+          Share.state.scorePeriod = b.getAttribute("data-period");
           slot.querySelectorAll(".share-period").forEach((x) => {
             x.classList.toggle("is-active", x === b);
           });
@@ -708,7 +593,7 @@ const Share = (() => {
       if (act === "shuffle") {
         btn.onclick = () => {
           textarea.value = _pickCopy(_activePlatform, textarea.value.trim());
-          if (!_scorecard) _saveDraft(textarea.value);
+          if (!_scorecard()) _saveDraft(textarea.value);
           renderPoster();
         };
       } else {
@@ -717,13 +602,10 @@ const Share = (() => {
     });
 
     _updatePrimaryLabel(o);
-    _telemetry("share_open", { type: _scorecard ? "scorecard" : "share" });
+    Share.telemetry("share_open", { type: _scorecard() ? "scorecard" : "share" });
     requestAnimationFrame(() => o.classList.add("open"));
   }
 
-  // Primary button label/behavior depends on the active platform: Weibo gets
-  // a real one-click jump; image-first platforms (xhs/wechat/bilibili) get
-  // "download poster + copy text".
   function _updatePrimaryLabel(o) {
     const btn = o.querySelector('[data-act="primary"]');
     if (!btn) return;
@@ -740,7 +622,7 @@ const Share = (() => {
         break;
       case "download":
         _downloadPoster(text);
-        _telemetry("share_download", { platform: _activePlatform, type: _scorecard ? "scorecard" : "share" });
+        Share.telemetry("share_download", { platform: _activePlatform, type: _scorecard() ? "scorecard" : "share" });
         break;
       case "copylink":
         _copy(_shareUrl());
@@ -759,7 +641,7 @@ const Share = (() => {
       default:
         _downloadPoster(text);
         _copy(_withUrl(text));
-        _telemetry("share_download", { platform: _activePlatform, type: _scorecard ? "scorecard" : "share" });
+        Share.telemetry("share_download", { platform: _activePlatform, type: _scorecard() ? "scorecard" : "share" });
         Modal.toast(I18n.t("share.hint." + _activePlatform), "info");
         break;
     }
@@ -769,55 +651,34 @@ const Share = (() => {
     if (!_overlay) return;
     const o = _overlay;
     _overlay = null;
-    _scorecard = null;
-    _scorePeriod = null;
     _rerenderPeriods = null;
+    Share.clearScorecard();
     o.classList.remove("open");
     setTimeout(() => o.remove(), 200);
   }
 
-  // ── Scorecard entry (B-line) ──────────────────────────────────────────
-  // Opens the share modal in "scorecard" mode with live billing numbers.
-  // stats: { period, cacheHitRate, costStr, tokensStr, requests }
   function openScorecard(stats) {
-    _scorecard = stats || null;
-    _scorePeriod = _scorecard
-      ? (_scorecard.defaultPeriod && _scorecard.periods && _scorecard.periods[_scorecard.defaultPeriod]
-          ? _scorecard.defaultPeriod
-          : (_scorecard.periods ? Object.keys(_scorecard.periods)[0] : null))
-      : null;
+    Share.setScorecard(stats);
     openModal();
   }
 
-  // Called by billing when a period's numbers arrive after the modal already
-  // opened (instant-open path). Merges them and re-renders the switcher.
   function addScorecardPeriod(key, stats) {
-    if (!_scorecard || !_overlay) return;
-    if (!_scorecard.periods) _scorecard.periods = {};
-    _scorecard.periods[key] = stats;
+    if (!_overlay) return;
+    if (!Share.addScorecardPeriod(key, stats)) return;
     if (_rerenderPeriods) _rerenderPeriods();
   }
 
-  // ── Auto-prompt at peak-delight moments ───────────────────────────────
-  // Called from ws-dispatcher on a successful `complete` event (the active
-  // session the user is watching — onboarding runs in its own panel, never
-  // emitting this for the chat view). Shows a gentle toast, not a modal,
-  // so we never interrupt the moment.
   function maybePromptOnComplete() {
-    const n = _bumpSuccessCount();
-    if (_inCooldown()) return;
-    if (!PROMPT_AT.includes(n)) return;
+    const { prompt } = Share.consumeSuccess();
+    if (!prompt) return;
 
-    Modal.toast(I18n.t("share.prompt.message", { brand: _brand.name }), "success", {
+    Modal.toast(I18n.t("share.prompt.message", { brand: _brandName() }), "success", {
       duration: 8000,
       action: {
         label: I18n.t("share.prompt.action"),
         onClick: openModal
       }
     });
-    // Any prompt (taken or ignored) starts the cooldown so we stay quiet
-    // for the next 7 days regardless.
-    _startCooldown();
   }
 
   function _esc(s) {
@@ -826,16 +687,19 @@ const Share = (() => {
       .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
 
-  // ── Init ──────────────────────────────────────────────────────────────
   function init() {
-    _hydrateBrand();
+    Share.hydrateBrand();
     const btn = document.getElementById("share-toggle-header");
     if (btn) btn.addEventListener("click", openModal);
   }
 
-  return { init, openModal, openScorecard, addScorecardPeriod, closeModal, maybePromptOnComplete };
+  const api = { init, openModal, openScorecard, addScorecardPeriod, closeModal, maybePromptOnComplete };
+
+  return { api };
 })();
 
+Object.assign(Share, ShareView.api);
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", () => Share.init());
 } else {