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/TaskChat.tsx

@@ -0,0 +1,175 @@
+/**
+ * 对话区 —— 自原型 `_components/TaskChat.tsx` 平移。
+ *
+ * 「对话区**只承载非结构化消息 + 决策选择题**;事件由系统 Agent(灰头像)发进来。」
+ * 对话流是**一切回环输入的唯一入口**(OS 4.1);输入侧不参与控制权转交(AM 07)。
+ */
+import { useState } from 'react';
+import type { ChatMessage } from '@contracts';
+import { AI_TAG_LABEL, EVENT_TYPE_LABEL } from '@contracts';
+import { Ico } from '@web-shared/Ico.tsx';
+import ScrollArea from '@web-shared/ScrollArea.tsx';
+
+export type TaskChatProps = {
+  readonly chat: readonly ChatMessage[];
+  readonly locked: boolean;
+  onSay(text: string): void;
+  onDecide(cardId: string, value: string, note?: string): void;
+};
+
+export function TaskChat({ chat, locked, onSay, onDecide }: TaskChatProps) {
+  const [draft, setDraft] = useState('');
+
+  const submit = () => {
+    const text = draft.trim();
+    if (text === '' || locked) return;
+    onSay(text);
+    setDraft('');
+  };
+
+  return (
+    <section className="session-chat">
+      <header className="jc-chat-head">
+        <span className="jc-chat-ico">
+          <Ico name="messages-square" s={16} />
+        </span>
+        <div>
+          <h2>任务助理</h2>
+          <span>对话流 · 唯一回环输入口</span>
+        </div>
+      </header>
+
+      <ScrollArea className="jc-sa--fill" vpClassName="jc-chat-body">
+        {chat.map((msg) => (
+          <Bubble key={msg.id} msg={msg} onDecide={onDecide} />
+        ))}
+        {chat.length === 0 && (
+          <div className="jc-list-empty">
+            <Ico name="messages-square" s={18} />
+            还没有对话
+          </div>
+        )}
+      </ScrollArea>
+
+      {/* composer 锁:有卡在等作答时锁住自由输入,逼回卡上作答 */}
+      <footer className={'jc-composer' + (locked ? ' locked' : '')}>
+        <textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              submit();
+            }
+          }}
+          placeholder={locked ? '有卡在等你作答 —— 请先在卡上回答' : '说点什么…(Enter 发送)'}
+          disabled={locked}
+          rows={2}
+        />
+        <button className="jc-btn primary" onClick={submit} disabled={locked || draft.trim() === ''}>
+          发送
+        </button>
+      </footer>
+    </section>
+  );
+}
+
+/** 气泡二元制:AI / 我;系统事件走灰头像 */
+function Bubble({ msg, onDecide }: { msg: ChatMessage; onDecide: TaskChatProps['onDecide'] }) {
+  if (msg.k === 'ai') {
+    return (
+      <div className="jc-bubble side-ai">
+        <span className="jc-ava ai">AI</span>
+        <div className="jc-bubble-body">
+          {msg.tag !== undefined && <b className={'jc-tag tag-' + msg.tag}>{AI_TAG_LABEL[msg.tag]}</b>}
+          <p>{msg.text}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (msg.k === 'human') {
+    return (
+      <div className="jc-bubble side-me">
+        <div className="jc-bubble-body">
+          <p>{msg.text}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (msg.k === 'system') {
+    return (
+      <div className="jc-bubble side-sys">
+        <span className="jc-ava sys">
+          <Ico name="bot" s={14} />
+        </span>
+        <div className="jc-bubble-body">
+          <b className="jc-tag tag-event">{EVENT_TYPE_LABEL[msg.type]}事件</b>
+          <p>{msg.text}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (msg.k === 'decision') {
+    // 对话区只做选择题 —— 决策卡
+    return (
+      <div className="jc-bubble side-ai">
+        <span className="jc-ava ai">AI</span>
+        <div className="jc-bubble-body jc-card-decide">
+          <p className="jc-card-ask">{msg.ask}</p>
+          <dl className="jc-basis">
+            {msg.basis.map((b, i) => (
+              <div key={i}>
+                <dt>{b.k}</dt>
+                <dd>{b.v}</dd>
+              </div>
+            ))}
+          </dl>
+          <div className="jc-options">
+            {msg.options.map((o) => (
+              <button
+                key={o.value}
+                className={'jc-opt' + (o.recommended === true ? ' recommended' : '') + (msg.chosen?.value === o.value ? ' chosen' : '')}
+                disabled={msg.chosen !== undefined}
+                onClick={() => onDecide(msg.id, o.value)}
+              >
+                <b>{o.label}</b>
+                {o.detail !== undefined && <span>{o.detail}</span>}
+                {o.consequence !== undefined && <em>{o.consequence}</em>}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (msg.k === 'elicitation') {
+    return (
+      <div className="jc-bubble side-ai">
+        <span className="jc-ava ai">AI</span>
+        <div className="jc-bubble-body jc-card-fill">
+          <p className="jc-card-ask">{msg.ask}</p>
+          <ul>
+            {msg.fields.map((f) => (
+              <li key={f.key}>{f.label}</li>
+            ))}
+          </ul>
+          {msg.done !== undefined && <p className="jc-card-done">已作答</p>}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="jc-bubble side-ai">
+      <span className="jc-ava ai">AI</span>
+      <div className="jc-bubble-body jc-card-rate">
+        <p className="jc-card-ask">{msg.ask}</p>
+        {msg.done !== undefined && <p className="jc-card-done">已评价 {msg.done.score} 分</p>}
+      </div>
+    </div>
+  );
+}