dsh-desktop-kit 1.0.0 → 2.0.0

package/plugins/dsh-token-lab/lib/client.js

@@ -0,0 +1,504 @@
+window.__ModuleLoader__.load({
+	id: "dsh-token-lab",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		const react = require("react");
+		const h = react.createElement;
+
+		const inject = ["slots", "connection"];
+
+		let pluginCtx;
+
+		/* ------------------------------------------------------------------ */
+		/* session selection + store                                          */
+		/* ------------------------------------------------------------------ */
+
+		function currentSessionSelector(state) {
+			try {
+				const sessions = Object.values(state.byId || {});
+				const main = sessions.find((session) => session && session.retainedBy && (session.retainedBy.mainView || 0) > 0);
+				return main ? main.id : undefined;
+			} catch { return undefined; }
+		}
+
+		const store = {
+			state: { open: false, sessionId: null, report: null, loading: false, error: null, loadedAt: 0 },
+			listeners: new Set(),
+			get() { return this.state; },
+			subscribe(listener) { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; },
+			set(patch) {
+				this.state = Object.assign({}, this.state, patch);
+				for (const listener of Array.from(this.listeners)) { try { listener(); } catch {} }
+			}
+		};
+		function useStore() {
+			return react.useSyncExternalStore(store.subscribe.bind(store), store.get.bind(store), store.get.bind(store));
+		}
+
+		let inflight = null;
+		async function callToken(operation, payload) {
+			if (!pluginCtx || !pluginCtx.connection) throw new Error("RPC недоступен");
+			const result = await pluginCtx.connection.rpc.call("/api", "dsh-token-lab/" + operation, payload || {}, AbortSignal.timeout(20000));
+			if (!result || result.ok !== true) throw new Error((result && result.error && result.error.message) || "ошибка RPC");
+			return result.value;
+		}
+		function loadReport(sessionId, force) {
+			const state = store.get();
+			const wanted = sessionId || state.sessionId || null;
+			if (!force && state.report && state.sessionId === wanted && Date.now() - state.loadedAt < 8000) return Promise.resolve(state.report);
+			if (inflight) return inflight;
+			store.set({ loading: true, error: null, sessionId: wanted });
+			inflight = callToken("report", wanted ? { sessionId: wanted } : {})
+				.then((report) => {
+					store.set({ report, loading: false, error: null, loadedAt: Date.now() });
+					return report;
+				})
+				.catch((error) => {
+					store.set({ loading: false, error: String(error && error.message ? error.message : error) });
+					return null;
+				})
+				.finally(() => { inflight = null; });
+			return inflight;
+		}
+
+		/* Cross-plugin opener: the skills catalog offers a "Токены" button that
+		 * works on mobile, where the sidebar tile rail is collapsed. */
+		try {
+			if (typeof window !== "undefined") {
+				window.__DSH_TOKEN_OPEN__ = (sessionId) => {
+					const wanted = sessionId || store.state.sessionId || null;
+					store.set({ open: true, sessionId: wanted });
+					void loadReport(wanted, true);
+				};
+			}
+		} catch {}
+
+		/* ------------------------------------------------------------------ */
+		/* formatting                                                         */
+		/* ------------------------------------------------------------------ */
+
+		function num(value) {
+			const n = Number(value) || 0;
+			return n.toLocaleString("ru-RU");
+		}
+		function compact(value) {
+			const n = Number(value) || 0;
+			if (n >= 1000000) return (n / 1000000).toFixed(1).replace(".0", "").replace(".", ",") + "M";
+			if (n >= 1000) return (n / 1000).toFixed(1).replace(".0", "").replace(".", ",") + "k";
+			return String(Math.round(n));
+		}
+		function percent(value, digits) {
+			const n = Number(value) || 0;
+			return (n * 100).toFixed(digits === undefined ? 0 : digits).replace(".", ",") + "%";
+		}
+		function pressureColor(pressure) {
+			const p = Number(pressure) || 0;
+			if (p >= 0.75) return "#8E2B18";
+			if (p >= 0.5) return "#B07A2A";
+			return "#0E6E5E";
+		}
+		function pressureLabel(pressure) {
+			const p = Number(pressure) || 0;
+			if (p >= 0.85) return "Почти переполнение — пора сжимать";
+			if (p >= 0.65) return "Заполнено больше половины";
+			if (p >= 0.35) return "Рабочий диапазон";
+			return "Много свободного места";
+		}
+		function plural(count, one, few, many) {
+			const n = Math.abs(Number(count) || 0) % 100;
+			const last = n % 10;
+			if (n > 10 && n < 20) return many;
+			if (last === 1) return one;
+			if (last >= 2 && last <= 4) return few;
+			return many;
+		}
+
+		/* ------------------------------------------------------------------ */
+		/* primitives                                                         */
+		/* ------------------------------------------------------------------ */
+
+		function Ring(props) {
+			const pressure = Math.max(0, Math.min(1, Number(props.pressure) || 0));
+			const color = pressureColor(pressure);
+			const radius = 52;
+			const circumference = 2 * Math.PI * radius;
+			const dash = circumference * pressure;
+			return h("svg", {
+				className: "tl-ring",
+				width: 132, height: 132, viewBox: "0 0 132 132",
+				role: "img",
+				"aria-label": "Заполнение контекстного окна " + percent(pressure)
+			}, [
+				h("circle", { key: "track", cx: 66, cy: 66, r: radius, fill: "none", stroke: "color-mix(in oklab, currentColor 12%, transparent)", strokeWidth: 9 }),
+				h("circle", {
+					key: "value", cx: 66, cy: 66, r: radius, fill: "none", stroke: color, strokeWidth: 9,
+					strokeLinecap: "round", strokeDasharray: dash + " " + circumference,
+					transform: "rotate(-90 66 66)",
+					style: { transition: "stroke-dasharray 600ms cubic-bezier(.16,1,.3,1), stroke 300ms ease" }
+				}),
+				h("text", { key: "pct", x: 66, y: 62, textAnchor: "middle", fontSize: 25, fontWeight: 720, fill: "currentColor", style: { fontVariantNumeric: "tabular-nums", letterSpacing: "-.02em" } }, percent(pressure)),
+				h("text", { key: "cap", x: 66, y: 82, textAnchor: "middle", fontSize: 9.5, fontWeight: 650, letterSpacing: ".12em", fill: "currentColor", opacity: 0.55 }, "КОНТЕКСТ")
+			]);
+		}
+
+		function Sparkline(props) {
+			const values = Array.isArray(props.series) ? props.series.filter((value) => Number.isFinite(value)) : [];
+			if (values.length < 2) return null;
+			const width = 560;
+			const height = 74;
+			const max = Math.max(1, ...values);
+			const step = width / (values.length - 1);
+			const points = values.map((value, index) => [index * step, height - 4 - (value / max) * (height - 12)]);
+			const line = points.map((point, index) => (index === 0 ? "M" : "L") + point[0].toFixed(1) + " " + point[1].toFixed(1)).join(" ");
+			const area = line + " L" + width + " " + height + " L0 " + height + " Z";
+			const id = "tl-spark-" + (props.id || "main");
+			return h("svg", { className: "tl-spark", viewBox: "0 0 " + width + " " + height, preserveAspectRatio: "none", "aria-hidden": "true" }, [
+				h("defs", { key: "defs" }, h("linearGradient", { id, x1: 0, y1: 0, x2: 0, y2: 1 }, [
+					h("stop", { key: "a", offset: "0%", stopColor: "var(--tl-accent, #0E6E5E)", stopOpacity: 0.28 }),
+					h("stop", { key: "b", offset: "100%", stopColor: "var(--tl-accent, #0E6E5E)", stopOpacity: 0 })
+				])),
+				h("path", { key: "area", d: area, fill: "url(#" + id + ")" }),
+				h("path", { key: "line", d: line, fill: "none", stroke: "var(--tl-accent, #0E6E5E)", strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })
+			]);
+		}
+
+		function River(props) {
+			const groups = Array.isArray(props.groups) ? props.groups.filter((group) => group.tokens > 0) : [];
+			const total = groups.reduce((sum, group) => sum + group.tokens, 0) || 1;
+			return h("div", { className: "tl-river", role: "img", "aria-label": "Состав контекста по типам сообщений" },
+				groups.map((group) => h("span", {
+					key: group.id,
+					className: "tl-river-seg",
+					style: { width: Math.max(2, (group.tokens / total) * 100) + "%", background: group.color },
+					title: group.label + ": " + num(group.tokens)
+				}))
+			);
+		}
+
+		/* ------------------------------------------------------------------ */
+		/* tile                                                               */
+		/* ------------------------------------------------------------------ */
+
+		function TokenTile(props) {
+			const state = useStore();
+			const useSessions = props && props.useSessions;
+			const sessionId = useSessions ? useSessions(currentSessionSelector) : undefined;
+			react.useEffect(() => {
+				if (sessionId) void loadReport(sessionId);
+			}, [sessionId]);
+			react.useEffect(() => {
+				const timer = setInterval(() => {
+					if (!document.hidden) void loadReport(sessionId, true);
+				}, 20000);
+				return () => clearInterval(timer);
+			}, [sessionId]);
+
+			const report = state.report && (!sessionId || state.report.sessionId === sessionId) ? state.report : null;
+			const total = report ? report.totalTokens : 0;
+			const pressure = report ? report.pressure : 0;
+			const color = pressureColor(pressure);
+			const delta = report && report.surfaceDeltaTokens > 0 ? report.surfaceDeltaTokens : 0;
+
+			const open = () => {
+				store.set({ open: true, sessionId: sessionId || state.sessionId });
+				void loadReport(sessionId || state.sessionId, true);
+			};
+			return h("button", {
+				type: "button",
+				className: "tl-tile",
+				"aria-label": "Открыть токен-лабораторию: " + (total ? num(total) + " токенов в контексте" : "нет данных"),
+				onClick: open
+			}, [
+				h("div", { className: "tl-tile-head", key: "head" }, [
+					h("span", { className: "tl-tile-label", key: "label" }, "Токены"),
+					h("span", { className: "tl-tile-pct", key: "pct", style: { color } }, report ? percent(pressure) : "—"),
+					h("span", { className: "tl-tile-dot", key: "dot", style: { background: color } })
+				]),
+				h("div", { className: "tl-tile-row", key: "row" }, [
+					h("b", { key: "b" }, report ? compact(total) : "—"),
+					h("span", { className: "tl-tile-cap", key: "cap" }, report ? "из " + compact(report.contextWindow) : "нет сессии"),
+					delta > 0 ? h("span", { className: "tl-tile-delta", key: "d" }, "+" + compact(delta)) : null
+				]),
+				h("div", { className: "tl-tile-bar", key: "bar" }, h("span", { style: { width: Math.max(2, Math.min(100, pressure * 100)) + "%", background: color } }))
+			]);
+		}
+
+		/* The kit's sidebar tile stack owns the footer slot; hand it this tile so
+		 * both live in one column instead of competing for the slot row. */
+		try {
+			if (typeof window !== "undefined") window.__DSH_TOKEN_TILE__ = TokenTile;
+		} catch {}
+
+		/* ------------------------------------------------------------------ */
+		/* panel                                                              */
+		/* ------------------------------------------------------------------ */
+
+		function TokenPanel() {
+			const state = useStore();
+			react.useEffect(() => {
+				if (!state.open) return undefined;
+				void loadReport(state.sessionId, true);
+				const timer = setInterval(() => {
+					if (!document.hidden) void loadReport(state.sessionId, true);
+				}, 10000);
+				const onKey = (event) => { if (event.key === "Escape") store.set({ open: false }); };
+				document.addEventListener("keydown", onKey);
+				return () => { clearInterval(timer); document.removeEventListener("keydown", onKey); };
+			}, [state.open, state.sessionId]);
+
+			if (!state.open) return null;
+			const report = state.report;
+			const close = () => store.set({ open: false });
+			const pressure = report ? report.pressure : 0;
+			const color = pressureColor(pressure);
+			const groups = report ? report.groups : [];
+			const top = report ? report.top : [];
+			const skills = report ? report.library : null;
+			const savings = skills ? Math.max(0, skills.totalTokens - skills.typicalTokens) : 0;
+
+			return h("div", { className: "tl-backdrop", onClick: (event) => { if (event.target === event.currentTarget) close(); } },
+				h("section", { className: "tl-panel", role: "dialog", "aria-modal": "true", "aria-label": "Токен-лаборатория", style: { "--tl-accent": color } }, [
+					h("header", { className: "tl-head", key: "head" }, [
+						h("div", { key: "titles" }, [
+							h("div", { className: "tl-kicker", key: "k" }, "ТОКЕН-ЛАБОРАТОРИЯ"),
+							h("h2", { className: "tl-title", key: "t" }, "Куда уходит контекст"),
+							h("p", { className: "tl-sub", key: "s" }, report
+								? "Текущая сессия · " + num(report.nodes) + " " + plural(report.nodes, "узел", "узла", "узлов") + " · обновляется вживую"
+								: "Подключаемся к сессии…")
+						]),
+						h("button", { className: "tl-close", key: "c", type: "button", onClick: close, "aria-label": "Закрыть" }, "×")
+					]),
+
+					state.error ? h("div", { className: "tl-error", key: "err" }, state.error) : null,
+
+					report ? h("div", { className: "tl-hero", key: "hero" }, [
+						h("div", { className: "tl-hero-main", key: "main" }, [
+							h("div", { className: "tl-big", key: "big" }, [
+								h("b", { key: "n" }, num(report.totalTokens)),
+								h("span", { key: "u" }, "токенов в контексте")
+							]),
+							h("div", { className: "tl-meta", key: "meta" }, [
+								h("span", { key: "window" }, "окно " + num(report.contextWindow)),
+								h("span", { key: "left" }, "свободно " + num(Math.max(0, report.contextWindow - report.totalTokens))),
+								report.surfaceDeltaTokens > 0 ? h("span", { key: "d", className: "tl-up" }, "+" + num(report.surfaceDeltaTokens) + " за последний шаг") : null
+							]),
+							h("div", { className: "tl-status", key: "st", style: { color } }, [
+								h("span", { className: "tl-status-dot", key: "d", style: { background: color } }),
+								h("span", { key: "t" }, pressureLabel(pressure))
+							])
+						]),
+						h("div", { className: "tl-hero-ring", key: "ring" }, [
+							h(Ring, { key: "r", pressure }),
+							h("div", { className: "tl-hero-hint", key: "h" }, report.baseline && report.baseline.kind === "usage" ? "по факту провайдера" : "оценка DSH")
+						]),
+						h("div", { className: "tl-spark-wrap", key: "spark" }, [
+							h("div", { className: "tl-spark-head", key: "sh" }, [
+								h("span", { key: "l" }, "Рост контекста"),
+								h("span", { key: "v" }, compact(report.totalTokens))
+							]),
+							h(Sparkline, { key: "s", series: report.series })
+						])
+					]) : null,
+
+					report ? h("div", { className: "tl-grid", key: "grid" }, [
+						h("div", { className: "tl-card tl-card-wide", key: "composition" }, [
+							h("div", { className: "tl-card-head", key: "h" }, [
+								h("h3", { key: "t" }, "Состав"),
+								h("span", { key: "s" }, "по типам сообщений")
+							]),
+							h(River, { key: "river", groups }),
+							h("div", { className: "tl-legend", key: "legend" }, groups.map((group) => h("div", { className: "tl-legend-row", key: group.id }, [
+								h("span", { className: "tl-swatch", key: "sw", style: { background: group.color } }),
+								h("span", { className: "tl-legend-label", key: "l" }, group.label),
+								h("span", { className: "tl-legend-count", key: "c" }, group.count + " " + plural(group.count, "узел", "узла", "узлов")),
+								h("span", { className: "tl-legend-tokens", key: "t" }, num(group.tokens)),
+								h("span", { className: "tl-legend-pct", key: "p" }, report.totalTokens > 0 ? percent(group.tokens / report.totalTokens) : "0%")
+							])))
+						]),
+						h("div", { className: "tl-card", key: "top" }, [
+							h("div", { className: "tl-card-head", key: "h" }, [
+								h("h3", { key: "t" }, "Самые тяжёлые"),
+								h("span", { key: "s" }, "топ-6 узлов")
+							]),
+							h("div", { className: "tl-top", key: "list" }, top.length > 0 ? top.map((node, index) => {
+								const max = Math.max(1, ...top.map((item) => item.tokens));
+								return h("div", { className: "tl-top-row", key: node.seq }, [
+									h("span", { className: "tl-rank", key: "r" }, String(index + 1).padStart(2, "0")),
+									h("div", { className: "tl-top-body", key: "b" }, [
+										h("div", { className: "tl-top-text", key: "t" }, node.label || "Системный блок"),
+										h("div", { className: "tl-top-bar", key: "bar" }, h("span", { style: { width: Math.max(4, (node.tokens / max) * 100) + "%" } }))
+									]),
+									h("span", { className: "tl-top-tokens", key: "n" }, num(node.tokens))
+								]);
+							}) : h("div", { className: "tl-empty", key: "empty" }, "Пока пусто: в этой сессии ещё нет сообщений. Откройте рабочую сессию — состав появится здесь."))
+						]),
+						h("div", { className: "tl-card tl-savings", key: "savings" }, [
+							h("div", { className: "tl-card-head", key: "h" }, [
+								h("h3", { key: "t" }, "Экономия навыков"),
+								h("span", { key: "s" }, "библиотека " + (skills ? skills.count : 0) + " шт.")
+							]),
+							h("div", { className: "tl-save-num", key: "n" }, [
+								h("b", { key: "b" }, "−" + compact(savings)),
+								h("span", { key: "s" }, "токенов против загрузки всей библиотеки")
+							]),
+							h("div", { className: "tl-save-compare", key: "cmp" }, [
+								h("div", { key: "a" }, [h("span", { key: "l" }, "вся библиотека"), h("b", { key: "v" }, compact(skills ? skills.totalTokens : 0))]),
+								h("div", { className: "tl-save-arrow", key: "ar" }, "→"),
+								h("div", { key: "b" }, [h("span", { key: "l" }, "3 средних ядра"), h("b", { key: "v", style: { color } }, compact(skills ? skills.typicalTokens : 0))])
+							]),
+							h("div", { className: "tl-save-list", key: "list" }, (skills ? skills.heaviest.slice(0, 4) : []).map((skill) => h("div", { className: "tl-save-row", key: skill.name }, [
+								h("span", { key: "n" }, skill.title),
+								h("span", { key: "t" }, compact(skill.tokens))
+							]))),
+							h("div", { className: "tl-save-foot", key: "foot" }, report.autopilot.mode === "on"
+								? "Автопилот подключает нужные ядра сам — до " + report.autopilot.maxSkills + " навыков"
+								: "Автопилот выключен: навыки грузятся вручную")
+						])
+					]) : h("div", { className: "tl-skeleton", key: "sk" }, "Считаем контекст…"),
+
+					h("footer", { className: "tl-foot", key: "foot" }, [
+						h("span", { key: "l" }, report ? "Сессия " + report.sessionId.slice(0, 18) + "…" : ""),
+						h("span", { key: "r" }, report ? "обновлено " + new Date(report.generatedAt).toLocaleTimeString("ru-RU") : "")
+					])
+				])
+			);
+		}
+
+		/* ------------------------------------------------------------------ */
+		/* styles                                                             */
+		/* ------------------------------------------------------------------ */
+
+		const CSS = `
+.tl-tile{display:flex;flex-direction:column;gap:5px;width:100%;box-sizing:border-box;margin:0;padding:8px 10px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.10));background:var(--dsw-alias-settings-card-fill, rgba(0,0,0,.035));color:var(--dsw-alias-label-secondary,#555);font:inherit;text-align:left;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
+.tl-tile:hover{background:color-mix(in oklab,var(--dsw-alias-label-primary,#111) 6%,transparent);border-color:color-mix(in oklab,var(--dsw-alias-label-primary,#111) 18%,transparent)}
+.tl-tile:active{transform:scale(.995)}
+.tl-tile:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#0E6E5E);outline-offset:2px}
+.tl-tile-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
+.tl-tile-label{font-size:9.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;opacity:.72;flex:1 1 auto}
+.tl-tile-pct{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
+.tl-tile-dot{width:6px;height:6px;border-radius:999px;flex:0 0 auto}
+.tl-tile-row{display:flex;align-items:baseline;gap:5px;color:var(--dsw-alias-label-primary,#111);font-variant-numeric:tabular-nums;line-height:1;min-width:0}
+.tl-tile-row b{font-size:17px;font-weight:720;letter-spacing:-.02em}
+.tl-tile-cap{font-size:9.5px;font-weight:550;opacity:.55;white-space:nowrap}
+.tl-tile-bar{height:3px;border-radius:999px;background:color-mix(in oklab,currentColor 12%,transparent);overflow:hidden}
+.tl-tile-bar span{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.16,1,.3,1)}
+.tl-tile-delta{font-size:9.5px;font-weight:700;color:#8E2B18;margin-left:auto}
+
+.tl-backdrop{position:fixed;inset:0;z-index:9050;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,#070b0a 44%,transparent);animation:tl-fade .18s ease-out}
+.tl-panel{position:relative;display:flex;flex-direction:column;width:min(1080px,94vw);max-height:90vh;overflow:auto;overscroll-behavior:contain;border-radius:20px;border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.1));background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#111);box-shadow:0 48px 140px -50px rgba(0,10,8,.6),0 1px 0 color-mix(in srgb,#fff 65%,transparent) inset;animation:tl-in .32s cubic-bezier(.16,1,.3,1)}
+.tl-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 26px 16px;background:radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--tl-accent,#0E6E5E) 10%,transparent) 0%,transparent 58%),linear-gradient(180deg,color-mix(in srgb,var(--dsw-alias-bg-layer-1,#f6f7f6) 70%,transparent),transparent);border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
+.tl-kicker{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:750;letter-spacing:.18em;color:var(--dsw-alias-label-secondary,#6b7280)}
+.tl-kicker::before{content:"";width:26px;height:1px;background:color-mix(in srgb,var(--tl-accent,#0E6E5E) 65%,transparent)}
+.tl-title{margin:7px 0 0;font-size:25px;line-height:1.15;font-weight:720;letter-spacing:-.025em}
+.tl-sub{margin:5px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#5b6472);font-variant-numeric:tabular-nums}
+.tl-close{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.14));background:transparent;color:var(--dsw-alias-label-secondary,#555);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.tl-close:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.06));color:var(--dsw-alias-label-primary,#111)}
+.tl-close:focus-visible,.tl-panel button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#0E6E5E);outline-offset:2px}
+.tl-hero{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr);gap:26px;align-items:center;padding:24px 26px 20px}
+.tl-big{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
+.tl-big b{font-size:44px;line-height:1;font-weight:730;letter-spacing:-.04em}
+.tl-big span{font-size:12px;font-weight:550;color:var(--dsw-alias-label-secondary,#5b6472)}
+.tl-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11.5px;color:var(--dsw-alias-label-secondary,#5b6472);font-variant-numeric:tabular-nums}
+.tl-meta .tl-up{color:#8E2B18;font-weight:650}
+.tl-status{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:650}
+.tl-status-dot{width:8px;height:8px;border-radius:999px;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 14%,transparent)}
+.tl-hero-ring{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--dsw-alias-label-primary,#111)}
+.tl-ring{display:block}
+.tl-hero-hint{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dsw-alias-label-secondary,#7b8490)}
+.tl-spark-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
+.tl-spark-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dsw-alias-label-secondary,#7b8490);font-weight:650}
+.tl-spark-head span:last-child{font-size:12px;letter-spacing:0;text-transform:none;color:var(--dsw-alias-label-primary,#111);font-variant-numeric:tabular-nums}
+.tl-spark{width:100%;height:74px;display:block}
+.tl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;padding:4px 26px 22px}
+.tl-card{border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));border-radius:14px;padding:16px 16px 14px;background:var(--dsw-alias-bg-layer-1,#f7f8f7);min-width:0}
+.tl-card-wide{grid-column:1 / -1}
+.tl-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
+.tl-card-head h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.02em}
+.tl-card-head span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dsw-alias-label-secondary,#7b8490);font-weight:650}
+.tl-river{display:flex;height:12px;border-radius:999px;overflow:hidden;background:color-mix(in oklab,currentColor 8%,transparent)}
+.tl-river-seg{display:block;height:100%;min-width:3px;transition:width .55s cubic-bezier(.16,1,.3,1);box-shadow:inset -1px 0 0 color-mix(in srgb,#fff 30%,transparent)}
+.tl-legend{display:flex;flex-direction:column;margin-top:12px}
+.tl-legend-row{display:grid;grid-template-columns:10px minmax(0,1fr) 76px 64px 44px;align-items:center;gap:10px;padding:5px 0;border-top:1px solid color-mix(in oklab,currentColor 7%,transparent);font-size:11.5px;font-variant-numeric:tabular-nums}
+.tl-legend-row:first-child{border-top:0}
+.tl-swatch{width:8px;height:8px;border-radius:2px}
+.tl-legend-label{color:var(--dsw-alias-label-primary,#111);font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tl-legend-count{color:var(--dsw-alias-label-secondary,#7b8490);font-size:10.5px}
+.tl-legend-tokens{text-align:right;font-weight:650}
+.tl-legend-pct{text-align:right;color:var(--dsw-alias-label-secondary,#7b8490);font-size:10.5px}
+.tl-top{display:flex;flex-direction:column;gap:10px}
+.tl-top-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center}
+.tl-rank{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary,#7b8490)}
+.tl-top-body{min-width:0;display:flex;flex-direction:column;gap:5px}
+.tl-top-text{font-size:11.5px;line-height:15px;color:var(--dsw-alias-label-primary,#111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tl-top-bar{height:3px;border-radius:999px;background:color-mix(in oklab,currentColor 9%,transparent);overflow:hidden}
+.tl-top-bar span{display:block;height:100%;border-radius:999px;background:var(--tl-accent,#0E6E5E);opacity:.85;transition:width .5s cubic-bezier(.16,1,.3,1)}
+.tl-top-tokens{font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary,#5b6472)}
+.tl-savings{display:flex;flex-direction:column}
+.tl-save-num{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
+.tl-save-num b{font-size:30px;line-height:1;font-weight:730;letter-spacing:-.035em;color:#0E6E5E;font-variant-numeric:tabular-nums}
+.tl-save-num span{font-size:11px;color:var(--dsw-alias-label-secondary,#5b6472);max-width:130px;line-height:14px}
+.tl-save-compare{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px dashed color-mix(in oklab,currentColor 16%,transparent);font-variant-numeric:tabular-nums}
+.tl-save-compare>div{display:flex;flex-direction:column;gap:2px}
+.tl-save-compare span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dsw-alias-label-secondary,#7b8490)}
+.tl-save-compare b{font-size:16px;font-weight:700}
+.tl-save-arrow{font-size:15px;opacity:.5;display:flex;align-items:center}
+.tl-save-list{margin-top:10px;display:flex;flex-direction:column}
+.tl-save-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid color-mix(in oklab,currentColor 7%,transparent);font-size:11px;color:var(--dsw-alias-label-secondary,#5b6472)}
+.tl-save-row span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:var(--dsw-alias-label-primary,#111)}
+.tl-save-foot{margin-top:auto;padding-top:10px;font-size:10.5px;line-height:15px;color:var(--dsw-alias-label-secondary,#7b8490)}
+.tl-error{margin:0 26px 8px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,#8E2B18 35%,transparent);background:color-mix(in srgb,#8E2B18 8%,transparent);color:#8E2B18;font-size:12px}
+.tl-skeleton{padding:60px 26px;text-align:center;color:var(--dsw-alias-label-secondary,#7b8490);font-size:13px}
+.tl-empty{padding:18px 2px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#7b8490)}
+.tl-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 26px;border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07));font-size:10px;color:var(--dsw-alias-label-secondary,#7b8490);font-variant-numeric:tabular-nums}
+@keyframes tl-fade{from{opacity:0}to{opacity:1}}
+@keyframes tl-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
+@media (max-width: 900px){
+ .tl-hero{grid-template-columns:minmax(0,1fr) auto;gap:18px}
+ .tl-spark-wrap{grid-column:1 / -1}
+ .tl-grid{grid-template-columns:1fr}
+ .tl-card-wide{grid-column:auto}
+}
+@media (max-width: 640px){
+ .tl-backdrop{padding:0}
+ .tl-panel{width:100%;max-height:100vh;height:100%;border-radius:0;border-left:0;border-right:0}
+ .tl-head{padding:18px 16px 12px}
+ .tl-title{font-size:21px}
+ .tl-hero{grid-template-columns:1fr;padding:18px 16px 14px;gap:14px}
+ .tl-hero-ring{flex-direction:row;justify-content:flex-start;gap:14px}
+ .tl-big b{font-size:34px}
+ .tl-grid{padding:4px 16px 18px}
+ .tl-legend-row{grid-template-columns:8px minmax(0,1fr) auto}
+ .tl-legend-count{display:none}
+ .tl-legend-pct{display:none}
+ .tl-foot{padding:10px 16px}
+}
+`;
+
+		/* ------------------------------------------------------------------ */
+		/* apply                                                              */
+		/* ------------------------------------------------------------------ */
+
+		function apply(ctx) {
+			pluginCtx = ctx;
+			ctx.effect(() => {
+				const style = document.createElement("style");
+				style.id = "dsh-token-lab";
+				style.textContent = CSS;
+				document.head.appendChild(style);
+				return () => style.remove();
+			}, "token-lab: styles");
+
+			ctx.effect(() => ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+				name: "shell.overlay",
+				id: "token-lab-panel",
+				order: 650
+			}, TokenPanel)), "token-lab: panel");
+		}
+
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});