v1.12.2

.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

.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": ["/npmextra.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,6 +1,127 @@
 # Changelog
 
+## 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.
@@ -11,6 +132,7 @@ add real-time streaming (MongoDB change streams & S3 bucket watchers) with WebSo
 - 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()
@@ -23,6 +145,7 @@ add database overview panel, collection overview and resizable panels; show/hide
 - 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.
@@ -33,6 +156,7 @@ add S3 create file/folder dialogs and in-place text editor; export mongodb plugi
 - 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)
@@ -42,24 +166,28 @@ add S3 deletePrefix and getObjectUrl endpoints and add context menus in UI for S
 - 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)
@@ -71,6 +199,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
@@ -98,4 +227,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)

npmextra.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@git.zone/tsview",
-  "version": "1.5.0",
+  "version": "1.12.2",
   "private": false,
   "description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
   "main": "dist_ts/index.js",
@@ -13,41 +13,42 @@
     "build": "pnpm run bundle && tsbuild --allowimplicitany",
     "bundle": "tsbundle",
     "startTs": "node cli.ts.js",
-    "watch": "tswatch"
+    "watch": "tswatch",
+    "buildDocs": "tsdoc"
   },
   "bin": {
     "tsview": "cli.js"
   },
   "devDependencies": {
-    "@api.global/typedsocket": "^4.1.0",
-    "@git.zone/tsbuild": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
+    "@api.global/typedsocket": "^4.1.2",
+    "@git.zone/tsbuild": "^4.3.0",
+    "@git.zone/tsbundle": "^2.9.1",
     "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.7",
-    "@git.zone/tswatch": "3.0.1",
+    "@git.zone/tstest": "^3.3.2",
+    "@git.zone/tswatch": "^3.3.0",
     "@push.rocks/smartrx": "^3.0.10",
-    "@types/node": "^25.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",
-    "@aws-sdk/client-s3": "^3.975.0",
-    "@design.estate/dees-catalog": "^3.37.1",
-    "@design.estate/dees-element": "^2.1.5",
+    "@api.global/typedserver": "^8.4.2",
+    "@aws-sdk/client-s3": "^3.1009.0",
+    "@design.estate/dees-catalog": "^3.48.5",
+    "@design.estate/dees-element": "^2.2.3",
     "@push.rocks/early": "^4.0.4",
-    "@push.rocks/npmextra": "^5.3.3",
-    "@push.rocks/smartbucket": "^4.4.1",
+    "@push.rocks/smartconfig": "^6.0.0",
+    "@push.rocks/smartbucket": "^4.5.1",
     "@push.rocks/smartcli": "^4.0.20",
-    "@push.rocks/smartdata": "^7.0.15",
+    "@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",
-    "mongodb": "^7.0.0"
+    "mongodb": "^7.1.0"
   },
   "files": [
     "ts/**/*",
@@ -67,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<
@@ -57,27 +64,32 @@ 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 }
@@ -94,6 +106,29 @@ 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.
 
 ## Issue Reporting and Security
 
@@ -10,43 +10,56 @@ 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 ✨
+## Features
 
-### 🗄️ 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
+### S3 Storage Browser
 
-### 🍃 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
+Powered by the `dees-storage-browser` component from `@design.estate/dees-catalog`:
 
-### 🎨 Modern Web UI
-- 🌙 Dark theme designed for developer comfort
-- 📱 Responsive layout with resizable panels
-- ⌨️ Keyboard-friendly navigation
-- 🔌 Zero external runtime dependencies in the browser
+- **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 files, 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 in the browser with change tracking
+- **Smart Content Type Detection** — Automatic recognition for 20+ file types
+- **Breadcrumb Navigation** — Clickable path traversal
 
-## Quick Start 🚀
+### 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
+
+## Quick Start
 
 ### 1. Configure Your Connection
 
@@ -70,7 +83,7 @@ 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 will automatically open to the viewer interface.
 
 ## 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({
   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({
   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 `npmextra.json`
 
-### S3 Configuration
-| Variable | Description |
-|----------|-------------|
-| `S3_ENDPOINT` | S3 server hostname |
-| `S3_PORT` | S3 server port (optional) |
-| `S3_ACCESSKEY` | Access key ID |
-| `S3_SECRETKEY` | Secret access key |
-| `S3_USESSL` | Use HTTPS (`true`/`false`) |
+```json
+{
+  "@git.zone/tsview": {
+    "port": 3015,
+    "killIfBusy": true,
+    "openBrowser": false
+  }
+}
+```
 
-### MongoDB Configuration
-| Variable | Description |
-|----------|-------------|
-| `MONGODB_URL` | Full MongoDB connection string |
-| `MONGODB_NAME` | Default database name |
+| Option        | Type      | Default | Description                                  |
+| ------------- | --------- | ------- | -------------------------------------------- |
+| `port`        | `number`  | auto    | Fixed port (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          |
 
-Or use individual MongoDB variables:
-| Variable | Description |
-|----------|-------------|
-| `MONGODB_HOST` | MongoDB hostname |
-| `MONGODB_PORT` | MongoDB port |
-| `MONGODB_USER` | Username |
-| `MONGODB_PASS` | Password |
+**Port priority:** CLI `--port` flag → `npmextra.json` → auto-detect
+
+### Environment Variables (`.nogit/env.json`)
+
+#### S3
+
+| 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 |
-|----------|--------|
-| **MinIO** | ✅ Perfect for local development |
-| **AWS S3** | ✅ Amazon's object storage |
-| **DigitalOcean Spaces** | ✅ Simple object storage |
-| **Backblaze B2** | ✅ S3-compatible API |
-| **Cloudflare R2** | ✅ Zero egress fees |
-| **Wasabi** | ✅ Hot cloud storage |
-| **Self-hosted** | ✅ Any S3-compatible server |
+| Provider                | Status                     |
+| ----------------------- | -------------------------- |
+| **MinIO**               | Perfect for local dev      |
+| **AWS S3**              | Amazon's object storage    |
+| **DigitalOcean Spaces** | Simple object storage      |
+| **Backblaze B2**        | S3-compatible API          |
+| **Cloudflare R2**       | Zero egress fees           |
+| **Wasabi**              | Hot cloud storage          |
+| **Self-hosted**         | Any S3-compatible server   |
 
 ## Supported File Types for Preview
 
-| Category | Extensions |
-|----------|------------|
-| **Images** | `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg` |
-| **Text** | `.txt`, `.md`, `.log`, `.sh`, `.env` |
-| **Code** | `.json`, `.js`, `.ts`, `.tsx`, `.jsx`, `.html`, `.css` |
-| **Data** | `.csv`, `.xml`, `.yaml`, `.yml` |
-| **Documents** | `.pdf` |
+| Category      | Extensions                                             |
+| ------------- | ------------------------------------------------------ |
+| **Images**    | `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`       |
+| **Text**      | `.txt`, `.md`, `.log`, `.sh`, `.env`                   |
+| **Code**      | `.json`, `.js`, `.ts`, `.tsx`, `.jsx`, `.html`, `.css` |
+| **Data**      | `.csv`, `.xml`, `.yaml`, `.yml`                        |
+| **Documents** | `.pdf`                                                 |
+
+## Architecture
+
+```
+tsview/
+├── ts/                           # Backend
+│   ├── 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
+│   ├── 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
+└── cli.ts.js                     # CLI entry point
+```
+
+### 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,29 +285,9 @@ 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.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 

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
-  viewer.setS3Config({
+  // Set storage config
+  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.5.0',
+  version: '1.12.2',
   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 () => {
@@ -122,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);
@@ -140,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);
@@ -158,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);
@@ -176,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);
@@ -267,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);
@@ -294,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,
@@ -319,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
@@ -465,4 +465,131 @@ export async function registerS3Handlers(
       }
     )
   );
+
+  // 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 {
-    this.s3Config = config;
+  public setStorageConfig(config: interfaces.IStorageConfig): void {
+    this.storageConfig = config;
   }
 
   /**
@@ -83,8 +83,8 @@ export class TsViewConfig {
   /**
    * Get S3 configuration
    */
-  public getS3Config(): interfaces.IS3Config | null {
-    return this.s3Config;
+  public getStorageConfig(): interfaces.IStorageConfig | null {
+    return this.storageConfig;
   }
 
   /**
@@ -97,8 +97,8 @@ export class TsViewConfig {
   /**
    * Check if S3 is configured
    */
-  public hasS3(): boolean {
-    return this.s3Config !== null && !!this.s3Config.endpoint && !!this.s3Config.accessKey;
+  public hasStorage(): boolean {
+    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[];
   };
 }
@@ -213,6 +213,39 @@ export interface IReq_DeletePrefix extends plugins.typedrequestInterfaces.implem
   };
 }
 
+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

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';
@@ -21,7 +21,7 @@ import * as smartrx from '@push.rocks/smartrx';
 
 export {
   early,
-  npmextra,
+  smartconfig,
   smartbucket,
   smartcli,
   smartdata,

ts/server/classes.viewserver.ts

@@ -35,18 +35,18 @@ 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);
     }
 
-    // Initialize ChangeStreamManager for real-time updates
-    this.changeStreamManager = new ChangeStreamManager(this.tsview);
-
     // Register streaming handlers
     await this.registerStreamingHandlers();
 
@@ -107,9 +107,9 @@ export class ViewServer {
       )
     );
 
-    // Subscribe to S3 bucket changes
+    // Subscribe to storage bucket changes
     typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeS3>(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeStorage>(
         'subscribeS3',
         async (reqData, context) => {
           const connectionId = this.getConnectionId(context);
@@ -127,9 +127,9 @@ export class ViewServer {
       )
     );
 
-    // Unsubscribe from S3 bucket changes
+    // Unsubscribe from storage bucket changes
     typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeS3>(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeStorage>(
         'unsubscribeS3',
         async (reqData, context) => {
           const connectionId = this.getConnectionId(context);
@@ -192,18 +192,16 @@ export class ViewServer {
   }
 
   /**
-   * Extract connection ID from request context
+   * Extract connection ID from request context.
+   * SmartServe attaches the WebSocket peer to `localData.peer` on each request.
    */
   private getConnectionId(context: any): string | null {
-    // Try to get connection ID from WebSocket context
-    if (context?.socketConnection?.socketId) {
-      return context.socketConnection.socketId;
+    // 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;
     }
-    if (context?.socketConnection?.alias) {
-      return context.socketConnection.alias;
-    }
-    // Fallback: generate a unique ID for HTTP requests
-    // Note: Real-time streaming requires WebSocket connection
+    // HTTP requests don't have a peer — real-time streaming requires WebSocket.
     return null;
   }
 

ts/streaming/classes.changestream-manager.ts

@@ -1,7 +1,7 @@
 import * as plugins from '../plugins.js';
 import type { TsView } from '../tsview.classes.tsview.js';
 import type * as interfaces from './interfaces.streaming.js';
-import type { IS3ChangeEvent } from '@push.rocks/smartbucket';
+import type { IStorageChangeEvent } from './interfaces.streaming.js';
 
 /**
  * Subscription entry tracking a client's subscription to a resource
@@ -21,19 +21,19 @@ interface IMongoWatcherEntry {
 }
 
 /**
- * S3 watcher entry
+ * Storage watcher entry
  */
-interface IS3WatcherEntry {
+interface IStorageWatcherEntry {
   watcher: plugins.smartbucket.BucketWatcher;
   subscriptions: Map<string, ISubscriptionEntry>; // connectionId -> subscription
 }
 
 /**
- * ChangeStreamManager manages real-time change streaming for both MongoDB and S3.
+ * 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 S3 change detection
+ * - 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
@@ -45,8 +45,8 @@ export class ChangeStreamManager {
   // MongoDB watchers: "db/collection" -> watcher entry
   private mongoWatchers: Map<string, IMongoWatcherEntry> = new Map();
 
-  // S3 watchers: "bucket/prefix" -> watcher entry
-  private s3Watchers: Map<string, IS3WatcherEntry> = 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();
@@ -55,6 +55,11 @@ export class ChangeStreamManager {
   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;
 
@@ -84,9 +89,9 @@ export class ChangeStreamManager {
   }
 
   /**
-   * Get the S3 key for a bucket/prefix pair
+   * Get the storage key for a bucket/prefix pair
    */
-  private getS3Key(bucket: string, prefix?: string): string {
+  private getStorageKey(bucket: string, prefix?: string): string {
     return prefix ? `${bucket}/${prefix}` : bucket;
   }
 
@@ -218,8 +223,11 @@ export class ChangeStreamManager {
       timestamp: new Date().toISOString(),
     };
 
-    // Add to activity buffer
-    this.addToActivityBuffer('mongodb', event);
+    // 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);
@@ -239,7 +247,7 @@ export class ChangeStreamManager {
       try {
         // Find the connection and push the event
         const connection = await this.typedSocket.findTargetConnection(async (conn: any) => {
-          return conn.alias === connectionId || conn.socketId === connectionId;
+          return conn.peer?.id === connectionId;
         });
 
         if (connection) {
@@ -272,24 +280,24 @@ export class ChangeStreamManager {
   }
 
   // ===========================================
-  // S3 Change Watching
+  // Storage Change Watching
   // ===========================================
 
   /**
-   * Subscribe a client to S3 bucket/prefix changes
+   * 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.getS3Key(bucket, prefix);
+    const key = this.getStorageKey(bucket, prefix);
 
-    let entry = this.s3Watchers.get(key);
+    let entry = this.storageWatchers.get(key);
 
     // Create watcher if it doesn't exist
     if (!entry) {
-      const watcher = await this.createS3Watcher(bucket, prefix);
+      const watcher = await this.createStorageWatcher(bucket, prefix);
       if (!watcher) {
         return { success: false, subscriptionId: '' };
       }
@@ -298,7 +306,7 @@ export class ChangeStreamManager {
         watcher,
         subscriptions: new Map(),
       };
-      this.s3Watchers.set(key, entry);
+      this.storageWatchers.set(key, entry);
     }
 
     // Add subscription
@@ -309,47 +317,47 @@ export class ChangeStreamManager {
       createdAt: new Date(),
     });
 
-    console.log(`[ChangeStream] S3 subscription added: ${key} for connection ${connectionId}`);
+    console.log(`[ChangeStream] Storage subscription added: ${key} for connection ${connectionId}`);
     return { success: true, subscriptionId };
   }
 
   /**
-   * Unsubscribe a client from S3 bucket/prefix changes
+   * Unsubscribe a client from storage bucket/prefix changes
    */
   public async unsubscribeFromS3(
     connectionId: string,
     bucket: string,
     prefix?: string
   ): Promise<boolean> {
-    const key = this.getS3Key(bucket, prefix);
-    const entry = this.s3Watchers.get(key);
+    const key = this.getStorageKey(bucket, prefix);
+    const entry = this.storageWatchers.get(key);
 
     if (!entry) {
       return false;
     }
 
     entry.subscriptions.delete(connectionId);
-    console.log(`[ChangeStream] S3 subscription removed: ${key} for connection ${connectionId}`);
+    console.log(`[ChangeStream] Storage subscription removed: ${key} for connection ${connectionId}`);
 
     // Close watcher if no more subscribers
     if (entry.subscriptions.size === 0) {
-      await this.closeS3Watcher(key);
+      await this.closeStorageWatcher(key);
     }
 
     return true;
   }
 
   /**
-   * Create an S3 bucket watcher
+   * Create a storage bucket watcher
    */
-  private async createS3Watcher(
+  private async createStorageWatcher(
     bucket: string,
     prefix?: string
   ): Promise<plugins.smartbucket.BucketWatcher | null> {
     try {
       const smartbucket = await this.tsview.getSmartBucket();
       if (!smartbucket) {
-        console.error('[ChangeStream] S3 not configured');
+        console.error('[ChangeStream] Storage not configured');
         return null;
       }
 
@@ -363,10 +371,10 @@ export class ChangeStreamManager {
       });
 
       // Subscribe to change events
-      watcher.changeSubject.subscribe((eventOrEvents: IS3ChangeEvent | IS3ChangeEvent[]) => {
+      watcher.changeSubject.subscribe((eventOrEvents: IStorageChangeEvent | IStorageChangeEvent[]) => {
         const events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
         for (const event of events) {
-          this.handleS3Change(bucket, prefix, event);
+          this.handleStorageChange(bucket, prefix, event);
         }
       });
 
@@ -374,72 +382,75 @@ export class ChangeStreamManager {
       await watcher.start();
       await watcher.readyDeferred.promise;
 
-      console.log(`[ChangeStream] S3 watcher created for ${bucket}${prefix ? '/' + prefix : ''}`);
+      console.log(`[ChangeStream] Storage watcher created for ${bucket}${prefix ? '/' + prefix : ''}`);
       return watcher;
     } catch (error) {
-      console.error(`[ChangeStream] Failed to create S3 watcher for ${bucket}:`, error);
+      console.error(`[ChangeStream] Failed to create storage watcher for ${bucket}:`, error);
       return null;
     }
   }
 
   /**
-   * Handle an S3 change event
+   * Handle a storage change event
    */
-  private handleS3Change(bucket: string, prefix: string | undefined, event: IS3ChangeEvent): void {
-    const key = this.getS3Key(bucket, prefix);
-    const entry = this.s3Watchers.get(key);
+  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;
 
-    // Add to activity buffer
-    this.addToActivityBuffer('s3', event);
+    // 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.pushS3ChangeToClients(key, event);
+    this.pushStorageChangeToClients(key, event);
   }
 
   /**
-   * Push S3 change to subscribed clients
+   * Push storage change to subscribed clients
    */
-  private async pushS3ChangeToClients(
+  private async pushStorageChangeToClients(
     key: string,
-    event: IS3ChangeEvent
+    event: IStorageChangeEvent
   ): Promise<void> {
-    const entry = this.s3Watchers.get(key);
+    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.alias === connectionId || conn.socketId === connectionId;
+          return conn.peer?.id === connectionId;
         });
 
         if (connection) {
-          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushS3Change>(
+          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushStorageChange>(
             'pushS3Change',
             connection
           );
           await request.fire({ event });
         }
       } catch (error) {
-        console.error(`[ChangeStream] Failed to push S3 change to ${connectionId}:`, error);
+        console.error(`[ChangeStream] Failed to push storage change to ${connectionId}:`, error);
       }
     }
   }
 
   /**
-   * Close an S3 bucket watcher
+   * Close a storage bucket watcher
    */
-  private async closeS3Watcher(key: string): Promise<void> {
-    const entry = this.s3Watchers.get(key);
+  private async closeStorageWatcher(key: string): Promise<void> {
+    const entry = this.storageWatchers.get(key);
     if (!entry) return;
 
     try {
       await entry.watcher.stop();
-      this.s3Watchers.delete(key);
-      console.log(`[ChangeStream] S3 watcher closed for ${key}`);
+      this.storageWatchers.delete(key);
+      console.log(`[ChangeStream] Storage watcher closed for ${key}`);
     } catch (error) {
-      console.error(`[ChangeStream] Error closing S3 watcher for ${key}:`, error);
+      console.error(`[ChangeStream] Error closing storage watcher for ${key}:`, error);
     }
   }
 
@@ -460,6 +471,12 @@ export class ChangeStreamManager {
     });
 
     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 };
   }
 
@@ -470,6 +487,11 @@ export class ChangeStreamManager {
     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;
   }
@@ -482,15 +504,22 @@ export class ChangeStreamManager {
     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' | 's3',
-    event: interfaces.IMongoChangeEvent | IS3ChangeEvent
+    source: 'mongodb' | 'storage',
+    event: interfaces.IMongoChangeEvent | IStorageChangeEvent
   ): void {
     const activityEvent: interfaces.IActivityEvent = {
-      id: `evt_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      id: `evt_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`,
       source,
       event,
       timestamp: new Date().toISOString(),
@@ -516,7 +545,7 @@ export class ChangeStreamManager {
     for (const [connectionId, _sub] of this.activitySubscribers) {
       try {
         const connection = await this.typedSocket.findTargetConnection(async (conn: any) => {
-          return conn.alias === connectionId || conn.socketId === connectionId;
+          return conn.peer?.id === connectionId;
         });
 
         if (connection) {
@@ -532,6 +561,154 @@ export class ChangeStreamManager {
     }
   }
 
+  // ===========================================
+  // 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
   // ===========================================
@@ -552,18 +729,23 @@ export class ChangeStreamManager {
       }
     }
 
-    // Clean up S3 subscriptions
-    for (const [key, entry] of this.s3Watchers) {
+    // 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.closeS3Watcher(key);
+          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();
+    }
   }
 
   /**
@@ -572,14 +754,17 @@ export class ChangeStreamManager {
   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 S3 watchers
-    for (const key of this.s3Watchers.keys()) {
-      await this.closeS3Watcher(key);
+    // Close all storage watchers
+    for (const key of this.storageWatchers.keys()) {
+      await this.closeStorageWatcher(key);
     }
 
     // Clear activity buffer and subscribers

ts/streaming/interfaces.streaming.ts

@@ -1,7 +1,8 @@
 import type * as plugins from '../plugins.js';
 
-// Re-export S3 change event from smartbucket
-export type { IS3ChangeEvent } from '@push.rocks/smartbucket';
+// Re-export storage change event from smartbucket
+import type { IStorageChangeEvent } from '@push.rocks/smartbucket';
+export type { IStorageChangeEvent };
 
 /**
  * MongoDB change event - wraps smartdata watcher output
@@ -24,8 +25,8 @@ export interface IMongoChangeEvent {
  */
 export interface IActivityEvent {
   id: string;
-  source: 'mongodb' | 's3';
-  event: IMongoChangeEvent | import('@push.rocks/smartbucket').IS3ChangeEvent;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
   timestamp: string;
 }
 
@@ -69,11 +70,11 @@ export interface IReq_UnsubscribeMongo extends plugins.typedrequestInterfaces.im
 }
 
 /**
- * Subscribe to S3 bucket/prefix changes
+ * Subscribe to storage bucket/prefix changes
  */
-export interface IReq_SubscribeS3 extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_SubscribeStorage extends plugins.typedrequestInterfaces.implementsTR<
   plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_SubscribeS3
+  IReq_SubscribeStorage
 > {
   method: 'subscribeS3';
   request: {
@@ -87,11 +88,11 @@ export interface IReq_SubscribeS3 extends plugins.typedrequestInterfaces.impleme
 }
 
 /**
- * Unsubscribe from S3 bucket/prefix changes
+ * Unsubscribe from storage bucket/prefix changes
  */
-export interface IReq_UnsubscribeS3 extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_UnsubscribeStorage extends plugins.typedrequestInterfaces.implementsTR<
   plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_UnsubscribeS3
+  IReq_UnsubscribeStorage
 > {
   method: 'unsubscribeS3';
   request: {
@@ -104,7 +105,7 @@ export interface IReq_UnsubscribeS3 extends plugins.typedrequestInterfaces.imple
 }
 
 /**
- * Subscribe to activity stream (all changes from MongoDB and S3)
+ * Subscribe to activity stream (all changes from MongoDB and storage)
  */
 export interface IReq_SubscribeActivity extends plugins.typedrequestInterfaces.implementsTR<
   plugins.typedrequestInterfaces.ITypedRequest,
@@ -169,15 +170,15 @@ export interface IReq_PushMongoChange extends plugins.typedrequestInterfaces.imp
 }
 
 /**
- * Server pushes S3 change to client
+ * Server pushes storage change to client
  */
-export interface IReq_PushS3Change extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_PushStorageChange extends plugins.typedrequestInterfaces.implementsTR<
   plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_PushS3Change
+  IReq_PushStorageChange
 > {
   method: 'pushS3Change';
   request: {
-    event: import('@push.rocks/smartbucket').IS3ChangeEvent;
+    event: IStorageChangeEvent;
   };
   response: {
     received: boolean;
@@ -206,7 +207,7 @@ export interface IReq_PushActivityEvent extends plugins.typedrequestInterfaces.i
 export interface ISubscriptionTag extends plugins.typedrequestInterfaces.ITag {
   name: 'subscription';
   payload: {
-    type: 'mongo' | 's3' | 'activity';
+    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 {
-    this.config.setS3Config(config);
+  public setStorageConfig(config: interfaces.IStorageConfig): void {
+    this.config.setStorageConfig(config);
   }
 
   /**
@@ -52,17 +52,17 @@ export class TsView {
       return this.smartbucketInstance;
     }
 
-    const s3Config = this.config.getS3Config();
-    if (!s3Config) {
+    const storageConfig = this.config.getStorageConfig();
+    if (!storageConfig) {
       return null;
     }
 
     this.smartbucketInstance = new plugins.smartbucket.SmartBucket({
-      endpoint: s3Config.endpoint,
-      port: s3Config.port,
-      accessKey: s3Config.accessKey,
-      accessSecret: s3Config.accessSecret,
-      useSsl: s3Config.useSsl ?? true,
+      endpoint: storageConfig.endpoint,
+      port: storageConfig.port,
+      accessKey: storageConfig.accessKey,
+      accessSecret: storageConfig.accessSecret,
+      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 {
-    const npmextra = new plugins.npmextra.Npmextra(cwd || process.cwd());
-    const config = npmextra.dataFor<interfaces.INpmextraConfig>('@git.zone/tsview', {});
+  private loadSmartconfigConfig(cwd?: string): interfaces.ISmartconfigConfig {
+    const smartconfigInstance = new plugins.smartconfig.Smartconfig(cwd || process.cwd());
+    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.5.0',
+  version: '1.12.2',
   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,12 +1,6 @@
 // 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';

ts_web/elements/tsview-activity-stream.ts

@@ -1,10 +1,11 @@
 import * as plugins from '../plugins.js';
-import { changeStreamService, type IActivityEvent, type IMongoChangeEvent, type IS3ChangeEvent } from '../services/index.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' | 's3';
+type TFilterMode = 'all' | 'mongodb' | 'storage';
 
 @customElement('tsview-activity-stream')
 export class TsviewActivityStream extends DeesElement {
@@ -23,8 +24,12 @@ export class TsviewActivityStream extends DeesElement {
   @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,
@@ -159,6 +164,15 @@ export class TsviewActivityStream extends DeesElement {
         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;
@@ -192,7 +206,6 @@ export class TsviewActivityStream extends DeesElement {
       .event-header {
         display: flex;
         align-items: center;
-        justify-content: space-between;
         margin-bottom: 4px;
       }
 
@@ -202,11 +215,6 @@ export class TsviewActivityStream extends DeesElement {
         color: #e0e0e0;
       }
 
-      .event-time {
-        font-size: 11px;
-        color: #666;
-      }
-
       .event-details {
         font-size: 12px;
         color: #888;
@@ -285,50 +293,66 @@ export class TsviewActivityStream extends DeesElement {
 
   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 {
-      // Connect to WebSocket if not connected
       await changeStreamService.connect();
-
-      // Subscribe to connection status
-      this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
-        this.isConnected = status === 'connected';
-      });
-
-      // Subscribe to activity stream
-      await changeStreamService.subscribeToActivity();
-
-      // Load recent events
-      const recentEvents = await changeStreamService.getRecentActivity(100);
-      this.events = recentEvents;
-
-      // Subscribe to new events
-      this.subscription = changeStreamService.getActivityStream().subscribe((event) => {
-        this.events = [...this.events, event].slice(-500); // Keep last 500 events
-
-        // Auto-scroll if enabled
-        if (this.autoScroll) {
-          this.scrollToBottom();
-        }
-      });
-
-      this.isConnected = true;
+      // 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;
+      }
     }
 
-    this.isLoading = false;
+    // 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() {
@@ -340,14 +364,15 @@ export class TsviewActivityStream extends DeesElement {
       this.connectionSubscription.unsubscribe();
       this.connectionSubscription = null;
     }
-    changeStreamService.unsubscribeFromActivity();
+    // DO NOT call changeStreamService.unsubscribeFromActivity()
+    // The app-level subscription keeps the server sending events for buffering
   }
 
-  private scrollToBottom() {
+  private scrollToTop() {
     requestAnimationFrame(() => {
       const list = this.shadowRoot?.querySelector('.events-list');
       if (list) {
-        list.scrollTop = list.scrollHeight;
+        list.scrollTop = 0;
       }
     });
   }
@@ -361,10 +386,11 @@ export class TsviewActivityStream extends DeesElement {
   }
 
   private get filteredEvents(): IActivityEvent[] {
-    if (this.filterMode === 'all') {
-      return this.events;
+    let events = this.events;
+    if (this.filterMode !== 'all') {
+      events = events.filter((e) => e.source === this.filterMode);
     }
-    return this.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 {
@@ -378,11 +404,13 @@ export class TsviewActivityStream extends DeesElement {
 
   private formatRelativeTime(timestamp: string): string {
     const date = new Date(timestamp);
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
+    const diff = this.now - date.getTime();
 
-    if (diff < 60000) {
-      return 'just now';
+    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`;
@@ -399,8 +427,8 @@ export class TsviewActivityStream extends DeesElement {
       const mongoEvent = event.event as IMongoChangeEvent;
       return `${mongoEvent.database}.${mongoEvent.collection}`;
     } else {
-      const s3Event = event.event as IS3ChangeEvent;
-      return s3Event.bucket;
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.bucket;
     }
   }
 
@@ -412,8 +440,8 @@ export class TsviewActivityStream extends DeesElement {
       }
       return '';
     } else {
-      const s3Event = event.event as IS3ChangeEvent;
-      return s3Event.key;
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.key;
     }
   }
 
@@ -437,12 +465,12 @@ export class TsviewActivityStream extends DeesElement {
         })
       );
     } else {
-      const s3Event = event.event as IS3ChangeEvent;
+      const storageEvent = event.event as IStorageChangeEvent;
       this.dispatchEvent(
         new CustomEvent('navigate-to-s3', {
           detail: {
-            bucket: s3Event.bucket,
-            key: s3Event.key,
+            bucket: storageEvent.bucket,
+            key: storageEvent.key,
           },
           bubbles: true,
           composed: true,
@@ -502,8 +530,8 @@ export class TsviewActivityStream extends DeesElement {
                 MongoDB
               </button>
               <button
-                class="filter-tab ${this.filterMode === 's3' ? 'active' : ''}"
-                @click=${() => this.setFilterMode('s3')}
+                class="filter-tab ${this.filterMode === 'storage' ? 'active' : ''}"
+                @click=${() => this.setFilterMode('storage')}
               >
                 S3
               </button>
@@ -534,6 +562,9 @@ export class TsviewActivityStream extends DeesElement {
               : 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>
@@ -543,9 +574,6 @@ export class TsviewActivityStream extends DeesElement {
                             <span class="event-type ${this.getEventType(event)}">${this.getEventType(event)}</span>
                             ${this.getEventTitle(event)}
                           </div>
-                          <div class="event-time" title=${this.formatTime(event.timestamp)}>
-                            ${this.formatRelativeTime(event.timestamp)}
-                          </div>
                         </div>
                         <div class="event-details">
                           <span class="event-path">${this.getEventDetails(event)}</span>

ts_web/elements/tsview-app.ts

@@ -1,6 +1,8 @@
 import * as plugins from '../plugins.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;
@@ -421,15 +423,18 @@ export class TsviewApp extends DeesElement {
 
   async connectedCallback() {
     super.connectedCallback();
-    await this.loadData();
-    // Initialize WebSocket connection for real-time updates
+    // 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);
     }
@@ -1036,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>
       `;
     }

ts_web/elements/tsview-mongo-browser.ts

@@ -25,7 +25,7 @@ export class TsviewMongoBrowser extends DeesElement {
   private accessor stats: ICollectionStats | null = null;
 
   @state()
-  private accessor editorWidth: number = 400;
+  private accessor editorWidth: number = 700;
 
   @state()
   private accessor isResizingEditor: boolean = false;
@@ -37,6 +37,7 @@ export class TsviewMongoBrowser extends DeesElement {
   private accessor isStreamConnected: boolean = false;
 
   private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
+  private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -116,7 +117,7 @@ export class TsviewMongoBrowser extends DeesElement {
       .content {
         flex: 1;
         display: grid;
-        grid-template-columns: 1fr 4px var(--editor-width, 400px);
+        grid-template-columns: 1fr 4px var(--editor-width, 700px);
         gap: 0;
         overflow: hidden;
       }
@@ -201,12 +202,20 @@ export class TsviewMongoBrowser extends DeesElement {
   async connectedCallback() {
     super.connectedCallback();
     await this.loadStats();
-    this.subscribeToChanges();
+    // Subscription is handled by updated() when databaseName/collectionName are set.
+    // Only track connection status for UI indicator here.
+    this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
+      this.isStreamConnected = status === 'connected';
+    });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.unsubscribeFromChanges();
+    if (this.connectionSubscription) {
+      this.connectionSubscription.unsubscribe();
+      this.connectionSubscription = null;
+    }
   }
 
   updated(changedProperties: Map<string, unknown>) {
@@ -224,18 +233,16 @@ export class TsviewMongoBrowser extends DeesElement {
     if (!this.databaseName || !this.collectionName) return;
 
     try {
-      // Subscribe to collection changes
-      const success = await changeStreamService.subscribeToCollection(this.databaseName, this.collectionName);
-      this.isStreamConnected = success;
-
-      if (success) {
-        // Listen for changes
+      // Set up RxJS listener first so events aren't missed on reconnect
+      if (!this.changeSubscription) {
         this.changeSubscription = changeStreamService
           .getCollectionChanges(this.databaseName, this.collectionName)
-          .subscribe((event) => {
-            this.handleChange(event);
-          });
+          .subscribe((event) => this.handleChange(event));
       }
+
+      // Subscribe on the server side (will auto-connect if needed)
+      const success = await changeStreamService.subscribeToCollection(this.databaseName, this.collectionName);
+      this.isStreamConnected = success;
     } catch (error) {
       console.warn('[MongoBrowser] Failed to subscribe to changes:', error);
       this.isStreamConnected = false;
@@ -298,7 +305,7 @@ export class TsviewMongoBrowser extends DeesElement {
     const contentEl = this.shadowRoot?.querySelector('.content');
     if (!contentEl) return;
     const containerRect = contentEl.getBoundingClientRect();
-    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 300), 700);
+    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
     this.editorWidth = newWidth;
   };
 

ts_web/elements/tsview-s3-browser.ts

@@ -1,416 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService, changeStreamService, type IS3ChangeEvent } from '../services/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-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;
-
-  @state()
-  private accessor previewWidth: number = 350;
-
-  @state()
-  private accessor isResizingPreview: boolean = false;
-
-  @state()
-  private accessor recentChangeCount: number = 0;
-
-  @state()
-  private accessor isStreamConnected: boolean = false;
-
-  private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    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: 0;
-        overflow: hidden;
-      }
-
-      .content.has-preview {
-        grid-template-columns: 1fr 4px var(--preview-width, 350px);
-      }
-
-      .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-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;
-        margin-left: 12px;
-      }
-
-      @media (max-width: 1024px) {
-        .content,
-        .content.has-preview {
-          grid-template-columns: 1fr;
-        }
-
-        .preview-panel,
-        .resize-divider {
-          display: none;
-        }
-      }
-
-      .stream-status {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 11px;
-        color: #888;
-        margin-left: auto;
-        margin-right: 12px;
-      }
-
-      .stream-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #888;
-      }
-
-      .stream-dot.connected {
-        background: #22c55e;
-      }
-
-      .change-indicator {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 8px;
-        background: rgba(245, 158, 11, 0.2);
-        border-radius: 4px;
-        font-size: 11px;
-        color: #f59e0b;
-        margin-right: 12px;
-      }
-
-      .change-indicator.pulse {
-        animation: pulse-orange 1s ease-in-out;
-      }
-
-      @keyframes pulse-orange {
-        0% { background: rgba(245, 158, 11, 0.4); }
-        100% { background: rgba(245, 158, 11, 0.2); }
-      }
-    `,
-  ];
-
-  async connectedCallback() {
-    super.connectedCallback();
-    this.subscribeToChanges();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unsubscribeFromChanges();
-  }
-
-  private setViewType(type: TViewType) {
-    this.viewType = type;
-  }
-
-  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 = '';
-      this.recentChangeCount = 0;
-      // Re-subscribe to the new bucket
-      this.unsubscribeFromChanges();
-      this.subscribeToChanges();
-    }
-  }
-
-  private async subscribeToChanges() {
-    if (!this.bucketName) return;
-
-    try {
-      // Subscribe to bucket changes (with optional prefix)
-      const success = await changeStreamService.subscribeToBucket(this.bucketName, this.currentPrefix || undefined);
-      this.isStreamConnected = success;
-
-      if (success) {
-        // Listen for changes
-        this.changeSubscription = changeStreamService
-          .getBucketChanges(this.bucketName, this.currentPrefix || undefined)
-          .subscribe((event) => {
-            this.handleChange(event);
-          });
-      }
-    } catch (error) {
-      console.warn('[S3Browser] Failed to subscribe to changes:', error);
-      this.isStreamConnected = false;
-    }
-  }
-
-  private unsubscribeFromChanges() {
-    if (this.changeSubscription) {
-      this.changeSubscription.unsubscribe();
-      this.changeSubscription = null;
-    }
-    if (this.bucketName) {
-      changeStreamService.unsubscribeFromBucket(this.bucketName, this.currentPrefix || undefined);
-    }
-    this.isStreamConnected = false;
-  }
-
-  private handleChange(event: IS3ChangeEvent) {
-    console.log('[S3Browser] Received change:', event);
-    this.recentChangeCount++;
-
-    // Trigger refresh of child components
-    this.refreshKey++;
-  }
-
-  private startPreviewResize = (e: MouseEvent) => {
-    e.preventDefault();
-    this.isResizingPreview = true;
-    document.addEventListener('mousemove', this.handlePreviewResize);
-    document.addEventListener('mouseup', this.endPreviewResize);
-  };
-
-  private handlePreviewResize = (e: MouseEvent) => {
-    if (!this.isResizingPreview) 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), 600);
-    this.previewWidth = newWidth;
-  };
-
-  private endPreviewResize = () => {
-    this.isResizingPreview = false;
-    document.removeEventListener('mousemove', this.handlePreviewResize);
-    document.removeEventListener('mouseup', this.endPreviewResize);
-  };
-
-  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="stream-status">
-            <span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
-            ${this.isStreamConnected ? 'Live' : 'Offline'}
-          </div>
-          ${this.recentChangeCount > 0
-            ? html`
-                <div class="change-indicator pulse">
-                  ${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
-                </div>
-              `
-            : ''}
-          <div class="view-toggle">
-            <button
-              class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
-              @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' : ''}" style="--preview-width: ${this.previewWidth}px">
-          <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="resize-divider ${this.isResizingPreview ? 'active' : ''}"
-                  @mousedown=${this.startPreviewResize}
-                ></div>
-                <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,721 +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;
-const { DeesContextmenu } = plugins.deesCatalog;
-
-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;
-
-  @state()
-  private accessor showCreateDialog: boolean = false;
-
-  @state()
-  private accessor createDialogType: 'folder' | 'file' = 'folder';
-
-  @state()
-  private accessor createDialogPrefix: string = '';
-
-  @state()
-  private accessor createDialogName: string = '';
-
-  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;
-      }
-
-      .dialog-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-      }
-
-      .dialog {
-        background: #1e1e1e;
-        border-radius: 12px;
-        padding: 24px;
-        min-width: 400px;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-      }
-
-      .dialog-title {
-        font-size: 18px;
-        font-weight: 600;
-        margin-bottom: 16px;
-        color: #fff;
-      }
-
-      .dialog-location {
-        font-size: 12px;
-        color: #888;
-        margin-bottom: 12px;
-        font-family: monospace;
-      }
-
-      .dialog-input {
-        width: 100%;
-        padding: 10px 12px;
-        background: #141414;
-        border: 1px solid #333;
-        border-radius: 6px;
-        color: #fff;
-        font-size: 14px;
-        margin-bottom: 8px;
-        box-sizing: border-box;
-      }
-
-      .dialog-input:focus {
-        outline: none;
-        border-color: #e0e0e0;
-      }
-
-      .dialog-hint {
-        font-size: 11px;
-        color: #666;
-        margin-bottom: 16px;
-      }
-
-      .dialog-actions {
-        display: flex;
-        gap: 12px;
-        justify-content: flex-end;
-      }
-
-      .dialog-btn {
-        padding: 8px 16px;
-        border-radius: 6px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-
-      .dialog-btn-cancel {
-        background: transparent;
-        border: 1px solid #444;
-        color: #aaa;
-      }
-
-      .dialog-btn-cancel:hover {
-        background: rgba(255, 255, 255, 0.05);
-        color: #fff;
-      }
-
-      .dialog-btn-create {
-        background: #404040;
-        border: none;
-        color: #fff;
-      }
-
-      .dialog-btn-create:hover {
-        background: #505050;
-      }
-
-      .dialog-btn-create:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `,
-  ];
-
-  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';
-  }
-
-  private handleFolderContextMenu(event: MouseEvent, columnIndex: number, prefix: string) {
-    event.preventDefault();
-    DeesContextmenu.openContextMenuWithOptions(event, [
-      {
-        name: 'Open',
-        iconName: 'lucide:folderOpen',
-        action: async () => {
-          this.selectFolder(columnIndex, prefix);
-        },
-      },
-      {
-        name: 'Copy Path',
-        iconName: 'lucide:copy',
-        action: async () => {
-          await navigator.clipboard.writeText(prefix);
-        },
-      },
-      { divider: true },
-      {
-        name: 'New Folder Inside',
-        iconName: 'lucide:folderPlus',
-        action: async () => this.openCreateDialog('folder', prefix),
-      },
-      {
-        name: 'New File Inside',
-        iconName: 'lucide:filePlus',
-        action: async () => this.openCreateDialog('file', prefix),
-      },
-      { divider: true },
-      {
-        name: 'Delete Folder',
-        iconName: 'lucide:trash2',
-        action: async () => {
-          if (confirm(`Delete folder "${getFileName(prefix)}" and all its contents?`)) {
-            const success = await apiService.deletePrefix(this.bucketName, prefix);
-            if (success) {
-              await this.loadInitialColumn();
-            }
-          }
-        },
-      },
-    ]);
-  }
-
-  private handleFileContextMenu(event: MouseEvent, columnIndex: number, key: string) {
-    event.preventDefault();
-    DeesContextmenu.openContextMenuWithOptions(event, [
-      {
-        name: 'Preview',
-        iconName: 'lucide:eye',
-        action: async () => {
-          this.selectFile(columnIndex, key);
-        },
-      },
-      {
-        name: 'Download',
-        iconName: 'lucide:download',
-        action: async () => {
-          const url = await apiService.getObjectUrl(this.bucketName, key);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = getFileName(key);
-          link.click();
-        },
-      },
-      {
-        name: 'Copy Path',
-        iconName: 'lucide:copy',
-        action: async () => {
-          await navigator.clipboard.writeText(key);
-        },
-      },
-      { divider: true },
-      {
-        name: 'Delete',
-        iconName: 'lucide:trash2',
-        action: async () => {
-          if (confirm(`Delete file "${getFileName(key)}"?`)) {
-            const success = await apiService.deleteObject(this.bucketName, key);
-            if (success) {
-              await this.loadInitialColumn();
-            }
-          }
-        },
-      },
-    ]);
-  }
-
-  private handleEmptySpaceContextMenu(event: MouseEvent, columnIndex: number) {
-    // Only trigger if clicking on the container itself, not on items
-    if (event.target !== event.currentTarget) return;
-    event.preventDefault();
-
-    const prefix = this.columns[columnIndex].prefix;
-
-    DeesContextmenu.openContextMenuWithOptions(event, [
-      {
-        name: 'New Folder',
-        iconName: 'lucide:folderPlus',
-        action: async () => this.openCreateDialog('folder', prefix),
-      },
-      {
-        name: 'New File',
-        iconName: 'lucide:filePlus',
-        action: async () => this.openCreateDialog('file', prefix),
-      },
-    ]);
-  }
-
-  private openCreateDialog(type: 'folder' | 'file', prefix: string) {
-    this.createDialogType = type;
-    this.createDialogPrefix = prefix;
-    this.createDialogName = '';
-    this.showCreateDialog = 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 handleCreate() {
-    if (!this.createDialogName.trim()) return;
-
-    const name = this.createDialogName.trim();
-    let path: string;
-
-    if (this.createDialogType === 'folder') {
-      // Support deep paths: "a/b/c" creates nested folders
-      path = this.createDialogPrefix + name + '/.keep';
-    } else {
-      path = this.createDialogPrefix + name;
-    }
-
-    const ext = name.split('.').pop()?.toLowerCase() || '';
-    const contentType = this.createDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
-    const content = this.createDialogType === 'file' ? this.getDefaultContent(ext) : '';
-
-    const success = await apiService.putObject(
-      this.bucketName,
-      path,
-      btoa(content),
-      contentType
-    );
-
-    if (success) {
-      this.showCreateDialog = false;
-      await this.loadInitialColumn();
-    }
-  }
-
-  private renderCreateDialog() {
-    if (!this.showCreateDialog) return '';
-
-    const isFolder = this.createDialogType === '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.showCreateDialog = false}>
-        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
-          <div class="dialog-title">${title}</div>
-          <div class="dialog-location">
-            Location: ${this.bucketName}/${this.createDialogPrefix}
-          </div>
-          <input
-            type="text"
-            class="dialog-input"
-            placeholder=${placeholder}
-            .value=${this.createDialogName}
-            @input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
-            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
-          />
-          <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.showCreateDialog = false}>
-              Cancel
-            </button>
-            <button
-              class="dialog-btn dialog-btn-create"
-              ?disabled=${!this.createDialogName.trim()}
-              @click=${() => this.handleCreate()}
-            >
-              Create
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  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>
-      ${this.renderCreateDialog()}
-    `;
-  }
-
-  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" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e, index)}>
-          ${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)}
-                @contextmenu=${(e: MouseEvent) => this.handleFolderContextMenu(e, 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)}
-                @contextmenu=${(e: MouseEvent) => this.handleFileContextMenu(e, 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,600 +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;
-const { DeesContextmenu } = plugins.deesCatalog;
-
-@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 = '';
-
-  @state()
-  private accessor showCreateDialog: boolean = false;
-
-  @state()
-  private accessor createDialogType: 'folder' | 'file' = 'folder';
-
-  @state()
-  private accessor createDialogPrefix: string = '';
-
-  @state()
-  private accessor createDialogName: 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;
-      }
-
-      .dialog-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-      }
-
-      .dialog {
-        background: #1e1e1e;
-        border-radius: 12px;
-        padding: 24px;
-        min-width: 400px;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-      }
-
-      .dialog-title {
-        font-size: 18px;
-        font-weight: 600;
-        margin-bottom: 16px;
-        color: #fff;
-      }
-
-      .dialog-location {
-        font-size: 12px;
-        color: #888;
-        margin-bottom: 12px;
-        font-family: monospace;
-      }
-
-      .dialog-input {
-        width: 100%;
-        padding: 10px 12px;
-        background: #141414;
-        border: 1px solid #333;
-        border-radius: 6px;
-        color: #fff;
-        font-size: 14px;
-        margin-bottom: 8px;
-        box-sizing: border-box;
-      }
-
-      .dialog-input:focus {
-        outline: none;
-        border-color: #e0e0e0;
-      }
-
-      .dialog-hint {
-        font-size: 11px;
-        color: #666;
-        margin-bottom: 16px;
-      }
-
-      .dialog-actions {
-        display: flex;
-        gap: 12px;
-        justify-content: flex-end;
-      }
-
-      .dialog-btn {
-        padding: 8px 16px;
-        border-radius: 6px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-
-      .dialog-btn-cancel {
-        background: transparent;
-        border: 1px solid #444;
-        color: #aaa;
-      }
-
-      .dialog-btn-cancel:hover {
-        background: rgba(255, 255, 255, 0.05);
-        color: #fff;
-      }
-
-      .dialog-btn-create {
-        background: #404040;
-        border: none;
-        color: #fff;
-      }
-
-      .dialog-btn-create:hover {
-        background: #505050;
-      }
-
-      .dialog-btn-create:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `,
-  ];
-
-  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];
-  }
-
-  private handleItemContextMenu(event: MouseEvent, key: string, isFolder: boolean) {
-    event.preventDefault();
-
-    if (isFolder) {
-      DeesContextmenu.openContextMenuWithOptions(event, [
-        {
-          name: 'Open',
-          iconName: 'lucide:folderOpen',
-          action: async () => {
-            this.selectKey(key, true);
-          },
-        },
-        {
-          name: 'Copy Path',
-          iconName: 'lucide:copy',
-          action: async () => {
-            await navigator.clipboard.writeText(key);
-          },
-        },
-        { divider: true },
-        {
-          name: 'New Folder Inside',
-          iconName: 'lucide:folderPlus',
-          action: async () => this.openCreateDialog('folder', key),
-        },
-        {
-          name: 'New File Inside',
-          iconName: 'lucide:filePlus',
-          action: async () => this.openCreateDialog('file', key),
-        },
-        { divider: true },
-        {
-          name: 'Delete Folder',
-          iconName: 'lucide:trash2',
-          action: async () => {
-            if (confirm(`Delete folder "${getFileName(key)}" and all its contents?`)) {
-              const success = await apiService.deletePrefix(this.bucketName, key);
-              if (success) {
-                await this.loadObjects();
-              }
-            }
-          },
-        },
-      ]);
-    } else {
-      DeesContextmenu.openContextMenuWithOptions(event, [
-        {
-          name: 'Preview',
-          iconName: 'lucide:eye',
-          action: async () => {
-            this.selectKey(key, false);
-          },
-        },
-        {
-          name: 'Download',
-          iconName: 'lucide:download',
-          action: async () => {
-            const url = await apiService.getObjectUrl(this.bucketName, key);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = getFileName(key);
-            link.click();
-          },
-        },
-        {
-          name: 'Copy Path',
-          iconName: 'lucide:copy',
-          action: async () => {
-            await navigator.clipboard.writeText(key);
-          },
-        },
-        { divider: true },
-        {
-          name: 'Delete',
-          iconName: 'lucide:trash2',
-          action: async () => {
-            if (confirm(`Delete file "${getFileName(key)}"?`)) {
-              const success = await apiService.deleteObject(this.bucketName, key);
-              if (success) {
-                await this.loadObjects();
-              }
-            }
-          },
-        },
-      ]);
-    }
-  }
-
-  private handleEmptySpaceContextMenu(event: MouseEvent) {
-    // Only trigger if clicking on the container itself, not on items
-    if ((event.target as HTMLElement).closest('tr')) return;
-    event.preventDefault();
-
-    DeesContextmenu.openContextMenuWithOptions(event, [
-      {
-        name: 'New Folder',
-        iconName: 'lucide:folderPlus',
-        action: async () => this.openCreateDialog('folder', this.currentPrefix),
-      },
-      {
-        name: 'New File',
-        iconName: 'lucide:filePlus',
-        action: async () => this.openCreateDialog('file', this.currentPrefix),
-      },
-    ]);
-  }
-
-  private openCreateDialog(type: 'folder' | 'file', prefix: string) {
-    this.createDialogType = type;
-    this.createDialogPrefix = prefix;
-    this.createDialogName = '';
-    this.showCreateDialog = 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 handleCreate() {
-    if (!this.createDialogName.trim()) return;
-
-    const name = this.createDialogName.trim();
-    let path: string;
-
-    if (this.createDialogType === 'folder') {
-      path = this.createDialogPrefix + name + '/.keep';
-    } else {
-      path = this.createDialogPrefix + name;
-    }
-
-    const ext = name.split('.').pop()?.toLowerCase() || '';
-    const contentType = this.createDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
-    const content = this.createDialogType === 'file' ? this.getDefaultContent(ext) : '';
-
-    const success = await apiService.putObject(
-      this.bucketName,
-      path,
-      btoa(content),
-      contentType
-    );
-
-    if (success) {
-      this.showCreateDialog = false;
-      await this.loadObjects();
-    }
-  }
-
-  private renderCreateDialog() {
-    if (!this.showCreateDialog) return '';
-
-    const isFolder = this.createDialogType === '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.showCreateDialog = false}>
-        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
-          <div class="dialog-title">${title}</div>
-          <div class="dialog-location">
-            Location: ${this.bucketName}/${this.createDialogPrefix}
-          </div>
-          <input
-            type="text"
-            class="dialog-input"
-            placeholder=${placeholder}
-            .value=${this.createDialogName}
-            @input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
-            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
-          />
-          <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.showCreateDialog = false}>
-              Cancel
-            </button>
-            <button
-              class="dialog-btn dialog-btn-create"
-              ?disabled=${!this.createDialogName.trim()}
-              @click=${() => this.handleCreate()}
-            >
-              Create
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  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" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
-          ${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)}
-                            @contextmenu=${(e: MouseEvent) => this.handleItemContextMenu(e, 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>
-      ${this.renderCreateDialog()}
-    `;
-  }
-}

ts_web/elements/tsview-s3-preview.ts

@@ -1,527 +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 saving: boolean = false;
-
-  @state()
-  private accessor content: string = '';
-
-  @state()
-  private accessor originalTextContent: string = '';
-
-  @state()
-  private accessor hasChanges: boolean = false;
-
-  @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-content.code-editor {
-        padding: 0;
-        overflow: hidden;
-      }
-
-      .preview-content.code-editor dees-input-code {
-        height: 100%;
-      }
-
-      .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);
-      }
-
-      .action-btn.primary {
-        background: rgba(59, 130, 246, 0.3);
-        border-color: #3b82f6;
-        color: #60a5fa;
-      }
-
-      .action-btn.primary:hover {
-        background: rgba(59, 130, 246, 0.4);
-      }
-
-      .action-btn.primary:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .action-btn.secondary {
-        background: rgba(255, 255, 255, 0.05);
-        border-color: #555;
-        color: #aaa;
-      }
-
-      .action-btn.secondary:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: #fff;
-      }
-
-      .unsaved-indicator {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 10px;
-        background: rgba(251, 191, 36, 0.1);
-        border: 1px solid rgba(251, 191, 36, 0.3);
-        border-radius: 4px;
-        font-size: 12px;
-        color: #fbbf24;
-      }
-
-      .unsaved-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #fbbf24;
-      }
-
-      .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 = '';
-        this.originalTextContent = '';
-        this.hasChanges = false;
-      }
-    }
-  }
-
-  private async loadObject() {
-    if (!this.objectKey || !this.bucketName) return;
-
-    this.loading = true;
-    this.error = '';
-    this.hasChanges = false;
-
-    try {
-      const result = await apiService.getObject(this.bucketName, this.objectKey);
-      if (!result) {
-        this.error = 'Object not found';
-        this.loading = false;
-        return;
-      }
-      this.content = result.content || '';
-      this.contentType = result.contentType || '';
-      this.size = result.size || 0;
-      this.lastModified = result.lastModified || '';
-
-      // For text files, decode and store original content
-      if (this.isText()) {
-        this.originalTextContent = this.getTextContent();
-      }
-    } 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);
-    }
-  }
-
-  private getLanguage(): string {
-    const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
-    const languageMap: Record<string, string> = {
-      ts: 'typescript',
-      tsx: 'typescript',
-      js: 'javascript',
-      jsx: 'javascript',
-      mjs: 'javascript',
-      cjs: 'javascript',
-      json: 'json',
-      html: 'html',
-      htm: 'html',
-      css: 'css',
-      scss: 'scss',
-      sass: 'scss',
-      less: 'less',
-      md: 'markdown',
-      markdown: 'markdown',
-      xml: 'xml',
-      yaml: 'yaml',
-      yml: 'yaml',
-      py: 'python',
-      rb: 'ruby',
-      go: 'go',
-      rs: 'rust',
-      java: 'java',
-      c: 'c',
-      cpp: 'cpp',
-      h: 'c',
-      hpp: 'cpp',
-      cs: 'csharp',
-      php: 'php',
-      sh: 'shell',
-      bash: 'shell',
-      zsh: 'shell',
-      sql: 'sql',
-      graphql: 'graphql',
-      gql: 'graphql',
-      dockerfile: 'dockerfile',
-      txt: 'plaintext',
-    };
-    return languageMap[ext] || 'plaintext';
-  }
-
-  private handleContentChange(event: CustomEvent) {
-    const newValue = event.detail as string;
-    this.hasChanges = newValue !== this.originalTextContent;
-  }
-
-  private handleDiscard() {
-    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
-    if (codeEditor) {
-      codeEditor.value = this.originalTextContent;
-    }
-    this.hasChanges = false;
-  }
-
-  private async handleSave() {
-    if (!this.hasChanges || this.saving) return;
-
-    this.saving = true;
-
-    try {
-      // Get current content from the editor
-      const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
-      const currentContent = codeEditor?.value ?? '';
-
-      // Encode the text content to base64
-      const encoder = new TextEncoder();
-      const bytes = encoder.encode(currentContent);
-      const base64Content = btoa(String.fromCharCode(...bytes));
-
-      const success = await apiService.putObject(
-        this.bucketName,
-        this.objectKey,
-        base64Content,
-        this.contentType
-      );
-
-      if (success) {
-        this.originalTextContent = currentContent;
-        this.hasChanges = false;
-        // Update the stored content as well
-        this.content = base64Content;
-      }
-    } catch (err) {
-      console.error('Error saving object:', err);
-    }
-
-    this.saving = false;
-  }
-
-  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>
-            ${this.hasChanges ? html`
-              <span class="unsaved-indicator">
-                <span class="unsaved-dot"></span>
-                Unsaved changes
-              </span>
-            ` : ''}
-          </div>
-        </div>
-
-        <div class="preview-content ${this.isText() ? 'code-editor' : ''}">
-          ${this.isImage()
-            ? html`<img class="preview-image" src="data:${this.contentType};base64,${this.content}" />`
-            : this.isText()
-              ? html`
-                  <dees-input-code
-                    .value=${this.originalTextContent}
-                    .language=${this.getLanguage()}
-                    height="100%"
-                    @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
-                  ></dees-input-code>
-                `
-              : html`
-                  <div class="binary-preview">
-                    <p>Binary file preview not available</p>
-                    <p>Download to view</p>
-                  </div>
-                `}
-        </div>
-
-        <div class="preview-actions">
-          ${this.hasChanges ? html`
-            <button class="action-btn secondary" @click=${this.handleDiscard}>Discard</button>
-            <button
-              class="action-btn primary"
-              @click=${this.handleSave}
-              ?disabled=${this.saving}
-            >
-              ${this.saving ? 'Saving...' : 'Save'}
-            </button>
-          ` : html`
-            <button class="action-btn" @click=${this.handleDownload}>Download</button>
-            <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
-          `}
-        </div>
-      </div>
-    `;
-  }
-}

ts_web/services/api.service.ts

@@ -1,13 +1,6 @@
 import * as plugins from '../plugins.js';
-
-// Import interfaces from shared types
-// Note: In bundled form these are inlined
-export interface IS3Object {
-  key: string;
-  size?: number;
-  lastModified?: string;
-  isPrefix?: boolean;
-}
+import type { IStorageObject } from '@design.estate/dees-catalog';
+export type { IStorageObject };
 
 export interface IMongoDatabase {
   name: string;
@@ -100,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 });
   }
 
@@ -168,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
   // ===========================================

ts_web/services/changestream.service.ts

@@ -1,4 +1,6 @@
 import * as plugins from '../plugins.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
+export type { IStorageChangeEvent };
 
 /**
  * MongoDB change event
@@ -16,25 +18,13 @@ export interface IMongoChangeEvent {
   timestamp: string;
 }
 
-/**
- * S3 change event
- */
-export interface IS3ChangeEvent {
-  type: 'add' | 'modify' | 'delete';
-  key: string;
-  size?: number;
-  etag?: string;
-  lastModified?: Date;
-  bucket: string;
-}
-
 /**
  * Combined activity event
  */
 export interface IActivityEvent {
   id: string;
-  source: 'mongodb' | 's3';
-  event: IMongoChangeEvent | IS3ChangeEvent;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
   timestamp: string;
 }
 
@@ -42,7 +32,7 @@ export interface IActivityEvent {
  * Subscription info tracked by the service
  */
 interface ISubscription {
-  type: 'mongo' | 's3' | 'activity';
+  type: 'mongo' | 'storage' | 'activity';
   key: string; // "db/collection" or "bucket/prefix" or "activity"
   subscriptionId: string;
 }
@@ -60,11 +50,16 @@ 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 s3Changes$ = new plugins.smartrx.rxjs.Subject<IS3ChangeEvent>();
+  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);
 
@@ -74,48 +69,75 @@ export class ChangeStreamService {
   }
 
   /**
-   * Connect to the WebSocket server
+   * 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 || this.isConnecting) {
+    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 {
-      // 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.connectionStatus$.next('disconnected');
-      console.error('[ChangeStream] Failed to connect:', error);
-      throw error;
+      await this.connect();
+      return this.isConnected;
+    } catch {
+      return false;
     }
   }
 
@@ -135,6 +157,7 @@ export class ChangeStreamService {
 
     this.typedSocket = null;
     this.isConnected = false;
+    this.connectPromise = null;
     this.subscriptions.clear();
     this.connectionStatus$.next('disconnected');
 
@@ -160,8 +183,8 @@ export class ChangeStreamService {
     router.addTypedHandler(
       new plugins.typedrequest.TypedHandler<any>(
         'pushS3Change',
-        async (data: { event: IS3ChangeEvent }) => {
-          this.s3Changes$.next(data.event);
+        async (data: { event: IStorageChangeEvent }) => {
+          this.storageChanges$.next(data.event);
           return { received: true };
         }
       )
@@ -172,6 +195,10 @@ export class ChangeStreamService {
       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 };
         }
@@ -228,8 +255,11 @@ export class ChangeStreamService {
    */
   public async subscribeToCollection(database: string, collection: string): Promise<boolean> {
     if (!this.typedSocket || !this.isConnected) {
-      console.warn('[ChangeStream] Not connected, cannot subscribe');
-      return false;
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        console.warn('[ChangeStream] Not connected, cannot subscribe');
+        return false;
+      }
     }
 
     const key = `${database}/${collection}`;
@@ -307,8 +337,11 @@ export class ChangeStreamService {
    */
   public async subscribeToBucket(bucket: string, prefix?: string): Promise<boolean> {
     if (!this.typedSocket || !this.isConnected) {
-      console.warn('[ChangeStream] Not connected, cannot subscribe');
-      return false;
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        console.warn('[ChangeStream] Not connected, cannot subscribe');
+        return false;
+      }
     }
 
     const key = prefix ? `${bucket}/${prefix}` : bucket;
@@ -387,8 +420,11 @@ export class ChangeStreamService {
    */
   public async subscribeToActivity(): Promise<boolean> {
     if (!this.typedSocket || !this.isConnected) {
-      console.warn('[ChangeStream] Not connected, cannot subscribe');
-      return false;
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        console.warn('[ChangeStream] Not connected, cannot subscribe');
+        return false;
+      }
     }
 
     // Check if already subscribed
@@ -450,7 +486,10 @@ export class ChangeStreamService {
    */
   public async getRecentActivity(limit: number = 100): Promise<IActivityEvent[]> {
     if (!this.typedSocket || !this.isConnected) {
-      return [];
+      const connected = await this.ensureConnected();
+      if (!connected) {
+        return [];
+      }
     }
 
     try {
@@ -470,6 +509,13 @@ export class ChangeStreamService {
     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
   // ===========================================
@@ -484,8 +530,8 @@ export class ChangeStreamService {
   /**
    * Get S3 changes as an Observable
    */
-  public getS3Changes(): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
-    return this.s3Changes$.asObservable();
+  public getStorageChanges(): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.asObservable();
   }
 
   /**
@@ -509,8 +555,8 @@ export class ChangeStreamService {
   /**
    * Get filtered S3 changes for a specific bucket/prefix
    */
-  public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
-    return this.s3Changes$.pipe(
+  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;

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) : '';
+}