fix: Remove duplicate End Session button - RHOAIENG-41580

[Gkrumbach07]

Summary

This PR fixes RHOAIENG-41580 by removing the duplicate "End Session" button from the session detail page.

Problem

The session detail page had two buttons for ending sessions:

1. "Stop Session" button in the session header (REST API /stop endpoint)
2. "End Session" button in the MessagesTab component (WebSocket control message)

These buttons performed similar functions but with different implementations, causing user confusion about which one to use and what the difference was.

Solution

Removed the duplicate "End session" button from the MessagesTab component, keeping only the "Stop Session" button in the session header as the canonical way to stop sessions.

Changes Made

• Removed "End session" button from MessagesTab component (components/frontend/src/components/session/MessagesTab.tsx:701-709)
• Removed unused ending state variable
• Removed unused handleEndSession function
• Removed onEndSession prop from MessagesTabProps interface
• Updated Send button disabled condition to remove ending reference
• Removed handleEndSession handler from page.tsx
• Removed onEndSession prop from MessagesTab component usage

Testing

• ✅ Frontend builds successfully (npm run build)
• ✅ Linter passes with no errors (npm run lint)
• ✅ TypeScript compilation succeeds
• ✅ "Stop Session" button in header remains functional

Impact

• User Experience: Clearer, more consistent UX with a single button for stopping sessions
• Code Quality: Removed unused code and reduced complexity
• Breaking Changes: None - functionality remains the same, just consolidated

Related Issues

Fixes: RHOAIENG-41580

[github-actions]

Claude Code Review

Summary

This PR successfully removes duplicate "End Session" functionality from the MessagesTab component, consolidating session termination to a single "Stop Session" button in the header. The changes are clean, well-scoped, and align with established frontend patterns.

Issues by Severity

🚫 Blocker Issues

None - this PR is ready to merge.

🔴 Critical Issues

None identified.

🟡 Major Issues

None identified.

🔵 Minor Issues

1. Consider adding a comment for clarity (MessagesTab.tsx:680-689)
   • The Send button's disabled condition was simplified from \!chatInput.trim() || sendingChat || ending to \!chatInput.trim() || sendingChat
   • While correct, consider adding a brief comment explaining why ending was removed (consolidated to header button) for future maintainers
   • Not blocking, but would improve code maintainability

Positive Highlights

✅ Complete cleanup: All references to the duplicate functionality removed

• ending state variable removed
• handleEndSession function removed
• onEndSession prop removed from interface and component usage
• No orphaned code left behind

✅ Type safety maintained: TypeScript interface correctly updated

• MessagesTabProps interface properly reflects removed prop
• No type errors introduced

✅ Consistent with patterns: Follows established frontend development standards

• Uses Shadcn UI Button components (DESIGN_GUIDELINES.md compliance)
• React Query mutation pattern maintained in page.tsx
• Loading states properly handled with isPending checks

✅ User experience improved: Single, clear action for stopping sessions

• Reduces confusion between "Stop Session" (header) vs "End session" (MessagesTab)
• Maintains loading state indicators for user feedback

✅ No breaking changes: Functionality preserved, just consolidated

• stopMutation.mutate() in header remains functional
• No API changes required

Recommendations

1. Merge immediately - This is a clean, focused bug fix with no blockers

2. Future consideration: Consider adding a comment in MessagesTab explaining the single responsibility

   // Note: Session stop/end functionality is handled by the "Stop Session" 
   // button in the session header, not in this component

3. Documentation: If there's user-facing documentation mentioning the duplicate buttons, update it to reflect the single button approach

Code Quality Checklist

• ✅ Zero any types
• ✅ All UI uses Shadcn components
• ✅ All data operations use React Query (stopMutation)
• ✅ Components follow established patterns
• ✅ Loading states properly handled
• ✅ TypeScript compilation succeeds
• ✅ No security concerns
• ✅ No performance concerns

Architectural Compliance

This PR demonstrates excellent adherence to the repository's frontend development standards:

• Type Safety: Proper TypeScript types throughout
• Component Patterns: Single-responsibility components (MessagesTab focuses on messages, header handles session controls)
• State Management: React Query mutations properly used
• UI Consistency: Shadcn Button components with loading states

LGTM - Recommend approval and merge ✅

---

🔍 View AI decision process (logs available for 90 days)

📋 View memory system files loaded (click to expand)

What Amber Loaded for Code Review

Amber automatically loaded these repository standards from the memory system:

1. CLAUDE.md - Master project instructions, development standards
2. backend-development.md - Go backend, K8s integration patterns
3. frontend-development.md - NextJS, Shadcn UI, React Query patterns
4. security-standards.md - Auth, RBAC, token handling
5. k8s-client-usage.md - User token vs service account patterns
6. error-handling.md - Consistent error patterns
7. react-query-usage.md - Data fetching patterns

Impact: This review used your repository's specific code quality standards, security patterns, and best practices from the memory system (PRs #359, #360) - not just generic code review guidelines.