Phase 3: Create UI Entry Point - Resolve with AI Button
<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=588530) </details> <!--IssueSummary end--> ## Overview Add "Resolve with AI" button to merge request conflict pages that opens chat with the Conflict Resolver agent. ## Tasks ### Vue Component - [ ] Create `ee/app/assets/javascripts/merge_conflicts/components/resolve_with_ai_button.vue` - [ ] Implement button with AI icon and clear messaging - [ ] Use `sendDuoChatCommand` to open chat with agent - [ ] Pass merge request context (resourceId, projectId) - [ ] Write component specs ### Template Integration - [ ] Add button mount point to `app/views/projects/merge_requests/conflicts/show.html.haml` - [ ] Pass required data attributes (merge_request_id, project_id as global IDs) - [ ] Conditionally show based on `can_resolve_with_ai?` helper ### JavaScript Integration - [ ] Update `app/assets/javascripts/merge_conflicts/index.js` - [ ] Dynamically import EE component - [ ] Mount component with proper data - [ ] Handle graceful degradation for CE ### Backend Helper - [ ] Add `can_resolve_with_ai?` to `app/helpers/merge_requests_helper.rb` - [ ] Check: MR has conflicts (`cannot_be_merged?`) - [ ] Check: Conflicts resolvable in UI - [ ] Check: Feature flag enabled - [ ] Check: Agent enabled for namespace - [ ] Check: User has permission - [ ] Write helper specs ### Frontend Testing - [ ] Write component unit tests - [ ] Test button click triggers chat - [ ] Test correct parameters passed - [ ] Test button not shown when conditions not met ### Integration Testing - [ ] Write feature spec: button appears on conflict page - [ ] Test: button opens chat panel - [ ] Test: agent receives MR context - [ ] Test: button hidden when feature disabled - [ ] Test: button hidden when no conflicts ## Acceptance Criteria - [ ] "Resolve with AI" button appears on conflict pages when conditions met - [ ] Button opens chat with Conflict Resolver agent selected - [ ] MR context (global ID) passed to agent - [ ] Button not shown when: no conflicts, feature disabled, agent disabled, or user lacks permission - [ ] All tests pass (unit and integration) - [ ] Component gracefully handles CE/EE differences ## User Experience The button should: - Be prominently placed but not intrusive - Have clear, inviting messaging - Include AI icon for recognition - Explain what will happen ("analyze conflicts and suggest resolutions") ## Files Changed - `ee/app/assets/javascripts/merge_conflicts/components/resolve_with_ai_button.vue` - `ee/spec/frontend/merge_conflicts/components/resolve_with_ai_button_spec.js` - `app/views/projects/merge_requests/conflicts/show.html.haml` - `app/assets/javascripts/merge_conflicts/index.js` - `app/helpers/merge_requests_helper.rb` - `spec/helpers/merge_requests_helper_spec.rb` - `ee/spec/features/merge_requests/user_resolves_conflicts_with_ai_spec.rb` ### Mockup ![Screenshot_2026-02-03_at_12.57.04_PM](/uploads/f7ef0985306743ad385cb8e75cb25e3b/Screenshot_2026-02-03_at_12.57.04_PM.png){width=785 height=222} ![Screenshot_2026-02-03_at_12.58.01_PM](/uploads/cd88a6a980a75560f645f97312328d2e/Screenshot_2026-02-03_at_12.58.01_PM.png){width=900 height=585}
issue