openclacky 1.4.0 → 1.5.0

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.",
@@ -179,7 +183,8 @@ const I18n = (() => {
       "sessions.badge.channel": "Channel",
       "sessions.badge.coding":  "Coding",
       "sessions.badge.setup":   "Setup",
-      "sessions.newSession":    "+ New Session",
+      "sessions.newSession":    "New Session",
+      "sessions.advancedOptions": "Advanced options",
       "sessions.actions.pin":   "Pin",
       "sessions.actions.unpin": "Unpin",
       "sessions.actions.fork":  "Fork",
@@ -519,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.",
@@ -537,16 +543,9 @@ const I18n = (() => {
       "extensions.unit.api":      "API",
       "extensions.unit.apis":     "APIs",
       "extensions.detail.back":        "Back",
+      "extensions.detail.readme":          "Description",
       "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",
@@ -560,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.",
@@ -578,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}}",
@@ -663,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 ✓",
@@ -784,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.",
@@ -818,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.",
@@ -1055,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":         "暂无会话",
@@ -1142,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":      "等级越高，思考越深，响应越慢。",
@@ -1159,7 +1174,8 @@ const I18n = (() => {
       "sessions.badge.channel": "频道",
       "sessions.badge.coding":  "Coding",
       "sessions.badge.setup":   "配置",
-      "sessions.newSession":    "+ 新会话",
+      "sessions.newSession":    "新会话",
+      "sessions.advancedOptions": "高级选项",
       "sessions.loadMore":      "加载更多会话",
       "sessions.actions.pin":   "置顶",
       "sessions.actions.unpin": "取消置顶",
@@ -1498,6 +1514,7 @@ const I18n = (() => {
       "extensions.sort.downloads": "安装最多",
       "extensions.filter.all":       "全部",
       "extensions.filter.installed": "已安装",
+      "extensions.filter.brand":     "品牌扩展",
       "extensions.empty":         "暂无可用扩展。",
       "extensions.noResults":     "没有匹配的扩展。",
       "extensions.loadFailed":    "无法连接扩展市场。",
@@ -1516,16 +1533,9 @@ const I18n = (() => {
       "extensions.unit.api":      "个 API",
       "extensions.unit.apis":     "个 API",
       "extensions.detail.back":        "返回",
+      "extensions.detail.readme":          "使用说明",
       "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":     "面板",
@@ -1539,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 一致，现有配置可直接复用。",
@@ -1557,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}}",
@@ -1649,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":         "已保存 ✓",
@@ -1770,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":           "一分钟完成配置，马上开始。",
@@ -1804,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>
 
@@ -128,7 +132,28 @@
         <div class="sidebar-divider">
           <span data-i18n="sidebar.chat">Sessions</span>
           <div class="sidebar-divider-actions">
-            <button id="btn-new-session-inline" class="btn-split-main" title="New Session" data-i18n="sessions.newSession">+ New Session</button>
+            <div class="btn-split-wrap">
+              <button id="btn-new-session-inline" class="btn-split-main" title="New Session">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+                  <line x1="12" y1="8" x2="12" y2="14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+                  <line x1="9" y1="11" x2="15" y2="11" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+                </svg>
+                <span data-i18n="sessions.newSession">New Session</span>
+              </button>
+              <div class="btn-split-dropdown">
+                <button id="btn-new-session-advanced" class="btn-split-arrow" aria-label="Advanced new session options">
+                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+                <div class="btn-split-menu">
+                  <button class="btn-split-menu-item" id="btn-new-session-goto-advanced">
+                    <span data-i18n="sessions.advancedOptions">Advanced options</span>
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -659,14 +684,15 @@
         <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">
             <input type="text" id="extensions-search-input" class="extensions-search" placeholder="Search extensions…" />
             <select id="extensions-sort" class="extensions-sort">
+              <option value="downloads" data-i18n="extensions.sort.downloads">Most downloaded</option>
               <option value="newest" data-i18n="extensions.sort.newest">Newest</option>
               <option value="updated" data-i18n="extensions.sort.updated">Recently updated</option>
-              <option value="downloads" data-i18n="extensions.sort.downloads">Most downloaded</option>
             </select>
           </div>
         </div>
@@ -928,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">
@@ -940,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>
     `;
   }
@@ -487,8 +488,8 @@ const Sessions = (() => {
   // ── New session controls (split button + welcome + modal) ──────────────
   //
   // Wires up every button/interaction that kicks off session creation:
-  //   - "+ New Session" inline split-button (quick create)
-  //   - "▾" arrow button (opens dropdown → advanced options modal)
+  //   - "+ New Session" inline split-button (quick create — directly creates a plain session)
+  //   - "▾" arrow button (navigates to /#new for advanced options)
   //   - "+ New Session" big button on the welcome screen
   //   - New Session Modal: close / cancel / create / overlay click / browse
   //   - Load-more button (rendered dynamically by renderList)
@@ -497,7 +498,28 @@ const Sessions = (() => {
   // we call addEventListener directly (no ?. / no `if` guards). If any is
   // missing, it means HTML and JS drifted and we want the loud error.
   function _initNewSessionControls() {
-    document.getElementById("btn-new-session-inline")
+    // Main button: directly create a plain session using the last-used agent.
+    const _btnNewInline = document.getElementById("btn-new-session-inline");
+    _btnNewInline.addEventListener("click", async () => {
+        if (_btnNewInline.disabled) return;
+        _btnNewInline.disabled = true;
+        try {
+          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
+          // can locate it synchronously (without a round-trip to the API).
+          if (!_sessions.find(s => s.id === session.id)) {
+            _sessions.unshift(session);
+          }
+          location.hash = `session/${session.id}`;
+        } finally {
+          _btnNewInline.disabled = false;
+        }
+      });
+
+    // Arrow button: hover (CSS) shows menu. Menu item navigates to /#new on click.
+    document.getElementById("btn-new-session-goto-advanced")
       .addEventListener("click", () => { location.hash = "#new"; });
 
     document.addEventListener("click", (e) => {
@@ -1250,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";
@@ -1358,6 +1385,10 @@ const Sessions = (() => {
         bubbleHtml += escapeHtml(ev.content || "");
         el.innerHTML = bubbleHtml;
         if (ev.created_at) el.dataset.createdAt = ev.created_at;
+        // Messages archived into a compressed chunk can't be edited (the backend
+        // truncate keys off the active in-memory history). Flag them so the edit
+        // affordance stays hidden.
+        if (ev.editable === false) el.dataset.editable = "false";
         const wrap = document.createElement("div");
         wrap.className = "msg-user-wrap";
         wrap.appendChild(el);
@@ -1757,7 +1788,9 @@ const Sessions = (() => {
     });
 
     bar.appendChild(copyBtn);
-    bar.appendChild(editBtn);
+    // Skip the edit affordance for messages already archived into a compressed
+    // chunk — editing them would silently no-op on the backend.
+    if (el.dataset.editable !== "false") bar.appendChild(editBtn);
     wrap.appendChild(bar);
   }
 
@@ -1811,8 +1844,9 @@ const Sessions = (() => {
     sendBtn.textContent = I18n.t("chat.send");
     sendBtn.addEventListener("click", () => _submitEdit(el, textarea.value.trim()));
 
+    const editIme = IME.track(textarea);
     textarea.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
+      if (e.key === "Enter" && !e.shiftKey && !editIme.isComposing(e)) {
         e.preventDefault();
         _submitEdit(el, textarea.value.trim());
       }
@@ -3220,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;
@@ -3249,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) {
@@ -3303,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");
@@ -3315,6 +3359,7 @@ const Sessions = (() => {
         } else {
           sibCost.textContent = "N/A";
         }
+        sibCost.title = I18n.t("sib.cost.tooltip");
       }
 
       const bar = $("session-info-bar");
@@ -3456,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.