Add install modal for users without Claude Code CLI

Shows a clean modal when Claude Code is not installed, with one-click
installation that auto-detects platform (npm if node>=18, otherwise
curl/PowerShell). Runs silently in background with progress indicator.

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

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

src/extension.ts

@@ -335,6 +335,9 @@ class ClaudeChatProvider {
 			case 'dismissWSLAlert':
 				this._dismissWSLAlert();
 				return;
+			case 'runInstallCommand':
+				this._runInstallCommand();
+				return;
 			case 'openFile':
 				this._openFileInEditor(message.filePath);
 				return;
@@ -756,9 +759,8 @@ class ClaudeChatProvider {
 
 			// Check if claude command is not installed
 			if (error.message.includes('ENOENT') || error.message.includes('command not found')) {
-				this._sendAndSaveMessage({
+				this._postMessage({
-					type: 'error',
+					type: 'showInstallModal'
-					data: 'Install claude code first: https://www.anthropic.com/claude-code'
 				});
 			} else {
 				this._sendAndSaveMessage({
@@ -2728,6 +2730,48 @@ class ClaudeChatProvider {
 		terminal.show();
 	}
 
+	private _runInstallCommand(): void {
+		const { exec } = require('child_process');
+
+		// Check if npm exists and node >= 18
+		exec('node --version', { shell: true }, (nodeErr: Error | null, nodeStdout: string) => {
+			let useNpm = false;
+
+			if (!nodeErr && nodeStdout) {
+				// Parse version (e.g., "v18.17.0" -> 18)
+				const match = nodeStdout.trim().match(/^v(\d+)/);
+				if (match && parseInt(match[1], 10) >= 18) {
+					useNpm = true;
+				}
+			}
+
+			let command: string;
+			if (useNpm) {
+				command = 'npm install -g @anthropic-ai/claude-code';
+			} else if (process.platform === 'win32') {
+				command = 'irm https://claude.ai/install.ps1 | iex';
+			} else {
+				command = 'curl -fsSL https://claude.ai/install.sh | sh';
+			}
+
+			// Run installation silently in the background
+			exec(command, { shell: true }, (error: Error | null, stdout: string, stderr: string) => {
+				if (error) {
+					this._postMessage({
+						type: 'installComplete',
+						success: false,
+						error: stderr || error.message
+					});
+				} else {
+					this._postMessage({
+						type: 'installComplete',
+						success: true
+					});
+				}
+			});
+		});
+	}
+
 	private _executeSlashCommand(command: string): void {
 		// Handle /compact in chat instead of spawning a terminal
 		if (command === 'compact') {

src/script.ts

@@ -1602,6 +1602,51 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			document.getElementById('slashCommandsModal').style.display = 'none';
 		}
 
+		// Install modal functions
+		function showInstallModal() {
+			const modal = document.getElementById('installModal');
+			const main = document.getElementById('installMain');
+			const progress = document.getElementById('installProgress');
+			const success = document.getElementById('installSuccess');
+
+			if (modal) modal.style.display = 'flex';
+			if (main) main.style.display = 'flex';
+			if (progress) progress.style.display = 'none';
+			if (success) success.style.display = 'none';
+		}
+
+		function hideInstallModal() {
+			document.getElementById('installModal').style.display = 'none';
+		}
+
+		function startInstallation() {
+			// Hide main content, show progress
+			document.getElementById('installMain').style.display = 'none';
+			document.getElementById('installProgress').style.display = 'flex';
+
+			// Extension handles platform detection and command selection
+			vscode.postMessage({
+				type: 'runInstallCommand'
+			});
+		}
+
+		function handleInstallComplete(success, error) {
+			document.getElementById('installProgress').style.display = 'none';
+
+			const successEl = document.getElementById('installSuccess');
+			successEl.style.display = 'flex';
+
+			if (success) {
+				successEl.querySelector('.install-success-text').textContent = 'Installed';
+				successEl.querySelector('.install-success-hint').textContent = 'Send a message to get started';
+			} else {
+				// Show error state
+				successEl.querySelector('.install-check').style.display = 'none';
+				successEl.querySelector('.install-success-text').textContent = 'Installation failed';
+				successEl.querySelector('.install-success-hint').textContent = error || 'Try installing manually from claude.ai/download';
+			}
+		}
+
 		// Thinking intensity modal functions
 		function showThinkingIntensityModal() {
 			// Request current settings from VS Code first
@@ -2251,7 +2296,20 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 					addMessage('🔐 Login Required\\n\\nPlease login with your Claude plan (Pro/Max) or API key.\\nA terminal has been opened - follow the login process there.\\n\\nAfter logging in, come back to this chat to continue.', 'error');
 					updateStatus('Login Required', 'error');
 					break;
-					
+
+				case 'showInstallModal':
+					sendStats('Claude not installed');
+					showInstallModal();
+					updateStatus('Claude Code not installed', 'error');
+					break;
+
+				case 'installComplete':
+					handleInstallComplete(message.success, message.error);
+					if (message.success) {
+						updateStatus('Ready', 'success');
+					}
+					break;
+
 				case 'showRestoreOption':
 					showRestoreContainer(message.data);
 					break;

src/ui-styles.ts

@@ -3026,6 +3026,218 @@ const styles = `
         }
     }
 
+    /* Install Modal Styles */
+    .install-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .install-modal-backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(2px);
+    }
+
+    .install-modal-content {
+        position: relative;
+        background: var(--vscode-editor-background);
+        border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+        border-radius: 12px;
+        width: 320px;
+        padding: 32px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        animation: installFadeIn 0.2s ease-out;
+    }
+
+    @keyframes installFadeIn {
+        from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+        to { opacity: 1; transform: scale(1) translateY(0); }
+    }
+
+    .install-close-btn {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 28px;
+        height: 28px;
+        background: none;
+        border: none;
+        color: var(--vscode-descriptionForeground);
+        cursor: pointer;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.6;
+        transition: all 0.15s;
+    }
+
+    .install-close-btn:hover {
+        background: var(--vscode-toolbar-hoverBackground);
+        opacity: 1;
+    }
+
+    .install-body {
+        text-align: center;
+    }
+
+    .install-main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .install-icon-wrapper {
+        width: 64px;
+        height: 64px;
+        border-radius: 16px;
+        background: var(--vscode-button-background);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .install-icon {
+        color: var(--vscode-button-foreground);
+    }
+
+    .install-text {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .install-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--vscode-foreground);
+    }
+
+    .install-desc {
+        margin: 0;
+        font-size: 13px;
+        color: var(--vscode-descriptionForeground);
+        line-height: 1.4;
+    }
+
+    .install-btn {
+        width: 100%;
+        padding: 12px 24px;
+        font-size: 14px;
+        font-weight: 500;
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .install-btn:hover {
+        background: var(--vscode-button-hoverBackground);
+        transform: translateY(-1px);
+    }
+
+    .install-btn:active {
+        transform: translateY(0);
+    }
+
+    .install-link {
+        font-size: 13px;
+        color: var(--vscode-textLink-foreground);
+        text-decoration: none;
+        opacity: 0.9;
+    }
+
+    .install-link:hover {
+        text-decoration: underline;
+        opacity: 1;
+    }
+
+    .install-progress {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        padding: 20px 0;
+    }
+
+    .install-spinner {
+        width: 32px;
+        height: 32px;
+        border: 2.5px solid var(--vscode-widget-border, var(--vscode-panel-border));
+        border-top-color: var(--vscode-button-background);
+        border-radius: 50%;
+        animation: installSpin 0.8s linear infinite;
+    }
+
+    @keyframes installSpin {
+        to { transform: rotate(360deg); }
+    }
+
+    .install-progress-text {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--vscode-foreground);
+    }
+
+    .install-progress-hint {
+        margin: 0;
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+    }
+
+    .install-success {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        padding: 20px 0;
+    }
+
+    .install-success-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: rgba(78, 201, 176, 0.15);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .install-check {
+        width: 28px;
+        height: 28px;
+        color: var(--vscode-testing-iconPassed, #4ec9b0);
+    }
+
+    .install-success-text {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--vscode-foreground);
+    }
+
+    .install-success-hint {
+        margin: 0;
+        font-size: 13px;
+        color: var(--vscode-descriptionForeground);
+    }
+
 </style>`
 
 export default styles

src/ui.ts

@@ -399,6 +399,57 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
 		</div>
 	</div>
 
+	<!-- Install Claude Code modal -->
+	<div id="installModal" class="install-modal" style="display: none;">
+		<div class="install-modal-backdrop" onclick="hideInstallModal()"></div>
+		<div class="install-modal-content">
+			<button class="install-close-btn" onclick="hideInstallModal()">
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+					<path d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>
+			</button>
+
+			<div class="install-body" id="installBody">
+				<div class="install-main" id="installMain">
+					<div class="install-icon-wrapper">
+						<svg class="install-icon" width="40" height="40" viewBox="0 0 24 24" fill="none">
+							<path d="M21 15V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M12 3V15M12 15L7 10M12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+						</svg>
+					</div>
+					<div class="install-text">
+						<h2 class="install-title">Install Claude Code</h2>
+						<p class="install-desc">The CLI is required to use this extension</p>
+					</div>
+
+					<button class="install-btn" id="installMainBtn" onclick="startInstallation()">
+						Install Now
+					</button>
+
+					<a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" class="install-link">
+						View documentation
+					</a>
+				</div>
+
+				<div class="install-progress" id="installProgress" style="display: none;">
+					<div class="install-spinner"></div>
+					<p class="install-progress-text">Installing Claude Code...</p>
+					<p class="install-progress-hint">This may take a minute</p>
+				</div>
+
+				<div class="install-success" id="installSuccess" style="display: none;">
+					<div class="install-success-icon">
+						<svg class="install-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+							<polyline points="20 6 9 17 4 12"></polyline>
+						</svg>
+					</div>
+					<p class="install-success-text">Installation Complete</p>
+					<p class="install-success-hint">Send a message to get started</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<!-- Thinking intensity modal -->
 	<div id="thinkingIntensityModal" class="tools-modal" style="display: none;">
 		<div class="tools-modal-content" style="width: 450px;">