@nanmicoder/dsh-skills-hub 0.0.1 → 0.0.2

package/lib/client.js

@@ -85,6 +85,30 @@ window.__ModuleLoader__.load({
 			return t;
 		}
 		//#endregion
+		//#region lib/client/relative-time.js
+		/**
+		* How old a snapshot is, in the panel's own vocabulary.
+		*
+		* The panel shows cached catalogue data, so "when was this actually fetched" is
+		* part of the answer rather than a debug detail: a reader who is about to
+		* install third-party code is entitled to know whether the security report in
+		* front of them was read a minute ago or yesterday.
+		*/
+		/** Coarse buckets: the first match wins, and precision beyond them is noise. */
+		function formatAge(t, from, now = Date.now()) {
+			const minutes = Math.floor(Math.max(0, now - from) / 6e4);
+			if (minutes < 1) return t("ageJustNow");
+			if (minutes < 60) return t("ageMinutes", { count: minutes });
+			const hours = Math.floor(minutes / 60);
+			if (hours < 24) return t("ageHours", { count: hours });
+			return t("ageDays", { count: Math.floor(hours / 24) });
+		}
+		/** Absolute timestamp for the hover text, so the bucket never hides the fact. */
+		function formatStamp(from) {
+			const date = new Date(from);
+			return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+		}
+		//#endregion
 		//#region lib/client/icons.js
 		/** Attributes every icon shares; spread first so a caller's props win. */
 		const stroke = {
@@ -347,15 +371,47 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
+		/** Folder: leading glyph of the installed skill's location line. */
+		function FolderIcon({ size = 16, className }) {
+			return (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 16 16",
+				className,
+				strokeWidth: 1.5,
+				...stroke,
+				"aria-hidden": "true",
+				focusable: "false",
+				children: (0, react_jsx_runtime.jsx)("path", { d: "M1.9 4.6a1.3 1.3 0 0 1 1.3-1.3h2.5l1.4 1.6h5.7a1.3 1.3 0 0 1 1.3 1.3v5.6a1.3 1.3 0 0 1-1.3 1.3H3.2a1.3 1.3 0 0 1-1.3-1.3z" })
+			});
+		}
+		/** Arrow leaving a frame: open the same skill in the marketplace. */
+		function ExternalLinkIcon({ size = 16, className }) {
+			return (0, react_jsx_runtime.jsxs)("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 16 16",
+				className,
+				strokeWidth: 1.5,
+				...stroke,
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [
+					(0, react_jsx_runtime.jsx)("path", { d: "M9.4 2.6h4v4" }),
+					(0, react_jsx_runtime.jsx)("path", { d: "M13.4 2.6 7.9 8.1" }),
+					(0, react_jsx_runtime.jsx)("path", { d: "M12.2 9.6v3.1a1.3 1.3 0 0 1-1.3 1.3H3.6a1.3 1.3 0 0 1-1.3-1.3V5.4a1.3 1.3 0 0 1 1.3-1.3h3.1" })
+				]
+			});
+		}
 		//#endregion
 		//#region \0dsh-css:src/client/components/SecurityBadge.module.css.mjs
-		const css$12 = ".DlDA7a_badge{box-sizing:border-box;white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:4px;height:20px;padding:0 7px;font-size:11px;font-weight:600;line-height:18px;display:inline-flex}.DlDA7a_compact{height:18px;padding:0 6px;font-size:10.5px}.DlDA7a_success{color:var(--dsw-alias-state-success-primary,#22c55e);background:color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 12%, transparent)}.DlDA7a_neutral{color:var(--dsw-alias-label-secondary,#61666b);background:var(--dsw-alias-bg-module-platform,#f5f6f7)}.DlDA7a_danger{color:var(--dsw-alias-state-error-primary,#ec1313);background:color-mix(in srgb, var(--dsw-alias-state-error-primary,#ec1313) 12%, transparent)}";
-		const tagId$12 = "@nanmicoder/dsh-skills-hub/SecurityBadge.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$12) + "]") === null) {
+		const css$14 = ".DlDA7a_badge{box-sizing:border-box;white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:4px;height:20px;padding:0 7px;font-size:11px;font-weight:600;line-height:18px;display:inline-flex}.DlDA7a_compact{height:18px;padding:0 6px;font-size:10.5px}.DlDA7a_success{color:var(--dsw-alias-state-success-primary,#22c55e);background:color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 12%, transparent)}.DlDA7a_neutral{color:var(--dsw-alias-label-secondary,#61666b);background:var(--dsw-alias-bg-module-platform,#f5f6f7)}.DlDA7a_danger{color:var(--dsw-alias-state-error-primary,#ec1313);background:color-mix(in srgb, var(--dsw-alias-state-error-primary,#ec1313) 12%, transparent)}";
+		const tagId$14 = "@nanmicoder/dsh-skills-hub/SecurityBadge.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$14) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$12;
-			tag.textContent = css$12;
+			tag.dataset.pluginCss = tagId$14;
+			tag.textContent = css$14;
 			document.head.appendChild(tag);
 		}
 		var SecurityBadge_module_css_default = {
@@ -398,13 +454,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:src/client/components/InstallConfirmDialog.module.css.mjs
-		const css$11 = ".UTdxCa_facts{margin:0}.UTdxCa_row{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);justify-content:space-between;align-items:baseline;gap:16px;min-width:0;padding:8px 0;display:flex}.UTdxCa_row:last-child{border-bottom:none}.UTdxCa_label{color:var(--dsw-alias-label-tertiary,#81858c);flex:none;font-size:12.5px;line-height:19px}.UTdxCa_value{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);text-align:right;overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:600;line-height:19px}.UTdxCa_path{color:var(--dsw-alias-label-secondary,#61666b);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:500}.UTdxCa_risk{border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 10%, transparent);color:var(--dsw-alias-label-secondary,#61666b);align-items:flex-start;gap:8px;margin:12px 0 0;padding:9px 11px;font-size:12px;line-height:19px;display:flex}.UTdxCa_riskIcon{color:var(--dsw-alias-state-warn-primary,#f59e0b);flex:none;margin-top:1px}.UTdxCa_actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;width:100%;display:flex}";
-		const tagId$11 = "@nanmicoder/dsh-skills-hub/InstallConfirmDialog.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$11) + "]") === null) {
+		const css$13 = ".UTdxCa_facts{margin:0}.UTdxCa_row{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);justify-content:space-between;align-items:baseline;gap:16px;min-width:0;padding:8px 0;display:flex}.UTdxCa_row:last-child{border-bottom:none}.UTdxCa_label{color:var(--dsw-alias-label-tertiary,#81858c);flex:none;font-size:12.5px;line-height:19px}.UTdxCa_value{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);text-align:right;overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:600;line-height:19px}.UTdxCa_path{color:var(--dsw-alias-label-secondary,#61666b);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:500}.UTdxCa_risk{border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 10%, transparent);color:var(--dsw-alias-label-secondary,#61666b);align-items:flex-start;gap:8px;margin:12px 0 0;padding:9px 11px;font-size:12px;line-height:19px;display:flex}.UTdxCa_riskIcon{color:var(--dsw-alias-state-warn-primary,#f59e0b);flex:none;margin-top:1px}.UTdxCa_actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;width:100%;display:flex}";
+		const tagId$13 = "@nanmicoder/dsh-skills-hub/InstallConfirmDialog.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$13) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$11;
-			tag.textContent = css$11;
+			tag.dataset.pluginCss = tagId$13;
+			tag.textContent = css$13;
 			document.head.appendChild(tag);
 		}
 		var InstallConfirmDialog_module_css_default = {
@@ -472,72 +528,84 @@ window.__ModuleLoader__.load({
 						children: busy ? t("installing") : t("confirm")
 					})]
 				}),
-				children: [(0, react_jsx_runtime.jsxs)("dl", {
-					className: InstallConfirmDialog_module_css_default.facts,
-					children: [
-						(0, react_jsx_runtime.jsxs)("div", {
-							className: InstallConfirmDialog_module_css_default.row,
-							children: [(0, react_jsx_runtime.jsx)("dt", {
-								className: InstallConfirmDialog_module_css_default.label,
-								children: t("filter.source")
-							}), (0, react_jsx_runtime.jsx)("dd", {
-								className: InstallConfirmDialog_module_css_default.value,
-								children: sourceLabel
-							})]
-						}),
-						skill.version !== void 0 && skill.version !== "" && (0, react_jsx_runtime.jsxs)("div", {
-							className: InstallConfirmDialog_module_css_default.row,
-							children: [(0, react_jsx_runtime.jsx)("dt", {
-								className: InstallConfirmDialog_module_css_default.label,
-								children: t("version")
-							}), (0, react_jsx_runtime.jsxs)("dd", {
-								className: InstallConfirmDialog_module_css_default.value,
-								children: ["v", skill.version]
-							})]
-						}),
-						(0, react_jsx_runtime.jsxs)("div", {
-							className: InstallConfirmDialog_module_css_default.row,
-							children: [(0, react_jsx_runtime.jsx)("dt", {
-								className: InstallConfirmDialog_module_css_default.label,
-								children: t("author")
-							}), (0, react_jsx_runtime.jsx)("dd", {
-								className: InstallConfirmDialog_module_css_default.value,
-								children: skill.authorName
-							})]
-						}),
-						(0, react_jsx_runtime.jsxs)("div", {
-							className: InstallConfirmDialog_module_css_default.row,
-							children: [(0, react_jsx_runtime.jsx)("dt", {
-								className: InstallConfirmDialog_module_css_default.label,
-								children: t("security")
-							}), (0, react_jsx_runtime.jsx)("dd", {
-								className: InstallConfirmDialog_module_css_default.value,
-								children: (0, react_jsx_runtime.jsx)(SecurityBadge, { status: skill.securityStatus })
-							})]
-						}),
-						(0, react_jsx_runtime.jsxs)("div", {
-							className: InstallConfirmDialog_module_css_default.row,
-							children: [(0, react_jsx_runtime.jsx)("dt", {
-								className: InstallConfirmDialog_module_css_default.label,
-								children: t("installLocation")
-							}), (0, react_jsx_runtime.jsxs)("dd", {
-								className: `${InstallConfirmDialog_module_css_default.value} ${InstallConfirmDialog_module_css_default.path}`,
-								children: [
-									"…/skills/",
-									slugOf(skill.id).toLowerCase(),
-									"/"
-								]
-							})]
-						})
-					]
-				}), risky && (0, react_jsx_runtime.jsxs)("p", {
-					className: InstallConfirmDialog_module_css_default.risk,
-					role: "note",
-					children: [(0, react_jsx_runtime.jsx)(AlertIcon, {
-						size: 16,
-						className: InstallConfirmDialog_module_css_default.riskIcon
-					}), (0, react_jsx_runtime.jsx)("span", { children: t("unoaudited") })]
-				})]
+				children: [
+					(0, react_jsx_runtime.jsxs)("dl", {
+						className: InstallConfirmDialog_module_css_default.facts,
+						children: [
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: InstallConfirmDialog_module_css_default.row,
+								children: [(0, react_jsx_runtime.jsx)("dt", {
+									className: InstallConfirmDialog_module_css_default.label,
+									children: t("filter.source")
+								}), (0, react_jsx_runtime.jsx)("dd", {
+									className: InstallConfirmDialog_module_css_default.value,
+									children: sourceLabel
+								})]
+							}),
+							skill.version !== void 0 && skill.version !== "" && (0, react_jsx_runtime.jsxs)("div", {
+								className: InstallConfirmDialog_module_css_default.row,
+								children: [(0, react_jsx_runtime.jsx)("dt", {
+									className: InstallConfirmDialog_module_css_default.label,
+									children: t("version")
+								}), (0, react_jsx_runtime.jsxs)("dd", {
+									className: InstallConfirmDialog_module_css_default.value,
+									children: ["v", skill.version]
+								})]
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: InstallConfirmDialog_module_css_default.row,
+								children: [(0, react_jsx_runtime.jsx)("dt", {
+									className: InstallConfirmDialog_module_css_default.label,
+									children: t("author")
+								}), (0, react_jsx_runtime.jsx)("dd", {
+									className: InstallConfirmDialog_module_css_default.value,
+									children: skill.authorName
+								})]
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: InstallConfirmDialog_module_css_default.row,
+								children: [(0, react_jsx_runtime.jsx)("dt", {
+									className: InstallConfirmDialog_module_css_default.label,
+									children: t("security")
+								}), (0, react_jsx_runtime.jsx)("dd", {
+									className: InstallConfirmDialog_module_css_default.value,
+									children: (0, react_jsx_runtime.jsx)(SecurityBadge, { status: skill.securityStatus })
+								})]
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: InstallConfirmDialog_module_css_default.row,
+								children: [(0, react_jsx_runtime.jsx)("dt", {
+									className: InstallConfirmDialog_module_css_default.label,
+									children: t("installLocation")
+								}), (0, react_jsx_runtime.jsxs)("dd", {
+									className: `${InstallConfirmDialog_module_css_default.value} ${InstallConfirmDialog_module_css_default.path}`,
+									children: [
+										"…/skills/",
+										slugOf(skill.id).toLowerCase(),
+										"/"
+									]
+								})]
+							})
+						]
+					}),
+					skill.snapshotAt !== void 0 && (0, react_jsx_runtime.jsxs)("p", {
+						className: InstallConfirmDialog_module_css_default.risk,
+						role: "note",
+						title: formatStamp(skill.snapshotAt),
+						children: [(0, react_jsx_runtime.jsx)(AlertIcon, {
+							size: 16,
+							className: InstallConfirmDialog_module_css_default.riskIcon
+						}), (0, react_jsx_runtime.jsx)("span", { children: t("installSnapshot", { age: formatAge(t, skill.snapshotAt) }) })]
+					}),
+					risky && (0, react_jsx_runtime.jsxs)("p", {
+						className: InstallConfirmDialog_module_css_default.risk,
+						role: "note",
+						children: [(0, react_jsx_runtime.jsx)(AlertIcon, {
+							size: 16,
+							className: InstallConfirmDialog_module_css_default.riskIcon
+						}), (0, react_jsx_runtime.jsx)("span", { children: t("unoaudited") })]
+					})
+				]
 			});
 		}
 		//#endregion
@@ -653,7 +721,7 @@ window.__ModuleLoader__.load({
 			throw new SkillsHubApiError("BAD_REQUEST", 400, `"${id}" is not a market skill id (expected "<source>:<slug>")`);
 		}
 		/** Search the catalogue (market sources) — the remote list page. */
-		async function fetchMarketList(query, signal) {
+		async function fetchMarketList(query, signal, options = {}) {
 			const search = new URLSearchParams();
 			const q = query.q?.trim();
 			if (q) search.set("q", q);
@@ -662,13 +730,15 @@ window.__ModuleLoader__.load({
 			if (query.installed !== "all") search.set("installed", query.installed);
 			if (query.cursor) search.set("cursor", query.cursor);
 			if (typeof query.limit === "number" && Number.isFinite(query.limit)) search.set("limit", String(query.limit));
+			if (options.refresh === true) search.set("refresh", "1");
 			const suffix = search.toString();
 			return getJson(`/skills${suffix === "" ? "" : `?${suffix}`}`, signal);
 		}
 		/** One skill's full detail plus the health of the source that served it. */
-		async function fetchSkillDetail(id, signal) {
+		async function fetchSkillDetail(id, signal, options = {}) {
 			const { source, slug } = parseMarketId(id);
-			return getJson(`/skills/${source}/${encodeURIComponent(slug)}`, signal);
+			const suffix = options.refresh === true ? "?refresh=1" : "";
+			return getJson(`/skills/${source}/${encodeURIComponent(slug)}${suffix}`, signal);
 		}
 		/** One file of a skill, for the Files tab. */
 		async function fetchSkillFile(id, path, signal) {
@@ -703,130 +773,479 @@ window.__ModuleLoader__.load({
 		function fetchInstalledDetail(key, signal) {
 			return getJson(`/installed/detail?key=${encodeURIComponent(key)}`, signal);
 		}
+		/** One file of an installed skill; the Host validates the key and contains the path. */
+		async function fetchInstalledFile(key, path, signal) {
+			return (await getJson(`/installed/file?key=${encodeURIComponent(key)}&path=${encodeURIComponent(path)}`, signal)).file;
+		}
 		/** Remove a specifically selected local entry after the management UI confirmation. */
 		function removeInstalled(key) {
 			return postJson("/installed/uninstall", { key });
 		}
 		//#endregion
 		//#region lib/client/skill-markdown.js
-		/** Frontmatter is metadata, not part of the skill's rendered instructions. */
-		function stripSkillFrontmatter(markdown) {
-			return markdown.replace(/^\uFEFF?---[ \t]*\r?\n[\s\S]*?\r?\n(?:---|\.\.\.)[ \t]*(?:\r?\n|$)/, "");
+		/**
+		* Frontmatter handling for skill documents.
+		*
+		* A `SKILL.md` opens with a YAML block, and feeding that block to a markdown
+		* renderer is not merely ugly — it is wrong: a lone `---` is a setext underline,
+		* so the closing fence promotes the whole metadata block into one giant heading.
+		* The block is split off here instead, so the UI can render it as structured
+		* metadata (`FrontmatterPanel`) while the rest of the document goes to the
+		* renderer. The approach mirrors the desktop project's `skillFrontmatter.ts`.
+		*
+		* The parser is a deliberately small YAML subset — scalars, inline and block
+		* sequences, `|`/`>` block scalars, and one level of nested mapping that is kept
+		* as the raw YAML it is — because skill frontmatter is flat by convention and a
+		* full YAML engine is a dependency this browser bundle does not need. It never
+		* throws: a document without a fence, or with an unterminated one, comes back as
+		* body only.
+		*/
+		/** A fence closing the block; it must sit at column zero. */
+		const CLOSING_FENCE = /^(?:---|\.\.\.)[ \t]*$/;
+		/** Top-level `key:` or `key: value`. Indented lines belong to the value above. */
+		const KEY_LINE = /^([A-Za-z0-9_$][\w.$-]*)[ \t]*:(?:[ \t]+(.*))?$/;
+		/** `|`, `>`, optionally with chomping and indentation indicators. */
+		const BLOCK_SCALAR = /^([|>])([-+]?)(\d*)$/;
+		function isBlank(line) {
+			return line.trim() === "";
+		}
+		/** Visual indentation width; a tab counts as two columns, as YAML's own rules do. */
+		function indentWidth(line) {
+			let width = 0;
+			for (const char of line) if (char === " ") width += 1;
+			else if (char === "	") width += 2;
+			else break;
+			return width;
+		}
+		/** One pair of surrounding quotes, with the escapes YAML defines for it. */
+		function stripQuotes(raw) {
+			if (raw.length >= 2) {
+				const first = raw[0];
+				const last = raw[raw.length - 1];
+				if (first === "\"" && last === "\"") return {
+					value: raw.slice(1, -1).replace(/\\"/g, "\"").replace(/\\\\/g, "\\"),
+					quoted: true
+				};
+				if (first === "'" && last === "'") return {
+					value: raw.slice(1, -1).replace(/''/g, "'"),
+					quoted: true
+				};
+			}
+			return {
+				value: raw,
+				quoted: false
+			};
+		}
+		/** Drop a trailing ` # comment`, but only when it sits outside quotes. */
+		function stripComment(raw) {
+			let quote = null;
+			for (let index = 0; index < raw.length; index++) {
+				const char = raw[index];
+				if (quote !== null) {
+					if (char === quote) quote = null;
+					continue;
+				}
+				if (char === "\"" || char === "'") {
+					quote = char;
+					continue;
+				}
+				if (char === "#" && (index === 0 || raw[index - 1] === " " || raw[index - 1] === "	")) return raw.slice(0, index);
+			}
+			return raw;
+		}
+		/** Scalars keep their YAML meaning where it is unambiguous, and stay text otherwise. */
+		function coerceScalar(raw) {
+			const trimmed = raw.trim();
+			if (trimmed === "") return "";
+			const { value, quoted } = stripQuotes(trimmed);
+			if (quoted) return value;
+			const lower = value.toLowerCase();
+			if (lower === "true") return true;
+			if (lower === "false") return false;
+			if (lower === "null" || lower === "~") return null;
+			if (/^-?(?:0|[1-9]\d*)(?:\.\d+)?$/.test(value)) return Number(value);
+			return value;
+		}
+		/** Split `[a, "b, c", d]` on top-level commas only. */
+		function splitInlineSequence(inner) {
+			const parts = [];
+			let current = "";
+			let quote = null;
+			let depth = 0;
+			for (const char of inner) {
+				if (quote !== null) {
+					current += char;
+					if (char === quote) quote = null;
+					continue;
+				}
+				if (char === "\"" || char === "'") {
+					quote = char;
+					current += char;
+					continue;
+				}
+				if (char === "[" || char === "{") depth += 1;
+				if (char === "]" || char === "}") depth -= 1;
+				if (char === "," && depth === 0) {
+					parts.push(current);
+					current = "";
+					continue;
+				}
+				current += char;
+			}
+			parts.push(current);
+			return parts.map((part) => part.trim()).filter((part) => part !== "");
 		}
-		//#endregion
-		//#region node_modules/comma-separated-tokens/index.js
 		/**
-		* Serialize an array of strings or numbers to comma-separated tokens.
+		* Remove a block's common indentation and its blank edges.
 		*
-		* @param {Array<string|number>} values
-		*   List of tokens.
-		* @param {Options} [options]
-		*   Configuration for `stringify` (optional).
-		* @returns {string}
-		*   Comma-separated tokens.
+		* @param lines - the block's lines, verbatim.
+		* @param folded - `>` joins the lines into one paragraph; `|` keeps them.
 		*/
-		function stringify$1(values, options) {
-			const settings = options || {};
-			return (values[values.length - 1] === "" ? [...values, ""] : values).join((settings.padRight ? " " : "") + "," + (settings.padLeft === false ? "" : " ")).trim();
+		function dedent(lines, folded) {
+			const margin = lines.reduce((min, line) => isBlank(line) ? min : Math.min(min, indentWidth(line)), Number.MAX_SAFE_INTEGER);
+			const dedented = lines.map((line) => isBlank(line) ? "" : line.slice(margin === Number.MAX_SAFE_INTEGER ? 0 : margin));
+			while (dedented.length > 0 && isBlank(dedented[0] ?? "")) dedented.shift();
+			while (dedented.length > 0 && isBlank(dedented[dedented.length - 1] ?? "")) dedented.pop();
+			return folded ? dedented.join(" ").replace(/\s+/g, " ").trim() : dedented.join("\n");
+		}
+		/** Parse the top-level keys of one YAML block. Shapes this subset does not model stay verbatim. */
+		function parseBlock(yaml) {
+			const lines = yaml.split("\n");
+			const result = {};
+			let index = 0;
+			while (index < lines.length) {
+				const line = lines[index] ?? "";
+				index += 1;
+				if (isBlank(line) || line.trimStart().startsWith("#") || indentWidth(line) > 0) continue;
+				const match = KEY_LINE.exec(line);
+				if (match === null) continue;
+				const key = match[1] ?? "";
+				const inline = match[2] ?? "";
+				const blockScalar = BLOCK_SCALAR.exec(inline.trim());
+				if (blockScalar !== null) {
+					const collected = [];
+					while (index < lines.length) {
+						const next = lines[index] ?? "";
+						if (!isBlank(next) && indentWidth(next) === 0) break;
+						collected.push(next);
+						index += 1;
+					}
+					result[key] = dedent(collected, blockScalar[1] === ">");
+					continue;
+				}
+				const value = stripComment(inline).trim();
+				if (value !== "") {
+					result[key] = value.startsWith("[") && value.endsWith("]") ? splitInlineSequence(value.slice(1, -1)).map(coerceScalar) : coerceScalar(value);
+					continue;
+				}
+				const children = [];
+				while (index < lines.length) {
+					const next = lines[index] ?? "";
+					if (!isBlank(next) && indentWidth(next) === 0) break;
+					children.push(next);
+					index += 1;
+				}
+				const meaningful = children.filter((entry) => !isBlank(entry) && !entry.trimStart().startsWith("#"));
+				if (meaningful.length === 0) {
+					result[key] = null;
+					continue;
+				}
+				if (meaningful.every((entry) => entry.trimStart().startsWith("- "))) {
+					result[key] = meaningful.map((entry) => coerceScalar(stripComment(entry.trimStart().slice(2))));
+					continue;
+				}
+				result[key] = dedent(children, false);
+			}
+			return result;
 		}
-		//#endregion
-		//#region node_modules/estree-util-is-identifier-name/lib/index.js
-		const nameRe = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-		const nameReJsx = /^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-		/** @type {Options} */
-		const emptyOptions$3 = {};
 		/**
-		* Checks if the given value is a valid identifier name.
+		* Parse a metadata block that has already been extracted — the Host bounds its
+		* size before it reaches the browser, so this entry point works on that text.
 		*
-		* @param {string} name
-		*   Identifier to check.
-		* @param {Options | null | undefined} [options]
-		*   Configuration (optional).
-		* @returns {boolean}
-		*   Whether `name` can be an identifier.
+		* @param yaml - the block's text, without its fences.
+		* @returns the parsed keys, or `null` when the block carries nothing to show.
 		*/
-		function name$1(name, options) {
-			return ((options || emptyOptions$3).jsx ? nameReJsx : nameRe).test(name);
+		function parseSkillFrontmatter(yaml) {
+			if (yaml.trim() === "") return null;
+			try {
+				const parsed = parseBlock(yaml.replace(/\r\n/g, "\n"));
+				return Object.keys(parsed).length === 0 ? null : parsed;
+			} catch {
+				return null;
+			}
 		}
-		//#endregion
-		//#region node_modules/hast-util-whitespace/lib/index.js
 		/**
-		* @typedef {import('hast').Nodes} Nodes
-		*/
-		const re = /[ \t\n\f\r]/g;
-		/**
-		* Check if the given value is *inter-element whitespace*.
+		* Separate a document's frontmatter from its body.
 		*
-		* @param {Nodes | string} thing
-		*   Thing to check (`Node` or `string`).
-		* @returns {boolean}
-		*   Whether the `value` is inter-element whitespace (`boolean`): consisting of
-		*   zero or more of space, tab (`\t`), line feed (`\n`), carriage return
-		*   (`\r`), or form feed (`\f`); if a node is passed it must be a `Text` node,
-		*   whose `value` field is checked.
+		* @param markdown - the whole document.
+		* @returns the parsed metadata (or `null`) plus the body to render.
 		*/
-		function whitespace(thing) {
-			return typeof thing === "object" ? thing.type === "text" ? empty$1(thing.value) : false : empty$1(thing);
+		function splitSkillFrontmatter(markdown) {
+			const lines = (markdown.startsWith("") ? markdown.slice(1) : markdown).replace(/\r\n/g, "\n").split("\n");
+			if (!/^---[ \t]*$/.test(lines[0] ?? "")) return {
+				frontmatter: null,
+				body: markdown
+			};
+			for (let index = 1; index < lines.length; index++) {
+				if (!CLOSING_FENCE.test(lines[index] ?? "")) continue;
+				const body = lines.slice(index + 1).join("\n").replace(/^\n+/, "");
+				return {
+					frontmatter: parseSkillFrontmatter(lines.slice(1, index).join("\n")),
+					body
+				};
+			}
+			return {
+				frontmatter: null,
+				body: markdown
+			};
 		}
-		/**
-		* @param {string} value
-		* @returns {boolean}
-		*/
-		function empty$1(value) {
-			return value.replace(re, "") === "";
+		/** Frontmatter is metadata, not part of the skill's rendered instructions. */
+		function stripSkillFrontmatter(markdown) {
+			return splitSkillFrontmatter(markdown).body;
 		}
 		//#endregion
-		//#region node_modules/property-information/lib/util/schema.js
-		/**
-		* @import {Schema as SchemaType, Space} from 'property-information'
-		*/
-		/** @type {SchemaType} */
-		var Schema = class {
-			/**
-			* @param {SchemaType['property']} property
-			*   Property.
-			* @param {SchemaType['normal']} normal
-			*   Normal.
-			* @param {Space | undefined} [space]
-			*   Space.
-			* @returns
-			*   Schema.
-			*/
-			constructor(property, normal, space) {
-				this.normal = normal;
-				this.property = property;
-				if (space) this.space = space;
-			}
+		//#region \0dsh-css:src/client/components/FrontmatterPanel.module.css.mjs
+		const css$12 = ".hR0bda_panel{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-layer-1,#fff);flex-direction:column;min-width:0;display:flex;overflow:hidden}.hR0bda_head{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);background:var(--dsw-alias-bg-module-platform,#f5f6f7);align-items:center;gap:8px;padding:8px 12px;display:flex}.hR0bda_title{min-width:0;color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.08em;text-transform:uppercase;flex:1;margin:0;font-size:10.5px;font-weight:600}.hR0bda_count{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums;font-size:11px}.hR0bda_list{max-height:320px;margin:0;padding:0;overflow-y:auto}.hR0bda_row{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);flex-direction:column;gap:3px;min-width:0;padding:8px 12px;display:flex}.hR0bda_row:last-child{border-bottom:none}.hR0bda_key{overflow-wrap:anywhere;min-width:0;color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.02em;font-size:10.5px;font-weight:600}.hR0bda_value{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);margin:0;font-size:12.5px;line-height:19px}.hR0bda_text{overflow-wrap:anywhere}.hR0bda_chips{flex-wrap:wrap;gap:4px;display:flex}.hR0bda_chip{background:var(--dsw-alias-bg-module-platform,#f5f6f7);max-width:100%;color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;border-radius:999px;padding:1px 7px;font-size:11px;line-height:17px;display:inline-flex}.hR0bda_chipOn{background:color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 12%, transparent);color:var(--dsw-alias-state-success-primary,#22c55e)}.hR0bda_block{border-radius:var(--dsw-radius-xs,4px);background:var(--dsw-alias-bg-module-platform,#f5f6f7);max-height:200px;color:var(--dsw-alias-label-secondary,#61666b);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:18px;overflow:auto}";
+		const tagId$12 = "@nanmicoder/dsh-skills-hub/FrontmatterPanel.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$12) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
+			tag.dataset.pluginCss = tagId$12;
+			tag.textContent = css$12;
+			document.head.appendChild(tag);
+		}
+		var FrontmatterPanel_module_css_default = {
+			"block": "hR0bda_block",
+			"chip": "hR0bda_chip",
+			"chipOn": "hR0bda_chipOn",
+			"chips": "hR0bda_chips",
+			"count": "hR0bda_count",
+			"head": "hR0bda_head",
+			"key": "hR0bda_key",
+			"list": "hR0bda_list",
+			"panel": "hR0bda_panel",
+			"row": "hR0bda_row",
+			"text": "hR0bda_text",
+			"title": "hR0bda_title",
+			"value": "hR0bda_value"
 		};
-		Schema.prototype.normal = {};
-		Schema.prototype.property = {};
-		Schema.prototype.space = void 0;
 		//#endregion
-		//#region node_modules/property-information/lib/util/merge.js
-		/**
-		* @import {Info, Space} from 'property-information'
-		*/
-		/**
-		* @param {ReadonlyArray<Schema>} definitions
-		*   Definitions.
-		* @param {Space | undefined} [space]
-		*   Space.
-		* @returns {Schema}
-		*   Schema.
-		*/
-		function merge(definitions, space) {
-			/** @type {Record<string, Info>} */
-			const property = {};
-			/** @type {Record<string, string>} */
-			const normal = {};
-			for (const definition of definitions) {
-				Object.assign(property, definition.property);
-				Object.assign(normal, definition.normal);
-			}
-			return new Schema(property, normal, space);
+		//#region lib/client/components/FrontmatterPanel.js
+		/** Longest JSON we are willing to render inline, in characters. */
+		const MAX_JSON_LENGTH = 600;
+		/** Narrow an `unknown` frontmatter value to a plain object (arrays excluded). */
+		function isRecord(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value);
 		}
-		//#endregion
-		//#region node_modules/property-information/lib/normalize.js
+		/** Scalar rendering for anything that is not an array, object or block string. */
+		function scalarText(value) {
+			if (value === null || value === void 0) return "—";
+			if (typeof value === "string") return value;
+			if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
+			if (typeof value === "symbol") return value.description ?? "symbol";
+			if (typeof value === "function") return "fn";
+			return "—";
+		}
+		/** Objects go out as JSON; a pathological value must not fill the whole rail. */
+		function jsonText(value) {
+			try {
+				const text = JSON.stringify(value, null, 2);
+				if (text === void 0) return "—";
+				return text.length > MAX_JSON_LENGTH ? `${text.slice(0, MAX_JSON_LENGTH)}…` : text;
+			} catch {
+				return "—";
+			}
+		}
+		/** One value cell; the shape decides between a chip row, a code block and text. */
+		function ValueView({ value }) {
+			if (Array.isArray(value)) {
+				if (value.length === 0) return (0, react_jsx_runtime.jsx)("span", {
+					className: FrontmatterPanel_module_css_default.text,
+					children: "—"
+				});
+				return (0, react_jsx_runtime.jsx)("span", {
+					className: FrontmatterPanel_module_css_default.chips,
+					children: value.map((item, index) => (0, react_jsx_runtime.jsx)("span", {
+						className: FrontmatterPanel_module_css_default.chip,
+						children: scalarText(item)
+					}, `${String(index)}`))
+				});
+			}
+			if (typeof value === "boolean") return (0, react_jsx_runtime.jsx)("span", {
+				className: `${FrontmatterPanel_module_css_default.chip} ${value ? FrontmatterPanel_module_css_default.chipOn : ""}`,
+				children: value ? "true" : "false"
+			});
+			if (typeof value === "string" && value.includes("\n")) return (0, react_jsx_runtime.jsx)("pre", {
+				className: FrontmatterPanel_module_css_default.block,
+				children: value
+			});
+			if (isRecord(value)) return (0, react_jsx_runtime.jsx)("pre", {
+				className: FrontmatterPanel_module_css_default.block,
+				children: jsonText(value)
+			});
+			return (0, react_jsx_runtime.jsx)("span", {
+				className: FrontmatterPanel_module_css_default.text,
+				children: scalarText(value)
+			});
+		}
+		/**
+		* Structured view of a SKILL.md frontmatter block.
+		*
+		* SKILL.md metadata is data, not prose: pushing it through the markdown
+		* renderer turns a dozen short fields into a wall of setext headings. It is
+		* also reference material rather than the document itself, so it renders as a
+		* label/value list under its own heading, with the list itself scrolling once a
+		* skill declares more than a screenful of keys.
+		*
+		* `data` is typed `unknown`-valued on purpose — it is upstream YAML, and every
+		* cell is derived defensively rather than trusted.
+		*/
+		function FrontmatterPanel(props) {
+			const { data } = props;
+			const t = useT();
+			const entries = Object.entries(data);
+			if (entries.length === 0) return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+			return (0, react_jsx_runtime.jsxs)("section", {
+				className: FrontmatterPanel_module_css_default.panel,
+				children: [(0, react_jsx_runtime.jsxs)("div", {
+					className: FrontmatterPanel_module_css_default.head,
+					children: [(0, react_jsx_runtime.jsx)("h3", {
+						className: FrontmatterPanel_module_css_default.title,
+						children: t("frontmatter")
+					}), (0, react_jsx_runtime.jsx)("span", {
+						className: FrontmatterPanel_module_css_default.count,
+						children: entries.length
+					})]
+				}), (0, react_jsx_runtime.jsx)("dl", {
+					className: FrontmatterPanel_module_css_default.list,
+					children: entries.map(([key, value]) => (0, react_jsx_runtime.jsxs)("div", {
+						className: FrontmatterPanel_module_css_default.row,
+						children: [(0, react_jsx_runtime.jsx)("dt", {
+							className: FrontmatterPanel_module_css_default.key,
+							title: key,
+							children: key
+						}), (0, react_jsx_runtime.jsx)("dd", {
+							className: FrontmatterPanel_module_css_default.value,
+							children: (0, react_jsx_runtime.jsx)(ValueView, { value })
+						})]
+					}, key))
+				})]
+			});
+		}
+		//#endregion
+		//#region node_modules/comma-separated-tokens/index.js
+		/**
+		* Serialize an array of strings or numbers to comma-separated tokens.
+		*
+		* @param {Array<string|number>} values
+		*   List of tokens.
+		* @param {Options} [options]
+		*   Configuration for `stringify` (optional).
+		* @returns {string}
+		*   Comma-separated tokens.
+		*/
+		function stringify$1(values, options) {
+			const settings = options || {};
+			return (values[values.length - 1] === "" ? [...values, ""] : values).join((settings.padRight ? " " : "") + "," + (settings.padLeft === false ? "" : " ")).trim();
+		}
+		//#endregion
+		//#region node_modules/estree-util-is-identifier-name/lib/index.js
+		const nameRe = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+		const nameReJsx = /^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+		/** @type {Options} */
+		const emptyOptions$3 = {};
+		/**
+		* Checks if the given value is a valid identifier name.
+		*
+		* @param {string} name
+		*   Identifier to check.
+		* @param {Options | null | undefined} [options]
+		*   Configuration (optional).
+		* @returns {boolean}
+		*   Whether `name` can be an identifier.
+		*/
+		function name$1(name, options) {
+			return ((options || emptyOptions$3).jsx ? nameReJsx : nameRe).test(name);
+		}
+		//#endregion
+		//#region node_modules/hast-util-whitespace/lib/index.js
+		/**
+		* @typedef {import('hast').Nodes} Nodes
+		*/
+		const re = /[ \t\n\f\r]/g;
+		/**
+		* Check if the given value is *inter-element whitespace*.
+		*
+		* @param {Nodes | string} thing
+		*   Thing to check (`Node` or `string`).
+		* @returns {boolean}
+		*   Whether the `value` is inter-element whitespace (`boolean`): consisting of
+		*   zero or more of space, tab (`\t`), line feed (`\n`), carriage return
+		*   (`\r`), or form feed (`\f`); if a node is passed it must be a `Text` node,
+		*   whose `value` field is checked.
+		*/
+		function whitespace(thing) {
+			return typeof thing === "object" ? thing.type === "text" ? empty$1(thing.value) : false : empty$1(thing);
+		}
+		/**
+		* @param {string} value
+		* @returns {boolean}
+		*/
+		function empty$1(value) {
+			return value.replace(re, "") === "";
+		}
+		//#endregion
+		//#region node_modules/property-information/lib/util/schema.js
+		/**
+		* @import {Schema as SchemaType, Space} from 'property-information'
+		*/
+		/** @type {SchemaType} */
+		var Schema = class {
+			/**
+			* @param {SchemaType['property']} property
+			*   Property.
+			* @param {SchemaType['normal']} normal
+			*   Normal.
+			* @param {Space | undefined} [space]
+			*   Space.
+			* @returns
+			*   Schema.
+			*/
+			constructor(property, normal, space) {
+				this.normal = normal;
+				this.property = property;
+				if (space) this.space = space;
+			}
+		};
+		Schema.prototype.normal = {};
+		Schema.prototype.property = {};
+		Schema.prototype.space = void 0;
+		//#endregion
+		//#region node_modules/property-information/lib/util/merge.js
+		/**
+		* @import {Info, Space} from 'property-information'
+		*/
+		/**
+		* @param {ReadonlyArray<Schema>} definitions
+		*   Definitions.
+		* @param {Space | undefined} [space]
+		*   Space.
+		* @returns {Schema}
+		*   Schema.
+		*/
+		function merge(definitions, space) {
+			/** @type {Record<string, Info>} */
+			const property = {};
+			/** @type {Record<string, string>} */
+			const normal = {};
+			for (const definition of definitions) {
+				Object.assign(property, definition.property);
+				Object.assign(normal, definition.normal);
+			}
+			return new Schema(property, normal, space);
+		}
+		//#endregion
+		//#region node_modules/property-information/lib/normalize.js
 		/**
 		* Get the cleaned case insensitive form of an attribute or property.
 		*
@@ -22485,72 +22904,71 @@ function(property) {
 			toMarkdownExtensions.push(gfmToMarkdown(settings));
 		}
 		//#endregion
-		//#region \0dsh-css:src/client/components/SkillDetailView.module.css.mjs
-		const css$10 = ".xO9T5G_detail{box-sizing:border-box;min-width:0;color:var(--dsw-alias-label-primary,#0f1115);flex-direction:column;gap:12px;padding:16px 20px 28px;display:flex}.xO9T5G_back{display:flex}.xO9T5G_header{align-items:flex-start;gap:18px;min-width:0;display:flex}.xO9T5G_headerText{flex:1;min-width:0}.xO9T5G_eyebrow{align-items:center;gap:7px;margin:0;font-size:11px;line-height:16px;display:flex}.xO9T5G_source{color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.1em;text-transform:uppercase;font-weight:700}.xO9T5G_version{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums}.xO9T5G_name{letter-spacing:-.014em;overflow-wrap:anywhere;margin:4px 0 0;font-size:26px;font-weight:700;line-height:34px}.xO9T5G_name:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:3px;border-radius:var(--dsw-radius-xs,4px)}.xO9T5G_badges{flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;display:flex}.xO9T5G_summary{max-width:68ch;color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;margin:10px 0 0;font-size:14px;line-height:22px}.xO9T5G_warning{border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-error-primary,#ec1313) 10%, transparent);color:var(--dsw-alias-label-primary,#0f1115);align-items:center;gap:8px;margin:0;padding:8px 12px;font-size:12.5px;line-height:19px;display:flex}.xO9T5G_warningIcon{color:var(--dsw-alias-state-error-primary,#ec1313);flex:none}.xO9T5G_reports{border-top:1px solid var(--dsw-alias-border-l1,#0000000a);border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 2px;font-size:12.5px;line-height:19px;display:flex}.xO9T5G_reportsLabel{color:var(--dsw-alias-label-tertiary,#81858c)}.xO9T5G_report{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:inline-flex}.xO9T5G_reportVendor{color:var(--dsw-alias-label-primary,#0f1115);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600}.xO9T5G_reportStatus{color:var(--dsw-alias-label-secondary,#61666b)}.xO9T5G_reportLink{background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 12%, transparent);color:var(--dsw-alias-state-business-primary,#4176e6);border-radius:999px;align-items:center;padding:2px 9px;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.xO9T5G_reportLink:hover{background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 20%, transparent)}.xO9T5G_reportLink:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px}.xO9T5G_columns{flex-wrap:wrap;align-items:flex-start;gap:20px;min-width:0;display:flex}.xO9T5G_main{flex-direction:column;flex:340px;gap:14px;min-width:0;display:flex}.xO9T5G_panel{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);min-width:0;padding:16px 18px}.xO9T5G_markdown{overflow-wrap:anywhere;max-width:74ch;font-size:13.5px;line-height:1.7}.xO9T5G_frontmatter{margin-top:18px}.xO9T5G_muted{color:var(--dsw-alias-label-tertiary,#81858c);align-items:center;gap:6px;margin:0;padding:6px 0;font-size:12.5px;line-height:19px;display:flex}.xO9T5G_files{flex-wrap:wrap;align-items:flex-start;gap:14px;min-width:0;display:flex}.xO9T5G_fileList{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);flex:220px;min-width:0;max-height:420px;margin:0;padding:4px;list-style:none;overflow-y:auto}.xO9T5G_fileItem{box-sizing:border-box;border-radius:var(--dsw-radius-xs,4px);width:100%;color:var(--dsw-alias-label-secondary,#61666b);font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:7px;margin:0;padding:6px 8px;font-size:12px;line-height:18px;display:flex}.xO9T5G_fileItem:hover{background:var(--dsw-alias-interactive-bg-hover,#2631480f)}.xO9T5G_fileItem:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:-1px}.xO9T5G_fileItemActive{background:var(--dsw-alias-button-ghost-active-fill,#ebeef2);color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}.xO9T5G_fileIcon{color:var(--dsw-alias-label-tertiary,#81858c);flex:none}.xO9T5G_filePath{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.xO9T5G_fileFlag{background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 14%, transparent);color:var(--dsw-alias-state-warn-primary,#f59e0b);border-radius:999px;flex:none;padding:0 6px;font-size:10.5px;font-weight:600;line-height:17px}.xO9T5G_fileMeta{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font-size:11px}.xO9T5G_fileView{flex:2 320px;min-width:0}.xO9T5G_fileBar{align-items:center;gap:8px;min-width:0;margin-bottom:8px;display:flex}.xO9T5G_fileBarPath{min-width:0;color:var(--dsw-alias-label-secondary,#61666b);text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;overflow:hidden}.xO9T5G_copy{flex:none}.xO9T5G_rail{flex:260px;min-width:0}.xO9T5G_railCard{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);flex-direction:column;min-width:0;display:flex;overflow:hidden}.xO9T5G_railAction{flex-direction:column;gap:8px;padding:14px 14px 10px;display:flex}.xO9T5G_railAction>button{width:100%}.xO9T5G_facts{margin:0;padding:0 14px 6px}.xO9T5G_fact{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);justify-content:space-between;align-items:baseline;gap:14px;min-width:0;padding:9px 0;display:flex}.xO9T5G_fact:last-child{border-bottom:none}.xO9T5G_factLabel{color:var(--dsw-alias-label-tertiary,#81858c);flex:none;font-size:12.5px;line-height:19px}.xO9T5G_factValue{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);text-align:right;overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:600;line-height:19px}.xO9T5G_srOnly{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.xO9T5G_markdown>:first-child{margin-top:0}.xO9T5G_markdown>:last-child{margin-bottom:0}.xO9T5G_markdown h1,.xO9T5G_markdown h2,.xO9T5G_markdown h3{margin:1.4em 0 .6em;line-height:1.35}.xO9T5G_markdown h1{font-size:1.7em}.xO9T5G_markdown h2{font-size:1.4em}.xO9T5G_markdown h3{font-size:1.15em}.xO9T5G_markdown p,.xO9T5G_markdown ul,.xO9T5G_markdown ol{margin:.75em 0}.xO9T5G_markdown ul,.xO9T5G_markdown ol{padding-left:1.7em}.xO9T5G_markdown a{color:var(--dsw-alias-state-business-primary,#4176e6);text-decoration:underline}.xO9T5G_markdown pre{background:var(--dsw-alias-bg-layer-2,#f2f3f5);border-radius:8px;padding:14px;overflow-x:auto}.xO9T5G_markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.xO9T5G_markdown :not(pre)>code{background:var(--dsw-alias-bg-layer-2,#f2f3f5);border-radius:4px;padding:2px 5px}.xO9T5G_markdown blockquote{border-left:3px solid var(--dsw-alias-border-l2,#0000001a);color:var(--dsw-alias-label-secondary,#61666b);margin:1em 0;padding-left:14px}.xO9T5G_markdown table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}.xO9T5G_markdown th,.xO9T5G_markdown td{border:1px solid var(--dsw-alias-border-l2,#0000001a);text-align:left;padding:7px 10px}.xO9T5G_markdown img{max-width:100%;height:auto}.xO9T5G_markdown hr{border:0;border-top:1px solid var(--dsw-alias-border-l2,#0000001a);margin:20px 0}.xO9T5G_skeletonAvatar,.xO9T5G_skeletonTitle,.xO9T5G_skeletonLine{background:var(--dsw-alias-border-l2,#0000001a);border-radius:5px;animation:1.6s ease-in-out infinite alternate xO9T5G_skeletonPulse;display:block}.xO9T5G_skeletonAvatar{border-radius:18px;flex:none;width:84px;height:84px}.xO9T5G_skeletonTitle{width:55%;height:28px;margin:8px 0 20px}.xO9T5G_skeletonLine{width:100%;height:13px;margin:16px 0}.xO9T5G_skeletonLine:nth-child(3n){width:72%}@keyframes xO9T5G_skeletonPulse{to{opacity:.4}}@media (prefers-reduced-motion:reduce){.xO9T5G_skeletonAvatar,.xO9T5G_skeletonTitle,.xO9T5G_skeletonLine{animation:none}}";
-		const tagId$10 = "@nanmicoder/dsh-skills-hub/SkillDetailView.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$10) + "]") === null) {
+		//#region \0dsh-css:src/client/components/SkillDetailShell.module.css.mjs
+		const css$11 = "._58q8UW_detail{box-sizing:border-box;min-width:0;color:var(--dsw-alias-label-primary,#0f1115);flex-direction:column;gap:12px;padding:16px 20px 28px;display:flex}._58q8UW_back{display:flex}._58q8UW_header{align-items:flex-start;gap:18px;min-width:0;display:flex}._58q8UW_headerText{flex:1;min-width:0}._58q8UW_eyebrow{align-items:center;gap:7px;margin:0;font-size:11px;line-height:16px;display:flex}._58q8UW_source{color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.1em;text-transform:uppercase;font-weight:700}._58q8UW_version{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums}._58q8UW_name{letter-spacing:-.014em;overflow-wrap:anywhere;margin:4px 0 0;font-size:26px;font-weight:700;line-height:34px}._58q8UW_name:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:3px;border-radius:var(--dsw-radius-xs,4px)}._58q8UW_badges{flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;display:flex}._58q8UW_summary{max-width:68ch;color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;margin:10px 0 0;font-size:14px;line-height:22px}._58q8UW_columns{flex-wrap:wrap;align-items:flex-start;gap:20px;min-width:0;display:flex}._58q8UW_main{flex-direction:column;flex:340px;gap:14px;min-width:0;display:flex}._58q8UW_panel{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);min-width:0;padding:16px 18px}._58q8UW_markdown{overflow-wrap:anywhere;max-width:74ch;font-size:13.5px;line-height:1.7}._58q8UW_frontmatter{margin-top:18px}._58q8UW_muted{color:var(--dsw-alias-label-tertiary,#81858c);align-items:center;gap:6px;margin:0;padding:6px 0;font-size:12.5px;line-height:19px;display:flex}._58q8UW_files{flex-wrap:wrap;align-items:flex-start;gap:14px;min-width:0;display:flex}._58q8UW_fileList{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);flex:220px;min-width:0;max-height:420px;margin:0;padding:4px;list-style:none;overflow-y:auto}._58q8UW_fileItem{box-sizing:border-box;border-radius:var(--dsw-radius-xs,4px);width:100%;color:var(--dsw-alias-label-secondary,#61666b);font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:7px;margin:0;padding:6px 8px;font-size:12px;line-height:18px;display:flex}._58q8UW_fileItem:hover{background:var(--dsw-alias-interactive-bg-hover,#2631480f)}._58q8UW_fileItem:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:-1px}._58q8UW_fileItemActive{background:var(--dsw-alias-button-ghost-active-fill,#ebeef2);color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}._58q8UW_fileIcon{color:var(--dsw-alias-label-tertiary,#81858c);flex:none}._58q8UW_filePath{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}._58q8UW_fileFlag{background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 14%, transparent);color:var(--dsw-alias-state-warn-primary,#f59e0b);border-radius:999px;flex:none;padding:0 6px;font-size:10.5px;font-weight:600;line-height:17px}._58q8UW_fileMeta{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font-size:11px}._58q8UW_fileView{flex:2 320px;min-width:0}._58q8UW_fileBar{align-items:center;gap:8px;min-width:0;margin-bottom:8px;display:flex}._58q8UW_fileBarPath{min-width:0;color:var(--dsw-alias-label-secondary,#61666b);text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;overflow:hidden}._58q8UW_copy{flex:none}._58q8UW_viewToggle{border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-2,#f0f2f5);border-radius:999px;flex:none;gap:2px;padding:2px;display:inline-flex}._58q8UW_viewToggle button{color:var(--dsw-alias-label-secondary,#61666b);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:2px 10px;font-size:11.5px;line-height:18px}._58q8UW_viewToggle button[aria-pressed=true]{background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}._58q8UW_viewToggle button:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:1px}._58q8UW_rail{flex:260px;min-width:0}._58q8UW_railCard{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);flex-direction:column;min-width:0;display:flex;overflow:hidden}._58q8UW_railAction{flex-direction:column;gap:8px;padding:14px 14px 10px;display:flex}._58q8UW_railAction>button{width:100%}._58q8UW_facts{margin:0;padding:0 14px 6px}._58q8UW_fact{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);justify-content:space-between;align-items:baseline;gap:14px;min-width:0;padding:9px 0;display:flex}._58q8UW_fact:last-child{border-bottom:none}._58q8UW_factLabel{color:var(--dsw-alias-label-tertiary,#81858c);flex:none;font-size:12.5px;line-height:19px}._58q8UW_factValue{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);text-align:right;overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:600;line-height:19px}._58q8UW_srOnly{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._58q8UW_markdown>:first-child{margin-top:0}._58q8UW_markdown>:last-child{margin-bottom:0}._58q8UW_markdown h1,._58q8UW_markdown h2,._58q8UW_markdown h3{margin:1.4em 0 .6em;line-height:1.35}._58q8UW_markdown h1{font-size:1.7em}._58q8UW_markdown h2{font-size:1.4em}._58q8UW_markdown h3{font-size:1.15em}._58q8UW_markdown p,._58q8UW_markdown ul,._58q8UW_markdown ol{margin:.75em 0}._58q8UW_markdown ul,._58q8UW_markdown ol{padding-left:1.7em}._58q8UW_markdown a{color:var(--dsw-alias-state-business-primary,#4176e6);text-decoration:underline}._58q8UW_markdown pre{background:var(--dsw-alias-bg-layer-2,#f2f3f5);border-radius:8px;padding:14px;overflow-x:auto}._58q8UW_markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}._58q8UW_markdown :not(pre)>code{background:var(--dsw-alias-bg-layer-2,#f2f3f5);border-radius:4px;padding:2px 5px}._58q8UW_markdown blockquote{border-left:3px solid var(--dsw-alias-border-l2,#0000001a);color:var(--dsw-alias-label-secondary,#61666b);margin:1em 0;padding-left:14px}._58q8UW_markdown table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}._58q8UW_markdown th,._58q8UW_markdown td{border:1px solid var(--dsw-alias-border-l2,#0000001a);text-align:left;padding:7px 10px}._58q8UW_markdown img{max-width:100%;height:auto}._58q8UW_markdown hr{border:0;border-top:1px solid var(--dsw-alias-border-l2,#0000001a);margin:20px 0}._58q8UW_skeletonAvatar,._58q8UW_skeletonTitle,._58q8UW_skeletonLine{background:var(--dsw-alias-border-l2,#0000001a);border-radius:5px;animation:1.6s ease-in-out infinite alternate _58q8UW_skeletonPulse;display:block}._58q8UW_skeletonAvatar{border-radius:18px;flex:none;width:84px;height:84px}._58q8UW_skeletonTitle{width:55%;height:28px;margin:8px 0 20px}._58q8UW_skeletonLine{width:100%;height:13px;margin:16px 0}._58q8UW_skeletonLine:nth-child(3n){width:72%}@keyframes _58q8UW_skeletonPulse{to{opacity:.4}}@media (prefers-reduced-motion:reduce){._58q8UW_skeletonAvatar,._58q8UW_skeletonTitle,._58q8UW_skeletonLine{animation:none}}";
+		const tagId$11 = "@nanmicoder/dsh-skills-hub/SkillDetailShell.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$11) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$10;
-			tag.textContent = css$10;
+			tag.dataset.pluginCss = tagId$11;
+			tag.textContent = css$11;
 			document.head.appendChild(tag);
 		}
-		var SkillDetailView_module_css_default = {
-			"back": "xO9T5G_back",
-			"badges": "xO9T5G_badges",
-			"columns": "xO9T5G_columns",
-			"copy": "xO9T5G_copy",
-			"detail": "xO9T5G_detail",
-			"eyebrow": "xO9T5G_eyebrow",
-			"fact": "xO9T5G_fact",
-			"factLabel": "xO9T5G_factLabel",
-			"factValue": "xO9T5G_factValue",
-			"facts": "xO9T5G_facts",
-			"fileBar": "xO9T5G_fileBar",
-			"fileBarPath": "xO9T5G_fileBarPath",
-			"fileFlag": "xO9T5G_fileFlag",
-			"fileIcon": "xO9T5G_fileIcon",
-			"fileItem": "xO9T5G_fileItem",
-			"fileItemActive": "xO9T5G_fileItemActive",
-			"fileList": "xO9T5G_fileList",
-			"fileMeta": "xO9T5G_fileMeta",
-			"filePath": "xO9T5G_filePath",
-			"fileView": "xO9T5G_fileView",
-			"files": "xO9T5G_files",
-			"frontmatter": "xO9T5G_frontmatter",
-			"header": "xO9T5G_header",
-			"headerText": "xO9T5G_headerText",
-			"main": "xO9T5G_main",
-			"markdown": "xO9T5G_markdown",
-			"muted": "xO9T5G_muted",
-			"name": "xO9T5G_name",
-			"panel": "xO9T5G_panel",
-			"rail": "xO9T5G_rail",
-			"railAction": "xO9T5G_railAction",
-			"railCard": "xO9T5G_railCard",
-			"report": "xO9T5G_report",
-			"reportLink": "xO9T5G_reportLink",
-			"reportStatus": "xO9T5G_reportStatus",
-			"reportVendor": "xO9T5G_reportVendor",
-			"reports": "xO9T5G_reports",
-			"reportsLabel": "xO9T5G_reportsLabel",
-			"skeletonAvatar": "xO9T5G_skeletonAvatar",
-			"skeletonLine": "xO9T5G_skeletonLine",
-			"skeletonPulse": "xO9T5G_skeletonPulse",
-			"skeletonTitle": "xO9T5G_skeletonTitle",
-			"source": "xO9T5G_source",
-			"srOnly": "xO9T5G_srOnly",
-			"summary": "xO9T5G_summary",
-			"version": "xO9T5G_version",
-			"warning": "xO9T5G_warning",
-			"warningIcon": "xO9T5G_warningIcon"
+		var SkillDetailShell_module_css_default = {
+			"back": "_58q8UW_back",
+			"badges": "_58q8UW_badges",
+			"columns": "_58q8UW_columns",
+			"copy": "_58q8UW_copy",
+			"detail": "_58q8UW_detail",
+			"eyebrow": "_58q8UW_eyebrow",
+			"fact": "_58q8UW_fact",
+			"factLabel": "_58q8UW_factLabel",
+			"factValue": "_58q8UW_factValue",
+			"facts": "_58q8UW_facts",
+			"fileBar": "_58q8UW_fileBar",
+			"fileBarPath": "_58q8UW_fileBarPath",
+			"fileFlag": "_58q8UW_fileFlag",
+			"fileIcon": "_58q8UW_fileIcon",
+			"fileItem": "_58q8UW_fileItem",
+			"fileItemActive": "_58q8UW_fileItemActive",
+			"fileList": "_58q8UW_fileList",
+			"fileMeta": "_58q8UW_fileMeta",
+			"filePath": "_58q8UW_filePath",
+			"fileView": "_58q8UW_fileView",
+			"files": "_58q8UW_files",
+			"frontmatter": "_58q8UW_frontmatter",
+			"header": "_58q8UW_header",
+			"headerText": "_58q8UW_headerText",
+			"main": "_58q8UW_main",
+			"markdown": "_58q8UW_markdown",
+			"muted": "_58q8UW_muted",
+			"name": "_58q8UW_name",
+			"panel": "_58q8UW_panel",
+			"rail": "_58q8UW_rail",
+			"railAction": "_58q8UW_railAction",
+			"railCard": "_58q8UW_railCard",
+			"skeletonAvatar": "_58q8UW_skeletonAvatar",
+			"skeletonLine": "_58q8UW_skeletonLine",
+			"skeletonPulse": "_58q8UW_skeletonPulse",
+			"skeletonTitle": "_58q8UW_skeletonTitle",
+			"source": "_58q8UW_source",
+			"srOnly": "_58q8UW_srOnly",
+			"summary": "_58q8UW_summary",
+			"version": "_58q8UW_version",
+			"viewToggle": "_58q8UW_viewToggle"
 		};
 		//#endregion
 		//#region lib/client/components/MarkdownView.js
-		/** Self-contained GFM rendering for untrusted marketplace and local skill docs. */
+		/**
+		* Self-contained GFM rendering for untrusted marketplace and local skill docs.
+		*
+		* Raw HTML is skipped and external links are opened with `noopener noreferrer`;
+		* the typography lives in the detail shell so a rendered document looks the same
+		* in the overview tab and in the file viewer.
+		*/
 		function MarkdownView({ content }) {
 			return (0, react_jsx_runtime.jsx)("div", {
-				className: SkillDetailView_module_css_default.markdown,
+				className: SkillDetailShell_module_css_default.markdown,
 				children: (0, react_jsx_runtime.jsx)(Markdown, {
 					remarkPlugins: [remarkGfm],
 					skipHtml: true,
@@ -22565,51 +22983,840 @@ function(property) {
 			});
 		}
 		//#endregion
-		//#region \0dsh-css:src/client/components/InstalledSkills.module.css.mjs
-		const css$9 = ".eYwU2a_root{box-sizing:border-box;width:100%;max-width:1280px;margin:0 auto;padding:28px}.eYwU2a_header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.eYwU2a_header h1{margin:0;font-size:24px}.eYwU2a_header p{color:var(--dsw-alias-label-secondary,#666);max-width:760px;font-size:13px;line-height:1.6}.eYwU2a_search{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#ddd);background:var(--dsw-alias-bg-base,white);width:100%;color:inherit;font:inherit;border-radius:8px;padding:10px 12px}.eYwU2a_list{gap:12px;display:grid}.eYwU2a_card{border:1px solid var(--dsw-alias-border-l2,#e5e5e5);border-radius:12px;justify-content:space-between;align-items:center;gap:20px;padding:18px;display:flex}.eYwU2a_info{min-width:0}.eYwU2a_name{color:inherit;font:inherit;cursor:pointer;text-align:left;background:0 0;border:0;margin-right:10px;padding:0;font-weight:600}.eYwU2a_name:hover{text-decoration:underline}.eYwU2a_badge{background:var(--dsw-alias-bg-layer-2,#f0f2f5);border-radius:4px;margin:2px 6px 2px 0;padding:2px 6px;font-size:11px;display:inline-block}.eYwU2a_version,.eYwU2a_count{color:var(--dsw-alias-label-secondary,#777);font-size:12px}.eYwU2a_summary{margin:8px 0;font-size:13px;line-height:1.6}.eYwU2a_path{overflow-wrap:anywhere;color:var(--dsw-alias-label-secondary,#777);margin-bottom:0;font-family:monospace;font-size:11px;line-height:1.7}.eYwU2a_actions{flex-shrink:0;gap:8px;display:flex}.eYwU2a_empty{text-align:center;color:var(--dsw-alias-label-secondary,#777);padding:50px 10px}.eYwU2a_error{color:var(--dsw-alias-state-error-primary,#c33)}.eYwU2a_skeleton{background:var(--dsw-alias-bg-layer-2,#f0f2f5);border-radius:12px;height:108px;margin-top:10px;animation:1.5s ease-in-out infinite eYwU2a_pulse}.eYwU2a_preview{max-height:60vh;padding:12px 0;overflow:auto}.eYwU2a_markdown{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}@keyframes eYwU2a_pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.eYwU2a_skeleton{animation:none}}@media (width<=640px){.eYwU2a_root{padding:18px}.eYwU2a_card{flex-direction:column;align-items:stretch}.eYwU2a_actions{justify-content:flex-end}}";
-		const tagId$9 = "@nanmicoder/dsh-skills-hub/InstalledSkills.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$9) + "]") === null) {
+		//#region \0dsh-css:src/client/components/SkillAvatar.module.css.mjs
+		const css$10 = ".C6tuwq_image{object-fit:cover;border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-module-platform,#f5f6f7);flex:none}.C6tuwq_letter{box-sizing:border-box;letter-spacing:-.02em;color:var(--dsw-alias-label-primary-inverted,#fff);user-select:none;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--dsw-alias-label-primary-inverted,#fff) 12%, transparent);flex:none;justify-content:center;align-items:center;font-weight:700;line-height:1;display:inline-flex;overflow:hidden}.C6tuwq_tone1{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 74%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 48%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone2{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 80%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 54%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone5{background:linear-gradient(145deg, color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 55%, var(--dsw-alias-state-success-primary,#22c55e)) 78%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 55%, var(--dsw-alias-state-success-primary,#22c55e)) 50%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone0{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 82%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 56%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone4{background:linear-gradient(145deg, color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 58%, var(--dsw-alias-state-success-primary,#22c55e)) 80%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 58%, var(--dsw-alias-state-success-primary,#22c55e)) 52%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone3{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-idle-primary,#d4d4d4) 62%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-idle-primary,#d4d4d4) 38%, var(--dsw-alias-label-primary,#0f1115)))}";
+		const tagId$10 = "@nanmicoder/dsh-skills-hub/SkillAvatar.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$10) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$9;
-			tag.textContent = css$9;
+			tag.dataset.pluginCss = tagId$10;
+			tag.textContent = css$10;
 			document.head.appendChild(tag);
 		}
-		var InstalledSkills_module_css_default = {
-			"actions": "eYwU2a_actions",
-			"badge": "eYwU2a_badge",
-			"card": "eYwU2a_card",
-			"count": "eYwU2a_count",
-			"empty": "eYwU2a_empty",
-			"error": "eYwU2a_error",
-			"header": "eYwU2a_header",
-			"info": "eYwU2a_info",
-			"list": "eYwU2a_list",
-			"markdown": "eYwU2a_markdown",
-			"name": "eYwU2a_name",
-			"path": "eYwU2a_path",
-			"preview": "eYwU2a_preview",
-			"pulse": "eYwU2a_pulse",
-			"root": "eYwU2a_root",
-			"search": "eYwU2a_search",
-			"skeleton": "eYwU2a_skeleton",
-			"summary": "eYwU2a_summary",
-			"version": "eYwU2a_version"
-		};
-		//#endregion
+		var SkillAvatar_module_css_default = {
+			"image": "C6tuwq_image",
+			"letter": "C6tuwq_letter",
+			"tone0": "C6tuwq_tone0",
+			"tone1": "C6tuwq_tone1",
+			"tone2": "C6tuwq_tone2",
+			"tone3": "C6tuwq_tone3",
+			"tone4": "C6tuwq_tone4",
+			"tone5": "C6tuwq_tone5"
+		};
+		//#endregion
+		//#region lib/client/components/SkillAvatar.js
+		/** Palette slots; each maps to one `.toneN` class in the module stylesheet. */
+		const TONE_COUNT = 6;
+		/**
+		* Per-source tone family. The `source` prop is otherwise unused by a letter
+		* avatar, so it earns its place as the family selector: ClawHub entries read
+		* warm, SkillHub entries read cool, and a mixed grid still shows at a glance
+		* where a card came from. A locally authored skill has no marketplace family,
+		* so its tile stays neutral rather than borrowing one.
+		*/
+		const SOURCE_TONES = {
+			clawhub: [
+				2,
+				5,
+				1
+			],
+			skillhub: [
+				0,
+				4,
+				3
+			],
+			local: [3]
+		};
+		/** Class name per tone slot, resolved once so the render path stays trivial. */
+		const TONE_CLASSES = [
+			SkillAvatar_module_css_default["tone0"] ?? "",
+			SkillAvatar_module_css_default["tone1"] ?? "",
+			SkillAvatar_module_css_default["tone2"] ?? "",
+			SkillAvatar_module_css_default["tone3"] ?? "",
+			SkillAvatar_module_css_default["tone4"] ?? "",
+			SkillAvatar_module_css_default["tone5"] ?? ""
+		];
+		/**
+		* Deterministic palette index: the same name always keeps the same identity
+		* color across sessions, pages and re-renders.
+		*/
+		function hashIndex(input) {
+			let hash = 0;
+			for (let i = 0; i < input.length; i++) hash = hash * 31 + input.charCodeAt(i) | 0;
+			return Math.abs(hash) % TONE_COUNT;
+		}
+		/**
+		* First visible character, uppercased. `Array.from` rather than `name[0]` so a
+		* CJK or astral-plane initial is not cut in half by UTF-16 indexing.
+		*/
+		function initialOf(name) {
+			const first = Array.from(name.trim())[0];
+			return first ? first.toUpperCase() : "?";
+		}
+		/**
+		* Skill icon tile.
+		*
+		* An `<img>` is rendered only for an `https:` URL: the string arrives from a
+		* third-party catalogue, and allowing `javascript:` or `data:` here would turn
+		* an upstream payload into script execution inside the DSH page.
+		*/
+		function SkillAvatar(props) {
+			const { name, source, iconUrl, size } = props;
+			const radius = Math.round(size * .24);
+			if (iconUrl !== void 0 && iconUrl.startsWith("https://")) return (0, react_jsx_runtime.jsx)("img", {
+				src: iconUrl,
+				alt: "",
+				width: size,
+				height: size,
+				loading: "lazy",
+				decoding: "async",
+				className: SkillAvatar_module_css_default.image,
+				style: {
+					width: size,
+					height: size,
+					borderRadius: radius
+				}
+			});
+			const family = SOURCE_TONES[source];
+			const tone = family[hashIndex(name) % family.length] ?? 0;
+			return (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				className: `${SkillAvatar_module_css_default.letter} ${TONE_CLASSES[tone] ?? ""}`,
+				style: {
+					width: size,
+					height: size,
+					borderRadius: radius,
+					fontSize: Math.round(size * .4)
+				},
+				children: initialOf(name)
+			});
+		}
+		//#endregion
+		//#region lib/client/components/SkillDetailShell.js
+		/**
+		* The detail surface shared by the market catalogue and the installed inventory.
+		*
+		* Both pages answer the same question — "what is inside this skill?" — and the
+		* only real difference is where the facts come from: an upstream provider or the
+		* filesystem. Everything that is *reading* rather than *fetching* therefore
+		* lives here: the back affordance, the identity header, the two tabs, the
+		* document column, the facts rail and the focus move that keeps a keyboard user
+		* from being left at the top of the document when the list is replaced.
+		*
+		* The two pages are not identical, so the shell takes slots rather than a data
+		* model: `badges`, `notice`, `overview`, `files` and `rail` are composed by the
+		* caller, while each caller owns its own loading state and its own choice of tab
+		* storage (the market page keeps it in `MarketState`, the local page in its own
+		* component state).
+		*/
+		/** Stable DOM ids for the tab list and its panels; one detail page is mounted at a time. */
+		const TAB_ID = "skills-hub-detail-tab";
+		const PANEL_ID$1 = "skills-hub-detail-panel";
+		/**
+		* The shell's stylesheet, re-exported for its callers.
+		*
+		* The pages built on this shell also render shell-shaped fragments (a report
+		* row, a path line, a facts list) and reaching them through an import is more
+		* honest than re-declaring near-copies of the same rules in a second module.
+		*/
+		const detailStyles = SkillDetailShell_module_css_default;
+		/** One label/value row of the facts rail. */
+		function Fact(props) {
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: SkillDetailShell_module_css_default.fact,
+				children: [(0, react_jsx_runtime.jsx)("dt", {
+					className: SkillDetailShell_module_css_default.factLabel,
+					children: props.label
+				}), (0, react_jsx_runtime.jsx)("dd", {
+					className: SkillDetailShell_module_css_default.factValue,
+					children: props.children
+				})]
+			});
+		}
+		function SkillDetailShell(props) {
+			const { name, activeTab, onTabChange } = props;
+			const headingRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				headingRef.current?.focus();
+			}, [props.focusKey]);
+			const tabs = [{
+				value: "overview",
+				label: props.overviewLabel,
+				id: `${TAB_ID}-overview`,
+				panelId: `${PANEL_ID$1}-overview`
+			}, {
+				value: "files",
+				label: props.filesLabel,
+				id: `${TAB_ID}-files`,
+				panelId: `${PANEL_ID$1}-files`
+			}];
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: SkillDetailShell_module_css_default.detail,
+				children: [
+					(0, react_jsx_runtime.jsx)("div", {
+						className: SkillDetailShell_module_css_default.back,
+						children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "ghost",
+							size: "sm",
+							icon: (0, react_jsx_runtime.jsx)(ArrowLeftIcon, { size: 16 }),
+							onClick: props.onBack,
+							children: props.backLabel
+						})
+					}),
+					(0, react_jsx_runtime.jsxs)("header", {
+						className: SkillDetailShell_module_css_default.header,
+						children: [props.avatar, (0, react_jsx_runtime.jsxs)("div", {
+							className: SkillDetailShell_module_css_default.headerText,
+							children: [
+								(0, react_jsx_runtime.jsx)("p", {
+									className: SkillDetailShell_module_css_default.eyebrow,
+									children: props.eyebrow
+								}),
+								(0, react_jsx_runtime.jsx)("h1", {
+									ref: headingRef,
+									tabIndex: -1,
+									className: SkillDetailShell_module_css_default.name,
+									children: name
+								}),
+								props.badges === void 0 ? null : (0, react_jsx_runtime.jsx)("div", {
+									className: SkillDetailShell_module_css_default.badges,
+									children: props.badges
+								}),
+								props.summary === void 0 || props.summary === "" ? null : (0, react_jsx_runtime.jsx)("p", {
+									className: SkillDetailShell_module_css_default.summary,
+									children: props.summary
+								})
+							]
+						})]
+					}),
+					props.notice,
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: SkillDetailShell_module_css_default.columns,
+						children: [(0, react_jsx_runtime.jsxs)("main", {
+							className: SkillDetailShell_module_css_default.main,
+							children: [
+								(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
+									items: tabs,
+									value: activeTab,
+									onChange: onTabChange,
+									label: name
+								}),
+								activeTab === "overview" && (0, react_jsx_runtime.jsx)("section", {
+									className: SkillDetailShell_module_css_default.panel,
+									id: `${PANEL_ID$1}-overview`,
+									role: "tabpanel",
+									"aria-labelledby": `${TAB_ID}-overview`,
+									children: props.overview
+								}),
+								activeTab === "files" && (0, react_jsx_runtime.jsx)("section", {
+									className: SkillDetailShell_module_css_default.panel,
+									id: `${PANEL_ID$1}-files`,
+									role: "tabpanel",
+									"aria-labelledby": `${TAB_ID}-files`,
+									children: props.files
+								})
+							]
+						}), (0, react_jsx_runtime.jsx)("aside", {
+							className: SkillDetailShell_module_css_default.rail,
+							children: (0, react_jsx_runtime.jsx)("div", {
+								className: SkillDetailShell_module_css_default.railCard,
+								children: props.rail
+							})
+						})]
+					})
+				]
+			});
+		}
+		/**
+		* Keeps the detail layout stable while its request is in flight.
+		*
+		* It renders the same boxes as the real page rather than a spinner, because the
+		* click that opens a detail is the moment the panel changes shape; a centered
+		* "loading" line would make that change happen twice.
+		*/
+		function SkillDetailSkeleton({ onBack }) {
+			const t = useT();
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: SkillDetailShell_module_css_default.detail,
+				"aria-busy": "true",
+				children: [(0, react_jsx_runtime.jsx)("div", {
+					className: SkillDetailShell_module_css_default.back,
+					children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "ghost",
+						size: "sm",
+						icon: (0, react_jsx_runtime.jsx)(ArrowLeftIcon, { size: 16 }),
+						onClick: onBack,
+						children: t("back")
+					})
+				}), (0, react_jsx_runtime.jsx)("div", {
+					role: "status",
+					"aria-label": t("loading"),
+					children: (0, react_jsx_runtime.jsxs)("div", {
+						"aria-hidden": "true",
+						children: [(0, react_jsx_runtime.jsxs)("div", {
+							className: SkillDetailShell_module_css_default.header,
+							children: [(0, react_jsx_runtime.jsx)("span", { className: SkillDetailShell_module_css_default.skeletonAvatar }), (0, react_jsx_runtime.jsxs)("div", {
+								className: SkillDetailShell_module_css_default.headerText,
+								children: [
+									(0, react_jsx_runtime.jsx)("span", { className: SkillDetailShell_module_css_default.skeletonTitle }),
+									(0, react_jsx_runtime.jsx)("span", { className: SkillDetailShell_module_css_default.skeletonLine }),
+									(0, react_jsx_runtime.jsx)("span", { className: SkillDetailShell_module_css_default.skeletonLine })
+								]
+							})]
+						}), (0, react_jsx_runtime.jsxs)("div", {
+							className: SkillDetailShell_module_css_default.columns,
+							style: { marginTop: 24 },
+							children: [(0, react_jsx_runtime.jsx)("div", {
+								className: SkillDetailShell_module_css_default.main,
+								children: (0, react_jsx_runtime.jsx)("div", {
+									className: SkillDetailShell_module_css_default.panel,
+									children: Array.from({ length: 10 }, (_, index) => (0, react_jsx_runtime.jsx)("span", { className: SkillDetailShell_module_css_default.skeletonLine }, index))
+								})
+							}), (0, react_jsx_runtime.jsx)("div", {
+								className: SkillDetailShell_module_css_default.rail,
+								children: (0, react_jsx_runtime.jsx)("div", {
+									className: SkillDetailShell_module_css_default.panel,
+									children: Array.from({ length: 5 }, (_, index) => (0, react_jsx_runtime.jsx)("span", { className: SkillDetailShell_module_css_default.skeletonLine }, index))
+								})
+							})]
+						})]
+					})
+				})]
+			});
+		}
+		//#endregion
+		//#region lib/client/components/SkillFiles.js
+		/**
+		* Files tab body, shared by the two detail pages.
+		*
+		* The market page lists provider file metadata and the local page lists the
+		* bytes on disk, but both are the same control: a picker on the left, one
+		* document on the right, and a copy button that confirms itself. The only
+		* difference the caller keeps is how a selection is fetched.
+		*
+		* A markdown document opens *rendered*: SKILL.md is prose meant to be read, and
+		* showing its source first answers a question nobody asked. Installing still has
+		* to be a trust decision, though, so the raw bytes are one toggle away — with
+		* line numbers and the copy button pointed at exactly what is on disk. Other
+		* files have no rendered form and stay source-only.
+		*/
+		/** How long the copy button stays in its confirmed state. */
+		const COPIED_RESET_MS$1 = 2e3;
+		/**
+		* A rendered markdown document: its metadata as structure, its body as prose.
+		*
+		* The split matters more than it looks: handed to the renderer, the closing
+		* `---` of the frontmatter turns the whole block into one setext heading.
+		*/
+		function MarkdownFilePreview({ content }) {
+			const split = (0, react.useMemo)(() => splitSkillFrontmatter(content), [content]);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: detailStyles.markdown,
+				children: [split.frontmatter !== null && (0, react_jsx_runtime.jsx)("div", {
+					className: detailStyles.frontmatter,
+					children: (0, react_jsx_runtime.jsx)(FrontmatterPanel, { data: split.frontmatter })
+				}), (0, react_jsx_runtime.jsx)(MarkdownView, { content: split.body })]
+			});
+		}
+		function SkillFiles(props) {
+			const { files, selected, loading, error = null, onSelect } = props;
+			const t = useT();
+			const [copied, setCopied] = (0, react.useState)(false);
+			const [mode, setMode] = (0, react.useState)("preview");
+			const resetTimer = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => () => {
+				if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+			}, []);
+			const selectedPath = selected?.path ?? null;
+			/** Only markdown has a rendered form; a toggle on a script or a JSON file would be a lie. */
+			const renderable = selected !== null && selected.language === "markdown";
+			(0, react.useEffect)(() => {
+				setMode("preview");
+			}, [selectedPath]);
+			const copyFile = (0, react.useCallback)(() => {
+				const content = selected?.content;
+				if (content === void 0) return;
+				(0, _deepseek_ai_dsh_client_ui_primitives.writeClipboard)(content).then((ok) => {
+					if (!ok) return;
+					setCopied(true);
+					if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+					resetTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS$1);
+				});
+			}, [selected]);
+			if (files.length === 0) return loading ? (0, react_jsx_runtime.jsxs)("p", {
+				className: detailStyles.muted,
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+						state: "ongoing",
+						size: 14
+					}),
+					" ",
+					t("loading")
+				]
+			}) : (0, react_jsx_runtime.jsx)("p", {
+				className: detailStyles.muted,
+				children: t("noFiles")
+			});
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: detailStyles.files,
+				children: [(0, react_jsx_runtime.jsx)("ul", {
+					className: detailStyles.fileList,
+					children: files.map((meta) => {
+						const active = meta.path === selectedPath;
+						return (0, react_jsx_runtime.jsx)("li", { children: (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: `${detailStyles.fileItem} ${active ? detailStyles.fileItemActive : ""}`,
+							"aria-current": active ? "true" : void 0,
+							onClick: () => onSelect(meta.path),
+							children: [
+								(0, react_jsx_runtime.jsx)(FileIcon, {
+									size: 14,
+									className: detailStyles.fileIcon
+								}),
+								(0, react_jsx_runtime.jsx)("span", {
+									className: detailStyles.filePath,
+									title: meta.path,
+									children: meta.path
+								}),
+								meta.tooBig === true && (0, react_jsx_runtime.jsx)("span", {
+									className: detailStyles.fileFlag,
+									children: t("fileTooLarge")
+								}),
+								(0, react_jsx_runtime.jsxs)("span", {
+									className: detailStyles.fileMeta,
+									children: [
+										(0, _deepseek_ai_dsh_client_ui_primitives.fileSizeText)(meta.size),
+										" · ",
+										meta.language
+									]
+								})
+							]
+						}) }, meta.path);
+					})
+				}), (0, react_jsx_runtime.jsx)("div", {
+					className: detailStyles.fileView,
+					children: error !== null ? (0, react_jsx_runtime.jsxs)("p", {
+						className: detailStyles.muted,
+						role: "alert",
+						children: [
+							(0, react_jsx_runtime.jsx)(AlertIcon, { size: 14 }),
+							" ",
+							error
+						]
+					}) : selected === null ? loading ? (0, react_jsx_runtime.jsxs)("p", {
+						className: detailStyles.muted,
+						role: "status",
+						"aria-live": "polite",
+						children: [
+							(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+								state: "ongoing",
+								size: 14
+							}),
+							" ",
+							t("loading")
+						]
+					}) : null : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: detailStyles.fileBar,
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: detailStyles.fileBarPath,
+									title: selected.path,
+									children: selected.path
+								}),
+								renderable && (0, react_jsx_runtime.jsxs)("div", {
+									className: detailStyles.viewToggle,
+									role: "group",
+									"aria-label": t("fileView"),
+									children: [(0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										"aria-pressed": mode === "preview",
+										onClick: () => setMode("preview"),
+										children: t("filePreview")
+									}), (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										"aria-pressed": mode === "source",
+										onClick: () => setMode("source"),
+										children: t("fileSource")
+									})]
+								}),
+								(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "outline",
+									size: "sm",
+									className: detailStyles.copy,
+									"aria-label": copied ? t("copied") : t("copy"),
+									onClick: copyFile,
+									icon: copied ? (0, react_jsx_runtime.jsx)(CheckIcon, { size: 14 }) : (0, react_jsx_runtime.jsx)(CopyIcon, { size: 14 }),
+									children: copied ? t("copied") : t("copy")
+								})
+							]
+						}),
+						selected.truncated && (0, react_jsx_runtime.jsx)("p", {
+							className: detailStyles.muted,
+							children: t("fileTruncated")
+						}),
+						renderable && mode === "preview" ? (0, react_jsx_runtime.jsx)(MarkdownFilePreview, { content: selected.content }) : (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.CodeBlock, {
+							code: selected.content,
+							lang: selected.language,
+							showHeader: false,
+							lineNumbers: true,
+							copyLabel: t("copy"),
+							copiedLabel: t("copied")
+						}),
+						(0, react_jsx_runtime.jsx)("p", {
+							className: detailStyles.srOnly,
+							role: "status",
+							"aria-live": "polite",
+							children: copied ? t("copied") : ""
+						})
+					] })
+				})]
+			});
+		}
+		//#endregion
+		//#region \0dsh-css:src/client/components/InstalledSkillDetail.module.css.mjs
+		const css$9 = "._4PqW5a_chip{box-sizing:border-box;background:var(--dsw-alias-bg-layer-2,#f0f2f5);height:20px;color:var(--dsw-alias-label-secondary,#61666b);white-space:nowrap;border-radius:999px;flex:none;align-items:center;padding:0 7px;font-size:11px;font-weight:600;line-height:18px;display:inline-flex}._4PqW5a_chipOn{background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 12%, transparent);color:var(--dsw-alias-state-business-primary,#4176e6)}._4PqW5a_pathRow{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-layer-1,#fff);align-items:center;gap:8px;min-width:0;padding:7px 10px;display:flex}._4PqW5a_pathIcon{color:var(--dsw-alias-label-tertiary,#81858c);flex:none}._4PqW5a_pathText{min-width:0;color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:18px}._4PqW5a_pathCopy{flex:none}._4PqW5a_provenance{border-top:1px solid var(--dsw-alias-border-l1,#0000000a);color:var(--dsw-alias-label-tertiary,#81858c);margin:0;padding:12px 14px 14px;font-size:12px;line-height:18px}._4PqW5a_failure{flex-direction:column;align-items:flex-start;gap:8px;display:flex}._4PqW5a_failureTitle{margin:0;font-size:13.5px;font-weight:600}._4PqW5a_failureText{color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;margin:0;font-size:12.5px;line-height:19px}";
+		const tagId$9 = "@nanmicoder/dsh-skills-hub/InstalledSkillDetail.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$9) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
+			tag.dataset.pluginCss = tagId$9;
+			tag.textContent = css$9;
+			document.head.appendChild(tag);
+		}
+		var InstalledSkillDetail_module_css_default = {
+			"chip": "_4PqW5a_chip",
+			"chipOn": "_4PqW5a_chipOn",
+			"failure": "_4PqW5a_failure",
+			"failureText": "_4PqW5a_failureText",
+			"failureTitle": "_4PqW5a_failureTitle",
+			"pathCopy": "_4PqW5a_pathCopy",
+			"pathIcon": "_4PqW5a_pathIcon",
+			"pathRow": "_4PqW5a_pathRow",
+			"pathText": "_4PqW5a_pathText",
+			"provenance": "_4PqW5a_provenance"
+		};
+		//#endregion
+		//#region lib/client/components/InstalledSkillDetail.js
+		/**
+		* Installed skill detail page.
+		*
+		* The list's "view" affordance used to open a 380px confirmation-style modal,
+		* which is the wrong container for a document: SKILL.md is a page of prose with
+		* tables and code, and the marketplace already answers the same question with a
+		* full-panel page. This page is that same reading surface (`SkillDetailShell`),
+		* fed by the filesystem instead of a provider.
+		*
+		* What it deliberately does *not* do is pretend a local skill is a market
+		* entry. There is no author, download count or security report to show, so
+		* those rows are absent rather than zero. Where the two identities do meet —
+		* a skill installed from a market, proven by its `.skills-hub.json` sidecar —
+		* the page links to the market detail instead of duplicating it, which keeps
+		* upstream data upstream and this page readable with the network down.
+		*/
+		/** How long the path copy button stays in its confirmed state. */
+		const COPIED_RESET_MS = 2e3;
+		/** Reader-facing text for anything thrown by the client. */
+		function messageOf$1(reason) {
+			return reason instanceof Error ? reason.message : String(reason);
+		}
+		/** Local install timestamps are ISO strings; an unparseable one renders as nothing. */
+		function formatInstalledAt(value) {
+			const date = new Date(value);
+			return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+		}
+		function InstalledSkillDetail(props) {
+			const { item } = props;
+			const t = useT();
+			const [detail, setDetail] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [revision, setRevision] = (0, react.useState)(0);
+			const [tab, setTab] = (0, react.useState)("overview");
+			const [selectedPath, setSelectedPath] = (0, react.useState)(null);
+			const [file, setFile] = (0, react.useState)(null);
+			const [fileLoading, setFileLoading] = (0, react.useState)(false);
+			const [fileError, setFileError] = (0, react.useState)(null);
+			const [copied, setCopied] = (0, react.useState)(false);
+			const resetTimer = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => {
+				const abort = new AbortController();
+				setError(null);
+				fetchInstalledDetail(item.key, abort.signal).then((result) => {
+					if (!abort.signal.aborted) setDetail(result);
+				}).catch((reason) => {
+					if (!abort.signal.aborted && !isAbortError(reason)) setError(messageOf$1(reason));
+				});
+				return () => abort.abort();
+			}, [item.key, revision]);
+			(0, react.useEffect)(() => {
+				if (tab !== "files" || detail === null || selectedPath !== null) return;
+				const preferred = detail.files.find((entry) => entry.path.toLowerCase() === "skill.md") ?? detail.files[0];
+				if (preferred !== void 0) setSelectedPath(preferred.path);
+			}, [
+				tab,
+				detail,
+				selectedPath
+			]);
+			(0, react.useEffect)(() => {
+				if (selectedPath === null) return;
+				const abort = new AbortController();
+				setFileLoading(true);
+				setFileError(null);
+				fetchInstalledFile(item.key, selectedPath, abort.signal).then((result) => {
+					if (!abort.signal.aborted) setFile(result);
+				}).catch((reason) => {
+					if (abort.signal.aborted || isAbortError(reason)) return;
+					setFile(null);
+					setFileError(messageOf$1(reason));
+				}).finally(() => {
+					if (!abort.signal.aborted) setFileLoading(false);
+				});
+				return () => abort.abort();
+			}, [item.key, selectedPath]);
+			(0, react.useEffect)(() => () => {
+				if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+			}, []);
+			const copyPath = () => {
+				(0, _deepseek_ai_dsh_client_ui_primitives.writeClipboard)(item.dirPath).then((ok) => {
+					if (!ok) return;
+					setCopied(true);
+					if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+					resetTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+				});
+			};
+			const marketId = item.managed && item.source !== "local" ? item.id : null;
+			const body = detail === null ? "" : stripSkillFrontmatter(detail.markdown);
+			const metadata = (0, react.useMemo)(() => detail?.frontmatter == null ? null : parseSkillFrontmatter(detail.frontmatter), [detail]);
+			const baseName = item.dirPath.split(/[\\/]/).pop() ?? item.dirName;
+			const flatSkill = detail !== null && detail.files.length === 1 && detail.files[0]?.path === baseName;
+			const installedAt = item.installedAt === void 0 ? "" : formatInstalledAt(item.installedAt);
+			return (0, react_jsx_runtime.jsx)(SkillDetailShell, {
+				focusKey: item.key,
+				onBack: props.onBack,
+				backLabel: t("back"),
+				avatar: (0, react_jsx_runtime.jsx)(SkillAvatar, {
+					name: item.name,
+					source: item.source,
+					size: 84
+				}),
+				eyebrow: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
+					className: detailStyles.source,
+					children: t(`source.${item.source}`)
+				}), item.version !== void 0 && item.version !== "" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: "·"
+				}), (0, react_jsx_runtime.jsxs)("span", {
+					className: detailStyles.version,
+					children: ["v", item.version]
+				})] })] }),
+				name: item.name,
+				badges: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
+					className: `${InstalledSkillDetail_module_css_default.chip} ${item.managed ? InstalledSkillDetail_module_css_default.chipOn : ""}`,
+					children: item.managed ? t("managedByHub") : t("unmanagedSkill")
+				}), item.linked && (0, react_jsx_runtime.jsx)("span", {
+					className: InstalledSkillDetail_module_css_default.chip,
+					children: t("symlinkSkill")
+				})] }),
+				summary: item.summary,
+				notice: (0, react_jsx_runtime.jsxs)("div", {
+					className: InstalledSkillDetail_module_css_default.pathRow,
+					children: [
+						(0, react_jsx_runtime.jsx)(FolderIcon, {
+							size: 14,
+							className: InstalledSkillDetail_module_css_default.pathIcon
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: InstalledSkillDetail_module_css_default.pathText,
+							title: item.dirPath,
+							children: item.dirPath
+						}),
+						(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "ghost",
+							size: "sm",
+							className: InstalledSkillDetail_module_css_default.pathCopy,
+							"aria-label": copied ? t("copiedPath") : t("copyPath"),
+							onClick: copyPath,
+							icon: copied ? (0, react_jsx_runtime.jsx)(CheckIcon, { size: 14 }) : (0, react_jsx_runtime.jsx)(CopyIcon, { size: 14 }),
+							children: copied ? t("copiedPath") : t("copyPath")
+						})
+					]
+				}),
+				overviewLabel: t("overview"),
+				filesLabel: `${t("files")} (${detail?.files.length ?? item.fileCount})`,
+				activeTab: tab,
+				onTabChange: setTab,
+				overview: error !== null ? (0, react_jsx_runtime.jsxs)("div", {
+					className: InstalledSkillDetail_module_css_default.failure,
+					role: "alert",
+					children: [
+						(0, react_jsx_runtime.jsx)("p", {
+							className: InstalledSkillDetail_module_css_default.failureTitle,
+							children: t("installedReadFailed")
+						}),
+						(0, react_jsx_runtime.jsx)("p", {
+							className: InstalledSkillDetail_module_css_default.failureText,
+							children: error
+						}),
+						(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => setRevision((value) => value + 1),
+							children: t("retry")
+						})
+					]
+				}) : detail === null ? (0, react_jsx_runtime.jsxs)("p", {
+					className: detailStyles.muted,
+					role: "status",
+					"aria-live": "polite",
+					children: [
+						(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+							state: "ongoing",
+							size: 14
+						}),
+						" ",
+						t("loading")
+					]
+				}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [metadata !== null && (0, react_jsx_runtime.jsx)("div", {
+					className: detailStyles.frontmatter,
+					children: (0, react_jsx_runtime.jsx)(FrontmatterPanel, { data: metadata })
+				}), body.trim() === "" ? (0, react_jsx_runtime.jsx)("p", {
+					className: detailStyles.muted,
+					children: t("emptyDocument")
+				}) : (0, react_jsx_runtime.jsx)(MarkdownView, { content: body })] }),
+				files: error !== null ? (0, react_jsx_runtime.jsx)("p", {
+					className: detailStyles.muted,
+					role: "alert",
+					children: t("installedReadFailed")
+				}) : (0, react_jsx_runtime.jsx)(SkillFiles, {
+					files: detail?.files ?? [],
+					selected: file,
+					loading: fileLoading || detail === null,
+					error: fileError,
+					onSelect: (path) => {
+						setFile(null);
+						setSelectedPath(path);
+					}
+				}),
+				rail: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: detailStyles.railAction,
+						children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "md",
+							disabled: !item.removable,
+							title: item.removable ? t("uninstallConfirm") : t("uninstallDisabled"),
+							icon: (0, react_jsx_runtime.jsx)(TrashIcon, { size: 16 }),
+							onClick: () => props.onUninstall(item),
+							children: t("uninstall")
+						}), marketId !== null && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "ghost",
+							size: "md",
+							icon: (0, react_jsx_runtime.jsx)(ExternalLinkIcon, { size: 16 }),
+							onClick: () => props.onOpenMarket(marketId),
+							children: t("openInMarket")
+						})]
+					}),
+					(0, react_jsx_runtime.jsxs)("dl", {
+						className: detailStyles.facts,
+						children: [
+							(0, react_jsx_runtime.jsx)(Fact, {
+								label: t("sourceLabel"),
+								children: t(`source.${item.source}`)
+							}),
+							item.version !== void 0 && item.version !== "" && (0, react_jsx_runtime.jsxs)(Fact, {
+								label: t("version"),
+								children: ["v", item.version]
+							}),
+							installedAt !== "" && (0, react_jsx_runtime.jsx)(Fact, {
+								label: t("installedAtLabel"),
+								children: installedAt
+							}),
+							detail !== null && (0, react_jsx_runtime.jsx)(Fact, {
+								label: t("skillKind"),
+								children: flatSkill ? t("flatSkill") : t("bundleSkill")
+							}),
+							(0, react_jsx_runtime.jsxs)(Fact, {
+								label: t("files"),
+								children: [
+									t("filesCount", { count: item.fileCount }),
+									" · ",
+									(0, _deepseek_ai_dsh_client_ui_primitives.fileSizeText)(item.bytes)
+								]
+							})
+						]
+					}),
+					marketId !== null && (0, react_jsx_runtime.jsx)("p", {
+						className: InstalledSkillDetail_module_css_default.provenance,
+						children: t("marketProvenance")
+					})
+				] })
+			});
+		}
+		//#endregion
+		//#region \0dsh-css:src/client/components/InstalledSkills.module.css.mjs
+		const css$8 = ".eYwU2a_root{box-sizing:border-box;width:100%;max-width:1280px;margin:0 auto;padding:28px}.eYwU2a_header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.eYwU2a_header h1{margin:0;font-size:24px}.eYwU2a_header p{max-width:760px;color:var(--dsw-alias-label-secondary,#61666b);margin:8px 0 0;font-size:13px;line-height:1.6}.eYwU2a_search{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-base,#fff);width:100%;color:inherit;font:inherit;margin-top:20px;padding:10px 12px}.eYwU2a_search:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:1px}.eYwU2a_list{gap:12px;display:grid}.eYwU2a_card{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-md,12px);justify-content:space-between;align-items:center;gap:20px;padding:18px;display:flex}.eYwU2a_info{min-width:0}.eYwU2a_name{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;margin:0 10px 0 0;padding:0;font-weight:600}.eYwU2a_name:hover{text-decoration:underline}.eYwU2a_name:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px;border-radius:var(--dsw-radius-xs,4px)}.eYwU2a_badge{border-radius:var(--dsw-radius-xs,4px);background:var(--dsw-alias-bg-layer-2,#f0f2f5);margin:2px 6px 2px 0;padding:2px 6px;font-size:11px;display:inline-block}.eYwU2a_version,.eYwU2a_count{color:var(--dsw-alias-label-secondary,#61666b);font-size:12px}.eYwU2a_count{margin:16px 0 12px}.eYwU2a_summary{margin:8px 0;font-size:13px;line-height:1.6}.eYwU2a_path{color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.7}.eYwU2a_actions{flex-shrink:0;gap:8px;display:flex}.eYwU2a_empty{color:var(--dsw-alias-label-secondary,#61666b);text-align:center;padding:50px 10px}.eYwU2a_error{color:var(--dsw-alias-state-error-primary,#ec1313)}.eYwU2a_skeleton{border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-2,#f0f2f5);height:108px;margin-top:10px;animation:1.5s ease-in-out infinite eYwU2a_pulse}@keyframes eYwU2a_pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.eYwU2a_skeleton{animation:none}}@media (width<=640px){.eYwU2a_root{padding:18px}.eYwU2a_card{flex-direction:column;align-items:stretch}.eYwU2a_actions{justify-content:flex-end}}";
+		const tagId$8 = "@nanmicoder/dsh-skills-hub/InstalledSkills.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$8) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
+			tag.dataset.pluginCss = tagId$8;
+			tag.textContent = css$8;
+			document.head.appendChild(tag);
+		}
+		var InstalledSkills_module_css_default = {
+			"actions": "eYwU2a_actions",
+			"badge": "eYwU2a_badge",
+			"card": "eYwU2a_card",
+			"count": "eYwU2a_count",
+			"empty": "eYwU2a_empty",
+			"error": "eYwU2a_error",
+			"header": "eYwU2a_header",
+			"info": "eYwU2a_info",
+			"list": "eYwU2a_list",
+			"name": "eYwU2a_name",
+			"path": "eYwU2a_path",
+			"pulse": "eYwU2a_pulse",
+			"root": "eYwU2a_root",
+			"search": "eYwU2a_search",
+			"skeleton": "eYwU2a_skeleton",
+			"summary": "eYwU2a_summary",
+			"version": "eYwU2a_version"
+		};
+		//#endregion
 		//#region lib/client/components/InstalledSkills.js
-		function InstalledSkills({ onChanged }) {
+		/**
+		* Installed skills: the local inventory and its reading page.
+		*
+		* Two views, one component. The detail page replaces the list *inside* this
+		* component rather than in `MarketPage`, so the list is never unmounted: the
+		* search query, the loaded rows and the scroll position are all still there when
+		* the reader comes back. That is also why the selected row is stored as a key
+		* and resolved against the current rows — a refresh that drops the entry closes
+		* the page instead of leaving it pointing at something that no longer exists.
+		*
+		* Removal stays a confirmation modal on purpose: it is a short yes/no about a
+		* destructive action, which is exactly what the primitive's dialog is for. The
+		* skill's *content* is not, which is why it moved to a page.
+		*/
+		/** Reader-facing text for anything thrown by the client. */
+		function messageOf(reason) {
+			return reason instanceof Error ? reason.message : String(reason);
+		}
+		function InstalledSkills(props) {
 			const t = useT();
 			const [items, setItems] = (0, react.useState)([]);
 			const [loading, setLoading] = (0, react.useState)(true);
 			const [error, setError] = (0, react.useState)(null);
 			const [query, setQuery] = (0, react.useState)("");
 			const [revision, setRevision] = (0, react.useState)(0);
-			const [selected, setSelected] = (0, react.useState)(null);
-			const [markdown, setMarkdown] = (0, react.useState)(null);
-			const [detailError, setDetailError] = (0, react.useState)(null);
+			const [selectedKey, setSelectedKey] = (0, react.useState)(null);
 			const [pending, setPending] = (0, react.useState)(null);
 			const [busy, setBusy] = (0, react.useState)(false);
+			const [returnFocusKey, setReturnFocusKey] = (0, react.useState)(null);
+			/** Row buttons by skill key, so the detail page can hand focus back. */
+			const rowButtons = (0, react.useRef)(/* @__PURE__ */ new Map());
 			(0, react.useEffect)(() => {
 				const abort = new AbortController();
 				setLoading(true);
@@ -22617,44 +23824,46 @@ function(property) {
 				fetchInstalled(abort.signal).then((result) => {
 					if (!abort.signal.aborted) setItems(result);
 				}).catch((reason) => {
-					if (!abort.signal.aborted && !isAbortError(reason)) setError(String(reason.message ?? reason));
+					if (!abort.signal.aborted && !isAbortError(reason)) setError(messageOf(reason));
 				}).finally(() => {
 					if (!abort.signal.aborted) setLoading(false);
 				});
 				return () => abort.abort();
 			}, [revision]);
-			(0, react.useEffect)(() => {
-				setMarkdown(null);
-				setDetailError(null);
-				if (!selected) return;
-				const abort = new AbortController();
-				fetchInstalledDetail(selected.key, abort.signal).then((result) => {
-					if (!abort.signal.aborted) setMarkdown(stripSkillFrontmatter(result.markdown));
-				}).catch((reason) => {
-					if (!abort.signal.aborted && !isAbortError(reason)) setDetailError(String(reason.message ?? reason));
-				});
-				return () => abort.abort();
-			}, [selected]);
-			async function uninstall() {
-				if (!pending || busy) return;
+			const uninstall = async (target) => {
+				if (busy) return;
 				setBusy(true);
 				setError(null);
 				try {
-					await removeInstalled(pending.key);
-					setItems((current) => current.filter((item) => item.key !== pending.key));
-					if (selected?.key === pending.key) setSelected(null);
+					await removeInstalled(target.key);
+					setItems((current) => current.filter((item) => item.key !== target.key));
+					setSelectedKey((current) => current === target.key ? null : current);
 					setPending(null);
-					onChanged();
+					props.onChanged();
 				} catch (reason) {
-					setError(reason instanceof Error ? reason.message : String(reason));
+					setError(messageOf(reason));
 					setPending(null);
 				} finally {
 					setBusy(false);
 				}
-			}
+			};
+			const selected = selectedKey === null ? null : items.find((item) => item.key === selectedKey) ?? null;
+			(0, react.useEffect)(() => {
+				if (returnFocusKey === null) return;
+				rowButtons.current.get(returnFocusKey)?.focus();
+				setReturnFocusKey(null);
+			}, [returnFocusKey]);
 			const needle = query.trim().toLocaleLowerCase();
 			const visible = items.filter((item) => `${item.name} ${item.summary ?? ""} ${item.dirPath}`.toLocaleLowerCase().includes(needle));
-			return (0, react_jsx_runtime.jsxs)("section", {
+			return (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [selected !== null ? (0, react_jsx_runtime.jsx)(InstalledSkillDetail, {
+				item: selected,
+				onBack: () => {
+					setReturnFocusKey(selected.key);
+					setSelectedKey(null);
+				},
+				onUninstall: setPending,
+				onOpenMarket: props.onOpenMarket
+			}, selected.key) : (0, react_jsx_runtime.jsxs)("section", {
 				className: InstalledSkills_module_css_default.root,
 				children: [
 					(0, react_jsx_runtime.jsxs)("header", {
@@ -22675,7 +23884,7 @@ function(property) {
 						value: query,
 						onChange: (event) => setQuery(event.target.value)
 					}),
-					error && (0, react_jsx_runtime.jsx)("p", {
+					error !== null && (0, react_jsx_runtime.jsx)("p", {
 						role: "alert",
 						className: InstalledSkills_module_css_default.error,
 						children: error
@@ -22700,7 +23909,11 @@ function(property) {
 								children: [
 									(0, react_jsx_runtime.jsx)("button", {
 										className: InstalledSkills_module_css_default.name,
-										onClick: () => setSelected(item),
+										ref: (node) => {
+											if (node === null) rowButtons.current.delete(item.key);
+											else rowButtons.current.set(item.key, node);
+										},
+										onClick: () => setSelectedKey(item.key),
 										children: item.name
 									}),
 									(0, react_jsx_runtime.jsx)("span", {
@@ -22711,11 +23924,11 @@ function(property) {
 										className: InstalledSkills_module_css_default.badge,
 										children: t("linkedSkill")
 									}),
-									item.version && (0, react_jsx_runtime.jsxs)("span", {
+									item.version !== void 0 && item.version !== "" && (0, react_jsx_runtime.jsxs)("span", {
 										className: InstalledSkills_module_css_default.version,
 										children: ["v", item.version]
 									}),
-									item.summary && (0, react_jsx_runtime.jsx)("p", {
+									item.summary !== void 0 && item.summary !== "" && (0, react_jsx_runtime.jsx)("p", {
 										className: InstalledSkills_module_css_default.summary,
 										children: item.summary
 									}),
@@ -22729,79 +23942,59 @@ function(property) {
 								children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 									variant: "outline",
 									size: "sm",
-									onClick: () => setSelected(item),
+									onClick: () => setSelectedKey(item.key),
 									children: t("viewInstalled")
 								}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 									variant: "outline",
 									size: "sm",
 									disabled: !item.removable,
+									title: item.removable ? void 0 : t("uninstallDisabled"),
 									onClick: () => setPending(item),
 									children: t("uninstall")
 								})]
 							})]
 						}, item.key))
-					})] }),
-					selected && (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
-						open: true,
-						title: selected.name,
-						closeLabel: t("close"),
-						onClose: () => setSelected(null),
-						children: [(0, react_jsx_runtime.jsx)("p", {
-							className: InstalledSkills_module_css_default.path,
-							children: selected.dirPath
-						}), (0, react_jsx_runtime.jsx)("div", {
-							className: InstalledSkills_module_css_default.preview,
-							children: detailError ? (0, react_jsx_runtime.jsx)("p", {
-								role: "alert",
-								children: detailError
-							}) : markdown === null ? (0, react_jsx_runtime.jsxs)("div", {
-								role: "status",
-								"aria-label": t("loading"),
-								children: [(0, react_jsx_runtime.jsx)("div", { className: InstalledSkills_module_css_default.skeleton }), (0, react_jsx_runtime.jsx)("div", { className: InstalledSkills_module_css_default.skeleton })]
-							}) : (0, react_jsx_runtime.jsx)(MarkdownView, { content: markdown })
-						})]
-					}),
-					pending && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
-						open: true,
-						title: t("uninstallTitle", { name: pending.name }),
-						closeLabel: t("close"),
-						description: t(pending.linked ? "unlinkDescription" : "localUninstallDescription"),
-						onClose: () => {
-							if (!busy) setPending(null);
-						},
-						footer: (0, react_jsx_runtime.jsxs)("div", {
-							className: InstalledSkills_module_css_default.actions,
-							children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								variant: "outline",
-								size: "md",
-								disabled: busy,
-								onClick: () => setPending(null),
-								children: t("cancel")
-							}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								variant: "primary",
-								size: "md",
-								disabled: busy,
-								onClick: () => void uninstall(),
-								children: t(busy ? "uninstalling" : "uninstallConfirm")
-							})]
-						}),
-						children: (0, react_jsx_runtime.jsx)("p", {
-							className: InstalledSkills_module_css_default.path,
-							children: pending.dirPath
-						})
-					})
+					})] })
 				]
-			});
+			}), pending !== null && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				title: t("uninstallTitle", { name: pending.name }),
+				closeLabel: t("close"),
+				description: t(pending.linked ? "unlinkDescription" : "localUninstallDescription"),
+				onClose: () => {
+					if (!busy) setPending(null);
+				},
+				footer: (0, react_jsx_runtime.jsxs)("div", {
+					className: InstalledSkills_module_css_default.actions,
+					children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						size: "md",
+						disabled: busy,
+						onClick: () => setPending(null),
+						children: t("cancel")
+					}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "primary",
+						size: "md",
+						disabled: busy,
+						onClick: () => void uninstall(pending),
+						children: t(busy ? "uninstalling" : "uninstallConfirm")
+					})]
+				}),
+				children: (0, react_jsx_runtime.jsx)("p", {
+					className: InstalledSkills_module_css_default.path,
+					children: pending.dirPath
+				})
+			})] });
 		}
 		//#endregion
 		//#region \0dsh-css:src/client/components/FilterBar.module.css.mjs
-		const css$8 = ".iX7c8W_bar{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.iX7c8W_search{flex:220px;align-items:center;gap:6px;min-width:0;display:flex}.iX7c8W_searchInput{flex:auto;min-width:0}.iX7c8W_clear{flex:none}.iX7c8W_field{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-layer-1,#fff);cursor:pointer;flex:none;align-items:center;gap:6px;height:32px;padding:0 6px 0 10px;display:inline-flex}.iX7c8W_field:focus-within{border-color:var(--dsw-alias-state-business-primary,#4176e6)}.iX7c8W_fieldLabel{color:var(--dsw-alias-label-tertiary,#81858c);white-space:nowrap;font-size:12px;line-height:18px}.iX7c8W_select{max-width:148px;color:var(--dsw-alias-label-primary,#0f1115);font:inherit;cursor:pointer;text-overflow:ellipsis;background:0 0;border:none;outline:none;font-size:12.5px;font-weight:600;line-height:18px}.iX7c8W_select:disabled{color:var(--dsw-alias-label-tertiary,#81858c);cursor:not-allowed}.iX7c8W_select option{background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#0f1115)}.iX7c8W_srOnly{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
-		const tagId$8 = "@nanmicoder/dsh-skills-hub/FilterBar.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$8) + "]") === null) {
+		const css$7 = ".iX7c8W_bar{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.iX7c8W_search{flex:220px;align-items:center;gap:6px;min-width:0;display:flex}.iX7c8W_searchInput{flex:auto;min-width:0}.iX7c8W_clear{flex:none}.iX7c8W_field{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-layer-1,#fff);cursor:pointer;flex:none;align-items:center;gap:6px;height:32px;padding:0 6px 0 10px;display:inline-flex}.iX7c8W_field:focus-within{border-color:var(--dsw-alias-state-business-primary,#4176e6)}.iX7c8W_fieldLabel{color:var(--dsw-alias-label-tertiary,#81858c);white-space:nowrap;font-size:12px;line-height:18px}.iX7c8W_select{max-width:148px;color:var(--dsw-alias-label-primary,#0f1115);font:inherit;cursor:pointer;text-overflow:ellipsis;background:0 0;border:none;outline:none;font-size:12.5px;font-weight:600;line-height:18px}.iX7c8W_select:disabled{color:var(--dsw-alias-label-tertiary,#81858c);cursor:not-allowed}.iX7c8W_select option{background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#0f1115)}.iX7c8W_srOnly{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+		const tagId$7 = "@nanmicoder/dsh-skills-hub/FilterBar.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$7) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$8;
-			tag.textContent = css$8;
+			tag.dataset.pluginCss = tagId$7;
+			tag.textContent = css$7;
 			document.head.appendChild(tag);
 		}
 		var FilterBar_module_css_default = {
@@ -22928,13 +24121,13 @@ function(property) {
 		}
 		//#endregion
 		//#region \0dsh-css:src/client/components/MarketDisclaimer.module.css.mjs
-		const css$7 = ".e2Evdq_banner{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 38%, transparent);border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 10%, transparent);align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.e2Evdq_icon{color:var(--dsw-alias-state-warn-primary,#f59e0b);flex:none;margin-top:1px}.e2Evdq_text{overflow-wrap:anywhere;min-width:0;color:var(--dsw-alias-label-secondary,#61666b);flex:1;margin:0;font-size:12.5px;line-height:1.65}.e2Evdq_dismiss{flex:none;margin:-4px -6px 0 0}";
-		const tagId$7 = "@nanmicoder/dsh-skills-hub/MarketDisclaimer.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$7) + "]") === null) {
+		const css$6 = ".e2Evdq_banner{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 38%, transparent);border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 10%, transparent);align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.e2Evdq_icon{color:var(--dsw-alias-state-warn-primary,#f59e0b);flex:none;margin-top:1px}.e2Evdq_text{overflow-wrap:anywhere;min-width:0;color:var(--dsw-alias-label-secondary,#61666b);flex:1;margin:0;font-size:12.5px;line-height:1.65}.e2Evdq_dismiss{flex:none;margin:-4px -6px 0 0}";
+		const tagId$6 = "@nanmicoder/dsh-skills-hub/MarketDisclaimer.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$6) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$7;
-			tag.textContent = css$7;
+			tag.dataset.pluginCss = tagId$6;
+			tag.textContent = css$6;
 			document.head.appendChild(tag);
 		}
 		var MarketDisclaimer_module_css_default = {
@@ -22980,13 +24173,13 @@ function(property) {
 		}
 		//#endregion
 		//#region \0dsh-css:src/client/components/InstallStateBadge.module.css.mjs
-		const css$6 = ".WSc5Pa_badge{box-sizing:border-box;white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:4px;height:20px;padding:0 7px;font-size:11px;font-weight:600;line-height:18px;display:inline-flex}.WSc5Pa_success{color:var(--dsw-alias-state-success-primary,#22c55e);background:color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 12%, transparent)}.WSc5Pa_brand{color:var(--dsw-alias-state-business-primary,#4176e6);background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 12%, transparent)}.WSc5Pa_danger{color:var(--dsw-alias-state-error-primary,#ec1313);background:color-mix(in srgb, var(--dsw-alias-state-error-primary,#ec1313) 12%, transparent)}";
-		const tagId$6 = "@nanmicoder/dsh-skills-hub/InstallStateBadge.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$6) + "]") === null) {
+		const css$5 = ".WSc5Pa_badge{box-sizing:border-box;white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:4px;height:20px;padding:0 7px;font-size:11px;font-weight:600;line-height:18px;display:inline-flex}.WSc5Pa_success{color:var(--dsw-alias-state-success-primary,#22c55e);background:color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 12%, transparent)}.WSc5Pa_brand{color:var(--dsw-alias-state-business-primary,#4176e6);background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 12%, transparent)}.WSc5Pa_danger{color:var(--dsw-alias-state-error-primary,#ec1313);background:color-mix(in srgb, var(--dsw-alias-state-error-primary,#ec1313) 12%, transparent)}";
+		const tagId$5 = "@nanmicoder/dsh-skills-hub/InstallStateBadge.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$5) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$6;
-			tag.textContent = css$6;
+			tag.dataset.pluginCss = tagId$5;
+			tag.textContent = css$5;
 			document.head.appendChild(tag);
 		}
 		var InstallStateBadge_module_css_default = {
@@ -23021,113 +24214,6 @@ function(property) {
 			});
 		}
 		//#endregion
-		//#region \0dsh-css:src/client/components/SkillAvatar.module.css.mjs
-		const css$5 = ".C6tuwq_image{object-fit:cover;border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-module-platform,#f5f6f7);flex:none}.C6tuwq_letter{box-sizing:border-box;letter-spacing:-.02em;color:var(--dsw-alias-label-primary-inverted,#fff);user-select:none;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--dsw-alias-label-primary-inverted,#fff) 12%, transparent);flex:none;justify-content:center;align-items:center;font-weight:700;line-height:1;display:inline-flex;overflow:hidden}.C6tuwq_tone1{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 74%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 48%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone2{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 80%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 54%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone5{background:linear-gradient(145deg, color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 55%, var(--dsw-alias-state-success-primary,#22c55e)) 78%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 55%, var(--dsw-alias-state-success-primary,#22c55e)) 50%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone0{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 82%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 56%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone4{background:linear-gradient(145deg, color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 58%, var(--dsw-alias-state-success-primary,#22c55e)) 80%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 58%, var(--dsw-alias-state-success-primary,#22c55e)) 52%, var(--dsw-alias-label-primary,#0f1115)))}.C6tuwq_tone3{background:linear-gradient(145deg, color-mix(in srgb, var(--dsw-alias-state-idle-primary,#d4d4d4) 62%, var(--dsw-alias-label-primary,#0f1115)), color-mix(in srgb, var(--dsw-alias-state-idle-primary,#d4d4d4) 38%, var(--dsw-alias-label-primary,#0f1115)))}";
-		const tagId$5 = "@nanmicoder/dsh-skills-hub/SkillAvatar.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$5) + "]") === null) {
-			const tag = document.createElement("style");
-			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$5;
-			tag.textContent = css$5;
-			document.head.appendChild(tag);
-		}
-		var SkillAvatar_module_css_default = {
-			"image": "C6tuwq_image",
-			"letter": "C6tuwq_letter",
-			"tone0": "C6tuwq_tone0",
-			"tone1": "C6tuwq_tone1",
-			"tone2": "C6tuwq_tone2",
-			"tone3": "C6tuwq_tone3",
-			"tone4": "C6tuwq_tone4",
-			"tone5": "C6tuwq_tone5"
-		};
-		//#endregion
-		//#region lib/client/components/SkillAvatar.js
-		/** Palette slots; each maps to one `.toneN` class in the module stylesheet. */
-		const TONE_COUNT = 6;
-		/**
-		* Per-source tone family. The `source` prop is otherwise unused by a letter
-		* avatar, so it earns its place as the family selector: ClawHub entries read
-		* warm, SkillHub entries read cool, and a mixed grid still shows at a glance
-		* where a card came from.
-		*/
-		const SOURCE_TONES = {
-			clawhub: [
-				2,
-				5,
-				1
-			],
-			skillhub: [
-				0,
-				4,
-				3
-			]
-		};
-		/** Class name per tone slot, resolved once so the render path stays trivial. */
-		const TONE_CLASSES = [
-			SkillAvatar_module_css_default["tone0"] ?? "",
-			SkillAvatar_module_css_default["tone1"] ?? "",
-			SkillAvatar_module_css_default["tone2"] ?? "",
-			SkillAvatar_module_css_default["tone3"] ?? "",
-			SkillAvatar_module_css_default["tone4"] ?? "",
-			SkillAvatar_module_css_default["tone5"] ?? ""
-		];
-		/**
-		* Deterministic palette index: the same name always keeps the same identity
-		* color across sessions, pages and re-renders.
-		*/
-		function hashIndex(input) {
-			let hash = 0;
-			for (let i = 0; i < input.length; i++) hash = hash * 31 + input.charCodeAt(i) | 0;
-			return Math.abs(hash) % TONE_COUNT;
-		}
-		/**
-		* First visible character, uppercased. `Array.from` rather than `name[0]` so a
-		* CJK or astral-plane initial is not cut in half by UTF-16 indexing.
-		*/
-		function initialOf(name) {
-			const first = Array.from(name.trim())[0];
-			return first ? first.toUpperCase() : "?";
-		}
-		/**
-		* Skill icon tile.
-		*
-		* An `<img>` is rendered only for an `https:` URL: the string arrives from a
-		* third-party catalogue, and allowing `javascript:` or `data:` here would turn
-		* an upstream payload into script execution inside the DSH page.
-		*/
-		function SkillAvatar(props) {
-			const { name, source, iconUrl, size } = props;
-			const radius = Math.round(size * .24);
-			if (iconUrl !== void 0 && iconUrl.startsWith("https://")) return (0, react_jsx_runtime.jsx)("img", {
-				src: iconUrl,
-				alt: "",
-				width: size,
-				height: size,
-				loading: "lazy",
-				decoding: "async",
-				className: SkillAvatar_module_css_default.image,
-				style: {
-					width: size,
-					height: size,
-					borderRadius: radius
-				}
-			});
-			const family = SOURCE_TONES[source];
-			const tone = family[hashIndex(name) % family.length] ?? 0;
-			return (0, react_jsx_runtime.jsx)("span", {
-				"aria-hidden": "true",
-				className: `${SkillAvatar_module_css_default.letter} ${TONE_CLASSES[tone] ?? ""}`,
-				style: {
-					width: size,
-					height: size,
-					borderRadius: radius,
-					fontSize: Math.round(size * .4)
-				},
-				children: initialOf(name)
-			});
-		}
-		//#endregion
 		//#region \0dsh-css:src/client/components/SkillCard.module.css.mjs
 		const css$4 = ".cii49a_card{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);flex-direction:column;gap:10px;min-width:0;min-height:188px;padding:14px;transition:border-color .14s,background-color .14s;display:flex;position:relative}.cii49a_card:hover{border-color:var(--dsw-alias-border-l3,#00000029);background:var(--dsw-alias-interactive-bg-hover,#2631480f)}.cii49a_card:focus-within{border-color:var(--dsw-alias-state-business-primary,#4176e6)}.cii49a_open{z-index:0;border-radius:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;position:absolute;inset:0}.cii49a_open:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px}.cii49a_head,.cii49a_summary,.cii49a_tags,.cii49a_footer{z-index:1;pointer-events:none;position:relative}.cii49a_head{align-items:center;gap:12px;min-width:0;display:flex}.cii49a_headText{flex:1;min-width:0}.cii49a_titleRow{align-items:baseline;gap:8px;min-width:0;display:flex}.cii49a_title{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:15px;font-weight:700;line-height:22px;overflow:hidden}.cii49a_version{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums;flex:none;font-size:11.5px;font-weight:600}.cii49a_origin{align-items:center;gap:6px;min-width:0;margin:2px 0 0;font-size:11px;line-height:16px;display:flex}.cii49a_source{color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.06em;text-transform:uppercase;flex:none;font-weight:700}.cii49a_author{min-width:0;color:var(--dsw-alias-label-secondary,#61666b);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cii49a_summary{min-height:42px;color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:13px;line-height:21px;display:-webkit-box;overflow:hidden}.cii49a_tags{min-height:18px;color:var(--dsw-alias-label-tertiary,#81858c);flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:12px;line-height:18px;display:flex}.cii49a_tagIcon{color:var(--dsw-alias-label-tertiary,#81858c);flex:none}.cii49a_tag{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.cii49a_footer{border-top:1px solid var(--dsw-alias-border-l1,#0000000a);flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:10px;display:flex}.cii49a_badges{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;display:flex}.cii49a_stats{color:var(--dsw-alias-label-secondary,#61666b);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto;font-size:12px;line-height:18px;display:flex}.cii49a_stat{white-space:nowrap;align-items:center;gap:4px;display:inline-flex}.cii49a_install{z-index:2;pointer-events:auto;position:relative}";
 		const tagId$4 = "@nanmicoder/dsh-skills-hub/SkillCard.module.css";
@@ -23291,7 +24377,7 @@ function(property) {
 		}
 		//#endregion
 		//#region \0dsh-css:src/client/components/SourceStatusBar.module.css.mjs
-		const css$3 = ".QI7v1q_bar{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.QI7v1q_list{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.QI7v1q_item{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-1,#fff);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;height:24px;padding:0 9px;font-size:12px;line-height:18px;display:inline-flex}.QI7v1q_dot{font-size:10px;line-height:10px}.QI7v1q_name{color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}.QI7v1q_status{color:var(--dsw-alias-label-tertiary,#81858c)}.QI7v1q_refresh{flex:none}.QI7v1q_spinning{transform-origin:50%;animation:.9s linear infinite QI7v1q_skills-hub-spin}@keyframes QI7v1q_skills-hub-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.QI7v1q_spinning{animation:none}}";
+		const css$3 = ".QI7v1q_bar{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.QI7v1q_list{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.QI7v1q_item{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-1,#fff);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;height:24px;padding:0 9px;font-size:12px;line-height:18px;display:inline-flex}.QI7v1q_dot{font-size:10px;line-height:10px}.QI7v1q_name{color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}.QI7v1q_status{color:var(--dsw-alias-label-tertiary,#81858c)}.QI7v1q_snapshot{border-left:1px solid var(--dsw-alias-border-l2,#0000001a);color:var(--dsw-alias-label-secondary,#61666b);font-variant-numeric:tabular-nums;padding-left:6px}.QI7v1q_refresh{flex:none}.QI7v1q_spinning{transform-origin:50%;animation:.9s linear infinite QI7v1q_skills-hub-spin}@keyframes QI7v1q_skills-hub-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.QI7v1q_spinning{animation:none}}";
 		const tagId$3 = "@nanmicoder/dsh-skills-hub/SourceStatusBar.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 			const tag = document.createElement("style");
@@ -23308,6 +24394,7 @@ function(property) {
 			"name": "QI7v1q_name",
 			"refresh": "QI7v1q_refresh",
 			"skills-hub-spin": "QI7v1q_skills-hub-spin",
+			"snapshot": "QI7v1q_snapshot",
 			"spinning": "QI7v1q_spinning",
 			"status": "QI7v1q_status"
 		};
@@ -23332,6 +24419,10 @@ function(property) {
 		* The upstream error string rides the pill's `title` instead of being printed:
 		* a 720px panel has no room for a stack trace next to two source names, and an
 		* operator who needs it can hover.
+		*
+		* The snapshot age *is* printed: a healthy source can still be answering from a
+		* cache, and a reader deciding whether to install third-party code is entitled
+		* to see that the page in front of them was read minutes ago rather than now.
 		*/
 		function SourceStatusBar(props) {
 			const { sources, onRefresh, refreshing } = props;
@@ -23342,6 +24433,7 @@ function(property) {
 					className: SourceStatusBar_module_css_default.list,
 					children: SOURCES.map((source) => {
 						const info = sources[source];
+						const snapshotAt = info.fromCache === true ? info.fetchedAt : void 0;
 						return (0, react_jsx_runtime.jsxs)("li", {
 							className: SourceStatusBar_module_css_default.item,
 							title: info.error,
@@ -23357,18 +24449,23 @@ function(property) {
 								(0, react_jsx_runtime.jsx)("span", {
 									className: SourceStatusBar_module_css_default.status,
 									children: t(`sourceStatus.${info.status}`)
+								}),
+								snapshotAt !== void 0 && (0, react_jsx_runtime.jsx)("span", {
+									className: SourceStatusBar_module_css_default.snapshot,
+									title: formatStamp(snapshotAt),
+									children: t("snapshotAge", { age: formatAge(t, snapshotAt) })
 								})
 							]
 						}, source);
 					})
 				}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
-					label: t("retry"),
+					label: t("refreshNow"),
 					children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 						variant: "ghost",
 						size: "sm",
 						className: SourceStatusBar_module_css_default.refresh,
 						disabled: refreshing,
-						"aria-label": t("retry"),
+						"aria-label": t("refreshNow"),
 						onClick: onRefresh,
 						icon: (0, react_jsx_runtime.jsx)(RefreshIcon, {
 							size: 16,
@@ -23420,6 +24517,27 @@ function(property) {
 		//#endregion
 		//#region lib/client/components/MarketHome.js
 		/**
+		* How far ahead of the end of the list the next page is fetched.
+		*
+		* The catalogue scrolls inside the host's dock rather than the document, and an
+		* observer whose root is the viewport is clipped by that dock: `rootMargin` on
+		* the viewport is dead weight there (measured: the same sentinel reports
+		* "not intersecting" 412px below the fold with a viewport root, and
+		* "intersecting" with the dock as root). The margin therefore only means
+		* anything once the observer is given the real scroll container.
+		*/
+		const PREFETCH_MARGIN = "900px 0px";
+		/** Nearest scrollable ancestor, or `null` when the list scrolls with the document. */
+		function scrollContainerOf(element) {
+			let node = element.parentElement;
+			while (node !== null && node !== document.body) {
+				const overflowY = getComputedStyle(node).overflowY;
+				if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) return node;
+				node = node.parentElement;
+			}
+			return null;
+		}
+		/**
 		* Market catalogue page.
 		*
 		* Presentational by contract: every interaction below is a call on the
@@ -23430,16 +24548,31 @@ function(property) {
 			const { state, controller } = props;
 			const t = useT();
 			const sentinelRef = (0, react.useRef)(null);
+			const [scrolled, setScrolled] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				if (scrolled) return;
+				const mark = () => setScrolled(true);
+				document.addEventListener("scroll", mark, {
+					capture: true,
+					passive: true,
+					once: true
+				});
+				return () => document.removeEventListener("scroll", mark, { capture: true });
+			}, [scrolled]);
 			(0, react.useEffect)(() => {
 				const sentinel = sentinelRef.current;
-				if (sentinel === null || state.nextCursor === null || state.loading || state.loadingMore || state.error !== null) return;
+				if (sentinel === null || !scrolled || state.nextCursor === null || state.loading || state.loadingMore || state.error !== null) return;
 				const observer = new IntersectionObserver((entries) => {
 					if (entries.some((entry) => entry.isIntersecting)) controller.loadMore();
-				}, { rootMargin: "240px 0px" });
+				}, {
+					root: scrollContainerOf(sentinel),
+					rootMargin: PREFETCH_MARGIN
+				});
 				observer.observe(sentinel);
 				return () => observer.disconnect();
 			}, [
 				controller,
+				scrolled,
 				state.nextCursor,
 				state.loading,
 				state.loadingMore,
@@ -23488,7 +24621,7 @@ function(property) {
 							children: t("count", { count: state.items.length })
 						}), (0, react_jsx_runtime.jsx)(SourceStatusBar, {
 							sources: state.sources,
-							onRefresh: () => void controller.refresh(),
+							onRefresh: () => void controller.refresh({ force: true }),
 							refreshing: state.loading
 						})]
 					}),
@@ -23559,171 +24692,60 @@ function(property) {
 										className: MarketHome_module_css_default.emptyText,
 										children: narrowed ? t("emptySearchHint") : t("emptyHint")
 									})
-								]
-							}),
-							hasItems && (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react_jsx_runtime.jsx)("div", {
-								className: MarketHome_module_css_default.grid,
-								children: state.items.map((skill) => (0, react_jsx_runtime.jsx)(SkillCard, {
-									skill,
-									installing: state.installingIds.has(skill.id),
-									onOpen: (id) => void controller.openDetail(id),
-									onInstall: (id) => controller.requestInstall(id)
-								}, skill.id))
-							}) }),
-							state.nextCursor !== null && (0, react_jsx_runtime.jsx)("div", {
-								ref: sentinelRef,
-								className: MarketHome_module_css_default.more,
-								children: state.loadingMore && (0, react_jsx_runtime.jsxs)("p", {
-									className: MarketHome_module_css_default.loading,
-									role: "status",
-									"aria-live": "polite",
-									children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
-										state: "ongoing",
-										size: 16
-									}), t("loadingMore")]
-								})
-							})
-						]
-					})
-				]
-			});
-		}
-		//#endregion
-		//#region \0dsh-css:src/client/components/FrontmatterPanel.module.css.mjs
-		const css$1 = ".hR0bda_panel{border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-layer-1,#fff);flex-direction:column;min-width:0;display:flex;overflow:hidden}.hR0bda_head{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);background:var(--dsw-alias-bg-module-platform,#f5f6f7);align-items:center;gap:8px;padding:8px 12px;display:flex}.hR0bda_title{min-width:0;color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.08em;text-transform:uppercase;flex:1;margin:0;font-size:10.5px;font-weight:600}.hR0bda_count{color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums;font-size:11px}.hR0bda_list{max-height:320px;margin:0;padding:0;overflow-y:auto}.hR0bda_row{border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);flex-direction:column;gap:3px;min-width:0;padding:8px 12px;display:flex}.hR0bda_row:last-child{border-bottom:none}.hR0bda_key{overflow-wrap:anywhere;min-width:0;color:var(--dsw-alias-label-tertiary,#81858c);letter-spacing:.02em;font-size:10.5px;font-weight:600}.hR0bda_value{min-width:0;color:var(--dsw-alias-label-primary,#0f1115);margin:0;font-size:12.5px;line-height:19px}.hR0bda_text{overflow-wrap:anywhere}.hR0bda_chips{flex-wrap:wrap;gap:4px;display:flex}.hR0bda_chip{background:var(--dsw-alias-bg-module-platform,#f5f6f7);max-width:100%;color:var(--dsw-alias-label-secondary,#61666b);overflow-wrap:anywhere;border-radius:999px;padding:1px 7px;font-size:11px;line-height:17px;display:inline-flex}.hR0bda_chipOn{background:color-mix(in srgb, var(--dsw-alias-state-success-primary,#22c55e) 12%, transparent);color:var(--dsw-alias-state-success-primary,#22c55e)}.hR0bda_block{border-radius:var(--dsw-radius-xs,4px);background:var(--dsw-alias-bg-module-platform,#f5f6f7);max-height:200px;color:var(--dsw-alias-label-secondary,#61666b);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:18px;overflow:auto}";
-		const tagId$1 = "@nanmicoder/dsh-skills-hub/FrontmatterPanel.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
-			const tag = document.createElement("style");
-			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
-			tag.dataset.pluginCss = tagId$1;
-			tag.textContent = css$1;
-			document.head.appendChild(tag);
-		}
-		var FrontmatterPanel_module_css_default = {
-			"block": "hR0bda_block",
-			"chip": "hR0bda_chip",
-			"chipOn": "hR0bda_chipOn",
-			"chips": "hR0bda_chips",
-			"count": "hR0bda_count",
-			"head": "hR0bda_head",
-			"key": "hR0bda_key",
-			"list": "hR0bda_list",
-			"panel": "hR0bda_panel",
-			"row": "hR0bda_row",
-			"text": "hR0bda_text",
-			"title": "hR0bda_title",
-			"value": "hR0bda_value"
-		};
-		//#endregion
-		//#region lib/client/components/FrontmatterPanel.js
-		/** Longest JSON we are willing to render inline, in characters. */
-		const MAX_JSON_LENGTH = 600;
-		/** Narrow an `unknown` frontmatter value to a plain object (arrays excluded). */
-		function isRecord(value) {
-			return typeof value === "object" && value !== null && !Array.isArray(value);
-		}
-		/** Scalar rendering for anything that is not an array, object or block string. */
-		function scalarText(value) {
-			if (value === null || value === void 0) return "—";
-			if (typeof value === "string") return value;
-			if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
-			if (typeof value === "symbol") return value.description ?? "symbol";
-			if (typeof value === "function") return "fn";
-			return "—";
-		}
-		/** Objects go out as JSON; a pathological value must not fill the whole rail. */
-		function jsonText(value) {
-			try {
-				const text = JSON.stringify(value, null, 2);
-				if (text === void 0) return "—";
-				return text.length > MAX_JSON_LENGTH ? `${text.slice(0, MAX_JSON_LENGTH)}…` : text;
-			} catch {
-				return "—";
-			}
-		}
-		/** One value cell; the shape decides between a chip row, a code block and text. */
-		function ValueView({ value }) {
-			if (Array.isArray(value)) {
-				if (value.length === 0) return (0, react_jsx_runtime.jsx)("span", {
-					className: FrontmatterPanel_module_css_default.text,
-					children: "—"
-				});
-				return (0, react_jsx_runtime.jsx)("span", {
-					className: FrontmatterPanel_module_css_default.chips,
-					children: value.map((item, index) => (0, react_jsx_runtime.jsx)("span", {
-						className: FrontmatterPanel_module_css_default.chip,
-						children: scalarText(item)
-					}, `${String(index)}`))
-				});
-			}
-			if (typeof value === "boolean") return (0, react_jsx_runtime.jsx)("span", {
-				className: `${FrontmatterPanel_module_css_default.chip} ${value ? FrontmatterPanel_module_css_default.chipOn : ""}`,
-				children: value ? "true" : "false"
-			});
-			if (typeof value === "string" && value.includes("\n")) return (0, react_jsx_runtime.jsx)("pre", {
-				className: FrontmatterPanel_module_css_default.block,
-				children: value
-			});
-			if (isRecord(value)) return (0, react_jsx_runtime.jsx)("pre", {
-				className: FrontmatterPanel_module_css_default.block,
-				children: jsonText(value)
-			});
-			return (0, react_jsx_runtime.jsx)("span", {
-				className: FrontmatterPanel_module_css_default.text,
-				children: scalarText(value)
+								]
+							}),
+							hasItems && (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react_jsx_runtime.jsx)("div", {
+								className: MarketHome_module_css_default.grid,
+								children: state.items.map((skill) => (0, react_jsx_runtime.jsx)(SkillCard, {
+									skill,
+									installing: state.installingIds.has(skill.id),
+									onOpen: (id) => void controller.openDetail(id),
+									onInstall: (id) => controller.requestInstall(id)
+								}, skill.id))
+							}) }),
+							state.nextCursor !== null && (0, react_jsx_runtime.jsx)("div", {
+								ref: sentinelRef,
+								className: MarketHome_module_css_default.more,
+								children: state.loadingMore && (0, react_jsx_runtime.jsxs)("p", {
+									className: MarketHome_module_css_default.loading,
+									role: "status",
+									"aria-live": "polite",
+									children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+										state: "ongoing",
+										size: 16
+									}), t("loadingMore")]
+								})
+							})
+						]
+					})
+				]
 			});
 		}
-		/**
-		* Structured view of a SKILL.md frontmatter block.
-		*
-		* SKILL.md metadata is data, not prose: pushing it through the markdown
-		* renderer turns a dozen short fields into a wall of setext headings. It is
-		* also reference material rather than the document itself, so it renders as a
-		* label/value list under its own heading, with the list itself scrolling once a
-		* skill declares more than a screenful of keys.
-		*
-		* `data` is typed `unknown`-valued on purpose — it is upstream YAML, and every
-		* cell is derived defensively rather than trusted.
-		*/
-		function FrontmatterPanel(props) {
-			const { data } = props;
-			const t = useT();
-			const entries = Object.entries(data);
-			if (entries.length === 0) return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
-			return (0, react_jsx_runtime.jsxs)("section", {
-				className: FrontmatterPanel_module_css_default.panel,
-				children: [(0, react_jsx_runtime.jsxs)("div", {
-					className: FrontmatterPanel_module_css_default.head,
-					children: [(0, react_jsx_runtime.jsx)("h3", {
-						className: FrontmatterPanel_module_css_default.title,
-						children: t("frontmatter")
-					}), (0, react_jsx_runtime.jsx)("span", {
-						className: FrontmatterPanel_module_css_default.count,
-						children: entries.length
-					})]
-				}), (0, react_jsx_runtime.jsx)("dl", {
-					className: FrontmatterPanel_module_css_default.list,
-					children: entries.map(([key, value]) => (0, react_jsx_runtime.jsxs)("div", {
-						className: FrontmatterPanel_module_css_default.row,
-						children: [(0, react_jsx_runtime.jsx)("dt", {
-							className: FrontmatterPanel_module_css_default.key,
-							title: key,
-							children: key
-						}), (0, react_jsx_runtime.jsx)("dd", {
-							className: FrontmatterPanel_module_css_default.value,
-							children: (0, react_jsx_runtime.jsx)(ValueView, { value })
-						})]
-					}, key))
-				})]
-			});
+		//#endregion
+		//#region \0dsh-css:src/client/components/SkillDetailView.module.css.mjs
+		const css$1 = ".xO9T5G_warning{border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-error-primary,#ec1313) 10%, transparent);color:var(--dsw-alias-label-primary,#0f1115);align-items:center;gap:8px;margin:0;padding:8px 12px;font-size:12.5px;line-height:19px;display:flex}.xO9T5G_warningIcon{color:var(--dsw-alias-state-error-primary,#ec1313);flex:none}.xO9T5G_reports{border-top:1px solid var(--dsw-alias-border-l1,#0000000a);border-bottom:1px solid var(--dsw-alias-border-l1,#0000000a);flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 2px;font-size:12.5px;line-height:19px;display:flex}.xO9T5G_reportsLabel{color:var(--dsw-alias-label-tertiary,#81858c)}.xO9T5G_report{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:inline-flex}.xO9T5G_reportVendor{color:var(--dsw-alias-label-primary,#0f1115);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600}.xO9T5G_reportStatus{color:var(--dsw-alias-label-secondary,#61666b)}.xO9T5G_reportLink{background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 12%, transparent);color:var(--dsw-alias-state-business-primary,#4176e6);border-radius:999px;align-items:center;padding:2px 9px;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.xO9T5G_reportLink:hover{background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 20%, transparent)}.xO9T5G_reportLink:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px}.xO9T5G_snapshot{border-radius:var(--dsw-radius-sm,8px);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary,#f59e0b) 12%, transparent);color:var(--dsw-alias-label-primary,#0f1115);flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:8px 12px;font-size:12.5px;line-height:19px;display:flex}.xO9T5G_snapshotAction{border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#0f1115);font:inherit;cursor:pointer;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}.xO9T5G_snapshotAction:disabled{opacity:.6;cursor:default}.xO9T5G_snapshotAction:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px}";
+		const tagId$1 = "@nanmicoder/dsh-skills-hub/SkillDetailView.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@nanmicoder/dsh-skills-hub";
+			tag.dataset.pluginCss = tagId$1;
+			tag.textContent = css$1;
+			document.head.appendChild(tag);
 		}
+		var SkillDetailView_module_css_default = {
+			"report": "xO9T5G_report",
+			"reportLink": "xO9T5G_reportLink",
+			"reportStatus": "xO9T5G_reportStatus",
+			"reportVendor": "xO9T5G_reportVendor",
+			"reports": "xO9T5G_reports",
+			"reportsLabel": "xO9T5G_reportsLabel",
+			"snapshot": "xO9T5G_snapshot",
+			"snapshotAction": "xO9T5G_snapshotAction",
+			"warning": "xO9T5G_warning",
+			"warningIcon": "xO9T5G_warningIcon"
+		};
 		//#endregion
 		//#region lib/client/components/SkillDetailView.js
-		/** How long the copy button stays in its confirmed state. */
-		const COPIED_RESET_MS = 2e3;
-		/** Stable DOM ids for the tab list and its panels; one detail view is mounted at a time. */
-		const TAB_ID = "skills-hub-detail-tab";
-		const PANEL_ID$1 = "skills-hub-detail-panel";
 		/** Compact counts, matching the catalogue cards. */
 		function formatCount(value) {
 			if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
@@ -23743,25 +24765,14 @@ function(property) {
 		function safeReportUrl(url) {
 			return url !== void 0 && /^https?:\/\//i.test(url) ? url : void 0;
 		}
-		/** One label/value row of the right-hand facts rail. */
-		function Fact(props) {
-			return (0, react_jsx_runtime.jsxs)("div", {
-				className: SkillDetailView_module_css_default.fact,
-				children: [(0, react_jsx_runtime.jsx)("dt", {
-					className: SkillDetailView_module_css_default.factLabel,
-					children: props.label
-				}), (0, react_jsx_runtime.jsx)("dd", {
-					className: SkillDetailView_module_css_default.factValue,
-					children: props.children
-				})]
-			});
-		}
 		/**
-		* Skill detail page.
+		* Market skill detail page.
 		*
 		* Like the home page this component owns no data: the tab, the selected file
 		* and the file contents all live in `MarketState`, so switching tabs or
-		* re-opening a skill does not lose its place.
+		* re-opening a skill does not lose its place. The reading surface itself — back
+		* affordance, header, tabs, facts rail — is `SkillDetailShell`, which the local
+		* installed page uses too.
 		*
 		* The bundled GFM renderer handles catalogue Markdown without relying on a
 		* host renderer delegate. Raw HTML is disabled and URLs use its safe default.
@@ -23769,101 +24780,39 @@ function(property) {
 		function SkillDetailView(props) {
 			const { detail, state, controller } = props;
 			const t = useT();
-			const headingRef = (0, react.useRef)(null);
-			const [copied, setCopied] = (0, react.useState)(false);
-			const resetTimer = (0, react.useRef)(void 0);
-			(0, react.useEffect)(() => {
-				headingRef.current?.focus();
-			}, [detail.id]);
-			(0, react.useEffect)(() => () => {
-				if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
-			}, []);
-			const copyFile = (0, react.useCallback)(() => {
-				const content = state.file?.content;
-				if (content === void 0) return;
-				(0, _deepseek_ai_dsh_client_ui_primitives.writeClipboard)(content).then((ok) => {
-					if (!ok) return;
-					setCopied(true);
-					if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
-					resetTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
-				});
-			}, [state.file]);
-			const tabs = [{
-				value: "overview",
-				label: t("overview"),
-				id: `${TAB_ID}-overview`,
-				panelId: `${PANEL_ID$1}-overview`
-			}, {
-				value: "files",
-				label: `${t("files")} (${detail.files.length})`,
-				id: `${TAB_ID}-files`,
-				panelId: `${PANEL_ID$1}-files`
-			}];
 			const installationInFlight = state.installingIds.has(detail.id);
 			const author = detail.author.displayName ?? detail.author.handle;
-			const file = state.file;
-			const selectedPath = file?.path ?? null;
-			const selectFile = (meta) => {
-				if (meta.path === selectedPath) return;
-				controller.selectFile(meta.path);
-			};
-			return (0, react_jsx_runtime.jsxs)("div", {
-				className: SkillDetailView_module_css_default.detail,
-				children: [
-					(0, react_jsx_runtime.jsx)("div", {
-						className: SkillDetailView_module_css_default.back,
-						children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-							variant: "ghost",
-							size: "sm",
-							icon: (0, react_jsx_runtime.jsx)(ArrowLeftIcon, { size: 16 }),
-							onClick: () => controller.closeDetail(),
-							children: t("back")
-						})
-					}),
-					(0, react_jsx_runtime.jsxs)("header", {
-						className: SkillDetailView_module_css_default.header,
-						children: [(0, react_jsx_runtime.jsx)(SkillAvatar, {
-							name: detail.name,
-							source: detail.source,
-							iconUrl: detail.iconUrl,
-							size: 84
-						}), (0, react_jsx_runtime.jsxs)("div", {
-							className: SkillDetailView_module_css_default.headerText,
-							children: [
-								(0, react_jsx_runtime.jsxs)("p", {
-									className: SkillDetailView_module_css_default.eyebrow,
-									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: SkillDetailView_module_css_default.source,
-										children: t(`source.${detail.source}`)
-									}), detail.version !== void 0 && detail.version !== "" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
-										"aria-hidden": "true",
-										children: "·"
-									}), (0, react_jsx_runtime.jsxs)("span", {
-										className: SkillDetailView_module_css_default.version,
-										children: ["v", detail.version]
-									})] })]
-								}),
-								(0, react_jsx_runtime.jsx)("h1", {
-									ref: headingRef,
-									tabIndex: -1,
-									className: SkillDetailView_module_css_default.name,
-									children: detail.name
-								}),
-								(0, react_jsx_runtime.jsxs)("div", {
-									className: SkillDetailView_module_css_default.badges,
-									children: [(0, react_jsx_runtime.jsx)(SecurityBadge, {
-										status: detail.securityStatus,
-										reports: detail.securityReports
-									}), (0, react_jsx_runtime.jsx)(InstallStateBadge, { state: detail.installState })]
-								}),
-								detail.summary !== "" && (0, react_jsx_runtime.jsx)("p", {
-									className: SkillDetailView_module_css_default.summary,
-									children: detail.summary
-								})
-							]
-						})]
-					}),
-					detail.installState === "not-installable" && detail.notInstallableReason !== void 0 && (0, react_jsx_runtime.jsxs)("p", {
+			const reports = detail.securityReports ?? [];
+			const snapshotAt = state.detailStatus?.fromCache === true ? state.detailStatus.fetchedAt : void 0;
+			const notInstallable = detail.installState === "not-installable" && detail.notInstallableReason !== void 0;
+			return (0, react_jsx_runtime.jsx)(SkillDetailShell, {
+				focusKey: detail.id,
+				onBack: () => controller.closeDetail(),
+				backLabel: t("back"),
+				avatar: (0, react_jsx_runtime.jsx)(SkillAvatar, {
+					name: detail.name,
+					source: detail.source,
+					iconUrl: detail.iconUrl,
+					size: 84
+				}),
+				eyebrow: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
+					className: detailStyles.source,
+					children: t(`source.${detail.source}`)
+				}), detail.version !== void 0 && detail.version !== "" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: "·"
+				}), (0, react_jsx_runtime.jsxs)("span", {
+					className: detailStyles.version,
+					children: ["v", detail.version]
+				})] })] }),
+				name: detail.name,
+				badges: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(SecurityBadge, {
+					status: detail.securityStatus,
+					reports: detail.securityReports
+				}), (0, react_jsx_runtime.jsx)(InstallStateBadge, { state: detail.installState })] }),
+				summary: detail.summary,
+				notice: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					notInstallable && (0, react_jsx_runtime.jsxs)("p", {
 						className: SkillDetailView_module_css_default.warning,
 						role: "note",
 						title: detail.notInstallableReason,
@@ -23872,12 +24821,12 @@ function(property) {
 							className: SkillDetailView_module_css_default.warningIcon
 						}), (0, react_jsx_runtime.jsx)("span", { children: t("notInstallable") })]
 					}),
-					detail.securityReports !== void 0 && detail.securityReports.length > 0 && (0, react_jsx_runtime.jsxs)("div", {
+					reports.length > 0 && (0, react_jsx_runtime.jsxs)("div", {
 						className: SkillDetailView_module_css_default.reports,
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: SkillDetailView_module_css_default.reportsLabel,
 							children: t("security")
-						}), detail.securityReports.map((report) => {
+						}), reports.map((report) => {
 							const url = safeReportUrl(report.reportUrl);
 							return (0, react_jsx_runtime.jsxs)("span", {
 								className: SkillDetailView_module_css_default.report,
@@ -23901,245 +24850,96 @@ function(property) {
 							}, `${report.vendor}:${report.status}`);
 						})]
 					}),
-					(0, react_jsx_runtime.jsxs)("div", {
-						className: SkillDetailView_module_css_default.columns,
-						children: [(0, react_jsx_runtime.jsxs)("main", {
-							className: SkillDetailView_module_css_default.main,
-							children: [
-								(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
-									items: tabs,
-									value: state.activeTab,
-									onChange: (value) => controller.setTab(value),
-									label: detail.name
-								}),
-								state.activeTab === "overview" && (0, react_jsx_runtime.jsxs)("section", {
-									className: SkillDetailView_module_css_default.panel,
-									id: `${PANEL_ID$1}-overview`,
-									role: "tabpanel",
-									"aria-labelledby": `${TAB_ID}-overview`,
-									children: [detail.description.trim() !== "" ? (0, react_jsx_runtime.jsx)(MarkdownView, { content: detail.description }) : detail.summary !== "" && (0, react_jsx_runtime.jsx)("p", {
-										className: SkillDetailView_module_css_default.summary,
-										children: detail.summary
-									}), detail.descriptionFrontmatter !== void 0 && Object.keys(detail.descriptionFrontmatter).length > 0 && (0, react_jsx_runtime.jsx)("div", {
-										className: SkillDetailView_module_css_default.frontmatter,
-										children: (0, react_jsx_runtime.jsx)(FrontmatterPanel, { data: detail.descriptionFrontmatter })
-									})]
-								}),
-								state.activeTab === "files" && (0, react_jsx_runtime.jsx)("section", {
-									className: SkillDetailView_module_css_default.panel,
-									id: `${PANEL_ID$1}-files`,
-									role: "tabpanel",
-									"aria-labelledby": `${TAB_ID}-files`,
-									children: detail.files.length === 0 ? (0, react_jsx_runtime.jsx)("p", {
-										className: SkillDetailView_module_css_default.muted,
-										children: t("noFiles")
-									}) : (0, react_jsx_runtime.jsxs)("div", {
-										className: SkillDetailView_module_css_default.files,
-										children: [(0, react_jsx_runtime.jsx)("ul", {
-											className: SkillDetailView_module_css_default.fileList,
-											children: detail.files.map((meta) => {
-												const active = meta.path === selectedPath;
-												return (0, react_jsx_runtime.jsx)("li", { children: (0, react_jsx_runtime.jsxs)("button", {
-													type: "button",
-													className: `${SkillDetailView_module_css_default.fileItem} ${active ? SkillDetailView_module_css_default.fileItemActive : ""}`,
-													"aria-current": active ? "true" : void 0,
-													onClick: () => selectFile(meta),
-													children: [
-														(0, react_jsx_runtime.jsx)(FileIcon, {
-															size: 14,
-															className: SkillDetailView_module_css_default.fileIcon
-														}),
-														(0, react_jsx_runtime.jsx)("span", {
-															className: SkillDetailView_module_css_default.filePath,
-															title: meta.path,
-															children: meta.path
-														}),
-														meta.tooBig && (0, react_jsx_runtime.jsx)("span", {
-															className: SkillDetailView_module_css_default.fileFlag,
-															children: t("fileTooLarge")
-														}),
-														(0, react_jsx_runtime.jsxs)("span", {
-															className: SkillDetailView_module_css_default.fileMeta,
-															children: [
-																(0, _deepseek_ai_dsh_client_ui_primitives.fileSizeText)(meta.size),
-																" · ",
-																meta.language
-															]
-														})
-													]
-												}) }, meta.path);
-											})
-										}), (0, react_jsx_runtime.jsx)("div", {
-											className: SkillDetailView_module_css_default.fileView,
-											children: file === null ? state.fileLoading ? (0, react_jsx_runtime.jsxs)("p", {
-												className: SkillDetailView_module_css_default.muted,
-												role: "status",
-												"aria-live": "polite",
-												children: [
-													(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
-														state: "ongoing",
-														size: 14
-													}),
-													" ",
-													t("loading")
-												]
-											}) : null : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-												(0, react_jsx_runtime.jsxs)("div", {
-													className: SkillDetailView_module_css_default.fileBar,
-													children: [(0, react_jsx_runtime.jsx)("span", {
-														className: SkillDetailView_module_css_default.fileBarPath,
-														title: file.path,
-														children: file.path
-													}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-														variant: "outline",
-														size: "sm",
-														className: SkillDetailView_module_css_default.copy,
-														"aria-label": copied ? t("copied") : t("copy"),
-														onClick: copyFile,
-														icon: copied ? (0, react_jsx_runtime.jsx)(CheckIcon, { size: 14 }) : (0, react_jsx_runtime.jsx)(CopyIcon, { size: 14 }),
-														children: copied ? t("copied") : t("copy")
-													})]
-												}),
-												file.truncated && (0, react_jsx_runtime.jsx)("p", {
-													className: SkillDetailView_module_css_default.muted,
-													children: t("fileTooLarge")
-												}),
-												(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.CodeBlock, {
-													code: file.content,
-													lang: file.language,
-													showHeader: false,
-													lineNumbers: true,
-													copyLabel: t("copy"),
-													copiedLabel: t("copied")
-												}),
-												(0, react_jsx_runtime.jsx)("p", {
-													className: SkillDetailView_module_css_default.srOnly,
-													role: "status",
-													"aria-live": "polite",
-													children: copied ? t("copied") : ""
-												})
-											] })
-										})]
-									})
-								})
-							]
-						}), (0, react_jsx_runtime.jsx)("aside", {
-							className: SkillDetailView_module_css_default.rail,
-							children: (0, react_jsx_runtime.jsxs)("div", {
-								className: SkillDetailView_module_css_default.railCard,
-								children: [(0, react_jsx_runtime.jsxs)("div", {
-									className: SkillDetailView_module_css_default.railAction,
-									children: [
-										detail.installState === "installable" && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-											variant: "primary",
-											size: "md",
-											disabled: installationInFlight,
-											icon: (0, react_jsx_runtime.jsx)(DownloadIcon, { size: 16 }),
-											onClick: () => controller.requestInstall(detail.id),
-											children: installationInFlight ? t("installing") : t("install")
-										}),
-										detail.installState === "installed" && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-											variant: "outline",
-											size: "md",
-											disabled: installationInFlight,
-											title: t("uninstallConfirm"),
-											icon: (0, react_jsx_runtime.jsx)(TrashIcon, { size: 16 }),
-											onClick: () => void controller.uninstall(detail.id),
-											children: t("uninstall")
-										}),
-										detail.installState === "not-installable" && (0, react_jsx_runtime.jsx)("p", {
-											className: SkillDetailView_module_css_default.muted,
-											children: t("notInstallable")
-										})
-									]
-								}), (0, react_jsx_runtime.jsxs)("dl", {
-									className: SkillDetailView_module_css_default.facts,
-									children: [
-										(0, react_jsx_runtime.jsx)(Fact, {
-											label: t("author"),
-											children: author
-										}),
-										(0, react_jsx_runtime.jsx)(Fact, {
-											label: t("downloads"),
-											children: formatCount(detail.stats.downloads)
-										}),
-										detail.stats.installs !== void 0 && (0, react_jsx_runtime.jsx)(Fact, {
-											label: t("installs"),
-											children: formatCount(detail.stats.installs)
-										}),
-										detail.stats.stars !== void 0 && (0, react_jsx_runtime.jsx)(Fact, {
-											label: t("stars"),
-											children: formatCount(detail.stats.stars)
-										}),
-										detail.updatedAt !== void 0 && (0, react_jsx_runtime.jsx)(Fact, {
-											label: t("updated"),
-											children: formatDate(detail.updatedAt)
-										}),
-										detail.license !== void 0 && detail.license !== "" && (0, react_jsx_runtime.jsx)(Fact, {
-											label: t("license"),
-											children: detail.license
-										}),
-										detail.version !== void 0 && detail.version !== "" && (0, react_jsx_runtime.jsxs)(Fact, {
-											label: t("version"),
-											children: ["v", detail.version]
-										})
-									]
-								})]
-							})
-						})]
-					})
-				]
-			});
-		}
-		/** Keeps the detail layout stable while its network request is in flight. */
-		function SkillDetailSkeleton({ onBack }) {
-			const t = useT();
-			return (0, react_jsx_runtime.jsxs)("div", {
-				className: SkillDetailView_module_css_default.detail,
-				"aria-busy": "true",
-				children: [(0, react_jsx_runtime.jsx)("div", {
-					className: SkillDetailView_module_css_default.back,
-					children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						variant: "ghost",
-						size: "sm",
-						icon: (0, react_jsx_runtime.jsx)(ArrowLeftIcon, { size: 16 }),
-						onClick: onBack,
-						children: t("back")
-					})
-				}), (0, react_jsx_runtime.jsx)("div", {
-					role: "status",
-					"aria-label": t("loading"),
-					children: (0, react_jsx_runtime.jsxs)("div", {
-						"aria-hidden": "true",
-						children: [(0, react_jsx_runtime.jsxs)("div", {
-							className: SkillDetailView_module_css_default.header,
-							children: [(0, react_jsx_runtime.jsx)("span", { className: SkillDetailView_module_css_default.skeletonAvatar }), (0, react_jsx_runtime.jsxs)("div", {
-								className: SkillDetailView_module_css_default.headerText,
-								children: [
-									(0, react_jsx_runtime.jsx)("span", { className: SkillDetailView_module_css_default.skeletonTitle }),
-									(0, react_jsx_runtime.jsx)("span", { className: SkillDetailView_module_css_default.skeletonLine }),
-									(0, react_jsx_runtime.jsx)("span", { className: SkillDetailView_module_css_default.skeletonLine })
-								]
-							})]
-						}), (0, react_jsx_runtime.jsxs)("div", {
-							className: SkillDetailView_module_css_default.columns,
-							style: { marginTop: 24 },
-							children: [(0, react_jsx_runtime.jsx)("div", {
-								className: SkillDetailView_module_css_default.main,
-								children: (0, react_jsx_runtime.jsx)("div", {
-									className: SkillDetailView_module_css_default.panel,
-									children: Array.from({ length: 10 }, (_, index) => (0, react_jsx_runtime.jsx)("span", { className: SkillDetailView_module_css_default.skeletonLine }, index))
-								})
-							}), (0, react_jsx_runtime.jsx)("div", {
-								className: SkillDetailView_module_css_default.rail,
-								children: (0, react_jsx_runtime.jsx)("div", {
-									className: SkillDetailView_module_css_default.panel,
-									children: Array.from({ length: 5 }, (_, index) => (0, react_jsx_runtime.jsx)("span", { className: SkillDetailView_module_css_default.skeletonLine }, index))
-								})
-							})]
+					snapshotAt !== void 0 && (0, react_jsx_runtime.jsxs)("p", {
+						className: SkillDetailView_module_css_default.snapshot,
+						role: "note",
+						children: [(0, react_jsx_runtime.jsx)("span", {
+							title: formatStamp(snapshotAt),
+							children: t("detailSnapshot", { age: formatAge(t, snapshotAt) })
+						}), (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: SkillDetailView_module_css_default.snapshotAction,
+							disabled: state.detailLoading,
+							onClick: () => void controller.openDetail(detail.id, { refresh: true }),
+							children: t("refreshSnapshot")
 						})]
 					})
-				})]
+				] }),
+				overviewLabel: t("overview"),
+				filesLabel: `${t("files")} (${detail.files.length})`,
+				activeTab: state.activeTab,
+				onTabChange: (tab) => controller.setTab(tab),
+				overview: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [detail.description.trim() !== "" ? (0, react_jsx_runtime.jsx)(MarkdownView, { content: detail.description }) : detail.summary !== "" && (0, react_jsx_runtime.jsx)("p", {
+					className: detailStyles.summary,
+					children: detail.summary
+				}), detail.descriptionFrontmatter !== void 0 && Object.keys(detail.descriptionFrontmatter).length > 0 && (0, react_jsx_runtime.jsx)("div", {
+					className: detailStyles.frontmatter,
+					children: (0, react_jsx_runtime.jsx)(FrontmatterPanel, { data: detail.descriptionFrontmatter })
+				})] }),
+				files: (0, react_jsx_runtime.jsx)(SkillFiles, {
+					files: detail.files,
+					selected: state.file,
+					loading: state.fileLoading,
+					onSelect: (path) => void controller.selectFile(path)
+				}),
+				rail: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)("div", {
+					className: detailStyles.railAction,
+					children: [
+						detail.installState === "installable" && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "primary",
+							size: "md",
+							disabled: installationInFlight,
+							icon: (0, react_jsx_runtime.jsx)(DownloadIcon, { size: 16 }),
+							onClick: () => controller.requestInstall(detail.id),
+							children: installationInFlight ? t("installing") : t("install")
+						}),
+						detail.installState === "installed" && (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "md",
+							disabled: installationInFlight,
+							title: t("uninstallConfirm"),
+							icon: (0, react_jsx_runtime.jsx)(TrashIcon, { size: 16 }),
+							onClick: () => void controller.uninstall(detail.id),
+							children: t("uninstall")
+						}),
+						detail.installState === "not-installable" && (0, react_jsx_runtime.jsx)("p", {
+							className: detailStyles.muted,
+							children: t("notInstallable")
+						})
+					]
+				}), (0, react_jsx_runtime.jsxs)("dl", {
+					className: detailStyles.facts,
+					children: [
+						(0, react_jsx_runtime.jsx)(Fact, {
+							label: t("author"),
+							children: author
+						}),
+						(0, react_jsx_runtime.jsx)(Fact, {
+							label: t("downloads"),
+							children: formatCount(detail.stats.downloads)
+						}),
+						detail.stats.installs !== void 0 && (0, react_jsx_runtime.jsx)(Fact, {
+							label: t("installs"),
+							children: formatCount(detail.stats.installs)
+						}),
+						detail.stats.stars !== void 0 && (0, react_jsx_runtime.jsx)(Fact, {
+							label: t("stars"),
+							children: formatCount(detail.stats.stars)
+						}),
+						detail.updatedAt !== void 0 && (0, react_jsx_runtime.jsx)(Fact, {
+							label: t("updated"),
+							children: formatDate(detail.updatedAt)
+						}),
+						detail.license !== void 0 && detail.license !== "" && (0, react_jsx_runtime.jsx)(Fact, {
+							label: t("license"),
+							children: detail.license
+						}),
+						detail.version !== void 0 && detail.version !== "" && (0, react_jsx_runtime.jsxs)(Fact, {
+							label: t("version"),
+							children: ["v", detail.version]
+						})
+					]
+				})] })
 			});
 		}
 		//#endregion
@@ -24159,8 +24959,8 @@ function(property) {
 		*    already holds.
 		*  - **in-flight guards**: one install/uninstall per id, one page per cursor, one
 		*    detail/file request per target.
-		*  - **detail/file caching**: reopening a skill is instant and cannot blank the
-		*    pane with a spinner.
+		*  - **detail snapshots**: reopening can show the previous copy immediately,
+		*    while the Host rechecks its TTL and current install annotations.
 		*  - **local management**: the InstalledSkills component independently lists what is already
 		*    on disk (`fetchInstalled`) instead of asking the market, matching the
 		*    contract's §5.3 behaviour.
@@ -24205,11 +25005,13 @@ function(property) {
 				items: [],
 				nextCursor: null,
 				sources: emptySources(),
+				itemStatuses: {},
 				loading: false,
 				loadingMore: false,
 				error: null,
 				view: { kind: "home" },
 				detail: null,
+				detailStatus: null,
 				detailLoading: false,
 				detailError: null,
 				activeTab: "overview",
@@ -24258,6 +25060,9 @@ function(property) {
 				[source]: status
 			};
 		}
+		function itemStatuses(items, sources) {
+			return Object.fromEntries(items.map((item) => [item.id, sources[item.source]]));
+		}
 		/** Copy the install-related fields of a fresh skill onto a cached detail. */
 		function patchDetail(detail, updated) {
 			return {
@@ -24271,7 +25076,6 @@ function(property) {
 			let state = initialState();
 			const listeners = /* @__PURE__ */ new Set();
 			const detailCache = /* @__PURE__ */ new Map();
-			const fileCache = /* @__PURE__ */ new Map();
 			let listSequence = 0;
 			let detailSequence = 0;
 			let fileSequence = 0;
@@ -24337,11 +25141,17 @@ function(property) {
 				} : item).filter(keepUnderInstalledFilter) };
 				if (state.detail !== null && state.detail.id === updated.id) {
 					const patched = patchDetail(state.detail, updated);
-					detailCache.set(updated.id, patched);
+					detailCache.set(updated.id, {
+						skill: patched,
+						status: state.detailStatus ?? { status: "ok" }
+					});
 					patch.detail = patched;
 				} else {
 					const cached = detailCache.get(updated.id);
-					if (cached !== void 0) detailCache.set(updated.id, patchDetail(cached, updated));
+					if (cached !== void 0) detailCache.set(updated.id, {
+						skill: patchDetail(cached.skill, updated),
+						status: cached.status
+					});
 				}
 				commit(patch);
 			}
@@ -24353,7 +25163,7 @@ function(property) {
 			* development double-invocation repeats it. A different filter set always
 			* issues a fresh request.
 			*/
-			async function refresh() {
+			async function refresh(options = {}) {
 				cancelDebounce();
 				detailCache.clear();
 				const key = currentListKey();
@@ -24370,6 +25180,7 @@ function(property) {
 					loadingMore: false,
 					error: null,
 					items: [],
+					itemStatuses: {},
 					nextCursor: null
 				});
 				const promise = (async () => {
@@ -24380,12 +25191,13 @@ function(property) {
 							security: filters.security,
 							installed: filters.installed,
 							limit: PAGE_SIZE
-						}, controller.signal);
+						}, controller.signal, { refresh: options.force === true });
 						if (sequence !== listSequence) return;
 						commit({
 							items: result.items,
 							nextCursor: result.nextCursor,
 							sources: result.sources,
+							itemStatuses: itemStatuses(result.items, result.sources),
 							loading: false
 						});
 					} catch (error) {
@@ -24433,6 +25245,10 @@ function(property) {
 						items: [...state.items, ...appended],
 						nextCursor: result.nextCursor,
 						sources: result.sources,
+						itemStatuses: {
+							...state.itemStatuses,
+							...itemStatuses(appended, result.sources)
+						},
 						loadingMore: false
 					});
 				} catch (error) {
@@ -24471,32 +25287,42 @@ function(property) {
 			function isCurrentDetail(id) {
 				return state.view.kind === "detail" && state.view.id === id;
 			}
-			async function loadDetail(id) {
+			async function loadDetail(id, options = {}) {
 				const sequence = ++detailSequence;
 				detailAbort?.abort();
 				const controller = new AbortController();
 				detailAbort = controller;
 				try {
-					const { skill, sourceStatus } = await fetchSkillDetail(id, controller.signal);
+					const { skill, sourceStatus } = await fetchSkillDetail(id, controller.signal, { refresh: options.refresh === true });
 					if (sequence !== detailSequence || !isCurrentDetail(id)) return;
-					detailCache.set(id, skill);
+					detailCache.set(id, {
+						skill,
+						status: sourceStatus
+					});
 					commit({
 						detail: skill,
+						detailStatus: sourceStatus,
 						detailLoading: false,
 						detailError: null,
 						sources: mergeSourceStatus(state.sources, skill.source, sourceStatus)
 					});
 				} catch (error) {
 					if (sequence !== detailSequence || isAbortError(error)) return;
+					detailCache.delete(id);
 					commit({
+						detail: null,
+						detailStatus: null,
 						detailLoading: false,
 						detailError: errorMessage(error)
 					});
 				}
 			}
-			/** Open one skill: cache first, network only when the cache misses. */
-			async function openDetail(id) {
-				const cached = detailCache.get(id);
+			/** Show a previous copy immediately, then check the Host's authoritative cache. */
+			async function openDetail(id, options = {}) {
+				const cached = options.refresh === true ? void 0 : detailCache.get(id);
+				fileSequence += 1;
+				fileAbort?.abort();
+				inFlightFileKey = null;
 				commit({
 					view: {
 						kind: "detail",
@@ -24507,18 +25333,20 @@ function(property) {
 					fileLoading: false,
 					detailError: null
 				});
-				if (cached !== void 0) {
-					commit({
-						detail: cached,
-						detailLoading: false
-					});
-					return;
-				}
-				commit({
+				if (cached !== void 0) commit({
+					detail: cached.skill,
+					detailStatus: {
+						...cached.status,
+						fromCache: true
+					},
+					detailLoading: false
+				});
+				else commit({
 					detail: null,
+					detailStatus: null,
 					detailLoading: true
 				});
-				await loadDetail(id);
+				await loadDetail(id, options);
 			}
 			function closeDetail() {
 				detailSequence += 1;
@@ -24528,6 +25356,7 @@ function(property) {
 				commit({
 					view: { kind: "home" },
 					detail: null,
+					detailStatus: null,
 					detailLoading: false,
 					detailError: null,
 					file: null,
@@ -24545,19 +25374,11 @@ function(property) {
 				if (first === void 0) return;
 				selectFile(first.path);
 			}
-			/** Load one file of the open skill, cache first and one request per path. */
+			/** Read through the Host's TTL cache, with one in-flight request per path. */
 			async function selectFile(path) {
 				if (state.view.kind !== "detail") return;
 				const id = state.view.id;
 				const key = fileCacheKey(id, path);
-				const cached = fileCache.get(key);
-				if (cached !== void 0) {
-					commit({
-						file: cached,
-						fileLoading: false
-					});
-					return;
-				}
 				if (inFlightFileKey === key) return;
 				const sequence = ++fileSequence;
 				fileAbort?.abort();
@@ -24571,7 +25392,6 @@ function(property) {
 				try {
 					const file = await fetchSkillFile(id, path, controller.signal);
 					if (sequence !== fileSequence) return;
-					fileCache.set(key, file);
 					commit({
 						file,
 						fileLoading: false
@@ -24768,10 +25588,16 @@ function(property) {
 					}),
 					(0, react_jsx_runtime.jsx)("div", {
 						className: MarketPage_module_css_default.body,
-						children: section === "installed" ? (0, react_jsx_runtime.jsx)(InstalledSkills, { onChanged: () => {
-							controller.closeDetail();
-							controller.refresh();
-						} }) : state.view.kind === "home" ? (0, react_jsx_runtime.jsx)(MarketHome, {
+						children: section === "installed" ? (0, react_jsx_runtime.jsx)(InstalledSkills, {
+							onChanged: () => {
+								controller.closeDetail();
+								controller.refresh();
+							},
+							onOpenMarket: (id) => {
+								setSection("market");
+								controller.openDetail(id);
+							}
+						}) : state.view.kind === "home" ? (0, react_jsx_runtime.jsx)(MarketHome, {
 							state,
 							controller
 						}) : state.detail !== null ? (0, react_jsx_runtime.jsx)(SkillDetailView, {
@@ -24839,14 +25665,19 @@ function(property) {
 		*/
 		function confirmSkillOf(state, id) {
 			const skill = (state.detail !== null && state.detail.id === id ? state.detail : null) ?? state.items.find((item) => item.id === id) ?? null;
-			if (skill !== null) return {
-				id: skill.id,
-				name: skill.name,
-				source: skill.source,
-				version: skill.version,
-				securityStatus: skill.securityStatus,
-				authorName: skill.author.displayName ?? skill.author.handle
-			};
+			if (skill !== null) {
+				const status = state.detail !== null && state.detail.id === id ? state.detailStatus : state.itemStatuses[skill.id];
+				const snapshotAt = status?.fromCache === true ? status.fetchedAt : void 0;
+				return {
+					id: skill.id,
+					name: skill.name,
+					source: skill.source,
+					version: skill.version,
+					securityStatus: skill.securityStatus,
+					authorName: skill.author.displayName ?? skill.author.handle,
+					...snapshotAt === void 0 ? {} : { snapshotAt }
+				};
+			}
 			return {
 				id,
 				name: id,
@@ -24885,6 +25716,34 @@ function(property) {
 			localUninstallDescription: "将删除下方路径的技能及其全部文件。共享 agents 目录中的技能也会影响其他使用它的工具。",
 			unlinkDescription: "仅移除此技能的符号链接，保留链接目标及其文件。",
 			uninstalling: "正在卸载…",
+			uninstallDisabled: "卸载已在插件配置中禁用。",
+			copyPath: "复制路径",
+			copiedPath: "已复制路径",
+			sourceLabel: "来源",
+			managedByHub: "由 Skills Hub 安装",
+			unmanagedSkill: "手工放置",
+			symlinkSkill: "符号链接",
+			installedAtLabel: "安装时间",
+			skillKind: "形态",
+			bundleSkill: "目录包",
+			flatSkill: "单文件",
+			filesCount: "{count} 个文件",
+			emptyDocument: "这个技能没有正文内容。",
+			installedReadFailed: "读取本地技能失败。",
+			openInMarket: "在市场查看",
+			fileView: "文件视图",
+			filePreview: "预览",
+			fileSource: "源码",
+			snapshotAge: "快照 {age}",
+			ageJustNow: "刚刚",
+			ageMinutes: "{count} 分钟前",
+			ageHours: "{count} 小时前",
+			ageDays: "{count} 天前",
+			refreshNow: "重新获取（跳过缓存）",
+			refreshSnapshot: "重新获取",
+			detailSnapshot: "以下内容来自 {age} 的缓存快照，作者可能已经更新。",
+			installSnapshot: "这里显示的市场数据是 {age} 的快照；点确认后会重新拉取最新清单再安装。",
+			marketProvenance: "这个技能来自技能市场：作者说明、统计与安全报告在市场的详情页里；本地这一份可能已经改动过。",
 			panel: "技能市场",
 			title: "技能市场",
 			subtitle: "浏览、预览并安装来自 ClawHub 与 SkillHub 的第三方技能。",
@@ -24893,6 +25752,7 @@ function(property) {
 			"source.all": "全部来源",
 			"source.clawhub": "ClawHub",
 			"source.skillhub": "SkillHub",
+			"source.local": "本机技能",
 			"security.all": "全部安全状态",
 			"security.verified": "已验证",
 			"security.benign": "无风险",
@@ -24952,6 +25812,7 @@ function(property) {
 			uninstallDone: "已卸载",
 			noFiles: "这个技能没有可预览的文件。",
 			fileTooLarge: "文件过大，无法预览。",
+			fileTruncated: "文件过大，仅显示开头部分。",
 			copy: "复制",
 			copied: "已复制",
 			unoaudited: "未审计"
@@ -24974,6 +25835,34 @@ function(property) {
 			localUninstallDescription: "Delete the skill and all files at the path below. Removing shared agents skills also affects other tools using them.",
 			unlinkDescription: "Remove only this skill’s symbolic link. The target and its files will be kept.",
 			uninstalling: "Uninstalling…",
+			uninstallDisabled: "Uninstalling is disabled by the plugin configuration.",
+			copyPath: "Copy path",
+			copiedPath: "Path copied",
+			sourceLabel: "Source",
+			managedByHub: "Installed by Skills Hub",
+			unmanagedSkill: "Placed by hand",
+			symlinkSkill: "Symlink",
+			installedAtLabel: "Installed",
+			skillKind: "Layout",
+			bundleSkill: "Directory bundle",
+			flatSkill: "Single file",
+			filesCount: "{count} files",
+			emptyDocument: "This skill has no document body.",
+			installedReadFailed: "Could not read the local skill.",
+			openInMarket: "View in marketplace",
+			fileView: "File view",
+			filePreview: "Preview",
+			fileSource: "Source",
+			snapshotAge: "Snapshot {age}",
+			ageJustNow: "just now",
+			ageMinutes: "{count} min ago",
+			ageHours: "{count} h ago",
+			ageDays: "{count} d ago",
+			refreshNow: "Refetch (skip cache)",
+			refreshSnapshot: "Refetch",
+			detailSnapshot: "This content is a cached snapshot from {age}; the author may have published since.",
+			installSnapshot: "The marketplace data shown here is a snapshot from {age}; confirming refetches the current manifest before installing.",
+			marketProvenance: "This skill came from a marketplace: the author description, statistics and security reports live on its marketplace page, while this local copy may have changed since.",
 			panel: "Skills Hub",
 			title: "Skills Hub",
 			subtitle: "Browse, preview and install third-party skills from ClawHub and SkillHub.",
@@ -24982,6 +25871,7 @@ function(property) {
 			"source.all": "All sources",
 			"source.clawhub": "ClawHub",
 			"source.skillhub": "SkillHub",
+			"source.local": "Local skill",
 			"security.all": "Any security status",
 			"security.verified": "Verified",
 			"security.benign": "Benign",
@@ -25041,6 +25931,7 @@ function(property) {
 			uninstallDone: "Uninstalled",
 			noFiles: "This skill has no previewable files.",
 			fileTooLarge: "The file is too large to preview.",
+			fileTruncated: "The file is too large; only the beginning is shown.",
 			copy: "Copy",
 			copied: "Copied",
 			unoaudited: "Not audited"