Feature/vscode webview UI setup

[YagoBorba]

📋 Description

This PR implements a complete React-based webview dashboard for the StackCode VS Code extension, transforming the extension from a basic command-line interface to a rich, interactive visual experience.

🎯 Main Achievements:

• Complete React Dashboard Implementation with 5 interactive UI components
• Modern TailwindCSS Design System integrated with VS Code themes
• Robust Build & Development Workflow with Vite, TypeScript, and PostCSS
• Enhanced Extension Architecture with proper webview communication and command handling
• Comprehensive Testing & Quality Assurance with passing lint, format, and unit tests

🏗️ Technical Implementation:

• Built responsive Dashboard, ProjectView, CommandPalette, NotificationPanel, and StatusBar components
• Implemented secure Content Security Policy configuration for webview React app loading
• Created bidirectional communication system between VS Code extension and React webview
• Added real-time project statistics and workspace detection with fallback mechanisms
• Enhanced debugging capabilities with comprehensive logging and error handling

🔗 Related Issue

Implements the VS Code extension webview UI feature - no specific issue reference required for this implementation.

🧪 Type of Change

• ✨ New feature (non-breaking change which adds functionality)
• 🔧 Configuration change
• ♻️ Refactoring
• 🐛 Bug fix (non-breaking change which fixes an issue)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• 🧹 Code cleanup

📝 How Has This Been Tested?

• Unit tests pass - All 36 tests across CLI, Core, and VS Code extension packages
• Manual testing completed - Extension loads correctly in VS Code debug environment
• Build validation - All TypeScript compilation and Vite builds successful
• Lint & Format checks - ESLint and Prettier validation passing
• WebView functionality - React app loads with proper VS Code API communication

🧪 Testing Coverage:

• CLI Package: 23 tests passed (generate, init, config, git, release, commit, validate)
• Core Package: 9 tests passed (validator, github, release)
• VS Code Extension: 4 tests passed (ProactiveNotificationManager, Extension integration)
• Code Quality: Zero lint errors, proper TypeScript types, consistent formatting

📷 Screenshots (if applicable)

Screenshots of the new React dashboard interface would be included here showing:

• Dashboard with project statistics and quick actions
• Command palette with search and categorization
• Project overview with file structure visualization
• Notification panel with different alert types
• Status bar with commit information

✅ Checklist

• My code follows the project's coding standards
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have checked my code and corrected any misspellings

🔄 Dependencies

📦 New Dependencies Added:

• React & React-DOM (19.1.1) - Core UI framework
• TailwindCSS (4.1.11) - Utility-first CSS framework
• Vite (7.1.1) - Build tool and development server
• lucide-react (0.539.0) - Icon library for UI components
• TypeScript configurations for both extension and webview

🛠️ Development Dependencies:

• Enhanced ESLint configuration with TypeScript support
• Prettier for consistent code formatting
• PostCSS with TailwindCSS integration
• Vite plugins for React and TypeScript

📚 Additional Notes

🎨 Design System:

• Fully integrated with VS Code theme variables for consistent dark/light mode support
• Responsive design that adapts to different sidebar widths
• Custom scrollbars and animations matching VS Code's native feel

🔧 Architecture Decisions:

• Modular component structure for easy maintenance and testing
• Type-safe communication between extension backend and React frontend
• Graceful fallbacks for development vs production environments
• Security-first approach with proper CSP implementation

🚀 Performance Optimizations:

• Vite-based build for fast development and optimized production bundles
• Tree-shaking and code splitting for minimal bundle size
• Lazy loading patterns for better initial load performance

📋 Files Modified:

• 61 files changed, 5,468 insertions, 577 deletions
• Major additions in packages/vscode-extension/src/webview-ui/
• Enhanced DashboardProvider.ts with robust webview management
• Updated build configurations and development tooling