@changfenhuang/dsh-genui 0.9.9 → 0.10.0

package/lib/index.js

@@ -138,7 +138,45 @@ const ECHART_PRESETS = [
 	"line",
 	"area",
 	"pie",
-	"scatter"
+	"scatter",
+	"radar",
+	"gauge",
+	"funnel",
+	"treemap",
+	"sankey",
+	"graph",
+	"heatmap",
+	"bigline"
+];
+/** Oversized single-number stat (one per fence as the visual anchor). */
+const STAT_SIZES = ["hero"];
+/** Progress shapes: a track (default) or a circular gauge. */
+const PROGRESS_VARIANTS = ["bar", "ring"];
+/** Semantic card surfaces. */
+const CARD_TONES = [
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+/** Hero cover tones. */
+const HERO_TONES = [
+	"accent",
+	"success",
+	"warning",
+	"danger"
+];
+/** Table cell renderers (`table.types`, one entry per column). */
+const TABLE_CELL_TYPES = [
+	"text",
+	"num",
+	"delta",
+	"bar",
+	"badge",
+	"spark",
+	"ring",
+	"index",
+	"group"
 ];
 const schema = (required, fields, aliases = {}, options = {}) => {
 	const optional = Object.fromEntries(Object.entries(fields).filter(([field]) => field !== "type" && !required.includes(field)));
@@ -166,7 +204,10 @@ const recordSchema = (required, fields, nested = {}, enums = {}) => ({
 	enums,
 	nested
 });
-const nodeFields = { type: "string" };
+const nodeFields = {
+	type: "string",
+	span: "number"
+};
 const chartDatumSchema = recordSchema(["label", "value"], {
 	label: "string",
 	value: "number",
@@ -337,26 +378,25 @@ const COMPONENT_SCHEMAS = {
 	card: schema(["items"], {
 		...nodeFields,
 		title: "string",
-		items: "nodes"
+		items: "nodes",
+		tone: "string",
+		accent: "string"
 	}, {
 		label: "title",
 		content: "items"
-	}),
+	}, { enums: { tone: CARD_TONES } }),
 	chart: schema([], {
 		...nodeFields,
 		kind: "string",
 		data: "array",
-		series: "array"
+		series: "array",
+		horizontal: "boolean",
+		stacked: "boolean",
+		filter: "string",
+		palette: "array"
 	}, {}, {
 		oneOfRequired: [["data", "series"]],
 		conditionalRequired: [{
-			kind: "required-if",
-			when: {
-				field: "kind",
-				equals: "line"
-			},
-			required: ["data"]
-		}, {
 			kind: "required-if",
 			when: {
 				field: "kind",
@@ -426,12 +466,15 @@ const COMPONENT_SCHEMAS = {
 		preset: "string",
 		data: "array",
 		series: "array",
+		links: "array",
+		palette: "array",
 		option: "object"
 	}, {}, {
 		oneOfRequired: [[
 			"option",
 			"data",
-			"series"
+			"series",
+			"links"
 		]],
 		enums: { preset: ECHART_PRESETS }
 	}),
@@ -473,7 +516,8 @@ const COMPONENT_SCHEMAS = {
 	}),
 	list: schema(["items"], {
 		...nodeFields,
-		items: "array"
+		items: "array",
+		filter: "string"
 	}),
 	mermaid: schema(["code"], {
 		...nodeFields,
@@ -492,8 +536,10 @@ const COMPONENT_SCHEMAS = {
 		...nodeFields,
 		value: "number",
 		label: "string",
-		valueLabel: "string"
-	}),
+		valueLabel: "string",
+		variant: "string",
+		target: "number"
+	}, {}, { enums: { variant: PROGRESS_VARIANTS } }),
 	quiz: schema(["question", "options"], {
 		...nodeFields,
 		question: "string",
@@ -544,12 +590,24 @@ const COMPONENT_SCHEMAS = {
 		id: "string"
 	}),
 	spacer: schema([], nodeFields),
+	hero: schema(["title"], {
+		...nodeFields,
+		title: "string",
+		subtitle: "string",
+		value: "string",
+		label: "string",
+		delta: "string",
+		spark: "array",
+		tone: "string"
+	}, {}, { enums: { tone: HERO_TONES } }),
 	stat: schema(["label", "value"], {
 		...nodeFields,
 		label: "string",
 		value: "string",
-		delta: "string"
-	}),
+		delta: "string",
+		spark: "array",
+		size: "string"
+	}, {}, { enums: { size: STAT_SIZES } }),
 	steps: schema(["steps"], {
 		...nodeFields,
 		steps: "array",
@@ -571,7 +629,14 @@ const COMPONENT_SCHEMAS = {
 	table: schema(["columns", "rows"], {
 		...nodeFields,
 		columns: "array",
-		rows: "array"
+		rows: "array",
+		types: "array",
+		total: "boolean",
+		details: "array",
+		filter: "string",
+		filterColumn: "number",
+		sortField: "string",
+		export: "boolean"
 	}, {
 		headers: "columns",
 		data: "rows"
@@ -1026,7 +1091,41 @@ function repairItems(list, ctx, depth) {
 	}
 	return out;
 }
+/** Optional explicit palette: up to 12 validated colour values. */
+function paletteValues(v) {
+	if (!Array.isArray(v)) return void 0;
+	const out = [];
+	for (const item of v.slice(0, 12)) {
+		const value = color(item);
+		if (value === void 0) continue;
+		out.push(value);
+	}
+	return out.length > 0 ? out : void 0;
+}
+/** Optional `stat.spark` series: finite numbers only, 2..60 points. */
+function sparkValues(v) {
+	if (!Array.isArray(v)) return void 0;
+	const out = [];
+	for (const item of v.slice(0, 60)) {
+		const n = typeof item === "number" ? item : Number(item);
+		if (!Number.isFinite(n)) return void 0;
+		out.push(n);
+	}
+	return out.length >= 2 ? out : void 0;
+}
+/** Layout hints are component-agnostic: `span` survives repair on ANY node
+*  (the renderer applies it inside a grid). Kept out of the per-case switches
+*  so a new component type cannot forget it. */
 function repairNode(value, ctx, depth) {
+	const node = repairNodeFields(value, ctx, depth);
+	if (node === null) return null;
+	const span = int(obj(value)?.span, 2, 12);
+	return span === void 0 ? node : {
+		...node,
+		span
+	};
+}
+function repairNodeFields(value, ctx, depth) {
 	if (depth > GENUI_LIMITS.maxDepth) return null;
 	const v = obj(value);
 	if (v === void 0) return null;
@@ -1062,7 +1161,9 @@ function repairNode(value, ctx, depth) {
 		case "card": return {
 			type: "card",
 			items: repairItems(v.items, ctx, depth + 1),
-			...opt("title", str(v.title, GENUI_LIMITS.maxString))
+			...opt("title", str(v.title, GENUI_LIMITS.maxString)),
+			...opt("tone", enu(v.tone, CARD_TONES)),
+			...opt("accent", color(v.accent))
 		};
 		case "button": {
 			const label = str(v.label, GENUI_LIMITS.maxString);
@@ -1160,6 +1261,20 @@ function repairNode(value, ctx, depth) {
 				...opt("icon", str(v.icon, 64))
 			};
 		}
+		case "hero": {
+			const title = str(v.title, GENUI_LIMITS.maxString);
+			if (title === void 0) return null;
+			return {
+				type: "hero",
+				title,
+				...opt("subtitle", str(v.subtitle, GENUI_LIMITS.maxString)),
+				...opt("value", str(v.value, 128)),
+				...opt("label", str(v.label, GENUI_LIMITS.maxString)),
+				...opt("delta", str(v.delta, 64)),
+				...opt("spark", sparkValues(v.spark)),
+				...opt("tone", enu(v.tone, HERO_TONES))
+			};
+		}
 		case "stat": {
 			const label = str(v.label, GENUI_LIMITS.maxString);
 			const value = str(v.value, 128);
@@ -1168,7 +1283,9 @@ function repairNode(value, ctx, depth) {
 				type: "stat",
 				label,
 				value,
-				...opt("delta", str(v.delta, 64))
+				...opt("delta", str(v.delta, 64)),
+				...opt("spark", sparkValues(v.spark)),
+				...opt("size", v.size === "hero" ? "hero" : void 0)
 			};
 		}
 		case "progress": {
@@ -1178,7 +1295,9 @@ function repairNode(value, ctx, depth) {
 				type: "progress",
 				value,
 				...opt("label", str(v.label, GENUI_LIMITS.maxString)),
-				...opt("valueLabel", str(v.valueLabel, 64))
+				...opt("valueLabel", str(v.valueLabel, 64)),
+				...opt("variant", enu(v.variant, PROGRESS_VARIANTS)),
+				...opt("target", num(v.target, 0, 100))
 			};
 		}
 		case "divider": return { type: "divider" };
@@ -1197,7 +1316,8 @@ function repairNode(value, ctx, depth) {
 			if (items === void 0) return null;
 			return {
 				type: "list",
-				items
+				items,
+				...opt("filter", str(v.filter, 64))
 			};
 		}
 		case "table": {
@@ -1211,10 +1331,27 @@ function repairNode(value, ctx, depth) {
 			const columns = repairStrings(rawCols, GENUI_LIMITS.maxTableCols, 128);
 			const rows = repairRows(rawRows, GENUI_LIMITS.maxTableRows, GENUI_LIMITS.maxTableCols);
 			if (columns === void 0 || rows === void 0) return null;
+			const rawTypes = Array.isArray(v.types) ? v.types : void 0;
+			const types = rawTypes === void 0 ? void 0 : columns.map((_c, i) => {
+				const raw = rawTypes[i];
+				return typeof raw === "string" && TABLE_CELL_TYPES.includes(raw) ? raw : "text";
+			});
+			const rawDetails = Array.isArray(v.details) ? v.details : void 0;
+			const details = rawDetails === void 0 ? void 0 : rows.map((_row, i) => {
+				const entry = repairItems(rawDetails[i], ctx, depth + 1);
+				return entry.length === 0 ? null : entry;
+			});
 			return {
 				type: "table",
 				columns,
-				rows
+				rows,
+				...opt("types", types),
+				...opt("total", v.total === true ? true : void 0),
+				...opt("export", v.export === true ? true : void 0),
+				...opt("filter", str(v.filter, 64)),
+				...opt("filterColumn", int(v.filterColumn, 0, GENUI_LIMITS.maxTableCols - 1)),
+				...opt("sortField", str(v.sortField, 64)),
+				...opt("details", details !== void 0 && details.some((d) => d !== null) ? details : void 0)
 			};
 		}
 		case "chart": {
@@ -1225,7 +1362,11 @@ function repairNode(value, ctx, depth) {
 				type: "chart",
 				data: data ?? [],
 				...opt("kind", enu(v.kind, CHART_KINDS)),
-				...opt("series", series)
+				...opt("series", series),
+				...opt("horizontal", v.horizontal === true ? true : void 0),
+				...opt("stacked", v.stacked === true ? true : void 0),
+				...opt("filter", str(v.filter, 64)),
+				...opt("palette", paletteValues(v.palette))
 			};
 		}
 		case "tabs": {
@@ -1439,9 +1580,20 @@ function repairNode(value, ctx, depth) {
 		case "echart": {
 			const data = v.data !== void 0 ? repairChartData(v.data, GENUI_LIMITS.maxChartPoints) : void 0;
 			const series = v.series !== void 0 && Array.isArray(v.series) ? repairSeries(v.series, GENUI_LIMITS.maxPlotSeries, GENUI_LIMITS.maxChartPoints) : void 0;
+			const links = Array.isArray(v.links) ? v.links.slice(0, GENUI_LIMITS.maxChartPoints).flatMap((entry) => {
+				const e = obj(entry);
+				const from = e === void 0 ? void 0 : str(e.from, 64);
+				const to = e === void 0 ? void 0 : str(e.to, 64);
+				if (from === void 0 || to === void 0) return [];
+				return [{
+					from,
+					to,
+					...opt("value", num(e.value, 0, 1e9))
+				}];
+			}) : void 0;
 			const sanitized = v.option !== void 0 ? sanitizeEChartOption(v.option, 0, { count: GENUI_LIMITS.maxEChartOptionNodes }) : void 0;
 			const option = sanitized === void 0 || typeof sanitized !== "object" || sanitized === null || Array.isArray(sanitized) ? void 0 : sanitized;
-			if (option === void 0 && data === void 0 && series === void 0) return null;
+			if (option === void 0 && data === void 0 && series === void 0 && (links === void 0 || links.length === 0)) return null;
 			return {
 				type: "echart",
 				...opt("title", str(v.title, GENUI_LIMITS.maxString)),
@@ -1449,6 +1601,8 @@ function repairNode(value, ctx, depth) {
 				...opt("preset", enu(v.preset, ECHART_PRESETS)),
 				...opt("data", data),
 				...opt("series", series),
+				...opt("links", links !== void 0 && links.length > 0 ? links : void 0),
+				...opt("palette", paletteValues(v.palette)),
 				...opt("option", option)
 			};
 		}
@@ -2222,16 +2376,18 @@ function validateChartNode(v, at, errors) {
 	if (v.series !== void 0 && !Array.isArray(v.series)) errors.push(`${at}.series must be an array`);
 	if (v.kind !== void 0 && (typeof v.kind !== "string" || !CHART_KINDS.includes(v.kind))) errors.push(`${at}.kind must be bars, line, or donut`);
 	const kind = v.kind === void 0 ? "bars" : v.kind;
-	if (Array.isArray(v.data) && v.data.length === 0) errors.push(`${at}.data must not be empty`);
-	if (Array.isArray(v.series)) {
-		if (v.series.length === 0) errors.push(`${at}.series must not be empty`);
-		if (kind === "line" || kind === "donut") errors.push(`${at}.series is only supported for bars`);
-		for (let index = 0; index < v.series.length; index++) {
-			const series = obj(v.series[index]);
-			if (series !== void 0 && Array.isArray(series.data) && series.data.length === 0) errors.push(`${at}.series[${index}].data must not be empty`);
-		}
-	}
-	if ((kind === "line" || kind === "donut") && v.data === void 0) errors.push(`${at}.data is required for ${kind}`);
+	const series = Array.isArray(v.series) ? v.series : void 0;
+	if (Array.isArray(v.data) && v.data.length === 0 && (series === void 0 || series.length === 0)) errors.push(`${at}.data must not be empty`);
+	if (series !== void 0) {
+		if (series.length === 0) errors.push(`${at}.series must not be empty`);
+		if (kind === "donut") errors.push(`${at}.series is only supported for bars and line`);
+		for (let index = 0; index < series.length; index++) {
+			const entry = obj(series[index]);
+			if (entry !== void 0 && Array.isArray(entry.data) && entry.data.length === 0) errors.push(`${at}.series[${index}].data must not be empty`);
+		}
+	}
+	if (kind === "donut" && v.data === void 0) errors.push(`${at}.data is required for donut`);
+	if (kind === "line" && v.data === void 0 && (series === void 0 || series.length === 0)) errors.push(`${at}.data is required for line (or provide series)`);
 	validateChartData(v.data, `${at}.data`, errors);
 	validateChartSeries(v.series, `${at}.series`, errors);
 }
@@ -2327,6 +2483,10 @@ function validateNode(value, depth, at, errors, walk) {
 			isStr("text");
 			isStr("value");
 			break;
+		case "hero":
+			if (typeof v.title !== "string") errors.push(`${at}: type 'hero' requires title (string)`);
+			isStr("subtitle");
+			break;
 		case "stat":
 			if (typeof v.label !== "string") errors.push(`${at}: type 'stat' requires label (string)`);
 			if (typeof v.value !== "string") errors.push(`${at}: type 'stat' requires value (string)`);
@@ -2349,6 +2509,8 @@ function validateNode(value, depth, at, errors, walk) {
 		case "table":
 			if (!Array.isArray(v.columns)) errors.push(`${at}: type 'table' requires columns (array)`);
 			if (!Array.isArray(v.rows)) errors.push(`${at}: type 'table' requires rows (array)`);
+			if (v.types !== void 0 && !Array.isArray(v.types)) errors.push(`${at}.types must be an array of column cell types`);
+			if (v.details !== void 0 && !Array.isArray(v.details)) errors.push(`${at}.details must be an array aligned with rows`);
 			validateTableRows(v.rows, `${at}.rows`, errors);
 			break;
 		case "chart":
@@ -2427,7 +2589,7 @@ function validateNode(value, depth, at, errors, walk) {
 			if (v.edges !== void 0 && !Array.isArray(v.edges)) errors.push(`${at}: type 'diagram' requires edges (array) when present`);
 			break;
 		case "echart":
-			if (v.option === void 0 && v.data === void 0 && v.series === void 0) errors.push(`${at}: type 'echart' requires option, data, or series`);
+			if (v.option === void 0 && v.data === void 0 && v.series === void 0 && (!Array.isArray(v.links) || v.links.length === 0)) errors.push(`${at}: type 'echart' requires option, data, series, or links`);
 			isNum("height");
 			break;
 		default: errors.push(`${at}: unknown type '${type}' (custom renderer?)`);
@@ -2562,7 +2724,11 @@ const RENDER_UI_PARAMETERS = {
 	type: "object",
 	properties: { spec: {
 		type: "object",
-		description: "GenUI component tree (white-listed vocabulary, see the dsh-ui fence section in the system prompt). Deep-validated and repaired by the renderer. Pass the spec as a JSON OBJECT — never as a serialized JSON string (a string fails argument validation).",
+		description: [
+			"Render structured UI for the user (tool-row card). USE THIS whenever the answer contains ≥3 parallel points, a comparison, numbers/metrics, a step sequence, a flow, or a status/report — do NOT write those as markdown bullets or a markdown table.",
+			"Same white-listed vocabulary as the ```dsh-ui fence (see the GenUI system-prompt section). Pick the fence when the UI belongs in the message body; pick this tool when the deliverable is a self-contained card.",
+			"Deep-validated and repaired by the renderer. Pass the spec as a JSON OBJECT — never as a serialized JSON string (a string fails argument validation)."
+		].join(" "),
 		properties: {
 			title: {
 				type: "string",
@@ -2880,9 +3046,9 @@ function createValidateDshUiTool() {
 * This route serves them from the plugin's own package directory through the
 * host webserver service — the longest-prefix rule lets it win over the
 * generic `/plugins` bundle route, and no host source change is needed. The
-* service is optional at this plugin's start time (same ordering reality as
-* the tools registry), so registration probes immediately AND on the
-* `internal/service` event, exactly like the tools registration below.
+* service is optional at this plugin's start time, so a dependency fiber owns
+* the registration and follows the webserver through late binding, replacement,
+* and plugin reloads.
 */
 /** Route prefix under /plugins; anything under it is this plugin's asset. */
 const ASSET_ROUTE_PATH = "/plugins/@changfenhuang/dsh-genui/assets";
@@ -2940,16 +3106,26 @@ const GENUI_SECTION_TEXT = `You can render interactive UI components INSIDE your
 
 The spec is a white-listed component tree rendered inline where the fence sits. Only these \`type\` values; the \`genui\` skill, when available, carries the full content→component mapping and per-component field details:
 
-- 布局: text · row · col · grid · card · divider · spacer
+- 布局: text · row · col · grid · card · divider · spacer · hero（封面块：超大数字 + 标题 + tone 渐变底色，一条回答最多一个）
 - 展示: badge · stat · progress · list · table · keyvalue · avatar · audio · video · timeline · file-tree · breadcrumb · callout · steps · diff · json · code · copy
-- 图表: chart {"type":"chart","kind":"bars|line|donut","data":[{"label":"...","value":n,"color":"#hex?"}],"series":[...]?}（series 仅 bars；未知扩展字段可通过校验，但原生 chart repair/render 会忽略） · echart (preset|option) · plot (函数图)
+- 图表: chart {"kind":"bars|line|donut","data":[{"label":"...","value":n}],"series":[{"label":"...","data":[...]}]?,"horizontal":true?,"stacked":true?}（series：bars 分组/堆叠 / line 多序列；horizontal 横向柱） · echart (preset: bar/line/area/pie/scatter/radar/gauge/funnel/treemap/sankey/graph/heatmap/bigline，或 option 直通) · plot (函数图)
 - 交互: button · input · textarea · select · checkbox · switch · slider · radio · submit · quiz · link · tabs · accordion
 - 高级: mermaid (flowchart/sequence/class/gantt/pie/er/state/journey) · diagram (编辑级架构/流程图，27 种 kind) · scene3d (3D WebGL)
 
+**默认就该出 UI**：出现下列情况至少出一个围栏：
+- ≥3 条并列要点 → \`list\`；数字对比 → \`table\`；指标/进度/状态 → \`stat\`/\`progress\`/\`badge\`
+- 步骤/时间线 → \`steps\`/\`timeline\`/\`mermaid\`；架构/流程 → \`diagram\` 或 \`mermaid\`；风险/结论 → \`callout\`；代码/改动 → \`code\`/\`diff\`/\`json\`
+- 行内富文本：\`text\`/\`list\`/表格文本列/\`keyvalue\`/\`callout\` 里可写 \`code\`、**加粗**、==高亮==、[文字](url)：重点留在句中，不必为一个词单起组件。
+- 默认无卡 ≠ 少用组件：硬触发照常出组件，**组件多不是问题**——判据是每个组件承载不同信息、有焦点与层次、同一批数据不重复表达。卡片只用于并排项与数据对象；单段文字用「标题 + 正文 + 间距」。
+
+**发回答前最后自检一次**：这段内容里有没有 ≥3 条并列要点、任何对比、任何数字/指标、任何步骤或流程？有就先转成组件再开口。**状态汇报、进度说明、提交与改动清单同样算**——不要因为它是"说明文"就用纯文字写。这一条踩过的坑：连续几条汇报全靠文字，一条围栏都没发。
+- 趋势/占比 → \`chart\`（≤8 点）或 \`echart\`（多序列/要交互时）；配色默认跟随主题，只有语义需要时才用 \`palette\` / \`card.accent\`；排版用 grid 子节点的 \`"span":2\` 跨列做宽窄混排（bento），不要一列方块堆到底；数据多时给 \`table\`/\`chart\`/\`list\` 配一个 \`input\`(id) + \`filter\` 绑定，读者能就地筛选，不用再问一遍
+
+**字段速查**（完整见 genui skill）：\`stat\` \`{"label","value","delta"?}\` · \`table\` \`{"columns","rows","types"?,"total"?,"details"?,"filter"?,"export"?}\` · \`callout\` \`{"tone","title","content"}\` · \`progress\` \`{"value","variant"?,"target"?}\`
+
 Rules:
-- 触发: 结构化表达优于纯文本时主动用（要点、强调、对比、流程、步骤、状态、数据、演示），纯问答与一句话不套 UI；一个主题一个主组件，每次 3–8 个组件，同一数据不重复出现。
 - JSON 严格: 坏围栏降级为代码块；≥3 节点或含 table 的围栏发出前调用 validate_dsh_ui，❌ 修好再发（若附「已自动修复」JSON 照抄即可）。
-- 规模: ≤200 节点、嵌套≤8 层（超出被截断）；3D mesh 1–5；plot 给合理 xMin/xMax。
+- 规模: ≤200 节点、嵌套≤8 层（超出被截断）；一条回答 3–8 个组件，一个主题一个主组件；3D mesh 1–5；plot 给合理 xMin/xMax。
 - LOCAL-FIRST + actions: UI 能自己做的状态变化（判卷、判题、重置、展开、选中）就地完成，零往返；action 只用于必须模型参与的事。交互组件带 "action":"name"，交互以 [genui-action] name + 组件数据回传，届时重渲染更新 UI；无 action 的按钮禁用。
 - Durable state: 交互状态按「会话+内容指纹」持久化——刷新/重放恢复；重渲染相同内容保留，新内容重置。
 - 卷子模式: 每题一个 radio（group+answer+explanation）+ 一个 submit（groups 全列），本地判分。
@@ -3012,37 +3188,22 @@ function apply(ctx) {
 		order: ctx.systemPrompt.getSectionOrder("STRUCTURED_OUTPUT"),
 		text: GENUI_SECTION_TEXT
 	});
-	let registered = false;
-	const tryRegister = (value) => {
-		if (registered) return;
-		const tools = value ?? ctx.reflect.get("tools", false);
-		if (tools === void 0) return;
-		tools.register(createRenderUiTool());
-		tools.register(createValidateDshUiTool());
-		registered = true;
-	};
-	tryRegister(void 0);
-	ctx.on("internal/service", (name, value) => {
-		if (name === "tools") tryRegister(value);
+	ctx.inject(["tools"], (toolsCtx) => {
+		toolsCtx.effect(function* () {
+			yield toolsCtx.tools.register(createRenderUiTool());
+			yield toolsCtx.tools.register(createValidateDshUiTool());
+		}, "dsh-genui: model tools");
 	});
 	ctx.inject(["skills"], (skillCtx) => {
 		skillCtx.skills.registerProvider(() => bundledSkillProvider());
 	});
-	let assetsRegistered = false;
-	const tryRegisterAssets = (value) => {
-		if (assetsRegistered) return;
-		const webServer = value ?? ctx.reflect.get("webServer", false);
-		if (webServer === void 0) return;
-		webServer.register({
+	ctx.inject(["webServer"], (webCtx) => {
+		const webServer = webCtx.reflect.get("webServer");
+		webCtx.effect(() => webServer.register({
 			kind: "prefix",
 			path: ASSET_ROUTE_PATH,
 			handler: serveGenuiAsset
-		});
-		assetsRegistered = true;
-	};
-	tryRegisterAssets(void 0);
-	ctx.on("internal/service", (name, value) => {
-		if (name === "webServer") tryRegisterAssets(value);
+		}), "dsh-genui: asset route");
 	});
 }
 //#endregion

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

@@ -1,4 +1,13 @@
 import type { GenuiEChart } from './spec.ts';
+/**
+ * Categorical fallback palette. The host defines its `--dsw-static-*` tokens on
+ * `body`, not on `:root`, and ECharts renders to CANVAS (so a `var(--x)` string
+ * is meaningless to it — every colour must be resolved to a literal first).
+ * Reading only `document.documentElement` therefore returned '' for every
+ * series colour and collapsed multi-series charts to one accent hue; these
+ * fixed hues keep series distinguishable on any host.
+ */
+export declare const SERIES_FALLBACK: readonly ["#679efe", "#4ed17e", "#f5b83d", "#f2707a", "#8b7ff0", "#3fc7d4", "#b7c8fe", "#9aa3b2"];
 export declare function EChartNode({ node }: {
     node: GenuiEChart;
 }): import("react").JSX.Element;

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

@@ -2,9 +2,8 @@ import type { GenuiBlockProps } from './blocks/state.ts';
 export declare const GENUI_ACTION_DEBOUNCE_MS = 300;
 /**
  * Render a GenUI spec as an inline block. `stateKey` is also the durable
- * component identity: changing it remounts the stateful implementation so
- * state loaded for one block can never leak into or be saved under another
- * key. Identity-less streaming renders deliberately share one stable
- * volatile instance, preserving local interaction state as the spec grows.
+ * component identity. A streaming instance adopts its first durable key so
+ * inputs and pending actions survive settling. Leaving an existing durable
+ * key remounts, keeping different blocks' interaction state isolated.
  */
 export declare const GenuiBlock: import("react").NamedExoticComponent<GenuiBlockProps>;

package/lib/types/client/asset-echarts-core.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/client/asset-echarts.d.ts

@@ -1,6 +1,7 @@
 /**
- * ECharts asset-bundle entry: registers the echarts engine on
- * `window.__GenuiAssets__.echarts`. Built as a standalone IIFE into
+ * ECharts FULL asset-bundle entry: the complete engine, fetched only when a
+ * spec needs a chart type outside the core set or ships a raw `option`.
+ * Registers on `window.__GenuiAssets__.echartsFull`. Built as a standalone IIFE into
  * `lib/assets/echarts.js` and served by the plugin's node-half route; loaded
  * on demand by echarts-lazy when a spec contains an `echart` node.
  * @module @changfenhuang/dsh-genui/client/asset-echarts

package/lib/types/client/asset-loader.d.ts

@@ -25,7 +25,7 @@ export declare function assetUrl(file: string): string;
  * file: repeated requests (several mermaid nodes, re-renders) share one
  * script load; a failed load stays failed for the page (the component shows
  * its fallback).
- * @param name - 'mermaid', 'three', or 'echarts'.
+ * @param name - 'mermaid', 'three', 'echarts-core', or 'echarts-full'.
  * @returns the registered engine surface.
  */
-export declare function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts'): Promise<T>;
+export declare function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts-core' | 'echarts-full'): Promise<T>;

package/lib/types/client/blocks/advanced.d.ts

@@ -75,9 +75,6 @@ export declare const Scene3DNode: import("react").NamedExoticComponent<{
 export declare const TimelineNode: import("react").NamedExoticComponent<{
     node: GenuiTimeline;
 }>;
-/** FileTree: indented tree of files and folders. Directory rows are LOCAL
- * collapsible (spec.ts promised "collapsible children"; this makes it true)
- * — click a dir to fold/unfold, default fully open. Zero model round trip. */
 export declare const FileTreeNode: import("react").NamedExoticComponent<{
     node: GenuiFileTree;
 }>;

package/lib/types/client/blocks/charts.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { GenuiChart, GenuiTable } from '../spec.ts';
 export declare const CHART_COLORS: string[];
 /**
@@ -9,30 +10,40 @@ export declare const CHART_COLORS: string[];
  * (numbers first, then text).
  */
 export declare function parseSortableNumber(v: unknown): number;
+/** Markdown table text for the 复制 Markdown chip (pipes escaped). */
+export declare function tableToMarkdown(columns: string[], rows: Array<Array<string | number>>): string;
+/** RFC 4180 CSV text for the 复制 CSV chip. */
+export declare function tableToCsv(rows: Array<Array<string | number>>): string;
 export declare const TableNode: import("react").NamedExoticComponent<{
     node: GenuiTable;
+    /** Live value of `node.filter`: substring-match rows locally. */
+    filterValue?: string | undefined;
+    /** Live value of `node.sortField`: a column header to sort by. */
+    sortValue?: string | undefined;
+    /** Renders a row's detail nodes. Supplied by render-node so the table never
+     *  has to import the renderer back (import cycle). */
+    renderDetail?: ((items: NonNullable<GenuiTable["details"]>[number] & object[]) => ReactNode) | undefined;
 }>;
-/** Chart: bars (default), line (trend), or donut (share); multi-series bars via `series`.
- *  memoized: the spec node is a stable reference, so a keystroke in a sibling
- *  field no longer re-renders the whole chart. */
+/** Chart: bars (default), line (trend), or donut (share); multi-series bars via `series`. */
 export declare const ChartNode: import("react").NamedExoticComponent<{
     chart: GenuiChart;
+    /** Live value of the control bound via `chart.filter`; keeps matching
+     *  categories only (label substring), so a chart is explorable locally. */
+    filterValue?: string | undefined;
 }>;
-/** Bars: one column per datum (grouped bars when `series` is present). */
+/** Bars: one column per datum (grouped bars when `series` is present).
+ *  Single-series bars render against a true zero line, so negative values
+ *  draw downward instead of clamping to zero height. */
 export declare const BarsNode: import("react").NamedExoticComponent<{
     chart: GenuiChart;
 }>;
-/** Line: polyline over a fixed-height plot area with a readable Y axis —
- * four evenly spaced gridlines + tick labels (design system v2 skeleton). */
+/** Line: responsive polyline with an area wash, nice y ticks and sampled x
+ *  labels drawn in SVG at their real size. */
 export declare const LineChartNode: import("react").NamedExoticComponent<{
     chart: GenuiChart;
 }>;
-/** Donut: share of total with a center total. Negative values contribute
- * zero arc (a negative dasharray segment used to produce an invalid
- * stroke-dasharray and the browser drew the FULL circle instead). */
+/** Donut: share of total with a center total and a legend that shows each
+ *  slice's value AND percentage (the old legend was unstyled text). */
 export declare const DonutNode: import("react").NamedExoticComponent<{
     chart: GenuiChart;
 }>;
-/** Tab strip with local active-tab state. Keyboard: ArrowLeft/Right to move,
- * Home/End to jump; ids wired via useId so `aria-controls` stays unique
- * across fences and sessions. */

package/lib/types/client/blocks/state.d.ts

@@ -19,11 +19,13 @@ export interface GenuiBlockProps {
      * v2.7: durable-state key (session + slot + content fingerprint). When set,
      * interaction state (radio answers, checkbox groups, submit lock, field
      * values) persists to localStorage and restores on refresh / re-render of
-     * the same content. Changing this key also starts a fresh in-memory
-     * interaction-state lifetime; callers only provide stateKey — GenuiBlock
-     * owns the matching React identity.
+     * the same content. Changing an existing key starts a fresh interaction
+     * lifetime; a streaming instance adopts its first key without losing input.
+     * GenuiBlock owns the matching React identity.
      */
     stateKey?: string | undefined;
+    /** Animate newly arriving items; settled message replays opt out. */
+    animateEntrance?: boolean | undefined;
 }
 /** Per-question metadata registered by grouped radios for local grading. */
 export interface QuestionMeta {