dsh-remote-plugin 0.6.18 → 0.6.20

package/public/desktop/desktop.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>DSH Remote · 桌面</title>
-  <script>/* 首帧前应用皮肤 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
+  <script>/* 首帧前应用皮肤 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'&&t!=='mono'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
   <link rel="stylesheet" href="../theme-vars.css">
   <link rel="stylesheet" href="desktop.css">
 </head>
@@ -50,7 +50,7 @@
         </div>
         <button class="ds-nav-item" data-view="view-overview"><span class="ds-nav-ico">◌</span><span data-i18n="ds.overview">主页</span></button>
         <button class="ds-nav-item" data-view="view-files"><span class="ds-nav-ico">⇅</span><span data-i18n="ds.files">文件传输</span></button>
-        <button class="ds-nav-item" data-view="view-settings"><span class="ds-nav-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-1.8 1.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5v.2h-2.5v-.2a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1-1.8-1.8.1-.1A1.7 1.7 0 0 0 8.1 15a1.7 1.7 0 0 0-1.5-1H6v-2.5h.2a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1 1.8-1.8.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.5v-.2h2.5v.2a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1 1.8 1.8-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.5 1h.2V14h-.2a1.7 1.7 0 0 0-1.5 1Z"/></svg></span><span data-i18n="ds.settings">设置</span></button>
+        <button class="ds-nav-item" data-view="view-settings"><span class="ds-nav-ico"><svg class="settings-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.09a2 2 0 0 1 1 1.73v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.73l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"/><circle cx="12" cy="12" r="3"/></svg></span><span data-i18n="ds.settings">设置</span></button>
         <div class="ds-feedback">
           <button id="btn-feedback" class="ds-feedback-btn" aria-haspopup="menu" aria-expanded="false" data-i18n-title="ds.feedback" data-i18n-aria="ds.feedback">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-8 8H5l-1.5 2L4 20a8 8 0 0 1-1-4 8 8 0 0 1 18-4Z"/></svg>
@@ -81,10 +81,11 @@
         </div>
       </div>
     </aside>
+    <button id="ds-sidebar-backdrop" class="ds-sidebar-backdrop hidden" type="button" data-i18n-aria="ds.close" aria-label="关闭菜单"></button>
 
     <div class="ds-main">
       <header class="ds-topbar">
-        <button id="btn-mobile-nav" class="ds-icon-btn" data-i18n-aria="ds.menu" data-i18n-title="ds.menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
+        <button id="btn-mobile-nav" class="ds-icon-btn" aria-controls="ds-sidebar" aria-expanded="false" data-i18n-aria="ds.menu" data-i18n-title="ds.menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
         <div class="ds-title" id="ds-title" data-i18n="ds.sessions">会话</div>
         <span id="ds-session-status" class="ds-session-status hidden"></span>
         <button id="btn-rename-session" class="ds-icon-btn hidden" data-i18n-title="ds.sessionRename" data-i18n-aria="ds.sessionRename">✎</button>
@@ -150,6 +151,7 @@
         <section id="view-chat" class="ds-view">
           <div id="session-cards" class="ds-session-cards"></div>
           <div id="queue-dock" class="ds-queue-dock hidden" aria-live="polite"></div>
+          <section id="session-pending" class="ds-session-pending hidden" aria-live="polite"></section>
           <div id="history" class="ds-history" aria-live="polite"></div>
           <div class="ds-composer">
             <div id="composer-status" class="ds-composer-status hidden" role="status" aria-live="polite"><span class="ds-composer-status-dot" aria-hidden="true"></span><span data-i18n="ds.composerRunning">运行中…</span></div>
@@ -202,22 +204,22 @@
           <div class="ds-section-label" data-i18n="ds.settings">设置</div>
           <div id="settings-home">
             <div class="ds-settings">
-              <div class="ds-setting-row" data-settings-group="general" style="cursor:pointer">
+              <button type="button" class="ds-setting-row ds-setting-link" data-settings-group="general">
                 <div><div class="ds-setting-name" data-i18n="ds.groupGeneral">通用</div><div class="ds-setting-desc" data-i18n="ds.groupGeneralDesc">工具调用、预设提示词</div></div>
                 <span class="ds-setting-arrow" aria-hidden="true">›</span>
-              </div>
-              <div class="ds-setting-row" data-settings-group="servers" style="cursor:pointer">
+              </button>
+              <button type="button" class="ds-setting-row ds-setting-link" data-settings-group="servers">
                 <div><div class="ds-setting-name" data-i18n="ds.groupServers">服务器</div><div class="ds-setting-desc" data-i18n="ds.groupServersDesc">服务器地址</div></div>
                 <span class="ds-setting-arrow" aria-hidden="true">›</span>
-              </div>
-              <div class="ds-setting-row" data-settings-group="theme" style="cursor:pointer">
+              </button>
+              <button type="button" class="ds-setting-row ds-setting-link" data-settings-group="theme">
                 <div><div class="ds-setting-name" data-i18n="ds.groupTheme">皮肤</div><div class="ds-setting-desc" data-i18n="ds.groupThemeDesc">配色主题</div></div>
                 <span class="ds-setting-arrow" aria-hidden="true">›</span>
-              </div>
-              <div class="ds-setting-row" data-settings-group="about" style="cursor:pointer">
+              </button>
+              <button type="button" class="ds-setting-row ds-setting-link" data-settings-group="about">
                 <div><div class="ds-setting-name" data-i18n="ds.groupAbout">关于</div><div class="ds-setting-desc" data-i18n="ds.groupAboutDesc">版本信息</div></div>
                 <span class="ds-setting-arrow" aria-hidden="true">›</span>
-              </div>
+              </button>
             </div>
             <div class="ds-settings">
               <div class="ds-setting-row">
@@ -231,7 +233,7 @@
             </div>
           </div>
 
-          <div id="settings-page-general" class="ds-settings hidden">
+          <div id="settings-page-general" class="ds-settings hidden" data-motion-panel>
             <div class="ds-setting-row" data-settings-back style="cursor:pointer">
               <button class="ds-btn" data-i18n="ds.back">‹ 返回</button>
               <div class="ds-setting-name" data-i18n="ds.groupGeneral">通用</div>
@@ -242,7 +244,7 @@
             </div>
           </div>
 
-          <div id="settings-page-servers" class="ds-settings hidden">
+          <div id="settings-page-servers" class="ds-settings hidden" data-motion-panel>
             <div class="ds-setting-row" data-settings-back style="cursor:pointer">
               <button class="ds-btn" data-i18n="ds.back">‹ 返回</button>
               <div class="ds-setting-name" data-i18n="ds.groupServers">服务器</div>
@@ -266,18 +268,18 @@
             </div>
           </div>
 
-          <div id="settings-page-theme" class="ds-settings hidden">
+          <div id="settings-page-theme" class="ds-settings hidden" data-motion-panel>
             <div class="ds-setting-row" data-settings-back style="cursor:pointer">
               <button class="ds-btn" data-i18n="ds.back">‹ 返回</button>
               <div class="ds-setting-name" data-i18n="ds.groupTheme">皮肤</div>
             </div>
             <div class="ds-setting-row">
-              <div><div class="ds-setting-name" data-i18n="ds.themeTitle">皮肤</div><div class="ds-setting-desc" data-i18n="ds.themeDesc">四套皮肤</div></div>
+              <div><div class="ds-setting-name" data-i18n="ds.themeTitle">皮肤</div><div class="ds-setting-desc" data-i18n="ds.themeDesc">五套皮肤</div></div>
               <button id="btn-theme" class="ds-btn">默认深空</button>
             </div>
           </div>
 
-          <div id="settings-page-about" class="ds-settings hidden">
+          <div id="settings-page-about" class="ds-settings hidden" data-motion-panel>
             <div class="ds-setting-row" data-settings-back style="cursor:pointer">
               <button class="ds-btn" data-i18n="ds.back">‹ 返回</button>
               <div class="ds-setting-name" data-i18n="ds.groupAbout">关于</div>
@@ -475,7 +477,7 @@
         'ds.back': '‹ 返回', 'ds.emptyGroup': '暂无设置项',
         'ds.serversTitle': '服务器（分组）', 'ds.speedTest': '测速', 'ds.currentGroup': '当前组',
         'ds.addGroup': '+ 组', 'ds.addServer': '添加', 'ds.tokenTitle': '访问令牌', 'ds.copyToken': '复制',
-        'ds.themeTitle': '皮肤', 'ds.themeDesc': '默认深空 / 落日 / 易北爱乐厅 / 草原孤塔', 'ds.langTitle': '语言 / Language',
+        'ds.themeTitle': '皮肤', 'ds.themeDesc': '默认深空 / 落日 / 易北爱乐厅 / 草原孤塔 / 黑曜白', 'ds.langTitle': '语言 / Language',
         'ds.feedbackTitle': '反馈渠道', 'ds.feedbackDesc': 'GitHub / Gitee / B站：反馈 bug、提建议、唠嗑',
         'ds.feedback': '反馈', 'ds.feedbackGithubDesc': '反馈 bug / 提建议', 'ds.feedbackGiteeDesc': '国内镜像，无需代理',
         'ds.feedbackBiliDesc': 'UP 动态页交流', 'ds.feedbackCopyLink': '复制项目链接', 'ds.feedbackCopyDesc': '手动分享给朋友',
@@ -526,7 +528,7 @@
         'ds.groupsPromptRename': '重命名组「{group}」：', 'ds.groupsRenamed': '组已重命名',
         'ds.groupsCannotDeleteDefault': '默认组不可删除',
         'ds.groupsConfirmDelete': '删除组「{group}」？组内服务器将归入默认组。', 'ds.groupsDeleted': '组已删除',
-        'ds.theme.default': '默认深空', 'ds.theme.dark': '落日', 'ds.theme.light': '易北爱乐厅', 'ds.theme.neutral': '草原孤塔',
+        'ds.theme.default': '默认深空', 'ds.theme.dark': '落日', 'ds.theme.light': '易北爱乐厅', 'ds.theme.neutral': '草原孤塔', 'ds.theme.mono': '黑曜白',
         'ds.role.me': '我', 'ds.role.dsh': 'DSH', 'ds.toolDefault': '工具',
         'ds.eventSystemReminder': '系统提示',
         'ds.questionOptions': '选项', 'ds.questionCustom': '自定义回答',
@@ -540,6 +542,7 @@
         'presets.nameEmpty': '名称不能为空', 'presets.nameTooLong': '名称不能超过 20 字', 'presets.textTooLong': '内容不能超过 2000 字', 'presets.limit': '最多 20 条预设', 'presets.added': '预设已添加',
         'presets.confirmDelete': '删除预设「{name}」？', 'presets.saved': '预设已保存', 'presets.deleted': '预设已删除',
         'goal.title': '目标', 'goal.pause': '暂停', 'goal.resume': '继续', 'goal.complete': '完成', 'goal.edit': '改目标', 'goal.clear': '清除',
+        'goal.collapse': '收起目标到侧边', 'goal.collapseShort': '收起', 'goal.expand': '展开目标', 'goal.collapsedHint': '仍在运行',
         'goal.none': '当前会话没有目标', 'goal.confirmClear': '清除当前目标？(不会删除会话)', 'goal.confirmComplete': '将目标标记为完成？',
         'goal.actionFailed': '目标操作失败', 'goal.actionSubmitted': '目标操作已提交',
         'goal.cannotEmpty': '目标不能为空', 'goal.updateFailed': '更新失败', 'goal.updated': '目标已更新', 'goal.editPrompt': '修改目标：',
@@ -577,7 +580,7 @@
         'ds.back': '‹ Back', 'ds.emptyGroup': 'No settings here',
         'ds.serversTitle': 'Servers (groups)', 'ds.speedTest': 'Test', 'ds.currentGroup': 'Current group',
         'ds.addGroup': '+ Group', 'ds.addServer': 'Add', 'ds.tokenTitle': 'Access token', 'ds.copyToken': 'Copy',
-        'ds.themeTitle': 'Theme', 'ds.themeDesc': 'Deep Space / Sunset / Elbphilharmonie / Prairie Tower', 'ds.langTitle': 'Language',
+        'ds.themeTitle': 'Theme', 'ds.themeDesc': 'Deep Space / Sunset / Elbphilharmonie / Prairie Tower / Monochrome', 'ds.langTitle': 'Language',
         'ds.feedbackTitle': 'Feedback', 'ds.feedbackDesc': 'GitHub / Gitee / Bilibili: report bugs, suggest features, or just chat',
         'ds.feedback': 'Feedback', 'ds.feedbackGithubDesc': 'Report bugs · suggest features', 'ds.feedbackGiteeDesc': 'Mirror in China, no proxy needed',
         'ds.feedbackBiliDesc': 'Chat on the UP\'s Bilibili page', 'ds.feedbackCopyLink': 'Copy project link', 'ds.feedbackCopyDesc': 'Share it manually',
@@ -628,7 +631,7 @@
         'ds.groupsPromptRename': 'Rename group "{group}":', 'ds.groupsRenamed': 'Group renamed',
         'ds.groupsCannotDeleteDefault': 'The default group cannot be deleted',
         'ds.groupsConfirmDelete': 'Delete group "{group}"? Its servers move to the default group.', 'ds.groupsDeleted': 'Group deleted',
-        'ds.theme.default': 'Deep Space', 'ds.theme.dark': 'Sunset', 'ds.theme.light': 'Elbphilharmonie', 'ds.theme.neutral': 'Prairie Tower',
+        'ds.theme.default': 'Deep Space', 'ds.theme.dark': 'Sunset', 'ds.theme.light': 'Elbphilharmonie', 'ds.theme.neutral': 'Prairie Tower', 'ds.theme.mono': 'Monochrome',
         'ds.role.me': 'Me', 'ds.role.dsh': 'DSH', 'ds.toolDefault': 'tool',
         'ds.eventSystemReminder': 'System reminder',
         'ds.questionOptions': 'Options', 'ds.questionCustom': 'Custom answer',
@@ -642,6 +645,7 @@
         'presets.nameEmpty': 'Name cannot be empty', 'presets.nameTooLong': 'Name must be ≤20 characters', 'presets.textTooLong': 'Content must be ≤2000 characters', 'presets.limit': 'At most 20 presets', 'presets.added': 'Preset added',
         'presets.confirmDelete': 'Delete preset "{name}"?', 'presets.saved': 'Preset saved', 'presets.deleted': 'Preset deleted',
         'goal.title': 'Goal', 'goal.pause': 'Pause', 'goal.resume': 'Resume', 'goal.complete': 'Complete', 'goal.edit': 'Edit goal', 'goal.clear': 'Clear',
+        'goal.collapse': 'Collapse goal to the side', 'goal.collapseShort': 'Collapse', 'goal.expand': 'Expand goal', 'goal.collapsedHint': 'Still running',
         'goal.none': 'This session has no goal', 'goal.confirmClear': 'Clear the current goal? (the session stays)', 'goal.confirmComplete': 'Mark the goal as completed?',
         'goal.actionFailed': 'Goal action failed', 'goal.actionSubmitted': 'Goal action submitted',
         'goal.cannotEmpty': 'Goal cannot be empty', 'goal.updateFailed': 'Update failed', 'goal.updated': 'Goal updated', 'goal.editPrompt': 'Edit goal:',

package/public/desktop/desktop.js

@@ -27,10 +27,11 @@ const CAP = window.Capacitor || null
 
 /* ---------------- 皮肤 ---------------- */
 const THEME_META = [
-  { id: 'default', sw: ['#0B0E1A', '#151B33', '#5B8CFF'] },
-  { id: 'dark', sw: ['#05348B', '#0D438F', '#F9A647'] },
-  { id: 'light', sw: ['#EFEEEC', '#FAF8F5', '#E6BC7B'] },
-  { id: 'neutral', sw: ['#DDD4B8', '#585818', '#832D15'] }
+  { id: 'default', sw: ['#0D1117', '#21262D', '#58A6FF'] },
+  { id: 'dark', sw: ['#161316', '#302323', '#FFB86B'] },
+  { id: 'light', sw: ['#F5F7F8', '#FFFFFF', '#176B87'] },
+  { id: 'neutral', sw: ['#EEF1E8', '#FAFBF6', '#47643C'] },
+  { id: 'mono', sw: ['#050505', '#333333', '#F5F5F5'] }
 ]
 function themeGet() {
   let v = LS.get('dshTheme', '')
@@ -1381,6 +1382,24 @@ function goalOf(s) {
   if (!p) return null
   return p.goal && typeof p.goal === 'object' ? p.goal : p
 }
+const COLLAPSED_GOALS_KEY = 'dshCollapsedGoalsV1'
+function collapsedGoals() {
+  try {
+    const value = JSON.parse(LS.get(COLLAPSED_GOALS_KEY, '[]'))
+    return Array.isArray(value) ? value.filter(item => item && typeof item.sessionId === 'string' && typeof item.goalId === 'string') : []
+  } catch { return [] }
+}
+function goalDisplayId(goal) { return String(goal?.id || '__current__') }
+function isGoalCollapsed(sessionId, goal) {
+  const goalId = goalDisplayId(goal)
+  return collapsedGoals().some(item => item.sessionId === sessionId && item.goalId === goalId)
+}
+function setGoalCollapsed(sessionId, goal, collapsed) {
+  const goalId = goalDisplayId(goal)
+  const next = collapsedGoals().filter(item => item.sessionId !== sessionId)
+  if (collapsed) next.push({ sessionId, goalId })
+  LS.set(COLLAPSED_GOALS_KEY, JSON.stringify(next.slice(-100)))
+}
 function onSessionEvent(sessionId, event) {
   if (event?.type === 'turn/start' || event?.type === 'turn/end') {
     noteSessionTurnTime(sessionId, event)
@@ -1547,6 +1566,7 @@ async function openSession(id) {
   renderSessions()
   renderSessionCards()
   renderQueue()
+  renderSessionPendingDesktop()
   updateComposerStatus()
   await loadHistory()
 }
@@ -1557,6 +1577,7 @@ function closeSession() {
   const cards = $('session-cards')
   if (cards) cards.innerHTML = ''
   renderQueue()
+  renderSessionPendingDesktop()
   updateComposerStatus()
   updateSessionActions()
   showView('view-sessions')
@@ -1738,15 +1759,23 @@ async function renderSessionCards() {
   const todos = proj(s, 'todos')
   let html = ''
   if (goal && !isGoalTerminal(goal)) {
-    html += `<div class="ds-card ds-goal-card"><div class="ds-card-title">${t('goal.title')}</div>
-      <div class="ds-goal-obj">${esc(goal.objective || '')}</div>
-      <div class="ds-goal-phase">phase: ${esc(goal.phase || '?')} · revision ${goal.revision ?? '?'}</div>
-      <div class="ds-goal-actions">
-        ${goal.phase === 'active' ? `<button class="ds-mini-btn" data-goal="pause">${t('goal.pause')}</button>` : `<button class="ds-mini-btn" data-goal="resume">${t('goal.resume')}</button>`}
-        <button class="ds-mini-btn" data-goal="complete">${t('goal.complete')}</button>
-        <button class="ds-mini-btn" data-goal="edit">${t('goal.edit')}</button>
-        <button class="ds-mini-btn" data-goal="clear">${t('goal.clear')}</button>
-      </div></div>`
+    const collapsed = isGoalCollapsed(sessionId, goal)
+    html += `<div class="ds-goal-disclosure${collapsed ? ' is-collapsed' : ''}">
+      <div id="goal-panel-desktop" class="ds-card ds-goal-card${collapsed ? ' hidden' : ''}">
+        <div class="ds-goal-card-head"><div class="ds-card-title">${t('goal.title')}</div>
+          <button type="button" class="ds-goal-collapse-btn" data-goal-collapse="1" aria-expanded="true" aria-controls="goal-panel-desktop" title="${esc(t('goal.collapse'))}"><span aria-hidden="true">›</span>${t('goal.collapseShort')}</button>
+        </div>
+        <div class="ds-goal-obj">${esc(goal.objective || '')}</div>
+        <div class="ds-goal-phase">phase: ${esc(goal.phase || '?')} · revision ${goal.revision ?? '?'}</div>
+        <div class="ds-goal-actions">
+          ${goal.phase === 'active' ? `<button class="ds-mini-btn" data-goal="pause">${t('goal.pause')}</button>` : `<button class="ds-mini-btn" data-goal="resume">${t('goal.resume')}</button>`}
+          <button class="ds-mini-btn" data-goal="complete">${t('goal.complete')}</button>
+          <button class="ds-mini-btn" data-goal="edit">${t('goal.edit')}</button>
+          <button class="ds-mini-btn" data-goal="clear">${t('goal.clear')}</button>
+        </div>
+      </div>
+      <button type="button" class="ds-goal-side-tab${collapsed ? '' : ' hidden'}" data-goal-collapse="0" aria-expanded="false" aria-controls="goal-panel-desktop" aria-label="${esc(t('goal.expand'))}" title="${esc(t('goal.expand'))}"><span aria-hidden="true">‹</span><span>${t('goal.title')}</span><small>${t('goal.collapsedHint')}</small></button>
+    </div>`
   }
   if (todos?.items?.length) {
     html += `<div class="ds-card"><div class="ds-card-title">${t('todos.title')}</div>${todos.items.map(item =>
@@ -1756,6 +1785,15 @@ async function renderSessionCards() {
   box.innerHTML = html
   box.querySelectorAll('[data-goal]').forEach(btn =>
     btn.addEventListener('click', () => goalAction(btn.dataset.goal)))
+  box.querySelectorAll('[data-goal-collapse]').forEach(btn =>
+    btn.addEventListener('click', () => {
+      const collapse = btn.dataset.goalCollapse === '1'
+      const currentGoal = goalOf(state.byId.get(state.current))
+      if (!currentGoal) return
+      setGoalCollapsed(state.current, currentGoal, collapse)
+      void renderSessionCards()
+      requestAnimationFrame(() => box.querySelector(`[data-goal-collapse="${collapse ? '0' : '1'}"]`)?.focus())
+    }))
 
   const sub = await safeRpc('subagent.list', { parentSessionId: sessionId }, '')
   if (renderGeneration !== sessionCardsRenderGeneration || state.current !== sessionId) return
@@ -1974,6 +2012,39 @@ function serverLabel() {
   const cur = currentServerEntry()
   return cur ? (cur.note || cur.url) : (state.server || location.host)
 }
+function desktopApprovalDetail(a) {
+  const lines = []
+  if (a?.reason) lines.push(String(a.reason))
+  if (a?.arguments !== undefined) lines.push(safeJson(a.arguments))
+  if (a?.callId) lines.push(`callId: ${a.callId}`)
+  return lines.join('\n') || t('ds.approvalReason', { reason: '' })
+}
+function renderSessionPendingDesktop() {
+  const box = $('session-pending')
+  if (!box) return
+  const sessionId = state.current
+  const items = [
+    ...state.approvals.filter(a => a.sessionId === sessionId).map(a => ({ kind: 'approval', item: a })),
+    ...state.questions.filter(q => q.sessionId === sessionId).map(q => ({ kind: 'question', item: q }))
+  ]
+  box.classList.toggle('hidden', !sessionId || !items.length)
+  if (!sessionId || !items.length) { box.innerHTML = ''; return }
+  box.innerHTML = `<div class="ds-session-pending-head"><span>${esc(t('ds.attention'))}</span><span>${items.length}</span></div><div class="ds-session-pending-list">${items.map(({ kind, item }) => {
+    if (kind === 'approval') return `<article class="ds-notif-card" data-session-approval="${esc(item.approvalId)}">
+      <div class="ds-notif-head">🔐 ${t('ds.approvalTitle')}</div>
+      <div class="ds-notif-title">${esc(item.toolName || t('ds.toolDefault'))}</div>
+      <div class="ds-notif-body">${esc(desktopApprovalDetail(item))}</div>
+      <div class="ds-notif-actions"><button type="button" class="ds-btn allow" data-session-approve="1">${t('ds.allow')}</button><button type="button" class="ds-btn reject" data-session-approve="0">${t('ds.reject')}</button></div>
+    </article>`
+    return `<article class="ds-notif-card question" data-session-question="${esc(item.rpcId)}">
+      <div class="ds-notif-head">❓ ${t('ds.questionNotify')}</div>
+      <div class="ds-notif-title">${esc((item.questions || []).map(question => question.question).filter(Boolean).join(' / '))}</div>
+      <div class="ds-notif-actions"><button type="button" class="ds-btn" data-session-answer>${t('ds.submit')}</button></div>
+    </article>`
+  }).join('')}</div>`
+  box.querySelectorAll('[data-session-approve]').forEach(button => button.addEventListener('click', () => approveApproval(button.closest('[data-session-approval]')?.dataset.sessionApproval || '', button.dataset.sessionApprove === '1')))
+  box.querySelectorAll('[data-session-answer]').forEach(button => button.addEventListener('click', () => openQuestionModal(state.questions.find(q => q.rpcId === button.closest('[data-session-question]')?.dataset.sessionQuestion))))
+}
 function renderNotifStack() {
   const stack = $('notif-stack')
   const items = [
@@ -1983,7 +2054,7 @@ function renderNotifStack() {
   stack.innerHTML = items.map(it => {
     if (it.kind === 'approval') {
       const a = it.a
-      const reason = a.reason || a.arguments ? safeJson(a.arguments ?? a.reason ?? '') : ''
+      const reason = desktopApprovalDetail(a)
       return `<div class="ds-notif-card" data-approval="${esc(a.approvalId)}" tabindex="0">
         <div class="ds-notif-head">🔐 ${t('ds.approvalTitle')} · ${esc(serverLabel())} · ${fmtTime(a.time || Date.now())}</div>
         <div class="ds-notif-title">${esc(a.toolName || t('ds.toolDefault'))}</div>
@@ -2014,6 +2085,7 @@ function renderNotifStack() {
   stack.querySelectorAll('.ds-notif-card').forEach(card => card.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') toast(t('ds.ignored'), 'ok')
   }))
+  renderSessionPendingDesktop()
   renderOverviewDesktop()
 }
 async function approveApproval(id, allow) {
@@ -2672,7 +2744,7 @@ function renderOverviewDesktop() {
   $('ds-overview-attention-list').innerHTML = pending.length ? pending.slice(0, 4).map(({ kind, item }) => {
     const title = titleOf(state.byId.get(item.sessionId))
     if (kind === 'approval') return `<div class="ds-overview-attention-item" data-ds-overview-approval="${esc(item.approvalId)}">
-      <span class="ds-overview-mark">⌁</span><span class="ds-overview-copy"><span class="ds-overview-item-title">${esc(item.toolName || t('ds.toolDefault'))}</span><span class="ds-overview-item-desc">${esc(item.reason || t('ds.approvalReason', { reason: '' }))} · ${esc(title)}</span></span>
+      <span class="ds-overview-mark">⌁</span><span class="ds-overview-copy"><span class="ds-overview-item-title">${esc(item.toolName || t('ds.toolDefault'))}</span><span class="ds-overview-item-desc">${esc(desktopApprovalDetail(item))} · ${esc(title)}</span></span>
       <span class="ds-overview-actions"><button class="ds-btn allow" data-ds-overview-approve="1">${t('ds.allow')}</button><button class="ds-btn reject" data-ds-overview-approve="0">${t('ds.reject')}</button></span>
     </div>`
     return `<button type="button" class="ds-overview-attention-item question" data-ds-overview-question="${esc(item.rpcId)}">
@@ -2719,10 +2791,25 @@ function renderOverviewDesktop() {
   $('ds-overview-session-list').querySelectorAll('[data-ds-overview-session]').forEach(btn => btn.addEventListener('click', () => openSession(btn.dataset.dsOverviewSession)))
 }
 
+const narrowSidebarQuery = window.matchMedia('(max-width: 1023px)')
+function setMobileSidebar(open) {
+  const sidebar = $('ds-sidebar')
+  const backdrop = $('ds-sidebar-backdrop')
+  const trigger = $('btn-mobile-nav')
+  if (!sidebar || !backdrop || !trigger) return
+  const visible = !!open && narrowSidebarQuery.matches
+  sidebar.classList.toggle('mobile-open', visible)
+  backdrop.classList.toggle('hidden', !visible)
+  trigger.setAttribute('aria-expanded', String(visible))
+  sidebar.inert = narrowSidebarQuery.matches && !visible
+  $('ds-app')?.classList.toggle('mobile-nav-open', visible)
+}
+
 function showView(id) {
   state.view = id
   for (const v of ['view-overview', 'view-sessions', 'view-chat', 'view-files', 'view-settings']) $(v).classList.toggle('hidden', v !== id)
   document.querySelectorAll('.ds-nav-item').forEach(b => b.classList.toggle('active', b.dataset.view === id))
+  if (narrowSidebarQuery.matches) setMobileSidebar(false)
   window.DshMotion?.view($(id))
   const titles = { 'view-overview': 'ds.overview', 'view-sessions': 'ds.sessions', 'view-chat': 'ds.sessions', 'view-files': 'ds.files', 'view-settings': 'ds.settings' }
   if (id === 'view-chat') { const s = state.byId.get(state.current); $('ds-title').textContent = s ? titleOf(s) : t('ds.sessions') }
@@ -2825,9 +2912,14 @@ function bindUi() {
     LS.set('sessionSort', state.sessionSort)
     renderSessions()
   })
-  $('btn-mobile-nav').addEventListener('click', () => {
-    const list = $('mobile-session-list')
-    list.style.display = list.style.display === 'none' ? 'flex' : 'none'
+  $('btn-mobile-nav').addEventListener('click', () => setMobileSidebar(!$('ds-sidebar').classList.contains('mobile-open')))
+  $('ds-sidebar-backdrop').addEventListener('click', () => setMobileSidebar(false))
+  narrowSidebarQuery.addEventListener?.('change', () => setMobileSidebar(false))
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && $('ds-sidebar').classList.contains('mobile-open')) {
+      setMobileSidebar(false)
+      $('btn-mobile-nav').focus()
+    }
   })
   document.querySelectorAll('.ds-nav-item').forEach(b => b.addEventListener('click', () => showView(b.dataset.view)))
   $('ds-overview-refresh').addEventListener('click', async () => {

package/public/index.html

@@ -3,12 +3,12 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="#05348B">
+  <meta name="theme-color" content="#0D1117">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>DSH Remote</title>
   <script>/* 统一入口: 桌面浏览器(宽屏且 UA 非移动)访问根地址自动切换到桌面端, 手机/窄窗口继续 App 界面 */ (function(){try{var proto=location.protocol;var ua=navigator.userAgent||'';var mobile=/Android|iPhone|iPad|iPod|Mobile|Windows Phone/i.test(ua);if((proto==='http:'||proto==='https:')&&!mobile&&window.innerWidth>=1024){var p=location.pathname;if(p==='/'||/\/index\.html$/.test(p)){location.replace('desktop/desktop.html'+location.search)}}}catch(e){}})()</script>
-  <script>/* 首帧前应用皮肤, 避免闪白/闪黑 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
+  <script>/* 首帧前应用皮肤, 避免闪白/闪黑 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'&&t!=='mono'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="icon" href="icon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="styles.css">
@@ -104,6 +104,8 @@
 
       <div id="queue-dock" class="queue-dock hidden" aria-live="polite"></div>
 
+      <section id="session-pending" class="session-pending hidden" aria-live="polite"></section>
+
       <div class="section-head small">
         <span data-i18n="session.history">对话</span>
         <span id="history-hint" class="muted"></span>
@@ -276,27 +278,27 @@
     <section id="view-settings" class="view hidden">
       <div id="settings-home">
         <div class="settings-group">
-          <div class="setting-row" data-settings-group="general" style="cursor:pointer">
+          <button type="button" class="setting-row setting-link" data-settings-group="general">
             <div><div class="setting-name" data-i18n="settings.groupGeneral">通用</div><div class="setting-desc" data-i18n="settings.groupGeneralDesc">显示工具调用、预设提示词</div></div>
-          </div>
-          <div class="setting-row" data-settings-group="model" style="cursor:pointer">
+          </button>
+          <button type="button" class="setting-row setting-link" data-settings-group="model">
             <div><div class="setting-name" data-i18n="settings.groupModel">模型</div><div class="setting-desc" data-i18n="settings.groupModelDesc">提供方、API 密钥和模型目录</div></div>
-          </div>
-          <div class="setting-row" data-settings-group="tests" style="cursor:pointer">
+          </button>
+          <button type="button" class="setting-row setting-link" data-settings-group="tests">
             <div><div class="setting-name" data-i18n="settings.groupTests">功能测试</div><div class="setting-desc" data-i18n="settings.groupTestsDesc">验证 Android 和 DSH 原生能力</div></div>
-          </div>
-          <div class="setting-row" data-settings-group="servers" style="cursor:pointer">
+          </button>
+          <button type="button" class="setting-row setting-link" data-settings-group="servers">
             <div><div class="setting-name" data-i18n="settings.groupServers">服务器</div><div class="setting-desc" data-i18n="settings.groupServersDesc">服务器地址、扫码连接</div></div>
-          </div>
-          <div class="setting-row" data-settings-group="notify" style="cursor:pointer">
+          </button>
+          <button type="button" class="setting-row setting-link" data-settings-group="notify">
             <div><div class="setting-name" data-i18n="settings.groupNotify">通知</div><div class="setting-desc" data-i18n="settings.groupNotifyDesc">通知、提醒、后台轮询</div></div>
-          </div>
-          <div class="setting-row" data-settings-group="theme" style="cursor:pointer">
+          </button>
+          <button type="button" class="setting-row setting-link" data-settings-group="theme">
             <div><div class="setting-name" data-i18n="settings.groupTheme">皮肤</div><div class="setting-desc" data-i18n="settings.groupThemeDesc">配色主题</div></div>
-          </div>
-          <div class="setting-row" data-settings-group="about" style="cursor:pointer">
+          </button>
+          <button type="button" class="setting-row setting-link" data-settings-group="about">
             <div><div class="setting-name" data-i18n="settings.groupAbout">关于</div><div class="setting-desc" data-i18n="settings.groupAboutDesc">DSH 状态、检查更新</div></div>
-          </div>
+          </button>
         </div>
         <div class="settings-group">
           <div class="setting-row">
@@ -336,7 +338,7 @@
         <p class="about" data-i18n="settings.about">DSH Remote · 局域网 / Tailscale 均可访问<br>仅作为 DSH 本机 3080 端口的带认证代理</p>
       </div>
 
-      <div id="settings-page-general" class="settings-subpage hidden">
+      <div id="settings-page-general" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -363,7 +365,7 @@
         </div>
       </div>
 
-      <div id="settings-page-model" class="settings-subpage hidden">
+      <div id="settings-page-model" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -386,7 +388,7 @@
         </div>
       </div>
 
-      <div id="settings-page-tests" class="settings-subpage hidden">
+      <div id="settings-page-tests" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -415,7 +417,7 @@
         </div>
       </div>
 
-      <div id="settings-page-servers" class="settings-subpage hidden">
+      <div id="settings-page-servers" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -452,7 +454,7 @@
         </div>
       </div>
 
-      <div id="settings-page-notify" class="settings-subpage hidden">
+      <div id="settings-page-notify" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -496,7 +498,7 @@
         </div>
       </div>
 
-      <div id="settings-page-theme" class="settings-subpage hidden">
+      <div id="settings-page-theme" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -505,13 +507,13 @@
         </div>
         <div class="settings-group">
           <div class="setting-row">
-            <div><div class="setting-name" data-i18n="settings.themeTitle">皮肤</div><div class="setting-desc" data-i18n="settings.themeDesc">默认深空 / 落日 / 易北爱乐厅 / 草原孤塔</div></div>
+            <div><div class="setting-name" data-i18n="settings.themeTitle">皮肤</div><div class="setting-desc" data-i18n="settings.themeDesc">默认深空 / 落日 / 易北爱乐厅 / 草原孤塔 / 黑曜白</div></div>
             <button id="btn-theme" class="mini-btn" style="min-width:104px">默认深空</button>
           </div>
         </div>
       </div>
 
-      <div id="settings-page-about" class="settings-subpage hidden">
+      <div id="settings-page-about" class="settings-subpage hidden" data-motion-panel>
         <div class="settings-group">
           <div class="setting-row" data-settings-back style="cursor:pointer">
             <button class="mini-btn" data-i18n="settings.back">‹ 返回</button>
@@ -607,7 +609,7 @@
       <span data-i18n="nav.stats">统计</span>
     </button>
     <button data-view="view-settings" class="nav-btn">
-      <span class="nav-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-1.8 1.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5v.2h-2.5v-.2a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1-1.8-1.8.1-.1A1.7 1.7 0 0 0 8.1 15a1.7 1.7 0 0 0-1.5-1H6v-2.5h.2a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1 1.8-1.8.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.5v-.2h2.5v.2a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1 1.8 1.8-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.5 1h.2V14h-.2a1.7 1.7 0 0 0-1.5 1Z"/></svg></span>
+      <span class="nav-ico"><svg class="settings-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.09a2 2 0 0 1 1 1.73v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.73l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"/><circle cx="12" cy="12" r="3"/></svg></span>
       <span data-i18n="nav.settings">设置</span>
     </button>
   </nav>
@@ -975,6 +977,7 @@
         'stats.llmTime': '模型耗时', 'stats.minutes': ' 分钟', 'stats.outputCache': '输出 / 缓存读',
         'stats.ctxPressure': '上下文压力', 'stats.permission': '权限', 'stats.empty': '暂无统计数据',
         'goal.title': '目标', 'goal.pause': '暂停', 'goal.resume': '继续', 'goal.complete': '完成', 'goal.edit': '改目标', 'goal.clear': '清除',
+        'goal.collapse': '收起目标到侧边', 'goal.collapseShort': '收起', 'goal.expand': '展开目标', 'goal.collapsedHint': '仍在运行',
         'goal.none': '当前会话没有目标', 'goal.confirmClear': '清除当前目标？(不会删除会话)', 'goal.confirmComplete': '将目标标记为完成？',
         'goal.actionFailed': '目标操作失败', 'goal.actionSubmitted': '目标操作已提交',
         'goal.cannotEmpty': '目标不能为空', 'goal.updateFailed': '更新失败', 'goal.updated': '目标已更新',
@@ -1087,8 +1090,8 @@
         'settings.toolsTitle': '显示工具调用', 'settings.toolsDesc': '关闭后隐藏 🔧/📦 工具调用与结果',
         'settings.mobileEnterTitle': '手机回车行为', 'settings.mobileEnterDesc': '选择手机端按 Enter 时换行或直接发送', 'settings.mobileEnterNewline': '回车换行', 'settings.mobileEnterSend': '回车发送',
         'settings.langTitle': '语言 / Language', 'settings.langDesc': '界面语言，跟随系统或手动切换',
-        'settings.themeTitle': '皮肤', 'settings.themeDesc': '默认深空 / 落日 / 易北爱乐厅 / 草原孤塔',
-        'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔',
+        'settings.themeTitle': '皮肤', 'settings.themeDesc': '默认深空 / 落日 / 易北爱乐厅 / 草原孤塔 / 黑曜白',
+        'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔', 'theme.mono': '黑曜白',
         'theme.panelTitle': '选择配色', 'theme.close': '关闭',
         'settings.tokenTitle': '访问令牌', 'settings.change': '更换',
         'settings.hostTitle': 'DSH 状态', 'settings.hostProbing': '探测中…', 'settings.probe': '探测', 'settings.probeFailed': '探测失败',
@@ -1204,6 +1207,7 @@
         'stats.llmTime': 'LLM time', 'stats.minutes': ' min', 'stats.outputCache': 'Output / cache read',
         'stats.ctxPressure': 'Context pressure', 'stats.permission': 'Permission', 'stats.empty': 'No stats yet',
         'goal.title': 'Goal', 'goal.pause': 'Pause', 'goal.resume': 'Resume', 'goal.complete': 'Complete', 'goal.edit': 'Edit goal', 'goal.clear': 'Clear',
+        'goal.collapse': 'Collapse goal to the side', 'goal.collapseShort': 'Collapse', 'goal.expand': 'Expand goal', 'goal.collapsedHint': 'Still running',
         'goal.none': 'This session has no goal', 'goal.confirmClear': 'Clear the current goal? (the session stays)', 'goal.confirmComplete': 'Mark the goal as completed?',
         'goal.actionFailed': 'Goal action failed', 'goal.actionSubmitted': 'Goal action submitted',
         'goal.cannotEmpty': 'Goal cannot be empty', 'goal.updateFailed': 'Update failed', 'goal.updated': 'Goal updated',
@@ -1316,8 +1320,8 @@
         'settings.toolsTitle': 'Show tool calls', 'settings.toolsDesc': 'Hide 🔧/📦 tool calls and results when off',
         'settings.mobileEnterTitle': 'Mobile Enter behavior', 'settings.mobileEnterDesc': 'Choose whether Enter inserts a newline or sends', 'settings.mobileEnterNewline': 'Enter = newline', 'settings.mobileEnterSend': 'Enter = send',
         'settings.langTitle': 'Language / 语言', 'settings.langDesc': 'UI language, follows system or switch manually',
-        'settings.themeTitle': 'Theme', 'settings.themeDesc': 'Default deep space / Sunset / Elbphilharmonie / Prairie Tower',
-        'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower',
+        'settings.themeTitle': 'Theme', 'settings.themeDesc': 'Deep Space / Sunset / Elbphilharmonie / Prairie Tower / Monochrome',
+        'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower', 'theme.mono': 'Monochrome',
         'theme.panelTitle': 'Choose theme', 'theme.close': 'Close',
         'settings.tokenTitle': 'Access token', 'settings.change': 'Change',
         'settings.hostTitle': 'DSH status', 'settings.hostProbing': 'Probing…', 'settings.probe': 'Probe', 'settings.probeFailed': 'Probe failed',