dsh-capability-panel 1.0.0 → 1.1.1

package/lib/client.js

@@ -45,13 +45,20 @@ function parseSkillEntry(value) {
 	const state = value["state"];
 	if (state !== "loaded" && state !== "pruned" && state !== "evicted" && state !== "unloaded") return null;
 	if (typeof value["enabled"] !== "boolean" || typeof value["loadCount"] !== "number") return null;
+	if (typeof value["source"] !== "string" || typeof value["provider"] !== "string") return null;
 	const description = optString(value["description"]);
+	const path = optString(value["path"]);
+	const group = optString(value["group"]);
 	return {
 		name: value["name"],
 		state,
 		enabled: value["enabled"],
 		loadCount: value["loadCount"],
-		...description === void 0 ? {} : { description }
+		source: value["source"],
+		provider: value["provider"],
+		...description === void 0 ? {} : { description },
+		...path === void 0 ? {} : { path },
+		...group === void 0 ? {} : { group }
 	};
 }
 function parseToolEntry(value) {
@@ -78,10 +85,14 @@ function parseMcpServerEntry(value) {
 		if (parsed === null) return null;
 		tools.push(parsed);
 	}
+	const source = optString(value["source"]);
+	const path = optString(value["path"]);
 	return {
 		server: value["server"],
 		enabled: value["enabled"],
-		tools
+		tools,
+		...source === void 0 ? {} : { source },
+		...path === void 0 ? {} : { path }
 	};
 }
 function parseBlocked(value) {
@@ -161,7 +172,7 @@ function close() {
 		open: false
 	});
 }
-const ROUTE = "/api/capability-panel";
+const ROUTE$1 = "/api/capability-panel";
 /**
 * Reads and writes have different ordering domains. A newer refresh supersedes
 * an older refresh, but it cannot invalidate a user's mutation response.
@@ -196,7 +207,7 @@ function finishRequest(requestEpoch, patch) {
 }
 async function requestPayload$1(sessionId, init) {
 	const query = sessionId === null ? "" : `?session=${encodeURIComponent(sessionId)}`;
-	const response = await fetch(`${ROUTE}${query}`, {
+	const response = await fetch(`${ROUTE$1}${query}`, {
 		credentials: "same-origin",
 		...init
 	});
@@ -282,10 +293,11 @@ function filterCapabilities(source, rawQuery) {
 	const skills = source.skills.filter((skill) => hit(query, [
 		skill.name,
 		skill.description,
-		skill.stateLabel
+		skill.stateLabel,
+		skill.sourceLabel
 	]));
 	const mcp = source.mcp.flatMap((server) => {
-		if (hit(query, [server.server])) return [server];
+		if (hit(query, [server.server, server.source])) return [server];
 		const tools = server.tools.filter((tool) => hit(query, [
 			tool.label,
 			tool.name,
@@ -311,11 +323,12 @@ function filterCapabilities(source, rawQuery) {
 
 //#endregion
 //#region src/client/filter.ts
-function filterPayload(payload, rawQuery, stateLabel = (skill) => skill.state) {
+function filterPayload(payload, rawQuery, stateLabel = (skill) => skill.state, sourceLabel = (skill) => skill.source) {
 	if (rawQuery.trim() === "") return filterCapabilities(payload, rawQuery);
 	const skills = payload.skills.map((skill) => ({
 		...skill,
-		stateLabel: stateLabel(skill)
+		stateLabel: stateLabel(skill),
+		sourceLabel: sourceLabel(skill)
 	}));
 	return filterCapabilities({
 		...payload,
@@ -409,7 +422,17 @@ const zh = {
 	"preset.noTools": "这个 preset 没有可用能力。",
 	"preset.reserved": "{name} 是保留的传输通道，不能关闭。",
 	"preset.broken": "这个 preset 无法组装会话：{reason}。修好它之后才能列出工具。",
-	"degraded.item": "⚠ 部分读取失败：{note}"
+	"degraded.item": "⚠ 部分读取失败：{note}",
+	"source.project-dsh": "项目 .dsh",
+	"source.project-agents": "项目 agent",
+	"source.runtime": "运行时",
+	"source.user-dsh": "用户 .dsh",
+	"source.user-agents": "用户 agent",
+	"source.custom": "自定义",
+	"source.bundled": "内置",
+	"source.host": "全局",
+	"source.preset": "预设",
+	"source.openFolder": "在文件管理器中打开 {source}"
 };
 const en = {
 	"state.loaded": "loaded",
@@ -459,7 +482,17 @@ const en = {
 	"preset.noTools": "This preset exposes no capabilities.",
 	"preset.reserved": "{name} is a reserved transport and cannot be disabled.",
 	"preset.broken": "This preset cannot compose a session: {reason}. Fix it before its tools can be listed.",
-	"degraded.item": "⚠ Partial read failed: {note}"
+	"degraded.item": "⚠ Partial read failed: {note}",
+	"source.project-dsh": "project .dsh",
+	"source.project-agents": "project agent",
+	"source.runtime": "runtime",
+	"source.user-dsh": "user .dsh",
+	"source.user-agents": "user agent",
+	"source.custom": "custom",
+	"source.bundled": "bundled",
+	"source.host": "global",
+	"source.preset": "preset",
+	"source.openFolder": "Open {source} in file manager"
 };
 /**
 * Register both dictionaries as one effect: the single-locale form is the
@@ -482,6 +515,7 @@ const TOK = {
 	textSecondary: "var(--dsw-alias-label-secondary, #61666b)",
 	textTertiary: "var(--dsw-alias-label-tertiary, #81858c)",
 	border: "var(--dsw-alias-border-l1, rgba(0,0,0,.04))",
+	borderStrong: "var(--dsw-alias-border-l2, rgba(0,0,0,.1))",
 	switchOn: "var(--dsw-alias-state-business-primary, #4176e6)",
 	switchOff: "var(--dsw-alias-border-l2, rgba(0,0,0,.1))",
 	switchThumb: "var(--dsw-alias-bg-layer-1, #ffffff)",
@@ -533,31 +567,30 @@ const PANEL_CSS = [
 	".ci-preset-filter{flex:1 1 220px;min-width:180px;height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.1));border-radius:8px;background-color:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#0f1115);font:inherit;font-weight:400}",
 	".ci-preset-part{margin:18px 0 0}",
 	".ci-preset-part:first-of-type{margin-top:10px}",
-	".ci-preset-part-title{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dsw-alias-label-tertiary,#81858c)}",
+	".ci-preset-part-title{margin:0;font-size:14px;font-weight:600;line-height:22px;color:var(--dsw-alias-label-primary,#0f1115)}",
 	".ci-preset-badge{display:inline-block;margin-left:6px;padding:1px 6px;line-height:1.5;border-radius:999px;font-size:11px;font-weight:500;vertical-align:middle;background-color:var(--dsw-alias-bg-fill-2,rgba(0,0,0,.05));color:var(--dsw-alias-label-tertiary,#81858c)}",
 	".ci-preset-group{padding:0}",
 	".ci-preset-server-trigger{display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:none;border:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}",
 	".ci-preset-server-trigger:disabled{cursor:default}",
-	".ci-preset-group .ci-preset-tool-list{margin:0;padding-left:26px;border-top:none}",
-	".ci-preset-group .ci-preset-tool-row:last-child{border-bottom:none}",
+	".ci-preset-group .ci-preset-tool-list{margin:0;padding-left:26px}",
 	".ci-preset-picker-label{display:grid;gap:6px;color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}",
 	".ci-preset-picker{height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.1));border-radius:8px;background-color:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#0f1115);font:inherit;font-weight:400}",
 	".ci-preset-picker:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:1px}",
 	".ci-settings-subtitle{margin:0 0 6px;color:var(--dsw-alias-label-primary,#0f1115);font-size:14px;line-height:22px}",
-	".ci-preset-tool-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.04))}",
-	".ci-preset-tool-row{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.04))}",
+	".ci-preset-tool-list{list-style:none;margin:0;padding:0}",
+	".ci-preset-tool-row{display:flex;align-items:center;gap:16px}",
 	".ci-preset-tool-copy{display:grid;min-width:0;flex:1}",
 	".ci-preset-tool-name{color:var(--dsw-alias-label-primary,#0f1115);font-weight:600;overflow-wrap:anywhere}",
 	".ci-preset-tool-description{color:var(--dsw-alias-label-tertiary,#81858c);line-height:18px;overflow-wrap:anywhere}",
-	".ci-preset-item{list-style:none;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.04))}",
-	".ci-preset-item:last-child{border-bottom:none}",
-	".ci-preset-item .ci-preset-tool-row{border-bottom:none}",
+	".ci-preset-item{list-style:none}",
 	".ci-preset-disclosure{display:block}",
 	".ci-preset-spacer{width:18px;flex:none}",
 	".ci-preset-detail{padding:0 0 10px 24px;color:var(--dsw-alias-label-tertiary,#81858c);line-height:18px;overflow-wrap:anywhere}",
 	".ci-preset-kinds{margin:0 0 4px}",
 	".ci-preset-kinds .ci-tabs{display:inline-flex}",
 	".ci-preset-kinds .ci-tab{flex:0 0 auto;padding:0 12px}",
+	".ci-source-header:hover .ci-folder-icon{opacity:1 !important}",
+	".ci-source-divider{list-style:none}",
 	"@media (prefers-reduced-motion: reduce){.ci-thumb,.ci-panel,.ci-collapse,.ci-chevron svg{transition:none !important}}"
 ].join("\n");
 
@@ -4560,15 +4593,21 @@ function parseSkills(raw) {
 	const skills = [];
 	for (const rawSkill of raw) {
 		if (!isRecord(rawSkill)) return null;
-		const { name, description, enabled, project } = rawSkill;
+		const { name, description, enabled, project, source, path, group } = rawSkill;
 		if (typeof name !== "string" || typeof enabled !== "boolean") return null;
 		if (description !== void 0 && typeof description !== "string") return null;
 		if (project !== void 0 && typeof project !== "boolean") return null;
+		if (source !== void 0 && typeof source !== "string") return null;
+		if (path !== void 0 && typeof path !== "string") return null;
+		if (group !== void 0 && typeof group !== "string") return null;
 		skills.push({
 			name,
 			...description === void 0 ? {} : { description },
 			enabled,
-			...project === void 0 ? {} : { project }
+			...project === void 0 ? {} : { project },
+			...source === void 0 ? {} : { source },
+			...path === void 0 ? {} : { path },
+			...group === void 0 ? {} : { group }
 		});
 	}
 	return skills;
@@ -4593,14 +4632,18 @@ function parsePresetToolPayload(value) {
 		const mcp = [];
 		for (const rawServer of rawMcp) {
 			if (!isRecord(rawServer)) return null;
-			const { server, tools: rawTools, enabled } = rawServer;
+			const { server, tools: rawTools, enabled, source, path } = rawServer;
 			if (typeof server !== "string" || typeof enabled !== "boolean" || !Array.isArray(rawTools)) return null;
+			if (source !== void 0 && typeof source !== "string") return null;
+			if (path !== void 0 && typeof path !== "string") return null;
 			const tools = parseTools(rawTools);
 			if (tools === null) return null;
 			mcp.push({
 				server,
 				tools,
-				enabled
+				enabled,
+				...source === void 0 ? {} : { source },
+				...path === void 0 ? {} : { path }
 			});
 		}
 		presets.push({
@@ -4748,6 +4791,28 @@ function resetPresetTools() {
 
 //#endregion
 //#region src/client/preset-section.ts
+/** Middle ellipsis for long path labels; the full path stays in the tooltip. */
+const ellipsizeMiddle = (text, max$1 = 56) => {
+	if (text.length <= max$1) return text;
+	const head = Math.ceil((max$1 - 1) / 2);
+	const tail = Math.floor((max$1 - 1) / 2);
+	return `${text.slice(0, head)}…${text.slice(text.length - tail)}`;
+};
+/** Group items by a key, preserving first-seen order. */
+function groupBy(items, keyOf) {
+	const groups = /* @__PURE__ */ new Map();
+	const order = [];
+	for (const item of items) {
+		const key = keyOf(item);
+		const bucket = groups.get(key);
+		if (bucket !== void 0) bucket.push(item);
+		else {
+			groups.set(key, [item]);
+			order.push(key);
+		}
+	}
+	return order.map((key) => [key, groups.get(key)]);
+}
 /**
 * Settings-side twin of the composer panel. It reuses that panel's vocabulary
 * and interaction — an always-visible filter, MCP tools collapsed under their
@@ -4778,6 +4843,101 @@ function PresetToolSection(props) {
 		label,
 		onCheckedChange: onChange
 	});
+	/**
+	* Open a source folder from the settings page. The route resolves
+	* user/project/host/preset sources without a session (project sources
+	* against the dsh process's own cwd, matching how this page lists them).
+	*/
+	const openSourceFolder = (source) => {
+		fetch("/api/capability-panel/open-folder", {
+			method: "POST",
+			credentials: "same-origin",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({ source })
+		}).then((response) => {
+			if (!response.ok) console.warn(`[capability-panel] cannot open source folder (${response.status})`);
+		}).catch((error) => {
+			console.warn("[capability-panel] open source folder request failed", error);
+		});
+	};
+	/** Sources the open-folder route can resolve without a session. */
+	const SESSIONLESS_OPENABLE = new Set([
+		"user-dsh",
+		"user-agents",
+		"project-dsh",
+		"project-agents",
+		"host"
+	]);
+	/**
+	* A ruled source divider inside a settings list — the same visual language
+	* as the session panel's group headers (`── label (count) ────`). Preset
+	* groups name their preset; other groups show the directory (ellipsized);
+	* openable groups offer the hover folder icon and a click-through.
+	*/
+	const sourceDivider = (groupKey, items, first) => {
+		const presetName = groupKey.startsWith("preset:") ? groupKey.slice(7) : void 0;
+		const path = items.find((item) => item.path !== void 0)?.path;
+		const translated = t(`source.${groupKey}`);
+		const fallbackLabel = translated === `source.${groupKey}` ? groupKey : translated;
+		const label = presetName ?? (path !== void 0 ? ellipsizeMiddle(path) : groupKey === "host" ? t("source.host") : fallbackLabel);
+		const openSource = presetName ?? groupKey;
+		const openable = presetName !== void 0 || SESSIONLESS_OPENABLE.has(groupKey);
+		const rule = (grow) => react.createElement("span", { style: grow ? {
+			flex: "1",
+			height: "1px",
+			background: TOK.borderStrong
+		} : {
+			flex: "none",
+			width: "16px",
+			height: "1px",
+			background: TOK.borderStrong
+		} });
+		return react.createElement("li", {
+			key: `source:${groupKey}`,
+			className: "ci-source-divider"
+		}, react.createElement("div", {
+			className: "ci-source-header",
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				margin: first ? "6px 0 2px" : "18px 0 2px"
+			}
+		}, rule(false), react.createElement("span", {
+			style: {
+				flex: "none",
+				display: "inline-flex",
+				alignItems: "center",
+				gap: "4px",
+				fontSize: "12px",
+				fontWeight: 500,
+				color: TOK.textTertiary,
+				fontVariantNumeric: "tabular-nums",
+				cursor: openable ? "pointer" : "default"
+			},
+			title: openable ? t("source.openFolder", { source: path ?? label }) : void 0,
+			onClick: openable ? () => {
+				openSourceFolder(openSource);
+			} : void 0
+		}, openable ? react.createElement("span", {
+			className: "ci-folder-icon",
+			style: {
+				display: "inline-grid",
+				placeItems: "center",
+				opacity: 0,
+				transition: "opacity 0.15s"
+			}
+		}, react.createElement("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round"
+		}, react.createElement("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }))) : null, `${label} (${items.length})`), rule(true)));
+	};
 	const toggle$1 = (tool, presetId) => switchFor(tool.enabled, tool.reserved === true, tool.reserved === true ? t("preset.reserved", { name: tool.label }) : t(tool.enabled ? "action.disable" : "action.enable", { name: tool.label }), (checked) => {
 		setPresetTool(presetId, tool.name, checked);
 	});
@@ -4869,8 +5029,8 @@ function PresetToolSection(props) {
 		group("skills", t("group.skills", {
 			shown: view.skills.length,
 			total: totals.skills
-		}), view.skills.map((skill) => skillRow(skill, selected.id)));
-		const serverRows = view.mcp.map((server) => {
+		}), groupBy(view.skills, (skill) => skill.group ?? skill.source ?? "unknown").flatMap(([groupKey, items], i) => [sourceDivider(groupKey, items, i === 0), ...items.map((skill) => skillRow(skill, selected.id))]));
+		const serverRow = (server) => {
 			const key = `mcp:${server.server}`;
 			const disclosure = resolveDisclosure(expanded[key] === true, filtering);
 			return react.createElement("li", {
@@ -4893,11 +5053,11 @@ function PresetToolSection(props) {
 			}, chevronIcon), react.createElement("span", { className: "ci-preset-tool-copy" }, react.createElement("span", { className: "ci-preset-tool-name" }, server.server), react.createElement("span", { className: "ci-preset-tool-description" }, server.tools.length === 1 ? t("server.tool.one") : t("server.tools", { count: server.tools.length })))), switchFor(server.enabled, false, t(server.enabled ? "action.disable" : "action.enable", { name: server.server }), (checked) => {
 				setPresetServer(selected.id, server.server, checked);
 			})), react.createElement(CollapsiblePanel, { className: "ci-collapse" }, react.createElement("ul", { className: "ci-preset-tool-list" }, ...server.tools.map((tool) => toolRow(tool, selected.id, true))))));
-		});
+		};
 		group("mcp", t("group.mcp", {
 			shown: view.mcp.length,
 			total: totals.mcp
-		}), serverRows);
+		}), groupBy(view.mcp, (server) => server.source === void 0 || server.source === "host" ? "host" : `preset:${server.source}`).flatMap(([groupKey, items], i) => [sourceDivider(groupKey, items, i === 0), ...items.map((server) => serverRow(server))]));
 		group("system", t("group.system", {
 			shown: view.systemTools.length,
 			total: totals.systemTools
@@ -10631,6 +10791,7 @@ const PopoverPopup = /* @__PURE__ */ react.forwardRef(function PopoverPopup$1(co
 
 //#endregion
 //#region src/client/index.ts
+const ROUTE = "/api/capability-panel";
 /**
 * Order by how much the reader needs to act on it: what fell out of context
 * first, then what is in it, then the rest.
@@ -10704,7 +10865,121 @@ function apply(ctx) {
 		const normalizedQuery = query.trim();
 		const filtering = normalizedQuery !== "";
 		const payload = snap.payload;
-		const view = payload === null ? null : filterPayload(payload, normalizedQuery, (skill) => t(`state.${skill.state}`));
+		const skillSourceLabel = (skill) => {
+			const key = `source.${skill.source}`;
+			const translated = t(key);
+			return translated === key ? skill.source : translated;
+		};
+		const openSourceFolder = (source) => {
+			if (sessionId === null) return;
+			fetch(`${ROUTE}/open-folder`, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					sessionId,
+					source
+				})
+			}).then(async (response) => {
+				if (!response.ok) {
+					const detail = await response.text();
+					console.warn(`[capability-panel] cannot open source folder (${response.status}): ${detail}`);
+				}
+			}).catch((error) => {
+				console.warn("[capability-panel] open source folder request failed", error);
+			});
+		};
+		/**
+		* Middle ellipsis for long path labels: both ends carry the meaning
+		* (`~/…` context, the tail directory), the middle is the expendable
+		* part. The full path stays in the hover tooltip.
+		*/
+		const ellipsizeMiddle$1 = (text, max$1 = 42) => {
+			if (text.length <= max$1) return text;
+			const head = Math.ceil((max$1 - 1) / 2);
+			const tail = Math.floor((max$1 - 1) / 2);
+			return `${text.slice(0, head)}…${text.slice(text.length - tail)}`;
+		};
+		/**
+		* Section header for a source group, rendered as a labeled rule:
+		* `── 📁 ~/.agents/skills (4) ────────────`. Label rule: preset-bundled
+		* entries name their preset; every other group shows its real directory
+		* (host-abbreviated `~`/cwd-relative, middle-ellipsized when long), and
+		* only groups without a filesystem location fall back to the translated
+		* source name. `groupKey` is the grouping identity; `rawSource` is what
+		* the open-folder route resolves by.
+		*/
+		const sourceSectionHeader = (groupKey, rawSource, count, first, path, openable = false) => {
+			const label = groupKey.startsWith("preset:") ? groupKey.slice(7) : path !== void 0 ? ellipsizeMiddle$1(path) : groupKey === "host" ? t("source.host") : skillSourceLabel({ source: groupKey });
+			const rule = (grow) => h("span", { style: grow ? {
+				flex: "1",
+				height: "1px",
+				background: TOK.borderStrong
+			} : {
+				flex: "none",
+				width: "16px",
+				height: "1px",
+				background: TOK.borderStrong
+			} });
+			return h("div", {
+				key: `source:${groupKey}`,
+				className: "ci-source-header",
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "8px",
+					margin: first ? "0 0 2px" : "10px 0 2px"
+				}
+			}, rule(false), h("span", {
+				style: {
+					flex: "none",
+					display: "inline-flex",
+					alignItems: "center",
+					gap: "4px",
+					fontWeight: 500,
+					color: TOK.textTertiary,
+					fontVariantNumeric: "tabular-nums",
+					cursor: openable ? "pointer" : "default"
+				},
+				title: openable ? t("source.openFolder", { source: path ?? label }) : void 0,
+				onClick: openable ? () => {
+					openSourceFolder(rawSource);
+				} : void 0
+			}, openable ? h("span", {
+				className: "ci-folder-icon",
+				style: {
+					display: "inline-grid",
+					placeItems: "center",
+					opacity: 0,
+					transition: "opacity 0.15s"
+				}
+			}, h("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, h("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }))) : null, `${label} (${count})`), rule(true));
+		};
+		/** Group items by source, preserving order within each group. */
+		const groupBySource = (items, getSource) => {
+			const groups = /* @__PURE__ */ new Map();
+			const order = [];
+			for (const item of items) {
+				const source = getSource(item);
+				const bucket = groups.get(source);
+				if (bucket) bucket.push(item);
+				else {
+					groups.set(source, [item]);
+					order.push(source);
+				}
+			}
+			return order.map((source) => [source, groups.get(source)]);
+		};
+		const view = payload === null ? null : filterPayload(payload, normalizedQuery, (skill) => t(`state.${skill.state}`), skillSourceLabel);
 		const skills = view === null ? [] : sortSkills(view.skills);
 		const mcp = view?.mcp ?? [];
 		const systemTools = view?.systemTools ?? [];
@@ -10769,7 +11044,7 @@ function apply(ctx) {
 				margin: first ? "0 0 2px" : "12px 0 2px"
 			}
 		}, text);
-		const nameText = (text) => h("span", {
+		const nameText = (text, sourceLabel) => h("span", {
 			className: "ci-name",
 			style: {
 				flex: "1 1 auto",
@@ -10777,7 +11052,12 @@ function apply(ctx) {
 				color: TOK.textPrimary,
 				fontWeight: 500
 			}
-		}, text);
+		}, text, sourceLabel !== void 0 ? h("span", { style: {
+			color: TOK.textTertiary,
+			fontWeight: 400,
+			fontSize: "11px",
+			marginLeft: "2px"
+		} }, `· ${sourceLabel}`) : null);
 		/** The trigger's accessible name, localized with its subject. */
 		const disclosureAria = (subject, detailKey, disclosure) => {
 			const detail = t(detailKey);
@@ -10798,7 +11078,7 @@ function apply(ctx) {
 		* trigger owns only chevron + label; trailing actions remain independent
 		* buttons and never toggle the description.
 		*/
-		const disclosureRow$1 = (key, enabled, label, description, actions, className = ROW_ROOT_CLASS) => {
+		const disclosureRow$1 = (key, enabled, label, description, actions, className = ROW_ROOT_CLASS, sourceLabel) => {
 			const hasDescription = description !== void 0 && description !== "";
 			const disclosure = resolveDisclosure(expanded[key] === true, filtering);
 			const ariaLabel = disclosureAria(label, "detail.description", disclosure);
@@ -10809,7 +11089,7 @@ function apply(ctx) {
 			}, h("div", { className: ROW_HEADER_CLASS }, h("span", { style: {
 				width: "18px",
 				flex: "none"
-			} }), nameText(label), ...actions));
+			} }), nameText(label, sourceLabel), ...actions));
 			return h(CollapsibleRoot, {
 				key,
 				open: disclosure.open,
@@ -10825,18 +11105,23 @@ function apply(ctx) {
 			}, h("span", {
 				className: "ci-chevron",
 				"aria-hidden": true
-			}, chevronIcon$1), nameText(label)), ...actions), h(CollapsiblePanel, { className: "ci-collapse" }, h("div", { className: "ci-description" }, description)));
+			}, chevronIcon$1), nameText(label, sourceLabel)), ...actions), h(CollapsiblePanel, { className: "ci-collapse" }, h("div", { className: "ci-description" }, description)));
 		};
 		/**
 		* Put a skill's slash command into the composer — never auto-submit:
 		* whether to send is the user's call (Enter). A non-empty draft is
 		* appended to, never replaced. Works for disabled skills too: the
 		* disable shadow keeps userInvocable: true by design.
+		*
+		* The draft comes from the live input-state selector: the old
+		* `props.input` snapshot is gone in newer hosts, and reading a stale
+		* snapshot would REPLACE the user's draft instead of appending.
 		*/
+		const composerDraft = props.useInput === void 0 ? props.input?.draft ?? "" : props.useInput((state) => state.draft);
 		const insertCommand = (name) => {
 			const actions = props.inputActions;
 			if (actions === void 0) return;
-			const draft = props.input?.draft ?? "";
+			const draft = composerDraft;
 			actions.setDraft(draft.trim() === "" ? `/${name} ` : `${draft} /${name} `);
 			close();
 		};
@@ -10868,7 +11153,7 @@ function apply(ctx) {
 			insertButton(skill.name),
 			blockedChip(blocked[skill.name] ?? 0),
 			switchControl("skill", skill.name, skill.enabled)
-		]);
+		], ROW_ROOT_CLASS);
 		const mcpToolRow = (tool, serverEnabled) => disclosureRow$1(`mcp-tool:${tool.name}`, tool.enabled, tool.label, tool.description, [blockedChip(blocked[tool.name] ?? 0), serverEnabled ? switchControl("mcp-tool", tool.name, tool.enabled) : null], MCP_TOOL_ROOT_CLASS);
 		const serverRow = (server) => {
 			const serverBlocked = server.tools.reduce((sum, tool) => sum + (blocked[tool.name] ?? 0), 0);
@@ -10981,7 +11266,7 @@ function apply(ctx) {
 			value: "system",
 			className: "ci-tab",
 			"aria-label": t("tab.system.aria", { count: totals.systemTools })
-		}, `${t("tab.system")} ${totals.systemTools}`)), h(TabsPanel, { value: "skills" }, skills.length === 0 && payload !== null && !snap.loading ? emptyNote(t("empty.skills")) : h("div", {}, ...skills.map(skillRow))), h(TabsPanel, { value: "mcp" }, mcp.length === 0 && payload !== null && !snap.loading ? emptyNote(t("empty.mcp")) : h("div", {}, ...mcp.map(serverRow))), h(TabsPanel, { value: "system" }, systemTools.length === 0 && payload !== null && !snap.loading ? emptyNote(t("empty.system")) : h("div", {}, ...systemTools.map(systemRow))))];
+		}, `${t("tab.system")} ${totals.systemTools}`)), h(TabsPanel, { value: "skills" }, skills.length === 0 && payload !== null && !snap.loading ? emptyNote(t("empty.skills")) : h("div", {}, ...groupBySource(skills, (s) => s.group ?? s.source).flatMap(([groupKey, items], i) => [sourceSectionHeader(groupKey, items[0].source, items.length, i === 0, items.find((item) => item.path !== void 0)?.path, items.some((item) => item.path !== void 0)), ...items.map(skillRow)]))), h(TabsPanel, { value: "mcp" }, mcp.length === 0 && payload !== null && !snap.loading ? emptyNote(t("empty.mcp")) : h("div", {}, ...groupBySource(mcp, (s) => s.source === void 0 || s.source === "host" ? "host" : `preset:${s.source}`).flatMap(([groupKey, items], i) => [sourceSectionHeader(groupKey, items[0].source ?? "host", items.length, i === 0, items.find((item) => item.path !== void 0)?.path, true), ...items.map(serverRow)]))), h(TabsPanel, { value: "system" }, systemTools.length === 0 && payload !== null && !snap.loading ? emptyNote(t("empty.system")) : h("div", {}, ...systemTools.map(systemRow))))];
 		return h(PopoverRoot, {
 			open: snap.open,
 			onOpenChange: syncOpen
@@ -11018,7 +11303,7 @@ function apply(ctx) {
 			"aria-label": t("panel.aria"),
 			style: {
 				boxSizing: "border-box",
-				width: "360px",
+				width: "480px",
 				maxHeight: "min(60vh, var(--available-height, 60vh))",
 				overflowY: "auto",
 				padding: "10px 12px",