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

packages/ui-kit/src/ViewBlocks.tsx

@@ -0,0 +1,161 @@
+/**
+ * 视图块渲染 —— 无业务语义的展示原语(编码规范 §2 packages/ui-kit)。
+ * DOM 与类名自原型平移(`jc-*`),渲染输出保持 1:1。
+ */
+import type { ViewBlock } from '@contracts';
+
+export function ViewBlocks({ blocks }: { readonly blocks: readonly ViewBlock[] }) {
+  return (
+    <>
+      {blocks.map((block, i) => (
+        <Block key={i} block={block} />
+      ))}
+    </>
+  );
+}
+
+function Block({ block }: { block: ViewBlock }) {
+  switch (block.t) {
+    case 'callout':
+      return <p className={'jc-callout tone-' + block.tone}>{block.text}</p>;
+
+    case 'kv':
+      return (
+        <section className="jc-kv">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          <dl>
+            {block.items.map((item, i) => (
+              <div key={i}>
+                <dt>{item.k}</dt>
+                <dd>{item.v}</dd>
+              </div>
+            ))}
+          </dl>
+        </section>
+      );
+
+    case 'badges':
+      return (
+        <section className="jc-badges">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          {block.items.map((item, i) => (
+            <span key={i} className={item.on ? 'on' : ''}>
+              {item.label}
+            </span>
+          ))}
+        </section>
+      );
+
+    case 'table':
+      return (
+        <section className="jc-table-wrap">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          <table className="jc-table">
+            <thead>
+              <tr>
+                {block.cols.map((c, i) => (
+                  <th key={i}>{c}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {block.rows.map((row, i) => (
+                <tr key={i}>
+                  {row.map((cell, j) => (
+                    <td key={j}>{cell}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      );
+
+    case 'bars':
+      return (
+        <section className="jc-bars">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          {block.items.map((item, i) => (
+            <div key={i} className={'jc-bar tone-' + (item.tone ?? 'brand')}>
+              <span className="jc-bar-label">{item.label}</span>
+              <span className="jc-bar-track">
+                <i style={{ width: `${Math.min((item.value / (block.max ?? 100)) * 100, 100)}%` }} />
+              </span>
+              <span className="jc-bar-value">{item.text ?? item.value}</span>
+            </div>
+          ))}
+        </section>
+      );
+
+    case 'donut':
+      return (
+        <section className="jc-donut">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          <ul>
+            {block.items.map((item, i) => (
+              <li key={i} className={'tone-' + item.tone}>
+                <b>{item.value}</b>
+                <span>{item.label}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      );
+
+    case 'cards':
+      return (
+        <section className="jc-cards">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          {block.items.map((item, i) => (
+            <article key={i} className={'jc-mini-card tone-' + (item.tone ?? 'brand')}>
+              <span className="jc-mini-tag">{item.tag}</span>
+              <h5>{item.title}</h5>
+              {item.swap !== undefined && (
+                <p className="jc-swap">
+                  <code>{item.swap.from}</code> → <code>{item.swap.to}</code>
+                </p>
+              )}
+              <b className="jc-mini-big">{item.big}</b>
+              {item.bigLabel !== undefined && <em>{item.bigLabel}</em>}
+              {item.note !== undefined && <p className="jc-mini-note">{item.note}</p>}
+            </article>
+          ))}
+        </section>
+      );
+
+    case 'waiting':
+      return (
+        <p className="jc-waiting">
+          {block.label}
+          {block.hint !== undefined && <em>{block.hint}</em>}
+        </p>
+      );
+
+    case 'mail':
+      return (
+        <article className={'jc-mail dir-' + block.dir}>
+          <header>
+            <b>{block.subject}</b>
+            <span>
+              {block.from} → {block.to}
+            </span>
+            <time>{block.time}</time>
+          </header>
+          <pre className="jc-mail-body">{block.body}</pre>
+        </article>
+      );
+
+    case 'files':
+      return (
+        <section className="jc-files">
+          {block.title !== undefined && <h4>{block.title}</h4>}
+          {block.items.map((item, i) => (
+            <div key={i} className="jc-file">
+              <b>{item.label}</b>
+              <span>{item.desc}</span>
+            </div>
+          ))}
+        </section>
+      );
+  }
+}