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

@@ -0,0 +1,158 @@
+/**
+ * 任务列表区 —— 自 `~/coding/JCAI_PRD/workbench/(proto)/page.tsx` 平移。
+ *
+ * **DOM 结构与类名原样保留**(`jc-*` 前缀、vendor 皮肤一并搬);
+ * 只把 mock 数据换成服务端投影,渲染输出保持 1:1(README 平移规则 1/2/4)。
+ *
+ * 「清单里一条 = 一个任务 = 一个活动的一次运行,不是一整条工作流。」
+ */
+import { useState } from 'react';
+import type { TaskCard } from '@contracts';
+import { TERMINAL_STATE_LABEL } from '@contracts';
+import { Ico } from '@web-shared/Ico.tsx';
+import ScrollArea from '@web-shared/ScrollArea.tsx';
+
+const TASK_COLORS = ['#3370ff', '#ff8800', '#7f3bf5', '#0aa294', '#f14ba9'];
+
+type Status = 'active' | 'done';
+
+export type TaskListProps = {
+  readonly tasks: readonly TaskCard[];
+  readonly selectedId: string;
+  readonly collapsed: boolean;
+  onPick(id: string): void;
+  onCollapse(): void;
+};
+
+const statusOf = (task: TaskCard): Status => (task.terminal === undefined ? 'active' : 'done');
+
+export function TaskList({ tasks, selectedId, collapsed, onPick, onCollapse }: TaskListProps) {
+  const [filter, setFilter] = useState<Status>('active');
+  const [query, setQuery] = useState('');
+
+  if (collapsed) return null;
+
+  const count = (s: Status) => tasks.filter((t) => statusOf(t) === s).length;
+  const q = query.trim().toLowerCase();
+  const visible = tasks.filter(
+    (t) =>
+      statusOf(t) === filter &&
+      (q === '' || `${t.title} ${t.activity} ${t.workflowSubject}`.toLowerCase().includes(q)),
+  );
+
+  return (
+    <aside className="task-sidebar">
+      <div className="sidebar-head jc-wl-head">
+        <span className="jc-wl-ico">
+          <Ico name="list-checks" s={16} />
+        </span>
+        <div>
+          <h2>任务列表</h2>
+          <span>我负责的任务 · 共 {tasks.length} 项</span>
+        </div>
+        <button type="button" className="icon-button jc-wl-collapse" title="收起任务栏" onClick={onCollapse}>
+          <Ico name="panel-left-close" s={16} />
+        </button>
+      </div>
+
+      <div className="jc-flt-wrap" aria-label="任务清单筛选">
+        <div className="jc-flt" role="tablist" aria-label="按状态">
+          <button className={filter === 'active' ? 'active' : ''} onClick={() => setFilter('active')}>
+            <span>进行中</span>
+            <strong>{count('active')}</strong>
+          </button>
+          <button className={filter === 'done' ? 'active' : ''} onClick={() => setFilter('done')}>
+            <span>已完成</span>
+            <strong>{count('done')}</strong>
+          </button>
+        </div>
+        <div className="jc-search">
+          <Ico name="search" s={14} />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="搜索任务 / 活动 / 工作流…"
+            aria-label="检索任务"
+          />
+          {query !== '' && (
+            <button type="button" className="jc-search-x" onClick={() => setQuery('')} aria-label="清空">
+              ×
+            </button>
+          )}
+        </div>
+      </div>
+
+      <ScrollArea className="jc-sa--fill" vpClassName="task-list">
+        {visible.length === 0 && (
+          <div className="jc-list-empty">
+            <Ico name="search" s={18} />
+            无匹配任务
+          </div>
+        )}
+        {visible.map((task, i) => (
+          <TaskCardView
+            key={task.id}
+            task={task}
+            index={i}
+            selected={task.id === selectedId}
+            onPick={() => onPick(task.id)}
+          />
+        ))}
+      </ScrollArea>
+    </aside>
+  );
+}
+
+/**
+ * 任务卡:定高信息卡 —— 图标 + 活动名 + 状态章 / 主题两行位 / 编号 + 流内序位 / 进度条。
+ * 每行都有硬约束(单行省略或两行位),信息丰富但永不超限。
+ */
+function TaskCardView({
+  task,
+  index,
+  selected,
+  onPick,
+}: {
+  task: TaskCard;
+  index: number;
+  selected: boolean;
+  onPick: () => void;
+}) {
+  const done = task.terminal !== undefined;
+  const pct = done ? 100 : Math.round((task.position / task.total) * 100);
+  return (
+    <button
+      className={'task-card jc-tc jc-tc3' + (selected ? ' selected' : '')}
+      style={{ '--task-color': TASK_COLORS[index % TASK_COLORS.length] } as React.CSSProperties}
+      onClick={onPick}
+    >
+      <span className="jc-tc3-head">
+        <span className="jc-tc-ico">
+          <Ico name="list-checks" s={14} />
+        </span>
+        <h3 className="jc-tc-title">{task.activity}</h3>
+        {done ? (
+          <span className="jc-tc-state st-done">
+            <i />
+            {TERMINAL_STATE_LABEL[task.terminal!]}
+          </span>
+        ) : (
+          <span className="jc-tc-state i-todo">
+            <i />
+            进行中
+          </span>
+        )}
+      </span>
+      <span className="jc-tc2-sub jc-clamp2">{task.workflowSubject}</span>
+      <span className="jc-tc3-meta">
+        <code className="jc-mono">{task.id.slice(0, 8)}</code>
+        <b className="jc-mono" title="它在工作流上的序位">
+          {task.position}/{task.total}
+        </b>
+      </span>
+      <span className="jc-tc-bar">
+        <span style={{ width: `${pct}%` }} />
+      </span>
+    </button>
+  );
+}