openclacky 1.3.0 → 1.3.2

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>`;
@@ -752,7 +878,7 @@ const Billing = (() => {
   function _renderSessionList() {
     if (!_sessions || _sessions.length === 0) {
       return `
-        <div class="billing-section billing-sessions-section">
+        <div class="billing-sessions-section">
           <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
           <div class="billing-sessions-empty">${I18n.t("billing.noSessions") || "No session data"}</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>
@@ -800,7 +926,7 @@ const Billing = (() => {
     }).join("");
 
     return `
-      <div class="billing-section billing-sessions-section">
+      <div class="billing-sessions-section">
         <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
         <div class="billing-sessions-header">
           <span class="billing-cell billing-cell-index">#</span>

data/lib/clacky/web/i18n.js

@@ -114,6 +114,8 @@ const I18n = (() => {
       "workspace.loading":       "Loading…",
       "workspace.error":         "Failed to load files",
       "workspace.downloadFailed": "Download failed",
+      "workspace.revealInFinder": "Reveal in Finder",
+      "workspace.revealFailed":   "Failed to reveal file",
       "sib.model.tooltip":       "Click to switch model",
       "sib.model.tooltip.busy":  "Model switching is disabled while the agent is responding",
       "sib.variant.header":      "Quick switch",
@@ -434,6 +436,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",
@@ -995,6 +1001,8 @@ const I18n = (() => {
       "workspace.loading":       "加载中…",
       "workspace.error":         "加载文件失败",
       "workspace.downloadFailed": "下载失败",
+      "workspace.revealInFinder": "打开所在文件夹",
+      "workspace.revealFailed":   "无法打开文件位置",
       "sib.model.tooltip":       "点击切换模型",
       "sib.model.tooltip.busy":  "Agent 回复中，暂时无法切换模型",
       "sib.variant.header":      "快速切换",
@@ -1314,6 +1322,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 ─────────────────────────────────────────────────────────── -->
@@ -442,6 +443,7 @@
 
       <!-- ── WORKSPACE PANEL (right) ──────────────────────────────────── -->
       <aside id="workspace-panel" class="collapsed">
+        <div id="workspace-resize-handle"></div>
         <div id="workspace-header">
           <span id="workspace-title" data-i18n="workspace.title">Workspace</span>
           <div class="workspace-header-actions">

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/settings.js

@@ -104,10 +104,6 @@ const Settings = (() => {
         </div>
       </div>
       <div class="model-card-grid-actions">
-        ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-          <span>${I18n.t("settings.models.btn.setDefault")}</span>
-        </button>` : ""}
         <div class="model-card-grid-toolbar">
           <button class="btn-card-grid-action" data-index="${index}" data-action="test">
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
@@ -123,12 +119,16 @@ const Settings = (() => {
           </button>` : ""}
         </div>
       </div>
-      ${websiteUrl ? `<div class="model-card-grid-footer">
-        <a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer">
+      <div class="model-card-grid-footer">
+        ${!isDefault ? `<button class="btn-card-grid-action btn-card-grid-action-primary" data-index="${index}" data-action="default">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+          <span>${I18n.t("settings.models.btn.setDefault")}</span>
+        </button>` : `<span></span>`}
+        ${websiteUrl ? `<a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer">
           ${I18n.t("settings.models.link.topUp")}
           <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
-        </a>
-      </div>` : ""}
+        </a>` : ""}
+      </div>
     `;
 
     container.appendChild(card);

data/lib/clacky/web/skills.js

@@ -51,7 +51,21 @@ const Skills = (() => {
   async function _loadBrandSkills() {
     const container = $("brand-skills-list");
     if (!container) return;
-    container.innerHTML = `<div class="brand-skills-loading">${I18n.t("skills.loading")}</div>`;
+    container.innerHTML = Array.from({ length: 4 }).map(() => `
+      <div class="brand-skill-card">
+        <div class="brand-skill-card-main">
+          <div class="brand-skill-info">
+            <div class="brand-skill-title">
+              <span class="skel skel-title"></span>
+              <span class="skel" style="height:1rem;width:3.5rem;border-radius:4px;"></span>
+            </div>
+            <span class="skel skel-subtitle"></span>
+          </div>
+          <div class="brand-skill-actions">
+            <span class="skel" style="height:1.75rem;width:4.5rem;border-radius:6px;"></span>
+          </div>
+        </div>
+      </div>`).join("");
 
     try {
       const res  = await fetch("/api/brand/skills");
@@ -163,11 +177,16 @@ const Skills = (() => {
         <span class="brand-skill-version latest">v${escapeHtml(latestVersion)}</span>
         <button class="btn-brand-update" data-name="${escapeHtml(name)}">${I18n.t("skills.brand.btn.update")}</button>`;
     } else {
-      // Installed and up-to-date — show version badge + "Use" button
+      // Installed and up-to-date — show version badge + "Use" + delete buttons
       const displayVersion = installedVersion || latestVersion;
       statusHtml = `
         <span class="brand-skill-version installed">v${escapeHtml(displayVersion)} ✓</span>
-        <button class="btn-brand-use" data-name="${escapeHtml(name)}">${I18n.t("skills.brand.btn.use")}</button>`;
+        <button class="btn-brand-use" data-name="${escapeHtml(name)}">${I18n.t("skills.brand.btn.use")}</button>
+        <button class="btn-skill-delete btn-brand-delete" data-name="${escapeHtml(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>`;
     }
 
     // Free skills show a "Free" badge; paid (encrypted) brand skills show "Private".
@@ -196,12 +215,17 @@ const Skills = (() => {
       </div>`;
 
     // Bind install/update/use buttons
-    const installBtn = card.querySelector(".btn-brand-install");
-    const updateBtn  = card.querySelector(".btn-brand-update");
-    const useBtn     = card.querySelector(".btn-brand-use");
+    const installBtn  = card.querySelector(".btn-brand-install");
+    const updateBtn   = card.querySelector(".btn-brand-update");
+    const useBtn      = card.querySelector(".btn-brand-use");
+    const deleteBtn   = card.querySelector(".btn-brand-delete");
     if (installBtn) installBtn.addEventListener("click", () => _installBrandSkill(name, installBtn));
     if (updateBtn)  updateBtn.addEventListener("click",  () => _installBrandSkill(name, updateBtn));
     if (useBtn)     useBtn.addEventListener("click",     () => _useInstalledSkill(name));
+    if (deleteBtn)  deleteBtn.addEventListener("click",  (e) => {
+      e.stopPropagation();
+      _deleteBrandSkill(name);
+    });
 
     return card;
   }
@@ -266,6 +290,24 @@ const Skills = (() => {
     }
   }
 
+  async function _deleteBrandSkill(name) {
+    if (!confirm(I18n.t("skills.deleteConfirm", { name }))) return;
+    try {
+      const res  = await fetch(`/api/brand/skills/${encodeURIComponent(name)}`, { method: "DELETE" });
+      const data = await res.json();
+      if (!res.ok || !data.ok) { alert(data.error || I18n.t("skills.deleteError")); return; }
+
+      const skill = _brandSkills.find(s => s.name === name);
+      if (skill) skill.installed_version = null;
+
+      _renderBrandSkills();
+      await Skills.load();
+      Modal.toast(I18n.t("skills.deleted", { name }), "success");
+    } catch (e) {
+      console.error("[Skills] brand skill delete failed", e);
+    }
+  }
+
   /** Open a new session and trigger a brand skill by sending "/{name}" as the first message. */
   async function _useInstalledSkill(name) {
     const maxN = Sessions.all.reduce((max, s) => {
@@ -336,6 +378,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 +404,7 @@ const Skills = (() => {
             <span class="skill-toggle-track"></span>
           </label>
           ${useButtonHtml}
+          ${deleteButtonHtml}
         </div>
       </div>
       ${errorNoticeHtml}`;
@@ -385,6 +437,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 +640,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.

data/lib/clacky/web/tasks.js

@@ -49,7 +49,7 @@ const Tasks = (() => {
       return isZh ? `每 ${n} 分钟` : `Every ${n} min`;
     }
     // Every N hours
-    if (isAny(min) && hour.startsWith("*/") && isAny(dom) && isAny(month) && isAny(dow)) {
+    if ((isAny(min) || isNum(min)) && hour.startsWith("*/") && isAny(dom) && isAny(month) && isAny(dow)) {
       const n = hour.slice(2);
       return isZh ? `每 ${n} 小时` : `Every ${n} hr`;
     }
@@ -108,13 +108,9 @@ const Tasks = (() => {
       ? `<span class="task-card-badge task-card-badge-paused">${I18n.t("tasks.paused")}</span>`
       : "";
 
-    const preview = (t.content || "")
-      .split("\n")
-      .map(l => l.trim())
-      .find(l => l.length > 0) || I18n.t("tasks.empty");
-    const previewText = preview.length > 120
-      ? escapeHtml(preview.slice(0, 120)) + "…"
-      : escapeHtml(preview);
+    const content = t.content || "";
+    const isTruncated = content.trim().length > 0;
+    const previewText = escapeHtml(content.replace(/\s+/g, " ").trim()) || escapeHtml(I18n.t("tasks.empty"));
 
     const toggleBtnHtml = t.scheduled ? (isPaused
       ? `<button class="task-action-btn task-btn-toggle task-btn-resume">
@@ -146,7 +142,7 @@ const Tasks = (() => {
             ${pausedBadge}
             ${schedLabel}
           </div>
-          <div class="task-card-preview">${previewText}</div>
+          <div class="task-card-preview${isTruncated ? " task-card-preview-expandable" : ""}">${previewText}</div>
         </div>
         <div class="task-card-actions">
           <button class="task-run-btn task-btn-run" title="${I18n.t("tasks.btn.run")}">
@@ -170,12 +166,24 @@ const Tasks = (() => {
             <span>${I18n.t("tasks.btn.delete")}</span>
           </button>
         </div>
-      </div>`;
+      </div>
+      ${isTruncated ? `<div class="task-card-detail" hidden><pre class="task-card-detail-content">${escapeHtml(content)}</pre></div>` : ""}`;
 
     row.querySelector(".task-btn-run").addEventListener("click", e => {
       e.stopPropagation();
       Tasks.run(t.name);
     });
+
+    if (isTruncated) {
+      const previewEl = row.querySelector(".task-card-preview");
+      const detailEl  = row.querySelector(".task-card-detail");
+      previewEl.addEventListener("click", e => {
+        e.stopPropagation();
+        const expanded = !detailEl.hidden;
+        detailEl.hidden = expanded;
+        row.classList.toggle("task-card-expanded", !expanded);
+      });
+    }
     const toggleBtn = row.querySelector(".task-btn-toggle");
     if (toggleBtn) {
       toggleBtn.addEventListener("click", e => {