feat(streaming): add global activity watchers, client-side buffering, and improved real-time streaming UX

ts_web/elements/tsview-mongo-browser.ts

@@ -37,6 +37,7 @@ export class TsviewMongoBrowser extends DeesElement {
   private accessor isStreamConnected: boolean = false;
 
   private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
+  private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -201,12 +202,20 @@ export class TsviewMongoBrowser extends DeesElement {
   async connectedCallback() {
     super.connectedCallback();
     await this.loadStats();
-    this.subscribeToChanges();
+    // Subscription is handled by updated() when databaseName/collectionName are set.
+    // Only track connection status for UI indicator here.
+    this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
+      this.isStreamConnected = status === 'connected';
+    });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.unsubscribeFromChanges();
+    if (this.connectionSubscription) {
+      this.connectionSubscription.unsubscribe();
+      this.connectionSubscription = null;
+    }
   }
 
   updated(changedProperties: Map<string, unknown>) {
@@ -224,18 +233,16 @@ export class TsviewMongoBrowser extends DeesElement {
     if (!this.databaseName || !this.collectionName) return;
 
     try {
-      // Subscribe to collection changes
-      const success = await changeStreamService.subscribeToCollection(this.databaseName, this.collectionName);
-      this.isStreamConnected = success;
-
-      if (success) {
-        // Listen for changes
+      // Set up RxJS listener first so events aren't missed on reconnect
+      if (!this.changeSubscription) {
         this.changeSubscription = changeStreamService
           .getCollectionChanges(this.databaseName, this.collectionName)
-          .subscribe((event) => {
-            this.handleChange(event);
-          });
+          .subscribe((event) => this.handleChange(event));
       }
+
+      // Subscribe on the server side (will auto-connect if needed)
+      const success = await changeStreamService.subscribeToCollection(this.databaseName, this.collectionName);
+      this.isStreamConnected = success;
     } catch (error) {
       console.warn('[MongoBrowser] Failed to subscribe to changes:', error);
       this.isStreamConnected = false;