UX: Compress and summarize verbose execution event stream

[frankbria]

Problem

The execution EventStream shows raw tool call events (file reads, file edits, command runs) in chronological order. After 50+ events, users see an overwhelming technical log with no sense of overall progress or completion.

Impact

Users cannot assess if execution is stuck or making progress without parsing technical log entries. Stall vs. normal operation is indistinguishable. High cognitive load during execution monitoring.

Recommendation

1. Group related events: "3 files modified" instead of 3 separate file edit entries
2. Collapse low-value events (file reads) by default with expand affordance
3. Inject phase checkpoints: "Phase 1/3: Context loaded ✓" / "Phase 2/3: Implementation in progress..."
4. Add overall progress indicator (e.g., iteration count / estimated remaining)

Acceptance Criteria

• Low-value events (reads) collapsed by default, expandable
• Related file edits grouped into single summary line
• Phase progress checkpoints injected at natural milestones
• Users can distinguish active work from stuck execution
• Full raw log accessible via 'Show all events' expand

Affected Components

web-ui/src/app/execution/[taskId]/page.tsx

[traycerai]

Warning

Something went wrong while processing your request.

Reference ID: 9d620e97-1233-4be6-a415-ca71f8430854

Please try again or contact support if the issue persists, referencing this ID.

[coderabbitai]

🔗 Related PRs

#51 - feat: Add TaskStats component to Dashboard Overview tab [merged]
#211 - feat(dashboard): Add PhaseProgress component for phase visualization [merged]
#339 - feat: Execution Monitor View with real-time SSE streaming (#332) [merged]
#364 - feat: phase-based event emission for ReactAgent progress reporting [merged]
#389 - [Phase 3] Task Board: bulk stop, reset, and state management actions [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!