dsh-mcp-panel 0.3.0 → 0.4.0

package/lib/client.js

@@ -113,7 +113,10 @@ window.__ModuleLoader__.load({
 				empty: snapshot.servers.length === 0,
 				observed: snapshot.observed,
 				patchFile: snapshot.patchFile,
-				refreshIntervalMs: snapshot.refreshIntervalMs
+				refreshIntervalMs: snapshot.refreshIntervalMs,
+				capabilities: snapshot.capabilities,
+				trial: snapshot.trial,
+				writeEnabled: snapshot.writeEnabled
 			};
 		}
 		/**
@@ -150,8 +153,585 @@ window.__ModuleLoader__.load({
 			return servers.filter((row) => row.view.serverName.toLocaleLowerCase().includes(needle) || row.view.target.toLocaleLowerCase().includes(needle));
 		}
 		//#endregion
+		//#region src/client/ServerEditor.tsx
+		/** Server CRUD editor: form → patch fragment → copy or approval-gated write. */
+		let rowCounter = 0;
+		/** Render the CRUD editor. */
+		function ServerEditor({ t, view, entryId, writeEnabled, actions, onClose, onWritten }) {
+			const isEdit = view !== null;
+			const [serverName, setServerName] = (0, react.useState)(view?.serverName ?? "");
+			const [transport, setTransport] = (0, react.useState)(view?.transport === "streamable-http" ? "streamable-http" : "stdio");
+			const [command, setCommand] = (0, react.useState)(view?.command ?? "");
+			const [args, setArgs] = (0, react.useState)((view?.args ?? []).join("\n"));
+			const [cwd, setCwd] = (0, react.useState)(view?.cwd ?? "");
+			const [url, setUrl] = (0, react.useState)(view?.url ?? "");
+			const [timeout, setTimeoutText] = (0, react.useState)(view?.toolCallTimeoutMs === null ? "" : String(view?.toolCallTimeoutMs));
+			const [failFast, setFailFast] = (0, react.useState)(view?.failOnStartupError === true);
+			const [reconnectEnabled, setReconnectEnabled] = (0, react.useState)(view === null || view.reconnectEnabled === null ? true : view.reconnectEnabled);
+			const [reconnectAttempts, setReconnectAttempts] = (0, react.useState)(view === null || view.reconnectMaxAttempts === null ? "" : String(view.reconnectMaxAttempts));
+			const [envRows, setEnvRows] = (0, react.useState)(() => initialRows(view?.envKeys ?? []));
+			const [headerRows, setHeaderRows] = (0, react.useState)(() => initialRows(view?.headerKeys ?? []));
+			const [preview, setPreview] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [armed, setArmed] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const [notice, setNotice] = (0, react.useState)(null);
+			const [written, setWritten] = (0, react.useState)(null);
+			const rowsToMap = (rows, existingKeys) => {
+				const entries = {};
+				const keep = [];
+				for (const row of rows) {
+					const key = row.key.trim();
+					if (key === "") continue;
+					if (existingKeys.includes(key) && row.value === "") keep.push(key);
+					else entries[key] = row.value;
+				}
+				return {
+					entries,
+					keep
+				};
+			};
+			const buildOp = () => {
+				const existingEnv = view?.envKeys ?? [];
+				const existingHeaders = view?.headerKeys ?? [];
+				const env = rowsToMap(envRows, existingEnv);
+				const headers = rowsToMap(headerRows, existingHeaders);
+				const config = {
+					serverName: serverName.trim(),
+					transport,
+					...transport === "stdio" ? {
+						command: command.trim(),
+						...args.trim() === "" ? {} : { args: args.split("\n").map((line) => line.trim()).filter((line) => line !== "") },
+						...cwd.trim() === "" ? {} : { cwd: cwd.trim() },
+						env: env.entries,
+						...isEdit ? { keepEnv: env.keep } : {}
+					} : {
+						url: url.trim(),
+						headers: headers.entries,
+						...isEdit ? { keepHeaders: headers.keep } : {}
+					},
+					...timeout.trim() === "" ? {} : { toolCallTimeoutMs: Number(timeout) },
+					...failFast ? { failOnStartupError: true } : {},
+					...reconnectEnabled === false ? { reconnectEnabled: false } : {},
+					...reconnectAttempts.trim() === "" ? {} : { reconnectMaxAttempts: Number(reconnectAttempts) }
+				};
+				return isEdit ? {
+					kind: "edit",
+					entryId,
+					config
+				} : {
+					kind: "add",
+					config
+				};
+			};
+			const doPreview = () => {
+				setError(null);
+				setNotice(null);
+				setWritten(null);
+				setArmed(false);
+				setBusy(true);
+				Promise.resolve().then(() => actions.previewPatch(JSON.stringify(buildOp()))).then((result) => {
+					setPreview(result);
+					setBusy(false);
+				}, (failure) => {
+					setError(messageOf(failure));
+					setBusy(false);
+				});
+			};
+			const doWrite = () => {
+				if (preview === null) return;
+				setError(null);
+				setNotice(null);
+				setBusy(true);
+				Promise.resolve().then(() => actions.writePatch(JSON.stringify(buildOp()), true)).then((result) => {
+					setWritten(result);
+					setBusy(false);
+					setArmed(false);
+					setNotice(t("writeDone").replace("{file}", result.file).replace("{backup}", result.backupPath));
+					onWritten();
+				}, (failure) => {
+					setError(t("writeFailed").replace("{message}", messageOf(failure)));
+					setBusy(false);
+				});
+			};
+			const copy = () => {
+				if (preview === null) return;
+				navigator.clipboard?.writeText(preview.fragment).then(() => {
+					setNotice(t("patchCopied"));
+				}, (failure) => {
+					setError(t("copyFailed").replace("{message}", messageOf(failure)));
+				});
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dmcp-editor",
+				"data-mcp-editor": isEdit ? entryId : "new",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+						className: "dmcp-heading",
+						children: isEdit ? t("editorTitleEdit").replace("{name}", view?.serverName ?? "") : t("editorTitleAdd")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dmcp-form",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldServerName") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "text",
+									value: serverName,
+									onChange: (event) => {
+										setServerName(event.currentTarget.value);
+									}
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldTransport") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+									value: transport,
+									onChange: (event) => {
+										setTransport(event.currentTarget.value === "streamable-http" ? "streamable-http" : "stdio");
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "stdio",
+										children: "stdio"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "streamable-http",
+										children: "streamable-http"
+									})]
+								})]
+							}),
+							transport === "stdio" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "dmcp-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldCommand") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										value: command,
+										onChange: (event) => {
+											setCommand(event.currentTarget.value);
+										}
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "dmcp-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldArgs") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+										rows: 3,
+										value: args,
+										onChange: (event) => {
+											setArgs(event.currentTarget.value);
+										}
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "dmcp-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldCwd") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										value: cwd,
+										onChange: (event) => {
+											setCwd(event.currentTarget.value);
+										}
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MapEditor, {
+									label: t("fieldEnv"),
+									rows: envRows,
+									setRows: setEnvRows,
+									t
+								})
+							] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldUrl") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "text",
+									value: url,
+									onChange: (event) => {
+										setUrl(event.currentTarget.value);
+									}
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MapEditor, {
+								label: t("fieldHeaders"),
+								rows: headerRows,
+								setRows: setHeaderRows,
+								t
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldTimeout") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "number",
+									min: 1,
+									value: timeout,
+									onChange: (event) => {
+										setTimeoutText(event.currentTarget.value);
+									}
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-check",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: failFast,
+									onChange: (event) => {
+										setFailFast(event.currentTarget.checked);
+									}
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldFailFast") })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-check",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: reconnectEnabled,
+									onChange: (event) => {
+										setReconnectEnabled(event.currentTarget.checked);
+									}
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldReconnectEnabled") })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("fieldReconnectMaxAttempts") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "number",
+									min: 1,
+									value: reconnectAttempts,
+									onChange: (event) => {
+										setReconnectAttempts(event.currentTarget.value);
+									}
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dmcp-editor-actions",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dmcp-action",
+							onClick: doPreview,
+							disabled: busy,
+							children: t("previewPatch")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dmcp-action",
+							onClick: onClose,
+							disabled: busy,
+							children: t("cancel")
+						})]
+					}),
+					error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-error-text",
+						role: "alert",
+						children: error
+					}) : null,
+					notice !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-notice",
+						children: notice
+					}) : null,
+					preview !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dmcp-patch",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dmcp-patch-hint",
+								children: preview.file === null ? t("patchFileUnknown") : t("patchFor").replace("{file}", preview.file)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								className: "dmcp-fragment",
+								children: preview.fragment
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dmcp-editor-actions",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dmcp-action",
+									onClick: copy,
+									children: t("copyPatch")
+								}), writeEnabled && preview.file !== null ? armed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dmcp-action dmcp-confirm",
+									onClick: doWrite,
+									disabled: busy,
+									children: t("confirmWrite")
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dmcp-action",
+									onClick: () => {
+										setArmed(true);
+									},
+									disabled: busy,
+									children: t("writeToProfile")
+								}) : null]
+							}),
+							armed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dmcp-notice",
+								children: t("writeRequiresConfirm")
+							}) : null,
+							!writeEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dmcp-error-text",
+								children: t("writeDisabled")
+							}) : null,
+							written !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dmcp-notice",
+								children: t(prevWrittenLabel(written.approvalPath))
+							}) : null
+						]
+					}) : null
+				]
+			});
+		}
+		/** Localized approval-channel label for one write result. */
+		function prevWrittenLabel(path) {
+			return path === "harness-approval" ? "approvalHarness" : "approvalInteractive";
+		}
+		/** Build the initial row list from existing keys (values left blank = keep). */
+		function initialRows(keys) {
+			return keys.map((key) => ({
+				id: ++rowCounter,
+				key,
+				value: ""
+			}));
+		}
+		/** Key/value row editor with add/remove; blank values on existing keys mean "keep". */
+		function MapEditor({ label, rows, setRows, t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+				className: "dmcp-map",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", { children: label }),
+					rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-status",
+						children: t("none")
+					}) : null,
+					rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dmcp-map-row",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								className: "dmcp-map-key",
+								"aria-label": t("keyColumn"),
+								placeholder: t("keyColumn"),
+								value: row.key,
+								onChange: (event) => {
+									setRows((current) => current.map((entry) => entry.id === row.id ? {
+										...entry,
+										key: event.currentTarget.value
+									} : entry));
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								className: "dmcp-map-value",
+								"aria-label": t("valueColumn"),
+								placeholder: t("unchanged"),
+								value: row.value,
+								onChange: (event) => {
+									setRows((current) => current.map((entry) => entry.id === row.id ? {
+										...entry,
+										value: event.currentTarget.value
+									} : entry));
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dmcp-action",
+								"aria-label": t("removeRow"),
+								onClick: () => {
+									setRows((current) => current.filter((entry) => entry.id !== row.id));
+								},
+								children: t("removeRow")
+							})
+						]
+					}, row.id)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dmcp-action",
+						onClick: () => {
+							setRows((current) => [...current, {
+								id: ++rowCounter,
+								key: "",
+								value: ""
+							}]);
+						},
+						children: t("addRow")
+					})
+				]
+			});
+		}
+		/** Message text of an arbitrary thrown value. */
+		function messageOf(failure) {
+			return failure instanceof Error ? failure.message : String(failure);
+		}
+		//#endregion
+		//#region src/client/TrialConsole.tsx
+		/** Tool trial console: server → registered mcp__* tool → JSON args → official pipeline. */
+		/** Render the trial console. */
+		function TrialConsole({ t, servers, policy, callTool }) {
+			const configured = servers.filter((server) => server.entryId !== "");
+			const [serverName, setServerName] = (0, react.useState)("");
+			const [toolName, setToolName] = (0, react.useState)("");
+			const [argsText, setArgsText] = (0, react.useState)("{}");
+			const [running, setRunning] = (0, react.useState)(false);
+			const [result, setResult] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const server = configured.find((candidate) => candidate.serverName === serverName) ?? configured[0];
+			(0, react.useEffect)(() => {
+				if (configured.length > 0 && serverName === "") setServerName(configured[0]?.serverName ?? "");
+			}, [configured, serverName]);
+			const tools = server?.tools ?? [];
+			(0, react.useEffect)(() => {
+				if (tools.length > 0 && !tools.some((tool) => tool.name === toolName)) setToolName(tools[0]?.name ?? "");
+				if (tools.length === 0 && toolName !== "") setToolName("");
+			}, [tools, toolName]);
+			const run = () => {
+				const selectedServer = server;
+				if (selectedServer === void 0 || toolName === "") return;
+				try {
+					JSON.parse(argsText.trim() === "" ? "{}" : argsText);
+				} catch {
+					setError(t("trialArgsInvalid"));
+					return;
+				}
+				setError(null);
+				setResult(null);
+				setRunning(true);
+				Promise.resolve().then(() => callTool(JSON.stringify({
+					serverName: selectedServer.serverName,
+					toolName,
+					argsJson: argsText.trim() === "" ? "{}" : argsText
+				}))).then((outcome) => {
+					setResult(outcome);
+					setRunning(false);
+				}, (failure) => {
+					setError(failure instanceof Error ? failure.message : String(failure));
+					setRunning(false);
+				});
+			};
+			if (!policy.enabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dmcp-trial",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "dmcp-heading",
+					children: t("trial")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dmcp-status",
+					children: t("trialDisabled")
+				})]
+			});
+			const pretty = result === null ? null : prettyJson(result.resultJson);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dmcp-trial",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "dmcp-heading",
+						children: t("trial")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-status",
+						children: t("trialHint")
+					}),
+					configured.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-status",
+						children: t("empty")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dmcp-trial-row",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("trialServer") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									value: server?.serverName ?? "",
+									onChange: (event) => {
+										setServerName(event.currentTarget.value);
+										setToolName("");
+									},
+									children: configured.map((candidate) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: candidate.serverName,
+										children: candidate.serverName
+									}, candidate.serverName))
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dmcp-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("trialTool") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+									value: toolName,
+									onChange: (event) => {
+										setToolName(event.currentTarget.value);
+									},
+									children: [tools.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "",
+										children: t("trialNoTools")
+									}) : null, tools.map((tool) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: tool.name,
+										children: tool.name
+									}, tool.name))]
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dmcp-action",
+								onClick: run,
+								disabled: running || toolName === "",
+								children: running ? t("trialRunning") : t("trialRun")
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "dmcp-field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("trialArgs") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+							rows: 4,
+							spellCheck: false,
+							value: argsText,
+							onChange: (event) => {
+								setArgsText(event.currentTarget.value);
+							}
+						})]
+					})] }),
+					error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-error-text",
+						role: "alert",
+						children: error
+					}) : null,
+					result !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dmcp-trial-result",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "dmcp-trial-meta",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeTone, {
+									ok: !result.isError,
+									label: result.isError ? "error" : "ok"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("trialDuration").replace("{ms}", String(result.durationMs)) }),
+								result.truncated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dmcp-warn-text",
+									children: t("trialTruncated")
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dmcp-trial-call",
+									children: result.callId
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+							className: "dmcp-fragment dmcp-trial-json",
+							children: pretty
+						})]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dmcp-status",
+						children: t("trialApprovalNote")
+					})
+				]
+			});
+		}
+		/** One tone-colored badge chip (label is visible text). */
+		function BadgeTone({ ok, label }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "dmcp-badge",
+				"data-tone": ok ? "ok" : "error",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dmcp-dot",
+					"aria-hidden": "true"
+				}), label]
+			});
+		}
+		/** Pretty-print one result JSON; unparseable (truncated) text renders raw. */
+		function prettyJson(json) {
+			try {
+				return JSON.stringify(JSON.parse(json), null, 2);
+			} catch {
+				return json;
+			}
+		}
+		//#endregion
 		//#region src/client/McpPanelTab.tsx
-		/** The read-only MCP management tab: server rows, badges, tools, probes. */
+		/** The MCP management console tab: server cards, CRUD editor, trial console, capabilities, probes. */
 		/** Localized label for one server badge code. */
 		function badgeLabel(badge, t) {
 			switch (badge) {
@@ -182,8 +762,14 @@ window.__ModuleLoader__.load({
 			const start = format(view.startedAt);
 			return view.finishedAt === null ? start : `${start}–${format(view.finishedAt)}`;
 		}
-		/** Render the read-only MCP management tab. */
-		function McpPanelTab({ status, probe, t }) {
+		/** Localized text for one diagnostic code (fallback: the wire's English text). */
+		function diagnosticText(code, text, t) {
+			const key = `diag_${code}`;
+			const candidate = t(key);
+			return candidate === key ? text : candidate;
+		}
+		/** Render the MCP management console tab. */
+		function McpPanelTab({ status, probe, previewPatch, writePatch, callTool, t }) {
 			const listId = (0, react.useId)();
 			const [request, setRequest] = (0, react.useState)(0);
 			const [expanded, setExpanded] = (0, react.useState)({});
@@ -191,6 +777,9 @@ window.__ModuleLoader__.load({
 			const [state, setState] = (0, react.useState)({ status: "loading" });
 			const [toolQueries, setToolQueries] = (0, react.useState)({});
 			const [serverQuery, setServerQuery] = (0, react.useState)("");
+			const [editor, setEditor] = (0, react.useState)(null);
+			const [removeArm, setRemoveArm] = (0, react.useState)(null);
+			const [removeError, setRemoveError] = (0, react.useState)(null);
 			const reload = () => {
 				setRequest((value) => value + 1);
 			};
@@ -231,7 +820,7 @@ window.__ModuleLoader__.load({
 			const visibleServers = model !== void 0 ? filterServers(model.servers, serverQuery) : [];
 			const summary = model !== void 0 ? summarizePanel(visibleServers) : null;
 			const summaryText = summary === null ? "" : t("summary").replace("{total}", String(summary.total)).replace("{connected}", String(summary.connected)).replace("{errored}", String(summary.errored));
-			const probeRunning = model !== void 0 && model.probes.some((probe) => probe.view.status === "running");
+			const probeRunning = model !== void 0 && model.probes.some((probeRow) => probeRow.view.status === "running");
 			(0, react.useEffect)(() => {
 				if (!probeRunning) return void 0;
 				const timer = setInterval(() => {
@@ -328,7 +917,7 @@ window.__ModuleLoader__.load({
 										const open = expanded[row.view.serverName] === true;
 										const detailId = `${listId}-${encodeURIComponent(row.view.serverName)}`;
 										const toolQuery = toolQueries[row.view.serverName] ?? "";
-										const rowProbeRunning = model.probes.some((probe) => probe.view.status === "running" && probe.view.serverName === row.view.serverName);
+										const rowProbeRunning = model.probes.some((probeRow) => probeRow.view.status === "running" && probeRow.view.serverName === row.view.serverName);
 										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 											className: "dmcp-card",
 											"data-mcp-server": row.view.serverName,
@@ -395,9 +984,36 @@ window.__ModuleLoader__.load({
 																row.view.delayMs,
 																" ",
 																t("ms")
-															] })] }) : null
+															] })] }) : null,
+															row.view.exitCode !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("exitCode") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: row.view.exitCode })] }) : null,
+															row.view.stderrTail !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stderrTail") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: row.view.stderrTail })] }) : null
 														]
 													}),
+													row.view.diagnostics.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "dmcp-health",
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+															className: "dmcp-health-title",
+															children: t("healthSuggestions")
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+															className: "dmcp-health-list",
+															children: row.view.diagnostics.map((diagnostic) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+																diagnosticText(diagnostic.code, diagnostic.text, t),
+																" ",
+																/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("code", {
+																	className: "dmcp-diag-code",
+																	children: [
+																		"(",
+																		diagnostic.code,
+																		")"
+																	]
+																})
+															] }, diagnostic.code))
+														})]
+													}) : null,
+													row.view.exitCode === null && row.view.stderrTail === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+														className: "dmcp-status",
+														children: t("healthPending")
+													}) : null,
 													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("code", {
 														className: "dmcp-target",
 														title: row.view.target,
@@ -407,6 +1023,70 @@ window.__ModuleLoader__.load({
 															row.view.target
 														]
 													}),
+													row.view.config !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "dmcp-editor-actions",
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: "dmcp-action",
+															onClick: () => {
+																setEditor({
+																	entryId: row.view.entryId,
+																	view: row.view.config
+																});
+															},
+															children: t("editServer")
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: "dmcp-action dmcp-danger",
+															onClick: () => {
+																setRemoveArm(row.view.serverName);
+																setRemoveError(null);
+															},
+															children: t("removeServer")
+														})]
+													}) : null,
+													removeArm === row.view.serverName && row.view.entryId !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "dmcp-remove",
+														children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+																className: "dmcp-status",
+																children: t("removeConfirm")
+															}),
+															removeError !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+																className: "dmcp-error-text",
+																role: "alert",
+																children: removeError
+															}) : null,
+															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																className: "dmcp-editor-actions",
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+																	type: "button",
+																	className: "dmcp-action dmcp-danger",
+																	onClick: () => {
+																		setRemoveError(null);
+																		Promise.resolve().then(() => writePatch(JSON.stringify({
+																			kind: "disable",
+																			entryId: row.view.entryId,
+																			serverName: row.view.serverName
+																		}), true)).then(() => {
+																			setRemoveArm(null);
+																			reload();
+																		}, (error) => {
+																			setRemoveError(error instanceof Error ? error.message : String(error));
+																		});
+																	},
+																	children: t("confirmWrite")
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+																	type: "button",
+																	className: "dmcp-action",
+																	onClick: () => {
+																		setRemoveArm(null);
+																	},
+																	children: t("cancel")
+																})]
+															})
+														]
+													}) : null,
 													row.view.transport === "streamable-http" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 														type: "button",
 														className: "dmcp-probe-now",
@@ -462,6 +1142,77 @@ window.__ModuleLoader__.load({
 									probeError
 								]
 							}) : null,
+							model.patchFile !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "dmcp-patch-hint",
+								children: [
+									t("patchHint"),
+									" ",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: model.patchFile })
+								]
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dmcp-toolbar",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dmcp-action",
+									onClick: () => {
+										setEditor({
+											entryId: "",
+											view: null
+										});
+									},
+									children: t("addServer")
+								})
+							}),
+							editor !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerEditor, {
+								t,
+								view: editor.view,
+								entryId: editor.entryId,
+								writeEnabled: model.writeEnabled,
+								actions: {
+									previewPatch,
+									writePatch
+								},
+								onClose: () => {
+									setEditor(null);
+									reload();
+								},
+								onWritten: () => {
+									reload();
+								}
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrialConsole, {
+								t,
+								servers: model.servers.map((row) => row.view),
+								policy: state.status === "ready" ? state.snapshot.trial : {
+									enabled: false,
+									timeoutMs: 0,
+									maxResultChars: 0
+								},
+								callTool
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dmcp-capabilities",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+									className: "dmcp-heading",
+									children: t("capabilities")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+									className: "dmcp-capabilities-list",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+										tone: model.capabilities.resources.available ? "ok" : "muted",
+										label: t("capResources")
+									}), !model.capabilities.resources.available ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dmcp-tool-description",
+										children: t("capPending")
+									}) : null] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+										tone: model.capabilities.prompts.available ? "ok" : "muted",
+										label: t("capPrompts")
+									}), !model.capabilities.prompts.available ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dmcp-tool-description",
+										children: t("capPending")
+									}) : null] })]
+								})]
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 								className: "dmcp-heading",
 								children: t("probes")
@@ -471,37 +1222,29 @@ window.__ModuleLoader__.load({
 								children: t("probeEmpty")
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 								className: "dmcp-probes",
-								children: model.probes.map((probe) => {
-									const badge = probeBadge(probe.view.status);
+								children: model.probes.map((probeRow) => {
+									const badge = probeBadge(probeRow.view.status);
 									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 										className: "dmcp-probe",
-										"data-mcp-probe": probe.view.id,
+										"data-mcp-probe": probeRow.view.id,
 										children: [
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
 												tone: badge.tone,
 												label: probeLabel(badge.badge, t)
 											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: probe.view.serverName }),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: probeRow.view.serverName }),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: "dmcp-probe-time",
-												children: formatProbeTime(probe.view)
+												children: formatProbeTime(probeRow.view)
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: "dmcp-probe-detail",
-												children: probe.view.detail ?? t("none")
+												children: probeRow.view.detail ?? t("none")
 											})
 										]
-									}, probe.view.id);
+									}, probeRow.view.id);
 								})
-							}),
-							model.patchFile !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: "dmcp-patch-hint",
-								children: [
-									t("patchHint"),
-									" ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: model.patchFile })
-								]
-							}) : null
+							})
 						]
 					}) : null
 				]
@@ -522,7 +1265,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/locales.ts
-		/** Copy dictionaries for the MCP management Settings tab. */
+		/** Copy dictionaries for the MCP management console tab. */
 		/** Simplified Chinese dictionary and key source of truth. */
 		const zh = {
 			tab: "MCP",
@@ -557,7 +1300,7 @@ window.__ModuleLoader__.load({
 			lastEvent: "最后事件",
 			filterTools: "过滤工具",
 			ms: "ms",
-			derivedNote: "连接状态/重连计数来自上游 mcp/status 事件的提议（docs/upstream-proposal.md）；当前未观察到上游数据，以下连接字段为\"未知\"，其余为配置与工具注册表事实。",
+			derivedNote: "连接状态/重连计数来自上游 mcp/status 事件；未观察到上游数据时连接字段显示为\"未知\"，其余为配置与工具注册表事实。",
 			probes: "连通性探测",
 			probeEmpty: "暂无探测记录。用 mcp_probe 工具发起一次探测。",
 			probeRunning: "运行中",
@@ -570,7 +1313,85 @@ window.__ModuleLoader__.load({
 			probeReachable: "可达",
 			probeUnreachable: "不可达",
 			probeFailedAction: "探测失败",
-			patchHint: "启停只能通过 patch 建议（/mcp <server> disable|enable）手工应用到"
+			patchHint: "本控制台以\"追加操作\"方式写入 profile patch 层（永不改写既有内容），每次写入前自动备份。",
+			health: "健康诊断",
+			healthSuggestions: "自愈建议",
+			healthNone: "未发现已知故障模式——可观测事实一切正常。",
+			healthPending: "进程退出码 / stderr 尾部：待官方支持（官方 client 尚未暴露进程诊断）。",
+			exitCode: "退出码",
+			stderrTail: "stderr 尾部",
+			diag_commandNotFound: "配置的命令不存在——安装对应包或修正可执行文件路径。",
+			diag_commandSpawnFailed: "服务器进程启动失败或已退出——检查命令行、参数与服务器自身日志。",
+			diag_connectionRefused: "服务器拒绝连接——先启动服务器，或检查 URL 中的主机/端口。",
+			diag_connectionDropped: "连接中途断开——服务器可能崩溃或重启。",
+			diag_timeout: "请求超时——服务器可能过载或 URL 错误；调用慢时可调整 toolCallTimeoutMs。",
+			diag_dns: "主机名无法解析——检查 URL 中的域名与网络。",
+			diag_auth401: "服务器拒绝了凭据（HTTP 401）——检查 Authorization 头或 token。",
+			diag_auth403: "服务器拒绝访问（HTTP 403）——凭据有效但缺少权限。",
+			diag_path404: "端点路径返回 404——检查 URL 路径（例如 /mcp）。",
+			diag_rateLimit: "服务器限流——等待，或降低重连/请求频率。",
+			diag_permission: "权限错误——检查文件权限、PATH 与命令是否可执行。",
+			diag_reconnectExhausted: "重连预算已耗尽、客户端放弃——先修复根因，再重载该行（web 面板热重载 cordis.patch.yml）或重启。",
+			diag_reconnectWaiting: "客户端正在退避等待重连——会自动重试；修复根因即可终止循环。",
+			diag_entryFailed: "cordis 行挂载失败——查看 loader 诊断，修复该行后重载。",
+			diagCodeFallback: "建议",
+			addServer: "添加服务器",
+			editServer: "编辑",
+			removeServer: "删除（停用）",
+			removeConfirm: "删除 = 追加 `set disabled: true` 操作（patch 词汇表没有 remove）。行保留在文件中，可随时重新启用。",
+			editorTitleAdd: "添加 MCP 服务器",
+			editorTitleEdit: "编辑 {name}",
+			fieldServerName: "serverName（命名空间）",
+			fieldTransport: "transport",
+			fieldCommand: "command",
+			fieldArgs: "args（每行一个参数）",
+			fieldCwd: "cwd（可选）",
+			fieldUrl: "url",
+			fieldTimeout: "toolCallTimeoutMs（每次调用超时）",
+			fieldFailFast: "failOnStartupError（启动失败即挂载失败）",
+			fieldReconnectEnabled: "自动重连",
+			fieldReconnectMaxAttempts: "reconnect.maxAttempts",
+			fieldEnv: "env（环境变量）",
+			fieldHeaders: "headers（请求头）",
+			keyColumn: "键",
+			valueColumn: "值",
+			unchanged: "（未改动 = 保留原值）",
+			addRow: "添加一行",
+			removeRow: "删除",
+			save: "保存",
+			cancel: "取消",
+			previewPatch: "生成 patch 片段",
+			copyPatch: "复制片段",
+			patchCopied: "已复制到剪贴板。",
+			copyFailed: "复制失败（剪贴板不可用）：{message}",
+			patchFor: "将追加到 {file}：",
+			patchFileUnknown: "无法确定 profile patch 文件路径（无 baseUrl）——只能复制片段。",
+			writeToProfile: "写入 profile",
+			confirmWrite: "确认写入",
+			writeRequiresConfirm: "写入需要确认：请核对上面的片段，然后点击\"确认写入\"。",
+			writeDone: "已写入 {file}（备份：{backup}）。web 面板热重载 cordis.patch.yml；其他面板重启生效。",
+			writeFailed: "写入失败：{message}",
+			writeDisabled: "写入已被禁用（config.writeEnabled: false）——只能复制片段。",
+			approvalHarness: "审批通道：ctx.approval",
+			approvalInteractive: "审批通道：界面确认",
+			trial: "工具试用台",
+			trialHint: "通过官方工具管线调用（权限与审批生效）；结果只显示在本页，不会进入模型上下文。",
+			trialServer: "服务器",
+			trialTool: "工具",
+			trialArgs: "参数（JSON）",
+			trialRun: "调用",
+			trialRunning: "调用中…",
+			trialResult: "结果（规范 JSON 与 render）",
+			trialDuration: "耗时 {ms} ms",
+			trialTruncated: "结果超过显示上限，已截断。",
+			trialApprovalNote: "审批类调用需要当前会话处于开启轮次；否则 fail-closed 拒绝。",
+			trialDisabled: "试用台已被禁用（config.trialEnabled: false）。",
+			trialNoTools: "该服务器没有已注册工具——服务器可能未连接或同步失败。",
+			trialArgsInvalid: "参数必须是合法 JSON。",
+			capabilities: "能力一览",
+			capResources: "Resources",
+			capPrompts: "Prompts",
+			capPending: "待官方支持——官方 client 尚未桥接该能力（Tools 是当前唯一桥接的 MCP 能力）。"
 		};
 		/** English dictionary checked against the Chinese key set. */
 		const en = {
@@ -606,7 +1427,7 @@ window.__ModuleLoader__.load({
 			lastEvent: "Last event",
 			filterTools: "Filter tools",
 			ms: "ms",
-			derivedNote: "Connection status and reconnect counts come from the proposed upstream mcp/status seam (docs/upstream-proposal.md); no upstream data was observed, so connection fields read \"unknown\" and the rest are config and tool-registry facts.",
+			derivedNote: "Connection status and reconnect counts come from the upstream mcp/status seam; without observed upstream data, connection fields read \"unknown\" and the rest are config and tool-registry facts.",
 			probes: "Connectivity probes",
 			probeEmpty: "No probes yet. Start one with the mcp_probe tool.",
 			probeRunning: "Running",
@@ -619,7 +1440,85 @@ window.__ModuleLoader__.load({
 			probeReachable: "Reachable",
 			probeUnreachable: "Unreachable",
 			probeFailedAction: "Probe failed",
-			patchHint: "Enable/disable is a patch suggestion only (/mcp <server> disable|enable); apply it by hand to"
+			patchHint: "This console writes the profile patch layer by APPENDING operations (existing content is never rewritten), and backs up the file before every write.",
+			health: "Health diagnostics",
+			healthSuggestions: "Self-heal suggestions",
+			healthNone: "No known failure pattern detected from the observable facts.",
+			healthPending: "Exit code / stderr tail: pending upstream support (the official client does not expose process diagnostics yet).",
+			exitCode: "Exit code",
+			stderrTail: "stderr tail",
+			diag_commandNotFound: "The configured command was not found — install the package or fix the executable path.",
+			diag_commandSpawnFailed: "The server process failed to start or exited — check the command line, its arguments, and the server's own logs.",
+			diag_connectionRefused: "The server refused the connection — start the server or check the host/port in the URL.",
+			diag_connectionDropped: "The connection dropped mid-session — the server may have crashed or restarted.",
+			diag_timeout: "A request timed out — the server may be overloaded, or the URL may be wrong. Check toolCallTimeoutMs if calls are slow.",
+			diag_dns: "The server hostname did not resolve — check the DNS name in the URL and the network.",
+			diag_auth401: "The server rejected the credentials (HTTP 401) — check the Authorization header or token.",
+			diag_auth403: "The server denied access (HTTP 403) — the credential is valid but lacks permission.",
+			diag_path404: "The endpoint path returned 404 — check the URL path (e.g. /mcp).",
+			diag_rateLimit: "The server rate-limited the client — wait, or reduce the reconnect/request rate.",
+			diag_permission: "A permission error occurred — check file permissions, PATH access, and whether the command is executable.",
+			diag_reconnectExhausted: "The reconnect budget is exhausted and the client has given up — fix the root cause, then reload the row (the web surface hot-reloads cordis.patch.yml edits) or restart.",
+			diag_reconnectWaiting: "The client is waiting in reconnect backoff — it will retry automatically; fix the root cause to stop the cycle.",
+			diag_entryFailed: "The cordis row failed to mount — read the loader diagnostics, then fix the row and reload.",
+			diagCodeFallback: "Suggestion",
+			addServer: "Add server",
+			editServer: "Edit",
+			removeServer: "Remove (disable)",
+			removeConfirm: "Removal = appending a `set disabled: true` operation (the patch vocabulary has no remove). The row stays in the file and can be re-enabled anytime.",
+			editorTitleAdd: "Add MCP server",
+			editorTitleEdit: "Edit {name}",
+			fieldServerName: "serverName (namespace)",
+			fieldTransport: "transport",
+			fieldCommand: "command",
+			fieldArgs: "args (one argument per line)",
+			fieldCwd: "cwd (optional)",
+			fieldUrl: "url",
+			fieldTimeout: "toolCallTimeoutMs (per-call timeout)",
+			fieldFailFast: "failOnStartupError (fail the mount on startup errors)",
+			fieldReconnectEnabled: "Auto reconnect",
+			fieldReconnectMaxAttempts: "reconnect.maxAttempts",
+			fieldEnv: "env (environment variables)",
+			fieldHeaders: "headers (request headers)",
+			keyColumn: "Key",
+			valueColumn: "Value",
+			unchanged: "(unchanged = keep the original value)",
+			addRow: "Add a row",
+			removeRow: "Remove",
+			save: "Save",
+			cancel: "Cancel",
+			previewPatch: "Generate patch fragment",
+			copyPatch: "Copy fragment",
+			patchCopied: "Copied to the clipboard.",
+			copyFailed: "Copy failed (clipboard unavailable): {message}",
+			patchFor: "Will be appended to {file}:",
+			patchFileUnknown: "The profile patch path is unknown (no baseUrl) — the fragment can only be copied.",
+			writeToProfile: "Write to profile",
+			confirmWrite: "Confirm write",
+			writeRequiresConfirm: "Writing needs confirmation: review the fragment above, then press \"Confirm write\".",
+			writeDone: "Written to {file} (backup: {backup}). The web surface hot-reloads cordis.patch.yml edits; other surfaces restart.",
+			writeFailed: "Write failed: {message}",
+			writeDisabled: "Writes are disabled (config.writeEnabled: false) — the fragment can only be copied.",
+			approvalHarness: "Approval channel: ctx.approval",
+			approvalInteractive: "Approval channel: interactive confirmation",
+			trial: "Tool trial console",
+			trialHint: "Calls run through the official tool pipeline (permission policy and approval stay in force); results are shown only here and never enter model context.",
+			trialServer: "Server",
+			trialTool: "Tool",
+			trialArgs: "Arguments (JSON)",
+			trialRun: "Call",
+			trialRunning: "Calling…",
+			trialResult: "Result (canonical JSON and render)",
+			trialDuration: "{ms} ms",
+			trialTruncated: "The result exceeded the display cap and was truncated.",
+			trialApprovalNote: "Approval-style calls need the current session to be inside an open turn; otherwise they fail closed.",
+			trialDisabled: "The trial console is disabled (config.trialEnabled: false).",
+			trialNoTools: "This server has no registered tools — it may be disconnected or its sync failed.",
+			trialArgsInvalid: "Arguments must be valid JSON.",
+			capabilities: "Capabilities",
+			capResources: "Resources",
+			capPrompts: "Prompts",
+			capPending: "Pending upstream support — the official client does not bridge this capability yet (tools are the only bridged MCP capability today)."
 		};
 		//#endregion
 		//#region node_modules/.pnpm/zod@4.4.3/node_modules/zod/v4/core/core.js
@@ -4714,12 +5613,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		//#endregion
 		//#region src/wire.ts
 		/**
-		* The panel's wire vocabulary: the snapshot types served over the `mcpPanel`
-		* Remote namespace, their zod v4 validation schema (the strict codec both
-		* Typert faces carry), and the single invocation descriptor shared by the
-		* host `./typert` manifest and the client Remote contribution. One canonical
-		* source for both faces keeps the host and client codecs from ever drifting
-		* apart.
+		* The console's wire vocabulary: the snapshot types served over the
+		* `mcpPanel` Remote namespace, their zod v4 validation schema (the strict
+		* codec both Typert faces carry), and the invocation descriptors shared
+		* verbatim by the host `./typert` manifest (`src/typert.host.ts`) and the
+		* client Remote contribution (`src/client/remote.ts`). One canonical source
+		* for both faces keeps the host and client codecs from ever drifting apart.
+		*
+		* Values that could be large or heterogeneous (trial results) cross the wire
+		* as single bounded JSON strings; every scalar here has an explicit shape.
 		*
 		* @module dsh-mcp-panel/wire
 		*/
@@ -4773,7 +5675,31 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					_null()
 				]),
 				probeCheckedAt: number().int().nullable(),
-				statusSource: union([literal("upstream-event"), literal("derived")])
+				statusSource: union([literal("upstream-event"), literal("derived")]),
+				config: object({
+					serverName: string(),
+					transport: union([
+						literal("stdio"),
+						literal("streamable-http"),
+						literal("unknown")
+					]),
+					command: string().nullable(),
+					args: array(string()),
+					cwd: string().nullable(),
+					url: string().nullable(),
+					envKeys: array(string()),
+					headerKeys: array(string()),
+					toolCallTimeoutMs: number().int().nullable(),
+					failOnStartupError: boolean().nullable(),
+					reconnectEnabled: boolean().nullable(),
+					reconnectMaxAttempts: number().int().nullable()
+				}).nullable(),
+				diagnostics: array(object({
+					code: string(),
+					text: string()
+				})),
+				exitCode: number().int().nullable(),
+				stderrTail: string().nullable()
 			})),
 			probes: array(object({
 				id: string(),
@@ -4789,7 +5715,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				startedAt: number().int(),
 				finishedAt: number().int().nullable(),
 				detail: string().nullable()
-			}))
+			})),
+			capabilities: object({
+				resources: object({ available: boolean() }),
+				prompts: object({ available: boolean() })
+			}),
+			trial: object({
+				enabled: boolean(),
+				timeoutMs: number().int(),
+				maxResultChars: number().int()
+			}),
+			writeEnabled: boolean()
 		});
 		/**
 		* The `mcpPanel/status` invocation descriptor, shared verbatim by the host
@@ -4852,12 +5788,158 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				column: 1
 			})
 		});
+		/** Strict wire schema for {@link PatchPreview}. */
+		const PATCH_PREVIEW_SCHEMA = object({
+			fragment: string(),
+			file: string().nullable(),
+			ops: number().int()
+		});
+		/** The `mcpPanel/previewPatch` invocation descriptor: render one CRUD op. */
+		const MCP_PANEL_PREVIEW_DESCRIPTOR = Object.freeze({
+			id: "dsh-mcp-panel#mcpPanel/previewPatch",
+			service: "mcpPanel",
+			namespace: "mcpPanel",
+			method: "previewPatch",
+			invocation: Object.freeze({ kind: "direct" }),
+			parameters: Object.freeze([Object.freeze({
+				name: "opJson",
+				wire: "opJson",
+				source: "json",
+				codec: Object.freeze({
+					mode: "strict",
+					typeSymbol: "dsh-mcp-panel/types#PatchOpJson",
+					schema: string()
+				})
+			})]),
+			result: Object.freeze({
+				mode: "strict",
+				typeSymbol: "dsh-mcp-panel/types#PatchPreview",
+				schema: PATCH_PREVIEW_SCHEMA
+			}),
+			sourceLocation: Object.freeze({
+				file: "src/wire.ts",
+				line: 1,
+				column: 1
+			})
+		});
+		/** Strict wire schema for {@link PatchWriteResult}. */
+		const PATCH_WRITE_RESULT_SCHEMA = object({
+			file: string(),
+			backupPath: string(),
+			approvalPath: union([literal("harness-approval"), literal("interactive-confirmation")]),
+			bytes: number().int(),
+			ops: number().int(),
+			note: string()
+		});
+		/** The `mcpPanel/writePatch` invocation descriptor: approval-gated append. */
+		const MCP_PANEL_WRITE_DESCRIPTOR = Object.freeze({
+			id: "dsh-mcp-panel#mcpPanel/writePatch",
+			service: "mcpPanel",
+			namespace: "mcpPanel",
+			method: "writePatch",
+			invocation: Object.freeze({ kind: "direct" }),
+			parameters: Object.freeze([
+				Object.freeze({
+					name: "opJson",
+					wire: "opJson",
+					source: "json",
+					codec: Object.freeze({
+						mode: "strict",
+						typeSymbol: "dsh-mcp-panel/types#PatchOpJson",
+						schema: string()
+					})
+				}),
+				Object.freeze({
+					name: "confirmed",
+					wire: "confirmed",
+					source: "json",
+					codec: Object.freeze({
+						mode: "strict",
+						typeSymbol: "dsh-mcp-panel/types#PatchWriteConfirmed",
+						schema: boolean()
+					})
+				}),
+				Object.freeze({
+					name: "sessionId",
+					wire: "sessionId",
+					source: "json",
+					codec: Object.freeze({
+						mode: "strict",
+						typeSymbol: "dsh-mcp-panel/types#PatchWriteSessionId",
+						schema: string()
+					}),
+					acceptsUndefined: true
+				})
+			]),
+			result: Object.freeze({
+				mode: "strict",
+				typeSymbol: "dsh-mcp-panel/types#PatchWriteResult",
+				schema: PATCH_WRITE_RESULT_SCHEMA
+			}),
+			sourceLocation: Object.freeze({
+				file: "src/wire.ts",
+				line: 1,
+				column: 1
+			})
+		});
+		/** Strict wire schema for {@link McpTrialResultWire}. */
+		const MCP_TRIAL_RESULT_SCHEMA = object({
+			callId: string(),
+			isError: boolean(),
+			truncated: boolean(),
+			durationMs: number().int(),
+			resultJson: string()
+		});
+		/** The `mcpPanel/callTool` invocation descriptor: official-pipeline trial call. */
+		const MCP_PANEL_CALLTOOL_DESCRIPTOR = Object.freeze({
+			id: "dsh-mcp-panel#mcpPanel/callTool",
+			service: "mcpPanel",
+			namespace: "mcpPanel",
+			method: "callTool",
+			invocation: Object.freeze({ kind: "direct" }),
+			parameters: Object.freeze([Object.freeze({
+				name: "requestJson",
+				wire: "requestJson",
+				source: "json",
+				codec: Object.freeze({
+					mode: "strict",
+					typeSymbol: "dsh-mcp-panel/types#TrialRequestJson",
+					schema: string()
+				})
+			}), Object.freeze({
+				name: "sessionId",
+				wire: "sessionId",
+				source: "json",
+				codec: Object.freeze({
+					mode: "strict",
+					typeSymbol: "dsh-mcp-panel/types#TrialSessionId",
+					schema: string()
+				}),
+				acceptsUndefined: true
+			})]),
+			result: Object.freeze({
+				mode: "strict",
+				typeSymbol: "dsh-mcp-panel/types#McpTrialResultWire",
+				schema: MCP_TRIAL_RESULT_SCHEMA
+			}),
+			sourceLocation: Object.freeze({
+				file: "src/wire.ts",
+				line: 1,
+				column: 1
+			})
+		});
 		/**
 		* The canonical invocation list both Typert faces register — the host
 		* manifest and the client contribution share these exact descriptor objects,
 		* so the two wire codecs can never drift apart.
 		*/
-		const MCP_PANEL_INVOCATIONS = Object.freeze([MCP_PANEL_STATUS_DESCRIPTOR, MCP_PANEL_PROBE_DESCRIPTOR]);
+		const MCP_PANEL_INVOCATIONS = Object.freeze([
+			MCP_PANEL_STATUS_DESCRIPTOR,
+			MCP_PANEL_PROBE_DESCRIPTOR,
+			MCP_PANEL_PREVIEW_DESCRIPTOR,
+			MCP_PANEL_WRITE_DESCRIPTOR,
+			MCP_PANEL_CALLTOOL_DESCRIPTOR
+		]);
 		//#endregion
 		//#region src/client/remote.ts
 		/** The client Remote contribution for the `mcpPanel` namespace. */
@@ -5132,6 +6214,207 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   border-radius: 50%;
   background: currentColor;
 }
+[data-dsh-mcp-panel] .dmcp-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  padding: 12px;
+}
+[data-dsh-mcp-panel] .dmcp-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+[data-dsh-mcp-panel] .dmcp-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 0.9em;
+  color: var(--dsw-alias-label-secondary);
+}
+[data-dsh-mcp-panel] .dmcp-field input,
+[data-dsh-mcp-panel] .dmcp-field select,
+[data-dsh-mcp-panel] .dmcp-field textarea {
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+[data-dsh-mcp-panel] .dmcp-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9em;
+  color: var(--dsw-alias-label-secondary);
+}
+[data-dsh-mcp-panel] .dmcp-map {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+}
+[data-dsh-mcp-panel] .dmcp-map legend {
+  font-size: 0.9em;
+  color: var(--dsw-alias-label-secondary);
+  padding: 0 4px;
+}
+[data-dsh-mcp-panel] .dmcp-map-row {
+  display: flex;
+  gap: 6px;
+}
+[data-dsh-mcp-panel] .dmcp-map-row input {
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 4px;
+  padding: 4px 8px;
+  min-width: 0;
+}
+[data-dsh-mcp-panel] .dmcp-map-key {
+  flex: 1 1 40%;
+}
+[data-dsh-mcp-panel] .dmcp-map-value {
+  flex: 2 1 60%;
+}
+[data-dsh-mcp-panel] .dmcp-editor-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+[data-dsh-mcp-panel] .dmcp-action:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+[data-dsh-mcp-panel] .dmcp-danger {
+  color: var(--dsw-alias-state-error-primary);
+  border-color: currentColor;
+}
+[data-dsh-mcp-panel] .dmcp-confirm {
+  color: var(--dsw-alias-state-warn-primary);
+  border-color: currentColor;
+}
+[data-dsh-mcp-panel] .dmcp-patch {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+[data-dsh-mcp-panel] .dmcp-fragment {
+  margin: 0;
+  padding: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  overflow: auto;
+  max-height: 240px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--dsw-alias-font-mono, monospace);
+  font-size: 0.85em;
+}
+[data-dsh-mcp-panel] .dmcp-notice {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+[data-dsh-mcp-panel] .dmcp-warn-text {
+  color: var(--dsw-alias-state-warn-primary);
+}
+[data-dsh-mcp-panel] .dmcp-health {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+[data-dsh-mcp-panel] .dmcp-health-title {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+}
+[data-dsh-mcp-panel] .dmcp-health-list {
+  list-style: disc;
+  margin: 0;
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: var(--dsw-alias-label-primary);
+}
+[data-dsh-mcp-panel] .dmcp-diag-code {
+  color: var(--dsw-alias-label-tertiary);
+}
+[data-dsh-mcp-panel] .dmcp-remove {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--dsw-alias-state-error-primary);
+  border-radius: 4px;
+  padding: 8px;
+}
+[data-dsh-mcp-panel] .dmcp-trial {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  padding-top: 12px;
+}
+[data-dsh-mcp-panel] .dmcp-trial-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+[data-dsh-mcp-panel] .dmcp-trial-row .dmcp-field {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+[data-dsh-mcp-panel] .dmcp-trial-result {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+[data-dsh-mcp-panel] .dmcp-trial-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+}
+[data-dsh-mcp-panel] .dmcp-trial-call {
+  color: var(--dsw-alias-label-tertiary);
+  font-family: var(--dsw-alias-font-mono, monospace);
+  font-size: 0.85em;
+}
+[data-dsh-mcp-panel] .dmcp-trial-json {
+  max-height: 320px;
+}
+[data-dsh-mcp-panel] .dmcp-capabilities {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+[data-dsh-mcp-panel] .dmcp-capabilities-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+[data-dsh-mcp-panel] .dmcp-capabilities-list li {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 `;
 		//#endregion
 		//#region src/client/index.ts
@@ -5139,11 +6422,12 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		const NS = "settings.mcpPanel";
 		/** Plugin name: matches the package name, the graph row id, and the bundle id. */
 		const name = "dsh-mcp-panel";
-		/** Services the tab reads; `remote.mcpPanel` appears once this plugin mounts its contribution. */
+		/** Services the console reads; `remote.mcpPanel` appears once this plugin mounts its contribution. */
 		const inject = [
 			"slots",
 			"locale",
-			"remote"
+			"remote",
+			"sessions"
 		];
 		/**
 		* Browser plugin body: dictionaries, the scoped stylesheet, the Remote
@@ -5160,16 +6444,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			await ctx.remote.$mount(MCP_PANEL_REMOTE);
 			ctx.inject(["remote.mcpPanel"], (scope) => {
 				const t = scope.locale.bind(NS);
-				const status = async () => {
-					const result = await scope.remote.mcpPanel.status();
-					if (!result.ok) throw new Error(`mcpPanel.status failed: ${result.error.code}: ${result.error.message}`);
-					return result.value;
-				};
-				const probe = async (serverName) => {
-					const result = await scope.remote.mcpPanel.probe(serverName);
-					if (!result.ok) throw new Error(`mcpPanel.probe failed: ${result.error.code}: ${result.error.message}`);
+				const unwrap = (result, method) => {
+					if (!result.ok) throw new Error(`mcpPanel.${method} failed: ${result.error.code}: ${result.error.message}`);
 					return result.value;
 				};
+				const status = async () => unwrap(await scope.remote.mcpPanel.status(), "status");
+				const probe = async (serverName) => unwrap(await scope.remote.mcpPanel.probe(serverName), "probe");
+				const previewPatch = async (opJson) => unwrap(await scope.remote.mcpPanel.previewPatch(opJson), "previewPatch");
+				const writePatch = async (opJson, confirmed) => unwrap(await scope.remote.mcpPanel.writePatch(opJson, confirmed, currentSessionId(scope.get("sessions"))), "writePatch");
+				const callTool = async (requestJson) => unwrap(await scope.remote.mcpPanel.callTool(requestJson, currentSessionId(scope.get("sessions"))), "callTool");
 				scope.slots.inject("settings.plugins.tab", () => scope.slots.register({
 					name: "settings.plugins.tab",
 					id: "mcp",
@@ -5178,11 +6461,30 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					locale: NS,
 					inject: () => ({
 						status,
-						probe
+						probe,
+						previewPatch,
+						writePatch,
+						callTool
 					})
 				}, McpPanelTab));
 			});
 		}
+		/**
+		* Read the current session id from the sessions store face (structural:
+		* the store shape differs across harness lines, so only the leaf is read).
+		*/
+		function currentSessionId(sessions) {
+			try {
+				const list = sessions?.list;
+				if (typeof list !== "object" || list === null) return void 0;
+				const getSnapshot = list.getSnapshot;
+				if (typeof getSnapshot !== "function") return void 0;
+				const current = getSnapshot().current;
+				return typeof current === "string" ? current : void 0;
+			} catch {
+				return;
+			}
+		}
 		//#endregion
 		exports.NS = NS;
 		exports.apply = apply;