feat(uploads): resilient uploads — retry, background queue, space pre-check

Big uploads (ISOs, archives) are no longer lost to a hiccup:

- Space pre-check: before uploading, a file that won't fit in the owner's
  remaining quota is PAUSED (never attempted) with a clear "needs space"
  message, instead of streaming gigabytes only to be rejected.
- Auto-retry: an upload that fails online (network blip, 5xx) is handed to
  the persistent IndexedDB queue and retried in the background with
  exponential backoff capped at 5 min — so it keeps trying on its own.
- Freeze, don't cancel: a 413/507 (owner quota or server disk full) pauses
  the item rather than dropping it; the user frees space and retries.
- Manual control: a floating Transfers panel lists queued/paused uploads
  with per-item retry, "retry all", and remove.
- The open Drive view refreshes when a background upload finally lands.

Reuses the existing offline queue (extended with size/attempts/status/
backoff). Zero-Knowledge uploads stay inline (client-encrypted); this
covers normal and public spaces. Web-only.

Author: softpython2884

apps/web/src/app/(app)/drive/page.tsx

@@ -119,8 +119,8 @@ function passKey(spaceId: string) {
 }
 
 export default function EspacesPage() {
-  const { refresh } = useAuth();
-  const { online } = useOffline();
+  const { user, refresh } = useAuth();
+  const { online, enqueueForRetry } = useOffline();
   const { t } = useT();
   const [allFolders, setAllFolders] = useState<PublicFolder[]>([]);
   const [activeSpaceId, setActiveSpaceId] = useState<string | null>(null);
@@ -508,13 +508,45 @@ export default function EspacesPage() {
             await api.upload('/zk/files', form);
           }
         } else {
+          // Server-side upload with a space pre-check and a resilient fallback: a file that won't
+          // fit is PAUSED (never attempted) and one that fails mid-flight is handed to the
+          // background retry queue — so a big upload survives a hiccup instead of being lost.
+          const spaceName = activeSpace?.name ?? '';
+          let remaining = user?.quotaBytes != null ? user.quotaBytes - user.usedBytes : Infinity;
+          let uploaded = 0;
           for (let i = 0; i < arr.length; i += 1) {
+            const f = arr[i]!;
+            if (Number.isFinite(remaining) && f.size > remaining) {
+              await enqueueForRetry(f, currentFolderId, spaceName, {
+                blocked: true,
+                error: t('offline.errNoSpacePre', { need: formatBytes(f.size), free: formatBytes(Math.max(0, remaining)) }),
+              });
+              toast(t('drive.uploadPausedSpace', { name: f.name }), 'info');
+              continue;
+            }
             setBusy(t('drive.uploading', { i: i + 1, n: arr.length }));
             setProgress(0);
             const form = new FormData();
-            form.append('file', arr[i]!);
-            await api.uploadWithProgress(`/files?folderId=${currentFolderId}`, form, setProgress);
+            form.append('file', f);
+            try {
+              await api.uploadWithProgress(`/files?folderId=${currentFolderId}`, form, setProgress);
+              remaining -= f.size;
+              uploaded += 1;
+            } catch (err) {
+              const status = err instanceof ApiError ? err.status : 0;
+              const blocked = status === 413 || status === 507;
+              await enqueueForRetry(f, currentFolderId, spaceName, {
+                blocked,
+                error: err instanceof ApiError ? err.message : t('offline.errNetwork'),
+              });
+              toast(blocked ? t('drive.uploadPausedSpace', { name: f.name }) : t('drive.uploadQueuedRetry', { name: f.name }), 'info');
+            }
           }
+          await Promise.all([loadItems(currentFolderId, isZk, vaultKey), refresh()]);
+          if (uploaded > 0) {
+            toast(uploaded > 1 ? t('drive.filesImportedMany', { n: uploaded }) : t('drive.filesImportedOne', { n: uploaded }), 'success');
+          }
+          return;
         }
         await Promise.all([loadItems(currentFolderId, isZk, vaultKey), refresh()]);
         toast(arr.length > 1 ? t('drive.filesImportedMany', { n: arr.length }) : t('drive.filesImportedOne', { n: arr.length }), 'success');
@@ -526,7 +558,7 @@ export default function EspacesPage() {
         if (fileInput.current) fileInput.current.value = '';
       }
     },
-    [currentFolderId, isZk, vaultKey, loadItems, refresh, t],
+    [currentFolderId, isZk, vaultKey, loadItems, refresh, t, user, enqueueForRetry, activeSpace],
   );
 
   // Full-window drag & drop: a drop anywhere over the page uploads into the open folder.
@@ -692,6 +724,15 @@ export default function EspacesPage() {
     if (currentFolderId) await Promise.all([loadItems(currentFolderId, isZk, vaultKey), refresh()]);
   }
 
+  // Refresh the open folder when a background (retry) upload lands, so the file appears.
+  const reloadCurrentRef = useRef(reloadCurrent);
+  reloadCurrentRef.current = reloadCurrent;
+  useEffect(() => {
+    const h = () => void reloadCurrentRef.current();
+    window.addEventListener('ocl:queue-flushed', h);
+    return () => window.removeEventListener('ocl:queue-flushed', h);
+  }, []);
+
   // ── Selection ───────────────────────────────────────────────────────────────
   function toggleKey(key: string) {
     setSelected((prev) => {

apps/web/src/app/(app)/layout.tsx

@@ -11,6 +11,7 @@ import { LanguageSwitcher } from '@/components/LanguageSwitcher';
 import { StatusBanner } from '@/components/StatusBanner';
 import { OfflineBanner } from '@/components/OfflineBanner';
 import { DownloadIndicator } from '@/components/DownloadIndicator';
+import { TransfersPanel } from '@/components/TransfersPanel';
 import { WhatsNew } from '@/components/WhatsNew';
 import { formatBytes } from '@opencoperlock/shared/client';
 
@@ -174,6 +175,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
         <main className="mx-auto max-w-5xl px-4 py-6 sm:px-6 md:px-8 md:py-8">{children}</main>
       </div>
       <DownloadIndicator />
+      <TransfersPanel />
       <WhatsNew />
     </div>
   );

apps/web/src/components/TransfersPanel.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+/**
+ * Floating panel listing uploads that are being retried in the background or paused for lack of
+ * space. Lets the user retry a paused item (after freeing space), retry them all, or drop one.
+ * Hidden when the queue is empty.
+ */
+import { UploadCloud, RefreshCw, PauseCircle, X } from 'lucide-react';
+import { formatBytes } from '@opencoperlock/shared/client';
+import { useOffline } from '@/lib/offline';
+import { useT } from '@/lib/i18n';
+
+export function TransfersPanel() {
+  const { items, retryItem, retryAll, removeItem } = useOffline();
+  const { t } = useT();
+  if (items.length === 0) return null;
+  const blocked = items.filter((i) => i.status === 'blocked').length;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[110] w-80 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-white/10 bg-[#15151d] shadow-2xl">
+      <div className="flex items-center justify-between gap-2 border-b border-white/[0.07] px-3 py-2">
+        <span className="flex items-center gap-2 text-sm font-medium text-zinc-200">
+          <UploadCloud size={15} className="text-violet-300" /> {t('transfers.title', { n: items.length })}
+        </span>
+        {blocked > 0 && (
+          <button className="text-xs text-violet-300 transition hover:text-violet-200" onClick={() => void retryAll()}>
+            {t('transfers.retryAll')}
+          </button>
+        )}
+      </div>
+      <div className="max-h-64 space-y-0.5 overflow-y-auto p-1.5">
+        {items.map((it) => (
+          <div key={it.id} className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-white/[0.03]">
+            <span className={`shrink-0 ${it.status === 'blocked' ? 'text-amber-300' : 'text-zinc-400'}`}>
+              {it.status === 'blocked' ? <PauseCircle size={15} /> : <RefreshCw size={15} className="animate-spin" />}
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-xs text-zinc-100">{it.name}</p>
+              <p className="truncate text-[11px] text-zinc-500">
+                {formatBytes(it.size)} ·{' '}
+                {it.status === 'blocked' ? it.lastError ?? t('transfers.paused') : t('transfers.retrying')}
+              </p>
+            </div>
+            {it.status === 'blocked' && it.id != null && (
+              <button
+                className="shrink-0 rounded p-1 text-zinc-400 transition hover:text-violet-300"
+                title={t('transfers.retry')}
+                onClick={() => void retryItem(it.id!)}
+              >
+                <RefreshCw size={14} />
+              </button>
+            )}
+            {it.id != null && (
+              <button
+                className="shrink-0 rounded p-1 text-zinc-400 transition hover:text-red-300"
+                title={t('transfers.remove')}
+                onClick={() => void removeItem(it.id!)}
+              >
+                <X size={14} />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/src/lib/i18n.tsx

@@ -57,6 +57,16 @@ const fr: Dict = {
   'offline.remove': 'Retirer',
   'offline.willSync': 'Ces fichiers seront envoyés et effacés de cet appareil dès le retour du réseau.',
   'offline.synced': '{n} fichier(s) synchronisé(s)',
+  'offline.errNetwork': 'Échec réseau',
+  'offline.errNoSpacePre': 'Espace insuffisant ({need} requis, {free} libre)',
+  'transfers.title': 'Transferts ({n})',
+  'transfers.retryAll': 'Tout réessayer',
+  'transfers.retry': 'Réessayer',
+  'transfers.remove': 'Retirer',
+  'transfers.paused': 'En pause',
+  'transfers.retrying': 'Nouvelle tentative…',
+  'drive.uploadPausedSpace': '« {name} » en pause : espace insuffisant',
+  'drive.uploadQueuedRetry': '« {name} » : échec, nouvelle tentative en arrière-plan',
   'download.started': 'Téléchargement…',
   // file viewer / editor
   'viewer.preview': 'Aperçu',
@@ -684,6 +694,16 @@ const en: Dict = {
   'offline.remove': 'Remove',
   'offline.willSync': 'These files will be uploaded and removed from this device as soon as the network returns.',
   'offline.synced': '{n} file(s) synced',
+  'offline.errNetwork': 'Network failure',
+  'offline.errNoSpacePre': 'Not enough space ({need} needed, {free} free)',
+  'transfers.title': 'Transfers ({n})',
+  'transfers.retryAll': 'Retry all',
+  'transfers.retry': 'Retry',
+  'transfers.remove': 'Remove',
+  'transfers.paused': 'Paused',
+  'transfers.retrying': 'Retrying…',
+  'drive.uploadPausedSpace': '“{name}” paused: not enough space',
+  'drive.uploadQueuedRetry': '“{name}”: failed, retrying in the background',
   'download.started': 'Downloading…',
   'viewer.preview': 'Preview',
   'viewer.source': 'Source',