---
phase: 03-calendar-integration
plan: 06
type: execute
wave: 1
depends_on: []
files_modified: 
  - src/components/CalendarSettings.tsx
  - src/app/api/calendar/google/oauth/route.ts
  - src/app/api/calendar/apple/oauth/route.ts
autonomous: true
gap_closure: true

must_haves:
  truths:
    - "User can connect their Google Calendar account"
    - "User can connect their Apple Calendar account" 
    - "User can view calendar events alongside tasks in weekly view"
    - "User can manage calendar connection settings from the application"
    - "User's tasks and calendar events are synchronized bidirectionally"
  artifacts:
    - path: "src/components/CalendarSettings.tsx"
      provides: "Functional calendar connection UI with real OAuth triggers"
    - path: "src/app/api/calendar/google/oauth/route.ts"
      provides: "OAuth callback that properly saves connections"
    - path: "src/app/api/calendar/apple/oauth/route.ts"
      provides: "OAuth callback that properly saves connections"
  key_links:
    - from: "src/components/CalendarSettings.tsx"
      to: "src/app/api/calendar/google/oauth/route.ts"
      via: "connecting Google Calendar via OAuth flow"
      pattern: "connect.*google"
    - from: "src/components/CalendarSettings.tsx"
      to: "src/app/api/calendar/apple/oauth/route.ts"
      via: "connecting Apple Calendar via OAuth flow"
      pattern: "connect.*apple"
    - from: "src/components/CalendarSettings.tsx"
      to: "src/app/api/calendar/sync/route.ts"
      via: "triggering sync operations"
      pattern: "sync.*api"
---

# Gap Closure: Calendar Connection UI and Management

## Objective
Enable functional calendar connection management UI that triggers real OAuth flows and manages connections properly.

## Purpose
Allow users to successfully connect, disconnect, and manage their calendar connections through the UI.

## Output
Fully functional CalendarSettings UI component with real OAuth triggers and connection management.

## Tasks

<task type="auto">
  <name>Implement Real Google Calendar OAuth Trigger</name>
  <files>src/components/CalendarSettings.tsx</files>
  <action>
    Enable the Google connection button to trigger actual OAuth flow:
    
    1. Replace placeholder button functionality with actual redirect to Google OAuth authorization URL
    2. Implement proper URL construction with client ID, redirect URI, scopes, and state parameters
    3. Ensure proper error handling if OAuth initiation fails
    4. Add loading states for OAuth redirection
    5. Add proper accessibility attributes for screen readers
    
    The implementation should:
    - Construct proper Google OAuth authorization URL
    - Redirect user to Google OAuth flow when clicked
    - Include necessary OAuth parameters (client_id, redirect_uri, scope, state)
    - Preserve user session during OAuth flow
  </action>
  <verify>Clicking "Connect Google Calendar" button redirects to actual Google OAuth page</verify>
  <done>Google Calendar connection button triggers real OAuth flow to Google</done>
</task>

<task type="auto">
  <name>Implement Real Apple Calendar OAuth Trigger</name>
  <files>src/components/CalendarSettings.tsx</files>
  <action>
    Enable the Apple connection button to trigger actual OAuth flow:
    
    1. Replace placeholder button functionality with actual redirect to Apple OAuth authorization URL
    2. Implement proper URL construction with client ID, redirect URI, scopes, and state parameters
    3. Ensure proper error handling if OAuth initiation fails
    4. Add loading states for OAuth redirection
    5. Add proper accessibility attributes for screen readers
    
    The implementation should:
    - Construct proper Apple OAuth authorization URL
    - Redirect user to Apple OAuth flow when clicked
    - Include necessary OAuth parameters (client_id, redirect_uri, scope, state)
    - Preserve user session during OAuth flow
  </action>
  <verify>Clicking "Connect Apple Calendar" button redirects to actual Apple OAuth page</verify>
  <done>Apple Calendar connection button triggers real OAuth flow to Apple</done>
</task>

<task type="auto">
  <name>Implement Calendar Disconnection Functionality</name>
  <files>src/components/CalendarSettings.tsx</files>
  <action>
    Enable proper disconnection of calendar accounts:
    
    1. Implement actual database removal of CalendarConnection records when disconnected
    2. Add confirmation dialogs for disconnection actions
    3. Ensure tokens are properly removed from database (both access and refresh tokens)
    4. Handle errors that might occur during disconnection
    5. Add loading states during disconnection process
    6. Update UI to reflect successful disconnection immediately
    
    The implementation should:
    - Make API call to remove calendar connection from database
    - Display confirmation before removing connection
    - Handle API errors gracefully
    - Update component state to reflect disconnection
  </action>
  <verify>Clicking "Disconnect" button removes calendar connection from database and UI</verify>
  <done>Calendar connection disconnection works with proper database removal</done>
</task>

<task type="auto">
  <name>Implement Manual Sync Triggering</name>
  <files>src/components/CalendarSettings.tsx</files>
  <action>
    Enable proper manual sync triggering from the UI:
    
    1. Implement actual API call to trigger sync when "Sync Now" button is clicked
    2. Ensure sync operation uses correct time range parameters
    3. Add loading states during sync operation
    4. Handle responses from sync endpoint properly
    5. Update last sync time display after successful sync
    6. Show error messages if sync fails
    
    The implementation should:
    - Make API call to /api/calendar/sync endpoint with proper parameters
    - Handle sync results and update UI accordingly
    - Show loading indicator during sync operation
    - Update last sync timestamp display
  </action>
  <verify>Clicking "Sync Now" button triggers actual sync operation and updates last sync time</verify>
  <done>Manual sync button triggers real sync operation with proper API calls</done>
</task>
</tasks>

## Verification

After completing these tasks, the following checks should pass:
- Clicking "Connect Google Calendar" button redirects to actual Google OAuth page
- Clicking "Connect Apple Calendar" button redirects to actual Apple OAuth page
- Clicking "Disconnect" button removes calendar connection from database
- Clicking "Sync Now" button triggers actual sync operation
- UI properly reflects connection and sync status updates

## Success Criteria

All gaps identified in the VERIFICATION.md for calendar connection management UI are resolved:
- Calendar connection buttons trigger real OAuth flows to respective providers
- Calendar disconnection completely removes connections from database
- Manual sync from UI triggers real sync operations
- UI properly reflects connection and sync states