v1.3.0

changelog.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 2026-01-25 - 1.3.0 - feat(s3)
+add S3 create file/folder dialogs and in-place text editor; export mongodb plugin
+
+- Add mongodb dependency and export mongodb in ts/plugins.ts so ObjectId can be reused from plugins.
+- Update handlers.mongodb to use plugins.mongodb.ObjectId instead of requiring mongodb directly.
+- UI: Add create-file and create-folder dialogs and context-menu entries in tsview-app, tsview-s3-columns, and tsview-s3-keys to create objects (folders use a .keep object).
+- Implement client-side helpers to determine content type/default content and call apiService.putObject with base64 content when creating files/folders.
+- S3 preview: embed dees-input-code editor for text files with language detection, unsaved-changes indicator, Save/Discard flows, and saving via apiService.putObject.
+- Various styling and UX improvements for dialogs, buttons, and editor states.
+
+## 2026-01-25 - 1.2.0 - feat(s3,web-ui)
+add S3 deletePrefix and getObjectUrl endpoints and add context menus in UI for S3 and Mongo views
+
+- Add server-side TypedHandlers: deletePrefix and getObjectUrl (ts/api/handlers.s3.ts)
+- Add request/response interfaces IReq_DeletePrefix and IReq_GetObjectUrl (ts/interfaces/index.ts)
+- Add client API methods deletePrefix and getObjectUrl (ts_web/services/api.service.ts)
+- Introduce context menu actions (DeesContextmenu) across UI: bucket/database/collection/document/folder/file actions including open, copy path, delete, download and duplicate (ts_web/elements/tsview-app.ts, tsview-mongo-collections.ts, tsview-mongo-documents.ts, tsview-s3-columns.ts, tsview-s3-keys.ts)
+- Switch from inline delete buttons to contextual menus for safer UX; implement downloads via data URLs returned by getObjectUrl and deletion of S3 prefixes (folders)
+
+## 2026-01-25 - 1.1.3 - fix(package)
+update package metadata
+
+- metadata-only change; no source code changes
+- current version 1.1.2 → recommended patch bump to 1.1.3
+
+## 2026-01-25 - 1.1.2 - fix(package)
+apply minor metadata-only change (one-line edit)
+
+- Change affects 1 file with a +1 -1 (metadata-only) — no behavioral changes
+- Recommended bump of patch version from 1.1.1 to 1.1.2
+
 ## 2026-01-25 - 1.1.1 - fix(tsview)
 fix bad build commit - remove accidental include
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@git.zone/tsview",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "private": false,
   "description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
   "main": "dist_ts/index.js",
@@ -44,7 +44,8 @@
     "@push.rocks/smartnetwork": "^4.4.0",
     "@push.rocks/smartopen": "^2.0.0",
     "@push.rocks/smartpath": "^6.0.0",
-    "@push.rocks/smartpromise": "^4.2.3"
+    "@push.rocks/smartpromise": "^4.2.3",
+    "mongodb": "^7.0.0"
   },
   "files": [
     "ts/**/*",

pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       '@push.rocks/smartpromise':
         specifier: ^4.2.3
         version: 4.2.3
+      mongodb:
+        specifier: ^7.0.0
+        version: 7.0.0(socks@2.8.7)
     devDependencies:
       '@git.zone/tsbuild':
         specifier: ^4.1.2

ts/00_commitinfo_data.ts

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

ts/api/handlers.mongodb.ts

@@ -21,16 +21,10 @@ export async function registerMongoHandlers(
 
   // Helper to create ObjectId filter
   const createIdFilter = (documentId: string) => {
-    // Try to treat as ObjectId string - MongoDB driver will handle conversion
-    try {
-      // Import ObjectId from the mongodb package that smartdata uses
-      const { ObjectId } = require('mongodb');
+    const { ObjectId } = plugins.mongodb;
     if (ObjectId.isValid(documentId)) {
       return { _id: new ObjectId(documentId) };
     }
-    } catch {
-      // Fall through to string filter
-    }
     return { _id: documentId };
   };
 

ts/api/handlers.s3.ts

@@ -364,4 +364,103 @@ export async function registerS3Handlers(
       }
     )
   );
+
+  // Delete prefix (folder and all contents)
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_DeletePrefix>(
+      'deletePrefix',
+      async (reqData) => {
+        const smartbucket = await tsview.getSmartBucket();
+        if (!smartbucket) {
+          return { success: false };
+        }
+
+        try {
+          const bucket = await smartbucket.getBucketByName(reqData.bucketName);
+          if (!bucket) {
+            return { success: false };
+          }
+
+          const baseDir = await bucket.getBaseDirectory();
+          let targetDir = baseDir;
+
+          // Navigate to the prefix directory
+          const prefix = reqData.prefix.replace(/\/$/, '');
+          const prefixParts = prefix.split('/').filter(Boolean);
+          for (const part of prefixParts) {
+            const subDir = await targetDir.getSubDirectoryByName(part, { getEmptyDirectory: true });
+            if (subDir) {
+              targetDir = subDir;
+            } else {
+              return { success: false };
+            }
+          }
+
+          // Delete the directory and all its contents
+          await targetDir.delete({ mode: 'permanent' });
+          return { success: true };
+        } catch (err) {
+          console.error('Error deleting prefix:', err);
+          return { success: false };
+        }
+      }
+    )
+  );
+
+  // Get object URL (for downloads)
+  typedrouter.addTypedHandler(
+    new plugins.typedrequest.TypedHandler<interfaces.IReq_GetObjectUrl>(
+      'getObjectUrl',
+      async (reqData) => {
+        const smartbucket = await tsview.getSmartBucket();
+        if (!smartbucket) {
+          throw new Error('S3 not configured');
+        }
+
+        try {
+          const bucket = await smartbucket.getBucketByName(reqData.bucketName);
+          if (!bucket) {
+            throw new Error(`Bucket ${reqData.bucketName} not found`);
+          }
+
+          // Get the content and create a data URL
+          const content = await bucket.fastGet({ path: reqData.key });
+          const ext = reqData.key.split('.').pop()?.toLowerCase() || '';
+          const contentTypeMap: Record<string, string> = {
+            'json': 'application/json',
+            'txt': 'text/plain',
+            'html': 'text/html',
+            'css': 'text/css',
+            'js': 'application/javascript',
+            'ts': 'text/plain',
+            'tsx': 'text/plain',
+            'jsx': 'text/plain',
+            'md': 'text/markdown',
+            'csv': 'text/csv',
+            'yaml': 'text/yaml',
+            'yml': 'text/yaml',
+            'log': 'text/plain',
+            'sh': 'text/plain',
+            'env': 'text/plain',
+            'png': 'image/png',
+            'jpg': 'image/jpeg',
+            'jpeg': 'image/jpeg',
+            'gif': 'image/gif',
+            'webp': 'image/webp',
+            'svg': 'image/svg+xml',
+            'pdf': 'application/pdf',
+            'xml': 'application/xml',
+          };
+          const contentType = contentTypeMap[ext] || 'application/octet-stream';
+          const base64 = content.toString('base64');
+          const url = `data:${contentType};base64,${base64}`;
+
+          return { url };
+        } catch (err) {
+          console.error('Error getting object URL:', err);
+          throw err;
+        }
+      }
+    )
+  );
 }

ts/interfaces/index.ts

@@ -199,6 +199,34 @@ export interface IReq_CopyObject extends plugins.typedrequestInterfaces.implemen
   };
 }
 
+export interface IReq_DeletePrefix extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_DeletePrefix
+> {
+  method: 'deletePrefix';
+  request: {
+    bucketName: string;
+    prefix: string;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+export interface IReq_GetObjectUrl extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetObjectUrl
+> {
+  method: 'getObjectUrl';
+  request: {
+    bucketName: string;
+    key: string;
+  };
+  response: {
+    url: string;
+  };
+}
+
 // ===========================================
 // TypedRequest interfaces for MongoDB API
 // ===========================================

ts/plugins.ts

@@ -37,6 +37,10 @@ export {
 import * as s3 from '@aws-sdk/client-s3';
 export { s3 };
 
+// MongoDB driver for ObjectId handling
+import * as mongodb from 'mongodb';
+export { mongodb };
+
 // @api.global scope
 import * as typedrequest from '@api.global/typedrequest';
 import * as typedrequestInterfaces from '@api.global/typedrequest-interfaces';

ts_web/00_commitinfo_data.ts

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

ts_web/elements/tsview-app.ts

@@ -3,6 +3,7 @@ import { apiService } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 type TViewMode = 's3' | 'mongo' | 'settings';
 
@@ -44,6 +45,18 @@ export class TsviewApp extends DeesElement {
   @state()
   private accessor newDatabaseName: string = '';
 
+  @state()
+  private accessor showS3CreateDialog: boolean = false;
+
+  @state()
+  private accessor s3CreateDialogType: 'folder' | 'file' = 'folder';
+
+  @state()
+  private accessor s3CreateDialogBucket: string = '';
+
+  @state()
+  private accessor s3CreateDialogName: string = '';
+
   public static styles = [
     cssManager.defaultStyles,
     themeStyles,
@@ -296,6 +309,20 @@ export class TsviewApp extends DeesElement {
         border-color: #e0e0e0;
       }
 
+      .dialog-location {
+        font-size: 12px;
+        color: #888;
+        margin-bottom: 12px;
+        font-family: monospace;
+      }
+
+      .dialog-hint {
+        font-size: 11px;
+        color: #666;
+        margin-bottom: 16px;
+        margin-top: -8px;
+      }
+
       .dialog-actions {
         display: flex;
         gap: 12px;
@@ -359,30 +386,6 @@ export class TsviewApp extends DeesElement {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-
-      .delete-btn {
-        opacity: 0;
-        padding: 4px;
-        background: transparent;
-        border: none;
-        color: #888;
-        cursor: pointer;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s;
-      }
-
-      .sidebar-item:hover .delete-btn,
-      .db-group-header:hover .delete-btn {
-        opacity: 1;
-      }
-
-      .delete-btn:hover {
-        background: rgba(239, 68, 68, 0.2);
-        color: #f87171;
-      }
     `,
   ];
 
@@ -495,6 +498,143 @@ export class TsviewApp extends DeesElement {
     }
   }
 
+  private handleBucketContextMenu(event: MouseEvent, bucket: string) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View Contents',
+        iconName: 'lucide:folderOpen',
+        action: async () => {
+          this.selectBucket(bucket);
+        },
+      },
+      { divider: true },
+      {
+        name: 'New Folder',
+        iconName: 'lucide:folderPlus',
+        action: async () => this.openS3CreateDialog(bucket, 'folder'),
+      },
+      {
+        name: 'New File',
+        iconName: 'lucide:filePlus',
+        action: async () => this.openS3CreateDialog(bucket, 'file'),
+      },
+      { divider: true },
+      {
+        name: 'Delete Bucket',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete bucket "${bucket}"? This will delete all objects in the bucket.`)) {
+            const success = await apiService.deleteBucket(bucket);
+            if (success) {
+              this.buckets = this.buckets.filter(b => b !== bucket);
+              if (this.selectedBucket === bucket) {
+                this.selectedBucket = this.buckets[0] || '';
+              }
+            }
+          }
+        },
+      },
+    ]);
+  }
+
+  private openS3CreateDialog(bucket: string, type: 'folder' | 'file') {
+    this.s3CreateDialogBucket = bucket;
+    this.s3CreateDialogType = type;
+    this.s3CreateDialogName = '';
+    this.showS3CreateDialog = true;
+  }
+
+  private getContentType(ext: string): string {
+    const contentTypes: Record<string, string> = {
+      json: 'application/json',
+      txt: 'text/plain',
+      html: 'text/html',
+      css: 'text/css',
+      js: 'application/javascript',
+      ts: 'text/typescript',
+      md: 'text/markdown',
+      xml: 'application/xml',
+      yaml: 'text/yaml',
+      yml: 'text/yaml',
+      csv: 'text/csv',
+    };
+    return contentTypes[ext] || 'application/octet-stream';
+  }
+
+  private getDefaultContent(ext: string): string {
+    const defaults: Record<string, string> = {
+      json: '{\n  \n}',
+      html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+      md: '# Title\n\n',
+      txt: '',
+    };
+    return defaults[ext] || '';
+  }
+
+  private async handleS3Create() {
+    if (!this.s3CreateDialogName.trim()) return;
+
+    const name = this.s3CreateDialogName.trim();
+    let path: string;
+
+    if (this.s3CreateDialogType === 'folder') {
+      path = name + '/.keep';
+    } else {
+      path = name;
+    }
+
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const contentType = this.s3CreateDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
+    const content = this.s3CreateDialogType === 'file' ? this.getDefaultContent(ext) : '';
+
+    const success = await apiService.putObject(
+      this.s3CreateDialogBucket,
+      path,
+      btoa(content),
+      contentType
+    );
+
+    if (success) {
+      this.showS3CreateDialog = false;
+      // Select the bucket to show the new content
+      this.selectedBucket = this.s3CreateDialogBucket;
+      // Trigger a refresh by dispatching an event
+      this.requestUpdate();
+    }
+  }
+
+  private handleDatabaseContextMenu(event: MouseEvent, dbName: string) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'New Collection',
+        iconName: 'lucide:folderPlus',
+        action: async () => {
+          this.selectedDatabase = dbName;
+          this.showCreateCollectionDialog = true;
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete Database',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete database "${dbName}"? This will delete all collections and documents.`)) {
+            const success = await apiService.dropDatabase(dbName);
+            if (success) {
+              this.databases = this.databases.filter(d => d.name !== dbName);
+              if (this.selectedDatabase === dbName) {
+                this.selectedDatabase = this.databases[0]?.name || '';
+                this.selectedCollection = '';
+              }
+            }
+          }
+        },
+      },
+    ]);
+  }
+
   render() {
     return html`
       <div class="app-container">
@@ -537,6 +677,7 @@ export class TsviewApp extends DeesElement {
       ${this.renderCreateBucketDialog()}
       ${this.renderCreateCollectionDialog()}
       ${this.renderCreateDatabaseDialog()}
+      ${this.renderS3CreateDialog()}
     `;
   }
 
@@ -633,6 +774,48 @@ export class TsviewApp extends DeesElement {
     `;
   }
 
+  private renderS3CreateDialog() {
+    if (!this.showS3CreateDialog) return '';
+
+    const isFolder = this.s3CreateDialogType === 'folder';
+    const title = isFolder ? 'Create New Folder' : 'Create New File';
+    const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.showS3CreateDialog = false}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">${title}</div>
+          <div class="dialog-location">
+            Location: ${this.s3CreateDialogBucket}/
+          </div>
+          <input
+            type="text"
+            class="dialog-input"
+            placeholder=${placeholder}
+            .value=${this.s3CreateDialogName}
+            @input=${(e: InputEvent) => this.s3CreateDialogName = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleS3Create()}
+          />
+          <div class="dialog-hint">
+            Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
+          </div>
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.showS3CreateDialog = false}>
+              Cancel
+            </button>
+            <button
+              class="dialog-btn dialog-btn-create"
+              ?disabled=${!this.s3CreateDialogName.trim()}
+              @click=${() => this.handleS3Create()}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   private renderSidebar() {
     if (this.viewMode === 's3') {
       return html`
@@ -653,14 +836,9 @@ export class TsviewApp extends DeesElement {
                     <div
                       class="sidebar-item ${bucket === this.selectedBucket ? 'selected' : ''}"
                       @click=${() => this.selectBucket(bucket)}
+                      @contextmenu=${(e: MouseEvent) => this.handleBucketContextMenu(e, bucket)}
                     >
                       <span class="sidebar-item-name">${bucket}</span>
-                      <button class="delete-btn" @click=${(e: Event) => this.deleteBucket(bucket, e)} title="Delete bucket">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                          <polyline points="3 6 5 6 21 6"></polyline>
-                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                        </svg>
-                      </button>
                     </div>
                   `
                 )}
@@ -680,15 +858,6 @@ export class TsviewApp extends DeesElement {
             </svg>
             New Database
           </button>
-          ${this.selectedDatabase ? html`
-            <button class="create-btn" @click=${() => this.showCreateCollectionDialog = true}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-              New Collection
-            </button>
-          ` : ''}
           <div class="sidebar-list">
             ${this.databases.length === 0
               ? html`<div class="sidebar-item" style="color: #666; cursor: default;">No databases found</div>`
@@ -715,6 +884,7 @@ export class TsviewApp extends DeesElement {
         <div
           class="db-group-header ${this.selectedDatabase === db.name ? 'selected' : ''}"
           @click=${() => this.selectDatabase(db.name)}
+          @contextmenu=${(e: MouseEvent) => this.handleDatabaseContextMenu(e, db.name)}
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
@@ -722,12 +892,6 @@ export class TsviewApp extends DeesElement {
             <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
           </svg>
           <span style="flex: 1;">${db.name}</span>
-          <button class="delete-btn" @click=${(e: Event) => this.deleteDatabase(db.name, e)} title="Delete database">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="3 6 5 6 21 6"></polyline>
-              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-            </svg>
-          </button>
         </div>
         ${this.selectedDatabase === db.name ? this.renderCollectionsList(db.name) : ''}
       </div>

ts_web/elements/tsview-mongo-collections.ts

@@ -4,6 +4,7 @@ import { formatCount } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 declare global {
   interface HTMLElementEventMap {
@@ -89,29 +90,6 @@ export class TsviewMongoCollections extends DeesElement {
         font-size: 12px;
         font-style: italic;
       }
-
-      .delete-btn {
-        opacity: 0;
-        padding: 4px;
-        background: transparent;
-        border: none;
-        color: #888;
-        cursor: pointer;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s;
-      }
-
-      .collection-item:hover .delete-btn {
-        opacity: 1;
-      }
-
-      .delete-btn:hover {
-        background: rgba(239, 68, 68, 0.2);
-        color: #f87171;
-      }
     `,
   ];
 
@@ -149,8 +127,7 @@ export class TsviewMongoCollections extends DeesElement {
     );
   }
 
-  private async deleteCollection(name: string, e: Event) {
-    e.stopPropagation();
+  private async deleteCollection(name: string) {
     if (!confirm(`Delete collection "${name}"? This will delete all documents.`)) return;
 
     const success = await apiService.dropCollection(this.databaseName, name);
@@ -166,6 +143,27 @@ export class TsviewMongoCollections extends DeesElement {
     }
   }
 
+  private handleCollectionContextMenu(event: MouseEvent, collection: IMongoCollection) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View Documents',
+        iconName: 'lucide:fileText',
+        action: async () => {
+          this.selectCollection(collection.name);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete Collection',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          await this.deleteCollection(collection.name);
+        },
+      },
+    ]);
+  }
+
   public async refresh() {
     await this.loadCollections();
   }
@@ -186,6 +184,7 @@ export class TsviewMongoCollections extends DeesElement {
             <div
               class="collection-item ${this.selectedCollection === coll.name ? 'selected' : ''}"
               @click=${() => this.selectCollection(coll.name)}
+              @contextmenu=${(e: MouseEvent) => this.handleCollectionContextMenu(e, coll)}
             >
               <span class="collection-name">
                 <svg class="collection-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -193,17 +192,9 @@ export class TsviewMongoCollections extends DeesElement {
                 </svg>
                 ${coll.name}
               </span>
-              <span style="display: flex; align-items: center; gap: 4px;">
               ${coll.count !== undefined
                 ? html`<span class="collection-count">${formatCount(coll.count)}</span>`
                 : ''}
-                <button class="delete-btn" @click=${(e: Event) => this.deleteCollection(coll.name, e)} title="Delete collection">
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="3 6 5 6 21 6"></polyline>
-                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                  </svg>
-                </button>
-              </span>
             </div>
           `
         )}

ts_web/elements/tsview-mongo-documents.ts

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

ts_web/elements/tsview-s3-columns.ts

@@ -4,6 +4,7 @@ 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;
@@ -30,6 +31,18 @@ export class TsviewS3Columns extends DeesElement {
   @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;
@@ -169,6 +182,104 @@ export class TsviewS3Columns extends DeesElement {
         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;
+      }
     `,
   ];
 
@@ -318,6 +429,221 @@ export class TsviewS3Columns extends DeesElement {
     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>`;
@@ -327,6 +653,7 @@ export class TsviewS3Columns extends DeesElement {
       <div class="columns-container">
         ${this.columns.map((column, index) => this.renderColumnWrapper(column, index))}
       </div>
+      ${this.renderCreateDialog()}
     `;
   }
 
@@ -352,7 +679,7 @@ export class TsviewS3Columns extends DeesElement {
         <div class="column-header" title=${column.prefix || this.bucketName}>
           ${headerName}
         </div>
-        <div class="column-items">
+        <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>`
             : ''}
@@ -361,6 +688,7 @@ export class TsviewS3Columns extends DeesElement {
               <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" />
@@ -377,6 +705,7 @@ export class TsviewS3Columns extends DeesElement {
               <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)}" />

ts_web/elements/tsview-s3-keys.ts

@@ -4,6 +4,7 @@ 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 {
@@ -31,6 +32,18 @@ export class TsviewS3Keys extends DeesElement {
   @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,
@@ -145,6 +158,104 @@ export class TsviewS3Keys extends DeesElement {
         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;
+      }
     `,
   ];
 
@@ -210,6 +321,218 @@ export class TsviewS3Keys extends DeesElement {
     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">
@@ -223,7 +546,7 @@ export class TsviewS3Keys extends DeesElement {
           />
         </div>
 
-        <div class="keys-list">
+        <div class="keys-list" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
           ${this.loading
             ? html`<div class="empty-state">Loading...</div>`
             : this.filteredItems.length === 0
@@ -242,6 +565,7 @@ export class TsviewS3Keys extends DeesElement {
                           <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">
@@ -270,6 +594,7 @@ export class TsviewS3Keys extends DeesElement {
                 `}
         </div>
       </div>
+      ${this.renderCreateDialog()}
     `;
   }
 }

ts_web/elements/tsview-s3-preview.ts

@@ -16,9 +16,18 @@ export class TsviewS3Preview extends DeesElement {
   @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 = '';
 
@@ -78,6 +87,15 @@ export class TsviewS3Preview extends DeesElement {
         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%;
@@ -130,6 +148,51 @@ export class TsviewS3Preview extends DeesElement {
         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;
@@ -177,7 +240,9 @@ export class TsviewS3Preview extends DeesElement {
       } else {
         this.content = '';
         this.contentType = '';
-        this.error = '';  // Clear error when no file selected
+        this.error = '';
+        this.originalTextContent = '';
+        this.hasChanges = false;
       }
     }
   }
@@ -187,6 +252,7 @@ export class TsviewS3Preview extends DeesElement {
 
     this.loading = true;
     this.error = '';
+    this.hasChanges = false;
 
     try {
       const result = await apiService.getObject(this.bucketName, this.objectKey);
@@ -194,6 +260,11 @@ export class TsviewS3Preview extends DeesElement {
       this.contentType = result.contentType;
       this.size = result.size;
       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';
@@ -270,6 +341,98 @@ export class TsviewS3Preview extends DeesElement {
     }
   }
 
+  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`
@@ -309,14 +472,27 @@ export class TsviewS3Preview extends DeesElement {
             <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">
+        <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`<pre class="preview-text">${this.getTextContent()}</pre>`
+              ? 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>
@@ -326,8 +502,19 @@ export class TsviewS3Preview extends DeesElement {
         </div>
 
         <div class="preview-actions">
+          ${this.hasChanges ? html`
+            <button class="action-btn secondary" @click=${this.handleDiscard}>Discard</button>
+            <button
+              class="action-btn primary"
+              @click=${this.handleSave}
+              ?disabled=${this.saving}
+            >
+              ${this.saving ? 'Saving...' : 'Save'}
+            </button>
+          ` : html`
             <button class="action-btn" @click=${this.handleDownload}>Download</button>
             <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
+          `}
         </div>
       </div>
     `;

ts_web/services/api.service.ts

@@ -128,6 +128,22 @@ export class ApiService {
     return result.success;
   }
 
+  async deletePrefix(bucketName: string, prefix: string): Promise<boolean> {
+    const result = await this.request<
+      { bucketName: string; prefix: string },
+      { success: boolean }
+    >('deletePrefix', { bucketName, prefix });
+    return result.success;
+  }
+
+  async getObjectUrl(bucketName: string, key: string): Promise<string> {
+    const result = await this.request<
+      { bucketName: string; key: string },
+      { url: string }
+    >('getObjectUrl', { bucketName, key });
+    return result.url;
+  }
+
   async copyObject(
     sourceBucket: string,
     sourceKey: string,