Widget Development Tools - VS Code Extension

A comprehensive VS Code extension for managing multi-repository widget projects with a rich visual interface, complete CLI functionality integration, advanced development workflow automation, and optimized performance with up to 80% faster operations.

🆕 New to Widget Development Tools?

👉 Check out our Widget Development Tools Guide (included in this repository) for step-by-step setup, time-saving workflows, and pro tips!

Quick Start: Install extension → wdt.workspaceSetup → wdt.watch → Start coding! ⚡

🎉 What's New in v1.8.6

🔥 Focused File Analysis ⭐ New Feature

• Deep Single-File Analysis: wdt.analyze provides comprehensive analysis of the currently active file
• Same Depth as Full Review: Includes all 6 analysis engines (complexity, security, naming, API design, error handling, code smells)
• Instant Results: 2-5 second analysis vs 30-120 seconds for full repository review
• Smart Results Display: Choose between detailed breakdown or Problems panel integration
• Perfect for Development: Quick deep analysis without waiting for full repository scan

🔔 Comprehensive Command Notifications ⭐ Major UX Enhancement

• Progress Tracking: Visual progress bars for all long-running commands with cancellation support
• Start/Finish Feedback: Clear notifications when commands begin and complete
• Smart Error Handling: Detailed error messages with actionable context
• User Control: Toggle notifications on/off with wdt.notify command
• Duplicate Prevention: Prevents same command from running multiple times simultaneously

Enhanced Commands with Notifications:

• Review Commands: wdt.runCodeReview, wdt.analyze, wdt.generateReviewReport
• Build Commands: wdt.build, wdt.smart, wdt.buildAll, wdt.installWidget
• Git Operations: wdt.sync, wdt.pull
• UI Commands: wdt.dashboard, wdt.wizard, wdt.codeAnalysis.* commands

📊 Enhanced Analysis & Review System

• Focused vs Comprehensive: Choose between instant single-file analysis or full repository review
• Better Error Context: Improved error messages with specific file and line information
• Performance Optimized: Smart caching prevents redundant analysis operations
• User-Friendly Feedback: Clear progress indicators and completion status

🎯 Key Benefits

• ⚡ Faster Feedback: Get deep analysis results in seconds, not minutes
• 👀 Visual Progress: Always know what's happening with your commands
• 🚨 Better Errors: Clear, actionable error messages with context
• 🎛️ User Control: Enable/disable notifications based on preference
• 🔄 Smart Analysis: Choose the right analysis depth for your workflow

🚀 Features

📊 Visual Dashboard

• Repository Overview: See all repositories at a glance with status indicators
• Health Monitoring: Real-time status of clean, modified, ahead, behind, and error states
• Quick Actions: Sync all repositories, open folders, and manage projects directly from the dashboard
• Development Watch Mode: Quick access to start and monitor development servers for modified projects
• Statistics: View summary statistics including total repositories, clean status, and change counts

🧙‍♂️ Interactive Setup Wizard

• Guided Workflows: Step-by-step guidance for common tasks
• First-Time Setup: Welcome flow for new users
• Health Checks: Automated repository analysis and issue detection
• Quick Actions: Easy access to frequently used commands

🌳 Repository Explorer Tree View

• Hierarchical View: Browse repositories and their details in a tree structure
• Status Indicators: Visual indicators for repository health and status
• Watch Mode Indicators: Enhanced visual indicators with [MAIN] repository labels
• Clickable Pipeline Status: Click pipeline status to open GitLab pipeline pages directly
• Main Repository Detection: Automatically identifies and highlights the main/workspace repository

👀 Development Watch Mode ⭐ Enhanced with Main Repository Auto-Inclusion

• Auto Main Repository: Always includes the main repository (workspace root) when starting dev watch
• Visual Feedback:
  • Status bar indicator with eye icon shows active servers
  • Repository explorer integration with prominent visual indicators
  • Command center status updates with accurate server counts
  • [MAIN] labels for workspace root repositories
• Performance Optimized (82.5% startup improvement):
  • Smart caching system for settings and repositories
  • Efficient terminal management with instant startup
  • Synchronized UI updates with 89.9% faster repository access
  • Eliminated artificial delays for immediate feedback
• Customizable:
  • Configure script names (dev, start, serve)
  • Set maximum concurrent servers
  • Filter projects with include/exclude patterns
  • Auto-close terminals on exit
• Resource Management:
  • Intelligent terminal reuse and lifecycle management
  • Automatic cleanup and memory optimization
  • Multiple server support with focus management
• Context Menus: Right-click actions for opening, viewing status, and management
• Real-time Updates: Automatic refresh when workspace changes

⚡ Command Center - Enhanced with Favorites & Dynamic Commands ⭐

Comprehensive command organization with 100+ commands across 9 categories, featuring:

🌟 FAVORITES New Feature

• Personalized Command Access: Right-click any command to add/remove from favorites
• Context Menus: Easy favorites management with star icons
• Persistent Storage: Favorites sync across VS Code sessions
• Bulk Management: Gear icon for multi-select favorites configuration

👀 DEV WATCH Enhanced

• Dynamic Command Toggle: Changes between "Dev Watch" and "Stop Dev Watch" based on status
• Main Repository Auto-Inclusion: Always includes workspace root in dev watch
• Multi-Server Management: Shows accurate count of running servers
• Enhanced Status: "Stop 3 development servers (including main repo)"
• Loading Feedback: Spinner animation during startup with "Starting Dev Watch..."

🔄 BUILD COMMANDS ⭐ Major Performance Optimizations

• Build Project - Build the current widget project
• Concurrent Build - Git-based change detection with concurrent dependency-aware processing
• Build All Projects - Build all widget projects in dependency order (dependencies first, main projects last)
• Smart Build Analysis - Intelligent change detection and optimized build orchestration with 40-60% performance improvements (up to 80% faster repository analysis). Conservative sensitivity mode prevents false positive builds from build artifact timestamps.

📦 DEPENDENCY MANAGEMENT

• Reinstall Dependencies - Clean reinstall of all dependencies (removes node_modules)
• Reinstall All Dependencies - Reinstall dependencies for all projects

🛠️ PROJECT SETUP ⭐ Enhanced Installation Order

• Initialize New Project - Create a new widget project from scratch
• Setup Existing Project - Add widget configuration to existing project
• Setup Environment - Setup the widget development environment
• Setup All Projects - Setup all widget projects
• Setup Workspace - Setup complete widget workspace with VS Code configuration (installs dependencies first, builds main project last)

📊 ANALYSIS & WORKFLOW

• Analyze Projects - Comprehensive analysis of all repositories for changes, sync status, build requirements, and issue detection
• Sync Repositories - Automated workflow combining pull + analyze + build operations
• Run Health Check - Comprehensive health check for entire project setup (environment, workspace, git, dependencies, build setup)
• Automated Review Test Workflow - Automatically test the review process, including MR discovery, session creation, comment addition, and review submission

🔍 PROJECT STATUS

• Show Project Status - Show current project status with detailed information
• Show All Project Status - Show status for all projects in workspace

🌿 GIT OPERATIONS

• Create Branch - Create a new git branch
• Checkout Branch - Switch to a different branch

🧹 MAINTENANCE

• Clean Projects - Clean build artifacts, temporary files, logs, and cache directories
• Clean All Projects - Clean all projects with comprehensive cleanup patterns

🔍 MR REVIEW & GITLAB INTEGRATION

• Start Guided Review - Begin structured MR review process with progress tracking
• Add Review Comment - Add contextual comments with auto-detected file/line context
• View Discussions - Browse and manage discussion threads on merge requests
• Reply to Discussions - Participate in threaded conversations
• Resolve Discussions - Mark discussions as resolved or unresolved
• Add Code Suggestions - Propose code changes directly in review comments
• Manage Labels - Add, remove, or replace MR labels during review
• Assign Reviewers - Assign or unassign reviewers to merge requests
• Check Approval Rules - View approval requirements and current status
• Submit Review - Complete review with approval/rejection and feedback
• Review Progress - Check current review session status and progress
• End Review Session - Conclude review session and clear state

🚀 Performance Improvements ⭐ Major Optimization Update

⚡ Dev Watch Startup Performance

• 82.5% Faster Startup: Reduced from ~380ms to ~67ms average startup time
• Instant Terminal Creation: Eliminated 100ms artificial delay
• Immediate Command Execution: No waiting for terminal initialization
• Non-blocking UI Updates: Responsive interface during startup

📊 Repository Caching System

• 89.9% Repository Access Improvement: Cold start 150ms → Cached 15ms
• Smart Caching: 10-second TTL for optimal performance vs freshness
• Fast Repository Methods: getRepositoriesFast() for instant dev watch startup
• Memory Optimization: Efficient cache management with automatic cleanup

🎨 UI/UX Performance

• 52.4% Faster UI Updates: Enhanced repository explorer refresh performance
• Debounced Updates: Prevents UI thrashing during rapid changes
• Optimized Tree Rendering: Fast path for unchanged items
• Visual Feedback: Immediate spinner and status updates

🧠 Memory Management

• Memory Leak Prevention: Comprehensive EventEmitter disposal patterns
• Resource Cleanup: Automatic terminal and service disposal
• Efficient Caching: Bounded cache sizes with smart eviction
• Performance Monitoring: Built-in memory usage tracking

⚡ Smart Build Performance ⭐ Latest Optimization Update

🚀 Parallel Repository Analysis

• 60-80% Faster Repository Scanning: Changed from sequential to concurrent analysis using Promise.all
• Concurrent Change Detection: All repositories analyzed simultaneously
• Improved Scalability: Performance gains increase with repository count

💾 Change Detection Caching

• Responsive Caching: 5-second TTL cache for optimal responsiveness and accuracy
• Intelligent Caching: Prevents redundant git operations during rapid builds
• Smart Cache Management: Automatic cache invalidation and cleanup

⚡ Early Exit Optimization

• Instant Empty Builds: Smart build returns immediately when no projects need building
• Reduced Processing: Eliminates unnecessary dependency calculations for clean workspaces
• Resource Conservation: Significant time savings for unchanged codebases

🎯 Event-Driven Change Detection

• Pull-Based Detection: Replaced time window scanning with precise git pull detection
• More Accurate Detection: Event-driven logic provides better change identification
• Performance Optimized: Faster and more reliable than polling-based approaches

📊 Overall Smart Build Improvements

• Repository Analysis: 60-80% faster with parallel execution
• Change Detection: 50-70% faster with intelligent caching
• Overall Performance: 40-60% faster smart build operations
• Functionality Preserved: All existing build strategies and configurations maintained

🧹 Enhanced GitLab Integration & MR Review System ⭐ With Auto-Configuration

Complete merge request lifecycle management with intelligent review workflows and automatic GitLab URL detection:

🔧 Smart Configuration

• Auto-Detection: Automatically detects GitLab base URLs from repository remote URLs
• Zero-Config Setup: Works without manual GitLab URL configuration in most cases
• Debug Tools: Built-in debug command to test and validate auto-detection (wdt.debugGitLab)

📋 Individual MR Management

• Context Menu Actions: Right-click any MR in the Repository Explorer for instant access to:
  • View MR Details - Open full MR information in GitLab
  • Accept MR - Approve and merge with one click
  • Reject MR - Decline MR with feedback
  • Start Guided Review - Begin structured review process (includes request changes)

🎭 Multiple Diff Viewing Modes

• Combined Diff View - See all changes in a unified view with color-coded additions/deletions
• Individual File View - Browse changes file-by-file for focused review
• Full File Diff - View complete files with changes highlighted in context
• Side-by-Side Comparison - Compare old and new versions side-by-side for clarity

💬 Smart Comment System & Review Workflow

• Review Session Tracking - Comments added during review sessions are stored and published together, with unified logic for manual and automated reviews
• Auto-Context Detection - Automatically detects file and line from active diff views
• Line-Specific Comments - Add precise feedback directly to code lines
• File-Level Comments - Add general feedback about entire files (matching GitLab web interface)
• Immediate Draft Creation - Comments appear as GitLab draft notes instantly when added
• Smart File Recognition - Seamless commenting without manual file path entry
• Batch Submission - All review comments are published together when review is completed, appearing in GitLab's Discussions tab
• Improved Error Handling - Enhanced error messages and fallback logic for review operations with minimal debug output

🧠 AI-Powered Code Review & Analysis ⭐ Enterprise-Grade AI Integration

Advanced AI capabilities powered by OpenAI GPT integration for intelligent code analysis, automated review workflows, and continuous learning:

🤖 OpenAI GPT Integration

• Intelligent Code Understanding: GPT-powered analysis of code purpose, complexity, and potential issues
• Context-Aware Suggestions: AI-generated code improvement suggestions with detailed explanations
• Multi-Model Support: Choose from GPT-4 Turbo, GPT-4, or GPT-3.5 Turbo based on your needs
• Configurable Token Limits: Adjustable response length (100-4000 tokens) for optimal performance
• Graceful Degradation: Works without OpenAI key using local AI analysis

🔍 Automated Code Review

• Run Code Review: wdt.runCodeReview - Comprehensive AI-powered code analysis
• Repository-Specific Review: wdt.runCodeReviewOnRepo - Target specific repositories
• Current File Review: wdt.reviewCurrentFile - Analyze the currently open file
• Review Dashboard: wdt.openReviewDashboard - Visual review management interface
• Review Report Generation: wdt.generateReviewReport - Export detailed analysis reports

🛠️ Automated Fix Suggestions

• Smart Fix Generation: AI-powered suggestions for code improvements and bug fixes
• Rule-Based Fallback: Local analysis engine when OpenAI is unavailable
• Safety-First Approach: Conservative fix application with user confirmation
• Multi-Language Support: Works with TypeScript, JavaScript, Python, and more
• Context Preservation: Maintains code style and project conventions

📊 Review Quality Analytics

• Quality Metrics Tracking: Monitor review completeness, issue detection, and resolution rates
• Performance Analytics: Track AI analysis speed and accuracy over time
• Continuous Learning: ML model training for improved suggestions
• Review Insights: Data-driven insights for process improvement
• Historical Trends: Long-term analysis of code quality patterns

🎯 ML Model Training

• Continuous Improvement: Automated model training on review data
• Pattern Recognition: Learns from successful reviews and common issues
• Adaptive Analysis: Improves accuracy over time with usage
• Custom Training Data: Incorporate project-specific patterns and standards
• Performance Optimization: Efficient training with minimal resource usage

🔧 AI Configuration

{
  "widget-development-tools.ai.openai.apiKey": "your-openai-api-key-here",
  "widget-development-tools.ai.openai.model": "gpt-4-turbo",
  "widget-development-tools.ai.openai.maxTokens": 2000,
  "widget-development-tools.ai.openai.temperature": 0.3
}

🚀 Getting Started with AI Features:

1. Optional Setup: Add OpenAI API key for advanced features (basic AI works without it)
2. Run Analysis: Use wdt.runCodeReview for comprehensive project analysis
3. Review Results: Access detailed suggestions and automated fixes
4. Continuous Learning: AI improves with each review session

⚙️ Configuration Settings

Configure Widget Development Tools through VS Code's settings. All settings are available in the Settings UI or by adding to your settings.json file.

🔧 Dev Watch Configuration

{
  "widget-development-tools.devWatch.scriptName": "dev",
  "widget-development-tools.devWatch.maxConcurrentServers": 5,
  "widget-development-tools.devWatch.autoCloseTerminals": true,
  "widget-development-tools.devWatch.includePatterns": [],
  "widget-development-tools.devWatch.excludePatterns": []
}

🔄 Auto-Refresh Settings

{
  "widget-development-tools.autoRefresh": true,
  "widget-development-tools.autoRefreshPipelineInterval": 3,
  "widget-development-tools.autoRefreshMergeRequestInterval": 7,
  "widget-development-tools.autoRefreshOnlyWhenFocused": true
}

🔔 Notification Settings

{
  "widget-development-tools.notifications.enabled": false,
  "widget-development-tools.notifications.showSuccess": true,
  "widget-development-tools.notifications.showErrors": true
}

🧠 Smart Build Configuration

{
  "wdt.syncRepos.enableSmartBuild": true,
  "wdt.smartBuild.changeDetectionMode": "normal",
  "wdt.smartBuild.changeDetectionSensitivity": "conservative",
  "wdt.smartBuild.buildDependents": false,
  "wdt.smartBuild.alwaysBuildMain": true,
  "wdt.smartBuild.minimalMode": false,
  "wdt.smartBuild.onlyBuildChangedDependencies": true,
  "wdt.smartBuild.buildDependencies": true,
  "wdt.smartBuild.onlyBuildChangedDependents": true
}

📊 Output & Display Settings

{
  "widget-development-tools.output.verbosity": "minimal",
  "widget-development-tools.diff.showFullFileContent": true,
  "widget-development-tools.diff.showContextHeaders": true,
  "widget-development-tools.diff.preferNativeEditor": true
}

⭐ Favorites Configuration

{
  "widget-development-tools.favorites.commands": [
    "Smart Build",
    "Reverse Merge", 
    "Sync Repositories",
    "Switch Branch",
    "Show Project Status",
    "Dev Watch"
  ]
}

🔗 GitLab Integration

{
  "widget-development-tools.gitlab.accessToken": ""
}

✅ For Bell Teams: GitLab base URL is automatically set to https://gitlab.int.bell.ca - no additional configuration needed!

🔧 Optional GitLab Base URL Override:

{
  "widget-development-tools.gitlab.baseUrl": "https://gitlab.com"
}

GitLab Base URL Resolution (Priority Order):

1. gitlab.instanceUrl (GitLab extension setting)
2. widget-development-tools.gitlab.baseUrl (our custom setting)
3. Auto-detected from Git remote URLs
4. Hardcoded default: https://gitlab.int.bell.ca (perfect for Bell development!)

When you need to set gitlab.baseUrl:

• Using external GitLab instances (gitlab.com, custom domains)
• Auto-detection fails (rare with proper Git remotes)
• Future GitLab URL changes

Troubleshooting GitLab Issues:

• Use Widget: Diagnose GitLab Configuration command
• Check access token has 'api' scope
• Verify base URL matches your GitLab instance

🧠 AI Configuration

{
  "widget-development-tools.ai.openai.apiKey": "your-openai-api-key-here",
  "widget-development-tools.ai.openai.model": "gpt-4-turbo",
  "widget-development-tools.ai.openai.maxTokens": 2000,
  "widget-development-tools.ai.openai.temperature": 0.3
}

🚀 AI Features Setup:

• Optional OpenAI Key: Advanced AI features require an OpenAI API key
• Basic AI Works Without Key: Local AI analysis is always available
• Model Selection: Choose GPT-4 Turbo for best results, GPT-4 for balance, GPT-3.5 Turbo for speed
• Token Configuration: Adjust max tokens based on analysis depth needs
• Temperature Setting: Lower values (0.1-0.3) for consistent analysis, higher for creativity

📋 Complete Commands Reference

All commands use the short wdt.* prefix for easy access via Command Palette (Ctrl+Shift+P, then type wdt.).

🌟 Essential Commands

👀 Development Watch

🔨 Build & Development

📦 Package Management

🛠️ Project Setup

📊 Analysis & Status

🔄 Sync & Git Operations

🔍 GitLab & Merge Requests

🔄 Merge Operations

💬 Code Review

� AI-Powered Analysis

�🧹 Maintenance & Cleanup

🔧 Utilities & Tools

⭐ Favorites Management

🧪 Testing & Debugging

🧪 Test Commands

🚀 Quick Start

1. Install the Extension: Search for "Widget Development Tools" in VS Code Extensions
2. Setup Workspace: Run wdt.workspaceSetup to configure your workspace
3. Start Development: Use wdt.watch to start development servers
4. Access Dashboard: Run wdt.dashboard for visual overview
5. Use Command Palette: Type wdt. to see all available commands

📖 Additional Resources

• Widget Development Tools Guide - Complete setup and workflow guide (included in repository)
• Comprehensive Feature Documentation - Detailed feature reference (included in repository)
• Changelog - Version history and updates (included in repository)
• Command Palette: Press Ctrl+Shift+P and type wdt. to see all commands
• Settings: Access via File → Preferences → Settings → Search "widget-development-tools"

Happy coding with Widget Development Tools! 🎉