Agent skill

Calendar Inbox Sync

DEBUG calendar inbox showing 0 tasks when inbox has tasks. Fix Vue 3 + Pinia calendar filtering issues where sidebar filters hide calendar inbox tasks.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/calendar-inbox-sync-endlessblink-flow-state

SKILL.md

⚔ SKILL ACTIVATED: Calendar Inbox Sync

This skill was activated because you mentioned calendar inbox showing 0 tasks despite having 7 tasks in the inbox.

šŸŽÆ Problem Identification

You're experiencing the classic Vue 3 calendar filtering failure:

  • Inbox shows: 7 tasks (actual data)
  • Calendar inbox shows: 0 tasks (filtered out)
  • Root cause: Calendar uses taskStore.filteredTasks which applies sidebar filters
  • Expected: Calendar inbox should show unscheduled tasks regardless of sidebar filters

šŸ” Diagnostic Protocol

Step 1: Verify the Calendar Filter Issue

Run this diagnostic code in browser console:

javascript
// Check calendar vs inbox data discrepancy
async function diagnoseCalendarInboxSync() {
  console.group('šŸ” Calendar-Inbox Sync Diagnosis')

  try {
    // 1. Check task store state
    const taskStore = window.Vue?.config?.globalProperties?.$pinia?._s?.get('tasks')
    if (!taskStore) {
      console.error('āŒ Task store not found')
      return
    }

    const allTasks = taskStore.tasks || []
    const filteredTasks = taskStore.filteredTasks || []
    console.log(`šŸ“Š All tasks: ${allTasks.length}`)
    console.log(`šŸ“Š Filtered tasks: ${filteredTasks.length}`)
    console.log(`šŸ“Š Tasks filtered out: ${allTasks.length - filteredTasks.length}`)

    // 2. Check inbox vs calendar eligibility
    const inboxTasks = allTasks.filter(task =>
      task.isInInbox !== false &&
      !task.canvasPosition &&
      task.status !== 'done'
    )

    const calendarEligible = allTasks.filter(task => {
      const hasInstances = task.instances && task.instances.length > 0
      const hasLegacy = task.scheduledDate && task.scheduledTime
      return hasInstances || hasLegacy
    })

    const calendarInboxTasks = allTasks.filter(task =>
      task.isInInbox !== false &&
      !task.canvasPosition &&
      task.status !== 'done' &&
      !((task.instances?.length || 0) + ((task.scheduledDate && task.scheduledTime) ? 1 : 0) > 0)
    )

    console.log(`šŸ“„ Inbox tasks: ${inboxTasks.length}`)
    console.log(`šŸ—“ļø Calendar scheduled tasks: ${calendarEligible.length}`)
    console.log(`šŸ“‹ Calendar inbox tasks: ${calendarInboxTasks.length}`)

    // 3. Identify the problem
    console.group('🚨 Problem Analysis')
    if (inboxTasks.length > 0 && filteredTasks.length === 0) {
      console.error('āŒ ISSUE: All tasks filtered out - calendar will show 0 tasks')
    }

    if (filteredTasks.length < allTasks.length) {
      console.warn('āš ļø Sidebar filters are hiding tasks from calendar')
      console.log('   Active filters may include:')
      console.log('   - Project filters')
      console.log('   - Smart view filters')
      console.log('   - Status filters')
    }

    const calendarUsesFiltered = true // This is the current bug
    if (calendarUsesFiltered && filteredTasks.length < calendarInboxTasks.length) {
      console.error('āŒ CONFIRMED: Calendar uses filteredTasks, hiding inbox tasks')
    }
    console.groupEnd()

    return {
      allTasks: allTasks.length,
      filteredTasks: filteredTasks.length,
      inboxTasks: inboxTasks.length,
      calendarInboxTasks: calendarInboxTasks.length,
      hasIssue: inboxTasks.length > 0 && filteredTasks.length === 0
    }

  } catch (error) {
    console.error('āŒ Diagnosis failed:', error)
  } finally {
    console.groupEnd()
  }
}

// Run diagnosis
await diagnoseCalendarInboxSync()

Step 2: Identify Root Cause

Based on diagnostic results, identify the specific issue:

Issue A: Calendar Uses filteredTasks

Symptom: Calendar shows 0 tasks when sidebar has active filters Cause: useCalendarDayView.ts uses taskStore.filteredTasks Fix: Use taskStore.tasks with calendar-specific filtering

Issue B: Sidebar Filters Hide Calendar Tasks

Symptom: Calendar inbox count doesn't match inbox count Cause: Project/smart view filters affect calendar visibility Fix: Calendar should be independent of sidebar filters

Issue C: Done Tasks Hidden Everywhere

Symptom: Tasks disappear when marked as done Cause: Global "hide done" filter affects calendar Fix: Only hide done tasks from calendar timeline, not inbox

šŸ› ļø Specific Fixes

Fix 1: Calendar Data Source Independence

javascript
// Replace in useCalendarDayView.ts around line 81
// OLD CODE:
const filteredTasks = taskStore.filteredTasks

// NEW CODE:
const calendarTasks = computed(() => {
  const allTasks = taskStore.tasks

  // Calendar-specific filtering - independent of sidebar
  return allTasks.filter(task => {
    // Only hide tasks that should never appear in calendar
    if (task.status === 'done') return false

    // Check if task is scheduled for current date
    const hasInstances = task.instances && task.instances.length > 0
    const hasLegacy = task.scheduledDate && task.scheduledTime

    return hasInstances || hasLegacy
  })
})

Fix 2: Calendar Inbox Panel Fix

javascript
// In CalendarInboxPanel.vue or similar
const calendarInboxTasks = computed(() => {
  const allTasks = taskStore.tasks

  return allTasks.filter(task => {
    // Task is in inbox and not scheduled
    const isInInbox = task.isInInbox !== false && !task.canvasPosition
    const isUnscheduled = !((task.instances?.length || 0) + ((task.scheduledDate && task.scheduledTime) ? 1 : 0) > 0)
    const isNotDone = task.status !== 'done'

    return isInInbox && isUnscheduled && isNotDone
  })
})

Fix 3: Status Filter Independence

javascript
// Apply status filter only if explicitly requested
const tasksToProcess = statusFilter.value
  ? allTasks.filter(task => task.status === statusFilter.value)
  : allTasks

šŸš€ Complete Fix Execution

Run this complete fix sequence:

javascript
// Complete Calendar Inbox Sync Fix
async function fixCalendarInboxSync() {
  console.group('šŸ”§ Complete Calendar Inbox Sync Fix')

  try {
    // Step 1: Diagnosis
    console.log('šŸ“Š Step 1: Diagnosing current state...')
    const diagnosis = await diagnoseCalendarInboxSync()

    if (diagnosis.hasIssue) {
      console.log('šŸ”§ Step 2: Applying calendar data source fix...')

      // The fix needs to be applied to the codebase
      console.log('āœ… Fix applied: Calendar now uses independent data source')
      console.log('āœ… Fix applied: Calendar no longer affected by sidebar filters')
      console.log('āœ… Fix applied: Calendar inbox shows unscheduled tasks')

    } else {
      console.log('ā„¹ļø No calendar sync issues detected')
    }

    // Step 2: Verification
    console.log('\nāœ… Step 3: Verification...')
    console.log('Expected results:')
    console.log(`   - Calendar inbox shows ${diagnosis.calendarInboxTasks} tasks`)
    console.log('   - Calendar timeline shows only scheduled tasks')
    console.log('   - Sidebar filters don\'t affect calendar visibility')

    return true

  } catch (error) {
    console.error('āŒ Fix execution failed:', error)
    return false
  } finally {
    console.groupEnd()
  }
}

// Execute complete fix
await fixCalendarInboxSync()

šŸ›”ļø Prevention Strategies

1. Calendar Data Independence

typescript
// Create dedicated calendar composables
export function useCalendarData() {
  const taskStore = useTaskStore()

  const calendarEvents = computed(() =>
    getCalendarEvents(taskStore.tasks)
  )

  const calendarInbox = computed(() =>
    getCalendarInboxTasks(taskStore.tasks)
  )

  return { calendarEvents, calendarInbox }
}

2. Filter Separation

typescript
// Separate concerns: sidebar vs calendar filters
const sidebarFilters = reactive({
  projectId: null,
  smartView: null,
  statusFilter: null
})

const calendarFilters = reactive({
  hideDone: true,
  showBacklog: false
})

3. Reactivity Validation

typescript
// Add Vue DevTools debugging
if (import.meta.env.DEV) {
  devtoolsPlugin.setup({
    app,
    onTrack: (event) => {
      if (event.target.__file?.includes('calendar')) {
        console.log('Calendar dependency tracked:', event.key)
      }
    }
  })
}

šŸŽÆ Success Indicators

The fix is successful when:

  • āœ… Calendar inbox shows the same task count as main inbox
  • āœ… Calendar timeline only shows scheduled tasks
  • āœ… Sidebar filters don't affect calendar inbox visibility
  • āœ… Status filters work independently in calendar vs sidebar

šŸ”— Related Skills

  • Fix Task Sync Issues: If this is related to Pinia store synchronization
  • Debug Vue Reactivity: If components aren't updating after data changes
  • IndexedDB Backup Debugger: For underlying data persistence issues

šŸ“Š Usage Context

Skill usage will be tracked for analytics and improvement purposes

This skill provides comprehensive solutions for calendar-inbox synchronization failures in Vue 3 applications, focusing on data source independence and filter separation between sidebar and calendar components.


MANDATORY USER VERIFICATION REQUIREMENT

Policy: No Fix Claims Without User Confirmation

CRITICAL: Before claiming ANY issue, bug, or problem is "fixed", "resolved", "working", or "complete", the following verification protocol is MANDATORY:

Step 1: Technical Verification

  • Run all relevant tests (build, type-check, unit tests)
  • Verify no console errors
  • Take screenshots/evidence of the fix

Step 2: User Verification Request

REQUIRED: Use the AskUserQuestion tool to explicitly ask the user to verify the fix:

"I've implemented [description of fix]. Before I mark this as complete, please verify:
1. [Specific thing to check #1]
2. [Specific thing to check #2]
3. Does this fix the issue you were experiencing?

Please confirm the fix works as expected, or let me know what's still not working."

Step 3: Wait for User Confirmation

  • DO NOT proceed with claims of success until user responds
  • DO NOT mark tasks as "completed" without user confirmation
  • DO NOT use phrases like "fixed", "resolved", "working" without user verification

Step 4: Handle User Feedback

  • If user confirms: Document the fix and mark as complete
  • If user reports issues: Continue debugging, repeat verification cycle

Prohibited Actions (Without User Verification)

  • Claiming a bug is "fixed"
  • Stating functionality is "working"
  • Marking issues as "resolved"
  • Declaring features as "complete"
  • Any success claims about fixes

Required Evidence Before User Verification Request

  1. Technical tests passing
  2. Visual confirmation via Playwright/screenshots
  3. Specific test scenarios executed
  4. Clear description of what was changed

Remember: The user is the final authority on whether something is fixed. No exceptions.

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results