Keep conversations ordered while background work updates independently

Why: Repeated progress and coupled scrolling obscured chat, and task choices lacked a reliable independent interaction path. Evidence: 285 frontend unit tests and 23 browser scenarios pass locally before the shared event-loader extraction; final combination checks follow in Dev. Impact: Coalesce cumulative progress, retain execution records, show timestamps and quiet notifications, support versioned work actions and explicit result references without automatic chat backfill. Refs: feature/workbench-flow-completion
2026-10-15 07:05:57 +00:00
parent 9242cee89d
commit 06fa1a40a6
18 changed files with 515 additions and 114 deletions
@@ -5,15 +5,16 @@ import { Icon, Avatar, BrandMark, Collapsible, getPersistedOpen, setPersistedOpe
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { api } from '../api'
 import { store, useStore, activeRun, isTerminal, type LiveState, type ContextObs } from '../store'
-import { scrollRatio, scrollTopForRatio } from '../scrollsync'
 import { liveToMessage, livePhaseLabel, runEventsToTimeline, showProcessInline } from '../live'
 import { deriveShellPhase, isShellBusy, showLiveBubble, type ShellPhase } from '../runstate'
-import type { Message, Part, HITLCard, ActivityCard, Artifact, StreamEvent } from '../contracts'
+import type { Message, Part, HITLCard, ActivityCard, Artifact } from '../contracts'
 import { UIRenderer, InlineConfirmCard, hasOpenConfirm, CardAnchor } from '@ui'
 import { docBridge } from './Workbench'
 import { splitTimeline, mergeProcessTimeline, artifactIcon, humanSize, artifactIdsIn, markMissingArtifacts, dedupeDeliverables, foldRunErrors, processSummary, humanError } from '../messageparts'
 import { ProcessTimeline } from './ProcessTimeline'
 import { ConversationWork } from './ConversationWork'
+import { MessageTimestamp } from './MessageTimestamp'
+import { loadRunEvents } from '../runEvents'
 import '../companion-conversation.css'

 function hasFiles(dt: DataTransfer | null): boolean {
@@ -52,7 +53,7 @@ function PartView({ part, live }: { part: Part; live?: boolean | null }) {
        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={workPaneOwnsCards ? undefined : card}
+        return <CardAnchor title={card?.title ?? part.card.kind} chars={bodyChars} card={workPaneOwnsCards || card?.work ? undefined : card}
          onLocate={() => store.openInbox(ref)} docBridge={docBridge} />
      }
      // 插件内嵌卡片部件（cardlink 互定位，D32）：点击 ↗ 定位收件箱对应卡（从 data 解析 card:<id>）。
@@ -226,17 +227,7 @@ function AssistantMessage({ msg, live, convId }: { msg: Message; live?: LiveStat
    let active = true
    void (async () => {
      try {
-        const events: StreamEvent[] = []
-        let after = 0
-        while (true) {
-          const page = await api.runEventsPage(convId, msg.runId!, after, controller.signal)
-          const rows = page.events ?? []
-          events.push(...rows)
-          if (rows.length < 500) break
-          const next = rows[rows.length - 1].seq
-          if (next <= after) throw new Error('process event cursor did not advance')
-          after = next
-        }
+        const events = await loadRunEvents(convId, msg.runId!, controller.signal)
        if (active) setReplayed(runEventsToTimeline(events, msg.runId))
      } catch {
        if (active) setProcessError(true)
@@ -269,6 +260,7 @@ function AssistantMessage({ msg, live, convId }: { msg: Message; live?: LiveStat
      <div className="msg-role">
        <span className="role-mark role-assistant"><BrandMark size={16} /></span>
        <span>助手</span>
+        <MessageTimestamp value={msg.createdAt || run?.createdAt} />
        {live && <LiveBar live={live} />}
      </div>
      {(split.timeline.length > 0 || !!msg.runId) && (
@@ -473,7 +465,7 @@ function OutboxPanel() {
                  if (e.key === 'Enter') { store.updateOutbox(item.id, draft); setEditing(null) }
                }} />
            ) : (
-              <span className="outbox-text" title={item.text}>{item.text.trim() || '（仅附件）'}{item.attachmentNames.length > 0 ? ` · ${item.attachmentNames.join('、')}` : ''}</span>
+              <span className="outbox-text" title={item.text}>{item.text.trim() || '（仅附件）'}{item.attachmentNames.length > 0 ? ` · ${item.attachmentNames.join('、')}` : ''}{item.taskRef ? ` · 基于「${item.taskRef.title}」` : ''}</span>
            )}
            {editing === item.id ? (
              <button className="btn ghost" onClick={() => { store.updateOutbox(item.id, draft); setEditing(null) }}>保存</button>
@@ -495,7 +487,7 @@ export function NoticeMessage({ msg }: { msg: Message }) {
  return (
    <div className="msg notice" data-msg-id={msg.id}>
      <Collapsible id={`notice:${msg.id}`} triggerClassName="notice-summary"
-        trigger={<span className="notice-label">通知 · {preview}</span>}>
+        trigger={<><span className="notice-label">通知 · {preview}</span><MessageTimestamp value={msg.createdAt} /></>}>
        <div className="notice-body">{text}</div>
      </Collapsible>
    </div>
@@ -524,6 +516,7 @@ function ConversationSession() {
  const cards = useStore(s => s.cards)
  const currentProjectId = useStore(s => s.currentProjectId)
  const cardActionStates = useStore(s => s.cardActionStates)
+  const workReference = useStore(s => s.workReference)
  const workPaneOwnsCards = useStore(s => !s.ui.rightCollapsed && s.ui.rightTab === 'work')
  const [text, setText] = useState('')
  const [attachmentIds, setAttachmentIds] = useState<string[]>([])
@@ -553,8 +546,9 @@ function ConversationSession() {
  })
  const busy = isShellBusy(phase)
  const showStop = phase === 'running'
-  // 慢通道在跑的后台子代理：前台回合结束后仍在执行，完成后经通知回到对话汇报。
+  // Background work stays in its own card and does not insert another chat turn.
  const bgRunning = runs.filter(r => r.kind === 'subagent' && !isTerminal(r.status)).length
+  const unreadResults = cards.filter(card => card.work?.result && card.work.resultVersion > card.work.readVersion)

  useEffect(() => {
    if (!stickRef.current) return
@@ -588,12 +582,14 @@ function ConversationSession() {
    const t = text
    const ids = attachmentIds
    const names = attachmentNames
+    const reference = workReference ?? undefined
    setText(''); setAttachmentIds([]); setAttachmentNames([])
+    store.clearWorkReference()
    if (busy) {
-      store.enqueueOutbox(t, ids, names)
+      store.enqueueOutbox(t, ids, names, reference)
      return
    }
-    await store.sendMessage(t, ids)
+    await store.sendMessage(t, ids, undefined, reference)
  }

  if (!currentConvId) {
@@ -656,13 +652,6 @@ function ConversationSession() {
          const stick = dist < 80
          stickRef.current = stick
          setShowJump(prev => (prev === !stick ? prev : !stick))
-          const ratio = scrollRatio(src)
-          if (ratio === null) return
-          const dst = document.querySelector('[data-scroll-sync="inbox"]')
-          if (!dst) return
-          const top = scrollTopForRatio(dst, ratio)
-          if (top === null) return
-          dst.scrollTop = top
        }}>
        {foldRunErrors(messages.filter(m => m.role !== 'assistant' || !m.runId || runs.find(r => r.id === m.runId)?.kind !== 'subagent')).map(m => {
          if (m.role === 'user') {
@@ -672,6 +661,7 @@ function ConversationSession() {
              <div className={`msg user${m.excluded ? ' is-excluded' : ''}`} key={m.id} data-msg-id={m.id}>
                <div className="msg-role">
                  <span className="role-mark"><Avatar name={myName} size="sm" /></span>你
+                  <MessageTimestamp value={m.createdAt} />
                </div>
                <div className="bubble">{m.parts.filter(p => p.type === 'text').map(p => p.text).join('\n')}</div>
                {currentConvId && <MessageTools msg={m} convId={currentConvId} />}
@@ -716,16 +706,23 @@ function ConversationSession() {

      <div className="input-bar">
        <OutboxPanel />
+        {unreadResults.length > 0 && <button type="button" className="work-result-notice" onClick={() => store.openInbox(unreadResults[0].id)}>
+          <Icon name="check" size={14} /><span>{unreadResults.length} 项工作有新结果</span><span>查看工作 ↗</span>
+        </button>}
+        {workReference && <div className="composer-work-reference" role="group" aria-label="本条消息引用的工作结果">
+          <span>基于「{workReference.title}」的第 {workReference.resultVersion} 版结果</span>
+          <button type="button" className="icon-btn" aria-label="移除工作结果引用" onClick={() => store.clearWorkReference()}><Icon name="x" size={12} /></button>
+        </div>}
        {!connected && <div className="companion-reconnect" role="status">正在重新连接，最新进展待确认</div>}
        {/* 轻量状态提示（方案：快慢通道连续体验）：忙碌时可继续输入排队；
-            后台任务在回合结束后仍在执行，完成后回到对话汇报。 */}
+            后台工作完成后更新原卡，用户按需打开。 */}
        {(busy || bgRunning > 0) && (
          <div className="input-status" data-testid="input-status">
            <span className="live-dot" />
            {busy
              ? <span className="mk-sweep">助手正在处理{bgRunning > 0 ? ` · ${bgRunning} 项后台工作` : ''}</span>
              : <span>{bgRunning} 项后台工作</span>}
-            <span className="input-status-note">{busy ? '新消息会排队，当前回合结束后发送' : '你可以继续对话，完成后会在这里汇报'}</span>
+            <span className="input-status-note">{busy ? '新消息会排队，当前回合结束后发送' : '你可以继续对话，结果会更新到工作卡'}</span>
          </div>
        )}
        {attachmentNames.length > 0 && (
@@ -1,7 +1,9 @@
 import { useEffect, useMemo, useState } from 'react'
-import { ActivityCardView, Collapsible, activitySummary, pendingCount, type ActivityCard } from '@ui'
+import { ActivityCardView, Collapsible, activitySummary, groupActivityCards, pendingCount, type ActivityCard } from '@ui'
 import { store, useStore } from '../store'
 import { docBridge } from './Workbench'
+import type { WorkCardAction } from '../contracts'
+import { WorkExecutionRecord } from './WorkExecutionRecord'

 /** 对话与辅助工作栏共享对象、动作和唯一文件预览，不另持有异步状态。 */
 export function ConversationWork() {
@@ -12,6 +14,7 @@ export function ConversationWork() {
  const actionStates = useStore(s => s.cardActionStates)
  const rightCollapsed = useStore(s => s.ui.rightCollapsed)
  const rightTab = useStore(s => s.ui.rightTab)
+  const record = useStore(s => s.workRecord)
  const detailHere = rightCollapsed || rightTab !== 'work'
  const [summaryOpen, setSummaryOpen] = useState(detailHere)
  useEffect(() => setSummaryOpen(detailHere), [detailHere])
@@ -26,22 +29,27 @@ export function ConversationWork() {
      if (card.kind === 'confirm' && card.anchorMessageId
        && messages.some(message => message.role === 'user' && message.id === card.anchorMessageId)) continue
      const summary = activitySummary(card)
-      if (card.status === 'action_required' || summary.failed || (card.status === 'done' && summary.remaining)) required.push(card)
+      if (card.status === 'action_required' || card.work?.decision?.state === 'open' || summary.failed || (card.status === 'done' && summary.remaining)) required.push(card)
      else remaining.push(card)
    }
    // Preserve the host's newest-first order for completed results and history.
+    const results = groupActivityCards(remaining).find(group => group.key === 'results')?.cards ?? []
    const focused = remaining.find(card => card.pinned && card.status === 'active')
      ?? remaining.find(card => card.status === 'active')
-      ?? remaining.find(card => card.status === 'done') ?? remaining[0]
-    return { current, required, focused, history: remaining.filter(card => card !== focused) }
+      ?? results[0]
+    return { current, required, focused, history: remaining.filter(card => card !== focused).sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)) }
  }, [cards, messages, conversationId, projectId])
-  if (current.length === 0 || !detailHere) return null
+  if (!detailHere) return null
+  if (record) return <div className="conversation-work" data-conversation-work><WorkExecutionRecord /></div>
+  if (current.length === 0) return null
  const pending = pendingCount(current)
  const active = current.filter(card => card.status === 'active').length
  const results = current.filter(card => card.status === 'done' || card.status === 'failed').length
  const summary = [pending ? `${pending} 项待处理` : '', active ? `${active} 项工作` : '', results ? `${results} 项结果` : ''].filter(Boolean).join(' · ')
  const callbacks = {
-    onAction: (card: ActivityCard, actionId: string) => { void store.cardAction(card, actionId) },
+    onAction: (card: ActivityCard, actionId: string, payload?: WorkCardAction) => { void store.cardAction(card, actionId, payload) },
+    onOpenRecord: (card: ActivityCard) => store.openWorkRecord(card),
+    onReference: (card: ActivityCard) => store.referenceWork(card),
    actionState: (card: ActivityCard) => actionStates?.[card.id],
    onPin: (card: ActivityCard, pinned: boolean) => { void store.cardPin(card, pinned) },
    onDismiss: (card: ActivityCard) => { void store.cardDismiss(card) },
@@ -0,0 +1,8 @@
+/** Stable server time, with the full local date available to keyboard and assistive readers. */
+export function MessageTimestamp({ value }: { value?: string }) {
+  const date = value ? new Date(value) : null
+  if (!date || !Number.isFinite(date.getTime())) return null
+  const full = date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
+  const label = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })
+  return <time className="message-timestamp" dateTime={date.toISOString()} title={full} aria-label={full}>{label}</time>
+}
@@ -0,0 +1,50 @@
+import { useEffect, useMemo, useState } from 'react'
+import { SafeMarkdown } from '@ui'
+import type { StreamEvent } from '../contracts'
+import { loadRunEvents } from '../runEvents'
+import { store, useStore } from '../store'
+import { runEventsToTimeline } from '../live'
+import { mergeProcessTimeline } from '../messageparts'
+import { ProcessTimeline } from './ProcessTimeline'
+import { MessageTimestamp } from './MessageTimestamp'
+
+/** The work pane and inline fallback share one selection. Only this detail host
+ * reads that run's authorized durable events; opening a record never adds chat. */
+export function WorkExecutionRecord() {
+  const selected = useStore(s => s.workRecord)
+  const conversationId = useStore(s => s.currentConvId)
+  const messages = useStore(s => s.messages)
+  const run = useStore(s => s.runs.find(r => r.id === selected?.runId))
+  const [result, setResult] = useState<{ runId: string; events: StreamEvent[] } | null>(null)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    if (!selected || selected.conversationId !== conversationId) return
+    const controller = new AbortController()
+    let active = true
+    setResult(null); setFailed(false)
+    void (async () => {
+      try {
+        const events = await loadRunEvents(selected.conversationId, selected.runId, controller.signal)
+        if (active) setResult({ runId: selected.runId, events })
+      } catch { if (active) setFailed(true) }
+    })()
+    return () => { active = false; controller.abort() }
+  }, [selected?.runId, selected?.conversationId, conversationId, run?.status, run?.endedAt])
+  const parts = useMemo(() => {
+    if (!selected || result?.runId !== selected.runId) return []
+    const saved = messages.filter(message => message.runId === selected.runId && message.role === 'assistant')
+      .flatMap(message => message.parts).map(part => ({ ...part, process: true }))
+    return mergeProcessTimeline(saved, runEventsToTimeline(result.events, selected.runId, true), [])
+  }, [messages, result, selected?.runId])
+  if (!selected || selected.conversationId !== conversationId) return null
+  return <section className="work-execution-record" aria-label={`${selected.title}的执行记录`}>
+    <div className="work-record-heading"><strong>{selected.title} · 执行记录</strong>
+      <button type="button" className="btn ghost" onClick={() => store.closeWorkRecord()}>返回工作</button></div>
+    <MessageTimestamp value={run?.createdAt} />
+    {failed ? <p role="status">完整记录暂不可用，请稍后重新打开</p>
+      : !result ? <p role="status">正在读取已保存的记录…</p>
+        : parts.length === 0 ? <p>这项工作没有已保存的过程输出</p>
+          : <ProcessTimeline parts={parts} live={false} idKey={`work-record:${selected.runId}`}
+            renderPart={part => <SafeMarkdown className="part-text" markdown={part.text ?? ''} breaks />} />}
+  </section>
+}
@@ -2,13 +2,14 @@
 // 工作 = 当前任务卡 + 收件箱（待处理事项、后台任务卡、执行记录）；
 // 文件 = 文件列表（搜索/上传）与多标签预览（预览、编辑、下载）——预览不再是独立第四栏。
 import { store, useStore } from '../store'
-import type { Run } from '../contracts'
+import type { Run, WorkCardAction } from '../contracts'
 import { InboxList, pendingCount, type ActivityCard, type DocBridge, type InboxFilter } from '@ui'
 import { Icon, SurfaceView } from '@ui'
 import { previewTabsKey } from '../previewtabs'
 import { surfaceKey } from '../surfaceKey'
 import { ArtifactsPanel } from './ArtifactsPanel'
 import { PreviewPane } from './PreviewPane'
+import { WorkExecutionRecord } from './WorkExecutionRecord'

 // 工件解析/打开注入：渲染器纯展示，doc-ref 词汇经此桥接本仓状态（D29）。
 // 打开语义走 requestPreview 唯一入口（第三栏「文件」入口）。
@@ -21,7 +22,9 @@ export const docBridge: DocBridge = {
 }

 const inboxCallbacks = {
-  onAction: (c: ActivityCard, id: string) => store.cardAction(c, id),
+  onAction: (c: ActivityCard, id: string, payload?: WorkCardAction) => store.cardAction(c, id, payload),
+  onOpenRecord: (c: ActivityCard) => store.openWorkRecord(c),
+  onReference: (c: ActivityCard) => store.referenceWork(c),
  actionState: (c: ActivityCard) => store.getState().cardActionStates[c.id],
  onPin: (c: ActivityCard, p: boolean) => store.cardPin(c, p),
  onDismiss: (c: ActivityCard) => store.cardDismiss(c),
@@ -64,6 +67,7 @@ export function Workbench() {
  const filter = useStore(s => s.ui.inboxFilter)
  const visible = inboxScope === 'project' ? projectCards : cards
  const pending = pendingCount(visible)
+  const unread = visible.filter(card => card.work && card.work.resultVersion > card.work.readVersion).length
  // 离开文件入口时收回全屏展开，避免出现「工作」铺满主区的怪态。
  const switchTab = (tab: 'work' | 'files') =>
    store.setUI({ rightTab: tab, previewExpanded: tab === 'files' ? store.getState().ui.previewExpanded : false })
@@ -71,7 +75,7 @@ export function Workbench() {
    <>
      <div className="tabs">
        <button className={`tab ${rightTab === 'work' ? 'active' : ''}`} onClick={() => switchTab('work')}
-          title="待处理事项、后台任务与执行记录">工作{pending > 0 ? ` ${pending}` : ''}</button>
+          title="待处理事项、后台任务与执行记录">工作{pending > 0 ? ` ${pending}` : ''}{unread > 0 ? ` · ${unread} 项新结果` : ''}</button>
        <button className={`tab ${rightTab === 'files' ? 'active' : ''}`} onClick={() => switchTab('files')}
          title="文件搜索、预览、编辑与下载">文件</button>
        <span className="spacer" style={{ flex: 1 }} />
@@ -108,10 +112,12 @@ function WorkTab({ plan, todos, filter, inboxScope, projectCards, cards }: {
  projectCards: ActivityCard[]
  cards: ActivityCard[]
 }) {
+  const record = useStore(s => s.workRecord)
  const showCurrentTask = !hasActiveProgressCard(cards)
  return (
    <>
-      <div className="tab-body" data-scroll-sync="inbox">
+      <div className="tab-body" data-work-scroll>
+        {record ? <WorkExecutionRecord /> : <>
        {showCurrentTask ? <CurrentTaskCard plan={plan} todos={todos} /> : null}
        <div className="inbox-scope" role="tablist" aria-label="收件箱范围与筛选">
          <button className={inboxScope === 'conv' ? 'active' : ''} onClick={() => store.setInboxScope('conv')}>本会话</button>
@@ -126,6 +132,7 @@ function WorkTab({ plan, todos, filter, inboxScope, projectCards, cards }: {
          ? <ProjectInbox cards={projectCards} filter={filter} />
          : <InboxList cards={cards} docBridge={docBridge} callbacks={inboxCallbacks} filter={filter} />}
        <WorkspaceSurfaces />
+        </>}
      </div>
    </>
  )