📜 DoomScroller - VS Code Extension

Fun, low-effort entertainment for developers during AI or build downtime.

Overview

DoomScroller is a VS Code extension that provides a curated feed of memes, gifs, and videos to keep you entertained during idle moments, AI processing, or build times. It intelligently detects when you're waiting and can automatically show content to help pass the time.

Version 1.0.0 - Now with AI Activity Detection, Sidebar Integration, and Smart Countdowns!

✨ Features

🎯 Smart AI Detection

Automatic AI Detection: Detects when AI assistants (like Cursor AI) are actively coding
Configurable Sensitivity: Choose from instant, fast, balanced, or conservative detection modes
Smart Countdowns: Shows a countdown overlay before closing popup, with "Keep Open" option
Activity-Based Auto-Close: Automatically closes when you resume coding (with countdown warning)
Debounce Protection: Prevents flicker when AI briefly pauses and resumes

📱 Dual View Modes

Sidebar View: Pin the feed to your activity bar for constant, unobtrusive access
Popup Panel: Automatically shows in a separate panel during AI activity or idle time
Synchronized State: Feed position syncs seamlessly between sidebar and panel views
Smart Behavior: Prevents duplicate views and handles view switching intelligently

🎬 Content Sources

Reddit Integration: Fetch content from your favorite subreddits (no auth required!) ✅ Working - Recommended
Local JSON Files: Load your own memes, gifs, and videos ⚠️ Works but requires manual setup
YouTube Support: Embed YouTube videos ❌ Not currently working
TikTok Support: ❌ Not currently working

🚀 Performance & Reliability

Circuit Breaker Pattern: Automatically disables failing content sources temporarily
Smart Caching: Ring buffer with 100-item cache and intelligent TTL management
Rate Limiting: Prevents API spam with automatic request throttling
Deduplication: Ensures you don't see the same content repeatedly (with smart reset)
Telemetry: Built-in performance monitoring and logging

💡 Smart Features

Idle Detection: Automatically detects when you're idle or waiting for AI/builds
Auto-scroll Mode: Automatically advance through content with configurable intervals
NSFW Filtering: Filter out inappropriate content (enabled by default)
Feed State Persistence: Remembers your position in the feed across sessions
Keyboard Navigation: Navigate feed with arrow keys and space

🎮 User Experience

Onboarding Flow: First-run tutorial explaining key features and setup
Empty State Guidance: Step-by-step setup instructions when no content is configured
Countdown Overlays: Visual countdown when closing popup with option to keep open
Clean UI: Beautiful, minimal design with purple accents that matches VS Code themes
Error Boundaries: Graceful error handling with user-friendly messages
Responsive Design: Works seamlessly at any window size
Customizable: Configure sources, topics, and preferences to your liking

Installation

From VSIX (Development)

Download the .vsix file
Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Click "..." menu → "Install from VSIX..."
Select the downloaded file

From Marketplace (Coming Soon)

Search for "DoomScroller" in the VS Code Extensions marketplace.

Usage

Quick Start

Sidebar Access: Click the DoomScroller icon (📜) in the activity bar for persistent access
Panel Access: Use Ctrl+Shift+P → "DoomScroller: Open Feed" for popup panel
Automatic Popups: Enable AI detection in settings for automatic entertainment during AI coding

💡 Sidebar Width Tip: The extension works at narrow widths, but for an optimal experience, we recommend widening the sidebar to at least 280-300px by dragging its edge.

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search for:

DoomScroller: Open Feed - Open the feed in a panel
DoomScroller: Refresh Feed - Reload content from all sources
DoomScroller: Open Settings - Configure settings
DoomScroller: Show Logs - View extension logs and telemetry data

Keyboard Shortcuts

When the feed is focused:

Arrow Down / Space - Next item
Arrow Up - Previous item
Escape - Cancel countdown overlay (keep popup open)

Adding Your Own Content

Create or edit feed.json in your workspace or use the default location
Add items in the following format:

[
  {
    "url": "https://example.com/meme.jpg",
    "type": "image",
    "title": "Funny programmer meme"
  },
  {
    "url": "https://example.com/video.mp4",
    "type": "video",
    "title": "Compilation of bugs"
  }
]

Supported Fields

url (required): Direct URL to the media file
type (optional): image, gif, or video (auto-detected from URL if not provided)
title (optional): Display title for the item
author (optional): Content creator name
nsfw (optional): Mark content as NSFW (filtered by default)

Settings

Configure DoomScroller in VS Code settings (File → Preferences → Settings → search "doomscroller"):

Content Sources

doomscroller.sources.reddit.enabled: Enable Reddit content (default: true ✅)
doomscroller.sources.reddit.subreddits: Array of subreddit names (default: ["ProgrammerHumor", "memes", "dankmemes", "funny", "gifs", "aww"])
doomscroller.sources.local.enabled: Enable local JSON file (default: false)
doomscroller.sources.local.filePath: Path to your feed.json file
- Default: ${extensionPath}/media/feed.json
- Supports ${extensionPath} and ${workspaceFolder} variables
doomscroller.sources.youtube.enabled: Enable YouTube content (default: false) - Not currently working
doomscroller.sources.youtube.apiKey: YouTube Data API v3 key
doomscroller.sources.youtube.channels: Array of channel IDs or search keywords
doomscroller.sources.tiktok.enabled: Enable TikTok content (default: false) - Not currently working

Media Settings

doomscroller.media.autoplay: Auto-play videos (default: true)
doomscroller.media.maxConcurrent: Max simultaneous videos (default: 2)
doomscroller.media.filterNsfw: Filter NSFW content (default: true)

Note: Use the "Auto Popup" toggle in the extension's Settings tab to control both AI and idle popups together.

AI Activity Detection

doomscroller.aiPopup.enabled: Automatically show feed during AI coding (default: false)
doomscroller.aiPopup.closeCountdownSeconds: Countdown duration before closing popup (default: 3)
doomscroller.aiPopup.debounceMs: Delay before closing when AI stops (default: 2000)
doomscroller.aiPopup.detectionSensitivity: How quickly to detect AI activity
- instant: First large code change (50+ chars) - may trigger on paste
- fast: 2-3 rapid changes in 2 seconds - good for Cursor AI (default)
- balanced: 3-5 rapid changes in 3 seconds
- conservative: 5-7 rapid changes in 3 seconds - fewer false positives

Idle Detection

doomscroller.idle.ms: Idle threshold in milliseconds (default: 6000)
doomscroller.idle.popup: When to show popup (default: off)
- off: Never auto-show
- on: Show on any idle
- aiOnly: Only show during AI/build waiting
- Tip: The extension's Settings tab "Auto Popup" toggle automatically sets this to on/off
doomscroller.idle.cooldown.ms: Cooldown between popups (default: 90000)
doomscroller.idle.dismissOnActivity: Auto-hide on activity (default: true)
doomscroller.idle.autoStartScroll: Auto-start scrolling on idle popup (default: true)

💡 Tips & Best Practices

Getting Started

Reddit is Enabled by Default: The extension comes with Reddit content pre-configured
Access via Sidebar: Click the 📜 icon in the activity bar to view your feed anytime
Adjust Sidebar Width: The UI adapts to narrow widths, but 280-300px+ is recommended for the best experience
Optional AI Popups: Enable doomscroller.aiPopup.enabled if you want automatic popups during AI coding
Manual Control: Use Ctrl+Shift+P → "DoomScroller: Open Feed" to open the feed panel manually

Content Configuration

Reddit is Recommended: Currently the most reliable and practical content source
Reddit Tips: More subreddits = more variety, but slower fetching. Start with 3-5 favorites
Local JSON: Works but requires manually creating/maintaining a feed.json file
YouTube: Not currently working
TikTok: Not currently working
Mix Content Types: Enable images, gifs, and videos for the best experience
NSFW Filter: Keep enabled in professional settings (default: enabled)

Performance Optimization

Cache Size: The extension keeps 100 items cached - no need to configure
Refresh Strategically: Use refresh sparingly as it clears cache and re-fetches everything
Rate Limits: Built-in 2-second minimum between fetches prevents API issues
Memory: Close popup panel when not in use; sidebar uses less memory

Troubleshooting

No Content Loading: Check extension logs (DoomScroller: Show Logs command)
Reddit Not Working: Reddit has rate limits - wait a few minutes and try again
UI Looks Cramped: Try widening the sidebar to 280-300px+ by dragging its edge
TikTok Not Working: TikTok adapter is currently not functional
YouTube Not Working: YouTube adapter is currently not functional
Popup Too Aggressive: Increase idle.ms or change idle.popup to aiOnly
Countdown Closes Too Fast: Increase aiPopup.closeCountdownSeconds in settings

Development

Setup

# Install dependencies
npm install

# Compile extension and webview
npm run compile

# Watch for changes
npm run watch

Project Structure

doomscroller/
├── src/
│   ├── extension.ts              # Extension entry point & AI detection setup
│   ├── core/                     # Core services
│   │   ├── Types.ts             # Type definitions
│   │   ├── Settings.ts          # Settings manager
│   │   ├── Cache.ts             # Ring buffer cache with deduplication
│   │   ├── Fetcher.ts           # Content fetcher with circuit breaker
│   │   ├── IdleDetector.ts      # Idle & AI activity detection
│   │   ├── AdapterRegistry.ts   # Adapter management with circuit breaker
│   │   ├── RateLimiter.ts       # API rate limiting
│   │   ├── SourceManager.ts     # Content source configuration
│   │   └── Telemetry.ts         # Performance monitoring & logging
│   ├── adapters/                # Content source adapters
│   │   ├── LocalJsonAdapter.ts  # Local file content
│   │   ├── RedditAdapter.ts     # Reddit integration
│   │   ├── YouTubeAdapter.ts    # YouTube integration
│   │   └── TikTokAdapter.ts     # TikTok integration
│   └── webview/                 # Webview UI layer
│       ├── WebviewProvider.ts   # Panel webview provider
│       ├── SidebarProvider.ts   # Sidebar webview provider
│       ├── WebviewMessaging.ts  # Shared messaging logic
│       └── ui/                  # React components
│           ├── App.tsx
│           ├── components/      # UI components
│           │   ├── Feed.tsx
│           │   ├── FeedItem.tsx
│           │   ├── Controls.tsx
│           │   ├── CountdownOverlay.tsx  # Countdown UI
│           │   ├── OnboardingOverlay.tsx # First-run onboarding
│           │   ├── Preferences.tsx
│           │   ├── SettingsView.tsx
│           │   ├── SourceManager.tsx
│           │   ├── TabNavigation.tsx
│           │   ├── Toast.tsx
│           │   ├── EmptyState.tsx
│           │   └── ErrorBoundary.tsx
│           ├── contexts/
│           │   └── FeedContext.tsx      # React context & state
│           └── styles.css
├── media/
│   ├── feed.json                # Default feed content
│   └── icon.svg                 # Activity bar icon
└── dist/
    └── webview.js               # Bundled React app (webpack)

Building

# Build production package
npm run package

# This creates a .vsix file you can distribute

# Analyze bundle size
npm run analyze

Architecture Highlights

Circuit Breaker Pattern: Automatically disables failing content sources to prevent cascading failures
Ring Buffer Cache: Fixed-size cache (100 items) with intelligent TTL and deduplication
Dual Webview System: Separate providers for sidebar and panel with synchronized state
Rate Limiting: Prevents API spam with configurable request throttling (2s minimum between fetches)
Event-Driven: Uses VS Code's event system for idle detection and AI activity monitoring
React Context: Centralized state management for clean component architecture

📋 TODO List

High Priority

Performance & Optimization

[ ] Preload Content Strategy: Implement aggressive content preloading when extension activates to eliminate delay on first popup
[ ] Lazy Loading Images: Defer image loading until needed to reduce memory usage
[ ] Virtual Scrolling: Implement virtual scrolling for feeds with 100+ items
[ ] Bundle Size Optimization: Analyze and reduce webpack bundle size (currently bundling unused Radix UI components)
[ ] Memory Leak Detection: Audit and fix potential memory leaks in webview lifecycle

Content & Sources

[ ] Fix TikTok Adapter: Implement TikTok trending/discovery API (currently only supports manual URLs)
[ ] Fix YouTube Embedding: Improve YouTube video embedding and autoplay in webviews
[ ] YouTube Quota Management: Better handling of API quota limits and fallback options
[ ] TikTok Web Scraping: Alternative method to fetch trending TikToks without API
[ ] Twitter/X Integration: Add support for Twitter/X posts and threads
[ ] Instagram Integration: Support Instagram posts (public only)
[ ] Imgur API: Direct Imgur API integration for better performance
[ ] Giphy Integration: Add Giphy as a GIF source
[ ] Custom RSS Feeds: Allow users to add custom RSS feeds
[ ] Content Quality Scoring: Implement scoring algorithm to prioritize high-quality content
[ ] Content Recommendations: ML-based content recommendations based on viewing history

User Experience

[ ] Loading Skeleton: Show skeleton screens instead of spinners
[ ] Offline Support: Cache content for offline viewing
[ ] Search & Filter: Search through cached content and filter by source/type
[ ] Favorites/Bookmarks: Allow users to save favorite content
[ ] Share Feature: Share content with colleagues via link

AI Detection

[ ] Multi-AI Support: Detect GitHub Copilot, Tabnine, and other AI assistants
[ ] Build Task Detection: Better detection of long-running build tasks
[ ] Test Runner Integration: Show feed during long test runs
[ ] Custom Trigger Configuration: Allow users to define custom triggers (e.g., specific tasks)

Medium Priority

Settings & Customization

[ ] Theme Customization: Allow users to customize colors and fonts
[ ] Content Blocking: Block specific domains, keywords, or authors
[ ] Schedule Settings: Different settings for different times of day
[ ] Profile Presets: Save and switch between different configuration profiles
[ ] Import/Export Settings: Share settings between machines

[ ] Team Feed Sharing: Share a feed configuration with your team
[ ] Content Voting: Upvote/downvote content to improve recommendations
[ ] Comment System: Leave notes/reactions on content items
[ ] Activity Stats: Show personal viewing statistics and trends

Developer Experience

[ ] API for Custom Adapters: Public API for third-party content adapters
[ ] Extension Settings UI: Custom settings UI within the extension
[ ] Debug Mode: Enhanced logging and debugging tools
[ ] Content Adapter Testing: Built-in tools to test custom adapters
[ ] Documentation Website: Comprehensive docs site with examples

Low Priority / Future Ideas

Advanced Features

[ ] Cloud Sync: Sync preferences and state across devices
[ ] Mobile Companion App: View feed on mobile while coding
[ ] Desktop Notifications: Notify when new content arrives
[ ] Screen Time Tracking: Track and limit feed viewing time
[ ] Focus Mode Integration: Integrate with Pomodoro/focus timers
[ ] AI-Generated Content: Use AI to generate memes based on your code
[ ] Code Context Awareness: Show content relevant to what you're working on

Platform & Distribution

[ ] VS Code Marketplace: Publish to official marketplace
[ ] JetBrains Plugin: Port to IntelliJ/WebStorm
[ ] Visual Studio Extension: Port to Visual Studio
[ ] Vim/Neovim Plugin: Terminal-based version for Vim users

Analytics & Insights

[ ] Usage Analytics Dashboard: Visualize your feed usage patterns
[ ] Content Performance Metrics: See which sources are most engaging
[ ] Productivity Correlation: Correlate feed usage with coding metrics
[ ] Weekly Reports: Email summaries of content and activity

Accessibility

[ ] Screen Reader Support: Full ARIA labels and keyboard navigation
[ ] High Contrast Mode: Better support for high contrast themes
[ ] Reduced Motion: Respect prefers-reduced-motion setting
[ ] Font Size Controls: Adjustable text sizing
[ ] Audio Descriptions: Audio descriptions for video content

Known Issues / Bugs

[ ] First Load Delay: Feed sometimes takes 2-3 seconds to populate on first open
[ ] Reddit Rate Limiting: Reddit API can be slow or rate-limited without authentication
[ ] Video Autoplay: Some videos don't autoplay consistently
[ ] Memory Usage: Webview memory usage grows with large feeds
[ ] Countdown Timing: Countdown might occasionally be canceled prematurely
[ ] TikTok Not Working: TikTok adapter only supports manually provided URLs (no auto-discovery)
[ ] YouTube Limited: YouTube adapter requires API key and has quota limits
[ ] TikTok Embedding: TikTok videos may not embed properly in VS Code webviews

🤝 Contributing

Contributions are welcome and appreciated! We'd love to have you join the community.

How to Contribute

🐛 Report bugs: Create an issue
💡 Suggest features: Request a feature
💬 Join discussions: GitHub Discussions
🔧 Submit code: Check out our Contributing Guide

Please read our Code of Conduct before contributing.

Contributors

Thank you to all our contributors! 🎉

📄 License

MIT License - see LICENSE for details.

🙏 Credits

Created with ❤️ by Jxhnmo for developers who need a little entertainment during downtime.

Acknowledgments

Built with VS Code Extension API
UI powered by React and Radix UI
Content from Reddit, YouTube, and user-provided sources
Icon and design inspired by the endless scroll culture

🔗 Links

⭐ Support

If you find this extension useful, please:

⭐ Star the repository on GitHub
⭐ Rate it on the VS Code Marketplace
💬 Share it with your developer friends
🐛 Report bugs and suggest features

Happy scrolling! 📜✨

DoomScroller

Jxhnmo