dsh-desktop-kit 1.0.0 → 2.0.1

package/client.js

@@ -88,6 +88,11 @@ window.__ModuleLoader__.load({
 			if (value % 10 >= 2 && value % 10 <= 4 && (value % 100 < 12 || value % 100 > 14)) return value + " запуска";
 			return value + " запусков";
 		}
+		function compactTokens(value) {
+			const n = Number(value) || 0;
+			if (n >= 1000) return (n / 1000).toFixed(1).replace(".0", "").replace(".", ",") + "k";
+			return String(n);
+		}
 		function shortDate(iso) {
 			if (!iso) return "—";
 			try {
@@ -448,7 +453,7 @@ window.__ModuleLoader__.load({
 			{ id: "design",  label: "Дизайн",  color: "#0E6E5E", skills: ["wow-design", "design-critique", "ui-design-system"] },
 			{ id: "seo",     label: "SEO",     color: "#2C5F8A", skills: ["seo"] },
 			{ id: "content", label: "Контент", color: "#B36A43", skills: ["content-writing"] },
-			{ id: "process", label: "Процесс", color: "#6B7275", skills: ["dev-workflow", "requirements-and-planning", "skills-router"] },
+			{ id: "process", label: "Процесс", color: "#6B7275", skills: ["dev-workflow", "requirements-and-planning", "skills-router", "context-economy"] },
 			{ id: "quality", label: "Качество", color: "#1F7A57", skills: ["testing-strategy", "debugging-playbook", "code-review-checklist"] },
 			{ id: "safety",  label: "Данные",  color: "#94661C", skills: ["database-safety", "security-review", "pg-upgrade-verify"] },
 			{ id: "release", label: "Релиз",   color: "#2C5F8A", skills: ["release-and-deploy", "git-and-ci"] },
@@ -456,7 +461,7 @@ window.__ModuleLoader__.load({
 			{ id: "memory",  label: "Память",  color: "#5B4B8A", skills: ["project-deep-dive", "project-memory-maintenance"] }
 		];
 		const SKILL_NAMES = SKILL_GROUPS.reduce((acc, group) => acc.concat(group.skills), []);
-		const SKILLS_TILE_STYLE = Object.assign({}, TILE_BASE, { display: "block", padding: "10px 12px", cursor: "pointer" });
+		const SKILLS_TILE_STYLE = Object.assign({}, TILE_BASE, { display: "block", padding: "8px 10px", cursor: "pointer" });
 		const SKILLS_HEAD_STYLE = { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px" };
 		const SKILLS_COUNT_STYLE = {
 			display: "inline-flex", alignItems: "center", justifyContent: "center",
@@ -469,14 +474,14 @@ window.__ModuleLoader__.load({
 			fontSize: "10px", fontWeight: 500, marginTop: "2px", letterSpacing: "0.02em",
 			color: "var(--dsw-alias-label-secondary, #777)"
 		};
-		const SKILLS_CHIPS_STYLE = { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "8px" };
+		const SKILLS_CHIPS_STYLE = { display: "flex", flexWrap: "nowrap", gap: "4px", marginTop: "6px", overflow: "hidden", maskImage: "linear-gradient(to right, #000 88%, transparent 100%)", WebkitMaskImage: "linear-gradient(to right, #000 88%, transparent 100%)" };
 		const SKILLS_CHIP_STYLE = {
-			fontSize: "10px", fontWeight: 600, lineHeight: 1.5,
+			fontSize: "9.5px", fontWeight: 600, lineHeight: 1.45,
 			color: "var(--dsw-alias-label-secondary, #666)",
 			border: "1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.10))",
 			borderRadius: "999px", padding: "1px 6px",
 			background: "var(--dsw-alias-settings-card-fill, rgba(0,0,0,.03))",
-			whiteSpace: "nowrap"
+			whiteSpace: "nowrap", flex: "0 0 auto"
 		};
 		const SKILLS_TOGGLE_STYLE = {
 			marginTop: "8px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px",
@@ -540,10 +545,20 @@ window.__ModuleLoader__.load({
 			.wtg9ga_root .GAkraW_groupSection.gkb-collapsed > .wnFoaW_projectRow::after { content: "▸"; }
 			.wtg9ga_root .GAkraW_groupSection.gkb-collapsed > span:not(:first-child) { display: none !important; }
 			.wtg9ga_root .wnFoaW_projectRow:hover::after { opacity: 1; color: var(--dsw-alias-label-primary, #111); }
+			/* Short windows: the sidebar must still show the account/settings foot. */
+			@media (max-height: 820px) {
+				.wtg9ga_root > .wtg9ga_regionArea { min-height: 140px; }
+				.gkb-skills-chips { display: none !important; }
+				.gkb-skills-active { margin-top: 4px !important; }
+			}
+			/* Mobile rail is 55px: tiles cannot fit, so they live behind the FAB. */
+			@media (max-width: 760px) {
+				[data-gkb-tiles] { display: none !important; }
+			}
 		`;
 		const SKILLS_CATALOG_CSS = `
 .gkb-sk-backdrop{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,#070b0a 46%,transparent);backdrop-filter:blur(4px);animation:gkb-sk-fade .18s ease-out}
-.gkb-sk-panel{position:relative;display:flex;flex-direction:column;width:min(1120px,94vw);max-height:88vh;border-radius:18px;border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.1));background:var(--dsw-alias-bg-base,#fff);box-shadow:0 48px 140px -50px rgba(0,10,8,.55),0 1px 0 color-mix(in srgb,#fff 65%,transparent) inset;overflow:hidden;animation:gkb-sk-in .28s cubic-bezier(.16,1,.3,1)}
+.gkb-sk-panel{position:relative;display:flex;flex-direction:column;width:min(1120px,94vw);max-height:92vh;border-radius:18px;border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.1));background:var(--dsw-alias-bg-base,#fff);box-shadow:0 48px 140px -50px rgba(0,10,8,.55),0 1px 0 color-mix(in srgb,#fff 65%,transparent) inset;overflow:hidden;animation:gkb-sk-in .28s cubic-bezier(.16,1,.3,1)}
 .gkb-sk-head{flex:none;display:flex;flex-direction:column;gap:12px;padding:22px 24px 14px;background:
 radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 10%,transparent) 0%,transparent 55%),
 linear-gradient(180deg,color-mix(in srgb,var(--dsw-alias-bg-layer-1,#f6f7f6) 70%,transparent) 0%,transparent 100%);
@@ -556,7 +571,8 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 .gkb-sk-sub b{color:var(--dsw-alias-label-primary,#111);font-weight:650}
 .gkb-sk-close{flex:none;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.14));background:transparent;color:var(--dsw-alias-label-secondary,#555);border-radius:9px;width:32px;height:32px;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
 .gkb-sk-close:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.06));color:var(--dsw-alias-label-primary,#111)}
-.gkb-sk-close:focus-visible,.gkb-sk-card:focus-visible,.gkb-sk-chip:focus-visible,.gkb-sk-btn:focus-visible,.gkb-sk-search:focus-visible,.gkb-sk-sort:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#0E6E5E);outline-offset:2px}
+.gkb-sk-close:focus-visible,.gkb-sk-card:focus-visible,.gkb-sk-chip:focus-visible,.gkb-sk-btn:focus-visible,.gkb-sk-sort:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#0E6E5E);outline-offset:2px}
+.gkb-sk-search:focus,.gkb-sk-search:focus-visible,.gkb-sk-input:focus,.gkb-sk-input:focus-visible{border-color:color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 55%,transparent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 13%,transparent)}
 .gkb-sk-search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
 .gkb-sk-search{flex:1 1 280px;min-width:0;box-sizing:border-box;padding:10px 13px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.14));background:var(--dsw-alias-bg-layer-1,#f7f8f7);color:var(--dsw-alias-label-primary,#111);font:inherit;font-size:13px;line-height:18px}
 .gkb-sk-search::placeholder{color:var(--dsw-alias-label-tertiary,#98a0a8)}
@@ -612,18 +628,52 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 .gkb-sk-btn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}
 .gkb-sk-btn[data-tone="primary"]{border-color:transparent;background:var(--dsw-alias-label-primary,#111);color:var(--dsw-alias-bg-base,#fff)}
 .gkb-sk-foot-note{margin-left:auto;font-size:10px;color:var(--dsw-alias-label-tertiary,#8a939b);align-self:center}
+.gkb-sk-head-actions{display:flex;align-items:center;gap:8px;flex:none}
+.gkb-sk-cost{color:var(--dsw-alias-label-secondary,#7b8490)}
+.gkb-sk-cost[data-heavy="true"]{color:#8E2B18;font-weight:650}
+.gkb-sk-notice{align-self:flex-start;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,#0E6E5E 28%,transparent);background:color-mix(in srgb,#0E6E5E 9%,transparent);color:color-mix(in srgb,#0E6E5E 80%,#111);font-size:11px;font-weight:600;animation:gkb-sk-in .2s ease-out}
+.gkb-sk-btn[data-tone="danger"]{border-color:color-mix(in srgb,#8E2B18 40%,transparent);color:#8E2B18}
+.gkb-sk-btn[data-tone="danger"]:hover{background:color-mix(in srgb,#8E2B18 8%,transparent)}
+.gkb-sk-btn:disabled{opacity:.5;cursor:default}
+.gkb-sk-editor{display:flex;flex-direction:column;gap:8px}
+.gkb-sk-editor-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--dsw-alias-label-primary,#111)}
+.gkb-sk-editor-cost{font-size:10.5px;font-weight:650;color:var(--dsw-alias-label-secondary,#7b8490);font-variant-numeric:tabular-nums}
+.gkb-sk-editor-cost[data-heavy="true"]{color:#8E2B18}
+.gkb-sk-editor-area{width:100%;box-sizing:border-box;min-height:320px;max-height:46vh;padding:12px 14px;border-radius:11px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.14));background:var(--dsw-alias-bg-layer-1,#f7f8f7);color:var(--dsw-alias-label-primary,#1f2937);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11.5px;line-height:17px;resize:vertical;tab-size:2;scrollbar-width:thin}
+.gkb-sk-editor-area:focus{outline:none;border-color:color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 13%,transparent)}
+.gkb-sk-editor-hint{font-size:10.5px;line-height:15px;color:var(--dsw-alias-label-secondary,#7b8490)}
+.gkb-sk-modal-backdrop{position:fixed;inset:0;z-index:9020;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,#070b0a 40%,transparent);animation:gkb-sk-fade .16s ease-out}
+.gkb-sk-modal{width:min(460px,92vw);display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.1));background:var(--dsw-alias-bg-base,#fff);box-shadow:0 32px 90px -40px rgba(0,10,8,.6);animation:gkb-sk-in .22s cubic-bezier(.16,1,.3,1)}
+.gkb-sk-modal-title{margin:0;font-size:17px;line-height:23px;font-weight:720;letter-spacing:-.01em;color:var(--dsw-alias-label-primary,#111)}
+.gkb-sk-modal-text{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#5b6472)}
+.gkb-sk-modal-code{display:block;padding:8px 11px;border-radius:8px;background:var(--dsw-alias-bg-layer-1,#f7f8f7);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:var(--dsw-alias-label-primary,#111)}
+.gkb-sk-field{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--dsw-alias-label-secondary,#7b8490)}
+.gkb-sk-input{padding:9px 11px;border-radius:9px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.16));background:var(--dsw-alias-bg-layer-1,#f7f8f7);color:var(--dsw-alias-label-primary,#111);font:inherit;font-size:13px;letter-spacing:0;text-transform:none}
+.gkb-sk-input:focus,.gkb-sk-input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 13%,transparent)}
+.gkb-sk-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
+.gkb-fab{position:fixed;right:16px;bottom:96px;z-index:8500;display:none;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.14));background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#111);font:inherit;font-size:12px;font-weight:650;box-shadow:0 12px 32px -14px rgba(0,10,8,.45);cursor:pointer}
+.gkb-fab b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--dsw-alias-brand-primary,#0E6E5E) 12%,transparent);color:var(--dsw-alias-brand-primary,#0E6E5E);font-size:10px;font-weight:750}
+.gkb-fab:active{transform:scale(.98)}
+@media (max-width: 760px){.gkb-fab{display:inline-flex}}
 @media (max-width:760px){
 .gkb-sk-backdrop{padding:0}
 .gkb-sk-panel{width:100vw;height:100dvh;max-height:none;border-radius:0;border:none}
-.gkb-sk-head{padding:16px 16px 12px}
-.gkb-sk-title{font-size:20px;line-height:26px}
-.gkb-sk-body{padding:14px 16px 20px}
+.gkb-sk-head{padding:14px 14px 10px;gap:9px}
+.gkb-sk-head-row{flex-wrap:wrap;gap:8px}
+.gkb-sk-head-row > div:first-child{flex:1 1 100%;min-width:0}
+.gkb-sk-kicker{white-space:nowrap;font-size:9px;letter-spacing:.13em}
+.gkb-sk-title{font-size:22px;line-height:27px;margin-top:4px}
+.gkb-sk-sub{font-size:11px;line-height:16px}
+.gkb-sk-head-actions{width:100%;justify-content:flex-start;gap:7px}
+.gkb-sk-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.gkb-sk-body{padding:12px 14px 20px}
 .gkb-sk-grid,.gkb-sk-skeleton{grid-template-columns:1fr}
 .gkb-sk-card-desc{min-height:0;-webkit-line-clamp:4}
 .gkb-sk-detail{width:100%;max-height:100%}
 .gkb-sk-detail-body{padding:14px 14px 16px}
 .gkb-sk-detail-head{padding:14px 14px 12px}
 .gkb-sk-detail-foot{padding:10px 14px 14px}
+.gkb-sk-editor-area{min-height:240px;max-height:40vh}
 }
 @media (prefers-color-scheme:dark){
 .gkb-sk-panel{box-shadow:0 48px 140px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
@@ -688,25 +738,21 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 					h("div", { key: "titles" }, [
 						h("div", { key: "label", style: LABEL_STYLE }, "Навыки"),
 						h("div", { key: "sub", style: SKILLS_SUB_STYLE }, totals
-							? pluralRuns(totals.runs) + " · " + totals.used + " из " + totals.skills + " использованы"
+							? pluralRuns(totals.runs) + " · " + totals.used + "/" + totals.skills + " · ≈" + compactTokens(totals.tokens)
 							: "загрузка статистики…")
 					]),
 					h("span", { key: "count", style: SKILLS_COUNT_STYLE }, String(count))
 				]),
 				active.length > 0
-					? h("div", { key: "active", style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "6px", minWidth: 0 } }, [
+					? h("div", { key: "active", className: "gkb-skills-active", style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "6px", minWidth: 0 } }, [
 						h("span", { key: "dot", className: "gkb-sk-pulse", style: { width: "6px", height: "6px", boxShadow: "0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #0E6E5E) 15%, transparent)" } }),
 						h("span", { key: "label", style: { fontSize: "9px", fontWeight: 750, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--dsw-alias-brand-primary, #0E6E5E)", flex: "none" } }, "в работе"),
 						h("span", { key: "names", style: { fontSize: "10px", color: "var(--dsw-alias-label-secondary, #666)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, activeNames.join(", ") + activeMore)
 					])
 					: null,
-				h("div", { key: "chips", style: SKILLS_CHIPS_STYLE }, categories.map((category) =>
+				h("div", { key: "chips", className: "gkb-skills-chips", style: SKILLS_CHIPS_STYLE }, categories.slice(0, 4).map((category) =>
 					h("span", { key: category.id, style: SKILLS_CHIP_STYLE }, category.label + " " + (counts[category.id] || ""))
-				)),
-				h("div", { key: "footer", style: { marginTop: "7px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", fontSize: "10px", fontWeight: 650, letterSpacing: ".04em", color: "var(--dsw-alias-label-secondary, #777)" } }, [
-					h("span", { key: "text" }, "Открыть каталог"),
-					h("span", { key: "arrow", style: { opacity: .8 } }, "→")
-				])
+				))
 			]);
 		}
 
@@ -720,6 +766,81 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 			const [detailLoading, setDetailLoading] = react.useState(false);
 			const [detailError, setDetailError] = react.useState("");
 			const [copied, setCopied] = react.useState(false);
+			const [editor, setEditor] = react.useState(null);
+			const [createDraft, setCreateDraft] = react.useState(null);
+			const [deleteConfirm, setDeleteConfirm] = react.useState(null);
+			const [notice, setNotice] = react.useState("");
+			const editorRef = react.useRef(null);
+			react.useEffect(() => {
+				if (editor && editorRef.current) editorRef.current.focus();
+			}, [editor && editor.name]);
+
+			const tokenEstimate = (text) => {
+				try { return Math.max(40, Math.round(new TextEncoder().encode(String(text)).length / 3.2)); } catch { return 0; }
+			};
+			const shortTokens = (value) => {
+				const n = Number(value) || 0;
+				if (n >= 1000) return (n / 1000).toFixed(1).replace(".0", "").replace(".", ",") + "k";
+				return String(n);
+			};
+			const flash = (message) => {
+				setNotice(message);
+				setTimeout(() => setNotice(""), 3200);
+			};
+			const reloadSkills = async () => {
+				await loadSkills(store.sessionId, true);
+			};
+			const openEditor = () => {
+				if (!detail || !detail.skill) return;
+				setEditor({ name: detail.skill.name, content: detail.skill.content, saving: false, error: "", baseTokens: detail.skill.tokens });
+			};
+			const saveEditor = async () => {
+				if (!editor || editor.saving) return;
+				setEditor(Object.assign({}, editor, { saving: true, error: "" }));
+				try {
+					const saved = await callSkills("skill-save", { name: editor.name, content: editor.content, sessionId: store.sessionId || undefined });
+					setDetail((previous) => previous ? Object.assign({}, previous, { skill: saved }) : previous);
+					setEditor(null);
+					await reloadSkills();
+					flash("Сохранено · резервная копия в .dsh-kit-backups");
+				} catch (error) {
+					setEditor((previous) => previous ? Object.assign({}, previous, { saving: false, error: String(error && error.message ? error.message : error) }) : previous);
+				}
+			};
+			const submitCreate = async () => {
+				if (!createDraft || createDraft.busy) return;
+				const name = createDraft.name.trim();
+				if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) {
+					setCreateDraft(Object.assign({}, createDraft, { error: "Имя: kebab-case из латиницы и цифр, например my-skill" }));
+					return;
+				}
+				setCreateDraft(Object.assign({}, createDraft, { busy: true, error: "" }));
+				try {
+					const result = createDraft.mode === "duplicate"
+						? await callSkills("skill-duplicate", { source: createDraft.source, name, sessionId: store.sessionId || undefined })
+						: await callSkills("skill-create", { name, description: createDraft.description.trim(), sessionId: store.sessionId || undefined });
+					setCreateDraft(null);
+					await reloadSkills();
+					setSelected(result.skill.name);
+					flash(createDraft.mode === "duplicate" ? "Копия создана" : "Навык создан");
+				} catch (error) {
+					setCreateDraft((previous) => previous ? Object.assign({}, previous, { busy: false, error: String(error && error.message ? error.message : error) }) : previous);
+				}
+			};
+			const submitDelete = async () => {
+				if (!deleteConfirm || deleteConfirm.busy) return;
+				setDeleteConfirm(Object.assign({}, deleteConfirm, { busy: true, error: "" }));
+				try {
+					await callSkills("skill-delete", { name: deleteConfirm.name, sessionId: store.sessionId || undefined });
+					setDeleteConfirm(null);
+					setSelected(null);
+					setDetail(null);
+					await reloadSkills();
+					flash("Навык перемещён в .dsh-kit-trash — данные не потеряны");
+				} catch (error) {
+					setDeleteConfirm((previous) => previous ? Object.assign({}, previous, { busy: false, error: String(error && error.message ? error.message : error) }) : previous);
+				}
+			};
 
 			react.useEffect(() => {
 				if (store.open) void loadSkills(store.sessionId, true);
@@ -732,14 +853,22 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 			react.useEffect(() => {
 				if (!store.open) return undefined;
 				const onKey = (event) => {
+					if ((event.metaKey || event.ctrlKey) && String(event.key).toLowerCase() === "s" && editor) {
+						event.preventDefault();
+						void saveEditor();
+						return;
+					}
 					if (event.key !== "Escape") return;
 					event.stopPropagation();
+					if (editor) { setEditor(null); return; }
+					if (deleteConfirm) { setDeleteConfirm(null); return; }
+					if (createDraft) { setCreateDraft(null); return; }
 					if (selected) { setSelected(null); setDetail(null); }
 					else skillsStore.set({ open: false });
 				};
 				document.addEventListener("keydown", onKey, true);
 				return () => document.removeEventListener("keydown", onKey, true);
-			}, [store.open, selected]);
+			}, [store.open, selected, editor, deleteConfirm, createDraft]);
 			react.useEffect(() => {
 				if (!selected) { setDetail(null); setDetailError(""); return; }
 				let alive = true;
@@ -804,7 +933,8 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 				h("span", { className: "gkb-sk-card-foot", key: "foot" }, [
 					h("span", { className: "gkb-sk-meta", key: "meta" }, [
 						h("span", { key: "files" }, h("b", null, "обновлён "), shortDate(skill.updatedAt)),
-						h("span", { key: "used" }, h("b", null, skill.usage.count > 0 ? "последний раз " : "ещё не использовался"), skill.usage.count > 0 ? shortDate(skill.usage.lastAt) : "")
+						h("span", { key: "used" }, h("b", null, skill.usage.count > 0 ? "последний раз " : "ещё не использовался"), skill.usage.count > 0 ? shortDate(skill.usage.lastAt) : ""),
+						h("span", { key: "cost", className: "gkb-sk-cost", "data-heavy": skill.heavy ? "true" : "false" }, "ядро ≈" + shortTokens(skill.tokens))
 					]),
 					activeNames.has(skill.name) ? h("span", { className: "gkb-sk-now", key: "spark", style: { position: "static" } }, "в работе") : h("span", { className: "gkb-sk-spark", key: "spark" }, sparkline(skill.usage.series, skill.color))
 				]),
@@ -830,6 +960,7 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 									h("div", { className: "gkb-sk-stat", key: "week" }, [h("span", { key: "l" }, "за неделю"), h("b", { key: "v" }, String(detail.usage ? detail.usage.week : 0))]),
 									h("div", { className: "gkb-sk-stat", key: "last" }, [h("span", { key: "l" }, "последний"), h("b", { key: "v" }, shortDate(detail.usage && detail.usage.lastAt)), h("small", { key: "s" }, detail.usage && detail.usage.lastAt ? new Date(detail.usage.lastAt).toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" }) : "")]),
 									h("div", { className: "gkb-sk-stat", key: "files" }, [h("span", { key: "l" }, "файлов"), h("b", { key: "v" }, String(detail.skill.files)), h("small", { key: "s" }, detail.skill.human)]),
+									h("div", { className: "gkb-sk-stat", key: "tokens" }, [h("span", { key: "l" }, "ядро"), h("b", { key: "v" }, "≈" + shortTokens(detail.skill.tokens)), h("small", { key: "s" }, detail.skill.heavy ? "выше бюджета 6k" : "в бюджете")]),
 									h("div", { className: "gkb-sk-stat", key: "updated" }, [h("span", { key: "l" }, "обновлён"), h("b", { key: "v" }, shortDate(detail.skill.updatedAt))])
 								])
 								: null,
@@ -837,11 +968,46 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 								? h("div", { key: "when", className: "gkb-sk-when" }, [h("b", { key: "b" }, "Когда применять: "), detail.skill.whenToUse])
 								: null,
 							detail && detail.skill
-								? h("pre", { key: "content", className: "gkb-sk-content" }, detail.skill.content)
+								? (editor
+									? h("div", { key: "editor", className: "gkb-sk-editor" }, [
+										h("div", { key: "head", className: "gkb-sk-editor-head" }, [
+											h("span", { key: "t" }, "Редактирование SKILL.md"),
+											h("span", { key: "c", className: "gkb-sk-editor-cost", "data-heavy": tokenEstimate(editor.content) > 6000 ? "true" : "false" }, "≈" + shortTokens(tokenEstimate(editor.content)) + " токенов")
+										]),
+										editor.error ? h("div", { key: "err", className: "gkb-sk-error" }, editor.error) : null,
+										h("textarea", {
+											key: "area",
+											ref: editorRef,
+											className: "gkb-sk-editor-area",
+											value: editor.content,
+											spellCheck: false,
+											"aria-label": "Содержимое SKILL.md",
+											onChange: (event) => setEditor(Object.assign({}, editor, { content: event.target.value })),
+											onKeyDown: (event) => {
+												if (event.key !== "Tab") return;
+												event.preventDefault();
+												const element = event.target;
+												const start = element.selectionStart;
+												const end = element.selectionEnd;
+												const next = editor.content.slice(0, start) + "  " + editor.content.slice(end);
+												setEditor(Object.assign({}, editor, { content: next }));
+												requestAnimationFrame(() => { element.selectionStart = start + 2; element.selectionEnd = start + 2; });
+											}
+										}),
+										h("div", { key: "hint", className: "gkb-sk-editor-hint" }, "Ctrl+S — сохранить. Перед записью создаётся резервная копия в ~/.dsh/skills/.dsh-kit-backups. Держите ядро ≤ 6k токенов: детали — в references.")
+									])
+									: h("pre", { key: "content", className: "gkb-sk-content" }, detail.skill.content))
 								: null
 						]),
-						h("div", { className: "gkb-sk-detail-foot" }, [
-							h("button", { key: "open", type: "button", className: "gkb-sk-btn", "data-tone": "primary", onClick: () => { void callSkills("open-skill", { name: selected }).catch(() => {}); } }, "Открыть папку"),
+						h("div", { className: "gkb-sk-detail-foot" }, editor ? [
+							h("button", { key: "save", type: "button", className: "gkb-sk-btn", "data-tone": "primary", disabled: editor.saving, onClick: () => { void saveEditor(); } }, editor.saving ? "Сохраняю…" : "Сохранить"),
+							h("button", { key: "cancel", type: "button", className: "gkb-sk-btn", onClick: () => setEditor(null) }, "Отмена"),
+							h("span", { key: "note", className: "gkb-sk-foot-note" }, "≈" + shortTokens(tokenEstimate(editor.content)) + " токенов · Ctrl+S")
+						] : [
+							h("button", { key: "edit", type: "button", className: "gkb-sk-btn", "data-tone": "primary", onClick: openEditor }, "Редактировать"),
+							h("button", { key: "dup", type: "button", className: "gkb-sk-btn", onClick: () => setCreateDraft({ mode: "duplicate", name: selected + "-copy", source: selected, description: "", error: "" }) }, "Дублировать"),
+							h("button", { key: "del", type: "button", className: "gkb-sk-btn", "data-tone": "danger", onClick: () => setDeleteConfirm({ name: selected, error: "" }) }, "Удалить"),
+							h("button", { key: "open", type: "button", className: "gkb-sk-btn", onClick: () => { void callSkills("open-skill", { name: selected }).catch(() => {}); } }, "Открыть папку"),
 							h("button", { key: "copy", type: "button", className: "gkb-sk-btn", onClick: () => { try { void navigator.clipboard.writeText(selected); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch {} } }, copied ? "Скопировано" : "Скопировать имя"),
 							h("button", { key: "close", type: "button", className: "gkb-sk-btn", onClick: () => { setSelected(null); setDetail(null); } }, "Закрыть"),
 							h("span", { key: "path", className: "gkb-sk-foot-note" }, detail && detail.skill ? detail.skill.path : "")
@@ -850,6 +1016,47 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 				)
 				: null;
 
+			const createModal = createDraft
+				? h("div", { className: "gkb-sk-modal-backdrop", onMouseDown: (event) => { if (event.target === event.currentTarget) setCreateDraft(null); } },
+					h("div", { className: "gkb-sk-modal", role: "dialog", "aria-modal": "true", "aria-label": createDraft.mode === "duplicate" ? "Дублировать навык" : "Новый навык" }, [
+						h("h3", { key: "title", className: "gkb-sk-modal-title" }, createDraft.mode === "duplicate" ? "Дублировать навык" : "Новый навык"),
+						createDraft.mode === "duplicate"
+							? h("p", { key: "text", className: "gkb-sk-modal-text" }, "Копия навыка «" + createDraft.source + "» со всеми references.")
+							: h("p", { key: "text", className: "gkb-sk-modal-text" }, "Появится папка в ~/.dsh/skills с компактным шаблоном: ядро ≤ 6k токенов, детали — в references."),
+						h("label", { key: "name", className: "gkb-sk-field" }, [
+							h("span", { key: "s" }, "Имя (kebab-case)"),
+							h("input", { key: "i", className: "gkb-sk-input", value: createDraft.name, autoFocus: true, placeholder: "my-skill", onChange: (event) => setCreateDraft(Object.assign({}, createDraft, { name: event.target.value })) })
+						]),
+						createDraft.mode === "create"
+							? h("label", { key: "desc", className: "gkb-sk-field" }, [
+								h("span", { key: "s" }, "Короткое описание-триггер"),
+								h("input", { key: "i", className: "gkb-sk-input", value: createDraft.description, placeholder: "Когда применять навык — одной строкой", onChange: (event) => setCreateDraft(Object.assign({}, createDraft, { description: event.target.value })) })
+							])
+							: null,
+						createDraft.error ? h("div", { key: "error", className: "gkb-sk-error" }, createDraft.error) : null,
+						h("div", { key: "foot", className: "gkb-sk-modal-foot" }, [
+							h("button", { key: "ok", type: "button", className: "gkb-sk-btn", "data-tone": "primary", disabled: createDraft.busy, onClick: () => { void submitCreate(); } }, createDraft.busy ? "Создаю…" : (createDraft.mode === "duplicate" ? "Создать копию" : "Создать навык")),
+							h("button", { key: "cancel", type: "button", className: "gkb-sk-btn", onClick: () => setCreateDraft(null) }, "Отмена")
+						])
+					])
+				)
+				: null;
+
+			const deleteModal = deleteConfirm
+				? h("div", { className: "gkb-sk-modal-backdrop", onMouseDown: (event) => { if (event.target === event.currentTarget) setDeleteConfirm(null); } },
+					h("div", { className: "gkb-sk-modal", role: "dialog", "aria-modal": "true", "aria-label": "Удалить навык" }, [
+						h("h3", { key: "title", className: "gkb-sk-modal-title" }, "Удалить навык?"),
+						h("p", { key: "text", className: "gkb-sk-modal-text" }, "Папка переместится в ~/.dsh/skills/.dsh-kit-trash — это обратимо, файлы не удаляются."),
+						h("code", { key: "name", className: "gkb-sk-modal-code" }, deleteConfirm.name),
+						deleteConfirm.error ? h("div", { key: "error", className: "gkb-sk-error" }, deleteConfirm.error) : null,
+						h("div", { key: "foot", className: "gkb-sk-modal-foot" }, [
+							h("button", { key: "ok", type: "button", className: "gkb-sk-btn", "data-tone": "danger", disabled: deleteConfirm.busy, onClick: () => { void submitDelete(); } }, deleteConfirm.busy ? "Переношу…" : "В корзину"),
+							h("button", { key: "cancel", type: "button", className: "gkb-sk-btn", onClick: () => setDeleteConfirm(null) }, "Отмена")
+						])
+					])
+				)
+				: null;
+
 			return h("div", { className: "gkb-sk-backdrop", onMouseDown: (event) => { if (event.target === event.currentTarget) close(); } },
 				h("div", { className: "gkb-sk-panel", role: "dialog", "aria-modal": "true", "aria-label": "Каталог навыков" },
 					h("div", { className: "gkb-sk-head" }, [
@@ -858,10 +1065,14 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 								h("div", { key: "kicker", className: "gkb-sk-kicker" }, "DSH · навыки"),
 								h("h2", { key: "title", className: "gkb-sk-title" }, "Мои навыки"),
 								h("div", { key: "sub", className: "gkb-sk-sub" }, total
-									? [h("b", { key: "n" }, pluralSkills(total.skills)), " · ", h("b", { key: "r" }, pluralRuns(total.runs)), " · ", h("b", { key: "u" }, String(total.used)), " из ", String(total.skills), " использованы", total.active > 0 ? " · " + total.active + " в работе" : ""]
+									? [h("b", { key: "n" }, pluralSkills(total.skills)), " · ", h("b", { key: "r" }, pluralRuns(total.runs)), " · ", h("b", { key: "u" }, String(total.used)), " из ", String(total.skills), " использовано", " · ≈", h("b", { key: "t" }, shortTokens(total.tokens)), " токенов ядер", total.active > 0 ? " · " + total.active + " в работе" : ""]
 									: "Загружаю статистику…")
 							]),
-							h("button", { key: "close", type: "button", className: "gkb-sk-close", onClick: close, "aria-label": "Закрыть каталог навыков" }, "×")
+							h("div", { key: "actions", className: "gkb-sk-head-actions" }, [
+								h("button", { key: "tokens", type: "button", className: "gkb-sk-btn", onClick: () => { try { if (typeof window.__DSH_TOKEN_OPEN__ === "function") window.__DSH_TOKEN_OPEN__(store.sessionId || undefined); } catch {} } }, "Токены"),
+								h("button", { key: "new", type: "button", className: "gkb-sk-btn", "data-tone": "primary", onClick: () => setCreateDraft({ mode: "create", name: "", description: "", error: "" }) }, "Новый навык"),
+								h("button", { key: "close", type: "button", className: "gkb-sk-close", onClick: close, "aria-label": "Закрыть каталог навыков" }, "×")
+							])
 						]),
 						h("div", { key: "search", className: "gkb-sk-search-row" }, [
 							h("input", { key: "input", className: "gkb-sk-search", placeholder: "Поиск по названию, описанию или категории…", value: query, onChange: (event) => setQuery(event.target.value), autoFocus: true, "aria-label": "Поиск навыков" }),
@@ -873,6 +1084,7 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 							])
 						]),
 						activeBand,
+						notice ? h("div", { key: "notice", className: "gkb-sk-notice", role: "status" }, notice) : null,
 						h("div", { key: "filters", className: "gkb-sk-filters" }, [
 							h("button", { key: "all", type: "button", className: "gkb-sk-chip", "data-active": category === "all" ? "true" : "false", onClick: () => setCategory("all") }, "Все " + skills.length),
 							...categories.filter((item) => counts[item.id] > 0).map((item) => h("button", {
@@ -897,10 +1109,36 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 							: null
 					]),
 					detailPanel
-				)
+				),
+				createModal,
+				deleteModal
 			);
 		}
 
+		/* Mobile rail cannot hold the tile stack; one pill opens the catalog. */
+		function MobileSkillsFab() {
+			const store = useSkillsStore();
+			if (store.open) return null;
+			const totals = store.data ? store.data.totals : null;
+			const open = () => {
+				skillsStore.set({ open: true, sessionId: store.sessionId || null });
+				void loadSkills(store.sessionId, true);
+			};
+			return h("button", {
+				type: "button",
+				className: "gkb-fab",
+				onClick: open,
+				"aria-label": "Открыть каталог навыков"
+			}, [
+				h("svg", { key: "icon", width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, [
+					h("path", { key: "a", d: "M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2L12 3z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }),
+					h("circle", { key: "b", cx: 19, cy: 5, r: 1.4, fill: "currentColor" })
+				]),
+				h("span", { key: "label" }, "Навыки"),
+				totals ? h("b", { key: "count" }, String(totals.skills)) : null
+			]);
+		}
+
 		function SpendRow(props) {
 			if (props && props.wide === false) return null;
 			const snap = useSnapshot();
@@ -926,13 +1164,16 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 				h("span", { key: "value", style: amountStyle }, value)
 			]);
 		}
-		/* One slot registration: two stacked full-width AURORA tiles */
+		/* One slot registration: AURORA tiles in a single full-width column.
+		 * Token Lab (a sibling client part) hands its tile over through a global;
+		 * rendering it here keeps the footer stack instead of a second slot row. */
 		function SidebarTiles(props) {
+			const TokenTile = typeof window !== "undefined" ? window.__DSH_TOKEN_TILE__ : null;
 			return h("div", {
 				style: {
 					display: "flex",
 					flexDirection: "column",
-					gap: "2px",
+					gap: "4px",
 					width: "100%",
 					boxSizing: "border-box",
 					padding: "4px 8px 6px"
@@ -940,6 +1181,7 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 				"data-gkb-tiles": "1"
 			}, [
 				h(SkillsRow, Object.assign({ key: "skills" }, props)),
+				TokenTile ? h(TokenTile, { key: "tokens", useSessions: props && props.useSessions }) : null,
 				h(BalanceRow, { key: "balance" }),
 				h(SpendRow, { key: "spend" })
 			]);
@@ -1092,6 +1334,516 @@ border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.07))}
 				order: 640
 			}, SkillsCatalog)), "gkb-ru: skills catalog overlay");
 
+			ctx.effect(() => ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+				name: "shell.overlay",
+				id: "gkb-mobile-fab",
+				order: 660
+			}, MobileSkillsFab)), "gkb-ru: mobile skills fab");
+
+		}
+
+		exports.apply = apply;
+		exports.inject = inject;
+		
+      return module.exports;
+    })());
+
+    /* ---- dsh-token-lab ---- */
+    __parts.push((function () {
+		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;