Update README.md

Feature/mcp support

CHANGELOG.md

@@ -4,6 +4,118 @@ All notable changes to the "claude-code-chat" extension will be documented in th
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [1.0.0] - 2025-01-15
+
+### 🚀 Major Features Added
+
+#### **Advanced Permissions Management System**
+- Complete permissions framework with MCP integration for secure tool execution
+- Interactive permission dialogs with detailed tool information and command previews
+- "Always Allow" functionality with smart command pattern matching for common tools (npm, git, docker, etc.)
+- YOLO mode for power users to skip all permission checks
+- Comprehensive permissions settings UI with ability to add/remove specific permissions
+- File system watcher for real-time permission request handling
+- Workspace-specific permission storage and management
+
+#### **MCP (Model Context Protocol) Server Management**
+- Complete MCP server configuration interface
+- Popular MCP servers gallery with one-click installation
+- Custom MCP server creation with validation
+- Server management (edit, delete, enable/disable)
+- Automatic permissions server integration
+- WSL path conversion for cross-platform compatibility
+
+#### **Sidebar Integration & Multi-Panel Support**
+- Native VS Code sidebar view with full chat functionality
+- Smart panel management (auto-close main panel when sidebar opens)
+- Persistent session state across panel switches
+- Proper webview lifecycle management
+- Activity bar integration with custom icon
+
+#### **Image & Clipboard Enhancements**
+- Drag-and-drop image support directly into chat
+- Clipboard image paste functionality (Ctrl+V for screenshots)
+- Multiple image selection with VS Code's native file picker
+- Automatic image organization in `.claude/claude-code-chat-images/` folder
+- Automatic `.gitignore` creation for image folders
+- Support for PNG, JPG, JPEG, GIF, SVG, WebP, BMP formats
+
+#### **Code Block & Syntax Improvements**
+- Enhanced markdown parsing with proper code block detection
+- Syntax highlighting for code blocks with language detection
+- Copy-to-clipboard functionality for code blocks
+- Improved inline code rendering
+- Better handling of technical identifiers and underscores
+
+### 🎨 UI/UX Improvements
+
+#### **Settings & Configuration**
+- Comprehensive settings modal with organized sections
+- YOLO mode toggle with visual warnings and explanations
+- Real-time settings synchronization between UI and VS Code config
+- Better visual hierarchy and professional styling
+- Smart configuration validation and error handling
+
+#### **Message & Chat Interface**
+- Improved message spacing and visual consistency
+- Enhanced tool result display with better formatting
+- Smart scrolling behavior (only auto-scroll if user is at bottom)
+- Loading indicators and processing states
+- Better error handling and user feedback
+
+#### **YOLO Mode Visual Design**
+- Less subtle YOLO mode section (increased opacity and size)
+- Changed warning icon from ⚠️ to 🚀 for less intimidating appearance
+- Soft tomato red styling that's noticeable but not scary
+- Clear explanation of YOLO mode functionality
+
+### 🔧 Technical Enhancements
+
+#### **Session & State Management**
+- Persistent session state across VS Code restarts
+- Proper cleanup of resources and event listeners
+- Better error handling for failed operations
+- Improved memory management for large conversations
+
+#### **Cross-Platform Compatibility**
+- Enhanced WSL support with proper path conversion
+- Windows-specific improvements and fixes
+- Better handling of different operating system environments
+- Improved subprocess management and cleanup
+
+#### **Performance Optimizations**
+- Reduced context usage with more efficient tool operations
+- Better file search and workspace integration
+- Optimized message handling and UI updates
+- Improved extension activation and initialization times
+
+#### **Developer Experience**
+- Better error messages and debugging information
+- Improved extension logging and troubleshooting
+- Enhanced development workflow support
+- Better TypeScript integration and type safety
+
+### 🐛 Bug Fixes
+- Fixed multiple permission prompts being sent simultaneously
+- Resolved panel management issues with multiple webviews
+- Fixed expand/collapse functionality for long content
+- Corrected Unix timestamp parsing for usage limit messages
+- Fixed WSL integration on Windows systems
+- Resolved markdown parsing issues with underscores in code
+- Fixed copy-paste functionality for images and code blocks
+- Corrected file path handling across different platforms
+
+### 🔄 Breaking Changes
+- Permission system now requires explicit approval for tool execution (unless YOLO mode is enabled)
+- Image files are now stored in `.claude/claude-code-chat-images/` instead of root directory
+- MCP configuration moved to extension storage instead of global config
+
+### 📚 Documentation & Community
+- Updated README with comprehensive feature documentation
+- Fixed GitHub issues link in repository
+- Enhanced examples and usage guides
+- Better onboarding experience for new users
+
 ## [0.1.3] - 2025-06-24
 
 ### 🚀 Features Added

README.md

@@ -15,15 +15,16 @@ Ditch the command line and experience Claude Code like never before. This extens
 ## ✨ **Why Choose Claude Code Chat?**
 
 🖥️ **No Terminal Required** - Beautiful chat interface replaces command-line interactions  
-⏪ **Restore Checkpoints** - Undo changes and restore code to any previous state  
+⏪ **Restore Checkpoints** - Undo changes and restore code to any previous state   
+🔌 **MCP Server Support** - Complete Model Context Protocol server management   
 💾 **Conversation History** - Automatic conversation history and session management  
-🎨 **VS Code Native** - Claude Code integrated directly into VS Code with native theming  
+🎨 **VS Code Native** - Claude Code integrated directly into VS Code with native theming and sidebar support  
 🧠 **Plan and Thinking modes** - Plan First and configurable Thinking modes for better results  
-⚡ **Smart File Context and Commands** - Reference any file with simple @ mentions and / for commands  
+⚡ **Smart File/Image Context and Custom Commands** - Reference any file, copy images or screenshots, and create custom commands  
 🤖 **Model Selection** - Choose between Opus, Sonnet, or Default based on your needs  
 🐧 **WSL Support** - Full Windows Subsystem for Linux integration and compatibility
 
-![Claude Code Chat Cut](https://github.com/user-attachments/assets/d4ded28f-a4ed-4862-9766-c1ff89947775)
+![Claude Code Chat 1 0 0](https://github.com/user-attachments/assets/5954a74c-eff7-4205-8482-6a1c9de6e102)
 
 
 ---
@@ -34,8 +35,9 @@ Ditch the command line and experience Claude Code like never before. This extens
 - No terminal required - everything through the UI
 - Real-time streaming responses with typing indicators
 - One-click message copying with visual feedback
-- Rich markdown support for code blocks and formatting
+- Enhanced markdown support with syntax highlighting
 - Auto-resizing input that grows with your content
+- Copy-to-clipboard for code blocks
 
 ### ⏪ **Checkpoint & Session Management**
 - **Restore Checkpoints** - Instantly undo changes and restore to any previous state
@@ -45,9 +47,36 @@ Ditch the command line and experience Claude Code like never before. This extens
 - Real-time cost and token tracking
 - Session statistics and performance metrics
 
+### 🔌 **MCP Server Management** ⭐ **NEW IN V1.0**
+- **Popular Servers Gallery** - One-click installation of common MCP servers
+- **Custom Server Creation** - Build and configure your own MCP servers
+- **Server Management** - Edit, delete, enable/disable servers through UI
+- **Automatic Integration** - Seamless permissions and tool integration
+- **Cross-platform Support** - Full WSL compatibility with path conversion
+
+### 🔒 **Advanced Permissions System** ⭐ **NEW IN V1.0**
+- **Interactive Permission Dialogs** - Detailed tool information with command previews
+- **Always Allow Functionality** - Smart command pattern matching for common tools (npm, git, docker)
+- **YOLO Mode** - Skip all permission checks for power users
+- **Workspace Permissions** - Granular control over what tools can execute
+- **Real-time Permission Management** - Add/remove permissions through intuitive UI
+
+### 🖼️ **Image & Clipboard Support** ⭐ **NEW IN V1.0**
+- **Drag & Drop Images** - Simply drag images directly into the chat
+- **Clipboard Paste** - Press Ctrl+V to paste screenshots and copied images
+- **Multiple Image Selection** - Choose multiple images through VS Code's file picker
+- **Organized Storage** - Automatic organization in `.claude/claude-code-chat-images/`
+- **Format Support** - PNG, JPG, JPEG, GIF, SVG, WebP, BMP formats
+
+### 📱 **Sidebar Integration** ⭐ **NEW IN V1.0**
+- **Native VS Code Sidebar** - Full chat functionality in the sidebar panel
+- **Smart Panel Management** - Automatic switching between main and sidebar views
+- **Persistent Sessions** - State maintained across panel switches
+- **Activity Bar Integration** - Quick access from VS Code's activity bar
+
 ### 📁 **Smart File Integration**
 - Type `@` to instantly search and reference workspace files
-- Image attachments via file browser
+- Image attachments via file browser and copy-paste screeshots
 - Lightning-fast file search across your entire project
 - Seamless context preservation for multi-file discussions
 
@@ -55,6 +84,7 @@ Ditch the command line and experience Claude Code like never before. This extens
 - Visual dashboard showing all available Claude Code tools
 - Real-time tool execution with formatted results
 - Process control - start, stop, and monitor operations
+- Smart permission system for secure tool execution
 
 ### 🎨 **VS Code Integration**
 - Native theming that matches your editor
@@ -214,31 +244,39 @@ Example configuration in `settings.json`:
 - Type `@` followed by your search term to quickly reference files
 - Use `@src/` to narrow down to specific directories
 - Reference multiple files in one message for cross-file analysis
+- **NEW**: Copy-paste images directly into chat for visual context
+- **NEW**: Paste screenshots with Ctrl+V for instant visual communication
 
 ### ⚡ **Productivity Boosters**
 - **Creates checkpoints automatically** before changes for safe experimentation
 - **Restore instantly** if changes don't work out as expected
+- **NEW**: Permission system prevents accidental tool execution
+- **NEW**: YOLO mode for power users who want speed over safety
 - Use the stop button to cancel long-running operations
 - Copy message contents to reuse Claude's responses
 - Open history panel to reference previous conversations
+- **NEW**: Sidebar integration for multi-panel workflow
 
 ### 🎨 **Interface Customization**
 - The UI automatically adapts to your VS Code theme
 - Messages are color-coded: Green for you, Blue for Claude
 - Hover over messages to reveal the copy button
+- **NEW**: Enhanced code block rendering with syntax highlighting
+- **NEW**: Copy-to-clipboard functionality for code blocks
 
 ---
 
 ## 🔧 **Advanced Features**
 
 ### 🛠️ **Tool Integration**
-Claude Code Chat provides full access to all Claude Code tools:
-- **Bash** - Execute shell commands
+Claude Code Chat provides secure access to all Claude Code tools:
+- **Bash** - Execute shell commands with permission controls
 - **File Operations** - Read, write, and edit files
-- **Search** - Grep and glob pattern matching
+- **Search** - Grep and glob pattern matching across workspace
 - **Web** - Fetch and search web content
 - **Multi-edit** - Batch file modifications
-- **While in Beta, all tools are enabled by default, use at your own risk!**
+- **MCP Servers** - Extend functionality with Model Context Protocol servers
+- **Permissions System** - Granular control over tool execution for security
 
 ### 📊 **Analytics & Monitoring**
 - **Real-time cost tracking** - Monitor your API usage

src/extension.ts

@@ -305,6 +305,9 @@ class ClaudeChatProvider {
 			case 'deleteCustomSnippet':
 				this._deleteCustomSnippet(message.snippetId);
 				return;
+			case 'enableYoloMode':
+				this._enableYoloMode();
+				return;
 		}
 	}
 
@@ -366,6 +369,7 @@ class ClaudeChatProvider {
 	public reinitializeWebview() {
 		// Only reinitialize if we have a webview (sidebar)
 		if (this._webview) {
+			this._initializePermissions();
 			this._initializeWebview();
 			// Set up message handler for the webview
 			this._setupWebviewMessageHandler(this._webview);
@@ -2037,15 +2041,39 @@ class ClaudeChatProvider {
 		});
 	}
 
+	private async _enableYoloMode(): Promise<void> {
+		try {
+			// Update VS Code configuration to enable YOLO mode
+			const config = vscode.workspace.getConfiguration('claudeCodeChat');
+			
+			// Clear any global setting and set workspace setting
+			await config.update('permissions.yoloMode', true, vscode.ConfigurationTarget.Workspace);
+			
+			console.log('YOLO Mode enabled - all future permissions will be skipped');
+			
+			// Send updated settings to UI
+			this._sendCurrentSettings();
+			
+		} catch (error) {
+			console.error('Error enabling YOLO mode:', error);
+		}
+	}
+
 	private async _updateSettings(settings: { [key: string]: any }): Promise<void> {
 		const config = vscode.workspace.getConfiguration('claudeCodeChat');
 		
 		try {
 			for (const [key, value] of Object.entries(settings)) {
-				await config.update(key, value, vscode.ConfigurationTarget.Global);
+				if (key === 'permissions.yoloMode') {
+					// YOLO mode is workspace-specific
+					await config.update(key, value, vscode.ConfigurationTarget.Workspace);
+				} else {
+					// Other settings are global (user-wide)
+					await config.update(key, value, vscode.ConfigurationTarget.Global);
+				}
 			}
 			
-			vscode.window.showInformationMessage('Settings updated successfully');
+			console.log('Settings updated:', settings);
 		} catch (error) {
 			console.error('Failed to update settings:', error);
 			vscode.window.showErrorMessage('Failed to update settings');

src/ui-styles.ts

@@ -107,6 +107,86 @@ const styles = `
         font-size: 16px;
     }
 
+    .permission-menu {
+        position: relative;
+        margin-left: auto;
+    }
+
+    .permission-menu-btn {
+        background: none;
+        border: none;
+        color: var(--vscode-descriptionForeground);
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 16px;
+        font-weight: bold;
+        transition: all 0.2s ease;
+        line-height: 1;
+    }
+
+    .permission-menu-btn:hover {
+        background-color: var(--vscode-list-hoverBackground);
+        color: var(--vscode-foreground);
+    }
+
+    .permission-menu-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--vscode-menu-background);
+        border: 1px solid var(--vscode-menu-border);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        z-index: 1000;
+        min-width: 220px;
+        padding: 4px 0;
+        margin-top: 4px;
+    }
+
+    .permission-menu-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        padding: 12px 16px;
+        background: none;
+        border: none;
+        width: 100%;
+        text-align: left;
+        cursor: pointer;
+        color: var(--vscode-foreground);
+        transition: background-color 0.2s ease;
+    }
+
+    .permission-menu-item:hover {
+        background-color: var(--vscode-list-hoverBackground);
+    }
+
+    .permission-menu-item .menu-icon {
+        font-size: 16px;
+        margin-top: 1px;
+        flex-shrink: 0;
+    }
+
+    .permission-menu-item .menu-content {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .permission-menu-item .menu-title {
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 1.2;
+    }
+
+    .permission-menu-item .menu-subtitle {
+        font-size: 11px;
+        color: var(--vscode-descriptionForeground);
+        opacity: 0.8;
+        line-height: 1.2;
+    }
+
     .permission-content {
         font-size: 13px;
         line-height: 1.4;
@@ -493,7 +573,7 @@ const styles = `
         align-items: center;
         gap: 6px;
         margin-top: 12px;
-        opacity: 0.8;
+        opacity: 1;
         transition: opacity 0.2s ease;
     }
 
@@ -502,12 +582,12 @@ const styles = `
     }
 
     .yolo-mode-section input[type="checkbox"] {
-        transform: scale(0.8);
+        transform: scale(0.9);
         margin: 0;
     }
 
     .yolo-mode-section label {
-        font-size: 10px;
+        font-size: 12px;
         color: var(--vscode-descriptionForeground);
         cursor: pointer;
         font-weight: 400;
@@ -1447,13 +1527,13 @@ const styles = `
 
     .yolo-warning {
         font-size: 12px;
-        color: var(--vscode-inputValidation-errorForeground);
+        color: var(--vscode-foreground);
         text-align: center;
         font-weight: 500;
-        background-color: var(--vscode-inputValidation-errorBackground);
-        border: 1px solid var(--vscode-inputValidation-errorBorder);
+        background-color: rgba(255, 99, 71, 0.08);
+        border: 1px solid rgba(255, 99, 71, 0.2);
         padding: 8px 12px;
-        margin: 4px 12px;
+        margin: 4px 4px;
         border-radius: 4px;
         animation: slideDown 0.3s ease;
     }

src/ui.ts

@@ -133,7 +133,7 @@ const html = `<!DOCTYPE html>
 	</div>
 
 			<div id="yoloWarning" class="yolo-warning" style="display: none;">
-			⚠️ Yolo Mode Active: Claude Code can execute any tool without asking.
+			⚠️ Yolo Mode Active: Claude Code will auto-approve all tool requests.
 		</div>
 
 	<!-- File picker modal -->
@@ -339,23 +339,11 @@ const html = `<!DOCTYPE html>
 						</button>
 						<div class="yolo-mode-section">
 							<input type="checkbox" id="yolo-mode" onchange="updateSettings(); updateYoloWarning();">
-							<label for="yolo-mode">Enable Yolo Mode (Skip All Permissions)</label>
+							<label for="yolo-mode">Enable Yolo Mode (Auto-allow all permissions)</label>
 						</div>
 					</div>
 				</div>
 
-				<h3 style="margin-top: 24px; margin-bottom: 16px; font-size: 14px; font-weight: 600;">Custom Slash Commands (coming soon)</h3>
-				<div>
-					<p style="font-size: 11px; color: var(--vscode-descriptionForeground); margin: 0;">
-						Add your own custom slash commands that will appear in the commands modal. Define shortcuts for frequently used terminal commands.
-					</p>
-				</div>
-				<div class="settings-group">
-					<div class="tool-item">
-						<input type="checkbox" id="custom-commands-enabled" disabled>
-						<label for="custom-commands-enabled">Enable Custom Commands <span style="font-style: italic; opacity: 0.7;">(Coming Soon)</span></label>
-					</div>
-				</div>
 				
 			</div>
 		</div>
@@ -2798,6 +2786,18 @@ const html = `<!DOCTYPE html>
 				<div class="permission-header">
 					<span class="icon">🔐</span>
 					<span>Permission Required</span>
+					<div class="permission-menu">
+						<button class="permission-menu-btn" onclick="togglePermissionMenu('\${data.id}')" title="More options">⋮</button>
+						<div class="permission-menu-dropdown" id="permissionMenu-\${data.id}" style="display: none;">
+							<button class="permission-menu-item" onclick="enableYoloMode('\${data.id}')">
+								<span class="menu-icon">⚡</span>
+								<div class="menu-content">
+									<span class="menu-title">Enable YOLO Mode</span>
+									<span class="menu-subtitle">Auto-allow all permissions</span>
+								</div>
+							</button>
+						</div>
+					</div>
 				</div>
 				<div class="permission-content">
 					<p>Allow <strong>\${toolName}</strong> to execute the tool call above?</p>
@@ -2849,6 +2849,44 @@ const html = `<!DOCTYPE html>
 			}
 		}
 
+		function togglePermissionMenu(permissionId) {
+			const menu = document.getElementById(\`permissionMenu-\${permissionId}\`);
+			const isVisible = menu.style.display !== 'none';
+			
+			// Close all other permission menus
+			document.querySelectorAll('.permission-menu-dropdown').forEach(dropdown => {
+				dropdown.style.display = 'none';
+			});
+			
+			// Toggle this menu
+			menu.style.display = isVisible ? 'none' : 'block';
+		}
+
+		function enableYoloMode(permissionId) {
+			// Hide the menu
+			document.getElementById(\`permissionMenu-\${permissionId}\`).style.display = 'none';
+			
+			// Send message to enable YOLO mode
+			vscode.postMessage({
+				type: 'enableYoloMode'
+			});
+			
+			// Auto-approve this permission
+			respondToPermission(permissionId, true);
+			
+			// Show notification
+			addMessage('⚡ YOLO Mode enabled! All future permissions will be automatically allowed.', 'system');
+		}
+
+		// Close permission menus when clicking outside
+		document.addEventListener('click', function(event) {
+			if (!event.target.closest('.permission-menu')) {
+				document.querySelectorAll('.permission-menu-dropdown').forEach(dropdown => {
+					dropdown.style.display = 'none';
+				});
+			}
+		});
+
 		// Session management functions
 		function newSession() {
 			vscode.postMessage({