三面拆分⑯:流程包详情改三栏 · 字段只声明 · 版本可删可改名

**字段只声明,不做任何要求**(用户定):编排层不再碰字段 ——
  · 激活闸只剩两面:结构闭合(dangling-node / multi-default-edge)与活动装载
    (unknown-activity);字段类的检查(同名不同型、容忍分支被必填依赖)全部退役。
  · 节点属性卡的「数据接口」从「推来源」改成**纯声明**:照活动契约列出吃什么、吐什么,
    不标必填、不推来源、不提补全 —— 缺了怎么补是**活动内实现**的事,不在这一层现形。
  · 字段类型支持数组:统一写成 `T[]`(如 `any[]`),出口口的字段也带上类型
    (原来只有字段名)。实测 A2 的 benchmark 口显示「rows any[] · needSourcing boolean」。

**详情页改三栏**:左窄轨版本(132px) | 中流程图 | 右节点属性。
  · 版本条一版一行(v几 · 状态 · 点/边计数),动作只在**看着的那一版**上展开 ——
    窄栏放不下每行一排钮,也不该让人误点别版。
  · 删掉「激活 · 双判据」整卡:没选节点时,属性栏就地列出还差哪几条(点一条定位过去);
    两面都齐时盖一枚小检验章,不再占一整张卡。
  · 删掉节点拣选行 —— 直接在图上点节点。
  · 属性卡用包壳绝对定位:行高由中栏的图定,属性长了在卡内滚,不把图拉长
    (实测卡高 467、明细内容 1039、可滚,图框不受影响)。窄轨里属性小卡改单列竖排。
  · 顺带校正:上一轮那条「图框下沿对齐左列底栏顶线」的 20px 留白,
    三栏改版后左栏已无底栏,没有对齐对象了 —— 改回四边等距(18px)。

**版本可删可改名**(新):
  · 删:生效版不可删(先停用,ActiveVersionError → 409)、在途钉版不可删
    (那些单要按它跑完,PinnedVersionError → 409);删掉正看的那版会落到剩下的最新版,
    一版不剩就回货架。
  · 改名:名字是**这条流的身份**,一次改及于所有版本 —— 版本列表上只显示 v1/v2…,
    若只改一版的名,列表上什么也看不见,人会以为没生效。
  · 5 条单测守两道闸与改名口径;实测走查:改名落库 → 改回;生效版删 409、停用版删 200。

process CONTRACT.md 与产品设计.md 同步。五闸绿。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/app/styles/console.css

@@ -341,10 +341,9 @@
 /* 图自身按 aspect-ratio 缩放，整张一定看得全——纸面不再限高、不再内部滚动 */
 .g-canvas .process-desk { flex: 1; min-height: 0; height: auto; max-height: none; overflow: visible; padding: 0; background: transparent; display: flex; flex-direction: column; }
 .g-canvas .process-doc { flex: 1; min-height: 0; box-sizing: border-box; max-width: none; padding: 14px 18px 18px; border-radius: 10px; box-shadow: var(--cshadow); display: flex; flex-direction: column; }
-/* 图框吃满纸面,并在下方空出**恰好一条底栏的高度** —— 图框下沿与左列版本卡底栏
-   (.g-vercard-f,净高 38)的上沿连成同一条横线。20 = 38(底栏净高) − 18(纸面下内距)。
-   纸面被栅格拉高时(版本多、左列更长)图框跟着长,才不会又浮回上面去。 */
-.g-canvas .process-doc > .hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 20px; }
+/* 图框吃满纸面(纸被栅格拉高时跟着长,不会浮回上面);下沿留白与纸面左右内距同为 18,
+   四边等距 —— 三栏改版后左列不再有底栏,原先那条「对齐底栏顶线」的 20px 就没有对齐对象了。 */
+.g-canvas .process-doc > .hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
 .g-canvas .process-doc > .hero > .fig-body { flex: 1 1 auto; min-height: 0; }
 /* 画布上的选中态（外挂类，_flow 复刻件未改）：命中层描边 = 选中框 */
 .g-canvas .flow-node-sel .djs-hit { fill: rgba(51, 112, 255, .09) !important; stroke: #3370ff !important; stroke-width: 2.5px !important; stroke-opacity: 1 !important; rx: 7px; ry: 7px; }
@@ -520,7 +519,11 @@
 /* ── 流程详情:左版本列 + 右画布(补充)──────────────────────────────
    版本收在流程内部:左列是这条流的全部版本(恰一个生效),点谁看谁的图;
    属性区从右侧窄栏挪到图下整行(g-wide),声明式契约细节再往下。 */
-.g-flowlab { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr); gap: 12px; align-items: stretch; }
+/* 三栏(2026-07-30):左**窄**版本条 · 中流程图 · 右节点属性。
+   右栏用包壳绝对定位 —— 行高由中栏的图定,属性长了在卡内滚,不把图拉长。 */
+.g-flowlab { display: grid; grid-template-columns: 132px minmax(0, 2.5fr) minmax(320px, 1.25fr); gap: 12px; align-items: stretch; }
+.g-nodewrap { position: relative; min-height: 0; }
+.g-nodewrap > .g-nodecard { position: absolute; inset: 0; height: auto; }
 /* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长。
    形制取**图纸风**,与右边的流程图同一套语言(flow-canvas.css 的 process-doc):
    白纸同影同角、mono 小字距大写题头(VER — 前缀对 FIG — 前缀)、钢青/黄铜色系、
@@ -541,6 +544,27 @@
 .g-ver-new:hover { border-color: #4e7daf; box-shadow: 0 0 0 2px rgba(78, 125, 175, .14); }
 .g-ver-new:disabled { opacity: .5; cursor: default; box-shadow: none; }
 .g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
+
+/* ── 窄版本条:一版一行(v几 + 状态 + 计数),动作只在**看着的那一版**上展开 ── */
+.g-verslim .g-vercard-h { padding: 30px 10px 16px; gap: 4px; }
+.g-verslim .g-vercard-list { padding: 10px 8px; gap: 6px; }
+.g-verrow { display: flex; flex-direction: column; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; }
+.g-verrow.on { border-color: #9fb0c0; background: #f2f5f8; }
+.g-verrow.live { border-left-color: var(--sh-brass); background: var(--sh-brass-wash); }
+.g-verrow.live.on { border-color: #cbb98d; }
+.g-verrow-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; padding: 7px 8px; border: 0; background: transparent; font-family: var(--sh-mono); font-size: 10px; color: #3a4452; text-align: left; cursor: pointer; }
+.g-verrow-h > b { font-size: 12.5px; font-weight: 700; color: var(--sh-ink); }
+.g-verrow-h .st { font-size: 9px; letter-spacing: .1em; color: var(--sh-muted); }
+.g-verrow-h .st.live { color: var(--sh-brass); font-weight: 700; }
+.g-verrow-h .cnt { flex-basis: 100%; font-size: 9px; color: var(--sh-muted); }
+.g-verrow-a { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; }
+.g-verrow-a .g-ver-act { flex: 1 1 auto; text-align: center; padding: 3px 6px; letter-spacing: .06em; }
+.g-ver-act.t-bad { color: #b0413e; border-color: #e0bcba; }
+.g-ver-act:disabled { opacity: .45; cursor: default; }
+/* 改名条:名字改的是整条流,所以落在卡底、不挂在某一行上 */
+.g-verrename { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-top: 1px solid var(--sh-line); background: #f9fafc; }
+.g-verrename .g-input { height: 26px; font-size: 12px; }
+.g-verrename .t { font-family: var(--sh-mono); font-size: 8.5px; line-height: 1.7; color: var(--sh-muted); }
 .g-ver { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; cursor: pointer; font-family: var(--sh-mono); font-size: 11px; color: #3a4452; }
 .g-ver:hover { border-color: #aeb9c6; }
 .g-ver.on { background: #f2f5f8; border-color: #9fb0c0; }
@@ -554,10 +578,6 @@
 .g-ver-act { border: 1px solid var(--sh-line); background: #fff; padding: 2px 8px; font-family: inherit; font-size: 9.5px; letter-spacing: .1em; color: #3a4452; cursor: pointer; }
 .g-ver-act:hover { border-color: #aeb9c6; }
 .g-ver-act.t-go { color: var(--sh-brass); border-color: #d9c9a4; }
-/* 卡底栏 —— 它的净高(1 顶线 + 10 + 17 行 + 10 = 38)是**两列共用的基线**:
-   右侧画布的图框下沿要落在这条顶线上(见上面 .g-canvas .process-doc > .hero 的下外距)。
-   文案改长到换行、或改了内距,那边的 20px 要跟着算。 */
-.g-vercard-f { flex: none; min-height: 38px; box-sizing: border-box; padding: 10px 16px; border-top: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 9.5px; line-height: 1.8; color: var(--sh-muted); }
 .g-ver { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--cline); border-radius: 11px; cursor: pointer; font: inherit; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
 .g-ver:hover { border-color: #c9d6e6; }
 .g-ver.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); }
@@ -572,35 +592,16 @@
    检验章(判据面全清的合格章)是唯一的戏眼,其余一律细线纪律。 */
 
 /* ── 激活 · 双判据 → 检验单:上下两格判据面均分卡高,面头一行、面体列违规 ── */
-.g-exboard { min-height: 0; }
-.g-exboard .g-vercard-h { height: auto; padding: 13px 18px 10px; }
-.g-vercard-list.g-exsheet { padding: 0; gap: 0; overflow: hidden; }
-.g-exface { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
-.g-exface + .g-exface { border-top: 1px solid var(--sh-line); }
-.g-exfacet { flex: none; display: flex; align-items: center; gap: 7px; padding: 10px 16px 9px; font: 600 9.5px/1 var(--sh-mono, var(--mono)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sh-steel, #46586a); border-bottom: 1px dashed #e4e9ef; }
-.g-exfacet.ok { color: #2e7d4f; }
-.g-exfacet .st { margin-left: auto; letter-spacing: .1em; text-align: right; }
-.g-exfacet:not(.ok) .st { color: #b0413e; }
-.g-exfacet:not(.ok) svg { color: #b0413e; }
-.g-exface-b { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 10px 14px 12px; }
 /* 违规行:方角细线 + 红左线(压回全局 .g-ver 的圆角白卡版);点一条定位到节点属性 */
-.g-exface-b .g-ver { border-radius: 0; border: 1px solid var(--sh-line); border-left: 3px solid #b0413e; padding: 7px 10px; font-family: var(--sh-mono); box-shadow: none; }
-.g-exface-b .g-ver:hover { border-color: #aeb9c6; border-left-color: #b0413e; }
-.g-exface-b .g-ver:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
 .g-ex { cursor: pointer; border-left-color: #b0413e; }
 .g-ex > b { font-size: 11px; }
 .g-ex .msg { flex: 1; min-width: 0; font-size: 10.5px; line-height: 1.55; letter-spacing: 0; text-transform: none; color: #3a4452; }
 /* 检验章:该面清零即盖 —— 双线方框微旋,检验单的通过凭证;半透边线是印泥感 */
-.g-exstamp { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 20px 10px; border: 1.5px solid rgba(46, 125, 79, .55); outline: 1px solid rgba(46, 125, 79, .3); outline-offset: 3px; color: #2e7d4f; transform: rotate(-4deg); font: 700 12.5px/1.2 var(--sh-mono); letter-spacing: .34em; text-indent: .34em; }
-.g-exstamp small { font-size: 7.5px; font-weight: 600; letter-spacing: .18em; text-indent: .18em; opacity: .7; }
 /* 第二面的章反向微旋 —— 两枚章不该是同一手势盖出来的 */
-.g-exface + .g-exface .g-exstamp { transform: rotate(2.5deg); }
 /* 裁定带:两面全清才出 —— 黄铜是「可生效」的颜色 */
-.g-exverdict { flex: none; padding: 9px 16px 9px 13px; border-top: 1px solid var(--sh-line); border-left: 3px solid var(--sh-brass); background: var(--sh-brass-wash); font-family: var(--sh-mono); font-size: 10px; line-height: 1.8; color: var(--sh-brass); }
-.g-exboard-empty { padding: 16px 18px; font-family: var(--sh-mono); font-size: 10px; line-height: 1.9; color: var(--sh-muted); }
 
 /* ── 节点 · 属性 → 索引栏(固定)+ 明细区(滚动)────────────────────── */
-.g-nodecard { height: 560px; min-height: 0; }
+.g-nodecard { min-height: 0; }
 .g-nodecard .g-vercard-h { height: auto; padding: 13px 18px 10px; }
 .g-nodecard .g-vercard-h .n { margin-left: auto; letter-spacing: .1em; }
 .g-nodecard .g-vercard-h .n.dirty { color: var(--sh-brass); }
@@ -609,15 +610,6 @@
 .g-nodecard-b > .g-note { flex: none; margin: 10px 14px 0; }
 
 /* 索引栏 = 图框分度带:浅底压一层,行首竖签(节点/边 + 计数),芯片缩成分度块 */
-.g-pickrail { flex: none; background: #f9fafc; border-bottom: 1px solid var(--sh-line); }
-.g-pickrow { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; }
-.g-pickrow + .g-pickrow { border-top: 1px dashed #e4e9ef; }
-.g-picklbl { flex: none; display: inline-flex; align-items: baseline; gap: 4px; min-width: 42px; padding-top: 6px; font: 600 9px/1 var(--sh-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); }
-.g-picklbl b { font-weight: 600; font-size: 9px; color: var(--sh-muted); }
-.g-pickrow .g-picker { gap: 4px; }
-.g-nodecard .g-pick { height: 22px; padding: 0 8px; gap: 5px; border-radius: 0; border-color: var(--sh-line); background: #fff; font-size: 11px; color: #3a4452; }
-.g-nodecard .g-pick b { font-size: 9px; font-family: var(--sh-mono); }
-.g-nodecard .g-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
 
 /* 明细区:卡内唯一的滚动层 —— 索引在上钉住,拉表单不丢定位 */
 .g-propsheet { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 14px; }
@@ -628,9 +620,19 @@
 .g-sheetempty b { font-size: 12px; font-weight: 700; color: var(--sh-steel); }
 .g-sheetempty p { margin: 0; font-size: 11px; line-height: 1.9; color: var(--sh-muted); }
 
-/* 属性小卡:两列手排、按内容自高 —— 空白不再被 250 定高摊出来,长卡也不内滚;
-   左列 = 身份与数据口,右列 = 类型与装载(JSX 里 .g-propcol 手排,语义成组、高度可控) */
-.g-nodecard .g-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
+/* 缺项清单:没选节点时占住空态 —— 原「激活判据」看板的活儿收进这里,点一条定位过去 */
+.g-lack { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
+.g-lack-h { display: flex; align-items: center; gap: 7px; font: 600 9.5px/1 var(--sh-mono); letter-spacing: .14em; text-transform: uppercase; color: #b0413e; padding-bottom: 2px; }
+.g-lack-r { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--sh-line); border-left: 3px solid #b0413e; background: #fff; font: inherit; font-size: 11px; line-height: 1.7; color: #3a4452; text-align: left; cursor: pointer; }
+.g-lack-r:hover:not(:disabled) { border-color: #aeb9c6; border-left-color: #b0413e; }
+.g-lack-r:disabled { cursor: default; opacity: .75; }
+.g-lack-r > b { flex: none; font-family: var(--sh-mono); font-size: 10px; color: var(--sh-ink); }
+/* 两面都齐:一枚小检验章,别再占一整张卡 */
+.g-okstamp { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border: 1px solid rgba(46, 125, 79, .45); font: 600 10px/1 var(--sh-mono); letter-spacing: .08em; color: #2e7d4f; }
+
+/* 属性小卡:三栏改版后右栏是**窄轨**(≈335),两列摊不开 —— 改单列竖排,
+   顺序即阅读次序:身份 → 数据接口 → 类型与责任 → 装载 → 出边。长了在明细区自己滚。 */
+.g-nodecard .g-props { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
 .g-propcol { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
 .g-nodecard .g-props.g-eprops { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
 .g-nodecard .g-prop { border: 1px solid var(--sh-line); border-radius: 0; box-shadow: none; }

apps/web/src/features/gov-process/internal/panel.tsx

@@ -2,8 +2,9 @@
  * feature `gov-process` —— 流程包(设计态):**一条流一个包,版本收在包内部**。
  *
  * 一区一内容:三枚计数摆在货架顶端,底下就是包货架(触发器已独立成区)。
- * 货架一流程一卡(不按版本平铺);进详情后左 1/3 是版本列表、右 2/3 是流程图,
- * 图下是节点属性(身份 · 数据接口 · 装载 · 出边条件),再往下是调用接口与触发器。
+ * 货架一流程一卡(不按版本平铺);进详情是**三栏**:左窄轨=版本(选中那版才出动作:
+ * 激活/停用 · 改名 · 删除)、中=流程图、右=节点属性(点图选节点,内容长了卡内滚,不拉长图)。
+ * 「激活判据」不再单占一卡 —— 没选节点时,属性栏就地列出还差哪几条,点一条定位过去。
  *
  * 版本是**运行时开关**,不是发布流程:
  *   · 编辑即其身:保存**写回当前版本**(号不变);新版本只出自「新建」
@@ -14,7 +15,14 @@
 import { useRef, useState, useEffect } from 'react';
 import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query';
 import type { ClosureReport, ProcessPackage, ProcessNode } from '@contracts';
-import { processPackageSchema, saveProcessRoute, setProcessStateRoute, validateProcessRoute } from '@contracts';
+import {
+  deleteProcessVersionRoute,
+  processPackageSchema,
+  renameProcessRoute,
+  saveProcessRoute,
+  setProcessStateRoute,
+  validateProcessRoute,
+} from '@contracts';
 import { call } from '@web-shared/typed-fetch.ts';
 import { Ico } from '@web-shared/Ico.tsx';
 import type { AskSpec } from '@web-shared/gov/primitives.tsx';
@@ -351,6 +359,8 @@ function FlowLab({
   const [dirty, setDirty] = useState(false);
   const [report, setReport] = useState<ClosureReport | undefined>(undefined);
   const [ask, setAsk] = useState<{ spec: AskSpec; danger?: boolean } | undefined>(undefined);
+  /** 改名就地开一个输入框(名字改的是整条流,不是某一版) */
+  const [renaming, setRenaming] = useState(false);
   const canvasRef = useRef<HTMLDivElement>(null);
 
   const nodes = graph?.nodes ?? [];
@@ -365,49 +375,6 @@ function FlowLab({
             (node.act === undefined && semanticNode?.kind === 'activity' && a.activityId === semanticNode.activityId),
         );
 
-  /*
-   * 数据接口的来源推导(对齐 Mastra 名流动):这个节点的每个输入字段,运行时会从哪来 ——
-   *   ① 起单入参里有同名字段 → 起单带进;② 某个上游(沿边回溯)的输出口发同名字段 → 上游发;
-   *   ③ 都没有 → 受理归一时派补全单找人收。设计期看得见,不必等跑起来猜。
-   */
-  const fieldSources = (() => {
-    if (node === null) return new Map<string, string>();
-    const initFields = new Set(
-      Object.keys(((pkg.callInterface.input as { properties?: Record<string, unknown> }).properties ?? {})),
-    );
-    // 祖先集:沿边回溯(含回边,访问集防环)
-    const ancestors = new Set<string>();
-    const queue = [node.id];
-    while (queue.length > 0) {
-      const cur = queue.pop()!;
-      for (const e of graph?.edges ?? []) {
-        if (e.to !== cur || ancestors.has(e.from)) continue;
-        ancestors.add(e.from);
-        queue.push(e.from);
-      }
-    }
-    const actOf = (nid: string): string | undefined => {
-      const g = nodes.find((x) => x.id === nid);
-      if (g?.act !== undefined) return g.act;
-      const sem = pkg.nodes.find((x) => x.id === nid);
-      return sem?.kind === 'activity' ? sem.activityId : undefined;
-    };
-    const out = new Map<string, string>();
-    for (const f of refAct?.contract.inputFields ?? []) {
-      if (initFields.has(f.name)) {
-        out.set(f.name, '起单入参');
-        continue;
-      }
-      const from = [...ancestors].find((nid) =>
-        activities
-          .find((a) => a.activityId === actOf(nid))
-          ?.contract.outputPorts.some((port) => port.fields.includes(f.name)),
-      );
-      out.set(f.name, from !== undefined ? `上游 ${from}` : '补全单');
-    }
-    return out;
-  })();
-
   // 每次进页问一次闭合 —— 画图即校验(与后端裁决同源);落笔保存后用返回的报告
   const liveReport = useQuery({
     queryKey: ['gov', 'process-report', pkg.id, pkg.version],
@@ -436,7 +403,6 @@ function FlowLab({
 
   const kindLabel = (n: FlowNode) =>
     n.kind === 'activity' ? (n.flavor === 'approval' ? '审批点' : '活动点') : n.kind === 'start' ? '调用接口' : '显式终点';
-  const kindTone = (n: FlowNode) => (n.kind === 'activity' ? (n.flavor === 'approval' ? 'warn' : 'auto') : 'mute');
 
   // 画布上的选中态:diagram-js 给每个形状挂了 data-element-id,外挂一个类,不改画布件
   useEffect(() => {
@@ -477,6 +443,34 @@ function FlowLab({
     },
   });
 
+  /** 删一版:生效版与在途钉版都会被服务端挡回来(409),判词照抄 */
+  const dropVersion = useMutation({
+    mutationFn: (version: number) =>
+      call<{ packages: ProcessPackage[] }>(deleteProcessVersionRoute, {
+        params: { id: pkg.id, version: String(version) },
+      }),
+    onSuccess: (out) => {
+      void queryClient.invalidateQueries({ queryKey: ['gov', 'process'] });
+      setAsk(undefined);
+      // 删掉的正是在看的这一版 → 落到还剩的最新一版;一版不剩就回货架
+      const rest = out.packages;
+      if (rest.length === 0) nav.jump('workflows', 'pkgs');
+      else if (rest[0] !== undefined) onSaved(rest[0].version);
+    },
+    onError: (e: unknown) => setSaveErr((e as { message?: string }).message ?? '删不掉'),
+  });
+
+  /** 改名:名字是这条流的身份 —— 一次改及于所有版本 */
+  const rename = useMutation({
+    mutationFn: (name: string) =>
+      call<{ packages: ProcessPackage[] }>(renameProcessRoute, { params: { id: pkg.id }, body: { name } }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['gov', 'process'] });
+      setRenaming(false);
+    },
+    onError: (e: unknown) => setSaveErr((e as { message?: string }).message ?? '改名失败'),
+  });
+
   /**
    * 新建版本 = **以当前看的版本为底克隆一版**(服务端定版号,**不生效**)。
    * 与「激活」分工明确:激活只是把生效指针切过去,不产生新版本;
@@ -538,6 +532,23 @@ function FlowLab({
       },
     });
 
+  const askDrop = (v: ProcessPackage) =>
+    setAsk({
+      danger: true,
+      spec: {
+        title: `删除 v${v.version}:${pkg.name}`,
+        note: (
+          <Note tone="warn">
+            版本删了**不可撤销**。生效版与**在途钉版**删不掉 —— 后者那些单要按这一版跑完,
+            定义没了就再也推不动。
+          </Note>
+        ),
+        impact: { who: '这一版的定义不再存在', undo: '不可撤销', when: '确认即删' },
+        okLabel: `删掉 v${v.version}`,
+        onOk: () => dropVersion.mutate(v.version),
+      },
+    });
+
   const askRetire = (v: ProcessPackage) =>
     setAsk({
       danger: true,
@@ -652,12 +663,12 @@ function FlowLab({
       {/* 编排工作区:左 1/3 版本列表 + 右 2/3 画布 —— 版本收在流程内部,不平铺台面 */}
       <Sec ico="route" title="编排工作区">
         <div className="g-flowlab">
-          <aside className="g-vercard">
-            {/* 题头与右侧图题成对:「流程包 · 版本」对「流程图 · 顺序」;新建与编辑同款芯片 */}
+          {/* 左栏窄:一版一行只放「v几 + 状态」;动作(激活/停用/改名/删除)只在选中行展开 */}
+          <aside className="g-vercard g-verslim">
             <div className="g-vercard-h">
-              流程包 · 版本
-              <button className="g-ver-new" onClick={askClone} disabled={cloneVersion.isPending}>
-                <Ico name="plus" s={11} /> 新建
+              版本
+              <button className="g-ver-new" onClick={askClone} disabled={cloneVersion.isPending} title="以当前版为底克隆一版">
+                <Ico name="plus" s={11} />
               </button>
             </div>
             <div className="g-vercard-list">
@@ -665,52 +676,64 @@ function FlowLab({
                 const isActive = v.version === activeVersion;
                 const isShown = v.version === pkg.version;
                 return (
-                  <div
-                    key={v.version}
-                    className={'g-ver' + (isShown ? ' on' : '') + (isActive ? ' live' : '')}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => onPick(v.version)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') onPick(v.version);
-                    }}
-                  >
-                    <b>v{v.version}</b>
-                    <span className={'st' + (isActive ? ' live' : '')}>{isActive ? '生效中' : '停用'}</span>
-                    <span className="m">
+                  <div key={v.version} className={'g-verrow' + (isShown ? ' on' : '') + (isActive ? ' live' : '')}>
+                    <button className="g-verrow-h" onClick={() => onPick(v.version)}>
+                      <b>v{v.version}</b>
+                      <span className={'st' + (isActive ? ' live' : '')}>{isActive ? '生效' : '停用'}</span>
                       <span className="cnt">
-                        {v.nodes.length}节点·{v.edges.length}边
+                        {v.nodes.length}点·{v.edges.length}边
                       </span>
-                      {isActive ? (
-                        <button
-                          className="g-ver-act"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            askRetire(v);
-                          }}
-                        >
-                          停用
+                    </button>
+                    {isShown && (
+                      /* 动作只在**看着的那一版**上出现:窄栏放不下每行一排钮,也不该让人误点别版 */
+                      <div className="g-verrow-a">
+                        {isActive ? (
+                          <button className="g-ver-act" onClick={() => askRetire(v)}>
+                            停用
+                          </button>
+                        ) : (
+                          <button
+                            className="g-ver-act t-go"
+                            /* 不闭合点不了:结构闭合 + 活动装载两面清零才亮 */
+                            disabled={closedOf(v.version) !== true}
+                            title={closedOf(v.version) === true ? `激活 v${v.version}` : '还不闭合 —— 属性面会列出差哪几条'}
+                            onClick={() => askActivate(v)}
+                          >
+                            激活
+                          </button>
+                        )}
+                        <button className="g-ver-act" onClick={() => setRenaming(true)} title="改这条流的名字(所有版本同名)">
+                          改名
                         </button>
-                      ) : (
                         <button
-                          className="g-ver-act t-go"
-                          /* 不闭合点不了:异常清零才亮 —— 完整性闸在激活,不在画图 */
-                          disabled={closedOf(v.version) !== true}
-                          title={closedOf(v.version) === true ? `激活 v${v.version}` : '有异常,先看异常看板'}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            askActivate(v);
-                          }}
+                          className="g-ver-act t-bad"
+                          disabled={isActive || dropVersion.isPending}
+                          title={isActive ? '生效版删不掉 —— 先停用' : `删掉 v${v.version}`}
+                          onClick={() => askDrop(v)}
                         >
-                          激活
+                          删除
                         </button>
-                      )}
-                    </span>
+                      </div>
+                    )}
                   </div>
                 );
               })}
             </div>
-            <div className="g-vercard-f">恰一个生效版本;在途工作流按启动时的版本跑完,启停与新建都不影响它们。</div>
+            {renaming && (
+              <div className="g-verrename">
+                <input
+                  className="g-input"
+                  autoFocus
+                  defaultValue={pkg.name}
+                  placeholder="流程名"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') rename.mutate((e.target as HTMLInputElement).value.trim());
+                    if (e.key === 'Escape') setRenaming(false);
+                  }}
+                />
+                <span className="t">回车改名 · Esc 取消 —— 名字是这条流的身份,各版本同名</span>
+              </div>
+            )}
           </aside>
 
           <div className="g-canvas" ref={canvasRef}>
@@ -750,90 +773,10 @@ function FlowLab({
           </div>
 
           {/*
-           * 左下:异常看板 —— 与版本卡同列同风(图纸式)。
-           * 画图不检查,这里**替**你盯着:哪个节点缺什么,点一条定位到属性去补;
-           * 清零了激活按钮才亮 —— 完整性闸在激活,不在画图。
+           * 右栏:节点属性。外面这层包壳是**为了不撑高整行** —— 卡绝对定位撑满行高,
+           * 行高由中栏的图定;属性长了在卡内滚,不把图拉长(用户要的「卡片高度跟图一致」)。
            */}
-          <aside className="g-vercard g-exboard">
-            <div className="g-vercard-h">激活 · 双判据</div>
-            {activeReport === undefined ? (
-              <div className="g-vercard-list g-exsheet">
-                <div className="g-exboard-empty">校验中…</div>
-              </div>
-            ) : (
-              (() => {
-                /* 能不能激活看两面:①图编排闭合完善 ②活动装载。unknown-activity 归装载,其余归编排。 */
-                const loading = activeReport.violations.filter((v) => v.kind === 'unknown-activity');
-                const drawing = activeReport.violations.filter((v) => v.kind !== 'unknown-activity');
-                const row = (v: (typeof activeReport.violations)[number], i: number) => {
-                  const nid = v.nodeId ?? pkg.edges.find((e) => e.id === v.edgeId)?.to;
-                  return (
-                    <div
-                      key={`${v.kind}-${i}`}
-                      className="g-ver g-ex"
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        if (nid !== undefined) setSel(String(nid));
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' && nid !== undefined) setSel(String(nid));
-                      }}
-                    >
-                      {nid !== undefined && <b>{String(nid)}</b>}
-                      <span className="msg">{v.message}</span>
-                    </div>
-                  );
-                };
-                /* 检验单式:两格判据面均分卡高,面体列违规行;全清的面盖检验章,两面全清出裁定带 */
-                return (
-                  <div className="g-vercard-list g-exsheet">
-                    <section className="g-exface">
-                      <div className={'g-exfacet' + (drawing.length === 0 ? ' ok' : '')}>
-                        <Ico name={drawing.length === 0 ? 'circle-check' : 'triangle-alert'} s={12} />
-                        判据一 · 图编排
-                        <span className="st">{drawing.length === 0 ? '闭合' : `${drawing.length} 项待补`}</span>
-                      </div>
-                      <div className="g-exface-b">
-                        {drawing.length === 0 ? (
-                          <div className="g-exstamp">
-                            编排闭合<small>CHK·1 — GRAPH CLOSED</small>
-                          </div>
-                        ) : (
-                          drawing.map(row)
-                        )}
-                      </div>
-                    </section>
-                    <section className="g-exface">
-                      <div className={'g-exfacet' + (loading.length === 0 ? ' ok' : '')}>
-                        <Ico name={loading.length === 0 ? 'circle-check' : 'triangle-alert'} s={12} />
-                        判据二 · 活动装载
-                        <span className="st">{loading.length === 0 ? '齐' : `${loading.length} 个未链接实现`}</span>
-                      </div>
-                      <div className="g-exface-b">
-                        {loading.length === 0 ? (
-                          <div className="g-exstamp">
-                            装载齐备<small>CHK·2 — IMPL LINKED</small>
-                          </div>
-                        ) : (
-                          loading.map(row)
-                        )}
-                      </div>
-                    </section>
-                    {activeReport.violations.length === 0 && (
-                      <div className="g-exverdict">
-                        两面都齐 —— v{pkg.version} 可运行。
-                        {pkg.version === activeVersion ? '这一版正在生效。' : '版本行的「激活」已亮,点它即可上线。'}
-                      </div>
-                    )}
-                  </div>
-                );
-              })()
-            )}
-            <div className="g-vercard-f">点一条定位到属性去补;两面清零,激活才亮。</div>
-          </aside>
-
-          {/* 右下:节点属性(图纸卡,与流程图同宽)—— 闭环(岗位/判据/映射)在这里决定 */}
+          <div className="g-nodewrap">
           <div className="g-vercard g-nodecard">
             <div className="g-vercard-h">
               节点 · 属性
@@ -855,39 +798,53 @@ function FlowLab({
               {saveErr}
             </Note>
           )}
-          {/* 索引栏 = 图框分度带:节点行 + 边行,行首竖签;固定不滚,属性区在下面自己滚 */}
-          <div className="g-pickrail">
-            <div className="g-pickrow">
-              <span className="g-picklbl">
-                节点<b>{nodes.filter((n) => n.kind !== 'start' && n.kind !== 'end' && n.kind !== 'end-bad').length}</b>
-              </span>
-              <div className="g-picker">
-                {nodes
-                  .filter((n) => n.kind !== 'start' && n.kind !== 'end' && n.kind !== 'end-bad')
-                  .map((n) => (
-                    <button
-                      key={n.id}
-                      className={`g-pick t-${kindTone(n)}` + (sel === n.id ? ' on' : '')}
-                      onClick={() => setSel(sel === n.id ? null : n.id)}
-                    >
-                      <b className="g-mono">{n.id}</b>
-                      {n.label}
-                    </button>
-                  ))}
-              </div>
-            </div>
-          </div>
           {/* key 随选中对象换 —— 换一件看,明细区滚回顶,不带上一件的滚动位 */}
           <div className="g-propsheet" key={node !== null ? `n:${node.id}` : 'blank'}>
           {node === null ? (
+            /*
+             * 没选节点时,这块地方替原来的「激活判据」看板:还差哪几条就列在这儿,点一条定位过去。
+             * 激活闸只剩两面 —— **结构闭合**与**活动装载**;字段一概不查(只声明,不要求)。
+             */
             <div className="g-sheetempty">
-              <Ico name="target" s={20} />
-              <b>点画布或拣选条,选一个节点</b>
-              <p>
-                节点填名称、链接实现、往哪走(出边条件)。边不是可编辑对象 —— 它只表达顺序;
-                点画布上的线会选中发起它的那个节点。负责人运营时分配,不在这儿;
-                审批裁决(verdict)与放行选口(outcome)由系统注入判据,不用你声明。
-              </p>
+              {(activeReport?.violations.length ?? 0) === 0 ? (
+                <>
+                  <Ico name="target" s={20} />
+                  <b>在图上点一个节点</b>
+                  <p>
+                    节点填名称、链接实现、往哪走(出边条件)。边不是可编辑对象 —— 它只表达顺序;
+                    点线会选中发起它的那个节点。负责人运营时分配,不在这儿。
+                  </p>
+                  {activeReport !== undefined && (
+                    <span className="g-okstamp">
+                      <Ico name="circle-check" s={13} />
+                      结构闭合 · 活动装载齐备 —— v{pkg.version} 可运行
+                    </span>
+                  )}
+                </>
+              ) : (
+                <div className="g-lack">
+                  <div className="g-lack-h">
+                    <Ico name="triangle-alert" s={13} />
+                    还差 {activeReport!.violations.length} 条才能激活
+                  </div>
+                  {activeReport!.violations.map((v, i) => {
+                    const nid = v.nodeId ?? pkg.edges.find((e) => e.id === v.edgeId)?.to;
+                    return (
+                      <button
+                        key={`${v.kind}-${i}`}
+                        className="g-lack-r"
+                        disabled={nid === undefined}
+                        onClick={() => {
+                          if (nid !== undefined) setSel(String(nid));
+                        }}
+                      >
+                        {nid !== undefined && <b>{String(nid)}</b>}
+                        <span>{v.message}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
             </div>
           ) : (
             <>
@@ -923,43 +880,39 @@ function FlowLab({
 
                 {node.kind === 'activity' && node.flavor !== 'approval' && (
                   /*
-                   * 数据接口(对齐 Mastra):边不传数据,约束力全在输入/输出字段 ——
-                   * 这里不填写、只**看清**:每个输入字段运行时从哪来(起单 / 上游同名 / 补全单),
-                   * 每个输出口发什么名。要改字段,改的是活动契约,不是这张卡。
+                   * 数据接口 —— **只声明,不做任何要求**(2026-07-30 用户定):
+                   * 这里照着活动契约把「吃什么、吐什么」列出来,不标必填、不推来源、不校验类型。
+                   * 字段够不够、缺了怎么补,是**活动内实现**的事,不在编排层现形。
+                   * 数组照实写成 `T[]` —— 声明得看得出是一个还是一串。
                    */
                   <Prop
                     ico="git-merge"
-                    title="数据接口 · 按字段名流动"
-                    extra={refAct === undefined ? '先链接活动实现' : '契约即管道:名字对上,数据就到'}
+                    title="数据接口 · 声明"
+                    extra={refAct === undefined ? '先链接活动实现' : '只声明,不做任何要求'}
                   >
                     {refAct === undefined ? (
-                      <Note>链接活动实现后,这里列出它吃什么、吐什么、每个字段从哪来。</Note>
+                      <Note>链接活动实现后,这里照它的契约列出吃什么、吐什么。</Note>
                     ) : (
                       <>
                         <div className="g-dif">
                           <em>输入 · {refAct.contract.inputFields.length} 字段</em>
-                          {refAct.contract.inputFields.map((f) => {
-                            const src = fieldSources.get(f.name) ?? '补全单';
-                            return (
-                              <div key={f.name} className="g-dif-r">
-                                <span className="k">
-                                  {f.name}
-                                  {f.required && <i>必填</i>}
-                                </span>
-                                <span className="t">{f.type}</span>
-                                <span className={'s' + (src === '补全单' ? ' ask' : '')}>
-                                  {src === '补全单' ? '← 补全单(受理归一找人收)' : `← ${src}`}
-                                </span>
-                              </div>
-                            );
-                          })}
+                          {refAct.contract.inputFields.map((f) => (
+                            <div key={f.name} className="g-dif-r">
+                              <span className="k">{f.name}</span>
+                              <span className="t">{f.type}</span>
+                            </div>
+                          ))}
                         </div>
                         <div className="g-dif">
                           <em>输出 · {refAct.contract.outputPorts.length} 口</em>
                           {refAct.contract.outputPorts.map((port) => (
                             <div key={port.name} className="g-dif-r">
                               <span className="k">{port.name}</span>
-                              <span className="f">{port.fields.length > 0 ? port.fields.join(' · ') : '(整包事实)'}</span>
+                              <span className="f">
+                                {port.fields.length > 0
+                                  ? port.fields.map((f) => `${f.name} ${f.type}`).join(' · ')
+                                  : '(整包事实)'}
+                              </span>
                             </div>
                           ))}
                         </div>
@@ -1094,6 +1047,7 @@ function FlowLab({
           </div>
             </div>
           </div>
+          </div>
         </div>
       </Sec>