@lmzhen/dsh-evolution-settings-ui 0.27.1 → 0.27.2

package/README.md

@@ -63,6 +63,13 @@ escaping as an unhandled rejection. `settle.ts` holds that one verdict function
 uses; an unavailable preview prints the host's reason. A late answer for a row the reader already left is
 dropped rather than painted under another row's heading.
 
+## The diagnostics card
+
+One card in the same section is the read-only **self-check** (`data-card="diagnostics"`): it renders the Host's one `DiagnosticsView` — the same object the CLI and `/api/dsh-evolution/diagnostics` answer — and owns no key list and no status vocabulary.
+
+It leads with a plain-language verdict derived from the frozen runtime statuses (`运行正常` / `{n} 项需要注意` / `{n} 项异常` / `{n} 项待确认`, decided fail > warn > unknown > ok), then groups the view as **环境信息** (fact label above value) and **运行状态** (status dot and word, detail line, remedy line). The raw material — view schema, check time and each fact's source home — sits behind one **技术详情** disclosure, so the default reading path carries no identifiers.
+
+The card is collapsible with the same `.evolution-param-head` button and body inset as the parameter cards; Refresh is an explicit control in the body (one read on mount, one per click), and a failed read renders the shared failure block with the `/evolution doctor` command fallback.
 ## A seat that arrives late revives the card
 
 The seat is probed lazily (never captured at apply time), but probing alone only answers the NEXT read —

package/lib/client.js

@@ -1073,8 +1073,11 @@ window.__ModuleLoader__.load({
 		* `/api/dsh-evolution/diagnostics` route answer.
 		*
 		* Read-only by construction: it fetches once on mount and only refetches on an explicit Refresh; a
-		* failed read renders the shared FailureBlock with the command-face fallback. Facts and runtime rows
-		* are rendered in the view's own order — the client owns no key list and no status vocabulary.
+		* failed read renders the shared FailureBlock with the command-face fallback. The client still owns
+		* no key list and no status vocabulary: it renders the host view's own order, groups the two
+		* sections the view carries (environment facts / runtime rows) and gives a plain-language summary
+		* from the frozen status set. Raw identifiers, source paths and the view schema live behind the
+		* one `技术详情` disclosure, not in the main reading path.
 		* @module @lmzhen/dsh-evolution-settings-ui/client/DiagnosticsCard
 		*/
 		/** Which word one status gets (the frozen W1 status set). */
@@ -1084,6 +1087,41 @@ window.__ModuleLoader__.load({
 			fail: "diagStatusFail",
 			unknown: "diagStatusUnknown"
 		});
+		/** The summary word for a badge status (the same frozen set; ok has no count). */
+		const SUMMARY_KEYS = Object.freeze({
+			ok: "diagSummaryOk",
+			warn: "diagSummaryWarn",
+			fail: "diagSummaryFail",
+			unknown: "diagSummaryUnknown"
+		});
+		/** The one status the card leads with: fail > warn > unknown > ok. */
+		function summaryOf(rows) {
+			const count = (status) => rows.filter((row) => row.status === status).length;
+			for (const status of [
+				"fail",
+				"warn",
+				"unknown"
+			]) {
+				const n = count(status);
+				if (n > 0) return {
+					status,
+					count: n
+				};
+			}
+			return {
+				status: "ok",
+				count: 0
+			};
+		}
+		/** A locally formatted check time; an unparseable stamp stays visible instead of becoming NaN. */
+		function checkedAt(iso) {
+			try {
+				const at = new Date(iso);
+				return Number.isNaN(at.getTime()) ? iso : at.toLocaleString();
+			} catch {
+				return iso;
+			}
+		}
 		/**
 		* Render the card.
 		* @param props - the copy seat, the host call and the command fallback.
@@ -1093,6 +1131,7 @@ window.__ModuleLoader__.load({
 			const { t, api } = props;
 			const translate = (key, values) => t(key, values);
 			const [state, setState] = (0, react.useState)({ phase: "loading" });
+			const [open, setOpen] = (0, react.useState)(true);
 			const ticket = (0, react.useRef)(0);
 			const read = (keepView) => {
 				const current = ticket.current + 1;
@@ -1115,12 +1154,33 @@ window.__ModuleLoader__.load({
 			const refresh = () => {
 				read(true);
 			};
-			const header = (0, react.createElement)("div", { className: "evolution-param-card-head" }, (0, react.createElement)("span", { className: "evolution-param-card-title" }, t("diagTitle")), (0, react.createElement)("button", {
+			const summary = state.phase === "ready" ? summaryOf(state.view.runtime) : void 0;
+			const header = (0, react.createElement)("button", {
 				type: "button",
-				className: "evolution-param-button",
-				onClick: refresh,
-				"data-action": "diag-refresh"
-			}, state.phase === "loading" ? t("diagRefreshing") : t("diagRefresh")));
+				className: "evolution-param-head",
+				"aria-expanded": open ? "true" : "false",
+				onClick: () => {
+					setOpen(!open);
+				}
+			}, (0, react.createElement)("span", { className: "evolution-param-card-title" }, t("diagTitle")), summary === void 0 ? null : (0, react.createElement)("span", {
+				className: "evo-diag-badge",
+				"data-status": summary.status
+			}, t(SUMMARY_KEYS[summary.status], summary.count === 0 ? void 0 : { n: summary.count })), (0, react.createElement)("span", { className: "evolution-param-chevron" }, open ? "▲" : "▼"));
+			const facts = (view) => view.facts.length === 0 ? null : (0, react.createElement)("div", {}, (0, react.createElement)("h3", { className: "evolution-param-group" }, t("diagFactsTitle")), (0, react.createElement)("div", { className: "evo-diag-list" }, ...view.facts.map((fact) => (0, react.createElement)("div", {
+				key: "fact-" + fact.key,
+				className: "evo-diag-item",
+				"data-kind": "fact"
+			}, (0, react.createElement)("span", { className: "evo-diag-label" }, fact.label), (0, react.createElement)("span", { className: "evo-diag-value" }, fact.value)))));
+			const runtime = (view) => view.runtime.length === 0 ? null : (0, react.createElement)("div", {}, (0, react.createElement)("h3", { className: "evolution-param-group" }, t("diagRuntimeTitle")), (0, react.createElement)("div", { className: "evo-diag-list" }, ...view.runtime.map((row) => (0, react.createElement)("div", {
+				key: "runtime-" + row.key,
+				className: "evo-diag-item",
+				"data-kind": "runtime",
+				"data-status": row.status
+			}, (0, react.createElement)("div", { className: "evo-diag-row-head" }, (0, react.createElement)("span", { className: "evo-diag-dot" }), (0, react.createElement)("span", { className: "evo-diag-label" }, row.label), (0, react.createElement)("span", { className: "evo-diag-status" }, t(STATUS_KEYS[row.status]))), row.detail === void 0 ? null : (0, react.createElement)("span", { className: "evo-diag-detail" }, row.detail), row.remedy === void 0 ? null : (0, react.createElement)("span", { className: "evo-diag-remedy" }, t("diagRemedy") + row.remedy)))));
+			const details = (view) => (0, react.createElement)("details", { className: "evo-diag-meta" }, (0, react.createElement)("summary", {}, t("diagDetails")), (0, react.createElement)("div", { className: "evo-diag-meta-body" }, (0, react.createElement)("span", {}, t("diagCheckedAt", { at: checkedAt(view.generatedAt) })), (0, react.createElement)("span", {}, t("diagSchema", { n: view.schemaVersion })), view.facts.length === 0 ? null : (0, react.createElement)("span", { className: "evo-diag-sources-title" }, t("diagSourcesTitle")), ...view.facts.map((fact) => (0, react.createElement)("span", {
+				key: "source-" + fact.key,
+				className: "evo-diag-source"
+			}, (0, react.createElement)("span", { className: "evo-diag-source-label" }, fact.label), (0, react.createElement)("span", { className: "evo-diag-source-home" }, fact.home)))));
 			const body = () => {
 				if (state.phase === "loading") return (0, react.createElement)("p", { className: "evolution-param-loading" }, t("stateLoading"));
 				if (state.phase === "failed") return FailureBlock({
@@ -1129,23 +1189,17 @@ window.__ModuleLoader__.load({
 					fallback: props.fallback
 				});
 				const view = state.view;
-				const factRows = view.facts.map((fact) => (0, react.createElement)("div", {
-					key: "fact-" + fact.key,
-					className: "evo-diag-row",
-					"data-kind": "fact"
-				}, (0, react.createElement)("span", { className: "evo-diag-key" }, fact.label), (0, react.createElement)("span", { className: "evo-diag-value" }, fact.value), (0, react.createElement)("span", { className: "evo-diag-home" }, t("diagHomeCite", { home: fact.home }))));
-				const runtimeRows = view.runtime.map((row) => (0, react.createElement)("div", {
-					key: "runtime-" + row.key,
-					className: "evo-diag-row",
-					"data-kind": "runtime",
-					"data-status": row.status
-				}, (0, react.createElement)("span", { className: "evo-diag-key" }, row.label), (0, react.createElement)("span", { className: "evo-diag-status" }, t(STATUS_KEYS[row.status])), row.detail === void 0 ? null : (0, react.createElement)("span", { className: "evo-diag-detail" }, row.detail), row.remedy === void 0 ? null : (0, react.createElement)("span", { className: "evo-diag-remedy" }, t("diagRemedy") + row.remedy)));
-				return (0, react.createElement)("div", { className: "evo-diag-body" }, (0, react.createElement)("p", { className: "evolution-params-subtitle" }, t("diagSubtitle")), (0, react.createElement)("p", { className: "evo-diag-meta" }, t("diagSchema", { n: view.schemaVersion }) + " · " + t("diagGeneratedAt", { at: view.generatedAt })), (0, react.createElement)("h3", { className: "evo-diag-section" }, t("diagFactsTitle")), ...factRows, (0, react.createElement)("h3", { className: "evo-diag-section" }, t("diagRuntimeTitle")), ...runtimeRows);
+				return (0, react.createElement)("div", {}, (0, react.createElement)("p", { className: "evolution-param-note" }, t("diagSubtitle")), (0, react.createElement)("div", { className: "evolution-param-actions" }, (0, react.createElement)("button", {
+					type: "button",
+					className: "evolution-param-button",
+					onClick: refresh,
+					"data-action": "diag-refresh"
+				}, t("diagRefresh"))), facts(view), runtime(view), details(view));
 			};
-			return (0, react.createElement)("div", {
+			return (0, react.createElement)("section", {
 				className: "evolution-param-card",
 				"data-card": "diagnostics"
-			}, header, body());
+			}, header, open ? (0, react.createElement)("div", { className: "evolution-param-body" }, body()) : null);
 		}
 		//#endregion
 		//#region src/client/diagnostics-state.ts
@@ -1256,19 +1310,24 @@ window.__ModuleLoader__.load({
 			approvalDiffRemoved: "{n} 行删除",
 			approvalDiffCut: "改动区域已截断",
 			diagTitle: "诊断",
-			diagSubtitle: "安装形态、平台线与运行面的当前读数；只读，不改任何东西。",
-			diagFactsTitle: "事实",
-			diagRuntimeTitle: "运行时",
-			diagSchema: "视图 schema v{n}",
-			diagGeneratedAt: "生成于 {at}",
+			diagSubtitle: "安装、兼容与运行状态的只读自查；不会改动任何东西。",
+			diagFactsTitle: "环境信息",
+			diagRuntimeTitle: "运行状态",
+			diagSummaryOk: "运行正常",
+			diagSummaryWarn: "{n} 项需要注意",
+			diagSummaryFail: "{n} 项异常",
+			diagSummaryUnknown: "{n} 项待确认",
 			diagRefresh: "刷新",
 			diagRefreshing: "刷新中…",
 			diagStatusOk: "正常",
 			diagStatusWarn: "注意",
 			diagStatusFail: "异常",
 			diagStatusUnknown: "未知",
-			diagRemedy: "下一步：",
-			diagHomeCite: "出处：{home}",
+			diagRemedy: "建议：",
+			diagDetails: "技术详情",
+			diagCheckedAt: "检查时间：{at}",
+			diagSchema: "数据版本 v{n}",
+			diagSourcesTitle: "数据来源",
 			stateLoading: "正在读取…",
 			failureUnauthorized: "需要登录：重新打开这个页面完成登录后再试。",
 			failureForbidden: "平台拒绝了这个请求（身份不是 owner）。",
@@ -1338,19 +1397,24 @@ window.__ModuleLoader__.load({
 			approvalDiffRemoved: "{n} lines removed",
 			approvalDiffCut: "the changed region is truncated",
 			diagTitle: "Diagnostics",
-			diagSubtitle: "Current readings for the install form, platform line and runtime surfaces; read-only.",
-			diagFactsTitle: "Facts",
-			diagRuntimeTitle: "Runtime",
-			diagSchema: "view schema v{n}",
-			diagGeneratedAt: "generated at {at}",
+			diagSubtitle: "A read-only check of the install, compatibility and runtime state; nothing here changes anything.",
+			diagFactsTitle: "Environment",
+			diagRuntimeTitle: "Runtime status",
+			diagSummaryOk: "All healthy",
+			diagSummaryWarn: "{n} need attention",
+			diagSummaryFail: "{n} failing",
+			diagSummaryUnknown: "{n} unconfirmed",
 			diagRefresh: "Refresh",
 			diagRefreshing: "refreshing…",
-			diagStatusOk: "ok",
-			diagStatusWarn: "warn",
-			diagStatusFail: "fail",
+			diagStatusOk: "healthy",
+			diagStatusWarn: "needs attention",
+			diagStatusFail: "failing",
 			diagStatusUnknown: "unknown",
-			diagRemedy: "Next: ",
-			diagHomeCite: "source: {home}",
+			diagRemedy: "Suggested: ",
+			diagDetails: "Technical details",
+			diagCheckedAt: "Checked: {at}",
+			diagSchema: "data version v{n}",
+			diagSourcesTitle: "Data sources",
 			stateLoading: "reading…",
 			failureUnauthorized: "Sign-in is required: reopen this page and sign in, then retry.",
 			failureForbidden: "The platform refused this request (not the owner principal).",
@@ -2119,7 +2183,34 @@ window.__ModuleLoader__.load({
 			".evolution-param-fact+.evolution-param-fact::before{content:\"·\";margin:0 var(--evo-space-6);color:var(--dsw-alias-label-tertiary)}",
 			".evolution-param-diff{margin:0;padding:var(--evo-space-12) var(--evo-space-16);max-height:var(--evo-cap-block);overflow:auto;border:var(--evo-hairline-width) solid var(--dsw-alias-border-l1);border-radius:var(--evo-radius-surface);background:var(--dsw-alias-markdown-code-block);color:var(--dsw-alias-label-primary);font:var(--dsw-font-markdown-code-block-small);white-space:pre-wrap}",
 			".evolution-param-line-add{color:var(--evo-tone-success)}",
-			".evolution-param-line-del{color:var(--evo-tone-danger)}"
+			".evolution-param-line-del{color:var(--evo-tone-danger)}",
+			".evolution-param-loading{margin:var(--evo-space-12) 0 0;color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
+			".evo-diag-badge{display:inline-flex;align-items:center;height:var(--evo-space-20);padding:0 var(--evo-space-8);border-radius:var(--evo-radius-chip);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-secondary);font-size:var(--evo-type-xs);line-height:var(--evo-space-20);flex:none}",
+			".evo-diag-badge[data-status=\"ok\"]{color:var(--dsw-alias-state-success-primary)}",
+			".evo-diag-badge[data-status=\"warn\"]{color:var(--dsw-alias-state-warn-primary)}",
+			".evo-diag-badge[data-status=\"fail\"]{color:var(--dsw-alias-state-error-primary)}",
+			".evo-diag-badge[data-status=\"unknown\"]{color:var(--dsw-alias-state-idle-primary)}",
+			".evo-diag-list{display:flex;flex-direction:column}",
+			".evo-diag-item{padding:var(--evo-space-12) 0}",
+			".evo-diag-item+.evo-diag-item{border-top:var(--evo-hairline-width) solid var(--dsw-alias-border-l2)}",
+			".evo-diag-label{display:block;color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
+			".evo-diag-value{display:block;margin:var(--evo-space-2) 0 0;color:var(--dsw-alias-label-primary);font-size:var(--evo-type-sm);line-height:var(--evo-leading-base);overflow-wrap:anywhere}",
+			".evo-diag-row-head{display:flex;align-items:baseline;gap:var(--evo-space-6);flex-wrap:wrap}",
+			".evo-diag-dot{width:var(--evo-space-6);height:var(--evo-space-6);border-radius:var(--evo-radius-pill);background:var(--evo-diag-tone,var(--dsw-alias-state-idle-primary));flex:none}",
+			".evo-diag-status{color:var(--evo-diag-tone,var(--dsw-alias-state-idle-primary));font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
+			".evo-diag-item[data-status=\"ok\"]{--evo-diag-tone:var(--dsw-alias-state-success-primary)}",
+			".evo-diag-item[data-status=\"warn\"]{--evo-diag-tone:var(--dsw-alias-state-warn-primary)}",
+			".evo-diag-item[data-status=\"fail\"]{--evo-diag-tone:var(--dsw-alias-state-error-primary)}",
+			".evo-diag-item[data-status=\"unknown\"]{--evo-diag-tone:var(--dsw-alias-state-idle-primary)}",
+			".evo-diag-detail{display:block;margin:var(--evo-space-2) 0 0;color:var(--dsw-alias-label-secondary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base);overflow-wrap:anywhere}",
+			".evo-diag-remedy{display:block;margin:var(--evo-space-4) 0 0;color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
+			".evo-diag-meta{margin:var(--evo-space-12) 0 0;padding-top:var(--evo-space-8);border-top:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
+			".evo-diag-meta>summary{cursor:pointer;user-select:none;padding:var(--evo-space-4) 0}",
+			".evo-diag-meta-body{display:flex;flex-direction:column;gap:var(--evo-space-2);padding:var(--evo-space-4) 0 0}",
+			".evo-diag-sources-title{padding-top:var(--evo-space-6)}",
+			".evo-diag-source{display:flex;justify-content:space-between;gap:var(--evo-space-8);overflow-wrap:anywhere}",
+			".evo-diag-source-label{flex:none}",
+			".evo-diag-source-home{text-align:right;overflow-wrap:anywhere}"
 		].join("\n");
 		/**
 		* Inject the stylesheet once per document.

package/lib/types/client/DiagnosticsCard.d.ts

@@ -3,8 +3,11 @@
  * `/api/dsh-evolution/diagnostics` route answer.
  *
  * Read-only by construction: it fetches once on mount and only refetches on an explicit Refresh; a
- * failed read renders the shared FailureBlock with the command-face fallback. Facts and runtime rows
- * are rendered in the view's own order — the client owns no key list and no status vocabulary.
+ * failed read renders the shared FailureBlock with the command-face fallback. The client still owns
+ * no key list and no status vocabulary: it renders the host view's own order, groups the two
+ * sections the view carries (environment facts / runtime rows) and gives a plain-language summary
+ * from the frozen status set. Raw identifiers, source paths and the view schema live behind the
+ * one `技术详情` disclosure, not in the main reading path.
  * @module @lmzhen/dsh-evolution-settings-ui/client/DiagnosticsCard
  */
 import { type ReactNode } from 'react';

package/lib/types/client/messages.d.ts

@@ -72,19 +72,24 @@ export declare const zh: {
     readonly approvalDiffRemoved: "{n} 行删除";
     readonly approvalDiffCut: "改动区域已截断";
     readonly diagTitle: "诊断";
-    readonly diagSubtitle: "安装形态、平台线与运行面的当前读数；只读，不改任何东西。";
-    readonly diagFactsTitle: "事实";
-    readonly diagRuntimeTitle: "运行时";
-    readonly diagSchema: "视图 schema v{n}";
-    readonly diagGeneratedAt: "生成于 {at}";
+    readonly diagSubtitle: "安装、兼容与运行状态的只读自查；不会改动任何东西。";
+    readonly diagFactsTitle: "环境信息";
+    readonly diagRuntimeTitle: "运行状态";
+    readonly diagSummaryOk: "运行正常";
+    readonly diagSummaryWarn: "{n} 项需要注意";
+    readonly diagSummaryFail: "{n} 项异常";
+    readonly diagSummaryUnknown: "{n} 项待确认";
     readonly diagRefresh: "刷新";
     readonly diagRefreshing: "刷新中…";
     readonly diagStatusOk: "正常";
     readonly diagStatusWarn: "注意";
     readonly diagStatusFail: "异常";
     readonly diagStatusUnknown: "未知";
-    readonly diagRemedy: "下一步：";
-    readonly diagHomeCite: "出处：{home}";
+    readonly diagRemedy: "建议：";
+    readonly diagDetails: "技术详情";
+    readonly diagCheckedAt: "检查时间：{at}";
+    readonly diagSchema: "数据版本 v{n}";
+    readonly diagSourcesTitle: "数据来源";
     readonly stateLoading: "正在读取…";
     readonly failureUnauthorized: "需要登录：重新打开这个页面完成登录后再试。";
     readonly failureForbidden: "平台拒绝了这个请求（身份不是 owner）。";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmzhen/dsh-evolution-settings-ui",
   "description": "Web settings cards for the evolution family's parameter namespaces (community build)",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "publishConfig": {
     "access": "public"
   },