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/app/app-shell.tsx

@@ -1,10 +1,196 @@
 /**
- * 应用壳 —— M0 骨架。工作台五要素 / 治理台九功能的 features 自 M6 起挂入。
+ * 工作台外壳 —— 自原型 `(proto)/page.tsx` 平移(README《前端 UI · 原型 1:1 平移》)。
+ *
+ * 左轨 = 品牌 → **工作台五要素**(任务 / 审批 / 消息 / 纪要 / 汇报)→ 轨底身份;
+ * 任务四区 = 左栏列表区 / 中上标题区 / 中下工作区 / 右栏对话区。
+ *
+ * **前端零过程状态**:数据全部来自服务端投影,刷新即从投影重建(§9.2)。
  */
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { Session, TaskCard, TaskDetail } from '@contracts';
+import { listMessagesRoute, listTasksRoute, replyWorkOrderRoute, sayRoute, sessionRoute, taskDetailRoute } from '@contracts';
+import { TaskChat, TaskList, ViewRegion } from '@features/desk-task';
+import { Ico } from '@web-shared/Ico.tsx';
+import { call } from '@web-shared/typed-fetch.ts';
+import { useChatWidth } from '@web-shared/useChatWidth.ts';
+import { queryKeys } from './query.ts';
+
+type ModuleKey = 'tasks' | 'approvals' | 'messages' | 'minutes' | 'report';
+
+const NAV_MODULES: ReadonlyArray<{ key: ModuleKey; label: string; icon: string }> = [
+  { key: 'tasks', label: '任务', icon: 'list-checks' },
+  { key: 'approvals', label: '审批', icon: 'file-check' },
+  { key: 'messages', label: '消息', icon: 'messages-square' },
+  { key: 'minutes', label: '纪要', icon: 'notebook-pen' },
+  { key: 'report', label: '汇报', icon: 'bar-chart' },
+];
+
 export function AppShell() {
+  const queryClient = useQueryClient();
+  const [module, setModule] = useState<ModuleKey>('tasks');
+  const [taskId, setTaskId] = useState('');
+  const [collapsed, setCollapsed] = useState(false);
+  const split = useChatWidth();
+
+  const session = useQuery({
+    queryKey: queryKeys.session,
+    queryFn: () => call<Session>(sessionRoute),
+  });
+
+  const tasks = useQuery({
+    queryKey: queryKeys.tasks,
+    queryFn: () => call<{ tasks: TaskCard[] }>(listTasksRoute),
+  });
+
+  const messages = useQuery({
+    queryKey: queryKeys.messages,
+    queryFn: () => call<{ messages: Array<{ id: string; title: string; body: string; at: string; read: boolean }> }>(
+      listMessagesRoute,
+    ),
+    enabled: module === 'messages',
+  });
+
+  const list = tasks.data?.tasks ?? [];
+  const active = list.filter((t) => t.terminal === undefined);
+  const current = taskId !== '' ? taskId : (active[0]?.id ?? list[0]?.id ?? '');
+
+  const detail = useQuery({
+    queryKey: queryKeys.task(current),
+    queryFn: () => call<TaskDetail>(taskDetailRoute, { params: { taskId: current } }),
+    enabled: current !== '',
+  });
+
+  const reply = useMutation({
+    mutationFn: (payload: Record<string, unknown>) =>
+      call<{ ok: boolean }>(replyWorkOrderRoute, { body: { reply: payload } }),
+    // 回传后按目标失效缓存 —— 组件不自行轮询
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.task(current) });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.tasks });
+    },
+  });
+
+  const say = useMutation({
+    mutationFn: (text: string) => call(sayRoute, { params: { taskId: current }, body: { text } }),
+    onSuccess: () => void queryClient.invalidateQueries({ queryKey: queryKeys.task(current) }),
+  });
+
+  const me = session.data?.staff.name ?? '—';
+  // composer 锁:有卡在等作答时锁住自由输入
+  const locked = (detail.data?.workOrders ?? []).some((o) => o.done === undefined);
+
   return (
-    <div className="proto-root">
-      <main className="app-shell">JCAI · 任务操作系统 —— M0 骨架</main>
+    <div className="app-shell">
+      <div className="app-body">
+        <nav className="app-nav">
+          <div className="app-nav-mark" title="JCAI 智能协同工作台">
+            <Ico name="bot" s={20} />
+          </div>
+          <span className="jc-rail-brand">JCAI</span>
+          {NAV_MODULES.map((m) => {
+            const badge = m.key === 'tasks' ? active.length : undefined;
+            return (
+              <button
+                key={m.key}
+                className={module === m.key ? 'active' : ''}
+                onClick={() => setModule(m.key)}
+                aria-current={module === m.key ? 'page' : undefined}
+              >
+                <span className="app-nav-icon-wrap">
+                  <Ico name={m.icon} s={20} />
+                  {badge !== undefined && badge > 0 ? <span className="app-nav-badge">{badge}</span> : null}
+                </span>
+                <span>{m.label}</span>
+              </button>
+            );
+          })}
+          <div className="jc-rail-foot">
+            <div className="jc-nav-user" title={`${me}(本工作台所有者)`}>
+              <span className="jc-nav-ava">{me.slice(0, 1)}</span>
+              <span className="jc-nav-name">{me}</span>
+            </div>
+          </div>
+        </nav>
+
+        {module === 'tasks' ? (
+          <div className={'workspace' + (collapsed ? ' jc-side-collapsed' : '')} style={split.style}>
+            {collapsed && (
+              <button
+                type="button"
+                className="jc-wl-expand"
+                title="展开列表区"
+                aria-label="展开列表区"
+                onClick={() => setCollapsed(false)}
+              >
+                <Ico name="chevron-right" s={12} />
+              </button>
+            )}
+            <TaskList
+              tasks={list}
+              selectedId={current}
+              collapsed={collapsed}
+              onPick={setTaskId}
+              onCollapse={() => setCollapsed(true)}
+            />
+            {detail.data !== undefined ? (
+              <ViewRegion key={current} detail={detail.data} onReply={(payload) => reply.mutate(payload)} />
+            ) : (
+              <main className="execution-panel jc-panel-card">
+                <div className="jc-list-empty">
+                  <Ico name="list-checks" s={18} />
+                  {tasks.isLoading ? '载入中…' : '还没有落到你工位的任务'}
+                </div>
+              </main>
+            )}
+            {detail.data !== undefined && (
+              <i
+                className="jc-vsplit"
+                title="拖拽调整对话区宽度 · 双击复位"
+                onPointerDown={split.onSplitDown}
+                onDoubleClick={split.onSplitReset}
+              />
+            )}
+            {detail.data !== undefined && (
+              <TaskChat
+                key={current}
+                chat={detail.data.chat}
+                locked={locked}
+                onSay={(text) => say.mutate(text)}
+                onDecide={() => undefined}
+              />
+            )}
+          </div>
+        ) : (
+          <main className="execution-panel jc-panel-card">
+            <header className="jc-vr-head">
+              <div className="jc-vr-title">
+                <h1>{NAV_MODULES.find((m) => m.key === module)?.label}</h1>
+                <span className="jc-vr-sub">工作台五要素 —— 同一份过程事实的五种投影</span>
+              </div>
+            </header>
+            {module === 'messages' ? (
+              <ul className="jc-msg-list">
+                {(messages.data?.messages ?? []).map((m) => (
+                  <li key={m.id} className={m.read ? 'read' : ''}>
+                    <b>{m.title}</b>
+                    <p>{m.body}</p>
+                    <time className="jc-mono">{m.at.slice(0, 19).replace('T', ' ')}</time>
+                  </li>
+                ))}
+                {(messages.data?.messages ?? []).length === 0 && (
+                  <li className="jc-list-empty">暂无消息</li>
+                )}
+              </ul>
+            ) : (
+              <div className="jc-list-empty">
+                <Ico name="bar-chart" s={18} />
+                该要素随 M6 后续接入
+              </div>
+            )}
+          </main>
+        )}
+      </div>
     </div>
   );
 }