WPS Claude - VS Code Extension

AI coding assistant powered by WPS Claude Code, with a Cursor-style chat interface.

Features

• Sidebar Chat — Cursor-style chat panel in the VS Code sidebar
• Streaming Responses — Real-time streaming of AI responses
• Tool Use Display — Visual cards showing file reads/writes, shell commands, etc.
• Permission Control — Approve/deny tool executions inline or via VS Code notifications
• Auto-approve Modes — Configure ask, autoEdits, or autoAll permission handling
• Session Management — Start new sessions, interrupt ongoing requests

Prerequisites

• wps_claude CLI installed and configured
• Node.js 18+
• WPS AI gateway access (or any OpenAI-compatible API endpoint)

Installation

1. Clone this repo
2. npm install
3. npm run build (builds both extension and webview)
4. In VS Code: "Extensions: Install from VSIX" or press F5 to run in Extension Development Host

Configuration

Open VS Code Settings and search for "WPS Claude":

Usage

1. Open the WPS Claude sidebar (icon with "W" logo, or Ctrl+Shift+L)
2. Type your question in the input box
3. Press Enter to send
4. Approve/deny tool permissions as prompted

Keybindings

• Ctrl+Shift+L — Open WPS Claude chat
• Ctrl+Shift+Alt+N — New session

Architecture

VS Code Extension Host
  └── ClaudeClient (spawns wps_claude CLI)
        ├── stdin  → NDJSON (UserMessage, ControlRequest, ControlResponse)
        └── stdout ← NDJSON (StreamEvent, AssistantMessage, Result, ControlRequest)
  └── ChatViewProvider (WebviewViewProvider)
        └── React webview (Cursor-style chat UI)
              ↕ postMessage communication with extension

Communication flow:

1. Extension spawns wps_claude -p --output-format stream-json --input-format stream-json --verbose --bare
2. User input → NDJSON on stdin → CLI processes → NDJSON on stdout → Extension → Webview
3. Permission prompts appear both in the webview and as VS Code notifications

Build

npm run build          # Build extension (esbuild → dist/extension.js)
npm run build-webview  # Build webview  (esbuild → media/webview.js + webview.css)
npm run watch          # Watch extension changes
npm run watch-webview  # Watch webview changes

Packaging (VSIX)

生成可分发的 .vsix 安装包：

# 1. 安装打包工具（全局安装一次即可）
npm install -g @vscode/vsce

# 2. 构建产物
npm run build && npm run build-webview

# 3. 打包为 .vsix
vsce package
# 输出: wps-claude-vscode-0.1.0.vsix

安装 VSIX：

# 命令行安装
code --install-extension wps-claude-vscode-0.1.0.vsix

# 或在 VS Code 中：Extensions 侧栏 → ⋯ → Install from VSIX...

注意：vsce package 会自动执行 vscode:prepublish 脚本（即 npm run build && npm run build-webview），确保产物是最新的。如果项目中包含 .vscodeignore 文件，可以控制哪些文件被排除在 VSIX 之外以减小体积。

减小包体积

建议创建 .vscodeignore 排除不需要的文件：

.vscode/**
src/**
node_modules/**
docs/**
*.map
.gitignore
tsconfig.json
esbuild.*

有了 .vscodeignore 后，VSIX 只包含 dist/、media/、package.json、README.md 等运行必需文件，体积从数十 MB 缩减到几百 KB。

Development

1. Open this folder in VS Code
2. npm install
3. npm run build && npm run build-webview
4. Press F5 to launch Extension Development Host
5. Make changes, rebuild, reload window to test