UX: Add business context (task/requirement) to diff viewer file tree

[frankbria]

Problem

DiffViewer and FileTreePanel on the Review page show changed files but don't indicate which task or PRD requirement caused each change. With 50+ changed files, reviewers lose business context.

Impact

Code review becomes purely technical — reviewers cannot assess correctness without knowing why each file was modified. Context switching to other tools breaks flow.

Recommendation

1. Add 'changed by' metadata to each file in the diff (task title, requirement ID if available)
2. Display task/requirement label in FileTreePanel next to each filename
3. Add 'View Task →' link in diff header for the active file
4. Group files by task in the file tree (collapsible)

Acceptance Criteria

• Task name visible in file tree next to filename
• Requirement ID shown in diff header when available
• 'View Task' link navigates to task detail
• File tree supports grouping by task
• Works for multi-task diff sessions

Affected Components

web-ui/src/components/review/DiffViewer.tsx, web-ui/src/components/review/FileTreePanel.tsx

[traycerai]

Warning

Something went wrong while processing your request.

Reference ID: e6a1405b-7bfe-410a-aae8-41466d6729ea

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

[coderabbitai]

🔗 Related PRs

#49 - feat: Add inline dependency rendering to TaskTreeView [merged]
#169 - feat(dashboard): Add dedicated tabs for Tasks, Quality Gates, and Metrics [merged]
#214 - feat(planning): Add TaskReview component for task approval workflow [merged]
#215 - feat(dashboard): Add phase-aware task view integration (#016-6) [merged]
#234 - fix(ui): make TaskStats phase-aware to fix late-joining user bug [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!