dsh-remote-plugin 0.5.7-rc.1 → 0.5.8

package/public/desktop/i18n.js

@@ -0,0 +1,53 @@
+/* DSH Remote 桌面端轻量 i18n · 零依赖（与 public/i18n.js 同构） */
+'use strict'
+;(function () {
+  const store = {
+    get(k) { try { return localStorage.getItem(k) } catch { return null } },
+    set(k, v) { try { localStorage.setItem(k, v) } catch {} }
+  }
+  function detect() {
+    const saved = store.get('dshLang')
+    if (saved === 'zh' || saved === 'en') return saved
+    return (navigator.language || 'zh').toLowerCase().startsWith('zh') ? 'zh' : 'en'
+  }
+  let dict = null
+  let lang = detect()
+
+  function t(key, vars) {
+    const table = (dict && (dict[lang] || dict.zh)) || {}
+    let s = table[key]
+    if (s == null) s = (dict && dict.zh && dict.zh[key]) != null ? dict.zh[key] : key
+    s = String(s)
+    if (vars) {
+      const keys = new Set(Object.keys(vars))
+      s = s.replace(/\{([A-Za-z0-9_]+)\}/g, (m, k) => keys.has(k) ? String(vars[k] ?? '') : '')
+    } else {
+      s = s.replace(/\{[A-Za-z0-9_]+\}/g, '')
+    }
+    return s
+  }
+
+  function apply(root) {
+    root = root || document
+    root.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = t(el.getAttribute('data-i18n')) })
+    root.querySelectorAll('[data-i18n-title]').forEach(el => { el.title = t(el.getAttribute('data-i18n-title')) })
+    root.querySelectorAll('[data-i18n-placeholder]').forEach(el => { el.placeholder = t(el.getAttribute('data-i18n-placeholder')) })
+    root.querySelectorAll('[data-i18n-aria]').forEach(el => { el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria'))) })
+    document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en'
+    return lang
+  }
+
+  function setLang(l) {
+    if (l !== 'zh' && l !== 'en') return lang
+    lang = l
+    store.set('dshLang', l)
+    apply(document)
+    return lang
+  }
+
+  window.I18N = {
+    init(strings) { dict = strings || dict; return apply(document) },
+    t, setLang, apply,
+    get lang() { return lang }
+  }
+})()

package/public/index.html

@@ -7,6 +7,7 @@
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>DSH Remote</title>
+  <script>/* 统一入口: 桌面浏览器(宽屏且 UA 非移动)访问根地址自动切换到桌面端, 手机/窄窗口继续 App 界面 */ (function(){try{var proto=location.protocol;var ua=navigator.userAgent||'';var mobile=/Android|iPhone|iPad|iPod|Mobile|Windows Phone/i.test(ua);if((proto==='http:'||proto==='https:')&&!mobile&&window.innerWidth>=1024){var p=location.pathname;if(p==='/'||/\/index\.html$/.test(p)){location.replace('desktop/desktop.html'+location.search)}}}catch(e){}})()</script>
   <script>/* 首帧前应用皮肤, 避免闪白/闪黑 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="icon" href="icon.svg" type="image/svg+xml">
@@ -128,6 +129,15 @@
       <div id="jobs-list" class="jobs-list"></div>
     </section>
 
+    <!-- Token 统计 -->
+    <section id="view-stats" class="view hidden">
+      <div class="section-head"><span data-i18n="statsPage.title">Token 统计</span><span id="stats-sub" class="muted"></span></div>
+      <div class="stats-cards" id="stats-cards"></div>
+      <div id="stats-legend" class="stats-legend"></div>
+      <div id="stats-chart" class="stats-chart"></div>
+      <div id="stats-note" class="stats-note"></div>
+    </section>
+
     <!-- 设置 -->
     <section id="view-settings" class="view hidden">
       <div class="settings-group">
@@ -135,6 +145,16 @@
           <div><div class="setting-name" data-i18n="settings.servers">服务器地址（可多个）</div><div class="setting-desc" id="server-desc" data-i18n="servers.defaultDesc">默认 = 当前页面地址</div></div>
           <button id="btn-server-speed" class="mini-btn" data-i18n="settings.speedTest">测速</button>
         </div>
+        <div class="group-bar">
+          <label class="group-bar-label" data-i18n="groups.current">当前组</label>
+          <div class="group-select" id="group-select">
+            <button id="group-select-btn" class="group-select-btn" type="button" aria-haspopup="listbox">
+              <span id="group-select-label">默认</span><span class="caret">▾</span>
+            </button>
+            <div id="group-select-menu" class="group-select-menu hidden"></div>
+          </div>
+          <button id="btn-group-add" class="mini-btn" data-i18n="groups.add">+ 组</button>
+        </div>
         <div id="server-list" class="server-list"></div>
         <div class="server-add">
           <input id="server-input" type="url" placeholder="http://IP:8787">
@@ -148,6 +168,10 @@
           <div><div class="setting-name" data-i18n="settings.notifyTitle">通知</div><div class="setting-desc" data-i18n="settings.notifyDesc">收到审批/提问时推送</div></div>
           <label class="switch"><input type="checkbox" id="opt-notify"><span class="slider"></span></label>
         </div>
+        <div class="setting-row">
+          <div><div class="setting-name" data-i18n="settings.peakRemindTitle">峰谷计费提醒</div><div class="setting-desc" data-i18n="settings.peakRemindDesc">每天 9:00 / 12:00 / 14:00 / 18:00 推送峰谷切换（App 内有效）</div></div>
+          <label class="switch"><input type="checkbox" id="opt-peak-remind"><span class="slider"></span></label>
+        </div>
         <div class="setting-row">
           <div><div class="setting-name" data-i18n="settings.toolsTitle">显示工具调用</div><div class="setting-desc" data-i18n="settings.toolsDesc">关闭后隐藏 🔧/📦 工具调用与结果</div></div>
           <label class="switch"><input type="checkbox" id="opt-tools"><span class="slider"></span></label>
@@ -189,6 +213,7 @@
     <button data-view="view-home" class="nav-btn active"><span class="nav-ico">▤</span><span data-i18n="nav.sessions">会话</span></button>
     <button data-view="view-files" class="nav-btn"><span class="nav-ico">⇅</span><span data-i18n="nav.files">文件</span></button>
     <button data-view="view-activity" class="nav-btn"><span class="nav-ico">◷</span><span data-i18n="nav.pending">待办</span><b id="nav-pending" class="nav-badge hidden"></b></button>
+    <button data-view="view-stats" class="nav-btn"><span class="nav-ico">▦</span><span data-i18n="nav.stats">统计</span></button>
     <button data-view="view-settings" class="nav-btn"><span class="nav-ico">⚙</span><span data-i18n="nav.settings">设置</span></button>
   </nav>
 
@@ -257,8 +282,15 @@
       zh: {
         'a11y.hostAdmin': '主机管理', 'a11y.refresh': '刷新', 'a11y.more': '更多操作', 'a11y.moreTitle': '指令/权限/模型',
         'conn.on': '已连接', 'conn.off': '未连接', 'conn.reconnecting': '连接中断，正在重连…',
+        'conn.titleGroup': '{group} · {url}（{ms}）',
         'common.refreshing': '刷新中…',
-        'nav.sessions': '会话', 'nav.files': '文件', 'nav.pending': '待办', 'nav.settings': '设置',
+        'nav.sessions': '会话', 'nav.files': '文件', 'nav.pending': '待办', 'nav.stats': '统计', 'nav.settings': '设置',
+        'statsPage.title': 'Token 统计',
+        'statsPage.todayTokens': '今日 Token', 'statsPage.todayCost': '今日费用', 'statsPage.peakShare': '高峰占比',
+        'statsPage.input': '未缓存输入', 'statsPage.cacheRead': '缓存命中', 'statsPage.cacheWrite': '缓存写入', 'statsPage.output': '输出',
+        'statsPage.peak': '高峰', 'statsPage.off': '空闲', 'statsPage.days': '近 {n} 天',
+        'statsPage.gatewayDown': '统计需要网关运行', 'statsPage.empty': '暂无统计，产生会话后自动聚合',
+        'statsPage.note': '注：本数据仅在使用 DeepSeek 官方 API 时估算；基于 token 计算，与官网账单可能有出入，一切以官网为准。统计自 2026-08-17 定价生效日起。',
         'home.newSession': '＋ 新会话', 'home.empty': '暂无会话', 'home.createFailed': '新建会话失败', 'home.created': '会话已创建',
         'sessions.running': '运行中', 'sessions.statRunning': '运行中', 'sessions.statPending': '待处理', 'sessions.statTotal': '会话总数',
         'sessions.queueBadge': '队列 {n}', 'sessions.goalBadge': '目标·{phase}',
@@ -277,6 +309,18 @@
         'servers.currentDesc': '当前: {url}', 'servers.notSet': '未设置服务器', 'servers.defaultDesc': '默认 = 当前页面地址',
         'servers.needAddress': '请输入服务器地址', 'servers.badProtocol': '地址需以 http:// 或 https:// 开头',
         'servers.duplicate': '该地址已在列表中', 'servers.added': '已添加服务器', 'servers.removedActive': '已删除当前服务器，重新测速…',
+        'servers.currentDescGroup': '当前：{group} · {url}（{ms}）',
+        'servers.edit': '编辑', 'servers.manualSelected': '已切换至：{url}',
+        'servers.promptNote': '服务器备注（可留空）：', 'servers.promptEditNote': '编辑备注（{url}）：',
+        'servers.promptEditUrl': '编辑服务器地址：', 'servers.promptEditGroup': '所属组：', 'servers.edited': '服务器已更新',
+        'speed.switchedOrigin': '已切换到当前页面（同源）', 'speed.manualUsing': '手动模式：{url}（{ms}）',
+        'groups.current': '当前组', 'groups.add': '+ 组', 'groups.noServer': '组内暂无服务器',
+        'groups.speedTest': '测速', 'groups.autoSelect': '自动选择最快', 'groups.delete': '删除组',
+        'groups.autoOn': '{group} 已切换为自动选择', 'groups.autoOff': '{group} 已切换为手动选择',
+        'groups.switched': '已切换到组：{group}', 'groups.switchHint': '点击切换当前组，双击重命名', 'groups.promptAdd': '新组名：', 'groups.duplicate': '组名已存在',
+        'groups.added': '已创建组：{group}', 'groups.promptRename': '重命名组「{group}」：',
+        'groups.renamed': '组已重命名', 'groups.cannotDeleteDefault': '默认组不可删除',
+        'groups.confirmDelete': '删除组「{group}」？组内服务器将归入默认组。', 'groups.deleted': '组已删除',
         'stream.error': '事件流错误：{msg}',
         'session.loading': '加载中…', 'session.unknown': '未知会话', 'session.running': '运行中', 'session.interrupted': '已中断',
         'session.stop': '停止', 'session.history': '对话', 'session.errorMsg': '会话出错：{msg}',
@@ -352,6 +396,12 @@
         'settings.servers': '服务器地址（可多个）', 'settings.speedTest': '测速', 'settings.add': '添加',
         'settings.scanTitle': '扫码连接', 'settings.scanDesc': '拍照/相册本地解码（无谷歌服务依赖）；也可系统相机扫码或手动粘贴', 'settings.scan': '扫码',
         'settings.notifyTitle': '通知', 'settings.notifyDesc': '收到审批/提问时推送',
+        'settings.peakRemindTitle': '峰谷计费提醒', 'settings.peakRemindDesc': '每天 9:00 / 12:00 / 14:00 / 18:00 推送峰谷切换（App 内有效）',
+        'peakRemind.enterPeak': '已进入高峰计费时段', 'peakRemind.enterOff': '已进入空闲计费时段',
+        'peakRemind.peak0912': '高峰 9:00-12:00', 'peakRemind.off1214': '空闲 12:00-14:00',
+        'peakRemind.peak1418': '高峰 14:00-18:00', 'peakRemind.off1809': '空闲 18:00-次日 9:00',
+        'peakRemind.browserOnly': '峰谷提醒仅在 App 内有效',
+        'peakRemind.on': '峰谷提醒已开启', 'peakRemind.off': '峰谷提醒已关闭',
         'settings.toolsTitle': '显示工具调用', 'settings.toolsDesc': '关闭后隐藏 🔧/📦 工具调用与结果',
         'settings.langTitle': '语言 / Language', 'settings.langDesc': '界面语言，跟随系统或手动切换',
         'settings.themeTitle': '皮肤', 'settings.themeDesc': '默认深空 / 落日 / 易北爱乐厅 / 草原孤塔',
@@ -374,8 +424,15 @@
       en: {
         'a11y.hostAdmin': 'Host admin', 'a11y.refresh': 'Refresh', 'a11y.more': 'More actions', 'a11y.moreTitle': 'Commands / Permissions / Models',
         'conn.on': 'Connected', 'conn.off': 'Offline', 'conn.reconnecting': 'Connection lost, reconnecting…',
+        'conn.titleGroup': '{group} · {url} ({ms})',
         'common.refreshing': 'Refreshing…',
-        'nav.sessions': 'Sessions', 'nav.files': 'Files', 'nav.pending': 'Inbox', 'nav.settings': 'Settings',
+        'nav.sessions': 'Sessions', 'nav.files': 'Files', 'nav.pending': 'Inbox', 'nav.stats': 'Stats', 'nav.settings': 'Settings',
+        'statsPage.title': 'Token stats',
+        'statsPage.todayTokens': 'Tokens today', 'statsPage.todayCost': 'Cost today', 'statsPage.peakShare': 'Peak share',
+        'statsPage.input': 'Uncached input', 'statsPage.cacheRead': 'Cache read', 'statsPage.cacheWrite': 'Cache write', 'statsPage.output': 'Output',
+        'statsPage.peak': 'Peak', 'statsPage.off': 'Off-peak', 'statsPage.days': 'Last {n} days',
+        'statsPage.gatewayDown': 'Stats require the gateway', 'statsPage.empty': 'No stats yet — they aggregate as sessions happen',
+        'statsPage.note': 'Note: estimates assume the official DeepSeek API. Token-based calculation may differ from the official bill; always defer to deepseek.com. Stats start from the 2026-08-17 pricing date.',
         'home.newSession': '＋ New session', 'home.empty': 'No sessions yet', 'home.createFailed': 'Failed to create session', 'home.created': 'Session created',
         'sessions.running': 'Running', 'sessions.statRunning': 'Running', 'sessions.statPending': 'Pending', 'sessions.statTotal': 'Sessions',
         'sessions.queueBadge': 'Queue {n}', 'sessions.goalBadge': 'Goal·{phase}',
@@ -394,6 +451,18 @@
         'servers.currentDesc': 'Current: {url}', 'servers.notSet': 'No server set', 'servers.defaultDesc': 'Default = current page URL',
         'servers.needAddress': 'Enter a server address', 'servers.badProtocol': 'Address must start with http:// or https://',
         'servers.duplicate': 'This address is already in the list', 'servers.added': 'Server added', 'servers.removedActive': 'Removed active server, re-testing…',
+        'servers.currentDescGroup': 'Current: {group} · {url} ({ms})',
+        'servers.edit': 'Edit', 'servers.manualSelected': 'Switched to: {url}',
+        'servers.promptNote': 'Server note (optional):', 'servers.promptEditNote': 'Edit note ({url}):',
+        'servers.promptEditUrl': 'Edit server URL:', 'servers.promptEditGroup': 'Group:', 'servers.edited': 'Server updated',
+        'speed.switchedOrigin': 'Switched to current page (same origin)', 'speed.manualUsing': 'Manual mode: {url} ({ms})',
+        'groups.current': 'Current group', 'groups.add': '+ Group', 'groups.noServer': 'No servers in this group',
+        'groups.speedTest': 'Speed test', 'groups.autoSelect': 'Auto-select fastest', 'groups.delete': 'Delete group',
+        'groups.autoOn': '{group} is now auto-select', 'groups.autoOff': '{group} is now manual',
+        'groups.switched': 'Switched to group: {group}', 'groups.switchHint': 'Click to switch group, double-click to rename', 'groups.promptAdd': 'New group name:', 'groups.duplicate': 'Group already exists',
+        'groups.added': 'Created group: {group}', 'groups.promptRename': 'Rename group "{group}":',
+        'groups.renamed': 'Group renamed', 'groups.cannotDeleteDefault': 'The default group cannot be deleted',
+        'groups.confirmDelete': 'Delete group "{group}"? Its servers move to the default group.', 'groups.deleted': 'Group deleted',
         'stream.error': 'Event stream error: {msg}',
         'session.loading': 'Loading…', 'session.unknown': 'Unknown session', 'session.running': 'Running', 'session.interrupted': 'Interrupted',
         'session.stop': 'Stop', 'session.history': 'Conversation', 'session.errorMsg': 'Session error: {msg}',
@@ -469,6 +538,12 @@
         'settings.servers': 'Servers (one or more)', 'settings.speedTest': 'Test', 'settings.add': 'Add',
         'settings.scanTitle': 'Scan to pair', 'settings.scanDesc': 'Photo/gallery QR decoding on device (no Google services); system camera or manual paste also work', 'settings.scan': 'Scan',
         'settings.notifyTitle': 'Notifications', 'settings.notifyDesc': 'Push on approvals / questions',
+        'settings.peakRemindTitle': 'Peak/off-peak reminders', 'settings.peakRemindDesc': 'Push at 9:00 / 12:00 / 14:00 / 18:00 daily (in-app only)',
+        'peakRemind.enterPeak': 'Peak pricing period started', 'peakRemind.enterOff': 'Off-peak pricing period started',
+        'peakRemind.peak0912': 'Peak 9:00-12:00', 'peakRemind.off1214': 'Off-peak 12:00-14:00',
+        'peakRemind.peak1418': 'Peak 14:00-18:00', 'peakRemind.off1809': 'Off-peak 18:00-9:00 next day',
+        'peakRemind.browserOnly': 'Peak reminders only work in the app',
+        'peakRemind.on': 'Peak reminders enabled', 'peakRemind.off': 'Peak reminders disabled',
         'settings.toolsTitle': 'Show tool calls', 'settings.toolsDesc': 'Hide 🔧/📦 tool calls and results when off',
         'settings.langTitle': 'Language / 语言', 'settings.langDesc': 'UI language, follows system or switch manually',
         'settings.themeTitle': 'Theme', 'settings.themeDesc': 'Default deep space / Sunset / Elbphilharmonie / Prairie Tower',

package/public/styles.css

@@ -1,354 +1,8 @@
 /* DSH Remote · 移动优先 · 四皮肤(默认深空/深色落日/亮色易北爱乐厅/中性草原孤塔)
- * 统一 --dsr-* 变量; 主题由 <html data-theme="dark|light|neutral"> 驱动, theme.js 持久化。
- * 红绿色弱友好原则: 状态语义色之外, 品牌色使用蓝/青 + 橙/紫系, 避免红绿配对。 */
+ * 规则样式表; 变量定义已抽取到 theme-vars.css(桌面端共享), 保持单一来源。 */
 
-/* ============ 通用变量 ============ */
-:root {
-  --dsr-radius: 14px;
-  --dsr-safe-top: max(env(safe-area-inset-top, 0px), var(--native-top, 0px));
-  --dsr-safe-b: max(env(safe-area-inset-bottom, 0px), var(--native-bottom, 0px));
-}
-
-/* ============ 深空「默认」: 经典深蓝紫(保留原配色) ============ */
-:root,
-html[data-theme="default"] {
-  /* 中性灰阶 0(白) → 9(近黑) */
-  --dsr-neutral-0: #FFFFFF;
-  --dsr-neutral-1: #F4F6F9;
-  --dsr-neutral-2: #E6EAF0;
-  --dsr-neutral-3: #C9D1DC;
-  --dsr-neutral-4: #A6B0BE;
-  --dsr-neutral-5: #828D9E;
-  --dsr-neutral-6: #616C7E;
-  --dsr-neutral-7: #444E5E;
-  --dsr-neutral-8: #2B3442;
-  --dsr-neutral-9: #1A212C;
-
-  --dsr-bg: #0B0E1A;
-  --dsr-bg-2: #101528;
-  --dsr-panel: #151B33;
-  --dsr-panel-2: #1B2340;
-  --dsr-line: #263056;
-  --dsr-divider: rgba(232, 236, 255, .16);
-  --dsr-text: #E8ECFF;
-  --dsr-muted: #8B94BD;
-  --dsr-text-disabled: rgba(232, 236, 255, .45);
-
-  --dsr-accent: #5B8CFF;
-  --dsr-on-accent: #FFFFFF;
-  --dsr-accent-strong: #6FA0FF;
-  --dsr-accent-soft: #5B8CFF1F;
-  --dsr-accent-line: #5B8CFF66;
-  --dsr-accent-2: #B48CFF;
-  --dsr-accent-2-strong: #B48CFF;
-  --dsr-accent-2-soft: #B48CFF21;
-  --dsr-accent-2-line: #B48CFF66;
-  --dsr-brand-a: #5B8CFF;
-  --dsr-brand-b: #B48CFF;
-
-  --dsr-success: #4BCF7E;
-  --dsr-success-soft: #4BCF7E21;
-  --dsr-success-line: #4BCF7E66;
-  --dsr-warning: #FF9E64;
-  --dsr-warning-soft: #FF9E6421;
-  --dsr-warning-line: #FF9E6466;
-  --dsr-on-warning: #1A120B;
-  --dsr-error: #FF8F6B;
-  --dsr-error-soft: #FF8F6B24;
-  --dsr-error-line: #FF8F6B66;
-  --dsr-info: #7DCFFF;
-  --dsr-info-soft: #7DCFFF21;
-  --dsr-info-line: #7DCFFF66;
-
-  --dsr-head-bg: rgba(11, 14, 26, .94);
-  --dsr-nav-bg: rgba(16, 21, 40, .94);
-  --dsr-nav-muted: #8B94BD;
-  --dsr-nav-active: #6FA0FF;
-  --dsr-nav-badge-bg: #FF9E64;
-  --dsr-nav-badge-text: #1A120B;
-  --dsr-composer-bg: rgba(11, 14, 26, .92);
-  --dsr-overlay: rgba(5, 7, 14, .66);
-  --dsr-code-bg: rgba(0, 0, 0, .28);
-  --dsr-shadow: rgba(0, 0, 0, .4);
-  --dsr-glow: rgba(91, 140, 255, .8);
-  --dsr-head-running-bg: linear-gradient(90deg, rgba(11, 14, 26, .94), rgba(35, 65, 150, .92), rgba(125, 207, 255, .6), rgba(35, 65, 150, .92), rgba(11, 14, 26, .94));
-  --dsr-head-running-line: rgba(91, 140, 255, .55);
-  --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(11, 14, 26, .94), rgba(90, 26, 12, .92), rgba(255, 158, 100, .55), rgba(90, 26, 12, .92), rgba(11, 14, 26, .94));
-  --dsr-head-interrupted-line: rgba(255, 158, 100, .55);
-}
-
-/* ============ 深色「落日」: 深钴蓝底 + 琥珀橙强调 ============ */
-html[data-theme="dark"] {
-  /* 中性灰阶 0(白) → 9(近黑) */
-  --dsr-neutral-0: #FFFFFF;
-  --dsr-neutral-1: #F4F6F9;
-  --dsr-neutral-2: #E6EAF0;
-  --dsr-neutral-3: #C9D1DC;
-  --dsr-neutral-4: #A6B0BE;
-  --dsr-neutral-5: #828D9E;
-  --dsr-neutral-6: #616C7E;
-  --dsr-neutral-7: #444E5E;
-  --dsr-neutral-8: #2B3442;
-  --dsr-neutral-9: #1A212C;
-
-  /* 表面与文字 */
-  --dsr-bg: #05348B;
-  --dsr-bg-2: #0B3E86;
-  --dsr-panel: #0D438F;
-  --dsr-panel-2: #164E9E;
-  --dsr-line: #2E5A8C;
-  --dsr-divider: rgba(255, 255, 255, .16);
-  --dsr-text: #FFFFFF;
-  --dsr-muted: rgba(255, 255, 255, .85);
-  --dsr-text-disabled: rgba(255, 255, 255, .48);
-
-  /* 品牌强调(琥珀橙)与点缀(米色) */
-  --dsr-accent: #F9A647;
-  --dsr-on-accent: #1A120B;
-  --dsr-accent-strong: #F9A647;
-  --dsr-accent-soft: #F9A64721;
-  --dsr-accent-line: #F9A64766;
-  --dsr-accent-2: #EDCFAB;
-  --dsr-accent-2-strong: #EDCFAB;
-  --dsr-accent-2-soft: #EDCFAB21;
-  --dsr-accent-2-line: #EDCFAB66;
-  --dsr-brand-a: #F9A647;
-  --dsr-brand-b: #EDCFAB;
-
-  /* 状态色(WCAG 对比度按深钴蓝底校准) */
-  --dsr-success: #7EE2A8;
-  --dsr-success-soft: #7EE2A821;
-  --dsr-success-line: #7EE2A866;
-  --dsr-warning: #F9A647;
-  --dsr-warning-soft: #F9A64721;
-  --dsr-warning-line: #F9A64766;
-  --dsr-on-warning: #1A120B;
-  --dsr-error: #FFB4A6;
-  --dsr-error-soft: #FFB4A624;
-  --dsr-error-line: #FFB4A666;
-  --dsr-info: #7DCFFF;
-  --dsr-info-soft: #7DCFFF21;
-  --dsr-info-line: #7DCFFF66;
-
-  /* 悬浮/遮罩/特殊表面 */
-  --dsr-head-bg: rgba(4, 32, 90, .94);
-  --dsr-nav-bg: rgba(7, 38, 104, .94);
-  --dsr-nav-muted: rgba(255, 255, 255, .85);
-  --dsr-nav-active: #F9A647;
-  --dsr-nav-badge-bg: #F9A647;
-  --dsr-nav-badge-text: #1A120B;
-  --dsr-composer-bg: rgba(5, 42, 110, .92);
-  --dsr-overlay: rgba(2, 10, 32, .66);
-  --dsr-code-bg: rgba(0, 0, 0, .28);
-  --dsr-shadow: rgba(0, 0, 0, .4);
-  --dsr-glow: rgba(249, 166, 71, .55);
-  --dsr-head-running-bg: linear-gradient(90deg, rgba(4, 32, 90, .94), rgba(30, 77, 123, .92), rgba(125, 207, 255, .55), rgba(30, 77, 123, .92), rgba(4, 32, 90, .94));
-  --dsr-head-running-line: rgba(249, 166, 71, .55);
-  --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(4, 32, 90, .94), rgba(90, 26, 12, .92), rgba(255, 180, 166, .55), rgba(90, 26, 12, .92), rgba(4, 32, 90, .94));
-  --dsr-head-interrupted-line: rgba(255, 180, 166, .55);
-}
-
-/* ============ 亮色「易北爱乐厅」: 米白底 + 沙金强调 ============ */
-html[data-theme="light"] {
-  --dsr-neutral-0: #FFFFFF;
-  --dsr-neutral-1: #FAF9F7;
-  --dsr-neutral-2: #F3F1ED;
-  --dsr-neutral-3: #E8E5DF;
-  --dsr-neutral-4: #D8D4CC;
-  --dsr-neutral-5: #B8B3A9;
-  --dsr-neutral-6: #8A857C;
-  --dsr-neutral-7: #615D56;
-  --dsr-neutral-8: #3F3C37;
-  --dsr-neutral-9: #2B2B2B;
-
-  --dsr-bg: #EFEEEC;
-  --dsr-bg-2: #E5E1D9;
-  --dsr-panel: #FAF8F5;
-  --dsr-panel-2: #FFFFFF;
-  --dsr-line: #D8D2C6;
-  --dsr-divider: rgba(43, 43, 43, .12);
-  --dsr-text: #2B2B2B;
-  --dsr-muted: #6E6A63;
-  --dsr-text-disabled: #A8A39A;
-
-  /* 沙金(填充/按钮) + 深沙金(小字号文字) + 浅桃粉(点缀) */
-  --dsr-accent: #E6BC7B;
-  --dsr-on-accent: #2B2B2B;
-  --dsr-accent-strong: #7A5A24;
-  --dsr-accent-soft: #E6BC7B40;
-  --dsr-accent-line: #C89A4E66;
-  --dsr-accent-2: #6E5A8C;
-  --dsr-accent-2-strong: #6E5A8C;
-  --dsr-accent-2-soft: #6E5A8C1F;
-  --dsr-accent-2-line: #6E5A8C59;
-  --dsr-brand-a: #E6BC7B;
-  --dsr-brand-b: #EDD4C2;
+@import 'theme-vars.css';
 
-  --dsr-success: #237A46;
-  --dsr-success-soft: #237A461A;
-  --dsr-success-line: #237A4659;
-  --dsr-warning: #965A0B;
-  --dsr-warning-soft: #B96A0E1F;
-  --dsr-warning-line: #B96A0E59;
-  --dsr-on-warning: #FFFFFF;
-  --dsr-error: #B7423F;
-  --dsr-error-soft: #B7423F1F;
-  --dsr-error-line: #B7423F59;
-  --dsr-info: #2563C0;
-  --dsr-info-soft: #2563C01A;
-  --dsr-info-line: #2563C059;
-
-  --dsr-head-bg: rgba(239, 238, 236, .94);
-  --dsr-nav-bg: rgba(250, 248, 245, .94);
-  --dsr-nav-muted: #6E6A63;
-  --dsr-nav-active: #7A5A24;
-  --dsr-nav-badge-bg: #965A0B;
-  --dsr-nav-badge-text: #FFFFFF;
-  --dsr-composer-bg: rgba(250, 248, 245, .92);
-  --dsr-overlay: rgba(43, 43, 43, .4);
-  --dsr-code-bg: rgba(0, 0, 0, .06);
-  --dsr-shadow: rgba(43, 43, 43, .18);
-  --dsr-glow: rgba(198, 154, 78, .45);
-  --dsr-head-running-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(230, 188, 123, .45), rgba(255, 255, 255, .65), rgba(230, 188, 123, .45), rgba(239, 238, 236, .94));
-  --dsr-head-running-line: rgba(122, 90, 36, .55);
-  --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(183, 66, 63, .18), rgba(255, 255, 255, .65), rgba(183, 66, 63, .18), rgba(239, 238, 236, .94));
-  --dsr-head-interrupted-line: rgba(183, 66, 63, .55);
-}
-
-/* ============ 中性「草原孤塔」: 鼠尾草底 + 橄榄绿块 + 陶土红点缀(莫兰迪自然系) ============ */
-html[data-theme="neutral"] {
-  --dsr-neutral-0: #FFFFFF;
-  --dsr-neutral-1: #FAF7EE;
-  --dsr-neutral-2: #F1EDDF;
-  --dsr-neutral-3: #E6DFC8;
-  --dsr-neutral-4: #D5CDB4;
-  --dsr-neutral-5: #B8AF91;
-  --dsr-neutral-6: #8E866D;
-  --dsr-neutral-7: #6B6450;
-  --dsr-neutral-8: #454133;
-  --dsr-neutral-9: #2B2B2B;
-
-  --dsr-bg: #DDD4B8;
-  --dsr-bg-2: #D2C9AC;
-  --dsr-panel: #E6DFC8;
-  --dsr-panel-2: #F1EDDF;
-  --dsr-line: #B8AF91;
-  --dsr-divider: rgba(43, 43, 43, .14);
-  --dsr-text: #2B2B2B;
-  --dsr-muted: #5E5A45;
-  --dsr-text-disabled: #9A937C;
-
-  /* 橄榄军绿 = 主色(按钮/开关/底部导航块); 陶土砖红 = 强调(徽标/图标/链接) */
-  --dsr-accent: #585818;
-  --dsr-on-accent: #F5F1E3;
-  --dsr-accent-strong: #585818;
-  --dsr-accent-soft: #5858181F;
-  --dsr-accent-line: #58581866;
-  --dsr-accent-2: #832D15;
-  --dsr-accent-2-strong: #832D15;
-  --dsr-accent-2-soft: #832D151F;
-  --dsr-accent-2-line: #832D1566;
-  --dsr-brand-a: #585818;
-  --dsr-brand-b: #832D15;
-
-  --dsr-success: #1E5C33;
-  --dsr-success-soft: #1E5C331F;
-  --dsr-success-line: #1E5C3366;
-  --dsr-warning: #8A4B0C;
-  --dsr-warning-soft: #8A4B0C1F;
-  --dsr-warning-line: #8A4B0C66;
-  --dsr-on-warning: #FFFFFF;
-  --dsr-error: #8A2A1F;
-  --dsr-error-soft: #8A2A1F1F;
-  --dsr-error-line: #8A2A1F66;
-  --dsr-info: #1F4E7A;
-  --dsr-info-soft: #1F4E7A1F;
-  --dsr-info-line: #1F4E7A66;
-
-  --dsr-head-bg: rgba(221, 212, 184, .94);
-  --dsr-nav-bg: #585818;
-  --dsr-nav-muted: rgba(245, 241, 227, .8);
-  --dsr-nav-active: #F5F1E3;
-  --dsr-nav-badge-bg: #832D15;
-  --dsr-nav-badge-text: #F5F1E3;
-  --dsr-composer-bg: rgba(230, 223, 200, .92);
-  --dsr-overlay: rgba(43, 43, 43, .4);
-  --dsr-code-bg: rgba(0, 0, 0, .07);
-  --dsr-shadow: rgba(43, 43, 43, .2);
-  --dsr-glow: rgba(88, 88, 24, .5);
-  --dsr-head-running-bg: linear-gradient(90deg, rgba(221, 212, 184, .94), rgba(88, 88, 24, .30), rgba(245, 241, 227, .65), rgba(88, 88, 24, .30), rgba(221, 212, 184, .94));
-  --dsr-head-running-line: rgba(88, 88, 24, .55);
-  --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(221, 212, 184, .94), rgba(131, 45, 21, .20), rgba(245, 241, 227, .65), rgba(131, 45, 21, .20), rgba(221, 212, 184, .94));
-  --dsr-head-interrupted-line: rgba(131, 45, 21, .55);
-}
-
-/* 无 JS 或 JS 前: 跟随系统深浅偏好 */
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme]) {
-    --dsr-neutral-0: #FFFFFF;
-    --dsr-neutral-1: #FAF9F7;
-    --dsr-neutral-2: #F3F1ED;
-    --dsr-neutral-3: #E8E5DF;
-    --dsr-neutral-4: #D8D4CC;
-    --dsr-neutral-5: #B8B3A9;
-    --dsr-neutral-6: #8A857C;
-    --dsr-neutral-7: #615D56;
-    --dsr-neutral-8: #3F3C37;
-    --dsr-neutral-9: #2B2B2B;
-
-    --dsr-bg: #EFEEEC;
-    --dsr-bg-2: #E5E1D9;
-    --dsr-panel: #FAF8F5;
-    --dsr-panel-2: #FFFFFF;
-    --dsr-line: #D8D2C6;
-    --dsr-divider: rgba(43, 43, 43, .12);
-    --dsr-text: #2B2B2B;
-    --dsr-muted: #6E6A63;
-    --dsr-text-disabled: #A8A39A;
-
-    --dsr-accent: #E6BC7B;
-    --dsr-on-accent: #2B2B2B;
-    --dsr-accent-strong: #7A5A24;
-    --dsr-accent-soft: #E6BC7B40;
-    --dsr-accent-line: #C89A4E66;
-    --dsr-accent-2: #6E5A8C;
-    --dsr-accent-2-strong: #6E5A8C;
-    --dsr-accent-2-soft: #6E5A8C1F;
-    --dsr-accent-2-line: #6E5A8C59;
-    --dsr-brand-a: #E6BC7B;
-    --dsr-brand-b: #EDD4C2;
-
-    --dsr-success: #237A46;
-    --dsr-success-soft: #237A461A;
-    --dsr-success-line: #237A4659;
-    --dsr-warning: #965A0B;
-    --dsr-warning-soft: #B96A0E1F;
-    --dsr-warning-line: #B96A0E59;
-    --dsr-on-warning: #FFFFFF;
-    --dsr-error: #B7423F;
-    --dsr-error-soft: #B7423F1F;
-    --dsr-error-line: #B7423F59;
-    --dsr-info: #2563C0;
-    --dsr-info-soft: #2563C01A;
-    --dsr-info-line: #2563C059;
-
-    --dsr-head-bg: rgba(239, 238, 236, .94);
-    --dsr-nav-bg: rgba(250, 248, 245, .94);
-    --dsr-nav-muted: #6E6A63;
-    --dsr-nav-active: #7A5A24;
-    --dsr-nav-badge-bg: #965A0B;
-    --dsr-nav-badge-text: #FFFFFF;
-    --dsr-composer-bg: rgba(250, 248, 245, .92);
-    --dsr-overlay: rgba(43, 43, 43, .4);
-    --dsr-code-bg: rgba(0, 0, 0, .06);
-    --dsr-shadow: rgba(43, 43, 43, .18);
-    --dsr-glow: rgba(198, 154, 78, .45);
-    --dsr-head-running-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(230, 188, 123, .45), rgba(255, 255, 255, .65), rgba(230, 188, 123, .45), rgba(239, 238, 236, .94));
-    --dsr-head-running-line: rgba(122, 90, 36, .55);
-    --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(183, 66, 63, .18), rgba(255, 255, 255, .65), rgba(183, 66, 63, .18), rgba(239, 238, 236, .94));
-    --dsr-head-interrupted-line: rgba(183, 66, 63, .55);
-  }
-}
 
 /* ============ 基础 ============ */
 * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@@ -450,6 +104,32 @@ button {
 }
 .section-head.small { margin-top: 6px; }
 
+/* ---------- Token 统计(移动端) ---------- */
+.stats-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.scard { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); padding: 10px 11px; min-width: 0; }
+.scard.span2 { grid-column: span 2; }
+.scard .v { font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.scard .k { font-size: 10px; color: var(--dsr-muted); margin-top: 2px; line-height: 1.4; }
+.bucket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 6px; }
+.bucket-grid .b { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 10.5px; min-width: 0; }
+.bucket-grid .b .n { color: var(--dsr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bucket-grid .b .t { font-weight: 600; white-space: nowrap; }
+.stats-chart { display: flex; align-items: flex-end; gap: 7px; height: 190px; padding: 12px 12px 10px; margin-top: 10px; background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); overflow-x: auto; overflow-y: hidden; }
+.stats-legend { display: flex; gap: 12px; font-size: 10px; color: var(--dsr-muted); margin-top: 6px; }
+.stats-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
+.stats-legend .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
+.stats-legend .sw.peak { background: var(--dsr-accent-strong); }
+.stats-legend .sw.off { background: var(--dsr-accent-2); }
+.stats-bar { flex: 1; min-width: 36px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
+.stats-bar .bars { width: 100%; max-width: 42px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--dsr-accent-soft); }
+.stats-bar .seg { width: 100%; }
+.stats-bar .seg.peak { background: var(--dsr-accent-strong); }
+.stats-bar .seg.off { background: var(--dsr-accent-2); }
+.stats-bar .lbl { font-size: 9px; color: var(--dsr-muted); white-space: nowrap; }
+.stats-bar .val { font-size: 9px; color: var(--dsr-text); white-space: nowrap; }
+.stats-note { font-size: 11px; color: var(--dsr-muted); line-height: 1.6; margin-top: 8px; }
+.stats-empty { color: var(--dsr-muted); text-align: center; padding: 18px 0; font-size: 12px; }
+
 /* ---------- 会话列表 ---------- */
 .session-list { display: flex; flex-direction: column; gap: 8px; }
 .session-card {
@@ -755,16 +435,38 @@ body.in-session .main { padding-bottom: 84px; }
 .setting-desc.expanded { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
 .about { text-align: center; color: var(--dsr-muted); font-size: 12px; margin-top: 16px; line-height: 1.8; }
 
-/* 多服务器列表 */
+/* 多服务器列表(分组) */
+.group-bar { display: flex; align-items: center; gap: 8px; padding: 0 14px 10px; }
+.group-bar-label { font-size: 12px; color: var(--dsr-muted); white-space: nowrap; }
+.group-select { flex: 1; min-width: 0; position: relative; }
+.group-select-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--dsr-bg-2); color: var(--dsr-text); border: 1px solid var(--dsr-line); border-radius: 10px; padding: 7px 9px; font: inherit; font-size: 13px; outline: none; cursor: pointer; }
+.group-select-btn .caret { color: var(--dsr-muted); font-size: 10px; transition: transform .15s ease; }
+.group-select-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 220px; overflow-y: auto; background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
+.group-option { width: 100%; text-align: left; background: none; border: none; color: var(--dsr-text); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; }
+.group-option.current { background: var(--dsr-accent-soft); color: var(--dsr-accent-strong); font-weight: 600; }
+.group-option:active { background: var(--dsr-panel-2); }
 .server-list { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 6px; }
 .server-empty { font-size: 12px; color: var(--dsr-muted); }
+.srv-group { border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-panel); overflow: hidden; }
+.srv-group-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; }
+.srv-group-name { flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--dsr-text); font: inherit; font-size: 13px; font-weight: 600; padding: 2px 0; display: flex; align-items: center; gap: 6px; }
+.srv-group-count { font-size: 10.5px; color: var(--dsr-muted); background: var(--dsr-bg-2); border-radius: 999px; padding: 0 7px; line-height: 16px; }
+.srv-group-speed { flex-shrink: 0; padding: 3px 8px; font-size: 12px; }
+.srv-group-del { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--dsr-panel); border: 1px solid var(--dsr-line); color: var(--dsr-muted); font-size: 11px; }
+.srv-group-del:active { color: var(--dsr-error); }
+.srv-group-body { display: flex; flex-direction: column; gap: 6px; padding: 0 9px 9px; }
+.switch.small { width: 36px; height: 21px; }
+.switch.small .slider::before { width: 15px; height: 15px; left: 2px; top: 2px; }
+.switch.small input:checked + .slider::before { transform: translateX(15px); }
 .server-row {
   display: flex; align-items: center; gap: 8px;
   background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 10px;
   padding: 8px 10px;
 }
 .server-row.active { border-color: var(--dsr-info-line); background: var(--dsr-info-soft); }
-.server-url { flex: 1; min-width: 0; font-size: 12.5px; word-break: break-all; }
+.server-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.server-note { font-size: 13px; word-break: break-all; }
+.server-url { flex: 1; min-width: 0; font-size: 11.5px; color: var(--dsr-muted); word-break: break-all; }
 .server-badge {
   flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: 999px;
   background: var(--dsr-accent-soft); color: var(--dsr-accent-strong);
@@ -772,10 +474,11 @@ body.in-session .main { padding-bottom: 84px; }
 }
 .server-badge.good { background: var(--dsr-success-soft); color: var(--dsr-success); border-color: var(--dsr-success-line); }
 .server-badge.bad { background: var(--dsr-warning-soft); color: var(--dsr-warning); border-color: var(--dsr-warning-line); }
-.server-del {
+.server-edit, .server-del {
   flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
   background: var(--dsr-panel); border: 1px solid var(--dsr-line); color: var(--dsr-muted); font-size: 12px;
 }
+.server-edit:active { color: var(--dsr-accent-strong); }
 .server-del:active { color: var(--dsr-error); }
 .server-add { display: flex; gap: 8px; padding: 0 14px 13px; }
 .server-add input {