Merge pull request #172 from devNull-bootloader/main

Add OpenClaude VS Code extension with terminal UI and control center
This commit is contained in:
Kevin Codex
2026-04-03 02:25:03 +08:00
committed by GitHub
7 changed files with 583 additions and 0 deletions

View File

@@ -104,6 +104,11 @@ Best if you want local inference on Apple Silicon with Atomic Chat. See [Advance
---
## VS Code Extension
Want a native VS Code experience? Use the in-repo extension at `vscode-extension/openclaude-vscode` for one-command terminal launch and the `OpenClaude Terminal Black` theme.
## What Works
- **All tools**: Bash, FileRead, FileWrite, FileEdit, Glob, Grep, WebFetch, WebSearch, Agent, MCP, LSP, NotebookEdit, Tasks

View File

@@ -0,0 +1,13 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
"outFiles": ["${workspaceFolder}/out/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
}
]
}

View File

@@ -0,0 +1,44 @@
# OpenClaude VS Code Extension
A sleek VS Code companion for OpenClaude with a visual **Control Center** plus terminal-first workflows.
## Features
- **Control Center sidebar UI** in the Activity Bar:
- Launch OpenClaude
- Open repository/docs
- Open VS Code theme picker
- **Terminal launch command**: `OpenClaude: Launch in Terminal`
- **Built-in dark theme**: `OpenClaude Terminal Black` (terminal-inspired, low-glare, neon accents)
## Requirements
- VS Code `1.95+`
- `openclaude` available in your terminal PATH (`npm install -g @gitlawb/openclaude`)
## Commands
- `OpenClaude: Open Control Center`
- `OpenClaude: Launch in Terminal`
- `OpenClaude: Open Repository`
## Settings
- `openclaude.launchCommand` (default: `openclaude`)
- `openclaude.terminalName` (default: `OpenClaude`)
- `openclaude.useOpenAIShim` (default: `true`)
## Development
From this folder:
```bash
npm run lint
```
To package (optional):
```bash
npm run package
```

View File

@@ -0,0 +1,6 @@
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="128" height="128" rx="20" fill="#0B0F18"/>
<rect x="16" y="20" width="96" height="88" rx="10" fill="#090B10" stroke="#2A3350"/>
<path d="M32 48L46 60L32 72" stroke="#66D9EF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="56" y="68" width="38" height="8" rx="4" fill="#89DD7C"/>
</svg>

After

Width:  |  Height:  |  Size: 434 B

View File

@@ -0,0 +1,102 @@
{
"name": "openclaude-vscode",
"displayName": "OpenClaude",
"description": "Sleek VS Code extension for OpenClaude with a visual Control Center and terminal-aligned theme.",
"version": "0.1.1",
"publisher": "devnull-bootloader",
"engines": {
"vscode": "^1.95.0"
},
"categories": [
"Themes",
"Other"
],
"activationEvents": [
"onStartupFinished",
"onCommand:openclaude.start",
"onCommand:openclaude.openDocs",
"onCommand:openclaude.openControlCenter",
"onView:openclaude.controlCenter"
],
"main": "./src/extension.js",
"contributes": {
"commands": [
{
"command": "openclaude.start",
"title": "OpenClaude: Launch in Terminal",
"category": "OpenClaude"
},
{
"command": "openclaude.openDocs",
"title": "OpenClaude: Open Repository",
"category": "OpenClaude"
},
{
"command": "openclaude.openControlCenter",
"title": "OpenClaude: Open Control Center",
"category": "OpenClaude"
}
],
"viewsContainers": {
"activitybar": [
{
"id": "openclaude",
"title": "OpenClaude",
"icon": "media/openclaude.svg"
}
]
},
"views": {
"openclaude": [
{
"id": "openclaude.controlCenter",
"name": "Control Center",
"type": "webview"
}
]
},
"configuration": {
"title": "OpenClaude",
"properties": {
"openclaude.launchCommand": {
"type": "string",
"default": "openclaude",
"description": "Command run in the integrated terminal when launching OpenClaude."
},
"openclaude.terminalName": {
"type": "string",
"default": "OpenClaude",
"description": "Integrated terminal tab name for OpenClaude sessions."
},
"openclaude.useOpenAIShim": {
"type": "boolean",
"default": false,
"description": "Optionally set CLAUDE_CODE_USE_OPENAI=1 in launched OpenClaude terminals."
}
}
},
"themes": [
{
"label": "OpenClaude Terminal Black",
"uiTheme": "vs-dark",
"path": "./themes/OpenClaude-Terminal-Black.json"
}
]
},
"scripts": {
"lint": "node --check ./src/extension.js",
"package": "npx @vscode/vsce package --no-dependencies"
},
"keywords": [
"openclaude",
"terminal",
"theme",
"cli",
"llm"
],
"repository": {
"type": "git",
"url": "https://github.com/Gitlawb/openclaude"
},
"license": "MIT"
}

View File

@@ -0,0 +1,335 @@
const vscode = require('vscode');
const crypto = require('crypto');
const { exec } = require('child_process');
const { promisify } = require('util');
const execAsync = promisify(exec);
const OPENCLAUDE_REPO_URL = 'https://github.com/Gitlawb/openclaude';
async function isCommandAvailable(command) {
try {
if (!command) {
return false;
}
if (process.platform === 'win32') {
await execAsync(`where ${command}`);
} else {
await execAsync(`command -v ${command}`);
}
return true;
} catch {
return false;
}
}
function getExecutableFromCommand(command) {
return command.trim().split(/\s+/)[0];
}
async function launchOpenClaude() {
const configured = vscode.workspace.getConfiguration('openclaude');
const launchCommand = configured.get('launchCommand', 'openclaude');
const terminalName = configured.get('terminalName', 'OpenClaude');
const shimEnabled = configured.get('useOpenAIShim', false);
const executable = getExecutableFromCommand(launchCommand);
const installed = await isCommandAvailable(executable);
if (!installed) {
const action = await vscode.window.showErrorMessage(
`OpenClaude command not found: ${executable}. Install it with: npm install -g @gitlawb/openclaude`,
'Open Repository'
);
if (action === 'Open Repository') {
await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_REPO_URL));
}
return;
}
const env = {};
if (shimEnabled) {
env.CLAUDE_CODE_USE_OPENAI = '1';
}
const terminal = vscode.window.createTerminal({
name: terminalName,
env,
});
terminal.show(true);
terminal.sendText(launchCommand, true);
}
class OpenClaudeControlCenterProvider {
async resolveWebviewView(webviewView) {
webviewView.webview.options = { enableScripts: true };
const configured = vscode.workspace.getConfiguration('openclaude');
const launchCommand = configured.get('launchCommand', 'openclaude');
const executable = getExecutableFromCommand(launchCommand);
const installed = await isCommandAvailable(executable);
const shimEnabled = configured.get('useOpenAIShim', false);
const shortcut = process.platform === 'darwin' ? 'Cmd+Shift+P' : 'Ctrl+Shift+P';
webviewView.webview.html = this.getHtml(webviewView.webview, {
installed,
shimEnabled,
shortcut,
executable,
});
webviewView.webview.onDidReceiveMessage(async (message) => {
if (message?.type === 'launch') {
await launchOpenClaude();
return;
}
if (message?.type === 'docs') {
await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_REPO_URL));
return;
}
if (message?.type === 'commands') {
await vscode.commands.executeCommand('workbench.action.showCommands');
}
});
}
getHtml(webview, status) {
const nonce = crypto.randomBytes(16).toString('base64');
const runtimeLabel = status.installed ? 'available' : 'missing';
const shimLabel = status.shimEnabled ? 'enabled (CLAUDE_CODE_USE_OPENAI=1)' : 'disabled';
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-${nonce}';" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
--oc-bg-1: #081018;
--oc-bg-2: #0e1b29;
--oc-line: #2f4d63;
--oc-accent: #7fffd4;
--oc-accent-dim: #4db89a;
--oc-text-dim: #94a7b5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
color: var(--vscode-foreground);
background:
radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--oc-accent) 16%, transparent), transparent 45%),
linear-gradient(165deg, var(--oc-bg-1), var(--oc-bg-2));
padding: 14px;
min-height: 100vh;
line-height: 1.45;
letter-spacing: 0.15px;
overflow-x: hidden;
}
.panel {
border: 1px solid color-mix(in srgb, var(--oc-line) 80%, var(--vscode-editorWidget-border));
border-radius: 10px;
background: color-mix(in srgb, var(--oc-bg-1) 78%, var(--vscode-sideBar-background));
box-shadow: 0 0 0 1px rgba(127, 255, 212, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
animation: boot 360ms ease-out;
}
.topbar {
padding: 8px 10px;
font-size: 10px;
text-transform: uppercase;
color: var(--oc-text-dim);
border-bottom: 1px solid var(--oc-line);
background: color-mix(in srgb, var(--oc-bg-2) 74%, black);
display: flex;
justify-content: space-between;
gap: 8px;
}
.boot-dot {
color: var(--oc-accent);
animation: blink 1.2s steps(1, end) infinite;
}
.content {
padding: 12px;
display: grid;
gap: 14px;
}
.title {
color: var(--oc-accent);
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.sub {
color: var(--oc-text-dim);
font-size: 11px;
}
.terminal-box {
border: 1px dashed color-mix(in srgb, var(--oc-line) 78%, white);
border-radius: 8px;
padding: 10px;
background: color-mix(in srgb, var(--oc-bg-2) 78%, black);
font-size: 11px;
display: grid;
gap: 6px;
}
.terminal-row {
color: var(--oc-text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prompt {
color: var(--oc-accent);
}
.cursor::after {
content: "_";
animation: blink 1s steps(1, end) infinite;
margin-left: 1px;
}
.actions {
display: grid;
gap: 8px;
}
.btn {
width: 100%;
border: 1px solid var(--oc-line);
border-radius: 7px;
padding: 10px;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 11px;
letter-spacing: 0.3px;
text-transform: uppercase;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
background: color-mix(in srgb, var(--oc-bg-2) 82%, black);
color: var(--vscode-foreground);
position: relative;
overflow: hidden;
}
.btn::before {
content: ">";
color: var(--oc-accent-dim);
margin-right: 8px;
display: inline-block;
width: 10px;
}
.btn:hover {
border-color: var(--oc-accent-dim);
transform: translateX(2px);
background: color-mix(in srgb, var(--oc-bg-2) 68%, #113642);
}
.btn.primary {
border-color: color-mix(in srgb, var(--oc-accent) 50%, var(--oc-line));
box-shadow: inset 0 0 0 1px rgba(127, 255, 212, 0.12);
}
.hint {
font-size: 10px;
color: var(--oc-text-dim);
border-top: 1px solid var(--oc-line);
padding-top: 10px;
}
.hint code {
font-family: inherit;
color: var(--oc-accent);
background: rgba(0, 0, 0, 0.26);
padding: 2px 5px;
border-radius: 4px;
border: 1px solid rgba(127, 255, 212, 0.14);
}
@keyframes blink {
50% {
opacity: 0;
}
}
@keyframes boot {
from {
transform: translateY(6px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="panel">
<div class="topbar">
<span>openclaude control center</span>
<span class="boot-dot">online</span>
</div>
<div class="content">
<div>
<div class="title">READY FOR INPUT</div>
<div class="sub">Terminal-oriented workflow with direct command access.</div>
</div>
<div class="terminal-box">
<div class="terminal-row"><span class="prompt">$</span> openclaude --status</div>
<div class="terminal-row">runtime: ${runtimeLabel}</div>
<div class="terminal-row">shim: ${shimLabel}</div>
<div class="terminal-row">command: ${status.executable}</div>
<div class="terminal-row"><span class="prompt">$</span> <span class="cursor">awaiting command</span></div>
</div>
<div class="actions">
<button class="btn primary" id="launch">Launch OpenClaude</button>
<button class="btn" id="docs">Open Repository</button>
<button class="btn" id="commands">Open Command Palette</button>
</div>
<div class="hint">
Quick trigger: use <code>${status.shortcut}</code> and run OpenClaude commands from anywhere.
</div>
</div>
</div>
<script nonce="${nonce}">
const vscode = acquireVsCodeApi();
document.getElementById('launch').addEventListener('click', () => vscode.postMessage({ type: 'launch' }));
document.getElementById('docs').addEventListener('click', () => vscode.postMessage({ type: 'docs' }));
document.getElementById('commands').addEventListener('click', () => vscode.postMessage({ type: 'commands' }));
</script>
</body>
</html>`;
}
}
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
const startCommand = vscode.commands.registerCommand('openclaude.start', async () => {
await launchOpenClaude();
});
const openDocsCommand = vscode.commands.registerCommand('openclaude.openDocs', async () => {
await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_REPO_URL));
});
const openUiCommand = vscode.commands.registerCommand('openclaude.openControlCenter', async () => {
await vscode.commands.executeCommand('workbench.view.extension.openclaude');
});
const provider = new OpenClaudeControlCenterProvider();
const providerDisposable = vscode.window.registerWebviewViewProvider('openclaude.controlCenter', provider);
context.subscriptions.push(startCommand, openDocsCommand, openUiCommand, providerDisposable);
}
function deactivate() {}
module.exports = {
activate,
deactivate,
};

View File

@@ -0,0 +1,78 @@
{
"$schema": "vscode://schemas/color-theme",
"name": "OpenClaude Terminal Black",
"type": "dark",
"colors": {
"editor.background": "#090B10",
"editor.foreground": "#D6E2FF",
"editorCursor.foreground": "#66D9EF",
"editorLineNumber.foreground": "#3D4458",
"editorLineNumber.activeForeground": "#7F8AA3",
"editor.selectionBackground": "#1C2333",
"editor.inactiveSelectionBackground": "#141A27",
"editor.wordHighlightBackground": "#1C233344",
"editor.wordHighlightStrongBackground": "#24304B66",
"editorIndentGuide.background1": "#131825",
"editorIndentGuide.activeBackground1": "#2A3350",
"editorBracketMatch.background": "#25304B66",
"editorBracketMatch.border": "#66D9EF",
"terminal.background": "#090B10",
"terminal.foreground": "#D6E2FF",
"terminalCursor.background": "#66D9EF",
"terminalCursor.foreground": "#66D9EF",
"terminal.ansiBlack": "#090B10",
"terminal.ansiRed": "#FF6B6B",
"terminal.ansiGreen": "#89DD7C",
"terminal.ansiYellow": "#F2C14E",
"terminal.ansiBlue": "#5CA9FF",
"terminal.ansiMagenta": "#C792EA",
"terminal.ansiCyan": "#66D9EF",
"terminal.ansiWhite": "#D6E2FF",
"terminal.ansiBrightBlack": "#4A5165",
"terminal.ansiBrightRed": "#FF8787",
"terminal.ansiBrightGreen": "#A4EFA0",
"terminal.ansiBrightYellow": "#FFD479",
"terminal.ansiBrightBlue": "#86C1FF",
"terminal.ansiBrightMagenta": "#D8B0F5",
"terminal.ansiBrightCyan": "#9DE9FF",
"terminal.ansiBrightWhite": "#E8F0FF",
"statusBar.background": "#0F1420",
"statusBar.foreground": "#D6E2FF",
"activityBar.background": "#0D111B",
"activityBar.foreground": "#D6E2FF",
"sideBar.background": "#0B0F18",
"sideBar.foreground": "#B3BDD4",
"titleBar.activeBackground": "#0B0F18",
"titleBar.activeForeground": "#D6E2FF"
},
"tokenColors": [
{
"scope": ["comment", "punctuation.definition.comment"],
"settings": { "foreground": "#5A637B", "fontStyle": "italic" }
},
{
"scope": ["keyword", "storage.type", "storage.modifier"],
"settings": { "foreground": "#C792EA" }
},
{
"scope": ["string", "constant.other.symbol"],
"settings": { "foreground": "#89DD7C" }
},
{
"scope": ["constant.numeric", "constant.language"],
"settings": { "foreground": "#F2C14E" }
},
{
"scope": ["entity.name.function", "support.function"],
"settings": { "foreground": "#5CA9FF" }
},
{
"scope": ["variable", "entity.name.variable"],
"settings": { "foreground": "#D6E2FF" }
},
{
"scope": ["entity.name.type", "support.type", "entity.name.class"],
"settings": { "foreground": "#66D9EF" }
}
]
}