dsh-context-fold 0.1.3 → 0.1.5

package/lib/client.d.ts

@@ -3,38 +3,6 @@ window.__ModuleLoader__.load({
   factory: (require) => {
     var module = { exports: {} };
     var exports = module.exports;
-/**
- * `conversation.view` tab: what this plugin folded, what it saved, and the full
- * text behind each fold.
- *
- * ## Why the page reads from the server route, not the session log
- *
- * The browser client cannot walk a session log: the fold decisions are durable
- * plugin records, and the full original reasoning lives in the log's assistant
- * events. Both are server-side. The tab therefore renders exactly what
- * `/api/context-fold/report` returns and does no derivation of its own.
- *
- * ## What it shows, and how honestly
- *
- * The token comparison is a **counterfactual estimate**, not a measured A/B.
- * The "before" case never ran. The panel says so in the UI, lists the
- * assumptions the number depends on, and marks whether the session reported real
- * provider usage at all — because a number built on heuristics must not look
- * like a bill.
- *
- * The original text of every fold is shown on demand, fetched by its recovery
- * path, so the tab doubles as the answer to "what exactly did it remove".
- *
- * ## How this file is shipped
- *
- * `tsdown` wraps the output in the shell's module-factory form
- * (`window.__ModuleLoader__.load({id, factory(require){…}})`), which is the only
- * shape the client module system executes. Imports are therefore converted into
- * `require` calls resolved against the shared platform module table, and the
- * plugin's exports (`name`/`inject`/`apply`) are what the factory returns.
- *
- * @module dsh-context-fold/client
- */
 /** One fold row as the server reports it. */
 interface FoldRow {
   /** Surface seq. */

package/lib/client.js

@@ -4,7 +4,380 @@ window.__ModuleLoader__.load({
     var module = { exports: {} };
     var exports = module.exports;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// src/panel-css.ts
+/**
+* The conversation tab's stylesheet.
+*
+* ## Why a stylesheet instead of inline styles
+*
+* The first version rendered with inline `style` objects: no hover states, no
+* dark-theme variants, no transitions, and a monospace wall that ignored the
+* shell's design language. The shell already ships a token layer
+* (`--dsw-alias-*` for colour, `--ds-transition-duration` / `--ds-ease-in-out`
+* for motion) plus a `data-ds-dark-theme` body attribute, so the tab should
+* consume those instead of inventing a palette.
+*
+* ## How it reaches the page
+*
+* A client bundle cannot import a CSS file — the loader executes the bundle as a
+* classic script — so the sheet is injected once at module scope as
+* `<style data-plugin-css>`. The `data-plugin-css` marker makes the injection
+* idempotent across HMR and re-mounts, which is the same mechanism the bundled
+* first-party plugins use.
+*
+* @module dsh-context-fold/panel-css
+*/
+/** Unique key so the sheet is injected at most once per document. */
+const CSS_KEY = "dsh-context-fold/panel.css";
+/**
+* Every rule is scoped under `.cf-`, so nothing here can leak into the shell.
+*
+* Colours come from the alias tokens with literal fallbacks: if a token is ever
+* renamed, the tab still renders legibly rather than going transparent.
+*/
+const CSS = `
+.cf-root {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px 20px 32px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--dsw-alias-label-primary, #e8e8ea);
+  background: var(--dsw-alias-bg-base, transparent);
+}
+
+.cf-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.cf-head-title {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: .01em;
+}
+
+.cf-head-note {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+}
+
+.cf-card {
+  border: .5px solid var(--dsw-alias-border-l3, #3a3a40);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-1, #1c1c20);
+  padding: 14px 16px;
+}
+
+.cf-card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--dsw-alias-label-secondary, #a9a9b2);
+}
+
+.cf-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  gap: 10px;
+}
+
+.cf-metric {
+  border: .5px solid var(--dsw-alias-border-l2, #303036);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2, #202024);
+  padding: 10px 12px;
+  transition: background-color var(--ds-transition-duration, .2s) var(--ds-ease-in-out, ease-in-out),
+    border-color var(--ds-transition-duration, .2s) var(--ds-ease-in-out, ease-in-out);
+}
+
+.cf-metric:hover {
+  background: var(--dsw-alias-interactive-bg-hover, #26262c);
+}
+
+.cf-metric-label {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cf-metric-value {
+  font-size: 18px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.cf-metric-sub {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+  font-variant-numeric: tabular-nums;
+}
+
+.cf-good { color: var(--dsw-alias-state-success-primary, #4ade80); }
+.cf-bad { color: var(--dsw-alias-state-error-primary, #f87171); }
+.cf-warn { color: var(--dsw-alias-state-warn-primary, #facc15); }
+.cf-dim { color: var(--dsw-alias-label-tertiary, #8b8b93); }
+
+.cf-bar {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-3, #2a2a30);
+  margin-top: 10px;
+}
+
+.cf-bar-seg {
+  height: 100%;
+  transition: width var(--ds-transition-duration, .2s) var(--ds-ease-in-out, ease-in-out);
+}
+
+.cf-bar-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 10px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #a9a9b2);
+}
+
+.cf-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cf-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex: none;
+}
+
+.cf-notice {
+  display: flex;
+  gap: 8px;
+  border-radius: 8px;
+  border: .5px solid var(--dsw-alias-border-l3, #3a3a40);
+  background: var(--dsw-alias-bg-layer-2, #202024);
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary, #a9a9b2);
+}
+
+.cf-notice-strong {
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #e8e8ea);
+}
+
+.cf-notice.cf-notice-warn {
+  border-color: var(--dsw-alias-state-warn-primary, #facc15);
+}
+
+.cf-folds {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cf-fold {
+  border: .5px solid var(--dsw-alias-border-l2, #303036);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-1, #1c1c20);
+  overflow: hidden;
+  transition: border-color var(--ds-transition-duration, .2s) var(--ds-ease-in-out, ease-in-out);
+}
+
+.cf-fold:hover {
+  border-color: var(--dsw-alias-border-l4, #4a4a52);
+}
+
+.cf-fold[open] {
+  border-color: var(--dsw-alias-border-l4, #4a4a52);
+}
+
+.cf-fold-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 9px 12px;
+  list-style: none;
+  user-select: none;
+  transition: background-color var(--ds-transition-duration, .2s) var(--ds-ease-in-out, ease-in-out);
+}
+
+.cf-fold-head::-webkit-details-marker { display: none; }
+
+.cf-fold-head:hover {
+  background: var(--dsw-alias-interactive-bg-hover, #26262c);
+}
+
+.cf-caret {
+  flex: none;
+  width: 10px;
+  font-size: 9px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+  transition: transform var(--ds-transition-duration, .2s) var(--ds-ease-in-out, ease-in-out);
+}
+
+.cf-fold[open] .cf-caret { transform: rotate(90deg); }
+
+.cf-tag {
+  flex: none;
+  border-radius: 5px;
+  padding: 1px 7px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.6;
+  background: var(--dsw-alias-bg-layer-3, #2a2a30);
+  color: var(--dsw-alias-label-secondary, #a9a9b2);
+}
+
+.cf-tag-reasoning {
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #6b8afd) 18%, transparent);
+  color: var(--dsw-alias-brand-primary, #8aa2ff);
+}
+
+.cf-fold-pos {
+  flex: none;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+}
+
+.cf-fold-saving {
+  margin-left: auto;
+  flex: none;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-state-success-primary, #4ade80);
+}
+
+.cf-fold-body {
+  padding: 0 12px 12px;
+  border-top: .5px solid var(--dsw-alias-border-l2, #303036);
+}
+
+.cf-label {
+  margin: 10px 0 4px;
+  font-size: 11px;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+}
+
+.cf-pre {
+  margin: 0;
+  padding: 9px 10px;
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-3, #2a2a30);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 16em;
+  overflow: auto;
+}
+
+.cf-pre-original {
+  max-height: 26em;
+  border-left: 2px solid var(--dsw-alias-brand-primary, #6b8afd);
+}
+
+.cf-locator {
+  margin-top: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+  word-break: break-all;
+}
+
+.cf-empty {
+  padding: 24px 4px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+}
+
+.cf-empty-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-secondary, #a9a9b2);
+  margin-bottom: 6px;
+}
+
+.cf-aside {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #8b8b93);
+}
+`;
+/**
+* Inject the sheet once.
+*
+* Safe to call on every mount: the `data-plugin-css` key makes a second call a
+* no-op, and a non-browser environment (tests, SSR) simply returns.
+*/
+function ensurePanelCss() {
+	if (typeof document === "undefined") return;
+	if (document.querySelector(`style[data-plugin-css=${JSON.stringify(CSS_KEY)}]`) !== null) return;
+	const style = document.createElement("style");
+	style.dataset.plugin = "dsh-context-fold";
+	style.dataset.pluginCss = CSS_KEY;
+	style.textContent = CSS;
+	document.head.appendChild(style);
+}
 // src/client.ts
+/**
+* `conversation.view` tab: what this plugin folded, what it saved, and the full
+* text behind each fold.
+*
+* ## Why the page reads from the server route, not the session log
+*
+* The browser client cannot walk a session log: the fold decisions are durable
+* plugin records, and the full original reasoning lives in the log's assistant
+* events. Both are server-side. The tab therefore renders exactly what
+* `/api/context-fold/report` returns and does no derivation of its own.
+*
+* ## What it shows, and how honestly
+*
+* The token comparison is a **counterfactual estimate**, not a measured A/B.
+* The "before" case never ran. The panel says so in the UI, lists the
+* assumptions the number depends on, and marks whether the session reported real
+* provider usage at all — because a number built on heuristics must not look
+* like a bill.
+*
+* The original text of every fold is shown on demand, fetched by its recovery
+* path, so the tab doubles as the answer to "what exactly did it remove".
+*
+* ## How this file is shipped
+*
+* `tsdown` wraps the output in the shell's module-factory form
+* (`window.__ModuleLoader__.load({id, factory(require){…}})`), which is the only
+* shape the client module system executes. Imports are therefore converted into
+* `require` calls resolved against the shared platform module table, and the
+* plugin's exports (`name`/`inject`/`apply`) are what the factory returns.
+*
+* @module dsh-context-fold/client
+*/
 /** Locale namespace owned by this plugin's client half. */
 const NS = "contextFold";
 /** Dictionary: keep keys aligned with `locale/*.json`. */
@@ -12,16 +385,7 @@ const zh = { "tab.contextFold": "上下文折叠" };
 /** Dictionary: keep keys aligned with `locale/*.json`. */
 const en = { "tab.contextFold": "Context fold" };
 const react = require("react");
-/**
-* Fetch the report for one session.
-*
-* Failures are reported rather than swallowed: before the routes existed the
-* tab rendered "no report available", which reads like "this session folded
-* nothing" instead of "the request never landed".
-*
-* @param sessionId - session to report on.
-* @returns the payload, or a message describing why there is none.
-*/
+/** Fetch the report for one session. */
 async function fetchReport(sessionId) {
 	let response;
 	try {
@@ -52,131 +416,112 @@ async function fetchOriginal(sessionId, locator) {
 	const body = await response.json();
 	return body.ok === true ? body.value?.text : void 0;
 }
-/** Format a number for display. */
+/** Format a number with thousands separators and at most one decimal. */
 function num(value) {
 	return value.toLocaleString("en-US", { maximumFractionDigits: 1 });
 }
-/** A signed figure with an explicit sign, so a loss never looks like a gain. */
+/** A signed figure with an explicit sign, so a loss never reads as a gain. */
 function signed(value) {
 	const rounded = Math.round(value * 10) / 10;
 	return `${rounded > 0 ? "+" : ""}${num(rounded)}`;
 }
+/** Compact token count: 1.2M rather than 1200000. */
+function compact(value) {
+	if (Math.abs(value) >= 1e6) return `${(value / 1e6).toFixed(2)}M`;
+	if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+	return num(value);
+}
 /** Read the active session id out of the slot props. */
 function sessionIdOf(props) {
 	const value = props?.sessionId;
 	return typeof value === "string" && value !== "" ? value : void 0;
 }
-/** Inline styles, kept as plain objects because no CSS module ships here. */
-const styles = {
-	root: {
-		padding: "12px",
-		font: "13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace",
-		overflow: "auto",
-		height: "100%"
-	},
-	title: {
-		fontWeight: 600,
-		marginBottom: "8px"
-	},
-	muted: { color: "#888" },
-	box: {
-		marginBottom: "12px",
-		padding: "8px",
-		border: "1px solid #333",
-		borderRadius: "6px"
-	},
-	heading: {
-		fontWeight: 600,
-		marginBottom: "6px"
-	},
-	table: { borderCollapse: "collapse" },
-	labelCell: {
-		padding: "1px 12px 1px 0",
-		color: "#aaa"
-	},
-	warning: {
-		marginTop: "6px",
-		color: "#facc15"
-	},
-	error: {
-		marginTop: "6px",
-		color: "#f87171"
-	},
-	reread: {
-		marginTop: "6px",
-		color: "#f87171"
-	},
-	fold: {
-		marginBottom: "6px",
-		padding: "6px",
-		border: "1px solid #2a2a2a",
-		borderRadius: "6px"
-	},
-	foldSummary: { cursor: "pointer" },
-	inlinePre: {
-		whiteSpace: "pre-wrap",
-		margin: "6px 0",
-		color: "#bbb",
-		maxHeight: "12em",
-		overflow: "auto"
-	},
-	originalPre: {
-		whiteSpace: "pre-wrap",
-		margin: "6px 0",
-		color: "#ddd",
-		maxHeight: "24em",
-		overflow: "auto",
-		borderTop: "1px dashed #333",
-		paddingTop: "6px"
-	},
-	locator: {
-		color: "#666",
-		fontSize: "11px",
-		wordBreak: "break-all"
-	},
-	notRecoverable: {
-		color: "#f87171",
-		fontSize: "11px"
-	},
-	detailsToggle: {
-		cursor: "pointer",
-		color: "#888",
-		marginTop: "6px"
-	},
-	assumptionList: {
-		margin: "4px 0 0 16px",
-		padding: 0,
-		color: "#999"
-	}
-};
-/** The counterfactual summary block. */
+const el = react.createElement;
+/** One labelled metric tile. */
+function Metric(props) {
+	const toneClass = props.tone === void 0 ? "" : ` cf-${props.tone}`;
+	const children = [el("div", {
+		className: "cf-metric-label",
+		key: "l"
+	}, props.label), el("div", {
+		className: `cf-metric-value${toneClass}`,
+		key: "v"
+	}, props.value)];
+	if (props.sub !== void 0) children.push(el("div", {
+		className: "cf-metric-sub",
+		key: "s"
+	}, props.sub));
+	return el("div", { className: "cf-metric" }, ...children);
+}
+/** A notice strip, optionally warning-toned. */
+function Notice(props) {
+	return el("div", { className: props.warn === true ? "cf-notice cf-notice-warn" : "cf-notice" }, props.children);
+}
+/** The counterfactual summary card. */
 function Summary(props) {
 	const cf = props.report.counterfactual;
-	const rows = [
-		["Folded content, now", `${num(cf.tokensNow)} tokens`],
-		["If it had stayed unfolded", `${num(cf.tokensIfUnfolded)} tokens`],
-		["Prompt reduction per step", `${num(cf.tokensSavedPerStep)} tokens`],
-		["Steps still paying the folded prompt", num(cf.remainingSteps)],
-		["Gross saving", signed(cf.grossSaving)],
-		["Prefix invalidation cost", signed(-cf.invalidationCost)],
-		["Net", signed(cf.netSaving)]
-	];
-	return react.createElement("section", { style: styles.box }, react.createElement("div", {
-		style: styles.heading,
+	const savedChars = props.report.folds.reduce((total, fold) => total + (fold.charsBefore - fold.charsAfter), 0);
+	const netTone = cf.netSaving >= 0 ? "good" : "bad";
+	return el("section", { className: "cf-card" }, el("div", {
+		className: "cf-card-title",
 		key: "h"
-	}, "Token comparison (estimate)"), react.createElement("table", {
-		style: styles.table,
-		key: "t"
-	}, ...rows.map(([label, value]) => react.createElement("tr", { key: label }, react.createElement("td", { style: styles.labelCell }, label), react.createElement("td", label === "Net" ? { style: {
-		fontWeight: 600,
-		color: cf.netSaving >= 0 ? "#4ade80" : "#f87171"
-	} } : null, value)))), react.createElement("div", {
-		style: styles.warning,
-		key: "f"
-	}, cf.hasRealUsage ? `Priced against this session's real usage${cf.cacheReadShare === void 0 ? "" : ` (cache-read share ${(cf.cacheReadShare * 100).toFixed(1)}%)`}.` : "This session reported NO provider usage — every figure here is heuristic token counts, not a bill."), react.createElement("details", { key: "a" }, react.createElement("summary", { style: styles.detailsToggle }, "Assumptions"), react.createElement("ul", { style: styles.assumptionList }, ...cf.assumptions.map((assumption, index) => react.createElement("li", { key: String(index) }, assumption)))), props.report.reReads > 0 ? react.createElement("div", {
-		style: styles.reread,
+	}, "Token comparison"), el("div", {
+		className: "cf-grid",
+		key: "g"
+	}, el(Metric, {
+		key: "now",
+		label: "Folded content now",
+		value: `${compact(cf.tokensNow)} tok`,
+		sub: "what the window carries"
+	}), el(Metric, {
+		key: "before",
+		label: "If never folded",
+		value: `${compact(cf.tokensIfUnfolded)} tok`,
+		sub: "counterfactual"
+	}), el(Metric, {
+		key: "per",
+		label: "Saving per step",
+		value: `${num(cf.tokensSavedPerStep)} tok`,
+		sub: `${num(cf.remainingSteps)} steps left`
+	}), el(Metric, {
+		key: "gross",
+		label: "Gross saving",
+		value: signed(cf.grossSaving),
+		sub: "before invalidation",
+		tone: cf.grossSaving >= 0 ? "good" : "bad"
+	}), el(Metric, {
+		key: "cost",
+		label: "Invalidation cost",
+		value: signed(-cf.invalidationCost),
+		sub: "one-off prefix re-charge",
+		tone: "warn"
+	}), el(Metric, {
+		key: "net",
+		label: "Net",
+		value: signed(cf.netSaving),
+		sub: cf.netSaving >= 0 ? "net win" : "net loss — folded too late",
+		tone: netTone
+	})), el("div", {
+		style: { marginTop: "12px" },
+		key: "n"
+	}, el(Notice, { warn: !cf.hasRealUsage }, el("span", null, cf.hasRealUsage ? el("span", null, el("span", { className: "cf-notice-strong" }, "Priced against real usage. "), `Cache-read share ${cf.cacheReadShare === void 0 ? "n/a" : `${(cf.cacheReadShare * 100).toFixed(1)}%`}.`) : el("span", null, el("span", { className: "cf-notice-strong" }, "Heuristic only. "), "This session reported no provider usage, so these are token counts — not a bill.")))), el("div", {
+		className: "cf-aside",
+		style: { marginTop: "10px" },
+		key: "a"
+	}, `${num(savedChars)} characters removed across ${String(props.report.folds.length)} fold(s).`), props.report.reReads > 0 ? el("div", {
+		className: "cf-notice cf-notice-warn",
+		style: { marginTop: "10px" },
 		key: "r"
-	}, `Re-read signals: ${String(props.report.reReads)} — folded content was fetched again after being folded.`) : null);
+	}, el("span", null, el("span", { className: "cf-notice-strong" }, `${String(props.report.reReads)} re-read signal(s). `), "Folded content was fetched again after being folded — folding it may have cost more than it saved.")) : null, el("details", {
+		key: "asm",
+		style: { marginTop: "10px" }
+	}, el("summary", { className: "cf-aside" }, "Assumptions"), el("ul", { style: {
+		margin: "6px 0 0 18px",
+		padding: 0
+	} }, ...cf.assumptions.map((assumption, index) => el("li", {
+		className: "cf-aside",
+		key: String(index)
+	}, assumption)))));
 }
 /** One fold row; the original text loads when the row is opened. */
 function FoldItem(props) {
@@ -191,48 +536,42 @@ function FoldItem(props) {
 			setOriginal(text ?? "(could not read the stored original)");
 		});
 	};
-	const summary = `${fold.kind === "reasoning" ? "reasoning" : fold.toolName ?? "tool"} · turn ${String(fold.turn)}.${String(fold.step)} · ${num(fold.charsBefore)} → ${num(fold.charsAfter)} chars · ${fold.recoverable ? "recoverable" : "NOT recoverable"}`;
-	const children = [react.createElement("summary", {
-		style: styles.foldSummary,
-		key: "s"
-	}, summary), react.createElement("pre", {
-		style: styles.inlinePre,
-		key: "i"
-	}, fold.inline)];
-	if (fold.locator !== void 0) {
-		children.push(react.createElement("div", {
-			style: styles.locator,
-			key: "l"
-		}, fold.locator));
-		if (original !== null) children.push(react.createElement("pre", {
-			style: styles.originalPre,
-			key: "o"
-		}, original));
-	} else if (!fold.recoverable) children.push(react.createElement("div", {
-		style: styles.notRecoverable,
-		key: "w"
-	}, "No recovery path: the original is in the session log but no tool exposes it."));
-	return react.createElement("details", {
-		style: styles.fold,
+	const isReasoning = fold.kind === "reasoning";
+	const tagClass = isReasoning ? "cf-tag cf-tag-reasoning" : "cf-tag";
+	const saved = fold.tokensBefore - fold.tokensAfter;
+	const body = [el("div", {
+		className: "cf-fold-body",
+		key: "b"
+	}, el("div", { className: "cf-label" }, "What stays in the window"), el("pre", { className: "cf-pre" }, fold.inline), fold.locator !== void 0 ? el("div", null, el("div", { className: "cf-label" }, "Full original"), original === null ? el("div", { className: "cf-aside" }, "Expand to load from the recovery path.") : el("pre", { className: "cf-pre cf-pre-original" }, original), el("div", { className: "cf-locator" }, fold.locator)) : el("div", {
+		className: "cf-aside cf-bad",
+		style: { marginTop: "8px" }
+	}, "No recovery path: the original is in the session log but no tool exposes it."))];
+	const children = [el("summary", {
+		className: "cf-fold-head",
+		key: "h"
+	}, el("span", { className: "cf-caret" }, "▶"), el("span", { className: tagClass }, isReasoning ? "reasoning" : fold.toolName ?? "tool"), el("span", { className: "cf-fold-pos" }, `turn ${String(fold.turn)}.${String(fold.step)}`), el("span", { className: "cf-fold-pos" }, `${compact(fold.charsBefore)} → ${compact(fold.charsAfter)} chars`), el("span", { className: "cf-fold-saving" }, `−${compact(Math.max(0, saved))} tok`))];
+	children.push(...body);
+	return el("details", {
+		className: "cf-fold",
 		onToggle
 	}, ...children);
 }
-/** The per-fold list. */
+/** The per-fold list card. */
 function FoldList(props) {
 	const { report, sessionId } = props;
-	const heading = react.createElement("div", {
-		style: styles.heading,
+	const title = el("div", {
+		className: "cf-card-title",
 		key: "h"
-	}, `Folded content (${String(report.folds.length)})`);
-	if (report.folds.length === 0) return react.createElement("section", null, heading, react.createElement("div", {
-		style: styles.muted,
+	}, `Folded content · ${String(report.folds.length)}`);
+	if (report.folds.length === 0) return el("section", { className: "cf-card" }, title, el("div", {
+		className: "cf-empty",
 		key: "e"
-	}, "Nothing has been folded in this session yet."));
-	return react.createElement("section", null, heading, ...report.folds.map((fold) => react.createElement(FoldItem, {
+	}, el("div", { className: "cf-empty-title" }, "Nothing folded in this session yet"), el("div", null, "Folds appear once a step batch is old enough and large enough to be worth replacing.")));
+	return el("section", { className: "cf-card" }, title, el("div", { className: "cf-folds" }, ...report.folds.map((fold) => el(FoldItem, {
 		key: String(fold.seq),
 		sessionId,
 		fold
-	})));
+	}))));
 }
 /**
 * The tab body.
@@ -264,41 +603,26 @@ function ContextFoldTab(props) {
 			cancelled = true;
 		};
 	}, [sessionId]);
-	const children = [react.createElement("div", {
-		style: styles.title,
-		key: "title"
-	}, "Context fold")];
-	if (sessionId === void 0) children.push(react.createElement("div", {
-		style: styles.muted,
-		key: "m"
-	}, "No active session."));
-	else if (state.status === "loading") children.push(react.createElement("div", {
-		style: styles.muted,
-		key: "m"
-	}, "Loading…"));
-	else if (state.status === "error") children.push(react.createElement("div", {
-		style: styles.error,
-		key: "e"
-	}, `Could not load the report: ${state.error ?? "unknown"}`));
-	else if (state.status !== "ready" || state.report === void 0) children.push(react.createElement("div", {
-		style: styles.muted,
-		key: "m"
-	}, "This session has no folds to report."));
+	const children = [el("div", {
+		className: "cf-head",
+		key: "head"
+	}, el("span", { className: "cf-head-title" }, "Context fold"), sessionId === void 0 ? null : el("span", { className: "cf-head-note" }, state.status === "ready" ? `${String(state.report?.folds.length ?? 0)} fold(s) on the current surface` : "stage-boundary folding"))];
+	if (sessionId === void 0) children.push(el("div", { className: "cf-card" }, el("div", { className: "cf-empty" }, el("div", { className: "cf-empty-title" }, "No active session"), el("div", null, "Open a conversation to see its folds."))));
+	else if (state.status === "loading") children.push(el("div", { className: "cf-card" }, el("div", { className: "cf-empty" }, "Loading…")));
+	else if (state.status === "error") children.push(el("div", { className: "cf-card" }, el("div", { className: "cf-empty" }, el("div", { className: "cf-empty-title cf-bad" }, "Could not load the report"), el("div", null, state.error ?? "unknown error"))));
+	else if (state.status !== "ready" || state.report === void 0) children.push(el("div", { className: "cf-card" }, el("div", { className: "cf-empty" }, "This session has no folds to report.")));
 	else {
-		children.push(react.createElement(Summary, {
+		children.push(el(Summary, {
 			key: "summary",
 			report: state.report
 		}));
-		children.push(react.createElement(FoldList, {
+		children.push(el(FoldList, {
 			key: "folds",
 			sessionId,
 			report: state.report
 		}));
 	}
-	return react.createElement("div", {
-		className: "context-fold-tab",
-		style: styles.root
-	}, ...children);
+	return el("div", { className: "cf-root" }, ...children);
 }
 /** Client plugin name. */
 const name = "context-fold-client";
@@ -313,6 +637,7 @@ const inject = ["slots", "locale"];
 * @param ctx - client plugin context.
 */
 function apply(ctx) {
+	ensurePanelCss();
 	const registerDictionaries = () => {
 		ctx.locale.register(NS, {
 			zh,

package/lib/index.js

@@ -1351,19 +1351,26 @@ function counterfactualOf(folds, steps, options = {}) {
 	const savedTokenRate = cacheReadShare === void 0 ? price.uncachedInput : cacheReadShare * price.cacheRead + (1 - cacheReadShare) * price.uncachedInput;
 	const grossSaving = tokensSavedPerStep * remainingSteps * savedTokenRate;
 	let invalidationCost = 0;
-	if (foldSteps !== void 0) for (const foldStep of foldSteps) {
-		const at = steps.find((step) => step.step >= foldStep);
-		if (at === void 0) continue;
-		const prompt = promptTokensOf(at);
-		invalidationCost += prompt * (price.uncachedInput - price.cacheRead);
+	if (foldSteps !== void 0) {
+		const distinct = [...new Set(foldSteps)];
+		for (const foldStep of distinct) {
+			const at = steps.find((step) => step.step >= foldStep);
+			if (at === void 0) continue;
+			const prompt = promptTokensOf(at);
+			invalidationCost += prompt * (price.uncachedInput - price.cacheRead);
+		}
 	}
 	const counterfactualPromptCost = actualPromptCost + tokensSavedPerStep * remainingSteps * savedTokenRate;
 	const assumptions = [];
 	assumptions.push(hasRealUsage ? `Prices are DeepSeek ratios (cache read ${price.cacheRead}×, write ${price.cacheWrite}×, uncached ${price.uncachedInput}×), applied to this session's observed usage.` : "This session reported no provider usage, so even the \"actual\" figures are heuristic token counts, not billed amounts.");
 	if (cacheReadShare !== void 0) assumptions.push(`Saved tokens are priced at this session's observed cache-read share (${(cacheReadShare * 100).toFixed(1)}%), not at the uncached rate.`);
 	if (foldSteps === void 0 || foldSteps.length === 0) assumptions.push("Fold step numbers were unavailable, so every observed step is credited with the saving. Treat the figure as an upper bound.");
-	else assumptions.push(`Each fold is charged one prefix invalidation: the whole prompt after it re-billed from cache-read to uncached once.`);
+	else {
+		const distinctFoldSteps = new Set(foldSteps).size;
+		assumptions.push(`Each of the ${String(distinctFoldSteps)} distinct fold step(s) is charged one prefix invalidation: the prompt after it re-billed from cache-read to uncached once. Folds sharing a step share that charge, because they invalidate the same prefix.`);
+	}
 	assumptions.push("The counterfactual assumes the same number of steps and the same cache behaviour as the real session — a folded prompt might have hit cache differently.");
+	assumptions.push("\"Saving per step\" is the total prompt reduction on the surface, not a per-fold figure: it is multiplied by the steps that followed each fold.");
 	return {
 		tokensNow,
 		tokensIfUnfolded,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context-fold",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "dsh-context-fold: stage-boundary folding of completed tool results into a conclusion plus a spill path, deterministic and replay-safe.",
   "type": "module",
   "main": "lib/index.js",