Add demo GIFs for key features (tree view, progress panel, commands)

[johnproblems]

Task: Add demo GIFs for key features (tree view, progress panel, commands)

Description

Create animated GIF demonstrations of the extension's key features to showcase functionality in the README and marketplace listing. GIFs should be high-quality, concise, and clearly demonstrate each feature's value proposition.

Acceptance Criteria

• GIF showing Epic/Task tree view interaction (expand, collapse, refresh)
• GIF demonstrating task status updates and visual feedback
• GIF showing progress panel with real-time metrics
• GIF of command palette commands being executed
• GIF showing task creation and editing workflow
• All GIFs are optimized for size (< 2MB each)
• GIFs use consistent theme and window size
• GIFs are 10-20 seconds each with smooth playback

Technical Details

• Create extensions/vscode/media/demos/ directory
• Use screen recording tool (e.g., LICEcap, ScreenToGif, or Kap)
• Record at 720p resolution with 15 fps
• GIFs to create:
  • tree-view-demo.gif: Navigating epic/task hierarchy
  • task-status-demo.gif: Updating task status and seeing visual changes
  • progress-panel-demo.gif: Viewing metrics and filtering
  • commands-demo.gif: Using command palette commands
  • workflow-demo.gif: Complete workflow from creating to completing a task
• Optimize GIFs using tools like Gifski or ezgif.com
• Use consistent VSCode theme (Dark+ recommended)
• Add subtle annotations or highlights if needed
• Reference GIFs in README with relative paths
• Files affected:
  • extensions/vscode/media/demos/*.gif (new files)
  • extensions/vscode/README.md (updated with GIFs)

Dependencies

• Task 20: Tree view must be fully implemented
• Task 30: Progress panel must be implemented
• Task 40: Commands must be implemented
• Working extension with sample data for recording

Effort Estimate

• Size: M
• Hours: 6
• Parallel: false

Definition of Done

• Code implemented
• Tests written and passing
• Documentation updated
• Code reviewed