M6(2/n): 治理台九功能 + SSE 订阅层 + 读/治分权

治理台按 §9.1 拆成九个 gov-* feature,共用件落 shared/gov:
  · 外壳(左轨/顶栏/面包屑/页签/整页下钻)自原型 Governance.tsx 平移,
    DOM 与 g-* 类名原样;路由状态即应用状态,区/页签/下钻栈全编码进 hash 可深链
  · 编排画布 diagram-js 画布件 1:1 平移(flow-layout/flow-node-paint/FlowDiagram),
    新增 pkg-to-graph 把 ProcessPackage 转成画布图模型;统一报价 v1 全图 12 节点 15 边渲染通过
  · 后端补四路由:审批单 / 工作流下钻 / 通道实例 / 度量仪表

SSE 订阅层(§9.2):app 层单一连接,按信封目标失效缓存;
组件不再自行轮询(去掉 refetchInterval)。广播只说「哪个目标动了」,不带业务载荷,
且在投递已落库已送达之后才发 —— 不是第二条投递链路。

两处实质修正:
  · 治理路由一律要 govern → 读路由改要 read。客体三类 × 动作三种的分法就是为此:
    BD 有 task:read 能看在途、动不了控制事件;一律 govern 等于把三种动作压成一种
  · 控制事件/恢复/改派原记为 engine-transition(归机器产出)→ 新增 control 条目种类,
    归人裁决侧。归侧是按动作类型的纯推导,所以「谁干的」必须体现在 kind 上;
    否则人的叫停会被算进自主率的机器分子

判据 ⑩ 治理台一半跑通:在途监控 / 叫停 / 恢复,治理动作留痕可查。
无权查看不再画成空清单,按岗位说明缺哪一项。

gates: tsc / eslint / depcruise(286 模块)/ api-report / 360 测试 全绿

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

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

@@ -0,0 +1,506 @@
+/**
+ * feature `gov-task` —— 任务管理:在途监控、控制事件(暂停/叫停/终止)、恢复、改派、任务日志查看
+ *
+ * 自 `~/coding/JCAI_PRD/governance/_components/Governance.tsx` 平移:
+ * DOM 结构、类名(`g-*` + 色调 `t-*`)与文案原样保留,mock 常量换成服务端投影(README 平移规则 1/2/4)。
+ * 区首页只负责导航,治理动作一律落在下钻详情页的**就地确认带**(影响预览三必答)。
+ */
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  CONTROL_SEMANTIC_LABEL,
+  TASK_RUNTIME_STATE_LABEL,
+  TERMINAL_STATE_LABEL,
+  WORKFLOW_STATE_LABEL,
+  controlTaskRoute,
+  reassignTaskRoute,
+  resumeTaskRoute,
+} from '@contracts';
+import type { ControlSemantic } from '@contracts';
+import { Ico } from '@web-shared/Ico.tsx';
+import { call } from '@web-shared/typed-fetch.ts';
+import { Ava, Card, Chip, Clear, Entry, Facts, Kpi, NList, NRow, Note, PageHead, QueryGate, Sec, St } from '@web-shared/gov/primitives.tsx';
+import type { ActSpec } from '@web-shared/gov/primitives.tsx';
+import { APR_ST, PARA, RUNTIME_ST, TERMINAL_ST, WF_ST } from '@web-shared/gov/tone.ts';
+import type { Nav } from '@web-shared/gov/gov-route.ts';
+import { FlowFigure } from '@web-shared/gov/flow/FlowFigure.tsx';
+import {
+  useGovApprovals,
+  useGovStaff,
+  useGovTaskLog,
+  useGovTasks,
+  useGovWorkflow,
+} from '@web-shared/gov/gov-api.ts';
+
+export type HomeProps = { tab: string; nav: Nav };
+
+export function TasksHome({ tab, nav }: HomeProps) {
+  const q = useGovTasks();
+  const approvals = useGovApprovals();
+  const tasks = q.data?.tasks ?? [];
+  const workflows = q.data?.workflows ?? [];
+
+  /** 工作流不设负责人:要看「这条流现在落在谁身上」,读它当前节点的任务负责人 */
+  const holderOf = (workflowId: string) => {
+    const live = tasks.find((t) => t.workflowId === workflowId && t.terminal === undefined);
+    if (live) return { name: live.ownerName, label: '当前任务负责人' };
+    const stuck = tasks.find((t) => t.workflowId === workflowId && t.terminal !== undefined && t.terminal !== 'released');
+    return stuck ? { name: stuck.ownerName, label: '最后经手 · 待处置' } : undefined;
+  };
+
+  if (tab === 'board') {
+    const lanes = [
+      { k: 'running', tone: 'brand' },
+      { k: 'waiting', tone: 'warn' },
+      { k: 'abnormal', tone: 'danger' },
+      { k: 'completed', tone: 'ok' },
+    ] as const;
+    return (
+      <div className="g-board">
+        {lanes.map((ln) => {
+          const items = workflows.filter((w) => w.state === ln.k);
+          return (
+            <div key={ln.k} className={`g-lane t-${ln.tone}`}>
+              <div className="g-lane-h">
+                <i />
+                {WORKFLOW_STATE_LABEL[ln.k]}
+                <b>{items.length}</b>
+              </div>
+              {items.map((w) => {
+                const mine = tasks.filter((t) => t.workflowId === w.id);
+                const done = mine.filter((t) => t.terminal === 'released').length;
+                const total = Math.max(mine.length, 1);
+                const holder = holderOf(w.id);
+                const cur = mine.find((t) => t.terminal === undefined)?.title ?? '—';
+                return (
+                  <button key={w.id} className={`g-wf t-${ln.tone}`} onClick={() => nav.push({ k: 'wf', id: w.id })}>
+                    <span className="g-wf-top">
+                      {w.id.slice(0, 8)}
+                      <span className="r">{w.startedAt.slice(5, 16).replace('T', ' ')}</span>
+                    </span>
+                    <span className="g-wf-t">{w.subject}</span>
+                    <span className="g-wf-m">
+                      <Ico name="boxes" s={12} />
+                      {w.packageId}
+                    </span>
+                    <span className="g-wf-track">
+                      <i style={{ width: `${(done / total) * 100}%` }} />
+                    </span>
+                    <span className="g-wf-m">
+                      <Ico name="circle-dot" s={12} />
+                      {cur}
+                      <span style={{ marginLeft: 'auto' }} className="g-mono">
+                        {done}/{total}
+                      </span>
+                    </span>
+                    <span className="g-wf-m g-wf-hold">
+                      {holder ? (
+                        <>
+                          <Ava name={holder.name} />
+                          {holder.name}
+                          <em>{holder.label}</em>
+                        </>
+                      ) : (
+                        <>
+                          <Ico name="users" s={12} />
+                          无在途任务
+                        </>
+                      )}
+                    </span>
+                  </button>
+                );
+              })}
+              {items.length === 0 && <div className="g-lane-e">—</div>}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (tab === 'apr') {
+    const rows = approvals.data?.approvals ?? [];
+    return (
+      <>
+        <Note>
+          <b>审批点</b>是流程层的通用人裁节点,与活动、网关、触发器、流程包并列为编排层五要素——它是
+          <b>系统内置要素</b>,声明即用、零开发、不进活动库。它卡到审批人工位产出<b>审批单</b>:通过 /
+          驳回,附依据;没有预算、没有 Harness、没有任务日志,所以不是任务。
+        </Note>
+        <NList>
+          {rows.map((a) => (
+            <NRow
+              key={a.id}
+              tone={APR_ST[a.state].tone}
+              ico="shield-check"
+              title={a.title}
+              sub={`${a.workflowSubject} · ${a.id}`}
+              cols={[
+                { k: '审批岗位', v: a.approverPosition },
+                { k: '审批人', v: a.approverName },
+              ]}
+              right={
+                <St tone={APR_ST[a.state].tone} ico={APR_ST[a.state].ico}>
+                  {APR_ST[a.state].label}
+                </St>
+              }
+              onClick={() => nav.push({ k: 'wf', id: a.workflowId })}
+            />
+          ))}
+          {rows.length === 0 && <Clear>暂无审批单——流上还没有走到审批点。</Clear>}
+        </NList>
+      </>
+    );
+  }
+
+  if (tab === 'list') {
+    return (
+      <>
+        <Note>
+          任务 = 工作流上的节点,一个活动 = 一个任务;它派进员工工作台的<b>任务清单</b>,负责人由节点声明的岗位解析而来。
+        </Note>
+        <NList>
+          {tasks.map((t) => {
+            const st = t.terminal !== undefined ? TERMINAL_ST[t.terminal] : RUNTIME_ST[t.runtime];
+            const label = t.terminal !== undefined ? TERMINAL_STATE_LABEL[t.terminal] : TASK_RUNTIME_STATE_LABEL[t.runtime];
+            return (
+              <NRow
+                key={t.id}
+                tone={PARA[t.paradigm].tone}
+                ico={PARA[t.paradigm].ico}
+                title={t.title}
+                sub={`${t.id.slice(0, 8)} · 活动 ${t.activityId}`}
+                cols={[
+                  { k: '负责人', v: t.ownerName },
+                  {
+                    k: '步数占用',
+                    v: (
+                      <span className="g-mono">
+                        {t.usedSteps}/{t.capSteps}
+                      </span>
+                    ),
+                  },
+                  { k: '起始', v: <span className="g-mono">{t.startedAt.slice(5, 16).replace('T', ' ')}</span> },
+                ]}
+                right={
+                  <St tone={st.tone} ico={st.ico}>
+                    {label}
+                  </St>
+                }
+                onClick={() => nav.push({ k: 'task', id: t.id })}
+              />
+            );
+          })}
+          {tasks.length === 0 && <Clear>暂无任务——起单后这里会出现。</Clear>}
+        </NList>
+      </>
+    );
+  }
+
+  const abnormal = workflows.filter((w) => w.state === 'abnormal');
+  const stuck = tasks.filter((t) => t.terminal === 'blocked' || t.terminal === 'exhausted' || t.terminal === 'stalled');
+  return (
+    <QueryGate query={q}>
+    <div className="g-todo">
+      <div className="g-kpis">
+        <Kpi
+          ico="activity"
+          tone="brand"
+          label="在途工作流"
+          value={workflows.filter((w) => w.state === 'running' || w.state === 'waiting').length}
+          sub="运行中 + 等待中"
+        />
+        <Kpi ico="alert-triangle" tone="danger" label="异常工作流" value={abnormal.length} sub="失败走向未消化,待人工处置" />
+        <Kpi ico="alert-circle" tone="warn" label="任务需处置" value={stuck.length} sub="受阻待人 + 预算耗尽 + 停滞熔断" />
+        <Kpi
+          ico="circle-check"
+          tone="ok"
+          label="放行完成"
+          value={tasks.filter((t) => t.terminal === 'released').length}
+          sub="唯一成功终态"
+        />
+      </div>
+      {abnormal.map((w) => (
+        <NRow
+          key={w.id}
+          tone="danger"
+          ico="alert-triangle"
+          title={`${w.subject} · 异常`}
+          sub="节点以非完成终态结束且失败走向未消化,按声明为「终止流」,需人工处置。"
+          onClick={() => nav.push({ k: 'wf', id: w.id })}
+        />
+      ))}
+      {stuck.map((t) => (
+        <NRow
+          key={t.id}
+          tone={t.terminal === 'exhausted' ? 'warn' : 'danger'}
+          ico={TERMINAL_ST[t.terminal!].ico}
+          title={`${t.title} · ${TERMINAL_STATE_LABEL[t.terminal!]}`}
+          sub={`${t.id.slice(0, 8)} · 处置 = 改派 / 重开新实例 / 终止`}
+          onClick={() => nav.push({ k: 'task', id: t.id })}
+        />
+      ))}
+      {abnormal.length + stuck.length === 0 && <Clear>无待处置——在途实例全部正常推进。</Clear>}
+    </div>
+    </QueryGate>
+  );
+}
+
+/* ---------------- ② 员工管理 ---------------- */
+
+/** 治理写动作统一入口:成功即失效相关查询,画面由服务端重投影 */
+function useGovAction<TInput>(mutate: (input: TInput) => Promise<unknown>, keys: readonly string[]) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: mutate,
+    onSuccess: () => {
+      for (const key of keys) void queryClient.invalidateQueries({ queryKey: ['gov', key] });
+    },
+  });
+}
+
+/* ---------------- 工作流 ---------------- */
+
+export function WfPage({ id, nav }: { id: string; nav: Nav }) {
+  const workflowId = id.includes(':') ? id.split(':')[0]! : id;
+  const q = useGovWorkflow(workflowId);
+  if (q.data === undefined) return <Note>载入中…</Note>;
+  const { workflow, pkg, instances, tasks } = q.data;
+  const st = WF_ST[workflow.state];
+
+  return (
+    <>
+      <PageHead
+        ico="workflow"
+        tone={st.tone}
+        kicker={`工作流 · ${workflow.id.slice(0, 8)}`}
+        title={workflow.subject}
+        chips={
+          <>
+            <Chip tone={st.tone} ico={st.ico}>
+              {WORKFLOW_STATE_LABEL[workflow.state]}
+            </Chip>
+            <Chip ico="boxes">
+              {workflow.packageId} v{workflow.packageVersion}
+            </Chip>
+            <Chip ico="zap">
+              来源 · {workflow.source.kind} · {workflow.source.ref}
+            </Chip>
+          </>
+        }
+        desc="工作流状态由它上面的节点(任务与审批单)聚合推导,工作流层不另设状态机;重开产生新的一条工作流,旧的已终、不再入算。"
+      />
+
+      <Sec ico="git-branch" title="流程图 · 节点实例落位">
+        <FlowFigure pkg={pkg} instances={instances} />
+      </Sec>
+
+      <Sec ico="list-checks" title="流内任务" extra={`${tasks.length} 个`}>
+        <NList>
+          {tasks.map((t) => (
+            <NRow
+              key={t.id}
+              tone="brand"
+              ico="list-checks"
+              title={t.title}
+              sub={`节点 ${t.nodeId} · ${t.id.slice(0, 8)}`}
+              cols={[{ k: '负责人', v: t.ownerName }]}
+              onClick={() => nav.push({ k: 'task', id: t.id })}
+            />
+          ))}
+          {tasks.length === 0 && <Clear>暂无任务。</Clear>}
+        </NList>
+      </Sec>
+
+      <Sec ico="circle-dot" title="节点实例" extra={`${instances.length} 条`}>
+        <div className="g-rows">
+          {instances.map((i) => (
+            <div key={`${i.nodeId}#${i.instance}`}>
+              <em>
+                {pkg.nodes.find((n) => n.id === i.nodeId)?.label ?? i.nodeId}
+                {i.instance > 1 ? ` #${i.instance}` : ''}
+              </em>
+              <b className="mono">
+                {i.terminal !== undefined
+                  ? TERMINAL_STATE_LABEL[i.terminal]
+                  : i.running
+                    ? '运行中'
+                    : i.waiting
+                      ? '等待中'
+                      : i.activated
+                        ? '已激活'
+                        : '未激活'}
+              </b>
+            </div>
+          ))}
+        </div>
+      </Sec>
+    </>
+  );
+}
+
+/* ---------------- 任务:在途监控 · 控制 · 改派 ---------------- */
+
+export function TaskPage({ id, nav }: { id: string; nav: Nav }) {
+  const q = useGovTasks();
+  const staff = useGovStaff();
+  const task = (q.data?.tasks ?? []).find((t) => t.id === id);
+  const [assignee, setAssignee] = useState<string>('');
+
+  const control = useGovAction(
+    (semantic: ControlSemantic) =>
+      call(controlTaskRoute, { params: { taskId: id }, body: { semantic, reason: '治理台干预' } }),
+    ['tasks', 'workflow', 'tasklog'],
+  );
+  const resume = useGovAction(() => call(resumeTaskRoute, { params: { taskId: id } }), ['tasks', 'workflow', 'tasklog']);
+  const reassign = useGovAction(
+    (to: string) => call(reassignTaskRoute, { params: { taskId: id }, body: { to } }),
+    ['tasks', 'staff'],
+  );
+
+  if (task === undefined) return <Note>任务不存在或已不在近期窗口内。</Note>;
+  const st = task.terminal !== undefined ? TERMINAL_ST[task.terminal] : RUNTIME_ST[task.runtime];
+  const label = task.terminal !== undefined ? TERMINAL_STATE_LABEL[task.terminal] : TASK_RUNTIME_STATE_LABEL[task.runtime];
+  const live = task.terminal === undefined;
+  const suspended = task.runtime === 'suspended';
+
+  /** 控制三语义:暂停可恢复、叫停归负责人、终止级联作废 */
+  const controlAct = (semantic: ControlSemantic, danger: boolean): ActSpec => ({
+    label: CONTROL_SEMANTIC_LABEL[semantic],
+    ico: semantic === 'terminate' ? 'power' : semantic === 'halt' ? 'hand' : 'pause',
+    danger,
+    disabled: !live,
+    ask: {
+      title: `控制事件 · ${CONTROL_SEMANTIC_LABEL[semantic]}:${task.title}`,
+      note: <Note>控制事件走统一事件信封(四类事件之控制事件),先持久后投递。</Note>,
+      impact: {
+        who:
+          semantic === 'terminate'
+            ? '在途任务终止、待答卡与征答消息作废、审批点撤卡(级联)'
+            : semantic === 'halt'
+              ? `负责人 ${task.ownerName} —— 挂起并记最重档纠正信号`
+              : '任务挂起,监听与预算冻结',
+        undo: semantic === 'terminate' ? '不可恢复' : '可恢复',
+        when: '确认后即时',
+      },
+      okLabel: `确认${CONTROL_SEMANTIC_LABEL[semantic]}`,
+      onOk: () => control.mutate(semantic),
+    },
+  });
+
+  return (
+    <>
+      <PageHead
+        ico={PARA[task.paradigm].ico}
+        tone={st.tone}
+        kicker={`任务 · ${task.id.slice(0, 8)}`}
+        title={task.title}
+        chips={
+          <>
+            <Chip tone={st.tone} ico={st.ico}>
+              {label}
+            </Chip>
+            <Chip tone={PARA[task.paradigm].tone} ico={PARA[task.paradigm].ico}>
+              {PARA[task.paradigm].label}
+            </Chip>
+            <Chip ico="user-round">{task.ownerName}</Chip>
+          </>
+        }
+        desc={PARA[task.paradigm].full + ' —— 治理不改定义:控制只作用于这一次运行。'}
+        acts={[
+          controlAct('pause', false),
+          controlAct('halt', true),
+          controlAct('terminate', true),
+          {
+            label: '恢复',
+            ico: 'play',
+            primary: true,
+            disabled: !suspended,
+            ask: {
+              title: `恢复任务:${task.title}`,
+              note: <Note tone="ok">恢复 = 从挂起点继续;预算与监听解冻,任务记忆只追加、不回滚。</Note>,
+              impact: { who: `负责人 ${task.ownerName}`, undo: '可再次控制', when: '确认后即时' },
+              okLabel: '确认恢复',
+              onOk: () => resume.mutate(undefined),
+            },
+          },
+        ]}
+      />
+
+      <Card ico="gauge" title="预算占用" extra={<span className="g-mono">{`${task.usedSteps}/${task.capSteps} 步`}</span>}>
+        <Facts
+          items={[
+            { k: '步数', v: `${task.usedSteps}/${task.capSteps}`, ratio: task.usedSteps / Math.max(task.capSteps, 1) },
+            { k: '活动', v: task.activityId },
+            { k: '范式', v: PARA[task.paradigm].label },
+            { k: '起始', v: task.startedAt.slice(0, 16).replace('T', ' ') },
+          ]}
+        />
+      </Card>
+
+      <Sec ico="user-plus" title="改派">
+        <Note>改派 = 负责人变更;改派留痕并通知双方,任务记忆与草稿层不动。</Note>
+        <div className="g-field">
+          <em>新负责人</em>
+          <div className="g-seg">
+            {(staff.data?.staff ?? [])
+              .filter((s) => s.state === 'active' && s.name !== task.ownerName)
+              .map((s) => (
+                <button key={s.id} className={'g-seg-b' + (assignee === s.id ? ' on' : '')} onClick={() => setAssignee(s.id)}>
+                  {s.name} · {s.position.code}
+                </button>
+              ))}
+          </div>
+        </div>
+        <div className="g-acts-r">
+          <button className="g-btn primary" disabled={assignee === '' || !live} onClick={() => reassign.mutate(assignee)}>
+            <Ico name="user-plus" s={13} />
+            确认改派
+          </button>
+        </div>
+      </Sec>
+
+      <Entry
+        ico="scroll-text"
+        title="任务日志"
+        desc="只追加、信封盖戳、归侧标注 —— 过程即证据"
+        onClick={() => nav.push({ k: 'tasklog', id: task.id })}
+      />
+    </>
+  );
+}
+
+export function TaskLogPage({ id }: { id: string }) {
+  const q = useGovTaskLog(id);
+  const lines = q.data?.log ?? [];
+  return (
+    <>
+      <PageHead
+        ico="scroll-text"
+        kicker={`任务日志 · ${id.slice(0, 8)}`}
+        title="过程留痕"
+        desc="任务记忆只追加、不修改:每条都带信封戳与归侧标注(机器产出 / 人产出 / 人裁决 / 世界等待)。"
+      />
+      <div className="g-entries">
+        {lines.map((l) => (
+          <div key={l.id} className="g-entry">
+            <span className="g-entry-i">
+              <Ico name="circle-dot" s={14} />
+            </span>
+            <span className="g-entry-t">
+              <b>{l.title}</b>
+              <em>{l.at.slice(0, 19).replace('T', ' ')}</em>
+            </span>
+            <span className="g-entry-m">
+              <Chip>{l.sideLabel}</Chip>
+            </span>
+          </div>
+        ))}
+        {lines.length === 0 && <Clear>暂无留痕。</Clear>}
+      </div>
+    </>
+  );
+}
+
+/* ---------------- 员工 / 岗位 ---------------- */
+