openclacky 1.3.0 → 1.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8423d4e64f056251f1763e5cc34502e394f08e2b26de993da5da6a85a88111ef
-  data.tar.gz: 62e60aee3f8654e881870117b4716e053ab0f9328bc3898392ff1ed27517474c
+  metadata.gz: a39f825dd6192443ca9f0d30139e20a4b7fe366f9415d721c9a2401bfed1dc4a
+  data.tar.gz: f825a682fad6a33983e6a582a52d5a9378b7bd29d118b5a2fe1d5c26dc7b3195
 SHA512:
-  metadata.gz: d675c6b981a1fc5f24bbee79dd19dc273817a7f4e233c2ed86a42def4f2fd2876cbc845a9f693383d7f4b67d39f6a62df1eafa65def2a8ace7bb876559c6aba5
-  data.tar.gz: 48adb156c4c8ab26d2908537ac409c161a56b1f6fa5aa2146bdaa5df6b11c2b333e5a04a6aafc4404f1c94ce210fe0c23854d0f86f9cc509f1a27a781f9aa007
+  metadata.gz: 62cf37fe9eb083438853faeaf8f28a4579300d51607d2fbd8eef9caba69dc82d4b2c8dc98ae70f666500c7913b47325b0a6b58a5f3043b7139e8265b12035525
+  data.tar.gz: 706a5237c4aae5092068c91dfbc6c3cb7b1a93cc27b6878cbf32f043de5ec0c038321228d626efb3b2db744e8b81b4d6889fc518ee8c2495496714e628bf7a29

data/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.3.1] - 2026-06-17
+
+### Added
+- Delete skills directly from the Web UI
+
+### Improved
+- Sidebar is now draggable to resize, with width persisted across sessions
+- Sidebar scrollbar only appears while scrolling for a cleaner look
+- Billing page UI polish and mobile adaptation
+- Default openclacky image model switched to Nano Banana 2
+
+### Fixed
+- Onboarding device-login window no longer gets blocked as a popup
+
 ## [1.3.0] - 2026-06-17
 
 ### Added

data/lib/clacky/providers.rb

@@ -59,7 +59,7 @@ module Clacky
           "or-gemini-3-1-flash-image"  => "Nano Banana 2",
           "or-gpt-image-2"             => "GPT Image 2"
         },
-        "default_image_model" => "or-gpt-image-2",
+        "default_image_model" => "or-gemini-3-1-flash-image",
         # Video generation models served by the openclacky gateway, which
         # routes them to Vertex AI Veo (async predictLongRunning under the
         # hood; the gateway hides the polling and returns the MP4 inline).

data/lib/clacky/server/http_server.rb

@@ -627,6 +627,9 @@ module Clacky
           elsif method == "PATCH" && path.match?(%r{^/api/skills/[^/]+/toggle$})
             name = URI.decode_www_form_component(path.sub("/api/skills/", "").sub("/toggle", ""))
             api_toggle_skill(name, req, res)
+          elsif method == "DELETE" && path.match?(%r{^/api/skills/[^/]+$})
+            name = URI.decode_www_form_component(path.sub("/api/skills/", ""))
+            api_delete_skill(name, res)
           elsif method == "POST" && path.match?(%r{^/api/brand/skills/[^/]+/install$})
             slug = URI.decode_www_form_component(path.sub("/api/brand/skills/", "").sub("/install", ""))
             api_brand_skill_install(slug, req, res)
@@ -3463,6 +3466,14 @@ module Clacky
         json_response(res, 422, { error: e.message })
       end
 
+      private def api_delete_skill(name, res)
+        skill = @skill_loader[name]
+        return json_response(res, 404, { error: "Skill not found: #{name}" }) unless skill
+
+        FileUtils.rm_rf(skill.directory)
+        json_response(res, 200, { ok: true })
+      end
+
       # POST /api/my-skills/:name/publish
       # GET /api/creator/skills
       # Returns two separate groups:

data/lib/clacky/version.rb

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

data/lib/clacky/web/app.css

@@ -250,7 +250,7 @@ html { font-size: 16px; }
 .skel-label    { height: 0.75rem;  width: 4rem;  margin-top: 0.375rem; }
 .skel-block    { height: 9rem;  width: 100%; }
 .skel-block-sm { height: 5rem;  width: 100%; }
-.skel-heatmap  { height: 7rem;  width: 100%; }
+.skel-heatmap  { height: 5rem;  width: 178px; }
 
 
 
@@ -375,7 +375,7 @@ body {
 }
 
 .header-logo-img {
-  height: 2.3rem;
+  height: 2rem;
   object-fit: contain;
   display: block;
   flex-shrink: 0;
@@ -498,10 +498,6 @@ body {
 .theme-toggle-btn:active {
   background: var(--color-bg-hover);
 }
-/* Sound-notification toggle shares .theme-toggle-btn; highlight when ON. */
-#notify-toggle-header.notify-on:hover {
-  color: var(--color-accent-primary, var(--color-text-primary));
-}
 
 /* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
 #app > aside,
@@ -530,8 +526,9 @@ body {
 /* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
    BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
 #sidebar {
-  width: 15rem;
-  min-width: 15rem;
+  --sidebar-width: 15rem;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
   background: var(--color-bg-primary);
   border-right: 1px solid var(--color-border-primary);
   display: flex;
@@ -540,9 +537,22 @@ body {
   height: 100%;
   flex-shrink: 0;
   margin-left: 0;
+  position: relative;
 }
 #sidebar.hidden {
-  margin-left: -15rem;
+  margin-left: calc(-1 * var(--sidebar-width));
+}
+#sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 10;
+}
+#sidebar:has(#sidebar-resize-handle.active) {
+  transition: background-color var(--transition-base);
 }
 #sidebar-header {
   display: flex;
@@ -578,6 +588,22 @@ body {
   flex-direction: column;
   min-height: 0;
   padding: 0 6px 8px;
+  margin-right: -1px;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+#sidebar-list.is-scrolling {
+  scrollbar-color: var(--color-border-secondary) transparent;
+}
+#sidebar-list::-webkit-scrollbar { width: 4px; }
+#sidebar-list::-webkit-scrollbar-track { background: transparent; }
+#sidebar-list::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 4px;
+  transition: background 0.4s;
+}
+#sidebar-list.is-scrolling::-webkit-scrollbar-thumb {
+  background: var(--color-border-secondary);
 }
 #session-list { padding: 4px 0 0; min-height: 6.75rem; }
 
@@ -598,10 +624,6 @@ body {
   background: var(--color-bg-primary);
   z-index: 10;
 }
-.sidebar-divider:first-child {
-  margin-top: 0;
-  padding-top: 18px;
-}
 .sidebar-divider span {
   white-space: nowrap;
   flex: 0 0 auto;
@@ -2128,7 +2150,7 @@ body {
 .msg-user .msg-time      { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
 .msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
 
-.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; border: 1px solid var(--color-border-secondary); }
+.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; }
 [data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
 .msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
 
@@ -2777,11 +2799,11 @@ body {
 #session-info-bar {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 0.375rem;
   flex-wrap: wrap;
-  padding: 6px 0 6px 0;
-  margin-left: 24px;
-  margin-right: 24px;
+  padding: 0.375rem 0.75rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
   background: transparent;
   border-top: none;
   font-size: 0.6875rem;
@@ -6541,6 +6563,24 @@ body {
   background: var(--color-success-bg);
 }
 
+/* ── Delete button ────────────────────────────────────────────────────────── */
+.btn-skill-delete {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.btn-skill-delete:hover {
+  color: var(--color-error, #c0392b);
+  border-color: var(--color-error-border, #f5c6c6);
+  background: var(--color-error-bg, #fff0f0);
+}
+
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
 #skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
 
@@ -9712,9 +9752,6 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 12px;
   transition: border-color 0.15s ease;
 }
-.billing-stat-card:hover {
-  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
-}
 .billing-stat-primary {
   border-color: color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
 }
@@ -9762,7 +9799,12 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Heatmap ─────────────────────────────────────────────────────────── */
-.billing-heatmap-row { width: 100%; }
+.billing-heatmap-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  width: 100%;
+}
 .billing-heat-dow-row {
   display: grid;
   grid-template-columns: repeat(7, 28px);
@@ -9790,11 +9832,11 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-heat-cell.is-empty { background: transparent; }
 .billing-heat-cell[data-level="0"] { background: 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-cell[data-level="1"] { background: color-mix(in srgb, var(--color-accent-primary) 20%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="2"] { background: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="3"] { background: color-mix(in srgb, var(--color-accent-primary) 60%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="4"] { background: color-mix(in srgb, var(--color-accent-primary) 80%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="5"] { background: var(--color-accent-primary); }
 .billing-heat-legend {
   display: flex;
   align-items: center;
@@ -9808,6 +9850,63 @@ body.setup-mode[data-theme="dark"] {
   aspect-ratio: auto;
 }
 
+/* ── Heatmap + Trend two-column row ──────────────────────────────────── */
+.billing-heatmap-card,
+.billing-trend-card {
+  min-width: 0;
+  min-height: 140px;
+}
+
+/* ── Cost Trend Line Chart ───────────────────────────────────────────── */
+.billing-trend-total {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-accent-primary);
+}
+.billing-trend-chart {
+  flex: 1;
+  min-height: 0;
+}
+.billing-trend-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.billing-trend-grid-line {
+  stroke: var(--color-border-primary);
+  stroke-width: 1;
+}
+.billing-trend-y-label {
+  font-size: 9px;
+  fill: var(--color-text-secondary);
+  text-anchor: end;
+}
+.billing-trend-x-label {
+  font-size: 9px;
+  fill: var(--color-text-secondary);
+  text-anchor: middle;
+}
+.billing-trend-line {
+  stroke: var(--color-accent-primary);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.billing-trend-area {
+  fill: url(#billing-trend-grad);
+}
+.billing-trend-dot {
+  fill: var(--color-accent-primary);
+  stroke: var(--color-bg-secondary);
+  stroke-width: 2;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.billing-trend-svg:hover .billing-trend-dot {
+  opacity: 1;
+}
+
 /* ── Chart Card base ─────────────────────────────────────────────────── */
 .billing-chart-row { width: 100%; }
 .billing-chart-card {
@@ -10002,6 +10101,8 @@ body.setup-mode[data-theme="dark"] {
   border: 1px solid var(--color-border-primary);
   border-radius: 12px;
   padding: 1.25rem;
+  height: 16rem;
+  overflow-y: auto;
 }
 .billing-section h3 {
   font-size: 0.9375rem;
@@ -10103,6 +10204,7 @@ body.setup-mode[data-theme="dark"] {
   height: 100%;
   background: var(--color-accent-primary);
   border-radius: 3px;
+  min-width: 8px;
 }
 .billing-model-cost {
   font-size: 0.8125rem;
@@ -10603,6 +10705,9 @@ body.setup-mode[data-theme="dark"] {
   text-align: right;
   color: var(--color-text-primary);
 }
+.billing-cell-total {
+  color: var(--color-accent-primary);
+}
 .billing-cell-hit {
   color: #3b82f6;
 }
@@ -11180,6 +11285,7 @@ body.setup-mode[data-theme="dark"] {
     transform: translateX(-100%);
     margin-left: 0 !important;
   }
+  #sidebar-resize-handle { display: none; }
 
   /* Overlay backdrop */
   #sidebar-overlay {
@@ -11219,7 +11325,9 @@ body.setup-mode[data-theme="dark"] {
 
   /* Session info bar: single-line, no hover-expand, font smaller */
   #session-info-bar {
-    padding: 0.1875rem 0.75rem;
+    padding: 0.1875rem 0.5rem;
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
     font-size: 0.625rem;
     overflow: hidden;
     white-space: nowrap;
@@ -11246,9 +11354,14 @@ body.setup-mode[data-theme="dark"] {
     margin: 0 0.25rem;
   }
 
+  /* Tighten input area outer padding on mobile */
+  #input-area {
+    padding: 0px 12px 12px;
+  }
+
   /* Input bar: proportional spacing, touch-friendly */
   #input-bar {
-    padding: 0.5rem 0.625rem;
+    padding: 0.375rem 0.5rem;
     gap: 0.25rem;
   }
 
@@ -11264,12 +11377,12 @@ body.setup-mode[data-theme="dark"] {
   /* Textarea: prevent iOS auto-zoom (must be ≥1rem) */
   #user-input {
     font-size: 1rem;
-    padding: 0.4375rem 0.625rem;
+    padding: 0.1875rem 0.375rem;
   }
 
   /* Send button: bigger tap target */
   #btn-send, #btn-interrupt {
-    padding: 0.4375rem 0.875rem;
+    padding: 0.3125rem 0.75rem;
     font-size: 0.875rem;
   }
 
@@ -11434,6 +11547,8 @@ body.setup-mode[data-theme="dark"] {
   #trash-body   { padding: 1rem 1rem 5rem; }
   #creator-body { padding: 1rem 1rem 5rem; }
 
+  .billing-heatmap-row { grid-template-columns: 1fr; }
+
   /* ── MCP page ── */
   #mcp-panel {
     overflow: visible;

data/lib/clacky/web/app.js

@@ -513,6 +513,57 @@ if ($("btn-toggle-sidebar")) {
 // Tap overlay to close sidebar on mobile
 $("sidebar-overlay").addEventListener("click", _closeSidebar);
 
+// ── Sidebar resize ──────────────────────────────────────────────────────
+(function _initSidebarResize() {
+  const sidebar = $("sidebar");
+  const handle = $("sidebar-resize-handle");
+  if (!sidebar || !handle) return;
+
+  const MIN_W = 12;  // rem
+  const MAX_W = 32;  // rem
+  const baseFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+  let startX = 0;
+  let startW = 0;
+
+  // Restore saved width
+  const saved = localStorage.getItem("sidebar-width");
+  if (saved) {
+    const w = parseFloat(saved);
+    if (w >= MIN_W && w <= MAX_W) {
+      sidebar.style.setProperty("--sidebar-width", w + "rem");
+    }
+  }
+
+  function _getWidth() {
+    return parseFloat(getComputedStyle(sidebar).getPropertyValue("--sidebar-width"));
+  }
+
+  handle.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startW = _getWidth();
+    handle.classList.add("active");
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  });
+
+  document.addEventListener("mousemove", (e) => {
+    if (!handle.classList.contains("active")) return;
+    const dx = (e.clientX - startX) / baseFontSize;
+    const newW = Math.min(MAX_W, Math.max(MIN_W, startW + dx));
+    sidebar.style.setProperty("--sidebar-width", newW + "rem");
+  });
+
+  document.addEventListener("mouseup", () => {
+    if (!handle.classList.contains("active")) return;
+    handle.classList.remove("active");
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    localStorage.setItem("sidebar-width", _getWidth());
+  });
+})();
+
 // On mobile: start with sidebar hidden
 if (_isMobile()) _closeSidebar();
 

data/lib/clacky/web/billing.js

@@ -124,9 +124,12 @@ const Billing = (() => {
         `).join("")}
       </div>
       <div class="billing-heatmap-row">
-        <div class="billing-chart-card billing-chart-wide billing-heatmap-card">
+        <div class="billing-chart-card billing-heatmap-card">
           <div class="skel skel-heatmap"></div>
         </div>
+        <div class="billing-chart-card billing-trend-card">
+          <div class="skel skel-block-sm"></div>
+        </div>
       </div>
       <div class="billing-bottom-grid">
         <div class="billing-section"><div class="skel skel-block"></div></div>
@@ -160,9 +163,12 @@ const Billing = (() => {
           `).join("")}
         </div>
         <div class="billing-heatmap-row">
-          <div class="billing-chart-card billing-chart-wide billing-heatmap-card">
+          <div class="billing-chart-card billing-heatmap-card">
             <div class="skel skel-heatmap"></div>
           </div>
+          <div class="billing-chart-card billing-trend-card">
+            <div class="skel skel-block-sm"></div>
+          </div>
         </div>
         <div class="billing-bottom-grid">
           <div class="billing-section"><div class="skel skel-block"></div></div>
@@ -185,7 +191,7 @@ const Billing = (() => {
     // Model filter options (使用完整模型列表)
     const models = _allModels.length > 0 ? _allModels : (_summary.by_model ? Object.keys(_summary.by_model) : []);
     const modelOptions = [`<option value="all">${I18n.t("billing.allModels") || "All Models"}</option>`]
-      .concat(models.map(m => `<option value="${_esc(m)}" ${m === _currentModel ? "selected" : ""}>${_esc(m)}</option>`))
+      .concat(models.filter(m => m).map(m => `<option value="${_esc(m)}" ${m === _currentModel ? "selected" : ""}>${_esc(m)}</option>`))
       .join("");
 
     container.innerHTML = `
@@ -214,7 +220,7 @@ const Billing = (() => {
         </div>
 
         <div class="billing-stats-row">
-          <div class="billing-stat-card billing-stat-primary">
+          <div class="billing-stat-card">
             <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>
@@ -254,6 +260,7 @@ const Billing = (() => {
 
         <div class="billing-heatmap-row">
           ${_renderHeatmap()}
+          ${_renderCostTrend()}
         </div>
 
         <div class="billing-bottom-grid">
@@ -294,6 +301,7 @@ const Billing = (() => {
     // Bind chart tooltip handlers
     _bindChartTooltip();
     _bindHeatmapTooltip();
+    _bindTrendTooltip();
   }
 
   // Builds the per-period scorecard numbers from a raw summary object, using
@@ -445,6 +453,41 @@ const Billing = (() => {
     });
   }
 
+  function _bindTrendTooltip() {
+    const svg = document.querySelector(".billing-trend-svg");
+    const tooltip = document.getElementById("billing-tooltip");
+    if (!svg || !tooltip) return;
+
+    svg.addEventListener("mousemove", (e) => {
+      const dot = e.target.closest(".billing-trend-dot");
+      if (!dot) {
+        tooltip.style.display = "none";
+        return;
+      }
+      tooltip.innerHTML = `
+        <div class="tooltip-header">
+          <span class="tooltip-date">${dot.dataset.date}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-label">${I18n.t("billing.cost") || "Cost"}</span>
+          <span class="tooltip-value">${dot.dataset.cost}</span>
+        </div>
+      `;
+      tooltip.style.display = "block";
+      tooltip.style.visibility = "hidden";
+      const rect = tooltip.getBoundingClientRect();
+      const ovf = e.clientX + 15 + rect.width - window.innerWidth;
+      tooltip.style.left = ovf > 0 ? `${e.clientX - 15 - rect.width}px` : `${e.clientX + 15}px`;
+      tooltip.style.top = `${e.clientY - 10}px`;
+      tooltip.style.visibility = "visible";
+    });
+
+    svg.addEventListener("mouseleave", () => {
+      tooltip.style.display = "none";
+      tooltip.style.visibility = "";
+    });
+  }
+
   function _bindClearHandlers() {
     const clearBtn = document.getElementById("billing-clear-btn");
     const clearPopup = document.getElementById("billing-clear-popup");
@@ -600,6 +643,7 @@ const Billing = (() => {
     }
 
     const entries = Object.entries(_summary.by_model)
+      .filter(([_, data]) => (typeof data === "object" ? data.cost : data) > 0)
       .sort((a, b) => (b[1].cost || b[1]) - (a[1].cost || a[1]));
     
     const totalCost = entries.reduce((sum, [, data]) => sum + (typeof data === "object" ? data.cost : data), 0) || 1;
@@ -653,7 +697,7 @@ const Billing = (() => {
     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-card billing-heatmap-card">
         <div class="billing-chart-header">
           <h4>${I18n.t("billing.heatmap.title") || "Activity"}</h4>
           <div class="billing-heat-legend">
@@ -672,6 +716,88 @@ const Billing = (() => {
     `;
   }
 
+  function _renderCostTrend() {
+    if (!_daily || _daily.length < 2) {
+      return `<div class="billing-chart-card billing-trend-card"><div class="billing-chart-empty">${I18n.t("billing.noData") || "No data available"}</div></div>`;
+    }
+
+    const days = _daily.slice(-30);
+    const costs = days.map(d => _convertCost(d.cost || 0));
+    const maxCost = Math.max(...costs, 0.0001);
+    const minCost = Math.min(...costs);
+
+    const pad = { top: 20, right: 16, bottom: 22, left: 48 };
+    const w = 400;
+    const h = 140;
+    const plotW = w - pad.left - pad.right;
+    const plotH = h - pad.top - pad.bottom;
+
+    const range = maxCost - minCost || 1;
+    const xStep = days.length > 1 ? plotW / (days.length - 1) : plotW;
+    const points = costs.map((c, i) => {
+      const x = pad.left + i * xStep;
+      const y = pad.top + plotH - ((c - minCost) / range) * plotH;
+      return `${x},${y}`;
+    }).join(" ");
+
+    const areaPoints = costs.length > 0
+      ? `${pad.left},${pad.top + plotH} ${points} ${pad.left + (costs.length - 1) * xStep},${pad.top + plotH}`
+      : "";
+
+    const yTicks = 4;
+    const yLabels = Array.from({ length: yTicks + 1 }, (_, i) => {
+      const val = minCost + (range / yTicks) * i;
+      const y = pad.top + plotH - ((val - minCost) / range) * plotH;
+      return { val, y };
+    });
+
+    const showEvery = days.length > 20 ? 10 : days.length > 10 ? 5 : days.length > 5 ? 3 : 1;
+    const xLabels = [];
+    let lastX = -50;
+    days.forEach((d, i) => {
+      if (i % showEvery !== 0 && i !== days.length - 1) return;
+      const x = pad.left + i * xStep;
+      if (x - lastX < 40) return;
+      lastX = x;
+      xLabels.push({ date: d.date.slice(5), x });
+    });
+
+    const currencySymbol = _getCurrencySymbol();
+
+    return `
+      <div class="billing-chart-card billing-trend-card">
+        <div class="billing-chart-header">
+          <h4>${I18n.t("billing.costTrend") || "Cost Trend"}</h4>
+          <span class="billing-trend-total">${currencySymbol}${_formatCost(costs.reduce((a, b) => a + b, 0))}</span>
+        </div>
+        <div class="billing-trend-chart">
+          <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid meet" class="billing-trend-svg">
+            ${yLabels.map(l => `
+              <line x1="${pad.left}" y1="${l.y}" x2="${w - pad.right}" y2="${l.y}" class="billing-trend-grid-line" />
+              <text x="${pad.left - 6}" y="${l.y + 4}" class="billing-trend-y-label">${currencySymbol}${_formatCost(l.val)}</text>
+            `).join("")}
+            ${xLabels.map(l => `
+              <text x="${l.x}" y="${h - 4}" class="billing-trend-x-label">${l.date}</text>
+            `).join("")}
+            <defs>
+              <linearGradient id="billing-trend-grad" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.15" />
+                <stop offset="100%" stop-color="#4f46e5" stop-opacity="0.02" />
+              </linearGradient>
+            </defs>
+            <polygon points="${areaPoints}" fill="url(#billing-trend-grad)" class="billing-trend-area" />
+            <polyline points="${points}" fill="none" class="billing-trend-line" />
+            ${costs.map((c, i) => {
+              const cx = pad.left + i * xStep;
+              const cy = pad.top + plotH - ((c - minCost) / range) * plotH;
+              return `<circle cx="${cx}" cy="${cy}" r="3" class="billing-trend-dot" data-date="${days[i].date}" data-cost="${currencySymbol}${_formatCost(c)}" />`;
+            }).join("")}
+          </svg>
+        </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>`;
@@ -782,7 +908,7 @@ const Billing = (() => {
             <span class="billing-cell-main">${_esc(displayName)}</span>
             <span class="billing-cell-sub">${requests} ${I18n.t("billing.requests") || "req"} · ${_esc(models)}</span>
           </div>
-          <div class="billing-cell billing-cell-number">${_formatCompact(totalTokens)}</div>
+          <div class="billing-cell billing-cell-number billing-cell-total">${_formatCompact(totalTokens)}</div>
           <div class="billing-cell billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)}</div>
           <div class="billing-cell billing-cell-number billing-cell-miss">${_formatCompact(cacheMiss)}</div>
           <div class="billing-cell billing-cell-number">${_formatCompact(completionTokens)}</div>

data/lib/clacky/web/i18n.js

@@ -434,6 +434,10 @@ const I18n = (() => {
       "skills.toggle.disableDesc":  "AI can auto-invoke. Disable to prevent auto-triggering (manual use still available)",
       "skills.toggle.enableDesc":   "AI cannot auto-invoke. Enable to allow auto-triggering",
       "skills.toggleError":         "Error: ",
+      "skills.deleteConfirm":       "Are you sure you want to delete \"{{name}}\"? This cannot be undone.",
+      "skills.deleteError":         "Delete failed.",
+      "skills.deleted":             "Skill \"{{name}}\" deleted.",
+      "skills.btn.delete":          "Delete skill",
       "skills.ac.empty":            "No skills available",
       "skills.upload.uploading":    "Uploading…",
       "skills.upload.uploaded":     "Uploaded",
@@ -1314,6 +1318,10 @@ const I18n = (() => {
       "skills.toggle.disableDesc":  "AI 可自动调用。关闭后 AI 不会主动触发（手动使用仍可用）",
       "skills.toggle.enableDesc":   "AI 不会自动调用。开启后允许 AI 主动触发",
       "skills.toggleError":         "错误：",
+      "skills.deleteConfirm":       "确定要删除 \"{{name}}\" 吗？此操作不可撤销。",
+      "skills.deleteError":         "删除失败。",
+      "skills.deleted":             "技能 \"{{name}}\" 已删除。",
+      "skills.btn.delete":          "删除技能",
       "skills.ac.empty":            "暂无可用技能",
       "skills.upload.uploading":    "上传中…",
       "skills.upload.uploaded":     "已上传",

data/lib/clacky/web/index.html

@@ -291,6 +291,7 @@
         </span>
       </div>
     </div>
+    <div id="sidebar-resize-handle"></div>
   </aside>
 
   <!-- ── MAIN ─────────────────────────────────────────────────────────── -->

data/lib/clacky/web/onboard.js

@@ -423,6 +423,8 @@ const Onboard = (() => {
     const zh = _selectedLang === "zh";
     _setDeviceError("");
 
+    const w = window.open("about:blank", "_blank");
+
     let data;
     try {
       const res = await fetch("/api/onboard/device/start", { method: "POST" });
@@ -432,6 +434,7 @@ const Onboard = (() => {
     }
 
     if (!data || !data.ok) {
+      if (w && !w.closed) w.close();
       _setDeviceError((data && data.error) || (zh ? "无法发起登录，请稍后重试。" : "Could not start login. Please try again."));
       return;
     }
@@ -443,7 +446,11 @@ const Onboard = (() => {
     if (link && url) link.href = url;
 
     _showDevicePending(true);
-    if (url) window.open(url, "_blank", "noopener");
+    if (w && !w.closed) {
+      w.location.href = url;
+    } else {
+      window.open(url, "_blank");
+    }
 
     _devicePolling = true;
     _pollDevice(data.device_code, (data.interval || 5) * 1000);

data/lib/clacky/web/sessions.js

@@ -5235,3 +5235,14 @@ document.addEventListener("langchange", () => {
 document.addEventListener("currencychange", () => {
   if (Sessions._lastSession) Sessions.updateInfoBar(Sessions._lastSession);
 });
+
+(function () {
+  const sidebarList = document.getElementById("sidebar-list");
+  if (!sidebarList) return;
+  let scrollTimer = null;
+  sidebarList.addEventListener("scroll", () => {
+    sidebarList.classList.add("is-scrolling");
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(() => sidebarList.classList.remove("is-scrolling"), 1000);
+  }, { passive: true });
+})();

data/lib/clacky/web/skills.js

@@ -336,6 +336,15 @@ const Skills = (() => {
       ? ""
       : `<button class="btn-skill-use" data-name="${escapeHtml(skill.name)}">${I18n.t("skills.btn.use")}</button>`;
 
+    // Delete button only for custom (non-system, non-brand) skills
+    const deleteButtonHtml = isSystem
+      ? ""
+      : `<button class="btn-skill-delete" data-name="${escapeHtml(skill.name)}" title="${I18n.t("skills.btn.delete")}">
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+             <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+           </svg>
+         </button>`;
+
     card.innerHTML = `
       <div class="skill-card-main">
         <div class="skill-card-info">
@@ -353,6 +362,7 @@ const Skills = (() => {
             <span class="skill-toggle-track"></span>
           </label>
           ${useButtonHtml}
+          ${deleteButtonHtml}
         </div>
       </div>
       ${errorNoticeHtml}`;
@@ -385,6 +395,15 @@ const Skills = (() => {
       useBtn.addEventListener("click", () => _useInstalledSkill(skill.name));
     }
 
+    // Bind delete button event
+    const deleteBtn = card.querySelector(".btn-skill-delete");
+    if (deleteBtn) {
+      deleteBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        Skills.delete(skill.name);
+      });
+    }
+
     return card;
   }
 
@@ -579,6 +598,20 @@ const Skills = (() => {
       }
     },
 
+    /** Delete a skill by name. Prompts confirmation, then DELETE to server. */
+    async delete(name) {
+      if (!confirm(I18n.t("skills.deleteConfirm", { name }))) return;
+      try {
+        const res = await fetch(`/api/skills/${encodeURIComponent(name)}`, { method: "DELETE" });
+        const data = await res.json();
+        if (!res.ok) { alert(data.error || I18n.t("skills.deleteError")); return; }
+        Modal.toast(I18n.t("skills.deleted", { name }), "success");
+        await Skills.load();
+      } catch (e) {
+        console.error("[Skills] delete failed", e);
+      }
+    },
+
     /** Switch the Skills panel to the brand-skills tab.
      *  Called externally (e.g. from settings.js after license activation) to
      *  guide the user directly to the Brand Skills download page.

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 1.3.0
+  version: 1.3.1
 platform: ruby
 authors:
 - windy
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-16 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -270,8 +269,8 @@ email:
 - yafei@dao42.com
 executables:
 - clacky
-- openclacky
 - clarky
+- openclacky
 extensions: []
 extra_rdoc_files: []
 files:
@@ -632,7 +631,6 @@ metadata:
   homepage_uri: https://github.com/clacky-ai/openclacky
   source_code_uri: https://github.com/clacky-ai/openclacky
   changelog_uri: https://github.com/clacky-ai/openclacky/blob/main/CHANGELOG.md
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -650,8 +648,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.22
-signing_key:
+rubygems_version: 3.6.9
 specification_version: 4
 summary: The most Token-efficient open-source AI Agent — BYOK, Skill-driven, IM-integrated.
 test_files: []