Add Open VSIX build script

Build script that creates Open VSIX variant with different branding:
- Changes displayName to "Claude Code Chat"
- Uses icon.png instead of icon-bubble.png
- Automatically backs up and restores files after build

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

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

.vscodeignore

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

CHANGELOG.md

@@ -4,6 +4,38 @@ 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.1.0] - 2025-12-06
+
+### 🚀 Features Added
+- **Install Modal**: Added installation flow for users without Claude Code CLI
+  - Auto-detects when Claude Code is not installed
+  - One-click installation with progress indicator
+  - Platform-specific installation commands
+- **Diff Viewer Improvements**:
+  - Show full diff in Edit, MultiEdit, and Write tool use messages
+  - Add "Open Diff" button to open VS Code's native side-by-side diff editor
+  - Add truncation with expand button for long diffs
+  - Optimize diff storage and improve Open Diff button behavior
+- **Processing Indicator**: New morphing orange dot animation while Claude is working
+- **Subscription Detection**: Added usage badge to status bar showing plan type (Pro, Max) or API cost
+- **Conversation Compacting**: Handle `/compact` command in chat with status messages and token reset
+- **Permission System**: Migrated from MCP file-based to stdio-based permission prompts
+- **Plan Mode**: Now uses native `--permission-mode plan` CLI flag for cleaner implementation
+
+### 🐛 Bug Fixes
+- Fixed diff line alignment by removing ::before pseudo-elements
+- Fixed auto-scroll for diff tool results
+- Strip tool_use_error tags from error messages
+- Improved process termination handling
+
+### 🔧 Technical Improvements
+- Run /compact command in chat instead of spawning terminal
+- Improved terminal and UI experience
+- Updated diff icon colors
+
+### 📊 Analytics
+- Added Umami analytics events to track install flow (modal shown, started, success/failed)
+
 ## [1.0.7] - 2025-10-01
 
 ### 🚀 Features Added

README.md

@@ -47,6 +47,13 @@ Ditch the command line and experience Claude Code like never before. This extens
 - Real-time cost and token tracking
 - Session statistics and performance metrics
 
+### 📝 **Inline Diff Viewer** ⭐ **NEW IN V1.1**
+- **Full Diff Display** - See complete file changes directly in Edit, MultiEdit, and Write messages
+- **Open in VS Code Diff** - One-click button to open VS Code's native side-by-side diff editor
+- **Smart Truncation** - Long diffs are truncated with an expand button for better readability
+- **Syntax Highlighting** - Proper code highlighting in diff views
+- **Visual Change Indicators** - Clear green/red highlighting for additions and deletions
+
 ### 🔌 **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

build/open-vsix/build.sh

@@ -0,0 +1,71 @@
+#!/bin/bash
+
+# Build script for Open VSIX version
+# This applies Open VSIX-specific changes, builds the package, then reverts
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+VERSION="1.1.0"
+OUTPUT_NAME="vsix-claude-code-chat-${VERSION}.vsix"
+
+echo "Building Open VSIX version ${VERSION}..."
+
+# Backup original files to build folder
+cp package.json "${SCRIPT_DIR}/package.json.backup"
+cp src/extension.ts "${SCRIPT_DIR}/extension.ts.backup"
+
+# Backup original icon.png if it exists
+if [ -f "icon.png" ]; then
+    mv icon.png "${SCRIPT_DIR}/icon.png.backup"
+fi
+
+# Copy Open VSIX icon
+cp "${SCRIPT_DIR}/icon.png" icon.png
+echo "Copied Open VSIX icon"
+
+# Temporarily remove icon-bubble.png (not needed for Open VSIX)
+if [ -f "icon-bubble.png" ]; then
+    mv icon-bubble.png "${SCRIPT_DIR}/icon-bubble.png.backup"
+fi
+
+# Apply Open VSIX changes to package.json
+sed -i.bak 's/"displayName": "Chat for Claude Code"/"displayName": "Claude Code Chat"/' package.json
+sed -i.bak 's/"icon": "icon-bubble.png"/"icon": "icon.png"/g' package.json
+rm -f package.json.bak
+
+# Apply Open VSIX changes to extension.ts
+sed -i.bak "s/icon-bubble.png/icon.png/g" src/extension.ts
+rm -f src/extension.ts.bak
+
+echo "Applied Open VSIX changes to package.json and extension.ts"
+
+# Compile TypeScript
+echo "Compiling TypeScript..."
+npm run compile
+
+# Build the VSIX
+echo "Building VSIX package..."
+vsce package --out "${OUTPUT_NAME}"
+
+# Restore original files from build folder
+mv "${SCRIPT_DIR}/package.json.backup" package.json
+mv "${SCRIPT_DIR}/extension.ts.backup" src/extension.ts
+
+# Restore original icon
+rm -f icon.png
+if [ -f "${SCRIPT_DIR}/icon.png.backup" ]; then
+    mv "${SCRIPT_DIR}/icon.png.backup" icon.png
+fi
+
+# Restore icon-bubble.png
+if [ -f "${SCRIPT_DIR}/icon-bubble.png.backup" ]; then
+    mv "${SCRIPT_DIR}/icon-bubble.png.backup" icon-bubble.png
+fi
+
+# Recompile with original extension.ts
+echo "Recompiling with original files..."
+npm run compile
+
+echo "Restored original files"
+echo "Built: ${OUTPUT_NAME}"

package.json

@@ -2,7 +2,7 @@
   "name": "claude-code-chat",
   "displayName": "Chat for Claude Code",
   "description": "Beautiful Claude Code Chat Interface for VS Code",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "publisher": "AndrePimenta",
   "author": "Andre Pimenta",
   "repository": {

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;
@@ -302,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;
@@ -321,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;
@@ -1076,34 +1093,25 @@ const styles = `
 
     .diff-line {
         padding: 2px 12px;
-        white-space: pre-wrap;
+        white-space: pre;
-        word-break: break-word;
+        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-gitDecoration-deletedResourceForeground, rgba(244, 67, 54, 0.9));
-        color: var(--vscode-foreground);
     }
 
     .diff-line.added {
         background-color: rgba(76, 175, 80, 0.1);
-        border-left: 3px solid rgba(76, 175, 80, 0.6);
+        color: var(--vscode-gitDecoration-addedResourceForeground, rgba(76, 175, 80, 0.9));
-        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;
     }
 
     .diff-expand-container {
@@ -1159,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);
@@ -1167,6 +1207,7 @@ const styles = `
         font-size: 12px;
         cursor: pointer;
         transition: all 0.2s ease;
+        flex: 1;
     }
 
     .diff-file-path:hover {
@@ -1178,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);
@@ -2368,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;
@@ -2874,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

src/ui.ts

@@ -399,6 +399,57 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
 		</div>
 	</div>
 
+	<!-- Install Claude Code modal -->
+	<div id="installModal" class="install-modal" style="display: none;">
+		<div class="install-modal-backdrop" onclick="hideInstallModal()"></div>
+		<div class="install-modal-content">
+			<button class="install-close-btn" onclick="hideInstallModal()">
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+					<path d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>
+			</button>
+
+			<div class="install-body" id="installBody">
+				<div class="install-main" id="installMain">
+					<div class="install-icon-wrapper">
+						<svg class="install-icon" width="40" height="40" viewBox="0 0 24 24" fill="none">
+							<path d="M21 15V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M12 3V15M12 15L7 10M12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+						</svg>
+					</div>
+					<div class="install-text">
+						<h2 class="install-title">Install Claude Code</h2>
+						<p class="install-desc">The CLI is required to use this extension</p>
+					</div>
+
+					<button class="install-btn" id="installMainBtn" onclick="startInstallation()">
+						Install Now
+					</button>
+
+					<a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" class="install-link">
+						View documentation
+					</a>
+				</div>
+
+				<div class="install-progress" id="installProgress" style="display: none;">
+					<div class="install-spinner"></div>
+					<p class="install-progress-text">Installing Claude Code...</p>
+					<p class="install-progress-hint">This may take a minute</p>
+				</div>
+
+				<div class="install-success" id="installSuccess" style="display: none;">
+					<div class="install-success-icon">
+						<svg class="install-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+							<polyline points="20 6 9 17 4 12"></polyline>
+						</svg>
+					</div>
+					<p class="install-success-text">Installation Complete</p>
+					<p class="install-success-hint">Send a message to get started</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<!-- Thinking intensity modal -->
 	<div id="thinkingIntensityModal" class="tools-modal" style="display: none;">
 		<div class="tools-modal-content" style="width: 450px;">