From 97435f15e588186523b6b8a3210f3828601555bc Mon Sep 17 00:00:00 2001
From: kqjy <jun@jzwsite.com>
Date: Mon, 22 Dec 2025 10:04:36 +0800
Subject: [PATCH 1/4] Revamp object bucket browser logic; Add new tests

---
 app/encrypted_storage.py       |   7 +-
 app/replication.py             |   4 +-
 app/s3_api.py                  |   4 +-
 app/storage.py                 |  97 ++++-
 app/ui.py                      |  64 ++-
 app/version.py                 |   2 +-
 pytest.ini                     |   3 +
 templates/base.html            |  11 +-
 templates/bucket_detail.html   | 712 ++++++++++++++++++++-------------
 templates/buckets.html         |   7 +-
 templates/connections.html     |   4 -
 templates/iam.html             |  18 +-
 tests/test_edge_cases.py       |   2 +-
 tests/test_storage_features.py |   2 +-
 tests/test_ui_bulk_delete.py   |   4 +-
 tests/test_ui_pagination.py    | 183 +++++++++
 tests/test_ui_policy.py        |  12 +-
 17 files changed, 800 insertions(+), 336 deletions(-)
 create mode 100644 pytest.ini
 create mode 100644 tests/test_ui_pagination.py

diff --git a/app/encrypted_storage.py b/app/encrypted_storage.py
index 2acc679..372dd1c 100644
--- a/app/encrypted_storage.py
+++ b/app/encrypted_storage.py
@@ -188,8 +188,11 @@ class EncryptedObjectStorage:
     def bucket_stats(self, bucket_name: str, cache_ttl: int = 60):
         return self.storage.bucket_stats(bucket_name, cache_ttl)
     
-    def list_objects(self, bucket_name: str):
-        return self.storage.list_objects(bucket_name)
+    def list_objects(self, bucket_name: str, **kwargs):
+        return self.storage.list_objects(bucket_name, **kwargs)
+    
+    def list_objects_all(self, bucket_name: str):
+        return self.storage.list_objects_all(bucket_name)
     
     def get_object_path(self, bucket_name: str, object_key: str):
         return self.storage.get_object_path(bucket_name, object_key)
diff --git a/app/replication.py b/app/replication.py
index 6c30a7b..a48296a 100644
--- a/app/replication.py
+++ b/app/replication.py
@@ -155,7 +155,7 @@ class ReplicationManager:
         
         try:
             # Get source objects
-            source_objects = self.storage.list_objects(bucket_name)
+            source_objects = self.storage.list_objects_all(bucket_name)
             source_keys = {obj.key: obj.size for obj in source_objects}
             
             # Get destination objects
@@ -219,7 +219,7 @@ class ReplicationManager:
             return
         
         try:
-            objects = self.storage.list_objects(bucket_name)
+            objects = self.storage.list_objects_all(bucket_name)
             logger.info(f"Starting replication of {len(objects)} existing objects from {bucket_name}")
             for obj in objects:
                 self._executor.submit(self._replicate_task, bucket_name, obj.key, rule, connection, "write")
diff --git a/app/s3_api.py b/app/s3_api.py
index f67d816..9406206 100644
--- a/app/s3_api.py
+++ b/app/s3_api.py
@@ -1155,7 +1155,7 @@ def _bucket_list_versions_handler(bucket_name: str) -> Response:
     storage = _storage()
     
     try:
-        objects = storage.list_objects(bucket_name)
+        objects = storage.list_objects_all(bucket_name)
     except StorageError as exc:
         return _error_response("NoSuchBucket", str(exc), 404)
     
@@ -1651,7 +1651,7 @@ def bucket_handler(bucket_name: str) -> Response:
             return error
         return _error_response("AccessDenied", str(exc), 403)
     try:
-        objects = storage.list_objects(bucket_name)
+        objects = storage.list_objects_all(bucket_name)
     except StorageError as exc:
         return _error_response("NoSuchBucket", str(exc), 404)
 
diff --git a/app/storage.py b/app/storage.py
index 7f91596..4875519 100644
--- a/app/storage.py
+++ b/app/storage.py
@@ -99,6 +99,15 @@ class BucketMeta:
     created_at: datetime
 
 
+@dataclass
+class ListObjectsResult:
+    """Paginated result for object listing."""
+    objects: List[ObjectMeta]
+    is_truncated: bool
+    next_continuation_token: Optional[str]
+    total_count: Optional[int] = None  # Total objects in bucket (from stats cache)
+
+
 def _utcnow() -> datetime:
     return datetime.now(timezone.utc)
 
@@ -241,31 +250,105 @@ class ObjectStorage:
         self._remove_tree(self._system_bucket_root(bucket_path.name))
         self._remove_tree(self._multipart_bucket_root(bucket_path.name))
 
-    def list_objects(self, bucket_name: str) -> List[ObjectMeta]:
+    def list_objects(
+        self,
+        bucket_name: str,
+        *,
+        max_keys: int = 1000,
+        continuation_token: Optional[str] = None,
+        prefix: Optional[str] = None,
+    ) -> ListObjectsResult:
+        """List objects in a bucket with pagination support.
+        
+        Args:
+            bucket_name: Name of the bucket
+            max_keys: Maximum number of objects to return (default 1000)
+            continuation_token: Token from previous request for pagination
+            prefix: Filter objects by key prefix
+            
+        Returns:
+            ListObjectsResult with objects, truncation status, and continuation token
+        """
         bucket_path = self._bucket_path(bucket_name)
         if not bucket_path.exists():
             raise StorageError("Bucket does not exist")
         bucket_id = bucket_path.name
 
-        objects: List[ObjectMeta] = []
+        # Collect all matching object keys first (lightweight - just paths)
+        all_keys: List[str] = []
         for path in bucket_path.rglob("*"):
             if path.is_file():
-                stat = path.stat()
                 rel = path.relative_to(bucket_path)
                 if rel.parts and rel.parts[0] in self.INTERNAL_FOLDERS:
                     continue
-                metadata = self._read_metadata(bucket_id, rel)
+                key = str(rel.as_posix())
+                if prefix and not key.startswith(prefix):
+                    continue
+                all_keys.append(key)
+        
+        all_keys.sort()
+        total_count = len(all_keys)
+        
+        # Handle continuation token (the key to start after)
+        start_index = 0
+        if continuation_token:
+            try:
+                # continuation_token is the last key from previous page
+                for i, key in enumerate(all_keys):
+                    if key > continuation_token:
+                        start_index = i
+                        break
+                else:
+                    # Token is past all keys
+                    return ListObjectsResult(
+                        objects=[],
+                        is_truncated=False,
+                        next_continuation_token=None,
+                        total_count=total_count,
+                    )
+            except Exception:
+                pass  # Invalid token, start from beginning
+        
+        # Get the slice we need
+        end_index = start_index + max_keys
+        keys_slice = all_keys[start_index:end_index]
+        is_truncated = end_index < total_count
+        
+        # Now load full metadata only for the objects we're returning
+        objects: List[ObjectMeta] = []
+        for key in keys_slice:
+            safe_key = self._sanitize_object_key(key)
+            path = bucket_path / safe_key
+            if not path.exists():
+                continue  # Object may have been deleted
+            try:
+                stat = path.stat()
+                metadata = self._read_metadata(bucket_id, safe_key)
                 objects.append(
                     ObjectMeta(
-                        key=str(rel.as_posix()),
+                        key=key,
                         size=stat.st_size,
                         last_modified=datetime.fromtimestamp(stat.st_mtime),
                         etag=self._compute_etag(path),
                         metadata=metadata or None,
                     )
                 )
-        objects.sort(key=lambda meta: meta.key)
-        return objects
+            except OSError:
+                continue  # File may have been deleted during iteration
+        
+        next_token = keys_slice[-1] if is_truncated and keys_slice else None
+        
+        return ListObjectsResult(
+            objects=objects,
+            is_truncated=is_truncated,
+            next_continuation_token=next_token,
+            total_count=total_count,
+        )
+
+    def list_objects_all(self, bucket_name: str) -> List[ObjectMeta]:
+        """List all objects in a bucket (no pagination). Use with caution for large buckets."""
+        result = self.list_objects(bucket_name, max_keys=100000)
+        return result.objects
 
     def put_object(
         self,
diff --git a/app/ui.py b/app/ui.py
index 96f807a..2d2936f 100644
--- a/app/ui.py
+++ b/app/ui.py
@@ -294,7 +294,9 @@ def bucket_detail(bucket_name: str):
     storage = _storage()
     try:
         _authorize_ui(principal, bucket_name, "list")
-        objects = storage.list_objects(bucket_name)
+        # Don't load objects here - UI fetches them asynchronously via /buckets/<name>/objects
+        if not storage.bucket_exists(bucket_name):
+            raise StorageError("Bucket does not exist")
     except (StorageError, IamError) as exc:
         flash(_friendly_error_message(exc), "danger")
         return redirect(url_for("ui.buckets_overview"))
@@ -382,10 +384,13 @@ def bucket_detail(bucket_name: str):
     except IamError:
         pass
 
+    # Pass the objects API endpoint URL for async loading
+    objects_api_url = url_for("ui.list_bucket_objects", bucket_name=bucket_name)
+
     return render_template(
         "bucket_detail.html",
         bucket_name=bucket_name,
-        objects=objects,
+        objects_api_url=objects_api_url,
         principal=principal,
         bucket_policy_text=policy_text,
         bucket_policy=bucket_policy,
@@ -408,6 +413,61 @@ def bucket_detail(bucket_name: str):
     )
 
 
+@ui_bp.get("/buckets/<bucket_name>/objects")
+def list_bucket_objects(bucket_name: str):
+    """API endpoint for paginated object listing."""
+    principal = _current_principal()
+    storage = _storage()
+    try:
+        _authorize_ui(principal, bucket_name, "list")
+    except IamError as exc:
+        return jsonify({"error": str(exc)}), 403
+
+    max_keys = min(int(request.args.get("max_keys", 100)), 1000)
+    continuation_token = request.args.get("continuation_token") or None
+    prefix = request.args.get("prefix") or None
+
+    try:
+        result = storage.list_objects(
+            bucket_name,
+            max_keys=max_keys,
+            continuation_token=continuation_token,
+            prefix=prefix,
+        )
+    except StorageError as exc:
+        return jsonify({"error": str(exc)}), 400
+
+    try:
+        versioning_enabled = storage.is_versioning_enabled(bucket_name)
+    except StorageError:
+        versioning_enabled = False
+
+    objects_data = []
+    for obj in result.objects:
+        objects_data.append({
+            "key": obj.key,
+            "size": obj.size,
+            "last_modified": obj.last_modified.isoformat(),
+            "last_modified_display": obj.last_modified.strftime("%b %d, %Y %H:%M"),
+            "etag": obj.etag,
+            "metadata": obj.metadata or {},
+            "preview_url": url_for("ui.object_preview", bucket_name=bucket_name, object_key=obj.key),
+            "download_url": url_for("ui.object_preview", bucket_name=bucket_name, object_key=obj.key) + "?download=1",
+            "presign_endpoint": url_for("ui.object_presign", bucket_name=bucket_name, object_key=obj.key),
+            "delete_endpoint": url_for("ui.delete_object", bucket_name=bucket_name, object_key=obj.key),
+            "versions_endpoint": url_for("ui.object_versions", bucket_name=bucket_name, object_key=obj.key),
+            "restore_template": url_for("ui.restore_object_version", bucket_name=bucket_name, object_key=obj.key, version_id="VERSION_ID_PLACEHOLDER"),
+        })
+
+    return jsonify({
+        "objects": objects_data,
+        "is_truncated": result.is_truncated,
+        "next_continuation_token": result.next_continuation_token,
+        "total_count": result.total_count,
+        "versioning_enabled": versioning_enabled,
+    })
+
+
 @ui_bp.post("/buckets/<bucket_name>/upload")
 @limiter.limit("30 per minute")
 def upload_object(bucket_name: str):
diff --git a/app/version.py b/app/version.py
index 78d120a..bd1e371 100644
--- a/app/version.py
+++ b/app/version.py
@@ -1,7 +1,7 @@
 """Central location for the application version string."""
 from __future__ import annotations
 
-APP_VERSION = "0.1.6"
+APP_VERSION = "0.1.7"
 
 
 def get_version() -> str:
diff --git a/pytest.ini b/pytest.ini
new file mode 100644
index 0000000..3271334
--- /dev/null
+++ b/pytest.ini
@@ -0,0 +1,3 @@
+[pytest]
+testpaths = tests
+norecursedirs = data .git __pycache__ .venv
diff --git a/templates/base.html b/templates/base.html
index 67f71b5..e3c3055 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -199,7 +199,7 @@
       })();
     </script>
     <script>
-      // Toast utility
+
       window.showToast = function(message, title = 'Notification', type = 'info') {
         const toastEl = document.getElementById('liveToast');
         const toastTitle = document.getElementById('toastTitle');
@@ -207,8 +207,7 @@
         
         toastTitle.textContent = title;
         toastMessage.textContent = message;
-        
-        // Reset classes
+
         toastEl.classList.remove('text-bg-primary', 'text-bg-success', 'text-bg-danger', 'text-bg-warning');
         
         if (type === 'success') toastEl.classList.add('text-bg-success');
@@ -221,13 +220,11 @@
     </script>
     <script>
       (function () {
-        // Show flashed messages as toasts
+
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
           {% for category, message in messages %}
-            // Map Flask categories to Toast types
-            // Flask: success, danger, warning, info
-            // Toast: success, error, warning, info
+
             var type = "{{ category }}";
             if (type === "danger") type = "error";
             window.showToast({{ message | tojson | safe }}, "Notification", type);
diff --git a/templates/bucket_detail.html b/templates/bucket_detail.html
index c56b059..1062172 100644
--- a/templates/bucket_detail.html
+++ b/templates/bucket_detail.html
@@ -26,7 +26,10 @@
               </svg>
               {{ 'Versioning On' if versioning_enabled else 'Versioning Off' }}
             </span>
-            <span class="text-muted small">{{ objects|length }} object{{ 's' if objects|length != 1 else '' }}</span>
+            <span class="text-muted small" id="object-count-badge">
+              <span class="spinner-border spinner-border-sm" role="status" style="width: 0.75rem; height: 0.75rem;"></span>
+              Loading...
+            </span>
           </div>
         </div>
       </div>
@@ -42,7 +45,6 @@
     </div>
   </div>
 
-  <!-- Navigation Tabs -->
   <ul class="nav nav-tabs border-bottom-0" id="bucketTabs" role="tablist">
     <li class="nav-item" role="presentation">
       <button class="nav-link {{ 'active' if active_tab == 'objects' else '' }}" id="objects-tab" data-bs-toggle="tab" data-bs-target="#objects-pane" type="button" role="tab" aria-controls="objects-pane" aria-selected="{{ 'true' if active_tab == 'objects' else 'false' }}">
@@ -68,10 +70,8 @@
     {% endif %}
   </ul>
 
-  <!-- Tab Content -->
   <div class="tab-content" id="bucketTabsContent">
     
-    <!-- Objects Tab -->
     <div class="tab-pane fade {{ 'show active' if active_tab == 'objects' else '' }}" id="objects-pane" role="tabpanel" aria-labelledby="objects-tab" tabindex="0">
 <div class="row g-4">
   <div class="col-lg-7">
@@ -102,7 +102,6 @@
             Download
           </button>
         </div>
-        <!-- Folder breadcrumb navigation -->
         <nav id="folder-breadcrumb" class="mt-2 d-none" aria-label="Folder navigation">
           <ol class="breadcrumb mb-0 small">
             <li class="breadcrumb-item">
@@ -121,6 +120,7 @@
         id="objects-drop-zone"
         data-bucket="{{ bucket_name }}"
         data-versioning="{{ 'true' if versioning_enabled else 'false' }}"
+        data-objects-api="{{ objects_api_url }}"
         data-bulk-delete-endpoint="{{ url_for('ui.bulk_delete_objects', bucket_name=bucket_name) }}"
         data-bulk-download-endpoint="{{ url_for('ui.bulk_download_objects', bucket_name=bucket_name) }}"
       >
@@ -136,85 +136,39 @@
             </tr>
           </thead>
           <tbody>
-            {% for obj in objects %}
-            <tr
-              data-object-row
-              data-key="{{ obj.key }}"
-              data-size="{{ obj.size }}"
-              data-last-modified="{{ obj.last_modified.isoformat() }}"
-              data-etag="{{ obj.etag }}"
-              data-preview-url="{{ url_for('ui.object_preview', bucket_name=bucket_name, object_key=obj.key) }}"
-              data-download-url="{{ url_for('ui.object_preview', bucket_name=bucket_name, object_key=obj.key) }}?download=1"
-              data-presign-endpoint="{{ url_for('ui.object_presign', bucket_name=bucket_name, object_key=obj.key) }}"
-              data-delete-endpoint="{{ url_for('ui.delete_object', bucket_name=bucket_name, object_key=obj.key) }}"
-              data-metadata='{{ (obj.metadata or {}) | tojson | safe }}'
-              data-versions-endpoint="{{ url_for('ui.object_versions', bucket_name=bucket_name, object_key=obj.key) }}"
-              data-restore-template="{{ url_for('ui.restore_object_version', bucket_name=bucket_name, object_key=obj.key, version_id='VERSION_ID_PLACEHOLDER') }}"
-            >
-              <td class="text-center align-middle">
-                <input class="form-check-input" type="checkbox" data-object-select aria-label="Select {{ obj.key }}" />
-              </td>
-              <td class="object-key text-break" title="{{ obj.key }}">
-                <div class="fw-medium">{{ obj.key }}</div>
-                <div class="text-muted small">Modified {{ obj.last_modified.strftime('%b %d, %Y %H:%M') }}</div>
-              </td>
-              <td class="text-end text-nowrap">
-                <span class="text-muted small">{{ obj.size | filesizeformat }}</span>
-              </td>
-              <td class="text-end">
-                <div class="btn-group btn-group-sm" role="group">
-                  <a
-                    class="btn btn-outline-primary btn-icon"
-                    href="{{ url_for('ui.object_preview', bucket_name=bucket_name, object_key=obj.key) }}?download=1"
-                    target="_blank"
-                    title="Download"
-                    aria-label="Download"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" aria-hidden="true">
-                      <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
-                      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
-                    </svg>
-                  </a>
-                  <button
-                    type="button"
-                    class="btn btn-outline-danger btn-icon"
-                    data-delete-object
-                    title="Delete"
-                    aria-label="Delete"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16" aria-hidden="true">
-                      <path d="M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm3 .5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0z" />
-                      <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            {% else %}
-            <tr>
+            <tr id="objects-loading-row">
               <td colspan="4" class="py-5">
-                <div class="empty-state">
-                  <div class="empty-state-icon mx-auto" style="width: 64px; height: 64px;">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
-                      <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-                      <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
-                    </svg>
+                <div class="text-center">
+                  <div class="spinner-border text-primary mb-3" role="status">
+                    <span class="visually-hidden">Loading...</span>
                   </div>
-                  <h6 class="mb-2">No objects yet</h6>
-                  <p class="text-muted small mb-3">Drag and drop files here or click Upload to get started.</p>
-                  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#uploadModal">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
-                      <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-                      <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
-                    </svg>
-                    Upload Files
-                  </button>
+                  <p class="text-muted mb-0">Loading objects...</p>
                 </div>
               </td>
             </tr>
-            {% endfor %}
           </tbody>
         </table>
+        <div id="scroll-sentinel" style="height: 1px;"></div>
+      </div>
+      <div id="load-more-container" class="text-center py-2 d-none border-top">
+        <div id="load-more-spinner" class="d-none">
+          <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+          <span class="text-muted small">Loading more objects...</span>
+        </div>
+        <p id="load-more-status" class="text-muted small mb-0"></p>
+      </div>
+      <div id="pagination-controls" class="card-footer d-flex justify-content-center align-items-center gap-1 py-1 bg-body-tertiary" style="font-size: 0.75rem;">
+        <span class="text-muted">Load</span>
+        <select id="page-size-select" class="form-select form-select-sm py-0" style="width: auto; font-size: 0.75rem;">
+          <option value="50">50</option>
+          <option value="100" selected>100</option>
+          <option value="150">150</option>
+          <option value="200">200</option>
+          <option value="250">250</option>
+        </select>
+        <span class="text-muted">per page</span>
       </div>
     </div>
   </div>
@@ -320,10 +274,8 @@
 </div>
 </div>
 
-    <!-- Permissions Tab -->
     <div class="tab-pane fade {{ 'show active' if active_tab == 'permissions' else '' }}" id="permissions-pane" role="tabpanel" aria-labelledby="permissions-tab" tabindex="0">
       <div class="row g-4">
-        <!-- Main Content -->
         <div class="col-lg-8">
           <div class="card shadow-sm" id="bucket-policy-card">
             <div class="card-header d-flex align-items-center">
@@ -333,7 +285,6 @@
               <span class="fw-semibold">Bucket Policy</span>
             </div>
             <div class="card-body">
-              <!-- Status Banner -->
               {% if bucket_policy %}
               <div class="alert alert-info d-flex align-items-start mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
@@ -368,7 +319,6 @@
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <input type="hidden" name="mode" value="upsert" id="policyMode" />
                 
-                <!-- Policy Preset Selector -->
                 <div class="mb-4">
                   <label class="form-label fw-semibold">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
@@ -400,7 +350,6 @@
                   <input type="hidden" id="policyPreset" name="preset" value="{{ preset_choice }}" data-default="{{ preset_choice }}">
                 </div>
 
-                <!-- Policy Document Editor -->
                 <div class="mb-3">
                   <label class="form-label fw-semibold">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
@@ -443,7 +392,6 @@
           </div>
         </div>
 
-        <!-- Sidebar -->
         <div class="col-lg-4">
           <div class="card bg-body-tertiary border-0">
             <div class="card-body">
@@ -478,12 +426,9 @@
       </div>
     </div>
 
-    <!-- Properties Tab -->
     <div class="tab-pane fade {{ 'show active' if active_tab == 'properties' else '' }}" id="properties-pane" role="tabpanel" aria-labelledby="properties-tab" tabindex="0">
       <div class="row g-4">
-        <!-- Main Content -->
         <div class="col-lg-8">
-          <!-- Versioning Card -->
           <div class="card shadow-sm" id="bucket-versioning-card">
             <div class="card-header d-flex align-items-center">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="text-primary me-2" viewBox="0 0 16 16">
@@ -493,7 +438,6 @@
               <span class="fw-semibold">Versioning</span>
             </div>
             <div class="card-body">
-              <!-- Status Banner -->
               {% if versioning_enabled %}
               <div class="alert alert-success d-flex align-items-start mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
@@ -550,7 +494,6 @@
             </div>
           </div>
 
-          <!-- Archived Objects Card -->
           {% if versioning_enabled %}
           <div
             class="card shadow-sm mt-4"
@@ -608,7 +551,6 @@
           </div>
           {% endif %}
 
-          <!-- Encryption Card -->
           {% if encryption_enabled %}
           <div class="card shadow-sm mt-4" id="bucket-encryption-card">
             <div class="card-header d-flex align-items-center">
@@ -625,7 +567,6 @@
               {% set enc_kms_key = enc_default.get('KMSMasterKeyID', '') %}
               
               {% if enc_algorithm %}
-              <!-- Encryption Enabled State -->
               <div class="alert alert-success d-flex align-items-start mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
                   <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
@@ -643,7 +584,6 @@
                 </div>
               </div>
               {% else %}
-              <!-- Encryption Disabled State -->
               <div class="alert alert-secondary d-flex align-items-start mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
                   <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -661,7 +601,6 @@
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <input type="hidden" name="action" value="enable" id="encryptionAction" />
                 
-                <!-- Algorithm Selection -->
                 <div class="mb-3">
                   <label class="form-label fw-medium">Encryption Algorithm</label>
                   <div class="card border">
@@ -686,7 +625,6 @@
                   </div>
                 </div>
 
-                <!-- KMS Key Selection (visible only when KMS is selected) -->
                 {% if kms_enabled %}
                 <div class="mb-4" id="kmsKeySection" style="{{ 'display: none;' if enc_algorithm != 'aws:kms' else '' }}">
                   <label for="kms_key_id" class="form-label fw-medium">KMS Key</label>
@@ -731,7 +669,6 @@
           </div>
           {% endif %}
 
-          <!-- Storage Quota Card -->
           <div class="card shadow-sm mt-4" id="bucket-quota-card">
             <div class="card-header d-flex align-items-center">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="text-primary me-2" viewBox="0 0 16 16">
@@ -750,7 +687,6 @@
               {% set version_bytes = bucket_stats.get('version_bytes', 0) %}
               {% set total_bytes = bucket_stats.get('total_bytes', current_bytes) %}
               
-              <!-- Current Usage Display -->
               <div class="mb-4">
                 <h6 class="small fw-semibold mb-3">Current Usage</h6>
                 <div class="row g-3">
@@ -798,7 +734,6 @@
               </div>
 
               {% if has_quota %}
-              <!-- Quota Enabled State -->
               <div class="alert alert-info d-flex align-items-start mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
                   <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
@@ -817,7 +752,6 @@
                 </div>
               </div>
               {% else %}
-              <!-- Quota Disabled State -->
               <div class="alert alert-secondary d-flex align-items-start mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
                   <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -834,7 +768,6 @@
               <form method="post" action="{{ url_for('ui.update_bucket_quota', bucket_name=bucket_name) }}" id="quotaForm">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 
-                <!-- Max Storage -->
                 <div class="mb-3">
                   <label for="max_mb" class="form-label fw-medium">Maximum Storage Size</label>
                   <div class="input-group">
@@ -846,7 +779,6 @@
                   <div class="form-text">Minimum 1 MB. Leave empty for unlimited.</div>
                 </div>
 
-                <!-- Max Objects -->
                 <div class="mb-4">
                   <label for="max_objects" class="form-label fw-medium">Maximum Object Count</label>
                   <input type="number" class="form-control" id="max_objects" name="max_objects" 
@@ -884,7 +816,6 @@
           </div>
         </div>
 
-        <!-- Sidebar -->
         <div class="col-lg-4">
           <div class="card bg-body-tertiary border-0">
             <div class="card-body">
@@ -965,7 +896,6 @@
     </div>
 
     {% if can_manage_replication %}
-    <!-- Replication Tab -->
     <div class="tab-pane fade {{ 'show active' if active_tab == 'replication' else '' }}" id="replication-pane" role="tabpanel" aria-labelledby="replication-tab" tabindex="0">
       <div class="row g-4">
         <div class="col-lg-8">
@@ -979,7 +909,6 @@
             </div>
             <div class="card-body">
               {% if replication_rule and replication_rule.enabled %}
-              <!-- Replication Active State -->
               <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
                   <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
@@ -994,7 +923,6 @@
                 </div>
               </div>
               
-              <!-- Replication Stats Cards (loaded asynchronously) -->
               <div class="row g-3 mb-4" id="replication-stats-cards" data-status-endpoint="{{ url_for('ui.get_replication_status', bucket_name=bucket_name) }}">
                 <div class="col-6 col-lg">
                   <div class="card bg-body-tertiary border-0 h-100">
@@ -1085,7 +1013,6 @@
                 <span data-stat="last-sync-key"></span>
               </div>
               
-              <!-- Current Rule Details -->
               <h6 class="text-muted text-uppercase small mb-3">Replication Target</h6>
               <div class="card border mb-4">
                 <div class="card-body">
@@ -1137,7 +1064,6 @@
                   </svg>
                   Refresh
                 </a>
-                <!-- Pause button - available to users with replication permission -->
                 <form method="POST" action="{{ url_for('ui.update_bucket_replication', bucket_name=bucket_name) }}" class="d-inline">
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                   <input type="hidden" name="action" value="pause">
@@ -1149,7 +1075,6 @@
                   </button>
                 </form>
                 {% if is_replication_admin %}
-                <!-- Delete button - admin only -->
                 <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#disableReplicationModal">
                   <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                     <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
@@ -1161,7 +1086,6 @@
               </div>
 
               {% elif replication_rule and not replication_rule.enabled %}
-              <!-- Replication Paused State -->
               <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
                   <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/>
@@ -1172,7 +1096,6 @@
                 </div>
               </div>
               
-              <!-- Show target info even when paused -->
               <h6 class="text-muted text-uppercase small mb-3">Replication Target</h6>
               <div class="card border mb-4">
                 <div class="card-body">
@@ -1209,7 +1132,6 @@
               </div>
               
               <div class="d-flex gap-2">
-                <!-- Resume button -->
                 <form method="POST" action="{{ url_for('ui.update_bucket_replication', bucket_name=bucket_name) }}" class="d-inline">
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                   <input type="hidden" name="action" value="resume">
@@ -1221,7 +1143,6 @@
                   </button>
                 </form>
                 {% if is_replication_admin %}
-                <!-- Delete button - admin only -->
                 <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#disableReplicationModal">
                   <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                     <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
@@ -1233,7 +1154,6 @@
               </div>
               
               {% else %}
-              <!-- Replication Not Configured State -->
               <div class="text-center py-4">
                 <div class="rounded-circle bg-body-tertiary d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
@@ -1371,7 +1291,6 @@
   </div>
 </div>
 
-<!-- Delete Policy Modal -->
 <div class="modal fade" id="deletePolicyModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1408,7 +1327,6 @@
   </div>
 </div>
 
-<!-- Upload Modal -->
 <div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-centered">
     <div class="modal-content">
@@ -1526,7 +1444,6 @@
   </div>
 </div>
 
-<!-- Delete bucket modal -->
 <div class="modal fade" id="deleteBucketModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1570,7 +1487,6 @@
   </div>
 </div>
 
-<!-- Message modal -->
 <div class="modal fade" id="messageModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1592,7 +1508,6 @@
   </div>
 </div>
 
-<!-- Bulk delete modal -->
 <div class="modal fade" id="bulkDeleteModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1641,7 +1556,6 @@
   </div>
 </div>
 
-<!-- Delete object modal -->
 <div class="modal fade" id="deleteObjectModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1693,7 +1607,6 @@
   </div>
 </div>
 
-<!-- Presign modal -->
 <div class="modal fade" id="presignModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1749,7 +1662,6 @@
   </div>
 </div>
 
-<!-- Disable Replication Modal -->
 <div class="modal fade" id="disableReplicationModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -1819,7 +1731,6 @@
       .replace(/'/g, '&#039;');
   };
 
-  const rows = document.querySelectorAll('[data-object-row]');
   const selectAllCheckbox = document.querySelector('[data-select-all]');
   const bulkDeleteButton = document.querySelector('[data-bulk-delete-trigger]');
   const bulkDeleteLabel = bulkDeleteButton?.querySelector('[data-bulk-delete-label]');
@@ -1871,6 +1782,7 @@
   let isGeneratingPresign = false;
   const objectsContainer = document.querySelector('.objects-table-container[data-bucket]');
   const bulkDeleteEndpoint = objectsContainer?.dataset.bulkDeleteEndpoint || '';
+  const objectsApiUrl = objectsContainer?.dataset.objectsApi || '';
   const versionPanel = document.getElementById('version-panel');
   const versionList = document.getElementById('version-list');
   const refreshVersionsButton = document.getElementById('refreshVersionsButton');
@@ -1879,7 +1791,7 @@
   const archivedCountBadge = archivedCard?.querySelector('[data-archived-count]');
   const archivedRefreshButton = archivedCard?.querySelector('[data-archived-refresh]');
   const archivedEndpoint = archivedCard?.dataset.archivedEndpoint;
-  const versioningEnabled = objectsContainer?.dataset.versioning === 'true';
+  let versioningEnabled = objectsContainer?.dataset.versioning === 'true';
   const versionsCache = new Map();
   let activeRow = null;
   const selectedRows = new Map();
@@ -1888,34 +1800,339 @@
   if (generatePresignButton) generatePresignButton.disabled = true;
   if (downloadButton) downloadButton.classList.add('disabled');
 
-  // ========== Folder Navigation ==========
+  const objectCountBadge = document.getElementById('object-count-badge');
+  const loadMoreContainer = document.getElementById('load-more-container');
+  const loadMoreSpinner = document.getElementById('load-more-spinner');
+  const loadMoreStatus = document.getElementById('load-more-status');
+  const objectsLoadingRow = document.getElementById('objects-loading-row');
+  let nextContinuationToken = null;
+  let totalObjectCount = 0;
+  let loadedObjectCount = 0;
+  let isLoadingObjects = false;
+  let hasMoreObjects = false;
+  let currentFilterTerm = '';
+  let pageSize = 100;
+
+  const createObjectRow = (obj) => {
+    const tr = document.createElement('tr');
+    tr.dataset.objectRow = '';
+    tr.dataset.key = obj.key;
+    tr.dataset.size = obj.size;
+    tr.dataset.lastModified = obj.last_modified;
+    tr.dataset.etag = obj.etag;
+    tr.dataset.previewUrl = obj.preview_url;
+    tr.dataset.downloadUrl = obj.download_url;
+    tr.dataset.presignEndpoint = obj.presign_endpoint;
+    tr.dataset.deleteEndpoint = obj.delete_endpoint;
+    tr.dataset.metadata = JSON.stringify(obj.metadata || {});
+    tr.dataset.versionsEndpoint = obj.versions_endpoint;
+    tr.dataset.restoreTemplate = obj.restore_template;
+
+    tr.innerHTML = `
+      <td class="text-center align-middle">
+        <input class="form-check-input" type="checkbox" data-object-select aria-label="Select ${escapeHtml(obj.key)}" />
+      </td>
+      <td class="object-key text-break" title="${escapeHtml(obj.key)}">
+        <div class="fw-medium">${escapeHtml(obj.key)}</div>
+        <div class="text-muted small">Modified ${escapeHtml(obj.last_modified_display)}</div>
+      </td>
+      <td class="text-end text-nowrap">
+        <span class="text-muted small">${formatBytes(obj.size)}</span>
+      </td>
+      <td class="text-end">
+        <div class="btn-group btn-group-sm" role="group">
+          <a
+            class="btn btn-outline-primary btn-icon"
+            href="${escapeHtml(obj.download_url)}"
+            target="_blank"
+            title="Download"
+            aria-label="Download"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" aria-hidden="true">
+              <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
+              <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
+            </svg>
+          </a>
+          <button
+            type="button"
+            class="btn btn-outline-danger btn-icon"
+            data-delete-object
+            title="Delete"
+            aria-label="Delete"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16" aria-hidden="true">
+              <path d="M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm3 .5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0z" />
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+            </svg>
+          </button>
+        </div>
+      </td>
+    `;
+
+    return tr;
+  };
+
+  const showEmptyState = () => {
+    if (!objectsTableBody) return;
+    objectsTableBody.innerHTML = `
+      <tr>
+        <td colspan="4" class="py-5">
+          <div class="empty-state">
+            <div class="empty-state-icon mx-auto" style="width: 64px; height: 64px;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
+              </svg>
+            </div>
+            <h6 class="mb-2">No objects yet</h6>
+            <p class="text-muted small mb-3">Drag and drop files here or click Upload to get started.</p>
+            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#uploadModal">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
+              </svg>
+              Upload Files
+            </button>
+          </div>
+        </td>
+      </tr>
+    `;
+  };
+
+  const showLoadError = (message) => {
+    if (!objectsTableBody) return;
+    objectsTableBody.innerHTML = `
+      <tr>
+        <td colspan="4" class="py-5">
+          <div class="text-center text-danger">
+            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="mb-2" viewBox="0 0 16 16">
+              <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </svg>
+            <p class="mb-2">Failed to load objects</p>
+            <p class="small text-muted mb-3">${escapeHtml(message)}</p>
+            <button class="btn btn-outline-primary btn-sm" onclick="loadObjects()">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+              </svg>
+              Retry
+            </button>
+          </div>
+        </td>
+      </tr>
+    `;
+  };
+
+  const updateObjectCountBadge = () => {
+    if (!objectCountBadge) return;
+    if (totalObjectCount === 0) {
+      objectCountBadge.textContent = '0 objects';
+    } else {
+      objectCountBadge.textContent = `${totalObjectCount.toLocaleString()} object${totalObjectCount !== 1 ? 's' : ''}`;
+    }
+  };
+
+  const loadObjects = async (append = false) => {
+    if (isLoadingObjects) return;
+    isLoadingObjects = true;
+
+    if (!append) {
+
+      if (objectsLoadingRow) objectsLoadingRow.style.display = '';
+      nextContinuationToken = null;
+      loadedObjectCount = 0;
+      allObjects = [];
+    }
+
+    // Show loading spinner when loading more
+    if (append && loadMoreSpinner) {
+      loadMoreSpinner.classList.remove('d-none');
+    }
+
+    try {
+      const params = new URLSearchParams({ max_keys: String(pageSize) });
+      if (nextContinuationToken) {
+        params.set('continuation_token', nextContinuationToken);
+      }
+
+      const response = await fetch(`${objectsApiUrl}?${params}`);
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error || `HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      versioningEnabled = data.versioning_enabled;
+      if (objectsContainer) {
+        objectsContainer.dataset.versioning = versioningEnabled ? 'true' : 'false';
+      }
+
+      totalObjectCount = data.total_count || 0;
+      nextContinuationToken = data.next_continuation_token;
+
+      if (!append) {
+
+        if (objectsLoadingRow) objectsLoadingRow.remove();
+        
+        if (data.objects.length === 0) {
+          showEmptyState();
+          updateObjectCountBadge();
+          isLoadingObjects = false;
+          return;
+        }
+
+        objectsTableBody.innerHTML = '';
+      }
+
+      data.objects.forEach(obj => {
+        const row = createObjectRow(obj);
+        objectsTableBody.appendChild(row);
+        loadedObjectCount++;
+
+        // Apply current filter to newly loaded objects
+        if (currentFilterTerm) {
+          const keyLower = obj.key.toLowerCase();
+          row.style.display = keyLower.includes(currentFilterTerm) ? '' : 'none';
+        }
+
+        allObjects.push({
+          key: obj.key,
+          size: obj.size,
+          lastModified: obj.last_modified,
+          etag: obj.etag,
+          previewUrl: obj.preview_url,
+          downloadUrl: obj.download_url,
+          presignEndpoint: obj.presign_endpoint,
+          deleteEndpoint: obj.delete_endpoint,
+          metadata: JSON.stringify(obj.metadata || {}),
+          versionsEndpoint: obj.versions_endpoint,
+          restoreTemplate: obj.restore_template,
+          element: row
+        });
+      });
+
+      updateObjectCountBadge();
+
+      // Track if there are more objects to load
+      hasMoreObjects = data.is_truncated;
+      
+      if (data.is_truncated && loadMoreContainer) {
+        loadMoreContainer.classList.remove('d-none');
+        if (loadMoreStatus) {
+          loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()} of ${totalObjectCount.toLocaleString()} objects loaded • Scroll down to load more`;
+        }
+      } else if (loadMoreContainer) {
+        // Show the container but update status to show all loaded
+        if (loadMoreStatus) {
+          loadMoreStatus.textContent = `All ${loadedObjectCount.toLocaleString()} objects loaded`;
+        }
+        // Keep container visible but hide spinner
+        loadMoreContainer.classList.remove('d-none');
+      }
+
+      if (typeof initFolderNavigation === 'function') {
+        initFolderNavigation();
+      }
+
+      attachRowHandlers();
+
+    } catch (error) {
+      console.error('Failed to load objects:', error);
+      if (!append) {
+        showLoadError(error.message);
+      } else {
+        showMessage({ title: 'Load Failed', body: error.message, variant: 'danger' });
+      }
+    } finally {
+      isLoadingObjects = false;
+      // Hide loading spinner
+      if (loadMoreSpinner) {
+        loadMoreSpinner.classList.add('d-none');
+      }
+    }
+  };
+
+  const attachRowHandlers = () => {
+    const objectRows = document.querySelectorAll('[data-object-row]');
+    objectRows.forEach(row => {
+
+      if (row.dataset.handlersAttached) return;
+      row.dataset.handlersAttached = 'true';
+
+      const deleteBtn = row.querySelector('[data-delete-object]');
+      deleteBtn?.addEventListener('click', (e) => {
+        e.stopPropagation();
+
+        const deleteModalEl = document.getElementById('deleteObjectModal');
+        const deleteModal = deleteModalEl ? bootstrap.Modal.getOrCreateInstance(deleteModalEl) : null;
+        const deleteObjectForm = document.getElementById('deleteObjectForm');
+        const deleteObjectKey = document.getElementById('deleteObjectKey');
+        if (deleteModal && deleteObjectForm) {
+          deleteObjectForm.action = row.dataset.deleteEndpoint;
+          if (deleteObjectKey) deleteObjectKey.textContent = row.dataset.key;
+          deleteModal.show();
+        }
+      });
+
+      const selectCheckbox = row.querySelector('[data-object-select]');
+      selectCheckbox?.addEventListener('click', (event) => event.stopPropagation());
+      selectCheckbox?.addEventListener('change', () => {
+        toggleRowSelection(row, selectCheckbox.checked);
+      });
+    });
+
+    updateBulkDeleteState();
+  };
+
+  // Infinite scroll: use IntersectionObserver to auto-load more objects
+  const scrollSentinel = document.getElementById('scroll-sentinel');
+  const scrollContainer = document.querySelector('.objects-table-container');
+  if (scrollSentinel && scrollContainer) {
+    const infiniteScrollObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && hasMoreObjects && !isLoadingObjects) {
+          loadObjects(true);
+        }
+      });
+    }, {
+      root: scrollContainer, // use the scrollable container as root
+      rootMargin: '100px', // trigger 100px before reaching the element
+      threshold: 0
+    });
+    
+    infiniteScrollObserver.observe(scrollSentinel);
+  }
+
+  // Page size selector
+  const pageSizeSelect = document.getElementById('page-size-select');
+  pageSizeSelect?.addEventListener('change', (e) => {
+    pageSize = parseInt(e.target.value, 10);
+  });
+
+  if (objectsApiUrl) {
+    loadObjects();
+  }
+
   const folderBreadcrumb = document.getElementById('folder-breadcrumb');
   const objectsTableBody = document.querySelector('#objects-table tbody');
   let currentPrefix = '';
-  let allObjects = []; // Store all object data for folder navigation
 
-  // Collect all object data from the table rows
-  rows.forEach(row => {
-    allObjects.push({
-      key: row.dataset.key,
-      size: row.dataset.size,
-      lastModified: row.dataset.lastModified,
-      etag: row.dataset.etag,
-      previewUrl: row.dataset.previewUrl,
-      downloadUrl: row.dataset.downloadUrl,
-      presignEndpoint: row.dataset.presignEndpoint,
-      deleteEndpoint: row.dataset.deleteEndpoint,
-      metadata: row.dataset.metadata,
-      versionsEndpoint: row.dataset.versionsEndpoint,
-      restoreTemplate: row.dataset.restoreTemplate,
-      element: row
+  if (objectsTableBody) {
+    objectsTableBody.addEventListener('click', (e) => {
+      const row = e.target.closest('[data-object-row]');
+      if (!row) return;
+
+      if (e.target.closest('[data-delete-object]') || e.target.closest('[data-object-select]') || e.target.closest('a')) {
+        return;
+      }
+      
+      selectRow(row);
     });
-  });
+  }
 
-  // Check if we have any prefixed objects (folders)
-  const hasFolders = allObjects.some(obj => obj.key.includes('/'));
+  const hasFolders = () => allObjects.some(obj => obj.key.includes('/'));
 
-  // Get unique folder prefixes at a given level
   const getFoldersAtPrefix = (prefix) => {
     const folders = new Set();
     const files = [];
@@ -1928,10 +2145,10 @@
       const slashIndex = remainder.indexOf('/');
       
       if (slashIndex === -1) {
-        // This is a file at this level
+
         files.push(obj);
       } else {
-        // This is a folder
+
         const folderName = remainder.slice(0, slashIndex + 1);
         folders.add(prefix + folderName);
       }
@@ -1940,16 +2157,14 @@
     return { folders: Array.from(folders).sort(), files };
   };
 
-  // Count objects in a folder
   const countObjectsInFolder = (folderPrefix) => {
     return allObjects.filter(obj => obj.key.startsWith(folderPrefix)).length;
   };
 
-  // Render breadcrumb
   const renderBreadcrumb = (prefix) => {
     if (!folderBreadcrumb) return;
     
-    if (!prefix && !hasFolders) {
+    if (!prefix && !hasFolders()) {
       folderBreadcrumb.classList.add('d-none');
       return;
     }
@@ -1957,8 +2172,7 @@
     folderBreadcrumb.classList.remove('d-none');
     const ol = folderBreadcrumb.querySelector('ol');
     ol.innerHTML = '';
-    
-    // Root item
+
     const rootLi = document.createElement('li');
     rootLi.className = 'breadcrumb-item';
     if (!prefix) {
@@ -1981,8 +2195,7 @@
       `;
     }
     ol.appendChild(rootLi);
-    
-    // Build path segments
+
     if (prefix) {
       const parts = prefix.split('/').filter(Boolean);
       let accumulated = '';
@@ -2006,8 +2219,7 @@
         ol.appendChild(li);
       });
     }
-    
-    // Add click handlers
+
     ol.querySelectorAll('[data-folder-nav]').forEach(link => {
       link.addEventListener('click', (e) => {
         e.preventDefault();
@@ -2016,12 +2228,10 @@
     });
   };
 
-  // Get all objects inside a folder (for bulk selection)
   const getObjectsInFolder = (folderPrefix) => {
     return allObjects.filter(obj => obj.key.startsWith(folderPrefix));
   };
 
-  // Create folder row element
   const createFolderRow = (folderPath) => {
     const folderName = folderPath.slice(currentPrefix.length).replace(/\/$/, '');
     const objectCount = countObjectsInFolder(folderPath);
@@ -2055,8 +2265,7 @@
         </button>
       </td>
     `;
-    
-    // Handle folder checkbox
+
     const checkbox = tr.querySelector('[data-folder-select]');
     checkbox?.addEventListener('change', (e) => {
       e.stopPropagation();
@@ -2078,42 +2287,37 @@
     return tr;
   };
 
-  // Navigate to a folder
   const navigateToFolder = (prefix) => {
     currentPrefix = prefix;
     renderBreadcrumb(prefix);
     renderObjectsView();
-    // Clear selection when navigating
+
     selectedRows.clear();
-    // Defer updateBulkDeleteState call to ensure it's defined
+
     if (typeof updateBulkDeleteState === 'function') {
       updateBulkDeleteState();
     }
-    // Clear preview
+
     if (previewPanel) previewPanel.classList.add('d-none');
     if (previewEmpty) previewEmpty.classList.remove('d-none');
     activeRow = null;
   };
 
-  // Render objects view based on current prefix
   const renderObjectsView = () => {
     if (!objectsTableBody) return;
     
     const { folders, files } = getFoldersAtPrefix(currentPrefix);
-    
-    // Clear table
+
     objectsTableBody.innerHTML = '';
-    
-    // Add folder rows first
+
     folders.forEach(folderPath => {
       objectsTableBody.appendChild(createFolderRow(folderPath));
     });
-    
-    // Add file rows
+
     files.forEach(obj => {
       objectsTableBody.appendChild(obj.element);
       obj.element.style.display = '';
-      // Update displayed key to show just filename when inside a folder
+
       const keyCell = obj.element.querySelector('.object-key .fw-medium');
       if (keyCell && currentPrefix) {
         const displayName = obj.key.slice(currentPrefix.length);
@@ -2123,15 +2327,13 @@
         keyCell.textContent = obj.key; // Reset to full key at root
       }
     });
-    
-    // Hide files not in current view
+
     allObjects.forEach(obj => {
       if (!files.includes(obj)) {
         obj.element.style.display = 'none';
       }
     });
-    
-    // Show empty state if no content
+
     if (folders.length === 0 && files.length === 0) {
       const emptyRow = document.createElement('tr');
       emptyRow.innerHTML = `
@@ -2149,16 +2351,12 @@
       `;
       objectsTableBody.appendChild(emptyRow);
     }
-    
-    // Update select all checkbox state - deferred to ensure function is defined
+
     if (typeof updateBulkDeleteState === 'function') {
       updateBulkDeleteState();
     }
   };
 
-  // Folder view initialization moved after updateBulkDeleteState is defined
-  // ========== End Folder Navigation ==========
-
   const showMessage = ({ title = 'Notice', body = '', bodyHtml = null, variant = 'info', actionText = null, onAction = null }) => {
     if (!messageModal) {
       window.alert(body || title);
@@ -2257,17 +2455,13 @@
     }
   });
 
-  // Handle button-based preset selector
   const presetButtons = document.querySelectorAll('.preset-btn[data-preset]');
   presetButtons.forEach(btn => {
     btn.addEventListener('click', () => {
       const preset = btn.dataset.preset;
-      // Update hidden input
       if (policyPreset) policyPreset.value = preset;
-      // Update button active states
       presetButtons.forEach(b => b.classList.remove('active'));
       btn.classList.add('active');
-      // Apply preset
       applyPolicyPreset(preset);
     });
   });
@@ -2305,19 +2499,19 @@
       bulkDeleteConfirm.disabled = selectedCount === 0 || bulkDeleting;
     }
     if (selectAllCheckbox) {
-      // Count only visible rows in current folder view
-      const visibleRows = hasFolders
+
+      const visibleRowsRaw = hasFolders()
         ? allObjects.filter(obj => obj.key.startsWith(currentPrefix) && !obj.key.slice(currentPrefix.length).includes('/')).map(obj => obj.element)
-        : Array.from(rows);
-      const total = visibleRows.filter(r => r.style.display !== 'none').length;
-      const visibleSelectedCount = visibleRows.filter(r => r.style.display !== 'none' && selectedRows.has(r.dataset.key)).length;
+        : Array.from(document.querySelectorAll('[data-object-row]'));
+      const total = visibleRowsRaw.filter(r => r.style.display !== 'none').length;
+      const visibleSelectedCount = visibleRowsRaw.filter(r => r.style.display !== 'none' && selectedRows.has(r.dataset.key)).length;
       selectAllCheckbox.disabled = total === 0;
       selectAllCheckbox.checked = visibleSelectedCount > 0 && visibleSelectedCount === total && total > 0;
       selectAllCheckbox.indeterminate = visibleSelectedCount > 0 && visibleSelectedCount < total;
     }
   };
 
-  const toggleRowSelection = (row, shouldSelect) => {
+  function toggleRowSelection(row, shouldSelect) {
     if (!row || !row.dataset.key) return;
     if (shouldSelect) {
       selectedRows.set(row.dataset.key, row);
@@ -2325,7 +2519,7 @@
       selectedRows.delete(row.dataset.key);
     }
     updateBulkDeleteState();
-  };
+  }
 
   const renderBulkDeletePreview = () => {
     if (!bulkDeleteList) return;
@@ -2850,7 +3044,7 @@
     previewPlaceholder.classList.remove('d-none');
   };
 
-  const metadataFromRow = (row) => {
+  function metadataFromRow(row) {
     if (!row || !row.dataset.metadata) {
       return null;
     }
@@ -2863,10 +3057,10 @@
       console.warn('Failed to parse metadata for row', err);
     }
     return null;
-  };
+  }
 
-  const selectRow = (row) => {
-    rows.forEach((r) => r.classList.remove('table-active'));
+  function selectRow(row) {
+    document.querySelectorAll('[data-object-row]').forEach((r) => r.classList.remove('table-active'));
     row.classList.add('table-active');
     previewEmpty.classList.add('d-none');
     previewPanel.classList.remove('d-none');
@@ -2907,67 +3101,48 @@
       previewIframe.classList.remove('d-none');
       previewPlaceholder.classList.add('d-none');
     }
-  };
-
-  rows.forEach((row) => {
-    row.addEventListener('click', () => selectRow(row));
-    row.querySelector('[data-delete-object]')?.addEventListener('click', (event) => {
-      event.stopPropagation();
-      if (!deleteModal || !deleteObjectForm) return;
-      deleteObjectForm.action = row.dataset.deleteEndpoint;
-      deleteObjectKey.textContent = row.dataset.key;
-      deleteModal.show();
-    });
-    const checkbox = row.querySelector('[data-object-select]');
-    checkbox?.addEventListener('click', (event) => event.stopPropagation());
-    checkbox?.addEventListener('change', (event) => {
-      toggleRowSelection(row, event.target.checked);
-    });
-  });
+  }
 
   updateBulkDeleteState();
 
-  // Initialize folder view if there are folders (must be after updateBulkDeleteState is defined)
-  if (hasFolders) {
-    renderBreadcrumb('');
-    renderObjectsView();
+  function initFolderNavigation() {
+    if (hasFolders()) {
+      renderBreadcrumb('');
+      renderObjectsView();
+    }
   }
 
   bulkDeleteButton?.addEventListener('click', () => openBulkDeleteModal());
   bulkDeleteConfirm?.addEventListener('click', () => performBulkDelete());
 
   document.getElementById('object-search')?.addEventListener('input', (event) => {
-    const term = event.target.value.toLowerCase();
+    currentFilterTerm = event.target.value.toLowerCase();
     
-    if (hasFolders) {
-      // With folder navigation: re-render view with search filter
+    if (hasFolders()) {
       const { folders, files } = getFoldersAtPrefix(currentPrefix);
       const tbody = objectsTableBody;
-      
-      // Clear and re-add matching content
+
       tbody.innerHTML = '';
-      
-      // Filter and add matching folders
+
       folders.forEach(folderPath => {
         const folderName = folderPath.slice(currentPrefix.length).replace(/\/$/, '').toLowerCase();
-        if (folderName.includes(term)) {
+        if (folderName.includes(currentFilterTerm)) {
           tbody.appendChild(createFolderRow(folderPath));
         }
       });
-      
-      // Filter and add matching files
+
       files.forEach(obj => {
         const keyName = obj.key.slice(currentPrefix.length).toLowerCase();
-        if (keyName.includes(term)) {
+        if (keyName.includes(currentFilterTerm)) {
           tbody.appendChild(obj.element);
           obj.element.style.display = '';
         }
       });
     } else {
-      // Original behavior without folders
-      rows.forEach((row) => {
+      // Filter all loaded objects (including newly loaded ones)
+      document.querySelectorAll('[data-object-row]').forEach((row) => {
         const key = row.dataset.key.toLowerCase();
-        row.style.display = key.includes(term) ? '' : 'none';
+        row.style.display = key.includes(currentFilterTerm) ? '' : 'none';
       });
     }
   });
@@ -3002,8 +3177,7 @@
     if (!presignLink?.value) {
       return;
     }
-    
-    // Helper function for fallback copy
+
     const fallbackCopy = (text) => {
       const textArea = document.createElement('textarea');
       textArea.value = text;
@@ -3024,18 +3198,16 @@
     };
     
     let copied = false;
-    
-    // Try modern clipboard API first
+
     if (navigator.clipboard && window.isSecureContext) {
       try {
         await navigator.clipboard.writeText(presignLink.value);
         copied = true;
       } catch (error) {
-        // Fall through to fallback
+
       }
     }
-    
-    // Fallback for non-secure contexts
+
     if (!copied) {
       copied = fallbackCopy(presignLink.value);
     }
@@ -3078,7 +3250,7 @@
         return;
       }
       uploadDropZoneLabel.textContent = files.length === 1 ? files[0].name : `${files.length} files selected`;
-      // Hide single file object key option when multiple files selected
+
       if (singleFileOptions) {
         singleFileOptions.classList.toggle('d-none', files.length > 1);
       }
@@ -3113,7 +3285,7 @@
       if (metadata) {
         formData.append('metadata', JSON.stringify(metadata));
       }
-      // Get CSRF token
+
       const csrfToken = document.querySelector('input[name="csrf_token"]')?.value;
       if (csrfToken) {
         formData.append('csrf_token', csrfToken);
@@ -3151,7 +3323,6 @@
         }
       }
 
-      // Show progress UI
       if (bulkUploadProgress) bulkUploadProgress.classList.remove('d-none');
       if (bulkUploadResults) bulkUploadResults.classList.add('d-none');
       if (uploadSubmitBtn) uploadSubmitBtn.disabled = true;
@@ -3164,8 +3335,7 @@
       for (let i = 0; i < total; i++) {
         const file = files[i];
         const current = i + 1;
-        
-        // Update progress
+
         if (bulkUploadCounter) bulkUploadCounter.textContent = `${current}/${total}`;
         if (bulkUploadCurrentFile) bulkUploadCurrentFile.textContent = `Uploading: ${file.name}`;
         if (bulkUploadProgressBar) {
@@ -3181,7 +3351,6 @@
         }
       }
 
-      // Show results
       if (bulkUploadProgress) bulkUploadProgress.classList.add('d-none');
       if (bulkUploadResults) bulkUploadResults.classList.remove('d-none');
       
@@ -3201,15 +3370,14 @@
       }
 
       isUploading = false;
-      
-      // Reload page if any files were uploaded successfully
+
       if (successFiles.length > 0) {
-        // Keep button disabled and show uploading state until reload
+
         if (uploadBtnText) uploadBtnText.textContent = 'Refreshing...';
-        // Short delay to show results, then reload
+
         window.setTimeout(() => window.location.reload(), 800);
       } else {
-        // Only re-enable if no success (all failed)
+
         if (uploadSubmitBtn) uploadSubmitBtn.disabled = false;
         if (uploadFileInput) uploadFileInput.disabled = false;
       }
@@ -3223,19 +3391,16 @@
     });
     uploadDropZone?.addEventListener('click', () => uploadFileInput?.click());
 
-    // Handle form submission for bulk upload
     uploadForm.addEventListener('submit', async (event) => {
       const files = uploadFileInput.files;
       if (!files || files.length === 0) return;
       
       const keyPrefix = (uploadKeyPrefix?.value || '').trim();
-      
-      // For single file with custom object key and NO prefix, use default form submission
+
       if (files.length === 1 && !keyPrefix) {
         const customKey = uploadForm.querySelector('input[name="object_key"]')?.value?.trim();
         if (customKey) {
-          // Single file with custom key - let form submit normally
-          // Disable button immediately for feedback
+
           if (uploadSubmitBtn) {
             uploadSubmitBtn.disabled = true;
             if (uploadBtnText) uploadBtnText.textContent = 'Uploading...';
@@ -3243,11 +3408,9 @@
           return;
         }
       }
-      
-      // Bulk upload or prefix specified - handle with JavaScript
+
       event.preventDefault();
-      
-      // Disable button immediately
+
       if (uploadSubmitBtn) {
         uploadSubmitBtn.disabled = true;
         if (uploadBtnText) uploadBtnText.textContent = 'Uploading...';
@@ -3256,23 +3419,21 @@
       await performBulkUpload(Array.from(files));
     });
 
-    // Pre-fill key prefix with current folder when modal opens
     uploadModalEl?.addEventListener('show.bs.modal', () => {
-      if (hasFolders && currentPrefix) {
+      if (hasFolders() && currentPrefix) {
         uploadKeyPrefix.value = currentPrefix;
-        // Auto-expand advanced options if there's a prefix
+
         const advancedToggle = document.querySelector('[data-bs-target="#advancedUploadOptions"]');
         const advancedCollapse = document.getElementById('advancedUploadOptions');
         if (advancedToggle && advancedCollapse && !advancedCollapse.classList.contains('show')) {
           new bootstrap.Collapse(advancedCollapse, { show: true });
         }
       } else if (uploadKeyPrefix) {
-        // Clear prefix when at root
+
         uploadKeyPrefix.value = '';
       }
     });
 
-    // Reset UI when modal is closed
     uploadModalEl?.addEventListener('hidden.bs.modal', () => {
       resetUploadUI();
       uploadFileInput.value = '';
@@ -3339,17 +3500,11 @@
     }
   };
 
-  // Add listeners to update state
-  rows.forEach((row) => {
-    const checkbox = row.querySelector('[data-object-select]');
-    checkbox?.addEventListener('change', updateBulkDownloadState);
-  });
-
   selectAllCheckbox?.addEventListener('change', (event) => {
     const shouldSelect = Boolean(event.target?.checked);
     
-    if (hasFolders) {
-      // Select all objects that start with current prefix (including inside subfolders)
+    if (hasFolders()) {
+
       const objectsInCurrentView = allObjects.filter(obj => obj.key.startsWith(currentPrefix));
       objectsInCurrentView.forEach(obj => {
         const checkbox = obj.element.querySelector('[data-object-select]');
@@ -3358,14 +3513,13 @@
         }
         toggleRowSelection(obj.element, shouldSelect);
       });
-      
-      // Also toggle folder checkboxes
+
       document.querySelectorAll('[data-folder-select]').forEach(cb => {
         cb.checked = shouldSelect;
       });
     } else {
-      // Original behavior without folders
-      rows.forEach((row) => {
+
+      document.querySelectorAll('[data-object-row]').forEach((row) => {
         if (row.style.display === 'none') return;
         const checkbox = row.querySelector('[data-object-select]');
         if (!checkbox || checkbox.disabled) {
@@ -3421,7 +3575,6 @@
     }
   });
 
-  // Async load replication stats
   const replicationStatsContainer = document.getElementById('replication-stats-cards');
   if (replicationStatsContainer) {
     const statusEndpoint = replicationStatsContainer.dataset.statusEndpoint;
@@ -3438,8 +3591,7 @@
         const resp = await fetch(statusEndpoint);
         if (!resp.ok) throw new Error('Failed to fetch stats');
         const data = await resp.json();
-        
-        // Update stats
+
         if (syncedEl) syncedEl.textContent = data.objects_synced;
         if (pendingEl) {
           pendingEl.textContent = data.objects_pending;
@@ -3447,8 +3599,7 @@
         }
         if (orphanedEl) orphanedEl.textContent = data.objects_orphaned;
         if (bytesEl) bytesEl.textContent = formatBytes(data.bytes_synced);
-        
-        // Update last sync
+
         if (data.last_sync_at && lastSyncEl) {
           lastSyncEl.style.display = '';
           const date = new Date(data.last_sync_at * 1000);
@@ -3466,13 +3617,11 @@
       }
     };
 
-    // Load stats immediately
     loadReplicationStats();
 
-    // Also refresh when the refresh button is clicked
     const refreshBtn = document.querySelector('[data-refresh-replication]');
     refreshBtn?.addEventListener('click', () => {
-      // Show loading state
+
       if (syncedEl) syncedEl.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span>';
       if (pendingEl) pendingEl.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span>';
       if (orphanedEl) orphanedEl.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span>';
@@ -3481,7 +3630,6 @@
     });
   }
 
-  // Encryption settings
   const algoAes256Radio = document.getElementById('algo_aes256');
   const algoKmsRadio = document.getElementById('algo_kms');
   const kmsKeySection = document.getElementById('kmsKeySection');
@@ -3489,7 +3637,6 @@
   const encryptionAction = document.getElementById('encryptionAction');
   const disableEncryptionBtn = document.getElementById('disableEncryptionBtn');
 
-  // Toggle KMS key section visibility based on selected algorithm
   const updateKmsKeyVisibility = () => {
     if (!kmsKeySection) return;
     const showKms = algoKmsRadio?.checked;
@@ -3499,7 +3646,6 @@
   algoAes256Radio?.addEventListener('change', updateKmsKeyVisibility);
   algoKmsRadio?.addEventListener('change', updateKmsKeyVisibility);
 
-  // Handle disable encryption button
   disableEncryptionBtn?.addEventListener('click', () => {
     if (encryptionAction && encryptionForm) {
       if (confirm('Are you sure you want to disable default encryption? New objects will not be encrypted automatically.')) {
diff --git a/templates/buckets.html b/templates/buckets.html
index ecc24cf..f997f1b 100644
--- a/templates/buckets.html
+++ b/templates/buckets.html
@@ -131,7 +131,7 @@
 {{ super() }}
 <script>
   (function () {
-    // Search functionality
+
     const searchInput = document.getElementById('bucket-search');
     const bucketItems = document.querySelectorAll('.bucket-item');
     const noBucketsMsg = document.querySelector('.text-center.py-5'); // The "No buckets found" empty state
@@ -153,7 +153,6 @@
       });
     }
 
-    // View toggle functionality
     const viewGrid = document.getElementById('view-grid');
     const viewList = document.getElementById('view-list');
     const container = document.getElementById('buckets-container');
@@ -168,8 +167,7 @@
         });
         cards.forEach(card => {
           card.classList.remove('h-100');
-          // Optional: Add flex-row to card-body content if we want a horizontal layout
-          // For now, full-width stacked cards is a good list view
+
         });
         localStorage.setItem('bucket-view-pref', 'list');
       } else {
@@ -188,7 +186,6 @@
       viewGrid.addEventListener('change', () => setView('grid'));
       viewList.addEventListener('change', () => setView('list'));
 
-      // Restore preference
       const pref = localStorage.getItem('bucket-view-pref');
       if (pref === 'list') {
         viewList.checked = true;
diff --git a/templates/connections.html b/templates/connections.html
index a28d97a..943af75 100644
--- a/templates/connections.html
+++ b/templates/connections.html
@@ -181,7 +181,6 @@
     </div>
 </div>
 
-<!-- Edit Connection Modal -->
 <div class="modal fade" id="editConnectionModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -247,7 +246,6 @@
     </div>
 </div>
 
-<!-- Delete Connection Modal -->
 <div class="modal fade" id="deleteConnectionModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -297,7 +295,6 @@
         }
     }
 
-    // Test Connection Logic
     async function testConnection(formId, resultId) {
         const form = document.getElementById(formId);
         const resultDiv = document.getElementById(resultId);
@@ -335,7 +332,6 @@
         testConnection('editConnectionForm', 'editTestResult');
     });
 
-    // Modal Event Listeners
     const editModal = document.getElementById('editConnectionModal');
     editModal.addEventListener('show.bs.modal', event => {
         const button = event.relatedTarget;
diff --git a/templates/iam.html b/templates/iam.html
index 371cc09..2ebd4e8 100644
--- a/templates/iam.html
+++ b/templates/iam.html
@@ -203,7 +203,6 @@
   {% endif %}
 </div>
 
-<!-- Create User Modal -->
 <div class="modal fade" id="createUserModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -252,7 +251,6 @@
   </div>
 </div>
 
-<!-- Policy Editor Modal -->
 <div class="modal fade" id="policyEditorModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-centered">
     <div class="modal-content">
@@ -303,7 +301,6 @@
   </div>
 </div>
 
-<!-- Edit User Modal -->
 <div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -338,7 +335,6 @@
   </div>
 </div>
 
-<!-- Delete User Modal -->
 <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -382,7 +378,6 @@
   </div>
 </div>
 
-<!-- Rotate Secret Modal -->
 <div class="modal fade" id="rotateSecretModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
@@ -486,8 +481,7 @@
 
     const iamUsersData = document.getElementById('iamUsersJson');
     const users = iamUsersData ? JSON.parse(iamUsersData.textContent || '[]') : [];
-    
-    // Policy Editor Logic
+
     const policyModalEl = document.getElementById('policyEditorModal');
     const policyModal = new bootstrap.Modal(policyModalEl);
     const userLabelEl = document.getElementById('policyEditorUserLabel');
@@ -534,7 +528,6 @@
       button.addEventListener('click', () => applyTemplate(button.dataset.policyTemplate));
     });
 
-    // Create User modal template buttons
     const createUserPoliciesEl = document.getElementById('createUserPolicies');
     const createTemplateButtons = document.querySelectorAll('[data-create-policy-template]');
     
@@ -591,7 +584,6 @@
       });
     });
 
-    // Edit User Logic
     const editUserModal = new bootstrap.Modal(document.getElementById('editUserModal'));
     const editUserForm = document.getElementById('editUserForm');
     const editUserDisplayName = document.getElementById('editUserDisplayName');
@@ -606,7 +598,6 @@
         });
     });
 
-    // Delete User Logic
     const deleteUserModal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
     const deleteUserForm = document.getElementById('deleteUserForm');
     const deleteUserLabel = document.getElementById('deleteUserLabel');
@@ -628,7 +619,6 @@
         });
     });
 
-    // Rotate Secret Logic
     const rotateSecretModal = new bootstrap.Modal(document.getElementById('rotateSecretModal'));
     const rotateUserLabel = document.getElementById('rotateUserLabel');
     const confirmRotateBtn = document.getElementById('confirmRotateBtn');
@@ -644,8 +634,7 @@
         btn.addEventListener('click', () => {
             currentRotateKey = btn.dataset.rotateUser;
             rotateUserLabel.textContent = currentRotateKey;
-            
-            // Reset Modal State
+
             rotateSecretConfirm.classList.remove('d-none');
             rotateSecretResult.classList.add('d-none');
             confirmRotateBtn.classList.remove('d-none');
@@ -679,8 +668,7 @@
             
             const data = await response.json();
             newSecretKeyInput.value = data.secret_key;
-            
-            // Show Result
+
             rotateSecretConfirm.classList.add('d-none');
             rotateSecretResult.classList.remove('d-none');
             confirmRotateBtn.classList.add('d-none');
diff --git a/tests/test_edge_cases.py b/tests/test_edge_cases.py
index dae31f6..47181a2 100644
--- a/tests/test_edge_cases.py
+++ b/tests/test_edge_cases.py
@@ -38,7 +38,7 @@ def test_unicode_bucket_and_object_names(tmp_path: Path):
     assert storage.get_object_path("unicode-test", key).exists()
     
     # Verify listing
-    objects = storage.list_objects("unicode-test")
+    objects = storage.list_objects_all("unicode-test")
     assert any(o.key == key for o in objects)
 
 def test_special_characters_in_metadata(tmp_path: Path):
diff --git a/tests/test_storage_features.py b/tests/test_storage_features.py
index ff79205..e4a68c1 100644
--- a/tests/test_storage_features.py
+++ b/tests/test_storage_features.py
@@ -220,7 +220,7 @@ def test_bucket_config_filename_allowed(tmp_path):
     storage.create_bucket("demo")
     storage.put_object("demo", ".bucket.json", io.BytesIO(b"{}"))
 
-    objects = storage.list_objects("demo")
+    objects = storage.list_objects_all("demo")
     assert any(meta.key == ".bucket.json" for meta in objects)
 
 
diff --git a/tests/test_ui_bulk_delete.py b/tests/test_ui_bulk_delete.py
index a26135e..015c5f2 100644
--- a/tests/test_ui_bulk_delete.py
+++ b/tests/test_ui_bulk_delete.py
@@ -62,7 +62,7 @@ def test_bulk_delete_json_route(tmp_path: Path):
     assert set(payload["deleted"]) == {"first.txt", "missing.txt"}
     assert payload["errors"] == []
 
-    listing = storage.list_objects("demo")
+    listing = storage.list_objects_all("demo")
     assert {meta.key for meta in listing} == {"second.txt"}
 
 
@@ -92,5 +92,5 @@ def test_bulk_delete_validation(tmp_path: Path):
     assert limit_response.status_code == 400
     assert limit_response.get_json()["status"] == "error"
 
-    still_there = storage.list_objects("demo")
+    still_there = storage.list_objects_all("demo")
     assert {meta.key for meta in still_there} == {"keep.txt"}
diff --git a/tests/test_ui_pagination.py b/tests/test_ui_pagination.py
new file mode 100644
index 0000000..5e42d60
--- /dev/null
+++ b/tests/test_ui_pagination.py
@@ -0,0 +1,183 @@
+"""Tests for UI pagination of bucket objects."""
+import json
+from io import BytesIO
+from pathlib import Path
+
+import pytest
+
+from app import create_app
+
+
+def _make_app(tmp_path: Path):
+    """Create an app for testing."""
+    storage_root = tmp_path / "data"
+    iam_config = tmp_path / "iam.json"
+    bucket_policies = tmp_path / "bucket_policies.json"
+    iam_payload = {
+        "users": [
+            {
+                "access_key": "test",
+                "secret_key": "secret",
+                "display_name": "Test User",
+                "policies": [{"bucket": "*", "actions": ["list", "read", "write", "delete", "policy"]}],
+            },
+        ]
+    }
+    iam_config.write_text(json.dumps(iam_payload))
+
+    flask_app = create_app(
+        {
+            "TESTING": True,
+            "WTF_CSRF_ENABLED": False,
+            "STORAGE_ROOT": storage_root,
+            "IAM_CONFIG": iam_config,
+            "BUCKET_POLICY_PATH": bucket_policies,
+        }
+    )
+    return flask_app
+
+
+class TestPaginatedObjectListing:
+    """Test paginated object listing API."""
+
+    def test_objects_api_returns_paginated_results(self, tmp_path):
+        """Objects API should return paginated results."""
+        app = _make_app(tmp_path)
+        storage = app.extensions["object_storage"]
+        storage.create_bucket("test-bucket")
+        
+        # Create 10 test objects
+        for i in range(10):
+            storage.put_object("test-bucket", f"file{i:02d}.txt", BytesIO(b"content"))
+        
+        with app.test_client() as client:
+            # Login first
+            client.post("/ui/login", data={"access_key": "test", "secret_key": "secret"}, follow_redirects=True)
+            
+            # Request first page of 3 objects
+            resp = client.get("/ui/buckets/test-bucket/objects?max_keys=3")
+            assert resp.status_code == 200
+            
+            data = resp.get_json()
+            assert len(data["objects"]) == 3
+            assert data["is_truncated"] is True
+            assert data["next_continuation_token"] is not None
+            assert data["total_count"] == 10
+    
+    def test_objects_api_pagination_continuation(self, tmp_path):
+        """Objects API should support continuation tokens."""
+        app = _make_app(tmp_path)
+        storage = app.extensions["object_storage"]
+        storage.create_bucket("test-bucket")
+        
+        # Create 5 test objects
+        for i in range(5):
+            storage.put_object("test-bucket", f"file{i:02d}.txt", BytesIO(b"content"))
+        
+        with app.test_client() as client:
+            client.post("/ui/login", data={"access_key": "test", "secret_key": "secret"}, follow_redirects=True)
+            
+            # Get first page
+            resp = client.get("/ui/buckets/test-bucket/objects?max_keys=2")
+            assert resp.status_code == 200
+            data = resp.get_json()
+            
+            first_page_keys = [obj["key"] for obj in data["objects"]]
+            assert len(first_page_keys) == 2
+            assert data["is_truncated"] is True
+            
+            # Get second page
+            token = data["next_continuation_token"]
+            resp = client.get(f"/ui/buckets/test-bucket/objects?max_keys=2&continuation_token={token}")
+            assert resp.status_code == 200
+            data = resp.get_json()
+            
+            second_page_keys = [obj["key"] for obj in data["objects"]]
+            assert len(second_page_keys) == 2
+            
+            # No overlap between pages
+            assert set(first_page_keys).isdisjoint(set(second_page_keys))
+    
+    def test_objects_api_prefix_filter(self, tmp_path):
+        """Objects API should support prefix filtering."""
+        app = _make_app(tmp_path)
+        storage = app.extensions["object_storage"]
+        storage.create_bucket("test-bucket")
+        
+        # Create objects with different prefixes
+        storage.put_object("test-bucket", "logs/access.log", BytesIO(b"log"))
+        storage.put_object("test-bucket", "logs/error.log", BytesIO(b"log"))
+        storage.put_object("test-bucket", "data/file.txt", BytesIO(b"data"))
+        
+        with app.test_client() as client:
+            client.post("/ui/login", data={"access_key": "test", "secret_key": "secret"}, follow_redirects=True)
+            
+            # Filter by prefix
+            resp = client.get("/ui/buckets/test-bucket/objects?prefix=logs/")
+            assert resp.status_code == 200
+            data = resp.get_json()
+            
+            keys = [obj["key"] for obj in data["objects"]]
+            assert all(k.startswith("logs/") for k in keys)
+            assert len(keys) == 2
+    
+    def test_objects_api_requires_authentication(self, tmp_path):
+        """Objects API should require login."""
+        app = _make_app(tmp_path)
+        storage = app.extensions["object_storage"]
+        storage.create_bucket("test-bucket")
+        
+        with app.test_client() as client:
+            # Don't login
+            resp = client.get("/ui/buckets/test-bucket/objects")
+            # Should redirect to login
+            assert resp.status_code == 302
+            assert "/ui/login" in resp.headers.get("Location", "")
+    
+    def test_objects_api_returns_object_metadata(self, tmp_path):
+        """Objects API should return complete object metadata."""
+        app = _make_app(tmp_path)
+        storage = app.extensions["object_storage"]
+        storage.create_bucket("test-bucket")
+        storage.put_object("test-bucket", "test.txt", BytesIO(b"test content"))
+        
+        with app.test_client() as client:
+            client.post("/ui/login", data={"access_key": "test", "secret_key": "secret"}, follow_redirects=True)
+            
+            resp = client.get("/ui/buckets/test-bucket/objects")
+            assert resp.status_code == 200
+            data = resp.get_json()
+            
+            assert len(data["objects"]) == 1
+            obj = data["objects"][0]
+            
+            # Check all expected fields
+            assert obj["key"] == "test.txt"
+            assert obj["size"] == 12  # len("test content")
+            assert "last_modified" in obj
+            assert "last_modified_display" in obj
+            assert "etag" in obj
+            assert "preview_url" in obj
+            assert "download_url" in obj
+            assert "delete_endpoint" in obj
+    
+    def test_bucket_detail_page_loads_without_objects(self, tmp_path):
+        """Bucket detail page should load even with many objects."""
+        app = _make_app(tmp_path)
+        storage = app.extensions["object_storage"]
+        storage.create_bucket("test-bucket")
+        
+        # Create many objects
+        for i in range(100):
+            storage.put_object("test-bucket", f"file{i:03d}.txt", BytesIO(b"x"))
+        
+        with app.test_client() as client:
+            client.post("/ui/login", data={"access_key": "test", "secret_key": "secret"}, follow_redirects=True)
+            
+            # The page should load quickly (objects loaded via JS)
+            resp = client.get("/ui/buckets/test-bucket")
+            assert resp.status_code == 200
+            
+            html = resp.data.decode("utf-8")
+            # Should have the JavaScript loading infrastructure
+            assert "loadObjects" in html or "objectsApiUrl" in html
diff --git a/tests/test_ui_policy.py b/tests/test_ui_policy.py
index 966dc12..16f9cf2 100644
--- a/tests/test_ui_policy.py
+++ b/tests/test_ui_policy.py
@@ -70,8 +70,12 @@ def test_ui_bucket_policy_enforcement_toggle(tmp_path: Path, enforce: bool):
         assert b"Access denied by bucket policy" in response.data
     else:
         assert response.status_code == 200
-        assert b"vid.mp4" in response.data
         assert b"Access denied by bucket policy" not in response.data
+        # Objects are now loaded via async API - check the objects endpoint
+        objects_response = client.get("/ui/buckets/testbucket/objects")
+        assert objects_response.status_code == 200
+        data = objects_response.get_json()
+        assert any(obj["key"] == "vid.mp4" for obj in data["objects"])
 
 
 def test_ui_bucket_policy_disabled_by_default(tmp_path: Path):
@@ -109,5 +113,9 @@ def test_ui_bucket_policy_disabled_by_default(tmp_path: Path):
     client.post("/ui/login", data={"access_key": "test", "secret_key": "secret"}, follow_redirects=True)
     response = client.get("/ui/buckets/testbucket", follow_redirects=True)
     assert response.status_code == 200
-    assert b"vid.mp4" in response.data
     assert b"Access denied by bucket policy" not in response.data
+    # Objects are now loaded via async API - check the objects endpoint
+    objects_response = client.get("/ui/buckets/testbucket/objects")
+    assert objects_response.status_code == 200
+    data = objects_response.get_json()
+    assert any(obj["key"] == "vid.mp4" for obj in data["objects"])

From 2498b950f6d0c5489808b45528f5c54c72af2055 Mon Sep 17 00:00:00 2001
From: kqjy <jun@jzwsite.com>
Date: Mon, 22 Dec 2025 10:40:05 +0800
Subject: [PATCH 2/4] Update requirements.txt

---
 requirements.txt | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/requirements.txt b/requirements.txt
index 544968d..e69aa35 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,10 +1,10 @@
 Flask>=3.1.2
-Flask-Limiter>=4.1.0
-Flask-Cors>=6.0.1
+Flask-Limiter>=4.1.1
+Flask-Cors>=6.0.2
 Flask-WTF>=1.2.2
-pytest>=9.0.1
+pytest>=9.0.2
 requests>=2.32.5
-boto3>=1.42.1
+boto3>=1.42.14
 waitress>=3.0.2
 psutil>=7.1.3
 cryptography>=46.0.3
\ No newline at end of file

From 40f3192c5c0c920cde615e6a192ee8af1e6c0212 Mon Sep 17 00:00:00 2001
From: kqjy <jun@jzwsite.com>
Date: Mon, 22 Dec 2025 10:46:32 +0800
Subject: [PATCH 3/4] Add fallback button for object loading

---
 templates/bucket_detail.html | 93 ++++++++++++++++++++++++------------
 1 file changed, 62 insertions(+), 31 deletions(-)

diff --git a/templates/bucket_detail.html b/templates/bucket_detail.html
index 1062172..41d22ba 100644
--- a/templates/bucket_detail.html
+++ b/templates/bucket_detail.html
@@ -150,25 +150,27 @@
         </table>
         <div id="scroll-sentinel" style="height: 1px;"></div>
       </div>
-      <div id="load-more-container" class="text-center py-2 d-none border-top">
-        <div id="load-more-spinner" class="d-none">
-          <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
-            <span class="visually-hidden">Loading...</span>
+      <div id="pagination-controls" class="card-footer d-flex justify-content-between align-items-center py-1 px-3 bg-body-tertiary" style="font-size: 0.75rem;">
+        <div id="load-more-container" class="d-flex align-items-center gap-2">
+          <div id="load-more-spinner" class="d-none">
+            <div class="spinner-border spinner-border-sm text-primary me-1" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
           </div>
-          <span class="text-muted small">Loading more objects...</span>
+          <span id="load-more-status" class="text-muted"></span>
+          <button id="load-more-btn" class="btn btn-link btn-sm p-0 d-none" style="font-size: 0.75rem;">Load more</button>
+        </div>
+        <div class="d-flex align-items-center gap-1">
+          <span class="text-muted">Load</span>
+          <select id="page-size-select" class="form-select form-select-sm py-0" style="width: auto; font-size: 0.75rem;">
+            <option value="50">50</option>
+            <option value="100" selected>100</option>
+            <option value="150">150</option>
+            <option value="200">200</option>
+            <option value="250">250</option>
+          </select>
+          <span class="text-muted">per page</span>
         </div>
-        <p id="load-more-status" class="text-muted small mb-0"></p>
-      </div>
-      <div id="pagination-controls" class="card-footer d-flex justify-content-center align-items-center gap-1 py-1 bg-body-tertiary" style="font-size: 0.75rem;">
-        <span class="text-muted">Load</span>
-        <select id="page-size-select" class="form-select form-select-sm py-0" style="width: auto; font-size: 0.75rem;">
-          <option value="50">50</option>
-          <option value="100" selected>100</option>
-          <option value="150">150</option>
-          <option value="200">200</option>
-          <option value="250">250</option>
-        </select>
-        <span class="text-muted">per page</span>
       </div>
     </div>
   </div>
@@ -2017,18 +2019,17 @@
       // Track if there are more objects to load
       hasMoreObjects = data.is_truncated;
       
-      if (data.is_truncated && loadMoreContainer) {
-        loadMoreContainer.classList.remove('d-none');
-        if (loadMoreStatus) {
-          loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()} of ${totalObjectCount.toLocaleString()} objects loaded • Scroll down to load more`;
-        }
-      } else if (loadMoreContainer) {
-        // Show the container but update status to show all loaded
-        if (loadMoreStatus) {
+      if (loadMoreStatus) {
+        if (data.is_truncated) {
+          loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()} of ${totalObjectCount.toLocaleString()} objects loaded`;
+        } else {
           loadMoreStatus.textContent = `All ${loadedObjectCount.toLocaleString()} objects loaded`;
         }
-        // Keep container visible but hide spinner
-        loadMoreContainer.classList.remove('d-none');
+      }
+      
+      // Update Load More button visibility
+      if (typeof updateLoadMoreButton === 'function') {
+        updateLoadMoreButton();
       }
 
       if (typeof initFolderNavigation === 'function') {
@@ -2088,20 +2089,50 @@
   // Infinite scroll: use IntersectionObserver to auto-load more objects
   const scrollSentinel = document.getElementById('scroll-sentinel');
   const scrollContainer = document.querySelector('.objects-table-container');
+  const loadMoreBtn = document.getElementById('load-more-btn');
+  
+  // Load More button click handler (fallback for mobile)
+  loadMoreBtn?.addEventListener('click', () => {
+    if (hasMoreObjects && !isLoadingObjects) {
+      loadObjects(true);
+    }
+  });
+  
+  // Show/hide Load More button based on hasMoreObjects
+  function updateLoadMoreButton() {
+    if (loadMoreBtn) {
+      loadMoreBtn.classList.toggle('d-none', !hasMoreObjects);
+    }
+  }
+  
   if (scrollSentinel && scrollContainer) {
-    const infiniteScrollObserver = new IntersectionObserver((entries) => {
+    // Observer for scrolling within the container (desktop)
+    const containerObserver = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting && hasMoreObjects && !isLoadingObjects) {
           loadObjects(true);
         }
       });
     }, {
-      root: scrollContainer, // use the scrollable container as root
-      rootMargin: '100px', // trigger 100px before reaching the element
+      root: scrollContainer,
+      rootMargin: '100px',
       threshold: 0
     });
+    containerObserver.observe(scrollSentinel);
     
-    infiniteScrollObserver.observe(scrollSentinel);
+    // Observer for page scrolling (mobile - when container is not scrollable)
+    const viewportObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && hasMoreObjects && !isLoadingObjects) {
+          loadObjects(true);
+        }
+      });
+    }, {
+      root: null, // viewport
+      rootMargin: '200px',
+      threshold: 0
+    });
+    viewportObserver.observe(scrollSentinel);
   }
 
   // Page size selector

From 992d9eccd991eb1626636b25d3e12b7b2cb6c570 Mon Sep 17 00:00:00 2001
From: kqjy <jun@jzwsite.com>
Date: Mon, 22 Dec 2025 11:09:29 +0800
Subject: [PATCH 4/4] Update docs

---
 README.md           |  2 +-
 docs.md             | 43 +++++++++++++++++++++++++++++++++++++++++++
 templates/docs.html |  9 +++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1f6519d..a7ae1f4 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ MyFSIO is a batteries-included, Flask-based recreation of Amazon S3 and IAM work
 - **IAM + access keys:** Users, access keys, key rotation, and bucket-scoped actions (`list/read/write/delete/policy`) now live in `data/.myfsio.sys/config/iam.json` and are editable from the IAM dashboard.
 - **Bucket policies + hot reload:** `data/.myfsio.sys/config/bucket_policies.json` uses AWS' policy grammar (Version `2012-10-17`) with a built-in watcher, so editing the JSON file applies immediately. The UI also ships Public/Private/Custom presets for faster edits.
 - **Presigned URLs everywhere:** Signature Version 4 presigned URLs respect IAM + bucket policies and replace the now-removed "share link" feature for public access scenarios.
-- **Modern UI:** Responsive tables, quick filters, preview sidebar, object-level delete buttons, a presign modal, and an inline JSON policy editor that respects dark mode keep bucket management friendly.
+- **Modern UI:** Responsive tables, quick filters, preview sidebar, object-level delete buttons, a presign modal, and an inline JSON policy editor that respects dark mode keep bucket management friendly. The object browser supports folder navigation, infinite scroll pagination, bulk operations, and automatic retry on load failures.
 - **Tests & health:** `/healthz` for smoke checks and `pytest` coverage for IAM, CRUD, presign, and policy flows.
 
 ## Architecture at a Glance
diff --git a/docs.md b/docs.md
index 2f9c3d7..6515b6c 100644
--- a/docs.md
+++ b/docs.md
@@ -341,6 +341,7 @@ Before upgrading across major versions, verify compatibility:
 | From Version | To Version | Breaking Changes | Migration Required |
 |--------------|------------|------------------|-------------------|
 | 0.1.x | 0.2.x | None expected | No |
+| 0.1.6 | 0.1.7 | None | No |
 | < 0.1.0 | >= 0.1.0 | New IAM config format | Yes - run migration script |
 
 **Automatic compatibility detection:**
@@ -634,6 +635,48 @@ curl -X PUT http://127.0.0.1:5000/bucket-policy/test \
 
 The UI will reflect this change as soon as the request completes thanks to the hot reload.
 
+### UI Object Browser
+
+The bucket detail page includes a powerful object browser with the following features:
+
+#### Folder Navigation
+
+Objects with forward slashes (`/`) in their keys are displayed as a folder hierarchy. Click a folder row to navigate into it. A breadcrumb navigation bar shows your current path and allows quick navigation back to parent folders or the root.
+
+#### Pagination & Infinite Scroll
+
+- Objects load in configurable batches (50, 100, 150, 200, or 250 per page)
+- Scroll to the bottom to automatically load more objects (infinite scroll)
+- A **Load more** button is available as a fallback for touch devices or when infinite scroll doesn't trigger
+- The footer shows the current load status (e.g., "Showing 100 of 500 objects")
+
+#### Bulk Operations
+
+- Select multiple objects using checkboxes
+- **Bulk Delete**: Delete multiple objects at once
+- **Bulk Download**: Download selected objects as individual files
+
+#### Search & Filter
+
+Use the search box to filter objects by name in real-time. The filter applies to the currently loaded objects.
+
+#### Error Handling
+
+If object loading fails (e.g., network error), a friendly error message is displayed with a **Retry** button to attempt loading again.
+
+#### Object Preview
+
+Click any object row to view its details in the preview sidebar:
+- File size and last modified date
+- ETag (content hash)
+- Custom metadata (if present)
+- Download and presign (share link) buttons
+- Version history (when versioning is enabled)
+
+#### Drag & Drop Upload
+
+Drag files directly onto the objects table to upload them to the current bucket and folder path.
+
 ## 6. Presigned URLs
 
 - Trigger from the UI using the **Presign** button after selecting an object.
diff --git a/templates/docs.html b/templates/docs.html
index f812d40..4840d82 100644
--- a/templates/docs.html
+++ b/templates/docs.html
@@ -255,6 +255,15 @@ sudo journalctl -u myfsio -f   # View logs</code></pre>
               <li>Progress rows highlight retries, throughput, and completion even if you close the modal.</li>
             </ul>
           </div>
+          <div>
+            <h3 class="h6 text-uppercase text-muted">Object browser</h3>
+            <ul>
+              <li>Navigate folder hierarchies using breadcrumbs. Objects with <code>/</code> in keys display as folders.</li>
+              <li>Infinite scroll loads more objects automatically. Choose batch size (50–250) from the footer dropdown.</li>
+              <li>Bulk select objects for multi-delete or multi-download. Filter by name using the search box.</li>
+              <li>If loading fails, click <strong>Retry</strong> to attempt again—no page refresh needed.</li>
+            </ul>
+          </div>
           <div>
             <h3 class="h6 text-uppercase text-muted">Object details</h3>
             <ul>