Add install modal for users without Claude Code CLI

Shows a clean modal when Claude Code is not installed, with one-click
installation that auto-detects platform (npm if node>=18, otherwise
curl/PowerShell). Runs silently in background with progress indicator.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

.vscodeignore

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

CHANGELOG.md

@@ -4,6 +4,175 @@ 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
+
+#### **Advanced Permissions Management System**
+- Complete permissions framework with MCP integration for secure tool execution
+- Interactive permission dialogs with detailed tool information and command previews
+- "Always Allow" functionality with smart command pattern matching for common tools (npm, git, docker, etc.)
+- YOLO mode for power users to skip all permission checks
+- Comprehensive permissions settings UI with ability to add/remove specific permissions
+- File system watcher for real-time permission request handling
+- Workspace-specific permission storage and management
+
+#### **MCP (Model Context Protocol) Server Management**
+- Complete MCP server configuration interface
+- Popular MCP servers gallery with one-click installation
+- Custom MCP server creation with validation
+- Server management (edit, delete, enable/disable)
+- Automatic permissions server integration
+- WSL path conversion for cross-platform compatibility
+
+#### **Sidebar Integration & Multi-Panel Support**
+- Native VS Code sidebar view with full chat functionality
+- Smart panel management (auto-close main panel when sidebar opens)
+- Persistent session state across panel switches
+- Proper webview lifecycle management
+- Activity bar integration with custom icon
+
+#### **Image & Clipboard Enhancements**
+- Drag-and-drop image support directly into chat
+- Clipboard image paste functionality (Ctrl+V for screenshots)
+- Multiple image selection with VS Code's native file picker
+- Automatic image organization in `.claude/claude-code-chat-images/` folder
+- Automatic `.gitignore` creation for image folders
+- Support for PNG, JPG, JPEG, GIF, SVG, WebP, BMP formats
+
+#### **Code Block & Syntax Improvements**
+- Enhanced markdown parsing with proper code block detection
+- Syntax highlighting for code blocks with language detection
+- Copy-to-clipboard functionality for code blocks
+- Improved inline code rendering
+- Better handling of technical identifiers and underscores
+
+### 🎨 UI/UX Improvements
+
+#### **Settings & Configuration**
+- Comprehensive settings modal with organized sections
+- YOLO mode toggle with visual warnings and explanations
+- Real-time settings synchronization between UI and VS Code config
+- Better visual hierarchy and professional styling
+- Smart configuration validation and error handling
+
+#### **Message & Chat Interface**
+- Improved message spacing and visual consistency
+- Enhanced tool result display with better formatting
+- Smart scrolling behavior (only auto-scroll if user is at bottom)
+- Loading indicators and processing states
+- Better error handling and user feedback
+
+#### **YOLO Mode Visual Design**
+- Less subtle YOLO mode section (increased opacity and size)
+- Changed warning icon from ⚠️ to 🚀 for less intimidating appearance
+- Soft tomato red styling that's noticeable but not scary
+- Clear explanation of YOLO mode functionality
+
+### 🔧 Technical Enhancements
+
+#### **Session & State Management**
+- Persistent session state across VS Code restarts
+- Proper cleanup of resources and event listeners
+- Better error handling for failed operations
+- Improved memory management for large conversations
+
+#### **Cross-Platform Compatibility**
+- Enhanced WSL support with proper path conversion
+- Windows-specific improvements and fixes
+- Better handling of different operating system environments
+- Improved subprocess management and cleanup
+
+#### **Performance Optimizations**
+- Reduced context usage with more efficient tool operations
+- Better file search and workspace integration
+- Optimized message handling and UI updates
+- Improved extension activation and initialization times
+
+#### **Developer Experience**
+- Better error messages and debugging information
+- Improved extension logging and troubleshooting
+- Enhanced development workflow support
+- Better TypeScript integration and type safety
+
+### 🐛 Bug Fixes
+- Fixed multiple permission prompts being sent simultaneously
+- Resolved panel management issues with multiple webviews
+- Fixed expand/collapse functionality for long content
+- Corrected Unix timestamp parsing for usage limit messages
+- Fixed WSL integration on Windows systems
+- Resolved markdown parsing issues with underscores in code
+- Fixed copy-paste functionality for images and code blocks
+- Corrected file path handling across different platforms
+
+### 🔄 Breaking Changes
+- Permission system now requires explicit approval for tool execution (unless YOLO mode is enabled)
+- Image files are now stored in `.claude/claude-code-chat-images/` instead of root directory
+- MCP configuration moved to extension storage instead of global config
+
+### 📚 Documentation & Community
+- Updated README with comprehensive feature documentation
+- Fixed GitHub issues link in repository
+- Enhanced examples and usage guides
+- Better onboarding experience for new users
+
 ## [0.1.3] - 2025-06-24
 
 ### 🚀 Features Added

README.md

@@ -16,14 +16,15 @@ Ditch the command line and experience Claude Code like never before. This extens
 
 🖥️ **No Terminal Required** - Beautiful chat interface replaces command-line interactions  
 ⏪ **Restore Checkpoints** - Undo changes and restore code to any previous state   
+🔌 **MCP Server Support** - Complete Model Context Protocol server management   
 💾 **Conversation History** - Automatic conversation history and session management  
-🎨 **VS Code Native** - Claude Code integrated directly into VS Code with native theming  
+🎨 **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 Context and Commands** - Reference any file with simple @ mentions and / for 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  
-🐧 **WSL Support** - Full Windows Subsystem for Linux integration and compatibility
+🐧 **Windows/WSL Support** - Full native Windows and WSL support
 
-![Claude Code Chat Cut](https://github.com/user-attachments/assets/d4ded28f-a4ed-4862-9766-c1ff89947775)
+![Claude Code Chat 1 0 0](https://github.com/user-attachments/assets/5954a74c-eff7-4205-8482-6a1c9de6e102)
 
 
 ---
@@ -34,8 +35,9 @@ Ditch the command line and experience Claude Code like never before. This extens
 - No terminal required - everything through the UI
 - Real-time streaming responses with typing indicators
 - One-click message copying with visual feedback
-- Rich markdown support for code blocks and formatting
+- Enhanced markdown support with syntax highlighting
 - Auto-resizing input that grows with your content
+- Copy-to-clipboard for code blocks
 
 ### ⏪ **Checkpoint & Session Management**
 - **Restore Checkpoints** - Instantly undo changes and restore to any previous state
@@ -45,9 +47,36 @@ Ditch the command line and experience Claude Code like never before. This extens
 - Real-time cost and token tracking
 - Session statistics and performance metrics
 
+### 🔌 **MCP Server Management** ⭐ **NEW IN V1.0**
+- **Popular Servers Gallery** - One-click installation of common MCP servers
+- **Custom Server Creation** - Build and configure your own MCP servers
+- **Server Management** - Edit, delete, enable/disable servers through UI
+- **Automatic Integration** - Seamless permissions and tool integration
+- **Cross-platform Support** - Full WSL compatibility with path conversion
+
+### 🔒 **Advanced Permissions System** ⭐ **NEW IN V1.0**
+- **Interactive Permission Dialogs** - Detailed tool information with command previews
+- **Always Allow Functionality** - Smart command pattern matching for common tools (npm, git, docker)
+- **YOLO Mode** - Skip all permission checks for power users
+- **Workspace Permissions** - Granular control over what tools can execute
+- **Real-time Permission Management** - Add/remove permissions through intuitive UI
+
+### 🖼️ **Image & Clipboard Support** ⭐ **NEW IN V1.0**
+- **Drag & Drop Images** - Simply drag images directly into the chat
+- **Clipboard Paste** - Press Ctrl+V to paste screenshots and copied images
+- **Multiple Image Selection** - Choose multiple images through VS Code's file picker
+- **Organized Storage** - Automatic organization in `.claude/claude-code-chat-images/`
+- **Format Support** - PNG, JPG, JPEG, GIF, SVG, WebP, BMP formats
+
+### 📱 **Sidebar Integration** ⭐ **NEW IN V1.0**
+- **Native VS Code Sidebar** - Full chat functionality in the sidebar panel
+- **Smart Panel Management** - Automatic switching between main and sidebar views
+- **Persistent Sessions** - State maintained across panel switches
+- **Activity Bar Integration** - Quick access from VS Code's activity bar
+
 ### 📁 **Smart File Integration**
 - Type `@` to instantly search and reference workspace files
-- Image attachments via file browser
+- Image attachments via file browser and copy-paste screeshots
 - Lightning-fast file search across your entire project
 - Seamless context preservation for multi-file discussions
 
@@ -55,6 +84,7 @@ Ditch the command line and experience Claude Code like never before. This extens
 - Visual dashboard showing all available Claude Code tools
 - Real-time tool execution with formatted results
 - Process control - start, stop, and monitor operations
+- Smart permission system for secure tool execution
 
 ### 🎨 **VS Code Integration**
 - Native theming that matches your editor
@@ -73,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
@@ -214,31 +244,39 @@ Example configuration in `settings.json`:
 - Type `@` followed by your search term to quickly reference files
 - Use `@src/` to narrow down to specific directories
 - Reference multiple files in one message for cross-file analysis
+- **NEW**: Copy-paste images directly into chat for visual context
+- **NEW**: Paste screenshots with Ctrl+V for instant visual communication
 
 ### ⚡ **Productivity Boosters**
 - **Creates checkpoints automatically** before changes for safe experimentation
 - **Restore instantly** if changes don't work out as expected
+- **NEW**: Permission system prevents accidental tool execution
+- **NEW**: YOLO mode for power users who want speed over safety
 - Use the stop button to cancel long-running operations
 - Copy message contents to reuse Claude's responses
 - Open history panel to reference previous conversations
+- **NEW**: Sidebar integration for multi-panel workflow
 
 ### 🎨 **Interface Customization**
 - The UI automatically adapts to your VS Code theme
 - Messages are color-coded: Green for you, Blue for Claude
 - Hover over messages to reveal the copy button
+- **NEW**: Enhanced code block rendering with syntax highlighting
+- **NEW**: Copy-to-clipboard functionality for code blocks
 
 ---
 
 ## 🔧 **Advanced Features**
 
 ### 🛠️ **Tool Integration**
-Claude Code Chat provides full access to all Claude Code tools:
-- **Bash** - Execute shell commands
+Claude Code Chat provides secure access to all Claude Code tools:
+- **Bash** - Execute shell commands with permission controls
 - **File Operations** - Read, write, and edit files
-- **Search** - Grep and glob pattern matching
+- **Search** - Grep and glob pattern matching across workspace
 - **Web** - Fetch and search web content
 - **Multi-edit** - Batch file modifications
-- **While in Beta, all tools are enabled by default, use at your own risk!**
+- **MCP Servers** - Extend functionality with Model Context Protocol servers
+- **Permissions System** - Granular control over tool execution for security
 
 ### 📊 **Analytics & Monitoring**
 - **Real-time cost tracking** - Monitor your API usage

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.0",
+  "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/ui-styles.ts

@@ -28,6 +28,12 @@ const styles = `
         letter-spacing: -0.3px;
     }
 
+    @media (max-width: 385px) {
+        .header h2 {
+            display: none;
+        }
+    }
+
     .controls {
         display: flex;
         gap: 6px;
@@ -86,8 +92,8 @@ const styles = `
     /* Permission Request */
     .permission-request {
         margin: 4px 12px 20px 12px;
-        background-color: var(--vscode-inputValidation-warningBackground);
-        border: 1px solid var(--vscode-inputValidation-warningBorder);
+        background-color: rgba(252, 188, 0, 0.1);
+        border: 1px solid rgba(252, 188, 0, 0.3);
         border-radius: 8px;
         padding: 16px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -107,6 +113,86 @@ const styles = `
         font-size: 16px;
     }
 
+    .permission-menu {
+        position: relative;
+        margin-left: auto;
+    }
+
+    .permission-menu-btn {
+        background: none;
+        border: none;
+        color: var(--vscode-descriptionForeground);
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 16px;
+        font-weight: bold;
+        transition: all 0.2s ease;
+        line-height: 1;
+    }
+
+    .permission-menu-btn:hover {
+        background-color: var(--vscode-list-hoverBackground);
+        color: var(--vscode-foreground);
+    }
+
+    .permission-menu-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--vscode-menu-background);
+        border: 1px solid var(--vscode-menu-border);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        z-index: 1000;
+        min-width: 220px;
+        padding: 4px 0;
+        margin-top: 4px;
+    }
+
+    .permission-menu-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        padding: 12px 16px;
+        background: none;
+        border: none;
+        width: 100%;
+        text-align: left;
+        cursor: pointer;
+        color: var(--vscode-foreground);
+        transition: background-color 0.2s ease;
+    }
+
+    .permission-menu-item:hover {
+        background-color: var(--vscode-list-hoverBackground);
+    }
+
+    .permission-menu-item .menu-icon {
+        font-size: 16px;
+        margin-top: 1px;
+        flex-shrink: 0;
+    }
+
+    .permission-menu-item .menu-content {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .permission-menu-item .menu-title {
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 1.2;
+    }
+
+    .permission-menu-item .menu-subtitle {
+        font-size: 11px;
+        color: var(--vscode-descriptionForeground);
+        opacity: 0.8;
+        line-height: 1.2;
+    }
+
     .permission-content {
         font-size: 13px;
         line-height: 1.4;
@@ -222,6 +308,12 @@ const styles = `
         border: 1px solid rgba(231, 76, 60, 0.3);
     }
 
+    .permission-decision.expired {
+        background-color: rgba(128, 128, 128, 0.15);
+        color: var(--vscode-descriptionForeground);
+        border: 1px solid rgba(128, 128, 128, 0.3);
+    }
+
     .permission-decided {
         opacity: 0.7;
         pointer-events: none;
@@ -241,6 +333,11 @@ const styles = `
         background-color: var(--vscode-inputValidation-errorBackground);
     }
 
+    .permission-decided.expired {
+        border-color: var(--vscode-panel-border);
+        background-color: rgba(128, 128, 128, 0.05);
+    }
+
     /* Permissions Management */
     .permissions-list {
         max-height: 300px;
@@ -493,7 +590,7 @@ const styles = `
         align-items: center;
         gap: 6px;
         margin-top: 12px;
-        opacity: 0.8;
+        opacity: 1;
         transition: opacity 0.2s ease;
     }
 
@@ -502,12 +599,12 @@ const styles = `
     }
 
     .yolo-mode-section input[type="checkbox"] {
-        transform: scale(0.8);
+        transform: scale(0.9);
         margin: 0;
     }
 
     .yolo-mode-section label {
-        font-size: 10px;
+        font-size: 12px;
         color: var(--vscode-descriptionForeground);
         cursor: pointer;
         font-weight: 400;
@@ -996,34 +1093,25 @@ const styles = `
 
     .diff-line {
         padding: 2px 12px;
-        white-space: pre-wrap;
-        word-break: break-word;
+        white-space: pre;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
+        font-size: 12px;
+        line-height: 1.5;
+    }
+
+    .diff-line.context {
+        color: var(--vscode-editor-foreground);
+        opacity: 0.8;
     }
 
     .diff-line.removed {
         background-color: rgba(244, 67, 54, 0.1);
-        border-left: 3px solid rgba(244, 67, 54, 0.6);
-        color: var(--vscode-foreground);
+        color: var(--vscode-gitDecoration-deletedResourceForeground, rgba(244, 67, 54, 0.9));
     }
 
     .diff-line.added {
         background-color: rgba(76, 175, 80, 0.1);
-        border-left: 3px solid rgba(76, 175, 80, 0.6);
-        color: var(--vscode-foreground);
-    }
-
-    .diff-line.removed::before {
-        content: '';
-        color: rgba(244, 67, 54, 0.8);
-        font-weight: 600;
-        margin-right: 8px;
-    }
-
-    .diff-line.added::before {
-        content: '';
-        color: rgba(76, 175, 80, 0.8);
-        font-weight: 600;
-        margin-right: 8px;
+        color: var(--vscode-gitDecoration-addedResourceForeground, rgba(76, 175, 80, 0.9));
     }
 
     .diff-expand-container {
@@ -1079,7 +1167,39 @@ const styles = `
         margin: 12px 0;
     }
 
+    .diff-summary-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        margin-top: 8px;
+        padding: 6px 12px;
+        border-top: 1px solid var(--vscode-panel-border);
+        background-color: var(--vscode-editor-background);
+    }
+
+    .diff-summary {
+        color: var(--vscode-descriptionForeground);
+        font-size: 11px;
+        font-weight: 500;
+    }
+
+    .diff-preview {
+        padding: 4px 12px;
+        color: var(--vscode-descriptionForeground);
+        font-size: 12px;
+        font-style: italic;
+        opacity: 0.9;
+    }
+
     /* File path display styles */
+    .diff-file-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
     .diff-file-path {
         padding: 8px 12px;
         border: 1px solid var(--vscode-panel-border);
@@ -1087,6 +1207,7 @@ const styles = `
         font-size: 12px;
         cursor: pointer;
         transition: all 0.2s ease;
+        flex: 1;
     }
 
     .diff-file-path:hover {
@@ -1098,6 +1219,35 @@ const styles = `
         transform: translateY(1px);
     }
 
+    .diff-open-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        background: transparent;
+        border: 1px solid var(--vscode-button-secondaryBorder, var(--vscode-panel-border));
+        color: var(--vscode-foreground);
+        padding: 4px 10px;
+        border-radius: 3px;
+        font-size: 11px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        white-space: nowrap;
+    }
+
+    .diff-open-btn svg {
+        flex-shrink: 0;
+    }
+
+    .diff-open-btn:hover {
+        background: var(--vscode-button-secondaryHoverBackground, rgba(255, 255, 255, 0.1));
+        border-color: var(--vscode-focusBorder);
+        opacity: 1;
+    }
+
+    .diff-open-btn:active {
+        transform: translateY(1px);
+    }
+
     .file-path-short,
     .file-path-truncated {
         font-family: var(--vscode-editor-font-family);
@@ -1270,13 +1420,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;
@@ -1447,13 +1598,13 @@ const styles = `
 
     .yolo-warning {
         font-size: 12px;
-        color: var(--vscode-inputValidation-errorForeground);
+        color: var(--vscode-foreground);
         text-align: center;
         font-weight: 500;
-        background-color: var(--vscode-inputValidation-errorBackground);
-        border: 1px solid var(--vscode-inputValidation-errorBorder);
+        background-color: rgba(255, 99, 71, 0.08);
+        border: 1px solid rgba(255, 99, 71, 0.2);
         padding: 8px 12px;
-        margin: 4px 12px;
+        margin: 4px 4px;
         border-radius: 4px;
         animation: slideDown 0.3s ease;
     }
@@ -2287,6 +2438,34 @@ const styles = `
         flex: 1;
     }
 
+    .status-text .usage-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: inherit;
+        text-decoration: none;
+        background: rgba(255, 255, 255, 0.08);
+        padding: 2px 8px 2px 8px;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: background 0.15s, transform 0.1s;
+    }
+
+    .status-text .usage-badge:hover {
+        background: rgba(255, 255, 255, 0.15);
+        transform: translateY(-1px);
+    }
+
+    .status-text .usage-badge:active {
+        transform: translateY(0);
+    }
+
+    .status-text .usage-icon {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+    }
+
     pre {
         white-space: pre-wrap;
         word-wrap: break-word;
@@ -2793,6 +2972,272 @@ const styles = `
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    /* Processing indicator - morphing orange dot */
+    .processing-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        padding: 12px 0;
+        margin-top: 8px;
+    }
+
+    .processing-indicator .morph-dot {
+        width: 8px;
+        height: 8px;
+        background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
+        box-shadow: 0 0 8px rgba(255, 149, 0, 0.5);
+        animation: morphShape 3s ease-in-out infinite;
+    }
+
+    @keyframes morphShape {
+        0%, 100% {
+            border-radius: 50%;
+            transform: scale(1) rotate(0deg);
+        }
+        15% {
+            border-radius: 50%;
+            transform: scale(1.3) rotate(0deg);
+        }
+        25% {
+            border-radius: 20%;
+            transform: scale(1) rotate(45deg);
+        }
+        40% {
+            border-radius: 20%;
+            transform: scale(1.2) rotate(90deg);
+        }
+        50% {
+            border-radius: 50% 50% 50% 0%;
+            transform: scale(1) rotate(135deg);
+        }
+        65% {
+            border-radius: 0%;
+            transform: scale(1.3) rotate(180deg);
+        }
+        75% {
+            border-radius: 50% 0% 50% 0%;
+            transform: scale(1) rotate(270deg);
+        }
+        85% {
+            border-radius: 30%;
+            transform: scale(1.2) rotate(315deg);
+        }
+    }
+
+    /* Install Modal Styles */
+    .install-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .install-modal-backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(2px);
+    }
+
+    .install-modal-content {
+        position: relative;
+        background: var(--vscode-editor-background);
+        border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+        border-radius: 12px;
+        width: 320px;
+        padding: 32px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        animation: installFadeIn 0.2s ease-out;
+    }
+
+    @keyframes installFadeIn {
+        from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+        to { opacity: 1; transform: scale(1) translateY(0); }
+    }
+
+    .install-close-btn {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 28px;
+        height: 28px;
+        background: none;
+        border: none;
+        color: var(--vscode-descriptionForeground);
+        cursor: pointer;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.6;
+        transition: all 0.15s;
+    }
+
+    .install-close-btn:hover {
+        background: var(--vscode-toolbar-hoverBackground);
+        opacity: 1;
+    }
+
+    .install-body {
+        text-align: center;
+    }
+
+    .install-main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .install-icon-wrapper {
+        width: 64px;
+        height: 64px;
+        border-radius: 16px;
+        background: var(--vscode-button-background);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .install-icon {
+        color: var(--vscode-button-foreground);
+    }
+
+    .install-text {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .install-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--vscode-foreground);
+    }
+
+    .install-desc {
+        margin: 0;
+        font-size: 13px;
+        color: var(--vscode-descriptionForeground);
+        line-height: 1.4;
+    }
+
+    .install-btn {
+        width: 100%;
+        padding: 12px 24px;
+        font-size: 14px;
+        font-weight: 500;
+        background: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .install-btn:hover {
+        background: var(--vscode-button-hoverBackground);
+        transform: translateY(-1px);
+    }
+
+    .install-btn:active {
+        transform: translateY(0);
+    }
+
+    .install-link {
+        font-size: 13px;
+        color: var(--vscode-textLink-foreground);
+        text-decoration: none;
+        opacity: 0.9;
+    }
+
+    .install-link:hover {
+        text-decoration: underline;
+        opacity: 1;
+    }
+
+    .install-progress {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        padding: 20px 0;
+    }
+
+    .install-spinner {
+        width: 32px;
+        height: 32px;
+        border: 2.5px solid var(--vscode-widget-border, var(--vscode-panel-border));
+        border-top-color: var(--vscode-button-background);
+        border-radius: 50%;
+        animation: installSpin 0.8s linear infinite;
+    }
+
+    @keyframes installSpin {
+        to { transform: rotate(360deg); }
+    }
+
+    .install-progress-text {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--vscode-foreground);
+    }
+
+    .install-progress-hint {
+        margin: 0;
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+    }
+
+    .install-success {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        padding: 20px 0;
+    }
+
+    .install-success-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: rgba(78, 201, 176, 0.15);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .install-check {
+        width: 28px;
+        height: 28px;
+        color: var(--vscode-testing-iconPassed, #4ec9b0);
+    }
+
+    .install-success-text {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--vscode-foreground);
+    }
+
+    .install-success-hint {
+        margin: 0;
+        font-size: 13px;
+        color: var(--vscode-descriptionForeground);
+    }
+
 </style>`
 
 export default styles

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"
 	]
 }