@dsh-plus/agent-preset-rea 0.1.0 → 0.1.2

package/lib/client.js

@@ -19,6 +19,64 @@ window.__ModuleLoader__.load({
 				children: props.label
 			});
 		}
+		function TextField(props) {
+			const p = props.prefix ?? "dshp";
+			const invalid = props.invalid === true;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${p}-field`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `${p}-head`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							className: `${p}-label`,
+							htmlFor: props.id,
+							children: props.label
+						}), props.badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `${p}-badge ${props.badge.set ? `${p}-badgeSet` : `${p}-badgeUnset`}`,
+							children: props.badge.text
+						}) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: props.id,
+						className: `${p}-input${invalid ? ` ${p}-inputInvalid` : ""}`,
+						type: props.password === true ? "password" : "text",
+						inputMode: props.numeric === true ? "numeric" : void 0,
+						autoComplete: props.password === true ? "off" : void 0,
+						"aria-invalid": invalid || void 0,
+						value: props.value,
+						disabled: props.disabled === true,
+						onChange: (event) => props.onEdit(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: invalid ? `${p}-invalid` : `${p}-hint`,
+						children: invalid ? props.invalidLabel ?? "" : props.hint ?? ""
+					})
+				]
+			});
+		}
+		/**
+		* 勾选行：自绘圆角扁平开关（switch），对齐官方 WebUI 无原生 checkbox 的
+		* 设计语言（官方选择类控件全走胶囊/菜单，见 cardCss 的 -switch 规则）。
+		* 语义保持 checkbox（无障碍树与表单语义不变），视觉自绘。
+		*/
+		function CheckRow(props) {
+			const p = props.prefix ?? "dshp";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${p}-checkRow`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id: props.id,
+					type: "checkbox",
+					role: "switch",
+					"aria-checked": props.checked,
+					checked: props.checked,
+					disabled: props.disabled === true,
+					onChange: (event) => props.onEdit(event.target.checked)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					htmlFor: props.id,
+					children: props.label
+				})]
+			});
+		}
 		//#endregion
 		//#region ../shared/src/client/card.tsx
 		const IDLE_STATUS = {
@@ -194,6 +252,27 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region ../shared/src/client/fetch.ts
+		async function parse(res, guard) {
+			const body = await res.json();
+			if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`);
+			if (guard !== void 0 && !guard(body)) throw new Error(`响应结构不符合预期（${res.url}）`);
+			return body;
+		}
+		/** GET 同源 JSON 端点。 */
+		async function getJson(route, guard) {
+			return parse(await fetch(route, { credentials: "same-origin" }), guard);
+		}
+		/** POST 同源 JSON 端点（body 可省略）。 */
+		async function postJson(route, body, guard) {
+			return parse(await fetch(route, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": "application/json" },
+				...body === void 0 ? {} : { body: JSON.stringify(body) }
+			}), guard);
+		}
+		//#endregion
 		//#region ../shared/src/client/i18n.ts
 		/** 卡片通用文案（save/discard/unsaved/loading 等四插件共有键）。 */
 		const commonZh = {
@@ -436,32 +515,608 @@ ${extra}
 		const SETTINGS_NS = "dsh-plus-agent-preset-rea";
 		//#endregion
 		//#region src/client/draft.ts
-		/** 解析值 → 草稿（非字符串一律视为空串）。 */
+		/** 布尔字段收窄（缺席或类型不符回落默认值）。 */
+		function boolOf(value, fallback) {
+			return typeof value === "boolean" ? value : fallback;
+		}
+		/** 解析值 → 草稿（类型不符一律回落默认）。 */
 		function draftFromValue(value) {
-			return { personaPrefix: typeof value.personaPrefix === "string" ? value.personaPrefix : "" };
+			return {
+				personaPrefix: typeof value.personaPrefix === "string" ? value.personaPrefix : "",
+				proxyPort: typeof value.proxyPort === "number" ? String(value.proxyPort) : "",
+				mcpEnabled: boolOf(value.mcpEnabled, true),
+				skillEnabled: boolOf(value.skillEnabled, true),
+				reverseSkillEnabled: boolOf(value.reverseSkillEnabled, true)
+			};
+		}
+		/**
+		* 代理端口文本 → 端口号。
+		* @returns 空串按 0（不用代理）；非纯数字或越界返回 null（调用方据此判非法）。
+		*/
+		function parseProxyPort(text) {
+			const trimmed = text.trim();
+			if (trimmed === "") return 0;
+			if (!/^\d+$/.test(trimmed)) return null;
+			const port = Number(trimmed);
+			return Number.isInteger(port) && port >= 0 && port <= 65535 ? port : null;
 		}
 		/** 草稿 → 提交形状（只回写本卡片负责的字段）。 */
 		function toPatch(draft) {
-			return { personaPrefix: draft.personaPrefix };
+			return {
+				personaPrefix: draft.personaPrefix,
+				proxyPort: parseProxyPort(draft.proxyPort) ?? 0,
+				mcpEnabled: draft.mcpEnabled,
+				skillEnabled: draft.skillEnabled,
+				reverseSkillEnabled: draft.reverseSkillEnabled
+			};
+		}
+		//#endregion
+		//#region src/client/api.ts
+		/**
+		* 受管安装/更新的端点通道（状态查询 + 三类动作）。
+		* 配置读写仍走 `ctx.remote.settings` 直连（见 card.tsx），这里只补官方传输没有的动作。
+		*
+		* 响应都经类型谓词在边界收窄：宿主契约漂移时立即报错，而不是渲染期白屏。
+		* @module agent-preset-rea/client/api
+		*/
+		const ROUTE_BASE = "/dsh-plus/agent-preset-rea";
+		/** JobDto 守卫。 */
+		function isJob(value) {
+			if (typeof value !== "object" || value === null) return false;
+			const job = value;
+			return typeof job["id"] === "number" && typeof job["kind"] === "string" && typeof job["state"] === "string" && Array.isArray(job["log"]) && typeof job["progress"] === "object" && job["progress"] !== null;
+		}
+		/** StatusDto 守卫（结构性字段缺席即判不符）。 */
+		function isStatus(value) {
+			if (typeof value !== "object" || value === null) return false;
+			const body = value;
+			const install = body["install"];
+			const skill = body["skill"];
+			const mcp = body["mcp"];
+			const reverse = body["reverse"];
+			return typeof install === "object" && install !== null && typeof skill === "object" && skill !== null && typeof mcp === "object" && mcp !== null && typeof reverse === "object" && reverse !== null && typeof body["config"] === "object" && body["config"] !== null;
+		}
+		/** JobActionDto 守卫。 */
+		const isJobAction = (value) => {
+			if (typeof value !== "object" || value === null) return false;
+			const job = value["job"];
+			return job === null || job === void 0 || isJob(job);
+		};
+		/** 查询安装/skill/MCP 行状态与当前作业。 */
+		async function fetchStatus() {
+			return getJson(`${ROUTE_BASE}/status`, isStatus);
+		}
+		/**
+		* 启动作业。
+		* @param kind - `install` = 安装/更新 REA 包；`skill` = 更新 REA skill 副本；
+		*   `reverse` = 更新 reverse-skill（GitHub 源）。
+		* @param proxyPort - 草稿里当前填的代理端口（未保存也即时生效）。
+		*/
+		async function startJob(kind, proxyPort) {
+			return postJson(`${ROUTE_BASE}/${kind}`, { proxyPort }, isJobAction);
+		}
+		/** 取消当前作业。 */
+		async function cancelJob() {
+			return postJson(`${ROUTE_BASE}/cancel`, void 0, isJobAction);
+		}
+		//#endregion
+		//#region src/client/install.tsx
+		/**
+		* 卡片的「REA 安装与更新」区：只读状态表 + 四个动作（安装/更新 REA、更新 REA skill、
+		* 更新 reverse-skill、取消作业）+ 运行中作业的阶段进度条、已用时与日志尾部。
+		*
+		* 状态与作业都来自宿主半的同源端点（见 client/api.ts 与宿主 routes.ts）：这里只管
+		* 轮询与呈现。作业在跑时按 {@link PROGRESS_POLL_MS} 轮询——进度是宿主侧的真事实，
+		* 浏览器不自己造百分比。
+		* @module agent-preset-rea/client/install
+		*/
+		/** 作业运行中的状态轮询间隔（毫秒）。 */
+		const PROGRESS_POLL_MS = 1e3;
+		/** 错误对象 → 人话。 */
+		function messageOf(error) {
+			return error instanceof Error ? error.message : String(error);
+		}
+		/** 起止时间 → 已用时文本。 */
+		function elapsedOf(job) {
+			const start = Date.parse(job.startedAt);
+			if (Number.isNaN(start)) return "—";
+			const end = job.finishedAt === null ? Date.now() : Date.parse(job.finishedAt);
+			const seconds = Math.max(0, Math.round((end - start) / 1e3));
+			if (seconds < 60) return `${seconds}s`;
+			return `${Math.floor(seconds / 60)}m${String(seconds % 60).padStart(2, "0")}s`;
+		}
+		/** 作业状态 → 徽标类名后缀（视觉区分运行中/成功/失败）。 */
+		const STATE_CLASS = {
+			running: "Running",
+			ok: "Ok",
+			error: "Error",
+			cancelled: "Cancelled"
+		};
+		/** 作业种类 → 文案键。 */
+		const JOB_LABEL = {
+			install: "jobInstall",
+			skill: "jobSkill",
+			reverse: "jobReverse"
+		};
+		/** 进度条百分比（防御性收窄，避免越界宽度）。 */
+		function widthOf(percent) {
+			return `${Math.max(0, Math.min(100, percent))}%`;
+		}
+		/** 作业进度块：状态徽标 + 阶段 + 进度条 + 日志尾部。 */
+		function JobPanel(props) {
+			const { t, job } = props;
+			const stateKey = job.state === "running" ? "jobRunning" : job.state === "ok" ? "jobOk" : job.state === "error" ? "jobError" : "jobCancelled";
+			const lines = job.log.slice(-12);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "apr-job",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "apr-jobHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `apr-pill apr-pill${STATE_CLASS[job.state]}`,
+								children: t(stateKey)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "apr-jobTitle",
+								children: t(JOB_LABEL[job.kind])
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "apr-hint",
+								children: [
+									t("jobPhase"),
+									" ",
+									job.progress.step,
+									"/",
+									job.progress.steps,
+									"·",
+									job.progress.phase
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "apr-hint",
+								children: [
+									t("jobElapsed"),
+									" ",
+									elapsedOf(job)
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "apr-bar",
+						role: "progressbar",
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": job.progress.percent,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "apr-barFill",
+							style: { width: widthOf(job.progress.percent) }
+						})
+					}),
+					job.error === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "apr-error",
+						children: job.error
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+						className: "apr-logBox",
+						open: job.state !== "ok",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
+							className: "apr-logSummary",
+							children: t("jobLog")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+							className: "apr-log",
+							children: lines.length === 0 ? t("jobLogEmpty") : lines.join("\n")
+						})]
+					})
+				]
+			});
+		}
+		/** 一行状态（键 + 值）。 */
+		function StatusRow(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "apr-installRow",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+					className: "apr-installKey",
+					children: props.label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+					className: "apr-installVal",
+					children: props.children
+				})]
+			});
+		}
+		/** 状态徽标（已就绪 / 未就绪 / 已关闭）。 */
+		function Pill(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `apr-pill ${props.ok ? "apr-pillOk" : "apr-pillMiss"}`,
+				children: props.label
+			});
+		}
+		/** REA 包与 MCP 行状态。 */
+		function InstallRows(props) {
+			const { t, status } = props;
+			const mcpLabel = !status.mcp.enabled ? status.config.mcpEnabled ? t("mcpMissing") : t("mcpOff") : status.mcp.mode === "custom" ? t("mcpCustom") : t("mcpInstalled");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+					label: t("installPackage"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+							ok: status.install.installed,
+							label: t(status.install.installed ? "installed" : "notInstalled")
+						}),
+						status.install.version === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "apr-mono",
+							children: status.install.version
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "apr-hint",
+							children: [
+								t("installTarget"),
+								" ",
+								status.config.reaVersion
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusRow, {
+					label: t("installPath"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "apr-mono",
+						children: status.install.root
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+					label: t("mcpRow"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "apr-mono",
+						children: mcpLabel
+					}), status.mcp.command === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("code", {
+						className: "apr-mono",
+						children: [
+							status.mcp.command,
+							" ",
+							status.mcp.args.join(" ")
+						]
+					})]
+				})
+			] });
+		}
+		/** REA 官方 skill 状态。 */
+		function SkillRows(props) {
+			const { t, skill, enabled } = props;
+			const version = skill.version === null ? "" : ` · ${skill.version}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+				label: t("skillSource"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+						ok: enabled,
+						label: t(enabled ? "enabled" : "disabled")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "apr-mono",
+						children: t(skill.source === "updated" ? "skillUpdated" : "skillBundled")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "apr-hint",
+						children: [
+							t("skillFiles"),
+							" ",
+							skill.files,
+							version
+						]
+					}),
+					skill.updatedAt === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "apr-hint",
+						children: [
+							t("updatedAt"),
+							" ",
+							skill.updatedAt
+						]
+					})
+				]
+			});
+		}
+		/** reverse-skill（GitHub 源）状态。 */
+		function ReverseRows(props) {
+			const { t, reverse, enabled } = props;
+			const active = reverse.activeGroups.length === 0 ? "—" : reverse.activeGroups.join(", ");
+			const all = reverse.groups.length === 0 ? "—" : reverse.groups.join(", ");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+					label: t("reverseSource"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+							ok: reverse.installed,
+							label: t(reverse.installed ? "installed" : "notInstalled")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "apr-mono",
+							children: reverse.repo
+						}),
+						reverse.sha === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "apr-hint",
+							children: [
+								t("reverseCommit"),
+								" ",
+								reverse.sha.slice(0, 12),
+								reverse.version === null ? "" : ` · v${reverse.version}`
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+					label: t("reverseGroups"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+							ok: enabled,
+							label: t(enabled ? "enabled" : "disabled")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "apr-mono",
+							children: active
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "apr-hint",
+							children: [
+								t("reverseGroupsHint"),
+								" ",
+								all
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+					label: t("reversePath"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "apr-mono",
+						children: reverse.tree
+					}), reverse.updatedAt === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "apr-hint",
+						children: [
+							t("updatedAt"),
+							" ",
+							reverse.updatedAt
+						]
+					})]
+				})
+			] });
+		}
+		/** 只读状态表：REA 包 / MCP 行 / REA skill / reverse-skill。 */
+		function StatusTable(props) {
+			const { t, status } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
+				className: "apr-install",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstallRows, {
+						t,
+						status
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillRows, {
+						t,
+						skill: status.skill,
+						enabled: status.config.skillEnabled
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReverseRows, {
+						t,
+						reverse: status.reverse,
+						enabled: status.config.reverseSkillEnabled
+					})
+				]
+			});
+		}
+		/** 动作按钮行。 */
+		function ActionRow(props) {
+			const { t, busy, running, disabled, proxyPort, onAction, onCancel } = props;
+			const blocked = disabled || busy || running || proxyPort === null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "apr-btnRow",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						prefix: "apr",
+						variant: "primary",
+						label: t("installAction"),
+						disabled: blocked,
+						onClick: () => onAction("install")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						prefix: "apr",
+						label: t("skillAction"),
+						disabled: blocked,
+						onClick: () => onAction("skill")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						prefix: "apr",
+						label: t("reverseAction"),
+						disabled: blocked,
+						onClick: () => onAction("reverse")
+					}),
+					running ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						prefix: "apr",
+						label: t("cancelAction"),
+						disabled: busy,
+						onClick: onCancel
+					}) : null
+				]
+			});
+		}
+		function InstallSection(props) {
+			const { t, disabled, proxyPort } = props;
+			const [status, setStatus] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const alive = (0, react.useRef)(true);
+			(0, react.useEffect)(() => () => {
+				alive.current = false;
+			}, []);
+			const load = (0, react.useCallback)(async () => {
+				try {
+					const next = await fetchStatus();
+					if (!alive.current) return;
+					setStatus(next);
+					setError(null);
+				} catch (failure) {
+					if (alive.current) setError(`${t("statusFailed")}${messageOf(failure)}`);
+				}
+			}, [t]);
+			(0, react.useEffect)(() => {
+				load();
+			}, [load]);
+			const running = status?.job?.state === "running";
+			(0, react.useEffect)(() => {
+				if (running !== true) return;
+				const timer = window.setInterval(() => {
+					load();
+				}, PROGRESS_POLL_MS);
+				return () => {
+					window.clearInterval(timer);
+				};
+			}, [running, load]);
+			const runAction = (0, react.useCallback)((action) => {
+				setBusy(true);
+				setError(null);
+				action().then((result) => {
+					if (!alive.current) return;
+					setStatus((prev) => prev === null ? prev : {
+						...prev,
+						job: result.job
+					});
+					load();
+				}).catch((failure) => {
+					if (alive.current) setError(`${t("actionFailed")}${messageOf(failure)}`);
+				}).finally(() => {
+					if (alive.current) setBusy(false);
+				});
+			}, [load, t]);
+			const job = status?.job ?? null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "apr-field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "apr-head",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "apr-label",
+							children: t("installSection")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							prefix: "apr",
+							label: t("refreshStatus"),
+							disabled: busy || running === true,
+							onClick: () => {
+								load();
+							}
+						})]
+					}),
+					status === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "apr-hint",
+						children: t("statusLoading")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusTable, {
+						t,
+						status
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRow, {
+						t,
+						busy,
+						running: running === true,
+						disabled,
+						proxyPort,
+						onAction: (kind) => {
+							runAction(() => startJob(kind, proxyPort ?? 0));
+						},
+						onCancel: () => {
+							runAction(() => cancelJob());
+						}
+					})] }),
+					job === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JobPanel, {
+						t,
+						job
+					}),
+					error === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "apr-error",
+						children: error
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "apr-hint",
+						children: t("installHint")
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/toggles.tsx
+		/**
+		* 卡片的「能力开关」区：三个一键开关（REA MCP 行 / REA 官方 skill / reverse-skill
+		* 技能包）。三者都是活动字段，保存后本预设换代注册——新建会话按新装配起（REA 工具
+		* 与 skill 根的有无），已存在会话保持既有装配。
+		*
+		* 开关只管「挂不挂」，不管「装没装」：关掉不会删磁盘上的安装副本（更新/回滚仍是
+		* 显式动作，见 install.tsx）。
+		* @module agent-preset-rea/client/toggles
+		*/
+		/** 三个开关的键与文案键。 */
+		const TOGGLES = [
+			{
+				field: "mcpEnabled",
+				id: "apr-toggle-mcp",
+				label: "toggleMcp",
+				hint: "toggleMcpHint"
+			},
+			{
+				field: "skillEnabled",
+				id: "apr-toggle-skill",
+				label: "toggleSkill",
+				hint: "toggleSkillHint"
+			},
+			{
+				field: "reverseSkillEnabled",
+				id: "apr-toggle-reverse",
+				label: "toggleReverse",
+				hint: "toggleReverseHint"
+			}
+		];
+		function ToggleSection(props) {
+			const { t, draft, disabled, onEdit } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "apr-field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "apr-head",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "apr-label",
+						children: t("toggleSection")
+					})
+				}), TOGGLES.map((toggle) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckRow, {
+					prefix: "apr",
+					id: toggle.id,
+					label: t(toggle.label),
+					checked: draft[toggle.field],
+					disabled,
+					onEdit: (checked) => onEdit({ [toggle.field]: checked })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "apr-hint",
+					children: t(toggle.hint)
+				})] }, toggle.field))]
+			});
 		}
 		//#endregion
 		//#region src/client/card.tsx
 		/**
-		* 「逆向工程」预设配置卡片：唯一字段是 persona 提示词。
+		* 「逆向工程」预设配置卡片：提示词（活动字段）+ 代理端口（活动字段）+ 安装维护区。
 		*
 		* 经 injectPluginConfigCard 注册（插件页 plugins.row.config / plugins.bundle.config，
 		* view 分发 summary/page）；外壳与草稿语义走 @dsh-plus/shared/client 套件
 		* （CardChrome + useNamespaceDraft：staged 草稿、脏判定、revision fencing、
-		* Host 更新不覆盖在途编辑）。
+		* Host 更新不覆盖在途编辑），安装维护区见 client/install.tsx。
 		*
-		* 为什么只有这一个字段：`Config` 里只有 `personaPrefix` 标了 `.volatile()`
-		* （对用户的承诺＝必须给编辑器）；MCP 参数、超时、附加 skill 根等属部署方平面，
-		* 由 profile 的 cordis.patch.yml 行级配置覆盖，因此卡片底部只作说明。
-		* 保存后 loader 原位提交活动引用并广播 `loader/volatile-update`，宿主半据此换代
-		* 注册预设声明——新建会话即用新提示词，已存在会话保持原装配。
+		* 五个活动字段（`Config` 里标 `.volatile()` 的）都在这里给出编辑器：
+		* - `personaPrefix`：system-prompt 的 persona 前缀段；
+		* - `proxyPort`：安装/更新时的本机代理端口；
+		* - `mcpEnabled` / `skillEnabled` / `reverseSkillEnabled`：三个能力开关（见 toggles.tsx）。
+		* 其余字段（受管目录、版本钉、skill 组、MCP 参数、超时、附加 skill 根）属部署方平面，
+		* 由 profile 的 cordis.patch.yml 行级配置覆盖，卡片只读展示关键事实。
+		*
+		* 安装维护为什么不放在注册期自动做：启动期 `npx`/npm 安装会跑依赖安装脚本
+		* （原生 prebuild 下载），卡住即吊死预设激活与整个名册；因此改成显式动作
+		* ——后台作业 + 轮询实时进度，作业完成后宿主半换代注册，新建会话即用新事实。
 		* @module agent-preset-rea/client/card
 		*/
-		/** 卡片动作：放弃 / 保存（仅脏且可写时可用）。 */
+		/** 卡片动作：放弃 / 保存（脏且可写且输入合法时才可用）。 */
 		function cardActions(options) {
 			return [{
 				key: "discard",
@@ -472,7 +1127,7 @@ ${extra}
 				key: "save",
 				label: options.t(options.saving ? "saving" : "save"),
 				variant: "primary",
-				disabled: !options.dirty || options.saving || options.disabled,
+				disabled: !options.dirty || options.saving || options.disabled || options.invalid,
 				onClick: options.onSave
 			}];
 		}
@@ -492,7 +1147,8 @@ ${extra}
 				text: t("loading")
 			});
 			const disabled = state.disabled;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardChrome, {
+			const port = parseProxyPort(draft.proxyPort);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardChrome, {
 				prefix: "apr",
 				title: t("title"),
 				description: t("description"),
@@ -505,40 +1161,66 @@ ${extra}
 					dirty: state.dirty,
 					saving: state.saving,
 					disabled,
+					invalid: port === null,
 					onDiscard: state.reset,
 					onSave: state.save
 				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "apr-field",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "apr-head",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-								className: "apr-label",
-								htmlFor: "apr-prompt",
-								children: t("prompt")
-							})
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-							id: "apr-prompt",
-							className: "apr-textarea",
-							rows: 10,
-							spellCheck: false,
-							placeholder: t("promptPlaceholder"),
-							value: draft.personaPrefix,
-							disabled,
-							onChange: (event) => state.edit({ personaPrefix: event.target.value })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "apr-hint",
-							children: t("promptHint")
-						}),
-						draft.personaPrefix.trim() === "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "apr-hint",
-							children: t("promptEmpty")
-						}) : null
-					]
-				})
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "apr-field",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "apr-head",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: "apr-label",
+									htmlFor: "apr-prompt",
+									children: t("prompt")
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+								id: "apr-prompt",
+								className: "apr-textarea",
+								rows: 10,
+								spellCheck: false,
+								placeholder: t("promptPlaceholder"),
+								value: draft.personaPrefix,
+								disabled,
+								onChange: (event) => state.edit({ personaPrefix: event.target.value })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "apr-hint",
+								children: t("promptHint")
+							}),
+							draft.personaPrefix.trim() === "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "apr-hint",
+								children: t("promptEmpty")
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+						prefix: "apr",
+						id: "apr-proxy",
+						label: t("proxyPort"),
+						hint: t("proxyPortHint"),
+						invalid: port === null,
+						invalidLabel: t("proxyPortInvalid"),
+						numeric: true,
+						value: draft.proxyPort,
+						disabled,
+						onEdit: (text) => state.edit({ proxyPort: text })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleSection, {
+						t,
+						draft,
+						disabled,
+						onEdit: state.edit
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstallSection, {
+						t,
+						disabled,
+						proxyPort: port
+					})
+				]
 			});
 		}
 		//#endregion
@@ -551,32 +1233,148 @@ ${extra}
 		const NS = "dsh-plus-agent-preset-rea";
 		const ownZh = {
 			title: "逆向工程预设",
-			description: "REA 提示词：留空即空 persona，工具指引与运行时上下文照常由官方装配注入。",
-			summaryLine: "编辑「逆向工程」预设的 persona 提示词",
+			description: "REA 提示词与安装维护：提示词留空即空 persona，工具指引与运行时上下文照常注入。",
+			summaryLine: "编辑「逆向工程」预设的提示词、开关 REA MCP 与两类 skill，并安装/更新",
 			prompt: "系统提示词（persona 前缀）",
 			promptHint: "写入 system-prompt 的 persona 前缀段，仅对「逆向工程」预设的新会话生效；留空 = 不注入 persona 段（官方工具指引、项目指令与运行时上下文不受影响）。保存后新建会话即用新值。",
 			promptPlaceholder: "例如：先做证据分级，再动手改二进制；每一步给出可复核的证据链……",
 			promptEmpty: "当前为空：该预设不注入 persona 段。",
-			saveFailed: "保存失败："
+			saveFailed: "保存失败：",
+			installSection: "REA 安装与更新",
+			installHint: "安装/更新在后台执行：把 rea-agents 装进下面的受管目录（先装 staging 再换目录，失败不留半截安装树），作业完成后本预设自动换代——新建会话即带 mcp__rea__* 工具。安装位置与 MCP 命令属部署方平面（profile 的 cordis.patch.yml），此处只读展示。",
+			installPackage: "REA 包",
+			installPath: "受管安装目录",
+			installVersion: "版本",
+			installTarget: "目标版本",
+			installed: "已安装",
+			notInstalled: "未安装",
+			skillSource: "REA skill",
+			skillBundled: "随包副本",
+			skillUpdated: "手动更新副本",
+			skillFiles: "文件",
+			updatedAt: "更新时间",
+			mcpRow: "MCP 行",
+			mcpInstalled: "已挂载（受管安装入口）",
+			mcpCustom: "已挂载（显式 mcpCommand）",
+			mcpMissing: "未挂载：未安装 REA，该行已禁用（不会在启动期拉取）",
+			mcpOff: "已按配置关闭",
+			commandLabel: "命令",
+			refreshStatus: "刷新状态",
+			installAction: "安装 / 更新 REA",
+			skillAction: "更新 skill",
+			cancelAction: "取消作业",
+			statusLoading: "正在读取安装状态…",
+			statusFailed: "状态查询失败：",
+			actionFailed: "操作失败：",
+			jobRunning: "作业进行中",
+			jobOk: "作业完成",
+			jobError: "作业失败",
+			jobCancelled: "作业已取消",
+			jobInstall: "安装 REA",
+			jobSkill: "更新 skill",
+			jobPhase: "阶段",
+			jobLog: "日志",
+			jobStartedAt: "开始于",
+			jobFinishedAt: "结束于",
+			jobElapsed: "已用时",
+			jobLogEmpty: "（暂无输出）",
+			toggleSection: "能力开关",
+			toggleMcp: "REA MCP 工具（mcp__rea__*）",
+			toggleMcpHint: "关掉即从本预设摘掉 REA MCP 行，模型面看不到 mcp__rea__* 工具；REA 仍留在磁盘上，随时可开回来（保存后新建会话生效）。",
+			toggleSkill: "REA 官方 skill",
+			toggleSkillHint: "关掉即不挂 REA 官方 skill 根（reverse-engineer-anything），其余 skill 根不受影响。",
+			toggleReverse: "reverse-skill 技能包",
+			toggleReverseHint: "关掉即不挂 zhaoxuya520/reverse-skill 的技能组（默认挂主包根：路由技能 + 各模块技能）；安装副本仍在，可从下面重新更新。",
+			enabled: "已挂载",
+			disabled: "已关闭",
+			reverseSource: "reverse-skill",
+			reverseCommit: "提交",
+			reverseGroups: "技能组",
+			reverseGroupsHint: "树内可选组：",
+			reversePath: "技能包目录",
+			reverseAction: "更新 reverse-skill",
+			jobReverse: "更新 reverse-skill",
+			proxyPort: "安装代理端口",
+			proxyPortHint: "安装/更新时供 npm 与原生依赖（node-pty）prebuild 下载使用的本机代理端口；0 或留空 = 直连。未保存也用于本次安装，保存后长期生效。",
+			proxyPortInvalid: "代理端口必须是 0..65535 的整数。"
 		};
 		const ownEn = {
 			title: "Reverse-engineering preset",
-			description: "REA prompt: leave it empty for a blank persona; official tool guidance and runtime context stay in place.",
-			summaryLine: "Edit the persona prompt of the “逆向工程” preset",
+			description: "REA prompt and installation: an empty prompt means a blank persona; tool guidance and runtime context stay in place.",
+			summaryLine: "Edit the “逆向工程” prompt, toggle REA MCP/skills, install and update them",
 			prompt: "System prompt (persona prefix)",
 			promptHint: "Written to the persona-prefix section of the system prompt for new sessions of this preset only. Empty means no persona section (official tool guidance, project instructions and runtime context are unaffected). New sessions pick up the saved value.",
 			promptPlaceholder: "e.g. Grade the evidence first, then patch the binary; every step needs a checkable chain of evidence…",
 			promptEmpty: "Currently empty: this preset injects no persona section.",
-			saveFailed: "Save failed: "
+			saveFailed: "Save failed: ",
+			installSection: "REA installation",
+			installHint: "Install/update runs in the background: rea-agents goes into the managed directory below (staged install, then directory swap, so a failure leaves no half tree). When the job finishes the preset re-registers — new sessions get the mcp__rea__* tools. The install location and MCP command belong to the deployment plane (profile cordis.patch.yml) and are shown read-only.",
+			installPackage: "REA package",
+			installPath: "Managed install dir",
+			installVersion: "Version",
+			installTarget: "Target version",
+			installed: "Installed",
+			notInstalled: "Not installed",
+			skillSource: "REA skill",
+			skillBundled: "Bundled copy",
+			skillUpdated: "Manually updated copy",
+			skillFiles: "Files",
+			updatedAt: "Updated at",
+			mcpRow: "MCP row",
+			mcpInstalled: "Mounted (managed install entry)",
+			mcpCustom: "Mounted (explicit mcpCommand)",
+			mcpMissing: "Not mounted: REA is not installed, the row stays disabled (nothing is fetched at boot)",
+			mcpOff: "Disabled by config",
+			commandLabel: "Command",
+			refreshStatus: "Refresh status",
+			installAction: "Install / update REA",
+			skillAction: "Update skill",
+			cancelAction: "Cancel job",
+			statusLoading: "Reading install status…",
+			statusFailed: "Status query failed: ",
+			actionFailed: "Action failed: ",
+			jobRunning: "Job running",
+			jobOk: "Job finished",
+			jobError: "Job failed",
+			jobCancelled: "Job cancelled",
+			jobInstall: "Install REA",
+			jobSkill: "Update skill",
+			jobPhase: "Phase",
+			jobLog: "Log",
+			jobStartedAt: "Started",
+			jobFinishedAt: "Finished",
+			jobElapsed: "Elapsed",
+			jobLogEmpty: "(no output yet)",
+			toggleSection: "Capability switches",
+			toggleMcp: "REA MCP tools (mcp__rea__*)",
+			toggleMcpHint: "Turning this off drops the REA MCP row from this preset, so mcp__rea__* tools disappear; REA stays on disk and can be switched back on. New sessions pick up the change.",
+			toggleSkill: "REA official skill",
+			toggleSkillHint: "Turning this off unmounts the bundled REA skill root (reverse-engineer-anything); other skill roots are unaffected.",
+			toggleReverse: "reverse-skill pack",
+			toggleReverseHint: "Turning this off unmounts the skill groups of zhaoxuya520/reverse-skill (the main pack root is mounted by default: router skill plus module skills). The installed copy stays on disk and can be updated again below.",
+			enabled: "Mounted",
+			disabled: "Off",
+			reverseSource: "reverse-skill",
+			reverseCommit: "Commit",
+			reverseGroups: "Skill groups",
+			reverseGroupsHint: "Available in tree: ",
+			reversePath: "Pack directory",
+			reverseAction: "Update reverse-skill",
+			jobReverse: "Update reverse-skill",
+			proxyPort: "Install proxy port",
+			proxyPortHint: "Local proxy port used by npm and by the native node-pty prebuild download during install/update; 0 or empty means direct. The unsaved value is used for the next install and applies permanently once saved.",
+			proxyPortInvalid: "Proxy port must be an integer in 0..65535."
 		};
 		const zh = mergeDict(commonZh, ownZh);
 		const en = mergeDict(commonEn, ownEn);
 		//#endregion
 		//#region src/client/styles.ts
 		/**
-		* 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('apr')，
-		* 本文件只补插件特有规则（提示词多行输入框）。
+		* 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('apr')
+		* （按钮/字段/徽标等类名由共享控件生成，本文件**不**重复定义），这里只补
+		* 插件特有规则：提示词多行框、安装状态表、作业进度条与日志。
 		* 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
+		* 颜色与度量全部走官方主题变量（--dsw-alias-*），不写死色值。
 		* @module agent-preset-rea/client/styles
 		*/
 		const PLUGIN_ID = "@dsh-plus/agent-preset-rea";
@@ -586,8 +1384,28 @@ ${extra}
 .apr-textarea:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
 .apr-textarea:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
 .apr-textarea::placeholder{color:var(--dsw-alias-label-tertiary)}
+.apr-btnRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
+.apr-install{margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
+.apr-installRow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.apr-installKey{flex:none;width:118px;margin:0;font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.apr-installVal{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;font-size:13px;color:var(--dsw-alias-label-primary)}
+.apr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
+.apr-pill{flex:none;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px}
+.apr-pillOk{background:var(--dsw-alias-state-success-secondary);color:var(--dsw-alias-state-success-primary)}
+.apr-pillMiss,.apr-pillError,.apr-pillCancelled{background:var(--dsw-alias-state-error-secondary);color:var(--dsw-alias-state-error-primary)}
+.apr-pillRunning{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.apr-job{margin-top:12px;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3)}
+.apr-jobHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.apr-jobTitle{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.apr-bar{margin-top:8px;height:6px;border-radius:999px;background:var(--dsw-alias-interactive-bg-hover);overflow:hidden}
+.apr-barFill{height:100%;background:var(--dsw-alias-brand-primary);transition:width .3s}
+.apr-logBox{margin-top:8px}
+.apr-logSummary{font-size:12px;color:var(--dsw-alias-label-tertiary);cursor:pointer}
+.apr-log{margin:6px 0 0;max-height:200px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:var(--dsw-alias-label-tertiary)}
+.apr-error{margin:4px 0 0;font-size:12px;color:var(--dsw-alias-state-error-primary)}
 @media (max-width:767px){
 .apr-textarea{font-size:16px;min-height:140px}
+.apr-installKey{width:100%}
 }
 `);
 		/** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */