diff --git a/THIRD-PARTY-NOTICES.txt b/THIRD-PARTY-NOTICES.txt
index 357754f5..46fe340b 100644
--- a/THIRD-PARTY-NOTICES.txt
+++ b/THIRD-PARTY-NOTICES.txt
@@ -303,3 +303,21 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+-------------------------------------------
+
+@mozilla/readability
+
+Copyright (c) 2010 Arc90 Inc
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/docs/client-side-migration.md b/docs/client-side-migration.md
new file mode 100644
index 00000000..daa08e2e
--- /dev/null
+++ b/docs/client-side-migration.md
@@ -0,0 +1,254 @@
+# WebClipper Client-Side Migration
+
+## Overview
+
+This document tracks the experiment to remove server-side dependencies from the OneNote Web Clipper's content processing pipeline and replace them with client-side alternatives. The goal is a fully self-contained browser extension that does not rely on the OneNote augmentation/screenshot server APIs.
+
+## Server APIs Removed
+
+### 1. Augmentation API
+- **Endpoint:** `onenote.com/onaugmentation/clipperextract/v1.0/`
+- **Purpose:** Server-side article/recipe/product extraction using ML models
+- **Replacement:** Mozilla Readability (`@mozilla/readability`, Apache 2.0 license)
+- **Status:** Complete
+
+### 2. Full Page Screenshot API (DomEnhancer)
+- **Endpoint:** `onenote.com/onaugmentation/clipperDomEnhancer/v1.0/`
+- **Purpose:** Server-side Puppeteer rendering of page DOM into full-page screenshots
+- **Replacement:** Client-side renderer window with scroll-capture and canvas stitching
+- **Status:** Functional, with known issues (see below)
+
+---
+
+## Change 1: Article Extraction with Readability.js
+
+### What Changed
+- `augmentationHelper.ts` — Rewrote `augmentPage()` to use `new Readability(doc).parse()` locally instead of POSTing to the server API
+- Removed `makeAugmentationRequest()` method entirely
+- Removed imports: `HttpWithRetries`, `OneNoteApiUtils`, `Settings`, `Constants` (URL refs)
+- Added metadata mapping: Readability's `title`, `excerpt`, `byline`, `siteName`, `publishedTime` are stored in `PageMetadata`
+
+### Why Readability.js
+- Apache 2.0 license (compatible with WebClipper's MIT license; repo already has Apache 2.0 deps like pdfjs-dist)
+- Well-maintained by Mozilla, used in Firefox Reader View
+- Produces clean article HTML similar to what the server API returned
+
+### Other Related Changes
+- `clipper.tsx` — Removed `UrlUtils.onWhitelistedDomain()` check that gated augmentation mode; FullPage is now the default clip mode
+- `constants.ts` — Removed `augmentationApiUrl` constant
+- `readability.d.ts` (new) — TypeScript type declarations for `@mozilla/readability`
+- `package.json` — Added `@mozilla/readability` dependency
+- `augmentationHelper_tests.ts` — Updated tests for new local implementation
+
+---
+
+## Change 2: Full Page Screenshot with Renderer Window
+
+### Architecture
+
+The server-side approach used Puppeteer to render sanitized HTML and produce a full-page screenshot. The client-side replacement mirrors this:
+
+1. **Store HTML in `chrome.storage.session`** — The page's HTML content, base URL, and localized status text are written to session storage (avoids JSON serialization bottleneck with large payloads)
+2. **Open a renderer popup window** — An extension page (`renderer.html`) is opened at the same position/size as the user's browser with `focused: true`. Width is capped at 1280px. Zoom is forced to 100% via `chrome.tabs.setZoom`. Title bar shows localized "Clipping Page" status text
+3. **Port-based communication** — The renderer page connects to the service worker via `chrome.runtime.connect({ name: "renderer" })`. Commands (loadContent, scroll) are exchanged over this port
+4. **Renderer loads content** — Reads HTML from `chrome.storage.session`, strips `<script>` tags, preserves `<style>`, `<link rel="stylesheet">`, and `<meta>` tags. Rewrites relative URLs (images, stylesheets, srcset) to absolute using `new URL(relative, baseUrl)` (CSP blocks `<base href>` on extension pages). Fetches external stylesheets via `fetch()` and inlines as `<style>` blocks. Renders content inside an iframe for CSS isolation. Injects `[hidden]{display:none!important}` to enforce HTML hidden attribute. Neutralizes fixed/sticky positioning with `!important` after stylesheets load. User interaction blocked by transparent overlay div (`#interaction-shield`) + keyboard/wheel JS listeners
+5. **Scroll-capture with incremental stitching** — The service worker tells the renderer to scroll to each viewport position, waits 500ms (Chrome's `MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND` rate limit = 2/sec), then calls `captureVisibleTab()` to take a PNG screenshot (lossless). Each capture is sent back to the renderer via port for immediate drawing onto a hidden canvas (`display:none`, invisible to captureVisibleTab). Scroll stall detection stops capture when `scrollY` stops changing. Canvas height capped at pre-conversion `contentHeight` or 16,384px
+6. **Finalize to Blob** — When capture is complete, the renderer trims the canvas to actual content height, converts to JPEG 90% via `canvas.toBlob()`, stores the single final data URL in `chrome.storage.session`. The helper reads this single image and converts to Blob via `fetch(dataUrl).then(r => r.blob())`
+7. **Binary MIME part upload** — The Blob is sent as a binary MIME part in the multipart Graph API request (`<img src="name:FullPageImageXXXX" />`), eliminating ~33% base64 encoding overhead
+8. **Cleanup** — Renderer window closed, session storage cleaned up (input keys by worker, output key by helper)
+
+### Why This Architecture (Evolution)
+
+The implementation went through many iterations:
+
+| Attempt | Approach | Why It Failed |
+|---------|----------|---------------|
+| 1 | Scroll user's actual page + captureVisibleTab | Clipper UI visible in captures; visible scrolling was jarring; scrollbars in screenshots |
+| 2 | Blob URL popup | Chrome blocks `executeScript` on blob URLs |
+| 3 | about:blank popup | Not scriptable in Chrome |
+| 4 | Extension page + executeScript | `scripting.executeScript` blocked on extension pages in MV3 |
+| 5 | Extension page + port messaging | Works, but large HTML/base64 data broke JSON serialization |
+| 6 | Port + chrome.storage.session | Works for all data sizes |
+| 7 | Single tall window capture | OS constrains window height to screen dimensions |
+| 8 | Off-screen window (`left: -9999`) | Chrome doesn't paint off-screen windows; blank captures |
+| 9 | Renderer behind user window (`focused: false` + refocus) | Occluded window not painted; stalls until user exposes it |
+| 10 | Full-screen overlay during capture | Flashing between overlay and page content; overlay appeared in screenshots |
+| **Final** | **Focused renderer window with title bar status + binary Blob output** | **Current implementation** |
+
+### Image Delivery: Base64 Data URL vs Binary MIME Part
+
+The original implementation used base64-encoded data URLs embedded inline in the ONML body. This was switched to binary MIME parts:
+
+| Aspect | Old (base64 data URL) | New (binary MIME part) |
+|--------|----------------------|----------------------|
+| Encoding | `canvas.toDataURL()` → base64 string | `canvas.toBlob()` → binary Blob |
+| In ONML | `<img src="data:image/jpeg;base64,..." />` | `<img src="name:FullPageImageXXXX" />` |
+| Multipart | All content in Presentation part | Separate binary MIME part |
+| Size overhead | ~33% from base64 encoding | None (raw binary) |
+| Preview | Data URL in `<img>` | `URL.createObjectURL(blob)` |
+
+The `onenoteapi` library's `TypedFormData.asBlob()` already handles mixed string/ArrayBuffer content via the `Blob` constructor. We push the image Blob directly to `page.dataParts` following the same pattern as `addAttachment()`.
+
+### Files Changed
+
+| File | Change |
+|------|--------|
+| `src/renderer.html` | NEW — Extension page for offscreen rendering |
+| `src/scripts/renderer.ts` | NEW — Renderer script: port communication, reads HTML from storage, iframe CSS isolation, incremental canvas stitching, interaction shield |
+| `src/scripts/contentCapture/fullPageScreenshotHelper.ts` | REWRITTEN — Reads single final JPEG from session storage, converts to Blob |
+| `src/scripts/extensions/webExtensionBase/webExtensionWorker.ts` | Added `takeFullPageScreenshot()` — renderer window creation, scroll-capture loop, sends captures to renderer for stitching |
+| `src/scripts/extensions/extensionWorkerBase.ts` | Added abstract `takeFullPageScreenshot()` method + registered function key |
+| `src/scripts/extensions/safari/safariWorker.ts` | Fallback: single viewport capture via `takeTabScreenshot()` |
+| `src/scripts/extensions/bookmarklet/inlineWorker.ts` | Fallback: throws not-implemented |
+| `src/scripts/extensions/chrome/manifest.json` | Added `storage` permission; `renderer.html` as web-accessible resource |
+| `src/scripts/constants.ts` | Removed `fullPageScreenshotUrl`; added `takeFullPageScreenshot` function key |
+| `src/scripts/saveToOneNote/oneNoteSaveableFactory.ts` | FullPage mode sends binary MIME part instead of base64 data URL |
+| `src/scripts/clipperUI/components/previewViewer/fullPagePreview.tsx` | Preview uses `URL.createObjectURL(blob)` for image display |
+| `src/scripts/clipperUI/clipper.tsx` | Passes `rawUrl` to `getFullPageScreenshot()` for base URL resolution |
+| `gulpfile.js` | Added `bundleRenderer` task to build pipeline |
+
+### Data Flow Diagram (Legacy — Pre-V3)
+
+> **Note:** This diagram shows the original flow via clipper.tsx. As of V3 (self-contained sign-in),
+> clipper.tsx is no longer injected. See `docs/unified-window-plan.md` for the current V3 flow diagram
+> where the worker opens the renderer directly and `contentCaptureInject.ts` replaces the
+> clipper.tsx → fullPageScreenshotHelper.ts chain.
+
+```
+[Legacy flow — kept for reference]
+
+clipper.tsx                    extensionWorkerBase.ts           webExtensionWorker.ts
+    |                                |                                |
+    |-- getFullPageScreenshot() -->  |                                |
+    |   (stores HTML + URL +         |                                |
+    |    statusText + CSS cache      |                                |
+    |    in session storage)         |                                |
+    |                                |-- takeFullPageScreenshot() --> |
+    |                                |                                |-- windows.create(renderer.html)
+    ...                              ...                              ...
+    [Save to OneNote]                |                                |
+    |-- push Blob to page.dataParts  |                                |
+    |-- multipart request with       |                                |
+    |   binary MIME part             |                                |
+```
+
+### Current Data Flow (V3)
+```
+User clicks extension button
+    → webExtensionWorker.openRendererWindow()
+    → checks isUserLoggedIn via offscreen/localStorage
+    → injects contentCaptureInject.js into original tab (if signed in)
+    → opens renderer.html as popup window
+
+contentCaptureInject.ts (content script on original tab)
+    → clones DOM, inlines hidden elements, neutralizes sticky/fixed (!important),
+      flattens shadow DOM, converts canvas→img, adds base tag, image sizes,
+      removes unwanted items, resolves lazy images
+    → chrome.runtime.sendMessage(JSON.stringify({html, baseUrl, title, url}))
+
+Worker receives contentCaptureComplete
+    → stores HTML/title/URL in chrome.storage.session
+    → sends "loadContent" to renderer via port
+
+Renderer loads content into iframe, sends "dimensions"
+    → Worker runs scroll-capture loop (scroll → captureVisibleTab → drawCapture)
+    → Renderer stitches on hidden canvas, finalizes to JPEG 95%
+    → Stores fullPageFinalImage in session storage
+
+User clicks Clip
+    → Renderer sends "save" via port
+    → Worker refreshes token (auth.updateUserInfoData)
+    → Worker reads JPEG from session storage, builds multipart form
+    → Worker POSTs to OneNote API, returns saveResult
+```
+
+---
+
+## Key Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| `@mozilla/readability` for article extraction | Apache 2.0, used by Firefox Reader View, well-maintained |
+| FullPage as default clip mode | Augmentation is no longer server-gated; FullPage is more universally useful |
+| Renderer popup window (not direct page scroll) | Avoids visible scrolling, scrollbar artifacts, and clipper UI in screenshots |
+| `chrome.storage.session` as data bus | Port/communicator JSON serialization chokes on multi-MB base64 data; session storage used for HTML input and single final JPEG output |
+| Port-based messaging (`runtime.connect`) | `scripting.executeScript` blocked on extension pages in MV3 |
+| PNG capture, JPEG 90% final output, 1280px width cap | PNG captures are lossless; single JPEG encode at finalize; no double compression; 1280px balances fidelity vs size |
+| Renderer-side incremental stitching | Each PNG capture sent to renderer via port (~1-3MB each, within port limits), drawn onto hidden canvas immediately; avoids storing N captures in session storage (was 4-8MB, now ~1-2MB for single final JPEG) |
+| Scroll stall detection | Stops capturing when `scrollY` doesn't change between captures; handles inflated `scrollHeight` from fixed→absolute conversion |
+| Content height cropping | Measures `scrollHeight` before position conversions; uses pre-conversion height to cap canvas, trimming blank space |
+| Interaction shield overlay | Transparent `div` at max z-index blocks all mouse/touch/pointer; keyboard/wheel blocked via JS listeners |
+| Binary Blob output (not base64) | Eliminates ~33% base64 encoding overhead; sent as binary MIME part per Graph API multipart spec |
+| Title bar for status (not overlay) | Overlay caused flashing during capture; title bar is never part of captured content |
+| `focused: true` for renderer window | `captureVisibleTab` requires the window to be painted; unfocused/occluded windows produce blank captures |
+| Localized status text via storage | Renderer can't access clipper's Localization module; status text passed through `chrome.storage.session` |
+
+---
+
+## Known Issues / Remaining Work
+
+### 1. CSS Fidelity (Implemented)
+- **DOM cleaning:** `contentCaptureInject.ts` runs the master DomUtils-compatible pipeline plus enhancements as self-contained inline functions (no imports): clone → inline hidden elements (computed display:none) → neutralize positioning (sticky→relative, fixed→absolute, all with !important) → flatten shadow DOM → canvas→image → base tag → image sizes → remove unwanted items (base64 binary styles [data:application], clipper elements + local-ref iframes, scripts/noscript, srcset, non-http/https link hrefs) → full DOCTYPE serialization → lazy image resolution (data-src → src)
+- **CSS delivery:** Renderer fetches external stylesheets directly via `fetch()` and inlines as `<style>` blocks — no CSSOM caching or session storage intermediary. Extension pages have `host_permissions: <all_urls>`
+- **Iframe isolation:** Renderer uses `<iframe id="content-frame">` — page CSS and renderer styles never conflict. Injects `[hidden]{display:none!important}` to enforce HTML hidden attribute against CSS overrides
+- **Position neutralization:** `sticky → relative !important`, `fixed → absolute !important` at both capture time (contentCaptureInject.ts) and render time (renderer.ts backup). Prevents sticky element repetition in stitched multi-viewport captures
+- **Content height cropping:** `scrollHeight` measured before position conversions to avoid inflated canvas height
+- **Port safety:** All `port.postMessage` calls wrapped in `safeSend()` to handle disconnected port errors (e.g., from devtools inspection)
+- **Article mode ONML cleanup:** Readability output cleaned via `cleanArticleHtml()` before caching — strips ONML-unsupported elements (video, audio, canvas, svg, etc.), removes all `style`/`class` attributes. Same cleaned HTML used for both preview and save, matching the old `toOnml()` pipeline. Preview styled with Segoe UI 11pt, 624px max-width (OneNote page width from `@OneNotePageWidth`)
+- **Files:** `contentCaptureInject.ts`, `renderer.ts`, `renderer.html`, `webExtensionWorker.ts`
+- **Remaining:** Right-edge clipping on zero-margin pages; video/streaming iframe embeds show broken players (cross-origin, same as server-side Puppeteer); CSR/shadow DOM sites (e.g., MSN.com on FAST framework) produce empty captures — `cloneNode(true)` cannot copy shadow roots per DOM spec, pre-existing limitation shared with server-side Puppeteer (`--disable-javascript`)
+
+### 2. Renderer Window Visibility
+- `captureVisibleTab` requires the window to be painted — occluded/off-screen windows produce blank captures
+- Current approach: renderer opens focused at same position/size as user's browser, **stays open** for mode switching/editing/save
+- Anti-maximize: `chrome.windows` API reverts maximized state; resize handler snaps back to original dimensions
+- **Future improvement:** CDP via `chrome.debugger` would allow invisible capture but requires `debugger` permission (shows warning banner)
+
+### 3. Capture Limits
+- PNG captures sent individually to renderer via port (no session storage for intermediates)
+- Canvas height capped at pre-conversion `contentHeight` or 16,384px (Chrome canvas dimension limit)
+- Scroll stall detection stops capture when page can't scroll further
+- Final JPEG 95% stored in session storage (~1-2MB); session storage only holds HTML + metadata + final image
+- Very long pages get bottom truncated; OneNote API would likely reject larger images anyway
+
+### 4. Right-Edge Content
+- Renderer width capped at 1280px; wider content reflows via CSS overrides (`max-width: 100%` on images/tables, `pre-wrap` on code)
+- Some layouts with explicit pixel widths may still clip
+- CDP approach would allow `captureBeyondViewport` for true full-width capture
+
+### 5. Test Infrastructure
+- Tests use PhantomJS (deprecated, ES5-only) and were already failing before these changes
+- Playwright migration discussed but deferred
+- `augmentationHelper_tests.ts` and `fullPagePreview_tests.tsx` updated for new interfaces
+
+### 6. Pre-existing Extension Errors
+- `Uncaught TypeError: Cannot read properties of undefined (reading 'logFailure')` — communicator error handler fires before `Clipper.logger` is initialized
+- `Could not establish connection. Receiving end does not exist.` — MV3 service worker lifecycle issue; port/message sent after worker suspension
+
+---
+
+## V3 Evolution: Self-Contained Sign-In
+
+The original architecture (described above) required injecting `clipperInject.ts` into the page to show a Mithril-based sign-in sidebar and initiate content capture via `clipper.tsx → fullPageScreenshotHelper.ts`. This failed on pages with strict Content Security Policy (CSP blocks iframe injection).
+
+V3 eliminates this dependency entirely:
+- Worker opens the renderer window directly on button click (no `clipperInject.ts`)
+- Renderer handles sign-in via MSA/OrgId overlay + OAuth popup
+- Content capture via standalone `contentCaptureInject.ts` injected by `scripting.executeScript` (CSP-immune)
+- Save with token refresh, telemetry, region capture, article/bookmark modes — all in the renderer
+- Old sidebar (clipperInject.ts → clipper.tsx → Mithril) is dead code
+
+See `docs/unified-window-plan.md` for the complete V3 architecture, flow diagram, and verification checklist.
+
+---
+
+## Build & Test
+
+```sh
+npm install
+npm run build          # Compiles TS, bundles, exports to /target
+```
+
+Load the extension from `target/edge/OneNoteWebClipper/edgeextension/manifest/extension/` (Edge) or `target/chrome` (Chrome).
+
+Gulp tasks: `bundleRenderer` (renderer.ts), `bundleRegionOverlay` (regionOverlay.ts), `bundleContentCaptureInject` (contentCaptureInject.ts) — all compiled and deployed to Chrome/Edge targets.
diff --git a/docs/i18n-a11y-contrast-plan.md b/docs/i18n-a11y-contrast-plan.md
new file mode 100644
index 00000000..e8395a29
--- /dev/null
+++ b/docs/i18n-a11y-contrast-plan.md
@@ -0,0 +1,184 @@
+# Renderer UI: i18n, Accessibility & Contrast Fixes
+
+## Context
+
+The new renderer-based unified window (V3) replaces the old Mithril-based injected sidebar. While the new UI uses better semantic HTML (`<button>`, `<textarea>`, `<label>`), it regressed in three areas compared to the old UI:
+
+1. **i18n** — ~15 hardcoded English strings that the old UI localized via `Localization.getLocalizedString()`
+2. **Accessibility** — Lost ARIA state attributes, keyboard navigation, focus outlines, and aria-live regions
+3. **Contrast** — Error text color `#ff6b6b` fails WCAG AA; region button border fails non-text contrast
+
+The old UI's patterns are the blueprint — most string keys already exist in `strings.json`, and the ARIA patterns are well-documented in the old components.
+
+### How i18n works in this extension
+
+Strings are fetched from `https://www.onenote.com/strings?ids=WebClipper.&locale={locale}` at startup by `extensionBase.ts`, stored in `localStorage.locStrings`. The renderer reads them via `loc(key, fallback)`. The `strings.json` file in the repo is the **English fallback only** — actual translations for 60 locales come from the server. New keys added to `strings.json` will only have English until the server is updated, so **reuse existing keys wherever possible**.
+
+### How locale is detected
+
+`extensionBase.ts` line 133: `navigator.language || navigator.userLanguage` → stored in `localStorage.locale`. A user override is also supported via `localStorage.displayLocaleOverride`. The old UI only set `<html lang="en">` statically — never dynamically. RTL was handled by loading separate CSS files (`clipper-rtl.css`), not via `lang`/`dir` attributes.
+
+## Files Modified
+
+| File | Changes |
+|------|---------|
+| `src/renderer.html` | `lang` attr, ARIA roles/attributes, `for` associations, aria-live region |
+| `src/scripts/renderer.ts` | Wire `loc()` to all remaining strings, dynamic `lang` attr, ARIA state management, keyboard nav, focus management, aria-live announcements |
+| `src/styles/renderer.less` | Focus outlines, error color fix, region button contrast, sr-only class, high-contrast media query |
+
+---
+
+## Phase 1: i18n (mirror old `Localization.getLocalizedString()` via existing `loc()`)
+
+### 1a. Wire sign-in panel to `loc()` in renderer.ts
+
+Sign-in panel HTML strings (`signin-description`, `signin-msa-btn`, `signin-orgid-btn`, `signin-progress`) were never replaced by JS. Now wired to existing keys:
+
+- `WebClipper.Label.SignInDescription` → sign-in description
+- `WebClipper.Action.SigninMsa` → MSA button
+- `WebClipper.Action.SigninOrgId` → OrgId button
+- "Signing in..." kept as hardcoded English (no existing key, brief transient state)
+
+### 1b. Wire field labels to `loc()`
+
+- Note label → `WebClipper.Label.Annotation` ("Note")
+- Save to label → `WebClipper.Label.ClipLocation` ("Location")
+- Source label → kept as hardcoded "Source" (no old UI equivalent, new element)
+- Title label → kept as hardcoded "Title" (old UI had no visible label, used placeholder only)
+
+### 1c. Wire remaining hardcoded strings to `loc()`
+
+| String | Key | Key status |
+|--------|-----|-----------|
+| `"Capture complete"` | — | **REMOVED** — dead code, never referenced |
+| `"No notebooks available"` | `WebClipper.SectionPicker.NoNotebooksFound` | EXISTS (60 locales) |
+| `"Error loading notebooks"` | `WebClipper.SectionPicker.NotebookLoadFailureMessage` | EXISTS (60 locales) |
+| `"Loading article..."` | `WebClipper.Preview.LoadingMessage` | EXISTS (60 locales) |
+| `"Article content not available..."` | `WebClipper.Preview.NoContentFound` | EXISTS (60 locales) |
+| `"Unknown error"` | — | kept as-is (technical fallback) |
+| `"Sign-in failed..."` | `WebClipper.Error.SignInUnsuccessful` | EXISTS (60 locales) |
+
+### 1d. New keys in strings.json — ZERO
+
+All meaningful strings wired to existing server-translated keys. Four strings remain English-only as acceptable fallbacks (Title, Source, Signing in..., Copy diagnostics aria-label).
+
+---
+
+## Phase 2: Contrast Fixes
+
+### 2a. Error text color (CRITICAL — 3.8:1 → 5.3:1)
+
+`.signin-error` color: `#ff6b6b` → `#ff9999` (~5.3:1 on `#56197c`, passes WCAG AA)
+
+### 2b. Region add-button border (1.7:1 → 3.4:1)
+
+Border: `#bbb` → `#999` (~3.4:1 on `#f3f2f1`, passes SC 1.4.11)
+Text: `#666` → `#555` (~5.9:1, improvement)
+
+### 2c. Focus outlines (mirroring old `@FocusOnPurpleBackground: #f8f8f8`)
+
+- `#sidebar` interactive elements: `outline: solid 1px #f8f8f8 !important; outline-offset: 1px`
+- Sign-in buttons: `outline-offset: 2px`
+- High contrast mode: `outline: solid 2px Highlight !important; outline-offset: 2px !important`
+
+---
+
+## Phase 3: Accessibility — ARIA & Keyboard
+
+### 3a. `<html lang>` attribute (WCAG 3.1.1 Level A)
+
+Static `lang="en"` in HTML + dynamic override in JS reading `localStorage.locale` (or `displayLocaleOverride`). Converts `_` to `-` for BCP 47 (e.g., `zh_CN` → `zh-CN`).
+
+### 3b. Mode buttons — ARIA state
+
+- Container: `role="toolbar"` with localized `aria-label`
+- Buttons: standard `<button>` elements with `aria-pressed` (toggle button pattern)
+- Reverted from `role="radio"` / radiogroup — buttons are more natural for mode selection
+
+### 3c. Mode buttons — arrow key navigation
+
+Arrow Up/Down/Left/Right + Home/End navigation between mode buttons. Mirrors old `enableAriaInvoke()` from `componentBase.ts`.
+
+### 3d. Section picker — ARIA combobox
+
+- Trigger: `role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded`
+- List items: `role="option"`, `aria-selected`
+- Escape to close, arrow keys to navigate
+
+### 3e. Label `for` associations
+
+- `<label for="title-field">` and `<label for="note-field">`
+- `aria-labelledby` on source-url and section-selected (non-input elements)
+
+### 3f. aria-live regions
+
+- `<div id="aria-status" class="sr-only" aria-live="polite" aria-atomic="true">`
+- `announceToScreenReader()` helper for: capture start/complete, mode change, save start/success/error, sign-in error
+
+### 3g. Sign-in focus management
+
+Focus first sign-in button on overlay show; focus first mode button on overlay hide.
+
+### 3h. Copy diagnostics button
+
+`aria-label="Copy diagnostic information"` (hardcoded English — technical label).
+
+### 3i. Sign-out disabled state
+
+Replace `pointer-events: none` + opacity with `aria-disabled="true"` + `tabindex="-1"` (accessible to keyboard/screen readers).
+
+---
+
+## RTL Support Assessment (Deferred — Separate Effort)
+
+**How old UI handled RTL:**
+- `localeSpecificTasks.ts` calls `Rtl.isRtl(locale)` (checks `ar, fa, he, sd, ug, ur`)
+- Loads `clipper-rtl.css` / `sectionPicker-rtl.css` instead of LTR versions
+- `styledFrameFactory.ts` flips iframe position (`left: 0` instead of `right: 0`)
+
+**Locale override:** No UI exists for switching locale. `localStorage.displayLocaleOverride` is a developer/testing mechanism only (set via console).
+
+**What RTL would need for the renderer (estimated ~50-80 LESS lines + testing):**
+1. Detect RTL locale and set `dir="rtl"` on `<html>`
+2. Convert `renderer.less` to CSS logical properties (`margin-inline-start/end`, etc.)
+3. Flip: sidebar position, section picker arrow, user-info alignment, feedback icon margin
+4. Test with at least one RTL locale (ar or he)
+
+**Why defer:** RTL affects layout fundamentals. Best done as a dedicated pass.
+
+---
+
+## Implementation Order
+
+1. **Phase 2a** — Error contrast fix (LESS)
+2. **Phase 1a–1c** — i18n wiring (renderer.ts only, reuse existing keys)
+3. **Phase 2b–2c** — Remaining contrast + focus outlines (LESS)
+4. **Phase 3a** — `<html lang>` + dynamic locale (HTML + TS)
+5. **Phase 3e** — Label `for` associations (HTML)
+6. **Phase 3b–3c** — Mode button ARIA + arrow keys (TS)
+7. **Phase 3d** — Section picker ARIA (HTML + TS)
+8. **Phase 3f** — aria-live regions (HTML + LESS + TS)
+9. **Phase 3g–3i** — Focus management, copy button label, signout disabled state (TS)
+
+---
+
+## Verification
+
+1. **Build**: `npm run build` — check for TS compilation errors
+2. **Edge target**: Verify `renderer.js` and `renderer.css` in target output
+3. **Manual testing in Edge** (verified):
+   - Sign-in panel: localized text appears
+   - Mode buttons: arrow key navigation, `aria-checked` updates in devtools
+   - Section picker: `aria-expanded` toggles, Escape closes, arrow keys navigate items
+   - Save error: `#ff9999` error text readable
+   - Tab order: mode buttons → title → note → section → Clip → Cancel → feedback → sign out (wraps)
+   - Focus outlines: `2px solid #f8f8f8` visible on all sidebar controls
+   - Focus management: Cancel focused during capture → Full Page button after capture → sign-in button on overlay
+4. **No functional regressions**: Capture, save, region, article, bookmark modes all work
+5. **Screen reader testing** (verified with NVDA + Edge):
+   - ARIA roles, states, and aria-live announcements are implemented and working
+   - Accessibility tree verified correct via `edge://accessibility` — all nodes present with proper roles
+   - NVDA reads sidebar controls, mode buttons, section picker, and aria-live announcements
+   - Blur handler was removed to avoid conflicting with screen reader focus management
+   - Keydown handler allows navigation keys (arrows, Tab, Escape, Home/End, PageUp/PageDown) and modifier combos to pass through for screen reader compatibility
+   - **Note**: Previous testing on a stale devbox showed Edge not activating accessibility API flags for extension popup windows. A devbox reboot resolved this — NVDA works correctly with the renderer window
diff --git a/docs/unified-window-plan.md b/docs/unified-window-plan.md
new file mode 100644
index 00000000..dd271098
--- /dev/null
+++ b/docs/unified-window-plan.md
@@ -0,0 +1,373 @@
+# Plan: Unified Clipper Window
+
+## Context
+
+The OneNote Web Clipper previously used two separate UI contexts: an injected iframe sidebar on the original page, and a separate renderer popup window for full-page screenshot capture. This created a jarring experience.
+
+**Goal:** Merge the clipper UI into the renderer window so everything lives in one place.
+
+## V1 — Implemented
+
+### Layout
+```
+Window width: 1280 (content) + 322 (sidebar) = ~1602px
+┌──────────────────────────────────┬──────────────┐
+│                                  │              │
+│  Content iframe (1280px)         │  Sidebar     │
+│  pointer-events: none            │  (322px)     │
+│                                  │              │
+│  During capture: live render     │  Logo        │
+│  (scrolling page)                │  Progress    │
+│                                  │  "3 of 5"    │
+│  After capture: scrollable       │  Cancel btn  │
+│  preview image                   │              │
+│                                  │  Save btn    │
+│                                  │              │
+└──────────────────────────────────┴──────────────┘
+```
+
+### What V1 Includes
+- Branded sidebar with OneNote logo (`onenote_logo_clipper.png`)
+- OneNote purple theme via `renderer.less` (uses `@OneNotePurple`, `@DarkBackgroundColor`, `@DarkHoverColor`)
+- Localized progress text ("Capturing {0} of {1}...") via `fullPageStrings` in session storage
+- Sidebar pixel cropping: `captureVisibleTab` captures full window, canvas only draws left content area
+- Preview phase: iframe hides, scrollable image appears with Save/Close buttons
+- Cancel closes window (port disconnect triggers cleanup)
+- All i18n keys from existing `strings.json` + two new keys (`IncrementalProgress`, `Saving`)
+
+### Files Modified (V1)
+| File | Change |
+|------|--------|
+| `src/renderer.html` | Flexbox layout: content iframe + sidebar div, references `renderer.css` and logo |
+| `src/styles/renderer.less` | NEW — LESS styles using OneNote brand colors |
+| `src/scripts/renderer.ts` | Sidebar progress, capture cropping, preview phase, i18n string application |
+| `src/scripts/contentCapture/fullPageScreenshotHelper.ts` | Passes `fullPageStrings` i18n map via session storage |
+| `src/scripts/extensions/webExtensionBase/webExtensionWorker.ts` | Window width = content + sidebar, passes `totalViewports` |
+| `src/strings.json` | New keys: `ScreenShot.IncrementalProgress`, `ScreenShot.Saving` |
+| `gulpfile.js` | Compiles `renderer.less` alongside `clipper.less` |
+
+---
+
+## V2/V3 — Implemented: Full Clipper UI in Unified Window
+
+### Design Principle
+- **V2**: Post-auth UI (modes, save, region, section picker) in the renderer window
+- **V3**: Self-contained sign-in — sign-in also moved into the renderer; no clipperInject.ts injection at all
+- No Mithril.js — plain HTML/TS sidebar with port messages to the worker
+- **Self-contained extraction** — Readability and bookmark metadata extracted directly in renderer from content-frame DOM, no round-trip to worker/clipper.tsx
+
+### Flow (Current)
+
+**No clipperInject.ts injection. No Mithril sidebar. Everything in the renderer window.**
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ 1. USER CLICKS EXTENSION BUTTON                                     │
+│                                                                     │
+│    Worker.closeAllFramesAndInvokeClipper()                          │
+│      ├─ activeRendererWindowId set? → focus existing window, return │
+│      └─ openRendererWindow()                                        │
+│           ├─ clipperData.getValue("isUserLoggedIn")                 │
+│           └─ launchRenderer(signedIn: boolean)                      │
+└─────────────────────────────────────────────────────────────────────┘
+                            │
+              ┌─────────────┴─────────────┐
+              ▼                           ▼
+┌──────────────────────┐    ┌──────────────────────────────────┐
+│ NOT SIGNED IN        │    │ SIGNED IN                        │
+│                      │    │                                  │
+│ Opens renderer window│    │ Opens renderer window            │
+│ (no content capture) │    │ + injects contentCaptureInject.js│
+│                      │    │   into original tab (parallel)   │
+│ Renderer detects no  │    │                                  │
+│ userInformation in   │    │ contentCaptureInject cleans DOM, │
+│ localStorage         │    │ sends HTML, title, URL           │
+│   → shows sign-in    │    │   → sendMessage to worker        │
+│     overlay          │    │   → worker stores in             │
+│                      │    │     chrome.storage.session        │
+└──────┬───────────────┘    └──────────────┬───────────────────┘
+       │                                   │
+       ▼                                   ▼
+┌──────────────────────┐    ┌──────────────────────────────────┐
+│ 2. SIGN-IN FLOW      │    │ 3. CAPTURE FLOW                  │
+│                      │    │                                  │
+│ User clicks MSA or   │    │ Renderer port "ready"            │
+│ OrgId button         │    │   → worker sends "loadContent"   │
+│   → port: signIn     │    │     (after content captured)     │
+│   → worker opens     │    │                                  │
+│     OAuth popup via   │    │ Renderer loads HTML into iframe, │
+│     windows.create    │    │ processes CSS, sends "dimensions"│
+│   → webRequest detects│    │                                  │
+│     redirect          │    │ Worker scroll-capture loop:      │
+│   → updateUserInfoData│    │   scroll → captureVisibleTab     │
+│   → port: signInResult│    │   → drawCapture → drawComplete   │
+│                      │    │   → repeat until atBottom         │
+│ Renderer hides overlay│    │   → finalize                     │
+│ shows sidebar + iframe│    │                                  │
+│ injects content       │    │ Renderer stitches JPEG on canvas,│
+│ capture script        │    │ stores in session storage,       │
+│   → proceeds to ──────┼───►│ enables mode buttons + sign-out  │
+│     capture flow      │    │                                  │
+└──────────────────────┘    └──────────────┬───────────────────┘
+                                           │
+                                           ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│ 4. MODE SELECTION                                                   │
+│                                                                     │
+│ Full Page: preview-container shows stitched JPEG (cached)           │
+│ Article:  Readability on content-frame DOM clone → preview-frame    │
+│ Bookmark: og:image/description from DOM → card in preview-frame     │
+│ Region:   overlay injected on original tab → crosshair selection    │
+│           → captureVisibleTab → canvas crop → multi-region support  │
+└──────────────────────────────┬──────────────────────────────────────┘
+                               │
+                               ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│ 5. SAVE (CLIP)                                                      │
+│                                                                     │
+│ lockSidebar() — all controls + sign-out disabled                    │
+│ Renderer → port: { action: "save", title, annotation, url, mode,   │
+│                    sectionId, contentHtml }                         │
+│ Worker reads accessToken from localStorage via offscreen            │
+│ Worker builds multipart form (ONML + image MIME parts)              │
+│ Worker POSTs to https://www.onenote.com/api/v1.0/.../pages         │
+│ Worker → port: { action: "saveResult", success, pageUrl/error }     │
+│                                                                     │
+│ Success: Clip → "View in OneNote" link, Close stays                 │
+│ Error: error message + expandable diagnostics (correlationId, date) │
+└──────────────────────────────┬──────────────────────────────────────┘
+                               │
+                               ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│ 6. SIGN-OUT                                                         │
+│                                                                     │
+│ Renderer → port: { action: "signOut", authType }                    │
+│ Worker: doSignOutAction (hits sign-out URL)                         │
+│ Worker: clears userInformation, notebooks, curSection, isUserLoggedIn│
+│ Worker → port: { action: "signOutComplete" }                        │
+│ Renderer: full UI reset (clears DOM, caches, notebook dropdown)     │
+│ Renderer: shows sign-in overlay (stays in same window)              │
+│                                                                     │
+│ User can sign in again as same or different user without closing    │
+└─────────────────────────────────────────────────────────────────────┘
+
+WINDOW LIFECYCLE:
+  • Duplicate prevention: activeRendererWindowId check
+  • Tab navigation: tabs.onUpdated closes renderer when source tab URL changes
+  • Focus retention: blur handler re-focuses (disabled during sign-in + region)
+  • Resize lock: resize handler + chrome.windows API reverts maximize
+  • UI lock: sign-out + controls disabled during capture and save
+  • Cleanup: port disconnect removes window + session storage keys
+
+MESSAGE PROTOCOL (port — all renderer sends via safeSend() wrapper):
+  Renderer → Worker: ready, dimensions, scrollResult, drawComplete,
+                     finalizeComplete, save, startRegion, signIn, signOut,
+                     telemetry, openFeedback
+  Worker → Renderer: loadContent, scroll, initCanvas, drawCapture,
+                     finalize, saveResult, regionCaptured, regionCancelled,
+                     signInResult, signOutComplete
+
+MESSAGE PROTOCOL (chrome.runtime.sendMessage — JSON strings):
+  contentCaptureInject → Worker: contentCaptureComplete
+  regionOverlay → Worker: regionSelected, regionCancelled
+```
+
+### Layout
+```
+Window width: 1280 (content) + 322 (sidebar) = ~1602px
+┌──────────────────────────────────┬──────────────────────┐
+│                                  │ Logo  OneNote Clipper │
+│  content-frame (capture)         │                      │
+│  OR preview-frame (article/bkmk) │ [Full Page] selected │
+│  OR preview-container (JPEG)     │ [Article]            │
+│  OR region thumbnails + add btn  │ [Bookmark]           │
+│                                  │ [Region]             │
+│  pointer-events: none (capture)  │ ─────────────────    │
+│  scrollbar visible (preview)     │ TITLE  [textarea]    │
+│                                  │ NOTE   [textarea]    │
+│                                  │ SOURCE url           │
+│                                  │ SAVE TO [dropdown]   │
+│                                  │                      │
+│                                  │ [Cancel] [Clip]      │
+│                                  │ progress/status/error│
+│                                  │                      │
+│                                  │ user@email | Sign out│
+└──────────────────────────────────┴──────────────────────┘
+```
+
+### Three Content Panels (Left Side)
+- **content-frame** (`<iframe>`): Loads page HTML for capture. DOM also used as source for Readability and bookmark extraction. Visible during capture, hidden after.
+- **preview-frame** (`<iframe>`): Article and bookmark HTML rendered via `document.write`. Hidden during full-page/region mode.
+- **preview-container** (`<div>`): Scrollable JPEG preview image after capture (full-page), OR region thumbnails with ×remove buttons and "+Add another region" button. Scrollbar visible. Hidden during article/bookmark modes.
+
+### Sidebar Implementation
+Plain HTML + TypeScript — no Mithril dependency:
+- **Mode buttons**: 4 buttons with SVG icons. Full Page pre-selected. All modes disabled during capture, enabled after.
+- **Title**: `<textarea>` pre-filled from page title (session storage), editable
+- **Note**: `<textarea>` placeholder "Add a note..."
+- **Source URL**: read-only display from session storage
+- **Section picker**: `<select>` dropdown populated from `localStorage.notebooks` cache + auto-refreshed from OneNote API. Flattens notebook > section hierarchy including section groups. Selection persisted to `localStorage.curSection`. Token expiration check uses relative `accessTokenExpiration` with `lastUpdated` offset.
+- **Button row**: Cancel + Clip side by side (flex row). Clip disabled during capture and save.
+- **Status panel**: Below buttons. Shows capture progress during screenshot, "Saving..." during API call, error + expandable diagnostics on failure.
+- **User info footer**: Pinned to bottom of sidebar (outside sidebar-body). Shows user email/name + "Sign out" link. Hidden if no user info available. Disabled during save lock.
+
+### Region Capture
+Standalone `regionOverlay.ts` injected directly into original tab via `scripting.executeScript`. No Mithril, no clipper.tsx reactivation.
+- **Overlay**: Full-viewport div with crosshair cursor, canvas-based dark overlay with hole-punch selection
+- **Instruction bar**: Centered pill at top with i18n instruction text + "Back (Esc)" button. Uses Shadow DOM for CSS isolation from page styles. Hides during drag, reappears on too-small selection. i18n strings passed from renderer → worker → `window.__regionStrings` injection before overlay script.
+- **Selection**: Mouse drag draws rectangle. Min 5px. Esc/Back cancels (stays in region mode, shows thumbnails or "Add another region").
+- **Message format**: JSON string via `chrome.runtime.sendMessage` (required by offscreen.ts message handler)
+- **Capture**: Worker captures original tab as JPEG 95% via `captureVisibleTab`, sends full image + coords via port
+- **Crop**: Renderer crops using canvas with DPR handling, converts to JPEG 95%
+- **Multi-region**: `regionImages[]` array accumulates captures. Thumbnails with ×remove buttons and "+Add another region" button. Regions cached across mode switches within session. Each region stored as separate session storage key (`regionImage_0`, `regionImage_1`, ...) to avoid size limits.
+- **Save**: Worker reads individual region keys, converts each to blob, builds ONML with one `<img>` per region separated by `&nbsp;`
+- **Focus**: Renderer blur handler skips re-focus when `currentMode === "region"`. Worker focuses original tab's window via `tabs.get` + `windows.update`.
+
+### Sign-Out Flow
+Message-based, stays in renderer window (V3):
+1. Renderer: `safeSend({ action: "signOut", authType })`
+2. Worker: `doSignOutAction(authType)` hits sign-out URL, `clipperData.removeKey()` for userInformation/curSection/notebooks/isUserLoggedIn
+3. Worker → port: `{ action: "signOutComplete" }`
+4. Renderer: full UI reset (clears DOM, caches, notebook dropdown)
+5. Renderer: shows sign-in overlay (stays in same window, user can sign in again)
+
+### Section Refresh
+Auto-fetch on renderer open (runs in background during capture):
+1. Reads access token from `localStorage.userInformation` (TimeStampedData format)
+2. Checks token expiration: `(lastUpdated + accessTokenExpiration * 1000 - 180000) < Date.now()`
+3. Fetches `https://www.onenote.com/api/v1.0/me/notes/notebooks?$expand=sections,sectionGroups($expand=sections,sectionGroups)`
+4. Compares with cached — only updates dropdown if data changed
+5. Preserves selected section if still exists in fresh data
+6. Silently keeps cached data on failure
+
+### Save Flow (Worker Side)
+Worker receives `{ action: "save" }` port message and:
+1. Reads page URL from session storage
+2. Gets access token from `clipperData.getValue("userInformation")` → `data.accessToken`
+3. Builds OneNote page ONML: annotation → "Clipped from" citation → content
+   - Full Page: image MIME part from `fullPageFinalImage` session storage
+   - Region: multiple image MIME parts from `regionImage_N` session storage keys
+   - Article/Bookmark: HTML from `contentHtml` message field
+4. Generates UTC offset timestamp matching `OneNotePage.formUtcOffsetString`
+5. POSTs multipart form to `https://www.onenote.com/api/v1.0/me/notes/sections/{sectionId}/pages`
+6. On success: parses `links.oneNoteWebUrl.href` from response, sends `saveResult` with `pageUrl`
+7. On error: captures error message, status, X-CorrelationId, X-UserSessionId, date; sends as `saveResult`
+
+### i18n
+Renderer reads `localStorage.locStrings` directly (shared extension origin). Falls back to hardcoded English. No session storage dependency for strings (legacy `fullPageStrings` passthrough still exists in fullPageScreenshotHelper but unused).
+
+### Window Lifecycle
+- **Duplicate prevention**: `closeAllFramesAndInvokeClipper` override checks `activeRendererWindowId`
+- **Tab navigation**: `tabs.onUpdated` listener closes renderer when source tab URL changes
+- **Focus retention**: `blur` handler re-focuses renderer (disabled after save and during region capture)
+- **Resize lock**: `resize` handler snaps back to original dimensions
+- **Cleanup**: port disconnect (Cancel click or window close) triggers worker cleanup
+
+### Files Modified (V2/V3)
+| File | Change |
+|------|--------|
+| `src/renderer.html` | Two iframes + sidebar with mode buttons, metadata fields, button row, status panel, user-info footer |
+| `src/styles/renderer.less` | Full sidebar styles, user-info footer, region thumbnails/buttons, preview scrollbar |
+| `src/scripts/renderer.ts` | Mode switching, Readability, bookmark extraction, section picker + auto-refresh, region capture + multi-region, sign-out, save flow, UI lock, i18n |
+| `src/scripts/extensions/webExtensionBase/webExtensionWorker.ts` | Save handler (fullpage/region/article/bookmark), sign-out handler, region overlay injection + message listener, duplicate window guard, tab nav listener |
+| `src/scripts/extensions/regionOverlay.ts` | NEW — Standalone crosshair overlay for region selection on original tab |
+| `src/scripts/contentCapture/fullPageScreenshotHelper.ts` | Passes pageTitle, legacy i18n strings |
+| `src/scripts/clipperUI/clipper.tsx` | hideUi for signed-in users, post-sign-in transition, showSignInPanel handler, non-signed-in guard |
+| `src/scripts/extensions/clipperInject.ts` | showUi handler (mirror of hideUi) |
+| `src/scripts/constants.ts` | New keys: showUi, showSignInPanel, startRegionCapture, regionCaptureComplete, regionCaptureCancelled |
+| `gulpfile.js` | Compiles + deploys regionOverlay.js to Chrome and Edge targets |
+
+---
+
+## Verification Checklist
+
+### V1 (Done)
+- [x] Window opens at correct width (content + sidebar)
+- [x] Sidebar shows OneNote branding and progress
+- [x] Captures exclude sidebar pixels
+- [x] Preview appears after capture
+- [x] Cancel/Close works
+- [x] All strings localized
+- [x] LESS styles compiled and deployed
+
+### V2/V3 (Done)
+- [x] Mode buttons switch left panel content (Full Page, Article, Bookmark, Region)
+- [x] Article mode: Readability extracts content directly from content-frame DOM
+- [x] Bookmark mode: metadata card with og:image/description from DOM
+- [x] Title editable, Note field, Source URL display
+- [x] Custom section picker (ul/li dropdown) with scrollbar + auto-refresh from API
+- [x] Clip saves to OneNote via direct fetch to API (multipart form)
+- [x] Window stays open after capture for mode switching
+- [x] Save includes annotation, "Clipped from" citation, timestamp
+- [x] Post-save "View in OneNote" button with page URL from API response
+- [x] Error display with expandable diagnostic info (correlation ID, date, status)
+- [x] i18n from localStorage (locStrings) — no session storage dependency
+- [x] Duplicate window prevention (focus existing on re-click)
+- [x] Tab navigation detection closes renderer window
+- [x] Modal-like focus (blur handler re-focuses renderer, disabled during sign-in + region)
+- [x] UI lock during capture and save (all inputs + sign-out disabled)
+- [x] Close + Clip side-by-side button row
+- [x] Region capture: canvas-drawn crosshair overlay, overflow:hidden on root
+- [x] Multi-region: thumbnails, ×remove, +add another, cached across mode switches
+- [x] Region save: multiple images as separate MIME parts in ONML
+- [x] Self-contained sign-in: MSA/OrgId overlay, OAuth popup, no clipperInject injection
+- [x] Sign-out from renderer → shows sign-in overlay (stays in same window)
+- [x] Sign-out cleanup: clears notebooks, section cache, stale capture data
+- [x] Content capture via standalone contentCaptureInject.ts (master DomUtils pipeline + enhancements, no imports, no iframe injection)
+- [x] Position neutralization with `!important` prevents sticky element duplication in stitched captures
+- [x] Stylesheet caching removed — renderer fetches CSS directly via `<link>` tags
+- [x] `[hidden]{display:none!important}` CSS override enforces HTML hidden attribute
+- [x] `safeSend()` wrapper on all port.postMessage calls (handles disconnected port from devtools)
+- [x] User info footer pinned to sidebar bottom
+- [x] Preview container + sidebar-body scrollbars visible
+- [x] Full-page preview restored from cached data URL when switching modes
+- [x] Anti-maximize: chrome.windows API reverts maximized state
+- [x] Article/bookmark preview: links disabled (pointer-events: none), consistent scrollbar
+- [x] Feedback link in footer: smiley icon + i18n label, hidden for MSA users, opens MS Feedback Portal popup with context params (LogCategory, originalUrl, clipperId, usid, version, type). Per-session USID (cccccccc- prefix) sent as X-UserSessionId header in save API calls for log correlation.
+- [x] Error diagnostics copy button: clipboard icon next to "More information", copies error text via navigator.clipboard.writeText
+- [x] Article preview header bar: highlighter toggle, serif/sans-serif font toggle, font size +/- (2px increments, 8–72px). Purple toolbar above preview-frame, visible only in article mode. TextHighlighter library injected into iframe for drag-to-highlight with yellow (#fefe56) spans. Delete buttons (red circle ×, top-left) on each highlight group. Font/size applied to saved OneNote content via wrapping `<div style>`. Highlight state preserved across mode switches via `articleWorkingHtml`.
+- [x] Save timeout: 30-second client-side timeout in renderer (service worker setTimeout unreliable — SW goes inactive). Shows "Request timed out (30s)" with retry-enabled Clip button.
+- [x] Version bump to 3.11.0, gulp-uglify v2→v3 for ES6+ minification, `<meta charset="utf-8">` in renderer.html
+- [x] Full-page image width fix: renderer sends actual CSS width (contentPixelWidth/DPR) to worker for ONML `<img width>`, fixing aspect ratio distortion
+- [x] Capture progress: removed "Clipping Page" heading (reserved for save phase), progress bar hidden until first viewport capture
+- [x] Mode buttons reverted from role="radio" to role="toolbar" + aria-pressed (more natural toggle button pattern)
+- [x] NVDA screen reader verified working with Edge after devbox reboot
+- [x] Consistent × button positioning: region thumbnails and highlight delete buttons both use top-left corner
+- [x] Success banner: separate from Clip button — "✓ Clip Successful!" banner with purple "View in OneNote" button (opens page + closes window). Clip button stays as Clip for re-clipping. Banner clears on mode switch, re-clip, or section change.
+- [x] Hierarchical section picker: notebook headings (with notebook.png icon) and section group headings (with section_group.png icon) as non-clickable groupings. Sections indented under their parent with section.png icon. Icons inverted to white for dark background contrast. Keyboard nav skips headings.
+- [x] Section selection decoupled from button state: changing section only clears success banner, does not touch Clip button disabled/text state (was causing premature Clip enable during capture).
+- [x] Lint conformance: fixed all tslint errors in renderer.ts, regionOverlay.ts, webExtensionWorker.ts, domUtils.ts (null→undefined, var→let, quotemark, else placement, shadowed variable). Only pre-existing third-party definition file errors remain.
+- [x] Service worker keepalive: renderer sends keepalive ping every 25s via port to prevent MV3 service worker suspension while popup is open.
+- [x] Inactivity auto-close: renderer closes after 5 minutes without mouse, keyboard, scroll, or focus activity. Timer resets on any interaction.
+
+---
+
+## Known Limitations
+
+### Capture Quality
+1. **Viewport width vs responsive breakpoints** — Content-frame renders at 1280px. Most sites (including MS Learn at 1088px breakpoint) render correctly, but sites with breakpoints above 1280px may lose sidebars or switch to mobile layout. CSS `zoom` doesn't affect media queries. Widening the cap is possible but creates wider images. A future approach could capture at the original tab viewport width and scale on save.
+2. ~~Sticky element duplication~~ — Resolved. Position neutralization (`sticky → relative`, `fixed → absolute`) now uses `!important` via `setProperty()` in both `contentCaptureInject.ts` and `renderer.ts`, beating CSS utility classes like `.position-sticky{position:sticky!important}`. Hidden duplicate elements (e.g., MS Learn collapsible TOC) handled by `inlineHiddenElements` + `[hidden]{display:none!important}` CSS override.
+3. ~~Bottom void on grid-layout sites~~ — Resolved. Canvas is trimmed to `stitchYOffset` (actual pixels drawn) during finalize, removing any trailing blank space.
+4. **Right-edge clipping** — Pages with 0 margins may get content cut off at the right edge.
+5. **Canvas height cap** — Maximum stitched canvas height is 16384px (browser limitation).
+6. **Video/streaming embeds** — YouTube and other iframe-based video embeds show broken players in the content iframe (cross-origin restrictions, no JS execution). Server-side Puppeteer had the same limitation (showed "Unable to execute Javascript"). Left as-is to avoid accidentally stripping legitimate iframe content.
+7. **Client-side rendered / Shadow DOM sites** — Sites that deliver a blank JavaScript shell and render all content client-side via web components (e.g., MSN.com rebuilt on Microsoft FAST framework) produce empty captures. `document.cloneNode(true)` cannot copy shadow root content per the DOM spec, so custom element shells clone as empty boxes. This is a **pre-existing limitation** — server-side Puppeteer also ran with `--disable-javascript` and would see the same blank shell. Affects both full-page screenshot and article extraction (Readability finds no content). Potential future mitigations: `Element.getHTML({ serializableShadowRoots: true })` API, manual shadow root traversal, or `document.body.innerText` fallback for article mode.
+
+### ~~Missing Features~~ Implemented
+6. ~~**Self-contained sign-in**~~ — Implemented. Worker opens renderer directly on button click (no clipperInject.ts injection). Renderer checks `localStorage.userInformation` — shows MSA/OrgId sign-in overlay when not signed in. Sign-in via port messages, OAuth popup via `chrome.windows.create`, `auth.updateUserInfoData` on redirect. Content capture via standalone `contentCaptureInject.ts` (injected by worker via `scripting.executeScript`). Sign-out stays in renderer (shows sign-in overlay, clears storage). Custom section picker with scrollable `<ul>/<li>` dropdown. UI locked during capture to prevent race conditions. Region overlay selection border drawn on canvas (no separate div). Old injected sidebar (clipperInject.ts → clipper.tsx → Mithril) is now dead code.
+
+### UI Polish (Deferred)
+7. **Toolbar layout redesign** — Current sidebar takes 322px width. A top-bar + bottom-bar layout would eliminate the sidebar width tax, making the window narrower and giving content full width.
+
+### Technical Debt
+8. ~~fullPageStrings in session storage~~ — Resolved. Removed legacy i18n passthrough from fullPageScreenshotHelper.ts. Renderer reads from localStorage directly.
+9. ~~fullPageScreenshotHelper promise~~ — Resolved. Promise now resolves on `finalizeComplete` with `{ success: true, format: "jpeg", cssWidth }`. Session storage cleanup runs correctly; `fullPageFinalImage` kept for save flow, cleaned up on window close.
+10. ~~Save URL from session storage~~ — Resolved. URL now passed via port message (`message.url`) instead of session storage. All save parameters (title, url, annotation, mode, sectionId, contentHtml) come from the port message. Only `fullPageFinalImage` and `regionImage_N` keys remain in session storage (too large for port messages).
+11. **Readability bundled in renderer** — Dynamic import pattern added but browserify converts to synchronous require (no code-splitting). True lazy-loading requires bundler upgrade (webpack, rollup, esbuild).
+12. **ES target compatibility** — Project targets old ES version. `String.startsWith()` not available, must use `indexOf`. Silent build failures if modern APIs are used.
+13. **chrome.runtime.sendMessage format** — offscreen.ts does `JSON.parse(message)` on ALL incoming messages. New scripts sending via `chrome.runtime.sendMessage` must use `JSON.stringify(...)` not plain objects.
+
+### Telemetry
+14. **Renderer telemetry** — Renderer sends funnel events via port `{ action: "telemetry", data: LogDataPackage }`. Worker routes to `this.logger` via `Log.parseAndLogDataPackage()`. Uses imported enums: `Funnel.Label`, `LogMethods`, `Session.EndTrigger`.
+15. **Console output requires flag** — `LogManager.createExtLogger()` returns a `StubSessionLogger` (no-op) unless `enable_console_logging` is `"true"` in localStorage. To enable: open any extension page console (renderer, offscreen) and run `localStorage.setItem("enable_console_logging", "true")`, then reload extension. Logs appear in the **service worker console** (edge://extensions → Inspect service worker), not in the renderer or page console.
+16. **No external telemetry endpoint** — All logging goes to `console.log()` via `ConsoleLoggerDecorator → WebConsole`. No HTTP POST, no Application Insights, no Aria SDK. The decorator pattern allows plugging in a real backend later.
diff --git a/gulpfile.js b/gulpfile.js
index 4221f5cf..26e54959 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -83,9 +83,13 @@ gulp.task("clean", ["cleanInternal"], function(callback) {
 // COMPILE CSS
 ////////////////////////////////////////
 gulp.task("compileLess", function() {
-    return gulp.src(PATHS.SRC.ROOT + "styles/clipper.less")
+    var clipperCss = gulp.src(PATHS.SRC.ROOT + "styles/clipper.less")
         .pipe(less())
         .pipe(gulp.dest(PATHS.BUILDROOT + "css"));
+    var rendererCss = gulp.src(PATHS.SRC.ROOT + "styles/renderer.less")
+        .pipe(less())
+        .pipe(gulp.dest(PATHS.BUILDROOT + "css"));
+    return merge(clipperCss, rendererCss);
 });
 
 gulp.task("compileRtlCss", function() {
@@ -236,6 +240,27 @@ gulp.task("bundleOffscreen", function () {
     return merge(tasks);
 });
 
+gulp.task("bundleRegionOverlay", function () {
+    var extensionRoot = PATHS.BUILDROOT + "scripts/extensions/";
+    var files = ["regionOverlay.js"];
+    var tasks = generateBrowserifyTasks(extensionRoot, files);
+    return merge(tasks);
+});
+
+gulp.task("bundleContentCaptureInject", function () {
+    var extensionRoot = PATHS.BUILDROOT + "scripts/extensions/";
+    var files = ["contentCaptureInject.js"];
+    var tasks = generateBrowserifyTasks(extensionRoot, files);
+    return merge(tasks);
+});
+
+gulp.task("bundleRenderer", function () {
+    var scriptsRoot = PATHS.BUILDROOT + "scripts/";
+    var files = ["renderer.js"];
+    var tasks = generateBrowserifyTasks(scriptsRoot, files);
+    return merge(tasks);
+});
+
 gulp.task("bundleClipperUI", function () {
     var extensionRoot = PATHS.BUILDROOT + "scripts/clipperUI/";
     var files = ["clipper.js", "pageNav.js", "localeSpecificTasks.js", "unsupportedBrowser.js"];
@@ -307,6 +332,9 @@ gulp.task("bundle", function(callback) {
     runSequence(
         "bundleAppendIsInstalledMarker",
         "bundleOffscreen",
+        "bundleRegionOverlay",
+        "bundleContentCaptureInject",
+        "bundleRenderer",
         "bundleClipperUI",
         "bundleLogManager",
         "bundleBookmarklet",
@@ -406,7 +434,8 @@ function exportCommonSrcFiles(targetDir) {
     var clipperTask = gulp.src([
         PATHS.SRC.ROOT + "clipper.html",
         PATHS.SRC.ROOT + "unsupportedBrowser.html",
-        PATHS.SRC.ROOT + "pageNav.html"
+        PATHS.SRC.ROOT + "pageNav.html",
+        PATHS.SRC.ROOT + "renderer.html"
     ]).pipe(gulp.dest(targetDir));
 
     return merge(pickerTask, imagesTask, clipperTask);
@@ -432,7 +461,7 @@ function exportCommonLibFiles(targetDir) {
     // The provided TextHighlighter.min.js file has a jQuery dependency so we have to use a sub-file
     var minifyAndExportTask = gulp.src(PATHS.SRC.ROOT + "scripts/highlighting/textHighlighter.js")
         .pipe(uglify({
-            preserveComments: "license"
+            output: { comments: /^!|@license|@preserve|license/i }
         }))
         .pipe(gulp.dest(targetDir));
 
@@ -524,6 +553,18 @@ function exportChromeJS() {
         PATHS.BUNDLEROOT + "offscreen.js"
     ]).pipe(concat("offscreen.js")).pipe(gulp.dest(targetDir));
 
+    var regionOverlayTask = gulp.src([
+        PATHS.BUNDLEROOT + "regionOverlay.js"
+    ]).pipe(concat("regionOverlay.js")).pipe(gulp.dest(targetDir));
+
+    var contentCaptureInjectTask = gulp.src([
+        PATHS.BUNDLEROOT + "contentCaptureInject.js"
+    ]).pipe(concat("contentCaptureInject.js")).pipe(gulp.dest(targetDir));
+
+    var rendererTask = gulp.src([
+        PATHS.BUNDLEROOT + "renderer.js"
+    ]).pipe(concat("renderer.js")).pipe(gulp.dest(targetDir));
+
     var chromeExtensionTask = gulp.src([
         targetDir + "logManager.js",
         targetDir + "oneNoteApi.min.js",
@@ -549,9 +590,9 @@ function exportChromeJS() {
     ]).pipe(concat("chromePageNavInject.js")).pipe(gulp.dest(targetDir));
 
     if (commonTask) {
-        return merge(commonTask, appendIsInstalledMarkerTask, offscreenTask, chromeExtensionTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask);
+        return merge(commonTask, appendIsInstalledMarkerTask, offscreenTask, regionOverlayTask, contentCaptureInjectTask, rendererTask, chromeExtensionTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask);
     }
-    return merge(chromeExtensionTask, appendIsInstalledMarkerTask, offscreenTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask);
+    return merge(chromeExtensionTask, appendIsInstalledMarkerTask, offscreenTask, regionOverlayTask, contentCaptureInjectTask, rendererTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask);
 }
 
 function exportChromeCSS() {
@@ -594,6 +635,18 @@ function exportEdgeJS() {
         PATHS.BUNDLEROOT + "offscreen.js"
     ]).pipe(concat("offscreen.js")).pipe(gulp.dest(targetDir));
 
+    var regionOverlayTask = gulp.src([
+        PATHS.BUNDLEROOT + "regionOverlay.js"
+    ]).pipe(concat("regionOverlay.js")).pipe(gulp.dest(targetDir));
+
+    var contentCaptureInjectTask = gulp.src([
+        PATHS.BUNDLEROOT + "contentCaptureInject.js"
+    ]).pipe(concat("contentCaptureInject.js")).pipe(gulp.dest(targetDir));
+
+    var rendererTask = gulp.src([
+        PATHS.BUNDLEROOT + "renderer.js"
+    ]).pipe(concat("renderer.js")).pipe(gulp.dest(targetDir));
+
     var edgeExtensionTask = gulp.src([
         targetDir + "logManager.js",
         targetDir + "oneNoteApi.min.js",
@@ -619,9 +672,9 @@ function exportEdgeJS() {
     ]).pipe(concat("edgePageNavInject.js")).pipe(gulp.dest(targetDir));
 
     if (commonTask) {
-        return merge(commonTask, appendIsInstalledMarkerTask, offscreenTask, edgeExtensionTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
+        return merge(commonTask, appendIsInstalledMarkerTask, offscreenTask, regionOverlayTask, contentCaptureInjectTask, rendererTask, edgeExtensionTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
     }
-    return merge(edgeExtensionTask, appendIsInstalledMarkerTask, offscreenTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
+    return merge(edgeExtensionTask, appendIsInstalledMarkerTask, offscreenTask, regionOverlayTask, contentCaptureInjectTask, rendererTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
 }
 
 function exportEdgeCSS() {
@@ -1064,6 +1117,7 @@ gulp.task("watchSrcFiles", function() {
             PATHS.SRC.ROOT + "clipper.html",
             PATHS.SRC.ROOT + "unsupportedBrowser.html",
             PATHS.SRC.ROOT + "pageNav.html",
+            PATHS.SRC.ROOT + "renderer.html",
             PATHS.SRC.ROOT + "scripts/extensions/chrome/manifest.json",
             PATHS.SRC.ROOT + "scripts/extensions/offscreen.html",
             PATHS.SRC.ROOT + "scripts/extensions/edge/edgeExtension.html",
diff --git a/package-lock.json b/package-lock.json
index 13e4015b..02cdf72f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
                 "jwt-decode": "^2.2.0"
             },
             "devDependencies": {
+                "@mozilla/readability": "^0.6.0",
                 "@types/chrome": "0.0.257",
                 "@types/es6-promise": "0.0.32",
                 "@types/filesystem": "0.0.36",
@@ -48,7 +49,7 @@
                 "gulp-shell": "0.5.2",
                 "gulp-tslint": "6.1.2",
                 "gulp-typescript": "3.1.4",
-                "gulp-uglify": "2.0.1",
+                "gulp-uglify": "^3.0.2",
                 "gulp-zip": "4.0.0",
                 "json3": "3.3.2",
                 "lodash": "4.17.21",
@@ -88,6 +89,16 @@
                 "findup": "bin/findup.js"
             }
         },
+        "node_modules/@mozilla/readability": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@mozilla/readability/-/readability-0.6.0.tgz",
+            "integrity": "sha512-juG5VWh4qAivzTAeMzvY9xs9HY5rAcr2E4I7tiSSCokRFi7XIZCAu92ZkSTsIj1OPceCifL3cpfteP3pDT9/QQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/@types/chrome": {
             "version": "0.0.257",
             "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.257.tgz",
@@ -7097,32 +7108,40 @@
             }
         },
         "node_modules/gulp-uglify": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-2.0.1.tgz",
-            "integrity": "sha1-6M+4MQFPyf8uBV4zeFhhgw1Jk2U=",
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz",
+            "integrity": "sha512-gk1dhB74AkV2kzqPMQBLA3jPoIAPd/nlNzP2XMDSG8XZrqnlCiDGAqC+rZOumzFvB5zOphlFh6yr3lgcAb/OOg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
+                "array-each": "^1.0.1",
+                "extend-shallow": "^3.0.2",
                 "gulplog": "^1.0.0",
                 "has-gulplog": "^0.1.0",
-                "lodash": "^4.13.1",
+                "isobject": "^3.0.1",
                 "make-error-cause": "^1.1.1",
+                "safe-buffer": "^5.1.2",
                 "through2": "^2.0.0",
-                "uglify-js": "2.7.5",
-                "uglify-save-license": "^0.4.1",
+                "uglify-js": "^3.0.5",
                 "vinyl-sourcemaps-apply": "^0.2.0"
             }
         },
+        "node_modules/gulp-uglify/node_modules/isobject": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+            "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/gulp-uglify/node_modules/uglify-js": {
-            "version": "2.7.5",
-            "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.7.5.tgz",
-            "integrity": "sha1-RhLAx7qu4rp8SH3kkErhIgefLKg=",
+            "version": "3.19.3",
+            "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+            "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
             "dev": true,
-            "dependencies": {
-                "async": "~0.2.6",
-                "source-map": "~0.5.1",
-                "uglify-to-browserify": "~1.0.0",
-                "yargs": "~3.10.0"
-            },
+            "license": "BSD-2-Clause",
             "bin": {
                 "uglifyjs": "bin/uglifyjs"
             },
@@ -7130,18 +7149,6 @@
                 "node": ">=0.8.0"
             }
         },
-        "node_modules/gulp-uglify/node_modules/yargs": {
-            "version": "3.10.0",
-            "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-            "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-            "dev": true,
-            "dependencies": {
-                "camelcase": "^1.0.2",
-                "cliui": "^2.1.0",
-                "decamelize": "^1.0.0",
-                "window-size": "0.1.0"
-            }
-        },
         "node_modules/gulp-util": {
             "version": "3.0.8",
             "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
@@ -13062,7 +13069,8 @@
             "version": "1.20.0",
             "resolved": "https://registry.npmjs.org/qunitjs/-/qunitjs-1.20.0.tgz",
             "integrity": "sha1-OSGrm79ye8zMtUjI6XkxnQ7sYFg=",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "node_modules/randomatic": {
             "version": "3.0.0",
@@ -14988,6 +14996,7 @@
             "resolved": "https://registry.npmjs.org/tslint/-/tslint-3.15.1.tgz",
             "integrity": "sha512-wkqXlDiU1qG31dMuxnCSNeNMdKmSaEMYgJ2RERgFkt1WvVEF/wYwUYR396DDDcJDDBYpq16a6XJodQh70IRtBQ==",
             "dev": true,
+            "peer": true,
             "dependencies": {
                 "colors": "^1.1.2",
                 "diff": "^2.2.1",
@@ -15099,6 +15108,7 @@
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
             "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==",
             "dev": true,
+            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -15138,17 +15148,12 @@
                 "window-size": "0.1.0"
             }
         },
-        "node_modules/uglify-save-license": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/uglify-save-license/-/uglify-save-license-0.4.1.tgz",
-            "integrity": "sha1-lXJsF8xv0XHDYX479NjYKqjEzOE=",
-            "dev": true
-        },
         "node_modules/uglify-to-browserify": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
             "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-            "dev": true
+            "dev": true,
+            "optional": true
         },
         "node_modules/umd": {
             "version": "3.0.3",
@@ -16049,6 +16054,12 @@
                 "commander": "^2.15.1"
             }
         },
+        "@mozilla/readability": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@mozilla/readability/-/readability-0.6.0.tgz",
+            "integrity": "sha512-juG5VWh4qAivzTAeMzvY9xs9HY5rAcr2E4I7tiSSCokRFi7XIZCAu92ZkSTsIj1OPceCifL3cpfteP3pDT9/QQ==",
+            "dev": true
+        },
         "@types/chrome": {
             "version": "0.0.257",
             "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.257.tgz",
@@ -22000,44 +22011,34 @@
             }
         },
         "gulp-uglify": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-2.0.1.tgz",
-            "integrity": "sha1-6M+4MQFPyf8uBV4zeFhhgw1Jk2U=",
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz",
+            "integrity": "sha512-gk1dhB74AkV2kzqPMQBLA3jPoIAPd/nlNzP2XMDSG8XZrqnlCiDGAqC+rZOumzFvB5zOphlFh6yr3lgcAb/OOg==",
             "dev": true,
             "requires": {
+                "array-each": "^1.0.1",
+                "extend-shallow": "^3.0.2",
                 "gulplog": "^1.0.0",
                 "has-gulplog": "^0.1.0",
-                "lodash": "^4.13.1",
+                "isobject": "^3.0.1",
                 "make-error-cause": "^1.1.1",
+                "safe-buffer": "^5.1.2",
                 "through2": "^2.0.0",
-                "uglify-js": "2.7.5",
-                "uglify-save-license": "^0.4.1",
+                "uglify-js": "^3.0.5",
                 "vinyl-sourcemaps-apply": "^0.2.0"
             },
             "dependencies": {
-                "uglify-js": {
-                    "version": "2.7.5",
-                    "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.7.5.tgz",
-                    "integrity": "sha1-RhLAx7qu4rp8SH3kkErhIgefLKg=",
-                    "dev": true,
-                    "requires": {
-                        "async": "~0.2.6",
-                        "source-map": "~0.5.1",
-                        "uglify-to-browserify": "~1.0.0",
-                        "yargs": "~3.10.0"
-                    }
+                "isobject": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+                    "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+                    "dev": true
                 },
-                "yargs": {
-                    "version": "3.10.0",
-                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-                    "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-                    "dev": true,
-                    "requires": {
-                        "camelcase": "^1.0.2",
-                        "cliui": "^2.1.0",
-                        "decamelize": "^1.0.0",
-                        "window-size": "0.1.0"
-                    }
+                "uglify-js": {
+                    "version": "3.19.3",
+                    "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+                    "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+                    "dev": true
                 }
             }
         },
@@ -26928,7 +26929,8 @@
             "version": "1.20.0",
             "resolved": "https://registry.npmjs.org/qunitjs/-/qunitjs-1.20.0.tgz",
             "integrity": "sha1-OSGrm79ye8zMtUjI6XkxnQ7sYFg=",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "randomatic": {
             "version": "3.0.0",
@@ -28514,6 +28516,7 @@
             "resolved": "https://registry.npmjs.org/tslint/-/tslint-3.15.1.tgz",
             "integrity": "sha512-wkqXlDiU1qG31dMuxnCSNeNMdKmSaEMYgJ2RERgFkt1WvVEF/wYwUYR396DDDcJDDBYpq16a6XJodQh70IRtBQ==",
             "dev": true,
+            "peer": true,
             "requires": {
                 "colors": "^1.1.2",
                 "diff": "^2.2.1",
@@ -28604,7 +28607,8 @@
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
             "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "uglify-js": {
             "version": "2.8.29",
@@ -28631,17 +28635,12 @@
                 }
             }
         },
-        "uglify-save-license": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/uglify-save-license/-/uglify-save-license-0.4.1.tgz",
-            "integrity": "sha1-lXJsF8xv0XHDYX479NjYKqjEzOE=",
-            "dev": true
-        },
         "uglify-to-browserify": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
             "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-            "dev": true
+            "dev": true,
+            "optional": true
         },
         "umd": {
             "version": "3.0.3",
diff --git a/package.json b/package.json
index 1558a83d..abe86083 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-    "version": "3.10.12",
+    "version": "3.11.0",
     "name": "webclipper",
     "private": true,
     "description": "The core of the OneNote Web Clipper found at https://www.onenote.com/clipper",
@@ -21,6 +21,7 @@
         "url": "git+https://github.com/OneNoteDev/WebClipper.git"
     },
     "devDependencies": {
+        "@mozilla/readability": "^0.6.0",
         "@types/chrome": "0.0.257",
         "@types/es6-promise": "0.0.32",
         "@types/filesystem": "0.0.36",
@@ -57,7 +58,7 @@
         "gulp-shell": "0.5.2",
         "gulp-tslint": "6.1.2",
         "gulp-typescript": "3.1.4",
-        "gulp-uglify": "2.0.1",
+        "gulp-uglify": "^3.0.2",
         "gulp-zip": "4.0.0",
         "json3": "3.3.2",
         "lodash": "4.17.21",
diff --git a/src/renderer.html b/src/renderer.html
new file mode 100644
index 00000000..c0f19901
--- /dev/null
+++ b/src/renderer.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title></title>
+<link rel="stylesheet" href="renderer.css">
+</head>
+<body>
+<div id="signin-overlay" style="display:none;" role="dialog" aria-label="Sign in">
+	<div id="signin-panel">
+		<img src="images/onenote_logo_clipper.png" alt="OneNote" class="signin-logo">
+		<h2 class="signin-title">OneNote Web Clipper</h2>
+		<p class="signin-description" id="signin-description">Sign in to clip this page to OneNote</p>
+		<button id="signin-msa-btn" class="signin-btn">Sign in with Microsoft account</button>
+		<button id="signin-orgid-btn" class="signin-btn signin-btn-secondary">Sign in with work or school account</button>
+		<div id="signin-error" class="signin-error" role="alert" style="display:none;"></div>
+		<div id="signin-progress" class="signin-progress" style="display:none;">Signing in...</div>
+	</div>
+</div>
+<div id="preview-area">
+<div id="article-header" style="display:none;" role="toolbar" aria-label="Article options">
+	<button id="highlight-btn" aria-pressed="false" title="Toggle highlighter">
+		<img src="images/editoroptions/highlight_tool_off.svg" alt="">
+	</button>
+	<div class="header-separator"></div>
+	<div id="font-family-group">
+		<button id="sans-serif-btn" class="font-btn active" aria-pressed="true">Sans-serif</button>
+		<button id="serif-btn" class="font-btn" aria-pressed="false">Serif</button>
+	</div>
+	<div class="header-separator"></div>
+	<div id="font-size-group">
+		<button id="font-decrease-btn" title="Decrease font size">
+			<img src="images/editoroptions/font_down.svg" alt="">
+		</button>
+		<button id="font-increase-btn" title="Increase font size">
+			<img src="images/editoroptions/font_up.svg" alt="">
+		</button>
+	</div>
+</div>
+<iframe id="content-frame" tabindex="-1"></iframe>
+<iframe id="preview-frame" tabindex="-1"></iframe>
+<div id="preview-container" tabindex="-1"></div>
+</div>
+<div id="sidebar" role="main" aria-label="OneNote Web Clipper">
+	<div id="sidebar-header">
+		<img src="images/onenote_logo_clipper_small.png" alt="">
+		<span class="title" id="sidebar-title">OneNote Web Clipper</span>
+	</div>
+	<div id="sidebar-body">
+		<div id="mode-panel" role="toolbar" aria-label="Clipping mode">
+			<button class="mode-btn selected" data-mode="fullpage" aria-pressed="true">
+				<img src="images/fullpage.svg" alt=""><span>Full Page</span>
+			</button>
+			<button class="mode-btn" data-mode="article" aria-pressed="false">
+				<img src="images/article.svg" alt=""><span>Article</span>
+			</button>
+			<button class="mode-btn" data-mode="bookmark" aria-pressed="false">
+				<img src="images/bookmark.svg" alt=""><span>Bookmark</span>
+			</button>
+			<button class="mode-btn" data-mode="region" aria-pressed="false">
+				<img src="images/region.svg" alt=""><span>Region</span>
+			</button>
+		</div>
+		<hr class="sidebar-divider">
+		<div id="meta-panel">
+			<label class="field-label" id="title-label" for="title-field">Title</label>
+			<textarea id="title-field" rows="2" placeholder="Add a page title..."></textarea>
+			<label class="field-label" id="note-label" for="note-field">Note</label>
+			<textarea id="note-field" rows="2" placeholder="Add a note..."></textarea>
+			<label class="field-label" id="source-label">Source</label>
+			<div id="source-url" class="source-url" aria-labelledby="source-label"></div>
+			<label class="field-label" id="section-label">Save to</label>
+			<div id="section-picker">
+				<div id="section-selected" tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="section-label"></div>
+				<div id="section-list-container" role="listbox">
+					<ul id="section-list" role="presentation"></ul>
+				</div>
+			</div>
+		</div>
+		<div id="button-row">
+			<button id="save-btn">Clip</button>
+			<button id="cancel-btn">Cancel</button>
+		</div>
+		<div id="success-banner" style="display:none;" role="status">
+			<span id="success-text"></span>
+			<button id="view-onenote-link"></button>
+		</div>
+		<div id="capture-panel">
+			<div id="status-text"></div>
+			<div id="progress-info"></div>
+			<div id="progress-bar-track"><div id="progress-bar-fill" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div></div>
+		</div>
+	</div>
+	<div id="user-info">
+		<a id="feedback-link" href="#"><img src="images/feedback_smiley.svg" alt="" class="feedback-icon"><span id="feedback-label">Feedback</span></a>
+		<div id="user-info-right">
+			<span id="user-email"></span>
+			<a id="signout-link" href="#">Sign out</a>
+		</div>
+	</div>
+</div>
+<div id="aria-status" class="sr-only" aria-live="polite" aria-atomic="true"></div>
+<script src="renderer.js"></script>
+</body>
+</html>
diff --git a/src/scripts/clipperUI/clipper.tsx b/src/scripts/clipperUI/clipper.tsx
index 57511271..2d50b9dc 100644
--- a/src/scripts/clipperUI/clipper.tsx
+++ b/src/scripts/clipperUI/clipper.tsx
@@ -8,7 +8,6 @@ import {PageInfo} from "../pageInfo";
 import {Polyfills} from "../polyfills";
 import {PreviewGlobalInfo} from "../previewInfo";
 import {TooltipType} from "./tooltipType";
-import {UrlUtils} from "../urlUtils";
 
 import {Communicator} from "../communicator/communicator";
 import {IFrameMessageHandler} from "../communicator/iframeMessageHandler";
@@ -145,6 +144,13 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 			this.state.setState({ uiExpanded: !this.state.uiExpanded });
 		});
 
+		// Called by worker after sign-out from renderer — reset to sign-in state and show the sidebar
+		Clipper.getExtensionCommunicator().registerFunction(Constants.FunctionKeys.showSignInPanel, () => {
+			this.state.setState(this.getSignOutState());
+			this.state.setState({ uiExpanded: true });
+			Clipper.getInjectCommunicator().callRemoteFunction(Constants.FunctionKeys.showUi);
+		});
+
 		Clipper.getInjectCommunicator().registerFunction(Constants.FunctionKeys.onSpaNavigate, () => {
 			// This could have been called when the UI is already toggled off
 			if (this.state.uiExpanded) {
@@ -173,10 +179,21 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 				});
 
 				this.capturePdfScreenshotContent();
-				this.captureFullPageScreenshotContent();
 				this.captureAugmentedContent();
 				this.captureBookmarkContent();
 
+				// If user is signed in, start capture and hide the injected sidebar — unified renderer window takes over
+				// If NOT signed in, skip capture so the renderer window doesn't open — show sign-in panel only
+				try {
+					if (localStorage.getItem("isUserLoggedIn") === "true") {
+						this.captureFullPageScreenshotContent();
+						// Collapse the UI state so that re-invocation (e.g., after sign-out) correctly
+						// toggles it back to expanded, rather than toggling from expanded to collapsed
+						this.state.setState({ uiExpanded: false });
+						Clipper.getInjectCommunicator().callRemoteFunction(Constants.FunctionKeys.hideUi);
+					}
+				} catch (e) { /* ignore */ }
+
 				Clipper.logger.setContextProperty(Log.Context.Custom.ContentType, OneNoteApi.ContentType[updatedPageInfo.contentType]);
 			}
 		});
@@ -232,6 +249,9 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 	}
 
 	private captureFullPageScreenshotContent() {
+		if (this.state.fullPageResult && this.state.fullPageResult.status === Status.InProgress) {
+			return;
+		}
 		if (this.state.pageInfo.contentType === OneNoteApi.ContentType.EnhancedUrl) {
 			this.state.setState({
 				fullPageResult: {
@@ -244,7 +264,7 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 		} else {
 			this.state.setState({ fullPageResult: { status: Status.InProgress } });
 
-			FullPageScreenshotHelper.getFullPageScreenshot(this.state.pageInfo.contentData).then((result) => {
+			FullPageScreenshotHelper.getFullPageScreenshot(this.state.pageInfo.contentData, this.state.pageInfo.rawUrl, this.state.pageInfo.stylesheetCache, this.state.pageInfo ? this.state.pageInfo.contentTitle : "").then((result) => {
 				this.state.setState({ fullPageResult: { data: result, status: Status.Succeeded } });
 			}, () => {
 				this.state.setState({
@@ -409,6 +429,14 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 				this.state.setState({ userResult: { status: Status.Succeeded, data: updatedUser } });
 				Clipper.logger.setContextProperty(Log.Context.Custom.AuthType, updatedUser.user.authType);
 				Clipper.logger.setContextProperty(Log.Context.Custom.UserInfoId, updatedUser.user.cid);
+
+				// After sign-in completes, hide the injected sidebar and launch the unified renderer window
+				if (updatedUser.updateReason === UpdateReason.SignInAttempt) {
+					try {
+						Clipper.getInjectCommunicator().callRemoteFunction(Constants.FunctionKeys.hideUi);
+						this.captureFullPageScreenshotContent();
+					} catch (e) { /* ignore */ }
+				}
 			} else {
 				this.state.setState({ userResult: { status: Status.Failed, data: updatedUser } });
 			}
@@ -532,8 +560,20 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 
 	private initializeSmartValues() {
 		this.state.currentMode.subscribe((newMode: ClipMode) => {
+			if (newMode !== ClipMode.FullPage && this.state.fullPageResult && this.state.fullPageResult.status === Status.InProgress) {
+				// Cancel in-progress screenshot when switching away from FullPage
+				Clipper.getExtensionCommunicator().callRemoteFunction(Constants.FunctionKeys.cancelFullPageScreenshot);
+				this.state.setState({ fullPageResult: { status: Status.Failed } });
+			}
+
 			switch (newMode) {
 				case ClipMode.FullPage:
+					Clipper.getInjectCommunicator().callRemoteFunction(Constants.FunctionKeys.updatePageInfoIfUrlChanged);
+					// Retry screenshot if previous attempt failed
+					if (!this.state.fullPageResult || this.state.fullPageResult.status === Status.Failed || this.state.fullPageResult.status === Status.NotStarted) {
+						this.captureFullPageScreenshotContent();
+					}
+					break;
 				case ClipMode.Augmentation:
 					Clipper.getInjectCommunicator().callRemoteFunction(Constants.FunctionKeys.updatePageInfoIfUrlChanged);
 					break;
@@ -571,9 +611,6 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 				return ClipMode.Pdf;
 			}
 
-			if (UrlUtils.onWhitelistedDomain(this.state.pageInfo.rawUrl)) {
-				return ClipMode.Augmentation;
-			}
 		}
 
 		return ClipMode.FullPage;
diff --git a/src/scripts/clipperUI/components/previewViewer/fullPagePreview.tsx b/src/scripts/clipperUI/components/previewViewer/fullPagePreview.tsx
index cf56ea8e..2fd5365b 100644
--- a/src/scripts/clipperUI/components/previewViewer/fullPagePreview.tsx
+++ b/src/scripts/clipperUI/components/previewViewer/fullPagePreview.tsx
@@ -1,9 +1,6 @@
 import {Constants} from "../../../constants";
 
-import {SmartValue} from "../../../communicator/smartValue";
-
 import {FullPageScreenshotResult} from "../../../contentCapture/fullPageScreenshotHelper";
-import {PdfScreenshotResult} from "../../../contentCapture/pdfScreenshotHelper";
 
 import {ExtensionUtils} from "../../../extensions/extensionUtils";
 
@@ -18,6 +15,8 @@ import {PreviewComponentBase} from "./previewComponentBase";
 import {PreviewViewerFullPageHeader} from "./previewViewerFullPageHeader";
 
 class FullPagePreview extends PreviewComponentBase<{}, ClipperStateProp> {
+	private currentObjectUrl: string = "";
+
 	protected getContentBodyForCurrentStatus(): any[] {
 		let state = this.props.clipperState;
 
@@ -59,7 +58,8 @@ class FullPagePreview extends PreviewComponentBase<{}, ClipperStateProp> {
 				return Localization.getLocalizedString("WebClipper.Preview.LoadingMessage");
 			default:
 			case Status.Failed:
-				failureMessage = this.props.clipperState.fullPageResult.data.failureMessage;
+				let resultData = this.props.clipperState.fullPageResult.data;
+				failureMessage = resultData ? resultData.failureMessage : undefined;
 				return !!failureMessage ? failureMessage : noContentFoundString;
 		}
 	}
@@ -74,9 +74,12 @@ class FullPagePreview extends PreviewComponentBase<{}, ClipperStateProp> {
 
 				if (this.props.clipperState.fullPageResult.data) {
 					let screenshotImages: FullPageScreenshotResult = this.props.clipperState.fullPageResult.data;
-					for (let imageData of screenshotImages.Images) {
-						let dataUrl = "data:image/" + screenshotImages.ImageFormat + ";" + screenshotImages.ImageEncoding + "," + imageData;
-						contentBody.push(<img src={dataUrl} alt={altTag}></img>);
+					if (screenshotImages.ImageBlob) {
+						if (this.currentObjectUrl) {
+							URL.revokeObjectURL(this.currentObjectUrl);
+						}
+						this.currentObjectUrl = URL.createObjectURL(screenshotImages.ImageBlob);
+						contentBody.push(<img src={this.currentObjectUrl} alt={altTag}></img>);
 					}
 				}
 				break;
diff --git a/src/scripts/communicator/offscreenCommunicator.ts b/src/scripts/communicator/offscreenCommunicator.ts
index c5769afa..62d61ba7 100644
--- a/src/scripts/communicator/offscreenCommunicator.ts
+++ b/src/scripts/communicator/offscreenCommunicator.ts
@@ -1,8 +1,11 @@
-import {WebExtension} from "../extensions/webExtensionBase/webExtension";
 import {OffscreenMessageTypes} from "./offscreenMessageTypes";
 
 let creating: Promise<void>; // A global promise to avoid concurrency issues
 
+// Use chrome API directly — WebExtension.browser is only initialized in the
+// service worker context, but this module is also imported by the clipper UI.
+let offscreenUrl = chrome.runtime.getURL("offscreen.html");
+
 // This function performs basic filtering and error checking on messages before
 // dispatching the message to a more specific message handler.
 async function handleResponse(message): Promise<string> {
@@ -27,17 +30,21 @@ async function handleResponse(message): Promise<string> {
 }
 
 export async function sendToOffscreenDocument(type: string, data: any): Promise<string> {
-	const existingContexts = await WebExtension.browser.runtime.getContexts({
-		contextTypes: [WebExtension.browser.runtime.ContextType.OFFSCREEN_DOCUMENT],
-		documentUrls: [WebExtension.offscreenUrl]
+	// Access newer Chrome APIs via runtime references to avoid hardcoded strings
+	let chromeRuntime = chrome.runtime as any;
+	let chromeOffscreen = (chrome as any).offscreen;
+
+	const existingContexts = await chromeRuntime.getContexts({
+		contextTypes: [chromeRuntime.ContextType.OFFSCREEN_DOCUMENT],
+		documentUrls: [offscreenUrl]
 	});
 
 	if (creating) {
 		await creating;
 	} else if (existingContexts.length === 0) {
-		creating = WebExtension.browser.offscreen.createDocument({
-			url: WebExtension.offscreenUrl,
-			reasons: [WebExtension.browser.offscreen.Reason.DOM_PARSER],
+		creating = chromeOffscreen.createDocument({
+			url: offscreenUrl,
+			reasons: [chromeOffscreen.Reason.DOM_PARSER],
 			justification: "Parse DOM",
 		});
 		await creating;
@@ -45,18 +52,12 @@ export async function sendToOffscreenDocument(type: string, data: any): Promise<
 	}
 
 	return new Promise<string>(resolve => {
-		WebExtension.browser.runtime.sendMessage(JSON.stringify({
+		chrome.runtime.sendMessage(JSON.stringify({
 			type: type,
 			target: "offscreen",
 			data: data
 		}), (message) => {
 			handleResponse(message).then((result) => {
-				/**
-				 * Commenting out the following line in order to always keep 1 offscreen document open
-				 * so as to avoid concurrency issues with multiple offscreen documents.
-				 * TODO: Investigate if there is a better way to handle concurrency issues.
-				 */
-				// WebExtension.browser.offscreen.closeDocument();
 				resolve(result);
 			});
 		});
diff --git a/src/scripts/constants.ts b/src/scripts/constants.ts
index c862082e..331ba0ba 100644
--- a/src/scripts/constants.ts
+++ b/src/scripts/constants.ts
@@ -314,6 +314,11 @@ export module Constants {
 		export var getMultipleStorageValues = "GET_MULTIPLE_STORAGE_VALUES";
 		export var getTooltipToRenderInPageNav = "GET_TOOLTIP_TO_RENDER_IN_PAGE_NAV";
 		export var hideUi = "HIDE_UI";
+		export var showUi = "SHOW_UI";
+		export var showSignInPanel = "SHOW_SIGN_IN_PANEL";
+		export var startRegionCapture = "START_REGION_CAPTURE";
+		export var regionCaptureComplete = "REGION_CAPTURE_COMPLETE";
+		export var regionCaptureCancelled = "REGION_CAPTURE_CANCELLED";
 		export var invokeClipper = "INVOKE_CLIPPER";
 		export var invokeClipperFromPageNav = "INVOKE_CLIPPER_FROM_PAGE_NAV";
 		export var invokeDebugLogging = "INVOKE_DEBUG_LOGGING";
@@ -330,6 +335,8 @@ export module Constants {
 		export var signOutUser = "SIGN_OUT_USER";
 		export var tabToLowestIndexedElement = "TAB_TO_LOWEST_INDEXED_ELEMENT";
 		export var takeTabScreenshot = "TAKE_TAB_SCREENSHOT";
+		export var takeFullPageScreenshot = "TAKE_FULL_PAGE_SCREENSHOT";
+		export var cancelFullPageScreenshot = "CANCEL_FULL_PAGE_SCREENSHOT";
 		export var telemetry = "TELEMETRY";
 		export var toggleClipper = "TOGGLE_CLIPPER";
 		export var unloadHandler = "UNLOAD_HANDLER";
@@ -382,9 +389,7 @@ export module Constants {
 	export module Urls {
 		export var serviceDomain = "https://www.onenote.com";
 
-		export var augmentationApiUrl = serviceDomain + "/onaugmentation/clipperextract/v1.0/";
 		export var changelogUrl = serviceDomain + "/whatsnext/webclipper";
-		export var fullPageScreenshotUrl = serviceDomain + "/onaugmentation/clipperDomEnhancer/v1.0/";
 		export var localizedStringsUrlBase = serviceDomain + "/strings?ids=WebClipper.";
 
 		export var clipperInstallPageUrl = "https://support.microsoft.com/en-us/office/getting-started-with-the-onenote-web-clipper-5696609d-c5ae-4591-b3af-1f897cb6eda6";
diff --git a/src/scripts/contentCapture/augmentationHelper.ts b/src/scripts/contentCapture/augmentationHelper.ts
index b5c7ee58..52d21fb0 100644
--- a/src/scripts/contentCapture/augmentationHelper.ts
+++ b/src/scripts/contentCapture/augmentationHelper.ts
@@ -1,20 +1,16 @@
-import {Constants} from "../constants";
-import {Settings} from "../settings";
 import {StringUtils} from "../stringUtils";
 import {ObjectUtils} from "../objectUtils";
 
 import {Clipper} from "../clipperUI/frontEndGlobals";
 import {ClipperState} from "../clipperUI/clipperState";
-import {OneNoteApiUtils} from "../clipperUI/oneNoteApiUtils";
 
 import {DomUtils, EmbeddedVideoIFrameSrcs} from "../domParsers/domUtils";
 
-import {HttpWithRetries} from "../http/httpWithRetries";
-
 import * as Log from "../logging/log";
 
 import {CaptureFailureInfo} from "./captureFailureInfo";
-import { ErrorUtils, ResponsePackage } from "../responsePackage";
+
+import {Readability} from "@mozilla/readability";
 
 export enum AugmentationModel {
 	None,
@@ -38,43 +34,65 @@ export class AugmentationHelper {
 	public static augmentPage(url: string, locale: string, pageContent: string): Promise<AugmentationResult> {
 		return new Promise<AugmentationResult>((resolve, reject) => {
 			let augmentationEvent = new Log.Event.PromiseEvent(Log.Event.Label.AugmentationApiCall);
-
-			let correlationId = StringUtils.generateGuid();
-			augmentationEvent.setCustomProperty(Log.PropertyName.Custom.CorrelationId, correlationId);
-
-			AugmentationHelper.makeAugmentationRequest(url, locale, pageContent, correlationId).then((responsePackage: { parsedResponse: AugmentationResult[], response: Response }) => {
-				let parsedResponse = responsePackage.parsedResponse;
-				let result: AugmentationResult = { ContentModel: AugmentationModel.None, ContentObjects: []	};
-
-				augmentationEvent.setCustomProperty(Log.PropertyName.Custom.CorrelationId, responsePackage.response.headers.get(Constants.HeaderValues.correlationId));
-
-				if (parsedResponse && parsedResponse.length > 0 && parsedResponse[0].ContentInHtml) {
-					result = parsedResponse[0];
+			augmentationEvent.setCustomProperty(Log.PropertyName.Custom.CorrelationId, StringUtils.generateGuid());
+
+			try {
+				let result: AugmentationResult = { ContentModel: AugmentationModel.None, ContentObjects: [] };
+
+				// Parse the page HTML into a Document for Readability
+				let doc = (new DOMParser()).parseFromString(pageContent, "text/html");
+
+				// Clone the document because Readability mutates it
+				let docClone = doc.cloneNode(true) as Document;
+
+				let reader = new Readability(docClone, { charThreshold: 100 });
+				let article = reader.parse();
+
+				if (article && article.content) {
+					result.ContentInHtml = article.content;
+					result.ContentModel = AugmentationModel.Article;
+					result.ContentObjects = [];
+
+					let metadata: { [key: string]: string } = {};
+					if (article.title) {
+						metadata.title = article.title;
+					}
+					if (article.excerpt) {
+						metadata.description = article.excerpt;
+					}
+					if (article.byline) {
+						metadata.author = article.byline;
+					}
+					if (article.siteName) {
+						metadata.siteName = article.siteName;
+					}
+					if (article.publishedTime) {
+						metadata.publishedTime = article.publishedTime;
+					}
+					result.PageMetadata = metadata;
 
 					augmentationEvent.setCustomProperty(Log.PropertyName.Custom.AugmentationModel, AugmentationModel[result.ContentModel]);
 
 					// Remove tags that are unsupported by ONML before we display them in the preview
-					// Supported tags: https://msdn.microsoft.com/en-us/library/office/dn575442.aspx
-					let doc = (new DOMParser()).parseFromString(result.ContentInHtml, "text/html");
-					let previewElement = AugmentationHelper.getArticlePreviewElement(doc);
+					let contentDoc = (new DOMParser()).parseFromString(result.ContentInHtml, "text/html");
+					let previewElement = AugmentationHelper.getArticlePreviewElement(contentDoc);
 
-					DomUtils.toOnml(doc).then(async () => {
+					DomUtils.toOnml(contentDoc).then(async () => {
 						DomUtils.addPreviewContainerStyling(previewElement);
 						await AugmentationHelper.addSupportedVideosToElement(previewElement, pageContent, url);
-						result.ContentInHtml = doc.body.innerHTML;
+						result.ContentInHtml = contentDoc.body.innerHTML;
 						resolve(result);
 					});
 				} else {
 					resolve(result);
 				}
-
-				augmentationEvent.setCustomProperty(Log.PropertyName.Custom.AugmentationModel, AugmentationModel[result.ContentModel]);
-			}).catch((failure: OneNoteApi.RequestError) => {
-				OneNoteApiUtils.logOneNoteApiRequestError(augmentationEvent, failure);
+			} catch (e) {
+				augmentationEvent.setStatus(Log.Status.Failed);
+				augmentationEvent.setFailureInfo({ error: e.message || "Readability parsing failed" });
 				reject();
-			}).then(() => {
-				Clipper.logger.logEvent(augmentationEvent);
-			});
+			}
+
+			Clipper.logger.logEvent(augmentationEvent);
 		});
 	}
 
@@ -86,8 +104,6 @@ export class AugmentationHelper {
 			return augmentationType;
 		}
 
-		// TODO: There is a work-item to change the AugmentationApi to return ContentModel as a StringUtils
-		// instead of an integer
 		let contentModel: AugmentationModel = state.augmentationResult.data.ContentModel;
 
 		if (AugmentationHelper.isSupportedAugmentationType(contentModel)) {
@@ -97,43 +113,6 @@ export class AugmentationHelper {
 		return augmentationType;
 	}
 
-	/*
-	 * Returns the augmented preview text.
-	 */
-	public static makeAugmentationRequest(url: string, locale: string, pageContent: string, requestCorrelationId: string): Promise<ResponsePackage<any>> {
-		return new Promise<ResponsePackage<any>>((resolve, reject) => {
-			Clipper.getUserSessionIdWhenDefined().then((sessionId) => {
-				let augmentationApiUrl = Constants.Urls.augmentationApiUrl + "?renderMethod=extractAggressive&url=" + url + "&lang=" + locale;
-
-				let headers = {};
-				headers[Constants.HeaderValues.appIdKey] = Settings.getSetting("App_Id");
-				headers[Constants.HeaderValues.noAuthKey] = "true";
-				headers[Constants.HeaderValues.correlationId] = requestCorrelationId;
-				headers[Constants.HeaderValues.userSessionIdKey] = sessionId;
-
-				HttpWithRetries.post(augmentationApiUrl, pageContent, headers).then((response: Response) => {
-					response.text().then((responseText: string) => {
-						let parsedResponse: any;
-						try {
-							parsedResponse = JSON.parse(responseText);
-						} catch (e) {
-							Clipper.logger.logJsonParseUnexpected(responseText);
-							ErrorUtils.createRequestErrorObject(response, OneNoteApi.RequestErrorType.UNABLE_TO_PARSE_RESPONSE).then((error) => {
-								reject(error);
-							});
-						}
-
-						let responsePackage = {
-							parsedResponse: parsedResponse,
-							response: response
-						};
-						resolve(responsePackage);
-					});
-				});
-			});
-		});
-	}
-
 	public static getArticlePreviewElement(doc: Document): HTMLElement {
 		let mainContainers = doc.getElementsByClassName("MainArticleContainer");
 		if (ObjectUtils.isNullOrUndefined(mainContainers) || ObjectUtils.isNullOrUndefined(mainContainers[0])) {
diff --git a/src/scripts/contentCapture/fullPageScreenshotHelper.ts b/src/scripts/contentCapture/fullPageScreenshotHelper.ts
index 505e65f4..14c92788 100644
--- a/src/scripts/contentCapture/fullPageScreenshotHelper.ts
+++ b/src/scripts/contentCapture/fullPageScreenshotHelper.ts
@@ -1,68 +1,87 @@
 import {Clipper} from "../clipperUI/frontEndGlobals";
-import {OneNoteApiUtils} from "../clipperUI/oneNoteApiUtils";
-
-import {HttpWithRetries} from "../http/httpWithRetries";
 
 import * as Log from "../logging/log";
 
 import {Constants} from "../constants";
-import {Settings} from "../settings";
+import {Localization} from "../localization/localization";
 import {StringUtils} from "../stringUtils";
 
 import {CaptureFailureInfo} from "./captureFailureInfo";
-import { ErrorUtils } from "../responsePackage";
 
 export interface FullPageScreenshotResult extends CaptureFailureInfo {
-	ImageEncoding?: string;
 	ImageFormat?: string;
-	Images?: string[];
+	ImageBlob?: Blob;
+	ImageWidth?: number;
 }
 
 export class FullPageScreenshotHelper {
-	private static timeout = 50000;
-
-	public static getFullPageScreenshot(pageInfoContentData: string): Promise<FullPageScreenshotResult> {
+	public static getFullPageScreenshot(pageInfoContentData: string, pageUrl?: string, stylesheetCache?: { [url: string]: { cssText: string; media: string } }, pageTitle?: string): Promise<FullPageScreenshotResult> {
 		return new Promise<FullPageScreenshotResult>((resolve, reject) => {
-			Clipper.getUserSessionIdWhenDefined().then((sessionId) => {
-				let fullPageScreenshotEvent = new Log.Event.PromiseEvent(Log.Event.Label.FullPageScreenshotCall);
+			let fullPageScreenshotEvent = new Log.Event.PromiseEvent(Log.Event.Label.FullPageScreenshotCall);
+			let correlationId = StringUtils.generateGuid();
+			fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.CorrelationId, correlationId);
+
+			let storageData: any = {
+				fullPageHtmlContent: pageInfoContentData,
+				fullPageStatusText: Localization.getLocalizedString("WebClipper.ClipType.ScreenShot.ProgressLabel") || "Capturing page...",
+				fullPageTitle: pageTitle || "",
+				fullPageUrl: pageUrl || ""
+			};
+			if (pageUrl) {
+				storageData.fullPageBaseUrl = pageUrl;
+			}
+			if (stylesheetCache) {
+				storageData.fullPageStylesheets = stylesheetCache;
+			}
 
-				let correlationId = StringUtils.generateGuid();
-				fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.CorrelationId, correlationId);
+			chrome.storage.session.set(storageData, () => {
+				Clipper.getExtensionCommunicator().callRemoteFunction(
+					Constants.FunctionKeys.takeFullPageScreenshot, {
+						callback: (signal: any) => {
+							if (!signal || !signal.success) {
+								fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.FullPageScreenshotContentFound, false);
+								Clipper.logger.logEvent(fullPageScreenshotEvent);
+								reject();
+								return;
+							}
 
-				let headers = {};
-				headers[Constants.HeaderValues.accept] = "application/json";
-				headers[Constants.HeaderValues.appIdKey] = Settings.getSetting("App_Id");
-				headers[Constants.HeaderValues.noAuthKey] = "true";
-				headers[Constants.HeaderValues.correlationId] = correlationId;
-				headers[Constants.HeaderValues.userSessionIdKey] = sessionId;
+							// Read single final JPEG from session storage (stitched by renderer)
+							chrome.storage.session.get(["fullPageFinalImage"], (stored: any) => {
+								// Keep fullPageFinalImage — worker needs it for save flow
+							// (URL now passed via port message, no longer read from session)
+							chrome.storage.session.remove([
+									"fullPageHtmlContent", "fullPageBaseUrl", "fullPageStatusText",
+									"fullPageStylesheets", "fullPageTitle", "fullPageUrl"
+								]);
 
-				let errorCallback = (error: OneNoteApi.RequestError) => {
-					fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.CorrelationId, error.responseHeaders[Constants.HeaderValues.correlationId]);
-					OneNoteApiUtils.logOneNoteApiRequestError(fullPageScreenshotEvent, error);
-				};
+								let dataUrl: string = stored && stored.fullPageFinalImage ? stored.fullPageFinalImage : "";
 
-				HttpWithRetries.post(Constants.Urls.fullPageScreenshotUrl, pageInfoContentData, headers, [200, 204], FullPageScreenshotHelper.timeout).then((response: Response) => {
-					if (response.status === 200) {
-						response.text().then((responseText: string) => {
-							try {
-								resolve(JSON.parse(responseText) as FullPageScreenshotResult);
-								fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.FullPageScreenshotContentFound, true);
-							} catch (e) {
-								ErrorUtils.createRequestErrorObject(response, OneNoteApi.RequestErrorType.UNABLE_TO_PARSE_RESPONSE, FullPageScreenshotHelper.timeout).then((error) => {
-									reject(error);
-								});
-							}
-						});
-					} else {
-						fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.FullPageScreenshotContentFound, false);
-						reject();
+								if (dataUrl) {
+									// Convert data URL to Blob
+									fetch(dataUrl).then(function(r) { return r.blob(); }).then(function(imageBlob) {
+										let result: FullPageScreenshotResult = {
+											ImageFormat: signal.format || "jpeg",
+											ImageBlob: imageBlob,
+											ImageWidth: signal.cssWidth
+										};
+
+										fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.FullPageScreenshotContentFound, true);
+										Clipper.logger.logEvent(fullPageScreenshotEvent);
+										resolve(result);
+									}, function() {
+										fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.FullPageScreenshotContentFound, false);
+										Clipper.logger.logEvent(fullPageScreenshotEvent);
+										reject();
+									});
+								} else {
+									fullPageScreenshotEvent.setCustomProperty(Log.PropertyName.Custom.FullPageScreenshotContentFound, false);
+									Clipper.logger.logEvent(fullPageScreenshotEvent);
+									reject();
+								}
+							});
+						}
 					}
-				}, (error: OneNoteApi.RequestError) => {
-					errorCallback(error);
-					reject();
-				}).then(() => {
-					Clipper.logger.logEvent(fullPageScreenshotEvent);
-				});
+				);
 			});
 		});
 	}
diff --git a/src/scripts/contentCapture/readability.d.ts b/src/scripts/contentCapture/readability.d.ts
new file mode 100644
index 00000000..54a6a896
--- /dev/null
+++ b/src/scripts/contentCapture/readability.d.ts
@@ -0,0 +1,30 @@
+declare module "@mozilla/readability" {
+	export class Readability {
+		constructor(doc: Document, options?: {
+			debug?: boolean;
+			maxElemsToParse?: number;
+			nbTopCandidates?: number;
+			charThreshold?: number;
+			classesToPreserve?: string[];
+			keepClasses?: boolean;
+		});
+		parse(): {
+			title: string;
+			content: string;
+			textContent: string;
+			length: number;
+			excerpt: string;
+			byline: string;
+			dir: string;
+			siteName: string;
+			lang: string;
+			publishedTime: string;
+		} | null;
+	}
+
+	export function isProbablyReaderable(doc: Document, options?: {
+		minContentLength?: number;
+		minScore?: number;
+		visibilityChecker?: (node: Element) => boolean;
+	}): boolean;
+}
diff --git a/src/scripts/domParsers/domUtils.ts b/src/scripts/domParsers/domUtils.ts
index 7856be96..21492645 100644
--- a/src/scripts/domParsers/domUtils.ts
+++ b/src/scripts/domParsers/domUtils.ts
@@ -336,6 +336,8 @@ export class DomUtils {
 	 */
 	public static getCleanDomOfCurrentPage(originalDoc: Document): string {
 		let doc = DomUtils.cloneDocument(originalDoc);
+		DomUtils.inlineHiddenElements(doc, originalDoc);
+		DomUtils.flattenShadowDomSlots(doc, originalDoc);
 		DomUtils.convertCanvasElementsToImages(doc, originalDoc);
 		DomUtils.addBaseTagIfNecessary(doc, originalDoc.location);
 
@@ -467,6 +469,89 @@ export class DomUtils {
 		return container.insertBefore(spacerNode, referenceNode);
 	}
 
+	/**
+	 * Handle elements that were inside web components with shadow DOM.
+	 * cloneNode(true) does NOT clone declarative shadow roots, so slotted content
+	 * (e.g., dropdown panels with slot="dropdown") becomes visible as regular DOM.
+	 * For elements whose shadow-hosted parent hid them via slot CSS, we check the
+	 * original document's computed visibility and inline display:none if hidden.
+	 *
+	 * Also removes <template shadowroot="open"> elements from the clone since
+	 * they render as visible empty content without shadow DOM support.
+	 */
+	public static flattenShadowDomSlots(doc: Document, originalDoc: Document): void {
+		// Remove any leftover shadow root templates in the clone
+		let templates = doc.querySelectorAll("template[shadowroot], template[shadowrootmode]");
+		for (let i = 0; i < templates.length; i++) {
+			if (templates[i].parentNode) {
+				templates[i].parentNode.removeChild(templates[i]);
+			}
+		}
+
+		// Detect shadow hosts from the ORIGINAL document (not the clone).
+		// The browser consumes <template shadowroot> during parsing, creating real shadow roots.
+		// cloneNode(true) does NOT clone shadow roots, so slotted content becomes visible.
+		// We find shadow hosts by checking element.shadowRoot on the original DOM.
+		let originalAll = originalDoc.body ? originalDoc.body.querySelectorAll("*") : [];
+		let clonedAll = doc.body ? doc.body.querySelectorAll("*") : [];
+
+		for (let i = 0; i < originalAll.length && i < clonedAll.length; i++) {
+			let origEl = originalAll[i] as HTMLElement;
+			if (origEl.shadowRoot) {
+				// This element had a shadow root — hide non-button slot content in the clone
+				let clonedEl = clonedAll[i] as HTMLElement;
+				let slots = clonedEl.querySelectorAll('[slot]:not([slot="button"]):not([slot="trigger"])');
+				for (let j = 0; j < slots.length; j++) {
+					(slots[j] as HTMLElement).style.setProperty("display", "none", "important");
+				}
+			}
+		}
+	}
+
+	/**
+	 * Preserve the computed visibility of elements by inlining display:none on elements
+	 * that are hidden in the live document. Without this, elements hidden by JavaScript
+	 * or CSS classes (popups, dropdowns, modals) would become visible in the renderer
+	 * since scripts are stripped and CSS class logic may not apply.
+	 *
+	 * Must be called immediately after cloneDocument and before any element removals,
+	 * so that element indices match between the original and cloned documents.
+	 */
+	public static inlineHiddenElements(doc: Document, originalDoc: Document): void {
+		if (!originalDoc.body || !doc.body) {
+			return;
+		}
+
+		let originalElements = originalDoc.body.querySelectorAll("*");
+		let clonedElements = doc.body.querySelectorAll("*");
+
+		// Batch read: collect indices of hidden elements
+		let hiddenIndices: number[] = [];
+		for (let i = 0; i < originalElements.length && i < clonedElements.length; i++) {
+			let el = originalElements[i] as HTMLElement;
+			// Skip elements that already have inline display:none
+			if (el.style && el.style.display === "none") {
+				continue;
+			}
+			try {
+				let computed = window.getComputedStyle(el);
+				if (computed.display === "none") {
+					hiddenIndices.push(i);
+				}
+			} catch (e) {
+				// Skip elements that can't be computed (e.g., disconnected nodes)
+			}
+		}
+
+		// Batch write: inline display:none on corresponding cloned elements
+		for (let i = 0; i < hiddenIndices.length; i++) {
+			let el = clonedElements[hiddenIndices[i]] as HTMLElement;
+			if (el && el.style) {
+				el.style.setProperty("display", "none", "important");
+			}
+		}
+	}
+
 	/**
 	 * Clones the document into a new document object
 	 */
@@ -593,18 +678,28 @@ export class DomUtils {
 	}
 
 	/**
-	 * Remove any references to URLs that won't work on another box (i.e. our servers)
+	 * Remove links that reference non-web URLs (extension resources, local files, etc.)
+	 * that won't work in the renderer. Uses getAttribute to get the raw href value,
+	 * since linkElement.href may not resolve properly on cloned documents.
+	 * Relative URLs (starting with / or .) are kept — they're valid web URLs.
 	 */
 	public static removeUnsupportedHrefs(doc: Document) {
 		DomUtils.domReplacer(doc, DomUtils.tags.link, (node: Node) => {
 			let linkElement: HTMLLinkElement = <HTMLLinkElement>node;
-			let href = linkElement.href;
+			let href = linkElement.getAttribute("href") || "";
 
-			if (this.isLocalReferenceUrl(href)) {
-				return undefined;
+			// Keep links with web URLs (absolute or relative paths)
+			if (href.indexOf("http://") === 0 || href.indexOf("https://") === 0 || href.indexOf("//") === 0) {
+				return linkElement;
+			}
+
+			// Keep relative URLs (paths starting with / or . or alphanumeric)
+			if (href.length > 0 && !this.isNonWebScheme(href)) {
+				return linkElement;
 			}
 
-			return linkElement;
+			// Remove links without href or with non-web schemes (chrome-extension://, file://, etc.)
+			return undefined;
 		});
 	}
 
@@ -1010,7 +1105,74 @@ export class DomUtils {
 		return scrollValue * 100;
 	}
 
+	/**
+	 * Extract CSS text from all accessible external stylesheets in the document's CSSOM.
+	 * Returns a map of absolute stylesheet URL → { cssText, media }.
+	 * Cross-origin sheets without CORS will be silently skipped.
+	 */
+	public static extractExternalStylesheets(originalDoc: Document): { [url: string]: { cssText: string; media: string } } {
+		let result: { [url: string]: { cssText: string; media: string } } = {};
+
+		for (let i = 0; i < originalDoc.styleSheets.length; i++) {
+			let sheet = originalDoc.styleSheets[i] as CSSStyleSheet;
+			if (!sheet.href) {
+				continue;
+			}
+
+			let rules: CSSRuleList;
+			try {
+				rules = sheet.cssRules;
+			} catch (e) {
+				// SecurityError for cross-origin sheets without CORS headers
+				continue;
+			}
+
+			if (!rules || rules.length === 0) {
+				continue;
+			}
+
+			let cssText = "";
+			for (let j = 0; j < rules.length; j++) {
+				// Skip @import rules — imported sheets are separate entries in document.styleSheets
+				if (rules[j].type === CSSRule.IMPORT_RULE) {
+					continue;
+				}
+				cssText += rules[j].cssText + "\n";
+			}
+
+			// Resolve url() references to absolute using the stylesheet's URL as base
+			cssText = DomUtils.resolveCssUrls(cssText, sheet.href);
+
+			let media = sheet.media && sheet.media.mediaText ? sheet.media.mediaText : "";
+			result[sheet.href] = { cssText: cssText, media: media };
+		}
+
+		return result;
+	}
+
+	/**
+	 * Resolve relative url() references in CSS text to absolute URLs.
+	 * Chrome's CSSOM usually returns absolute URLs, but this is a safety net.
+	 */
+	private static resolveCssUrls(cssText: string, baseUrl: string): string {
+		return cssText.replace(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/g, (match, quote, urlVal) => {
+			if (!urlVal || urlVal.indexOf("data:") === 0 || urlVal.indexOf("blob:") === 0 || urlVal.indexOf("#") === 0) {
+				return match;
+			}
+			try {
+				let absolute = new URL(urlVal, baseUrl).href;
+				return "url(" + quote + absolute + quote + ")";
+			} catch (e) {
+				return match;
+			}
+		});
+	}
+
 	private static isLocalReferenceUrl(url: string): Boolean {
 		return !(url.indexOf("https://") === 0 || url.indexOf("http://") === 0);
 	}
+
+	private static isNonWebScheme(url: string): Boolean {
+		return /^(chrome-extension|moz-extension|ms-browser-extension|file|blob|javascript):/i.test(url);
+	}
 }
diff --git a/src/scripts/extensions/bookmarklet/inlineWorker.ts b/src/scripts/extensions/bookmarklet/inlineWorker.ts
index df21aefe..0089b3c0 100644
--- a/src/scripts/extensions/bookmarklet/inlineWorker.ts
+++ b/src/scripts/extensions/bookmarklet/inlineWorker.ts
@@ -77,6 +77,10 @@ export class InlineWorker extends ExtensionWorkerBase<any, any> {
 		return this.throwNotImplementedFailure();
 	}
 
+	protected takeFullPageScreenshot(htmlContent: string): Promise<string[]> {
+		return this.throwNotImplementedFailure();
+	}
+
 	/**
 	 * Launches the sign in window, rejecting with an error object if something went wrong on the server during
 	 * authentication. Otherwise, it resolves with true if the redirect endpoint was hit as a result of a successful
diff --git a/src/scripts/extensions/chrome/manifest.json b/src/scripts/extensions/chrome/manifest.json
index 64a48fe0..2b37f4fc 100644
--- a/src/scripts/extensions/chrome/manifest.json
+++ b/src/scripts/extensions/chrome/manifest.json
@@ -3,7 +3,7 @@
     "name": "OneNote Web Clipper",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
-    "version": "3.10.12",
+    "version": "3.11.0",
     "background": {
       "service_worker": "chromeExtension.js",
       "type": "module"
@@ -41,7 +41,8 @@
       "tabs",
       "webRequest",
       "webNavigation",
-      "offscreen"
+      "offscreen",
+      "storage"
     ],
     "host_permissions": [
       "<all_urls>"
diff --git a/src/scripts/extensions/clipperInject.ts b/src/scripts/extensions/clipperInject.ts
index 8a66cd3d..195fd661 100644
--- a/src/scripts/extensions/clipperInject.ts
+++ b/src/scripts/extensions/clipperInject.ts
@@ -318,6 +318,10 @@ export class ClipperInject extends FrameInjectBase<ClipperInjectOptions> {
 			this.frame.style.display = "none";
 		});
 
+		this.uiCommunicator.registerFunction(Constants.FunctionKeys.showUi, () => {
+			this.frame.style.display = "";
+		});
+
 		this.uiCommunicator.registerFunction(Constants.FunctionKeys.refreshPage, () => {
 			location.reload();
 		});
@@ -329,13 +333,19 @@ export class ClipperInject extends FrameInjectBase<ClipperInjectOptions> {
 	private createPageInfo(): PageInfo {
 		let contentType: OneNoteApi.ContentType = DomUtils.getPageContentType(document);
 
+		// Extract external stylesheets from the live CSSOM for the full page screenshot renderer.
+		// Stored on pageInfo and passed through the communicator (content scripts can't use chrome.storage.session).
+		// The clipper UI (an extension page) stores this in session storage before opening the renderer.
+		let stylesheetCache = DomUtils.extractExternalStylesheets(document);
+
 		return {
 			canonicalUrl: DomUtils.fetchCanonicalUrl(document),
 			contentData: this.getTrimmedDomString(),
 			contentLocale: DomUtils.getLocale(document),
 			contentTitle: (contentType === OneNoteApi.ContentType.EnhancedUrl) ? DomUtils.getFileNameFromUrl(document) : document.title,
 			contentType: contentType,
-			rawUrl: document.URL
+			rawUrl: document.URL,
+			stylesheetCache: Object.keys(stylesheetCache).length > 0 ? stylesheetCache : undefined
 		} as PageInfo;
 	}
 
diff --git a/src/scripts/extensions/contentCaptureInject.ts b/src/scripts/extensions/contentCaptureInject.ts
new file mode 100644
index 00000000..d4628abb
--- /dev/null
+++ b/src/scripts/extensions/contentCaptureInject.ts
@@ -0,0 +1,255 @@
+// Standalone content capture — reads page DOM and sends to worker.
+// Injected by worker via chrome.scripting.executeScript.
+// Messages are JSON strings (required by offscreen.ts message handler).
+//
+// DOM cleaning pipeline: master's DomUtils.getCleanDomOfCurrentPage baseline +
+// enhancements for multi-viewport screenshot stitching:
+//   clone → inlineHiddenElements → neutralizePositioning → flattenShadowDomSlots →
+//   convertCanvasToImages → addBaseTag → addImageSizes → removeUnwantedItems
+//   (removeStylesWithBase64, removeClipperElements + iframe filter,
+//   removeUnwantedElements, removeUnwantedAttributes, removeUnsupportedHrefs) →
+//   getDomString → resolveLazyImages
+
+(function() {
+	// --- Helpers ---
+
+	function isLocalReferenceUrl(url: string): boolean {
+		return !(url.indexOf("https://") === 0 || url.indexOf("http://") === 0);
+	}
+
+	// --- DOM cleaning (master DomUtils baseline) ---
+
+	function cloneDocument(originalDoc: Document): Document {
+		return originalDoc.cloneNode(true) as Document;
+	}
+
+	// --- Enhancements (not in master, run on clone before master steps) ---
+
+	function inlineHiddenElements(doc: Document, originalDoc: Document): void {
+		if (!originalDoc.body || !doc.body) { return; }
+		let originalElements = originalDoc.body.querySelectorAll("*");
+		let clonedElements = doc.body.querySelectorAll("*");
+		let hiddenIndices: number[] = [];
+		for (let i = 0; i < originalElements.length && i < clonedElements.length; i++) {
+			let el = originalElements[i] as HTMLElement;
+			if (el.style && el.style.display === "none") { continue; }
+			try {
+				let computed = window.getComputedStyle(el);
+				if (computed.display === "none") { hiddenIndices.push(i); }
+			} catch (e) { /* skip */ }
+		}
+		for (let i = 0; i < hiddenIndices.length; i++) {
+			let el = clonedElements[hiddenIndices[i]] as HTMLElement;
+			if (el && el.style) { el.style.setProperty("display", "none", "important"); }
+		}
+	}
+
+	function neutralizePositioning(doc: Document, originalDoc: Document): void {
+		if (!originalDoc.body || !doc.body) { return; }
+		let originalElements = originalDoc.body.querySelectorAll("*");
+		let clonedElements = doc.body.querySelectorAll("*");
+		for (let i = 0; i < originalElements.length && i < clonedElements.length; i++) {
+			try {
+				let computed = window.getComputedStyle(originalElements[i]);
+				let pos = computed.position;
+				if (pos === "sticky") {
+					(clonedElements[i] as HTMLElement).style.setProperty("position", "relative", "important");
+				} else if (pos === "fixed") {
+					(clonedElements[i] as HTMLElement).style.setProperty("position", "absolute", "important");
+				}
+			} catch (e) { /* skip */ }
+		}
+	}
+
+	function flattenShadowDomSlots(doc: Document, originalDoc: Document): void {
+		let templates = doc.querySelectorAll("template[shadowroot], template[shadowrootmode]");
+		for (let i = 0; i < templates.length; i++) {
+			if (templates[i].parentNode) { templates[i].parentNode.removeChild(templates[i]); }
+		}
+		let originalAll = originalDoc.body ? originalDoc.body.querySelectorAll("*") : [];
+		let clonedAll = doc.body ? doc.body.querySelectorAll("*") : [];
+		for (let i = 0; i < originalAll.length && i < clonedAll.length; i++) {
+			let origEl = originalAll[i] as HTMLElement;
+			if (origEl.shadowRoot) {
+				let clonedEl = clonedAll[i] as HTMLElement;
+				let slots = clonedEl.querySelectorAll('[slot]:not([slot="button"]):not([slot="trigger"])');
+				for (let j = 0; j < slots.length; j++) {
+					(slots[j] as HTMLElement).style.setProperty("display", "none", "important");
+				}
+			}
+		}
+	}
+
+	function resolveLazyImages(html: string): string {
+		return html.replace(/<img([^>]*?)>/gi, function(match: string, attrs: string) {
+			if (/\ssrc\s*=\s*["'][^"']+["']/i.test(attrs) && !/\ssrc\s*=\s*["']data:/i.test(attrs)) {
+				return match;
+			}
+			let lazySrc = "";
+			let lazyMatch = attrs.match(/\sdata-(?:src|lazy-src|original)\s*=\s*["']([^"']+)["']/i);
+			if (lazyMatch) { lazySrc = lazyMatch[1]; }
+			if (lazySrc) {
+				if (/\ssrc\s*=/i.test(attrs)) {
+					attrs = attrs.replace(/\ssrc\s*=\s*["'][^"']*["']/i, ' src="' + lazySrc + '"');
+				} else {
+					attrs += ' src="' + lazySrc + '"';
+				}
+				return "<img" + attrs + ">";
+			}
+			return match;
+		});
+	}
+
+	// --- Master DomUtils steps ---
+
+	function convertCanvasElementsToImages(doc: Document, originalDoc: Document): void {
+		let originalCanvases = originalDoc.querySelectorAll("canvas");
+		let clonedCanvases = doc.querySelectorAll("canvas");
+		for (let i = 0; i < originalCanvases.length && i < clonedCanvases.length; i++) {
+			try {
+				let img = doc.createElement("img");
+				img.src = (originalCanvases[i] as HTMLCanvasElement).toDataURL();
+				img.style.cssText = window.getComputedStyle(originalCanvases[i]).cssText;
+				if (clonedCanvases[i].parentNode) {
+					clonedCanvases[i].parentNode.replaceChild(img, clonedCanvases[i]);
+				}
+			} catch (e) { /* tainted canvas — skip */ }
+		}
+	}
+
+	function addBaseTagIfNecessary(doc: Document, location: Location): void {
+		if (!doc.head) {
+			let headEl = doc.createElement("head");
+			let htmlEl = doc.getElementsByTagName("html")[0] as HTMLHtmlElement;
+			if (htmlEl) { htmlEl.insertBefore(headEl, htmlEl.children[0]); }
+		}
+		let bases = doc.head.querySelectorAll("base");
+		if (bases.length === 0) {
+			let baseUrl = location.href.split("#")[0].split("?")[0];
+			baseUrl = baseUrl.substr(0, baseUrl.lastIndexOf("/") + 1);
+			let baseTag = doc.createElement("base") as HTMLBaseElement;
+			baseTag.href = baseUrl;
+			doc.head.insertBefore(baseTag, doc.head.firstChild);
+		}
+	}
+
+	function addImageSizeInformationToDom(doc: Document): void {
+		let imgs = doc.getElementsByTagName("img");
+		for (let i = 0; i < imgs.length; i++) {
+			let img = imgs[i];
+			if (!img.hasAttribute("data-height")) { img.setAttribute("data-height", img.height.toString()); }
+			if (!img.hasAttribute("data-width")) { img.setAttribute("data-width", img.width.toString()); }
+		}
+	}
+
+	// --- removeUnwantedItems sub-functions (master order) ---
+
+	function removeStylesWithBase64EncodedBinaries(doc: Document): void {
+		let styles = doc.querySelectorAll("style");
+		for (let i = styles.length - 1; i >= 0; i--) {
+			let text = (styles[i] as HTMLElement).innerHTML;
+			if (text.indexOf("data:application") !== -1) {
+				if (styles[i].parentNode) { styles[i].parentNode.removeChild(styles[i]); }
+			}
+		}
+	}
+
+	function removeClipperElements(doc: Document): void {
+		// Remove clipper-injected elements by ID
+		let clipperIds = ["clipperRootScript", "clipperUiFrame", "clipperExtFrame"];
+		for (let j = 0; j < clipperIds.length; j++) {
+			let el = doc.getElementById(clipperIds[j]);
+			if (el && el.parentNode) { el.parentNode.removeChild(el); }
+		}
+		// Remove iframes that point to local (non-http/https) URLs
+		let iframes = doc.querySelectorAll("iframe");
+		for (let i = iframes.length - 1; i >= 0; i--) {
+			let src = (iframes[i] as HTMLIFrameElement).src;
+			if (isLocalReferenceUrl(src)) {
+				if (iframes[i].parentNode) { iframes[i].parentNode.removeChild(iframes[i]); }
+			}
+		}
+	}
+
+	function removeUnwantedElements(doc: Document): void {
+		let scripts = doc.querySelectorAll("script, noscript");
+		for (let i = scripts.length - 1; i >= 0; i--) {
+			if (scripts[i].parentNode) { scripts[i].parentNode.removeChild(scripts[i]); }
+		}
+	}
+
+	function removeUnwantedAttributes(doc: Document): void {
+		let images = doc.getElementsByTagName("IMG");
+		for (let i = 0; i < images.length; i++) {
+			let image = images[i] as HTMLImageElement;
+			(image as any).srcset = undefined;
+			image.removeAttribute("srcset");
+		}
+	}
+
+	function removeUnsupportedHrefs(doc: Document): void {
+		let links = doc.querySelectorAll("link");
+		for (let i = links.length - 1; i >= 0; i--) {
+			let href = (links[i] as HTMLLinkElement).href;
+			if (isLocalReferenceUrl(href)) {
+				if (links[i].parentNode) { links[i].parentNode.removeChild(links[i]); }
+			}
+		}
+	}
+
+	function removeUnwantedItems(doc: Document): void {
+		removeStylesWithBase64EncodedBinaries(doc);
+		removeClipperElements(doc);
+		removeUnwantedElements(doc);
+		removeUnwantedAttributes(doc);
+		removeUnsupportedHrefs(doc);
+	}
+
+	// --- Serialization ---
+
+	function getDoctype(doc: Document): string {
+		let doctype = doc.doctype;
+		if (!doctype) { return ""; }
+		return "<!DOCTYPE "
+			+ doctype.name
+			+ (doctype.publicId ? " PUBLIC \"" + doctype.publicId + "\"" : "")
+			+ (!doctype.publicId && doctype.systemId ? " SYSTEM" : "")
+			+ (doctype.systemId ? " \"" + doctype.systemId + "\"" : "")
+			+ ">";
+	}
+
+	function getDomString(doc: Document): string {
+		return getDoctype(doc) + doc.documentElement.outerHTML;
+	}
+
+	// --- Main capture flow (matches DomUtils.getCleanDomOfCurrentPage) ---
+
+	let doc = cloneDocument(document);
+	inlineHiddenElements(doc, document);
+	neutralizePositioning(doc, document);
+	flattenShadowDomSlots(doc, document);
+	convertCanvasElementsToImages(doc, document);
+	addBaseTagIfNecessary(doc, document.location);
+	addImageSizeInformationToDom(doc);
+	removeUnwantedItems(doc);
+
+	// Preserve the original page's computed body font-size on the clone.
+	// CSS reset stylesheets (e.g., "body{font-size:75%}") may not get overridden
+	// correctly in the renderer iframe due to stylesheet loading order differences.
+	try {
+		let bodyFontSize = window.getComputedStyle(document.body).fontSize;
+		if (bodyFontSize && doc.body) {
+			doc.body.style.setProperty("font-size", bodyFontSize, "important");
+		}
+	} catch (e) { /* skip */ }
+
+	let html = resolveLazyImages(getDomString(doc));
+
+	chrome.runtime.sendMessage(JSON.stringify({
+		action: "contentCaptureComplete",
+		html: html,
+		baseUrl: document.baseURI || document.URL,
+		title: document.title || "",
+		url: document.URL || ""
+	}));
+})();
diff --git a/src/scripts/extensions/edge/manifest.json b/src/scripts/extensions/edge/manifest.json
index 96123579..bb4cc2a1 100644
--- a/src/scripts/extensions/edge/manifest.json
+++ b/src/scripts/extensions/edge/manifest.json
@@ -4,7 +4,7 @@
     "name": "OneNote Web Clipper",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
-    "version": "3.10.12",
+    "version": "3.11.0",
     "background": {
         "service_worker": "edgeExtension.js",
         "type": "module"
@@ -36,7 +36,8 @@
         "tabs",
         "webRequest",
         "webNavigation",
-        "offscreen"
+        "offscreen",
+        "storage"
     ],
 
     "host_permissions": [
diff --git a/src/scripts/extensions/extensionWorkerBase.ts b/src/scripts/extensions/extensionWorkerBase.ts
index 52cef741..9ec78321 100644
--- a/src/scripts/extensions/extensionWorkerBase.ts
+++ b/src/scripts/extensions/extensionWorkerBase.ts
@@ -192,6 +192,19 @@ export abstract class ExtensionWorkerBase<TTab, TTabIdentifier> {
 	 */
 	protected abstract takeTabScreenshot(): Promise<string>;
 
+	/**
+	 * Renders the given HTML in an offscreen context and captures full-page screenshots.
+	 * Returns an array of data URL strings.
+	 */
+	protected abstract takeFullPageScreenshot(htmlContent: string): Promise<string[]>;
+
+	/**
+	 * Cancels an in-progress full-page screenshot capture.
+	 */
+	protected cancelFullPageScreenshot(): void {
+		// Default no-op; overridden in WebExtensionWorker
+	}
+
 	/**
 	 * Closes all active frames and notifies the UI to invoke the clipper.
 	 */
@@ -584,6 +597,14 @@ export abstract class ExtensionWorkerBase<TTab, TTabIdentifier> {
 			return this.takeTabScreenshot();
 		});
 
+		this.uiCommunicator.registerFunction(Constants.FunctionKeys.takeFullPageScreenshot, () => {
+			return this.takeFullPageScreenshot("");
+		});
+
+		this.uiCommunicator.registerFunction(Constants.FunctionKeys.cancelFullPageScreenshot, () => {
+			this.cancelFullPageScreenshot();
+		});
+
 		this.uiCommunicator.setErrorHandler((e: Error) => {
 			Log.ErrorUtils.handleCommunicatorError(Constants.CommunicationChannels.extensionAndUi, e, this.clientInfo);
 		});
diff --git a/src/scripts/extensions/regionOverlay.ts b/src/scripts/extensions/regionOverlay.ts
new file mode 100644
index 00000000..610702b5
--- /dev/null
+++ b/src/scripts/extensions/regionOverlay.ts
@@ -0,0 +1,171 @@
+// Standalone region selection overlay — injected directly into the original tab.
+// No Mithril, no clipper state, no communicator. Just DOM + mouse events + chrome.runtime.sendMessage.
+// Borrows canvas darkening logic from regionSelector.tsx.
+
+(function() {
+	// Prevent double-injection
+	if (document.getElementById("__regionOverlayRoot")) { return; }
+
+	let root = document.createElement("div");
+	root.id = "__regionOverlayRoot";
+	root.style.cssText = "position:fixed;inset:0;z-index:2147483647;cursor:crosshair;overflow:hidden;";
+
+	// Dark overlay canvas — fills viewport, draws "hole" around selection
+	let canvas = document.createElement("canvas");
+	canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;";
+	root.appendChild(canvas);
+
+	// Selection border drawn on canvas (no separate div — avoids alignment gaps)
+
+	// Instruction bar — Shadow DOM isolates from page CSS
+	let instrHost = document.createElement("div");
+	instrHost.style.cssText = "position:absolute;top:16px;left:0;right:0;z-index:1;pointer-events:none;";
+	let shadow = instrHost.attachShadow({ mode: "closed" });
+	shadow.innerHTML = "<style>"
+		+ ":host { all: initial; }"
+		+ ".wrap { display:flex;justify-content:center; }"
+		+ ".bar { display:flex;align-items:center;gap:16px;padding:10px 20px;"
+		+   "background:rgba(0,0,0,0.75);border:1px solid rgba(255,255,255,0.3);"
+		+   "border-radius:8px;font:14px/1 -apple-system,Segoe UI,sans-serif;color:#fff;"
+		+   "pointer-events:auto;user-select:none;white-space:nowrap; }"
+		+ ".text { opacity:0.9; }"
+		+ ".back-btn { padding:6px 14px;background:rgba(255,255,255,0.15);color:#fff;"
+		+   "border:1px solid rgba(255,255,255,0.4);border-radius:4px;"
+		+   "font:13px/1 -apple-system,Segoe UI,sans-serif;cursor:pointer;outline:none;"
+		+   "transition:background 0.15s; }"
+		+ ".back-btn:hover { background:rgba(255,255,255,0.3); }"
+		+ "</style>"
+		+ "<div class=\"wrap\"><div class=\"bar\">"
+		+ "<span class=\"text\"></span>"
+		+ "<button class=\"back-btn\"></button>"
+		+ "</div></div>";
+
+	let strings = (window as any).__regionStrings || {};
+	let instrText = shadow.querySelector(".text") as HTMLElement;
+	instrText.textContent = strings.instruction || "Drag a selection with the mouse, and then release to capture.";
+	let cancelBtn = shadow.querySelector(".back-btn") as HTMLButtonElement;
+	cancelBtn.textContent = (strings.back || "Back") + " (Esc)";
+	cancelBtn.addEventListener("click", function(e) {
+		e.stopPropagation();
+		cleanup();
+		chrome.runtime.sendMessage(JSON.stringify({ action: "regionCancelled" }));
+	});
+	root.appendChild(instrHost);
+
+	document.body.appendChild(root);
+
+	let ctx = canvas.getContext("2d")!;
+	let dpr = window.devicePixelRatio || 1;
+	let startX = 0, startY = 0, endX = 0, endY = 0;
+	let dragging = false;
+
+	function resize() {
+		canvas.width = window.innerWidth * dpr;
+		canvas.height = window.innerHeight * dpr;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	}
+	resize();
+	window.addEventListener("resize", resize);
+
+	function draw() {
+		let w = window.innerWidth;
+		let h = window.innerHeight;
+		ctx.clearRect(0, 0, w, h);
+		ctx.fillStyle = "rgba(0,0,0,0.35)";
+
+		if (!dragging) {
+			ctx.fillRect(0, 0, w, h);
+			return;
+		}
+
+		let xMin = Math.min(startX, endX);
+		let yMin = Math.min(startY, endY);
+		let xMax = Math.max(startX, endX);
+		let yMax = Math.max(startY, endY);
+
+		// Four rectangles around selection (hole effect)
+		ctx.fillRect(0, 0, xMin, h);              // left
+		ctx.fillRect(xMin, 0, xMax - xMin, yMin); // top
+		ctx.fillRect(xMax, 0, w - xMax, h);       // right
+		ctx.fillRect(xMin, yMax, xMax - xMin, h - yMax); // bottom
+
+		// Draw selection border directly on canvas (no div — avoids subpixel gaps)
+		ctx.strokeStyle = "#fff";
+		ctx.lineWidth = 2;
+		ctx.strokeRect(xMin + 1, yMin + 1, (xMax - xMin) - 2, (yMax - yMin) - 2);
+	}
+	draw();
+
+	function onMouseDown(e: MouseEvent) {
+		if (e.composedPath().indexOf(instrHost) !== -1) { return; }
+		e.preventDefault();
+		dragging = true;
+		instrHost.style.display = "none";
+		startX = e.clientX;
+		startY = e.clientY;
+		endX = startX;
+		endY = startY;
+		draw();
+	}
+
+	function onMouseMove(e: MouseEvent) {
+		if (!dragging) { return; }
+		e.preventDefault();
+		endX = e.clientX;
+		endY = e.clientY;
+		draw();
+	}
+
+	function onMouseUp(e: MouseEvent) {
+		if (!dragging) { return; }
+		e.preventDefault();
+		dragging = false;
+		endX = e.clientX;
+		endY = e.clientY;
+
+		let xMin = Math.min(startX, endX);
+		let yMin = Math.min(startY, endY);
+		let w = Math.abs(endX - startX);
+		let h = Math.abs(endY - startY);
+
+		if (w < 5 || h < 5) {
+			// Too small — reset and let user try again
+			instrHost.style.display = "";
+			draw();
+			return;
+		}
+
+		// Remove overlay before capture so it's not in the screenshot
+		cleanup();
+
+		// Send selection coords to worker — must be JSON string (offscreen.ts parses all messages)
+		chrome.runtime.sendMessage(JSON.stringify({
+			action: "regionSelected",
+			x: xMin, y: yMin, width: w, height: h, dpr: dpr
+		}));
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			cleanup();
+			chrome.runtime.sendMessage(JSON.stringify({ action: "regionCancelled" }));
+		}
+	}
+
+	function cleanup() {
+		root.removeEventListener("mousedown", onMouseDown);
+		root.removeEventListener("mousemove", onMouseMove);
+		root.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener("keydown", onKeyDown, true);
+		window.removeEventListener("resize", resize);
+		if (root.parentNode) { root.parentNode.removeChild(root); }
+	}
+
+	// Expose cleanup for external removal
+	(window as any).__regionOverlayCleanup = cleanup;
+
+	root.addEventListener("mousedown", onMouseDown);
+	root.addEventListener("mousemove", onMouseMove);
+	root.addEventListener("mouseup", onMouseUp);
+	document.addEventListener("keydown", onKeyDown, true);
+})();
diff --git a/src/scripts/extensions/safari/safariWorker.ts b/src/scripts/extensions/safari/safariWorker.ts
index 4ef146aa..1e4c71a7 100644
--- a/src/scripts/extensions/safari/safariWorker.ts
+++ b/src/scripts/extensions/safari/safariWorker.ts
@@ -140,6 +140,14 @@ export class SafariWorker extends ExtensionWorkerBase<SafariBrowserTab, SafariBr
 		});
 	}
 
+	/**
+	 * Not supported on legacy Safari (lacks chrome.storage.session).
+	 * Returns failure signal; Full Page mode will show "No content found".
+	 */
+	protected takeFullPageScreenshot(htmlContent: string): Promise<string[]> {
+		return Promise.resolve({ success: false } as any);
+	}
+
 	/**
 	 * Launches a new tab and navigates to the given url. If autoCloseDestinationUrl is defined, then a
 	 * listener is set that will wait until the given URL is navigated to, the window is closed.
diff --git a/src/scripts/extensions/webExtensionBase/webExtensionWorker.ts b/src/scripts/extensions/webExtensionBase/webExtensionWorker.ts
index a6c09887..b4289c80 100644
--- a/src/scripts/extensions/webExtensionBase/webExtensionWorker.ts
+++ b/src/scripts/extensions/webExtensionBase/webExtensionWorker.ts
@@ -1,4 +1,4 @@
-import {AuthType} from "../../userInfo";
+import {AuthType, UpdateReason, UserInfo} from "../../userInfo";
 import {ClientInfo} from "../../clientInfo";
 import {ClientType} from "../../clientType";
 import {ClipperUrls} from "../../clipperUrls";
@@ -18,6 +18,8 @@ import {AuthenticationHelper} from "../authenticationHelper";
 import {ExtensionWorkerBase} from "../extensionWorkerBase";
 import {InjectHelper} from "../injectHelper";
 
+import {InvokeInfo} from "../invokeInfo";
+import {InvokeOptions} from "../invokeOptions";
 import {InjectUrls} from "./injectUrls";
 import {WebExtension} from "./webExtension";
 import {WebExtensionBackgroundMessageHandler} from "./webExtensionMessageHandler";
@@ -29,6 +31,8 @@ type Window = chrome.windows.Window;
 export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 	private injectUrls: InjectUrls;
 	private noOpTrackerInvoked: boolean;
+	private activeRendererCleanup: () => void;
+	private activeRendererWindowId: number;
 
 	constructor(injectUrls: InjectUrls, tab: W3CTab, clientInfo: SmartValue<ClientInfo>, auth: AuthenticationHelper) {
 		let messageHandlerThunk = () => { return new WebExtensionBackgroundMessageHandler(tab.id); };
@@ -39,6 +43,9 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 		this.tabId = tab.id;
 		this.noOpTrackerInvoked = false;
 
+		this.activeRendererCleanup = () => { /* no-op */ };
+		this.activeRendererWindowId = 0;
+
 		let isPrivateWindow: Boolean = !!tab.incognito || !!tab.inPrivate;
 
 		this.consoleOutputEnabledFlagProcessed.then(() => {
@@ -75,6 +82,22 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 		fetch(signOutUrl);
 	}
 
+	/**
+	 * Override: open the renderer window directly instead of injecting clipperInject.ts.
+	 * If a renderer window is already open, focus it.
+	 */
+	public closeAllFramesAndInvokeClipper(invokeInfo: InvokeInfo, options: InvokeOptions) {
+		if (this.activeRendererWindowId) {
+			WebExtension.browser.windows.update(this.activeRendererWindowId, { focused: true }, () => {
+				if (WebExtension.browser.runtime.lastError) {
+					this.activeRendererWindowId = 0;
+				}
+			});
+			return;
+		}
+		this.openRendererWindow();
+	}
+
 	/**
 	 * Notify the UI to invoke the clipper. Resolve with true if it was thought to be successfully
 	 * injected; otherwise resolves with false.
@@ -203,6 +226,608 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 		});
 	}
 
+	/**
+	 * Cancels an in-progress full-page screenshot capture.
+	 */
+	protected cancelFullPageScreenshot(): void {
+		this.activeRendererCleanup();
+	}
+
+	/**
+	 * Legacy: called by clipper.tsx via communicator. In the new flow, openRendererWindow() is used instead.
+	 */
+	protected takeFullPageScreenshot(htmlContent: string): Promise<string[]> {
+		this.openRendererWindow();
+		return new Promise<string[]>(() => { /* renderer window handles everything */ });
+	}
+
+	/**
+	 * Opens the renderer window directly (no clipperInject.ts injection).
+	 * Checks sign-in state: if signed in, injects content capture and starts capture.
+	 * If not signed in, renderer shows sign-in panel and waits.
+	 */
+	private openRendererWindow() {
+		if (this.activeRendererWindowId) {
+			WebExtension.browser.windows.update(this.activeRendererWindowId, { focused: true }, () => {
+				if (WebExtension.browser.runtime.lastError) {
+					this.activeRendererWindowId = 0;
+				}
+			});
+			return;
+		}
+
+		this.clipperData.getValue("isUserLoggedIn").then((val: string) => {
+			let signedIn = val === "true";
+			this.launchRenderer(signedIn);
+		}, () => {
+			this.launchRenderer(false);
+		});
+	}
+
+	// Generate a RFC4122 v4 UUID (matches StringUtils.generateGuid)
+	private static newGuid(): string {
+		return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+			let r = Math.random() * 16 | 0;
+			return (c === "x" ? r : (r & 0x3 | 0x8)).toString(16);
+		});
+	}
+
+	private launchRenderer(signedIn: boolean) {
+		let rendererUrl = WebExtension.browser.runtime.getURL("renderer.html");
+		let renderWindowId: number;
+		let pendingPort: chrome.runtime.Port;
+		let windowReady = false;
+		let contentCaptured = false;
+		let activePort: chrome.runtime.Port;
+
+		// Per-session USID for API call correlation and feedback URL.
+		// Matches old logger pattern: "cccccccc-" prefix + v4 UUID tail.
+		let sessionUsid = "cccccccc-" + WebExtensionWorker.newGuid().substring(9);
+
+		// Listener for contentCaptureInject.ts messages — stores page data in session storage
+		let captureListener = (rawMsg: any, sender: any) => {
+			if (!sender.tab || sender.tab.id !== this.tab.id) { return; }
+			let msg: any;
+			try { msg = typeof rawMsg === "string" ? JSON.parse(rawMsg) : rawMsg; } catch (e) { return; }
+			if (msg.action !== "contentCaptureComplete") { return; }
+			chrome.runtime.onMessage.removeListener(captureListener);
+
+			let storageData: any = {
+				fullPageHtmlContent: msg.html || "",
+				fullPageBaseUrl: msg.baseUrl || "",
+				fullPageTitle: msg.title || "",
+				fullPageUrl: msg.url || "",
+				fullPageStatusText: "Capturing page..."
+			};
+			chrome.storage.session.set(storageData, () => {
+				contentCaptured = true;
+				if (activePort) {
+					activePort.postMessage({ action: "loadContent" });
+				}
+			});
+		};
+
+		// If signed in, inject content capture script immediately (runs in parallel with window opening)
+		if (signedIn) {
+			chrome.runtime.onMessage.addListener(captureListener);
+			WebExtension.browser.scripting.executeScript({
+				target: { tabId: this.tab.id },
+				files: ["contentCaptureInject.js"]
+			});
+		}
+
+		WebExtension.browser.windows.getCurrent((currentWindow: chrome.windows.Window) => {
+		let sidebarWidth = 322;
+		let contentWidth = Math.min(currentWindow && currentWindow.width ? currentWindow.width : 1280, 1280);
+		let renderWidth = contentWidth + sidebarWidth;
+		let renderHeight = currentWindow ? currentWindow.height : 768;
+		let renderLeft = currentWindow ? currentWindow.left : 0;
+		let renderTop = currentWindow ? currentWindow.top : 0;
+
+		let setupPort = (port: chrome.runtime.Port) => {
+			activePort = port;
+			let viewportHeight: number;
+			let captureContentHeight: number;
+			let captureCount = 0;
+			let lastScrollY: number = -1;
+			let lastScrollData: { scrollY: number; pageHeight: number };
+
+			let cleaned = false;
+			let cleanup = () => {
+				if (cleaned) { return; }
+				cleaned = true;
+				this.activeRendererCleanup = () => { /* no-op */ };
+				this.activeRendererWindowId = 0;
+				try { port.disconnect(); } catch (e) { /* ignore */ }
+				WebExtension.browser.windows.remove(renderWindowId, () => {
+					if (WebExtension.browser.runtime.lastError) { /* window may already be closed */ }
+				});
+				// Clean up all session storage from this capture session
+				chrome.storage.session.get(null, (all: any) => { // tslint:disable-line:no-null-keyword
+					let keys = Object.keys(all || {}).filter(function(k) {
+						return k.indexOf("fullPage") === 0 || k.indexOf("regionImage") === 0;
+					});
+					if (keys.length > 0) { chrome.storage.session.remove(keys); }
+				});
+				try { chrome.runtime.onMessage.removeListener(captureListener); } catch (e) { /* ignore */ }
+			};
+			this.activeRendererCleanup = cleanup;
+
+			// Handle renderer window being closed by user
+			port.onDisconnect.addListener(() => {
+				if (!cleaned) { cleanup(); }
+			});
+
+			port.onMessage.addListener((message: any) => {
+				if (message.action === "ready") {
+					// Set zoom to 100% before loading content
+					try {
+						WebExtension.browser.tabs.query({ windowId: renderWindowId }, (tabs: chrome.tabs.Tab[]) => {
+							if (tabs && tabs.length > 0 && tabs[0].id) {
+								WebExtension.browser.tabs.setZoom(tabs[0].id, 1, () => {
+									// Only send loadContent if content capture already completed
+									if (contentCaptured) {
+										port.postMessage({ action: "loadContent" });
+									}
+								});
+							} else if (contentCaptured) {
+								port.postMessage({ action: "loadContent" });
+							}
+						});
+					} catch (e) {
+						if (contentCaptured) {
+							port.postMessage({ action: "loadContent" });
+						}
+					}
+				}
+
+				// --- Sign-in from renderer (self-contained sign-in) ---
+				if (message.action === "signIn") {
+					let authType: AuthType = (AuthType as any)[message.authType];
+					this.doSignInAction(authType).then(() => {
+						return this.auth.updateUserInfoData(this.clientInfo.get().clipperId, UpdateReason.SignInAttempt);
+					}).then((updatedUser: UserInfo) => {
+						if (updatedUser && updatedUser.user) {
+							this.clipperData.setValue("isUserLoggedIn", "true");
+							port.postMessage({
+								action: "signInResult",
+								success: true,
+								user: {
+									email: updatedUser.user.emailAddress || "",
+									name: updatedUser.user.fullName || "",
+									authType: updatedUser.user.authType || ""
+								}
+							});
+							// Now inject content capture into original tab
+							chrome.runtime.onMessage.addListener(captureListener);
+							WebExtension.browser.scripting.executeScript({
+								target: { tabId: this.tab.id },
+								files: ["contentCaptureInject.js"]
+							});
+						} else {
+							port.postMessage({ action: "signInResult", success: false, error: "Sign-in cancelled" });
+						}
+					}).catch((errorObject: any) => {
+						let errMsg = errorObject.errorDescription || errorObject.error || "Sign-in failed";
+						port.postMessage({ action: "signInResult", success: false, error: errMsg });
+					});
+				}
+
+				if (message.action === "dimensions") {
+					viewportHeight = message.viewportHeight;
+					captureContentHeight = message.contentHeight;
+					// Reset capture loop state — handles re-capture after sign-out/sign-in
+					captureCount = 0;
+					lastScrollY = -1;
+					lastScrollData = { scrollY: 0, pageHeight: 0 };
+
+					if (!viewportHeight) {
+						cleanup();
+						return;
+					}
+
+					// Initialize the renderer's stitch canvas
+					port.postMessage({
+						action: "initCanvas",
+						viewportHeight: viewportHeight,
+						contentHeight: captureContentHeight,
+						pageHeight: message.pageHeight
+					});
+
+					port.postMessage({ action: "scroll", scrollTo: 0 });
+				}
+
+				if (message.action === "scrollResult") {
+					lastScrollData = { scrollY: message.scrollY, pageHeight: message.pageHeight };
+					setTimeout(() => {
+						// Re-focus renderer window before capture — handles user clicking away
+						WebExtension.browser.windows.update(renderWindowId, { focused: true }, () => {
+							WebExtension.browser.tabs.captureVisibleTab(renderWindowId, { format: "png" }, (dataUrl: string) => {
+								if (!dataUrl) {
+									cleanup();
+									return;
+								}
+
+								// Send capture to renderer for incremental stitching
+								let estimatedTotal = Math.ceil((captureContentHeight || lastScrollData.pageHeight) / viewportHeight);
+								port.postMessage({
+									action: "drawCapture",
+									dataUrl: dataUrl,
+									index: captureCount,
+									scrollY: lastScrollData.scrollY,
+									viewportHeight: viewportHeight,
+									totalViewports: Math.max(estimatedTotal, captureCount + 1)
+								});
+							});
+						});
+					}, 500);
+				}
+
+				if (message.action === "drawComplete") {
+					// Detect scroll stall: if scrollY didn't change, we've hit the
+					// real bottom even if scrollHeight is inflated
+					let scrollStalled = captureCount > 0 && lastScrollData.scrollY === lastScrollY;
+					lastScrollY = lastScrollData.scrollY;
+					captureCount++;
+
+					let maxCaptureHeight = 16384;
+					let atBottom = lastScrollData.scrollY + viewportHeight >= lastScrollData.pageHeight
+						|| scrollStalled
+						|| (captureCount * viewportHeight) >= maxCaptureHeight;
+
+					if (atBottom) {
+						port.postMessage({ action: "finalize" });
+					} else {
+						port.postMessage({ action: "scroll", scrollTo: captureCount * viewportHeight });
+					}
+				}
+
+				if (message.action === "finalizeComplete") {
+					// Keep window alive — user can switch modes, edit title, then save
+				}
+
+				// --- Telemetry from renderer — route to worker's logger ---
+				if (message.action === "telemetry") {
+					try {
+						Log.parseAndLogDataPackage(message.data as Log.LogDataPackage, this.logger);
+					} catch (e) { /* ignore malformed telemetry */ }
+				}
+
+				if (message.action === "save") {
+					// Save to OneNote API from unified renderer window
+					let saveMode = message.mode || "fullpage";
+					let saveTitle = message.title || "";
+					let saveAnnotation = message.annotation || "";
+					let saveSectionId = message.sectionId || "";
+					let saveUrl = message.url || "";
+
+					// Ensure fresh token before save (matches old clipper.tsx ensureFreshUserBeforeClip)
+					this.auth.updateUserInfoData(this.clientInfo.get().clipperId, UpdateReason.TokenRefreshForPendingClip).then(() => {
+						// Get (now-fresh) access token from local storage via offscreen
+						return this.clipperData.getValue("userInformation");
+					}, () => {
+						// Token refresh failed — try with cached token anyway
+						return this.clipperData.getValue("userInformation");
+					}).then((userInfoJson: string) => {
+							let accessToken = "";
+							try {
+								let userInfo = JSON.parse(userInfoJson);
+								accessToken = userInfo && userInfo.data ? userInfo.data.accessToken : "";
+							} catch (e) { /* ignore */ }
+
+							if (!accessToken) {
+								port.postMessage({ action: "saveResult", success: false, error: "Not signed in" });
+								return;
+							}
+
+							// Build OneNote page content based on mode
+							let buildPage = (bodyOnml: string, imageParts: { name: string; blob: Blob; type: string }[]) => {
+								let boundary = "OneNoteRendererBoundary" + Date.now();
+								// UTC offset string — same format as OneNoteApi.OneNotePage.formUtcOffsetString
+								let now = new Date();
+								let offset = now.getTimezoneOffset();
+								let offsetSign = offset >= 0 ? "-" : "+";
+								offset = Math.abs(offset);
+								let offsetHours = Math.floor(offset / 60).toString();
+								let offsetMins = Math.round(offset % 60).toString();
+								if (parseInt(offsetHours, 10) < 10) { offsetHours = "0" + offsetHours; }
+								if (parseInt(offsetMins, 10) < 10) { offsetMins = "0" + offsetMins; }
+								let createdTime = offsetSign + offsetHours + ":" + offsetMins;
+								// Font styling matches OneNoteSaveableFactory.createPostProcessessedHtml
+								let fontStyle = "font-size: 16px; font-family: Verdana;";
+								let presentationHtml = "<!DOCTYPE html><html><head>"
+									+ "<title>" + saveTitle.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</title>"
+									+ "<meta name=\"created\" content=\"" + createdTime + " \">"
+									+ "</head><body>";
+								// Order matches OneNoteSaveableFactory: annotation → citation → content
+								if (saveAnnotation) {
+									let escaped = saveAnnotation.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+									presentationHtml += "<div style=\"" + fontStyle + "\">&quot;" + escaped + "&quot;</div>";
+								}
+								if (saveUrl && saveMode !== "bookmark") {
+									presentationHtml += "<div style=\"" + fontStyle + "\">Clipped from: <a href=\"" + saveUrl + "\">" + saveUrl + "</a></div>";
+								}
+								presentationHtml += bodyOnml;
+								presentationHtml += "</body></html>";
+
+								// Build multipart body
+								let parts: (string | Blob)[] = [];
+								parts.push("--" + boundary + "\r\n");
+								parts.push("Content-Type: application/xhtml+xml\r\n");
+								parts.push("Content-Disposition: form-data; name=\"Presentation\"\r\n\r\n");
+								parts.push(presentationHtml);
+								for (let img of imageParts) {
+									parts.push("\r\n--" + boundary + "\r\n");
+									parts.push("Content-Type: " + img.type + "\r\n");
+									parts.push("Content-Disposition: form-data; name=\"" + img.name + "\"\r\n\r\n");
+									parts.push(img.blob);
+								}
+								parts.push("\r\n--" + boundary + "--\r\n");
+
+								let body = new Blob(parts);
+								let apiUrl = "https://www.onenote.com/api/v1.0/me/notes"
+									+ (saveSectionId ? "/sections/" + encodeURIComponent(saveSectionId) : "")
+									+ "/pages";
+
+								let correlationId = WebExtensionWorker.newGuid();
+								let requestDate = new Date().toISOString();
+
+								// Timeout handled renderer-side (service worker setTimeout unreliable)
+								fetch(apiUrl, {
+									method: "POST",
+									headers: {
+										"Authorization": "Bearer " + accessToken,
+										"Content-Type": "multipart/form-data; boundary=" + boundary,
+										"X-CorrelationId": correlationId,
+										"X-UserSessionId": sessionUsid
+									},
+									body: body
+								}).then((response) => {
+									let serverCorrelation = response.headers.get("X-CorrelationId") || correlationId;
+									let serverRequestId = response.headers.get("X-UserSessionId") || "";
+									if (response.ok) {
+										response.json().then((data) => {
+											let pageUrl = "";
+											try {
+												pageUrl = data && data.links && data.links.oneNoteWebUrl ? data.links.oneNoteWebUrl.href : "";
+											} catch (e) { /* ignore */ }
+											port.postMessage({ action: "saveResult", success: true, pageUrl: pageUrl });
+										}).catch(() => {
+											port.postMessage({ action: "saveResult", success: true, pageUrl: "" });
+										});
+									} else {
+										response.text().then((text) => {
+											let errorMsg = "";
+											try { errorMsg = JSON.parse(text).error.message || text.substring(0, 200); } catch (e) { errorMsg = text.substring(0, 200); }
+											let debugInfo = errorMsg
+												+ "\n\nDate: " + requestDate
+												+ "\nStatus: " + response.status
+												+ "\nX-CorrelationId: " + serverCorrelation
+												+ (serverRequestId ? "\nX-UserSessionId: " + serverRequestId : "");
+											port.postMessage({ action: "saveResult", success: false, error: debugInfo });
+										});
+									}
+								}).catch((err) => {
+									let debugInfo = (err.message || "Network error: Unknown")
+										+ "\nX-CorrelationId: " + correlationId
+										+ "\nDate: " + requestDate;
+									port.postMessage({ action: "saveResult", success: false, error: debugInfo });
+								});
+							};
+
+							if (saveMode === "fullpage") {
+								// Read JPEG from session storage
+								chrome.storage.session.get(["fullPageFinalImage"], (imgStored: any) => {
+									let dataUrl = imgStored && imgStored.fullPageFinalImage ? imgStored.fullPageFinalImage : "";
+									if (dataUrl) {
+										fetch(dataUrl).then((r) => r.blob()).then((blob) => {
+											let imgName = "fullPageImage";
+											let imgCssWidth = message.imageWidth || contentWidth;
+											let bodyOnml = "<p><img src=\"name:" + imgName + "\" width=\"" + imgCssWidth + "\" /></p>";
+											buildPage(bodyOnml, [{ name: imgName, blob: blob, type: "image/jpeg" }]);
+										});
+									} else {
+										port.postMessage({ action: "saveResult", success: false, error: "No screenshot data" });
+									}
+								});
+							} else if (saveMode === "region") {
+								// Read region images from separate session storage keys (avoids size limits)
+								chrome.storage.session.get(["regionImageCount"], (countStored: any) => {
+									let count = countStored && countStored.regionImageCount ? countStored.regionImageCount : 0;
+									if (count === 0) {
+										port.postMessage({ action: "saveResult", success: false, error: "No region data" });
+										return;
+									}
+									let keys: string[] = [];
+									for (let i = 0; i < count; i++) { keys.push("regionImage_" + i); }
+									chrome.storage.session.get(keys, (imgStored: any) => {
+										let images: string[] = [];
+										for (let i = 0; i < count; i++) {
+											if (imgStored["regionImage_" + i]) { images.push(imgStored["regionImage_" + i]); }
+										}
+										if (images.length === 0) {
+											port.postMessage({ action: "saveResult", success: false, error: "No region data" });
+											return;
+										}
+										Promise.all(images.map((dataUrl: string, idx: number) =>
+											fetch(dataUrl).then((r) => r.blob()).then((blob) => ({
+												name: "regionImage" + idx,
+												blob: blob,
+												type: dataUrl.indexOf("image/png") !== -1 ? "image/png" : "image/jpeg"
+											}))
+										)).then((imageParts) => {
+											let bodyOnml = imageParts.map((p) =>
+												"<p><img src=\"name:" + p.name + "\" /></p>"
+											).join("&nbsp;");
+											buildPage(bodyOnml, imageParts);
+										});
+									});
+								});
+							} else if (saveMode === "article") {
+								let articleHtml = message.contentHtml || "";
+								buildPage(articleHtml, []);
+							} else if (saveMode === "bookmark") {
+								let bookmarkHtml = message.contentHtml || "";
+								buildPage(bookmarkHtml, []);
+							} else {
+								port.postMessage({ action: "saveResult", success: false, error: "Unsupported mode" });
+							}
+						});
+				}
+
+				if (message.action === "startRegion") {
+					// Focus original tab, inject standalone overlay, listen for result
+					let regionTabId = this.tab.id as number;
+					let regionWindowId = 0;
+					WebExtension.browser.tabs.get(regionTabId, (t: any) => {
+						if (!t || !t.windowId) { return; }
+						regionWindowId = t.windowId;
+						WebExtension.browser.windows.update(regionWindowId, { focused: true }, () => {
+							if (WebExtension.browser.runtime.lastError) { /* ignore */ }
+							// Inject i18n strings before overlay script so it can read them
+							let regionStrings = message.regionStrings || {};
+							WebExtension.browser.scripting.executeScript({
+								target: { tabId: regionTabId },
+								func: function(s: any) { (window as any).__regionStrings = s; },
+								args: [regionStrings]
+							}, () => {
+								WebExtension.browser.scripting.executeScript({
+									target: { tabId: regionTabId },
+									files: ["regionOverlay.js"]
+								});
+							});
+						});
+					});
+
+					// Listen for overlay messages (regionSelected / regionCancelled)
+					// Messages are JSON strings (required by offscreen.ts message handler)
+					let regionListener = (rawMsg: any, sender: any) => {
+						if (!sender.tab || sender.tab.id !== regionTabId) { return; }
+						let msg: any;
+						try { msg = typeof rawMsg === "string" ? JSON.parse(rawMsg) : rawMsg; } catch (e) { return; }
+
+						if (msg.action === "regionSelected") {
+							WebExtension.browser.runtime.onMessage.removeListener(regionListener);
+							// Brief delay for overlay DOM removal, then capture
+							setTimeout(() => {
+								WebExtension.browser.tabs.captureVisibleTab(regionWindowId, { format: "jpeg", quality: 95 }, (dataUrl: string) => {
+									if (!dataUrl) {
+										port.postMessage({ action: "regionCancelled" });
+									} else {
+										// Send full image + coords via port (same pattern as drawCapture in fullpage)
+										port.postMessage({
+											action: "regionCaptured",
+											dataUrl: dataUrl,
+											x: msg.x, y: msg.y, width: msg.width, height: msg.height, dpr: msg.dpr
+										});
+									}
+									WebExtension.browser.windows.update(renderWindowId, { focused: true }, () => {
+										if (WebExtension.browser.runtime.lastError) { /* ignore */ }
+									});
+								});
+							}, 150);
+						}
+
+						if (msg.action === "regionCancelled") {
+							WebExtension.browser.runtime.onMessage.removeListener(regionListener);
+							port.postMessage({ action: "regionCancelled" });
+							WebExtension.browser.windows.update(renderWindowId, { focused: true }, () => {
+								if (WebExtension.browser.runtime.lastError) { /* ignore */ }
+							});
+						}
+					};
+					WebExtension.browser.runtime.onMessage.addListener(regionListener);
+				}
+
+				if (message.action === "signOut") {
+					let authType: AuthType = (AuthType as any)[message.authType];
+					if (authType !== undefined) {
+						this.doSignOutAction(authType);
+					}
+					// Clear user data from storage
+					this.clipperData.removeKey("userInformation");
+					this.clipperData.removeKey("curSection");
+					this.clipperData.removeKey("notebooks");
+					this.clipperData.removeKey("isUserLoggedIn");
+
+					// Tell renderer to show sign-in panel (keep window open)
+					port.postMessage({ action: "signOutComplete" });
+				}
+
+				if (message.action === "openFeedback") {
+					let ci = this.clientInfo.get();
+					let usid = sessionUsid;
+					let feedbackUrl = "https://feedbackportal.microsoft.com/feedback/post/c06dcc30-2e1c-ec11-b6e7-0022481f8472";
+					feedbackUrl += "?LogCategory=OneNoteClipperUsage";
+					if (message.pageUrl) { feedbackUrl += "&originalUrl=" + encodeURIComponent(message.pageUrl); }
+					if (ci.clipperId) { feedbackUrl += "&clipperId=" + encodeURIComponent(ci.clipperId); }
+					if (usid) { feedbackUrl += "&usid=" + encodeURIComponent(usid); }
+					if (ci.clipperVersion) { feedbackUrl += "&version=" + encodeURIComponent(ci.clipperVersion); }
+					feedbackUrl += "&type=" + encodeURIComponent(ClientType[ci.clipperType]);
+					WebExtension.browser.windows.create({
+						url: feedbackUrl,
+						type: "popup",
+						width: 1000,
+						height: 700,
+						focused: true
+					});
+				}
+			});
+		};
+
+		// Listen for the renderer page to connect via port
+		let onConnect = (port: chrome.runtime.Port) => {
+			if (port.name !== "renderer") {
+				return;
+			}
+			WebExtension.browser.runtime.onConnect.removeListener(onConnect);
+
+			if (windowReady) {
+				setupPort(port);
+			} else {
+				// Window.create callback hasn't fired yet, defer
+				pendingPort = port;
+			}
+		};
+
+		WebExtension.browser.runtime.onConnect.addListener(onConnect);
+
+		// Create the renderer window. Must be focused so Chrome paints it
+		// for captureVisibleTab.
+		WebExtension.browser.windows.create({
+			url: rendererUrl,
+			type: "popup",
+			width: renderWidth,
+			height: renderHeight,
+			left: renderLeft,
+			top: renderTop,
+			focused: true
+		}, (renderWindow: chrome.windows.Window) => {
+			if (!renderWindow) {
+				WebExtension.browser.runtime.onConnect.removeListener(onConnect);
+				return;
+			}
+			renderWindowId = renderWindow.id;
+			this.activeRendererWindowId = renderWindowId;
+			windowReady = true;
+
+			// Close renderer if the source tab navigates away
+			let onTabUpdated = (tabId: number, changeInfo: chrome.tabs.TabChangeInfo) => {
+				if (tabId === this.tab.id && changeInfo.url) {
+					WebExtension.browser.tabs.onUpdated.removeListener(onTabUpdated);
+					this.activeRendererCleanup();
+				}
+			};
+			WebExtension.browser.tabs.onUpdated.addListener(onTabUpdated);
+
+			// If port connected before window.create callback, start now
+			if (pendingPort) {
+				setupPort(pendingPort);
+			}
+		});
+		}); // end getCurrent
+	}
+
 	private launchWebExtensionPopupAndWaitForClose(url: string, autoCloseDestinationUrl: string): Promise<boolean> {
 		return new Promise<boolean>((resolve, reject) => {
 			let popupWidth = 1000;
diff --git a/src/scripts/pageInfo.ts b/src/scripts/pageInfo.ts
index 6e361cdb..bd0681ba 100644
--- a/src/scripts/pageInfo.ts
+++ b/src/scripts/pageInfo.ts
@@ -8,4 +8,5 @@ export interface PageInfo {
 	contentTitle: string;
 	contentType: OneNoteApi.ContentType;
 	rawUrl: string;
+	stylesheetCache?: { [url: string]: { cssText: string; media: string } };
 }
diff --git a/src/scripts/renderer.ts b/src/scripts/renderer.ts
new file mode 100644
index 00000000..b9dc54d8
--- /dev/null
+++ b/src/scripts/renderer.ts
@@ -0,0 +1,2045 @@
+import {Funnel} from "./logging/submodules/funnel";
+import {LogMethods} from "./logging/submodules/logMethods";
+import {Session} from "./logging/submodules/session";
+
+// Renderer page script - connects to service worker via port
+// and handles scroll/capture commands. Reads HTML directly from
+// chrome.storage.session to avoid large data through message channels.
+//
+// Content is rendered inside an iframe for CSS isolation — the renderer's
+// own styles (scrollbar hiding, overflow) don't interfere with the page's CSS.
+let port = chrome.runtime.connect({ name: "renderer" });
+let portDisconnected = false;
+port.onDisconnect.addListener(() => { portDisconnected = true; });
+function safeSend(msg: any) {
+	if (!portDisconnected) {
+		try { port.postMessage(msg); } catch (e) { portDisconnected = true; }
+	}
+}
+// Keep service worker alive while renderer is open (MV3 SW suspends after ~30s idle)
+setInterval(function() { safeSend({ action: "keepalive" }); }, 25000);
+// Auto-close after 5 minutes of inactivity (no mouse, keyboard, or focus)
+let inactivityTimeoutMs = 5 * 60 * 1000;
+let inactivityTimer = setTimeout(function() { window.close(); }, inactivityTimeoutMs);
+function resetInactivityTimer() {
+	clearTimeout(inactivityTimer);
+	inactivityTimer = setTimeout(function() { window.close(); }, inactivityTimeoutMs);
+}
+document.addEventListener("mousemove", resetInactivityTimer);
+document.addEventListener("mousedown", resetInactivityTimer);
+document.addEventListener("keydown", resetInactivityTimer);
+document.addEventListener("scroll", resetInactivityTimer, true);
+window.addEventListener("focus", resetInactivityTimer);
+
+let iframe = document.getElementById("content-frame") as HTMLIFrameElement;
+let previewFrame = document.getElementById("preview-frame") as HTMLIFrameElement;
+let previewContainer = document.getElementById("preview-container") as HTMLDivElement;
+
+// Sidebar elements
+let statusText = document.getElementById("status-text") as HTMLDivElement;
+let progressInfo = document.getElementById("progress-info") as HTMLDivElement;
+let progressFill = document.getElementById("progress-bar-fill") as HTMLDivElement;
+let cancelBtn = document.getElementById("cancel-btn") as HTMLButtonElement;
+let saveBtn = document.getElementById("save-btn") as HTMLButtonElement;
+
+// Mode panel elements
+let capturePanel = document.getElementById("capture-panel") as HTMLDivElement;
+
+// Metadata elements
+let titleField = document.getElementById("title-field") as HTMLTextAreaElement;
+let noteField = document.getElementById("note-field") as HTMLTextAreaElement;
+let sourceUrl = document.getElementById("source-url") as HTMLDivElement;
+let sectionPicker = document.getElementById("section-picker") as HTMLDivElement;
+let sectionSelected = document.getElementById("section-selected") as HTMLDivElement;
+let sectionListContainer = document.getElementById("section-list-container") as HTMLDivElement;
+let sectionList = document.getElementById("section-list") as HTMLUListElement;
+let selectedSectionId = "";
+let sectionPickerOpen = false;
+
+// Hidden canvas for incremental stitching — display:none keeps it out of captureVisibleTab
+let stitchCanvas = document.createElement("canvas");
+stitchCanvas.style.display = "none";
+document.body.appendChild(stitchCanvas);
+let stitchCtx: CanvasRenderingContext2D;
+let stitchYOffset = 0;
+let stitchDpr = 0;
+let stitchViewportHeight = 0;
+let stitchContentHeight = 0;
+let sidebarCssWidth = 322;
+let contentPixelWidth = 0; // set on first capture, excludes sidebar
+
+let sidebarTitle = document.getElementById("sidebar-title") as HTMLSpanElement;
+let userInfoDiv = document.getElementById("user-info") as HTMLDivElement;
+let userEmailSpan = document.getElementById("user-email") as HTMLSpanElement;
+let feedbackLink = document.getElementById("feedback-link") as HTMLAnchorElement;
+let signoutLink = document.getElementById("signout-link") as HTMLAnchorElement;
+
+// Mode state
+let currentMode = "fullpage";
+let fullPageComplete = false;
+let fullPageDataUrl = ""; // Cached full-page screenshot data URL for mode switching
+let saveDone = false;
+let articleLoaded = false;
+let cachedArticleHtml = ""; // Readability result, extracted lazily from content-frame DOM
+let cachedBookmarkHtml = ""; // Bookmark card HTML, extracted lazily from content-frame DOM
+let bookmarkLoaded = false;
+let contentDocReady = false; // true once content-frame has loaded HTML
+
+// Article header controls
+let articleHeader = document.getElementById("article-header") as HTMLDivElement;
+let highlightBtn = document.getElementById("highlight-btn") as HTMLButtonElement;
+let sansSerifBtn = document.getElementById("sans-serif-btn") as HTMLButtonElement;
+let serifBtn = document.getElementById("serif-btn") as HTMLButtonElement;
+let fontDecreaseBtn = document.getElementById("font-decrease-btn") as HTMLButtonElement;
+let fontIncreaseBtn = document.getElementById("font-increase-btn") as HTMLButtonElement;
+let articleSerif = false;
+let articleFontSize = 16;
+let highlighterEnabled = false;
+let textHighlighterInstance: any = undefined;
+let articleWorkingHtml = ""; // Preserves highlights/edits across mode switches
+let saveTimeoutId: any = 0; // Client-side save timeout (service worker setTimeout unreliable)
+
+// --- Localization ---
+// Read localized strings directly from localStorage (shared extension origin, populated by extensionBase)
+// Falls back to bundled English defaults if not available
+let locStrings: any = {};
+try {
+	let raw = localStorage.getItem("locStrings");
+	if (raw) { locStrings = JSON.parse(raw); }
+} catch (e) { /* ignore */ }
+
+function loc(key: string, fallback: string): string {
+	return (locStrings && locStrings[key]) || fallback;
+}
+
+// Set HTML lang attribute from stored locale (extensionBase stores navigator.language in localStorage.locale)
+try {
+	let storedLocale = localStorage.getItem("displayLocaleOverride") || localStorage.getItem("locale");
+	if (storedLocale) {
+		document.documentElement.lang = storedLocale.replace(/_/g, "-");
+	}
+} catch (e) { /* keep default "en" */ }
+
+// Screen reader announcements via aria-live region
+function announceToScreenReader(text: string) {
+	let el = document.getElementById("aria-status");
+	if (el) { el.textContent = ""; setTimeout(function() { if (el) { el.textContent = text; } }, 100); }
+}
+
+let strings = {
+	clipperTitle: loc("WebClipper.Label.OneNoteWebClipper", "OneNote Web Clipper"),
+	capturing: "", // no heading — progressInfo shows viewport progress directly
+	cancel: loc("WebClipper.Action.Cancel", "Cancel"),
+	close: loc("WebClipper.Action.CloseTheClipper", "Close"),
+	saveToOneNote: loc("WebClipper.Action.Clip", "Clip"),
+	viewInOneNote: loc("WebClipper.Action.ViewInOneNote", "View in OneNote"),
+	viewportProgress: loc("WebClipper.ClipType.ScreenShot.IncrementalProgress", "Capturing {0} of {1}..."),
+	saving: loc("WebClipper.ClipType.ScreenShot.Saving", "Saving..."),
+	modeFullPage: loc("WebClipper.ClipType.ScreenShot.Button", "Full Page"),
+	modeArticle: loc("WebClipper.ClipType.Article.Button", "Article"),
+	modeBookmark: loc("WebClipper.ClipType.Bookmark.Button", "Bookmark"),
+	modeRegion: loc("WebClipper.ClipType.Region.Button", "Region"),
+	titlePlaceholder: loc("WebClipper.Label.PageTitlePlaceholder", "Add a page title..."),
+	notePlaceholder: loc("WebClipper.Label.AnnotationPlaceholder", "Add a note..."),
+	sourceLabel: loc("WebClipper.Label.Source", "Source"),
+	signOut: loc("WebClipper.Action.SignOut", "Sign out"),
+	feedback: loc("WebClipper.Action.Feedback", "Feedback"),
+	toggleHighlighter: loc("WebClipper.Accessibility.ScreenReader.ToggleHighlighterModeForArticle", "Toggle highlighter"),
+	changeFontSansSerif: loc("WebClipper.Accessibility.ScreenReader.ChangeFontToSansSerif", "Change font to Sans-Serif"),
+	changeFontSerif: loc("WebClipper.Accessibility.ScreenReader.ChangeFontToSerif", "Change font to Serif"),
+	decreaseFontSize: loc("WebClipper.Accessibility.ScreenReader.DecreaseFontSize", "Decrease font size"),
+	increaseFontSize: loc("WebClipper.Accessibility.ScreenReader.IncreaseFontSize", "Increase font size"),
+	sansSerifLabel: loc("WebClipper.Preview.Header.SansSerifButtonLabel", "Sans-serif"),
+	serifLabel: loc("WebClipper.Preview.Header.SerifButtonLabel", "Serif"),
+	fontFamilySerif: loc("WebClipper.FontFamily.Preview.SerifDefault", "Georgia"),
+	fontFamilySansSerif: loc("WebClipper.FontFamily.Preview.SansSerifDefault", "Verdana")
+};
+
+// --- Telemetry helpers ---
+// Send telemetry via port to worker's logger using the same LogDataPackage format
+function logFunnel(label: Funnel.Label) {
+	safeSend({ action: "telemetry", data: { methodName: LogMethods.LogFunnel, methodArgs: [label] } });
+}
+function logSessionEnd(trigger: Session.EndTrigger) {
+	safeSend({ action: "telemetry", data: { methodName: LogMethods.LogSessionEnd, methodArgs: [trigger] } });
+}
+function logSessionStart() {
+	safeSend({ action: "telemetry", data: { methodName: LogMethods.LogSessionStart, methodArgs: [] } });
+}
+
+// Cancel button closes the window (port disconnect triggers cleanup in worker)
+cancelBtn.addEventListener("click", () => { window.close(); });
+
+// Apply localized strings to UI elements
+sidebarTitle.textContent = strings.clipperTitle;
+cancelBtn.textContent = strings.close;
+let modeMap: any = { fullpage: strings.modeFullPage, article: strings.modeArticle, bookmark: strings.modeBookmark, region: strings.modeRegion };
+document.querySelectorAll(".mode-btn").forEach((btn) => {
+	let mode = btn.getAttribute("data-mode");
+	if (mode && modeMap[mode]) {
+		let span = btn.querySelector("span");
+		if (span) { span.textContent = modeMap[mode]; }
+	}
+});
+titleField.placeholder = strings.titlePlaceholder;
+noteField.placeholder = strings.notePlaceholder;
+// Mode button tooltips (matches old modeButton.tsx tooltip pattern)
+let tooltipMap: any = {
+	fullpage: loc("WebClipper.ClipType.ScreenShot.Button.Tooltip", "Take a screenshot of the whole page, just like you see it."),
+	article: loc("WebClipper.ClipType.Button.Tooltip", "Clip just the {0} in an easy-to-read format.").replace("{0}", strings.modeArticle.toLowerCase()),
+	bookmark: loc("WebClipper.ClipType.Bookmark.Button.Tooltip", "Clip just the title, thumbnail, synopsis, and link."),
+	region: loc("WebClipper.ClipType.Region.Button.Tooltip", "Take a screenshot of the part of the page you'll select.")
+};
+document.querySelectorAll(".mode-btn").forEach((btn) => {
+	let mode = btn.getAttribute("data-mode");
+	if (mode && tooltipMap[mode]) { (btn as HTMLElement).title = tooltipMap[mode]; }
+});
+let sourceLabelEl = document.getElementById("source-label");
+if (sourceLabelEl) { sourceLabelEl.textContent = strings.sourceLabel; }
+// Field labels
+let titleLabelEl = document.getElementById("title-label");
+if (titleLabelEl) { titleLabelEl.textContent = loc("WebClipper.Label.PageTitle", "Title"); }
+let noteLabelEl = document.getElementById("note-label");
+if (noteLabelEl) { noteLabelEl.textContent = loc("WebClipper.Label.Annotation", "Note"); }
+let sectionLabelEl = document.getElementById("section-label");
+if (sectionLabelEl) { sectionLabelEl.textContent = loc("WebClipper.Label.ClipLocation", "Save to"); }
+// Sign-in panel
+let signinDesc = document.getElementById("signin-description");
+if (signinDesc) { signinDesc.textContent = loc("WebClipper.Label.SignInDescription", "Sign in to clip this page to OneNote"); }
+let signinProgressEl = document.getElementById("signin-progress");
+if (signinProgressEl) { signinProgressEl.textContent = loc("WebClipper.Label.SigningIn", "Signing in..."); }
+// Article header i18n
+highlightBtn.title = strings.toggleHighlighter;
+highlightBtn.setAttribute("aria-label", strings.toggleHighlighter);
+sansSerifBtn.textContent = strings.sansSerifLabel;
+sansSerifBtn.title = strings.changeFontSansSerif;
+sansSerifBtn.setAttribute("aria-label", strings.changeFontSansSerif);
+serifBtn.textContent = strings.serifLabel;
+serifBtn.title = strings.changeFontSerif;
+serifBtn.setAttribute("aria-label", strings.changeFontSerif);
+fontDecreaseBtn.title = strings.decreaseFontSize;
+fontDecreaseBtn.setAttribute("aria-label", strings.decreaseFontSize);
+fontIncreaseBtn.title = strings.increaseFontSize;
+fontIncreaseBtn.setAttribute("aria-label", strings.increaseFontSize);
+// Parse default font size from i18n
+try {
+	let defaultSize = parseInt(loc("WebClipper.FontSize.Preview.SansSerifDefault", "16px"), 10);
+	if (defaultSize > 0) { articleFontSize = defaultSize; }
+} catch (e) { /* keep default 16 */ }
+
+// Load page title and URL from session storage (page-specific, still needs session)
+chrome.storage.session.get(["fullPageStatusText", "fullPageTitle", "fullPageUrl"], (stored: any) => {
+	document.title = strings.clipperTitle;
+	if (stored && stored.fullPageTitle) { titleField.value = stored.fullPageTitle; }
+	if (stored && stored.fullPageUrl) { sourceUrl.textContent = stored.fullPageUrl; sourceUrl.title = stored.fullPageUrl; }
+});
+
+// --- Section picker (custom dropdown with scrollable list) ---
+function selectSection(id: string, label: string) {
+	selectedSectionId = id;
+	sectionSelected.textContent = label;
+	sectionSelected.title = label;
+	// Persist selection
+	if (id) {
+		let curSection = { path: label, section: { id: id, name: label } };
+		try { localStorage.setItem("curSection", JSON.stringify(curSection)); } catch (e) { /* ignore */ }
+	}
+	closeSectionPicker();
+	// Clear success banner so user can re-clip to the new section
+	// (but don't touch button state — that's managed by capture/save flow)
+	let banner = document.getElementById("success-banner");
+	if (banner) { banner.style.display = "none"; }
+	saveDone = false;
+}
+
+function toggleSectionPicker() {
+	if (sectionPickerOpen) {
+		closeSectionPicker();
+	} else {
+		openSectionPicker();
+	}
+}
+
+function openSectionPicker() {
+	sectionListContainer.style.display = "block";
+	sectionPickerOpen = true;
+	sectionSelected.setAttribute("aria-expanded", "true");
+	// Scroll selected item into view and focus it
+	let sel = sectionList.querySelector(".section-item-selected") as HTMLElement;
+	if (sel) { sel.scrollIntoView({ block: "nearest" }); sel.focus(); }
+}
+
+function closeSectionPicker() {
+	sectionListContainer.style.display = "none";
+	sectionPickerOpen = false;
+	sectionSelected.setAttribute("aria-expanded", "false");
+}
+
+sectionSelected.addEventListener("click", toggleSectionPicker);
+sectionSelected.addEventListener("keydown", (e) => {
+	if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleSectionPicker(); } else if (e.key === "Escape" && sectionPickerOpen) { e.preventDefault(); closeSectionPicker(); } else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !sectionPickerOpen) { e.preventDefault(); openSectionPicker(); }
+});
+// Close dropdown when clicking outside
+document.addEventListener("click", (e) => {
+	if (sectionPickerOpen && !sectionPicker.contains(e.target as Node)) {
+		closeSectionPicker();
+	}
+});
+
+function populateSectionDropdown() {
+	sectionList.innerHTML = "";
+	try {
+		let notebooksJson = localStorage.getItem("notebooks");
+		let curSectionJson = localStorage.getItem("curSection");
+		if (!notebooksJson) {
+			sectionSelected.textContent = loc("WebClipper.SectionPicker.NoNotebooksFound", "No notebooks available");
+			selectedSectionId = "";
+			return;
+		}
+		let notebooks = JSON.parse(notebooksJson);
+		let curSectionId = "";
+		if (curSectionJson) {
+			try {
+				let cur = JSON.parse(curSectionJson);
+				curSectionId = cur.section ? cur.section.id : "";
+			} catch (e) { /* ignore */ }
+		}
+		flattenSections(notebooks, curSectionId);
+		// If no section was selected, select the first one
+		if (!selectedSectionId) {
+			let first = sectionList.querySelector("li") as HTMLElement;
+			if (first) {
+				selectSection(first.getAttribute("data-id") || "", first.textContent || "");
+			}
+		}
+	} catch (e) {
+		sectionSelected.textContent = loc("WebClipper.SectionPicker.NotebookLoadFailureMessage", "Error loading notebooks");
+		selectedSectionId = "";
+	}
+}
+
+function flattenSections(notebooks: any[], preselectedId: string) {
+	for (let nb of notebooks) {
+		addNotebookHeading(nb.name);
+		if (nb.sections) {
+			for (let sec of nb.sections) {
+				addSectionItem(sec.id, sec.name, nb.name + " > " + sec.name, preselectedId, 1);
+			}
+		}
+		if (nb.sectionGroups) {
+			flattenSectionGroups(nb.sectionGroups, nb.name, preselectedId, 1);
+		}
+	}
+}
+
+function flattenSectionGroups(groups: any[], parentPath: string, preselectedId: string, depth: number) {
+	for (let group of groups) {
+		let path = parentPath + " > " + group.name;
+		addGroupHeading(group.name, depth);
+		if (group.sections) {
+			for (let sec of group.sections) {
+				addSectionItem(sec.id, sec.name, path + " > " + sec.name, preselectedId, depth + 1);
+			}
+		}
+		if (group.sectionGroups) {
+			flattenSectionGroups(group.sectionGroups, path, preselectedId, depth + 1);
+		}
+	}
+}
+
+function addNotebookHeading(name: string) {
+	let li = document.createElement("li");
+	li.className = "section-heading notebook-heading";
+	let img = document.createElement("img");
+	img.src = "images/notebook.png";
+	img.alt = "";
+	li.appendChild(img);
+	let span = document.createElement("span");
+	span.textContent = name;
+	li.appendChild(span);
+	sectionList.appendChild(li);
+}
+
+function addGroupHeading(name: string, depth: number) {
+	let li = document.createElement("li");
+	li.className = "section-heading group-heading";
+	li.style.paddingLeft = (12 + depth * 16) + "px";
+	let img = document.createElement("img");
+	img.src = "images/section_group.png";
+	img.alt = "";
+	li.appendChild(img);
+	let span = document.createElement("span");
+	span.textContent = name;
+	li.appendChild(span);
+	sectionList.appendChild(li);
+}
+
+function addSectionItem(id: string, displayName: string, fullPath: string, preselectedId: string, depth: number) {
+	let li = document.createElement("li");
+	li.className = "section-item";
+	li.setAttribute("data-id", id);
+	li.setAttribute("role", "option");
+	li.setAttribute("tabindex", "-1");
+	li.style.paddingLeft = (12 + depth * 16) + "px";
+	let img = document.createElement("img");
+	img.src = "images/section.png";
+	img.alt = "";
+	li.appendChild(img);
+	let span = document.createElement("span");
+	span.textContent = displayName;
+	li.appendChild(span);
+	li.title = fullPath;
+	if (id === preselectedId) {
+		li.classList.add("section-item-selected");
+		li.setAttribute("aria-selected", "true");
+		selectedSectionId = id;
+		sectionSelected.textContent = fullPath;
+		sectionSelected.title = fullPath;
+	} else {
+		li.setAttribute("aria-selected", "false");
+	}
+	li.addEventListener("click", () => {
+		let prev = sectionList.querySelector(".section-item-selected");
+		if (prev) { prev.classList.remove("section-item-selected"); prev.setAttribute("aria-selected", "false"); }
+		li.classList.add("section-item-selected");
+		li.setAttribute("aria-selected", "true");
+		selectSection(id, fullPath);
+	});
+	// Keyboard navigation — skip non-clickable headings
+	li.addEventListener("keydown", (e) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			let next = li.nextElementSibling as HTMLElement;
+			while (next && next.classList.contains("section-heading")) { next = next.nextElementSibling as HTMLElement; }
+			if (next) { next.focus(); }
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			let prev = li.previousElementSibling as HTMLElement;
+			while (prev && prev.classList.contains("section-heading")) { prev = prev.previousElementSibling as HTMLElement; }
+			if (prev) { prev.focus(); }
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			li.click();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			closeSectionPicker();
+			sectionSelected.focus();
+		}
+	});
+	sectionList.appendChild(li);
+}
+
+populateSectionDropdown();
+
+// --- User info + sign-out ---
+let userAuthType = "";
+try {
+	let userInfoRaw = localStorage.getItem("userInformation");
+	if (userInfoRaw) {
+		let userInfo = JSON.parse(userInfoRaw);
+		if (userInfo && userInfo.data) {
+			let email = userInfo.data.emailAddress || "";
+			let name = userInfo.data.fullName || "";
+			userAuthType = userInfo.data.authType || "";
+			userEmailSpan.textContent = email || name || "";
+			userEmailSpan.title = email || "";
+		}
+	}
+	// Hide feedback for MSA users (matches old sidebar behavior)
+	if (userAuthType === "Msa") {
+		feedbackLink.style.display = "none";
+	}
+} catch (e) {
+	userInfoDiv.style.display = "none";
+}
+signoutLink.textContent = strings.signOut;
+let feedbackLabel = document.getElementById("feedback-label");
+if (feedbackLabel) { feedbackLabel.textContent = strings.feedback; }
+signoutLink.addEventListener("click", (e) => {
+	e.preventDefault();
+	logFunnel(Funnel.Label.SignOut);
+	logSessionEnd(Session.EndTrigger.SignOut);
+	logSessionStart();
+	safeSend({ action: "signOut", authType: userAuthType });
+});
+
+// --- Feedback link ---
+feedbackLink.addEventListener("click", (e) => {
+	e.preventDefault();
+	safeSend({ action: "openFeedback", pageUrl: sourceUrl.textContent || "" });
+});
+
+// --- Sign-in state detection ---
+let isSignedIn = false;
+try {
+	let uiRaw = localStorage.getItem("userInformation");
+	if (uiRaw) {
+		let ui = JSON.parse(uiRaw);
+		isSignedIn = !!(ui && ui.data && ui.data.accessToken);
+	}
+} catch (e) { /* not signed in */ }
+
+let signinOverlay = document.getElementById("signin-overlay") as HTMLDivElement;
+let sidebarBody = document.getElementById("sidebar-body") as HTMLDivElement;
+let signinError = document.getElementById("signin-error") as HTMLDivElement;
+let signinProgress = document.getElementById("signin-progress") as HTMLDivElement;
+let signinMsaBtn = document.getElementById("signin-msa-btn") as HTMLButtonElement;
+let signinOrgIdBtn = document.getElementById("signin-orgid-btn") as HTMLButtonElement;
+signinMsaBtn.textContent = loc("WebClipper.Action.SigninMsa", "Sign in with a Microsoft account");
+signinOrgIdBtn.textContent = loc("WebClipper.Action.SigninOrgId", "Sign in with a work or school account");
+
+function showSignInPanel() {
+	signinOverlay.style.display = "flex";
+	// Focus first sign-in button for keyboard/screen reader users
+	setTimeout(function() { signinMsaBtn.focus(); }, 100);
+}
+
+function hideSignInPanel() {
+	signinOverlay.style.display = "none";
+	// Move focus to first mode button
+	let firstModeBtn = document.querySelector(".mode-btn") as HTMLElement;
+	if (firstModeBtn) { setTimeout(function() { firstModeBtn.focus(); }, 100); }
+}
+
+function showSignInProgress() {
+	signinMsaBtn.disabled = true;
+	signinOrgIdBtn.disabled = true;
+	signinProgress.style.display = "block";
+	signinError.style.display = "none";
+}
+
+function showSignInError(msg: string) {
+	signinMsaBtn.disabled = false;
+	signinOrgIdBtn.disabled = false;
+	signinProgress.style.display = "none";
+	signinError.textContent = msg;
+	signinError.style.display = "block";
+}
+
+// Log renderer invocation
+logFunnel(Funnel.Label.Invoke);
+if (!isSignedIn) {
+	showSignInPanel();
+} else {
+	logFunnel(Funnel.Label.AuthAlreadySignedIn);
+}
+
+// Sign-in button handlers
+signinMsaBtn.addEventListener("click", () => {
+	signingIn = true;
+	logFunnel(Funnel.Label.AuthAttempted);
+	showSignInProgress();
+	safeSend({ action: "signIn", authType: "Msa" });
+});
+signinOrgIdBtn.addEventListener("click", () => {
+	signingIn = true;
+	logFunnel(Funnel.Label.AuthAttempted);
+	showSignInProgress();
+	safeSend({ action: "signIn", authType: "OrgId" });
+});
+
+// --- Auto-fetch fresh notebooks (runs in background during capture) ---
+async function fetchFreshNotebooks() {
+	try {
+		let userInfoRaw = localStorage.getItem("userInformation");
+		if (!userInfoRaw) { return; }
+		let userInfo = JSON.parse(userInfoRaw);
+		let accessToken = userInfo && userInfo.data ? userInfo.data.accessToken : "";
+		if (!accessToken) { return; }
+		// Don't skip on token expiry — try the fetch anyway. The API will return 401 if
+		// truly expired, and we silently keep cached data. Skipping here caused stale
+		// notebook lists (newly created sections wouldn't appear).
+
+		let apiUrl = "https://www.onenote.com/api/v1.0/me/notes/notebooks"
+			+ "?$expand=sections,sectionGroups($expand=sections,sectionGroups)";
+		let response = await fetch(apiUrl, {
+			headers: { "Authorization": "Bearer " + accessToken }
+		});
+		if (!response.ok) { return; }
+
+		let data = await response.json();
+		let freshNotebooks = data.value || [];
+
+		// Compare with cached — only update if different
+		let cachedJson = localStorage.getItem("notebooks") || "";
+		let freshJson = JSON.stringify(freshNotebooks);
+		if (freshJson === cachedJson) { return; }
+
+		// Store fresh notebooks and repopulate dropdown
+		localStorage.setItem("notebooks", freshJson);
+		let previousSectionId = selectedSectionId;
+		sectionList.innerHTML = "";
+		selectedSectionId = "";
+		flattenSections(freshNotebooks, previousSectionId);
+
+		// If previously selected section no longer exists, select the first one
+		if (!selectedSectionId) {
+			let first = sectionList.querySelector("li") as HTMLElement;
+			if (first) {
+				selectSection(first.getAttribute("data-id") || "", first.textContent || "");
+			}
+		}
+	} catch (e) {
+		// Silently keep cached data
+	}
+}
+fetchFreshNotebooks();
+
+// Lock all interactive controls during initial capture — prevents race conditions
+// (e.g., clicking sign-out mid-capture corrupts state)
+document.querySelectorAll(".mode-btn").forEach((btn) => {
+	if (btn.getAttribute("data-mode") !== "fullpage") {
+		(btn as HTMLButtonElement).disabled = true;
+		btn.classList.add("disabled");
+	}
+});
+saveBtn.disabled = true;
+disableSignout();
+// Show initial capture progress (bar hidden until first drawCapture with viewport counts)
+capturePanel.style.display = "flex";
+statusText.textContent = strings.capturing;
+announceToScreenReader(strings.capturing);
+(document.getElementById("progress-bar-track") as HTMLElement).style.display = "none";
+// During capture, Cancel is the only actionable control — focus it
+if (isSignedIn) { setTimeout(function() { cancelBtn.focus(); }, 100); }
+
+// Section selection persistence is handled by selectSection() in the custom dropdown
+
+// --- Accessible signout disable/enable ---
+function disableSignout() {
+	signoutLink.style.pointerEvents = "none";
+	signoutLink.style.opacity = "0.4";
+	signoutLink.setAttribute("aria-disabled", "true");
+	signoutLink.setAttribute("tabindex", "-1");
+}
+function enableSignout() {
+	signoutLink.style.pointerEvents = "";
+	signoutLink.style.opacity = "";
+	signoutLink.removeAttribute("aria-disabled");
+	signoutLink.removeAttribute("tabindex");
+}
+
+// --- UI lock during clip/save ---
+
+function lockSidebar() {
+	// Disable all interactive elements during save round-trip
+	document.querySelectorAll(".mode-btn").forEach((b) => { (b as HTMLButtonElement).disabled = true; });
+	titleField.disabled = true;
+	noteField.disabled = true;
+	sectionPicker.classList.add("disabled");
+	cancelBtn.disabled = true;
+	disableSignout();
+}
+
+function unlockSidebar() {
+	document.querySelectorAll(".mode-btn").forEach((b) => {
+		if (fullPageComplete || b.getAttribute("data-mode") === "fullpage") {
+			(b as HTMLButtonElement).disabled = false;
+		}
+	});
+	titleField.disabled = false;
+	noteField.disabled = false;
+	sectionPicker.classList.remove("disabled");
+	cancelBtn.disabled = false;
+	enableSignout();
+}
+
+// --- Mode switching ---
+
+function resetSaveState() {
+	saveDone = false;
+	saveBtn.onclick = undefined;
+	saveBtn.textContent = strings.saveToOneNote;
+	saveBtn.disabled = false;
+	cancelBtn.textContent = strings.close;
+	cancelBtn.disabled = false;
+	// Reset capture panel
+	capturePanel.style.display = "none";
+	statusText.textContent = "";
+	statusText.innerHTML = "";
+	(document.getElementById("progress-bar-track") as HTMLElement).style.display = "";
+	progressInfo.textContent = "";
+	// Hide success banner
+	let successBanner = document.getElementById("success-banner");
+	if (successBanner) { successBanner.style.display = "none"; }
+}
+
+// Save article working state (highlights, edits) before switching away
+function saveArticleWorkingState() {
+	if (currentMode === "article") {
+		let pDoc = previewFrame.contentDocument;
+		if (pDoc && pDoc.body) { articleWorkingHtml = pDoc.body.innerHTML; }
+	}
+}
+
+function switchToFullPage() {
+	saveArticleWorkingState();
+	resetSaveState();
+	currentMode = "fullpage";
+	previewFrame.style.display = "none";
+	articleHeader.style.display = "none";
+	if (fullPageComplete) {
+		iframe.style.display = "none";
+		// Restore full-page screenshot from cached data URL
+		previewContainer.innerHTML = "";
+		if (fullPageDataUrl) {
+			let img = document.createElement("img");
+			img.src = fullPageDataUrl;
+			previewContainer.appendChild(img);
+		}
+		previewContainer.style.display = "block";
+		capturePanel.style.display = "none";
+	} else {
+		iframe.style.display = "block";
+		previewContainer.style.display = "none";
+		capturePanel.style.display = "flex";
+		statusText.textContent = strings.capturing;
+		saveBtn.disabled = true;
+	}
+}
+
+function switchToArticle() {
+	resetSaveState();
+	currentMode = "article";
+	// Hide full-page content and preview
+	iframe.style.display = "none";
+	previewContainer.style.display = "none";
+	capturePanel.style.display = "none";
+	// Show preview frame and article header
+	previewFrame.style.display = "block";
+	articleHeader.style.display = "flex";
+
+	if (!articleLoaded) {
+		loadArticleContent();
+	} else {
+		// Re-render — use working HTML (preserves highlights) or clean cached HTML
+		renderArticleHtml(articleWorkingHtml || cachedArticleHtml);
+		saveBtn.disabled = false;
+		saveBtn.textContent = strings.saveToOneNote;
+	}
+}
+
+function loadArticleContent() {
+	if (cachedArticleHtml) {
+		// Already extracted — render immediately
+		renderArticleHtml(cachedArticleHtml);
+		articleLoaded = true;
+		return;
+	}
+
+	if (contentDocReady) {
+		// Content-frame DOM is ready — run Readability on it
+		extractArticle();
+		return;
+	}
+
+	// Content still loading — show loading message and retry when ready
+	let loadingDoc = previewFrame.contentDocument;
+	if (loadingDoc) {
+		loadingDoc.open();
+		loadingDoc.write("<!DOCTYPE html><html><head><style>body{font-family:Segoe UI,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#666;}</style></head><body><div>" + escapeHtml(loc("WebClipper.Preview.LoadingMessage", "Loading article...")) + "</div></body></html>");
+		loadingDoc.close();
+	}
+	let attempts = 0;
+	let waitForContent = () => {
+		if (contentDocReady) {
+			extractArticle();
+		} else if (++attempts < 20) {
+			setTimeout(waitForContent, 500);
+		} else {
+			showArticleError();
+		}
+	};
+	setTimeout(waitForContent, 500);
+}
+
+function extractArticle() {
+	// Clone content-frame document — Readability mutates the DOM
+	let iframeDoc = iframe.contentDocument;
+	if (!iframeDoc || !iframeDoc.body) {
+		showArticleError();
+		return;
+	}
+	let docClone = iframeDoc.cloneNode(true) as Document;
+	// Lazy-load Readability only when Article mode is used (~90KB saved from initial bundle)
+	(import("@mozilla/readability") as any).then(function(mod: any) {
+		let reader = new mod.Readability(docClone, { charThreshold: 100 });
+		let article = reader.parse();
+
+		if (article && article.content) {
+			cachedArticleHtml = cleanArticleHtml(article.content);
+			renderArticleHtml(cachedArticleHtml);
+			articleLoaded = true;
+			if (currentMode === "article") {
+				saveBtn.disabled = false;
+				saveBtn.textContent = strings.saveToOneNote;
+			}
+		} else {
+			showArticleError();
+		}
+	})["catch"](function() {
+		showArticleError();
+	});
+}
+
+function showArticleError() {
+	let errDoc = previewFrame.contentDocument;
+	if (errDoc) {
+		errDoc.open();
+		errDoc.write("<!DOCTYPE html><html><head><style>body{font-family:Segoe UI,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#999;}</style></head><body><div>" + escapeHtml(loc("WebClipper.Preview.NoContentFound", "Article content not available for this page.")) + "</div></body></html>");
+		errDoc.close();
+	}
+}
+
+// Clean Readability output to match ONML (OneNote Markup Language) constraints,
+// mirroring the old toOnml() pipeline: strip styles/classes, event handlers, and
+// unsupported elements. Applied once at extraction time so both preview and save
+// use the same cleaned HTML.
+function cleanArticleHtml(html: string): string {
+	let tempDoc = new DOMParser().parseFromString(html, "text/html");
+	// Remove elements not supported in ONML
+	let unsupported = tempDoc.querySelectorAll("applet, audio, button, canvas, embed, hr, input, link, map, menu, menuitem, meter, noscript, progress, script, source, style, svg, video");
+	for (let i = unsupported.length - 1; i >= 0; i--) {
+		if (unsupported[i].parentNode) { unsupported[i].parentNode.removeChild(unsupported[i]); }
+	}
+	// Strip all style and class attributes (page layout styles leak into preview/OneNote)
+	let allEls = tempDoc.querySelectorAll("*");
+	for (let j = 0; j < allEls.length; j++) {
+		(allEls[j] as HTMLElement).removeAttribute("style");
+		(allEls[j] as HTMLElement).removeAttribute("class");
+	}
+	return tempDoc.body ? tempDoc.body.innerHTML : html;
+}
+
+function renderArticleHtml(html: string) {
+	let pDoc = previewFrame.contentDocument;
+	if (!pDoc) { return; }
+	// Wrap article HTML in a styled document matching OneNote page layout:
+	// 624px content width + 20px left/right padding = 664px total (from @OneNotePageWidth)
+	let fontFamily = articleSerif ? strings.fontFamilySerif : strings.fontFamilySansSerif;
+	let fontSize = articleFontSize + "px";
+	let articleCss = "body { font-family: " + fontFamily + ", 'Segoe UI', sans-serif; font-size: " + fontSize + "; line-height: 1.6; "
+		+ "max-width: 624px; margin: 24px 0; padding: 0 20px; color: #1a1a1a; margin-bottom: 16px; }"
+		+ "img { max-width: 100%; height: auto; }"
+		+ "a { color: #2e75b5; text-decoration: underline; }"
+		+ "::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:3px} ::-webkit-scrollbar-track{background:transparent}"
+		+ "h2 { font-size: 18px; color: rgb(46,117,181); }"
+		+ "h3, h4, h5, h6 { color: rgb(91,155,213); margin-top: 14pt; margin-bottom: 14pt; }"
+		+ "figure { margin-left: 0; }"
+		+ "pre, code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-size: 14px; }"
+		+ "pre { padding: 12px; overflow-x: auto; }"
+		+ "blockquote { border-left: 3px solid rgb(46,117,181); margin-left: 0; padding-left: 16px; color: #555; }"
+		+ "table { border-collapse: collapse; width: 100%; }"
+		+ "td, th { border: 1px solid #ddd; padding: 8px; }"
+		+ ".highlighted { background: #fefe56; }"
+		+ ".highlight-anchor { position: relative; display: inline-block; }"
+		+ ".delete-highlight { position: absolute; top: -8px; left: -8px; z-index: 10; "
+		+ "width: 18px; height: 18px; border-radius: 50%; background: #e74c3c; color: #fff; "
+		+ "font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; }"
+		+ ".delete-highlight:hover { background: #c0392b; }";
+
+	let fullHtml = "<!DOCTYPE html><html><head><style>" + articleCss + "</style></head><body>"
+		+ html
+		+ "</body></html>";
+	pDoc.open();
+	pDoc.write(fullHtml);
+	pDoc.close();
+	// Re-initialize highlighter if enabled, including custom cursor
+	if (highlighterEnabled) {
+		initHighlighter();
+		if (pDoc && pDoc.body) {
+			let curUrl = chrome.runtime.getURL("images/editoroptions/highlight_cursor.cur");
+			pDoc.body.style.cursor = "url('" + curUrl + "') 16 16, text";
+		}
+	}
+}
+
+// --- Article header controls ---
+
+function applyArticleFont() {
+	let pDoc = previewFrame.contentDocument;
+	if (!pDoc || !pDoc.body) { return; }
+	let fontFamily = articleSerif ? strings.fontFamilySerif : strings.fontFamilySansSerif;
+	pDoc.body.style.fontFamily = fontFamily + ", 'Segoe UI', sans-serif";
+}
+
+function applyArticleFontSize() {
+	let pDoc = previewFrame.contentDocument;
+	if (!pDoc || !pDoc.body) { return; }
+	pDoc.body.style.fontSize = articleFontSize + "px";
+}
+
+function initHighlighter() {
+	let pDoc = previewFrame.contentDocument;
+	let pWin = previewFrame.contentWindow as any;
+	if (!pDoc || !pDoc.body || !pWin) { return; }
+
+	// Inject TextHighlighter script if not already present
+	if (!pWin.TextHighlighter) {
+		let script = pDoc.createElement("script");
+		script.src = "textHighlighter.js";
+		script.onload = function() {
+			createHighlighterInstance();
+		};
+		pDoc.head.appendChild(script);
+	} else {
+		createHighlighterInstance();
+	}
+}
+
+function createHighlighterInstance() {
+	let pWin = previewFrame.contentWindow as any;
+	let pDoc = previewFrame.contentDocument;
+	if (!pWin || !pWin.TextHighlighter || !pDoc || !pDoc.body) { return; }
+	textHighlighterInstance = new pWin.TextHighlighter(pDoc.body, {
+		color: "#fefe56",
+		highlightedClass: "highlighted",
+		enabled: true,
+		onAfterHighlight: function(_range: any, highlights: HTMLElement[]) {
+			// Add delete button to first span of each new highlight group
+			if (highlights && highlights.length > 0) {
+				addHighlightDeleteButton(highlights[0], pDoc);
+			}
+		}
+	});
+	// Listen for clicks on delete buttons
+	pDoc.body.addEventListener("click", function(e: MouseEvent) {
+		let target = e.target as HTMLElement;
+		if (target && target.classList && target.classList.contains("delete-highlight")) {
+			e.stopPropagation();
+			let ts = target.getAttribute("data-timestamp");
+			// Remove the delete button itself first
+			if (target.parentNode) { target.parentNode.removeChild(target); }
+			// Unwrap all highlight spans with this timestamp
+			if (ts && pDoc) {
+				let spans = pDoc.querySelectorAll(".highlighted[data-timestamp=\"" + ts + "\"]");
+				for (let i = spans.length - 1; i >= 0; i--) {
+					let span = spans[i] as HTMLElement;
+					let parent = span.parentNode;
+					while (span.firstChild) {
+						if (parent) { parent.insertBefore(span.firstChild, span); }
+					}
+					if (parent) { parent.removeChild(span); }
+				}
+			}
+		}
+	});
+}
+
+function addHighlightDeleteButton(firstSpan: HTMLElement, doc: Document) {
+	if (!firstSpan || !doc) { return; }
+	let ts = firstSpan.getAttribute("data-timestamp");
+	if (!ts) { return; }
+	// Don't add if already exists
+	if (doc.querySelector(".delete-highlight[data-timestamp=\"" + ts + "\"]")) { return; }
+	// Make the first span a positioning anchor for the absolute delete button
+	firstSpan.classList.add("highlight-anchor");
+	let btn = doc.createElement("span");
+	btn.className = "delete-highlight";
+	btn.setAttribute("data-timestamp", ts);
+	btn.setAttribute("role", "button");
+	btn.setAttribute("aria-label", loc("WebClipper.Preview.RemoveSelectedRegion", "Remove"));
+	btn.title = loc("WebClipper.Preview.RemoveSelectedRegion", "Remove");
+	btn.textContent = "\u00D7";
+	firstSpan.appendChild(btn);
+}
+
+function destroyHighlighter() {
+	if (textHighlighterInstance) {
+		textHighlighterInstance.disable();
+		textHighlighterInstance = undefined;
+	}
+}
+
+// Font family toggle
+sansSerifBtn.addEventListener("click", () => {
+	if (!articleSerif) { return; }
+	articleSerif = false;
+	sansSerifBtn.classList.add("active");
+	sansSerifBtn.setAttribute("aria-pressed", "true");
+	serifBtn.classList.remove("active");
+	serifBtn.setAttribute("aria-pressed", "false");
+	applyArticleFont();
+	announceToScreenReader(strings.changeFontSansSerif);
+});
+serifBtn.addEventListener("click", () => {
+	if (articleSerif) { return; }
+	articleSerif = true;
+	serifBtn.classList.add("active");
+	serifBtn.setAttribute("aria-pressed", "true");
+	sansSerifBtn.classList.remove("active");
+	sansSerifBtn.setAttribute("aria-pressed", "false");
+	applyArticleFont();
+	announceToScreenReader(strings.changeFontSerif);
+});
+
+// Font size +/-
+fontDecreaseBtn.addEventListener("click", () => {
+	if (articleFontSize <= 8) { return; }
+	articleFontSize -= 2;
+	applyArticleFontSize();
+	announceToScreenReader(strings.decreaseFontSize);
+});
+fontIncreaseBtn.addEventListener("click", () => {
+	if (articleFontSize >= 72) { return; }
+	articleFontSize += 2;
+	applyArticleFontSize();
+	announceToScreenReader(strings.increaseFontSize);
+});
+
+// Highlighter toggle
+highlightBtn.addEventListener("click", () => {
+	highlighterEnabled = !highlighterEnabled;
+	let imgEl = highlightBtn.querySelector("img") as HTMLImageElement;
+	let pDoc = previewFrame.contentDocument;
+	if (highlighterEnabled) {
+		highlightBtn.classList.add("active");
+		highlightBtn.setAttribute("aria-pressed", "true");
+		if (imgEl) { imgEl.src = "images/editoroptions/highlight_tool_on.svg"; }
+		initHighlighter();
+		if (pDoc && pDoc.body) {
+			let curUrl = chrome.runtime.getURL("images/editoroptions/highlight_cursor.cur");
+			pDoc.body.style.cursor = "url('" + curUrl + "') 16 16, text";
+		}
+	} else {
+		highlightBtn.classList.remove("active");
+		highlightBtn.setAttribute("aria-pressed", "false");
+		if (imgEl) { imgEl.src = "images/editoroptions/highlight_tool_off.svg"; }
+		destroyHighlighter();
+		if (pDoc && pDoc.body) { pDoc.body.style.cursor = ""; }
+	}
+	announceToScreenReader(strings.toggleHighlighter);
+});
+
+// --- Bookmark mode ---
+
+function switchToBookmark() {
+	saveArticleWorkingState();
+	resetSaveState();
+	currentMode = "bookmark";
+	iframe.style.display = "none";
+	previewContainer.style.display = "none";
+	capturePanel.style.display = "none";
+	previewFrame.style.display = "block";
+	articleHeader.style.display = "none";
+
+	if (!bookmarkLoaded) {
+		loadBookmarkContent();
+	} else {
+		renderBookmarkHtml(cachedBookmarkHtml);
+		saveBtn.disabled = false;
+		saveBtn.textContent = strings.saveToOneNote;
+	}
+}
+
+function loadBookmarkContent() {
+	if (contentDocReady) {
+		extractBookmark();
+		return;
+	}
+	// Content still loading — show loading and retry
+	let loadingDoc = previewFrame.contentDocument;
+	if (loadingDoc) {
+		loadingDoc.open();
+		loadingDoc.write("<!DOCTYPE html><html><head><style>body{font-family:Segoe UI,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#666;}</style></head><body><div>Loading bookmark...</div></body></html>");
+		loadingDoc.close();
+	}
+	let attempts = 0;
+	let waitForContent = () => {
+		if (contentDocReady) {
+			extractBookmark();
+		} else if (++attempts < 20) {
+			setTimeout(waitForContent, 500);
+		}
+	};
+	setTimeout(waitForContent, 500);
+}
+
+function extractBookmark() {
+	let iframeDoc = iframe.contentDocument;
+	if (!iframeDoc) { return; }
+
+	// Extract metadata from the content-frame DOM (same sources as BookmarkHelper)
+	let pageTitle = titleField.value || iframeDoc.title || "";
+	let pageUrl = sourceUrl.textContent || "";
+
+	// Description: og:description → meta description → twitter:description
+	let description = getMetaContent(iframeDoc, "og:description", "property")
+		|| getMetaContent(iframeDoc, "description", "name")
+		|| getMetaContent(iframeDoc, "twitter:description", "name")
+		|| "";
+	if (description.length > 140) {
+		description = description.substring(0, 140) + "...";
+	}
+
+	// Thumbnail: og:image → twitter:image → first img on page
+	let thumbnailSrc = getMetaContent(iframeDoc, "og:image", "property")
+		|| getMetaContent(iframeDoc, "twitter:image:src", "name")
+		|| getMetaContent(iframeDoc, "twitter:image", "name")
+		|| "";
+	if (!thumbnailSrc) {
+		let firstImg = iframeDoc.querySelector("img[src]");
+		if (firstImg) {
+			let src = firstImg.getAttribute("src");
+			if (src && src.indexOf("data:") !== 0) { thumbnailSrc = src; }
+		}
+	}
+
+	// Build bookmark card HTML
+	let thumbHtml = "";
+	if (thumbnailSrc) {
+		thumbHtml = "<td width=\"112\" style=\"padding-top:9px;vertical-align:top;\">"
+			+ "<img src=\"" + escapeAttr(thumbnailSrc) + "\" width=\"112\" alt=\"thumbnail\" style=\"max-height:112px;object-fit:cover;\">"
+			+ "</td>";
+	}
+
+	let titleHtml = "";
+	if (pageTitle) {
+		titleHtml = "<tr><td><h2 style=\"margin:0;margin-bottom:13px;\">" + escapeHtml(pageTitle) + "</h2></td></tr>";
+	}
+
+	let descHtml = "";
+	if (description) {
+		descHtml = "<tr><td style=\"word-wrap:break-word;\">" + escapeHtml(description) + "</td></tr>";
+	}
+
+	let urlStyle = "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px;";
+	if (description) { urlStyle += "padding-bottom:13px;"; }
+
+	let secondTdStyle = thumbnailSrc ? "padding-left:16px;" : "";
+
+	cachedBookmarkHtml = "<table style=\"table-layout:auto;border-collapse:collapse;margin-bottom:24px;\">"
+		+ "<tr style=\"vertical-align:top;\">"
+		+ thumbHtml
+		+ "<td style=\"" + secondTdStyle + "\"><table>"
+		+ titleHtml
+		+ "<tr><td style=\"" + urlStyle + "\"><a href=\"" + escapeAttr(pageUrl) + "\" target=\"_blank\" style=\"color:#2e75b5;\">" + escapeHtml(pageUrl) + "</a></td></tr>"
+		+ descHtml
+		+ "</table></td>"
+		+ "</tr></table>";
+
+	bookmarkLoaded = true;
+	renderBookmarkHtml(cachedBookmarkHtml);
+	if (currentMode === "bookmark") {
+		saveBtn.disabled = false;
+		saveBtn.textContent = strings.saveToOneNote;
+	}
+}
+
+function getMetaContent(doc: Document, value: string, attr: string): string {
+	let el = doc.querySelector("meta[" + attr + "=\"" + value + "\"]");
+	return el ? el.getAttribute("content") || "" : "";
+}
+
+function escapeHtml(str: string): string {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function escapeAttr(str: string): string {
+	return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function renderBookmarkHtml(html: string) {
+	let pDoc = previewFrame.contentDocument;
+	if (!pDoc) { return; }
+	let bookmarkCss = "body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 11pt; line-height: 1.5; "
+		+ "max-width: 624px; margin: 24px 0; padding: 0 20px; color: #1a1a1a; }"
+		+ "a { color: #2e75b5; text-decoration: underline; pointer-events: none; cursor: default; }"
+		+ "::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:3px} ::-webkit-scrollbar-track{background:transparent}"
+		+ "h2 { font-size: 18px; color: rgb(46,117,181); font-weight: normal; }"
+		+ "img { border-radius: 2px; }";
+	let fullHtml = "<!DOCTYPE html><html><head><style>" + bookmarkCss + "</style></head><body>"
+		+ html + "</body></html>";
+	pDoc.open();
+	pDoc.write(fullHtml);
+	pDoc.close();
+}
+
+// --- Region mode ---
+
+let regionImages: string[] = []; // Accumulated region captures
+
+function startRegionCapture() {
+	capturePanel.style.display = "flex";
+	statusText.textContent = loc("WebClipper.ClipType.Region.ProgressLabel", "Select a region on the page...");
+	saveBtn.disabled = true;
+	// Keep previewContainer visible (display:block) to hold flex space — sidebar stays right
+	safeSend({
+		action: "startRegion",
+		regionStrings: {
+			instruction: loc("WebClipper.Label.RegionSelectionMouseInstruction", "Drag a selection with the mouse, and then release to capture."),
+			back: loc("WebClipper.Action.BackToHome", "Back")
+		}
+	});
+}
+
+function switchToRegion() {
+	saveArticleWorkingState();
+	resetSaveState();
+	currentMode = "region";
+	iframe.style.display = "none";
+	previewFrame.style.display = "none";
+	articleHeader.style.display = "none";
+	// Keep previewContainer visible (even if empty) so sidebar stays right in flex layout
+	previewContainer.innerHTML = "";
+	previewContainer.style.display = "block";
+	// If we already have captured regions, show them instead of starting a new capture
+	if (regionImages.length > 0) {
+		renderRegionThumbnails();
+	} else {
+		startRegionCapture();
+	}
+}
+
+function renderRegionThumbnails() {
+	previewContainer.innerHTML = "";
+	previewContainer.style.display = "block";
+	capturePanel.style.display = "none";
+
+	for (let i = 0; i < regionImages.length; i++) {
+		let thumb = document.createElement("div");
+		thumb.className = "region-thumb";
+		let img = document.createElement("img");
+		img.src = regionImages[i];
+		let removeBtn = document.createElement("button");
+		removeBtn.className = "region-remove-btn";
+		removeBtn.textContent = "\u00D7"; // × symbol
+		removeBtn.title = loc("WebClipper.Preview.RemoveSelectedRegion", "Remove");
+		removeBtn.addEventListener("click", ((idx: number) => () => {
+			regionImages.splice(idx, 1);
+			if (regionImages.length === 0) {
+				// No regions left — stay in region mode, show just the add button
+				renderRegionThumbnails();
+				updateRegionSessionStorage();
+				saveBtn.disabled = true;
+			} else {
+				renderRegionThumbnails();
+				updateRegionSessionStorage();
+			}
+		})(i));
+		thumb.appendChild(img);
+		thumb.appendChild(removeBtn);
+		previewContainer.appendChild(thumb);
+	}
+
+	// "Add Another Region" button
+	let addBtn = document.createElement("button");
+	addBtn.className = "region-add-btn";
+	addBtn.textContent = "+ " + loc("WebClipper.Preview.Header.AddAnotherRegionButtonLabel", "Add another region");
+	addBtn.addEventListener("click", () => {
+		startRegionCapture();
+	});
+	previewContainer.appendChild(addBtn);
+
+	if (regionImages.length > 0) {
+		saveBtn.disabled = false;
+		saveBtn.textContent = strings.saveToOneNote;
+	} else {
+		saveBtn.disabled = true;
+	}
+}
+
+function updateRegionSessionStorage() {
+	// Store each region as a separate key to avoid session storage size limits
+	// First clear any old region keys
+	chrome.storage.session.get(null, (all: any) => { // tslint:disable-line:no-null-keyword
+		let keysToRemove = Object.keys(all).filter((k) => k.indexOf("regionImage_") === 0);
+		if (keysToRemove.length > 0) {
+			chrome.storage.session.remove(keysToRemove);
+		}
+		let toSet: any = { regionImageCount: regionImages.length };
+		for (let i = 0; i < regionImages.length; i++) {
+			toSet["regionImage_" + i] = regionImages[i];
+		}
+		chrome.storage.session.set(toSet);
+	});
+}
+
+// Mode button click handlers + ARIA (aria-pressed in toolbar, arrow keys)
+let modeButtonNodeList = document.querySelectorAll(".mode-btn");
+let modeButtons: HTMLButtonElement[] = [];
+for (let i = 0; i < modeButtonNodeList.length; i++) { modeButtons.push(modeButtonNodeList[i] as HTMLButtonElement); }
+modeButtons.forEach((btn, idx) => {
+	// Arrow key navigation (mirrors old enableAriaInvoke: ArrowUp/Down/Left/Right + Home/End)
+	btn.addEventListener("keydown", (e) => {
+		let target = -1;
+		if (e.key === "ArrowDown" || e.key === "ArrowRight") { target = idx + 1; } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") { target = idx - 1; } else if (e.key === "Home") { target = 0; } else if (e.key === "End") { target = modeButtons.length - 1; }
+		if (target >= 0 && target < modeButtons.length && !modeButtons[target].disabled) {
+			e.preventDefault();
+			modeButtons[target].focus();
+		}
+	});
+	btn.addEventListener("click", () => {
+		let mode = btn.getAttribute("data-mode");
+		if (mode === currentMode) { return; }
+		// Block mode switching during active capture — captureVisibleTab needs content-frame visible
+		if (!fullPageComplete && mode !== "fullpage") { return; }
+
+		// Update selected state visually + ARIA
+		document.querySelectorAll(".mode-btn").forEach((b) => {
+			b.classList.remove("selected");
+			b.setAttribute("aria-pressed", "false");
+		});
+		btn.classList.add("selected");
+		btn.setAttribute("aria-pressed", "true");
+
+		if (mode === "fullpage") {
+			switchToFullPage();
+		} else if (mode === "article") {
+			switchToArticle();
+		} else if (mode === "bookmark") {
+			switchToBookmark();
+		} else if (mode === "region") {
+			switchToRegion();
+		}
+		// Announce mode change to screen readers
+		let modeLabel = btn.querySelector("span");
+		if (modeLabel) { announceToScreenReader(modeLabel.textContent || ""); }
+	});
+});
+
+port.onMessage.addListener((message: any) => {
+	if (message.action === "loadContent") {
+		// Read HTML, base URL, cached stylesheets, and page metadata from session storage
+		chrome.storage.session.get(["fullPageHtmlContent", "fullPageBaseUrl", "fullPageTitle", "fullPageUrl"], (stored: any) => {
+			let rawHtml = stored && stored.fullPageHtmlContent ? stored.fullPageHtmlContent : "";
+			let baseUrl = stored && stored.fullPageBaseUrl ? stored.fullPageBaseUrl : "";
+
+			// Populate title and source URL (may not have been available on initial page load)
+			if (stored && stored.fullPageTitle && !titleField.value) { titleField.value = stored.fullPageTitle; }
+			if (stored && stored.fullPageUrl && !sourceUrl.textContent) { sourceUrl.textContent = stored.fullPageUrl; sourceUrl.title = stored.fullPageUrl; }
+
+			// Strip scripts only — keep iframes (some sites use them for content)
+			let cleanHtml = rawHtml
+				.replace(/<script[\s\S]*?<\/script>/gi, "")
+				.replace(/<script[^>]*\/>/gi, "");
+
+			// Parse into DOM to rewrite URLs and extract content
+			let parser = new DOMParser();
+			let doc = parser.parseFromString(cleanHtml, "text/html");
+
+			// Remove script-related link tags that trigger CSP violations on extension pages
+			let scriptLinks = doc.querySelectorAll('link[rel="preload"][as="script"], link[rel="modulepreload"], link[rel="prefetch"][as="script"]');
+			for (let i = scriptLinks.length - 1; i >= 0; i--) {
+				let parent = scriptLinks[i].parentNode;
+				if (parent) {
+					parent.removeChild(scriptLinks[i]);
+				}
+			}
+
+			// Rewrite relative URLs to absolute
+			if (baseUrl) {
+				let resolveUrl = (relative: string): string => {
+					try {
+						return new URL(relative, baseUrl).href;
+					} catch (e) {
+						return relative;
+					}
+				};
+
+				// Images
+				let imgs = doc.querySelectorAll("img[src]");
+				for (let i = 0; i < imgs.length; i++) {
+					let src = imgs[i].getAttribute("src");
+					if (src && src.indexOf("data:") !== 0 && src.indexOf("blob:") !== 0) {
+						imgs[i].setAttribute("src", resolveUrl(src));
+					}
+				}
+
+				// Stylesheets
+				let links = doc.querySelectorAll('link[rel="stylesheet"][href]');
+				for (let i = 0; i < links.length; i++) {
+					let href = links[i].getAttribute("href");
+					if (href) {
+						links[i].setAttribute("href", resolveUrl(href));
+					}
+				}
+
+				// Srcset attributes
+				let srcsets = doc.querySelectorAll("[srcset]");
+				for (let i = 0; i < srcsets.length; i++) {
+					let srcset = srcsets[i].getAttribute("srcset");
+					if (srcset) {
+						let resolved = srcset.replace(/(\S+)(\s+\S+)?/g, (match, url, descriptor) => {
+							if (url && url.indexOf("data:") !== 0 && url.indexOf("blob:") !== 0) {
+								return resolveUrl(url) + (descriptor || "");
+							}
+							return match;
+						});
+						srcsets[i].setAttribute("srcset", resolved);
+					}
+				}
+
+				// CSS url() in inline styles (background-image, content, etc.)
+				let styledElements = doc.querySelectorAll("[style]");
+				for (let i = 0; i < styledElements.length; i++) {
+					let style = styledElements[i].getAttribute("style");
+					if (style && style.indexOf("url(") !== -1) {
+						let rewritten = style.replace(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/g, (match, quote, urlVal) => {
+							if (urlVal && urlVal.indexOf("data:") !== 0 && urlVal.indexOf("blob:") !== 0 && urlVal.indexOf("#") !== 0) {
+								return "url(" + quote + resolveUrl(urlVal) + quote + ")";
+							}
+							return match;
+						});
+						styledElements[i].setAttribute("style", rewritten);
+					}
+				}
+
+				// CSS url() in <style> blocks
+				let styleBlocks = doc.querySelectorAll("style");
+				for (let i = 0; i < styleBlocks.length; i++) {
+					let cssText = styleBlocks[i].textContent;
+					if (cssText && cssText.indexOf("url(") !== -1) {
+						styleBlocks[i].textContent = cssText.replace(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/g, (match, quote, urlVal) => {
+							if (urlVal && urlVal.indexOf("data:") !== 0 && urlVal.indexOf("blob:") !== 0 && urlVal.indexOf("#") !== 0) {
+								return "url(" + quote + resolveUrl(urlVal) + quote + ")";
+							}
+							return match;
+						});
+					}
+				}
+			}
+
+			// Fetch external stylesheets and inline them (browser fetches via absolute URLs)
+
+			let remainingLinks = doc.querySelectorAll('link[rel="stylesheet"]');
+			let fetchPromises: Promise<void>[] = [];
+
+			let resolveCssUrls = (cssText: string, sheetUrl: string): string => {
+				return cssText.replace(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/g, (match: string, quote: string, urlVal: string) => {
+					if (!urlVal || urlVal.indexOf("data:") === 0 || urlVal.indexOf("blob:") === 0 || urlVal.indexOf("#") === 0) {
+						return match;
+					}
+					try {
+						return "url(" + quote + new URL(urlVal, sheetUrl).href + quote + ")";
+					} catch (e) {
+						return match;
+					}
+				});
+			};
+
+			for (let i = remainingLinks.length - 1; i >= 0; i--) {
+				let link = remainingLinks[i] as HTMLLinkElement;
+				let href = link.getAttribute("href");
+				if (!href) { continue; }
+
+				let absoluteHref: string;
+				try {
+					absoluteHref = baseUrl ? new URL(href, baseUrl).href : href;
+				} catch (e) {
+					continue;
+				}
+
+				if (absoluteHref.indexOf("http") !== 0) { continue; }
+
+				let capturedLink = link;
+				let capturedHref = absoluteHref;
+				fetchPromises.push(
+					fetch(capturedHref)
+						.then(function(r) { return r.ok ? r.text() : ""; })
+						.then(function(cssText) {
+							if (cssText && capturedLink.parentNode) {
+								cssText = resolveCssUrls(cssText, capturedHref);
+								cssText = cssText.replace(/@import\s+(?:url\([^)]*\)|['"][^'"]*['"])[^;]*;?/gi, "");
+								let styleEl = doc.createElement("style");
+								styleEl.textContent = cssText;
+								let media = capturedLink.getAttribute("media");
+								if (media) {
+									styleEl.setAttribute("media", media);
+								}
+								capturedLink.parentNode.replaceChild(styleEl, capturedLink);
+							}
+						})
+						.catch(function() {})
+				);
+			}
+
+			// Inject a scrollbar-hiding style into the captured document's head
+			let scrollbarStyle = doc.createElement("style");
+			scrollbarStyle.textContent = "::-webkit-scrollbar{display:none}html{scrollbar-width:none;overflow-x:hidden!important}[hidden]{display:none!important}";
+			doc.head.appendChild(scrollbarStyle);
+
+			// Wait for CSS fetches, then render into iframe
+			let renderContent = function() {
+				// Serialize the processed DOM to a complete HTML string
+				let doctype = doc.doctype ? "<!DOCTYPE " + doc.doctype.name + ">" : "<!DOCTYPE html>";
+				let fullHtml = doctype + doc.documentElement.outerHTML;
+
+				// Write into the iframe — CSS isolation, no style conflicts
+				let iframeDoc = iframe.contentDocument;
+				iframeDoc.open();
+				iframeDoc.write(fullHtml);
+				iframeDoc.close();
+
+				// DOM is now parsed — Readability can extract article content
+				contentDocReady = true;
+
+				let iframeWin = iframe.contentWindow;
+
+				// Wait for images to load before neutralizing positioning
+				let iframeImgs = iframeDoc.querySelectorAll("img");
+				let pending = 0;
+				let resolved = false;
+
+				let onReady = function() {
+					if (resolved) { return; }
+					resolved = true;
+
+					let viewportH = iframeWin.innerHeight;
+					let htmlEl = iframeDoc.documentElement;
+
+					// Measure content height BEFORE position conversions inflate it
+					let contentHeight = htmlEl.scrollHeight;
+
+					// Neutralize fixed/sticky positioning AFTER stylesheets load
+					let allElements = iframeDoc.body.querySelectorAll("*");
+					for (let i = 0; i < allElements.length; i++) {
+						let el = allElements[i] as HTMLElement;
+						let computed = iframeWin.getComputedStyle(el);
+						if (computed.position === "fixed") {
+							el.style.setProperty("position", "absolute", "important");
+						} else if (computed.position === "sticky") {
+							el.style.setProperty("position", "static", "important");
+						}
+						// Reset viewport-relative min-heights that create blank space
+						let minH = parseInt(computed.minHeight, 10);
+						if (minH >= viewportH) {
+							el.style.minHeight = "auto";
+						}
+					}
+
+					// Remove top padding/margin that sites add to compensate for fixed headers
+					let bodyEl = iframeDoc.body;
+					let bodyComputed = iframeWin.getComputedStyle(bodyEl);
+					if (parseInt(bodyComputed.paddingTop, 10) > 0) { bodyEl.style.paddingTop = "0"; }
+					if (parseInt(bodyComputed.marginTop, 10) > 0) { bodyEl.style.marginTop = "0"; }
+					let htmlComputed = iframeWin.getComputedStyle(htmlEl);
+					if (parseInt(htmlComputed.paddingTop, 10) > 0) { htmlEl.style.paddingTop = "0"; }
+					if (parseInt(htmlComputed.marginTop, 10) > 0) { htmlEl.style.marginTop = "0"; }
+
+					safeSend({
+						action: "dimensions",
+						viewportHeight: viewportH,
+						pageHeight: htmlEl.scrollHeight,
+						contentHeight: contentHeight
+					});
+				};
+
+				for (let i = 0; i < iframeImgs.length; i++) {
+					if (!iframeImgs[i].complete) {
+						pending++;
+						iframeImgs[i].onload = iframeImgs[i].onerror = function() {
+							pending--;
+							if (pending <= 0) {
+								setTimeout(onReady, 200);
+							}
+						};
+					}
+				}
+
+				if (pending === 0) {
+					setTimeout(onReady, 500);
+				}
+
+				// Safety timeout
+				setTimeout(onReady, 3000);
+			};
+
+			if (fetchPromises.length > 0) {
+				Promise.race([
+					Promise.all(fetchPromises),
+					new Promise(function(resolve) { setTimeout(resolve, 5000); })
+				]).then(renderContent);
+			} else {
+				renderContent();
+			}
+		});
+	}
+
+	if (message.action === "scroll") {
+		let iframeWin = iframe.contentWindow;
+		let iframeDoc = iframe.contentDocument;
+		iframeWin.scrollTo(0, message.scrollTo);
+		safeSend({
+			action: "scrollResult",
+			scrollY: iframeWin.scrollY,
+			pageHeight: iframeDoc.documentElement.scrollHeight
+		});
+	}
+
+	if (message.action === "initCanvas") {
+		stitchViewportHeight = message.viewportHeight;
+		stitchContentHeight = message.contentHeight;
+		stitchYOffset = 0;
+		stitchDpr = 0;
+		contentPixelWidth = 0;
+		statusText.textContent = strings.capturing;
+	}
+
+	if (message.action === "drawCapture") {
+		// Update sidebar progress
+		if (message.totalViewports) {
+			(document.getElementById("progress-bar-track") as HTMLElement).style.display = "";
+			let current = message.index + 1;
+			let total = message.totalViewports;
+			progressInfo.textContent = strings.viewportProgress.replace("{0}", current).replace("{1}", total);
+			let pct = Math.round((current / total) * 100);
+			progressFill.style.width = pct + "%";
+			progressFill.setAttribute("aria-valuenow", "" + pct);
+		}
+
+		let img = new Image();
+		img.onload = function() {
+			let imgWidth = img.naturalWidth;
+			let imgHeight = img.naturalHeight;
+
+			if (message.index === 0) {
+				// First capture: initialize canvas dimensions
+				stitchDpr = imgHeight / stitchViewportHeight;
+				// Exclude sidebar pixels from the canvas — only keep content area
+				contentPixelWidth = imgWidth - Math.round(sidebarCssWidth * stitchDpr);
+				if (contentPixelWidth <= 0) { contentPixelWidth = imgWidth; }
+				let maxHeight = 16384;
+				if (stitchContentHeight > 0) {
+					maxHeight = Math.min(Math.round(stitchContentHeight * stitchDpr), 16384);
+				}
+				stitchCanvas.width = contentPixelWidth;
+				stitchCanvas.height = maxHeight;
+				stitchCtx = stitchCanvas.getContext("2d") as CanvasRenderingContext2D;
+				stitchCtx.imageSmoothingEnabled = false;
+				stitchYOffset = 0;
+
+				// Draw first capture (content area only, excluding sidebar)
+				let drawH = Math.min(imgHeight, stitchCanvas.height);
+				stitchCtx.drawImage(img, 0, 0, contentPixelWidth, drawH, 0, 0, contentPixelWidth, drawH);
+				stitchYOffset = drawH;
+			} else {
+				// Calculate overlap: expected vs actual scroll position
+				let expectedScroll = message.index * stitchViewportHeight;
+				let overlapCss = expectedScroll - message.scrollY;
+				let overlapPx = Math.round(overlapCss * stitchDpr);
+
+				let srcY = 0;
+				let srcH = imgHeight;
+				if (overlapPx > 0 && overlapPx < imgHeight) {
+					srcY = overlapPx;
+					srcH = imgHeight - overlapPx;
+				}
+
+				// Cap at canvas height
+				let remaining = stitchCanvas.height - stitchYOffset;
+				if (remaining <= 0) {
+					safeSend({ action: "drawComplete" });
+					return;
+				}
+				if (srcH > remaining) {
+					srcH = remaining;
+				}
+
+				stitchCtx.drawImage(img, 0, srcY, contentPixelWidth, srcH, 0, stitchYOffset, contentPixelWidth, srcH);
+				stitchYOffset += srcH;
+			}
+
+			safeSend({ action: "drawComplete" });
+		};
+		img.onerror = function() {
+			safeSend({ action: "drawComplete" });
+		};
+		img.src = message.dataUrl;
+	}
+
+	if (message.action === "finalize") {
+		// Trim canvas if content was shorter than estimated
+		if (stitchYOffset < stitchCanvas.height && stitchYOffset > 0) {
+			let trimmed = document.createElement("canvas");
+			trimmed.width = stitchCanvas.width;
+			trimmed.height = stitchYOffset;
+			let trimCtx = trimmed.getContext("2d") as CanvasRenderingContext2D;
+			trimCtx.imageSmoothingEnabled = false;
+			trimCtx.drawImage(stitchCanvas, 0, 0, stitchCanvas.width, stitchYOffset, 0, 0, stitchCanvas.width, stitchYOffset);
+			stitchCanvas = trimmed;
+		}
+
+		// Convert to JPEG 95% data URL and store in session storage
+		stitchCanvas.toBlob(((blob: Blob) => {
+			let reader = new FileReader();
+			reader.onloadend = function() {
+				let dataUrl = reader.result as string;
+				fullPageDataUrl = dataUrl; // Cache for mode switching
+				chrome.storage.session.set({ fullPageFinalImage: dataUrl }, function() {
+					fullPageComplete = true;
+
+					// Only update left panel if still viewing Full Page mode
+					if (currentMode === "fullpage") {
+						iframe.style.display = "none";
+						previewContainer.style.display = "block";
+						let previewImg = document.createElement("img");
+						previewImg.src = dataUrl;
+						previewContainer.appendChild(previewImg);
+					} else {
+						// Still create the preview image for later switching
+						let previewImg = document.createElement("img");
+						previewImg.src = dataUrl;
+						previewContainer.appendChild(previewImg);
+					}
+
+					// Update sidebar to preview mode — hide progress, show Clip button
+					capturePanel.style.display = "none";
+					saveBtn.textContent = strings.saveToOneNote;
+					saveBtn.disabled = false;
+
+					// Re-enable mode buttons and sign-out now that capture is complete
+					document.querySelectorAll(".mode-btn").forEach((b: Element) => {
+						(b as HTMLButtonElement).disabled = false;
+						b.classList.remove("disabled");
+					});
+					enableSignout();
+					announceToScreenReader(loc("WebClipper.Label.ClipSuccessful", "Capture complete"));
+					// Set initial focus on Full Page mode button after capture
+					let fpModeBtn = document.querySelector('.mode-btn[data-mode="fullpage"]') as HTMLElement;
+					if (fpModeBtn) { setTimeout(function() { fpModeBtn.focus(); }, 100); }
+
+					safeSend({ action: "finalizeComplete" });
+				});
+			};
+			reader.readAsDataURL(blob);
+		}) as BlobCallback, "image/jpeg", 0.95);
+	}
+
+	if (message.action === "regionCaptured") {
+		// Worker sends full tab screenshot + selection coords via port (same as drawCapture)
+		let fullImg = new Image();
+		fullImg.onload = () => {
+			// Calculate effective DPR from actual image vs reported viewport
+			// (captureVisibleTab may differ from window.devicePixelRatio on scaled displays)
+			let dpr = message.dpr || 1;
+			let sx = Math.round(message.x * dpr);
+			let sy = Math.round(message.y * dpr);
+			let sw = Math.round(message.width * dpr);
+			let sh = Math.round(message.height * dpr);
+			// Clamp to actual image bounds — prevents grabbing gray/empty pixels beyond content
+			if (sx + sw > fullImg.naturalWidth) { sw = fullImg.naturalWidth - sx; }
+			if (sy + sh > fullImg.naturalHeight) { sh = fullImg.naturalHeight - sy; }
+			if (sw <= 0 || sh <= 0) { return; }
+			let cropCanvas = document.createElement("canvas");
+			cropCanvas.width = sw;
+			cropCanvas.height = sh;
+			let cropCtx = cropCanvas.getContext("2d") as CanvasRenderingContext2D;
+			cropCtx.drawImage(fullImg, sx, sy, sw, sh, 0, 0, sw, sh);
+			let croppedUrl = cropCanvas.toDataURL("image/jpeg", 0.95);
+
+			regionImages.push(croppedUrl);
+			renderRegionThumbnails();
+			updateRegionSessionStorage();
+		};
+		fullImg.src = message.dataUrl || "";
+	}
+
+	if (message.action === "regionCancelled") {
+		// Stay in region mode — user cancelled one selection, not the mode itself.
+		// Show thumbnails (or "Add another region" button if empty).
+		capturePanel.style.display = "none";
+		renderRegionThumbnails();
+	}
+
+	if (message.action === "saveResult") {
+		if (saveTimeoutId) { clearTimeout(saveTimeoutId); saveTimeoutId = 0; }
+		if (message.success) {
+			saveDone = true;
+			unlockSidebar();
+			capturePanel.style.display = "none";
+			// Keep Clip button ready for re-clip
+			saveBtn.textContent = strings.saveToOneNote;
+			saveBtn.disabled = false;
+			saveBtn.onclick = undefined;
+			cancelBtn.disabled = false;
+			// Show success banner with optional "View in OneNote" link
+			let successBanner = document.getElementById("success-banner") as HTMLDivElement;
+			let successText = document.getElementById("success-text") as HTMLSpanElement;
+			let viewLink = document.getElementById("view-onenote-link") as HTMLButtonElement;
+			successText.textContent = "\u2713 " + loc("WebClipper.Label.ClipSuccessful", "Clip Successful!");
+			if (message.pageUrl) {
+				viewLink.textContent = strings.viewInOneNote;
+				viewLink.style.display = "block";
+				viewLink.onclick = function() {
+					window.open(message.pageUrl, "_blank");
+					window.close();
+				};
+			} else {
+				viewLink.style.display = "none";
+				viewLink.onclick = undefined;
+			}
+			successBanner.style.display = "block";
+			announceToScreenReader(loc("WebClipper.Label.ClipSuccessful", "Clip Successful!"));
+		} else {
+			unlockSidebar();
+			let errorDetail = message.error || "Unknown error";
+			announceToScreenReader(loc("WebClipper.Error.GenericError", "Something went wrong."));
+			capturePanel.style.display = "flex";
+			progressInfo.textContent = "";
+			progressFill.style.width = "0%";
+			// Hide progress bar in error state — the track line looks like a separator
+			(document.getElementById("progress-bar-track") as HTMLElement).style.display = "none";
+			// Error message first, then expandable diagnostics
+			let escapedDetail = escapeHtml(errorDetail);
+			statusText.innerHTML = escapeHtml(loc("WebClipper.Error.GenericError", "Something went wrong. Please try clipping the page again."))
+				+ "<details style=\"margin-top:8px;font-size:12px;\">"
+				+ "<summary style=\"cursor:pointer;color:rgba(255,255,255,0.8);\">"
+				+ escapeHtml(loc("WebClipper.Label.SignInUnsuccessfulMoreInformation", "More information"))
+				+ " <button id=\"copy-diagnostics\" aria-label=\"Copy diagnostic information\" style=\"background:none;border:none;cursor:pointer;font-size:12px;padding:0;vertical-align:baseline;\">&#x1F4CB;</button>"
+				+ "</summary>"
+				+ "<pre id=\"error-detail-text\" style=\"margin-top:6px;font-size:11px;color:rgba(255,255,255,0.85);background:rgba(0,0,0,0.2);padding:8px;border-radius:3px;max-height:120px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;\">"
+				+ escapedDetail + "</pre>"
+				+ "</details>";
+			let copyBtn = document.getElementById("copy-diagnostics");
+			if (copyBtn) {
+				copyBtn.addEventListener("click", function(ev) {
+					ev.stopPropagation();
+					let pre = document.getElementById("error-detail-text");
+					if (pre) {
+						navigator.clipboard.writeText(pre.textContent || "").then(function() {
+							copyBtn.style.color = "#69F0AE";
+							copyBtn.textContent = "\u2713";
+							setTimeout(function() { copyBtn.style.color = ""; copyBtn.innerHTML = "&#x1F4CB;"; }, 1500);
+						});
+					}
+				});
+			}
+			saveBtn.textContent = strings.saveToOneNote;
+			saveBtn.disabled = false;
+		}
+	}
+
+	// --- Sign-in result from worker ---
+	if (message.action === "signInResult") {
+		signingIn = false;
+		if (message.success) {
+			logFunnel(Funnel.Label.AuthSignInCompleted);
+			// Transition from sign-in to capture mode
+			isSignedIn = true;
+			hideSignInPanel();
+			// Show iframe immediately so flex layout keeps sidebar on the right
+			// (it'll be blank until loadContent arrives, but prevents sidebar snap-left)
+			iframe.style.display = "block";
+			// Update user info footer
+			if (message.user) {
+				userEmailSpan.textContent = message.user.email || message.user.name || "";
+				userEmailSpan.title = message.user.email || "";
+				userAuthType = message.user.authType || "";
+				userInfoDiv.style.display = "";
+				feedbackLink.style.display = (userAuthType === "Msa") ? "none" : "";
+			}
+			// Reset capture state for fresh capture
+			fullPageComplete = false;
+			fullPageDataUrl = "";
+			articleLoaded = false;
+			cachedArticleHtml = "";
+			bookmarkLoaded = false;
+			cachedBookmarkHtml = "";
+			contentDocReady = false;
+			// Populate section dropdown — delay slightly to ensure localStorage is written by offscreen
+			populateSectionDropdown();
+			setTimeout(fetchFreshNotebooks, 300);
+			// Show capture progress — content capture + loadContent will follow from worker
+			capturePanel.style.display = "flex";
+			statusText.textContent = strings.capturing;
+			saveBtn.disabled = true;
+		} else {
+			logFunnel(Funnel.Label.AuthSignInFailed);
+			showSignInError(message.error || loc("WebClipper.Error.SignInUnsuccessful", "Sign-in failed. Please try again."));
+		}
+	}
+
+	// --- Sign-out complete from worker ---
+	if (message.action === "signOutComplete") {
+		isSignedIn = false;
+		signingIn = false;
+		// Reset sign-in panel state
+		signinMsaBtn.disabled = false;
+		signinOrgIdBtn.disabled = false;
+		signinProgress.style.display = "none";
+		signinError.style.display = "none";
+		// Reset sidebar state fully — unlock all controls
+		saveDone = false;
+		fullPageComplete = false;
+		fullPageDataUrl = "";
+		articleLoaded = false;
+		cachedArticleHtml = "";
+		bookmarkLoaded = false;
+		cachedBookmarkHtml = "";
+		contentDocReady = false;
+		regionImages.length = 0;
+		currentMode = "fullpage";
+		// Unlock sidebar (clears disabled state from lockSidebar during save)
+		unlockSidebar();
+		enableSignout();
+		userEmailSpan.textContent = "";
+		userAuthType = "";
+		userInfoDiv.style.display = "none";
+		// Clear section dropdown and notebook cache so next user gets fresh data
+		sectionList.innerHTML = "";
+		selectedSectionId = "";
+		sectionSelected.textContent = "";
+		try {
+			localStorage.removeItem("notebooks");
+			localStorage.removeItem("curSection");
+		} catch (e) { /* ignore */ }
+		// Reset metadata fields
+		titleField.value = "";
+		noteField.value = "";
+		sourceUrl.textContent = "";
+		sourceUrl.title = "";
+		// Clear stale capture content from DOM
+		previewContainer.innerHTML = "";
+		previewContainer.style.display = "none";
+		iframe.style.display = "none";
+		previewFrame.style.display = "none";
+		capturePanel.style.display = "none";
+		// Reset mode buttons to initial state (disabled until capture completes)
+		document.querySelectorAll(".mode-btn").forEach((b) => {
+			b.classList.remove("selected");
+			(b as HTMLButtonElement).disabled = true;
+			b.classList.add("disabled");
+		});
+		let fpBtn = document.querySelector('.mode-btn[data-mode="fullpage"]');
+		if (fpBtn) { fpBtn.classList.add("selected"); }
+		saveBtn.disabled = true;
+		saveBtn.textContent = strings.saveToOneNote;
+		saveBtn.onclick = undefined;
+		cancelBtn.textContent = strings.close;
+		// Show sign-in overlay
+		showSignInPanel();
+	}
+});
+
+// Save button triggers clip via port — includes title, annotation, mode, and content for OneNote page creation
+saveBtn.addEventListener("click", () => {
+	// Clear previous success state if re-clipping
+	saveDone = false;
+	let prevBanner = document.getElementById("success-banner");
+	if (prevBanner) { prevBanner.style.display = "none"; }
+	logFunnel(Funnel.Label.ClipAttempted);
+	lockSidebar();
+	saveBtn.disabled = true;
+	saveBtn.textContent = strings.saving;
+	// Show saving status below the buttons
+	capturePanel.style.display = "flex";
+	statusText.textContent = strings.saving;
+	progressInfo.textContent = "";
+	announceToScreenReader(strings.saving);
+	// Client-side 30s timeout — service worker setTimeout is unreliable (SW goes inactive)
+	if (saveTimeoutId) { clearTimeout(saveTimeoutId); }
+	saveTimeoutId = setTimeout(function() {
+		if (!saveDone) {
+			unlockSidebar();
+			capturePanel.style.display = "flex";
+			progressInfo.textContent = "";
+			(document.getElementById("progress-bar-track") as HTMLElement).style.display = "none";
+			statusText.innerHTML = escapeHtml(loc("WebClipper.Error.GenericError", "Something went wrong. Please try clipping the page again."))
+				+ "<div style=\"margin-top:6px;font-size:11px;opacity:0.7;\">Request timed out (30s)</div>";
+			saveBtn.textContent = strings.saveToOneNote;
+			saveBtn.disabled = false;
+			announceToScreenReader(loc("WebClipper.Error.GenericError", "Something went wrong."));
+		}
+	}, 30000);
+	let saveMsg: any = {
+		action: "save",
+		title: titleField.value,
+		annotation: noteField.value,
+		url: sourceUrl.textContent || "",
+		mode: currentMode,
+		sectionId: selectedSectionId
+	};
+	// For full page, send the actual CSS width of the captured image
+	// (contentPixelWidth is physical pixels; divide by DPR for CSS pixels)
+	if (currentMode === "fullpage" && contentPixelWidth > 0 && stitchDpr > 0) {
+		saveMsg.imageWidth = Math.round(contentPixelWidth / stitchDpr);
+	}
+	// For article/bookmark, include the rendered HTML
+	// Wrap article content with font styling (matches old oneNoteSaveableFactory behavior)
+	// If highlights exist, serialize the iframe body to preserve them
+	if (currentMode === "article") {
+		let pDoc = previewFrame.contentDocument;
+		let articleBody = "";
+		if (pDoc && pDoc.body && pDoc.body.querySelector(".highlighted")) {
+			// Clone body to strip delete buttons without mutating the live preview
+			let clone = pDoc.body.cloneNode(true) as HTMLElement;
+			let delBtns = clone.querySelectorAll(".delete-highlight");
+			for (let i = delBtns.length - 1; i >= 0; i--) {
+				if (delBtns[i].parentNode) { delBtns[i].parentNode.removeChild(delBtns[i]); }
+			}
+			articleBody = clone.innerHTML;
+		} else {
+			articleBody = cachedArticleHtml;
+		}
+		// Apply font family + size as wrapping div (OneNote tables don't inherit from parent)
+		let fontFamily = articleSerif ? strings.fontFamilySerif : strings.fontFamilySansSerif;
+		let fontStyle = "font-size: " + articleFontSize + "px; font-family: " + fontFamily + ";";
+		saveMsg.contentHtml = "<div style=\"" + fontStyle + "\">" + articleBody + "</div>";
+	} else if (currentMode === "bookmark" && cachedBookmarkHtml) {
+		saveMsg.contentHtml = cachedBookmarkHtml;
+	}
+	safeSend(saveMsg);
+});
+
+// Block keyboard on non-interactive elements — but allow keys needed by screen readers
+// NVDA Browse mode uses arrow keys to navigate the virtual buffer; blocking them prevents NVDA from reading content
+document.addEventListener("keydown", (e) => {
+	// Allow navigation keys (Tab, Escape, arrows) — screen readers need these
+	if (e.key === "Tab" || e.key === "Escape"
+		|| e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight"
+		|| e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") {
+		return;
+	}
+	// Allow keyboard on interactive elements (inputs, buttons, links, tabindex items)
+	let target = e.target as HTMLElement;
+	if (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.tagName === "BUTTON"
+		|| target.tagName === "A" || target.tagName === "SELECT"
+		|| target.hasAttribute("tabindex") || target.getAttribute("role") === "option") {
+		return;
+	}
+	// Allow modifier key combinations (NVDA uses Insert+key, Narrator uses CapsLock+key)
+	if (e.altKey || e.ctrlKey || e.metaKey) { return; }
+	e.preventDefault();
+}, true);
+document.addEventListener("wheel", (e) => {
+	// Allow scrolling in preview container, preview frame, and sidebar body
+	let target = e.target as HTMLElement;
+	if (target.closest("#preview-container") || target.closest("#sidebar-body")) {
+		return;
+	}
+	e.preventDefault();
+}, { capture: true, passive: false } as any);
+
+// Prevent resize/maximize — snap back to original size
+let origWidth = window.outerWidth;
+let origHeight = window.outerHeight;
+window.addEventListener("resize", () => {
+	if (window.outerWidth !== origWidth || window.outerHeight !== origHeight) {
+		// Check for maximized state — window.resizeTo is ignored when maximized
+		// Use chrome.windows API to un-maximize first, then resize
+		try {
+			chrome.windows.getCurrent({}, (w: any) => {
+				if (w && w.state === "maximized") {
+					chrome.windows.update(w.id, { state: "normal", width: origWidth, height: origHeight });
+				} else {
+					window.resizeTo(origWidth, origHeight);
+				}
+			});
+		} catch (e) {
+			window.resizeTo(origWidth, origHeight);
+		}
+	}
+});
+
+// Modal-like focus: renderer opens focused (chrome.windows.create with focused:true).
+// No blur re-focus — it fought Alt+Tab, sign-in popups, and required multiple guard
+// flags (saveDone, region, signingIn). Content area has pointer-events:none and iframes
+// have tabindex="-1", so no functional need for aggressive focus stealing.
+// Note: screen reader testing found Edge disables accessibility API flags for extension
+// popup windows (edge://accessibility shows Screen reader:disabled), so SR compat was
+// not the primary reason for removal — but keeping it removed avoids future conflicts.
+let signingIn = false; // Used by sign-in flow
+
+// Signal that the renderer is ready
+safeSend({ action: "ready" });
diff --git a/src/scripts/saveToOneNote/oneNoteSaveableFactory.ts b/src/scripts/saveToOneNote/oneNoteSaveableFactory.ts
index c79b1132..abe87d9f 100644
--- a/src/scripts/saveToOneNote/oneNoteSaveableFactory.ts
+++ b/src/scripts/saveToOneNote/oneNoteSaveableFactory.ts
@@ -126,7 +126,18 @@ export class OneNoteSaveableFactory {
 				}
 				break;
 			case ClipMode.FullPage:
-				page.addHtml(this.clipperState.pageInfo.contentData);
+				let fullPageData = this.clipperState.fullPageResult.data;
+				if (fullPageData && fullPageData.ImageBlob) {
+					// Send as binary MIME part — avoids base64 encoding overhead
+					let mimeName = "FullPageImage" + Math.floor(Math.random() * 10000);
+					(page as any).dataParts.push({
+						content: fullPageData.ImageBlob,
+						name: mimeName,
+						type: "image/" + (fullPageData.ImageFormat || "jpeg")
+					});
+					let imgWidth = fullPageData.ImageWidth || 1280;
+					page.addOnml("<p><img src=\"name:" + mimeName + "\" width=\"" + imgWidth + "\" /></p>&nbsp;");
+				}
 				break;
 			case ClipMode.Region:
 				for (let regionDataUrl of this.clipperState.regionResult.data) {
diff --git a/src/strings.json b/src/strings.json
index bc3735a8..8b8e88af 100644
--- a/src/strings.json
+++ b/src/strings.json
@@ -59,6 +59,9 @@
 	"WebClipper.ClipType.ScreenShot.Button": "Full Page",
 	"WebClipper.ClipType.ScreenShot.Button.Tooltip": "Take a screenshot of the whole page, just like you see it.",
 	"WebClipper.ClipType.ScreenShot.ProgressLabel": "Clipping Page",
+	"WebClipper.ClipType.ScreenShot.IncrementalProgress": "Capturing {0} of {1}...",
+	"WebClipper.ClipType.ScreenShot.Saving": "Saving...",
+	"WebClipper.Label.SelectClipMode": "Select a clipping mode",
 	"WebClipper.ClipType.Selection.Button": "Selection",
 	"WebClipper.ClipType.Selection.Button.Tooltip": "Clip the selection you made on the web page.",
 	"WebClipper.ClipType.Selection.ProgressLabel": "Clipping Selection",
diff --git a/src/styles/renderer.less b/src/styles/renderer.less
new file mode 100644
index 00000000..6bdfd419
--- /dev/null
+++ b/src/styles/renderer.less
@@ -0,0 +1,518 @@
+// Renderer window styles — sidebar panel for capture progress and preview
+// Color values match OneNote branding from clipper.less
+
+@OneNotePurple: #7321a6;
+@DarkBackgroundColor: #56197c;
+@DarkHoverColor: #8f4db8;
+
+// Layout
+html, body {
+	margin: 0; padding: 0; overflow: hidden;
+	width: 100%; height: 100%;
+	font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+body { display: flex; }
+
+// Preview area wrapper — flex column for article header + content
+#preview-area {
+	flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%;
+}
+
+// Content area — page renders here during capture
+iframe#content-frame {
+	flex: 1; min-width: 0; min-height: 0;
+	border: none; display: block; pointer-events: none;
+}
+
+// Preview frame — article/bookmark HTML rendered here
+iframe#preview-frame {
+	flex: 1; min-width: 0; min-height: 0;
+	border: none; display: none;
+	background: #fff;
+}
+
+// Preview area — shown after capture with scrollable image
+#preview-container {
+	flex: 1; min-width: 0; min-height: 0;
+	overflow-y: auto; display: none;
+	background: #f3f2f1;
+	// Full-width for full-page screenshot preview, but not for region thumbnails
+	> img { width: 100%; display: block; }
+	// Show scrollbar to indicate scrollable content
+	&::-webkit-scrollbar { display: block; width: 6px; }
+	&::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
+	&::-webkit-scrollbar-track { background: transparent; }
+}
+
+// Article preview header bar — highlighter, font family, font size controls
+#article-header {
+	flex-shrink: 0; height: 40px;
+	background: rgba(128, 46, 179, 0.95);
+	display: none; // shown by JS when article mode active
+	align-items: center; padding: 0 12px;
+
+	button {
+		background: transparent; border: 1px solid rgba(255,255,255,0.6);
+		color: #fff; cursor: pointer; border-radius: 4px;
+		height: 28px; vertical-align: middle; padding: 0;
+		&:hover:not(.active) { background: @DarkHoverColor; }
+		&:focus { outline: 2px solid #f8f8f8 !important; outline-offset: 1px; }
+		&.active { background: #fff; color: @OneNotePurple; border-color: #fff; }
+		img { width: 18px; height: 18px; vertical-align: middle; }
+	}
+
+	#highlight-btn {
+		width: 28px; height: 28px;
+		display: flex; align-items: center; justify-content: center;
+	}
+
+	.header-separator {
+		width: 1px; height: 20px; background: rgba(255,255,255,0.4);
+		margin: 0 12px; flex-shrink: 0;
+	}
+
+	#font-family-group, #font-size-group {
+		display: flex;
+		button:first-child {
+			border-top-right-radius: 0; border-bottom-right-radius: 0;
+		}
+		button:last-child {
+			border-top-left-radius: 0; border-bottom-left-radius: 0;
+			margin-left: -1px;
+		}
+	}
+
+	.font-btn {
+		font-size: 13px; min-width: 76px; padding: 0 10px;
+	}
+	#sans-serif-btn { font-family: Verdana, sans-serif; }
+	#serif-btn { font-family: Georgia, serif; letter-spacing: 0.5px; }
+
+	#font-decrease-btn, #font-increase-btn {
+		width: 32px; display: flex; align-items: center; justify-content: center;
+	}
+}
+
+// Sidebar panel
+#sidebar {
+	width: 322px; flex-shrink: 0; height: 100%;
+	background: @DarkBackgroundColor; color: #fff;
+	display: flex; flex-direction: column;
+	box-sizing: border-box; overflow: hidden;
+}
+
+#sidebar-header {
+	padding: 14px 16px 10px;
+	border-bottom: 1px solid rgba(255,255,255,0.15);
+	display: flex; align-items: center; gap: 10px;
+	img { width: 24px; height: 24px; border-radius: 5px; }
+	.title { font-size: 13px; font-weight: 600; opacity: 0.9; }
+}
+
+#sidebar-body {
+	flex: 1; padding: 12px 16px;
+	display: flex; flex-direction: column; gap: 0;
+	overflow-y: auto;
+	// Visible scrollbar so user can see there's more content below
+	// !important overrides the global ::-webkit-scrollbar { display: none } at bottom of file
+	&::-webkit-scrollbar { display: block !important; width: 5px !important; }
+	&::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2) !important; border-radius: 3px; }
+	&::-webkit-scrollbar-track { background: transparent; }
+}
+
+// Mode buttons
+#mode-panel {
+	display: flex; flex-direction: column; gap: 3px;
+	margin-bottom: 12px;
+}
+
+.mode-btn {
+	width: 100%; height: 34px; border: none; border-radius: 4px;
+	background: rgba(255,255,255,0.08); color: #fff;
+	font-size: 13px; font-family: inherit; cursor: pointer;
+	display: flex; align-items: center; gap: 10px;
+	padding: 0 12px; box-sizing: border-box;
+	transition: background 0.15s;
+	&:hover { background: rgba(255,255,255,0.16); }
+	&.selected {
+		background: @OneNotePurple;
+		&:hover { background: @DarkHoverColor; }
+	}
+	&.disabled {
+		opacity: 0.35; cursor: default;
+		&:hover { background: rgba(255,255,255,0.08); }
+	}
+	img {
+		width: 18px; height: 18px;
+		filter: brightness(0) invert(1);
+	}
+}
+
+// Dividers
+.sidebar-divider {
+	border: none; border-top: 1px solid rgba(255,255,255,0.15);
+	margin: 10px 0;
+}
+
+// Metadata fields
+#meta-panel {
+	display: flex; flex-direction: column; gap: 4px;
+}
+
+.field-label {
+	font-size: 11px; font-weight: 600;
+	text-transform: uppercase; letter-spacing: 0.5px;
+	opacity: 0.7;
+	margin-top: 8px;
+	&:first-child { margin-top: 0; }
+}
+
+#title-field, #note-field {
+	width: 100%; box-sizing: border-box;
+	background: rgba(255,255,255,0.1); color: #fff;
+	border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
+	padding: 7px 10px; font-size: 13px; font-family: inherit;
+	resize: vertical; line-height: 1.4;
+	&::placeholder { color: rgba(255,255,255,0.45); }
+	&:focus {
+		outline: none;
+		border-color: rgba(255,255,255,0.5);
+		background: rgba(255,255,255,0.14);
+	}
+}
+
+.source-url {
+	font-size: 12px; opacity: 0.75;
+	white-space: nowrap; overflow: hidden;
+	text-overflow: ellipsis;
+	margin-bottom: 2px;
+}
+
+// Custom section picker dropdown
+#section-picker {
+	position: relative;
+	width: 100%; box-sizing: border-box;
+	&.disabled { opacity: 0.5; pointer-events: none; }
+}
+
+#section-selected {
+	width: 100%; box-sizing: border-box;
+	background: rgba(255,255,255,0.1); color: #fff;
+	border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
+	padding: 7px 10px; font-size: 13px; font-family: inherit;
+	cursor: pointer;
+	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+	// Down arrow
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 10px center;
+	padding-right: 28px;
+	&:focus {
+		outline: none;
+		border-color: rgba(255,255,255,0.5);
+		background-color: rgba(255,255,255,0.14);
+	}
+	min-height: 18px; // ensure clickable area even when empty
+}
+
+#section-list-container {
+	display: none;
+	position: absolute; left: 0; right: 0;
+	top: 100%; // open downward (natural dropdown behavior)
+	margin-top: 2px;
+	max-height: 200px;
+	overflow-y: auto;
+	background: #3d1259; // slightly lighter than sidebar
+	border: 1px solid rgba(255,255,255,0.25);
+	border-radius: 4px;
+	z-index: 50;
+	// Visible scrollbar
+	&::-webkit-scrollbar { display: block !important; width: 5px !important; }
+	&::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25) !important; border-radius: 3px; }
+	&::-webkit-scrollbar-track { background: transparent; }
+}
+
+#section-list {
+	list-style: none;
+	margin: 0; padding: 4px 0;
+}
+
+.section-heading {
+	padding: 6px 10px;
+	font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.8);
+	text-transform: uppercase; letter-spacing: 0.3px;
+	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+	display: flex; align-items: center; gap: 6px;
+	margin-top: 4px;
+	img { width: 14px; height: 14px; flex-shrink: 0; filter: brightness(0) invert(1); }
+	&:first-child { margin-top: 0; }
+}
+
+.section-item {
+	padding: 6px 10px;
+	font-size: 12px; color: rgba(255,255,255,0.85);
+	cursor: pointer;
+	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+	display: flex; align-items: center; gap: 6px;
+	img { width: 14px; height: 14px; flex-shrink: 0; filter: brightness(0) invert(1); }
+	span { overflow: hidden; text-overflow: ellipsis; }
+	&:hover { background: rgba(255,255,255,0.12); }
+	&.section-item-selected {
+		background: @OneNotePurple;
+		color: #fff;
+	}
+}
+
+// Button row — Clip (primary) and Cancel side by side, Clip first in tab order
+#button-row {
+	display: flex; gap: 8px;
+	margin-top: 16px;
+	button {
+		flex: 1; padding: 9px 0; border: none; border-radius: 3px;
+		font-size: 14px; font-family: inherit; cursor: pointer;
+		font-weight: 600; transition: background 0.15s;
+		&:disabled { opacity: 0.5; cursor: default; }
+	}
+}
+
+#cancel-btn {
+	background: rgba(255,255,255,0.12); color: #fff;
+	&:hover { background: rgba(255,255,255,0.22); }
+}
+
+#save-btn {
+	background: @OneNotePurple; color: #fff;
+	&:hover { background: @DarkHoverColor; }
+}
+
+// Success banner — shown below buttons after successful clip
+#success-banner {
+	display: none; margin-top: 12px; padding: 12px;
+	background: rgba(105, 240, 174, 0.15); border: 1px solid rgba(105, 240, 174, 0.3);
+	border-radius: 4px; text-align: center;
+	#success-text {
+		display: block; font-size: 13px; font-weight: 600; color: #69F0AE;
+		margin-bottom: 8px;
+	}
+	#view-onenote-link {
+		display: none; width: 100%; padding: 8px 0; border: none; border-radius: 3px;
+		background: @OneNotePurple; color: #fff; font-size: 14px; font-weight: 600;
+		font-family: inherit; cursor: pointer; transition: background 0.15s;
+		&:hover { background: @DarkHoverColor; }
+		&:focus { outline: 2px solid #f8f8f8 !important; outline-offset: 1px; }
+	}
+}
+
+// Capture/status panel — below buttons, for progress and error messages
+#capture-panel {
+	display: none; flex-direction: column; gap: 6px;
+	margin-top: 10px;
+}
+
+#status-text { font-size: 12px; font-weight: 400; opacity: 0.8; }
+#progress-info { font-size: 11px; opacity: 0.6; }
+
+#progress-bar-track {
+	height: 3px; background: rgba(255,255,255,0.2);
+	border-radius: 2px; overflow: hidden;
+}
+#progress-bar-fill {
+	height: 100%; background: @DarkHoverColor;
+	border-radius: 2px; width: 0%;
+	transition: width 0.3s ease;
+}
+
+// User info footer — pinned to bottom of sidebar (direct child of #sidebar flex-column)
+#user-info {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	padding: 10px 16px;
+	border-top: 1px solid rgba(255,255,255,0.15);
+	font-size: 11px;
+	opacity: 0.75;
+	flex-shrink: 0;
+}
+
+#user-info-right {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	min-width: 0;
+	gap: 2px;
+	margin-left: auto;
+}
+
+#user-email {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 180px;
+	text-align: right;
+}
+
+#feedback-link, #signout-link {
+	color: rgba(255,255,255,0.85);
+	text-decoration: none;
+	white-space: nowrap;
+	cursor: pointer;
+	&:hover { text-decoration: underline; color: #fff; }
+}
+
+.feedback-icon {
+	width: 14px;
+	height: 14px;
+	vertical-align: middle;
+	margin-right: 4px;
+	opacity: 0.85;
+}
+
+// Region thumbnails
+.region-thumb {
+	position: relative;
+	margin: 16px 12px;
+	overflow: visible;
+	img {
+		width: 100%;
+		display: block;
+		border: 1px solid #ddd;
+		border-radius: 3px;
+	}
+}
+
+.region-remove-btn {
+	position: absolute;
+	top: -10px;
+	left: -10px;
+	z-index: 10;
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	border: none;
+	background: #e74c3c;
+	color: #fff;
+	font-size: 14px;
+	line-height: 22px;
+	text-align: center;
+	padding: 0;
+	cursor: pointer;
+	&:hover { background: #c0392b; }
+}
+
+.region-add-btn {
+	display: block;
+	width: calc(100% - 32px);
+	margin: 16px;
+	padding: 18px 10px;
+	background: none;
+	border: 2px dashed #999; // ~3.4:1 on #f3f2f1 (was #bbb at ~1.7:1, failed SC 1.4.11)
+	border-radius: 6px;
+	color: #555; // ~5.9:1 on #f3f2f1
+	font-size: 14px;
+	font-family: inherit;
+	cursor: pointer;
+	text-align: center;
+	&:hover { border-color: #777; color: #333; background: rgba(0,0,0,0.03); }
+}
+
+// --- Sign-in overlay (full-window, covers everything) ---
+#signin-overlay {
+	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+	z-index: 100;
+	background: @DarkBackgroundColor;
+	display: flex; align-items: center; justify-content: center;
+}
+
+#signin-panel {
+	display: flex; flex-direction: column;
+	align-items: center;
+	max-width: 320px; width: 100%;
+	padding: 0 24px;
+	text-align: center;
+	color: #fff;
+}
+
+.signin-logo {
+	width: 56px; height: 56px;
+	margin-bottom: 12px;
+}
+
+.signin-title {
+	font-size: 18px; font-weight: 600;
+	margin: 0 0 8px 0;
+	opacity: 0.95;
+}
+
+.signin-description {
+	font-size: 14px;
+	opacity: 0.75;
+	margin: 0 0 28px 0;
+	line-height: 1.5;
+}
+
+.signin-btn {
+	width: 100%;
+	padding: 11px 16px;
+	border: none; border-radius: 4px;
+	font-size: 14px; font-family: inherit; font-weight: 600;
+	cursor: pointer;
+	margin-bottom: 10px;
+	transition: background 0.15s;
+	background: @OneNotePurple; color: #fff;
+	&:hover { background: @DarkHoverColor; }
+	&:disabled { opacity: 0.5; cursor: default; }
+}
+
+.signin-btn-secondary {
+	background: rgba(255,255,255,0.12);
+	&:hover { background: rgba(255,255,255,0.22); }
+}
+
+.signin-error {
+	font-size: 12px;
+	color: #ff9999; // ~5.3:1 on @DarkBackgroundColor (was #ff6b6b at ~3.8:1, failed WCAG AA)
+	margin-top: 8px;
+	line-height: 1.4;
+}
+
+.signin-progress {
+	font-size: 13px;
+	opacity: 0.7;
+	margin-top: 12px;
+}
+
+// --- Focus outlines (mirrors old clipper.less @FocusOnPurpleBackground pattern) ---
+@FocusOnPurpleBackground: #f8f8f8;
+
+#sidebar button:focus,
+#sidebar a:focus,
+#sidebar textarea:focus,
+#sidebar [tabindex]:focus {
+	outline: solid 2px @FocusOnPurpleBackground !important;
+	outline-offset: 0;
+}
+
+.signin-btn:focus {
+	outline: solid 2px @FocusOnPurpleBackground !important;
+	outline-offset: 0;
+}
+
+// High contrast mode — mirrors old clipper.less
+@media (forced-colors: active) {
+	button:focus,
+	a:focus,
+	[tabindex]:focus {
+		outline: solid 2px Highlight !important;
+		outline-offset: 2px !important;
+	}
+}
+
+// --- Screen reader only (mirrors old .srOnly pattern) ---
+.sr-only {
+	position: absolute; width: 1px; height: 1px;
+	padding: 0; margin: -1px; overflow: hidden;
+	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+}
+
+// Hide scrollbars globally
+::-webkit-scrollbar { display: none; }
diff --git a/src/tests/clipperUI/components/previewViewer/fullPagePreview_tests.tsx b/src/tests/clipperUI/components/previewViewer/fullPagePreview_tests.tsx
index 57647ffd..c5364b78 100644
--- a/src/tests/clipperUI/components/previewViewer/fullPagePreview_tests.tsx
+++ b/src/tests/clipperUI/components/previewViewer/fullPagePreview_tests.tsx
@@ -113,12 +113,7 @@ export class FullPagePreviewTests extends TestModule {
 			let images = previewBody.getElementsByTagName("IMG");
 
 			let imageDataInState = mockClipperState.fullPageResult.data;
-			strictEqual(images.length, imageDataInState.Images.length);
-
-			for (let i = 0; i < images.length; i++) {
-				let image = images[i] as HTMLImageElement;
-				strictEqual(image.src, "data:image/" + imageDataInState.ImageFormat + ";" + imageDataInState.ImageEncoding + "," + imageDataInState.Images[i]);
-			}
+			strictEqual(images.length, imageDataInState.ImageBlob ? 1 : 0);
 		});
 
 		test("When the full page screenshot response is a failure, the preview should display an error message in Full Page mode", () => {
@@ -146,9 +141,8 @@ export class FullPagePreviewTests extends TestModule {
 		state.currentMode.set(ClipMode.FullPage);
 		state.fullPageResult = {
 			data: {
-				ImageEncoding: "jpeg",
-				ImageFormat: "base64",
-				Images: ["abc", "def"]
+				ImageFormat: "jpeg",
+				ImageBlob: new Blob(["test"], { type: "image/jpeg" })
 			},
 			status: Status.Succeeded
 		};
diff --git a/src/tests/contentCapture/augmentationHelper_tests.ts b/src/tests/contentCapture/augmentationHelper_tests.ts
index 06122bd0..7a1eacb0 100644
--- a/src/tests/contentCapture/augmentationHelper_tests.ts
+++ b/src/tests/contentCapture/augmentationHelper_tests.ts
@@ -1,118 +1,56 @@
-import * as sinon from "sinon";
-
-import {Constants} from "../../scripts/constants";
-
-import {Clipper} from "../../scripts/clipperUI/frontEndGlobals";
-
 import {AugmentationHelper, AugmentationModel} from "../../scripts/contentCapture/augmentationHelper";
 
-import {AsyncUtils} from "../asyncUtils";
 import {MithrilUtils} from "../mithrilUtils";
 import {MockProps} from "../mockProps";
 import {TestModule} from "../testModule";
 
-export class AugmentationHelperTests extends TestModule {
-	private server: sinon.SinonFakeServer;
-
+export class AugmentationHelperReadabilityTests extends TestModule {
 	protected module() {
-		return "augmentationHelper-sinon";
-	}
-
-	protected beforeEach() {
-		this.server = sinon.fakeServer.create();
-		this.server.respondImmediately = true;
-
-		AsyncUtils.mockSetTimeout();
-
-		// The augmentation call waits on the session id, so we need to set this
-		Clipper.sessionId.set("abcde");
-	}
-
-	protected afterEach() {
-		this.server.restore();
-		AsyncUtils.restoreSetTimeout();
-		Clipper.sessionId.set(undefined);
+		return "augmentationHelper-readability";
 	}
 
 	protected tests() {
-		test("makeAugmentationRequest should return the parsed response and the original xhr in the resolved promise", (assert: QUnitAssert) => {
+		test("augmentPage should return Article content model when page has readable content", (assert: QUnitAssert) => {
 			let done = assert.async();
 
-			let state = MockProps.getMockClipperState();
-			let pageInfo = state.pageInfo;
-
-			let responseJson = [{
-				ContentModel: 1,
-				ContentInHtml: "Hello world",
-				ContentObjects: []
-			}];
-			this.server.respondWith(
-				"POST", Constants.Urls.augmentationApiUrl + "?renderMethod=extractAggressive&url=" + pageInfo.canonicalUrl + "&lang=" + pageInfo.contentLocale,
-				[200, { "Content-Type": "application/json" },
-				JSON.stringify(responseJson)
-			]);
-
-			AugmentationHelper.makeAugmentationRequest(pageInfo.canonicalUrl, pageInfo.contentLocale, pageInfo.contentData, "abc123").then((responsePackage) => {
-				deepEqual(responsePackage.parsedResponse, responseJson, "The parsedResponse field should be the response in json form");
-				ok(responsePackage.response, "The response field should be defined");
-			}).catch((error) => {
-				ok(false, "reject should not be called");
-			}).then(() => {
-				done();
-			});
+			let paragraphs = "";
+			for (let i = 0; i < 10; i++) {
+				paragraphs += "<p>This is a test article with enough content to be parsed by Readability. It needs sufficient text to pass the content threshold. </p>";
+			}
+			let html = "<html><head><title>Test Article</title></head><body><article>" + paragraphs + "</article></body></html>";
+
+			AugmentationHelper.augmentPage("http://example.com", "en-US", html).then((result) => {
+				strictEqual(result.ContentModel, AugmentationModel.Article, "ContentModel should be Article");
+				ok(result.ContentInHtml && result.ContentInHtml.length > 0, "ContentInHtml should not be empty");
+				ok(result.PageMetadata, "PageMetadata should be defined");
+			}).then(() => { done(); });
 		});
 
-		test("makeAugmentationRequest should return the error object in the rejected promise if the status code is not 200", (assert: QUnitAssert) => {
+		test("augmentPage should return None content model when page is not readable", (assert: QUnitAssert) => {
 			let done = assert.async();
+			let html = "<html><body><nav>Just navigation</nav></body></html>";
 
-			let state = MockProps.getMockClipperState();
-			let pageInfo = state.pageInfo;
-
-			let responseJson = "A *spooky* 404 message!";
-			this.server.respondWith(
-				"POST", Constants.Urls.augmentationApiUrl + "?renderMethod=extractAggressive&url=" + pageInfo.canonicalUrl + "&lang=" + pageInfo.contentLocale,
-				[404, { "Content-Type": "application/json" },
-				JSON.stringify(responseJson)
-			]);
-
-			AugmentationHelper.makeAugmentationRequest(pageInfo.canonicalUrl, pageInfo.contentLocale, pageInfo.contentData, "abc123").then((responsePackage) => {
-				ok(false, "resolve should not be called");
-			}).catch((error) => {
-				deepEqual(error,
-					{ error: "Unexpected response status", statusCode: 404, responseHeaders: { "Content-Type": "application/json" }, response: JSON.stringify(responseJson), timeout: 30000 },
-					"The error object should be returned in the reject");
-			}).then(() => {
-				done();
-			});
+			AugmentationHelper.augmentPage("http://example.com", "en-US", html).then((result) => {
+				strictEqual(result.ContentModel, AugmentationModel.None, "ContentModel should be None for non-readable pages");
+			}).then(() => { done(); });
 		});
 
-		test("makeAugmentationRequest should return the error object in the rejected promise if the status code is 200, but the response cannot be parsed as json", (assert: QUnitAssert) => {
+		test("augmentPage should populate PageMetadata from Readability output", (assert: QUnitAssert) => {
 			let done = assert.async();
 
-			let state = MockProps.getMockClipperState();
-			let pageInfo = state.pageInfo;
-
-			let obj = [{
-				ContentModel: 1,
-				ContentInHtml: "Hello world",
-				ContentObjects: []
-			}];
-			let unJsonifiableString = "{" + JSON.stringify(obj);
-			this.server.respondWith(
-				"POST", Constants.Urls.augmentationApiUrl + "?renderMethod=extractAggressive&url=" + pageInfo.canonicalUrl + "&lang=" + pageInfo.contentLocale,
-				[200, { "Content-Type": "application/json" },
-				unJsonifiableString
-			]);
-
-			AugmentationHelper.makeAugmentationRequest(pageInfo.canonicalUrl, pageInfo.contentLocale, pageInfo.contentData, "abc123").then((responsePackage) => {
-				ok(false, "resolve should not be called");
-			}).catch((error) => {
-				deepEqual(error,
-					{ error: "Unable to parse response", statusCode: 200, responseHeaders: { "Content-Type": "application/json" }, response: unJsonifiableString },
-					"The error object should be returned in the reject");
-			}).then(() => {
-				done();
-			});
+			let paragraphs = "";
+			for (let i = 0; i < 20; i++) {
+				paragraphs += "<p>Long article content here for readability extraction to work properly. </p>";
+			}
+			let html = "<html><head><title>Great Article</title>" +
+				'<meta name="author" content="John Doe">' +
+				'<meta name="description" content="A great article">' +
+				"</head><body><article>" + paragraphs + "</article></body></html>";
+
+			AugmentationHelper.augmentPage("http://example.com", "en-US", html).then((result) => {
+				ok(result.PageMetadata, "PageMetadata should be populated");
+				strictEqual(result.PageMetadata.title, "Great Article", "Title should be extracted");
+			}).then(() => { done(); });
 		});
 	}
 }
@@ -183,5 +121,5 @@ export class AugmentationHelperSinonTests extends TestModule {
 	}
 }
 
-(new AugmentationHelperTests()).runTests();
+(new AugmentationHelperReadabilityTests()).runTests();
 (new AugmentationHelperSinonTests()).runTests();
diff --git a/src/tests/saveToOneNote/oneNoteSaveableFactory_tests.ts b/src/tests/saveToOneNote/oneNoteSaveableFactory_tests.ts
index 20cc8a1b..ca2756a4 100644
--- a/src/tests/saveToOneNote/oneNoteSaveableFactory_tests.ts
+++ b/src/tests/saveToOneNote/oneNoteSaveableFactory_tests.ts
@@ -22,7 +22,7 @@ export class OneNoteSaveableFactoryTests extends TestModule {
 			let clipperState = MockProps.getMockClipperState();
 
 			clipperState.currentMode.set(ClipMode.FullPage);
-			clipperState.fullPageResult.data.Images = ["data:image/png;base64,iVBORw0KGgo"];
+			clipperState.fullPageResult.data.ImageBlob = new Blob(["test"], { type: "image/jpeg" });
 			clipperState.fullPageResult.status = Status.Succeeded;
 
 			let factory = new OneNoteSaveableFactory(clipperState);