@changfenhuang/dsh-genui 0.10.0 → 0.11.0

package/src/client/blocks/render-node.tsx

@@ -166,8 +166,8 @@ function AnimatedValue({ value, unitClass, animate = false }: {
   const animated = useCountUp(target ?? 0, parts.decimals, animate && target !== undefined)
   return (
     <>
-      {target === undefined ? parts.num : animated}
-      {parts.unit !== '' && <span className={unitClass ?? css.statUnit}>{parts.unit}</span>}
+      {target === undefined ? renderInline(parts.num) : animated}
+      {parts.unit !== '' && <span className={unitClass ?? css.statUnit}>{renderInline(parts.unit)}</span>}
     </>
   )
 }
@@ -252,7 +252,7 @@ export function renderNode(
       } as CSSProperties
       return (
         <div key={key} className={`${css.card}${toneClass}`} style={accentStyle}>
-          {node.title !== undefined && <div className={css.cardTitle}>{node.title}</div>}
+          {node.title !== undefined && <div className={css.cardTitle}>{renderInline(node.title)}</div>}
           {node.items.map((c, i) => renderNode(c, i, onAction, depth + 1, answers))}
         </div>
       )
@@ -273,7 +273,7 @@ export function renderNode(
           onClick={interactive ? () => onAction(action, { type: 'button', label: node.label }) : undefined}
         >
           {node.icon !== undefined && <span aria-hidden>{node.icon} </span>}
-          {node.label}
+          {renderInline(node.label, false)}
         </ClickFeedbackButton>
       )
     }
@@ -286,8 +286,8 @@ export function renderNode(
       // was the same complaint class as the disabled-button fix).
       const href = node.href
       return href !== undefined
-        ? <a key={key} className={css.link} href={href} target="_blank" rel="noopener noreferrer">{node.label}</a>
-        : <span key={key} className={css.linkText}>{node.label}</span>
+        ? <a key={key} className={css.link} href={href} target="_blank" rel="noopener noreferrer">{renderInline(node.label, false)}</a>
+        : <span key={key} className={css.linkText}>{renderInline(node.label, false)}</span>
     }
     case 'image': return <ImageNode key={`${key}:${node.src}`} node={node} />
     case 'audio': return <AudioNode key={`${key}:${node.src}`} node={node} />
@@ -297,7 +297,7 @@ export function renderNode(
       return (
         <span key={key} className={`${css.badge} ${css[tone] || ''}`}>
           {node.icon !== undefined && <span aria-hidden>{node.icon} </span>}
-          {node.label}
+          {renderInline(node.label, false)}
         </span>
       )
     }
@@ -307,18 +307,18 @@ export function renderNode(
       const heroDown = node.delta !== undefined && node.delta.startsWith('-')
       return (
         <div key={key} className={`${css.hero} ${heroTone}`}>
-          {node.label !== undefined && <span className={css.heroLabel}>{node.label}</span>}
+          {node.label !== undefined && <span className={css.heroLabel}>{renderInline(node.label, false)}</span>}
           <div className={css.heroTop}>
             {node.value !== undefined && (
               <span className={css.heroValue}><AnimatedValue value={node.value} unitClass={css.heroUnit} animate /></span>
             )}
             {node.delta !== undefined && (
-              <span className={`${css.statDelta} ${heroDown ? css.down : css.up}`}>{node.delta}</span>
+              <span className={`${css.statDelta} ${heroDown ? css.down : css.up}`}>{renderInline(node.delta)}</span>
             )}
             {node.spark !== undefined && <span className={css.heroSpark}><Sparkline values={node.spark} /></span>}
           </div>
-          <span className={css.heroTitle}>{node.title}</span>
-          {node.subtitle !== undefined && <span className={css.heroSubtitle}>{node.subtitle}</span>}
+          <span className={css.heroTitle}>{renderInline(node.title)}</span>
+          {node.subtitle !== undefined && <span className={css.heroSubtitle}>{renderInline(node.subtitle)}</span>}
         </div>
       )
     }
@@ -326,11 +326,11 @@ export function renderNode(
       const down = node.delta !== undefined && node.delta.startsWith('-')
       return (
         <div key={key} className={`${css.stat}${node.size === 'hero' ? ` ${css.statHero}` : ''}`}>
-          <span className={css.statLabel}>{node.label}</span>
+          <span className={css.statLabel}>{renderInline(node.label, false)}</span>
           <span className={css.statValue}>
             <AnimatedValue value={node.value} animate={node.size === 'hero'} />
           </span>
-          {node.delta !== undefined && <span className={`${css.statDelta} ${down ? css.down : css.up}`}>{node.delta}</span>}
+          {node.delta !== undefined && <span className={`${css.statDelta} ${down ? css.down : css.up}`}>{renderInline(node.delta)}</span>}
           {node.spark !== undefined && <Sparkline values={node.spark} />}
         </div>
       )
@@ -368,8 +368,8 @@ export function renderNode(
             </svg>
             {(node.label !== undefined || node.valueLabel !== undefined) && (
               <div className={css.ringMeta}>
-                {node.label !== undefined && <span className={css.ringLabel}>{node.label}</span>}
-                {node.valueLabel !== undefined && <span className={css.ringSub}>{node.valueLabel}</span>}
+                {node.label !== undefined && <span className={css.ringLabel}>{renderInline(node.label, false)}</span>}
+                {node.valueLabel !== undefined && <span className={css.ringSub}>{renderInline(node.valueLabel)}</span>}
               </div>
             )}
           </div>
@@ -387,8 +387,8 @@ export function renderNode(
         >
           {(node.label !== undefined || node.valueLabel !== undefined) && (
             <div className={css.progressRow}>
-              <span>{node.label}</span>
-              {node.valueLabel !== undefined && <span>{node.valueLabel}</span>}
+              <span>{renderInline(node.label ?? '')}</span>
+              {node.valueLabel !== undefined && <span>{renderInline(node.valueLabel)}</span>}
             </div>
           )}
           <div className={css.track}>
@@ -413,7 +413,7 @@ export function renderNode(
             <div key={i} className={css.li}>
               {isListItemNode(item)
                 ? renderNode(item, i, onAction, depth + 1, answers)
-                : <><span className={css.liTitle}>{renderInline(typeof item === 'string' ? item : item.title)}</span>{typeof item !== 'string' && item.desc !== undefined && <span className={css.liDesc}>{renderInline(item.desc)}</span>}</>}
+                : <><div className={css.liTitle}>{renderInline(typeof item === 'string' ? item : item.title)}</div>{typeof item !== 'string' && item.desc !== undefined && <div className={css.liDesc}>{renderInline(item.desc)}</div>}</>}
             </div>
           ))}
           {bound !== undefined && <span className={css.filterHint}>匹配 {items.length} / {all.length} 项</span>}

package/src/client/blocks/state.ts

@@ -6,6 +6,7 @@
  * @module @changfenhuang/dsh-genui/client/blocks/state
  */
 import type { GenuiSpec } from '../spec.ts'
+import type { BlockInteractionState } from '../interaction-store.ts'
 
 export interface GenuiBlockProps {
   /** Parsed spec to render. */
@@ -27,6 +28,9 @@ export interface GenuiBlockProps {
   stateKey?: string | undefined
   /** Animate newly arriving items; settled message replays opt out. */
   animateEntrance?: boolean | undefined
+  /** Native hosts own durable state instead of the browser store. Read once per stateKey. */
+  initialState?: BlockInteractionState | undefined
+  onStateChange?: ((state: BlockInteractionState) => void) | undefined
 }
 
 /** Per-question metadata registered by grouped radios for local grading. */

package/src/client/dom-fence.tsx

@@ -159,7 +159,7 @@ function infostringOf(block: Element): string | null {
   const pre = block.querySelector('pre')
   for (const el of block.querySelectorAll('*')) {
     if (el.childElementCount !== 0) continue
-    if (el.textContent !== 'dsh-ui') continue
+    if (el.textContent?.trim() !== 'dsh-ui') continue
     if (pre !== null && pre.contains(el)) continue
     // A leaf label that belongs to a NESTED known code surface is that
     // surface's banner, not `block`'s own banner. Only accept labels whose
@@ -181,7 +181,7 @@ function labelTextOf(block: Element): string {
   for (const el of block.querySelectorAll('*')) {
     if (el.childElementCount !== 0) continue
     if (pre !== null && pre.contains(el)) continue
-    return el.textContent ?? ''
+    return el.textContent?.trim() ?? ''
   }
   return ''
 }
@@ -247,7 +247,10 @@ function findFenceCandidates(scope: ParentNode = document): HTMLElement[] {
     if (seen.has(el)) continue
     // Message-level containers that happen to carry a surface class must
     // not be taken over: hiding them hides the whole answer (issue #19).
-    if (!isPlausibleFenceSurface(el)) continue
+    if (!isPlausibleFenceSurface(el)) {
+      if (infostringOf(el) === 'dsh-ui') warnImplausibleSurface(el)
+      continue
+    }
     out.push(el)
     seen.add(el)
   }
@@ -263,10 +266,8 @@ function findFenceCandidates(scope: ParentNode = document): HTMLElement[] {
     if (surface === null) {
       // Diagnose the issue #19 guard: a labeled ancestor that is NOT a code
       // surface (prose/multiple code bodies) was skipped on purpose.
-      if (implausibleLabeledAncestorOf(pre, scope) !== null && !plausibilityWarned) {
-        plausibilityWarned = true
-        console.warn('[dsh-genui] 跳过带 dsh-ui 标签但疑似消息容器的节点（含段落或多个代码体）——防止 DOM 通道隐藏整条消息（issue #19）')
-      }
+      const rejected = implausibleLabeledAncestorOf(pre, scope)
+      if (rejected !== null) warnImplausibleSurface(rejected)
       continue
     }
     if (seen.has(surface)) continue
@@ -286,8 +287,16 @@ function findFenceCandidates(scope: ParentNode = document): HTMLElement[] {
 /** One-time-per-install drift diagnostic flag (reset per install, so tests
  * and hot re-installs each get a fresh warning budget). */
 let driftWarned = false
-/** One-time-per-install issue #19 guard diagnostic (same budget). */
-let plausibilityWarned = false
+/** A rejected surface gets one diagnostic; never log its conversation text. */
+let plausibilityWarned = new WeakSet<Element>()
+function warnImplausibleSurface(surface: Element): void {
+  if (plausibilityWarned.has(surface)) return
+  plausibilityWarned.add(surface)
+  const pres = surface.querySelectorAll('pre')
+  const tags = [...surface.querySelectorAll(BLOCK_CONTENT_SELECTOR)]
+    .filter(el => !el.closest('pre')).map(el => el.tagName.toLowerCase())
+  console.warn(`[dsh-genui] 跳过带 dsh-ui 标签但疑似消息容器的节点：pre=${pres.length}, outside-code=${[...new Set(tags)].join(',') || 'none'}；保留原文，防止隐藏整条消息（issue #19）`)
+}
 
 /** Root factory seam (tests / tuning): the DOM channel creates one React root
  * per taken-over fence through this indirection so mount-failure cleanup is
@@ -384,7 +393,7 @@ export function installDomFenceRenderer(
 ): () => void {
   if (typeof document === 'undefined') return () => {}
   driftWarned = false
-  plausibilityWarned = false
+  plausibilityWarned = new WeakSet<Element>()
   const mounts = new Map<HTMLElement, Mount>()
   let disposed = false
   let rafId: number | null = null

package/src/client/embed.ts

@@ -0,0 +1,9 @@
+/// <reference path="../css-modules.d.ts" />
+/** Public bundler entry for hosts that embed GenUI without the DSH plugin runtime. */
+export { GenuiBlock } from './GenuiBlock.tsx'
+export { GenuiActionContext } from './action-context.ts'
+export { ErrorBoundary } from './ErrorBoundary.tsx'
+export { isRenderableProcess, processGenuiSpec } from './guard.ts'
+export { setGenuiAssetBase } from './asset-loader.ts'
+export type { GenuiSpec } from './spec.ts'
+export type { BlockInteractionState } from './interaction-store.ts'

package/src/client/gallery.ts

@@ -178,6 +178,12 @@ export const gallerySpec: GenuiSpec = {
     ] },
     { type: 'code', lang: 'json', code: '{"hello": "world"}' },
     { type: 'mermaid', code: 'graph TD\nA[模型] --> B[渲染器]\nB --> C[组件]' },
+    { type: 'diagram', kind: 'architecture', title: '架构图（配色跟随宿主令牌）', nodes: [
+      { id: 'm', label: '模型', type: 'external', x: 20, y: 40, w: 100, h: 44 },
+      { id: 'f', label: '围栏 JSON', type: 'focal', x: 160, y: 40, w: 112, h: 44 },
+      { id: 'g', label: 'guard', type: 'backend', x: 312, y: 40, w: 104, h: 44 },
+      { id: 's', label: '组件库', type: 'store', x: 456, y: 40, w: 100, h: 44 },
+    ], edges: [{ from: 'm', to: 'f' }, { from: 'f', to: 'g' }, { from: 'g', to: 's' }] },
     { type: 'scene3d', title: '几何演示', ambient: 1, meshes: [
       { shape: 'box', color: '#4f8ef7', position: [-1.4, 0, 0], rotation: [0.5, 0.8, 0] },
       { shape: 'sphere', color: '#3ecf8e', position: [0, 0, 0] },

package/src/client/guard.ts

@@ -1061,7 +1061,11 @@ function repairDiagram(v: unknown): GenuiDiagram | null {
   const zones = repairDiagramZones(o.zones)
   if (zones === undefined) return null
   return {
-    type: 'diagram', kind, nodes, edges, zones,
+    // `zones` is optional: emitting `zones: []` made every diagram node differ
+    // from its input for no reason (and broke the "gallery survives the guard
+    // unchanged" contract).
+    type: 'diagram', kind, nodes, edges,
+    ...opt('zones', zones.length > 0 ? zones : undefined),
     ...opt('variant', enu(o.variant, DIAGRAM_VARIANTS)),
     ...opt('title', str(o.title, 256)),
     ...opt('theme', repairDiagramTheme(o.theme)),
@@ -1196,7 +1200,7 @@ function sanitizeEChartOption(v: unknown, depth: number, budget: EChartSanitizeB
       const s = sanitizeEChartOption(v[i], depth + 1, budget)
       if (s !== undefined) arr.push(s)
     }
-    return arr.length > 0 ? arr : undefined
+    return arr.length > 0 || v.length === 0 ? arr : undefined
   }
   const o = obj(v)
   if (o === undefined) return undefined
@@ -1212,7 +1216,9 @@ function sanitizeEChartOption(v: unknown, depth: number, budget: EChartSanitizeB
     }
     out[key] = s
   }
-  return Object.keys(out).length > 0 ? out : undefined
+  // Empty axes/tooltip enable ECharts defaults; an empty data array clears it.
+  // Keep intentional empties, while still dropping objects stripped by guards.
+  return Object.keys(out).length > 0 || Object.keys(o).length === 0 ? out : undefined
 }
 
 /**

package/src/client/inline.ts

@@ -1,45 +1,34 @@
-/**
- * Minimal inline markup for text-bearing fields.
- *
- * Prose-heavy answers need emphasis INSIDE a sentence: a command, a term, a key
- * phrase, a link. Until now every field was a plain string, so emphasis meant
- * splitting one sentence into several nodes and the paragraph read as broken.
- *
- * Supported (deliberately tiny, no nesting):
- *   `code`            inline code chip
- *   **bold**          emphasis that does not wrap or become a block
- *   ==mark==          highlight
- *   [text](https://…) inline link (http/https/mailto only)
- *
- * Safety: this NEVER produces HTML. Each token becomes a React element, so the
- * host's HTML parser is never involved (the whole client builds elements, the
- * only innerHTML in the project is mermaid's sanitized SVG). An unterminated or
- * unknown marker is rendered literally rather than erroring, and a link whose
- * href fails {@link safeHref} degrades to its label text.
- * @module @changfenhuang/dsh-genui/client/inline
- */
-import { createElement, type ReactNode } from 'react'
+/** Shared rich text for GenUI labels and content. Data values stay unchanged. */
+import { createElement, useLayoutEffect, useRef, type ReactNode } from 'react'
+import katex from 'katex'
 import css from './GenuiBlock.module.css'
 import { safeHref } from './genui-runtime/value-utils.ts'
 
-/** One pass, no nesting: each alternative is a self-contained token. */
-// Links match ANY target here and are validated by safeHref afterwards, so a
-// `javascript:` target degrades to its label text instead of showing as raw
-// markup the reader has to parse themselves.
-const INLINE = /`[^`\n]+`|\*\*[^*\n]+\*\*|==[^=\n]+==|\[[^\]\n]+\]\([^)\s]+\)/g
+/** KaTeX owns this span's children; React owns the span and its lifecycle.
+ * The host's ui-primitives already supplies KaTeX CSS/fonts, including embeds. */
+function InlineMath({ source, display }: { source: string; display: boolean }) {
+  const ref = useRef<HTMLSpanElement>(null)
+  useLayoutEffect(() => {
+    if (ref.current === null) return
+    katex.render(source, ref.current, {
+      displayMode: display, throwOnError: false, trust: false,
+      maxExpand: 1000, maxSize: 20, output: 'htmlAndMathml',
+    })
+  }, [source, display])
+  return createElement('span', { ref, className: css.inlineMath })
+}
+
+// Code is literal. TeX tokens are opaque to emphasis/link parsing; the other
+// rich-text tokens recurse so **$x$** and ==\\(x\\)== work without nested DOM roots.
+const INLINE = /`[^`\n]+`|\\\\|\\\$|(?<![\\$])\$\$(?:\\.|[^\\])*?\$\$|\\\[(?:\\(?!\])[^]|[^\\])*?\\\]|\\\((?:\\(?!\))[^]|[^\\])*?\\\)|(?<![\\$])\$(?!\s|\$)(?:\\.|[^$\\\n])+(?<!\s)\$(?!\d|\$)|\*\*[\s\S]+?\*\*|==[\s\S]+?==|\[[^\]\n]+\]\([^)\s]+\)/g
 
-/** True when the string contains anything the parser understands. */
 export function hasInlineMarkup(text: string): boolean {
-  return typeof text === 'string' && /[`*=]|\[/.test(text)
+  return typeof text === 'string' && /[`*=$\\]|\[/.test(text)
 }
 
-/**
- * Render one string as React nodes with inline markup applied.
- * @param text - the raw field value.
- * @returns the original string when nothing matched, else the node list.
- */
-export function renderInline(text: string): ReactNode {
-  if (typeof text !== 'string' || text === '' || !hasInlineMarkup(text)) return text
+/** Render safe phrasing content, usable in headings, buttons and labels too. */
+export function renderInline(text: string, allowLinks = true, depth = 0): ReactNode {
+  if (typeof text !== 'string' || text === '' || !hasInlineMarkup(text) || depth >= 8) return text
   const out: ReactNode[] = []
   let last = 0
   let key = 0
@@ -49,21 +38,24 @@ export function renderInline(text: string): ReactNode {
     if (index > last) out.push(text.slice(last, index))
     if (token.startsWith('`')) {
       out.push(createElement('code', { key: key++, className: css.inlineCode }, token.slice(1, -1)))
-    } else if (token.startsWith('**')) {
-      out.push(createElement('strong', { key: key++, className: css.inlineStrong }, token.slice(2, -2)))
-    } else if (token.startsWith('==')) {
-      out.push(createElement('mark', { key: key++, className: css.inlineMark }, token.slice(2, -2)))
+    } else if (token.startsWith('$') || token.startsWith('\\(') || token.startsWith('\\[')) {
+      const display = token.startsWith('$$') || token.startsWith('\\[')
+      const width = token.startsWith('$') && !display ? 1 : 2
+      out.push(createElement(InlineMath, { key: key++, source: token.slice(width, -width), display }))
+    } else if (token.startsWith('**') || token.startsWith('==')) {
+      const bold = token.startsWith('**')
+      out.push(createElement(bold ? 'strong' : 'mark', {
+        key: key++, className: bold ? css.inlineStrong : css.inlineMark,
+      }, renderInline(token.slice(2, -2), allowLinks, depth + 1)))
     } else {
       const parts = /^\[([^\]\n]+)\]\(([^)\s]+)\)$/.exec(token)
       if (parts === null) {
         out.push(token)
       } else {
         const href = safeHref(parts[2])
-        out.push(href === undefined
-          ? parts[1]
-          : createElement('a', {
-            key: key++, className: css.inlineLink, href, target: '_blank', rel: 'noreferrer noopener',
-          }, parts[1]))
+        out.push(href === undefined || !allowLinks ? renderInline(parts[1]!, false, depth + 1) : createElement('a', {
+          key: key++, className: css.inlineLink, href, target: '_blank', rel: 'noreferrer noopener',
+        }, renderInline(parts[1]!, false, depth + 1)))
       }
     }
     last = index + token.length

package/src/plugin/index.ts

@@ -92,26 +92,27 @@ export const GENUI_SECTION_TEXT = `You can render interactive UI components INSI
 {"title":"可选标题","gap":14,"items":[...]}
 \`\`\`
 
-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:
+Allowed \`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 · hero（封面块：超大数字 + 标题 + tone 渐变底色，一条回答最多一个）
 - 展示: badge · stat · progress · list · table · keyvalue · avatar · audio · video · timeline · file-tree · breadcrumb · callout · steps · diff · json · code · copy
-- 图表: 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 (函数图)
+- 图表: chart {"kind":"bars|line|donut","data":[{"label":"...","value":n}],"series":[{"label":"...","data":[...]}]?,"horizontal":true?,"stacked":true?}（series：bars 分组/堆叠 / line 多序列；horizontal 横向柱） · echart (preset 名或 option 直通，预设清单见 skill) · 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)
+- 高级: mermaid (流程图/时序/类图/甘特/饼图/ER/状态/旅程，关键字见 skill) · diagram (架构/流程图) · 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)：重点留在句中，不必为一个词单起组件。
+- 行内富文本：\`text\`/\`list\`/表格文本列/\`keyvalue\`/\`callout\` 里可写 $公式$、$$块公式$$、\`code\`、**加粗**、==高亮==、[文字](url)：重点留在句中，不必为一个词单起组件。
 - 默认无卡 ≠ 少用组件：硬触发照常出组件，**组件多不是问题**——判据是每个组件承载不同信息、有焦点与层次、同一批数据不重复表达。卡片只用于并排项与数据对象；单段文字用「标题 + 正文 + 间距」。
 
-**发回答前最后自检一次**：这段内容里有没有 ≥3 条并列要点、任何对比、任何数字/指标、任何步骤或流程？有就先转成组件再开口。**状态汇报、进度说明、提交与改动清单同样算**——不要因为它是"说明文"就用纯文字写。这一条踩过的坑：连续几条汇报全靠文字，一条围栏都没发。
+**发回答前最后自检一次**：这段内容里有没有 ≥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"?}\`
+**字段速查**（完整见 genui skill）：\`stat\` \`{"label","value","delta"?}\` · \`table\` \`{"columns":[...],"rows":[[...]],"types"?,"total"?:true,"details"?:[[...]],"filter"?:id,"export"?:true}\` · \`callout\` \`{"tone":"info|success|warning|error","title","content"}\` · \`progress\` \`{"value":0-100,"label"?,"variant"?,"target"?}\` · \`keyvalue\` \`{"pairs":[{"key","value"}]}\` · \`steps\` \`{"steps":[{"title","desc"?}]}\`
 
 Rules:
+- Match the user’s language in prose and UI text. Chinese examples are schema examples, not a language instruction. Keep JSON keys/type values unchanged.
 - JSON 严格: 坏围栏降级为代码块；≥3 节点或含 table 的围栏发出前调用 validate_dsh_ui，❌ 修好再发（若附「已自动修复」JSON 照抄即可）。
 - 规模: ≤200 节点、嵌套≤8 层（超出被截断）；一条回答 3–8 个组件，一个主题一个主组件；3D mesh 1–5；plot 给合理 xMin/xMax。
 - LOCAL-FIRST + actions: UI 能自己做的状态变化（判卷、判题、重置、展开、选中）就地完成，零往返；action 只用于必须模型参与的事。交互组件带 "action":"name"，交互以 [genui-action] name + 组件数据回传，届时重渲染更新 UI；无 action 的按钮禁用。
@@ -129,6 +130,7 @@ Rules:
 // plugin — hosts without tool access keep the fence channel working. Cordis
 // inject entries are hard requirements, so the registry is probed at runtime
 // instead (see apply).
+export const name = '@changfenhuang/dsh-genui'
 export const inject = ['systemPrompt']
 
 const BUNDLED_SKILL_RANK = 600

package/src/plugin/tool.ts

@@ -164,11 +164,11 @@ function formatProcessFailure(processed: GenuiProcessResult): string | undefined
   return chartErrors.length === 0 ? undefined : `❌ chart 字段验证失败：\n- ${chartErrors.join('\n- ')}`
 }
 
-/** Return the legacy validation text for a process that dropped native nodes. */
+/** Report dropped components without hiding their actionable field errors. */
 function droppedNodeFailure(processed: GenuiProcessResult): string | undefined {
   if (!processed.errors.some(error => error.startsWith('repair dropped '))) return undefined
   const dropped = processed.declaredNativeCount - processed.renderedNativeCount
-  return `❌ 验证未通过：检测到声明了 ${processed.declaredNativeCount} 个组件，但仅成功解析出 ${processed.renderedNativeCount} 个（有 ${dropped} 个组件因字段格式异常被丢弃）。常见原因：table 的 columns/rows 不是二维字符串数组、tabs 的 items/content 缺失、嵌套组件字段类型不符。请修正后重新验证。`
+  return `❌ 验证未通过：检测到声明了 ${processed.declaredNativeCount} 个组件，但仅成功解析出 ${processed.renderedNativeCount} 个（有 ${dropped} 个组件因字段格式异常被丢弃）。请修正后重新验证。\n- ${processed.errors.join('\n- ')}`
 }
 
 /** Tool-call title shared by the pending and completed presentations. */