Converge artifact preview to one placement and one download

Why: Approved redesign phase 3: one artifact = one preview placement
(right rail by default; full-screen overlay as the only large-window form)
plus a single download button per surface. Removes the redundant
three-action chips/rows and the nested modal chrome in AgentTracker.
Evidence: npx tsc -b clean; npm test -> 38 passed. Combined runs recorded
in the Dev task card.
Impact: new store.requestPreview() is the single preview entry (Command
semantics; placement derived there); artifact chips and workspace rows
reduce to title-click = rail preview, eye = full preview, download;
docBridge card opens route through the same entry; AgentTracker drops its
inner .modal shell (OverlayHost is the only chrome). No API changes.
Refs: Agent-System-Dev task feature/ui-tokens-v3 (phase 3).

src/components/AgentTracker.tsx

@@ -25,56 +25,50 @@ export function AgentTracker() {
   const focusMsgs = focus === runId ? messagesAll.filter(m => m.runId === runId) : subMessages[focus] ?? []
 
   return (
+    // 阶段③ 收敛：只保留 OverlayHost 一层壳（此前在其内又嵌 .modal 双层窗框）。
     <OverlayHost title="代理追踪" icon="🤖" onClose={() => store.setUI({ trackerRunId: null })}>
-      <div className="modal">
-        <div className="modal-header">
-          🤖 Sub-agent 追踪
-          <span className="spacer" />
-          <button className="btn ghost" onClick={() => store.setUI({ trackerRunId: null })}>关闭</button>
-        </div>
-        <div className="modal-body">
-          {!root && <div>加载中…</div>}
-          {root && (
-            <div className="subagent-tree">
-              <div className="subagent-node">
-                <div className="head">
-                  <span className={`status-dot status-${root.status}`} />
-                  <strong>{root.kind === 'subagent' ? root.agentName || '子代理' : '主任务'}</strong>
-                  <span style={{ color: 'var(--text-faint)' }}>{root.status}{root.phase ? ` · ${root.phase}` : ''}</span>
-                  <span className="spacer" style={{ flex: 1 }} />
-                  <UsageBadge usage={root.usage} />
+      <div className="subagent-tree">
+        {!root && <div>加载中…</div>}
+        {root && (
+          <>
+            <div className="subagent-node">
+              <div className="head">
+                <span className={`status-dot status-${root.status}`} />
+                <strong>{root.kind === 'subagent' ? root.agentName || '子代理' : '主任务'}</strong>
+                <span style={{ color: 'var(--text-faint)' }}>{root.status}{root.phase ? ` · ${root.phase}` : ''}</span>
+                <span className="spacer" style={{ flex: 1 }} />
+                <UsageBadge usage={root.usage} />
+              </div>
+              {children.length > 0 && (
+                <div>
+                  {children.map(c => (
+                    <div key={c.id} className="agent-row" style={{ background: focus === c.id ? 'var(--accent-soft)' : undefined, borderRadius: 6 }}
+                      onClick={() => setSelected(c.id)}>
+                      <span className={`status-dot status-${c.status}`} />
+                      <span style={{ flex: 1 }}>🤖 {c.agentName || c.id}</span>
+                      <span style={{ color: 'var(--text-faint)', fontSize: 'var(--fs-ui-xs)' }}>{c.status}</span>
+                    </div>
+                  ))}
                 </div>
-                {children.length > 0 && (
-                  <div>
-                    {children.map(c => (
-                      <div key={c.id} className="agent-row" style={{ background: focus === c.id ? 'var(--accent-soft)' : undefined, borderRadius: 6 }}
-                        onClick={() => setSelected(c.id)}>
-                        <span className={`status-dot status-${c.status}`} />
-                        <span style={{ flex: 1 }}>🤖 {c.agentName || c.id}</span>
-                        <span style={{ color: 'var(--text-faint)', fontSize: 'var(--fs-ui-xs)' }}>{c.status}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <h5 style={{ margin: '12px 0 6px' }}>中间过程（{focus === runId ? '主任务' : '子代理'}）</h5>
-              <div style={{ background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 8, padding: 12, maxHeight: '40vh', overflowY: 'auto' }}>
-                {focusMsgs.length === 0 && <div style={{ color: 'var(--text-faint)', fontSize: 'var(--fs-ui-sm)' }}>（无中间过程消息）</div>}
-                {focusMsgs.map(m => (
-                  <div key={m.id} className="part">
-                    {m.parts.map((p, i) => (
-                      <div key={i} style={{ whiteSpace: 'pre-wrap', fontSize: 'var(--fs-ui-caption)', lineHeight: 1.7 }}>
-                        {p.type === 'text' && p.text}
-                        {p.type === 'thinking' && <span style={{ color: 'var(--text-faint)' }}>{p.text}</span>}
-                        {p.type === 'tool_call' && <span className="tool-chip">🛠 {p.toolCall?.name}</span>}
-                      </div>
-                    ))}
-                  </div>
-                ))}
-              </div>
+              )}
             </div>
-          )}
-        </div>
+            <h5 style={{ margin: '12px 0 6px' }}>中间过程（{focus === runId ? '主任务' : '子代理'}）</h5>
+            <div style={{ background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 8, padding: 12, maxHeight: '40vh', overflowY: 'auto' }}>
+              {focusMsgs.length === 0 && <div style={{ color: 'var(--text-faint)', fontSize: 'var(--fs-ui-sm)' }}>（无中间过程消息）</div>}
+              {focusMsgs.map(m => (
+                <div key={m.id} className="part">
+                  {m.parts.map((p, i) => (
+                    <div key={i} style={{ whiteSpace: 'pre-wrap', fontSize: 'var(--fs-ui-caption)', lineHeight: 1.7 }}>
+                      {p.type === 'text' && p.text}
+                      {p.type === 'thinking' && <span style={{ color: 'var(--text-faint)' }}>{p.text}</span>}
+                      {p.type === 'tool_call' && <span className="tool-chip">🛠 {p.toolCall?.name}</span>}
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </>
+        )}
       </div>
     </OverlayHost>
   )

src/components/Conversation.tsx

@@ -40,13 +40,14 @@ function PartView({ part, live }: { part: Part; live?: boolean | null }) {
       const art = a ? findArtifact(a.artifactId) : undefined
       const name = a?.name ?? '工件'
       const icon = artifactIcon(name, a?.kind ?? art?.kind)
+      // 阶段③ 收敛：标题点击 = 右栏预览（唯一落位）；动作只剩 全屏预览 + 下载。
       return (
         <span className="artifact-chip" data-artifact-chip={a?.artifactId}>
-          <button className="ac-main" title={`打开 ${name}`} onClick={() => { if (art) store.viewArtifact(art) }}>
+          <button className="ac-main" title={`预览 ${name}（右栏，边聊边看）`} onClick={() => { if (art) store.requestPreview(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>
+          <button className="ac-act" title={`全屏预览 ${name}`}
+            onClick={() => { if (art) store.requestPreview(art, 'full') }}><Icon name="eye" 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>

src/components/Workbench.tsx

@@ -7,11 +7,12 @@ import { Icon } from '@ui'
 import { api } from '../api'
 
 // 工件解析/打开注入：渲染器纯展示，doc-ref 词汇经此桥接本仓状态（D29）。
+// 打开语义走 requestPreview 唯一入口（阶段③ 收敛：默认右栏轻预览）。
 export const docBridge: DocBridge = {
   resolveDoc: id => store.getState().artifacts.find(a => a.id === id),
   onOpenDoc: id => {
     const art = store.getState().artifacts.find(a => a.id === id)
-    if (art) store.viewArtifact(art)
+    if (art) store.requestPreview(art)
   },
 }
 
@@ -43,7 +44,7 @@ export function Workbench() {
               <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>
+                <button className="icon-btn" title="全屏预览（唯一大窗落位）" onClick={() => store.requestPreview(railArtifact, 'full')}><Icon name="eye" 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>
@@ -56,7 +57,7 @@ export function Workbench() {
                 downloadUrl: api.artifactDownloadUrl(railArtifact.id),
               }} />
             </>
-          ) : <div className="empty-note" style={{ padding: 14 }}>在消息工件卡片或工件面板点「右栏预览」——文件会在这里边聊边看（md/图片/pdf/Office/代码均可）</div>}
+          ) : <div className="empty-note" style={{ padding: 14 }}>点消息里的工件卡片或右侧工件面板——文件会在这里边聊边看（md/图片/pdf/Office/代码均可）</div>}
         </div>
       ) : (
         <div className="tab-body">

src/components/Workspaces.tsx

@@ -93,15 +93,15 @@ export function ArtifactsPanel() {
         : visible.length === 0
           ? <div className="empty-note">没有匹配「{q}」的文件</div>
           : visible.map(a => (
-            <div key={a.id} className="artifact-row" data-artifact-row={a.id}>
-              <span className="ar-icon" onClick={() => store.viewArtifact(a)}><Icon name={artifactIcon(a.name, a.kind)} size={15} /></span>
-              <span className="ar-main" onClick={() => store.viewArtifact(a)} title={a.name}>
+            <div key={a.id} className="artifact-row" data-artifact-row={a.id}
+              onClick={() => store.requestPreview(a)} title={`预览 ${a.name}（右栏，边聊边看）`}>
+              <span className="ar-icon"><Icon name={artifactIcon(a.name, a.kind)} size={15} /></span>
+              <span className="ar-main">
                 <span className="name">{a.name}</span>
                 <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.railPreview(a)}><Icon name="panel-left" size={14} /></button>
+                <button className="icon-btn" title="全屏预览" onClick={e => { e.stopPropagation(); store.requestPreview(a, 'full') }}><Icon name="eye" 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>
               </span>

src/store.ts

@@ -521,6 +521,15 @@ export const store = {
     if (!a) { setUI({ railPreviewId: null, rightTab: 'inbox' }); return }
     setUI({ railPreviewId: a.id, rightTab: 'preview', rightCollapsed: false })
   },
+  /**
+   * 工件预览唯一入口（重设计方案 阶段③ 收敛，Command 语义）：一切预览请求只经这里，
+   * 落位由本方法派生——默认右栏轻预览（不打断对话），hint 'full' 落位全屏深读
+   * （DocViewer，全项目唯一"大窗"形态）。下载语义同理由各落位只保留一个按钮。
+   */
+  requestPreview(a: Artifact, hint?: 'full') {
+    if (hint === 'full') { setUI({ viewingArtifact: a }); 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) {