M6(1/n): 工作台任务要素 —— 原型 1:1 平移的第一屏

样式整文件搬(README 平移规则 1):app.css 2767 行 + proto.vendor.css +
theme.css + console.css 原样搬,设计令牌与全部 jc-* / g-* 类名不动。

前端(按 §9 重排,渲染输出 1:1):
- shared/:Ico / ScrollArea / useChatWidth 自原型搬,去掉 "use client" 等 Next 专有件;
  失效的 react-hooks disable 指令按 §17 清掉(不改渲染)
- shared/typed-fetch.ts:服务端交互唯一通道,路由契约来自 @contracts/api;
  不引 Hono RPC 客户端(那要求前端 import 后端类型,违反 §5.1)
- app/query.ts:TanStack Query;缓存失效由订阅层驱动,组件不轮询
- features/desk-task:任务列表(一条 = 一个活动的一次运行,不是一整条工作流)/
  标题区 + 工作区四页签 / 对话区(气泡二元制 + 卡族 + **composer 锁**)
- @ui:ViewContainer 用**沙箱 iframe(sandbox 不含 allow-scripts)** —— 结构上无脚本执行权,
  不依赖净化算法的完备性;ViewBlocks 渲染十一种视图块
  feature 不得自行 dangerouslySetInnerHTML,eslint 有规则守着

后端:工作台路由 /api/desk/*(任务清单 / 任务详情 / 工单回传 / 自由输入 / 消息);
回传与后端校验**同 schema**;任务详情是服务端投影 —— 前端零过程状态,刷新即重建

已验证(真机):任务卡「A1 RFQ需求分析 · 序位 1/7 · awaiting-event」、
预算 2/40 步、1 张工单(LLM 步失败后转人兜底那张)、7 行带归侧标签的任务日志

358 个测试通过,门禁五道全绿;web 构建通过

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

apps/web/src/features/desk-task/internal/ViewRegion.tsx

@@ -0,0 +1,223 @@
+/**
+ * 标题区 + 工作区 —— 自原型 `_components/ViewRegion.tsx` 平移(四页签结构)。
+ *
+ * 「视图区 = 全部结构化交互:HTML 交互界面(表单读写 + 图形展示)+ 工作事项列表 + 过程成果」;
+ * 容器渲染活动推送的内容,**无脚本执行权**(AM 07);渲染一律经 @ui 的 ViewContainer。
+ */
+import { useState } from 'react';
+import type { TaskDetail, ViewBlock, WorkOrder } from '@contracts';
+import { ACTION_EFFECT_LABEL, WORK_ORDER_MODE_LABEL } from '@contracts';
+import { Ico } from '@web-shared/Ico.tsx';
+import ScrollArea from '@web-shared/ScrollArea.tsx';
+import { ViewBlocks } from '@ui';
+
+type Tab = 'todo' | 'result' | 'detail' | 'log';
+
+const TABS: ReadonlyArray<{ key: Tab; label: string; icon: string }> = [
+  { key: 'todo', label: '待处理', icon: 'list-checks' },
+  { key: 'result', label: '工作成果', icon: 'file-check' },
+  { key: 'detail', label: '任务详情', icon: 'bar-chart' },
+  { key: 'log', label: '工作日志', icon: 'notebook-pen' },
+];
+
+export type ViewRegionProps = {
+  readonly detail: TaskDetail;
+  onReply(reply: Record<string, unknown>): void;
+};
+
+export function ViewRegion({ detail, onReply }: ViewRegionProps) {
+  const [tab, setTab] = useState<Tab>('todo');
+  const open = detail.workOrders.filter((o) => o.done === undefined);
+
+  return (
+    <main className="execution-panel jc-panel-card">
+      <header className="jc-vr-head">
+        <div className="jc-vr-title">
+          <h1>{detail.card.title}</h1>
+          <span className="jc-vr-sub">{detail.card.workflowSubject}</span>
+        </div>
+        <div className="jc-vr-budget jc-mono" title="预算与熔断由基座在环外强制">
+          <span>步 {detail.budget.steps}</span>
+          <span>token {detail.budget.tokens}</span>
+          <span>时长 {detail.budget.activeMinutes}</span>
+          <span>调人 {detail.budget.humanCalls}</span>
+        </div>
+      </header>
+
+      <nav className="jc-vr-tabs" role="tablist">
+        {TABS.map((t) => (
+          <button key={t.key} className={tab === t.key ? 'active' : ''} onClick={() => setTab(t.key)} role="tab">
+            <Ico name={t.icon} s={14} />
+            <span>{t.label}</span>
+            {t.key === 'todo' && open.length > 0 ? <b className="jc-vr-tab-badge">{open.length}</b> : null}
+          </button>
+        ))}
+      </nav>
+
+      <ScrollArea className="jc-sa--fill" vpClassName="jc-vr-body">
+        {tab === 'todo' &&
+          (open.length === 0 ? (
+            <div className="jc-list-empty">
+              <Ico name="list-checks" s={18} />
+              当前没有等你的工作事项
+            </div>
+          ) : (
+            open.map((order) => <WorkOrderCard key={order.id} order={order} onReply={onReply} />)
+          ))}
+
+        {tab === 'result' && <ViewBlocks blocks={detail.view as ViewBlock[]} />}
+
+        {tab === 'detail' && (
+          <div className="jc-vr-detail">
+            <ViewBlocks blocks={detail.view as ViewBlock[]} />
+          </div>
+        )}
+
+        {tab === 'log' && (
+          <ol className="jc-log">
+            {detail.log.map((line) => (
+              <li key={line.id} className={'jc-log-item side-' + line.side}>
+                <span className="jc-log-side">{line.sideLabel}</span>
+                <span className="jc-log-title">{line.title}</span>
+                <time className="jc-mono">{line.at.slice(11, 19)}</time>
+              </li>
+            ))}
+          </ol>
+        )}
+      </ScrollArea>
+    </main>
+  );
+}
+
+/** 工单两模式:执行 = 指导书 + 空表单;验收 = 可修订报告 + 判据核对 + 放行三选一 */
+function WorkOrderCard({ order, onReply }: { order: WorkOrder; onReply(reply: Record<string, unknown>): void }) {
+  const [values, setValues] = useState<Record<string, string>>(() =>
+    Object.fromEntries(
+      (order.mode === 'execution' ? order.fields : order.fields).map((f) => [f.key, f.ai ?? '']),
+    ),
+  );
+  const [comment, setComment] = useState('');
+
+  const set = (key: string, value: string) => setValues((v) => ({ ...v, [key]: value }));
+
+  return (
+    <article className="jc-wo jc-panel-card">
+      <header className="jc-wo-head">
+        <span className={'jc-wo-mode mode-' + order.mode}>{WORK_ORDER_MODE_LABEL[order.mode]}</span>
+        <h3>{order.title}</h3>
+      </header>
+
+      {/* 调用必附上下文 —— 依据快照 */}
+      <dl className="jc-wo-basis">
+        {order.basis.map((b, i) => (
+          <div key={i}>
+            <dt>{b.k}</dt>
+            <dd>{b.v}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {order.mode === 'execution' ? (
+        <>
+          <p className="jc-wo-ask">{order.ask}</p>
+          {order.standard !== undefined && <p className="jc-wo-standard">完成标准:{order.standard}</p>}
+          {order.steps !== undefined && (
+            <ol className="jc-wo-steps">
+              {order.steps.map((s, i) => (
+                <li key={i}>{s}</li>
+              ))}
+            </ol>
+          )}
+          <div className="jc-wo-form">
+            {order.fields.map((f) => (
+              <label key={f.key} className={'jc-field' + (f.cols === 2 ? ' half' : '')}>
+                <span>
+                  {f.label}
+                  {f.required === true ? <i className="jc-req">*</i> : null}
+                </span>
+                {f.kind === 'textarea' ? (
+                  <textarea value={values[f.key] ?? ''} onChange={(e) => set(f.key, e.target.value)} rows={3} />
+                ) : f.kind === 'radio' || f.kind === 'select' ? (
+                  <select value={values[f.key] ?? ''} onChange={(e) => set(f.key, e.target.value)}>
+                    <option value="">请选择</option>
+                    {(f.options ?? []).map((o) => (
+                      <option key={o.value} value={o.value}>
+                        {o.label}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input value={values[f.key] ?? ''} onChange={(e) => set(f.key, e.target.value)} placeholder={f.placeholder} />
+                )}
+                {f.hint !== undefined && <em className="jc-hint">{f.hint}</em>}
+              </label>
+            ))}
+          </div>
+          <footer className="jc-wo-foot">
+            <button
+              className="jc-btn primary"
+              onClick={() => onReply({ mode: 'execution', workOrderId: order.id, values })}
+            >
+              {order.submitLabel ?? '提交'}
+            </button>
+          </footer>
+        </>
+      ) : (
+        <>
+          {/* 判据逐条核对 —— 成果清单的成色标记 */}
+          <ul className="jc-criteria">
+            {order.criteria.map((c, i) => (
+              <li key={i} className={c.pass ? 'pass' : 'fail'}>
+                <b className="jc-lv">{c.level}</b>
+                <span>{c.label}</span>
+                <i>{c.pass ? '✓' : '○'}</i>
+              </li>
+            ))}
+          </ul>
+          {order.actions !== undefined && order.actions.length > 0 && (
+            <ul className="jc-actions" title="预检全过才发卡:这里是已验证的动作清单">
+              {order.actions.map((a, i) => (
+                <li key={i}>
+                  <b className={'jc-eff eff-' + a.effect}>{ACTION_EFFECT_LABEL[a.effect]}</b>
+                  <span>{a.label}</span>
+                  <em>{a.detail}</em>
+                </li>
+              ))}
+            </ul>
+          )}
+          <label className="jc-field">
+            <span>意见(驳回必填)</span>
+            <textarea value={comment} onChange={(e) => setComment(e.target.value)} rows={2} />
+          </label>
+          <footer className="jc-wo-foot">
+            {/* 三选一:放行通过 / 驳回重做 / 驳回迭代 —— 完成只出自放行通过 */}
+            <button
+              className="jc-btn primary"
+              onClick={() =>
+                onReply({ mode: 'acceptance', workOrderId: order.id, verdict: 'pass', values, selectedPorts: {} })
+              }
+            >
+              {order.passLabel ?? '放行通过'}
+            </button>
+            <button
+              className="jc-btn"
+              onClick={() =>
+                onReply({ mode: 'acceptance', workOrderId: order.id, verdict: 'revise', values, comment, selectedPorts: {} })
+              }
+            >
+              驳回迭代
+            </button>
+            <button
+              className="jc-btn danger"
+              onClick={() =>
+                onReply({ mode: 'acceptance', workOrderId: order.id, verdict: 'redo', values, comment, selectedPorts: {} })
+              }
+            >
+              驳回重做
+            </button>
+          </footer>
+        </>
+      )}
+    </article>
+  );
+}