dsh-remote-plugin 0.6.18 → 0.6.20

package/index.mjs

@@ -6,7 +6,7 @@
  * 浏览器侧入口由 client half 注册在 DSH 原生侧边栏(见 client.js)。
  */
 import { execFileSync, spawn } from 'node:child_process'
-import { appendFileSync, createReadStream, existsSync, mkdirSync, openSync, readFileSync, writeFileSync } from 'node:fs'
+import { appendFileSync, chmodSync, createReadStream, existsSync, mkdirSync, openSync, readFileSync, writeFileSync } from 'node:fs'
 import { stat } from 'node:fs/promises'
 import net from 'node:net'
 import { homedir, hostname, networkInterfaces } from 'node:os'
@@ -14,7 +14,7 @@ import { dirname, extname, normalize, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 export const name = 'dsh-remote'
-export const inject = ['webServer', 'commands', 'agents']
+export const inject = ['webServer', 'commands', 'agents', 'connection']
 
 const MOUNT = '/remote'
 const PUBLIC_DIR = fileURLToPath(new URL('./public/', import.meta.url))
@@ -68,6 +68,42 @@ try {
 
 // DSH 实际监听地址由 apply 时从 webServer 服务读取
 let dshListen = { host: '127.0.0.1', port: 3080 }
+let dshConnection = null
+
+function dshUpstreamCookieFile() {
+  return process.env.DSH_REMOTE_DSH_COOKIE_FILE || `${homedir()}/.dsh-remote/dsh-upstream.cookie`
+}
+
+/**
+ * DSH 0.1.2-alpha.1 起，Host RPC 与 WebSocket 都要求浏览器会话 Cookie。
+ * 新版 connection 服务可把仅进程内可见的启动令牌兑换为 Cookie；旧版没有
+ * authenticatedUrl，直接跳过即可。文件只让同一用户的独立网关读取。
+ */
+async function refreshDshUpstreamCookie() {
+  if (typeof dshConnection?.authenticatedUrl !== 'function') return false
+  const upstream = `http://${dshListen.host}:${dshListen.port}`
+  try {
+    const loginUrl = dshConnection.authenticatedUrl(upstream)
+    const response = await fetch(loginUrl, {
+      redirect: 'manual',
+      signal: AbortSignal.timeout(2500),
+    })
+    const setCookie = response.headers.get('set-cookie') || ''
+    const cookie = setCookie.split(';', 1)[0].trim()
+    if (response.status !== 303 || !cookie.includes('=') || cookie.length > 4096 || /[\0\r\n]/.test(cookie)) {
+      throw new Error(`认证交换返回 HTTP ${response.status}`)
+    }
+    const file = dshUpstreamCookieFile()
+    mkdirSync(dirname(file), { recursive: true })
+    writeFileSync(file, cookie + '\n', { mode: 0o600 })
+    chmodSync(file, 0o600)
+    return true
+  } catch (e) {
+    // 禁止记录带启动令牌的 URL 或 Cookie，只保留不含凭据的错误摘要。
+    logGateway('刷新 DSH 上游认证失败: ' + (e?.message || String(e)))
+    return false
+  }
+}
 
 function lanIPs() {
   const out = [...configuredAdvertisedHosts()]
@@ -169,6 +205,7 @@ function runExit(cmd, args) {
 
 const GATEWAY_ENV_KEYS = [
   'TOKEN', 'TOKEN_FILE', 'DSH_REMOTE_TOKEN', 'DSH_REMOTE_DEVICE_KEYS', 'DSH_REMOTE_FS_ROOT', 'DSH_REMOTE_FS_WORKSPACE_CACHE_MS', 'DSH_REMOTE_FS_MAX_UPLOAD',
+  'DSH_REMOTE_DSH_COOKIE_FILE',
   'DSH_REMOTE_NOTES', 'DSH_REMOTE_WORKBENCH', 'DSH_REMOTE_ADVERTISE_HOSTS', 'DSH_REMOTE_DSH_SERVICE', 'DSH_REMOTE_SYSTEMCTL', 'DSH_REMOTE_DSH_CONTROL_MODE',
   'DSH_REMOTE_DSH_CONTROL_TIMEOUT_MS', 'DSH_REMOTE_DSH_CONTROL_POLL_MS', 'DSH_REMOTE_FEEDBACK_URL',
   'UPDATE_CHECK_URL', 'UPDATE_INTERVAL_MS', 'UPDATE_PROXY', 'DSH_HEALTH_PATH',
@@ -363,6 +400,7 @@ function ensureGateway() {
   if (ensurePromise) return ensurePromise
   ensurePromise = (async () => {
     try {
+      await refreshDshUpstreamCookie()
       const health = await gatewayRunning()
       if (!health.running) {
         const out = await startGateway()
@@ -740,7 +778,9 @@ async function serveStatic(req, res, ctx) {
         commandNames = ['list-error: ' + (e?.message || String(e))]
       }
       const signal = AbortSignal.timeout(30000)
-      const result = await ctx.commands.execute(agent, line, signal)
+      const result = ctx.commands.execute.length === 3
+        ? await ctx.commands.execute(agent, line, signal)
+        : await ctx.commands.execute(agent, line, [], signal)
       sendJson(res, 200, { ok: true, executed: result !== undefined, debug: { resolvePath, commandNames } })
     } catch (e) {
       sendJson(res, 200, { ok: false, message: e?.message || String(e) })
@@ -783,6 +823,7 @@ async function serveStatic(req, res, ctx) {
 
 export function apply(ctx) {
   dshListen = { host: ctx.webServer.host, port: ctx.webServer.port }
+  dshConnection = ctx.connection
   ctx.effect(() => ctx.webServer.register({
     kind: 'prefix',
     path: MOUNT,
@@ -794,4 +835,10 @@ export function apply(ctx) {
   })
   // DSH 启动/重启后自愈: 用户没关过网关就自动拉起(默认开, DSH_REMOTE_AUTOSTART=0 关闭)
   void ensureGateway()
+  // apply 可能早于 Web 监听完成；延迟再交换一次新版 DSH 的会话 Cookie。
+  ctx.effect(() => {
+    const timer = setTimeout(() => { void ensureGateway() }, 5000)
+    timer.unref?.()
+    return () => clearTimeout(timer)
+  }, 'dsh-remote: refresh upstream authentication')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-plugin",
-  "version": "0.6.18",
+  "version": "0.6.20",
   "description": "DSH Remote 官方 bundle 插件：DSH 左侧原生边栏入口 + 右侧抽屉内嵌管理控制台；内置网关随 DSH 自动启停(systemd 独立单元)，抽屉直显令牌与设备监控；网关提供 /fs/* 文件传输端点(列表/断点下载/上传)，配合 Android App 远程操控会话/审批/提问/goal 与文件互传(多服务器测速切换、聊天记录离线缓存)。",
   "type": "module",
   "main": "./index.mjs",

package/public/admin.html

@@ -3,9 +3,9 @@
 <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">
   <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="../styles.css">
   <style>
     .admin-wrap { max-width: 1180px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 40px; }
@@ -87,8 +87,8 @@
     .device-key-toggle-actions { display:flex; align-items:center; gap:8px; flex:none; }
     .device-key-switch { position:relative; width:42px; height:24px; flex:none; }
     .device-key-switch input { position:absolute; opacity:0; pointer-events:none; }
-    .device-key-switch span { position:absolute; inset:0; border:1px solid var(--dsr-line); border-radius:999px; background:var(--dsr-bg-2); cursor:pointer; transition:.18s ease; }
-    .device-key-switch span::after { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:var(--dsr-muted); transition:.18s ease; }
+    .device-key-switch span { position:absolute; inset:0; border:1px solid var(--dsr-line); border-radius:999px; background:var(--dsr-bg-2); cursor:pointer; transition:background-color .18s ease,border-color .18s ease; }
+    .device-key-switch span::after { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:var(--dsr-muted); transition:transform .18s ease,background-color .18s ease; }
     .device-key-switch input:checked + span { border-color:var(--dsr-accent-line); background:var(--dsr-accent-soft); }
     .device-key-switch input:checked + span::after { transform:translateX(18px); background:var(--dsr-accent-strong); }
     .device-key-switch input:focus-visible + span { outline:2px solid var(--dsr-accent-strong); outline-offset:2px; }
@@ -126,8 +126,8 @@
     .host-ip-use { color: var(--dsr-muted); }
     .host-ip-switch { position: relative; display: inline-block; width: 38px; height: 22px; vertical-align: middle; }
     .host-ip-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
-    .host-ip-switch span { position: absolute; inset: 0; border: 1px solid var(--dsr-line); border-radius: 999px; background: var(--dsr-bg-2); cursor: pointer; transition: .18s ease; }
-    .host-ip-switch span::after { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: var(--dsr-muted); transition: .18s ease; }
+    .host-ip-switch span { position: absolute; inset: 0; border: 1px solid var(--dsr-line); border-radius: 999px; background: var(--dsr-bg-2); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
+    .host-ip-switch span::after { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: var(--dsr-muted); transition: transform .18s ease, background-color .18s ease; }
     .host-ip-switch input:checked + span { border-color: var(--dsr-accent-line); background: var(--dsr-accent-soft); }
     .host-ip-switch input:checked + span::after { transform: translateX(16px); background: var(--dsr-accent-strong); }
     .host-ip-switch input:focus-visible + span { outline: 2px solid var(--dsr-accent-strong); outline-offset: 2px; }
@@ -186,7 +186,6 @@
       width: 248px; background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 14px;
       box-shadow: 0 12px 34px var(--dsr-shadow); padding: 6px;
       display: flex; flex-direction: column; gap: 2px;
-      animation: fb-in .18s ease;
     }
     .fb-item {
       min-height: 44px; display: flex; align-items: center; gap: 10px;
@@ -204,7 +203,6 @@
     .fb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
     .fb-name { font-weight: 600; }
     .fb-desc { font-size: 11px; color: var(--dsr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    @keyframes fb-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: translateY(0) } }
     /* 窄屏压缩顶栏: 图标化文字按钮, 保证全部按钮完整可见 */
     @media (max-width: 900px) {
       .gh-label, .t-label { display: none; }
@@ -331,8 +329,7 @@
     @media (max-width: 900px) {
       .admin-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
       .admin-title .left { min-width: 0; }
-      .admin-title .right { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; overflow-x: auto; scrollbar-width: none; }
-      .admin-title .right::-webkit-scrollbar { display: none; }
+      .admin-title .right { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; flex-wrap: wrap; overflow: visible; }
     }
     @media (max-width: 440px) {
       .admin-title h1 { display: block; min-width: 0; overflow: visible; font-size: 18px; }
@@ -381,12 +378,12 @@
       </div>
     </div>
 
-    <div id="login-view" class="login-card hidden">
-      <input id="token-input" type="password" placeholder="输入网关访问令牌" autocomplete="off" data-i18n-placeholder="tokenPlaceholder">
+    <div id="login-view" class="login-card hidden" data-motion-view>
+      <input id="token-input" name="gateway-token" type="password" placeholder="输入网关访问令牌" autocomplete="off" aria-label="网关访问令牌" data-i18n-placeholder="tokenPlaceholder" data-i18n-aria="tokenPlaceholder">
       <button id="btn-login" class="mini-btn" data-i18n="enter">进入</button>
     </div>
 
-    <div id="main-view" class="hidden">
+    <div id="main-view" class="hidden" data-motion-view>
       <section id="admin-hero" class="admin-hero" aria-live="polite">
         <div class="admin-hero-copy">
           <div class="admin-eyebrow" data-i18n="hero.eyebrow">GATEWAY CONTROL</div>
@@ -455,8 +452,8 @@
       </div>
 
       <div id="gateway-port-row" class="gateway-port-row hidden">
-        <label data-i18n="gatewayPort">网关端口</label>
-        <input id="gateway-port-input" type="number" min="1" max="65535" inputmode="numeric" placeholder="8787">
+        <label for="gateway-port-input" data-i18n="gatewayPort">网关端口</label>
+        <input id="gateway-port-input" name="gateway-port" type="number" min="1" max="65535" inputmode="numeric" autocomplete="off" placeholder="8787">
         <span id="gateway-port-current" class="muted">—</span>
         <button id="btn-save-port" class="mini-btn" data-i18n="savePort">保存</button>
       </div>
@@ -560,7 +557,7 @@
         'doctor.realtime': '实时消息通道', 'doctor.realtimePass': 'mux 与 host 通道均已连接', 'doctor.realtimeFail': '实时通道未全部建立；可先使用轮询，检查 DSH 后会自动恢复',
         'doctor.start': '启动', 'doctor.showQr': '显示二维码', 'doctor.copyAddress': '复制地址', 'doctor.copyCommand': '复制命令',
         'doctor.reportCopied': '诊断报告已复制', 'doctor.commandCopied': '防火墙命令已复制，请确认网络范围后手动执行', 'doctor.addressCopied': '服务器地址已复制',
-        'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔',
+        'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔', 'theme.mono': '黑曜白',
         'theme.panelTitle': '选择配色', 'theme.close': '关闭',
         'repo': '仓库',
         'donateTitle': '赞赏支持', 'donateThanks': '感谢你的支持 ☕',
@@ -670,7 +667,7 @@
         'doctor.realtime': 'Realtime channels', 'doctor.realtimePass': 'Both mux and host channels are connected', 'doctor.realtimeFail': 'Realtime channels are incomplete. Polling remains available and recovery is automatic.',
         'doctor.start': 'Start', 'doctor.showQr': 'Show QR', 'doctor.copyAddress': 'Copy address', 'doctor.copyCommand': 'Copy command',
         'doctor.reportCopied': 'Diagnostic report copied', 'doctor.commandCopied': 'Firewall command copied. Review the network scope before running it.', 'doctor.addressCopied': 'Server address copied',
-        'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower',
+        'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower', 'theme.mono': 'Monochrome',
         'theme.panelTitle': 'Choose theme', 'theme.close': 'Close',
         'repo': 'Repo',
         'donateTitle': 'Support', 'donateThanks': 'Thanks for your support ☕',
@@ -767,6 +764,8 @@
   <script src="../qrcode.min.js"></script>
   <script src="../i18n.js"></script>
   <script src="../theme.js"></script>
+  <script src="../vendor/gsap/gsap.min.js"></script>
+  <script src="../motion.js"></script>
   <script src="../admin.js"></script>
 </body>
 </html>

package/public/admin.js

@@ -935,10 +935,11 @@ function renderLangBtn() {
 }
 
 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 renderThemeBtn() {
@@ -957,7 +958,7 @@ function renderThemeOptions() {
   if (!box) return
   const cur = window.DSHTheme.get()
   box.innerHTML = THEME_META.map(m => `
-    <button class="theme-option ${m.id === cur ? 'current' : ''}" data-theme="${m.id}" title="${t('theme.' + m.id)}">
+    <button type="button" class="theme-option ${m.id === cur ? 'current' : ''}" data-theme="${m.id}" aria-pressed="${m.id === cur}" title="${t('theme.' + m.id)}">
       <span class="theme-swatches">${m.sw.map(c => `<i style="background:${c}"></i>`).join('')}</span>
       <span class="theme-name">${t('theme.' + m.id)}</span>
       <span class="theme-check">${m.id === cur ? '✓' : ''}</span>

package/public/app.js

@@ -1673,6 +1673,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 updatePendingBadge() {
   const pending = state.approvals.length + state.questions.length
@@ -2090,6 +2108,7 @@ async function openSession(id) {
   renderSessionTitle(); renderSessionSub(); updateCancelBtn(); updateSessionStatus()
   $('history').innerHTML = '<div class="empty">' + t('history.loading') + '</div>'
   renderQueue()
+  renderSessionPending()
   restoreCachedHistory()
   await loadHistory(true)
   renderSessionCards()
@@ -2122,6 +2141,7 @@ async function closeSession() {
     const discard = await shouldDiscardEmptySession(sessionId)
     if (state.current !== sessionId) return
     state.current = null
+    renderSessionPending()
     if (discard) removeLocalSessionRecord(sessionId)
     setComposerFullscreen(false)
     clearComposerImages()
@@ -2684,15 +2704,23 @@ async function renderSessionCards() {
   let html = ''
 
   if (goal && !isGoalTerminal(goal)) {
-    html += `<div class="card"><div class="card-title">${t('goal.title')}</div>
-      <div class="goal-obj">${esc(goal.objective || '')}</div>
-      <div class="goal-phase">phase: ${esc(goal.phase || '?')} · revision ${goal.revision ?? '?'}</div>
-      <div class="goal-actions">
-        ${goal.phase === 'active' ? '<button class="mini-btn" data-goal="pause">' + t('goal.pause') + '</button>' : '<button class="mini-btn" data-goal="resume">' + t('goal.resume') + '</button>'}
-        <button class="mini-btn" data-goal="complete">${t('goal.complete')}</button>
-        <button class="mini-btn" data-goal="edit">${t('goal.edit')}</button>
-        <button class="mini-btn" data-goal="clear">${t('goal.clear')}</button>
-      </div></div>`
+    const collapsed = isGoalCollapsed(sessionId, goal)
+    html += `<div class="goal-disclosure${collapsed ? ' is-collapsed' : ''}">
+      <div id="goal-panel-mobile" class="card goal-card${collapsed ? ' hidden' : ''}">
+        <div class="goal-card-head"><div class="card-title">${t('goal.title')}</div>
+          <button type="button" class="goal-collapse-btn" data-goal-collapse="1" aria-expanded="true" aria-controls="goal-panel-mobile" title="${esc(t('goal.collapse'))}"><span aria-hidden="true">›</span>${t('goal.collapseShort')}</button>
+        </div>
+        <div class="goal-obj">${esc(goal.objective || '')}</div>
+        <div class="goal-phase">phase: ${esc(goal.phase || '?')} · revision ${goal.revision ?? '?'}</div>
+        <div class="goal-actions">
+          ${goal.phase === 'active' ? '<button class="mini-btn" data-goal="pause">' + t('goal.pause') + '</button>' : '<button class="mini-btn" data-goal="resume">' + t('goal.resume') + '</button>'}
+          <button class="mini-btn" data-goal="complete">${t('goal.complete')}</button>
+          <button class="mini-btn" data-goal="edit">${t('goal.edit')}</button>
+          <button class="mini-btn" data-goal="clear">${t('goal.clear')}</button>
+        </div>
+      </div>
+      <button type="button" class="goal-side-tab${collapsed ? '' : ' hidden'}" data-goal-collapse="0" aria-expanded="false" aria-controls="goal-panel-mobile" 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="card"><div class="card-title">${t('todos.title')}</div>${todos.items.map(t =>
@@ -2702,6 +2730,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 })
@@ -3294,7 +3331,7 @@ function renderOverview() {
   $('overview-attention-list').innerHTML = pending.length ? pending.slice(0, 3).map(({ kind, item }) => {
     const title = titleOf(state.byId.get(item.sessionId))
     if (kind === 'approval') return `<div class="overview-attention-item" data-overview-approval="${esc(item.approvalId)}">
-      <span class="overview-item-mark">⌁</span><span class="overview-item-copy"><span class="overview-item-title">${esc(item.toolName || t('tool.default'))}</span><span class="overview-item-desc">${esc(item.reason || t('pending.noReason'))} · ${esc(title)}</span></span>
+      <span class="overview-item-mark">⌁</span><span class="overview-item-copy"><span class="overview-item-title">${esc(item.toolName || t('tool.default'))}</span><span class="overview-item-desc">${esc(approvalDetail(item))} · ${esc(title)}</span></span>
       <span class="overview-item-actions"><button type="button" class="mini-btn" data-overview-approve="1">${t('pending.allow')}</button><button type="button" class="mini-btn" data-overview-approve="0">${t('pending.reject')}</button></span>
     </div>`
     return `<button type="button" class="overview-attention-item question" data-overview-question="${esc(item.rpcId)}">
@@ -3359,7 +3396,7 @@ function renderPending() {
       const title = titleOf(state.byId.get(a.sessionId))
       return `<div class="pending-card approval" data-approval="${esc(a.approvalId)}">
         <div class="pc-title">${esc(t('pending.approvalTitle', { tool: a.toolName || t('tool.default') }))}</div>
-        <div class="pc-desc">${esc(a.reason || t('pending.noReason'))}</div>
+        <div class="pc-desc">${esc(approvalDetail(a))}</div>
         <div class="pc-session">${esc(title)}</div>
         <div class="goal-actions"><button class="mini-btn" data-approve="1">${t('pending.allow')}</button><button class="mini-btn" data-approve="0">${t('pending.reject')}</button></div>
       </div>`
@@ -3379,10 +3416,48 @@ function renderPending() {
   })
   list.querySelectorAll('[data-question]').forEach(btn =>
     btn.addEventListener('click', () => openQuestionModal(state.questions.find(q => q.rpcId === btn.dataset.question))))
+  renderSessionPending()
   updatePendingBadge()
   renderOverview()
 }
 
+function approvalDetail(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('pending.noReason')
+}
+
+function renderSessionPending() {
+  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="session-pending-head"><span>${esc(t('overview.attention'))}</span><span>${esc(t('pending.count', { n: items.length }))}</span></div><div class="session-pending-list">${items.map(({ kind, item }) => {
+    if (kind === 'approval') return `<article class="pending-card approval" data-session-approval="${esc(item.approvalId)}">
+      <div class="pc-title">${esc(item.toolName || t('tool.default'))}</div>
+      <div class="pc-desc">${esc(approvalDetail(item))}</div>
+      <div class="goal-actions"><button type="button" class="mini-btn" data-session-approve="1">${t('pending.allow')}</button><button type="button" class="mini-btn" data-session-approve="0">${t('pending.reject')}</button></div>
+    </article>`
+    return `<article class="pending-card question" data-session-question="${esc(item.rpcId)}">
+      <div class="pc-title">❓ ${esc((item.questions || []).map(question => question.question).filter(Boolean).join(' / ') || t('notify.questionTitle'))}</div>
+      <div class="goal-actions"><button type="button" class="mini-btn" data-session-answer>${t('pending.answer')}</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)))
+  })
+}
+
 async function approveApproval(id, allow) {
   const a = state.approvals.find(x => x.approvalId === id)
   if (!a) return
@@ -5728,6 +5803,8 @@ function showView(id) {
   // 离开会话页必须清掉 in-session, 否则其他页面顶栏被 body 样式隐藏
   document.body.classList.toggle('in-session', id === 'view-session')
   document.querySelectorAll('.nav-btn').forEach(b => b.classList.toggle('active', b.dataset.view === id))
+  // 主页已有上下文明确的刷新按钮，避免顶栏出现第二个同义入口。
+  $('btn-refresh')?.classList.toggle('hidden', id === 'view-activity')
   window.DshMotion?.view($(id))
   window.scrollTo(0, 0)
   if (id === 'view-files' && !state.fs.loaded) {
@@ -6411,10 +6488,11 @@ function renderLangBtn() {
 }
 
 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 renderThemeBtn() {
@@ -6427,7 +6505,7 @@ function renderThemeOptions() {
   if (!box) return
   const cur = window.DSHTheme.get()
   box.innerHTML = THEME_META.map(m => `
-    <button class="theme-option ${m.id === cur ? 'current' : ''}" data-theme="${m.id}" title="${t('theme.' + m.id)}">
+    <button type="button" class="theme-option ${m.id === cur ? 'current' : ''}" data-theme="${m.id}" aria-pressed="${m.id === cur}" title="${t('theme.' + m.id)}">
       <span class="theme-swatches">${m.sw.map(c => `<i style="background:${c}"></i>`).join('')}</span>
       <span class="theme-name">${t('theme.' + m.id)}</span>
       <span class="theme-check">${m.id === cur ? '✓' : ''}</span>

package/public/desktop/desktop.css

@@ -8,6 +8,7 @@ html, body {
 .hidden { display: none !important; }
 .ds-app { position: fixed; inset: 0; display: flex; overflow: hidden; }
 .ds-sidebar { width: 280px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--dsr-line); background: linear-gradient(180deg, var(--dsr-panel), var(--dsr-bg)); box-shadow: 12px 0 34px var(--dsr-shadow); overflow: hidden; }
+.ds-sidebar-backdrop { display: none; }
 .ds-brand { display: flex; align-items: center; gap: 8px; padding: 17px 18px 12px; font-weight: 750; font-size: 15px; letter-spacing: .1px; }
 .ds-logo { color: var(--dsr-accent-strong); }
 .ds-brand-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -224,15 +225,15 @@ html.reorder-scroll-lock body { overscroll-behavior: none; }
 .ds-overview-attention-list, .ds-overview-session-list { display:flex; flex-direction:column; gap:8px; }
 .ds-overview-attention-item, .ds-overview-session-item { width:100%; min-width:0; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--dsr-line); border-radius:12px; background:var(--dsr-bg-2); color:var(--dsr-text); text-align:left; }
 button.ds-overview-attention-item, button.ds-overview-session-item { cursor:pointer; font:inherit; }
-.ds-overview-attention-item { border-left:3px solid var(--dsr-warning); }
+.ds-overview-attention-item { align-items:flex-start; border-left:3px solid var(--dsr-warning); }
 .ds-overview-attention-item.question { border-left-color:var(--dsr-accent-2); }
 .ds-overview-mark { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:var(--dsr-warning-soft); color:var(--dsr-warning); font-size:12px; }
 .ds-overview-attention-item.question .ds-overview-mark { background:var(--dsr-accent-2-soft); color:var(--dsr-accent-2); }
 .ds-overview-copy { flex:1; min-width:0; }
-.ds-overview-item-title, .ds-overview-item-desc { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.ds-overview-item-title, .ds-overview-item-desc { display:block; line-height:1.45; overflow-wrap:anywhere; word-break:break-word; }
 .ds-overview-item-title { font-size:12px; font-weight:650; }
-.ds-overview-item-desc { margin-top:3px; color:var(--dsr-muted); font-size:11px; }
-.ds-overview-actions { flex:0 0 auto; display:flex; gap:4px; }
+.ds-overview-item-desc { margin-top:3px; color:var(--dsr-muted); font-size:11px; white-space:normal; }
+.ds-overview-actions { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
 .ds-overview-actions .ds-btn { min-height:27px; padding:2px 8px; font-size:11px; }
 .ds-overview-actions .allow { background:var(--dsr-success-soft); border-color:var(--dsr-success-line); color:var(--dsr-success); }
 .ds-overview-actions .reject { background:var(--dsr-warning-soft); border-color:var(--dsr-warning-line); color:var(--dsr-warning); }
@@ -286,9 +287,37 @@ button.ds-overview-attention-item, button.ds-overview-session-item { cursor:poin
 .ds-presets-guide { padding: 2px 8px 10px; font-size: 11px; line-height: 1.5; }
 .ds-session-cards { flex: none; max-height: 220px; overflow-y: auto; padding: 10px 22px 0; display: flex; flex-direction: column; gap: 8px; }
 .ds-session-cards:empty { display: none; }
+.ds-session-pending { flex:none; margin:10px 22px 0; padding:10px; border:1px solid var(--dsr-warning-line); border-radius:13px; background:var(--dsr-warning-soft); }
+.ds-session-pending-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--dsr-text); font-size:12px; font-weight:750; }
+.ds-session-pending-list { display:flex; flex-direction:column; gap:8px; }
+.ds-session-pending .ds-notif-card { min-width:0; box-shadow:none; animation:none; }
+.ds-session-pending .ds-notif-title, .ds-session-pending .ds-notif-body { overflow-wrap:anywhere; word-break:break-word; }
 .ds-card { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 12px; padding: 10px 12px; }
 .ds-card-title { font-size: 11px; font-weight: 700; color: var(--dsr-muted); letter-spacing: .6px; margin-bottom: 6px; text-transform: uppercase; }
-.ds-goal-obj { font-size: 13px; line-height: 1.55; word-break: break-word; }
+.ds-goal-disclosure { width: 100%; min-width: 0; display: flex; justify-content: flex-end; }
+.ds-goal-disclosure .ds-goal-card { width: 100%; min-width: 0; }
+.ds-goal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
+.ds-goal-card-head .ds-card-title { min-width: 0; margin-bottom: 0; }
+.ds-goal-collapse-btn,
+.ds-goal-side-tab {
+  touch-action: manipulation; border: 1px solid var(--dsr-line); background: var(--dsr-bg-2); color: var(--dsr-muted);
+  font: inherit; cursor: pointer;
+}
+.ds-goal-collapse-btn { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 11.5px; }
+.ds-goal-collapse-btn > span { color: var(--dsr-accent-strong); font-size: 17px; line-height: 1; }
+.ds-goal-side-tab {
+  min-height: 42px; max-width: min(100%, 210px); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px;
+  border-right: 0; border-radius: 11px 0 0 11px; box-shadow: -5px 6px 18px var(--dsr-shadow); color: var(--dsr-text); font-size: 12px; font-weight: 700;
+}
+.ds-goal-side-tab > span:first-child { color: var(--dsr-accent-strong); font-size: 19px; line-height: 1; }
+.ds-goal-side-tab small { min-width: 0; color: var(--dsr-muted); font-size: 10.5px; font-weight: 500; white-space: nowrap; }
+.ds-goal-collapse-btn:hover,
+.ds-goal-side-tab:hover { background: var(--dsr-panel-2); color: var(--dsr-text); }
+.ds-goal-collapse-btn:active,
+.ds-goal-side-tab:active { transform: translateY(1px); }
+.ds-goal-collapse-btn:focus-visible,
+.ds-goal-side-tab:focus-visible { outline: 2px solid var(--dsr-accent-strong); outline-offset: 2px; }
+.ds-goal-obj { font-size: 13px; line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; }
 .ds-goal-phase { font-size: 11px; color: var(--dsr-muted); margin-top: 3px; }
 .ds-goal-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
 .ds-mini-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 2px 9px; border-radius: 7px; background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); color: var(--dsr-text); font: inherit; font-size: 11.5px; cursor: pointer; }
@@ -350,6 +379,10 @@ button.ds-overview-attention-item, button.ds-overview-session-item { cursor:poin
 .ds-settings { max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
 .ds-setting-row { display: flex; align-items: center; gap: 10px; background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 12px; padding: 10px 14px; }
 .ds-setting-row > div:first-child { flex: 1; min-width: 0; }
+.ds-setting-link { width: 100%; color: var(--dsr-text); font: inherit; text-align: left; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
+.ds-setting-link:hover, .ds-setting-link:focus-visible { background: var(--dsr-bg-2); border-color: var(--dsr-accent-line); }
+.ds-setting-link .ds-setting-arrow { transition: transform .18s ease, color .18s ease; }
+.ds-setting-link:hover .ds-setting-arrow, .ds-setting-link:focus-visible .ds-setting-arrow { color: var(--dsr-accent-strong); transform: translateX(2px); }
 .ds-setting-arrow,
 #settings-home .ds-setting-row .ds-btn {
   display: inline-flex; align-items: center; justify-content: center;
@@ -397,8 +430,8 @@ button.ds-overview-attention-item, button.ds-overview-session-item { cursor:poin
 .ds-mini:hover { color: var(--dsr-text); }
 .ds-switch { position: relative; display: inline-block; width: 36px; height: 21px; flex-shrink: 0; }
 .ds-switch input { opacity: 0; width: 0; height: 0; }
-.ds-switch .ds-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--dsr-panel-2); border: 1px solid var(--dsr-line); transition: .2s; }
-.ds-switch .ds-slider::before { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; left: 2px; top: 2px; background: var(--dsr-muted); transition: .2s; }
+.ds-switch .ds-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--dsr-panel-2); border: 1px solid var(--dsr-line); transition: background-color .2s ease, border-color .2s ease; }
+.ds-switch .ds-slider::before { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; left: 2px; top: 2px; background: var(--dsr-muted); transition: transform .2s ease, background-color .2s ease; }
 .ds-switch input:checked + .ds-slider { background: var(--dsr-accent-soft); border-color: var(--dsr-accent); }
 .ds-switch input:checked + .ds-slider::before { transform: translateX(15px); background: var(--dsr-accent); }
 
@@ -429,7 +462,7 @@ button.ds-overview-attention-item, button.ds-overview-session-item { cursor:poin
 .ds-stats-note { font-size: 11px; color: var(--dsr-muted); line-height: 1.6; margin-top: 8px; }
 
 /* 统计抽屉(右侧滑出) */
-.ds-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(540px, 100vw); background: var(--dsr-panel); border-left: 1px solid var(--dsr-line); box-shadow: -12px 0 32px rgba(0,0,0,.35); display: flex; flex-direction: column; }
+.ds-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(540px, 100vw); background: var(--dsr-panel); border-left: 1px solid var(--dsr-line); box-shadow: -12px 0 32px rgba(0,0,0,.35); display: flex; flex-direction: column; overscroll-behavior: contain; }
 .ds-drawer.hidden { display: none; }
 .ds-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--dsr-line); font-weight: 700; font-size: 15px; }
 .ds-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 15px; scrollbar-width: thin; scrollbar-color: var(--dsr-line) transparent; }
@@ -453,7 +486,7 @@ button.ds-overview-attention-item, button.ds-overview-session-item { cursor:poin
 /* 模态 */
 .ds-modal { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
 .ds-modal.hidden { display: none; }
-.ds-modal-card { width: min(520px, 100%); background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 14px; padding: 16px; }
+.ds-modal-card { width: min(520px, 100%); background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 18px; padding: 18px; box-shadow: 0 22px 60px var(--dsr-shadow); overscroll-behavior: contain; }
 .ds-modal-title { font-weight: 700; margin-bottom: 10px; }
 .ds-modal-body { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
 .ds-workspace-create-desc { margin: 0; color: var(--dsr-muted); line-height: 1.55; }
@@ -529,9 +562,22 @@ input:focus-visible, select:focus-visible, textarea:focus-visible {
   .ds-btn:hover { filter: brightness(1.08); }
 }
 
-/* 窄屏回退: 隐藏侧栏, 顶部导航, 通知卡片全宽 */
+/* 窄屏回退: 侧栏变为可关闭抽屉，保留完整导航与会话上下文。 */
 @media (max-width: 1023px) {
-  .ds-sidebar { display: none; }
+  .ds-sidebar {
+    position: fixed; inset: 0 auto 0 0; z-index: 90; display: flex;
+    width: min(320px, 86vw); max-width: 100%;
+    opacity: 0; pointer-events: none; transform: translateX(-104%);
+    transition: transform .24s ease, opacity .18s ease;
+    box-shadow: 18px 0 48px rgba(0,0,0,.38);
+  }
+  .ds-sidebar.mobile-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
+  .ds-sidebar-backdrop {
+    position: fixed; inset: 0; z-index: 80; display: block;
+    border: 0; background: var(--dsr-overlay); cursor: default;
+  }
+  .ds-sidebar-backdrop.hidden { display: none; }
+  .ds-app.mobile-nav-open { overflow: hidden; }
   #btn-mobile-nav { display: inline-flex; }
   .ds-content { flex-direction: column; }
   .ds-view { padding: 10px; overflow-y: auto; }