openclacky 1.4.1 → 1.5.1

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

@@ -209,8 +209,11 @@ const ExtensionsView = (() => {
     if (remove) {
       remove.addEventListener("click", async () => {
         const id = remove.getAttribute("data-ext-remove");
-        const ok = await Modal.confirm(I18n.t("extensions.action.removeConfirm"));
-        if (ok) Extensions.uninstall(id);
+        const { ok, checked } = await Modal.confirmWithCheckbox(
+          I18n.t("extensions.action.removeConfirm"),
+          I18n.t("extensions.action.removePurgeData")
+        );
+        if (ok) Extensions.uninstall(id, checked);
       });
     }
 
@@ -313,7 +316,9 @@ const ExtensionsView = (() => {
   function _renderActions(ext) {
     const id = ext.id != null ? String(ext.id) : (ext.name || ext.slug || "");
     if (!ext.installed) {
-      if (ext.origin === "marketplace" && ext.download_url) {
+      // Show install button for both marketplace and brand-private (origin=self) extensions,
+      // as long as a download_url is available.
+      if (ext.download_url) {
         return `
       <div class="extension-detail-actions">
         <button type="button" class="extension-action extension-action-install" data-ext-install="${escapeHtml(id)}">${escapeHtml(I18n.t("extensions.action.install"))}</button>
@@ -407,6 +412,17 @@ const ExtensionsView = (() => {
       </div>`;
   }
 
+  // Show/hide the brand filter tab based on brand status from the store.
+  async function _applyBrandTab() {
+    try {
+      const data = await Extensions.fetchBrandStatus();
+      const brandTab = $("tab-extensions-brand");
+      if (brandTab) brandTab.style.display = data.branded ? "" : "none";
+    } catch (_e) {
+      // On error, keep tab hidden.
+    }
+  }
+
   function _wireDom() {
     if (_domWired) return;
 
@@ -432,10 +448,25 @@ const ExtensionsView = (() => {
       btn.addEventListener("click", () => {
         document.querySelectorAll(".extensions-filter-tab").forEach(b => b.classList.remove("extensions-filter-tab-active"));
         btn.classList.add("extensions-filter-tab-active");
-        Extensions.setFilterInstalled(btn.dataset.filter === "installed");
+        const filter = btn.dataset.filter;
+        if (filter === "installed") {
+          Extensions.setFilterInstalled(true);
+        } else if (filter === "brand") {
+          Extensions.setFilterBrand(true);
+        } else {
+          Extensions.setFilterInstalled(false);
+        }
       });
     });
 
+    // Subscribe to brand status changes to show/hide the brand tab.
+    if (window.Skills && Skills.on) {
+      Skills.on("brandStatus:changed", (p) => {
+        const brandTab = $("tab-extensions-brand");
+        if (brandTab) brandTab.style.display = p.branded ? "" : "none";
+      });
+    }
+
     const list = $("extensions-list");
     if (list) {
       list.addEventListener("click", (e) => {
@@ -466,8 +497,12 @@ const ExtensionsView = (() => {
   }
 
   const viewApi = {
-    onPanelShow(opts) {
+    async onPanelShow(opts) {
       _wireDom();
+      // Apply brand tab visibility based on current status (fast path),
+      // then also refresh in background so it stays up-to-date.
+      _applyBrandTab();
+      if (window.Skills && Skills.refreshBrandStatus) Skills.refreshBrandStatus();
       const detailId = opts && opts.detailId;
       if (detailId) {
         Extensions.load();

data/lib/clacky/web/features/new-session/store.js

@@ -122,19 +122,23 @@ const NewSessionStore = (() => {
     return "Session " + (maxN + 1);
   }
 
-  async function createSession({ existingSessions } = {}) {
+  async function createSession({ existingSessions, useDefaults = false } = {}) {
     if (_state.creating) return null;
     _state.creating = true;
     _emit("newSession:creating", { creating: true });
 
     try {
-      const agentId = _state.selectedAgentId || "general";
+      // useDefaults=true: quick-create from sidebar — use the default agent and
+      // skip advanced options (model / dir) so the session always starts clean.
+      const agentId = useDefaults ? "general" : (_state.selectedAgentId || "general");
       const adv = _state.advanced;
       const name = adv.name.trim() || _autoName(existingSessions);
 
       const payload = { name, agent_profile: agentId, source: "manual" };
-      if (adv.workingDir.trim()) payload.working_dir = adv.workingDir.trim();
-      if (adv.modelId) payload.model_id = adv.modelId;
+      if (!useDefaults) {
+        if (adv.workingDir.trim()) payload.working_dir = adv.workingDir.trim();
+        if (adv.modelId) payload.model_id = adv.modelId;
+      }
 
       const res = await fetch("/api/sessions", {
         method: "POST",

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

@@ -237,7 +237,11 @@ const VersionView = (() => {
       _closePopover();
       if (!_autoReloaded) {
         _autoReloaded = true;
-        setTimeout(() => window.location.reload(), 800);
+        // Delay reload to ensure the server is fully ready after restart.
+        // /api/version responding OK does not guarantee the full server stack
+        // (static assets, routes) is ready; a short extra wait avoids a blank
+        // page caused by the browser hitting a not-yet-ready server.
+        setTimeout(() => window.location.reload(), 3000);
       }
       return;
     }

data/lib/clacky/web/i18n.js

@@ -75,12 +75,11 @@ const I18n = (() => {
       "chat.send":           "Send",
       "chat.edit.warn":      "Editing this message will discard the conversation history, file snapshots, and token costs after it. Continue?",
       "chat.edit.warnSkip":  "Don't show this again",
-      "chat.empty.title":    "Start the conversation",
-      "chat.empty.subtitle": "Ask anything, or use a skill to get going.",
-      "chat.empty.tip1":     "Type / to browse skills",
-      "chat.empty.tip2":     "Attach images, PDFs, or docs for context",
-      "chat.empty.tip3":     "Shift+Enter for a new line",
-      "chat.empty.tip4":     "Each session is isolated, but long-term memories are shared across sessions",
+      "chat.empty.title":    "How can I help you today?",
+      "chat.empty.subtitle": "Ask a question, or start with a skill.",
+      "chat.empty.tip1":     "Research, write, and translate",
+      "chat.empty.tip2":     "Summarize and organize information",
+      "chat.empty.tip3":     "Upload an image or file for me to analyze",
 
       // ── Session list ──
       "sessions.empty":         "No sessions yet",
@@ -162,6 +161,11 @@ const I18n = (() => {
       "sib.variant.default":     "default",
       "sib.signal.tooltip":      "Recent LLM latency",
       "sib.reasoning.tooltip":   "Click to change reasoning effort",
+      "sib.id.label":            "Session file",
+      "sib.status.tooltip":      "Current session status",
+      "sib.mode.tooltip":        "Permission mode — controls whether the agent asks before making changes",
+      "sib.tasks.tooltip":       "Total number of tasks completed in this session",
+      "sib.cost.tooltip":        "Estimated token cost for this session",
       "sib.reasoning.label":     "Reasoning",
       "sib.reasoning.heading":   "Reasoning effort",
       "sib.reasoning.hint":      "Higher effort = deeper thinking, slower response.",
@@ -520,6 +524,7 @@ const I18n = (() => {
       "extensions.sort.downloads": "Most installed",
       "extensions.filter.all":       "All",
       "extensions.filter.installed": "Installed",
+      "extensions.filter.brand":     "Brand",
       "extensions.empty":         "No extensions available yet.",
       "extensions.noResults":     "No extensions match your search.",
       "extensions.loadFailed":    "Could not reach the extension store.",
@@ -554,6 +559,7 @@ const I18n = (() => {
       "extensions.action.enable":          "Enable",
       "extensions.action.remove":          "Remove",
       "extensions.action.removeConfirm":   "Remove this extension? Its files will be deleted. You can reinstall it later.",
+      "extensions.action.removePurgeData": "Also delete this extension's data (kept by default; reinstalling restores it)",
       "mcp.loading":              "Loading…",
       "mcp.empty.title":          "No MCP servers configured",
       "mcp.empty.body":           "Create ~/.clacky/mcp.json to plug in MCP servers. The format matches Claude Desktop and Cursor, so existing configs work as-is.",
@@ -572,10 +578,10 @@ const I18n = (() => {
       "mcp.btn.hide":             "Hide tools",
       "mcp.btn.refresh":          "Refresh",
       "mcp.btn.remove":           "Remove",
-      "mcp.btn.askClacky":        "Let Clacky help me set this up",
+      "mcp.btn.askClacky":        "Let AI help me set this up",
       "mcp.cta.title":            "Want to add a new MCP server?",
-      "mcp.cta.body":             "Tell Clacky in plain words — it'll pick the right package, ask for the parameters that matter, and verify it works.",
-      "mcp.cta.button":           "Ask Clacky to add one",
+      "mcp.cta.body":             "Describe what you need in plain words — the AI will pick the right package, ask for the parameters that matter, and verify it works.",
+      "mcp.cta.button":           "Ask AI to add one",
       "mcp.remove.confirm":       "Remove MCP server '{{name}}'? Its tools will no longer be available.",
       "mcp.remove.error":         "Failed to remove: {{msg}}",
       "mcp.loadError":            "Failed to load MCP servers: {{msg}}",
@@ -657,6 +663,9 @@ const I18n = (() => {
       "settings.models.baseurl.variant.mainland_cn_coding":     "Mainland · Coding Plan",
       "settings.models.baseurl.variant.international_payg":     "International · Pay-as-you-go",
       "settings.models.baseurl.variant.international_coding":   "International · Coding Plan",
+      "settings.models.baseurl.variant.ark_payg":              "Pay-as-you-go",
+      "settings.models.baseurl.variant.ark_coding":            "Coding Plan",
+      "settings.models.baseurl.variant.ark_agent":             "Agent Plan",
       "settings.models.btn.save":          "Save",
       "settings.models.btn.saving":        "Saving…",
       "settings.models.btn.saved":         "Saved ✓",
@@ -778,6 +787,13 @@ const I18n = (() => {
 
       "settings.accentColor.title":        "Accent Color",
 
+      "settings.bgTheme.title":  "Background",
+      "settings.bgTheme.light":  "Light",
+      "settings.bgTheme.dark":   "Dark",
+      "settings.bgTheme.dim":    "Dim",
+      "settings.bgTheme.warm":   "Warm",
+      "settings.bgTheme.black":  "Blue Dark",
+
       // ── Onboard ──
       "onboard.title":              "Welcome to {{brand}}",
       "onboard.subtitle":           "Let's get you set up in a minute.",
@@ -812,6 +828,7 @@ const I18n = (() => {
       "onboard.manual.toggle":      "Configure manually with your own API key",
       "onboard.provider.custom":    "Custom",
       "provider.recommended":        "Recommended",
+      "provider.name.volcengine_ark": "Volcengine Ark (Doubao)",
       "provider.promo.openclacky.title": "OpenClacky AI Keys",
       "provider.promo.openclacky.1": "All frontier models, one key — Claude, Gemini, DeepSeek & more.",
       "provider.promo.openclacky.2": "Top reasoning, best value, best vision — unified in one API.",
@@ -1049,12 +1066,11 @@ const I18n = (() => {
       "chat.send":           "发送",
       "chat.edit.warn":      "编辑此消息将丢弃后续对话历史、文件快照及已产生的 token 费用，是否继续？",
       "chat.edit.warnSkip":  "不再提示",
-      "chat.empty.title":    "开始新会话",
-      "chat.empty.subtitle": "直接提问，或用一个 Skill 启动。",
-      "chat.empty.tip1":     "输入 / 浏览 Skill",
-      "chat.empty.tip2":     "可粘贴或拖入图片、PDF、文档",
-      "chat.empty.tip3":     "Shift+Enter 换行",
-      "chat.empty.tip4":     "每个会话上下文独立，但长期记忆全局共享",
+      "chat.empty.title":    "有什么可以帮你？",
+      "chat.empty.subtitle": "直接提问，或用一个技能开始。",
+      "chat.empty.tip1":     "查资料、写文案、做翻译",
+      "chat.empty.tip2":     "归纳总结、整理信息",
+      "chat.empty.tip3":     "上传图片或文件，让我帮你分析",
 
       // ── Session list ──
       "sessions.empty":         "暂无会话",
@@ -1136,6 +1152,11 @@ const I18n = (() => {
       "sib.variant.default":     "默认",
       "sib.signal.tooltip":      "最近一次 LLM 响应延迟",
       "sib.reasoning.tooltip":   "点击调整思考等级",
+      "sib.id.label":            "会话文件",
+      "sib.status.tooltip":      "当前会话状态",
+      "sib.mode.tooltip":        "权限模式 — 控制 Agent 执行操作前是否需要确认",
+      "sib.tasks.tooltip":       "本次会话累计完成的任务数",
+      "sib.cost.tooltip":        "本次会话的预估 Token 费用",
       "sib.reasoning.label":     "思考",
       "sib.reasoning.heading":   "思考等级",
       "sib.reasoning.hint":      "等级越高，思考越深，响应越慢。",
@@ -1493,6 +1514,7 @@ const I18n = (() => {
       "extensions.sort.downloads": "安装最多",
       "extensions.filter.all":       "全部",
       "extensions.filter.installed": "已安装",
+      "extensions.filter.brand":     "品牌扩展",
       "extensions.empty":         "暂无可用扩展。",
       "extensions.noResults":     "没有匹配的扩展。",
       "extensions.loadFailed":    "无法连接扩展市场。",
@@ -1527,6 +1549,7 @@ const I18n = (() => {
       "extensions.action.enable":          "启用",
       "extensions.action.remove":          "移除",
       "extensions.action.removeConfirm":   "确定移除此扩展？相关文件会被删除，之后可重新安装。",
+      "extensions.action.removePurgeData": "同时删除该扩展的数据（默认保留，重新安装会自动恢复）",
       "mcp.loading":              "加载中…",
       "mcp.empty.title":          "尚未配置 MCP 服务",
       "mcp.empty.body":           "新建 ~/.clacky/mcp.json 即可接入 MCP 服务。格式与 Claude Desktop、Cursor 一致，现有配置可直接复用。",
@@ -1545,10 +1568,10 @@ const I18n = (() => {
       "mcp.btn.hide":             "收起",
       "mcp.btn.refresh":          "刷新",
       "mcp.btn.remove":           "移除",
-      "mcp.btn.askClacky":        "让 Clacky 帮我配置",
+      "mcp.btn.askClacky":        "让 AI 帮我配置",
       "mcp.cta.title":            "想接入新的 MCP 服务？",
-      "mcp.cta.body":             "用一句大白话告诉 Clacky 想做什么——它会挑合适的包、问关键参数、跑通后回复你。",
-      "mcp.cta.button":           "让 Clacky 帮我添加",
+      "mcp.cta.body":             "用一句大白话描述你想做什么——AI 会挑合适的包、问关键参数、跑通后回复你。",
+      "mcp.cta.button":           "让 AI 帮我添加",
       "mcp.remove.confirm":       "移除 MCP 服务 '{{name}}'？相关工具将不再可用。",
       "mcp.remove.error":         "移除失败：{{msg}}",
       "mcp.loadError":            "加载 MCP 服务失败：{{msg}}",
@@ -1637,6 +1660,9 @@ const I18n = (() => {
       "settings.models.baseurl.variant.mainland_cn_coding":     "大陆 · Coding Plan",
       "settings.models.baseurl.variant.international_payg":     "海外 · 按量付费",
       "settings.models.baseurl.variant.international_coding":   "海外 · Coding Plan",
+      "settings.models.baseurl.variant.ark_payg":              "按量付费",
+      "settings.models.baseurl.variant.ark_coding":            "Coding Plan",
+      "settings.models.baseurl.variant.ark_agent":             "Agent Plan",
       "settings.models.btn.save":          "保存",
       "settings.models.btn.saving":        "保存中…",
       "settings.models.btn.saved":         "已保存 ✓",
@@ -1758,6 +1784,13 @@ const I18n = (() => {
 
       "settings.accentColor.title":        "主色",
 
+      "settings.bgTheme.title":  "背景",
+      "settings.bgTheme.light":  "浅色",
+      "settings.bgTheme.dark":   "深色",
+      "settings.bgTheme.dim":    "暗灰",
+      "settings.bgTheme.warm":   "暖色",
+      "settings.bgTheme.black":  "蓝黑",
+
       // ── Onboard ──
       "onboard.title":              "欢迎使用 {{brand}}",
       "onboard.subtitle":           "一分钟完成配置，马上开始。",
@@ -1792,6 +1825,7 @@ const I18n = (() => {
       "onboard.manual.toggle":      "使用自己的 API Key 手动配置",
       "onboard.provider.custom":    "自定义",
       "provider.recommended":        "推荐",
+      "provider.name.volcengine_ark": "火山方舟（豆包）",
       "provider.promo.openclacky.title": "推荐 OpenClacky AI Keys",
       "provider.promo.openclacky.1": "一个 Key 直通全球顶级模型 — Claude、Gemini、DeepSeek 等。",
       "provider.promo.openclacky.2": "最强推理 × 最优性价比 × 最佳视觉 — 一站式统一接入。",

data/lib/clacky/web/index.html

@@ -54,6 +54,14 @@
     <div id="header-right">
       <span id="ext-slot-header-right" data-slot="header.right"></span>
 
+      <button id="reload-header" class="theme-toggle-btn" title="Reload" 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"/>
@@ -64,11 +72,7 @@
         </svg>
       </button>
       <button id="notify-toggle-header" class="theme-toggle-btn" data-i18n-title="notify.tooltip.off" title="Sound on task complete"></button>
-      <button id="theme-toggle-header" class="theme-toggle-btn" title="Toggle theme">
-        <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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
-        </svg>
-      </button>
+
     </div>
   </header>
 
@@ -680,6 +684,7 @@
         <div class="extensions-toolbar">
           <div class="extensions-filter-tabs">
             <button type="button" class="extensions-filter-tab extensions-filter-tab-active" data-filter="all" data-i18n="extensions.filter.all">All</button>
+            <button type="button" class="extensions-filter-tab" data-filter="brand" id="tab-extensions-brand" data-i18n="extensions.filter.brand" style="display:none">Brand</button>
             <button type="button" class="extensions-filter-tab" data-filter="installed" data-i18n="extensions.filter.installed">Installed</button>
           </div>
           <div class="extensions-toolbar-right">
@@ -949,6 +954,43 @@
             </div>
           </section>
 
+          <!-- Background Theme section -->
+          <section class="settings-section" id="bg-theme-section">
+            <div class="settings-section-title">
+              <span data-i18n="settings.bgTheme.title">Background</span>
+            </div>
+            <div class="settings-bg-theme-cards">
+              <button class="settings-bg-theme-card bg-theme-dark" data-bg-theme="dark">
+                <div class="bg-card-preview">
+                  <div class="bg-card-sidebar"></div>
+                  <div class="bg-card-main"></div>
+                </div>
+                <span class="bg-card-label" data-i18n="settings.bgTheme.dark">Dark</span>
+              </button>
+              <button class="settings-bg-theme-card bg-theme-dim" data-bg-theme="dim">
+                <div class="bg-card-preview">
+                  <div class="bg-card-sidebar"></div>
+                  <div class="bg-card-main"></div>
+                </div>
+                <span class="bg-card-label" data-i18n="settings.bgTheme.dim">Dim</span>
+              </button>
+              <button class="settings-bg-theme-card bg-theme-warm" data-bg-theme="warm">
+                <div class="bg-card-preview">
+                  <div class="bg-card-sidebar"></div>
+                  <div class="bg-card-main"></div>
+                </div>
+                <span class="bg-card-label" data-i18n="settings.bgTheme.warm">Warm</span>
+              </button>
+              <button class="settings-bg-theme-card bg-theme-light" data-bg-theme="light">
+                <div class="bg-card-preview">
+                  <div class="bg-card-sidebar"></div>
+                  <div class="bg-card-main"></div>
+                </div>
+                <span class="bg-card-label" data-i18n="settings.bgTheme.light">Light</span>
+              </button>
+            </div>
+          </section>
+
           <!-- Accent Color section -->
           <section class="settings-section" id="accent-color-section">
             <div class="settings-section-title">
@@ -961,6 +1003,10 @@
               <button class="settings-accent-swatch swatch-sunrise-orange" data-color="#F59E0B" title="Sunrise Orange"></button>
               <button class="settings-accent-swatch swatch-rose-violet"    data-color="#8B5CF6" title="Rose Violet"></button>
               <button class="settings-accent-swatch swatch-coral-red"      data-color="#EF4444" title="Coral Red"></button>
+              <button class="settings-accent-swatch swatch-sky-blue"       data-color="#38BDF8" title="Sky Blue"></button>
+              <button class="settings-accent-swatch swatch-hot-pink"       data-color="#EC4899" title="Hot Pink"></button>
+              <button class="settings-accent-swatch swatch-warm-brown"     data-color="#92745A" title="Warm Brown"></button>
+              <button class="settings-accent-swatch swatch-slate-gray"     data-color="#6B7280" title="Slate Gray"></button>
             </div>
           </section>
         </div>

data/lib/clacky/web/sessions.js

@@ -390,11 +390,13 @@ const Sessions = (() => {
     const tip1     = I18n.t("chat.empty.tip1");
     const tip2     = I18n.t("chat.empty.tip2");
     const tip3     = I18n.t("chat.empty.tip3");
-    const tip4     = I18n.t("chat.empty.tip4");
     return `
       <div class="chat-empty-icon" aria-hidden="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+          <circle cx="8.5" cy="12" r="0.9" fill="currentColor" stroke="none"/>
+          <circle cx="12" cy="12" r="0.9" fill="currentColor" stroke="none"/>
+          <circle cx="15.5" cy="12" r="0.9" fill="currentColor" stroke="none"/>
         </svg>
       </div>
       <div class="chat-empty-title">${escapeHtml(title)}</div>
@@ -403,7 +405,6 @@ const Sessions = (() => {
         <li>${escapeHtml(tip1)}</li>
         <li>${escapeHtml(tip2)}</li>
         <li>${escapeHtml(tip3)}</li>
-        <li>${escapeHtml(tip4)}</li>
       </ul>
     `;
   }
@@ -503,7 +504,7 @@ const Sessions = (() => {
         if (_btnNewInline.disabled) return;
         _btnNewInline.disabled = true;
         try {
-          const session = await NewSessionStore.createSession({ existingSessions: _sessions });
+          const session = await NewSessionStore.createSession({ existingSessions: _sessions, useDefaults: true });
           if (!session) return;
           NewSessionStore.reset();
           // Add to local list immediately so renderList shows it and findOrFetch
@@ -1271,11 +1272,16 @@ const Sessions = (() => {
 
   // Mark the last tool-item in a group as done (update status indicator).
   // collapsed: true → keep stdout hidden (history mode); false → show immediately (live mode).
-  function _completeLastToolItem(group, result, { collapsed = false } = {}) {
+  function _completeLastToolItem(group, result, opts = {}) {
     const body  = group.querySelector(".tool-group-body");
     const items = body.querySelectorAll(".tool-item");
     if (!items.length) return;
-    const last   = items[items.length - 1];
+    _completeToolItem(items[items.length - 1], result, opts);
+  }
+
+  // Mark a specific tool-item element as done (update status + render result).
+  function _completeToolItem(last, result, { collapsed = false } = {}) {
+    if (!last) return;
     const status = last.querySelector(".tool-item-status");
     if (status) {
       status.className = "tool-item-status ok";
@@ -3248,13 +3254,19 @@ const Sessions = (() => {
       if (sibStatus) {
         sibStatus.innerHTML = `<span class="sib-dot"></span>${s.status || "idle"}`;
         sibStatus.className = `sib-status-${s.status || "idle"}`;
+        sibStatus.title = I18n.t("sib.status.tooltip");
       }
 
-      // Session ID (short — first 8 chars). The span itself is the click
-      // trigger for the session actions dropdown (download, etc.).
+      // Session ID label — shows localised "Session file" label with short hash suffix.
+      // The span itself is the click trigger for the session actions dropdown (download, etc.).
       const sibId = $("sib-id");
       if (sibId) {
-        sibId.textContent = s.id ? s.id.slice(0, 8) : "";
+        const shortHash = s.id ? s.id.slice(0, 8) : "";
+        const lp = I18n.lang() === "zh" ? "（" : " (";
+        const rp = I18n.lang() === "zh" ? "）" : ")";
+        sibId.textContent = shortHash
+          ? `${I18n.t("sib.id.label")}${lp}${shortHash}${rp}`
+          : I18n.t("sib.id.label");
         sibId.title = s.id || "";
         if (s.id) {
           sibId.dataset.sessionId = s.id;
@@ -3277,6 +3289,7 @@ const Sessions = (() => {
       const sibSepAfterMode = document.querySelector(".sib-sep-after-mode");
       if (sibMode) {
         sibMode.textContent = s.permission_mode || "";
+        sibMode.title = s.permission_mode ? I18n.t("sib.mode.tooltip") : "";
         sibMode.style.display = s.permission_mode ? "" : "none";
       }
       if (sibSepAfterMode) {
@@ -3331,7 +3344,10 @@ const Sessions = (() => {
 
       // Tasks
       const sibTasks = $("sib-tasks");
-      if (sibTasks) sibTasks.textContent = I18n.t("sessions.metaTasks", { n: s.total_tasks || 0 });
+      if (sibTasks) {
+        sibTasks.textContent = I18n.t("sessions.metaTasks", { n: s.total_tasks || 0 });
+        sibTasks.title = I18n.t("sib.tasks.tooltip");
+      }
 
       // Cost — show N/A when pricing is unknown (estimated)
       const sibCost = $("sib-cost");
@@ -3343,6 +3359,7 @@ const Sessions = (() => {
         } else {
           sibCost.textContent = "N/A";
         }
+        sibCost.title = I18n.t("sib.cost.tooltip");
       }
 
       const bar = $("session-info-bar");
@@ -3484,9 +3501,21 @@ const Sessions = (() => {
     },
 
     // Update the last tool-item with a result status tick.
+    // If _liveToolGroup was collapsed by an intervening info message (e.g.
+    // "Subagent start/completed" during invoke_skill), fall back to the last
+    // still-running .tool-item in the DOM.
     appendToolResult(result) {
       if (Sessions._liveToolGroup && Sessions._liveLastToolItem) {
         _completeLastToolItem(Sessions._liveToolGroup, result);
+        return;
+      }
+      const messages = RenderTarget.current();
+      if (messages) {
+        const running = messages.querySelectorAll(".tool-item-status.running");
+        if (running.length > 0) {
+          const item = running[running.length - 1].closest(".tool-item");
+          if (item) { _completeToolItem(item, result); return; }
+        }
       }
     },
 

data/lib/clacky/web/settings.js

@@ -59,9 +59,15 @@ const Settings = (() => {
     _models.forEach((m, i) => _renderCard(container, m, i));
   }
 
+  function _providerDisplayName(p) {
+    if (!p) return I18n.t("settings.models.provider.custom");
+    const translated = p.name_key ? I18n.t(p.name_key) : null;
+    return (translated && translated !== p.name_key) ? translated : p.name;
+  }
+
   function _getProviderName(model) {
     const p = _findProviderByBaseUrl(model.base_url);
-    return p ? p.name : I18n.t("settings.models.provider.custom");
+    return _providerDisplayName(p);
   }
 
   function _findProviderByBaseUrl(baseUrl) {
@@ -82,7 +88,7 @@ const Settings = (() => {
     const isDefault = model.type === "default";
     const isLite    = model.type === "lite";
     const provider  = _findProviderByBaseUrl(model.base_url);
-    const providerName = provider ? provider.name : I18n.t("settings.models.provider.custom");
+    const providerName = _providerDisplayName(provider);
     const websiteUrl   = provider && provider.website_url;
     const displayName = model.model || I18n.t("settings.models.unnamed");
 
@@ -266,7 +272,7 @@ const Settings = (() => {
     const dropdown = document.getElementById("model-modal-provider-dropdown");
     dropdown.innerHTML = `
       <div class="custom-select-option" data-value="">${I18n.t("settings.models.placeholder.provider")}</div>
-      ${_providers.map(p => `<div class="custom-select-option" data-value="${p.id}" data-label="${_esc(p.name)}">${_esc(p.name)}${p.id === "openclacky" ? ` <span class="provider-badge-recommended">${I18n.t("provider.recommended")}</span>` : ""}</div>`).join("")}
+      ${_providers.map(p => { const dn = _providerDisplayName(p); return `<div class="custom-select-option" data-value="${p.id}" data-label="${_esc(dn)}">${_esc(dn)}${p.id === "openclacky" ? ` <span class="provider-badge-recommended">${I18n.t("provider.recommended")}</span>` : ""}</div>`; }).join("")}
       <div class="custom-select-option" data-value="custom">${I18n.t("settings.models.custom")}</div>
     `;
 
@@ -2207,6 +2213,7 @@ const Settings = (() => {
     _initFontBtns();
     _initCurrencyBtns();
     _initAccentColorBtns();
+    _initBgThemeCards();
 
     // Re-render model cards when language changes (dynamic HTML, not data-i18n)
     document.addEventListener("langchange", () => {
@@ -2396,6 +2403,18 @@ const Settings = (() => {
     });
   }
 
+  // ── Background Theme Cards ────────────────────────────────────────────
+  function _initBgThemeCards() {
+    // Sync initial active state from Theme module.
+    const current = Theme.current();
+    document.querySelectorAll("#bg-theme-section .settings-bg-theme-card").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.bgTheme === current);
+      btn.addEventListener("click", () => {
+        Theme.applyBg(btn.dataset.bgTheme);
+      });
+    });
+  }
+
   // ── QR Code Lightbox ───────────────────────────────────────────────────
   // Sets up click-to-enlarge behaviour for the support QR code.
   // Safe to call multiple times — idempotent via a data attribute guard.