openclacky 1.5.11 → 1.5.13

data/lib/clacky/web/i18n.js

@@ -66,6 +66,7 @@ const I18n = (() => {
 
       // ── Welcome screen ──
       "sessions.new.title":       "Start a new session",
+      "sessions.new.title.named": "Hi, {{name}}. Ready to get started?",
       "sessions.new.subtitle":    "Pick an agent to chat with, then tell it what you'd like to do.",
       "sessions.new.placeholder": "Type your first message to {{agent}}…",
       "sessions.new.moreOptions": "More options",
@@ -76,9 +77,9 @@ const I18n = (() => {
       "chat.status.idle":    "idle",
       "chat.status.running": "running",
       "chat.status.error":   "error",
-      "chat.input.placeholder": "Message… (Enter to send, Shift+Enter for newline)",
+      "chat.input.placeholder": "What can I help you with today? @ reference a chat or file, / for skills, Enter to send, Shift + Enter for newline",
       "chat.input.placeholderRunning": "AI is working — you can still send extra info anytime...",
-      "chat.input.placeholderMobile": "Message…",
+      "chat.input.placeholderMobile": "What can I help you with today?",
       "chat.input.placeholderRunningMobile": "Add more info…",
       "chat.btn.send":       "Send",
       "chat.thinking":       "Thinking…",
@@ -119,8 +120,9 @@ 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":    "How can I help you today?",
-      "chat.empty.subtitle": "Ask a question, or start with a skill.",
+      "chat.empty.title":       "How can I help you today?",
+      "chat.empty.title.named": "Hi, {{name}}. Ready to get started?",
+      "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",
@@ -155,6 +157,12 @@ const I18n = (() => {
       "sib.dir.default":         "Default workspace",
       "sib.dir.current":         "Current workspace",
       "sib.dir.inputPlaceholder": "Type or select a directory path",
+      "sib.dir.back":            "Back",
+      "sib.dir.forward":         "Forward",
+      "sib.dir.refresh":         "Refresh",
+      "sib.dir.addFavorite":     "Add to favorites",
+      "sib.dir.removeFavorite":  "Remove from favorites",
+      "sib.dir.userFavorites":   "My favorites",
       "sib.dir.loading":         "Loading…",
       "sib.dir.empty":           "Empty directory",
       "sib.dir.loadError":       "Failed to load",
@@ -164,24 +172,39 @@ const I18n = (() => {
       "sib.dir.newFolder":       "New folder",
       "sib.dir.newFolderDefault": "New Folder",
       "sib.dir.mkdirError":      "Failed to create folder: {{msg}}",
+      "sib.dir.favorites": "Quick access",
+      "sib.dir.places.home": "Home",
+      "sib.dir.places.desktop": "Desktop",
+      "sib.dir.places.downloads": "Downloads",
+      "sib.dir.places.documents": "Documents",
+      "sib.dir.drives": "Drives",
+      "sib.dir.places.drive": "{{letter}}:",
       "workspace.title":         "Files",
       "workspace.expand":        "Open workspace",
       "workspace.collapse":      "Collapse workspace",
       "workspace.refresh":       "Refresh",
       "workspace.empty":         "This folder is empty",
       "workspace.loading":       "Loading…",
+      "workspace.search":        "Search files",
+      "workspace.noResults":    "No matching files",
       "workspace.error":         "Failed to load files",
       "workspace.downloadFailed": "Download failed",
       "workspace.previewFailed": "Failed to preview file",
       "workspace.previewUnsupported": "Cannot preview this file type",
       "workspace.download": "Download",
-      "workspace.contextMenuHint": "Right-click for more options",
       "workspace.copyPath": "Copy Path",
       "workspace.copyRelPath": "Copy Relative Path",
       "aside.collapse":          "Collapse panel",
       "aside.expand":            "Open panel",
       "workspace.revealInFinder": "Reveal in Finder",
       "workspace.revealFailed":   "Failed to reveal file",
+      "workspace.closeTab":      "Close",
+      "workspace.copyContent":    "Copy content",
+      "workspace.copied":         "Copied",
+      "workspace.copyFailed":     "Copy failed",
+      "workspace.saved":          "Saved",
+      "workspace.saveFailed":     "Save failed",
+      "workspace.dirtyCloseConfirm": "This file has unsaved changes. Close it anyway?",
       "changes.tab":              "Git",
       "changes.loading":          "Loading changes…",
       "changes.error":            "Failed to load changes",
@@ -198,9 +221,23 @@ const I18n = (() => {
       "changes.save.prefix":      "Manual snapshot",
       "changes.save.btn":         "Save snapshot",
       "changes.save.saving":      "Saving…",
-      "changes.save.done":        "Saved — restore it from History",
+      "changes.save.done":        "Saved",
       "changes.save.failed":      "Save failed",
-      "tm.tab":                   "History",
+      "changes.select.all":       "All",
+      "changes.select.count":     "{{n}}/{{total}} selected",
+      "changes.save.btnN":        "Save {{n}} selected file(s)",
+      "changes.save.promptMsg":   "Describe this snapshot",
+      "changes.diff.loading":     "Loading diff…",
+      "changes.diff.fail":        "Failed to load diff",
+      "changes.diff.same":        "No content change in this file.",
+      "changes.diff.binary":      "Binary file - line diff not available.",
+      "changes.diff.truncated":   "Diff too long - showing first {{n}} lines",
+      "changes.restore.title":    "Revert this file's changes",
+      "changes.restore.confirm": "Discard?",
+      "changes.restore.diffBtn": "Discard changes",
+      "changes.restore.doing":   "Reverting…",
+      "changes.restore.done":    "Reverted: {{path}}",
+      "changes.restore.failed":  "Revert failed",      "tm.tab":                   "History",
       "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",
@@ -240,6 +277,8 @@ const I18n = (() => {
       "sessions.badge.channel": "Channel",
       "sessions.badge.coding":  "Coding",
       "sessions.badge.setup":   "Setup",
+      "sessions.setup.name":    "Onboard",
+      "sessions.setup.browser.name": "🌐 Browser Setup",
       "sessions.newSession":    "New Session",
       "sessions.advancedOptions": "Advanced options",
       "sessions.actions.pin":   "Pin",
@@ -750,6 +789,7 @@ const I18n = (() => {
       "settings.models.apiFormat.auto":              "Auto (detect from provider & model)",
       "settings.models.apiFormat.anthropicMessages": "Anthropic Messages API",
       "settings.models.apiFormat.openaiCompletions": "OpenAI Chat Completions",
+      "settings.models.apiFormat.openaiResponses":   "OpenAI Responses API",
       "settings.models.field.getApiKey":  "How to get →",
       "settings.models.field.docsGuide.question": "New to AI keys?",
       "settings.models.field.docsGuide.cta":      "See the guide →",
@@ -956,7 +996,7 @@ const I18n = (() => {
       "onboard.device.success.credit.label": "Free trial credit:",
       "onboard.device.success.credit.value": "$1.00 (one-time, on us)",
       "onboard.device.success.model.label": "Trial model:",
-      "onboard.device.success.note":        "During the trial only Gemini 3.5 Flash is available — top up any amount to unlock all frontier models on this same key.",
+      "onboard.device.success.note":        "During the trial only Gemini 3.8 Flash is available — top up any amount to unlock all frontier models on this same key.",
       "onboard.device.success.btn":         "Start using Clacky →",
       "onboard.manual.toggle":      "Configure manually with your own API key",
       "onboard.provider.custom":    "Custom",
@@ -1199,6 +1239,7 @@ const I18n = (() => {
 
       // ── Welcome screen ──
       "sessions.new.title":       "开始新会话",
+      "sessions.new.title.named": "你好，{{name}}。准备好开始了吗？",
       "sessions.new.subtitle":    "选一个想聊的 Agent，说说你想做什么。",
       "sessions.new.placeholder": "输入第一条消息发给 {{agent}}…",
       "sessions.new.moreOptions": "更多选项",
@@ -1209,9 +1250,9 @@ const I18n = (() => {
       "chat.status.idle":    "空闲",
       "chat.status.running": "运行中",
       "chat.status.error":   "出错",
-      "chat.input.placeholder": "输入消息…（Enter 发送，Shift+Enter 换行）",
+      "chat.input.placeholder": "今天帮你做些什么？@ 引用会话或文件，/ 调用技能，Enter 发送，Shift + Enter 换行",
       "chat.input.placeholderRunning": "AI 正在工作，你仍然可以随时补充新信息给它...",
-      "chat.input.placeholderMobile": "输入消息…",
+      "chat.input.placeholderMobile": "今天帮你做些什么？",
       "chat.input.placeholderRunningMobile": "可输入补充消息…",
       "chat.btn.send":       "发送",
       "chat.thinking":       "思考中…",
@@ -1250,8 +1291,9 @@ const I18n = (() => {
       "chat.send":           "发送",
       "chat.edit.warn":      "编辑此消息将丢弃后续对话历史、文件快照及已产生的 token 费用，是否继续？",
       "chat.edit.warnSkip":  "不再提示",
-      "chat.empty.title":    "有什么可以帮你？",
-      "chat.empty.subtitle": "直接提问，或用一个技能开始。",
+      "chat.empty.title":       "有什么可以帮你？",
+      "chat.empty.title.named": "你好，{{name}}。准备好开始了吗？",
+      "chat.empty.subtitle":    "直接提问，或用一个技能开始。",
       "chat.empty.tip1":     "查资料、写文案、做翻译",
       "chat.empty.tip2":     "归纳总结、整理信息",
       "chat.empty.tip3":     "上传图片或文件，让我帮你分析",
@@ -1286,6 +1328,12 @@ const I18n = (() => {
       "sib.dir.default":         "默认工作目录",
       "sib.dir.current":         "当前工作目录",
       "sib.dir.inputPlaceholder": "输入或选择目录路径",
+      "sib.dir.back":            "后退",
+      "sib.dir.forward":         "前进",
+      "sib.dir.refresh":         "刷新",
+      "sib.dir.addFavorite":     "添加到收藏",
+      "sib.dir.removeFavorite":  "从收藏中移除",
+      "sib.dir.userFavorites":   "我的收藏",
       "sib.dir.loading":         "加载中…",
       "sib.dir.empty":           "空目录",
       "sib.dir.loadError":       "加载失败",
@@ -1295,24 +1343,39 @@ const I18n = (() => {
       "sib.dir.newFolder":       "新建文件夹",
       "sib.dir.newFolderDefault": "新建文件夹",
       "sib.dir.mkdirError":      "新建文件夹失败：{{msg}}",
+      "sib.dir.favorites": "快捷访问",
+      "sib.dir.places.home": "主目录",
+      "sib.dir.places.desktop": "桌面",
+      "sib.dir.places.downloads": "下载",
+      "sib.dir.places.documents": "文稿",
+      "sib.dir.drives": "驱动器",
+      "sib.dir.places.drive": "{{letter}}盘",
       "workspace.title":         "文件",
       "workspace.expand":        "打开工作区",
       "workspace.collapse":      "收起工作区",
       "workspace.refresh":       "刷新",
       "workspace.empty":         "此文件夹为空",
       "workspace.loading":       "加载中…",
+      "workspace.search":        "搜索文件",
+      "workspace.noResults":     "没有匹配的文件",
       "workspace.error":         "加载文件失败",
       "workspace.downloadFailed": "下载失败",
       "workspace.previewFailed": "文件预览失败",
       "workspace.previewUnsupported": "无法预览此类型文件",
       "workspace.download": "下载",
-      "workspace.contextMenuHint": "右键显示更多菜单",
       "workspace.copyPath": "复制路径",
       "workspace.copyRelPath": "复制相对路径",
       "aside.collapse":          "收起面板",
       "aside.expand":            "打开面板",
       "workspace.revealInFinder": "打开所在文件夹",
       "workspace.revealFailed":   "无法打开文件位置",
+      "workspace.closeTab":      "关闭",
+      "workspace.copyContent":    "复制内容",
+      "workspace.copied":         "已复制",
+      "workspace.copyFailed":     "复制失败",
+      "workspace.saved":          "已保存",
+      "workspace.saveFailed":     "保存失败",
+      "workspace.dirtyCloseConfirm": "文件有未保存的修改，确定关闭？",
       "changes.tab":              "Git 管理",
       "changes.loading":          "正在读取改动…",
       "changes.error":            "读取改动失败",
@@ -1329,8 +1392,23 @@ const I18n = (() => {
       "changes.save.prefix":      "手动存档",
       "changes.save.btn":         "存档当前版本",
       "changes.save.saving":      "正在存档…",
-      "changes.save.done":        "已存档，可在「时光机」里回到这个版本",
+      "changes.save.done":        "已存档",
       "changes.save.failed":      "存档失败",
+      "changes.select.all":       "全选",
+      "changes.select.count":     "已选 {{n}}/{{total}}",
+      "changes.save.btnN":        "存档选中的 {{n}} 个文件",
+      "changes.save.promptMsg":   "给这个版本写句说明",
+      "changes.diff.loading":     "正在读取差异…",
+      "changes.diff.fail":        "读取差异失败",
+      "changes.diff.same":       "这个文件的内容没有变化。",
+      "changes.diff.binary":     "二进制文件，无法逐行对比。",
+      "changes.diff.truncated":   "差异过大，仅显示前 {{n}} 行",
+      "changes.restore.title":    "撤销此文件的改动",
+      "changes.restore.confirm": "确认丢弃？",
+      "changes.restore.diffBtn":  "撤销改动",
+      "changes.restore.doing":    "正在撤销…",
+      "changes.restore.done":     "已撤销：{{path}}",
+      "changes.restore.failed":   "撤销失败",
       "tm.tab":                   "时光机",
       "sib.model.tooltip":       "点击切换模型",
       "sib.model.tooltip.busy":  "Agent 回复中，暂时无法切换模型",
@@ -1355,7 +1433,7 @@ const I18n = (() => {
       "sib.reasoning.medium":    "中",
       "sib.reasoning.high":      "高",
       "sib.reasoning.xhigh": "超高",
-      "sib.reasoning.max": "Max",
+      "sib.reasoning.max": "极高",
       "sessions.thinking":      "思考中…",
       "sessions.default_name":  "会话 {{n}}",
       "sessions.group.cron":     "定时任务",
@@ -1371,6 +1449,8 @@ const I18n = (() => {
       "sessions.badge.channel": "频道",
       "sessions.badge.coding":  "Coding",
       "sessions.badge.setup":   "配置",
+      "sessions.setup.name":    "个性化引导",
+      "sessions.setup.browser.name": "🌐 浏览器配置",
       "sessions.newSession":    "新会话",
       "sessions.advancedOptions": "高级选项",
       "sessions.loadMore":      "加载更多会话",
@@ -1887,6 +1967,7 @@ const I18n = (() => {
       "settings.models.apiFormat.auto":              "自动（根据服务商和模型检测）",
       "settings.models.apiFormat.anthropicMessages": "Anthropic Messages API",
       "settings.models.apiFormat.openaiCompletions": "OpenAI Chat Completions",
+      "settings.models.apiFormat.openaiResponses":   "OpenAI Responses API",
       "settings.models.field.getApiKey":  "如何获取 →",
       "settings.models.field.docsGuide.question": "不会配置 AI 模型？",
       "settings.models.field.docsGuide.cta":      "查看指南 →",
@@ -2093,7 +2174,7 @@ const I18n = (() => {
       "onboard.device.success.credit.label": "免费试用额度：",
       "onboard.device.success.credit.value": "$1.00（一次性赠送）",
       "onboard.device.success.model.label": "试用模型：",
-      "onboard.device.success.note":        "试用期内仅可使用 Gemini 3.5 Flash —— 任意金额充值后，同一 Key 立即解锁全部前沿模型。",
+      "onboard.device.success.note":        "试用期内仅可使用 Gemini 3.8 Flash —— 任意金额充值后，同一 Key 立即解锁全部前沿模型。",
       "onboard.device.success.btn":         "开始使用",
       "onboard.manual.toggle":      "使用自己的 API Key 手动配置",
       "onboard.provider.custom":    "自定义",
@@ -2285,7 +2366,14 @@ const I18n = (() => {
     }
   };
   // ── State ──────────────────────────────────────────────────────────────────
-  let _lang = localStorage.getItem(STORAGE_KEY) || DEFAULT_LANG;
+  // On first visit (no saved preference), match the OS/browser language.
+  function _detectLang() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) return TRANSLATIONS[saved] ? saved : DEFAULT_LANG;
+    const nav = (navigator.language || "").toLowerCase();
+    return nav.startsWith("zh") ? "zh" : DEFAULT_LANG;
+  }
+  let _lang = _detectLang();
 
   // ── Core functions ─────────────────────────────────────────────────────────
 
@@ -2347,6 +2435,8 @@ const I18n = (() => {
         ph = ph.replace(/\s*[\(（].*[\)）]/, "").trim();
       }
       el.placeholder = ph;
+      // contenteditable composers render their placeholder via CSS :empty::before.
+      if (el.isContentEditable) el.setAttribute("data-placeholder", ph);
     });
     document.querySelectorAll("[data-i18n-title]").forEach(el => {
       const key  = el.getAttribute("data-i18n-title");

data/lib/clacky/web/index.html

@@ -19,6 +19,20 @@
   </script>
 </head>
 <body>
+<script>
+  // Detect whether scrollbars float over content (macOS overlay) or occupy
+  // layout width (Windows/classic). The latter keeps the sidebar scrollbar
+  // always visible.
+  (function () {
+    var probe = document.createElement("div");
+    probe.style.cssText = "position:absolute;top:-9999px;left:0;width:100px;height:100px;overflow:scroll;";
+    document.body.appendChild(probe);
+    if (probe.offsetWidth !== probe.clientWidth) {
+      document.documentElement.classList.add("no-overlay-scrollbar");
+    }
+    document.body.removeChild(probe);
+  })();
+</script>
 <div id="offline-banner" style="display:none" data-i18n="offline.banner"></div>
 <div id="app" style="visibility:hidden">
 
@@ -86,14 +100,22 @@
         </div>
         <!-- Filter row -->
         <div class="search-filter-row">
-          <select id="session-search-type" class="search-select">
-            <option value=""        data-i18n="sessions.search.typeAll">All types</option>
-            <option value="manual"  data-i18n="sessions.search.typeManual">Default</option>
-            <option value="cron"    data-i18n="sessions.search.typeCron">Scheduled</option>
-            <option value="channel" data-i18n="sessions.search.typeChannel">Channel</option>
-            <option value="setup"   data-i18n="sessions.search.typeSetup">Setup</option>
-            <option value="coding"  data-i18n="sessions.search.typeCoding">Coding</option>
-          </select>
+          <div class="custom-select-wrapper search-select" id="session-search-type">
+            <div class="custom-select-trigger custom-select-trigger--bare" tabindex="0">
+              <span class="custom-select-value placeholder" data-i18n="sessions.search.typeAll">All types</span>
+              <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </div>
+            <div class="custom-select-dropdown">
+              <div class="custom-select-option" data-value="" data-i18n="sessions.search.typeAll">All types</div>
+              <div class="custom-select-option" data-value="manual" data-i18n="sessions.search.typeManual">Default</div>
+              <div class="custom-select-option" data-value="cron" data-i18n="sessions.search.typeCron">Scheduled</div>
+              <div class="custom-select-option" data-value="channel" data-i18n="sessions.search.typeChannel">Channel</div>
+              <div class="custom-select-option" data-value="setup" data-i18n="sessions.search.typeSetup">Setup</div>
+              <div class="custom-select-option" data-value="coding" data-i18n="sessions.search.typeCoding">Coding</div>
+            </div>
+          </div>
           <div class="search-date-wrap">
             <button id="session-search-date" class="search-date datepicker-trigger" type="button" data-value="" data-i18n="sessions.search.datePlaceholder"></button>
           </div>
@@ -126,7 +148,7 @@
           <span class="chat-section-title">
             <span data-i18n="sidebar.chat">Sessions</span>
             <!-- Chevron: hidden by default, shown on hover or when collapsed -->
-            <svg class="chat-section-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <svg class="chat-section-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
               <path d="M6 9l6 6 6-6"/>
             </svg>
           </span>
@@ -177,7 +199,7 @@
         <div class="sidebar-divider" id="projects-section-header">
           <span class="projects-section-title">
             <span data-i18n="sidebar.projects">Projects</span>
-            <svg class="projects-section-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="projects-section-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <path d="M6 9l6 6 6-6"/>
             </svg>
           </span>
@@ -398,17 +420,21 @@
             <button id="ns-btn-slash" type="button" class="new-session-composer-btn" title="Insert skill command (/)">
               <span>/</span>
             </button>
-            <textarea id="new-session-input"
-                      class="new-session-textarea"
-                      rows="1"
-                      data-i18n-placeholder="chat.input.placeholder"
-                      placeholder="Message… (Enter to send, Shift+Enter for newline)"></textarea>
+            <div id="new-session-input"
+                 class="new-session-textarea"
+                 contenteditable="true"
+                 role="textbox"
+                 aria-multiline="true"
+                 data-i18n-placeholder="chat.input.placeholder"
+                 data-placeholder="Message… (Enter to send, Shift+Enter for newline)"></div>
             <button id="new-session-send" class="new-session-send" type="button" title="Send message" disabled>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
             </button>
           </div><!-- /.new-session-input-bar -->
             </div><!-- /.ns-input-bar-card -->
           </div><!-- /.ns-composer-frame -->
+          <!-- @ mention menu (Files & Folders / Past Chats) -->
+          <div id="ns-mention-autocomplete" class="mention-autocomplete" style="display:none" role="listbox" aria-label="Mention"></div>
         </div><!-- /.new-session-composer -->
       </div>
     </div>
@@ -512,6 +538,8 @@
         </div>
         <!-- Image preview strip (hidden when empty) -->
         <div id="image-preview-strip" style="display:none"></div>
+        <!-- @ mention menu (Files & Folders / Past Chats) -->
+        <div id="mention-autocomplete" class="mention-autocomplete" style="display:none" role="listbox" aria-label="Mention"></div>
         <div id="input-bar">
           <!-- Hidden file picker -->
           <input type="file" id="image-file-input" accept="*/*" multiple style="display:none">
@@ -523,9 +551,12 @@
           <button id="btn-slash" title="Insert skill command (/)">
             <span>/</span>
           </button>
-          <textarea id="user-input" rows="1"
-            data-i18n-placeholder="chat.input.placeholder"
-            placeholder="Message… (Enter to send, Shift-Enter for newline)"></textarea>
+          <div id="user-input"
+               contenteditable="true"
+               role="textbox"
+               aria-multiline="true"
+               data-i18n-placeholder="chat.input.placeholder"
+               data-placeholder="Message… (Enter to send, Shift-Enter for newline)"></div>
           <button id="btn-send" title="Send message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></button>
           <button id="btn-interrupt" style="display:none" title="Stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1.5"/></svg></button>
         </div>
@@ -697,15 +728,31 @@
           </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>
-            </select>
-            <select id="extensions-installed-filter" class="extensions-sort">
-              <option value="all" data-i18n="extensions.filter.all">All</option>
-              <option value="installed" data-i18n="extensions.filter.installed">Installed</option>
-            </select>
+            <div class="custom-select-wrapper extensions-select" id="extensions-sort">
+              <div class="custom-select-trigger" tabindex="0">
+                <span class="custom-select-value" data-i18n="extensions.sort.downloads">Most downloaded</span>
+                <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </div>
+              <div class="custom-select-dropdown">
+                <div class="custom-select-option" data-value="downloads" data-i18n="extensions.sort.downloads">Most downloaded</div>
+                <div class="custom-select-option" data-value="newest" data-i18n="extensions.sort.newest">Newest</div>
+                <div class="custom-select-option" data-value="updated" data-i18n="extensions.sort.updated">Recently updated</div>
+              </div>
+            </div>
+            <div class="custom-select-wrapper extensions-select" id="extensions-installed-filter">
+              <div class="custom-select-trigger" tabindex="0">
+                <span class="custom-select-value" data-i18n="extensions.filter.all">All</span>
+                <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </div>
+              <div class="custom-select-dropdown">
+                <div class="custom-select-option" data-value="all" data-i18n="extensions.filter.all">All</div>
+                <div class="custom-select-option" data-value="installed" data-i18n="extensions.filter.installed">Installed</div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -741,9 +788,15 @@
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-filter-project-icon">
                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
               </svg>
-              <select id="trash-filter-project" class="trash-filter-project-select">
-                <option value="" data-i18n="trash.filterAllProjects">所有项目</option>
-              </select>
+              <div class="custom-select-wrapper" id="trash-filter-project">
+                <div class="custom-select-trigger custom-select-trigger--bare" tabindex="0">
+                  <span class="custom-select-value placeholder" data-i18n="trash.filterAllProjects">所有项目</span>
+                  <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                  </svg>
+                </div>
+                <div class="custom-select-dropdown"></div>
+              </div>
             </div>
           </div>
           <span class="trash-summary" id="trash-summary"></span>
@@ -911,9 +964,15 @@
                          data-i18n-placeholder="settings.models.search.placeholder"
                          placeholder="Search model / provider / remark / base URL" autocomplete="off">
                 </div>
-                <select id="model-provider-filter" class="model-provider-filter" aria-label="Filter by provider">
-                  <option value="">All providers</option>
-                </select>
+                <div class="custom-select-wrapper model-provider-filter" id="model-provider-filter">
+                  <div class="custom-select-trigger" tabindex="0">
+                    <span class="custom-select-value placeholder" data-i18n="settings.models.filter.all">All providers</span>
+                    <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                  </div>
+                  <div class="custom-select-dropdown"></div>
+                </div>
                 <button id="btn-add-model" class="btn-settings-add" data-i18n="settings.models.add">+ Add Model</button>
               </div>
             </div>
@@ -1099,11 +1158,19 @@
             <div class="settings-network">
               <p class="settings-network-desc" data-i18n="settings.search.desc">By default web_search scrapes DuckDuckGo and Bing, which needs no key but returns lower-quality results. Select a search provider to use an API instead — it falls back to the built-in engines if the provider fails.</p>
               <div class="settings-network-url">
-                <label class="settings-network-url-label" for="settings-search-provider" data-i18n="settings.search.provider">Provider</label>
+                <label class="settings-network-url-label" for="settings-search-provider-trigger" data-i18n="settings.search.provider">Provider</label>
                 <div class="settings-network-url-row">
-                  <select id="settings-search-provider" class="field-select">
-                    <option value="" data-i18n="settings.search.builtin">Built-in (DuckDuckGo / Bing)</option>
-                  </select>
+                  <div class="custom-select-wrapper" id="settings-search-provider-wrapper">
+                    <div class="custom-select-trigger" tabindex="0" id="settings-search-provider-trigger">
+                      <span class="custom-select-value placeholder" id="settings-search-provider-value" data-i18n="settings.search.builtin">Built-in (DuckDuckGo / Bing)</span>
+                      <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                      </svg>
+                    </div>
+                    <div class="custom-select-dropdown" id="settings-search-provider-dropdown">
+                      <div class="custom-select-option" data-value="" data-i18n="settings.search.builtin">Built-in (DuckDuckGo / Bing)</div>
+                    </div>
+                  </div>
                   <button type="button" id="btn-save-search" class="btn-settings-action" data-i18n="settings.search.save">Save</button>
                 </div>
                 <div id="settings-search-status" class="model-test-result"></div>
@@ -1345,7 +1412,7 @@
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                 </svg>
               </div>
-              <div class="custom-select-dropdown" id="model-modal-provider-dropdown"></div>
+              <div class="custom-select-dropdown custom-select-dropdown--footer" id="model-modal-provider-dropdown"></div>
             </div>
             <div id="model-modal-promo-hint" class="provider-promo-hint" data-index="modal"></div>
           </label>
@@ -1393,11 +1460,20 @@
 
           <label class="model-field" id="model-modal-apiformat-field">
             <span class="field-label" data-i18n="settings.models.field.apiFormat">API Format</span>
-            <select id="model-modal-api-format" class="field-input field-select">
-              <option value="" data-i18n="settings.models.apiFormat.auto">Auto (detect from provider &amp; model)</option>
-              <option value="anthropic-messages" data-i18n="settings.models.apiFormat.anthropicMessages">Anthropic Messages API</option>
-              <option value="openai-completions" data-i18n="settings.models.apiFormat.openaiCompletions">OpenAI Chat Completions</option>
-            </select>
+            <div class="custom-select-wrapper" id="model-modal-api-format-wrapper">
+              <div class="custom-select-trigger" tabindex="0" id="model-modal-api-format-trigger">
+                <span class="custom-select-value placeholder" id="model-modal-api-format-value" data-i18n="settings.models.apiFormat.auto">Auto (detect from provider &amp; model)</span>
+                <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </div>
+              <div class="custom-select-dropdown" id="model-modal-api-format-dropdown">
+                <div class="custom-select-option" data-value="" data-i18n="settings.models.apiFormat.auto">Auto (detect from provider &amp; model)</div>
+                <div class="custom-select-option" data-value="anthropic-messages" data-i18n="settings.models.apiFormat.anthropicMessages">Anthropic Messages API</div>
+                <div class="custom-select-option" data-value="openai-completions" data-i18n="settings.models.apiFormat.openaiCompletions">OpenAI Chat Completions</div>
+                <div class="custom-select-option" data-value="openai-responses" data-i18n="settings.models.apiFormat.openaiResponses">OpenAI Responses API</div>
+              </div>
+            </div>
           </label>
 
           <label class="model-field">
@@ -1508,9 +1584,9 @@
             </li>
             <li>
               <strong data-i18n="onboard.device.success.model.label">Trial model:</strong>
-              <span id="setup-device-success-model">or-gemini-3-5-flash</span>
+              <span id="setup-device-success-model">or-gemini-3-8-flash</span>
             </li>
-            <li class="setup-device-success-note" data-i18n="onboard.device.success.note">During the trial only Gemini 3.5 Flash is available — top up any amount to unlock all frontier models on this same key.</li>
+            <li class="setup-device-success-note" data-i18n="onboard.device.success.note">During the trial only Gemini 3.8 Flash is available — top up any amount to unlock all frontier models on this same key.</li>
           </ul>
           <button id="setup-btn-device-continue" class="setup-submit-btn" data-i18n="onboard.device.success.btn">Start using Clacky →</button>
         </div>
@@ -1656,12 +1732,16 @@
 <script src="/utils.js"></script>
 <script src="/core/ext.js"></script>
 <script src="/core/aside.js"></script>
+<script src="/components/composer.js"></script>
+<script src="/components/mentions.js"></script>
 <script src="/i18n.js"></script>
+<script src="/components/model-picker.js"></script>
 <script src="/auth.js"></script>
 <script src="/theme.js"></script>
 <script src="/components/notify.js"></script>
 <script src="/ws.js"></script>
 <script src="/ws-dispatcher.js"></script>
+<script src="/components/custom-select.js"></script>
 <script src="/sessions.js"></script>
 <script src="/projects.js"></script>
 <script src="/features/workspace/store.js"></script>