feat(streaming): add real-time streaming (MongoDB change streams & S3 bucket watchers) with WebSocket subscriptions and activity stream UI

ts_web/elements/tsview-s3-browser.ts

@@ -1,5 +1,5 @@
 import * as plugins from '../plugins.js';
-import { apiService } from '../services/index.js';
+import { apiService, changeStreamService, type IS3ChangeEvent } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -29,6 +29,14 @@ export class TsviewS3Browser extends DeesElement {
   @state()
   private accessor isResizingPreview: boolean = false;
 
+  @state()
+  private accessor recentChangeCount: number = 0;
+
+  @state()
+  private accessor isStreamConnected: boolean = false;
+
+  private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
+
   public static styles = [
     cssManager.defaultStyles,
     themeStyles,
@@ -154,9 +162,61 @@ export class TsviewS3Browser extends DeesElement {
           display: none;
         }
       }
+
+      .stream-status {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: #888;
+        margin-left: auto;
+        margin-right: 12px;
+      }
+
+      .stream-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #888;
+      }
+
+      .stream-dot.connected {
+        background: #22c55e;
+      }
+
+      .change-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        background: rgba(245, 158, 11, 0.2);
+        border-radius: 4px;
+        font-size: 11px;
+        color: #f59e0b;
+        margin-right: 12px;
+      }
+
+      .change-indicator.pulse {
+        animation: pulse-orange 1s ease-in-out;
+      }
+
+      @keyframes pulse-orange {
+        0% { background: rgba(245, 158, 11, 0.4); }
+        100% { background: rgba(245, 158, 11, 0.2); }
+      }
     `,
   ];
 
+  async connectedCallback() {
+    super.connectedCallback();
+    this.subscribeToChanges();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unsubscribeFromChanges();
+  }
+
   private setViewType(type: TViewType) {
     this.viewType = type;
   }
@@ -185,9 +245,54 @@ export class TsviewS3Browser extends DeesElement {
       // Clear selection when bucket changes
       this.selectedKey = '';
       this.currentPrefix = '';
+      this.recentChangeCount = 0;
+      // Re-subscribe to the new bucket
+      this.unsubscribeFromChanges();
+      this.subscribeToChanges();
     }
   }
 
+  private async subscribeToChanges() {
+    if (!this.bucketName) return;
+
+    try {
+      // Subscribe to bucket changes (with optional prefix)
+      const success = await changeStreamService.subscribeToBucket(this.bucketName, this.currentPrefix || undefined);
+      this.isStreamConnected = success;
+
+      if (success) {
+        // Listen for changes
+        this.changeSubscription = changeStreamService
+          .getBucketChanges(this.bucketName, this.currentPrefix || undefined)
+          .subscribe((event) => {
+            this.handleChange(event);
+          });
+      }
+    } catch (error) {
+      console.warn('[S3Browser] Failed to subscribe to changes:', error);
+      this.isStreamConnected = false;
+    }
+  }
+
+  private unsubscribeFromChanges() {
+    if (this.changeSubscription) {
+      this.changeSubscription.unsubscribe();
+      this.changeSubscription = null;
+    }
+    if (this.bucketName) {
+      changeStreamService.unsubscribeFromBucket(this.bucketName, this.currentPrefix || undefined);
+    }
+    this.isStreamConnected = false;
+  }
+
+  private handleChange(event: IS3ChangeEvent) {
+    console.log('[S3Browser] Received change:', event);
+    this.recentChangeCount++;
+
+    // Trigger refresh of child components
+    this.refreshKey++;
+  }
+
   private startPreviewResize = (e: MouseEvent) => {
     e.preventDefault();
     this.isResizingPreview = true;
@@ -239,6 +344,17 @@ export class TsviewS3Browser extends DeesElement {
             })}
           </div>
 
+          <div class="stream-status">
+            <span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
+            ${this.isStreamConnected ? 'Live' : 'Offline'}
+          </div>
+          ${this.recentChangeCount > 0
+            ? html`
+                <div class="change-indicator pulse">
+                  ${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
+                </div>
+              `
+            : ''}
           <div class="view-toggle">
             <button
               class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"