@fonlan/dsh-quick-commands 0.1.4 → 0.1.6

package/lib/client.js

@@ -5,6 +5,7 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react = require("react");
+		let react_dom = require("react-dom");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region src/client/api.ts
@@ -169,6 +170,26 @@ window.__ModuleLoader__.load({
 		* Props are the standard session/global kit of `conversation.session.header.utilities`
 		* plus this plugin's injected hooks (anchor preference + resolver).
 		*/
+		const MENU_VIEWPORT_GAP = 12;
+		const MENU_PREFERRED_WIDTH = 280;
+		/**
+		* Position the portal menu beside its button without ever entering the phone
+		* nav rail. Calculating actual pixels (rather than only CSS max-width) also
+		* means it remains correct when the header itself sits in a clipped stacking
+		* context created by a shell/mobile plugin.
+		*/
+		function positionMenu(button) {
+			const rect = button.getBoundingClientRect();
+			const minLeft = window.matchMedia("(max-width: 767px)").matches ? 68 : MENU_VIEWPORT_GAP;
+			const availableWidth = Math.max(0, window.innerWidth - minLeft - MENU_VIEWPORT_GAP);
+			const width = Math.min(MENU_PREFERRED_WIDTH, availableWidth);
+			const maxLeft = Math.max(minLeft, window.innerWidth - MENU_VIEWPORT_GAP - width);
+			return {
+				left: Math.max(minLeft, Math.min(rect.right - MENU_VIEWPORT_GAP - width, maxLeft)),
+				top: Math.min(rect.bottom + 6, Math.max(MENU_VIEWPORT_GAP, window.innerHeight - 72)),
+				width
+			};
+		}
 		/** Longest-path workspace match for a cwd (subdirectory allowed). */
 		function matchWorkspace(cwd, workspaces) {
 			if (cwd === void 0) return void 0;
@@ -203,12 +224,16 @@ window.__ModuleLoader__.load({
 			const [anchor, setAnchor] = (0, react.useState)("corner");
 			const [popupSize, setPopupSize] = (0, react.useState)(void 0);
 			const wrapRef = (0, react.useRef)(null);
+			const buttonRef = (0, react.useRef)(null);
+			const menuRef = (0, react.useRef)(null);
+			const [menuPosition, setMenuPosition] = (0, react.useState)(null);
 			(0, react.useEffect)(() => {
 				if (!popover.menuOpen) return;
 				const onPointerDown = (e) => {
 					const wrap = wrapRef.current;
-					if (wrap === null) return;
-					if (e.target instanceof Node && wrap.contains(e.target)) return;
+					const menu = menuRef.current;
+					if (!(e.target instanceof Node)) return;
+					if (wrap?.contains(e.target) || menu?.contains(e.target)) return;
 					closeMenu();
 				};
 				document.addEventListener("pointerdown", onPointerDown);
@@ -216,6 +241,25 @@ window.__ModuleLoader__.load({
 					document.removeEventListener("pointerdown", onPointerDown);
 				};
 			}, [popover.menuOpen]);
+			(0, react.useLayoutEffect)(() => {
+				if (!popover.menuOpen) {
+					setMenuPosition(null);
+					return;
+				}
+				const update = () => {
+					const button = buttonRef.current;
+					if (button !== null) setMenuPosition(positionMenu(button));
+				};
+				update();
+				window.addEventListener("resize", update);
+				window.addEventListener("scroll", update, true);
+				window.visualViewport?.addEventListener("resize", update);
+				return () => {
+					window.removeEventListener("resize", update);
+					window.removeEventListener("scroll", update, true);
+					window.visualViewport?.removeEventListener("resize", update);
+				};
+			}, [popover.menuOpen]);
 			(0, react.useEffect)(() => {
 				if (!popover.menuOpen) return;
 				let cancelled = false;
@@ -259,6 +303,7 @@ window.__ModuleLoader__.load({
 				className: "qc-head-wrap",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						ref: buttonRef,
 						type: "button",
 						className: "qc-head-btn",
 						title: workspace === void 0 ? t("noWorkspace") : t("buttonTooltip"),
@@ -269,9 +314,15 @@ window.__ModuleLoader__.load({
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlayOutline16, { size: 15 })
 					}),
-					popover.menuOpen && workspace !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "qc-menu",
+					popover.menuOpen && workspace !== void 0 && menuPosition !== null && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: menuRef,
+						className: "qc-menu qc-menu-portal",
 						role: "menu",
+						style: {
+							left: menuPosition.left,
+							top: menuPosition.top,
+							width: menuPosition.width
+						},
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "qc-menu-head",
@@ -317,7 +368,7 @@ window.__ModuleLoader__.load({
 								})]
 							}, command.name))
 						]
-					}),
+					}), document.body),
 					popover.runId !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunPopup, {
 						runId: popover.runId,
 						workspaceId: popover.workspaceId ?? "",
@@ -384,7 +435,6 @@ window.__ModuleLoader__.load({
 			}));
 			const [view, setView] = (0, react.useState)("stdout");
 			const [autoFollow, setAutoFollow] = (0, react.useState)(true);
-			const [killConfirm, setKillConfirm] = (0, react.useState)(false);
 			const [pollError, setPollError] = (0, react.useState)(null);
 			const [closing, setClosing] = (0, react.useState)(false);
 			const outputRef = (0, react.useRef)(null);
@@ -447,15 +497,13 @@ window.__ModuleLoader__.load({
 					onClose();
 				}
 			};
-			const close = () => {
-				if (state.status === "exited") {
-					onClose();
-					return;
-				}
-				setKillConfirm(true);
+			const closeOutput = () => {
+				onClose();
 			};
-			const confirmClose = () => {
-				kill();
+			const onClosePointerUp = (e) => {
+				if (e.pointerType !== "touch") return;
+				e.preventDefault();
+				closeOutput();
 			};
 			const heightFree = anchor === "corner" ? "top" : "bottom";
 			const onResizePointerDown = (e) => {
@@ -541,29 +589,12 @@ window.__ModuleLoader__.load({
 								className: "qc-popup-icon qc-popup-close",
 								title: t("runClose"),
 								"aria-label": t("runClose"),
-								onClick: close,
+								onPointerUp: onClosePointerUp,
+								onClick: closeOutput,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseOutline16, { size: 14 })
 							})
 						]
 					}),
-					killConfirm && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "qc-popup-confirm",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("runKillConfirm") }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "qc-popup-btn",
-								onClick: confirmClose,
-								children: t("runKill")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "qc-popup-btn qc-popup-btn-plain",
-								onClick: () => setKillConfirm(false),
-								children: t("runClose")
-							})
-						]
-					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "qc-popup-tabs",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -669,19 +700,29 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/client/settings-card.tsx
+		//#region \0dsh-css:/home/runner/work/dsh-quick-commands/dsh-quick-commands/src/client/settings-section.css.mjs
+		const css$1 = "/**\n * Styles for the quick-commands settings page.\n *\n * The page occupies the settings panel content column: a static header\n * (title plus a one-line summary) over the always-visible command editor.\n * Inner controls follow the built-in settings language.\n */\n\n/* page layout */\n\n.qc-page {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 720px;\n}\n.qc-page-head {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.qc-page-title {\n  margin: 0;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n.qc-page-sub {\n  margin: 0;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  font-size: 13px;\n  line-height: 1.5;\n}\n\n/* body: workspace / command-set editor */\n\n.qc-settings-body {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.qc-settings-intro {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  margin: 0;\n  line-height: 1.5;\n}\n.qc-settings-anchor {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n}\n.qc-settings-anchor-label {\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-weight: 500;\n}\n.qc-settings-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  cursor: pointer;\n}\n.qc-settings-error {\n  font-size: 12px;\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n}\n.qc-settings-empty {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  margin: 0;\n}\n.qc-settings-workspace {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 10px;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.qc-settings-workspace-head {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.qc-settings-workspace-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-settings-workspace-path {\n  font-size: 11px;\n  font-family: var(--dsw-font-family-mono, monospace);\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.qc-settings-no-commands {\n  font-size: 12px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  margin: 0;\n}\n.qc-settings-command {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n.qc-settings-field {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-1, #2a2a2d);\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 12px;\n  padding: 6px 8px;\n  outline: none;\n}\n.qc-settings-field::placeholder {\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n}\n.qc-settings-field:focus {\n  border-color: var(--dsw-alias-brand-primary, #4a9eff);\n}\n.qc-settings-field-name {\n  width: 160px;\n  flex: none;\n}\n.qc-settings-field-command {\n  flex: 1;\n  font-family: var(--dsw-font-family-mono, monospace);\n}\n.qc-settings-icon-btn {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  cursor: pointer;\n  padding: 4px;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 6px;\n}\n.qc-settings-icon-btn:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n}\n.qc-settings-add-btn {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 8px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 12px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n.qc-settings-add-btn:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n";
+		const tagId$1 = "@fonlan/dsh-quick-commands/settings-section.css#d7004149";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@fonlan/dsh-quick-commands";
+			tag.dataset.pluginCss = tagId$1;
+			tag.textContent = css$1;
+			document.head.appendChild(tag);
+		}
+		//#endregion
+		//#region src/client/settings-section.tsx
 		/**
-		* Quick-commands settings card (设置 → 插件配置): an expandable plugin card —
-		* header (title + description + chevron) collapsed by default, body reveals
-		* the workspace × command-set editor and the popup anchor preference. Body
-		* edits instant-save per change; partial rows (empty name/command) persist
-		* while the user types.
+		* Quick-commands settings page (设置 → 侧栏「快捷命令」).
 		*
-		* Mirrors the official PluginCard disclosure pattern (header button with
-		* aria-expanded, rotate-180 chevron, body separated by a top border).
+		* Registers into the "settings.section" list slot, so the page owns one entry
+		* in the settings sidebar and renders in the settings panel's content column.
+		* The header is static (title + one-line summary) over the always-visible
+		* body: the workspace / command-set editor and the popup anchor preference.
+		* Body edits instant-save per change; partial rows (empty name/command)
+		* persist while the user types.
 		*/
-		function QuickCommandsSettingsCard({ t }) {
-			const [open, setOpen] = (0, react.useState)(false);
+		function QuickCommandsSettingsSection({ t }) {
 			const [state, setState] = (0, react.useState)({
 				loaded: false,
 				entries: [],
@@ -775,26 +816,19 @@ window.__ModuleLoader__.load({
 				}
 			};
 			const title = t("cardTitle");
-			const description = t("cardDescription");
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "qc-settings-card" + (open ? " qc-settings-card-open" : ""),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: "qc-settings-header",
-					"aria-expanded": open,
-					"aria-label": `${t("collapseOrExpand")}: ${title}`,
-					onClick: () => setOpen((v) => !v),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "qc-settings-head-text",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "qc-settings-name",
-							children: title
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "qc-settings-description",
-							children: description
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, { className: "qc-settings-chevron" + (open ? " qc-settings-chevron-open" : "") })]
-				}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			const description = t("sectionSub");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "qc-page",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+					className: "qc-page-head",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "qc-page-title",
+						children: title
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "qc-page-sub",
+						children: description
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "qc-settings-body",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -930,9 +964,9 @@ window.__ModuleLoader__.load({
 			runPollFailed: "输出读取失败",
 			runLost: "运行记录已失效",
 			runNotFound: "工作区或命令未找到",
+			settingsTitle: "快捷命令",
 			cardTitle: "快速命令",
-			cardDescription: "为每个工作区配置常用命令，会话头部一键运行",
-			collapseOrExpand: "展开 / 收起",
+			sectionSub: "为每个工作区配置常用命令，会话头部一键运行",
 			cardIntro: "为每个工作区配置常用命令，运行于工作区目录。支持占位符：{workspace} 工作区路径，{cwd} 会话目录，{title} 工作区标题。",
 			cardWorkspaces: "工作区",
 			cardNoWorkspaces: "没有工作区。请在侧边栏先添加工作区。",
@@ -975,9 +1009,9 @@ window.__ModuleLoader__.load({
 			runPollFailed: "Failed to read output",
 			runLost: "Run record expired",
 			runNotFound: "Workspace or command not found",
+			settingsTitle: "Quick Commands",
 			cardTitle: "Quick commands",
-			cardDescription: "Configure common commands per workspace, run them from the session header",
-			collapseOrExpand: "Expand / collapse",
+			sectionSub: "Configure common commands per workspace, run them from the session header",
 			cardIntro: "Configure common commands per workspace; they run in the workspace directory. Placeholders: {workspace} workspace path, {cwd} session cwd, {title} workspace title.",
 			cardWorkspaces: "Workspaces",
 			cardNoWorkspaces: "No workspaces. Add one in the sidebar first.",
@@ -994,8 +1028,8 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-quick-commands/dsh-quick-commands/src/client/quick-commands.css.mjs
-		const css = "/* @fonlan/dsh-quick-commands client styles.\n   Uses theme CSS variables (--dsw-alias-*); falls back to neutral literals.\n   Constraint: this deployment's theme defines only these text tokens —\n   label-primary, label-secondary, label-tertiary, label-dimmed. READABLE\n   description copy uses label-secondary / label-tertiary (never label-dimmed,\n   which is intentionally near-invisible and reserved for disabled states). */\n\n/* ── header button (icon-only, left of Session log pill) ─────────────────── */\n.qc-head-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n/* Sized to DSH built-in header buttons (e.g. the open-in-app split button on\n   the left): 26px tall pill, 13px radius, hairline border-l4, hover uses the\n   shared --dsw-alias-interactive-bg-hover token. */\n.qc-head-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 0.5px solid var(--dsw-alias-border-l4, rgba(128, 128, 128, 0.35));\n  border-radius: 13px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  cursor: pointer;\n  padding: 0;\n}\n.qc-head-btn:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent));\n}\n.qc-head-btn:disabled {\n  color: var(--dsw-alias-label-dimmed, #666);\n  cursor: not-allowed;\n}\n.qc-head-btn svg {\n  flex: none;\n}\n\n/* ── command menu popover (anchored under the button) ────────────────────── */\n.qc-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 12px;\n  min-width: 280px;\n  max-height: 420px;\n  overflow: auto;\n  background: var(--dsw-alias-bg-overlay, #1b1b1c);\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 10px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  z-index: 50;\n  padding: 6px;\n  display: flex;\n  flex-direction: column;\n}\n.qc-menu-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px 6px;\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-menu-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-menu-ws {\n  flex: 1;\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: right;\n  margin-right: 2px;\n}\n.qc-menu-remote {\n  flex: 0 0 auto;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 2px 5px;\n  border-radius: 5px;\n  color: var(--dsw-alias-fg-on-accent, #fff);\n  background: var(--dsw-alias-accent, #4a8dff);\n  letter-spacing: 0.04em;\n}\n.qc-menu-close {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  cursor: pointer;\n  padding: 2px;\n  display: inline-flex;\n  align-items: center;\n}\n.qc-menu-empty {\n  font-size: 12px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  padding: 10px 8px;\n  margin: 0;\n}\n.qc-menu-item {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  text-align: left;\n  border: 0;\n  background: transparent;\n  border-radius: 8px;\n  padding: 6px 8px;\n  cursor: pointer;\n  width: 100%;\n}\n.qc-menu-item:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n.qc-menu-item:disabled {\n  opacity: 0.6;\n  cursor: wait;\n}\n.qc-menu-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-menu-item-cmd {\n  font-family: var(--dsw-font-family-mono, monospace);\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n/* ── live output popup ───────────────────────────────────────────────────── */\n.qc-popup {\n  position: relative; /* anchors the absolutely-positioned resize grip */\n  display: flex;\n  flex-direction: column;\n  background: var(--dsw-alias-bg-overlay, #1b1b1c);\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 12px;\n  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);\n  z-index: 60;\n  overflow: hidden;\n}\n.qc-popup-corner {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  width: 520px;\n  max-width: calc(100vw - 40px);\n  height: 340px;\n  max-height: calc(100vh - 120px);\n}\n.qc-popup-button {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 12px;\n  width: 440px;\n  max-width: calc(100vw - 40px);\n  height: 300px;\n  max-height: calc(100vh - 120px);\n}\n.qc-popup-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-popup-title {\n  flex: 1;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.qc-popup-cmd {\n  font-family: var(--dsw-font-family-mono, monospace);\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 40%;\n}\n.qc-popup-remote {\n  flex: 0 0 auto;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 3px 6px;\n  border-radius: 6px;\n  color: var(--dsw-alias-fg-on-accent, #fff);\n  background: var(--dsw-alias-accent, #4a8dff);\n  letter-spacing: 0.04em;\n}\n.qc-popup-icon {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  cursor: pointer;\n  padding: 4px;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 6px;\n}\n.qc-popup-icon:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n.qc-popup-icon:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.qc-popup-kill {\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n}\n.qc-popup-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  padding: 8px 10px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f5a623) 12%, transparent);\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-popup-btn {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 8px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 12px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n.qc-popup-btn:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n.qc-popup-btn-plain {\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n}\n.qc-popup-tabs {\n  display: flex;\n  gap: 2px;\n  padding: 6px 10px 0;\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-popup-tab {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  font-size: 12px;\n  padding: 5px 10px;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n}\n.qc-popup-tab-active {\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  border-bottom-color: var(--dsw-alias-brand-primary, #4a9eff);\n}\n.qc-popup-output {\n  flex: 1;\n  overflow: auto;\n  padding: 8px 10px;\n  font-family: var(--dsw-font-family-mono, monospace);\n  font-size: 12px;\n  line-height: 1.5;\n}\n.qc-popup-pre {\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-popup-empty {\n  margin: 0;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  font-size: 12px;\n}\n.qc-popup-error {\n  margin: 0 0 6px;\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n  font-size: 12px;\n}\n.qc-popup-foot {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n  font-size: 11px;\n}\n.qc-popup-state {\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n}\n\n/* Resize handles. The popup pins its RIGHT edge (both anchors); width is\n   always dragged from the LEFT border. Height is dragged from the TOP border\n   (corner anchor, bottom pinned) or the BOTTOM border (button anchor, top\n   pinned below the button). The free corner (top-left / bottom-left) carries\n   the diagonal grip. Pointer capture lives in header.tsx; touch-action:none\n   lets touch drags resize instead of scrolling. */\n.qc-popup-resize {\n  position: absolute;\n  z-index: 3;\n  touch-action: none;\n  user-select: none;\n}\n.qc-popup-resize-left {\n  left: 0;\n  top: 10px;\n  bottom: 10px;\n  width: 7px;\n  cursor: ew-resize;\n}\n.qc-popup-resize-top {\n  top: 0;\n  left: 10px;\n  right: 10px;\n  height: 7px;\n  cursor: ns-resize;\n}\n.qc-popup-resize-bottom {\n  bottom: 0;\n  left: 10px;\n  right: 10px;\n  height: 7px;\n  cursor: ns-resize;\n}\n.qc-popup-resize-left:hover,\n.qc-popup-resize-top:hover,\n.qc-popup-resize-bottom:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 14%, transparent);\n}\n.qc-popup-resize-corner {\n  width: 22px;\n  height: 22px;\n  z-index: 4;\n  display: flex;\n  padding: 3px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  opacity: 0.6;\n  transition: opacity .15s ease;\n}\n.qc-popup-resize-corner-tl {\n  top: 0;\n  left: 0;\n  cursor: nwse-resize;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.qc-popup-resize-corner-bl {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n  align-items: flex-end;\n  justify-content: flex-start;\n}\n.qc-popup-resize-corner:hover,\n.qc-popup-resize-corner:active {\n  opacity: 1;\n}\n\n/* ── settings card (设置 → 插件配置) — mirrors official PluginCard disclosure ── */\n.qc-settings-card {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  background: var(--dsw-alias-bg-layer-2, #1f1f21);\n  border-radius: 12px;\n  list-style: none;\n  transition: border-color .16s, background .16s;\n}\n.qc-settings-card:hover {\n  border-color: var(--dsw-alias-label-secondary, #cfd3d6);\n}\n.qc-settings-card-open {\n  background: var(--dsw-alias-bg-layer-1, #27272a);\n  border-color: var(--dsw-alias-label-secondary, #cfd3d6);\n}\n.qc-settings-header {\n  appearance: none;\n  width: 100%;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  border-radius: 12px;\n  align-items: center;\n  gap: 12px;\n  padding: 14px 16px;\n  display: flex;\n}\n.qc-settings-header:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary, #4a9eff);\n  outline-offset: -2px;\n}\n.qc-settings-head-text {\n  flex-direction: column;\n  flex: 1;\n  gap: 4px;\n  min-width: 0;\n  display: flex;\n}\n.qc-settings-name {\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n.qc-settings-description {\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  font-size: 13px;\n  line-height: 1.5;\n}\n.qc-settings-chevron {\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  flex: none;\n  transition: transform .16s;\n}\n.qc-settings-chevron-open {\n  transform: rotate(180deg);\n}\n.qc-settings-body {\n  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  margin: 0 16px;\n  padding-bottom: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.qc-settings-intro {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  margin: 8px 0 0;\n  line-height: 1.5;\n}\n.qc-settings-anchor {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n}\n.qc-settings-anchor-label {\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-weight: 500;\n}\n.qc-settings-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  cursor: pointer;\n}\n.qc-settings-error {\n  font-size: 12px;\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n}\n.qc-settings-empty {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  margin: 0;\n}\n.qc-settings-workspace {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 10px;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.qc-settings-workspace-head {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.qc-settings-workspace-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-settings-workspace-path {\n  font-size: 11px;\n  font-family: var(--dsw-font-family-mono, monospace);\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.qc-settings-no-commands {\n  font-size: 12px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  margin: 0;\n}\n.qc-settings-command {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n.qc-settings-field {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-1, #2a2a2d);\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 12px;\n  padding: 6px 8px;\n  outline: none;\n}\n.qc-settings-field::placeholder {\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n}\n.qc-settings-field:focus {\n  border-color: var(--dsw-alias-brand-primary, #4a9eff);\n}\n.qc-settings-field-name {\n  width: 160px;\n  flex: none;\n}\n.qc-settings-field-command {\n  flex: 1;\n  font-family: var(--dsw-font-family-mono, monospace);\n}\n.qc-settings-icon-btn {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  cursor: pointer;\n  padding: 4px;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 6px;\n}\n.qc-settings-icon-btn:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n}\n.qc-settings-add-btn {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 8px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 12px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n.qc-settings-add-btn:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n\n/* ── mobile fallback (dsh-mobile-nav) ──────────────────────────────────────\n   The dsh-mobile-nav plugin (≤1023px) hides the ENTIRE header utilities seat\n   with `[data-mobile-nav=\"frame\"] [data-phase] header > :first-child >\n   :last-child { display: none !important; }`, because the seat used to hold\n   only the session-log-export capsule (which it relocates to the drawer\n   footer). Our quick-run ▶ button rides that same seat, so it vanished on\n   phones.\n\n   Re-show ONLY our button: restore the seat's flex layout (out-ranking the\n   host rule via `:has(.qc-head-wrap)` specificity (0,5,1) > (0,4,1)) and keep\n   every other seat occupant hidden (the session-log capsule stays relocated\n   to the drawer footer). Desktop (no [data-mobile-nav]) is untouched. */\n[data-mobile-nav=\"frame\"] [data-phase] header > :first-child > :last-child:has(.qc-head-wrap) {\n  display: flex !important;\n  margin-left: 4px !important;\n  gap: 0 !important;\n}\n[data-mobile-nav=\"frame\"] [data-phase] header > :first-child > :last-child:has(.qc-head-wrap)\n  [data-slot=\"conversation.session.header.utilities\"] > :not(.qc-head-wrap) {\n  display: none !important;\n}\n";
-		const tagId = "@fonlan/dsh-quick-commands/quick-commands.css#8fa6888e";
+		const css = "/* @fonlan/dsh-quick-commands client styles.\n   Uses theme CSS variables (--dsw-alias-*); falls back to neutral literals.\n   Constraint: this deployment's theme defines only these text tokens —\n   label-primary, label-secondary, label-tertiary, label-dimmed. READABLE\n   description copy uses label-secondary / label-tertiary (never label-dimmed,\n   which is intentionally near-invisible and reserved for disabled states). */\n\n/* ── header button (icon-only, left of Session log pill) ─────────────────── */\n.qc-head-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n/* Sized to DSH built-in header buttons (e.g. the open-in-app split button on\n   the left): 26px tall pill, 13px radius, hairline border-l4, hover uses the\n   shared --dsw-alias-interactive-bg-hover token. */\n.qc-head-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 0.5px solid var(--dsw-alias-border-l4, rgba(128, 128, 128, 0.35));\n  border-radius: 13px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  cursor: pointer;\n  padding: 0;\n}\n.qc-head-btn:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent));\n}\n.qc-head-btn:disabled {\n  color: var(--dsw-alias-label-dimmed, #666);\n  cursor: not-allowed;\n}\n.qc-head-btn svg {\n  flex: none;\n}\n\n/* ── command menu popover (anchored under the button) ────────────────────── */\n.qc-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 12px;\n  min-width: 280px;\n  max-height: 420px;\n  overflow: auto;\n  background: var(--dsw-alias-bg-overlay, #1b1b1c);\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 10px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  z-index: 50;\n  padding: 6px;\n  display: flex;\n  flex-direction: column;\n}\n.qc-menu-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px 6px;\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-menu-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-menu-ws {\n  flex: 1;\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: right;\n  margin-right: 2px;\n}\n.qc-menu-remote {\n  flex: 0 0 auto;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 2px 5px;\n  border-radius: 5px;\n  color: var(--dsw-alias-fg-on-accent, #fff);\n  background: var(--dsw-alias-accent, #4a8dff);\n  letter-spacing: 0.04em;\n}\n.qc-menu-close {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  cursor: pointer;\n  padding: 2px;\n  display: inline-flex;\n  align-items: center;\n}\n.qc-menu-empty {\n  font-size: 12px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  padding: 10px 8px;\n  margin: 0;\n}\n.qc-menu-item {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  text-align: left;\n  border: 0;\n  background: transparent;\n  border-radius: 8px;\n  padding: 6px 8px;\n  cursor: pointer;\n  width: 100%;\n}\n.qc-menu-item:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n.qc-menu-item:disabled {\n  opacity: 0.6;\n  cursor: wait;\n}\n.qc-menu-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-menu-item-cmd {\n  font-family: var(--dsw-font-family-mono, monospace);\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n/* ── live output popup ───────────────────────────────────────────────────── */\n.qc-popup {\n  position: relative; /* anchors the absolutely-positioned resize grip */\n  display: flex;\n  flex-direction: column;\n  background: var(--dsw-alias-bg-overlay, #1b1b1c);\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 12px;\n  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);\n  z-index: 60;\n  overflow: hidden;\n}\n.qc-popup-corner {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  width: 520px;\n  max-width: calc(100vw - 40px);\n  height: 340px;\n  max-height: calc(100vh - 120px);\n}\n.qc-popup-button {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 12px;\n  width: 440px;\n  max-width: calc(100vw - 40px);\n  height: 300px;\n  max-height: calc(100vh - 120px);\n}\n.qc-popup-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-popup-title {\n  flex: 1;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.qc-popup-cmd {\n  font-family: var(--dsw-font-family-mono, monospace);\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 40%;\n}\n.qc-popup-remote {\n  flex: 0 0 auto;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 3px 6px;\n  border-radius: 6px;\n  color: var(--dsw-alias-fg-on-accent, #fff);\n  background: var(--dsw-alias-accent, #4a8dff);\n  letter-spacing: 0.04em;\n}\n.qc-popup-icon {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  cursor: pointer;\n  padding: 4px;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 6px;\n}\n.qc-popup-icon:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n.qc-popup-icon:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.qc-popup-kill {\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n}\n.qc-popup-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  padding: 8px 10px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f5a623) 12%, transparent);\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-popup-btn {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));\n  border-radius: 8px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  font-size: 12px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n.qc-popup-btn:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);\n}\n.qc-popup-btn-plain {\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n}\n.qc-popup-tabs {\n  display: flex;\n  gap: 2px;\n  padding: 6px 10px 0;\n  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n}\n.qc-popup-tab {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n  font-size: 12px;\n  padding: 5px 10px;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n}\n.qc-popup-tab-active {\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n  border-bottom-color: var(--dsw-alias-brand-primary, #4a9eff);\n}\n.qc-popup-output {\n  flex: 1;\n  overflow: auto;\n  padding: 8px 10px;\n  font-family: var(--dsw-font-family-mono, monospace);\n  font-size: 12px;\n  line-height: 1.5;\n}\n.qc-popup-pre {\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--dsw-alias-label-primary, #f2f2f2);\n}\n.qc-popup-empty {\n  margin: 0;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  font-size: 12px;\n}\n.qc-popup-error {\n  margin: 0 0 6px;\n  color: var(--dsw-alias-state-error-primary, #e5484d);\n  font-size: 12px;\n}\n.qc-popup-foot {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));\n  font-size: 11px;\n}\n.qc-popup-state {\n  color: var(--dsw-alias-label-secondary, #cfd3d6);\n}\n\n/* Resize handles. The popup pins its RIGHT edge (both anchors); width is\n   always dragged from the LEFT border. Height is dragged from the TOP border\n   (corner anchor, bottom pinned) or the BOTTOM border (button anchor, top\n   pinned below the button). The free corner (top-left / bottom-left) carries\n   the diagonal grip. Pointer capture lives in header.tsx; touch-action:none\n   lets touch drags resize instead of scrolling. */\n.qc-popup-resize {\n  position: absolute;\n  z-index: 3;\n  touch-action: none;\n  user-select: none;\n}\n.qc-popup-resize-left {\n  left: 0;\n  top: 10px;\n  bottom: 10px;\n  width: 7px;\n  cursor: ew-resize;\n}\n.qc-popup-resize-top {\n  top: 0;\n  left: 10px;\n  right: 10px;\n  height: 7px;\n  cursor: ns-resize;\n}\n.qc-popup-resize-bottom {\n  bottom: 0;\n  left: 10px;\n  right: 10px;\n  height: 7px;\n  cursor: ns-resize;\n}\n.qc-popup-resize-left:hover,\n.qc-popup-resize-top:hover,\n.qc-popup-resize-bottom:hover {\n  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 14%, transparent);\n}\n.qc-popup-resize-corner {\n  width: 22px;\n  height: 22px;\n  z-index: 4;\n  display: flex;\n  padding: 3px;\n  color: var(--dsw-alias-label-tertiary, #adb2b8);\n  opacity: 0.6;\n  transition: opacity .15s ease;\n}\n.qc-popup-resize-corner-tl {\n  top: 0;\n  left: 0;\n  cursor: nwse-resize;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.qc-popup-resize-corner-bl {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n  align-items: flex-end;\n  justify-content: flex-start;\n}\n.qc-popup-resize-corner:hover,\n.qc-popup-resize-corner:active {\n  opacity: 1;\n}\n\n/* ── mobile fallback (dsh-mobile-nav) ──────────────────────────────────────\n   The dsh-mobile-nav plugin (≤1023px) hides the ENTIRE header utilities seat\n   with `[data-mobile-nav=\"frame\"] [data-phase] header > :first-child >\n   :last-child { display: none !important; }`, because the seat used to hold\n   only the session-log-export capsule (which it relocates to the drawer\n   footer). Our quick-run ▶ button rides that same seat, so it vanished on\n   phones.\n\n   Re-show ONLY our button: restore the seat's flex layout (out-ranking the\n   host rule via `:has(.qc-head-wrap)` specificity (0,5,1) > (0,4,1)) and keep\n   every other seat occupant hidden (the session-log capsule stays relocated\n   to the drawer footer). Desktop (no [data-mobile-nav]) is untouched. */\n[data-mobile-nav=\"frame\"] [data-phase] header > :first-child > :last-child:has(.qc-head-wrap) {\n  display: flex !important;\n  margin-left: 4px !important;\n  gap: 0 !important;\n}\n[data-mobile-nav=\"frame\"] [data-phase] header > :first-child > :last-child:has(.qc-head-wrap)\n  [data-slot=\"conversation.session.header.utilities\"] > :not(.qc-head-wrap) {\n  display: none !important;\n}\n\n/* ── viewport-level command menu ─────────────────────────────────────────\n   The phone shell's nav rail creates a sibling stacking context and its\n   center column can clip header descendants. The React menu therefore mounts\n   in document.body; these styles deliberately detach it from that header\n   context. Pixel coordinates (including the 56px rail exclusion) are set by\n   positionMenu() in header.tsx. */\n.qc-menu-portal {\n  position: fixed;\n  right: auto;\n  z-index: 1100;\n  box-sizing: border-box;\n  max-height: min(420px, calc(100dvh - 72px));\n}\n\n@media (max-width: 767px) {\n  /* A 44px target lets a fingertip reliably activate both the stop and close\n     buttons without changing the desktop header density. */\n  body[data-dsh-mobile] .qc-popup-icon,\n  [data-mobile-nav=\"frame\"] .qc-popup-icon {\n    min-width: 44px;\n    min-height: 44px;\n    justify-content: center;\n  }\n}";
+		const tagId = "@fonlan/dsh-quick-commands/quick-commands.css#b65a4ce4";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@fonlan/dsh-quick-commands";
@@ -1013,13 +1047,15 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "quick-commands: dictionaries");
-			ctx.locale.bind(LOCALE_NS);
+			const t = ctx.locale.bind(LOCALE_NS);
 			const slots = ctx.slots;
-			slots.inject("settings.plugin.item", () => slots.register({
-				name: "settings.plugin.item",
-				key: LOCALE_NS,
+			slots.inject("settings.section", () => slots.register({
+				name: "settings.section",
+				id: "quick-commands",
+				order: 330,
+				label: () => t("settingsTitle"),
 				locale: LOCALE_NS
-			}, QuickCommandsSettingsCard));
+			}, QuickCommandsSettingsSection));
 			slots.inject("conversation.session.header.utilities", () => slots.register({
 				name: "conversation.session.header.utilities",
 				id: "quick-commands",