WebMemory: fix the modal popup for importing web activity data (#1438)

- Handle exception thrown when screenshots cannot be captured on certain
tabs
- Enable search on entity view page
- Fix the modal popup for importing web activity data
- Broadcast message when web socket connection status changes

Author: hillary-mutisya

ts/packages/agents/browser/src/agent/browserConnector.mts

@@ -119,7 +119,8 @@ export class BrowserConnector {
                     if (
                         message.includes(
                             "MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND",
-                        )
+                        ) ||
+                        message.includes("Tabs cannot be edited right now")
                     ) {
                         return "";
                     }

ts/packages/agents/browser/src/extension/serviceWorker/websocket.ts

@@ -15,6 +15,33 @@ const debugWebSocketError = registerDebug("typeagent:browser:ws:error");
 let webSocket: WebSocket | undefined;
 let settings: Record<string, any>;
 
+/**
+ * Broadcasts WebSocket connection status changes to all extension pages
+ */
+function broadcastConnectionStatus(connected: boolean): void {
+    chrome.tabs.query({}, (tabs) => {
+        tabs.forEach((tab) => {
+            if (tab.url?.startsWith("chrome-extension://")) {
+                chrome.tabs
+                    .sendMessage(tab.id!, {
+                        type: "connectionStatusChanged",
+                        connected: connected,
+                        timestamp: Date.now(),
+                    })
+                    .catch(() => {});
+            }
+        });
+    });
+
+    chrome.runtime
+        .sendMessage({
+            type: "connectionStatusChanged",
+            connected: connected,
+            timestamp: Date.now(),
+        })
+        .catch(() => {});
+}
+
 /**
  * Creates a new WebSocket connection
  * @returns Promise resolving to the WebSocket or undefined
@@ -69,12 +96,14 @@ export async function ensureWebsocketConnected(): Promise<
         webSocket = await createWebSocket();
         if (!webSocket) {
             showBadgeError();
+            broadcastConnectionStatus(false);
             resolve(undefined);
             return;
         }
 
         webSocket.binaryType = "blob";
         keepWebSocketAlive(webSocket);
+        broadcastConnectionStatus(true);
 
         const browserControlChannel = createGenericChannel((message: any) => {
             if (webSocket && webSocket.readyState === WebSocket.OPEN) {
@@ -163,6 +192,7 @@ export async function ensureWebsocketConnected(): Promise<
             debugWebSocket("websocket connection closed");
             webSocket = undefined;
             showBadgeError();
+            broadcastConnectionStatus(false);
             if (event.reason !== "duplicate") {
                 reconnectWebSocket();
             }
@@ -201,6 +231,7 @@ export function reconnectWebSocket(): void {
             debugWebSocket("Clearing reconnect retry interval");
             clearInterval(connectionCheckIntervalId);
             showBadgeHealthy();
+            broadcastConnectionStatus(true);
         } else {
             debugWebSocket("Retrying connection");
             await ensureWebsocketConnected();

ts/packages/agents/browser/src/extension/views/entityGraphView.html

@@ -38,7 +38,7 @@
                 type="text"
                 id="entitySearchInput"
                 class="entity-search-input"
-                placeholder="Search entities..."
+                placeholder="Enter entity name..."
               />
               <button id="entitySearchButton" class="entity-search-btn">
                 <i class="bi bi-search"></i>

ts/packages/agents/browser/src/extension/views/entityGraphView.ts

@@ -229,22 +229,51 @@ class EntityGraphView {
      */
     private setupSearchHandlers(): void {
         const searchInput = document.getElementById(
-            "entitySearch",
+            "entitySearchInput",
         ) as HTMLInputElement;
         const searchButton = document.getElementById(
-            "searchButton",
+            "entitySearchButton",
         ) as HTMLButtonElement;
 
+        console.log("Setting up search handlers:", {
+            searchInput: !!searchInput,
+            searchButton: !!searchButton,
+        });
+
         if (searchInput && searchButton) {
-            searchButton.addEventListener("click", () => {
-                this.searchEntity(searchInput.value);
-            });
+            const performSearch = () => {
+                const query = searchInput.value.trim();
+                if (query) {
+                    console.log("Performing search with value:", query);
+                    this.searchEntity(query);
+                    // Clear the input after successful search initiation
+                    searchInput.value = "";
+                } else {
+                    this.showMessage(
+                        "Please enter an entity name to search",
+                        "warning",
+                    );
+                }
+            };
+
+            searchButton.addEventListener("click", performSearch);
 
             searchInput.addEventListener("keypress", (e) => {
                 if (e.key === "Enter") {
-                    this.searchEntity(searchInput.value);
+                    e.preventDefault(); // Prevent form submission
+                    performSearch();
                 }
             });
+
+            // Optional: Add focus behavior for better UX
+            searchInput.addEventListener("focus", () => {
+                searchInput.select(); // Select all text when focused
+            });
+        } else {
+            console.warn("Search elements not found:", {
+                searchInputFound: !!searchInput,
+                searchButtonFound: !!searchButton,
+            });
         }
     }
 
@@ -324,10 +353,20 @@ class EntityGraphView {
         if (!query.trim()) return;
 
         try {
-            // Search in real data
-            await this.searchRealEntity(query);
+            // Navigate directly to the entity (same as URL parameter logic)
+            console.log(`Searching for entity: ${query}`);
+            this.showMessage(`Loading entity "${query}"...`, "info");
+
+            await this.navigateToEntity(query.trim());
+
+            // Show success message
+            this.showMessage(`Loaded entity: "${query}"`, "success");
         } catch (error) {
             console.error("Failed to search entity:", error);
+            this.showMessage(
+                `Failed to load entity "${query}". ${error instanceof Error ? error.message : "Please try again."}`,
+                "error",
+            );
         }
     }
 

ts/packages/agents/browser/src/extension/views/extensionServiceBase.ts

@@ -87,6 +87,69 @@ export interface EntityMatch {
  * Abstract base class for extension services
  */
 export abstract class ExtensionServiceBase {
+    // ===================================================================
+    // CONNECTION STATUS EVENT SYSTEM
+    // ===================================================================
+
+    private connectionStatusCallbacks: ((connected: boolean) => void)[] = [];
+    private connectionStatusListenerSetup = false;
+
+    /**
+     * Register a callback for connection status changes
+     */
+    public onConnectionStatusChange(
+        callback: (connected: boolean) => void,
+    ): void {
+        this.connectionStatusCallbacks.push(callback);
+
+        if (!this.connectionStatusListenerSetup) {
+            this.setupConnectionStatusListener();
+            this.connectionStatusListenerSetup = true;
+        }
+    }
+
+    /**
+     * Remove connection status callback
+     */
+    public removeConnectionStatusListener(
+        callback: (connected: boolean) => void,
+    ): void {
+        const index = this.connectionStatusCallbacks.indexOf(callback);
+        if (index > -1) {
+            this.connectionStatusCallbacks.splice(index, 1);
+        }
+    }
+
+    /**
+     * Setup message listener for connection status changes
+     */
+    private setupConnectionStatusListener(): void {
+        const messageListener = (
+            message: any,
+            sender: any,
+            sendResponse: any,
+        ) => {
+            if (message.type === "connectionStatusChanged") {
+                this.connectionStatusCallbacks.forEach((callback) => {
+                    try {
+                        callback(message.connected);
+                    } catch (error) {
+                        console.error(
+                            "Connection status callback error:",
+                            error,
+                        );
+                    }
+                });
+            }
+        };
+
+        try {
+            chrome.runtime.onMessage.addListener(messageListener);
+        } catch (error) {
+            console.error("Failed to setup connection status listener:", error);
+        }
+    }
+
     // ===================================================================
     // SHARED METHOD IMPLEMENTATIONS
     // ===================================================================

ts/packages/agents/browser/src/extension/views/knowledgeDiscoveryPanel.ts

@@ -1,13 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { DiscoveryServices } from "./knowledgeUtilities";
+import { DiscoveryServices, extensionService } from "./knowledgeUtilities";
 
 export class KnowledgeDiscoveryPanel {
     private container: HTMLElement;
     private services: DiscoveryServices;
     private discoverData: any = null;
     private isConnected: boolean = true;
+    private connectionStatusCallback?: (connected: boolean) => void;
 
     constructor(container: HTMLElement, services: DiscoveryServices) {
         this.container = container;
@@ -21,6 +22,7 @@ export class KnowledgeDiscoveryPanel {
             emptyState.style.display = "none";
         }
 
+        this.setupConnectionStatusListener();
         await this.loadDiscoverData();
         this.renderContent();
     }
@@ -308,4 +310,14 @@ export class KnowledgeDiscoveryPanel {
             this.showConnectionError();
         }
     }
+
+    private setupConnectionStatusListener(): void {
+        this.connectionStatusCallback = (connected: boolean) => {
+            this.setConnectionStatus(connected);
+        };
+
+        extensionService.onConnectionStatusChange(
+            this.connectionStatusCallback,
+        );
+    }
 }

ts/packages/agents/browser/src/extension/views/knowledgeLibrary.html

@@ -36,13 +36,13 @@
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-              <i class="bi bi-download"></i>
+              <i class="bi bi-upload"></i>
             </button>
             <ul class="dropdown-menu">
               <li>
                 <a class="dropdown-item" href="#" id="importWebActivityBtn">
-                  <i class="bi bi-download me-2"></i>
-                  Import Web Activity
+                  <i class="bi bi-bookmarks me-2"></i>
+                  Import Bookmarks or History
                 </a>
               </li>
               <li>
@@ -92,7 +92,7 @@ <h1 class="page-title">
             </h1>
             <p class="page-subtitle">
               Ask in natural language: "latest github bookmarks", "car reviews
-              last week", "most visited news sites"
+              last week"
             </p>
           </div>
 

ts/packages/agents/browser/src/extension/views/knowledgeLibrary.ts

@@ -57,6 +57,7 @@ interface UserPreferences {
 class WebsiteLibraryPanelFullPage {
     private isConnected: boolean = false;
     private isInitialized: boolean = false;
+    private connectionStatusCallback?: (connected: boolean) => void;
     private navigation: FullPageNavigation = {
         currentPage: "search",
     };
@@ -119,6 +120,7 @@ class WebsiteLibraryPanelFullPage {
             this.setupImportFunctionality();
 
             await this.checkConnectionStatus();
+            this.setupConnectionStatusListener();
             await this.loadLibraryStats();
             await this.navigateToPage("search");
         } catch (error) {
@@ -241,6 +243,29 @@ class WebsiteLibraryPanelFullPage {
         }
     }
 
+    private setupConnectionStatusListener(): void {
+        this.connectionStatusCallback = (connected: boolean) => {
+            console.log(
+                `Connection status changed: ${connected ? "Connected" : "Disconnected"}`,
+            );
+            this.isConnected = connected;
+            this.updateConnectionStatus();
+            this.updatePanelConnectionStatus();
+        };
+
+        extensionService.onConnectionStatusChange(
+            this.connectionStatusCallback,
+        );
+    }
+
+    public cleanup(): void {
+        if (this.connectionStatusCallback) {
+            extensionService.removeConnectionStatusListener(
+                this.connectionStatusCallback,
+            );
+        }
+    }
+
     private updatePanelConnectionStatus() {
         if (this.searchPanel) {
             this.searchPanel.setConnectionStatus(this.isConnected);
@@ -452,7 +477,7 @@ class WebsiteLibraryPanelFullPage {
 
             const result =
                 await this.importManager.startWebActivityImport(options);
-            this.importUI.showImportComplete(result);
+            // Don't show completion immediately - let progress updates handle it
         } catch (error) {
             this.importUI.showImportError({
                 type: "processing",
@@ -481,7 +506,7 @@ class WebsiteLibraryPanelFullPage {
             });
 
             const result = await this.importManager.startFolderImport(options);
-            this.importUI.showImportComplete(result);
+            // Don't show completion immediately - let progress updates handle it
         } catch (error) {
             this.importUI.showImportError({
                 type: "processing",
@@ -771,3 +796,10 @@ if (document.readyState === "loading") {
 } else {
     initializeLibraryPanel();
 }
+
+// Add cleanup on window unload
+window.addEventListener("beforeunload", () => {
+    if (libraryPanelInstance) {
+        libraryPanelInstance.cleanup();
+    }
+});