feat: initial VS Code extension for OpenClaude

Introduce OpenClaude as a first-class VS Code extension with:

- Built-in Control Center sidebar for seamless workflow integration
- Terminal-first design with authentic monospace UI and ASCII styling
- Quick-launch buttons for OpenClaude terminal, repository access, and command palette
- Status display showing runtime and OpenAI shim configuration
- Dark theme optimized for focus and extended development sessions
- Proper extension manifest with activation events and contribution points
- Debug configuration for local development

This extension provides developers with direct access to OpenClaude
without leaving VS Code, enabling a tighter integration with the editor.

vscode-extension/openclaude-vscode/.vscode/launch.json

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

vscode-extension/openclaude-vscode/package.json

@@ -12,6 +12,7 @@
     "Other"
   ],
   "activationEvents": [
+    "onStartupFinished",
     "onCommand:openclaude.start",
     "onCommand:openclaude.openDocs",
     "onCommand:openclaude.openControlCenter",

vscode-extension/openclaude-vscode/src/extension.js

@@ -33,8 +33,8 @@ class OpenClaudeControlCenterProvider {
         return;
       }
 
-      if (message?.type === 'theme') {
+      if (message?.type === 'commands') {
-        await vscode.commands.executeCommand('workbench.action.selectTheme');
+        await vscode.commands.executeCommand('workbench.action.showCommands');
       }
     });
   }
@@ -48,62 +48,196 @@ class OpenClaudeControlCenterProvider {
   <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 {
+    :root {
-      font-family: var(--vscode-font-family);
+      --oc-bg-1: #081018;
-      color: var(--vscode-foreground);
+      --oc-bg-2: #0e1b29;
-      background: var(--vscode-sideBar-background);
+      --oc-line: #2f4d63;
-      padding: 12px;
+      --oc-accent: #7fffd4;
+      --oc-accent-dim: #4db89a;
+      --oc-text-dim: #94a7b5;
     }
-    .card {
+    * {
-      border: 1px solid var(--vscode-editorWidget-border);
+      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;
-      background: color-mix(in srgb, var(--vscode-editor-background) 92%, #000 8%);
       display: grid;
-      gap: 10px;
+      gap: 14px;
     }
     .title {
-      font-size: 13px;
+      color: var(--oc-accent);
+      font-size: 14px;
       font-weight: 700;
-      letter-spacing: 0.2px;
+      margin-bottom: 4px;
     }
     .sub {
-      font-size: 12px;
+      color: var(--oc-text-dim);
-      opacity: 0.85;
+      font-size: 11px;
-      line-height: 1.4;
     }
-    button {
+    .terminal-box {
-      border: 0;
+      border: 1px dashed color-mix(in srgb, var(--oc-line) 78%, white);
       border-radius: 8px;
-      padding: 8px 10px;
+      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;
-      color: var(--vscode-button-foreground);
-      background: var(--vscode-button-background);
       text-align: left;
-      font-size: 12px;
+      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;
     }
-    button.secondary {
+    .btn::before {
-      color: var(--vscode-button-secondaryForeground);
+      content: ">";
-      background: var(--vscode-button-secondaryBackground);
+      color: var(--oc-accent-dim);
+      margin-right: 8px;
+      display: inline-block;
+      width: 10px;
     }
-    button:hover {
+    .btn:hover {
-      filter: brightness(1.05);
+      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="card">
+  <div class="panel">
-    <div class="title">OpenClaude Control Center</div>
+    <div class="topbar">
-    <div class="sub">Launch OpenClaude, jump to docs, and quickly tune the editor vibe.</div>
+      <span>openclaude control center</span>
-    <button id="launch">⚡ Launch OpenClaude</button>
+      <span class="boot-dot">online</span>
-    <button id="docs" class="secondary">📚 Open Repository</button>
+    </div>
-    <button id="theme" class="secondary">🎨 Pick Theme</button>
+    <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: active</div>
+        <div class="terminal-row">shim: CLAUDE_CODE_USE_OPENAI=1</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>Ctrl+Shift+P</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('theme').addEventListener('click', () => vscode.postMessage({ type: 'theme' }));
+    document.getElementById('commands').addEventListener('click', () => vscode.postMessage({ type: 'commands' }));
   </script>
 </body>
 </html>`;