feat(s3): add S3 move (object & prefix) support: server handlers, API client methods, UI dialogs/picker, drag-and-drop and validation

changelog.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 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
 

ts/00_commitinfo_data.ts

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

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

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/tsview-s3-columns.ts

@@ -1,6 +1,6 @@
 import * as plugins from '../plugins.js';
 import { apiService, type IS3Object } from '../services/index.js';
-import { getFileName } from '../utilities/index.js';
+import { getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -74,6 +74,42 @@ export class TsviewS3Columns extends DeesElement {
   @state()
   private accessor uploadProgress: { current: number; total: number } | null = null;
 
+  // Move dialog state
+  @state()
+  private accessor showMoveDialog: boolean = false;
+
+  @state()
+  private accessor moveSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor moveDestination: string = '';
+
+  @state()
+  private accessor moveInProgress: boolean = false;
+
+  @state()
+  private accessor moveError: string | null = null;
+
+  // Move picker dialog state
+  @state()
+  private accessor showMovePickerDialog: boolean = false;
+
+  @state()
+  private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor movePickerCurrentPrefix: string = '';
+
+  @state()
+  private accessor movePickerPrefixes: string[] = [];
+
+  @state()
+  private accessor movePickerLoading: boolean = false;
+
+  // Internal drag state
+  @state()
+  private accessor draggedItem: { key: string; isFolder: boolean } | null = null;
+
   private resizing: { columnIndex: number; startX: number; startWidth: number } | null = null;
   private readonly DEFAULT_COLUMN_WIDTH = 250;
   private readonly MIN_COLUMN_WIDTH = 150;
@@ -368,6 +404,134 @@ export class TsviewS3Columns extends DeesElement {
         opacity: 0.5;
         cursor: not-allowed;
       }
+
+      /* Move dialog styles */
+      .move-summary {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+      }
+
+      .move-item {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .move-item:last-child {
+        margin-bottom: 0;
+      }
+
+      .move-label {
+        color: #888;
+        min-width: 40px;
+      }
+
+      .move-path {
+        color: #e0e0e0;
+        font-family: monospace;
+        font-size: 12px;
+        word-break: break-all;
+      }
+
+      .move-error {
+        background: rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        color: #f87171;
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 13px;
+      }
+
+      /* Move picker dialog styles */
+      .move-picker-dialog {
+        min-width: 450px;
+        max-height: 500px;
+      }
+
+      .picker-breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 6px;
+        margin-bottom: 12px;
+        font-size: 12px;
+        overflow-x: auto;
+      }
+
+      .picker-crumb {
+        color: #888;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      .picker-crumb:hover {
+        color: #fff;
+      }
+
+      .picker-separator {
+        color: #555;
+      }
+
+      .picker-list {
+        max-height: 280px;
+        overflow-y: auto;
+        border: 1px solid #333;
+        border-radius: 6px;
+        margin-bottom: 16px;
+        min-height: 100px;
+      }
+
+      .picker-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        color: #fbbf24;
+      }
+
+      .picker-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .picker-item .icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+
+      .picker-item .name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .picker-empty {
+        padding: 24px;
+        text-align: center;
+        color: #666;
+        font-size: 13px;
+      }
+
+      .column-item.dragging {
+        opacity: 0.5;
+      }
+
+      .column-item.drop-target {
+        background: rgba(59, 130, 246, 0.15) !important;
+        outline: 1px dashed rgba(59, 130, 246, 0.5);
+      }
+
+      .column-item.drop-invalid {
+        background: rgba(239, 68, 68, 0.1) !important;
+        cursor: not-allowed;
+      }
     `,
   ];
 
@@ -594,6 +758,12 @@ export class TsviewS3Columns extends DeesElement {
         },
       },
       { divider: true },
+      {
+        name: 'Move to...',
+        iconName: 'lucide:folderInput',
+        action: async () => this.openMovePickerDialog(prefix, true),
+      },
+      { divider: true },
       {
         name: 'New Folder Inside',
         iconName: 'lucide:folderPlus',
@@ -664,6 +834,12 @@ export class TsviewS3Columns extends DeesElement {
         },
       },
       { divider: true },
+      {
+        name: 'Move to...',
+        iconName: 'lucide:folderInput',
+        action: async () => this.openMovePickerDialog(key, false),
+      },
+      { divider: true },
       {
         name: 'Delete',
         iconName: 'lucide:trash2',
@@ -868,7 +1044,9 @@ export class TsviewS3Columns extends DeesElement {
   private handleColumnDragOver(e: DragEvent) {
     e.preventDefault();
     e.stopPropagation();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = this.draggedItem ? 'move' : 'copy';
+    }
   }
 
   private handleColumnDragLeave(e: DragEvent, columnIndex: number) {
@@ -885,13 +1063,25 @@ export class TsviewS3Columns extends DeesElement {
   private async handleColumnDrop(e: DragEvent, columnIndex: number) {
     e.preventDefault();
     e.stopPropagation();
+
+    const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
+
+    // Check if this is an internal move (item from within the app)
+    if (this.draggedItem) {
+      this.initiateMove(this.draggedItem.key, this.draggedItem.isFolder, targetPrefix);
+      this.draggedItem = null;
+      this.clearFolderHover();
+      this.dragCounters.clear();
+      this.dragOverColumnIndex = -1;
+      return;
+    }
+
     this.dragCounters.clear();
     this.dragOverColumnIndex = -1;
 
     const items = e.dataTransfer?.items;
     if (!items || items.length === 0) return;
 
-    const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
     this.clearFolderHover();
 
     // Collect all files (including from nested folders)
@@ -942,6 +1132,12 @@ export class TsviewS3Columns extends DeesElement {
 
   private handleFolderDragLeave(e: DragEvent, folderPrefix: string) {
     e.stopPropagation();
+    // Check if we're leaving to a child element - if so, don't cancel the hover
+    const target = e.currentTarget as HTMLElement;
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (relatedTarget && target.contains(relatedTarget)) {
+      return; // Still inside the folder, ignore this dragleave
+    }
     if (this.dragOverFolderPrefix === folderPrefix) this.dragOverFolderPrefix = null;
     if (this.folderHoverTimer) {
       clearTimeout(this.folderHoverTimer);
@@ -949,11 +1145,239 @@ export class TsviewS3Columns extends DeesElement {
     }
   }
 
+  private handleFolderDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = this.draggedItem ? 'move' : 'copy';
+    }
+  }
+
   private clearFolderHover() {
     if (this.folderHoverTimer) { clearTimeout(this.folderHoverTimer); this.folderHoverTimer = null; }
     this.dragOverFolderPrefix = null;
   }
 
+  // --- Internal drag handlers for move ---
+
+  private handleItemDragStart(e: DragEvent, key: string, isFolder: boolean) {
+    this.draggedItem = { key, isFolder };
+    e.dataTransfer?.setData('text/plain', key);
+    e.dataTransfer!.effectAllowed = 'copyMove';  // Allow both for flexibility
+    // Add visual feedback to dragged item
+    const target = e.target as HTMLElement;
+    target.classList.add('dragging');
+  }
+
+  private handleItemDragEnd(e: DragEvent) {
+    this.draggedItem = null;
+    const target = e.target as HTMLElement;
+    target.classList.remove('dragging');
+  }
+
+  // --- Move picker dialog ---
+
+  private async openMovePickerDialog(key: string, isFolder: boolean) {
+    this.movePickerSource = { key, isFolder };
+    this.movePickerCurrentPrefix = '';
+    this.showMovePickerDialog = true;
+    await this.loadMovePickerPrefixes('');
+  }
+
+  private async navigateMovePicker(prefix: string) {
+    this.movePickerCurrentPrefix = prefix;
+    await this.loadMovePickerPrefixes(prefix);
+  }
+
+  private async loadMovePickerPrefixes(prefix: string) {
+    this.movePickerLoading = true;
+    try {
+      const result = await apiService.listObjects(this.bucketName, prefix, '/');
+      this.movePickerPrefixes = result.prefixes;
+    } catch {
+      this.movePickerPrefixes = [];
+    }
+    this.movePickerLoading = false;
+  }
+
+  private selectMoveDestination(destPrefix: string) {
+    if (!this.movePickerSource) return;
+    this.closeMovePickerDialog();
+    this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
+  }
+
+  private closeMovePickerDialog() {
+    this.showMovePickerDialog = false;
+    this.movePickerSource = null;
+    this.movePickerCurrentPrefix = '';
+    this.movePickerPrefixes = [];
+  }
+
+  // --- Move confirmation dialog ---
+
+  private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
+    const validation = validateMove(sourceKey, destPrefix);
+
+    if (!validation.valid) {
+      this.moveSource = { key: sourceKey, isFolder };
+      this.moveDestination = destPrefix;
+      this.moveError = validation.error!;
+      this.showMoveDialog = true;
+      return;
+    }
+
+    this.moveSource = { key: sourceKey, isFolder };
+    this.moveDestination = destPrefix;
+    this.moveError = null;
+    this.showMoveDialog = true;
+  }
+
+  private async executeMove() {
+    if (!this.moveSource) return;
+
+    this.moveInProgress = true;
+
+    try {
+      const sourceName = getFileName(this.moveSource.key);
+      const destKey = this.moveDestination + sourceName;
+
+      let result: { success: boolean; error?: string };
+      if (this.moveSource.isFolder) {
+        result = await apiService.movePrefix(
+          this.bucketName,
+          this.moveSource.key,
+          destKey
+        );
+      } else {
+        result = await apiService.moveObject(
+          this.bucketName,
+          this.moveSource.key,
+          destKey
+        );
+      }
+
+      if (result.success) {
+        this.closeMoveDialog();
+        await this.refreshAllColumns();
+      } else {
+        this.moveError = result.error || 'Move operation failed';
+      }
+    } catch (err) {
+      this.moveError = `Error: ${err}`;
+    }
+
+    this.moveInProgress = false;
+  }
+
+  private closeMoveDialog() {
+    this.showMoveDialog = false;
+    this.moveSource = null;
+    this.moveDestination = '';
+    this.moveError = null;
+    this.moveInProgress = false;
+  }
+
+  private renderMoveDialog() {
+    if (!this.showMoveDialog || !this.moveSource) return '';
+
+    const sourceName = getFileName(this.moveSource.key);
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>
+
+          ${this.moveError ? html`
+            <div class="move-error">${this.moveError}</div>
+          ` : html`
+            <div class="move-summary">
+              <div class="move-item">
+                <span class="move-label">From:</span>
+                <span class="move-path">${this.moveSource.key}</span>
+              </div>
+              <div class="move-item">
+                <span class="move-label">To:</span>
+                <span class="move-path">${this.moveDestination}${sourceName}</span>
+              </div>
+            </div>
+          `}
+
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel"
+                    @click=${() => this.closeMoveDialog()}
+                    ?disabled=${this.moveInProgress}>
+              Cancel
+            </button>
+            ${!this.moveError ? html`
+              <button class="dialog-btn dialog-btn-create"
+                      @click=${() => this.executeMove()}
+                      ?disabled=${this.moveInProgress}>
+                ${this.moveInProgress ? 'Moving...' : 'Move'}
+              </button>
+            ` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMovePickerDialog() {
+    if (!this.showMovePickerDialog || !this.movePickerSource) return '';
+
+    const sourceName = getFileName(this.movePickerSource.key);
+    const sourceParent = getParentPrefix(this.movePickerSource.key);
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
+        <div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">Move "${sourceName}" to...</div>
+
+          <div class="picker-breadcrumb">
+            <span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
+              ${this.bucketName}
+            </span>
+            ${this.getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
+              <span class="picker-separator">/</span>
+              <span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
+                ${getFileName(seg)}
+              </span>
+            `)}
+          </div>
+
+          <div class="picker-list">
+            ${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
+            ${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
+              <div class="picker-empty">No subfolders</div>
+            ` : ''}
+            ${this.movePickerPrefixes
+              .filter(p => p !== this.movePickerSource!.key) // Hide source from list
+              .map(prefix => html`
+                <div class="picker-item"
+                     @click=${() => this.navigateMovePicker(prefix)}
+                     @dblclick=${() => this.selectMoveDestination(prefix)}>
+                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+                  </svg>
+                  <span class="name">${getFileName(prefix)}</span>
+                </div>
+              `)}
+          </div>
+
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
+              Cancel
+            </button>
+            <button class="dialog-btn dialog-btn-create"
+                    @click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
+                    ?disabled=${this.movePickerCurrentPrefix === sourceParent}>
+              Move Here
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   private async handleCreate() {
     if (!this.createDialogName.trim()) return;
 
@@ -1036,6 +1460,8 @@ export class TsviewS3Columns extends DeesElement {
         ${this.columns.map((column, index) => this.renderColumnWrapper(column, index))}
       </div>
       ${this.renderCreateDialog()}
+      ${this.renderMoveDialog()}
+      ${this.renderMovePickerDialog()}
     `;
   }
 
@@ -1076,9 +1502,13 @@ export class TsviewS3Columns extends DeesElement {
             (prefix) => html`
               <div
                 class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''} ${this.dragOverFolderPrefix === prefix ? 'drag-target' : ''}"
+                draggable="true"
                 @click=${() => this.selectFolder(index, prefix)}
                 @contextmenu=${(e: MouseEvent) => this.handleFolderContextMenu(e, index, prefix)}
+                @dragstart=${(e: DragEvent) => this.handleItemDragStart(e, prefix, true)}
+                @dragend=${(e: DragEvent) => this.handleItemDragEnd(e)}
                 @dragenter=${(e: DragEvent) => this.handleFolderDragEnter(e, prefix)}
+                @dragover=${(e: DragEvent) => this.handleFolderDragOver(e)}
                 @dragleave=${(e: DragEvent) => this.handleFolderDragLeave(e, prefix)}
               >
                 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
@@ -1095,8 +1525,11 @@ export class TsviewS3Columns extends DeesElement {
             (obj) => html`
               <div
                 class="column-item ${column.selectedItem === obj.key ? 'selected' : ''}"
+                draggable="true"
                 @click=${() => this.selectFile(index, obj.key)}
                 @contextmenu=${(e: MouseEvent) => this.handleFileContextMenu(e, index, obj.key)}
+                @dragstart=${(e: DragEvent) => this.handleItemDragStart(e, obj.key, false)}
+                @dragend=${(e: DragEvent) => this.handleItemDragEnd(e)}
               >
                 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="${this.getFileIcon(obj.key)}" />
@@ -1108,9 +1541,13 @@ export class TsviewS3Columns extends DeesElement {
         </div>
         ${this.dragOverColumnIndex === index ? html`
           <div class="drag-hint">
-            ${this.dragOverFolderPrefix
+            ${this.draggedItem
-              ? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
+              ? (this.dragOverFolderPrefix
-              : 'Drop to upload here'}
+                  ? `Move to ${getFileName(this.dragOverFolderPrefix)}`
+                  : 'Move here')
+              : (this.dragOverFolderPrefix
+                  ? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
+                  : 'Drop to upload here')}
           </div>
         ` : ''}
         ${this.uploading ? html`

ts_web/elements/tsview-s3-keys.ts

@@ -1,6 +1,6 @@
 import * as plugins from '../plugins.js';
 import { apiService, type IS3Object } from '../services/index.js';
-import { formatSize, getFileName } from '../utilities/index.js';
+import { formatSize, getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
@@ -44,6 +44,38 @@ export class TsviewS3Keys extends DeesElement {
   @state()
   private accessor createDialogName: string = '';
 
+  // Move dialog state
+  @state()
+  private accessor showMoveDialog: boolean = false;
+
+  @state()
+  private accessor moveSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor moveDestination: string = '';
+
+  @state()
+  private accessor moveInProgress: boolean = false;
+
+  @state()
+  private accessor moveError: string | null = null;
+
+  // Move picker dialog state
+  @state()
+  private accessor showMovePickerDialog: boolean = false;
+
+  @state()
+  private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;
+
+  @state()
+  private accessor movePickerCurrentPrefix: string = '';
+
+  @state()
+  private accessor movePickerPrefixes: string[] = [];
+
+  @state()
+  private accessor movePickerLoading: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     themeStyles,
@@ -256,6 +288,120 @@ export class TsviewS3Keys extends DeesElement {
         opacity: 0.5;
         cursor: not-allowed;
       }
+
+      /* Move dialog styles */
+      .move-summary {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+      }
+
+      .move-item {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .move-item:last-child {
+        margin-bottom: 0;
+      }
+
+      .move-label {
+        color: #888;
+        min-width: 40px;
+      }
+
+      .move-path {
+        color: #e0e0e0;
+        font-family: monospace;
+        font-size: 12px;
+        word-break: break-all;
+      }
+
+      .move-error {
+        background: rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        color: #f87171;
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 13px;
+      }
+
+      /* Move picker dialog styles */
+      .move-picker-dialog {
+        min-width: 450px;
+        max-height: 500px;
+      }
+
+      .picker-breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 6px;
+        margin-bottom: 12px;
+        font-size: 12px;
+        overflow-x: auto;
+      }
+
+      .picker-crumb {
+        color: #888;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      .picker-crumb:hover {
+        color: #fff;
+      }
+
+      .picker-separator {
+        color: #555;
+      }
+
+      .picker-list {
+        max-height: 280px;
+        overflow-y: auto;
+        border: 1px solid #333;
+        border-radius: 6px;
+        margin-bottom: 16px;
+        min-height: 100px;
+      }
+
+      .picker-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        color: #fbbf24;
+      }
+
+      .picker-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .picker-item .icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+
+      .picker-item .name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .picker-empty {
+        padding: 24px;
+        text-align: center;
+        color: #666;
+        font-size: 13px;
+      }
     `,
   ];
 
@@ -341,6 +487,12 @@ export class TsviewS3Keys extends DeesElement {
           },
         },
         { divider: true },
+        {
+          name: 'Move to...',
+          iconName: 'lucide:folderInput',
+          action: async () => this.openMovePickerDialog(key, true),
+        },
+        { divider: true },
         {
           name: 'New Folder Inside',
           iconName: 'lucide:folderPlus',
@@ -393,6 +545,12 @@ export class TsviewS3Keys extends DeesElement {
           },
         },
         { divider: true },
+        {
+          name: 'Move to...',
+          iconName: 'lucide:folderInput',
+          action: async () => this.openMovePickerDialog(key, false),
+        },
+        { divider: true },
         {
           name: 'Delete',
           iconName: 'lucide:trash2',
@@ -533,6 +691,223 @@ export class TsviewS3Keys extends DeesElement {
     `;
   }
 
+  // --- Helper for path segments ---
+
+  private getPathSegments(prefix: string): string[] {
+    if (!prefix) return [];
+    const parts = prefix.split('/').filter(p => p);
+    const segments: string[] = [];
+    let cumulative = '';
+    for (const part of parts) {
+      cumulative += part + '/';
+      segments.push(cumulative);
+    }
+    return segments;
+  }
+
+  // --- Move picker dialog ---
+
+  private async openMovePickerDialog(key: string, isFolder: boolean) {
+    this.movePickerSource = { key, isFolder };
+    this.movePickerCurrentPrefix = '';
+    this.showMovePickerDialog = true;
+    await this.loadMovePickerPrefixes('');
+  }
+
+  private async navigateMovePicker(prefix: string) {
+    this.movePickerCurrentPrefix = prefix;
+    await this.loadMovePickerPrefixes(prefix);
+  }
+
+  private async loadMovePickerPrefixes(prefix: string) {
+    this.movePickerLoading = true;
+    try {
+      const result = await apiService.listObjects(this.bucketName, prefix, '/');
+      this.movePickerPrefixes = result.prefixes;
+    } catch {
+      this.movePickerPrefixes = [];
+    }
+    this.movePickerLoading = false;
+  }
+
+  private selectMoveDestination(destPrefix: string) {
+    if (!this.movePickerSource) return;
+    this.closeMovePickerDialog();
+    this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
+  }
+
+  private closeMovePickerDialog() {
+    this.showMovePickerDialog = false;
+    this.movePickerSource = null;
+    this.movePickerCurrentPrefix = '';
+    this.movePickerPrefixes = [];
+  }
+
+  // --- Move confirmation dialog ---
+
+  private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
+    const validation = validateMove(sourceKey, destPrefix);
+
+    if (!validation.valid) {
+      this.moveSource = { key: sourceKey, isFolder };
+      this.moveDestination = destPrefix;
+      this.moveError = validation.error!;
+      this.showMoveDialog = true;
+      return;
+    }
+
+    this.moveSource = { key: sourceKey, isFolder };
+    this.moveDestination = destPrefix;
+    this.moveError = null;
+    this.showMoveDialog = true;
+  }
+
+  private async executeMove() {
+    if (!this.moveSource) return;
+
+    this.moveInProgress = true;
+
+    try {
+      const sourceName = getFileName(this.moveSource.key);
+      const destKey = this.moveDestination + sourceName;
+
+      let result: { success: boolean; error?: string };
+      if (this.moveSource.isFolder) {
+        result = await apiService.movePrefix(
+          this.bucketName,
+          this.moveSource.key,
+          destKey
+        );
+      } else {
+        result = await apiService.moveObject(
+          this.bucketName,
+          this.moveSource.key,
+          destKey
+        );
+      }
+
+      if (result.success) {
+        this.closeMoveDialog();
+        await this.loadObjects();
+      } else {
+        this.moveError = result.error || 'Move operation failed';
+      }
+    } catch (err) {
+      this.moveError = `Error: ${err}`;
+    }
+
+    this.moveInProgress = false;
+  }
+
+  private closeMoveDialog() {
+    this.showMoveDialog = false;
+    this.moveSource = null;
+    this.moveDestination = '';
+    this.moveError = null;
+    this.moveInProgress = false;
+  }
+
+  private renderMoveDialog() {
+    if (!this.showMoveDialog || !this.moveSource) return '';
+
+    const sourceName = getFileName(this.moveSource.key);
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>
+
+          ${this.moveError ? html`
+            <div class="move-error">${this.moveError}</div>
+          ` : html`
+            <div class="move-summary">
+              <div class="move-item">
+                <span class="move-label">From:</span>
+                <span class="move-path">${this.moveSource.key}</span>
+              </div>
+              <div class="move-item">
+                <span class="move-label">To:</span>
+                <span class="move-path">${this.moveDestination}${sourceName}</span>
+              </div>
+            </div>
+          `}
+
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel"
+                    @click=${() => this.closeMoveDialog()}
+                    ?disabled=${this.moveInProgress}>
+              Cancel
+            </button>
+            ${!this.moveError ? html`
+              <button class="dialog-btn dialog-btn-create"
+                      @click=${() => this.executeMove()}
+                      ?disabled=${this.moveInProgress}>
+                ${this.moveInProgress ? 'Moving...' : 'Move'}
+              </button>
+            ` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMovePickerDialog() {
+    if (!this.showMovePickerDialog || !this.movePickerSource) return '';
+
+    const sourceName = getFileName(this.movePickerSource.key);
+    const sourceParent = getParentPrefix(this.movePickerSource.key);
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
+        <div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">Move "${sourceName}" to...</div>
+
+          <div class="picker-breadcrumb">
+            <span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
+              ${this.bucketName}
+            </span>
+            ${this.getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
+              <span class="picker-separator">/</span>
+              <span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
+                ${getFileName(seg)}
+              </span>
+            `)}
+          </div>
+
+          <div class="picker-list">
+            ${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
+            ${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
+              <div class="picker-empty">No subfolders</div>
+            ` : ''}
+            ${this.movePickerPrefixes
+              .filter(p => p !== this.movePickerSource!.key) // Hide source from list
+              .map(prefix => html`
+                <div class="picker-item"
+                     @click=${() => this.navigateMovePicker(prefix)}
+                     @dblclick=${() => this.selectMoveDestination(prefix)}>
+                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+                  </svg>
+                  <span class="name">${getFileName(prefix)}</span>
+                </div>
+              `)}
+          </div>
+
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
+              Cancel
+            </button>
+            <button class="dialog-btn dialog-btn-create"
+                    @click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
+                    ?disabled=${this.movePickerCurrentPrefix === sourceParent}>
+              Move Here
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   render() {
     return html`
       <div class="keys-container">
@@ -595,6 +970,8 @@ export class TsviewS3Keys extends DeesElement {
         </div>
       </div>
       ${this.renderCreateDialog()}
+      ${this.renderMoveDialog()}
+      ${this.renderMovePickerDialog()}
     `;
   }
 }

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
   // ===========================================

ts_web/utilities/index.ts

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

ts_web/utilities/move-validator.ts

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