npm - @intranefr/superbackend - Versions diffs - 1.5.0 → 1.5.2 - Mend

@intranefr/superbackend 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/.env.example +15 -0
package/README.md +11 -0
package/analysis-only.skill +0 -0
package/index.js +23 -0
package/package.json +8 -2
package/src/admin/endpointRegistry.js +120 -0
package/src/controllers/admin.controller.js +90 -6
package/src/controllers/adminBlockDefinitions.controller.js +127 -0
package/src/controllers/adminBlockDefinitionsAi.controller.js +54 -0
package/src/controllers/adminCache.controller.js +342 -0
package/src/controllers/adminContextBlockDefinitions.controller.js +141 -0
package/src/controllers/adminCrons.controller.js +388 -0
package/src/controllers/adminDbBrowser.controller.js +124 -0
package/src/controllers/adminEjsVirtual.controller.js +13 -3
package/src/controllers/adminExperiments.controller.js +200 -0
package/src/controllers/adminHeadless.controller.js +9 -2
package/src/controllers/adminHealthChecks.controller.js +570 -0
package/src/controllers/adminI18n.controller.js +51 -29
package/src/controllers/adminLlm.controller.js +126 -2
package/src/controllers/adminPages.controller.js +720 -0
package/src/controllers/adminPagesContextBlocksAi.controller.js +54 -0
package/src/controllers/adminProxy.controller.js +113 -0
package/src/controllers/adminRateLimits.controller.js +138 -0
package/src/controllers/adminRbac.controller.js +803 -0
package/src/controllers/adminScripts.controller.js +126 -4
package/src/controllers/adminSeoConfig.controller.js +71 -48
package/src/controllers/blogAdmin.controller.js +279 -0
package/src/controllers/blogAiAdmin.controller.js +224 -0
package/src/controllers/blogAutomationAdmin.controller.js +141 -0
package/src/controllers/blogInternal.controller.js +26 -0
package/src/controllers/blogPublic.controller.js +89 -0
package/src/controllers/experiments.controller.js +85 -0
package/src/controllers/fileManager.controller.js +190 -0
package/src/controllers/fileManagerStoragePolicy.controller.js +23 -0
package/src/controllers/healthChecksPublic.controller.js +196 -0
package/src/controllers/internalExperiments.controller.js +17 -0
package/src/controllers/metrics.controller.js +64 -4
package/src/controllers/orgAdmin.controller.js +80 -0
package/src/helpers/mongooseHelper.js +258 -0
package/src/helpers/scriptBase.js +230 -0
package/src/helpers/scriptRunner.js +335 -0
package/src/middleware/rbac.js +62 -0
package/src/middleware.js +810 -48
package/src/models/BlockDefinition.js +27 -0
package/src/models/BlogAutomationLock.js +14 -0
package/src/models/BlogAutomationRun.js +39 -0
package/src/models/BlogPost.js +42 -0
package/src/models/CacheEntry.js +26 -0
package/src/models/ConsoleEntry.js +32 -0
package/src/models/ConsoleLog.js +23 -0
package/src/models/ContextBlockDefinition.js +33 -0
package/src/models/CronExecution.js +47 -0
package/src/models/CronJob.js +70 -0
package/src/models/Experiment.js +75 -0
package/src/models/ExperimentAssignment.js +23 -0
package/src/models/ExperimentEvent.js +26 -0
package/src/models/ExperimentMetricBucket.js +30 -0
package/src/models/ExternalDbConnection.js +49 -0
package/src/models/FileEntry.js +22 -0
package/src/models/GlobalSetting.js +1 -2
package/src/models/HealthAutoHealAttempt.js +57 -0
package/src/models/HealthCheck.js +132 -0
package/src/models/HealthCheckRun.js +51 -0
package/src/models/HealthIncident.js +49 -0
package/src/models/Page.js +95 -0
package/src/models/PageCollection.js +42 -0
package/src/models/ProxyEntry.js +66 -0
package/src/models/RateLimitCounter.js +19 -0
package/src/models/RateLimitMetricBucket.js +20 -0
package/src/models/RbacGrant.js +25 -0
package/src/models/RbacGroup.js +16 -0
package/src/models/RbacGroupMember.js +13 -0
package/src/models/RbacGroupRole.js +13 -0
package/src/models/RbacRole.js +25 -0
package/src/models/RbacUserRole.js +13 -0
package/src/models/ScriptDefinition.js +1 -0
package/src/models/Webhook.js +2 -0
package/src/routes/admin.routes.js +2 -0
package/src/routes/adminBlog.routes.js +21 -0
package/src/routes/adminBlogAi.routes.js +16 -0
package/src/routes/adminBlogAutomation.routes.js +27 -0
package/src/routes/adminCache.routes.js +20 -0
package/src/routes/adminConsoleManager.routes.js +302 -0
package/src/routes/adminCrons.routes.js +25 -0
package/src/routes/adminDbBrowser.routes.js +65 -0
package/src/routes/adminEjsVirtual.routes.js +2 -1
package/src/routes/adminExperiments.routes.js +29 -0
package/src/routes/adminHeadless.routes.js +2 -1
package/src/routes/adminHealthChecks.routes.js +28 -0
package/src/routes/adminI18n.routes.js +4 -3
package/src/routes/adminLlm.routes.js +4 -2
package/src/routes/adminPages.routes.js +55 -0
package/src/routes/adminProxy.routes.js +15 -0
package/src/routes/adminRateLimits.routes.js +17 -0
package/src/routes/adminRbac.routes.js +38 -0
package/src/routes/adminSeoConfig.routes.js +5 -4
package/src/routes/adminUiComponents.routes.js +2 -1
package/src/routes/blogInternal.routes.js +14 -0
package/src/routes/blogPublic.routes.js +9 -0
package/src/routes/experiments.routes.js +30 -0
package/src/routes/fileManager.routes.js +62 -0
package/src/routes/fileManagerStoragePolicy.routes.js +9 -0
package/src/routes/healthChecksPublic.routes.js +9 -0
package/src/routes/internalExperiments.routes.js +15 -0
package/src/routes/log.routes.js +43 -60
package/src/routes/metrics.routes.js +4 -2
package/src/routes/orgAdmin.routes.js +1 -0
package/src/routes/pages.routes.js +123 -0
package/src/routes/proxy.routes.js +46 -0
package/src/routes/rbac.routes.js +47 -0
package/src/routes/webhook.routes.js +2 -1
package/src/routes/workflows.routes.js +4 -0
package/src/services/blockDefinitionsAi.service.js +247 -0
package/src/services/blog.service.js +99 -0
package/src/services/blogAutomation.service.js +978 -0
package/src/services/blogCronsBootstrap.service.js +185 -0
package/src/services/blogPublishing.service.js +58 -0
package/src/services/cacheLayer.service.js +696 -0
package/src/services/consoleManager.service.js +738 -0
package/src/services/consoleOverride.service.js +7 -1
package/src/services/cronScheduler.service.js +350 -0
package/src/services/dbBrowser.service.js +536 -0
package/src/services/ejsVirtual.service.js +102 -32
package/src/services/experiments.service.js +273 -0
package/src/services/experimentsAggregation.service.js +308 -0
package/src/services/experimentsCronsBootstrap.service.js +118 -0
package/src/services/experimentsRetention.service.js +43 -0
package/src/services/experimentsWs.service.js +134 -0
package/src/services/fileManager.service.js +475 -0
package/src/services/fileManagerStoragePolicy.service.js +285 -0
package/src/services/globalSettings.service.js +15 -0
package/src/services/healthChecks.service.js +650 -0
package/src/services/healthChecksBootstrap.service.js +109 -0
package/src/services/healthChecksScheduler.service.js +106 -0
package/src/services/jsonConfigs.service.js +2 -2
package/src/services/llmDefaults.service.js +190 -0
package/src/services/migrationAssets/s3.js +2 -2
package/src/services/pages.service.js +602 -0
package/src/services/pagesContext.service.js +331 -0
package/src/services/pagesContextBlocksAi.service.js +349 -0
package/src/services/proxy.service.js +535 -0
package/src/services/rateLimiter.service.js +623 -0
package/src/services/rbac.service.js +212 -0
package/src/services/scriptsRunner.service.js +215 -15
package/src/services/uiComponentsAi.service.js +6 -19
package/src/services/workflow.service.js +23 -8
package/src/utils/orgRoles.js +14 -0
package/src/utils/rbac/engine.js +60 -0
package/src/utils/rbac/rightsRegistry.js +33 -0
package/views/admin-blog-automation.ejs +877 -0
package/views/admin-blog-edit.ejs +542 -0
package/views/admin-blog.ejs +399 -0
package/views/admin-cache.ejs +681 -0
package/views/admin-console-manager.ejs +680 -0
package/views/admin-crons.ejs +645 -0
package/views/admin-dashboard.ejs +28 -8
package/views/admin-db-browser.ejs +445 -0
package/views/admin-ejs-virtual.ejs +16 -10
package/views/admin-experiments.ejs +91 -0
package/views/admin-file-manager.ejs +942 -0
package/views/admin-health-checks.ejs +725 -0
package/views/admin-i18n.ejs +59 -5
package/views/admin-llm.ejs +99 -1
package/views/admin-organizations.ejs +163 -1
package/views/admin-pages.ejs +2424 -0
package/views/admin-proxy.ejs +491 -0
package/views/admin-rate-limiter.ejs +625 -0
package/views/admin-rbac.ejs +1331 -0
package/views/admin-scripts.ejs +597 -3
package/views/admin-seo-config.ejs +61 -7
package/views/admin-ui-components.ejs +57 -25
package/views/admin-workflows.ejs +7 -7
package/views/file-manager.ejs +866 -0
package/views/pages/blocks/contact.ejs +27 -0
package/views/pages/blocks/cta.ejs +18 -0
package/views/pages/blocks/faq.ejs +20 -0
package/views/pages/blocks/features.ejs +19 -0
package/views/pages/blocks/hero.ejs +13 -0
package/views/pages/blocks/html.ejs +5 -0
package/views/pages/blocks/image.ejs +14 -0
package/views/pages/blocks/testimonials.ejs +26 -0
package/views/pages/blocks/text.ejs +10 -0
package/views/pages/layouts/default.ejs +51 -0
package/views/pages/layouts/minimal.ejs +42 -0
package/views/pages/layouts/sidebar.ejs +54 -0
package/views/pages/partials/footer.ejs +13 -0
package/views/pages/partials/header.ejs +12 -0
package/views/pages/partials/sidebar.ejs +8 -0
package/views/pages/runtime/page.ejs +10 -0
package/views/pages/templates/article.ejs +20 -0
package/views/pages/templates/default.ejs +12 -0
package/views/pages/templates/landing.ejs +14 -0
package/views/pages/templates/listing.ejs +15 -0
package/views/partials/admin-image-upload-modal.ejs +221 -0
package/views/partials/dashboard/nav-items.ejs +12 -0
package/views/partials/dashboard/palette.ejs +5 -3
package/views/partials/llm-provider-model-picker.ejs +183 -0
package/src/routes/llmUi.routes.js +0 -26

package/views/file-manager.ejs ADDED Viewed

@@ -0,0 +1,866 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>File Manager</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+<body class="bg-gray-50">
+  <div id="app" class="min-h-screen flex flex-col">
+    <!-- Top bar -->
+    <header class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <div class="text-blue-600 text-xl font-medium">File Manager</div>
+      </div>
+      <div class="flex-1 max-w-2xl mx-8">
+        <div class="relative">
+          <input class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 bg-gray-50 hover:bg-white focus:bg-white focus:border-blue-500 focus:outline-none transition-colors" v-model.trim="search" placeholder="Search files" />
+          <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button v-if="token" class="text-gray-600 hover:text-gray-900 px-3 py-1 rounded-md hover:bg-gray-100 transition-colors text-sm" @click="logout">Logout</button>
+      </div>
+    </header>
+    <div class="flex-1 flex">
+      <div v-if="route === 'login'" class="flex-1 flex items-center justify-center p-8">
+        <div class="w-full max-w-md bg-white rounded-lg border border-gray-200 p-8">
+          <h2 class="text-2xl font-medium text-gray-900 mb-6">Sign in to File Manager</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+              <input class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" v-model.trim="loginEmail" type="email" autocomplete="email" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+              <input class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" v-model="loginPassword" type="password" autocomplete="current-password" />
+            </div>
+          </div>
+          <div class="mt-6">
+            <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors font-medium" :disabled="busy" @click="doLogin">Sign in</button>
+          </div>
+          <div v-if="error" class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+            {{ error }}
+          </div>
+        </div>
+      </div>
+      <div v-else-if="route === 'browse'" class="flex-1 flex">
+        <!-- Left sidebar -->
+        <aside class="w-64 bg-white border-r border-gray-200 p-4">
+          <!-- New button -->
+          <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium mb-6 flex items-center justify-center gap-2" :disabled="busy || !orgId || !selectedDriveKey" @click="fileInputRef?.click()">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+            Upload files
+          </button>
+          <!-- Navigation -->
+          <nav class="space-y-1">
+            <div class="px-3 py-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Navigation</div>
+            <a href="#" @click.prevent="goRoot" class="flex items-center gap-3 px-3 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
+              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+              My Drive
+            </a>
+          </nav>
+          <!-- Organization selector -->
+          <div class="mt-8">
+            <div class="px-3 py-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Workspace</div>
+            <select class="w-full mt-2 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm" v-model="orgId">
+              <option disabled value="">Select organization</option>
+              <option v-for="o in orgs" :key="o._id" :value="o._id">{{ o.name }}</option>
+            </select>
+          </div>
+          <!-- Drive selector -->
+          <div class="mt-4">
+            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm" v-model="selectedDriveKey" :disabled="!orgId">
+              <option disabled value="">Select drive</option>
+              <option v-for="d in drives" :key="d.key" :value="d.key">{{ d.label }}</option>
+            </select>
+          </div>
+          <!-- Folder navigation -->
+          <div class="mt-6">
+            <div class="px-3 py-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Folder</div>
+            <div class="flex gap-1 mt-2">
+              <button class="flex-1 px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" :disabled="busy || !orgId || !selectedDriveKey" @click="goRoot">Root</button>
+              <button class="flex-1 px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" :disabled="busy || !orgId || !selectedDriveKey" @click="goUp">Up</button>
+            </div>
+            <input class="w-full mt-2 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm font-mono" v-model.trim="folderPath" placeholder="/" />
+          </div>
+          <!-- Storage indicator -->
+          <div class="mt-auto pt-8">
+            <div class="px-3 py-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Storage</div>
+            <div class="mt-2 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-600">
+              <div v-if="storagePolicy" class="space-y-1">
+                <div class="flex items-center justify-between">
+                  <span class="text-gray-500">Used</span>
+                  <span class="font-medium text-gray-800">{{ formatBytes(storagePolicy.usage.usedBytes) }}</span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-gray-500">Max</span>
+                  <span class="font-medium text-gray-800">{{ formatBytes(storagePolicy.effective.maxStorageBytes) }}</span>
+                </div>
+                <div v-if="storagePolicy.usage.overageBytes > 0" class="text-xs text-red-700">
+                  Over by {{ formatBytes(storagePolicy.usage.overageBytes) }}
+                </div>
+              </div>
+              <div v-else class="text-gray-500">Select org + drive</div>
+            </div>
+          </div>
+          <div v-if="error" class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+            {{ error }}
+          </div>
+        </aside>
+        <!-- Main content -->
+        <main class="flex-1 bg-gray-50">
+          <div class="p-6">
+            <!-- Breadcrumb -->
+            <div class="mb-4">
+              <div class="flex items-center gap-2 text-sm text-gray-600 flex-wrap">
+                <a @click.prevent="goRoot" href="#" class="hover:text-gray-900 transition-colors">My Drive</a>
+                <template v-for="c in breadcrumbCrumbs" :key="c.path">
+                  <span class="text-gray-400">/</span>
+                  <a v-if="!c.isCurrent" @click.prevent="goToPath(c.path)" href="#" class="hover:text-gray-900 transition-colors">{{ c.label }}</a>
+                  <span v-else class="text-gray-900 font-medium">{{ c.label }}</span>
+                </template>
+              </div>
+            </div>
+            <!-- Quick filters -->
+            <div class="mb-6 flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <button class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-full hover:bg-gray-50 transition-colors">Type</button>
+                <button class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-full hover:bg-gray-50 transition-colors">Last modified</button>
+                <button class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-full hover:bg-gray-50 transition-colors">Name</button>
+              </div>
+              <div class="flex items-center gap-2">
+                <button class="px-3 py-1 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full transition-colors" :class="viewMode === 'list' ? 'bg-gray-100 text-gray-900' : ''" @click="viewMode='list'">List</button>
+                <button class="px-3 py-1 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full transition-colors" :class="viewMode === 'grid' ? 'bg-gray-100 text-gray-900' : ''" @click="viewMode='grid'">Grid</button>
+                <button class="px-3 py-1 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full transition-colors flex items-center gap-1" :disabled="busy || !orgId || !selectedDriveKey" @click="refreshFolder">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+                  Refresh
+                </button>
+              </div>
+            </div>
+            <!-- List view -->
+            <div v-if="viewMode === 'list'" class="bg-white rounded-lg border border-gray-200">
+              <div class="overflow-x-auto">
+                <table class="w-full">
+                  <thead class="bg-gray-50 border-b border-gray-200">
+                    <tr>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Visibility</th>
+                      <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody class="divide-y divide-gray-200">
+                    <tr v-for="d in filteredFolders" :key="d.path" class="hover:bg-gray-50 transition-colors cursor-pointer" @click="goToPath(d.path)">
+                      <td class="px-6 py-4">
+                        <div class="flex items-center gap-3">
+                          <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
+                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 012-2h5l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"></path></svg>
+                          </div>
+                          <div>
+                            <div class="text-sm font-medium text-gray-900">{{ d.name }}</div>
+                            <div class="text-xs text-gray-500">Folder</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="px-6 py-4 text-sm text-gray-600">-</td>
+                      <td class="px-6 py-4 text-sm text-gray-600">-</td>
+                      <td class="px-6 py-4"></td>
+                    </tr>
+                    <tr v-for="f in filteredFiles" :key="f.id" class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4">
+                        <div class="flex items-center gap-3">
+                          <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
+                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                          </div>
+                          <div>
+                            <div class="text-sm font-medium text-gray-900">{{ f.name }}</div>
+                            <div class="text-xs text-gray-500">{{ f.contentType || '' }}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="px-6 py-4 text-sm text-gray-600">{{ formatBytes(f.size) }}</td>
+                      <td class="px-6 py-4">
+                        <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full" :class="f.visibility === 'public' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'">{{ f.visibility }}</span>
+                      </td>
+                      <td class="px-6 py-4 text-right">
+                        <div class="flex items-center justify-end gap-1">
+                          <button class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" @click="downloadFile(f)" :disabled="busy" title="Download">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
+                          </button>
+                          <a v-if="f.publicUrl" class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" :href="f.publicUrl" target="_blank" title="Open public link">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                          </a>
+                          <button class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" @click="openEdit(f)" :disabled="busy" title="Rename">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                          </button>
+                          <button class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" @click="toggleShare(f)" :disabled="busy" :title="f.visibility === 'public' ? 'Make private' : 'Make public'">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
+                          </button>
+                          <button class="p-1 text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors" @click="removeFile(f)" :disabled="busy" title="Delete">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr v-if="filteredFiles.length === 0 && filteredFolders.length === 0">
+                      <td colspan="4" class="px-6 py-12 text-center text-sm text-gray-500">
+                        No files in this folder
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <!-- Grid view -->
+            <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              <button v-for="d in filteredFolders" :key="d.path" class="text-left bg-white border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors" @click="goToPath(d.path)">
+                <div class="flex items-center gap-3">
+                  <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
+                    <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 012-2h5l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"></path></svg>
+                  </div>
+                  <div>
+                    <div class="text-sm font-medium text-gray-900 truncate">{{ d.name }}</div>
+                    <div class="text-xs text-gray-500">Folder</div>
+                  </div>
+                </div>
+              </button>
+              <div v-for="f in filteredFiles" :key="f.id" class="bg-white border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
+                <div class="flex items-start gap-3">
+                  <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
+                    <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="text-sm font-medium text-gray-900 truncate">{{ f.name }}</div>
+                    <div class="text-xs text-gray-500 truncate">{{ f.contentType || '' }}</div>
+                    <div class="text-xs text-gray-500 mt-1">{{ formatBytes(f.size) }}</div>
+                  </div>
+                </div>
+                <div class="mt-3 flex items-center justify-between">
+                  <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full" :class="f.visibility === 'public' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'">{{ f.visibility }}</span>
+                  <div class="flex items-center gap-1">
+                    <button class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" @click="downloadFile(f)" :disabled="busy" title="Download">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
+                    </button>
+                    <a v-if="f.publicUrl" class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" :href="f.publicUrl" target="_blank" title="Open public link">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                    </a>
+                    <button class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors" @click="openEdit(f)" :disabled="busy" title="Rename">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                    </button>
+                    <button class="p-1 text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors" @click="removeFile(f)" :disabled="busy" title="Delete">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div v-if="filteredFiles.length === 0 && filteredFolders.length === 0" class="col-span-full text-center text-sm text-gray-500 py-12">
+                No files in this folder
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+      <div v-else class="flex-1 flex items-center justify-center">
+        <div class="text-gray-500">Loading...</div>
+      </div>
+    </div>
+    <!-- Hidden file input -->
+    <input type="file" class="hidden" ref="fileInputRef" @change="handleFileSelect" multiple />
+    <!-- Rename/Move modal -->
+    <div v-if="editOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="closeEdit">
+      <div class="bg-white rounded-lg border border-gray-200 p-6 w-full max-w-md">
+        <h3 class="text-lg font-medium text-gray-900 mb-4">Rename / Move</h3>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+            <input class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" v-model.trim="editName" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Folder path</label>
+            <input class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none font-mono" v-model.trim="editFolderPath" placeholder="/" />
+          </div>
+        </div>
+        <div v-if="editError" class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+          {{ editError }}
+        </div>
+        <div class="mt-6 flex gap-3 justify-end">
+          <button class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" @click="closeEdit" :disabled="busy">Cancel</button>
+          <button class="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors" @click="saveEdit" :disabled="busy">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    window.FILE_MANAGER_BASE_PATH = "<%= typeof fileManagerBasePath !== 'undefined' ? fileManagerBasePath : '/files' %>";
+    window.BASE_URL = "<%= (typeof baseUrl !== 'undefined' && baseUrl) ? baseUrl : '' %>";
+  </script>
+  <script>
+    const { createApp, ref, computed, onMounted, watch } = Vue;
+    createApp({
+      setup() {
+        const token = ref(localStorage.getItem('sb_fm_access_token') || '');
+        const busy = ref(false);
+        const error = ref('');
+        const route = ref('loading');
+        const loginEmail = ref('');
+        const loginPassword = ref('');
+        const orgs = ref([]);
+        const orgId = ref('');
+        const drives = ref([]);
+        const selectedDriveKey = ref('');
+        const folderPath = ref('/');
+        const files = ref([]);
+        const folders = ref([]);
+        const storagePolicy = ref(null);
+        const editOpen = ref(false);
+        const editFileId = ref('');
+        const editName = ref('');
+        const editFolderPath = ref('/');
+        const editError = ref('');
+        const apiBase = computed(() => window.location.origin + (window.BASE_URL || ''));
+        const selectedDrive = computed(() => {
+          const key = selectedDriveKey.value;
+          if (!key) return null;
+          const [driveType, driveId] = key.split(':');
+          return { driveType, driveId };
+        });
+        const selectedDriveLabel = computed(() => {
+          const key = selectedDriveKey.value;
+          if (!key) return '';
+          const match = (drives.value || []).find((d) => d.key === key);
+          return match?.label || '';
+        });
+        const authHeaders = () => ({
+          Authorization: `Bearer ${token.value}`,
+        });
+        const STORAGE_LAST_ORG_KEY = 'sb_fm_last_org_id';
+        const STORAGE_LAST_DRIVE_KEY = 'sb_fm_last_drive_key';
+        const search = ref('');
+        const viewMode = ref('list');
+        const filteredFiles = computed(() => {
+          const q = String(search.value || '').trim().toLowerCase();
+          if (!q) return files.value;
+          return (files.value || []).filter((f) => String(f?.name || '').toLowerCase().includes(q));
+        });
+        const filteredFolders = computed(() => {
+          const q = String(search.value || '').trim().toLowerCase();
+          if (!q) return folders.value;
+          return (folders.value || []).filter((d) => String(d?.name || '').toLowerCase().includes(q));
+        });
+        const breadcrumbCrumbs = computed(() => {
+          const path = normalizePath(folderPath.value || '/');
+          if (path === '/') return [{ label: 'Root', path: '/', isCurrent: true }];
+          const segs = path.split('/').filter(Boolean);
+          const crumbs = [{ label: 'Root', path: '/', isCurrent: false }];
+          let acc = '';
+          for (let i = 0; i < segs.length; i++) {
+            const s = segs[i];
+            acc = `${acc}/${s}`;
+            crumbs.push({ label: s, path: normalizePath(acc), isCurrent: i === segs.length - 1 });
+          }
+          return crumbs;
+        });
+        const formatBytes = (n) => {
+          const num = Number(n);
+          if (!Number.isFinite(num) || num < 0) return '-';
+          if (num === 0) return '0 B';
+          const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+          const exp = Math.min(units.length - 1, Math.floor(Math.log(num) / Math.log(1024)));
+          const val = num / Math.pow(1024, exp);
+          return `${val.toFixed(val >= 10 || exp === 0 ? 0 : 1)} ${units[exp]}`;
+        };
+        const normalizePath = (value) => {
+          const raw = String(value || '/').trim();
+          if (!raw || raw === '/') return '/';
+          let out = raw.startsWith('/') ? raw : `/${raw}`;
+          out = out.replace(/\/+?/g, '/');
+          if (out.length > 1 && out.endsWith('/')) out = out.slice(0, -1);
+          return out || '/';
+        };
+        const parentPathOf = (path) => {
+          const p = normalizePath(path);
+          if (p === '/') return '/';
+          const idx = p.lastIndexOf('/');
+          if (idx <= 0) return '/';
+          return p.slice(0, idx) || '/';
+        };
+        const doLogin = async () => {
+          error.value = '';
+          busy.value = true;
+          try {
+            const res = await fetch(`${apiBase.value}/api/auth/login`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ email: loginEmail.value, password: loginPassword.value }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.error || 'Login failed');
+            token.value = data.token;
+            localStorage.setItem('sb_fm_access_token', token.value);
+            await loadOrgs();
+            navigate('browse');
+          } catch (e) {
+            error.value = e.message || 'Login failed';
+          } finally {
+            busy.value = false;
+          }
+        };
+        const goRoot = async () => {
+          folderPath.value = '/';
+        };
+        const goUp = async () => {
+          folderPath.value = parentPathOf(folderPath.value);
+        };
+        const goToPath = async (path) => {
+          folderPath.value = normalizePath(path || '/');
+        };
+        const openEdit = (file) => {
+          editError.value = '';
+          editFileId.value = file?.id || '';
+          editName.value = file?.name || '';
+          editFolderPath.value = folderPath.value || '/';
+          editOpen.value = true;
+        };
+        const closeEdit = () => {
+          editOpen.value = false;
+          editFileId.value = '';
+          editName.value = '';
+          editFolderPath.value = '/';
+          editError.value = '';
+        };
+        const saveEdit = async () => {
+          editError.value = '';
+          if (!orgId.value || !selectedDrive.value || !editFileId.value) return;
+          busy.value = true;
+          try {
+            const res = await fetch(`${apiBase.value}/api/file-manager/files/${encodeURIComponent(editFileId.value)}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json', ...authHeaders() },
+              body: JSON.stringify({
+                orgId: orgId.value,
+                driveType: selectedDrive.value.driveType,
+                driveId: selectedDrive.value.driveId,
+                name: editName.value,
+                folderPath: editFolderPath.value || '/',
+              }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.error || 'Failed to update file');
+            closeEdit();
+            await refreshFolder();
+          } catch (e) {
+            editError.value = e.message || 'Failed to update file';
+          } finally {
+            busy.value = false;
+          }
+        };
+        const logout = () => {
+          token.value = '';
+          localStorage.removeItem('sb_fm_access_token');
+          orgs.value = [];
+          orgId.value = '';
+          drives.value = [];
+          selectedDriveKey.value = '';
+          files.value = [];
+          folderPath.value = '/';
+          navigate('login');
+        };
+        const parseHashRoute = () => {
+          const hash = String(window.location.hash || '');
+          const clean = hash.startsWith('#') ? hash.slice(1) : hash;
+          const path = clean.startsWith('/') ? clean : `/${clean}`;
+          if (path === '/login') return 'login';
+          if (path === '/browse' || path === '/' || path === '') return 'browse';
+          return 'browse';
+        };
+        const navigate = (name) => {
+          const target = name === 'login' ? '#/login' : '#/browse';
+          if (window.location.hash !== target) {
+            window.location.hash = target;
+          } else {
+            route.value = name;
+          }
+        };
+        const syncRoute = () => {
+          const desired = parseHashRoute();
+          if (!token.value && desired !== 'login') {
+            return navigate('login');
+          }
+          if (token.value && desired === 'login') {
+            return navigate('browse');
+          }
+          route.value = desired;
+        };
+        const loadOrgs = async () => {
+          error.value = '';
+          const res = await fetch(`${apiBase.value}/api/orgs`, {
+            headers: { ...authHeaders() },
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) throw new Error(data.error || 'Failed to load orgs');
+          orgs.value = data.orgs || [];
+          const lastOrg = String(localStorage.getItem(STORAGE_LAST_ORG_KEY) || '').trim();
+          if (!orgId.value && lastOrg && (orgs.value || []).some((o) => String(o?._id) === lastOrg)) {
+            orgId.value = lastOrg;
+          }
+        };
+        const loadDrives = async () => {
+          error.value = '';
+          drives.value = [];
+          selectedDriveKey.value = '';
+          files.value = [];
+          folders.value = [];
+          if (!orgId.value) return;
+          const res = await fetch(`${apiBase.value}/api/file-manager/drives?orgId=${encodeURIComponent(orgId.value)}`, {
+            headers: { ...authHeaders() },
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) throw new Error(data.error || 'Failed to load drives');
+          drives.value = (data.drives || []).map((d) => ({
+            ...d,
+            key: `${d.driveType}:${d.driveId}`,
+          }));
+          const lastDrive = String(localStorage.getItem(STORAGE_LAST_DRIVE_KEY) || '').trim();
+          if (lastDrive && (drives.value || []).some((d) => d.key === lastDrive)) {
+            selectedDriveKey.value = lastDrive;
+          }
+        };
+        const loadStoragePolicy = async () => {
+          storagePolicy.value = null;
+          if (!orgId.value || !selectedDrive.value) return;
+          const params = new URLSearchParams({
+            orgId: orgId.value,
+            driveType: selectedDrive.value.driveType,
+            driveId: selectedDrive.value.driveId,
+          });
+          const res = await fetch(`${apiBase.value}/api/file-manager/storage-policy?${params.toString()}`, {
+            headers: { ...authHeaders() },
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) throw new Error(data.error || 'Failed to load storage policy');
+          storagePolicy.value = data;
+        };
+        const refreshFolder = async () => {
+          error.value = '';
+          files.value = [];
+          folders.value = [];
+          if (!orgId.value || !selectedDrive.value) return;
+          const params = new URLSearchParams({
+            orgId: orgId.value,
+            driveType: selectedDrive.value.driveType,
+            driveId: selectedDrive.value.driveId,
+            folderPath: normalizePath(folderPath.value || '/'),
+          });
+          const res = await fetch(`${apiBase.value}/api/file-manager/folders?${params.toString()}`, {
+            headers: { ...authHeaders() },
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) throw new Error(data.error || 'Failed to list folder');
+          files.value = data.files || data.entries || [];
+          folders.value = data.folders || [];
+        };
+        const fileInputRef = ref(null);
+        const handleFileSelect = (event) => {
+          const files = event.target.files;
+          if (files && files.length > 0) {
+            upload(false);
+          }
+        };
+        const upload = async (overwrite) => {
+          error.value = '';
+          if (!orgId.value || !selectedDrive.value) return;
+          const input = fileInputRef.value;
+          const file = input?.files?.[0];
+          if (!file) {
+            error.value = 'Select a file first';
+            return;
+          }
+          busy.value = true;
+          try {
+            const params = new URLSearchParams({
+              orgId: orgId.value,
+              driveType: selectedDrive.value.driveType,
+              driveId: selectedDrive.value.driveId,
+              folderPath: normalizePath(folderPath.value || '/'),
+              overwrite: overwrite ? 'true' : 'false',
+            });
+            const form = new FormData();
+            form.append('file', file);
+            const res = await fetch(`${apiBase.value}/api/file-manager/files/upload?${params.toString()}`, {
+              method: 'POST',
+              headers: { ...authHeaders() },
+              body: form,
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.error || 'Upload failed');
+            await refreshFolder();
+            // Clear file input
+            if (input) input.value = '';
+          } catch (e) {
+            error.value = e.message || 'Upload failed';
+          } finally {
+            busy.value = false;
+          }
+        };
+        const downloadUrl = (file) => {
+          if (!orgId.value || !selectedDrive.value) return null;
+          const params = new URLSearchParams({
+            orgId: orgId.value,
+            driveType: selectedDrive.value.driveType,
+            driveId: selectedDrive.value.driveId,
+          });
+          return `${apiBase.value}/api/file-manager/files/${file.id}/download?${params.toString()}`;
+        };
+        const downloadFile = async (file) => {
+          error.value = '';
+          const url = downloadUrl(file);
+          if (!url) return;
+          busy.value = true;
+          try {
+            const res = await fetch(url, {
+              headers: { ...authHeaders() },
+            });
+            if (!res.ok) {
+              const data = await res.json().catch(() => ({}));
+              throw new Error(data.error || 'Download failed');
+            }
+            const blob = await res.blob();
+            const a = document.createElement('a');
+            const objectUrl = URL.createObjectURL(blob);
+            a.href = objectUrl;
+            a.download = file?.name || 'download';
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(objectUrl);
+          } catch (e) {
+            error.value = e.message || 'Download failed';
+          } finally {
+            busy.value = false;
+          }
+        };
+        const toggleShare = async (file) => {
+          error.value = '';
+          busy.value = true;
+          try {
+            const res = await fetch(`${apiBase.value}/api/file-manager/files/${file.id}/share`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', ...authHeaders() },
+              body: JSON.stringify({
+                orgId: orgId.value,
+                driveType: selectedDrive.value.driveType,
+                driveId: selectedDrive.value.driveId,
+                enabled: file.visibility !== 'public',
+              }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.error || 'Failed to update sharing');
+            await refreshFolder();
+          } catch (e) {
+            error.value = e.message || 'Failed to update sharing';
+          } finally {
+            busy.value = false;
+          }
+        };
+        const removeFile = async (file) => {
+          if (!confirm(`Delete '${file.name}'?`)) return;
+          error.value = '';
+          busy.value = true;
+          try {
+            const params = new URLSearchParams({
+              orgId: orgId.value,
+              driveType: selectedDrive.value.driveType,
+              driveId: selectedDrive.value.driveId,
+            });
+            const res = await fetch(`${apiBase.value}/api/file-manager/files/${file.id}?${params.toString()}`, {
+              method: 'DELETE',
+              headers: { ...authHeaders() },
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.error || 'Delete failed');
+            await refreshFolder();
+          } catch (e) {
+            error.value = e.message || 'Delete failed';
+          } finally {
+            busy.value = false;
+          }
+        };
+        onMounted(async () => {
+          syncRoute();
+          window.addEventListener('hashchange', syncRoute);
+          if (token.value) {
+            try {
+              await loadOrgs();
+            } catch (e) {
+              error.value = e.message || 'Failed to load orgs';
+            }
+          }
+        });
+        watch(orgId, async () => {
+          if (!token.value) return;
+          try {
+            folderPath.value = '/';
+            await loadDrives();
+            localStorage.setItem(STORAGE_LAST_ORG_KEY, String(orgId.value || ''));
+            await loadStoragePolicy();
+          } catch (e) {
+            error.value = e.message || 'Failed to load drives';
+          }
+        });
+        watch(selectedDriveKey, async () => {
+          if (!token.value) return;
+          try {
+            localStorage.setItem(STORAGE_LAST_DRIVE_KEY, String(selectedDriveKey.value || ''));
+            await refreshFolder();
+            await loadStoragePolicy();
+          } catch (e) {
+            error.value = e.message || 'Failed to list folder';
+          }
+        });
+        watch(folderPath, async () => {
+          if (!token.value) return;
+          if (route.value !== 'browse') return;
+          try {
+            await refreshFolder();
+          } catch (e) {
+            error.value = e.message || 'Failed to list folder';
+          }
+        });
+        return {
+          token,
+          busy,
+          error,
+          route,
+          search,
+          viewMode,
+          filteredFiles,
+          filteredFolders,
+          breadcrumbCrumbs,
+          formatBytes,
+          storagePolicy,
+          editOpen,
+          editName,
+          editFolderPath,
+          editError,
+          loginEmail,
+          loginPassword,
+          doLogin,
+          logout,
+          orgs,
+          orgId,
+          drives,
+          selectedDriveKey,
+          folderPath,
+          files,
+          folders,
+          fileInputRef,
+          handleFileSelect,
+          refreshFolder,
+          goRoot,
+          goUp,
+          goToPath,
+          upload,
+          downloadFile,
+          openEdit,
+          closeEdit,
+          saveEdit,
+          toggleShare,
+          removeFile,
+        };
+      },
+    }).mount('#app');
+  </script>
+</body>
+</html>