Introduction¶
When running long sessions with DeepSeek Harness (DSH), token consumption is often only visible in the post-hoc billing; context compression, changes in cache hit rates, and price differences between peak and off-peak hours are also difficult to compare in real-time within the chat interface. To掌握 “how much this round cost, how much context remains, and whether the balance is sufficient” during development or debugging, one typically needs to switch to the developer platform or piece together logs manually.
dsh-usage-chart is a Cordis plugin for DSH Web, maintained by Max-Samson, currently at npm version 1.1.2 (MIT license). It provides a real-time metric bar below the input box, which can be clicked to expand a zero-dependency SVG dashboard. Data comes from the official DSH adapter projection and host session log folding, costs are estimated using official CNY/USD list prices, and balances are queried via the host proxy to the official API. Below, we introduce its positioning, capabilities, and installation methods.
What Is It¶
In one sentence: dsh-usage-chart embeds token usage, cost estimates, per-turn history charts, and DeepSeek account balance into the DSH Web chat interface.
Maintainer Max-Samson classifies it as a networked utility plugin; the GitHub repository has about 10 stars. The plugin is divided into host and client halves: the host side handles balance and price parsing, while the client side renders the indicator and chart panel below the composer. The tech stack includes TypeScript, the Cordis plugin model, React 18, and hand-written SVG charts without introducing third-party chart libraries.
Core Features¶
Real-time Indicator Below the Input Box¶
After installing and starting DSH Web, a compact indicator line appears below the input box, shown as follows:
▸ Input 12.4M · Output 86.2K · Cache 72% · Cost ≈¥0.284 / ≈$0.042 · demo-model · Balance --
The indicator displays input/output tokens, cache hit rate, cost estimated in the selected currency, current model name, and account balance. Starting from v1.1.0, it also includes a segmented context pressure bar: colored in three segments for system prompt (blue), tool definitions (orange), and history messages (green), with total usage transitioning from green to red. Click ▸ to expand the full panel.
Usage Panel and Per-Turn Chart¶
The capabilities within the panel can be verified in the README, mainly including:
- Session Usage Summary — Input (cache miss/hit), output, cache hit rate, context usage, with data from the official
tokenUsage/contextPressureprojection. - Context Composition and Compression Diagnostics (v1.1.0) — Based on
contextBreakdown, displays the proportion of three segments; foldscompaction/*events to show which turn was compressed, how many tokens were freed, and summary cost; provides suggestions to start a new session or trim large file injections when context usage ≥75% or ≥90%. - Cost Estimation — Calculated using official list prices (CNY/USD dual currencies, per 1M tokens, distinguishing peak/off-peak hours); supports user overrides via
pricing.json; unprompted models are explicitly marked. - Peak/Off-Peak Billing (v1.0.1) — Beijing time Monday to Friday 09:00–12:00, 14:00–18:00 (UTC 01:00–04:00, 06:00–10:00) are peak hours, with unit prices double those of off-peak hours; the top of the panel marks the current billing period with red/green tags.
- Multi-Currency Display (v0.3 / v1.0.1) — One-click switching between CNY/USD in the cost area, with selection saved in browser localStorage; the indicator, panel, chart, and message badges sync accordingly. CNY uses prices from the Chinese pricing page, USD uses prices from the English pricing page, without currency conversion.
- Per-Turn Usage and Source Attribution (v1.1.0) — “Total / Composition / Cost” three perspectives; in cost mode, each bar shows the cost of that turn; overlays time consumption line, cost spike anomaly markers, and cache hit mini-scale; hover explanation card includes token, cost, model, billing period, TTFT/TPS, input source (human/Agent/continuation), and end reason; all turns can be scrolled horizontally.
- Cost Badge — Each assistant message tail displays a closable
≈ ¥/$0.00xxbadge. - Account Balance — Queried via host proxy calling
GET https://api.deepseek.com/user/balance, with the API Key not exposed to the browser. - Bilingual Support — Follows the language setting within the DSH app, supporting runtime switching between
zh/en.
Data Source and Accuracy¶
| Metric | Source | Description |
|---|---|---|
| Token Usage | adapter tokenUsage / contextPressure |
Official real-time projection |
| Cost | Built-in list prices + optional pricing.json, parsed via host /pricing |
Estimated value, not official billing |
| Turn Details | Host session log folding (/usage) |
Includes duration, model, source attribution, per-turn cost |
| Context and Compression | contextBreakdown + compaction/* event folding |
Official projection + event stream |
| Balance | Official /user/balance |
Queried via host proxy in real-time |
Installation and Activation¶
Prerequisites: DeepSeek Harness ≥ 0.1.0-rc.6, Node.js ≥ 20, and pnpm available in PATH (dsh plugin forwards installation to pnpm). If prompted dsh: command not found, you need to install @deepseek-ai/dsh globally, or prefix each command with npx --yes @deepseek-ai/dsh.
Method 1: npm Repository (Recommended)¶
Pre-built artifacts, no local build required:
dsh plugin --profile web add dsh-usage-chart # Install and register as profile plugin layer
dsh web --profile web # Start DSH Web (if already running, stop and restart first)
When upgrading to a new version, pnpm might display Already up to date; you need to explicitly specify the version or remove before reinstalling:
# Explicitly specify version
dsh plugin --profile web add dsh-usage-chart@1.1.2
# Or remove before reinstalling
dsh plugin --profile web remove dsh-usage-chart
dsh plugin --profile web add dsh-usage-chart
After upgrading, you must restart dsh web: the host caches plugin code at startup without hot reload; new routes (like /pricing, /meta, /rate) only take effect after restart.
Verify Installation¶
dsh --profile web --dump-config | grep -A4 'id: dsh-usage-chart'
Open DSH Web and enter any chat session: the usage indicator should appear below the input box; click ▸ to expand the panel. When no API Key is configured, the balance shows –, and the panel provides configuration instructions.
Configure Balance Query¶
Balance query resolves the API Key in the following priority (no restart needed after changes):
- DSH Web Settings (Recommended, plugin ≥ 0.1.1) — Configure DeepSeek API Key in “Settings → Model”, read by the plugin via DSH credential service;
- Environment Variable — Export
DEEPSEEK_API_KEY=sk-...before startup; - Plugin Configuration — Write
config.apiKeyin the profile’scordis.patch.yml(key stored in plaintext on disk, only recommended for protected local environments).
For plugin versions < 0.1.1, the web key is not read; you need to use the environment variable or config.apiKey.
Typical Usage¶
Switch Cost Display Currency¶
In the panel’s cost area, click to switch between CNY/USD, with selection saved in the browser; the indicator, chart, and message badges update synchronously. Costs are calculated directly using the selected currency’s official list prices without currency conversion.
Custom Model Pricing (Optional)¶
The default override file path is $DSH_HOME/data/dsh-usage-chart/pricing.json (or ~/.dsh/data/dsh-usage-chart/pricing.json if DSH_HOME is not set). File changes take effect immediately, supporting peak/off-peak dual periods and CNY/USD dual currencies:
{
"deepseek-v4-flash": {
"offPeak": {
"cny": { "cacheMissInput": 1.5, "cacheHitInput": 0.05, "output": 4.5 },
"usd": { "cacheMissInput": 0.22, "cacheHitInput": 0.007, "output": 0.66 }
},
"peak": {
"cny": { "cacheMissInput": 3.0, "cacheHitInput": 0.10, "output": 9.0 },
"usd": { "cacheMissInput": 0.44, "cacheHitInput": 0.014, "output": 1.32 }
},
"verifiedAt": 1755100800000
}
}
Unit prices are per 1M tokens. Unlisted models are marked as “unpriced model” in the UI and are not silently charged at 0.
View Context Compression and Per-Turn Cost¶
In a long session, click the indicator to expand the panel: in the “Context Composition and Compression Diagnostics” section, view the system/tool/message proportion and compression timeline; switch to the chart’s “Cost” perspective, scroll horizontally to view each turn’s cost, and hover over the explanation card to check billing period and input source attribution.
Uninstall¶
dsh plugin --profile web remove dsh-usage-chart
dsh web --profile web
remove cleans up the package in node_modules and unregisters it from the profile plugin layer. API Key configured in the web interface is stored in DSH credential files, and the DSH model service remains in use, so deletion is usually not required.
Applicable Scenarios and Notes¶
Who It’s For:
- Developers debugging Agents, tool calls, or long-context sessions in DSH Web for extended periods;
- Users who need to compare token usage, cache hit rates, context usage, and estimated costs in real-time within the chat interface;
- Scenarios where users want to check DeepSeek account balance without leaving DSH.
Pre-Use Notes:
- Plugin runs with current
dshprocess permissions — Before installation, review the source code and MIT license to ensure the source is trustworthy; when installing from GitHub, fix the commit and allowallowBuildsinpnpm-workspace.yaml. - Costs are estimates — Calculated based on list prices and adapter-reported usage, not equal to official billing; peak/off-peak determination is based on turn start time, with conservative peak estimation if time is missing.
- Balance and pricing depend on configuration — Balance is unavailable without API Key configuration; plugin < 0.1.1 does not read web keys.
- No hot reload — After upgrading the plugin, you must restart
dsh web. - Community directory is not an official store — Plugin directories like SkillHub are maintained by the community, with no official affiliation with DeepSeek / Fireworks; the DSH ecosystem follows an “everything is a plugin” philosophy, used as needed.
Conclusion¶
dsh-usage-chart converges the originally scattered usage, cost, and balance information in DSH Web chat into a single indicator line below the input box and an expandable SVG dashboard: data goes through official adapter and host proxy, costs distinguish between CNY/USD and peak/off-peak, and long sessions can also reference compression diagnostics and per-turn source attribution. If you are already using DSH Web for Agent development, you can install it using the commands above and verify it below the composer after restarting.
- Directory page: https://www.skillhub.cn/plugins/Max-Samson/dsh-usage-chart
- GitHub: https://github.com/Max-Samson/dsh-usage-chart