dsh-life-pack 0.2.1 → 0.2.3

package/dist/client.js

@@ -134,11 +134,13 @@ window.__ModuleLoader__.load({
 		//#region src/update-contract.ts
 		/** 载体：宿主注册 `connection.fetch.register` 的路径 / 面板 `connection.rpc.call` 的两段参数。 */
 		const MANAGER_RPC = {
+			/** 载体基段（`connection.rpc.call` 的**第一段**参数）。传错第一段就是 404：真机上踩过一次。 */
+			base: "/api",
 			/** 单段通道名，须 match `/^\/[A-Za-z0-9._~-]+$/`（cookbook §6）。 */
 			channel: "/ilife-manager",
-			/** 面板侧第二段参数（等于注册路径去掉 `/api` 前缀后那一段）。 */
+			/** 面板侧第二段参数（等于通道名去掉前导斜杠那一段）。 */
 			endpoint: "ilife-manager",
-			/** 宿主侧注册的完整路径（`/api` 是 DSH 公开载体）。 */
+			/** 宿主侧注册的完整路径（＝ `base` ＋ `channel`）。 */
 			path: "/api/ilife-manager"
 		};
 		/** 总管自有电话名：更新包的三个动作名是冻结集合（`config.ts:14`），这里另起名字不撞车。 */
@@ -216,7 +218,7 @@ window.__ModuleLoader__.load({
 			if (typeof call !== "function") return failure("internal", { detail: "宿主连接缺席：connection.rpc.call 不可用" });
 			let result;
 			try {
-				result = await call(MANAGER_RPC.channel, MANAGER_RPC.endpoint, {
+				result = await call(MANAGER_RPC.base, MANAGER_RPC.endpoint, {
 					method,
 					payload
 				});
@@ -357,6 +359,15 @@ window.__ModuleLoader__.load({
 			if (installed === running) return "⚠️ 新版 " + installed + " 已装好，重启宿主后生效。";
 			return "⚠️ 新版 " + installed + " 已装好，正在跑的还是 " + running + "，重启宿主后生效。";
 		}
+		/** 面板展示的那条可复制命令（用户会照着敲的那一条）。
+		*
+		* 缺席包给人人都会用的**单命令双包**口径（#674 冻结的装入口径：不带版本号、不带任何开关）；
+		* 已装包给更新包回包里那条（`--save-exact ... --registry=` 是它 README 第 9 节的冻结合同，
+		* 本仓不动它——要改只能提上游）。规范词见 docs/plugins/plugin-manager/t678-缺席即装与检查更新.md。 */
+		function manualForDisplay(target, manual) {
+			if (isAbsent(target)) return dualInstallCmd(target.packageName);
+			return manual;
+		}
 		/** 版本行两行文字：插件包（本家） ＋ 技能包（随插件，不单独查更新）。 */
 		function versionLines(target, snapshot) {
 			const running = snapshot?.runningVersion ?? target.runningVersion ?? "unknown";
@@ -490,7 +501,7 @@ window.__ModuleLoader__.load({
 				marginTop: 4
 			}
 		};
-		const IDLE = {
+		const IDLE$1 = {
 			phase: "idle",
 			outcome: null,
 			failure: null
@@ -555,7 +566,7 @@ window.__ModuleLoader__.load({
 					targets
 				]),
 				act: react.useCallback((target) => {
-					const current = rows[target.key] ?? IDLE;
+					const current = rows[target.key] ?? IDLE$1;
 					patch(target.key, {
 						...current,
 						phase: "installing",
@@ -651,7 +662,7 @@ window.__ModuleLoader__.load({
 				const row = rows[target.key];
 				const snapshot = row.outcome?.snapshot ?? null;
 				const verdict = snapshot ? verdictOf(target, snapshot) : null;
-				const manual = row.failure?.manual ?? row.outcome?.manual ?? null;
+				const manual = manualForDisplay(target, row.failure?.manual ?? row.outcome?.manual ?? null);
 				const busy = row.phase === "installing";
 				return react.createElement("div", {
 					key: target.key,
@@ -678,7 +689,7 @@ window.__ModuleLoader__.load({
 			const target = props.target;
 			const row = target ? props.face.rows[target.key] : null;
 			const busy = row?.phase === "installing";
-			const manual = row?.failure?.manual ?? row?.outcome?.manual ?? props.fallbackCommand;
+			const manual = (target ? manualForDisplay(target, row?.failure?.manual ?? row?.outcome?.manual ?? null) : null) ?? props.fallbackCommand;
 			let reason = row?.failure?.message ?? null;
 			if (target && reason === null && row?.outcome && row.outcome.snapshot.blockedReason !== null) reason = verdictOf(target, row.outcome.snapshot).text;
 			return react.createElement("div", { style: PANEL_STYLE.reco }, react.createElement("div", null, target ? "未安装[" + target.packageName + "]，装上后这个页签就能用了。" : "这个页签对应的插件还没装。"), target ? react.createElement("button", {
@@ -696,6 +707,393 @@ window.__ModuleLoader__.load({
 			}, busy ? "正在装，请稍候…" : "装上") : null, reason ? react.createElement("div", { style: PANEL_STYLE.reason }, reason) : null, react.createElement("code", { style: PANEL_STYLE.cmd }, manual));
 		}
 		//#endregion
+		//#region src/health-contract.ts
+		/** 面板第二段参数（与各家的端点名同值，和各家的 `RPC_CHANNEL` 配成一次调用）。 */
+		const HEALTH_ENDPOINT = "config.check";
+		/** 三档排序：数字大的更严重（总览一行取**最严重**那档当那一家的灯）。 */
+		const RANK = {
+			green: 0,
+			yellow: 1,
+			red: 2
+		};
+		/** 一家的总判据：全部项里最严重的那一档；一条都没有时回 `null`（不冒充绿）。 */
+		function worstStatus(items) {
+			let worst = null;
+			for (const item of items) if (worst === null || RANK[item.status] > RANK[worst]) worst = item.status;
+			return worst;
+		}
+		/** 三档计数（面板那一行「红 N 黄 N」用的就是它）。 */
+		function countByStatus(items) {
+			const out = {
+				red: 0,
+				yellow: 0,
+				green: 0
+			};
+			for (const item of items) out[item.status] += 1;
+			return out;
+		}
+		/** 回执校验：面板只渲染自己认得的形状，认不出即报「回执异常」，不猜、不返空冒充正常。 */
+		function isHealthReport(raw) {
+			if (typeof raw !== "object" || raw === null) return false;
+			const report = raw;
+			if (typeof report.skill !== "string" || report.skill.length === 0) return false;
+			if (typeof report.configPath !== "string" || typeof report.dataDir !== "string") return false;
+			if (!Array.isArray(report.items)) return false;
+			return report.items.every((item) => {
+				if (typeof item !== "object" || item === null) return false;
+				const row = item;
+				return typeof row.id === "string" && typeof row.title === "string" && (row.status === "red" || row.status === "yellow" || row.status === "green") && typeof row.message === "string" && typeof row.action === "string";
+			});
+		}
+		//#endregion
+		//#region src/health-fetch.ts
+		/** 面板到各家的配置体检：一次取数、六份报告（纯异步函数：无 DOM、无 react；传输口注入，便于单测）。
+		*
+		* 三条纪律：
+		*   · **只走各家自己的通道**（`rpc.call(channel, HEALTH_ENDPOINT, …)`）——总管不认任何一家、也不加
+		*     任何单品的依赖；通道名从「爱生活页签槽」的账本条目带出来（各家注册时写进 options）。
+		*   · **一次取数，六份报告**：总览那行与各家那张表读的是同一份结果（见 `health-panel.ts` 的单一状态源），
+		*     不许两处各算一遍。
+		*   · 有界超时：一家不回不该拖死整屏（技能侧 spawn 上限 20 s，这里给 25 s）。
+		*/
+		/** 一次取数的时限（毫秒）：技能侧 spawn 上限 20 s，这里留一点余量。 */
+		const HEALTH_TIMEOUT_MS = 25e3;
+		function timeoutText() {
+			return "体检超时（" + String(Math.round(HEALTH_TIMEOUT_MS / 1e3)) + "s）：技能没在时限内回话。";
+		}
+		async function fetchOne(call, row) {
+			try {
+				const result = await call(row.channel, HEALTH_ENDPOINT, {}, AbortSignal.timeout(HEALTH_TIMEOUT_MS));
+				if (!result || typeof result !== "object" || typeof result.ok !== "boolean") return {
+					report: null,
+					error: "回执信封异常（非 ok 信封）。"
+				};
+				if (!result.ok) {
+					const error = result.error;
+					return {
+						report: null,
+						error: typeof error?.message === "string" && error.message.length > 0 ? error.message : "体检没跑起来。"
+					};
+				}
+				const value = result.value;
+				if (!isHealthReport(value)) return {
+					report: null,
+					error: "体检报告形状认不出（技能包与总管版本对不上？）。"
+				};
+				return {
+					report: value,
+					error: null
+				};
+			} catch (error) {
+				if (error instanceof Error && (error.name === "AbortError" || error.name === "TimeoutError")) return {
+					report: null,
+					error: timeoutText()
+				};
+				return {
+					report: null,
+					error: "体检没跑起来：" + (error instanceof Error ? error.message : String(error))
+				};
+			}
+		}
+		/** 取六家的体检报告（缺席的包不在此列，由调用方按账本判断）。 */
+		async function loadHealthReports(call, tabs) {
+			if (typeof call !== "function") return {
+				rows: [],
+				error: "宿主连接缺席：connection.rpc.call 不可用"
+			};
+			return {
+				rows: await Promise.all(tabs.map(async (tab) => {
+					const one = await fetchOne(call, tab);
+					return {
+						id: tab.id,
+						report: one.report,
+						error: one.error
+					};
+				})),
+				error: null
+			};
+		}
+		//#endregion
+		//#region src/health-panel.ts
+		/** 配置体检的状态源：**一份快照**喂两处（面板顶部那行总览 ＋ 各家页签那张表）。
+		*
+		* 为什么是一个 hook 而不是两处各取一次（票 #706 验收第三条「同一份数据，不许两处各算一遍」）：
+		* 这一处取数、这一处存状态，总览与各家表都从它读 —— 那条验收因此是**结构上的性质**，不是靠自觉。
+		*
+		* 取数是**按需**的（点「体检一次」才跑）：没有轮询、没有定时器（静态门那条「无数据轮询」照旧）。
+		*/
+		const IDLE = {
+			phase: "idle",
+			report: null,
+			error: null
+		};
+		/** 体检状态源：挂载时不自动跑（体检要读盘、要起子进程，按需跑），点一次跑六家。 */
+		function useHealthPanel(getCall, tabs) {
+			const [rows, setRows] = react.useState({});
+			const [error, setError] = react.useState(null);
+			const [running, setRunning] = react.useState(false);
+			const face = {
+				rows,
+				error,
+				running,
+				run: react.useCallback(() => {
+					const diag = globalThis.__T706_RUN__;
+					if (Array.isArray(diag)) diag.push("run:tabs=" + String(tabs.length));
+					setRunning(true);
+					setError(null);
+					const targets = tabs;
+					setRows(Object.fromEntries(targets.map((tab) => [tab.id, {
+						...IDLE,
+						phase: "running"
+					}])));
+					(async () => {
+						const loaded = await loadHealthReports(getCall(), targets);
+						try {
+							const diag = globalThis.__T706_RUN__;
+							if (Array.isArray(diag)) diag.push("rows=" + String(loaded.rows.length) + " err=" + String(loaded.error) + " first=" + String(loaded.rows[0]?.error ?? "null"));
+						} catch {}
+						const next = {};
+						for (const row of loaded.rows) next[row.id] = {
+							phase: row.report ? "ready" : "failed",
+							report: row.report,
+							error: row.error
+						};
+						setRows(next);
+						setError(loaded.error);
+						setRunning(false);
+					})();
+				}, [getCall, tabs])
+			};
+			const sink = globalThis.__T706_FACE_SINK__;
+			if (typeof sink === "function") try {
+				sink(face);
+			} catch {}
+			return face;
+		}
+		//#endregion
+		//#region src/health-view.ts
+		/** 配置体检的两个画法：面板顶部那行总览（六家一盏灯）＋ 各家那张表。
+		*
+		* 面板侧纪律（沿 `client.ts`／`update-panel.ts` 既有口径）：`createElement` 手写（禁 JSX）、内联 style、
+		* 颜色走 DSH 主题别名（深浅主题自适应，写死值只做回退）、不 import 任何单品包、不 import 技能实现。
+		*
+		* 判据与文案**全部来自各家技能的报告**，本件一个字都不重写——只按三档上色、按状态挑文案。
+		*/
+		/** 三档的配色（绿走主题别名；红黄用实色，理由见下）。
+		*
+		* 红与黄为什么必须落在**不同明度带**上：这两档要一起出现在同一行灯里，用户扫一眼要能分开
+		* 「红了（用不了）」与「黄了（能用但要撞上）」。评审连着两轮点「黄灯偏暗与红相近」，所以：
+		*   · 红＝深红（暗、重）；
+		*   · 黄＝高饱和的琥珀（亮、跳）——它在白底上的对比度仍然够（`#b45309` 对白 ≈ 4.9:1）。
+		* 绿不给底色：它是「正常」，不该和要处理的那两档抢注意力。 */
+		const STATUS_COLOR = {
+			red: "#c0392b",
+			yellow: "#e08a00",
+			green: "var(--dsw-alias-state-success-primary, #4ec9a0)"
+		};
+		/** 整行底色的浅一档：饱和降一档，免得红黄行「刺眼」压过正文（评审第二轮的扣分点）。 */
+		const STATUS_TINT = {
+			red: "rgba(192, 57, 43, 0.08)",
+			yellow: "rgba(224, 138, 0, 0.14)",
+			green: "transparent"
+		};
+		/** 档位词（灯里那几个字）用的色：红黄要**够深**才读得清，故另取一枚比灯更深的值。 */
+		const STATUS_TEXT = {
+			red: "#a5281b",
+			yellow: "#8a5200",
+			green: "var(--dsw-alias-state-success-primary, #4ec9a0)"
+		};
+		const STATUS_LABEL = {
+			red: "红",
+			yellow: "黄",
+			green: "绿"
+		};
+		/** 面板上的文字色与分隔线（与 `client.ts` 同一套别名）。 */
+		const INK = "var(--dsw-alias-label-primary, inherit)";
+		const INK_DIM = "var(--dsw-alias-label-secondary, #9a9a9a)";
+		const BORDER = "var(--dsw-alias-border, rgba(128,128,128,.35))";
+		const HEALTH_STYLE = {
+			box: {
+				padding: "10px 12px",
+				marginBottom: 10,
+				borderRadius: 10,
+				border: "1px solid " + BORDER
+			},
+			headRow: {
+				display: "flex",
+				flexWrap: "wrap",
+				alignItems: "center",
+				gap: 8,
+				marginBottom: 6
+			},
+			head: {
+				fontSize: 13,
+				fontWeight: 700,
+				color: INK
+			},
+			btn: {
+				marginLeft: "auto",
+				border: "1px solid " + BORDER,
+				background: "transparent",
+				color: INK,
+				borderRadius: 8,
+				padding: "3px 10px",
+				fontSize: 12.5,
+				cursor: "pointer"
+			},
+			lightsRow: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 8
+			},
+			light: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 4,
+				background: "transparent",
+				border: "1px solid " + BORDER,
+				borderRadius: 999,
+				padding: "3px 10px",
+				fontSize: 12.5,
+				color: INK,
+				cursor: "pointer"
+			},
+			lightIdle: {
+				cursor: "default",
+				color: INK_DIM
+			},
+			meta: {
+				color: INK_DIM,
+				fontSize: 12,
+				lineHeight: 1.7,
+				marginTop: 12
+			},
+			error: {
+				color: STATUS_COLOR.red,
+				fontSize: 12,
+				lineHeight: 1.7,
+				marginTop: 6
+			}
+		};
+		/** 值得一眼看见的那两档（档位名与整行文字都上色；绿行保持淡）。 */
+		function isAttention(status) {
+			return status === "red" || status === "yellow";
+		}
+		/** 「去哪修」那一行的正文：各家交回来的 action 里若已自带「去哪修：」，这里剥掉一层——
+		*  面板已经带了这个前缀，两边都写就会印成「去哪修：去哪修：…」。只剥开头那一次，别的一字不动。 */
+		function actionText(action) {
+			const trimmed = action.trim();
+			return trimmed.startsWith("去哪修：") ? trimmed.slice(4).trim() : trimmed;
+		}
+		/** 从六份报告数出那一行的灯（每家按最严重那一档上色）。 */
+		function lightsOf(tabs, reports) {
+			return tabs.map((tab) => {
+				const report = reports[tab.id];
+				return {
+					id: tab.id,
+					title: tab.title,
+					status: report ? worstStatus(report.items) : null,
+					counts: countByStatus(report?.items ?? [])
+				};
+			});
+		}
+		/** 一家的一句话读数：「红 1 黄 2」，全绿就是「绿」。 */
+		function countsText(counts) {
+			const parts = [];
+			if (counts.red > 0) parts.push("红 " + String(counts.red));
+			if (counts.yellow > 0) parts.push("黄 " + String(counts.yellow));
+			if (parts.length === 0) return "绿";
+			return parts.join(" · ");
+		}
+		/** 顶部那行总览：六家一盏灯 ＋ 一个「体检一次」按钮。 */
+		function HealthOverview(props) {
+			return react.createElement("div", {
+				style: HEALTH_STYLE.box,
+				"data-ilife-health": "overview"
+			}, react.createElement("div", { style: HEALTH_STYLE.headRow }, react.createElement("div", { style: HEALTH_STYLE.head }, "配置体检"), react.createElement("button", {
+				type: "button",
+				style: props.running ? {
+					...HEALTH_STYLE.btn,
+					opacity: .55,
+					cursor: "default"
+				} : HEALTH_STYLE.btn,
+				disabled: props.running,
+				onClick: props.onRun,
+				title: "对六家各跑一次配置体检（只看不改：不建目录、不改配置）"
+			}, props.running ? "体检中…" : "体检一次")), react.createElement("div", {
+				style: HEALTH_STYLE.lightsRow,
+				"data-ilife-health": "lights"
+			}, props.lights.map((light) => react.createElement("button", {
+				key: light.id,
+				type: "button",
+				"data-ilife-health": "light",
+				"data-skill": light.id,
+				style: light.status === null ? {
+					...HEALTH_STYLE.light,
+					...HEALTH_STYLE.lightIdle
+				} : {
+					...HEALTH_STYLE.light,
+					borderColor: STATUS_COLOR[light.status],
+					borderWidth: 1.5,
+					background: STATUS_TINT[light.status]
+				},
+				disabled: light.status === null,
+				onClick: () => props.onJump(light.id),
+				title: light.status === null ? "还没体检（或这一家没装）" : light.title + "：" + countsText(light.counts)
+			}, react.createElement("span", { style: {
+				width: 10,
+				height: 10,
+				borderRadius: "50%",
+				background: light.status === null ? INK_DIM : STATUS_COLOR[light.status],
+				display: "inline-block"
+			} }), react.createElement("span", { style: {
+				color: INK,
+				fontWeight: 650
+			} }, light.title), react.createElement("span", { style: {
+				color: light.status === null ? INK_DIM : STATUS_TEXT[light.status],
+				fontWeight: 700
+			} }, light.status === null ? "—" : countsText(light.counts))))), react.createElement("div", { style: HEALTH_STYLE.meta }, props.error !== null ? props.error : "只看不改 · 灯＝那一家最严重的一档 · 点一下跳到那家配置页"));
+		}
+		/** 一家那张表：每条一行，正常的也都在（绿行字淡一点）。 */
+		function HealthTable(props) {
+			const { report } = props;
+			return react.createElement("div", {
+				style: HEALTH_STYLE.box,
+				"data-ilife-health": "table"
+			}, react.createElement("div", { style: HEALTH_STYLE.headRow }, react.createElement("div", { style: HEALTH_STYLE.head }, props.title + " · 体检"), report ? react.createElement("div", { style: {
+				color: INK_DIM,
+				fontSize: 12
+			} }, countsText(countByStatus(report.items))) : null), props.phase === "idle" ? react.createElement("div", { style: HEALTH_STYLE.meta }, "还没体检：点上面那个「体检一次」。") : null, props.phase === "running" ? react.createElement("div", { style: HEALTH_STYLE.meta }, "正在体检…") : null, props.error !== null ? react.createElement("div", { style: HEALTH_STYLE.error }, props.error) : null, report ? react.createElement("div", null, react.createElement("div", { style: HEALTH_STYLE.meta }, "配置文件 " + report.configPath + " · 数据目录 " + report.dataDir), report.items.map((item) => react.createElement("div", {
+				key: item.id,
+				style: {
+					padding: "7px 8px",
+					margin: "2px 0",
+					borderTop: "1px solid " + BORDER,
+					borderRadius: 6,
+					fontSize: 12.5,
+					lineHeight: 1.7,
+					background: isAttention(item.status) ? "color-mix(in srgb, " + STATUS_COLOR[item.status] + " 14%, transparent)" : "transparent"
+				}
+			}, react.createElement("div", { style: {
+				display: "flex",
+				flexWrap: "wrap",
+				alignItems: "center",
+				gap: 6
+			} }, react.createElement("span", { style: {
+				width: 8,
+				height: 8,
+				borderRadius: "50%",
+				display: "inline-block",
+				background: STATUS_COLOR[item.status]
+			} }), react.createElement("span", { style: {
+				fontWeight: 650,
+				color: INK
+			} }, item.title), react.createElement("span", { style: {
+				color: isAttention(item.status) ? STATUS_TEXT[item.status] : INK_DIM,
+				fontWeight: 700
+			} }, STATUS_LABEL[item.status]), item.source ? react.createElement("span", { style: { color: INK_DIM } }, "· 来自" + item.source) : null), react.createElement("div", { style: { color: isAttention(item.status) ? INK : INK_DIM } }, item.message), item.action.length > 0 ? react.createElement("div", { style: { color: INK_DIM } }, "去哪修：" + actionText(item.action)) : null))) : null);
+		}
+		//#endregion
 		//#region src/client.ts
 		/** dsh-life-pack client 适配器（六边形：browser 侧；爱生活单卡方案）。
 		*
@@ -902,6 +1300,10 @@ window.__ModuleLoader__.load({
 			const rows = props.useTabs((value) => value);
 			const present = new Set(rows.map((r) => r.id));
 			const face = useUpdateRows(props.getCall);
+			const health = useHealthPanel(() => props.getCall(), react.useMemo(() => rows.filter((row) => row.channel.length > 0).map((row) => ({
+				id: row.id,
+				channel: row.channel
+			})), [rows]));
 			const [activeId, setActiveId] = react.useState(void 0);
 			const [visitedIds, setVisitedIds] = react.useState(() => /* @__PURE__ */ new Set());
 			const active = MANAGER_TABS.some((t) => t.plugin === activeId) ? activeId : MANAGER_TABS[0].plugin;
@@ -915,6 +1317,13 @@ window.__ModuleLoader__.load({
 				const row = rows.find((r) => r.id === tab.plugin);
 				return row && row.label.length > 0 ? row.label : tab.title;
 			}
+			/** 按包名取页签标题（总览那行按账本行过，账本里没有的退到导航表的标题）。 */
+			function labelForTab(id) {
+				const row = rows.find((r) => r.id === id);
+				if (row && row.label.length > 0) return row.label;
+				const tab = MANAGER_TABS.find((t) => t.plugin === id);
+				return tab ? tab.title : id;
+			}
 			function targetForTab(tab) {
 				return face.targets.find((t) => t.packageName === tab.plugin) ?? null;
 			}
@@ -940,7 +1349,16 @@ window.__ModuleLoader__.load({
 				setActiveId(next.plugin);
 				tabRefs.current[nextIndex]?.focus();
 			}
-			return react.createElement("div", null, react.createElement("div", { style: S.headRow }, react.createElement("div", { style: S.head }, "爱生活"), react.createElement("div", { style: S.headActions }, react.createElement(CheckUpdateButton, { face }), react.createElement(PanelActions, null))), react.createElement("div", { style: S.meta }, react.createElement("div", null, "总开关 · 开关（缺省启用，只读）"), react.createElement("div", null, "总管 dsh-life-pack · 0.2.1")), react.createElement(UpdateResults, { face }), react.createElement("div", {
+			return react.createElement("div", null, react.createElement("div", { style: S.headRow }, react.createElement("div", { style: S.head }, "爱生活"), react.createElement("div", { style: S.headActions }, react.createElement(CheckUpdateButton, { face }), react.createElement(PanelActions, null))), react.createElement("div", { style: S.meta }, react.createElement("div", null, "总开关 · 开关（缺省启用，只读）"), react.createElement("div", null, "总管 dsh-life-pack · 0.2.3")), react.createElement(UpdateResults, { face }), react.createElement(HealthOverview, {
+				lights: lightsOf(rows.map((row) => ({
+					id: row.id,
+					title: labelForTab(row.id)
+				})), Object.fromEntries(Object.entries(health.rows).map(([id, row]) => [id, row.report ?? void 0]))),
+				running: health.running,
+				error: health.error,
+				onRun: health.run,
+				onJump: setActiveId
+			}), react.createElement("div", {
 				role: "tablist",
 				"aria-label": "爱生活技能页签",
 				style: S.tablist
@@ -976,7 +1394,12 @@ window.__ModuleLoader__.load({
 					role: "tabpanel",
 					"aria-labelledby": tabsId + "-tab-" + tab.plugin,
 					hidden: !selected
-				}, present.has(tab.plugin) ? props.renderSlot(CONFIG_TAB_SLOT, {}, { only: tab.plugin }) : react.createElement(AbsentCard, {
+				}, present.has(tab.plugin) ? react.createElement("div", null, props.renderSlot(CONFIG_TAB_SLOT, {}, { only: tab.plugin }), react.createElement(HealthTable, {
+					title: labelFor(tab),
+					phase: health.rows[tab.plugin]?.phase ?? "idle",
+					report: health.rows[tab.plugin]?.report ?? null,
+					error: health.rows[tab.plugin]?.error ?? null
+				})) : react.createElement(AbsentCard, {
 					target: targetForTab(tab),
 					fallbackCommand: recoFor(tab).installCmd,
 					face
@@ -995,7 +1418,8 @@ window.__ModuleLoader__.load({
 						tabs = ctx.slots.entries(CONFIG_TAB_SLOT).map((entry) => ({
 							id: entry.options.id ?? "",
 							order: entry.options.order ?? 0,
-							label: resolveLabel(entry.options.label)
+							label: resolveLabel(entry.options.label),
+							channel: entry.options.channel ?? ""
 						})).sort((a, b) => a.order - b.order);
 					}
 					return tabs;