fix: open Claude side panel by clicking extension icon

Instead of navigating to the sidepanel URL (which opens it as a broken
full tab), click on the pinned extension icon at coordinates (1775, 55)
to open the proper side panel.

- Add OpenSidePanel() function that uses Computer.ClickMouse API
- Add ExtensionIconX/Y constants for the click coordinates
- Update send, status, and chat commands to call OpenSidePanel first
- Update Playwright scripts to wait for the side panel to appear
  instead of trying to navigate to it

Author: rgarcia

cmd/claude/chat.go

@@ -61,6 +61,11 @@ func runChatWithBrowser(ctx context.Context, client kernel.Client, browserID str
 		return fmt.Errorf("failed to get browser: %w", err)
 	}
 
+	// Open the side panel by clicking the extension icon
+	if err := claude.OpenSidePanel(ctx, client, browser.SessionID); err != nil {
+		return fmt.Errorf("failed to open side panel: %w", err)
+	}
+
 	// Check Claude status first
 	pterm.Info.Println("Checking Claude extension status...")
 	statusResult, err := client.Browsers.Playwright.Execute(ctx, browser.SessionID, kernel.BrowserPlaywrightExecuteParams{

cmd/claude/send.go

@@ -107,6 +107,11 @@ func runSend(cmd *cobra.Command, args []string) error {
 		return fmt.Errorf("failed to get browser: %w", err)
 	}
 
+	// Open the side panel by clicking the extension icon
+	if err := claude.OpenSidePanel(ctx, client, browser.SessionID); err != nil {
+		return fmt.Errorf("failed to open side panel: %w", err)
+	}
+
 	// Build the script with environment variables
 	script := fmt.Sprintf(`
 process.env.CLAUDE_MESSAGE = %s;

cmd/claude/status.go

@@ -55,6 +55,11 @@ func runStatus(cmd *cobra.Command, args []string) error {
 		return fmt.Errorf("failed to get browser: %w", err)
 	}
 
+	// Open the side panel by clicking the extension icon
+	if err := claude.OpenSidePanel(ctx, client, browser.SessionID); err != nil {
+		return fmt.Errorf("failed to open side panel: %w", err)
+	}
+
 	// Execute the status check script
 	if outputFormat != "json" {
 		pterm.Info.Println("Checking Claude extension status...")

internal/claude/constants.go

@@ -32,4 +32,12 @@ const (
 
 	// BundleAuthStorageDir is the directory name for auth storage within the bundle
 	BundleAuthStorageDir = "auth-storage"
+
+	// ExtensionIconX is the X coordinate for clicking the pinned Claude extension icon
+	// to open the side panel (for 1920x1080 screen resolution)
+	ExtensionIconX = 1775
+
+	// ExtensionIconY is the Y coordinate for clicking the pinned Claude extension icon
+	// to open the side panel (for 1920x1080 screen resolution)
+	ExtensionIconY = 55
 )

internal/claude/loader.go

@@ -228,6 +228,15 @@ func pinExtension(ctx context.Context, client kernel.Client, browserID, extensio
 	return nil
 }
 
+// OpenSidePanel clicks on the pinned Claude extension icon to open the side panel.
+// This uses the computer API to click at the known coordinates of the extension icon.
+func OpenSidePanel(ctx context.Context, client kernel.Client, browserID string) error {
+	return client.Browsers.Computer.ClickMouse(ctx, browserID, kernel.BrowserComputerClickMouseParams{
+		X: ExtensionIconX,
+		Y: ExtensionIconY,
+	})
+}
+
 // createTempZip creates a temporary zip file from a directory.
 func createTempZip(srcDir string) (string, error) {
 	tmpFile, err := os.CreateTemp("", "claude-*.zip")

internal/claude/scripts/check_status.js

@@ -1,11 +1,11 @@
 // Check the status of the Claude extension.
 // This script is executed via Kernel's Playwright API.
+// The side panel should already be open (via OpenSidePanel click).
 //
 // Output:
 //   - Returns JSON with extension status information
 
 const EXTENSION_ID = 'fcoeoabgfenejglbffodgkkbkcdhcgfn';
-const SIDEPANEL_URL = `chrome-extension://${EXTENSION_ID}/sidepanel.html?mode=window`;
 
 const status = {
   extensionLoaded: false,
@@ -15,20 +15,26 @@ const status = {
 };
 
 try {
-  // Try to open the sidepanel
-  const sidepanel = await context.newPage();
-  
-  try {
-    await sidepanel.goto(SIDEPANEL_URL, { timeout: 10000 });
-    await sidepanel.waitForLoadState('networkidle', { timeout: 10000 });
-    status.extensionLoaded = true;
-  } catch (e) {
-    status.error = 'Extension not loaded or not accessible';
+  // Wait for the side panel to appear (it was opened by clicking the extension icon)
+  let sidepanel = null;
+  const maxWaitMs = 10000;
+  const startWait = Date.now();
+  while (Date.now() - startWait < maxWaitMs) {
+    sidepanel = context.pages().find(p => p.url().includes('sidepanel.html'));
+    if (sidepanel) break;
+    await new Promise(r => setTimeout(r, 500));
+  }
+
+  if (!sidepanel) {
+    status.error = 'Side panel not found. Extension may not be loaded or pinned.';
     return status;
   }
 
-  // Wait a bit for the UI to initialize
-  await sidepanel.waitForTimeout(2000);
+  status.extensionLoaded = true;
+
+  // Wait for the UI to initialize
+  await sidepanel.waitForLoadState('networkidle');
+  await sidepanel.waitForTimeout(1000);
 
   // Check for authentication indicators
   // Look for chat input (indicates authenticated) - Claude uses ProseMirror contenteditable
@@ -54,9 +60,6 @@ try {
   const responses = await sidepanel.$$('div.claude-response');
   status.hasConversation = responses.length > 0;
 
-  // Close the test page
-  await sidepanel.close();
-
 } catch (e) {
   status.error = e.message;
 }

internal/claude/scripts/send_message.js

@@ -1,5 +1,6 @@
 // Send a message to Claude and wait for the response.
 // This script is executed via Kernel's Playwright API.
+// The side panel should already be open (via OpenSidePanel click).
 //
 // Input (via environment variables set before this script):
 //   - process.env.CLAUDE_MESSAGE: The message to send
@@ -9,7 +10,6 @@
 //   - Returns JSON with { response: string, model?: string }
 
 const EXTENSION_ID = 'fcoeoabgfenejglbffodgkkbkcdhcgfn';
-const SIDEPANEL_URL = `chrome-extension://${EXTENSION_ID}/sidepanel.html?mode=window`;
 
 const message = process.env.CLAUDE_MESSAGE;
 const timeoutMs = parseInt(process.env.CLAUDE_TIMEOUT_MS || '120000', 10);
@@ -18,16 +18,24 @@ if (!message) {
   throw new Error('CLAUDE_MESSAGE environment variable is required');
 }
 
-// Find or open the sidepanel page
-let sidepanel = context.pages().find(p => p.url().includes('sidepanel.html'));
+// Wait for the side panel to appear (it was opened by clicking the extension icon)
+let sidepanel = null;
+const maxWaitMs = 10000;
+const startWait = Date.now();
+while (Date.now() - startWait < maxWaitMs) {
+  sidepanel = context.pages().find(p => p.url().includes('sidepanel.html'));
+  if (sidepanel) break;
+  await new Promise(r => setTimeout(r, 500));
+}
+
 if (!sidepanel) {
-  sidepanel = await context.newPage();
-  await sidepanel.goto(SIDEPANEL_URL);
-  await sidepanel.waitForLoadState('networkidle');
-  // Wait for the UI to fully initialize
-  await sidepanel.waitForTimeout(2000);
+  throw new Error('Side panel not found. Make sure the extension is loaded and pinned.');
 }
 
+// Wait for the UI to fully initialize
+await sidepanel.waitForLoadState('networkidle');
+await sidepanel.waitForTimeout(1000);
+
 // Check if we're authenticated by looking for the chat input
 // Claude uses a contenteditable div with ProseMirror
 const inputSelector = '[contenteditable="true"].ProseMirror, textarea';

internal/claude/scripts/stream_chat.js

@@ -1,5 +1,6 @@
 // Interactive streaming chat with Claude.
 // This script is executed via Kernel's Playwright API.
+// The side panel should already be open (via OpenSidePanel click).
 //
 // Communication protocol:
 // - Reads JSON commands from stdin: { "type": "message", "content": "..." }
@@ -10,7 +11,6 @@
 //   - { "type": "error", "message": "..." } - Error occurred
 
 const EXTENSION_ID = 'fcoeoabgfenejglbffodgkkbkcdhcgfn';
-const SIDEPANEL_URL = `chrome-extension://${EXTENSION_ID}/sidepanel.html?mode=window`;
 
 function emit(event) {
   console.log(JSON.stringify(event));
@@ -77,15 +77,25 @@ async function sendMessage(page, message) {
   emit({ type: 'error', message: 'Response timeout' });
 }
 
-// Open the sidepanel
-let sidepanel = context.pages().find(p => p.url().includes('sidepanel.html'));
+// Wait for the side panel to appear (it was opened by clicking the extension icon)
+let sidepanel = null;
+const maxWaitMs = 10000;
+const startWait = Date.now();
+while (Date.now() - startWait < maxWaitMs) {
+  sidepanel = context.pages().find(p => p.url().includes('sidepanel.html'));
+  if (sidepanel) break;
+  await new Promise(r => setTimeout(r, 500));
+}
+
 if (!sidepanel) {
-  sidepanel = await context.newPage();
-  await sidepanel.goto(SIDEPANEL_URL);
-  await sidepanel.waitForLoadState('networkidle');
-  await sidepanel.waitForTimeout(2000);
+  emit({ type: 'error', message: 'Side panel not found. Extension may not be loaded or pinned.' });
+  return { error: 'side panel not found' };
 }
 
+// Wait for the UI to initialize
+await sidepanel.waitForLoadState('networkidle');
+await sidepanel.waitForTimeout(1000);
+
 // Check if authenticated
 const inputSelector = '[contenteditable="true"].ProseMirror, textarea';
 const input = await sidepanel.waitForSelector(inputSelector, {