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

@@ -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`
+- **Control Center sidebar UI** in the Activity Bar:
-- **Open repository/docs quickly** via `OpenClaude: Open Repository`
+  - 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`
 

vscode-extension/openclaude-vscode/media/openclaude.svg

@@ -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>

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.",
+  "description": "Sleek VS Code extension for OpenClaude with a visual Control Center and terminal-aligned theme.",
-  "version": "0.1.0",
+  "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": {

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 `<!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>
+    body {
+      font-family: var(--vscode-font-family);
+      color: var(--vscode-foreground);
+      background: var(--vscode-sideBar-background);
+      padding: 12px;
+    }
+    .card {
+      border: 1px solid var(--vscode-editorWidget-border);
+      border-radius: 10px;
+      padding: 12px;
+      background: color-mix(in srgb, var(--vscode-editor-background) 92%, #000 8%);
+      display: grid;
+      gap: 10px;
+    }
+    .title {
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0.2px;
+    }
+    .sub {
+      font-size: 12px;
+      opacity: 0.85;
+      line-height: 1.4;
+    }
+    button {
+      border: 0;
+      border-radius: 8px;
+      padding: 8px 10px;
+      cursor: pointer;
+      color: var(--vscode-button-foreground);
+      background: var(--vscode-button-background);
+      text-align: left;
+      font-size: 12px;
+    }
+    button.secondary {
+      color: var(--vscode-button-secondaryForeground);
+      background: var(--vscode-button-secondaryBackground);
+    }
+    button:hover {
+      filter: brightness(1.05);
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="title">OpenClaude Control Center</div>
+    <div class="sub">Launch OpenClaude, jump to docs, and quickly tune the editor vibe.</div>
+    <button id="launch">⚡ Launch OpenClaude</button>
+    <button id="docs" class="secondary">📚 Open Repository</button>
+    <button id="theme" class="secondary">🎨 Pick Theme</button>
+  </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('theme').addEventListener('click', () => vscode.postMessage({ type: 'theme' }));
+  </script>
+</body>
+</html>`;
+  }
+}
+
 /**
  * @param {vscode.ExtensionContext} context
  */
 function activate(context) {
   const startCommand = vscode.commands.registerCommand('openclaude.start', async () => {
-    const configured = vscode.workspace.getConfiguration('openclaude');
+    launchOpenClaude();
-    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);
   });
 
   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() {}