diff --git a/src/extension.ts b/src/extension.ts index e26c198..b1c2397 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -181,7 +181,7 @@ class ClaudeChatProvider { message => { switch (message.type) { case 'sendMessage': - this._sendMessageToClaude(message.text); + this._sendMessageToClaude(message.text, message.planMode, message.thinkingMode); return; case 'newSession': this._newSession(); @@ -259,11 +259,20 @@ class ClaudeChatProvider { }, 100); } - private async _sendMessageToClaude(message: string) { + private async _sendMessageToClaude(message: string, planMode?: boolean, thinkingMode?: boolean) { const workspaceFolder = vscode.workspace.workspaceFolders?.[0]; const cwd = workspaceFolder ? workspaceFolder.uri.fsPath : process.cwd(); - // Show user input in chat and save to conversation + // Prepend mode instructions if enabled + let actualMessage = message; + if (planMode && !message.toLowerCase().includes('plan first')) { + actualMessage = 'PLAN FIRST BEFORE MAKING ANY CHANGES, SHOW ME IN DETAIL WHAT YOU WILL CHANGE. DONT PROCEED BEFORE I ACCEPT IN A DIFFERENT MESSAGE: \n' + message; + } + if (thinkingMode && !actualMessage.toLowerCase().includes('think through')) { + actualMessage = 'THINK THROUGH THIS STEP BY STEP: \n' + actualMessage; + } + + // Show original user input in chat and save to conversation (without mode prefixes) this._sendAndSaveMessage({ type: 'userInput', data: message @@ -353,9 +362,9 @@ class ClaudeChatProvider { // Store process reference for potential termination this._currentClaudeProcess = claudeProcess; - // Send the message to Claude's stdin + // Send the message to Claude's stdin (with mode prefixes if enabled) if (claudeProcess.stdin) { - claudeProcess.stdin.write(message + '\n'); + claudeProcess.stdin.write(actualMessage + '\n'); claudeProcess.stdin.end(); } diff --git a/src/ui-styles.ts b/src/ui-styles.ts index 821fa32..eac7353 100644 --- a/src/ui-styles.ts +++ b/src/ui-styles.ts @@ -433,10 +433,67 @@ const styles = ` padding: 10px; border-top: 1px solid var(--vscode-panel-border); background-color: var(--vscode-panel-background); + display: flex; + flex-direction: column; + position: relative; + } + + .input-modes { + display: flex; + gap: 16px; + align-items: center; + padding-bottom: 5px; + font-size: 9.5px; + } + + .mode-toggle { + display: flex; + align-items: center; + gap: 6px; + color: var(--vscode-foreground); + opacity: 0.8; + transition: opacity 0.2s ease; + } + + .mode-toggle:hover { + opacity: 1; + } + + .mode-switch { + position: relative; + width: 28px; + height: 16px; + background-color: var(--vscode-panel-border); + border-radius: 8px; + cursor: pointer; + transition: background-color 0.2s ease; + } + + .mode-switch.active { + background-color: var(--vscode-button-background); + } + + .mode-switch::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 12px; + height: 12px; + background-color: var(--vscode-foreground); + border-radius: 50%; + transition: transform 0.2s ease; + } + + .mode-switch.active::after { + transform: translateX(12px); + background-color: var(--vscode-button-foreground); + } + + .textarea-container { display: flex; gap: 10px; align-items: flex-end; - position: relative; } .textarea-wrapper { diff --git a/src/ui.ts b/src/ui.ts index 2dffe32..1bc4c10 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -38,54 +38,66 @@ const html = `
-
- -
-
- + +
+
+ + - -
-
- - - + + +
@@ -299,6 +311,8 @@ const html = ` let isProcessRunning = false; let filteredFiles = []; let selectedFileIndex = -1; + let planModeEnabled = false; + let thinkingModeEnabled = false; function addMessage(content, type = 'claude') { const messageDiv = document.createElement('div'); @@ -560,13 +574,35 @@ const html = ` if (text) { vscode.postMessage({ type: 'sendMessage', - text: text + text: text, + planMode: planModeEnabled, + thinkingMode: thinkingModeEnabled }); messageInput.value = ''; } } + function togglePlanMode() { + planModeEnabled = !planModeEnabled; + const switchElement = document.getElementById('planModeSwitch'); + if (planModeEnabled) { + switchElement.classList.add('active'); + } else { + switchElement.classList.remove('active'); + } + } + + function toggleThinkingMode() { + thinkingModeEnabled = !thinkingModeEnabled; + const switchElement = document.getElementById('thinkingModeSwitch'); + if (thinkingModeEnabled) { + switchElement.classList.add('active'); + } else { + switchElement.classList.remove('active'); + } + } + let totalCost = 0; let totalTokensInput = 0;