@changfenhuang/dsh-genui 0.9.8 → 0.9.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@changfenhuang/dsh-genui",
   "description": "GenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the ```dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/plugin/index.d.ts",
@@ -65,21 +65,82 @@
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-client-ui-input-trigger": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-client-ui-tool": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
-    "@deepseek-ai/dsh-tools": "^0.1.0-rc.8 || >=0.1.1-rc.0 <0.2.0 || ^0.1.2-rc.1 || ^0.1.3-alpha.1",
+    "@deepseek-ai/dsh-api-session-controller": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-store": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-chat": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-input-trigger": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-tool": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-invariants": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-llm": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-session": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-skill": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-tools": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
+    "@deepseek-ai/dsh-util-values": "^0.1.2-rc.1 || ^0.1.5-alpha.1",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@deepseek-ai/cordis": "4.0.2",
+    "@deepseek-ai/cordis-plugin-include": "1.0.7",
+    "@deepseek-ai/cordis-plugin-loader": "1.0.3",
+    "@deepseek-ai/dsh-agent": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-agent-default-model": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-agent-presets": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-api-gateway": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-api-session-controller": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-atomic-write": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-attachment": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-brand": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-connection": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-store": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-chat": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-input-trigger": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-session": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-tool": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-code-runtime": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-credentials": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-deque": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-file-reference": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-home-paths": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-invariants": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-jobs": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-llm": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-native-command": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-sandbox": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-sandbox-policy": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-scope": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-session": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-session-persistence": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-session-projection": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-session-projection-cache": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-session-query": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-session-title": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-settings": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-skill": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-storage": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-storage-domain": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-subagent": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-system-prompt": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-timeout": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-tool-todo": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-tools": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-typert-protocol": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-typert-registry": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-user-approval": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-util-crypto": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-util-time": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-util-values": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-util-workspace-path": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-workspace": "0.1.2-rc.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^22.19.0",

package/src/client/GenuiBlock.tsx

@@ -74,15 +74,13 @@ function specEquivalent(a: GenuiSpec, b: GenuiSpec): boolean {
 function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
   const gap = spec.gap ?? 16
   const onAction = useDebouncedAction(useGenuiAction())
-  // v2.5/v2.6 answers registry: grouped radios record selections + question
-  // metadata here; `submit` nodes grade locally (locked until 重新作答) or
-  // collect into one action. Block-local state survives re-renders (streaming
-  // settle, panel updates) — selections persist while the block is mounted.
-  // v2.7 durability: with a stateKey the state ALSO survives refresh/reopen —
-  // loaded once at mount (seed for re-renders of the same content) and saved
-  // on every change.
+  // Grouped radios and grouped checkboxes record their local selections here;
+  // `submit` either grades radio-only papers locally or aggregates all form
+  // state into one action. Block-local state survives streaming/panel
+  // re-renders, and with a stateKey it also survives refresh/reopen.
   const [persisted] = useState(() => (stateKey === undefined ? null : loadBlockState(stateKey)))
   const [answers, setAnswers] = useState<Record<string, string>>(persisted?.answers ?? {})
+  const [multiAnswers, setMultiAnswers] = useState<Record<string, string[]>>(persisted?.multiAnswers ?? {})
   const [fields, setFields] = useState<Record<string, string>>(persisted?.fields ?? {})
   const [meta, setMeta] = useState<Record<string, QuestionMeta>>({})
   const [locked, setLocked] = useState(persisted?.locked === true)
@@ -94,6 +92,22 @@ function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
   const setAnswer = useCallback((group: string, choice: string) => {
     setAnswers(prev => (prev[group] === choice ? prev : { ...prev, [group]: choice }))
   }, [])
+  const setMultiAnswer = useCallback((group: string, choice: string, checked: boolean) => {
+    setMultiAnswers(prev => {
+      const current = prev[group] ?? []
+      const next = checked
+        ? current.includes(choice) ? current : [...current, choice]
+        : current.filter(item => item !== choice)
+      const hadGroup = Object.prototype.hasOwnProperty.call(prev, group)
+      if (hadGroup && next.length === current.length && next.every((item, index) => item === current[index])) {
+        return prev
+      }
+      // Keep an explicit empty array: it distinguishes "user cleared this
+      // group" from "group never had local state", so checked defaults do not
+      // reappear after a refresh.
+      return { ...prev, [group]: next }
+    })
+  }, [])
   const setField = useCallback((id: string, value: string) => {
     // Field invariant: a blank (trim-empty) value leaves the shared registry.
     setFields(prev => {
@@ -119,15 +133,16 @@ function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
   }, [])
   const clear = useCallback(() => {
     setAnswers({})
+    setMultiAnswers({})
     setLocked(false)
     setRound(r => r + 1) // radios remount (key carries the round) with clean selections
   }, [])
   const answersState = useMemo<AnswersState>(
     () => ({
-      answers, fields, secretFields, meta, locked, round,
-      setAnswer, setField, registerSecretField, registerMeta, clear, setLocked,
+      answers, multiAnswers, fields, secretFields, meta, locked, round,
+      setAnswer, setMultiAnswer, setField, registerSecretField, registerMeta, clear, setLocked,
     }),
-    [answers, fields, secretFields, meta, locked, round, setAnswer, setField, registerSecretField, registerMeta, clear],
+    [answers, multiAnswers, fields, secretFields, meta, locked, round, setAnswer, setMultiAnswer, setField, registerSecretField, registerMeta, clear],
   )
   // Achievement telemetry: every emitted action counts as one interaction
   // (the debounced emit fires once per real user action).
@@ -148,12 +163,13 @@ function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
       )
       saveBlockState(stateKey, {
         answers,
+        ...(Object.keys(multiAnswers).length > 0 ? { multiAnswers } : {}),
         locked,
         ...(Object.keys(safeFields).length > 0 ? { fields: safeFields } : {}),
       })
     }, 300)
     return () => clearTimeout(timer)
-  }, [stateKey, answers, locked, fields, secretFields])
+  }, [stateKey, answers, multiAnswers, locked, fields, secretFields])
   // Achievement telemetry (0.9.5): the store dedupes by spec fingerprint, so
   // streaming re-renders and replays count once per distinct content.
   useEffect(() => {

package/src/client/blocks/advanced.tsx

@@ -7,9 +7,10 @@
 import { memo, useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react'
 import { CodeBlock, DiffBlock, JsonTree, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
 import css from '../GenuiBlock.module.css'
-import { GENUI_LIMITS } from '../guard.ts'
+import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import { PlotBlock } from '../PlotBlock.tsx'
 import { renderNode } from './render-node.tsx'
+import { CODE_BLOCK_LABELS, DIFF_BLOCK_LABELS, JSON_TREE_LABELS } from '../primitive-labels.ts'
 import type { AnswersState, GenuiBlockProps } from './state.ts'
 import type {
   GenuiAccordion, GenuiBreadcrumb, GenuiCallout, GenuiCode, GenuiCopy, GenuiDiff, GenuiFileTree, GenuiFileTreeNode,
@@ -89,7 +90,7 @@ export const PlotNode = memo(function PlotNode({ plot }: { plot: GenuiPlot }) {
 
 /** Diff: 收编 dsh DiffBlock (same path/oldText/newText shape as DiffHunk). */
 export const DiffNode = memo(function DiffNode({ node }: { node: GenuiDiff }) {
-  return <DiffBlock diffs={node.diffs} />
+  return <DiffBlock diffs={node.diffs} labels={DIFF_BLOCK_LABELS} />
 })
 
 /** Json: 收编 dsh JsonTree. */
@@ -98,12 +99,12 @@ export const JsonNode = memo(function JsonNode({ node }: { node: GenuiJson }) {
   if (typeof data !== 'object' || data === null) {
     return <div className={css.jsonScalar}>{String(data)}</div>
   }
-  return <JsonTree data={data as object | unknown[]} copyable />
+  return <JsonTree data={data as object | unknown[]} label="JSON" labels={JSON_TREE_LABELS} copyable />
 })
 
 /** Code: 收编 dsh CodeBlock with explicit language. */
 export const CodeNode = memo(function CodeNode({ node }: { node: GenuiCode }) {
-  return <CodeBlock code={node.code.slice(0, GENUI_LIMITS.maxCode)} lang={node.lang} />
+  return <CodeBlock {...CODE_BLOCK_LABELS} code={node.code.slice(0, GENUI_LIMITS.maxCode)} lang={node.lang} />
 })
 
 /**
@@ -473,4 +474,4 @@ export const BreadcrumbNode = memo(function BreadcrumbNode({ node }: { node: Gen
  * names stay independent. The model round-trip takes seconds, so a few
  * hundred ms of trailing delay is imperceptible — and it stops bursts of
  * queued user turns.
- */
+ */

package/src/client/blocks/charts.tsx

@@ -5,7 +5,7 @@
  */
 import { memo, useState } from 'react'
 import css from '../GenuiBlock.module.css'
-import { GENUI_LIMITS } from '../guard.ts'
+import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import type { GenuiChart, GenuiTable } from '../spec.ts'
 
 export const CHART_COLORS = [

package/src/client/blocks/checkbox.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import css from '../GenuiBlock.module.css'
+import type { GenuiCheckbox } from '../spec.ts'
+import type { AnswersState, GenuiBlockProps } from './state.ts'
+
+/**
+ * Checkbox with two backwards-compatible modes:
+ *
+ * - no `group`: legacy local toggle + optional per-click action;
+ * - with `group`: local-only multi-select state collected by a sibling submit.
+ *
+ * A persisted group key wins over `checked`, including an explicit empty
+ * array. This lets a user clear every default-checked option without those
+ * defaults reappearing after refresh.
+ */
+export function CheckboxNode({ node, onAction, answers }: {
+  node: GenuiCheckbox
+  onAction?: GenuiBlockProps['onAction']
+  answers?: AnswersState | undefined
+}) {
+  const group = node.group
+  const grouped = group !== undefined
+  const hasRecordedGroup = group !== undefined
+    && Object.prototype.hasOwnProperty.call(answers?.multiAnswers ?? {}, group)
+  const recorded = group === undefined ? undefined : answers?.multiAnswers[group]
+  const groupChecked = hasRecordedGroup
+    ? Array.isArray(recorded) && recorded.includes(node.label)
+    : node.checked === true
+  const [checked, setChecked] = useState(node.checked === true)
+
+  useEffect(() => {
+    if (group === undefined || node.checked !== true || hasRecordedGroup) return
+    // Model-provided defaults are real initial selections, but never override
+    // a restored user choice (including an explicitly empty group).
+    answers?.setMultiAnswer(group, node.label, true)
+    // answers is intentionally omitted: the callbacks are stable and a
+    // registry update should not re-register the same default.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [group, node.checked, node.label, hasRecordedGroup])
+
+  return (
+    <label className={css.checkbox}>
+      <input
+        type="checkbox"
+        checked={grouped ? groupChecked : checked}
+        onChange={e => {
+          const next = e.currentTarget.checked
+          setChecked(next)
+          if (grouped) {
+            // Aggregation mode: update local multi-answer state only.
+            answers?.setMultiAnswer(group, node.label, next)
+          } else if (node.action !== undefined && onAction !== undefined) {
+            onAction(node.action, { type: 'checkbox', checked: next })
+          }
+        }}
+      />
+      <span>{node.label}</span>
+    </label>
+  )
+}

package/src/client/blocks/diagram/index.tsx

@@ -10,7 +10,7 @@
  */
 import { useMemo } from 'react'
 import type { GenuiDiagram } from '../../spec.ts'
-import { GENUI_LIMITS } from '../../guard.ts'
+import { GENUI_LIMITS } from '../../genui-runtime/index.ts'
 import { resolveLayout } from './layout.ts'
 import { routeEdge, labelGeometry, type Box } from './geometry.ts'
 import { resolvePalette, nodeTreatment, edgeStroke, inkAt } from './theme.ts'

package/src/client/blocks/forms.tsx

@@ -5,7 +5,7 @@
  */
 import { useEffect, useId, useRef, useState } from 'react'
 import css from '../GenuiBlock.module.css'
-import { GENUI_LIMITS } from '../guard.ts'
+import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import type { AnswersState, GenuiBlockProps, QuestionMeta } from './state.ts'
 import type { GenuiInput, GenuiRadio, GenuiSelect, GenuiSlider, GenuiSubmit, GenuiSwitch, GenuiTextarea } from '../spec.ts'
 
@@ -82,20 +82,16 @@ export function correctLabelOf(m: QuestionMeta): string | undefined {
   return m.answer
 }
 
-/** Submit: the "交卷" control of a grouped-radio block. LOCAL-FIRST (v2.6):
- * when at least one question carries `answer` data the click grades IN PLACE
- * — score, per-question right/wrong, explanations — with zero model round
- * trip, and locks the questions until 重新作答 resets them. Only when NO
- * question has answers does it fall back to firing ONE action
- * (`{type:'submit', answers, total, answered}`). Disabled until the
- * selection criteria are met (all listed groups answered, or ≥1 answer
- * without a group list); the hint shows the progress. */
+/** Submit: collect grouped radio and checkbox answers. Radio-only scopes keep
+ * LOCAL-FIRST grading; when checkbox selections participate, the click falls
+ * back to the aggregation action so multi-select data is never discarded. */
 export function SubmitNode({ node, onAction, answers }: {
   node: GenuiSubmit
   onAction?: GenuiBlockProps['onAction']
   answers?: AnswersState | undefined
 }) {
   const recorded = answers?.answers ?? {}
+  const multiRecorded = answers?.multiAnswers ?? {}
   const fields = answers?.fields ?? {}
   const meta = answers?.meta ?? {}
   const expected = node.groups
@@ -104,21 +100,35 @@ export function SubmitNode({ node, onAction, answers }: {
   const filledFields = Object.fromEntries(
     Object.entries(fields).filter(([id, v]) => v.trim() !== '' && !answers?.secretFields.has(id)),
   )
-  // Without an explicit group list, the submit counts radio answers AND
-  // filled fields — a fields-only form (inputs with id + submit) enables
-  // once any field has a value.
+  const nonEmptyMultiGroups = Object.entries(multiRecorded)
+    .filter(([, values]) => Array.isArray(values) && values.length > 0)
+    .map(([group]) => group)
+  const recordedGroups = new Set([...Object.keys(recorded), ...nonEmptyMultiGroups])
+  const hasRecordedAnswer = (group: string): boolean =>
+    recorded[group] !== undefined || (Array.isArray(multiRecorded[group]) && multiRecorded[group]!.length > 0)
+
+  // Explicit groups require at least one selected checkbox (or a radio answer)
+  // per group. Empty checkbox arrays remain durable state but are deliberately
+  // not considered "answered".
   const answered = expected === undefined
-    ? Math.max(Object.keys(recorded).length, Object.keys(filledFields).length)
-    : expected.filter(g => recorded[g] !== undefined).length
+    ? Math.max(recordedGroups.size, Object.keys(filledFields).length)
+    : expected.filter(hasRecordedAnswer).length
   const total = expected?.length ?? answered
-  const scope = expected ?? Object.keys(recorded)
-  // Local grading is possible when ANY in-scope question carries answers.
-  const canGradeLocally = scope.some(g => meta[g]?.answer !== undefined)
+  const scope = expected ?? [...recordedGroups]
+  const hasMultiInScope = scope.some(group =>
+    Array.isArray(multiRecorded[group]) && multiRecorded[group]!.length > 0,
+  )
+  // Local grading must be radio-only. Otherwise grading would consume the
+  // click and silently omit checkbox selections that need model delivery.
+  const canGradeLocally = !hasMultiInScope && scope.some(group => meta[group]?.answer !== undefined)
   const submitted = answers?.locked === true
+  const collectedAnswers: Record<string, string | string[]> = {
+    ...recorded,
+    ...multiRecorded,
+  }
   // Ready = enough answers AND the click can do something: either local
   // grading, or a real action name + provider. A submit with neither is a
-  // display-only control — honest disabled affordance (action is optional:
-  // local grading needs no round trip).
+  // display-only control — honest disabled affordance.
   const ready = answered > 0 && answered >= total
     && (canGradeLocally || (node.action !== undefined && onAction !== undefined))
 
@@ -191,7 +201,7 @@ export function SubmitNode({ node, onAction, answers }: {
             // the optional-action type honest.
             onAction(node.action, {
               type: 'submit',
-              answers: recorded,
+              answers: collectedAnswers,
               ...(Object.keys(filledFields).length > 0 ? { fields: filledFields } : {}),
               total,
               answered,
@@ -396,11 +406,16 @@ export function InputNode({ node, onAction, answers }: {
   const action = node.action
   const id = node.id
   const secret = node.inputType === 'password'
-  // Initial value: spec default, else durable state (restored after refresh).
-  // Secrets restore as blank: a password that survives a refresh would be a
-  // stored secret, which is exactly what the boundary forbids.
-  const [value, setValue] = useState<string>(() =>
-    secret ? '' : (node.value ?? (id !== undefined ? answers?.fields[id] ?? '' : '')))
+  const restored = !secret && id !== undefined ? answers?.fields[id] : undefined
+  // Initial value: durable state wins over the spec default. Secrets always
+  // restore as blank so a password can never survive a refresh.
+  const [value, setValue] = useState<string>(() => {
+    const initial = secret ? '' : (restored ?? node.value ?? '')
+    // Match the native color input's opaque hex value, including its black default.
+    return node.inputType === 'color'
+      ? /^#[0-9a-f]{6}$/i.test(initial) ? initial.toLowerCase() : '#000000'
+      : initial
+  })
   // Last value actually DELIVERED to the model: blur only sends when the
   // value changed since the last delivery (a focus-in/focus-out with no edit
   // used to fire a pointless action round trip). Seeded with the mount value
@@ -413,13 +428,13 @@ export function InputNode({ node, onAction, answers }: {
     }
   }
   const ime = useImeComposing()
-  // Field invariant: a spec-provided non-blank default registers at mount.
+  // Register the displayed initial value, including the native color default.
   const mounted = useRef(false)
   useEffect(() => {
     if (mounted.current) return
     mounted.current = true
-    if (!secret && id !== undefined && node.value !== undefined && node.value.trim() !== '') {
-      answers?.setField(id, node.value)
+    if (!secret && id !== undefined && value.trim() !== '') {
+      answers?.setField(id, value)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -434,6 +449,14 @@ export function InputNode({ node, onAction, answers }: {
       <input
         className={css.input}
         type={node.inputType ?? 'text'}
+        style={node.inputType === 'color' ? {
+          width: 64,
+          height: 40,
+          padding: 4,
+          boxSizing: 'border-box',
+          alignSelf: 'flex-start',
+          cursor: 'pointer',
+        } : undefined}
         placeholder={node.placeholder}
         value={value}
         onChange={e => {

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

@@ -7,7 +7,7 @@
 import { type ReactNode, type ComponentType } from 'react'
 import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
 import css from '../GenuiBlock.module.css'
-import { GENUI_LIMITS } from '../guard.ts'
+import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import type { GenuiList, GenuiNode } from '../spec.ts'
 import type { AnswersState, GenuiBlockProps } from './state.ts'
 import { AudioNode, avatarColor, ClickFeedbackButton, VideoNode } from './basic.tsx'
@@ -15,6 +15,7 @@ import { ChartNode, TableNode } from './charts.tsx'
 import {
   InputNode, RadioNode, SelectNode, SliderNode, SubmitNode, SwitchNode, TextareaNode,
 } from './forms.tsx'
+import { CheckboxNode } from './checkbox.tsx'
 import {
   AccordionNode, BreadcrumbNode, CalloutNode, CodeNode, CopyNode, DiffNode, FileTreeNode, JsonNode, KeyValueNode,
   MermaidNode, PlotNode, QuizNode, Scene3DNode, StepsNode, TabsNode, TimelineNode,
@@ -121,21 +122,7 @@ export function renderNode(
     }
     case 'input': return <InputNode key={key} node={node} onAction={onAction} answers={answers} />
     case 'select': return <SelectNode key={key} node={node} onAction={onAction} answers={answers} />
-    case 'checkbox': {
-      const action = node.action
-      return (
-        <label key={key} className={css.checkbox}>
-          <input
-            type="checkbox"
-            defaultChecked={node.checked === true}
-            onChange={action !== undefined && onAction !== undefined
-              ? e => onAction(action, { type: 'checkbox', checked: e.currentTarget.checked })
-              : undefined}
-          />
-          <span>{node.label}</span>
-        </label>
-      )
-    }
+    case 'checkbox': return <CheckboxNode key={key} node={node} onAction={onAction} answers={answers} />
     case 'link': {
       // Honest affordance: with a whitelisted href this is a REAL anchor;
       // without one it is plain styled text (a dead clickable-looking button

package/src/client/blocks/state.ts

@@ -1,8 +1,8 @@
 /**
  * Shared block-level state types: the block props contract and the answers
- * registry (grouped radios → submit grading). Lives OUTSIDE GenuiBlock.tsx so
- * the per-family block modules can import the types without a cycle back
- * into the block shell.
+ * registry (grouped radios / checkboxes → submit aggregation). Lives OUTSIDE
+ * GenuiBlock.tsx so the per-family block modules can import the types without
+ * a cycle back into the block shell.
  * @module @changfenhuang/dsh-genui/client/blocks/state
  */
 import type { GenuiSpec } from '../spec.ts'
@@ -18,10 +18,11 @@ export interface GenuiBlockProps {
   onAction?: ((action: string, payload: Record<string, unknown>) => void) | undefined
   /**
    * v2.7: durable-state key (session + slot + content fingerprint). When set,
-   * interaction state (radio answers, 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.
+   * 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.
    */
   stateKey?: string | undefined
 }
@@ -36,15 +37,17 @@ export interface QuestionMeta {
   explanation?: string | undefined
 }
 
-/** Block-wide answers registry (v2.5/v2.6): grouped radios record selections
- * and register their question metadata here; a sibling `submit` node either
- * grades IN PLACE (questions carry `answer` data) or collects everything
- * into ONE action. Lives in GenuiBlock state so re-renders keep the
- * selections, threaded down through the recursive render walk. Answers are
- * plain group → chosen-option-label strings (the display label lives in
- * QuestionMeta; localStorage stores the same string table — no migration). */
+/** Block-wide aggregation state. Grouped radios store one selected label in
+ * `answers`; grouped checkboxes store a selected-label array in
+ * `multiAnswers`. Keeping the registries separate preserves the existing
+ * radio/local-grading string contract while allowing submit to expose one
+ * unified `answers` payload (`string | string[]`). */
 export interface AnswersState {
   answers: Record<string, string>
+  /** Grouped checkbox selections. An empty array is meaningful: the user
+   * explicitly cleared the group, so model-provided `checked` defaults must
+   * not reappear after a durable restore. */
+  multiAnswers: Record<string, string[]>
   /** Field values by id (input/textarea with an `id`), collected by submit. */
   fields: Record<string, string>
   /** Field ids whose value must never be persisted or collected (secrets). */
@@ -55,6 +58,7 @@ export interface AnswersState {
   /** Bumped by every reset; radios use it as their remount key. */
   round: number
   setAnswer: (group: string, choice: string) => void
+  setMultiAnswer: (group: string, choice: string, checked: boolean) => void
   setField: (id: string, value: string) => void
   registerSecretField: (id: string) => void
   registerMeta: (group: string, meta: QuestionMeta) => void

package/src/client/dom-fence.tsx

@@ -47,7 +47,8 @@
 import { Fragment, isValidElement, type Key, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import type { Context } from '@deepseek-ai/cordis'
-import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type {} from '@deepseek-ai/dsh-api-session-controller/client'
+import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import { GenuiActionContext, type GenuiActionHandler } from './action-context.ts'
 import { renderResolvedFenceNode, type GenuiFenceContext } from './fence-render.tsx'