openclacky 1.2.16 → 1.2.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b0bb463f7cc0c691496a5dcb6e0d0d7e2e5f20eab12dddee17049f35588755e8
-  data.tar.gz: c046bc3d50ebb6624e15b19bbf727a763930d9182ac2b650ea8bc4f4a9b8ea6e
+  metadata.gz: 3a0f79d1b7995b24b2b1a5d31dc36d4342ad1ff925b66749b7edb6268d0bcf29
+  data.tar.gz: b1f583cde8ffb619a4cb3558f074c369251c5445acce05116d1bc415e94eb3b4
 SHA512:
-  metadata.gz: 10f9b0c800eb9756f138fc3ed583aceadd89ee7b0bee2d47a3b909b5136e171abb1d8e69c7a8569e2c0642c6839d13d082f956300b56070d7617674d05a73ef5
-  data.tar.gz: f730ed4911745afebf9fe8b30d3084b5b8922f26322dc4b55049e2700774fd2a5a5a6200c74b6fc03f3bfc20db689fe9cfa9c78476c0f8809b59aa23b1f9340f
+  metadata.gz: 18921df7e5d4d4a7f3cbf1e19bd1b65bbc8360fa064d81ffc129375d86ec9a07ebfc324414d67a7d6df9782dfd8f966065755d0224d8af77b92604d6320195e2
+  data.tar.gz: 013db4dddea3c901bd3e8885241676b7fdd2ca2856a9a4df4cfde4b2475b7e57dc7795386d53db934acfe5786515501fd724e3ef559e8d5e786a6b07a3312db6

data/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.17] - 2026-06-12
+
+### Added
+- Session sharing to Web UI — share any session via a shareable link with billing integration
+- Share telemetry tracking
+
+### Fixed
+- Markdown rendering in certain edge cases
+- Image blocks not detected in replay round counting, potentially causing history truncation
+- History images served as base64 causing replay lag, now proxied through server
+- WSL kernel repair getting stuck in infinite loop on pending state
+- WeChat QR login fallback showing false stale-session errors
+
+### More
+- Background color styling update
+
 ## [1.2.16] - 2026-06-10
 
 ### Added

data/lib/clacky/agent/session_serializer.rb

@@ -201,8 +201,11 @@ module Clacky
             if msg[:content].is_a?(String)
               !msg[:content].start_with?("[SYSTEM]")
             elsif msg[:content].is_a?(Array)
-              # Must contain at least one text or image block (not a tool_result array)
-              msg[:content].any? { |b| b.is_a?(Hash) && %w[text image].include?(b[:type].to_s) }
+              # Must contain at least one text or image block (not a tool_result array).
+              # "image_url" covers image-only messages (user sent a picture with no
+              # accompanying text); without it such messages start no round and get
+              # dropped on replay, making the image vanish on session reopen.
+              msg[:content].any? { |b| b.is_a?(Hash) && %w[text image image_url].include?(b[:type].to_s) }
             else
               false
             end

data/lib/clacky/default_skills/channel-manager/SKILL.md

@@ -253,13 +253,15 @@ browser(action="navigate", url="<qr_page_url>")
 >
 > `http://${CLACKY_SERVER_HOST}:${CLACKY_SERVER_PORT}/weixin-qr.html?url=<URL-encoded qrcode_url>`
 >
-> Scan the QR code with WeChat, confirm in the app, then reply "done".
+> Scan the QR code with WeChat and confirm in the app. I'm already watching for your scan — no need to reply.
+
+**Do NOT wait for the user to reply "done".** Immediately proceed to Step 3 and start polling — exactly as in the browser-succeeds path. The polling script must already be running while the user scans, so it can observe the `scaned → confirmed` transition; otherwise a real scan can be misread as a stale session.
 
 The page renders a proper scannable QR code image. Do NOT open the raw `qrcode_url` directly — that page shows "请使用微信扫码打开" with no actual QR image.
 
 #### Step 3 — Wait for scan and save credentials
 
-Once the browser shows the QR page, immediately run the polling script in the background:
+As soon as the QR page has been presented to the user — whether you opened it via the browser tool **or** gave the user the manual link — immediately run the polling script in the background. **In both cases, do NOT wait for the user to confirm or reply "done" before starting the poll** — the script must already be running while the user scans:
 
 ```bash
 ruby "SKILL_DIR/weixin_setup.rb" --qrcode-id "$QRCODE_ID"

data/lib/clacky/server/http_server.rb

@@ -45,7 +45,12 @@ module Clacky
           if url
             url
           elsif type.to_s == "image" && path && File.exist?(path.to_s)
-            Utils::FileProcessor.image_path_to_data_url(path) rescue "expired:#{name}"
+            # Serve via the /api/local-image proxy instead of inlining a base64
+            # data URL. Inlining forced a synchronous disk-read + full base64
+            # encode + downscale on every history replay (2-3s lag for sessions
+            # with downgraded text-model images). The proxy lets the browser
+            # lazy-load + cache the image, keeping the replay response tiny.
+            "/api/local-image?path=#{CGI.escape(path.to_s)}"
           elsif name
             type.to_s == "image" ? "expired:#{name}" : "pdf:#{name}"
           end
@@ -448,6 +453,7 @@ module Clacky
         when ["POST",   "/api/browser/configure"]  then api_browser_configure(req, res)
         when ["POST",   "/api/browser/reload"]    then api_browser_reload(res)
         when ["POST",   "/api/browser/toggle"]    then api_browser_toggle(res)
+        when ["POST",   "/api/telemetry"]        then api_telemetry(req, res)
         when ["POST",   "/api/onboard/complete"]  then api_onboard_complete(req, res)
         when ["POST",   "/api/onboard/skip-soul"] then api_onboard_skip_soul(req, res)
         when ["GET",    "/api/store/skills"]          then api_store_skills(res)
@@ -854,6 +860,17 @@ module Clacky
         json_response(res, 500, { ok: false, error: e.message })
       end
 
+      # POST /api/telemetry
+      # Body: { "event": "share_open" | "share_download", ... }
+      # Fire-and-forget telemetry from the WebUI frontend.
+      def api_telemetry(req, res)
+        body = parse_json_body(req) || {}
+        Clacky::Telemetry.share!(event: body["event"], extra: body["extra"])
+        json_response(res, 200, { ok: true })
+      rescue StandardError => e
+        json_response(res, 500, { ok: false, error: e.message })
+      end
+
       # POST /api/media/image
       # Body: { "prompt": "...", "aspect_ratio": "landscape|square|portrait",
       #         "output_dir": "<absolute path, optional>" }
@@ -1442,6 +1459,8 @@ module Clacky
             branded:                       true,
             needs_activation:              true,
             product_name:                  brand.product_name,
+            homepage_url:                  brand.homepage_url,
+            logo_url:                      brand.logo_url,
             test_mode:                     @brand_test,
             distribution_refresh_pending:  refresh_pending
           })
@@ -1481,6 +1500,8 @@ module Clacky
           branded:          true,
           needs_activation: false,
           product_name:     brand.product_name,
+          homepage_url:     brand.homepage_url,
+          logo_url:         brand.logo_url,
           warning:          warning,
           test_mode:        @brand_test,
           user_licensed:    brand.user_licensed?,

data/lib/clacky/telemetry.rb

@@ -71,6 +71,26 @@ module Clacky
         fire_and_forget("/api/v1/telemetry/task", payload.compact)
       end
 
+      # Called from the WebUI when user opens the share modal or completes
+      # a share action (e.g. downloads poster). Tracks share engagement.
+      #
+      # @param event [String] "share_open" or "share_download"
+      # @param extra [Hash] optional context (platform, scorecard mode, etc.)
+      def share!(event:, extra: {})
+        return unless enabled?
+
+        brand = Clacky::BrandConfig.load
+        payload = {
+          device_id: resolve_device_id(brand),
+          version:   Clacky::VERSION,
+          brand:     brand.branded? ? brand.package_name : nil,
+          event:     event
+        }
+        payload.merge!(extra) if extra.is_a?(Hash)
+
+        fire_and_forget("/api/v1/telemetry/share", payload.compact)
+      end
+
       # ── private helpers ────────────────────────────────────────────────
 
       private def enabled?

data/lib/clacky/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Clacky
-  VERSION = "1.2.16"
+  VERSION = "1.2.17"
 end

data/lib/clacky/web/app.css

@@ -9150,6 +9150,22 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-text-primary);
   border-color: var(--color-error);
 }
+.billing-share-btn {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-accent, #38bdf8);
+  border-radius: 8px;
+  background: var(--color-bg-secondary);
+  color: var(--color-accent, #38bdf8);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.billing-share-btn:hover {
+  background: var(--color-accent, #38bdf8);
+  color: #fff;
+}
 .billing-clear-popup {
   position: absolute;
   top: 100%;
@@ -9238,6 +9254,51 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Chart Row (Single Line) ─────────────────────────────────────────── */
+.billing-heatmap-row { width: 100%; }
+.billing-heat-dow-row {
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 6px;
+  margin: 0.75rem 0 6px;
+  justify-content: start;
+}
+.billing-heat-dow {
+  text-align: center;
+  font-size: 11px;
+  color: var(--color-text-tertiary, var(--color-text-secondary));
+}
+.billing-heat-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 6px;
+  justify-content: start;
+}
+.billing-heat-cell {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--color-bg-primary);
+}
+.billing-heat-cell.is-empty { background: transparent; }
+.billing-heat-cell[data-level="0"] { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); }
+.billing-heat-cell[data-level="1"] { background: #9be9a8; }
+.billing-heat-cell[data-level="2"] { background: #40c463; }
+.billing-heat-cell[data-level="3"] { background: #30a14e; }
+.billing-heat-cell[data-level="4"] { background: #216e39; }
+.billing-heat-cell[data-level="5"] { background: #0a4020; }
+.billing-heat-legend {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+.billing-heat-legend .billing-heat-cell {
+  width: 13px;
+  height: 13px;
+  aspect-ratio: auto;
+}
+
 .billing-chart-row {
   width: 100%;
 }
@@ -10363,3 +10424,247 @@ body.setup-mode[data-theme="dark"] {
 .msg-phase-empty .msg-phase-summary { cursor: default; }
 .msg-phase-empty .msg-phase-summary::before { visibility: hidden; }
 .msg-phase-empty .msg-phase-body { display: none; }
+
+/* ── Share modal ──────────────────────────────────────────────────────── */
+.share-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-overlay);
+  opacity: 0;
+  transition: opacity .18s ease;
+  padding: 20px;
+}
+.share-overlay.open { opacity: 1; }
+
+.share-modal {
+  position: relative;
+  width: 100%;
+  max-width: 660px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg, 14px);
+  box-shadow: 0 18px 48px rgba(15, 18, 28, 0.22);
+  padding: 24px;
+  transform: translateY(8px) scale(.98);
+  transition: transform .18s ease;
+}
+.share-overlay.open .share-modal { transform: translateY(0) scale(1); }
+
+.share-close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  border: none;
+  background: none;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.share-close:hover { color: var(--color-text-primary); }
+
+.share-title {
+  margin: 0 0 4px;
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+.share-subtitle {
+  margin: 0 0 16px;
+  font-size: 13px;
+  color: var(--color-text-tertiary);
+}
+
+.share-body {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+}
+.share-controls {
+  flex: 1;
+  min-width: 0;
+}
+
+.share-poster-wrap {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.share-poster-img {
+  width: 220px;
+  border-radius: var(--radius-md, 10px);
+  box-shadow: 0 6px 18px rgba(15, 18, 28, 0.16);
+}
+
+@media (max-width: 560px) {
+  .share-body { flex-direction: column; align-items: stretch; }
+  .share-poster-wrap { margin-bottom: 4px; }
+  .share-poster-img { width: 180px; }
+}
+
+.share-row-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+}
+
+.share-theme-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+.share-theme-chips {
+  display: flex;
+  gap: 8px;
+}
+.share-theme-chip {
+  flex: 1;
+  height: 34px;
+  border: 2px solid transparent;
+  border-radius: var(--radius-sm, 6px);
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color .12s ease, transform .12s ease;
+}
+.share-theme-chip:hover { transform: translateY(-1px); }
+.share-theme-chip.is-active { border-color: var(--color-button-primary); }
+.share-theme-name {
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(0,0,0,.55);
+  text-shadow: 0 1px 0 rgba(255,255,255,.4);
+  pointer-events: none;
+}
+.share-theme-chip[data-theme="geek"] .share-theme-name {
+  color: rgba(255,255,255,.92);
+  text-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+.share-periods {
+  display: inline-flex;
+  gap: 4px;
+  padding: 3px;
+  margin-bottom: 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: var(--color-bg-primary);
+}
+.share-period {
+  padding: 6px 16px;
+  border: none;
+  border-radius: var(--radius-sm, 5px);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background .12s ease, color .12s ease;
+}
+.share-period:hover { color: var(--color-text-primary); }
+.share-period.is-active {
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+}
+
+.share-platforms {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.share-platform {
+  padding: 9px 4px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease, color .12s ease;
+}
+.share-platform:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-strong);
+}
+.share-platform.is-active {
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  border-color: var(--color-button-primary);
+}
+
+.share-editor { margin-bottom: 14px; }
+.share-editor-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.share-shuffle {
+  border: none;
+  background: none;
+  color: var(--color-button-primary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+.share-shuffle:hover { text-decoration: underline; }
+.share-text {
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  min-height: 72px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+  font-family: inherit;
+}
+.share-text:focus {
+  outline: none;
+  border-color: var(--color-button-primary);
+}
+
+.share-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.share-btn-primary, .share-btn-secondary {
+  padding: 10px;
+  border-radius: var(--radius-sm, 6px);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--color-border-primary);
+}
+.share-btn-primary {
+  flex: 1 1 100%;
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  border-color: var(--color-button-primary);
+}
+.share-btn-primary:hover { background: var(--color-button-primary-hover); }
+.share-btn-secondary {
+  flex: 1 1 calc(50% - 4px);
+  min-width: 90px;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+}
+.share-btn-secondary:hover { background: var(--color-bg-hover); }
+
+#share-toggle-header svg { display: block; }

data/lib/clacky/web/billing.js

@@ -126,6 +126,9 @@ const Billing = (() => {
           <div class="billing-controls">
             <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'}
+            </button>
             <div class="billing-clear-container">
               <button id="billing-clear-btn" class="billing-clear-btn" title="${I18n.t('billing.clearData') || 'Clear Data'}">
                 🗑️
@@ -169,6 +172,10 @@ const Billing = (() => {
           </div>
         </div>
 
+        <div class="billing-heatmap-row">
+          ${_renderHeatmap()}
+        </div>
+
         <div class="billing-bottom-grid">
           ${_renderTokenBreakdown()}
           ${_renderModelBreakdown()}
@@ -201,8 +208,69 @@ const Billing = (() => {
     // Bind clear button handlers
     _bindClearHandlers();
 
+    // Bind scorecard share button
+    document.getElementById("billing-share-btn")?.addEventListener("click", _openScorecardShare);
+
     // Bind chart tooltip handlers
     _bindChartTooltip();
+    _bindHeatmapTooltip();
+  }
+
+  // Builds the per-period scorecard numbers from a raw summary object, using
+  // the same currency / formatting conventions as the billing dashboard.
+  function _scorecardStatsFor(summary, periodKey) {
+    const prompt = summary.prompt_tokens || 0;
+    const cacheRead = summary.cache_read_tokens || 0;
+    const rate = prompt === 0 ? "0" : ((cacheRead / prompt) * 100).toFixed(1);
+    return {
+      key:          periodKey,
+      period:       _periodLabel(periodKey),
+      cacheHitRate: rate,
+      costStr:      `${_getCurrencySymbol()}${_formatCost(_convertCost(summary.total_cost || 0))}`,
+      tokensStr:    _formatCompact(summary.total_tokens || 0),
+      requests:     _formatNumber(summary.record_count || 0)
+    };
+  }
+
+  // Daily token totals for the heatmap (GitHub-contribution style), oldest →
+  // newest. Each entry: { date: "YYYY-MM-DD", tokens: <total> }.
+  function _heatmapDays() {
+    return (_daily || []).map((d) => ({
+      date:   d.date,
+      tokens: (d.prompt_tokens || 0) + (d.completion_tokens || 0),
+      cost:   d.cost || 0
+    }));
+  }
+
+  function _openScorecardShare() {
+    if (!_summary || typeof Share === "undefined" || !Share.openScorecard) return;
+    const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
+
+    // Open instantly with the period the dashboard already has, then fetch the
+    // other periods in the background and hot-swap them in (no blocking await).
+    const periods = {};
+    periods[_currentPeriod] = _scorecardStatsFor(_summary, _currentPeriod);
+
+    Share.openScorecard({
+      periods:       periods,
+      defaultPeriod: _currentPeriod,
+      heatmap:       _heatmapDays(),
+      period:        periods[_currentPeriod].period,
+      cacheHitRate:  periods[_currentPeriod].cacheHitRate,
+      costStr:       periods[_currentPeriod].costStr,
+      tokensStr:     periods[_currentPeriod].tokensStr,
+      requests:      periods[_currentPeriod].requests
+    });
+
+    const others = ["day", "week", "month"].filter((p) => p !== _currentPeriod);
+    others.forEach((p) => {
+      fetch(`/api/billing/summary?period=${p}${modelParam}`)
+        .then((r) => r.json())
+        .then((summary) => {
+          if (Share.addScorecardPeriod) Share.addScorecardPeriod(p, _scorecardStatsFor(summary, p));
+        })
+        .catch(() => {});
+    });
   }
 
   function _bindChartTooltip() {
@@ -261,6 +329,42 @@ const Billing = (() => {
     });
   }
 
+  function _bindHeatmapTooltip() {
+    const grid = document.getElementById("billing-heat-grid");
+    const tooltip = document.getElementById("billing-tooltip");
+    if (!grid || !tooltip) return;
+
+    grid.addEventListener("mousemove", (e) => {
+      const cell = e.target.closest(".billing-heat-cell");
+      if (!cell || cell.classList.contains("is-empty") || !cell.dataset.date) {
+        tooltip.style.display = "none";
+        return;
+      }
+
+      tooltip.innerHTML = `
+        <div class="tooltip-header">
+          <span class="tooltip-date">${cell.dataset.date}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-dot tooltip-total"></span>
+          <span class="tooltip-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</span>
+          <span class="tooltip-value">${cell.dataset.tokens}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-label">${I18n.t("billing.cost") || "Cost"}</span>
+          <span class="tooltip-value">${cell.dataset.cost}</span>
+        </div>
+      `;
+      tooltip.style.display = "block";
+      tooltip.style.left = `${e.clientX + 15}px`;
+      tooltip.style.top = `${e.clientY - 10}px`;
+    });
+
+    grid.addEventListener("mouseleave", () => {
+      tooltip.style.display = "none";
+    });
+  }
+
   function _bindClearHandlers() {
     const clearBtn = document.getElementById("billing-clear-btn");
     const clearPopup = document.getElementById("billing-clear-popup");
@@ -448,6 +552,46 @@ const Billing = (() => {
     `;
   }
 
+  function _renderHeatmap() {
+    const days = _heatmapDays();
+    if (!days || days.length === 0) {
+      return `<div class="billing-chart-card billing-chart-wide"><div class="billing-chart-empty">${I18n.t("billing.noData") || "No data available"}</div></div>`;
+    }
+
+    const maxTok = Math.max(...days.map(d => d.tokens), 1);
+    const firstDow = new Date(days[0].date + "T00:00:00").getDay();
+    const cells = [];
+    for (let i = 0; i < firstDow; i++) cells.push('<div class="billing-heat-cell is-empty"></div>');
+    days.forEach((d) => {
+      const ratio = d.tokens / maxTok;
+      const lvl = d.tokens === 0 ? 0 : ratio >= 0.75 ? 5 : ratio >= 0.5 ? 4 : ratio >= 0.25 ? 3 : ratio >= 0.08 ? 2 : 1;
+      const costStr = `${_getCurrencySymbol()}${_formatCost(_convertCost(d.cost))}`;
+      cells.push(`<div class="billing-heat-cell" data-level="${lvl}" data-date="${d.date}" data-tokens="${_formatCompact(d.tokens)}" data-cost="${costStr}"></div>`);
+    });
+
+    const dowLabels = (I18n.t("billing.heatmap.dow") || "S,M,T,W,T,F,S").split(",");
+    const dowHeader = dowLabels.map(l => `<span class="billing-heat-dow">${_esc(l)}</span>`).join("");
+
+    return `
+      <div class="billing-chart-card billing-chart-wide billing-heatmap-card">
+        <div class="billing-chart-header">
+          <h4>${I18n.t("billing.heatmap.title") || "Activity"}</h4>
+          <div class="billing-heat-legend">
+            <span>${I18n.t("billing.heatmap.less") || "Less"}</span>
+            <span class="billing-heat-cell" data-level="1"></span>
+            <span class="billing-heat-cell" data-level="2"></span>
+            <span class="billing-heat-cell" data-level="3"></span>
+            <span class="billing-heat-cell" data-level="4"></span>
+            <span class="billing-heat-cell" data-level="5"></span>
+            <span>${I18n.t("billing.heatmap.more") || "More"}</span>
+          </div>
+        </div>
+        <div class="billing-heat-dow-row">${dowHeader}</div>
+        <div class="billing-heat-grid" id="billing-heat-grid">${cells.join("")}</div>
+      </div>
+    `;
+  }
+
   function _renderCombinedChart() {
     if (!_daily || _daily.length === 0) {
       return `<div class="billing-chart-card billing-chart-wide"><div class="billing-chart-empty">${I18n.t("billing.noData") || "No data available"}</div></div>`;