v1.12.5

.gitea/workflows/default_nottags.yaml

@@ -0,0 +1,66 @@
+name: Default (not tags)
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+
+env:
+  IMAGE: code.foss.global/host.today/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${-{gitea.repository_owner}-}:${-{secrets.GITEA_TOKEN}-}@{{module.githost}}/${-{gitea.repository}-}.git
+  NPMCI_TOKEN_NPM: ${-{secrets.NPMCI_TOKEN_NPM}-}
+  NPMCI_TOKEN_NPM2: ${-{secrets.NPMCI_TOKEN_NPM2}-}
+  NPMCI_GIT_GITHUBTOKEN: ${-{secrets.NPMCI_GIT_GITHUBTOKEN}-}
+  NPMCI_URL_CLOUDLY: ${-{secrets.NPMCI_URL_CLOUDLY}-}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${-{ env.IMAGE }-}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm and npmci
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+
+      - name: Run npm prepare
+        run: npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${-{ always() }-}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${-{ env.IMAGE }-}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build

.gitea/workflows/default_tags.yaml

@@ -0,0 +1,124 @@
+name: Default (tags)
+
+on:
+  push:
+    tags:
+      - '*'
+
+env:
+  IMAGE: code.foss.global/host.today/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${-{gitea.repository_owner}-}:${-{secrets.GITEA_TOKEN}-}@{{module.githost}}/${-{gitea.repository}-}.git
+  NPMCI_TOKEN_NPM: ${-{secrets.NPMCI_TOKEN_NPM}-}
+  NPMCI_TOKEN_NPM2: ${-{secrets.NPMCI_TOKEN_NPM2}-}
+  NPMCI_GIT_GITHUBTOKEN: ${-{secrets.NPMCI_GIT_GITHUBTOKEN}-}
+  NPMCI_URL_CLOUDLY: ${-{secrets.NPMCI_URL_CLOUDLY}-}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${-{ env.IMAGE }-}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${-{ always() }-}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${-{ env.IMAGE }-}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
+
+  release:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${-{ env.IMAGE }-}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Release
+        run: |
+          npmci node install stable
+          npmci npm publish
+
+  metadata:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${-{ env.IMAGE }-}
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @ship.zone/npmci
+          npmci npm prepare
+
+      - name: Code quality
+        run: |
+          npmci command npm install -g typescript
+          npmci npm install
+
+      - name: Trigger
+        run: npmci trigger
+
+      - name: Build docs and upload artifacts
+        run: |
+          npmci node install stable
+          npmci npm install
+          pnpm install -g @git.zone/tsdoc
+          npmci command tsdoc
+        continue-on-error: true

.gitignore

@@ -20,4 +20,4 @@ dist_*/
 .claude/
 .serena/
 
-#------# custom
+#------# custom

.smartconfig.json

@@ -6,9 +6,7 @@
         "to": "./ts/bundled_ui.ts",
         "outputMode": "base64ts",
         "bundler": "esbuild",
-        "includeFiles": [
+        "includeFiles": ["html/**/*"]
-          "html/**/*"
-        ]
       }
     ]
   },
@@ -29,19 +27,14 @@
     ]
   },
   "@git.zone/tsview": {
-    "port": 3010,                                                                                        
+    "port": 3010,
-    "killIfBusy": true, 
+    "killIfBusy": true,
     "openBrowser": false
   },
   "@git.zone/cli": {
-    "services": [
+    "services": ["mongodb", "minio"],
-      "mongodb",
-      "minio"
-    ],
     "release": {
-      "registries": [
+      "registries": ["https://verdaccio.lossless.digital", "https://registry.npmjs.org"],
-        "https://verdaccio.lossless.digital"
-      ],
       "accessLevel": "public"
     },
     "projectType": "npm",
@@ -55,4 +48,4 @@
     }
   },
   "@ship.zone/szci": {}
-}
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "npm test",
+      "name": "Run npm test",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "json.schemas": [
+    {
+      "fileMatch": ["/.smartconfig.json"],
+      "schema": {
+        "type": "object",
+        "properties": {
+          "npmci": {
+            "type": "object",
+            "description": "settings for npmci"
+          },
+          "gitzone": {
+            "type": "object",
+            "description": "settings for gitzone",
+            "properties": {
+              "projectType": {
+                "type": "string",
+                "enum": ["website", "element", "service", "npm", "wcc"]
+              }
+            }
+          }
+        }
+      }
+    }
+  ]
+}

changelog.md

@@ -1,24 +1,210 @@
 # Changelog
 
+## 2026-03-24 - 1.12.5 - fix(package)
+bump package version to 1.12.5
+
+- Updates the package metadata version from 1.12.4 to 1.12.5.
+
+## 2026-03-24 - 1.12.4 - fix(config)
+migrate project config to .smartconfig.json and refresh build settings
+
+- replaces npmextra.json with .smartconfig.json and updates packaged files accordingly
+- adds --skiplibcheck to the build script and simplifies tsconfig settings
+- bumps build and runtime dependencies and updates README references to the new config file
+
+## 2026-03-24 - 1.12.3 - fix(package)
+bump package version to 1.12.3
+
+- Updates the package version from 1.12.2 to 1.12.3.
+
+## 2026-03-24 - 1.12.2 - fix(config)
+migrate runtime configuration loading from npmextra to smartconfig
+
+- replace the @push.rocks/npmextra dependency with @push.rocks/smartconfig
+- update tsview startup configuration types and loading logic to read port, killIfBusy, and openBrowser from smartconfig
+- adjust busy-port error messaging to reference smartconfig.json
+- add npmjs.org to the release registries configuration
+
+## 2026-03-14 - 1.12.1 - fix(storage)
+rename S3 configuration and change stream interfaces to storage-oriented types
+
+- Renames public config APIs from setS3Config/getS3Config/hasS3 to setStorageConfig/getStorageConfig/hasStorage.
+- Replaces shared S3 interfaces with storage equivalents such as IStorageConfig, IStorageObject, IStorageChangeEvent, and storage subscription request types.
+- Updates frontend integration to use dees-storage-browser and the new storage data provider and change stream types.
+- Refreshes dependency versions and documentation to match the new storage-oriented naming.
+
+## 2026-03-12 - 1.12.0 - feat(web)
+replace custom S3 browser components with dees-s3-browser integration
+
+- adds an S3 data provider adapter that delegates object operations to the existing ApiService
+- wires live bucket change events into dees-s3-browser via changeStreamService
+- removes exported custom tsview S3 elements in favor of the shared catalog component
+
+## 2026-01-29 - 1.11.1 - fix(mongo-browser)
+increase default editor width and broaden resize range in Mongo browser pane
+
+- Set default editorWidth from 400 to 700
+- Update CSS grid-template default editor width variable to 700
+- Expand editor resize bounds: min 300 -> 250, max 700 -> 1000 (resizer calculation adjusted)
+
+## 2026-01-28 - 1.11.0 - feat(s3)
+add rename support for files and folders in S3 UI columns and keys
+
+- Adds 'Rename' option to context menus in tsview-s3-columns and tsview-s3-keys for files and folders
+- Implements a rename dialog with validation, auto-focus and smart selection (preserves extensions), and progress/error states
+- Performs renames via apiService.moveObject / apiService.movePrefix and refreshes the UI after success
+- Bumps @design.estate/dees-catalog dependency to ^3.41.2
+
+## 2026-01-28 - 1.10.2 - fix(tsview-s3-columns)
+append trailing slash to destination key when moving folders to ensure folder destination path
+
+- ts_web/elements/tsview-s3-columns.ts: add '/' to destKey when moveSource.isFolder to preserve folder semantics
+- Prevents folder moves from being treated as object moves by ensuring destination key ends with a slash
+- Change affects logic that calls apiService.movePrefix for folder moves
+
+## 2026-01-28 - 1.10.1 - fix(playwright-mcp)
+remove Playwright-generated snapshot images to avoid committing autogenerated test artifacts and reduce repository size
+
+- Deleted ~22 Playwright PNG snapshot files under .playwright-mcp (visual test artifacts).
+- No source code logic changed — this is test artifact cleanup only.
+- Reduces repository bloat and prevents noisy visual diffs in future Playwright runs.
+
+## 2026-01-28 - 1.10.0 - feat(s3)
+add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation
+
+- Server: added typed handlers for moveObject (copy+delete for a single object) and movePrefix (recursive list, copy all objects to dest then delete source directory). Handlers return success/error and movedCount for prefix moves.
+- API: added api.service methods moveObject and movePrefix so web client can call new server handlers.
+- Interfaces: introduced IReq_MoveObject and IReq_MovePrefix request/response typings in ts/interfaces.
+- Web UI: added move dialogs, a move picker, drag-and-drop support for folders/files, UI states and styles in ts_web elements (tsview-s3-columns, tsview-s3-keys). Move dialogs/picker integrated into existing render flows.
+- Utilities: added move-validator utility (validateMove, getParentPrefix) and exported it from utilities index to prevent invalid operations (e.g. moving a folder into itself or to the same parent).
+- Behavior notes: prefix move implementation performs recursive listing, copies each object to the new prefix, then deletes the source directory (permanent). Errors are caught and surfaced; movedCount is returned for prefix moves.
+
+## 2026-01-28 - 1.9.0 - feat(s3-columns)
+load full prefix path on initial load and add folder upload support
+
+- loadInitialColumn now loads all prefix path segments in parallel and pre-selects child prefixes so multi-column path is restored
+- added getPathSegments helper and auto-scroll to show the rightmost column after load
+- added separate hidden folder input (webkitdirectory) and folder upload flow; triggerFileUpload now accepts 'files' | 'folder'
+- replaced generic 'Upload...' with 'Upload Files...' and added 'Upload Folder...' menu items
+- updated updated() to react to currentPrefix changes and cleaned up folder input on disconnectedCallback
+
+## 2026-01-28 - 1.8.1 - fix(cli)
+set executable permission on cli.js
+
+- metadata-only change: updated file mode for cli.js (executable bit set)
+- no source code changes; ensures package binary is runnable
+
+## 2026-01-28 - 1.8.0 - feat(streaming)
+add global activity watchers, client-side buffering, and improved real-time streaming UX
+
+- Introduce global MongoDB and S3 watchers in ChangeStreamManager to feed a deployment-level activity stream (start/stop automatically based on subscribers)
+- ChangeStreamManager: activity buffering, globalWatchersActive flag, start/stop global watchers, and emitMongoActivityEvent API for handlers
+- Mongo API handlers accept an optional ChangeStreamManager and emit activity events for DB/collection/document operations
+- Server now initializes ChangeStreamManager earlier and passes it to registerMongoHandlers; request context uses localData.peer.id for WebSocket peer lookup
+- Client: ChangeStreamService adds connection promise/ensureConnected, activity buffering across tabs, and more robust connect/subscribe flows (waits for connect in-flight)
+- UI updates: activity stream shows relative times with live clock, buffers events from app-level subscription, auto-scroll behavior adjusted, and connection-based re-subscription
+- Mongo/S3 browser components ensure RxJS listeners are attached before server-side subscribe and surface connection status
+- S3 browser: add drag-and-drop folder upload support (webkitdirectory), recursive folder entry traversal, upload with preserved relative paths, and column refresh/refreshAll logic
+- Minor API/behavioral changes use connection peer id via conn.peer?.id when resolving target connections
+
+## 2026-01-27 - 1.7.0 - feat(s3)
+add drag-and-drop and context-menu file uploads, inline text editing in preview, and increase preview width
+
+- Add drag-and-drop uploading into columns and folders with visual drag-over / drag-target states and a delayed folder-hover target
+- Add context-menu 'Upload Files' action and hidden file input to trigger multi-file uploads; show upload overlay with progress and refresh column after upload
+- Implement upload handling using apiService.putObject and base64 file reads, with upload progress tracking and error logging
+- Add inline text editing in the preview (Edit / Save / Discard flow) using dees-input-code for editing and dees-preview for read-only display
+- Increase preview default width from 350px to 700px and raise max resize limit from 600px to 1000px
+- Bump dependencies: @git.zone/tstest -> ^3.1.8, @design.estate/dees-catalog -> ^3.41.1, @design.estate/dees-element -> ^2.1.6
+
+## 2026-01-26 - 1.6.1 - fix(ci)
+add Gitea CI workflows, documentation updates, and packaging metadata tweaks
+
+- Add .gitea workflow files for tag and non-tag pushes (security, test, release, metadata jobs)
+- Add buildDocs script (tsdoc) and add bugs/homepage/pnpm.overrides entries to package.json
+- Update README and readme.hints.md with real-time streaming docs, formatting/table fixes, and examples punctuation fixes
+- Tidy npmextra.json formatting and array inline style changes
+- Update changelog.md entries and correct trailing newline/formatting
+- Minor .gitignore whitespace fix
+
+## 2026-01-25 - 1.6.0 - feat(readme)
+
+document real-time change streaming and expand README with features, architecture, and configuration updates
+
+- Add Real-Time Change Streaming section: MongoDB change streams, S3 polling (ETag), activity stream, WebSocket subscriptions, and auto-reconnect behavior
+- Expand S3 and MongoDB feature lists: in-place text editing, enhanced previews (code), show/hide system databases, live indicators, context menus
+- Reintroduce project-level npmextra.json example and clarify environment variable names and priority order
+- Add Architecture and How It Works sections with tree layout and streaming design details
+- Minor wording, formatting, and installation clarifications (prefer pnpm examples, fix LICENSE filename case)
+
+## 2026-01-25 - 1.5.0 - feat(streaming)
+
+add real-time streaming (MongoDB change streams & S3 bucket watchers) with WebSocket subscriptions and activity stream UI
+
+- Server: add ChangeStreamManager to manage MongoDB change streams and S3 BucketWatcher subscriptions, handle subscription lifecycle, activity ring buffer and push events via TypedSocket.
+- API: introduce streaming TypedRequest interfaces and register new handlers (subscribeMongo/unsubscribeMongo, subscribeS3/unsubscribeS3, subscribeActivity/unsubscribeActivity, getRecentActivity, push events).
+- Client: add ChangeStreamService (TypedSocket connection, reconnection, RxJS subjects) and integrate into tsview-app, mongo and S3 browsers to show live status, change counters and refresh content on updates.
+- UI: add new Activity Stream component (tsview-activity-stream), Activity tab and navigation, plus visual indicators (Live/Offline, change badges, auto-scroll and filters).
+- Dependencies & plugins: add @api.global/typedsocket and @push.rocks/smartrx, bump @push.rocks/smartbucket; expose smartrx/typedsocket in plugins for server and web bundles.
+- Docs: update readme.hints.md with Real-Time Streaming architecture, interfaces and dependency notes.
+
+## 2026-01-25 - 1.4.0 - feat(web)
+
+add database overview panel, collection overview and resizable panels; show/hide system databases; use code editor with change-tracking in document view; add getDatabaseStats API and typings; enable overwrite for S3 uploads
+
+- Add backend handler getDatabaseStats + request/response typings (IReq_GetDatabaseStats, IDatabaseStats) and ApiService.getDatabaseStats()
+- New UI component tsview-mongo-db-overview to show database statistics (collections, objects, avg size, data/storage size, indexes)
+- Collections list: added an "Overview" entry that opens the DB overview when selected
+- Sidebar: context menu option to show/hide system databases (admin/config/local) and database collapse-on-click behavior
+- Resizable layout improvements: draggable dividers added for sidebar, Mongo editor panel and S3 preview panel (persisted via local state variables)
+- Document editor: switch to dees-input-code, track original content and unsaved changes, add discard/save flow and improved save handling
+- S3 handlers: fastPut calls now pass overwrite: true to allow replacing existing keys
+- Minor dependency bumps: @git.zone/tstest and @design.estate/dees-catalog
+
+## 2026-01-25 - 1.3.0 - feat(s3)
+
+add S3 create file/folder dialogs and in-place text editor; export mongodb plugin
+
+- Add mongodb dependency and export mongodb in ts/plugins.ts so ObjectId can be reused from plugins.
+- Update handlers.mongodb to use plugins.mongodb.ObjectId instead of requiring mongodb directly.
+- UI: Add create-file and create-folder dialogs and context-menu entries in tsview-app, tsview-s3-columns, and tsview-s3-keys to create objects (folders use a .keep object).
+- Implement client-side helpers to determine content type/default content and call apiService.putObject with base64 content when creating files/folders.
+- S3 preview: embed dees-input-code editor for text files with language detection, unsaved-changes indicator, Save/Discard flows, and saving via apiService.putObject.
+- Various styling and UX improvements for dialogs, buttons, and editor states.
+
+## 2026-01-25 - 1.2.0 - feat(s3,web-ui)
+
+add S3 deletePrefix and getObjectUrl endpoints and add context menus in UI for S3 and Mongo views
+
+- Add server-side TypedHandlers: deletePrefix and getObjectUrl (ts/api/handlers.s3.ts)
+- Add request/response interfaces IReq_DeletePrefix and IReq_GetObjectUrl (ts/interfaces/index.ts)
+- Add client API methods deletePrefix and getObjectUrl (ts_web/services/api.service.ts)
+- Introduce context menu actions (DeesContextmenu) across UI: bucket/database/collection/document/folder/file actions including open, copy path, delete, download and duplicate (ts_web/elements/tsview-app.ts, tsview-mongo-collections.ts, tsview-mongo-documents.ts, tsview-s3-columns.ts, tsview-s3-keys.ts)
+- Switch from inline delete buttons to contextual menus for safer UX; implement downloads via data URLs returned by getObjectUrl and deletion of S3 prefixes (folders)
+
 ## 2026-01-25 - 1.1.3 - fix(package)
+
 update package metadata
 
 - metadata-only change; no source code changes
 - current version 1.1.2 → recommended patch bump to 1.1.3
 
 ## 2026-01-25 - 1.1.2 - fix(package)
+
 apply minor metadata-only change (one-line edit)
 
 - Change affects 1 file with a +1 -1 (metadata-only) — no behavioral changes
 - Recommended bump of patch version from 1.1.1 to 1.1.2
 
 ## 2026-01-25 - 1.1.1 - fix(tsview)
+
 fix bad build commit - remove accidental include
 
 - Removed an accidental include that caused a bad build and unintended files to be part of the commit
 - Patch release recommended from 1.1.0 to 1.1.1
 
 ## 2026-01-25 - 1.1.0 - feat(tsview)
+
 add database and S3 handlers, tswatch/watch scripts, web utilities, assets and release config
 
 - Add MongoDB management handlers: createDatabase, dropDatabase, dropCollection (ts/api/handlers.mongodb.ts)
@@ -30,6 +216,7 @@ add database and S3 handlers, tswatch/watch scripts, web utilities, assets and r
 - Add release/registry and project metadata in npmextra.json for publishing
 
 ## 2026-01-23 - 1.0.0 - initial release: column view UI, S3 integration, and API fixes
+
 Initial public release introducing the new column-based UI with resizable columns and horizontal navigation, plus backend fixes for S3 bucket listing and API endpoint handling.
 
 - feat: Add resizable columns and horizontal scrolling
@@ -57,4 +244,4 @@ Initial public release introducing the new column-based UI with resizable column
   - Bump @api.global/typedserver to v8.3.0 (includes noCache feature)
 
 - chore: initial project scaffold
-  - Initial commit and project scaffolding (summary)
+  - Initial commit and project scaffolding (summary)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@git.zone/tsview",
-  "version": "1.1.3",
+  "version": "1.12.5",
   "private": false,
   "description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
   "main": "dist_ts/index.js",
@@ -10,41 +10,45 @@
   "license": "MIT",
   "scripts": {
     "test": "pnpm run build && tstest test/ --verbose",
-    "build": "pnpm run bundle && tsbuild --allowimplicitany",
+    "build": "pnpm run bundle && tsbuild --allowimplicitany --skiplibcheck",
     "bundle": "tsbundle",
     "startTs": "node cli.ts.js",
-    "watch": "tswatch"
+    "watch": "tswatch",
+    "buildDocs": "tsdoc"
   },
   "bin": {
     "tsview": "cli.js"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.2",
+    "@api.global/typedsocket": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
     "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.6",
+    "@git.zone/tstest": "^3.5.1",
-    "@git.zone/tswatch": "3.0.1",
+    "@git.zone/tswatch": "^3.3.1",
-    "@types/node": "^25.0.10"
+    "@push.rocks/smartrx": "^3.0.10",
+    "@types/node": "^25.5.0"
   },
   "dependencies": {
-    "@api.global/typedrequest": "^3.2.5",
+    "@api.global/typedrequest": "^3.3.0",
     "@api.global/typedrequest-interfaces": "^3.0.19",
-    "@api.global/typedserver": "^8.3.0",
+    "@api.global/typedserver": "^8.4.6",
-    "@aws-sdk/client-s3": "^3.975.0",
+    "@aws-sdk/client-s3": "^3.1015.0",
-    "@design.estate/dees-catalog": "^3.37.0",
+    "@design.estate/dees-catalog": "^3.49.0",
-    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-element": "^2.2.3",
     "@push.rocks/early": "^4.0.4",
-    "@push.rocks/npmextra": "^5.3.3",
+    "@push.rocks/smartbucket": "^4.5.1",
-    "@push.rocks/smartbucket": "^4.3.1",
     "@push.rocks/smartcli": "^4.0.20",
-    "@push.rocks/smartdata": "^7.0.15",
+    "@push.rocks/smartconfig": "^6.0.1",
+    "@push.rocks/smartdata": "^7.1.0",
     "@push.rocks/smartfile": "^13.1.2",
-    "@push.rocks/smartlog": "^3.1.10",
+    "@push.rocks/smartlog": "^3.2.1",
     "@push.rocks/smartlog-destination-local": "^9.0.2",
     "@push.rocks/smartnetwork": "^4.4.0",
     "@push.rocks/smartopen": "^2.0.0",
     "@push.rocks/smartpath": "^6.0.0",
-    "@push.rocks/smartpromise": "^4.2.3"
+    "@push.rocks/smartpromise": "^4.2.3",
+    "mongodb": "^7.1.1"
   },
   "files": [
     "ts/**/*",
@@ -55,7 +59,7 @@
     "dist_ts_web/**/*",
     "assets/**/*",
     "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
     "readme.md"
   ],
   "browserslist": [
@@ -64,5 +68,12 @@
   "repository": {
     "type": "git",
     "url": "https://code.foss.global/git.zone/tsview.git"
+  },
+  "bugs": {
+    "url": "https://code.foss.global/git.zone/tsview/issues"
+  },
+  "homepage": "https://code.foss.global/git.zone/tsview#readme",
+  "pnpm": {
+    "overrides": {}
   }
 }

readme.hints.md

@@ -1,37 +1,44 @@
 # tsview - Project Hints
 
 ## Overview
+
 tsview is a CLI tool for viewing S3 and MongoDB data through a web UI.
 
 ## Key Patterns
 
 ### Configuration
+
 - Reads from `.nogit/env.json` (created by `gitzone service`)
 - Environment variables: MONGODB_URL, S3_HOST, S3_ACCESSKEY, etc.
 
 ### CLI Commands
+
 - `tsview` - Start viewer (auto-finds free port from 3010+)
 - `tsview --port 3000` - Force specific port
 - `tsview s3` - S3 viewer only
 - `tsview mongo` - MongoDB viewer only
 
 ### Dependencies
+
 - Uses `@push.rocks/smartbucket` for S3 operations
 - Uses `@push.rocks/smartdata` for MongoDB operations
 - Uses `@api.global/typedserver` + `@api.global/typedrequest` for API
 - Uses `@design.estate/dees-catalog` for UI components
 
 ### Build Process
+
 - Run `pnpm build` to compile TypeScript and bundle web UI
 - UI is bundled from `ts_web/` to `ts/bundled_ui.ts` as base64
 
 ### Web UI Structure
+
 - `ts_web/elements/` - Web components (LitElement-based)
 - `ts_web/services/` - API service for backend communication
 - `ts_web/utilities/` - Shared formatting functions (formatSize, formatCount, getFileName)
 - `ts_web/styles/` - Shared CSS custom properties (themeStyles)
 
 ### TypedRequest Pattern
+
 ```typescript
 // Interface definition
 export interface IReq_ListBuckets extends plugins.typedrequest.implementsTR<
@@ -53,3 +60,75 @@ typedrouter.addTypedHandler(
   )
 );
 ```
+
+## Real-Time Streaming (v1.5.0+)
+
+### Architecture
+
+- `ts/streaming/` - Backend streaming infrastructure
+  - `classes.changestream-manager.ts` - Manages MongoDB and S3 watchers
+  - `interfaces.streaming.ts` - TypedRequest interfaces for subscriptions
+- `ts_web/services/changestream.service.ts` - Frontend WebSocket client
+
+### MongoDB Change Streams
+
+- Uses native MongoDB Change Streams via `SmartdataDb.mongoDbClient`
+- Subscription per collection: `db/collection`
+- Events: insert, update, delete, replace, drop
+
+### S3 Change Detection
+
+- Uses `@push.rocks/smartbucket` BucketWatcher (polling-based)
+- Polling interval: 5 seconds
+- Events: add, modify, delete
+
+### Frontend Components
+
+- `tsview-activity-stream.ts` - Combined activity view with filtering
+- MongoDB/S3 browsers auto-subscribe to current resource
+- Visual indicators for "Live" status and recent change count
+
+### Key Streaming Interfaces
+
+```typescript
+// Subscribe to collection changes
+IReq_SubscribeMongo: { database, collection } -> { success, subscriptionId }
+
+// Subscribe to bucket changes
+IReq_SubscribeS3: { bucket, prefix? } -> { success, subscriptionId }
+
+// Subscribe to activity stream (all changes)
+IReq_SubscribeActivity: {} -> { success, subscriptionId }
+
+// Server pushes changes to subscribed clients
+IReq_PushMongoChange: { event: IMongoChangeEvent } -> { received }
+IReq_PushS3Change: { event: IS3ChangeEvent } -> { received }
+IReq_PushActivityEvent: { event: IActivityEvent } -> { received }
+```
+
+### WebSocket Context Pattern
+
+When a TypedHandler receives a WebSocket request, the transport context is available via the second argument (`TypedTools` instance). SmartServe attaches the WebSocket peer to `localData.peer`:
+
+```typescript
+// In a TypedHandler callback:
+async (reqData, context) => {
+  // context is a TypedTools instance
+  const peerId = context.localData?.peer?.id; // unique WebSocket connection ID
+}
+```
+
+To push events back to a specific client, use `findTargetConnection`:
+
+```typescript
+const conn = await typedSocket.findTargetConnection(async (c: any) => {
+  return c.peer?.id === connectionId;
+});
+const request = typedSocket.createTypedRequest<IReq_Push>('pushEvent', conn);
+await request.fire({ event });
+```
+
+### Dependencies Added
+
+- `@api.global/typedsocket` - WebSocket client/server
+- `@push.rocks/smartrx` - RxJS utilities

readme.md

@@ -1,6 +1,6 @@
 # @git.zone/tsview
 
-A powerful developer tool for browsing and managing S3-compatible storage and MongoDB databases through a sleek web UI. Built with TypeScript, designed for developers who need quick, visual access to their data stores during development. 🚀
+A powerful developer tool for browsing and managing S3-compatible storage and MongoDB databases through a sleek web UI — with real-time change streaming baked in. Built with TypeScript, designed for developers who need quick, visual access to their data stores during development.
 
 ## Issue Reporting and Security
 
@@ -10,47 +10,17 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 
 ```bash
 # Global installation (recommended for CLI usage)
-npm install -g @git.zone/tsview
-# or
 pnpm add -g @git.zone/tsview
 
 # Local installation (for programmatic usage)
-npm install @git.zone/tsview
-# or
 pnpm add @git.zone/tsview
 ```
 
-## Features ✨
+## 🚀 Quick Start
-
-### 🗄️ S3 Storage Browser
-- **Column View Navigation** - Mac Finder-style interface with resizable columns for intuitive file browsing
-- **List View** - Traditional key-based view with hierarchical navigation
-- **Real-time Preview** - View images, JSON, text files, and more directly in the browser
-- **Bucket Management** - Create, delete, and switch between buckets
-- **File Operations** - Upload, download, delete objects with ease
-- **Smart Content Type Detection** - Automatic content type recognition for 20+ file types
-- **Breadcrumb Navigation** - Easy path traversal with clickable breadcrumbs
-
-### 🍃 MongoDB Browser
-- **Database Explorer** - Hierarchical navigation through databases and collections
-- **Document Viewer** - Paginated table view with sorting and filtering
-- **Document Editor** - Full CRUD operations with JSON syntax highlighting
-- **Index Management** - View, create, and drop indexes
-- **Aggregation Pipeline** - Run custom aggregation queries (coming soon)
-- **Collection Stats** - View document counts, sizes, and storage metrics
-- **Server Status** - Monitor connection info and server health
-
-### 🎨 Modern Web UI
-- 🌙 Dark theme designed for developer comfort
-- 📱 Responsive layout with resizable panels
-- ⌨️ Keyboard-friendly navigation
-- 🔌 Zero external runtime dependencies in the browser
-
-## Quick Start 🚀
 
 ### 1. Configure Your Connection
 
-Create a `.nogit/env.json` file in your project root:
+Create a `.nogit/env.json` file in your project root (auto-generated by `gitzone service`):
 
 ```json
 {
@@ -70,7 +40,50 @@ Create a `.nogit/env.json` file in your project root:
 tsview
 ```
 
-That's it! 🎉 Your browser will automatically open to the viewer interface.
+That's it! Your browser opens automatically to the viewer interface.
+
+## ✨ Features
+
+### 🗄️ S3 Storage Browser
+
+Powered by `dees-storage-browser` from `@design.estate/dees-catalog`:
+
+- **Column View Navigation** — Mac Finder-style interface with resizable columns
+- **List View** — Traditional key-based view with hierarchical navigation
+- **Real-time Preview** — View images, JSON, text, code, and more directly in the browser
+- **Bucket Management** — Create, delete, and switch between buckets
+- **File Operations** — Upload, download, delete, move, and copy objects
+- **In-place Text Editing** — Edit text files directly with change tracking
+- **Smart Content Type Detection** — Automatic recognition for 20+ file types
+- **Breadcrumb Navigation** — Clickable path traversal
+
+### 🍃 MongoDB Browser
+
+- **Database Explorer** — Hierarchical navigation through databases and collections
+- **Database Overview** — Collection counts, data sizes, index stats at a glance
+- **Document Viewer** — Paginated table view with JSON filter support
+- **Document Editor** — Full CRUD with syntax-highlighted code editor and change tracking
+- **Index Management** — View, create, and drop indexes
+- **Aggregation Pipeline** — Run aggregation queries directly
+- **Collection Stats** — Document counts, sizes, storage metrics
+- **Server Status** — Connection info, version, uptime
+- **Show/Hide System Databases** — Toggle visibility of `admin`, `local`, `config`
+
+### ⚡ Real-Time Change Streaming
+
+- **MongoDB Change Streams** — Live updates via native MongoDB change streams
+- **S3 Change Detection** — Polling-based bucket monitoring with ETag comparison (5s intervals)
+- **Activity Stream** — Combined timeline of all changes from both sources, filterable by type
+- **Live Indicators** — Green dot + change count badges on active views
+- **WebSocket Subscriptions** — Per-collection, per-bucket, or global activity feed
+- **Auto-Reconnect** — Subscriptions automatically restored after connection loss
+
+### 🎨 Modern Web UI
+
+- Dark theme designed for developer comfort
+- Responsive layout with resizable panels
+- Context menus for quick actions
+- Everything bundled — zero external runtime dependencies in the browser
 
 ## CLI Usage
 
@@ -90,28 +103,6 @@ tsview mongo
 tsview mongodb
 ```
 
-## Configuration via npmextra.json
-
-For project-level configuration, add a `@git.zone/tsview` section to your `npmextra.json`:
-
-```json
-{
-  "@git.zone/tsview": {
-    "port": 3015,
-    "killIfBusy": true,
-    "openBrowser": false
-  }
-}
-```
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `port` | `number` | auto | Fixed port to use (auto-finds from 3010 if not set) |
-| `killIfBusy` | `boolean` | `false` | Kill existing process if port is busy |
-| `openBrowser` | `boolean` | `true` | Automatically open browser on start |
-
-**Priority order:** CLI `--port` flag > `npmextra.json` config > auto-detect
-
 ## Programmatic API
 
 Use tsview as a library in your own tools:
@@ -124,32 +115,32 @@ const viewer = new TsView();
 // Option 1: Load from .nogit/env.json (gitzone service format)
 await viewer.loadConfigFromEnv();
 
-// Option 2: Configure programmatically for local development
+// Option 2: Configure programmatically
-viewer.setS3Config({
+viewer.setStorageConfig({
   endpoint: 'localhost',
   port: 9000,
   accessKey: 'minioadmin',
   accessSecret: 'minioadmin',
-  useSsl: false
+  useSsl: false,
 });
 
 viewer.setMongoConfig({
   mongoDbUrl: 'mongodb://localhost:27017',
-  mongoDbName: 'mydb'
+  mongoDbName: 'mydb',
 });
 
-// Option 3: Configure for cloud services
+// Option 3: Cloud services
-viewer.setS3Config({
+viewer.setStorageConfig({
   endpoint: 's3.amazonaws.com',
   accessKey: 'AKIAXXXXXXX',
   accessSecret: 'your-secret-key',
   useSsl: true,
-  region: 'us-east-1'
+  region: 'us-east-1',
 });
 
 viewer.setMongoConfig({
   mongoDbUrl: 'mongodb+srv://user:pass@cluster.mongodb.net',
-  mongoDbName: 'production'
+  mongoDbName: 'production',
 });
 
 // Start the server
@@ -163,62 +154,121 @@ await viewer.start(3500);
 await viewer.stop();
 ```
 
-## Environment Variables
+## Configuration
 
-The following environment variables are supported in `.nogit/env.json`:
+### Project-level via `.smartconfig.json`
 
-### S3 Configuration
+```json
-| Variable | Description |
+{
-|----------|-------------|
+  "@git.zone/tsview": {
-| `S3_ENDPOINT` | S3 server hostname |
+    "port": 3015,
-| `S3_PORT` | S3 server port (optional) |
+    "killIfBusy": true,
-| `S3_ACCESSKEY` | Access key ID |
+    "openBrowser": false
-| `S3_SECRETKEY` | Secret access key |
+  }
-| `S3_USESSL` | Use HTTPS (`true`/`false`) |
+}
+```
 
-### MongoDB Configuration
+| Option        | Type      | Default | Description                                  |
-| Variable | Description |
+| ------------- | --------- | ------- | -------------------------------------------- |
-|----------|-------------|
+| `port`        | `number`  | auto    | Fixed port (auto-finds from 3010 if not set) |
-| `MONGODB_URL` | Full MongoDB connection string |
+| `killIfBusy`  | `boolean` | `false` | Kill existing process if port is busy        |
-| `MONGODB_NAME` | Default database name |
+| `openBrowser` | `boolean` | `true`  | Automatically open browser on start          |
 
-Or use individual MongoDB variables:
+**Port priority:** CLI `--port` flag → `.smartconfig.json` → auto-detect
-| Variable | Description |
+
-|----------|-------------|
+### Environment Variables (`.nogit/env.json`)
-| `MONGODB_HOST` | MongoDB hostname |
+
-| `MONGODB_PORT` | MongoDB port |
+#### S3
-| `MONGODB_USER` | Username |
+
-| `MONGODB_PASS` | Password |
+| Variable       | Description                   |
+| -------------- | ----------------------------- |
+| `S3_ENDPOINT`  | S3-compatible server hostname |
+| `S3_PORT`      | Server port (optional)        |
+| `S3_ACCESSKEY` | Access key ID                 |
+| `S3_SECRETKEY` | Secret access key             |
+| `S3_USESSL`    | Use HTTPS (`true`/`false`)    |
+
+#### MongoDB
+
+| Variable       | Description                        |
+| -------------- | ---------------------------------- |
+| `MONGODB_URL`  | Full connection string (preferred) |
+| `MONGODB_NAME` | Default database name              |
+
+Or use individual variables:
+
+| Variable       | Description   |
+| -------------- | ------------- |
+| `MONGODB_HOST` | Hostname      |
+| `MONGODB_PORT` | Port          |
+| `MONGODB_USER` | Username      |
+| `MONGODB_PASS` | Password      |
 | `MONGODB_NAME` | Database name |
 
 ## Supported S3 Providers
 
 tsview works with any S3-compatible storage:
 
-| Provider | Status |
+| Provider                | Status                     |
-|----------|--------|
+| ----------------------- | -------------------------- |
-| **MinIO** | ✅ Perfect for local development |
+| **MinIO**               | Perfect for local dev      |
-| **AWS S3** | ✅ Amazon's object storage |
+| **AWS S3**              | Amazon's object storage    |
-| **DigitalOcean Spaces** | ✅ Simple object storage |
+| **DigitalOcean Spaces** | Simple object storage      |
-| **Backblaze B2** | ✅ S3-compatible API |
+| **Backblaze B2**        | S3-compatible API          |
-| **Cloudflare R2** | ✅ Zero egress fees |
+| **Cloudflare R2**       | Zero egress fees           |
-| **Wasabi** | ✅ Hot cloud storage |
+| **Wasabi**              | Hot cloud storage          |
-| **Self-hosted** | ✅ Any S3-compatible server |
+| **Self-hosted**         | Any S3-compatible server   |
 
 ## Supported File Types for Preview
 
-| Category | Extensions |
+| Category      | Extensions                                             |
-|----------|------------|
+| ------------- | ------------------------------------------------------ |
-| **Images** | `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg` |
+| **Images**    | `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`       |
-| **Text** | `.txt`, `.md`, `.log`, `.sh`, `.env` |
+| **Text**      | `.txt`, `.md`, `.log`, `.sh`, `.env`                   |
-| **Code** | `.json`, `.js`, `.ts`, `.tsx`, `.jsx`, `.html`, `.css` |
+| **Code**      | `.json`, `.js`, `.ts`, `.tsx`, `.jsx`, `.html`, `.css` |
-| **Data** | `.csv`, `.xml`, `.yaml`, `.yml` |
+| **Data**      | `.csv`, `.xml`, `.yaml`, `.yml`                        |
-| **Documents** | `.pdf` |
+| **Documents** | `.pdf`                                                 |
+
+## 🏗️ Architecture
+
+```
+tsview/
+├── ts/                           # Backend (Node.js)
+│   ├── api/                      # TypedRequest API handlers
+│   │   ├── handlers.s3.ts        #   S3 bucket & object operations
+│   │   └── handlers.mongodb.ts   #   MongoDB CRUD & admin operations
+│   ├── config/                   # Configuration management
+│   ├── server/                   # Web server (TypedServer + TypedSocket)
+│   ├── streaming/                # Real-time change streaming
+│   │   ├── classes.changestream-manager.ts  # MongoDB + S3 watchers
+│   │   └── interfaces.streaming.ts          # Subscription interfaces
+│   ├── interfaces/               # Shared TypeScript interfaces
+│   └── tsview.classes.tsview.ts  # Main class
+├── ts_web/                       # Frontend (bundled via esbuild → base64ts)
+│   ├── elements/                 # Web components (LitElement)
+│   │   ├── tsview-app.ts         #   App shell + navigation
+│   │   ├── tsview-mongo-*.ts     #   MongoDB browser components
+│   │   └── tsview-activity-stream.ts  # Real-time activity feed
+│   ├── adapters/                 # Data provider adapters
+│   │   └── s3-data-provider.ts   #   IStorageDataProvider for dees-storage-browser
+│   ├── services/                 # API + WebSocket clients
+│   ├── styles/                   # Dark theme
+│   └── utilities/                # Formatting helpers
+└── .smartconfig.json             # Build & runtime config
+```
+
+### How It Works
+
+1. **Backend** — A `TypedServer` serves the bundled web UI and exposes a typed API via `TypedRequest` over HTTP. A `TypedSocket` WebSocket layer handles real-time streaming subscriptions.
+
+2. **Frontend** — LitElement-based web components communicate with the backend via `TypedRequest`. The S3 browser uses `dees-storage-browser` from `@design.estate/dees-catalog` with a custom `IStorageDataProvider` adapter. The `ChangeStreamService` connects over WebSocket and distributes real-time events to active views via RxJS Subjects.
+
+3. **Streaming** — The `ChangeStreamManager` creates MongoDB Change Streams and S3 BucketWatchers on demand (one per subscribed resource). Changes are pushed to subscribed clients and accumulated in a 1000-event ring buffer for the Activity Stream view.
 
 ## Development
 
 ```bash
-# Clone the repository
+# Clone
 git clone https://code.foss.global/git.zone/tsview.git
 cd tsview
 
@@ -235,26 +285,6 @@ pnpm run watch
 pnpm test
 ```
 
-## Architecture
-
-```
-tsview/
-├── ts/                    # Backend TypeScript source
-│   ├── api/               # TypedRequest API handlers
-│   │   ├── handlers.s3.ts
-│   │   └── handlers.mongodb.ts
-│   ├── config/            # Configuration management
-│   ├── server/            # Web server (TypedServer)
-│   ├── interfaces/        # Shared TypeScript interfaces
-│   └── tsview.classes.tsview.ts  # Main class
-├── ts_web/                # Frontend TypeScript source
-│   ├── elements/          # Web components (LitElement)
-│   ├── services/          # API client service
-│   ├── styles/            # Shared theme styles
-│   └── utilities/         # Helper functions
-└── cli.ts.js              # CLI entry point
-```
-
 ## License and Legal Information
 
 This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.

readme.plan.md

@@ -10,7 +10,7 @@ tsview/
 ├── cli.ts.js                       # Dev CLI (uses tsrun to run cli.child.ts)
 ├── cli.child.ts                    # Dev CLI entry (imports ts/index.js)
 ├── package.json                    # bin: { "tsview": "cli.js" }
-├── npmextra.json                   # tsbundle config for UI bundling
+├── .smartconfig.json               # tsbundle/tswatch config
 ├── tsconfig.json
 ├── readme.md
 ├── readme.hints.md

test/test.tsview.ts

@@ -14,8 +14,8 @@ tap.test('should create TsView instance', async () => {
 tap.test('should have config methods', async () => {
   const viewer = new tsview.TsView();
 
-  // Set S3 config
+  // Set storage config
-  viewer.setS3Config({
+  viewer.setStorageConfig({
     endpoint: 'localhost',
     port: 9000,
     accessKey: 'test',
@@ -23,7 +23,7 @@ tap.test('should have config methods', async () => {
     useSsl: false,
   });
 
-  expect(viewer.config.hasS3()).toBeTrue();
+  expect(viewer.config.hasStorage()).toBeTrue();
   expect(viewer.config.hasMongo()).toBeFalse();
 
   // Set MongoDB config

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@git.zone/tsview',
-  version: '1.1.3',
+  version: '1.12.5',
   description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }

ts/api/handlers.mongodb.ts

@@ -1,13 +1,15 @@
 import * as plugins from '../plugins.js';
 import type * as interfaces from '../interfaces/index.js';
 import type { TsView } from '../tsview.classes.tsview.js';
+import type { ChangeStreamManager } from '../streaming/index.js';
 
 /**
  * Register MongoDB API handlers
  */
 export async function registerMongoHandlers(
   typedrouter: plugins.typedrequest.TypedRouter,
-  tsview: TsView
+  tsview: TsView,
+  changeStreamManager?: ChangeStreamManager
 ): Promise<void> {
   // Helper to get the native MongoDB client
   const getMongoClient = async () => {
@@ -21,15 +23,9 @@ export async function registerMongoHandlers(
 
   // Helper to create ObjectId filter
   const createIdFilter = (documentId: string) => {
-    // Try to treat as ObjectId string - MongoDB driver will handle conversion
+    const { ObjectId } = plugins.mongodb;
-    try {
+    if (ObjectId.isValid(documentId)) {
-      // Import ObjectId from the mongodb package that smartdata uses
+      return { _id: new ObjectId(documentId) };
-      const { ObjectId } = require('mongodb');
-      if (ObjectId.isValid(documentId)) {
-        return { _id: new ObjectId(documentId) };
-      }
-    } catch {
-      // Fall through to string filter
     }
     return { _id: documentId };
   };
@@ -59,6 +55,37 @@ export async function registerMongoHandlers(
     )
   );
 
+  // Get database stats
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_GetDatabaseStats>(
+      'getDatabaseStats',
+      async (reqData) => {
+        try {
+          const client = await getMongoClient();
+          const db = client.db(reqData.databaseName);
+          const stats = await db.stats();
+          const collections = await db.listCollections().toArray();
+
+          return {
+            stats: {
+              collections: collections.length,
+              views: stats.views || 0,
+              objects: stats.objects || 0,
+              avgObjSize: stats.avgObjSize || 0,
+              dataSize: stats.dataSize || 0,
+              storageSize: stats.storageSize || 0,
+              indexes: stats.indexes || 0,
+              indexSize: stats.indexSize || 0,
+            },
+          };
+        } catch (err) {
+          console.error('Error getting database stats:', err);
+          return { stats: null };
+        }
+      }
+    )
+  );
+
   // List collections
   typedrouter.addTypedHandler(
     new plugins.typedrequest.TypedHandler<interfaces.IReq_ListCollections>(
@@ -97,6 +124,14 @@ export async function registerMongoHandlers(
           const db = client.db(reqData.databaseName);
           // Create a placeholder collection to materialize the database
           await db.createCollection('_tsview_init');
+          if (changeStreamManager) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'insert',
+              database: reqData.databaseName,
+              collection: '_tsview_init',
+              timestamp: new Date().toISOString(),
+            });
+          }
           return { success: true };
         } catch (err) {
           console.error('Error creating database:', err);
@@ -115,6 +150,14 @@ export async function registerMongoHandlers(
           const client = await getMongoClient();
           const db = client.db(reqData.databaseName);
           await db.dropDatabase();
+          if (changeStreamManager) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'drop',
+              database: reqData.databaseName,
+              collection: '*',
+              timestamp: new Date().toISOString(),
+            });
+          }
           return { success: true };
         } catch (err) {
           console.error('Error dropping database:', err);
@@ -133,6 +176,14 @@ export async function registerMongoHandlers(
           const client = await getMongoClient();
           const db = client.db(reqData.databaseName);
           await db.createCollection(reqData.collectionName);
+          if (changeStreamManager) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'insert',
+              database: reqData.databaseName,
+              collection: reqData.collectionName,
+              timestamp: new Date().toISOString(),
+            });
+          }
           return { success: true };
         } catch (err) {
           console.error('Error creating collection:', err);
@@ -151,6 +202,14 @@ export async function registerMongoHandlers(
           const client = await getMongoClient();
           const db = client.db(reqData.databaseName);
           await db.dropCollection(reqData.collectionName);
+          if (changeStreamManager) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'drop',
+              database: reqData.databaseName,
+              collection: reqData.collectionName,
+              timestamp: new Date().toISOString(),
+            });
+          }
           return { success: true };
         } catch (err) {
           console.error('Error dropping collection:', err);
@@ -242,6 +301,16 @@ export async function registerMongoHandlers(
 
           const result = await collection.insertOne(reqData.document);
 
+          if (changeStreamManager) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'insert',
+              database: reqData.databaseName,
+              collection: reqData.collectionName,
+              documentId: result.insertedId.toString(),
+              timestamp: new Date().toISOString(),
+            });
+          }
+
           return { insertedId: result.insertedId.toString() };
         } catch (err) {
           console.error('Error inserting document:', err);
@@ -269,6 +338,16 @@ export async function registerMongoHandlers(
 
           const result = await collection.updateOne(filter, updateDoc);
 
+          if (changeStreamManager && (result.modifiedCount > 0 || result.matchedCount > 0)) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'update',
+              database: reqData.databaseName,
+              collection: reqData.collectionName,
+              documentId: reqData.documentId,
+              timestamp: new Date().toISOString(),
+            });
+          }
+
           return {
             success: result.modifiedCount > 0 || result.matchedCount > 0,
             modifiedCount: result.modifiedCount,
@@ -294,6 +373,16 @@ export async function registerMongoHandlers(
           const filter = createIdFilter(reqData.documentId);
           const result = await collection.deleteOne(filter);
 
+          if (changeStreamManager && result.deletedCount > 0) {
+            changeStreamManager.emitMongoActivityEvent({
+              type: 'delete',
+              database: reqData.databaseName,
+              collection: reqData.collectionName,
+              documentId: reqData.documentId,
+              timestamp: new Date().toISOString(),
+            });
+          }
+
           return {
             success: result.deletedCount > 0,
             deletedCount: result.deletedCount,

ts/api/handlers.s3.ts

@@ -119,7 +119,7 @@ export async function registerS3Handlers(
             }
           }
 
-          const objects: interfaces.IS3Object[] = [];
+          const objects: interfaces.IStorageObject[] = [];
           const prefixSet = new Set<string>();
 
           // List files in current directory
@@ -292,6 +292,7 @@ export async function registerS3Handlers(
           await bucket.fastPut({
             path: reqData.key,
             contents: content,
+            overwrite: true,
           });
 
           return { success: true };
@@ -354,6 +355,7 @@ export async function registerS3Handlers(
           await destBucket.fastPut({
             path: reqData.destKey,
             contents: content,
+            overwrite: true,
           });
 
           return { success: true };
@@ -364,4 +366,230 @@ export async function registerS3Handlers(
       }
     )
   );
+
+  // Delete prefix (folder and all contents)
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_DeletePrefix>(
+      'deletePrefix',
+      async (reqData) => {
+        const smartbucket = await tsview.getSmartBucket();
+        if (!smartbucket) {
+          return { success: false };
+        }
+
+        try {
+          const bucket = await smartbucket.getBucketByName(reqData.bucketName);
+          if (!bucket) {
+            return { success: false };
+          }
+
+          const baseDir = await bucket.getBaseDirectory();
+          let targetDir = baseDir;
+
+          // Navigate to the prefix directory
+          const prefix = reqData.prefix.replace(/\/$/, '');
+          const prefixParts = prefix.split('/').filter(Boolean);
+          for (const part of prefixParts) {
+            const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
+            if (subDir) {
+              targetDir = subDir;
+            } else {
+              return { success: false };
+            }
+          }
+
+          // Delete the directory and all its contents
+          await targetDir.delete({ mode: 'permanent' });
+          return { success: true };
+        } catch (err) {
+          console.error('Error deleting prefix:', err);
+          return { success: false };
+        }
+      }
+    )
+  );
+
+  // Get object URL (for downloads)
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_GetObjectUrl>(
+      'getObjectUrl',
+      async (reqData) => {
+        const smartbucket = await tsview.getSmartBucket();
+        if (!smartbucket) {
+          throw new Error('S3 not configured');
+        }
+
+        try {
+          const bucket = await smartbucket.getBucketByName(reqData.bucketName);
+          if (!bucket) {
+            throw new Error(`Bucket ${reqData.bucketName} not found`);
+          }
+
+          // Get the content and create a data URL
+          const content = await bucket.fastGet({ path: reqData.key });
+          const ext = reqData.key.split('.').pop()?.toLowerCase() || '';
+          const contentTypeMap: Record<string, string> = {
+            'json': 'application/json',
+            'txt': 'text/plain',
+            'html': 'text/html',
+            'css': 'text/css',
+            'js': 'application/javascript',
+            'ts': 'text/plain',
+            'tsx': 'text/plain',
+            'jsx': 'text/plain',
+            'md': 'text/markdown',
+            'csv': 'text/csv',
+            'yaml': 'text/yaml',
+            'yml': 'text/yaml',
+            'log': 'text/plain',
+            'sh': 'text/plain',
+            'env': 'text/plain',
+            'png': 'image/png',
+            'jpg': 'image/jpeg',
+            'jpeg': 'image/jpeg',
+            'gif': 'image/gif',
+            'webp': 'image/webp',
+            'svg': 'image/svg+xml',
+            'pdf': 'application/pdf',
+            'xml': 'application/xml',
+          };
+          const contentType = contentTypeMap[ext] || 'application/octet-stream';
+          const base64 = content.toString('base64');
+          const url = `data:${contentType};base64,${base64}`;
+
+          return { url };
+        } catch (err) {
+          console.error('Error getting object URL:', err);
+          throw err;
+        }
+      }
+    )
+  );
+
+  // Move object (copy + delete)
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_MoveObject>(
+      'moveObject',
+      async (reqData) => {
+        const smartbucket = await tsview.getSmartBucket();
+        if (!smartbucket) {
+          return { success: false, error: 'S3 not configured' };
+        }
+
+        try {
+          const bucket = await smartbucket.getBucketByName(reqData.bucketName);
+          if (!bucket) {
+            return { success: false, error: `Bucket ${reqData.bucketName} not found` };
+          }
+
+          // Read source content
+          const content = await bucket.fastGet({ path: reqData.sourceKey });
+
+          // Write to destination
+          await bucket.fastPut({
+            path: reqData.destKey,
+            contents: content,
+            overwrite: true,
+          });
+
+          // Delete source
+          await bucket.fastRemove({ path: reqData.sourceKey });
+
+          return { success: true };
+        } catch (err) {
+          console.error('Error moving object:', err);
+          return { success: false, error: String(err) };
+        }
+      }
+    )
+  );
+
+  // Move prefix (folder) - copy all objects then delete all
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_MovePrefix>(
+      'movePrefix',
+      async (reqData) => {
+        const smartbucket = await tsview.getSmartBucket();
+        if (!smartbucket) {
+          return { success: false, movedCount: 0, error: 'S3 not configured' };
+        }
+
+        try {
+          const bucket = await smartbucket.getBucketByName(reqData.bucketName);
+          if (!bucket) {
+            return { success: false, movedCount: 0, error: `Bucket ${reqData.bucketName} not found` };
+          }
+
+          // List all objects under the source prefix recursively
+          const allObjects: string[] = [];
+
+          const listRecursive = async (prefix: string): Promise<void> => {
+            const baseDir = await bucket.getBaseDirectory();
+            let targetDir = baseDir;
+
+            if (prefix) {
+              const prefixParts = prefix.replace(/\/$/, '').split('/').filter(Boolean);
+              for (const part of prefixParts) {
+                const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
+                if (subDir) {
+                  targetDir = subDir;
+                } else {
+                  return;
+                }
+              }
+            }
+
+            // Get files in this directory
+            const files = await targetDir.listFiles();
+            for (const file of files) {
+              allObjects.push(prefix + file.name);
+            }
+
+            // Recurse into subdirectories
+            const dirs = await targetDir.listDirectories();
+            for (const dir of dirs) {
+              await listRecursive(prefix + dir.name + '/');
+            }
+          };
+
+          await listRecursive(reqData.sourcePrefix);
+
+          // Copy all objects to new location
+          for (const objKey of allObjects) {
+            const relativePath = objKey.substring(reqData.sourcePrefix.length);
+            const newKey = reqData.destPrefix + relativePath;
+
+            const content = await bucket.fastGet({ path: objKey });
+            await bucket.fastPut({
+              path: newKey,
+              contents: content,
+              overwrite: true,
+            });
+          }
+
+          // Delete the source directory
+          const baseDir = await bucket.getBaseDirectory();
+          let targetDir = baseDir;
+          const prefix = reqData.sourcePrefix.replace(/\/$/, '');
+          const prefixParts = prefix.split('/').filter(Boolean);
+
+          for (const part of prefixParts) {
+            const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
+            if (subDir) {
+              targetDir = subDir;
+            } else {
+              return { success: false, movedCount: 0, error: 'Source folder not found' };
+            }
+          }
+
+          await targetDir.delete({ mode: 'permanent' });
+
+          return { success: true, movedCount: allObjects.length };
+        } catch (err) {
+          console.error('Error moving prefix:', err);
+          return { success: false, movedCount: 0, error: String(err) };
+        }
+      }
+    )
+  );
 }

ts/config/classes.config.ts

@@ -7,7 +7,7 @@ import type * as interfaces from '../interfaces/index.js';
  * or accepts programmatic configuration.
  */
 export class TsViewConfig {
-  private s3Config: interfaces.IS3Config | null = null;
+  private storageConfig: interfaces.IStorageConfig | null = null;
   private mongoConfig: interfaces.IMongoConfig | null = null;
 
   /**
@@ -29,7 +29,7 @@ export class TsViewConfig {
 
     // Parse S3 config
     if (envConfig.S3_HOST || envConfig.S3_ENDPOINT) {
-      this.s3Config = {
+      this.storageConfig = {
         endpoint: envConfig.S3_ENDPOINT || envConfig.S3_HOST || '',
         port: envConfig.S3_PORT ? parseInt(envConfig.S3_PORT, 10) : undefined,
         accessKey: envConfig.S3_ACCESSKEY || '',
@@ -69,8 +69,8 @@ export class TsViewConfig {
   /**
    * Set S3 configuration programmatically
    */
-  public setS3Config(config: interfaces.IS3Config): void {
+  public setStorageConfig(config: interfaces.IStorageConfig): void {
-    this.s3Config = config;
+    this.storageConfig = config;
   }
 
   /**
@@ -83,8 +83,8 @@ export class TsViewConfig {
   /**
    * Get S3 configuration
    */
-  public getS3Config(): interfaces.IS3Config | null {
+  public getStorageConfig(): interfaces.IStorageConfig | null {
-    return this.s3Config;
+    return this.storageConfig;
   }
 
   /**
@@ -97,8 +97,8 @@ export class TsViewConfig {
   /**
    * Check if S3 is configured
    */
-  public hasS3(): boolean {
+  public hasStorage(): boolean {
-    return this.s3Config !== null && !!this.s3Config.endpoint && !!this.s3Config.accessKey;
+    return this.storageConfig !== null && !!this.storageConfig.endpoint && !!this.storageConfig.accessKey;
   }
 
   /**

ts/interfaces/index.ts

@@ -1,9 +1,9 @@
 import type * as plugins from '../plugins.js';
 
 /**
- * Configuration for S3 connection
+ * Configuration for storage (S3-compatible) connection
  */
-export interface IS3Config {
+export interface IStorageConfig {
   endpoint: string;
   port?: number;
   accessKey: string;
@@ -24,14 +24,14 @@ export interface IMongoConfig {
  * Combined configuration for tsview
  */
 export interface ITsViewConfig {
-  s3?: IS3Config;
+  s3?: IStorageConfig;
   mongo?: IMongoConfig;
 }
 
 /**
- * Configuration from npmextra.json for @git.zone/tsview
+ * Configuration from smartconfig.json for @git.zone/tsview
  */
-export interface INpmextraConfig {
+export interface ISmartconfigConfig {
   port?: number;           // Fixed port to use (optional)
   killIfBusy?: boolean;    // Kill process on port if busy (default: false)
   openBrowser?: boolean;   // Open browser on start (default: true)
@@ -97,7 +97,7 @@ export interface IReq_DeleteBucket extends plugins.typedrequestInterfaces.implem
   };
 }
 
-export interface IS3Object {
+export interface IStorageObject {
   key: string;
   size?: number;
   lastModified?: string;
@@ -115,7 +115,7 @@ export interface IReq_ListObjects extends plugins.typedrequestInterfaces.impleme
     delimiter?: string;
   };
   response: {
-    objects: IS3Object[];
+    objects: IStorageObject[];
     prefixes: string[];
   };
 }
@@ -199,6 +199,67 @@ export interface IReq_CopyObject extends plugins.typedrequestInterfaces.implemen
   };
 }
 
+export interface IReq_DeletePrefix extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_DeletePrefix
+> {
+  method: 'deletePrefix';
+  request: {
+    bucketName: string;
+    prefix: string;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+export interface IReq_MoveObject extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_MoveObject
+> {
+  method: 'moveObject';
+  request: {
+    bucketName: string;
+    sourceKey: string;
+    destKey: string;
+  };
+  response: {
+    success: boolean;
+    error?: string;
+  };
+}
+
+export interface IReq_MovePrefix extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_MovePrefix
+> {
+  method: 'movePrefix';
+  request: {
+    bucketName: string;
+    sourcePrefix: string;
+    destPrefix: string;
+  };
+  response: {
+    success: boolean;
+    movedCount: number;
+    error?: string;
+  };
+}
+
+export interface IReq_GetObjectUrl extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetObjectUrl
+> {
+  method: 'getObjectUrl';
+  request: {
+    bucketName: string;
+    key: string;
+  };
+  response: {
+    url: string;
+  };
+}
+
 // ===========================================
 // TypedRequest interfaces for MongoDB API
 // ===========================================
@@ -483,3 +544,32 @@ export interface IReq_GetServerStatus extends plugins.typedrequestInterfaces.imp
     };
   };
 }
+
+export interface IDatabaseStats {
+  collections: number;
+  views: number;
+  objects: number;
+  avgObjSize: number;
+  dataSize: number;
+  storageSize: number;
+  indexes: number;
+  indexSize: number;
+}
+
+export interface IReq_GetDatabaseStats extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetDatabaseStats
+> {
+  method: 'getDatabaseStats';
+  request: {
+    databaseName: string;
+  };
+  response: {
+    stats: IDatabaseStats | null;
+  };
+}
+
+// ===========================================
+// Re-export streaming interfaces
+// ===========================================
+export * from '../streaming/interfaces.streaming.js';

ts/plugins.ts

@@ -6,7 +6,7 @@ export { path };
 import * as early from '@push.rocks/early';
 early.start('tsview');
 
-import * as npmextra from '@push.rocks/npmextra';
+import * as smartconfig from '@push.rocks/smartconfig';
 import * as smartbucket from '@push.rocks/smartbucket';
 import * as smartcli from '@push.rocks/smartcli';
 import * as smartdata from '@push.rocks/smartdata';
@@ -17,10 +17,11 @@ import * as smartnetwork from '@push.rocks/smartnetwork';
 import * as smartopen from '@push.rocks/smartopen';
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartpromise from '@push.rocks/smartpromise';
+import * as smartrx from '@push.rocks/smartrx';
 
 export {
   early,
-  npmextra,
+  smartconfig,
   smartbucket,
   smartcli,
   smartdata,
@@ -31,12 +32,17 @@ export {
   smartopen,
   smartpath,
   smartpromise,
+  smartrx,
 };
 
 // AWS S3 SDK for direct S3 operations
 import * as s3 from '@aws-sdk/client-s3';
 export { s3 };
 
+// MongoDB driver for ObjectId handling
+import * as mongodb from 'mongodb';
+export { mongodb };
+
 // @api.global scope
 import * as typedrequest from '@api.global/typedrequest';
 import * as typedrequestInterfaces from '@api.global/typedrequest-interfaces';

ts/server/classes.viewserver.ts

@@ -1,7 +1,9 @@
 import * as plugins from '../plugins.js';
 import type { TsView } from '../tsview.classes.tsview.js';
+import type * as interfaces from '../interfaces/index.js';
 import { registerS3Handlers } from '../api/handlers.s3.js';
 import { registerMongoHandlers } from '../api/handlers.mongodb.js';
+import { ChangeStreamManager } from '../streaming/index.js';
 import { files as bundledUiFiles } from '../bundled_ui.js';
 
 /**
@@ -11,6 +13,7 @@ export class ViewServer {
   private tsview: TsView;
   private port: number;
   private typedServer: plugins.typedserver.TypedServer | null = null;
+  private changeStreamManager: ChangeStreamManager | null = null;
   public typedrouter: plugins.typedrequest.TypedRouter;
 
   constructor(tsview: TsView, port: number) {
@@ -32,23 +35,186 @@ export class ViewServer {
       noCache: true,
     });
 
+    // Initialize ChangeStreamManager for real-time updates (before handlers so they can emit events)
+    this.changeStreamManager = new ChangeStreamManager(this.tsview);
+
     // Register API handlers directly to server's router
-    if (this.tsview.config.hasS3()) {
+    if (this.tsview.config.hasStorage()) {
       await registerS3Handlers(this.typedServer.typedrouter, this.tsview);
     }
 
     if (this.tsview.config.hasMongo()) {
-      await registerMongoHandlers(this.typedServer.typedrouter, this.tsview);
+      await registerMongoHandlers(this.typedServer.typedrouter, this.tsview, this.changeStreamManager);
     }
 
+    // Register streaming handlers
+    await this.registerStreamingHandlers();
+
     // Start server
     await this.typedServer.start();
+
+    // Set TypedSocket reference after server starts
+    if (this.typedServer.typedsocket) {
+      this.changeStreamManager.setTypedSocket(this.typedServer.typedsocket);
+    }
+  }
+
+  /**
+   * Register WebSocket streaming handlers
+   */
+  private async registerStreamingHandlers(): Promise<void> {
+    if (!this.typedServer || !this.changeStreamManager) return;
+
+    const typedrouter = this.typedServer.typedrouter;
+
+    // Subscribe to MongoDB collection changes
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeMongo>(
+        'subscribeMongo',
+        async (reqData, context) => {
+          const connectionId = this.getConnectionId(context);
+          if (!connectionId) {
+            return { success: false, subscriptionId: '' };
+          }
+
+          const result = await this.changeStreamManager!.subscribeToMongo(
+            connectionId,
+            reqData.database,
+            reqData.collection
+          );
+          return result;
+        }
+      )
+    );
+
+    // Unsubscribe from MongoDB collection changes
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeMongo>(
+        'unsubscribeMongo',
+        async (reqData, context) => {
+          const connectionId = this.getConnectionId(context);
+          if (!connectionId) {
+            return { success: false };
+          }
+
+          const success = await this.changeStreamManager!.unsubscribeFromMongo(
+            connectionId,
+            reqData.database,
+            reqData.collection
+          );
+          return { success };
+        }
+      )
+    );
+
+    // Subscribe to storage bucket changes
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeStorage>(
+        'subscribeS3',
+        async (reqData, context) => {
+          const connectionId = this.getConnectionId(context);
+          if (!connectionId) {
+            return { success: false, subscriptionId: '' };
+          }
+
+          const result = await this.changeStreamManager!.subscribeToS3(
+            connectionId,
+            reqData.bucket,
+            reqData.prefix
+          );
+          return result;
+        }
+      )
+    );
+
+    // Unsubscribe from storage bucket changes
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeStorage>(
+        'unsubscribeS3',
+        async (reqData, context) => {
+          const connectionId = this.getConnectionId(context);
+          if (!connectionId) {
+            return { success: false };
+          }
+
+          const success = await this.changeStreamManager!.unsubscribeFromS3(
+            connectionId,
+            reqData.bucket,
+            reqData.prefix
+          );
+          return { success };
+        }
+      )
+    );
+
+    // Subscribe to activity stream
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeActivity>(
+        'subscribeActivity',
+        async (reqData, context) => {
+          const connectionId = this.getConnectionId(context);
+          if (!connectionId) {
+            return { success: false, subscriptionId: '' };
+          }
+
+          const result = await this.changeStreamManager!.subscribeToActivity(connectionId);
+          return result;
+        }
+      )
+    );
+
+    // Unsubscribe from activity stream
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeActivity>(
+        'unsubscribeActivity',
+        async (reqData, context) => {
+          const connectionId = this.getConnectionId(context);
+          if (!connectionId) {
+            return { success: false };
+          }
+
+          const success = await this.changeStreamManager!.unsubscribeFromActivity(connectionId);
+          return { success };
+        }
+      )
+    );
+
+    // Get recent activity events
+    typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_GetRecentActivity>(
+        'getRecentActivity',
+        async (reqData) => {
+          const events = this.changeStreamManager!.getRecentActivity(reqData.limit || 100);
+          return { events };
+        }
+      )
+    );
+  }
+
+  /**
+   * Extract connection ID from request context.
+   * SmartServe attaches the WebSocket peer to `localData.peer` on each request.
+   */
+  private getConnectionId(context: any): string | null {
+    // The TypedTools instance carries localData from the transport layer.
+    // SmartServe puts the IWebSocketPeer at localData.peer.
+    if (context?.localData?.peer?.id) {
+      return context.localData.peer.id;
+    }
+    // HTTP requests don't have a peer — real-time streaming requires WebSocket.
+    return null;
   }
 
   /**
    * Stop the server
    */
   public async stop(): Promise<void> {
+    // Stop change stream manager first
+    if (this.changeStreamManager) {
+      await this.changeStreamManager.stop();
+      this.changeStreamManager = null;
+    }
+
     if (this.typedServer) {
       await this.typedServer.stop();
       this.typedServer = null;

ts/streaming/classes.changestream-manager.ts

@@ -0,0 +1,776 @@
+import * as plugins from '../plugins.js';
+import type { TsView } from '../tsview.classes.tsview.js';
+import type * as interfaces from './interfaces.streaming.js';
+import type { IStorageChangeEvent } from './interfaces.streaming.js';
+
+/**
+ * Subscription entry tracking a client's subscription to a resource
+ */
+interface ISubscriptionEntry {
+  connectionId: string;
+  subscriptionId: string;
+  createdAt: Date;
+}
+
+/**
+ * MongoDB watcher entry
+ */
+interface IMongoWatcherEntry {
+  watcher: plugins.mongodb.ChangeStream;
+  subscriptions: Map<string, ISubscriptionEntry>; // connectionId -> subscription
+}
+
+/**
+ * Storage watcher entry
+ */
+interface IStorageWatcherEntry {
+  watcher: plugins.smartbucket.BucketWatcher;
+  subscriptions: Map<string, ISubscriptionEntry>; // connectionId -> subscription
+}
+
+/**
+ * ChangeStreamManager manages real-time change streaming for both MongoDB and storage.
+ *
+ * Features:
+ * - MongoDB Change Streams for real-time database updates
+ * - S3 BucketWatcher for polling-based storage change detection
+ * - Subscription management per WebSocket client
+ * - Activity stream with ring buffer for recent events
+ * - Automatic cleanup on client disconnect
+ */
+export class ChangeStreamManager {
+  private tsview: TsView;
+  private typedSocket: plugins.typedserver.TypedServer['typedsocket'] | null = null;
+
+  // MongoDB watchers: "db/collection" -> watcher entry
+  private mongoWatchers: Map<string, IMongoWatcherEntry> = new Map();
+
+  // Storage watchers: "bucket/prefix" -> watcher entry
+  private storageWatchers: Map<string, IStorageWatcherEntry> = new Map();
+
+  // Activity subscribers: connectionId -> subscription entry
+  private activitySubscribers: Map<string, ISubscriptionEntry> = new Map();
+
+  // Activity ring buffer (max 1000 events)
+  private activityBuffer: interfaces.IActivityEvent[] = [];
+  private readonly ACTIVITY_BUFFER_SIZE = 1000;
+
+  // Global watchers for the activity stream (started lazily on first subscriber)
+  private globalMongoWatcher: plugins.mongodb.ChangeStream | null = null;
+  private globalStorageWatchers: Map<string, plugins.smartbucket.BucketWatcher> = new Map();
+  private globalWatchersActive: boolean = false;
+
+  // Counter for generating unique subscription IDs
+  private subscriptionCounter = 0;
+
+  constructor(tsview: TsView) {
+    this.tsview = tsview;
+  }
+
+  /**
+   * Initialize the manager with a TypedSocket instance
+   */
+  public setTypedSocket(typedSocket: plugins.typedserver.TypedServer['typedsocket']): void {
+    this.typedSocket = typedSocket;
+  }
+
+  /**
+   * Generate a unique subscription ID
+   */
+  private generateSubscriptionId(): string {
+    return `sub_${Date.now()}_${++this.subscriptionCounter}`;
+  }
+
+  /**
+   * Get the MongoDB key for a database/collection pair
+   */
+  private getMongoKey(database: string, collection: string): string {
+    return `${database}/${collection}`;
+  }
+
+  /**
+   * Get the storage key for a bucket/prefix pair
+   */
+  private getStorageKey(bucket: string, prefix?: string): string {
+    return prefix ? `${bucket}/${prefix}` : bucket;
+  }
+
+  // ===========================================
+  // MongoDB Change Streams
+  // ===========================================
+
+  /**
+   * Subscribe a client to MongoDB collection changes
+   */
+  public async subscribeToMongo(
+    connectionId: string,
+    database: string,
+    collection: string
+  ): Promise<{ success: boolean; subscriptionId: string }> {
+    const key = this.getMongoKey(database, collection);
+
+    let entry = this.mongoWatchers.get(key);
+
+    // Create watcher if it doesn't exist
+    if (!entry) {
+      const watcher = await this.createMongoWatcher(database, collection);
+      if (!watcher) {
+        return { success: false, subscriptionId: '' };
+      }
+
+      entry = {
+        watcher,
+        subscriptions: new Map(),
+      };
+      this.mongoWatchers.set(key, entry);
+    }
+
+    // Add subscription
+    const subscriptionId = this.generateSubscriptionId();
+    entry.subscriptions.set(connectionId, {
+      connectionId,
+      subscriptionId,
+      createdAt: new Date(),
+    });
+
+    console.log(`[ChangeStream] MongoDB subscription added: ${key} for connection ${connectionId}`);
+    return { success: true, subscriptionId };
+  }
+
+  /**
+   * Unsubscribe a client from MongoDB collection changes
+   */
+  public async unsubscribeFromMongo(
+    connectionId: string,
+    database: string,
+    collection: string
+  ): Promise<boolean> {
+    const key = this.getMongoKey(database, collection);
+    const entry = this.mongoWatchers.get(key);
+
+    if (!entry) {
+      return false;
+    }
+
+    entry.subscriptions.delete(connectionId);
+    console.log(`[ChangeStream] MongoDB subscription removed: ${key} for connection ${connectionId}`);
+
+    // Close watcher if no more subscribers
+    if (entry.subscriptions.size === 0) {
+      await this.closeMongoWatcher(key);
+    }
+
+    return true;
+  }
+
+  /**
+   * Create a MongoDB change stream for a collection
+   */
+  private async createMongoWatcher(
+    database: string,
+    collection: string
+  ): Promise<plugins.mongodb.ChangeStream | null> {
+    try {
+      const db = await this.tsview.getMongoDb();
+      if (!db) {
+        console.error('[ChangeStream] MongoDB not configured');
+        return null;
+      }
+
+      const client = (db as any).mongoDbClient;
+      const mongoDb = client.db(database);
+      const mongoCollection = mongoDb.collection(collection);
+
+      // Create change stream
+      const changeStream = mongoCollection.watch([], {
+        fullDocument: 'updateLookup',
+      });
+
+      // Handle change events
+      changeStream.on('change', (change: any) => {
+        this.handleMongoChange(database, collection, change);
+      });
+
+      changeStream.on('error', (error: Error) => {
+        console.error(`[ChangeStream] MongoDB error for ${database}/${collection}:`, error);
+      });
+
+      console.log(`[ChangeStream] MongoDB watcher created for ${database}/${collection}`);
+      return changeStream;
+    } catch (error) {
+      console.error(`[ChangeStream] Failed to create MongoDB watcher for ${database}/${collection}:`, error);
+      return null;
+    }
+  }
+
+  /**
+   * Handle a MongoDB change event
+   */
+  private handleMongoChange(database: string, collection: string, change: any): void {
+    const key = this.getMongoKey(database, collection);
+    const entry = this.mongoWatchers.get(key);
+
+    if (!entry) return;
+
+    // Convert MongoDB change event to our interface
+    const event: interfaces.IMongoChangeEvent = {
+      type: change.operationType as interfaces.IMongoChangeEvent['type'],
+      database,
+      collection,
+      documentId: change.documentKey?._id?.toString(),
+      document: change.fullDocument,
+      updateDescription: change.updateDescription,
+      timestamp: new Date().toISOString(),
+    };
+
+    // Only add to activity buffer if global watchers are NOT active.
+    // When active, the global MongoDB watcher already feeds the activity stream.
+    if (!this.globalWatchersActive) {
+      this.addToActivityBuffer('mongodb', event);
+    }
+
+    // Push to all subscribed clients
+    this.pushMongoChangeToClients(key, event);
+  }
+
+  /**
+   * Push MongoDB change to subscribed clients
+   */
+  private async pushMongoChangeToClients(
+    key: string,
+    event: interfaces.IMongoChangeEvent
+  ): Promise<void> {
+    const entry = this.mongoWatchers.get(key);
+    if (!entry || !this.typedSocket) return;
+
+    for (const [connectionId, _sub] of entry.subscriptions) {
+      try {
+        // Find the connection and push the event
+        const connection = await this.typedSocket.findTargetConnection(async (conn: any) => {
+          return conn.peer?.id === connectionId;
+        });
+
+        if (connection) {
+          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushMongoChange>(
+            'pushMongoChange',
+            connection
+          );
+          await request.fire({ event });
+        }
+      } catch (error) {
+        console.error(`[ChangeStream] Failed to push MongoDB change to ${connectionId}:`, error);
+      }
+    }
+  }
+
+  /**
+   * Close a MongoDB change stream
+   */
+  private async closeMongoWatcher(key: string): Promise<void> {
+    const entry = this.mongoWatchers.get(key);
+    if (!entry) return;
+
+    try {
+      await entry.watcher.close();
+      this.mongoWatchers.delete(key);
+      console.log(`[ChangeStream] MongoDB watcher closed for ${key}`);
+    } catch (error) {
+      console.error(`[ChangeStream] Error closing MongoDB watcher for ${key}:`, error);
+    }
+  }
+
+  // ===========================================
+  // Storage Change Watching
+  // ===========================================
+
+  /**
+   * Subscribe a client to storage bucket/prefix changes
+   */
+  public async subscribeToS3(
+    connectionId: string,
+    bucket: string,
+    prefix?: string
+  ): Promise<{ success: boolean; subscriptionId: string }> {
+    const key = this.getStorageKey(bucket, prefix);
+
+    let entry = this.storageWatchers.get(key);
+
+    // Create watcher if it doesn't exist
+    if (!entry) {
+      const watcher = await this.createStorageWatcher(bucket, prefix);
+      if (!watcher) {
+        return { success: false, subscriptionId: '' };
+      }
+
+      entry = {
+        watcher,
+        subscriptions: new Map(),
+      };
+      this.storageWatchers.set(key, entry);
+    }
+
+    // Add subscription
+    const subscriptionId = this.generateSubscriptionId();
+    entry.subscriptions.set(connectionId, {
+      connectionId,
+      subscriptionId,
+      createdAt: new Date(),
+    });
+
+    console.log(`[ChangeStream] Storage subscription added: ${key} for connection ${connectionId}`);
+    return { success: true, subscriptionId };
+  }
+
+  /**
+   * Unsubscribe a client from storage bucket/prefix changes
+   */
+  public async unsubscribeFromS3(
+    connectionId: string,
+    bucket: string,
+    prefix?: string
+  ): Promise<boolean> {
+    const key = this.getStorageKey(bucket, prefix);
+    const entry = this.storageWatchers.get(key);
+
+    if (!entry) {
+      return false;
+    }
+
+    entry.subscriptions.delete(connectionId);
+    console.log(`[ChangeStream] Storage subscription removed: ${key} for connection ${connectionId}`);
+
+    // Close watcher if no more subscribers
+    if (entry.subscriptions.size === 0) {
+      await this.closeStorageWatcher(key);
+    }
+
+    return true;
+  }
+
+  /**
+   * Create a storage bucket watcher
+   */
+  private async createStorageWatcher(
+    bucket: string,
+    prefix?: string
+  ): Promise<plugins.smartbucket.BucketWatcher | null> {
+    try {
+      const smartbucket = await this.tsview.getSmartBucket();
+      if (!smartbucket) {
+        console.error('[ChangeStream] Storage not configured');
+        return null;
+      }
+
+      const bucketInstance = await smartbucket.getBucketByName(bucket);
+
+      // Create watcher using smartbucket's BucketWatcher
+      const watcher = bucketInstance.createWatcher({
+        prefix: prefix || '',
+        pollIntervalMs: 5000,
+        bufferTimeMs: 500,
+      });
+
+      // Subscribe to change events
+      watcher.changeSubject.subscribe((eventOrEvents: IStorageChangeEvent | IStorageChangeEvent[]) => {
+        const events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
+        for (const event of events) {
+          this.handleStorageChange(bucket, prefix, event);
+        }
+      });
+
+      // Start the watcher
+      await watcher.start();
+      await watcher.readyDeferred.promise;
+
+      console.log(`[ChangeStream] Storage watcher created for ${bucket}${prefix ? '/' + prefix : ''}`);
+      return watcher;
+    } catch (error) {
+      console.error(`[ChangeStream] Failed to create storage watcher for ${bucket}:`, error);
+      return null;
+    }
+  }
+
+  /**
+   * Handle a storage change event
+   */
+  private handleStorageChange(bucket: string, prefix: string | undefined, event: IStorageChangeEvent): void {
+    const key = this.getStorageKey(bucket, prefix);
+    const entry = this.storageWatchers.get(key);
+
+    if (!entry) return;
+
+    // Only add to activity buffer if global watchers are NOT active.
+    // When active, the global storage watchers already feed the activity stream.
+    if (!this.globalWatchersActive) {
+      this.addToActivityBuffer('storage', event);
+    }
+
+    // Push to all subscribed clients
+    this.pushStorageChangeToClients(key, event);
+  }
+
+  /**
+   * Push storage change to subscribed clients
+   */
+  private async pushStorageChangeToClients(
+    key: string,
+    event: IStorageChangeEvent
+  ): Promise<void> {
+    const entry = this.storageWatchers.get(key);
+    if (!entry || !this.typedSocket) return;
+
+    for (const [connectionId, _sub] of entry.subscriptions) {
+      try {
+        const connection = await this.typedSocket.findTargetConnection(async (conn: any) => {
+          return conn.peer?.id === connectionId;
+        });
+
+        if (connection) {
+          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushStorageChange>(
+            'pushS3Change',
+            connection
+          );
+          await request.fire({ event });
+        }
+      } catch (error) {
+        console.error(`[ChangeStream] Failed to push storage change to ${connectionId}:`, error);
+      }
+    }
+  }
+
+  /**
+   * Close a storage bucket watcher
+   */
+  private async closeStorageWatcher(key: string): Promise<void> {
+    const entry = this.storageWatchers.get(key);
+    if (!entry) return;
+
+    try {
+      await entry.watcher.stop();
+      this.storageWatchers.delete(key);
+      console.log(`[ChangeStream] Storage watcher closed for ${key}`);
+    } catch (error) {
+      console.error(`[ChangeStream] Error closing storage watcher for ${key}:`, error);
+    }
+  }
+
+  // ===========================================
+  // Activity Stream
+  // ===========================================
+
+  /**
+   * Subscribe a client to the activity stream
+   */
+  public async subscribeToActivity(connectionId: string): Promise<{ success: boolean; subscriptionId: string }> {
+    const subscriptionId = this.generateSubscriptionId();
+
+    this.activitySubscribers.set(connectionId, {
+      connectionId,
+      subscriptionId,
+      createdAt: new Date(),
+    });
+
+    console.log(`[ChangeStream] Activity subscription added for connection ${connectionId}`);
+
+    // Start global watchers when the first activity subscriber connects
+    if (this.activitySubscribers.size === 1) {
+      await this.startGlobalWatchers();
+    }
+
+    return { success: true, subscriptionId };
+  }
+
+  /**
+   * Unsubscribe a client from the activity stream
+   */
+  public async unsubscribeFromActivity(connectionId: string): Promise<boolean> {
+    const result = this.activitySubscribers.delete(connectionId);
+    if (result) {
+      console.log(`[ChangeStream] Activity subscription removed for connection ${connectionId}`);
+
+      // Stop global watchers when no activity subscribers remain
+      if (this.activitySubscribers.size === 0) {
+        await this.stopGlobalWatchers();
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Get recent activity events
+   */
+  public getRecentActivity(limit: number = 100): interfaces.IActivityEvent[] {
+    const count = Math.min(limit, this.activityBuffer.length);
+    return this.activityBuffer.slice(-count);
+  }
+
+  /**
+   * Emit a MongoDB activity event from an API handler (no change stream required).
+   */
+  public emitMongoActivityEvent(event: interfaces.IMongoChangeEvent): void {
+    this.addToActivityBuffer('mongodb', event);
+  }
+
+  /**
+   * Add an event to the activity buffer
+   */
+  private addToActivityBuffer(
+    source: 'mongodb' | 'storage',
+    event: interfaces.IMongoChangeEvent | IStorageChangeEvent
+  ): void {
+    const activityEvent: interfaces.IActivityEvent = {
+      id: `evt_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`,
+      source,
+      event,
+      timestamp: new Date().toISOString(),
+    };
+
+    this.activityBuffer.push(activityEvent);
+
+    // Trim buffer if it exceeds max size
+    if (this.activityBuffer.length > this.ACTIVITY_BUFFER_SIZE) {
+      this.activityBuffer = this.activityBuffer.slice(-this.ACTIVITY_BUFFER_SIZE);
+    }
+
+    // Push to activity subscribers
+    this.pushActivityToClients(activityEvent);
+  }
+
+  /**
+   * Push activity event to subscribed clients
+   */
+  private async pushActivityToClients(event: interfaces.IActivityEvent): Promise<void> {
+    if (!this.typedSocket || this.activitySubscribers.size === 0) return;
+
+    for (const [connectionId, _sub] of this.activitySubscribers) {
+      try {
+        const connection = await this.typedSocket.findTargetConnection(async (conn: any) => {
+          return conn.peer?.id === connectionId;
+        });
+
+        if (connection) {
+          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushActivityEvent>(
+            'pushActivityEvent',
+            connection
+          );
+          await request.fire({ event });
+        }
+      } catch (error) {
+        console.error(`[ChangeStream] Failed to push activity to ${connectionId}:`, error);
+      }
+    }
+  }
+
+  // ===========================================
+  // Global Watchers for Activity Stream
+  // ===========================================
+
+  /**
+   * Start global watchers when the first activity subscriber connects.
+   * These watch all MongoDB and storage activity and feed into the activity buffer.
+   */
+  private async startGlobalWatchers(): Promise<void> {
+    if (this.globalWatchersActive) return;
+    this.globalWatchersActive = true;
+
+    console.log('[ChangeStream] Starting global watchers for activity stream...');
+
+    await Promise.all([
+      this.startGlobalMongoWatcher(),
+      this.startGlobalStorageWatchers(),
+    ]);
+  }
+
+  /**
+   * Start a deployment-level MongoDB change stream that watches ALL databases/collections.
+   */
+  private async startGlobalMongoWatcher(): Promise<void> {
+    try {
+      const db = await this.tsview.getMongoDb();
+      if (!db) {
+        console.log('[ChangeStream] MongoDB not configured, skipping global MongoDB watcher');
+        return;
+      }
+
+      const client = (db as any).mongoDbClient as plugins.mongodb.MongoClient;
+
+      // Deployment-level watch — one stream for everything
+      const changeStream = client.watch([], {
+        fullDocument: 'updateLookup',
+      });
+
+      changeStream.on('change', (change: any) => {
+        const database = change.ns?.db || 'unknown';
+        const collection = change.ns?.coll || 'unknown';
+
+        const event: interfaces.IMongoChangeEvent = {
+          type: change.operationType as interfaces.IMongoChangeEvent['type'],
+          database,
+          collection,
+          documentId: change.documentKey?._id?.toString(),
+          document: change.fullDocument,
+          updateDescription: change.updateDescription,
+          timestamp: new Date().toISOString(),
+        };
+
+        this.addToActivityBuffer('mongodb', event);
+      });
+
+      changeStream.on('error', (error: Error) => {
+        console.error('[ChangeStream] Global MongoDB watcher error:', error);
+      });
+
+      this.globalMongoWatcher = changeStream;
+      console.log('[ChangeStream] Global MongoDB watcher started');
+    } catch (error) {
+      console.warn('[ChangeStream] MongoDB change streams unavailable (requires replica set). MongoDB activity events will come from API operations only.');
+    }
+  }
+
+  /**
+   * Start storage bucket watchers — one BucketWatcher per bucket.
+   */
+  private async startGlobalStorageWatchers(): Promise<void> {
+    try {
+      const smartbucket = await this.tsview.getSmartBucket();
+      if (!smartbucket) {
+        console.log('[ChangeStream] Storage not configured, skipping global storage watchers');
+        return;
+      }
+
+      // List all buckets
+      const command = new plugins.s3.ListBucketsCommand({});
+      const response = await smartbucket.s3Client.send(command) as plugins.s3.ListBucketsCommandOutput;
+      const bucketNames = response.Buckets?.map(b => b.Name).filter((name): name is string => !!name) || [];
+
+      for (const bucketName of bucketNames) {
+        try {
+          const bucketInstance = await smartbucket.getBucketByName(bucketName);
+          const watcher = bucketInstance.createWatcher({
+            prefix: '',
+            pollIntervalMs: 5000,
+            bufferTimeMs: 500,
+          });
+
+          watcher.changeSubject.subscribe((eventOrEvents: IStorageChangeEvent | IStorageChangeEvent[]) => {
+            const events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
+            for (const event of events) {
+              this.addToActivityBuffer('storage', event);
+            }
+          });
+
+          await watcher.start();
+          await watcher.readyDeferred.promise;
+
+          this.globalStorageWatchers.set(bucketName, watcher);
+          console.log(`[ChangeStream] Global storage watcher started for bucket: ${bucketName}`);
+        } catch (bucketError) {
+          console.error(`[ChangeStream] Failed to start global storage watcher for bucket ${bucketName}:`, bucketError);
+        }
+      }
+
+      console.log(`[ChangeStream] Global storage watchers started (${this.globalStorageWatchers.size}/${bucketNames.length} buckets)`);
+    } catch (error) {
+      console.error('[ChangeStream] Failed to start global storage watchers:', error);
+    }
+  }
+
+  /**
+   * Stop all global watchers when no activity subscribers remain.
+   */
+  private async stopGlobalWatchers(): Promise<void> {
+    if (!this.globalWatchersActive) return;
+
+    console.log('[ChangeStream] Stopping global watchers...');
+
+    // Close global MongoDB watcher
+    if (this.globalMongoWatcher) {
+      try {
+        await this.globalMongoWatcher.close();
+        console.log('[ChangeStream] Global MongoDB watcher stopped');
+      } catch (error) {
+        console.error('[ChangeStream] Error closing global MongoDB watcher:', error);
+      }
+      this.globalMongoWatcher = null;
+    }
+
+    // Close all global storage watchers
+    for (const [bucketName, watcher] of this.globalStorageWatchers) {
+      try {
+        await watcher.stop();
+        console.log(`[ChangeStream] Global storage watcher stopped for bucket: ${bucketName}`);
+      } catch (error) {
+        console.error(`[ChangeStream] Error closing global storage watcher for ${bucketName}:`, error);
+      }
+    }
+    this.globalStorageWatchers.clear();
+
+    this.globalWatchersActive = false;
+    console.log('[ChangeStream] Global watchers stopped');
+  }
+
+  // ===========================================
+  // Connection Management
+  // ===========================================
+
+  /**
+   * Handle client disconnect - clean up all subscriptions
+   */
+  public async handleDisconnect(connectionId: string): Promise<void> {
+    console.log(`[ChangeStream] Cleaning up subscriptions for disconnected connection ${connectionId}`);
+
+    // Clean up MongoDB subscriptions
+    for (const [key, entry] of this.mongoWatchers) {
+      if (entry.subscriptions.has(connectionId)) {
+        entry.subscriptions.delete(connectionId);
+        if (entry.subscriptions.size === 0) {
+          await this.closeMongoWatcher(key);
+        }
+      }
+    }
+
+    // Clean up storage subscriptions
+    for (const [key, entry] of this.storageWatchers) {
+      if (entry.subscriptions.has(connectionId)) {
+        entry.subscriptions.delete(connectionId);
+        if (entry.subscriptions.size === 0) {
+          await this.closeStorageWatcher(key);
+        }
+      }
+    }
+
+    // Clean up activity subscription
+    this.activitySubscribers.delete(connectionId);
+
+    // Stop global watchers if no activity subscribers remain
+    if (this.activitySubscribers.size === 0) {
+      await this.stopGlobalWatchers();
+    }
+  }
+
+  /**
+   * Stop all watchers and clean up
+   */
+  public async stop(): Promise<void> {
+    console.log('[ChangeStream] Stopping all watchers...');
+
+    // Stop global watchers first
+    await this.stopGlobalWatchers();
+
+    // Close all MongoDB watchers
+    for (const key of this.mongoWatchers.keys()) {
+      await this.closeMongoWatcher(key);
+    }
+
+    // Close all storage watchers
+    for (const key of this.storageWatchers.keys()) {
+      await this.closeStorageWatcher(key);
+    }
+
+    // Clear activity buffer and subscribers
+    this.activityBuffer = [];
+    this.activitySubscribers.clear();
+
+    console.log('[ChangeStream] All watchers stopped');
+  }
+}

ts/streaming/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces.streaming.js';
+export * from './classes.changestream-manager.js';

ts/streaming/interfaces.streaming.ts

@@ -0,0 +1,213 @@
+import type * as plugins from '../plugins.js';
+
+// Re-export storage change event from smartbucket
+import type { IStorageChangeEvent } from '@push.rocks/smartbucket';
+export type { IStorageChangeEvent };
+
+/**
+ * MongoDB change event - wraps smartdata watcher output
+ */
+export interface IMongoChangeEvent {
+  type: 'insert' | 'update' | 'delete' | 'replace' | 'drop' | 'invalidate';
+  database: string;
+  collection: string;
+  documentId?: string;
+  document?: Record<string, unknown>;
+  updateDescription?: {
+    updatedFields?: Record<string, unknown>;
+    removedFields?: string[];
+  };
+  timestamp: string;
+}
+
+/**
+ * Combined activity event for the activity stream
+ */
+export interface IActivityEvent {
+  id: string;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
+  timestamp: string;
+}
+
+// ===========================================
+// TypedRequest interfaces for streaming subscriptions
+// ===========================================
+
+/**
+ * Subscribe to MongoDB collection changes
+ */
+export interface IReq_SubscribeMongo extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_SubscribeMongo
+> {
+  method: 'subscribeMongo';
+  request: {
+    database: string;
+    collection: string;
+  };
+  response: {
+    success: boolean;
+    subscriptionId: string;
+  };
+}
+
+/**
+ * Unsubscribe from MongoDB collection changes
+ */
+export interface IReq_UnsubscribeMongo extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_UnsubscribeMongo
+> {
+  method: 'unsubscribeMongo';
+  request: {
+    database: string;
+    collection: string;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Subscribe to storage bucket/prefix changes
+ */
+export interface IReq_SubscribeStorage extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_SubscribeStorage
+> {
+  method: 'subscribeS3';
+  request: {
+    bucket: string;
+    prefix?: string;
+  };
+  response: {
+    success: boolean;
+    subscriptionId: string;
+  };
+}
+
+/**
+ * Unsubscribe from storage bucket/prefix changes
+ */
+export interface IReq_UnsubscribeStorage extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_UnsubscribeStorage
+> {
+  method: 'unsubscribeS3';
+  request: {
+    bucket: string;
+    prefix?: string;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Subscribe to activity stream (all changes from MongoDB and storage)
+ */
+export interface IReq_SubscribeActivity extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_SubscribeActivity
+> {
+  method: 'subscribeActivity';
+  request: {};
+  response: {
+    success: boolean;
+    subscriptionId: string;
+  };
+}
+
+/**
+ * Unsubscribe from activity stream
+ */
+export interface IReq_UnsubscribeActivity extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_UnsubscribeActivity
+> {
+  method: 'unsubscribeActivity';
+  request: {};
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Get recent activity events (for initial load or reconnection)
+ */
+export interface IReq_GetRecentActivity extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetRecentActivity
+> {
+  method: 'getRecentActivity';
+  request: {
+    limit?: number; // Default: 100
+  };
+  response: {
+    events: IActivityEvent[];
+  };
+}
+
+// ===========================================
+// Server-to-client push event interfaces
+// ===========================================
+
+/**
+ * Server pushes MongoDB change to client
+ */
+export interface IReq_PushMongoChange extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_PushMongoChange
+> {
+  method: 'pushMongoChange';
+  request: {
+    event: IMongoChangeEvent;
+  };
+  response: {
+    received: boolean;
+  };
+}
+
+/**
+ * Server pushes storage change to client
+ */
+export interface IReq_PushStorageChange extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_PushStorageChange
+> {
+  method: 'pushS3Change';
+  request: {
+    event: IStorageChangeEvent;
+  };
+  response: {
+    received: boolean;
+  };
+}
+
+/**
+ * Server pushes activity event to client
+ */
+export interface IReq_PushActivityEvent extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_PushActivityEvent
+> {
+  method: 'pushActivityEvent';
+  request: {
+    event: IActivityEvent;
+  };
+  response: {
+    received: boolean;
+  };
+}
+
+/**
+ * Connection tag for tracking subscriptions
+ */
+export interface ISubscriptionTag extends plugins.typedrequestInterfaces.ITag {
+  name: 'subscription';
+  payload: {
+    type: 'mongo' | 'storage' | 'activity';
+    key: string; // e.g., "db/collection" or "bucket/prefix" or "activity"
+  };
+}

ts/tsview.classes.tsview.ts

@@ -33,8 +33,8 @@ export class TsView {
   /**
    * Set S3 configuration programmatically
    */
-  public setS3Config(config: interfaces.IS3Config): void {
+  public setStorageConfig(config: interfaces.IStorageConfig): void {
-    this.config.setS3Config(config);
+    this.config.setStorageConfig(config);
   }
 
   /**
@@ -52,17 +52,17 @@ export class TsView {
       return this.smartbucketInstance;
     }
 
-    const s3Config = this.config.getS3Config();
+    const storageConfig = this.config.getStorageConfig();
-    if (!s3Config) {
+    if (!storageConfig) {
       return null;
     }
 
     this.smartbucketInstance = new plugins.smartbucket.SmartBucket({
-      endpoint: s3Config.endpoint,
+      endpoint: storageConfig.endpoint,
-      port: s3Config.port,
+      port: storageConfig.port,
-      accessKey: s3Config.accessKey,
+      accessKey: storageConfig.accessKey,
-      accessSecret: s3Config.accessSecret,
+      accessSecret: storageConfig.accessSecret,
-      useSsl: s3Config.useSsl ?? true,
+      useSsl: storageConfig.useSsl ?? true,
     });
 
     return this.smartbucketInstance;
@@ -103,11 +103,11 @@ export class TsView {
   }
 
   /**
-   * Load configuration from npmextra.json
+   * Load configuration from smartconfig.json
    */
-  private loadNpmextraConfig(cwd?: string): interfaces.INpmextraConfig {
+  private loadSmartconfigConfig(cwd?: string): interfaces.ISmartconfigConfig {
-    const npmextra = new plugins.npmextra.Npmextra(cwd || process.cwd());
+    const smartconfigInstance = new plugins.smartconfig.Smartconfig(cwd || process.cwd());
-    const config = npmextra.dataFor<interfaces.INpmextraConfig>('@git.zone/tsview', {});
+    const config = smartconfigInstance.dataFor<interfaces.ISmartconfigConfig>('@git.zone/tsview', {});
     return config || {};
   }
 
@@ -135,7 +135,7 @@ export class TsView {
    * @param cliPort - Optional port number from CLI (highest priority)
    */
   public async start(cliPort?: number): Promise<number> {
-    const npmextraConfig = await this.loadNpmextraConfig();
+    const smartconfigConfig = await this.loadSmartconfigConfig();
 
     let port: number;
     let portWasExplicitlySet = false;
@@ -144,9 +144,9 @@ export class TsView {
       // CLI has highest priority
       port = cliPort;
       portWasExplicitlySet = true;
-    } else if (npmextraConfig.port) {
+    } else if (smartconfigConfig.port) {
       // Config port specified
-      port = npmextraConfig.port;
+      port = smartconfigConfig.port;
       portWasExplicitlySet = true;
     } else {
       // Auto-find free port
@@ -158,11 +158,11 @@ export class TsView {
     const isFree = await network.isLocalPortUnused(port);
 
     if (!isFree) {
-      if (npmextraConfig.killIfBusy) {
+      if (smartconfigConfig.killIfBusy) {
         console.log(`Port ${port} is busy. Killing existing process...`);
         await this.killProcessOnPort(port);
       } else if (portWasExplicitlySet) {
-        throw new Error(`Port ${port} is busy. Set "killIfBusy": true in npmextra.json to auto-kill, or use a different port.`);
+        throw new Error(`Port ${port} is busy. Set "killIfBusy": true in smartconfig.json to auto-kill, or use a different port.`);
       } else {
         // Auto port was already free, shouldn't happen, but fallback
         port = await this.findFreePort(port + 1);
@@ -175,7 +175,7 @@ export class TsView {
     console.log(`TsView server started on http://localhost:${port}`);
 
     // Open browser (default: true, can be disabled via config)
-    const shouldOpenBrowser = npmextraConfig.openBrowser !== false;
+    const shouldOpenBrowser = smartconfigConfig.openBrowser !== false;
     if (shouldOpenBrowser) {
       try {
         await plugins.smartopen.openUrl(`http://localhost:${port}`);

ts/tsview.cli.ts

@@ -19,7 +19,7 @@ export class TsViewCli {
     this.smartcli.standardCommand().subscribe(async (argvArg) => {
       await this.startViewer({
         port: argvArg.port as number | undefined,
-        s3Only: false,
+        storageOnly: false,
         mongoOnly: false,
       });
     });
@@ -29,7 +29,7 @@ export class TsViewCli {
     s3Command.subscribe(async (argvArg) => {
       await this.startViewer({
         port: argvArg.port as number | undefined,
-        s3Only: true,
+        storageOnly: true,
         mongoOnly: false,
       });
     });
@@ -39,7 +39,7 @@ export class TsViewCli {
     mongoCommand.subscribe(async (argvArg) => {
       await this.startViewer({
         port: argvArg.port as number | undefined,
-        s3Only: false,
+        storageOnly: false,
         mongoOnly: true,
       });
     });
@@ -56,7 +56,7 @@ export class TsViewCli {
    */
   private async startViewer(options: {
     port?: number;
-    s3Only: boolean;
+    storageOnly: boolean;
     mongoOnly: boolean;
   }): Promise<void> {
     console.log('Starting TsView...');
@@ -67,10 +67,10 @@ export class TsViewCli {
     await viewer.loadConfigFromEnv();
 
     // Check what's configured
-    const hasS3 = viewer.config.hasS3();
+    const hasStorage = viewer.config.hasStorage();
     const hasMongo = viewer.config.hasMongo();
 
-    if (!hasS3 && !hasMongo) {
+    if (!hasStorage && !hasMongo) {
       console.error('Error: No S3 or MongoDB configuration found.');
       console.error('Please create .nogit/env.json with your configuration.');
       console.error('');
@@ -87,7 +87,7 @@ export class TsViewCli {
       process.exit(1);
     }
 
-    if (options.s3Only && !hasS3) {
+    if (options.storageOnly && !hasStorage) {
       console.error('Error: S3 configuration not found in .nogit/env.json');
       process.exit(1);
     }
@@ -98,7 +98,7 @@ export class TsViewCli {
     }
 
     // Log what's available
-    if (hasS3) {
+    if (hasStorage) {
       console.log('S3 storage configured');
     }
     if (hasMongo) {

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@git.zone/tsview',
-  version: '1.1.3',
+  version: '1.12.5',
   description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }

ts_web/adapters/s3-data-provider.ts

@@ -0,0 +1,41 @@
+import type { IStorageDataProvider } from '@design.estate/dees-catalog';
+import { apiService } from '../services/index.js';
+
+/**
+ * Adapter that implements IStorageDataProvider by delegating to tsview's ApiService
+ */
+export class TsviewS3DataProvider implements IStorageDataProvider {
+  async listObjects(bucket: string, prefix?: string, delimiter?: string) {
+    return apiService.listObjects(bucket, prefix, delimiter);
+  }
+
+  async getObject(bucket: string, key: string) {
+    return apiService.getObject(bucket, key);
+  }
+
+  async putObject(bucket: string, key: string, base64Content: string, contentType: string) {
+    return apiService.putObject(bucket, key, base64Content, contentType);
+  }
+
+  async deleteObject(bucket: string, key: string) {
+    return apiService.deleteObject(bucket, key);
+  }
+
+  async deletePrefix(bucket: string, prefix: string) {
+    return apiService.deletePrefix(bucket, prefix);
+  }
+
+  async getObjectUrl(bucket: string, key: string) {
+    return apiService.getObjectUrl(bucket, key);
+  }
+
+  async moveObject(bucket: string, sourceKey: string, destKey: string) {
+    return apiService.moveObject(bucket, sourceKey, destKey);
+  }
+
+  async movePrefix(bucket: string, sourcePrefix: string, destPrefix: string) {
+    return apiService.movePrefix(bucket, sourcePrefix, destPrefix);
+  }
+}
+
+export const s3DataProvider = new TsviewS3DataProvider();

ts_web/elements/index.ts

@@ -1,15 +1,13 @@
 // Main app shell
 export * from './tsview-app.js';
 
-// S3 components
-export * from './tsview-s3-browser.js';
-export * from './tsview-s3-columns.js';
-export * from './tsview-s3-keys.js';
-export * from './tsview-s3-preview.js';
-
 // MongoDB components
 export * from './tsview-mongo-browser.js';
 export * from './tsview-mongo-collections.js';
 export * from './tsview-mongo-documents.js';
 export * from './tsview-mongo-document.js';
 export * from './tsview-mongo-indexes.js';
+export * from './tsview-mongo-db-overview.js';
+
+// Activity stream component
+export * from './tsview-activity-stream.js';

ts_web/elements/tsview-activity-stream.ts

@@ -0,0 +1,589 @@
+import * as plugins from '../plugins.js';
+import { changeStreamService, type IActivityEvent, type IMongoChangeEvent } from '../services/index.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
+import { themeStyles } from '../styles/index.js';
+
+const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+
+type TFilterMode = 'all' | 'mongodb' | 'storage';
+
+@customElement('tsview-activity-stream')
+export class TsviewActivityStream extends DeesElement {
+  @state()
+  private accessor events: IActivityEvent[] = [];
+
+  @state()
+  private accessor filterMode: TFilterMode = 'all';
+
+  @state()
+  private accessor isConnected: boolean = false;
+
+  @state()
+  private accessor isLoading: boolean = true;
+
+  @state()
+  private accessor autoScroll: boolean = true;
+
+  @state()
+  private accessor now: number = Date.now();
+
+  private subscription: plugins.smartrx.rxjs.Subscription | null = null;
+  private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;
+  private nowInterval: ReturnType<typeof setInterval> | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .activity-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px;
+        border-bottom: 1px solid #333;
+      }
+
+      .header-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .connection-status {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        font-weight: 400;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+
+      .status-dot.connected {
+        background: #22c55e;
+        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
+      }
+
+      .status-dot.disconnected {
+        background: #ef4444;
+      }
+
+      .status-dot.connecting {
+        background: #f59e0b;
+        animation: pulse 1s infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .filter-tabs {
+        display: flex;
+        gap: 4px;
+      }
+
+      .filter-tab {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid #444;
+        color: #888;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        transition: all 0.2s;
+      }
+
+      .filter-tab:hover {
+        border-color: #666;
+        color: #aaa;
+      }
+
+      .filter-tab.active {
+        background: rgba(255, 255, 255, 0.1);
+        border-color: #666;
+        color: #e0e0e0;
+      }
+
+      .auto-scroll-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        color: #888;
+        cursor: pointer;
+      }
+
+      .auto-scroll-toggle input {
+        cursor: pointer;
+      }
+
+      .events-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px;
+      }
+
+      .event-item {
+        display: flex;
+        gap: 12px;
+        padding: 12px;
+        margin-bottom: 8px;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 8px;
+        cursor: pointer;
+        transition: background 0.1s;
+      }
+
+      .event-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .event-time-col {
+        width: 70px;
+        flex-shrink: 0;
+        text-align: right;
+        font-size: 11px;
+        color: #666;
+        padding-top: 2px;
+      }
+
+      .event-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .event-icon.mongodb {
+        background: rgba(16, 185, 129, 0.2);
+        color: #10b981;
+      }
+
+      .event-icon.s3 {
+        background: rgba(245, 158, 11, 0.2);
+        color: #f59e0b;
+      }
+
+      .event-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .event-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .event-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+      }
+
+      .event-title {
+        font-size: 13px;
+        font-weight: 500;
+        color: #e0e0e0;
+      }
+
+      .event-details {
+        font-size: 12px;
+        color: #888;
+        font-family: monospace;
+      }
+
+      .event-type {
+        display: inline-block;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 10px;
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 8px;
+      }
+
+      .event-type.insert, .event-type.add {
+        background: rgba(34, 197, 94, 0.2);
+        color: #4ade80;
+      }
+
+      .event-type.update, .event-type.modify {
+        background: rgba(59, 130, 246, 0.2);
+        color: #60a5fa;
+      }
+
+      .event-type.delete {
+        background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
+      }
+
+      .event-type.replace {
+        background: rgba(168, 85, 247, 0.2);
+        color: #c084fc;
+      }
+
+      .event-type.drop, .event-type.invalidate {
+        background: rgba(239, 68, 68, 0.3);
+        color: #f87171;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #666;
+        gap: 16px;
+      }
+
+      .empty-state svg {
+        width: 64px;
+        height: 64px;
+        opacity: 0.5;
+      }
+
+      .empty-state p {
+        font-size: 14px;
+      }
+
+      .loading-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #888;
+      }
+
+      .event-path {
+        color: #aaa;
+        word-break: break-all;
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.nowInterval = setInterval(() => {
+      this.now = Date.now();
+    }, 1000);
+    await this.initializeStreaming();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.nowInterval) {
+      clearInterval(this.nowInterval);
+      this.nowInterval = null;
+    }
+    this.cleanup();
+  }
+
+  private async initializeStreaming() {
+    this.isLoading = true;
+
+    // Subscribe to connection status and trigger re-subscription on reconnect
+    this.connectionSubscription = changeStreamService.connectionStatus$.subscribe(async (status) => {
+      const wasConnected = this.isConnected;
+      this.isConnected = status === 'connected';
+      if (status === 'connected' && !wasConnected) {
+        await this.setupSubscriptions();
+        this.isLoading = false;
+      }
+    });
+
+    try {
+      await changeStreamService.connect();
+      // setupSubscriptions() is triggered by connectionStatus$ subscriber above
+    } catch (error) {
+      console.error('Failed to initialize activity stream:', error);
+      this.isConnected = false;
+      this.isLoading = false;
+    }
+  }
+
+  private async setupSubscriptions() {
+    // Read buffered events (captured while on other tabs by app-level subscription)
+    const buffered = changeStreamService.getBufferedActivity();
+    if (buffered.length > 0) {
+      this.events = buffered;
+    } else {
+      // Buffer empty (fresh start) — fetch from server
+      const recentEvents = await changeStreamService.getRecentActivity(100);
+      if (recentEvents.length > 0) {
+        this.events = recentEvents;
+      }
+    }
+
+    // Set up RxJS listener only once for new live events
+    if (!this.subscription) {
+      this.subscription = changeStreamService.getActivityStream().subscribe((event) => {
+        this.events = [...this.events, event].slice(-500);
+        if (this.autoScroll) {
+          this.scrollToTop();
+        }
+      });
+    }
+  }
+
+  private cleanup() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = null;
+    }
+    if (this.connectionSubscription) {
+      this.connectionSubscription.unsubscribe();
+      this.connectionSubscription = null;
+    }
+    // DO NOT call changeStreamService.unsubscribeFromActivity()
+    // The app-level subscription keeps the server sending events for buffering
+  }
+
+  private scrollToTop() {
+    requestAnimationFrame(() => {
+      const list = this.shadowRoot?.querySelector('.events-list');
+      if (list) {
+        list.scrollTop = 0;
+      }
+    });
+  }
+
+  private setFilterMode(mode: TFilterMode) {
+    this.filterMode = mode;
+  }
+
+  private toggleAutoScroll() {
+    this.autoScroll = !this.autoScroll;
+  }
+
+  private get filteredEvents(): IActivityEvent[] {
+    let events = this.events;
+    if (this.filterMode !== 'all') {
+      events = events.filter((e) => e.source === this.filterMode);
+    }
+    return events.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+  }
+
+  private formatTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+
+  private formatRelativeTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    const diff = this.now - date.getTime();
+
+    if (diff < 1000) {
+      return 'now';
+    } else if (diff < 60000) {
+      const secs = Math.floor(diff / 1000);
+      return `${secs}s ago`;
+    } else if (diff < 3600000) {
+      const mins = Math.floor(diff / 60000);
+      return `${mins}m ago`;
+    } else if (diff < 86400000) {
+      const hours = Math.floor(diff / 3600000);
+      return `${hours}h ago`;
+    } else {
+      return date.toLocaleDateString();
+    }
+  }
+
+  private getEventTitle(event: IActivityEvent): string {
+    if (event.source === 'mongodb') {
+      const mongoEvent = event.event as IMongoChangeEvent;
+      return `${mongoEvent.database}.${mongoEvent.collection}`;
+    } else {
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.bucket;
+    }
+  }
+
+  private getEventDetails(event: IActivityEvent): string {
+    if (event.source === 'mongodb') {
+      const mongoEvent = event.event as IMongoChangeEvent;
+      if (mongoEvent.documentId) {
+        return `Document: ${mongoEvent.documentId}`;
+      }
+      return '';
+    } else {
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.key;
+    }
+  }
+
+  private getEventType(event: IActivityEvent): string {
+    return event.event.type;
+  }
+
+  private handleEventClick(event: IActivityEvent) {
+    // Dispatch navigation event
+    if (event.source === 'mongodb') {
+      const mongoEvent = event.event as IMongoChangeEvent;
+      this.dispatchEvent(
+        new CustomEvent('navigate-to-mongo', {
+          detail: {
+            database: mongoEvent.database,
+            collection: mongoEvent.collection,
+            documentId: mongoEvent.documentId,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } else {
+      const storageEvent = event.event as IStorageChangeEvent;
+      this.dispatchEvent(
+        new CustomEvent('navigate-to-s3', {
+          detail: {
+            bucket: storageEvent.bucket,
+            key: storageEvent.key,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  private renderMongoIcon() {
+    return html`
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+      </svg>
+    `;
+  }
+
+  private renderS3Icon() {
+    return html`
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+      </svg>
+    `;
+  }
+
+  private getConnectionStatusText(): string {
+    if (this.isConnected) {
+      return 'Live';
+    }
+    return 'Disconnected';
+  }
+
+  render() {
+    return html`
+      <div class="activity-container">
+        <div class="header">
+          <div class="header-title">
+            Activity Stream
+            <div class="connection-status">
+              <span class="status-dot ${this.isConnected ? 'connected' : 'disconnected'}"></span>
+              ${this.getConnectionStatusText()}
+            </div>
+          </div>
+          <div class="header-controls">
+            <div class="filter-tabs">
+              <button
+                class="filter-tab ${this.filterMode === 'all' ? 'active' : ''}"
+                @click=${() => this.setFilterMode('all')}
+              >
+                All
+              </button>
+              <button
+                class="filter-tab ${this.filterMode === 'mongodb' ? 'active' : ''}"
+                @click=${() => this.setFilterMode('mongodb')}
+              >
+                MongoDB
+              </button>
+              <button
+                class="filter-tab ${this.filterMode === 'storage' ? 'active' : ''}"
+                @click=${() => this.setFilterMode('storage')}
+              >
+                S3
+              </button>
+            </div>
+            <label class="auto-scroll-toggle">
+              <input
+                type="checkbox"
+                .checked=${this.autoScroll}
+                @change=${this.toggleAutoScroll}
+              />
+              Auto-scroll
+            </label>
+          </div>
+        </div>
+
+        <div class="events-list">
+          ${this.isLoading
+            ? html`<div class="loading-state">Connecting to activity stream...</div>`
+            : this.filteredEvents.length === 0
+              ? html`
+                  <div class="empty-state">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+                    </svg>
+                    <p>No activity yet. Changes will appear here in real-time.</p>
+                  </div>
+                `
+              : this.filteredEvents.map(
+                  (event) => html`
+                    <div class="event-item" @click=${() => this.handleEventClick(event)}>
+                      <div class="event-time-col" title=${this.formatTime(event.timestamp)}>
+                        ${this.formatRelativeTime(event.timestamp)}
+                      </div>
+                      <div class="event-icon ${event.source}">
+                        ${event.source === 'mongodb' ? this.renderMongoIcon() : this.renderS3Icon()}
+                      </div>
+                      <div class="event-content">
+                        <div class="event-header">
+                          <div class="event-title">
+                            <span class="event-type ${this.getEventType(event)}">${this.getEventType(event)}</span>
+                            ${this.getEventTitle(event)}
+                          </div>
+                        </div>
+                        <div class="event-details">
+                          <span class="event-path">${this.getEventDetails(event)}</span>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )}
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/tsview-app.ts

@@ -1,10 +1,13 @@
 import * as plugins from '../plugins.js';
-import { apiService } from '../services/index.js';
+import { apiService, changeStreamService } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
+import { s3DataProvider } from '../adapters/s3-data-provider.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
 
 const { html, css, cssManager, customElement, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
-type TViewMode = 's3' | 'mongo' | 'settings';
+type TViewMode = 's3' | 'mongo' | 'activity' | 'settings';
 
 @customElement('tsview-app')
 export class TsviewApp extends DeesElement {
@@ -44,6 +47,27 @@ export class TsviewApp extends DeesElement {
   @state()
   private accessor newDatabaseName: string = '';
 
+  @state()
+  private accessor showSystemDatabases: boolean = false;
+
+  @state()
+  private accessor showS3CreateDialog: boolean = false;
+
+  @state()
+  private accessor s3CreateDialogType: 'folder' | 'file' = 'folder';
+
+  @state()
+  private accessor s3CreateDialogBucket: string = '';
+
+  @state()
+  private accessor s3CreateDialogName: string = '';
+
+  @state()
+  private accessor sidebarWidth: number = 240;
+
+  @state()
+  private accessor isResizingSidebar: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     themeStyles,
@@ -117,10 +141,22 @@ export class TsviewApp extends DeesElement {
 
       .app-main {
         display: grid;
-        grid-template-columns: 240px 1fr;
+        grid-template-columns: var(--sidebar-width, 240px) 4px 1fr;
         overflow: hidden;
       }
 
+      .resize-divider {
+        width: 4px;
+        background: transparent;
+        cursor: col-resize;
+        transition: background 0.2s;
+      }
+
+      .resize-divider:hover,
+      .resize-divider.active {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
       .sidebar {
         background: #1e1e1e;
         border-right: 1px solid #333;
@@ -296,6 +332,20 @@ export class TsviewApp extends DeesElement {
         border-color: #e0e0e0;
       }
 
+      .dialog-location {
+        font-size: 12px;
+        color: #888;
+        margin-bottom: 12px;
+        font-family: monospace;
+      }
+
+      .dialog-hint {
+        font-size: 11px;
+        color: #666;
+        margin-bottom: 16px;
+        margin-top: -8px;
+      }
+
       .dialog-actions {
         display: flex;
         gap: 12px;
@@ -359,38 +409,37 @@ export class TsviewApp extends DeesElement {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-
-      .delete-btn {
-        opacity: 0;
-        padding: 4px;
-        background: transparent;
-        border: none;
-        color: #888;
-        cursor: pointer;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s;
-      }
-
-      .sidebar-item:hover .delete-btn,
-      .db-group-header:hover .delete-btn {
-        opacity: 1;
-      }
-
-      .delete-btn:hover {
-        background: rgba(239, 68, 68, 0.2);
-        color: #f87171;
-      }
     `,
   ];
 
+  private readonly SYSTEM_DATABASES = ['admin', 'config', 'local'];
+
+  private get visibleDatabases() {
+    if (this.showSystemDatabases) {
+      return this.databases;
+    }
+    return this.databases.filter(db => !this.SYSTEM_DATABASES.includes(db.name));
+  }
+
   async connectedCallback() {
     super.connectedCallback();
+    // Start WebSocket connection first (non-blocking) so it's in-flight
+    // before child components try to subscribe
+    this.initializeChangeStream();
     await this.loadData();
   }
 
+  private async initializeChangeStream() {
+    try {
+      await changeStreamService.connect();
+      console.log('[TsviewApp] ChangeStream connected');
+      // Subscribe to activity globally so events are buffered regardless of active tab
+      await changeStreamService.subscribeToActivity();
+    } catch (error) {
+      console.warn('[TsviewApp] Failed to connect to ChangeStream:', error);
+    }
+  }
+
   private async loadData() {
     try {
       // Load buckets for S3
@@ -420,8 +469,15 @@ export class TsviewApp extends DeesElement {
   }
 
   private selectDatabase(db: string) {
-    this.selectedDatabase = db;
+    if (this.selectedDatabase === db) {
-    this.selectedCollection = '';
+      // Collapse - clicking the same database again
+      // Keep the collection selection intact
+      this.selectedDatabase = '';
+    } else {
+      // Switch to different database - clear collection
+      this.selectedDatabase = db;
+      this.selectedCollection = '';
+    }
   }
 
   private selectCollection(collection: string) {
@@ -495,6 +551,175 @@ export class TsviewApp extends DeesElement {
     }
   }
 
+  private handleBucketContextMenu(event: MouseEvent, bucket: string) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View Contents',
+        iconName: 'lucide:folderOpen',
+        action: async () => {
+          this.selectBucket(bucket);
+        },
+      },
+      { divider: true },
+      {
+        name: 'New Folder',
+        iconName: 'lucide:folderPlus',
+        action: async () => this.openS3CreateDialog(bucket, 'folder'),
+      },
+      {
+        name: 'New File',
+        iconName: 'lucide:filePlus',
+        action: async () => this.openS3CreateDialog(bucket, 'file'),
+      },
+      { divider: true },
+      {
+        name: 'Delete Bucket',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete bucket "${bucket}"? This will delete all objects in the bucket.`)) {
+            const success = await apiService.deleteBucket(bucket);
+            if (success) {
+              this.buckets = this.buckets.filter(b => b !== bucket);
+              if (this.selectedBucket === bucket) {
+                this.selectedBucket = this.buckets[0] || '';
+              }
+            }
+          }
+        },
+      },
+    ]);
+  }
+
+  private openS3CreateDialog(bucket: string, type: 'folder' | 'file') {
+    this.s3CreateDialogBucket = bucket;
+    this.s3CreateDialogType = type;
+    this.s3CreateDialogName = '';
+    this.showS3CreateDialog = true;
+  }
+
+  private getContentType(ext: string): string {
+    const contentTypes: Record<string, string> = {
+      json: 'application/json',
+      txt: 'text/plain',
+      html: 'text/html',
+      css: 'text/css',
+      js: 'application/javascript',
+      ts: 'text/typescript',
+      md: 'text/markdown',
+      xml: 'application/xml',
+      yaml: 'text/yaml',
+      yml: 'text/yaml',
+      csv: 'text/csv',
+    };
+    return contentTypes[ext] || 'application/octet-stream';
+  }
+
+  private getDefaultContent(ext: string): string {
+    const defaults: Record<string, string> = {
+      json: '{\n  \n}',
+      html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+      md: '# Title\n\n',
+      txt: '',
+    };
+    return defaults[ext] || '';
+  }
+
+  private async handleS3Create() {
+    if (!this.s3CreateDialogName.trim()) return;
+
+    const name = this.s3CreateDialogName.trim();
+    let path: string;
+
+    if (this.s3CreateDialogType === 'folder') {
+      path = name + '/.keep';
+    } else {
+      path = name;
+    }
+
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const contentType = this.s3CreateDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
+    const content = this.s3CreateDialogType === 'file' ? this.getDefaultContent(ext) : '';
+
+    const success = await apiService.putObject(
+      this.s3CreateDialogBucket,
+      path,
+      btoa(content),
+      contentType
+    );
+
+    if (success) {
+      this.showS3CreateDialog = false;
+      // Select the bucket to show the new content
+      this.selectedBucket = this.s3CreateDialogBucket;
+      // Trigger a refresh by dispatching an event
+      this.requestUpdate();
+    }
+  }
+
+  private handleDatabaseContextMenu(event: MouseEvent, dbName: string) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'New Collection',
+        iconName: 'lucide:folderPlus',
+        action: async () => {
+          this.selectedDatabase = dbName;
+          this.showCreateCollectionDialog = true;
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete Database',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete database "${dbName}"? This will delete all collections and documents.`)) {
+            const success = await apiService.dropDatabase(dbName);
+            if (success) {
+              this.databases = this.databases.filter(d => d.name !== dbName);
+              if (this.selectedDatabase === dbName) {
+                this.selectedDatabase = this.databases[0]?.name || '';
+                this.selectedCollection = '';
+              }
+            }
+          }
+        },
+      },
+    ]);
+  }
+
+  private handleSidebarContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: this.showSystemDatabases ? 'Hide System Databases' : 'Show System Databases',
+        iconName: this.showSystemDatabases ? 'lucide:eyeOff' : 'lucide:eye',
+        action: async () => {
+          this.showSystemDatabases = !this.showSystemDatabases;
+        },
+      },
+    ]);
+  }
+
+  private startSidebarResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizingSidebar = true;
+    document.addEventListener('mousemove', this.handleSidebarResize);
+    document.addEventListener('mouseup', this.endSidebarResize);
+  };
+
+  private handleSidebarResize = (e: MouseEvent) => {
+    if (!this.isResizingSidebar) return;
+    const newWidth = Math.min(Math.max(e.clientX, 150), 500);
+    this.sidebarWidth = newWidth;
+  };
+
+  private endSidebarResize = () => {
+    this.isResizingSidebar = false;
+    document.removeEventListener('mousemove', this.handleSidebarResize);
+    document.removeEventListener('mouseup', this.endSidebarResize);
+  };
+
   render() {
     return html`
       <div class="app-container">
@@ -520,6 +745,12 @@ export class TsviewApp extends DeesElement {
             >
               MongoDB
             </button>
+            <button
+              class="nav-tab ${this.viewMode === 'activity' ? 'active' : ''}"
+              @click=${() => this.setViewMode('activity')}
+            >
+              Activity
+            </button>
             <button
               class="nav-tab ${this.viewMode === 'settings' ? 'active' : ''}"
               @click=${() => this.setViewMode('settings')}
@@ -529,14 +760,19 @@ export class TsviewApp extends DeesElement {
           </nav>
         </header>
 
-        <main class="app-main">
+        <main class="app-main" style="--sidebar-width: ${this.sidebarWidth}px">
           ${this.renderSidebar()}
+          <div
+            class="resize-divider ${this.isResizingSidebar ? 'active' : ''}"
+            @mousedown=${this.startSidebarResize}
+          ></div>
           ${this.renderContent()}
         </main>
       </div>
       ${this.renderCreateBucketDialog()}
       ${this.renderCreateCollectionDialog()}
       ${this.renderCreateDatabaseDialog()}
+      ${this.renderS3CreateDialog()}
     `;
   }
 
@@ -633,6 +869,48 @@ export class TsviewApp extends DeesElement {
     `;
   }
 
+  private renderS3CreateDialog() {
+    if (!this.showS3CreateDialog) return '';
+
+    const isFolder = this.s3CreateDialogType === 'folder';
+    const title = isFolder ? 'Create New Folder' : 'Create New File';
+    const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.showS3CreateDialog = false}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">${title}</div>
+          <div class="dialog-location">
+            Location: ${this.s3CreateDialogBucket}/
+          </div>
+          <input
+            type="text"
+            class="dialog-input"
+            placeholder=${placeholder}
+            .value=${this.s3CreateDialogName}
+            @input=${(e: InputEvent) => this.s3CreateDialogName = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleS3Create()}
+          />
+          <div class="dialog-hint">
+            Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
+          </div>
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.showS3CreateDialog = false}>
+              Cancel
+            </button>
+            <button
+              class="dialog-btn dialog-btn-create"
+              ?disabled=${!this.s3CreateDialogName.trim()}
+              @click=${() => this.handleS3Create()}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   private renderSidebar() {
     if (this.viewMode === 's3') {
       return html`
@@ -653,14 +931,9 @@ export class TsviewApp extends DeesElement {
                     <div
                       class="sidebar-item ${bucket === this.selectedBucket ? 'selected' : ''}"
                       @click=${() => this.selectBucket(bucket)}
+                      @contextmenu=${(e: MouseEvent) => this.handleBucketContextMenu(e, bucket)}
                     >
                       <span class="sidebar-item-name">${bucket}</span>
-                      <button class="delete-btn" @click=${(e: Event) => this.deleteBucket(bucket, e)} title="Delete bucket">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                          <polyline points="3 6 5 6 21 6"></polyline>
-                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                        </svg>
-                      </button>
                     </div>
                   `
                 )}
@@ -671,7 +944,7 @@ export class TsviewApp extends DeesElement {
 
     if (this.viewMode === 'mongo') {
       return html`
-        <aside class="sidebar">
+        <aside class="sidebar" @contextmenu=${(e: MouseEvent) => this.handleSidebarContextMenu(e)}>
           <div class="sidebar-header">Databases & Collections</div>
           <button class="create-btn" @click=${() => this.showCreateDatabaseDialog = true}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -680,19 +953,23 @@ export class TsviewApp extends DeesElement {
             </svg>
             New Database
           </button>
-          ${this.selectedDatabase ? html`
-            <button class="create-btn" @click=${() => this.showCreateCollectionDialog = true}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-              New Collection
-            </button>
-          ` : ''}
           <div class="sidebar-list">
-            ${this.databases.length === 0
+            ${this.visibleDatabases.length === 0
               ? html`<div class="sidebar-item" style="color: #666; cursor: default;">No databases found</div>`
-              : this.databases.map((db) => this.renderDatabaseGroup(db))}
+              : this.visibleDatabases.map((db) => this.renderDatabaseGroup(db))}
+          </div>
+        </aside>
+      `;
+    }
+
+    if (this.viewMode === 'activity') {
+      return html`
+        <aside class="sidebar">
+          <div class="sidebar-header">Activity Stream</div>
+          <div class="sidebar-list">
+            <div class="sidebar-item" style="color: #888; font-size: 12px; cursor: default;">
+              Real-time changes from MongoDB and S3 appear here automatically.
+            </div>
           </div>
         </aside>
       `;
@@ -715,6 +992,7 @@ export class TsviewApp extends DeesElement {
         <div
           class="db-group-header ${this.selectedDatabase === db.name ? 'selected' : ''}"
           @click=${() => this.selectDatabase(db.name)}
+          @contextmenu=${(e: MouseEvent) => this.handleDatabaseContextMenu(e, db.name)}
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
@@ -722,12 +1000,6 @@ export class TsviewApp extends DeesElement {
             <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
           </svg>
           <span style="flex: 1;">${db.name}</span>
-          <button class="delete-btn" @click=${(e: Event) => this.deleteDatabase(db.name, e)} title="Delete database">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="3 6 5 6 21 6"></polyline>
-              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-            </svg>
-          </button>
         </div>
         ${this.selectedDatabase === db.name ? this.renderCollectionsList(db.name) : ''}
       </div>
@@ -769,7 +1041,16 @@ export class TsviewApp extends DeesElement {
 
       return html`
         <div class="content-area">
-          <tsview-s3-browser .bucketName=${this.selectedBucket}></tsview-s3-browser>
+          <dees-storage-browser
+            .dataProvider=${s3DataProvider}
+            .bucketName=${this.selectedBucket}
+            .onChangeEvent=${(callback: (event: IStorageChangeEvent) => void) => {
+              const sub = changeStreamService
+                .getBucketChanges(this.selectedBucket)
+                .subscribe(callback);
+              return () => sub.unsubscribe();
+            }}
+          ></dees-storage-browser>
         </div>
       `;
     }
@@ -790,6 +1071,17 @@ export class TsviewApp extends DeesElement {
         `;
       }
 
+      // Show database overview when __overview__ is selected
+      if (this.selectedCollection === '__overview__') {
+        return html`
+          <div class="content-area">
+            <tsview-mongo-db-overview
+              .databaseName=${this.selectedDatabase}
+            ></tsview-mongo-db-overview>
+          </div>
+        `;
+      }
+
       return html`
         <div class="content-area">
           <tsview-mongo-browser
@@ -800,6 +1092,17 @@ export class TsviewApp extends DeesElement {
       `;
     }
 
+    if (this.viewMode === 'activity') {
+      return html`
+        <div class="content-area" style="padding: 0;">
+          <tsview-activity-stream
+            @navigate-to-mongo=${this.handleNavigateToMongo}
+            @navigate-to-s3=${this.handleNavigateToS3}
+          ></tsview-activity-stream>
+        </div>
+      `;
+    }
+
     return html`
       <div class="content-area">
         <h2>Settings</h2>
@@ -807,4 +1110,21 @@ export class TsviewApp extends DeesElement {
       </div>
     `;
   }
+
+  private handleNavigateToMongo(e: CustomEvent) {
+    const { database, collection, documentId } = e.detail;
+    this.viewMode = 'mongo';
+    this.selectedDatabase = database;
+    this.selectedCollection = collection;
+    // If documentId is provided, we could potentially scroll to or highlight that document
+    // For now, just navigate to the collection
+  }
+
+  private handleNavigateToS3(e: CustomEvent) {
+    const { bucket, key } = e.detail;
+    this.viewMode = 's3';
+    this.selectedBucket = bucket;
+    // The S3 browser will need to be updated to navigate to the specific key
+    // For now, just navigate to the bucket
+  }
 }

ts_web/elements/tsview-mongo-browser.ts

@@ -1,5 +1,5 @@
 import * as plugins from '../plugins.js';
-import { apiService, type ICollectionStats } from '../services/index.js';
+import { apiService, changeStreamService, type ICollectionStats, type IMongoChangeEvent } from '../services/index.js';
 import { formatSize, formatCount } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
@@ -24,6 +24,21 @@ export class TsviewMongoBrowser extends DeesElement {
   @state()
   private accessor stats: ICollectionStats | null = null;
 
+  @state()
+  private accessor editorWidth: number = 700;
+
+  @state()
+  private accessor isResizingEditor: boolean = false;
+
+  @state()
+  private accessor recentChangeCount: number = 0;
+
+  @state()
+  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,
     themeStyles,
@@ -102,11 +117,23 @@ export class TsviewMongoBrowser extends DeesElement {
       .content {
         flex: 1;
         display: grid;
-        grid-template-columns: 1fr 400px;
+        grid-template-columns: 1fr 4px var(--editor-width, 700px);
-        gap: 16px;
+        gap: 0;
         overflow: hidden;
       }
 
+      .resize-divider {
+        width: 4px;
+        background: transparent;
+        cursor: col-resize;
+        transition: background 0.2s;
+      }
+
+      .resize-divider:hover,
+      .resize-divider.active {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
       .main-panel {
         overflow: auto;
         background: rgba(0, 0, 0, 0.2);
@@ -117,6 +144,7 @@ export class TsviewMongoBrowser extends DeesElement {
         background: rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         overflow: hidden;
+        margin-left: 12px;
       }
 
       @media (max-width: 1200px) {
@@ -124,22 +152,125 @@ export class TsviewMongoBrowser extends DeesElement {
           grid-template-columns: 1fr;
         }
 
-        .detail-panel {
+        .detail-panel,
+        .resize-divider {
           display: none;
         }
       }
+
+      .change-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        background: rgba(34, 197, 94, 0.2);
+        border-radius: 4px;
+        font-size: 11px;
+        color: #4ade80;
+      }
+
+      .change-indicator.pulse {
+        animation: pulse-green 1s ease-in-out;
+      }
+
+      @keyframes pulse-green {
+        0% { background: rgba(34, 197, 94, 0.4); }
+        100% { background: rgba(34, 197, 94, 0.2); }
+      }
+
+      .stream-status {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: #888;
+      }
+
+      .stream-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #888;
+      }
+
+      .stream-dot.connected {
+        background: #22c55e;
+      }
     `,
   ];
 
   async connectedCallback() {
     super.connectedCallback();
     await this.loadStats();
+    // 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>) {
     if (changedProperties.has('databaseName') || changedProperties.has('collectionName')) {
       this.loadStats();
       this.selectedDocumentId = '';
+      this.recentChangeCount = 0;
+      // Re-subscribe to the new collection
+      this.unsubscribeFromChanges();
+      this.subscribeToChanges();
+    }
+  }
+
+  private async subscribeToChanges() {
+    if (!this.databaseName || !this.collectionName) return;
+
+    try {
+      // 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 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;
+    }
+  }
+
+  private unsubscribeFromChanges() {
+    if (this.changeSubscription) {
+      this.changeSubscription.unsubscribe();
+      this.changeSubscription = null;
+    }
+    if (this.databaseName && this.collectionName) {
+      changeStreamService.unsubscribeFromCollection(this.databaseName, this.collectionName);
+    }
+    this.isStreamConnected = false;
+  }
+
+  private handleChange(event: IMongoChangeEvent) {
+    console.log('[MongoBrowser] Received change:', event);
+    this.recentChangeCount++;
+
+    // Refresh stats to reflect changes
+    this.loadStats();
+
+    // Notify the documents component to refresh
+    const documentsEl = this.shadowRoot?.querySelector('tsview-mongo-documents') as any;
+    if (documentsEl?.refresh) {
+      documentsEl.refresh();
     }
   }
 
@@ -162,6 +293,28 @@ export class TsviewMongoBrowser extends DeesElement {
     this.selectedDocumentId = e.detail.documentId;
   }
 
+  private startEditorResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizingEditor = true;
+    document.addEventListener('mousemove', this.handleEditorResize);
+    document.addEventListener('mouseup', this.endEditorResize);
+  };
+
+  private handleEditorResize = (e: MouseEvent) => {
+    if (!this.isResizingEditor) return;
+    const contentEl = this.shadowRoot?.querySelector('.content');
+    if (!contentEl) return;
+    const containerRect = contentEl.getBoundingClientRect();
+    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
+    this.editorWidth = newWidth;
+  };
+
+  private endEditorResize = () => {
+    this.isResizingEditor = false;
+    document.removeEventListener('mousemove', this.handleEditorResize);
+    document.removeEventListener('mouseup', this.endEditorResize);
+  };
+
   render() {
     return html`
       <div class="browser-container">
@@ -177,6 +330,17 @@ export class TsviewMongoBrowser 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>
 
           <div class="tabs">
@@ -201,7 +365,7 @@ export class TsviewMongoBrowser extends DeesElement {
           </div>
         </div>
 
-        <div class="content">
+        <div class="content" style="--editor-width: ${this.editorWidth}px">
           <div class="main-panel">
             ${this.activeTab === 'documents'
               ? html`
@@ -225,6 +389,11 @@ export class TsviewMongoBrowser extends DeesElement {
                   `}
           </div>
 
+          <div
+            class="resize-divider ${this.isResizingEditor ? 'active' : ''}"
+            @mousedown=${this.startEditorResize}
+          ></div>
+
           <div class="detail-panel">
             <tsview-mongo-document
               .databaseName=${this.databaseName}

ts_web/elements/tsview-mongo-collections.ts

@@ -4,6 +4,7 @@ import { formatCount } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 declare global {
   interface HTMLElementEventMap {
@@ -90,27 +91,31 @@ export class TsviewMongoCollections extends DeesElement {
         font-style: italic;
       }
 
-      .delete-btn {
+      .overview-item {
-        opacity: 0;
+        padding: 6px 12px;
-        padding: 4px;
-        background: transparent;
-        border: none;
-        color: #888;
-        cursor: pointer;
         border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
         display: flex;
         align-items: center;
-        justify-content: center;
+        gap: 6px;
-        transition: all 0.15s;
+        transition: background 0.1s;
+        color: #a5d6a7;
+        margin-bottom: 4px;
       }
 
-      .collection-item:hover .delete-btn {
+      .overview-item:hover {
-        opacity: 1;
+        background: rgba(255, 255, 255, 0.05);
       }
 
-      .delete-btn:hover {
+      .overview-item.selected {
-        background: rgba(239, 68, 68, 0.2);
+        background: rgba(165, 214, 167, 0.15);
-        color: #f87171;
+        color: #a5d6a7;
+      }
+
+      .overview-item svg {
+        width: 14px;
+        height: 14px;
       }
     `,
   ];
@@ -149,8 +154,7 @@ export class TsviewMongoCollections extends DeesElement {
     );
   }
 
-  private async deleteCollection(name: string, e: Event) {
+  private async deleteCollection(name: string) {
-    e.stopPropagation();
     if (!confirm(`Delete collection "${name}"? This will delete all documents.`)) return;
 
     const success = await apiService.dropCollection(this.databaseName, name);
@@ -166,47 +170,81 @@ export class TsviewMongoCollections extends DeesElement {
     }
   }
 
+  private handleCollectionContextMenu(event: MouseEvent, collection: IMongoCollection) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View Documents',
+        iconName: 'lucide:fileText',
+        action: async () => {
+          this.selectCollection(collection.name);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete Collection',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          await this.deleteCollection(collection.name);
+        },
+      },
+    ]);
+  }
+
   public async refresh() {
     await this.loadCollections();
   }
 
+  private selectOverview() {
+    this.dispatchEvent(
+      new CustomEvent('collection-selected', {
+        detail: '__overview__',
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   render() {
     if (this.loading) {
       return html`<div class="loading-state">Loading collections...</div>`;
     }
 
-    if (this.collections.length === 0) {
-      return html`<div class="empty-state">No collections</div>`;
-    }
-
     return html`
       <div class="collections-list">
-        ${this.collections.map(
+        <div
-          (coll) => html`
+          class="overview-item ${this.selectedCollection === '__overview__' ? 'selected' : ''}"
-            <div
+          @click=${() => this.selectOverview()}
-              class="collection-item ${this.selectedCollection === coll.name ? 'selected' : ''}"
+        >
-              @click=${() => this.selectCollection(coll.name)}
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            >
+            <rect x="3" y="3" width="7" height="7"></rect>
-              <span class="collection-name">
+            <rect x="14" y="3" width="7" height="7"></rect>
-                <svg class="collection-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="14" y="14" width="7" height="7"></rect>
-                  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+            <rect x="3" y="14" width="7" height="7"></rect>
-                </svg>
+          </svg>
-                ${coll.name}
+          Overview
-              </span>
+        </div>
-              <span style="display: flex; align-items: center; gap: 4px;">
+        ${this.collections.length === 0
-                ${coll.count !== undefined
+          ? html`<div class="empty-state">No collections</div>`
-                  ? html`<span class="collection-count">${formatCount(coll.count)}</span>`
+          : this.collections.map(
-                  : ''}
+              (coll) => html`
-                <button class="delete-btn" @click=${(e: Event) => this.deleteCollection(coll.name, e)} title="Delete collection">
+                <div
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  class="collection-item ${this.selectedCollection === coll.name ? 'selected' : ''}"
-                    <polyline points="3 6 5 6 21 6"></polyline>
+                  @click=${() => this.selectCollection(coll.name)}
-                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                  @contextmenu=${(e: MouseEvent) => this.handleCollectionContextMenu(e, coll)}
-                  </svg>
+                >
-                </button>
+                  <span class="collection-name">
-              </span>
+                    <svg class="collection-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            </div>
+                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-          `
+                    </svg>
-        )}
+                    ${coll.name}
+                  </span>
+                  ${coll.count !== undefined
+                    ? html`<span class="collection-count">${formatCount(coll.count)}</span>`
+                    : ''}
+                </div>
+              `
+            )}
       </div>
     `;
   }

ts_web/elements/tsview-mongo-db-overview.ts

@@ -0,0 +1,291 @@
+import * as plugins from '../plugins.js';
+import { apiService, type IDatabaseStats } from '../services/index.js';
+import { formatSize, formatCount } from '../utilities/index.js';
+import { themeStyles } from '../styles/index.js';
+
+const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+
+@customElement('tsview-mongo-db-overview')
+export class TsviewMongoDbOverview extends DeesElement {
+  @property({ type: String })
+  public accessor databaseName: string = '';
+
+  @state()
+  private accessor stats: IDatabaseStats | null = null;
+
+  @state()
+  private accessor loading: boolean = false;
+
+  @state()
+  private accessor error: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .overview-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+        overflow: auto;
+      }
+
+      .header {
+        margin-bottom: 24px;
+      }
+
+      .header-title {
+        font-size: 24px;
+        font-weight: 600;
+        color: #fff;
+        margin: 0 0 8px 0;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .header-title svg {
+        width: 28px;
+        height: 28px;
+        color: #888;
+      }
+
+      .header-subtitle {
+        color: #888;
+        font-size: 14px;
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 32px;
+      }
+
+      .stat-card {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .stat-label {
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #888;
+      }
+
+      .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #e0e0e0;
+      }
+
+      .stat-value.small {
+        font-size: 18px;
+      }
+
+      .stat-description {
+        font-size: 11px;
+        color: #666;
+      }
+
+      .section {
+        margin-bottom: 24px;
+      }
+
+      .section-title {
+        font-size: 14px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #666;
+        margin-bottom: 12px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #333;
+      }
+
+      .loading-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #888;
+        font-size: 14px;
+      }
+
+      .error-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #f87171;
+        text-align: center;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #666;
+        text-align: center;
+      }
+
+      .empty-state svg {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+    `,
+  ];
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('databaseName') && this.databaseName) {
+      this.loadStats();
+    }
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+    if (this.databaseName) {
+      await this.loadStats();
+    }
+  }
+
+  private async loadStats() {
+    if (!this.databaseName) return;
+
+    this.loading = true;
+    this.error = '';
+
+    try {
+      this.stats = await apiService.getDatabaseStats(this.databaseName);
+    } catch (err) {
+      console.error('Error loading database stats:', err);
+      this.error = 'Failed to load database statistics';
+    }
+
+    this.loading = false;
+  }
+
+  render() {
+    if (!this.databaseName) {
+      return html`
+        <div class="overview-container">
+          <div class="empty-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+            </svg>
+            <p>Select a database to view overview</p>
+          </div>
+        </div>
+      `;
+    }
+
+    if (this.loading) {
+      return html`
+        <div class="overview-container">
+          <div class="loading-state">Loading database statistics...</div>
+        </div>
+      `;
+    }
+
+    if (this.error) {
+      return html`
+        <div class="overview-container">
+          <div class="error-state">${this.error}</div>
+        </div>
+      `;
+    }
+
+    if (!this.stats) {
+      return html`
+        <div class="overview-container">
+          <div class="empty-state">
+            <p>No statistics available</p>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="overview-container">
+        <div class="header">
+          <h1 class="header-title">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+            </svg>
+            ${this.databaseName}
+          </h1>
+          <p class="header-subtitle">Database Overview</p>
+        </div>
+
+        <div class="section">
+          <div class="section-title">Storage</div>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <span class="stat-label">Collections</span>
+              <span class="stat-value">${this.stats.collections}</span>
+              <span class="stat-description">Total collections in database</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Documents</span>
+              <span class="stat-value">${formatCount(this.stats.objects) || this.stats.objects}</span>
+              <span class="stat-description">Total documents stored</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Avg Document Size</span>
+              <span class="stat-value small">${formatSize(this.stats.avgObjSize)}</span>
+              <span class="stat-description">Average size per document</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Data Size</span>
+              <span class="stat-value small">${formatSize(this.stats.dataSize)}</span>
+              <span class="stat-description">Uncompressed data size</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Storage Size</span>
+              <span class="stat-value small">${formatSize(this.stats.storageSize)}</span>
+              <span class="stat-description">Allocated storage</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-title">Indexes</div>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <span class="stat-label">Index Count</span>
+              <span class="stat-value">${this.stats.indexes}</span>
+              <span class="stat-description">Total indexes in database</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Index Size</span>
+              <span class="stat-value small">${formatSize(this.stats.indexSize)}</span>
+              <span class="stat-description">Total index storage</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/tsview-mongo-document.ts

@@ -25,7 +25,10 @@ export class TsviewMongoDocument extends DeesElement {
   private accessor editing: boolean = false;
 
   @state()
-  private accessor editContent: string = '';
+  private accessor originalContent: string = '';
+
+  @state()
+  private accessor hasChanges: boolean = false;
 
   @state()
   private accessor error: string = '';
@@ -101,56 +104,13 @@ export class TsviewMongoDocument extends DeesElement {
 
       .content {
         flex: 1;
-        overflow: auto;
+        overflow: hidden;
-        padding: 12px;
+        display: flex;
+        flex-direction: column;
       }
 
-      .json-view {
+      .content dees-input-code {
-        font-family: 'Monaco', 'Menlo', monospace;
+        flex: 1;
-        font-size: 12px;
-        line-height: 1.6;
-        white-space: pre-wrap;
-        word-break: break-all;
-        color: #ccc;
-      }
-
-      .json-key {
-        color: #e0e0e0;
-      }
-
-      .json-string {
-        color: #a5d6a7;
-      }
-
-      .json-number {
-        color: #fbbf24;
-      }
-
-      .json-boolean {
-        color: #f87171;
-      }
-
-      .json-null {
-        color: #888;
-      }
-
-      .edit-area {
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid #444;
-        border-radius: 6px;
-        color: #fff;
-        font-family: 'Monaco', 'Menlo', monospace;
-        font-size: 12px;
-        line-height: 1.6;
-        padding: 12px;
-        resize: none;
-      }
-
-      .edit-area:focus {
-        outline: none;
-        border-color: #404040;
       }
 
       .empty-state {
@@ -190,10 +150,12 @@ export class TsviewMongoDocument extends DeesElement {
   updated(changedProperties: Map<string, unknown>) {
     if (changedProperties.has('documentId')) {
       this.editing = false;
+      this.hasChanges = false;
       if (this.documentId) {
         this.loadDocument();
       } else {
         this.document = null;
+        this.originalContent = '';
       }
     }
   }
@@ -210,6 +172,8 @@ export class TsviewMongoDocument extends DeesElement {
         this.collectionName,
         this.documentId
       );
+      this.originalContent = JSON.stringify(this.document, null, 2);
+      this.hasChanges = false;
     } catch (err) {
       console.error('Error loading document:', err);
       this.error = 'Failed to load document';
@@ -219,18 +183,37 @@ export class TsviewMongoDocument extends DeesElement {
   }
 
   private startEditing() {
-    this.editContent = JSON.stringify(this.document, null, 2);
     this.editing = true;
   }
 
   private cancelEditing() {
     this.editing = false;
-    this.editContent = '';
+    // Reset content to original
+    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+    if (codeEditor) {
+      codeEditor.value = this.originalContent;
+    }
+    this.hasChanges = false;
+  }
+
+  private handleContentChange(e: CustomEvent) {
+    const newValue = e.detail as string;
+    this.hasChanges = newValue !== this.originalContent;
+  }
+
+  private handleDiscard() {
+    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+    if (codeEditor) {
+      codeEditor.value = this.originalContent;
+    }
+    this.hasChanges = false;
   }
 
   private async saveDocument() {
     try {
-      const updatedDoc = JSON.parse(this.editContent);
+      const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+      const content = codeEditor?.value || this.originalContent;
+      const updatedDoc = JSON.parse(content);
 
       // Remove _id from update (can't update _id)
       const { _id, ...updateFields } = updatedDoc;
@@ -243,6 +226,7 @@ export class TsviewMongoDocument extends DeesElement {
       );
 
       this.editing = false;
+      this.hasChanges = false;
       await this.loadDocument();
 
       this.dispatchEvent(
@@ -283,20 +267,6 @@ export class TsviewMongoDocument extends DeesElement {
     }
   }
 
-  private formatJson(obj: unknown): string {
-    return JSON.stringify(obj, null, 2);
-  }
-
-  private syntaxHighlight(json: string): string {
-    // Basic syntax highlighting
-    return json
-      .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
-      .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
-      .replace(/: (\d+\.?\d*)/g, ': <span class="json-number">$1</span>')
-      .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
-      .replace(/: (null)/g, ': <span class="json-null">$1</span>');
-  }
-
   render() {
     if (!this.documentId) {
       return html`
@@ -334,10 +304,14 @@ export class TsviewMongoDocument extends DeesElement {
           <span class="header-title">Document</span>
           <div class="header-actions">
             ${this.editing
-              ? html`
+              ? this.hasChanges
-                  <button class="action-btn" @click=${this.cancelEditing}>Cancel</button>
+                ? html`
-                  <button class="action-btn primary" @click=${this.saveDocument}>Save</button>
+                    <button class="action-btn" @click=${this.handleDiscard}>Discard</button>
-                `
+                    <button class="action-btn primary" @click=${this.saveDocument}>Save</button>
+                  `
+                : html`
+                    <button class="action-btn" @click=${this.cancelEditing}>Cancel</button>
+                  `
               : html`
                   <button class="action-btn" @click=${this.startEditing}>Edit</button>
                   <button class="action-btn danger" @click=${this.deleteDocument}>Delete</button>
@@ -346,20 +320,12 @@ export class TsviewMongoDocument extends DeesElement {
         </div>
 
         <div class="content">
-          ${this.editing
+          <dees-input-code
-            ? html`
+            .value=${this.originalContent}
-                <textarea
+            .language=${'json'}
-                  class="edit-area"
+            .disabled=${!this.editing}
-                  .value=${this.editContent}
+            @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
-                  @input=${(e: Event) => (this.editContent = (e.target as HTMLTextAreaElement).value)}
+          ></dees-input-code>
-                ></textarea>
-              `
-            : html`
-                <div
-                  class="json-view"
-                  .innerHTML=${this.syntaxHighlight(this.formatJson(this.document))}
-                ></div>
-              `}
         </div>
       </div>
     `;

ts_web/elements/tsview-mongo-documents.ts

@@ -3,6 +3,7 @@ import { apiService } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 @customElement('tsview-mongo-documents')
 export class TsviewMongoDocuments extends DeesElement {
@@ -258,6 +259,13 @@ export class TsviewMongoDocuments extends DeesElement {
     this.loading = false;
   }
 
+  /**
+   * Public method to refresh documents (called by parent on change events)
+   */
+  public async refresh() {
+    await this.loadDocuments();
+  }
+
   private handleFilterInput(e: Event) {
     this.filterText = (e.target as HTMLInputElement).value;
   }
@@ -330,6 +338,74 @@ export class TsviewMongoDocuments extends DeesElement {
     }
   }
 
+  private handleDocumentContextMenu(event: MouseEvent, doc: Record<string, unknown>) {
+    event.preventDefault();
+    const docId = doc._id as string;
+
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View/Edit',
+        iconName: 'lucide:edit',
+        action: async () => {
+          this.selectDocument(doc);
+        },
+      },
+      {
+        name: 'Copy as JSON',
+        iconName: 'lucide:copy',
+        action: async () => {
+          await navigator.clipboard.writeText(JSON.stringify(doc, null, 2));
+        },
+      },
+      {
+        name: 'Duplicate',
+        iconName: 'lucide:copyPlus',
+        action: async () => {
+          const { _id, ...docWithoutId } = doc;
+          const newDoc = { ...docWithoutId, createdAt: new Date().toISOString() };
+          try {
+            const insertedId = await apiService.insertDocument(
+              this.databaseName,
+              this.collectionName,
+              newDoc
+            );
+            await this.loadDocuments();
+            this.selectedId = insertedId;
+            this.dispatchEvent(
+              new CustomEvent('document-selected', {
+                detail: { documentId: insertedId },
+                bubbles: true,
+                composed: true,
+              })
+            );
+          } catch (err) {
+            console.error('Error duplicating document:', err);
+          }
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete document "${docId}"?`)) {
+            const result = await apiService.deleteDocument(
+              this.databaseName,
+              this.collectionName,
+              docId
+            );
+            if (result.success) {
+              await this.loadDocuments();
+              if (this.selectedId === docId) {
+                this.selectedId = '';
+              }
+            }
+          }
+        },
+      },
+    ]);
+  }
+
   render() {
     const startRecord = (this.page - 1) * this.pageSize + 1;
     const endRecord = Math.min(this.page * this.pageSize, this.total);
@@ -362,6 +438,7 @@ export class TsviewMongoDocuments extends DeesElement {
                     <div
                       class="document-row ${this.selectedId === doc._id ? 'selected' : ''}"
                       @click=${() => this.selectDocument(doc)}
+                      @contextmenu=${(e: MouseEvent) => this.handleDocumentContextMenu(e, doc)}
                     >
                       <div class="document-id">_id: ${doc._id}</div>
                       <div class="document-preview">${this.getDocumentPreview(doc)}</div>

ts_web/elements/tsview-s3-browser.ts

@@ -1,254 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService } from '../services/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-type TViewType = 'columns' | 'keys';
-
-@customElement('tsview-s3-browser')
-export class TsviewS3Browser extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @state()
-  private accessor viewType: TViewType = 'columns';
-
-  @state()
-  private accessor currentPrefix: string = '';
-
-  @state()
-  private accessor selectedKey: string = '';
-
-  @state()
-  private accessor refreshKey: number = 0;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      .browser-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .toolbar {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 12px;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-        margin-bottom: 16px;
-      }
-
-      .breadcrumb {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex: 1;
-        font-size: 14px;
-        color: #999;
-      }
-
-      .breadcrumb-item {
-        cursor: pointer;
-        padding: 4px 8px;
-        border-radius: 4px;
-        transition: background 0.15s;
-      }
-
-      .breadcrumb-item:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: #fff;
-      }
-
-      .breadcrumb-separator {
-        color: #555;
-      }
-
-      .view-toggle {
-        display: flex;
-        gap: 4px;
-      }
-
-      .view-btn {
-        padding: 6px 12px;
-        background: transparent;
-        border: 1px solid #444;
-        color: #888;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s;
-      }
-
-      .view-btn:hover {
-        border-color: #666;
-        color: #aaa;
-      }
-
-      .view-btn.active {
-        background: rgba(255, 255, 255, 0.1);
-        border-color: #404040;
-        color: #e0e0e0;
-      }
-
-      .content {
-        flex: 1;
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 16px;
-        overflow: hidden;
-      }
-
-      .content.has-preview {
-        grid-template-columns: 1fr 350px;
-      }
-
-      .main-view {
-        overflow: auto;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-      }
-
-      .preview-panel {
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      @media (max-width: 1024px) {
-        .content,
-        .content.has-preview {
-          grid-template-columns: 1fr;
-        }
-
-        .preview-panel {
-          display: none;
-        }
-      }
-    `,
-  ];
-
-  private setViewType(type: TViewType) {
-    this.viewType = type;
-  }
-
-  private navigateToPrefix(prefix: string) {
-    this.currentPrefix = prefix;
-    this.selectedKey = '';
-  }
-
-  private handleKeySelected(e: CustomEvent) {
-    this.selectedKey = e.detail.key;
-  }
-
-  private handleNavigate(e: CustomEvent) {
-    this.navigateToPrefix(e.detail.prefix);
-  }
-
-  private handleObjectDeleted(e: CustomEvent) {
-    this.selectedKey = '';
-    // Increment refresh key to trigger re-render of child components
-    this.refreshKey++;
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('bucketName')) {
-      // Clear selection when bucket changes
-      this.selectedKey = '';
-      this.currentPrefix = '';
-    }
-  }
-
-  render() {
-    const breadcrumbParts = this.currentPrefix
-      ? this.currentPrefix.split('/').filter(Boolean)
-      : [];
-
-    return html`
-      <div class="browser-container">
-        <div class="toolbar">
-          <div class="breadcrumb">
-            <span
-              class="breadcrumb-item"
-              @click=${() => this.navigateToPrefix('')}
-            >
-              ${this.bucketName}
-            </span>
-            ${breadcrumbParts.map((part, index) => {
-              const prefix = breadcrumbParts.slice(0, index + 1).join('/') + '/';
-              return html`
-                <span class="breadcrumb-separator">/</span>
-                <span
-                  class="breadcrumb-item"
-                  @click=${() => this.navigateToPrefix(prefix)}
-                >
-                  ${part}
-                </span>
-              `;
-            })}
-          </div>
-
-          <div class="view-toggle">
-            <button
-              class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
-              @click=${() => this.setViewType('columns')}
-            >
-              Columns
-            </button>
-            <button
-              class="view-btn ${this.viewType === 'keys' ? 'active' : ''}"
-              @click=${() => this.setViewType('keys')}
-            >
-              List
-            </button>
-          </div>
-        </div>
-
-        <div class="content ${this.selectedKey ? 'has-preview' : ''}">
-          <div class="main-view">
-            ${this.viewType === 'columns'
-              ? html`
-                  <tsview-s3-columns
-                    .bucketName=${this.bucketName}
-                    .currentPrefix=${this.currentPrefix}
-                    .refreshKey=${this.refreshKey}
-                    @key-selected=${this.handleKeySelected}
-                    @navigate=${this.handleNavigate}
-                  ></tsview-s3-columns>
-                `
-              : html`
-                  <tsview-s3-keys
-                    .bucketName=${this.bucketName}
-                    .currentPrefix=${this.currentPrefix}
-                    .refreshKey=${this.refreshKey}
-                    @key-selected=${this.handleKeySelected}
-                    @navigate=${this.handleNavigate}
-                  ></tsview-s3-keys>
-                `}
-          </div>
-
-          ${this.selectedKey
-            ? html`
-                <div class="preview-panel">
-                  <tsview-s3-preview
-                    .bucketName=${this.bucketName}
-                    .objectKey=${this.selectedKey}
-                    @object-deleted=${this.handleObjectDeleted}
-                  ></tsview-s3-preview>
-                </div>
-              `
-            : ''}
-        </div>
-      </div>
-    `;
-  }
-}

ts_web/elements/tsview-s3-columns.ts

@@ -1,392 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService, type IS3Object } from '../services/index.js';
-import { getFileName } from '../utilities/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-interface IColumn {
-  prefix: string;
-  objects: IS3Object[];
-  prefixes: string[];
-  selectedItem: string | null;
-  width: number;
-}
-
-@customElement('tsview-s3-columns')
-export class TsviewS3Columns extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @property({ type: String })
-  public accessor currentPrefix: string = '';
-
-  @property({ type: Number })
-  public accessor refreshKey: number = 0;
-
-  @state()
-  private accessor columns: IColumn[] = [];
-
-  @state()
-  private accessor loading: boolean = false;
-
-  private resizing: { columnIndex: number; startX: number; startWidth: number } | null = null;
-  private readonly DEFAULT_COLUMN_WIDTH = 250;
-  private readonly MIN_COLUMN_WIDTH = 150;
-  private readonly MAX_COLUMN_WIDTH = 500;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-      }
-
-      .columns-container {
-        display: flex;
-        height: 100%;
-        min-width: max-content;
-      }
-
-      .column-wrapper {
-        display: flex;
-        height: 100%;
-        flex-shrink: 0;
-      }
-
-      .column {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        flex-shrink: 0;
-        overflow: hidden;
-      }
-
-      .resize-handle {
-        width: 5px;
-        height: 100%;
-        background: transparent;
-        cursor: col-resize;
-        position: relative;
-        flex-shrink: 0;
-      }
-
-      .resize-handle::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 2px;
-        width: 1px;
-        height: 100%;
-        background: #333;
-      }
-
-      .resize-handle:hover::after,
-      .resize-handle.active::after {
-        background: #404040;
-        width: 2px;
-        left: 1px;
-      }
-
-      .column-wrapper:last-child .resize-handle {
-        display: none;
-      }
-
-      .column-header {
-        padding: 8px 12px;
-        font-size: 12px;
-        font-weight: 500;
-        color: #666;
-        background: rgba(0, 0, 0, 0.2);
-        border-bottom: 1px solid #333;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .column-items {
-        flex: 1;
-        overflow-y: auto;
-        padding: 4px;
-      }
-
-      .column-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 6px 10px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: background 0.1s;
-      }
-
-      .column-item:hover {
-        background: rgba(255, 255, 255, 0.05);
-      }
-
-      .column-item.selected {
-        background: rgba(255, 255, 255, 0.1);
-        color: #e0e0e0;
-      }
-
-      .column-item.folder {
-        color: #fbbf24;
-      }
-
-      .column-item .icon {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-      }
-
-      .column-item .name {
-        flex: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .column-item .chevron {
-        width: 14px;
-        height: 14px;
-        color: #555;
-      }
-
-      .empty-state {
-        padding: 16px;
-        text-align: center;
-        color: #666;
-        font-size: 13px;
-      }
-
-      .loading {
-        padding: 16px;
-        text-align: center;
-        color: #666;
-      }
-    `,
-  ];
-
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.loadInitialColumn();
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    // Only reset columns when bucket changes or refresh is triggered
-    // Internal folder navigation is handled by selectFolder() which appends columns
-    if (changedProperties.has('bucketName') || changedProperties.has('refreshKey')) {
-      this.loadInitialColumn();
-    }
-  }
-
-  private async loadInitialColumn() {
-    this.loading = true;
-    try {
-      const result = await apiService.listObjects(this.bucketName, this.currentPrefix, '/');
-      this.columns = [
-        {
-          prefix: this.currentPrefix,
-          objects: result.objects,
-          prefixes: result.prefixes,
-          selectedItem: null,
-          width: this.DEFAULT_COLUMN_WIDTH,
-        },
-      ];
-    } catch (err) {
-      console.error('Error loading objects:', err);
-      this.columns = [];
-    }
-    this.loading = false;
-  }
-
-  private async selectFolder(columnIndex: number, prefix: string) {
-    // Update selection in current column
-    this.columns = this.columns.map((col, i) => {
-      if (i === columnIndex) {
-        return { ...col, selectedItem: prefix };
-      }
-      return col;
-    });
-
-    // Remove columns after current
-    this.columns = this.columns.slice(0, columnIndex + 1);
-
-    // Load new column
-    try {
-      const result = await apiService.listObjects(this.bucketName, prefix, '/');
-      this.columns = [
-        ...this.columns,
-        {
-          prefix,
-          objects: result.objects,
-          prefixes: result.prefixes,
-          selectedItem: null,
-          width: this.DEFAULT_COLUMN_WIDTH,
-        },
-      ];
-      // Auto-scroll to show the new column
-      this.updateComplete.then(() => this.scrollToEnd());
-    } catch (err) {
-      console.error('Error loading folder:', err);
-    }
-
-    // Note: Don't dispatch navigate event here - columns view expands horizontally
-    // The navigate event is only for breadcrumb sync, not for column navigation
-  }
-
-  private scrollToEnd() {
-    this.scrollLeft = this.scrollWidth - this.clientWidth;
-  }
-
-  private startResize(e: MouseEvent, columnIndex: number) {
-    e.preventDefault();
-    this.resizing = {
-      columnIndex,
-      startX: e.clientX,
-      startWidth: this.columns[columnIndex].width,
-    };
-    document.addEventListener('mousemove', this.handleResize);
-    document.addEventListener('mouseup', this.stopResize);
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-  }
-
-  private handleResize = (e: MouseEvent) => {
-    if (!this.resizing) return;
-
-    const delta = e.clientX - this.resizing.startX;
-    const newWidth = Math.min(
-      this.MAX_COLUMN_WIDTH,
-      Math.max(this.MIN_COLUMN_WIDTH, this.resizing.startWidth + delta)
-    );
-
-    this.columns = this.columns.map((col, i) => {
-      if (i === this.resizing!.columnIndex) {
-        return { ...col, width: newWidth };
-      }
-      return col;
-    });
-  };
-
-  private stopResize = () => {
-    this.resizing = null;
-    document.removeEventListener('mousemove', this.handleResize);
-    document.removeEventListener('mouseup', this.stopResize);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  };
-
-  private selectFile(columnIndex: number, key: string) {
-    // Update selection
-    this.columns = this.columns.map((col, i) => {
-      if (i === columnIndex) {
-        return { ...col, selectedItem: key };
-      }
-      return col;
-    });
-
-    // Remove columns after current
-    this.columns = this.columns.slice(0, columnIndex + 1);
-
-    // Dispatch key-selected event
-    this.dispatchEvent(
-      new CustomEvent('key-selected', {
-        detail: { key },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private getFileIcon(key: string): string {
-    const ext = key.split('.').pop()?.toLowerCase() || '';
-    const iconMap: Record<string, string> = {
-      json: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
-      txt: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
-      png: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-      jpg: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-      jpeg: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-      gif: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-      pdf: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
-    };
-    return iconMap[ext] || 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z';
-  }
-
-  render() {
-    if (this.loading && this.columns.length === 0) {
-      return html`<div class="loading">Loading...</div>`;
-    }
-
-    return html`
-      <div class="columns-container">
-        ${this.columns.map((column, index) => this.renderColumnWrapper(column, index))}
-      </div>
-    `;
-  }
-
-  private renderColumnWrapper(column: IColumn, index: number) {
-    return html`
-      <div class="column-wrapper">
-        ${this.renderColumn(column, index)}
-        <div
-          class="resize-handle ${this.resizing?.columnIndex === index ? 'active' : ''}"
-          @mousedown=${(e: MouseEvent) => this.startResize(e, index)}
-        ></div>
-      </div>
-    `;
-  }
-
-  private renderColumn(column: IColumn, index: number) {
-    const headerName = column.prefix
-      ? getFileName(column.prefix)
-      : this.bucketName;
-
-    return html`
-      <div class="column" style="width: ${column.width}px">
-        <div class="column-header" title=${column.prefix || this.bucketName}>
-          ${headerName}
-        </div>
-        <div class="column-items">
-          ${column.prefixes.length === 0 && column.objects.length === 0
-            ? html`<div class="empty-state">Empty folder</div>`
-            : ''}
-          ${column.prefixes.map(
-            (prefix) => html`
-              <div
-                class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''}"
-                @click=${() => this.selectFolder(index, prefix)}
-              >
-                <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-                </svg>
-                <span class="name">${getFileName(prefix)}</span>
-                <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polyline points="9 18 15 12 9 6"></polyline>
-                </svg>
-              </div>
-            `
-          )}
-          ${column.objects.map(
-            (obj) => html`
-              <div
-                class="column-item ${column.selectedItem === obj.key ? 'selected' : ''}"
-                @click=${() => this.selectFile(index, obj.key)}
-              >
-                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="${this.getFileIcon(obj.key)}" />
-                </svg>
-                <span class="name">${getFileName(obj.key)}</span>
-              </div>
-            `
-          )}
-        </div>
-      </div>
-    `;
-  }
-}

ts_web/elements/tsview-s3-keys.ts

@@ -1,275 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService, type IS3Object } from '../services/index.js';
-import { formatSize, getFileName } from '../utilities/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-@customElement('tsview-s3-keys')
-export class TsviewS3Keys extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @property({ type: String })
-  public accessor currentPrefix: string = '';
-
-  @property({ type: Number })
-  public accessor refreshKey: number = 0;
-
-  @state()
-  private accessor allKeys: IS3Object[] = [];
-
-  @state()
-  private accessor prefixes: string[] = [];
-
-  @state()
-  private accessor loading: boolean = false;
-
-  @state()
-  private accessor selectedKey: string = '';
-
-  @state()
-  private accessor filterText: string = '';
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      .keys-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .filter-bar {
-        padding: 12px;
-        border-bottom: 1px solid #333;
-      }
-
-      .filter-input {
-        width: 100%;
-        padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid #444;
-        border-radius: 6px;
-        color: #fff;
-        font-size: 14px;
-      }
-
-      .filter-input:focus {
-        outline: none;
-        border-color: #404040;
-      }
-
-      .filter-input::placeholder {
-        color: #666;
-      }
-
-      .keys-list {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-
-      thead {
-        position: sticky;
-        top: 0;
-        background: #1a1a1a;
-        z-index: 1;
-      }
-
-      th {
-        text-align: left;
-        padding: 10px 12px;
-        font-size: 12px;
-        font-weight: 500;
-        color: #666;
-        text-transform: uppercase;
-        border-bottom: 1px solid #333;
-      }
-
-      td {
-        padding: 8px 12px;
-        font-size: 13px;
-        border-bottom: 1px solid #2a2a3e;
-      }
-
-      tr:hover td {
-        background: rgba(255, 255, 255, 0.03);
-      }
-
-      tr.selected td {
-        background: rgba(255, 255, 255, 0.08);
-      }
-
-      .key-cell {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-      }
-
-      .key-icon {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-      }
-
-      .folder-icon {
-        color: #fbbf24;
-      }
-
-      .key-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .size-cell {
-        color: #888;
-        font-variant-numeric: tabular-nums;
-      }
-
-      .empty-state {
-        padding: 32px;
-        text-align: center;
-        color: #666;
-      }
-    `,
-  ];
-
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.loadObjects();
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix') || changedProperties.has('refreshKey')) {
-      this.loadObjects();
-    }
-  }
-
-  private async loadObjects() {
-    this.loading = true;
-    try {
-      const result = await apiService.listObjects(this.bucketName, this.currentPrefix, '/');
-      this.allKeys = result.objects;
-      this.prefixes = result.prefixes;
-    } catch (err) {
-      console.error('Error loading objects:', err);
-      this.allKeys = [];
-      this.prefixes = [];
-    }
-    this.loading = false;
-  }
-
-  private handleFilterInput(e: Event) {
-    this.filterText = (e.target as HTMLInputElement).value;
-  }
-
-  private selectKey(key: string, isFolder: boolean) {
-    this.selectedKey = key;
-
-    if (isFolder) {
-      this.dispatchEvent(
-        new CustomEvent('navigate', {
-          detail: { prefix: key },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    } else {
-      this.dispatchEvent(
-        new CustomEvent('key-selected', {
-          detail: { key },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-  }
-
-  private get filteredItems() {
-    const filter = this.filterText.toLowerCase();
-    const folders = this.prefixes
-      .filter((p) => !filter || getFileName(p).toLowerCase().includes(filter))
-      .map((p) => ({ key: p, isFolder: true, size: undefined }));
-    const files = this.allKeys
-      .filter((o) => !filter || getFileName(o.key).toLowerCase().includes(filter))
-      .map((o) => ({ key: o.key, isFolder: false, size: o.size }));
-    return [...folders, ...files];
-  }
-
-  render() {
-    return html`
-      <div class="keys-container">
-        <div class="filter-bar">
-          <input
-            type="text"
-            class="filter-input"
-            placeholder="Filter files..."
-            .value=${this.filterText}
-            @input=${this.handleFilterInput}
-          />
-        </div>
-
-        <div class="keys-list">
-          ${this.loading
-            ? html`<div class="empty-state">Loading...</div>`
-            : this.filteredItems.length === 0
-              ? html`<div class="empty-state">No objects found</div>`
-              : html`
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Name</th>
-                        <th style="width: 100px;">Size</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      ${this.filteredItems.map(
-                        (item) => html`
-                          <tr
-                            class="${this.selectedKey === item.key ? 'selected' : ''}"
-                            @click=${() => this.selectKey(item.key, item.isFolder)}
-                          >
-                            <td>
-                              <div class="key-cell">
-                                ${item.isFolder
-                                  ? html`
-                                      <svg class="key-icon folder-icon" viewBox="0 0 24 24" fill="currentColor">
-                                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-                                      </svg>
-                                    `
-                                  : html`
-                                      <svg class="key-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                      </svg>
-                                    `}
-                                <span class="key-name">${getFileName(item.key)}</span>
-                              </div>
-                            </td>
-                            <td class="size-cell">
-                              ${item.isFolder ? '-' : formatSize(item.size)}
-                            </td>
-                          </tr>
-                        `
-                      )}
-                    </tbody>
-                  </table>
-                `}
-        </div>
-      </div>
-    `;
-  }
-}

ts_web/elements/tsview-s3-preview.ts

@@ -1,335 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService } from '../services/index.js';
-import { formatSize, getFileName } from '../utilities/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-@customElement('tsview-s3-preview')
-export class TsviewS3Preview extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @property({ type: String })
-  public accessor objectKey: string = '';
-
-  @state()
-  private accessor loading: boolean = false;
-
-  @state()
-  private accessor content: string = '';
-
-  @state()
-  private accessor contentType: string = '';
-
-  @state()
-  private accessor size: number = 0;
-
-  @state()
-  private accessor lastModified: string = '';
-
-  @state()
-  private accessor error: string = '';
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      .preview-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .preview-header {
-        padding: 12px;
-        border-bottom: 1px solid #333;
-      }
-
-      .preview-title {
-        font-size: 14px;
-        font-weight: 500;
-        margin-bottom: 8px;
-        word-break: break-all;
-      }
-
-      .preview-meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-        font-size: 12px;
-        color: #888;
-      }
-
-      .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-
-      .preview-content {
-        flex: 1;
-        overflow: auto;
-        padding: 12px;
-      }
-
-      .preview-image {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-        border-radius: 4px;
-      }
-
-      .preview-text {
-        font-family: 'Monaco', 'Menlo', monospace;
-        font-size: 12px;
-        line-height: 1.5;
-        white-space: pre-wrap;
-        word-break: break-all;
-        color: #ccc;
-        background: rgba(0, 0, 0, 0.3);
-        padding: 12px;
-        border-radius: 6px;
-      }
-
-      .preview-actions {
-        padding: 12px;
-        border-top: 1px solid #333;
-        display: flex;
-        gap: 8px;
-      }
-
-      .action-btn {
-        flex: 1;
-        padding: 8px 16px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid #404040;
-        color: #e0e0e0;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s;
-      }
-
-      .action-btn:hover {
-        background: rgba(255, 255, 255, 0.15);
-      }
-
-      .action-btn.danger {
-        background: rgba(239, 68, 68, 0.2);
-        border-color: #ef4444;
-        color: #f87171;
-      }
-
-      .action-btn.danger:hover {
-        background: rgba(239, 68, 68, 0.3);
-      }
-
-      .empty-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #666;
-        text-align: center;
-        padding: 24px;
-      }
-
-      .empty-state svg {
-        width: 48px;
-        height: 48px;
-        margin-bottom: 12px;
-        opacity: 0.5;
-      }
-
-      .loading-state {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #888;
-      }
-
-      .error-state {
-        padding: 16px;
-        color: #f87171;
-        text-align: center;
-      }
-
-      .binary-preview {
-        text-align: center;
-        color: #888;
-        padding: 24px;
-      }
-    `,
-  ];
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
-      if (this.objectKey) {
-        this.loadObject();
-      } else {
-        this.content = '';
-        this.contentType = '';
-        this.error = '';  // Clear error when no file selected
-      }
-    }
-  }
-
-  private async loadObject() {
-    if (!this.objectKey || !this.bucketName) return;
-
-    this.loading = true;
-    this.error = '';
-
-    try {
-      const result = await apiService.getObject(this.bucketName, this.objectKey);
-      this.content = result.content;
-      this.contentType = result.contentType;
-      this.size = result.size;
-      this.lastModified = result.lastModified;
-    } catch (err) {
-      console.error('Error loading object:', err);
-      this.error = 'Failed to load object';
-    }
-
-    this.loading = false;
-  }
-
-  private formatDate(dateStr: string): string {
-    if (!dateStr) return '-';
-    const date = new Date(dateStr);
-    return date.toLocaleString();
-  }
-
-  private isImage(): boolean {
-    return this.contentType.startsWith('image/');
-  }
-
-  private isText(): boolean {
-    return (
-      this.contentType.startsWith('text/') ||
-      this.contentType === 'application/json' ||
-      this.contentType === 'application/xml' ||
-      this.contentType === 'application/javascript'
-    );
-  }
-
-  private getTextContent(): string {
-    try {
-      // Properly decode base64 to UTF-8 text
-      const binaryString = atob(this.content);
-      const bytes = new Uint8Array(binaryString.length);
-      for (let i = 0; i < binaryString.length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-      }
-      return new TextDecoder('utf-8').decode(bytes);
-    } catch {
-      return 'Unable to decode content';
-    }
-  }
-
-  private async handleDownload() {
-    try {
-      const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
-        type: this.contentType,
-      });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = getFileName(this.objectKey);
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch (err) {
-      console.error('Error downloading:', err);
-    }
-  }
-
-  private async handleDelete() {
-    if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
-
-    try {
-      await apiService.deleteObject(this.bucketName, this.objectKey);
-      this.dispatchEvent(
-        new CustomEvent('object-deleted', {
-          detail: { key: this.objectKey },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    } catch (err) {
-      console.error('Error deleting object:', err);
-    }
-  }
-
-  render() {
-    if (!this.objectKey) {
-      return html`
-        <div class="preview-container">
-          <div class="empty-state">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-              <polyline points="14 2 14 8 20 8" />
-            </svg>
-            <p>Select a file to preview</p>
-          </div>
-        </div>
-      `;
-    }
-
-    if (this.loading) {
-      return html`
-        <div class="preview-container">
-          <div class="loading-state">Loading...</div>
-        </div>
-      `;
-    }
-
-    if (this.error) {
-      return html`
-        <div class="preview-container">
-          <div class="error-state">${this.error}</div>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="preview-container">
-        <div class="preview-header">
-          <div class="preview-title">${getFileName(this.objectKey)}</div>
-          <div class="preview-meta">
-            <span class="meta-item">${this.contentType}</span>
-            <span class="meta-item">${formatSize(this.size)}</span>
-            <span class="meta-item">${this.formatDate(this.lastModified)}</span>
-          </div>
-        </div>
-
-        <div class="preview-content">
-          ${this.isImage()
-            ? html`<img class="preview-image" src="data:${this.contentType};base64,${this.content}" />`
-            : this.isText()
-              ? html`<pre class="preview-text">${this.getTextContent()}</pre>`
-              : html`
-                  <div class="binary-preview">
-                    <p>Binary file preview not available</p>
-                    <p>Download to view</p>
-                  </div>
-                `}
-        </div>
-
-        <div class="preview-actions">
-          <button class="action-btn" @click=${this.handleDownload}>Download</button>
-          <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
-        </div>
-      </div>
-    `;
-  }
-}

ts_web/plugins.ts

@@ -18,4 +18,9 @@ export const DeesElement = deesElement.DeesElement;
 
 // @api.global scope
 import * as typedrequest from '@api.global/typedrequest';
-export { typedrequest };
+import * as typedsocket from '@api.global/typedsocket';
+export { typedrequest, typedsocket };
+
+// @push.rocks scope
+import * as smartrx from '@push.rocks/smartrx';
+export { smartrx };

ts_web/services/api.service.ts

@@ -1,13 +1,6 @@
 import * as plugins from '../plugins.js';
-
+import type { IStorageObject } from '@design.estate/dees-catalog';
-// Import interfaces from shared types
+export type { IStorageObject };
-// Note: In bundled form these are inlined
-export interface IS3Object {
-  key: string;
-  size?: number;
-  lastModified?: string;
-  isPrefix?: boolean;
-}
 
 export interface IMongoDatabase {
   name: string;
@@ -35,6 +28,17 @@ export interface ICollectionStats {
   indexCount: number;
 }
 
+export interface IDatabaseStats {
+  collections: number;
+  views: number;
+  objects: number;
+  avgObjSize: number;
+  dataSize: number;
+  storageSize: number;
+  indexes: number;
+  indexSize: number;
+}
+
 /**
  * API service for communicating with the tsview backend
  */
@@ -89,7 +93,7 @@ export class ApiService {
     bucketName: string,
     prefix?: string,
     delimiter?: string
-  ): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
+  ): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
     return this.request('listObjects', { bucketName, prefix, delimiter });
   }
 
@@ -128,6 +132,22 @@ export class ApiService {
     return result.success;
   }
 
+  async deletePrefix(bucketName: string, prefix: string): Promise<boolean> {
+    const result = await this.request<
+      { bucketName: string; prefix: string },
+      { success: boolean }
+    >('deletePrefix', { bucketName, prefix });
+    return result.success;
+  }
+
+  async getObjectUrl(bucketName: string, key: string): Promise<string> {
+    const result = await this.request<
+      { bucketName: string; key: string },
+      { url: string }
+    >('getObjectUrl', { bucketName, key });
+    return result.url;
+  }
+
   async copyObject(
     sourceBucket: string,
     sourceKey: string,
@@ -141,6 +161,28 @@ export class ApiService {
     return result.success;
   }
 
+  async moveObject(
+    bucketName: string,
+    sourceKey: string,
+    destKey: string
+  ): Promise<{ success: boolean; error?: string }> {
+    return this.request<
+      { bucketName: string; sourceKey: string; destKey: string },
+      { success: boolean; error?: string }
+    >('moveObject', { bucketName, sourceKey, destKey });
+  }
+
+  async movePrefix(
+    bucketName: string,
+    sourcePrefix: string,
+    destPrefix: string
+  ): Promise<{ success: boolean; movedCount: number; error?: string }> {
+    return this.request<
+      { bucketName: string; sourcePrefix: string; destPrefix: string },
+      { success: boolean; movedCount: number; error?: string }
+    >('movePrefix', { bucketName, sourcePrefix, destPrefix });
+  }
+
   // ===========================================
   // MongoDB API Methods
   // ===========================================
@@ -328,4 +370,12 @@ export class ApiService {
   }> {
     return this.request('getServerStatus', {});
   }
+
+  async getDatabaseStats(databaseName: string): Promise<IDatabaseStats | null> {
+    const result = await this.request<
+      { databaseName: string },
+      { stats: IDatabaseStats | null }
+    >('getDatabaseStats', { databaseName });
+    return result.stats;
+  }
 }

ts_web/services/changestream.service.ts

@@ -0,0 +1,567 @@
+import * as plugins from '../plugins.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
+export type { IStorageChangeEvent };
+
+/**
+ * MongoDB change event
+ */
+export interface IMongoChangeEvent {
+  type: 'insert' | 'update' | 'delete' | 'replace' | 'drop' | 'invalidate';
+  database: string;
+  collection: string;
+  documentId?: string;
+  document?: Record<string, unknown>;
+  updateDescription?: {
+    updatedFields?: Record<string, unknown>;
+    removedFields?: string[];
+  };
+  timestamp: string;
+}
+
+/**
+ * Combined activity event
+ */
+export interface IActivityEvent {
+  id: string;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
+  timestamp: string;
+}
+
+/**
+ * Subscription info tracked by the service
+ */
+interface ISubscription {
+  type: 'mongo' | 'storage' | 'activity';
+  key: string; // "db/collection" or "bucket/prefix" or "activity"
+  subscriptionId: string;
+}
+
+/**
+ * ChangeStreamService manages real-time change subscriptions from the browser.
+ *
+ * Features:
+ * - WebSocket connection via TypedSocket
+ * - Automatic reconnection with subscription restoration
+ * - RxJS Subjects for reactive UI updates
+ * - Subscription lifecycle management
+ */
+export class ChangeStreamService {
+  private typedSocket: plugins.typedsocket.TypedSocket | null = null;
+  private isConnected = false;
+  private isConnecting = false;
+  private connectPromise: Promise<void> | null = null;
+  private subscriptions: Map<string, ISubscription> = new Map();
+
+  // Buffer activity events so they survive tab switches
+  private activityBuffer: IActivityEvent[] = [];
+  private static readonly ACTIVITY_BUFFER_SIZE = 500;
+
+  // RxJS Subjects for UI components
+  public readonly mongoChanges$ = new plugins.smartrx.rxjs.Subject<IMongoChangeEvent>();
+  public readonly storageChanges$ = new plugins.smartrx.rxjs.Subject<IStorageChangeEvent>();
+  public readonly activityEvents$ = new plugins.smartrx.rxjs.Subject<IActivityEvent>();
+  public readonly connectionStatus$ = new plugins.smartrx.rxjs.ReplaySubject<'connected' | 'disconnected' | 'connecting'>(1);
+
+  constructor() {
+    // Emit initial disconnected status
+    this.connectionStatus$.next('disconnected');
+  }
+
+  /**
+   * Connect to the WebSocket server.
+   * If a connection is already in progress, waits for it to complete.
+   */
+  public async connect(): Promise<void> {
+    if (this.isConnected) {
+      return;
+    }
+
+    // If already connecting, wait for the existing attempt to finish
+    if (this.isConnecting && this.connectPromise) {
+      return this.connectPromise;
+    }
+
+    this.isConnecting = true;
+    this.connectionStatus$.next('connecting');
+
+    this.connectPromise = (async () => {
+      try {
+        // Create client router to handle server-initiated pushes
+        const clientRouter = new plugins.typedrequest.TypedRouter();
+
+        // Register handlers for server push events
+        this.registerPushHandlers(clientRouter);
+
+        // Connect to WebSocket server using current origin
+        this.typedSocket = await plugins.typedsocket.TypedSocket.createClient(
+          clientRouter,
+          plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl()
+        );
+
+        this.isConnected = true;
+        this.isConnecting = false;
+        this.connectionStatus$.next('connected');
+
+        console.log('[ChangeStream] WebSocket connected');
+
+        // Handle reconnection events via statusSubject
+        this.typedSocket.statusSubject.subscribe((status) => {
+          if (status === 'disconnected') {
+            this.handleDisconnect();
+          } else if (status === 'connected') {
+            this.handleReconnect();
+          }
+        });
+      } catch (error) {
+        this.isConnecting = false;
+        this.connectPromise = null;
+        this.connectionStatus$.next('disconnected');
+        console.error('[ChangeStream] Failed to connect:', error);
+        throw error;
+      }
+    })();
+
+    return this.connectPromise;
+  }
+
+  /**
+   * Ensure a WebSocket connection is established.
+   * If not connected, triggers connect() and returns whether connection succeeded.
+   */
+  private async ensureConnected(): Promise<boolean> {
+    if (this.isConnected && this.typedSocket) {
+      return true;
+    }
+    try {
+      await this.connect();
+      return this.isConnected;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Disconnect from the WebSocket server
+   */
+  public async disconnect(): Promise<void> {
+    if (!this.typedSocket) {
+      return;
+    }
+
+    try {
+      await this.typedSocket.stop();
+    } catch (error) {
+      console.error('[ChangeStream] Error during disconnect:', error);
+    }
+
+    this.typedSocket = null;
+    this.isConnected = false;
+    this.connectPromise = null;
+    this.subscriptions.clear();
+    this.connectionStatus$.next('disconnected');
+
+    console.log('[ChangeStream] WebSocket disconnected');
+  }
+
+  /**
+   * Register handlers for server push events
+   */
+  private registerPushHandlers(router: plugins.typedrequest.TypedRouter): void {
+    // Handle MongoDB change push
+    router.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<any>(
+        'pushMongoChange',
+        async (data: { event: IMongoChangeEvent }) => {
+          this.mongoChanges$.next(data.event);
+          return { received: true };
+        }
+      )
+    );
+
+    // Handle S3 change push
+    router.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<any>(
+        'pushS3Change',
+        async (data: { event: IStorageChangeEvent }) => {
+          this.storageChanges$.next(data.event);
+          return { received: true };
+        }
+      )
+    );
+
+    // Handle activity event push
+    router.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<any>(
+        'pushActivityEvent',
+        async (data: { event: IActivityEvent }) => {
+          this.activityBuffer.push(data.event);
+          if (this.activityBuffer.length > ChangeStreamService.ACTIVITY_BUFFER_SIZE) {
+            this.activityBuffer = this.activityBuffer.slice(-ChangeStreamService.ACTIVITY_BUFFER_SIZE);
+          }
+          this.activityEvents$.next(data.event);
+          return { received: true };
+        }
+      )
+    );
+  }
+
+  /**
+   * Handle WebSocket disconnection
+   */
+  private handleDisconnect(): void {
+    this.isConnected = false;
+    this.connectionStatus$.next('disconnected');
+    console.log('[ChangeStream] WebSocket disconnected, waiting for reconnect...');
+  }
+
+  /**
+   * Handle WebSocket reconnection - restore all subscriptions
+   */
+  private async handleReconnect(): Promise<void> {
+    this.isConnected = true;
+    this.connectionStatus$.next('connected');
+    console.log('[ChangeStream] WebSocket reconnected, restoring subscriptions...');
+
+    // Restore all subscriptions
+    const subscriptionsToRestore = Array.from(this.subscriptions.values());
+    this.subscriptions.clear();
+
+    for (const sub of subscriptionsToRestore) {
+      try {
+        if (sub.type === 'mongo') {
+          const [database, collection] = sub.key.split('/');
+          await this.subscribeToCollection(database, collection);
+        } else if (sub.type === 's3') {
+          const parts = sub.key.split('/');
+          const bucket = parts[0];
+          const prefix = parts.slice(1).join('/') || undefined;
+          await this.subscribeToBucket(bucket, prefix);
+        } else if (sub.type === 'activity') {
+          await this.subscribeToActivity();
+        }
+      } catch (error) {
+        console.error(`[ChangeStream] Failed to restore subscription ${sub.key}:`, error);
+      }
+    }
+  }
+
+  // ===========================================
+  // MongoDB Subscriptions
+  // ===========================================
+
+  /**
+   * Subscribe to changes in a MongoDB collection
+   */
+  public async subscribeToCollection(database: string, collection: string): Promise<boolean> {
+    if (!this.typedSocket || !this.isConnected) {
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        console.warn('[ChangeStream] Not connected, cannot subscribe');
+        return false;
+      }
+    }
+
+    const key = `${database}/${collection}`;
+
+    // Check if already subscribed
+    if (this.subscriptions.has(`mongo:${key}`)) {
+      return true;
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('subscribeMongo');
+      const response = await request.fire({ database, collection });
+
+      if (response.success) {
+        this.subscriptions.set(`mongo:${key}`, {
+          type: 'mongo',
+          key,
+          subscriptionId: response.subscriptionId,
+        });
+        console.log(`[ChangeStream] Subscribed to MongoDB ${key}`);
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.error(`[ChangeStream] Failed to subscribe to MongoDB ${key}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * Unsubscribe from changes in a MongoDB collection
+   */
+  public async unsubscribeFromCollection(database: string, collection: string): Promise<boolean> {
+    if (!this.typedSocket || !this.isConnected) {
+      return false;
+    }
+
+    const key = `${database}/${collection}`;
+    const subKey = `mongo:${key}`;
+
+    if (!this.subscriptions.has(subKey)) {
+      return true;
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('unsubscribeMongo');
+      const response = await request.fire({ database, collection });
+
+      if (response.success) {
+        this.subscriptions.delete(subKey);
+        console.log(`[ChangeStream] Unsubscribed from MongoDB ${key}`);
+      }
+
+      return response.success;
+    } catch (error) {
+      console.error(`[ChangeStream] Failed to unsubscribe from MongoDB ${key}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * Check if subscribed to a MongoDB collection
+   */
+  public isSubscribedToCollection(database: string, collection: string): boolean {
+    return this.subscriptions.has(`mongo:${database}/${collection}`);
+  }
+
+  // ===========================================
+  // S3 Subscriptions
+  // ===========================================
+
+  /**
+   * Subscribe to changes in an S3 bucket/prefix
+   */
+  public async subscribeToBucket(bucket: string, prefix?: string): Promise<boolean> {
+    if (!this.typedSocket || !this.isConnected) {
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        console.warn('[ChangeStream] Not connected, cannot subscribe');
+        return false;
+      }
+    }
+
+    const key = prefix ? `${bucket}/${prefix}` : bucket;
+
+    // Check if already subscribed
+    if (this.subscriptions.has(`s3:${key}`)) {
+      return true;
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('subscribeS3');
+      const response = await request.fire({ bucket, prefix });
+
+      if (response.success) {
+        this.subscriptions.set(`s3:${key}`, {
+          type: 's3',
+          key,
+          subscriptionId: response.subscriptionId,
+        });
+        console.log(`[ChangeStream] Subscribed to S3 ${key}`);
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.error(`[ChangeStream] Failed to subscribe to S3 ${key}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * Unsubscribe from changes in an S3 bucket/prefix
+   */
+  public async unsubscribeFromBucket(bucket: string, prefix?: string): Promise<boolean> {
+    if (!this.typedSocket || !this.isConnected) {
+      return false;
+    }
+
+    const key = prefix ? `${bucket}/${prefix}` : bucket;
+    const subKey = `s3:${key}`;
+
+    if (!this.subscriptions.has(subKey)) {
+      return true;
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('unsubscribeS3');
+      const response = await request.fire({ bucket, prefix });
+
+      if (response.success) {
+        this.subscriptions.delete(subKey);
+        console.log(`[ChangeStream] Unsubscribed from S3 ${key}`);
+      }
+
+      return response.success;
+    } catch (error) {
+      console.error(`[ChangeStream] Failed to unsubscribe from S3 ${key}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * Check if subscribed to an S3 bucket/prefix
+   */
+  public isSubscribedToBucket(bucket: string, prefix?: string): boolean {
+    const key = prefix ? `${bucket}/${prefix}` : bucket;
+    return this.subscriptions.has(`s3:${key}`);
+  }
+
+  // ===========================================
+  // Activity Stream Subscriptions
+  // ===========================================
+
+  /**
+   * Subscribe to the activity stream
+   */
+  public async subscribeToActivity(): Promise<boolean> {
+    if (!this.typedSocket || !this.isConnected) {
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        console.warn('[ChangeStream] Not connected, cannot subscribe');
+        return false;
+      }
+    }
+
+    // Check if already subscribed
+    if (this.subscriptions.has('activity:activity')) {
+      return true;
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('subscribeActivity');
+      const response = await request.fire({});
+
+      if (response.success) {
+        this.subscriptions.set('activity:activity', {
+          type: 'activity',
+          key: 'activity',
+          subscriptionId: response.subscriptionId,
+        });
+        console.log('[ChangeStream] Subscribed to activity stream');
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.error('[ChangeStream] Failed to subscribe to activity stream:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Unsubscribe from the activity stream
+   */
+  public async unsubscribeFromActivity(): Promise<boolean> {
+    if (!this.typedSocket || !this.isConnected) {
+      return false;
+    }
+
+    if (!this.subscriptions.has('activity:activity')) {
+      return true;
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('unsubscribeActivity');
+      const response = await request.fire({});
+
+      if (response.success) {
+        this.subscriptions.delete('activity:activity');
+        console.log('[ChangeStream] Unsubscribed from activity stream');
+      }
+
+      return response.success;
+    } catch (error) {
+      console.error('[ChangeStream] Failed to unsubscribe from activity stream:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Get recent activity events
+   */
+  public async getRecentActivity(limit: number = 100): Promise<IActivityEvent[]> {
+    if (!this.typedSocket || !this.isConnected) {
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        return [];
+      }
+    }
+
+    try {
+      const request = this.typedSocket.createTypedRequest<any>('getRecentActivity');
+      const response = await request.fire({ limit });
+      return response.events || [];
+    } catch (error) {
+      console.error('[ChangeStream] Failed to get recent activity:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Check if subscribed to activity stream
+   */
+  public isSubscribedToActivity(): boolean {
+    return this.subscriptions.has('activity:activity');
+  }
+
+  /**
+   * Get buffered activity events (captured regardless of UI subscriber)
+   */
+  public getBufferedActivity(): IActivityEvent[] {
+    return [...this.activityBuffer];
+  }
+
+  // ===========================================
+  // Observables for UI Components
+  // ===========================================
+
+  /**
+   * Get MongoDB changes as an Observable
+   */
+  public getMongoChanges(): plugins.smartrx.rxjs.Observable<IMongoChangeEvent> {
+    return this.mongoChanges$.asObservable();
+  }
+
+  /**
+   * Get S3 changes as an Observable
+   */
+  public getStorageChanges(): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.asObservable();
+  }
+
+  /**
+   * Get activity events as an Observable
+   */
+  public getActivityStream(): plugins.smartrx.rxjs.Observable<IActivityEvent> {
+    return this.activityEvents$.asObservable();
+  }
+
+  /**
+   * Get filtered MongoDB changes for a specific collection
+   */
+  public getCollectionChanges(database: string, collection: string): plugins.smartrx.rxjs.Observable<IMongoChangeEvent> {
+    return this.mongoChanges$.pipe(
+      plugins.smartrx.rxjs.ops.filter(
+        (event) => event.database === database && event.collection === collection
+      )
+    );
+  }
+
+  /**
+   * Get filtered S3 changes for a specific bucket/prefix
+   */
+  public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.pipe(
+      plugins.smartrx.rxjs.ops.filter((event) => {
+        if (event.bucket !== bucket) return false;
+        if (prefix && !event.key.startsWith(prefix)) return false;
+        return true;
+      })
+    );
+  }
+}

ts_web/services/index.ts

@@ -1,4 +1,8 @@
 export * from './api.service.js';
+export * from './changestream.service.js';
+
 import { ApiService } from './api.service.js';
+import { ChangeStreamService } from './changestream.service.js';
 
 export const apiService = new ApiService();
+export const changeStreamService = new ChangeStreamService();

ts_web/utilities/index.ts

@@ -1 +1,2 @@
 export * from './formatters.js';
+export * from './move-validator.js';

ts_web/utilities/move-validator.ts

@@ -0,0 +1,47 @@
+/**
+ * Move validation utilities for S3 objects
+ */
+
+export interface IMoveValidation {
+  valid: boolean;
+  error?: string;
+}
+
+/**
+ * Validates if a move operation is allowed
+ * @param sourceKey The source object key (file or folder with trailing /)
+ * @param destPrefix The destination prefix (folder)
+ * @returns Validation result with error message if invalid
+ */
+export function validateMove(sourceKey: string, destPrefix: string): IMoveValidation {
+  // Check: Moving folder into itself or a subfolder of itself
+  if (sourceKey.endsWith('/')) {
+    // It's a folder - check if destPrefix starts with sourceKey
+    if (destPrefix.startsWith(sourceKey)) {
+      return { valid: false, error: 'Cannot move a folder into itself' };
+    }
+  }
+
+  // Check: Source and dest are the same location
+  const sourceParent = getParentPrefix(sourceKey);
+  if (sourceParent === destPrefix) {
+    return { valid: false, error: 'Item is already in this location' };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * Gets the parent prefix (directory) of a given key
+ * @param key The object key (file or folder)
+ * @returns The parent prefix
+ */
+export function getParentPrefix(key: string): string {
+  // "folder1/folder2/file.txt" -> "folder1/folder2/"
+  // "folder1/folder2/" -> "folder1/"
+  // "file.txt" -> ""
+  // "folder/" -> ""
+  const trimmed = key.endsWith('/') ? key.slice(0, -1) : key;
+  const lastSlash = trimmed.lastIndexOf('/');
+  return lastSlash >= 0 ? trimmed.substring(0, lastSlash + 1) : '';
+}

tsconfig.json

@@ -4,9 +4,7 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "verbatimModuleSyntax": true,
+    "verbatimModuleSyntax": true
-    "baseUrl": ".",
-    "paths": {}
   },
   "exclude": ["dist_*/**/*.d.ts"]
 }