fix: pause/reset + newtab connector

Author: shadowfax92

src/background/handlers/ExecutionHandler.ts

@@ -32,11 +32,25 @@ export class ExecutionHandler {
     // Use executionId from port or generate default
     const execId = executionId || 'default'
 
-    // If source is newtab, open sidepanel for the tab
+    // If source is newtab, notify sidepanel to switch context and open it
     if (metadata?.source === 'newtab') {
       const tabId = tabIds?.[0]
       if (tabId) {
         try {
+          // Send context switch message via chrome.runtime.sendMessage
+          // The sidepanel will listen for this and reconnect with new executionId
+          chrome.runtime.sendMessage({
+            type: MessageType.SWITCH_EXECUTION_CONTEXT,
+            payload: {
+              executionId: execId,
+              tabId: tabId,
+              cancelExisting: true
+            }
+          }).catch(() => {
+            // No listeners yet, that's fine - sidepanel might not be open
+          })
+          
+          // Open sidepanel
           await chrome.sidePanel.open({ tabId })
           // Give sidepanel time to initialize
           await new Promise(resolve => setTimeout(resolve, 300))

src/lib/types/messaging.ts

@@ -36,7 +36,9 @@ export enum MessageType {
   GET_PLAN_HISTORY = 'GET_PLAN_HISTORY',
   // Logging
   LOG_MESSAGE = 'LOG_MESSAGE',
-  LOG_METRIC = 'LOG_METRIC'
+  LOG_METRIC = 'LOG_METRIC',
+  // Execution context management
+  SWITCH_EXECUTION_CONTEXT = 'SWITCH_EXECUTION_CONTEXT'
 }
 
 // Create a zod enum for MessageType
@@ -185,6 +187,21 @@ export const CancelTaskMessageSchema = MessageSchema.extend({
 
 export type CancelTaskMessage = z.infer<typeof CancelTaskMessageSchema>
 
+/**
+ * Switch execution context message schema
+ * Used to tell sidepanel to reconnect with a new executionId
+ */
+export const SwitchExecutionContextMessageSchema = MessageSchema.extend({
+  type: z.literal(MessageType.SWITCH_EXECUTION_CONTEXT),
+  payload: z.object({
+    executionId: z.string(),  // New execution ID to switch to
+    tabId: z.number(),  // Tab ID associated with this execution
+    cancelExisting: z.boolean().default(true)  // Whether to cancel existing execution
+  })
+})
+
+export type SwitchExecutionContextMessage = z.infer<typeof SwitchExecutionContextMessageSchema>
+
 /**
  * Close panel message schema
  */

src/lib/utils/executionUtils.ts

@@ -51,4 +51,4 @@ export function isValidExecutionId(executionId: string): boolean {
 
   const tabId = getTabIdFromExecutionId(executionId)
   return tabId !== null && tabId > 0
-}
+}

src/newtab/stores/providerStore.ts

@@ -203,8 +203,9 @@ export const useProviderStore = create<ProviderState & ProviderActions>()(
               }
             })
 
-            // Close port after sending message
-            setTimeout(() => port.disconnect(), 100)
+            // Keep port open longer to receive response
+            // It will auto-disconnect when page unloads or after timeout
+            setTimeout(() => port.disconnect(), 5000)
           } catch (error) {
             console.error('Failed to open sidepanel with query:', error)
           }
@@ -258,8 +259,9 @@ export const useProviderStore = create<ProviderState & ProviderActions>()(
             }
           })
 
-          // Close port after sending message
-          setTimeout(() => port.disconnect(), 100)
+          // Keep port open longer to receive response
+          // It will auto-disconnect when page unloads or after timeout
+          setTimeout(() => port.disconnect(), 5000)
         } catch (error) {
           console.error('Failed to execute agent:', error)
         }

src/sidepanel/App.tsx

@@ -14,11 +14,16 @@ import './styles.css'
  * Uses Tailwind CSS for styling
  */
 export function App() {
-  // Initialize message handling
-  const { humanInputRequest, clearHumanInputRequest } = useMessageHandler()
+  // Get connection status and reconnect function from port messaging
+  const { connected, reconnect } = useSidePanelPortMessaging()
 
-  // Get connection status from port messaging
-  const { connected } = useSidePanelPortMessaging()
+  // Initialize message handling and set up reconnect callback
+  const { humanInputRequest, clearHumanInputRequest, setReconnectCallback } = useMessageHandler()
+  
+  // Wire the reconnect callback
+  useEffect(() => {
+    setReconnectCallback(reconnect)
+  }, [setReconnectCallback, reconnect])
 
   // Initialize settings
   const { fontSize, theme } = useSettingsStore()

src/sidepanel/components/ChatInput.tsx

@@ -116,20 +116,6 @@ export function ChatInput({ isConnected, isProcessing }: ChatInputProps) {
   const submitTask = (query: string) => {
     if (!query.trim()) return
 
-    if (!uiConnected) {
-      // Show error message in chat
-      const msg = !connectionOk
-        ? 'Cannot send message: Extension is disconnected'
-        : 'Cannot send message: Provider not configured'
-      upsertMessage({ 
-        msgId: `error_${Date.now()}`,
-        role: 'error', 
-        content: msg,
-        ts: Date.now()
-      })
-      return
-    }
-    
     // Add user message via upsert
     upsertMessage({
       msgId: `user_${Date.now()}`,
@@ -287,15 +273,11 @@ export function ChatInput({ isConnected, isProcessing }: ChatInputProps) {
   )
 
   const getPlaceholder = () => {
-    if (!connectionOk) return 'Disconnected'
-    if (!providerOk) return 'Provider error'
     if (isProcessing) return 'Task running…'
     return chatMode ? 'Ask about this page...' : 'Ask me anything... (/ to pick an agent)'
   }
 
   const getHintText = () => {
-    if (!connectionOk) return 'Waiting for connection'
-    if (!providerOk) return 'Provider not configured'
     if (isProcessing) return 'Task running… Press Esc to cancel'
     return chatMode 
       ? 'Chat mode is for simple Q&A • @ to select tabs • Press Enter to send'
@@ -382,7 +364,7 @@ export function ChatInput({ isConnected, isProcessing }: ChatInputProps) {
               onChange={handleInputChange}
               onKeyDown={handleKeyDown}
               placeholder={getPlaceholder()}
-              disabled={!uiConnected}
+              disabled={isProcessing}
               className={cn(
                 'max-h-[200px] resize-none pr-16 text-sm w-full',
                 'bg-background/80 backdrop-blur-sm border-2 border-brand/30',
@@ -392,13 +374,13 @@ export function ChatInput({ isConnected, isProcessing }: ChatInputProps) {
                 'rounded-2xl shadow-lg',
                 'px-3 py-2',
                 'transition-all duration-300 ease-out',
-                 !uiConnected && 'opacity-50 cursor-not-allowed bg-muted'
+                 isProcessing && 'opacity-50 cursor-not-allowed bg-muted'
               )}
               rows={1}
               aria-label="Chat message input"
               aria-describedby="input-hint"
-               aria-invalid={!uiConnected}
-              aria-disabled={!uiConnected}
+               aria-invalid={isProcessing}
+              aria-disabled={isProcessing}
               />
 
               {/* Slash command palette overlay */}
@@ -454,7 +436,7 @@ export function ChatInput({ isConnected, isProcessing }: ChatInputProps) {
 
               <Button
                 type="submit"
-                disabled={!uiConnected || isProcessing || !input.trim()}
+                disabled={isProcessing || !input.trim()}
                 size="sm"
                 className="absolute right-3 bottom-3 h-8 w-8 p-0 rounded-full bg-[hsl(var(--brand))] hover:bg-[hsl(var(--brand))]/90 text-white shadow-lg flex items-center justify-center"
                 variant={'default'}

src/sidepanel/components/Header.tsx

@@ -19,7 +19,7 @@ const MCP_FEATURE_ENABLED = true
 
 interface HeaderProps {
   onReset: () => void
-  showReset: boolean
+  showReset: boolean  // This now means "has messages to reset"
   isProcessing: boolean
 }
 
@@ -307,42 +307,44 @@ export const Header = memo(function Header({ onReset, showReset, isProcessing }:
             </div>
           )}
 
-          {/* Settings button - Third position */}
-          <Button
-            onClick={handleSettingsClick}
-            variant="ghost"
-            size="sm"
-            className="h-9 w-9 p-0 rounded-xl hover:bg-brand/10 hover:text-brand transition-all duration-300"
-            aria-label="Open settings"
-          >
-            <Settings className="w-4 h-4" />
-          </Button>
-
+          {/* Show Pause button if processing */}
           {isProcessing && (
             <Button
               onClick={handleCancel}
               variant="ghost"
               size="sm"
-              className="text-xs hover:bg-brand/5 hover:text-brand transition-all duration-300 flex items-center gap-1"
+              className="h-9 w-9 p-0 rounded-xl hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400 transition-all duration-300"
               aria-label="Pause current task"
+              title="Pause"
             >
               <Pause className="w-4 h-4" />
-              Pause
             </Button>
           )}
 
-          {showReset && !isProcessing && (
+          {/* Show Reset button if has messages */}
+          {showReset && (
             <Button
               onClick={handleReset}
               variant="ghost"
               size="sm"
-              className="text-xs hover:bg-brand/5 hover:text-brand transition-all duration-300 flex items-center gap-1"
+              className="h-9 w-9 p-0 rounded-xl hover:bg-orange-100 dark:hover:bg-orange-900/20 hover:text-orange-600 dark:hover:text-orange-400 transition-all duration-300"
               aria-label="Reset conversation"
+              title="Reset"
             >
               <RotateCcw className="w-4 h-4" />
-              Reset
             </Button>
           )}
+
+          {/* Settings button - Last position (rightmost) */}
+          <Button
+            onClick={handleSettingsClick}
+            variant="ghost"
+            size="sm"
+            className="h-9 w-9 p-0 rounded-xl hover:bg-brand/10 hover:text-brand transition-all duration-300"
+            aria-label="Open settings"
+          >
+            <Settings className="w-4 h-4" />
+          </Button>
         </nav>
 
         {/* Settings Modal */}

src/sidepanel/hooks/useMessageHandler.ts

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState } from 'react'
+import { useEffect, useCallback, useState, useRef } from 'react'
 import { MessageType } from '@/lib/types/messaging'
 import { useSidePanelPortMessaging } from '@/sidepanel/hooks'
 import { useChatStore, type PubSubMessage } from '../stores/chatStore'
@@ -9,9 +9,16 @@ interface HumanInputRequest {
 }
 
 export function useMessageHandler() {
-  const { upsertMessage, setProcessing } = useChatStore()
-  const { addMessageListener, removeMessageListener, executionId } = useSidePanelPortMessaging()
+  const { upsertMessage, setProcessing, reset } = useChatStore()
+  const { addMessageListener, removeMessageListener, executionId, sendMessage } = useSidePanelPortMessaging()
   const [humanInputRequest, setHumanInputRequest] = useState<HumanInputRequest | null>(null)
+  const reconnectCallbackRef = useRef<((executionId: string) => void) | null>(null)
+  
+  // Keep executionId in a ref to always have the current value
+  const executionIdRef = useRef<string | null>(executionId)
+  useEffect(() => {
+    executionIdRef.current = executionId
+  }, [executionId])
 
   const clearHumanInputRequest = useCallback(() => {
     setHumanInputRequest(null)
@@ -70,8 +77,8 @@ export function useMessageHandler() {
 
   // Handle workflow status for processing state
   const handleWorkflowStatus = useCallback((payload: any) => {
-    // Check if this is for our execution
-    if (payload?.executionId && payload.executionId !== executionId) {
+    // Check if this is for our execution using ref for current value
+    if (payload?.executionId && payload.executionId !== executionIdRef.current) {
       return // Ignore messages for other executions
     }
 
@@ -81,22 +88,62 @@ export function useMessageHandler() {
     }
     // Note: We still let ChatInput set processing(true) when sending query
     // This avoids race conditions and provides immediate UI feedback
-  }, [executionId, setProcessing])
+  }, [setProcessing])
 
   useEffect(() => {
     // Register listeners
     addMessageListener(MessageType.AGENT_STREAM_UPDATE, handleStreamUpdate)
     addMessageListener(MessageType.WORKFLOW_STATUS, handleWorkflowStatus)
 
+    // Listen for context switch messages from background
+    const handleRuntimeMessage = (message: any) => {
+      if (message?.type === MessageType.SWITCH_EXECUTION_CONTEXT) {
+        const { executionId: newExecutionId, tabId, cancelExisting } = message.payload
+        
+        console.log(`[SidePanel] Received SWITCH_EXECUTION_CONTEXT: ${newExecutionId}, current: ${executionIdRef.current}`)
+        
+        // Only switch if it's a different execution (use ref for current value)
+        if (newExecutionId !== executionIdRef.current) {
+          // If we should cancel and reset existing
+          if (cancelExisting) {
+            // Cancel any existing task
+            sendMessage(MessageType.RESET_CONVERSATION, { 
+              reason: 'New task started from NewTab',
+              source: 'sidepanel'
+            })
+            
+            setProcessing(false)
+            reset()
+          }
+          
+          // Trigger reconnection with new executionId
+          if (reconnectCallbackRef.current) {
+            reconnectCallbackRef.current(newExecutionId)
+          }
+        } else {
+          console.log(`[SidePanel] Same executionId, no need to switch`)
+        }
+      }
+    }
+    
+    chrome.runtime.onMessage.addListener(handleRuntimeMessage)
+    
     // Cleanup
     return () => {
       removeMessageListener(MessageType.AGENT_STREAM_UPDATE, handleStreamUpdate)
       removeMessageListener(MessageType.WORKFLOW_STATUS, handleWorkflowStatus)
+      chrome.runtime.onMessage.removeListener(handleRuntimeMessage)
     }
-  }, [addMessageListener, removeMessageListener, handleStreamUpdate, handleWorkflowStatus])
+  }, [addMessageListener, removeMessageListener, handleStreamUpdate, handleWorkflowStatus, sendMessage, reset, setProcessing])
+  
+  // Set the reconnect callback that will be triggered on context switch
+  const setReconnectCallback = useCallback((callback: (executionId: string) => void) => {
+    reconnectCallbackRef.current = callback
+  }, [])
 
   return {
     humanInputRequest,
-    clearHumanInputRequest
+    clearHumanInputRequest,
+    setReconnectCallback
   }
 }