Skip to content

fix(web): tool calls not interleaved with text during streaming — always appear at bottom #1054

@coleam00

Description

@coleam00

Problem

When chatting with Archon in the main chat view (not invoking a workflow), tool calls always appear at the bottom of the message, below all text output. They are not interleaved with the text as the agent produces them.

Current Behavior

During streaming, the tool call cards stack at the bottom of the conversation instead of being rendered inline between the text segments that precede and follow them. The correct interleaving only appears after navigating away and returning to the conversation (i.e., when messages are loaded from the database rather than streamed via SSE).

Expected Behavior

Tool calls should be interleaved with text output in real-time during streaming, matching the order the agent produces them — just as they appear when the conversation is loaded from history.

Reproduction Steps

  1. Open the Archon web UI
  2. Select a project
  3. Send a message that triggers tool use (e.g., "What files are in the .archon directory?")
  4. Observe that during streaming, all tool call cards appear at the bottom
  5. Navigate away from the conversation and return — tool calls now appear interleaved correctly

Technical Context

  • The SSE stream emits text, tool_call, and tool_result events in the correct order
  • The issue is likely in how ChatInterface.tsx or useSSE.ts accumulates and batches these events during streaming
  • useSSE.ts batches text events on a 50ms flush timer and flushes before tool_call events, but the message model may not support mid-message interleaving during streaming
  • When loaded from DB via the messages API, the interleaving is correct because each message has its toolCalls array properly associated

Affected Components

  • packages/web/src/hooks/useSSE.ts — SSE event handling and batching
  • packages/web/src/components/chat/ChatInterface.tsx — message state management during streaming
  • packages/web/src/components/chat/MessageList.tsx — message rendering

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: webWeb UI (packages/web) - React frontendbugSomething is brokenuxUser experience improvements

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions