dsh-remote-plugin 0.6.19 → 0.6.21

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()
@@ -475,6 +513,23 @@ async function resolveAgent(ctx, sessionId) {
   }
 }
 
+function commandHead(line) {
+  const match = /^\/+(\S+)/.exec(String(line || '').trim())
+  return match ? match[1].replace(/^\/+/, '') : ''
+}
+
+function commandEntryName(entry) {
+  const value = typeof entry === 'string' ? entry : entry?.name
+  return String(value || '').trim().replace(/^\/+/, '')
+}
+
+function commandWasExecuted(result) {
+  // DSH 0.1.x 的 commands.execute() 成功时可以返回 void。只要 Promise 正常
+  // 完成，就不应把同一条 /command 再降级为 session.prompt 的普通文本；只有
+  // 执行器明确返回 false / { executed: false } 才表示未处理。
+  return result !== false && result?.executed !== false
+}
+
 async function resolveFile(pathname) {
   let abs = targetPath(pathname)
   if (abs === null) return null
@@ -733,15 +788,27 @@ async function serveStatic(req, res, ctx) {
         sendJson(res, 200, { ok: false, message: 'agent not found', debug: { resolvePath, commandNames: [] } })
         return
       }
+      let commandEntries = null
       let commandNames = []
       try {
-        commandNames = (await ctx.commands.list(agent)).map(c => c.name)
+        const listed = await ctx.commands.list(agent)
+        commandEntries = Array.isArray(listed) ? listed : null
+        commandNames = commandEntries ? commandEntries.map(commandEntryName).filter(Boolean) : []
       } catch (e) {
         commandNames = ['list-error: ' + (e?.message || String(e))]
       }
+      const name = commandHead(line)
+      if (commandEntries && (!name || !commandEntries.some(entry => commandEntryName(entry) === name))) {
+        // 仅把 DSH 已登记的 slash command 截留到命令服务。未知 /xxx 仍让客户端
+        // 按普通文本发送，保持 DSH 自己处理自定义提示词的兼容行为。
+        sendJson(res, 200, { ok: true, executed: false, debug: { resolvePath, commandNames, reason: 'unknown-command' } })
+        return
+      }
       const signal = AbortSignal.timeout(30000)
-      const result = await ctx.commands.execute(agent, line, signal)
-      sendJson(res, 200, { ok: true, executed: result !== undefined, debug: { resolvePath, commandNames } })
+      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: commandWasExecuted(result), debug: { resolvePath, commandNames } })
     } catch (e) {
       sendJson(res, 200, { ok: false, message: e?.message || String(e) })
     }
@@ -783,6 +850,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 +862,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.19",
+  "version": "0.6.21",
   "description": "DSH Remote 官方 bundle 插件：DSH 左侧原生边栏入口 + 右侧抽屉内嵌管理控制台；内置网关随 DSH 自动启停(systemd 独立单元)，抽屉直显令牌与设备监控；网关提供 /fs/* 文件传输端点(列表/断点下载/上传)，配合 Android App 远程操控会话/审批/提问/goal 与文件互传(多服务器测速切换、聊天记录离线缓存)。",
   "type": "module",
   "main": "./index.mjs",

package/public/app.js

@@ -938,10 +938,81 @@ function closeGroupMenu() {
   if (menu) menu.classList.add('hidden')
 }
 
+let groupDrawerReturnFocus = null
+
+function groupDrawerOpen() {
+  return !$('group-drawer')?.classList.contains('hidden')
+}
+
+function renderGroupDrawer() {
+  const trigger = $('group-drawer-trigger')
+  const brandGroup = $('brand-group-name')
+  const current = $('group-drawer-current')
+  const list = $('group-drawer-list')
+  if (brandGroup) brandGroup.textContent = state.activeGroup
+  if (trigger) trigger.setAttribute('aria-label', t('groups.drawerOpen') + '：' + state.activeGroup)
+  if (current) current.textContent = state.activeGroup
+  if (!list) return
+  list.innerHTML = state.groups.map(group => {
+    const servers = groupServers(group)
+    const selected = group === state.activeGroup
+    return `<button type="button" class="group-drawer-option ${selected ? 'current' : ''}" data-quick-group="${esc(group)}" ${selected ? 'aria-current="true"' : ''}>
+      <span class="group-drawer-option-mark" aria-hidden="true"></span>
+      <span class="group-drawer-option-copy"><span class="group-drawer-option-name">${esc(group)}</span><span class="group-drawer-option-meta">${t('groups.serverCount', { count: servers.length })}</span></span>
+      <span class="group-drawer-option-check" aria-hidden="true">${selected ? '✓' : ''}</span>
+    </button>`
+  }).join('')
+}
+
+function openGroupDrawer() {
+  const drawer = $('group-drawer')
+  const backdrop = $('group-drawer-backdrop')
+  const trigger = $('group-drawer-trigger')
+  if (!drawer || !backdrop || !trigger) return
+  renderGroupDrawer()
+  groupDrawerReturnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : trigger
+  drawer.classList.remove('hidden')
+  backdrop.classList.remove('hidden')
+  document.body.classList.add('group-drawer-open')
+  trigger.setAttribute('aria-expanded', 'true')
+  requestAnimationFrame(() => (drawer.querySelector('[data-quick-group].current') || drawer.querySelector('[data-quick-group]') || drawer).focus({ preventScroll: true }))
+}
+
+function closeGroupDrawer({ restoreFocus = true } = {}) {
+  const drawer = $('group-drawer')
+  const backdrop = $('group-drawer-backdrop')
+  const trigger = $('group-drawer-trigger')
+  if (!drawer || !backdrop || drawer.classList.contains('hidden')) return
+  drawer.classList.add('hidden')
+  backdrop.classList.add('hidden')
+  document.body.classList.remove('group-drawer-open')
+  trigger?.setAttribute('aria-expanded', 'false')
+  if (restoreFocus) (groupDrawerReturnFocus || trigger)?.focus({ preventScroll: true })
+  groupDrawerReturnFocus = null
+}
+
+function keepGroupDrawerFocus(event) {
+  if (!groupDrawerOpen()) return
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    closeGroupDrawer()
+    return
+  }
+  if (event.key !== 'Tab') return
+  const drawer = $('group-drawer')
+  const targets = [...drawer.querySelectorAll('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])')]
+  if (!targets.length) return
+  const first = targets[0]
+  const last = targets[targets.length - 1]
+  if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus() }
+  else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
+}
+
 function renderServers() {
   const box = $('server-list')
   if (!box) return
   renderGroupSelect()
+  renderGroupDrawer()
   const groupsHtml = state.groups.map(g => {
     const list = groupServers(g)
     const auto = state.autoSelect[g] !== false
@@ -2108,6 +2179,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()
@@ -2140,6 +2212,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()
@@ -3329,7 +3402,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)}">
@@ -3394,7 +3467,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>`
@@ -3414,10 +3487,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
@@ -6839,6 +6950,22 @@ function bindUi() {
   $('btn-server-add').addEventListener('click', addServer)
   $('btn-group-add').addEventListener('click', addGroup)
   $('group-select-btn').addEventListener('click', (e) => { e.stopPropagation(); toggleGroupMenu() })
+  $('group-drawer-trigger').addEventListener('click', () => { groupDrawerOpen() ? closeGroupDrawer() : openGroupDrawer() })
+  $('group-drawer-close').addEventListener('click', () => closeGroupDrawer())
+  $('group-drawer-backdrop').addEventListener('click', () => closeGroupDrawer())
+  $('group-drawer-list').addEventListener('click', (e) => {
+    const option = e.target.closest('[data-quick-group]')
+    if (!option) return
+    const group = option.dataset.quickGroup
+    closeGroupDrawer({ restoreFocus: false })
+    if (group !== state.activeGroup) switchGroup(group)
+  })
+  $('group-drawer-manage').addEventListener('click', () => {
+    closeGroupDrawer({ restoreFocus: false })
+    showView('view-settings')
+    showSettingsPage('servers')
+  })
+  document.addEventListener('keydown', keepGroupDrawerFocus)
   document.addEventListener('click', (e) => {
     if (!e.target.closest('#group-select')) closeGroupMenu()
   })

package/public/desktop/desktop.css

@@ -9,9 +9,16 @@ html, body {
 .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-brand { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px 18px; font-weight: 750; font-size: 15px; letter-spacing: .1px; }
+.ds-brand-trigger { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 0; border: 0; border-radius: 10px; background: transparent; color: var(--dsr-text); font: inherit; text-align: left; cursor: pointer; }
+.ds-brand-trigger:hover { background: var(--dsr-accent-soft); }
+.ds-brand-trigger:focus-visible { outline: 2px solid var(--dsr-accent); outline-offset: 2px; }
 .ds-logo { color: var(--dsr-accent-strong); }
-.ds-brand-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-brand-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0; line-height: 1.14; }
+.ds-brand-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-brand-group-name { min-width: 0; overflow: hidden; color: var(--dsr-muted); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.ds-brand-caret { flex: none; color: var(--dsr-muted); font-size: 15px; line-height: 1; transition: transform .18s ease, color .18s ease; }
+.ds-brand-trigger[aria-expanded="true"] .ds-brand-caret { color: var(--dsr-accent-strong); transform: rotate(180deg); }
 .ds-gh { color: var(--dsr-accent-2); display: inline-flex; }
 .ds-gh svg { width: 17px; height: 17px; fill: currentColor; }
 .ds-new-session { padding: 0 12px 8px; }
@@ -225,15 +232,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); }
@@ -287,6 +294,11 @@ 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-disclosure { width: 100%; min-width: 0; display: flex; justify-content: flex-end; }
@@ -465,6 +477,30 @@ button.ds-overview-attention-item, button.ds-overview-session-item { cursor:poin
 .ds-drawer-body::-webkit-scrollbar-thumb { background: var(--dsr-line); border-radius: 999px; }
 .ds-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--dsr-muted); }
 
+/* 左上角应用名展开的组快捷切换抽屉 */
+.ds-group-drawer-backdrop { position: fixed; inset: 0; z-index: 108; border: 0; background: var(--dsr-overlay); }
+.ds-group-drawer { position: fixed; inset: 0 auto 0 0; z-index: 109; width: min(360px, calc(100vw - 18px)); display: flex; flex-direction: column; background: var(--dsr-panel); border-right: 1px solid var(--dsr-line); box-shadow: 18px 0 48px var(--dsr-shadow); animation: ds-group-drawer-in .22s cubic-bezier(.2,.8,.2,1); }
+.ds-group-drawer.hidden, .ds-group-drawer-backdrop.hidden { display: none; }
+@keyframes ds-group-drawer-in { from { opacity: .01; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
+.ds-group-drawer-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 19px 16px 15px; border-bottom: 1px solid var(--dsr-line); }
+.ds-group-drawer-eyebrow { margin-bottom: 3px; color: var(--dsr-accent-strong); font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
+.ds-group-drawer-head h2 { margin: 0; color: var(--dsr-text); font-size: 19px; line-height: 1.2; }
+.ds-group-drawer-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 14px 8px; padding: 10px 12px; border: 1px solid var(--dsr-accent-line); border-radius: 12px; background: var(--dsr-accent-soft); color: var(--dsr-muted); font-size: 12px; }
+.ds-group-drawer-current strong { min-width: 0; overflow: hidden; color: var(--dsr-accent-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.ds-group-drawer-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--dsr-line) transparent; }
+.ds-group-drawer-option { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--dsr-text); font: inherit; text-align: left; cursor: pointer; }
+.ds-group-drawer-option:hover { background: var(--dsr-bg-2); }
+.ds-group-drawer-option.current { border-color: var(--dsr-accent-line); background: linear-gradient(100deg, var(--dsr-accent-soft), transparent); }
+.ds-group-drawer-mark { width: 10px; height: 10px; flex: none; border: 2px solid var(--dsr-line); border-radius: 50%; }
+.ds-group-drawer-option.current .ds-group-drawer-mark { border-color: var(--dsr-accent); background: var(--dsr-accent); box-shadow: 0 0 0 4px var(--dsr-accent-soft); }
+.ds-group-drawer-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+.ds-group-drawer-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
+.ds-group-drawer-meta { overflow: hidden; color: var(--dsr-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.ds-group-drawer-check { flex: none; color: var(--dsr-accent-strong); font-size: 18px; font-weight: 750; }
+.ds-group-drawer-foot { flex: none; padding: 12px 14px; border-top: 1px solid var(--dsr-line); background: var(--dsr-bg-2); }
+.ds-group-drawer-foot .ds-btn { width: 100%; justify-content: space-between; }
+.ds-group-drawer-foot p { margin: 7px 2px 0; color: var(--dsr-muted); font-size: 11px; }
+
 /* 通知卡片栈(右下角) */
 .ds-toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
 .ds-notif-card { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-left: 3px solid var(--dsr-accent-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.3); padding: 11px 13px; animation: dsSlideIn .22s ease; }

package/public/desktop/desktop.html

@@ -12,7 +12,9 @@
   <div class="ds-app" id="ds-app">
     <aside class="ds-sidebar" id="ds-sidebar">
       <div class="ds-brand">
-        <span class="ds-logo">◆</span><span class="ds-brand-name">DSH Remote</span>
+        <button id="ds-group-drawer-trigger" class="ds-brand-trigger" type="button" aria-haspopup="dialog" aria-controls="ds-group-drawer" aria-expanded="false" data-i18n-aria="ds.groupsDrawerOpen">
+          <span class="ds-logo">◆</span><span class="ds-brand-copy"><span class="ds-brand-name">DSH Remote</span><span id="ds-brand-group-name" class="ds-brand-group-name">默认</span></span><span class="ds-brand-caret" aria-hidden="true">⌄</span>
+        </button>
         <a class="ds-gh" href="https://github.com/Blank-not-black/dsh-Remote" target="_blank" rel="noopener" data-i18n-title="ds.repo" data-i18n-aria="ds.repo">
           <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8a8.01 8.01 0 0 0 5.47 7.59c.4.08.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
         </a>
@@ -82,6 +84,19 @@
       </div>
     </aside>
     <button id="ds-sidebar-backdrop" class="ds-sidebar-backdrop hidden" type="button" data-i18n-aria="ds.close" aria-label="关闭菜单"></button>
+    <button id="ds-group-drawer-backdrop" class="ds-group-drawer-backdrop hidden" type="button" tabindex="-1" aria-hidden="true"></button>
+    <aside id="ds-group-drawer" class="ds-group-drawer hidden" role="dialog" aria-modal="true" aria-labelledby="ds-group-drawer-title" tabindex="-1">
+      <div class="ds-group-drawer-head">
+        <div><div class="ds-group-drawer-eyebrow" data-i18n="ds.groupsDrawerEyebrow">QUICK SWITCH</div><h2 id="ds-group-drawer-title" data-i18n="ds.groupsDrawerTitle">切换服务器组</h2></div>
+        <button id="ds-group-drawer-close" class="ds-icon-btn" type="button" data-i18n-aria="ds.groupsDrawerClose" data-i18n-title="ds.groupsDrawerClose">×</button>
+      </div>
+      <div class="ds-group-drawer-current"><span data-i18n="ds.groupsDrawerCurrent">当前连接组</span><strong id="ds-group-drawer-current">默认</strong></div>
+      <div id="ds-group-drawer-list" class="ds-group-drawer-list" role="group" data-i18n-aria="ds.groupsDrawerTitle"></div>
+      <div class="ds-group-drawer-foot">
+        <button id="ds-group-drawer-manage" class="ds-btn" type="button"><span data-i18n="ds.groupsDrawerManage">管理服务器与组</span><span aria-hidden="true">›</span></button>
+        <p data-i18n="ds.groupsDrawerManageDesc">编辑、测速和调整组</p>
+      </div>
+    </aside>
 
     <div class="ds-main">
       <header class="ds-topbar">
@@ -151,6 +166,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>
@@ -527,6 +543,8 @@
         'ds.groupsPromptRename': '重命名组「{group}」：', 'ds.groupsRenamed': '组已重命名',
         'ds.groupsCannotDeleteDefault': '默认组不可删除',
         'ds.groupsConfirmDelete': '删除组「{group}」？组内服务器将归入默认组。', 'ds.groupsDeleted': '组已删除',
+        'ds.groupsDrawerOpen': '切换服务器组', 'ds.groupsDrawerClose': '关闭组列表', 'ds.groupsDrawerEyebrow': '快速切换', 'ds.groupsDrawerTitle': '切换服务器组', 'ds.groupsDrawerCurrent': '当前连接组',
+        'ds.groupsDrawerManage': '管理服务器与组', 'ds.groupsDrawerManageDesc': '编辑、测速和调整组', 'ds.groupsServerCount': '{count} 台服务器',
         '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': '系统提示',
@@ -630,6 +648,8 @@
         '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.groupsDrawerOpen': 'Switch server group', 'ds.groupsDrawerClose': 'Close group list', 'ds.groupsDrawerEyebrow': 'QUICK SWITCH', 'ds.groupsDrawerTitle': 'Switch server group', 'ds.groupsDrawerCurrent': 'Current connection group',
+        'ds.groupsDrawerManage': 'Manage servers and groups', 'ds.groupsDrawerManageDesc': 'Edit, test, and organize groups', 'ds.groupsServerCount': '{count} servers',
         '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',