<div align="center">

dsh-token-usage

A clearer, prettier token-usage bar for the DeepSeek Harness web UI.

  

🌐 中文 · English

</div>

The shipped DeepSeek Harness web UI squeezes token usage into one cramped line of text under the composer. dsh-token-usage replaces it with a glanceable chip bar plus a details panel with the full breakdown — and it follows your theme, light or dark.

🎯 Token usage shouldn't have to be decoded — it should be readable at a glance.

Screenshots

<p align="center"> <img src="p1.png" alt="dsh-token-usage bar under the composer" height="260"> </p> <p align="center"><em>The token-usage bar under the composer.</em></p>

<p align="center"> <img src="p2.png" alt="dsh-token-usage details panel" height="340"> </p> <p align="center"><em>The details panel — click the bar to open it.</em></p>

<details> <summary><b>Contents</b></summary>

• [Screenshots](#screenshots)
• [Highlights](#highlights)
• [What it shows](#what-it-shows)
• [Install](#install)
• [Uninstall / Disable](#uninstall--disable)
• [Build & develop](#build--develop)
• [How it works](#how-it-works)
• [License](#license)

</details>

Highlights

• Context at a glance — a thin occupancy bar that turns green → amber → red as you fill the context window.
• Input, output, and cache, separated — billed input splits into cache-read / cache-write / uncached, with the cache-hit rate shown up front.
• Speed where you need it — decode throughput (tok/s) and average first-token latency (TTFT) right on the bar.
• A details panel on click — context composition (system / tools / messages), a stacked input split, and session turn / step / model / tool time.
• Natural edge fades — the panel's top and bottom edges fade and blur while there's more to scroll, and vanish at the ends.
• Theme-adaptive and bilingual — styled only with --dsw-* tokens (light/dark), shipped in Chinese and English.

What it shows

The bar under the composer shows these chips, left to right:

Clicking the bar opens a panel with context occupancy + composition, the input-split stack, throughput / TTFT, and session counts. The whole line hides itself when there is no data yet.

Install

From GitHub (recommended):

npx -p @deepseek-ai/dsh dsh plugin --profile web add github:hashdiana/dsh-token-usage

From a local checkout:

npx -p @deepseek-ai/dsh dsh plugin --profile web add <path-to-this-repo>

Then restart the profile:

dsh web

> The Git path ships the built lib/ (see Build & develop), so no build script runs at install time.

Uninstall / Disable

Temporarily disable without uninstalling — add to $DSH_HOME/profiles/web/cordis.patch.yml:

- id: dsh-token-usage
  disabled: true

Restart dsh web; the default stats line returns. Remove those lines to re-enable.

Build & develop

pnpm install
pnpm typecheck   # tsc -b
pnpm build       # tsc -b + tsdown → lib/index.js (host) + lib/client.js (browser)
pnpm test        # vitest: folds, locale parity, jsdom render, slot registration/dispose

The client bundle is emitted as window.__ModuleLoader__.load({ id, factory }); CSS Modules are hashed by lightningcss and injected as a <style data-plugin="dsh-token-usage"> tag. Commit lib/ — Git installs consume the built output, not src/.

How it works

• Pure client plugin — the host half is an empty apply(); the browser half ships via exports["./client"].
• Slot — registers into conversation.composer.dock (cell id: "stats", priority: -1), shadowing the shipped text line; the registration is withdrawn with the plugin fiber.
• Data — reads the durable projections tokenUsage, contextPressure, contextBreakdown, and sessionStats; a window fold serves only as the no-projection fallback.
• Locale — owns the tokenUsage namespace, Chinese and English.

License

[MIT](LICENSE)