-
-
openclaude control center
-
online
+
+
+
+
+
+ ${viewModel.detailSections.map(renderDetailSection).join('')}
+
+
+
+
+ Launch & Project
+ ${renderActionButton(viewModel.actions.primary, 'primary')}
+
+ ${renderActionButton(viewModel.actions.launchRoot)}
+ ${profileActionOrEmpty}
+
+
+
+
+ Quick Links
+ Settings and workspace status stay in view here. Reference links stay secondary.
+
+
+ Open Setup Guide
+ Jump to install and provider setup docs.
+
+
+ Open Repository
+ Browse the upstream OpenClaude project.
+
+
+ Open Command Palette
+ Access VS Code and OpenClaude commands quickly.
+
+
+
+
+
+
-
-
READY FOR INPUT
-
Terminal-oriented workflow with direct command access.
-
-
-
-
$ openclaude --status
-
runtime: ${runtimeLabel}
-
shim: ${shimLabel}
-
command: ${status.executable}
-
$ awaiting command
-
-
-
- Launch OpenClaude
- Open Repository
- Open Command Palette
-
-
-
- Quick trigger: use ${status.shortcut} and run OpenClaude commands from anywhere.
-
-
+
`;
+}
+
+class OpenClaudeControlCenterProvider {
+ constructor() {
+ this.webviewView = null;
+ }
+
+ async resolveWebviewView(webviewView) {
+ this.webviewView = webviewView;
+ webviewView.webview.options = { enableScripts: true };
+
+ webviewView.onDidDispose(() => {
+ if (this.webviewView === webviewView) {
+ this.webviewView = null;
+ }
+ });
+
+ webviewView.webview.onDidReceiveMessage(async message => {
+ switch (message?.type) {
+ case 'launch':
+ await launchOpenClaude();
+ break;
+ case 'launchRoot':
+ await launchOpenClaude({ requireWorkspace: true });
+ break;
+ case 'openProfile':
+ await openWorkspaceProfile();
+ break;
+ case 'repo':
+ await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_REPO_URL));
+ break;
+ case 'setup':
+ await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_SETUP_URL));
+ break;
+ case 'commands':
+ await vscode.commands.executeCommand('workbench.action.showCommands');
+ break;
+ case 'refresh':
+ default:
+ break;
+ }
+
+ await this.refresh();
+ });
+
+ await this.refresh();
+ }
+
+ async refresh() {
+ if (!this.webviewView) {
+ return;
+ }
+
+ try {
+ const status = await collectControlCenterState();
+ this.webviewView.webview.html = this.getHtml(status);
+ } catch (error) {
+ this.webviewView.webview.html = this.getErrorHtml(error);
+ }
+ }
+
+ getErrorHtml(error) {
+ const nonce = crypto.randomBytes(16).toString('base64');
+ const message =
+ error instanceof Error ? error.message : 'Unknown Control Center error';
+
+ return `
+
+
+
+
+
+
+
+
+
+
Control Center Error
+
${escapeHtml(message)}
+
Refresh
+
+
+
+`;
+ }
+
+ getHtml(status) {
+ const nonce = crypto.randomBytes(16).toString('base64');
+ return renderControlCenterHtml(status, { nonce, platform: process.platform });
}
}
@@ -309,22 +1041,71 @@ class OpenClaudeControlCenterProvider {
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
+ const provider = new OpenClaudeControlCenterProvider();
+ const refreshProvider = () => {
+ void provider.refresh();
+ };
+
const startCommand = vscode.commands.registerCommand('openclaude.start', async () => {
await launchOpenClaude();
});
+ const startInWorkspaceRootCommand = vscode.commands.registerCommand(
+ 'openclaude.startInWorkspaceRoot',
+ async () => {
+ await launchOpenClaude({ requireWorkspace: true });
+ },
+ );
+
const openDocsCommand = vscode.commands.registerCommand('openclaude.openDocs', async () => {
await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_REPO_URL));
});
+ const openSetupDocsCommand = vscode.commands.registerCommand(
+ 'openclaude.openSetupDocs',
+ async () => {
+ await vscode.env.openExternal(vscode.Uri.parse(OPENCLAUDE_SETUP_URL));
+ },
+ );
+
+ const openWorkspaceProfileCommand = vscode.commands.registerCommand(
+ 'openclaude.openWorkspaceProfile',
+ async () => {
+ await openWorkspaceProfile();
+ },
+ );
+
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);
+ const providerDisposable = vscode.window.registerWebviewViewProvider(
+ 'openclaude.controlCenter',
+ provider,
+ );
- context.subscriptions.push(startCommand, openDocsCommand, openUiCommand, providerDisposable);
+ const profileWatcher = vscode.workspace.createFileSystemWatcher(`**/${PROFILE_FILE_NAME}`);
+
+ context.subscriptions.push(
+ startCommand,
+ startInWorkspaceRootCommand,
+ openDocsCommand,
+ openSetupDocsCommand,
+ openWorkspaceProfileCommand,
+ openUiCommand,
+ providerDisposable,
+ profileWatcher,
+ vscode.workspace.onDidChangeConfiguration(event => {
+ if (event.affectsConfiguration('openclaude')) {
+ refreshProvider();
+ }
+ }),
+ vscode.workspace.onDidChangeWorkspaceFolders(refreshProvider),
+ vscode.window.onDidChangeActiveTextEditor(refreshProvider),
+ profileWatcher.onDidCreate(refreshProvider),
+ profileWatcher.onDidChange(refreshProvider),
+ profileWatcher.onDidDelete(refreshProvider),
+ );
}
function deactivate() {}
@@ -332,4 +1113,7 @@ function deactivate() {}
module.exports = {
activate,
deactivate,
+ OpenClaudeControlCenterProvider,
+ renderControlCenterHtml,
+ resolveLaunchTargets,
};
diff --git a/vscode-extension/openclaude-vscode/src/extension.test.js b/vscode-extension/openclaude-vscode/src/extension.test.js
new file mode 100644
index 00000000..474ed715
--- /dev/null
+++ b/vscode-extension/openclaude-vscode/src/extension.test.js
@@ -0,0 +1,249 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const Module = require('node:module');
+
+function createStatus(overrides = {}) {
+ return {
+ installed: true,
+ executable: 'openclaude',
+ launchCommand: 'openclaude --project-aware',
+ terminalName: 'OpenClaude',
+ shimEnabled: false,
+ workspaceFolder: '/workspace/openclaude/very/long/path/example-project',
+ workspaceSourceLabel: 'active editor workspace',
+ launchCwd: '/workspace/openclaude/very/long/path/example-project',
+ launchCwdLabel: '/workspace/openclaude/very/long/path/example-project',
+ canLaunchInWorkspaceRoot: true,
+ profileStatusLabel: 'Found',
+ profileStatusHint: '/workspace/openclaude/very/long/path/example-project/.openclaude-profile.json',
+ workspaceProfilePath: '/workspace/openclaude/very/long/path/example-project/.openclaude-profile.json',
+ providerState: {
+ label: 'Codex',
+ detail: 'gpt-5.4',
+ source: 'profile',
+ },
+ providerSourceLabel: 'saved profile',
+ ...overrides,
+ };
+}
+
+function loadExtension() {
+ const extensionPath = require.resolve('./extension');
+ delete require.cache[extensionPath];
+
+ const originalLoad = Module._load;
+ Module._load = function patchedLoad(request, parent, isMain) {
+ if (request === 'vscode') {
+ return {
+ workspace: {},
+ window: {},
+ env: {},
+ commands: {},
+ Uri: { parse: value => value, file: value => value },
+ };
+ }
+
+ return originalLoad.call(this, request, parent, isMain);
+ };
+
+ try {
+ return require('./extension');
+ } finally {
+ Module._load = originalLoad;
+ }
+}
+
+test('renderControlCenterHtml uses the OpenClaude wordmark, status rail, and warm action hierarchy', () => {
+ const { renderControlCenterHtml } = loadExtension();
+ const html = renderControlCenterHtml(createStatus(), { nonce: 'test-nonce', platform: 'win32' });
+
+ assert.match(html, /Open
Claude<\/span>/);
+ assert.match(html, /class="status-rail"/);
+ assert.match(html, /\.sunset-gradient\s*\{/);
+ assert.match(html, /class="action-button primary" id="launch"/);
+ assert.match(html, /class="action-button secondary" id="launchRoot"/);
+ assert.match(
+ html,
+ /title="\/workspace\/openclaude\/very\/long\/path\/example-project"[^>]*>\/workspace\/openclaude\/very\/long\/path\/example-project<\//,
+ );
+});
+
+test('renderControlCenterHtml shows explicit disabled and empty states when workspace data is missing', () => {
+ const { renderControlCenterHtml } = loadExtension();
+ const html = renderControlCenterHtml(
+ createStatus({
+ workspaceFolder: null,
+ workspaceSourceLabel: 'no workspace open',
+ launchCwd: null,
+ launchCwdLabel: 'VS Code default terminal cwd',
+ canLaunchInWorkspaceRoot: false,
+ profileStatusLabel: 'No workspace',
+ profileStatusHint: 'Open a workspace folder to detect a saved profile',
+ workspaceProfilePath: null,
+ }),
+ { nonce: 'test-nonce', platform: 'linux' },
+ );
+
+ assert.match(
+ html,
+ /class="action-button secondary" id="launchRoot"[^>]*disabled[^>]*>[\s\S]*Open a workspace folder to enable workspace-root launch/,
+ );
+ assert.match(html, /No workspace profile yet/);
+ assert.match(html, /Open a workspace folder to detect a saved profile/);
+ assert.doesNotMatch(html, /id="openProfile"/);
+});
+
+test('OpenClaudeControlCenterProvider.getHtml supplies a nonce to the redesigned renderer', () => {
+ const { OpenClaudeControlCenterProvider } = loadExtension();
+ const provider = new OpenClaudeControlCenterProvider();
+
+ assert.doesNotThrow(() => provider.getHtml(createStatus()));
+
+ const html = provider.getHtml(createStatus());
+ assert.match(html, /script-src 'nonce-[^']+'/);
+ assert.match(html, /',
+ workspaceSourceLabel: 'active workspace ',
+ launchCwdLabel: '">',
+ profileStatusHint: '',
+ workspaceProfilePath: '"/>',
+ providerState: {
+ label: 'Provider ">