UI Polish: Fix cursor hover, context overflow, and trailing slash handling

[jeremyeder]

Summary

• Fix Bug: Buttons don't change mouse cursor on hover #514: Add cursor pointer to repository expand/collapse chevron button
• Fix Bug: [UI] Context Panel UI Overflow due to long repo URL #519: Fix Context panel overflow with proper text truncation
• Fix Bug: Adding Context in Template Workflow with trailing slash is ending up with error #518: Handle trailing slash in repository URLs

Changes

Fix #514 - Cursor Pointer on Interactive Element

File: repositories-accordion.tsx
Change: Added cursor-pointer class to the chevron toggle button

Before: Chevron expand/collapse button had no cursor feedback
After: Button shows pointer cursor on hover, indicating it's clickable

className="... cursor-pointer"

Fix #519 - Context Panel Overflow

File: repositories-accordion.tsx
Change: Changed overflow-visible to min-w-0 on repository container

Before: Long repository URLs pushed the remove (X) button off-screen
After: URLs properly truncate and remove button stays visible

<div className="flex-1 min-w-0">  {/* was overflow-visible */}

Fix #518 - Trailing Slash Handling

File: add-context-modal.tsx
Change: Sanitize URL input by removing trailing slashes

Before: URLs like https://github.com/org/repo/ would fail validation
After: Trailing slashes are automatically removed before submission

const sanitizedUrl = contextUrl.trim().replace(/\/+$/, '');

Test Plan

• Verify cursor changes to pointer on chevron hover
• Test long repository URLs don't push remove button off screen
• Test repository URLs with trailing slashes are accepted
• Verify no regressions in Context panel functionality

Impact

All changes are CSS/input handling improvements with no functional side effects.

Generated with Claude Code

[github-actions]

Claude Code Review

Summary

This PR addresses three UI polish issues with minimal, focused changes. The code quality is excellent - all changes follow established frontend patterns and make appropriate use of Shadcn UI components and proper TypeScript typing.

Overall Assessment: ✅ APPROVED - Ready to merge with no blocking issues.

---

Issues by Severity

🚫 Blocker Issues

None found.

🔴 Critical Issues

None found.

🟡 Major Issues

None found.

🔵 Minor Issues

1. Regex Pattern Could Be More Explicit
File: add-context-modal.tsx:38

const sanitizedUrl = contextUrl.trim().replace(/\/+$/, '');

Issue: The regex /\/+$/ works correctly but could be slightly more readable.

Suggestion (optional): Consider using /\/+$/g with global flag for consistency, though in this case it's functionally equivalent since we're only matching at the end. The current implementation is perfectly fine.

Priority: Low - cosmetic only, no functional impact.

---

Positive Highlights

✅ Excellent adherence to frontend standards:

• Uses type instead of interface (line 13 in add-context-modal.tsx, line 9 in repositories-accordion.tsx)
• All UI components use Shadcn primitives (Button, Badge, Dialog, etc.)
• Proper TypeScript typing throughout - zero any types
• Component stays under 200 lines
• "use client" directive properly placed

✅ Minimal, surgical changes:

• Only 6 additions, 3 deletions across 2 files
• Each fix addresses exactly one issue with no scope creep
• No over-engineering or unnecessary abstractions

✅ CSS best practices:

• cursor-pointer added to interactive element (fix Bug: Buttons don't change mouse cursor on hover #514)
• min-w-0 flex pattern for text truncation (fix Bug: [UI] Context Panel UI Overflow due to long repo URL #519) - this is the correct Tailwind pattern for allowing flex children to shrink below their minimum content size

✅ Input sanitization:

• Trailing slash handling is defensive and user-friendly (fix Bug: Adding Context in Template Workflow with trailing slash is ending up with error #518)
• Preserves user input state while sanitizing before submission

✅ Consistent code style:

• Follows existing patterns in both files
• Proper semicolon usage
• Clear variable naming (sanitizedUrl)
• Good inline comment explaining the sanitization step

---

Recommendations

None required. This PR demonstrates excellent software engineering:

1. Single Responsibility: Each change addresses exactly one issue
2. Minimal Diff: Only touches lines that need to change
3. Pattern Compliance: Follows all established frontend guidelines
4. Zero Technical Debt: No shortcuts, hacks, or TODOs introduced
5. User Experience Focus: All three fixes improve UX without functional changes

Action Items:

• ✅ No changes required - ready to merge
• ✅ Passes all frontend pre-commit checklist items:
  • Zero any types ✓
  • All UI uses Shadcn components ✓
  • Uses type instead of interface ✓
  • Components under 200 lines ✓
  • Single-use components colocated ✓

---

Testing Notes

The PR description includes a clear test plan that covers all three fixes. Consider verifying:

• Cursor changes to pointer on chevron hover (visual check)
• Long repository URLs (e.g., 100+ chars) don't push remove button off screen
• URLs with single trailing slash: https://github.com/org/repo/
• URLs with multiple trailing slashes: https://github.com/org/repo///
• URLs without trailing slash (regression check): https://github.com/org/repo

---

🤖 Generated by Claude Code - Code Review Agent

---

🔍 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.