Add region overlay instruction bar, mode button tooltips, notebook refresh fix

Region overlay: Shadow DOM instruction bar with i18n text + "Back (Esc)"
button, CSS-isolated from page styles. Escape/Back stays in region mode
instead of switching to full page. Worker injects i18n strings via
window.__regionStrings before overlay script.

Renderer: add mode button tooltips using existing i18n keys. Remove token
expiry pre-check from notebook fetch so newly created sections appear.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: wikirby

docs/unified-window-plan.md

@@ -214,7 +214,8 @@ Plain HTML + TypeScript — no Mithril dependency:
 ### 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
-- **Selection**: Mouse drag draws rectangle. Min 5px. Esc cancels.
+- **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%

src/scripts/extensions/regionOverlay.ts

@@ -17,6 +17,41 @@
 
 	// 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")!;
@@ -62,8 +97,10 @@
 	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;
@@ -93,6 +130,7 @@
 
 		if (w < 5 || h < 5) {
 			// Too small — reset and let user try again
+			instrHost.style.display = "";
 			draw();
 			return;
 		}

src/scripts/extensions/webExtensionBase/webExtensionWorker.ts

@@ -675,16 +675,24 @@ export class WebExtensionWorker extends ExtensionWorkerBase<W3CTab, number> {
 
 				if (message.action === "startRegion") {
 					// Focus original tab, inject standalone overlay, listen for result
-					let regionTabId = this.tab.id;
+					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 },
-								files: ["regionOverlay.js"]
+								func: function(s: any) { (window as any).__regionStrings = s; },
+								args: [regionStrings]
+							}, () => {
+								WebExtension.browser.scripting.executeScript({
+									target: { tabId: regionTabId },
+									files: ["regionOverlay.js"]
+								});
 							});
 						});
 					});

src/scripts/renderer.ts

@@ -145,6 +145,17 @@ document.querySelectorAll(".mode-btn").forEach((btn) => {
 });
 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
@@ -440,12 +451,10 @@ async function fetchFreshNotebooks() {
 		if (!userInfoRaw) { return; }
 		let userInfo = JSON.parse(userInfoRaw);
 		let accessToken = userInfo && userInfo.data ? userInfo.data.accessToken : "";
-		let lastUpdated = userInfo ? userInfo.lastUpdated : 0;
-		let tokenExp = userInfo && userInfo.data ? userInfo.data.accessTokenExpiration : 0;
 		if (!accessToken) { return; }
-		// accessTokenExpiration is relative (seconds until expiry), not absolute
-		// Matches CachedHttp.valueHasExpired: (lastUpdated + expiration*1000 - 180000) < Date.now()
-		if (tokenExp && lastUpdated && (lastUpdated + tokenExp * 1000 - 180000) < Date.now()) { 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)";
@@ -872,7 +881,13 @@ function startRegionCapture() {
 	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" });
+	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() {
@@ -1438,14 +1453,10 @@ port.onMessage.addListener((message: any) => {
 	}
 
 	if (message.action === "regionCancelled") {
-		if (fullPageComplete) {
-			document.querySelectorAll(".mode-btn").forEach((b) => b.classList.remove("selected"));
-			let fpBtn = document.querySelector('.mode-btn[data-mode="fullpage"]');
-			if (fpBtn) { fpBtn.classList.add("selected"); }
-			switchToFullPage();
-		} else {
-			capturePanel.style.display = "none";
-		}
+		// 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") {