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

package/README.en.md

@@ -37,6 +37,7 @@ The app is embedded in the plugin package (`apk/dsh-remote.apk`) — install the
 - Tap **QR code** in the desktop drawer → scan it with the phone to open the admin page → download the app from that page
 - Or open `http://<gateway-IP>:8787` in a browser to download
 - App updates are pushed by the gateway too (`update.json` relative path), never touching GitHub
+- A desktop browser opening `http://<gateway-IP>:8787` auto-enters the desktop WebUI (sidebar sessions + files + settings + stats + approval notification stack)
 
 The app has built-in multi-server latency switching and offline chat history caching; downloaded files are stored in the system `Download/dsh-remote` folder.
 

package/README.md

@@ -37,6 +37,7 @@ App 已随插件包内嵌（`apk/dsh-remote.apk`），装好插件即可获取
 - 桌面抽屉点「二维码」→ 手机扫码打开管理页 → 页面提供 App 下载
 - 或浏览器直接访问 `http://<网关IP>:8787` 下载
 - App 更新同样走网关自动推送（`update.json` 相对路径），全程不绕 GitHub
+- 电脑浏览器打开 `http://<网关IP>:8787` 自动进入桌面端 WebUI（侧栏会话 + 文件 + 设置 + 统计 + 审批通知卡片栈）
 
 App 内置多服务器测速切换与聊天记录离线缓存，下载文件统一放系统「下载/dsh-remote」。
 

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.8",
   "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>