From 954e67640c53fe9b8849e3ee281bfe78193717c4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 23:13:07 +0000
Subject: [PATCH 1/8] Initial plan


From ed0195261032fb92df5f655a73f056ac380fe8b6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 13:12:39 +0000
Subject: [PATCH 2/8] feat(ui): replace manual credential fields with OAuth
 wizard flow for watch folder sources
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Watch folders using Dropbox, Google Drive, or OneDrive now show only the
folder path field and an info box directing users to use the Authorize
button after saving — matching the destination integration pattern.
Manual credential fields (refresh token, app key, app secret, etc.)
have been removed for these OAuth-backed source types.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 .../templates/integrations_dashboard.html     | 67 +++++++------------
 1 file changed, 25 insertions(+), 42 deletions(-)

diff --git a/frontend/templates/integrations_dashboard.html b/frontend/templates/integrations_dashboard.html
index a710b98c..43adb50a 100644
--- a/frontend/templates/integrations_dashboard.html
+++ b/frontend/templates/integrations_dashboard.html
@@ -675,64 +675,47 @@
               </div>
             </template>
 
-            <!-- Dropbox fields -->
+            <!-- Dropbox fields (OAuth wizard flow) -->
             <template x-if="form.config.source_type === 'dropbox'">
               <div class="space-y-3">
                 <div>
-                  <label for="wf-dbx-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
-                  <input id="wf-dbx-folder" type="text" x-model="form.config.folder_path" placeholder="/Inbox/Scanner" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
+                  <label for="wf-dbx-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-gray-400">(optional)</span></label>
+                  <input id="wf-dbx-folder" type="text" x-model="form.config.folder_path" placeholder="/Inbox/Scanner" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
                 </div>
-                <div>
-                  <label for="wf-dbx-token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Refresh Token <span class="text-red-500" aria-hidden="true">*</span></label>
-                  <input id="wf-dbx-token" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.refresh_token" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
-                </div>
-                <div class="grid grid-cols-2 gap-3">
-                  <div>
-                    <label for="wf-dbx-key" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">App Key <span class="text-red-500" aria-hidden="true">*</span></label>
-                    <input id="wf-dbx-key" type="text" x-model="form.credentials.app_key" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
-                  </div>
-                  <div>
-                    <label for="wf-dbx-secret" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">App Secret <span class="text-red-500" aria-hidden="true">*</span></label>
-                    <input id="wf-dbx-secret" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.app_secret" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
-                  </div>
+                <div class="bg-blue-50 dark:bg-blue-900/30 rounded-md p-3 text-sm text-blue-700 dark:text-blue-300">
+                  <i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
+                  Save this integration first, then use the <strong>Authorize</strong> button to complete the OAuth flow.
+                  Your credentials will be stored securely in your personal integration record.
                 </div>
               </div>
             </template>
 
-            <!-- Google Drive fields -->
+            <!-- Google Drive fields (OAuth wizard flow) -->
             <template x-if="form.config.source_type === 'google_drive'">
               <div class="space-y-3">
                 <div>
-                  <label for="wf-gd-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder ID <span class="text-red-500" aria-hidden="true">*</span></label>
-                  <input id="wf-gd-folder" type="text" x-model="form.config.folder_id" placeholder="1ABCdef..." required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
+                  <label for="wf-gd-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder ID <span class="text-gray-400">(optional)</span></label>
+                  <input id="wf-gd-folder" type="text" x-model="form.config.folder_id" placeholder="1ABCdef..." class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
                 </div>
-                <div>
-                  <label for="wf-gd-creds" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Service Account JSON <span class="text-red-500" aria-hidden="true">*</span></label>
-                  <textarea id="wf-gd-creds" x-model="form.credentials.credentials_json" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm font-mono"></textarea>
+                <div class="bg-blue-50 dark:bg-blue-900/30 rounded-md p-3 text-sm text-blue-700 dark:text-blue-300">
+                  <i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
+                  Save this integration first, then use the <strong>Authorize</strong> button to complete the OAuth flow.
+                  Your credentials will be stored securely in your personal integration record.
                 </div>
               </div>
             </template>
 
-            <!-- OneDrive fields -->
+            <!-- OneDrive fields (OAuth wizard flow) -->
             <template x-if="form.config.source_type === 'onedrive'">
               <div class="space-y-3">
                 <div>
-                  <label for="wf-od-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
-                  <input id="wf-od-folder" type="text" x-model="form.config.folder_path" placeholder="/Documents/Inbox" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
+                  <label for="wf-od-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-gray-400">(optional)</span></label>
+                  <input id="wf-od-folder" type="text" x-model="form.config.folder_path" placeholder="/Documents/Inbox" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
                 </div>
-                <div>
-                  <label for="wf-od-token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Refresh Token <span class="text-red-500" aria-hidden="true">*</span></label>
-                  <input id="wf-od-token" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.refresh_token" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
-                </div>
-                <div class="grid grid-cols-2 gap-3">
-                  <div>
-                    <label for="wf-od-cid" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Client ID <span class="text-red-500" aria-hidden="true">*</span></label>
-                    <input id="wf-od-cid" type="text" x-model="form.credentials.client_id" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
-                  </div>
-                  <div>
-                    <label for="wf-od-cs" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Client Secret <span class="text-red-500" aria-hidden="true">*</span></label>
-                    <input id="wf-od-cs" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.client_secret" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
-                  </div>
+                <div class="bg-blue-50 dark:bg-blue-900/30 rounded-md p-3 text-sm text-blue-700 dark:text-blue-300">
+                  <i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
+                  Save this integration first, then use the <strong>Authorize</strong> button to complete the OAuth flow.
+                  Your credentials will be stored securely in your personal integration record.
                 </div>
               </div>
             </template>
@@ -791,7 +774,7 @@
                 <input type="checkbox" x-model="form.config.delete_after_process" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                 Delete files after processing
               </label>
-              <template x-if="form.config.source_type !== 'local'">
+              <template x-if="form.config.source_type !== 'local' && form.config.source_type !== 'dropbox' && form.config.source_type !== 'google_drive' && form.config.source_type !== 'onedrive'">
                 <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
                   <input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                   Show secrets
@@ -1241,13 +1224,13 @@ function integrationsDashboard() {
         this.form.credentials = { access_key_id: '', secret_access_key: '' };
       } else if (st === 'dropbox') {
         this.form.config = { source_type: st, folder_path: '', delete_after_process: dap };
-        this.form.credentials = { refresh_token: '', app_key: '', app_secret: '' };
+        this.form.credentials = {};
       } else if (st === 'google_drive') {
         this.form.config = { source_type: st, folder_id: '', delete_after_process: dap };
-        this.form.credentials = { credentials_json: '' };
+        this.form.credentials = {};
       } else if (st === 'onedrive') {
         this.form.config = { source_type: st, folder_path: '', delete_after_process: dap };
-        this.form.credentials = { refresh_token: '', client_id: '', client_secret: '' };
+        this.form.credentials = {};
       } else if (st === 'nextcloud') {
         this.form.config = { source_type: st, url: '', folder_path: '', delete_after_process: dap };
         this.form.credentials = { username: '', password: '' };

From 23c8c76b392a95e723f25f8cb3714d4e5f256b30 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 13:17:40 +0000
Subject: [PATCH 3/8] feat(auth): default to system-wide app credentials in
 OAuth wizards for user mode

When system-wide Dropbox, Google Drive, or OneDrive app credentials are
configured by the admin, user-mode OAuth wizards now default to using
them. A toggle lets users switch to custom credentials if needed. This
removes the need for end users to register their own cloud provider apps.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 app/views/dropbox.py                 |  9 +++-
 app/views/google_drive.py            | 21 +++++++--
 app/views/onedrive.py                | 17 ++++---
 frontend/templates/dropbox.html      | 54 ++++++++++++++++++----
 frontend/templates/google_drive.html | 54 ++++++++++++++++++----
 frontend/templates/onedrive.html     | 67 ++++++++++++++++++++++------
 6 files changed, 181 insertions(+), 41 deletions(-)

diff --git a/app/views/dropbox.py b/app/views/dropbox.py
index f623a7c6..8f304784 100644
--- a/app/views/dropbox.py
+++ b/app/views/dropbox.py
@@ -46,6 +46,9 @@ async def dropbox_setup_page(
                     cfg = {}
             # Support both "folder" (DROPBOX destination) and "folder_path" (WATCH_FOLDER source)
             folder_path = cfg.get("folder", cfg.get("folder_path", ""))
+            # Provide system-wide app credentials when available so users can
+            # authorize without creating their own Dropbox app.
+            has_system_credentials = bool(settings.dropbox_app_key and settings.dropbox_app_secret)
             return templates.TemplateResponse(
                 "dropbox.html",
                 {
@@ -56,8 +59,9 @@ async def dropbox_setup_page(
                     "integration_name": integration.name,
                     "integration_type": integration.integration_type,
                     "folder_path": folder_path,
-                    "app_key_value": "",
-                    "app_secret_value": "",
+                    "has_system_credentials": has_system_credentials,
+                    "app_key_value": settings.dropbox_app_key or "" if has_system_credentials else "",
+                    "app_secret_value": settings.dropbox_app_secret or "" if has_system_credentials else "",
                     "refresh_token_value": "",
                 },
             )
@@ -71,6 +75,7 @@ async def dropbox_setup_page(
             "request": request,
             "user_mode": False,
             "is_configured": is_configured,
+            "has_system_credentials": bool(settings.dropbox_app_key and settings.dropbox_app_secret),
             "app_key_value": settings.dropbox_app_key or "",
             "app_secret_value": settings.dropbox_app_secret if settings.dropbox_app_secret else "",
             "refresh_token_value": settings.dropbox_refresh_token if settings.dropbox_refresh_token else "",
diff --git a/app/views/google_drive.py b/app/views/google_drive.py
index f6bde9c0..20b38366 100644
--- a/app/views/google_drive.py
+++ b/app/views/google_drive.py
@@ -45,6 +45,11 @@ async def google_drive_setup_page(
                 except (json.JSONDecodeError, TypeError):
                     cfg = {}
             folder_id = cfg.get("folder_id", "")
+            # Provide system-wide OAuth credentials when available so users can
+            # authorize without registering their own Google Cloud app.
+            has_system_credentials = bool(
+                settings.google_drive_client_id and settings.google_drive_client_secret
+            )
             return templates.TemplateResponse(
                 "google_drive.html",
                 {
@@ -58,10 +63,15 @@ async def google_drive_setup_page(
                     "use_oauth": True,
                     "oauth_configured": bool(integration.credentials),
                     "sa_configured": False,
-                    "client_id": False,
-                    "client_id_value": "",
-                    "client_secret": False,
-                    "client_secret_value": "",
+                    "has_system_credentials": has_system_credentials,
+                    "client_id": bool(settings.google_drive_client_id) if has_system_credentials else False,
+                    "client_id_value": (
+                        settings.google_drive_client_id or "" if has_system_credentials else ""
+                    ),
+                    "client_secret": bool(settings.google_drive_client_secret) if has_system_credentials else False,
+                    "client_secret_value": (
+                        settings.google_drive_client_secret or "" if has_system_credentials else ""
+                    ),
                     "refresh_token": False,
                     "refresh_token_value": "",
                     "has_credentials_json": False,
@@ -90,6 +100,9 @@ async def google_drive_setup_page(
             "use_oauth": use_oauth,
             "oauth_configured": oauth_configured,
             "sa_configured": sa_configured,
+            "has_system_credentials": bool(
+                settings.google_drive_client_id and settings.google_drive_client_secret
+            ),
             "client_id": bool(settings.google_drive_client_id),
             "client_id_value": settings.google_drive_client_id or "",
             "client_secret": bool(settings.google_drive_client_secret),
diff --git a/app/views/onedrive.py b/app/views/onedrive.py
index 4b8b3763..18e823f5 100644
--- a/app/views/onedrive.py
+++ b/app/views/onedrive.py
@@ -44,6 +44,9 @@ async def onedrive_setup_page(
                     cfg = {}
             # Support both "folder_path" (WATCH_FOLDER / ONEDRIVE destination)
             folder_path = cfg.get("folder_path", cfg.get("folder", ""))
+            # Provide system-wide app credentials when available so users can
+            # authorize without registering their own Azure/OneDrive app.
+            has_system_credentials = bool(settings.onedrive_client_id and settings.onedrive_client_secret)
             return templates.TemplateResponse(
                 "onedrive.html",
                 {
@@ -54,11 +57,14 @@ async def onedrive_setup_page(
                     "integration_name": integration.name,
                     "integration_type": integration.integration_type,
                     "folder_path": folder_path,
-                    "client_id": False,
-                    "client_id_value": "",
-                    "client_secret": False,
-                    "client_secret_value": "",
-                    "tenant_id": "common",
+                    "has_system_credentials": has_system_credentials,
+                    "client_id": bool(settings.onedrive_client_id) if has_system_credentials else False,
+                    "client_id_value": settings.onedrive_client_id or "" if has_system_credentials else "",
+                    "client_secret": bool(settings.onedrive_client_secret) if has_system_credentials else False,
+                    "client_secret_value": (
+                        settings.onedrive_client_secret or "" if has_system_credentials else ""
+                    ),
+                    "tenant_id": settings.onedrive_tenant_id or "common",
                     "refresh_token": False,
                     "refresh_token_value": "",
                 },
@@ -75,6 +81,7 @@ async def onedrive_setup_page(
             "request": request,
             "user_mode": False,
             "is_configured": is_configured,
+            "has_system_credentials": bool(settings.onedrive_client_id and settings.onedrive_client_secret),
             "client_id": bool(settings.onedrive_client_id),
             "client_id_value": settings.onedrive_client_id or "",
             "client_secret": bool(settings.onedrive_client_secret),
diff --git a/frontend/templates/dropbox.html b/frontend/templates/dropbox.html
index a94a5b96..492598ba 100644
--- a/frontend/templates/dropbox.html
+++ b/frontend/templates/dropbox.html
@@ -116,14 +116,31 @@
     </h2>
 
     <div class="space-y-4">
-      <div>
-        <label for="app-key" class="block text-sm font-medium text-gray-700">App Key <span class="text-red-500" aria-hidden="true">*</span></label>
-        <input type="text" id="app-key" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Dropbox app key" value="{{ app_key_value }}">
+      {% if user_mode and has_system_credentials %}
+      <!-- System credentials toggle (user mode only) -->
+      <div class="bg-green-50 border border-green-200 rounded-md p-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input type="checkbox" id="use-system-creds" checked class="rounded border-gray-300 text-green-600 focus:ring-green-500 h-5 w-5" />
+          <div>
+            <span class="text-sm font-medium text-green-800">Use DocuElevate's app credentials</span>
+            <p class="text-xs text-green-600 mt-0.5">Recommended — authorize with your Dropbox account without needing your own app registration.</p>
+          </div>
+        </label>
       </div>
+      {% endif %}
 
-      <div>
-        <label for="app-secret" class="block text-sm font-medium text-gray-700">App Secret <span class="text-red-500" aria-hidden="true">*</span></label>
-        <input type="password" id="app-secret" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Dropbox app secret" value="{{ app_secret_value }}">
+      <div id="custom-creds-section" {% if user_mode and has_system_credentials %}class="hidden"{% endif %}>
+        <div class="space-y-4">
+          <div>
+            <label for="app-key" class="block text-sm font-medium text-gray-700">App Key <span class="text-red-500" aria-hidden="true">*</span></label>
+            <input type="text" id="app-key" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Dropbox app key" value="{{ app_key_value if not (user_mode and has_system_credentials) else '' }}">
+          </div>
+
+          <div>
+            <label for="app-secret" class="block text-sm font-medium text-gray-700">App Secret <span class="text-red-500" aria-hidden="true">*</span></label>
+            <input type="password" id="app-secret" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Dropbox app secret" value="{{ app_secret_value if not (user_mode and has_system_credentials) else '' }}">
+          </div>
+        </div>
       </div>
 
       {% if not user_mode %}
@@ -268,6 +285,9 @@ DROPBOX_FOLDER={{ folder_path|default('/Documents/Uploads', true) }}</code></pre
 <script>
 document.addEventListener('DOMContentLoaded', function() {
   const userMode = {{ 'true' if user_mode else 'false' }};
+  const hasSystemCredentials = {{ 'true' if (user_mode and has_system_credentials) else 'false' }};
+  const systemAppKey = {{ (app_key_value or '') | tojson }};
+  const systemAppSecret = {{ (app_secret_value or '') | tojson }};
 
   // Store integration_id if provided (for per-user OAuth flow)
   const integrationId = "{{ integration_id or '' }}";
@@ -281,6 +301,19 @@ document.addEventListener('DOMContentLoaded', function() {
   const refreshTokenBtn = document.getElementById('refresh-token-btn');
   const tokenStatus = document.getElementById('token-status');
   const appSecretInput = document.getElementById('app-secret');
+  const useSystemCredsCheckbox = document.getElementById('use-system-creds');
+  const customCredsSection = document.getElementById('custom-creds-section');
+
+  // Toggle custom credentials section visibility
+  if (useSystemCredsCheckbox && customCredsSection) {
+    useSystemCredsCheckbox.addEventListener('change', function() {
+      if (this.checked) {
+        customCredsSection.classList.add('hidden');
+      } else {
+        customCredsSection.classList.remove('hidden');
+      }
+    });
+  }
 
   // Modal elements
   const resultModal = document.getElementById('resultModal');
@@ -330,8 +363,10 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Start Authentication Flow button click
   startAuthFlowBtn.addEventListener('click', function() {
-    const appKey = document.getElementById('app-key').value.trim();
-    const appSecret = appSecretInput.value.trim();
+    // Determine which credentials to use
+    const useSystemCreds = hasSystemCredentials && useSystemCredsCheckbox && useSystemCredsCheckbox.checked;
+    const appKey = useSystemCreds ? systemAppKey : document.getElementById('app-key').value.trim();
+    const appSecret = useSystemCreds ? systemAppSecret : appSecretInput.value.trim();
     const redirectUri = window.location.origin + "/dropbox-callback";
 
     if (!appKey) {
@@ -347,6 +382,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // Save app key and app secret to session storage temporarily
     sessionStorage.setItem('dropbox_app_key', appKey);
     sessionStorage.setItem('dropbox_app_secret', appSecret);
+    if (useSystemCreds) {
+      sessionStorage.setItem('dropbox_use_system_creds', 'true');
+    }
 
     // In admin mode also store folder path; in user mode the config is already set
     if (!userMode) {
diff --git a/frontend/templates/google_drive.html b/frontend/templates/google_drive.html
index 10a9aca9..43b46d73 100644
--- a/frontend/templates/google_drive.html
+++ b/frontend/templates/google_drive.html
@@ -167,14 +167,31 @@
         <p class="mb-4">Now enter your Client ID and Client Secret below, and we'll help you complete the OAuth flow. You can set the folder ID after authentication is complete.</p>
 
         <div class="space-y-4">
-          <div>
-            <label for="client-id" class="block text-sm font-medium text-gray-700">Client ID</label>
-            <input type="text" id="client-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your OAuth Client ID" value="{{ client_id_value }}">
+          {% if user_mode and has_system_credentials %}
+          <!-- System credentials toggle (user mode only) -->
+          <div class="bg-green-50 border border-green-200 rounded-md p-4">
+            <label class="flex items-center gap-3 cursor-pointer">
+              <input type="checkbox" id="use-system-creds" checked class="rounded border-gray-300 text-green-600 focus:ring-green-500 h-5 w-5" />
+              <div>
+                <span class="text-sm font-medium text-green-800">Use DocuElevate's app credentials</span>
+                <p class="text-xs text-green-600 mt-0.5">Recommended — authorize with your Google account without needing your own Google Cloud app registration.</p>
+              </div>
+            </label>
           </div>
+          {% endif %}
 
-          <div>
-            <label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret</label>
-            <input type="password" id="client-secret" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your OAuth Client Secret" value="{{ client_secret_value }}">
+          <div id="custom-creds-section" {% if user_mode and has_system_credentials %}class="hidden"{% endif %}>
+            <div class="space-y-4">
+              <div>
+                <label for="client-id" class="block text-sm font-medium text-gray-700">Client ID</label>
+                <input type="text" id="client-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your OAuth Client ID" value="{{ client_id_value if not (user_mode and has_system_credentials) else '' }}">
+              </div>
+
+              <div>
+                <label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret</label>
+                <input type="password" id="client-secret" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your OAuth Client Secret" value="{{ client_secret_value if not (user_mode and has_system_credentials) else '' }}">
+              </div>
+            </div>
           </div>
 
           <div>
@@ -430,6 +447,9 @@ GOOGLE_DRIVE_FOLDER_ID={{ folder_id|default('YOUR_FOLDER_ID', true) }}
 <script>
 document.addEventListener('DOMContentLoaded', function() {
   const userMode = {{ 'true' if user_mode else 'false' }};
+  const hasSystemCredentials = {{ 'true' if (user_mode and has_system_credentials) else 'false' }};
+  const systemClientId = {{ (client_id_value or '') | tojson }};
+  const systemClientSecret = {{ (client_secret_value or '') | tojson }};
 
   // Store integration_id if provided (for per-user OAuth flow)
   const integrationId = "{{ integration_id or '' }}";
@@ -437,6 +457,19 @@ document.addEventListener('DOMContentLoaded', function() {
     sessionStorage.setItem('oauth_integration_id', integrationId);
   }
 
+  // System credentials toggle
+  const useSystemCredsCheckbox = document.getElementById('use-system-creds');
+  const customCredsSection = document.getElementById('custom-creds-section');
+  if (useSystemCredsCheckbox && customCredsSection) {
+    useSystemCredsCheckbox.addEventListener('change', function() {
+      if (this.checked) {
+        customCredsSection.classList.add('hidden');
+      } else {
+        customCredsSection.classList.remove('hidden');
+      }
+    });
+  }
+
   // Form elements
   const clientIdInput = document.getElementById('client-id');
   const clientSecretInput = document.getElementById('client-secret');
@@ -719,8 +752,10 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
   // Start OAuth flow button
   if (startOauthFlowBtn) {
     startOauthFlowBtn.addEventListener('click', function() {
-      const clientId = clientIdInput.value.trim();
-      const clientSecret = clientSecretInput.value.trim();
+      // Determine which credentials to use
+      const useSystemCreds = hasSystemCredentials && useSystemCredsCheckbox && useSystemCredsCheckbox.checked;
+      const clientId = useSystemCreds ? systemClientId : clientIdInput.value.trim();
+      const clientSecret = useSystemCreds ? systemClientSecret : clientSecretInput.value.trim();
       const folderId = folderIdInput ? folderIdInput.value.trim() : '';
 
       if (!clientId) {
@@ -736,6 +771,9 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
       // Save values to session storage for use after redirect
       sessionStorage.setItem('google_drive_client_id', clientId);
       sessionStorage.setItem('google_drive_client_secret', clientSecret);
+      if (useSystemCreds) {
+        sessionStorage.setItem('google_drive_use_system_creds', 'true');
+      }
 
       // In admin mode store folder_id; in user mode the config is already set
       if (!userMode && folderId) {
diff --git a/frontend/templates/onedrive.html b/frontend/templates/onedrive.html
index b12ae1ec..7abf84f4 100644
--- a/frontend/templates/onedrive.html
+++ b/frontend/templates/onedrive.html
@@ -130,20 +130,37 @@
     </h2>
 
     <div class="space-y-4">
-      <div>
-        <label for="client-id" class="block text-sm font-medium text-gray-700">Client ID <span class="text-red-500" aria-hidden="true">*</span></label>
-        <input type="text" id="client-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Azure AD application client ID" value="{{ client_id_value }}">
+      {% if user_mode and has_system_credentials %}
+      <!-- System credentials toggle (user mode only) -->
+      <div class="bg-green-50 border border-green-200 rounded-md p-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input type="checkbox" id="use-system-creds" checked class="rounded border-gray-300 text-green-600 focus:ring-green-500 h-5 w-5" />
+          <div>
+            <span class="text-sm font-medium text-green-800">Use DocuElevate's app credentials</span>
+            <p class="text-xs text-green-600 mt-0.5">Recommended — authorize with your OneDrive account without needing your own Azure app registration.</p>
+          </div>
+        </label>
       </div>
+      {% endif %}
 
-      <div>
-        <label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret <span class="text-red-500" aria-hidden="true">*</span></label>
-        <input type="password" id="client-secret" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Azure AD application client secret" value="{{ client_secret_value }}">
-      </div>
+      <div id="custom-creds-section" {% if user_mode and has_system_credentials %}class="hidden"{% endif %}>
+        <div class="space-y-4">
+          <div>
+            <label for="client-id" class="block text-sm font-medium text-gray-700">Client ID <span class="text-red-500" aria-hidden="true">*</span></label>
+            <input type="text" id="client-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Azure AD application client ID" value="{{ client_id_value if not (user_mode and has_system_credentials) else '' }}">
+          </div>
 
-      <div>
-        <label for="tenant-id" class="block text-sm font-medium text-gray-700">Tenant ID (Optional)</label>
-        <input type="text" id="tenant-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="common" value="{{ tenant_id }}">
-        <p class="text-xs text-gray-500 mt-1">Use "common" for personal accounts or your organization's Tenant ID for corporate accounts</p>
+          <div>
+            <label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret <span class="text-red-500" aria-hidden="true">*</span></label>
+            <input type="password" id="client-secret" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Enter your Azure AD application client secret" value="{{ client_secret_value if not (user_mode and has_system_credentials) else '' }}">
+          </div>
+
+          <div>
+            <label for="tenant-id" class="block text-sm font-medium text-gray-700">Tenant ID (Optional)</label>
+            <input type="text" id="tenant-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="common" value="{{ tenant_id }}">
+            <p class="text-xs text-gray-500 mt-1">Use "common" for personal accounts or your organization's Tenant ID for corporate accounts</p>
+          </div>
+        </div>
       </div>
 
       {% if not user_mode %}
@@ -289,6 +306,10 @@ ONEDRIVE_FOLDER_PATH={{ folder_path|default('Documents/Uploads', true) }}</code>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
   const userMode = {{ 'true' if user_mode else 'false' }};
+  const hasSystemCredentials = {{ 'true' if (user_mode and has_system_credentials) else 'false' }};
+  const systemClientId = {{ (client_id_value or '') | tojson }};
+  const systemClientSecret = {{ (client_secret_value or '') | tojson }};
+  const systemTenantId = {{ (tenant_id or 'common') | tojson }};
 
   // Store integration_id if provided (for per-user OAuth flow)
   const integrationId = "{{ integration_id or '' }}";
@@ -302,6 +323,19 @@ document.addEventListener('DOMContentLoaded', function() {
   const refreshTokenBtn = document.getElementById('refresh-token-btn');
   const tokenStatus = document.getElementById('token-status');
   const clientSecretInput = document.getElementById('client-secret');
+  const useSystemCredsCheckbox = document.getElementById('use-system-creds');
+  const customCredsSection = document.getElementById('custom-creds-section');
+
+  // Toggle custom credentials section visibility
+  if (useSystemCredsCheckbox && customCredsSection) {
+    useSystemCredsCheckbox.addEventListener('change', function() {
+      if (this.checked) {
+        customCredsSection.classList.add('hidden');
+      } else {
+        customCredsSection.classList.remove('hidden');
+      }
+    });
+  }
 
   // Modal elements
   const resultModal = document.getElementById('resultModal');
@@ -351,10 +385,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Start Authentication Flow button click
   startAuthFlowBtn.addEventListener('click', function() {
-    const clientId = document.getElementById('client-id').value.trim();
-    const clientSecret = clientSecretInput.value.trim();
+    // Determine which credentials to use
+    const useSystemCreds = hasSystemCredentials && useSystemCredsCheckbox && useSystemCredsCheckbox.checked;
+    const clientId = useSystemCreds ? systemClientId : document.getElementById('client-id').value.trim();
+    const clientSecret = useSystemCreds ? systemClientSecret : clientSecretInput.value.trim();
     const redirectUri = window.location.origin + "/onedrive-callback";
-    const tenantId = document.getElementById('tenant-id').value.trim() || 'common';
+    const tenantId = useSystemCreds ? systemTenantId : (document.getElementById('tenant-id').value.trim() || 'common');
 
     if (!clientId) {
       showModal('error', 'Validation Error', 'Please enter your Client ID');
@@ -370,6 +406,9 @@ document.addEventListener('DOMContentLoaded', function() {
     sessionStorage.setItem('onedrive_client_id', clientId);
     sessionStorage.setItem('onedrive_client_secret', clientSecret);
     sessionStorage.setItem('onedrive_tenant_id', tenantId);
+    if (useSystemCreds) {
+      sessionStorage.setItem('onedrive_use_system_creds', 'true');
+    }
 
     // In admin mode also store folder path; in user mode the config is already set
     if (!userMode) {

From a8423064ec72bf8014ca37936960c5da9ddcea1f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 13:21:52 +0000
Subject: [PATCH 4/8] feat(api): add folder browser API endpoints and UI for
 Dropbox and OneDrive

Added POST /api/dropbox/list-folders and POST /api/onedrive/list-folders
endpoints that accept an OAuth access_token and return folder listings.

After successful OAuth authorization in the callback pages, users now
see an interactive folder browser to select the target folder for their
integration. The selected folder is saved to the integration config.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 app/api/dropbox.py                        |  85 +++++++++++
 app/api/onedrive.py                       |  97 +++++++++++++
 frontend/templates/dropbox_callback.html  | 165 +++++++++++++++++++++-
 frontend/templates/onedrive_callback.html | 157 +++++++++++++++++++-
 4 files changed, 492 insertions(+), 12 deletions(-)

diff --git a/app/api/dropbox.py b/app/api/dropbox.py
index f9bf10e5..3abe83a8 100644
--- a/app/api/dropbox.py
+++ b/app/api/dropbox.py
@@ -207,6 +207,91 @@ async def test_dropbox_token(request: Request):
         return {"status": "error", "message": f"Connection error: {str(e)}"}
 
 
+@router.post("/dropbox/list-folders")
+@require_login
+async def list_dropbox_folders(
+    request: Request,
+    access_token: Annotated[str, Form(...)],
+    path: Annotated[str, Form()] = "",
+):
+    """
+    List folders in a Dropbox account for the directory selector.
+
+    Accepts an OAuth access token (short-lived) and a path to list.
+    Returns a flat list of folder entries under the given path.
+    """
+    try:
+        # Normalize path: Dropbox API uses "" for root, otherwise "/path"
+        folder_path = path.strip()
+        if folder_path == "/":
+            folder_path = ""
+        elif folder_path and not folder_path.startswith("/"):
+            folder_path = f"/{folder_path}"
+
+        headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type": "application/json",
+        }
+
+        payload = {
+            "path": folder_path,
+            "recursive": False,
+            "include_deleted": False,
+            "include_has_explicit_shared_members": False,
+            "include_mounted_folders": True,
+        }
+
+        response = requests.post(
+            "https://api.dropboxapi.com/2/files/list_folder",
+            headers=headers,
+            json=payload,
+            timeout=settings.http_request_timeout,
+        )
+
+        if response.status_code == 401:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Access token is invalid or expired. Please re-authorize.",
+            )
+
+        if response.status_code != 200:
+            logger.error(f"Dropbox list_folder failed: {response.status_code} {response.text}")
+            raise HTTPException(
+                status_code=status.HTTP_502_BAD_GATEWAY,
+                detail=f"Failed to list Dropbox folders: {response.text}",
+            )
+
+        data = response.json()
+        folders = []
+        for entry in data.get("entries", []):
+            if entry.get(".tag") == "folder":
+                folders.append(
+                    {
+                        "name": entry["name"],
+                        "path": entry["path_display"],
+                        "id": entry.get("id", ""),
+                    }
+                )
+
+        # Sort folders alphabetically
+        folders.sort(key=lambda f: f["name"].lower())
+
+        return {
+            "folders": folders,
+            "path": folder_path or "/",
+            "has_more": data.get("has_more", False),
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.exception(f"Error listing Dropbox folders: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Failed to list folders: {str(e)}",
+        )
+
+
 @router.post("/dropbox/save-settings")
 @require_login
 async def save_dropbox_settings(
diff --git a/app/api/onedrive.py b/app/api/onedrive.py
index e9f8328d..ca13c3bf 100644
--- a/app/api/onedrive.py
+++ b/app/api/onedrive.py
@@ -56,6 +56,7 @@ async def exchange_onedrive_token(
     # Return just what's needed by the frontend
     return {
         "refresh_token": token_data["refresh_token"],
+        "access_token": token_data.get("access_token", ""),
         "expires_in": token_data.get("expires_in", 3600),
     }
 
@@ -206,6 +207,102 @@ async def test_onedrive_token(request: Request):
         return {"status": "error", "message": f"Connection error: {str(e)}"}
 
 
+@router.post("/onedrive/list-folders")
+@require_login
+async def list_onedrive_folders(
+    request: Request,
+    access_token: Annotated[str, Form(...)],
+    path: Annotated[str, Form()] = "",
+):
+    """
+    List folders in a OneDrive account for the directory selector.
+
+    Accepts an OAuth access token (short-lived) and a path to list.
+    Returns a flat list of folder entries under the given path.
+    """
+    try:
+        folder_path = path.strip().strip("/")
+
+        headers = {
+            "Authorization": f"Bearer {access_token}",
+        }
+
+        # Build the Graph API URL for listing children
+        if not folder_path or folder_path == "root":
+            url = "https://graph.microsoft.com/v1.0/me/drive/root/children"
+        else:
+            url = f"https://graph.microsoft.com/v1.0/me/drive/root:/{folder_path}:/children"
+
+        # Only request folders and minimal fields
+        params = {
+            "$filter": "folder ne null",
+            "$select": "name,id,parentReference,folder",
+            "$top": "200",
+        }
+
+        response = requests.get(
+            url,
+            headers=headers,
+            params=params,
+            timeout=settings.http_request_timeout,
+        )
+
+        if response.status_code == 401:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Access token is invalid or expired. Please re-authorize.",
+            )
+
+        if response.status_code != 200:
+            logger.error(f"OneDrive list children failed: {response.status_code} {response.text}")
+            raise HTTPException(
+                status_code=status.HTTP_502_BAD_GATEWAY,
+                detail=f"Failed to list OneDrive folders: {response.text}",
+            )
+
+        data = response.json()
+        folders = []
+        for item in data.get("value", []):
+            if "folder" in item:
+                parent_path = ""
+                if item.get("parentReference", {}).get("path"):
+                    # parentReference.path looks like /drive/root:/some/path
+                    raw_parent = item["parentReference"]["path"]
+                    prefix = "/drive/root:"
+                    if raw_parent.startswith(prefix):
+                        parent_path = raw_parent[len(prefix):]
+                    elif raw_parent == "/drive/root":
+                        parent_path = ""
+
+                item_path = f"{parent_path}/{item['name']}" if parent_path else f"/{item['name']}"
+
+                folders.append(
+                    {
+                        "name": item["name"],
+                        "path": item_path,
+                        "id": item.get("id", ""),
+                        "child_count": item.get("folder", {}).get("childCount", 0),
+                    }
+                )
+
+        # Sort folders alphabetically
+        folders.sort(key=lambda f: f["name"].lower())
+
+        return {
+            "folders": folders,
+            "path": f"/{folder_path}" if folder_path else "/",
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.exception(f"Error listing OneDrive folders: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Failed to list folders: {str(e)}",
+        )
+
+
 def format_time_remaining(time_delta):
     """Format a timedelta into a human-readable string."""
     if time_delta.total_seconds() <= 0:
diff --git a/frontend/templates/dropbox_callback.html b/frontend/templates/dropbox_callback.html
index fd7b0f31..e59c6e40 100644
--- a/frontend/templates/dropbox_callback.html
+++ b/frontend/templates/dropbox_callback.html
@@ -59,6 +59,40 @@
         </div>
       </div>
 
+      <!-- Folder selector (shown after authorization) -->
+      <div id="folder-selector" class="hidden mt-6 p-4 bg-white border border-gray-200 rounded-lg">
+        <h3 class="font-medium text-lg mb-3">
+          <svg class="inline-block h-5 w-5 mr-1 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" />
+            <path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" />
+          </svg>
+          Select Folder
+        </h3>
+        <p class="text-sm text-gray-600 mb-3">Browse your Dropbox to select a folder for this integration.</p>
+
+        <div class="mb-3">
+          <div id="folder-breadcrumb" class="flex items-center text-sm text-gray-500 mb-2">
+            <button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="" aria-label="Navigate to root folder">/ Root</button>
+          </div>
+        </div>
+
+        <div id="folder-list" class="border border-gray-200 rounded-md max-h-64 overflow-y-auto">
+          <div class="p-4 text-center text-gray-500">
+            <div class="animate-spin inline-block h-5 w-5 border-2 border-gray-300 border-t-indigo-600 rounded-full mb-2" role="status" aria-label="Loading folders"></div>
+            <p class="text-sm">Loading folders…</p>
+          </div>
+        </div>
+
+        <div class="mt-3 flex items-center gap-3">
+          <label for="selected-folder-path" class="text-sm font-medium text-gray-700 whitespace-nowrap">Selected folder:</label>
+          <input id="selected-folder-path" type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="/" />
+          <button id="save-folder-btn" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            Save Folder
+          </button>
+        </div>
+        <p id="folder-save-status" class="mt-2 text-sm hidden" aria-live="polite"></p>
+      </div>
+
       <div class="mt-6 p-4 bg-gray-100 rounded-md">
         <h3 class="font-medium text-lg mb-2">Configuration for Worker Nodes</h3>
         <p class="text-sm text-gray-600 mb-3">
@@ -173,18 +207,21 @@ document.addEventListener('DOMContentLoaded', function() {
             }
             return response.json();
           }).then(() => {
-            // Clean up
+            // Clean up session storage
             sessionStorage.removeItem('dropbox_app_key');
             sessionStorage.removeItem('dropbox_app_secret');
             sessionStorage.removeItem('dropbox_folder_path');
             sessionStorage.removeItem('oauth_integration_id');
+            sessionStorage.removeItem('dropbox_use_system_creds');
 
-            // Show brief success then redirect to integrations
-            document.getElementById('processing-message').innerHTML =
-              '<p class="text-green-600 font-semibold">✓ Dropbox authorized successfully!</p>' +
-              '<p class="text-sm text-gray-500 mt-2">Redirecting to Integrations...</p>';
+            // Hide processing spinner, show success
             document.querySelector('.animate-spin').parentNode.classList.add('hidden');
-            setTimeout(() => { window.location.href = '/integrations'; }, 2000);
+            document.getElementById('processing-message').innerHTML =
+              '<p class="text-green-600 font-semibold">✓ Dropbox authorized successfully!</p>';
+            document.getElementById('success-container').classList.remove('hidden');
+
+            // Show folder browser with the access token
+            initFolderBrowser(data.access_token, integrationId);
           });
         }
 
@@ -279,6 +316,122 @@ DROPBOX_FOLDER=${folderPath || '/Documents/Uploads'}`;
       });
     }
   }
+
+  // ── Folder browser ────────────────────────────────────────────────
+  function initFolderBrowser(accessToken, integrationId) {
+    const folderSelector = document.getElementById('folder-selector');
+    if (!folderSelector || !integrationId) return;
+
+    folderSelector.classList.remove('hidden');
+    let currentPath = '';
+
+    const folderList = document.getElementById('folder-list');
+    const breadcrumb = document.getElementById('folder-breadcrumb');
+    const selectedInput = document.getElementById('selected-folder-path');
+    const saveBtn = document.getElementById('save-folder-btn');
+    const saveStatus = document.getElementById('folder-save-status');
+
+    function loadFolders(path) {
+      currentPath = path;
+      folderList.innerHTML = '<div class="p-4 text-center text-gray-500"><div class="animate-spin inline-block h-5 w-5 border-2 border-gray-300 border-t-indigo-600 rounded-full mb-2" role="status" aria-label="Loading folders"></div><p class="text-sm">Loading folders…</p></div>';
+
+      const formData = new FormData();
+      formData.append('access_token', accessToken);
+      formData.append('path', path);
+
+      fetch('/api/dropbox/list-folders', { method: 'POST', body: formData })
+        .then(r => r.json())
+        .then(data => {
+          if (data.folders && data.folders.length > 0) {
+            folderList.innerHTML = data.folders.map(f =>
+              `<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${f.path}" aria-label="Open folder ${f.name}">` +
+              `<svg class="h-5 w-5 text-yellow-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg>` +
+              `<span class="font-medium text-gray-700">${f.name}</span>` +
+              `</button>`
+            ).join('');
+
+            folderList.querySelectorAll('.folder-item').forEach(btn => {
+              btn.addEventListener('click', () => {
+                const p = btn.getAttribute('data-path');
+                selectedInput.value = p;
+                loadFolders(p);
+              });
+            });
+          } else {
+            folderList.innerHTML = '<div class="p-4 text-center text-gray-400 text-sm">No subfolders found</div>';
+          }
+          updateBreadcrumb(path);
+        })
+        .catch(err => {
+          folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${err.message}</div>`;
+        });
+    }
+
+    function updateBreadcrumb(path) {
+      const parts = path.split('/').filter(Boolean);
+      let html = '<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="" aria-label="Navigate to root folder">/ Root</button>';
+      let accumulated = '';
+      for (const part of parts) {
+        accumulated += '/' + part;
+        html += `<span class="mx-1 text-gray-400">/</span>`;
+        html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${accumulated}" aria-label="Navigate to ${part}">${part}</button>`;
+      }
+      breadcrumb.innerHTML = html;
+      breadcrumb.querySelectorAll('.folder-nav-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const p = btn.getAttribute('data-path');
+          selectedInput.value = p || '/';
+          loadFolders(p);
+        });
+      });
+    }
+
+    // Save selected folder to integration config
+    saveBtn.addEventListener('click', () => {
+      const folderPath = selectedInput.value.trim() || '/';
+      saveBtn.disabled = true;
+      saveBtn.textContent = 'Saving…';
+
+      // Get the current integration config, update folder_path, then PUT back
+      fetch(`/api/integrations/${integrationId}`)
+        .then(r => r.json())
+        .then(intg => {
+          const cfg = intg.config || {};
+          // Update the correct folder key based on integration type
+          if (cfg.source_type) {
+            cfg.folder_path = folderPath;
+          } else {
+            cfg.folder = folderPath;
+          }
+          return fetch(`/api/integrations/${integrationId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ config: cfg }),
+          });
+        })
+        .then(r => {
+          if (!r.ok) throw new Error('Failed to save folder');
+          return r.json();
+        })
+        .then(() => {
+          saveStatus.textContent = '✓ Folder saved! Redirecting…';
+          saveStatus.className = 'mt-2 text-sm text-green-600';
+          saveStatus.classList.remove('hidden');
+          saveBtn.textContent = 'Saved ✓';
+          setTimeout(() => { window.location.href = '/integrations'; }, 1500);
+        })
+        .catch(err => {
+          saveStatus.textContent = 'Error: ' + err.message;
+          saveStatus.className = 'mt-2 text-sm text-red-600';
+          saveStatus.classList.remove('hidden');
+          saveBtn.disabled = false;
+          saveBtn.textContent = 'Save Folder';
+        });
+    });
+
+    // Load root folders initially
+    loadFolders('');
+  }
 });
 </script>
 {% endblock %}
diff --git a/frontend/templates/onedrive_callback.html b/frontend/templates/onedrive_callback.html
index 3eece4e9..306f0ec4 100644
--- a/frontend/templates/onedrive_callback.html
+++ b/frontend/templates/onedrive_callback.html
@@ -59,6 +59,40 @@
         </div>
       </div>
 
+      <!-- Folder selector (shown after authorization) -->
+      <div id="folder-selector" class="hidden mt-6 p-4 bg-white border border-gray-200 rounded-lg">
+        <h3 class="font-medium text-lg mb-3">
+          <svg class="inline-block h-5 w-5 mr-1 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" />
+            <path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" />
+          </svg>
+          Select Folder
+        </h3>
+        <p class="text-sm text-gray-600 mb-3">Browse your OneDrive to select a folder for this integration.</p>
+
+        <div class="mb-3">
+          <div id="folder-breadcrumb" class="flex items-center text-sm text-gray-500 mb-2">
+            <button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="" aria-label="Navigate to root folder">/ Root</button>
+          </div>
+        </div>
+
+        <div id="folder-list" class="border border-gray-200 rounded-md max-h-64 overflow-y-auto">
+          <div class="p-4 text-center text-gray-500">
+            <div class="animate-spin inline-block h-5 w-5 border-2 border-gray-300 border-t-indigo-600 rounded-full mb-2" role="status" aria-label="Loading folders"></div>
+            <p class="text-sm">Loading folders…</p>
+          </div>
+        </div>
+
+        <div class="mt-3 flex items-center gap-3">
+          <label for="selected-folder-path" class="text-sm font-medium text-gray-700 whitespace-nowrap">Selected folder:</label>
+          <input id="selected-folder-path" type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="/" />
+          <button id="save-folder-btn" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            Save Folder
+          </button>
+        </div>
+        <p id="folder-save-status" class="mt-2 text-sm hidden" aria-live="polite"></p>
+      </div>
+
       <div class="mt-6 p-4 bg-gray-100 rounded-md">
         <h3 class="font-medium text-lg mb-2">Configuration for Worker Nodes</h3>
         <p class="text-sm text-gray-600 mb-3">
@@ -177,19 +211,22 @@ document.addEventListener('DOMContentLoaded', function() {
             }
             return response.json();
           }).then(() => {
-            // Clean up
+            // Clean up session storage
             sessionStorage.removeItem('onedrive_client_id');
             sessionStorage.removeItem('onedrive_client_secret');
             sessionStorage.removeItem('onedrive_tenant_id');
             sessionStorage.removeItem('onedrive_folder_path');
             sessionStorage.removeItem('oauth_integration_id');
+            sessionStorage.removeItem('onedrive_use_system_creds');
 
-            // Show brief success then redirect to integrations
-            document.getElementById('processing-message').innerHTML =
-              '<p class="text-green-600 font-semibold">✓ OneDrive authorized successfully!</p>' +
-              '<p class="text-sm text-gray-500 mt-2">Redirecting to Integrations...</p>';
+            // Hide processing spinner, show success
             document.querySelector('.animate-spin').parentNode.classList.add('hidden');
-            setTimeout(() => { window.location.href = '/integrations'; }, 2000);
+            document.getElementById('processing-message').innerHTML =
+              '<p class="text-green-600 font-semibold">✓ OneDrive authorized successfully!</p>';
+            document.getElementById('success-container').classList.remove('hidden');
+
+            // Show folder browser with the access token
+            initFolderBrowser(data.access_token, integrationId);
           });
         }
 
@@ -291,6 +328,114 @@ ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
       });
     }
   }
+
+  // ── Folder browser ────────────────────────────────────────────────
+  function initFolderBrowser(accessToken, integrationId) {
+    const folderSelector = document.getElementById('folder-selector');
+    if (!folderSelector || !integrationId || !accessToken) return;
+
+    folderSelector.classList.remove('hidden');
+
+    const folderList = document.getElementById('folder-list');
+    const breadcrumb = document.getElementById('folder-breadcrumb');
+    const selectedInput = document.getElementById('selected-folder-path');
+    const saveBtn = document.getElementById('save-folder-btn');
+    const saveStatus = document.getElementById('folder-save-status');
+
+    function loadFolders(path) {
+      folderList.innerHTML = '<div class="p-4 text-center text-gray-500"><div class="animate-spin inline-block h-5 w-5 border-2 border-gray-300 border-t-indigo-600 rounded-full mb-2" role="status" aria-label="Loading folders"></div><p class="text-sm">Loading folders…</p></div>';
+
+      const formData = new FormData();
+      formData.append('access_token', accessToken);
+      formData.append('path', path);
+
+      fetch('/api/onedrive/list-folders', { method: 'POST', body: formData })
+        .then(r => r.json())
+        .then(data => {
+          if (data.folders && data.folders.length > 0) {
+            folderList.innerHTML = data.folders.map(f =>
+              `<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${f.path}" aria-label="Open folder ${f.name}">` +
+              `<svg class="h-5 w-5 text-blue-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg>` +
+              `<span class="font-medium text-gray-700">${f.name}</span>` +
+              `</button>`
+            ).join('');
+
+            folderList.querySelectorAll('.folder-item').forEach(btn => {
+              btn.addEventListener('click', () => {
+                const p = btn.getAttribute('data-path');
+                selectedInput.value = p;
+                loadFolders(p.replace(/^\//, ''));
+              });
+            });
+          } else {
+            folderList.innerHTML = '<div class="p-4 text-center text-gray-400 text-sm">No subfolders found</div>';
+          }
+          updateBreadcrumb(path);
+        })
+        .catch(err => {
+          folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${err.message}</div>`;
+        });
+    }
+
+    function updateBreadcrumb(path) {
+      const parts = path.split('/').filter(Boolean);
+      let html = '<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="" aria-label="Navigate to root folder">/ Root</button>';
+      let accumulated = '';
+      for (const part of parts) {
+        accumulated += '/' + part;
+        html += `<span class="mx-1 text-gray-400">/</span>`;
+        html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${accumulated.replace(/^\//, '')}" aria-label="Navigate to ${part}">${part}</button>`;
+      }
+      breadcrumb.innerHTML = html;
+      breadcrumb.querySelectorAll('.folder-nav-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const p = btn.getAttribute('data-path');
+          selectedInput.value = p ? '/' + p : '/';
+          loadFolders(p);
+        });
+      });
+    }
+
+    // Save selected folder to integration config
+    saveBtn.addEventListener('click', () => {
+      const folderPath = selectedInput.value.trim() || '/';
+      saveBtn.disabled = true;
+      saveBtn.textContent = 'Saving…';
+
+      fetch(`/api/integrations/${integrationId}`)
+        .then(r => r.json())
+        .then(intg => {
+          const cfg = intg.config || {};
+          cfg.folder_path = folderPath;
+          return fetch(`/api/integrations/${integrationId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ config: cfg }),
+          });
+        })
+        .then(r => {
+          if (!r.ok) throw new Error('Failed to save folder');
+          return r.json();
+        })
+        .then(() => {
+          saveStatus.textContent = '✓ Folder saved! Redirecting…';
+          saveStatus.className = 'mt-2 text-sm text-green-600';
+          saveStatus.classList.remove('hidden');
+          saveBtn.textContent = 'Saved ✓';
+          setTimeout(() => { window.location.href = '/integrations'; }, 1500);
+        })
+        .catch(err => {
+          saveStatus.textContent = 'Error: ' + err.message;
+          saveStatus.className = 'mt-2 text-sm text-red-600';
+          saveStatus.classList.remove('hidden');
+          saveBtn.disabled = false;
+          saveBtn.textContent = 'Save Folder';
+        });
+    });
+
+    // Load root folders initially
+    loadFolders('');
+  }
 });
 </script>
 {% endblock %}

From 1e1e6e62807a6d4b7bc84b2d8c967dceb97f1cb6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 13:40:51 +0000
Subject: [PATCH 5/8] test: add tests for folder browser APIs and system
 credentials toggle

Added tests for POST /api/dropbox/list-folders (7 tests) and
POST /api/onedrive/list-folders (7 tests) covering success, subfolder
navigation, empty directories, auth errors, API errors, path
normalization, and alphabetical sorting.

Added view tests for system credentials toggle visibility in Dropbox
setup wizard.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 app/api/onedrive.py                      |   2 +-
 app/views/google_drive.py                |  12 +-
 app/views/onedrive.py                    |   4 +-
 tests/test_api_dropbox.py                | 144 ++++++++++++++++++
 tests/test_api_onedrive_comprehensive.py | 179 +++++++++++++++++++++++
 tests/test_views_dropbox.py              |  58 ++++++++
 6 files changed, 386 insertions(+), 13 deletions(-)

diff --git a/app/api/onedrive.py b/app/api/onedrive.py
index ca13c3bf..48b043ce 100644
--- a/app/api/onedrive.py
+++ b/app/api/onedrive.py
@@ -270,7 +270,7 @@ async def list_onedrive_folders(
                     raw_parent = item["parentReference"]["path"]
                     prefix = "/drive/root:"
                     if raw_parent.startswith(prefix):
-                        parent_path = raw_parent[len(prefix):]
+                        parent_path = raw_parent[len(prefix) :]
                     elif raw_parent == "/drive/root":
                         parent_path = ""
 
diff --git a/app/views/google_drive.py b/app/views/google_drive.py
index 20b38366..ec70f92c 100644
--- a/app/views/google_drive.py
+++ b/app/views/google_drive.py
@@ -47,9 +47,7 @@ async def google_drive_setup_page(
             folder_id = cfg.get("folder_id", "")
             # Provide system-wide OAuth credentials when available so users can
             # authorize without registering their own Google Cloud app.
-            has_system_credentials = bool(
-                settings.google_drive_client_id and settings.google_drive_client_secret
-            )
+            has_system_credentials = bool(settings.google_drive_client_id and settings.google_drive_client_secret)
             return templates.TemplateResponse(
                 "google_drive.html",
                 {
@@ -65,9 +63,7 @@ async def google_drive_setup_page(
                     "sa_configured": False,
                     "has_system_credentials": has_system_credentials,
                     "client_id": bool(settings.google_drive_client_id) if has_system_credentials else False,
-                    "client_id_value": (
-                        settings.google_drive_client_id or "" if has_system_credentials else ""
-                    ),
+                    "client_id_value": (settings.google_drive_client_id or "" if has_system_credentials else ""),
                     "client_secret": bool(settings.google_drive_client_secret) if has_system_credentials else False,
                     "client_secret_value": (
                         settings.google_drive_client_secret or "" if has_system_credentials else ""
@@ -100,9 +96,7 @@ async def google_drive_setup_page(
             "use_oauth": use_oauth,
             "oauth_configured": oauth_configured,
             "sa_configured": sa_configured,
-            "has_system_credentials": bool(
-                settings.google_drive_client_id and settings.google_drive_client_secret
-            ),
+            "has_system_credentials": bool(settings.google_drive_client_id and settings.google_drive_client_secret),
             "client_id": bool(settings.google_drive_client_id),
             "client_id_value": settings.google_drive_client_id or "",
             "client_secret": bool(settings.google_drive_client_secret),
diff --git a/app/views/onedrive.py b/app/views/onedrive.py
index 18e823f5..d9fd5e6e 100644
--- a/app/views/onedrive.py
+++ b/app/views/onedrive.py
@@ -61,9 +61,7 @@ async def onedrive_setup_page(
                     "client_id": bool(settings.onedrive_client_id) if has_system_credentials else False,
                     "client_id_value": settings.onedrive_client_id or "" if has_system_credentials else "",
                     "client_secret": bool(settings.onedrive_client_secret) if has_system_credentials else False,
-                    "client_secret_value": (
-                        settings.onedrive_client_secret or "" if has_system_credentials else ""
-                    ),
+                    "client_secret_value": (settings.onedrive_client_secret or "" if has_system_credentials else ""),
                     "tenant_id": settings.onedrive_tenant_id or "common",
                     "refresh_token": False,
                     "refresh_token_value": "",
diff --git a/tests/test_api_dropbox.py b/tests/test_api_dropbox.py
index f3d3a7a1..ce6bc2ad 100644
--- a/tests/test_api_dropbox.py
+++ b/tests/test_api_dropbox.py
@@ -412,3 +412,147 @@ class TestSaveDropboxSettings:
         # .env write is best-effort; endpoint should still succeed via DB write
         assert response.status_code == 200
         assert response.json()["status"] == "success"
+
+
+@pytest.mark.unit
+class TestListDropboxFolders:
+    """Tests for list_dropbox_folders endpoint."""
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_success(self, mock_post, client):
+        """Test successful folder listing at root."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "entries": [
+                {".tag": "folder", "name": "Documents", "path_display": "/Documents", "id": "id:1"},
+                {".tag": "folder", "name": "Photos", "path_display": "/Photos", "id": "id:2"},
+                {".tag": "file", "name": "readme.txt", "path_display": "/readme.txt", "id": "id:3"},
+            ],
+            "has_more": False,
+        }
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert len(data["folders"]) == 2
+        assert data["folders"][0]["name"] == "Documents"
+        assert data["folders"][1]["name"] == "Photos"
+        assert data["path"] == "/"
+        assert data["has_more"] is False
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_subfolder(self, mock_post, client):
+        """Test listing folders in a subfolder."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "entries": [
+                {".tag": "folder", "name": "Invoices", "path_display": "/Documents/Invoices", "id": "id:4"},
+            ],
+            "has_more": False,
+        }
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "test-token", "path": "/Documents"},
+        )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert len(data["folders"]) == 1
+        assert data["folders"][0]["path"] == "/Documents/Invoices"
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_empty(self, mock_post, client):
+        """Test listing folders in an empty directory."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {"entries": [], "has_more": False}
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "test-token", "path": "/EmptyFolder"},
+        )
+
+        assert response.status_code == 200
+        assert len(response.json()["folders"]) == 0
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_unauthorized(self, mock_post, client):
+        """Test listing folders with invalid token returns 401."""
+        mock_response = Mock()
+        mock_response.status_code = 401
+        mock_response.text = "Invalid access token"
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "bad-token", "path": ""},
+        )
+
+        assert response.status_code == 401
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_api_error(self, mock_post, client):
+        """Test listing folders when Dropbox API returns an error."""
+        mock_response = Mock()
+        mock_response.status_code = 500
+        mock_response.text = "Internal server error"
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 502
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_root_path_normalization(self, mock_post, client):
+        """Test that '/' is normalized to empty string for Dropbox API."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {"entries": [], "has_more": False}
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "test-token", "path": "/"},
+        )
+
+        assert response.status_code == 200
+        # Check the actual API call used empty string for root
+        call_args = mock_post.call_args
+        assert call_args[1]["json"]["path"] == ""
+
+    @patch("app.api.dropbox.requests.post")
+    def test_list_folders_sorted_alphabetically(self, mock_post, client):
+        """Test that folders are returned in alphabetical order."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "entries": [
+                {".tag": "folder", "name": "Zebra", "path_display": "/Zebra", "id": "id:1"},
+                {".tag": "folder", "name": "Alpha", "path_display": "/Alpha", "id": "id:2"},
+                {".tag": "folder", "name": "middle", "path_display": "/middle", "id": "id:3"},
+            ],
+            "has_more": False,
+        }
+        mock_post.return_value = mock_response
+
+        response = client.post(
+            "/api/dropbox/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 200
+        names = [f["name"] for f in response.json()["folders"]]
+        assert names == ["Alpha", "middle", "Zebra"]
diff --git a/tests/test_api_onedrive_comprehensive.py b/tests/test_api_onedrive_comprehensive.py
index 1019031b..f46fb397 100644
--- a/tests/test_api_onedrive_comprehensive.py
+++ b/tests/test_api_onedrive_comprehensive.py
@@ -695,3 +695,182 @@ class TestOneDriveIntegration:
 
         # Verify env format is present (exact values may vary)
         assert "env_format" in config_data
+
+
+@pytest.mark.unit
+class TestListOneDriveFolders:
+    """Tests for list_onedrive_folders endpoint."""
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_success(self, mock_get, client):
+        """Test successful folder listing at root."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "value": [
+                {
+                    "name": "Documents",
+                    "id": "id:1",
+                    "folder": {"childCount": 3},
+                    "parentReference": {"path": "/drive/root:"},
+                },
+                {
+                    "name": "Pictures",
+                    "id": "id:2",
+                    "folder": {"childCount": 10},
+                    "parentReference": {"path": "/drive/root:"},
+                },
+            ],
+        }
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert len(data["folders"]) == 2
+        assert data["folders"][0]["name"] == "Documents"
+        assert data["folders"][0]["path"] == "/Documents"
+        assert data["folders"][1]["name"] == "Pictures"
+        assert data["path"] == "/"
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_subfolder(self, mock_get, client):
+        """Test listing folders in a subfolder."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "value": [
+                {
+                    "name": "Invoices",
+                    "id": "id:3",
+                    "folder": {"childCount": 0},
+                    "parentReference": {"path": "/drive/root:/Documents"},
+                },
+            ],
+        }
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "test-token", "path": "Documents"},
+        )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert len(data["folders"]) == 1
+        assert data["folders"][0]["path"] == "/Documents/Invoices"
+        assert data["path"] == "/Documents"
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_empty(self, mock_get, client):
+        """Test listing folders in an empty directory."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {"value": []}
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "test-token", "path": "EmptyFolder"},
+        )
+
+        assert response.status_code == 200
+        assert len(response.json()["folders"]) == 0
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_unauthorized(self, mock_get, client):
+        """Test listing folders with invalid token returns 401."""
+        mock_response = Mock()
+        mock_response.status_code = 401
+        mock_response.text = "Invalid access token"
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "bad-token", "path": ""},
+        )
+
+        assert response.status_code == 401
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_api_error(self, mock_get, client):
+        """Test listing folders when Graph API returns an error."""
+        mock_response = Mock()
+        mock_response.status_code = 500
+        mock_response.text = "Internal server error"
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 502
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_sorted_alphabetically(self, mock_get, client):
+        """Test that folders are returned in alphabetical order."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "value": [
+                {
+                    "name": "Zebra",
+                    "id": "id:1",
+                    "folder": {"childCount": 0},
+                    "parentReference": {"path": "/drive/root:"},
+                },
+                {
+                    "name": "Alpha",
+                    "id": "id:2",
+                    "folder": {"childCount": 0},
+                    "parentReference": {"path": "/drive/root:"},
+                },
+                {
+                    "name": "middle",
+                    "id": "id:3",
+                    "folder": {"childCount": 0},
+                    "parentReference": {"path": "/drive/root:"},
+                },
+            ],
+        }
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 200
+        names = [f["name"] for f in response.json()["folders"]]
+        assert names == ["Alpha", "middle", "Zebra"]
+
+    @patch("app.api.onedrive.requests.get")
+    def test_list_folders_root_drive_parent(self, mock_get, client):
+        """Test folder path construction when parentReference.path is /drive/root."""
+        mock_response = Mock()
+        mock_response.status_code = 200
+        mock_response.json.return_value = {
+            "value": [
+                {
+                    "name": "TopLevel",
+                    "id": "id:1",
+                    "folder": {"childCount": 0},
+                    "parentReference": {"path": "/drive/root"},
+                },
+            ],
+        }
+        mock_get.return_value = mock_response
+
+        response = client.post(
+            "/api/onedrive/list-folders",
+            data={"access_token": "test-token", "path": ""},
+        )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert data["folders"][0]["path"] == "/TopLevel"
diff --git a/tests/test_views_dropbox.py b/tests/test_views_dropbox.py
index d42b9304..5975fc4c 100644
--- a/tests/test_views_dropbox.py
+++ b/tests/test_views_dropbox.py
@@ -144,3 +144,61 @@ class TestDropboxViews:
         assert response.status_code == 200
         assert b"/Documents/Uploads" in response.content
         assert b"Back to Integrations" in response.content
+
+    def test_dropbox_setup_user_mode_system_credentials_shown(self, client, db_session):
+        """Test that system credentials toggle appears when system creds are configured."""
+        owner_id = "user_sys_creds@example.com"
+        integration = UserIntegration(
+            owner_id=owner_id,
+            direction="DESTINATION",
+            integration_type="DROPBOX",
+            name="My Dropbox",
+            config=json.dumps({"folder": "/test"}),
+            is_active=True,
+        )
+        db_session.add(integration)
+        db_session.commit()
+        db_session.refresh(integration)
+
+        with (
+            patch("app.views.dropbox.get_current_owner_id", return_value=owner_id),
+            patch("app.views.dropbox.settings") as mock_settings,
+        ):
+            mock_settings.dropbox_app_key = "system-key"
+            mock_settings.dropbox_app_secret = "system-secret"
+            mock_settings.dropbox_refresh_token = None
+            mock_settings.dropbox_folder = None
+            response = client.get(f"/dropbox-setup?integration_id={integration.id}")
+
+        assert response.status_code == 200
+        assert b"use-system-creds" in response.content
+        assert b"DocuElevate" in response.content
+
+    def test_dropbox_setup_user_mode_no_system_credentials(self, client, db_session):
+        """Test that system credentials toggle is hidden when no system creds configured."""
+        owner_id = "user_no_sys@example.com"
+        integration = UserIntegration(
+            owner_id=owner_id,
+            direction="DESTINATION",
+            integration_type="DROPBOX",
+            name="My Dropbox",
+            config=json.dumps({"folder": "/test"}),
+            is_active=True,
+        )
+        db_session.add(integration)
+        db_session.commit()
+        db_session.refresh(integration)
+
+        with (
+            patch("app.views.dropbox.get_current_owner_id", return_value=owner_id),
+            patch("app.views.dropbox.settings") as mock_settings,
+        ):
+            mock_settings.dropbox_app_key = None
+            mock_settings.dropbox_app_secret = None
+            mock_settings.dropbox_refresh_token = None
+            mock_settings.dropbox_folder = None
+            response = client.get(f"/dropbox-setup?integration_id={integration.id}")
+
+        assert response.status_code == 200
+        # When no system credentials, hasSystemCredentials JS var should be false
+        assert b"hasSystemCredentials = false" in response.content

From d6c21b8026ccc8fb71ed12394faba08214e0793d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 13:43:08 +0000
Subject: [PATCH 6/8] docs: update setup guides and API docs for folder browser
 and system credentials

Updated DropboxSetup.md, OneDriveSetup.md, and GoogleDriveSetup.md to
document the new system credentials toggle and folder browser features.
Added API documentation for POST /api/dropbox/list-folders and
POST /api/onedrive/list-folders endpoints.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 docs/API.md              | 49 ++++++++++++++++++++++++++++++++++++++++
 docs/DropboxSetup.md     |  5 ++--
 docs/GoogleDriveSetup.md |  2 +-
 docs/OneDriveSetup.md    |  5 ++--
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/docs/API.md b/docs/API.md
index d5a0bf40..3ef97529 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -1381,6 +1381,55 @@ Get the current user's integration quota usage.
 }
 ```
 
+## Cloud Provider Folder Browser
+
+Browse folders in connected cloud storage providers. These endpoints are used by the OAuth callback pages to let users select a target folder after authorization.
+
+### POST /api/dropbox/list-folders
+
+List folders in a Dropbox account. Requires a short-lived OAuth access token obtained during the authorization flow.
+
+**Request (form-data):**
+
+| Field          | Type   | Required | Description                          |
+|----------------|--------|----------|--------------------------------------|
+| `access_token` | string | Yes      | Dropbox OAuth access token           |
+| `path`         | string | No       | Folder path to list (default: root)  |
+
+**Response (200):**
+```json
+{
+  "folders": [
+    { "name": "Documents", "path": "/Documents", "id": "id:abc123" },
+    { "name": "Photos", "path": "/Photos", "id": "id:def456" }
+  ],
+  "path": "/",
+  "has_more": false
+}
+```
+
+### POST /api/onedrive/list-folders
+
+List folders in a OneDrive account. Requires a short-lived OAuth access token obtained during the authorization flow.
+
+**Request (form-data):**
+
+| Field          | Type   | Required | Description                          |
+|----------------|--------|----------|--------------------------------------|
+| `access_token` | string | Yes      | Microsoft Graph access token         |
+| `path`         | string | No       | Folder path to list (default: root)  |
+
+**Response (200):**
+```json
+{
+  "folders": [
+    { "name": "Documents", "path": "/Documents", "id": "abc123", "child_count": 5 },
+    { "name": "Pictures", "path": "/Pictures", "id": "def456", "child_count": 12 }
+  ],
+  "path": "/"
+}
+```
+
 ## Webhooks
 
 Manage webhook configurations for notifying external systems when document events occur. All webhook endpoints require admin access.
diff --git a/docs/DropboxSetup.md b/docs/DropboxSetup.md
index 8923a595..c1486c60 100644
--- a/docs/DropboxSetup.md
+++ b/docs/DropboxSetup.md
@@ -28,9 +28,10 @@ End users authorize their own Dropbox integration from the **Integrations** dash
 1. Navigate to `/integrations` and click **+ Add Destination** (or **+ Add Source** for Watch Folder).
 2. Create a Dropbox destination integration (or a Watch Folder with `source_type = dropbox`).
 3. Click the **Authorize** button next to the integration — it links directly to the OAuth wizard pre-loaded with your integration's configuration.
-4. Enter your Dropbox App Key and App Secret in the wizard (or use the global admin credentials if pre-configured).
+4. If the administrator has configured system-wide Dropbox app credentials (`DROPBOX_APP_KEY` / `DROPBOX_APP_SECRET`), the wizard defaults to using them — no need to register your own Dropbox app. Uncheck the toggle to use custom credentials if needed.
 5. Click **Start Authentication Flow**, authorize access in Dropbox, and the refresh token is automatically saved to your personal integration record.
-6. The page redirects back to `/integrations` on success. Re-authorization is available at any time via the **Re-Authorize** button.
+6. After authorization, an interactive **folder browser** lets you select the target folder directly from your Dropbox — no need to manually type folder paths.
+7. The page redirects to `/integrations` on success. Re-authorization is available at any time via the **Re-Authorize** button.
 
 > **Note:** Your credentials are stored encrypted per-integration and are never mixed with other users' data. Each user can have multiple Dropbox integrations with independent tokens.
 
diff --git a/docs/GoogleDriveSetup.md b/docs/GoogleDriveSetup.md
index e85addcc..bd0d59d5 100644
--- a/docs/GoogleDriveSetup.md
+++ b/docs/GoogleDriveSetup.md
@@ -30,7 +30,7 @@ End users can authorize their own Google Drive integration directly from the **I
 1. Navigate to `/integrations` and click **+ Add Destination** (or **+ Add Source** for Watch Folder).
 2. Create a Google Drive destination integration (or a Watch Folder with `source_type = google_drive`).
 3. Click the **Authorize** button — it opens the OAuth wizard pre-loaded with your integration's configuration.
-4. Enter your Google OAuth Client ID and Client Secret in the wizard.
+4. If the administrator has configured system-wide Google Drive app credentials (`GOOGLE_DRIVE_CLIENT_ID` / `GOOGLE_DRIVE_CLIENT_SECRET`), the wizard defaults to using them — no need to register your own Google Cloud app. Uncheck the toggle to use custom credentials if needed.
 5. Click **Start Authentication Flow** and authorize access in Google.
 6. Credentials are saved automatically to your personal integration record; the page redirects back to `/integrations`.
 7. Re-authorization is available at any time via the **Re-Authorize** button.
diff --git a/docs/OneDriveSetup.md b/docs/OneDriveSetup.md
index e9a555f4..ba2fc873 100644
--- a/docs/OneDriveSetup.md
+++ b/docs/OneDriveSetup.md
@@ -29,9 +29,10 @@ End users authorize their own OneDrive integration from the **Integrations** das
 1. Navigate to `/integrations` and click **+ Add Destination** (or **+ Add Source** for Watch Folder).
 2. Create a OneDrive destination integration (or a Watch Folder with `source_type = onedrive`).
 3. Click the **Authorize** button next to the integration — it links directly to the OAuth wizard pre-loaded with your integration's configuration.
-4. Enter your Azure AD Client ID and Client Secret in the wizard.
+4. If the administrator has configured system-wide OneDrive app credentials (`ONEDRIVE_CLIENT_ID` / `ONEDRIVE_CLIENT_SECRET`), the wizard defaults to using them — no need to register your own Azure AD app. Uncheck the toggle to use custom credentials if needed.
 5. Click **Start Authentication Flow**, authorize access via Microsoft, and the refresh token is automatically saved to your personal integration record.
-6. The page redirects back to `/integrations` on success. Re-authorization is available at any time via the **Re-Authorize** button.
+6. After authorization, an interactive **folder browser** lets you select the target folder directly from your OneDrive — no need to manually type folder paths.
+7. The page redirects to `/integrations` on success. Re-authorization is available at any time via the **Re-Authorize** button.
 
 > **Note:** Your credentials are stored encrypted per-integration and are never mixed with other users' data. Each user can have multiple OneDrive integrations with independent tokens.
 

From b3a238744d1618b7f891b7c43f243dd9099ecf49 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Mar 2026 13:46:08 +0000
Subject: [PATCH 7/8] fix(security): escape HTML in folder browser to prevent
 XSS from folder names

Added escapeHtml() utility function to both Dropbox and OneDrive
callback pages. Folder names, paths, and error messages inserted into
innerHTML via template literals are now escaped to prevent potential
cross-site scripting from malicious folder names.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 frontend/templates/dropbox_callback.html  | 14 ++++++++++----
 frontend/templates/onedrive_callback.html | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/templates/dropbox_callback.html b/frontend/templates/dropbox_callback.html
index e59c6e40..5b07f0b8 100644
--- a/frontend/templates/dropbox_callback.html
+++ b/frontend/templates/dropbox_callback.html
@@ -318,6 +318,12 @@ DROPBOX_FOLDER=${folderPath || '/Documents/Uploads'}`;
   }
 
   // ── Folder browser ────────────────────────────────────────────────
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
   function initFolderBrowser(accessToken, integrationId) {
     const folderSelector = document.getElementById('folder-selector');
     if (!folderSelector || !integrationId) return;
@@ -344,9 +350,9 @@ DROPBOX_FOLDER=${folderPath || '/Documents/Uploads'}`;
         .then(data => {
           if (data.folders && data.folders.length > 0) {
             folderList.innerHTML = data.folders.map(f =>
-              `<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${f.path}" aria-label="Open folder ${f.name}">` +
+              `<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${escapeHtml(f.path)}" aria-label="Open folder ${escapeHtml(f.name)}">` +
               `<svg class="h-5 w-5 text-yellow-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg>` +
-              `<span class="font-medium text-gray-700">${f.name}</span>` +
+              `<span class="font-medium text-gray-700">${escapeHtml(f.name)}</span>` +
               `</button>`
             ).join('');
 
@@ -363,7 +369,7 @@ DROPBOX_FOLDER=${folderPath || '/Documents/Uploads'}`;
           updateBreadcrumb(path);
         })
         .catch(err => {
-          folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${err.message}</div>`;
+          folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${escapeHtml(err.message)}</div>`;
         });
     }
 
@@ -374,7 +380,7 @@ DROPBOX_FOLDER=${folderPath || '/Documents/Uploads'}`;
       for (const part of parts) {
         accumulated += '/' + part;
         html += `<span class="mx-1 text-gray-400">/</span>`;
-        html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${accumulated}" aria-label="Navigate to ${part}">${part}</button>`;
+        html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${escapeHtml(accumulated)}" aria-label="Navigate to ${escapeHtml(part)}">${escapeHtml(part)}</button>`;
       }
       breadcrumb.innerHTML = html;
       breadcrumb.querySelectorAll('.folder-nav-btn').forEach(btn => {
diff --git a/frontend/templates/onedrive_callback.html b/frontend/templates/onedrive_callback.html
index 306f0ec4..72b98cd7 100644
--- a/frontend/templates/onedrive_callback.html
+++ b/frontend/templates/onedrive_callback.html
@@ -330,6 +330,12 @@ ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
   }
 
   // ── Folder browser ────────────────────────────────────────────────
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
   function initFolderBrowser(accessToken, integrationId) {
     const folderSelector = document.getElementById('folder-selector');
     if (!folderSelector || !integrationId || !accessToken) return;
@@ -354,9 +360,9 @@ ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
         .then(data => {
           if (data.folders && data.folders.length > 0) {
             folderList.innerHTML = data.folders.map(f =>
-              `<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${f.path}" aria-label="Open folder ${f.name}">` +
+              `<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${escapeHtml(f.path)}" aria-label="Open folder ${escapeHtml(f.name)}">` +
               `<svg class="h-5 w-5 text-blue-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg>` +
-              `<span class="font-medium text-gray-700">${f.name}</span>` +
+              `<span class="font-medium text-gray-700">${escapeHtml(f.name)}</span>` +
               `</button>`
             ).join('');
 
@@ -373,7 +379,7 @@ ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
           updateBreadcrumb(path);
         })
         .catch(err => {
-          folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${err.message}</div>`;
+          folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${escapeHtml(err.message)}</div>`;
         });
     }
 
@@ -384,7 +390,7 @@ ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
       for (const part of parts) {
         accumulated += '/' + part;
         html += `<span class="mx-1 text-gray-400">/</span>`;
-        html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${accumulated.replace(/^\//, '')}" aria-label="Navigate to ${part}">${part}</button>`;
+        html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${escapeHtml(accumulated.replace(/^\//, ''))}" aria-label="Navigate to ${escapeHtml(part)}">${escapeHtml(part)}</button>`;
       }
       breadcrumb.innerHTML = html;
       breadcrumb.querySelectorAll('.folder-nav-btn').forEach(btn => {

From 65cf33ce89cfcb7f81f31278a2cf6523c32a4754 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 20 Mar 2026 23:35:43 +0000
Subject: [PATCH 8/8] style: apply ruff auto-fix

- Auto-formatted code with ruff format
- Applied ruff linting fixes with --fix

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 tests/test_api_dropbox.py   | 1 -
 tests/test_views_dropbox.py | 1 -
 2 files changed, 2 deletions(-)

diff --git a/tests/test_api_dropbox.py b/tests/test_api_dropbox.py
index 9168216c..71139d7b 100644
--- a/tests/test_api_dropbox.py
+++ b/tests/test_api_dropbox.py
@@ -666,4 +666,3 @@ class TestGlobalAuthorizeUrl:
         authorize_url = response.json()["authorize_url"]
         # The redirect_uri must be URL-encoded and contain the public base URL
         assert "https%3A%2F%2Fprod.example.com%2Fdropbox-callback" in authorize_url
-
diff --git a/tests/test_views_dropbox.py b/tests/test_views_dropbox.py
index 6d0bd7a6..79dad26c 100644
--- a/tests/test_views_dropbox.py
+++ b/tests/test_views_dropbox.py
@@ -178,4 +178,3 @@ class TestDropboxCallbackUrl:
         # The configured public_base_url hostname must appear in the page (redirect URI display)
         page_text = response.text
         assert "configured.example.com/dropbox-callback" in page_text
-