openclacky 1.3.11 → 1.4.0

data/lib/clacky/version.rb

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

data/lib/clacky/web/app.css

@@ -782,7 +782,7 @@ body {
   color: var(--color-accent-primary);
 }
 
-/* ── Command-palette search overlay (⌘K) ─────────────────────────────────── */
+/* ── Command-palette search overlay ──────────────────────────────────────── */
 .cmd-palette-overlay {
   position: fixed;
   inset: 0;
@@ -6484,6 +6484,28 @@ body {
   overflow-y: auto;
 }
 
+/* ── Skills search ──────────────────────────────────────────────────────── */
+.skills-search {
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  width: 12rem;
+}
+.skills-search::placeholder { color: var(--color-text-tertiary); }
+.skills-search:focus {
+  outline: none;
+  border-color: var(--color-accent, #6366f1);
+}
+.skills-search-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: 0.875rem;
+}
+
 /* ── My Skills upload area (user-licensed only) ───────────────────────────── */
 .my-skills-upload-area {
   display: flex;
@@ -7171,26 +7193,38 @@ body {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
-  padding: 0.875rem 1rem;
+  padding: 0.6rem 1rem;
   transition: border-color .15s;
 }
 .extension-card:hover { border-color: var(--color-text-muted); }
 .extension-card-main {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   gap: 0.75rem;
 }
 .extension-emoji {
   font-size: 1.5rem;
   line-height: 1.4;
   flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+}
+.extension-default-icon {
+  width: 2rem;
+  height: 100%;
+  display: block;
+  border-radius: 7px;
+}
+.extension-emoji-lg .extension-default-icon {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 10px;
 }
-.extension-info { flex: 1; min-width: 0; }
+.extension-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
 .extension-title {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.25rem;
   flex-wrap: wrap;
 }
 .extension-name {
@@ -7203,7 +7237,6 @@ body {
   color: var(--color-text-secondary);
   background: var(--color-bg-tertiary, rgba(255,255,255,0.05));
   border-radius: 4px;
-  padding: 0.0625rem 0.375rem;
 }
 .extension-units {
   font-size: 0.6875rem;
@@ -7234,11 +7267,10 @@ body {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
   line-height: 1.5;
-  margin-bottom: 0.375rem;
 }
 .extension-desc-detail {
   font-size: 0.8125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
 }
 .extension-detail-author {
   font-size: 0.6875rem;
@@ -7300,8 +7332,13 @@ body {
   padding-bottom: 1.25rem;
   border-bottom: 1px solid var(--color-border-primary);
 }
-.extension-detail-heading { flex: 1; min-width: 0; }
+.extension-detail-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
 .extension-emoji-lg { font-size: 2.5rem; line-height: 1; margin-top: 0.125rem; }
+.extension-emoji-lg .extension-default-icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 12px;
+}
 .extension-name-lg { font-size: 1.125rem; font-weight: 700; }
 .extension-detail-block { margin-top: 1.5rem; }
 .extension-detail-block-title {
@@ -7309,7 +7346,6 @@ body {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-muted);
   margin: 0 0 0.75rem;
 }
 .extension-detail-section { margin-bottom: 0.875rem; }
@@ -7371,13 +7407,17 @@ body {
   border-bottom: 1px solid var(--color-border-primary);
 }
 .extension-version-row .extension-version {
-  font-size: 0.9375rem;
+  font-size: 0.8375rem;
   font-weight: 700;
   color: var(--color-text-primary);
   background: none;
   padding: 0;
   border-radius: 0;
 }
+.extension-version-separator {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
 .extension-version-date {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
@@ -7423,7 +7463,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-top: 0.75rem;
+  margin-top: 0.25rem;
 }
 .extension-disabled {
   font-size: 0.6875rem;
@@ -7631,7 +7671,7 @@ body {
   color: #ffffff;
   border: 1px solid var(--color-accent-primary);
 }
-.btn-brand-update:hover { background: var(--color-accent-hover); }
+.btn-brand-update:hover { background: var(--color-button-primary-hover); }
 .btn-brand-install:disabled,
 .btn-brand-update:disabled {
   opacity: 0.5;
@@ -10055,7 +10095,7 @@ body.setup-mode[data-theme="dark"] {
 
 .memory-card-actions {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.375rem;
   flex-shrink: 0;
 }
@@ -10095,6 +10135,7 @@ body.setup-mode[data-theme="dark"] {
 
 .btn-memory-expand {
   min-width: 1.75rem;
+  align-self: stretch;
   justify-content: center;
   color: var(--color-text-muted);
 }
@@ -10608,7 +10649,7 @@ body.setup-mode[data-theme="dark"] {
 
 /* ── Model Filter ────────────────────────────────────────────────────── */
 .billing-model-filter {
-  padding: 0.4375rem 0.75rem;
+  padding: 0.4375rem 1.75rem 0.4375rem 0.75rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   background: var(--color-bg-secondary);
@@ -10616,6 +10657,23 @@ body.setup-mode[data-theme="dark"] {
   font-size: 0.8125rem;
   cursor: pointer;
   min-width: 130px;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  transition: border-color 0.15s ease;
+}
+.billing-model-filter:hover {
+  border-color: var(--color-border-strong);
+}
+.billing-model-filter:focus {
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+.billing-model-filter option {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
 }
 
 /* ── Action Buttons ──────────────────────────────────────────────────── */
@@ -12398,11 +12456,48 @@ body.setup-mode[data-theme="dark"] {
     display: none;
   }
 
+  /* Collapse session search into the right-side header actions */
+  #header-center {
+    justify-content: flex-end;
+    padding: 0;
+  }
+  #header-cmdbar {
+    flex: 0 0 1.875rem;
+    width: 1.875rem;
+    max-width: 1.875rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    justify-content: center;
+    gap: 0;
+    margin-right: 0.125rem;
+  }
+  #header-cmdbar:hover {
+    color: var(--color-text-primary);
+  }
+  #header-cmdbar svg {
+    width: 1rem;
+    height: 1rem;
+    opacity: 1;
+  }
+  #header-cmdbar .cmdbar-ph,
+  #header-cmdbar .cmdbar-kbd,
+  #ext-slot-header-right:empty {
+    display: none;
+  }
+
   /* Tighten right-side icon gap on mobile */
   #header-right {
     gap: 0.125rem;
   }
 
+  @media (max-width: 360px) {
+    #top-header {
+      padding: 0 0.375rem;
+    }
+  }
+
   /* Session info bar: single-line, no hover-expand, font smaller */
   #session-info-bar {
     padding: 0.1875rem 0.5rem;
@@ -12819,4 +12914,3 @@ body.setup-mode[data-theme="dark"] {
     background: var(--color-bg-primary);
   }
 }
-

data/lib/clacky/web/features/extensions/view.js

@@ -77,13 +77,27 @@ const ExtensionsView = (() => {
     return parts.join(" · ");
   }
 
+  function _defaultIcon(name, extraClass) {
+    const letter = (name || "?")[0].toUpperCase();
+    const colors = [
+      ["#6366f1","#818cf8"], ["#8b5cf6","#a78bfa"], ["#ec4899","#f472b6"],
+      ["#f59e0b","#fbbf24"], ["#10b981","#34d399"], ["#3b82f6","#60a5fa"],
+      ["#ef4444","#f87171"], ["#14b8a6","#2dd4bf"],
+    ];
+    const idx = (name || "").charCodeAt(0) % colors.length;
+    const [c1, c2] = colors[idx];
+    const gid = `eg-${idx}-${Math.random().toString(36).slice(2,7)}`;
+    const cls = extraClass ? `extension-emoji ${extraClass}` : "extension-emoji";
+    return `<span class="${cls}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="extension-default-icon"><defs><linearGradient id="${gid}" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="${c1}"/><stop offset="100%" stop-color="${c2}"/></linearGradient></defs><rect width="32" height="32" rx="8" fill="url(#${gid})"/><text x="16" y="22" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" font-weight="700" fill="white">${letter}</text></svg></span>`;
+  }
+
   function _renderCard(ext) {
     const currentLang = I18n.lang();
-    const name = (currentLang === "zh" && ext.name_zh) ? ext.name_zh : ext.name;
+    const name = (currentLang === "zh" && ext.display_name_zh) ? ext.display_name_zh : (ext.display_name || ext.name);
     const description = (currentLang === "zh" && ext.description_zh)
       ? ext.description_zh
       : ext.description || "";
-    const emoji = ext.emoji || "🧩";
+    const emojiHtml = ext.emoji ? `<span class="extension-emoji">${escapeHtml(ext.emoji)}</span>` : _defaultIcon(ext.name);
 
     const versionHtml = ext.version
       ? `<span class="extension-version">v${escapeHtml(String(ext.version))}</span>` : "";
@@ -110,7 +124,7 @@ const ExtensionsView = (() => {
     card.dataset.extId = ext.id != null ? String(ext.id) : (ext.name || "");
     card.innerHTML = `
       <div class="extension-card-main">
-        <div class="extension-emoji">${escapeHtml(emoji)}</div>
+        ${emojiHtml}
         <div class="extension-info">
           <div class="extension-title">
             <span class="extension-name">${escapeHtml(name)}</span>
@@ -229,11 +243,14 @@ const ExtensionsView = (() => {
 
   function _detailContent(ext) {
     const currentLang = I18n.lang();
-    const name = (currentLang === "zh" && ext.name_zh) ? ext.name_zh : ext.name;
+    const name = (currentLang === "zh" && ext.display_name_zh) ? ext.display_name_zh : (ext.display_name || ext.name);
     const description = (currentLang === "zh" && ext.description_zh)
       ? ext.description_zh
       : ext.description || "";
     const emoji = ext.emoji || "🧩";
+    const detailEmojiHtml = ext.emoji
+      ? `<span class="extension-emoji extension-emoji-lg">${escapeHtml(ext.emoji)}</span>`
+      : _defaultIcon(ext.name, "extension-emoji-lg");
 
     const canUpdate = ext.installed && ext.installed_version && ext.version && ext.installed_version !== ext.version;
     const versionHtml = ext.version
@@ -258,7 +275,7 @@ const ExtensionsView = (() => {
 
     return `
       <div class="extension-detail-hero">
-        <div class="extension-emoji extension-emoji-lg">${escapeHtml(emoji)}</div>
+        ${detailEmojiHtml}
         <div class="extension-detail-heading">
           <div class="extension-title">
             <span class="extension-name extension-name-lg">${escapeHtml(name)}</span>
@@ -274,7 +291,7 @@ const ExtensionsView = (() => {
           ${_renderActions(ext)}
         </div>
       </div>
-      ${_renderContributes(ext.contributes)}
+      ${_renderEntryPoints(ext.contributes)}
       ${_renderVersions(ext.versions)}`;
   }
 
@@ -357,6 +374,24 @@ const ExtensionsView = (() => {
       </div>`;
   }
 
+  function _renderEntryPoints(contributes) {
+    if (!contributes || !Array.isArray(contributes.panels)) return "";
+    const eps = contributes.panels.flatMap((p) => Array.isArray(p.entry_points) ? p.entry_points : []);
+    if (eps.length === 0) return "";
+    const rows = eps.map((ep) => {
+      const slotKey = "extensions.slot." + ep.slot;
+      const label = I18n.t(slotKey) !== slotKey ? I18n.t(slotKey) : ep.slot;
+      return `<li class="extension-contrib-item"><span class="extension-contrib-title">${escapeHtml(label)}</span></li>`;
+    }).join("");
+    return `
+      <div class="extension-detail-block">
+        <h3 class="extension-detail-block-title">${escapeHtml(I18n.t("extensions.detail.entry_points"))}</h3>
+        <div class="extension-detail-section">
+          <ul class="extension-contrib-list">${rows}</ul>
+        </div>
+      </div>`;
+  }
+
   function _renderVersions(versions) {
     if (!Array.isArray(versions) || versions.length === 0) return "";
     const rows = versions.map((v) => {
@@ -365,7 +400,7 @@ const ExtensionsView = (() => {
         <li class="extension-version-item">
           <div class="extension-version-row">
             <span class="extension-version">v${escapeHtml(String(v.version || ""))}</span>
-            ${date ? `<span class="extension-version-date">${escapeHtml(date)}</span>` : ""}
+            ${date ? `<span class="extension-version-separator">-</span><span class="extension-version-date">${escapeHtml(date)}</span>` : ""}
           </div>
           ${v.release_notes ? `<div class="extension-version-notes">${typeof marked !== "undefined" ? marked.parse(String(v.release_notes).replace(/^#{1,3}[^\n]*\n?/, ""), { breaks: true, gfm: true }) : escapeHtml(String(v.release_notes))}</div>` : ""}
         </li>`;

data/lib/clacky/web/features/skills/view.js

@@ -16,6 +16,62 @@
 
 const SkillsView = (() => {
   let _domWired = false;
+  let _searchQuery = "";
+
+  // ── Search filtering ─────────────────────────────────────────────────────
+
+  function _applySearch() {
+    const q = _searchQuery.trim().toLowerCase();
+    const activeTab = SkillsStore.state.activeTab;
+
+    if (activeTab === "my-skills") {
+      const list = $("skills-list");
+      if (!list) return;
+      list.querySelectorAll(".skill-card").forEach(card => {
+        card.style.display = (!q || card.textContent.toLowerCase().includes(q)) ? "" : "none";
+      });
+      let noResult = list.querySelector(".skills-search-empty");
+      const anyVisible = [...list.querySelectorAll(".skill-card")].some(c => c.style.display !== "none");
+      if (q && !anyVisible) {
+        if (!noResult) {
+          noResult = document.createElement("div");
+          noResult.className = "skills-search-empty";
+          noResult.textContent = I18n.t("skills.search.empty");
+          list.appendChild(noResult);
+        }
+      } else {
+        noResult && noResult.remove();
+      }
+    } else {
+      const list = $("brand-skills-list");
+      if (!list) return;
+      list.querySelectorAll(".brand-skill-card").forEach(card => {
+        card.style.display = (!q || card.textContent.toLowerCase().includes(q)) ? "" : "none";
+      });
+      let noResult = list.querySelector(".skills-search-empty");
+      const anyVisible = [...list.querySelectorAll(".brand-skill-card")].some(c => c.style.display !== "none");
+      if (q && !anyVisible) {
+        if (!noResult) {
+          noResult = document.createElement("div");
+          noResult.className = "skills-search-empty";
+          noResult.textContent = I18n.t("skills.search.empty");
+          list.appendChild(noResult);
+        }
+      } else {
+        noResult && noResult.remove();
+      }
+    }
+  }
+
+  function _wireSearch() {
+    const input = $("skills-search-input");
+    if (!input) return;
+    input.placeholder = I18n.t("skills.search.placeholder");
+    input.addEventListener("input", () => {
+      _searchQuery = input.value;
+      _applySearch();
+    });
+  }
 
   // ── My Skills rendering ──────────────────────────────────────────────────
 
@@ -45,6 +101,7 @@ const SkillsView = (() => {
         console.error("[Skills] _renderSkillCard failed for skill", i, skill.name, e);
       }
     });
+    _applySearch();
   }
 
   function _renderEmptyState() {
@@ -247,6 +304,7 @@ const SkillsView = (() => {
     if (freeMode && paidSkillsCount > 0) {
       container.appendChild(_renderPaidHint(paidSkillsCount));
     }
+    _applySearch();
   }
 
   function _renderPaidHint(paidSkillsCount) {
@@ -383,6 +441,8 @@ const SkillsView = (() => {
   function _wireDom() {
     if (_domWired) return;
 
+    _wireSearch();
+
     document.querySelectorAll(".skills-tab").forEach(btn => {
       btn.addEventListener("click", () => Skills.setActiveTab(btn.dataset.tab));
     });
@@ -430,7 +490,7 @@ const SkillsView = (() => {
       _renderBrandSkills();
     });
 
-    Skills.on("tab:changed", (p) => _applyTab(p.tab));
+    Skills.on("tab:changed", (p) => { _applyTab(p.tab); _applySearch(); });
 
     Skills.on("brandStatus:changed", (p) => {
       const brandTab = $("tab-brand-skills");

data/lib/clacky/web/i18n.js

@@ -95,6 +95,8 @@ const I18n = (() => {
       "sessions.deleteTitle":   "Delete session",
       "sessions.createError":   "Error: ",
       "sessions.dirNotEmpty":   "Directory already exists and is not empty.",
+      "sessions.today":          "Today",
+      "sessions.yesterday":      "Yesterday",
       "sessions.export.tooltip": "Download session files (session.json + chunks + today's log) for debugging",
       "sessions.export.failed":  "Failed to download session",
       "sessions.actions.tooltip":      "Click for session actions",
@@ -414,6 +416,8 @@ const I18n = (() => {
       "skills.import.install":      "Install",
       "skills.tab.my":              "My Skills",
       "skills.tab.brand":           "Brand Skills",
+      "skills.search.placeholder":  "Search skills…",
+      "skills.search.empty":        "No skills match your search.",
       "skills.empty":               "No skills loaded.",
       "skills.empty.createBtn":     "Create a new skill with /skill-creator",
       "skills.noSkills":            "No skills",
@@ -534,7 +538,15 @@ const I18n = (() => {
       "extensions.unit.apis":     "APIs",
       "extensions.detail.back":        "Back",
       "extensions.detail.contributes": "What's inside",
+      "extensions.detail.entry_points": "Access points",
       "extensions.detail.versions":    "Version history",
+      "extensions.slot.sidebar.nav":        "Sidebar nav",
+      "extensions.slot.sidebar.nav.top":    "Sidebar nav (top)",
+      "extensions.slot.sidebar.nav.bottom": "Sidebar nav (bottom)",
+      "extensions.slot.sidebar.footer":     "Sidebar footer",
+      "extensions.slot.main.workspace":     "Main workspace",
+      "extensions.slot.session.aside":      "Session aside",
+      "extensions.slot.settings.tabs":      "Settings tab",
       "extensions.section.agents":     "Agents",
       "extensions.section.skills":     "Skills",
       "extensions.section.panels":     "Panels",
@@ -1063,6 +1075,8 @@ const I18n = (() => {
       "sessions.deleteTitle":   "删除会话",
       "sessions.createError":   "错误：",
       "sessions.dirNotEmpty":   "该目录已存在且不为空，请换一个目录名。",
+      "sessions.today":          "今天",
+      "sessions.yesterday":      "昨天",
       "sessions.export.tooltip": "下载会话文件（session.json + 归档片段 + 当天日志），用于调试",
       "sessions.export.failed":  "下载会话文件失败",
       "sessions.actions.tooltip":      "点击查看会话操作",
@@ -1381,6 +1395,8 @@ const I18n = (() => {
       "skills.import.install":      "安装",
       "skills.tab.my":              "我的技能",
       "skills.tab.brand":           "品牌技能",
+      "skills.search.placeholder":  "搜索技能…",
+      "skills.search.empty":        "没有匹配的技能。",
       "skills.empty":               "暂无技能。",
       "skills.empty.createBtn":     "用 /skill-creator 创建新技能",
       "skills.noSkills":            "无技能",
@@ -1501,7 +1517,15 @@ const I18n = (() => {
       "extensions.unit.apis":     "个 API",
       "extensions.detail.back":        "返回",
       "extensions.detail.contributes": "包含内容",
+      "extensions.detail.entry_points": "访问入口",
       "extensions.detail.versions":    "版本历史",
+      "extensions.slot.sidebar.nav":        "侧边栏导航",
+      "extensions.slot.sidebar.nav.top":    "侧边栏导航（顶部）",
+      "extensions.slot.sidebar.nav.bottom": "侧边栏导航（底部）",
+      "extensions.slot.sidebar.footer":     "侧边栏底部",
+      "extensions.slot.main.workspace":     "主工作区",
+      "extensions.slot.session.aside":      "会话侧栏",
+      "extensions.slot.settings.tabs":      "设置页标签",
       "extensions.section.agents":     "Agent",
       "extensions.section.skills":     "技能",
       "extensions.section.panels":     "面板",

data/lib/clacky/web/index.html

@@ -46,21 +46,14 @@
     </div>
     <div id="header-center">
       <button id="header-cmdbar" type="button" title="Search sessions">
-        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>
         <span class="cmdbar-ph" data-i18n="header.cmdbar.placeholder">Search sessions…</span>
-        <span class="cmdbar-kbd">⌘K</span>
+        <span class="cmdbar-kbd">Ctrl + K</span>
       </button>
     </div>
     <div id="header-right">
       <span id="ext-slot-header-right" data-slot="header.right"></span>
-      <button id="refresh-page-btn" class="theme-toggle-btn" data-i18n-title="header.refresh" title="Refresh" onclick="location.reload()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
-          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
-          <path d="M21 3v5h-5"/>
-          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
-          <path d="M8 16H3v5"/>
-        </svg>
-      </button>
+
       <button id="share-toggle-header" class="theme-toggle-btn" data-i18n-title="share.tooltip" title="Share">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <circle cx="18" cy="5" r="3"/>
@@ -79,7 +72,7 @@
     </div>
   </header>
 
-  <!-- ── Command-palette search overlay (⌘K / top cmdbar) ─────────────────── -->
+  <!-- ── Command-palette search overlay (platform shortcut / top cmdbar) ───── -->
   <!-- Search lives here, decoupled from the sidebar list: results render in
        #session-search-results and the left session list is never replaced. -->
   <div id="session-search-overlay" class="cmd-palette-overlay" hidden>
@@ -573,6 +566,8 @@
             <button class="skills-tab" data-tab="brand-skills" id="tab-brand-skills" data-i18n="skills.tab.brand">Brand Skills</button>
           </div>
           <div class="skills-tabs-controls">
+            <!-- Search input -->
+            <input type="text" id="skills-search-input" class="skills-search" placeholder="Search skills…" data-i18n-placeholder="skills.search.placeholder" />
             <!-- Show system skills toggle (only visible in My Skills tab) -->
             <label class="skills-filter-toggle" id="label-show-system">
               <input type="checkbox" id="chk-show-system-skills">

data/lib/clacky/web/sessions.js

@@ -884,8 +884,17 @@ const Sessions = (() => {
   //
   // Everything uses event delegation because some elements (e.g. the clear
   // buttons) are re-rendered as filter state changes.
+  function _sessionSearchShortcutLabel() {
+    const uaDataPlatform = navigator.userAgentData && navigator.userAgentData.platform;
+    const platform = (uaDataPlatform || navigator.platform || "").toString();
+    return /mac/i.test(platform) ? "⌘ + K" : "Ctrl + K";
+  }
+
   function _initSearch() {
-    // Open the palette: top cmdbar button (or ⌘K, bound below).
+    const cmdbarKbd = document.querySelector("#header-cmdbar .cmdbar-kbd");
+    if (cmdbarKbd) cmdbarKbd.textContent = _sessionSearchShortcutLabel();
+
+    // Open the palette: top cmdbar button (or the keyboard shortcut, bound below).
     document.addEventListener("click", (e) => {
       if (e.target && e.target.closest("#header-cmdbar")) {
         if (!Sessions.searchOpen) Sessions.toggleSearch();
@@ -1660,8 +1669,8 @@ const Sessions = (() => {
     const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
     const dDay  = new Date(d.getFullYear(), d.getMonth(), d.getDate());
     const diffDays = Math.round((today - dDay) / 86400000);
-    if (diffDays === 0) return `Today ${hhmm}`;
-    if (diffDays === 1) return `Yesterday ${hhmm}`;
+    if (diffDays === 0) return `${I18n.t("sessions.today")} ${hhmm}`;
+    if (diffDays === 1) return `${I18n.t("sessions.yesterday")} ${hhmm}`;
     return `${d.getMonth() + 1}/${d.getDate()} ${hhmm}`;
   }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 1.3.11
+  version: 1.4.0
 platform: ruby
 authors:
 - windy
@@ -480,6 +480,7 @@ files:
 - lib/clacky/media/gemini.rb
 - lib/clacky/media/generator.rb
 - lib/clacky/media/openai_compat.rb
+- lib/clacky/media/volcengine.rb
 - lib/clacky/message_format/anthropic.rb
 - lib/clacky/message_format/bedrock.rb
 - lib/clacky/message_format/open_ai.rb