This commit is contained in:
andrepimenta
2025-06-16 17:29:04 +01:00
commit 2c299a837d
18 changed files with 7416 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
{
"permissions": {
"allow": [
"Bash(npm run compile:*)",
"Bash(grep:*)",
"Bash(sed:*)",
"Bash(rg:*)",
"Bash(npx tsc:*)"
],
"deny": []
},
"enableAllProjectMcpServers": false
}

6
.gitignore vendored Normal file
View File

@@ -0,0 +1,6 @@
out
dist
node_modules
.vscode-test/
*.vsix
backup

5
.vscode-test.mjs Normal file
View File

@@ -0,0 +1,5 @@
import { defineConfig } from '@vscode/test-cli';
export default defineConfig({
files: 'out/test/**/*.test.js',
});

8
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": [
"dbaeumer.vscode-eslint",
"ms-vscode.extension-test-runner"
]
}

21
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,21 @@
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}

11
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,11 @@
// Place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
"out": false // set this to true to hide the "out" folder with the compiled JS files
},
"search.exclude": {
"out": true // set this to false to include "out" folder in search results
},
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
"typescript.tsc.autoDetect": "off"
}

20
.vscode/tasks.json vendored Normal file
View File

@@ -0,0 +1,20 @@
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}

11
.vscodeignore Normal file
View File

@@ -0,0 +1,11 @@
.vscode/**
.vscode-test/**
src/**
.gitignore
.yarnrc
vsc-extension-quickstart.md
**/tsconfig.json
**/eslint.config.mjs
**/*.map
**/*.ts
**/.vscode-test.*

9
CHANGELOG.md Normal file
View File

@@ -0,0 +1,9 @@
# Change Log
All notable changes to the "claude-code-chat" extension will be documented in this file.
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
## [Unreleased]
- Initial release

261
README.md Normal file
View File

@@ -0,0 +1,261 @@
# 🚀 Claude Code Chat - Beautiful Claude Code Chat Interface for VS Code
[![VS Code Extension](https://img.shields.io/badge/VS%20Code-Extension-blue?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=your-extension-id)
[![Claude Code](https://img.shields.io/badge/Powered%20by-Claude%20Code-orange?style=for-the-badge)](https://claude.ai/code)
[![TypeScript](https://img.shields.io/badge/Built%20with-TypeScript-3178C6?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
> **No more terminal commands. Chat with Claude Code through a beautiful, intuitive interface right inside VS Code.**
Ditch the command line and experience Claude Code like never before. This extension brings a stunning chat interface directly into your editor, making AI assistance accessible, visual, and enjoyable.
🤖 **Built by Claude Code for Claude Code** - This extension was entirely developed using Claude Code itself. Claude Code created its own chat interface!
---
## ✨ **Why Choose Claude Code Chat?**
🖥️ **No Terminal Required** - Beautiful chat interface replaces command-line interactions
**Restore Checkpoints** - Undo changes and restore code to any previous state
💾 **Conversation History** - Automatic conversation history and session management
**Instant Access** - Claude Code integrated directly into VS Code
🎨 **VS Code Native** - Seamlessly matches your editor's theme and design
📁 **Smart File Context** - Reference any file with simple @ mentions
🛑 **Full Control** - Start, stop, and manage AI processes with ease
---
## 🌟 **Key Features**
### 💬 **Beautiful Chat Graphical Interface**
- 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
- Auto-resizing input that grows with your content
### ⏪ **Checkpoint & Session Management**
- **Restore Checkpoints** - Instantly undo changes and restore to any previous state
- Automatic Git-based backup system for safe experimentation
- Browse and restore from any conversation checkpoint
- Automatic conversation saving and restoration
- Real-time cost and token tracking
- Session statistics and performance metrics
### 📁 **Smart File Integration**
- Type `@` to instantly search and reference workspace files
- Image attachments via file browser
- Lightning-fast file search across your entire project
- Seamless context preservation for multi-file discussions
### 🛠️ **Tool Management**
- Visual dashboard showing all available Claude Code tools
- Real-time tool execution with formatted results
- Process control - start, stop, and monitor operations
### 🎨 **VS Code Integration**
- Native theming that matches your editor
- Status bar integration with connection status
- Activity bar panel for quick access
- Responsive design for any screen size
---
## 🚀 **Getting Started**
### Prerequisites
- **VS Code 1.80+** - Latest version recommended
- **Claude Code CLI** - [Install from Anthropic](https://claude.ai/code)
- **Active Claude API or subscription** - API or Pro/Max plan
### Installation
1. **Install from VS Code Marketplace**
```
ext install claude-code-chat
```
2. **Or install manually**
- Download the `.vsix` file from releases
- Run `code --install-extension claude-code-chat-x.x.x.vsix`
3. **Open Claude Code Chat**
- Press `Ctrl+Shift+C` (or `Cmd+Shift+C` on Mac)
- Or click the Claude icon in your status bar
- Or use Command Palette: `Claude Code: Open Chat`
---
## 💡 **Usage Examples**
### 🔥 **Code Review & Refactoring**
```
You: @src/components/UserProfile.tsx Can you review this component and suggest improvements?
Claude: I'll analyze your UserProfile component. Looking at the code, here are my recommendations:
1. **Performance Optimization**: Add React.memo() to prevent unnecessary re-renders
2. **TypeScript Enhancement**: The props interface could be more specific
3. **Accessibility**: Missing ARIA labels for screen readers
[Detailed analysis with code examples follows...]
```
### 📊 **Project Analysis**
```
You: Analyze the overall architecture of my project and identify potential issues
Claude: I'll examine your project structure and identify areas for improvement:
🏗️ **Architecture Overview**
- React frontend with TypeScript
- Node.js backend with Express
- MongoDB database layer
⚠️ **Identified Issues**
- Missing error boundaries in React components
- Database queries lack proper indexing
- API routes missing input validation
[Detailed recommendations with implementation examples...]
```
### 🐛 **Debugging Assistant**
```
You: I'm getting a strange error in my API. Here's the stack trace: [paste error]
Claude: Looking at this stack trace, the issue appears to be a race condition in your async middleware. Here's what's happening:
1. **Root Cause**: Multiple requests are modifying shared state
2. **Solution**: Implement proper request isolation
3. **Prevention**: Add comprehensive error handling
[Step-by-step debugging guide follows...]
```
### ⏪ **Safe Experimentation with Checkpoints**
```
You: Can you refactor this entire component to use hooks instead of class components?
Claude: I'll refactor your component to use React hooks. Don't worry - I'll create a checkpoint first so you can easily restore if needed.
[Creates automatic checkpoint]
Here's the refactored component using hooks:
[Shows the new implementation]
If you want to revert these changes, just click "Restore Checkpoint" to go back to your original code instantly.
```
---
## ⚙️ **Configuration**
### Keyboard Shortcuts
| Shortcut | Action |
|----------|--------|
| `Ctrl+Shift+C` | Open Claude Code Chat |
| `Ctrl+Enter` | Send message |
| `@` | Open file picker |
---
## 🎯 **Pro Tips & Tricks**
### 🔥 **File Context Magic**
- 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
### ⚡ **Productivity Boosters**
- **Creates checkpoints automatically** before changes for safe experimentation
- **Restore instantly** if changes don't work out as expected
- Use the stop button to cancel long-running operations
- Copy message contents to reuse Claude's responses
- Open history panel to reference previous conversations
### 🎨 **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
---
## 🔧 **Advanced Features**
### 🛠️ **Tool Integration**
Claude Code Chat provides full access to all Claude Code tools:
- **Bash** - Execute shell commands
- **File Operations** - Read, write, and edit files
- **Search** - Grep and glob pattern matching
- **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!**
### 📊 **Analytics & Monitoring**
- **Real-time cost tracking** - Monitor your API usage
- **Token consumption** - See input/output token counts
- **Response timing** - Track performance metrics
- **Session statistics** - Comprehensive usage analytics
### ⏪ **Checkpoint System**
- **Git-based backups** - Automatic repository creation for safe experimentation
- **Instant restoration** - One-click restore to any previous state
- **Conversation checkpoints** - Every major change creates a restore point
- **Visual timeline** - See and navigate through all your project states
### 🔄 **Session Persistence**
- **Automatic saving** - Every conversation is preserved
- **Smart restoration** - Resume exactly where you left off
- **Cross-session context** - Reference previous conversations
- **Export capability** - Save conversations for later reference
---
## 🤝 **Contributing**
We welcome contributions! Here's how you can help:
1. **🐛 Report Bugs** - Use our issue tracker
2. **💡 Suggest Features** - Share your ideas
3. **🔧 Submit PRs** - Help us improve the codebase
4. **📚 Improve Docs** - Make the documentation better
### Development Setup
```bash
git clone https://github.com/your-repo/claude-code-chat
cd claude-code-chat
npm install
npm run dev
```
---
## 📝 **License**
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## 🙏 **Acknowledgments**
- **Anthropic** - For creating the amazing Claude AI
- **VS Code Team** - For the incredible extension platform
- **Our Community** - For feedback, suggestions, and contributions
---
## 📞 **Support**
Need help? We've got you covered:
- 🐛 **Issues**: [GitHub Issues](https://github.com/your-repo/claude-code-chat/issues)
---
<div align="center">
**⭐ Star us on GitHub if this project helped you!**
[**Download Now**](https://marketplace.visualstudio.com/items?itemName=your-extension-id)
</div>

28
eslint.config.mjs Normal file
View File

@@ -0,0 +1,28 @@
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
export default [{
files: ["**/*.ts"],
}, {
plugins: {
"@typescript-eslint": typescriptEslint,
},
languageOptions: {
parser: tsParser,
ecmaVersion: 2022,
sourceType: "module",
},
rules: {
"@typescript-eslint/naming-convention": ["warn", {
selector: "import",
format: ["camelCase", "PascalCase"],
}],
curly: "warn",
eqeqeq: "warn",
"no-throw-literal": "warn",
semi: "warn",
},
}];

BIN
icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 689 KiB

3445
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

130
package.json Normal file
View File

@@ -0,0 +1,130 @@
{
"name": "claude-code-chat",
"displayName": "claude-code-chat",
"description": "Beautiful Claude Code Chat Interface for VS Code",
"version": "0.0.1",
"engines": {
"vscode": "^1.100.0"
},
"categories": [
"Other"
],
"icon": "icon.png",
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "claude-code-chat.openChat",
"title": "Open Claude Code Chat",
"category": "Claude Code Chat",
"icon": "icon.png"
}
],
"keybindings": [
{
"command": "claude-code-chat.openChat",
"key": "ctrl+shift+c",
"mac": "cmd+shift+c"
}
],
"menus": {
"commandPalette": [
{
"command": "claude-code-chat.openChat"
}
],
"editor/context": [
{
"command": "claude-code-chat.openChat",
"group": "claude@1",
"when": "editorTextFocus"
}
],
"editor/title": [
{
"command": "claude-code-chat.openChat",
"group": "navigation@1",
"when": "true"
}
],
"editor/title/context": [
{
"command": "claude-code-chat.openChat",
"group": "claude@1"
}
],
"explorer/context": [
{
"command": "claude-code-chat.openChat",
"group": "claude@1"
}
],
"scm/title": [
{
"command": "claude-code-chat.openChat",
"group": "navigation@1",
"when": "true"
}
],
"view/title": [
{
"command": "claude-code-chat.openChat",
"group": "navigation@1",
"when": "view == workbench.explorer.fileView"
}
],
"touchBar": [
{
"command": "claude-code-chat.openChat",
"group": "editing",
"when": "true"
}
],
"menuBar/file": [
{
"command": "claude-code-chat.openChat",
"group": "1_new@1"
}
]
},
"views": {
"claude-code-chat": [
{
"id": "claude-code-chat.chat",
"name": "Claude Code Chat",
"when": "true",
"icon": "icon.png",
"contextualTitle": "Claude Code Chat"
}
]
},
"viewsContainers": {
"activitybar": [
{
"id": "claude-code-chat",
"title": "Claude Code Chat",
"icon": "icon.png"
}
]
}
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src",
"test": "vscode-test"
},
"devDependencies": {
"@types/vscode": "^1.100.0",
"@types/mocha": "^10.0.10",
"@types/node": "20.x",
"@typescript-eslint/eslint-plugin": "^8.31.1",
"@typescript-eslint/parser": "^8.31.1",
"eslint": "^9.25.1",
"typescript": "^5.8.3",
"@vscode/test-cli": "^0.0.10",
"@vscode/test-electron": "^2.5.2"
}
}

3372
src/extension.ts Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,15 @@
import * as assert from 'assert';
// You can import and use all API from the 'vscode' module
// as well as import your extension to test it
import * as vscode from 'vscode';
// import * as myExtension from '../../extension';
suite('Extension Test Suite', () => {
vscode.window.showInformationMessage('Start all tests.');
test('Sample test', () => {
assert.strictEqual(-1, [1, 2, 3].indexOf(5));
assert.strictEqual(-1, [1, 2, 3].indexOf(0));
});
});

17
tsconfig.json Normal file
View File

@@ -0,0 +1,17 @@
{
"compilerOptions": {
"module": "Node16",
"target": "ES2022",
"outDir": "out",
"lib": [
"ES2022"
],
"sourceMap": true,
"rootDir": "src",
"strict": true, /* enable all strict type-checking options */
/* Additional Checks */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
}
}

View File

@@ -0,0 +1,44 @@
# Welcome to your VS Code Extension
## What's in the folder
* This folder contains all of the files necessary for your extension.
* `package.json` - this is the manifest file in which you declare your extension and command.
* The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesnt yet need to load the plugin.
* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
* The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
* We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
## Get up and running straight away
* Press `F5` to open a new window with your extension loaded.
* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
* Find output from your extension in the debug console.
## Make changes
* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
## Explore the API
* You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`.
## Run tests
* Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner)
* Run the "watch" task via the **Tasks: Run Task** command. Make sure this is running, or tests might not be discovered.
* Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A`
* See the output of the test result in the Test Results view.
* Make changes to `src/test/extension.test.ts` or create new test files inside the `test` folder.
* The provided test runner will only consider files matching the name pattern `**.test.ts`.
* You can create folders inside the `test` folder to structure your tests any way you want.
## Go further
* [Follow UX guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to create extensions that seamlessly integrate with VS Code's native interface and patterns.
* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).
* Integrate to the [report issue](https://code.visualstudio.com/api/get-started/wrapping-up#issue-reporting) flow to get issue and feature requests reported by users.