openclacky 1.2.17 → 1.3.0

data/lib/clacky/web/app.js

@@ -171,7 +171,7 @@ const Router = (() => {
         // Input field remains usable so user can type while waiting
         $("btn-send").disabled = true;
         WS.send({ type: "subscribe", session_id: id });
-        Sessions.renderList();
+        Sessions.renderList({ scrollToActive: true });
         $("user-input").focus();
 
         // Load session-scoped skill list (filtered by agent profile) for slash autocomplete
@@ -641,3 +641,24 @@ window.bootAfterBrand = async function() {
 
 // Session Info Bar (model switcher + working-directory switcher) moved to sessions.js
 
+// Logo hover shake with debounce
+(function () {
+  const logo = document.getElementById('header-logo-img');
+  if (!logo) return;
+  let timer = null;
+  logo.addEventListener('mouseenter', function () {
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      logo.style.animation = 'none';
+      logo.offsetHeight;
+      logo.style.animation = 'logo-shake 0.5s ease';
+    }, 100);
+  });
+  logo.addEventListener('mouseleave', function () {
+    clearTimeout(timer);
+  });
+  logo.addEventListener('animationend', function () {
+    logo.style.animation = 'none';
+  });
+})();
+

data/lib/clacky/web/backup.js

@@ -0,0 +1,119 @@
+// backup.js — Backup settings panel (Settings → General → Backup).
+//
+// Talks to /api/backup/{status,config,download}. Lets the user toggle automatic
+// backups (handled by the server-side Scheduler — fixed daily at 03:00, keeps 7)
+// and download a one-off archive directly to the browser.
+
+const Backup = (() => {
+
+  let _status = null;
+  let _saving = false;
+
+  async function load() {
+    try {
+      const res = await fetch("/api/backup/status");
+      _status = await res.json();
+      _render();
+    } catch (e) {
+      // Backup section is non-critical; fail quietly.
+    }
+  }
+
+  function _render() {
+    if (!_status) return;
+    const cfg = _status.config || {};
+
+    const incl = $("backup-include-sessions");
+    if (incl) incl.checked = cfg.include_sessions !== false;
+
+    const autoToggle = $("backup-auto-toggle");
+    if (autoToggle) autoToggle.checked = !!cfg.enabled;
+
+    _renderLastRun(cfg);
+  }
+
+  function _renderLastRun(cfg) {
+    const el = $("backup-status");
+    if (!el) return;
+    if (!cfg.last_run_at) { el.textContent = ""; el.className = "model-test-result"; return; }
+    if (cfg.last_status === "error") {
+      el.textContent = I18n.t("settings.backup.lastError", { msg: cfg.last_error || "" });
+      el.className = "model-test-result error";
+    } else {
+      el.textContent = I18n.t("settings.backup.lastOk", { time: _fmtDate(cfg.last_run_at) });
+      el.className = "model-test-result success";
+    }
+  }
+
+  async function _downloadNow() {
+    const btn = $("btn-backup-now");
+    const el = $("backup-status");
+    if (btn) btn.disabled = true;
+    if (el) { el.textContent = I18n.t("settings.backup.running"); el.className = "model-test-result"; }
+    try {
+      const res = await fetch("/api/backup/download");
+      if (!res.ok) {
+        let msg = "failed";
+        try { msg = (await res.json()).error || msg; } catch (e) {}
+        throw new Error(msg);
+      }
+      const blob = await res.blob();
+      const cd = res.headers.get("Content-Disposition") || "";
+      const m = cd.match(/filename="?([^"]+)"?/);
+      const name = (m && m[1]) || "clacky-backup.tar.gz";
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      if (el) { el.textContent = I18n.t("settings.backup.downloaded"); el.className = "model-test-result success"; }
+    } catch (e) {
+      if (el) { el.textContent = I18n.t("settings.backup.lastError", { msg: e.message }); el.className = "model-test-result error"; }
+    } finally {
+      if (btn) btn.disabled = false;
+    }
+  }
+
+  async function _saveConfig(patch) {
+    if (_saving) return;
+    _saving = true;
+    try {
+      const res = await fetch("/api/backup/config", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch)
+      });
+      const data = await res.json();
+      if (data.ok) { _status = data.status; _render(); }
+    } catch (e) {
+      // ignore — next load will resync
+    } finally {
+      _saving = false;
+    }
+  }
+
+  function _fmtDate(iso) {
+    if (!iso) return "";
+    try { return new Date(iso).toLocaleString(); } catch (e) { return iso; }
+  }
+
+  function _bind() {
+    const btn = $("btn-backup-now");
+    if (btn) btn.addEventListener("click", _downloadNow);
+
+    const autoToggle = $("backup-auto-toggle");
+    if (autoToggle) autoToggle.addEventListener("change", () => _saveConfig({ enabled: autoToggle.checked }));
+
+    const incl = $("backup-include-sessions");
+    if (incl) incl.addEventListener("change", () => _saveConfig({ include_sessions: incl.checked }));
+  }
+
+  document.addEventListener("DOMContentLoaded", _bind);
+
+  return { load };
+})();
+
+window.Backup = Backup;

data/lib/clacky/web/billing.js

@@ -70,7 +70,17 @@ const Billing = (() => {
     const container = document.getElementById("billing-content");
     if (!container) return;
 
-    container.innerHTML = `<div class="billing-loading">${I18n.t("billing.loading") || "Loading billing data..."}</div>`;
+    const isFirstLoad = !_summary;
+    if (isFirstLoad) {
+      container.innerHTML = _renderSkeleton();
+    } else {
+      const existing = container.querySelector(".billing-dashboard");
+      if (existing && !existing.querySelector(".billing-skel-overlay")) {
+        const topBar = existing.querySelector(".billing-top-bar");
+        const topBarH = topBar ? topBar.offsetHeight + 20 : 0;
+        existing.insertAdjacentHTML("beforeend", `<div class="billing-skel-overlay" style="top:${topBarH}px">${_renderSkeletonBody()}</div>`);
+      }
+    }
 
     try {
       const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
@@ -100,6 +110,68 @@ const Billing = (() => {
 
   // ── Rendering ───────────────────────────────────────────────────────────────
 
+  function _renderSkeletonBody() {
+    return `
+      <div class="billing-stats-row">
+        ${[0,1,2,3].map(() => `
+          <div class="billing-stat-card">
+            <div class="skel skel-icon"></div>
+            <div class="billing-stat-content">
+              <div class="skel skel-value"></div>
+              <div class="skel skel-label"></div>
+            </div>
+          </div>
+        `).join("")}
+      </div>
+      <div class="billing-heatmap-row">
+        <div class="billing-chart-card billing-chart-wide billing-heatmap-card">
+          <div class="skel skel-heatmap"></div>
+        </div>
+      </div>
+      <div class="billing-bottom-grid">
+        <div class="billing-section"><div class="skel skel-block"></div></div>
+        <div class="billing-section"><div class="skel skel-block"></div></div>
+      </div>
+    `;
+  }
+
+  function _renderSkeleton() {
+    return `
+      <div class="billing-dashboard billing-skeleton">
+        <div class="billing-top-bar">
+          <div class="billing-title-row">
+            <div class="skel skel-title"></div>
+            <div class="skel skel-subtitle"></div>
+          </div>
+          <div class="billing-controls">
+            <div class="skel skel-tabs"></div>
+            <div class="skel skel-select"></div>
+          </div>
+        </div>
+        <div class="billing-stats-row">
+          ${[0,1,2,3].map(() => `
+            <div class="billing-stat-card">
+              <div class="skel skel-icon"></div>
+              <div class="billing-stat-content">
+                <div class="skel skel-value"></div>
+                <div class="skel skel-label"></div>
+              </div>
+            </div>
+          `).join("")}
+        </div>
+        <div class="billing-heatmap-row">
+          <div class="billing-chart-card billing-chart-wide billing-heatmap-card">
+            <div class="skel skel-heatmap"></div>
+          </div>
+        </div>
+        <div class="billing-bottom-grid">
+          <div class="billing-section"><div class="skel skel-block"></div></div>
+          <div class="billing-section"><div class="skel skel-block"></div></div>
+        </div>
+      </div>
+    `;
+  }
+
   function _render() {
     const container = document.getElementById("billing-content");
     if (!container || !_summary) return;
@@ -131,7 +203,7 @@ const Billing = (() => {
             </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>
@@ -143,28 +215,36 @@ const Billing = (() => {
 
         <div class="billing-stats-row">
           <div class="billing-stat-card billing-stat-primary">
-            <div class="billing-stat-icon">💰</div>
+            <div class="billing-stat-icon billing-stat-icon-cost">
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M10 6v1m0 6v1M7.5 10a2.5 2.5 0 0 0 2.5 2.5c1.38 0 2.5-.56 2.5-1.25S11.38 10 10 10c-1.38 0-2.5-.56-2.5-1.25S8.62 7.5 10 7.5A2.5 2.5 0 0 1 12.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            </div>
             <div class="billing-stat-content">
               <div class="billing-stat-value">${_getCurrencySymbol()}${_formatCost(_convertCost(_summary.total_cost))}</div>
               <div class="billing-stat-label">${I18n.t("billing.totalCost") || "Total Cost"}</div>
             </div>
           </div>
           <div class="billing-stat-card">
-            <div class="billing-stat-icon">📊</div>
+            <div class="billing-stat-icon billing-stat-icon-tokens">
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="11" width="3" height="6" rx="1" fill="currentColor" opacity=".4"/><rect x="8.5" y="7" width="3" height="10" rx="1" fill="currentColor" opacity=".7"/><rect x="14" y="3" width="3" height="14" rx="1" fill="currentColor"/></svg>
+            </div>
             <div class="billing-stat-content">
               <div class="billing-stat-value">${_formatCompact(_summary.total_tokens)}</div>
               <div class="billing-stat-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</div>
             </div>
           </div>
           <div class="billing-stat-card">
-            <div class="billing-stat-icon">🔄</div>
+            <div class="billing-stat-icon billing-stat-icon-requests">
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a7 7 0 1 1 0 14A7 7 0 0 1 10 3Z" stroke="currentColor" stroke-width="1.5"/><path d="M10 7v3l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </div>
             <div class="billing-stat-content">
               <div class="billing-stat-value">${_formatNumber(_summary.record_count)}</div>
               <div class="billing-stat-label">${I18n.t("billing.requests") || "Requests"}</div>
             </div>
           </div>
           <div class="billing-stat-card">
-            <div class="billing-stat-icon">⚡</div>
+            <div class="billing-stat-icon billing-stat-icon-cache">
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L3 11h6l-1 7 8-10h-6l1-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
+            </div>
             <div class="billing-stat-content">
               <div class="billing-stat-value">${_getCacheHitRate()}%</div>
               <div class="billing-stat-label">${I18n.t("billing.cacheHit") || "Cache Hit"}</div>
@@ -698,7 +778,7 @@ const Billing = (() => {
       return `
         <div class="${rowClass}" data-session-id="${_esc(sessionId)}">
           <div class="billing-cell billing-cell-index">${index + 1}</div>
-          <div class="billing-cell billing-cell-session" title="${_esc(sessionName)}">
+          <div class="billing-cell billing-cell-session" data-tooltip="${_esc(sessionName)}" data-tooltip-pos="top">
             <span class="billing-cell-main">${_esc(displayName)}</span>
             <span class="billing-cell-sub">${requests} ${I18n.t("billing.requests") || "req"} · ${_esc(models)}</span>
           </div>
@@ -708,6 +788,13 @@ const Billing = (() => {
           <div class="billing-cell billing-cell-number">${_formatCompact(completionTokens)}</div>
           <div class="billing-cell billing-cell-cost">${_getCurrencySymbol()}${_formatCost(totalCost)}</div>
           <div class="billing-cell billing-cell-time">${lastRequest}</div>
+          <div class="billing-session-numbers-row">
+            <span class="billing-cell-number">${_formatCompact(totalTokens)} tok</span>
+            <span class="billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)} hit</span>
+            <span class="billing-cell-number">${_formatCompact(completionTokens)} out</span>
+            <span class="billing-cell-cost">${_getCurrencySymbol()}${_formatCost(totalCost)}</span>
+            <span class="billing-cell-time">${lastRequest}</span>
+          </div>
         </div>
       `;
     }).join("");

data/lib/clacky/web/channels.js

@@ -96,13 +96,49 @@ const Channels = (() => {
     if (!container) return;
     container.innerHTML = "";
 
-    // Merge server data with display metadata, show all known platforms
     const meta = PLATFORM_META();
     const platformIds = Object.keys(meta);
+    const configured = [];
+    const unconfigured = [];
+
     platformIds.forEach(pid => {
       const serverData = channels.find(c => c.platform == pid) || {};
-      container.appendChild(_renderCard(pid, serverData, meta[pid]));
+      (serverData.has_config ? configured : unconfigured).push({ pid, serverData, meta: meta[pid] });
+    });
+
+    // Connected section
+    if (configured.length > 0) {
+      const section = _renderSection("connected", configured);
+      container.appendChild(section);
+    }
+
+    // Unconfigured section
+    if (unconfigured.length > 0) {
+      const section = _renderSection("unconfigured", unconfigured);
+      container.appendChild(section);
+    }
+
+    // Custom adapter development card
+    container.appendChild(_renderCustomDevCard());
+  }
+
+  function _renderSection(type, items) {
+    const section = document.createElement("div");
+    section.className = "channel-section";
+
+    const header = document.createElement("div");
+    header.className = "channel-section-header";
+    header.textContent = type === "connected"
+      ? I18n.t("channels.section.connected")
+      : I18n.t("channels.section.unconfigured");
+    section.appendChild(header);
+
+    items.forEach(({ pid, serverData, meta }) => {
+      const card = _renderCard(pid, serverData, meta);
+      section.appendChild(card);
     });
+
+    return section;
   }
 
   function _renderCard(platform, data, meta) {
@@ -125,7 +161,6 @@ const Channels = (() => {
         </div>
         <div class="channel-card-status">
           ${hasConfig ? _toggleHtml(platform, enabled) : ""}
-          <span class="channel-status-badge" id="channel-badge-${_esc(platform)}">${_badgeHtml(enabled, running, hasConfig)}</span>
         </div>
       </div>
 
@@ -170,14 +205,7 @@ const Channels = (() => {
     `;
   }
 
-  // ── Badge & status hint helpers ───────────────────────────────────────────────
-
-  function _badgeHtml(enabled, running, hasConfig) {
-    if (running)   return `<span class="badge-running">● ${I18n.t("channels.badge.running")}</span>`;
-    if (enabled)   return `<span class="badge-enabled">● ${I18n.t("channels.badge.enabled")}</span>`;
-    if (hasConfig) return `<span class="badge-disabled">○ ${I18n.t("channels.badge.disabled")}</span>`;
-    return         `<span class="badge-disabled">○ ${I18n.t("channels.badge.notConfigured")}</span>`;
-  }
+  // ── Status hint helpers ───────────────────────────────────────────────
 
   function _statusHint(enabled, running, hasConfig) {
     if (running) {
@@ -259,6 +287,48 @@ const Channels = (() => {
     }
   }
 
+  // ── Custom Adapter Development Card ──────────────────────────────────────────
+
+  function _renderCustomDevCard() {
+    const card = document.createElement("div");
+    card.className = "channel-card channel-card-custom-dev";
+
+    card.innerHTML = `
+      <div class="channel-card-header">
+        <div class="channel-card-identity">
+          <span class="channel-logo channel-logo-custom">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+            </svg>
+          </span>
+          <div>
+            <div class="channel-card-name">${I18n.t("channels.customDev.title")}</div>
+            <div class="channel-card-desc">${I18n.t("channels.customDev.desc")}</div>
+          </div>
+        </div>
+      </div>
+      <div class="channel-card-footer">
+        <div class="channel-card-actions">
+          <button class="btn-channel-configure btn-primary" id="btn-custom-dev-guide">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
+            </svg>
+            ${I18n.t("channels.customDev.btn")}
+          </button>
+        </div>
+      </div>
+    `;
+
+    card.querySelector("#btn-custom-dev-guide")?.addEventListener("click", () => {
+      _sendToAgent(
+        I18n.t("channels.customDev.prompt"),
+        I18n.t("channels.customDev.title")
+      );
+    });
+
+    return card;
+  }
+
   // ── Helpers ───────────────────────────────────────────────────────────────────
 
   function _esc(str) {