@xiaoso/dsh-tool-plus 0.1.0-beta.6 → 0.1.1

package/lib/client.js

@@ -75,6 +75,15 @@ window.__ModuleLoader__.load({
 				group: "behavior",
 				tool: "bash"
 			},
+			{
+				name: "rmSafe",
+				kind: "boolean",
+				default: true,
+				labelKey: "rmSafe",
+				hintKey: "rmSafeHint",
+				group: "behavior",
+				tool: "bash"
+			},
 			{
 				name: "useShellCommandWrapper",
 				kind: "boolean",
@@ -726,57 +735,83 @@ window.__ModuleLoader__.load({
 		TOOL_PLUS_FIELDS.map((field) => field.name);
 		//#endregion
 		//#region src/client/rows.tsx
-		/** Shared row control CSS, keyed by `data-plugin-css` and injected once. */
+		/**
+		* Shared settings-row controls for the tool-plus settings surfaces: number
+		* input, select pill, and toggle switch rows, styled against the app's
+		* `--dsw-alias-*` design tokens. Extracted from the Bash card so the Plugins
+		* card and the Tool Plus settings section render identical controls.
+		* @module @xiaoso/dsh-tool-plus/client
+		*/
+		/**
+		* Shared row control CSS, keyed by `data-plugin-css` and injected once.
+		*
+		* Motion discipline: every moving control animates transform/opacity only
+		* (GPU-composited); color transitions fire on hover/focus state changes
+		* only. Everything is disabled under prefers-reduced-motion. All colors are
+		* `--dsw-alias-*` host tokens (or color-mix of them), so light/dark themes
+		* adapt automatically.
+		*/
 		const SETTINGS_ROWS_CSS = `
-.tp-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l2)}
+.tp-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l1);transition:background .16s ease}
 .tp-row:last-child{border-bottom:none}
 .tp-rowText{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:24px}
 .tp-rowTitle{font-size:14px;font-weight:400;line-height:22px;color:var(--dsw-alias-label-primary)}
 .tp-rowDesc{font-size:12px;font-weight:400;line-height:18px;color:var(--dsw-alias-label-tertiary)}
 .tp-badges{display:inline-flex;align-items:center;gap:8px}
-.tp-badge{border-radius:999px;padding:1px 8px;font-size:11px;line-height:17px;white-space:nowrap;font-weight:500;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
-.tp-reset{border:none;background:none;padding:0;font:inherit;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary);cursor:pointer}
+.tp-badge{display:inline-flex;align-items:center;gap:6px;padding:1px 0;font-size:11px;line-height:17px;white-space:nowrap;font-weight:500;color:var(--dsw-alias-label-tertiary)}
+.tp-badge::before{content:'';flex:none;width:5px;height:5px;border-radius:999px;background:var(--dsw-alias-state-business-primary)}
+.tp-reset{position:relative;border:none;background:none;padding:2px 0;font:inherit;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary);cursor:pointer;transition:color .16s ease}
+.tp-reset::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;border-radius:1px;background:currentColor;opacity:0;transform:scaleX(.6);transform-origin:left center;transition:opacity .16s ease,transform .2s cubic-bezier(.22,1,.36,1)}
 .tp-reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
+.tp-reset:hover:not(:disabled)::after{opacity:.6;transform:scaleX(1)}
 .tp-reset:disabled{cursor:default}
-.tp-numberField{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l2)}
-.tp-numberField:last-child{border-bottom:none}
-.tp-numberHead{display:flex;align-items:center;gap:8px}
-.tp-numberLabel{flex:1;min-width:0;font-size:13px;font-weight:500;line-height:1.5;color:var(--dsw-alias-label-primary)}
-.tp-input{height:34px;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);font:inherit;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary);width:100%;box-sizing:border-box}
-.tp-input:focus-visible{outline:none;border-color:var(--dsw-alias-brand-primary)}
+.tp-reset:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;border-radius:2px}
+.tp-input{flex:none;width:128px;height:34px;padding:0 11px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-1);font:inherit;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary);box-sizing:border-box;transition:border-color .16s ease}
+.tp-input:hover:not(:disabled):not(:focus-visible){border-color:var(--dsw-alias-border-l3)}
+.tp-input:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px;border-color:var(--dsw-alias-border-l3)}
 .tp-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
 .tp-input.tp-invalid{border-color:var(--dsw-alias-label-error)}
-.tp-invalidMsg{margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-error)}
-.tp-hint{margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary)}
-.tp-selectTrigger{display:inline-flex;align-items:center;gap:12px;height:36px;padding:0 14px;border:none;border-radius:18px;background:var(--dsw-alias-bg-module-platform);font:inherit;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);cursor:pointer;flex-shrink:0}
+.tp-input.tp-invalid:focus-visible{outline-color:var(--dsw-alias-state-error-primary)}
+.tp-invalidText{color:var(--dsw-alias-label-error);animation:tp-soft-in .18s ease both}
 .tp-selectAnchor{display:inline-flex;flex-shrink:0}
-.tp-selectTrigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
-.tp-selectTrigger:disabled{cursor:default}
-.tp-selectTrigger:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
-.tp-selectChevron{flex:none;color:var(--dsw-alias-label-tertiary);display:inline-flex;transition:transform .16s}
+.tp-selectTrigger{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--dsw-alias-border-l2);border-radius:999px;background:var(--dsw-alias-bg-module-platform);font:inherit;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);cursor:pointer;flex-shrink:0;transition:background .16s ease,border-color .16s ease,transform .1s ease}
+.tp-selectTrigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l3)}
+.tp-selectTrigger:active:not(:disabled){transform:scale(.97)}
+.tp-selectTrigger:disabled{opacity:.55;cursor:default}
+.tp-selectTrigger:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}
+.tp-selectChevron{flex:none;color:var(--dsw-alias-label-tertiary);display:inline-flex;transition:transform .2s cubic-bezier(.22,1,.36,1)}
 .tp-selectTrigger[aria-expanded="true"] .tp-selectChevron{transform:rotate(180deg)}
-.tp-switch{position:relative;width:36px;height:20px;flex:none}
-.tp-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
-.tp-switchTrack{position:absolute;inset:0;border-radius:999px;background:var(--dsw-alias-border-l2);transition:background .16s;pointer-events:none}
+.tp-switch{position:relative;width:40px;height:24px;flex:none}
+.tp-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
+.tp-switchTrack{position:absolute;inset:0;border-radius:999px;background:var(--dsw-alias-border-l2);transition:background .18s ease;pointer-events:none}
+.tp-row:hover .tp-switchTrack{background:var(--dsw-alias-border-l3)}
 .tp-switch input:checked+.tp-switchTrack{background:var(--dsw-alias-brand-primary)}
-.tp-switch input:focus-visible+.tp-switchTrack{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
-.tp-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);transition:transform .16s;pointer-events:none}
-.tp-switch input:checked~.tp-thumb{transform:translateX(16px)}
-.tp-actionField{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l2)}
+.tp-row:hover .tp-switch input:checked+.tp-switchTrack{background:var(--dsw-alias-brand-primary)}
+.tp-switch input:focus-visible+.tp-switchTrack{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
+.tp-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);box-shadow:0 1px 3px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.08);transition:transform .2s cubic-bezier(.34,1.3,.5,1);transform-origin:left center;pointer-events:none}
+.tp-switch input:checked~.tp-thumb{transform:translateX(16px);transform-origin:right center}
+.tp-switch input:active:not(:disabled)~.tp-thumb{transform:scaleX(1.2)}
+.tp-switch input:checked:active:not(:disabled)~.tp-thumb{transform:translateX(16px) scaleX(1.2)}
+.tp-switch input:disabled{cursor:default}
+.tp-switch input:disabled~.tp-switchTrack,.tp-switch input:disabled~.tp-thumb{opacity:.45}
+.tp-actionField{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l1)}
 .tp-actionField:last-child{border-bottom:none}
 .tp-actionHead{display:flex;align-items:center;gap:12px}
 .tp-actionInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
 .tp-actionTitle{font-size:14px;font-weight:400;line-height:22px;color:var(--dsw-alias-label-primary)}
 .tp-actionDesc{font-size:12px;font-weight:400;line-height:18px;color:var(--dsw-alias-label-tertiary)}
-.tp-actionButton{appearance:none;flex:none;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);padding:5px 14px;font:inherit;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary);cursor:pointer;transition:background .14s}
-.tp-actionButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.tp-actionButton{appearance:none;flex:none;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-1);padding:5px 14px;font:inherit;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary);cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .1s ease}
+.tp-actionButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l3)}
+.tp-actionButton:active:not(:disabled){transform:scale(.97)}
 .tp-actionButton:disabled{opacity:.55;cursor:default}
-.tp-actionButton:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
-.tp-actionResult{margin:0;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
+.tp-actionButton:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}
+.tp-actionResult{margin:0;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;animation:tp-soft-in .22s cubic-bezier(.22,1,.36,1) both}
 .tp-actionResult[data-state="ok"]{color:var(--dsw-alias-label-secondary)}
 .tp-actionResult[data-state="error"]{color:var(--dsw-alias-label-error)}
+@keyframes tp-soft-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 @media (prefers-reduced-motion: reduce){
-  .tp-switch,.tp-switchTrack,.tp-thumb,.tp-selectTrigger,.tp-selectChevron{transition:none}
+  .tp-row,.tp-reset,.tp-reset::after,.tp-input,.tp-selectTrigger,.tp-selectChevron,.tp-switchTrack,.tp-thumb,.tp-actionButton{transition:none}
+  .tp-invalidText,.tp-actionResult{animation:none}
 }
 `;
 		/** Inject the shared row stylesheet once per page. */
@@ -795,46 +830,51 @@ window.__ModuleLoader__.load({
 		function hasOwn(obj, key) {
 			return typeof obj === "object" && obj !== null && Object.prototype.hasOwnProperty.call(obj, key);
 		}
-		/** Number field: Header (label + override badge + reset), Input, Hint below. */
+		/**
+		* Number row: same left-text / right-control anatomy as toggle and select
+		* rows, with the input right-aligned at a fixed width. The title is wired to
+		* the input (htmlFor), so clicking the title focuses the input; the
+		* description and the rest of the row are inert — each side manages its own
+		* interaction.
+		*/
 		function NumberRow(props) {
 			const { t, control, disabled, onEdit, onReset } = props;
+			const inputId = (0, react.useId)();
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "tp-numberField",
+				className: "tp-row",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "tp-numberHead",
+						className: "tp-rowText",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: "tp-numberLabel",
+							className: "tp-rowTitle",
+							htmlFor: inputId,
 							children: t(control.labelKey)
-						}), control.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "tp-badges",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "tp-badge",
-								children: t("overridden")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "tp-reset",
-								disabled,
-								onClick: () => onReset(control.field),
-								children: t("reset")
-							})]
-						}) : null]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "tp-rowDesc" + (control.invalid ? " tp-invalidText" : ""),
+							role: control.invalid ? "status" : void 0,
+							children: control.invalid ? t("invalidNumber") : t(control.hintKey)
+						})]
 					}),
+					control.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "tp-badges",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "tp-badge",
+							children: t("overridden")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "tp-reset",
+							disabled,
+							onClick: () => onReset(control.field),
+							children: t("reset")
+						})]
+					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: inputId,
 						type: "number",
-						"aria-label": t(control.labelKey),
 						className: "tp-input" + (control.invalid ? " tp-invalid" : ""),
 						disabled,
 						value: control.text,
 						onChange: (e) => onEdit(control.field, e.target.value)
-					}),
-					control.invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "tp-invalidMsg",
-						role: "status",
-						children: t("invalidNumber")
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "tp-hint",
-						children: t(control.hintKey)
 					})
 				]
 			});
@@ -1060,11 +1100,13 @@ window.__ModuleLoader__.load({
 .tp-card.tp-open{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
 .tp-header{width:100%;appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px}
 .tp-header:active{background:var(--dsw-alias-bg-layer-2)}
-.tp-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.tp-header:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
 .tp-headText{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
 .tp-name{font-size:15px;font-weight:600;line-height:1.4;color:var(--dsw-alias-label-primary)}
 .tp-desc{font-size:13px;line-height:1.5;color:var(--dsw-alias-label-tertiary)}
-.tp-pending{flex:none;border-radius:999px;padding:1px 8px;font-size:11px;line-height:17px;font-weight:500;white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
+.tp-pending{display:inline-flex;align-items:center;gap:6px;flex:none;border-radius:999px;padding:2px 10px;font-size:11px;line-height:17px;font-weight:500;white-space:nowrap;background:var(--dsw-alias-state-business-tertiary);color:var(--dsw-alias-state-business-primary)}
+.tp-pending::before{content:'';flex:none;width:6px;height:6px;border-radius:999px;background:var(--dsw-alias-state-business-primary);animation:tp-pulse 1.8s ease-in-out infinite}
+@keyframes tp-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
 .tp-chevron{flex:none;color:var(--dsw-alias-label-tertiary);transition:transform .16s;display:inline-flex}
 .tp-chevron.tp-open{transform:rotate(180deg)}
 .tp-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-top:4px;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s cubic-bezier(.22,.61,.36,1),opacity .16s ease}
@@ -1082,10 +1124,12 @@ window.__ModuleLoader__.load({
 .tp-discard{border-color:var(--dsw-alias-border-l2);background:none;color:var(--dsw-alias-label-secondary)}
 .tp-discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
 .tp-save{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
+.tp-save:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}
 .tp-discard:disabled,.tp-save:disabled{opacity:.4;cursor:default}
-.tp-discard:focus-visible,.tp-save:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.tp-discard:focus-visible,.tp-save:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}
 @media (prefers-reduced-motion: reduce){
   .tp-card,.tp-header,.tp-chevron,.tp-body,.tp-thumb,.tp-switchTrack,.tp-discard,.tp-save{transition:none}
+  .tp-pending::before{animation:none}
 }
 `;
 		/** Inject the card stylesheet once per page; the loader removes plugin-owned style tags on unload. */
@@ -1595,6 +1639,8 @@ window.__ModuleLoader__.load({
 		*/
 		/** Logical RPC channel registered by the host half of this plugin. */
 		const TOOL_PLUS_RPC_CHANNEL = "/tool-plus";
+		/** Endpoint that reports the rmSafe injection status (query = ensure + verify). */
+		const RM_SAFE_STATUS_ENDPOINT = "rmSafe/status";
 		//#endregion
 		//#region src/client/web-connection-rpc.ts
 		/**
@@ -1983,6 +2029,27 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/rm-safe-status-text.ts
+		/** Locale key of one rmSafe failure reason. */
+		function rmSafeReasonKey(reason) {
+			switch (reason) {
+				case "snapshot-unavailable": return "rmSafeReasonSnapshotUnavailable";
+				case "cli-missing": return "rmSafeReasonCliMissing";
+				case "script-write-failed": return "rmSafeReasonScriptWriteFailed";
+				case "snapshot-write-failed": return "rmSafeReasonSnapshotWriteFailed";
+				case "runtime-not-effective": return "rmSafeReasonRuntimeNotEffective";
+			}
+		}
+		/**
+		* Localized text of one rmSafe/status result. `disabled` maps to the empty
+		* string — the caller decides not to surface it.
+		*/
+		function rmSafeStatusText(t, value) {
+			if (value.status === "failed") return t("rmSafeStatusFailed").replace("{reason}", t(rmSafeReasonKey(value.reason)));
+			if (value.status === "disabled") return "";
+			return value.runtime === "function" ? t("rmSafeStatusInjected") : t("rmSafeStatusInjectedUnverified");
+		}
+		//#endregion
 		//#region src/client/ToolPlusSection.tsx
 		/**
 		* Tool Plus settings section — the plugin's own page in the Settings panel,
@@ -2002,37 +2069,69 @@ window.__ModuleLoader__.load({
 		* Tab chrome mirrors the official Plugins settings section
 		* (ui-settings-plugins): `role="tablist"` + tab/panel roles, aria wiring,
 		* and arrow/Home/End keyboard roaming.
+		*
+		* The page is pinned to the host settings pane: the heading, intro and tablist
+		* stay put, the save bar sits at the bottom, and the tab panel is the only
+		* scroller — so the scrollbar spans just the band between them.
 		* @module @xiaoso/dsh-tool-plus/client
 		*/
-		/** Page CSS, keyed by `data-plugin-css` and injected once. */
+		/**
+		* Page CSS, keyed by `data-plugin-css` and injected once.
+		*
+		* Design language: official settings-section rhythm (18/600 heading, 13px
+		* tertiary intro, 760px content column) on the host's `--dsw-alias-*`
+		* tokens, so both themes adapt automatically. Tab chrome is the official
+		* underline tablist (like the Plugins section), upgraded with a single
+		* sliding brand-blue underline; group cards float above the modal surface
+		* (layer-3). No backdrop-filter anywhere — solid token colors only.
+		* All motion is transform/opacity only (GPU-composited): the underline
+		* FLIP is driven from JS, entrance stagger and panel fades are CSS
+		* keyframes, and the unsaved dot pulses opacity/scale. Everything shuts
+		* off under prefers-reduced-motion (CSS here, matchMedia for the
+		* JS-driven underline).
+		*/
 		const CSS = `
-.tps{display:flex;flex-direction:column;gap:16px;padding:20px 24px}
-.tps-heading{margin:0;font-size:18px;font-weight:600;line-height:26px;color:var(--dsw-alias-label-primary)}
-.tps-intro{margin:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary)}
-.tps-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3)}
-.tps-tab{appearance:none;border:none;background:none;font:inherit;font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary);padding:6px 14px;border-radius:8px;cursor:pointer;transition:background .14s,color .14s}
-.tps-tab:hover:not([data-active="true"]){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
-.tps-tab[data-active="true"]{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px var(--dsw-alias-border-l2)}
-.tps-tab:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
-.tps-panel{display:flex;flex-direction:column;gap:12px}
-.tps-group{display:flex;flex-direction:column;gap:0;padding:4px 0}
-.tps-groupTitle{font-size:13px;font-weight:600;line-height:20px;color:var(--dsw-alias-label-primary);margin:0 0 4px}
-.tps-empty{border:1px dashed var(--dsw-alias-border-l2);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;gap:4px;background:var(--dsw-alias-bg-layer-3)}
+.tps-section{box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding-top:2px}
+.tps-heading{margin:0;font-size:18px;font-weight:600;line-height:26px;color:var(--dsw-alias-label-primary);animation:tps-rise .38s cubic-bezier(.22,1,.36,1) both}
+.tps-intro{margin:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary);max-width:64ch;animation:tps-rise .38s cubic-bezier(.22,1,.36,1) .05s both}
+.tps-tabs{position:relative;display:flex;align-items:flex-end;gap:22px;border-bottom:1px solid var(--dsw-alias-border-l2);margin-top:2px;animation:tps-rise .38s cubic-bezier(.22,1,.36,1) .1s both}
+.tps-tab{position:relative;appearance:none;border:none;background:none;font:inherit;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary);padding:7px 1px 9px;cursor:pointer;white-space:nowrap;transition:color .16s ease}
+.tps-tab:hover:not([data-active="true"]){color:var(--dsw-alias-label-primary)}
+.tps-tab[data-active="true"]{color:var(--dsw-alias-label-primary)}
+.tps-tab:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;border-radius:2px}
+.tps-tabIndicator{position:absolute;bottom:-1px;left:0;height:2px;border-radius:2px 2px 0 0;background:var(--dsw-alias-state-business-primary);pointer-events:none;transform-origin:left center;will-change:transform}
+.tps-panel{display:flex;flex:1 1 auto;flex-direction:column;gap:14px;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;animation:tps-panel-in .24s cubic-bezier(.22,1,.36,1) both}
+.tps-panel::-webkit-scrollbar{width:10px}
+.tps-panel::-webkit-scrollbar-track{background:transparent}
+.tps-panel::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background-color:color-mix(in srgb, var(--dsw-alias-label-tertiary) 45%, transparent);background-clip:content-box}
+.tps-panel::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb, var(--dsw-alias-label-tertiary) 75%, transparent)}
+.tps-group{display:flex;flex-direction:column}
+.tps-groupTitle{font-size:13px;font-weight:600;line-height:20px;color:var(--dsw-alias-label-primary);margin:0 0 6px;padding:0 2px}
+.tps-card{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3);padding:0 16px}
+.tps-empty{border:1px dashed var(--dsw-alias-border-l3);border-radius:12px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
 .tps-emptyTitle{margin:0;font-size:14px;font-weight:600;line-height:22px;color:var(--dsw-alias-label-primary)}
 .tps-emptyHint{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
-.tps-readOnly{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
-.tps-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 0 0;border-top:1px solid var(--dsw-alias-border-l2)}
+.tps-readOnly{margin:0;padding:8px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.tps-footer{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 0;border-top:1px solid var(--dsw-alias-border-l2)}
 .tps-failed{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-error)}
 .tps-applies{flex:1;min-width:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary)}
-.tps-discard,.tps-save{appearance:none;border:1px solid transparent;border-radius:8px;padding:5px 14px;font:inherit;font-size:13px;line-height:1.5;cursor:pointer;transition:transform .1s ease}
+.tps-unsaved{display:inline-flex;align-items:center;gap:6px;flex:none;border-radius:999px;padding:2px 10px;font-size:11px;line-height:17px;font-weight:500;color:var(--dsw-alias-state-business-primary);background:var(--dsw-alias-state-business-tertiary)}
+.tps-unsavedDot{flex:none;width:6px;height:6px;border-radius:999px;background:var(--dsw-alias-state-business-primary);animation:tps-pulse 1.8s ease-in-out infinite}
+.tps-discard,.tps-save{appearance:none;border:1px solid transparent;border-radius:8px;padding:5px 14px;font:inherit;font-size:13px;line-height:1.5;cursor:pointer;transition:transform .1s ease,background .16s ease,border-color .16s ease,color .16s ease}
 .tps-discard:active:not(:disabled),.tps-save:active:not(:disabled){transform:scale(.97)}
 .tps-discard{border-color:var(--dsw-alias-border-l2);background:none;color:var(--dsw-alias-label-secondary)}
-.tps-discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
+.tps-discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l4)}
 .tps-save{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
+.tps-save:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}
 .tps-discard:disabled,.tps-save:disabled{opacity:.4;cursor:default}
-.tps-discard:focus-visible,.tps-save:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.tps-discard:focus-visible,.tps-save:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}
+@keyframes tps-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+@keyframes tps-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+@keyframes tps-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
 @media (prefers-reduced-motion: reduce){
+  .tps-heading,.tps-intro,.tps-tabs,.tps-panel,.tps-unsavedDot{animation:none}
   .tps-tab,.tps-discard,.tps-save{transition:none}
+  .tps-tabIndicator{will-change:auto}
 }
 `;
 		/** Inject the section stylesheet once per page. */
@@ -2052,6 +2151,17 @@ window.__ModuleLoader__.load({
 		const TOOL_TABS = TOOL_PLUS_TABS;
 		/** All fields the page edits (one shared form). */
 		const ALL_FIELDS = TOOL_PLUS_FIELDS;
+		/** Floor for the pinned page height, so an unusually short pane never collapses the panel. */
+		const MIN_PAGE_HEIGHT = 240;
+		/**
+		* Nearest ancestor that scrolls vertically — the host settings pane hosting
+		* this section. The pane is app chrome with no stable class, so it is found by
+		* walking up from the section root.
+		*/
+		function scrollPaneOf(element) {
+			for (let node = element.parentElement; node !== null; node = node.parentElement) if (/(auto|scroll|overlay)/.test(getComputedStyle(node).overflowY)) return node;
+			return null;
+		}
 		/** Current effective value of a boolean/select control (staged or resolved). */
 		function controlValue(form, field) {
 			for (const group of form.groups) {
@@ -2124,48 +2234,51 @@ window.__ModuleLoader__.load({
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 					className: "tps-groupTitle",
 					children: t(TOOL_PLUS_GROUP_LABELS[group.group] ?? "title")
-				}), group.fields.map((field) => {
-					if (field.kind === "action") {
-						const actionControl = {
-							field: field.name,
-							labelKey: field.labelKey,
-							hintKey: field.hintKey,
-							actionKey: field.actionKey ?? ""
-						};
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRow, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "tps-card",
+					children: group.fields.map((field) => {
+						if (field.kind === "action") {
+							const actionControl = {
+								field: field.name,
+								labelKey: field.labelKey,
+								hintKey: field.hintKey,
+								actionKey: field.actionKey ?? ""
+							};
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRow, {
+								t,
+								control: actionControl,
+								disabled: !writable,
+								running: actionState[field.name] === "running",
+								result: actionResults[field.name] ?? null,
+								onRun: (_actionKey) => runAction(field)
+							}, field.name);
+						}
+						const entry = controlOf(field);
+						if (entry === void 0) return null;
+						if (entry.kind === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberRow, {
 							t,
-							control: actionControl,
+							control: entry.control,
 							disabled: !writable,
-							running: actionState[field.name] === "running",
-							result: actionResults[field.name] ?? null,
-							onRun: (_actionKey) => runAction(field)
+							onEdit: form.actions.edit,
+							onReset: form.actions.resetField
 						}, field.name);
-					}
-					const entry = controlOf(field);
-					if (entry === void 0) return null;
-					if (entry.kind === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberRow, {
-						t,
-						control: entry.control,
-						disabled: !writable,
-						onEdit: form.actions.edit,
-						onReset: form.actions.resetField
-					}, field.name);
-					if (entry.kind === "select") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectRow, {
-						t,
-						control: entry.control,
-						disabled: !writable,
-						open: openSelect === field.name,
-						onOpenChange,
-						onEdit: form.editSelect,
-						onReset: form.actions.resetField
-					}, field.name);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
-						t,
-						control: entry.control,
-						disabled: !writable,
-						onToggle: form.onToggle,
-						onReset: form.actions.resetField
-					}, field.name);
+						if (entry.kind === "select") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectRow, {
+							t,
+							control: entry.control,
+							disabled: !writable,
+							open: openSelect === field.name,
+							onOpenChange,
+							onEdit: form.editSelect,
+							onReset: form.actions.resetField
+						}, field.name);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+							t,
+							control: entry.control,
+							disabled: !writable,
+							onToggle: form.onToggle,
+							onReset: form.actions.resetField
+						}, field.name);
+					})
 				})]
 			}, group.group)) });
 		}
@@ -2173,12 +2286,34 @@ window.__ModuleLoader__.load({
 		function ToolPlusSection(props) {
 			const { t, scope } = props;
 			const form = useToolForm(scope, ALL_FIELDS);
+			const sectionRef = (0, react.useRef)(null);
 			const tabsId = (0, react.useRef)(`tps-${Math.random().toString(36).slice(2, 8)}`);
 			const tabRefs = (0, react.useRef)([]);
 			const [activeId, setActiveId] = (0, react.useState)();
 			const [openSelect, setOpenSelect] = (0, react.useState)(null);
 			const [actionState, setActionState] = (0, react.useState)({});
 			const [actionResults, setActionResults] = (0, react.useState)({});
+			const [rmSafeToast, setRmSafeToast] = (0, react.useState)(null);
+			const handleSave = (0, react.useCallback)(async () => {
+				const before = Boolean(scope.getSnapshot().value?.rmSafe ?? true);
+				await form.actions.save();
+				const after = Boolean(scope.getSnapshot().value?.rmSafe ?? true);
+				if (before === after || !after) return;
+				try {
+					const result = await createWebConnectionRpc().call(TOOL_PLUS_RPC_CHANNEL, RM_SAFE_STATUS_ENDPOINT, {});
+					if (!result.ok) return;
+					const value = result.value;
+					if (value.status === "disabled") return;
+					setRmSafeToast({
+						text: rmSafeStatusText(t, value),
+						ok: value.status === "injected"
+					});
+				} catch {}
+			}, [
+				scope,
+				form,
+				t
+			]);
 			const runAction = (0, react.useCallback)((field) => {
 				const actionKey = field.actionKey;
 				if (!actionKey) return;
@@ -2231,12 +2366,88 @@ window.__ModuleLoader__.load({
 				injectSectionCss();
 				injectSettingsRowsCss();
 			}, []);
-			if (!form.shell.available) return null;
 			const active = TOOL_TABS.find((row) => row.id === activeId)?.id ?? TOOL_TABS[0]?.id;
+			const tabsRef = (0, react.useRef)(null);
+			const indicatorRef = (0, react.useRef)(null);
+			const committedRect = (0, react.useRef)(null);
+			const commitIndicator = (0, react.useCallback)((animate) => {
+				const tabs = tabsRef.current;
+				const indicator = indicatorRef.current;
+				if (tabs === null || indicator === null || active === void 0) return;
+				const tab = tabs.querySelector(`[data-tps-tab="${active}"]`);
+				if (tab === null) return;
+				const left = tab.offsetLeft;
+				const width = tab.offsetWidth;
+				const previous = committedRect.current;
+				committedRect.current = {
+					left,
+					width
+				};
+				if (previous !== null && previous.left === left && previous.width === width) return;
+				const reduce = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+				if (!animate || reduce || previous === null) {
+					indicator.style.transition = "none";
+					indicator.style.width = `${width}px`;
+					indicator.style.transform = `translateX(${left}px)`;
+					return;
+				}
+				indicator.style.transition = "none";
+				indicator.style.width = `${width}px`;
+				indicator.style.transform = `translateX(${previous.left}px) scaleX(${previous.width / width})`;
+				indicator.offsetWidth;
+				indicator.style.transition = "transform .24s cubic-bezier(.22,1,.36,1)";
+				indicator.style.transform = `translateX(${left}px) scaleX(1)`;
+			}, [active]);
+			(0, react.useLayoutEffect)(() => {
+				commitIndicator(true);
+			}, [commitIndicator]);
+			const commitRef = (0, react.useRef)(commitIndicator);
+			commitRef.current = commitIndicator;
+			(0, react.useEffect)(() => {
+				const tabs = tabsRef.current;
+				if (tabs === null || typeof ResizeObserver === "undefined") return;
+				const observer = new ResizeObserver(() => commitRef.current(false));
+				observer.observe(tabs);
+				for (const tab of Array.from(tabs.querySelectorAll("[data-tps-tab]"))) observer.observe(tab);
+				return () => {
+					observer.disconnect();
+				};
+			}, []);
+			(0, react.useLayoutEffect)(() => {
+				const root = sectionRef.current;
+				if (root === null || typeof ResizeObserver === "undefined") return;
+				const pane = scrollPaneOf(root);
+				if (pane === null) return;
+				let frame = 0;
+				const measure = () => {
+					frame = 0;
+					const style = getComputedStyle(pane);
+					const paddingTop = parseFloat(style.paddingTop) || 0;
+					const contentHeight = pane.clientHeight - paddingTop - (parseFloat(style.paddingBottom) || 0);
+					const offset = root.getBoundingClientRect().top - pane.getBoundingClientRect().top - (parseFloat(style.borderTopWidth) || 0) - paddingTop + pane.scrollTop;
+					const next = `${Math.max(MIN_PAGE_HEIGHT, Math.round(contentHeight - offset))}px`;
+					if (root.style.height !== next) root.style.height = next;
+				};
+				const schedule = () => {
+					if (frame === 0) frame = requestAnimationFrame(measure);
+				};
+				measure();
+				const observer = new ResizeObserver(schedule);
+				observer.observe(pane);
+				window.addEventListener("resize", schedule);
+				return () => {
+					if (frame !== 0) cancelAnimationFrame(frame);
+					observer.disconnect();
+					window.removeEventListener("resize", schedule);
+					root.style.height = "";
+				};
+			}, [form.shell.available]);
+			if (!form.shell.available) return null;
 			const selectTab = (id) => setActiveId(id);
 			const blocked = !form.shell.dirty || form.shell.invalid || form.shell.saving;
 			const writable = form.shell.writable;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: sectionRef,
 				className: "tps-section",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
@@ -2247,11 +2458,16 @@ window.__ModuleLoader__.load({
 						className: "tps-intro",
 						children: t("pageDescription")
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: tabsRef,
 						className: "tps-tabs",
 						role: "tablist",
 						"aria-label": t("pageTitle"),
-						children: TOOL_TABS.map((row, index) => {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							ref: indicatorRef,
+							className: "tps-tabIndicator",
+							"aria-hidden": "true"
+						}), TOOL_TABS.map((row, index) => {
 							const selected = row.id === active;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								ref: (element) => {
@@ -2264,6 +2480,7 @@ window.__ModuleLoader__.load({
 								"aria-selected": selected,
 								"aria-controls": `${tabsId.current}-panel-${row.id}`,
 								"data-active": selected ? "true" : void 0,
+								"data-tps-tab": row.id,
 								tabIndex: selected ? 0 : -1,
 								onClick: () => selectTab(row.id),
 								onKeyDown: (event) => {
@@ -2291,7 +2508,7 @@ window.__ModuleLoader__.load({
 								},
 								children: t(row.labelKey)
 							}, row.id);
-						})
+						})]
 					}),
 					TOOL_TABS.filter((row) => row.id === active).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						id: `${tabsId.current}-panel-${row.id}`,
@@ -2326,6 +2543,14 @@ window.__ModuleLoader__.load({
 								className: "tps-applies",
 								children: t("appliesTo")
 							}) : null,
+							!form.shell.failed && form.shell.dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "tps-unsaved",
+								role: "status",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "tps-unsavedDot",
+									"aria-hidden": "true"
+								}), t("unsaved")]
+							}) : null,
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "tps-discard",
@@ -2337,10 +2562,17 @@ window.__ModuleLoader__.load({
 								type: "button",
 								className: "tps-save",
 								disabled: blocked,
-								onClick: () => void form.actions.save(),
+								onClick: () => void handleSave(),
 								children: form.shell.saving ? t("saving") : t("save")
 							})
 						]
+					}),
+					rmSafeToast !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Toast, {
+						text: rmSafeToast.text,
+						icon: rmSafeToast.ok ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutline16, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconWarningOutline16, {}),
+						onDone: () => {
+							setRmSafeToast(null);
+						}
 					})
 				]
 			});
@@ -2480,6 +2712,16 @@ window.__ModuleLoader__.load({
 			nonInteractiveEnvHint: "对非交互使用加固环境：关闭分页器与彩色输出，不弹交互提示。",
 			snapshotEnabled: "Shell 快照",
 			snapshotEnabledHint: "把用户的 rc 文件（别名、函数、选项）快照进会话 shell。",
+			rmSafe: "安全 rm",
+			rmSafeHint: "在会话 shell 里重定义 rm：删除的文件移入系统回收站而非永久删除；command rm 仍走真删除。",
+			rmSafeStatusInjected: "安全 rm 已注入并验证：rm 进入回收站",
+			rmSafeStatusInjectedUnverified: "安全 rm 已注入（运行时验证不可用）",
+			rmSafeStatusFailed: "安全 rm 注入失败：{reason}，rm 将永久删除",
+			rmSafeReasonSnapshotUnavailable: "快照不可用",
+			rmSafeReasonCliMissing: "trash-cli 产物缺失",
+			rmSafeReasonScriptWriteFailed: "脚本写入失败",
+			rmSafeReasonSnapshotWriteFailed: "快照不可写",
+			rmSafeReasonRuntimeNotEffective: "运行时未生效",
 			useShellCommandWrapper: "用 bash -c 包裹命令",
 			useShellCommandWrapperHint: "把每条命令用 bash -c 包裹，以获得完整的 bash 环境。",
 			outputTruncateStrategy: "截断按",
@@ -2651,6 +2893,16 @@ window.__ModuleLoader__.load({
 			nonInteractiveEnvHint: "Harden the environment for non-interactive use: no pagers, no prompts, no color.",
 			snapshotEnabled: "Shell snapshot",
 			snapshotEnabledHint: "Capture the user's rc file (aliases, functions, options) into the session shell.",
+			rmSafe: "Safe rm",
+			rmSafeHint: "Redefine rm in the session shell: deleted files move to the system trash instead of being permanently removed; `command rm` still deletes for real.",
+			rmSafeStatusInjected: "Safe rm injected and verified: rm moves to trash",
+			rmSafeStatusInjectedUnverified: "Safe rm injected (runtime verification unavailable)",
+			rmSafeStatusFailed: "Safe rm injection failed: {reason}, rm deletes permanently",
+			rmSafeReasonSnapshotUnavailable: "snapshot unavailable",
+			rmSafeReasonCliMissing: "trash-cli binary missing",
+			rmSafeReasonScriptWriteFailed: "script write failed",
+			rmSafeReasonSnapshotWriteFailed: "snapshot not writable",
+			rmSafeReasonRuntimeNotEffective: "not effective at runtime",
 			useShellCommandWrapper: "Wrap commands in bash -c",
 			useShellCommandWrapperHint: "Wrap every command in bash -c for a full bash environment.",
 			outputTruncateStrategy: "Truncate by",