Feature: Implement View Diff functionality in Sync tab

[jms830]

Description

The "View Diff" button in the Sync tab is currently a placeholder and needs to be fully implemented to show differences between local workspace and remote Claude.ai projects.

Current Status

• Button exists and is clickable
• Function viewWorkspaceDiff() exists but only shows placeholder alert
• File: entrypoints/dashboard/main.ts (line 2029-2032)

Expected Functionality

Show a comprehensive comparison view displaying:

Summary Statistics

• Number of remote projects
• Number of local folders
• Number of matched projects
• Projects only on remote (new)
• Folders only locally (orphaned)

Detailed Diff View

For each matched project:

• Files only on remote (would be downloaded)
• Files only locally (would be uploaded in bidirectional mode)
• Modified files (hash comparison)
• File change indicators (added/removed/modified)

UI Design

• Modal or dedicated section in Sync tab
• Color-coded changes (green=added, red=removed, yellow=modified)
• Expandable project sections
• File-level detail view
• Export diff report option (CSV/JSON)

Technical Implementation

1. Create SyncManager.computeWorkspaceDiff() method
2. Implement diff visualization component
3. Add modal/section to dashboard HTML
4. Add diff-specific CSS styling
5. Wire up viewWorkspaceDiff() function

Related Types

Already defined in utils/sync/types.ts:

• WorkspaceDiff interface
• ProjectDiff interface
• FileDiff interface