dsh-model-usage 0.8.4 → 0.8.6

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this package are documented in this file. Versions follow Semantic Versioning.
 
+## 0.8.6
+
+- Documentation: recommend `dsh-assistant-suite` for new installations and explain migration.
+
+## 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

package/README.md

@@ -1,5 +1,9 @@
 # dsh-model-usage
 
+> **推荐使用 [dsh-assistant-suite](https://github.com/liuchaoxu/dsh-assistant-suite)：** 本插件的用量查询能力已整合进助手套件，并新增系统提醒、Command Code 余额趋势和统一设置。新安装建议直接使用套件；从本插件迁移时，请停用本插件，避免重复用量入口。
+
+> **Recommended: [dsh-assistant-suite](https://github.com/liuchaoxu/dsh-assistant-suite).** It includes this plugin's usage features alongside system notifications, Command Code balance history, and unified settings. New installations should use the suite. Disable this standalone plugin after migrating to avoid duplicate usage entries.
+
 Provider-account usage for [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)
 sessions. The plugin adds a **Usage** (`用量`) entry to the session header and reports the quota
 windows, balance and request counters of the provider account behind the model the conversation is

package/lib/client.js

@@ -122,6 +122,8 @@ window.__ModuleLoader__.load({
       "card.hideRaw": "隐藏原始返回",
       "card.unrecognized": "接口返回的字段还没被识别，下面是原始返回（可以发给我做校准）",
       "history.title": "余额消耗趋势",
+      "history.expand": "全屏查看余额消耗趋势",
+      "history.pointsOnly": "仅显示消耗点",
       "history.range.today": "今天",
       "history.range.yesterday": "昨天",
       "history.range.week": "近一周",
@@ -240,6 +242,8 @@ 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.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",
@@ -380,13 +384,27 @@ window.__ModuleLoader__.load({
       ".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 { width: 100%; height: 148px; overflow: visible; }",
+      ".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 - 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; }",
@@ -664,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);
@@ -722,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", {
@@ -836,6 +854,8 @@ window.__ModuleLoader__.load({
     }
 
     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();
       const todayStart = new Date(new Date(now).setHours(0, 0, 0, 0)).getTime();
       let start = todayStart;
@@ -888,44 +908,81 @@ window.__ModuleLoader__.load({
         const x = 42 + ratio * 306;
         const value = start + ratio * span;
         children.push(
-          React.createElement("line", { key: `grid-${index}`, x1: x, x2: x, y1: 20, y2: 108, stroke: "var(--dsw-alias-border-l2)", strokeWidth: 1 }),
+          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)),
         );
       }
-      children.push(
-        React.createElement("text", { key: "y-max", x: 36, y: 25, 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"),
-      );
+      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) {
-        children.push(React.createElement("polyline", {
+        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: 2.5, strokeLinecap: "round", strokeLinejoin: "round",
+          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, fill: "var(--dsw-alias-state-success-primary)" }),
+            React.createElement("circle", {
+              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, `${new Date(point.at).toLocaleString()} · $${point.spend.toFixed(2)}`),
           ),
         ));
       }
       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,
         ),
-        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}`)))),
-        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,
+        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")),
@@ -935,6 +992,21 @@ window.__ModuleLoader__.load({
           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")),
+          ),
+        ),
       );
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-usage",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "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>",