v1.12.0

feat(web): replace custom S3 browser components with dees-s3-browser integration
v1.11.1
2026-03-12 15:16:24 +00:00 · 2026-03-12 15:16:24 +00:00 · 2026-01-29 15:56:05 +00:00 · 2026-01-29 15:56:05 +00:00 · 2026-01-28 16:49:34 +00:00 · 2026-01-28 16:49:34 +00:00
40 changed files with 400 additions and 2701 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,60 @@
 # Changelog

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

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@git.zone/tsview",
-  "version": "1.8.1",
+  "version": "1.12.0",
  "private": false,
  "description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
  "main": "dist_ts/index.js",
@@ -34,7 +34,7 @@
    "@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.41.1",
+    "@design.estate/dees-catalog": "^3.41.2",
    "@design.estate/dees-element": "^2.1.6",
    "@push.rocks/early": "^4.0.4",
    "@push.rocks/npmextra": "^5.3.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
        specifier: ^3.975.0
        version: 3.975.0
      '@design.estate/dees-catalog':
-        specifier: ^3.41.1
-        version: 3.41.1(@tiptap/pm@2.27.2)
+        specifier: ^3.41.2
+        version: 3.41.2(@tiptap/pm@2.27.2)
      '@design.estate/dees-element':
        specifier: ^2.1.6
        version: 2.1.6
@@ -331,8 +331,8 @@ packages:
  '@configvault.io/interfaces@1.0.17':
    resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}

-  '@design.estate/dees-catalog@3.41.1':
-    resolution: {integrity: sha512-AMD0VNLQEWXYRUYWwjLA8K8KEKAiUO7GiriWQm+ld7cj+LrCMsJO0jjVfOCsd4G7fURMqmab9ereBJyxqjoFgQ==}
+  '@design.estate/dees-catalog@3.41.2':
+    resolution: {integrity: sha512-G6b7TbqkEupHwty3q+Y42xbmwkfFBf3S5JBrMLAw1S0kR88ZCio0dOBcvmvQTQ5pQBz6TDRkx1prXpoQbZDt7A==}

  '@design.estate/dees-comms@1.0.30':
    resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
@@ -660,74 +660,74 @@ packages:
  '@mongodb-js/saslprep@1.4.5':
    resolution: {integrity: sha512-k64Lbyb7ycCSXHSLzxVdb2xsKGPMvYZfCICXvDsI8Z65CeWQzTEKS4YmGbnqw+U9RBvLPTsB6UCmwkgsDTGWIw==}

-  '@napi-rs/canvas-android-arm64@0.1.88':
-    resolution: {integrity: sha512-KEaClPnZuVxJ8smUWjV1wWFkByBO/D+vy4lN+Dm5DFH514oqwukxKGeck9xcKJhaWJGjfruGmYGiwRe//+/zQQ==}
+  '@napi-rs/canvas-android-arm64@0.1.89':
+    resolution: {integrity: sha512-CXxQTXsjtQqKGENS8Ejv9pZOFJhOPIl2goenS+aU8dY4DygvkyagDhy/I07D1YLqrDtPvLEX5zZHt8qUdnuIpQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [android]

-  '@napi-rs/canvas-darwin-arm64@0.1.88':
-    resolution: {integrity: sha512-Xgywz0dDxOKSgx3eZnK85WgGMmGrQEW7ZLA/E7raZdlEE+xXCozobgqz2ZvYigpB6DJFYkqnwHjqCOTSDGlFdg==}
+  '@napi-rs/canvas-darwin-arm64@0.1.89':
+    resolution: {integrity: sha512-k29cR/Zl20WLYM7M8YePevRu2VQRaKcRedYr1V/8FFHkyIQ8kShEV+MPoPGi+znvmd17Eqjy2Pk2F2kpM2umVg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]

-  '@napi-rs/canvas-darwin-x64@0.1.88':
-    resolution: {integrity: sha512-Yz4wSCIQOUgNucgk+8NFtQxQxZV5NO8VKRl9ePKE6XoNyNVC8JDqtvhh3b3TPqKK8W5p2EQpAr1rjjm0mfBxdg==}
+  '@napi-rs/canvas-darwin-x64@0.1.89':
+    resolution: {integrity: sha512-iUragqhBrA5FqU13pkhYBDbUD1WEAIlT8R2+fj6xHICY2nemzwMUI8OENDhRh7zuL06YDcRwENbjAVxOmaX9jg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]

-  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.88':
-    resolution: {integrity: sha512-9gQM2SlTo76hYhxHi2XxWTAqpTOb+JtxMPEIr+H5nAhHhyEtNmTSDRtz93SP7mGd2G3Ojf2oF5tP9OdgtgXyKg==}
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.89':
+    resolution: {integrity: sha512-y3SM9sfDWasY58ftoaI09YBFm35Ig8tosZqgahLJ2WGqawCusGNPV9P0/4PsrLOCZqGg629WxexQMY25n7zcvA==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [linux]

-  '@napi-rs/canvas-linux-arm64-gnu@0.1.88':
-    resolution: {integrity: sha512-7qgaOBMXuVRk9Fzztzr3BchQKXDxGbY+nwsovD3I/Sx81e+sX0ReEDYHTItNb0Je4NHbAl7D0MKyd4SvUc04sg==}
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.89':
+    resolution: {integrity: sha512-NEoF9y8xq5fX8HG8aZunBom1ILdTwt7ayBzSBIwrmitk7snj4W6Fz/yN/ZOmlM1iyzHDNX5Xn0n+VgWCF8BEdA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]

-  '@napi-rs/canvas-linux-arm64-musl@0.1.88':
-    resolution: {integrity: sha512-kYyNrUsHLkoGHBc77u4Unh067GrfiCUMbGHC2+OTxbeWfZkPt2o32UOQkhnSswKd9Fko/wSqqGkY956bIUzruA==}
+  '@napi-rs/canvas-linux-arm64-musl@0.1.89':
+    resolution: {integrity: sha512-UQQkIEzV12/l60j1ziMjZ+mtodICNUbrd205uAhbyTw0t60CrC/EsKb5/aJWGq1wM0agvcgZV72JJCKfLS6+4w==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]

-  '@napi-rs/canvas-linux-riscv64-gnu@0.1.88':
-    resolution: {integrity: sha512-HVuH7QgzB0yavYdNZDRyAsn/ejoXB0hn8twwFnOqUbCCdkV+REna7RXjSR7+PdfW0qMQ2YYWsLvVBT5iL/mGpw==}
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.89':
+    resolution: {integrity: sha512-1/VmEoFaIO6ONeeEMGoWF17wOYZOl5hxDC1ios2Bkz/oQjbJJ8DY/X22vWTmvuUKWWhBVlo63pxLGZbjJU/heA==}
    engines: {node: '>= 10'}
    cpu: [riscv64]
    os: [linux]

-  '@napi-rs/canvas-linux-x64-gnu@0.1.88':
-    resolution: {integrity: sha512-hvcvKIcPEQrvvJtJnwD35B3qk6umFJ8dFIr8bSymfrSMem0EQsfn1ztys8ETIFndTwdNWJKWluvxztA41ivsEw==}
+  '@napi-rs/canvas-linux-x64-gnu@0.1.89':
+    resolution: {integrity: sha512-ebLuqkCuaPIkKgKH9q4+pqWi1tkPOfiTk5PM1LKR1tB9iO9sFNVSIgwEp+SJreTSbA2DK5rW8lQXiN78SjtcvA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]

-  '@napi-rs/canvas-linux-x64-musl@0.1.88':
-    resolution: {integrity: sha512-eSMpGYY2xnZSQ6UxYJ6plDboxq4KeJ4zT5HaVkUnbObNN6DlbJe0Mclh3wifAmquXfrlgTZt6zhHsUgz++AK6g==}
+  '@napi-rs/canvas-linux-x64-musl@0.1.89':
+    resolution: {integrity: sha512-w+5qxHzplvA4BkHhCaizNMLLXiI+CfP84YhpHm/PqMub4u8J0uOAv+aaGv40rYEYra5hHRWr9LUd6cfW32o9/A==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]

-  '@napi-rs/canvas-win32-arm64-msvc@0.1.88':
-    resolution: {integrity: sha512-qcIFfEgHrchyYqRrxsCeTQgpJZ/GqHiqPcU/Fvw/ARVlQeDX1VyFH+X+0gCR2tca6UJrq96vnW+5o7buCq+erA==}
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.89':
+    resolution: {integrity: sha512-DmyXa5lJHcjOsDC78BM3bnEECqbK3xASVMrKfvtT/7S7Z8NGQOugvu+L7b41V6cexCd34mBWgMOsjoEBceeB1Q==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]

-  '@napi-rs/canvas-win32-x64-msvc@0.1.88':
-    resolution: {integrity: sha512-ROVqbfS4QyZxYkqmaIBBpbz/BQvAR+05FXM5PAtTYVc0uyY8Y4BHJSMdGAaMf6TdIVRsQsiq+FG/dH9XhvWCFQ==}
+  '@napi-rs/canvas-win32-x64-msvc@0.1.89':
+    resolution: {integrity: sha512-WMej0LZrIqIncQcx0JHaMXlnAG7sncwJh7obs/GBgp0xF9qABjwoRwIooMWCZkSansapKGNUHhamY6qEnFN7gA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]

-  '@napi-rs/canvas@0.1.88':
-    resolution: {integrity: sha512-/p08f93LEbsL5mDZFQ3DBxcPv/I4QG9EDYRRq1WNlCOXVfAHBTHMSVMwxlqG/AtnSfUr9+vgfN7MKiyDo0+Weg==}
+  '@napi-rs/canvas@0.1.89':
+    resolution: {integrity: sha512-7GjmkMirJHejeALCqUnZY3QwID7bbumOiLrqq2LKgxrdjdmxWQBTc6rcASa2u8wuWrH7qo4/4n/VNrOwCoKlKg==}
    engines: {node: '>= 10'}

  '@napi-rs/wasm-runtime@1.0.7':
@@ -4066,7 +4066,7 @@ snapshots:
      '@api.global/typedrequest-interfaces': 3.0.19
      '@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@2.0.1)
      '@cloudflare/workers-types': 4.20260123.0
-      '@design.estate/dees-catalog': 3.41.1(@tiptap/pm@2.27.2)
+      '@design.estate/dees-catalog': 3.41.2(@tiptap/pm@2.27.2)
      '@design.estate/dees-comms': 1.0.30
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
@@ -4694,7 +4694,7 @@ snapshots:
    dependencies:
      '@api.global/typedrequest-interfaces': 3.0.19

-  '@design.estate/dees-catalog@3.41.1(@tiptap/pm@2.27.2)':
+  '@design.estate/dees-catalog@3.41.2(@tiptap/pm@2.27.2)':
    dependencies:
      '@design.estate/dees-domtools': 2.3.8
      '@design.estate/dees-element': 2.1.6
@@ -5203,52 +5203,52 @@ snapshots:
    dependencies:
      sparse-bitfield: 3.0.3

-  '@napi-rs/canvas-android-arm64@0.1.88':
+  '@napi-rs/canvas-android-arm64@0.1.89':
    optional: true

-  '@napi-rs/canvas-darwin-arm64@0.1.88':
+  '@napi-rs/canvas-darwin-arm64@0.1.89':
    optional: true

-  '@napi-rs/canvas-darwin-x64@0.1.88':
+  '@napi-rs/canvas-darwin-x64@0.1.89':
    optional: true

-  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.88':
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.89':
    optional: true

-  '@napi-rs/canvas-linux-arm64-gnu@0.1.88':
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.89':
    optional: true

-  '@napi-rs/canvas-linux-arm64-musl@0.1.88':
+  '@napi-rs/canvas-linux-arm64-musl@0.1.89':
    optional: true

-  '@napi-rs/canvas-linux-riscv64-gnu@0.1.88':
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.89':
    optional: true

-  '@napi-rs/canvas-linux-x64-gnu@0.1.88':
+  '@napi-rs/canvas-linux-x64-gnu@0.1.89':
    optional: true

-  '@napi-rs/canvas-linux-x64-musl@0.1.88':
+  '@napi-rs/canvas-linux-x64-musl@0.1.89':
    optional: true

-  '@napi-rs/canvas-win32-arm64-msvc@0.1.88':
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.89':
    optional: true

-  '@napi-rs/canvas-win32-x64-msvc@0.1.88':
+  '@napi-rs/canvas-win32-x64-msvc@0.1.89':
    optional: true

-  '@napi-rs/canvas@0.1.88':
+  '@napi-rs/canvas@0.1.89':
    optionalDependencies:
-      '@napi-rs/canvas-android-arm64': 0.1.88
-      '@napi-rs/canvas-darwin-arm64': 0.1.88
-      '@napi-rs/canvas-darwin-x64': 0.1.88
-      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.88
-      '@napi-rs/canvas-linux-arm64-gnu': 0.1.88
-      '@napi-rs/canvas-linux-arm64-musl': 0.1.88
-      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.88
-      '@napi-rs/canvas-linux-x64-gnu': 0.1.88
-      '@napi-rs/canvas-linux-x64-musl': 0.1.88
-      '@napi-rs/canvas-win32-arm64-msvc': 0.1.88
-      '@napi-rs/canvas-win32-x64-msvc': 0.1.88
+      '@napi-rs/canvas-android-arm64': 0.1.89
+      '@napi-rs/canvas-darwin-arm64': 0.1.89
+      '@napi-rs/canvas-darwin-x64': 0.1.89
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.89
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.89
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.89
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.89
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.89
+      '@napi-rs/canvas-linux-x64-musl': 0.1.89
+      '@napi-rs/canvas-win32-arm64-msvc': 0.1.89
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.89
    optional: true

  '@napi-rs/wasm-runtime@1.0.7':
@@ -8747,7 +8747,7 @@ snapshots:

  pdfjs-dist@4.10.38:
    optionalDependencies:
-      '@napi-rs/canvas': 0.1.88
+      '@napi-rs/canvas': 0.1.89

  peek-readable@5.4.2: {}

--- 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.8.1',
+  version: '1.12.0',
  description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }
--- a/ts/api/handlers.s3.ts
+++ b/ts/api/handlers.s3.ts
@@ -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/interfaces/index.ts
+++ b/ts/interfaces/index.ts
@@ -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_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.8.1',
+  version: '1.12.0',
  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 { IS3DataProvider } from '@design.estate/dees-catalog';
+import { apiService } from '../services/index.js';
+
+/**
+ * Adapter that implements IS3DataProvider by delegating to tsview's ApiService
+ */
+export class TsviewS3DataProvider implements IS3DataProvider {
+  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-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 { IS3ChangeEvent } from '@design.estate/dees-catalog';

 const { html, css, cssManager, customElement, state, DeesElement } = plugins;
 const { DeesContextmenu } = plugins.deesCatalog;
@@ -1039,7 +1041,16 @@ export class TsviewApp extends DeesElement {

      return html`
        <div class="content-area">
-          <tsview-s3-browser .bucketName=${this.selectedBucket}></tsview-s3-browser>
+          <dees-s3-browser
+            .dataProvider=${s3DataProvider}
+            .bucketName=${this.selectedBucket}
+            .onChangeEvent=${(callback: (event: IS3ChangeEvent) => void) => {
+              const sub = changeStreamService
+                .getBucketChanges(this.selectedBucket)
+                .subscribe(callback);
+              return () => sub.unsubscribe();
+            }}
+          ></dees-s3-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;
@@ -117,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;
      }
@@ -305,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,423 +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 = 700;
-
-  @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;
-  private connectionSubscription: 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, 700px);
-      }
-
-      .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();
-    // Subscription is handled by updated() when bucketName is 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;
-    }
-  }
-
-  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 {
-      // Set up RxJS listener first so events aren't missed on reconnect
-      if (!this.changeSubscription) {
-        this.changeSubscription = changeStreamService
-          .getBucketChanges(this.bucketName, this.currentPrefix || undefined)
-          .subscribe((event) => this.handleChange(event));
-      }
-
-      // Subscribe on the server side (will auto-connect if needed)
-      const success = await changeStreamService.subscribeToBucket(this.bucketName, this.currentPrefix || undefined);
-      this.isStreamConnected = success;
-    } 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), 1000);
-    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
--- 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,538 +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 editing: 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: hidden;
-      }
-
-      .preview-content dees-preview {
-        width: 100%;
-        height: 100%;
-      }
-
-      .preview-content.code-editor {
-        padding: 0;
-        overflow: hidden;
-      }
-
-      .preview-content.code-editor dees-input-code {
-        height: 100%;
-      }
-
-      .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;
-      }
-
-    `,
-  ];
-
-  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;
-        this.editing = false;
-      }
-    }
-  }
-
-  private async loadObject() {
-    if (!this.objectKey || !this.bucketName) return;
-
-    this.loading = true;
-    this.error = '';
-    this.hasChanges = false;
-    this.editing = 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 handleEdit() {
-    this.editing = true;
-  }
-
-  private handleDiscard() {
-    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
-    if (codeEditor) {
-      codeEditor.value = this.originalTextContent;
-    }
-    this.hasChanges = false;
-    this.editing = 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;
-        this.editing = 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.editing ? 'code-editor' : ''}">
-          ${this.editing
-            ? html`
-                <dees-input-code
-                  .value=${this.originalTextContent}
-                  .language=${this.getLanguage()}
-                  height="100%"
-                  @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
-                ></dees-input-code>
-              `
-            : this.isText()
-              ? html`
-                  <dees-preview
-                    .textContent=${this.originalTextContent}
-                    .filename=${getFileName(this.objectKey)}
-                    .language=${this.getLanguage()}
-                    .showToolbar=${true}
-                    .showFilename=${false}
-                  ></dees-preview>
-                `
-              : html`
-                  <dees-preview
-                    .base64=${this.content}
-                    .mimeType=${this.contentType}
-                    .filename=${getFileName(this.objectKey)}
-                    .showToolbar=${true}
-                    .showFilename=${false}
-                  ></dees-preview>
-                `
-          }
-        </div>
-
-        <div class="preview-actions">
-          ${this.editing
-            ? html`
-                <button class="action-btn secondary" @click=${this.handleDiscard}>
-                  ${this.hasChanges ? 'Discard' : 'Cancel'}
-                </button>
-                <button
-                  class="action-btn primary"
-                  @click=${this.handleSave}
-                  ?disabled=${this.saving || !this.hasChanges}
-                >
-                  ${this.saving ? 'Saving...' : 'Save'}
-                </button>
-              `
-            : html`
-                ${this.isText()
-                  ? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
-                  : ''}
-                <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
@@ -168,6 +168,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/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	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