feat: add Claude Code mode toggle button with custom SVG icon

- Add mode cycling button next to image button in input area
- Send Shift+Tab key sequence to toggle Claude Code modes (auto-accept/plan/etc)
- Beautiful custom SVG icon with circular arrows representing mode switching
- Theme-adaptive icon colors for light/dark VSCode themes
- Command palette integration: "Claude Code: Toggle Mode (Shift+Tab)"
- Proper error handling for inactive terminals
- Consistent styling with existing UI buttons

Features:
- UI button in input-bottom-actions for easy access
- Custom SVG icon with professional design
- Automatic theme color adaptation
- Command palette access for keyboard users
- Terminal validation before sending commands

🤖 Generated with Claude Code

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

Author: Quang Tran Minh

media/input.js

@@ -13,6 +13,7 @@
   const imageInputElement = document.getElementById('imageInput');
   const imagePreviewContainer = document.getElementById('imagePreviewContainer');
   const problemPreviewContainer = document.getElementById('problemPreviewContainer');
+  const modeToggleButtonElement = document.getElementById('modeToggleButton');
 
   // RegExp for detecting @ mentions
   const mentionRegex = /@((?:\/|\w+:\/\/)[^\s]+?|[a-f0-9]{7,40}\b|problems\b|git-changes\b)(?=[.,;:!?]?(?=[\s\r\n]|$))/;
@@ -1396,6 +1397,16 @@
     });
   }
 
+  // Event listener for mode toggle button
+  if (modeToggleButtonElement) {
+    modeToggleButtonElement.addEventListener('click', () => {
+      // Send mode toggle command to extension
+      vscode.postMessage({
+        command: 'toggleMode'
+      });
+    });
+  }
+
   // Handle drag and drop for files/folders and images
   if (messageInputElement) {
     const inputWrapper = document.querySelector('.input-wrapper');

media/styles.css

@@ -1223,7 +1223,8 @@ button svg {
 }
 
 .input-bottom-actions .context-button,
-.input-bottom-actions .image-button {
+.input-bottom-actions .image-button,
+.input-bottom-actions .mode-toggle-button {
   width: 28px;
   height: 28px;
   padding: 6px;
@@ -1241,7 +1242,8 @@ button svg {
 }
 
 .input-bottom-actions .context-button:hover,
-.input-bottom-actions .image-button:hover {
+.input-bottom-actions .image-button:hover,
+.input-bottom-actions .mode-toggle-button:hover {
   opacity: 1;
   background-color: var(--vscode-list-hoverBackground);
 }
@@ -1251,6 +1253,16 @@ button svg {
   font-size: 16px;
 }
 
+.input-bottom-actions .mode-toggle-button {
+  font-size: 18px;
+  font-weight: normal;
+}
+
+.input-bottom-actions .mode-toggle-button img {
+  width: 16px;
+  height: 16px;
+}
+
 .input-bottom-actions .image-button svg,
 .input-bottom-actions .image-button img {
   width: 14px;
@@ -1259,11 +1271,14 @@ button svg {
 
 /* Apply filter to make the image match the text color */
 .vscode-dark .input-bottom-actions .image-button img,
-.vscode-high-contrast .input-bottom-actions .image-button img {
+.vscode-high-contrast .input-bottom-actions .image-button img,
+.vscode-dark .input-bottom-actions .mode-toggle-button img,
+.vscode-high-contrast .input-bottom-actions .mode-toggle-button img {
   filter: brightness(0) saturate(100%) invert(100%);
 }
 
-.vscode-light .input-bottom-actions .image-button img {
+.vscode-light .input-bottom-actions .image-button img,
+.vscode-light .input-bottom-actions .mode-toggle-button img {
   filter: brightness(0) saturate(100%);
 }
 

package.json

@@ -2,7 +2,7 @@
   "name": "claude-code-extension",
   "displayName": "Claude Code Assistant for VSCode",
   "description": "Unofficial integration of Anthropic's Claude Code AI assistant into VSCode",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "publisher": "codeflow-studio",
   "icon": "resources/claude-icon.png",
   "repository": {
@@ -53,6 +53,10 @@
       {
         "command": "claude-code-extension.addSelectionToInput",
         "title": "Add to Claude Code Input"
+      },
+      {
+        "command": "claude-code-extension.toggleMode",
+        "title": "Claude Code: Toggle Mode (Shift+Tab)"
       }
     ],
     "viewsContainers": {

resources/mode-toggle.svg

@@ -422,6 +422,20 @@ export async function activate(context: vscode.ExtensionContext) {
 
   context.subscriptions.push(addSelectionToInputCommand);
 
+  // Register command to toggle Claude Code mode
+  const toggleModeCommand = vscode.commands.registerCommand('claude-code-extension.toggleMode', async () => {
+    // Check if provider is initialized
+    if (!claudeTerminalInputProvider) {
+      vscode.window.showErrorMessage('Claude terminal input provider not initialized');
+      return;
+    }
+
+    // Call the public toggle mode method
+    await claudeTerminalInputProvider.toggleMode();
+  });
+
+  context.subscriptions.push(toggleModeCommand);
+
   // Register Claude Code Action Provider for Quick Fix menu
   const claudeCodeActionProvider = new ClaudeCodeActionProvider(claudeTerminalInputProvider);
   context.subscriptions.push(

src/extension.ts

@@ -202,6 +202,10 @@ export class ClaudeTerminalInputProvider implements vscode.WebviewViewProvider {
           case "launchClaudeHistory":
             this._handleLaunchClaudeHistory();
             return;
+            
+          case "toggleMode":
+            this._handleModeToggle();
+            return;
         }
       },
       undefined,
@@ -1023,6 +1027,41 @@ export class ClaudeTerminalInputProvider implements vscode.WebviewViewProvider {
     }
   }
 
+  /**
+   * Public method to toggle Claude Code mode (exposed for command palette access)
+   */
+  public async toggleMode(): Promise<void> {
+    await this._handleModeToggle();
+  }
+
+  /**
+   * Handles mode toggle by sending Shift+Tab to Claude Code terminal
+   */
+  private async _handleModeToggle() {
+    try {
+      console.log('Toggling Claude Code mode (Shift+Tab)');
+      
+      // Check if terminal is available
+      if (this._isTerminalClosed || !this._terminal) {
+        vscode.window.showWarningMessage('Claude Code terminal is not active. Please start Claude Code first.');
+        return;
+      }
+      
+      // Show the terminal in the background (preserves focus)
+      this._terminal?.show(true);
+      
+      // Send Shift+Tab key sequence to toggle mode
+      // \x1b[Z is the escape sequence for Shift+Tab
+      this._terminal?.sendText('\x1b[Z', false);
+      
+      console.log('Mode toggle command sent to Claude Code terminal');
+      
+    } catch (error) {
+      console.error('Error toggling Claude mode:', error);
+      vscode.window.showErrorMessage(`Failed to toggle Claude mode: ${error}`);
+    }
+  }
+
   private _getHtmlForWebview(webview: vscode.Webview) {
     // Generate nonce for script security
     const nonce = getNonce();
@@ -1043,6 +1082,9 @@ export class ClaudeTerminalInputProvider implements vscode.WebviewViewProvider {
     const imageIconPath = webview.asWebviewUri(
       vscode.Uri.joinPath(this._extensionUri, "resources", "image-svgrepo-com.svg")
     );
+    const modeToggleIconPath = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionUri, "resources", "mode-toggle.svg")
+    );
     const codiconsCss = webview.asWebviewUri(
       vscode.Uri.joinPath(this._extensionUri, "media", "codicon.css")
     );
@@ -1156,6 +1198,9 @@ export class ClaudeTerminalInputProvider implements vscode.WebviewViewProvider {
               <button id="imageButton" title="Attach image" class="image-button">
                 <img src="${imageIconPath}" width="20" height="20" alt="Attach Image" />
               </button>
+              <button id="modeToggleButton" title="Toggle Claude Mode (Shift+Tab)" class="mode-toggle-button">
+                <img src="${modeToggleIconPath}" width="16" height="16" alt="Toggle Mode" />
+              </button>
             </div>
             <div id="contextMenuContainer" class="context-menu-container" style="display: none;"></div>
             <div id="imagePreviewContainer" class="image-preview-container"></div>