From 8e8671fc51bf2c4361d2f1cb5493f10de6cf467b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 2 Apr 2026 15:07:20 +0000 Subject: [PATCH] feat: add visual OpenClaude control center UI in VS Code extension Agent-Logs-Url: https://github.com/devNull-bootloader/openclaude/sessions/30a4694d-1125-4280-a593-74b5e3da601e Co-authored-by: devNull-bootloader <189463177+devNull-bootloader@users.noreply.github.com> --- vscode-extension/openclaude-vscode/README.md | 10 +- .../openclaude-vscode/media/openclaude.svg | 6 + .../openclaude-vscode/package.json | 31 +++- .../openclaude-vscode/src/extension.js | 132 ++++++++++++++++-- 4 files changed, 159 insertions(+), 20 deletions(-) create mode 100644 vscode-extension/openclaude-vscode/media/openclaude.svg diff --git a/vscode-extension/openclaude-vscode/README.md b/vscode-extension/openclaude-vscode/README.md index b90c59fc..9d67cad1 100644 --- a/vscode-extension/openclaude-vscode/README.md +++ b/vscode-extension/openclaude-vscode/README.md @@ -1,11 +1,14 @@ # OpenClaude VS Code Extension -A sleek, terminal-first VS Code companion for OpenClaude. +A sleek VS Code companion for OpenClaude with a visual **Control Center** plus terminal-first workflows. ## Features -- **Launch OpenClaude instantly** in the integrated terminal via `OpenClaude: Launch in Terminal` -- **Open repository/docs quickly** via `OpenClaude: Open Repository` +- **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 @@ -15,6 +18,7 @@ A sleek, terminal-first VS Code companion for OpenClaude. ## Commands +- `OpenClaude: Open Control Center` - `OpenClaude: Launch in Terminal` - `OpenClaude: Open Repository` diff --git a/vscode-extension/openclaude-vscode/media/openclaude.svg b/vscode-extension/openclaude-vscode/media/openclaude.svg new file mode 100644 index 00000000..b492c423 --- /dev/null +++ b/vscode-extension/openclaude-vscode/media/openclaude.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/vscode-extension/openclaude-vscode/package.json b/vscode-extension/openclaude-vscode/package.json index 53057bfe..4cd42b1d 100644 --- a/vscode-extension/openclaude-vscode/package.json +++ b/vscode-extension/openclaude-vscode/package.json @@ -1,8 +1,8 @@ { "name": "openclaude-vscode", "displayName": "OpenClaude", - "description": "Sleek terminal-first VS Code extension for launching OpenClaude and using a matching dark hacker-style theme.", - "version": "0.1.0", + "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" @@ -13,7 +13,9 @@ ], "activationEvents": [ "onCommand:openclaude.start", - "onCommand:openclaude.openDocs" + "onCommand:openclaude.openDocs", + "onCommand:openclaude.openControlCenter", + "onView:openclaude.controlCenter" ], "main": "./src/extension.js", "contributes": { @@ -27,8 +29,31 @@ "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": { diff --git a/vscode-extension/openclaude-vscode/src/extension.js b/vscode-extension/openclaude-vscode/src/extension.js index 537954a3..b59725a3 100644 --- a/vscode-extension/openclaude-vscode/src/extension.js +++ b/vscode-extension/openclaude-vscode/src/extension.js @@ -1,30 +1,134 @@ const vscode = require('vscode'); +function launchOpenClaude() { + const configured = vscode.workspace.getConfiguration('openclaude'); + const launchCommand = configured.get('launchCommand', 'openclaude'); + const terminalName = configured.get('terminalName', 'OpenClaude'); + + const terminal = vscode.window.createTerminal({ + name: terminalName, + env: { + CLAUDE_CODE_USE_OPENAI: configured.get('useOpenAIShim', true) ? '1' : undefined, + }, + }); + + terminal.show(true); + terminal.sendText(launchCommand, true); +} + +class OpenClaudeControlCenterProvider { + resolveWebviewView(webviewView) { + webviewView.webview.options = { enableScripts: true }; + webviewView.webview.html = this.getHtml(webviewView.webview); + + webviewView.webview.onDidReceiveMessage(async (message) => { + if (message?.type === 'launch') { + launchOpenClaude(); + return; + } + + if (message?.type === 'docs') { + await vscode.env.openExternal(vscode.Uri.parse('https://github.com/devNull-bootloader/openclaude')); + return; + } + + if (message?.type === 'theme') { + await vscode.commands.executeCommand('workbench.action.selectTheme'); + } + }); + } + + getHtml(webview) { + const nonce = String(Date.now()); + return ` + + + + + + + + +
+
OpenClaude Control Center
+
Launch OpenClaude, jump to docs, and quickly tune the editor vibe.
+ + + +
+ + +`; + } +} + /** * @param {vscode.ExtensionContext} context */ function activate(context) { const startCommand = vscode.commands.registerCommand('openclaude.start', async () => { - const configured = vscode.workspace.getConfiguration('openclaude'); - const launchCommand = configured.get('launchCommand', 'openclaude'); - const terminalName = configured.get('terminalName', 'OpenClaude'); - - const terminal = vscode.window.createTerminal({ - name: terminalName, - env: { - CLAUDE_CODE_USE_OPENAI: configured.get('useOpenAIShim', true) ? '1' : undefined, - }, - }); - - terminal.show(true); - terminal.sendText(launchCommand, true); + launchOpenClaude(); }); const openDocsCommand = vscode.commands.registerCommand('openclaude.openDocs', async () => { await vscode.env.openExternal(vscode.Uri.parse('https://github.com/devNull-bootloader/openclaude')); }); - context.subscriptions.push(startCommand, openDocsCommand); + 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() {}