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

package/lib/client.js

@@ -19,6 +19,41 @@ 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 ?? ""
+					})
+				]
+			});
+		}
 		//#endregion
 		//#region ../shared/src/client/card.tsx
 		const IDLE_STATUS = {
@@ -194,6 +229,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 = {
@@ -434,34 +490,413 @@ ${extra}
 		* @module @dsh-plus/agent-preset-rea/ns
 		*/
 		const SETTINGS_NS = "dsh-plus-agent-preset-rea";
-		//#endregion
-		//#region src/client/draft.ts
-		/** 解析值 → 草稿（非字符串一律视为空串）。 */
+		/** 解析值 → 草稿（类型不符一律回落默认）。 */
 		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) : ""
+			};
+		}
+		/**
+		* 代理端口文本 → 端口号。
+		* @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
+			};
+		}
+		//#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"];
+			return typeof install === "object" && install !== null && typeof skill === "object" && skill !== null && typeof mcp === "object" && mcp !== 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` = 拉取并替换 skill 副本。
+		* @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、更新 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"
+		};
+		/** 作业进度块：状态徽标 + 阶段 + 进度条 + 日志尾部。 */
+		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.kind === "install" ? "jobInstall" : "jobSkill")
+							}),
+							/* @__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: `${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
+				})]
+			});
+		}
+		/** 只读状态表：REA 包 / 受管目录 / skill 来源 / MCP 行形态。 */
+		function StatusTable(props) {
+			const { t, status } = props;
+			const skillLabel = status.skill.source === "updated" ? t("skillUpdated") : t("skillBundled");
+			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)("dl", {
+				className: "apr-install",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatusRow, {
+						label: t("installPackage"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `apr-pill ${status.install.installed ? "apr-pillOk" : "apr-pillMiss"}`,
+								children: 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("skillSource"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "apr-mono",
+								children: skillLabel
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "apr-hint",
+								children: [
+									t("skillFiles"),
+									" ",
+									status.skill.files,
+									status.skill.version === null ? "" : ` · ${status.skill.version}`
+								]
+							}),
+							status.skill.updatedAt === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "apr-hint",
+								children: [
+									t("updatedAt"),
+									" ",
+									status.skill.updatedAt
+								]
+							})
+						]
+					}),
+					/* @__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(" ")
+							]
+						})]
+					})
+				]
+			});
+		}
+		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 blocked = disabled || busy || running === true;
+			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.jsxs)("div", {
+						className: "apr-btnRow",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								prefix: "apr",
+								variant: "primary",
+								label: t("installAction"),
+								disabled: blocked || proxyPort === null,
+								onClick: () => {
+									runAction(() => startJob("install", proxyPort ?? 0));
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								prefix: "apr",
+								label: t("skillAction"),
+								disabled: blocked || proxyPort === null,
+								onClick: () => {
+									runAction(() => startJob("skill", proxyPort ?? 0));
+								}
+							}),
+							running === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								prefix: "apr",
+								label: t("cancelAction"),
+								disabled: busy,
+								onClick: () => {
+									runAction(() => cancelJob());
+								}
+							}) : null
+						]
+					})] }),
+					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/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` 里标 `.volatile()` 的）都在这里给出编辑器：
+		* - `personaPrefix`：system-prompt 的 persona 前缀段；
+		* - `proxyPort`：安装/更新时的本机代理端口。
+		* 其余字段（安装位置、MCP 参数、超时、附加 skill 根）属部署方平面，由 profile 的
+		* cordis.patch.yml 行级配置覆盖，卡片只读展示关键事实。
 		*
-		* 为什么只有这一个字段：`Config` 里只有 `personaPrefix` 标了 `.volatile()`
-		* （对用户的承诺＝必须给编辑器）；MCP 参数、超时、附加 skill 根等属部署方平面，
-		* 由 profile 的 cordis.patch.yml 行级配置覆盖，因此卡片底部只作说明。
-		* 保存后 loader 原位提交活动引用并广播 `loader/volatile-update`，宿主半据此换代
-		* 注册预设声明——新建会话即用新提示词，已存在会话保持原装配。
+		* 安装维护为什么不放在注册期自动做：启动期 `npx`/npm 安装会跑依赖安装脚本
+		* （原生 prebuild 下载），卡住即吊死预设激活与整个名册；因此改成显式动作
+		* ——后台作业 + 轮询实时进度，作业完成后宿主半换代注册，新建会话即用新事实。
 		* @module agent-preset-rea/client/card
 		*/
-		/** 卡片动作：放弃 / 保存（仅脏且可写时可用）。 */
+		/** 卡片动作：放弃 / 保存（脏且可写且输入合法时才可用）。 */
 		function cardActions(options) {
 			return [{
 				key: "discard",
@@ -472,7 +907,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 +927,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 +941,60 @@ ${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)(InstallSection, {
+						t,
+						disabled,
+						proxyPort: port
+					})
+				]
 			});
 		}
 		//#endregion
@@ -551,32 +1007,116 @@ ${extra}
 		const NS = "dsh-plus-agent-preset-rea";
 		const ownZh = {
 			title: "逆向工程预设",
-			description: "REA 提示词：留空即空 persona，工具指引与运行时上下文照常由官方装配注入。",
-			summaryLine: "编辑「逆向工程」预设的 persona 提示词",
+			description: "REA 提示词与安装维护：提示词留空即空 persona，工具指引与运行时上下文照常注入。",
+			summaryLine: "编辑「逆向工程」预设的提示词，并安装/更新 REA 与 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: "（暂无输出）",
+			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 and install/update REA and its skill",
 			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)",
+			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 +1126,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）。 */