dsh-knj-workflow 2026.9.21 → 2026.9.70

package/lib/client.js

@@ -20,6 +20,14 @@ window.__ModuleLoader__.load({
 		// workspaces 服务（apply 时注入）：用于「新建任务」工作目录下拉
 		let _workspaces = null;
 		let _ctx = null; // client root ctx（动态取服务，避免 apply 时机问题）
+		/** sessions 可能在本插件 apply 之后才被 Cordis 提供；使用时动态重取，避免把初始 null 永久缓存。 */
+		function getSessionsService() {
+			try {
+				const s = _ctx?.get?.('sessions') || _sessions;
+				if (s) _sessions = s;
+				return s || null;
+			} catch { return _sessions || null; }
+		}
 
 		async function api(path, opts = {}) {
 			const res = await fetch(`${PREFIX}${path}`, {
@@ -137,13 +145,201 @@ window.__ModuleLoader__.load({
 			failed: { label: '失败', color: 'var(--dsw-static-red-500)' },
 			skipped: { label: '跳过', color: 'var(--dsw-static-neutral-bluish-400)' },
 		};
+		/** 运行效果图专用状态色（含展示态 passed/waiting）；色值为静态语义色，深浅主题通用 */
+		const RUN_STATUS = {
+			pending: { label: '待执行', color: '#8b95a5', deep: '#8b95a5' },
+			running: { label: '运行中', color: '#2f6bff', deep: '#2556d6' },
+			done: { label: '完成', color: '#16a34a', deep: '#15803d' },
+			failed: { label: '失败', color: '#dc2626', deep: '#b91c1c' },
+			skipped: { label: '跳过', color: '#9aa3af', deep: '#9aa3af' },
+			waiting: { label: '人工待审', color: '#7c5cff', deep: '#5b3fd4' },
+			passed: { label: '已执行', color: '#16a34a', deep: '#15803d' },
+		};
+		/** 运行效果图：从一次任务实例推导每个画布节点的运行态（镜像 graph.js deriveRunGraphStates，两处需同步修改）。
+		 *  stageStates 只覆盖 task 执行节点；start/human/gateway/end 缺失时按任务级状态补全。返回 { nodeId: status }。 */
+		function knjDeriveRunStates(task) {
+			const wf = task?.workflowSnapshot;
+			const nodes = Array.isArray(wf?.nodes) ? wf.nodes : [];
+			const edges = Array.isArray(wf?.edges) ? wf.edges : [];
+			const byId = new Map(nodes.map((n) => [n.id, n]));
+			const stages = Array.isArray(task?.stageStates) ? task.stageStates : [];
+			const stageOf = new Map(stages.map((s) => [s.id, s]));
+			const taskStatus = task?.status;
+			const humanWaiting = taskStatus === 'waiting-human' ? task?.humanState?.humanId : null;
+			const executed = new Set();
+			for (const s of stages) if (['done', 'failed', 'running', 'skipped'].includes(s.status)) executed.add(s.id);
+			if (humanWaiting) executed.add(humanWaiting);
+			const succ = new Map(nodes.map((n) => [n.id, []]));
+			for (const e of edges) if (e?.from && byId.has(e.from) && e.to && byId.has(e.to)) succ.get(e.from).push(e.to);
+			for (const n of nodes) {
+				if (n.type !== 'human') continue;
+				for (const r of humanRoutes(n)) if (r?.to && byId.has(r.to)) succ.get(n.id).push(r.to);
+			}
+			const out = {};
+			for (const n of nodes) {
+				const id = n.id;
+				if (stageOf.has(id)) { out[id] = stageOf.get(id).status; continue; }
+				if (n.type === 'start') { out[id] = taskStatus && taskStatus !== 'pending' ? 'passed' : 'pending'; continue; }
+				if (n.type === 'end') { out[id] = taskStatus === 'success' ? 'done' : 'pending'; continue; }
+				if (n.type === 'human') { out[id] = id === humanWaiting ? 'waiting' : taskStatus === 'success' ? 'done' : 'pending'; continue; }
+				if (n.type === 'gateway-xor' || n.type === 'gateway-and') {
+					out[id] = (succ.get(id) || []).some((to) => executed.has(to)) ? 'passed' : 'pending';
+					continue;
+				}
+				out[id] = 'pending';
+			}
+			return out;
+		}
+
+		/** 运行效果图节点详情：错误框样式 */
+		function detailErr() {
+			return { background: 'rgba(220,38,38,.07)', border: '1px solid rgba(220,38,38,.3)', color: '#b91c1c', borderRadius: 6, padding: '6px 8px', fontSize: 12, wordBreak: 'break-all' };
+		}
+
+		/** 入边槽位：同一目标有多条入边时，沿目标边界分配不同落点，保证箭头不重叠。 */
+		function incomingPortSlot(wf, targetId, sourceId) {
+			const ids = [];
+			for (const e of (wf?.edges || [])) if (e?.to === targetId && e?.from) ids.push(e.from);
+			for (const n of (wf?.nodes || [])) if (n.type === 'human') for (const r of humanRoutes(n)) if (r?.to === targetId) ids.push(n.id);
+			const unique = [...new Set(ids)];
+			const index = Math.max(0, unique.indexOf(sourceId));
+			return { slot: index, count: Math.max(1, unique.length) };
+		}
+		/** 连线进出端口：按相对角度选择左右/上下边，并按入边槽位分配落点。 */
+		function flowPorts(f, t, slot = 0, count = 1) {
+			const hw = (n) => (n.type === 'gateway-xor' || n.type === 'gateway-and' || n.type === 'start' || n.type === 'end' ? 30 : 60) + 1;
+			const hh = (n) => (n.type === 'gateway-xor' || n.type === 'gateway-and' ? 30 : (n.type === 'start' || n.type === 'end' ? 18 : 22)) + 1;
+			const dx = (t.x || 0) - (f.x || 0), dy = (t.y || 0) - (f.y || 0);
+			const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+			const spread = (slot - (count - 1) / 2) * 12;
+			if (Math.abs(dx) >= Math.abs(dy)) {
+				const right = dx >= 0;
+				const sy = f.y + clamp(dy * 0.18 + spread * 0.2, -hh(f) + 5, hh(f) - 5);
+				const ty = t.y + clamp(dy * 0.12 + spread, -hh(t) + 5, hh(t) - 5);
+				return { sx: f.x + (right ? hw(f) : -hw(f)), sy, tx: t.x - (right ? hw(t) : -hw(t)) - (right ? 6 : -6), ty };
+			}
+			const down = dy >= 0;
+			const sx = f.x + clamp(dx * 0.18 + spread * 0.2, -hw(f) + 5, hw(f) - 5);
+			const tx = t.x + clamp(dx * 0.12 + spread, -hw(t) + 5, hw(t) - 5);
+			return { sx, sy: f.y + (down ? hh(f) : -hh(f)), tx, ty: t.y - (down ? hh(t) : -hh(t)) };
+		}
+
+		/** 连线避让的障碍卡片：给定画布全部节点（含端点），产出 routeEdge 的 obstacles（除端点外的卡，含留白）。 */
+		function flowObstacles(nodes, fromId, toId) {
+			const out = [];
+			for (const n of nodes) {
+				if (n.id === fromId || n.id === toId) continue;
+				const t = n.type || 'task';
+				const hx = (t === 'gateway-xor' || t === 'gateway-and' || t === 'start' || t === 'end' ? 30 : 60) + 12;
+				const hy = (t === 'gateway-xor' || t === 'gateway-and') ? 36 : (t === 'start' || t === 'end' ? 26 : 30);
+				out.push({ x: n.x, y: n.y, hx, hy });
+			}
+			return out;
+		}
+
+		/** 连线避让骨架（决策层）：镜像 graph.js routeEdgeKnee（两处需同步）。直通→2 点；3 段竖列避卡；
+		 *  走廊被同层卡堵死 → V-H-V 上下包抄。返回 { pts, midX, midY }。 */
+		function routeEdgeKnee(sx, sy, tx, ty, obstacles = []) {
+			const clearH = (y, x0, x1) => {
+				const a = Math.min(x0, x1) + 3, b = Math.max(x0, x1) - 3;
+				if (b - a < 8) return true;
+				return !obstacles.some((o) => y >= o.y - o.hy && y <= o.y + o.hy && o.x - o.hx < b && o.x + o.hx > a);
+			};
+			const clearV = (x, y0, y1) => {
+				const a = Math.min(y0, y1), b = Math.max(y0, y1);
+				return !obstacles.some((o) => o.x - o.hx < x && o.x + o.hx > x && o.y - o.hy < b && o.y + o.hy > a);
+			};
+			const x0 = Math.min(sx, tx), x1 = Math.max(sx, tx);
+			if (Math.abs(sy - ty) < 4 && clearH(sy, sx, tx)) return { pts: [[sx, sy], [tx, ty]], midX: (sx + tx) / 2, midY: sy };
+			for (let x = x1 - 46; x >= x0 + 46; x -= 10) {
+				if (!clearV(x, sy, ty)) continue;
+				if (!clearH(sy, sx, x)) continue;
+				if (!clearH(ty, x, tx)) continue;
+				return { pts: [[sx, sy], [x, sy], [x, ty], [tx, ty]], midX: (x + tx) / 2, midY: ty };
+			}
+			const gaps = [];
+			for (let dy = 60; dy <= 150; dy += 30) gaps.push(sy - dy, sy + dy);
+			for (const y2 of gaps) {
+				if (!clearH(y2, sx, tx)) continue;
+				if (!clearV(sx, sy, y2)) continue;
+				if (!clearV(tx, y2, ty)) continue;
+				return { pts: [[sx, sy], [sx, y2], [tx, y2], [tx, ty]], midX: (sx + tx) / 2, midY: y2 };
+			}
+			const X = Math.round((x0 + x1) / 2);
+			return { pts: [[sx, sy], [X, sy], [X, ty], [tx, ty]], midX: (X + tx) / 2, midY: ty };
+		}
+
+		/** 智能平滑曲线（镜像 graph.js smoothCurvePath）：骨架点 Catmull-Rom 三次贝塞尔穿过，端口水平进出 */
+		function smoothCurvePath(pts, extend = 26) {
+			if (!pts || pts.length < 2) return '';
+			if (pts.length === 2) return `M ${pts[0][0]} ${pts[0][1]} L ${pts[1][0]} ${pts[1][1]}`;
+			const p0 = pts[0], pn = pts[pts.length - 1];
+			const all = [[p0[0] - extend, p0[1]], ...pts, [pn[0] + extend, pn[1]]];
+			let d = `M ${p0[0]} ${p0[1]}`;
+			for (let i = 0; i < all.length - 3; i++) {
+				const A = all[i], B = all[i + 1], C2 = all[i + 2], D = all[i + 3];
+				const c1x = B[0] + (C2[0] - A[0]) / 6, c1y = B[1] + (C2[1] - A[1]) / 6;
+				const c2x = C2[0] - (D[0] - B[0]) / 6, c2y = C2[1] - (D[1] - B[1]) / 6;
+				d += ` C ${c1x} ${c1y} ${c2x} ${c2y} ${C2[0]} ${C2[1]}`;
+			}
+			return d;
+		}
+
+		/** 手工箭头形状：绕开 SVG marker 渲染可靠性问题。在终点 (ax,ay) 沿方向 (dx,dy) 画三角（L 长 H 高）。 */
+		function arrowShape(ax, ay, dx, dy, L, H) {
+			const px = -dy, py = dx;
+			const x1 = ax - dx * L + px * H / 2, y1 = ay - dy * L + py * H / 2;
+			const x2 = ax - dx * L - px * H / 2, y2 = ay - dy * L - py * H / 2;
+			return `M ${ax} ${ay} L ${x1} ${y1} L ${x2} ${y2} Z`;
+		}
+
+		/** 直连优先路由（镜像 graph.js routeEdge）：能直连（采样确认不碰卡）→ 同层横线或第一版优雅 S 贝塞尔；
+		 *  真被卡片阻挡 → 避让骨架 routeEdgeKnee + 平滑样条 smoothCurvePath。返回 { d, midX, midY, ax, ay, dx, dy }。 */
+		function routeEdge(sx, sy, tx, ty, obstacles = [], arrowL = 0) {
+			let hit = false;
+			if (obstacles.length) {
+				const horizontal = Math.abs(tx - sx) >= Math.abs(ty - sy);
+				const mx = (sx + tx) / 2, my = (sy + ty) / 2;
+				for (let k = 0; k <= 20; k++) {
+					const t = k / 20, u = 1 - t;
+					const x = horizontal ? u * u * u * sx + 3 * u * u * t * mx + 3 * u * t * t * mx + t * t * t * tx : u * u * u * sx + 3 * u * u * t * sx + 3 * u * t * t * tx + t * t * t * tx;
+					const y = horizontal ? u * u * u * sy + 3 * u * u * t * sy + 3 * u * t * t * ty + t * t * t * ty : u * u * u * sy + 3 * u * u * t * my + 3 * u * t * t * my + t * t * t * ty;
+					for (const o of obstacles) if (x >= o.x - o.hx && x <= o.x + o.hx && y >= o.y - o.hy && y <= o.y + o.hy) { hit = true; break; }
+					if (hit) break;
+				}
+			}
+			if (!hit) {
+				if (Math.abs(sy - ty) < 4) {
+					const s = Math.sign(tx - sx) || 1, ex = tx - s * arrowL;
+					return { d: `M ${sx} ${sy} H ${ex}`, midX: (sx + ex) / 2, midY: sy, ax: tx, ay: ty, dx: s, dy: 0 };
+				}
+				const ddx = tx - sx, ddy = ty - sy, len = Math.hypot(ddx, ddy) || 1;
+				const ex = tx - ddx / len * arrowL, ey = ty - ddy / len * arrowL;
+				if (Math.abs(ddx) >= Math.abs(ddy)) {
+					const mx = (sx + ex) / 2;
+					return { d: `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ey}, ${ex} ${ey}`, midX: mx, midY: (sy + ey) / 2, ax: tx, ay: ty, dx: ddx / len, dy: ddy / len };
+				}
+				const my = (sy + ey) / 2;
+				return { d: `M ${sx} ${sy} C ${sx} ${my}, ${ex} ${my}, ${ex} ${ey}`, midX: (sx + ex) / 2, midY: my, ax: tx, ay: ty, dx: ddx / len, dy: ddy / len };
+			}
+			const knee = routeEdgeKnee(sx, sy, tx, ty, obstacles);
+			const last = knee.pts[knee.pts.length - 1], prev = knee.pts[knee.pts.length - 2];
+			const ddx = last[0] - prev[0], ddy = last[1] - prev[1], len = Math.hypot(ddx, ddy) || 1;
+			const ex = last[0] - ddx / len * arrowL, ey = last[1] - ddy / len * arrowL;
+			if (knee.pts.length === 2) {
+				const s = Math.sign(ddx) || 1;
+				return { d: `M ${prev[0]} ${prev[1]} H ${ex}`, midX: knee.midX, midY: knee.midY, ax: tx, ay: ty, dx: s, dy: 0 };
+			}
+			const tailPts = knee.pts.map((p, i) => i === knee.pts.length - 1 ? [ex, ey] : p);
+			return { d: smoothCurvePath(tailPts), midX: knee.midX, midY: knee.midY, ax: tx, ay: ty, dx: ddx / len, dy: ddy / len };
+		}
 
 		const css = `
 /* dsh-knj-workflow 样式：跟随 DSH 原生设计令牌（--dsw-*）与字号阶梯
    原生字号体系：标题 16/500 · 正文 14/400(lh22) · 辅助 12/400(lh18)
    原生按钮：36px 高胶囊 · 输入：10px 圆角 + border-l2 + bg-layer-1 */
 .knj-overlay{position:fixed;inset:0;background:var(--dsw-alias-bg-mask-2);z-index:9999;display:flex;align-items:center;justify-content:center}
-.knj-panel{background:var(--dsw-specific-menu);border:1px solid var(--dsw-alias-border-inverted);border-radius:12px;width:min(960px,94vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary)}
+.knj-panel{background:var(--dsw-specific-menu);border:1px solid var(--dsw-alias-border-inverted);border-radius:12px;width:min(1280px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary)}
 .knj-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--dsw-alias-border-l2)}
 .knj-head h2{margin:0;font-size:16px;font-weight:500;color:var(--dsw-alias-label-primary)}
 .knj-close{margin-left:auto;background:transparent;border:1px solid var(--dsw-alias-border-l2);border-radius:999px;height:32px;padding:0 14px;cursor:pointer;font-size:14px;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center}
@@ -342,6 +538,17 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 			react_dom_client.createRoot(overlayRoot).render(react.createElement(Overlay, { initialTab: tab || 'tasks' }));
 		}
 
+		async function openScheduledWorkflowTask(taskId) {
+			openDevBoard();
+			try {
+				const { task } = await api('/tasks/' + taskId);
+				if (devBoardRef) devBoardRef.openTaskDetail(task);
+				else pendingScheduledWorkflowTask = task;
+			} catch (e) {
+				toast(e.message);
+			}
+		}
+
 		class Overlay extends react.Component {
 			constructor(props) {
 				super(props);
@@ -1121,16 +1328,16 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 				const maxX = Math.max(700, ...xs) + 200, maxY = Math.max(420, ...ys) + 200;
 				return react.createElement('svg', { className: 'knj-ge-svg', width: maxX * this.state.zoom, height: maxY * this.state.zoom },
 					react.createElement('defs', null,
-						react.createElement('marker', { id: 'knj-arrow', viewBox: '0 0 10 10', refX: 9, refY: 5, markerWidth: 11, markerHeight: 11, orient: 'auto' },
-							react.createElement('path', { d: 'M0 0L10 5L0 10z', fill: '#5b6472' })),
-						react.createElement('marker', { id: 'knj-arrow-red', viewBox: '0 0 10 10', refX: 9, refY: 5, markerWidth: 11, markerHeight: 11, orient: 'auto' },
-							react.createElement('path', { d: 'M0 0L10 5L0 10z', fill: '#dc2626' })),
-						react.createElement('marker', { id: 'knj-arrow-green', viewBox: '0 0 10 10', refX: 9, refY: 5, markerWidth: 11, markerHeight: 11, orient: 'auto' },
-							react.createElement('path', { d: 'M0 0L10 5L0 10z', fill: '#16a34a' })),
-						react.createElement('marker', { id: 'knj-arrow-blue', viewBox: '0 0 10 10', refX: 9, refY: 5, markerWidth: 11, markerHeight: 11, orient: 'auto' },
-							react.createElement('path', { d: 'M0 0L10 5L0 10z', fill: '#2f6bff' })),
-						react.createElement('marker', { id: 'knj-arrow-orange', viewBox: '0 0 10 10', refX: 9, refY: 5, markerWidth: 11, markerHeight: 11, orient: 'auto' },
-							react.createElement('path', { d: 'M0 0L10 5L0 10z', fill: '#d97706' })),
+						react.createElement('marker', { id: 'knj-arrow', viewBox: '0 0 12 7', refX: 11, refY: 3.5, markerWidth: 12, orient: 'auto' },
+							react.createElement('path', { d: 'M0 0L12 3.5L0 7z', fill: '#5b6472' })),
+						react.createElement('marker', { id: 'knj-arrow-red', viewBox: '0 0 12 7', refX: 11, refY: 3.5, markerWidth: 12, orient: 'auto' },
+							react.createElement('path', { d: 'M0 0L12 3.5L0 7z', fill: '#dc2626' })),
+						react.createElement('marker', { id: 'knj-arrow-green', viewBox: '0 0 12 7', refX: 11, refY: 3.5, markerWidth: 12, orient: 'auto' },
+							react.createElement('path', { d: 'M0 0L12 3.5L0 7z', fill: '#16a34a' })),
+						react.createElement('marker', { id: 'knj-arrow-blue', viewBox: '0 0 12 7', refX: 11, refY: 3.5, markerWidth: 12, orient: 'auto' },
+							react.createElement('path', { d: 'M0 0L12 3.5L0 7z', fill: '#2f6bff' })),
+						react.createElement('marker', { id: 'knj-arrow-orange', viewBox: '0 0 12 7', refX: 11, refY: 3.5, markerWidth: 12, orient: 'auto' },
+							react.createElement('path', { d: 'M0 0L12 3.5L0 7z', fill: '#d97706' })),
 					),
 					// 空白区域：按下拖拽平移画布
 					react.createElement('rect', { x: 0, y: 0, width: maxX, height: maxY, fill: 'transparent', onMouseDown: (e) => this.startPan(e), style: { cursor: 'grab' } }),
@@ -1161,17 +1368,20 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 				const key = e.from + '->' + e.to;
 				const isSel = this.state.selectedEdge === key;
 				const cyc = this.isUpstream(e.to, e.from); // 环边：to 可达 from（如人工驳回后重跑链路）
-				const sx = from.x + this.halfW(from), sy = from.y, tx = to.x - this.halfW(to), ty = to.y;
-				const mx = (sx + tx) / 2, my = (sy + ty) / 2; // 贝塞尔曲线中点，标签放这里
-				const d = `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`;
+				const incoming = incomingPortSlot(wf, e.to, e.from);
+				const { sx, sy, tx, ty } = flowPorts(from, to, incoming.slot, incoming.count);
+				const route = routeEdge(sx, sy, tx, ty, flowObstacles(wf.nodes, e.from, e.to), 16);
+				const mx = route.midX, my = route.midY; // 折线标签位置（目标侧水平段中点）
+				const d = route.d;
 				const pick = (ev) => { ev.stopPropagation(); this.setState({ selectedEdge: key, selectedId: null }); };
 				return react.createElement('g', { key },
 					// 透明点击区域（加宽，便于选边）
 					react.createElement('path', { d, fill: 'none', stroke: 'transparent', strokeWidth: 16, onClick: pick, style: { cursor: 'pointer' } }),
-					// 可见线
-					react.createElement('path', { d, fill: 'none', stroke: cyc ? '#dc2626' : (isSel ? '#2f6bff' : '#5b6472'), strokeWidth: isSel ? 3 : 2, ...(cyc ? { strokeDasharray: '5 3' } : {}), markerEnd: cyc ? 'url(#knj-arrow-red)' : (isSel ? 'url(#knj-arrow-blue)' : 'url(#knj-arrow)') }),
+					// 可见线（箭头手工绘制，见下）
+					react.createElement('path', { d, fill: 'none', stroke: cyc ? '#dc2626' : (isSel ? '#2f6bff' : '#5b6472'), strokeWidth: isSel ? 3 : 2, ...(cyc ? { strokeDasharray: '5 3' } : {}) }),
+					react.createElement('path', { d: arrowShape(route.ax, route.ay, route.dx, route.dy, 16, 10), fill: cyc ? '#dc2626' : (isSel ? '#2f6bff' : '#5b6472') }),
 					(e.when || e.default) ? react.createElement('g', { onClick: pick, style: { cursor: 'pointer' } },
-						react.createElement('rect', { x: mx - 44, y: my - 11, width: 88, height: 18, rx: 4, fill: '#fff', stroke: e.default ? '#16a34a' : (isSel ? '#2f6bff' : '#e2e6ec') }),
+						react.createElement('rect', { x: mx - 44, y: my - 11, width: 88, height: 18, rx: 4, style: { fill: 'var(--dsw-alias-bg-base)' }, stroke: e.default ? '#16a34a' : (isSel ? '#2f6bff' : '#e2e6ec') }),
 						react.createElement('text', { x: mx, y: my + 1, fontSize: 10, textAnchor: 'middle', fill: e.default ? '#16a34a' : '#5b6472' },
 							e.default && e.when ? `default · ${e.when.field} ${e.when.op} ${JSON.stringify(e.when.value)}` : (e.default ? 'default' : (e.when ? `${e.when.field} ${e.when.op} ${JSON.stringify(e.when.value)}` : ''))),
 					) : null,
@@ -1195,18 +1405,21 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 				const color = routeColor(he.route);
 				const key = 'human:' + he.from + ':' + he.index;
 				const isSel = this.state.selectedEdge === key;
-				const sx = from.x + this.halfW(from), sy = from.y, tx = to.x - this.halfW(to), ty = to.y;
-				const mx = (sx + tx) / 2, my = (sy + ty) / 2; // 贝塞尔曲线中点，标签放这里
-				const d = `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`;
+				const incoming = incomingPortSlot(wf, he.to, he.from);
+				const { sx, sy, tx, ty } = flowPorts(from, to, incoming.slot, incoming.count);
+				const route = routeEdge(sx, sy, tx, ty, flowObstacles(wf.nodes, he.from, he.to), 16);
+				const mx = route.midX, my = route.midY;
+				const d = route.d;
 				const pick = (ev) => { ev.stopPropagation(); this.setState({ selectedEdge: key, selectedId: null }); };
 				const label = he.route.label || '去向';
 				const markerEnd = ({ success: 'url(#knj-arrow-green)', danger: 'url(#knj-arrow-red)', warning: 'url(#knj-arrow-orange)', info: 'url(#knj-arrow-blue)', neutral: 'url(#knj-arrow)' })[he.route.tone] || 'url(#knj-arrow-blue)';
 				return react.createElement('g', { key },
 					// 透明点击区域（加宽，便于选中）
 					react.createElement('path', { d, fill: 'none', stroke: 'transparent', strokeWidth: 16, onClick: pick, style: { cursor: 'pointer' } }),
-					react.createElement('path', { d, fill: 'none', stroke: color, strokeWidth: isSel ? 3 : 2, strokeDasharray: '5 4', markerEnd }),
+					react.createElement('path', { d, fill: 'none', stroke: color, strokeWidth: isSel ? 3 : 2, strokeDasharray: '5 4' }),
+					react.createElement('path', { d: arrowShape(route.ax, route.ay, route.dx, route.dy, 16, 10), fill: color }),
 					react.createElement('g', { onClick: pick, style: { cursor: 'pointer' } },
-						react.createElement('rect', { x: mx - 26, y: my - 11, width: 52, height: 16, rx: 3, fill: '#fff', stroke: isSel ? '#2f6bff' : color, strokeWidth: isSel ? 2 : 1 }),
+						react.createElement('rect', { x: mx - 26, y: my - 11, width: 52, height: 16, rx: 3, style: { fill: 'var(--dsw-alias-bg-base)' }, stroke: isSel ? '#2f6bff' : color, strokeWidth: isSel ? 2 : 1 }),
 						react.createElement('text', { x: mx, y: my + 1, fontSize: 10, textAnchor: 'middle', fill: color }, label.length > 5 ? label.slice(0, 5) + '…' : label),
 					),
 				);
@@ -1220,26 +1433,28 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 					if (n.type === 'gateway-xor' || n.type === 'gateway-and') {
 						const half = 30;
 						return react.createElement('g', null,
-							react.createElement('path', { d: `M ${n.x} ${n.y - half} L ${n.x + half} ${n.y} L ${n.x} ${n.y + half} L ${n.x - half} ${n.y} Z`, fill: '#fff', stroke: c, strokeWidth: 1.6 }),
+							react.createElement('path', { d: `M ${n.x} ${n.y - half} L ${n.x + half} ${n.y} L ${n.x} ${n.y + half} L ${n.x - half} ${n.y} Z`, style: { fill: 'var(--dsw-alias-bg-base)', filter: 'drop-shadow(0 1px 1px rgba(16,20,28,.06))' }, stroke: isSel ? '#2f6bff' : c, strokeWidth: isSel ? 2.6 : 1.6 }),
 							react.createElement('path', { d: n.type === 'gateway-xor' ? `M ${n.x - 9} ${n.y - 9} h18 M ${n.x - 9} ${n.y + 9} h18` : `M ${n.x - 9} ${n.y} h18`, stroke: c, strokeWidth: 1.3 }),
 						);
 					}
 					const w = 120, h = 44;
-					if (n.type === 'start' || n.type === 'end') {
-						return react.createElement('rect', { x: n.x - 30, y: n.y - 18, width: 60, height: 36, rx: 18, fill: '#fff', stroke: c, strokeWidth: 1.5 });
+					if (n.type === 'task' || n.type === 'human') {
+						const bodyRect = react.createElement('rect', { x: n.x - w / 2, y: n.y - h / 2, width: w, height: h, rx: 9, style: { fill: n.type === 'human' ? 'color-mix(in srgb, #7c5cff 10%, var(--dsw-alias-bg-base))' : 'var(--dsw-alias-bg-base)', filter: 'drop-shadow(0 1px 1px rgba(16,20,28,.06)) drop-shadow(0 3px 8px rgba(16,20,28,.05))' }, stroke: isSel ? '#2f6bff' : (needTarget ? '#dc2626' : c), strokeWidth: isSel ? 2.6 : (needTarget ? 2 : 1.6) });
+						const typeBar = react.createElement('rect', { x: n.x - w / 2 + 1, y: n.y - h / 2 + 1, width: 3.5, height: h - 2, rx: 1.75, fill: n.type === 'human' ? '#7c5cff' : c, opacity: needTarget ? 0.9 : 0.85 });
+						return [bodyRect, typeBar];
 					}
-					return react.createElement('rect', { x: n.x - w / 2, y: n.y - h / 2, width: w, height: h, rx: 8, fill: n.type === 'human' ? '#f0ecff' : '#fff', stroke: needTarget ? '#dc2626' : c, strokeWidth: needTarget ? 2 : 1.6 });
+					return react.createElement('rect', { x: n.x - 30, y: n.y - 18, width: 60, height: 36, rx: 18, style: { fill: 'var(--dsw-alias-bg-base)', filter: 'drop-shadow(0 1px 1px rgba(16,20,28,.06))' }, stroke: isSel ? '#2f6bff' : c, strokeWidth: isSel ? 2.4 : 1.5 });
 				})();
 				const label = (() => {
 					if (n.type === 'gateway-xor' || n.type === 'gateway-and') return null;
 					const txt = n.type === 'start' ? '开始' : n.type === 'end' ? '结束' : (n.title || n.id);
-					return react.createElement('text', { x: n.x, y: n.y + 4, fontSize: 12, textAnchor: 'middle', fill: '#181b21' }, txt.length > 10 ? txt.slice(0, 10) + '…' : txt);
+					return react.createElement('text', { x: n.x, y: n.y + 4, fontSize: 12.5, fontWeight: 600, textAnchor: 'middle', style: { fill: 'var(--dsw-alias-label-primary)' } }, txt.length > 10 ? txt.slice(0, 10) + '…' : txt);
 				})();
 				const isHover = this.state.linking && this.state.hoverId === n.id;
-				// 节点类型图标（左上角）：task 齿轮 / human 小人（用节点描边色）
+				// 节点类型图标（左上角）：task 齿轮 / human 小人（用节点描边色；14px 与运行图同语言）
 				const typeIcon = (n.type === 'task' || n.type === 'human')
-					? react.createElement('g', { transform: `translate(${n.x - 52}, ${n.y - 14})` },
-						react.createElement('svg', { width: 12, height: 12, viewBox: '0 0 16 16', fill: 'none' },
+					? react.createElement('g', { transform: `translate(${n.x - 52}, ${n.y - 15})` },
+						react.createElement('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none' },
 							n.type === 'human'
 								? [
 									react.createElement('circle', { key: 'h1', cx: 8, cy: 5.5, r: 3, stroke: c, strokeWidth: 1.6 }),
@@ -1253,7 +1468,7 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 					)
 					: null;
 				return react.createElement('g', { key: n.id, onMouseDown: (e) => this.startDrag(n.id, e), onClick: (e) => { e.stopPropagation(); this.setState({ selectedId: n.id, selectedEdge: null }); }, style: { cursor: 'move' } },
-					react.createElement('rect', { x: n.x - 62, y: n.y - 24, width: 124, height: 48, fill: isSel ? 'rgba(47,107,255,0.08)' : (isHover ? 'rgba(47,107,255,0.14)' : 'transparent'), stroke: isSel ? '#2f6bff' : (isHover ? '#2f6bff' : 'none'), strokeWidth: isHover ? 2 : 1, strokeDasharray: isHover ? '4 3' : undefined, rx: 10 }),
+					react.createElement('rect', { x: n.x - 70, y: n.y - 30, width: 140, height: 60, fill: isHover ? 'rgba(47,107,255,0.06)' : 'transparent', stroke: 'none', rx: 10 }),
 					body,
 					label,
 					typeIcon,
@@ -1501,8 +1716,8 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 						this.renderHookSection(node, 'posthook', 'posthook（执行后动作）'),
 					) : node.type === 'human' ? react.createElement('div', null,
 						humanRoutesIncomplete(node) ? react.createElement('div', { style: { fontSize: 12, color: '#dc2626', marginBottom: 8, lineHeight: 1.6 } }, '⚠ 至少需要一个完整去向（标签 + 目标节点），保存会被拦截，画布上该节点显示红色警示。') : null,
-						fieldLabel('展示产物（上游节点 id）', '人工审批时展示哪个上游节点的输出（如 verify），审批人先看产物再决定。', '审批时展示哪个上游节点的输出，如 verify'),
-						react.createElement('input', { className: 'knj-input', placeholder: '如 verify', value: node.displayFrom || '', onChange: (e) => this.patchNode(node.id, { displayFrom: e.target.value }) }),
+						fieldLabel('展示产物（上游节点 id 或文件路径）', '人工审批时展示给审批人的内容，两种填法：\n· 上游节点 id（如 verify）——展示该节点产物；若产物字段声明为 file/dir 类型，会渲染成可点击预览（md / 目录浏览）\n· 文件路径（如 ${cwd}/docs/设计.md 或 docs/设计.md）——直接预览该文件/目录（md 渲染，目录可逐级浏览）', '展示上游节点产物，或直接填文件路径预览（如 ${cwd}/docs/设计.md）'),
+						react.createElement('input', { className: 'knj-input', placeholder: '如 verify 或 ${cwd}/docs/设计.md', value: node.displayFrom || '', onChange: (e) => this.patchNode(node.id, { displayFrom: e.target.value }) }),
 						fieldLabel('去向（审批按钮，可多条）', '运行到本节点时暂停等待人工：每个去向是一个按钮，点击后流程走到对应目标。\n每条 = 标签（按钮文字）+ 目标节点 + 色调。填写的意见会注入目标节点。\n旧配置的「通过/驳回」自动兼容为两条去向。', '每个去向 = 一个审批按钮；可附意见注入目标节点'),
 						humanRoutes(node).map((route, i) => this.renderRouteRow(node, route, i)),
 						react.createElement('button', { className: 'knj-btn', style: { alignSelf: 'flex-start', marginTop: 6 }, onClick: () => this.addRoute(node.id) }, '+ 添加去向'),
@@ -1518,7 +1733,7 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 				const fields = Object.keys(props);
 				return react.createElement('div', null,
 					react.createElement('div', { className: 'knj-form-label', style: { marginTop: 10 } }, '节点输出（本阶段产物）',
-						react.createElement('span', { onMouseEnter: (e) => this.showTip(e, '定义本节点完成后输出的字段。\n下游阶段用 ${编码.字段} 引用（如 ${complexity.level}），网关用字段值做分支判断（如 level eq high）。\n布尔 / 数组 / 枚举建议显式指定类型，判断才可靠。\n并行执行（parallel）时结果为数组。'), onMouseLeave: () => this.hideTip(), style: { cursor: 'help', color: 'var(--dsw-alias-label-tertiary)', marginLeft: 6, fontSize: 12 } }, 'ⓘ'),
+						react.createElement('span', { onMouseEnter: (e) => this.showTip(e, '定义本节点完成后输出的字段。\n下游阶段用 ${编码.字段} 引用（如 ${complexity.level}），网关用字段值做分支判断（如 level eq high）。\n布尔 / 数组 / 枚举建议显式指定类型，判断才可靠。\n并行执行（parallel）时结果为数组。\n\nfile / dir：字段值是文件/目录路径（如 ${cwd}/docs/设计.md）——人工审批展示时该字段会渲染为可点击预览（md 渲染 / 目录浏览），不当作普通文本。'), onMouseLeave: () => this.hideTip(), style: { cursor: 'help', color: 'var(--dsw-alias-label-tertiary)', marginLeft: 6, fontSize: 12 } }, 'ⓘ'),
 					),
 					react.createElement('div', { style: { fontSize: 11, color: 'var(--dsw-alias-label-tertiary)', lineHeight: 1.5, marginBottom: 4 } }, '本节点的输出字段：下游 ${编码.字段} 引用、网关分支判断；布尔/数组/枚举建议指定类型'),
 					react.createElement('input', {
@@ -1547,6 +1762,8 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 							react.createElement('option', { value: 'number' }, 'number'),
 							react.createElement('option', { value: 'boolean' }, 'boolean'),
 							react.createElement('option', { value: 'array' }, 'array'),
+							react.createElement('option', { value: 'file' }, 'file'),
+							react.createElement('option', { value: 'dir' }, 'dir'),
 						),
 						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,
 					),
@@ -2077,8 +2294,9 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 				super(props);
 				this.state = { tab: 'tasks', view: 'table', tasks: [], workflows: [], archived: [], error: null, search: '', showArchive: false, detail: null };
 			}
-			componentDidMount() { this.refresh(); this._timer = setInterval(() => this.refresh(), 3000); }
-			componentWillUnmount() { clearInterval(this._timer); }
+			componentDidMount() { devBoardRef = this; if (pendingScheduledWorkflowTask) { this.openTaskDetail(pendingScheduledWorkflowTask); pendingScheduledWorkflowTask = null; } this.refresh(); this._timer = setInterval(() => this.refresh(), 3000); }
+			componentWillUnmount() { clearInterval(this._timer); if (devBoardRef === this) devBoardRef = null; }
+			openTaskDetail(task) { this.setState({ tab: 'tasks', showArchive: false, detail: task }); }
 			async refresh() {
 				try {
 					const [t, w, a] = await Promise.all([api('/tasks'), api('/workflows'), api('/tasks?archived=1')]);
@@ -2161,6 +2379,8 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 		}
 
 		let devBoardRoot = null;
+		let devBoardRef = null;
+		let pendingScheduledWorkflowTask = null;
 		let devBoardRootHandle = null; // React root 句柄（关闭时需 unmount 清定时器，不能只 remove DOM）
 		let _closeDevBoard = null; // 收起开发任务看板（跳转子会话前先收起，避免盖住）
 		/** 主区接管（SPEC-board-redesign）：中栏注入看板容器 + html data 属性隐藏会话，会话子树保活 */
@@ -2278,6 +2498,14 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 
 			// 「工作流」入口改为 DOM 注入到「任务看板」入口之后（原任务看板入口处），不再占用 knj-menu 折叠位。
 			ctx.effect(() => { mountWorkflowEntry(); return () => { if (workflowEntryDisposer) workflowEntryDisposer(); }; }, 'dsh-knj-workflow: 工作流入口');
+			ctx.effect(() => {
+				const onOpenTask = (event) => {
+					const taskId = event && event.detail && event.detail.taskId;
+					if (typeof taskId === 'string' && taskId.trim() !== '') void openScheduledWorkflowTask(taskId);
+				};
+				window.addEventListener('dsh-knj-workflow:open-task', onOpenTask);
+				return () => window.removeEventListener('dsh-knj-workflow:open-task', onOpenTask);
+			}, 'dsh-knj-workflow: scheduler task navigation');
 
 			// 「开发任务」已迁移到左侧工具栏入口 + 主区看板（见 工作流入口 / openDevBoard），
 			// 不再注册 conversation.view 页签。
@@ -2451,14 +2679,15 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 		class SidebarTaskDetail extends react.Component {
 			constructor(props) {
 				super(props);
-				this.state = { results: null, rejectFeedback: '', expanded: null, fileView: null };
+				this.state = { results: null, rejectFeedback: '', expanded: null, fileView: null, preview: null, viewMode: 'graph', graphSel: null, graphZoom: null, fitW: null };
 			}
 			componentDidMount() { this.loadResults(); this.preloadCatalog(); }
 			/** 预加载 parent 的子会话 catalog：让「查看」点击时直接 open、无需每次 await 慢 RPC */
 			async preloadCatalog() {
 				const { task } = this.props;
-				if (!_sessions || !task.parentSessionId) return;
-				try { await _sessions.refreshSubagents(task.parentSessionId); } catch {}
+				const sessions = getSessionsService();
+				if (!sessions || !task.parentSessionId) return;
+				try { await sessions.refreshSubagents(task.parentSessionId); } catch {}
 			}
 			async loadResults() {
 				try {
@@ -2500,6 +2729,197 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 				const m = Math.floor(sec / 60), r = sec % 60;
 				return `${m}m${r}s`;
 			}
+			/** 单独补拉某阶段产物（stage 文件兜底；结果并入 state.results 触发重渲） */
+			async loadStageResult(stageId) {
+				if (this.resultFor(stageId) != null) return;
+				try {
+					const r = await api('/tasks/' + this.props.task.id + '/stages/' + stageId);
+					if (r && r.data != null && typeof r.data === 'object') {
+						this.setState((s) => ({ results: { ...(s.results || {}), [stageId]: r.data } }));
+					}
+				} catch { /* 无产物文件则保持空 */ }
+			}
+			/** 选中运行图节点时的详情（与 renderNodeCard 展开内容同源；data 来自 task/stageStates/懒加载产物） */
+			renderGraphDetail() {
+				const { task } = this.props;
+				const sel = this.state.graphSel;
+				const stages = task.stageStates || [];
+				const derived = knjDeriveRunStates(task);
+				const st = RUN_STATUS[derived[sel] || 'pending'];
+				const stage = stages.find((x) => x.id === sel) || null;
+				const node = (task.workflowSnapshot?.nodes || []).find((n) => n.id === sel);
+				const result = this.resultFor(sel);
+				const meta = st;
+				const body = [];
+				if (stage && stage.status === 'failed') {
+					body.push(react.createElement('div', { key: 'e', style: { ...detailErr(), marginBottom: 8 } }, stage.error || '节点执行失败'));
+					body.push(react.createElement('button', { key: 'rr', className: 'knj-btn danger', style: { fontSize: 12, height: 26, borderRadius: 999, padding: '0 12px', marginRight: 'auto' }, onClick: () => this.rerunStage(sel) }, '重跑该阶段'));
+				} else if (stage && stage.status === 'running') {
+					body.push(react.createElement('div', { key: 'r1', style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--dsw-alias-label-secondary)' } },
+						react.createElement('span', { style: { width: 12, height: 12, borderRadius: 99, border: '2px solid rgba(47,107,255,.25)', borderTopColor: '#2f6bff', animation: 'knjSpin 1s linear infinite' } }),
+						'子代理执行中…产物完成后显示在此'));
+				} else if (sel && derived[sel] === 'waiting') {
+					const routes = humanRoutes(node);
+					body.push(react.createElement('div', { key: 'w1', style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', lineHeight: 1.7 } },
+						'任务正等待人工审批。去向：', routes.map((r) => `${r.label} → ${r.to}`).join('　／　'), '。请在上方审批卡查看待审产物并作出选择。'));
+				} else if (result && typeof result === 'object') {
+					body.push(react.createElement('div', { key: 'f1', className: 'knj-node-sec' }, '产物（输出字段）'), this.renderResultFields(result), this.renderFiles(sel, result));
+					if ((stage?.sessionIds || []).length) body.push(this.renderSessionsRow(stage));
+				} else if (stage && stage.status === 'done') {
+					body.push(react.createElement('div', { key: 'l1', style: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary)' } }, '节点已完成（产物为空或暂未取到）。'));
+					if ((stage?.sessionIds || []).length) body.push(this.renderSessionsRow(stage));
+				} else if (derived[sel] === 'skipped') {
+					body.push(react.createElement('div', { key: 's1', style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)' } }, '该分支未被实际执行（网关未走到此路径），节点已标记为跳过。'));
+				} else if (node && (node.type === 'start' || node.type === 'end' || node.type === 'gateway-xor' || node.type === 'gateway-and')) {
+					body.push(react.createElement('div', { key: 'n1', style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)' } }, node.type === 'end' ? '流程结束节点。' : node.type === 'start' ? '流程开始节点。' : '网关/人工类节点不产生独立产物，仅标记执行路径已通过。'));
+				} else {
+					body.push(react.createElement('div', { key: 'p1', style: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary)' } }, '待执行：流程尚未运行到该节点。'));
+				}
+				return react.createElement('div', { style: { border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 10, overflow: 'hidden', marginTop: 8, background: 'var(--dsw-alias-bg-base)' } },
+					react.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', background: 'var(--dsw-alias-fill-2)', borderBottom: '1px solid var(--dsw-alias-border-l2)', fontSize: 12.5, fontWeight: 600 } },
+						react.createElement('span', { style: { width: 3, height: 14, borderRadius: 2, background: meta.color, display: 'inline-block' } }),
+						react.createElement('span', null, `${sel} · ${meta.label}`),
+						react.createElement('button', { style: { marginLeft: 'auto', border: 'none', background: 'none', color: 'var(--dsw-alias-label-tertiary)', cursor: 'pointer', fontSize: 16, lineHeight: 1, padding: '0 4px' }, onClick: () => this.setState({ graphSel: null }) }, '×')),
+					react.createElement('div', { style: { padding: '10px 12px', fontSize: 12.5 } }, body));
+			}
+			renderSessionsRow(stage) {
+				return react.createElement('div', { key: 'sess', className: 'knj-node-sec' },
+					'执行记录（子会话）',
+					(stage.sessionIds || []).map((sid) => react.createElement('div', { key: sid, className: 'knj-row', style: { marginTop: 6, gap: 8 } },
+						react.createElement('code', { style: { fontSize: 11, color: 'var(--dsw-alias-label-secondary)', flex: 1, wordBreak: 'break-all' } }, '👤 ' + sid),
+						react.createElement('button', { className: 'knj-btn', style: { flexShrink: 0 }, title: '跳转到该子代理会话查看完整执行细节', onClick: () => this.viewSubagent(sid) }, '查看会话'),
+					)));
+			}
+			/** 运行图空白区域按住拖动：平移滚动视口，不改变节点坐标或流程布局。 */
+			startRunCanvasPan(e) {
+				if (e.button !== 0 || !this._runCanvasEl) return;
+				this._runPan = { x: e.clientX, y: e.clientY, left: this._runCanvasEl.scrollLeft, top: this._runCanvasEl.scrollTop };
+				this._runPanMoved = false;
+				this._runCanvasEl.style.cursor = 'grabbing';
+				e.preventDefault();
+			}
+			moveRunCanvasPan(e) {
+				if (!this._runPan || !this._runCanvasEl) return;
+				const dx = e.clientX - this._runPan.x, dy = e.clientY - this._runPan.y;
+				if (Math.abs(dx) > 2 || Math.abs(dy) > 2) this._runPanMoved = true;
+				this._runCanvasEl.scrollLeft = this._runPan.left - dx;
+				this._runCanvasEl.scrollTop = this._runPan.top - dy;
+			}
+			endRunCanvasPan() {
+				if (!this._runPan) return;
+				this._runPan = null;
+				if (this._runCanvasEl) this._runCanvasEl.style.cursor = 'grab';
+			}
+			/** 运行效果图画布：workflowSnapshot 拓扑 + 推导状态 → SVG（全 inline style，样式语言与 V2 设计稿一致） */
+			renderRunCanvas() {
+				const { task } = this.props;
+				const wf = task?.workflowSnapshot;
+				const nodes = Array.isArray(wf?.nodes) ? wf.nodes : [];
+				if (!nodes.length) return null;
+				const derived = knjDeriveRunStates(task);
+				const byId = new Map(nodes.map((n) => [n.id, n]));
+				const edges = Array.isArray(wf?.edges) ? wf.edges : [];
+				// 画布几何
+				const xs = nodes.map((n) => n.x || 0), ys = nodes.map((n) => n.y || 0);
+				const W = Math.max(720, ...xs) + 120, H = Math.max(300, ...ys) + 90;
+				const wrapW = this.state.fitW || 780;
+				const fit = Math.max(0.6, Math.min((wrapW - 20) / W, 400 / H, 1));
+				const zoom = this.state.graphZoom == null ? fit : this.state.graphZoom;
+				const pct = Math.round(zoom * 100);
+				const tool = (label, title, onClick, active) => react.createElement('button', { onClick, title, style: { height: 24, padding: '0 9px', fontSize: 11.5, borderRadius: 6, border: active ? '1px solid #2f6bff' : '1px solid var(--dsw-alias-border-l2)', background: active ? 'rgba(47,107,255,.08)' : 'var(--dsw-alias-bg-base)', color: active ? '#2f6bff' : 'var(--dsw-alias-label-secondary)', cursor: 'pointer' } }, label);
+				const halfW = (t) => (t === 'gateway-xor' || t === 'gateway-and' || t === 'start' || t === 'end') ? 30 : 60;
+				const nodeColor = (n) => ({ task: '#5b6472', human: '#7c5cff', 'gateway-xor': '#2f6bff', 'gateway-and': '#16a34a', start: '#8b95a5', end: '#8b95a5' }[n.type] || '#5b6472');
+				const statusOf = (n) => derived[n.id] || 'pending';
+				// 连线集合：edges + human routes
+				const lines = [];
+				for (const e of edges) if (e?.from && e?.to && byId.has(e.from) && byId.has(e.to)) lines.push({ from: e.from, to: e.to, label: e.when ? `${e.when.field} ${e.when.op} ${JSON.stringify(e.when.value)}` : e.default ? 'default' : null, color: '#8b95a5', dashed: false, faint: false });
+				for (const n of nodes) {
+					if (n.type !== 'human') continue;
+					humanRoutes(n).forEach((r, i) => { if (r?.to && byId.has(r.to)) lines.push({ from: n.id, to: r.to, label: r.label || '去向', color: routeColor(r), dashed: true, faint: false }); });
+				}
+				const svgKids = [
+					react.createElement('defs', { key: 'd' },
+						[['a', '#8b95a5'], ['g', '#16a34a'], ['r', '#dc2626'], ['b', '#2f6bff']].map(([k, c]) => react.createElement('marker', { key: k, id: 'knj-rg-' + k, viewBox: '0 0 12 7', refX: 11, refY: 3.5, markerWidth: 12, orient: 'auto' }, react.createElement('path', { d: 'M0 0L12 3.5L0 7z', fill: c })))),
+					...lines.map((ln, i) => {
+						const f = byId.get(ln.from), t = byId.get(ln.to);
+						const incoming = incomingPortSlot(wf, ln.to, ln.from);
+						const { sx, sy, tx, ty } = flowPorts(f, t, incoming.slot, incoming.count);
+						const route = routeEdge(sx, sy, tx, ty, flowObstacles(nodes, ln.from, ln.to), 13);
+						const mx = route.midX, my = route.midY;
+						const d = route.d;
+						const key = 'e' + i;
+						const stroke = ln.faint ? '#c3cad4' : ln.color;
+						const kids = [react.createElement('path', { key: key + 'p', d, fill: 'none', stroke, strokeWidth: ln.faint ? 1.4 : 1.7, strokeDasharray: ln.dashed ? '5 4' : undefined, opacity: ln.faint ? 0.5 : 1 }),
+							react.createElement('path', { key: key + 'a', d: arrowShape(route.ax, route.ay, route.dx, route.dy, 13, 8), fill: stroke, opacity: ln.faint ? 0.5 : 1 })];
+						if (ln.label) kids.push(react.createElement('rect', { key: key + 'b', x: mx - 26, y: my - 9, width: 52, height: 17, rx: 8.5, fill: 'var(--dsw-alias-bg-base)', stroke: ln.color, strokeWidth: 1 }),
+							react.createElement('text', { key: key + 't', x: mx, y: my + 3.5, fontSize: 9.5, textAnchor: 'middle', fill: ln.color, style: { userSelect: 'none' } }, ln.label.length > 5 ? ln.label.slice(0, 5) + '…' : ln.label));
+						return react.createElement('g', { key }, kids);
+					}),
+					...nodes.map((n) => this.runSvgNode(n, statusOf(n), nodeColor(n), zoom)),
+				];
+				return react.createElement('div', { style: { marginTop: 6 } },
+					react.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6, margin: '10px 0 2px' } },
+						tool('适应', '按画布适配视图', () => this.setState({ graphZoom: null }), this.state.graphZoom == null),
+						tool('100%', '', () => this.setState({ graphZoom: 1 }), this.state.graphZoom === 1),
+						tool('−', '缩小', () => this.setState((s) => ({ graphZoom: Math.max(0.3, (s.graphZoom == null ? fit : s.graphZoom) / 1.2) }))),
+						tool('＋', '放大', () => this.setState((s) => ({ graphZoom: Math.min(2.5, (s.graphZoom == null ? fit : s.graphZoom) * 1.2) }))),
+						react.createElement('span', { style: { marginLeft: 'auto', fontSize: 11, color: 'var(--dsw-alias-label-tertiary)' } }, `${pct}% · 点击节点看详情`),
+					),
+					react.createElement('div', { ref: (el) => { this._runCanvasEl = el; if (el && this.state.fitW == null) { const w = el.clientWidth; if (w > 200) this.setState({ fitW: w }); } }, style: { border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 10, overflow: 'auto', background: 'var(--dsw-alias-bg-base)', minHeight: 300, maxHeight: '56vh', position: 'relative', cursor: 'grab', userSelect: 'none' }, onMouseDown: (e) => this.startRunCanvasPan(e), onMouseMove: (e) => this.moveRunCanvasPan(e), onMouseUp: () => this.endRunCanvasPan(), onMouseLeave: () => this.endRunCanvasPan(), onWheel: (e) => { e.preventDefault(); this.setState((s) => ({ graphZoom: Math.max(0.3, Math.min(2.5, (s.graphZoom == null ? fit : s.graphZoom) * (e.deltaY < 0 ? 1.1 : 0.9))) })); } },
+						react.createElement('div', { onClick: () => { if (!this._runPanMoved) this.setState({ graphSel: null }); this._runPanMoved = false; } },
+							react.createElement('svg', { width: Math.round(W * zoom), height: Math.round(H * zoom), viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: 'xMinYMin meet', style: { display: 'block', background: 'var(--dsw-alias-bg-base)' } }, svgKids),
+						),
+					),
+					this.state.graphSel ? this.renderGraphDetail() : null,
+				);
+			}
+			/** 单个节点 SVG（类型定底 + 左缘状态条 + 右上状态图标；编排画布同语言，此处为运行态着色版） */
+			runSvgNode(n, status, typeColor, zoom) {
+				const sel = this.state.graphSel === n.id;
+				const meta = RUN_STATUS[status];
+				const c = meta.color;
+				const isSkipped = status === 'skipped';
+				const dim = isSkipped ? 0.55 : 1;
+				const isTask = n.type === 'task' || n.type === 'human';
+				const kids = [];
+				const w = 124, hh = 46;
+				// 形状 + 左条
+				if (n.type === 'gateway-xor' || n.type === 'gateway-and') {
+					const h = 30;
+					kids.push(react.createElement('polygon', { key: 'b', points: `${n.x},${n.y - h} ${n.x + h},${n.y} ${n.x},${n.y + h} ${n.x - h},${n.y}`, fill: '#eef4ff', stroke: isSkipped ? '#b6bdc7' : (status === 'pending' ? '#8b95a5' : c), strokeWidth: 1.6, strokeDasharray: isSkipped ? '4 3' : undefined, opacity: dim }));
+					kids.push(react.createElement('path', { key: 'g', d: n.type === 'gateway-and' ? `M ${n.x - 10} ${n.y} h20` : `M ${n.x - 10} ${n.y - 10} h20 M ${n.x - 10} ${n.y + 10} h20`, stroke: c, strokeWidth: 1.5, opacity: dim }));
+					kids.push(react.createElement('text', { key: 't', x: n.x, y: n.y - 40, fontSize: 10.5, textAnchor: 'middle', fill: 'var(--dsw-alias-label-secondary)', style: { userSelect: 'none' } }, (n.title || n.id).length > 9 ? (n.title || n.id).slice(0, 9) + '…' : (n.title || n.id)));
+				} else if (n.type === 'start' || n.type === 'end') {
+					kids.push(react.createElement('rect', { key: 'b', x: n.x - 31, y: n.y - 18, width: 62, height: 36, rx: 18, fill: 'var(--dsw-alias-bg-base)', stroke: isSkipped ? '#b6bdc7' : (status === 'pending' ? '#8b95a5' : c), strokeWidth: 1.4, strokeDasharray: isSkipped ? '4 3' : undefined, opacity: dim }));
+					kids.push(react.createElement('text', { key: 't', x: n.x, y: n.y + 4, fontSize: 12, textAnchor: 'middle', fill: 'var(--dsw-alias-label-secondary)' }, n.type === 'start' ? '开始' : '结束'));
+				} else {
+					kids.push(react.createElement('rect', { key: 'b', x: n.x - w / 2, y: n.y - hh / 2, width: w, height: hh, rx: 9, fill: n.type === 'human' ? '#f3efff' : 'var(--dsw-alias-bg-base)', stroke: 'var(--dsw-alias-border-l2)', strokeWidth: 1, opacity: dim }));
+					kids.push(react.createElement('rect', { key: 'bar', x: n.x - w / 2 + 1, y: n.y - hh / 2 + 1, width: 3.5, height: hh - 2, rx: 1.75, fill: isSkipped ? '#9aa3af' : c, strokeDasharray: isSkipped ? '3 2' : undefined }));
+					kids.push(react.createElement('text', { key: 'tt', x: n.x + 5, y: n.y - 1, fontSize: 13, fontWeight: 600, textAnchor: 'middle', fill: 'var(--dsw-alias-label-primary)', style: { userSelect: 'none' } }, (n.title || n.id).length > 11 ? (n.title || n.id).slice(0, 11) + '…' : (n.title || n.id)));
+					const sub = status === 'running' ? '运行中' : status === 'waiting' ? '等待人工审批' : (status === 'passed' ? '已过' : meta.label);
+					kids.push(react.createElement('text', { key: 'sb', x: n.x + 5, y: n.y + 14, fontSize: 10, textAnchor: 'middle', fill: isSkipped ? 'var(--dsw-alias-label-tertiary)' : c, style: { userSelect: 'none' } }, sub));
+					// 右上状态图标（14px 圆底）
+					const ix = n.x + 52, iy = n.y - 16;
+					if (status === 'done' || status === 'failed' || status === 'running' || status === 'waiting' || status === 'skipped') {
+						kids.push(react.createElement('circle', { key: 'ic', cx: ix, cy: iy, r: 8, fill: isSkipped ? '#9aa3af' : c }));
+						if (status === 'done') kids.push(react.createElement('path', { key: 'ic2', d: `M ${ix - 3} ${iy} l 2.1 2.1 l 4 -4.1`, stroke: '#fff', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' }));
+						else if (status === 'failed') kids.push(react.createElement('path', { key: 'ic2', d: `M ${ix} ${iy - 3} v 2.6 M ${ix} ${iy + 1.6} v .01`, stroke: '#fff', strokeWidth: 1.6, strokeLinecap: 'round' }));
+						else if (status === 'skipped') kids.push(react.createElement('path', { key: 'ic2', d: `M ${ix - 3.2} ${iy} h 6.4`, stroke: '#fff', strokeWidth: 1.6, strokeLinecap: 'round' }));
+						else if (status === 'waiting') kids.push(react.createElement('circle', { key: 'ic2', cx: ix, cy: iy - 1.5, r: 2.2, fill: 'none', stroke: '#fff', strokeWidth: 1.2 }), react.createElement('path', { key: 'ic3', d: `M ${ix - 3.6} ${iy + 4.6} c 0 -2.1 1.7 -3.1 3.6 -3.1 s 3.6 1 3.6 3.1`, stroke: '#fff', strokeWidth: 1.2, fill: 'none', strokeLinecap: 'round' }));
+					}
+					// running 光环（静态两层，替代动画，避免依赖注入 keyframes）
+					if (status === 'running') kids.push(react.createElement('circle', { key: 'halo', cx: n.x, cy: n.y, r: 33, fill: 'none', stroke: '#2f6bff', strokeWidth: 1.6, opacity: 0.35 }));
+				}
+				const isSel = sel;
+				const hit = react.createElement('rect', { x: n.x - 70, y: n.y - 38, width: 140, height: 76, rx: 12, fill: 'transparent', onClick: (e) => { e.stopPropagation(); this.setState({ graphSel: n.id }); const stage = (this.props.task.stageStates || []).find((x) => x.id === n.id); if (stage && stage.status === 'done' && this.resultFor(n.id) == null) this.loadStageResult(n.id); }, style: { cursor: 'pointer' } });
+				const title = `${n.title || n.id} · ${meta.label}`;
+				return react.createElement('g', { key: n.id, opacity: isSkipped ? 0.65 : 1, onMouseDown: (e) => e.stopPropagation() },
+					react.createElement('title', null, title),
+					hit,
+					...kids,
+					isSel ? react.createElement('rect', { key: 'hal', x: n.x - w / 2 - 3, y: n.y - hh / 2 - 3, width: w + 6, height: hh + 6, rx: 11, fill: 'none', stroke: '#2f6bff', strokeWidth: 2 }) : null,
+				);
+			}
 			/** 流程节点卡片：状态圆点 + 标题 + 耗时，点击展开产物与执行记录（整合，不再平铺三个区块） */
 			renderNodeCard(s, i) {
 				const meta = STAGE_META[s.status] || STAGE_META.pending;
@@ -2594,26 +3014,199 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 					this.setState({ fileView: { stageId, path: r.path, content: r.content } });
 				} catch (e) { toast('读取失败：' + e.message); }
 			}
+			/** 优先用 dsh-better-sidebar（若已安装）在右侧栏打开文件预览；成功返回 true，未安装则返回 false（调用方回退内嵌预览）。
+			 *  path 支持三种形态：相对 cwd 路径（docs/x.md）、${cwd}/... 前缀、盘符绝对路径（若在 cwd 内）。
+			 *  打开的是 better-sidebar 内置 editor tab（按 path 去重）：md/图片/HTML/PDF/代码由其现成渲染，
+			 *  content open 会自动展开右栏；同步调用，无 await 挂起风险。 */
+			tryOpenSidebar(path, label) {
+				const { task } = this.props;
+				if (!path || !String(path).trim()) return false;
+				const bs = _ctx && _ctx.get ? _ctx.get('betterSidebar') : null;
+				if (!bs || typeof bs.openTab !== 'function') return false;
+				let rel = String(path).trim();
+				rel = rel.replace(/^\$\{cwd\}(\/|\\)?/, '');
+				const cwd = task && task.cwd ? String(task.cwd).replace(/\\/g, '/') : null;
+				if (cwd && /^[A-Za-z]:/.test(rel)) {
+					const relNorm = rel.replace(/\\/g, '/');
+					if (relNorm.toLowerCase().startsWith(cwd.toLowerCase())) rel = relNorm.slice(cwd.length).replace(/^\/+/, '');
+				}
+				const abs = cwd ? `${cwd}/${rel}` : rel;
+				try {
+					bs.openTab({ type: 'editor', path: abs, title: label || String(abs).split(/[\\/]/).pop() });
+					return true;
+				} catch (e) { return false; }
+			}
+			/** 审批预览：打开一个文件/目录（scope 用于渲染在审批卡内）。文件按类型渲染，目录列条目可逐级点开。
+			 *  path 支持三种形态：相对 cwd 路径（docs/x.md）、${cwd}/... 前缀、盘符绝对路径（若在 cwd 内）。 */
+			async openPreview(path, label, scope = 'human') {
+				const { task } = this.props;
+				if (!path || !String(path).trim()) { toast('路径为空'); return; }
+				let rel = String(path).trim();
+				// ${cwd} → 相对路径（Host 端以 task.cwd 为根解析）
+				rel = rel.replace(/^\$\{cwd\}(\/|\\)?/, '');
+				// 绝对盘符路径且在 cwd 内 → 手工转相对（浏览器端无 node:path）
+				const cwd = task && task.cwd ? String(task.cwd).replace(/\\/g, '/') : null;
+				if (cwd && /^[A-Za-z]:/.test(rel)) {
+					const relNorm = rel.replace(/\\/g, '/');
+					if (relNorm.toLowerCase().startsWith(cwd.toLowerCase())) {
+						rel = relNorm.slice(cwd.length).replace(/^\/+/, '');
+					}
+				}
+				try {
+					const r = await api('/tasks/' + task.id + '/file?path=' + encodeURIComponent(rel));
+					this.setState({ preview: { scope, path: r.path, isDir: !!r.isDir, entries: r.entries || null, content: r.content ?? null, meta: r.meta || null, tooLarge: !!r.tooLarge, label: label || path } });
+				} catch (e) { toast('打开失败：' + e.message); }
+			}
+			/** 简易 markdown 渲染（标题/列表/代码块/引用/加粗/链接；无 XSS 风险：只转义后套结构，不注入 HTML 事件） */
+			renderMarkdown(text) {
+				const lines = String(text || '').split(/\r?\n/);
+				const out = [];
+				let inCode = false, codeBuf = [];
+				const pushCode = () => {
+					if (codeBuf.length) { out.push(react.createElement('pre', { key: 'c' + out.length, style: { background: 'var(--dsw-alias-fill-2,#f4f5f7)', padding: 8, borderRadius: 6, fontSize: 12, overflow: 'auto', maxHeight: 300, margin: '4px 0' } }, codeBuf.join('\n'))); codeBuf = []; }
+				};
+				for (const raw of lines) {
+					const line = raw.replace(/\s+$/, '');
+					if (line.startsWith('```')) {
+						if (inCode) { pushCode(); inCode = false; }
+						else inCode = true;
+						continue;
+					}
+					if (inCode) { codeBuf.push(line); continue; }
+					const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+					const inline = (s) => s
+						.replace(/`([^`]+)`/g, (m, c) => `<code>${esc(c)}</code>`)
+						.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+						.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
+					const style = { fontSize: 13, lineHeight: 1.7, color: 'var(--dsw-alias-label-primary)', margin: '2px 0', wordBreak: 'break-word' };
+					if (/^#{1,4}\s/.test(line)) {
+						const lv = line.match(/^#+/)[0].length;
+						out.push(react.createElement('div', { key: 'h' + out.length, style: { ...style, fontWeight: 600, fontSize: lv === 1 ? 15 : 14, marginTop: lv === 1 ? 6 : 4 } }, react.createElement('span', { dangerouslySetInnerHTML: { __html: inline(line.replace(/^#+\s*/, '')) } })));
+					} else if (/^\s*[-*]\s+/.test(line)) {
+						out.push(react.createElement('div', { key: 'li' + out.length, style: { ...style, paddingLeft: 14 } }, '• ' + react.createElement('span', { dangerouslySetInnerHTML: { __html: inline(line.replace(/^\s*[-*]\s+/, '')) } })));
+					} else if (/^\s*\d+\.\s+/.test(line)) {
+						out.push(react.createElement('div', { key: 'li' + out.length, style: { ...style, paddingLeft: 14 } }, react.createElement('span', { dangerouslySetInnerHTML: { __html: inline(line.replace(/^\s*\d+\.\s+/, '')) } })));
+					} else if (/^>/.test(line)) {
+						out.push(react.createElement('div', { key: 'q' + out.length, style: { ...style, borderLeft: '3px solid var(--dsw-alias-border-l2)', paddingLeft: 8, color: 'var(--dsw-alias-label-secondary)' } }, react.createElement('span', { dangerouslySetInnerHTML: { __html: inline(line.replace(/^>\s?/, '')) } })));
+					} else if (!line.trim()) {
+						out.push(react.createElement('div', { key: 's' + out.length, style: { height: 6 } }));
+					} else {
+						out.push(react.createElement('div', { key: 'p' + out.length, style }, react.createElement('span', { dangerouslySetInnerHTML: { __html: inline(line) } })));
+					}
+				}
+				pushCode();
+				return react.createElement('div', { style: { maxHeight: 320, overflow: 'auto' } }, out);
+			}
+			/** 文件图标（按扩展名给个粗略区分） */
+			fileIcon(ext, isDir) {
+				if (isDir) return '📁';
+				if (!ext) return '📄';
+				const m = { md: '📝', json: '{ }', yml: '⚙', yaml: '⚙', txt: '📄', html: '🌐', png: '🖼', jpg: '🖼', jpeg: '🖼', pdf: '📕' };
+				return m[ext] || '📄';
+			}
+			/** 审批预览面板：目录列表 / md 渲染 / 文本 / 大文件元信息 */
+			renderPreviewPanel(pv) {
+				const close = react.createElement('button', { className: 'knj-btn', style: { alignSelf: 'flex-start', marginTop: 8 }, onClick: () => this.setState({ preview: null }) }, '关闭预览');
+				if (pv.isDir) {
+					const sorted = [...(pv.entries || [])].sort((a, b) => (a.isDir === b.isDir ? 0 : a.isDir ? -1 : 1));
+					return react.createElement('div', null,
+						react.createElement('div', { className: 'knj-node-sec' }, `目录：${pv.path}`),
+						sorted.map((e) => react.createElement('div', { key: e.path, className: 'knj-row', style: { marginTop: 4, gap: 8 } },
+							react.createElement('span', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, title: e.path },
+								`${this.fileIcon(e.ext, e.isDir)} ${e.name}${e.isDir ? '/' : e.ext === 'md' || e.ext === 'json' || e.ext === 'txt' ? '' : e.size ? ` (${e.size}B)` : ''}`),
+							react.createElement('button', { className: 'knj-btn', style: { flexShrink: 0, borderColor: 'var(--dsw-static-blue-600)', color: 'var(--dsw-static-blue-600)' }, onClick: () => { if (e.isDir || !this.tryOpenSidebar(e.path, e.name)) this.openPreview(e.path, e.name); } }, e.isDir ? '进入' : '查看'),
+						)),
+						close,
+					);
+				}
+				if (pv.tooLarge) {
+					return react.createElement('div', null,
+						react.createElement('div', { className: 'knj-node-sec' }, `文件：${pv.path}`),
+						react.createElement('div', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', marginTop: 4 } }, `${pv.meta?.name || pv.path} · ${pv.meta?.size || ''}B · 超过 200KB 预览上限，请在工作区打开`),
+						close,
+					);
+				}
+				if (pv.content == null) return null;
+				const ext = String(pv.path || '').split('.').pop().toLowerCase();
+				const isMd = ext === 'md' || ext === 'markdown';
+				return react.createElement('div', null,
+					react.createElement('div', { className: 'knj-node-sec', style: { display: 'flex', alignItems: 'center', gap: 8 } },
+						react.createElement('span', null, isMd ? 'Markdown 预览' : '文件内容'),
+						react.createElement('span', { style: { fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, pv.path),
+					),
+					isMd
+						? this.renderMarkdown(pv.content)
+						: react.createElement('pre', { style: { maxHeight: 320, fontSize: 12, lineHeight: 1.5, whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, pv.content),
+					close,
+				);
+			}
+			/** 判断字符串是否看起来是文件路径（displayFrom 支持直接填 ${cwd}/xx.md） */
+			looksLikePathStr(s) {
+				if (typeof s !== 'string' || !s.trim()) return false;
+				const v = s.trim();
+				if (v.includes(' ')) return false;
+				return /^\$\{cwd\}/.test(v) || /^([A-Za-z]:[\\/]|\/|\.{1,2}[\\/])/.test(v) || /^\S+\.\w{1,12}$/.test(v);
+			}
 			renderHumanCard(task) {
 				const humanNode = (task.workflowSnapshot?.nodes || []).find((n) => n.id === task.humanState?.humanId);
 				const routes = humanRoutes(humanNode);
 				const displayFrom = humanNode?.displayFrom;
 				const results = this.state.results || task.humanState?.results || {};
-				const display = displayFrom ? results[displayFrom] : null;
+				// displayFrom 双模式：
+				//  1) 上游节点 id（如 verify）→ 展示该节点产物，其中 file/dir 类型字段渲染为可点击预览
+				//  2) 文件路径（如 ${cwd}/docs/设计.md）→ 直接作为文件预览源
+				const isPathDisplay = this.looksLikePathStr(displayFrom);
+				const display = (!isPathDisplay && displayFrom) ? results[displayFrom] : null;
+				const displayNode = (!isPathDisplay && displayFrom)
+					? (task.workflowSnapshot?.nodes || []).find((n) => n.id === displayFrom)
+					: null;
 				const btnStyle = (route) => {
 					const map = { success: 'var(--dsw-static-green-500)', danger: 'var(--dsw-static-red-500)', warning: 'var(--dsw-static-amber-500)', info: 'var(--dsw-static-blue-600)', neutral: 'var(--dsw-alias-label-secondary)' };
 					const c = map[route.tone] || map.info;
 					return { flex: 1, borderColor: c, color: c };
 				};
+				const preview = this.state.preview && this.state.preview.scope === 'human' ? this.state.preview : null;
+				// 从展示节点产物里收集 file/dir 类型字段（按该节点 output schema 判定）；值非空字符串才作为文件入口
+				const fileFields = [];
+				if (display && typeof display === 'object' && !Array.isArray(display) && displayNode?.body?.output?.properties) {
+					const props = displayNode.body.output.properties;
+					for (const [k, v] of Object.entries(display)) {
+						const t = props[k]?.type;
+						if ((t === 'file' || t === 'dir') && typeof v === 'string' && v.trim()) {
+							fileFields.push({ key: k, value: v.trim(), isDir: t === 'dir' });
+						}
+					}
+				}
 				return react.createElement('div', { className: 'knj-card', style: { flexDirection: 'column', alignItems: 'stretch', borderColor: '#7c5cff', background: '#f4f1ff', marginBottom: 12 } },
 					react.createElement('div', { className: 'knj-row' },
 						react.createElement('span', { style: { fontWeight: 600, color: '#7c5cff', fontSize: 13 } }, '等待人工处理'),
 						react.createElement('span', { className: 'knj-badge', style: { background: '#7c5cff' } }, '待审批'),
 					),
 					react.createElement('div', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', marginTop: 8, lineHeight: 1.6 } }, routes.length > 0 ? '任务已运行到人工审批节点。选择一个去向继续（可附意见）。' : '任务已运行到人工审批节点（未配置去向）。'),
-					display
-						? react.createElement('pre', { style: { fontSize: 12, lineHeight: 1.5, overflow: 'auto', maxHeight: 200, margin: '8px 0 0', whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: 'var(--dsw-alias-label-primary)', background: '#fff', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8, padding: 10 } }, JSON.stringify(display, null, 2))
-						: react.createElement('div', { style: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary)', marginTop: 8 } }, '（未配置展示产物或产物为空）'),
+					// ---- 展示区：文件路径直开 / file-dir 字段 / JSON 文本兜底 ----
+					isPathDisplay
+						? (() => {
+							const btn = react.createElement('button', { className: 'knj-btn', style: { alignSelf: 'flex-start', marginTop: 8, borderColor: 'var(--dsw-static-blue-600)', color: 'var(--dsw-static-blue-600)' }, onClick: () => { if (!this.tryOpenSidebar(displayFrom, displayFrom)) this.openPreview(displayFrom, displayFrom); }, title: '已装 dsh-better-sidebar 时在右侧栏完整预览' }, '查看：' + displayFrom);
+							return preview && preview.path === displayFrom
+								? react.createElement('div', { style: { marginTop: 8, padding: 10, background: '#fff', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8 } }, this.renderPreviewPanel(preview))
+								: btn;
+						})()
+						: display
+							? react.createElement('div', { style: { marginTop: 8 } },
+								fileFields.length > 0
+									? react.createElement('div', null,
+										react.createElement('div', { className: 'knj-node-sec' }, '待审产物（点击预览）'),
+										fileFields.map((f) => react.createElement('div', { key: f.key, className: 'knj-row', style: { marginTop: 6, gap: 8 } },
+											react.createElement('span', { role: 'button', tabIndex: 0, title: (f.isDir ? '浏览目录：' : '预览文件：') + f.value, style: { fontSize: 12, color: 'var(--dsw-static-blue-600)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }, onClick: () => { if (f.isDir || !this.tryOpenSidebar(f.value, f.key)) this.openPreview(f.value, f.key, 'human'); }, onKeyDown: (e) => { if (e.key === 'Enter') { if (f.isDir || !this.tryOpenSidebar(f.value, f.key)) this.openPreview(f.value, f.key, 'human'); } } }, `${this.fileIcon(f.value.split('.').pop(), f.isDir)} ${f.key}：${f.value}`),
+										)),
+									)
+									: react.createElement('div', { style: { padding: 10, background: '#fff', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8 } },
+										react.createElement('div', { className: 'knj-node-sec' }, `产物（${displayFrom}）`),
+										react.createElement('pre', { style: { fontSize: 12, lineHeight: 1.5, overflow: 'auto', maxHeight: 200, whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: 'var(--dsw-alias-label-primary)', margin: 0 } }, JSON.stringify(display, null, 2)),
+									),
+								preview ? react.createElement('div', { style: { marginTop: 8, padding: 10, background: '#fff', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8 } }, this.renderPreviewPanel(preview)) : null,
+							)
+							: react.createElement('div', { style: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary)', marginTop: 8 } }, '（未配置展示产物或产物为空）'),
 					react.createElement('textarea', { className: 'knj-textarea', style: { minHeight: 56, marginTop: 10 }, placeholder: '意见（可选，去向目标节点会看到）', value: this.state.rejectFeedback, onChange: (e) => this.setState({ rejectFeedback: e.target.value }) }),
 					react.createElement('div', { className: 'knj-row', style: { marginTop: 12, gap: 10 } },
 						routes.map((route) => react.createElement('button', { key: route.label + ':' + route.to, className: 'knj-btn', style: btnStyle(route), onClick: () => this.decide(route.label) }, route.label || '（未命名去向）')),
@@ -2646,10 +3239,20 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 					react.createElement('div', { className: 'sub', style: { marginTop: 4 } }, `进度 ${pct}% · 完成 ${doneCount}/${relevant.length} 阶段${steps.length - relevant.length ? `（跳过 ${steps.length - relevant.length}）` : ''}`),
 					// 人工审批卡片
 					task.status === 'waiting-human' ? this.renderHumanCard(task) : null,
-					// 流程节点卡片（纵向，一眼看全局；点击节点展开产物/执行记录）
+					// 流程进度：流程图 / 列表 切换（图 = 编排拓扑 + 运行态着色，V2 视觉语言）
 					react.createElement('div', { className: 'knj-form-section', style: { marginTop: 12 } },
-						react.createElement('div', { className: 'knj-form-label' }, `流程进度（${steps.length}）`),
-						steps.map((s, i) => this.renderNodeCard(s, i)),
+						react.createElement('div', { className: 'knj-form-label', style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+							react.createElement('span', null, `流程进度（${steps.length}）`),
+							react.createElement('div', { style: { display: 'inline-flex', background: 'var(--dsw-alias-fill-2)', borderRadius: 8, padding: 2, gap: 2 } },
+								['graph', 'list'].map((m) => react.createElement('button', { key: m, onClick: () => this.setState({ viewMode: m }), style: { border: 'none', background: this.state.viewMode === m ? 'var(--dsw-alias-bg-base)' : 'transparent', fontSize: 12.5, padding: '3px 12px', borderRadius: 6, cursor: 'pointer', color: this.state.viewMode === m ? 'var(--dsw-alias-label-primary)' : 'var(--dsw-alias-label-secondary)', fontWeight: this.state.viewMode === m ? 600 : 400, boxShadow: this.state.viewMode === m ? '0 1px 3px rgba(0,0,0,.1)' : 'none' } }, m === 'graph' ? '流程图' : '列表'))),
+							this.state.viewMode === 'graph' ? react.createElement('div', { style: { display: 'flex', gap: 12, alignItems: 'center', fontSize: 11, color: 'var(--dsw-alias-label-secondary)' } },
+								Object.keys(RUN_STATUS).filter((k) => k !== 'passed').map((k) => react.createElement('span', { key: k, style: { display: 'inline-flex', alignItems: 'center', gap: 5 } },
+									react.createElement('span', { style: { width: 3, height: 12, borderRadius: 2, background: RUN_STATUS[k].color, display: 'inline-block' } }), RUN_STATUS[k].label)),
+							) : null,
+						),
+						steps.length > 0 && (this.state.viewMode === 'list' || !(task.workflowSnapshot?.nodes || []).length)
+							? steps.map((s, i) => this.renderNodeCard(s, i))
+							: this.renderRunCanvas(),
 					),
 					// 操作按钮
 					task.status === 'pending'
@@ -2671,18 +3274,20 @@ table.knj-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
 			}
 			/** 把某个节点 subagent 会话跳回 DSH 原生会话查看（只读查看执行细节） */
 			async viewSubagent(childId) {
-				if (!_sessions) { toast('sessions 服务不可用'); return; }
+				// 不使用 apply 阶段可能为 null 的旧缓存；点击时从当前 ctx 动态取 sessions。
+				const sessions = getSessionsService();
+				if (!sessions) { toast('sessions 服务暂不可用，请稍后重试'); return; }
 				try {
 					// 先收起开发任务弹窗，再跳子会话，避免弹窗盖住子会话
 					_closeDevBoard?.();
 					// catalog 已在 preloadCatalog 后台加载，这里直接 open（select 内部会 navigationAddress 解析）。
 					// 若 catalog 尚未就绪导致 open 抛错，回退刷新一次再跳。
 					try {
-						_sessions.open(childId);
+						sessions.open(childId);
 					} catch (firstError) {
 						const { task } = this.props;
-						if (task.parentSessionId) await _sessions.refreshSubagents(task.parentSessionId);
-						_sessions.open(childId);
+						if (task.parentSessionId) await sessions.refreshSubagents(task.parentSessionId);
+						sessions.open(childId);
 					}
 				} catch (e) { toast('跳转失败：' + (e && e.message ? e.message : e)); }
 			}