openclacky 1.1.5 → 1.2.0

data/lib/clacky/web/app.js

@@ -45,8 +45,10 @@ const PANELS = [
   "task-detail-panel",
   "skills-panel",
   "channels-panel",
+  "mcp-panel",
   "trash-panel",
   "profile-panel",
+  "billing-panel",
   "settings-panel",
   "creator-panel",
 ];
@@ -77,11 +79,13 @@ const Router = (() => {
     if (h === "tasks")                return { view: "tasks",    params: {} };
     if (h === "skills")               return { view: "skills",   params: {} };
     if (h === "channels")             return { view: "channels", params: {} };
+    if (h === "mcp")                  return { view: "mcp",      params: {} };
     if (h === "trash")                return { view: "trash",    params: {} };
     if (h === "profile")              return { view: "profile",  params: {} };
     // Legacy: #memories redirects to #profile (memories are now merged into
     // the profile panel). Kept so bookmarks / external links don't 404.
     if (h === "memories")             return { view: "profile",  params: {} };
+    if (h === "billing")              return { view: "billing",  params: {} };
     if (h === "settings")             return { view: "settings", params: {} };
     if (h === "creator")              return { view: "creator",  params: {} };
     const m = h.match(/^session\/(.+)$/);
@@ -96,8 +100,10 @@ const Router = (() => {
     tasks:    "tasks-sidebar-item",
     skills:   "skills-sidebar-item",
     channels: "channels-sidebar-item",
+    mcp:      "mcp-sidebar-item",
     trash:    "trash-sidebar-item",
     profile:  "profile-sidebar-item",
+    billing:  "billing-sidebar-item",
     creator:  "creator-sidebar-item",
   };
 
@@ -198,6 +204,13 @@ const Router = (() => {
         Sessions.renderList();
         break;
 
+      case "mcp":
+        _setHash("mcp");
+        $("mcp-panel").style.display = "flex";
+        Mcp.onPanelShow();
+        Sessions.renderList();
+        break;
+
       case "trash":
         _setHash("trash");
         $("trash-panel").style.display = "flex";
@@ -212,6 +225,13 @@ const Router = (() => {
         Sessions.renderList();
         break;
 
+      case "billing":
+        _setHash("billing");
+        $("billing-panel").style.display = "flex";
+        Billing.open();
+        Sessions.renderList();
+        break;
+
       case "creator":
         _setHash("creator");
         $("creator-panel").style.display = "flex";
@@ -383,6 +403,68 @@ const Modal = (() => {
   return { confirm, prompt, rename };
 })();
 
+// ── Toast helper ──────────────────────────────────────────────────────────
+// Non-blocking notification stack. Replaces alert() for success/error/info
+// feedback. Supports an optional action button (e.g. "Go check").
+//
+//   Modal.toast("Saved")
+//   Modal.toast("Failed: …", "error")
+//   Modal.toast("Restored", "success", { action: { label: "Go", onClick } })
+Modal.toast = function (message, typeOrOptions = "info", maybeOptions = {}) {
+  const opts = typeof typeOrOptions === "object"
+    ? typeOrOptions
+    : { type: typeOrOptions, ...maybeOptions };
+  const type     = opts.type     || "info";
+  const duration = opts.duration ?? (type === "error" ? 6000 : 3500);
+  const action   = opts.action;
+
+  const stack = document.getElementById("toast-stack");
+  if (!stack) { console.warn("[toast] #toast-stack missing"); return; }
+
+  const icons = {
+    success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><polyline points="20 6 9 17 4 12"/></svg>',
+    error:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+    warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+    info:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
+  };
+
+  const escape = s => String(s ?? "")
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+  const el = document.createElement("div");
+  el.className = "toast toast-" + type;
+  el.setAttribute("role", type === "error" ? "alert" : "status");
+  el.innerHTML =
+    '<span class="toast-icon">' + (icons[type] || icons.info) + '</span>' +
+    '<div class="toast-body">' +
+      '<div class="toast-message">' + escape(message) + '</div>' +
+      (action ? '<button type="button" class="toast-action">' + escape(action.label) + '</button>' : '') +
+    '</div>' +
+    '<button type="button" class="toast-close" aria-label="Close">' +
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>' +
+    '</button>';
+
+  let timer = null;
+  const dismiss = () => {
+    if (timer) { clearTimeout(timer); timer = null; }
+    el.classList.add("toast-leave");
+    el.addEventListener("animationend", () => el.remove(), { once: true });
+  };
+
+  el.querySelector(".toast-close").onclick = dismiss;
+  if (action) {
+    el.querySelector(".toast-action").onclick = () => {
+      try { action.onClick && action.onClick(); } finally { dismiss(); }
+    };
+  }
+  el.onmouseenter = () => { if (timer) { clearTimeout(timer); timer = null; } };
+  el.onmouseleave = () => { if (duration > 0) timer = setTimeout(dismiss, 1500); };
+
+  stack.appendChild(el);
+  if (duration > 0) timer = setTimeout(dismiss, duration);
+};
+
 // ── Confirmation modal ────────────────────────────────────────────────────
 function showConfirmModal(confId, message) {
   $("modal-message").textContent   = message;
@@ -434,20 +516,12 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
 // On mobile: start with sidebar hidden
 if (_isMobile()) _closeSidebar();
 
-// Mobile floating back button (visible only on mobile via CSS): tap to go back to welcome.
-const _btnBack = document.querySelector(".chat-back-btn");
-if (_btnBack) _btnBack.addEventListener("click", () => Router.navigate("welcome"));
-
-// On mobile: shorten textarea placeholder so it doesn't wrap
-if (_isMobile()) {
-  const inp = $("user-input");
-  if (inp) inp.setAttribute("placeholder", inp.placeholder.replace(/\s*[\(（].*[\)）]/, "").trim());
-}
-
 // On mobile: auto-close sidebar when switching sessions/pages
 function _mobileCloseSidebar() {
   if (_isMobile()) _closeSidebar();
 }
+// Expose for use in sessions.js (rename/delete dialogs need to close sidebar first)
+window.mobileCloseSidebar = _mobileCloseSidebar;
 
 // ── New session controls ───────────────────────────────────────────────────
 // Moved to sessions.js (_initNewSessionControls, called from Sessions.init()).

data/lib/clacky/web/billing.js

@@ -0,0 +1,275 @@
+// billing.js — Billing panel logic
+// Handles displaying billing summary, daily breakdown, and usage statistics.
+
+const Billing = (() => {
+  let _summary = null;
+  let _daily = [];
+  let _currentPeriod = "month";
+
+  // ── Currency Settings ─────────────────────────────────────────────────────
+  const CURRENCY_STORAGE_KEY = "clacky-currency";
+  const EXCHANGE_RATE_STORAGE_KEY = "clacky-exchange-rate";
+  const DEFAULT_USD_TO_CNY_RATE = 6.7944; // Default exchange rate: 1 USD ≈ 6.7944 CNY
+
+  function _getCurrency() {
+    try { return localStorage.getItem(CURRENCY_STORAGE_KEY) || "USD"; } catch (_) { return "USD"; }
+  }
+
+  function _getExchangeRate() {
+    try {
+      const rate = localStorage.getItem(EXCHANGE_RATE_STORAGE_KEY);
+      if (rate) {
+        const parsed = parseFloat(rate);
+        if (!isNaN(parsed) && parsed > 0) return parsed;
+      }
+    } catch (_) {}
+    return DEFAULT_USD_TO_CNY_RATE;
+  }
+
+  function _setExchangeRate(rate) {
+    try {
+      if (rate && !isNaN(rate) && rate > 0) {
+        localStorage.setItem(EXCHANGE_RATE_STORAGE_KEY, rate.toString());
+        document.dispatchEvent(new CustomEvent("currencychange"));
+      }
+    } catch (_) {}
+  }
+
+  function _convertCost(usdCost) {
+    const currency = _getCurrency();
+    if (currency === "CNY") {
+      return usdCost * _getExchangeRate();
+    }
+    return usdCost;
+  }
+
+  function _getCurrencySymbol() {
+    return _getCurrency() === "CNY" ? "¥" : "$";
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  function open() {
+    _load();
+    // Listen for currency changes
+    document.removeEventListener("currencychange", _onCurrencyChange);
+    document.addEventListener("currencychange", _onCurrencyChange);
+  }
+
+  function _onCurrencyChange() {
+    if (_summary) _render();
+  }
+
+  // ── Data Loading ────────────────────────────────────────────────────────────
+
+  async function _load() {
+    const container = document.getElementById("billing-content");
+    if (!container) return;
+
+    container.innerHTML = `<div class="billing-loading">${I18n.t("billing.loading") || "Loading billing data..."}</div>`;
+
+    try {
+      const [summaryRes, dailyRes] = await Promise.all([
+        fetch(`/api/billing/summary?period=${_currentPeriod}`),
+        fetch("/api/billing/daily?days=30")
+      ]);
+
+      _summary = await summaryRes.json();
+      const dailyData = await dailyRes.json();
+      _daily = dailyData.days || [];
+
+      _render();
+    } catch (e) {
+      container.innerHTML = `<div class="billing-error">${I18n.t("billing.error") || "Failed to load billing data"}: ${e.message}</div>`;
+    }
+  }
+
+  // ── Rendering ───────────────────────────────────────────────────────────────
+
+  function _render() {
+    const container = document.getElementById("billing-content");
+    if (!container || !_summary) return;
+
+    const periodOptions = ["day", "week", "month", "year", "all"].map(p => 
+      `<option value="${p}" ${p === _currentPeriod ? "selected" : ""}>${_periodLabel(p)}</option>`
+    ).join("");
+
+    container.innerHTML = `
+      <div class="billing-header">
+        <h2>${I18n.t("billing.title") || "💰 Billing"}</h2>
+        <select id="billing-period-select" class="billing-period-select">
+          ${periodOptions}
+        </select>
+      </div>
+
+      <div class="billing-summary-cards">
+        <div class="billing-card billing-card-primary">
+          <div class="billing-card-label">${I18n.t("billing.totalCost") || "Total Cost"}</div>
+          <div class="billing-card-value">${_getCurrencySymbol()}${_formatCost(_convertCost(_summary.total_cost))}</div>
+        </div>
+        <div class="billing-card">
+          <div class="billing-card-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</div>
+          <div class="billing-card-value">${_formatNumber(_summary.total_tokens)}</div>
+        </div>
+        <div class="billing-card">
+          <div class="billing-card-label">${I18n.t("billing.requests") || "API Requests"}</div>
+          <div class="billing-card-value">${_formatNumber(_summary.record_count)}</div>
+        </div>
+      </div>
+
+      <div class="billing-details">
+        <div class="billing-section">
+          <h3>${I18n.t("billing.tokenBreakdown") || "Token Breakdown"}</h3>
+          <div class="billing-token-grid">
+            <div class="billing-token-item">
+              <span class="billing-token-label">📥 ${I18n.t("billing.promptTokens") || "Prompt"}</span>
+              <span class="billing-token-value">${_formatNumber(_summary.prompt_tokens)}</span>
+            </div>
+            <div class="billing-token-item">
+              <span class="billing-token-label">📤 ${I18n.t("billing.completionTokens") || "Completion"}</span>
+              <span class="billing-token-value">${_formatNumber(_summary.completion_tokens)}</span>
+            </div>
+            <div class="billing-token-item">
+              <span class="billing-token-label">🗄️ ${I18n.t("billing.cacheRead") || "Cache Read"}</span>
+              <span class="billing-token-value">${_formatNumber(_summary.cache_read_tokens)}</span>
+            </div>
+            <div class="billing-token-item">
+              <span class="billing-token-label">📝 ${I18n.t("billing.cacheWrite") || "Cache Write"}</span>
+              <span class="billing-token-value">${_formatNumber(_summary.cache_write_tokens)}</span>
+            </div>
+          </div>
+        </div>
+
+        ${_renderModelBreakdown()}
+        ${_renderDailyChart()}
+      </div>
+    `;
+
+    // Bind period change handler
+    document.getElementById("billing-period-select")?.addEventListener("change", (e) => {
+      _currentPeriod = e.target.value;
+      _load();
+    });
+  }
+
+  function _renderModelBreakdown() {
+    if (!_summary.by_model || Object.keys(_summary.by_model).length === 0) {
+      return "";
+    }
+
+    const rows = Object.entries(_summary.by_model)
+      .sort((a, b) => (b[1].cost || b[1]) - (a[1].cost || a[1]))
+      .map(([model, data]) => {
+        const cost = typeof data === "object" ? data.cost : data;
+        const requests = typeof data === "object" ? data.requests : "—";
+        return `
+          <tr>
+            <td class="billing-model-name">${_esc(model)}</td>
+            <td class="billing-model-cost">${_getCurrencySymbol()}${_formatCost(_convertCost(cost))}</td>
+            <td class="billing-model-requests">${requests}</td>
+          </tr>
+        `;
+      }).join("");
+
+    return `
+      <div class="billing-section">
+        <h3>${I18n.t("billing.byModel") || "By Model"}</h3>
+        <table class="billing-model-table">
+          <thead>
+            <tr>
+              <th>${I18n.t("billing.model") || "Model"}</th>
+              <th>${I18n.t("billing.cost") || "Cost"}</th>
+              <th>${I18n.t("billing.requests") || "Requests"}</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  function _renderDailyChart() {
+    if (!_daily || _daily.length === 0) {
+      return "";
+    }
+
+    // Get last 14 days (show all days, not just those with activity)
+    const recentDays = _daily.slice(-14);
+    if (recentDays.length === 0) {
+      return "";
+    }
+
+    // Find max cost for scaling (minimum 0.0001 to avoid division by zero)
+    const maxCost = Math.max(...recentDays.map(d => d.cost || 0), 0.0001);
+
+    const bars = recentDays.map(d => {
+      const cost = d.cost || 0;
+      const height = cost > 0 ? Math.max((cost / maxCost) * 100, 5) : 0;
+      const date = d.date.slice(5); // MM-DD
+      const promptTokens = d.prompt_tokens || 0;
+      const completionTokens = d.completion_tokens || 0;
+      const cacheRead = d.cache_read_tokens || 0;
+      const cacheWrite = d.cache_write_tokens || 0;
+      const cacheHitRate = promptTokens > 0 ? ((cacheRead / promptTokens) * 100).toFixed(1) : 0;
+      const tooltip = `${d.date}\n${I18n.t("billing.totalCost") || "Cost"}: ${_getCurrencySymbol()}${_formatCost(_convertCost(cost))}\n${I18n.t("billing.promptTokens") || "Input"}: ${_formatNumber(promptTokens)}\n${I18n.t("billing.completionTokens") || "Output"}: ${_formatNumber(completionTokens)}\n${I18n.t("billing.cacheRead") || "Cache Read"}: ${_formatNumber(cacheRead)} (${cacheHitRate}%)\n${I18n.t("billing.cacheWrite") || "Cache Write"}: ${_formatNumber(cacheWrite)}\n${I18n.t("billing.requests") || "Requests"}: ${d.requests || 0}`;
+      return `
+        <div class="billing-chart-bar-wrapper" title="${tooltip}">
+          <div class="billing-chart-bar" style="height: ${height}%"></div>
+          <div class="billing-chart-label">${date}</div>
+        </div>
+      `;
+    }).join("");
+
+    return `
+      <div class="billing-section">
+        <h3>${I18n.t("billing.dailyUsage") || "Daily Usage"}</h3>
+        <div class="billing-chart">
+          ${bars}
+        </div>
+      </div>
+    `;
+  }
+
+  // ── Helpers ─────────────────────────────────────────────────────────────────
+
+  function _formatCost(cost) {
+    if (cost == null || cost === 0) return "0.0000";
+    return cost.toFixed(4);
+  }
+
+  function _formatNumber(num) {
+    if (num == null || num === 0) return "0";
+    return num.toLocaleString();
+  }
+
+  function _periodLabel(period) {
+    const labels = {
+      day: I18n.t("billing.period.day") || "Today",
+      week: I18n.t("billing.period.week") || "This Week",
+      month: I18n.t("billing.period.month") || "This Month",
+      year: I18n.t("billing.period.year") || "This Year",
+      all: I18n.t("billing.period.all") || "All Time"
+    };
+    return labels[period] || period;
+  }
+
+  function _esc(str) {
+    if (!str) return "";
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  // ── Expose Public API ───────────────────────────────────────────────────────
+
+  return { 
+    open,
+    // Expose currency utilities for other modules
+    getCurrency: _getCurrency,
+    convertCost: _convertCost,
+    getCurrencySymbol: _getCurrencySymbol,
+    getExchangeRate: _getExchangeRate
+  };
+})();

data/lib/clacky/web/brand.js

@@ -68,28 +68,64 @@ const Brand = (() => {
   // ── Internal ───────────────────────────────────────────────────────────────
 
   // Show a dismissible activation banner at the top of the page.
-  // Renders immediately with a generic prompt, then asynchronously fetches
-  // the free/paid skill counts and refines the copy.
+  // Defers rendering until /api/brand/skills resolves so the banner shows its
+  // final copy in one shot. Falls back to a generic prompt if the API fails
+  // or stays silent for 5s.
   function _showActivationBanner(brandName) {
-    const existing = document.getElementById("brand-activation-banner");
-    if (existing) return;
+    if (document.getElementById("brand-activation-banner")) return;
+
+    const name = brandName || I18n.t("brand.banner.defaultName");
+
+    let settled = false;
+    const settle = data => {
+      if (settled) return;
+      settled = true;
+      if (document.getElementById("brand-activation-banner")) return;
+      _renderActivationBanner(name, data);
+    };
+
+    fetch("/api/brand/skills")
+      .then(r => r.json())
+      .then(settle)
+      .catch(() => settle(null));
+
+    setTimeout(() => settle(null), 5000);
+  }
 
+  function _renderActivationBanner(name, countsData) {
     const bar = document.createElement("div");
     bar.id        = "brand-activation-banner";
     bar.className = "brand-activation-banner";
 
-    const name = brandName || I18n.t("brand.banner.defaultName");
-
     const span = document.createElement("span");
-    span.textContent = I18n.t("brand.banner.prompt", { name });
-    span.setAttribute("data-i18n", "brand.banner.prompt");
-    span.setAttribute("data-i18n-vars", `name=${name}`);
-
     const link = document.createElement("button");
-    link.className   = "brand-activation-banner-link";
+    link.className = "brand-activation-banner-link";
+    link.addEventListener("click", () => _goToLicenseInput());
+
+    let i18nKey  = "brand.banner.prompt";
+    let vars     = { name };
+    let hideLink = false;
+
+    if (countsData && countsData.ok && countsData.free_mode) {
+      const free = (countsData.skills || []).length;
+      const paid = Number(countsData.paid_skills_count) || 0;
+      vars = { name, free, paid, freePlural: free === 1 ? "" : "s", paidPlural: paid === 1 ? "" : "s" };
+
+      if (free > 0 && paid > 0)        i18nKey = "brand.banner.freePromptBoth";
+      else if (free > 0 && paid === 0) { i18nKey = "brand.banner.freePromptOnlyFree"; hideLink = true; }
+      else if (free === 0 && paid > 0) i18nKey = "brand.banner.freePromptOnlyPaid";
+    }
+
+    span.textContent = I18n.t(i18nKey, vars);
+    span.setAttribute("data-i18n", i18nKey);
+    span.setAttribute(
+      "data-i18n-vars",
+      Object.entries(vars).map(([k, v]) => `${k}=${v}`).join(";")
+    );
+
     link.textContent = I18n.t("brand.banner.action");
     link.setAttribute("data-i18n", "brand.banner.action");
-    link.addEventListener("click", () => _goToLicenseInput());
+    if (hideLink) link.style.display = "none";
 
     const closeBtn = document.createElement("button");
     closeBtn.className = "brand-activation-banner-close";
@@ -100,34 +136,6 @@ const Brand = (() => {
     bar.appendChild(link);
     bar.appendChild(closeBtn);
     document.getElementById("main").prepend(bar);
-
-    _refineBannerWithCounts(name, span, link);
-  }
-
-  async function _refineBannerWithCounts(name, span, link) {
-    try {
-      const res  = await fetch("/api/brand/skills");
-      const data = await res.json();
-      if (!data.ok || !data.free_mode) return;
-
-      const free = (data.skills || []).length;
-      const paid = Number(data.paid_skills_count) || 0;
-
-      let i18nKey;
-      if (free > 0 && paid > 0)        i18nKey = "brand.banner.freePromptBoth";
-      else if (free > 0 && paid === 0) i18nKey = "brand.banner.freePromptOnlyFree";
-      else if (free === 0 && paid > 0) i18nKey = "brand.banner.freePromptOnlyPaid";
-      else                             return;
-
-      const vars = { name, free, paid, freePlural: free === 1 ? "" : "s", paidPlural: paid === 1 ? "" : "s" };
-      span.textContent = I18n.t(i18nKey, vars);
-      span.setAttribute("data-i18n", i18nKey);
-      span.setAttribute("data-i18n-vars", `name=${name};free=${free};paid=${paid};freePlural=${vars.freePlural};paidPlural=${vars.paidPlural}`);
-
-      if (paid === 0 && free > 0) link.style.display = "none";
-    } catch (_) {
-      // Network failure: leave the generic prompt in place.
-    }
   }
 
   // Navigate to Settings, scroll to Brand & License section, flash it, then focus the input.
@@ -137,6 +145,9 @@ const Brand = (() => {
     if (typeof Settings !== "undefined") Settings.open();
     // Settings.open() triggers an async fetch; wait for layout to stabilise before scrolling.
     setTimeout(() => {
+      const generalTabBtn   = document.querySelector('#settings-tabs .settings-tab[data-tab="general"]');
+      if (generalTabBtn && !generalTabBtn.classList.contains("active")) generalTabBtn.click();
+
       const section         = document.getElementById("brand-license-section");
       const input           = document.getElementById("settings-license-key");
       const scrollContainer = document.getElementById("settings-body");