fixes to custom agent -> sidepanel

Author: shadowfax92

src/background/handlers/ExecutionHandler.ts

@@ -3,10 +3,11 @@ import { PortMessage } from '@/lib/runtime/PortMessaging'
 import { ExecutionManager } from '@/lib/execution/ExecutionManager'
 import { Logging } from '@/lib/utils/Logging'
 import { PubSub } from '@/lib/pubsub'
+import { getExecutionId } from '@/lib/utils/executionUtils'
 
 /**
  * Handles execution-related messages:
- * - EXECUTE_QUERY: Start a new query execution
+ * - EXECUTE_QUERY: Start a new query execution (opens sidepanel if source is 'newtab')
  * - CANCEL_TASK: Cancel running execution
  * - RESET_CONVERSATION: Reset execution state
  */
@@ -26,18 +27,33 @@ export class ExecutionHandler {
     executionId?: string
   ): Promise<void> {
     const payload = message.payload as ExecuteQueryMessage['payload']
-    const { query, tabIds, source, chatMode, metadata } = payload
+    const { query, tabIds, chatMode, metadata } = payload
 
     // Use executionId from port or generate default
     const execId = executionId || 'default'
 
+    // If source is newtab, open sidepanel for the tab
+    if (metadata?.source === 'newtab') {
+      const tabId = tabIds?.[0]
+      if (tabId) {
+        try {
+          await chrome.sidePanel.open({ tabId })
+          // Give sidepanel time to initialize
+          await new Promise(resolve => setTimeout(resolve, 300))
+        } catch (sidepanelError) {
+          Logging.log('ExecutionHandler', 
+            `Could not open sidepanel for tab ${tabId}: ${sidepanelError}`, 'warning')
+        }
+      }
+    }
+    
     Logging.log('ExecutionHandler', 
       `Starting execution ${execId}: "${query}" (mode: ${chatMode ? 'chat' : 'browse'})`)
 
     // Log metrics
     Logging.logMetric('query_initiated', {
       query,
-      source: source || metadata?.source || 'unknown',
+      source: metadata?.source || 'unknown',
       mode: chatMode ? 'chat' : 'browse',
       executionMode: metadata?.executionMode || 'dynamic',
     })
@@ -207,6 +223,26 @@ export class ExecutionHandler {
     }
   }
 
+  /**
+   * Clean up execution for a closed tab
+   */
+  async cleanupTabExecution(tabId: number): Promise<void> {
+    const execId = await getExecutionId(tabId)
+    
+    const execution = this.executionManager.get(execId)
+    if (execution) {
+      Logging.log('ExecutionHandler', `Cleaning up execution ${execId} for closed tab ${tabId}`)
+      
+      // Cancel if running
+      if (execution.isRunning()) {
+        execution.cancel()
+      }
+      
+      // Delete the execution
+      await this.executionManager.delete(execId)
+    }
+  }
+
   /**
    * Get execution statistics
    */

src/background/index.ts

@@ -2,7 +2,7 @@ import { MessageType } from '@/lib/types/messaging'
 import { PortMessage } from '@/lib/runtime/PortMessaging'
 import { Logging } from '@/lib/utils/Logging'
 import { isDevelopmentMode } from '@/config'
-import { parsePortName } from './utils/portUtils'
+import { parsePortName } from '@/lib/utils/portUtils'
 
 // Import router and managers
 import { MessageRouter } from './router/MessageRouter'
@@ -339,11 +339,14 @@ function initialize(): void {
   })
 
   // Clean up on tab removal
-  chrome.tabs.onRemoved.addListener((tabId) => {
+  chrome.tabs.onRemoved.addListener(async (tabId) => {
     // Clean up tab-specific panel state
     tabPanelState.delete(tabId)
-    // Handlers can clean up tab-specific resources
-    Logging.log('Background', `Tab ${tabId} removed, cleaned up panel state`)
+    
+    // Clean up tab execution
+    await executionHandler.cleanupTabExecution(tabId)
+    
+    Logging.log('Background', `Tab ${tabId} removed, cleaned up panel state and execution`)
   })
 
   Logging.log('Background', 'Nxtscape extension initialized successfully')

src/background/router/MessageRouter.ts

@@ -1,7 +1,7 @@
 import { MessageType } from '@/lib/types/messaging'
 import { PortMessage } from '@/lib/runtime/PortMessaging'
 import { Logging } from '@/lib/utils/Logging'
-import { parsePortName } from '../utils/portUtils'
+import { parsePortName } from '@/lib/utils/portUtils'
 
 // Handler function type
 export type MessageHandler = (

src/background/router/PortManager.ts

@@ -4,7 +4,7 @@ import { PortMessage } from '@/lib/runtime/PortMessaging'
 import { PubSub } from '@/lib/pubsub'
 import { PubSubChannel } from '@/lib/pubsub/PubSubChannel'
 import { Subscription } from '@/lib/pubsub/types'
-import { parsePortName } from '../utils/portUtils'
+import { parsePortName } from '@/lib/utils/portUtils'
 
 // Port info stored for each connection
 interface PortInfo {

src/lib/types/messaging.ts

@@ -114,10 +114,9 @@ export const ExecuteQueryMessageSchema = MessageSchema.extend({
   type: z.literal(MessageType.EXECUTE_QUERY),
   payload: z.object({
     query: z.string(),
-    tabIds: z.array(z.number()).optional(),  // Selected tab IDs for context
-    source: z.string().optional(),  // Source of the query (e.g., 'sidepanel')
-    chatMode: z.boolean().optional(),  // Whether to use ChatAgent (Q&A mode) instead of BrowserAgent
-    metadata: ExecutionMetadataSchema.optional()  // Execution metadata
+    tabIds: z.array(z.number()).optional(),
+    chatMode: z.boolean().optional(),
+    metadata: ExecutionMetadataSchema.optional()
   })
 })
 

src/lib/utils/Logging.ts

@@ -1,5 +1,5 @@
 import { MessageType } from '@/lib/types/messaging'
-import { parsePortName } from '@/background/utils/portUtils'
+import { parsePortName } from '@/lib/utils/portUtils'
 import { isDevelopmentMode } from '@/config'
 import { getBrowserOSAdapter } from '@/lib/browser/BrowserOSAdapter'
 import { z } from 'zod'

src/lib/utils/executionUtils.ts

@@ -0,0 +1,54 @@
+/**
+ * Get execution ID for the current context or a specific tab
+ */
+export async function getExecutionId(tabId?: number): Promise<string> {
+  if (tabId !== undefined) {
+    return `tab_${tabId}`
+  }
+  
+  try {
+    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true })
+    
+    if (!activeTab?.id) {
+      throw new Error('No active tab found to generate execution ID')
+    }
+    
+    return `tab_${activeTab.id}`
+  } catch (error) {
+    console.error('Failed to get tab for execution ID:', error)
+    throw new Error('Unable to generate execution ID: ' + (error instanceof Error ? error.message : String(error)))
+  }
+}
+
+/**
+ * Extract tab ID from an execution ID
+ */
+export function getTabIdFromExecutionId(executionId: string): number | null {
+  if (!executionId.startsWith('tab_')) {
+    return null
+  }
+  
+  const tabIdStr = executionId.slice(4)
+  const tabId = parseInt(tabIdStr, 10)
+  
+  return isNaN(tabId) ? null : tabId
+}
+
+/**
+ * Check if an execution ID is tab-scoped
+ */
+export function isTabExecution(executionId: string): boolean {
+  return executionId.startsWith('tab_')
+}
+
+/**
+ * Validate an execution ID format
+ */
+export function isValidExecutionId(executionId: string): boolean {
+  if (!executionId.startsWith('tab_')) {
+    return false
+  }
+  
+  const tabId = getTabIdFromExecutionId(executionId)
+  return tabId !== null && tabId > 0
+}

src/background/utils/portUtils.ts renamed to src/lib/utils/portUtils.ts

@@ -12,8 +12,8 @@ export interface PortInfo {
 /**
  * Parse port name to extract structured information
  * 
- * Port name formats:
- * - sidepanel:<tabId>:<executionId>
+ * Port name formats (executionId is always tab_<tabId>):
+ * - sidepanel:<executionId>
  * - newtab:<executionId>
  * - options:<executionId>
  * 
@@ -26,33 +26,38 @@ export function parsePortName(portName: string): PortInfo {
     raw: portName
   }
 
-  // Check for sidepanel with dynamic format
+  // Check for sidepanel
   if (portName.startsWith('sidepanel:')) {
     const parts = portName.split(':')
     result.type = 'sidepanel'
 
-    // Format: sidepanel:tabId:executionId
-    if (parts.length >= 3) {
-      const tabId = parseInt(parts[1])
-      if (!isNaN(tabId)) {
-        result.tabId = tabId
-      }
-      result.executionId = parts[2]
-    }
-    // Format without tabId: sidepanel:executionId (shouldn't happen but handle gracefully)
-    else if (parts.length === 2) {
+    if (parts.length >= 2) {
       result.executionId = parts[1]
+      // Extract tabId from executionId if it's in tab_<id> format
+      if (parts[1].startsWith('tab_')) {
+        const tabId = parseInt(parts[1].slice(4))
+        if (!isNaN(tabId)) {
+          result.tabId = tabId
+        }
+      }
     }
   }
-  // Check for newtab with dynamic format
+  // Check for newtab with executionId (tab_<tabId>)
   else if (portName.startsWith('newtab:')) {
     const parts = portName.split(':')
     result.type = 'newtab'
     if (parts.length >= 2) {
       result.executionId = parts[1]
+      // Extract tabId from executionId if it's in tab_<id> format
+      if (parts[1].startsWith('tab_')) {
+        const tabId = parseInt(parts[1].slice(4))
+        if (!isNaN(tabId)) {
+          result.tabId = tabId
+        }
+      }
     }
   }
-  // Check for options with dynamic format
+  // Check for options
   else if (portName.startsWith('options:')) {
     const parts = portName.split(':')
     result.type = 'options'
@@ -66,26 +71,17 @@ export function parsePortName(portName: string): PortInfo {
 
 /**
  * Create a port name with the given parameters
+ * Note: executionId should be in format tab_<tabId> for tab-scoped executions
  * 
  * @param type - The type of port
- * @param executionId - Execution ID (required)
- * @param tabId - Optional tab ID (for sidepanel only)
+ * @param executionId - Execution ID (should be tab_<tabId> for tab contexts)
  * @returns Formatted port name
  */
 export function createPortName(
   type: 'sidepanel' | 'newtab' | 'options',
-  executionId: string,
-  tabId?: number
+  executionId: string
 ): string {
-  if (type === 'sidepanel' && tabId) {
-    return `sidepanel:${tabId}:${executionId}`
-  }
-  if (type === 'sidepanel') {
-    // This shouldn't happen - sidepanel should always have tabId
-    console.warn('Creating sidepanel port without tab ID')
-    return `sidepanel:${executionId}`
-  }
-  
-  // For newtab and options
+  // Simple format: type:executionId
+  // Since executionId already contains tab info (tab_123), no need for redundancy
   return `${type}:${executionId}`
 }

src/newtab/stores/providerStore.ts

@@ -5,6 +5,7 @@ import { MessageType } from '@/lib/types/messaging'
 import { PortPrefix } from '@/lib/runtime/PortMessaging'
 import { Agent } from '../stores/agentsStore'
 import { Logging } from '@/lib/utils/Logging'
+import { getExecutionId } from '@/lib/utils/executionUtils'
 
 // Provider schema
 export const ProviderSchema = z.object({
@@ -182,17 +183,14 @@ export const useProviderStore = create<ProviderState & ProviderActions>()(
               return
             }
 
-            // Open the sidepanel for the current tab
-            await chrome.sidePanel.open({ tabId: activeTab.id })
+            // Generate execution ID from tab ID
+            const executionId = await getExecutionId(activeTab.id)
 
-            // Wait a bit for sidepanel to initialize
-            await new Promise(resolve => setTimeout(resolve, 500))
-            
-            // Connect to background script and send query
-            const executionId = `exec_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
+            // Connect to background and send EXECUTE_QUERY
+            // This will open sidepanel automatically since source is 'newtab'
             const port = chrome.runtime.connect({ name: `${PortPrefix.NEWTAB}:${executionId}` })
 
-            // Send the query through port messaging
+            // Send the query with tab context
             port.postMessage({
               type: MessageType.EXECUTE_QUERY,
               payload: {
@@ -234,17 +232,14 @@ export const useProviderStore = create<ProviderState & ProviderActions>()(
             ? ['Create new tab', ...agent.steps]
             : agent.steps
 
-          // Open the sidepanel for the current tab
-          await chrome.sidePanel.open({ tabId: activeTab.id })
-          
-          // Wait a bit for sidepanel to initialize
-          await new Promise(resolve => setTimeout(resolve, 500))
+          // Generate execution ID from tab ID
+          const executionId = await getExecutionId(activeTab.id)
 
-          // Connect to background script and send query with agent metadata
-          const executionId = `exec_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
+          // Connect to background and send EXECUTE_QUERY
+          // This will open sidepanel automatically since source is 'newtab'
           const port = chrome.runtime.connect({ name: `${PortPrefix.NEWTAB}:${executionId}` })
 
-          // Send the query through port messaging with predefined plan
+          // Send the query with tab context and predefined plan
           port.postMessage({
             type: MessageType.EXECUTE_QUERY,
             payload: {