Claude-skill-registry 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.
git clone https://github.com/majiayu000/claude-skill-registry
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/calendar-inbox-sync-endlessblink-flow-state" ~/.claude/skills/majiayu000-claude-skill-registry-calendar-inbox-sync-4fd9e3 && rm -rf "$T"
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
which applies sidebar filterstaskStore.filteredTasks - 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:
// 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
// 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
// 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
// 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:
// 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
// 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
// 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
// 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: calendar-inbox-sync -->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
- Technical tests passing
- Visual confirmation via Playwright/screenshots
- Specific test scenarios executed
- Clear description of what was changed
Remember: The user is the final authority on whether something is fixed. No exceptions.