dsh-remote-plugin 0.6.17 → 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', '')
@@ -57,12 +58,12 @@ const state = {
   token: LS.get('token', ''),
   wsTicket: { token: '', server: '', value: '', expiresAt: 0 },
   server: '',
-  servers: [],
+  servers: [], // { id, url, note, group, token }; connection identity = URL + token
   groups: ['默认'],
   activeGroup: '默认',
   autoSelect: { '默认': true },
   groupActive: { '默认': '' },
-  serverLatency: {},
+  serverLatency: {}, // URL + token -> latest /health latency
   gatewayHealth: {},
   selectingServer: false,
   sessions: [],
@@ -661,6 +662,27 @@ function ensureGroup(name) {
 }
 function groupServers(g) { return state.servers.filter(s => s.group === g) }
 function activeServers() { return groupServers(state.activeGroup) }
+function normalizedServerToken(token) { return typeof token === 'string' ? token.trim() : '' }
+function serverIdentity(url, token) {
+  return `${String(url || '').replace(/\/+$/, '')}\u0000${normalizedServerToken(token)}`
+}
+function serverKey(server) { return serverIdentity(server?.url ?? server, server?.token) }
+function serverToken(server) { return normalizedServerToken(server?.token) }
+function currentServerEntry() {
+  return state.servers.find(s => s.url === state.server && serverToken(s) === state.token)
+    || state.servers.find(s => s.url === state.server)
+    || null
+}
+function setCurrentAccessToken(value) {
+  const token = normalizedServerToken(value)
+  if (!token) return false
+  const current = currentServerEntry()
+  if (current) current.token = token
+  state.token = token
+  LS.set('token', token)
+  saveServers()
+  return true
+}
 
 function migrateServersV1() {
   if (LS.get('servers-v2', null) !== null) return
@@ -671,7 +693,7 @@ function migrateServersV1() {
     arr = legacy ? [legacy] : []
   }
   const urls = arr.map(s => String(s || '').trim().replace(/\/+$/, '')).filter(s => /^https?:\/\//i.test(s))
-  state.servers = urls.map((url, i) => ({ id: 's' + (i + 1), url, note: '', group: '默认' }))
+  state.servers = urls.map((url, i) => ({ id: 's' + (i + 1), url, note: '', group: '默认', token: normalizedServerToken(state.token) }))
   state.groups = ['默认']; state.activeGroup = '默认'
   state.autoSelect = { '默认': true }; state.groupActive = { '默认': '' }
   const active = LS.get('activeServer', '')
@@ -687,7 +709,8 @@ function loadServers() {
   let data = null
   try { data = JSON.parse(LS.get('servers-v2', '')) } catch {}
   if (!data || !Array.isArray(data.servers)) { migrateServersV1(); return }
-  state.servers = data.servers.filter(s => s && typeof s.url === 'string').map(s => ({ id: s.id || newServerId(), url: s.url.replace(/\/+$/, ''), note: s.note || '', group: s.group || '默认' }))
+  const legacyToken = normalizedServerToken(state.token || LS.get('token', ''))
+  state.servers = data.servers.filter(s => s && typeof s.url === 'string').map(s => ({ id: s.id || newServerId(), url: s.url.replace(/\/+$/, ''), note: s.note || '', group: s.group || '默认', token: s.token == null ? legacyToken : normalizedServerToken(s.token) }))
   state.groups = Array.isArray(data.groups) && data.groups.length ? data.groups : ['默认']
   state.activeGroup = state.groups.includes(data.activeGroup) ? data.activeGroup : '默认'
   state.autoSelect = data.autoSelect || {}
@@ -696,7 +719,12 @@ function loadServers() {
   for (const s of state.servers) ensureGroup(s.group)
   const manual = state.groupActive[state.activeGroup]
   const manualSrv = manual ? state.servers.find(s => s.id === manual) : null
-  state.server = manualSrv ? manualSrv.url : (activeServers()[0]?.url || '')
+  const selected = manualSrv || activeServers()[0]
+  state.server = selected?.url || ''
+  if (selected) {
+    state.token = serverToken(selected)
+    LS.set('token', state.token)
+  }
 }
 function saveServers() {
   LS.set('servers-v2', JSON.stringify({
@@ -705,8 +733,8 @@ function saveServers() {
   }))
 }
 function serverCandidates() {
-  const list = activeServers().map(s => s.url)
-  if (location.origin && !list.includes(location.origin)) list.push(location.origin)
+  const list = activeServers().map(s => ({ ...s, token: serverToken(s) }))
+  if (location.origin && !list.some(s => s.url === location.origin)) list.push({ id: 'origin', url: location.origin, token: state.token, origin: true })
   return list
 }
 async function pingServer(base) {
@@ -749,36 +777,47 @@ async function selectFastestServer({ silent = false, reconnect = true } = {}) {
     if (!silent) toast(t('ds.speedTesting'))
     const candidates = serverCandidates()
     let chosen = ''
+    let chosenToken = state.token
     let best = null
     let ms = Infinity
     if (state.autoSelect[state.activeGroup] !== false) {
-      const measured = await Promise.all(candidates.map(async (u) => [u, await pingServer(u)]))
-      for (const [u, latency] of measured) state.serverLatency[u] = latency
-      best = candidates.filter(u => Number.isFinite(state.serverLatency[u])).sort((a, b) => state.serverLatency[a] - state.serverLatency[b])[0] || null
-      chosen = best || (state.server || '')
-      ms = best ? state.serverLatency[best] : Infinity
+      const measured = await Promise.all(candidates.map(async (server) => [server, await pingServer(server.url)]))
+      for (const [server, latency] of measured) state.serverLatency[serverKey(server)] = latency
+      best = candidates.filter(server => Number.isFinite(state.serverLatency[serverKey(server)])).sort((a, b) => state.serverLatency[serverKey(a)] - state.serverLatency[serverKey(b)])[0] || null
+      const sameOrigin = best?.url === location.origin && best.origin
+      chosen = best ? (sameOrigin ? '' : best.url) : (state.server || '')
+      chosenToken = best ? serverToken(best) : state.token
+      ms = best ? state.serverLatency[serverKey(best)] : Infinity
     } else {
       const manual = state.groupActive[state.activeGroup]
       const manualSrv = manual ? state.servers.find(s => s.id === manual) : null
       chosen = manualSrv ? manualSrv.url : (activeServers()[0]?.url || '')
-      if (chosen) { state.serverLatency[chosen] = await pingServer(chosen); ms = state.serverLatency[chosen] }
+      chosenToken = manualSrv ? serverToken(manualSrv) : state.token
+      if (chosen) {
+        const key = serverKey(manualSrv || { url: chosen, token: state.token })
+        state.serverLatency[key] = await pingServer(chosen)
+        ms = state.serverLatency[key]
+      }
     }
     renderServers()
-    if (chosen !== state.server) {
+    if (chosen !== state.server || chosenToken !== state.token) {
       state.hostInfo = null
       hostDescribeFailures = 0
       if (hostDescribeRetryTimer) clearTimeout(hostDescribeRetryTimer)
       hostDescribeRetryTimer = null
       resetFsForServerDesktop()
       state.server = chosen
-      if (best) { const srv = state.servers.find(s => s.url === best); if (srv) state.groupActive[state.activeGroup] = srv.id }
+      state.token = chosenToken
+      LS.set('token', state.token)
+      if (best) { const srv = state.servers.find(s => s.id === best.id); if (srv) state.groupActive[state.activeGroup] = srv.id }
       saveServers()
+      renderServers()
       if (!silent) {
         if (chosen) toast(t('ds.speedSwitched', { url: chosen, ms: Number.isFinite(ms) ? ms : 0 }), 'ok')
       }
       if (reconnect && state.token) { openStreams(); refreshSessions() }
     } else if (!silent) {
-      if (best) toast(t('ds.speedAlreadyBest', { url: chosen, ms: state.serverLatency[best] }), 'ok')
+      if (best) toast(t('ds.speedAlreadyBest', { url: chosen, ms: state.serverLatency[serverKey(best)] }), 'ok')
       else if (chosen) toast(t('ds.speedManualUsing', { url: chosen, ms: Number.isFinite(ms) ? ms : '—' }), 'ok')
       else toast(t('ds.speedAllDown'), 'err')
     }
@@ -818,13 +857,14 @@ function renderServers() {
       </div>
       <div class="ds-srv-body ${g === state.activeGroup ? '' : 'hidden'}">
         ${list.map(s => {
-          const ms = state.serverLatency[s.url]
+          const ms = state.serverLatency[serverKey(s)]
           let badge = `<span class="ds-server-badge">${t('ds.serversUntested')}</span>`
-          if (Number.isFinite(ms)) badge = `<span class="ds-server-badge ${s.url === state.server ? 'good' : ''}">${ms}ms${s.url === state.server ? t('ds.serversCurrent') : ''}</span>`
+          const active = s.url === state.server && serverToken(s) === state.token
+          if (Number.isFinite(ms)) badge = `<span class="ds-server-badge ${active ? 'good' : ''}">${ms}ms${active ? t('ds.serversCurrent') : ''}</span>`
           else if (ms !== undefined) badge = `<span class="ds-server-badge bad">${t('ds.serversUnreachable')}</span>`
-          const activeInGroup = auto ? s.url === state.server : s.id === activeManual
+          const activeInGroup = auto ? active : s.id === activeManual
           return `<div class="ds-server-row ${activeInGroup ? 'active' : ''}" data-use-server="${esc(s.id)}">
-            <span class="ds-server-main"><span class="ds-server-note">${esc(serverTitle(s))}</span>${s.note ? `<span class="ds-server-url">${esc(s.url)}</span>` : ''}</span>${badge}
+            <span class="ds-server-main"><span class="ds-server-note">${esc(serverTitle(s))}</span>${s.note ? `<span class="ds-server-url">${esc(s.url)}</span>` : ''}<span class="ds-server-token-badge">${s.token ? t('ds.serversTokenSet') : t('ds.serversTokenMissing')}</span></span>${badge}
             <button class="ds-mini" data-edit-server="${esc(s.id)}" title="${t('ds.serversEdit')}">✎</button>
             <button class="ds-mini" data-del-server="${esc(s.id)}" title="${t('ds.serversDelete')}">✕</button>
           </div>`
@@ -857,15 +897,17 @@ function renderServers() {
     state.activeGroup = s.group
     if (state.server !== s.url) resetFsForServerDesktop()
     state.server = s.url
+    state.token = serverToken(s)
+    LS.set('token', state.token)
     saveServers()
     renderServers()
     toast(t('ds.serversManualSelected', { url: serverTitle(s) }), 'ok')
     if (state.token) { openStreams(); refreshSessions() }
   }))
-  const cur = state.servers.find(s => s.url === state.server)
+  const cur = currentServerEntry()
   const curGroup = cur ? cur.group : state.activeGroup
   const curLabel = cur ? (cur.note || cur.url) : (state.server || t('ds.origin'))
-  const curMs = state.serverLatency[state.server]
+  const curMs = cur ? state.serverLatency[serverKey(cur)] : undefined
   $('server-desc').textContent = t('ds.serversCurrentDesc', { group: curGroup, url: curLabel, ms: Number.isFinite(curMs) ? curMs + 'ms' : '—' })
   updateConn()
 }
@@ -876,9 +918,10 @@ async function addServer() {
   if (!raw) return toast(t('ds.serversNeedAddress'), 'err')
   try { const u = new URL(raw); if (u.protocol !== 'http:' && u.protocol !== 'https:') throw new Error('bad') }
   catch { return toast(t('ds.serversBadProtocol'), 'err') }
-  if (state.servers.some(s => s.url === raw)) return toast(t('ds.serversDuplicate'), 'err')
+  const token = normalizedServerToken(state.token)
+  if (state.servers.some(s => serverIdentity(s.url, serverToken(s)) === serverIdentity(raw, token))) return toast(t('ds.serversDuplicate'), 'err')
   const note = (prompt(t('ds.serversPromptNote')) || '').trim()
-  state.servers.push({ id: newServerId(), url: raw, note, group: state.activeGroup })
+  state.servers.push({ id: newServerId(), url: raw, note, group: state.activeGroup, token })
   saveServers()
   if (input) input.value = ''
   renderServers()
@@ -892,17 +935,22 @@ function editServer(id) {
   if (!raw) return
   try { const u = new URL(raw); if (u.protocol !== 'http:' && u.protocol !== 'https:') throw new Error('bad') }
   catch { return toast(t('ds.serversBadProtocol'), 'err') }
-  if (state.servers.some(x => x.id !== id && x.url === raw)) return toast(t('ds.serversDuplicate'), 'err')
+  const tokenInput = prompt(t('ds.serversPromptEditToken'), '')
+  if (tokenInput === null) return
+  const token = normalizedServerToken(tokenInput) || serverToken(s)
+  if (state.servers.some(x => x.id !== id && serverIdentity(x.url, serverToken(x)) === serverIdentity(raw, token))) return toast(t('ds.serversDuplicate'), 'err')
   const note = prompt(t('ds.serversPromptEditNote', { url: raw }), s.note || '')
   if (note === null) return
   const group = prompt(t('ds.serversPromptEditGroup'), s.group || '默认')
   if (group === null) return
-  const wasActive = state.server === s.url
+  const wasActive = state.server === s.url && state.token === serverToken(s)
   const changedActiveUrl = wasActive && state.server !== raw
-  s.url = raw; s.note = note.trim(); s.group = ensureGroup(group.trim() || '默认')
+  s.url = raw; s.note = note.trim(); s.group = ensureGroup(group.trim() || '默认'); s.token = token
   if (wasActive) {
     if (changedActiveUrl) resetFsForServerDesktop()
     state.server = raw
+    state.token = token
+    LS.set('token', token)
   }
   saveServers(); renderServers(); toast(t('ds.serversEdited'), 'ok')
   if (wasActive && state.token) selectFastestServer({ silent: true })
@@ -911,7 +959,7 @@ function removeServer(id) {
   const s = state.servers.find(x => x.id === id)
   if (!s) return
   state.servers = state.servers.filter(x => x.id !== id)
-  const wasActive = state.server === s.url
+  const wasActive = state.server === s.url && state.token === serverToken(s)
   for (const g of state.groups) if (state.groupActive[g] === id) state.groupActive[g] = ''
   saveServers(); renderServers()
   if (wasActive) { toast(t('ds.serversRemovedActive')); selectFastestServer({ silent: true }) }
@@ -1334,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)
@@ -1691,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 =>
@@ -1709,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
@@ -1924,7 +2007,7 @@ function renderQueue() {
 
 /* ---------------- 审批/提问通知卡片栈 ---------------- */
 function serverLabel() {
-  const cur = state.servers.find(s => s.url === state.server)
+  const cur = currentServerEntry()
   return cur ? (cur.note || cur.url) : (state.server || location.host)
 }
 function renderNotifStack() {
@@ -2518,6 +2601,8 @@ function toggleStatsDrawer() {
 async function loadStats() {
   if (!state.token) {
     $('stats-cards').innerHTML = `<div class="ds-empty">${t('ds.statsGatewayDown')}</div>`
+    $('stats-token-chart').innerHTML = ''
+    $('stats-token-legend').innerHTML = ''
     return
   }
   try {
@@ -2527,11 +2612,15 @@ async function loadStats() {
     renderStats(json.days || [])
   } catch {
     $('stats-cards').innerHTML = `<div class="ds-empty">${t('ds.statsGatewayDown')}</div>`
+    $('stats-token-chart').innerHTML = ''
+    $('stats-token-legend').innerHTML = ''
   }
 }
 function renderStats(days) {
   if (!days.length) {
     $('stats-cards').innerHTML = `<div class="ds-empty">${t('ds.statsEmpty')}</div>`
+    $('stats-token-chart').innerHTML = ''
+    $('stats-token-legend').innerHTML = ''
     return
   }
   const today = days[days.length - 1]
@@ -2551,6 +2640,7 @@ function renderStats(days) {
     <div class="ds-stat-card"><div class="v">${fmtCost(totalCost)}</div><div class="k">${t('ds.statsTodayCost')}<br>${t('ds.statsPeak')} ${fmtCost(peakCost)} / ${t('ds.statsOff')} ${fmtCost(offCost)}</div></div>
     <div class="ds-stat-card"><div class="v">${peakShare}%</div><div class="k">${t('ds.statsPeakShare')}<br>${t('ds.statsDays', { n: days.length })}</div></div>`
   $('stats-legend').innerHTML = `<span class="sw peak"></span>${t('ds.statsPeak')} <span class="sw off"></span>${t('ds.statsOff')}`
+  $('stats-token-legend').innerHTML = `<span class="sw token"></span>${t('ds.statsTokenTotal')}`
   $('stats-note').textContent = t('ds.statsNote')
   const maxCost = Math.max(...days.map(d => (d.total.cost || 0)), 0.0001)
   $('stats-chart').innerHTML = days.map(d => {
@@ -2565,6 +2655,17 @@ function renderStats(days) {
       <div class="lbl">${d.date.slice(5)}</div>
     </div>`
   }).join('')
+  const maxTokens = Math.max(...days.map(d => bucketTokens(d.total)), 1)
+  $('stats-token-chart').innerHTML = days.map(d => {
+    const tokens = bucketTokens(d.total)
+    const totalH = tokens > 0 ? Math.max(3, Math.round(tokens / maxTokens * 100)) : 0
+    const tip = `${d.date}\n${t('ds.statsTokenTotal')} ${fmtTokens(tokens)}\n${t('ds.statsInput')} ${fmtTokens(d.total.input)} · ${t('ds.statsOutput')} ${fmtTokens(d.total.output)}`
+    return `<div class="ds-stats-bar" data-tip="${esc(tip)}">
+      <div class="bars token" style="height:${totalH}%"></div>
+      <div class="val">${tokens > 0 ? fmtTokens(tokens) : ''}</div>
+      <div class="lbl">${d.date.slice(5)}</div>
+    </div>`
+  }).join('')
 }
 
 /* ---------------- 视图与连接状态 ---------------- */
@@ -2654,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') }
@@ -2700,7 +2816,7 @@ function updateConn() {
   const el = $('conn-badge')
   // 双实时通道可能按任意顺序打开，连接刷新必须同时刷新系统总览。
   renderOverviewDesktop()
-  const cur = state.servers.find(s => s.url === state.server)
+  const cur = currentServerEntry()
   const group = cur ? cur.group : state.activeGroup
   const label = cur ? (cur.note || cur.url) : (state.server || t('ds.origin'))
   const serverText = t('ds.currentServer', { group, url: label })
@@ -2760,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 () => {
@@ -2901,6 +3022,11 @@ function bindUi() {
     if (bar && bar.dataset.tip) showTip(bar.dataset.tip, bar.getBoundingClientRect())
   })
   $('stats-chart').addEventListener('mouseleave', hideTip)
+  $('stats-token-chart').addEventListener('mouseover', (e) => {
+    const bar = e.target.closest('.ds-stats-bar')
+    if (bar && bar.dataset.tip) showTip(bar.dataset.tip, bar.getBoundingClientRect())
+  })
+  $('stats-token-chart').addEventListener('mouseleave', hideTip)
 
   $('view-settings').addEventListener('click', (e) => {
     const group = e.target.closest('[data-settings-group]')
@@ -2946,11 +3072,23 @@ function bindUi() {
 }
 
 async function start() {
+  const urlToken = new URLSearchParams(location.search).get('token')?.trim() || ''
+  if (urlToken) {
+    state.token = urlToken
+    LS.set('token', urlToken)
+    history.replaceState(null, '', location.pathname)
+  }
   loadServers()
   renderServers()
   showView('view-overview')
-  const urlToken = new URLSearchParams(location.search).get('token')
-  if (urlToken) { state.token = urlToken; LS.set('token', urlToken); history.replaceState(null, '', location.pathname) }
+  if (urlToken) {
+    state.token = urlToken
+    const currentId = state.groupActive[state.activeGroup]
+    const current = state.servers.find(s => s.id === currentId) || state.servers.find(s => s.url === state.server)
+    if (current) current.token = urlToken
+    LS.set('token', urlToken)
+    saveServers()
+  }
   if (!state.token) {
     const input = prompt(t('ds.tokenTitle'))
     if (input && input.trim()) { state.token = input.trim(); LS.set('token', state.token) }