v1.12.2

fix(config): migrate runtime configuration loading from npmextra to smartconfig
v1.12.1
2026-03-24 15:08:13 +00:00 · 2026-03-24 15:08:13 +00:00 · 2026-03-14 23:27:25 +00:00 · 2026-03-14 23:27:25 +00:00 · 2026-03-12 15:16:24 +00:00 · 2026-03-12 15:16:24 +00:00
54 changed files with 3064 additions and 4459 deletions
--- a/.playwright-mcp/column-test-final.png
+++ b/.playwright-mcp/column-test-final.png
--- a/.playwright-mcp/column-view-state-2.png
+++ b/.playwright-mcp/column-view-state-2.png
--- a/.playwright-mcp/column-view-state-3.png
+++ b/.playwright-mcp/column-view-state-3.png
--- a/.playwright-mcp/column-view-state.png
+++ b/.playwright-mcp/column-view-state.png
--- a/.playwright-mcp/columns-working.png
+++ b/.playwright-mcp/columns-working.png
--- a/.playwright-mcp/page-2026-01-24T00-39-11-574Z.png
+++ b/.playwright-mcp/page-2026-01-24T00-39-11-574Z.png
--- a/.playwright-mcp/resizable-columns.png
+++ b/.playwright-mcp/resizable-columns.png
--- a/.playwright-mcp/resized-column.png
+++ b/.playwright-mcp/resized-column.png
--- a/.playwright-mcp/scroll-test.png
+++ b/.playwright-mcp/scroll-test.png
--- a/.playwright-mcp/tsview-columns-before.png
+++ b/.playwright-mcp/tsview-columns-before.png
--- a/.playwright-mcp/tsview-columns-fixed.png
+++ b/.playwright-mcp/tsview-columns-fixed.png
--- a/.playwright-mcp/tsview-columns-navigation.png
+++ b/.playwright-mcp/tsview-columns-navigation.png
--- a/.playwright-mcp/tsview-columns-sample-data.png
+++ b/.playwright-mcp/tsview-columns-sample-data.png
--- a/.playwright-mcp/tsview-fixed-single-instance.png
+++ b/.playwright-mcp/tsview-fixed-single-instance.png
--- a/.playwright-mcp/tsview-mongodb-data.png
+++ b/.playwright-mcp/tsview-mongodb-data.png
--- a/.playwright-mcp/tsview-mongodb-view.png
+++ b/.playwright-mcp/tsview-mongodb-view.png
--- a/.playwright-mcp/tsview-mongodb.png
+++ b/.playwright-mcp/tsview-mongodb.png
--- a/.playwright-mcp/tsview-s3-buckets.png
+++ b/.playwright-mcp/tsview-s3-buckets.png
--- a/.playwright-mcp/tsview-sample-data-bucket.png
+++ b/.playwright-mcp/tsview-sample-data-bucket.png
--- a/.playwright-mcp/tsview-working.png
+++ b/.playwright-mcp/tsview-working.png
--- a/.playwright-mcp/two-columns.png
+++ b/.playwright-mcp/two-columns.png
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,105 @@
 # 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

--- a/npmextra.json
+++ b/npmextra.json
@@ -34,7 +34,7 @@
  "@git.zone/cli": {
    "services": ["mongodb", "minio"],
    "release": {
-      "registries": ["https://verdaccio.lossless.digital"],
+      "registries": ["https://verdaccio.lossless.digital", "https://registry.npmjs.org"],
      "accessLevel": "public"
    },
    "projectType": "npm",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@git.zone/tsview",
-  "version": "1.6.1",
+  "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",
@@ -20,35 +20,35 @@
    "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/**/*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -106,6 +106,28 @@ 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
--- a/readme.md
+++ b/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 — with real-time change streaming baked in. Built with TypeScript, designed for developers who need quick, visual access to their data stores. 🚀
+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

@@ -16,31 +16,34 @@ pnpm add -g @git.zone/tsview
 pnpm add @git.zone/tsview
 ```

-## Features ✨
+## Features

-### 🗄️ S3 Storage Browser
+### S3 Storage Browser
+
+Powered by the `dees-storage-browser` component from `@design.estate/dees-catalog`:

 - **Column View Navigation** — Mac Finder-style interface with resizable columns
 - **List View** — Traditional key-based view with hierarchical navigation
 - **Real-time Preview** — View images, JSON, text files, code, and more directly in the browser
 - **Bucket Management** — Create, delete, and switch between buckets
- **File Operations** — Upload, download, delete objects
+- **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

-### 🍃 MongoDB Browser
+### 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
+### 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)
@@ -49,14 +52,14 @@ pnpm add @git.zone/tsview
 - **WebSocket Subscriptions** — Per-collection, per-bucket, or global activity feed
 - **Auto-Reconnect** — Subscriptions automatically restored after connection loss

-### 🎨 Modern Web UI
+### 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
+- 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 🚀
+## Quick Start

 ### 1. Configure Your Connection

@@ -80,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

@@ -206,15 +209,15 @@ Or use individual variables:

 tsview works with any S3-compatible storage:

-| 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 |
+| 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

@@ -244,9 +247,10 @@ tsview/
 ├── ts_web/                       # Frontend
 │   ├── elements/                 # Web components (LitElement)
 │   │   ├── tsview-app.ts         #   App shell + navigation
-│   │   ├── tsview-s3-*.ts        #   S3 browser components
 │   │   ├── 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
@@ -257,7 +261,7 @@ tsview/

 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 `ChangeStreamService` connects over WebSocket and distributes real-time events to active views via RxJS Subjects.
+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.

--- a/test/test.tsview.ts
+++ b/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
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@git.zone/tsview',
-  version: '1.6.1',
+  version: '1.12.2',
  description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }
--- a/ts/api/handlers.mongodb.ts
+++ b/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,
--- a/ts/api/handlers.s3.ts
+++ b/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) };
+        }
+      }
+    )
+  );
 }
--- a/ts/bundled_ui.ts
+++ b/ts/bundled_ui.ts
--- a/ts/config/classes.config.ts
+++ b/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;
  }

  /**
--- a/ts/interfaces/index.ts
+++ b/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
--- a/ts/plugins.ts
+++ b/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,
--- a/ts/server/classes.viewserver.ts
+++ b/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;
  }

--- a/ts/streaming/classes.changestream-manager.ts
+++ b/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
--- a/ts/streaming/interfaces.streaming.ts
+++ b/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"
  };
 }
--- a/ts/tsview.classes.tsview.ts
+++ b/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}`);
--- a/ts/tsview.cli.ts
+++ b/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) {
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@git.zone/tsview',
-  version: '1.6.1',
+  version: '1.12.2',
  description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }
--- a/ts_web/adapters/s3-data-provider.ts
+++ b/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();
--- a/ts_web/elements/index.ts
+++ b/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';
--- a/ts_web/elements/tsview-activity-stream.ts
+++ b/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>
--- a/ts_web/elements/tsview-app.ts
+++ b/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>
      `;
    }
--- a/ts_web/elements/tsview-mongo-browser.ts
+++ b/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;
  };

--- a/ts_web/elements/tsview-s3-browser.ts
+++ b/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>
-    `;
-  }
-}
--- a/ts_web/elements/tsview-s3-columns.ts
+++ b/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>
-    `;
-  }
-}
--- a/ts_web/elements/tsview-s3-keys.ts
+++ b/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()}
-    `;
-  }
-}
--- a/ts_web/elements/tsview-s3-preview.ts
+++ b/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>
-    `;
-  }
-}
--- a/ts_web/services/api.service.ts
+++ b/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
  // ===========================================
--- a/ts_web/services/changestream.service.ts
+++ b/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;
--- a/ts_web/utilities/index.ts
+++ b/ts_web/utilities/index.ts
@@ -1 +1,2 @@
 export * from './formatters.js';
+export * from './move-validator.js';
--- a/ts_web/utilities/move-validator.ts
+++ b/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) : '';
+}
Author	SHA1	Message	Date
Juergen Kunz	a29f13c75a	v1.12.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-24 15:08:13 +00:00
Juergen Kunz	02b3a79d99	fix(config): migrate runtime configuration loading from npmextra to smartconfig	2026-03-24 15:08:13 +00:00
Juergen Kunz	7f4528bdab	v1.12.1 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-14 23:27:25 +00:00
Juergen Kunz	a829f76d4b	fix(storage): rename S3 configuration and change stream interfaces to storage-oriented types	2026-03-14 23:27:25 +00:00
Juergen Kunz	2da2d57df1	v1.12.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-12 15:16:24 +00:00
Juergen Kunz	150d6d9d86	feat(web): replace custom S3 browser components with dees-s3-browser integration	2026-03-12 15:16:24 +00:00
Juergen Kunz	c4afbdfd7f	v1.11.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 13m25s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-29 15:56:05 +00:00
Juergen Kunz	b72b36c4ea	fix(mongo-browser): increase default editor width and broaden resize range in Mongo browser pane	2026-01-29 15:56:05 +00:00
Juergen Kunz	8c5cea7e0b	v1.11.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 14m55s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 16:49:34 +00:00
Juergen Kunz	d9fc7f8257	feat(s3): add rename support for files and folders in S3 UI columns and keys	2026-01-28 16:49:34 +00:00
Juergen Kunz	b41adc184e	v1.10.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 13m2s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 16:16:26 +00:00
Juergen Kunz	175e9cb691	fix(tsview-s3-columns): append trailing slash to destination key when moving folders to ensure folder destination path	2026-01-28 16:16:26 +00:00
Juergen Kunz	fbd6ac83f8	v1.10.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 11m25s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 15:38:04 +00:00
Juergen Kunz	ebce6b7e76	fix(playwright-mcp): remove Playwright-generated snapshot images to avoid committing autogenerated test artifacts and reduce repository size	2026-01-28 15:38:04 +00:00
Juergen Kunz	b30e2925aa	v1.10.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 14m1s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 15:35:28 +00:00
Juergen Kunz	e379c2b6b1	feat(s3): add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation	2026-01-28 15:35:28 +00:00
Juergen Kunz	4603154408	v1.9.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 14m44s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 15:04:42 +00:00
Juergen Kunz	5051e957ec	feat(s3-columns): load full prefix path on initial load and add folder upload support	2026-01-28 15:04:42 +00:00
Juergen Kunz	319ee2a7af	v1.8.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 13m35s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 14:10:43 +00:00
Juergen Kunz	8204f06a2a	fix(cli): set executable permission on cli.js	2026-01-28 14:10:43 +00:00
Juergen Kunz	be71629d34	v1.8.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 13m38s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 14:02:48 +00:00
Juergen Kunz	8cc9a1850a	feat(streaming): add global activity watchers, client-side buffering, and improved real-time streaming UX	2026-01-28 14:02:48 +00:00
Juergen Kunz	ad8529cb0f	v1.7.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 13m41s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-27 15:51:19 +00:00
Juergen Kunz	7cef6f89d9	feat(s3): add drag-and-drop and context-menu file uploads, inline text editing in preview, and increase preview width	2026-01-27 15:51:19 +00:00
Juergen Kunz	81d7ff0722	fix(build): update bundled UI after rebuild	2026-01-26 12:49:23 +00:00