d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-13 21:59:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

plan first and thinking mode initial implementation

Browse Source
This commit is contained in:
andrepimenta
2025-06-20 15:52:38 +01:00
parent 49ea9cca66
commit a0286f017e
3 changed files with 156 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/extension.ts
View File

@@ -181,7 +181,7 @@ class ClaudeChatProvider {
message => { message => {
switch (message.type) { switch (message.type) {
case 'sendMessage': case 'sendMessage':
this._sendMessageToClaude(message.text); this._sendMessageToClaude(message.text, message.planMode, message.thinkingMode);
return; return;
case 'newSession': case 'newSession':
this._newSession(); this._newSession();
@@ -259,11 +259,20 @@ class ClaudeChatProvider {
}, 100); }, 100);
} }
private async _sendMessageToClaude(message: string) { private async _sendMessageToClaude(message: string, planMode?: boolean, thinkingMode?: boolean) {
const workspaceFolder = vscode.workspace.workspaceFolders?.[0]; const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
const cwd = workspaceFolder ? workspaceFolder.uri.fsPath : process.cwd(); 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({ this._sendAndSaveMessage({
type: 'userInput', type: 'userInput',
data: message data: message
@@ -353,9 +362,9 @@ class ClaudeChatProvider {
// Store process reference for potential termination // Store process reference for potential termination
this._currentClaudeProcess = claudeProcess; 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) { if (claudeProcess.stdin) {
claudeProcess.stdin.write(message + '\n'); claudeProcess.stdin.write(actualMessage + '\n');
claudeProcess.stdin.end(); claudeProcess.stdin.end();
} }

59
src/ui-styles.ts
View File

@@ -433,10 +433,67 @@ const styles = `
padding: 10px; padding: 10px;
border-top: 1px solid var(--vscode-panel-border); border-top: 1px solid var(--vscode-panel-border);
background-color: var(--vscode-panel-background); 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; display: flex;
gap: 10px; gap: 10px;
align-items: flex-end; align-items: flex-end;
position: relative;
} }
.textarea-wrapper { .textarea-wrapper {

38
src/ui.ts
View File

@@ -38,6 +38,17 @@ const html = `<!DOCTYPE html>
<div class="chat-container" id="chatContainer"> <div class="chat-container" id="chatContainer">
<div class="messages" id="messages"></div> <div class="messages" id="messages"></div>
<div class="input-container" id="inputContainer"> <div class="input-container" id="inputContainer">
<div class="input-modes">
<div class="mode-toggle">
<span>Plan First</span>
<div class="mode-switch" id="planModeSwitch" onclick="togglePlanMode()"></div>
</div>
<div class="mode-toggle">
<span>Thinking Mode</span>
<div class="mode-switch" id="thinkingModeSwitch" onclick="toggleThinkingMode()"></div>
</div>
</div>
<div class="textarea-container">
<div class="textarea-wrapper"> <div class="textarea-wrapper">
<textarea class="input-field" id="messageInput" placeholder="Type your message to Claude Code..." rows="1"></textarea> <textarea class="input-field" id="messageInput" placeholder="Type your message to Claude Code..." rows="1"></textarea>
<div class="input-controls"> <div class="input-controls">
@@ -91,6 +102,7 @@ const html = `<!DOCTYPE html>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="status ready" id="status"> <div class="status ready" id="status">
<div class="status-indicator"></div> <div class="status-indicator"></div>
@@ -299,6 +311,8 @@ const html = `<!DOCTYPE html>
let isProcessRunning = false; let isProcessRunning = false;
let filteredFiles = []; let filteredFiles = [];
let selectedFileIndex = -1; let selectedFileIndex = -1;
let planModeEnabled = false;
let thinkingModeEnabled = false;
function addMessage(content, type = 'claude') { function addMessage(content, type = 'claude') {
const messageDiv = document.createElement('div'); const messageDiv = document.createElement('div');
@@ -560,13 +574,35 @@ const html = `<!DOCTYPE html>
if (text) { if (text) {
vscode.postMessage({ vscode.postMessage({
type: 'sendMessage', type: 'sendMessage',
text: text text: text,
planMode: planModeEnabled,
thinkingMode: thinkingModeEnabled
}); });
messageInput.value = ''; 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 totalCost = 0;
let totalTokensInput = 0; let totalTokensInput = 0;