feat: collapsible chat interface with calendar-dominant layout

[NanaKay007]

Summary

• Chat is now a collapsible side panel (420px) toggled via the "Assistant" button in the navbar, instead of a separate page
• Calendar detail view fills the full available viewport width for a better viewing experience
• Removed the standalone /chat route (redirects to /calendars)

Test plan

• Open the app and verify the calendar list page renders correctly
• Navigate to a calendar detail view and confirm it fills the screen width
• Click "Assistant" button in navbar to open the chat panel
• Verify chat panel slides in from the right at 420px width
• Click "Assistant" again to close the panel
• Verify the chat panel functionality works (send messages, view conversations)
• Confirm navigating to /chat redirects to /calendars

🤖 Generated with Claude Code

[claude]

PR Review - Security & Bug Analysis

I've reviewed this PR and identified the following issues:

Critical Issues

1. Missing Integration Tests (BLOCKER)
According to CLAUDE.md requirements, all code changes must have integration tests that communicate with real clients/services. This PR has no integration tests for:

• The new collapsible chat panel functionality
• The layout state management (chatOpen state)
• The ChatInterface component mounting/unmounting behavior
• The route redirect from /chat to /calendars

Required: Add integration tests before merging.

Bugs

2. ChatInterface Mounts/Unmounts on Toggle (Performance & UX Issue)

• Location: Layout.tsx:203-207
• Issue: The ChatInterface is conditionally rendered based on chatOpen, causing it to unmount when closed. This will:
  • Lose chat state (messages, scroll position, input) when toggled
  • Trigger WebSocket reconnects on every open/close (see ChatInterface.tsx:27-32)
  • Create unnecessary re-renders and API calls
• Fix: Keep ChatInterface mounted but hidden with CSS, or lift state to Layout component

3. Potential Memory Leak - Missing Cleanup

• Location: Layout.tsx:203-207
• Issue: When chat panel closes, ChatInterface unmounts and triggers chatService.disconnect(), but reopening creates a new connection. Rapid toggling could cause connection issues.
• Recommendation: Consider connection pooling or keep service connected while Layout is mounted

4. CalendarDetail Height Change May Break Existing Views

• Location: CalendarDetail.tsx:564
• Change: From h-[calc(100vh-7.5rem)] to h-full
• Risk: If parent doesn't provide constrained height, calendar could overflow. Verify parent container has proper height constraints.

Minor Issues

5. Missing Accessibility

• Chat toggle button lacks ARIA attributes for screen readers
• No keyboard shortcut to toggle chat panel
• Panel slide animation might need prefers-reduced-motion support

6. No Error Boundary

• If ChatInterface crashes, it could break the entire layout
• Consider wrapping in ErrorBoundary component

Recommendations

1. Fix the mount/unmount behavior - This is critical for UX
2. Add integration tests - Required per CLAUDE.md
3. Test rapid chat panel toggling for connection stability
4. Add error boundary around ChatInterface
5. Consider persisting chatOpen state to localStorage for better UX

The layout refactor is well-structured, but the missing tests and mount/unmount behavior need addressing before merge.

[claude]

PR Review - Collapsible Chat Interface

Thank you for the UX improvement! I've identified several issues that need to be addressed:

Critical Issues

1. Missing Integration Tests (Severity: High)

Per CLAUDE.md requirements, all code must have integration tests. This PR modifies critical UI components but includes no tests for:

• Chat panel toggle functionality
• Chat state persistence when panel is toggled
• Conversation state management when switching between routes
• Layout rendering with chat panel open/closed

Impact: Without tests, we can't verify that chat conversations persist correctly when toggling the panel or that the layout behaves properly on different routes.

2. ChatInterface Remounting on Every Toggle (Severity: High - Bug)

In Layout.tsx:203-207, the ChatInterface component is conditionally rendered based on chatOpen:

{chatOpen && (
  <div className="w-[480px] h-full">
    <ChatInterface />
  </div>
)}

Problem: Every time the user closes and reopens the panel, the ChatInterface component unmounts and remounts, causing:

• Loss of conversation state (messages, conversationId)
• WebSocket reconnection overhead
• Poor UX as users lose their chat context

Fix: Render ChatInterface unconditionally and control visibility with CSS only, or implement proper state lifting to preserve conversation data in the Layout component.

3. Removed Conversation Loading Without Replacement (Severity: Medium - Bug)

ChatInterface.tsx removed the handleSelectConversation function and conversation sidebar, but there's no replacement mechanism to:

• Load previous conversations
• Switch between conversations
• View conversation history

Impact: Users can only start new conversations but cannot access their conversation history anymore, breaking the multi-turn conversation context requirement from requirements.md.

Medium Issues

4. Inconsistent Panel Width (Severity: Low)

• PR description says 420px
• Code uses 480px (Layout.tsx:200,204)

Minor inconsistency but should be clarified.

5. Width Mismatch Description (Severity: Low)

PR body says "480px" in one place but the diff shows the commit message mentioned "480px" initially. The body says "420px". Please verify the intended width.

Recommendations

1. Add integration tests covering:

   • Chat panel toggle preserves conversation state
   • Layout rendering with panel open/closed
   • Navigation between routes with panel open

2. Fix ChatInterface remounting by either:

   • Always rendering ChatInterface and using display: none when closed
   • Lifting conversation state to Layout or a context provider

3. Restore conversation history access - consider:

   • Adding a conversation list dropdown in the compact chat header
   • Adding a "History" button that expands to show past conversations

4. Update system-design.md to reflect the new chat panel architecture (per CLAUDE.md step 6)

---

Recommendation: Request changes to address the critical bugs before merging.