Add prominent purple "New Agent" button and home screen UI

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

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": {

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;
         });
 

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,15 +13,21 @@ 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', {
         treeDataProvider: agentRunsProvider,
         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}`);
                 }