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

package/gateway-stats.cjs

@@ -47,6 +47,8 @@ const BUCKET_PRICE_KEY = {
 }
 
 const BJ_OFFSET_MS = 8 * 3600 * 1000
+// 定价生效日(北京时间): 2026-08-17 零点更新, 此前的 token 不计入费用统计
+const PRICING_START_DATE = '2026-08-17'
 const DAYS_DIR = 'days'
 const CURSORS_FILE = 'cursors.json'
 
@@ -245,6 +247,7 @@ class StatsStore {
 
     const model = eventModel(event) || fallbackModel || 'unknown'
     const { date, hour, period } = eventKey(time)
+    if (date < PRICING_START_DATE) return { processed: false, gap: false, skip: true }
     const day = this._loadDay(date)
     const hourBucket = day.hours[hour] || (day.hours[hour] = {})
     const modelBucket = hourBucket[model] || (hourBucket[model] = emptyBucket())
@@ -313,12 +316,14 @@ class StatsStore {
           if (usage) {
             const model = eventModel(event) || currentModel || 'unknown'
             const { date, hour, period } = eventKey(event.time)
-            const day = this._loadDay(date)
-            const hourBucket = day.hours[hour] || (day.hours[hour] = {})
-            const modelBucket = hourBucket[model] || (hourBucket[model] = emptyBucket())
-            addUsage(modelBucket, model, period, usage)
-            this._saveDay(day)
-            processed++
+            if (date >= PRICING_START_DATE) {
+              const day = this._loadDay(date)
+              const hourBucket = day.hours[hour] || (day.hours[hour] = {})
+              const modelBucket = hourBucket[model] || (hourBucket[model] = emptyBucket())
+              addUsage(modelBucket, model, period, usage)
+              this._saveDay(day)
+              processed++
+            }
           }
         }
         lastSeq = event.seq
@@ -362,10 +367,16 @@ class StatsStore {
   summary(days) {
     const n = Math.max(1, Math.min(Number(days) || 7, 90))
     const out = []
-    for (let i = n - 1; i >= 0; i--) {
-      const d = new Date(Date.now() + BJ_OFFSET_MS)
-      d.setUTCDate(d.getUTCDate() - i)
-      const date = `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`
+    // 查询窗口起点: 不早于定价生效日(生效日之前不统计)
+    const today = beijingDate(Date.now())
+    const startD = new Date(Date.now() + BJ_OFFSET_MS)
+    startD.setUTCDate(startD.getUTCDate() - (n - 1))
+    const windowStart = `${startD.getUTCFullYear()}-${pad2(startD.getUTCMonth() + 1)}-${pad2(startD.getUTCDate())}`
+    const first = windowStart > PRICING_START_DATE ? windowStart : PRICING_START_DATE
+    const [fy, fm, fd] = first.split('-').map(Number)
+    for (let cur = Date.UTC(fy, fm - 1, fd); ; cur += 86400_000) {
+      const date = beijingDate(cur)
+      if (date > today) break
       const day = this._loadDay(date)
       const s = dayTotals(day)
       const byModel = {}
@@ -383,7 +394,9 @@ class StatsStore {
   }
 
   detail(date) {
-    const day = this._loadDay(date)
+    // 生效日前不返回统计(页面会展示空态与生效日提示)
+    const effective = date >= PRICING_START_DATE ? date : PRICING_START_DATE
+    const day = this._loadDay(effective)
     const hours = []
     for (let hour = 0; hour < 24; hour++) {
       const models = day.hours[hour] || {}
@@ -391,12 +404,13 @@ class StatsStore {
       for (const bucket of Object.values(models)) mergeBucket(total, bucket)
       hours.push({ hour, period: periodOfHour(hour), models, total })
     }
-    return { date, hours }
+    return { date: effective, pricingStart: PRICING_START_DATE, hours }
   }
 }
 
 module.exports = {
   BJ_OFFSET_MS,
+  PRICING_START_DATE,
   PEAK_HOURS,
   PRICES,
   beijingHour,

package/package.json

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

package/public/admin.html

@@ -20,7 +20,16 @@
     .stat-card.ok .v { color: var(--dsr-success); } .stat-card.warn .v { color: var(--dsr-warning); }
     .stats-dash { margin-bottom: 14px; }
     .stats-dash .stat-grid { margin-bottom: 8px; }
-    .stats-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 12px 14px 10px; background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); overflow-x: auto; overflow-y: hidden; }
+    .stats-chart { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding: 12px 14px 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: 11px; color: var(--dsr-muted); margin: 6px 2px 0; }
+    .stats-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
+    .stats-legend .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
+    .stats-legend .sw.peak { background: var(--dsr-accent-strong); }
+    .stats-legend .sw.off { background: var(--dsr-accent-2); }
+    .bucket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-top: 6px; }
+    .bucket-grid .b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; 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-bar { flex: 1; min-width: 38px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
     .stats-bar .bars { width: 100%; max-width: 46px; 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%; }
@@ -29,6 +38,7 @@
     .stats-bar .lbl { font-size: 10px; color: var(--dsr-muted); white-space: nowrap; }
     .stats-bar .val { font-size: 10px; color: var(--dsr-text); white-space: nowrap; }
     .stats-empty { color: var(--dsr-muted); text-align: center; padding: 20px 0; font-size: 12px; }
+    .stats-note { color: var(--dsr-muted); font-size: 11px; line-height: 1.6; margin-top: 8px; }
     .table-wrap { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); overflow-x: auto; }
     table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 0; }
     th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--dsr-line); vertical-align: top; }
@@ -158,7 +168,9 @@
       <div class="stats-dash">
         <div class="section-head"><span data-i18n="stats.title">Token 统计</span><span id="stats-sub" class="muted"></span></div>
         <div class="stat-grid" 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>
       </div>
 
       <div class="section-head"><span data-i18n="devices">已连接设备</span><span id="device-summary" class="muted"></span></div>
@@ -237,6 +249,7 @@
         'stats.peak': '高峰', 'stats.off': '空闲',
         'stats.days': '近 {n} 天',
         'stats.gatewayDown': '统计需要 8787 网关运行', 'stats.empty': '暂无统计，产生会话后自动聚合',
+        'stats.note': '注：本数据仅在使用 DeepSeek 官方 API 时估算；基于 token 计算，与官网账单可能有出入，一切以官网为准。统计自 2026-08-17 定价生效日起。',
         'unit.sec': ' 秒', 'unit.min': ' 分钟', 'unit.hour': ' 小时 ', 'unit.minShort': ' 分', 'unit.day': ' 天 ',
         'device.installedNotRunning': '网关已安装 · 当前未运行', 'device.noGatewayBinary': '未检测到网关程序',
         'device.ipRefresh': '{n} 个 IP · 每 5 秒刷新',
@@ -308,6 +321,7 @@
         'stats.peak': 'Peak', 'stats.off': 'Off-peak',
         'stats.days': 'Last {n} days',
         'stats.gatewayDown': 'Stats require the gateway on 8787', 'stats.empty': 'No stats yet — they aggregate as sessions happen',
+        'stats.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.',
         'unit.sec': 's', 'unit.min': 'min', 'unit.hour': 'h ', 'unit.minShort': 'm', 'unit.day': 'd ',
         'device.installedNotRunning': 'Gateway installed · not running', 'device.noGatewayBinary': 'Gateway binary not found',
         'device.ipRefresh': '{n} IPs · refreshed every 5s',

package/public/admin.js

@@ -59,6 +59,8 @@ async function loadStats() {
     $('stats-cards').innerHTML = ''
     $('stats-chart').innerHTML = `<div class="stats-empty">${t('stats.gatewayDown')}</div>`
     $('stats-sub').textContent = ''
+    $('stats-note').textContent = ''
+    $('stats-legend').innerHTML = ''
   }
 }
 
@@ -67,6 +69,8 @@ function renderStats(days) {
     $('stats-cards').innerHTML = ''
     $('stats-chart').innerHTML = `<div class="stats-empty">${t('stats.empty')}</div>`
     $('stats-sub').textContent = ''
+    $('stats-note').textContent = t('stats.note')
+    $('stats-legend').innerHTML = ''
     return
   }
   const today = days[days.length - 1]
@@ -76,21 +80,29 @@ function renderStats(days) {
   const totalCost = peakCost + offCost
   const peakShare = totalCost > 0 ? Math.round(peakCost / totalCost * 100) : 0
   $('stats-cards').innerHTML = `
-    <div class="stat-card"><div class="v">${fmtTokens(totalTokens)}</div><div class="k">${t('stats.todayTokens')} · ${t('stats.input')} ${fmtTokens(today.total.input)} · ${t('stats.cacheRead')} ${fmtTokens(today.total.cacheRead)} · ${t('stats.cacheWrite')} ${fmtTokens(today.total.cacheWrite)} · ${t('stats.output')} ${fmtTokens(today.total.output)}</div></div>
+    <div class="stat-card"><div class="v">${fmtTokens(totalTokens)} <span style="font-size:12px;font-weight:500;color:var(--dsr-muted)">${t('stats.todayTokens')}</span></div>
+      <div class="bucket-grid">
+        <div class="b"><span class="n">${t('stats.input')}</span><span class="t">${fmtTokens(today.total.input)}</span></div>
+        <div class="b"><span class="n">${t('stats.cacheRead')}</span><span class="t">${fmtTokens(today.total.cacheRead)}</span></div>
+        <div class="b"><span class="n">${t('stats.cacheWrite')}</span><span class="t">${fmtTokens(today.total.cacheWrite)}</span></div>
+        <div class="b"><span class="n">${t('stats.output')}</span><span class="t">${fmtTokens(today.total.output)}</span></div>
+      </div></div>
     <div class="stat-card"><div class="v">${fmtCost(totalCost)}</div><div class="k">${t('stats.todayCost')} · ${t('stats.peak')} ${fmtCost(peakCost)} / ${t('stats.off')} ${fmtCost(offCost)}</div></div>
     <div class="stat-card ${peakShare >= 50 ? 'warn' : 'ok'}"><div class="v">${peakShare}%</div><div class="k">${t('stats.peakShare')} · ${t('stats.days', { n: days.length })}</div></div>`
   $('stats-sub').textContent = today.date
+  $('stats-note').textContent = t('stats.note')
+  $('stats-legend').innerHTML = `<span class="lg"><span class="sw peak"></span>${t('stats.peak')}</span><span class="lg"><span class="sw off"></span>${t('stats.off')}</span>`
 
-  // 近 7 日柱状图: 每根按费用堆叠高峰/空闲, 高度按费用相对比例
+  // 近 7 日柱状图: 柱总高按当日费用相对窗口最大值, 柱内峰/谷按当日实际占比堆叠
   const maxCost = Math.max(...days.map(d => (d.total.cost || 0)), 0.0001)
   $('stats-chart').innerHTML = days.map(d => {
     const cost = d.total.cost || 0
-    const peakH = Math.max(2, Math.round((d.peak.cost || 0) / maxCost * 100))
-    const offH = Math.max(0, Math.round((d.off.cost || 0) / maxCost * 100))
-    const total = peakH + offH
+    const peakH = cost > 0 ? Math.round((d.peak.cost || 0) / cost * 100) : 0
+    const offH = cost > 0 ? Math.max(0, 100 - peakH) : 0
+    const totalH = cost > 0 ? Math.max(3, Math.round(cost / maxCost * 100)) : 0
     const label = d.date.slice(5)
     return `<div class="stats-bar" title="${d.date} · ${t('stats.peak')} ${fmtCost(d.peak.cost)} · ${t('stats.off')} ${fmtCost(d.off.cost)} · tokens ${fmtTokens(bucketTokens(d.total))}">
-      <div class="bars" style="height:${Math.max(total, 2)}%">
+      <div class="bars" style="height:${totalH}%">
         <div class="seg peak" style="height:${peakH}%"></div>
         <div class="seg off" style="height:${offH}%"></div>
       </div>

package/public/app.js

@@ -108,6 +108,92 @@ function fmtFullTime(ts) {
 function apiUrl(path) {
   return (state.server || '') + path
 }
+
+function fmtCost(n) {
+  return '¥' + (Number(n) || 0).toFixed(2)
+}
+
+function bucketTokens(b) {
+  return (b.input || 0) + (b.cacheRead || 0) + (b.cacheWrite || 0) + (b.output || 0)
+}
+
+/* ---------------- Token 统计页 ---------------- */
+async function loadStats() {
+  const cards = $('stats-cards')
+  const chart = $('stats-chart')
+  const note = $('stats-note')
+  if (!state.token) {
+    cards.innerHTML = ''
+    chart.innerHTML = `<div class="stats-empty">${t('statsPage.gatewayDown')}</div>`
+    note.textContent = ''
+    $('stats-legend').innerHTML = ''
+    return
+  }
+  try {
+    const res = await fetch(apiUrl('/stats/summary?days=7'), {
+      headers: { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': CAP?.isNativePlatform?.() ? 'app' : 'web' }
+    })
+    if (res.status === 401) { authFailure(); return }
+    if (!res.ok) throw new Error('HTTP ' + res.status)
+    const json = await res.json()
+    renderStats(json.days || [])
+  } catch (e) {
+    cards.innerHTML = ''
+    chart.innerHTML = `<div class="stats-empty">${t('statsPage.gatewayDown')}</div>`
+    note.textContent = ''
+    $('stats-legend').innerHTML = ''
+  }
+}
+
+function renderStats(days) {
+  const cards = $('stats-cards')
+  const chart = $('stats-chart')
+  const note = $('stats-note')
+  if (!days.length) {
+    cards.innerHTML = ''
+    chart.innerHTML = `<div class="stats-empty">${t('statsPage.empty')}</div>`
+    note.textContent = t('statsPage.note')
+    $('stats-sub').textContent = ''
+    $('stats-legend').innerHTML = ''
+    return
+  }
+  const today = days[days.length - 1]
+  const totalTokens = bucketTokens(today.total)
+  const peakCost = today.peak.cost || 0
+  const offCost = today.off.cost || 0
+  const totalCost = peakCost + offCost
+  const peakShare = totalCost > 0 ? Math.round(peakCost / totalCost * 100) : 0
+  cards.innerHTML = `
+    <div class="scard span2"><div class="v">${fmtTokens(totalTokens)} <span style="font-size:11px;font-weight:500;color:var(--dsr-muted)">${t('statsPage.todayTokens')}</span></div>
+      <div class="bucket-grid">
+        <div class="b"><span class="n">${t('statsPage.input')}</span><span class="t">${fmtTokens(today.total.input)}</span></div>
+        <div class="b"><span class="n">${t('statsPage.cacheRead')}</span><span class="t">${fmtTokens(today.total.cacheRead)}</span></div>
+        <div class="b"><span class="n">${t('statsPage.cacheWrite')}</span><span class="t">${fmtTokens(today.total.cacheWrite)}</span></div>
+        <div class="b"><span class="n">${t('statsPage.output')}</span><span class="t">${fmtTokens(today.total.output)}</span></div>
+      </div></div>
+    <div class="scard"><div class="v">${fmtCost(totalCost)}</div><div class="k">${t('statsPage.todayCost')}<br>${t('statsPage.peak')} ${fmtCost(peakCost)}<br>${t('statsPage.off')} ${fmtCost(offCost)}</div></div>
+    <div class="scard"><div class="v">${peakShare}%</div><div class="k">${t('statsPage.peakShare')}<br>${t('statsPage.days', { n: days.length })}</div></div>`
+  $('stats-sub').textContent = today.date
+  note.textContent = t('statsPage.note')
+  $('stats-legend').innerHTML = `<span class="lg"><span class="sw peak"></span>${t('statsPage.peak')}</span><span class="lg"><span class="sw off"></span>${t('statsPage.off')}</span>`
+  const maxCost = Math.max(...days.map(d => (d.total.cost || 0)), 0.0001)
+  chart.innerHTML = days.map(d => {
+    const cost = d.total.cost || 0
+    // 峰/谷按该日实际费用占比堆叠, 柱总高按当日费用相对窗口最大值; 不再加最小高度, 保证占比真实
+    const peakH = cost > 0 ? Math.round((d.peak.cost || 0) / cost * 100) : 0
+    const offH = cost > 0 ? Math.max(0, 100 - peakH) : 0
+    const totalH = cost > 0 ? Math.max(3, Math.round(cost / maxCost * 100)) : 0
+    const label = d.date.slice(5)
+    return `<div class="stats-bar" title="${d.date} · ${t('statsPage.peak')} ${fmtCost(d.peak.cost)} · ${t('statsPage.off')} ${fmtCost(d.off.cost)} · tokens ${fmtTokens(bucketTokens(d.total))}">
+      <div class="bars" style="height:${totalH}%">
+        <div class="seg peak" style="height:${peakH}%"></div>
+        <div class="seg off" style="height:${offH}%"></div>
+      </div>
+      <div class="val">${cost > 0 ? fmtCost(cost) : ''}</div>
+      <div class="lbl">${label}</div>
+    </div>`
+  }).join('')
+}
 async function rpc(method, payload = {}) {
   const res = await fetch(apiUrl('/api/' + method), {
     method: 'POST',
@@ -1851,12 +1937,13 @@ function notify(title, body) {
 
 /* ---------------- 视图切换 ---------------- */
 function showView(id) {
-  for (const v of ['view-home', 'view-files', 'view-session', 'view-activity', 'view-settings']) $(v).classList.toggle('hidden', v !== id)
+  for (const v of ['view-home', 'view-files', 'view-session', 'view-activity', 'view-stats', 'view-settings']) $(v).classList.toggle('hidden', v !== id)
   // 离开会话页必须清掉 in-session, 否则其他页面顶栏被 body 样式隐藏
   document.body.classList.toggle('in-session', id === 'view-session')
   document.querySelectorAll('.nav-btn').forEach(b => b.classList.toggle('active', b.dataset.view === id))
   window.scrollTo(0, 0)
   if (id === 'view-files' && !state.fs.loaded) loadFs(null, { silent: true })
+  if (id === 'view-stats') loadStats()
 }
 
 function updateConn() {

package/public/index.html

@@ -128,6 +128,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">
@@ -189,6 +198,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>
 
@@ -258,7 +268,13 @@
         'a11y.hostAdmin': '主机管理', 'a11y.refresh': '刷新', 'a11y.more': '更多操作', 'a11y.moreTitle': '指令/权限/模型',
         'conn.on': '已连接', 'conn.off': '未连接', 'conn.reconnecting': '连接中断，正在重连…',
         '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}',
@@ -375,7 +391,13 @@
         '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…',
         '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}',

package/public/styles.css

@@ -450,6 +450,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 {

package/public/update.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.5.7-rc.1",
+  "version": "0.5.7",
   "apkUrl": "dsh-remote.apk",
-  "releasedAt": "2026-08-17T05:34:41.185Z",
-  "notes": "新增：Token 统计 v1 — 管理页展示今日四桶/费用/高峰占比与近 7 日柱状图，按北京时间高峰计费；历史会话自动回填。"
+  "releasedAt": "2026-08-17T06:01:38.138Z",
+  "notes": "新增：Token 统计 v1（管理页 + App 统计页）：今日四桶/费用/高峰占比与近 7 日柱状图，按北京时间高峰计费，统计自 2026-08-17 定价生效日起；数据基于 token 估算，以官网账单为准。"
 }

package/public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.5.7-rc.1"
+  "version": "0.5.7"
 }