dsh-desktop-kit 1.0.0 → 2.0.0

package/plugins/dsh-gkb-ru-ui/lib/client.js

@@ -70,6 +70,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 {
@@ -430,7 +435,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"] },
@@ -438,7 +443,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",
@@ -451,14 +456,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",
@@ -522,10 +527,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%);
@@ -538,7 +553,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)}
@@ -594,18 +610,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)}
@@ -670,25 +720,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 } }, "→")
-				])
+				))
 			]);
 		}
 
@@ -702,6 +748,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);
@@ -714,14 +835,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;
@@ -786,7 +915,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))
 				]),
@@ -812,6 +942,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,
@@ -819,11 +950,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 : "")
@@ -832,6 +998,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" }, [
@@ -840,10 +1047,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": "Поиск навыков" }),
@@ -855,6 +1066,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", {
@@ -879,10 +1091,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();
@@ -908,13 +1146,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"
@@ -922,6 +1163,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" })
 			]);
@@ -1074,6 +1316,12 @@ 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;

package/plugins/dsh-gkb-ru-ui/lib/index.js

@@ -11,7 +11,7 @@ import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
 import { spawn } from "node:child_process";
-import { collectSkillsData, listSkills, readSkillContent, skillsHome } from "./skills.js";
+import { collectSkillsData, listSkills, readSkillContent, skillsHome, saveSkillContent, createSkill, duplicateSkill, deleteSkill } from "./skills.js";
 
 const ROUTE_BASE = "/api/dsh-gkb-ru-ui";
 const RPC_NAMESPACE = "dsh-gkb-ru-ui";
@@ -127,6 +127,50 @@ export function apply(ctx) {
     return { skill, usage };
   });
 
+  registerOperation(ctx, "skill-save", async (payload) => {
+    const name = typeof payload?.name === "string" ? payload.name : "";
+    const content = typeof payload?.content === "string" ? payload.content : "";
+    if (name.length === 0) {
+      const error = new Error("не указано имя навыка");
+      error.code = "skills/bad-request";
+      throw error;
+    }
+    const saved = saveSkillContent(skillsHome(), name, content);
+    const data = collectSkillsData(skillsHome(), typeof payload?.sessionId === "string" ? payload.sessionId : null);
+    return { ...saved, totals: data.totals };
+  });
+
+  registerOperation(ctx, "skill-create", async (payload) => {
+    const skill = createSkill(skillsHome(), payload);
+    const data = collectSkillsData(skillsHome(), typeof payload?.sessionId === "string" ? payload.sessionId : null);
+    return { skill, totals: data.totals };
+  });
+
+  registerOperation(ctx, "skill-duplicate", async (payload) => {
+    const source = typeof payload?.source === "string" ? payload.source : "";
+    const name = typeof payload?.name === "string" ? payload.name : "";
+    if (source.length === 0) {
+      const error = new Error("не указан исходный навык");
+      error.code = "skills/bad-request";
+      throw error;
+    }
+    const skill = duplicateSkill(skillsHome(), source, name);
+    const data = collectSkillsData(skillsHome(), typeof payload?.sessionId === "string" ? payload.sessionId : null);
+    return { skill, totals: data.totals };
+  });
+
+  registerOperation(ctx, "skill-delete", async (payload) => {
+    const name = typeof payload?.name === "string" ? payload.name : "";
+    if (name.length === 0) {
+      const error = new Error("не указано имя навыка");
+      error.code = "skills/bad-request";
+      throw error;
+    }
+    const result = deleteSkill(skillsHome(), name);
+    const data = collectSkillsData(skillsHome(), typeof payload?.sessionId === "string" ? payload.sessionId : null);
+    return { ...result, totals: data.totals };
+  });
+
   registerOperation(ctx, "open-skill", async (payload) => {
     const name = typeof payload?.name === "string" ? payload.name : "";
     const home = skillsHome();