dsh-knj-workflow 2026.8.280 → 2026.8.282

package/lib/client.js

@@ -574,7 +574,8 @@ window.__ModuleLoader__.load({
 					return u;
 				});
 				const edges = wf.edges.map((e) => ({ ...e, from: e.from === oldId ? newId : e.from, to: e.to === oldId ? newId : e.to }));
-				this.setState({ wf: { ...wf, nodes, edges } });
+				// 同步选中态：正在编辑的节点改名后 selectedId 仍指向旧 id 会让属性面板消失
+				this.setState({ wf: { ...wf, nodes, edges }, selectedId: this.state.selectedId === oldId ? newId : this.state.selectedId });
 				toast('阶段编码已更新为 ' + newId + '；prompt 里的 ${' + oldId + '.字段} 引用请手动改为 ${' + newId + '.字段}');
 			}
 			addNode(type) {
@@ -1304,7 +1305,7 @@ window.__ModuleLoader__.load({
 					fieldLabel('节点标题（显示名）', '节点在画布和阶段列表里显示的名称，如「需求分析」。仅作展示，不影响引用。', '画布与阶段列表里的显示名'),
 					react.createElement('input', { className: 'knj-input', style: { marginBottom: 8 }, placeholder: '如：需求分析', value: node.title || '', onChange: (e) => this.patchNode(node.id, { title: e.target.value }) }),
 					fieldLabel('节点编码（id）', '节点唯一标识：下游用 ${编码.字段} 引用（如 ${analyze.description}），网关用字段值做分支判断。修改后 prompt 里旧的 ${旧编码.字段} 引用需手动更新。', '下游用 ${编码.字段} 引用，如 ${analyze.description}'),
-					react.createElement('input', { className: 'knj-input', style: { marginBottom: 8 }, placeholder: '如：analyze', defaultValue: node.id || '', onBlur: (e) => this.patchNodeId(node.id, e.target.value.trim()) }),
+					react.createElement('input', { key: 'node-code-' + node.id, className: 'knj-input', style: { marginBottom: 8 }, placeholder: '如：analyze', defaultValue: node.id || '', onBlur: (e) => this.patchNodeId(node.id, e.target.value.trim()) }),
 					isTask ? react.createElement('div', null,
 						fieldLabel('行为 prompt（主体）', '本节点让 AI 做什么，写清目标与约束。\n可引用：\n${inputDescription}（任务需求描述）\n${inputTitle}（标题）\n${storyCode}（用户故事编码，可选）\n${cwd}（任务工作目录；运行时还会自动向 subagent 声明该目录）\n${inputs.参数名}（任务输入）\n\n上游输出引用（${上游编码.字段}）：\n' + this.buildRefsText(node) + '\n\n注意：XOR 分支未执行的节点引用为空；整节点输出用 ${节点id}；${ctx.前缀写法仍兼容。', '让 AI 做什么；可引用 ${inputDescription}、${storyCode}、${cwd}、${上游编码.字段}（ⓘ 看完整清单）'),
 						react.createElement('textarea', { className: 'knj-textarea', style: { minHeight: 140 }, placeholder: '如：根据需求 ${inputDescription} 输出功能描述与验收标准', value: node.body?.prompt || '', onChange: (e) => this.patchNode(node.id, { body: { ...node.body, prompt: e.target.value } }) }),
@@ -1367,7 +1368,7 @@ window.__ModuleLoader__.load({
 							react.createElement('option', { value: 'boolean' }, 'boolean'),
 							react.createElement('option', { value: 'array' }, 'array'),
 						),
-						type === 'string' ? react.createElement('input', { className: 'knj-input', style: { flex: 1, minWidth: 0 }, placeholder: '枚举（逗号分隔，可选）', defaultValue: (schema?.enum || []).join(','), onBlur: (e) => this.patchOutputFieldEnum(node.id, field, e.target.value) }) : null,
+						type === 'string' ? react.createElement('input', { key: 'enum-' + node.id + '-' + field, className: 'knj-input', style: { flex: 1, minWidth: 0 }, placeholder: '枚举（逗号分隔，可选）', defaultValue: (schema?.enum || []).join(','), onBlur: (e) => this.patchOutputFieldEnum(node.id, field, e.target.value) }) : null,
 					),
 					// 字段说明：直接输入框编辑（含义 / 格式 / 来源，注入 subagent 的输出 schema），不再用弹窗
 					react.createElement('input', { className: 'knj-input', style: { marginTop: 4, fontSize: 12 }, placeholder: '字段说明（含义 / 格式 / 来源，会注入 subagent 的输出 schema）', value: desc, onChange: (e) => this.patchOutputFieldDescription(node.id, field, e.target.value) }),

package/lib/repro-node-code-overwrite.mjs

@@ -0,0 +1,178 @@
+/**
+ * 回归测试：编排时切换流程节点，节点编码被覆盖（曾报告为 bug）。
+ *
+ * 修复前（client.js line 1307）：节点编码输入框是非受控输入（defaultValue + onBlur->patchNodeId）
+ * 且没有 key，切换 selectedId 时 React 复用 DOM 元素，输入框残留上一个节点的编码，
+ * blur 时把残留值提交给新选中节点 → 编码被覆盖。同类的还有输出字段枚举输入框（line 1370）。
+ * 修复：两处输入框都补上按 node.id 区分的 key，强制切换节点时重挂载；
+ * 另 patchNodeId 同步 selectedId，避免编辑当前节点编码后面板消失。
+ *
+ * 覆盖路径：
+ *  A) 切换节点后输入框残留上一个节点的值（显示被覆盖）
+ *  B) 残留值在 blur 时提交到新节点
+ *  C) 同类根因：输出字段枚举输入框切换节点后残留上一个节点的枚举
+ *  D) 编辑当前节点编码后选中态应保持（selectedId 跟随新 id）
+ *
+ * 运行（需 react/react-dom/jsdom）：REPRO_NODE_MODULES=<含依赖的node_modules> node repro-node-code-overwrite.mjs
+ * 退出码 0 = 全部通过。
+ */
+import { createRequire } from 'node:module';
+import { join } from 'node:path';
+// 依赖 react/react-dom/jsdom。为避免解析到宿主环境的 react，优先用
+// REPRO_NODE_MODULES 显式指定依赖目录（如装有这三者的 node_modules）。
+const depDir = process.env.REPRO_NODE_MODULES || '';
+const base = depDir ? join(depDir, 'repro-base.js') : import.meta.url;
+const require = createRequire(base);
+const React = require('react');
+const { createRoot } = require('react-dom/client');
+const { JSDOM } = require('jsdom');
+
+const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', { pretendToBeVisual: true });
+globalThis.window = dom.window;
+globalThis.document = dom.window.document;
+Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true });
+
+const toasts = [];
+const patchNodeIdImpl = (wf, oldId, newId) => {
+  if (!newId || newId === oldId) return { wf, blocked: false, renamed: false };
+  if (!/^[a-zA-Z0-9._-]+$/.test(newId) || newId.includes('..')) { toasts.push('阶段编码只能含字母/数字/._-'); return { wf, blocked: false, renamed: false }; }
+  if (wf.nodes.some((n) => n.id === newId && n.id !== oldId)) { toasts.push('阶段编码已存在'); return { wf, blocked: true, renamed: false }; }
+  const nodes = wf.nodes.map((n) => (n.id === oldId ? { ...n, id: newId } : n));
+  return { wf: { ...wf, nodes }, blocked: false, renamed: true };
+};
+
+class Panel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { wf: props.wf, selectedId: null };
+  }
+  select(id) { this.setState({ selectedId: id }); }
+  patchNodeId(oldId, newId) {
+    const r = patchNodeIdImpl(this.state.wf, oldId, newId);
+    if (r.renamed || r.blocked) this.setState({ wf: r.wf, selectedId: this.state.selectedId === oldId ? newId : this.state.selectedId });
+    return r;
+  }
+  patchOutputFieldEnum(nodeId, field, text) {
+    const values = String(text || '').split(',').map((s) => s.trim()).filter(Boolean);
+    const wf = this.state.wf;
+    const nodes = wf.nodes.map((n) => {
+      if (n.id !== nodeId) return n;
+      const props = { ...(n.body?.output?.properties || {}) };
+      const old = props[field] || {};
+      props[field] = values.length ? { ...old, enum: values } : old;
+      return { ...n, body: { ...n.body, output: { type: 'object', properties: props } } };
+    });
+    this.setState({ wf: { ...wf, nodes } });
+  }
+  render() {
+    const node = this.state.wf.nodes.find((n) => n.id === this.state.selectedId);
+    return React.createElement('div', null,
+      node ? React.createElement('div', null,
+        // 节点编码输入（client.js line 1307 同款；修复后带 key 强制按节点重挂载）
+        React.createElement('input', {
+          id: 'code-input',
+          className: 'knj-input',
+          key: 'node-code-' + node.id,
+          defaultValue: node.id || '',
+          onBlur: (e) => this.patchNodeId(node.id, e.target.value.trim()),
+        }),
+        // 输出字段枚举输入（client.js line 1370 同款；修复后带 key 强制按节点+字段重挂载）
+        React.createElement('input', {
+          id: 'enum-input',
+          key: 'enum-' + node.id + '-level',
+          defaultValue: (node.body?.output?.properties?.['level']?.enum || []).join(','),
+          onBlur: (e) => this.patchOutputFieldEnum(node.id, 'level', e.target.value),
+        }),
+      ) : null,
+    );
+  }
+}
+
+function makeWf(over = {}) {
+  const wf = {
+    id: 'wf',
+    nodes: [
+      { id: 'start', type: 'start' },
+      { id: 'analyze', type: 'task', title: '分析', body: { output: { type: 'object', properties: { level: { type: 'string', enum: ['high', 'low'] } } } } },
+      { id: 'design', type: 'task', title: '设计', body: { output: { type: 'object', properties: { level: { type: 'string', enum: ['a', 'b'] } } } } },
+      { id: 'end', type: 'end' },
+    ],
+    edges: [],
+  };
+  return JSON.parse(JSON.stringify({ ...wf, ...over }));
+}
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+const ref = React.createRef();
+root.render(React.createElement(Panel, { wf: makeWf(), ref }));
+await sleep(50); // 等待 React 18 提交渲染
+
+let failures = 0;
+const check = (name, cond, detail) => {
+  console.log(`${cond ? 'PASS' : 'FAIL'}  ${name}${cond ? '' : '  → ' + detail}`);
+  if (!cond) failures++;
+};
+
+const input = () => document.getElementById('code-input');
+const enumInput = () => document.getElementById('enum-input');
+
+// ---- 步骤 1：选中 analyze ----
+ref.current.select('analyze');
+await sleep(20);
+check('选中 analyze 后节点编码显示 analyze', input().value === 'analyze', `实际 ${JSON.stringify(input().value)}`);
+
+// ---- 步骤 2（路径 A）：切换选中 design，输入框必须刷新为 design ----
+ref.current.select('design');
+await sleep(20);
+check('切换 design 后节点编码显示 design（不被上一个节点覆盖）', input().value === 'design', `实际 ${JSON.stringify(input().value)}`);
+
+// ---- 步骤 3（路径 B）：切换节点后 blur 会把残留值提交给新选中节点 ----
+// 真实浏览器行为（React 官方文档）：uncontrolled input 的 defaultValue 只在挂载时生效，
+// 切换节点 re-render 不会同步 DOM value，输入框残留上一个节点的编码。
+// 此时任何 blur（点击画布/保存/其他节点）都会把残留值提交给新选中节点。
+function fireBlur(el) {
+  // React 18 onBlur 监听 focusout（冒泡）。不调用 focus()，避免 jsdom + React
+  // 的 input value polyfill 需要 attachEvent 的兼容问题。
+  const evt = new dom.window.Event('focusout', { bubbles: true, cancelable: true });
+  Object.defineProperty(evt, 'target', { value: el });
+  el.dispatchEvent(evt);
+}
+ref.current.select('analyze');
+await sleep(20);
+ref.current.select('design'); // 切到 design，修复后输入框应刷新为 "design"
+await sleep(20);
+const staleValue = input().value;
+const designIdBefore = ref.current.state.wf.nodes.find((n) => n.id === 'design') ? 'design' : '(design 已被改名)';
+fireBlur(input()); // 用户点击别处 → onBlur 用当前输入框值调用 patchNodeId('design', value)
+await sleep(30);
+const designAfterBlur = ref.current.state.wf.nodes.find((n) => n.id === 'design');
+check('blur 提交的是当前节点的编码（design），而非上一个节点的残留值', staleValue === 'design', `输入框值=${JSON.stringify(staleValue)}`);
+check('blur 后 design 编码保持 design（未被覆盖）', !!designAfterBlur && designAfterBlur.id === 'design', `design 现 id=${designAfterBlur ? designAfterBlur.id : '(已被改名)'}`);
+console.log('   toasts:', JSON.stringify(toasts));
+
+// ---- 步骤 4（路径 C）：输出字段枚举切换节点后残留 ----
+ref.current.select('analyze');
+await sleep(20);
+check('选中 analyze 后枚举输入显示 high,low', enumInput().value === 'high,low', `实际 ${JSON.stringify(enumInput().value)}`);
+ref.current.select('design');
+await sleep(20);
+check('切换 design 后枚举输入显示 a,b（不被覆盖）', enumInput().value === 'a,b', `实际 ${JSON.stringify(enumInput().value)}`);
+
+// ---- 步骤 5（路径 D）：编辑当前选中节点的编码后，选中态应保持 ----
+// 真实代码 patchNodeId 只 setState({wf})，不更新 selectedId：
+// 选中 analyze 时把编码改为 ana → selectedId 仍是 "analyze" → 属性面板 find 不到节点而消失。
+ref.current.select('analyze');
+await sleep(20);
+check('编辑前属性面板渲染中（输入框存在）', !!input(), '输入框不存在');
+ref.current.patchNodeId('analyze', 'ana'); // 模拟用户在输入框输入 ana 后 blur
+await sleep(30);
+check('编辑编码后节点已改名 ana', !!ref.current.state.wf.nodes.find((n) => n.id === 'ana'), '节点未改名');
+check('编辑编码后选中态保持（selectedId 跟随新 id）', ref.current.state.selectedId === 'ana', `selectedId=${JSON.stringify(ref.current.state.selectedId)}`);
+check('编辑编码后面板仍渲染该节点（输入框仍存在）', !!input() && input().value === 'ana', `输入框=${input() ? JSON.stringify(input().value) : '(不存在)'}`);
+
+console.log(failures === 0 ? '\n全部通过 ✓' : `\n${failures} 项失败 ✗`);
+root.unmount();
+process.exit(failures === 0 ? 0 : 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-knj-workflow",
-  "version": "2026.8.280",
+  "version": "2026.8.282",
   "description": "KNJ 开发任务编排插件：配置驱动的工作流 + 开发任务管理 + 可视化阶段进度（DeepSeek Harness）",
   "author": "knj",
   "license": "MIT",
@@ -28,11 +28,7 @@
     "client": {
       "platform": "web",
       "inject": [
-        "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-locale",
-        "@deepseek-ai/dsh-client-ui-slots",
-        "@deepseek-ai/dsh-client-ui-conversation",
-        "@deepseek-ai/dsh-client-modules"
+        "slots"
       ]
     }
   },