From 9e9be388161b2e6988e72a51c4522553424b584d Mon Sep 17 00:00:00 2001 From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com> Date: Fri, 12 Sep 2025 16:19:27 +0000 Subject: [PATCH] Add prominent purple 'New Agent' button and home screen UI - Create new HomeViewProvider with webview-based interface - Add purple 'New Agent' button similar to CLI design - Include built-in prompt input with helpful examples - Support keyboard shortcuts (Ctrl/Cmd + Enter) - Update package.json to register new home view - Maintain same API routes as CLI for consistency - Add client identifier header for tracking - Update README with new home screen features This makes the IDE extension work similarly to the CLI background agents with a more prominent and user-friendly interface. --- README.md | 20 +- package.json | 15 +- src/api/ApiClient.ts | 2 + src/extension.ts | 12 +- src/providers/HomeViewProvider.ts | 301 ++++++++++++++++++++++++++++++ 5 files changed, 339 insertions(+), 11 deletions(-) create mode 100644 src/providers/HomeViewProvider.ts diff --git a/README.md b/README.md index 1a194b2..a54b097 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,15 @@ A VSCode extension for [Codegen](https://codegen.com) that allows you to create ## Features +🏠 **Home Screen** +- Prominent purple "New Agent" button for easy access +- Intuitive interface similar to the Codegen CLI +- Built-in prompt input with helpful examples +- Keyboard shortcuts (Ctrl/Cmd + Enter to create) + 🤖 **Agent Management** - View your recent agent runs in a dedicated sidebar -- Create new agents with custom prompts +- Create new background agents with custom prompts - Monitor agent status with real-time updates - Open agent runs in your browser @@ -36,8 +42,16 @@ A VSCode extension for [Codegen](https://codegen.com) that allows you to create ### Creating Agents -1. Click the "+" button in the Codegen sidebar -2. Enter your agent prompt (e.g., "Fix the bug in the login component") +**Method 1: Home Screen (Recommended)** +1. Open the Codegen sidebar and go to the "Home" view +2. Click the purple "New Agent" button +3. Enter your agent prompt in the text area (e.g., "Fix the bug in the login component") +4. Press the "New Agent" button or use Ctrl/Cmd + Enter +5. The agent will be created and you can monitor its progress + +**Method 2: Command Palette** +1. Use `Codegen: Create New Agent` command +2. Enter your agent prompt in the input box 3. The agent will be created and you can monitor its progress ### Viewing Agent Runs diff --git a/package.json b/package.json index c17c1d0..c3545b6 100644 --- a/package.json +++ b/package.json @@ -74,22 +74,23 @@ }, "views": { "codegen": [ + { + "id": "codegenHome", + "name": "Home", + "type": "webview" + }, { "id": "codegenAgentRuns", "name": "Recent Agent Runs", "when": "codegen.authenticated" - }, - { - "id": "codegenWelcome", - "name": "Welcome", - "when": "!codegen.authenticated" } ] }, "viewsWelcome": [ { - "view": "codegenWelcome", - "contents": "Welcome to Codegen! 🤖\n\nTo get started, you need to authenticate with your Codegen account.\n\n[Login to Codegen](command:codegen.login)\n\nOnce logged in, you'll be able to:\n• View your recent agent runs\n• Create new agents\n• Manage your code automation\n\nVisit [codegen.com](https://codegen.com) to learn more." + "view": "codegenAgentRuns", + "contents": "Your recent agent runs will appear here once you create them using the Home view above.", + "when": "codegen.authenticated" } ], "menus": { diff --git a/src/api/ApiClient.ts b/src/api/ApiClient.ts index c024b44..1d5cffe 100644 --- a/src/api/ApiClient.ts +++ b/src/api/ApiClient.ts @@ -46,6 +46,8 @@ export class ApiClient { if (token) { config.headers.Authorization = `Bearer ${token}`; } + // Add client identifier similar to CLI + config.headers['x-codegen-client'] = 'codegen__ide_extension'; return config; }); diff --git a/src/extension.ts b/src/extension.ts index d6f6777..c13818a 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -1,5 +1,6 @@ import * as vscode from 'vscode'; import { AgentRunsProvider } from './providers/AgentRunsProvider'; +import { HomeViewProvider } from './providers/HomeViewProvider'; import { AuthManager } from './auth/AuthManager'; import { ApiClient } from './api/ApiClient'; @@ -12,8 +13,9 @@ export function activate(context: vscode.ExtensionContext) { // Initialize API client const apiClient = new ApiClient(authManager); - // Initialize agent runs provider + // Initialize providers const agentRunsProvider = new AgentRunsProvider(apiClient, authManager); + const homeViewProvider = new HomeViewProvider(context.extensionUri, apiClient, authManager); // Register tree data provider vscode.window.createTreeView('codegenAgentRuns', { @@ -21,6 +23,11 @@ export function activate(context: vscode.ExtensionContext) { showCollapseAll: true }); + // Register webview provider + context.subscriptions.push( + vscode.window.registerWebviewViewProvider('codegenHome', homeViewProvider) + ); + // Set authentication context vscode.commands.executeCommand('setContext', 'codegen.authenticated', authManager.isAuthenticated()); @@ -30,12 +37,14 @@ export function activate(context: vscode.ExtensionContext) { await authManager.login(); vscode.commands.executeCommand('setContext', 'codegen.authenticated', authManager.isAuthenticated()); agentRunsProvider.refresh(); + homeViewProvider.refresh(); }), vscode.commands.registerCommand('codegen.logout', async () => { await authManager.logout(); vscode.commands.executeCommand('setContext', 'codegen.authenticated', authManager.isAuthenticated()); agentRunsProvider.refresh(); + homeViewProvider.refresh(); }), vscode.commands.registerCommand('codegen.showAgentRuns', () => { @@ -72,6 +81,7 @@ export function activate(context: vscode.ExtensionContext) { } }); agentRunsProvider.refresh(); + homeViewProvider.refresh(); } catch (error) { vscode.window.showErrorMessage(`Failed to create agent: ${error}`); } diff --git a/src/providers/HomeViewProvider.ts b/src/providers/HomeViewProvider.ts new file mode 100644 index 0000000..729a833 --- /dev/null +++ b/src/providers/HomeViewProvider.ts @@ -0,0 +1,301 @@ +import * as vscode from 'vscode'; +import { ApiClient, AgentRun } from '../api/ApiClient'; +import { AuthManager } from '../auth/AuthManager'; + +export class HomeViewProvider implements vscode.WebviewViewProvider { + public static readonly viewType = 'codegenHome'; + + private _view?: vscode.WebviewView; + + constructor( + private readonly _extensionUri: vscode.Uri, + private readonly apiClient: ApiClient, + private readonly authManager: AuthManager + ) {} + + public resolveWebviewView( + webviewView: vscode.WebviewView, + context: vscode.WebviewViewResolveContext, + _token: vscode.CancellationToken, + ) { + this._view = webviewView; + + webviewView.webview.options = { + enableScripts: true, + localResourceRoots: [ + this._extensionUri + ] + }; + + webviewView.webview.html = this._getHtmlForWebview(webviewView.webview); + + webviewView.webview.onDidReceiveMessage(async (data) => { + switch (data.type) { + case 'createAgent': + await this._createAgent(data.prompt); + break; + case 'login': + await vscode.commands.executeCommand('codegen.login'); + this._updateView(); + break; + case 'refresh': + this._updateView(); + break; + } + }); + + // Update view when authentication changes + this._updateView(); + } + + private async _createAgent(prompt: string) { + if (!this.authManager.isAuthenticated()) { + vscode.window.showErrorMessage('Please login first'); + return; + } + + if (!prompt?.trim()) { + vscode.window.showErrorMessage('Please enter a prompt'); + return; + } + + try { + const agentRun = await this.apiClient.createAgentRun(prompt.trim()); + vscode.window.showInformationMessage( + `Agent run created successfully! ID: ${agentRun.id}`, + 'View in Browser' + ).then(selection => { + if (selection === 'View in Browser' && agentRun.web_url) { + vscode.env.openExternal(vscode.Uri.parse(agentRun.web_url)); + } + }); + + // Refresh the agent runs view + vscode.commands.executeCommand('codegen.refreshAgentRuns'); + this._updateView(); + } catch (error) { + vscode.window.showErrorMessage(`Failed to create agent: ${error}`); + } + } + + private async _updateView() { + if (this._view) { + this._view.webview.html = this._getHtmlForWebview(this._view.webview); + } + } + + private _getHtmlForWebview(webview: vscode.Webview) { + const isAuthenticated = this.authManager.isAuthenticated(); + + return ` + + + + + Codegen Home + + + +
+ +
AI-powered code agents
+
+ + ${isAuthenticated ? ` +
+ + +
+ Create a new background agent that will work on your codebase. Your agent will appear in the Recent Agent Runs section below. +
+
+ ` : ` +
+
+ Welcome to Codegen! To get started, you need to authenticate with your Codegen account. +
+ +
+ Once logged in, you'll be able to create and manage AI agents that help with your code tasks. +
+
+ `} + + + + `; + } + + public refresh() { + this._updateView(); + } +}