dsh-hooks 0.4.0 → 0.5.0

package/lib/client.js

@@ -52,6 +52,54 @@ window.__ModuleLoader__.load({
 				return null;
 			}
 		}
+		/** POST a JSON action and surface the envelope result (error message included). */
+		async function postFeishu(path, body, fetchFn) {
+			try {
+				const response = await fetchFn(path, {
+					method: "POST",
+					headers: {
+						"content-type": "application/json",
+						accept: "application/json"
+					},
+					body: JSON.stringify(body)
+				});
+				const envelope = await response.json();
+				if (!response.ok || !envelope.ok) return {
+					ok: false,
+					error: envelope.error?.message ?? `HTTP ${response.status}`
+				};
+				const value = envelope.value ?? {};
+				return {
+					ok: true,
+					setup: value.setup,
+					message: typeof value.message === "string" ? value.message : void 0,
+					resultMaxChars: typeof value.resultMaxChars === "number" ? value.resultMaxChars : void 0
+				};
+			} catch (error) {
+				console.warn(`[dsh-hooks-ui] POST ${path} failed: ${error instanceof Error ? error.message : String(error)}`);
+				return {
+					ok: false,
+					error: "网络请求失败"
+				};
+			}
+		}
+		async function fetchFeishuStatus(fetchFn = fetch) {
+			return getJson("/dsh-hooks/feishu/status", fetchFn);
+		}
+		async function postFeishuSetup(profile, resultMaxChars, fetchFn = fetch) {
+			const body = { profile };
+			if (resultMaxChars !== void 0) body.resultMaxChars = resultMaxChars;
+			return postFeishu("/dsh-hooks/feishu/setup", body, fetchFn);
+		}
+		async function postFeishuConfig(resultMaxChars, fetchFn = fetch) {
+			return postFeishu("/dsh-hooks/feishu/config", { resultMaxChars }, fetchFn);
+		}
+		async function postFeishuCancel(fetchFn = fetch) {
+			return postFeishu("/dsh-hooks/feishu/cancel", {}, fetchFn);
+		}
+		async function postFeishuTest(fetchFn = fetch) {
+			return postFeishu("/dsh-hooks/feishu/test", {}, fetchFn);
+		}
 		/** `HH:MM:SS` local time for a timestamp. */
 		function formatTime(ts) {
 			const date = new Date(ts);
@@ -86,10 +134,12 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/settings-card.tsx
 		/**
-		* The dsh-hooks settings card: status badges, execution-history timeline,
-		* and a manual event tester — all served by the core plugin's /dsh-hooks/*
-		* routes. Degrades gracefully: fetch failures show an inline notice, never
-		* a crash. Registered into the shell's `web-ui.plugin.item` slot.
+		* The dsh-hooks settings card: status badges, a manual event tester, the
+		* Feishu connect flow (QR scan + truncation length + test card), and a
+		* collapsed-by-default execution-history timeline at the bottom — all
+		* served by the core plugin's /dsh-hooks/* routes. Degrades gracefully:
+		* fetch failures show an inline notice, never a crash. Registered into the
+		* shell's `settings.section` slot.
 		*/
 		const EVENTS = [
 			"turn/start",
@@ -107,19 +157,35 @@ window.__ModuleLoader__.load({
 			"agent/error",
 			"agent/status"
 		];
+		const DEFAULT_TRUNCATE = 300;
 		/** Settings-slot component; the shell's slot machinery supplies the props. */
 		function HooksSettingsCard(_props) {
 			const [status, setStatus] = (0, react.useState)(null);
 			const [history, setHistory] = (0, react.useState)(null);
+			const [historyOpen, setHistoryOpen] = (0, react.useState)(false);
 			const [loadError, setLoadError] = (0, react.useState)(false);
 			const [event, setEvent] = (0, react.useState)("turn/end");
 			const [reason, setReason] = (0, react.useState)("completed");
 			const [tool, setTool] = (0, react.useState)("");
 			const [testResult, setTestResult] = (0, react.useState)(null);
+			const [feishu, setFeishu] = (0, react.useState)(null);
+			const [profile, setProfile] = (0, react.useState)("web");
+			const [setupTruncate, setSetupTruncate] = (0, react.useState)(String(DEFAULT_TRUNCATE));
+			const [truncateDraft, setTruncateDraft] = (0, react.useState)(null);
+			const [configMessage, setConfigMessage] = (0, react.useState)(null);
+			const [reconnecting, setReconnecting] = (0, react.useState)(false);
+			const [feishuError, setFeishuError] = (0, react.useState)(null);
+			const [testMessage, setTestMessage] = (0, react.useState)(null);
+			const [countdown, setCountdown] = (0, react.useState)(null);
 			const refresh = (0, react.useCallback)(async () => {
-				const [statusInfo, records] = await Promise.all([fetchStatus(), fetchHistory(30)]);
+				const [statusInfo, records, feishuInfo] = await Promise.all([
+					fetchStatus(),
+					fetchHistory(30),
+					fetchFeishuStatus()
+				]);
 				setStatus(statusInfo);
 				setHistory(records);
+				setFeishu(feishuInfo);
 				setLoadError(statusInfo === null && records === null);
 			}, []);
 			(0, react.useEffect)(() => {
@@ -127,6 +193,22 @@ window.__ModuleLoader__.load({
 				const timer = setInterval(() => void refresh(), 5e3);
 				return () => clearInterval(timer);
 			}, [refresh]);
+			const pending = feishu?.setup?.status === "pending";
+			(0, react.useEffect)(() => {
+				if (!pending) return;
+				const poll = setInterval(() => void refresh(), 2e3);
+				const tick = setInterval(() => {
+					setCountdown(remainingSeconds(feishu?.setup?.expiresAtMs));
+				}, 1e3);
+				return () => {
+					clearInterval(poll);
+					clearInterval(tick);
+				};
+			}, [
+				pending,
+				feishu?.setup?.expiresAtMs,
+				refresh
+			]);
 			const runTest = async (execute) => {
 				const result = await postTest({
 					event,
@@ -137,6 +219,65 @@ window.__ModuleLoader__.load({
 				setTestResult(result);
 				if (execute) refresh();
 			};
+			const connectFeishu = async () => {
+				setFeishuError(null);
+				setTestMessage(null);
+				setConfigMessage(null);
+				setCountdown(null);
+				const parsed = Number(setupTruncate);
+				const result = await postFeishuSetup(profile.trim() !== "" ? profile.trim() : "web", Number.isFinite(parsed) ? parsed : void 0);
+				if (!result.ok) {
+					setFeishuError(result.error ?? "启动扫码失败");
+					return;
+				}
+				if (result.setup !== void 0) {
+					setFeishu({
+						configured: false,
+						appId: null,
+						targetKind: null,
+						target: null,
+						setup: result.setup,
+						resultMaxChars: Number.isFinite(parsed) ? parsed : DEFAULT_TRUNCATE
+					});
+					setCountdown(remainingSeconds(result.setup.expiresAtMs));
+				}
+			};
+			const cancelFeishu = async () => {
+				await postFeishuCancel();
+				refresh();
+			};
+			const sendTestCard = async () => {
+				setTestMessage(null);
+				setFeishuError(null);
+				const result = await postFeishuTest();
+				if (!result.ok) setFeishuError(result.error ?? "发送失败");
+				else setTestMessage(result.message ?? "已发送");
+			};
+			const saveTruncate = async () => {
+				const value = Number(truncateDraft);
+				if (!Number.isFinite(value)) {
+					setConfigMessage({
+						ok: false,
+						text: "请输入数字"
+					});
+					return;
+				}
+				const result = await postFeishuConfig(value);
+				if (!result.ok) {
+					setConfigMessage({
+						ok: false,
+						text: result.error ?? "保存失败"
+					});
+					return;
+				}
+				setTruncateDraft(null);
+				setConfigMessage({
+					ok: true,
+					text: `已保存：卡片内容最长 ${result.resultMaxChars} 字符`
+				});
+				refresh();
+			};
+			const truncateValue = truncateDraft ?? String(feishu?.resultMaxChars ?? DEFAULT_TRUNCATE);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dh-card",
 				children: [
@@ -167,49 +308,6 @@ window.__ModuleLoader__.load({
 						className: "dh-error-banner",
 						children: "无法访问 /dsh-hooks/* 路由：请确认 dsh-hooks 核心插件已安装且 dsh web 已重启。"
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "dh-section-title",
-						children: "执行历史（最近 30 条）"
-					}), history === null || history.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "dh-empty",
-						children: history === null ? "加载中…" : "暂无记录"
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "dh-timeline",
-						children: [...history].reverse().map((record, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dh-record",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dh-record-main",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "dh-record-top",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dh-record-time",
-												children: formatTime(record.ts)
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dh-record-event",
-												children: record.event
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: `dh-outcome ${outcomeClass(record.outcome)}`,
-												children: outcomeLabel(record.outcome)
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "dh-record-command",
-										title: record.command,
-										children: record.command
-									}),
-									record.error !== void 0 && record.error !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "dh-record-error",
-										children: record.error.slice(0, 200)
-									})
-								]
-							})
-						}, `${record.ts}-${index}`))
-					})] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 						className: "dh-section-title",
 						children: "手动测试"
@@ -300,10 +398,230 @@ window.__ModuleLoader__.load({
 								}, line.index))]
 							})
 						]
-					})] })
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "dh-section-title",
+						children: "飞书通知"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dh-feishu",
+						children: pending ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dh-feishu-qr",
+							children: [
+								feishu?.setup?.qrDataUrl !== void 0 && feishu?.setup?.qrDataUrl !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									className: "dh-feishu-qr-img",
+									src: feishu.setup.qrDataUrl,
+									alt: "飞书扫码授权二维码"
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+									className: "dh-feishu-link",
+									href: feishu?.setup?.qrUrl,
+									target: "_blank",
+									rel: "noreferrer",
+									children: "在浏览器中打开飞书授权链接"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dh-feishu-line",
+									children: ["请用飞书扫码", countdown !== null && countdown > 0 ? `（${countdown}s 内有效）` : ""]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dh-buttons",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dh-button",
+										onClick: () => void cancelFeishu(),
+										children: "取消"
+									})
+								})
+							]
+						}) : feishu?.configured === true && !reconnecting ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dh-feishu-status",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dh-feishu-line dh-feishu-ok",
+									children: [
+										"✅ 已连接 · 应用 ",
+										feishu.appId ?? "?",
+										feishu.targetKind !== null && feishu.target !== null ? `（接收者 ${feishu.targetKind}: ${feishu.target}）` : ""
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dh-feishu-row",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "dh-field dh-field-narrow",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dh-field-label",
+											children: "卡片截断长度（50–5000 字符）"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											className: "dh-input",
+											type: "number",
+											min: 50,
+											max: 5e3,
+											value: truncateValue,
+											onChange: (e) => setTruncateDraft(e.target.value)
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dh-button",
+										onClick: () => void saveTruncate(),
+										children: "保存"
+									})]
+								}),
+								configMessage !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: configMessage.ok ? "dh-feishu-line dh-feishu-ok" : "dh-feishu-error",
+									children: configMessage.text
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dh-buttons",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dh-button dh-button-primary",
+										onClick: () => void sendTestCard(),
+										children: "发送测试卡片"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dh-button",
+										onClick: () => setReconnecting(true),
+										children: "重新连接"
+									})]
+								}),
+								testMessage !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dh-feishu-line dh-feishu-ok",
+									children: testMessage
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dh-feishu-hint",
+									children: "截断长度即时生效；重新扫码会覆盖现有应用凭据与本 profile 的飞书 hooks。"
+								})
+							]
+						}) : feishu?.setup?.status === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dh-feishu-status",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dh-feishu-error",
+								children: ["连接失败：", feishu.setup.error ?? "未知错误"]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dh-buttons",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dh-button dh-button-primary",
+									onClick: () => void connectFeishu(),
+									children: "重试"
+								})
+							})]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dh-feishu-form",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dh-test-row",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "dh-field",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dh-field-label",
+											children: "profile（写入哪个 profile 的 cordis.patch.yml）"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											className: "dh-input",
+											value: profile,
+											onChange: (e) => setProfile(e.target.value),
+											placeholder: "web"
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "dh-field dh-field-narrow",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dh-field-label",
+											children: "卡片截断长度（50–5000）"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											className: "dh-input",
+											type: "number",
+											min: 50,
+											max: 5e3,
+											value: setupTruncate,
+											onChange: (e) => setSetupTruncate(e.target.value)
+										})]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dh-buttons",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dh-button dh-button-primary",
+										onClick: () => void connectFeishu(),
+										children: "扫码连接飞书"
+									}), reconnecting && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dh-button",
+										onClick: () => setReconnecting(false),
+										children: "返回"
+									})]
+								}),
+								feishuError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dh-feishu-error",
+									children: feishuError
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dh-feishu-hint",
+									children: "将创建名为「DSH 通知机器人」的飞书应用（仅 im:message:send_as_bot 权限），扫码者本人接收通知卡片；配置写入 ~/.dsh/profiles/<profile>/cordis.patch.yml，重启 dsh web 后生效。"
+								})
+							]
+						})
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dh-section-head",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+							className: "dh-section-title",
+							children: ["执行历史（最近 30 条）", status !== null && status.historyCount > 0 ? ` · ${status.historyCount} 条` : ""]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dh-button dh-toggle",
+							onClick: () => setHistoryOpen((open) => !open),
+							"aria-expanded": historyOpen,
+							children: historyOpen ? "收起 ▲" : "展开 ▼"
+						})]
+					}), historyOpen && (history === null || history.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dh-empty",
+						children: history === null ? "加载中…" : "暂无记录"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dh-timeline",
+						children: [...history].reverse().map((record, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dh-record",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dh-record-main",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dh-record-top",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dh-record-time",
+												children: formatTime(record.ts)
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dh-record-event",
+												children: record.event
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: `dh-outcome ${outcomeClass(record.outcome)}`,
+												children: outcomeLabel(record.outcome)
+											})
+										]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "dh-record-command",
+										title: record.command,
+										children: record.command
+									}),
+									record.error !== void 0 && record.error !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "dh-record-error",
+										children: record.error.slice(0, 200)
+									})
+								]
+							})
+						}, `${record.ts}-${index}`))
+					}))] })
 				]
 			});
 		}
+		/** Seconds until the QR expires, or null when unknown/expired. */
+		function remainingSeconds(expiresAtMs) {
+			if (expiresAtMs === void 0) return null;
+			return Math.max(0, Math.round((expiresAtMs - Date.now()) / 1e3));
+		}
 		function outcomeClass(outcome) {
 			switch (outcomeTone(outcome)) {
 				case "ok": return "dh-outcome-ok";
@@ -314,7 +632,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/settings-card.module.css?inline
-		var settings_card_module_default = ":root {\n  --dsh-hooks-border: #80849038;\n  --dsh-hooks-muted: #767c85;\n  --dsh-hooks-accent: #4d8df7;\n  --dsh-hooks-ok: #3fb56b;\n  --dsh-hooks-bad: #e5534b;\n  --dsh-hooks-warn: #d9a13c;\n}\n\n.dh-card {\n  flex-direction: column;\n  gap: 14px;\n  padding: 12px 4px;\n  font-size: 13px;\n  line-height: 1.5;\n  display: flex;\n}\n\n.dh-card-head {\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.dh-card-title {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.dh-badges {\n  gap: 6px;\n  display: flex;\n}\n\n.dh-badge {\n  color: var(--dsh-hooks-muted);\n  white-space: nowrap;\n  background: #80849029;\n  border-radius: 9px;\n  padding: 1px 7px;\n  font-size: 11px;\n}\n\n.dh-section-title {\n  color: var(--dsh-hooks-muted);\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.dh-timeline {\n  flex-direction: column;\n  gap: 6px;\n  display: flex;\n}\n\n.dh-record {\n  border: 1px solid var(--dsh-hooks-border);\n  border-radius: 6px;\n  gap: 8px;\n  padding: 7px 9px;\n  display: flex;\n}\n\n.dh-record-main {\n  flex: 1;\n  min-width: 0;\n}\n\n.dh-record-top {\n  align-items: baseline;\n  gap: 6px;\n  display: flex;\n}\n\n.dh-record-time {\n  color: var(--dsh-hooks-muted);\n  white-space: nowrap;\n  font-size: 11px;\n}\n\n.dh-record-event {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.dh-record-command {\n  color: var(--dsh-hooks-muted);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: left;\n  direction: rtl;\n  font-size: 12px;\n  overflow: hidden;\n}\n\n.dh-outcome {\n  white-space: nowrap;\n  border-radius: 9px;\n  align-self: flex-start;\n  padding: 1px 7px;\n  font-size: 11px;\n}\n\n.dh-outcome-ok {\n  color: var(--dsh-hooks-ok);\n  background: #3fb56b29;\n}\n\n.dh-outcome-bad {\n  color: var(--dsh-hooks-bad);\n  background: #e5534b29;\n}\n\n.dh-outcome-warn {\n  color: var(--dsh-hooks-warn);\n  background: #d9a13c29;\n}\n\n.dh-outcome-neutral {\n  color: var(--dsh-hooks-muted);\n  background: #80849029;\n}\n\n.dh-record-error {\n  color: var(--dsh-hooks-bad);\n  white-space: pre-wrap;\n  word-break: break-all;\n  margin-top: 4px;\n  font-size: 11px;\n}\n\n.dh-empty {\n  color: var(--dsh-hooks-muted);\n  padding: 6px 2px;\n  font-size: 12px;\n}\n\n.dh-test-form {\n  flex-direction: column;\n  gap: 8px;\n  display: flex;\n}\n\n.dh-test-row {\n  gap: 8px;\n  display: flex;\n}\n\n.dh-field {\n  flex-direction: column;\n  flex: 1;\n  gap: 3px;\n  min-width: 0;\n  display: flex;\n}\n\n.dh-field-label {\n  color: var(--dsh-hooks-muted);\n  font-size: 11px;\n}\n\n.dh-input, .dh-select {\n  border: 1px solid var(--dsh-hooks-border);\n  color: inherit;\n  box-sizing: border-box;\n  background: #8084901f;\n  border-radius: 5px;\n  outline: none;\n  width: 100%;\n  padding: 5px 8px;\n  font-size: 12px;\n}\n\n.dh-input:focus, .dh-select:focus {\n  border-color: var(--dsh-hooks-accent);\n}\n\n.dh-buttons {\n  gap: 8px;\n  display: flex;\n}\n\n.dh-button {\n  border: 1px solid var(--dsh-hooks-border);\n  color: inherit;\n  cursor: pointer;\n  background: #8084901f;\n  border-radius: 5px;\n  padding: 5px 12px;\n  font-size: 12px;\n}\n\n.dh-button:hover {\n  background: #80849038;\n}\n\n.dh-button-primary {\n  background: var(--dsh-hooks-accent);\n  border-color: var(--dsh-hooks-accent);\n  color: #fff;\n}\n\n.dh-button-primary:hover {\n  background: #3c7de8;\n}\n\n.dh-test-results {\n  flex-direction: column;\n  gap: 4px;\n  display: flex;\n}\n\n.dh-test-line {\n  word-break: break-all;\n  border-radius: 5px;\n  padding: 4px 8px;\n  font-size: 12px;\n}\n\n.dh-test-line-match {\n  color: var(--dsh-hooks-ok);\n  background: #3fb56b24;\n}\n\n.dh-test-line-skip {\n  color: var(--dsh-hooks-muted);\n  background: #8084901a;\n}\n\n.dh-error-banner {\n  color: var(--dsh-hooks-bad);\n  background: #e5534b1f;\n  border: 1px solid #e5534b66;\n  border-radius: 6px;\n  padding: 8px 10px;\n  font-size: 12px;\n}\n";
+		var settings_card_module_default = ":root {\n  --dsh-hooks-border: #80849038;\n  --dsh-hooks-muted: #767c85;\n  --dsh-hooks-accent: #4d8df7;\n  --dsh-hooks-ok: #3fb56b;\n  --dsh-hooks-bad: #e5534b;\n  --dsh-hooks-warn: #d9a13c;\n}\n\n.dh-card {\n  flex-direction: column;\n  gap: 14px;\n  padding: 12px 4px;\n  font-size: 13px;\n  line-height: 1.5;\n  display: flex;\n}\n\n.dh-card-head {\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.dh-card-title {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.dh-badges {\n  gap: 6px;\n  display: flex;\n}\n\n.dh-badge {\n  color: var(--dsh-hooks-muted);\n  white-space: nowrap;\n  background: #80849029;\n  border-radius: 9px;\n  padding: 1px 7px;\n  font-size: 11px;\n}\n\n.dh-section-title {\n  color: var(--dsh-hooks-muted);\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.dh-section-head {\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 8px;\n  display: flex;\n}\n\n.dh-section-head .dh-section-title {\n  margin: 0;\n}\n\n.dh-toggle {\n  padding: 2px 10px;\n  font-size: 11px;\n}\n\n.dh-field-narrow {\n  flex: 0 0 150px;\n}\n\n.dh-feishu-row {\n  align-items: flex-end;\n  gap: 8px;\n  display: flex;\n}\n\n.dh-timeline {\n  flex-direction: column;\n  gap: 6px;\n  display: flex;\n}\n\n.dh-record {\n  border: 1px solid var(--dsh-hooks-border);\n  border-radius: 6px;\n  gap: 8px;\n  padding: 7px 9px;\n  display: flex;\n}\n\n.dh-record-main {\n  flex: 1;\n  min-width: 0;\n}\n\n.dh-record-top {\n  align-items: baseline;\n  gap: 6px;\n  display: flex;\n}\n\n.dh-record-time {\n  color: var(--dsh-hooks-muted);\n  white-space: nowrap;\n  font-size: 11px;\n}\n\n.dh-record-event {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.dh-record-command {\n  color: var(--dsh-hooks-muted);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: left;\n  direction: rtl;\n  font-size: 12px;\n  overflow: hidden;\n}\n\n.dh-outcome {\n  white-space: nowrap;\n  border-radius: 9px;\n  align-self: flex-start;\n  padding: 1px 7px;\n  font-size: 11px;\n}\n\n.dh-outcome-ok {\n  color: var(--dsh-hooks-ok);\n  background: #3fb56b29;\n}\n\n.dh-outcome-bad {\n  color: var(--dsh-hooks-bad);\n  background: #e5534b29;\n}\n\n.dh-outcome-warn {\n  color: var(--dsh-hooks-warn);\n  background: #d9a13c29;\n}\n\n.dh-outcome-neutral {\n  color: var(--dsh-hooks-muted);\n  background: #80849029;\n}\n\n.dh-record-error {\n  color: var(--dsh-hooks-bad);\n  white-space: pre-wrap;\n  word-break: break-all;\n  margin-top: 4px;\n  font-size: 11px;\n}\n\n.dh-empty {\n  color: var(--dsh-hooks-muted);\n  padding: 6px 2px;\n  font-size: 12px;\n}\n\n.dh-test-form {\n  flex-direction: column;\n  gap: 8px;\n  display: flex;\n}\n\n.dh-test-row {\n  gap: 8px;\n  display: flex;\n}\n\n.dh-field {\n  flex-direction: column;\n  flex: 1;\n  gap: 3px;\n  min-width: 0;\n  display: flex;\n}\n\n.dh-field-label {\n  color: var(--dsh-hooks-muted);\n  font-size: 11px;\n}\n\n.dh-input, .dh-select {\n  border: 1px solid var(--dsh-hooks-border);\n  color: inherit;\n  box-sizing: border-box;\n  background: #8084901f;\n  border-radius: 5px;\n  outline: none;\n  width: 100%;\n  padding: 5px 8px;\n  font-size: 12px;\n}\n\n.dh-input:focus, .dh-select:focus {\n  border-color: var(--dsh-hooks-accent);\n}\n\n.dh-buttons {\n  gap: 8px;\n  display: flex;\n}\n\n.dh-button {\n  border: 1px solid var(--dsh-hooks-border);\n  color: inherit;\n  cursor: pointer;\n  background: #8084901f;\n  border-radius: 5px;\n  padding: 5px 12px;\n  font-size: 12px;\n}\n\n.dh-button:hover {\n  background: #80849038;\n}\n\n.dh-button-primary {\n  background: var(--dsh-hooks-accent);\n  border-color: var(--dsh-hooks-accent);\n  color: #fff;\n}\n\n.dh-button-primary:hover {\n  background: #3c7de8;\n}\n\n.dh-test-results {\n  flex-direction: column;\n  gap: 4px;\n  display: flex;\n}\n\n.dh-test-line {\n  word-break: break-all;\n  border-radius: 5px;\n  padding: 4px 8px;\n  font-size: 12px;\n}\n\n.dh-test-line-match {\n  color: var(--dsh-hooks-ok);\n  background: #3fb56b24;\n}\n\n.dh-test-line-skip {\n  color: var(--dsh-hooks-muted);\n  background: #8084901a;\n}\n\n.dh-error-banner {\n  color: var(--dsh-hooks-bad);\n  background: #e5534b1f;\n  border: 1px solid #e5534b66;\n  border-radius: 6px;\n  padding: 8px 10px;\n  font-size: 12px;\n}\n\n.dh-feishu {\n  flex-direction: column;\n  gap: 8px;\n  display: flex;\n}\n\n.dh-feishu-form, .dh-feishu-status, .dh-feishu-qr {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  display: flex;\n}\n\n.dh-feishu-qr-img {\n  border: 1px solid var(--dsh-hooks-border);\n  box-sizing: border-box;\n  background: #fff;\n  border-radius: 8px;\n  width: 220px;\n  height: 220px;\n  padding: 6px;\n}\n\n.dh-feishu-line {\n  font-size: 12px;\n}\n\n.dh-feishu-ok {\n  color: var(--dsh-hooks-ok);\n}\n\n.dh-feishu-error {\n  color: var(--dsh-hooks-bad);\n  word-break: break-all;\n  font-size: 12px;\n}\n\n.dh-feishu-hint {\n  color: var(--dsh-hooks-muted);\n  font-size: 11px;\n}\n\n.dh-feishu-link {\n  color: var(--dsh-hooks-accent);\n  font-size: 12px;\n}\n";
 		//#endregion
 		//#region src/client/index.ts
 		const name = "dsh-hooks";

package/lib/feishu-session.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Feishu QR-scan session manager for the web routes: one in-flight
+ * `registerApp` flow at a time, polled by the settings card. The start
+ * promise resolves as soon as the QR authorization is ready (so the UI can
+ * render the code immediately), while the scan wait and file writes finish
+ * in the background and surface through `status()`.
+ */
+import { runFeishuSetup, type FeishuSetupPaths } from './feishu.js';
+export type FeishuSetupStatus = 'pending' | 'succeeded' | 'failed';
+/** Display-only snapshot; credentials never enter any field. */
+export interface FeishuSetupSnapshot {
+    status: FeishuSetupStatus;
+    /** Epoch ms when the flow started (server clock). */
+    startedAt: number;
+    /** Epoch ms when the QR authorization expires (pending only). */
+    expiresAtMs?: number;
+    /** Feishu authorization URL (pending only). */
+    qrUrl?: string;
+    /** PNG data URL of the QR code (pending only; best-effort). */
+    qrDataUrl?: string;
+    /** Created app id (succeeded only, unmasked — it is not a secret). */
+    appId?: string;
+    /** Failure message (failed only). */
+    error?: string;
+}
+export declare const FEISHU_SETUP_BUSY = "\u5DF2\u6709\u8FDB\u884C\u4E2D\u7684\u626B\u7801\u4F1A\u8BDD\uFF0C\u8BF7\u5148\u53D6\u6D88\u6216\u7B49\u5F85\u5B8C\u6210";
+/** Render the QR as a PNG data URL (the qrcode package loads lazily). */
+export declare function renderFeishuQr(url: string): Promise<string>;
+export interface FeishuSetupManagerDeps {
+    runSetup?: typeof runFeishuSetup;
+    renderQr?: (url: string) => Promise<string>;
+    /** Clock override for tests. */
+    now?: () => number;
+    paths?: FeishuSetupPaths;
+}
+export interface FeishuSetupManager {
+    /** Start one scan flow; rejects when another flow is still pending. */
+    start(profile?: string, options?: {
+        resultMaxChars?: number;
+    }): Promise<FeishuSetupSnapshot>;
+    /** Current snapshot, or null when idle. */
+    status(): FeishuSetupSnapshot | null;
+    /** Abort the pending flow. Returns false when nothing was pending. */
+    cancel(): boolean;
+    dispose(): void;
+}
+export declare function createFeishuSetupManager(deps?: FeishuSetupManagerDeps): FeishuSetupManager;

package/lib/feishu-session.js

@@ -0,0 +1,94 @@
+/**
+ * Feishu QR-scan session manager for the web routes: one in-flight
+ * `registerApp` flow at a time, polled by the settings card. The start
+ * promise resolves as soon as the QR authorization is ready (so the UI can
+ * render the code immediately), while the scan wait and file writes finish
+ * in the background and surface through `status()`.
+ */
+import { runFeishuSetup } from './feishu.js';
+export const FEISHU_SETUP_BUSY = '已有进行中的扫码会话，请先取消或等待完成';
+/** Render the QR as a PNG data URL (the qrcode package loads lazily). */
+export async function renderFeishuQr(url) {
+    const { default: QRCode } = await import('qrcode');
+    return QRCode.toDataURL(url, { width: 320, margin: 1 });
+}
+export function createFeishuSetupManager(deps = {}) {
+    const runSetup = deps.runSetup ?? runFeishuSetup;
+    const renderQr = deps.renderQr ?? renderFeishuQr;
+    const now = deps.now ?? Date.now;
+    const paths = deps.paths;
+    let current = null;
+    let controller = null;
+    let cancelled = false;
+    async function start(profile = 'web', options = {}) {
+        if (current?.status === 'pending')
+            throw new Error(FEISHU_SETUP_BUSY);
+        cancelled = false;
+        const ac = new AbortController();
+        controller = ac;
+        const signal = ac.signal;
+        const startedAt = now();
+        const snapshot = { status: 'pending', startedAt };
+        current = snapshot;
+        let resolveReady;
+        const ready = new Promise((resolve) => {
+            resolveReady = resolve;
+        });
+        const task = (async () => {
+            try {
+                const result = await runSetup({
+                    profile,
+                    signal,
+                    paths,
+                    resultMaxChars: options.resultMaxChars,
+                    onQRCodeReady: async (qr) => {
+                        snapshot.qrUrl = qr.url;
+                        snapshot.expiresAtMs = startedAt + qr.expireIn * 1000;
+                        try {
+                            snapshot.qrDataUrl = await renderQr(qr.url);
+                        }
+                        catch {
+                            // QR 图像渲染失败不阻塞扫码：UI 回退为授权链接。
+                        }
+                        resolveReady({ ...snapshot });
+                    },
+                });
+                if (cancelled)
+                    return;
+                current = { status: 'succeeded', startedAt, appId: result.appId };
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                current = {
+                    status: 'failed',
+                    startedAt,
+                    error: error instanceof Error ? error.message : String(error),
+                };
+            }
+        })();
+        // Resolve when the QR is ready; if the flow settles first (no QR callback
+        // or an immediate failure), report the terminal snapshot instead.
+        const cancelledOutcome = { status: 'failed', startedAt, error: '已取消' };
+        return await Promise.race([
+            ready,
+            task.then(() => current ?? cancelledOutcome),
+        ]);
+    }
+    function status() {
+        return current;
+    }
+    function cancel() {
+        if (current?.status !== 'pending')
+            return false;
+        cancelled = true;
+        controller?.abort();
+        controller = null;
+        current = null;
+        return true;
+    }
+    function dispose() {
+        cancel();
+    }
+    return { start, status, cancel, dispose };
+}