feat(ui): Persist Plan First and Thinking Mode toggle states

Add persistence for toggle button states across VS Code restarts.

Changes:
- extension.ts: Add _planModeEnabled and _thinkingModeEnabled instance variables
- extension.ts: Load/save toggle states from/to globalState
- extension.ts: Include toggle states in _sendCurrentSettings()
- extension.ts: Handle toggle state updates in _updateSettings()
- script.ts: Send updateSettings message on toggle change
- script.ts: Restore toggle UI states when receiving settingsData

Previously, Plan First and Thinking Mode toggles reset to off when
reopening the chat panel or restarting VS Code. Now these preferences
are persisted using VS Code's globalState API.

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

Author: doscode-kr

src/extension.ts

@@ -153,6 +153,8 @@ class ClaudeChatProvider {
 	private _selectedModel: string = 'default'; // Default model
 	private _isProcessing: boolean | undefined;
 	private _draftMessage: string = '';
+	private _planModeEnabled: boolean = false;
+	private _thinkingModeEnabled: boolean = false;
 
 	constructor(
 		private readonly _extensionUri: vscode.Uri,
@@ -173,6 +175,10 @@ class ClaudeChatProvider {
 		// Load cached subscription type (will be refreshed on first message)
 		this._subscriptionType = this._context.globalState.get('claude.subscriptionType');
 
+		// Load saved toggle states
+		this._planModeEnabled = this._context.globalState.get('claude.planModeEnabled', false);
+		this._thinkingModeEnabled = this._context.globalState.get('claude.thinkingModeEnabled', false);
+
 		// Resume session from latest conversation
 		const latestConversation = this._getLatestConversation();
 		this._currentSessionId = latestConversation?.sessionId;
@@ -2598,7 +2604,9 @@ class ClaudeChatProvider {
 			'wsl.distro': config.get<string>('wsl.distro', 'Ubuntu'),
 			'wsl.nodePath': config.get<string>('wsl.nodePath', '/usr/bin/node'),
 			'wsl.claudePath': config.get<string>('wsl.claudePath', '/usr/local/bin/claude'),
-			'permissions.yoloMode': config.get<boolean>('permissions.yoloMode', false)
+			'permissions.yoloMode': config.get<boolean>('permissions.yoloMode', false),
+			'planModeEnabled': this._planModeEnabled,
+			'thinkingModeEnabled': this._thinkingModeEnabled
 		};
 
 		this._postMessage({
@@ -2634,7 +2642,15 @@ class ClaudeChatProvider {
 
 		try {
 			for (const [key, value] of Object.entries(settings)) {
-				if (key === 'permissions.yoloMode') {
+				if (key === 'planModeEnabled') {
+					// Save to globalState for persistence across sessions
+					this._planModeEnabled = value;
+					await this._context.globalState.update('claude.planModeEnabled', value);
+				} else if (key === 'thinkingModeEnabled') {
+					// Save to globalState for persistence across sessions
+					this._thinkingModeEnabled = value;
+					await this._context.globalState.update('claude.thinkingModeEnabled', value);
+				} else if (key === 'permissions.yoloMode') {
 					// YOLO mode is workspace-specific
 					await config.update(key, value, vscode.ConfigurationTarget.Workspace);
 				} else {

src/script.ts

@@ -861,15 +861,20 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			} else {
 				switchElement.classList.remove('active');
 			}
+			// Save state to extension for persistence
+			vscode.postMessage({
+				type: 'updateSettings',
+				settings: { planModeEnabled: planModeEnabled }
+			});
 		}
 
 		function toggleThinkingMode() {
 			thinkingModeEnabled = !thinkingModeEnabled;
-			
+
 			if (thinkingModeEnabled) {
 				sendStats('Thinking mode enabled');
 			}
-			
+
 			const switchElement = document.getElementById('thinkingModeSwitch');
 			const toggleLabel = document.getElementById('thinkingModeLabel');
 			if (thinkingModeEnabled) {
@@ -883,6 +888,11 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 					toggleLabel.textContent = 'Thinking Mode';
 				}
 			}
+			// Save state to extension for persistence
+			vscode.postMessage({
+				type: 'updateSettings',
+				settings: { thinkingModeEnabled: thinkingModeEnabled }
+			});
 		}
 
 
@@ -3440,7 +3450,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 				const thinkingIntensity = message.data['thinking.intensity'] || 'think';
 				const intensityValues = ['think', 'think-hard', 'think-harder', 'ultrathink'];
 				const sliderValue = intensityValues.indexOf(thinkingIntensity);
-				
+
 				// Update thinking intensity modal if it exists
 				const thinkingIntensitySlider = document.getElementById('thinkingIntensitySlider');
 				if (thinkingIntensitySlider) {
@@ -3450,18 +3460,53 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 					// Update toggle name even if modal isn't open
 					updateThinkingModeToggleName(sliderValue >= 0 ? sliderValue : 0);
 				}
-				
+
 				document.getElementById('wsl-enabled').checked = message.data['wsl.enabled'] || false;
 				document.getElementById('wsl-distro').value = message.data['wsl.distro'] || 'Ubuntu';
 				document.getElementById('wsl-node-path').value = message.data['wsl.nodePath'] || '/usr/bin/node';
 				document.getElementById('wsl-claude-path').value = message.data['wsl.claudePath'] || '/usr/local/bin/claude';
 				document.getElementById('yolo-mode').checked = message.data['permissions.yoloMode'] || false;
-				
+
 				// Update yolo warning visibility
 				updateYoloWarning();
-				
+
 				// Show/hide WSL options
 				document.getElementById('wslOptions').style.display = message.data['wsl.enabled'] ? 'block' : 'none';
+
+				// Restore Plan Mode toggle state
+				if (message.data.planModeEnabled !== undefined) {
+					planModeEnabled = message.data.planModeEnabled;
+					const planSwitch = document.getElementById('planModeSwitch');
+					if (planSwitch) {
+						if (planModeEnabled) {
+							planSwitch.classList.add('active');
+						} else {
+							planSwitch.classList.remove('active');
+						}
+					}
+				}
+
+				// Restore Thinking Mode toggle state
+				if (message.data.thinkingModeEnabled !== undefined) {
+					thinkingModeEnabled = message.data.thinkingModeEnabled;
+					const thinkingSwitch = document.getElementById('thinkingModeSwitch');
+					const thinkingLabel = document.getElementById('thinkingModeLabel');
+					if (thinkingSwitch) {
+						if (thinkingModeEnabled) {
+							thinkingSwitch.classList.add('active');
+							// Update the label to show current intensity
+							if (thinkingLabel) {
+								const intensityNames = ['Thinking', 'Think Hard', 'Think Harder', 'Ultrathink'];
+								thinkingLabel.textContent = intensityNames[sliderValue >= 0 ? sliderValue : 0];
+							}
+						} else {
+							thinkingSwitch.classList.remove('active');
+							if (thinkingLabel) {
+								thinkingLabel.textContent = 'Thinking Mode';
+							}
+						}
+					}
+				}
 			}
 
 			if (message.type === 'platformInfo') {