dsh-context-fold 0.0.0-stage → 0.1.1

package/lib/client.js

@@ -0,0 +1,319 @@
+window.__ModuleLoader__.load({
+  id: "dsh-context-fold",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// src/client.ts
+/** Locale namespace owned by this plugin's client half. */
+const NS = "contextFold";
+/** Dictionary: keep keys aligned with `locale/*.json`. */
+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. */
+async function fetchReport(sessionId) {
+	const response = await fetch("/api/context-fold/report", {
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify({ sessionId })
+	});
+	if (!response.ok) return void 0;
+	const body = await response.json();
+	return body.ok === true ? body.value : void 0;
+}
+/** Fetch the full text behind one fold. */
+async function fetchOriginal(sessionId, locator) {
+	const response = await fetch("/api/context-fold/original", {
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify({
+			sessionId,
+			locator
+		})
+	});
+	if (!response.ok) return void 0;
+	const body = await response.json();
+	return body.ok === true ? body.value?.text : void 0;
+}
+/** Format a number for display. */
+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. */
+function signed(value) {
+	const rounded = Math.round(value * 10) / 10;
+	return `${rounded > 0 ? "+" : ""}${num(rounded)}`;
+}
+/** 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"
+	},
+	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. */
+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,
+		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,
+		key: "r"
+	}, `Re-read signals: ${String(props.report.reReads)} — folded content was fetched again after being folded.`) : null);
+}
+/** One fold row; the original text loads when the row is opened. */
+function FoldItem(props) {
+	const { fold, sessionId } = props;
+	const [original, setOriginal] = react.useState(null);
+	const onToggle = (event) => {
+		if (event.currentTarget?.open !== true || original !== null) return;
+		const locator = fold.locator;
+		if (locator === void 0) return;
+		setOriginal("");
+		fetchOriginal(sessionId, locator).then((text) => {
+			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,
+		onToggle
+	}, ...children);
+}
+/** The per-fold list. */
+function FoldList(props) {
+	const { report, sessionId } = props;
+	const heading = react.createElement("div", {
+		style: styles.heading,
+		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,
+		key: "e"
+	}, "Nothing has been folded in this session yet."));
+	return react.createElement("section", null, heading, ...report.folds.map((fold) => react.createElement(FoldItem, {
+		key: String(fold.seq),
+		sessionId,
+		fold
+	})));
+}
+/**
+* The tab body.
+*
+* The active session id arrives through the standard slot props, and the report
+* is refetched whenever that id changes because the tab outlives navigation.
+*/
+function ContextFoldTab(props) {
+	const sessionId = sessionIdOf(props);
+	const [state, setState] = react.useState({ status: "loading" });
+	react.useEffect(() => {
+		if (sessionId === void 0) {
+			setState({ status: "empty" });
+			return;
+		}
+		let cancelled = false;
+		setState({ status: "loading" });
+		fetchReport(sessionId).then((report) => {
+			if (cancelled) return;
+			setState(report === void 0 ? { status: "empty" } : {
+				status: "ready",
+				report
+			});
+		});
+		return () => {
+			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 !== "ready" || state.report === void 0) children.push(react.createElement("div", {
+		style: styles.muted,
+		key: "m"
+	}, "No report available for this session."));
+	else {
+		children.push(react.createElement(Summary, {
+			key: "summary",
+			report: state.report
+		}));
+		children.push(react.createElement(FoldList, {
+			key: "folds",
+			sessionId,
+			report: state.report
+		}));
+	}
+	return react.createElement("div", {
+		className: "context-fold-tab",
+		style: styles.root
+	}, ...children);
+}
+/** Client plugin name. */
+const name = "context-fold-client";
+/** The tab needs the slot registry and the locale service. */
+const inject = ["slots", "locale"];
+/**
+* Mount the conversation tab.
+*
+* Dictionaries are registered from inside this bundle: the locale service reads
+* them from the plugin registry, not from `locale/*.json` on disk.
+*
+* @param ctx - client plugin context.
+*/
+function apply(ctx) {
+	const registerDictionaries = () => {
+		ctx.locale.register(NS, {
+			zh,
+			en
+		});
+	};
+	if (typeof ctx.effect === "function") ctx.effect(registerDictionaries, "context-fold: dictionaries");
+	else registerDictionaries();
+	const t = (key) => {
+		try {
+			return ctx.locale.bind(NS)(key) || (en[key] ?? key);
+		} catch {
+			return en[key] ?? key;
+		}
+	};
+	ctx.slots.inject("conversation.view", () => ctx.slots.register({
+		name: "conversation.view",
+		id: "context-fold",
+		order: 40,
+		locale: NS,
+		label: () => t("tab.contextFold")
+	}, ContextFoldTab));
+}
+exports.apply = apply;
+exports.inject = inject;
+exports.name = name;
+
+    return module.exports;
+  },
+});