Add Open VSIX build script

Build script that creates Open VSIX variant with different branding:
- Changes displayName to "Claude Code Chat"
- Uses icon.png instead of icon-bubble.png
- Automatically backs up and restores files after build

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.vscodeignore

@@ -14,3 +14,4 @@ backup
 claude-code-chat-permissions-mcp/**
 node_modules
 mcp-permissions.js
+build

CHANGELOG.md

@@ -4,6 +4,38 @@ 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.1.0] - 2025-12-06
+
+### 🚀 Features Added
+- **Install Modal**: Added installation flow for users without Claude Code CLI
+  - Auto-detects when Claude Code is not installed
+  - One-click installation with progress indicator
+  - Platform-specific installation commands
+- **Diff Viewer Improvements**:
+  - Show full diff in Edit, MultiEdit, and Write tool use messages
+  - Add "Open Diff" button to open VS Code's native side-by-side diff editor
+  - Add truncation with expand button for long diffs
+  - Optimize diff storage and improve Open Diff button behavior
+- **Processing Indicator**: New morphing orange dot animation while Claude is working
+- **Subscription Detection**: Added usage badge to status bar showing plan type (Pro, Max) or API cost
+- **Conversation Compacting**: Handle `/compact` command in chat with status messages and token reset
+- **Permission System**: Migrated from MCP file-based to stdio-based permission prompts
+- **Plan Mode**: Now uses native `--permission-mode plan` CLI flag for cleaner implementation
+
+### 🐛 Bug Fixes
+- Fixed diff line alignment by removing ::before pseudo-elements
+- Fixed auto-scroll for diff tool results
+- Strip tool_use_error tags from error messages
+- Improved process termination handling
+
+### 🔧 Technical Improvements
+- Run /compact command in chat instead of spawning terminal
+- Improved terminal and UI experience
+- Updated diff icon colors
+
+### 📊 Analytics
+- Added Umami analytics events to track install flow (modal shown, started, success/failed)
+
 ## [1.0.7] - 2025-10-01
 
 ### 🚀 Features Added

README.md

@@ -47,6 +47,13 @@ Ditch the command line and experience Claude Code like never before. This extens
 - Real-time cost and token tracking
 - Session statistics and performance metrics
 
+### 📝 **Inline Diff Viewer** ⭐ **NEW IN V1.1**
+- **Full Diff Display** - See complete file changes directly in Edit, MultiEdit, and Write messages
+- **Open in VS Code Diff** - One-click button to open VS Code's native side-by-side diff editor
+- **Smart Truncation** - Long diffs are truncated with an expand button for better readability
+- **Syntax Highlighting** - Proper code highlighting in diff views
+- **Visual Change Indicators** - Clear green/red highlighting for additions and deletions
+
 ### 🔌 **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

build/open-vsix/build.sh

@@ -0,0 +1,71 @@
+#!/bin/bash
+
+# Build script for Open VSIX version
+# This applies Open VSIX-specific changes, builds the package, then reverts
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+VERSION="1.1.0"
+OUTPUT_NAME="vsix-claude-code-chat-${VERSION}.vsix"
+
+echo "Building Open VSIX version ${VERSION}..."
+
+# Backup original files to build folder
+cp package.json "${SCRIPT_DIR}/package.json.backup"
+cp src/extension.ts "${SCRIPT_DIR}/extension.ts.backup"
+
+# Backup original icon.png if it exists
+if [ -f "icon.png" ]; then
+    mv icon.png "${SCRIPT_DIR}/icon.png.backup"
+fi
+
+# Copy Open VSIX icon
+cp "${SCRIPT_DIR}/icon.png" icon.png
+echo "Copied Open VSIX icon"
+
+# Temporarily remove icon-bubble.png (not needed for Open VSIX)
+if [ -f "icon-bubble.png" ]; then
+    mv icon-bubble.png "${SCRIPT_DIR}/icon-bubble.png.backup"
+fi
+
+# Apply Open VSIX changes to package.json
+sed -i.bak 's/"displayName": "Chat for Claude Code"/"displayName": "Claude Code Chat"/' package.json
+sed -i.bak 's/"icon": "icon-bubble.png"/"icon": "icon.png"/g' package.json
+rm -f package.json.bak
+
+# Apply Open VSIX changes to extension.ts
+sed -i.bak "s/icon-bubble.png/icon.png/g" src/extension.ts
+rm -f src/extension.ts.bak
+
+echo "Applied Open VSIX changes to package.json and extension.ts"
+
+# Compile TypeScript
+echo "Compiling TypeScript..."
+npm run compile
+
+# Build the VSIX
+echo "Building VSIX package..."
+vsce package --out "${OUTPUT_NAME}"
+
+# Restore original files from build folder
+mv "${SCRIPT_DIR}/package.json.backup" package.json
+mv "${SCRIPT_DIR}/extension.ts.backup" src/extension.ts
+
+# Restore original icon
+rm -f icon.png
+if [ -f "${SCRIPT_DIR}/icon.png.backup" ]; then
+    mv "${SCRIPT_DIR}/icon.png.backup" icon.png
+fi
+
+# Restore icon-bubble.png
+if [ -f "${SCRIPT_DIR}/icon-bubble.png.backup" ]; then
+    mv "${SCRIPT_DIR}/icon-bubble.png.backup" icon-bubble.png
+fi
+
+# Recompile with original extension.ts
+echo "Recompiling with original files..."
+npm run compile
+
+echo "Restored original files"
+echo "Built: ${OUTPUT_NAME}"

package.json

@@ -2,7 +2,7 @@
   "name": "claude-code-chat",
   "displayName": "Chat for Claude Code",
   "description": "Beautiful Claude Code Chat Interface for VS Code",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "publisher": "AndrePimenta",
   "author": "Andre Pimenta",
   "repository": {

src/extension.ts

@@ -463,11 +463,8 @@ class ClaudeChatProvider {
 		const configThink = vscode.workspace.getConfiguration('claudeCodeChat');
 		const thinkingIntensity = configThink.get<string>('thinking.intensity', 'think');
 
-		// Prepend mode instructions if enabled
+		// Prepend thinking mode instructions if enabled
 		let actualMessage = message;
-		if (planMode) {
-			actualMessage = 'PLAN FIRST FOR THIS MESSAGE ONLY: Plan first before making any changes. Show me in detail what you will change and wait for my explicit approval in a separate message before proceeding. Do not implement anything until I confirm. This planning requirement applies ONLY to this current message. \n\n' + message;
-		}
 		if (thinkingMode) {
 			let thinkingPrompt = '';
 			const thinkingMesssage = ' THROUGH THIS STEP BY STEP: \n'
@@ -548,6 +545,11 @@ class ClaudeChatProvider {
 			args.push('--mcp-config', this.convertToWSLPath(mcpConfigPath));
 		}
 
+		// Add plan mode if enabled
+		if (planMode) {
+			args.push('--permission-mode', 'plan');
+		}
+
 		// Add model selection if not using default
 		if (this._selectedModel && this._selectedModel !== 'default') {
 			args.push('--model', this._selectedModel);
@@ -2714,17 +2716,29 @@ class ClaudeChatProvider {
 	}
 
 	private _openUsageTerminal(usageType: string): void {
+		// Get WSL configuration
+		const config = vscode.workspace.getConfiguration('claudeCodeChat');
+		const wslEnabled = config.get<boolean>('wsl.enabled', false);
+		const wslDistro = config.get<string>('wsl.distro', 'Ubuntu');
+
 		const terminal = vscode.window.createTerminal({
 			name: 'Claude Usage',
 			location: { viewColumn: vscode.ViewColumn.One }
 		});
 
+		let command: string;
 		if (usageType === 'plan') {
 			// Plan users get live usage view
-			terminal.sendText('npx -y ccusage blocks --live');
+			command = 'npx -y ccusage blocks --live';
 		} else {
 			// API users get recent usage history
-			terminal.sendText('npx -y ccusage blocks --recent --order desc');
+			command = 'npx -y ccusage blocks --recent --order desc';
+		}
+
+		if (wslEnabled) {
+			terminal.sendText(`wsl -d ${wslDistro} bash -ic "${command}"`);
+		} else {
+			terminal.sendText(command);
 		}
 
 		terminal.show();

src/script.ts

@@ -1613,6 +1613,8 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			if (main) main.style.display = 'flex';
 			if (progress) progress.style.display = 'none';
 			if (success) success.style.display = 'none';
+
+			sendStats('Install modal shown');
 		}
 
 		function hideInstallModal() {
@@ -1620,6 +1622,8 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 		}
 
 		function startInstallation() {
+			sendStats('Install started');
+
 			// Hide main content, show progress
 			document.getElementById('installMain').style.display = 'none';
 			document.getElementById('installProgress').style.display = 'flex';
@@ -1637,9 +1641,11 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			successEl.style.display = 'flex';
 
 			if (success) {
+				sendStats('Install success');
 				successEl.querySelector('.install-success-text').textContent = 'Installed';
 				successEl.querySelector('.install-success-hint').textContent = 'Send a message to get started';
 			} else {
+				sendStats('Install failed');
 				// Show error state
 				successEl.querySelector('.install-check').style.display = 'none';
 				successEl.querySelector('.install-success-text').textContent = 'Installation failed';