Wire preview capabilities into the app shell and dual-dock placement

Why: the adjudicated plan (D1-D4) calls for office/link previews with
loaders injected from the host, right-rail light preview alongside the
overlay viewer, and artifact deletion kept as an API capability with no
UI entry.

Evidence: previewsetup.ts injects docx (mammoth), xlsx (SheetJS, sheet
tabs, 200-row cap), pptx (pptx-preview full-fidelity; pptx2html was
dropped for a broken module entry — tXml case mismatch breaks Linux
builds — per the D2 fallback clause), and the /api/url-preview fetcher,
all via dynamic import: the main entry grows ~12KB while xlsx (430KB),
pptx (1.2MB) and jszip (98KB) load on first preview. DocViewer becomes a
FilePreview container (keeps text-family editing); Workbench gains a
preview tab with rail-preview state (store.railPreview); artifact chips
and panel rows gain a rail-preview action; the panel delete button is
removed while api.deleteArtifact and DELETE /api/artifacts/{id} remain.
tsc clean; vitest 33 passed; production build succeeds.

Impact: previews work end to end for the whole format matrix; deletion
stays plugin-reachable only.

Refs: task feature/file-preview-caps; ui fb76239; core 4d29301; backend
6d4ccfd.

.gitignore

@@ -1,3 +1,4 @@
-node_modules/
+# 无斜杠形式同时忽略目录与符号链接（目录式规则不匹配 symlink，曾致链接被提交）。
+node_modules
 dist/
 *.local

AGENTS.md

@@ -17,3 +17,20 @@
 - 模块边界、公开契约与隔离档位见 `policy/modules/`（如有）与 PROJECT.md。
 - 跨仓 gitlink 变更须经组合验证后在 Dev 仓推进；受保护分支经 PR 合入。
 - 验证命令见 PROJECT.md「验证」节；完成声明须附实际命令输出证据。
+
+## Gitea 与 Git 访问事实（2026-09-30 实测）
+
+历史文档与旧链接里的 `git-panel.u1680832.nyat.app:30319` 已失效（TLS 握手失败），
+见到一律按过期处理，不要再试。当前权威通道：
+
+- **Web / API（HTTPS）**：`https://git-home.u1680832.nyat.app:30319`（Gitea 1.27.3，
+  API 前缀 `/api/v1`；偶发 broken pipe / 超时，重试即可）。
+- **Git over SSH**：`ssh://git@git-ssh.u1680832.nyat.app:31411/weichen/<Repo>.git`
+  （各仓 origin 与 gitlink 均为此格式）。
+- **API token**：`~/.secrets/gitea`，两行键值 `URL_PREFIX=…` 与
+  `ACCESS_TOKEN=<40 位 hex>`；取值 `grep ACCESS_TOKEN ~/.secrets/gitea | cut -d= -f2-`，
+  用作 `Authorization: token <值>` 请求头。**token 值不入仓、不回显、不写进产出物**
+  （baseline 硬边界 2：只记录来源、字段与可用状态）。
+- **SSH key**：`~/.ssh/home_gitea`（ED25519，公钥指纹
+  `SHA256:GYXaOXIMeloQ1fKSfdJ/ndgPQzs/Ix7Hk62ekfkfQ20`，Gitea 侧密钥名 GMKtec）；
+  `~/.ssh/config` 已有 `git-ssh.u1680832.nyat.app` 主机条目，克隆/推送直接可用。

package.json

@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "jszip": "^3.10.2",
+    "mammoth": "^1.13.0",
     "marked": "^15.0.7",
+    "pptx-preview": "^1.0.7",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -20,6 +24,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
-    "vitest": "^3.0.5"
+    "vitest": "^4.1.11"
   }
 }

src/components/Conversation.tsx

@@ -4,8 +4,9 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { marked } from 'marked'
 import { api } from '../api'
 import { store, useStore, activeRun, type LiveState, type ContextObs } from '../store'
-import type { Message, Part, HITLCard } from '../contracts'
-import { UIRenderer, InlineConfirmCard, hasOpenConfirm } from '@ui'
+import { liveToMessage, showProcessInline } from '../live'
+import type { Message, Part, HITLCard, ActivityCard } from '../contracts'
+import { UIRenderer, InlineConfirmCard, hasOpenConfirm, CardAnchor } from '@ui'
 import { docBridge } from './Workbench'
 import { groupParts, artifactIcon } from '../messageparts'
 
@@ -44,6 +45,8 @@ function PartView({ part, live }: { part: Part; live?: boolean | null }) {
           <button className="ac-main" title={`打开 ${name}`} onClick={() => { if (art) store.viewArtifact(art) }}>
             <Icon name={icon} size={14} /> {name}
           </button>
+          <button className="ac-act" title={`右栏预览 ${name}（边聊边看）`}
+            onClick={() => { if (art) store.railPreview(art) }}><Icon name="panel-left" size={13} /></button>
           <a className="ac-act" title={`下载 ${name}`} href={api.artifactDownloadUrl(a?.artifactId ?? '')}
             download={name} onClick={e => e.stopPropagation()}><Icon name="download" size={13} /></a>
         </span>
@@ -54,8 +57,16 @@ function PartView({ part, live }: { part: Part; live?: boolean | null }) {
     case 'plan':
       return null // 计划在右栏 Plan 标签呈现
     case 'card': {
-      // cardlink 互定位（D32）：点击 ↗ 定位收件箱对应卡（从 data 中解析 card:<id>）。
-      const m = /card:([A-Za-z0-9_]+)/.exec(JSON.stringify(part.card?.data ?? ''))
+      // 卡流锚点（D39）：cardId 非空 = submit_card 引用部件——中栏自足（可展开全文）+ 跳收件箱。
+      if (part.card?.cardId) {
+        const ref = part.card.cardId
+        const card = findCard(ref)
+        const bodyChars = card?.body?.reduce((n, node) => n + (node.markdown?.length ?? 0), 0)
+        return <CardAnchor title={card?.title ?? part.card.kind} chars={bodyChars} card={card}
+          onLocate={() => store.openInbox(ref)} docBridge={docBridge} />
+      }
+      // 插件内嵌卡片部件（cardlink 互定位，D32）：点击 ↗ 定位收件箱对应卡（从 data 解析 card:<id>）。
+      const m = JSON.stringify(part.card?.data ?? '').match(/card:([A-Za-z0-9_]+)/)
       return (
         <div className="ui-section card-link" title={m ? '点击在收件箱中定位' : undefined}
           onClick={() => m && store.openInbox(m[1])}>
@@ -76,6 +87,12 @@ function findArtifact(id: string) {
   return artifactCache[id]
 }
 
+// 收件箱卡片查询缓存（store.cards 的派生索引；卡流锚点取卡数据用）。
+let cardCache: Record<string, ActivityCard> = {}
+function findCard(id: string) {
+  return cardCache[id]
+}
+
 // 过程折叠：run 终态后把连续 process 部件折叠为摘要行（可展开回看）。
 function ProcessCollapse({ parts }: { parts: Part[] }) {
   const toolCount = parts.filter(p => p.type === 'tool_call').length
@@ -93,6 +110,26 @@ function ProcessCollapse({ parts }: { parts: Part[] }) {
   )
 }
 
+// 长回复折叠阈值（CF0）：终态后超长正文收成摘要行，点击展开全文；live 期间全文可见。
+const LONG_REPLY_CHARS = 800
+
+function LongReplyCollapse({ text }: { text: string }) {
+  // 摘句取压缩空白后的前 100 字；字数按 Markdown 源码长度计。
+  const excerpt = text.replace(/\s+/g, ' ').trim().slice(0, 100)
+  return (
+    <details className="process-collapse long-reply">
+      <summary>
+        <span>📄 长回复</span>
+        <span>{text.length} 字（按 Markdown 源码计）</span>
+        {excerpt && <span style={{ color: 'var(--text-faint)' }}>{excerpt}…</span>}
+      </summary>
+      <div className="body">
+        <div className="part-text" dangerouslySetInnerHTML={{ __html: marked.parse(text) }} />
+      </div>
+    </details>
+  )
+}
+
 function AssistantMessage({ msg, live }: { msg: Message; live?: LiveState | null }) {
   const autoCollapse = useStore(s => s.ui.autoCollapseProcess)
   const ctxObs = useStore(s => (msg.runId ? s.contextObs[msg.runId] : undefined))
@@ -101,42 +138,39 @@ function AssistantMessage({ msg, live }: { msg: Message; live?: LiveState | null
   // 工具调用显示在它真正发生的位置，不被抽到消息头部重排。
   const blocks = useMemo(() => groupParts(parts), [parts])
 
-  // 流式中：过程部件实时展开；run 终态后：按偏好折叠为摘要行（可回看）。
-  const showProcessInline = live || !autoCollapse
+  // 流式期间：工具/思考阶段过程实时展开；一旦进入 responding（最终回复开始流式）
+  // 立即折叠过程，只显式显示回复（Cursor 式）；工具恢复（acting）时重新展开。
+  // run 终态后：按偏好折叠为摘要行（可回看）。
+  const showProcess = showProcessInline(live ?? null, autoCollapse)
   const lastContentIdx = (() => {
     for (let i = blocks.length - 1; i >= 0; i--) if (blocks[i].kind === 'content') return i
     return -1
   })()
   return (
-    <div className="msg assistant">
+    <div className="msg assistant" data-msg-id={msg.id}>
       <div className="msg-role">
         <span className="role-mark role-assistant"><BrandMark size={16} /></span>
         <span>助手</span>
         {live && <span className="live-bar"><span className="live-dot" />{live.phase}</span>}
       </div>
       {blocks.map((b, i) => b.kind === 'process'
-        ? (showProcessInline
+        ? (showProcess
           ? <div className="part-group" key={i}>{b.parts.map((p, j) => <div className="part" key={j}><PartView part={p} live={!!live} /></div>)}</div>
           : <ProcessCollapse key={i} parts={b.parts} />)
-        : <div className="part" key={i}>
-          <PartView part={b.part} live={!!(live && i === lastContentIdx && b.part.type === 'text')} />
-        </div>)}
+        : (() => {
+          // CF0：非 live 的超长文本部件折叠为摘要行；live 与短文本不受影响。
+          if (!live && b.part.type === 'text' && (b.part.text?.length ?? 0) > LONG_REPLY_CHARS)
+            return <LongReplyCollapse key={i} text={b.part.text ?? ''} />
+          return <div className="part" key={i}>
+            <PartView part={b.part} live={!!(live && i === lastContentIdx && b.part.type === 'text')} />
+          </div>
+        })())}
       {live && <LiveAgentNotes live={live} />}
       {!live && ctxObs && <ContextObsView obs={ctxObs} />}
     </div>
   )
 }
 
-// live 投影：run 进行中没有已落库的助手消息，把 LiveState 合成为同构的临时消息。
-// LiveState.parts 已按事件到达序维护（store.applyEvent），直接透传即保序。
-function liveToMessage(live: LiveState): Message {
-  if (live.parts.length === 0) {
-    // 兜底（无事件到达的短暂窗口）：只给 phase 占位，避免空白。
-    return { id: `live:${live.runId}`, conversationId: '', role: 'assistant', runId: live.runId, parts: [], createdAt: '' }
-  }
-  return { id: `live:${live.runId}`, conversationId: '', role: 'assistant', runId: live.runId, parts: live.parts, createdAt: '' }
-}
-
 // 上下文组装观测（4.10/4.17）：模型实际看到什么、裁了什么——可解释性入口。
 function ContextObsView({ obs }: { obs: ContextObs }) {
   return (
@@ -243,12 +277,13 @@ export function Conversation() {
   const bodyRef = useRef<HTMLDivElement>(null)
 
   artifactCache = Object.fromEntries(artifacts.map(a => [a.id, a]))
+  cardCache = Object.fromEntries(cards.map(c => [c.id, c]))
 
   const active = activeRun(runs)
 
   useEffect(() => {
     bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight })
-  }, [messages.length, live?.text, live?.thinking, live?.toolCalls.length, live?.phase, activeHitl.length])
+  }, [messages.length, live?.items, live?.phase, activeHitl.length])
 
   const send = async () => {
     if (!text.trim() && attachmentIds.length === 0) return
@@ -308,7 +343,7 @@ export function Conversation() {
             // 内联确认卡（T3）：锚定本消息的危险命令确认，双现于对话流与收件箱。
             const anchored = cards.filter(c => c.anchorMessageId === m.id && c.kind === 'confirm')
             return (
-              <div className="msg user" key={m.id}>
+              <div className="msg user" key={m.id} data-msg-id={m.id}>
                 <div className="msg-role">
                   <span className="role-mark"><Avatar name={myName} size="sm" /></span>你
                 </div>

src/components/DocViewer.tsx

@@ -1,26 +1,33 @@
-// 文档查看器（4.4 → 工作区文件管理升级）：单层 OverlayHost——markdown 渲染 /
-// 文本编辑保存 / 图片与 pdf 预览 / csv·json 等宽 / 二进制信息卡 + 下载。
+// 文档查看器（4.4 → 预览能力收敛）：格式渲染统一交给 @ui FilePreview
+// （md/图片/pdf/代码/数据/docx/xlsx/pptx/URL 一套分派），这里只保留 OverlayHost
+// 容器、工具栏与文本族的在线编辑保存。
 import { useEffect, useState } from 'react'
-import { marked } from 'marked'
 import { api } from '../api'
 import { store } from '../store'
-import { OverlayHost, Icon, Btn, EmptyState } from '@ui'
+import { OverlayHost, Icon, Btn, FilePreview } from '@ui'
 import type { Artifact } from '../contracts'
-import { artifactIcon, humanSize } from '../messageparts'
+import { humanSize } from '../messageparts'
 
 export function DocViewer({ artifact }: { artifact: Artifact }) {
   const [content, setContent] = useState<string | null>(null)
   const [editing, setEditing] = useState(false)
   const [dirty, setDirty] = useState(false)
 
+  const textKind = isTextKind(artifact)
   useEffect(() => {
-    if (artifact.kind === 'image' || isBinaryKind(artifact)) return
+    if (!textKind) return
+    setContent(null)
     fetch(api.artifactContentUrl(artifact.id)).then(r => r.text()).then(setContent).catch(() => setContent('（读取失败）'))
   }, [artifact.id])
 
-  const isPdf = /\.pdf$/i.test(artifact.name)
-  const isCsv = /\.csv$/i.test(artifact.name)
-  const isJson = /\.json$/i.test(artifact.name)
+  const source = {
+    kind: 'artifact' as const,
+    id: artifact.id,
+    name: artifact.name,
+    mime: artifact.mime,
+    contentUrl: api.artifactContentUrl(artifact.id),
+    downloadUrl: api.artifactDownloadUrl(artifact.id),
+  }
 
   return (
     <OverlayHost title={artifact.name} icon="📄" onClose={() => store.viewArtifact(null)}>
@@ -29,7 +36,7 @@ export function DocViewer({ artifact }: { artifact: Artifact }) {
           <span className="docv-meta">{artifact.kind}{humanSize(artifact.size) ? ` · ${humanSize(artifact.size)}` : ''}</span>
           <span className="spacer" />
           {dirty && <span className="docv-dirty">未保存</span>}
-          {isTextKind(artifact) && (
+          {textKind && (
             <>
               <Btn variant="ghost" icon={editing ? 'eye' : 'list'} onClick={() => setEditing(e => !e)}>{editing ? '预览' : '编辑'}</Btn>
               {editing && <Btn variant="primary" icon="check" disabled={!dirty} onClick={async () => {
@@ -44,25 +51,11 @@ export function DocViewer({ artifact }: { artifact: Artifact }) {
           </a>
         </div>
         <div className="docv-body">
-          {artifact.kind === 'image' ? (
-            <img src={api.artifactContentUrl(artifact.id)} alt={artifact.name} style={{ maxWidth: '100%', borderRadius: 8 }} />
-          ) : isPdf ? (
-            <iframe src={api.artifactContentUrl(artifact.id)} title={artifact.name} className="docv-pdf" />
-          ) : isBinaryKind(artifact) ? (
-            <EmptyState icon={artifactIcon(artifact.name, artifact.kind)}>
-              <b>{artifact.name}</b>
-              <div>{humanSize(artifact.size) || '二进制文件'} · 浏览器不支持此格式的在线预览</div>
-              <a className="btn v-primary" href={api.artifactDownloadUrl(artifact.id)} download={artifact.name}>
-                <Icon name="download" size={14} /> 下载文件
-              </a>
-            </EmptyState>
-          ) : editing ? (
+          {editing && textKind ? (
             <textarea className="search-input docv-editor" value={content ?? ''}
               onChange={e => { setContent(e.target.value); setDirty(true) }} />
-          ) : isCsv || isJson ? (
-            <pre className="docv-pre">{content ?? '（加载中…'}</pre>
           ) : (
-            <div className="doc-viewer" dangerouslySetInnerHTML={{ __html: marked.parse(content ?? '（加载中…') as string }} />
+            <FilePreview source={source} />
           )}
         </div>
       </div>
@@ -73,7 +66,3 @@ export function DocViewer({ artifact }: { artifact: Artifact }) {
 function isTextKind(a: Artifact): boolean {
   return a.kind === 'document' && /\.(md|txt|csv|log|json)$/i.test(a.name)
 }
-
-function isBinaryKind(a: Artifact): boolean {
-  return /\.(docx|pdf|xlsx|pptx|doc|xls|ppt|zip|png|jpg|jpeg|gif|webp)$/i.test(a.name)
-}

src/components/Workbench.tsx

@@ -1,9 +1,10 @@
-// 右栏终态（提案 T4/D25）：纯收件箱 + 「当前任务」常驻卡（计划/待办并入；工件/代理/
-// 插件面板迁为工作区弹层，见 Workspaces.tsx）。
+// 右栏终态（提案 T4/D25 → 预览双落位）：收件箱/预览两页签 + 「当前任务」常驻卡。
+// 预览页签（裁定 D4）承载右栏轻预览：FilePreview compact 模式，边聊边看。
 import { store, useStore } from '../store'
 import type { Run } from '../contracts'
-import { InboxList, pendingCount, type ActivityCard, type DocBridge } from '@ui'
+import { InboxList, pendingCount, FilePreview, type ActivityCard, type DocBridge } from '@ui'
 import { Icon } from '@ui'
+import { api } from '../api'
 
 // 工件解析/打开注入：渲染器纯展示，doc-ref 词汇经此桥接本仓状态（D29）。
 export const docBridge: DocBridge = {
@@ -19,23 +20,55 @@ export function Workbench() {
   const plan = useStore(s => s.plan)
   const todos = useStore(s => s.todos)
   const pending = pendingCount(cards)
+  const rightTab = useStore(s => s.ui.rightTab)
+  const railId = useStore(s => s.ui.railPreviewId)
+  const railArtifact = useStore(s => (railId ? s.artifacts.find(a => a.id === railId) : undefined))
 
+  const showPreview = rightTab === 'preview'
   return (
     <>
       <div className="tabs">
-        <span className="tab active">收件箱{pending > 0 ? ` ${pending}` : ''}</span>
+        <button className={`tab ${!showPreview ? 'active' : ''}`} onClick={() => store.setUI({ rightTab: 'inbox' })}
+          title="收件箱">收件箱{pending > 0 ? ` ${pending}` : ''}</button>
+        <button className={`tab ${showPreview ? 'active' : ''}`} onClick={() => store.railPreview(railArtifact ?? null)}
+          title="预览（右栏轻预览）"><Icon name="eye" size={13} /> 预览</button>
+        <span className="spacer" style={{ flex: 1 }} />
         <button className="tab tab-action" title="收纳已完成卡（done→关闭；已确认卡留痕不动）" onClick={() => store.tidyCards()}><Icon name="check" size={13} /> 收纳</button>
         <button className="tab" title="收起收件箱" onClick={store.toggleRight}><Icon name="chevron-right" size={14} /></button>
       </div>
-      <div className="tab-body">
-        <CurrentTaskCard plan={plan} todos={todos} />
-        <InboxList cards={cards} docBridge={docBridge} callbacks={{
-          onAction: (c: ActivityCard, id: string) => store.cardAction(c, id),
-          onPin: (c: ActivityCard, p: boolean) => store.cardPin(c, p),
-          onDismiss: (c: ActivityCard) => store.cardDismiss(c),
-          onLocate: (c: ActivityCard) => store.openInbox(c.id),
-        }} />
-      </div>
+      {showPreview ? (
+        <div className="tab-body" data-rail-preview="">
+          {railArtifact ? (
+            <>
+              <div className="rail-preview-head">
+                <span className="rp-name" title={railArtifact.name}>{railArtifact.name}</span>
+                <span className="spacer" style={{ flex: 1 }} />
+                <button className="icon-btn" title="深预览（弹窗）" onClick={() => store.viewArtifact(railArtifact)}><Icon name="panel-left" size={14} /></button>
+                <a className="icon-btn" title="下载" href={api.artifactDownloadUrl(railArtifact.id)} download={railArtifact.name}><Icon name="download" size={14} /></a>
+                <button className="icon-btn" title="关闭预览" onClick={() => store.railPreview(null)}><Icon name="x" size={14} /></button>
+              </div>
+              <FilePreview compact source={{
+                kind: 'artifact',
+                id: railArtifact.id,
+                name: railArtifact.name,
+                mime: railArtifact.mime,
+                contentUrl: api.artifactContentUrl(railArtifact.id),
+                downloadUrl: api.artifactDownloadUrl(railArtifact.id),
+              }} />
+            </>
+          ) : <div className="empty-note" style={{ padding: 14 }}>在消息工件卡片或工件面板点「右栏预览」——文件会在这里边聊边看（md/图片/pdf/Office/代码均可）</div>}
+        </div>
+      ) : (
+        <div className="tab-body">
+          <CurrentTaskCard plan={plan} todos={todos} />
+          <InboxList cards={cards} docBridge={docBridge} callbacks={{
+            onAction: (c: ActivityCard, id: string) => store.cardAction(c, id),
+            onPin: (c: ActivityCard, p: boolean) => store.cardPin(c, p),
+            onDismiss: (c: ActivityCard) => store.cardDismiss(c),
+            onLocate: (c: ActivityCard) => store.locateMessage(c.anchorMessageId),
+          }} />
+        </div>
+      )}
     </>
   )
 }

src/components/Workspaces.tsx

@@ -2,7 +2,7 @@
 // ⌘1–9 快捷键与左栏快捷区共享同一清单（workspaceEntries）。
 import { useState } from 'react'
 import { store, useStore } from '../store'
-import type { Run, Artifact } from '../contracts'
+import type { Run } from '../contracts'
 import { api } from '../api'
 import { OverlayHost, Icon, type DocBridge } from '@ui'
 import { docBridge } from './Workbench'
@@ -55,26 +55,18 @@ export function Workspaces() {
   return null
 }
 
-/** 工件面板（工作区文件管理）：搜索 + kind 过滤 + 上传；行内预览/下载/删除（带确认）。 */
+/** 工件面板（工作区文件管理）：搜索 + kind 过滤 + 上传；行内 深预览/右栏预览/下载。
+ *  删除是保留能力：DELETE /api/artifacts/{id} 与 api.deleteArtifact 均在（插件可用），
+ *  系统默认不提供删除入口（提案 2026-09-30-file-preview-and-reserved-capabilities §2.2）。 */
 export function ArtifactsPanel() {
   const artifacts = useStore(s => s.artifacts)
   const [q, setQ] = useState('')
   const [kind, setKind] = useState<'all' | 'document' | 'data' | 'image'>('all')
-  const [confirmDel, setConfirmDel] = useState<string | null>(null)
 
   const kinds = ['all', 'document', 'data', 'image'] as const
   const visible = artifacts.filter(a =>
     (kind === 'all' || a.kind === kind) && a.name.toLowerCase().includes(q.toLowerCase()))
 
-  const del = async (a: Artifact) => {
-    try {
-      await api.deleteArtifact(a.id)
-      if (store.getState().ui.viewingArtifact?.id === a.id) store.viewArtifact(null)
-      store.toast(`已删除 ${a.name}`)
-    } catch (e) { store.toast(`删除失败：${e}`) }
-    if (store.getState().currentProjectId) store.refreshArtifacts(store.getState().currentProjectId!)
-  }
-
   return (
     <div className="artifacts-panel">
       <div className="ap-toolbar">
@@ -93,7 +85,7 @@ export function ArtifactsPanel() {
         </label>
       </div>
       {artifacts.length === 0
-        ? <div className="empty-note">暂无文件——上传附件或让模型产出文档（mock：#doc）；这里可浏览、预览、下载与删除</div>
+        ? <div className="empty-note">暂无文件——上传附件或让模型产出文档（mock：#doc）；这里可浏览、预览、下载</div>
         : visible.length === 0
           ? <div className="empty-note">没有匹配「{q}」的文件</div>
           : visible.map(a => (
@@ -104,12 +96,10 @@ export function ArtifactsPanel() {
                 <span className="meta">{a.kind} · {humanSize(a.size) || '—'} · {shortTime(a.updatedAt)}</span>
               </span>
               <span className="ar-acts">
-                <button className="icon-btn" title="预览" onClick={() => store.viewArtifact(a)}><Icon name="eye" size={14} /></button>
+                <button className="icon-btn" title="预览（弹窗）" onClick={() => store.viewArtifact(a)}><Icon name="eye" size={14} /></button>
+                <button className="icon-btn" title="右栏预览（边聊边看）" onClick={() => store.railPreview(a)}><Icon name="panel-left" size={14} /></button>
                 <a className="icon-btn" title="下载" href={api.artifactDownloadUrl(a.id)} download={a.name}
                   onClick={e => e.stopPropagation()}><Icon name="download" size={14} /></a>
-                {confirmDel === a.id
-                  ? <button className="icon-btn danger" title="确认删除" onClick={() => { setConfirmDel(null); del(a) }}><Icon name="check" size={14} /></button>
-                  : <button className="icon-btn" title="删除" onClick={() => { setConfirmDel(a.id); setTimeout(() => setConfirmDel(c => c === a.id ? null : c), 2500) }}><Icon name="trash" size={14} /></button>}
               </span>
             </div>
           ))}

src/contracts.ts

@@ -33,7 +33,7 @@ export interface Part {
   artifact?: { artifactId: ID; name: string; kind?: string };
   hitl?: { cardId: ID; question: string; resolved: boolean; answer?: string };
   plan?: PlanSnapshot;
-  card?: { kind: string; data: UINode[] };
+  card?: { kind: string; data: UINode[]; cardId?: ID }; // cardId 非空 = 收件箱卡片引用部件（submit_card）
   error?: { code: string; message: string };
   process?: boolean; // run 终态后折叠为摘要行
 }

src/live.ts

@@ -0,0 +1,100 @@
+// live 流式投影纯逻辑（中栏过程/回复分离）：事件按到达序并入 items——thinking/text
+// 增量各并入其末段，工具按当前位置落位。SSE 有序且后端每轮按 思考→正文→工具 追加落库
+// 部件，事件到达序即落库序，故合成消息与落库部件同构，终态对账不重排。
+// 文本段是否为过程（process）由「本段之后、下一个思考/文本段之前是否出现工具」判定，
+// 对齐落库的 Process: len(calls) > 0——工具轮解说的 tool.call 一到即并入过程区，
+// 无需等下一轮文本段开启。
+// 残余边界：某轮若既无正文也无思考、仅静默发起工具，其调用会被并入上一文本段（需协议
+// 携带轮次归属才能消除；现行事件流无法区分）。
+import type { Message, Part } from './contracts'
+import type { LiveState } from './store'
+
+// 到达序部件流的元素。
+export type LiveItem =
+  | { kind: 'thinking'; text: string }
+  | { kind: 'text'; index: number; text: string }
+  | { kind: 'tool'; callId?: string; name: string; status?: string; summary?: string }
+  | { kind: 'artifact'; artifact: { artifactId: string; name: string; kind?: string } }
+
+// applyThinkingDelta 并入思考增量：末段是思考则追加，否则开启新思考段（新轮开始）。
+export function applyThinkingDelta(items: LiveItem[], delta: string): LiveItem[] {
+  const last = items[items.length - 1]
+  if (last && last.kind === 'thinking') {
+    const out = items.slice()
+    out[out.length - 1] = { kind: 'thinking', text: last.text + delta }
+    return out
+  }
+  return [...items, { kind: 'thinking', text: delta }]
+}
+
+// applyTextDelta 并入正文增量：末段是同 index 的文本段则追加，否则开启新文本段。
+export function applyTextDelta(items: LiveItem[], index: number, delta: string): LiveItem[] {
+  const last = items[items.length - 1]
+  if (last && last.kind === 'text' && last.index === index) {
+    const out = items.slice()
+    out[out.length - 1] = { kind: 'text', index, text: last.text + delta }
+    return out
+  }
+  return [...items, { kind: 'text', index, text: delta }]
+}
+
+export function applyToolCall(items: LiveItem[], name: string, callId?: string): LiveItem[] {
+  return [...items, { kind: 'tool', callId, name }]
+}
+
+// applyArtifactCreated 追加工件引用（artifact.created 事件；与落库一致标记为过程）。
+export function applyArtifactCreated(items: LiveItem[], artifact: { artifactId: string; name: string; kind?: string }): LiveItem[] {
+  return [...items, { kind: 'artifact', artifact }]
+}
+
+// applyToolResult 回填对应工具（优先按 callId 配对，回落到最近一个未决工具——
+// 与落库的尾部配对语义一致）。
+export function applyToolResult(items: LiveItem[], callId: string | undefined, status: string, summary?: string): LiveItem[] {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const it = items[i]
+    if (it.kind !== 'tool' || it.status !== undefined) continue
+    if (callId && it.callId && it.callId !== callId) continue
+    const out = items.slice()
+    out[i] = { kind: 'tool', callId: it.callId, name: it.name, status, summary }
+    return out
+  }
+  return items
+}
+
+// liveToMessage：run 进行中没有已落库的助手消息，把 LiveState 合成同构临时消息，
+// 复用 AssistantMessage 渲染（思考/工具/文本实时上屏）；终态对账后由真消息替代。
+export function liveToMessage(live: LiveState): Message {
+  // 文本段是否为过程：本段之后、下一个思考/文本段之前出现工具（= 该轮带工具调用）。
+  const textProcess = new Map<number, boolean>()
+  for (let i = 0; i < live.items.length; i++) {
+    if (live.items[i].kind !== 'text') continue
+    let hasCalls = false
+    for (let j = i + 1; j < live.items.length && live.items[j].kind === 'tool'; j++) hasCalls = true
+    textProcess.set(i, hasCalls)
+  }
+  const parts: Part[] = []
+  for (let i = 0; i < live.items.length; i++) {
+    const it = live.items[i]
+    if (it.kind === 'thinking') {
+      if (it.text) parts.push({ type: 'thinking', text: it.text, process: true })
+    } else if (it.kind === 'tool') {
+      parts.push({ type: 'tool_call', process: true, toolCall: { id: it.callId ?? '', name: it.name } })
+      if (it.status !== undefined) {
+        parts.push({ type: 'tool_result', process: true, toolCall: { id: it.callId ?? '', name: it.name },
+          toolResult: { callId: it.callId ?? '', status: it.status === 'error' ? 'error' : 'ok', summary: it.summary } })
+      }
+    } else if (it.kind === 'artifact') {
+      parts.push({ type: 'artifact_ref', process: true, artifact: it.artifact })
+    } else {
+      parts.push({ type: 'text', text: it.text, process: textProcess.get(i) || undefined })
+    }
+  }
+  return { id: `live:${live.runId}`, conversationId: '', role: 'assistant', runId: live.runId, parts, createdAt: '' }
+}
+
+// showProcessInline：流式期间过程区是否展开——thinking/acting 实时展开；一旦进入
+// responding（最终回复开始流式）立即折叠，只显示回复（Cursor 式），工具恢复再展开。
+// 非 live 消息随「自动折叠过程」偏好。
+export function showProcessInline(live: LiveState | null, autoCollapse: boolean): boolean {
+  return live ? live.phase !== 'responding' : !autoCollapse
+}

src/main.tsx

@@ -1,10 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
+import { wirePreviewCapabilities } from './previewsetup'
 import '@ui/tokens.css'
 import '@ui/ui.css'
 import './styles.css'
 
+// 预览能力装配（D1–D4）：Office 解析器与链接预览 fetcher 注入 @ui（动态加载，不进主包）。
+wirePreviewCapabilities()
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />

src/previewsetup.ts

@@ -0,0 +1,85 @@
+// 预览能力装配（裁定 D1–D4）：把重解析器经 configureFilePreviewLoaders 注入 @ui。
+// 全部 dynamic import——对应格式首次预览时才下载 chunk，主 bundle 不含解析器。
+// 链接预览 fetcher 走服务端 /api/url-preview（SSRF 防护在服务端执行端）。
+import { configureFilePreviewLoaders, configureLinkPreviewFetcher } from '@ui'
+import { auth } from './auth'
+import type { LinkPreviewData } from '@ui'
+
+const fetchBuf = async (url: string | undefined): Promise<ArrayBuffer> => {
+  const r = await fetch(url!)
+  if (!r.ok) throw new Error(`HTTP ${r.status}`)
+  return r.arrayBuffer()
+}
+
+const docxLoader = async (el: HTMLElement, source: { contentUrl?: string }) => {
+  const mammoth = await import('mammoth')
+  const { value } = await mammoth.convertToHtml({ arrayBuffer: await fetchBuf(source.contentUrl) })
+  el.innerHTML = value
+}
+
+const xlsxLoader = async (el: HTMLElement, source: { contentUrl?: string }) => {
+  const XLSX = await import('xlsx')
+  const wb = XLSX.read(await fetchBuf(source.contentUrl), { type: 'array' })
+  el.innerHTML = ''
+  const tabs = document.createElement('div')
+  tabs.className = 'ui-fp-sheet-tabs'
+  const wrap = document.createElement('div')
+  wrap.className = 'ui-fp-sheet-wrap'
+  el.append(tabs, wrap)
+  wb.SheetNames.forEach((name, i) => {
+    const tab = document.createElement('button')
+    tab.className = `ui-fp-sheet-tab ${i === 0 ? 'on' : ''}`
+    tab.textContent = name
+    tab.onclick = () => {
+      tabs.querySelectorAll('.ui-fp-sheet-tab').forEach(t => t.classList.remove('on'))
+      tab.classList.add('on')
+      renderSheet(wrap, XLSX.utils.sheet_to_json<unknown[]>(wb.Sheets[name], { header: 1, defval: '' }))
+    }
+    tabs.append(tab)
+    if (i === 0) renderSheet(wrap, XLSX.utils.sheet_to_json<unknown[]>(wb.Sheets[name], { header: 1, defval: '' }))
+  })
+}
+
+function renderSheet(wrap: HTMLElement, rows: unknown[][]) {
+  wrap.innerHTML = ''
+  if (rows.length > 200) {
+    const note = document.createElement('div')
+    note.className = 'ui-fp-note'
+    note.textContent = `仅显示前 200 行（共 ${rows.length} 行）——完整内容请下载`
+    wrap.append(note)
+  }
+  const table = document.createElement('table')
+  table.className = 'ui-fp-sheet'
+  for (const row of rows.slice(0, 200)) {
+    const tr = document.createElement('tr')
+    for (const cell of row) {
+      const td = document.createElement('td')
+      td.textContent = cell == null ? '' : String(cell)
+      td.title = td.textContent
+      tr.append(td)
+    }
+    table.append(tr)
+  }
+  wrap.append(table)
+}
+
+const pptxLoader = async (el: HTMLElement, source: { contentUrl?: string }) => {
+  // pptx2html@0.3.4 的 module 入口引用了大小写错配的 ./txml（Linux 打包必炸），
+  // 按 D2 备选条款改用 pptx-preview（init(dom).preview(arrayBuffer) 全保真渲染）。
+  const { init } = await import('pptx-preview')
+  el.innerHTML = ''
+  const stage = document.createElement('div')
+  stage.className = 'ui-fp-slide-stage'
+  el.append(stage)
+  const previewer = init(stage, { width: stage.clientWidth || 900 })
+  await previewer.preview(await fetchBuf(source.contentUrl))
+}
+
+export function wirePreviewCapabilities() {
+  configureFilePreviewLoaders({ docx: docxLoader, xlsx: xlsxLoader, pptx: pptxLoader })
+  configureLinkPreviewFetcher(async href => {
+    const r = await fetch(auth.withKey(`/api/url-preview?url=${encodeURIComponent(href)}`))
+    if (!r.ok) return { url: href, error: `HTTP ${r.status}` }
+    return (await r.json()) as LinkPreviewData
+  })
+}

src/store.ts

@@ -2,9 +2,10 @@
 // useSyncExternalStore 驱动；live 流式部件为会话内临时态，run 终态后由消息树对账收敛。
 import { useSyncExternalStore } from 'react'
 import { api, connectEvents } from './api'
+import { applyTextDelta, applyThinkingDelta, applyToolCall, applyToolResult, applyArtifactCreated, type LiveItem } from './live'
 import type {
   Project, Conversation, Message, Run, Artifact, HITLCard, PlanSnapshot, TodoList,
-  AgentProfile, StreamEvent, PluginPanel, ActivityCard, Part,
+  AgentProfile, StreamEvent, PluginPanel, ActivityCard,
 } from './contracts'
 
 export interface ContextObs {
@@ -16,13 +17,11 @@ export interface ContextObs {
 export interface LiveState {
   runId: string
   phase: string
-  thinking: string
-  text: string
-  toolCalls: { name: string; status?: string; summary?: string }[]
+  // 到达序部件流（见 live.ts LiveItem）：事件到达序即落库序，与落库部件的轮次穿插序
+  // 同构；文本段是否为过程由「本段内是否出现工具调用」判定，tool.call 一到即改标。
+  items: LiveItem[]
   agentNotes: Record<string, string>
   startedAt: number
-  /** 到达序部件（渲染顺序 = 事件顺序；与后端落库的交错顺序同构）。 */
-  parts: Part[]
 }
 
 export interface UIState {
@@ -36,6 +35,8 @@ export interface UIState {
   settingsOpen: boolean
   trackerRunId: string | null
   viewingArtifact: Artifact | null
+  /** 右栏轻预览的工件（rail 预览页签内容；与弹窗深预览 viewingArtifact 并存）。 */
+  railPreviewId: string | null
   activeWorkspace: string | null
   taskOrg: 'project' | 'timeline'
   showArchived: boolean
@@ -84,6 +85,7 @@ const DEFAULT_UI: UIState = {
   settingsOpen: false,
   trackerRunId: null,
   viewingArtifact: null,
+  railPreviewId: null,
   taskOrg: 'project',
   showArchived: false,
   lastProjectId: null,
@@ -264,48 +266,22 @@ export const store = {
     switch (e.type) {
       case 'message.delta': {
         const p = e.payload as { index: number; text: string }
-        set({ live: touchLive(e.runId ?? '', l => {
-          l.text += p.text
-          // 到达序：文本增量并入尾部的流式 text part，否则新开一段。
-          const last = l.parts[l.parts.length - 1]
-          if (last && last.type === 'text' && !last.process) last.text = (last.text ?? '') + p.text
-          else l.parts.push({ type: 'text', text: p.text })
-        }) })
+        set({ live: touchLive(e.runId ?? '', l => { l.items = applyTextDelta(l.items, p.index, p.text) }) })
         break
       }
       case 'thinking.delta': {
         const p = e.payload as { index: number; text: string }
-        set({ live: touchLive(e.runId ?? '', l => {
-          l.thinking += p.text
-          const last = l.parts[l.parts.length - 1]
-          if (last && last.type === 'thinking' && last.process) last.text = (last.text ?? '') + p.text
-          else l.parts.push({ type: 'thinking', text: p.text, process: true })
-        }) })
+        set({ live: touchLive(e.runId ?? '', l => { l.items = applyThinkingDelta(l.items, p.text) }) })
         break
       }
       case 'tool.call': {
         const p = e.payload as { callId: string; name: string }
-        set({ live: touchLive(e.runId ?? '', l => {
-          l.toolCalls.push({ name: p.name })
-          l.parts.push({ type: 'tool_call', process: true, toolCall: { id: p.callId, name: p.name } })
-        }) })
+        set({ live: touchLive(e.runId ?? '', l => { l.items = applyToolCall(l.items, p.name, p.callId) }) })
         break
       }
       case 'tool.result': {
         const p = e.payload as { callId: string; status: string; summary?: string }
-        set({ live: touchLive(e.runId ?? '', l => {
-          let name = ''
-          for (let i = l.toolCalls.length - 1; i >= 0; i--) {
-            if (l.toolCalls[i].status === undefined) {
-              l.toolCalls[i] = { ...l.toolCalls[i], status: p.status, summary: p.summary }
-              name = l.toolCalls[i].name
-              break
-            }
-          }
-          // 结果紧跟对应 tool_call 之后展示（顺序执行下 push 即到位）。
-          l.parts.push({ type: 'tool_result', process: true, toolCall: { id: p.callId, name },
-            toolResult: { callId: p.callId, status: p.status === 'error' ? 'error' : 'ok', summary: p.summary } })
-        }) })
+        set({ live: touchLive(e.runId ?? '', l => { l.items = applyToolResult(l.items, p.callId, p.status, p.summary) }) })
         break
       }
       case 'run.phase': {
@@ -369,7 +345,7 @@ export const store = {
         const p = e.payload as { artifact?: { id: string; name: string; kind?: string } }
         if (p?.artifact) {
           set({ live: touchLive(e.runId ?? '', l => {
-            l.parts.push({ type: 'artifact_ref', artifact: { artifactId: p.artifact!.id, name: p.artifact!.name, kind: p.artifact!.kind } })
+            l.items = applyArtifactCreated(l.items, { artifactId: p.artifact!.id, name: p.artifact!.name, kind: p.artifact!.kind })
           }) })
         }
         if (state.currentProjectId) store.refreshArtifacts(state.currentProjectId)
@@ -406,7 +382,7 @@ export const store = {
         // 竞态保护：POST 返回前 SSE 事件可能已先行到达并累积（同 run），
         // 此时保留已累积的 live，只补挂用户消息；否则初始化空 live。
         if (!state.live || state.live.runId !== out.run.id) {
-          set({ live: { runId: out.run.id, phase: 'thinking', thinking: '', text: '', toolCalls: [], agentNotes: {}, startedAt: Date.now(), parts: [] } })
+          set({ live: { runId: out.run.id, phase: 'thinking', items: [], agentNotes: {}, startedAt: Date.now() } })
         }
         set({ messages: [...state.messages, out.message] })
         store.connectIfNeeded()
@@ -530,8 +506,20 @@ export const store = {
       document.querySelector(`[data-card-id="${cardId}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
     }, 60)
   },
+  // 卡→消息互定位另一半（D32）：从收件箱卡滚回产生它的对话消息。
+  locateMessage(messageId?: string) {
+    if (!messageId) return
+    setTimeout(() => {
+      document.querySelector(`[data-msg-id="${messageId}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }, 60)
+  },
   openTracker(runId: string) { setUI({ trackerRunId: runId }) },
   viewArtifact(a: Artifact | null) { setUI({ viewingArtifact: a }) },
+  /** 右栏轻预览：打开指定工件并切到 rail 预览页签（双落位中的"轻"侧）。 */
+  railPreview(a: Artifact | null) {
+    if (!a) { setUI({ railPreviewId: null, rightTab: 'inbox' }); return }
+    setUI({ railPreviewId: a.id, rightTab: 'preview', rightCollapsed: false })
+  },
   openSettings(open: boolean) { setUI({ settingsOpen: open }) },
   openProjectSettings(id: string | null) { setUI({ projectSettingsId: id }) },
   toast(msg: string) {
@@ -541,10 +529,8 @@ export const store = {
 }
 
 function touchLive(_runId: string, mutate: (l: LiveState) => void): LiveState | null {
-  const base = state.live ?? { runId: _runId, phase: 'thinking', thinking: '', text: '', toolCalls: [], agentNotes: {}, startedAt: Date.now(), parts: [] as Part[] }
-  const next: LiveState = { ...base, toolCalls: [...base.toolCalls], agentNotes: { ...base.agentNotes }, parts: [...base.parts] }
-  // parts 内部对象的后续可变更新（delta 并入尾部）需要新引用——浅拷贝后再克隆被改的尾部。
-  if (next.parts.length > 0) next.parts[next.parts.length - 1] = { ...next.parts[next.parts.length - 1] }
+  const base = state.live ?? { runId: _runId, phase: 'thinking', items: [], agentNotes: {}, startedAt: Date.now() }
+  const next: LiveState = { ...base, agentNotes: { ...base.agentNotes } }
   mutate(next)
   return next
 }

src/styles.css

@@ -397,3 +397,10 @@ button { font-family: inherit; font-size: inherit; color: inherit; }
 .role-mark.role-assistant { background: none; border: none; padding: 0; }
 .msg.user .msg-role { align-items: center; }
 .ad-user-cell { display: flex; align-items: center; gap: 8px; }
+
+/* ---- 右栏轻预览（裁定 D4：右栏 + 弹窗双落位）---- */
+.rail-preview-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
+.rail-preview-head .rp-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
+.tab-body[data-rail-preview] { display: flex; flex-direction: column; }
+.tab-body[data-rail-preview] .ui-fp { flex: 1; }
+.artifact-chip .ac-act { border: none; background: none; }

test/live.test.ts

@@ -0,0 +1,149 @@
+// live 流式投影纯逻辑测试（中栏过程/回复分离）：到达序并段、process 标记时机、
+// 轮次穿插同构、过程区折叠谓词。
+import { describe, it, expect } from 'vitest'
+import {
+  applyTextDelta, applyThinkingDelta, applyToolCall, applyToolResult, applyArtifactCreated,
+  liveToMessage, showProcessInline, type LiveItem,
+} from '../src/live'
+import type { LiveState } from '../src/store'
+
+function live(over: Partial<LiveState> = {}): LiveState {
+  return { runId: 'r1', phase: 'thinking', items: [], agentNotes: {}, startedAt: 0, ...over }
+}
+
+// 两轮流式事件回放：思考→解说文本→工具→思考→最终回复（与后端事件序一致）。
+function twoTurnItems(): LiveItem[] {
+  let items: LiveItem[] = []
+  items = applyThinkingDelta(items, '先想想')
+  items = applyThinkingDelta(items, '一下')
+  items = applyTextDelta(items, 0, '我先更新待办。')
+  items = applyToolCall(items, 'update_todos', 'c1')
+  items = applyToolResult(items, 'c1', 'ok', '已更新')
+  items = applyThinkingDelta(items, '再想想')
+  items = applyTextDelta(items, 1, '最终')
+  items = applyTextDelta(items, 1, '回复')
+  return items
+}
+
+describe('applyThinkingDelta / applyTextDelta', () => {
+  it('merges thinking deltas into the last thinking segment', () => {
+    let items: LiveItem[] = []
+    items = applyThinkingDelta(items, '先')
+    items = applyThinkingDelta(items, '想想')
+    expect(items).toEqual([{ kind: 'thinking', text: '先想想' }])
+  })
+  it('opens a new thinking segment after text/tool (turn boundary)', () => {
+    let items: LiveItem[] = applyThinkingDelta([], '第一轮思考')
+    items = applyTextDelta(items, 0, '解说')
+    items = applyThinkingDelta(items, '第二轮思考')
+    expect(items).toEqual([
+      { kind: 'thinking', text: '第一轮思考' },
+      { kind: 'text', index: 0, text: '解说' },
+      { kind: 'thinking', text: '第二轮思考' },
+    ])
+  })
+  it('appends text to the last segment when index matches', () => {
+    let items: LiveItem[] = []
+    items = applyTextDelta(items, 0, '先查')
+    items = applyTextDelta(items, 0, '一下')
+    expect(items).toEqual([{ kind: 'text', index: 0, text: '先查一下' }])
+  })
+  it('opens a new text segment when index advances (new turn)', () => {
+    let items: LiveItem[] = applyTextDelta([], 0, '解说')
+    items = applyTextDelta(items, 1, '最终')
+    items = applyTextDelta(items, 1, '回复')
+    expect(items).toEqual([
+      { kind: 'text', index: 0, text: '解说' },
+      { kind: 'text', index: 1, text: '最终回复' },
+    ])
+  })
+  it('fills the most recent pending tool call (callId match, tail fallback)', () => {
+    let items: LiveItem[] = []
+    items = applyToolCall(items, 'a', 'ca')
+    items = applyToolCall(items, 'b', 'cb')
+    items = applyToolResult(items, 'cb', 'ok', '结果')
+    expect(items).toEqual([
+      { kind: 'tool', callId: 'ca', name: 'a' },
+      { kind: 'tool', callId: 'cb', name: 'b', status: 'ok', summary: '结果' },
+    ])
+    // 无 callId 的事件回落到尾部配对。
+    items = applyToolResult(items, undefined, 'ok')
+    expect(items[0]).toEqual({ kind: 'tool', callId: 'ca', name: 'a', status: 'ok' })
+  })
+})
+
+describe('liveToMessage', () => {
+  it('interleaves parts per turn in arrival order, matching persisted parts', () => {
+    const msg = liveToMessage(live({ items: twoTurnItems() }))
+    expect(msg.parts).toEqual([
+      { type: 'thinking', text: '先想想一下', process: true },
+      { type: 'text', text: '我先更新待办。', process: true },
+      { type: 'tool_call', process: true, toolCall: { id: 'c1', name: 'update_todos' } },
+      { type: 'tool_result', process: true, toolCall: { id: 'c1', name: 'update_todos' },
+        toolResult: { callId: 'c1', status: 'ok', summary: '已更新' } },
+      { type: 'thinking', text: '再想想', process: true },
+      { type: 'text', text: '最终回复' },
+    ])
+  })
+  it('marks the in-flight segment as process the moment its tool call arrives', () => {
+    let items: LiveItem[] = []
+    items = applyTextDelta(items, 0, '我先查一下')
+    const before = liveToMessage(live({ items }))
+    expect(before.parts.map(p => p.process)).toEqual([undefined]) // 尚无工具：仍在回复位
+    items = applyToolCall(items, 'web_search')
+    const after = liveToMessage(live({ items }))
+    expect(after.parts.map(p => p.process)).toEqual([true, true]) // tool.call 一到即改标
+  })
+  it('single final segment without tools carries no process flag', () => {
+    let items: LiveItem[] = []
+    items = applyTextDelta(items, 0, '直接回答')
+    const msg = liveToMessage(live({ items }))
+    expect(msg.parts.map(p => p.process)).toEqual([undefined])
+  })
+  it('tools between segments keep every non-final segment in the process area', () => {
+    let items: LiveItem[] = []
+    items = applyTextDelta(items, 0, '第一轮')
+    items = applyToolCall(items, 'a')
+    items = applyToolResult(items, undefined, 'ok')
+    items = applyTextDelta(items, 1, '第二轮')
+    items = applyToolCall(items, 'b')
+    items = applyTextDelta(items, 2, '最终回复')
+    const msg = liveToMessage(live({ items }))
+    expect(msg.parts.filter(p => p.type === 'text').map(p => p.process)).toEqual([true, true, undefined])
+    // 顺序必须与落库穿插序一致：text → tool → text → tool → text。
+    expect(msg.parts.map(p => p.type)).toEqual(['text', 'tool_call', 'tool_result', 'text', 'tool_call', 'text'])
+  })
+  it('thinking and tool parts are always process', () => {
+    let items: LiveItem[] = []
+    items = applyThinkingDelta(items, '想')
+    items = applyTextDelta(items, 0, '答')
+    items = applyToolCall(items, 'web_search')
+    items = applyToolResult(items, undefined, 'ok', '命中')
+    const msg = liveToMessage(live({ items }))
+    for (const p of msg.parts.filter(p => p.type !== 'text')) expect(p.process).toBe(true)
+  })
+  it('artifact refs land after their tool call and are process', () => {
+    let items: LiveItem[] = []
+    items = applyTextDelta(items, 0, '生成报表。')
+    items = applyToolCall(items, 'make_report', 'c1')
+    items = applyToolResult(items, 'c1', 'ok')
+    items = applyArtifactCreated(items, { artifactId: 'a1', name: 'report.csv', kind: 'csv' })
+    items = applyTextDelta(items, 1, '完成。')
+    const msg = liveToMessage(live({ items }))
+    expect(msg.parts.map(p => p.type)).toEqual(['text', 'tool_call', 'tool_result', 'artifact_ref', 'text'])
+    expect(msg.parts.find(p => p.type === 'artifact_ref')).toMatchObject({ process: true })
+    expect(msg.parts.filter(p => p.type === 'text').map(p => p.process)).toEqual([true, undefined])
+  })
+})
+
+describe('showProcessInline', () => {
+  it('expands during thinking/acting and collapses the moment responding starts', () => {
+    expect(showProcessInline(live({ phase: 'thinking' }), true)).toBe(true)
+    expect(showProcessInline(live({ phase: 'acting' }), true)).toBe(true)
+    expect(showProcessInline(live({ phase: 'responding' }), true)).toBe(false)
+  })
+  it('falls back to the auto-collapse preference when no live run', () => {
+    expect(showProcessInline(null, true)).toBe(false)
+    expect(showProcessInline(null, false)).toBe(true)
+  })
+})

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/api.ts","./src/auth.ts","./src/contracts.ts","./src/main.tsx","./src/messageparts.ts","./src/passwords.ts","./src/store.ts","./src/tasklist.ts","./src/components/AdminUsersModal.tsx","./src/components/AgentTracker.tsx","./src/components/Conversation.tsx","./src/components/DocViewer.tsx","./src/components/LoginPage.tsx","./src/components/SettingsModal.tsx","./src/components/TaskSidebar.tsx","./src/components/Workbench.tsx","./src/components/Workspaces.tsx","./test/auth.test.ts","./test/contracts.test.ts","./test/messageparts.test.ts","./test/tasklist.test.ts"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/api.ts","./src/auth.ts","./src/contracts.ts","./src/live.ts","./src/main.tsx","./src/messageparts.ts","./src/passwords.ts","./src/previewsetup.ts","./src/store.ts","./src/tasklist.ts","./src/components/AdminUsersModal.tsx","./src/components/AgentTracker.tsx","./src/components/Conversation.tsx","./src/components/DocViewer.tsx","./src/components/LoginPage.tsx","./src/components/ProjectSettingsModal.tsx","./src/components/SettingsModal.tsx","./src/components/TaskSidebar.tsx","./src/components/Workbench.tsx","./src/components/Workspaces.tsx","./test/auth.test.ts","./test/contracts.test.ts","./test/live.test.ts","./test/messageparts.test.ts","./test/tasklist.test.ts"],"version":"5.9.3"}