Modify icon and name

Remove maxlength limit for custom command prompt textarea

.vscodeignore

@@ -11,3 +11,4 @@ vsc-extension-quickstart.md
 **/.vscode-test.*
 backup
 .claude
+claude-code-chat-permissions-mcp/**

CHANGELOG.md

@@ -4,6 +4,63 @@ All notable changes to the "claude-code-chat" extension will be documented in th
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [1.0.7] - 2025-10-01
+
+### 🚀 Features Added
+- **Slash Commands Update**: Added 4 new slash commands to the commands modal
+  - `/add-dir` - Add additional working directories
+  - `/agents` - Manage custom AI subagents for specialized tasks
+  - `/rewind` - Rewind the conversation and/or code
+  - `/usage` - Show plan usage limits and rate limit status (subscription plans only)
+
+### 📚 Documentation Updates
+- Updated slash commands count from 19+ to 23+ built-in commands
+- Enhanced command descriptions for better clarity:
+  - `/config` - Now specifies "Open the Settings interface (Config tab)"
+  - `/cost` - Added note about cost tracking guide for subscription-specific details
+  - `/status` - Expanded description to mention version, model, account, and connectivity
+  - `/terminal-setup` - Added clarification about iTerm2 and VSCode only support
+
+## [1.0.6] - 2025-08-26
+
+### 🐛 Bug Fixes
+- Fixed typo in codebase
+- Removed priority settings that were no longer needed
+
+### 🔧 Technical Improvements
+- Moved script to separate file for better code organization
+
+## [1.0.5] - 2025-07-30
+
+### 🚀 Features Added
+- **MCP Integration**: Added claude-code-chat-permissions-mcp folder for enhanced permission management
+- **Message Persistence**: Save message in text box for better user experience
+- **UI Improvements**: Always display history and new chat options
+- **Input Enhancement**: Removed maxlength limit for custom command prompt textarea
+
+### 🐛 Bug Fixes
+- Fixed new chat functionality
+- Fixed request start time isProcessing issue
+- Fixed close and open conversation behavior
+
+### 🔄 Merged Pull Requests
+- Merged PR #87 from horatio-sans-serif/main
+
+## [1.0.4] - 2025-01-22
+
+### 🐛 Bug Fixes
+- Fixed input text area overflow issue by adding `box-sizing: border-box` to prevent padding from extending beyond container width
+- Fixed command parameter handling for `claude-code-chat.openChat` to properly handle both ViewColumn and Uri parameters from different invocation contexts
+
+### 🔧 Technical Improvements
+- Enhanced `show()` method to accept optional ViewColumn parameter with ViewColumn.Two as default
+- Added proper type checking for command parameters to handle context menu invocations
+- Improved webview panel positioning with flexible column parameter support
+
+### 🎨 UI/UX Improvements
+- Resolved text input container sizing issues that caused visual overflow
+- Better input field styling consistency across different VS Code themes
+
 ## [1.0.0] - 2025-01-15
 
 ### 🚀 Major Features Added

README.md

@@ -20,9 +20,9 @@ Ditch the command line and experience Claude Code like never before. This extens
 💾 **Conversation History** - Automatic conversation history and session management  
 🎨 **VS Code Native** - Claude Code integrated directly into VS Code with native theming and sidebar support  
 🧠 **Plan and Thinking modes** - Plan First and configurable Thinking modes for better results  
-⚡ **Smart File/Image Context and Custom Commands** - Reference any file, copy images or screenshots, and create custom commands  
+⚡ **Smart File/Image Context and Custom Commands** - Reference any file, paste images or screenshots and create custom commands  
 🤖 **Model Selection** - Choose between Opus, Sonnet, or Default based on your needs  
-🐧 **Windows/WSL Support** - Full Windows support and Windows Subsystem for Linux integration and compatibility
+🐧 **Windows/WSL Support** - Full native Windows and WSL support
 
 ![Claude Code Chat 1 0 0](https://github.com/user-attachments/assets/5954a74c-eff7-4205-8482-6a1c9de6e102)
 
@@ -103,7 +103,7 @@ Ditch the command line and experience Claude Code like never before. This extens
 
 ### ⚡ **Slash Commands Integration**
 - **Slash Commands Modal** - Type "/" to access all Claude Code commands instantly
-- **19+ Built-in Commands** - /cost, /status, /config, /help, /memory, /review, and more
+- **23+ Built-in Commands** - /agents, /cost, /config, /memory, /review, and more
 - **Custom Command Support** - Execute any Claude Code command with session context
 - **Session-Aware Execution** - All commands run with current conversation context
 - **Terminal Integration** - Commands open directly in VS Code terminal with WSL support

claude-code-chat-permissions-mcp/mcp-permissions.ts

@@ -0,0 +1,212 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import * as fs from "fs";
+import * as path from "path";
+
+const server = new McpServer({
+  name: "Claude Code Permissions MCP Server",
+  version: "0.0.1",
+});
+
+// Get permissions directory from environment
+const PERMISSIONS_PATH = process.env.CLAUDE_PERMISSIONS_PATH;
+if (!PERMISSIONS_PATH) {
+  console.error("CLAUDE_PERMISSIONS_PATH environment variable not set");
+  process.exit(1);
+}
+
+
+interface WorkspacePermissions {
+  alwaysAllow: {
+    [toolName: string]: boolean | string[]; // true for all, or array of allowed commands/patterns
+  };
+}
+
+function getWorkspacePermissionsPath(): string | null {
+  if (!PERMISSIONS_PATH) return null;
+  return path.join(PERMISSIONS_PATH, 'permissions.json');
+}
+
+function loadWorkspacePermissions(): WorkspacePermissions {
+  const permissionsPath = getWorkspacePermissionsPath();
+  if (!permissionsPath || !fs.existsSync(permissionsPath)) {
+    return { alwaysAllow: {} };
+  }
+
+  try {
+    const content = fs.readFileSync(permissionsPath, 'utf8');
+    return JSON.parse(content);
+  } catch (error) {
+    console.error(`Error loading workspace permissions: ${error}`);
+    return { alwaysAllow: {} };
+  }
+}
+
+
+function isAlwaysAllowed(toolName: string, input: any): boolean {
+  const permissions = loadWorkspacePermissions();
+  const toolPermission = permissions.alwaysAllow[toolName];
+
+  if (!toolPermission) return false;
+
+  // If it's true, always allow
+  if (toolPermission === true) return true;
+
+  // If it's an array, check for specific commands (mainly for Bash)
+  if (Array.isArray(toolPermission)) {
+    if (toolName === 'Bash' && input.command) {
+      const command = input.command.trim();
+      return toolPermission.some(allowedCmd => {
+        // Support exact match or pattern matching
+        if (allowedCmd.includes('*')) {
+          // Handle patterns like "npm i *" to match both "npm i" and "npm i something"
+          const baseCommand = allowedCmd.replace(' *', '');
+          if (command === baseCommand) {
+            return true; // Exact match for base command
+          }
+          // Pattern match for command with arguments
+          const pattern = allowedCmd.replace(/\*/g, '.*');
+          return new RegExp(`^${pattern}$`).test(command);
+        }
+        return command.startsWith(allowedCmd);
+      });
+    }
+  }
+
+  return false;
+}
+
+function generateRequestId(): string {
+  return `req_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+async function requestPermission(tool_name: string, input: any): Promise<{approved: boolean, reason?: string}> {
+  if (!PERMISSIONS_PATH) {
+    console.error("Permissions path not available");
+    return { approved: false, reason: "Permissions path not configured" };
+  }
+
+  // Check if this tool/command is always allowed for this workspace
+  if (isAlwaysAllowed(tool_name, input)) {
+    console.error(`Tool ${tool_name} is always allowed for this workspace`);
+    return { approved: true };
+  }
+
+  const requestId = generateRequestId();
+  const requestFile = path.join(PERMISSIONS_PATH, `${requestId}.request`);
+  const responseFile = path.join(PERMISSIONS_PATH, `${requestId}.response`);
+
+  // Write request file
+  const request = {
+    id: requestId,
+    tool: tool_name,
+    input: input,
+    timestamp: new Date().toISOString()
+  };
+
+  try {
+    fs.writeFileSync(requestFile, JSON.stringify(request, null, 2));
+
+    // Use fs.watch to wait for response file
+    return new Promise<{approved: boolean, reason?: string}>((resolve) => {
+      const timeout = setTimeout(() => {
+        watcher.close();
+        // Clean up request file on timeout
+        if (fs.existsSync(requestFile)) {
+          fs.unlinkSync(requestFile);
+        }
+        console.error(`Permission request ${requestId} timed out`);
+        resolve({ approved: false, reason: "Permission request timed out" });
+      }, 3600000); // 1 hour timeout
+
+      const watcher = fs.watch(PERMISSIONS_PATH, (eventType, filename) => {
+        if (eventType === 'rename' && filename === path.basename(responseFile)) {
+          // Check if file exists (rename event can be for creation or deletion)
+          if (fs.existsSync(responseFile)) {
+            try {
+              const responseContent = fs.readFileSync(responseFile, 'utf8');
+              const response = JSON.parse(responseContent);
+
+              // Clean up response file
+              fs.unlinkSync(responseFile);
+
+              // Clear timeout and close watcher
+              clearTimeout(timeout);
+              watcher.close();
+
+              resolve({
+                approved: response.approved,
+                reason: response.approved ? undefined : "User rejected the request"
+              });
+            } catch (error) {
+              console.error(`Error reading response file: ${error}`);
+              // Continue watching in case of read error
+            }
+          }
+        }
+      });
+
+      // Handle watcher errors
+      watcher.on('error', (error) => {
+        console.error(`File watcher error: ${error}`);
+        clearTimeout(timeout);
+        watcher.close();
+        resolve({ approved: false, reason: "File watcher error" });
+      });
+    });
+
+  } catch (error) {
+    console.error(`Error requesting permission: ${error}`);
+    return { approved: false, reason: `Error processing permission request: ${error}` };
+  }
+}
+
+server.tool(
+  "approval_prompt",
+  'Request user permission to execute a tool via VS Code dialog',
+  {
+    tool_name: z.string().describe("The name of the tool requesting permission"),
+    input: z.object({}).passthrough().describe("The input for the tool"),
+    tool_use_id: z.string().optional().describe("The unique tool use request ID"),
+  },
+  async ({ tool_name, input }) => {
+    console.error(`Requesting permission for tool: ${tool_name}`);
+
+    const permissionResult = await requestPermission(tool_name, input);
+
+    const behavior = permissionResult.approved ? "allow" : "deny";
+    console.error(`Permission ${behavior}ed for tool: ${tool_name}`);
+
+    return {
+      content: [
+        {
+          type: "text",
+          text: behavior === "allow" ?
+            JSON.stringify({
+              behavior: behavior,
+              updatedInput: input,
+            })
+            :
+            JSON.stringify({
+              behavior: behavior,
+              message: permissionResult.reason || "Permission denied",
+            })
+          ,
+        },
+      ],
+    };
+  }
+);
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error(`Permissions MCP Server running on stdio`);
+  console.error(`Using permissions directory: ${PERMISSIONS_PATH}`);
+}
+
+main().catch((error) => {
+  console.error("Fatal error in main():", error);
+  process.exit(1);
+});

claude-code-chat-permissions-mcp/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "claude-code-chat-permissions-mcp",
+  "version": "1.0.0",
+  "main": "dist/mcp-permissions.js",
+  "scripts": {
+    "start": "tsc && node dist/mcp-permissions.js",
+    "lint": "eslint . --ext .ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^24.0.13",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.15.1",
+    "zod": "^3.25.76"
+  }
+}

claude-code-chat-permissions-mcp/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "target": "es6",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "outDir": "dist"
+  },
+  "lib": ["es2015"]
+}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "claude-code-chat",
-  "displayName": "Claude Code Chat",
+  "displayName": "Chat for Claude Code",
   "description": "Beautiful Claude Code Chat Interface for VS Code",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "publisher": "AndrePimenta",
   "author": "Andre Pimenta",
   "repository": {
@@ -56,7 +56,7 @@
         "command": "claude-code-chat.openChat",
         "title": "Open Claude Code Chat",
         "category": "Claude Code Chat",
-        "icon": "icon.png"
+        "icon": "icon-bubble.png"
       }
     ],
     "keybindings": [
@@ -133,7 +133,7 @@
           "type": "webview",
           "name": "Claude Code Chat",
           "when": "true",
-          "icon": "icon.png",
+          "icon": "icon-bubble.png",
           "contextualTitle": "Claude Code Chat"
         }
       ]
@@ -143,7 +143,7 @@
         {
           "id": "claude-code-chat",
           "title": "Claude Code Chat",
-          "icon": "icon.png"
+          "icon": "icon-bubble.png"
         }
       ]
     },

src/extension.ts

@@ -2,7 +2,7 @@ import * as vscode from 'vscode';
 import * as cp from 'child_process';
 import * as util from 'util';
 import * as path from 'path';
-import html from './ui';
+import getHtml from './ui';
 
 const exec = util.promisify(cp.exec);
 
@@ -10,9 +10,9 @@ export function activate(context: vscode.ExtensionContext) {
 	console.log('Claude Code Chat extension is being activated!');
 	const provider = new ClaudeChatProvider(context.extensionUri, context);
 
-	const disposable = vscode.commands.registerCommand('claude-code-chat.openChat', () => {
+	const disposable = vscode.commands.registerCommand('claude-code-chat.openChat', (column?: vscode.ViewColumn) => {
 		console.log('Claude Code Chat command executed!');
-		provider.show();
+		provider.show(column);
 	});
 
 	const loadConversationDisposable = vscode.commands.registerCommand('claude-code-chat.loadConversation', (filename: string) => {
@@ -44,12 +44,26 @@ export function activate(context: vscode.ExtensionContext) {
 
 export function deactivate() { }
 
+interface ConversationData {
+	sessionId: string;
+	startTime: string | undefined;
+	endTime: string;
+	messageCount: number;
+	totalCost: number;
+	totalTokens: {
+		input: number;
+		output: number;
+	};
+	messages: Array<{ timestamp: string, messageType: string, data: any }>;
+	filename: string;
+}
+
 class ClaudeChatWebviewProvider implements vscode.WebviewViewProvider {
 	constructor(
 		private readonly _extensionUri: vscode.Uri,
 		private readonly _context: vscode.ExtensionContext,
 		private readonly _chatProvider: ClaudeChatProvider
-	) {}
+	) { }
 
 	public resolveWebviewView(
 		webviewView: vscode.WebviewView,
@@ -112,6 +126,8 @@ class ClaudeChatProvider {
 	}> = [];
 	private _currentClaudeProcess: cp.ChildProcess | undefined;
 	private _selectedModel: string = 'default'; // Default model
+	private _isProcessing: boolean | undefined;
+	private _draftMessage: string = '';
 
 	constructor(
 		private readonly _extensionUri: vscode.Uri,
@@ -134,21 +150,22 @@ class ClaudeChatProvider {
 		this._currentSessionId = latestConversation?.sessionId;
 	}
 
-	public show() {
-		const column = vscode.ViewColumn.Two;
+	public show(column: vscode.ViewColumn | vscode.Uri = vscode.ViewColumn.Two) {
+		// Handle case where a URI is passed instead of ViewColumn
+		const actualColumn = column instanceof vscode.Uri ? vscode.ViewColumn.Two : column;
 
 		// Close sidebar if it's open
 		this._closeSidebar();
 
 		if (this._panel) {
-			this._panel.reveal(column);
+			this._panel.reveal(actualColumn);
 			return;
 		}
 
 		this._panel = vscode.window.createWebviewPanel(
 			'claudeChat',
 			'Claude Code Chat',
-			column,
+			actualColumn,
 			{
 				enableScripts: true,
 				retainContextWhenHidden: true,
@@ -157,7 +174,7 @@ class ClaudeChatProvider {
 		);
 
 		// Set icon for the webview tab using URI path
-		const iconPath = vscode.Uri.joinPath(this._extensionUri, 'icon.png');
+		const iconPath = vscode.Uri.joinPath(this._extensionUri, 'icon-bubble.png');
 		this._panel.iconPath = iconPath;
 
 		this._panel.webview.html = this._getHtmlForWebview();
@@ -195,18 +212,18 @@ class ClaudeChatProvider {
 
 	private _sendReadyMessage() {
 		// Send current session info if available
-		if (this._currentSessionId) {
+		/*if (this._currentSessionId) {
 			this._postMessage({
 				type: 'sessionResumed',
 				data: {
 					sessionId: this._currentSessionId
 				}
 			});
-		}
+		}*/
 
 		this._postMessage({
 			type: 'ready',
-			data: 'Ready to chat with Claude Code! Type your message below.'
+			data: this._isProcessing ? 'Claude is working...' : 'Ready to chat with Claude Code! Type your message below.'
 		});
 
 		// Send current model to webview
@@ -220,6 +237,14 @@ class ClaudeChatProvider {
 
 		// Send current settings to webview
 		this._sendCurrentSettings();
+
+		// Send saved draft message if any
+		if (this._draftMessage) {
+			this._postMessage({
+				type: 'restoreInputText',
+				data: this._draftMessage
+			});
+		}
 	}
 
 	private _handleWebviewMessage(message: any) {
@@ -308,6 +333,9 @@ class ClaudeChatProvider {
 			case 'enableYoloMode':
 				this._enableYoloMode();
 				return;
+			case 'saveInputText':
+				this._saveInputText(message.text);
+				return;
 		}
 	}
 
@@ -412,16 +440,21 @@ class ClaudeChatProvider {
 			actualMessage = thinkingPrompt + thinkingMesssage + actualMessage;
 		}
 
+		this._isProcessing = true;
+
+		// Clear draft message since we're sending it
+		this._draftMessage = '';
+
 		// Show original user input in chat and save to conversation (without mode prefixes)
 		this._sendAndSaveMessage({
 			type: 'userInput',
 			data: message
 		});
 
-		// Set processing state
+		// Set processing state to true
 		this._postMessage({
 			type: 'setProcessing',
-			data: true
+			data: { isProcessing: true }
 		});
 
 		// Create backup commit before Claude makes changes
@@ -554,14 +587,27 @@ class ClaudeChatProvider {
 			console.log('Claude process closed with code:', code);
 			console.log('Claude stderr output:', errorOutput);
 
+			if (!this._currentClaudeProcess) {
+				return;
+			}
+
 			// Clear process reference
 			this._currentClaudeProcess = undefined;
 
-			// Clear loading indicator
+			// Clear loading indicator and set processing to false
 			this._postMessage({
 				type: 'clearLoading'
 			});
 
+			// Reset processing state
+			this._isProcessing = false;
+
+			// Clear processing state
+			this._postMessage({
+				type: 'setProcessing',
+				data: { isProcessing: false }
+			});
+
 			if (code !== 0 && errorOutput.trim()) {
 				// Error with output
 				this._sendAndSaveMessage({
@@ -574,6 +620,10 @@ class ClaudeChatProvider {
 		claudeProcess.on('error', (error) => {
 			console.log('Claude process error:', error.message);
 
+			if (!this._currentClaudeProcess) {
+				return;
+			}
+
 			// Clear process reference
 			this._currentClaudeProcess = undefined;
 
@@ -581,6 +631,14 @@ class ClaudeChatProvider {
 				type: 'clearLoading'
 			});
 
+			this._isProcessing = false;
+
+			// Clear processing state
+			this._postMessage({
+				type: 'setProcessing',
+				data: { isProcessing: false }
+			});
+
 			// Check if claude command is not installed
 			if (error.message.includes('ENOENT') || error.message.includes('command not found')) {
 				this._sendAndSaveMessage({
@@ -602,6 +660,18 @@ class ClaudeChatProvider {
 				if (jsonData.subtype === 'init') {
 					// System initialization message - session ID will be captured from final result
 					console.log('System initialized');
+					this._currentSessionId = jsonData.session_id;
+					//this._sendAndSaveMessage({ type: 'init', data: { sessionId: jsonData.session_id; } })
+
+					// Show session info in UI
+					this._sendAndSaveMessage({
+						type: 'sessionInfo',
+						data: {
+							sessionId: jsonData.session_id,
+							tools: jsonData.tools || [],
+							mcpServers: jsonData.mcp_servers || []
+						}
+					});
 				}
 				break;
 
@@ -690,7 +760,7 @@ class ClaudeChatProvider {
 							const isError = content.is_error || false;
 
 							// Find the last tool use to get the tool name
-							const lastToolUse = this._currentConversation[this._currentConversation.length-1]
+							const lastToolUse = this._currentConversation[this._currentConversation.length - 1]
 
 							const toolName = lastToolUse?.data?.toolName;
 
@@ -732,6 +802,8 @@ class ClaudeChatProvider {
 						return;
 					}
 
+					this._isProcessing = false;
+
 					// Capture session ID from final result
 					if (jsonData.session_id) {
 						const isNewSession = !this._currentSessionId;
@@ -760,7 +832,7 @@ class ClaudeChatProvider {
 					// Clear processing state
 					this._postMessage({
 						type: 'setProcessing',
-						data: false
+						data: { isProcessing: false }
 					});
 
 					// Update cumulative tracking
@@ -795,6 +867,22 @@ class ClaudeChatProvider {
 
 
 	private _newSession() {
+
+		this._isProcessing = false
+
+		// Update UI state
+		this._postMessage({
+			type: 'setProcessing',
+			data: { isProcessing: false }
+		});
+
+		// Try graceful termination first
+		if (this._currentClaudeProcess) {
+			const processToKill = this._currentClaudeProcess;
+			this._currentClaudeProcess = undefined;
+			processToKill.kill('SIGTERM');
+		}
+
 		// Clear current session
 		this._currentSessionId = undefined;
 
@@ -836,10 +924,13 @@ class ClaudeChatProvider {
 	}
 
 	private _handleLoginRequired() {
+
+		this._isProcessing = false;
+
 		// Clear processing state
 		this._postMessage({
 			type: 'setProcessing',
-			data: false
+			data: { isProcessing: false }
 		});
 
 		// Show login required message
@@ -869,7 +960,7 @@ class ClaudeChatProvider {
 			'OK'
 		);
 
-				// Send message to UI about terminal
+		// Send message to UI about terminal
 		this._postMessage({
 			type: 'terminalOpened',
 			data: `Please login to Claude in the terminal, then come back to this chat to continue.`,
@@ -879,7 +970,7 @@ class ClaudeChatProvider {
 	private async _initializeBackupRepo(): Promise<void> {
 		try {
 			const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
-			if (!workspaceFolder) {return;}
+			if (!workspaceFolder) { return; }
 
 			const storagePath = this._context.storageUri?.fsPath;
 			if (!storagePath) {
@@ -912,7 +1003,7 @@ class ClaudeChatProvider {
 	private async _createBackupCommit(userMessage: string): Promise<void> {
 		try {
 			const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
-			if (!workspaceFolder || !this._backupRepoPath) {return;}
+			if (!workspaceFolder || !this._backupRepoPath) { return; }
 
 			const workspacePath = workspaceFolder.uri.fsPath;
 			const now = new Date();
@@ -1021,10 +1112,10 @@ class ClaudeChatProvider {
 	private async _initializeConversations(): Promise<void> {
 		try {
 			const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
-			if (!workspaceFolder) {return;}
+			if (!workspaceFolder) { return; }
 
 			const storagePath = this._context.storageUri?.fsPath;
-			if (!storagePath) {return;}
+			if (!storagePath) { return; }
 
 			this._conversationsPath = path.join(storagePath, 'conversations');
 
@@ -1043,7 +1134,7 @@ class ClaudeChatProvider {
 	private async _initializeMCPConfig(): Promise<void> {
 		try {
 			const storagePath = this._context.storageUri?.fsPath;
-			if (!storagePath) {return;}
+			if (!storagePath) { return; }
 
 			// Create MCP config directory
 			const mcpConfigDir = path.join(storagePath, 'mcp');
@@ -1097,13 +1188,13 @@ class ClaudeChatProvider {
 	private async _initializePermissions(): Promise<void> {
 		try {
 
-			if(this._permissionWatcher){
+			if (this._permissionWatcher) {
 				this._permissionWatcher.dispose();
 				this._permissionWatcher = undefined;
 			}
 
 			const storagePath = this._context.storageUri?.fsPath;
-			if (!storagePath) {return;}
+			if (!storagePath) { return; }
 
 			// Create permission requests directory
 			this._permissionRequestsPath = path.join(path.join(storagePath, 'permission-requests'));
@@ -1122,7 +1213,6 @@ class ClaudeChatProvider {
 			);
 
 			this._permissionWatcher.onDidCreate(async (uri) => {
-				console.log("----file", uri)
 				// Only handle file scheme URIs, ignore vscode-userdata scheme
 				if (uri.scheme === 'file') {
 					await this._handlePermissionRequest(uri);
@@ -1174,7 +1264,7 @@ class ClaudeChatProvider {
 		}
 
 		// Send permission request to the UI
-		this._postMessage({
+		this._sendAndSaveMessage({
 			type: 'permissionRequest',
 			data: {
 				id: request.id,
@@ -1531,10 +1621,10 @@ class ClaudeChatProvider {
 			}
 
 			// Filter out internal servers before sending to UI
-		const filteredServers = Object.fromEntries(
-			Object.entries(mcpConfig.mcpServers || {}).filter(([name]) => name !== 'claude-code-chat-permissions')
-		);
-		this._postMessage({ type: 'mcpServers', data: filteredServers });
+			const filteredServers = Object.fromEntries(
+				Object.entries(mcpConfig.mcpServers || {}).filter(([name]) => name !== 'claude-code-chat-permissions')
+			);
+			this._postMessage({ type: 'mcpServers', data: filteredServers });
 		} catch (error) {
 			console.error('Error loading MCP servers:', error);
 			this._postMessage({ type: 'mcpServerError', data: { error: 'Failed to load MCP servers' } });
@@ -1630,7 +1720,7 @@ class ClaudeChatProvider {
 
 	private async _sendCustomSnippets(): Promise<void> {
 		try {
-			const customSnippets = this._context.globalState.get<{[key: string]: any}>('customPromptSnippets', {});
+			const customSnippets = this._context.globalState.get<{ [key: string]: any }>('customPromptSnippets', {});
 			this._postMessage({
 				type: 'customSnippetsData',
 				data: customSnippets
@@ -1646,7 +1736,7 @@ class ClaudeChatProvider {
 
 	private async _saveCustomSnippet(snippet: any): Promise<void> {
 		try {
-			const customSnippets = this._context.globalState.get<{[key: string]: any}>('customPromptSnippets', {});
+			const customSnippets = this._context.globalState.get<{ [key: string]: any }>('customPromptSnippets', {});
 			customSnippets[snippet.id] = snippet;
 
 			await this._context.globalState.update('customPromptSnippets', customSnippets);
@@ -1668,7 +1758,7 @@ class ClaudeChatProvider {
 
 	private async _deleteCustomSnippet(snippetId: string): Promise<void> {
 		try {
-			const customSnippets = this._context.globalState.get<{[key: string]: any}>('customPromptSnippets', {});
+			const customSnippets = this._context.globalState.get<{ [key: string]: any }>('customPromptSnippets', {});
 
 			if (customSnippets[snippetId]) {
 				delete customSnippets[snippetId];
@@ -1709,22 +1799,19 @@ class ClaudeChatProvider {
 
 	public getMCPConfigPath(): string | undefined {
 		const storagePath = this._context.storageUri?.fsPath;
-		if (!storagePath) {return undefined;}
+		if (!storagePath) { return undefined; }
 
 		const configPath = path.join(storagePath, 'mcp', 'mcp-servers.json');
 		return path.join(configPath);
 	}
 
 	private _sendAndSaveMessage(message: { type: string, data: any }): void {
+
 		// Initialize conversation if this is the first message
 		if (this._currentConversation.length === 0) {
 			this._conversationStartTime = new Date().toISOString();
 		}
 
-		if (message.type === 'sessionInfo') {
-			message.data.sessionId;
-		}
-
 		// Send to UI using the helper method
 		this._postMessage(message);
 
@@ -1740,8 +1827,8 @@ class ClaudeChatProvider {
 	}
 
 	private async _saveCurrentConversation(): Promise<void> {
-		if (!this._conversationsPath || this._currentConversation.length === 0) {return;}
-		if(!this._currentSessionId) {return;}
+		if (!this._conversationsPath || this._currentConversation.length === 0) { return; }
+		if (!this._currentSessionId) { return; }
 
 		try {
 			// Create filename from first user message and timestamp
@@ -1760,7 +1847,7 @@ class ClaudeChatProvider {
 			const datePrefix = startTime.substring(0, 16).replace('T', '_').replace(/:/g, '-');
 			const filename = `${datePrefix}_${cleanMessage}.json`;
 
-			const conversationData = {
+			const conversationData: ConversationData = {
 				sessionId: sessionId,
 				startTime: this._conversationStartTime,
 				endTime: new Date().toISOString(),
@@ -1827,8 +1914,8 @@ class ClaudeChatProvider {
 
 					// Check if term matches filename or any part of the path
 					return fileName.includes(term) ||
-						   filePath.includes(term) ||
-						   filePath.split('/').some(segment => segment.includes(term));
+						filePath.includes(term) ||
+						filePath.split('/').some(segment => segment.includes(term));
 				});
 			}
 
@@ -1881,6 +1968,14 @@ class ClaudeChatProvider {
 	private _stopClaudeProcess(): void {
 		console.log('Stop request received');
 
+		this._isProcessing = false
+
+		// Update UI state
+		this._postMessage({
+			type: 'setProcessing',
+			data: { isProcessing: false }
+		});
+
 		if (this._currentClaudeProcess) {
 			console.log('Terminating Claude process...');
 
@@ -1898,12 +1993,6 @@ class ClaudeChatProvider {
 			// Clear process reference
 			this._currentClaudeProcess = undefined;
 
-			// Update UI state
-			this._postMessage({
-				type: 'setProcessing',
-				data: false
-			});
-			
 			this._postMessage({
 				type: 'clearLoading'
 			});
@@ -1920,7 +2009,7 @@ class ClaudeChatProvider {
 		}
 	}
 
-	private _updateConversationIndex(filename: string, conversationData: any): void {
+	private _updateConversationIndex(filename: string, conversationData: ConversationData): void {
 		// Extract first and last user messages
 		const userMessages = conversationData.messages.filter((m: any) => m.messageType === 'userInput');
 		const firstUserMessage = userMessages.length > 0 ? userMessages[0].data : 'No user message';
@@ -1930,7 +2019,7 @@ class ClaudeChatProvider {
 		const indexEntry = {
 			filename: filename,
 			sessionId: conversationData.sessionId,
-			startTime: conversationData.startTime,
+			startTime: conversationData.startTime || '',
 			endTime: conversationData.endTime,
 			messageCount: conversationData.messageCount,
 			totalCost: conversationData.totalCost,
@@ -1959,13 +2048,13 @@ class ClaudeChatProvider {
 
 	private async _loadConversationHistory(filename: string): Promise<void> {
 		console.log("_loadConversationHistory");
-		if (!this._conversationsPath) {return;}
+		if (!this._conversationsPath) { return; }
 
 		try {
 			const filePath = path.join(this._conversationsPath, filename);
 			console.log("filePath", filePath);
 
-			let conversationData;
+			let conversationData: ConversationData;
 			try {
 				const fileUri = vscode.Uri.file(filePath);
 				const content = await vscode.workspace.fs.readFile(fileUri);
@@ -1974,7 +2063,6 @@ class ClaudeChatProvider {
 				return;
 			}
 
-			console.log("conversationData", conversationData);
 			// Load conversation into current state
 			this._currentConversation = conversationData.messages || [];
 			this._conversationStartTime = conversationData.startTime;
@@ -1989,13 +2077,33 @@ class ClaudeChatProvider {
 					type: 'sessionCleared'
 				});
 
+				let requestStartTime: number
+
 				// Small delay to ensure messages are cleared before loading new ones
 				setTimeout(() => {
-					for (const message of this._currentConversation) {
+					const messages = this._currentConversation;
+					for (let i = 0; i < messages.length; i++) {
+
+						const message = messages[i];
+
+						if(message.messageType === 'permissionRequest'){
+							const isLast = i === messages.length - 1;
+							if(!isLast){
+								continue;
+							}
+						}
+
 						this._postMessage({
 							type: message.messageType,
 							data: message.data
 						});
+						if (message.messageType === 'userInput') {
+							try {
+								requestStartTime = new Date(message.timestamp).getTime()
+							} catch (e) {
+								console.log(e)
+							}
+						}
 					}
 
 					// Send updated totals
@@ -2009,6 +2117,13 @@ class ClaudeChatProvider {
 						}
 					});
 
+					// Restore processing state if the conversation was saved while processing
+					if (this._isProcessing) {
+						this._postMessage({
+							type: 'setProcessing',
+							data: { isProcessing: this._isProcessing, requestStartTime }
+						});
+					}
 					// Send ready message after conversation is loaded
 					this._sendReadyMessage();
 				}, 50);
@@ -2021,7 +2136,7 @@ class ClaudeChatProvider {
 	}
 
 	private _getHtmlForWebview(): string {
-		return html;
+		return getHtml(vscode.env?.isTelemetryEnabled);
 	}
 
 	private _sendCurrentSettings(): void {
@@ -2059,6 +2174,10 @@ class ClaudeChatProvider {
 		}
 	}
 
+	private _saveInputText(text: string): void {
+		this._draftMessage = text || '';
+	}
+
 	private async _updateSettings(settings: { [key: string]: any }): Promise<void> {
 		const config = vscode.workspace.getConfiguration('claudeCodeChat');
 
@@ -2221,7 +2340,7 @@ class ClaudeChatProvider {
 	private async _createImageFile(imageData: string, imageType: string) {
 		try {
 			const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
-			if (!workspaceFolder) {return;}
+			if (!workspaceFolder) { return; }
 
 			// Extract base64 data from data URL
 			const base64Data = imageData.split(',')[1];

src/ui-styles.ts

@@ -1350,13 +1350,14 @@ const styles = `
 
     .input-field {
         width: 100%;
+        box-sizing: border-box;
         background-color: transparent;
         color: var(--vscode-input-foreground);
         border: none;
         padding: 12px;
         outline: none;
         font-family: var(--vscode-editor-font-family);
-        min-height: 20px;
+        min-height: 68px;
         line-height: 1.4;
         overflow-y: hidden;
         resize: none;

tsconfig.json

@@ -15,6 +15,7 @@
 		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
 	},
 	"exclude": [
-		"mcp-permissions.js"
+		"mcp-permissions.js",
+		"claude-code-chat-permissions-mcp"
 	]
 }