UX: Differentiate system vs agent vs human-created blockers visually

[frankbria]

Problem

BlockerResolutionView shows all blockers uniformly with no visual distinction between blockers created by: the system (stall timeout), the AI agent (missing file, stuck loop), or a human user.

Impact

Users apply the same recovery strategy to all blockers, but the correct approach differs by origin. A stall timeout needs different handling than a missing dependency blocker.

Recommendation

1. Add created_by field to Blocker model: system | agent | human
2. Display origin badge on each blocker card (e.g., "System", "Agent", "Manual")
3. Show different guidance text based on origin:
   • System: "Agent was inactive for 5 min. Answer to continue or retry execution."
   • Agent: "Agent requested information. Provide the answer below."
   • Human: "Manually created blocker. Resolve and mark answered."
4. Use different icon/color per origin type

Acceptance Criteria

• Origin badge visible on every blocker
• Badge uses distinct color/icon per origin type
• Blocker detail text adapts to origin type
• Recovery instructions match the origin
• API returns created_by field in blocker response

Affected Components

web-ui/src/components/blockers/BlockerResolutionView.tsx, web-ui/src/app/blockers/page.tsx

[traycerai]

Warning

Something went wrong while processing your request.

Reference ID: 2d3323ea-a9ad-4750-835e-ae4218f97005

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

[coderabbitai]

🔗 Related PRs

#18 - feat(049-human-in-loop): Complete human-in-the-loop blocker system (Phases 1-9) [merged]
#286 - refactor(ui): migrate from emojis to Hugeicons for consistent icon system [merged]
#390 - feat: Blocker Resolution View - Answer Agent Questions [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!