dsh-context 0.6.2 → 0.7.1

package/README.md

@@ -1,90 +1,56 @@
 # dsh-context
 
-A **Context insight panel** for [DeepSeek Harness](https://github.com/deepseek-ai/DeepSeek-Harness) (dsh): a plugin that adds a **Context** tab to the web UI — right beside **Chat** and **Trajectory** — so you can see what the model's context window is actually made of, and how it evolves across the conversation.
+[![npm version](https://img.shields.io/npm/v/dsh-context)](https://www.npmjs.com/package/dsh-context)
+[![GitHub stars](https://img.shields.io/github/stars/bowenliang123/dsh-context?style=social)](https://github.com/bowenliang123/dsh-context)
 
-![dsh-context screenshot](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/screenshot.png)
+**See what your DeepSeek Harness agent's context window is actually made of and how it evolves.**
 
-## Quick install
+`dsh-context` is a [DeepSeek Harness](https://github.com/deepseek-ai/DeepSeek-Harness) plugin that adds a **Context Insight** panel to the web UI: a live, visual answer to *"what is the model carrying right now, and how did it get there?"* — context composition, per-request history, compactions, and injections, all in one place.
 
-One command, from any [DeepSeek Harness](https://github.com/deepseek-ai/DeepSeek-Harness) installation (the `web` profile is the one `dsh web` boots; it is created automatically on first use):
+![Context panel overview](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-overview.png)
 
-```sh
-dsh plugin --profile web add dsh-context
-```
+## Install
 
-then start the web UI and open any session — the **上下文 / Context** tab appears right beside **Chat** and **Trajectory**:
+One command, from any DeepSeek Harness installation:
 
 ```sh
-dsh web
+dsh plugin --profile web add dsh-context
 ```
 
-> Running dsh from a source checkout instead of the installed CLI? Prefix the commands with `pnpm` (`pnpm dsh plugin --profile web add dsh-context`).
-
-## Why
-
-Every model request packs the same window from six sources: the system prompt, tool schemas, your messages, injected context (skills, AGENTS.md, runtime snapshots), assistant replies, and tool results. When a conversation degrades or gets compacted, *which part ate the budget* is usually invisible. dsh-context makes it observable:
+Then start the web UI with `dsh web`, open any session, and click the **上下文 / Context** tab. No build step, no restart.
 
-- **Current composition** — a stacked bar of the six categories, scaled against the model's context window (the gray track is your remaining headroom), plus the top-5 most expensive tool schemas.
-- **History** — one stacked bar per model request (finer than per-turn), with Y-axis ticks and gridlines. Click any bar for its full breakdown, including the **provider-reported** prompt/output tokens next to the estimate. ✂ marks where compaction/pruning happened — watch the bars drop.
-- **Context events** — compactions, tool-output prunes, skill injections (`Skill injected (code-review)`), plugin context injections, model switches — each with its token delta and timestamp.
-- **Messages** — the currently model-visible surface, message by message, with per-message token costs.
+## What you'll see
 
-The UI is bilingual (中文/English) and follows the dsh locale automatically.
+### 📊 Context stats — the session at a glance
 
-## Install
-
-dsh-context ships as a **dsh bundle**: an npm package with a `dsh.bundle` manifest (a `cordis.patch.yml` layer that inserts the plugin row) and a `dsh.client` manifest (the web UI half). No build step, no restart — the one-liner above installs it into the `web` profile (or any other profile you boot with `dsh --profile <name>`). The `dsh-context` loader row activates the host half, and the web app picks up the package's `./client` bundle and adds the **上下文 / Context** tab to every session view.
+Turns, steps, how much context has been recycled by compactions and prunes, how many injections happened, model switches, and the estimated total tokens sent — next to the provider-reported actuals, so you can see how the estimate holds up.
 
-To install from this checkout instead (for development), from the repo root:
+### 🧱 Current composition — what's in the window right now
 
-```sh
-dsh plugin --profile <name> add .
-```
+A six-color stacked bar scaled against the model's full context window (the gray track is your remaining headroom): system prompt, tool schemas, your messages, injected context, assistant replies, and tool results — plus the top-5 most expensive tool schemas. When a conversation starts degrading, this is where you find out *which part ate the budget*.
 
-If dsh is run from a source checkout, prefix the commands with `pnpm` (`pnpm dsh plugin ...`).
+### 📈 History — watch the window grow (and get compacted)
 
-## Usage
+One stacked bar per model request, finer than per-message. Toggle between **Turn** and **Step** granularity, scroll sideways through the session, hover any bar for a quick tooltip, and click to pin the full breakdown — including provider-reported actual prompt/output tokens next to the estimate. **✂ marks where compaction or pruning happened** — watch the bars drop:
 
-Open any session and click **上下文 / Context** (to the right of Chat and Trajectory). Data refreshes every 2 seconds while the tab is open; switching sessions switches the view to that session's log — including historical, persisted sessions.
+![History chart with a pinned request](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/history-detail.png)
 
-- **Hover** a history bar for a quick tooltip; **click** it to pin the breakdown below the chart.
-- The overview bar is scaled to the model's context window, so ~13% full means ~13% of the window is spoken for.
-- Numbers are estimates using the *same fixed-density heuristic as dsh's built-in tokenMeter* (~4 chars ≈ 1 token), so they match the harness's own stats. Wherever the provider reported real usage, it's shown alongside as "actual".
+Above: a real session that grew to ~563k tokens across 48 turns, then compaction (✂) recycled −535.5k in one step, and the conversation continued from a fresh, small window.
 
-## How it works
+### ⚡ Context events — when and why the window changed
 
-- **Data source**: the session's durable event log. Live sessions are folded straight from the in-memory log (`sessions.get(id).events` — no clone, no disk parse); persisted sessions fall back to `sessionQuery.readSession`.
-- **Transport**: host ↔ browser over a generic **Connection RPC channel** (`/dsh-context`, `ctx.connection.rpc` — the same channel mechanism the api gateway uses). The host half registers a `snapshot` endpoint; the client half calls it via `ctx.connection.rpc.call`.
-- **Incremental fold**: per-session fold state lives in the Host half, so each poll only processes newly appended events — reopening the tab is instant.
-- **Events decoded**: `request/header` (system prompt + tool schemas), surface events with `surfaceOp` (append/replace — compaction rewrites history in place), `compaction/summary|prune`, `assistant/message.usage` (real provider tokens), and message `source` metadata (`plugin` forms, `skill-invocation`) for injection events.
-- **Architecture**: `src/host.ts` is a plain ESM Cordis plugin (zero runtime dependencies) loaded by the `dsh-context` loader row; `src/client.cts` is the browser half, transpiled and wrapped at build time into the web boot's closure-factory bundle (`window.__ModuleLoader__.load`). The client renders with bare `React.createElement` — theme-native via dsh CSS variables, bilingual via the client `locale` service. Both halves are TypeScript with strict mode and local (drift-free) service contracts.
+Every compaction, tool-output prune, skill or plugin context injection, and model switch — each with its token delta, turn/step attribution, and timestamp:
 
-## Development
+![Context events and messages](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-events.png)
 
-The project is a pnpm workspace root (`pnpm-workspace.yaml`), so `pnpm install` never walks up into a parent workspace.
-
-```sh
-pnpm install            # devDependencies only — the plugin itself stays dependency-free
-pnpm run typecheck      # tsc --noEmit (strict)
-pnpm run build          # esbuild: lib/index.js (host) + lib/client.js (client bundle)
-pnpm test               # typecheck + functional tests for both halves
-```
+### 💬 Messages — the currently model-visible surface
 
-`build.mjs` also smoke-checks the outputs (both halves must parse; the host half must import with the `name`/`inject`/`apply` plugin shape).
+The exact message list the model sees right now, newest first, with a per-message token cost.
 
-Commits are guarded by a [husky](https://typicode.github.io/husky/) pre-commit hook that runs `pnpm run typecheck` (`tsc --noEmit`, strict).
 
-## Files
+## Like it?
 
-| File | Role |
-| --- | --- |
-| `src/host.ts` | Host half (strict TS): incremental log fold, category accounting, `/dsh-context` snapshot RPC |
-| `src/client.cts` | Client half (strict TS, CJS-flavored for the browser bundle): tab registration, bilingual chart UI |
-| `tsconfig.json` | Strict typecheck config (noEmit; esbuild does the transpiling) |
-| `package.json` | `dsh.bundle` (patch layer) + `dsh.client` (web UI) manifests |
-| `cordis.patch.yml` | The bundle's patch layer: inserts the `dsh-context` row |
-| `scripts/build.mjs` | esbuild-based build of `lib/index.js` + `lib/client.js` |
-| `docs/screenshot.png` | The UI in action |
+If `dsh-context` helped you understand what your agent is carrying around, a ⭐ on [GitHub](https://github.com/bowenliang123/dsh-context) is much appreciated — and issues/PRs are welcome!
 
 ## License
 

package/lib/client.js

@@ -1,13 +1,13 @@
-/* dsh-context client bundle — generated by scripts/build.mjs from src/client.ts */
+/* dsh-context client bundle — generated by scripts/build.mjs from src/client/ */
 window.__ModuleLoader__.load({
   id: "dsh-context",
   factory: (require) => {
     var module = { exports: {} };
     var exports = module.exports;
 "use strict";
-const React = require("react");
-const h = React.createElement;
-const DICT_ZH = {
+
+// src/client/i18n.ts
+var DICT_ZH = {
   "tab": "\u4E0A\u4E0B\u6587",
   "cat.system": "\u7CFB\u7EDF\u63D0\u793A",
   "cat.tools": "\u5DE5\u5177\u5B9A\u4E49",
@@ -18,7 +18,18 @@ const DICT_ZH = {
   "overview.title": "\u5F53\u524D\u6784\u6210",
   "overview.ofWindow": "tokens\uFF08\u7EA6 {p}%\uFF09",
   "overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
-  "overview.actual": "\xB7 \u4E0A\u6B21\u5B9E\u9645 prompt {n}",
+  "overview.free": "\u5269\u4F59\u7A97\u53E3",
+  "stats.title": "\u4E0A\u4E0B\u6587\u7EDF\u8BA1",
+  "stats.hint": "\u7EDF\u8BA1\u5F53\u524D\u4FDD\u7559\u7684\u5386\u53F2\u7A97\u53E3\uFF08\u4E0E\u8D8B\u52BF\u56FE\u4E00\u81F4\uFF09",
+  "stats.turns": "\u8F6E\u6B21",
+  "stats.steps": "\u6B65\u6570",
+  "stats.recycled": "\u2702 \u56DE\u6536",
+  "stats.recycleSub": "\u538B\u7F29 {c} \u6B21 \xB7 \u526A\u679D {p} \u6B21",
+  "stats.injects": "\uFF0B \u6CE8\u5165",
+  "stats.switches": "\u21C4 \u6A21\u578B\u5207\u6362",
+  "stats.est": "\u2248 \u7D2F\u8BA1\u4F30\u7B97",
+  "stats.actualPrompt": "\u5B9E\u9645 prompt",
+  "stats.output": "\u8F93\u51FA",
   "tools.top": "\u5DE5\u5177\u5B9A\u4E49 Top\uFF1A",
   "tools.more": "\u7B49 {n} \u4E2A",
   "trend.title": "\u5386\u53F2\u8D8B\u52BF",
@@ -34,6 +45,9 @@ const DICT_ZH = {
   "detail.output": "\u8F93\u51FA {n}",
   "events.title": "\u4E0A\u4E0B\u6587\u4E8B\u4EF6",
   "events.empty": "\u6682\u65E0\u4E0A\u4E0B\u6587\u4E8B\u4EF6\uFF08\u538B\u7F29\u3001\u6CE8\u5165\u3001\u6A21\u578B\u5207\u6362\u4F1A\u51FA\u73B0\u5728\u8FD9\u91CC\uFF09",
+  "events.at": "\u7B2C {t} \u8F6E \xB7 \u7B2C {s} \u6B65",
+  "events.range": "\u7B2C {t} \u8F6E \xB7 \u7B2C {a}\u2192{b} \u6B65",
+  "events.rangeTo": "\u7B2C {a} \u8F6E \xB7 \u7B2C {as} \u6B65 \u2192 \u7B2C {b} \u8F6E \xB7 \u7B2C {bs} \u6B65",
   "nodes.title": "\u6D88\u606F\u6784\u6210",
   "nodes.hint": "\u5F53\u524D\u6A21\u578B\u53EF\u89C1\u7684\u6D88\u606F\uFF0C\u6700\u65B0\u5728\u524D",
   "nodes.more": "\u2026 \u66F4\u65E9\u7684 {n} \u6761\u6D88\u606F\u5DF2\u7701\u7565",
@@ -62,7 +76,7 @@ const DICT_ZH = {
   "node.nonText": "(\u975E\u6587\u672C\u6D88\u606F)",
   "node.snapshot": "\u5FEB\u7167: "
 };
-const DICT_EN = {
+var DICT_EN = {
   "tab": "Context",
   "cat.system": "System",
   "cat.tools": "Tool schemas",
@@ -73,7 +87,18 @@ const DICT_EN = {
   "overview.title": "Current composition",
   "overview.ofWindow": "tokens (~{p}%)",
   "overview.estimate": "tokens (estimated)",
-  "overview.actual": "\xB7 last actual prompt {n}",
+  "overview.free": "Free window",
+  "stats.title": "Context stats",
+  "stats.hint": "Over the retained history window (same as the History chart)",
+  "stats.turns": "Turns",
+  "stats.steps": "Steps",
+  "stats.recycled": "\u2702 Recycled",
+  "stats.recycleSub": "{c} compactions \xB7 {p} prunes",
+  "stats.injects": "\uFF0B Injections",
+  "stats.switches": "\u21C4 Model switches",
+  "stats.est": "\u2248 Estimated total",
+  "stats.actualPrompt": "actual prompt",
+  "stats.output": "output",
   "tools.top": "Top tool schemas:",
   "tools.more": "of {n}",
   "trend.title": "History",
@@ -89,6 +114,9 @@ const DICT_EN = {
   "detail.output": "output {n}",
   "events.title": "Context events",
   "events.empty": "No context events yet (compaction, injections, model switches appear here)",
+  "events.at": "Turn {t} \xB7 Step {s}",
+  "events.range": "Turn {t} \xB7 Step {a}\u2192{b}",
+  "events.rangeTo": "Turn {a} \xB7 Step {as} \u2192 Turn {b} \xB7 Step {bs}",
   "nodes.title": "Messages",
   "nodes.hint": "currently model-visible, newest first",
   "nodes.more": "\u2026 {n} earlier messages omitted",
@@ -117,9 +145,135 @@ const DICT_EN = {
   "node.nonText": "(non-text message)",
   "node.snapshot": "snapshot: "
 };
-const EVENT_ICONS = { compaction: "\u2702", prune: "\u2702", inject: "\uFF0B", model: "\u21C4" };
+
+// src/client/styles.ts
+var STYLES = [
+  ".lc-root { padding: 16px 20px 32px; overflow-y: auto; height: 100%; box-sizing: border-box; color: var(--dsw-alias-label-primary); font-size: 13px; }",
+  ".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
+  ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
+  ".lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }",
+  ".lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }",
+  ".lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-stat-sub { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".lc-gran { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
+  ".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
+  ".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
+  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
+  ".lc-overview-num { margin-bottom: 8px; }",
+  ".lc-overview-num b { font-size: 20px; }",
+  ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
+  ".lc-stacked-wrap { position: relative; width: 100%; }",
+  ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); }",
+  ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
+  ".lc-stacked > div { height: 100%; }",
+  ".lc-stacked-seg-on { filter: brightness(1.18); }",
+  ".lc-stacked-free-on { box-shadow: inset 0 0 0 1px var(--dsw-alias-label-secondary); border-radius: 3px; }",
+  ".lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }",
+  ".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); }",
+  ".lc-chip i, .lc-detail-row i, .lc-node i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }",
+  ".lc-chip em { font-style: normal; color: var(--dsw-alias-label-secondary); }",
+  ".lc-chip-on { font-weight: 600; }",
+  ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
+  ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
+  ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--dsw-alias-label-primary); }",
+  ".lc-chartrow { display: flex; gap: 6px; align-items: stretch; }",
+  ".lc-axis { position: relative; width: 40px; height: 150px; padding-top: 18px; box-sizing: border-box; color: var(--dsw-alias-label-secondary); font-size: 11px; }",
+  ".lc-axis span { position: absolute; right: 0; line-height: 1; }",
+  ".lc-axis-top { top: 13px; }",
+  ".lc-axis-mid { top: 69px; }",
+  ".lc-axis-bot { top: 125px; }",
+  ".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
+  ".lc-chart-scroll::-webkit-scrollbar { height: 8px; }",
+  ".lc-chart-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 45%, transparent); border-radius: 4px; }",
+  ".lc-chart-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 70%, transparent); }",
+  ".lc-chart-scroll::-webkit-scrollbar-track { background: transparent; }",
+  ".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
+  ".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
+  ".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
+  ".lc-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 18px; box-sizing: border-box; width: max-content; min-width: 100%; }",
+  ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
+  ".lc-grid-top { top: 18px; }",
+  ".lc-grid-mid { top: 74px; }",
+  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; }",
+  ".lc-bar:hover { background: var(--dsw-alias-bg-layer-2); }",
+  ".lc-bar-selected { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }",
+  ".lc-bar-hovered { outline: 1px dashed var(--dsw-alias-brand-primary); outline-offset: 1px; }",
+  ".lc-bar-in-turn { background: rgba(99,102,241,0.14); }",
+  ".lc-bar-stack { display: flex; flex-direction: column-reverse; width: 100%; }",
+  ".lc-bar-stack > div { width: 100%; }",
+  ".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
+  ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
+  ".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
+  ".lc-turn-on { filter: brightness(1.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }",
+  ".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
+  ".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
+  ".lc-detail-head b { color: var(--dsw-alias-label-primary); }",
+  ".lc-detail-marker { color: var(--dsw-alias-state-warn-primary); font-size: 11px; background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 1px 7px; }",
+  ".lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }",
+  ".lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }",
+  ".lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }",
+  ".lc-detail-row { display: flex; align-items: center; gap: 8px; }",
+  ".lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }",
+  ".lc-bar-track { flex: 1; height: 5px; border-radius: 3px; background: rgba(128,128,128,0.18); overflow: hidden; display: block; }",
+  ".lc-bar-fill { display: block; height: 100%; border-radius: 3px; }",
+  ".lc-detail-num { width: 44px; text-align: right; }",
+  ".lc-detail-pct { width: 34px; text-align: right; color: var(--dsw-alias-label-secondary); }",
+  ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; }",
+  ".lc-col { flex: 1; min-width: 280px; }",
+  ".lc-events, .lc-nodes { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }",
+  ".lc-event { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
+  ".lc-event-icon { width: 18px; text-align: center; color: var(--dsw-alias-state-warn-primary); }",
+  ".lc-event-icon.lc-event-inject { color: #a855f7; }",
+  ".lc-event-icon.lc-event-model { color: var(--dsw-alias-brand-primary); }",
+  ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-event-at { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }",
+  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); }",
+  ".lc-event-tokens.lc-up { color: var(--dsw-alias-state-warn-primary); }",
+  ".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
+  ".lc-node-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }",
+  ".lc-node-time { color: var(--dsw-alias-label-secondary); font-size: 12px; min-width: 54px; text-align: right; }",
+  ".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
+  ".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
+  ".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",
+  ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }"
+].join("\n");
+
+// src/client/cache.ts
+var MAX_CACHED_SESSIONS = 10;
+var sessionCache = /* @__PURE__ */ new Map();
+function cacheGet(sessionId) {
+  return sessionCache.get(sessionId);
+}
+function cachePut(sessionId, snapshot) {
+  sessionCache.set(sessionId, snapshot);
+  if (sessionCache.size > MAX_CACHED_SESSIONS) {
+    const oldest = sessionCache.keys().next().value;
+    if (oldest !== void 0) sessionCache.delete(oldest);
+  }
+}
+
+// src/client/categories.ts
+var CATS = [
+  { key: "system", color: "#6366f1" },
+  { key: "tools", color: "#f59e0b" },
+  { key: "user", color: "#22c55e" },
+  { key: "inject", color: "#a855f7" },
+  { key: "assistant", color: "#3b82f6" },
+  { key: "tool", color: "#14b8a6" }
+];
+function partsOf(breakdown) {
+  return CATS.map((c) => {
+    return { key: c.key, color: c.color, value: breakdown[c.key] || 0 };
+  });
+}
+
+// src/client/format.ts
 function fmt(n) {
   if (n === void 0 || n === null || isNaN(n)) return "\u2014";
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
   if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";
   return String(Math.round(n));
 }
@@ -130,36 +284,14 @@ function fmtTime(t) {
   }
   return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
 }
-function aggregateByTurn(requests) {
-  const out = [];
-  let runSteps = 0;
-  for (const req of requests) {
-    const last = out.length > 0 ? out[out.length - 1] : null;
-    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) {
-      runSteps++;
-      out[out.length - 1] = { ...req, stepCount: runSteps };
-    } else {
-      runSteps = 1;
-      out.push({ ...req, stepCount: 1 });
-    }
-  }
-  return out;
-}
-function makeView(ctx, t) {
-  function tr(key, vars) {
-    return t(key, vars);
-  }
-  const CATS = [
-    { key: "system", color: "#6366f1" },
-    { key: "tools", color: "#f59e0b" },
-    { key: "user", color: "#22c55e" },
-    { key: "inject", color: "#a855f7" },
-    { key: "assistant", color: "#3b82f6" },
-    { key: "tool", color: "#14b8a6" }
-  ];
-  function catLabel(key) {
-    return t("cat." + key);
-  }
+
+// src/client/react.ts
+var React = require("react");
+var h = React.createElement;
+
+// src/client/components/events.ts
+var EVENT_ICONS = { compaction: "\u2702", prune: "\u2702", inject: "\uFF0B", model: "\u21C4" };
+function makeEventText(t, tr) {
   function eventLabel(ev) {
     if (ev.kind === "compaction") return tr("ev.compaction", { n: ev.count || 0 });
     if (ev.kind === "prune") return t("ev.prune");
@@ -171,6 +303,58 @@ function makeView(ctx, t) {
     }
     return ev.kind;
   }
+  function eventAt(ev) {
+    if (ev.kind === "compaction" || ev.kind === "prune") {
+      if (typeof ev.turn === "number" && typeof ev.step === "number") {
+        if (typeof ev.fromTurn === "number" && typeof ev.fromStep === "number") {
+          if (ev.fromTurn === ev.turn) return t("events.range", { t: ev.turn, a: ev.fromStep, b: ev.step });
+          return t("events.rangeTo", { a: ev.fromTurn, as: ev.fromStep, b: ev.turn, bs: ev.step });
+        }
+        return t("events.at", { t: ev.turn, s: ev.step });
+      }
+      return null;
+    }
+    if (typeof ev.turn === "number" && typeof ev.step === "number") {
+      return t("events.at", { t: ev.turn, s: ev.step });
+    }
+    return null;
+  }
+  return { eventLabel, eventAt };
+}
+function makeEventList(kit) {
+  const { t, fmt: fmt3, fmtTime: fmtTime2, eventLabel, eventAt } = kit;
+  return function EventList(props) {
+    if (props.events.length === 0) {
+      return h("div", { className: "lc-empty" }, t("events.empty"));
+    }
+    const sorted = props.events.slice().reverse();
+    return h(
+      "div",
+      { className: "lc-events" },
+      sorted.map((ev, i) => {
+        const label = eventLabel(ev);
+        const at = eventAt(ev);
+        return h(
+          "div",
+          { key: ev.seq + "-" + i, className: "lc-event" },
+          h("span", { className: "lc-event-icon lc-event-" + ev.kind }, EVENT_ICONS[ev.kind] || "\u2022"),
+          h("span", { className: "lc-event-label", title: label }, label),
+          at !== null ? h("span", { className: "lc-event-at" }, at) : null,
+          ev.tokens ? h(
+            "span",
+            { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") },
+            (ev.kind === "inject" ? "+" : "\u2212") + fmt3(ev.tokens)
+          ) : null,
+          h("span", { className: "lc-event-time" }, fmtTime2(ev.time))
+        );
+      })
+    );
+  };
+}
+
+// src/client/components/nodes.ts
+function makeNodeList(kit) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
   function nodeText(n) {
     if (n.cat === "tool") {
       return t("node.toolResult") + (n.tool ? " \u2190 " + n.tool : "") + (n.err ? " \u26A0" : "");
@@ -182,23 +366,171 @@ function makeView(ctx, t) {
     if (n.cat === "inject") return t("form." + (n.form || "context"));
     return t("node.nonText");
   }
-  function StackedBar(props) {
+  return function NodeList(props) {
+    if (props.nodes.length === 0) {
+      return h("div", { className: "lc-empty" }, t("nodes.empty"));
+    }
+    const catColor = {};
+    for (const c of CATS) catColor[c.key] = c.color;
+    const rows = props.nodes.slice().reverse();
+    return h(
+      "div",
+      { className: "lc-nodes" },
+      props.dropped > 0 ? h("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null,
+      rows.map((n) => {
+        const text = nodeText(n);
+        return h(
+          "div",
+          { key: n.seq, className: "lc-node" },
+          h("i", { style: { background: catColor[n.cat] || "#999" } }),
+          h("span", { className: "lc-node-preview", title: text }, text),
+          // Timestamp when the host event carried one.
+          typeof n.time === "number" ? h("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null,
+          h("span", { className: "lc-node-tokens" }, fmt3(n.tokens))
+        );
+      })
+    );
+  };
+}
+
+// src/client/components/requestDetail.ts
+function makeRequestDetail(kit, StackedBar) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  return function RequestDetail(props) {
+    const req = props.request;
+    if (!req) return null;
+    const isTurn = req.stepCount !== void 0 && req.stepCount > 1;
+    const head = isTurn ? tr("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 });
+    const marker = props.marker ?? null;
+    const markerAt = marker !== null ? eventAt(marker) : null;
+    return h(
+      "div",
+      { className: "lc-detail" },
+      h(
+        "div",
+        { className: "lc-detail-head" },
+        h("b", null, head),
+        marker !== null && markerAt !== null ? h("span", { className: "lc-detail-marker", title: eventLabel(marker) }, "\u2702 " + markerAt) : null,
+        isTurn ? h("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null,
+        h("span", null, fmtTime2(req.time)),
+        h("span", null, tr("detail.estTotal", { n: fmt3(req.total) })),
+        req.prompt !== void 0 ? h("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt3(req.prompt) })) : null,
+        req.output !== void 0 ? h("span", null, tr("detail.output", { n: fmt3(req.output) })) : null
+      ),
+      h(StackedBar, { parts: partsOf(req), height: 10 }),
+      h(
+        "div",
+        { className: "lc-detail-rows" },
+        CATS.map((c) => {
+          const v = req[c.key] || 0;
+          return h(
+            "div",
+            { key: c.key, className: "lc-detail-row" },
+            h("i", { style: { background: c.color } }),
+            h("span", { className: "lc-detail-label" }, catLabel(c.key)),
+            h(
+              "span",
+              { className: "lc-bar-track" },
+              h("span", { className: "lc-bar-fill", style: { width: (req.total > 0 ? v / req.total * 100 : 0) + "%", background: c.color } })
+            ),
+            h("span", { className: "lc-detail-num" }, fmt3(v)),
+            h("span", { className: "lc-detail-pct" }, req.total > 0 ? Math.round(v / req.total * 100) + "%" : "")
+          );
+        })
+      )
+    );
+  };
+}
+
+// src/client/components/statsBoard.ts
+function makeStatsBoard(kit) {
+  const { t, tr, fmt: fmt3 } = kit;
+  return function StatsBoard(props) {
+    const turns = /* @__PURE__ */ new Set();
+    let steps = 0, compactions = 0, prunes = 0, injects = 0, switches = 0;
+    let recycled = 0, est = 0, prompt = 0, output = 0;
+    for (const req of props.requests) {
+      turns.add(req.turn ?? 0);
+      steps++;
+      est += req.total;
+      if (typeof req.prompt === "number") prompt += req.prompt;
+      if (typeof req.output === "number") output += req.output;
+    }
+    for (const ev of props.events) {
+      if (ev.kind === "compaction") {
+        compactions++;
+        recycled += ev.tokens || 0;
+      } else if (ev.kind === "prune") {
+        prunes++;
+        recycled += ev.tokens || 0;
+      } else if (ev.kind === "inject") injects++;
+      else if (ev.kind === "model") switches++;
+    }
+    const cell = (label, value, sub) => h(
+      "div",
+      { className: "lc-stat" },
+      h("span", { className: "lc-stat-label" }, label),
+      h("b", { className: "lc-stat-value" }, value),
+      sub !== void 0 ? h("span", { className: "lc-stat-sub" }, sub) : null
+    );
+    return h(
+      "div",
+      { className: "lc-card" },
+      h(
+        "div",
+        { className: "lc-card-title" },
+        t("stats.title"),
+        h("span", { className: "lc-card-sub" }, t("stats.hint"))
+      ),
+      h(
+        "div",
+        { className: "lc-stats" },
+        cell(t("stats.turns"), fmt3(turns.size)),
+        cell(t("stats.steps"), fmt3(steps)),
+        cell(
+          t("stats.recycled"),
+          recycled > 0 ? "\u2212" + fmt3(recycled) : "0",
+          tr("stats.recycleSub", { c: compactions, p: prunes })
+        ),
+        cell(t("stats.injects"), fmt3(injects)),
+        cell(t("stats.switches"), fmt3(switches)),
+        cell(t("stats.est"), "\u2248 " + fmt3(est)),
+        cell(t("stats.actualPrompt"), fmt3(prompt)),
+        cell(t("stats.output"), fmt3(output))
+      )
+    );
+  };
+}
+
+// src/client/components/stackedBar.ts
+function makeStackedBar(kit) {
+  const { t, fmt: fmt3, catLabel } = kit;
+  return function StackedBar(props) {
     let total = 0;
     for (const p of props.parts) total += p.value;
     const scale = props.max !== void 0 && props.max > total ? props.max : total;
+    const free = props.max !== void 0 && props.max > total ? props.max - total : 0;
     let tip = null;
     if (props.hoverKey !== null && props.hoverKey !== void 0) {
-      let acc = 0;
-      for (const p of props.parts) {
-        const pct = scale > 0 ? p.value / scale * 100 : 0;
-        if (p.key === props.hoverKey && p.value > 0) {
-          tip = {
-            text: catLabel(p.key) + " " + fmt(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
-            leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
-          };
-          break;
+      if (props.hoverKey === "free" && free > 0) {
+        const pct = scale > 0 ? free / scale * 100 : 0;
+        tip = {
+          text: t("overview.free") + " " + fmt3(free) + " (" + Math.round(pct) + "%)",
+          leftPct: Math.max(12, Math.min(total / scale * 100 + pct / 2, 88))
+        };
+      } else {
+        let acc = 0;
+        for (const p of props.parts) {
+          const pct = scale > 0 ? p.value / scale * 100 : 0;
+          if (p.key === props.hoverKey && p.value > 0) {
+            tip = {
+              text: catLabel(p.key) + " " + fmt3(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
+              leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
+            };
+            break;
+          }
+          acc += pct;
         }
-        acc += pct;
       }
     }
     return h(
@@ -213,7 +545,7 @@ function makeView(ctx, t) {
             if (props.onHoverKey !== void 0) props.onHoverKey(null);
           }
         },
-        total <= 0 ? null : props.parts.map((p) => {
+        total > 0 ? props.parts.map((p) => {
           if (!p.value) return null;
           const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
           return h("div", {
@@ -224,12 +556,23 @@ function makeView(ctx, t) {
               if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
             }
           });
-        })
+        }) : null,
+        free > 0 ? h("div", {
+          key: "free",
+          className: "lc-stacked-free" + (props.hoverKey === "free" ? " lc-stacked-free-on" : ""),
+          style: { width: free / scale * 100 + "%" },
+          onMouseEnter: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey("free");
+          }
+        }) : null
       ),
       tip ? h("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null
     );
-  }
-  function Legend(props) {
+  };
+}
+function makeLegend(kit) {
+  const { fmt: fmt3, catLabel } = kit;
+  return function Legend(props) {
     let total = 0;
     for (const p of props.parts) total += p.value;
     return h(
@@ -250,35 +593,54 @@ function makeView(ctx, t) {
             }
           },
           h("i", { style: { background: p.color } }),
-          catLabel(p.key) + " " + fmt(p.value),
+          catLabel(p.key) + " " + fmt3(p.value),
           total > 0 ? h("em", null, Math.round(p.value / total * 100) + "%") : null
         );
       })
     );
+  };
+}
+
+// src/client/components/trendChart.ts
+function aggregateByTurn(requests) {
+  const out = [];
+  let runSteps = 0;
+  for (const req of requests) {
+    const last = out.length > 0 ? out[out.length - 1] : null;
+    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) {
+      runSteps++;
+      out[out.length - 1] = { ...req, stepCount: runSteps };
+    } else {
+      runSteps = 1;
+      out.push({ ...req, stepCount: 1 });
+    }
   }
-  function partsOf(breakdown) {
-    return CATS.map((c) => {
-      return { key: c.key, color: c.color, value: breakdown[c.key] || 0 };
-    });
+  return out;
+}
+function attachMarkers(requests, events) {
+  const markers = new Array(requests.length);
+  for (const ev of events) {
+    if (ev.kind !== "compaction" && ev.kind !== "prune") continue;
+    for (let r = 0; r < requests.length; r++) {
+      if (requests[r].seq >= ev.seq) {
+        if (markers[r] === void 0) markers[r] = ev;
+        break;
+      }
+    }
   }
+  return markers;
+}
+function makeTrendChart(kit) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
   const CHART_H = 112;
   const BAR_W = 14;
   const BAR_GAP = 2;
   const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
-  function TrendChart(props) {
+  return function TrendChart(props) {
     const requests = props.requests;
+    const markers = props.markers;
     let maxTotal = 1;
     for (const req of requests) if (req.total > maxTotal) maxTotal = req.total;
-    const markers = {};
-    for (const ev of props.events) {
-      if (ev.kind !== "compaction" && ev.kind !== "prune") continue;
-      for (let r = 0; r < requests.length; r++) {
-        if (requests[r].seq >= ev.seq) {
-          if (!markers[r]) markers[r] = ev;
-          break;
-        }
-      }
-    }
     const groups = [];
     for (const req of requests) {
       let grp = groups.length > 0 ? groups[groups.length - 1] : null;
@@ -323,8 +685,8 @@ function makeView(ctx, t) {
       h(
         "div",
         { className: "lc-axis" },
-        h("span", { className: "lc-axis-top" }, fmt(maxTotal)),
-        h("span", { className: "lc-axis-mid" }, fmt(Math.round(maxTotal / 2))),
+        h("span", { className: "lc-axis-top" }, fmt3(maxTotal)),
+        h("span", { className: "lc-axis-mid" }, fmt3(Math.round(maxTotal / 2))),
         h("span", { className: "lc-axis-bot" }, "0")
       ),
       h(
@@ -349,10 +711,12 @@ function makeView(ctx, t) {
           h("div", { className: "lc-grid lc-grid-top" }),
           h("div", { className: "lc-grid lc-grid-mid" }),
           requests.map((req, i) => {
+            const marker = markers[i];
+            const markerAt = marker !== void 0 ? eventAt(marker) : null;
             const selected = props.selectedSeq === req.seq;
             const hovered = props.hoveredSeq === req.seq;
             const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
-            const tip = (req.stepCount !== void 0 && req.stepCount > 1 ? tr("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 })) + " \xB7 " + fmtTime(req.time) + "\n" + tr("tip.total", { n: fmt(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt(req[c.key] || 0)).join(" / ");
+            const tip = (req.stepCount !== void 0 && req.stepCount > 1 ? tr("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 })) + " \xB7 " + fmtTime2(req.time) + "\n" + tr("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt3(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt3(req[c.key] || 0)).join(" / ");
             return h(
               "div",
               {
@@ -369,7 +733,12 @@ function makeView(ctx, t) {
                   props.onHover(req.seq);
                 }
               },
-              markers[i] ? h("span", { className: "lc-bar-marker", title: eventLabel(markers[i]) }, "\u2702") : null,
+              // The ✂ tooltip names the event AND where it happened: the
+              // gap between the request before and the request after.
+              marker !== void 0 ? h("span", {
+                className: "lc-bar-marker",
+                title: "\u2702 " + (markerAt !== null ? markerAt + " \u2014 " : "") + eventLabel(marker)
+              }, "\u2702") : null,
               h(
                 "div",
                 { className: "lc-bar-stack" },
@@ -408,105 +777,27 @@ function makeView(ctx, t) {
               }
             }, "T" + grp.turn);
           })
-        ),
-        edges.right ? h("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null
-      )
-    );
-  }
-  function RequestDetail(props) {
-    const req = props.request;
-    if (!req) return null;
-    const isTurn = req.stepCount !== void 0 && req.stepCount > 1;
-    const head = isTurn ? tr("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 });
-    return h(
-      "div",
-      { className: "lc-detail" },
-      h(
-        "div",
-        { className: "lc-detail-head" },
-        h("b", null, head),
-        isTurn ? h("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null,
-        h("span", null, fmtTime(req.time)),
-        h("span", null, tr("detail.estTotal", { n: fmt(req.total) })),
-        req.prompt !== void 0 ? h("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt(req.prompt) })) : null,
-        req.output !== void 0 ? h("span", null, tr("detail.output", { n: fmt(req.output) })) : null
+        )
       ),
-      h(StackedBar, { parts: partsOf(req), height: 10 }),
-      h(
-        "div",
-        { className: "lc-detail-rows" },
-        CATS.map((c) => {
-          const v = req[c.key] || 0;
-          return h(
-            "div",
-            { key: c.key, className: "lc-detail-row" },
-            h("i", { style: { background: c.color } }),
-            h("span", { className: "lc-detail-label" }, catLabel(c.key)),
-            h(
-              "span",
-              { className: "lc-bar-track" },
-              h("span", { className: "lc-bar-fill", style: { width: (req.total > 0 ? v / req.total * 100 : 0) + "%", background: c.color } })
-            ),
-            h("span", { className: "lc-detail-num" }, fmt(v)),
-            h("span", { className: "lc-detail-pct" }, req.total > 0 ? Math.round(v / req.total * 100) + "%" : "")
-          );
-        })
-      )
-    );
-  }
-  function EventList(props) {
-    if (props.events.length === 0) {
-      return h("div", { className: "lc-empty" }, t("events.empty"));
-    }
-    const sorted = props.events.slice().reverse();
-    return h(
-      "div",
-      { className: "lc-events" },
-      sorted.map((ev, i) => {
-        const label = eventLabel(ev);
-        return h(
-          "div",
-          { key: ev.seq + "-" + i, className: "lc-event" },
-          h("span", { className: "lc-event-icon lc-event-" + ev.kind }, EVENT_ICONS[ev.kind] || "\u2022"),
-          h("span", { className: "lc-event-label", title: label }, label),
-          ev.tokens ? h(
-            "span",
-            { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") },
-            (ev.kind === "inject" ? "+" : "\u2212") + fmt(ev.tokens)
-          ) : null,
-          h("span", { className: "lc-event-time" }, fmtTime(ev.time))
-        );
-      })
-    );
-  }
-  function NodeList(props) {
-    if (props.nodes.length === 0) {
-      return h("div", { className: "lc-empty" }, t("nodes.empty"));
-    }
-    const catColor = {};
-    for (const c of CATS) catColor[c.key] = c.color;
-    const rows = props.nodes.slice().reverse();
-    return h(
-      "div",
-      { className: "lc-nodes" },
-      props.dropped > 0 ? h("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null,
-      rows.map((n) => {
-        const text = nodeText(n);
-        return h(
-          "div",
-          { key: n.seq, className: "lc-node" },
-          h("i", { style: { background: catColor[n.cat] || "#999" } }),
-          h("span", { className: "lc-node-preview", title: text }, text),
-          // Timestamp when the host event carried one.
-          typeof n.time === "number" ? h("span", { className: "lc-node-time" }, fmtTime(n.time)) : null,
-          h("span", { className: "lc-node-tokens" }, fmt(n.tokens))
-        );
-      })
+      edges.right ? h("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null
     );
-  }
-  function ContextView(props) {
+  };
+}
+
+// src/client/components/contextView.ts
+function makeContextView(ctx, kit) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
+  const StackedBar = makeStackedBar(kit);
+  const Legend = makeLegend(kit);
+  const TrendChart = makeTrendChart(kit);
+  const RequestDetail = makeRequestDetail(kit, StackedBar);
+  const EventList = makeEventList(kit);
+  const NodeList = makeNodeList(kit);
+  const StatsBoard = makeStatsBoard(kit);
+  return function ContextView(props) {
     const sessionId = props.sessionId;
-    const [data, setData] = React.useState(null);
+    const initial = typeof sessionId === "string" && sessionId !== "" ? cacheGet(sessionId) ?? null : null;
+    const [data, setData] = React.useState(initial);
     const [error, setError] = React.useState(null);
     const [selectedSeq, setSelectedSeq] = React.useState(null);
     const [hoveredSeq, setHoveredSeq] = React.useState(null);
@@ -514,6 +805,10 @@ function makeView(ctx, t) {
     const [tick, setTick] = React.useState(0);
     const [granularity, setGranularity] = React.useState("step");
     const [hoverCat, setHoverCat] = React.useState(null);
+    const dataRef = React.useRef(initial);
+    React.useEffect(() => {
+      dataRef.current = data;
+    }, [data]);
     React.useEffect(() => {
       if (typeof sessionId !== "string" || sessionId === "") return void 0;
       let alive = true;
@@ -521,18 +816,31 @@ function makeView(ctx, t) {
         ctx.connection.rpc.call("/dsh-context", "snapshot", { sessionId }).then((res) => {
           if (!alive) return;
           if (res && res.ok) {
-            setData(res.value);
+            const snap = res.value;
+            cachePut(sessionId, snap);
+            setData(snap);
             setError(null);
-          } else setError(res && res.error ? String(res.error.message || res.error.code) : "failed");
+          } else if (dataRef.current === null) {
+            setError(res && res.error ? String(res.error.message || res.error.code) : "failed");
+          }
         }, (err) => {
-          if (alive) setError(String(err instanceof Error ? err.message : err));
+          if (alive && dataRef.current === null) {
+            setError(String(err instanceof Error ? err.message : err));
+          }
         });
       };
       load();
-      const timerId = setInterval(load, 2e3);
+      const timerId = setInterval(() => {
+        if (document.visibilityState !== "hidden") load();
+      }, 2e3);
+      const onVisible = () => {
+        if (document.visibilityState === "visible") load();
+      };
+      document.addEventListener("visibilitychange", onVisible);
       return () => {
         alive = false;
         clearInterval(timerId);
+        document.removeEventListener("visibilitychange", onVisible);
       };
     }, [sessionId]);
     React.useEffect(() => {
@@ -552,6 +860,11 @@ function makeView(ctx, t) {
     const events = data.events || [];
     const nodes = data.nodes || [];
     const displayRequests = granularity === "turn" ? aggregateByTurn(requests) : requests;
+    const markers = attachMarkers(displayRequests, events);
+    const markerOf = (req) => {
+      const i = displayRequests.indexOf(req);
+      return i >= 0 ? markers[i] : void 0;
+    };
     let pinnedReq = null;
     for (const req of displayRequests) if (req.seq === selectedSeq) pinnedReq = req;
     let activeReq = null;
@@ -571,6 +884,8 @@ function makeView(ctx, t) {
     return h(
       "div",
       { className: "lc-root" },
+      // ---- session context stats (over the retained window) ----
+      h(StatsBoard, { requests, events }),
       // ---- overview ----
       h(
         "div",
@@ -588,8 +903,8 @@ function makeView(ctx, t) {
         h(
           "div",
           { className: "lc-overview-num" },
-          h("b", null, fmt(current.total)),
-          h("span", null, data.contextWindow ? " / " + fmt(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate")),
+          h("b", null, fmt3(current.total)),
+          h("span", null, data.contextWindow ? " / " + fmt3(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate")),
           // The provider-reported prompt of the last request is the best
           // ground truth for what the model actually received; the fixed
           // density heuristic can undercount CJK-heavy content, so show the
@@ -597,7 +912,7 @@ function makeView(ctx, t) {
           displayRequests.length > 0 && displayRequests[displayRequests.length - 1].prompt !== void 0 ? h(
             "span",
             { className: "lc-actual" },
-            tr("overview.actual", { n: fmt(displayRequests[displayRequests.length - 1].prompt ?? 0) })
+            tr("overview.actual", { n: fmt3(displayRequests[displayRequests.length - 1].prompt ?? 0) })
           ) : null
         ),
         h(StackedBar, { parts: partsOf(current), height: 16, max: data.contextWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }),
@@ -607,7 +922,7 @@ function makeView(ctx, t) {
           { className: "lc-tools" },
           t("tools.top"),
           data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
-            return h("span", { key: tool.name, className: "lc-tool-chip" }, tool.name + " " + fmt(tool.tokens));
+            return h("span", { key: tool.name, className: "lc-tool-chip" }, tool.name + " " + fmt3(tool.tokens));
           }),
           data.toolList.length > 5 ? h("span", { className: "lc-card-sub" }, " " + tr("tools.more", { n: data.toolList.length })) : null
         ) : null
@@ -648,7 +963,7 @@ function makeView(ctx, t) {
             // The host caps the log at 160 requests; render them ALL so
             // earlier turns/steps stay reachable via horizontal scroll.
             requests: displayRequests,
-            events,
+            markers,
             selectedSeq: pinnedReq ? pinnedReq.seq : null,
             hoveredSeq,
             activeTurn,
@@ -657,7 +972,7 @@ function makeView(ctx, t) {
             onHover: setHoveredSeq,
             onHoverTurn: setHoverTurn
           }),
-          h(RequestDetail, { request: activeReq })
+          h(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 })
         )
       ),
       // ---- events + messages ----
@@ -684,94 +999,24 @@ function makeView(ctx, t) {
       ),
       h("div", { className: "lc-foot" }, t("footer"))
     );
-  }
-  return ContextView;
+  };
 }
-const STYLES = [
-  ".lc-root { padding: 16px 20px 32px; overflow-y: auto; height: 100%; box-sizing: border-box; color: var(--dsw-alias-label-primary); font-size: 13px; }",
-  ".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
-  ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
-  ".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
-  ".lc-gran { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
-  ".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
-  ".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
-  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
-  ".lc-overview-num { margin-bottom: 8px; }",
-  ".lc-overview-num b { font-size: 20px; }",
-  ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
-  ".lc-stacked-wrap { position: relative; width: 100%; }",
-  ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); }",
-  ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
-  ".lc-stacked > div { height: 100%; }",
-  ".lc-stacked-seg-on { filter: brightness(1.18); }",
-  ".lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }",
-  ".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); }",
-  ".lc-chip i, .lc-detail-row i, .lc-node i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }",
-  ".lc-chip em { font-style: normal; color: var(--dsw-alias-label-secondary); }",
-  ".lc-chip-on { font-weight: 600; }",
-  ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
-  ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
-  ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--dsw-alias-label-primary); }",
-  ".lc-chartrow { display: flex; gap: 6px; align-items: stretch; }",
-  ".lc-axis { position: relative; width: 40px; height: 150px; padding-top: 18px; box-sizing: border-box; color: var(--dsw-alias-label-secondary); font-size: 11px; }",
-  ".lc-axis span { position: absolute; right: 0; line-height: 1; }",
-  ".lc-axis-top { top: 13px; }",
-  ".lc-axis-mid { top: 69px; }",
-  ".lc-axis-bot { top: 125px; }",
-  ".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
-  ".lc-chart-scroll::-webkit-scrollbar { height: 8px; }",
-  ".lc-chart-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 45%, transparent); border-radius: 4px; }",
-  ".lc-chart-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 70%, transparent); }",
-  ".lc-chart-scroll::-webkit-scrollbar-track { background: transparent; }",
-  ".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
-  ".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
-  ".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
-  ".lc-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 18px; box-sizing: border-box; width: max-content; min-width: 100%; }",
-  ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
-  ".lc-grid-top { top: 18px; }",
-  ".lc-grid-mid { top: 74px; }",
-  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; }",
-  ".lc-bar:hover { background: var(--dsw-alias-bg-layer-2); }",
-  ".lc-bar-selected { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }",
-  ".lc-bar-hovered { outline: 1px dashed var(--dsw-alias-brand-primary); outline-offset: 1px; }",
-  ".lc-bar-in-turn { background: rgba(99,102,241,0.14); }",
-  ".lc-bar-stack { display: flex; flex-direction: column-reverse; width: 100%; }",
-  ".lc-bar-stack > div { width: 100%; }",
-  ".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
-  ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
-  ".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
-  ".lc-turn-on { filter: brightness(1.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }",
-  ".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
-  ".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
-  ".lc-detail-head b { color: var(--dsw-alias-label-primary); }",
-  ".lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }",
-  ".lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }",
-  ".lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }",
-  ".lc-detail-row { display: flex; align-items: center; gap: 8px; }",
-  ".lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }",
-  ".lc-bar-track { flex: 1; height: 5px; border-radius: 3px; background: rgba(128,128,128,0.18); overflow: hidden; display: block; }",
-  ".lc-bar-fill { display: block; height: 100%; border-radius: 3px; }",
-  ".lc-detail-num { width: 44px; text-align: right; }",
-  ".lc-detail-pct { width: 34px; text-align: right; color: var(--dsw-alias-label-secondary); }",
-  ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; }",
-  ".lc-col { flex: 1; min-width: 280px; }",
-  ".lc-events, .lc-nodes { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }",
-  ".lc-event { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
-  ".lc-event-icon { width: 18px; text-align: center; color: var(--dsw-alias-state-warn-primary); }",
-  ".lc-event-icon.lc-event-inject { color: #a855f7; }",
-  ".lc-event-icon.lc-event-model { color: var(--dsw-alias-brand-primary); }",
-  ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
-  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); }",
-  ".lc-event-tokens.lc-up { color: var(--dsw-alias-state-warn-primary); }",
-  ".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
-  ".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
-  ".lc-node-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }",
-  ".lc-node-time { color: var(--dsw-alias-label-secondary); font-size: 12px; min-width: 54px; text-align: right; }",
-  ".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
-  ".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
-  ".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",
-  ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }"
-].join("\n");
+
+// src/client/viewkit.ts
+function makeViewKit(t) {
+  const { eventLabel, eventAt } = makeEventText(t, t);
+  return {
+    t,
+    tr: t,
+    fmt,
+    fmtTime,
+    catLabel: (key) => t("cat." + key),
+    eventLabel,
+    eventAt
+  };
+}
+
+// src/client/index.ts
 function apply(ctx) {
   ctx.effect(() => {
     return ctx.locale.register("dsh-context", { zh: DICT_ZH, en: DICT_EN });
@@ -786,7 +1031,7 @@ function apply(ctx) {
       if (tag.parentNode !== null) tag.parentNode.removeChild(tag);
     };
   }, "dsh-context: styles");
-  const ContextView = makeView(ctx, t);
+  const ContextView = makeContextView(ctx, makeViewKit(t));
   ctx.slots.inject("conversation.view", () => {
     return ctx.slots.register(
       // order 20 renders right of Chat (0) and Trajectory (10).

package/lib/index.js

@@ -1,8 +1,10 @@
-const name = "dsh-context";
-const inject = ["connection"];
-const CHARS_PER_TOKEN = 4;
-const BLOCK_OVERHEAD = 4;
-const ROLE_OVERHEAD = 4;
+// src/host/pricing.ts
+var CHARS_PER_TOKEN = 4;
+var BLOCK_OVERHEAD = 4;
+var ROLE_OVERHEAD = 4;
+function estimateToolsTotal(tools) {
+  return tools.length > 0 ? Math.ceil(JSON.stringify(tools).length / CHARS_PER_TOKEN) + BLOCK_OVERHEAD : 0;
+}
 function estimateBlocks(blocks) {
   let tokens = 0;
   if (!Array.isArray(blocks)) return 0;
@@ -58,8 +60,10 @@ function toolCallNames(blocks) {
 function isInjection(source) {
   return source !== null && typeof source === "object" && (source.kind === "plugin" || source.kind === "skill-invocation" || typeof source.form === "string");
 }
-const MAX_REQUEST_STEPS = 1500;
-const MAX_KEPT_TURNS = 300;
+
+// src/host/fold.ts
+var MAX_REQUEST_STEPS = 1500;
+var MAX_KEPT_TURNS = 300;
 function trimToLastTurns(requests, maxTurns) {
   let runs = 0;
   let start = requests.length;
@@ -178,7 +182,7 @@ function foldInto(st, events) {
           name: typeof t.name === "string" ? t.name : "?",
           tokens: estimateToolSchema(t)
         }));
-        st.toolsTokens = tools.length > 0 ? Math.ceil(JSON.stringify(tools).length / CHARS_PER_TOKEN) + BLOCK_OVERHEAD : 0;
+        st.toolsTokens = estimateToolsTotal(tools);
         st.systemTokens = estimateSystem(header.system);
         if (header.config && typeof header.config.model === "string") st.model = header.config.model;
         if (header.config && typeof header.config.provider === "string") st.provider = header.config.provider;
@@ -276,6 +280,8 @@ function foldInto(st, events) {
   }
   if (st.events.length > 400) st.events = st.events.slice(-400);
 }
+
+// src/host/snapshot.ts
 function buildResult(st) {
   const surfaceTotal = st.sums.user + st.sums.inject + st.sums.assistant + st.sums.tool;
   const result = {
@@ -301,6 +307,20 @@ function buildResult(st) {
   const MAX_NODES = 200;
   result.droppedNodes = Math.max(0, st.surface.length - MAX_NODES);
   result.nodes = st.surface.slice(-MAX_NODES);
+  let ri = 0;
+  for (const ev of result.events) {
+    while (ri < result.requests.length && result.requests[ri].seq <= ev.seq) ri++;
+    const next = result.requests[ri];
+    const prev = ri > 0 ? result.requests[ri - 1] : void 0;
+    if (next !== void 0 && typeof next.turn === "number" && typeof next.step === "number") {
+      ev.turn = next.turn;
+      ev.step = next.step;
+    }
+    if (prev !== void 0 && typeof prev.turn === "number" && typeof prev.step === "number") {
+      ev.fromTurn = prev.turn;
+      ev.fromStep = prev.step;
+    }
+  }
   return result;
 }
 async function computeSnapshot(ctx, states, sessionId) {
@@ -331,6 +351,10 @@ async function computeSnapshot(ctx, states, sessionId) {
   st.result = buildResult(st.fold);
   return st.result;
 }
+
+// src/host/index.ts
+var name = "dsh-context";
+var inject = ["connection"];
 function apply(ctx) {
   const states = /* @__PURE__ */ new Map();
   ctx.effect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-context",
-  "version": "0.6.2",
-  "description": "Context insight panel for DeepSeek Harness: a Context tab (beside Chat/Trajectory) showing what the model's context window is made of and how it evolves — composition, per-request history, compactions, injections, and model switches.",
+  "version": "0.7.1",
+  "description": "Context insight panel for DeepSeek Harness: see what the model's context window is made of and how it evolves — composition, per-request history, compactions, injections, and model switches.",
   "author": "bowenliang123",
   "repository": {
     "type": "git",
@@ -27,9 +27,10 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "npm run typecheck && node scripts/test-host.mjs && node scripts/test-client.mjs",
+    "test": "npm run typecheck && node tests/host.test.mjs && node tests/client.test.mjs",
     "release": "bash scripts/publish.sh",
-    "prepare": "husky"
+    "prepare": "husky",
+    "repro": "node tests/repro-real-react.mjs"
   },
   "dsh": {
     "bundle": {