SSE 进度展示是怎么接到页面上的

SSE 相关代码主要在 agentSse.ts 和 agentExecutionStore.ts。前端触发 Agent 查询或关键词抓取后，后端会返回一个 executionId。前端拿到这个 ID 后，用 EventSource 连接 /agent/stream/{executionId}，持续接收后端推送的执行步骤。

agentSse.ts 负责最底层的订阅，把后端发来的 JSON 解析成 AgentStepEvent。如果收到 System 的 DONE 或 FAILED，就关闭连接。这样不会一直挂着无用的 SSE 连接。

agentExecutionStore.ts 负责把这些事件存到 Zustand 状态里。每来一个事件，就追加到 steps。如果事件里带了最终回答，就写入 finalAnswer；如果事件里带了热点列表，就调用 hotspotStore.replaceWithSearchResults，把右侧热点列表替换成本次搜索结果。

这个过程比较能体现前端状态管理的价值。页面组件不用自己维护 EventSource 生命周期，只要读 store 里的 steps 和 finalAnswer。这样聊天页和关键词面板都能复用同一套执行进度逻辑。

源码依据

SSE 订阅封装在 frontend/src/services/agentSse.ts，通过 EventSource 连接后端执行流：

const base = import.meta.env.VITE_API_BASE_URL ?? '/api/v1'
const eventSource = new EventSource(`${base}/agent/stream/${executionId}`)
​
eventSource.onmessage = (e) => {
  const event: AgentStepEvent = JSON.parse(e.data)
  onStep(event)
  if (event.agentName === 'System' && (event.status === 'DONE' || event.status === 'FAILED')) {
    eventSource.close()
    onComplete?.()
  }
}

agentExecutionStore.ts 收到最终热点后，会把结果写入热点列表：

if (event.hotspots && Array.isArray(event.hotspots) && event.hotspots.length > 0) {
  const replaceWithSearchResults = useHotspotStore.getState().replaceWithSearchResults
  replaceWithSearchResults(event.hotspots as any[])
}