@lmzhen/dsh-evolution-skill-health 0.25.5 → 0.25.7

package/lib/client.js

@@ -74,10 +74,12 @@ window.__ModuleLoader__.load({
 			"line": "位置：{path}",
 			"line.unknown": "位置：未知",
 			"unreadable.note": "读不到内容，因此无法判断（不是「通过」）。",
-			"loading.failed": "读取失败——现在判断不了；点「刷新」重试。"
+			"loading.failed": "读取失败——现在判断不了；点「刷新」重试。",
+			"read.failed": "这次没读到数据（下面一行是原始信息）："
 		};
 		/** English dictionary. */
 		const en = {
+			"read.failed": "This read failed (raw message below):",
 			"entry.label": "Skill Health",
 			"title": "Skill Health",
 			"hint": "What the health engine found, aggregated by rule. A rule whose threshold is not calibrated yet is named without a number; skills that cannot be read are listed as unreadable, never as fine.",
@@ -134,28 +136,58 @@ window.__ModuleLoader__.load({
 			}
 			return [...table.values()].sort((a, b) => b.skills.length - a.skills.length || a.rule.localeCompare(b.rule));
 		}
-		/** The rule table: name always, count only when the threshold behind it is calibrated. */
+		/** The verdict a rule's row speaks in: the worst one among the skills that carry it. */
+		function worstVerdict(face, skills) {
+			const order = [
+				"error",
+				"warn",
+				"unreadable",
+				"ok"
+			];
+			let worst = "ok";
+			for (const row of face.rows) {
+				if (!skills.includes(row.name)) continue;
+				if (order.indexOf(row.verdict) < order.indexOf(worst)) worst = row.verdict;
+			}
+			return worst;
+		}
+		/** The rule table: a grid so counts line up, with a tone bar per row and skill pills. */
 		function ruleTable(face, t) {
 			const rows = byRule(face.rows);
-			return (0, react.createElement)("table", null, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, (0, react.createElement)("th", null, t("col.rule")), (0, react.createElement)("th", null, t("col.skills")), (0, react.createElement)("th", null, t("col.count")))), (0, react.createElement)("tbody", null, rows.map((entry) => (0, react.createElement)("tr", { key: entry.rule }, (0, react.createElement)("td", null, entry.rule), (0, react.createElement)("td", null, entry.skills.join(", ")), (0, react.createElement)("td", null, entry.count === 0 ? t("count.notCalibrated") : String(entry.count))))));
+			const cell = (role, children, key) => (0, react.createElement)("div", key === void 0 ? { "data-role": role } : {
+				"data-role": role,
+				key
+			}, children);
+			return (0, react.createElement)("div", { "data-role": "rule-table" }, (0, react.createElement)("div", {
+				"data-role": "rule-row",
+				"data-role-head": "true"
+			}, (0, react.createElement)("div", { "data-role": "rule-name" }, t("col.rule")), (0, react.createElement)("div", { "data-role": "skills" }, t("col.skills")), (0, react.createElement)("div", { "data-role": "rule-count" }, t("col.count"))), rows.map((entry) => (0, react.createElement)("div", {
+				key: entry.rule,
+				"data-role": "rule-row",
+				"data-tone": worstVerdict(face, entry.skills)
+			}, cell("rule-name", entry.rule), cell("skills", entry.skills.map((name, i) => (0, react.createElement)("span", {
+				"data-role": "skill-pill",
+				key: name + ":" + String(i),
+				title: name
+			}, name))), cell("rule-count", entry.count === 0 ? t("count.notCalibrated") : String(entry.count)))));
 		}
 		/**
 		* Render the panel.
 		* @param props - the face (`{ rows, truncated, openHistory? }`) and the locale seat's translator.
 		* @returns the panel body.
 		*/
-		function SkillHealthPanel(props) {
-			const t = props.locale.bind("evolution-skill-health");
-			const [face, setFace] = (0, react.useState)(props.face);
+		function SkillHealthPanel(face) {
+			const t = face.t;
+			const [view, setView] = (0, react.useState)(face);
 			const [failed, setFailed] = (0, react.useState)(void 0);
 			(0, react.useEffect)(() => {
-				const load = props.face.loadRows;
+				const load = face.loadRows;
 				if (load === void 0) return;
 				let live = true;
 				load().then((outcome) => {
 					if (!live) return;
-					if (outcome.ok) setFace({
-						...props.face,
+					if (outcome.ok) setView({
+						...face,
 						rows: outcome.payload.rows,
 						truncated: outcome.payload.truncated
 					});
@@ -166,9 +198,17 @@ window.__ModuleLoader__.load({
 				return () => {
 					live = false;
 				};
-			}, [props.face]);
-			const counts = new Map(KINDS.map((kind) => [kind, face.rows.filter((row) => row.verdict === kind).length]));
-			return (0, react.createElement)("section", null, (0, react.createElement)("p", null, t("counts").replace("{ok}", String(counts.get("ok") ?? 0)).replace("{warn}", String(counts.get("warn") ?? 0)).replace("{error}", String(counts.get("error") ?? 0)).replace("{unreadable}", String(counts.get("unreadable") ?? 0))), face.truncated ? (0, react.createElement)("p", null, t("loading.failed")) : null, failed === void 0 ? null : (0, react.createElement)("p", null, failed), face.rows.length === 0 ? (0, react.createElement)("p", null, t("empty.noneReported")) : null, (0, react.createElement)("h3", null, t("group.byRule")), ruleTable(face, t), face.rows.filter((row) => row.verdict === "unreadable").map((row) => (0, react.createElement)("p", { key: row.name + ":unreadable" }, row.name + " — " + t("unreadable.note"))));
+			}, [face]);
+			const counts = new Map(KINDS.map((kind) => [kind, view.rows.filter((row) => row.verdict === kind).length]));
+			const stats = (0, react.createElement)("div", { "data-role": "stats" }, KINDS.map((kind) => (0, react.createElement)("div", {
+				key: kind,
+				"data-role": "stat",
+				"data-tone": kind
+			}, (0, react.createElement)("div", { "data-role": "stat-value" }, String(counts.get(kind) ?? 0)), (0, react.createElement)("div", { "data-role": "stat-label" }, t("verdict." + kind)))));
+			return (0, react.createElement)("section", null, (0, react.createElement)("p", { "data-role": "hint" }, t("hint")), stats, view.truncated ? (0, react.createElement)("p", { "data-role": "note" }, t("loading.failed")) : null, failed === void 0 ? null : (0, react.createElement)("p", { "data-role": "note" }, t("read.failed") + " " + failed), view.rows.length === 0 ? (0, react.createElement)("p", { "data-role": "note" }, t("empty.noneReported")) : null, (0, react.createElement)("h3", { "data-role": "group-title" }, t("group.byRule")), ruleTable(view, t), view.rows.filter((row) => row.verdict === "unreadable").map((row) => (0, react.createElement)("p", {
+				key: row.name + ":unreadable",
+				"data-role": "note"
+			}, row.name + " — " + t("unreadable.note"))));
 		}
 		//#endregion
 		//#region src/client/styles.ts
@@ -177,17 +217,56 @@ window.__ModuleLoader__.load({
 		* the text itself and injects one tagged <style> element; the tag id keeps a hot reload from stacking
 		* copies. Only the panel body is styled — the sidebar owns the row and its glyph slot.
 		*
-		* Every value comes from the generated family scale (`./tokens.ts`), so this file carries no literal.
+		* Token discipline (the family gate `verify-client-tokens --strict` enforces it): every `--evo-*` name
+		* below is DECLARED in `packages/scripts/client-tokens.json` — the family scale — and every `--dsw-*`
+		* name is a platform semantic alias (packages/client/ui-theme/src/styles). No type step, space, radius,
+		* hairline or colour is invented here, and no pixel geometry literal appears.
+		*
+		* Metrics are COPIED from the platform’s own components rather than invented, each cited here:
+		*
+		* - hover and current-row fills (`--dsw-alias-interactive-bg-hover`) follow the platform sidebar row
+		*   (client/ui-sidebar/…/SidebarRoot.module.css), as the sibling panel does;
+		* - label steps (`--dsw-alias-label-primary/secondary/tertiary`) and the card hairline
+		*   (`--evo-hairline-width`, the scale’s copy of the platform’s 0.5px card border) come from
+		*   client/ui-chat/…/GenericCommandCard.module.css;
+		* - the control radius (`--evo-radius-control`, the scale’s copy of the platform field radius) comes
+		*   from client/ui-primitives/Input.module.css; the capsule uses `--evo-radius-pill`;
+		* - verdict colours are the platform STATE aliases (state-success / state-warn / state-error) plus the
+		*   scale’s `--evo-tone-quiet`; the validity bar is an inset shadow, not a border-width literal.
+		*
+		* Layout: four verdict cards, then the by-rule table as a grid (rule / skills / count) so numbers sit
+		* on tabular figures and long skill lists wrap into pills instead of ragged comma text.
 		* @module @lmzhen/dsh-evolution-skill-health/client
 		*/
 		/** Tag id for the injected <style>, so a hot reload replaces rather than stacks it. */
 		const CSS_TAG_ID = "dsh-evolution-skill-health";
 		/** The panel stylesheet text. */
 		const CSS = [
-			":where(.dsh-evolution-skill-health) { display: flex; flex-direction: column; gap: var(--evo-space-8); padding: var(--evo-space-12); }",
 			":where(.dsh-evolution-skill-health) { --evo-type-lg:calc(1em + 2px);--evo-type-body:1em;--evo-type-sm:calc(1em - 1px);--evo-type-xs:calc(1em - 2px);--evo-space-2:2px;--evo-space-4:4px;--evo-space-6:6px;--evo-space-8:8px;--evo-space-10:10px;--evo-space-12:12px;--evo-space-14:14px;--evo-space-16:16px;--evo-space-20:20px;--evo-radius-chip:4px;--evo-radius-control:8px;--evo-radius-surface:12px;--evo-radius-pill:999px;--evo-hairline-width:.5px;--evo-hairline-marker:2px;--evo-measure-read:80ch;--evo-leading-base:1.5;--evo-tone-quiet:var(--dsw-alias-label-secondary);--evo-tone-primary:var(--dsw-alias-brand-primary);--evo-tone-danger:var(--dsw-alias-state-error-primary);--evo-tone-success:var(--dsw-alias-state-success-primary);--evo-focus-ring:2px solid var(--dsw-alias-label-primary);--evo-focus-offset:-2px;--evo-cap-aside:280px;--evo-cap-block:260px }",
-			":where(.dsh-evolution-skill-health [data-role=\"row\"]) { display: flex; align-items: baseline; justify-content: space-between; gap: var(--evo-space-8); border-bottom: var(--evo-hairline-width) solid var(--evo-tone-quiet); }",
-			":where(.dsh-evolution-skill-health [data-role=\"note\"]) { color: var(--evo-tone-quiet); }"
+			":where(.dsh-evolution-skill-health) { display: flex; flex-direction: column; gap: var(--evo-space-12); padding: var(--evo-space-16); color: var(--dsw-alias-label-primary); font-size: var(--evo-type-sm); line-height: var(--evo-leading-base); }",
+			":where(.dsh-evolution-skill-health [data-role=\"hint\"]) { margin: 0; color: var(--dsw-alias-label-secondary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stats\"]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--evo-space-8); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat\"]) { display: flex; flex-direction: column; gap: var(--evo-space-2); padding: var(--evo-space-8) var(--evo-space-10); border: var(--evo-hairline-width) solid var(--dsw-alias-border-l); border-radius: var(--evo-radius-control); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat\"][data-tone=\"ok\"]) { box-shadow: inset 2px 0 0 var(--dsw-alias-state-success-primary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat\"][data-tone=\"warn\"]) { box-shadow: inset 2px 0 0 var(--dsw-alias-state-warn-primary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat\"][data-tone=\"error\"]) { box-shadow: inset 2px 0 0 var(--dsw-alias-state-error-primary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat\"][data-tone=\"unreadable\"]) { box-shadow: inset 2px 0 0 var(--evo-tone-quiet); }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat-value\"]) { font-size: var(--evo-type-lg); font-variant-numeric: tabular-nums; line-height: 1; }",
+			":where(.dsh-evolution-skill-health [data-role=\"stat-label\"]) { color: var(--dsw-alias-label-tertiary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"group-title\"]) { margin: 0; font-weight: 500; }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-table\"]) { display: flex; flex-direction: column; border: var(--evo-hairline-width) solid var(--dsw-alias-border-l); border-radius: var(--evo-radius-control); overflow: hidden; }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-row\"]) { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) 4rem; gap: var(--evo-space-10); align-items: center; padding: var(--evo-space-6) var(--evo-space-10); border-top: var(--evo-hairline-width) solid var(--dsw-alias-border-l); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-row\"][data-tone=\"warn\"]) { box-shadow: inset var(--evo-hairline-marker) 0 0 var(--dsw-alias-state-warn-primary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-row\"][data-tone=\"error\"]) { box-shadow: inset var(--evo-hairline-marker) 0 0 var(--dsw-alias-state-error-primary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-row\"][data-tone=\"unreadable\"]) { box-shadow: inset var(--evo-hairline-marker) 0 0 var(--evo-tone-quiet); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-row\"]:hover) { background: var(--dsw-alias-interactive-bg-hover); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-row\"]:focus-visible) { outline: var(--evo-focus-ring); outline-offset: var(--evo-focus-offset); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-head\"]) { border-top: 0; color: var(--dsw-alias-label-tertiary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-name\"]) { overflow-wrap: anywhere; }",
+			":where(.dsh-evolution-skill-health [data-role=\"rule-count\"]) { text-align: right; font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-secondary); }",
+			":where(.dsh-evolution-skill-health [data-role=\"skills\"]) { display: flex; flex-wrap: wrap; gap: var(--evo-space-4); }",
+			":where(.dsh-evolution-skill-health [data-role=\"skill-pill\"]) { padding: 0 var(--evo-space-6); border: var(--evo-hairline-width) solid var(--dsw-alias-border-l); border-radius: var(--evo-radius-pill); color: var(--dsw-alias-label-secondary); white-space: nowrap; }",
+			":where(.dsh-evolution-skill-health [data-role=\"note\"]) { margin: 0; color: var(--dsw-alias-label-secondary); }"
 		].join(String.fromCharCode(10));
 		//#endregion
 		//#region src/client/index.ts
@@ -254,6 +333,15 @@ window.__ModuleLoader__.load({
 					return fallback;
 				}
 			};
+			const t = (key) => {
+				const fallback = zh[key] ?? key;
+				if (!registered) return fallback;
+				try {
+					return seam.locale.bind(NS)(key);
+				} catch {
+					return fallback;
+				}
+			};
 			seam.slots.inject("sidebar.panellist", function* () {
 				yield seam.slots.register({
 					name: "sidebar.panellist",
@@ -267,12 +355,10 @@ window.__ModuleLoader__.load({
 					inject: () => ({
 						rows: [],
 						truncated: false,
-						loadRows: rows
+						loadRows: rows,
+						t
 					})
-				}, (props) => (0, react.createElement)(SkillHealthPanel, {
-					face: props.face,
-					locale: seam.locale
-				}));
+				}, SkillHealthPanel);
 			});
 		}
 		//#endregion

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

@@ -9,7 +9,6 @@
  */
 import { type ReactNode } from 'react';
 import type { HealthOutcome } from './api.ts';
-import type { LocaleSeat } from './seam.ts';
 /** One finding, as the host reports it: `line` is null when the position cannot be named. */
 export interface HealthFinding {
     rule: string;
@@ -33,14 +32,13 @@ export interface HealthFace {
     openHistory?: (name: string) => void;
     /** Reads the scan result from the host route. Absent faces render their seeded rows unchanged. */
     loadRows?: () => Promise<HealthOutcome>;
+    /** The seat's translator for this bundle's dictionary — the panel never reaches for a service. */
+    t: (key: string) => string;
 }
 /**
  * Render the panel.
  * @param props - the face (`{ rows, truncated, openHistory? }`) and the locale seat's translator.
  * @returns the panel body.
  */
-export declare function SkillHealthPanel(props: {
-    face: HealthFace;
-    locale: LocaleSeat;
-}): ReactNode;
+export declare function SkillHealthPanel(face: HealthFace): ReactNode;
 //# sourceMappingURL=Panel.d.ts.map

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

@@ -3,7 +3,25 @@
  * the text itself and injects one tagged <style> element; the tag id keeps a hot reload from stacking
  * copies. Only the panel body is styled — the sidebar owns the row and its glyph slot.
  *
- * Every value comes from the generated family scale (`./tokens.ts`), so this file carries no literal.
+ * Token discipline (the family gate `verify-client-tokens --strict` enforces it): every `--evo-*` name
+ * below is DECLARED in `packages/scripts/client-tokens.json` — the family scale — and every `--dsw-*`
+ * name is a platform semantic alias (packages/client/ui-theme/src/styles). No type step, space, radius,
+ * hairline or colour is invented here, and no pixel geometry literal appears.
+ *
+ * Metrics are COPIED from the platform’s own components rather than invented, each cited here:
+ *
+ * - hover and current-row fills (`--dsw-alias-interactive-bg-hover`) follow the platform sidebar row
+ *   (client/ui-sidebar/…/SidebarRoot.module.css), as the sibling panel does;
+ * - label steps (`--dsw-alias-label-primary/secondary/tertiary`) and the card hairline
+ *   (`--evo-hairline-width`, the scale’s copy of the platform’s 0.5px card border) come from
+ *   client/ui-chat/…/GenericCommandCard.module.css;
+ * - the control radius (`--evo-radius-control`, the scale’s copy of the platform field radius) comes
+ *   from client/ui-primitives/Input.module.css; the capsule uses `--evo-radius-pill`;
+ * - verdict colours are the platform STATE aliases (state-success / state-warn / state-error) plus the
+ *   scale’s `--evo-tone-quiet`; the validity bar is an inset shadow, not a border-width literal.
+ *
+ * Layout: four verdict cards, then the by-rule table as a grid (rule / skills / count) so numbers sit
+ * on tabular figures and long skill lists wrap into pills instead of ragged comma text.
  * @module @lmzhen/dsh-evolution-skill-health/client
  */
 /** Tag id for the injected <style>, so a hot reload replaces rather than stacks it. */

package/package.json

@@ -11,7 +11,7 @@
       ]
     }
   },
-  "version": "0.25.5",
+  "version": "0.25.7",
   "publishConfig": {
     "access": "public"
   },
@@ -43,13 +43,13 @@
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-host-webserver": "^0.2.0-rc.1",
     "react": "^18.2.0",
-    "@lmzhen/dsh-evolution-curator": "^0.25.5"
+    "@lmzhen/dsh-evolution-curator": "^0.25.7"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-host-webserver": "^0.2.0-rc.1",
     "@types/react": "~18.3.1",
     "react": "^18.2.0",
-    "@lmzhen/dsh-evolution-curator": "^0.25.5"
+    "@lmzhen/dsh-evolution-curator": "^0.25.7"
   }
 }