dsh-remote-plugin 0.6.18 → 0.6.19

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)
@@ -1738,15 +1757,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 +1783,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
@@ -2719,10 +2755,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 +2876,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">
@@ -276,27 +276,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 +336,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 +363,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 +386,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 +415,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 +452,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 +496,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 +505,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 +607,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 +975,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 +1088,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 +1205,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 +1318,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',

package/public/motion.js

@@ -7,8 +7,21 @@
 
   const reduceQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)')
   let reduced = !!reduceQuery?.matches
-  reduceQuery?.addEventListener?.('change', event => { reduced = !!event.matches })
-  const activePulses = new WeakSet()
+  const activePulses = new Set()
+  const recentRuns = new WeakMap()
+
+  reduceQuery?.addEventListener?.('change', event => {
+    reduced = !!event.matches
+    if (!reduced) return
+    const animated = document.querySelectorAll('.view, .ds-view, [data-motion-view], .modal, .ds-modal, .sheet, .ds-drawer, [data-motion-panel]')
+    gsap.killTweensOf(animated)
+    clear(animated)
+    for (const node of activePulses) {
+      gsap.killTweensOf(node)
+      clear(node)
+    }
+    activePulses.clear()
+  })
 
   function clear(targets) {
     gsap.set(targets, { clearProps: 'opacity,visibility,transform,willChange' })
@@ -22,17 +35,32 @@
     return items.map(motionKey).join('|')
   }
 
+  function startedRecently(node, threshold = 48) {
+    const now = window.performance?.now?.() || Date.now()
+    const previous = recentRuns.get(node) || 0
+    recentRuns.set(node, now)
+    return previous > 0 && now - previous < threshold
+  }
+
   function view(view) {
-    if (!view) return
-    const children = [...view.children].filter(child => !child.classList.contains('hidden')).slice(0, 6)
-    gsap.killTweensOf([view, ...children])
+    if (!view || startedRecently(view)) return
+    const children = [...view.children].filter(child => !child.classList.contains('hidden')).slice(0, 8)
+    const targets = children.length ? children : [view]
+    gsap.killTweensOf([view, ...targets])
+    gsap.set(view, { autoAlpha: 1, clearProps: 'transform' })
     if (reduced) {
-      clear([view, ...children])
+      clear([view, ...targets])
       return
     }
-    const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
-    tl.fromTo(view, { autoAlpha: 0, y: 8 }, { autoAlpha: 1, y: 0, duration: 0.22, clearProps: 'transform' })
-      .fromTo(children, { autoAlpha: 0, y: 6 }, { autoAlpha: 1, y: 0, duration: 0.16, stagger: 0.025, clearProps: 'transform' }, '<0.04')
+    gsap.fromTo(targets, { opacity: 0.72, y: 8 }, {
+      opacity: 1,
+      y: 0,
+      duration: 0.24,
+      ease: 'power2.out',
+      stagger: { each: 0.035, from: 'start' },
+      overwrite: 'auto',
+      clearProps: 'opacity,visibility,transform,willChange'
+    })
   }
 
   function list(container, selector) {
@@ -420,8 +448,57 @@
     registry.set(selector, state)
   }
 
+  function panel(node) {
+    if (!node || startedRecently(node)) return
+    gsap.killTweensOf(node)
+    if (reduced) return clear(node)
+    gsap.fromTo(node, { autoAlpha: 0, y: 8 }, {
+      autoAlpha: 1,
+      y: 0,
+      duration: 0.2,
+      ease: 'power2.out',
+      overwrite: 'auto',
+      clearProps: 'opacity,visibility,transform,willChange'
+    })
+  }
+
+  function popover(node) {
+    if (!node || startedRecently(node)) return
+    const opensUpward = !!(node.closest('.composer-wrap, .ds-composer') || node.style.bottom)
+    gsap.killTweensOf(node)
+    if (reduced) return clear(node)
+    gsap.fromTo(node, {
+      autoAlpha: 0,
+      y: opensUpward ? 7 : -7,
+      scale: 0.985,
+      transformOrigin: opensUpward ? 'bottom left' : 'top right'
+    }, {
+      autoAlpha: 1,
+      y: 0,
+      scale: 1,
+      duration: 0.18,
+      ease: 'power2.out',
+      overwrite: 'auto',
+      clearProps: 'opacity,visibility,transform,transformOrigin,willChange'
+    })
+  }
+
+  function activate(node) {
+    if (!node || reduced || startedRecently(node, 90)) return
+    const target = node.querySelector('.nav-home-orb, .nav-ico, .ds-nav-ico') || node
+    gsap.killTweensOf(target)
+    gsap.fromTo(target, { scale: 0.9, y: 2 }, {
+      scale: 1,
+      y: 0,
+      duration: 0.22,
+      ease: 'power2.out',
+      overwrite: 'auto',
+      clearProps: 'transform,willChange'
+    })
+  }
+
   function overlay(node) {
-    if (!node) return
+    if (!node || startedRecently(node)) return
     const card = node.querySelector('.modal-card, .ds-modal-card, .sheet, .ds-drawer') || node
     gsap.killTweensOf([node, card])
     if (reduced) {
@@ -430,11 +507,18 @@
     }
     const isSideDrawer = card.classList.contains('ds-drawer')
     const isSheet = card.classList.contains('sheet')
+    if (card === node) {
+      gsap.fromTo(card,
+        { autoAlpha: 0, x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
+        { autoAlpha: 1, x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, ease: 'power3.out', overwrite: 'auto', clearProps: 'opacity,visibility,transform,willChange' }
+      )
+      return
+    }
     const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
-    tl.fromTo(node, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.16 })
+    tl.fromTo(node, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.14, overwrite: 'auto', clearProps: 'opacity,visibility' })
       .fromTo(card,
-        { autoAlpha: 0, x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
-        { autoAlpha: 1, x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, clearProps: 'transform' },
+        { x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
+        { x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, overwrite: 'auto', clearProps: 'transform,willChange' },
         '<'
       )
   }
@@ -449,10 +533,10 @@
     }
   }
 
-  window.DshMotion = { gsap, reduced: () => reduced, view, list, relayout, bindLongPressReorder, overlay, pulse }
+  window.DshMotion = { gsap, reduced: () => reduced, view, list, relayout, bindLongPressReorder, overlay, panel, popover, activate, pulse }
 
   document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.view:not(.hidden), .ds-view:not(.hidden)').forEach(node => view(node))
+    document.querySelectorAll('.view:not(.hidden), .ds-view:not(.hidden), [data-motion-view]:not(.hidden)').forEach(node => view(node))
   }, { once: true })
 
   const observer = new MutationObserver(records => {
@@ -460,9 +544,13 @@
       const node = record.target
       if (!(node instanceof HTMLElement)) continue
       const becameVisible = record.oldValue?.split(/\s+/).includes('hidden') && !node.classList.contains('hidden')
+      const becameActive = !record.oldValue?.split(/\s+/).includes('active') && node.classList.contains('active')
+      if (becameActive && node.matches('.nav-btn, .ds-nav-item')) activate(node)
       if (!becameVisible) continue
-      if (node.matches('.view, .ds-view')) view(node)
-      else if (node.matches('.modal, .ds-modal, .sheet, .ds-drawer')) overlay(node)
+      if (node.matches('.view, .ds-view, [data-motion-view]')) view(node)
+      else if (node.matches('.modal, .ds-modal, .sheet-backdrop, .sheet, .ds-drawer')) overlay(node)
+      else if (node.matches('.composer-menu, .ds-group-menu, .ds-feedback-menu, .fb-menu')) popover(node)
+      else if (node.matches('[data-motion-panel], .wb-panel, .ds-wb-panel, .doctor-body, .settings-subpage')) panel(node)
     }
   })
   observer.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['class'], attributeOldValue: true })

package/public/plugin.html

@@ -4,19 +4,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <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">
   <style>
     :root { color-scheme: dark; }
     html[data-theme="light"], html[data-theme="neutral"] { color-scheme: light; }
-    * { box-sizing: border-box; }
+    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
     body {
       margin: 0; min-width: 280px; color: var(--dsr-text); background:
         radial-gradient(420px 240px at 100% 0, var(--dsr-accent-soft), transparent 72%),
         var(--dsr-bg); font: 13px/1.45 system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
     }
     button, a { font: inherit; }
-    button { cursor: pointer; }
+    button { cursor: pointer; touch-action: manipulation; }
     .plugin-shell { min-height: 100vh; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
     .plugin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
     .plugin-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
@@ -41,8 +41,9 @@
     .plugin-primary:hover, .plugin-primary:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
     .plugin-primary:disabled { cursor: wait; opacity: .65; transform: none; }
     .plugin-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
-    .plugin-action { min-height: 42px; padding: 7px 5px; border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-panel); color: var(--dsr-text); font-size: 11px; }
+    .plugin-action { min-height: 42px; padding: 7px 5px; border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-panel); color: var(--dsr-text); font-size: 11px; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
     .plugin-action:hover, .plugin-action:focus-visible { border-color: var(--dsr-accent-line); background: var(--dsr-accent-soft); }
+    .plugin-action:active { transform: scale(.98); }
     .plugin-action svg { display: block; width: 17px; height: 17px; margin: 0 auto 3px; color: var(--dsr-accent-strong); }
     .plugin-usage { padding: 14px; border: 1px solid var(--dsr-line); border-radius: 16px; background: linear-gradient(145deg, var(--dsr-panel), var(--dsr-bg-2)); }
     .plugin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--dsr-text); font-size: 12px; font-weight: 750; }
@@ -87,7 +88,7 @@
   </style>
 </head>
 <body>
-  <main class="plugin-shell">
+  <main class="plugin-shell" data-motion-view>
     <header class="plugin-head">
       <div class="plugin-brand">
         <span class="plugin-brand-mark" aria-hidden="true"></span>