dsh-model-usage 0.8.3 → 0.8.5

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this package are documented in this file. Versions follow Semantic Versioning.
 
+## 0.8.5
+
+- Balance spend trend: add a centered enlarged chart view, a points-only toggle, and clearer spacing between dense ten-minute samples.
+
+## 0.8.4
+
+- Command Code balance history: sample on ten-minute clock marks, retain the current and two
+  preceding calendar months, support custom date ranges and daily week/month aggregation, and add
+  month deletion and full reset controls.
+
 ## 0.8.3
 
 - Command Code balance history: record account balance snapshots every 30 minutes, retain up to

package/README.md

@@ -8,13 +8,20 @@ using.
 Queries run in the host process with the provider's own credential reference. The browser receives
 normalized values and the credential reference name; credential values never leave the host.
 
-![Usage panel](docs/screenshots/usage-panel.png)
+![Usage panel](docs/screenshots/u1.png)
+
+![Usage panel](docs/screenshots/u2.png)
+
+![Usage panel](docs/screenshots/u3.png)
+
+![Usage panel](docs/screenshots/u4.png)
+
+![Usage panel](docs/screenshots/u5.png)
 
 *Usage panel for a Command Code subscription (Chinese UI): five-hour and weekly quota windows,
 credit balance, spend, request count, and the model and credential reference used for the query.*
 
-*Command Code 订阅的用量面板：5 小时 / 7 天窗口、信用余额、已花费、请求数，以及本次查询使用的
-模型与凭据引用。*
+*用量面板：兼容深浅色模式*
 
 Published on npm as [`dsh-model-usage`](https://www.npmjs.com/package/dsh-model-usage).
 
@@ -26,10 +33,11 @@ Published on npm as [`dsh-model-usage`](https://www.npmjs.com/package/dsh-model-
   model the conversation runs on.
 - **Background refresh.** The mounted component refreshes on an interval, including while the panel
   is closed.
-- **Command Code balance history.** Successful balance queries save a baseline and then record
-  balance changes every 30 minutes, independently of the display refresh setting. Samples are kept
-  locally per account for up to seven days and shown as a spend line chart with last 30 minutes,
-  last 12 hours, today and yesterday filters.
+- **Command Code balance history.** The plugin queries on the system clock's ten-minute marks
+  (`:00`, `:10`, `:20`, …), independently of the display refresh setting. Samples are kept locally
+  per account for the current calendar month and the two preceding calendar months. The chart has
+  uniform time-axis ticks, actual sample positions for short ranges, daily totals for week/month
+  views, custom start/end dates, and month deletion/reset controls.
 - **Provider directory.** The deployment's provider routes are listed with their usage adapter,
   credential reference name and configuration state. Values are never read out.
 
@@ -254,9 +262,11 @@ OpenCode Zen（按量付费）没有用量接口（`/zen/v1/usage`、`/me`、`/c
   5 分钟。策略保存在 `dsh-model-usage:refresh`。
 - 数据仍在间隔内时打开面板不会发起请求；「刷新」按钮可强制查询。
 - 查询失败时保留上次数据并追加 `上次刷新失败：…`；仅在从未成功时显示整屏错误与「重试」。
-- Command Code 余额历史独立于面板刷新开关，每 30 分钟采样并按账户保存在浏览器本地，最多保留
-  七天；用量卡片提供「最近半小时 / 最近半天 / 今天 / 昨天」折线图筛选。首次记录作为余额基线，
-  后续每段消耗按前后余额差计算，余额增加时该段显示为零。
+- Command Code 余额历史独立于面板刷新开关，在系统时间的每小时 `00 / 10 / 20 / 30 / 40 / 50`
+  分自动查询。数据按账户保存在浏览器本地，保留当前自然月及前两个月；例如十月会保留十月、
+  九月、八月，七月数据自动清除。用量卡片提供「今天 / 昨天 / 近一周 / 近一月 / 自定义」筛选，
+  周和月按每天合计，短时间段按真实查询时间定位折线点，并可清除指定月份或重置当前账户记录。
+  首次记录作为余额基线，后续每段消耗按前后余额差计算，余额增加时该段显示为零。
 - host 侧单次用量请求超时 30 秒，浏览器侧另有 45 秒外层超时。
 
 ### 安全

package/icon.svg

@@ -1,7 +1,29 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="Usage">
-  <rect x="1" y="1" width="30" height="30" rx="8" fill="#1f6feb"/>
-  <path d="M7.5 21.5a8.5 8.5 0 0 1 17 0" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/>
-  <path d="M16 21.5 21.4 16.4" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/>
-  <circle cx="16" cy="21.5" r="2" fill="#ffffff"/>
-  <path d="M9.5 26h13" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" opacity="0.7"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Usage">
+  <defs>
+    <linearGradient id="usage-bg" x1="7" y1="4" x2="57" y2="60" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0A84FF"/>
+      <stop offset="0.55" stop-color="#147EFB"/>
+      <stop offset="1" stop-color="#30D158"/>
+    </linearGradient>
+    <linearGradient id="usage-glass" x1="13" y1="11" x2="51" y2="55" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFFFFF" stop-opacity="0.24"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.08"/>
+    </linearGradient>
+    <filter id="usage-shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#003C7A" flood-opacity="0.22"/>
+    </filter>
+  </defs>
+
+  <rect x="2" y="2" width="60" height="60" rx="17" fill="url(#usage-bg)"/>
+  <rect x="8" y="8" width="48" height="48" rx="13" fill="url(#usage-glass)" stroke="#FFFFFF" stroke-opacity="0.22"/>
+
+  <g filter="url(#usage-shadow)" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 45.5h32" stroke-width="2" stroke-opacity="0.42"/>
+    <path d="M16 40.5 25 33l7 5 13-15" stroke-width="4"/>
+    <path d="m40.5 23 4.5 0 0 4.5" stroke-width="3"/>
+  </g>
+
+  <circle cx="16" cy="40.5" r="3.5" fill="#FFFFFF"/>
+  <circle cx="45" cy="23" r="3.5" fill="#30D158" stroke="#FFFFFF" stroke-width="2"/>
+  <circle cx="45" cy="23" r="1.2" fill="#FFFFFF"/>
 </svg>

package/lib/client.js

@@ -122,12 +122,24 @@ window.__ModuleLoader__.load({
       "card.hideRaw": "隐藏原始返回",
       "card.unrecognized": "接口返回的字段还没被识别，下面是原始返回（可以发给我做校准）",
       "history.title": "余额消耗趋势",
-      "history.range.30m": "最近半小时",
-      "history.range.12h": "最近半天",
+      "history.expand": "全屏查看余额消耗趋势",
+      "history.pointsOnly": "仅显示消耗点",
       "history.range.today": "今天",
       "history.range.yesterday": "昨天",
+      "history.range.week": "近一周",
+      "history.range.month": "近一月",
+      "history.range.custom": "自定义",
+      "history.start": "开始日期",
+      "history.end": "结束日期",
+      "history.apply": "应用时间段",
       "history.empty": "该时间段暂无足够的余额记录",
       "history.amount": "消耗",
+      "history.clearMonth": "清除所选月份",
+      "history.confirmClearMonth": "确定清除 {month} 的余额记录吗？",
+      "history.reset": "重置当前记录",
+      "history.month": "数据月份",
+      "history.noMonths": "暂无可清理的月份",
+      "history.confirmReset": "确定清除当前账户的全部余额记录吗？",
       "card.used": "已用",
       "card.total": "总额",
       "window.fiveHour": "5 小时窗口",
@@ -230,12 +242,24 @@ window.__ModuleLoader__.load({
       "card.hideRaw": "Hide raw response",
       "card.unrecognized": "These fields are not recognized yet — the raw response is below (send it over to calibrate)",
       "history.title": "Balance spend trend",
-      "history.range.30m": "Last 30 min",
-      "history.range.12h": "Last 12 hours",
+      "history.expand": "View balance spend trend full screen",
+      "history.pointsOnly": "Show points only",
       "history.range.today": "Today",
       "history.range.yesterday": "Yesterday",
+      "history.range.week": "Last 7 days",
+      "history.range.month": "Last 30 days",
+      "history.range.custom": "Custom",
+      "history.start": "Start date",
+      "history.end": "End date",
+      "history.apply": "Apply range",
       "history.empty": "Not enough balance samples for this period",
       "history.amount": "Spent",
+      "history.clearMonth": "Clear selected month",
+      "history.confirmClearMonth": "Clear balance records for {month}?",
+      "history.reset": "Reset current records",
+      "history.month": "Data month",
+      "history.noMonths": "No stored months to clear",
+      "history.confirmReset": "Clear all balance records for this account?",
       "card.used": "Used",
       "card.total": "Total",
       "window.fiveHour": "5-hour window",
@@ -291,47 +315,49 @@ window.__ModuleLoader__.load({
     const STYLES = [
       "@keyframes dsh-usage-spin { to { transform: rotate(360deg); } }",
       "@keyframes dsh-usage-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }",
-      ".dsh-usage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 6px 14px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 18px; color: var(--dsw-alias-label-primary); background: transparent; font-size: 13px; font-weight: 400; line-height: 20px; cursor: pointer; }",
+      ".dsh-usage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 6px 14px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-size: 13px; font-weight: 500; line-height: 20px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }",
       ".dsh-usage-btn:hover { background: var(--dsw-alias-bg-layer-2); }",
+      ".dsh-usage-btn:active { transform: scale(0.98); }",
       ".dsh-usage-btn-busy::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dsw-alias-state-success-primary); animation: dsh-usage-pulse 1.2s ease-in-out infinite; }",
-      ".dsh-usage-action { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 400; line-height: 20px; cursor: pointer; }",
-      ".dsh-usage-action-primary { background: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-base); }",
-      ".dsh-usage-action-outline { background: transparent; border-color: var(--dsw-alias-border-l2); color: var(--dsw-alias-label-primary); }",
+      ".dsh-usage-action { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-size: 13px; font-weight: 500; line-height: 20px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }",
+      ".dsh-usage-action:active { transform: scale(0.98); }",
+      ".dsh-usage-action-primary { background: #0A84FF; border-color: #0A84FF; color: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }",
+      ".dsh-usage-action-outline { background: var(--dsw-alias-bg-layer-1); border-color: var(--dsw-alias-border-l2); color: var(--dsw-alias-label-primary); }",
       ".dsh-usage-action-ghost { background: transparent; border-color: transparent; color: var(--dsw-alias-label-secondary); }",
       ".dsh-usage-action-outline:hover, .dsh-usage-action-ghost:hover { background: var(--dsw-alias-bg-layer-2); }",
       ".dsh-usage-action-ghost:hover { color: var(--dsw-alias-label-primary); }",
-      ".dsh-usage-modal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.28); }",
-      ".dsh-usage-modal-dialog { display: flex; flex-direction: column; width: min(560px, 100%); max-height: 100%; border: 1px solid var(--dsw-alias-border-l2); border-radius: 14px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); outline: none; }",
-      ".dsh-usage-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }",
-      ".dsh-usage-modal-title { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--dsw-alias-label-primary); }",
-      ".dsh-usage-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 1; cursor: pointer; }",
+      ".dsh-usage-modal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 12, 18, 0.34); backdrop-filter: blur(12px) saturate(125%); -webkit-backdrop-filter: blur(12px) saturate(125%); }",
+      ".dsh-usage-modal-dialog { display: flex; flex-direction: column; width: min(620px, 100%); max-height: 100%; border: 1px solid var(--dsw-alias-border-l2); border-radius: 16px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.1); outline: none; overflow: hidden; }",
+      ".dsh-usage-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 13px; border-bottom: 1px solid var(--dsw-alias-border-l2); }",
+      ".dsh-usage-modal-title { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--dsw-alias-label-primary); }",
+      ".dsh-usage-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 1; cursor: pointer; transition: background 140ms ease; }",
       ".dsh-usage-modal-close:hover { background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }",
-      ".dsh-usage-modal-content { padding: 0 16px; overflow: hidden; }",
-      ".dsh-usage-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 14px; }",
+      ".dsh-usage-modal-content { padding: 14px 18px; overflow: hidden; }",
+      ".dsh-usage-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--dsw-alias-border-l2); }",
       ".dsh-usage-state { padding: 12px 0; font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-secondary); }",
       ".dsh-usage-error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 0; }",
       ".dsh-usage-error-text { font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary); word-break: break-all; }",
       ".dsh-usage-inline-error { font-size: 12px; line-height: 18px; color: var(--dsw-alias-state-error-primary); word-break: break-all; }",
-      ".dsh-usage-stack { display: flex; flex-direction: column; gap: 10px; }",
+      ".dsh-usage-stack { display: flex; flex-direction: column; gap: 12px; }",
       ".dsh-usage-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }",
       ".dsh-usage-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }",
       ".dsh-usage-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
       ".dsh-usage-status-actions { display: inline-flex; align-items: center; gap: 6px; }",
       ".dsh-usage-spinner { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--dsw-alias-border-l2); border-top-color: var(--dsw-alias-label-primary); animation: dsh-usage-spin 0.8s linear infinite; }",
-      ".dsh-usage-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 13px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; cursor: pointer; }",
+      ".dsh-usage-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 9px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }",
       ".dsh-usage-chip:hover { background: var(--dsw-alias-bg-layer-2); }",
-      ".dsh-usage-chip-active { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-state-success-primary); }",
+      ".dsh-usage-chip-active { color: #FFFFFF; border-color: #0A84FF; background: #0A84FF; }",
       ".dsh-usage-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }",
       ".dsh-usage-modelbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }",
       ".dsh-usage-modelbar-label { flex: 0 0 auto; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }",
-      ".dsh-usage-balance-card { border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }",
-      ".dsh-usage-balance-card-title { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--dsw-alias-label-primary); }",
+      ".dsh-usage-balance-card { border: 1px solid var(--dsw-alias-border-l2); border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035); }",
+      ".dsh-usage-balance-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--dsw-alias-label-primary); }",
       ".dsh-usage-balance-status { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--dsw-alias-label-secondary); }",
-      ".dsh-usage-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }",
+      ".dsh-usage-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 25px; }",
       ".dsh-usage-balance-label { font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary); }",
-      ".dsh-usage-balance-value { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }",
+      ".dsh-usage-balance-value { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }",
       ".dsh-usage-refresh { display: flex; justify-content: flex-end; }",
-      ".dsh-usage-meta { border-top: 1px solid var(--dsw-alias-border-l2); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }",
+      ".dsh-usage-meta { border-top: 1px solid var(--dsw-alias-border-l2); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }",
       ".dsh-usage-meta-row { display: flex; gap: 8px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }",
       ".dsh-usage-meta-key { flex: 0 0 auto; }",
       ".dsh-usage-meta-val { flex: 1 1 auto; word-break: break-all; font-variant-numeric: tabular-nums; }",
@@ -339,11 +365,11 @@ window.__ModuleLoader__.load({
       ".dsh-usage-field { display: flex; flex-direction: column; gap: 6px; }",
       ".dsh-usage-field-label { font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary); }",
       ".dsh-usage-hint { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }",
-      ".dsh-usage-input { height: 34px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 20px; }",
+      ".dsh-usage-input { height: 34px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-size: 13px; line-height: 20px; }",
       ".dsh-usage-mode-toggle { display: flex; flex-wrap: wrap; gap: 8px; }",
-      ".dsh-usage-mode-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 20px; cursor: pointer; }",
+      ".dsh-usage-mode-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-secondary); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }",
       ".dsh-usage-mode-btn:hover { background: var(--dsw-alias-bg-layer-2); }",
-      ".dsh-usage-mode-btn-active { background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }",
+      ".dsh-usage-mode-btn-active { background: #0A84FF; border-color: #0A84FF; color: #FFFFFF; }",
       ".dsh-usage-cc-window { display: flex; flex-direction: column; gap: 6px; }",
       ".dsh-usage-cc-window-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary); }",
       ".dsh-usage-cc-window-val { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }",
@@ -355,11 +381,32 @@ window.__ModuleLoader__.load({
       ".dsh-usage-history { display: flex; flex-direction: column; gap: 10px; }",
       ".dsh-usage-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }",
       ".dsh-usage-history-title { color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 500; line-height: 20px; }",
-      ".dsh-usage-history-ranges { display: flex; gap: 4px; flex-wrap: wrap; }",
-      ".dsh-usage-history-ranges .dsh-usage-mode-btn { height: 26px; padding: 0 8px; font-size: 11px; }",
-      ".dsh-usage-history-chart { width: 100%; height: 148px; overflow: visible; }",
+      ".dsh-usage-history-ranges { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; background: var(--dsw-alias-bg-layer-2); flex-wrap: wrap; }",
+      ".dsh-usage-history-ranges .dsh-usage-mode-btn { min-height: 27px; padding: 0 10px; border-color: transparent; border-radius: 7px; background: transparent; font-size: 11px; }",
+      ".dsh-usage-history-ranges .dsh-usage-mode-btn-active { background: var(--dsw-alias-bg-layer-1); border-color: var(--dsw-alias-border-l2); color: var(--dsw-alias-label-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }",
+      ".dsh-usage-history-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }",
+      ".dsh-usage-history-points-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; cursor: pointer; user-select: none; }",
+      ".dsh-usage-history-points-toggle input { appearance: none; position: relative; width: 30px; height: 18px; flex: 0 0 30px; margin: 0; border: 1px solid var(--dsw-alias-border-l2); border-radius: 999px; background: var(--dsw-alias-bg-layer-2); cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }",
+      ".dsh-usage-history-points-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 140ms ease; }",
+      ".dsh-usage-history-points-toggle input:checked { border-color: #0A84FF; background: #0A84FF; }",
+      ".dsh-usage-history-points-toggle input:checked::after { transform: translateX(12px); }",
+      ".dsh-usage-history-points-toggle input:focus-visible { outline: 2px solid rgba(10, 132, 255, 0.45); outline-offset: 2px; }",
+      ".dsh-usage-history-form { display: flex; align-items: end; gap: 6px; flex-wrap: wrap; }",
+      ".dsh-usage-history-date { display: flex; flex-direction: column; gap: 3px; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 16px; }",
+      ".dsh-usage-history-date input, .dsh-usage-history-month { height: 30px; min-width: 112px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-size: 12px; }",
+      ".dsh-usage-history-date input:focus, .dsh-usage-history-month:focus, .dsh-usage-input:focus { outline: 2px solid rgba(10, 132, 255, 0.45); outline-offset: 1px; }",
+      ".dsh-usage-history-manage { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }",
+      ".dsh-usage-history-manage .dsh-usage-action { height: 28px; padding: 0 9px; font-size: 11px; }",
+      ".dsh-usage-history-chart { display: block; width: 100%; height: auto; aspect-ratio: 360 / 132; max-height: 220px; overflow: visible; }",
+      ".dsh-usage-history-chart-trigger { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }",
+      ".dsh-usage-history-chart-trigger:focus-visible { outline: 2px solid #0A84FF; outline-offset: 3px; }",
+      ".dsh-usage-history-fullscreen-dialog { width: min(960px, 88vw); height: min(480px, 60vh); max-height: calc(100dvh - 40px); }",
+      ".dsh-usage-history-fullscreen-content { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 12px; padding: 14px 18px 18px; overflow: auto; }",
+      ".dsh-usage-history-fullscreen-content .dsh-usage-history-chart { width: 100%; height: min(34vh, 300px); min-height: 200px; max-height: none; aspect-ratio: auto; }",
+      ".dsh-usage-history-fullscreen-content .dsh-usage-history-ranges { align-self: flex-start; }",
+      "@media (max-width: 640px) { .dsh-usage-history-fullscreen-dialog { width: calc(100vw - 24px); height: min(70vh, 560px); } .dsh-usage-history-fullscreen-content { padding: 12px 14px 16px; } .dsh-usage-history-fullscreen-content .dsh-usage-history-chart { height: max(32vh, 180px); min-height: 180px; } }",
       ".dsh-usage-history-empty { color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; padding: 8px 0; }",
-      ".dsh-usage-modal-body { max-height: max(140px, calc(100vh - 300px)); overflow-y: auto; overscroll-behavior: contain; }",
+      ".dsh-usage-modal-body { max-height: max(140px, calc(100vh - 260px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2) transparent; }",
       ".dsh-usage-provider-list { display: flex; flex-direction: column; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; overflow: hidden; }",
       ".dsh-usage-provider-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }",
       ".dsh-usage-provider-row + .dsh-usage-provider-row { border-top: 1px solid var(--dsw-alias-border-l2); }",
@@ -380,9 +427,8 @@ window.__ModuleLoader__.load({
     /** How often the open panel re-reads the clock and re-checks staleness. */
     const TICK_MS = 5000;
     const HISTORY_KEY = "dsh-model-usage:commandcode-history";
-    const HISTORY_INTERVAL_MS = 30 * 60 * 1000;
-    const HISTORY_RETENTION_MS = 7 * 24 * 60 * 60 * 1000;
-    const HISTORY_RANGES = ["30m", "12h", "today", "yesterday"];
+    const HISTORY_INTERVAL_MS = 10 * 60 * 1000;
+    const HISTORY_RANGES = ["today", "yesterday", "week", "month", "custom"];
     /** Everything Tab may land on inside a dialog, for the focus trap. */
     const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -428,6 +474,13 @@ window.__ModuleLoader__.load({
       return `${HISTORY_KEY}:${encodeURIComponent(account)}`;
     }
 
+    // Keep the current calendar month plus the two preceding complete months.
+    // In October this retains October, September and August, and removes July.
+    function historyCutoff(value = Date.now()) {
+      const date = new Date(value);
+      return new Date(date.getFullYear(), date.getMonth() - 2, 1).getTime();
+    }
+
     function readHistory(data) {
       const key = historyStorageKey(data);
       if (key === null) return [];
@@ -435,7 +488,7 @@ window.__ModuleLoader__.load({
         const parsed = JSON.parse(localStorage.getItem(key) ?? "[]");
         if (!Array.isArray(parsed)) return [];
         const now = Date.now();
-        const cutoff = now - HISTORY_RETENTION_MS;
+        const cutoff = historyCutoff(now);
         const retained = parsed.filter((point) => point !== null && typeof point === "object"
           && Number.isFinite(point.at) && point.at >= cutoff && point.at <= now
           && Number.isFinite(point.balance)
@@ -454,19 +507,43 @@ window.__ModuleLoader__.load({
       }
     }
 
+    function pruneStoredHistories(now = Date.now()) {
+      const prefix = `${HISTORY_KEY}:`;
+      const cutoff = historyCutoff(now);
+      try {
+        for (let index = localStorage.length - 1; index >= 0; index -= 1) {
+          const key = localStorage.key(index);
+          if (typeof key !== "string" || !key.startsWith(prefix)) continue;
+          let parsed;
+          try { parsed = JSON.parse(localStorage.getItem(key) ?? "[]"); } catch { parsed = []; }
+          const retained = Array.isArray(parsed)
+            ? parsed.filter((point) => point !== null && typeof point === "object"
+                && Number.isFinite(point.at) && point.at >= cutoff && point.at <= now
+                && Number.isFinite(point.balance)
+                && (point.spend === null || Number.isFinite(point.spend)))
+            : [];
+          if (retained.length === 0) localStorage.removeItem(key);
+          else if (retained.length !== parsed.length) localStorage.setItem(key, JSON.stringify(retained));
+        }
+      } catch {
+        // A storage restriction must not stop balance queries.
+      }
+    }
+
     function recordHistorySample(data, now = Date.now()) {
       const key = historyStorageKey(data);
       const balance = Number(data?.data?.credits?.totalRemaining);
       if (key === null || !Number.isFinite(balance)) return [];
+      pruneStoredHistories(now);
       const points = readHistory(data);
       const last = points[points.length - 1];
-      if (last !== undefined && now - last.at < HISTORY_INTERVAL_MS) return points;
+      if (last !== undefined && Math.floor(last.at / HISTORY_INTERVAL_MS) === Math.floor(now / HISTORY_INTERVAL_MS)) return points;
       points.push({
         at: now,
         balance,
         spend: last === undefined ? null : Math.max(0, last.balance - balance),
       });
-      const retained = points.filter((point) => point.at >= now - HISTORY_RETENTION_MS);
+      const retained = points.filter((point) => point.at >= historyCutoff(now));
       try {
         localStorage.setItem(key, JSON.stringify(retained));
       } catch {
@@ -475,6 +552,33 @@ window.__ModuleLoader__.load({
       return retained;
     }
 
+    function storedMonths(points) {
+      return [...new Set(points.map((point) => {
+        const date = new Date(point.at);
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+      }))].sort().reverse();
+    }
+
+    function clearHistoryMonth(data, month) {
+      const key = historyStorageKey(data);
+      if (key === null || !/^\d{4}-\d{2}$/.test(month)) return [];
+      const points = readHistory(data).filter((point) => {
+        const date = new Date(point.at);
+        const value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+        return value !== month;
+      });
+      try { localStorage.setItem(key, JSON.stringify(points)); } catch { /* memory view remains usable */ }
+      return points;
+    }
+
+    function resetHistoryStorage(data) {
+      const key = historyStorageKey(data);
+      if (key !== null) {
+        try { localStorage.removeItem(key); } catch { /* memory view remains usable */ }
+      }
+      return [];
+    }
+
     const MODEL_KEY = "dsh-model-usage:model";
     /** Key this plugin used before it was renamed to dsh-model-usage. */
     const LEGACY_MODEL_KEY = "dsh-desktop-usage:model";
@@ -578,7 +682,7 @@ window.__ModuleLoader__.load({
      * re-running it there would steal focus every few seconds.
      */
     function UsageModal(props) {
-      const { open, onClose, title, closeLabel, className, footer, children } = props;
+      const { open, onClose, title, closeLabel, className, overlayClassName, footer, children } = props;
       const dialogRef = React.useRef(null);
       const restoreRef = React.useRef(null);
       const closeRef = React.useRef(onClose);
@@ -636,7 +740,7 @@ window.__ModuleLoader__.load({
 
       if (!open) return null;
       return React.createElement("div", {
-        className: "dsh-usage-modal-overlay",
+        className: "dsh-usage-modal-overlay" + (overlayClassName ? ` ${overlayClassName}` : ""),
         onMouseDown: (event) => { if (event.target === event.currentTarget) closeRef.current(); },
       },
         React.createElement("div", {
@@ -737,82 +841,172 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function BalanceHistory({ points, range, onRange, t }) {
+    function dateInputValue(value) {
+      const date = new Date(value);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+    }
+
+    function localDateStart(value) {
+      const [year, month, day] = String(value).split("-").map(Number);
+      return Number.isFinite(year) && Number.isFinite(month) && Number.isFinite(day)
+        ? new Date(year, month - 1, day).getTime()
+        : NaN;
+    }
+
+    function BalanceHistory({ points, range, customRange, appliedCustomRange, selectedMonth, onRange, onCustomRange, onApplyCustomRange, onSelectMonth, onClearMonth, onReset, t }) {
+      const [expanded, setExpanded] = React.useState(false);
+      const [pointsOnly, setPointsOnly] = React.useState(false);
       const now = Date.now();
-      let start;
-      let end = now;
-      if (range === "30m") start = now - HISTORY_INTERVAL_MS;
-      else if (range === "12h") start = now - 12 * 60 * 60 * 1000;
-      else if (range === "yesterday") {
-        const today = new Date(now);
-        today.setHours(0, 0, 0, 0);
-        end = today.getTime();
-        start = end - 24 * 60 * 60 * 1000;
-      } else {
-        const today = new Date(now);
-        today.setHours(0, 0, 0, 0);
-        start = today.getTime();
+      const todayStart = new Date(new Date(now).setHours(0, 0, 0, 0)).getTime();
+      let start = todayStart;
+      let end = todayStart + 24 * 60 * 60 * 1000;
+      let daily = false;
+      if (range === "yesterday") {
+        start -= 24 * 60 * 60 * 1000;
+        end -= 24 * 60 * 60 * 1000;
+      } else if (range === "week") {
+        start -= 6 * 24 * 60 * 60 * 1000;
+        daily = true;
+      } else if (range === "month") {
+        start -= 29 * 24 * 60 * 60 * 1000;
+        daily = true;
+      } else if (range === "custom") {
+        const customStart = localDateStart(appliedCustomRange.start);
+        const customEnd = localDateStart(appliedCustomRange.end);
+        if (Number.isFinite(customStart) && Number.isFinite(customEnd) && customEnd >= customStart) {
+          start = customStart;
+          end = customEnd + 24 * 60 * 60 * 1000;
+          daily = end - start >= 7 * 24 * 60 * 60 * 1000;
+        }
+      }
+      const rawVisible = points.filter((point) => point.spend !== null && point.at >= start && point.at < end);
+      let visible = rawVisible;
+      if (daily) {
+        const buckets = new Map();
+        for (const point of rawVisible) {
+          const date = new Date(point.at);
+          const bucket = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+          buckets.set(bucket, (buckets.get(bucket) ?? 0) + point.spend);
+        }
+        visible = [...buckets.entries()].map(([at, spend]) => ({ at: at + 12 * 60 * 60 * 1000, spend })).sort((a, b) => a.at - b.at);
       }
-      const visible = points.filter((point) => point.spend !== null && point.at >= start && point.at < end);
       const maxSpend = Math.max(0.01, ...visible.map((point) => point.spend));
       const chartPoints = visible.map((point) => ({
-        x: 42 + ((point.at - start) / (end - start)) * 306,
+        x: 42 + Math.max(0, Math.min(1, (point.at - start) / (end - start))) * 306,
         y: 104 - (point.spend / maxSpend) * 78,
         point,
       }));
       const sum = visible.reduce((total, point) => total + point.spend, 0);
-      const labelTime = (value) => new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-      const children = [
-        React.createElement("line", { key: "grid-1", x1: 42, x2: 348, y1: 26, y2: 26, stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1 }),
-        React.createElement("line", { key: "grid-2", x1: 42, x2: 348, y1: 65, y2: 65, stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1 }),
-        React.createElement("line", { key: "grid-3", x1: 42, x2: 348, y1: 104, y2: 104, stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1 }),
-        React.createElement("text", { key: "y-max", x: 36, y: 30, textAnchor: "end", fill: "var(--dsw-alias-label-secondary)", fontSize: 10 }, `$${maxSpend.toFixed(2)}`),
-        React.createElement("text", { key: "y-zero", x: 36, y: 108, textAnchor: "end", fill: "var(--dsw-alias-label-secondary)", fontSize: 10 }, "$0"),
-      ];
+      const span = end - start;
+      const tickCount = span <= 2 * 24 * 60 * 60 * 1000 ? 7 : span <= 8 * 24 * 60 * 60 * 1000 ? 8 : 7;
+      const tickLabel = (value) => span <= 2 * 24 * 60 * 60 * 1000
+        ? new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+        : new Date(value).toLocaleDateString([], { month: "2-digit", day: "2-digit" });
+      const children = [];
+      for (let index = 0; index < tickCount; index += 1) {
+        const ratio = index / (tickCount - 1);
+        const x = 42 + ratio * 306;
+        const value = start + ratio * span;
+        children.push(
+          React.createElement("line", { key: `grid-${index}`, x1: x, x2: x, y1: 26, y2: 104, stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1, strokeOpacity: 0.32, strokeDasharray: "2 4" }),
+          React.createElement("text", { key: `tick-${index}`, x, y: 126, textAnchor: index === 0 ? "start" : index === tickCount - 1 ? "end" : "middle", fill: "var(--dsw-alias-label-secondary)", fontSize: 10 }, tickLabel(value)),
+        );
+      }
+      for (let index = 0; index <= 4; index += 1) {
+        const ratio = index / 4;
+        const y = 104 - ratio * 78;
+        children.push(
+          React.createElement("line", { key: `amount-grid-${index}`, x1: 42, x2: 348, y1: y, y2: y, stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1, strokeOpacity: 0.62 }),
+          React.createElement("text", { key: `amount-${index}`, x: 36, y: y + 3, textAnchor: "end", fill: "var(--dsw-alias-label-secondary)", fontSize: 9 }, `$${(maxSpend * ratio).toFixed(2)}`),
+        );
+      }
       if (chartPoints.length > 0) {
-        const linePoints = chartPoints.length === 1
-          ? `${Math.max(42, chartPoints[0].x - 16)},${chartPoints[0].y} ${chartPoints[0].x},${chartPoints[0].y}`
-          : chartPoints.map(({ x, y }) => `${x},${y}`).join(" ");
-        children.push(React.createElement("polyline", {
-          key: "line", points: linePoints, fill: "none",
-          stroke: "var(--dsw-alias-state-success-primary)", strokeWidth: 2.5,
-          strokeLinecap: "round", strokeLinejoin: "round",
+        if (!pointsOnly) children.push(React.createElement("polyline", {
+          key: "line", points: chartPoints.map(({ x, y }) => `${x},${y}`).join(" "), fill: "none",
+          stroke: "var(--dsw-alias-state-success-primary)", strokeWidth: 1.35,
+          vectorEffect: "non-scaling-stroke", strokeLinecap: "round", strokeLinejoin: "round",
         }));
         chartPoints.forEach(({ x, y, point }, index) => children.push(
           React.createElement("g", { key: `point-${index}` },
             React.createElement("circle", {
-              cx: x, cy: y, r: 3.5,
+              cx: x, cy: y, r: 1.8,
               fill: "var(--dsw-alias-state-success-primary)",
+              stroke: "var(--dsw-alias-bg-layer-1)", strokeWidth: 1.4,
+              vectorEffect: "non-scaling-stroke",
             }),
-            React.createElement("title", null, `${labelTime(point.at)} · $${point.spend.toFixed(2)}`),
+            React.createElement("title", null, `${new Date(point.at).toLocaleString()} · $${point.spend.toFixed(2)}`),
           ),
         ));
-        const first = chartPoints[0].point.at;
-        const last = chartPoints[chartPoints.length - 1].point.at;
-        children.push(
-          React.createElement("text", { key: "x-first", x: 42, y: 126, fill: "var(--dsw-alias-label-secondary)", fontSize: 10 }, labelTime(first)),
-          React.createElement("text", { key: "x-last", x: 348, y: 126, textAnchor: "end", fill: "var(--dsw-alias-label-secondary)", fontSize: 10 }, labelTime(last)),
-        );
       }
+      const months = storedMonths(points);
+      const activeMonth = months.includes(selectedMonth) ? selectedMonth : (months[0] ?? "");
+      const rangeControls = React.createElement("div", { className: "dsh-usage-history-controls" },
+        React.createElement("div", { className: "dsh-usage-history-ranges" }, HISTORY_RANGES.map((item) =>
+          React.createElement("button", { key: item, type: "button", className: "dsh-usage-mode-btn" + (range === item ? " dsh-usage-mode-btn-active" : ""), onClick: () => onRange(item) }, t(`history.range.${item}`)))),
+        React.createElement("label", { className: "dsh-usage-history-points-toggle" },
+          React.createElement("input", {
+            type: "checkbox",
+            role: "switch",
+            checked: pointsOnly,
+            onChange: (event) => setPointsOnly(event.target.checked),
+            "aria-label": t("history.pointsOnly"),
+          }),
+          t("history.pointsOnly"),
+        ),
+      );
+      const customRangeForm = range === "custom"
+        ? React.createElement("div", { className: "dsh-usage-history-form" },
+            React.createElement("label", { className: "dsh-usage-history-date" }, t("history.start"), React.createElement("input", { type: "date", value: customRange.start, onChange: (event) => onCustomRange({ ...customRange, start: event.target.value }) })),
+            React.createElement("label", { className: "dsh-usage-history-date" }, t("history.end"), React.createElement("input", { type: "date", value: customRange.end, onChange: (event) => onCustomRange({ ...customRange, end: event.target.value }) })),
+            React.createElement(ActionButton, { variant: "outline", onClick: onApplyCustomRange }, t("history.apply")),
+          )
+        : null;
+      const chart = (className, isExpanded = false) => React.createElement("svg", {
+        className,
+        viewBox: "0 0 360 132",
+        preserveAspectRatio: isExpanded ? "none" : "xMidYMid meet",
+        role: "img",
+        "aria-label": t("history.title"),
+      }, children);
       return React.createElement("div", { className: "dsh-usage-balance-card dsh-usage-history" },
         React.createElement("div", { className: "dsh-usage-history-head" },
           React.createElement("span", { className: "dsh-usage-history-title" }, t("history.title")),
-          visible.length > 0
-            ? React.createElement("span", { className: "dsh-usage-balance-status" }, `${t("history.amount")} $${sum.toFixed(2)}`)
-            : null,
+          visible.length > 0 ? React.createElement("span", { className: "dsh-usage-balance-status" }, `${t("history.amount")} $${sum.toFixed(2)}`) : null,
         ),
-        React.createElement("div", { className: "dsh-usage-history-ranges" }, HISTORY_RANGES.map((item) =>
-          React.createElement("button", {
-            key: item, type: "button",
-            className: "dsh-usage-mode-btn" + (range === item ? " dsh-usage-mode-btn-active" : ""),
-            onClick: () => onRange(item),
-          }, t(`history.range.${item}`)))),
+        rangeControls,
+        customRangeForm,
         visible.length > 0
-          ? React.createElement("svg", {
-              className: "dsh-usage-history-chart", viewBox: "0 0 360 132",
-              role: "img", "aria-label": t("history.title"),
-            }, children)
+          ? React.createElement("button", {
+              type: "button",
+              className: "dsh-usage-history-chart-trigger",
+              title: t("history.expand"),
+              "aria-label": t("history.expand"),
+              onClick: () => setExpanded(true),
+            }, chart("dsh-usage-history-chart"))
           : React.createElement("div", { className: "dsh-usage-history-empty" }, t("history.empty")),
+        React.createElement("div", { className: "dsh-usage-history-manage" },
+          React.createElement("span", { className: "dsh-usage-history-title" }, t("history.month")),
+          months.length > 0
+            ? React.createElement("select", { className: "dsh-usage-history-month", value: activeMonth, onChange: (event) => onSelectMonth(event.target.value) }, months.map((month) => React.createElement("option", { key: month, value: month }, month)))
+            : React.createElement("span", { className: "dsh-usage-history-empty" }, t("history.noMonths")),
+          months.length > 0 ? React.createElement(ActionButton, { variant: "ghost", onClick: () => onClearMonth(activeMonth) }, t("history.clearMonth")) : null,
+          React.createElement(ActionButton, { variant: "ghost", onClick: onReset }, t("history.reset")),
+        ),
+        React.createElement(UsageModal, {
+          open: expanded,
+          onClose: () => setExpanded(false),
+          title: t("history.title"),
+          closeLabel: t("action.close"),
+          className: "dsh-usage-history-fullscreen-dialog",
+          overlayClassName: "dsh-usage-history-fullscreen-overlay",
+        },
+          React.createElement("div", { className: "dsh-usage-history-fullscreen-content" },
+            rangeControls,
+            customRangeForm,
+            React.createElement("span", { className: "dsh-usage-balance-status" }, `${t("history.amount")} $${sum.toFixed(2)}`),
+            visible.length > 0 ? chart("dsh-usage-history-chart", true) : React.createElement("div", { className: "dsh-usage-history-empty" }, t("history.empty")),
+          ),
+        ),
       );
     }
 
@@ -972,7 +1166,7 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function UsageBalance({ data, history, historyRange, onHistoryRange, onRefresh, t }) {
+    function UsageBalance({ data, history, historyRange, customRange, appliedCustomRange, selectedMonth, onHistoryRange, onCustomRange, onApplyCustomRange, onSelectMonth, onClearMonth, onResetHistory, onRefresh, t }) {
       let card;
       if (data.mode === "commandcode") card = React.createElement(CommandCodeCard, { data, t });
       else if (data.mode === "newapi") card = React.createElement(NewApiCard, { data, t });
@@ -986,6 +1180,8 @@ window.__ModuleLoader__.load({
         data.mode === "commandcode"
           ? React.createElement(BalanceHistory, {
               points: history, range: historyRange, onRange: onHistoryRange, t,
+              customRange, appliedCustomRange, selectedMonth, onCustomRange, onApplyCustomRange, onSelectMonth,
+              onClearMonth, onReset: onResetHistory,
             })
           : null,
         React.createElement(UsageMeta, { data, t }),
@@ -1256,16 +1452,29 @@ window.__ModuleLoader__.load({
       const [form, setForm] = React.useState({ auto: true, minutes: "5" });
       const [view, setView] = React.useState({ refreshing: false, data: null, error: "", updatedAt: 0 });
       const [history, setHistory] = React.useState([]);
-      const [historyRange, setHistoryRange] = React.useState("12h");
+      const [historyRange, setHistoryRange] = React.useState("today");
+      const [customRange, setCustomRange] = React.useState(() => ({
+        start: dateInputValue(Date.now() - 6 * 24 * 60 * 60 * 1000),
+        end: dateInputValue(Date.now()),
+      }));
+      const [appliedCustomRange, setAppliedCustomRange] = React.useState(() => ({
+        start: dateInputValue(Date.now() - 6 * 24 * 60 * 60 * 1000),
+        end: dateInputValue(Date.now()),
+      }));
+      const [selectedMonth, setSelectedMonth] = React.useState("");
       const [, forceRender] = React.useState(0);
       const viewRef = React.useRef(view);
       const inFlight = React.useRef(false);
+      const samplePending = React.useRef(false);
       const generation = React.useRef(0);
       viewRef.current = view;
 
       /** One usage query; concurrent calls collapse into the first one. */
-      const refresh = React.useCallback(() => {
-        if (inFlight.current) return;
+      const refresh = React.useCallback((sample = false) => {
+        if (inFlight.current) {
+          if (sample) samplePending.current = true;
+          return;
+        }
         inFlight.current = true;
         const gen = generation.current;
         // A missing host route binding is reported in the panel, never thrown:
@@ -1282,9 +1491,17 @@ window.__ModuleLoader__.load({
             // the panel no longer shows, so it must not write anything.
             if (gen !== generation.current) return;
             inFlight.current = false;
+            const pendingSample = samplePending.current;
+            samplePending.current = false;
             if (result.ok) {
               const sampledAt = Date.now();
-              const nextHistory = recordHistorySample(result.value, sampledAt);
+              const previousHistory = result.value.mode === "commandcode" ? readHistory(result.value) : [];
+              const shouldRecord = sample || (!pendingSample && previousHistory.length === 0);
+              const nextHistory = result.value.mode === "commandcode"
+                ? shouldRecord
+                  ? recordHistorySample(result.value, sampledAt)
+                  : previousHistory
+                : [];
               if (result.value.mode === "commandcode") setHistory(nextHistory);
               setView((s) => ({ ...s, refreshing: false, data: result.value, error: "", updatedAt: sampledAt }));
             } else {
@@ -1292,11 +1509,16 @@ window.__ModuleLoader__.load({
               // blank out what the user was reading.
               setView((s) => ({ ...s, refreshing: false, error: result.error.message }));
             }
+            if (pendingSample && !sample) setTimeout(() => { refresh(true); }, 0);
           })
           .catch((err) => {
             if (gen !== generation.current) return;
             inFlight.current = false;
             setView((s) => ({ ...s, refreshing: false, error: String(err) }));
+            if (samplePending.current) {
+              samplePending.current = false;
+              setTimeout(() => { refresh(true); }, 0);
+            }
           });
       }, [fetchBalance, provider, model, effort, sessionId]);
 
@@ -1312,8 +1534,10 @@ window.__ModuleLoader__.load({
       React.useEffect(() => {
         generation.current += 1;
         inFlight.current = false;
+        samplePending.current = false;
         setView({ refreshing: false, data: null, error: "", updatedAt: 0 });
         setHistory([]);
+        setSelectedMonth("");
         refresh();
       }, [refresh]);
 
@@ -1325,26 +1549,23 @@ window.__ModuleLoader__.load({
         return () => { clearInterval(id); };
       }, [config.auto, config.intervalMs, refresh]);
 
-      // Sample on a fixed cadence even when the user disables display auto-refresh.
+      // Sample at the system clock's 00/10/20/30/40/50 minute marks, even when
+      // the configurable display auto-refresh is disabled.
       React.useEffect(() => {
         if (view.data?.mode !== "commandcode") return undefined;
-        const points = readHistory(view.data);
-        const last = points[points.length - 1];
-        const wait = last === undefined
-          ? 0
-          : Math.max(0, HISTORY_INTERVAL_MS - (Date.now() - last.at));
-        let retryId;
+        const now = new Date();
+        const elapsed = (now.getMinutes() % 10) * 60 * 1000 + now.getSeconds() * 1000 + now.getMilliseconds();
+        const wait = HISTORY_INTERVAL_MS - elapsed;
+        let intervalId;
         const sampleId = setTimeout(() => {
-          refresh();
-          retryId = setInterval(() => {
-            if (!inFlight.current) refresh();
-          }, 5 * 60 * 1000);
+          refresh(true);
+          intervalId = setInterval(() => { if (!inFlight.current) refresh(true); }, HISTORY_INTERVAL_MS);
         }, wait);
         return () => {
           clearTimeout(sampleId);
-          if (retryId !== undefined) clearInterval(retryId);
+          if (intervalId !== undefined) clearInterval(intervalId);
         };
-      }, [view.data, history, refresh]);
+      }, [view.data, refresh]);
 
       // Opening the panel: show what is known, and only pay for a query when the
       // numbers are stale (which also renders as 刷新中 over those numbers).
@@ -1433,6 +1654,28 @@ window.__ModuleLoader__.load({
         setOpen(true);
       };
 
+      const clearMonth = (month) => {
+        if (view.data?.mode !== "commandcode" || month === "") return;
+        const message = fill(t("history.confirmClearMonth"), { month });
+        if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(message)) return;
+        const next = clearHistoryMonth(view.data, month);
+        setHistory(next);
+        setSelectedMonth(storedMonths(next)[0] ?? "");
+      };
+      const resetHistory = () => {
+        if (view.data?.mode !== "commandcode") return;
+        if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(t("history.confirmReset"))) return;
+        setHistory(resetHistoryStorage(view.data));
+        setSelectedMonth("");
+      };
+      const applyCustomRange = () => {
+        const start = localDateStart(customRange.start);
+        const end = localDateStart(customRange.end);
+        if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return;
+        setAppliedCustomRange({ ...customRange });
+        setHistoryRange("custom");
+      };
+
       let body;
       if (view.data !== null) {
         body = React.createElement("div", { className: "dsh-usage-stack" },
@@ -1440,7 +1683,15 @@ window.__ModuleLoader__.load({
             data: view.data,
             history,
             historyRange,
+            customRange,
+            appliedCustomRange,
+            selectedMonth,
             onHistoryRange: setHistoryRange,
+            onCustomRange: setCustomRange,
+            onApplyCustomRange: applyCustomRange,
+            onSelectMonth: setSelectedMonth,
+            onClearMonth: clearMonth,
+            onResetHistory: resetHistory,
             onRefresh: refresh,
             t,
           }),

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Model usage",
-    "description": "Adds a Usage entry to the session header: provider account usage, manual query-target selection, background refresh, and a seven-day Command Code balance-spend trend."
+    "description": "Adds a Usage entry to the session header with provider usage, ten-minute Command Code sampling, calendar-month trends, custom ranges and history cleanup."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "用量",
-    "description": "在会话头部加一个「用量」入口：查看当前对话所用模型对应供应商账户的用量（余额 / 套餐窗口 / 请求数），可手动切换查询对象、后台自动刷新，并查看 Command Code 七天余额消耗趋势。"
+    "description": "在会话头部加一个「用量」入口：查看当前对话所用模型对应供应商账户的用量（余额 / 套餐窗口 / 请求数），支持 Command Code 十分钟采样、日历月历史趋势、自定义时间段和记录清理。"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-usage",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Provider-account usage for DeepSeek Harness: quota windows, credit balance and request counts for the model a conversation runs on, with per-provider adapters and manual target selection.",
   "license": "MIT",
   "author": "liuchaoxu <ischaoxu@163.com>",