@lijian-ui/dsh-im-gateway 0.1.0

package/lib/client.js

@@ -0,0 +1,1233 @@
+window.__ModuleLoader__.load({
+	id: "@dsh/im-gateway",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		//#region src/client/ImChannelModal.ts
+		/**
+		* Add / edit IM channel modal (browser half).
+		*
+		* Ported from pi-desk-top/src/renderer/im/ImChannelModal.tsx, adapted to the
+		* multi-instance model: the bundle's `im-gateway` namespace holds
+		* `channels: ImChannelInstance[]`, and the SAME channel type may appear many
+		* times (multi-bot support). The modal either adds a brand-new instance
+		* (type picker + name + credentials; a unique `<type>-<rand>` id is minted)
+		* or edits an existing one (type locked, values prefilled).
+		*
+		* Saving hands the COMPLETE new channels array to the parent section via
+		* `onSave` (host `mergeLayers` replaces arrays wholesale, so the caller must
+		* write the full array — see docs/plugin-development.md §10).
+		*
+		* Browser-half constraints: no JSX (React.createElement), no CSS modules
+		* (inline styles), no lucide icons (inline SVG), platform modules only.
+		*/
+		/** Display label per channel type. */
+		const TYPE_LABELS = {
+			dingtalk: "钉钉",
+			qq: "QQ",
+			weixin: "个人微信"
+		};
+		/** Display order of the type groups on the page. */
+		const TYPE_ORDER = [
+			"dingtalk",
+			"qq",
+			"weixin"
+		];
+		/**
+		* Credential fields per channel type. qq / weixin are QR-scan bound: their
+		* fields are HIDDEN from the form (the QR flow fills them), but the keys are
+		* still needed to initialize/save values. dingtalk stays a manual form.
+		*/
+		const TYPE_FIELDS = {
+			dingtalk: [{
+				key: "clientId",
+				label: "AppKey (clientId)"
+			}, {
+				key: "clientSecret",
+				label: "AppSecret (clientSecret)",
+				secret: true
+			}],
+			qq: [],
+			weixin: []
+		};
+		/** Every credential key per type — used to init/persist QR-hidden values. */
+		const TYPE_CREDENTIAL_KEYS = {
+			dingtalk: ["clientId", "clientSecret"],
+			qq: [
+				"appId",
+				"clientSecret",
+				"botAppId"
+			],
+			weixin: [
+				"token",
+				"botId",
+				"baseUrl",
+				"cdnBaseUrl"
+			]
+		};
+		const overlay = {
+			position: "fixed",
+			inset: 0,
+			zIndex: 300,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: "rgba(0, 0, 0, 0.5)",
+			padding: 24
+		};
+		const modal = {
+			display: "flex",
+			flexDirection: "column",
+			width: 520,
+			maxWidth: "100%",
+			maxHeight: "90vh",
+			background: "var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1, #fff))",
+			border: "1px solid var(--dsw-alias-border-l2, #ddd)",
+			borderRadius: 14,
+			overflow: "hidden",
+			boxShadow: "0 20px 48px rgba(0,0,0,0.36), 0 4px 12px rgba(0,0,0,0.2)"
+		};
+		const modalHeader = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			padding: "14px 18px",
+			borderBottom: "1px solid var(--dsw-alias-border-l1, #eee)",
+			flexShrink: 0
+		};
+		const modalTitle = {
+			flex: 1,
+			fontSize: 16,
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary, inherit)",
+			margin: 0
+		};
+		const closeBtn = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 28,
+			height: 28,
+			border: "none",
+			background: "transparent",
+			color: "var(--dsw-alias-label-tertiary, #888)",
+			cursor: "pointer",
+			borderRadius: 6,
+			fontSize: 16,
+			lineHeight: 1
+		};
+		const modalBody = {
+			flex: 1,
+			overflowY: "auto",
+			padding: "18px 18px 14px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 14
+		};
+		const field = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6
+		};
+		const fieldLabel = {
+			fontSize: 12,
+			color: "var(--dsw-alias-label-secondary, #555)",
+			fontWeight: 500
+		};
+		const required = {
+			color: "var(--dsw-alias-state-error-primary, #e24b4a)",
+			marginLeft: 2
+		};
+		const input = {
+			height: 40,
+			padding: "0 12px",
+			background: "var(--dsw-alias-bg-layer-1, transparent)",
+			border: "1px solid var(--dsw-alias-border-l2, #ccc)",
+			borderRadius: 8,
+			color: "var(--dsw-alias-label-primary, inherit)",
+			fontSize: 13,
+			outline: "none",
+			boxSizing: "border-box"
+		};
+		const selectInput = {
+			...input,
+			cursor: "pointer"
+		};
+		const errorStyle$1 = {
+			fontSize: 12,
+			color: "var(--dsw-alias-state-error-primary, #e24b4a)",
+			padding: "8px 12px",
+			background: "rgba(226, 75, 74, 0.08)",
+			borderRadius: 6
+		};
+		const footer = {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			gap: 8,
+			padding: "14px 18px",
+			borderTop: "1px solid var(--dsw-alias-border-l1, #eee)",
+			flexShrink: 0
+		};
+		const btnGhost = {
+			height: 36,
+			padding: "0 16px",
+			background: "transparent",
+			color: "var(--dsw-alias-label-secondary, #555)",
+			border: "1px solid var(--dsw-alias-border-l2, #ccc)",
+			borderRadius: 8,
+			cursor: "pointer",
+			fontSize: 13
+		};
+		const btnPrimary = {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 6,
+			height: 36,
+			padding: "0 18px",
+			background: "var(--dsw-alias-state-business-primary, #185FA5)",
+			color: "#fff",
+			border: "none",
+			borderRadius: 8,
+			cursor: "pointer",
+			fontSize: 13,
+			fontWeight: 500
+		};
+		const qrBox = {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 10,
+			padding: "16px",
+			background: "var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.02))",
+			border: "1px dashed var(--dsw-alias-border-l3, #ccc)",
+			borderRadius: 10
+		};
+		const qrImg = {
+			width: 200,
+			height: 200,
+			borderRadius: 8,
+			objectFit: "contain",
+			background: "#fff"
+		};
+		const qrHint = {
+			margin: 0,
+			fontSize: 12,
+			color: "var(--dsw-alias-label-secondary, #555)",
+			textAlign: "center",
+			lineHeight: 1.5,
+			wordBreak: "break-all"
+		};
+		const qrRow = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			width: "100%",
+			justifyContent: "center"
+		};
+		const qrLink = {
+			fontSize: 12,
+			color: "var(--dsw-alias-state-business-primary, #185FA5)",
+			textDecoration: "none",
+			cursor: "pointer",
+			maxWidth: "100%",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
+		/** Mint a unique instance id: `<type>-<rand>` (never contains ':'). */
+		function mintInstanceId(type, existing) {
+			for (let i = 0; i < 50; i++) {
+				const id = `${type}-${Math.random().toString(36).slice(2, 6)}`;
+				if (!existing.some((inst) => inst.id === id)) return id;
+			}
+			return `${type}-${Date.now().toString(36)}`;
+		}
+		/**
+		* The add/edit channel modal.
+		* @param props - edit target, current instances, close/save actions.
+		*/
+		function ImChannelModal(props) {
+			const { editId, instances, configApi, onClose, onSave } = props;
+			const editing = editId !== void 0 ? instances.find((inst) => inst.id === editId) : void 0;
+			const initialType = editing?.type ?? "dingtalk";
+			const [type, setType] = (0, react.useState)(initialType);
+			const [name, setName] = (0, react.useState)(editing?.name ?? "");
+			const [values, setValues] = (0, react.useState)(() => {
+				const pre = editing?.config ?? {};
+				const out = {};
+				for (const key of TYPE_CREDENTIAL_KEYS[initialType] ?? []) {
+					const v = pre[key];
+					if (typeof v === "string" || typeof v === "number") out[key] = String(v);
+					else out[key] = "";
+				}
+				return out;
+			});
+			const [saving, setSaving] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)("");
+			const [qr, setQr] = (0, react.useState)(null);
+			const [qrPolling, setQrPolling] = (0, react.useState)(false);
+			const [verifyCode, setVerifyCode] = (0, react.useState)("");
+			const pollTimer = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				if (!qrPolling || !qr?.loginId || !configApi) return;
+				const loginId = qr.loginId;
+				const tick = async () => {
+					const res = await configApi.getQrLoginStatus(loginId);
+					if (!res.ok || !res.status) return;
+					setQr(res.status);
+					const s = res.status.status;
+					if (s === "confirmed" || s === "error" || s === "canceled" || s === "expired") setQrPolling(false);
+				};
+				tick();
+				pollTimer.current = setInterval(() => void tick(), 1500);
+				return () => {
+					if (pollTimer.current) clearInterval(pollTimer.current);
+					pollTimer.current = null;
+				};
+			}, [
+				qrPolling,
+				qr?.loginId,
+				configApi
+			]);
+			(0, react.useEffect)(() => {
+				if (!qr || qr.status !== "confirmed" || !qr.credentials) return;
+				setValues((prev) => {
+					const next = { ...prev };
+					if (type === "qq" && qr.credentials) {
+						if (qr.credentials.appId) next.appId = qr.credentials.appId;
+						if (qr.credentials.appSecret) next.clientSecret = qr.credentials.appSecret;
+					}
+					if (type === "weixin" && qr.credentials) {
+						if (qr.credentials.token) next.token = qr.credentials.token;
+						if (qr.credentials.botId) next.botId = qr.credentials.botId;
+						if (qr.credentials.baseUrl) next.baseUrl = qr.credentials.baseUrl;
+					}
+					return next;
+				});
+			}, [qr, type]);
+			const handleStartQrLogin = async () => {
+				if (!configApi) return;
+				setError("");
+				setVerifyCode("");
+				const res = await configApi.startQrLogin(type);
+				if (!res.ok || !res.status) {
+					setError(res.message ?? "扫码登录启动失败");
+					return;
+				}
+				setQr(res.status);
+				setQrPolling(true);
+			};
+			const handleSubmitVerifyCode = async () => {
+				if (!qr?.loginId || !verifyCode.trim() || !configApi) return;
+				await configApi.submitQrVerifyCode(qr.loginId, verifyCode.trim());
+				setVerifyCode("");
+			};
+			const handleCancelQrLogin = async () => {
+				if (!qr?.loginId || !configApi) return;
+				await configApi.cancelQrLogin(qr.loginId);
+				setQr(null);
+				setQrPolling(false);
+			};
+			const fields = TYPE_FIELDS[type] ?? [];
+			const credentialKeys = TYPE_CREDENTIAL_KEYS[type] ?? [];
+			const hasCredentials = (0, react.useMemo)(() => {
+				if (type === "qq") return (values["appId"] ?? "").trim() !== "" && (values["clientSecret"] ?? "").trim() !== "";
+				if (type === "weixin") return (values["token"] ?? "").trim() !== "" && (values["botId"] ?? "").trim() !== "";
+				return false;
+			}, [values, type]);
+			const canSave = (0, react.useMemo)(() => {
+				if (type === "qq") return (values["appId"] ?? "").trim() !== "" && (values["clientSecret"] ?? "").trim() !== "";
+				if (type === "weixin") return (values["token"] ?? "").trim() !== "" && (values["botId"] ?? "").trim() !== "";
+				return fields.filter((f) => !f.secret).map((f) => f.key).every((k) => (values[k] ?? "").trim() !== "");
+			}, [
+				fields,
+				values,
+				type
+			]);
+			const handleTypeChange = (next) => {
+				setType(next);
+				const out = {};
+				for (const key of TYPE_CREDENTIAL_KEYS[next] ?? []) out[key] = "";
+				setValues(out);
+				setError("");
+				setQr(null);
+				setQrPolling(false);
+				setVerifyCode("");
+			};
+			const handleEdit = (key, text) => {
+				setValues((prev) => ({
+					...prev,
+					[key]: text
+				}));
+				setError("");
+			};
+			const handleSave = async () => {
+				if (!canSave || !type) return;
+				setSaving(true);
+				setError("");
+				const config = {};
+				for (const key of credentialKeys) {
+					const raw = (values[key] ?? "").trim();
+					if ((TYPE_FIELDS[type]?.find((f) => f.key === key))?.type === "number") config[key] = raw === "" ? "" : Number(raw);
+					else config[key] = raw;
+				}
+				const next = instances.map((inst) => ({ ...inst }));
+				let instanceId;
+				if (editing) {
+					instanceId = editing.id;
+					const target = next.find((inst) => inst.id === instanceId);
+					if (target) {
+						target.name = name;
+						target.config = config;
+					}
+				} else {
+					instanceId = mintInstanceId(type, instances);
+					next.push({
+						id: instanceId,
+						type,
+						name,
+						enabled: true,
+						config
+					});
+				}
+				try {
+					await onSave({
+						channels: next,
+						instanceId
+					});
+					onClose();
+				} catch (err) {
+					setError(err instanceof Error ? err.message : String(err));
+				} finally {
+					setSaving(false);
+				}
+			};
+			const typeOptions = Object.keys(TYPE_LABELS).filter((k) => editId === void 0 || k === editing?.type);
+			return (0, react.createElement)("div", {
+				style: overlay,
+				onMouseDown: (e) => {
+					if (e.target === e.currentTarget) onClose();
+				}
+			}, (0, react.createElement)("div", {
+				style: modal,
+				onClick: (e) => e.stopPropagation()
+			}, (0, react.createElement)("div", { style: modalHeader }, (0, react.createElement)("h3", { style: modalTitle }, editId ? `编辑通道 · ${TYPE_LABELS[editing?.type ?? ""] ?? ""}` : "添加通道"), (0, react.createElement)("button", {
+				style: closeBtn,
+				onClick: onClose,
+				title: "关闭",
+				"aria-label": "关闭"
+			}, (0, react.createElement)("svg", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round"
+			}, (0, react.createElement)("path", { d: "M3 3l10 10M13 3L3 13" })))), (0, react.createElement)("div", { style: modalBody }, (0, react.createElement)("label", { style: field }, (0, react.createElement)("span", { style: fieldLabel }, "渠道类型", (0, react.createElement)("span", { style: required }, "*")), (0, react.createElement)("select", {
+				style: selectInput,
+				value: type,
+				disabled: editId !== void 0,
+				onChange: (e) => handleTypeChange(e.target.value)
+			}, typeOptions.map((ct) => (0, react.createElement)("option", {
+				key: ct,
+				value: ct
+			}, TYPE_LABELS[ct] ?? ct)))), (0, react.createElement)("label", { style: field }, (0, react.createElement)("span", { style: fieldLabel }, "通道名称"), (0, react.createElement)("input", {
+				style: input,
+				type: "text",
+				value: name,
+				placeholder: `如：${TYPE_LABELS[type] ?? type}主机器人`,
+				onChange: (e) => {
+					setName(e.target.value);
+					setError("");
+				}
+			})), fields.map((f) => (0, react.createElement)("label", {
+				key: f.key,
+				style: field
+			}, (0, react.createElement)("span", { style: fieldLabel }, f.label, f.secret ? null : (0, react.createElement)("span", { style: required }, "*")), (0, react.createElement)("input", {
+				style: input,
+				type: f.secret ? "password" : f.type === "number" ? "number" : "text",
+				value: values[f.key] ?? "",
+				placeholder: f.secret ? "••••••••" : "",
+				onChange: (e) => handleEdit(f.key, e.target.value)
+			}))), (type === "qq" || type === "weixin") && configApi ? (0, react.createElement)("div", { style: qrBox }, qr && qr.status === "confirmed" ? (0, react.createElement)("p", { style: qrHint }, "✅ 扫码登录成功，凭据已自动填入下方字段，点击「保存」生效。") : qr && qr.qrcodeUrl ? [
+				(0, react.createElement)("img", {
+					key: "img",
+					src: qr.qrcodeUrl,
+					style: qrImg,
+					alt: "登录二维码"
+				}),
+				(0, react.createElement)("p", {
+					key: "hint",
+					style: qrHint
+				}, qr.message || (type === "qq" ? "请用手机 QQ 扫码绑定机器人" : "请用手机微信扫码") + "；若图片无法显示，可点击下方链接扫码"),
+				(0, react.createElement)("div", {
+					key: "row",
+					style: qrRow
+				}, qr.qrcode ? (0, react.createElement)("a", {
+					style: qrLink,
+					href: qr.qrcode,
+					target: "_blank",
+					rel: "noreferrer"
+				}, qr.qrcode.slice(0, 60)) : null, (0, react.createElement)("button", {
+					style: btnGhost,
+					onClick: () => void handleCancelQrLogin()
+				}, "取消")),
+				qr.verifyCodeNeeded || qr.status === "need_verifycode" ? (0, react.createElement)("div", {
+					key: "verify",
+					style: {
+						...qrRow,
+						marginTop: 4
+					}
+				}, (0, react.createElement)("input", {
+					style: {
+						...input,
+						width: 140,
+						height: 32
+					},
+					type: "text",
+					value: verifyCode,
+					placeholder: "输入配对码",
+					onChange: (e) => setVerifyCode(e.target.value)
+				}), (0, react.createElement)("button", {
+					style: btnPrimary,
+					onClick: () => void handleSubmitVerifyCode(),
+					disabled: !verifyCode.trim()
+				}, "确认")) : null
+			] : [(0, react.createElement)("p", {
+				key: "hint",
+				style: qrHint
+			}, qr?.message || (hasCredentials ? type === "qq" ? "已绑定机器人凭据（AppID 已自动填入）。如需更换，重新扫码即可。" : "已绑定微信凭据。如需更换，重新扫码即可。" : type === "qq" ? "尚未配置机器人凭据？扫码绑定，免去在 QQ 开放平台手动创建" : "尚未绑定微信？扫码连接个人微信账号")), (0, react.createElement)("button", {
+				key: "start",
+				style: btnGhost,
+				onClick: () => void handleStartQrLogin(),
+				disabled: qrPolling
+			}, qrPolling ? "获取二维码中…" : `扫码登录（${TYPE_LABELS[type] ?? type}）`)]) : null, error ? (0, react.createElement)("div", { style: errorStyle$1 }, error) : null), (0, react.createElement)("div", { style: footer }, (0, react.createElement)("button", {
+				style: btnGhost,
+				onClick: onClose
+			}, "取消"), (0, react.createElement)("button", {
+				style: btnPrimary,
+				onClick: () => void handleSave(),
+				disabled: saving || !canSave
+			}, saving ? "保存中…" : "保存"))));
+		}
+		//#endregion
+		//#region src/client/ImChannelsSection.ts
+		/**
+		* IM Channels settings section (browser half).
+		*
+		* Renders the whole IM bundle config on one page: header with an "Add channel"
+		* button (top-right), channel instances GROUPED BY TYPE (钉钉 / QQ / 个人微信 —
+		* each type may have MULTIPLE bot instances), empty state, and the add/edit
+		* modal. Data lives in the `im-gateway` config as `channels: ImChannelInstance[]`
+		* and is read/written through the host config route (see config-api.ts) — the
+		* official `api.settings.*` refuses third-party namespaces.
+		*
+		* Browser-half constraints: no JSX (React.createElement), no CSS modules
+		* (inline styles), no lucide icons (inline SVG), platform modules only.
+		*/
+		const page = {
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0,
+			width: "100%"
+		};
+		const header = {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: "14px 0",
+			flexShrink: 0,
+			borderBottom: "1px solid var(--dsw-alias-border-l2, #eee)"
+		};
+		const titleRow = {
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			minWidth: 0
+		};
+		const title = {
+			fontSize: 17,
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary, inherit)",
+			margin: 0,
+			whiteSpace: "nowrap"
+		};
+		const countBadge = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: 22,
+			height: 22,
+			padding: "0 7px",
+			borderRadius: 999,
+			background: "var(--dsw-alias-bg-layer-3, #eee)",
+			color: "var(--dsw-alias-label-secondary, #555)",
+			fontSize: 11,
+			fontWeight: 500
+		};
+		const headerRight = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8
+		};
+		const addBtn = {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 6,
+			height: 32,
+			padding: "0 14px",
+			border: "none",
+			borderRadius: 8,
+			background: "var(--dsw-alias-state-business-primary, #185FA5)",
+			color: "#fff",
+			fontSize: 13,
+			fontWeight: 500,
+			cursor: "pointer"
+		};
+		const body = {
+			flex: 1,
+			overflowY: "auto",
+			padding: "16px 0 24px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 16,
+			maxWidth: 760,
+			width: "100%"
+		};
+		const errorStyle = {
+			fontSize: 12,
+			lineHeight: 1.5,
+			color: "var(--dsw-alias-state-error-primary, #e24b4a)",
+			padding: "10px 14px",
+			background: "rgba(226,75,74,0.08)",
+			border: "1px solid rgba(226,75,74,0.35)",
+			borderRadius: 8,
+			whiteSpace: "pre-wrap"
+		};
+		const empty = {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: 6,
+			padding: "32px 24px",
+			border: "1px dashed var(--dsw-alias-border-l3, #ccc)",
+			borderRadius: 10,
+			background: "var(--dsw-alias-bg-layer-1, transparent)",
+			textAlign: "center"
+		};
+		const emptyText = {
+			margin: 0,
+			fontSize: 13,
+			color: "var(--dsw-alias-label-secondary, #555)"
+		};
+		const groupHead = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8
+		};
+		const groupTitle = {
+			fontSize: 13,
+			fontWeight: 600,
+			color: "var(--dsw-alias-label-primary, inherit)",
+			margin: 0
+		};
+		const groupCount = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: 18,
+			height: 18,
+			padding: "0 6px",
+			borderRadius: 999,
+			background: "var(--dsw-alias-bg-layer-3, #eee)",
+			color: "var(--dsw-alias-label-tertiary, #888)",
+			fontSize: 10,
+			fontWeight: 500
+		};
+		const channelList = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 10
+		};
+		const channelCard = {
+			display: "flex",
+			alignItems: "center",
+			gap: 14,
+			padding: "14px 16px",
+			background: "var(--dsw-alias-bg-layer-2, transparent)",
+			border: "1px solid var(--dsw-alias-border-l2, #e0e0e0)",
+			borderRadius: 10
+		};
+		const channelIcon = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 32,
+			height: 32,
+			borderRadius: 8,
+			background: "var(--dsw-alias-bg-layer-3, #eee)",
+			color: "var(--dsw-alias-label-secondary, #555)",
+			flexShrink: 0
+		};
+		const channelInfo = {
+			flex: 1,
+			minWidth: 0,
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		};
+		const channelNameRow = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			minWidth: 0
+		};
+		const channelName = {
+			fontSize: 13,
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary, inherit)",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
+		const statusDot = {
+			width: 8,
+			height: 8,
+			borderRadius: "50%",
+			flexShrink: 0
+		};
+		/** Color for a channel runtime status dot. */
+		function statusColor(s) {
+			if (s?.status === "online") return "var(--dsw-alias-state-success-primary, #1D9E75)";
+			if (s?.status === "error") return "var(--dsw-alias-state-error-primary, #e24b4a)";
+			return "var(--dsw-alias-label-tertiary, #bdbdbd)";
+		}
+		const badge = {
+			display: "inline-flex",
+			alignItems: "center",
+			fontSize: 10,
+			lineHeight: 1,
+			padding: "3px 9px",
+			borderRadius: 999,
+			border: "1px solid transparent",
+			flexShrink: 0,
+			fontWeight: 500
+		};
+		const badgeOff = {
+			...badge,
+			color: "var(--dsw-alias-state-error-primary, #e24b4a)",
+			borderColor: "rgba(226,75,74,0.35)",
+			background: "rgba(226,75,74,0.08)"
+		};
+		const badgeOn = {
+			...badge,
+			color: "var(--dsw-alias-state-success-primary, #1D9E75)",
+			borderColor: "rgba(29,158,117,0.35)",
+			background: "rgba(29,158,117,0.08)"
+		};
+		const channelSub = {
+			fontSize: 11,
+			color: "var(--dsw-alias-label-tertiary, #888)",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
+		const channelActions = {
+			display: "flex",
+			alignItems: "center",
+			gap: 4,
+			flexShrink: 0
+		};
+		const iconBtn = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 30,
+			height: 30,
+			border: "none",
+			borderRadius: 6,
+			background: "transparent",
+			color: "var(--dsw-alias-label-tertiary, #888)",
+			cursor: "pointer"
+		};
+		const toggleBtn = {
+			position: "relative",
+			width: 36,
+			height: 21,
+			border: "none",
+			borderRadius: 999,
+			background: "var(--dsw-alias-border-l2, #ccc)",
+			cursor: "pointer",
+			padding: 0,
+			flexShrink: 0
+		};
+		const toggleOn = {
+			...toggleBtn,
+			background: "var(--dsw-alias-state-business-primary, #185FA5)"
+		};
+		const toggleKnob = {
+			position: "absolute",
+			left: 2,
+			top: 2,
+			width: 17,
+			height: 17,
+			borderRadius: "50%",
+			background: "#fff",
+			boxShadow: "0 1px 2px rgba(0,0,0,0.25)",
+			transition: "left 0.15s ease"
+		};
+		const toggleKnobOn = {
+			...toggleKnob,
+			left: 17
+		};
+		/**
+		* Official brand glyphs per channel type (24×24 fill paths — QQ/WeChat from
+		* Simple Icons, DingTalk from MingCute, WeCom from TDesign; CC0/Apache/MIT).
+		* Unknown types fall back to the DingTalk glyph.
+		*/
+		const BRAND_PATHS = {
+			qq: "M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673c.54.065 2.103-2.472 2.103-2.472c0 1.469.756 3.387 2.394 4.771c-.612.188-1.363.479-1.845.835c-.434.32-.379.646-.301.778c.343.578 5.883.369 7.482.189c1.6.18 7.14.389 7.483-.189c.078-.132.132-.458-.301-.778c-.483-.356-1.233-.646-1.846-.836c1.637-1.384 2.393-3.302 2.393-4.771c0 0 1.563 2.537 2.103 2.472c.251-.03.581-1.39-.438-4.673",
+			weixin: "M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213c0 .163.13.295.29.295a.33.33 0 0 0 .167-.054l1.903-1.114a.86.86 0 0 1 .717-.098a10.2 10.2 0 0 0 2.837.403c.276 0 .543-.027.811-.05c-.857-2.578.157-4.972 1.932-6.446c1.703-1.415 3.882-1.98 5.853-1.838c-.576-3.583-4.196-6.348-8.596-6.348M5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178a1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18m5.34 2.867c-1.797-.052-3.746.512-5.28 1.786c-1.72 1.428-2.687 3.72-1.78 6.22c.942 2.453 3.666 4.229 6.884 4.229c.826 0 1.622-.12 2.361-.336a.72.72 0 0 1 .598.082l1.584.926a.3.3 0 0 0 .14.047c.134 0 .24-.111.24-.247c0-.06-.023-.12-.038-.177l-.327-1.233a.6.6 0 0 1-.023-.156a.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983a.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983a.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982",
+			dingtalk: "M6.802 2.02a1 1 0 0 1 .849.22l9.751 8.359a2 2 0 0 1 .235 2.799l-1.06 1.272l.87.436a1 1 0 0 1 .134 1.708l-7 5a1 1 0 0 1-1.539-1.101l1.21-4.034c-2.363-.9-3.747-3.055-4.233-5.483A1 1 0 0 1 7.01 10c-.474-.703-.86-1.42-1.134-2.149c-.649-1.73-.658-3.523.23-5.298a1 1 0 0 1 .696-.533",
+			wecom: "m17.326 8.158l-.003-.007a6.6 6.6 0 0 0-1.178-1.674c-1.266-1.307-3.067-2.19-5.102-2.417a9.3 9.3 0 0 0-2.124 0h-.001c-2.061.228-3.882 1.107-5.14 2.405a6.7 6.7 0 0 0-1.194 1.682A5.7 5.7 0 0 0 2 10.657c0 1.106.332 2.218.988 3.201l.006.01c.391.594 1.092 1.39 1.637 1.83l.983.793l-.208.875l.527-.267l.708-.358l.761.225c.467.137.955.227 1.517.29h.005q.515.06 1.026.059c.355 0 .724-.02 1.095-.06a9 9 0 0 0 1.346-.258c.095.7.43 1.337.932 1.81c-.658.208-1.352.358-2.061.436c-.442.048-.883.072-1.312.072q-.627 0-1.253-.072a10.7 10.7 0 0 1-1.861-.36l-2.84 1.438s-.29.131-.44.131c-.418 0-.702-.285-.702-.704c0-.252.067-.598.128-.84l.394-1.653c-.728-.586-1.563-1.544-2.052-2.287A7.76 7.76 0 0 1 0 10.658a7.7 7.7 0 0 1 .787-3.39a8.7 8.7 0 0 1 1.551-2.19c1.61-1.665 3.878-2.73 6.359-3.006a11.3 11.3 0 0 1 2.565 0c2.47.275 4.712 1.353 6.323 3.017a8.6 8.6 0 0 1 1.539 2.192c.466.945.769 1.937.769 2.978a3.06 3.06 0 0 0-2-.005c-.001-.644-.189-1.329-.564-2.09zm4.125 6.977l-.024-.024l-.024-.018l-.024-.018l-.096-.095a4.24 4.24 0 0 1-1.169-2.192q0-.038-.006-.075l-.006-.056l-.035-.144a1.3 1.3 0 0 0-.358-.61a1.386 1.386 0 0 0-1.957 0a1.4 1.4 0 0 0 0 1.963c.191.191.418.311.668.371c.024.012.06.012.084.012q.019 0 .041.006q.023.005.042.006a4.24 4.24 0 0 1 2.231 1.186c.048.048.096.095.131.143a.323.323 0 0 0 .466 0a.35.35 0 0 0 .036-.455m-1.05 4.37l-.025.025c-.119.096-.31.096-.453-.036a.326.326 0 0 1 0-.467c.047-.036.094-.083.141-.13l.002-.002a4.27 4.27 0 0 0 1.187-2.28q.005-.024.006-.043c0-.024 0-.06.012-.084a1.386 1.386 0 0 1 2.326-.67a1.4 1.4 0 0 1 0 1.964c-.167.18-.382.299-.608.359l-.143.036l-.057.005q-.035.006-.075.007a4.2 4.2 0 0 0-2.183 1.173l-.095.096q-.009.01-.018.024t-.018.024m-4.392-1.053l.024.024l.024.018q.015.009.024.018l.096.096a4.25 4.25 0 0 1 1.169 2.19q0 .04.006.076q.005.03.006.057l.035.143c.06.228.18.443.358.611c.537.539 1.42.539 1.957 0a1.4 1.4 0 0 0 0-1.964a1.4 1.4 0 0 0-.668-.371c-.024-.012-.06-.012-.084-.012q-.018 0-.041-.006l-.042-.006a4.25 4.25 0 0 1-2.231-1.185a1.4 1.4 0 0 1-.131-.144a.323.323 0 0 0-.466 0a.325.325 0 0 0-.036.455m1.039-4.358l.024-.024a.32.32 0 0 1 .453.035a.326.326 0 0 1 0 .467c-.047.036-.094.083-.141.13l-.002.002a4.27 4.27 0 0 0-1.187 2.281l-.006.042c0 .024 0 .06-.012.084a1.386 1.386 0 0 1-2.326.67a1.4 1.4 0 0 1 0-1.963c.166-.18.381-.3.608-.36l.143-.035q.026 0 .056-.006q.037-.005.075-.006a4.2 4.2 0 0 0 2.183-1.174l.096-.095l.018-.025z"
+		};
+		/** Official brand accent colors (fallback to currentColor when unset). */
+		const BRAND_COLORS = {
+			qq: "#12B7F5",
+			weixin: "#07C160",
+			dingtalk: "#0089FF",
+			wecom: "#0082EF"
+		};
+		/** Channel-type icon as inline SVG (official brand glyphs). */
+		function ChannelGlyph({ type }) {
+			const d = BRAND_PATHS[type] ?? BRAND_PATHS.dingtalk;
+			const color = BRAND_COLORS[type];
+			return (0, react.createElement)("svg", {
+				width: 20,
+				height: 20,
+				viewBox: "0 0 24 24",
+				fill: color ?? "currentColor",
+				"aria-hidden": true
+			}, (0, react.createElement)("path", { d }));
+		}
+		/**
+		* Render the IM channels settings page.
+		* @param props - injected config api.
+		*/
+		function ImChannelsSection(props) {
+			const { configApi } = props;
+			const [channels, setChannels] = (0, react.useState)([]);
+			const [revision, setRevision] = (0, react.useState)(void 0);
+			const [loading, setLoading] = (0, react.useState)(true);
+			const [modalOpen, setModalOpen] = (0, react.useState)(false);
+			const [editId, setEditId] = (0, react.useState)(void 0);
+			const [pendingDelete, setPendingDelete] = (0, react.useState)(void 0);
+			const [error, setError] = (0, react.useState)("");
+			const [statuses, setStatuses] = (0, react.useState)({});
+			(0, react.useEffect)(() => {
+				let current = true;
+				configApi.load().then((result) => {
+					if (!current) return;
+					if (!result.ok) setError(result.message ?? "加载配置失败");
+					else {
+						setChannels(Array.isArray(result.channels) ? result.channels : []);
+						setRevision(result.revision);
+					}
+					setLoading(false);
+				});
+				return () => {
+					current = false;
+				};
+			}, [configApi]);
+			(0, react.useEffect)(() => {
+				let current = true;
+				const tick = async () => {
+					const result = await configApi.statuses();
+					if (current && result.ok && result.statuses) setStatuses(result.statuses);
+				};
+				tick();
+				const id = setInterval(tick, 5e3);
+				return () => {
+					current = false;
+					clearInterval(id);
+				};
+			}, [configApi]);
+			/** Load fresh state after a write. */
+			const refresh = async () => {
+				const result = await configApi.load();
+				if (!result.ok) {
+					setError(result.message ?? "刷新配置失败");
+					return;
+				}
+				setChannels(Array.isArray(result.channels) ? result.channels : []);
+				setRevision(result.revision);
+				setError("");
+			};
+			/** Wholesale-replace the channels array through the host route. */
+			const writeChannels = async (next) => {
+				setError("");
+				const result = await configApi.save(next, revision);
+				if (!result.ok) {
+					setError(result.message ?? `保存失败（${result.code ?? "unknown"}）`);
+					throw new Error(result.message ?? "save failed");
+				}
+				await refresh();
+			};
+			const handleSave = async (draft) => {
+				await writeChannels(draft.channels);
+				setModalOpen(false);
+				setEditId(void 0);
+			};
+			const handleToggle = async (id, current) => {
+				const next = channels.map((inst) => inst.id === id ? {
+					...inst,
+					enabled: !current
+				} : { ...inst });
+				await writeChannels(next);
+			};
+			const handleDelete = async () => {
+				if (!pendingDelete) return;
+				const id = pendingDelete;
+				setPendingDelete(void 0);
+				const next = channels.filter((inst) => inst.id !== id);
+				await writeChannels(next);
+			};
+			const groups = TYPE_ORDER.map((type) => ({
+				type,
+				label: TYPE_LABELS[type] ?? type,
+				items: channels.filter((inst) => inst.type === type)
+			}));
+			return (0, react.createElement)("div", { style: page }, (0, react.createElement)("div", { style: header }, (0, react.createElement)("div", { style: titleRow }, (0, react.createElement)("h2", { style: title }, "IM 通道"), channels.length > 0 ? (0, react.createElement)("span", { style: countBadge }, String(channels.length)) : null), (0, react.createElement)("div", { style: headerRight }, (0, react.createElement)("button", {
+				style: addBtn,
+				onClick: () => {
+					setEditId(void 0);
+					setModalOpen(true);
+				}
+			}, (0, react.createElement)("svg", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round"
+			}, (0, react.createElement)("path", { d: "M8 3v10M3 8h10" })), (0, react.createElement)("span", null, "添加通道")))), (0, react.createElement)("div", { style: body }, error ? (0, react.createElement)("div", { style: errorStyle }, error) : null, loading ? (0, react.createElement)("div", { style: empty }, (0, react.createElement)("p", { style: emptyText }, "加载中…")) : channels.length === 0 ? (0, react.createElement)("div", { style: empty }, (0, react.createElement)("p", { style: emptyText }, "暂无通道，点击右上角「添加通道」开始接入")) : (0, react.createElement)("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 16
+			} }, groups.filter((g) => g.items.length > 0).map((group) => (0, react.createElement)("div", {
+				key: group.type,
+				style: group
+			}, (0, react.createElement)("div", { style: groupHead }, (0, react.createElement)("span", { style: channelIcon }, (0, react.createElement)(ChannelGlyph, { type: group.type })), (0, react.createElement)("span", { style: groupTitle }, group.label), (0, react.createElement)("span", { style: groupCount }, String(group.items.length))), (0, react.createElement)("div", { style: channelList }, group.items.map((inst) => (0, react.createElement)("div", {
+				key: inst.id,
+				style: channelCard
+			}, (0, react.createElement)("span", { style: channelIcon }, (0, react.createElement)(ChannelGlyph, { type: inst.type })), (0, react.createElement)("div", { style: channelInfo }, (0, react.createElement)("div", { style: channelNameRow }, (0, react.createElement)("span", {
+				style: {
+					...statusDot,
+					background: statusColor(statuses[inst.id])
+				},
+				title: statuses[inst.id]?.status ?? "unknown"
+			}), (0, react.createElement)("span", { style: channelName }, inst.name || (TYPE_LABELS[inst.type] ?? inst.type)), (0, react.createElement)("span", { style: inst.enabled ? badgeOn : badgeOff }, inst.enabled ? "已连接" : "未启用")), (0, react.createElement)("span", { style: channelSub }, inst.id)), (0, react.createElement)("span", { style: channelActions }, (0, react.createElement)("button", {
+				type: "button",
+				style: inst.enabled ? toggleOn : toggleBtn,
+				title: inst.enabled ? "停用" : "启用",
+				onClick: () => void handleToggle(inst.id, inst.enabled)
+			}, (0, react.createElement)("span", { style: inst.enabled ? toggleKnobOn : toggleKnob })), (0, react.createElement)("button", {
+				type: "button",
+				style: iconBtn,
+				title: "编辑",
+				onClick: () => {
+					setEditId(inst.id);
+					setModalOpen(true);
+				}
+			}, (0, react.createElement)("svg", {
+				width: 14,
+				height: 14,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.3,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}, (0, react.createElement)("path", { d: "M11.5 2.5l2 2L6 12l-3 1 1-3 7.5-7.5z" }))), (0, react.createElement)("button", {
+				type: "button",
+				style: iconBtn,
+				title: "删除",
+				onClick: () => setPendingDelete(inst.id)
+			}, (0, react.createElement)("svg", {
+				width: 14,
+				height: 14,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.3,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}, (0, react.createElement)("path", { d: "M3 5h10M6.5 5V3.5h3V5M5 5l.5 7.5h5L11 5M6.5 7.5v3M9.5 7.5v3" }))))))))))), modalOpen ? (0, react.createElement)(ImChannelModal, {
+				editId,
+				instances: channels,
+				configApi,
+				onClose: () => {
+					setModalOpen(false);
+					setEditId(void 0);
+				},
+				onSave: handleSave
+			}) : null, pendingDelete !== void 0 ? (0, react.createElement)("div", {
+				style: {
+					position: "fixed",
+					inset: 0,
+					zIndex: 300,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					background: "rgba(0,0,0,0.5)",
+					padding: 24
+				},
+				onMouseDown: (e) => {
+					if (e.target === e.currentTarget) setPendingDelete(void 0);
+				}
+			}, (0, react.createElement)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 12,
+					width: 380,
+					maxWidth: "100%",
+					background: "var(--dsw-alias-bg-layer-2, #fff)",
+					border: "1px solid var(--dsw-alias-border-l2, #ddd)",
+					borderRadius: 14,
+					padding: "18px",
+					boxShadow: "0 20px 48px rgba(0,0,0,0.36)"
+				},
+				onClick: (e) => e.stopPropagation()
+			}, (0, react.createElement)("div", { style: {
+				fontSize: 15,
+				fontWeight: 500
+			} }, "删除通道"), (0, react.createElement)("p", { style: {
+				fontSize: 13,
+				color: "var(--dsw-alias-label-secondary, #555)",
+				margin: 0
+			} }, "确定删除该通道？其配置将被移除。"), (0, react.createElement)("div", { style: {
+				display: "flex",
+				justifyContent: "flex-end",
+				gap: 8
+			} }, (0, react.createElement)("button", {
+				style: {
+					height: 32,
+					padding: "0 14px",
+					background: "transparent",
+					color: "inherit",
+					border: "1px solid var(--dsw-alias-border-l2, #ccc)",
+					borderRadius: 8,
+					cursor: "pointer",
+					fontSize: 13
+				},
+				onClick: () => setPendingDelete(void 0)
+			}, "取消"), (0, react.createElement)("button", {
+				style: {
+					height: 32,
+					padding: "0 14px",
+					background: "var(--dsw-alias-state-error-primary, #e24b4a)",
+					color: "#fff",
+					border: "none",
+					borderRadius: 8,
+					cursor: "pointer",
+					fontSize: 13
+				},
+				onClick: () => void handleDelete()
+			}, "删除")))) : null);
+		}
+		//#endregion
+		//#region src/client/config-api.ts
+		const PACKAGE = "@lijian-ui/dsh-im-gateway";
+		const SERVICE = "imGatewayRemote";
+		/** Identity codec — the host manifest owns strict validation. */
+		const identity = (value) => value;
+		const codec = (symbol) => ({
+			mode: "strict",
+			typeSymbol: symbol,
+			schema: { parse: identity }
+		});
+		/** Wire descriptors mirroring the host contribution (src/remote.ts). */
+		const CONTRIBUTION = {
+			package: PACKAGE,
+			descriptors: [
+				{
+					id: `${PACKAGE}#${SERVICE}/getConfig`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "getConfig",
+					invocation: { kind: "direct" },
+					parameters: [],
+					result: codec(`${PACKAGE}#ImGatewayConfigView`)
+				},
+				{
+					id: `${PACKAGE}#${SERVICE}/saveConfig`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "saveConfig",
+					invocation: { kind: "direct" },
+					parameters: [{
+						name: "channels",
+						wire: "channels",
+						source: "json",
+						codec: codec(`${PACKAGE}#ChannelsArray`)
+					}, {
+						name: "expectedRevision",
+						wire: "expectedRevision",
+						source: "json",
+						acceptsUndefined: true,
+						codec: codec(`${PACKAGE}#Revision`)
+					}],
+					result: codec(`${PACKAGE}#ImGatewayConfigView`)
+				},
+				{
+					id: `${PACKAGE}#${SERVICE}/getChannelStatuses`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "getChannelStatuses",
+					invocation: { kind: "direct" },
+					parameters: [],
+					result: codec(`${PACKAGE}#ChannelStatuses`)
+				},
+				{
+					id: `${PACKAGE}#${SERVICE}/startQrLogin`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "startQrLogin",
+					invocation: { kind: "direct" },
+					parameters: [{
+						name: "channelType",
+						wire: "channelType",
+						source: "json",
+						codec: codec(`${PACKAGE}#ChannelType`)
+					}],
+					result: codec(`${PACKAGE}#QrLoginStatus`)
+				},
+				{
+					id: `${PACKAGE}#${SERVICE}/getQrLoginStatus`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "getQrLoginStatus",
+					invocation: { kind: "direct" },
+					parameters: [{
+						name: "loginId",
+						wire: "loginId",
+						source: "json",
+						codec: codec(`${PACKAGE}#LoginId`)
+					}],
+					result: codec(`${PACKAGE}#QrLoginStatus`)
+				},
+				{
+					id: `${PACKAGE}#${SERVICE}/submitQrVerifyCode`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "submitQrVerifyCode",
+					invocation: { kind: "direct" },
+					parameters: [{
+						name: "loginId",
+						wire: "loginId",
+						source: "json",
+						codec: codec(`${PACKAGE}#LoginId`)
+					}, {
+						name: "code",
+						wire: "code",
+						source: "json",
+						codec: codec(`${PACKAGE}#VerifyCode`)
+					}],
+					result: codec(`${PACKAGE}#Bool`)
+				},
+				{
+					id: `${PACKAGE}#${SERVICE}/cancelQrLogin`,
+					service: SERVICE,
+					namespace: SERVICE,
+					method: "cancelQrLogin",
+					invocation: { kind: "direct" },
+					parameters: [{
+						name: "loginId",
+						wire: "loginId",
+						source: "json",
+						codec: codec(`${PACKAGE}#LoginId`)
+					}],
+					result: codec(`${PACKAGE}#Bool`)
+				}
+			]
+		};
+		/**
+		* Create the config api bound to this browser plugin's context.
+		* Mounts the remote contribution once; every call awaits the mount, then
+		* invokes the namespace service and unwraps the `{ok, value/error}` envelope.
+		*/
+		function createConfigApi(ctx) {
+			const mount = ctx.remote.$mount(CONTRIBUTION);
+			const call = async (method, ...args) => {
+				try {
+					await mount;
+					const result = await ctx.get(`remote.${SERVICE}`)[method](...args);
+					if (!result.ok) return {
+						ok: false,
+						code: result.error?.code ?? "remote-error",
+						message: result.error?.message ?? `${SERVICE}.${method} failed`
+					};
+					return {
+						ok: true,
+						...result.value
+					};
+				} catch (err) {
+					return {
+						ok: false,
+						code: "remote-error",
+						message: err instanceof Error ? err.message : String(err)
+					};
+				}
+			};
+			return {
+				load: () => call("getConfig"),
+				save: (channels, expectedRevision) => call("saveConfig", channels, expectedRevision),
+				statuses: () => call("getChannelStatuses"),
+				startQrLogin: (channelType) => call("startQrLogin", channelType),
+				getQrLoginStatus: (loginId) => call("getQrLoginStatus", loginId),
+				submitQrVerifyCode: (loginId, code) => call("submitQrVerifyCode", loginId, code),
+				cancelQrLogin: (loginId) => call("cancelQrLogin", loginId)
+			};
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/** Section identity in the Settings left-nav rail. */
+		const SECTION_ID = "im-channels";
+		/** Sits below Models (order 10) in the settings nav. */
+		const SECTION_ORDER = 20;
+		/** Services this browser plugin requires (cordis fiber inject). */
+		const inject = [
+			"slots",
+			"locale",
+			"connection",
+			"remote"
+		];
+		/**
+		* Mount the IM channels settings page.
+		* @param ctx - the browser plugin context (guarded facade).
+		*/
+		function apply(ctx) {
+			const configApi = createConfigApi(ctx);
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: SECTION_ID,
+				order: SECTION_ORDER,
+				label: () => "IM 通道",
+				inject: () => ({ configApi })
+			}, ImChannelsSection));
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map