diff --git a/CLAUDE.md b/CLAUDE.md
index 8ed8245..9bec2fb 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -23,9 +23,49 @@ All HLS, M3U8, and DASH downloads are processed by **FFmpeg.wasm** running insid
 
 > **Planned**: Migrate FFmpeg.wasm to [mediabunny](https://github.com/nicktindall/mediabunny) for native-speed muxing without the 2 GB constraint.
 
-## Cloud Upload (Planned)
+## Cloud Upload
 
-The code infrastructure for Google Drive uploads exists in `src/core/cloud/` (`GoogleAuth`, `GoogleDriveClient`, `UploadManager`) and the `uploadToDrive` flag is plumbed through `DownloadManager`, but **no actual upload is ever triggered** — `this.uploadToDrive` is stored but never used in `download()`. Do not document this as a working feature. Future work will wire this up and add support for additional providers (S3, Dropbox, etc.).
+`src/core/cloud/` contains the full provider abstraction:
+
+- `base-cloud-provider.ts` — abstract `BaseCloudProvider` with `id: CloudProvider` and `upload(blob, filename, onProgress?, signal?): Promise<string>`
+- `google-auth.ts` — `GoogleAuth` static class; OAuth via `chrome.identity.launchWebAuthFlow()` with user-provided client ID (stored in `chrome.storage.local` under `google_client_id`). No `oauth2` manifest key needed.
+- `google-drive.ts` — `GoogleDriveClient extends BaseCloudProvider`; simple multipart for files ≤ 5 MB, resumable chunked upload for larger files
+- `s3-client.ts` — `S3Client extends BaseCloudProvider`; SigV4-signed PUT for files < 10 MB, multipart for ≥ 10 MB. Persists in-flight multipart `uploadId` to `chrome.storage.local` (`s3_pending_uploads`) for crash-resilient cleanup.
+- `upload-manager.ts` — `Map<CloudProvider, BaseCloudProvider>` registry; routes `uploadBlob()` through `client.upload()`; `isConfigured()` checks `providers.size > 0`
+
+### Upload Flow
+
+Upload is **manual only**. Completed downloads show an "Upload to cloud" action in both the History page (Options → History → item menu) and the popup Downloads tab. Clicking it opens a file picker (`showOpenFilePicker`); the user selects the local video file, which is stored in IDB (since `chrome.runtime.sendMessage` uses JSON serialization that destroys `ArrayBuffer`), then an `UPLOAD_REQUEST` message is sent to the service worker. If both providers are configured, a provider picker dialog appears. There is no automatic upload on download completion.
+
+Upload progress is tracked via `DownloadStage.UPLOADING` and displayed with a water-fill cloud icon in history. Uploads can be cancelled via an `AbortController`; cancellation prompts a confirmation dialog. On cancel, `AbortError` (DOMException) is expected and handled silently — not logged as an error.
+
+### Crash Resilience
+
+- **S3 multipart**: In-flight `(key, uploadId)` pairs are persisted to `chrome.storage.local`. On service worker startup, `S3Client.cleanupOrphanedUploads()` aborts any orphaned uploads and clears the list.
+- **Stuck uploads**: Downloads in `UPLOADING` stage after a crash are restored to `COMPLETED` by `cleanupStaleUploads()` in `init()`.
+
+### Google Drive Setup
+
+Users must create their own OAuth credentials (free). The options page shows step-by-step instructions:
+1. Enable Google Drive API in Google Cloud Console
+2. Create OAuth 2.0 Client ID (type: **Web application**)
+3. Add the extension's redirect URI (`chrome.identity.getRedirectURL()`) as an authorized redirect URI
+4. Paste the client ID into the options page
+5. Clicking "Sign in with Google" auto-saves settings with `enabled: true`
+
+The `chromiumapp.org` redirect works for unpacked extensions — Chrome intercepts it internally without needing the Chrome Web Store.
+
+### Adding a New Provider
+
+Create a class extending `BaseCloudProvider`, add its key to the `CloudProvider` union in `shared/messages.ts`, instantiate and register it in the `UploadManager` constructor — no other code needs to change.
+
+### S3 Bucket CORS Requirement
+
+The bucket must have a CORS policy whitelisting the extension origin. The options page S3 section generates the correct JSON dynamically (using `chrome.runtime.id`) and provides a "Copy CORS Config" button. Paste it into **S3 → bucket → Permissions → Cross-origin resource sharing (CORS) → Edit**. Without it the browser will block upload requests from the `chrome-extension://` origin.
+
+### S3 Secret Key Encryption
+
+The S3 secret access key can be encrypted at rest with AES-GCM via `SecureStorage`. The user sets a passphrase in the options page; the key is stored as an `EncryptedBlob` in `chrome.storage.local`. On upload, `resolveS3Secret()` in the service worker decrypts it using the passphrase from session storage.
 
 ## Architecture
 
@@ -203,11 +243,14 @@ src/
 │   │   └── chunks.ts                    # storeChunk(), deleteChunks(), getChunkCount()
 │   ├── storage/
 │   │   ├── chrome-storage.ts
+│   │   ├── secure-storage.ts    # AES-GCM encrypt/decrypt for S3 secret key
 │   │   └── settings.ts          # AppSettings interface + loadSettings() — always use this
-│   ├── cloud/                           # ⚠️ Planned — not wired up yet
-│   │   ├── google-auth.ts
-│   │   ├── google-drive.ts
-│   │   └── upload-manager.ts
+│   ├── cloud/
+│   │   ├── base-cloud-provider.ts       # Abstract base + ProgressCallback type
+│   │   ├── google-auth.ts               # OAuth via launchWebAuthFlow (user-provided client ID)
+│   │   ├── google-drive.ts              # GoogleDriveClient extends BaseCloudProvider
+│   │   ├── s3-client.ts                 # S3Client extends BaseCloudProvider + orphaned upload cleanup
+│   │   └── upload-manager.ts            # Provider registry (Map<CloudProvider, BaseCloudProvider>)
 │   ├── metadata/
 │   │   └── metadata-extractor.ts
 │   └── utils/
diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..40dacef
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1,257 @@
+# GEMINI.md
+
+This file provides guidance to Gemini CLI when working with code in this repository.
+
+## Commands
+
+```bash
+# Development build with watch mode (rebuilds on file changes)
+npm run dev
+
+# Production build (minified, no sourcemaps)
+npm run build
+
+# TypeScript type checking only (no emit)
+npm run type-check
+```
+
+There are no tests in this project. After building, load the `dist/` directory as an unpacked extension in Chrome (`chrome://extensions/` → Developer mode → Load unpacked).
+
+## FFmpeg.wasm Size Limit
+
+All HLS, M3U8, and DASH downloads are processed by **FFmpeg.wasm** running inside the browser. Output files are limited to approximately **2 GB** — files beyond this will exhaust browser memory during the merge stage.
+
+> **Planned**: Migrate FFmpeg.wasm to [mediabunny](https://github.com/nicktindall/mediabunny) for native-speed muxing without the 2 GB constraint.
+
+## Cloud Upload (Planned)
+
+`src/core/cloud/` contains the full provider abstraction:
+
+- `base-cloud-provider.ts` — abstract `BaseCloudProvider` with `id: CloudProvider` and `upload(blob, filename, onProgress?): Promise<string>`
+- `google-drive.ts` — `GoogleDriveClient extends BaseCloudProvider` (resumable chunked upload for files > 5 MB)
+- `s3-client.ts` — `S3Client extends BaseCloudProvider` (SigV4-signed PUT / multipart for files ≥ 10 MB)
+- `upload-manager.ts` — `Map<CloudProvider, BaseCloudProvider>` registry; routes `uploadBlob()` through `client.upload()`; `isConfigured()` checks `providers.size > 0`
+
+**Upload is manual only** — completed downloads show an "Upload to cloud" action in the History page (Options → History → item menu). Clicking it opens a file picker (`showOpenFilePicker`); the user selects the local video file, which is sent to the service worker via `UPLOAD_REQUEST` message for cloud upload. If both providers are configured, a dialog lets the user choose. There is no automatic upload on download completion. The popup Downloads tab only shows in-progress downloads; finished downloads live in History.
+
+**To add a new provider**: create a class extending `BaseCloudProvider`, add its key to the `CloudProvider` union in `shared/messages.ts`, instantiate and register it in the `UploadManager` constructor — no other code needs to change.
+
+**S3 bucket CORS requirement**: the bucket must have a CORS policy whitelisting the extension origin. The options page S3 section generates the correct JSON dynamically (using `chrome.runtime.id`) and provides a "Copy CORS Config" button. Paste it into **S3 → bucket → Permissions → Cross-origin resource sharing (CORS) → Edit**. Without it the browser will block upload requests from the `chrome-extension://` origin.
+
+## Architecture
+
+Media Bridge is a Manifest V3 Chrome extension. It has five distinct execution contexts that communicate via `chrome.runtime.sendMessage`:
+
+1. **Service Worker** (`src/service-worker.ts` → `dist/background.js`): The central orchestrator. Handles all download lifecycle management, routes messages from popup/content scripts, maintains download state, and keeps itself alive during long operations using `chrome.runtime.getPlatformInfo()` heartbeats. Intercepts `.m3u8` and `.mpd` network requests via `chrome.webRequest.onCompleted`.
+
+2. **Content Script** (`src/content.ts` → `dist/content.js`): Built separately as IIFE (content scripts cannot use ES modules). Runs on all pages, uses `DetectionManager` to find videos via DOM observation and network request interception, and injects download buttons. Proxies fetch requests through the service worker to bypass CORS.
+
+3. **Offscreen Document** (`src/offscreen/` → `dist/offscreen/`): A hidden page created on demand for FFmpeg.wasm processing. Reads raw segment chunks from IndexedDB, concatenates them, runs FFmpeg to mux into MP4, and returns a blob URL. Communicates with the service worker via messages since it can't use the Chrome downloads API directly. FFmpeg.wasm is single-threaded — all processing calls are serialized through a promise-based `enqueue()` queue to prevent concurrent `ffmpeg.exec()` from corrupting shared WASM state. Intermediate filenames are prefixed with `downloadId` (e.g., `${downloadId}_video.ts`) to avoid collisions in FFmpeg's virtual filesystem.
+
+4. **Popup** (`src/popup/` → `dist/popup/`): Extension action UI — Videos tab (detected videos), Downloads tab (progress), Manifest tab (manual URL input with quality selector).
+
+5. **Options Page** (`src/options/` → `dist/options/`): Full settings UI with sidebar navigation. Sections: Download (FFmpeg timeout, max concurrent), History (completed/failed/cancelled download log with infinite scroll), Google Drive, S3, Recording (HLS poll interval tuning), Notifications, and Advanced (retries, backoff, cache sizes, fragment failure rate, IDB sync interval). All settings changes notify via bottom toast. History button in the popup header opens the options page directly on the `#history` anchor.
+
+### Download Flow
+
+For HLS/M3U8 downloads:
+1. Service worker creates a `DownloadManager`, which delegates to `HlsDownloadHandler` or `M3u8DownloadHandler`
+2. Handler parses the playlist, downloads segments concurrently (up to `maxConcurrent`, default 3), stores raw chunks in IndexedDB (`core/database/chunks.ts`)
+3. Handler sends `OFFSCREEN_PROCESS_HLS` or `OFFSCREEN_PROCESS_M3U8` message to offscreen document
+4. Offscreen document enqueues the job — if another FFmpeg job is running, it waits. Once dequeued, it concatenates chunks from IndexedDB, runs FFmpeg, and returns a blob URL
+5. Service worker triggers Chrome download from the blob URL and saves the MP4
+
+For DASH downloads: same flow but via `DashDownloadHandler` and `OFFSCREEN_PROCESS_DASH`. No `-bsf:a aac_adtstoasc` bitstream filter (DASH segments are already ISOBMF). Intermediate files use `.mp4` extension instead of `.ts`.
+
+For direct downloads: the service worker uses `chrome.downloads.download()` directly — no FFmpeg.
+
+For live recording (HLS or DASH): the recording handler polls the media playlist/MPD at the stream's native interval (derived from `#EXT-X-TARGETDURATION` for HLS, `minimumUpdatePeriod` for DASH), collecting new segments as they appear. Aborting triggers the merge phase rather than a discard.
+
+### State Persistence
+
+Download state is persisted in **IndexedDB** (not `chrome.storage`), in the `media-bridge` database (version 3) with two object stores:
+- `downloads`: Full `DownloadState` objects keyed by `id`
+- `chunks`: Raw `Uint8Array` segments keyed by `[downloadId, index]`
+
+Configuration lives in `chrome.storage.local` under the `storage_config` key (`StorageConfig` type). Always access config through `loadSettings()` (`core/storage/settings.ts`) which returns a fully-typed `AppSettings` object with all defaults applied — never read `StorageConfig` directly. `AppSettings` covers: `ffmpegTimeout`, `maxConcurrent`, `historyEnabled`, `googleDrive`, `s3`, `recording`, `notifications`, and `advanced`.
+
+IndexedDB is used as the shared state store because the five execution contexts don't share memory. The service worker writes state via `storeDownload()` (`core/database/downloads.ts`), which is a single IDB `put` upsert keyed by `id`. The popup reads the full list via `getAllDownloads()` on open. The offscreen document reads raw chunks from the `chunks` store during FFmpeg processing. `chrome.storage` is only used for config because it has a 10 MB quota and can't store `ArrayBuffer`.
+
+Progress updates use two complementary channels:
+- **IndexedDB** — durable source of truth; survives popup close/reopen and service worker restarts. Popup reads this on mount.
+- **`chrome.runtime.sendMessage` (`DOWNLOAD_PROGRESS`)** — low-latency live updates broadcast by the service worker while the popup is open. Fire-and-forget; missed if popup is closed.
+
+### Progress Update Design (BasePlaylistHandler)
+
+`updateProgress()` (`core/downloader/base-playlist-handler.ts`) is the hot-path progress method called after every segment download. It uses two optimizations to avoid overwhelming the service worker event loop:
+
+1. **`cachedState`** — a class field holding the `DownloadState` object read from IDB on the first call. Every subsequent call mutates this same in-memory object directly (updating `downloaded`, `total`, `percentage`, `speed`, etc.) — zero DB reads. The cache is invalidated (`cachedState = null`) only on `resetDownloadState()` (new download) and `updateStage()` (stage transition), which forces a fresh IDB read to pick up any external changes.
+
+2. **`DB_SYNC_INTERVAL_MS = 500ms` throttle** — `storeDownload()` is only called if at least 500ms have elapsed since the last write. The popup still receives every update via `notifyProgress()` (which fires unconditionally), but IDB writes are capped at ~2/second regardless of segment download frequency.
+
+`updateStage()` bypasses both optimizations — it always does a full IDB read + write because stage transitions are rare and need to reflect the true persisted state.
+
+`HlsRecordingHandler.updateRecordingProgress()` and `DashRecordingHandler.updateRecordingProgress()` also always do a full IDB read + write, but are naturally rate-limited to once per poll cycle (every 1–10 seconds).
+
+**Do not add `getDownload()` calls inside `updateProgress()` or the `onProgress` callback** — that was the root cause of the UI freezing bug fixed in commit `9f2a21e`. With 3 concurrent downloads each firing per segment, even one extra IDB read per callback produces dozens of blocking reads per second that queue up behind user interaction messages in the service worker event loop.
+
+### Message Protocol
+
+All inter-component communication uses the `MessageType` enum in `src/shared/messages.ts`. When adding new message types, add them to this enum and handle them in the service worker's `onMessage` listener switch statement. `CHECK_URL` is used by the options page manifest-check feature to probe a URL's content-type via the service worker (bypassing CORS).
+
+### Build System
+
+The Vite config (`vite.config.ts`) has two important quirks:
+- **Content script** is built in a separate Vite sub-build (IIFE format, `inlineDynamicImports: true`) triggered by the `build-content-script-as-iife` plugin. This avoids ES module restrictions for content scripts.
+- **HTML files** are post-processed by the `move-html-files` plugin to fix script src paths from absolute to relative after Vite moves them.
+
+FFmpeg WASM files are served from `public/ffmpeg/` and copied to `dist/ffmpeg/` at build time. They are explicitly excluded from Vite's dependency optimization.
+
+### Path Alias
+
+`@` resolves to `src/`. Use `@/core/types` instead of relative paths when importing from deep nesting.
+
+### Format Detection
+
+`VideoFormat` is a string enum (`VideoFormat.DIRECT | HLS | M3U8 | DASH | UNKNOWN`). The distinctions matter:
+- `HLS` — master playlist with `#EXT-X-STREAM-INF` quality variants → `HlsDownloadHandler`
+- `M3U8` — direct media playlist with segments → `M3u8DownloadHandler`
+- `DASH` — MPEG-DASH `.mpd` manifest → `DashDownloadHandler`
+
+Use enum values everywhere; the underlying strings are lowercase for IndexedDB backward compatibility.
+
+### Live Stream Recording
+
+Both HLS and DASH support live recording via `HlsRecordingHandler` and `DashRecordingHandler`, which extend the shared `BaseRecordingHandler`. The recording handler polls the media playlist/MPD at a fixed interval, downloads new segments as they appear, and merges them into an MP4 when the user stops recording or the stream ends naturally (`#EXT-X-ENDLIST` for HLS; `type="dynamic"` → `type="static"` transition for DASH). Controlled via `AbortSignal` — aborting triggers the merge phase, not a discard. The popup UI shows a REC button (only for live streams) and a dedicated `RECORDING` stage with segment count.
+
+### Header Injection (declarativeNetRequest)
+
+`Origin` and `Referer` are **forbidden headers** — browsers silently strip them from `fetch()` calls, even in service worker context. CDNs that require these headers will 404 without them.
+
+The fix uses `chrome.declarativeNetRequest` dynamic rules (`src/core/downloader/header-rules.ts`) to inject these headers at the network layer. Rules are scoped to the specific CDN path prefix and `initiatorDomains: [chrome.runtime.id]` so they only affect extension requests. Each download handler calls `addHeaderRules()` before downloading and `removeHeaderRules()` in its `finally` block. **Do not** attempt to set `Origin`/`Referer` via `fetch()` headers — it won't work.
+
+### Stop & Save (Partial Downloads)
+
+HLS, M3U8, and DASH handlers support saving partial downloads when cancelled. If `shouldSaveOnCancel()` returns true, the handler transitions to the `MERGING` stage with whatever chunks were collected, runs FFmpeg, and saves a partial MP4. The abort signal is cleared before FFmpeg processing to prevent immediate rejection.
+
+### Constants Ownership
+
+- `src/shared/constants.ts` — only constants used across **multiple** modules (runtime defaults, pipeline values, storage keys)
+- `src/options/constants.ts` — constants used exclusively within the options UI (toast duration, UI bounds for all settings inputs in seconds, validation clamp values)
+
+**Time representation**: All runtime/storage values use **milliseconds** (`StorageConfig`, `AppSettings`, all handlers). The options UI uses **seconds** exclusively. Conversion happens only in `options.ts`: divide by 1000 on load, multiply by 1000 on save.
+
+### Options Page Field Validation
+
+All numeric inputs are validated **before** saving via three helpers in `options.ts`:
+
+- `validateField(input, min, max, isInteger?)` — parses the value, returns the number on success or `null` on failure. Calls `markInvalid` automatically.
+- `markInvalid(input, message)` — adds `.invalid` class (red border) and inserts a `.form-error` div after the input. Registers a one-time `input` listener to auto-clear when the user edits.
+- `clearInvalid(input)` — removes `.invalid` and the `.form-error` div.
+
+Each save handler validates all fields upfront and returns early if any are invalid — the button is never disabled and no write is attempted. Cross-field constraints (e.g. `pollMin < pollMax`) call `markInvalid` on the relevant field directly rather than relying on the toast. The toast is reserved for storage/network errors.
+
+### History
+
+Completed, failed, and cancelled downloads are persisted in IndexedDB when `historyEnabled` (default `true`) is set. The options page History section renders all finished downloads with infinite scroll (`IntersectionObserver`). From history, users can re-download (reuses stored metadata for filename), copy the original URL, or delete entries. `bulkDeleteDownloads()` (`core/database/downloads.ts`) handles batch removal. The popup "History" button navigates to `options.html#history`.
+
+### Post-Download Actions
+
+After a download completes, `handlePostDownloadActions()` in the service worker reads `AppSettings.notifications` and optionally fires an OS notification (`notifyOnCompletion`) or opens the file in Finder/Explorer (`autoOpenFile`).
+
+### DASH-Specific Notes
+
+- No `-bsf:a aac_adtstoasc` bitstream filter — DASH segments are already in ISOBMF container format
+- Intermediate files use `.mp4` extension (not `.ts`)
+- Live detection: `type="dynamic"` attribute in the MPD root element
+- Poll interval: `minimumUpdatePeriod` attribute in the MPD
+- DRM detection: presence of `<ContentProtection>` elements in any `AdaptationSet`
+- mpd-parser v1.3.1 is used; type declarations are in `src/types/mpd-parser.d.ts` (no `@types` package available)
+
+### Project Structure
+
+```
+src/
+├── service-worker.ts              # Central orchestrator
+├── content.ts                     # Content script (IIFE)
+├── shared/
+│   ├── messages.ts                # MessageType enum
+│   └── constants.ts               # DEFAULT_MAX_CONCURRENT, DEFAULT_FFMPEG_TIMEOUT_MS, etc.
+├── core/
+│   ├── types/
+│   │   └── index.ts               # VideoFormat, DownloadState, DownloadStage, Fragment, Level
+│   ├── detection/
+│   │   ├── detection-manager.ts
+│   │   ├── thumbnail-utils.ts
+│   │   ├── direct/direct-detection-handler.ts
+│   │   ├── hls/hls-detection-handler.ts
+│   │   └── dash/dash-detection-handler.ts
+│   ├── downloader/
+│   │   ├── download-manager.ts
+│   │   ├── base-playlist-handler.ts     # Hot-path progress, cachedState, 500ms throttle
+│   │   ├── base-recording-handler.ts    # Shared polling loop for live streams
+│   │   ├── concurrent-workers.ts
+│   │   ├── crypto-utils.ts              # AES-128 decryption
+│   │   ├── header-rules.ts              # DNR Origin/Referer injection
+│   │   ├── types.ts
+│   │   ├── direct/direct-download-handler.ts
+│   │   ├── hls/hls-download-handler.ts
+│   │   ├── hls/hls-recording-handler.ts
+│   │   ├── m3u8/m3u8-download-handler.ts
+│   │   ├── dash/dash-download-handler.ts
+│   │   └── dash/dash-recording-handler.ts
+│   ├── parsers/
+│   │   ├── m3u8-parser.ts               # HLS parsing (wraps m3u8-parser)
+│   │   ├── mpd-parser.ts                # DASH parsing (wraps mpd-parser)
+│   │   └── playlist-utils.ts            # ParsedPlaylist, ParsedSegment, parseLevelsPlaylist()
+│   ├── ffmpeg/
+│   │   ├── ffmpeg-bridge.ts
+│   │   ├── ffmpeg-singleton.ts
+│   │   └── offscreen-manager.ts
+│   ├── database/
+│   │   ├── connection.ts                # IDB init (media-bridge v3)
+│   │   ├── downloads.ts                 # storeDownload(), getDownload(), etc.
+│   │   └── chunks.ts                    # storeChunk(), deleteChunks(), getChunkCount()
+│   ├── storage/
+│   │   ├── chrome-storage.ts
+│   │   └── settings.ts          # AppSettings interface + loadSettings() — always use this
+│   ├── cloud/                           # ⚠️ Upload trigger not wired up yet
+│   │   ├── base-cloud-provider.ts       # Abstract base + ProgressCallback type
+│   │   ├── google-auth.ts
+│   │   ├── google-drive.ts              # GoogleDriveClient extends BaseCloudProvider
+│   │   ├── s3-client.ts                 # S3Client extends BaseCloudProvider
+│   │   └── upload-manager.ts            # Provider registry (Map<CloudProvider, BaseCloudProvider>)
+│   ├── metadata/
+│   │   └── metadata-extractor.ts
+│   └── utils/
+│       ├── blob-utils.ts
+│       ├── cancellation.ts
+│       ├── download-utils.ts
+│       ├── drm-utils.ts
+│       ├── errors.ts                    # MediaBridgeError hierarchy
+│       ├── fetch-utils.ts
+│       ├── file-utils.ts
+│       ├── format-utils.ts
+│       ├── id-utils.ts
+│       ├── logger.ts
+│       └── url-utils.ts
+├── popup/
+│   ├── popup.ts / popup.html
+│   ├── state.ts
+│   ├── tabs.ts
+│   ├── render-downloads.ts
+│   ├── render-videos.ts
+│   ├── render-manifest.ts
+│   ├── download-actions.ts
+│   └── utils.ts
+├── options/
+│   ├── options.ts / options.html
+│   └── constants.ts             # Options-page-only constants (UI bounds, toast duration)
+├── offscreen/
+│   ├── offscreen.ts / offscreen.html
+└── types/
+    └── mpd-parser.d.ts
+```
+
+
+When I start upload, I need to show a smal loading bar in form of the icon we use for upload button, needs to it show the upload progress. when completed, remove these and add a new badge "uploaded" to the history card. Also, keep showing th re-upload button. do not show inprogress upload in the download tab.
diff --git a/README.md b/README.md
index 7fd19dd..0ee436e 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ A Manifest V3 Chromium extension that detects and downloads videos from the web
 - **Header Injection**: Injects `Origin`/`Referer` headers via `declarativeNetRequest` for CDNs that require them
 - **Download History**: Completed, failed, and cancelled downloads are persisted and browsable in the options page History section with infinite scroll
 - **Notifications**: Optional OS notification and auto-open file on download completion
+- **Cloud Upload**: Upload completed downloads to Google Drive or S3-compatible storage from the History page
 - **Configurable Settings**: Recording poll intervals, fetch retry behaviour, detection cache sizes, IDB sync rate — all tunable from the options page
 
 ## ⚠️ Output File Size Limit
@@ -24,11 +25,31 @@ Because video processing uses **FFmpeg.wasm** (a WebAssembly build of FFmpeg run
 
 > **Planned**: A future release will replace FFmpeg.wasm with [mediabunny](https://github.com/nicktindall/mediabunny) for native-speed muxing without the 2 GB constraint.
 
-## Planned Features
+## Cloud Upload Setup
 
-The following features are planned but not yet implemented:
+Completed downloads can be uploaded to **Google Drive** or **S3-compatible storage** from **Options → History → item menu → Upload to cloud**.
 
-- **Cloud storage uploads**: The code infrastructure for Google Drive exists (`core/cloud/`) but is not wired up — no uploads are triggered after downloads complete. Future versions will support Google Drive and other cloud providers (S3, Dropbox, etc.).
+### Google Drive
+
+Google Drive requires you to create your own OAuth credentials (free):
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/) and create a project (or use an existing one).
+2. Enable the **[Google Drive API](https://console.cloud.google.com/apis/library/drive.googleapis.com)**.
+3. Go to **[Credentials](https://console.cloud.google.com/apis/credentials)** → **Create Credentials** → **OAuth client ID**.
+4. Set application type to **Web application**.
+5. Under **Authorized redirect URIs**, add your extension's redirect URI.
+   - Find it in **Options → Cloud Providers → Google Drive** — it's shown next to the Client ID field.
+   - It looks like `https://<extension-id>.chromiumapp.org/`
+6. Copy the **Client ID** and paste it into the options page.
+7. Click **Sign in with Google** to authorize.
+
+> **Note:** If you haven't configured a consent screen yet, Google will prompt you to create one. Choose **External** user type, fill in the required fields, and add yourself as a test user. The app will work in "Testing" mode — no verification needed for personal use.
+
+### S3 / S3-Compatible Storage
+
+1. In **Options → Cloud Providers → S3**, enter your bucket name, region, access key ID, and secret access key.
+2. Your S3 bucket must have a CORS policy that allows the extension origin. The options page generates the correct JSON and provides a **Copy CORS Config** button — paste it into **S3 → Bucket → Permissions → CORS**.
+3. Works with AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, and any S3-compatible provider.
 
 ## Installation
 
@@ -173,10 +194,11 @@ src/
 │   ├── storage/
 │   │   ├── chrome-storage.ts  # Raw chrome.storage.local access
 │   │   └── settings.ts        # AppSettings interface + loadSettings() — always use this
-│   ├── cloud/                 # ⚠️ Planned — infrastructure exists, not yet wired up
-│   │   ├── google-auth.ts
-│   │   ├── google-drive.ts
-│   │   └── upload-manager.ts
+│   ├── cloud/                 # Google Drive + S3 upload providers
+│   │   ├── google-auth.ts     # OAuth via launchWebAuthFlow (user-provided client ID)
+│   │   ├── google-drive.ts    # Resumable upload (chunked for files > 5 MB)
+│   │   ├── s3-client.ts       # SigV4-signed PUT / multipart upload
+│   │   └── upload-manager.ts  # Provider registry + routing
 │   ├── metadata/
 │   │   └── metadata-extractor.ts
 │   └── utils/
@@ -203,7 +225,7 @@ src/
 
 - `storage` — Config persistence
 - `downloads` — Save downloaded files
-- `identity` — OAuth (reserved for future cloud upload)
+- `identity` — Google OAuth via `launchWebAuthFlow`
 - `activeTab` / `scripting` — Content script injection
 - `offscreen` — Offscreen document for FFmpeg.wasm
 - `unlimitedStorage` — Large segment storage in IndexedDB
diff --git a/public/shared.css b/public/shared.css
index 8a4756b..eaa0630 100644
--- a/public/shared.css
+++ b/public/shared.css
@@ -142,6 +142,11 @@ body {
   color: var(--success);
 }
 
+.badge-uploaded {
+  background: rgba(59, 130, 246, 0.12);
+  color: #3b82f6;
+}
+
 .badge-failed {
   background: rgba(248, 113, 113, 0.12);
   color: var(--error);
@@ -178,6 +183,11 @@ body {
   color: #16a34a;
 }
 
+:root.light-mode .badge-uploaded {
+  background: rgba(37, 99, 235, 0.08);
+  color: #2563eb;
+}
+
 :root.light-mode .badge-failed {
   background: rgba(220, 38, 38, 0.08);
   color: #dc2626;
@@ -187,3 +197,38 @@ body {
   background: rgba(217, 119, 6, 0.08);
   color: #d97706;
 }
+
+/* ---- Segmented Tabs (shared pill style) ---- */
+.seg-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 5px;
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  margin-bottom: 20px;
+  width: fit-content;
+}
+
+.seg-tab {
+  padding: 7px 14px;
+  border: none;
+  outline: none;
+  border-radius: calc(var(--radius-sm) - 2px);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+
+.seg-tab:hover {
+  color: var(--text-primary);
+}
+
+.seg-tab.active {
+  background: var(--surface-3);
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
diff --git a/src/core/cloud/base-cloud-provider.ts b/src/core/cloud/base-cloud-provider.ts
new file mode 100644
index 0000000..dc393d4
--- /dev/null
+++ b/src/core/cloud/base-cloud-provider.ts
@@ -0,0 +1,18 @@
+import { CloudProvider } from '../../shared/messages';
+
+export type ProgressCallback = (uploaded: number, total: number) => void;
+
+export abstract class BaseCloudProvider {
+  abstract readonly id: CloudProvider;
+
+  /**
+   * Upload blob to this provider.
+   * Returns the shareable URL of the uploaded file.
+   */
+  abstract upload(
+    blob: Blob,
+    filename: string,
+    onProgress?: ProgressCallback,
+    signal?: AbortSignal,
+  ): Promise<string>;
+}
diff --git a/src/core/cloud/google-auth.ts b/src/core/cloud/google-auth.ts
index 3bc8363..cc4ca29 100644
--- a/src/core/cloud/google-auth.ts
+++ b/src/core/cloud/google-auth.ts
@@ -1,5 +1,6 @@
 /**
- * Google OAuth using chrome.identity API
+ * Google OAuth using chrome.identity.launchWebAuthFlow.
+ * Users supply their own OAuth client ID via the options page.
  */
 
 import { AuthError } from "../utils/errors";
@@ -8,7 +9,6 @@ import { ChromeStorage } from "../storage/chrome-storage";
 
 const CLIENT_ID_STORAGE_KEY = "google_client_id";
 const TOKEN_STORAGE_KEY = "google_access_token";
-const REFRESH_TOKEN_STORAGE_KEY = "google_refresh_token";
 
 // Google OAuth scopes
 export const GOOGLE_DRIVE_SCOPES = [
@@ -35,7 +35,7 @@ export class GoogleAuth {
   }
 
   /**
-   * Authenticate with Google
+   * Authenticate with Google via launchWebAuthFlow (implicit grant).
    */
   static async authenticate(scopes: string[]): Promise<string> {
     try {
@@ -46,14 +46,17 @@ export class GoogleAuth {
         );
       }
 
-      // Use chrome.identity.getAuthToken for OAuth
-      const token = await new Promise<string>((resolve, reject) => {
-        chrome.identity.getAuthToken(
-          {
-            interactive: true,
-            scopes: scopes,
-          },
-          (token) => {
+      const redirectUrl = chrome.identity.getRedirectURL();
+      const authUrl = new URL("https://accounts.google.com/o/oauth2/v2/auth");
+      authUrl.searchParams.set("client_id", clientId);
+      authUrl.searchParams.set("redirect_uri", redirectUrl);
+      authUrl.searchParams.set("response_type", "token");
+      authUrl.searchParams.set("scope", scopes.join(" "));
+
+      const responseUrl = await new Promise<string>((resolve, reject) => {
+        chrome.identity.launchWebAuthFlow(
+          { url: authUrl.toString(), interactive: true },
+          (callbackUrl) => {
             if (chrome.runtime.lastError) {
               reject(
                 new AuthError(
@@ -62,16 +65,24 @@ export class GoogleAuth {
               );
               return;
             }
-            if (!token) {
-              reject(new AuthError("No token received"));
+            if (!callbackUrl) {
+              reject(new AuthError("No callback URL received"));
               return;
             }
-            resolve(token);
+            resolve(callbackUrl);
           },
         );
       });
 
-      // Store token
+      // Extract access_token from the URL fragment
+      const hashParams = new URLSearchParams(
+        new URL(responseUrl).hash.slice(1),
+      );
+      const token = hashParams.get("access_token");
+      if (!token) {
+        throw new AuthError("No access token in OAuth response");
+      }
+
       await ChromeStorage.set(TOKEN_STORAGE_KEY, token);
       logger.info("Google authentication successful");
 
@@ -103,7 +114,6 @@ export class GoogleAuth {
    */
   private static async isTokenValid(token: string): Promise<boolean> {
     try {
-      // Verify token by making a simple API call
       const response = await fetch(
         "https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=" + token,
       );
@@ -121,32 +131,15 @@ export class GoogleAuth {
 
     if (token) {
       try {
-        // Revoke token using Google API
         await fetch(
           `https://accounts.google.com/o/oauth2/revoke?token=${token}`,
         );
-
-        // Remove token from Chrome identity
-        await new Promise<void>((resolve, reject) => {
-          chrome.identity.removeCachedAuthToken({ token }, () => {
-            if (chrome.runtime.lastError) {
-              logger.warn(
-                "Failed to remove cached token:",
-                chrome.runtime.lastError,
-              );
-            }
-            resolve();
-          });
-        });
       } catch (error) {
         logger.warn("Failed to revoke token:", error);
       }
     }
 
-    // Clear stored tokens
     await ChromeStorage.remove(TOKEN_STORAGE_KEY);
-    await ChromeStorage.remove(REFRESH_TOKEN_STORAGE_KEY);
-
     logger.info("Signed out successfully");
   }
 
diff --git a/src/core/cloud/google-drive.ts b/src/core/cloud/google-drive.ts
index 2d7e1ff..a0accaf 100644
--- a/src/core/cloud/google-drive.ts
+++ b/src/core/cloud/google-drive.ts
@@ -3,11 +3,14 @@
  */
 
 import { GoogleAuth, GOOGLE_DRIVE_SCOPES } from "./google-auth";
+import { BaseCloudProvider, ProgressCallback } from "./base-cloud-provider";
 import { UploadError } from "../utils/errors";
 import { logger } from "../utils/logger";
 
 const DRIVE_API_BASE = "https://www.googleapis.com/drive/v3";
+const DRIVE_UPLOAD_BASE = "https://www.googleapis.com/upload/drive/v3";
 const RESUMABLE_UPLOAD_THRESHOLD_BYTES = 5 * 1024 * 1024; // 5 MB
+const CHUNK_SIZE = 8 * 1024 * 1024; // 8 MB — must be a multiple of 256 KB
 
 export interface GoogleDriveConfig {
   targetFolderId?: string;
@@ -20,17 +23,24 @@ export interface UploadResult {
   webViewLink?: string;
 }
 
-export class GoogleDriveClient {
+export class GoogleDriveClient extends BaseCloudProvider {
+  readonly id = 'googleDrive' as const;
   private config: GoogleDriveConfig;
 
   constructor(config: GoogleDriveConfig = {}) {
+    super();
     this.config = config;
   }
 
   /**
-   * Upload file to Google Drive
+   * Upload file to Google Drive. Returns the webViewLink (or fileId as fallback).
    */
-  async uploadFile(blob: Blob, filename: string): Promise<UploadResult> {
+  async upload(
+    blob: Blob,
+    filename: string,
+    onProgress?: ProgressCallback,
+    signal?: AbortSignal,
+  ): Promise<string> {
     try {
       const token = await GoogleAuth.getAccessToken(GOOGLE_DRIVE_SCOPES);
 
@@ -42,18 +52,25 @@ export class GoogleDriveClient {
         );
       }
 
-      // For files larger than 5MB, use resumable upload
+      // For files larger than 5MB, use resumable chunked upload
+      let result: UploadResult;
       if (blob.size > RESUMABLE_UPLOAD_THRESHOLD_BYTES) {
-        return await this.resumableUpload(blob, filename, token, folderId);
+        result = await this.resumableUpload(blob, filename, token, folderId, onProgress, signal);
+      } else {
+        // Simple multipart upload for smaller files
+        result = await this.simpleUpload(blob, filename, token, folderId, signal);
       }
 
-      // Simple upload for smaller files
-      return await this.simpleUpload(blob, filename, token, folderId);
+      return result.webViewLink ?? result.fileId;
     } catch (error) {
+      // Abort is expected on cancel — not an error
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        throw error;
+      }
       logger.error("Google Drive upload failed:", error);
       throw error instanceof UploadError
         ? error
-        : new UploadError(`Upload failed: ${error}`);
+        : new UploadError(`Upload failed: ${error instanceof Error ? error.message : String(error)}`);
     }
   }
 
@@ -65,6 +82,7 @@ export class GoogleDriveClient {
     filename: string,
     token: string,
     folderId?: string,
+    signal?: AbortSignal,
   ): Promise<UploadResult> {
     const metadata: any = {
       name: filename,
@@ -82,13 +100,14 @@ export class GoogleDriveClient {
     form.append("file", blob);
 
     const response = await fetch(
-      `${DRIVE_API_BASE}/files?uploadType=multipart`,
+      `${DRIVE_UPLOAD_BASE}/files?uploadType=multipart`,
       {
         method: "POST",
         headers: {
           Authorization: `Bearer ${token}`,
         },
         body: form,
+        signal,
       },
     );
 
@@ -113,77 +132,130 @@ export class GoogleDriveClient {
   }
 
   /**
-   * Resumable upload (for files > 5MB)
+   * Resumable chunked upload (for files > 5 MB).
+   *
+   * Protocol:
+   *  1. POST to initiate session → get Location (session URI)
+   *  2. PUT chunks in CHUNK_SIZE increments with Content-Range header
+   *     - Intermediate chunks → 308 Resume Incomplete; read Range header for offset
+   *     - Final chunk → 200 OK / 201 Created with file metadata
    */
   private async resumableUpload(
     blob: Blob,
     filename: string,
     token: string,
     folderId?: string,
+    onProgress?: ProgressCallback,
+    signal?: AbortSignal,
   ): Promise<UploadResult> {
-    // Step 1: Initialize resumable upload session
-    const metadata: any = {
-      name: filename,
-    };
+    const totalBytes = blob.size;
+    const mimeType = blob.type || "application/octet-stream";
 
-    if (folderId) {
-      metadata.parents = [folderId];
-    }
+    // Step 1: Initiate resumable session
+    const metadata: Record<string, unknown> = { name: filename };
+    if (folderId) metadata.parents = [folderId];
 
     const initResponse = await fetch(
-      `${DRIVE_API_BASE}/files?uploadType=resumable`,
+      `${DRIVE_UPLOAD_BASE}/files?uploadType=resumable`,
       {
         method: "POST",
         headers: {
           Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
+          "Content-Type": "application/json; charset=UTF-8",
+          "X-Upload-Content-Type": mimeType,
+          "X-Upload-Content-Length": totalBytes.toString(),
         },
         body: JSON.stringify(metadata),
       },
     );
 
     if (!initResponse.ok) {
-      const error = await initResponse
+      const err = await initResponse
         .json()
         .catch(() => ({ error: { message: initResponse.statusText } }));
       throw new UploadError(
-        `Failed to initialize upload: ${
-          error.error?.message || initResponse.statusText
-        }`,
+        `Failed to initialize resumable upload: ${err.error?.message || initResponse.statusText}`,
         initResponse.status,
       );
     }
 
-    const uploadUrl = initResponse.headers.get("Location");
-    if (!uploadUrl) {
-      throw new UploadError("No upload URL received");
+    const sessionUri = initResponse.headers.get("Location");
+    if (!sessionUri) {
+      throw new UploadError("Drive did not return a resumable session URI");
     }
 
-    // Step 2: Upload file data
-    const uploadResponse = await fetch(uploadUrl, {
-      method: "PUT",
-      headers: {
-        "Content-Type": blob.type || "application/octet-stream",
-        "Content-Length": blob.size.toString(),
-      },
-      body: blob,
-    });
+    // Step 2: Upload chunks
+    let offset = 0;
 
-    if (!uploadResponse.ok) {
-      throw new UploadError(
-        `Upload failed: ${uploadResponse.statusText}`,
-        uploadResponse.status,
-      );
-    }
+    while (offset < totalBytes) {
+      signal?.throwIfAborted();
+      const end = Math.min(offset + CHUNK_SIZE, totalBytes);
+      const chunk = blob.slice(offset, end);
+      const chunkSize = end - offset;
+      const isLast = end === totalBytes;
 
-    const result = await uploadResponse.json();
+      const response = await fetch(sessionUri, {
+        method: "PUT",
+        headers: {
+          "Content-Length": chunkSize.toString(),
+          "Content-Range": `bytes ${offset}-${end - 1}/${totalBytes}`,
+          "Content-Type": mimeType,
+        },
+        body: chunk,
+        signal,
+      });
 
-    logger.info(`File uploaded successfully (resumable): ${result.id}`);
+      // Session expired — cannot recover without restarting
+      if (response.status === 404) {
+        throw new UploadError("Resumable upload session expired (404)");
+      }
 
-    return {
-      fileId: result.id,
-      webViewLink: result.webViewLink,
-    };
+      // 5xx errors: could query server position and retry, but keep it simple
+      if (response.status >= 500) {
+        throw new UploadError(
+          `Server error during chunk upload: ${response.status} ${response.statusText}`,
+          response.status,
+        );
+      }
+
+      if (isLast) {
+        // Final chunk: expect 200 or 201
+        if (response.status !== 200 && response.status !== 201) {
+          throw new UploadError(
+            `Unexpected status for final chunk: ${response.status}`,
+            response.status,
+          );
+        }
+        const result = await response.json();
+        logger.info(`Drive upload complete (resumable): ${result.id}`);
+        onProgress?.(totalBytes, totalBytes);
+        return { fileId: result.id, webViewLink: result.webViewLink };
+      }
+
+      // Intermediate chunk: expect 308 Resume Incomplete
+      if (response.status !== 308) {
+        throw new UploadError(
+          `Unexpected status for intermediate chunk: ${response.status}`,
+          response.status,
+        );
+      }
+
+      // Advance offset from server-confirmed Range header
+      const rangeHeader = response.headers.get("Range");
+      if (rangeHeader) {
+        // Format: "bytes=0-N"
+        const confirmedEnd = parseInt(rangeHeader.split("-")[1], 10);
+        offset = confirmedEnd + 1;
+      } else {
+        // Server received nothing yet — retry from same offset
+        logger.warn("Drive returned 308 with no Range header; retrying chunk from same offset");
+      }
+
+      onProgress?.(offset, totalBytes);
+    }
+
+    // Should be unreachable
+    throw new UploadError("Resumable upload loop exited without completing");
   }
 
   /**
diff --git a/src/core/cloud/s3-client.ts b/src/core/cloud/s3-client.ts
new file mode 100644
index 0000000..ba21ce9
--- /dev/null
+++ b/src/core/cloud/s3-client.ts
@@ -0,0 +1,569 @@
+/**
+ * S3-compatible upload client with SigV4 request signing.
+ * Works with AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, and any
+ * S3-compatible provider that accepts path-style or virtual-hosted-style URLs.
+ *
+ * Uses Web Crypto API — no external dependencies.
+ */
+
+import { BaseCloudProvider, ProgressCallback } from "./base-cloud-provider";
+import { UploadError } from "../utils/errors";
+import { logger } from "../utils/logger";
+
+const S3_PENDING_UPLOADS_KEY = "s3_pending_uploads";
+
+interface PendingUpload {
+  key: string;
+  uploadId: string;
+}
+
+export interface S3Config {
+  bucket: string;
+  region: string;
+  accessKeyId: string;
+  secretAccessKey: string;
+  /** Custom endpoint for S3-compatible providers. Defaults to AWS S3 virtual-hosted URL. */
+  endpoint?: string;
+  /** Key prefix prepended to all uploaded object names. */
+  prefix?: string;
+}
+
+export interface S3UploadResult {
+  /** The public URL of the uploaded object (path-style). */
+  url: string;
+  key: string;
+}
+
+// S3 requires each part to be >= 5 MB (except the last). Use 10 MB parts.
+// Threshold matches part size so every file >= 10 MB gets chunked progress.
+// Files < 10 MB are uploaded as a single PUT (S3 rejects multipart parts < 5 MB).
+const PART_SIZE = 10 * 1024 * 1024;
+const MULTIPART_THRESHOLD = PART_SIZE;
+
+export class S3Client extends BaseCloudProvider {
+  readonly id = 's3' as const;
+  private readonly config: S3Config;
+
+  constructor(config: S3Config) {
+    super();
+    this.config = config;
+  }
+
+  async upload(
+    blob: Blob,
+    filename: string,
+    onProgress?: ProgressCallback,
+    signal?: AbortSignal,
+  ): Promise<string> {
+    const key = this.config.prefix
+      ? `${this.config.prefix.replace(/\/$/, "")}/${filename}`
+      : filename;
+
+    let result: S3UploadResult;
+    if (blob.size >= MULTIPART_THRESHOLD) {
+      result = await this.multipartUpload(blob, key, onProgress, signal);
+    } else {
+      result = await this.putUpload(blob, key, onProgress, signal);
+    }
+    return result.url;
+  }
+
+  /** Single-part PUT upload for files < 10 MB */
+  private async putUpload(
+    blob: Blob,
+    key: string,
+    onProgress?: ProgressCallback,
+    signal?: AbortSignal,
+  ): Promise<S3UploadResult> {
+    const url = this.objectUrl(key);
+    const buffer = await blob.arrayBuffer();
+    const payloadHash = await sha256hex(buffer);
+
+    const now = new Date();
+    const datetime = isoDatetime(now);
+    const date = datetime.slice(0, 8);
+
+    const headers: Record<string, string> = {
+      "Content-Type": blob.type || "video/mp4",
+      "Content-Length": String(blob.size),
+      "x-amz-content-sha256": payloadHash,
+      "x-amz-date": datetime,
+      Host: new URL(url).host,
+    };
+
+    const authorization = await this.buildAuthorization(
+      "PUT",
+      new URL(url),
+      headers,
+      payloadHash,
+      datetime,
+      date,
+    );
+    headers["Authorization"] = authorization;
+    delete headers["Host"]; // fetch adds it automatically
+
+    const response = await fetch(url, {
+      method: "PUT",
+      headers,
+      body: buffer,
+      signal,
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => response.statusText);
+      throw new UploadError(
+        `S3 PUT failed (${response.status}): ${text}`,
+        response.status,
+      );
+    }
+
+    onProgress?.(blob.size, blob.size);
+    logger.info(`S3 upload complete: ${key}`);
+    return { url, key };
+  }
+
+  /** Multipart upload for files >= 10 MB */
+  private async multipartUpload(
+    blob: Blob,
+    key: string,
+    onProgress?: ProgressCallback,
+    signal?: AbortSignal,
+  ): Promise<S3UploadResult> {
+    // 1. Initiate
+    const uploadId = await this.initiateMultipart(key);
+    await this.savePendingUpload(key, uploadId);
+    const parts: Array<{ PartNumber: number; ETag: string }> = [];
+    let uploadedBytes = 0;
+
+    try {
+      const totalParts = Math.ceil(blob.size / PART_SIZE);
+
+      for (let i = 0; i < totalParts; i++) {
+        signal?.throwIfAborted();
+        const start = i * PART_SIZE;
+        const end = Math.min(start + PART_SIZE, blob.size);
+        const partBlob = blob.slice(start, end);
+        const partNumber = i + 1;
+
+        const etag = await this.uploadPart(key, uploadId, partNumber, partBlob, signal);
+        parts.push({ PartNumber: partNumber, ETag: etag });
+
+        uploadedBytes += partBlob.size;
+        onProgress?.(uploadedBytes, blob.size);
+      }
+
+      // 2. Complete
+      await this.completeMultipart(key, uploadId, parts);
+      await this.clearPendingUpload(key, uploadId);
+    } catch (err) {
+      // Abort on failure to avoid orphaned multipart uploads
+      await this.abortMultipart(key, uploadId).catch((e) =>
+        logger.warn("Failed to abort multipart upload:", e),
+      );
+      await this.clearPendingUpload(key, uploadId);
+      throw err;
+    }
+
+    const url = this.objectUrl(key);
+    logger.info(`S3 multipart upload complete: ${key}`);
+    return { url, key };
+  }
+
+  private async initiateMultipart(key: string): Promise<string> {
+    const url = `${this.objectUrl(key)}?uploads`;
+    const now = new Date();
+    const datetime = isoDatetime(now);
+    const date = datetime.slice(0, 8);
+    const payloadHash = await sha256hex("");
+
+    const headers: Record<string, string> = {
+      "Content-Type": "video/mp4",
+      "x-amz-content-sha256": payloadHash,
+      "x-amz-date": datetime,
+      Host: new URL(url).host,
+    };
+    const authorization = await this.buildAuthorization(
+      "POST",
+      new URL(url),
+      headers,
+      payloadHash,
+      datetime,
+      date,
+    );
+    headers["Authorization"] = authorization;
+    delete headers["Host"];
+
+    const response = await fetch(url, { method: "POST", headers });
+    if (!response.ok) {
+      const text = await response.text().catch(() => response.statusText);
+      throw new UploadError(
+        `Failed to initiate multipart upload (${response.status}): ${text}`,
+        response.status,
+      );
+    }
+
+    const xml = await response.text();
+    const match = xml.match(/<UploadId>(.+?)<\/UploadId>/);
+    if (!match?.[1]) throw new UploadError("No UploadId in response");
+    return match[1];
+  }
+
+  private async uploadPart(
+    key: string,
+    uploadId: string,
+    partNumber: number,
+    blob: Blob,
+    signal?: AbortSignal,
+  ): Promise<string> {
+    const baseUrl = this.objectUrl(key);
+    const url = `${baseUrl}?partNumber=${partNumber}&uploadId=${encodeURIComponent(uploadId)}`;
+    const buffer = await blob.arrayBuffer();
+    const payloadHash = await sha256hex(buffer);
+    const now = new Date();
+    const datetime = isoDatetime(now);
+    const date = datetime.slice(0, 8);
+
+    const headers: Record<string, string> = {
+      "Content-Length": String(blob.size),
+      "x-amz-content-sha256": payloadHash,
+      "x-amz-date": datetime,
+      Host: new URL(url).host,
+    };
+    const authorization = await this.buildAuthorization(
+      "PUT",
+      new URL(url),
+      headers,
+      payloadHash,
+      datetime,
+      date,
+    );
+    headers["Authorization"] = authorization;
+    delete headers["Host"];
+
+    const response = await fetch(url, { method: "PUT", headers, body: buffer, signal });
+    if (!response.ok) {
+      const text = await response.text().catch(() => response.statusText);
+      throw new UploadError(
+        `Part ${partNumber} upload failed (${response.status}): ${text}`,
+        response.status,
+      );
+    }
+
+    const etag = response.headers.get("ETag") ?? "";
+    return etag.replace(/"/g, "");
+  }
+
+  private async completeMultipart(
+    key: string,
+    uploadId: string,
+    parts: Array<{ PartNumber: number; ETag: string }>,
+  ): Promise<void> {
+    const url = `${this.objectUrl(key)}?uploadId=${encodeURIComponent(uploadId)}`;
+    const body = [
+      "<CompleteMultipartUpload>",
+      ...parts.map(
+        (p) =>
+          `<Part><PartNumber>${p.PartNumber}</PartNumber><ETag>${p.ETag}</ETag></Part>`,
+      ),
+      "</CompleteMultipartUpload>",
+    ].join("");
+
+    const now = new Date();
+    const datetime = isoDatetime(now);
+    const date = datetime.slice(0, 8);
+    const payloadHash = await sha256hex(body);
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/xml",
+      "x-amz-content-sha256": payloadHash,
+      "x-amz-date": datetime,
+      Host: new URL(url).host,
+    };
+    const authorization = await this.buildAuthorization(
+      "POST",
+      new URL(url),
+      headers,
+      payloadHash,
+      datetime,
+      date,
+    );
+    headers["Authorization"] = authorization;
+    delete headers["Host"];
+
+    const response = await fetch(url, { method: "POST", headers, body });
+    if (!response.ok) {
+      const text = await response.text().catch(() => response.statusText);
+      throw new UploadError(
+        `Failed to complete multipart upload: ${text}`,
+        response.status,
+      );
+    }
+  }
+
+  async abortMultipart(key: string, uploadId: string): Promise<void> {
+    const url = `${this.objectUrl(key)}?uploadId=${encodeURIComponent(uploadId)}`;
+    const now = new Date();
+    const datetime = isoDatetime(now);
+    const date = datetime.slice(0, 8);
+    const payloadHash = await sha256hex("");
+
+    const headers: Record<string, string> = {
+      "x-amz-content-sha256": payloadHash,
+      "x-amz-date": datetime,
+      Host: new URL(url).host,
+    };
+    const authorization = await this.buildAuthorization(
+      "DELETE",
+      new URL(url),
+      headers,
+      payloadHash,
+      datetime,
+      date,
+    );
+    headers["Authorization"] = authorization;
+    delete headers["Host"];
+
+    await fetch(url, { method: "DELETE", headers });
+  }
+
+  private async savePendingUpload(key: string, uploadId: string): Promise<void> {
+    const data = await chrome.storage.local.get(S3_PENDING_UPLOADS_KEY);
+    const pending: PendingUpload[] = data[S3_PENDING_UPLOADS_KEY] ?? [];
+    pending.push({ key, uploadId });
+    await chrome.storage.local.set({ [S3_PENDING_UPLOADS_KEY]: pending });
+  }
+
+  private async clearPendingUpload(key: string, uploadId: string): Promise<void> {
+    const data = await chrome.storage.local.get(S3_PENDING_UPLOADS_KEY);
+    const pending: PendingUpload[] = data[S3_PENDING_UPLOADS_KEY] ?? [];
+    const filtered = pending.filter(
+      (p) => !(p.key === key && p.uploadId === uploadId),
+    );
+    await chrome.storage.local.set({ [S3_PENDING_UPLOADS_KEY]: filtered });
+  }
+
+  /**
+   * Abort any orphaned multipart uploads from previous service worker crashes.
+   * Call from service worker init(). No-ops if S3 isn't configured or no pending uploads exist.
+   */
+  static async cleanupOrphanedUploads(config?: S3Config): Promise<void> {
+    const data = await chrome.storage.local.get(S3_PENDING_UPLOADS_KEY);
+    const pending: PendingUpload[] = data[S3_PENDING_UPLOADS_KEY] ?? [];
+    if (pending.length === 0) return;
+
+    if (!config) {
+      logger.warn(
+        `Found ${pending.length} orphaned S3 multipart upload(s) but S3 is not configured — clearing records`,
+      );
+      await chrome.storage.local.set({ [S3_PENDING_UPLOADS_KEY]: [] });
+      return;
+    }
+
+    const client = new S3Client(config);
+    for (const { key, uploadId } of pending) {
+      await client.abortMultipart(key, uploadId).catch((e) =>
+        logger.warn(`Failed to abort orphaned multipart upload ${uploadId}:`, e),
+      );
+    }
+    await chrome.storage.local.set({ [S3_PENDING_UPLOADS_KEY]: [] });
+    logger.info(`Cleaned up ${pending.length} orphaned S3 multipart upload(s)`);
+  }
+
+  /** Build SigV4 Authorization header value */
+  private async buildAuthorization(
+    method: string,
+    url: URL,
+    headers: Record<string, string>,
+    payloadHash: string,
+    datetime: string,
+    date: string,
+  ): Promise<string> {
+    const region = this.config.region;
+    const service = "s3";
+
+    // Sorted canonical headers (lowercase names)
+    const signedHeaderNames = Object.keys(headers)
+      .map((k) => k.toLowerCase())
+      .sort();
+
+    const canonicalHeaders =
+      signedHeaderNames
+        .map((name) => {
+          const value =
+            headers[
+              Object.keys(headers).find((k) => k.toLowerCase() === name)!
+            ];
+          return `${name}:${value.trim()}`;
+        })
+        .join("\n") + "\n";
+
+    const signedHeaders = signedHeaderNames.join(";");
+
+    // Canonical query string (sorted)
+    const queryParams = Array.from(url.searchParams.entries())
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+      .join("&");
+
+    // url.pathname uses RFC 3986 encoding which leaves sub-delimiters like
+    // ( ) [ ] ! ' * unencoded, but SigV4 requires encoding everything except
+    // unreserved chars (A-Za-z0-9 - _ . ~). Decode then re-encode per SigV4.
+    const canonicalPath = sigV4EncodePath(decodeURIComponent(url.pathname));
+
+    const canonicalRequest = [
+      method,
+      canonicalPath,
+      queryParams,
+      canonicalHeaders,
+      signedHeaders,
+      payloadHash,
+    ].join("\n");
+
+    const credentialScope = `${date}/${region}/${service}/aws4_request`;
+    const stringToSign = [
+      "AWS4-HMAC-SHA256",
+      datetime,
+      credentialScope,
+      await sha256hex(canonicalRequest),
+    ].join("\n");
+
+    const signingKey = await deriveSigningKey(
+      this.config.secretAccessKey,
+      date,
+      region,
+      service,
+    );
+    const signature = buf2hex(await hmacSha256(signingKey, stringToSign));
+
+    return (
+      `AWS4-HMAC-SHA256 ` +
+      `Credential=${this.config.accessKeyId}/${credentialScope}, ` +
+      `SignedHeaders=${signedHeaders}, ` +
+      `Signature=${signature}`
+    );
+  }
+
+  private objectUrl(key: string): string {
+    if (this.config.endpoint) {
+      // Path-style: endpoint/bucket/key
+      const base = this.config.endpoint.replace(/\/$/, "");
+      return `${base}/${this.config.bucket}/${key}`;
+    }
+    // AWS virtual-hosted style
+    return `https://${this.config.bucket}.s3.${this.config.region}.amazonaws.com/${key}`;
+  }
+
+  /** Verify credentials and bucket access (lightweight HEAD on the bucket) */
+  async testConnection(): Promise<{ ok: boolean; error?: string }> {
+    try {
+      const url = this.bucketUrl();
+      const now = new Date();
+      const datetime = isoDatetime(now);
+      const date = datetime.slice(0, 8);
+      const payloadHash = await sha256hex("");
+
+      const headers: Record<string, string> = {
+        "x-amz-content-sha256": payloadHash,
+        "x-amz-date": datetime,
+        Host: new URL(url).host,
+      };
+      const authorization = await this.buildAuthorization(
+        "HEAD",
+        new URL(url),
+        headers,
+        payloadHash,
+        datetime,
+        date,
+      );
+      headers["Authorization"] = authorization;
+      delete headers["Host"];
+
+      const response = await fetch(url, { method: "HEAD", headers });
+      if (response.ok || response.status === 403) {
+        // 403 = bucket exists but no ListBucket permission — credentials are valid
+        return { ok: true };
+      }
+      return {
+        ok: false,
+        error: `HTTP ${response.status}: ${response.statusText}`,
+      };
+    } catch (err) {
+      return {
+        ok: false,
+        error: err instanceof Error ? err.message : String(err),
+      };
+    }
+  }
+
+  private bucketUrl(): string {
+    if (this.config.endpoint) {
+      const base = this.config.endpoint.replace(/\/$/, "");
+      return `${base}/${this.config.bucket}`;
+    }
+    return `https://${this.config.bucket}.s3.${this.config.region}.amazonaws.com`;
+  }
+}
+
+// ---- SigV4 URI encoding ----
+
+/** Encode a single URI component per SigV4: only A-Za-z0-9 - _ . ~ are unreserved. */
+function sigV4Encode(str: string): string {
+  return encodeURIComponent(str)
+    .replace(/!/g, "%21")
+    .replace(/'/g, "%27")
+    .replace(/\(/g, "%28")
+    .replace(/\)/g, "%29")
+    .replace(/\*/g, "%2A");
+}
+
+/** Encode a full path per SigV4, preserving '/' separators. */
+function sigV4EncodePath(rawPath: string): string {
+  return rawPath.split("/").map(sigV4Encode).join("/");
+}
+
+// ---- Crypto helpers ----
+
+function buf2hex(buffer: ArrayBuffer): string {
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+async function sha256hex(data: string | ArrayBuffer): Promise<string> {
+  const buf: BufferSource =
+    typeof data === "string" ? new TextEncoder().encode(data) : data;
+  return buf2hex(await crypto.subtle.digest("SHA-256", buf));
+}
+
+async function hmacSha256(
+  key: BufferSource,
+  data: string,
+): Promise<ArrayBuffer> {
+  const cryptoKey = await crypto.subtle.importKey(
+    "raw",
+    key,
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+  return crypto.subtle.sign("HMAC", cryptoKey, new TextEncoder().encode(data));
+}
+
+async function deriveSigningKey(
+  secretKey: string,
+  date: string,
+  region: string,
+  service: string,
+): Promise<ArrayBuffer> {
+  const kDate = await hmacSha256(
+    new TextEncoder().encode(`AWS4${secretKey}`),
+    date,
+  );
+  const kRegion = await hmacSha256(kDate, region);
+  const kService = await hmacSha256(kRegion, service);
+  return hmacSha256(kService, "aws4_request");
+}
+
+function isoDatetime(d: Date): string {
+  return d.toISOString().replace(/[-:]/g, "").slice(0, 15) + "Z";
+}
diff --git a/src/core/cloud/upload-manager.ts b/src/core/cloud/upload-manager.ts
index e168b13..c8b508e 100644
--- a/src/core/cloud/upload-manager.ts
+++ b/src/core/cloud/upload-manager.ts
@@ -1,86 +1,128 @@
 /**
- * Cloud upload orchestration
+ * Cloud upload orchestration — provider-agnostic registry.
  */
 
-import { GoogleDriveClient, UploadResult } from "./google-drive";
-import { DownloadState, DownloadStage } from "../types";
+import { GoogleDriveClient } from "./google-drive";
+import { S3Client } from "./s3-client";
+import { BaseCloudProvider, ProgressCallback } from "./base-cloud-provider";
+import { DownloadState, DownloadStage, StorageConfig } from "../types";
 import { UploadError } from "../utils/errors";
 import { logger } from "../utils/logger";
-import { StorageConfig } from "../types";
+import { CloudProvider } from "../../shared/messages";
+
+export interface CloudLinks {
+  googleDrive?: string; // webViewLink
+  s3?: string;          // object URL
+}
 
 export interface UploadManagerOptions {
-  config?: StorageConfig;
-  onProgress?: (state: DownloadState) => void;
+  config: StorageConfig;
+  onProgress?: (uploadedBytes: number, totalBytes: number) => void;
+  onStateUpdate?: (state: DownloadState) => Promise<void>;
 }
 
 export class UploadManager {
-  private googleDrive?: GoogleDriveClient;
-  private onProgress?: (state: DownloadState) => void;
-
-  constructor(options: UploadManagerOptions = {}) {
-    if (options.config?.googleDrive?.enabled) {
-      this.googleDrive = new GoogleDriveClient({
-        targetFolderId: options.config.googleDrive.targetFolderId,
-        createFolderIfNotExists:
-          options.config.googleDrive.createFolderIfNotExists,
-        folderName: options.config.googleDrive.folderName,
+  private readonly providers = new Map<CloudProvider, BaseCloudProvider>();
+  private readonly onProgress?: (uploaded: number, total: number) => void;
+  private readonly onStateUpdate?: (state: DownloadState) => Promise<void>;
+
+  constructor(options: UploadManagerOptions) {
+    const { config } = options;
+    this.onProgress = options.onProgress;
+    this.onStateUpdate = options.onStateUpdate;
+
+    if (config.googleDrive?.enabled) {
+      const drive = new GoogleDriveClient({
+        targetFolderId: config.googleDrive.targetFolderId,
+        createFolderIfNotExists: config.googleDrive.createFolderIfNotExists,
+        folderName: config.googleDrive.folderName,
       });
+      this.providers.set(drive.id, drive);
     }
 
-    this.onProgress = options.onProgress;
+    if (
+      config.s3?.enabled &&
+      config.s3.bucket &&
+      config.s3.region &&
+      config.s3.accessKeyId &&
+      config.s3.secretAccessKey
+    ) {
+      const s3 = new S3Client({
+        bucket: config.s3.bucket,
+        region: config.s3.region,
+        accessKeyId: config.s3.accessKeyId,
+        secretAccessKey: config.s3.secretAccessKey,
+        endpoint: config.s3.endpoint,
+        prefix: config.s3.prefix,
+      });
+      this.providers.set(s3.id, s3);
+    }
   }
 
   /**
-   * Upload file to configured cloud storage
+   * Fetch the blob from a blob URL and upload to the chosen provider.
+   * Must be called BEFORE the blob URL is revoked.
    */
-  async uploadFile(
-    blob: Blob,
+  async uploadFromBlobUrl(
+    blobUrl: string,
     filename: string,
-    downloadState?: DownloadState,
-  ): Promise<UploadResult | null> {
-    if (!this.googleDrive) {
-      logger.warn("Google Drive not configured");
-      return null;
+    downloadState: DownloadState,
+    provider: CloudProvider,
+  ): Promise<CloudLinks> {
+    if (!this.isConfigured()) {
+      return {};
     }
 
-    try {
-      if (downloadState) {
-        downloadState.progress.stage = DownloadStage.UPLOADING;
-        downloadState.progress.message = "Uploading to Google Drive...";
-        this.onProgress?.(downloadState);
-      }
+    const response = await fetch(blobUrl);
+    if (!response.ok) {
+      throw new UploadError(`Failed to read blob for upload: ${response.statusText}`);
+    }
+    const blob = await response.blob();
 
-      const result = await this.googleDrive.uploadFile(blob, filename);
+    return this.uploadBlob(blob, filename, downloadState, provider);
+  }
 
-      if (downloadState) {
-        downloadState.cloudId = result.fileId;
-        downloadState.progress.stage = DownloadStage.COMPLETED;
-        downloadState.progress.message = "Upload completed";
-        this.onProgress?.(downloadState);
-      }
+  /**
+   * Upload an already-fetched blob to a single chosen provider.
+   */
+  async uploadBlob(
+    blob: Blob,
+    filename: string,
+    downloadState: DownloadState,
+    provider: CloudProvider,
+    signal?: AbortSignal,
+  ): Promise<CloudLinks> {
+    const client = this.providers.get(provider);
+    if (!client) {
+      throw new UploadError(`Provider "${provider}" is not configured`);
+    }
 
-      logger.info(`File uploaded successfully: ${result.fileId}`);
-      return result;
-    } catch (error) {
-      logger.error("Upload failed:", error);
+    // Notify UPLOADING stage
+    downloadState.progress.stage = DownloadStage.UPLOADING;
+    downloadState.progress.message = "Uploading to cloud...";
+    downloadState.progress.percentage = 0;
+    await this.onStateUpdate?.(downloadState);
 
-      if (downloadState) {
-        downloadState.progress.stage = DownloadStage.FAILED;
-        downloadState.progress.error =
-          error instanceof Error ? error.message : String(error);
-        this.onProgress?.(downloadState);
+    const onProgress: ProgressCallback = (uploaded, total) => {
+      this.onProgress?.(uploaded, total);
+      const pct = total > 0 ? Math.round((uploaded / total) * 100) : 0;
+      if (downloadState.progress.percentage !== pct) {
+        downloadState.progress.percentage = pct;
+        downloadState.progress.message = `Uploading... ${pct}%`;
+        // Fire-and-forget — don't block the upload data flow
+        this.onStateUpdate?.(downloadState);
       }
+    };
+    const url = await client.upload(blob, filename, onProgress, signal);
 
-      throw error instanceof UploadError
-        ? error
-        : new UploadError(`Upload failed: ${error}`);
-    }
+    const links: CloudLinks = {};
+    links[provider] = url;
+    logger.info(`${provider} upload complete: ${url}`);
+
+    return links;
   }
 
-  /**
-   * Check if upload is configured
-   */
   isConfigured(): boolean {
-    return this.googleDrive !== undefined;
+    return this.providers.size > 0;
   }
 }
diff --git a/src/core/downloader/base-playlist-handler.ts b/src/core/downloader/base-playlist-handler.ts
index 94d8393..43a7a5e 100644
--- a/src/core/downloader/base-playlist-handler.ts
+++ b/src/core/downloader/base-playlist-handler.ts
@@ -64,6 +64,7 @@ export abstract class BasePlaylistHandler {
   protected readonly maxPollIntervalMs: number;
   protected readonly pollFraction: number;
 
+
   protected downloadId: string = "";
   protected bytesDownloaded: number = 0;
   protected totalBytes: number = 0;
diff --git a/src/core/downloader/download-manager.ts b/src/core/downloader/download-manager.ts
index 2d8dca0..706f54b 100644
--- a/src/core/downloader/download-manager.ts
+++ b/src/core/downloader/download-manager.ts
@@ -29,9 +29,6 @@ export interface DownloadManagerOptions {
   /** Optional callback for download progress updates */
   onProgress?: DownloadProgressCallback;
 
-  /** Whether to upload completed downloads to Google Drive @default false */
-  uploadToDrive?: boolean;
-
   /** FFmpeg processing timeout in milliseconds @default 900000 (15 minutes) */
   ffmpegTimeout?: number;
 
@@ -70,7 +67,6 @@ export interface DownloadManagerOptions {
 export class DownloadManager {
   private readonly maxConcurrent: number;
   private readonly onProgress?: DownloadProgressCallback;
-  private readonly uploadToDrive: boolean;
   private readonly directDownloadHandler: DirectDownloadHandler;
   private readonly hlsDownloadHandler: HlsDownloadHandler;
   private readonly m3u8DownloadHandler: M3u8DownloadHandler;
@@ -83,7 +79,6 @@ export class DownloadManager {
   constructor(options: DownloadManagerOptions = {}) {
     this.maxConcurrent = options.maxConcurrent || DEFAULT_MAX_CONCURRENT;
     this.onProgress = options.onProgress;
-    this.uploadToDrive = options.uploadToDrive || false;
     const ffmpegTimeout = options.ffmpegTimeout || DEFAULT_FFMPEG_TIMEOUT_MS;
 
     const sharedOptions = {
diff --git a/src/core/storage/secure-storage.ts b/src/core/storage/secure-storage.ts
new file mode 100644
index 0000000..cec5d33
--- /dev/null
+++ b/src/core/storage/secure-storage.ts
@@ -0,0 +1,92 @@
+/**
+ * Passphrase-based AES-GCM encryption for secrets stored in chrome.storage.local.
+ *
+ * Key derivation: PBKDF2 (SHA-256, 100 000 iterations) → AES-GCM 256-bit key.
+ * Passphrase is cached in chrome.storage.session so the user only enters it once
+ * per browser session (session storage is cleared on browser close).
+ *
+ * Zero external dependencies — uses only the Web Crypto API.
+ */
+
+const PBKDF2_ITERATIONS = 100_000;
+const SESSION_KEY = "s3_passphrase";
+
+export interface EncryptedBlob {
+  encrypted: string; // base64 ciphertext
+  iv: string;        // base64 IV (12 bytes)
+  salt: string;      // base64 PBKDF2 salt (16 bytes)
+}
+
+function toBase64(buf: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buf)));
+}
+
+function fromBase64(b64: string): Uint8Array<ArrayBuffer> {
+  const binary = atob(b64);
+  const buf = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) buf[i] = binary.charCodeAt(i);
+  return buf;
+}
+
+async function deriveKey(passphrase: string, salt: Uint8Array<ArrayBuffer>): Promise<CryptoKey> {
+  const enc = new TextEncoder();
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    enc.encode(passphrase),
+    "PBKDF2",
+    false,
+    ["deriveKey"],
+  );
+  return crypto.subtle.deriveKey(
+    { name: "PBKDF2", salt: salt as BufferSource, iterations: PBKDF2_ITERATIONS, hash: "SHA-256" },
+    keyMaterial,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"],
+  );
+}
+
+export class SecureStorage {
+  static async encrypt(plaintext: string, passphrase: string): Promise<EncryptedBlob> {
+    const salt = crypto.getRandomValues(new Uint8Array(16)) as Uint8Array<ArrayBuffer>;
+    const iv = crypto.getRandomValues(new Uint8Array(12)) as Uint8Array<ArrayBuffer>;
+    const key = await deriveKey(passphrase, salt);
+    const enc = new TextEncoder();
+    const ciphertext = await crypto.subtle.encrypt(
+      { name: "AES-GCM", iv: iv.buffer },
+      key,
+      enc.encode(plaintext),
+    );
+    return {
+      encrypted: toBase64(ciphertext),
+      iv: toBase64(iv.buffer),
+      salt: toBase64(salt.buffer),
+    };
+  }
+
+  static async decrypt(blob: EncryptedBlob, passphrase: string): Promise<string> {
+    const salt = fromBase64(blob.salt);
+    const iv = fromBase64(blob.iv);
+    const ciphertext = fromBase64(blob.encrypted);
+    const key = await deriveKey(passphrase, salt);
+    const plaintext = await crypto.subtle.decrypt(
+      { name: "AES-GCM", iv: iv.buffer },
+      key,
+      ciphertext.buffer,
+    );
+    return new TextDecoder().decode(plaintext);
+  }
+
+  static async setPassphrase(passphrase: string): Promise<void> {
+    await chrome.storage.session.set({ [SESSION_KEY]: passphrase });
+  }
+
+  static async getPassphrase(): Promise<string | null> {
+    const result = await chrome.storage.session.get(SESSION_KEY);
+    return (result[SESSION_KEY] as string) ?? null;
+  }
+
+  static async clearPassphrase(): Promise<void> {
+    await chrome.storage.session.remove(SESSION_KEY);
+  }
+}
diff --git a/src/core/storage/settings.ts b/src/core/storage/settings.ts
index 0d25cc3..97725db 100644
--- a/src/core/storage/settings.ts
+++ b/src/core/storage/settings.ts
@@ -6,7 +6,7 @@
  * need null-checks or scattered `?? DEFAULT_X` fallbacks.
  */
 
-import { StorageConfig } from "../types";
+import { StorageConfig, EncryptedBlob } from "../types";
 import { ChromeStorage } from "./chrome-storage";
 import {
   DEFAULT_MAX_CONCURRENT,
@@ -44,6 +44,7 @@ export interface AppSettings {
     endpoint?: string;
     accessKeyId?: string;
     secretAccessKey?: string;
+    secretKeyEncrypted?: EncryptedBlob;
     prefix?: string;
   };
 
@@ -91,6 +92,7 @@ export async function loadSettings(): Promise<AppSettings> {
       endpoint: raw?.s3?.endpoint,
       accessKeyId: raw?.s3?.accessKeyId,
       secretAccessKey: raw?.s3?.secretAccessKey,
+      secretKeyEncrypted: raw?.s3?.secretKeyEncrypted,
       prefix: raw?.s3?.prefix,
     },
 
diff --git a/src/core/types/index.ts b/src/core/types/index.ts
index 60e3645..37cf396 100644
--- a/src/core/types/index.ts
+++ b/src/core/types/index.ts
@@ -74,12 +74,23 @@ export interface DownloadState {
   progress: DownloadProgress;
   localPath?: string;
   cloudId?: string;
+  cloudLinks?: {
+    googleDrive?: string; // webViewLink
+    s3?: string;          // public URL or s3:// URI
+  };
+  uploadError?: string;     // last upload failure message
   isManual?: boolean; // Indicates if download was started from manual/manifest tab
   chromeDownloadId?: number; // Chrome downloads API ID for reliable cancellation (only set when Chrome API is used)
   createdAt: number;
   updatedAt: number;
 }
 
+export interface EncryptedBlob {
+  encrypted: string; // base64 ciphertext
+  iv: string;        // base64 IV
+  salt: string;      // base64 PBKDF2 salt
+}
+
 export interface StorageConfig {
   googleDrive?: {
     enabled: boolean;
@@ -96,7 +107,8 @@ export interface StorageConfig {
     region?: string;
     endpoint?: string; // For S3-compatible providers (Cloudflare R2, Backblaze, etc.)
     accessKeyId?: string;
-    secretAccessKey?: string;
+    secretAccessKey?: string;      // plaintext fallback (no passphrase set)
+    secretKeyEncrypted?: EncryptedBlob; // AES-GCM encrypted secret key (passphrase mode)
     prefix?: string;
   };
   recording?: {
diff --git a/src/core/utils/blob-utils.ts b/src/core/utils/blob-utils.ts
index e35a9ff..81be384 100644
--- a/src/core/utils/blob-utils.ts
+++ b/src/core/utils/blob-utils.ts
@@ -74,12 +74,15 @@ export async function saveBlobUrlToFile(
             if (delta.state.current === "complete") {
               clearTimeout(timeoutId);
               chrome.downloads.onChanged.removeListener(onChange);
-              revokeBlobUrl(blobUrl);
-              // Retrieve filename from the completed download
-              chrome.downloads.search({ id: downloadId }, (results) => {
-                const item = results?.[0];
-                resolve(item?.filename || filename);
-              });
+
+              const finish = async () => {
+                revokeBlobUrl(blobUrl);
+                chrome.downloads.search({ id: downloadId }, (results) => {
+                  const item = results?.[0];
+                  resolve(item?.filename || filename);
+                });
+              };
+              finish();
             } else if (delta.state.current === "interrupted") {
               clearTimeout(timeoutId);
               chrome.downloads.onChanged.removeListener(onChange);
diff --git a/src/options/options.html b/src/options/options.html
index 808d231..5e15eaf 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -399,41 +399,20 @@
     }
 
 
-    /* ---- Provider Tabs ---- */
-    .provider-tabs {
-      display: flex;
-      gap: 4px;
-      padding: 4px;
-      background: var(--surface-2);
-      border-radius: var(--radius-sm);
-      margin-bottom: 20px;
-      width: fit-content;
-    }
-
-    .provider-tab {
-      padding: 6px 14px;
-      border: none;
-      border-radius: calc(var(--radius-sm) - 2px);
-      font-family: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      background: transparent;
-      color: var(--text-secondary);
-      transition: all 0.15s;
+    /* ---- Provider / Advanced Panels ---- */
+    .provider-panel {
+      display: none;
     }
 
-    .provider-tab.active {
-      background: var(--surface-1);
-      color: var(--text-primary);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    .provider-panel.active {
+      display: block;
     }
 
-    .provider-panel {
+    .advanced-panel {
       display: none;
     }
 
-    .provider-panel.active {
+    .advanced-panel.active {
       display: block;
     }
 
@@ -680,6 +659,26 @@
       color: var(--text-primary);
     }
 
+    .history-cancel-upload {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: var(--radius-sm);
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--text-secondary);
+      cursor: pointer;
+      padding: 0;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .history-cancel-upload:hover {
+      background: var(--surface-2);
+      color: var(--danger, #f38ba8);
+    }
+
     .history-menu {
       display: none;
       position: absolute;
@@ -909,6 +908,15 @@
           <span>Advanced</span>
         </button>
 
+        <button class="nav-item" data-view="about" title="About">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="8" x2="12" y2="12"></line>
+            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+          </svg>
+          <span>About</span>
+        </button>
+
       </nav>
 
       <div class="sidebar-footer">
@@ -985,9 +993,9 @@ <h1>Cloud Providers</h1>
           <p>Connect cloud storage for automatic upload after download.</p>
         </div>
 
-        <div class="provider-tabs">
-          <button class="provider-tab active" data-provider="google-drive">Google Drive</button>
-          <button class="provider-tab" data-provider="s3">S3 / Compatible</button>
+        <div class="seg-tabs">
+          <button class="provider-tab seg-tab active" data-provider="google-drive">Google Drive</button>
+          <button class="provider-tab seg-tab" data-provider="s3">S3 / Compatible</button>
         </div>
 
         <!-- Google Drive Panel -->
@@ -998,10 +1006,27 @@ <h1>Cloud Providers</h1>
                 <input type="checkbox" id="drive-enabled" class="form-checkbox">
                 Enable Google Drive uploads
               </label>
-              <div class="form-help">Automatically upload downloaded videos to Google Drive.</div>
+              <div class="form-help">Connect Google Drive to upload downloaded videos.</div>
             </div>
 
             <div id="drive-settings" style="display:none;">
+
+              <div class="form-group">
+                <label class="form-label" for="drive-client-id">OAuth Client ID</label>
+                <input type="text" id="drive-client-id" class="form-input" placeholder="xxxxxxxxx.apps.googleusercontent.com" />
+                <!-- Google Drive requires users to create their own OAuth credentials (free). -->
+                <div class="form-help">
+                  To use Google Drive you need your own OAuth credentials (free):
+                  <ol style="margin:6px 0 0 16px;padding:0;line-height:1.6;">
+                    <li>Go to <a href="https://console.cloud.google.com/apis/library/drive.googleapis.com" target="_blank" rel="noopener">Google Cloud Console → APIs</a> and enable the <strong>Google Drive API</strong>.</li>
+                    <li>Go to <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener">Credentials</a> → <strong>Create Credentials</strong> → <strong>OAuth client ID</strong>.</li>
+                    <li>Set application type to <strong>Web application</strong>.</li>
+                    <li>Under <strong>Authorized redirect URIs</strong>, add: <code id="drive-redirect-uri"></code></li>
+                    <li>Copy the <strong>Client ID</strong> and paste it below.</li>
+                  </ol>
+                </div>
+              </div>
+
               <div class="form-group">
                 <label class="form-label" for="drive-folder-name">Folder Name</label>
                 <input type="text" id="drive-folder-name" class="form-input" placeholder="MediaBridge Uploads" />
@@ -1034,21 +1059,29 @@ <h1>Cloud Providers</h1>
 
         <!-- S3 Panel -->
         <div id="provider-s3" class="provider-panel">
-          <div class="coming-soon-note">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px;">
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="12" y1="8" x2="12" y2="12"></line>
-              <line x1="12" y1="16" x2="12.01" y2="16"></line>
-            </svg>
-            <span>S3 upload functionality is planned. You can save your credentials now, but uploads won't be triggered until a future release.</span>
-          </div>
-
           <div class="section">
             <div class="form-group">
               <label class="form-label">
                 <input type="checkbox" id="s3-enabled" class="form-checkbox">
                 Enable S3 uploads
               </label>
+              <div class="form-help">Upload downloaded videos to any S3-compatible storage (AWS S3, Cloudflare R2, Backblaze B2, etc.).</div>
+            </div>
+
+            <div id="s3-settings" style="display:none;">
+
+
+            <div class="form-group">
+              <label class="form-label" for="s3-provider-preset">Provider Preset</label>
+              <select id="s3-provider-preset" class="form-input">
+                <option value="">Custom / AWS S3</option>
+                <option value="r2">Cloudflare R2</option>
+                <option value="b2">Backblaze B2</option>
+                <option value="wasabi">Wasabi</option>
+                <option value="do">DigitalOcean Spaces</option>
+                <option value="minio">MinIO (self-hosted)</option>
+              </select>
+              <div class="form-help">Select a preset to auto-fill the endpoint template.</div>
             </div>
 
             <div class="form-group">
@@ -1064,7 +1097,7 @@ <h1>Cloud Providers</h1>
             <div class="form-group">
               <label class="form-label" for="s3-endpoint">Endpoint (S3-compatible)</label>
               <input type="text" id="s3-endpoint" class="form-input" placeholder="https://s3.example.com (leave empty for AWS)" />
-              <div class="form-help">Custom endpoint for Cloudflare R2, Backblaze B2, MinIO, etc.</div>
+              <div class="form-help">Custom endpoint for Cloudflare R2, Backblaze B2, MinIO, etc. Leave empty for AWS S3.</div>
             </div>
 
             <div class="form-group">
@@ -1075,6 +1108,18 @@ <h1>Cloud Providers</h1>
             <div class="form-group">
               <label class="form-label" for="s3-secret-key">Secret Access Key</label>
               <input type="password" id="s3-secret-key" class="form-input" placeholder="••••••••••••••••••••••••••••••••" autocomplete="off" />
+              <div class="form-help">Leave blank to keep the currently stored key.</div>
+            </div>
+
+            <div class="form-group">
+              <label class="form-label" for="s3-passphrase">Encryption Passphrase <span style="font-weight:400;color:var(--text-2)">(optional)</span></label>
+              <input type="password" id="s3-passphrase" class="form-input" placeholder="Leave blank to store key unencrypted" autocomplete="new-password" />
+              <div class="form-help">When set, your secret key is encrypted with AES-GCM before being written to disk. You will re-enter this passphrase once per browser session.</div>
+            </div>
+
+            <div class="form-group" id="s3-passphrase-confirm-group" style="display:none;">
+              <label class="form-label" for="s3-passphrase-confirm">Confirm Passphrase</label>
+              <input type="password" id="s3-passphrase-confirm" class="form-input" placeholder="Repeat passphrase" autocomplete="new-password" />
             </div>
 
             <div class="form-group">
@@ -1082,6 +1127,25 @@ <h1>Cloud Providers</h1>
               <input type="text" id="s3-prefix" class="form-input" placeholder="videos/" />
               <div class="form-help">Prefix added to all uploaded object keys.</div>
             </div>
+
+            <div class="form-group">
+              <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
+                <button id="s3-test-connection" class="btn btn-secondary">Test Connection</button>
+                <span id="s3-test-result" style="font-size:12px;"></span>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <details>
+                <summary style="cursor:pointer; font-size:13px; font-weight:500; color:var(--text-secondary);">CORS configuration (required for browser uploads)</summary>
+                <div id="s3-cors-helper" style="margin-top:8px;">
+                  <div class="form-help" style="margin-bottom:6px;">Add this CORS policy to your bucket. Replace <code>YOUR_EXTENSION_ID</code> with your extension ID (find it at chrome://extensions).</div>
+                  <pre id="s3-cors-json" style="background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:10px;font-size:11px;overflow-x:auto;white-space:pre-wrap;"></pre>
+                  <button id="s3-copy-cors" class="btn btn-secondary" style="margin-top:6px; font-size:12px;">Copy CORS Config</button>
+                </div>
+              </details>
+            </div>
+            </div><!-- /#s3-settings -->
           </div>
 
           <div class="btn-row">
@@ -1246,118 +1310,96 @@ <h1>Advanced</h1>
           <p>Fine-tune retry behaviour, detection caches, and internal write frequency.</p>
         </div>
 
-        <div class="section">
-          <h2 class="section-title">Retry &amp; Reliability</h2>
-          <div class="form-group">
-            <label class="form-label" for="max-retries">Max segment retries</label>
-            <input
-              type="number"
-              id="max-retries"
-              class="form-input"
-              min="1"
-              max="10"
-              value="3"
-              style="max-width: 120px;"
-            />
-            <div class="form-help">Number of times to retry a failed segment or manifest fetch (1–10).</div>
-          </div>
-          <div class="form-group">
-            <label class="form-label" for="retry-delay">Retry initial delay (s)</label>
-            <input
-              type="number"
-              id="retry-delay"
-              class="form-input"
-              min="0.05"
-              max="1"
-              step="0.05"
-              value="0.1"
-              style="max-width: 120px;"
-            />
-            <div class="form-help">First backoff wait after a fetch failure (0.05–1 s).</div>
-          </div>
-          <div class="form-group">
-            <label class="form-label" for="retry-backoff">Retry backoff multiplier</label>
-            <input
-              type="number"
-              id="retry-backoff"
-              class="form-input"
-              min="1.0"
-              max="3.0"
-              step="0.05"
-              value="1.15"
-              style="max-width: 120px;"
-            />
-            <div class="form-help">Exponential growth factor applied after each retry (1.0–3.0).</div>
+        <div class="seg-tabs">
+          <button class="advanced-tab seg-tab active" data-tab="retry">Retry &amp; Reliability</button>
+          <button class="advanced-tab seg-tab" data-tab="caches">Detection Caches</button>
+          <button class="advanced-tab seg-tab" data-tab="performance">Performance</button>
+        </div>
+
+        <!-- Retry & Reliability Panel -->
+        <div id="advanced-retry" class="advanced-panel active">
+          <div class="section">
+            <div class="form-group">
+              <label class="form-label" for="max-retries">Max segment retries</label>
+              <input type="number" id="max-retries" class="form-input" min="1" max="10" value="3" style="max-width: 120px;" />
+              <div class="form-help">Number of times to retry a failed segment or manifest fetch (1–10).</div>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="retry-delay">Retry initial delay (s)</label>
+              <input type="number" id="retry-delay" class="form-input" min="0.05" max="1" step="0.05" value="0.1" style="max-width: 120px;" />
+              <div class="form-help">First backoff wait after a fetch failure (0.05–1 s).</div>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="retry-backoff">Retry backoff multiplier</label>
+              <input type="number" id="retry-backoff" class="form-input" min="1.0" max="3.0" step="0.05" value="1.15" style="max-width: 120px;" />
+              <div class="form-help">Exponential growth factor applied after each retry (1.0–3.0).</div>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="failure-rate">Fragment failure tolerance (%)</label>
+              <input type="number" id="failure-rate" class="form-input" min="5" max="50" step="1" value="10" style="max-width: 120px;" />
+              <div class="form-help">Download is aborted when more than this percentage of segments fail (5–50%).</div>
+            </div>
           </div>
-          <div class="form-group">
-            <label class="form-label" for="failure-rate">Fragment failure tolerance (%)</label>
-            <input
-              type="number"
-              id="failure-rate"
-              class="form-input"
-              min="5"
-              max="50"
-              step="1"
-              value="10"
-              style="max-width: 120px;"
-            />
-            <div class="form-help">Download is aborted when more than this percentage of segments fail (5–50%).</div>
+          <div class="btn-row">
+            <button id="save-advanced-settings" class="btn btn-primary">Save Settings</button>
+            <button id="reset-advanced-settings" class="btn btn-danger">Reset to defaults</button>
           </div>
         </div>
 
-        <div class="section">
-          <h2 class="section-title">Detection Caches</h2>
-          <div class="form-group">
-            <label class="form-label" for="detection-cache-size">URL deduplication cache size</label>
-            <input
-              type="number"
-              id="detection-cache-size"
-              class="form-input"
-              min="100"
-              max="2000"
-              step="50"
-              value="500"
-              style="max-width: 140px;"
-            />
-            <div class="form-help">Max distinct URL path keys tracked per page by HLS and DASH handlers (100–2 000).</div>
+        <!-- Detection Caches Panel -->
+        <div id="advanced-caches" class="advanced-panel">
+          <div class="section">
+            <div class="form-group">
+              <label class="form-label" for="detection-cache-size">URL deduplication cache size</label>
+              <input type="number" id="detection-cache-size" class="form-input" min="100" max="2000" step="50" value="500" style="max-width: 140px;" />
+              <div class="form-help">Max distinct URL path keys tracked per page by HLS and DASH handlers (100–2 000).</div>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="master-playlist-cache-size">Master playlist cache size</label>
+              <input type="number" id="master-playlist-cache-size" class="form-input" min="10" max="200" step="5" value="50" style="max-width: 140px;" />
+              <div class="form-help">Max HLS master playlists held in memory per page (10–200).</div>
+            </div>
           </div>
-          <div class="form-group">
-            <label class="form-label" for="master-playlist-cache-size">Master playlist cache size</label>
-            <input
-              type="number"
-              id="master-playlist-cache-size"
-              class="form-input"
-              min="10"
-              max="200"
-              step="5"
-              value="50"
-              style="max-width: 140px;"
-            />
-            <div class="form-help">Max HLS master playlists held in memory per page (10–200).</div>
+          <div class="btn-row">
+            <button id="save-advanced-settings-caches" class="btn btn-primary">Save Settings</button>
+            <button id="reset-advanced-settings-caches" class="btn btn-danger">Reset to defaults</button>
           </div>
         </div>
 
-        <div class="section">
-          <h2 class="section-title">Performance</h2>
-          <div class="form-group">
-            <label class="form-label" for="db-sync-interval">IndexedDB sync interval (s)</label>
-            <input
-              type="number"
-              id="db-sync-interval"
-              class="form-input"
-              min="0.1"
-              max="2"
-              step="0.1"
-              value="0.5"
-              style="max-width: 140px;"
-            />
-            <div class="form-help">How often download state is written to IndexedDB during segment downloads. Lower values increase write frequency.</div>
+        <!-- Performance Panel -->
+        <div id="advanced-performance" class="advanced-panel">
+          <div class="section">
+            <div class="form-group">
+              <label class="form-label" for="db-sync-interval">IndexedDB sync interval (s)</label>
+              <input type="number" id="db-sync-interval" class="form-input" min="0.1" max="2" step="0.1" value="0.5" style="max-width: 140px;" />
+              <div class="form-help">How often download state is written to IndexedDB during segment downloads. Lower values increase write frequency.</div>
+            </div>
+          </div>
+          <div class="btn-row">
+            <button id="save-advanced-settings-perf" class="btn btn-primary">Save Settings</button>
+            <button id="reset-advanced-settings-perf" class="btn btn-danger">Reset to defaults</button>
           </div>
         </div>
+      </div>
 
-        <div class="btn-row">
-          <button id="save-advanced-settings" class="btn btn-primary">Save Settings</button>
-          <button id="reset-advanced-settings" class="btn btn-danger">Reset to defaults</button>
+      <!-- ===== About View ===== -->
+      <div id="view-about" class="view">
+        <div class="view-header">
+          <h2 class="view-title">About</h2>
+        </div>
+        <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 48px 24px; gap: 16px; text-align:center;">
+          <img src="/icons/icon-128.png" alt="Media Bridge" width="72" height="72" style="border-radius:16px;">
+          <div>
+            <h3 style="font-size:20px; font-weight:700; margin:0 0 4px;">Media Bridge</h3>
+            <p style="font-size:13px; color:var(--text-secondary); margin:0;">Version <span id="about-version">—</span></p>
+          </div>
+          <p style="font-size:14px; color:var(--text-secondary); margin:0;">
+            Download HLS, DASH, and direct media streams directly from your browser.
+          </p>
+          <p style="font-size:14px; margin:0;">
+            Made with ♥ by
+            <a href="https://github.com/jvillegasd" target="_blank" rel="noopener noreferrer" style="color:var(--accent); text-decoration:none; font-weight:500;">jvillegasd</a>
+          </p>
         </div>
       </div>
 
diff --git a/src/options/options.ts b/src/options/options.ts
index 8751b16..7e5db8f 100644
--- a/src/options/options.ts
+++ b/src/options/options.ts
@@ -5,9 +5,11 @@
 
 import { ChromeStorage } from "../core/storage/chrome-storage";
 import { loadSettings } from "../core/storage/settings";
+import { SecureStorage } from "../core/storage/secure-storage";
 import { GoogleAuth, GOOGLE_DRIVE_SCOPES } from "../core/cloud/google-auth";
-import { StorageConfig, DownloadState, DownloadStage, VideoMetadata } from "../core/types";
-import { MessageType } from "../shared/messages";
+import { S3Client } from "../core/cloud/s3-client";
+import { StorageConfig, EncryptedBlob, DownloadState, DownloadStage, VideoMetadata } from "../core/types";
+import { MessageType, CloudProvider } from "../shared/messages";
 import {
   getAllDownloads,
   getDownload,
@@ -15,6 +17,7 @@ import {
   bulkDeleteDownloads,
   clearAllDownloads,
 } from "../core/database/downloads";
+import { storeChunk } from "../core/database/chunks";
 import {
   DEFAULT_MAX_CONCURRENT,
   STORAGE_CONFIG_KEY,
@@ -63,6 +66,7 @@ const FINISHED_STAGES = new Set([
   DownloadStage.COMPLETED,
   DownloadStage.FAILED,
   DownloadStage.CANCELLED,
+  DownloadStage.UPLOADING,
 ]);
 
 // ─────────────────────────────────────────────
@@ -76,7 +80,7 @@ function init(): void {
 
   // Check URL hash to navigate directly to a view (e.g. opened via history button)
   const hash = location.hash.slice(1);
-  const validViews = new Set(["history", "cloud-providers", "recording", "notifications", "advanced"]);
+  const validViews = new Set(["history", "cloud-providers", "recording", "notifications", "advanced", "about"]);
   switchView(validViews.has(hash) ? hash : "download-settings");
 }
 
@@ -120,6 +124,16 @@ function switchView(viewId: string): void {
   if (viewId === "recording") loadRecordingSettings();
   if (viewId === "notifications") loadNotificationSettings();
   if (viewId === "advanced") loadAdvancedSettings();
+  if (viewId === "about") loadAboutSection();
+}
+
+// ─────────────────────────────────────────────
+// Section: About
+// ─────────────────────────────────────────────
+
+function loadAboutSection(): void {
+  const el = document.getElementById("about-version");
+  if (el) el.textContent = chrome.runtime.getManifest().version;
 }
 
 // ─────────────────────────────────────────────
@@ -238,18 +252,42 @@ function setupCloudProviderTabs(): void {
   });
 }
 
+let advancedTabsInitialized = false;
+
+function setupAdvancedTabs(): void {
+  if (advancedTabsInitialized) return;
+  advancedTabsInitialized = true;
+
+  document.querySelectorAll<HTMLButtonElement>(".advanced-tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      const tabId = tab.dataset.tab;
+      if (!tabId) return;
+
+      document.querySelectorAll(".advanced-tab").forEach((t) => t.classList.remove("active"));
+      document.querySelectorAll(".advanced-panel").forEach((p) => p.classList.remove("active"));
+
+      tab.classList.add("active");
+      document.getElementById(`advanced-${tabId}`)?.classList.add("active");
+    });
+  });
+}
+
 // -- Google Drive --
 
 async function loadDriveSettings(): Promise<void> {
   const config = await loadSettings();
 
   const enabledCb = document.getElementById("drive-enabled") as HTMLInputElement;
+  const clientIdIn = document.getElementById("drive-client-id") as HTMLInputElement;
   const folderNameIn = document.getElementById("drive-folder-name") as HTMLInputElement;
   const folderIdIn = document.getElementById("drive-folder-id") as HTMLInputElement;
+  const redirectUriEl = document.getElementById("drive-redirect-uri");
 
   enabledCb.checked = config.googleDrive.enabled;
+  clientIdIn.value = (await GoogleAuth.getClientId()) ?? "";
   folderNameIn.value = config.googleDrive.folderName;
   folderIdIn.value = config.googleDrive.targetFolderId ?? "";
+  if (redirectUriEl) redirectUriEl.textContent = chrome.identity.getRedirectURL();
 
   const driveSettingsEl = document.getElementById("drive-settings");
   if (driveSettingsEl)
@@ -290,11 +328,19 @@ async function checkAuthStatus(): Promise<void> {
 
 async function handleAuth(): Promise<void> {
   const btn = document.getElementById("auth-btn") as HTMLButtonElement;
+  const clientIdIn = document.getElementById("drive-client-id") as HTMLInputElement;
+  const clientId = clientIdIn.value.trim();
+  if (!clientId) {
+    markInvalid(clientIdIn, "Enter your OAuth Client ID before signing in.");
+    return;
+  }
   btn.disabled = true;
   btn.textContent = "Authenticating…";
   try {
+    await GoogleAuth.setClientId(clientId);
     await GoogleAuth.authenticate(GOOGLE_DRIVE_SCOPES);
-    showStatus("Authenticated with Google.", "success");
+    await persistDriveSettings(true);
+    showStatus("Authenticated and settings saved.", "success");
     await checkAuthStatus();
   } catch (err) {
     showStatus(`Authentication failed: ${errorMsg(err)}`, "error");
@@ -314,24 +360,46 @@ async function handleSignOut(): Promise<void> {
   }
 }
 
+/**
+ * Persist current Drive form values to storage.
+ * If enabledOverride is provided, it overrides the checkbox value.
+ * Returns false if validation fails.
+ */
+async function persistDriveSettings(enabledOverride?: boolean): Promise<boolean> {
+  const enabledCb = document.getElementById("drive-enabled") as HTMLInputElement;
+  const clientIdIn = document.getElementById("drive-client-id") as HTMLInputElement;
+  const folderNameIn = document.getElementById("drive-folder-name") as HTMLInputElement;
+  const folderIdIn = document.getElementById("drive-folder-id") as HTMLInputElement;
+
+  const enabled = enabledOverride ?? enabledCb.checked;
+  const clientId = clientIdIn.value.trim();
+  if (enabled && !clientId) {
+    markInvalid(clientIdIn, "OAuth Client ID is required when Google Drive is enabled.");
+    return false;
+  }
+
+  await GoogleAuth.setClientId(clientId);
+
+  if (enabledOverride !== undefined) enabledCb.checked = enabled;
+
+  const config = (await ChromeStorage.get<StorageConfig>(STORAGE_CONFIG_KEY)) ?? {};
+  config.googleDrive = {
+    enabled,
+    folderName: folderNameIn.value || DEFAULT_GOOGLE_DRIVE_FOLDER_NAME,
+    targetFolderId: folderIdIn.value || undefined,
+    createFolderIfNotExists: true,
+  };
+  await ChromeStorage.set(STORAGE_CONFIG_KEY, config);
+  return true;
+}
+
 async function saveDriveSettings(): Promise<void> {
   const btn = document.getElementById("save-drive-settings") as HTMLButtonElement;
   btn.disabled = true;
   btn.textContent = "Saving…";
 
   try {
-    const enabledCb = document.getElementById("drive-enabled") as HTMLInputElement;
-    const folderNameIn = document.getElementById("drive-folder-name") as HTMLInputElement;
-    const folderIdIn = document.getElementById("drive-folder-id") as HTMLInputElement;
-
-    const config = (await ChromeStorage.get<StorageConfig>(STORAGE_CONFIG_KEY)) ?? {};
-    config.googleDrive = {
-      enabled: enabledCb.checked,
-      folderName: folderNameIn.value || DEFAULT_GOOGLE_DRIVE_FOLDER_NAME,
-      targetFolderId: folderIdIn.value || undefined,
-      createFolderIfNotExists: true,
-    };
-    await ChromeStorage.set(STORAGE_CONFIG_KEY, config);
+    if (!(await persistDriveSettings())) return;
     showStatus("Settings saved.", "success");
   } catch (err) {
     showStatus(`Save failed: ${errorMsg(err)}`, "error");
@@ -343,22 +411,156 @@ async function saveDriveSettings(): Promise<void> {
 
 // -- S3 --
 
+const S3_ENDPOINT_PRESETS: Record<string, { endpoint: string; region: string }> = {
+  r2: { endpoint: "https://<ACCOUNT_ID>.r2.cloudflarestorage.com", region: "auto" },
+  b2: { endpoint: "https://s3.<REGION>.backblazeb2.com", region: "us-west-004" },
+  wasabi: { endpoint: "https://s3.<REGION>.wasabisys.com", region: "us-east-1" },
+  do: { endpoint: "https://<REGION>.digitaloceanspaces.com", region: "nyc3" },
+  minio: { endpoint: "https://your-minio-server.example.com", region: "us-east-1" },
+};
+
 async function loadS3Settings(): Promise<void> {
   const { s3 } = await loadSettings();
 
-  const get = (id: string) => document.getElementById(id) as HTMLInputElement;
+  const inp = (id: string) => document.getElementById(id) as HTMLInputElement;
+
+  const enabledCb = inp("s3-enabled");
+  enabledCb.checked = s3.enabled;
+
+  const s3SettingsEl = document.getElementById("s3-settings");
+  if (s3SettingsEl)
+    s3SettingsEl.style.display = enabledCb.checked ? "block" : "none";
+
+  enabledCb.addEventListener("change", () => {
+    if (s3SettingsEl) s3SettingsEl.style.display = enabledCb.checked ? "block" : "none";
+  });
+
+  inp("s3-bucket").value = s3.bucket ?? "";
+  inp("s3-region").value = s3.region ?? "";
+  inp("s3-endpoint").value = s3.endpoint ?? "";
+  inp("s3-access-key").value = s3.accessKeyId ?? "";
 
-  get("s3-enabled").checked = s3.enabled;
-  get("s3-bucket").value = s3.bucket ?? "";
-  get("s3-region").value = s3.region ?? "";
-  get("s3-endpoint").value = s3.endpoint ?? "";
-  get("s3-access-key").value = s3.accessKeyId ?? "";
-  get("s3-secret-key").value = s3.secretAccessKey ?? "";
-  get("s3-prefix").value = s3.prefix ?? "";
+  // Show placeholder when secret key is stored encrypted
+  if (s3.secretKeyEncrypted) {
+    inp("s3-secret-key").value = "";
+    inp("s3-secret-key").placeholder = "••••••••  (encrypted — leave blank to keep)";
+  } else {
+    inp("s3-secret-key").value = s3.secretAccessKey ?? "";
+  }
+
+  inp("s3-prefix").value = s3.prefix ?? "";
+  inp("s3-passphrase").value = "";
+  inp("s3-passphrase-confirm").value = "";
+
+  const confirmGroup = document.getElementById("s3-passphrase-confirm-group") as HTMLElement;
+  inp("s3-passphrase").addEventListener("input", () => {
+    confirmGroup.style.display = inp("s3-passphrase").value ? "block" : "none";
+  });
+
+  // Provider preset selector
+  const presetSel = document.getElementById("s3-provider-preset") as HTMLSelectElement;
+  if (presetSel) {
+    presetSel.addEventListener("change", () => {
+      const preset = S3_ENDPOINT_PRESETS[presetSel.value];
+      if (preset) {
+        inp("s3-endpoint").value = preset.endpoint;
+        inp("s3-region").value = preset.region;
+      }
+    });
+  }
+
+  // Render CORS config helper
+  const corsEl = document.getElementById("s3-cors-json");
+  if (corsEl) {
+    const extId = chrome.runtime.id;
+    const corsConfig = JSON.stringify([{
+      AllowedHeaders: ["*"],
+      AllowedMethods: ["PUT", "POST", "HEAD", "DELETE"],
+      AllowedOrigins: [`chrome-extension://${extId}`],
+      ExposeHeaders: ["ETag"],
+    }], null, 2);
+    corsEl.textContent = corsConfig;
+  }
 
+  document.getElementById("s3-copy-cors")?.addEventListener("click", async () => {
+    const text = document.getElementById("s3-cors-json")?.textContent ?? "";
+    await navigator.clipboard.writeText(text);
+    const btn = document.getElementById("s3-copy-cors") as HTMLButtonElement;
+    btn.textContent = "Copied!";
+    setTimeout(() => { btn.textContent = "Copy CORS Config"; }, 2000);
+  });
+
+  document.getElementById("s3-test-connection")?.addEventListener("click", testS3Connection);
   document.getElementById("save-s3-settings")?.addEventListener("click", saveS3Settings);
 }
 
+async function testS3Connection(): Promise<void> {
+  const btn = document.getElementById("s3-test-connection") as HTMLButtonElement;
+  const resultEl = document.getElementById("s3-test-result") as HTMLSpanElement;
+  btn.disabled = true;
+  btn.textContent = "Testing…";
+  resultEl.textContent = "";
+  resultEl.style.color = "";
+
+  try {
+    const inp = (id: string) =>
+      (document.getElementById(id) as HTMLInputElement).value.trim();
+
+    const bucket = inp("s3-bucket");
+    const region = inp("s3-region");
+    const accessKeyId = inp("s3-access-key");
+    const endpoint = inp("s3-endpoint") || undefined;
+
+    // Resolve secret key: prefer the text field; fall back to decrypting stored blob
+    let secretAccessKey = inp("s3-secret-key");
+    if (!secretAccessKey) {
+      const { s3 } = await loadSettings();
+      if (s3.secretKeyEncrypted) {
+        let passphrase = await SecureStorage.getPassphrase();
+        if (!passphrase) {
+          passphrase = window.prompt("Enter your S3 encryption passphrase to test the connection:") ?? "";
+          if (!passphrase) {
+            resultEl.textContent = "Passphrase required to decrypt the stored secret key.";
+            resultEl.style.color = "var(--error)";
+            return;
+          }
+        }
+        try {
+          secretAccessKey = await SecureStorage.decrypt(s3.secretKeyEncrypted, passphrase);
+          await SecureStorage.setPassphrase(passphrase);
+        } catch {
+          resultEl.textContent = "✗ Wrong passphrase — could not decrypt secret key.";
+          resultEl.style.color = "var(--error)";
+          return;
+        }
+      }
+    }
+
+    if (!bucket || !region || !accessKeyId || !secretAccessKey) {
+      resultEl.textContent = "Fill in bucket, region, and credentials first.";
+      resultEl.style.color = "var(--error)";
+      return;
+    }
+
+    const client = new S3Client({ bucket, region, accessKeyId, secretAccessKey, endpoint });
+    const { ok, error } = await client.testConnection();
+
+    if (ok) {
+      resultEl.textContent = "✓ Connection successful";
+      resultEl.style.color = "var(--success, #22c55e)";
+    } else {
+      resultEl.textContent = `✗ ${error}`;
+      resultEl.style.color = "var(--error)";
+    }
+  } catch (err) {
+    resultEl.textContent = `✗ ${errorMsg(err)}`;
+    resultEl.style.color = "var(--error)";
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "Test Connection";
+  }
+}
+
 async function saveS3Settings(): Promise<void> {
   const btn = document.getElementById("save-s3-settings") as HTMLButtonElement;
   btn.disabled = true;
@@ -370,17 +572,58 @@ async function saveS3Settings(): Promise<void> {
     const checked = (id: string) =>
       (document.getElementById(id) as HTMLInputElement).checked;
 
+    const passphrase = get("s3-passphrase");
+    const passphraseConfirm = get("s3-passphrase-confirm");
+    const secretKeyRaw = get("s3-secret-key");
+
+    if (passphrase && passphrase !== passphraseConfirm) {
+      showStatus("Passphrases do not match.", "error");
+      return;
+    }
+
     const config = (await ChromeStorage.get<StorageConfig>(STORAGE_CONFIG_KEY)) ?? {};
+    const existing = config.s3;
+
+    // Determine the secret key to store
+    let secretAccessKey: string | undefined;
+    let secretKeyEncrypted: EncryptedBlob | undefined;
+
+    if (secretKeyRaw) {
+      // User typed a (new) secret key
+      if (passphrase) {
+        secretKeyEncrypted = await SecureStorage.encrypt(secretKeyRaw, passphrase);
+        await SecureStorage.setPassphrase(passphrase);
+        secretAccessKey = undefined;
+      } else {
+        secretAccessKey = secretKeyRaw;
+        secretKeyEncrypted = undefined;
+      }
+    } else {
+      // Secret key field left blank — keep existing stored value
+      secretAccessKey = existing?.secretAccessKey;
+      secretKeyEncrypted = existing?.secretKeyEncrypted;
+      // If new passphrase provided, re-encrypt the existing plaintext key (migration)
+      if (passphrase && secretAccessKey) {
+        secretKeyEncrypted = await SecureStorage.encrypt(secretAccessKey, passphrase);
+        await SecureStorage.setPassphrase(passphrase);
+        secretAccessKey = undefined;
+      }
+    }
+
     config.s3 = {
       enabled: checked("s3-enabled"),
       bucket: get("s3-bucket") || undefined,
       region: get("s3-region") || undefined,
       endpoint: get("s3-endpoint") || undefined,
       accessKeyId: get("s3-access-key") || undefined,
-      secretAccessKey: get("s3-secret-key") || undefined,
+      secretAccessKey,
+      secretKeyEncrypted,
       prefix: get("s3-prefix") || undefined,
     };
     await ChromeStorage.set(STORAGE_CONFIG_KEY, config);
+
+    // Reload fields so encrypted placeholder appears
+    await loadS3Settings();
     showStatus("Settings saved.", "success");
   } catch (err) {
     showStatus(`Save failed: ${errorMsg(err)}`, "error");
@@ -414,11 +657,28 @@ function isProgressMsg(
   );
 }
 
+function isUploadCompleteMsg(
+  msg: unknown,
+): msg is { type: MessageType.UPLOAD_COMPLETE; payload: { id: string } } {
+  return (
+    typeof msg === "object" &&
+    msg !== null &&
+    (msg as { type?: unknown }).type === MessageType.UPLOAD_COMPLETE &&
+    typeof (msg as { payload?: { id?: unknown } }).payload?.id === "string"
+  );
+}
+
 function registerHistoryListener(): void {
   if (historyMessageListener) return;
   historyMessageListener = (msg) => {
+    if (isUploadCompleteMsg(msg)) {
+      handleFinishedDownload(msg.payload.id);
+      return;
+    }
     if (!isProgressMsg(msg)) return;
-    if (!FINISHED_STAGES.has(msg.payload.progress.stage as DownloadStage)) return;
+    const stage = msg.payload.progress.stage as DownloadStage;
+    // Re-render on finished stages and upload stage transitions
+    if (!FINISHED_STAGES.has(stage) && stage !== DownloadStage.UPLOADING) return;
     handleFinishedDownload(msg.payload.id);
   };
   chrome.runtime.onMessage.addListener(historyMessageListener);
@@ -541,7 +801,7 @@ async function onHistoryEnabledChange(): Promise<void> {
 
 async function fetchAndRenderHistory(): Promise<void> {
   const all = await getAllDownloads();
-  allHistory = all.filter((d) => FINISHED_STAGES.has(d.progress.stage));
+  allHistory = all.filter((d) => FINISHED_STAGES.has(d.progress.stage) || d.progress.stage === DownloadStage.UPLOADING);
   rerenderHistory();
 }
 
@@ -694,6 +954,11 @@ function renderHistoryItem(state: DownloadState): HTMLElement {
     );
   }
   badges.appendChild(makeStageBadge(state.progress.stage));
+  
+  if (state.cloudLinks?.googleDrive || state.cloudLinks?.s3) {
+    badges.appendChild(makeBadge("uploaded", "badge-uploaded"));
+  }
+  
   info.appendChild(badges);
 
   item.appendChild(info);
@@ -708,6 +973,23 @@ function renderHistoryItem(state: DownloadState): HTMLElement {
   date.textContent = relativeTime(state.createdAt);
   actions.appendChild(date);
 
+  // Upload progress indicator with cancel button
+  if (state.progress.stage === DownloadStage.UPLOADING) {
+    const pct = state.progress.percentage || 0;
+    const progressEl = document.createElement("div");
+    progressEl.className = "history-upload-progress";
+    progressEl.title = `Uploading... ${Math.round(pct)}%`;
+    progressEl.innerHTML = iconUploadProgress(pct);
+    actions.appendChild(progressEl);
+
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "history-cancel-upload";
+    cancelBtn.title = "Cancel upload";
+    cancelBtn.innerHTML = `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${iconX()}</svg>`;
+    cancelBtn.addEventListener("click", () => cancelUpload(state.id));
+    actions.appendChild(cancelBtn);
+  }
+
   // Actions menu
   const menuWrap = document.createElement("div");
   menuWrap.className = "history-menu-wrap";
@@ -765,6 +1047,17 @@ function renderHistoryItem(state: DownloadState): HTMLElement {
     }));
   }
 
+  // Upload to cloud (completed only, not while uploading)
+  if (state.progress.stage === DownloadStage.COMPLETED && !state.metadata.hasDrm) {
+    const uploadLabel = state.uploadError ? "Retry upload" : "Upload to cloud";
+    menu.appendChild(makeMenuItem(iconUpload(), uploadLabel, () => handleHistoryUpload(state.id)));
+  }
+
+  // Cancel upload (while uploading)
+  if (state.progress.stage === DownloadStage.UPLOADING) {
+    menu.appendChild(makeMenuItem(iconX(), "Cancel upload", () => cancelUpload(state.id)));
+  }
+
   menu.appendChild(makeMenuItem(iconDownload(), "Re-download", () => redownload(state.url, state.metadata)));
   menu.appendChild(makeMenuItem(iconCopy(), "Copy URL", async () => {
     await navigator.clipboard.writeText(state.url);
@@ -774,6 +1067,10 @@ function renderHistoryItem(state: DownloadState): HTMLElement {
   menu.appendChild(makeMenuItem(iconLink(), "Check manifest", () => checkManifest(state.url)));
 
   menu.appendChild(makeMenuItem(iconTrash(), "Delete", async () => {
+    // Cancel upload first if one is in progress for this item
+    if (state.progress.stage === DownloadStage.UPLOADING) {
+      await cancelUpload(state.id);
+    }
     await deleteDownload(state.id);
     allHistory = allHistory.filter((d) => d.id !== state.id);
     selectedIds.delete(state.id);
@@ -825,6 +1122,7 @@ function makeStageBadge(stage: DownloadStage): HTMLElement {
     [DownloadStage.COMPLETED]: "badge-completed",
     [DownloadStage.FAILED]: "badge-failed",
     [DownloadStage.CANCELLED]: "badge-cancelled",
+    [DownloadStage.UPLOADING]: "badge-completed",
   };
   return makeBadge(stage, map[stage] ?? "");
 }
@@ -844,6 +1142,121 @@ function syncBulkBar(): void {
     !selectAll.checked && visible.some((d) => selectedIds.has(d.id));
 }
 
+async function cancelUpload(downloadId: string): Promise<void> {
+  if (!confirm("Are you sure you want to cancel this upload?")) return;
+  try {
+    await chrome.runtime.sendMessage({
+      type: MessageType.CANCEL_UPLOAD,
+      payload: { downloadId },
+    });
+    showToast("Upload cancelled", "warning");
+    await fetchAndRenderHistory();
+  } catch (err: any) {
+    showToast("Failed to cancel upload: " + (err?.message || "Unknown error"), "error");
+  }
+}
+
+async function handleHistoryUpload(downloadId: string): Promise<void> {
+  const settings = await loadSettings();
+  const driveEnabled = settings.googleDrive?.enabled === true;
+  const s3Enabled = settings.s3?.enabled === true;
+
+  if (!driveEnabled && !s3Enabled) {
+    showToast("No cloud provider configured. Go to Cloud Providers settings.", "error");
+    return;
+  }
+
+  let provider: CloudProvider;
+  if (driveEnabled && !s3Enabled) {
+    provider = "googleDrive";
+  } else if (s3Enabled && !driveEnabled) {
+    provider = "s3";
+  } else {
+    // Both configured — ask user
+    const choice = await new Promise<CloudProvider | null>((resolve) => {
+      const overlay = document.createElement("div");
+      overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;";
+
+      const dialog = document.createElement("div");
+      dialog.style.cssText = "background:var(--bg-secondary,#1e1e2e);border:1px solid var(--border-color,#3a3a5c);border-radius:8px;padding:20px;min-width:220px;text-align:center;";
+      dialog.innerHTML = `<div style="margin-bottom:12px;font-weight:500;color:var(--text-primary,#cdd6f4);">Choose provider</div>`;
+
+      const btnStyle = "display:block;width:100%;padding:8px 12px;margin-top:8px;border:1px solid var(--border-color,#3a3a5c);border-radius:6px;background:var(--bg-primary,#11111b);color:var(--text-primary,#cdd6f4);cursor:pointer;font-size:13px;";
+
+      const driveBtn = document.createElement("button");
+      driveBtn.textContent = "Google Drive";
+      driveBtn.style.cssText = btnStyle;
+      driveBtn.addEventListener("click", () => { overlay.remove(); resolve("googleDrive"); });
+
+      const s3Btn = document.createElement("button");
+      s3Btn.textContent = "S3";
+      s3Btn.style.cssText = btnStyle;
+      s3Btn.addEventListener("click", () => { overlay.remove(); resolve("s3"); });
+
+      overlay.addEventListener("click", (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } });
+
+      dialog.appendChild(driveBtn);
+      dialog.appendChild(s3Btn);
+      overlay.appendChild(dialog);
+      document.body.appendChild(overlay);
+    });
+    if (!choice) return;
+    provider = choice;
+  }
+
+  // Open file picker
+  let file: File;
+  try {
+    const [fileHandle] = await (window as any).showOpenFilePicker({
+      multiple: false,
+      types: [{ description: "Video files", accept: { "video/*": [".mp4", ".webm", ".mkv", ".mov"] } }],
+    });
+    file = await fileHandle.getFile();
+  } catch (err: any) {
+    if (err?.name === "AbortError") return;
+    showToast("Failed to select file", "error");
+    return;
+  }
+
+  if (!file.type.startsWith("video/")) {
+    showToast(`Invalid file type "${file.type}". Select a video file.`, "error");
+    return;
+  }
+
+  showToast("Uploading…", "warning");
+
+  try {
+    // Store file bytes in IDB — chrome.runtime.sendMessage uses JSON
+    // serialization which destroys ArrayBuffer. IDB is shared across contexts.
+    const tempKey = `__upload_${downloadId}`;
+    await storeChunk(tempKey, 0, await file.arrayBuffer());
+
+    const response = await new Promise<any>((resolve, reject) => {
+      chrome.runtime.sendMessage(
+        {
+          type: MessageType.UPLOAD_REQUEST,
+          payload: { downloadId, provider },
+        },
+        (res) => {
+          if (chrome.runtime.lastError) {
+            reject(new Error(chrome.runtime.lastError.message));
+            return;
+          }
+          resolve(res);
+        },
+      );
+    });
+    if (response?.success) {
+      showToast("Upload complete", "success");
+      await fetchAndRenderHistory();
+    } else {
+      showToast("Upload failed: " + (response?.error || "Unknown error"), "error");
+    }
+  } catch (err: any) {
+    showToast("Upload failed: " + (err?.message || "Unknown error"), "error");
+  }
+}
+
 async function redownload(url: string, metadata?: VideoMetadata): Promise<void> {
   const resolvedMetadata: VideoMetadata = metadata ?? { url, format: "unknown" as any, pageUrl: url };
   const isLive = resolvedMetadata.isLive === true;
@@ -1020,6 +1433,41 @@ function iconTrash(): string {
   return `<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>`;
 }
 
+function iconUpload(): string {
+  return `<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="20"></line>`;
+}
+
+function iconUploadProgress(pct: number): string {
+  // Water-fill rising from bottom: cloud borders + arrow interior fill with accent.
+  // Everything above the water line stays gray.
+  const cloudPath = "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z";
+  const cloudTop = 6;
+  const cloudHeight = 14;
+  const fillY = cloudTop + cloudHeight - (pct / 100) * cloudHeight;
+  const fillH = 24 - fillY;
+  const gray = "#888";
+
+  return `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <defs>
+        <clipPath id="upload-water-clip">
+          <rect x="0" y="${fillY}" width="24" height="${fillH}"/>
+        </clipPath>
+      </defs>
+      <!-- Base: gray cloud outline + arrow -->
+      <path d="${cloudPath}" stroke="${gray}" fill="none"/>
+      <polyline points="16 16 12 12 8 16" stroke="${gray}" fill="none"/>
+      <line x1="12" y1="12" x2="12" y2="20" stroke="${gray}"/>
+      <!-- Accent overlay clipped to water level -->
+      <g clip-path="url(#upload-water-clip)">
+        <path d="${cloudPath}" stroke="var(--accent)" fill="none"/>
+        <polyline points="16 16 12 12 8 16" stroke="var(--accent)" fill="var(--accent)"/>
+        <line x1="12" y1="12" x2="12" y2="20" stroke="var(--accent)"/>
+      </g>
+    </svg>
+  `;
+}
+
 function iconCheck(): string {
   return `<polyline points="20 6 9 17 4 12"></polyline>`;
 }
@@ -1144,16 +1592,19 @@ async function loadAdvancedSettings(): Promise<void> {
   get("master-playlist-cache-size").value = advanced.masterPlaylistCacheSize.toString();
   get("db-sync-interval").value = (advanced.dbSyncIntervalMs / 1000).toString();
 
-  document
-    .getElementById("save-advanced-settings")
-    ?.addEventListener("click", saveAdvancedSettings);
-  document
-    .getElementById("reset-advanced-settings")
-    ?.addEventListener("click", resetAdvancedSettings);
+  for (const id of ["save-advanced-settings", "save-advanced-settings-caches", "save-advanced-settings-perf"]) {
+    document.getElementById(id)?.addEventListener("click", saveAdvancedSettings);
+  }
+  for (const id of ["reset-advanced-settings", "reset-advanced-settings-caches", "reset-advanced-settings-perf"]) {
+    document.getElementById(id)?.addEventListener("click", resetAdvancedSettings);
+  }
+
+  setupAdvancedTabs();
 }
 
-async function saveAdvancedSettings(): Promise<void> {
-  const btn = document.getElementById("save-advanced-settings") as HTMLButtonElement;
+async function saveAdvancedSettings(event?: Event): Promise<void> {
+  const btn = ((event?.currentTarget as HTMLButtonElement | null)
+    ?? document.getElementById("save-advanced-settings")) as HTMLButtonElement;
   const get = (id: string) => document.getElementById(id) as HTMLInputElement;
 
   const maxRetries       = validateField(get("max-retries"),               MIN_MAX_RETRIES,               MAX_MAX_RETRIES,               true);
@@ -1193,8 +1644,9 @@ async function saveAdvancedSettings(): Promise<void> {
   }
 }
 
-async function resetAdvancedSettings(): Promise<void> {
-  const btn = document.getElementById("reset-advanced-settings") as HTMLButtonElement;
+async function resetAdvancedSettings(event?: Event): Promise<void> {
+  const btn = ((event?.currentTarget as HTMLButtonElement | null)
+    ?? document.getElementById("reset-advanced-settings")) as HTMLButtonElement;
   btn.disabled = true;
 
   try {
diff --git a/src/popup/download-actions.ts b/src/popup/download-actions.ts
index a7bcf9e..b022e90 100644
--- a/src/popup/download-actions.ts
+++ b/src/popup/download-actions.ts
@@ -1,10 +1,11 @@
 /**
- * Download action handlers (open, remove, retry, start download).
+ * Download action handlers (open, remove, retry, start download, upload).
  */
 
 import { VideoMetadata, DownloadStage } from "../core/types";
 import { getDownload, deleteDownload } from "../core/database/downloads";
-import { MessageType } from "../shared/messages";
+import { storeChunk } from "../core/database/chunks";
+import { MessageType, CloudProvider } from "../shared/messages";
 import { canCancelDownload, CANNOT_CANCEL_MESSAGE } from "../core/utils/download-utils";
 import { loadDownloadStates } from "./state";
 import { renderDownloads } from "./render-downloads";
@@ -157,6 +158,72 @@ export async function handleRetryDownload(downloadId: string): Promise<void> {
   }
 }
 
+/**
+ * Deferred upload: user selects the local file via the file picker,
+ * then we send its bytes to the service worker for cloud upload.
+ *
+ * Chrome extensions cannot read local file paths directly; the user
+ * must confirm by selecting the file (one click if still in Downloads).
+ */
+export async function handleUploadDownload(downloadId: string, provider: CloudProvider): Promise<void> {
+  try {
+    const download = await getDownload(downloadId);
+    if (!download) {
+      alert("Download record not found.");
+      return;
+    }
+    if (download.metadata.hasDrm) {
+      alert("DRM-protected content cannot be uploaded.");
+      return;
+    }
+
+    // @ts-ignore — showOpenFilePicker is available in Chrome extension popups
+    const [fileHandle] = await (window as any).showOpenFilePicker({
+      multiple: false,
+      types: [{ description: "Video files", accept: { "video/*": [".mp4", ".webm", ".mkv", ".mov"] } }],
+    });
+
+    const file: File = await fileHandle.getFile();
+
+    if (!file.type.startsWith('video/')) {
+      alert(`Invalid file type "${file.type}". Please select a video file.`);
+      return;
+    }
+
+    // Store file bytes in IDB — chrome.runtime.sendMessage uses JSON
+    // serialization which destroys ArrayBuffer. IDB is shared across contexts.
+    const tempKey = `__upload_${downloadId}`;
+    await storeChunk(tempKey, 0, await file.arrayBuffer());
+
+    const response = await new Promise<any>((resolve, reject) => {
+      chrome.runtime.sendMessage(
+        {
+          type: MessageType.UPLOAD_REQUEST,
+          payload: { downloadId, provider },
+        },
+        (res) => {
+          if (chrome.runtime.lastError) {
+            reject(new Error(chrome.runtime.lastError.message));
+            return;
+          }
+          resolve(res);
+        },
+      );
+    });
+
+    if (response?.success) {
+      await loadDownloadStates();
+      renderDownloads();
+    } else {
+      alert("Upload failed: " + (response?.error || "Unknown error"));
+    }
+  } catch (err: any) {
+    if (err?.name === "AbortError") return; // user cancelled file picker
+    console.error("Upload failed:", err);
+    alert("Upload failed: " + (err?.message || "Unknown error"));
+  }
+}
+
 export async function startDownload(
   url: string,
   videoMetadata?: VideoMetadata,
diff --git a/src/popup/popup.html b/src/popup/popup.html
index a5cddd8..cc67a3c 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -62,34 +62,20 @@
     /* ---- Tabs ---- */
     .tabs {
       display: flex;
-      background: var(--surface-1);
-      border-bottom: 1px solid var(--border);
+      align-items: center;
+      padding: 14px var(--space-4) 14px;
+      background: linear-gradient(to bottom, var(--surface-1) 0%, var(--surface-0) 100%);
       flex-shrink: 0;
     }
 
-    .tab {
-      flex: 1;
-      padding: 10px var(--space-4);
-      background: transparent;
-      border: none;
-      border-bottom: 2px solid transparent;
-      color: var(--text-tertiary);
-      font-family: inherit;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.15s;
-      text-align: center;
-    }
-
-    .tab:hover {
-      color: var(--text-secondary);
-      background: var(--surface-2);
+    .tabs .seg-tabs {
+      width: 100%;
+      margin-bottom: 0;
     }
 
-    .tab.active {
-      color: var(--accent);
-      border-bottom-color: var(--accent);
+    .tabs .seg-tab {
+      flex: 1;
+      text-align: center;
     }
 
     /* ---- Tab Content ---- */
@@ -367,6 +353,60 @@
       background: rgba(251, 191, 36, 0.1);
     }
 
+    /* ---- Cloud Action Buttons ---- */
+    .card-cloud-actions {
+      display: flex;
+      gap: 6px;
+      margin-top: 6px;
+      flex-wrap: wrap;
+    }
+
+    .btn-cloud-link {
+      display: inline-flex;
+      align-items: center;
+      padding: 3px 8px;
+      border-radius: var(--radius-sm);
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      border: 1px solid var(--border-hover);
+      background: var(--surface-2);
+      color: var(--text-secondary);
+      text-decoration: none;
+      transition: all 0.15s;
+      font-family: inherit;
+    }
+
+    .btn-cloud-link:hover {
+      background: var(--surface-3);
+      color: var(--text-primary);
+      border-color: var(--accent);
+    }
+
+    .btn-upload-deferred {
+      display: inline-flex;
+      align-items: center;
+      padding: 3px 8px;
+      border-radius: var(--radius-sm);
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      border: 1px solid var(--border-hover);
+      background: transparent;
+      color: var(--text-tertiary);
+      font-family: inherit;
+      transition: all 0.15s;
+    }
+
+    .btn-upload-deferred:hover {
+      background: var(--surface-2);
+      color: var(--text-primary);
+    }
+
+    .btn-upload-deferred[title*="failed"] {
+      color: var(--error);
+    }
+
     /* ---- Progress ---- */
     .manifest-progress-container {
       margin-top: var(--space-2);
@@ -820,9 +860,11 @@
 
   <!-- Tabs -->
   <div class="tabs">
-    <button id="autoDetectTab" class="tab active" data-tab="auto">Videos</button>
-    <button id="manifestTab" class="tab" data-tab="manual" title="Download from manifest links of HLS or DASH streaming protocols">Manifest</button>
-    <button id="downloadsTab" class="tab" data-tab="downloads">Downloads</button>
+    <div class="seg-tabs" style="margin-bottom:0;">
+      <button id="autoDetectTab" class="seg-tab active" data-tab="auto">Videos</button>
+      <button id="manifestTab" class="seg-tab" data-tab="manual" title="Download from manifest links of HLS or DASH streaming protocols">Manifest</button>
+      <button id="downloadsTab" class="seg-tab" data-tab="downloads">Downloads</button>
+    </div>
   </div>
 
   <!-- Auto Detect Tab Content -->
diff --git a/src/popup/popup.ts b/src/popup/popup.ts
index de0dc7a..f13dbec 100644
--- a/src/popup/popup.ts
+++ b/src/popup/popup.ts
@@ -7,6 +7,8 @@ import { getAllDownloads, deleteDownload } from "../core/database/downloads";
 import { MessageType } from "../shared/messages";
 import { normalizeUrl } from "../core/utils/url-utils";
 import { ChromeStorage } from "../core/storage/chrome-storage";
+import { loadSettings } from "../core/storage/settings";
+import { CloudProvider } from "../shared/messages";
 import {
   dom,
   detectedVideos,
@@ -15,7 +17,7 @@ import {
 } from "./state";
 import { renderDownloads } from "./render-downloads";
 import { renderDetectedVideos, setupDetectedVideosEventDelegation } from "./render-videos";
-import { handleOpenDownload, handleRemoveDownload, handleRetryDownload } from "./download-actions";
+import { handleOpenDownload, handleRemoveDownload, handleRetryDownload, handleUploadDownload } from "./download-actions";
 import {
   updateManualManifestFormState,
   updateDownloadButtonState,
@@ -373,6 +375,118 @@ function setupDownloadsEventDelegation(): void {
       }
       return;
     }
+
+    const uploadBtn = target.closest<HTMLElement>(".btn-upload-deferred");
+    if (uploadBtn) {
+      e.stopPropagation();
+      const downloadId = uploadBtn.dataset.downloadId;
+      if (!downloadId) return;
+
+      const settings = await loadSettings();
+      const driveEnabled = settings.googleDrive?.enabled === true;
+      const s3Enabled = settings.s3?.enabled === true;
+
+      if (!driveEnabled && !s3Enabled) {
+        alert('No cloud provider configured. Go to Settings → Google Drive or S3.');
+        return;
+      }
+
+      if (driveEnabled && !s3Enabled) {
+        await handleUploadDownload(downloadId, 'googleDrive');
+        return;
+      }
+
+      if (s3Enabled && !driveEnabled) {
+        await handleUploadDownload(downloadId, 's3');
+        return;
+      }
+
+      // Both configured — show inline picker
+      const existing = document.querySelector<HTMLElement>('.provider-picker');
+      if (existing) existing.remove();
+
+      const picker = document.createElement('div');
+      picker.className = 'provider-picker';
+
+      const rect = uploadBtn.getBoundingClientRect();
+      picker.style.cssText = `
+        position: fixed;
+        top: ${rect.bottom + 4}px;
+        left: ${rect.left}px;
+        background: var(--bg-secondary, #1e1e2e);
+        border: 1px solid var(--border-color, #3a3a5c);
+        border-radius: 6px;
+        padding: 4px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        z-index: 9999;
+        min-width: 140px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      `;
+
+      const btnStyle = `
+        background: none;
+        border: none;
+        color: var(--text-primary, #cdd6f4);
+        padding: 6px 10px;
+        text-align: left;
+        cursor: pointer;
+        border-radius: 4px;
+        font-size: 12px;
+        white-space: nowrap;
+      `;
+
+      const driveBtn = document.createElement('button');
+      driveBtn.textContent = '↑ Google Drive';
+      driveBtn.style.cssText = btnStyle;
+      driveBtn.addEventListener('mouseenter', () => { driveBtn.style.background = 'var(--hover-bg, #313244)'; });
+      driveBtn.addEventListener('mouseleave', () => { driveBtn.style.background = 'none'; });
+
+      const s3Btn = document.createElement('button');
+      s3Btn.textContent = '↑ S3';
+      s3Btn.style.cssText = btnStyle;
+      s3Btn.addEventListener('mouseenter', () => { s3Btn.style.background = 'var(--hover-bg, #313244)'; });
+      s3Btn.addEventListener('mouseleave', () => { s3Btn.style.background = 'none'; });
+
+      const selectProvider = async (provider: CloudProvider) => {
+        picker.remove();
+        outsideClickHandler();
+        await handleUploadDownload(downloadId, provider);
+      };
+
+      driveBtn.addEventListener('click', (ev) => { ev.stopPropagation(); selectProvider('googleDrive'); });
+      s3Btn.addEventListener('click', (ev) => { ev.stopPropagation(); selectProvider('s3'); });
+
+      picker.appendChild(driveBtn);
+      picker.appendChild(s3Btn);
+      document.body.appendChild(picker);
+
+      const outsideClickHandler = () => {
+        document.removeEventListener('click', outsideClick);
+      };
+      const outsideClick = (ev: MouseEvent) => {
+        if (!picker.contains(ev.target as Node)) {
+          picker.remove();
+          outsideClickHandler();
+        }
+      };
+      setTimeout(() => document.addEventListener('click', outsideClick), 0);
+
+      return;
+    }
+
+    const copyS3Btn = target.closest<HTMLElement>(".btn-copy-s3");
+    if (copyS3Btn) {
+      e.stopPropagation();
+      const s3Url = copyS3Btn.dataset.s3Url;
+      if (s3Url) {
+        await navigator.clipboard.writeText(s3Url);
+        copyS3Btn.textContent = "Copied!";
+        setTimeout(() => { copyS3Btn.textContent = "⧉ S3 URL"; }, 2000);
+      }
+      return;
+    }
   });
 }
 
diff --git a/src/popup/render-downloads.ts b/src/popup/render-downloads.ts
index a829a66..f84c7f3 100644
--- a/src/popup/render-downloads.ts
+++ b/src/popup/render-downloads.ts
@@ -29,7 +29,10 @@ let lastDownloadSnapshotJson = "";
  * Build a snapshot key for a download to detect structural changes.
  */
 function downloadStructureKey(d: DownloadState): string {
-  return `${d.id}:${d.progress.stage}:${d.metadata.thumbnail ?? ""}:${d.localPath ?? ""}`;
+  const cloudKey = d.cloudLinks
+    ? `gd:${d.cloudLinks.googleDrive ?? ""},s3:${d.cloudLinks.s3 ?? ""}`
+    : "";
+  return `${d.id}:${d.progress.stage}:${d.metadata.thumbnail ?? ""}:${d.localPath ?? ""}:${cloudKey}:${d.uploadError ?? ""}`;
 }
 
 /**
@@ -45,6 +48,16 @@ function updateDownloadCardProgress(card: HTMLElement, download: DownloadState):
     return true;
   }
 
+  if (stage === DownloadStage.UPLOADING) {
+    const bar = card.querySelector<HTMLElement>(".manifest-progress-bar");
+    const sizeEl = card.querySelector(".manifest-progress-size");
+    if (!bar || !sizeEl) return false;
+    const pct = download.progress.percentage || 0;
+    bar.style.width = `${Math.min(pct, 100)}%`;
+    sizeEl.textContent = download.progress.message || "Uploading...";
+    return true;
+  }
+
   const isRecording = stage === DownloadStage.RECORDING;
   const isManifestDownload =
     (download.metadata.format === VideoFormat.HLS ||
@@ -170,13 +183,27 @@ function renderDownloadItem(download: DownloadState): string {
 
   let progressBar = "";
   const isRecording = stage === DownloadStage.RECORDING;
+  const isUploading = stage === DownloadStage.UPLOADING;
   const isManifestDownload =
     (download.metadata.format === VideoFormat.HLS ||
       download.metadata.format === VideoFormat.M3U8 ||
       download.metadata.format === VideoFormat.DASH) &&
     (stage === DownloadStage.DOWNLOADING || stage === DownloadStage.MERGING);
 
-  if (isRecording) {
+  if (isUploading) {
+    const pct = download.progress.percentage || 0;
+    progressBar = `
+      <div class="manifest-progress-container">
+        <div class="manifest-progress-bar-wrapper">
+          <div class="manifest-progress-bar" style="width: ${Math.min(pct, 100)}%"></div>
+        </div>
+        <div class="manifest-progress-info">
+          <span class="manifest-progress-size">${download.progress.message || "Uploading..."}</span>
+          <span class="manifest-progress-speed">${pct > 0 ? `${Math.round(pct)}%` : ""}</span>
+        </div>
+      </div>
+    `;
+  } else if (isRecording) {
     const segmentsCollected = download.progress.segmentsCollected || 0;
     const downloaded = download.progress.downloaded || 0;
 
@@ -256,6 +283,34 @@ function renderDownloadItem(download: DownloadState): string {
   const date = new Date(download.updatedAt);
   const dateText = date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 
+  // Cloud link buttons for completed downloads
+  let cloudActions = "";
+  if (stage === DownloadStage.COMPLETED) {
+    const driveLink = download.cloudLinks?.googleDrive;
+    const s3Link = download.cloudLinks?.s3;
+    const uploadError = download.uploadError;
+    const parts: string[] = [];
+
+    if (driveLink) {
+      parts.push(`<a class="btn-cloud-link" href="${escapeHtml(driveLink)}" target="_blank" rel="noopener" title="View in Google Drive">&#x2197; Drive</a>`);
+    }
+    if (s3Link) {
+      parts.push(`<button class="btn-cloud-link btn-copy-s3" data-s3-url="${escapeHtml(s3Link)}" title="Copy S3 URL">&#x29C9; S3 URL</button>`);
+    }
+    // Deferred upload / retry button (shown when no cloud links yet)
+    if (!driveLink && !s3Link) {
+      const label = uploadError ? "&#x21BA; Retry upload" : "&#x2B06; Upload";
+      const title = uploadError
+        ? `Upload failed: ${escapeHtml(uploadError)} — click to retry`
+        : "Upload to cloud storage";
+      parts.push(`<button class="btn-upload-deferred" data-download-id="${escapeHtml(download.id)}" title="${title}">${label}</button>`);
+    }
+
+    if (parts.length > 0) {
+      cloudActions = `<div class="card-cloud-actions">${parts.join("")}</div>`;
+    }
+  }
+
   let actionButtons = "";
   if (isRecording) {
     actionButtons = `
@@ -263,6 +318,9 @@ function renderDownloadItem(download: DownloadState): string {
         <button class="btn-stop-rec download-stop-rec-btn" data-url="${escapeHtml(download.url)}">Stop</button>
       </div>
     `;
+  } else if (isUploading) {
+    // No cancel button for uploads currently — just show progress
+    actionButtons = "";
   } else if (isInProgress) {
     if (!canCancelDownload(download.progress.stage)) {
       actionButtons = `
@@ -310,6 +368,7 @@ function renderDownloadItem(download: DownloadState): string {
           ${dateText}
         </div>
         ${progressBar}
+        ${cloudActions}
         ${actionButtons}
       </div>
     </div>
@@ -327,7 +386,8 @@ export function renderDownloads(forceFullRebuild = false): void {
     (d) =>
       d.progress.stage !== DownloadStage.COMPLETED &&
       d.progress.stage !== DownloadStage.FAILED &&
-      d.progress.stage !== DownloadStage.CANCELLED,
+      d.progress.stage !== DownloadStage.CANCELLED &&
+      d.progress.stage !== DownloadStage.UPLOADING,
   );
 
   if (inProgress.length === 0) {
diff --git a/src/service-worker.ts b/src/service-worker.ts
index c866b45..c44bbf1 100644
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -13,9 +13,12 @@ import {
   storeDownload,
   deleteDownload,
 } from "./core/database/downloads";
+import { UploadManager } from "./core/cloud/upload-manager";
+import { S3Client } from "./core/cloud/s3-client";
 import { ChromeStorage } from "./core/storage/chrome-storage";
 import { loadSettings } from "./core/storage/settings";
-import { MessageType } from "./shared/messages";
+import { SecureStorage } from "./core/storage/secure-storage";
+import { MessageType, CloudProvider } from "./shared/messages";
 import {
   DownloadState,
   StorageConfig,
@@ -37,6 +40,7 @@ import {
 } from "./core/utils/file-utils";
 import {
   deleteChunks,
+  getAllChunks,
   getChunkCount,
   getAllChunkDownloadIds,
 } from "./core/database/chunks";
@@ -50,6 +54,8 @@ import {
 } from "./shared/constants";
 
 const activeDownloads = new Map<string, Promise<void>>();
+const activeUploads = new Set<string>();
+const uploadAbortControllers = new Map<string, AbortController>();
 // Map to store AbortControllers for each download (keyed by normalized URL)
 const downloadAbortControllers = new Map<string, AbortController>();
 // Set of normalized URLs that should save partial progress on abort
@@ -79,6 +85,10 @@ const keepAlive = (
   }
 )();
 
+function updateKeepAlive(): void {
+  keepAlive(activeDownloads.size > 0 || activeUploads.size > 0);
+}
+
 /**
  * Initialize service worker
  */
@@ -90,6 +100,16 @@ async function init() {
   cleanupStaleChunks().catch((err) =>
     logger.error("Orphaned chunk cleanup failed:", err),
   );
+
+  // Clean up orphaned S3 multipart uploads from previous crashes
+  cleanupOrphanedS3Uploads().catch((err) =>
+    logger.error("S3 orphaned upload cleanup failed:", err),
+  );
+
+  // Restore downloads stuck in UPLOADING stage after a crash
+  cleanupStaleUploads().catch((err) =>
+    logger.error("Stale upload cleanup failed:", err),
+  );
 }
 
 /**
@@ -122,6 +142,35 @@ async function cleanupStaleChunks(): Promise<void> {
   }
 }
 
+/**
+ * Abort orphaned S3 multipart uploads persisted from a previous service worker session.
+ */
+async function cleanupOrphanedS3Uploads(): Promise<void> {
+  const settings = await loadSettings();
+  const secret = await resolveS3Secret(settings.s3);
+  const s3 = settings.s3;
+  const config =
+    s3.bucket && s3.region && s3.accessKeyId && secret
+      ? { bucket: s3.bucket, region: s3.region, accessKeyId: s3.accessKeyId, secretAccessKey: secret, endpoint: s3.endpoint, prefix: s3.prefix }
+      : undefined;
+  await S3Client.cleanupOrphanedUploads(config);
+}
+
+/**
+ * Restore downloads stuck in UPLOADING stage after a service worker crash.
+ */
+async function cleanupStaleUploads(): Promise<void> {
+  const all = await getAllDownloads();
+  for (const d of all) {
+    if (d.progress.stage === DownloadStage.UPLOADING) {
+      d.progress.stage = DownloadStage.COMPLETED;
+      d.progress.message = "Upload interrupted";
+      d.progress.percentage = undefined;
+      await storeDownload(d);
+    }
+  }
+}
+
 /**
  * Handle extension installation
  */
@@ -137,7 +186,6 @@ function handleInstallation(details: chrome.runtime.InstalledDetails) {
 async function handleDownloadRequestMessage(payload: {
   url: string;
   filename?: string;
-  uploadToDrive?: boolean;
   metadata: VideoMetadata;
   tabTitle?: string;
   website?: string;
@@ -397,6 +445,35 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         handleStopAndSaveMessage(message.payload).then(sendResponse);
         return true;
 
+      case MessageType.UPLOAD_REQUEST:
+        handleUploadRequestMessage(message.payload).then(sendResponse);
+        return true;
+
+      case MessageType.CANCEL_UPLOAD: {
+        (async () => {
+          const uid = message.payload?.downloadId as string | undefined;
+          if (uid) {
+            const ctrl = uploadAbortControllers.get(uid);
+            if (ctrl) {
+              ctrl.abort();
+              // Remove from tracking immediately so onStateUpdate stops writing
+              uploadAbortControllers.delete(uid);
+              activeUploads.delete(uid);
+              // Restore COMPLETED stage — awaited so deleteDownload() won't race
+              const s = await getDownload(uid);
+              if (s) {
+                s.progress.stage = DownloadStage.COMPLETED;
+                s.progress.message = "Upload cancelled";
+                s.progress.percentage = undefined;
+                await storeDownload(s);
+              }
+            }
+          }
+          sendResponse({ success: true });
+        })();
+        return true;
+      }
+
       case MessageType.CHECK_URL: {
         const checkUrl = async () => {
           try {
@@ -473,6 +550,29 @@ async function cleanupOrphanedChunks(existing: DownloadState) {
   }
 }
 
+/**
+ * Resolve the S3 secret access key, decrypting it if stored as an EncryptedBlob.
+ * Returns undefined and logs a warning if the passphrase is missing from session storage.
+ */
+async function resolveS3Secret(
+  s3: { secretAccessKey?: string; secretKeyEncrypted?: import("./core/types").EncryptedBlob },
+): Promise<string | undefined> {
+  if (s3.secretKeyEncrypted) {
+    const passphrase = await SecureStorage.getPassphrase();
+    if (!passphrase) {
+      logger.warn("S3 upload skipped: passphrase not in session. Open Options → S3 and re-enter your passphrase.");
+      return undefined;
+    }
+    try {
+      return await SecureStorage.decrypt(s3.secretKeyEncrypted, passphrase);
+    } catch {
+      logger.error("S3 upload skipped: failed to decrypt secret key — wrong passphrase?");
+      return undefined;
+    }
+  }
+  return s3.secretAccessKey;
+}
+
 /**
  * Process download request
  * Validates request, checks for duplicates, creates download manager, and starts download
@@ -480,7 +580,6 @@ async function cleanupOrphanedChunks(existing: DownloadState) {
 async function handleDownloadRequest(payload: {
   url: string;
   filename?: string;
-  uploadToDrive?: boolean;
   metadata: VideoMetadata;
   tabTitle?: string;
   website?: string;
@@ -494,7 +593,6 @@ async function handleDownloadRequest(payload: {
   const {
     url,
     filename,
-    uploadToDrive,
     metadata,
     tabTitle,
     website,
@@ -593,7 +691,6 @@ async function handleDownloadRequest(payload: {
         // Ignore errors - popup/content script might not be listening
       }
     },
-    uploadToDrive: uploadToDrive || config?.googleDrive?.enabled || false,
   });
 
   // Create AbortController for this download to enable real-time cancellation
@@ -613,9 +710,9 @@ async function handleDownloadRequest(payload: {
   );
   activeDownloads.set(normalizedUrl, downloadPromise);
 
-  // Start keep-alive if this is the first active download
+  // Start keep-alive if this is the first active operation
   if (activeDownloads.size === 1) {
-    keepAlive(true);
+    updateKeepAlive();
     // Pre-warm FFmpeg for HLS/M3U8/DASH downloads while segments download
     if (
       metadata.format === VideoFormat.HLS ||
@@ -662,9 +759,9 @@ async function handleDownloadRequest(payload: {
       // This handles both success and failure cases
       activeDownloads.delete(normalizedUrl);
 
-      // Stop keep-alive if no more active downloads
+      // Stop keep-alive if no more active operations
       if (activeDownloads.size === 0) {
-        keepAlive(false);
+        updateKeepAlive();
         closeOffscreenDocument().catch((err) =>
           logger.error("Failed to close offscreen document:", err),
         );
@@ -672,6 +769,163 @@ async function handleDownloadRequest(payload: {
     });
 }
 
+/** Extract a short, user-friendly message from an upload error. Full details stay in console logs. */
+function friendlyUploadError(err: unknown): string {
+  const msg = err instanceof Error ? err.message : String(err);
+
+  // Try to extract the S3/R2 XML <Code> (e.g. "SignatureDoesNotMatch", "AccessDenied")
+  const codeMatch = msg.match(/<Code>(.+?)<\/Code>/);
+  const status = (err as any)?.statusCode as number | undefined;
+
+  if (codeMatch?.[1]) {
+    const code = codeMatch[1];
+    const friendly: Record<string, string> = {
+      AccessDenied: "Access denied — check your API token permissions",
+      SignatureDoesNotMatch: "Signature mismatch — verify your secret access key",
+      NoSuchBucket: "Bucket not found — check your bucket name",
+      InvalidAccessKeyId: "Invalid access key ID",
+      ExpiredToken: "Security token has expired",
+    };
+    return friendly[code] ?? `Upload failed: ${code}`;
+  }
+
+  // CORS preflight failures have no response body
+  if (msg.includes("Failed to fetch") || msg.includes("NetworkError")) {
+    return "Network error — check CORS configuration and endpoint URL";
+  }
+
+  if (status) {
+    return `Upload failed (HTTP ${status})`;
+  }
+
+  // Fallback: truncate to something reasonable
+  return msg.length > 120 ? msg.slice(0, 117) + "…" : msg;
+}
+
+/**
+ * Handle deferred upload request (triggered from popup or history after download completes).
+ * Since the blob URL is long gone, this re-downloads the segments and re-processes — OR
+ * if the localPath file is accessible (DIRECT downloads), it re-downloads from the source URL.
+ *
+ * For segmented downloads (HLS/DASH/M3U8), re-downloading is expensive and URLs may have
+ * expired. The popup should prompt the user to select the local file via showOpenFilePicker().
+ * This handler receives the file bytes forwarded from the popup after file picker selection.
+ */
+async function handleUploadRequestMessage(payload: {
+  downloadId: string;
+  provider: CloudProvider;
+}): Promise<{ success: boolean; error?: string }> {
+  const { downloadId, provider } = payload;
+
+  if (activeUploads.has(downloadId)) {
+    return { success: false, error: "Upload already in progress" };
+  }
+
+  const abortController = new AbortController();
+  uploadAbortControllers.set(downloadId, abortController);
+  activeUploads.add(downloadId);
+  updateKeepAlive();
+
+  try {
+    // Always clean up the temp IDB blob, even on early-return errors
+    const tempKey = `__upload_${downloadId}`;
+    const chunks = await getAllChunks(tempKey);
+    await deleteChunks(tempKey);
+
+    const state = await getDownload(downloadId);
+    if (!state) return { success: false, error: "Download not found" };
+    if (state.metadata.hasDrm) return { success: false, error: "DRM-protected content cannot be uploaded" };
+    if (!chunks.length || !chunks[0].byteLength) {
+      logger.warn(`Upload request for ${downloadId}: no file data in IDB (chunks=${chunks.length})`);
+      return { success: false, error: "No file data provided" };
+    }
+    const fileBytes = chunks[0];
+
+    // Clear any previous upload error so the UI reflects the retry in progress
+    if (state.uploadError) {
+      state.uploadError = undefined;
+      await storeDownload(state);
+    }
+
+    const config = await loadSettings();
+    const blob = new Blob([fileBytes], { type: "video/mp4" });
+    const filename = state.localPath?.split(/[/\\]/).pop() ?? "video.mp4";
+
+    const storageConfig = {
+      googleDrive: { ...config.googleDrive },
+      s3: { ...config.s3, secretAccessKey: await resolveS3Secret(config.s3) },
+    };
+
+    const uploadManager = new UploadManager({
+      config: storageConfig,
+      onStateUpdate: async (updatedState) => {
+        // Skip IDB write if upload was cancelled (record may be deleted)
+        if (abortController.signal.aborted || !activeUploads.has(updatedState.id)) return;
+        await storeDownload(updatedState);
+        try {
+          chrome.runtime.sendMessage(
+            { type: MessageType.DOWNLOAD_PROGRESS, payload: { id: updatedState.id, progress: updatedState.progress } },
+            () => { if (chrome.runtime.lastError) {} },
+          );
+        } catch (_) {}
+      },
+    });
+
+    if (!uploadManager.isConfigured()) {
+      return { success: false, error: "No cloud provider configured" };
+    }
+
+    const links = await uploadManager.uploadBlob(blob, filename, state, provider, abortController.signal);
+
+    if (abortController.signal.aborted) {
+      return { success: false, error: "Upload cancelled" };
+    }
+
+    const freshState = await getDownload(downloadId);
+    if (freshState) {
+      freshState.cloudLinks = { ...freshState.cloudLinks, ...links };
+      freshState.uploadError = undefined;
+      freshState.progress.stage = DownloadStage.COMPLETED;
+      freshState.progress.message = "Upload complete";
+      await storeDownload(freshState);
+      try {
+        chrome.runtime.sendMessage(
+          { type: MessageType.UPLOAD_COMPLETE, payload: { id: downloadId, cloudLinks: links } },
+          () => { if (chrome.runtime.lastError) {} },
+        );
+      } catch (_) {}
+    }
+
+    return { success: true };
+  } catch (err) {
+    // If aborted, the CANCEL_UPLOAD handler already restored the state
+    if (abortController.signal.aborted) {
+      return { success: false, error: "Upload cancelled" };
+    }
+    logger.error("Upload request failed:", err);
+    const fullMsg = err instanceof Error ? err.message : String(err);
+    const userMsg = friendlyUploadError(err);
+    // Persist the error so the popup can show a retry button
+    const failedState = await getDownload(downloadId);
+    if (failedState) {
+      failedState.uploadError = fullMsg;
+      failedState.progress.stage = DownloadStage.COMPLETED;
+      await storeDownload(failedState);
+      try {
+        chrome.runtime.sendMessage(
+          { type: MessageType.DOWNLOAD_PROGRESS, payload: { id: downloadId, progress: failedState.progress } },
+          () => { if (chrome.runtime.lastError) {} },
+        );
+      } catch (_) {}
+    }
+    return { success: false, error: userMsg };
+  } finally {
+    uploadAbortControllers.delete(downloadId);
+    activeUploads.delete(downloadId);
+    updateKeepAlive();
+  }
+}
+
 /**
  * Send download completion message to popup
  */
@@ -1117,7 +1371,7 @@ async function handleStartRecording(payload: {
     .finally(() => {
       activeDownloads.delete(normalizedUrl);
       if (activeDownloads.size === 0) {
-        keepAlive(false);
+        updateKeepAlive();
         closeOffscreenDocument().catch((err) =>
           logger.error("Failed to close offscreen document:", err),
         );
@@ -1126,7 +1380,7 @@ async function handleStartRecording(payload: {
 
   activeDownloads.set(normalizedUrl, recordingPromise);
   if (activeDownloads.size === 1) {
-    keepAlive(true);
+    updateKeepAlive();
     // Pre-warm FFmpeg — recordings always need FFmpeg for the merge phase
     createOffscreenDocument()
       .then(() =>
diff --git a/src/shared/messages.ts b/src/shared/messages.ts
index 9060335..8004f65 100644
--- a/src/shared/messages.ts
+++ b/src/shared/messages.ts
@@ -4,6 +4,8 @@
 
 import { VideoMetadata, DownloadStage } from "../core/types";
 
+export type CloudProvider = 'googleDrive' | 's3';
+
 export enum MessageType {
   // Download messages
   DOWNLOAD_REQUEST = "DOWNLOAD_REQUEST",
@@ -29,6 +31,7 @@ export enum MessageType {
   UPLOAD_PROGRESS = "UPLOAD_PROGRESS",
   UPLOAD_COMPLETE = "UPLOAD_COMPLETE",
   UPLOAD_FAILED = "UPLOAD_FAILED",
+  CANCEL_UPLOAD = "CANCEL_UPLOAD",
 
   // Config
   GET_CONFIG = "GET_CONFIG",
@@ -81,7 +84,6 @@ export interface DownloadRequestMessage extends BaseMessage {
   payload: {
     url: string;
     filename?: string;
-    uploadToDrive?: boolean;
     metadata: VideoMetadata;
     tabTitle?: string;
     website?: string;