@xiaoso/dsh-tool-plus 0.1.0-beta.5 → 0.1.0-beta.7

package/lib/client.js

@@ -7,6 +7,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let _deepseek_ai_dsh_client_connection_client = require("@deepseek-ai/dsh-client-connection/client");
 		//#region src/config/fields.ts
 		/** Field group ids -> locale key of the group heading. */
 		const TOOL_PLUS_GROUP_LABELS = {
@@ -442,6 +443,64 @@ window.__ModuleLoader__.load({
 				tool: "read",
 				visibility: { requiresEnabled: "fetchEnabled" }
 			},
+			{
+				name: "fetchReader",
+				kind: "select",
+				default: "auto",
+				labelKey: "fetchReader",
+				hintKey: "fetchReaderHint",
+				group: "fetch",
+				tool: "read",
+				options: [
+					{
+						value: "auto",
+						labelKey: "optReaderAuto"
+					},
+					{
+						value: "native",
+						labelKey: "optReaderNative"
+					},
+					{
+						value: "trafilatura",
+						labelKey: "optReaderTrafilatura"
+					},
+					{
+						value: "lynx",
+						labelKey: "optReaderLynx"
+					},
+					{
+						value: "parallel",
+						labelKey: "optReaderParallel"
+					},
+					{
+						value: "jina",
+						labelKey: "optReaderJina"
+					},
+					{
+						value: "browser",
+						labelKey: "optReaderBrowser"
+					}
+				]
+			},
+			{
+				name: "browserReaderEnabled",
+				kind: "boolean",
+				default: true,
+				labelKey: "browserReaderEnabled",
+				hintKey: "browserReaderEnabledHint",
+				group: "fetch",
+				tool: "read"
+			},
+			{
+				name: "browserProbe",
+				kind: "action",
+				default: "",
+				labelKey: "browserProbe",
+				hintKey: "browserProbeHint",
+				group: "fetch",
+				tool: "read",
+				actionKey: "browser/detect"
+			},
 			{
 				name: "imagesBlockImages",
 				kind: "boolean",
@@ -667,44 +726,84 @@ 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-rowClickable{cursor:pointer}
 .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-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-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-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. */
@@ -723,46 +822,53 @@ 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 label is wired to
+		* the input (htmlFor) and clicking anywhere on the row focuses the input.
+		*/
 		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" + (disabled ? "" : " tp-rowClickable"),
+				onClick: (event) => {
+					if (event.target.closest("input,button,select,textarea,a")) return;
+					event.currentTarget.querySelector(".tp-input")?.focus();
+				},
 				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)
 					})
 				]
 			});
@@ -777,7 +883,11 @@ window.__ModuleLoader__.load({
 			}));
 			const close = () => onOpenChange(null);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "tp-row",
+				className: "tp-row" + (disabled ? "" : " tp-rowClickable"),
+				onClick: (event) => {
+					if (event.target.closest("input,button,select,textarea,a")) return;
+					event.currentTarget.querySelector(".tp-selectTrigger")?.click();
+				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "tp-rowText",
@@ -831,7 +941,11 @@ window.__ModuleLoader__.load({
 		function ToggleRow(props) {
 			const { t, control, disabled, onToggle, onReset } = props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "tp-row",
+				className: "tp-row" + (disabled ? "" : " tp-rowClickable"),
+				onClick: (event) => {
+					if (event.target.closest("input,button,select,textarea,a")) return;
+					event.currentTarget.querySelector(".tp-switch input")?.click();
+				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "tp-rowText",
@@ -873,6 +987,42 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* Action row: Title + desc stacked on left, a button on the right that calls
+		* the host RPC endpoint named by `control.actionKey` (via the Connection
+		* channel; the caller owns the RPC). The result line renders below, colored
+		* by outcome (`ok` / `error`).
+		*/
+		function ActionRow(props) {
+			const { t, control, disabled, running, result, onRun } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "tp-actionField",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "tp-actionHead",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "tp-actionInfo",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "tp-actionTitle",
+							children: t(control.labelKey)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "tp-actionDesc",
+							children: t(control.hintKey)
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "tp-actionButton",
+						disabled: disabled || running,
+						onClick: () => onRun(control.actionKey),
+						children: running ? t("browserProbeRunning") : t(control.labelKey)
+					})]
+				}), result !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "tp-actionResult",
+					role: "status",
+					"data-state": result.ok ? "ok" : "error",
+					children: result.text
+				}) : null]
+			});
+		}
 		//#endregion
 		//#region src/client/BashPlusCard.tsx
 		/**
@@ -952,11 +1102,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}
@@ -974,10 +1126,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. */
@@ -1473,6 +1627,113 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/tools/shared/browser-rpc-channel.ts
+		/**
+		* Shared RPC channel constants for the browser-detection round trip between
+		* the settings panel (client half) and the host. Both halves import this
+		* module so the channel/endpoint never drift.
+		*
+		* The channel rides the official `@deepseek-ai/dsh-client-connection` generic
+		* RPC transport (host registers with `ctx.connection.rpc.handle`; the client
+		* calls via `createWebConnectionRpc().call`). Channel names must match
+		* `/^\/[A-Za-z0-9._~-]+$/` and `/api` is reserved — `/tool-plus` is ours.
+		* @module @xiaoso/dsh-tool-plus/browser-rpc-channel
+		*/
+		/** Logical RPC channel registered by the host half of this plugin. */
+		const TOOL_PLUS_RPC_CHANNEL = "/tool-plus";
+		//#endregion
+		//#region src/client/web-connection-rpc.ts
+		/**
+		* Browser caller for the plugin's Connection RPC channel.
+		*
+		* The official `@deepseek-ai/dsh-client-connection/client` package ships the
+		* protocol primitives as types (`RpcFetch`, `ClientConnectionRpc`, `RpcResult`)
+		* and the `RpcId` brand, but its published `createWebConnectionRpc` factory is
+		* internal to the bundle — not re-exported. This module re-implements that
+		* factory against the same public wire contract (docs/api-gateway.md, the
+		* client `rpc.ts` source): a `POST {origin}/{channel}/{endpoint}` with a
+		* `client-request` JSON envelope, answered by a `server-response` envelope
+		* echoing the rpcId. Host-side registration uses the official
+		* `ctx.connection.rpc.handle` — this file only mirrors the caller half.
+		* @module @xiaoso/dsh-tool-plus/client/web-connection-rpc
+		*/
+		const INTERNAL_BASE = "http://dsh.internal";
+		const CHANNEL_PATTERN = /^\/[A-Za-z0-9._~-]+$/;
+		const ENDPOINT_SEGMENT_PATTERN = /^[A-Za-z0-9_$.-]+$/;
+		function randomUuid() {
+			const g = globalThis;
+			if (g.crypto?.randomUUID !== void 0) return g.crypto.randomUUID();
+			return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+				const r = Math.random() * 16 | 0;
+				return (c === "x" ? r : r & 3 | 8).toString(16);
+			});
+		}
+		function isRecord(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value);
+		}
+		function parseConnectionResponse(value) {
+			if (!isRecord(value) || value.type !== "server-response" || typeof value.rpcId !== "string") throw new TypeError("connection: invalid server-response envelope");
+			const result = value.result;
+			if (!isRecord(result)) throw new TypeError("connection: invalid server-response result");
+			if (result.ok === true) return {
+				rpcId: value.rpcId,
+				result: {
+					ok: true,
+					value: result.value
+				}
+			};
+			if (result.ok !== false || !isRecord(result.error)) throw new TypeError("connection: invalid server-response result");
+			const error = result.error;
+			if (typeof error.code !== "string" || typeof error.message !== "string" || !isRecord(error.details)) throw new TypeError("connection: invalid server-response failure");
+			return {
+				rpcId: value.rpcId,
+				result: {
+					ok: false,
+					error: {
+						code: error.code,
+						message: error.message,
+						details: error.details
+					}
+				}
+			};
+		}
+		function resolveBase() {
+			const location = globalThis.location;
+			return location?.origin !== void 0 && location.origin !== "null" ? location.origin : INTERNAL_BASE;
+		}
+		function assertTarget(channel, endpoint) {
+			const segments = endpoint.split("/");
+			if (!CHANNEL_PATTERN.test(channel) || segments.some((segment) => segment === "" || segment === "." || segment === ".." || !ENDPOINT_SEGMENT_PATTERN.test(segment))) throw new Error(`connection: invalid RPC target ${JSON.stringify(`${channel}/${endpoint}`)}`);
+		}
+		/**
+		* Create the browser-backed generic RPC caller for the plugin's channel
+		* (the `/tool-plus` host registration). Wire-compatible with the official
+		* ClientConnectionRpc contract; only the transport override differs.
+		* @param doFetch - transport override; defaults to the page's global fetch.
+		*/
+		function createWebConnectionRpc(doFetch) {
+			const send = doFetch ?? ((input, init) => globalThis.fetch(input, init));
+			return { async call(channel, endpoint, payload, signal) {
+				assertTarget(channel, endpoint);
+				const rpcId = (0, _deepseek_ai_dsh_client_connection_client.RpcId)(randomUuid());
+				const response = await send(new URL(`${channel}/${endpoint}`, resolveBase()), {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						type: "client-request",
+						rpcId,
+						method: endpoint,
+						payload
+					}),
+					...signal === void 0 ? {} : { signal }
+				});
+				if (!response.ok) throw new Error(`transport failure for ${channel}/${endpoint}: HTTP ${response.status}`);
+				const full = parseConnectionResponse(await response.json());
+				if (full.rpcId !== rpcId) throw new Error(`rpcId mismatch for ${endpoint}: sent ${rpcId}, got ${full.rpcId}`);
+				return full.result;
+			} };
+		}
+		//#endregion
 		//#region src/client/forms.ts
 		/**
 		* Generic staged-form model over the plugin's flat settings namespace,
@@ -1643,7 +1904,7 @@ window.__ModuleLoader__.load({
 					}
 					if (field.kind === "number") group.numbers.push(renderNumber(field, numbers, value, snap, defaults));
 					else if (field.kind === "select") group.selects.push(renderSelect(field, selects, value, snap, defaults));
-					else group.toggles.push(renderToggle(field, toggles, value, snap, defaults));
+					else if (field.kind === "boolean") group.toggles.push(renderToggle(field, toggles, value, snap, defaults));
 				}
 				return order.map((key) => map.get(key));
 			}, [
@@ -1780,40 +2041,76 @@ window.__ModuleLoader__.load({
 		* without keeping hidden panels mounted — the same flat schema the Bash card
 		* edits, from the same single-source field table.
 		*
+		* `action`-kind fields (e.g. 探测浏览器) are not part of the staged form:
+		* they run a host RPC endpoint over the official Connection channel
+		* (`/tool-plus`), with per-field running/result state kept at the page level.
+		*
 		* 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. */
@@ -1833,6 +2130,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) {
@@ -1853,10 +2161,11 @@ window.__ModuleLoader__.load({
 		* Render one tool tab's panel content: fields in table order (master
 		* switches first, per their declaration order), grouped under their group
 		* heading, or the no-config placeholder for tools without global settings.
-		* Fields whose visibility condition is unmet are omitted.
+		* Fields whose visibility condition is unmet are omitted. `action` fields
+		* render their own button row (host RPC via the caller's `run`).
 		*/
 		function ToolTabPanel(props) {
-			const { tab, t, form, writable, openSelect, onOpenChange } = props;
+			const { tab, t, form, writable, openSelect, onOpenChange, actionState, actionResults, runAction } = props;
 			if (tab.fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "tps-empty",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -1904,32 +2213,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) => {
-					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);
+				}), /* @__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: 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);
+					})
 				})]
 			}, group.group)) });
 		}
@@ -1937,20 +2265,147 @@ 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 runAction = (0, react.useCallback)((field) => {
+				const actionKey = field.actionKey;
+				if (!actionKey) return;
+				setActionState((prev) => ({
+					...prev,
+					[field.name]: "running"
+				}));
+				setActionResults((prev) => ({
+					...prev,
+					[field.name]: null
+				}));
+				(async () => {
+					try {
+						const result = await createWebConnectionRpc().call(TOOL_PLUS_RPC_CHANNEL, actionKey, {});
+						if (!result.ok) setActionResults((prev) => ({
+							...prev,
+							[field.name]: {
+								ok: false,
+								text: result.error.message
+							}
+						}));
+						else {
+							const found = result.value?.found ?? [];
+							const text = found.length === 0 ? t("browserProbeNone") : found.map((browser) => `${browser.name}: ${browser.path}`).join("\n");
+							setActionResults((prev) => ({
+								...prev,
+								[field.name]: {
+									ok: found.length > 0,
+									text
+								}
+							}));
+						}
+					} catch {
+						setActionResults((prev) => ({
+							...prev,
+							[field.name]: {
+								ok: false,
+								text: t("browserProbeUnavailable")
+							}
+						}));
+					} finally {
+						setActionState((prev) => ({
+							...prev,
+							[field.name]: "done"
+						}));
+					}
+				})();
+			}, [t]);
 			(0, react.useEffect)(() => {
 				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", {
@@ -1961,11 +2416,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) => {
@@ -1978,6 +2438,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) => {
@@ -2005,7 +2466,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}`,
@@ -2022,7 +2483,10 @@ window.__ModuleLoader__.load({
 							form,
 							writable,
 							openSelect,
-							onOpenChange: setOpenSelect
+							onOpenChange: setOpenSelect,
+							actionState,
+							actionResults,
+							runAction
 						})]
 					}, row.id)),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2037,6 +2501,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",
@@ -2104,6 +2576,23 @@ window.__ModuleLoader__.load({
 			fetchEnabledHint: "read 处理 http(s) URL（网页转 Markdown 供模型阅读）时是否启用抓取。",
 			fetchMaxTimeoutSeconds: "抓取超时（秒）",
 			fetchMaxTimeoutSecondsHint: "URL 抓取超时上限；0 表示使用默认的 30 秒。",
+			fetchReader: "网页转 Markdown 后端",
+			fetchReaderHint: "优先使用的网页正文提取后端；auto 按内置顺序依次尝试（含浏览器 JS 渲染）。设为具体后端时，该后端优先，其余按原顺序兜底。",
+			browserReaderEnabled: "浏览器 JS 渲染",
+			browserReaderEnabledHint: "启用本地无头浏览器渲染（SPA 页面需执行 JavaScript 才能出正文）。未安装可用浏览器时自动跳过，不影响其他后端。",
+			browserProbe: "探测浏览器",
+			browserProbeHint: "检测本机可用的浏览器（Edge / Chrome / Chromium），read 的浏览器渲染将使用第一个命中的。",
+			browserProbeRunning: "探测中…",
+			browserProbeNone: "未找到可用浏览器：URL 渲染将跳过浏览器后端。",
+			browserProbeFailed: "探测失败：",
+			browserProbeUnavailable: "探测不可用：当前部署未启用浏览器 RPC 通道。",
+			optReaderAuto: "auto（自动）",
+			optReaderNative: "native（内置转换）",
+			optReaderTrafilatura: "trafilatura",
+			optReaderLynx: "lynx",
+			optReaderParallel: "Parallel Reader",
+			optReaderJina: "Jina Reader",
+			optReaderBrowser: "browser（浏览器渲染）",
 			groupFetch: "抓取",
 			groupImages: "图片",
 			imagesAutoResize: "图片自动缩放",
@@ -2258,6 +2747,23 @@ window.__ModuleLoader__.load({
 			fetchEnabledHint: "Whether fetching is enabled when read handles http(s) URLs.",
 			fetchMaxTimeoutSeconds: "Fetch timeout (s)",
 			fetchMaxTimeoutSecondsHint: "URL fetch timeout cap; 0 = default 30s.",
+			fetchReader: "HTML-to-Markdown backend",
+			fetchReaderHint: "Preferred reader backend for extracting page bodies; auto tries the built-in order (including browser JS rendering). A concrete backend goes first, the rest fall back in order.",
+			browserReaderEnabled: "Browser JS rendering",
+			browserReaderEnabledHint: "Render pages in a local headless browser (SPA pages need JavaScript to produce a body). Skipped automatically when no usable browser is installed.",
+			browserProbe: "Probe browsers",
+			browserProbeHint: "Detect usable browsers on this machine (Edge / Chrome / Chromium); read’s browser rendering uses the first hit.",
+			browserProbeRunning: "Probing…",
+			browserProbeNone: "No usable browser found: URL rendering will skip the browser backend.",
+			browserProbeFailed: "Probe failed: ",
+			browserProbeUnavailable: "Probing unavailable: this deployment does not enable the browser RPC channel.",
+			optReaderAuto: "auto",
+			optReaderNative: "native (built-in conversion)",
+			optReaderTrafilatura: "trafilatura",
+			optReaderLynx: "lynx",
+			optReaderParallel: "Parallel Reader",
+			optReaderJina: "Jina Reader",
+			optReaderBrowser: "browser (JS rendering)",
 			groupFetch: "Fetching",
 			groupImages: "Images",
 			imagesAutoResize: "Auto-resize images",