dsh-capability-panel 1.2.0 → 1.3.0

package/lib/client.js

@@ -32,10 +32,10 @@ let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
-let react_dom = require("react-dom");
-react_dom = __toESM(react_dom);
 let __deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 __deepseek_ai_dsh_client_ui_primitives = __toESM(__deepseek_ai_dsh_client_ui_primitives);
+let react_dom = require("react-dom");
+react_dom = __toESM(react_dom);
 
 //#region src/wire.ts
 const isRecord$1 = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
@@ -413,6 +413,8 @@ const zh = {
 	"group.skills": "技能 ({shown}/{total})",
 	"group.mcp": "MCP ({shown}/{total})",
 	"group.system": "系统工具 ({shown}/{total})",
+	"group.systemTools": "系统工具",
+	"group.count": "{shown}/{total}",
 	"tab.all": "全部",
 	"tab.skills": "技能",
 	"tab.mcp": "MCP",
@@ -427,6 +429,8 @@ const zh = {
 	"filter.count": "匹配 {shown} / {total} 项",
 	"footer.feedback": "反馈问题",
 	"footer.feedbackHint": "在 GitHub 上打开能力面板的 issue 页",
+	"footer.openSettings": "全局配置",
+	"footer.openSettingsHint": "打开设置并进入「能力面板」页",
 	"disclosure.expand": "展开 {subject} 的{detail}",
 	"disclosure.collapse": "收起 {subject} 的{detail}",
 	"disclosure.pinned": "{subject} 的{detail}（筛选时保持展开）",
@@ -482,6 +486,8 @@ const en = {
 	"group.skills": "Skills ({shown}/{total})",
 	"group.mcp": "MCP ({shown}/{total})",
 	"group.system": "System tools ({shown}/{total})",
+	"group.systemTools": "System tools",
+	"group.count": "{shown}/{total}",
 	"tab.all": "All",
 	"tab.skills": "Skills",
 	"tab.mcp": "MCP",
@@ -496,6 +502,8 @@ const en = {
 	"filter.count": "{shown} / {total} matched",
 	"footer.feedback": "Report an issue",
 	"footer.feedbackHint": "Open the capability panel’s issues on GitHub",
+	"footer.openSettings": "Global settings",
+	"footer.openSettingsHint": "Open Settings on the Capability Panel page",
 	"disclosure.expand": "Expand {detail} for {subject}",
 	"disclosure.collapse": "Collapse {detail} for {subject}",
 	"disclosure.pinned": "{detail} for {subject} (kept open while filtering)",
@@ -553,6 +561,7 @@ const TOK = {
 	menuBg: "var(--dsw-specific-menu, #ffffff)",
 	menuBorder: "var(--dsw-alias-border-inverted, rgba(0,0,0,.1))",
 	menuShadow: "var(--dsw-shadow-lv3, 0 12px 32px rgba(0,0,0,.22))",
+	menuBlur: "var(--dsw-menu-backdrop-filter, none)",
 	bgBase: "var(--dsw-alias-bg-base, #ffffff)",
 	fontFamily: "var(--dsw-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif)",
 	success: "var(--dsw-alias-state-success-primary, #22c55e)",
@@ -584,31 +593,36 @@ const PANEL_CSS = [
 	".ci-description{padding:3px 0 0 24px;line-height:18px;color:var(--dsw-alias-label-tertiary,#81858c);word-break:break-word}",
 	".ci-chevron{display:grid;place-items:center;width:18px;height:18px;flex:none;color:var(--dsw-alias-label-tertiary,#81858c);border-radius:4px}",
 	".ci-chevron svg{transition:transform .12s var(--ds-ease-in-out,ease)}",
-	".ci-server-trigger[aria-expanded=\"true\"] .ci-chevron svg,.ci-disclosure-trigger[aria-expanded=\"true\"] .ci-chevron svg{transform:rotate(90deg)}",
-	".ci-tabs{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--dsw-alias-bg-base,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.04))}",
+	".ci-server-trigger[aria-expanded=\"true\"] .ci-chevron svg,.ci-disclosure-trigger[aria-expanded=\"true\"] .ci-chevron svg,.ci-preset-part-trigger[aria-expanded=\"true\"] .ci-chevron svg{transform:rotate(90deg)}",
+	".ci-tabs{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06))}",
 	".ci-tab{flex:1;height:24px;border:none;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary,#61666b);font:inherit;font-size:12px;line-height:1;cursor:pointer;font-variant-numeric:tabular-nums;padding:0 4px}",
 	".ci-tab:hover{color:var(--dsw-alias-label-primary,#0f1115)}",
-	".ci-tab[data-active]{background:var(--dsw-specific-menu,#fff);color:var(--dsw-alias-label-primary,#0f1115);box-shadow:0 1px 2px rgba(0,0,0,.08)}",
-	".ci-preset-section{max-width:720px;color:var(--dsw-alias-label-secondary,#61666b)}",
-	".ci-settings-title{margin:0 0 6px;color:var(--dsw-alias-label-primary,#0f1115);font-size:18px;line-height:26px}",
-	".ci-settings-intro,.ci-settings-description,.ci-settings-note{margin:0 0 16px;line-height:20px;color:var(--dsw-alias-label-tertiary,#81858c)}",
+	".ci-tab[data-active]{background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#0f1115);box-shadow:var(--dsw-elevation-soft,0 1px 2px rgba(0,0,0,.08))}",
+	".ci-preset-section{width:100%;max-width:760px;color:var(--dsw-alias-label-primary,#0f1115);display:flex;flex-direction:column;gap:14px}",
+	".ci-settings-title{margin:0;color:var(--dsw-alias-label-primary,#0f1115);font-size:18px;font-weight:600;line-height:26px}",
+	".ci-settings-intro,.ci-settings-description,.ci-settings-note{margin:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary,#81858c)}",
 	".ci-settings-note{padding:10px 12px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.1));border-radius:8px}",
-	".ci-preset-toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:10px 0}",
-	".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: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-toolbar{display:flex;gap:10px;align-items:center;margin:0}",
+	".ci-search{position:relative;flex:1 1 auto;min-width:180px;display:flex;align-items:center;color:var(--dsw-alias-label-tertiary,#81858c)}",
+	".ci-search>svg{position:absolute;left:12px;pointer-events:none}",
+	".ci-preset-filter{width:100%;height:36px;box-sizing:border-box;padding:0 34px 0 36px;border:.5px solid var(--dsw-alias-border-l4,rgba(0,0,0,.16));border-radius:var(--dsw-radius-md,12px);background-color:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#0f1115);font:inherit;font-size:13px;font-weight:400;outline:none}",
+	".ci-preset-filter:focus-visible{border-color:var(--dsw-alias-state-business-primary,#4176e6);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsw-alias-state-business-primary,#4176e6) 18%,transparent)}",
+	".ci-preset-part{display:flex;flex-direction:column;gap:10px;margin:0;padding:14px 0 0;border-top:.5px solid var(--dsw-alias-border-l2,rgba(0,0,0,.1))}",
+	".ci-preset-part:first-of-type{border-top:0;padding-top:0}",
+	".ci-preset-part-trigger{display:flex;align-items:center;gap:8px;min-height:32px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}",
+	".ci-preset-part-trigger:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px;border-radius:4px}",
+	".ci-preset-part-title{margin:0;font-size:14px;font-weight:400;line-height:22px;color:var(--dsw-alias-label-primary,#0f1115)}",
+	".ci-preset-part-sub{margin:-4px 0 0 26px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary,#81858c);font-variant-numeric:tabular-nums}",
+	".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-interactive-bg-hover,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}",
-	".ci-preset-picker-label{display:grid;gap:6px;color:var(--dsw-alias-label-primary,#0f1115);font-weight:600}",
-	".ci-preset-picker-trigger{height:28px;display:flex;align-items:center;gap:4px;padding:0 4px 0 8px;border:none;border-radius:24px;background:transparent;color:var(--dsw-alias-label-secondary,#61666b);font-size:13px;font-weight:500;line-height:20px;cursor:pointer;outline:none;max-width:280px}",
+	".ci-preset-picker-trigger{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:none;border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-module-platform,rgba(38,49,72,.06));color:var(--dsw-alias-label-primary,#0f1115);font:inherit;font-size:14px;font-weight:400;line-height:22px;cursor:pointer;outline:none;max-width:280px;flex:none;white-space:nowrap}",
 	".ci-preset-picker-trigger:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06))}",
-	".ci-preset-picker-trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-border-l3,rgba(0,0,0,.16))}",
+	".ci-preset-picker-trigger:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px}",
 	".ci-preset-picker-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}",
-	".ci-preset-picker-chevron{color:var(--dsw-alias-label-caption,#81858c);flex:none;display:inline-grid;place-items:center;transition:transform .12s}",
+	".ci-preset-picker-chevron{color:var(--dsw-alias-label-tertiary,#81858c);flex:none;display:inline-grid;place-items:center;transition:transform .12s}",
 	".ci-preset-picker-chevron-open{transform:rotate(180deg)}",
 	".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}",
@@ -620,7 +634,7 @@ const PANEL_CSS = [
 	".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{margin:0}",
 	".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}",
@@ -637,6 +651,7 @@ const PANEL_CSS = [
 	".ci-feedback-link:hover{color:var(--dsw-alias-label-primary,#0f1115);text-decoration:underline}",
 	".ci-feedback-link:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:2px;border-radius:3px}",
 	".ci-feedback-icon{display:inline-grid;place-items:center;flex:none}",
+	".ci-settings-link{border:0;background:none;padding:0;font-family:inherit}",
 	"@media (prefers-reduced-motion: reduce){.ci-thumb,.ci-panel,.ci-collapse,.ci-chevron svg{transition:none !important}}"
 ].join("\n");
 
@@ -1969,14 +1984,22 @@ const SwitchThumb = /* @__PURE__ */ react.forwardRef(function SwitchThumb$1(comp
 /**
 * The capability switch, in one place for both panels.
 *
-* The two panels each had their own copy, and the copies had already drifted:
-* the thumb was a circle in one and a pill in the other, with different
-* transition durations and shadows. Nobody noticed, which is the point --
-* "how a control looks" belongs to the design system, while "what a row is
-* made of" belongs to each panel, so only the latter is written twice.
+* dsh 0.1.7 ships a design-system `Switch` (36×20 capsule, brand-primary on
+* state, its own disabled dimming and focus ring) — using it keeps the panel's
+* toggles pixel-identical to every settings page the host ships, which is the
+* alignment this file exists for. Hosts older than that export fall back to
+* the local Base UI rendition below, so one build still serves both
+* generations; the probe runs per call, the same way the icon table resolves.
 */
 function capabilitySwitch(options) {
 	const inert = options.disabled || options.busy;
+	const HostSwitch = __deepseek_ai_dsh_client_ui_primitives.Switch;
+	if (HostSwitch !== void 0) return react.createElement(HostSwitch, {
+		checked: options.checked,
+		onChange: options.onCheckedChange,
+		label: options.label,
+		disabled: inert
+	});
 	return react.createElement(SwitchRoot, {
 		className: "ci-switch",
 		checked: options.checked,
@@ -4553,6 +4576,45 @@ const TabsList = /* @__PURE__ */ react.forwardRef(function TabsList$1(componentP
 	});
 });
 
+//#endregion
+//#region src/client/icons.ts
+/** Rendered when a host generation has neither name: the panel stays usable. */
+const MissingIcon = () => null;
+/**
+* Pick the first export name the host's primitives package actually provides.
+* Exported separately from the module-level constants so tests can drive every
+* branch with a fake table.
+*/
+function pickIcon(table$1, modern, legacy) {
+	const found = table$1[modern] ?? table$1[legacy];
+	return typeof found === "function" ? found : MissingIcon;
+}
+const table = __deepseek_ai_dsh_client_ui_primitives;
+const IconChevronRight = pickIcon(table, "IconChevronRightOutlineRegular", "IconChevronRightOutline14");
+const IconContextInjection = pickIcon(table, "IconContextInjectionOutlineRegular", "IconContextInjectionOutline16");
+const IconFolderClose = pickIcon(table, "IconFolderCloseRegular", "IconFolderClose16");
+const IconSend = pickIcon(table, "IconSendOutlineRegular", "IconSendOutline14");
+const IconSearch = pickIcon(table, "IconSearchOutlineRegular", "IconSearchOutline16");
+const IconRefresh = pickIcon(table, "IconRefreshOutlineRegular", "IconRefreshOutline14");
+const IconChevronDown = pickIcon(table, "IconChevronDownOutlineRegular", "IconChevronDownOutline14");
+const IconSettings = pickIcon(table, "IconSettingsOutlineRegular", "IconSettingsOutline16");
+/**
+* Whether the host ships the 0.1.7 stroke-weight icon set. Exported as a
+* function so tests can drive both branches; the module constant resolves it
+* against the real package.
+*
+* One consumer: the footer settings entry. The `settings.open` keybinding that
+* entry drives shipped in the SAME host generation as the renamed icon set
+* (verified: 0.1.6's settings bundle has no such binding), so this is the
+* closest client-visible signal that the shortcut exists. If a future host
+* renames icons again this reads false and the entry hides — the safe
+* direction.
+*/
+function hasModernShell(table$1) {
+	return typeof table$1["IconSettingsOutlineRegular"] === "function";
+}
+const HOST_HAS_MODERN_SHELL = hasModernShell(table);
+
 //#endregion
 //#region src/client/disclosure-row.ts
 /**
@@ -4667,7 +4729,8 @@ function parsePresetToolPayload(value) {
 	for (const raw of rawPresets) {
 		if (!isRecord(raw)) return null;
 		const { id, name, description, broken, trust, skills: rawSkills, mcp: rawMcp, systemTools: rawSystem } = raw;
-		if (typeof id !== "string" || typeof name !== "string" || trust !== "system" && trust !== "user") return null;
+		if (typeof id !== "string" || typeof name !== "string") return null;
+		if (trust !== void 0 && trust !== "system" && trust !== "user") return null;
 		if (!Array.isArray(rawMcp) || !Array.isArray(rawSystem) || !Array.isArray(rawSkills)) return null;
 		if (description !== void 0 && typeof description !== "string") return null;
 		if (broken !== void 0 && typeof broken !== "string") return null;
@@ -4701,7 +4764,7 @@ function parsePresetToolPayload(value) {
 			name,
 			...description === void 0 ? {} : { description },
 			...broken === void 0 ? {} : { broken },
-			trust,
+			...trust === void 0 ? {} : { trust },
 			skills,
 			mcp,
 			systemTools
@@ -4914,6 +4977,7 @@ function PresetToolSection(props) {
 	}, []);
 	const [query, setQuery] = react.useState("");
 	const [expanded, setExpanded] = react.useState({});
+	const [partOpen, setPartOpen] = react.useState({});
 	const [kind, setKind] = react.useState("all");
 	const [pickerOpen, setPickerOpen] = react.useState(false);
 	const [reconnecting, setReconnecting] = react.useState(null);
@@ -5014,7 +5078,7 @@ function PresetToolSection(props) {
 				opacity: 0,
 				transition: "opacity 0.15s"
 			}
-		}, react.createElement(__deepseek_ai_dsh_client_ui_primitives.IconFolderClose16, { size: 12 })) : null, `${label} (${items.length})`), rule(true)));
+		}, react.createElement(IconFolderClose, { size: 12 })) : 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);
@@ -5096,18 +5160,29 @@ function PresetToolSection(props) {
 			systemTools: selected.systemTools.length
 		};
 		const groups = [];
-		const group = (key, label, rows) => {
+		const group = (key, title, rows, total, shown) => {
 			if (kind !== "all" && kind !== key) return;
 			if (rows.length === 0) return;
-			groups.push(react.createElement("section", {
+			const open = filtering || (partOpen[key] ?? true);
+			groups.push(react.createElement(CollapsibleRoot, {
 				key,
-				className: "ci-preset-part"
-			}, react.createElement("h3", { className: "ci-preset-part-title" }, label), react.createElement("ul", { className: "ci-preset-tool-list" }, ...rows)));
+				className: "ci-preset-part",
+				open,
+				onOpenChange: (next) => {
+					setPartOpen((prev) => ({
+						...prev,
+						[key]: next
+					}));
+				}
+			}, react.createElement(CollapsibleTrigger, { className: "ci-preset-part-trigger" }, react.createElement("span", {
+				className: "ci-chevron",
+				"aria-hidden": true
+			}, chevronIcon), react.createElement("h3", { className: "ci-preset-part-title" }, title)), react.createElement("p", { className: "ci-preset-part-sub" }, t("group.count", {
+				shown,
+				total
+			})), react.createElement(CollapsiblePanel, { className: "ci-collapse" }, react.createElement("ul", { className: "ci-preset-tool-list" }, ...rows))));
 		};
-		group("skills", t("group.skills", {
-			shown: view.skills.length,
-			total: totals.skills
-		}), 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))]));
+		group("skills", t("tab.skills"), 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))]), totals.skills, view.skills.length);
 		const serverRow = (server) => {
 			const key = `mcp:${server.server}`;
 			const disclosure = resolveDisclosure(expanded[key] === true, filtering);
@@ -5151,16 +5226,10 @@ function PresetToolSection(props) {
 			}, react.createElement("span", {
 				className: "ci-reconnect-glyph",
 				"aria-hidden": true
-			}, react.createElement(__deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline14, { size: 12 })), t("action.reload.label")) : null), react.createElement(CollapsiblePanel, { className: "ci-collapse" }, react.createElement("ul", { className: "ci-preset-tool-list" }, ...server.tools.map((tool) => toolRow(tool, selected.id, true))))));
+			}, react.createElement(IconRefresh, { size: 12 })), t("action.reload.label")) : null), 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
-		}), 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
-		}), view.systemTools.map((tool) => toolRow(tool, selected.id, false)));
+		group("mcp", t("tab.mcp"), 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))]), totals.mcp, view.mcp.length);
+		group("system", t("group.systemTools"), view.systemTools.map((tool) => toolRow(tool, selected.id, false)), totals.systemTools, view.systemTools.length);
 		if (groups.length === 0) return react.createElement("p", null, filtering ? t("empty.match") : t("preset.noTools"));
 		return react.createElement(react.Fragment, null, ...groups);
 	};
@@ -5173,7 +5242,21 @@ function PresetToolSection(props) {
 	}, t("status.loading")) : null, state.payload === null ? null : react.createElement(react.Fragment, null, writable ? null : react.createElement("p", {
 		role: "note",
 		className: "ci-settings-note"
-	}, t("preset.readonly")), react.createElement("div", { className: "ci-preset-toolbar" }, react.createElement("span", { className: "ci-preset-picker-label" }, react.createElement("span", null, t("preset.choose")), react.createElement(__deepseek_ai_dsh_client_ui_primitives.Menu, {
+	}, t("preset.readonly")), react.createElement("div", { className: "ci-preset-toolbar" }, react.createElement("div", { className: "ci-search" }, react.createElement(IconSearch, { size: 16 }), react.createElement(Input, {
+		className: "ci-filter ci-preset-filter",
+		value: query,
+		placeholder: t("filter.placeholder"),
+		"aria-label": t("filter.aria"),
+		autoComplete: "off",
+		spellCheck: false,
+		name: "ci-preset-filter",
+		onChange: (event) => {
+			setQuery(event.target.value);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && filtering) setQuery("");
+		}
+	})), react.createElement(__deepseek_ai_dsh_client_ui_primitives.Menu, {
 		open: pickerOpen,
 		anchor: react.createElement("button", {
 			type: "button",
@@ -5187,7 +5270,7 @@ function PresetToolSection(props) {
 		}, react.createElement("span", { className: "ci-preset-picker-name" }, selected?.name ?? ""), react.createElement("span", {
 			className: `ci-preset-picker-chevron${pickerOpen ? " ci-preset-picker-chevron-open" : ""}`,
 			"aria-hidden": true
-		}, react.createElement(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, { size: 14 }))),
+		}, react.createElement(IconChevronDown, { size: 14 }))),
 		items: state.payload.presets.map((preset) => ({
 			id: preset.id,
 			label: preset.name
@@ -5200,43 +5283,58 @@ function PresetToolSection(props) {
 		onClose: () => {
 			setPickerOpen(false);
 		}
-	})), react.createElement(Input, {
-		className: "ci-filter ci-preset-filter",
-		value: query,
-		placeholder: t("filter.placeholder"),
-		"aria-label": t("filter.aria"),
-		autoComplete: "off",
-		spellCheck: false,
-		name: "ci-preset-filter",
-		onChange: (event) => {
-			setQuery(event.target.value);
-		},
-		onKeyDown: (event) => {
-			if (event.key === "Escape" && filtering) setQuery("");
-		}
-	})), selected === void 0 ? null : react.createElement(TabsRoot, {
-		value: kind,
-		onValueChange: (value) => {
-			setKind(value);
-		},
-		className: "ci-preset-kinds"
-	}, react.createElement(TabsList, {
-		"aria-label": t("preset.kindAria"),
-		className: "ci-tabs"
-	}, react.createElement(TabsTab, {
-		value: "all",
-		className: "ci-tab"
-	}, t("tab.all")), react.createElement(TabsTab, {
-		value: "skills",
-		className: "ci-tab"
-	}, `${t("tab.skills")} ${selected.skills.length}`), react.createElement(TabsTab, {
-		value: "mcp",
-		className: "ci-tab"
-	}, `${t("tab.mcp")} ${selected.mcp.length}`), react.createElement(TabsTab, {
-		value: "system",
-		className: "ci-tab",
-		"aria-label": t("tab.system.aria", { count: selected.systemTools.length })
-	}, `${t("tab.system")} ${selected.systemTools.length}`))), selected?.description === void 0 ? null : react.createElement("p", { className: "ci-settings-description" }, selected.description), view === null || !filtering ? null : react.createElement("p", {
+	})), selected === void 0 ? null : (() => {
+		const Segmented = __deepseek_ai_dsh_client_ui_primitives.SegmentedControl;
+		if (Segmented !== void 0) return react.createElement(Segmented, {
+			id: "ci-preset-kinds",
+			label: t("preset.kindAria"),
+			value: kind,
+			options: [
+				{
+					value: "all",
+					label: t("tab.all")
+				},
+				{
+					value: "skills",
+					label: `${t("tab.skills")} ${selected.skills.length}`
+				},
+				{
+					value: "mcp",
+					label: `${t("tab.mcp")} ${selected.mcp.length}`
+				},
+				{
+					value: "system",
+					label: `${t("tab.system")} ${selected.systemTools.length}`
+				}
+			],
+			onChange: (next) => {
+				setKind(next);
+			}
+		});
+		return react.createElement(TabsRoot, {
+			value: kind,
+			onValueChange: (value) => {
+				setKind(value);
+			},
+			className: "ci-preset-kinds"
+		}, react.createElement(TabsList, {
+			"aria-label": t("preset.kindAria"),
+			className: "ci-tabs"
+		}, react.createElement(TabsTab, {
+			value: "all",
+			className: "ci-tab"
+		}, t("tab.all")), react.createElement(TabsTab, {
+			value: "skills",
+			className: "ci-tab"
+		}, `${t("tab.skills")} ${selected.skills.length}`), react.createElement(TabsTab, {
+			value: "mcp",
+			className: "ci-tab"
+		}, `${t("tab.mcp")} ${selected.mcp.length}`), react.createElement(TabsTab, {
+			value: "system",
+			className: "ci-tab",
+			"aria-label": t("tab.system.aria", { count: selected.systemTools.length })
+		}, `${t("tab.system")} ${selected.systemTools.length}`)));
+	})(), selected?.description === void 0 ? null : react.createElement("p", { className: "ci-settings-description" }, selected.description), view === null || !filtering ? null : react.createElement("p", {
 		"aria-live": "polite",
 		className: "ci-settings-description"
 	}, t("filter.count", {
@@ -10924,6 +11022,75 @@ const STATE_ORDER = {
 function sortSkills(skills) {
 	return [...skills].sort((a, b) => STATE_ORDER[a.state] - STATE_ORDER[b.state] || a.name.localeCompare(b.name));
 }
+/**
+* Platform for the settings shortcut's modifier: the host binds
+* `settings.open` to Cmd+, on macOS and Ctrl+, elsewhere (the `primary`
+* modifier in its binding table resolves the same way).
+*/
+function isMacPlatform() {
+	const platform$2 = navigator.platform ?? "";
+	return platform$2 !== "" ? /mac/i.test(platform$2) : /mac/i.test(navigator.userAgent ?? "");
+}
+/**
+* Open the Settings modal by driving its official keybinding through the input
+* pipeline. The host's shortcuts service listens for `keydown` on `window`
+* with no `isTrusted` gate, so a synthesized event is processed exactly like a
+* physical press — region "page" (no editable/terminal ancestor), no open
+* shortcut-modal, both of which the `settings.open` command accepts.
+*
+* This deliberately uses the input seam, not a host internal: the shortcuts
+* service is not visible to plugin contexts, and the settings shell exposes no
+* section deep-link (`openSection` stays internal to the shell). Caveats,
+* accepted over shipping no entry at all: a user who rebound the settings
+* shortcut changed what this gesture triggers, and hosts older than 0.1.7 have
+* no such binding at all — the caller gates the entry on `HOST_HAS_MODERN_SHELL`.
+*/
+function dispatchOpenSettings() {
+	const mac$1 = isMacPlatform();
+	window.dispatchEvent(new KeyboardEvent("keydown", {
+		code: "Comma",
+		key: ",",
+		metaKey: mac$1,
+		ctrlKey: !mac$1,
+		bubbles: true,
+		cancelable: true
+	}));
+}
+/**
+* Select our own section inside an open Settings dialog by clicking its nav
+* row — the official user interaction, located through two anchors that cannot
+* drift with host internals: the dialog's own `data-shortcut-modal="settings"`
+* attribute (the shortcut system's public hook) and OUR OWN localized section
+* label as the row's text. Returns false when the row is not (yet) there, so
+* the caller can retry while the modal mounts.
+*/
+function selectCapabilitySection(label) {
+	const buttons = document.querySelector("[data-shortcut-modal=\"settings\"]")?.querySelectorAll("nav button") ?? [];
+	for (const button of buttons) if (button.textContent?.trim() === label) {
+		button.click();
+		return true;
+	}
+	return false;
+}
+/**
+* Open Settings ON the capability-panel section. The shell offers no section
+* deep-link, so this drives the two official gestures in sequence: the
+* settings.open keybinding (which TOGGLES — skipped when the dialog is already
+* open, or it would close it), then a nav-row click once the dialog has
+* mounted. The retry is bounded; if the row never appears the user still lands
+* on the settings landing page, which is the pre-existing behavior.
+*/
+function openGlobalSettings(sectionLabel) {
+	close();
+	if (document.querySelector("[data-shortcut-modal=\"settings\"]") === null) dispatchOpenSettings();
+	let attempts = 0;
+	const trySelect = () => {
+		attempts += 1;
+		if (selectCapabilitySection(sectionLabel)) return;
+		if (attempts < 20) requestAnimationFrame(trySelect);
+	};
+	requestAnimationFrame(trySelect);
+}
 function apply(ctx) {
 	const react$1 = react;
 	const h = react$1.createElement;
@@ -10946,14 +11113,14 @@ function apply(ctx) {
 		};
 	}, "capability-panel: stylesheet");
 	/** Host iconography: the panel inspects what lands in the session's context. */
-	const layersIcon = (size$3) => h(__deepseek_ai_dsh_client_ui_primitives.IconContextInjectionOutline16, { size: size$3 });
+	const layersIcon = (size$3) => h(IconContextInjection, { size: size$3 });
 	/** Magnifier sitting inside the filter input. */
-	const searchIcon = (size$3) => h(__deepseek_ai_dsh_client_ui_primitives.IconSearchOutline16, { size: size$3 });
+	const searchIcon = (size$3) => h(IconSearch, { size: size$3 });
 	/** Paper plane: the row action lands the command in the composer,
 	*  ready for the user's own Enter. */
-	const insertIcon = (size$3) => h(__deepseek_ai_dsh_client_ui_primitives.IconSendOutline14, { size: size$3 });
+	const insertIcon = (size$3) => h(IconSend, { size: size$3 });
 	/** Circular arrows: pull a declared-but-offline server's connection up now. */
-	const reconnectIcon = (size$3) => h(__deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline14, { size: size$3 });
+	const reconnectIcon = (size$3) => h(IconRefresh, { size: size$3 });
 	/** The GitHub mark. Not in the host icon set (brand logos are not shipped
 	*  there), so this one path is inlined for the feedback link's recognizability. */
 	const githubIcon = (size$3) => h("svg", {
@@ -11119,7 +11286,7 @@ function apply(ctx) {
 					opacity: 0,
 					transition: "opacity 0.15s"
 				}
-			}, h(__deepseek_ai_dsh_client_ui_primitives.IconFolderClose16, { size: 12 })) : null, `${label} (${count})`), rule(true));
+			}, h(IconFolderClose, { size: 12 })) : null, `${label} (${count})`), rule(true));
 		};
 		/** Group items by source, preserving order within each group. */
 		const groupBySource = (items, getSource) => {
@@ -11191,7 +11358,7 @@ function apply(ctx) {
 			}
 		});
 		/** Right chevron the disclosure CSS rotates 90° when expanded. */
-		const chevronIcon$1 = h(__deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, { size: 12 });
+		const chevronIcon$1 = h(IconChevronRight, { size: 12 });
 		const groupLabel = (text, first) => h("div", {
 			key: `group:${text}`,
 			style: {
@@ -11478,9 +11645,12 @@ function apply(ctx) {
 				boxSizing: "border-box",
 				width: "480px",
 				maxHeight: "min(60vh, var(--available-height, 60vh))",
-				overflowY: "auto",
+				display: "flex",
+				flexDirection: "column",
+				overflow: "hidden",
 				padding: "10px 12px",
 				background: TOK.menuBg,
+				backdropFilter: TOK.menuBlur,
 				color: TOK.textSecondary,
 				border: `1px solid ${TOK.menuBorder}`,
 				borderRadius: "12px",
@@ -11490,7 +11660,14 @@ function apply(ctx) {
 				lineHeight: "20px",
 				cursor: "default"
 			}
-		}, h("div", { style: { marginBottom: "6px" } }, h("div", { style: {
+		}, h("div", { style: {
+			flex: "1 1 auto",
+			minHeight: 0,
+			overflowY: "auto",
+			overflowX: "hidden",
+			margin: "0 -12px",
+			padding: "0 12px"
+		} }, h("div", { style: { marginBottom: "6px" } }, h("div", { style: {
 			display: "flex",
 			alignItems: "center",
 			gap: "6px"
@@ -11567,11 +11744,27 @@ function apply(ctx) {
 		}, t("filter.count", {
 			shown: view?.total ?? 0,
 			total: totalAll
-		})) : null), ...notices, ...body, h("div", { style: {
+		})) : null), ...notices, ...body), h("div", { style: {
+			flex: "none",
 			display: "flex",
-			justifyContent: "flex-end",
-			marginTop: "10px"
-		} }, h("a", {
+			justifyContent: "space-between",
+			alignItems: "center",
+			marginTop: "6px",
+			paddingTop: "8px",
+			borderTop: "0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.1))"
+		} }, (() => {
+			return HOST_HAS_MODERN_SHELL ? h("button", {
+				type: "button",
+				className: "ci-feedback-link ci-settings-link",
+				title: t("footer.openSettingsHint"),
+				onClick: () => {
+					openGlobalSettings(t("preset.nav"));
+				}
+			}, h("span", {
+				className: "ci-feedback-icon",
+				"aria-hidden": true
+			}, h(IconSettings, { size: 12 })), t("footer.openSettings")) : h("span");
+		})(), h("a", {
 			href: FEEDBACK_URL,
 			target: "_blank",
 			rel: "noopener noreferrer",